/* =========================================================
   QM - PRODUCT CARDS SYMMETRISCH + MOBILE TEXT FIX
   PLAATS HELEMAAL ONDERAAN
========================================================= */

/* Grid desktop/tablet symmetrisch */
.page-index .featured-products .products,
.featured-products .products,
.products,
#js-product-list .products {
  display: grid !important;
  grid-template-columns: repeat(4, 220px) !important;
  justify-content: center !important;
  gap: 34px 26px !important;
}

/* =========================================================
   QM PHASE 1B - PREMIUM HEADER, TYPE & RESPONSIVE ALIGNMENT
   Added 2026-07-22. Keep this block at the end of custom.css.
========================================================= */

:root {
  --qm-black: #080808;
  --qm-ink: #171717;
  --qm-gold: #c9a33f;
  --qm-gold-dark: #aa8121;
  --qm-ivory: #f8f6f1;
  --qm-line: rgba(201, 163, 63, .34);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  font-family: "Manrope", Arial, sans-serif !important;
}

#header,
#header * {
  box-sizing: border-box;
}

#header {
  background: var(--qm-black) !important;
  box-shadow: none !important;
}

#header .header-nav {
  display: block !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  background: #050505 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--qm-line) !important;
  box-shadow: none !important;
}

#header .header-nav > .container {
  display: block !important;
  width: calc(100% - 32px) !important;
  max-width: 1140px !important;
  height: 38px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#header .header-nav > .container > .row {
  display: block !important;
  width: 100% !important;
  height: 38px !important;
  margin: 0 !important;
}

@media (min-width: 768px) {
  #header .header-nav .row > .hidden-sm-down {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header .header-nav .row > .hidden-sm-down > .col-md-5,
  #header .header-nav .row > .hidden-sm-down > .right-nav {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #header .header-nav .right-nav {
    justify-content: flex-end !important;
    min-width: 0 !important;
  }

  #header .header-nav .right-nav > div,
  #header .header-nav #contact-link {
    display: flex !important;
    align-items: center !important;
    height: 38px !important;
    padding: 0 9px !important;
  }

  #header .header-nav a,
  #header .header-nav span,
  #header .header-nav button {
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: .01em !important;
  }

  #header .header-top {
    display: block !important;
    position: relative !important;
    min-height: 86px !important;
    height: 86px !important;
    padding: 0 !important;
    background: linear-gradient(180deg, #111 0%, #080808 100%) !important;
    border-bottom: 1px solid var(--qm-line) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .14) !important;
  }

  #header .header-top > .container {
    display: block !important;
    position: relative !important;
    width: calc(100% - 32px) !important;
    max-width: 1140px !important;
    min-width: 0 !important;
    height: 86px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #header .header-top > .container > .row:not(#mobile_top_menu_wrapper) {
    display: grid !important;
    grid-template-columns: 170px minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    height: 86px !important;
    margin: 0 !important;
  }

  #header #_desktop_logo {
    display: flex !important;
    position: static !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #header #_desktop_logo a {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
  }

  #header #_desktop_logo img,
  #header #_desktop_logo .logo {
    display: block !important;
    width: auto !important;
    max-width: 154px !important;
    max-height: 46px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  #header .header-top-right {
    display: grid !important;
    position: static !important;
    grid-template-columns: minmax(360px, 1fr) 330px !important;
    align-items: center !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #header #_desktop_top_menu,
  #header #_desktop_top_menu > .top-menu,
  #header #_desktop_top_menu .top-menu[data-depth="0"] {
    display: flex !important;
    position: static !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #header #_desktop_top_menu .top-menu[data-depth="0"] {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 18px !important;
  }

  #header #_desktop_top_menu .top-menu[data-depth="0"] > li {
    display: block !important;
    position: relative !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    white-space: nowrap !important;
  }

  #header #_desktop_top_menu .top-menu[data-depth="0"] > li > a {
    display: flex !important;
    align-items: center !important;
    min-height: 42px !important;
    padding: 0 !important;
    color: #f7f4ed !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: .025em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
  }

  #header #_desktop_top_menu .top-menu[data-depth="0"] > li > a:hover,
  #header #_desktop_top_menu .top-menu[data-depth="0"] > li > a:focus {
    color: var(--qm-gold) !important;
  }

  /* Closed desktop submenus must not create invisible horizontal overflow. */
  #header #_desktop_top_menu .top-menu[data-depth="0"] > li:not(:hover):not(:focus-within) > .sub-menu,
  #header #_desktop_top_menu .top-menu[data-depth="0"] > li:not(:hover):not(:focus-within) > .collapse {
    display: none !important;
  }

  #header #search_widget {
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: auto !important;
  }

  #header #search_widget form {
    display: flex !important;
    position: relative !important;
    align-items: center !important;
    width: 100% !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid rgba(201, 163, 63, .78) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
  }

  #header #search_widget form input[type="text"],
  #header #search_widget form input[type="search"] {
    width: 100% !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 16px 0 54px !important;
    color: #262626 !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 40px !important;
  }

  #header #search_widget form button {
    display: flex !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    background: var(--qm-gold) !important;
    border: 0 !important;
    border-radius: 999px 0 0 999px !important;
    box-shadow: none !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  #header .header-top > .container > .row:not(#mobile_top_menu_wrapper) {
    grid-template-columns: 150px minmax(0, 1fr) !important;
  }

  #header #_desktop_logo img,
  #header #_desktop_logo .logo {
    max-width: 138px !important;
    max-height: 42px !important;
  }

  #header .header-top-right {
    grid-template-columns: minmax(350px, 1fr) 250px !important;
    gap: 18px !important;
  }

  #header #_desktop_top_menu .top-menu[data-depth="0"] {
    gap: 12px !important;
  }

  #header #_desktop_top_menu .top-menu[data-depth="0"] > li > a {
    font-size: 11px !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #header .header-nav > .container,
  #header .header-top > .container {
    width: calc(100% - 24px) !important;
  }

  #header .header-nav a,
  #header .header-nav span,
  #header .header-nav button {
    font-size: 10px !important;
  }

  #header .header-nav .right-nav > div,
  #header .header-nav #contact-link {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }

  #header .header-top > .container > .row:not(#mobile_top_menu_wrapper) {
    grid-template-columns: 130px minmax(0, 1fr) !important;
  }

  #header #_desktop_logo img,
  #header #_desktop_logo .logo {
    max-width: 120px !important;
    max-height: 38px !important;
  }

  #header .header-top-right {
    grid-template-columns: minmax(340px, 1fr) 210px !important;
    gap: 14px !important;
  }

  #header #_desktop_top_menu .top-menu[data-depth="0"] {
    gap: 8px !important;
  }

  #header #_desktop_top_menu .top-menu[data-depth="0"] > li > a {
    font-size: 10px !important;
    letter-spacing: .01em !important;
  }

  #header #search_widget form input[type="text"],
  #header #search_widget form input[type="search"] {
    font-size: 11px !important;
  }
}

/* The homepage carousel stays inside the content column at every width. */
body#index #carousel {
  display: block !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin: 26px auto 12px !important;
  padding: 0 !important;
  transform: none !important;
  overflow: hidden !important;
}

body#index #carousel .carousel-inner,
body#index #carousel .carousel-item,
body#index #carousel .carousel-item.active {
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

body#index #carousel img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* Calm, professional type hierarchy. */
.featured-products .products-section-title,
.product-accessories .products-section-title,
#products .products-section-title,
body#index h2,
body#index h3 {
  color: var(--qm-ink) !important;
  font-weight: 500 !important;
  letter-spacing: .025em !important;
  text-shadow: none !important;
}

.product-miniature .product-title,
.product-miniature .product-title a {
  color: var(--qm-ink) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -.005em !important;
  text-shadow: none !important;
}

.product-miniature .product-price-and-shipping,
.product-miniature .price {
  color: #121212 !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
  text-shadow: none !important;
}

.qm-trustbar strong {
  font-weight: 600 !important;
  letter-spacing: .025em !important;
  text-shadow: none !important;
}

.qm-trustbar div,
.qm-trustbar span,
.qm-trustbar small {
  font-weight: 400 !important;
  text-shadow: none !important;
}

.product-miniature .product-description {
  min-width: 0 !important;
}

.product-miniature .product-price-and-shipping {
  margin-top: auto !important;
}

.product-miniature .qm-product-card__cta {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 42px !important;
  margin-top: 9px !important;
  padding: 0 14px !important;
  color: #101010 !important;
  background: var(--qm-gold) !important;
  border: 1px solid var(--qm-gold) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .015em !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
}

.product-miniature .qm-product-card__cta:hover,
.product-miniature .qm-product-card__cta:focus {
  color: #fff !important;
  background: var(--qm-gold-dark) !important;
  border-color: var(--qm-gold-dark) !important;
  outline: none !important;
}

@media (max-width: 767.98px) {
  #header .header-nav {
    height: 64px !important;
    min-height: 64px !important;
  }

  #header .header-nav > .container {
    width: 100% !important;
    max-width: none !important;
    height: 64px !important;
    padding: 0 14px !important;
  }

  #header .header-nav > .container > .row {
    height: 64px !important;
  }

  #header .header-nav .mobile {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px 42px !important;
    grid-template-areas: "menu logo user cart" !important;
    align-items: center !important;
    width: 100% !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header #menu-icon {
    grid-area: menu !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 42px !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #header #_mobile_logo {
    grid-area: logo !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #header #_mobile_logo img,
  #header #_mobile_logo .logo {
    display: block !important;
    width: auto !important;
    max-width: 132px !important;
    max-height: 42px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  #header #_mobile_user_info {
    grid-area: user !important;
  }

  #header #_mobile_cart {
    grid-area: cart !important;
  }

  #header #_mobile_user_info,
  #header #_mobile_cart {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #header #_mobile_user_info a,
  #header #_mobile_cart a {
    font-size: 0 !important;
  }

  #header #_mobile_user_info .material-icons,
  #header #_mobile_cart .material-icons,
  #header #menu-icon .material-icons {
    color: #fff !important;
    font-size: 24px !important;
    font-weight: 400 !important;
  }

  #header #_mobile_cart .cart-products-count {
    color: var(--qm-gold) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
  }

  #header .header-nav .mobile > .clearfix {
    display: none !important;
  }

  #header .header-top {
    display: block !important;
    position: relative !important;
    min-height: 64px !important;
    height: auto !important;
    padding: 10px 14px !important;
    background: linear-gradient(180deg, #111 0%, #080808 100%) !important;
    border-bottom: 1px solid var(--qm-line) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12) !important;
  }

  #header .header-top > .container {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 44px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header .header-top > .container > .row:not(#mobile_top_menu_wrapper) {
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header .header-top-right {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #header #search_widget {
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #header #search_widget form {
    display: flex !important;
    position: relative !important;
    align-items: center !important;
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid rgba(201, 163, 63, .78) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
  }

  #header #search_widget form input[type="text"],
  #header #search_widget form input[type="search"] {
    width: 100% !important;
    height: 42px !important;
    padding: 0 14px 0 50px !important;
    color: #262626 !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 400 !important;
  }

  #header #search_widget form button {
    display: flex !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    background: var(--qm-gold) !important;
    border: 0 !important;
    border-radius: 999px 0 0 999px !important;
    box-shadow: none !important;
  }

  body#index #carousel {
    margin-top: 16px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }

  .featured-products .products-section-title,
  .product-accessories .products-section-title,
  #products .products-section-title {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  .product-miniature .product-title,
  .product-miniature .product-title a {
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }

  .product-miniature .product-price-and-shipping,
  .product-miniature .price {
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  .product-miniature .qm-product-card__cta {
    min-height: 40px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 479.98px) {
  #header #_mobile_logo img,
  #header #_mobile_logo .logo {
    max-width: calc(116px) !important;
  }
}

/* Product container reset */
.product-miniature,
.page-index .featured-products .product {
  width: 220px !important;
  max-width: 220px !important;
  min-width: 220px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Kaarten allemaal exact gelijk */
.product-miniature .thumbnail-container {
  width: 220px !important;
  max-width: 220px !important;
  min-width: 220px !important;
  height: 330px !important;
  min-height: 330px !important;
  max-height: 330px !important;

  display: flex !important;
  flex-direction: column !important;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.98) 0%,
    rgba(249,245,237,.98) 100%
  ) !important;

  border: 1px solid rgba(212,175,55,.22) !important;
  border-radius: 22px !important;
  overflow: hidden !important;

  box-shadow: 0 12px 30px rgba(0,0,0,.08) !important;
}

/* Afbeeldingsvlak vaste hoogte */
.product-miniature .thumbnail-container .product-thumbnail {
  height: 175px !important;
  min-height: 175px !important;
  max-height: 175px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 16px 14px 6px !important;
  background: transparent !important;
}

/* Afbeeldingen nooit uitrekken */
.product-miniature .thumbnail-container .product-thumbnail img,
.product-miniature .thumbnail-container img {
  max-width: 175px !important;
  max-height: 145px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Tekstvlak vaste opbouw */
.product-miniature .product-description {
  flex: 1 1 auto !important;
  height: 155px !important;
  min-height: 155px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;

  padding: 8px 12px 14px !important;
  background: transparent !important;
  text-align: center !important;
  overflow: hidden !important;
}

/* Titel max 2 regels, niet eruit lopen */
.product-miniature .product-title,
.product-miniature .product-title a {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;

  min-height: 38px !important;
  max-height: 38px !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;

  color: #111 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;

  margin: 0 0 8px 0 !important;
}

/* Prijs altijd onder titel en binnen kaart */
.product-miniature .price,
.product-miniature .product-price,
.product-miniature .product-price-and-shipping {
  display: block !important;
  width: 100% !important;

  color: #b8860b !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  margin-top: auto !important;
}

/* Wishlist kleiner en gelijk */
.product-miniature .wishlist-button-add {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;

  top: 10px !important;
  right: 10px !important;

  border-radius: 14px !important;
}

/* Tablet: 3 kolommen */
@media (max-width: 1199px) and (min-width: 768px) {
  .page-index .featured-products .products,
  .featured-products .products,
  .products,
  #js-product-list .products {
    grid-template-columns: repeat(3, 220px) !important;
  }
}

/* Mobiel: 2 gelijke kolommen */
@media (max-width: 767px) {

  .page-index .featured-products .products,
  .featured-products .products,
  .products,
  #js-product-list .products {
    grid-template-columns: repeat(2, minmax(0, 150px)) !important;
    gap: 22px 14px !important;
    justify-content: center !important;
  }

  .product-miniature,
  .page-index .featured-products .product {
    width: 150px !important;
    max-width: 150px !important;
    min-width: 150px !important;
  }

  .product-miniature .thumbnail-container {
    width: 150px !important;
    max-width: 150px !important;
    min-width: 150px !important;

    height: 245px !important;
    min-height: 245px !important;
    max-height: 245px !important;

    border-radius: 18px !important;
  }

  .product-miniature .thumbnail-container .product-thumbnail {
    height: 125px !important;
    min-height: 125px !important;
    max-height: 125px !important;

    padding: 12px 10px 4px !important;
  }

  .product-miniature .thumbnail-container .product-thumbnail img,
  .product-miniature .thumbnail-container img {
    max-width: 118px !important;
    max-height: 96px !important;
  }

  .product-miniature .product-description {
    height: 120px !important;
    min-height: 120px !important;
    padding: 6px 8px 10px !important;
  }

  .product-miniature .product-title,
  .product-miniature .product-title a {
    min-height: 34px !important;
    max-height: 34px !important;

    font-size: 12px !important;
    line-height: 1.35 !important;

    margin-bottom: 6px !important;
  }

  .product-miniature .price,
  .product-miniature .product-price,
  .product-miniature .product-price-and-shipping {
    font-size: 17px !important;
    line-height: 1.1 !important;
  }

  .product-miniature .wishlist-button-add {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;

    top: 8px !important;
    right: 8px !important;

    border-radius: 12px !important;
  }

  .product-miniature .wishlist-button-add i,
  .product-miniature .wishlist-button-add .material-icons {
    font-size: 18px !important;
  }
}/* =========================================================
   QUALITY MOTORS - CUSTOM.CSS FINAL
========================================================= */

/* =========================================================
   1) BASIS
========================================================= */

:root{
  --qm-gold:#d4af37;
  --qm-gold-dark:#b8860b;
  --qm-black:#050505;
  --qm-white:#ffffff;
}

/* =========================================================
   2) ACHTERGROND
========================================================= */

html,
body{
  background-color:#f4f0e8 !important;
  background-image:url('/webshop/img/webshopimgqm-pattern-bg.png') !important;
  background-repeat:repeat !important;
  background-size:170px auto !important;
  background-position:center top !important;
  background-attachment:fixed !important;
}

#wrapper,
.page-index #wrapper{
  background:rgba(255,255,255,.16) !important;
  box-shadow:none !important;
}

#wrapper .container,
#main,
.featured-products,
#products,
#js-product-list{
  background:transparent !important;
}

/* =========================================================
   3) HEADER
========================================================= */

#header,
#header .header-top{
  background:linear-gradient(
    to bottom,
    #050505 0%,
    #111111 32%,
    #f8f8f8 100%
  ) !important;

  border-bottom:1px solid rgba(212,175,55,.18) !important;
  box-shadow:0 10px 32px rgba(0,0,0,.10) !important;
}

/* Topbar */
#header .header-nav{
  background:#050505 !important;
  border-bottom:1px solid rgba(212,175,55,.18) !important;
  min-height:42px !important;
  padding:0 !important;
}

#header .header-nav .container{
  min-height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}

/* Topbar tekst */
#header .header-nav,
#header .header-nav a,
#header .header-nav span{
  color:#ffffff !important;
  font-size:11px !important;
  font-weight:500 !important;
}

/* Topbar iconen */
#header .header-nav i,
#header .header-nav .material-icons{
  color:var(--qm-gold) !important;
  font-size:14px !important;
}

/* Header spacing */
#header .header-top{
  padding-top:8px !important;
  padding-bottom:8px !important;
}

/* Logo */
#_desktop_logo img,
#header .logo{
  max-height:58px !important;
  width:auto !important;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.25)) !important;
}

/* =========================================================
   4) MENU
========================================================= */

#_desktop_top_menu .top-menu[data-depth="0"] > li > a,
#top-menu .top-menu[data-depth="0"] > li > a{
  color:#ffffff !important;
  font-weight:500 !important;
  font-size:13px !important;
  padding:8px 12px !important;
  letter-spacing:.02em !important;
  text-shadow:0 1px 5px rgba(0,0,0,.35) !important;
}

#_desktop_top_menu .top-menu[data-depth="0"] > li > a:hover,
#top-menu .top-menu[data-depth="0"] > li > a:hover{
  color:var(--qm-gold) !important;
}

/* =========================================================
   5) SEARCHBAR
========================================================= */

#search_widget{
  max-width:340px !important;
}

#search_widget form{
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(212,175,55,.22) !important;
  border-radius:999px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.12) !important;
  overflow:hidden !important;
}

#search_widget input{
  height:46px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:#222 !important;
  padding-left:18px !important;
}

#search_widget button,
#search_widget .search{
  width:46px !important;
  height:46px !important;
  background:linear-gradient(
    135deg,
    #d4af37,
    #b8860b
  ) !important;

  border:0 !important;
  color:#fff !important;
}

/* =========================================================
   6) WINKELWAGEN
========================================================= */

#_desktop_cart,
#_desktop_cart .blockcart{
  background:transparent !important;
  border:0 !important;
}

#_desktop_cart .blockcart a{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;

  background:rgba(212,175,55,.10) !important;
  border:1px solid rgba(212,175,55,.28) !important;

  border-radius:999px !important;

  padding:8px 14px !important;
  margin-left:8px !important;

  transition:all .2s ease !important;
}

#_desktop_cart .blockcart a:hover{
  background:rgba(212,175,55,.14) !important;
}

#_desktop_cart i,
#_desktop_cart .material-icons{
  color:var(--qm-gold) !important;
}

#_desktop_cart span,
#_desktop_cart .cart-products-count{
  color:#fff !important;
  font-size:13px !important;
  font-weight:600 !important;
}

/* =========================================================
   7) SLIDER
========================================================= */

.carousel,
#carousel,
.nivoslider{
  border-radius:16px !important;
  overflow:hidden !important;

  box-shadow:
    0 20px 50px rgba(0,0,0,.16),
    0 0 0 1px rgba(212,175,55,.14) !important;
}

.carousel img,
.carousel-item img{
  display:block !important;
  width:100% !important;
  border-bottom:0 !important;
}

/* =========================================================
   8) PRODUCTEN
========================================================= */

.page-index .featured-products .products{
  max-width:980px !important;
  margin:0 auto !important;

  display:flex !important;
  justify-content:center !important;
  gap:18px !important;
}

.page-index .featured-products .product{
  flex:0 0 220px !important;
  max-width:220px !important;
  padding:0 !important;
}

.product-miniature .thumbnail-container{
  width:220px !important;

  background:rgba(255,255,255,.94) !important;

  border-radius:20px !important;
  overflow:hidden !important;

  border:1px solid rgba(212,175,55,.13) !important;

  box-shadow:
    0 14px 36px rgba(0,0,0,.075) !important;

  transition:all .25s ease !important;
}

.product-miniature .thumbnail-container:hover{
  transform:translateY(-6px);
  box-shadow:
    0 24px 54px rgba(0,0,0,.14) !important;
}

.product-thumbnail img{
  transition:transform .35s ease;
}

.product-miniature:hover .product-thumbnail img{
  transform:scale(1.04);
}

.product-title a{
  font-weight:600 !important;
  color:#111 !important;
}

.price,
.product-price{
  color:var(--qm-gold-dark) !important;
  font-weight:800 !important;
}

/* =========================================================
   9) BUTTONS
========================================================= */

.btn-primary,
button,
.btn{
  border-radius:12px !important;

  background:linear-gradient(
    135deg,
    #d4af37,
    #b8860b
  ) !important;

  border:none !important;

  box-shadow:
    0 8px 18px rgba(212,175,55,.25);

  transition:all .25s ease;
}

.btn-primary:hover,
button:hover,
.btn:hover{
  transform:translateY(-2px);

  box-shadow:
    0 12px 25px rgba(212,175,55,.35);
}

/* =========================================================
   10) MOBILE
========================================================= */

@media (max-width:767px){

  #header,
  #header .header-top{
    background:linear-gradient(
      to bottom,
      #050505 0%,
      #111111 45%,
      #f8f8f8 100%
    ) !important;
  }

  #search_widget{
    max-width:100% !important;
  }

  #search_widget input{
    height:44px !important;
  }

  #search_widget button{
    width:44px !important;
    height:44px !important;
  }

  .page-index .featured-products .products{
    gap:8px !important;
  }

  .product-miniature .thumbnail-container{
    width:calc(50% - 6px) !important;
  }

  body{
    background-size:220px auto !important;
  }

  #carousel{
    width:calc(100% - 28px) !important;
    max-width:calc(100% - 28px) !important;

    margin:18px auto 14px auto !important;

    border-radius:14px !important;
    overflow:hidden !important;
  }

  #carousel img{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
  }
}
/* =========================================================
   QM - MOBILE HEADER / CART / SLIDER FIX
   PLAATS HELEMAAL ONDERAAN
========================================================= */

@media (max-width: 767px) {

  /* Header compact houden */
  #header .header-nav {
    height: 88px !important;
    min-height: 88px !important;
    background: #050505 !important;
    border-bottom: 1px solid rgba(212,175,55,.22) !important;
  }

  #header .header-nav .container {
    height: 88px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
  }

  /* Logo beter centreren */
  #_mobile_logo,
  #header .logo {
    max-height: 70px !important;
  }

  #_mobile_logo img,
  #header .logo img {
    max-height: 70px !important;
    width: auto !important;
  }

  /* Winkelwagen knop kleiner en premium */
  #_mobile_cart,
  #header .header-nav .blockcart {
    width: 62px !important;
    min-width: 62px !important;
    height: 62px !important;
    background: rgba(212,175,55,.10) !important;
    border: 1px solid rgba(212,175,55,.30) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #_mobile_cart a,
  #header .header-nav .blockcart a {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #d4af37 !important;
  }

  #_mobile_cart .material-icons,
  #header .header-nav .blockcart .material-icons {
    color: #d4af37 !important;
    font-size: 24px !important;
  }

  #_mobile_cart .cart-products-count,
  #header .header-nav .cart-products-count {
    color: #fff !important;
    font-size: 12px !important;
    margin-left: 2px !important;
  }

  /* Zoekbalk netjes onder header */
  #search_widget {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin: 14px auto 18px auto !important;
    display: block !important;
  }

  #search_widget form {
    height: 50px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
  }

  #search_widget input {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 64px 0 56px !important;
    font-size: 15px !important;
  }

  #search_widget button,
  #search_widget .search {
    left: 0 !important;
    right: auto !important;
    width: 56px !important;
    height: 50px !important;
    border-radius: 999px 0 0 999px !important;
  }

  /* Slider gecentreerd en niet half buiten beeld */
  body#index #carousel,
  body#index .carousel {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin: 18px auto 18px auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  body#index #carousel .carousel-inner,
  body#index .carousel .carousel-inner {
    width: 100% !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  body#index #carousel img,
  body#index .carousel img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* Slider pijlen minder lomp */
  body#index .carousel-control,
  body#index .carousel-control-prev,
  body#index .carousel-control-next {
    width: 34px !important;
    max-width: 34px !important;
    background: rgba(0,0,0,.35) !important;
  }
}/* QM - mobiel account knop premium */
@media (max-width: 767px) {

  #_mobile_user_info,
  #header .user-info {
    width: 62px !important;
    min-width: 62px !important;
    height: 62px !important;

    background: rgba(212,175,55,.10) !important;
    border: 1px solid rgba(212,175,55,.30) !important;
    border-radius: 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 8px !important;
    padding: 0 !important;
  }

  #_mobile_user_info a,
  #header .user-info a {
    color: #d4af37 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #_mobile_user_info .material-icons,
  #header .user-info .material-icons {
    color: #d4af37 !important;
    font-size: 24px !important;
  }

}
/* =========================================================
   QM - PREMIUM PRODUCT CARDS
========================================================= */

.product-miniature .thumbnail-container {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.96) 0%,
    rgba(248,244,236,.96) 100%
  ) !important;

  border: 1px solid rgba(212,175,55,.22) !important;
  border-radius: 24px !important;

  overflow: hidden !important;

  box-shadow:
    0 10px 28px rgba(0,0,0,.08),
    0 0 0 1px rgba(212,175,55,.05) inset !important;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease !important;

  backdrop-filter: blur(4px);
}

/* Hover */
.product-miniature .thumbnail-container:hover {
  transform: translateY(-6px) !important;

  border-color: rgba(212,175,55,.42) !important;

  box-shadow:
    0 20px 48px rgba(0,0,0,.16),
    0 0 24px rgba(212,175,55,.10) !important;
}

/* Product afbeelding */
.product-miniature .product-thumbnail {
  padding: 22px 18px 8px !important;
  background: transparent !important;
}

.product-miniature .product-thumbnail img {
  transition: transform .35s ease !important;
}

.product-miniature:hover .product-thumbnail img {
  transform: scale(1.05) !important;
}

/* Product content */
.product-miniature .product-description {
  background: transparent !important;
  padding: 10px 16px 18px !important;
  text-align: center !important;
}

/* Titel */
.product-miniature .product-title a {
  color: #1a1a1a !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: .1px !important;
}

/* Prijs */
.product-miniature .price,
.product-miniature .product-price {
  color: #b8860b !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: -.5px !important;
}

/* Wishlist hart */
.product-miniature .wishlist-button-add {
  background: linear-gradient(
    135deg,
    #d4af37,
    #b8860b
  ) !important;

  border: 0 !important;

  border-radius: 18px !important;

  width: 52px !important;
  height: 52px !important;

  box-shadow:
    0 10px 24px rgba(212,175,55,.28) !important;
}

/* Hart icoon */
.product-miniature .wishlist-button-add i,
.product-miniature .wishlist-button-add .material-icons {
  color: #fff !important;
  font-size: 24px !important;
}

/* Product grid iets luxer uitgelijnd */
.featured-products .products,
.products,
#js-product-list .products {
  gap: 20px !important;
}

/* Mobiel */
@media (max-width: 767px) {

  .product-miniature .thumbnail-container {
    border-radius: 20px !important;
  }

  .product-miniature .price,
  .product-miniature .product-price {
    font-size: 22px !important;
  }

  .product-miniature .product-title a {
    font-size: 14px !important;
  }

}
/* =========================================================
   QUALITY MOTORS - CUSTOM TEXT TRUSTBAR / USP BLOK
========================================================= */

.qm-trustbar {
    max-width: 1180px !important;
    margin: 28px auto 36px auto !important;
    padding: 18px 20px !important;

    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 0 !important;

    background: linear-gradient(135deg, #070707 0%, #141414 55%, #090909 100%) !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    border-radius: 18px !important;

    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;

    overflow: hidden !important;
}

/* Losse USP blokken */
.qm-trustbar > div {
    min-height: 82px !important;
    padding: 12px 14px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
    border-right: 1px solid rgba(212, 175, 55, 0.18) !important;
}

/* Laatste blok zonder rechterlijn */
.qm-trustbar > div:last-child {
    border-right: 0 !important;
}

/* USP titel */
.qm-trustbar strong {
    display: block !important;
    margin-bottom: 5px !important;

    color: #d4af37 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.35px !important;
    text-transform: uppercase !important;
}

/* USP ondertekst */
.qm-trustbar span {
    display: block !important;

    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
}

/* Hover subtiel luxe effect */
.qm-trustbar > div {
    transition: background 0.25s ease, transform 0.25s ease !important;
}

.qm-trustbar > div:hover {
    background: rgba(212, 175, 55, 0.07) !important;
    transform: translateY(-1px) !important;
}

/* =========================================================
   MOBIEL / TABLET
========================================================= */

@media (max-width: 991px) {
    .qm-trustbar {
        grid-template-columns: repeat(2, 1fr) !important;
        margin: 22px 14px 30px 14px !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .qm-trustbar > div {
        min-height: 78px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(212, 175, 55, 0.16) !important;
    }

    .qm-trustbar > div:nth-last-child(-n+1) {
        border-bottom: 0 !important;
    }
}

@media (max-width: 575px) {
    .qm-trustbar {
        grid-template-columns: 1fr !important;
        margin: 18px 12px 28px 12px !important;
        padding: 10px !important;
    }

    .qm-trustbar > div {
        min-height: 64px !important;
        padding: 11px 10px !important;
    }

    .qm-trustbar strong {
        font-size: 12.5px !important;
    }

    .qm-trustbar span {
        font-size: 12.5px !important;
    }

    .qm-trustbar > div:last-child {
        border-bottom: 0 !important;
    }
}
/* =========================================================
   QUALITY MOTORS - TRUSTBAR PREMIUM COMPACT FIX
   Plaats dit ONDERAAN custom.css
========================================================= */

/* Witte ruimte rondom Custom Text block verwijderen */
#index #custom-text,
#index .custom-text,
#index .block-custom-text,
#custom-text,
.custom-text,
.block-custom-text {
    max-width: 1180px !important;
    margin: 18px auto 26px auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Eventuele container/wrapper van PrestaShop minder hoog maken */
#index .custom-text .container,
#custom-text .container,
.block-custom-text .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Trustbar zelf */
.qm-trustbar {
    max-width: 1060px !important;
    margin: 0 auto !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 0 !important;

    background:
        radial-gradient(circle at top center, rgba(212,175,55,.14) 0%, rgba(212,175,55,0) 42%),
        linear-gradient(135deg, #050505 0%, #121212 52%, #060606 100%) !important;

    border: 1px solid rgba(212,175,55,.42) !important;
    border-radius: 16px !important;

    box-shadow:
        0 18px 34px rgba(0,0,0,.22),
        0 0 0 1px rgba(255,255,255,.035) inset,
        0 0 22px rgba(212,175,55,.10) !important;

    overflow: hidden !important;
    position: relative !important;
}

/* Subtiele gouden bovenlijn */
.qm-trustbar::before {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    top: 0 !important;
    height: 1px !important;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212,175,55,.75),
        transparent
    ) !important;
    z-index: 2 !important;
}

/* Losse USP blokken compacter */
.qm-trustbar > div {
    min-height: 72px !important;
    padding: 12px 14px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
    border-right: 1px solid rgba(212,175,55,.20) !important;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,.025),
        rgba(255,255,255,0)
    ) !important;

    transition:
        background .22s ease,
        box-shadow .22s ease,
        transform .22s ease !important;
}

.qm-trustbar > div:last-child {
    border-right: 0 !important;
}

/* Hover effect subtieler en luxer */
.qm-trustbar > div:hover {
    background:
        radial-gradient(circle at center, rgba(212,175,55,.12), transparent 58%) !important;
    box-shadow: inset 0 0 18px rgba(212,175,55,.08) !important;
    transform: translateY(-1px) !important;
}

/* Titel */
.qm-trustbar strong {
    display: block !important;
    margin: 0 0 4px 0 !important;

    color: #d4af37 !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    letter-spacing: .35px !important;
    text-transform: uppercase !important;

    text-shadow: 0 1px 8px rgba(212,175,55,.18) !important;
}

/* Ondertekst */
.qm-trustbar span {
    display: block !important;

    color: rgba(255,255,255,.88) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
}

/* Minder witruimte tussen slider en trustbar */
#index .carousel,
#index #carousel,
#index .homeslider,
#index .carousel-wrapper {
    margin-bottom: 18px !important;
}

/* Minder witruimte tussen trustbar en populaire producten */
#index .featured-products,
#index .products-section-title,
#index h2.products-section-title,
#index .section-title {
    margin-top: 22px !important;
}


/* =========================================================
   MOBIEL
========================================================= */

@media (max-width: 991px) {
    #index #custom-text,
    #index .custom-text,
    #index .block-custom-text,
    #custom-text,
    .custom-text,
    .block-custom-text {
        margin: 16px 12px 22px 12px !important;
    }

    .qm-trustbar {
        max-width: 100% !important;
        grid-template-columns: repeat(2, 1fr) !important;
        border-radius: 15px !important;
    }

    .qm-trustbar > div {
        min-height: 68px !important;
        padding: 11px 10px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(212,175,55,.18) !important;
    }

    .qm-trustbar > div:nth-child(odd) {
        border-right: 1px solid rgba(212,175,55,.18) !important;
    }

    .qm-trustbar > div:last-child {
        border-bottom: 0 !important;
    }

    .qm-trustbar strong {
        font-size: 12px !important;
    }

    .qm-trustbar span {
        font-size: 11.5px !important;
    }
}

@media (max-width: 575px) {
    .qm-trustbar {
        grid-template-columns: 1fr !important;
    }

    .qm-trustbar > div,
    .qm-trustbar > div:nth-child(odd) {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(212,175,55,.16) !important;
    }

    .qm-trustbar > div {
        min-height: 58px !important;
    }

    .qm-trustbar > div:last-child {
        border-bottom: 0 !important;
    }
}
/* =========================================================
   QUALITY MOTORS - SLIDER WHITESPACE FIX
========================================================= */

/* Minder witruimte onder de homeslider */
#index .carousel,
#index #carousel,
#index .homeslider,
#index .homeslider-container,
#index .carousel-wrapper,
#index .prestashop-carousel,
#index .pshomeslider {
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
}

/* Slider afbeelding/container niet extra laten uitrekken */
#index .carousel-inner,
#index .carousel-item,
#index .carousel .carousel-inner,
#index .homeslider .carousel-inner {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Witte onderruimte binnen de slide zelf verwijderen */
#index .carousel-item img,
#index .carousel-inner img,
#index .homeslider img {
    display: block !important;
    margin-bottom: 0 !important;
}

/* Als PrestaShop onder de slider een lege caption/tekstbox maakt */
#index .carousel-caption,
#index .homeslider-description,
#index .caption-description,
#index .slide-description {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Trustbar dichter tegen slider aan */
#index #custom-text,
#index .custom-text,
#index .block-custom-text {
    margin-top: 10px !important;
}

/* Eventuele container tussen slider en custom block compacter */
#index .page-home,
#index .featured-products,
#index .home-featured-products {
    padding-top: 0 !important;
}
/* =========================================================
   QUALITY MOTORS - MOBILE PRODUCT CARDS 2 PER ROW
========================================================= */

@media (max-width: 767px) {

    #index .featured-products .products,
    #index .product_list,
    #index .products,
    .featured-products .products {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px 12px !important;
        justify-items: center !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #index .featured-products .products article,
    #index .products article,
    .featured-products .products article,
    .products article,
    .product-miniature {
        width: 100% !important;
        max-width: 175px !important;
        margin: 0 auto !important;
        float: none !important;
        clear: none !important;
    }

    .product-miniature .thumbnail-container,
    .product-miniature .product-description,
    .product-miniature .product-miniature-wrapper {
        width: 100% !important;
        max-width: 175px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .product-miniature .thumbnail-container {
        min-height: 315px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .product-miniature img {
        max-width: 125px !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }

    .product-miniature .product-title,
    .product-miniature .product-title a {
        font-size: 14px !important;
        line-height: 1.2 !important;
        min-height: 42px !important;
        text-align: center !important;
        overflow-wrap: break-word !important;
    }

    .product-miniature .price,
    .product-miniature .product-price-and-shipping {
        font-size: 21px !important;
        line-height: 1.1 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .product-miniature .wishlist-button-add,
    .product-miniature .wishlist-button-product {
        width: 44px !important;
        height: 44px !important;
        right: 8px !important;
        top: 8px !important;
    }
}
/* =========================================================
   QUALITY MOTORS - PREMIUM ALIGNMENT & CHAMPAGNE GOLD FIX
   Plaats dit onderaan custom.css
========================================================= */

:root {
  --qm-gold: #c8a24a;
  --qm-gold-soft: #e5c878;
  --qm-gold-dark: #8a6a1f;
  --qm-black: #070707;
  --qm-black-soft: #111111;
  --qm-border: rgba(200, 162, 74, 0.28);
  --qm-shadow: 0 14px 35px rgba(0,0,0,.18);
  --qm-radius: 16px;
}

/* Algemene rust en verhoudingen */
#wrapper,
#content-wrapper,
.container {
  box-sizing: border-box;
}

body {
  background-color: #f7f7f5;
}

/* =========================================================
   HEADER / TOPBAR NETTER EN STRAKKER
========================================================= */

#header {
  background: #050505;
  border-bottom: 1px solid rgba(200,162,74,.32);
}

#header .header-nav {
  background: #050505;
  border-bottom: 1px solid rgba(200,162,74,.18);
  min-height: 42px;
  display: flex;
  align-items: center;
}

#header .header-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#header .header-nav a,
#header .header-nav span,
#header .header-nav .user-info,
#header .header-nav .cart-preview {
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

#header .header-nav .language-selector,
#header .header-nav .currency-selector {
  margin: 0 7px;
}

#header .header-top {
  background: linear-gradient(180deg, #161616 0%, #050505 100%);
  border-bottom: 1px solid rgba(200,162,74,.35);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  min-height: 78px;
  display: flex;
  align-items: center;
}

#header .header-top .container,
#header .header-top .row {
  display: flex;
  align-items: center;
}

#header .logo {
  max-height: 52px;
  width: auto;
  object-fit: contain;
}

/* Menu strakker */
#header .top-menu,
#header .menu {
  display: flex;
  align-items: center;
  gap: 24px;
}

#header .top-menu a,
#header .menu a,
#header .category a {
  color: #f4f4f4 !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .25px;
  text-transform: uppercase;
  line-height: 1;
  padding: 14px 0;
  transition: color .18s ease;
}

#header .top-menu a:hover,
#header .menu a:hover {
  color: var(--qm-gold-soft) !important;
}

/* =========================================================
   ZOEKBALK PREMIUM FIX
========================================================= */

#search_widget {
  max-width: 360px;
  width: 100%;
  margin-left: auto;
}

#search_widget form {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(200,162,74,.45);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 8px 20px rgba(0,0,0,.18);
}

#search_widget form input[type="text"] {
  height: 48px;
  width: 100%;
  border: 0 !important;
  background: #ffffff !important;
  color: #222;
  font-size: 14px;
  padding: 0 20px 0 58px !important;
  line-height: 48px;
  outline: none;
  box-shadow: none !important;
}

#search_widget form input::placeholder {
  color: #9b9b9b;
  opacity: 1;
}

#search_widget form button {
  position: absolute;
  left: 0;
  top: 0;
  width: 58px;
  height: 48px;
  border: 0;
  border-radius: 999px 0 0 999px;
  background: linear-gradient(135deg, #e3c66f 0%, #c8a24a 45%, #8a6a1f 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.25);
}

/* =========================================================
   SLIDER KADER / CENTRERING
========================================================= */

.carousel,
#carousel,
.carousel-inner,
.carousel .carousel-item {
  border-radius: var(--qm-radius);
}

.carousel {
  max-width: 1120px;
  margin: 26px auto 0 auto;
  overflow: hidden;
  border: 1px solid rgba(200,162,74,.32);
  box-shadow: var(--qm-shadow);
  background: #080808;
}

.carousel img,
.carousel .carousel-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--qm-radius);
}

/* Pijlen minder grof */
.carousel .carousel-control-prev,
.carousel .carousel-control-next {
  width: 52px;
  opacity: .88;
}

.carousel .carousel-control-prev-icon,
.carousel .carousel-control-next-icon {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.7));
}

/* =========================================================
   TRUST / USP BANNER PREMIUM
========================================================= */

.qm-trustbar,
.custom-text-block,
#custom-text,
#custom-text .container {
  box-sizing: border-box;
}

.qm-trustbar,
#custom-text {
  max-width: 1070px;
  margin: 14px auto 24px auto !important;
  padding: 0 !important;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #17140c 0%, #080808 100%);
  border: 1px solid rgba(200,162,74,.34);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

.qm-trustbar .qm-trust-inner,
#custom-text .row,
#custom-text .container {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  align-items: stretch;
}

.qm-trustbar .qm-trust-item,
#custom-text .col,
#custom-text .col-md,
#custom-text .col-sm,
#custom-text p {
  margin: 0 !important;
}

.qm-trustbar .qm-trust-item,
#custom-text .col,
#custom-text .col-md,
#custom-text .col-sm {
  min-height: 74px;
  padding: 14px 16px !important;
  text-align: center;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(200,162,74,.20);
}

.qm-trustbar .qm-trust-item:last-child,
#custom-text .col:last-child,
#custom-text .col-md:last-child,
#custom-text .col-sm:last-child {
  border-right: 0;
}

.qm-trustbar strong,
#custom-text strong,
#custom-text h3,
#custom-text h4 {
  color: var(--qm-gold-soft) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .25px;
  margin: 0 0 5px 0 !important;
  line-height: 1.15;
}

.qm-trustbar span,
#custom-text p,
#custom-text div {
  color: #f5f5f5 !important;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.25;
}

/* =========================================================
   TITELS NETTER
========================================================= */

.featured-products h2,
.products-section-title,
.h2.products-section-title,
.block-category h1 {
  color: #111 !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-align: center;
  margin: 26px 0 28px 0 !important;
}

.featured-products h2::after,
.products-section-title::after {
  content: "";
  display: block;
  width: 74px;
  height: 2px;
  margin: 12px auto 0 auto;
  background: linear-gradient(90deg, transparent, var(--qm-gold), transparent);
}

/* =========================================================
   PRODUCT CARDS PREMIUM EN IN VERHOUDING
========================================================= */

.featured-products .products,
.product-miniature,
.product-miniature .thumbnail-container {
  box-sizing: border-box;
}

.featured-products .products,
.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}

.product-miniature {
  margin: 0 !important;
}

.product-miniature .thumbnail-container {
  width: 230px !important;
  min-height: 355px;
  height: 355px;
  padding: 18px 16px 16px 16px;
  background:
    radial-gradient(circle at top, rgba(200,162,74,.08), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #f8f6f0 100%);
  border: 1px solid rgba(200,162,74,.30);
  border-radius: var(--qm-radius);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.product-miniature .thumbnail-container:hover {
  transform: translateY(-3px);
  border-color: rgba(200,162,74,.55);
  box-shadow: 0 18px 38px rgba(0,0,0,.16);
}

.product-miniature .thumbnail-top,
.product-miniature .product-thumbnail {
  height: 190px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-miniature img {
  max-height: 170px !important;
  max-width: 100%;
  width: auto !important;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}

.product-miniature .product-description {
  height: auto !important;
  min-height: 110px;
  background: transparent !important;
  padding: 10px 4px 0 4px !important;
  text-align: center;
}

.product-miniature .product-title {
  min-height: 44px;
  margin: 0 0 8px 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-miniature .product-title a {
  color: #161616 !important;
  font-size: 15px !important;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.product-miniature .price,
.product-miniature .product-price-and-shipping {
  color: #141414 !important;
  font-size: 16px !important;
  font-weight: 800;
  margin-top: 6px;
}

/* Wishlist hartje subtieler en sjieker */
.wishlist-button-add,
.product-miniature .wishlist-button-add {
  top: 12px !important;
  right: 12px !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #e5c878 0%, #c8a24a 48%, #927024 100%) !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35) !important;
}

.wishlist-button-add i,
.product-miniature .wishlist-button-add i {
  color: #fff !important;
  font-size: 21px !important;
}

/* =========================================================
   BUTTONS GOUD MINDER GEEL
========================================================= */

.btn-primary,
.carousel .btn,
.banner .btn,
.qm-btn {
  background: linear-gradient(135deg, #e5c878 0%, #c8a24a 45%, #8a6a1f 100%) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  color: #fff !important;
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.28);
  font-weight: 700;
}

.btn-primary:hover,
.carousel .btn:hover,
.banner .btn:hover,
.qm-btn:hover {
  background: linear-gradient(135deg, #f0d987 0%, #c8a24a 50%, #7c5d1b 100%) !important;
  color: #fff !important;
}

/* =========================================================
   DESKTOP BREEDTE CONSISTENT
========================================================= */

#wrapper .container {
  max-width: 1180px;
}

.featured-products,
#products,
.product-accessories,
.product-page {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   MOBIEL FIXES
========================================================= */

@media (max-width: 767px) {

  #header .header-nav {
    min-height: 38px;
  }

  #header .header-top {
    min-height: auto;
    padding: 10px 0;
  }

  #header .header-top .container,
  #header .header-top .row {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #header .logo {
    max-height: 48px;
    margin: 0 auto;
  }

  #header .top-menu,
  #header .menu {
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
  }

  #header .top-menu a,
  #header .menu a {
    font-size: 12px !important;
    padding: 6px 0;
  }

  #search_widget {
    max-width: calc(100vw - 32px);
    margin: 0 auto;
  }

  #search_widget form {
    height: 44px;
  }

  #search_widget form input[type="text"] {
    height: 44px;
    line-height: 44px;
    font-size: 13px;
    padding-left: 54px !important;
  }

  #search_widget form button {
    width: 52px;
    height: 44px;
  }

  .carousel {
    max-width: calc(100vw - 24px);
    margin-top: 16px;
    border-radius: 14px;
  }

  .carousel img,
  .carousel .carousel-item img {
    border-radius: 14px;
  }

  .qm-trustbar,
  #custom-text {
    max-width: calc(100vw - 24px);
    margin: 12px auto 22px auto !important;
    border-radius: 14px;
  }

  .qm-trustbar .qm-trust-inner,
  #custom-text .row,
  #custom-text .container {
    grid-template-columns: repeat(2, 1fr);
  }

  .qm-trustbar .qm-trust-item,
  #custom-text .col,
  #custom-text .col-md,
  #custom-text .col-sm {
    min-height: 68px;
    padding: 12px 10px !important;
    border-right: 1px solid rgba(200,162,74,.16);
    border-bottom: 1px solid rgba(200,162,74,.16);
  }

  .qm-trustbar strong,
  #custom-text strong,
  #custom-text h3,
  #custom-text h4 {
    font-size: 11px !important;
  }

  .qm-trustbar span,
  #custom-text p,
  #custom-text div {
    font-size: 10.5px !important;
  }

  .featured-products .products,
  .products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 12px;
    justify-items: center;
  }

  .product-miniature {
    width: 100% !important;
    max-width: 178px;
  }

  .product-miniature .thumbnail-container {
    width: 100% !important;
    min-height: 300px;
    height: 300px;
    padding: 12px 10px 12px 10px;
    border-radius: 14px;
  }

  .product-miniature .thumbnail-top,
  .product-miniature .product-thumbnail {
    height: 145px !important;
  }

  .product-miniature img {
    max-height: 132px !important;
  }

  .product-miniature .product-description {
    min-height: 110px;
    padding-top: 8px !important;
  }

  .product-miniature .product-title {
    min-height: 48px;
    margin-bottom: 6px !important;
  }

  .product-miniature .product-title a {
    font-size: 12.5px !important;
    line-height: 1.25;
  }

  .product-miniature .price,
  .product-miniature .product-price-and-shipping {
    font-size: 13px !important;
  }

  .wishlist-button-add,
  .product-miniature .wishlist-button-add {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    top: 9px !important;
    right: 9px !important;
  }
}

/* Kleine telefoons */
@media (max-width: 380px) {
  .featured-products .products,
  .products {
    gap: 10px;
    padding: 0 8px;
  }

  .product-miniature {
    max-width: 165px;
  }

  .product-miniature .thumbnail-container {
    min-height: 290px;
    height: 290px;
  }

  .product-miniature .product-title a {
    font-size: 12px !important;
  }
}
/* =========================================================
   QM - EMERGENCY HEADER SEARCHBAR REPAIR
   PLAATS HELEMAAL ONDERAAN custom.css
========================================================= */

@media (min-width: 768px) {

  /* Header terug naar normale flex-structuur */
  #header .header-top {
    position: relative !important;
    min-height: 82px !important;
    padding: 0 !important;
    overflow: visible !important;

    background: linear-gradient(
      to bottom,
      #050505 0%,
      #111111 45%,
      #f3f3f3 100%
    ) !important;

    border-bottom: 1px solid rgba(212,175,55,.25) !important;
  }

  /* Belangrijk: vorige grid kapotmaken */
  #header .header-top .container,
  #header .header-top .row {
    display: flex !important;
    grid-template-columns: none !important;

    align-items: center !important;
    justify-content: flex-start !important;

    max-width: 1180px !important;
    min-height: 82px !important;

    margin: 0 auto !important;
    padding: 0 15px !important;

    background: transparent !important;
    column-gap: 0 !important;
  }

  /* Alle witte kolomvlakken in header verwijderen */
  #header .header-top div,
  #header .header-top section,
  #header .header-top [class*="col-"],
  #header .header-top .position-static {
    background: transparent !important;
  }

  /* Logo links */
  #_desktop_logo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #_desktop_logo img,
  #header .logo {
    max-height: 48px !important;
    width: auto !important;
    display: block !important;
  }

  /* Menu netjes naast logo, niet door zoekbalk heen */
  #_desktop_top_menu,
  #top-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: calc(100% - 560px) !important;
    max-width: calc(100% - 560px) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"],
  #top-menu .top-menu[data-depth="0"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"] > li > a,
  #top-menu .top-menu[data-depth="0"] > li > a {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 5px rgba(0,0,0,.45) !important;
  }

  /* Zoekbalk los positioneren rechts in de header */
  #search_widget {
    position: absolute !important;
    top: 50% !important;
    right: max(24px, calc((100vw - 1180px) / 2 + 15px)) !important;
    left: auto !important;
    bottom: auto !important;

    transform: translateY(-50%) !important;

    width: 340px !important;
    max-width: 340px !important;
    min-width: 340px !important;

    height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
    float: none !important;
    clear: none !important;

    background: transparent !important;
    z-index: 20 !important;
  }

  #search_widget form {
    position: relative !important;

    width: 340px !important;
    height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    background: #ffffff !important;
    border: 1px solid rgba(212,175,55,.28) !important;
    border-radius: 999px !important;
    overflow: hidden !important;

    box-shadow:
      0 8px 22px rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.65) !important;
  }

  #search_widget input,
  #search_widget form input,
  #search_widget form input[type="text"] {
    width: 100% !important;
    height: 46px !important;
    line-height: 46px !important;

    padding: 0 18px 0 58px !important;

    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    color: #222222 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
  }

  #search_widget input::placeholder {
    color: #9b9b9b !important;
    opacity: 1 !important;
  }

  #search_widget button,
  #search_widget .search,
  #search_widget form button {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;

    width: 52px !important;
    height: 46px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 999px 0 0 999px !important;

    background: linear-gradient(
      135deg,
      #e5c878 0%,
      #c8a24a 45%,
      #8a6a1f 100%
    ) !important;

    color: #ffffff !important;
    z-index: 2 !important;
  }

  #search_widget button i,
  #search_widget button .material-icons,
  #search_widget .search i,
  #search_widget .search .material-icons {
    color: #ffffff !important;
    font-size: 21px !important;
  }
}


/* =========================================================
   QM - TABLET SEARCH SMALLER
========================================================= */

@media (min-width: 768px) and (max-width: 1050px) {

  #_desktop_logo {
    width: 135px !important;
    min-width: 135px !important;
    max-width: 135px !important;
  }

  #_desktop_top_menu,
  #top-menu {
    width: calc(100% - 455px) !important;
    max-width: calc(100% - 455px) !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"],
  #top-menu .top-menu[data-depth="0"] {
    gap: 15px !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"] > li > a,
  #top-menu .top-menu[data-depth="0"] > li > a {
    font-size: 12px !important;
  }

  #search_widget {
    width: 300px !important;
    max-width: 300px !important;
    min-width: 300px !important;
  }

  #search_widget form {
    width: 300px !important;
  }
}
/* =========================================================
   QM - FINAL DESKTOP HEADER POSITION FIX
   PLAATS HELEMAAL ONDERAAN custom.css
========================================================= */

@media (min-width: 992px) {

  /* Header zelf */
  #header .header-top {
    position: relative !important;
    min-height: 82px !important;
    padding: 0 !important;
    overflow: visible !important;

    background: linear-gradient(
      to bottom,
      #050505 0%,
      #111111 42%,
      #f3f3f3 100%
    ) !important;

    border-bottom: 1px solid rgba(212,175,55,.25) !important;
  }

  /* Container niet meer als grid/flex laten rommelen */
  #header .header-top .container,
  #header .header-top .row {
    position: relative !important;

    display: block !important;
    grid-template-columns: none !important;
    flex-direction: unset !important;

    width: 100% !important;
    max-width: 1180px !important;
    min-height: 82px !important;

    margin: 0 auto !important;
    padding: 0 15px !important;

    background: transparent !important;
  }

  /* Alle Bootstrap kolommen in header neutraliseren */
  #header .header-top [class*="col-"],
  #header .header-top .position-static,
  #header .header-top div,
  #header .header-top section {
    background: transparent !important;
  }

  /* LOGO - vast links */
  #_desktop_logo {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 185px !important;
    max-width: 185px !important;
    min-width: 185px !important;

    height: 60px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 30 !important;
  }

  #_desktop_logo img,
  #header .logo {
    max-height: 50px !important;
    width: auto !important;
    display: block !important;
  }

  /* MENU - ruimte geven zodat hij niet achter logo of zoekbalk valt */
  #_desktop_top_menu,
  #top-menu {
    position: absolute !important;
    left: 225px !important;
    right: 405px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    height: 40px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    background: transparent !important;

    z-index: 20 !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"],
  #top-menu .top-menu[data-depth="0"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"] > li,
  #top-menu .top-menu[data-depth="0"] > li {
    margin: 0 !important;
    padding: 0 !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"] > li > a,
  #top-menu .top-menu[data-depth="0"] > li > a {
    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    text-transform: uppercase !important;
    letter-spacing: .1px !important;

    padding: 0 !important;
    margin: 0 !important;

    white-space: nowrap !important;
    text-shadow: 0 1px 5px rgba(0,0,0,.45) !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"] > li > a:hover,
  #top-menu .top-menu[data-depth="0"] > li > a:hover {
    color: #e5c878 !important;
  }

  /* ZOEKBALK - vast rechts */
  #search_widget {
    position: absolute !important;
    right: 15px !important;
    left: auto !important;
    top: 50% !important;
    bottom: auto !important;

    transform: translateY(-50%) !important;

    width: 350px !important;
    max-width: 350px !important;
    min-width: 350px !important;
    height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
    float: none !important;
    clear: none !important;

    background: transparent !important;

    z-index: 40 !important;
  }

  #search_widget form {
    position: relative !important;

    width: 350px !important;
    height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    background: #ffffff !important;
    border: 1px solid rgba(212,175,55,.30) !important;
    border-radius: 999px !important;
    overflow: hidden !important;

    box-shadow:
      0 8px 22px rgba(0,0,0,.16),
      inset 0 1px 0 rgba(255,255,255,.65) !important;
  }

  #search_widget input,
  #search_widget form input,
  #search_widget form input[type="text"] {
    width: 100% !important;
    height: 46px !important;
    line-height: 46px !important;

    padding: 0 18px 0 58px !important;

    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    color: #222 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
  }

  #search_widget input::placeholder,
  #search_widget form input::placeholder {
    color: #9b9b9b !important;
    opacity: 1 !important;
  }

  #search_widget button,
  #search_widget .search,
  #search_widget form button {
    position: absolute !important;

    left: 0 !important;
    right: auto !important;
    top: 0 !important;

    width: 52px !important;
    height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 999px 0 0 999px !important;

    background: linear-gradient(
      135deg,
      #e5c878 0%,
      #c8a24a 45%,
      #8a6a1f 100%
    ) !important;

    color: #ffffff !important;
    z-index: 2 !important;
  }

  #search_widget button i,
  #search_widget button .material-icons,
  #search_widget .search i,
  #search_widget .search .material-icons {
    color: #ffffff !important;
    font-size: 21px !important;
  }
}


/* =========================================================
   QM - SMALL DESKTOP / TABLET HEADER FIX
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

  #header .header-top {
    min-height: 92px !important;
    padding: 10px 0 !important;
  }

  #header .header-top .container,
  #header .header-top .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    background: transparent !important;
  }

  #_desktop_logo {
    width: 160px !important;
    max-width: 160px !important;
    min-width: 160px !important;
  }

  #_desktop_logo img,
  #header .logo {
    max-height: 48px !important;
  }

  #_desktop_top_menu,
  #top-menu {
    width: auto !important;
    max-width: none !important;
    position: static !important;
    transform: none !important;
  }

  #search_widget {
    position: static !important;
    transform: none !important;

    width: 320px !important;
    max-width: 320px !important;
    min-width: 320px !important;

    margin: 0 !important;
  }

  #search_widget form {
    width: 320px !important;
  }
}
/* =========================================================
   QM - SEARCHBAR VINDBAAR + HEADER NETJES
   PLAATS HELEMAAL ONDERAAN custom.css
========================================================= */

@media (min-width: 768px) {

  /* Header iets meer hoogte geven zodat zoekbalk bewust een plek krijgt */
  #header .header-top {
    min-height: 112px !important;
    padding: 10px 0 14px 0 !important;
    background: linear-gradient(
      to bottom,
      #050505 0%,
      #101010 55%,
      #f3f3f3 100%
    ) !important;
    border-bottom: 1px solid rgba(212,175,55,.28) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.16) !important;
  }

  #header .header-top .container,
  #header .header-top .row {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;

    display: grid !important;
    grid-template-columns: 190px 1fr !important;
    grid-template-rows: 42px 52px !important;
    align-items: center !important;
    column-gap: 28px !important;
    row-gap: 4px !important;

    background: transparent !important;
  }

  /* Logo linksboven */
  #_desktop_logo {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 190px !important;
    max-width: 190px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #_desktop_logo img,
  #header .logo {
    max-height: 54px !important;
    width: auto !important;
    display: block !important;
  }

  /* Menu boven de zoekbalk */
  #_desktop_top_menu,
  #top-menu {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"],
  #top-menu .top-menu[data-depth="0"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;

    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"] > li > a,
  #top-menu .top-menu[data-depth="0"] > li > a {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    margin: 0 !important;
    text-shadow: 0 1px 5px rgba(0,0,0,.55) !important;
  }

  /* Zoekbalk duidelijke eigen rij onder menu */
  #search_widget {
    grid-column: 2 !important;
    grid-row: 2 !important;

    width: 430px !important;
    max-width: 430px !important;
    min-width: 430px !important;

    height: 46px !important;

    justify-self: center !important;
    align-self: center !important;

    margin: 0 !important;
    padding: 0 !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;

    background: transparent !important;
    z-index: 10 !important;
  }

  #search_widget form {
    width: 430px !important;
    height: 46px !important;

    position: relative !important;
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;
    border: 1px solid rgba(212,175,55,.42) !important;
    border-radius: 999px !important;
    overflow: hidden !important;

    box-shadow:
      0 8px 22px rgba(0,0,0,.22),
      0 0 18px rgba(212,175,55,.10),
      inset 0 1px 0 rgba(255,255,255,.7) !important;
  }

  #search_widget input,
  #search_widget form input,
  #search_widget form input[type="text"] {
    width: 100% !important;
    height: 46px !important;
    line-height: 46px !important;

    padding: 0 18px 0 60px !important;

    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    color: #222 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
  }

  #search_widget input::placeholder,
  #search_widget form input::placeholder {
    color: #8f8f8f !important;
    opacity: 1 !important;
  }

  #search_widget button,
  #search_widget .search,
  #search_widget form button {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;

    width: 54px !important;
    height: 46px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 999px 0 0 999px !important;

    background: linear-gradient(
      135deg,
      #e5c878 0%,
      #c8a24a 48%,
      #8a6a1f 100%
    ) !important;

    color: #ffffff !important;
  }

  #search_widget button i,
  #search_widget button .material-icons,
  #search_widget .search i,
  #search_widget .search .material-icons {
    color: #ffffff !important;
    font-size: 22px !important;
  }
}


/* =========================================================
   QM - MOBILE SEARCHBAR DUIDELIJK
========================================================= */

@media (max-width: 767px) {

  #header .header-top {
    padding: 12px 0 16px 0 !important;
  }

  #search_widget {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    min-width: 0 !important;

    margin: 12px auto 0 auto !important;

    display: block !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }

  #search_widget form {
    width: 100% !important;
    height: 46px !important;
    border-radius: 999px !important;
  }

  #search_widget input,
  #search_widget form input {
    height: 46px !important;
    line-height: 46px !important;
    padding: 0 16px 0 58px !important;
    font-size: 14px !important;
  }

  #search_widget button,
  #search_widget .search,
  #search_widget form button {
    width: 52px !important;
    height: 46px !important;
  }
}
/* =========================================================
   QM - HARD RESET HEADER DESKTOP
   Logo links | Menu midden | Zoekbalk rechts
   PLAATS HELEMAAL ONDERAAN custom.css
========================================================= */

@media (min-width: 992px) {

  /* Header vaste hoogte */
  #header .header-top {
    position: relative !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;

    background: linear-gradient(
      to bottom,
      #050505 0%,
      #111111 48%,
      #efefef 100%
    ) !important;

    border-bottom: 1px solid rgba(212,175,55,.28) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
  }

  /* Alle containers in header mogen niet meer positioneren */
  #header .header-top .container,
  #header .header-top .row,
  #header .header-top [class*="col-"],
  #header .header-top .position-static {
    position: static !important;

    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    flex: none !important;

    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
  }

  /* LOGO - vast links binnen 1180px websitebreedte */
  #_desktop_logo {
    position: absolute !important;
    left: calc(50% - 590px + 15px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 170px !important;
    height: 56px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    padding: 0 !important;
    margin: 0 !important;

    z-index: 50 !important;
  }

  #_desktop_logo img,
  #header .logo {
    max-height: 50px !important;
    width: auto !important;
    display: block !important;
  }

  /* MENU - exact midden tussen logo en zoekbalk */
  #_desktop_top_menu,
  #top-menu {
    position: absolute !important;
    left: calc(50% - 310px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 520px !important;
    height: 34px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: visible !important;
    background: transparent !important;

    z-index: 40 !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"],
  #top-menu .top-menu[data-depth="0"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;

    gap: 28px !important;

    padding: 0 !important;
    margin: 0 !important;

    white-space: nowrap !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"] > li,
  #top-menu .top-menu[data-depth="0"] > li {
    padding: 0 !important;
    margin: 0 !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"] > li > a,
  #top-menu .top-menu[data-depth="0"] > li > a {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: .1px !important;

    padding: 0 !important;
    margin: 0 !important;

    white-space: nowrap !important;
    text-shadow: 0 1px 5px rgba(0,0,0,.55) !important;
  }

  /* ZOEKBALK - vast rechts binnen 1180px websitebreedte */
  #search_widget {
    position: absolute !important;
    right: calc(50% - 590px + 15px) !important;
    left: auto !important;
    top: 50% !important;
    bottom: auto !important;

    transform: translateY(-50%) !important;

    width: 340px !important;
    height: 46px !important;
    max-width: 340px !important;
    min-width: 340px !important;

    display: block !important;
    float: none !important;
    clear: none !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;

    z-index: 60 !important;
  }

  #search_widget form {
    position: relative !important;

    width: 340px !important;
    height: 46px !important;

    display: block !important;

    padding: 0 !important;
    margin: 0 !important;

    background: #ffffff !important;
    border: 1px solid rgba(212,175,55,.35) !important;
    border-radius: 999px !important;
    overflow: hidden !important;

    box-shadow:
      0 8px 22px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.7) !important;
  }

  #search_widget input,
  #search_widget form input,
  #search_widget form input[type="text"] {
    width: 100% !important;
    height: 46px !important;
    line-height: 46px !important;

    padding: 0 18px 0 58px !important;

    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    color: #222 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
  }

  #search_widget input::placeholder,
  #search_widget form input::placeholder {
    color: #8e8e8e !important;
    opacity: 1 !important;
  }

  #search_widget button,
  #search_widget .search,
  #search_widget form button {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;

    width: 52px !important;
    height: 46px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 999px 0 0 999px !important;

    background: linear-gradient(
      135deg,
      #e5c878 0%,
      #c8a24a 48%,
      #8a6a1f 100%
    ) !important;

    color: #ffffff !important;
  }

  #search_widget button i,
  #search_widget button .material-icons,
  #search_widget .search i,
  #search_widget .search .material-icons {
    color: #ffffff !important;
    font-size: 21px !important;
  }
}


/* =========================================================
   QM - TABLET: GEEN ABSOLUTE DESKTOP LAYOUT
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

  #header .header-top {
    height: auto !important;
    min-height: 105px !important;
    padding: 12px 0 !important;
  }

  #_desktop_logo,
  #_desktop_top_menu,
  #top-menu,
  #search_widget {
    position: static !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }

  #search_widget {
    width: 340px !important;
    max-width: 340px !important;
    min-width: 0 !important;
    margin: 10px auto 0 auto !important;
  }

  #search_widget form {
    width: 100% !important;
  }
}
/* =========================================================
   QM - LOGO + MENU TERUG OP PLEK
   Zoekbalk blijft staan
   PLAATS HELEMAAL ONDERAAN custom.css
========================================================= */

@media (min-width: 992px) {

  /* Header blijft zelfde hoogte */
  #header .header-top {
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* Logo terug binnen websitebreedte */
  #_desktop_logo {
    position: absolute !important;
    left: calc(50% - 580px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 185px !important;
    height: 58px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    padding: 0 !important;
    margin: 0 !important;

    z-index: 80 !important;
  }

  #_desktop_logo img,
  #header .logo {
    max-height: 52px !important;
    width: auto !important;
    display: block !important;
  }

  /* Menu terug tussen logo en zoekbalk */
  #_desktop_top_menu,
  #top-menu {
    position: absolute !important;
    left: calc(50% - 355px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 500px !important;
    height: 36px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: visible !important;
    background: transparent !important;

    z-index: 70 !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"],
  #top-menu .top-menu[data-depth="0"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 24px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;

    padding: 0 !important;
    margin: 0 !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"] > li,
  #top-menu .top-menu[data-depth="0"] > li {
    padding: 0 !important;
    margin: 0 !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"] > li > a,
  #top-menu .top-menu[data-depth="0"] > li > a {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    padding: 0 !important;
    margin: 0 !important;

    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 5px rgba(0,0,0,.55) !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"] > li > a:hover,
  #top-menu .top-menu[data-depth="0"] > li > a:hover {
    color: #e5c878 !important;
  }
}
/* =========================================================
   QM - ABSOLUTE HEADER FIX V2
   Zoekbalk blijft goed | Logo + menu terug zichtbaar
   PLAATS HELEMAAL ONDERAAN custom.css
========================================================= */

@media (min-width: 992px) {

  #header .header-top {
    position: relative !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* Header containers neutraliseren */
  #header .header-top .container,
  #header .header-top .row,
  #header .header-top [class*="col-"],
  #header .header-top .position-static {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  /* LOGO - forceer direct de afbeelding terug */
  #_desktop_logo,
  #header .header-top #_desktop_logo {
    position: absolute !important;
    left: 405px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 170px !important;
    height: 58px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    padding: 0 !important;
    margin: 0 !important;
    z-index: 999 !important;
  }

  #_desktop_logo img,
  #header .header-top img.logo,
  #header .logo {
    position: static !important;
    max-height: 52px !important;
    width: auto !important;
    max-width: 170px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* MENU - terug naast logo */
  #_desktop_top_menu,
  #top-menu,
  #header .header-top .menu,
  #header .header-top .top-menu {
    position: absolute !important;
    left: 620px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 390px !important;
    height: 36px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: visible !important;
    background: transparent !important;
    z-index: 998 !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"],
  #top-menu .top-menu[data-depth="0"],
  #header .header-top .top-menu[data-depth="0"] {
    position: static !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 20px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;

    width: auto !important;
    height: auto !important;

    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"] > li,
  #top-menu .top-menu[data-depth="0"] > li,
  #header .header-top .top-menu[data-depth="0"] > li {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"] > li > a,
  #top-menu .top-menu[data-depth="0"] > li > a,
  #header .header-top .top-menu[data-depth="0"] > li > a {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    padding: 0 !important;
    margin: 0 !important;

    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 5px rgba(0,0,0,.55) !important;

    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Zoekbalk laten zoals hij nu goed staat */
  #search_widget {
    right: 390px !important;
  }
}
/* =========================================================
   QM - TOPBAR + HEADER PREMIUM BALANCE FIX
   Plaats helemaal onderaan custom.css
========================================================= */

@media (min-width: 992px) {

  /* Bovenste zwarte balk rustiger en gecentreerd */
  #header .header-nav {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    background: #050505 !important;
    border-bottom: 1px solid rgba(212,175,55,.22) !important;
    box-shadow: none !important;

    padding: 0 !important;
    margin: 0 !important;
  }

  #header .header-nav .container {
    max-width: 1180px !important;
    height: 42px !important;
    min-height: 42px !important;

    margin: 0 auto !important;
    padding: 0 15px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  #header .header-nav,
  #header .header-nav a,
  #header .header-nav span,
  #header .header-nav div {
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }

  #header .header-nav i,
  #header .header-nav .material-icons {
    color: #d4af37 !important;
    font-size: 15px !important;
    vertical-align: middle !important;
  }

  /* Taal/valuta badges subtieler en netter */
  #header .header-nav .language-selector,
  #header .header-nav .currency-selector,
  #header .header-nav .language-selector-wrapper,
  #header .header-nav .currency-selector-wrapper {
    margin: 0 8px !important;
  }

  #header .header-nav button,
  #header .header-nav .btn,
  #header .header-nav .dropdown-toggle {
    height: 22px !important;
    min-height: 22px !important;

    padding: 3px 9px !important;
    border-radius: 999px !important;

    background: linear-gradient(135deg, #e5c878 0%, #c8a24a 50%, #8a6a1f 100%) !important;
    border: 1px solid rgba(255,255,255,.18) !important;

    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;

    box-shadow: 0 4px 12px rgba(212,175,55,.22) !important;
  }


  /* Tweede headerbalk: minder harde overgang, sjieker */
  #header .header-top {
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;

    background:
      linear-gradient(
        to bottom,
        #050505 0%,
        #0b0b0b 52%,
        #303030 76%,
        #e9e9e9 100%
      ) !important;

    border-top: 1px solid rgba(255,255,255,.04) !important;
    border-bottom: 1px solid rgba(212,175,55,.34) !important;

    box-shadow:
      0 8px 22px rgba(0,0,0,.18),
      inset 0 -1px 0 rgba(255,255,255,.18) !important;
  }

  /* Subtiele gouden lijn door de header */
  #header .header-top::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 1px !important;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(212,175,55,.55) 22%,
      rgba(212,175,55,.75) 50%,
      rgba(212,175,55,.55) 78%,
      transparent 100%
    ) !important;
    pointer-events: none !important;
  }

  /* Logo iets rustiger in formaat */
  #_desktop_logo img,
  #header .logo {
    max-height: 48px !important;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,.35)) !important;
  }

  /* Menu net iets lager/strakker visueel */
  #_desktop_top_menu,
  #top-menu {
    top: 50% !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"] > li > a,
  #top-menu .top-menu[data-depth="0"] > li > a {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .1px !important;
    color: #ffffff !important;
    text-shadow: 0 1px 6px rgba(0,0,0,.65) !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"] > li > a:hover,
  #top-menu .top-menu[data-depth="0"] > li > a:hover {
    color: #e5c878 !important;
  }

  /* Zoekbalk visueel iets rustiger binnen de header */
  #search_widget form {
    height: 44px !important;
    border: 1px solid rgba(212,175,55,.38) !important;
    box-shadow:
      0 7px 20px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.75) !important;
  }

  #search_widget,
  #search_widget form {
    height: 44px !important;
  }

  #search_widget input,
  #search_widget form input,
  #search_widget form input[type="text"] {
    height: 44px !important;
    line-height: 44px !important;
  }

  #search_widget button,
  #search_widget .search,
  #search_widget form button {
    height: 44px !important;
  }
}
/* =========================================================
   QM - TOPBAR LANGUAGE / CURRENCY VERTICAL ALIGN FIX
   Plaats helemaal onderaan custom.css
========================================================= */

@media (min-width: 992px) {

  /* Topbar items exact verticaal centreren */
  #header .header-nav .container,
  #header .header-nav .row {
    display: flex !important;
    align-items: center !important;
  }

  #header .header-nav a,
  #header .header-nav span,
  #header .header-nav div,
  #header .header-nav .user-info,
  #header .header-nav .cart-preview {
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
  }

  /* Taal en valuta badges iets lager zetten */
  #header .header-nav .language-selector,
  #header .header-nav .currency-selector,
  #header .header-nav .language-selector-wrapper,
  #header .header-nav .currency-selector-wrapper {
    position: relative !important;
    top: 2px !important;
    display: flex !important;
    align-items: center !important;
  }

  #header .header-nav .language-selector button,
  #header .header-nav .currency-selector button,
  #header .header-nav .language-selector .btn,
  #header .header-nav .currency-selector .btn,
  #header .header-nav .dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 22px !important;
    line-height: 22px !important;
    padding: 0 10px !important;

    position: relative !important;
    top: 1px !important;
  }

  /* Inloggen/winkelwagen optisch gelijk zetten */
  #header .header-nav .user-info,
  #header .header-nav .cart-preview,
  #_desktop_user_info,
  #_desktop_cart {
    position: relative !important;
    top: 1px !important;
  }
}
/* =========================================================
   QM - FINAL TOPBAR READABILITY + ALIGNMENT FIX
   Alleen topbar/dropdowns, geen full-width balken
========================================================= */

@media (min-width: 992px) {

  /* Topbar binnen normale websitebreedte houden */
  #header .header-nav {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    background: #050505 !important;
    border-bottom: 1px solid rgba(212,175,55,.22) !important;
    overflow: visible !important;
  }

  #header .header-nav .container {
    max-width: 1180px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px !important;
    background: transparent !important;
  }

  /* Topbar hoofdtekst leesbaar */
  #header .header-nav,
  #header .header-nav > .container,
  #header .header-nav a,
  #header .header-nav span,
  #header .header-nav label,
  #header .header-nav .user-info,
  #header .header-nav .cart-preview,
  #header .header-nav #_desktop_user_info,
  #header .header-nav #_desktop_cart {
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-shadow: none !important;
  }

  /* Alles in de topbar verticaal gelijk */
  #header .header-nav a,
  #header .header-nav span,
  #header .header-nav label,
  #header .header-nav .user-info,
  #header .header-nav .cart-preview,
  #header .header-nav .language-selector,
  #header .header-nav .currency-selector,
  #header .header-nav .language-selector-wrapper,
  #header .header-nav .currency-selector-wrapper,
  #header .header-nav #_desktop_user_info,
  #header .header-nav #_desktop_cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
  }

  /* Gouden badges taal/valuta */
  #header .header-nav .language-selector button,
  #header .header-nav .currency-selector button,
  #header .header-nav .language-selector .dropdown-toggle,
  #header .header-nav .currency-selector .dropdown-toggle,
  #header .header-nav .btn {
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: linear-gradient(135deg, #e5c878 0%, #c8a24a 50%, #8a6a1f 100%) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: #ffffff !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: 0 3px 8px rgba(212,175,55,.20) !important;
  }

  /* Iconen goud */
  #header .header-nav i,
  #header .header-nav .material-icons {
    color: #d4af37 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    margin-right: 3px !important;
  }

  /* Dropdown menu leesbaar: wit vlak, zwarte tekst */
  #header .header-nav .dropdown-menu,
  #header .header-nav .popover,
  #header .language-selector .dropdown-menu,
  #header .currency-selector .dropdown-menu,
  #header .user-info .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid rgba(212,175,55,.35) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
    padding: 6px 0 !important;
    min-width: 135px !important;
    z-index: 9999 !important;
  }

  #header .header-nav .dropdown-menu a,
  #header .header-nav .dropdown-menu span,
  #header .header-nav .popover a,
  #header .language-selector .dropdown-menu a,
  #header .currency-selector .dropdown-menu a,
  #header .user-info .dropdown-menu a {
    color: #111111 !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    height: auto !important;
    min-height: 30px !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-shadow: none !important;
    line-height: 1.2 !important;
  }

  #header .header-nav .dropdown-menu a:hover,
  #header .language-selector .dropdown-menu a:hover,
  #header .currency-selector .dropdown-menu a:hover,
  #header .user-info .dropdown-menu a:hover {
    color: #8a6a1f !important;
    background: rgba(212,175,55,.12) !important;
  }

  /* Lege witte dropdown-blokken niet tonen */
  #header .header-nav .dropdown-menu:empty,
  #header .header-nav .popover:empty {
    display: none !important;
  }
}
/* =========================================================
   QM - TOPBAR SPACING + HAMBURGER DESKTOP FIX
========================================================= */

@media (min-width: 992px) {

  /* Topbar iets meer ademruimte */
  #header .header-nav .container {
    gap: 30px !important;
  }

  #header .header-nav a,
  #header .header-nav span,
  #header .header-nav label {
    margin: 0 4px !important;
  }

  /* Taal / valuta / inloggen / winkelwagen niet tegen elkaar */
  #header .header-nav .language-selector,
  #header .header-nav .currency-selector,
  #header .header-nav .user-info,
  #header .header-nav .cart-preview,
  #_desktop_user_info,
  #_desktop_cart {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  /* Hamburger / mobile menu toggle verbergen op desktop */
  #header .menu-icon,
  #header .navbar-toggler,
  #header .js-top-menu-bottom,
  #header .mobile-menu,
  #header .menu-button,
  #header .material-icons.d-inline,
  #header button[data-toggle="collapse"],
  #header button[data-target="#mobile_top_menu_wrapper"],
  #header #menu-icon {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Alleen echte desktop menu zichtbaar houden */
  #_desktop_top_menu,
  #top-menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}
/* =========================================================
   QM - FIX MENU GHOST BAR ON HOVER
   Verbergt brede submenu ghostbar, hoofdmenu blijft intact
========================================================= */

@media (min-width: 992px) {

  /* Brede ghost submenu-balk uitschakelen */
  #header .top-menu .sub-menu,
  #header #_desktop_top_menu .sub-menu,
  #header #top-menu .sub-menu,
  #header .popover.sub-menu,
  #header .menu .sub-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;

    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Hover mag geen mega-menu balk tonen */
  #header .top-menu li:hover > .sub-menu,
  #header #_desktop_top_menu li:hover > .sub-menu,
  #header #top-menu li:hover > .sub-menu,
  #header .menu li:hover > .sub-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Hoofdmenu links blijven gewoon klikbaar */
  #header .top-menu[data-depth="0"] > li > a,
  #header #_desktop_top_menu .top-menu[data-depth="0"] > li > a,
  #header #top-menu .top-menu[data-depth="0"] > li > a {
    pointer-events: auto !important;
    cursor: pointer !important;
  }
}
/* =========================================================
   QM - MOBILE MENU LEESBAARHEID FIX
========================================================= */

@media (max-width: 767px) {

  /* Mobiele menu achtergrond */
  #mobile_top_menu_wrapper,
  #_mobile_top_menu,
  .mobile-menu,
  #header .top-menu {
    background: #ffffff !important;
  }

  /* Alle menu teksten standaard goed leesbaar */
  #mobile_top_menu_wrapper a,
  #mobile_top_menu_wrapper span,
  #mobile_top_menu_wrapper .dropdown-item,
  #mobile_top_menu_wrapper .category,
  #mobile_top_menu_wrapper .top-menu a,
  #mobile_top_menu_wrapper .top-menu span {
    color: #222222 !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
  }

  /* Hoofdcategorieën */
  #mobile_top_menu_wrapper .top-menu[data-depth="0"] > li > a,
  #mobile_top_menu_wrapper .top-menu[data-depth="0"] > li > span {
    color: #c8a24a !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
  }

  /* Subcategorieën */
  #mobile_top_menu_wrapper .top-menu[data-depth="1"] a,
  #mobile_top_menu_wrapper .top-menu[data-depth="2"] a {
    color: #333333 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  /* Niet geselecteerde / ingeklapte items niet vaag maken */
  #mobile_top_menu_wrapper li,
  #mobile_top_menu_wrapper li a,
  #mobile_top_menu_wrapper li span {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Actieve geselecteerde balk */
  #mobile_top_menu_wrapper li.current > a,
  #mobile_top_menu_wrapper li:hover > a,
  #mobile_top_menu_wrapper .current > span {
    color: #c8a24a !important;
    border-color: #111111 !important;
  }

  /* Pijltjes rechts zichtbaar maken */
  #mobile_top_menu_wrapper .navbar-toggler,
  #mobile_top_menu_wrapper .collapse-icons,
  #mobile_top_menu_wrapper .material-icons {
    color: #c8a24a !important;
    opacity: 1 !important;
  }

  /* Lijnen subtiel zichtbaar */
  #mobile_top_menu_wrapper li {
    border-color: rgba(0,0,0,.10) !important;
  }
}
/* =========================================================
   QM - CHROMEBOOK / SMALL LAPTOP HEADER FIX
   Voorkomt dat zoekbalk door menu loopt
========================================================= */

@media (min-width: 992px) and (max-width: 1250px) {

  #_desktop_logo,
  #header .header-top #_desktop_logo {
    left: 285px !important;
    width: 145px !important;
  }

  #_desktop_logo img,
  #header .logo {
    max-height: 42px !important;
    max-width: 145px !important;
  }

  #_desktop_top_menu,
  #top-menu,
  #header .header-top .menu,
  #header .header-top .top-menu {
    left: 455px !important;
    width: 300px !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"],
  #top-menu .top-menu[data-depth="0"] {
    gap: 16px !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"] > li > a,
  #top-menu .top-menu[data-depth="0"] > li > a {
    font-size: 12px !important;
  }

  #search_widget {
    right: 210px !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
  }

  #search_widget form {
    width: 240px !important;
  }

  #search_widget input,
  #search_widget form input,
  #search_widget form input[type="text"] {
    font-size: 12px !important;
    padding-left: 50px !important;
  }

  #search_widget button,
  #search_widget .search,
  #search_widget form button {
    width: 46px !important;
  }
}
/* =========================================================
   QM - FINAL SEARCHBAR OVERLAP FIX
   Laatste blok in custom.css plaatsen
========================================================= */

@media (min-width: 992px) {

  #search_widget {
    right: 200px !important;
    left: auto !important;
    width: 330px !important;
    min-width: 330px !important;
    max-width: 330px !important;
    z-index: 9999 !important;
  }

  #search_widget form {
    width: 330px !important;
  }

  #_desktop_top_menu,
  #top-menu,
  #header .header-top .menu,
  #header .header-top .top-menu {
    width: 360px !important;
  }

  #_desktop_top_menu .top-menu[data-depth="0"],
  #top-menu .top-menu[data-depth="0"] {
    gap: 18px !important;
  }
}

/* =========================================================
   QM PHASE 1B - FINAL OVERRIDES
   This is intentionally the final block in custom.css.
========================================================= */

:root {
  --qm-gold: #c9a33f;
  --qm-gold-dark: #a97f20;
  --qm-black: #080808;
  --qm-ink: #171717;
}

html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  font-family: "Manrope", Arial, sans-serif !important;
}

#header,
#header * {
  box-sizing: border-box !important;
}

#header {
  background: var(--qm-black) !important;
  box-shadow: none !important;
}

#header .header-nav {
  display: block !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  background: #050505 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(201, 163, 63, .34) !important;
  box-shadow: none !important;
}

#header .header-nav > .container {
  display: block !important;
  width: calc(100% - 32px) !important;
  max-width: 1140px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#header .header-nav > .container > .row {
  display: block !important;
  width: 100% !important;
  height: 38px !important;
  margin: 0 !important;
}

@media (min-width: 768px) {
  #header .header-nav .row > .hidden-sm-down {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header .header-nav .row > .hidden-sm-down > .col-md-5,
  #header .header-nav .row > .hidden-sm-down > .right-nav {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #header .header-nav .right-nav {
    justify-content: flex-end !important;
    min-width: 0 !important;
  }

  #header .header-nav .right-nav > div,
  #header .header-nav #contact-link {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    height: 38px !important;
    padding: 0 8px !important;
  }

  #header .header-nav a,
  #header .header-nav span,
  #header .header-nav button {
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: .01em !important;
    text-shadow: none !important;
  }

  #header .header-top {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 86px !important;
    min-height: 86px !important;
    padding: 0 !important;
    background: linear-gradient(180deg, #111 0%, #080808 100%) !important;
    border-bottom: 1px solid rgba(201, 163, 63, .34) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .14) !important;
  }

  #header .header-top > .container {
    display: block !important;
    position: relative !important;
    width: calc(100% - 32px) !important;
    max-width: 1140px !important;
    min-width: 0 !important;
    height: 86px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #header .header-top > .container > .row:not(#mobile_top_menu_wrapper) {
    display: grid !important;
    grid-template-columns: 170px minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    height: 86px !important;
    margin: 0 !important;
  }

  #header #_desktop_logo {
    display: flex !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #header #_desktop_logo img,
  #header #_desktop_logo .logo {
    display: block !important;
    width: auto !important;
    max-width: 154px !important;
    max-height: 46px !important;
    height: auto !important;
    filter: none !important;
    object-fit: contain !important;
  }

  #header .header-top-right {
    display: grid !important;
    position: static !important;
    grid-template-columns: minmax(360px, 1fr) 330px !important;
    align-items: center !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #header #_desktop_top_menu,
  #header #_desktop_top_menu > .top-menu,
  #header #_desktop_top_menu .top-menu[data-depth="0"] {
    display: flex !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #header #_desktop_top_menu .top-menu[data-depth="0"] {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 18px !important;
  }

  #header #_desktop_top_menu .top-menu[data-depth="0"] > li {
    display: block !important;
    position: relative !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    white-space: nowrap !important;
  }

  #header #_desktop_top_menu .top-menu[data-depth="0"] > li > a {
    display: flex !important;
    align-items: center !important;
    min-height: 42px !important;
    padding: 0 !important;
    color: #f7f4ed !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: .025em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
  }

  #header #_desktop_top_menu .top-menu[data-depth="0"] > li > a:hover,
  #header #_desktop_top_menu .top-menu[data-depth="0"] > li > a:focus {
    color: var(--qm-gold) !important;
  }

  #header #_desktop_top_menu .top-menu[data-depth="0"] > li:not(:hover):not(:focus-within) > .sub-menu,
  #header #_desktop_top_menu .top-menu[data-depth="0"] > li:not(:hover):not(:focus-within) > .collapse {
    display: none !important;
  }

  #header #search_widget {
    display: block !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: auto !important;
  }

  #header #search_widget form {
    display: flex !important;
    position: relative !important;
    align-items: center !important;
    width: 100% !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid rgba(201, 163, 63, .78) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
  }

  #header #search_widget form input[type="text"],
  #header #search_widget form input[type="search"] {
    width: 100% !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 16px 0 54px !important;
    color: #262626 !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
  }

  #header #search_widget form button {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    width: 46px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    background: var(--qm-gold) !important;
    border: 0 !important;
    border-radius: 999px 0 0 999px !important;
    box-shadow: none !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  #header .header-top > .container > .row:not(#mobile_top_menu_wrapper) {
    grid-template-columns: 150px minmax(0, 1fr) !important;
  }

  #header #_desktop_logo img,
  #header #_desktop_logo .logo {
    max-width: 138px !important;
    max-height: 42px !important;
  }

  #header .header-top-right {
    grid-template-columns: minmax(350px, 1fr) 250px !important;
    gap: 18px !important;
  }

  #header #_desktop_top_menu .top-menu[data-depth="0"] {
    gap: 12px !important;
  }

  #header #_desktop_top_menu .top-menu[data-depth="0"] > li > a {
    font-size: 11px !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #header .header-nav > .container,
  #header .header-top > .container {
    width: calc(100% - 24px) !important;
  }

  #header .header-nav a,
  #header .header-nav span,
  #header .header-nav button {
    font-size: 10px !important;
  }

  #header .header-nav .right-nav > div,
  #header .header-nav #contact-link {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }

  #header .header-top > .container > .row:not(#mobile_top_menu_wrapper) {
    grid-template-columns: 130px minmax(0, 1fr) !important;
  }

  #header #_desktop_logo img,
  #header #_desktop_logo .logo {
    max-width: 120px !important;
    max-height: 38px !important;
  }

  #header .header-top-right {
    grid-template-columns: minmax(340px, 1fr) 210px !important;
    gap: 14px !important;
  }

  #header #_desktop_top_menu .top-menu[data-depth="0"] {
    gap: 8px !important;
  }

  #header #_desktop_top_menu .top-menu[data-depth="0"] > li > a {
    font-size: 10px !important;
    letter-spacing: .01em !important;
  }

  #header #search_widget form input[type="text"],
  #header #search_widget form input[type="search"] {
    font-size: 11px !important;
  }
}

body#index #carousel {
  display: block !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin: 26px auto 12px !important;
  padding: 0 !important;
  transform: none !important;
  overflow: hidden !important;
}

body#index #carousel .carousel-inner,
body#index #carousel .carousel-item,
body#index #carousel .carousel-item.active {
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

body#index #carousel img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

.featured-products .products-section-title,
.product-accessories .products-section-title,
#products .products-section-title,
body#index h2,
body#index h3 {
  color: var(--qm-ink) !important;
  font-weight: 500 !important;
  letter-spacing: .025em !important;
  text-shadow: none !important;
}

.product-miniature .product-title,
.product-miniature .product-title a {
  color: var(--qm-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -.005em !important;
  text-shadow: none !important;
}

.product-miniature .product-price,
.product-miniature .product-price-and-shipping,
.product-miniature .price {
  color: #121212 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -.015em !important;
  text-shadow: none !important;
}

.qm-trustbar strong {
  font-weight: 600 !important;
  letter-spacing: .025em !important;
  text-shadow: none !important;
}

.qm-trustbar div,
.qm-trustbar span,
.qm-trustbar small {
  font-weight: 400 !important;
  text-shadow: none !important;
}

.product-miniature .product-price-and-shipping {
  margin-top: auto !important;
}

.product-miniature .qm-product-card__cta {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 42px !important;
  margin-top: 9px !important;
  padding: 0 14px !important;
  color: #101010 !important;
  background: var(--qm-gold) !important;
  border: 1px solid var(--qm-gold) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .015em !important;
  text-align: center !important;
  text-decoration: none !important;
}

.product-miniature .qm-product-card__cta:hover,
.product-miniature .qm-product-card__cta:focus {
  color: #fff !important;
  background: var(--qm-gold-dark) !important;
  border-color: var(--qm-gold-dark) !important;
  outline: none !important;
}

@media (max-width: 767.98px) {
  #header .header-nav {
    height: 64px !important;
    min-height: 64px !important;
  }

  #header .header-nav > .container {
    width: 100% !important;
    max-width: none !important;
    height: 64px !important;
    padding: 0 14px !important;
  }

  #header .header-nav > .container > .row {
    height: 64px !important;
  }

  #header .header-nav .mobile {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px 42px !important;
    grid-template-areas: "menu logo user cart" !important;
    align-items: center !important;
    width: 100% !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header #menu-icon {
    grid-area: menu !important;
  }

  #header #_mobile_logo {
    grid-area: logo !important;
  }

  #header #_mobile_user_info {
    grid-area: user !important;
  }

  #header #_mobile_cart {
    grid-area: cart !important;
  }

  #header #menu-icon,
  #header #_mobile_logo,
  #header #_mobile_user_info,
  #header #_mobile_cart {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #header #menu-icon {
    justify-content: flex-start !important;
  }

  #header #_mobile_logo img,
  #header #_mobile_logo .logo {
    display: block !important;
    width: auto !important;
    max-width: 132px !important;
    max-height: 42px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  #header #_mobile_user_info a,
  #header #_mobile_cart a {
    font-size: 0 !important;
  }

  #header #_mobile_user_info .material-icons,
  #header #_mobile_cart .material-icons,
  #header #menu-icon .material-icons {
    color: #fff !important;
    font-size: 24px !important;
    font-weight: 400 !important;
  }

  #header #_mobile_cart .cart-products-count {
    color: var(--qm-gold) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
  }

  #header .header-nav .mobile > .clearfix {
    display: none !important;
  }

  #header .header-top {
    display: block !important;
    position: relative !important;
    min-height: 64px !important;
    height: auto !important;
    padding: 10px 14px !important;
    background: linear-gradient(180deg, #111 0%, #080808 100%) !important;
    border-bottom: 1px solid rgba(201, 163, 63, .34) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12) !important;
  }

  #header .header-top > .container,
  #header .header-top > .container > .row:not(#mobile_top_menu_wrapper),
  #header .header-top-right {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #header #search_widget {
    display: block !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #header #search_widget form {
    display: flex !important;
    position: relative !important;
    align-items: center !important;
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid rgba(201, 163, 63, .78) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
  }

  #header #search_widget form input[type="text"],
  #header #search_widget form input[type="search"] {
    width: 100% !important;
    height: 42px !important;
    padding: 0 14px 0 50px !important;
    color: #262626 !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 400 !important;
  }

  #header #search_widget form button {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    background: var(--qm-gold) !important;
    border: 0 !important;
    border-radius: 999px 0 0 999px !important;
    box-shadow: none !important;
  }

  body#index #carousel {
    margin-top: 16px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }

  .product-miniature .product-title,
  .product-miniature .product-title a {
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }

  .product-miniature .product-price,
  .product-miniature .product-price-and-shipping,
  .product-miniature .price {
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  .product-miniature .qm-product-card__cta {
    min-height: 40px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 479.98px) {
  #header #_mobile_logo img,
  #header #_mobile_logo .logo {
    max-width: 116px !important;
  }
}

/* =========================================================
   QM PHASE 1C - TABLET / DESKTOP STABILITY
   Keep this block last. Mobile (0-767px) stays untouched.
========================================================= */

@media (min-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Remove all historical fixed-pixel header positions. */
  #header .header-nav > .container,
  #header .header-nav > .container > .row,
  #header .header-nav .row > .hidden-sm-down,
  #header .header-nav .row > .hidden-sm-down > .col-md-5,
  #header .header-nav .row > .hidden-sm-down > .right-nav,
  #header .header-top > .container,
  #header .header-top > .container > .row:not(#mobile_top_menu_wrapper),
  #header .header-top > .container > .row:not(#mobile_top_menu_wrapper) > *,
  #header .header-top #_desktop_logo,
  #header .header-top .header-top-right,
  #header .header-top #_desktop_top_menu,
  #header .header-top #top-menu,
  #header .header-top #search_widget {
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    float: none !important;
  }

  #header .header-nav > .container,
  #header .header-top > .container {
    position: relative !important;
    width: calc(100% - 32px) !important;
    max-width: 1180px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #header .header-nav > .container > .row,
  #header .header-nav .row > .hidden-sm-down,
  #header .header-nav .row > .hidden-sm-down > .col-md-5,
  #header .header-nav .row > .hidden-sm-down > .right-nav,
  #header .header-top > .container > .row:not(#mobile_top_menu_wrapper),
  #header .header-top > .container > .row:not(#mobile_top_menu_wrapper) > *,
  #header .header-top #_desktop_logo,
  #header .header-top .header-top-right,
  #header .header-top #_desktop_top_menu,
  #header .header-top #top-menu,
  #header .header-top #search_widget {
    position: static !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #header .header-nav,
  #header .header-nav > .container,
  #header .header-nav > .container > .row,
  #header .header-nav .row > .hidden-sm-down {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }

  #header .header-nav {
    padding: 0 !important;
    overflow: visible !important;
  }

  #header .header-nav .row > .hidden-sm-down {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
  }

  #header .header-nav .row > .hidden-sm-down > .col-md-5,
  #header .header-nav .row > .hidden-sm-down > .right-nav {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    height: 38px !important;
    padding: 0 !important;
  }

  #header .header-nav .row > .hidden-sm-down > .right-nav {
    justify-content: flex-end !important;
  }

  #header .header-nav a,
  #header .header-nav span,
  #header .header-nav button {
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
  }

  #header .header-top,
  #header .header-top > .container,
  #header .header-top > .container > .row:not(#mobile_top_menu_wrapper) {
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
  }

  #header .header-top {
    position: relative !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
    background: linear-gradient(180deg, #111 0%, #070707 100%) !important;
    border-bottom: 1px solid rgba(201, 163, 63, .36) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .14) !important;
  }

  #header .header-top > .container > .row:not(#mobile_top_menu_wrapper) {
    display: grid !important;
    grid-template-columns: 160px minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
  }

  #header .header-top #_desktop_logo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 160px !important;
    height: 82px !important;
    padding: 0 !important;
    z-index: auto !important;
  }

  #header .header-top #_desktop_logo img,
  #header .header-top #_desktop_logo .logo,
  #header .header-top img.logo {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: 145px !important;
    height: auto !important;
    max-height: 44px !important;
    margin: 0 !important;
    transform: none !important;
    filter: none !important;
    object-fit: contain !important;
  }

  #header .header-top .header-top-right {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) !important;
    gap: 22px !important;
    align-items: center !important;
    width: 100% !important;
    height: 82px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #header .header-top #_desktop_top_menu,
  #header .header-top #top-menu,
  #header .header-top #top-menu.top-menu[data-depth="0"] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    z-index: auto !important;
  }

  #header .header-top #top-menu.top-menu[data-depth="0"] {
    flex-wrap: nowrap !important;
    gap: 16px !important;
  }

  #header .header-top #top-menu.top-menu[data-depth="0"] > li {
    position: relative !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  #header .header-top #top-menu.top-menu[data-depth="0"] > li > a {
    display: flex !important;
    align-items: center !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #f5f2ea !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
  }

  #header .header-top #top-menu.top-menu[data-depth="0"] > li > a:hover,
  #header .header-top #top-menu.top-menu[data-depth="0"] > li > a:focus {
    color: var(--qm-gold) !important;
  }

  #header .header-top #top-menu.top-menu[data-depth="0"] > li:not(:hover):not(:focus-within) > .sub-menu,
  #header .header-top #top-menu.top-menu[data-depth="0"] > li:not(:hover):not(:focus-within) > .collapse {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  #header .header-top #search_widget {
    display: block !important;
    justify-self: end !important;
    width: 100% !important;
    max-width: 300px !important;
    height: 42px !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: auto !important;
  }

  #header .header-top #search_widget form {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 42px !important;
    margin: 0 !important;
  }

  /* Keep every homepage module inside the visible content column. */
  body#index #wrapper,
  body#index #wrapper > .container,
  body#index #content-wrapper,
  body#index #main,
  body#index #content,
  body#index .page-home,
  body#index #carousel,
  body#index #custom-text,
  body#index .custom-text,
  body#index .block-custom-text,
  body#index .featured-products {
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    float: none !important;
    min-width: 0 !important;
  }

  body#index #wrapper,
  body#index #content-wrapper,
  body#index #main,
  body#index #content,
  body#index .page-home {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  body#index #wrapper > .container {
    position: relative !important;
    width: calc(100% - 32px) !important;
    max-width: 1180px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  body#index #carousel {
    position: relative !important;
    display: block !important;
    width: calc(100% - 32px) !important;
    max-width: 1120px !important;
    margin: 26px auto 12px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body#index #carousel .carousel-inner,
  body#index #carousel .carousel-item,
  body#index #carousel .carousel-item.active {
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  body#index #custom-text,
  body#index .custom-text,
  body#index .block-custom-text,
  body#index .featured-products {
    position: relative !important;
    width: calc(100% - 32px) !important;
    max-width: 1120px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

/* Tablet: two calm rows, without the crowded utility bar. */
@media (min-width: 768px) and (max-width: 991.98px) {
  #header .header-nav {
    display: none !important;
  }

  #header .header-top,
  #header .header-top > .container,
  #header .header-top > .container > .row:not(#mobile_top_menu_wrapper) {
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
  }

  #header .header-top > .container,
  body#index #wrapper > .container,
  body#index #carousel,
  body#index #custom-text,
  body#index .custom-text,
  body#index .block-custom-text,
  body#index .featured-products {
    width: calc(100% - 24px) !important;
  }

  #header .header-top > .container > .row:not(#mobile_top_menu_wrapper) {
    grid-template-columns: 125px minmax(0, 1fr) !important;
  }

  #header .header-top #_desktop_logo {
    width: 125px !important;
    height: 108px !important;
  }

  #header .header-top #_desktop_logo img,
  #header .header-top #_desktop_logo .logo,
  #header .header-top img.logo {
    max-width: 112px !important;
    max-height: 38px !important;
  }

  #header .header-top .header-top-right {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 34px 42px !important;
    gap: 8px !important;
    align-content: center !important;
    height: 108px !important;
  }

  #header .header-top #top-menu.top-menu[data-depth="0"] {
    gap: 11px !important;
    min-height: 34px !important;
  }

  #header .header-top #top-menu.top-menu[data-depth="0"] > li > a {
    min-height: 34px !important;
    font-size: 10.5px !important;
    letter-spacing: 0 !important;
  }

  #header .header-top #search_widget {
    justify-self: start !important;
    max-width: 320px !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  #header .header-top > .container > .row:not(#mobile_top_menu_wrapper) {
    grid-template-columns: 140px minmax(0, 1fr) !important;
  }

  #header .header-top #_desktop_logo {
    width: 140px !important;
  }

  #header .header-top #_desktop_logo img,
  #header .header-top #_desktop_logo .logo,
  #header .header-top img.logo {
    max-width: 128px !important;
    max-height: 40px !important;
  }

  #header .header-top .header-top-right {
    grid-template-columns: minmax(0, 1fr) 230px !important;
    gap: 14px !important;
  }

  #header .header-top #top-menu.top-menu[data-depth="0"] {
    gap: 10px !important;
  }

  #header .header-top #top-menu.top-menu[data-depth="0"] > li > a {
    font-size: 10.5px !important;
    letter-spacing: 0 !important;
  }

  #header .header-top #search_widget {
    max-width: 230px !important;
  }
}

/* =========================================================
   QM PHASE 1D - DESKTOP HEADER FINAL ALIGNMENT
   Removes the remaining legacy grid coordinates.
========================================================= */

@media (min-width: 768px) {
  #header .header-top #_desktop_logo,
  #header .header-top #_desktop_top_menu,
  #header .header-top #search_widget {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: center !important;
  }

  #header .header-top #_desktop_top_menu {
    justify-self: stretch !important;
  }
}

@media (min-width: 1200px) {
  #header .header-nav,
  #header .header-nav > .container,
  #header .header-nav > .container > .row,
  #header .header-nav .row > .hidden-sm-down {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  #header .header-nav .row > .hidden-sm-down > .col-md-5,
  #header .header-nav .row > .hidden-sm-down > .right-nav {
    height: 40px !important;
  }

  #header .header-nav a,
  #header .header-nav span,
  #header .header-nav button {
    font-size: 11.5px !important;
    font-weight: 500 !important;
  }

  #header .header-top,
  #header .header-top > .container,
  #header .header-top > .container > .row:not(#mobile_top_menu_wrapper) {
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
  }

  #header .header-top > .container > .row:not(#mobile_top_menu_wrapper) {
    grid-template-columns: 180px minmax(0, 1fr) !important;
  }

  #header .header-top #_desktop_logo {
    width: 180px !important;
    height: 88px !important;
  }

  #header .header-top #_desktop_logo img,
  #header .header-top #_desktop_logo .logo,
  #header .header-top img.logo {
    max-width: 160px !important;
    max-height: 48px !important;
  }

  #header .header-top .header-top-right {
    grid-template-columns: minmax(0, 1fr) 320px !important;
    grid-template-rows: 1fr !important;
    gap: 24px !important;
    height: 88px !important;
    align-content: center !important;
  }

  #header .header-top #_desktop_top_menu,
  #header .header-top #top-menu,
  #header .header-top #top-menu.top-menu[data-depth="0"] {
    height: 44px !important;
    min-height: 44px !important;
  }

  #header .header-top #top-menu.top-menu[data-depth="0"] {
    justify-content: flex-start !important;
    gap: 18px !important;
  }

  #header .header-top #top-menu.top-menu[data-depth="0"] > li > a {
    min-height: 44px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .012em !important;
  }

  #header .header-top #search_widget {
    justify-self: end !important;
    width: 320px !important;
    max-width: 320px !important;
    height: 44px !important;
  }

  #header .header-top #search_widget form {
    width: 320px !important;
    max-width: 320px !important;
    height: 44px !important;
  }

  #header .header-top #search_widget form input[type="text"],
  #header .header-top #search_widget form input[type="search"] {
    height: 42px !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
  }

  #header .header-top #search_widget form button {
    width: 48px !important;
    height: 44px !important;
  }
}

/* =========================================================
   QM PHASE 2A - ALL CATEGORY PAGES
   Product-first hierarchy for every PrestaShop category.
========================================================= */

body#category .breadcrumb {
  max-width: 1180px !important;
  margin: 16px auto 14px !important;
  padding: 0 16px !important;
  color: #777 !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

body#category .breadcrumb a,
body#category .breadcrumb span {
  color: #777 !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  text-shadow: none !important;
}

body#category #wrapper > .container {
  width: calc(100% - 32px) !important;
  max-width: 1180px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

body#category #left-column,
body#category #content-wrapper,
body#category #main {
  min-width: 0 !important;
}

/* Compact, calm category introduction. */
body#category .block-category.card,
body#category .block-category.card-block {
  min-height: 0 !important;
  margin: 0 0 20px !important;
  padding: 22px 24px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid rgba(201, 163, 63, .18) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 26px rgba(18, 18, 18, .055) !important;
}

body#category .block-category h1,
body#category .block-category .h1 {
  margin: 0 0 13px !important;
  color: #171717 !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: .025em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

body#category .block-category .block-category-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 22px !important;
  align-items: start !important;
  min-height: 0 !important;
}

body#category #category-description {
  position: relative !important;
  max-height: 104px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #555 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-shadow: none !important;
}

body#category #category-description::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 30px !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 88%) !important;
}

body#category #category-description p,
body#category #category-description li,
body#category #category-description div,
body#category #category-description span {
  color: #555 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-shadow: none !important;
}

body#category #category-description p {
  margin: 0 0 8px !important;
}

body#category #category-description p:first-child {
  color: #777 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

body#category #category-description h2,
body#category #category-description h3,
body#category #category-description h4 {
  margin: 14px 0 7px !important;
  color: #333 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-shadow: none !important;
}

body#category .block-category .category-cover {
  width: 140px !important;
  min-width: 140px !important;
  margin: 0 !important;
}

body#category .block-category .category-cover picture,
body#category .block-category .category-cover img {
  display: block !important;
  width: 140px !important;
  max-width: 140px !important;
  height: 96px !important;
  max-height: 96px !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 10px !important;
}

/* Subcategories become quiet, uniform catalogue cards. */
body#category #subcategories.card,
body#category #subcategories.card-block {
  margin: 0 0 22px !important;
  padding: 20px 22px 22px !important;
  background: #fff !important;
  border: 1px solid rgba(201, 163, 63, .16) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(18, 18, 18, .045) !important;
}

body#category #subcategories .subcategory-heading {
  margin: 0 0 17px !important;
  color: #222 !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: .015em !important;
  text-transform: none !important;
  text-shadow: none !important;
}

body#category #subcategories .subcategories-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body#category #subcategories .subcategories-list > li {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

body#category #subcategories .subcategory-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 124px !important;
  margin: 0 !important;
  padding: 12px !important;
  overflow: hidden !important;
  background: #faf9f6 !important;
  border: 1px solid rgba(20, 20, 20, .07) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body#category #subcategories .subcategory-image a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}

body#category #subcategories .subcategory-image img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 100px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

body#category #subcategories .subcategories-list h5 {
  margin: 11px 0 0 !important;
  padding: 0 4px !important;
  color: #242424 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  text-shadow: none !important;
}

body#category #subcategories .subcategories-list h5 a {
  color: #242424 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

body#category #subcategories .subcategories-list h5 a:hover,
body#category #subcategories .subcategories-list h5 a:focus {
  color: var(--qm-gold-dark) !important;
}

/* Sidebar becomes supporting navigation instead of the focal point. */
body#category #left-column .block-categories,
body#category #left-column #search_filters_brands,
body#category #left-column #search_filters_suppliers,
body#category #left-column .block {
  margin: 0 0 18px !important;
  padding: 17px 18px !important;
  background: #fff !important;
  border: 1px solid rgba(20, 20, 20, .07) !important;
  border-radius: 12px !important;
  box-shadow: 0 7px 20px rgba(18, 18, 18, .04) !important;
}

body#category #left-column .block-categories .h6,
body#category #left-column .block .h6,
body#category #left-column .block-title,
body#category #left-column .facet-title {
  margin: 0 0 11px !important;
  color: #222 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

body#category #left-column .category-sub-menu,
body#category #left-column .category-sub-menu li,
body#category #left-column .category-sub-menu a,
body#category #left-column .block a,
body#category #left-column .block li {
  color: #333 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-shadow: none !important;
}

body#category #left-column .category-sub-menu > li > a,
body#category #left-column .category-sub-menu li[data-depth="0"] > a {
  font-size: 13.5px !important;
  font-weight: 600 !important;
}

body#category #left-column a:hover,
body#category #left-column a:focus {
  color: var(--qm-gold-dark) !important;
}

body#category #left-column .collapse-icons,
body#category #left-column .navbar-toggler {
  color: #333 !important;
  transform: scale(.86) !important;
  transform-origin: center !important;
}

/* Sorting remains visible but visually secondary. */
body#category #products .products-selection {
  margin: 0 0 18px !important;
  padding: 11px 14px !important;
  background: #fff !important;
  border: 1px solid rgba(20, 20, 20, .07) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body#category #products .products-selection,
body#category #products .products-selection p,
body#category #products .products-selection span,
body#category #products .products-selection button,
body#category #products .products-selection a {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  text-shadow: none !important;
}

@media (min-width: 1200px) {
  body#category #left-column {
    flex: 0 0 21.5% !important;
    width: 21.5% !important;
    max-width: 21.5% !important;
  }

  body#category #content-wrapper {
    flex: 0 0 78.5% !important;
    width: 78.5% !important;
    max-width: 78.5% !important;
  }
}

@media (max-width: 767.98px) {
  body#category .breadcrumb {
    width: 100% !important;
    margin: 11px auto 10px !important;
    padding: 0 12px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 11.5px !important;
  }

  body#category .breadcrumb a,
  body#category .breadcrumb span {
    font-size: 11.5px !important;
  }

  body#category #wrapper > .container {
    width: 100% !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  body#category .block-category.card,
  body#category .block-category.card-block {
    margin-bottom: 14px !important;
    padding: 16px !important;
    border-radius: 12px !important;
  }

  body#category .block-category h1,
  body#category .block-category .h1 {
    margin-bottom: 10px !important;
    font-size: 19px !important;
  }

  body#category .block-category .block-category-inner {
    display: block !important;
  }

  body#category #category-description {
    max-height: 82px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  body#category #category-description p,
  body#category #category-description li,
  body#category #category-description div,
  body#category #category-description span {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  body#category .block-category .category-cover {
    display: none !important;
  }

  body#category #subcategories.card,
  body#category #subcategories.card-block {
    margin-bottom: 16px !important;
    padding: 16px 14px 17px !important;
    border-radius: 12px !important;
  }

  body#category #subcategories .subcategory-heading {
    margin-bottom: 14px !important;
    font-size: 17px !important;
  }

  body#category #subcategories .subcategories-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body#category #subcategories .subcategory-image {
    height: 104px !important;
    padding: 9px !important;
  }

  body#category #subcategories .subcategory-image img {
    max-height: 84px !important;
  }

  body#category #subcategories .subcategories-list h5 {
    margin-top: 8px !important;
    font-size: 12px !important;
  }

  body#category #left-column .block-categories,
  body#category #left-column #search_filters_brands,
  body#category #left-column #search_filters_suppliers,
  body#category #left-column .block {
    padding: 14px 15px !important;
  }

  body#category #products .products-selection {
    padding: 10px 12px !important;
  }
}

/* =========================================================
   QM PHASE 2B - CATEGORY INTRO WITHOUT FADE
   Clean three-line summary on every category page
========================================================= */

body#category #category-description {
  max-height: none !important;
  overflow: visible !important;
}

body#category #category-description::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

body#category #category-description > * {
  display: none !important;
}

body#category #category-description > p:nth-of-type(1),
body#category #category-description > p:nth-of-type(2) {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body#category #category-description > p:nth-of-type(1) {
  -webkit-line-clamp: 1 !important;
  margin: 0 0 7px !important;
}

body#category #category-description > p:nth-of-type(2) {
  -webkit-line-clamp: 2 !important;
  margin: 0 !important;
}

@media (max-width: 767px) {
  body#category #category-description {
    max-height: none !important;
  }

  body#category #category-description > p:nth-of-type(1) {
    margin-bottom: 6px !important;
  }
}

/* =========================================================
   QM PHASE 2C - SEARCH, MOBILE MENU & READ MORE
========================================================= */

/* The empty-category search belongs to PrestaShop's no-results block.
   Keep the real header search, but remove this duplicate on categories. */
body#category #products .page-not-found #search_widget,
body#category #js-product-list .page-not-found #search_widget {
  display: none !important;
  position: static !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Without JavaScript the complete description stays readable. */
body#category #category-description:not(.qm-category-description--collapsible) > * {
  display: block !important;
}

body#category #category-description:not(.qm-category-description--collapsible) > p {
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

/* Collapsed description: one subtitle plus two lines of explanation. */
body#category #category-description.qm-category-description--collapsible > * {
  display: none !important;
}

body#category #category-description.qm-category-description--collapsible > p:nth-of-type(1),
body#category #category-description.qm-category-description--collapsible > p:nth-of-type(2) {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body#category #category-description.qm-category-description--collapsible > p:nth-of-type(1) {
  -webkit-line-clamp: 1 !important;
}

body#category #category-description.qm-category-description--collapsible > p:nth-of-type(2) {
  -webkit-line-clamp: 2 !important;
}

/* Expanded description shows all original PrestaShop content. */
body#category #category-description.qm-category-description--expanded > * {
  display: block !important;
}

body#category #category-description.qm-category-description--expanded > p {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

body#category #category-description > .qm-category-description-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  margin: 5px 0 0 !important;
  padding: 0 !important;
  color: #9b741d !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(201, 163, 63, .55) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .015em !important;
  cursor: pointer !important;
}

body#category #category-description > .qm-category-description-toggle:hover,
body#category #category-description > .qm-category-description-toggle:focus {
  color: #111 !important;
  border-bottom-color: #111 !important;
  outline: none !important;
}

@media (max-width: 767.98px) {
  #header #menu-icon {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10020 !important;
  }

  #header #menu-icon .material-icons,
  #header #menu-icon i {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--qm-gold) !important;
  }

  #header #mobile_top_menu_wrapper {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: both !important;
    overflow: visible !important;
    background: #fff !important;
    z-index: 10010 !important;
  }

  #header #_mobile_top_menu {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: #fff !important;
  }

  body:not(.qm-mobile-menu-open) #header #mobile_top_menu_wrapper {
    display: none !important;
  }

  body.qm-mobile-menu-open #header #mobile_top_menu_wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.qm-mobile-menu-open #header .header-top {
    overflow: visible !important;
  }

  body#category #category-description > .qm-category-description-toggle {
    min-height: 30px !important;
    font-size: 12px !important;
  }
}

/* =========================================================
   QM PHASE 2E - PREMIUM BRANDED HEADER BANNER
========================================================= */

#header .header-nav {
  background: #030303 !important;
  border-bottom: 1px solid rgba(201, 163, 63, .18) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .025) !important;
}

#header .header-top {
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(201, 163, 63, .14) 0%, rgba(201, 163, 63, 0) 36%),
    radial-gradient(circle at 82% 115%, rgba(201, 163, 63, .07) 0%, rgba(201, 163, 63, 0) 34%),
    linear-gradient(105deg, #020202 0%, #101010 48%, #050505 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, .035) !important;
  border-bottom: 1px solid rgba(201, 163, 63, .34) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .035),
    inset 0 -16px 30px rgba(0, 0, 0, .18) !important;
}

/* Existing Quality Motors logo reused as a quiet silhouette. */
#header .header-top::before {
  content: "" !important;
  position: absolute !important;
  top: -28% !important;
  right: 4% !important;
  bottom: -28% !important;
  width: clamp(280px, 32vw, 500px) !important;
  background-image: url("https://qualitymotors.nl/webshop/img/logo-1779290034.jpg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  opacity: .06 !important;
  filter: grayscale(1) sepia(1) saturate(.8) brightness(1.6) !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

#header .header-top > .container {
  position: relative !important;
  z-index: 2 !important;
}

#header .header-top::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 163, 63, .22) 12%,
    rgba(229, 200, 120, .82) 50%,
    rgba(201, 163, 63, .22) 88%,
    transparent 100%
  ) !important;
  box-shadow: 0 0 14px rgba(201, 163, 63, .24) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

#header .header-top #_desktop_logo img,
#header .header-top #_desktop_logo .logo,
#header .header-nav #_mobile_logo img,
#header .header-nav #_mobile_logo .logo {
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .48)) !important;
}

#header .header-top #_desktop_top_menu .top-menu[data-depth="0"] > li > a {
  text-shadow: 0 1px 8px rgba(0, 0, 0, .58) !important;
}

#header .header-top #search_widget form {
  background: rgba(255, 255, 255, .975) !important;
  border-color: rgba(201, 163, 63, .62) !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .88) !important;
}

@media (max-width: 767.98px) {
  #header .header-top {
    overflow: visible !important;
  }

  #header .header-top::before {
    top: -12px !important;
    right: -72px !important;
    bottom: -12px !important;
    width: 250px !important;
    opacity: .045 !important;
  }
}

/* ==========================================================
   QM PHASE 2F — VERFIJNDE SERVICEBALK + MONOGRAM WATERMERK
   ========================================================== */

/* De twee headerlagen voelen als één rustig, premium geheel. */
#header .header-nav {
  background: linear-gradient(90deg, #020202 0%, #080808 50%, #020202 100%) !important;
  border-bottom: 1px solid rgba(201, 163, 63, .16) !important;
  box-shadow: none !important;
}

#header .header-top {
  background:
    radial-gradient(circle at 20% -45%, rgba(201, 163, 63, .075) 0%, transparent 38%),
    linear-gradient(105deg, #020202 0%, #0a0a0a 52%, #030303 100%) !important;
  border-top: 0 !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

/* Alleen het schild van het bestaande logo wordt zichtbaar.
   De smalle uitsnede voorkomt dat de volledige woordmarkering
   nog achter de zoekbalk verschijnt. */
#header .header-top::before {
  top: 0 !important;
  right: 38.5% !important;
  bottom: 0 !important;
  width: 118px !important;
  background-image: url("https://qualitymotors.nl/webshop/img/logo-1779290034.jpg") !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: 370px auto !important;
  opacity: .075 !important;
  filter: grayscale(1) sepia(1) saturate(.72) brightness(1.42) !important;
  mix-blend-mode: screen !important;
  transform: none !important;
  pointer-events: none !important;
}

#header .header-top::after {
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 163, 63, .18) 18%,
    rgba(224, 193, 111, .62) 50%,
    rgba(201, 163, 63, .18) 82%,
    transparent 100%
  ) !important;
  box-shadow: 0 0 9px rgba(201, 163, 63, .16) !important;
}

#header .header-top #search_widget form {
  border-color: rgba(201, 163, 63, .52) !important;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .86) !important;
}

/* Slanke servicebalk op tablet en desktop. */
@media (min-width: 768px) {
  #header .header-nav,
  #header .header-nav > .container,
  #header .header-nav > .container > .row {
    min-height: 34px !important;
    height: 34px !important;
  }

  #header .header-nav .row,
  #header .header-nav .row > [class*="col-"] {
    align-items: center !important;
  }

  #header .header-nav a,
  #header .header-nav span,
  #header .header-nav label {
    color: rgba(255, 255, 255, .78) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
  }

  #header .header-nav .material-icons,
  #header .header-nav i {
    color: #cfaa45 !important;
  }

  #header .header-nav .language-selector .btn,
  #header .header-nav .language-selector .dropdown-toggle,
  #header .header-nav .currency-selector .btn,
  #header .header-nav .currency-selector .dropdown-toggle,
  #header .header-nav [class*="language-selector"] button,
  #header .header-nav [class*="currency-selector"] button {
    min-height: 22px !important;
    height: 22px !important;
    padding: 0 10px !important;
    background: rgba(201, 163, 63, .10) !important;
    border: 1px solid rgba(201, 163, 63, .34) !important;
    border-radius: 999px !important;
    color: #e2c777 !important;
    box-shadow: none !important;
  }
}

/* Op compactere schermen blijft het monogram uit de buurt van
   menu en zoekveld. Op echte telefoons laten we het weg voor rust. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  #header .header-top::before {
    right: 6.5% !important;
    width: 104px !important;
    background-size: 330px auto !important;
    opacity: .055 !important;
  }
}

@media (max-width: 767.98px) {
  #header .header-top::before {
    display: none !important;
  }
}

/* ==========================================================
   QM PHASE 2J — ZACHTER, VERGRIJSD CHAMPAGNEGOUd
   ========================================================== */

@media (min-width: 768px) {
  html body #header .header-nav {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .03) 46%, rgba(66, 47, 15, .10) 100%),
      linear-gradient(100deg, #aa915a 0%, #c4aa70 24%, #ddcda0 50%, #c4aa70 76%, #aa915a 100%) !important;
    border-top-color: rgba(255, 249, 223, .62) !important;
    border-bottom-color: rgba(70, 54, 23, .34) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .22),
      inset 0 -1px 0 rgba(68, 50, 17, .12) !important;
  }

  html body #header .header-nav .language-selector .btn,
  html body #header .header-nav .language-selector .dropdown-toggle,
  html body #header .header-nav .currency-selector .btn,
  html body #header .header-nav .currency-selector .dropdown-toggle,
  html body #header .header-nav [class*="language-selector"] button,
  html body #header .header-nav [class*="currency-selector"] button {
    background: rgba(255, 253, 244, .42) !important;
    border-color: rgba(62, 48, 20, .25) !important;
  }
}

#header .header-top::before {
  opacity: .13 !important;
  filter: invert(1) sepia(1) saturate(2.1) brightness(1.65) contrast(1.02) !important;
}

@media (max-width: 767.98px) {
  #header .header-top::before {
    display: none !important;
  }
}

/* ==========================================================
   QM PHASE 2I — EXACT HETZELFDE MINILOGOPATROON ALS DE PAGINA
   ========================================================== */

#header .header-top::before {
  display: block !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  background-image: url("https://qualitymotors.nl/webshop/img/webshopimgqm-pattern-bg.png") !important;
  background-repeat: repeat !important;
  background-position: center top !important;
  background-size: 170px auto !important;
  opacity: .20 !important;
  filter: invert(1) sepia(1) saturate(3.2) brightness(1.85) contrast(1.05) !important;
  mix-blend-mode: screen !important;
  transform: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

@media (max-width: 767.98px) {
  #header .header-top::before {
    display: none !important;
  }
}

/* ==========================================================
   QM PHASE 2K — DEFINITIEVE HEADEROVERRIDE
   Staat bewust als laatste in het bestand.
   ========================================================== */

@media (min-width: 768px) {
  html body #header .header-nav {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .03) 48%, rgba(58, 47, 27, .08) 100%),
      linear-gradient(100deg, #b3a37c 0%, #cfc09b 24%, #e9dfc7 50%, #cfc09b 76%, #b3a37c 100%) !important;
    border-top: 1px solid rgba(255, 252, 239, .60) !important;
    border-bottom: 1px solid rgba(75, 64, 42, .30) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .20),
      inset 0 -1px 0 rgba(64, 53, 31, .10) !important;
  }

  html body #header .header-nav .language-selector .btn,
  html body #header .header-nav .language-selector .dropdown-toggle,
  html body #header .header-nav .currency-selector .btn,
  html body #header .header-nav .currency-selector .dropdown-toggle,
  html body #header .header-nav [class*="language-selector"] button,
  html body #header .header-nav [class*="currency-selector"] button {
    color: #242018 !important;
    background: rgba(255, 254, 249, .48) !important;
    border-color: rgba(65, 56, 38, .24) !important;
  }
}

#header .header-top::before {
  display: block !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  background-image: url("https://qualitymotors.nl/webshop/img/webshopimgqm-pattern-bg.png") !important;
  background-repeat: repeat !important;
  background-position: center top !important;
  background-size: 170px auto !important;
  opacity: .11 !important;
  filter: invert(1) sepia(1) saturate(1.65) brightness(1.55) contrast(1.02) !important;
  mix-blend-mode: screen !important;
  transform: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

@media (max-width: 767.98px) {
  #header .header-top::before {
    display: none !important;
  }
}

/* ==========================================================
   QM PHASE 2G — LUXE SERVICEBALK, KLEIN LOGOPATROON & COOKIES
   ========================================================== */

/* Een lichte, warme servicebalk geeft de zwarte hoofdnavigatie
   een duidelijke en rustigere bovenrand. */
@media (min-width: 768px) {
  html body #header .header-nav,
  html body #header .header-nav > .container,
  html body #header .header-nav > .container > .row,
  html body #header .header-nav .row > .hidden-sm-down {
    min-height: 36px !important;
    height: 36px !important;
    max-height: 36px !important;
  }

  html body #header .header-nav {
    background: linear-gradient(180deg, #f8f5ed 0%, #eee8dc 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, .95) !important;
    border-bottom: 1px solid rgba(167, 126, 30, .38) !important;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .68) !important;
  }

  html body #header .header-nav .row > .hidden-sm-down > .col-md-5,
  html body #header .header-nav .row > .hidden-sm-down > .right-nav,
  html body #header .header-nav .right-nav > div,
  html body #header .header-nav #_desktop_contact_link,
  html body #header .header-nav #contact-link,
  html body #header .header-nav #contact-link > a {
    min-height: 36px !important;
    height: 36px !important;
    max-height: 36px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-items: center !important;
    line-height: 36px !important;
  }

  html body #header .header-nav #_desktop_contact_link,
  html body #header .header-nav #contact-link {
    display: flex !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    white-space: nowrap !important;
  }

  html body #header .header-nav #contact-link > a {
    display: inline-flex !important;
    width: auto !important;
    margin-left: 4px !important;
    padding: 0 !important;
  }

  html body #header .header-nav a,
  html body #header .header-nav span,
  html body #header .header-nav label,
  html body #header .header-nav button,
  html body #header .header-nav #contact-link {
    color: #29261f !important;
    font-size: 11px !important;
    font-weight: 550 !important;
    letter-spacing: .005em !important;
    text-shadow: none !important;
  }

  html body #header .header-nav .material-icons,
  html body #header .header-nav i {
    color: #9d7518 !important;
  }

  html body #header .header-nav .language-selector .btn,
  html body #header .header-nav .language-selector .dropdown-toggle,
  html body #header .header-nav .currency-selector .btn,
  html body #header .header-nav .currency-selector .dropdown-toggle,
  html body #header .header-nav [class*="language-selector"] button,
  html body #header .header-nav [class*="currency-selector"] button {
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 11px !important;
    color: #3a301a !important;
    background: rgba(255, 255, 255, .72) !important;
    border: 1px solid rgba(166, 124, 27, .42) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
    line-height: 22px !important;
  }
}

/* Geen los, uitvergroot schild meer. De bestaande logomarkering
   keert klein en gelijkmatig terug als nauwelijks zichtbaar patroon. */
#header .header-top::before {
  display: block !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  background-image: url("https://qualitymotors.nl/webshop/img/logo-1779290034.jpg") !important;
  background-repeat: repeat-x !important;
  background-position: 24px center !important;
  background-size: 150px auto !important;
  opacity: .022 !important;
  filter: grayscale(1) sepia(1) saturate(.55) brightness(1.45) !important;
  mix-blend-mode: screen !important;
  transform: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

#header .header-top > .container {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 767.98px) {
  #header .header-top::before {
    display: none !important;
  }
}

/* Cookiebanner — gericht op het eigen QMCC-cookieonderdeel zodat
   algemene knop- en kopstijlen de tekst niet meer kunnen verbergen. */
#qmcc-banner.qmcc {
  left: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  max-width: 1080px !important;
  color: #f5f1e8 !important;
  background:
    radial-gradient(circle at 82% -40%, rgba(201, 163, 63, .13), transparent 42%),
    linear-gradient(135deg, #11110f 0%, #080808 100%) !important;
  border: 1px solid rgba(201, 163, 63, .42) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38) !important;
  overflow: hidden !important;
}

#qmcc-banner .qmcc__inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 28px !important;
  padding: 22px 24px !important;
}

#qmcc-banner .qmcc__content {
  min-width: 0 !important;
}

#qmcc-banner #qmcc-title,
#qmcc-banner .qmcc__title {
  display: block !important;
  margin: 0 0 7px !important;
  color: #f2dfaa !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  text-shadow: none !important;
}

#qmcc-banner #qmcc-desc,
#qmcc-banner .qmcc__text {
  margin: 0 !important;
  color: rgba(255, 255, 255, .82) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

#qmcc-banner .qmcc__links {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 10px 0 0 !important;
}

#qmcc-banner .qmcc__link,
#qmcc-banner .qmcc__link:hover,
#qmcc-banner .qmcc__link:focus,
#qmcc-banner .qmcc__link--button {
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 0 2px !important;
  color: #dec474 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(222, 196, 116, .55) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  text-transform: none !important;
}

#qmcc-banner .qmcc__actions {
  display: grid !important;
  grid-template-columns: 160px 180px !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
}

#qmcc-banner .qmcc__btn,
#qmcc-banner [data-qmcc-reject],
#qmcc-banner [data-qmcc-accept] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  opacity: 1 !important;
}

#qmcc-banner [data-qmcc-reject] {
  color: #eadba9 !important;
  background: transparent !important;
  border: 1px solid rgba(218, 187, 98, .62) !important;
}

#qmcc-banner [data-qmcc-reject]:hover,
#qmcc-banner [data-qmcc-reject]:focus {
  color: #fff !important;
  background: rgba(201, 163, 63, .12) !important;
  border-color: #d5b251 !important;
}

#qmcc-banner [data-qmcc-accept] {
  color: #15130e !important;
  background: linear-gradient(180deg, #d8b448 0%, #bd9127 100%) !important;
  border: 1px solid #d8b448 !important;
}

#qmcc-banner [data-qmcc-accept]:hover,
#qmcc-banner [data-qmcc-accept]:focus {
  color: #0d0d0d !important;
  background: #e0c164 !important;
  border-color: #e0c164 !important;
}

/* Ook het voorkeurenvenster krijgt dezelfde leesbare hiërarchie. */
#qmcc-modal .qmcc-modal__panel {
  border: 1px solid rgba(201, 163, 63, .40) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42) !important;
}

#qmcc-modal .qmcc-modal__header {
  color: #f3e3b5 !important;
  background: #0d0d0c !important;
  border-bottom-color: rgba(201, 163, 63, .32) !important;
}

#qmcc-modal #qmcc-modal-title {
  margin: 0 !important;
  color: #f3e3b5 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
}

#qmcc-modal .qmcc-modal__close {
  color: #e2c878 !important;
  background: transparent !important;
}

#qmcc-modal .qmcc-modal__footer .qmcc__btn {
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

#qmcc-modal [data-qmcc-save-selection] {
  color: #6f5518 !important;
  background: #fff !important;
  border: 1px solid #b68b25 !important;
}

#qmcc-modal [data-qmcc-accept-all-settings] {
  color: #15130e !important;
  background: #cfaa3e !important;
  border: 1px solid #cfaa3e !important;
}

@media (max-width: 767.98px) {
  #qmcc-banner.qmcc {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    border-radius: 12px !important;
  }

  #qmcc-banner .qmcc__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: 18px !important;
  }

  #qmcc-banner .qmcc__actions {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  #qmcc-banner .qmcc__btn {
    width: 100% !important;
  }

  #qmcc-modal .qmcc-modal__panel {
    max-height: calc(100vh - 20px) !important;
    margin: 10px !important;
    overflow-y: auto !important;
  }
}

/* ==========================================================
   QM PHASE 2H — CHAMPAGNE SERVICEBALK + SCHILDPATROON
   ========================================================== */

@media (min-width: 768px) {
  html body #header .header-nav {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .04) 44%, rgba(73, 46, 0, .16) 100%),
      linear-gradient(100deg, #9f7319 0%, #c99f39 24%, #e4c86f 50%, #c99f39 76%, #9f7319 100%) !important;
    border-top: 1px solid rgba(255, 244, 195, .82) !important;
    border-bottom: 1px solid rgba(73, 48, 7, .48) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .30),
      inset 0 -1px 0 rgba(70, 45, 0, .18) !important;
  }

  html body #header .header-nav a,
  html body #header .header-nav span,
  html body #header .header-nav label,
  html body #header .header-nav button,
  html body #header .header-nav #contact-link {
    color: #17130a !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .20) !important;
  }

  html body #header .header-nav .material-icons,
  html body #header .header-nav i {
    color: #352506 !important;
  }

  html body #header .header-nav .language-selector .btn,
  html body #header .header-nav .language-selector .dropdown-toggle,
  html body #header .header-nav .currency-selector .btn,
  html body #header .header-nav .currency-selector .dropdown-toggle,
  html body #header .header-nav [class*="language-selector"] button,
  html body #header .header-nav [class*="currency-selector"] button {
    color: #211806 !important;
    background: rgba(255, 251, 231, .46) !important;
    border: 1px solid rgba(67, 45, 6, .32) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .52),
      0 1px 0 rgba(255, 255, 255, .12) !important;
  }
}

/* Vereenvoudigd schild met M: klein, ruim verdeeld en zonder
   de tekst van het volledige logo. De brede SVG-tegel zorgt
   voor veel ademruimte tussen ieder monogram. */
#header .header-top::before {
  display: block !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 72'%3E%3Cg transform='translate(91 9)' fill='none' stroke='%23d9b85b' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round' opacity='.42'%3E%3Cpath d='M19 1 36 7v18c0 12-7 21-17 27C9 46 2 37 2 25V7Z'/%3E%3Cpath d='M10 36V17l9 13 9-13v19'/%3E%3Cpath d='M7 11c7-3 17-3 24 0' opacity='.7'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat: repeat-x !important;
  background-position: center !important;
  background-size: 220px 72px !important;
  opacity: .22 !important;
  filter: none !important;
  mix-blend-mode: screen !important;
  transform: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

@media (max-width: 767.98px) {
  #header .header-top::before {
    display: none !important;
  }
}

/* ==========================================================
   QM PHASE 2L — LAATSTE EN ACTIEVE HEADERINSTELLING
   ========================================================== */

@media (min-width: 768px) {
  html body #header .header-nav {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .03) 48%, rgba(58, 47, 27, .08) 100%),
      linear-gradient(100deg, #b3a37c 0%, #cfc09b 24%, #e9dfc7 50%, #cfc09b 76%, #b3a37c 100%) !important;
    border-top: 1px solid rgba(255, 252, 239, .60) !important;
    border-bottom: 1px solid rgba(75, 64, 42, .30) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .20),
      inset 0 -1px 0 rgba(64, 53, 31, .10) !important;
  }

  html body #header .header-nav .language-selector .btn,
  html body #header .header-nav .language-selector .dropdown-toggle,
  html body #header .header-nav .currency-selector .btn,
  html body #header .header-nav .currency-selector .dropdown-toggle,
  html body #header .header-nav [class*="language-selector"] button,
  html body #header .header-nav [class*="currency-selector"] button {
    color: #242018 !important;
    background: rgba(255, 254, 249, .48) !important;
    border-color: rgba(65, 56, 38, .24) !important;
  }
}

#header .header-top::before {
  display: block !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  background-image: url("https://qualitymotors.nl/webshop/img/webshopimgqm-pattern-bg.png") !important;
  background-repeat: repeat !important;
  background-position: center top !important;
  background-size: 170px auto !important;
  opacity: .11 !important;
  filter: invert(1) sepia(1) saturate(1.65) brightness(1.55) contrast(1.02) !important;
  mix-blend-mode: screen !important;
  transform: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

@media (max-width: 767.98px) {
  #header .header-top::before {
    display: none !important;
  }
}

/* ==========================================================
   QM PHASE 2M — MOBIELE ACCOUNT- EN WINKELWAGENKNOP
   ========================================================== */

@media (max-width: 767.98px) {
  #header .header-nav .mobile {
    grid-template-columns: 42px minmax(0, 1fr) 62px 62px !important;
    grid-template-areas: "menu logo user cart" !important;
    column-gap: 6px !important;
  }

  #header #_mobile_user_info,
  #header #_mobile_cart {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    justify-self: center !important;
  }

  #header #_mobile_user_info .user-info,
  #header #_mobile_cart .blockcart {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    height: 62px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #header #_mobile_user_info a {
    width: 60px !important;
    min-width: 0 !important;
    max-width: 60px !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header #_mobile_cart .blockcart .header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    min-width: 0 !important;
    max-width: 60px !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================
   QM PHASE 2N — PRODUCTUITLEG OVER DE VOLLE BREEDTE
   ========================================================== */

/* Verberg de nog niet ingevulde standaardteksten uit de
   PrestaShop Customer Reassurance-module. */
body#product .blockreassurance_product {
  display: none !important;
}

/* De uitgebreide uitleg staat technisch in de rechterkolom.
   Op desktop trekken we het blok daarom terug naar de linker
   paginarand en geven we het de volledige productbreedte. */
@media (min-width: 768px) {
  body#product .product-container > .col-md-6:last-of-type
  > .product-information > .tabs {
    width: calc(200% + 30px) !important;
    max-width: none !important;
    margin-top: 30px !important;
    margin-left: calc(-100% - 30px) !important;
  }
}

body#product .product-information > .tabs {
  overflow: hidden !important;
  padding: 0 28px 28px !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(191, 151, 47, .20) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(23, 18, 8, .07) !important;
}

body#product .product-information > .tabs .nav-tabs {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 -28px 24px !important;
  padding: 0 28px !important;
  background: linear-gradient(180deg, #fff 0%, #fbfaf7 100%) !important;
  border-bottom: 1px solid rgba(27, 23, 15, .09) !important;
}

body#product .product-information > .tabs .nav-tabs .nav-link {
  padding: 18px 20px 14px !important;
  color: #363229 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
}

body#product .product-information > .tabs .nav-tabs .nav-link.active {
  color: #9b7417 !important;
  border-bottom-color: #c9a227 !important;
}

body#product .product-information > .tabs .tab-content {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto !important;
}

body#product .product-information > .tabs .product-description {
  color: #4b473f !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}

body#product .product-information > .tabs .product-description h2,
body#product .product-information > .tabs .product-description h3 {
  color: #171510 !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

@media (max-width: 767.98px) {
  body#product .product-information > .tabs {
    width: 100% !important;
    max-width: 100% !important;
    margin: 24px 0 0 !important;
    padding: 0 18px 22px !important;
    border-radius: 12px !important;
  }

  body#product .product-information > .tabs .nav-tabs {
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 -18px 20px !important;
    padding: 0 12px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  body#product .product-information > .tabs .nav-tabs .nav-item {
    flex: 0 0 auto !important;
  }

  body#product .product-information > .tabs .nav-tabs .nav-link {
    padding: 15px 12px 12px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  body#product .product-information > .tabs .product-description {
    font-size: 15px !important;
    line-height: 1.58 !important;
  }
}

/* ==========================================================
   QM PHASE 2O — GOUDEN ACCENTEN IN DE SERVICEBALK
   ========================================================== */

@media (min-width: 768px) {
  html body #header .header-nav #contact-link,
  html body #header .header-nav #contact-link > a,
  html body #header .header-nav #language-selector-label,
  html body #header .header-nav #currency-selector-label,
  html body #header .header-nav #_desktop_user_info a,
  html body #header .header-nav #_desktop_user_info span,
  html body #header .header-nav #_desktop_cart .header,
  html body #header .header-nav #_desktop_cart span {
    color: #67490b !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .30) !important;
  }

  html body #header .header-nav .language-selector button,
  html body #header .header-nav .language-selector button span,
  html body #header .header-nav .currency-selector button,
  html body #header .header-nav .currency-selector button span {
    color: #72510c !important;
    font-weight: 600 !important;
  }

  html body #header .header-nav .material-icons,
  html body #header .header-nav i,
  html body #header .header-nav #_desktop_user_info .material-icons,
  html body #header .header-nav #_desktop_cart .material-icons {
    color: #8f6915 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .25) !important;
  }

  html body #header .header-nav #contact-link > a:hover,
  html body #header .header-nav #_desktop_user_info a:hover,
  html body #header .header-nav #_desktop_cart .header:hover {
    color: #332507 !important;
  }
}

/* ==========================================================
   QM PHASE 2P — MOBIELE HEADER, TRUSTBALK & NIEUWSBRIEFKAART
   ========================================================== */

/* Het nieuwsbriefblok krijgt dezelfde rustige kaarttaal als
   de categorie-intro's en overige contentblokken. */
#footer > .container:first-child {
  padding-top: 28px !important;
  padding-bottom: 10px !important;
}

#blockEmailSubscription_displayFooterBefore {
  display: block !important;
  float: none !important;
  width: calc(100% - 32px) !important;
  max-width: 1120px !important;
  margin: 0 auto 28px !important;
  padding: 26px 28px !important;
  background:
    radial-gradient(circle at 92% -35%, rgba(201, 162, 39, .08), transparent 42%),
    rgba(255, 255, 255, .97) !important;
  border: 1px solid rgba(181, 139, 35, .20) !important;
  border-radius: 15px !important;
  box-shadow: 0 12px 34px rgba(30, 23, 8, .08) !important;
}

#blockEmailSubscription_displayFooterBefore > .row {
  display: grid !important;
  grid-template-columns: minmax(220px, .72fr) minmax(320px, 1.28fr) !important;
  align-items: center !important;
  gap: 28px !important;
  margin: 0 !important;
}

#blockEmailSubscription_displayFooterBefore > .row > * {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

#blockEmailSubscription_displayFooterBefore #block-newsletter-label {
  position: relative !important;
  color: #1c1913 !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}

#blockEmailSubscription_displayFooterBefore #block-newsletter-label::after {
  content: "" !important;
  display: block !important;
  width: 44px !important;
  height: 1px !important;
  margin-top: 10px !important;
  background: #c9a227 !important;
}

#blockEmailSubscription_displayFooterBefore form {
  margin: 0 !important;
}

#blockEmailSubscription_displayFooterBefore form > .row {
  margin: 0 !important;
}

#blockEmailSubscription_displayFooterBefore form .input-wrapper {
  overflow: hidden !important;
  border: 1px solid rgba(164, 127, 32, .34) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: inset 0 1px 2px rgba(24, 19, 8, .04) !important;
}

#blockEmailSubscription_displayFooterBefore form input[type="email"] {
  height: 44px !important;
  padding: 0 16px !important;
  color: #302c24 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

#blockEmailSubscription_displayFooterBefore form input[type="submit"] {
  min-width: 116px !important;
  height: 44px !important;
  padding: 0 18px !important;
  color: #17130a !important;
  background: linear-gradient(180deg, #d7b348 0%, #c79b2d 100%) !important;
  border: 1px solid #c79b2d !important;
  border-radius: 0 10px 10px 0 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

#blockEmailSubscription_displayFooterBefore form p {
  margin: 9px 0 0 !important;
  color: #777066 !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

@media (max-width: 767.98px) {
  /* De navigatie vormt één stabiele bovenrij. */
  html body #header .header-nav,
  html body #header .header-nav > .container,
  html body #header .header-nav > .container > .row {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #header .header-nav {
    background:
      radial-gradient(circle at 50% -80%, rgba(201, 162, 39, .11), transparent 54%),
      linear-gradient(180deg, #10100f 0%, #080808 100%) !important;
    border-bottom: 1px solid rgba(201, 162, 39, .30) !important;
    box-shadow: none !important;
  }

  html body #header .header-nav > .container {
    padding: 0 12px !important;
  }

  html body #header .header-nav .mobile {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 48px 48px !important;
    grid-template-areas: "menu logo user cart" !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    height: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #header #menu-icon,
  html body #header #_mobile_logo,
  html body #header #_mobile_user_info,
  html body #header #_mobile_cart {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    transform: none !important;
  }

  html body #header #menu-icon {
    justify-content: flex-start !important;
  }

  html body #header #_mobile_logo {
    overflow: hidden !important;
  }

  html body #header #_mobile_logo a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 56px !important;
    margin: 0 !important;
  }

  html body #header #_mobile_logo img,
  html body #header #_mobile_logo .logo {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: 154px !important;
    height: auto !important;
    max-height: 46px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    transform: none !important;
  }

  /* Zichtbare fallback wanneer PrestaShop het logo nog niet
     naar het mobiele logovak heeft verplaatst. */
  html body #header #_mobile_logo:empty::before {
    content: "" !important;
    display: block !important;
    width: 148px !important;
    max-width: 100% !important;
    height: 46px !important;
    background: url("https://qualitymotors.nl/webshop/img/logo-1779290034.jpg") center / contain no-repeat !important;
  }

  html body #header #_mobile_user_info,
  html body #header #_mobile_cart,
  html body #header #_mobile_user_info .user-info,
  html body #header #_mobile_cart .blockcart,
  html body #header #_mobile_user_info a,
  html body #header #_mobile_cart .blockcart .header {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html body #header #_mobile_user_info a,
  html body #header #_mobile_cart .blockcart .header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    color: #d8b64f !important;
    background: rgba(201, 162, 39, .08) !important;
    border: 1px solid rgba(201, 162, 39, .36) !important;
    border-radius: 11px !important;
    white-space: nowrap !important;
  }

  html body #header #_mobile_user_info .material-icons,
  html body #header #_mobile_cart .material-icons,
  html body #header #menu-icon .material-icons {
    color: #d8b64f !important;
    font-size: 22px !important;
    font-weight: 400 !important;
  }

  html body #header #_mobile_cart .cart-products-count {
    margin-left: 1px !important;
    color: #f2e4b9 !important;
    font-size: 9px !important;
    font-weight: 500 !important;
  }

  /* Het zoekveld krijgt een eigen, gecentreerde tweede rij. */
  html body #header .header-top {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-height: 68px !important;
    height: 68px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #11110f 0%, #080808 100%) !important;
    border-bottom: 1px solid rgba(201, 162, 39, .30) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12) !important;
  }

  html body #header .header-top::before {
    display: none !important;
    content: none !important;
  }

  html body #header .header-top > .container,
  html body #header .header-top > .container > .row:not(#mobile_top_menu_wrapper),
  html body #header .header-top .header-top-right {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 480px !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    transform: none !important;
  }

  html body #header .header-top #_desktop_logo,
  html body #header .header-top #_desktop_top_menu {
    display: none !important;
  }

  html body #header .header-top #search_widget {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 480px !important;
    min-width: 0 !important;
    height: 44px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    transform: none !important;
  }

  html body #header .header-top #search_widget form {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid rgba(201, 162, 39, .72) !important;
    border-radius: 999px !important;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .14) !important;
  }

  html body #header .header-top #search_widget form .material-icons.search {
    position: absolute !important;
    z-index: 2 !important;
    top: 0 !important;
    left: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 44px !important;
    margin: 0 !important;
    color: #fff !important;
    background: linear-gradient(180deg, #d7b348 0%, #bd8e22 100%) !important;
    border-radius: 999px 0 0 999px !important;
    font-size: 21px !important;
  }

  html body #header .header-top #search_widget form input[type="text"],
  html body #header .header-top #search_widget form input[type="search"] {
    width: 100% !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 42px 0 58px !important;
    color: #28251f !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 400 !important;
  }

  html body #header .header-top #search_widget form .material-icons.clear {
    position: absolute !important;
    z-index: 2 !important;
    top: 0 !important;
    right: 0 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 44px !important;
    color: #746b59 !important;
    font-size: 19px !important;
  }

  html body #header .header-top #search_widget form input:not(:placeholder-shown) + .material-icons.clear {
    display: flex !important;
  }

  /* Vijf voordelen: het laatste voordeel wordt bewust
     gecentreerd over de hele laatste rij. */
  body#index .qm-trustbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body#index .qm-trustbar > div:last-child {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    border-right: 0 !important;
  }

  #footer > .container:first-child {
    padding: 20px 0 8px !important;
  }

  #blockEmailSubscription_displayFooterBefore {
    width: calc(100% - 28px) !important;
    margin: 0 14px 22px !important;
    padding: 21px 18px !important;
    border-radius: 14px !important;
  }

  #blockEmailSubscription_displayFooterBefore > .row {
    display: block !important;
    margin: 0 !important;
  }

  #blockEmailSubscription_displayFooterBefore #block-newsletter-label {
    margin-bottom: 18px !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  #blockEmailSubscription_displayFooterBefore form input[type="submit"] {
    min-width: 60px !important;
    height: 44px !important;
  }

  #blockEmailSubscription_displayFooterBefore form p {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 389.98px) {
  html body #header .header-nav > .container {
    padding: 0 8px !important;
  }

  html body #header .header-nav .mobile {
    grid-template-columns: 38px minmax(0, 1fr) 44px 44px !important;
    gap: 3px !important;
  }

  html body #header #_mobile_logo img,
  html body #header #_mobile_logo .logo {
    max-width: 126px !important;
    max-height: 40px !important;
  }

  html body #header #_mobile_logo:empty::before {
    width: 122px !important;
    height: 40px !important;
  }

  html body #header #_mobile_user_info,
  html body #header #_mobile_cart,
  html body #header #_mobile_user_info .user-info,
  html body #header #_mobile_cart .blockcart,
  html body #header #_mobile_user_info a,
  html body #header #_mobile_cart .blockcart .header {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
}

/* ============================================================
   QM PHASE 2Q — RONDE CATEGORIEZEGELS
   Eén herkenbare, tekstgerichte beeldtaal voor alle categorieën.
   ============================================================ */

body#category #subcategories .subcategory-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 158px !important;
  margin: 0 0 12px !important;
  padding: 8px !important;
  background: transparent !important;
}

body#category #subcategories .subcategory-image a.img {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 138px !important;
  height: 138px !important;
  max-width: 138px !important;
  margin: 0 auto !important;
  padding: 6px !important;
  overflow: hidden !important;
  background:
    linear-gradient(145deg, #fffef9 0%, #f1e7cd 100%) !important;
  border: 1px solid rgba(174, 132, 35, .48) !important;
  border-radius: 50% !important;
  box-shadow:
    0 10px 24px rgba(28, 22, 10, .12),
    inset 0 0 0 3px rgba(255, 255, 255, .88) !important;
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease !important;
}

body#category #subcategories .subcategory-image a.img::after {
  position: absolute !important;
  inset: 4px !important;
  z-index: 2 !important;
  display: block !important;
  content: "" !important;
  pointer-events: none !important;
  border: 1px solid rgba(201, 162, 39, .52) !important;
  border-radius: 50% !important;
}

body#category #subcategories .subcategory-image picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 50% !important;
}

body#category #subcategories .subcategory-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50% !important;
  transform: none !important;
}

body#category #subcategories li:hover .subcategory-image a.img,
body#category #subcategories .subcategory-image a.img:focus-visible {
  transform: translateY(-3px) !important;
  border-color: rgba(174, 132, 35, .82) !important;
  box-shadow:
    0 14px 30px rgba(28, 22, 10, .16),
    0 0 0 4px rgba(201, 162, 39, .08),
    inset 0 0 0 3px rgba(255, 255, 255, .92) !important;
}

body#category #subcategories .subcategory-name {
  display: block !important;
  margin: 0 auto !important;
  color: #181611 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: .025em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

body#category #subcategories li:hover .subcategory-name,
body#category #subcategories .subcategory-name:focus-visible {
  color: #9b7319 !important;
}

@media (max-width: 767.98px) {
  body#category #subcategories .subcategory-image {
    min-height: 132px !important;
    margin-bottom: 8px !important;
    padding: 5px !important;
  }

  body#category #subcategories .subcategory-image a.img {
    width: 116px !important;
    height: 116px !important;
    max-width: 116px !important;
    padding: 5px !important;
  }

  body#category #subcategories .subcategory-name {
    max-width: 150px !important;
    font-size: 11.5px !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 389.98px) {
  body#category #subcategories .subcategory-image {
    min-height: 118px !important;
  }

  body#category #subcategories .subcategory-image a.img {
    width: 104px !important;
    height: 104px !important;
    max-width: 104px !important;
  }
}

/* ==========================================================
   QM PHASE 2R - PRODUCTPAGINA UITLEG EN VERTROUWEN
   ========================================================== */

/* Verberg de onvertaalde standaardteksten van de
   Customer Reassurance-module op productpagina's. */
body.page-product .blockreassurance_product {
  display: none !important;
}

/* Maak de uitleg een rustige, zelfstandige kaart. */
body.page-product .product-information > .tabs {
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
  max-width: none !important;
  margin-top: 32px !important;
  background: #fff !important;
  border: 1px solid rgba(201, 162, 39, .24) !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 36px rgba(34, 27, 12, .09) !important;
  overflow: hidden !important;
}

/* Op desktop staat het blok onder de volledige productzone:
   van de linker afbeelding tot het einde van de rechter kolom. */
@media (min-width: 768px) {
  body.page-product .product-information > .tabs {
    width: calc(200% + 30px) !important;
    margin-left: calc(-100% - 30px) !important;
    padding: 0 32px 34px !important;
  }
}

body.page-product .product-information > .tabs .nav-tabs {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 0 26px !important;
  padding: 0 !important;
  border-bottom: 1px solid #eee8dc !important;
}

body.page-product .product-information > .tabs .nav-tabs .nav-item {
  margin: 0 !important;
}

body.page-product .product-information > .tabs .nav-tabs .nav-link {
  min-height: 54px !important;
  padding: 18px 20px 13px !important;
  color: #6d685f !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
}

body.page-product .product-information > .tabs .nav-tabs .nav-link.active,
body.page-product .product-information > .tabs .nav-tabs .nav-link:hover,
body.page-product .product-information > .tabs .nav-tabs .nav-link:focus {
  color: #9a7118 !important;
  border-bottom-color: #c9a227 !important;
}

/* Centreer de leeskolom, maar houd de tekst zelf links uitgelijnd. */
body.page-product .product-information > .tabs .tab-content {
  width: 100% !important;
  max-width: 960px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.page-product .product-information > .tabs .tab-pane,
body.page-product .product-information > .tabs .product-description {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #47433c !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  text-align: left !important;
}

body.page-product .product-information > .tabs .product-description h2,
body.page-product .product-information > .tabs .product-description h3,
body.page-product .product-information > .tabs .product-description h4 {
  margin: 26px 0 10px !important;
  color: #181611 !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

body.page-product .product-information > .tabs .product-description h3:first-child {
  margin-top: 0 !important;
}

body.page-product .product-information > .tabs .product-description ul,
body.page-product .product-information > .tabs .product-description ol {
  margin: 0 0 18px !important;
  padding-left: 22px !important;
}

body.page-product .product-information > .tabs .product-description li {
  margin: 3px 0 !important;
}

@media (max-width: 767.98px) {
  body.page-product .product-information > .tabs {
    width: 100% !important;
    margin: 24px 0 0 !important;
    padding: 0 18px 24px !important;
    border-radius: 13px !important;
  }

  body.page-product .product-information > .tabs .nav-tabs {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  body.page-product .product-information > .tabs .nav-tabs .nav-link {
    min-height: 50px !important;
    padding: 16px 14px 11px !important;
    font-size: 13px !important;
  }

  body.page-product .product-information > .tabs .product-description {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
}
/*
 * QUALITY MOTORS — Luxe productconfigurator
 * Versie: 1.0
 *
 * Plaats dit blok ONDERAAN:
 * /themes/classic/assets/css/custom.css
 */

/* =========================================================
   1. VIDEOKNOP — GOUD MET DONKERE TEKST
   ========================================================= */

body.page-product .product-information .product-description a[href*="youtube.com"],
body.page-product .product-information .product-description a[href*="youtu.be"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 0 20px !important;
  border: 1px solid rgba(143, 102, 13, 0.35) !important;
  border-radius: 10px !important;
  color: #17130b !important;
  background: linear-gradient(135deg, #e1c362 0%, #c99b25 100%) !important;
  box-shadow:
    0 8px 18px rgba(156, 113, 17, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  letter-spacing: 0.025em !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease !important;
}

body.page-product .product-information .product-description a[href*="youtube.com"]:hover,
body.page-product .product-information .product-description a[href*="youtu.be"]:hover {
  color: #0e0c08 !important;
  filter: brightness(1.035) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 11px 24px rgba(156, 113, 17, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* =========================================================
   2. BREDE CONFIGURATIEKAART
   Op desktop wordt het rechter product-actiegedeelte onder
   beide productkolommen over de volledige breedte getrokken.
   ========================================================= */

body.page-product .product-information > .product-actions {
  position: relative !important;
  z-index: 3 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  padding: 28px 30px 26px !important;
  border: 1px solid rgba(188, 145, 38, 0.34) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(211, 171, 64, 0.12), transparent 33%),
    linear-gradient(145deg, #ffffff 0%, #fffdf8 70%, #f8f1e2 100%) !important;
  box-shadow:
    0 18px 44px rgba(32, 24, 8, 0.1),
    0 2px 8px rgba(32, 24, 8, 0.035) !important;
}

body.page-product .product-information > .product-actions::before {
  content: "Stel uw uitvoering samen" !important;
  display: block !important;
  margin: 0 0 22px !important;
  padding: 0 0 15px !important;
  border-bottom: 1px solid rgba(188, 145, 38, 0.24) !important;
  color: #17130b !important;
  font-size: clamp(20px, 1.7vw, 27px) !important;
  font-weight: 550 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

@media (min-width: 992px) {
  body.page-product .product-information > .product-actions {
    width: calc(200% + 30px) !important;
    max-width: none !important;
    margin-top: clamp(176px, calc(26vw - 28px), 304px) !important;
    margin-left: calc(-100% - 30px) !important;
  }
}

/* =========================================================
   3. KEUZES IN TWEE RUSTIGE KOLOMMEN
   ========================================================= */

body.page-product .product-actions .product-variants {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px 22px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-product .product-actions .product-variants > .product-variants-item {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Kleurkeuze blijft als rustige bovenste regel over de volle breedte. */
body.page-product .product-actions .product-variants-item:has(input.input-color) {
  grid-column: 1 / -1 !important;
}

/* Bij een oneven aantal dropdowns krijgt de laatste lange keuze extra ruimte. */
body.page-product .product-actions .product-variants-item:last-child:nth-child(even) {
  grid-column: 1 / -1 !important;
}

body.page-product .product-actions .product-variants-item > .control-label,
body.page-product .product-actions .product-variants-item > label {
  display: block !important;
  margin: 0 0 8px !important;
  color: #30291d !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.025em !important;
}

/* =========================================================
   4. LUXE DROPDOWNS
   ========================================================= */

body.page-product .product-actions .product-variants-item {
  position: relative !important;
}

body.page-product .product-actions .product-variants-item:has(select)::after {
  content: "" !important;
  position: absolute !important;
  right: 17px !important;
  bottom: 18px !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 1.5px solid #8d6b1f !important;
  border-bottom: 1.5px solid #8d6b1f !important;
  pointer-events: none !important;
  transform: rotate(45deg) !important;
}

body.page-product .product-actions .product-variants select.form-control,
body.page-product .product-actions .product-variants select {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 54px !important;
  margin: 0 !important;
  padding: 0 46px 0 16px !important;
  border: 1px solid #ddd5c3 !important;
  border-radius: 11px !important;
  outline: none !important;
  color: #241f17 !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbf8f1 100%) !important;
  box-shadow:
    0 4px 12px rgba(35, 27, 10, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 54px !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease !important;
}

body.page-product .product-actions .product-variants select.form-control:hover,
body.page-product .product-actions .product-variants select:hover {
  border-color: rgba(188, 145, 38, 0.72) !important;
}

body.page-product .product-actions .product-variants select.form-control:focus,
body.page-product .product-actions .product-variants select:focus {
  border-color: #b88c25 !important;
  background: #ffffff !important;
  box-shadow:
    0 0 0 3px rgba(201, 155, 37, 0.15),
    0 7px 18px rgba(35, 27, 10, 0.07) !important;
}

body.page-product .product-actions .product-variants select option {
  color: #211c14 !important;
  background: #ffffff !important;
}

/* =========================================================
   5. KLEURSTALEN
   ========================================================= */

body.page-product .product-actions .product-variants .color {
  width: 32px !important;
  height: 32px !important;
  margin: 0 8px 0 0 !important;
  border: 3px solid #ffffff !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 0 1px #d8cfbd,
    0 3px 9px rgba(26, 21, 11, 0.12) !important;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease !important;
}

body.page-product .product-actions .product-variants input.input-color:checked + span,
body.page-product .product-actions .product-variants input.input-color:checked + .color {
  transform: scale(1.06) !important;
  box-shadow:
    0 0 0 2px #c99b25,
    0 5px 12px rgba(26, 21, 11, 0.16) !important;
}

/* =========================================================
   6. BESTELREGEL ONDER DE KEUZES
   ========================================================= */

body.page-product .product-actions .product-add-to-cart {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 12px 22px !important;
  width: 100% !important;
  margin: 24px 0 0 !important;
  padding: 22px 0 0 !important;
  border-top: 1px solid rgba(188, 145, 38, 0.24) !important;
}

body.page-product .product-actions .product-add-to-cart > .control-label {
  grid-column: 1 / -1 !important;
  margin: 0 0 -5px !important;
  color: #30291d !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0.025em !important;
}

body.page-product .product-actions .product-quantity {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: 88px minmax(210px, 1fr) 54px !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
}

body.page-product .product-actions .product-quantity .qty {
  width: 88px !important;
  min-width: 0 !important;
}

body.page-product .product-actions .product-quantity #quantity_wanted,
body.page-product .product-actions .product-quantity input {
  height: 54px !important;
  border: 1px solid #ddd5c3 !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  color: #211c14 !important;
  background: #ffffff !important;
}

body.page-product .product-actions .product-quantity .add {
  min-width: 0 !important;
  width: 100% !important;
}

body.page-product .product-actions .add-to-cart {
  width: 100% !important;
  height: 54px !important;
  border: 1px solid #a67d19 !important;
  border-radius: 11px !important;
  color: #17130b !important;
  background: linear-gradient(135deg, #dfbf57 0%, #c69721 100%) !important;
  box-shadow:
    0 9px 20px rgba(156, 113, 17, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.025em !important;
}

body.page-product .product-actions .add-to-cart:hover {
  color: #0d0b07 !important;
  filter: brightness(1.035) !important;
}

body.page-product .product-actions .wishlist-button-product {
  width: 54px !important;
  min-width: 54px !important;
  height: 54px !important;
  margin: 0 !important;
  border: 1px solid #b88c25 !important;
  border-radius: 11px !important;
  color: #ffffff !important;
  background: #18150f !important;
  box-shadow: 0 7px 18px rgba(25, 20, 10, 0.13) !important;
}

body.page-product .product-actions #product-availability {
  grid-column: 1 / -1 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 4px 0 0 !important;
  padding: 13px 16px !important;
  border: 1px solid rgba(69, 138, 64, 0.22) !important;
  border-radius: 10px !important;
  background: #eff8ed !important;
}

/* =========================================================
   7. TABLET EN MOBIEL
   Op kleinere schermen blijft de kaart binnen beeld en worden
   de keuzes overzichtelijk onder elkaar gezet.
   ========================================================= */

@media (max-width: 991.98px) {
  body.page-product .product-information > .product-actions {
    width: 100% !important;
    max-width: none !important;
    margin: 24px 0 0 !important;
    padding: 22px 20px !important;
  }

  body.page-product .product-actions .product-variants {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body.page-product .product-actions .product-variants-item,
  body.page-product .product-actions .product-variants-item:last-child:nth-child(even) {
    grid-column: 1 !important;
  }
}

@media (max-width: 575.98px) {
  body.page-product .product-information > .product-actions {
    padding: 20px 16px !important;
    border-radius: 14px !important;
  }

  body.page-product .product-information > .product-actions::before {
    margin-bottom: 18px !important;
    font-size: 20px !important;
  }

  body.page-product .product-actions .product-quantity {
    grid-template-columns: 70px minmax(0, 1fr) 50px !important;
    gap: 8px !important;
  }

  body.page-product .product-actions .product-quantity .qty {
    width: 70px !important;
  }

  body.page-product .product-actions .wishlist-button-product {
    width: 50px !important;
    min-width: 50px !important;
  }
}
/*
 * QUALITY MOTORS — Bovenste productpresentatie als kaart
 *
 * Plaats dit blok ONDER de eerder toegevoegde
 * productconfigurator-code in custom.css.
 */

@media (min-width: 992px) {
  /*
   * De achtergrond wordt gekoppeld aan de linker productkolom.
   * Daardoor omvat hij foto én samenvatting, maar stopt hij vóór
   * de afzonderlijke configuratiekaart.
   */
  body.page-product #main > .row > .col-md-6:first-child {
    position: relative !important;
    z-index: 1 !important;
  }

  body.page-product #main > .row > .col-md-6:first-child::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    top: -18px !important;
    left: 15px !important;
    width: calc(200% - 30px) !important;
    height: calc(100% + 36px) !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(188, 145, 38, 0.26) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(
        circle at 96% 5%,
        rgba(211, 171, 64, 0.08),
        transparent 30%
      ),
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.99) 0%,
        rgba(255, 254, 250, 0.99) 72%,
        rgba(248, 242, 229, 0.98) 100%
      ) !important;
    box-shadow:
      0 18px 46px rgba(32, 24, 8, 0.085),
      0 2px 8px rgba(32, 24, 8, 0.03) !important;
    pointer-events: none !important;
  }

  body.page-product #main > .row > .col-md-6:first-child > *,
  body.page-product #main > .row > .col-md-6:nth-child(2) > * {
    position: relative !important;
    z-index: 1 !important;
  }

  /*
   * Iets meer ademruimte tussen de bovenste kaart en
   * de configuratiekaart.
   */
  body.page-product .product-information > .product-actions {
    margin-top: clamp(194px, calc(26vw - 10px), 322px) !important;
  }
}

/* Afbeeldingsvlak rustiger en consistenter binnen de kaart. */
body.page-product .images-container .product-cover {
  overflow: hidden !important;
  border-radius: 13px !important;
  background: #ffffff !important;
}

body.page-product .images-container .product-images > li.thumb-container .thumb {
  border-radius: 9px !important;
  background: #ffffff !important;
  box-shadow: 0 3px 10px rgba(31, 24, 10, 0.055) !important;
}

body.page-product .images-container .product-images > li.thumb-container .thumb.selected,
body.page-product .images-container .product-images > li.thumb-container .thumb:hover {
  border-color: #c99b25 !important;
  box-shadow:
    0 0 0 2px rgba(201, 155, 37, 0.14),
    0 5px 13px rgba(31, 24, 10, 0.08) !important;
}

/* Mobiel: nette kaart uitsluitend rond de fotogalerij. */
@media (max-width: 991.98px) {
  body.page-product #main > .row > .col-md-6:first-child {
    box-sizing: border-box !important;
    margin-bottom: 18px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    border: 1px solid rgba(188, 145, 38, 0.22) !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 12px 30px rgba(32, 24, 8, 0.075) !important;
  }
}


/* QM RENTAL PRODUCT PAGES - OSCAR BOOKING ONLY - 2026-07-29 */
body.page-product.product-id-category-3 .product-information > .product-actions,
body.page-product.product-id-category-4 .product-information > .product-actions,
body.page-product.product-id-category-5 .product-information > .product-actions,
body.page-product.product-id-category-10 .product-information > .product-actions,
body.page-product.product-id-category-11 .product-information > .product-actions {
  display: none !important;
}


/* QM RENTAL DESKTOP IMAGE-CAROUSEL SPACING - 2026-07-29 */
@media (min-width: 992px) {
  body.page-product.product-id-category-3 .product-information > .product-actions,
  body.page-product.product-id-category-4 .product-information > .product-actions,
  body.page-product.product-id-category-5 .product-information > .product-actions,
  body.page-product.product-id-category-10 .product-information > .product-actions,
  body.page-product.product-id-category-11 .product-information > .product-actions {
    display: block !important;
    height: 390px !important;
    min-height: 390px !important;
    max-height: 390px !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }
}
/* =========================================================
   QUALITYMOTORS - MOBIEL MENU
   Alleen actief op mobiel
   ========================================================= */

@media (max-width: 767px) {

  /* Volledige menucontainer */
  #mobile_top_menu_wrapper,
  .mobile-menu,
  .mobile-menu-wrapper,
  .js-top-menu-bottom {
    background:
      linear-gradient(180deg, #11110f 0%, #080808 100%) !important;
    border: 1px solid rgba(198, 158, 55, 0.45) !important;
    border-top: 2px solid #c69e37 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
    padding: 10px 14px 18px !important;
    margin: 0 14px !important;
    width: auto !important;
    max-height: calc(100vh - 175px);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* Menu altijd in één duidelijke kolom */
  #mobile_top_menu_wrapper .top-menu,
  #mobile_top_menu_wrapper ul,
  .mobile-menu .top-menu,
  .mobile-menu ul {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Iedere hoofdcategorie onder elkaar */
  #mobile_top_menu_wrapper .top-menu > li,
  .mobile-menu .top-menu > li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(198, 158, 55, 0.18) !important;
  }

  /* Hoofdcategorie links */
  #mobile_top_menu_wrapper .top-menu > li > a,
  .mobile-menu .top-menu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 54px !important;
    width: 100% !important;
    padding: 14px 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;

    color: #d1aa49 !important;
    background: transparent !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    text-align: left !important;
    text-decoration: none !important;
  }

  /* Hover / actieve categorie */
  #mobile_top_menu_wrapper .top-menu > li > a:hover,
  #mobile_top_menu_wrapper .top-menu > li.current > a,
  #mobile_top_menu_wrapper .top-menu > li.open > a,
  .mobile-menu .top-menu > li > a:hover {
    color: #f4d579 !important;
    background: rgba(198, 158, 55, 0.10) !important;
    border-radius: 7px !important;
  }

  /* Pijltjes groter en beter klikbaar */
  #mobile_top_menu_wrapper .navbar-toggler,
  #mobile_top_menu_wrapper .collapse-icons,
  #mobile_top_menu_wrapper .sub-menu-arrow,
  .mobile-menu .navbar-toggler,
  .mobile-menu .collapse-icons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #d1aa49 !important;
    background: transparent !important;
    cursor: pointer !important;
  }

  #mobile_top_menu_wrapper .material-icons,
  #mobile_top_menu_wrapper i,
  .mobile-menu .material-icons,
  .mobile-menu i {
    color: #d1aa49 !important;
  }

  /* Submenu-blok */
  #mobile_top_menu_wrapper .sub-menu,
  #mobile_top_menu_wrapper .popover,
  #mobile_top_menu_wrapper .category-sub-menu,
  .mobile-menu .sub-menu,
  .mobile-menu .category-sub-menu {
    position: static !important;
    display: none;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 8px !important;
    padding: 6px 8px 10px !important;
    transform: none !important;
    box-shadow: none !important;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border-radius: 8px !important;
  }

  /* Geopend submenu zichtbaar houden */
  #mobile_top_menu_wrapper .collapse.show,
  #mobile_top_menu_wrapper .sub-menu.collapse.in,
  #mobile_top_menu_wrapper .sub-menu.show,
  #mobile_top_menu_wrapper li.open > .sub-menu,
  .mobile-menu .collapse.show,
  .mobile-menu li.open > .sub-menu {
    display: block !important;
  }

  /* Subcategorieën */
  #mobile_top_menu_wrapper .sub-menu li,
  #mobile_top_menu_wrapper .category-sub-menu li,
  .mobile-menu .sub-menu li,
  .mobile-menu .category-sub-menu li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  #mobile_top_menu_wrapper .sub-menu li:last-child,
  #mobile_top_menu_wrapper .category-sub-menu li:last-child {
    border-bottom: 0 !important;
  }

  /* Subcategorie-links links uitlijnen */
  #mobile_top_menu_wrapper .sub-menu a,
  #mobile_top_menu_wrapper .category-sub-menu a,
  .mobile-menu .sub-menu a,
  .mobile-menu .category-sub-menu a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 47px !important;
    padding: 11px 12px 11px 18px !important;
    box-sizing: border-box !important;

    color: #f1f1f1 !important;
    background: transparent !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    text-align: left !important;
    text-transform: none !important;
    text-decoration: none !important;
  }

  #mobile_top_menu_wrapper .sub-menu a:hover,
  #mobile_top_menu_wrapper .category-sub-menu a:hover {
    color: #e1bd62 !important;
    background: rgba(198, 158, 55, 0.08) !important;
    border-radius: 6px !important;
  }

  /* Dieper submenu iets laten inspringen */
  #mobile_top_menu_wrapper .sub-menu .sub-menu a,
  #mobile_top_menu_wrapper .category-sub-menu .category-sub-menu a {
    padding-left: 30px !important;
    font-size: 15px !important;
    color: #d8d8d8 !important;
  }

  /* Valuta, taal en telefoon onderaan */
  #mobile_top_menu_wrapper .js-top-menu-bottom,
  #mobile_top_menu_wrapper .mobile-menu-bottom,
  #mobile_top_menu_wrapper .user-info-mobile {
    display: block !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(198, 158, 55, 0.28) !important;
    background: transparent !important;
  }

  #mobile_top_menu_wrapper .currency-selector,
  #mobile_top_menu_wrapper .language-selector,
  #mobile_top_menu_wrapper .contact-rich,
  #mobile_top_menu_wrapper .contact-link {
    width: 100% !important;
    margin: 0 !important;
    padding: 11px 8px !important;
    color: #e8e8e8 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    font-size: 15px !important;
  }

  #mobile_top_menu_wrapper .currency-selector a,
  #mobile_top_menu_wrapper .language-selector a,
  #mobile_top_menu_wrapper .contact-rich a,
  #mobile_top_menu_wrapper .contact-link a {
    color: #e8e8e8 !important;
    text-decoration: none !important;
  }

  #mobile_top_menu_wrapper .contact-rich strong,
  #mobile_top_menu_wrapper .contact-link strong {
    color: #d1aa49 !important;
  }

  /* Voorkomt rare halfbrede kolommen uit desktop-CSS */
  #mobile_top_menu_wrapper .col-md-3,
  #mobile_top_menu_wrapper .col-md-4,
  #mobile_top_menu_wrapper .col-md-6,
  #mobile_top_menu_wrapper [class*="col-"],
  .mobile-menu [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Scrollbar subtiel houden */
  #mobile_top_menu_wrapper::-webkit-scrollbar {
    width: 5px;
  }

  #mobile_top_menu_wrapper::-webkit-scrollbar-thumb {
    background: rgba(198, 158, 55, 0.55);
    border-radius: 10px;
  }
}
@media (max-width: 767px) {

  /* Zoekbalk compacter */
  #search_widget,
  .search-widget,
  .header-top .search-widget {
    margin: 12px 14px 0 !important;
    width: calc(100% - 28px) !important;
  }

  #search_widget form,
  .search-widget form {
    height: 50px !important;
    border: 1px solid #c69e37 !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.18) !important;
  }

  #search_widget input,
  .search-widget input {
    height: 50px !important;
    padding: 0 18px 0 60px !important;
    border: 0 !important;
    font-size: 15px !important;
    background: #fff !important;
  }

  #search_widget button,
  .search-widget button {
    width: 54px !important;
    height: 50px !important;
    background: linear-gradient(135deg, #d8b24e, #b48722) !important;
    color: #fff !important;
    border: 0 !important;
  }
}
/* ==========================================================
   QUALITYMOTORS MOBIEL MENU - SCHONE DEFINITIEVE RESET
   ========================================================== */

@media only screen and (max-width: 767px) {

  /* Complete mobiele menucontainer */
  #mobile_top_menu_wrapper {
    position: relative !important;
    width: calc(100% - 32px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 180px) !important;

    margin: 0 16px !important;
    padding: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    background: #fff !important;
    border: 1px solid rgba(194, 151, 47, 0.35) !important;
    border-top: 3px solid #c99e36 !important;
    border-radius: 0 0 10px 10px !important;

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
    box-sizing: border-box !important;
  }

  #mobile_top_menu_wrapper,
  #mobile_top_menu_wrapper *,
  #mobile_top_menu_wrapper *::before,
  #mobile_top_menu_wrapper *::after {
    box-sizing: border-box !important;
  }

  /* Alle lijsten resetten */
  #mobile_top_menu_wrapper ul,
  #mobile_top_menu_wrapper .top-menu,
  #mobile_top_menu_wrapper .category-sub-menu {
    position: static !important;
    display: block;
    float: none !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
    transform: none !important;
  }

  /* Hoofdcategorie */
  #mobile_top_menu_wrapper .top-menu > li {
    position: relative !important;
    display: block !important;
    float: none !important;
    clear: both !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #fff !important;
    border-bottom: 1px solid rgba(194, 151, 47, 0.18) !important;
  }

  /* Hoofdcategorie tekst */
  #mobile_top_menu_wrapper .top-menu > li > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 56px !important;

    margin: 0 !important;
    padding: 14px 58px 14px 20px !important;

    color: #ad8124 !important;
    background: #fff !important;

    font-size: 17px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;

    text-align: left !important;
    text-transform: uppercase !important;
    text-decoration: none !important;

    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Pijltjes rechts */
  #mobile_top_menu_wrapper li > .navbar-toggler {
    position: absolute !important;
    top: 5px !important;
    right: 7px !important;
    left: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 46px !important;
    height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #bd912e !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 5 !important;
  }

  #mobile_top_menu_wrapper .navbar-toggler i,
  #mobile_top_menu_wrapper .navbar-toggler .material-icons {
    color: #bd912e !important;
    font-size: 23px !important;
    line-height: 1 !important;
  }

  /* Submenu standaard dicht */
  #mobile_top_menu_wrapper .sub-menu.collapse:not(.in):not(.show) {
    display: none !important;
  }

  /* Geopend submenu */
  #mobile_top_menu_wrapper .sub-menu.collapse.in,
  #mobile_top_menu_wrapper .sub-menu.collapse.show,
  #mobile_top_menu_wrapper .sub-menu.collapsing {
    position: static !important;
    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 6px 12px 10px !important;

    overflow: visible !important;
    transform: none !important;

    background: #f7f4ec !important;
    border: 0 !important;
    border-top: 1px solid rgba(194, 151, 47, 0.18) !important;
    box-shadow: none !important;
  }

  /* Bootstrap/popover desktopgedrag uitschakelen */
  #mobile_top_menu_wrapper .sub-menu,
  #mobile_top_menu_wrapper .popover {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;

    float: none !important;

    width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;

    transform: none !important;
    box-shadow: none !important;
  }

  /* Subcategorie-items */
  #mobile_top_menu_wrapper .sub-menu li,
  #mobile_top_menu_wrapper .category-sub-menu li,
  #mobile_top_menu_wrapper ul[data-depth="1"] > li,
  #mobile_top_menu_wrapper ul[data-depth="2"] > li {
    position: relative !important;
    display: block !important;
    float: none !important;
    clear: both !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  }

  /* Subcategorietekst goed zichtbaar */
  #mobile_top_menu_wrapper .sub-menu li > a,
  #mobile_top_menu_wrapper .category-sub-menu li > a,
  #mobile_top_menu_wrapper ul[data-depth="1"] > li > a,
  #mobile_top_menu_wrapper ul[data-depth="2"] > li > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 12px 52px 12px 14px !important;

    color: #202020 !important;
    background: transparent !important;

    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;

    text-align: left !important;
    text-transform: none !important;
    text-decoration: none !important;

    opacity: 1 !important;
    visibility: visible !important;
    white-space: normal !important;
  }

  /* Nog diepere categorieën */
  #mobile_top_menu_wrapper ul[data-depth="2"] > li > a,
  #mobile_top_menu_wrapper ul[data-depth="3"] > li > a {
    padding-left: 28px !important;
    color: #333 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
  }

  /* Geen lege desktopkolommen in submenu */
  #mobile_top_menu_wrapper .row {
    display: block !important;
    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #mobile_top_menu_wrapper [class*="col-"] {
    display: block !important;
    float: none !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: none !important;
  }

  /* Verwijder verborgen lege megamenu-elementen */
  #mobile_top_menu_wrapper .menu-banner,
  #mobile_top_menu_wrapper .menu-image,
  #mobile_top_menu_wrapper .category-image,
  #mobile_top_menu_wrapper .html-block {
    display: none !important;
  }

  /* Onderste blok: valuta, taal en telefoon */
  #mobile_top_menu_wrapper .js-top-menu-bottom {
    display: block !important;
    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 16px 18px !important;

    color: #222 !important;
    background: #faf9f6 !important;
    border-top: 1px solid rgba(194, 151, 47, 0.28) !important;
  }

  #mobile_top_menu_wrapper .js-top-menu-bottom > div {
    position: relative !important;
    display: block !important;
    float: none !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 12px 0 !important;

    color: #222 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  #mobile_top_menu_wrapper .js-top-menu-bottom a,
  #mobile_top_menu_wrapper .js-top-menu-bottom span,
  #mobile_top_menu_wrapper .js-top-menu-bottom strong {
    color: #222 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Dropdowns niet permanent open laten staan */
  #mobile_top_menu_wrapper .dropdown-menu {
    position: static !important;
    float: none !important;

    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;

    margin: 6px 0 0 !important;
    padding: 0 !important;

    box-shadow: none !important;
  }

  #mobile_top_menu_wrapper .dropdown-menu:not(.show) {
    display: none !important;
  }

  #mobile_top_menu_wrapper .dropdown-menu.show {
    display: block !important;
  }
}
/* Alleen desktopmenu tonen vanaf tablet/desktop */
@media only screen and (min-width: 768px) {

  #mobile_top_menu_wrapper {
    display: none !important;
  }
}
/* QM FIX: force any link inside product descriptions/tabs to use house colors instead of default blue */
.product-description a,
#description a,
.product-information .description a,
.product-details a,
.tab-pane a,
.rte a {
  color: #1a1a1a !important;
  text-decoration: none !important;
}

.product-description a:hover,
#description a:hover,
.product-information .description a:hover,
.product-details a:hover,
.tab-pane a:hover,
.rte a:hover {
  color: #b8860b !important;
  text-decoration: none !important;
}
/* =========================================================
   QUALITY MOTORS – LUXURY PRODUCT TABS
   Productomschrijving / FAQ / Accessoires
========================================================= */

body#product .tabs {
  --qm-tab-gold: #cda528;
  --qm-tab-gold-light: #ecd375;
  --qm-tab-black: #15130f;
  --qm-tab-dark: #252117;
  --qm-tab-cream: #fffdf8;
  --qm-tab-border: rgba(205, 165, 40, 0.42);

  background:
    radial-gradient(
      circle at top right,
      rgba(205, 165, 40, 0.10),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(255, 251, 241, 0.96)
    ) !important;

  border: 1px solid var(--qm-tab-border) !important;
  border-radius: 16px !important;
  box-shadow:
    0 15px 40px rgba(31, 25, 10, 0.08),
    0 3px 10px rgba(31, 25, 10, 0.05) !important;

  padding: 0 !important;
  overflow: hidden;
}


/* =========================================================
   BOVENSTE TABBLADEN
========================================================= */

body#product .tabs > .nav-tabs {
  display: flex;
  align-items: stretch;
  gap: 8px;

  margin: 0 !important;
  padding: 9px !important;

  background:
    linear-gradient(
      135deg,
      #12110e 0%,
      #252116 55%,
      #18150f 100%
    ) !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(205, 165, 40, 0.62) !important;
}

body#product .tabs > .nav-tabs .nav-item {
  flex: 1 1 0;
  margin: 0 !important;
}

body#product .tabs > .nav-tabs .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 46px;
  padding: 12px 18px !important;

  color: rgba(255, 255, 255, 0.76) !important;
  background: rgba(255, 255, 255, 0.035) !important;

  border: 1px solid transparent !important;
  border-radius: 10px !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-align: center;

  transition:
    color 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

body#product .tabs > .nav-tabs .nav-link:hover {
  color: #ffffff !important;
  background: rgba(205, 165, 40, 0.13) !important;
  border-color: rgba(205, 165, 40, 0.30) !important;
}


/* Actief tabblad */

body#product .tabs > .nav-tabs .nav-link.active,
body#product .tabs > .nav-tabs .nav-link.js-product-nav-active {
  color: #17130b !important;

  background:
    linear-gradient(
      135deg,
      var(--qm-tab-gold-light) 0%,
      var(--qm-tab-gold) 55%,
      #b88b18 100%
    ) !important;

  border-color: rgba(255, 226, 126, 0.82) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    0 5px 14px rgba(0, 0, 0, 0.26) !important;

  transform: translateY(-1px);
}


/* Subtiel lichtpunt op actief tabblad */

body#product .tabs > .nav-tabs .nav-link.active::after,
body#product .tabs > .nav-tabs .nav-link.js-product-nav-active::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 4px;
  height: 1px;

  background: rgba(255, 247, 204, 0.76);
}


/* =========================================================
   INHOUD TABBLAD
========================================================= */

body#product .tabs .tab-content {
  padding: 28px 30px 30px !important;
  background: transparent !important;
  border: 0 !important;
}

body#product .tabs .tab-pane {
  color: #3e3a31;
  font-size: 15px;
  line-height: 1.72;
}

body#product .tabs .tab-pane p:last-child {
  margin-bottom: 0;
}

body#product .tabs .tab-pane h2 {
  position: relative;

  margin: 0 0 18px !important;
  padding-bottom: 12px;

  color: #17140e;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
}

body#product .tabs .tab-pane h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 58px;
  height: 3px;

  background:
    linear-gradient(
      90deg,
      var(--qm-tab-gold),
      var(--qm-tab-gold-light)
    );

  border-radius: 20px;
}

body#product .tabs .tab-pane h3 {
  margin: 25px 0 11px !important;

  color: #242016;
  font-size: 17px !important;
  font-weight: 800 !important;
}

body#product .tabs .product-description ul {
  margin: 15px 0 22px;
  padding-left: 0;
  list-style: none;
}

body#product .tabs .product-description li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 24px;
}

body#product .tabs .product-description li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 2px;

  width: 7px;
  height: 7px;

  background: var(--qm-tab-gold);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(205, 165, 40, 0.14);

  transform: translateY(-50%);
}


/* =========================================================
   FAQ ACCORDION
========================================================= */

body#product .qmpt-accordion {
  display: grid;
  gap: 11px;
}

body#product .qmpt-accordion-item {
  overflow: hidden;

  background: rgba(255, 255, 255, 0.90) !important;

  border: 1px solid rgba(205, 165, 40, 0.30) !important;
  border-radius: 11px !important;

  box-shadow:
    0 4px 12px rgba(31, 25, 10, 0.045);

  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

body#product .qmpt-accordion-item:hover {
  border-color: rgba(205, 165, 40, 0.62) !important;
  box-shadow:
    0 8px 18px rgba(31, 25, 10, 0.075);

  transform: translateY(-1px);
}


/* FAQ vraag */

body#product .qmpt-accordion-header {
  position: relative;

  width: 100%;
  min-height: 54px;
  padding: 15px 56px 15px 18px !important;

  color: #332e23 !important;
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #fffaf0 100%
    ) !important;

  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;

  font-family: inherit;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.35;
  text-align: left;

  cursor: pointer;

  transition:
    color 0.22s ease,
    background 0.22s ease;
}

body#product .qmpt-accordion-title {
  display: block;
}


/* Geopende FAQ-vraag */

body#product .qmpt-accordion-item.qmpt-open {
  border-color: rgba(205, 165, 40, 0.72) !important;

  box-shadow:
    0 10px 25px rgba(33, 27, 12, 0.10);
}

body#product .qmpt-accordion-item.qmpt-open
.qmpt-accordion-header {
  color: #f2d16c !important;

  background:
    linear-gradient(
      135deg,
      #15130f 0%,
      #2b2517 60%,
      #17140e 100%
    ) !important;
}


/* Rond icoon rechts */

body#product .qmpt-accordion-icon {
  position: absolute;
  top: 50%;
  right: 16px;

  width: 28px;
  height: 28px;

  background: rgba(205, 165, 40, 0.12);
  border: 1px solid rgba(205, 165, 40, 0.36);
  border-radius: 50%;

  transform: translateY(-50%);
}

body#product .qmpt-accordion-icon::before,
body#product .qmpt-accordion-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  width: 10px;
  height: 2px;

  background: #9a7414;
  border-radius: 3px;

  transform: translate(-50%, -50%);
  transition: transform 0.22s ease;
}

body#product .qmpt-accordion-icon::after {
  transform:
    translate(-50%, -50%)
    rotate(90deg);
}

body#product .qmpt-accordion-item.qmpt-open
.qmpt-accordion-icon {
  background: rgba(205, 165, 40, 0.18);
  border-color: rgba(237, 211, 117, 0.58);
}

body#product .qmpt-accordion-item.qmpt-open
.qmpt-accordion-icon::before,
body#product .qmpt-accordion-item.qmpt-open
.qmpt-accordion-icon::after {
  background: #f1d36e;
}

body#product .qmpt-accordion-item.qmpt-open
.qmpt-accordion-icon::after {
  transform:
    translate(-50%, -50%)
    rotate(0deg);
}


/* FAQ antwoord */

body#product .qmpt-accordion-body {
  position: relative;

  padding: 17px 20px 19px 22px !important;

  color: #514b40 !important;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.98),
      rgba(255, 250, 238, 0.92)
    ) !important;

  border-top: 1px solid rgba(205, 165, 40, 0.22) !important;

  font-size: 14px !important;
  line-height: 1.65;
}

body#product .qmpt-accordion-body::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 10px;

  width: 2px;

  background:
    linear-gradient(
      180deg,
      var(--qm-tab-gold-light),
      var(--qm-tab-gold)
    );

  border-radius: 10px;
}


/* =========================================================
   ACCESSOIRES BINNEN HET TABBLAD
========================================================= */

body#product .qmpt-accessory-grid {
  gap: 16px !important;
}

body#product .qmpt-accessory {
  padding: 14px !important;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fffaf0
    ) !important;

  border: 1px solid rgba(205, 165, 40, 0.30) !important;
  border-radius: 13px !important;

  box-shadow:
    0 7px 18px rgba(31, 25, 10, 0.06);

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

body#product .qmpt-accessory:hover {
  border-color: rgba(205, 165, 40, 0.66) !important;

  box-shadow:
    0 12px 26px rgba(31, 25, 10, 0.10);

  transform: translateY(-3px);
}

body#product .qmpt-accessory-image {
  overflow: hidden;
  background: #f6f3eb;
  border-radius: 9px;
}

body#product .qmpt-accessory-image img {
  transition: transform 0.35s ease;
}

body#product .qmpt-accessory:hover
.qmpt-accessory-image img {
  transform: scale(1.035);
}

body#product .qmpt-accessory-name {
  color: #252117 !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}

body#product .qmpt-accessory-price {
  color: #a57c15 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

body#product .qmpt-accessory-button {
  color: #17130b !important;

  background:
    linear-gradient(
      135deg,
      var(--qm-tab-gold-light),
      var(--qm-tab-gold)
    ) !important;

  border: 1px solid #b98c1b !important;
  border-radius: 8px !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38);

  font-weight: 750 !important;
}

body#product .qmpt-accessory-button:hover {
  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      #29251b,
      #12110e
    ) !important;

  border-color: var(--qm-tab-gold) !important;
}


/* =========================================================
   MOBIELE WEERGAVE
========================================================= */

@media (max-width: 767px) {

  /*
   * Voorkomt dat eventuele desktopregels met negatieve
   * marges of dubbele breedte op mobiel blijven gelden.
   */
  body#product .product-container .tabs {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 13px !important;
  }

  body#product .tabs > .nav-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;

    padding: 7px !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;

    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body#product .tabs > .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  body#product .tabs > .nav-tabs .nav-item {
    flex: 0 0 auto;
  }

  body#product .tabs > .nav-tabs .nav-link {
    width: auto;
    min-width: 142px;
    min-height: 43px;

    padding: 10px 14px !important;

    font-size: 12px !important;
    white-space: nowrap;
  }

  body#product .tabs .tab-content {
    padding: 20px 15px 22px !important;
  }

  body#product .tabs .tab-pane {
    font-size: 14px;
    line-height: 1.65;
  }

  body#product .tabs .tab-pane h2 {
    font-size: 20px !important;
  }

  body#product .qmpt-accordion {
    gap: 9px;
  }

  body#product .qmpt-accordion-header {
    min-height: 52px;
    padding: 14px 50px 14px 15px !important;

    font-size: 13px !important;
  }

  body#product .qmpt-accordion-icon {
    right: 12px;
    width: 27px;
    height: 27px;
  }

  body#product .qmpt-accordion-body {
    padding: 15px 15px 17px 19px !important;
    font-size: 13px !important;
  }

  body#product .qmpt-accordion-body::before {
    left: 8px;
  }
}
/* =========================================================
   QM - HOMEPAGE CUSTOM TEXT PREMIUM CARD - FINAL OVERRIDE
   Added 2026-08-19
   This block intentionally stays at the very end of custom.css.
========================================================= */

body#index #custom-text,
body#index .custom-text,
body#index .block-custom-text {
  display: block !important;
  width: calc(100% - 28px) !important;
  max-width: 1080px !important;
  margin: 14px auto 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  text-align: center !important;
}

body#index #custom-text .qm-info-card,
body#index #custom-text .qm-info-card * {
  box-sizing: border-box !important;
}

body#index #custom-text .qm-info-card {
  display: block !important;
  width: 100% !important;
  max-width: 1060px !important;
  margin: 0 auto !important;
  padding: 24px 24px 18px !important;
  overflow: hidden !important;
  position: relative !important;
  text-align: center !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(201,163,63,.11) 0%, rgba(201,163,63,0) 36%),
    linear-gradient(145deg, #060606 0%, #121212 52%, #070707 100%) !important;

  border: 1px solid rgba(201,163,63,.52) !important;
  border-radius: 18px !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  color: #f5f3ee !important;
}

body#index #custom-text .qm-info-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 24px !important;
  right: 24px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(229,200,120,.88), transparent) !important;
  pointer-events: none !important;
}

body#index #custom-text .qm-info-card h2 {
  display: block !important;
  width: 100% !important;
  margin: 0 0 9px !important;
  padding: 0 !important;
  color: #e2c56f !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

body#index #custom-text .qm-info-intro {
  display: block !important;
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto 19px !important;
  padding: 0 !important;
  color: rgba(255,255,255,.90) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

body#index #custom-text .qm-info-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(255,255,255,.015) !important;
  border: 1px solid rgba(201,163,63,.16) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

body#index #custom-text .qm-info-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 72px !important;
  margin: 0 !important;
  padding: 11px 10px !important;
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid rgba(201,163,63,.16) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
}

body#index #custom-text .qm-info-item:last-child {
  border-right: 0 !important;
}

body#index #custom-text .qm-info-item strong {
  display: block !important;
  width: 100% !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  color: #e2c56f !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .025em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

body#index #custom-text .qm-info-item span {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255,255,255,.86) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

@media (max-width: 767.98px) {
  body#index #custom-text,
  body#index .custom-text,
  body#index .block-custom-text {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 12px auto 20px !important;
  }

  body#index #custom-text .qm-info-card {
    padding: 19px 12px 12px !important;
    border-radius: 16px !important;
  }

  body#index #custom-text .qm-info-card::before {
    left: 18px !important;
    right: 18px !important;
  }

  body#index #custom-text .qm-info-card h2 {
    margin-bottom: 8px !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    letter-spacing: .02em !important;
  }

  body#index #custom-text .qm-info-intro {
    margin-bottom: 14px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  body#index #custom-text .qm-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-radius: 11px !important;
  }

  body#index #custom-text .qm-info-item {
    min-height: 62px !important;
    padding: 9px 7px !important;
    border-right: 1px solid rgba(201,163,63,.15) !important;
    border-bottom: 1px solid rgba(201,163,63,.15) !important;
  }

  body#index #custom-text .qm-info-item:nth-child(2n) {
    border-right: 0 !important;
  }

  body#index #custom-text .qm-info-item:nth-child(3),
  body#index #custom-text .qm-info-item:nth-child(4) {
    border-bottom: 1px solid rgba(201,163,63,.15) !important;
  }

  body#index #custom-text .qm-info-item.qm-info-wide,
  body#index #custom-text .qm-info-item:last-child {
    grid-column: 1 / -1 !important;
    min-height: 54px !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  body#index #custom-text .qm-info-item strong {
    margin-bottom: 3px !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  body#index #custom-text .qm-info-item span {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
  }
}

/* =========================================================
   QM - CUSTOM TEXT HARD RESET V2
   Added 2026-08-19
   Fixes legacy #custom-text grid rules when TinyMCE strips
   the custom qm-info-* classes or outputs plain paragraphs.
========================================================= */

body#index #custom-text {
  box-sizing: border-box !important;
  display: block !important;
  width: calc(100% - 24px) !important;
  max-width: 1060px !important;
  margin: 12px auto 22px !important;
  padding: 22px 18px 18px !important;
  overflow: hidden !important;
  position: relative !important;
  color: #f5f3ee !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(201,163,63,.10) 0%, rgba(201,163,63,0) 38%),
    linear-gradient(145deg, #060606 0%, #111111 52%, #070707 100%) !important;
  border: 1px solid rgba(201,163,63,.50) !important;
  border-radius: 17px !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
  text-align: center !important;
}

body#index #custom-text::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 18px !important;
  right: 18px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(229,200,120,.82), transparent) !important;
  pointer-events: none !important;
}

/* Kill the old 5-column rules on PrestaShop wrappers. */
body#index #custom-text > .container,
body#index #custom-text > .row,
body#index #custom-text .container,
body#index #custom-text .row {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Generic TinyMCE output: always calm and centered. */
body#index #custom-text h1,
body#index #custom-text h2,
body#index #custom-text h3,
body#index #custom-text h4 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: #e2c56f !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: .025em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

body#index #custom-text p,
body#index #custom-text div,
body#index #custom-text span {
  color: rgba(255,255,255,.90) !important;
  text-shadow: none !important;
}

body#index #custom-text p {
  display: block !important;
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto 10px !important;
  padding: 0 !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

body#index #custom-text p:last-child {
  margin-bottom: 0 !important;
}

/* When the editor outputs the USP titles as strong text in one paragraph,
   keep every title on its own centered line. */
body#index #custom-text p strong {
  display: block !important;
  margin: 8px auto 2px !important;
  color: #e2c56f !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

body#index #custom-text p:first-of-type {
  margin-bottom: 14px !important;
}

/* If the correct qm-info markup is present, restore the designed card
   inside the reset without inheriting any of the old generic grid rules. */
body#index #custom-text .qm-info-card {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  color: #f5f3ee !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
}

body#index #custom-text .qm-info-card::before {
  content: none !important;
  display: none !important;
}

body#index #custom-text .qm-info-card h2 {
  margin: 0 0 9px !important;
  color: #e2c56f !important;
  font-size: 19px !important;
}

body#index #custom-text .qm-info-intro {
  max-width: 760px !important;
  margin: 0 auto 16px !important;
  color: rgba(255,255,255,.90) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

body#index #custom-text .qm-info-grid {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.015) !important;
  border: 1px solid rgba(201,163,63,.16) !important;
  border-radius: 11px !important;
}

body#index #custom-text .qm-info-item {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 68px !important;
  margin: 0 !important;
  padding: 10px 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid rgba(201,163,63,.16) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
}

body#index #custom-text .qm-info-item:last-child {
  border-right: 0 !important;
}

body#index #custom-text .qm-info-item strong {
  display: block !important;
  width: 100% !important;
  margin: 0 0 3px !important;
  padding: 0 !important;
  color: #e2c56f !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

body#index #custom-text .qm-info-item span {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255,255,255,.86) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

@media (max-width: 767.98px) {
  body#index #custom-text {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 12px auto 20px !important;
    padding: 18px 12px 12px !important;
    border-radius: 15px !important;
  }

  body#index #custom-text h1,
  body#index #custom-text h2,
  body#index #custom-text h3,
  body#index #custom-text h4,
  body#index #custom-text .qm-info-card h2 {
    margin-bottom: 8px !important;
    font-size: 16.5px !important;
    line-height: 1.25 !important;
  }

  body#index #custom-text p,
  body#index #custom-text .qm-info-intro {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }

  body#index #custom-text p strong {
    margin-top: 7px !important;
    font-size: 11px !important;
  }

  body#index #custom-text .qm-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body#index #custom-text .qm-info-item {
    min-height: 58px !important;
    padding: 8px 6px !important;
    border-right: 1px solid rgba(201,163,63,.15) !important;
    border-bottom: 1px solid rgba(201,163,63,.15) !important;
  }

  body#index #custom-text .qm-info-item:nth-child(2n) {
    border-right: 0 !important;
  }

  body#index #custom-text .qm-info-item.qm-info-wide,
  body#index #custom-text .qm-info-item:last-child {
    grid-column: 1 / -1 !important;
    min-height: 50px !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  body#index #custom-text .qm-info-item strong,
  body#index #custom-text .qm-info-item span {
    font-size: 10.25px !important;
  }
}

/* =========================================================
   QM FINAL - HOMEPAGE TRUSTBAR RESTORE
   Keeps Custom Text wrapper transparent and restores the
   compact 5-USP trustbar. This block must stay LAST.
========================================================= */

body#index #custom-text,
body#index .custom-text,
body#index .block-custom-text {
  box-sizing: border-box !important;
  display: block !important;
  width: calc(100% - 32px) !important;
  max-width: 1120px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 12px auto 24px !important;
  padding: 0 !important;
  overflow: visible !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: initial !important;
}

body#index #custom-text > .qm-trustbar,
body#index #custom-text .qm-trustbar {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 1060px !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  background:
    radial-gradient(circle at top center, rgba(201,163,63,.12) 0%, rgba(201,163,63,0) 44%),
    linear-gradient(135deg, #050505 0%, #121212 52%, #060606 100%) !important;
  border: 1px solid rgba(201,163,63,.44) !important;
  border-radius: 16px !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
  text-align: center !important;
}

body#index #custom-text .qm-trustbar::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 22px !important;
  right: 22px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(229,200,120,.82), transparent) !important;
  pointer-events: none !important;
}

body#index #custom-text .qm-trustbar > .qm-trust-item,
body#index #custom-text .qm-trustbar > div {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 13px 12px !important;
  overflow: hidden !important;
  color: #f5f5f5 !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid rgba(201,163,63,.18) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
}

body#index #custom-text .qm-trustbar > .qm-trust-item:last-child,
body#index #custom-text .qm-trustbar > div:last-child {
  border-right: 0 !important;
}

body#index #custom-text .qm-trustbar strong {
  display: block !important;
  width: 100% !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  color: #e2c56f !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .025em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-shadow: none !important;
}

body#index #custom-text .qm-trustbar span,
body#index #custom-text .qm-trustbar small {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255,255,255,.88) !important;
  background: transparent !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  text-shadow: none !important;
}

/* Hide the replacement info-card only if old markup accidentally remains. */
body#index #custom-text .qm-info-card {
  box-shadow: none !important;
}

@media (max-width: 767.98px) {
  body#index #custom-text,
  body#index .custom-text,
  body#index .block-custom-text {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 12px auto 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body#index #custom-text .qm-trustbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 15px !important;
  }

  body#index #custom-text .qm-trustbar > .qm-trust-item,
  body#index #custom-text .qm-trustbar > div {
    min-height: 66px !important;
    padding: 10px 7px !important;
    border-right: 1px solid rgba(201,163,63,.16) !important;
    border-bottom: 1px solid rgba(201,163,63,.16) !important;
  }

  body#index #custom-text .qm-trustbar > .qm-trust-item:nth-child(2n),
  body#index #custom-text .qm-trustbar > div:nth-child(2n) {
    border-right: 0 !important;
  }

  body#index #custom-text .qm-trustbar > .qm-trust-item:last-child,
  body#index #custom-text .qm-trustbar > div:last-child {
    grid-column: 1 / -1 !important;
    min-height: 56px !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  body#index #custom-text .qm-trustbar strong {
    font-size: 10.8px !important;
    line-height: 1.2 !important;
  }

  body#index #custom-text .qm-trustbar span,
  body#index #custom-text .qm-trustbar small {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }
}
/* =========================================================
   QM PHASE 3A - LUXE BLACK / CHAMPAGNE BUTTONS
   SAFE VISUAL OVERRIDE - GEEN LAYOUTWIJZIGINGEN
========================================================= */

:root {
  --qm-luxe-black: #11110f;
  --qm-luxe-black-hover: #1c1b18;

  --qm-luxe-gold: #b89445;
  --qm-luxe-gold-light: #c8aa68;
  --qm-luxe-gold-dark: #8d6f32;

  --qm-luxe-ivory: #faf8f3;
  --qm-luxe-ivory-hover: #f3eee3;

  --qm-luxe-border: #d8c79f;
  --qm-luxe-text: #1a1916;
}


/* =========================================================
   1. PRODUCTPAGINA - SECUNDAIRE KNOPPEN
   Ivoor + dunne champagne rand
========================================================= */

body.page-product .btn:not(.btn-primary):not(.add-to-cart):not(.wishlist-button-product),
body.page-product a.btn:not(.btn-primary):not(.add-to-cart) {
  color: var(--qm-luxe-text) !important;

  background:
    linear-gradient(
      180deg,
      #fffdf9 0%,
      var(--qm-luxe-ivory) 100%
    ) !important;

  border: 1px solid var(--qm-luxe-border) !important;
  border-radius: 9px !important;

  box-shadow:
    0 3px 9px rgba(24,20,12,.055),
    inset 0 1px 0 rgba(255,255,255,.92) !important;

  text-shadow: none !important;

  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease,
    transform .16s ease !important;
}


body.page-product .btn:not(.btn-primary):not(.add-to-cart):not(.wishlist-button-product):hover,
body.page-product a.btn:not(.btn-primary):not(.add-to-cart):hover {
  color: #11110f !important;

  background: var(--qm-luxe-ivory-hover) !important;

  border-color: var(--qm-luxe-gold) !important;

  box-shadow:
    0 5px 13px rgba(24,20,12,.08),
    inset 0 1px 0 rgba(255,255,255,.96) !important;

  transform: translateY(-1px) !important;
}


/* =========================================================
   2. PRODUCTPAGINA - PRIMAIRE CTA
   Zwart + champagne goud
========================================================= */

body.page-product .btn-primary:not(.add-to-cart),
body.page-product a.btn-primary:not(.add-to-cart),
body.page-product button.btn-primary:not(.add-to-cart) {
  color: var(--qm-luxe-gold-light) !important;

  background:
    linear-gradient(
      180deg,
      #181815 0%,
      var(--qm-luxe-black) 100%
    ) !important;

  border: 1px solid #2a2822 !important;
  border-radius: 9px !important;

  box-shadow:
    0 6px 14px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.055) !important;

  text-shadow: none !important;
}


body.page-product .btn-primary:not(.add-to-cart):hover,
body.page-product .btn-primary:not(.add-to-cart):focus {
  color: #f1dfb3 !important;

  background: var(--qm-luxe-black-hover) !important;

  border-color: var(--qm-luxe-gold) !important;

  box-shadow:
    0 8px 17px rgba(0,0,0,.18),
    0 0 0 1px rgba(184,148,69,.08) !important;

  transform: translateY(-1px) !important;
}


/* Icoontjes dezelfde kleur als tekst */
body.page-product .btn i,
body.page-product .btn .material-icons {
  color: currentColor !important;
}


/* =========================================================
   3. IN WINKELWAGEN
   Belangrijkste commerciële CTA
========================================================= */

body.page-product .product-actions .add-to-cart {
  color: var(--qm-luxe-gold-light) !important;

  background:
    linear-gradient(
      180deg,
      #181815 0%,
      #0f0f0d 100%
    ) !important;

  border: 1px solid #2a2822 !important;
  border-radius: 11px !important;

  box-shadow:
    0 7px 16px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.055) !important;

  text-shadow: none !important;
  filter: none !important;
}


body.page-product .product-actions .add-to-cart:hover,
body.page-product .product-actions .add-to-cart:focus {
  color: #f0ddb0 !important;

  background: #1b1a17 !important;

  border-color: var(--qm-luxe-gold) !important;

  box-shadow:
    0 9px 20px rgba(0,0,0,.19),
    0 0 0 1px rgba(184,148,69,.07) !important;

  transform: translateY(-1px) !important;
  filter: none !important;
}


/* =========================================================
   4. WISHLIST
========================================================= */

body.page-product .product-actions .wishlist-button-product {
  color: var(--qm-luxe-gold-light) !important;

  background: #151512 !important;

  border: 1px solid #3c3526 !important;

  box-shadow:
    0 5px 13px rgba(0,0,0,.13) !important;
}


body.page-product .product-actions .wishlist-button-product:hover {
  color: #f0ddb0 !important;

  background: #1d1c18 !important;

  border-color: var(--qm-luxe-gold) !important;
}


/* =========================================================
   5. CONFIGURATOR
   Geel eruit, warm champagne erin
========================================================= */

body.page-product .product-information > .product-actions {
  border-color: rgba(184,148,69,.28) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(184,148,69,.075),
      transparent 33%
    ),
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fffefa 72%,
      #f8f4eb 100%
    ) !important;
}


body.page-product .product-information > .product-actions::before,
body.page-product .product-actions .product-add-to-cart {
  border-color: rgba(184,148,69,.22) !important;
}


/* Dropdowns rustiger */
body.page-product .product-actions .product-variants select,
body.page-product .product-actions .product-variants select.form-control {
  border-color: #ddd6c8 !important;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fcfaf6 100%
    ) !important;
}


body.page-product .product-actions .product-variants select:hover,
body.page-product .product-actions .product-variants select:focus {
  border-color: var(--qm-luxe-gold) !important;
}


/* Geselecteerde kleur */
body.page-product .product-actions .product-variants input.input-color:checked + span,
body.page-product .product-actions .product-variants input.input-color:checked + .color {
  box-shadow:
    0 0 0 2px var(--qm-luxe-gold),
    0 5px 12px rgba(26,21,11,.13) !important;
}


/* =========================================================
   6. PRODUCTKAARTEN
========================================================= */

.product-miniature .qm-product-card__cta {
  color: var(--qm-luxe-gold-light) !important;

  background: var(--qm-luxe-black) !important;

  border: 1px solid #292720 !important;

  box-shadow: none !important;
}


.product-miniature .qm-product-card__cta:hover {
  color: #f0ddb0 !important;

  background: var(--qm-luxe-black-hover) !important;

  border-color: var(--qm-luxe-gold) !important;
}


/* Wishlist productkaart: geen grote gouden klodder meer */
.product-miniature .wishlist-button-add {
  color: var(--qm-luxe-gold) !important;

  background: rgba(255,253,248,.96) !important;

  border: 1px solid rgba(184,148,69,.42) !important;

  box-shadow:
    0 5px 13px rgba(18,15,8,.09) !important;
}


.product-miniature .wishlist-button-add i,
.product-miniature .wishlist-button-add .material-icons {
  color: var(--qm-luxe-gold-dark) !important;
}


/* =========================================================
   7. MOBIEL
   Alleen kleur - GEEN afmetingen/layout veranderen
========================================================= */

@media (max-width: 767.98px) {

  body.page-product .btn,
  body.page-product .product-actions .add-to-cart,
  body.page-product .product-actions .wishlist-button-product {
    transform: none !important;
  }

}

/* =========================================================
   QM BUTTON DESIGN SYSTEM V1 - 2026-08-31
   SAFE, TARGETED VISUAL OVERRIDE

   Scope: Parts Hub, category sorting, product-card CTA,
   product Sales Hub, add-to-cart and wishlist controls.

   Rollback: remove only this complete block.
   No display, position, grid, width, height, spacing or
   breakpoint declarations are changed here.
========================================================= */

:root {
  --qm-button-black: #11110f;
  --qm-button-charcoal: #1c1b18;
  --qm-button-gold: #b89445;
  --qm-button-gold-light: #c8aa68;
  --qm-button-gold-dark: #8d6f32;
  --qm-button-ivory: #faf8f3;
  --qm-button-ivory-hover: #f3eee3;
  --qm-button-border-light: #d8c79f;
  --qm-button-text: #1a1916;
  --qm-button-primary-bg:
    linear-gradient(180deg, #191916 0%, #11110f 100%);
  --qm-button-primary-hover-bg:
    linear-gradient(180deg, #24231f 0%, #1c1b18 100%);
  --qm-button-secondary-bg:
    linear-gradient(180deg, #fffdfa 0%, #faf8f3 100%);
  --qm-button-primary-shadow:
    0 6px 14px rgba(0, 0, 0, .14),
    inset 0 1px 0 rgba(255, 255, 255, .055);
  --qm-button-secondary-shadow:
    0 3px 9px rgba(24, 20, 12, .055),
    inset 0 1px 0 rgba(255, 255, 255, .88);
  --qm-button-focus-ring: rgba(200, 170, 104, .72);
}

/* Shared calm interaction: visual properties only. */
.qm-vehicle-selector__submit,
body#category .products-sort-order .select-title,
.product-miniature .qm-product-card__cta,
.product-miniature .wishlist-button-add,
body.page-product .product-actions .add-to-cart,
body.page-product .product-actions .wishlist-button-product,
body.page-product .qmpsh-btn,
body.page-product .qmpsh-link-btn,
body.page-product .qmpsh-mobile-bar button,
body#product .qmpt-accessory-button {
  text-shadow: none !important;
  filter: none !important;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    opacity .18s ease !important;
}

.qm-vehicle-selector__submit:hover,
.qm-vehicle-selector__submit:focus,
body#category .products-sort-order .select-title:hover,
body#category .products-sort-order .select-title:focus,
.product-miniature .qm-product-card__cta:hover,
.product-miniature .qm-product-card__cta:focus,
.product-miniature .wishlist-button-add:hover,
.product-miniature .wishlist-button-add:focus,
body.page-product .product-actions .add-to-cart:hover,
body.page-product .product-actions .add-to-cart:focus,
body.page-product .product-actions .wishlist-button-product:hover,
body.page-product .product-actions .wishlist-button-product:focus,
body.page-product .qmpsh-btn:hover,
body.page-product .qmpsh-btn:focus,
body.page-product .qmpsh-link-btn:hover,
body.page-product .qmpsh-link-btn:focus,
body.page-product .qmpsh-mobile-bar button:hover,
body.page-product .qmpsh-mobile-bar button:focus,
body#product .qmpt-accessory-button:hover,
body#product .qmpt-accessory-button:focus {
  transform: none !important;
  filter: none !important;
}

/* Primary: deep black with restrained champagne accents. */
.qm-vehicle-selector__submit,
.product-miniature .qm-product-card__cta,
body.page-product .product-actions .add-to-cart,
body.page-product .qmpsh-btn--gold,
body#product .qmpt-accessory-button {
  color: var(--qm-button-gold-light) !important;
  background: var(--qm-button-primary-bg) !important;
  border: 1px solid var(--qm-button-gold-dark) !important;
  box-shadow: var(--qm-button-primary-shadow) !important;
}

.qm-vehicle-selector__submit:hover,
.qm-vehicle-selector__submit:focus,
.product-miniature .qm-product-card__cta:hover,
.product-miniature .qm-product-card__cta:focus,
body.page-product .product-actions .add-to-cart:hover,
body.page-product .product-actions .add-to-cart:focus,
body.page-product .qmpsh-btn--gold:hover,
body.page-product .qmpsh-btn--gold:focus,
body#product .qmpt-accessory-button:hover,
body#product .qmpt-accessory-button:focus {
  color: #ead9b0 !important;
  background: var(--qm-button-primary-hover-bg) !important;
  border-color: var(--qm-button-gold) !important;
  box-shadow:
    0 7px 16px rgba(0, 0, 0, .17),
    inset 0 1px 0 rgba(255, 255, 255, .065) !important;
}

/* Secondary: warm ivory surface within the same family. */
body.page-product .qmpsh-btn--dark,
body.page-product .qmpsh-btn--light {
  color: var(--qm-button-text) !important;
  background: var(--qm-button-secondary-bg) !important;
  border: 1px solid var(--qm-button-border-light) !important;
  box-shadow: var(--qm-button-secondary-shadow) !important;
}

body.page-product .qmpsh-btn--dark:hover,
body.page-product .qmpsh-btn--dark:focus,
body.page-product .qmpsh-btn--light:hover,
body.page-product .qmpsh-btn--light:focus {
  color: var(--qm-button-black) !important;
  background: var(--qm-button-ivory-hover) !important;
  border-color: var(--qm-button-gold) !important;
  box-shadow:
    0 4px 11px rgba(24, 20, 12, .075),
    inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

body.page-product .qmpsh-btn--light svg,
body.page-product .qmpsh-btn--whatsapp svg {
  color: var(--qm-button-gold-dark) !important;
}

/* Utility: sorting, secondary Sales Hub actions and hearts. */
body#category .products-sort-order .select-title,
body.page-product .qmpsh-link-btn,
body.page-product .product-actions .wishlist-button-product,
.product-miniature .wishlist-button-add {
  color: var(--qm-button-text) !important;
  background:
    linear-gradient(
      180deg,
      rgba(255, 253, 249, .98) 0%,
      rgba(250, 248, 243, .96) 100%
    ) !important;
  border: 1px solid var(--qm-button-border-light) !important;
  box-shadow: none !important;
}

body#category .products-sort-order .select-title:hover,
body#category .products-sort-order .select-title:focus,
body.page-product .qmpsh-link-btn:hover,
body.page-product .qmpsh-link-btn:focus,
body.page-product .product-actions .wishlist-button-product:hover,
body.page-product .product-actions .wishlist-button-product:focus,
.product-miniature .wishlist-button-add:hover,
.product-miniature .wishlist-button-add:focus {
  color: var(--qm-button-black) !important;
  background: var(--qm-button-ivory-hover) !important;
  border-color: var(--qm-button-gold) !important;
  box-shadow: 0 3px 9px rgba(24, 20, 12, .065) !important;
  opacity: 1 !important;
}

body#category .products-sort-order .select-title .material-icons,
body.page-product .qmpsh-link-btn svg,
body.page-product .product-actions .wishlist-button-product i,
body.page-product .product-actions .wishlist-button-product .material-icons,
.product-miniature .wishlist-button-add i,
.product-miniature .wishlist-button-add .material-icons {
  color: var(--qm-button-gold-dark) !important;
  fill: currentColor !important;
}

/* Sort-menu: only surface and state colours; dimensions stay untouched. */
body#category .products-sort-order .dropdown-menu {
  color: var(--qm-button-text) !important;
  background: var(--qm-button-ivory) !important;
  border-color: var(--qm-button-border-light) !important;
  box-shadow: 0 8px 18px rgba(24, 20, 12, .11) !important;
}

body#category .products-sort-order .select-list {
  color: var(--qm-button-text) !important;
  background: transparent !important;
}

body#category .products-sort-order .select-list:hover,
body#category .products-sort-order .select-list:focus,
body#category .products-sort-order .select-list.current {
  color: var(--qm-button-black) !important;
  background: rgba(184, 148, 69, .12) !important;
}

/* Mobile Sales Hub: visual border via shadow, so sizing is unchanged. */
body.page-product .qmpsh-mobile-bar button {
  color: var(--qm-button-ivory) !important;
  background: rgba(255, 255, 255, .025) !important;
  box-shadow: inset 0 0 0 1px rgba(216, 199, 159, .22) !important;
}

body.page-product .qmpsh-mobile-bar button:hover,
body.page-product .qmpsh-mobile-bar button:focus {
  color: var(--qm-button-gold-light) !important;
  background: rgba(184, 148, 69, .10) !important;
  box-shadow: inset 0 0 0 1px rgba(184, 148, 69, .52) !important;
}

body.page-product .qmpsh-mobile-bar .qmpsh-mobile-bar__buy {
  color: var(--qm-button-gold-light) !important;
  background: var(--qm-button-primary-bg) !important;
  box-shadow:
    inset 0 0 0 1px var(--qm-button-gold-dark),
    0 4px 10px rgba(0, 0, 0, .16) !important;
}

body.page-product .qmpsh-mobile-bar .qmpsh-mobile-bar__buy:hover,
body.page-product .qmpsh-mobile-bar .qmpsh-mobile-bar__buy:focus {
  color: #ead9b0 !important;
  background: var(--qm-button-primary-hover-bg) !important;
  box-shadow:
    inset 0 0 0 1px var(--qm-button-gold),
    0 4px 10px rgba(0, 0, 0, .18) !important;
}

/* One accessible focus treatment across the complete family. */
.qm-vehicle-selector__submit:focus-visible,
body#category .products-sort-order .select-title:focus-visible,
.product-miniature .qm-product-card__cta:focus-visible,
.product-miniature .wishlist-button-add:focus-visible,
body.page-product .product-actions .add-to-cart:focus-visible,
body.page-product .product-actions .wishlist-button-product:focus-visible,
body.page-product .qmpsh-btn:focus-visible,
body.page-product .qmpsh-link-btn:focus-visible,
body.page-product .qmpsh-mobile-bar button:focus-visible,
body#product .qmpt-accessory-button:focus-visible {
  outline: 2px solid var(--qm-button-focus-ring) !important;
  outline-offset: 2px !important;
}

/* Disabled state remains clear without adding glow. */
.qm-vehicle-selector__submit:disabled,
body#category .products-sort-order .select-title:disabled,
body.page-product .product-actions .add-to-cart:disabled,
body.page-product .qmpsh-btn:disabled,
body.page-product .qmpsh-link-btn:disabled,
body.page-product .qmpsh-mobile-bar button:disabled,
body#product .qmpt-accessory-button:disabled {
  opacity: .55 !important;
  box-shadow: none !important;
  filter: saturate(.55) !important;
}

/* =========================================================
   QM BUTTON DESIGN SYSTEM V2 - COOKIE STYLE ALIGNMENT
   Added 2026-08-31 after visual review.

   Rollback: remove only this complete V2 block.
   Visual properties only: no layout, sizes or breakpoints.
========================================================= */

:root {
  --qm-cookie-dark-bg:
    linear-gradient(180deg, #171713 0%, #0d0d0c 100%);
  --qm-cookie-dark-hover-bg:
    linear-gradient(180deg, #25231d 0%, #171611 100%);
  --qm-cookie-dark-text: #eadba9;
  --qm-cookie-dark-border: rgba(218, 187, 98, .62);
  --qm-cookie-dark-border-hover: #d5b251;
  --qm-cookie-gold-bg:
    linear-gradient(180deg, #d8b448 0%, #bd9127 100%);
  --qm-cookie-gold-hover-bg: #e0c164;
  --qm-cookie-gold-text: #15130e;
  --qm-cookie-focus: rgba(224, 193, 100, .74);
}

/* ---------------------------------------------------------
   DARK COOKIE VARIANT
   Secondary CTA, utility and commerce controls.
--------------------------------------------------------- */

.qm-rdw-form__submit,
.qm-vehicle-selector__submit,
body#category .products-sort-order .select-title,
.product-miniature .qm-product-card__cta,
body.page-product .product-actions .add-to-cart,
body.page-product .qmpsh-btn--dark,
body.page-product .qmpsh-btn--light,
body.page-product .qmpsh-link-btn,
body.page-product .qmpsh-mobile-bar button,
body#product .qmpt-accessory-button {
  color: var(--qm-cookie-dark-text) !important;
  background: var(--qm-cookie-dark-bg) !important;
  border: 1px solid var(--qm-cookie-dark-border) !important;
  border-radius: 9px !important;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, .14),
    inset 0 1px 0 rgba(255, 255, 255, .045) !important;
  text-shadow: none !important;
  filter: none !important;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease !important;
}

.qm-rdw-form__submit:hover,
.qm-rdw-form__submit:focus,
.qm-vehicle-selector__submit:hover,
.qm-vehicle-selector__submit:focus,
body#category .products-sort-order .select-title:hover,
body#category .products-sort-order .select-title:focus,
.product-miniature .qm-product-card__cta:hover,
.product-miniature .qm-product-card__cta:focus,
body.page-product .product-actions .add-to-cart:hover,
body.page-product .product-actions .add-to-cart:focus,
body.page-product .qmpsh-btn--dark:hover,
body.page-product .qmpsh-btn--dark:focus,
body.page-product .qmpsh-btn--light:hover,
body.page-product .qmpsh-btn--light:focus,
body.page-product .qmpsh-link-btn:hover,
body.page-product .qmpsh-link-btn:focus,
body.page-product .qmpsh-mobile-bar button:hover,
body.page-product .qmpsh-mobile-bar button:focus,
body#product .qmpt-accessory-button:hover,
body#product .qmpt-accessory-button:focus {
  color: #fff8e8 !important;
  background: var(--qm-cookie-dark-hover-bg) !important;
  border-color: var(--qm-cookie-dark-border-hover) !important;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, .17),
    inset 0 1px 0 rgba(255, 255, 255, .055) !important;
  transform: none !important;
  filter: none !important;
}

body.page-product .qmpsh-btn--dark svg,
body.page-product .qmpsh-btn--light svg,
body.page-product .qmpsh-link-btn svg,
body.page-product .qmpsh-mobile-bar button svg,
body.page-product .product-actions .add-to-cart i,
body.page-product .product-actions .add-to-cart .material-icons,
.product-miniature .qm-product-card__cta i,
.product-miniature .qm-product-card__cta .material-icons,
body#product .qmpt-accessory-button i,
body#product .qmpt-accessory-button .material-icons {
  color: currentColor !important;
  fill: currentColor !important;
}

/* ---------------------------------------------------------
   GOLD COOKIE VARIANT
   Primary lead action and primary mobile purchase action.
--------------------------------------------------------- */

body.page-product .qmpsh-btn--gold,
body.page-product .qmpsh-mobile-bar .qmpsh-mobile-bar__buy {
  color: var(--qm-cookie-gold-text) !important;
  background: var(--qm-cookie-gold-bg) !important;
  border: 1px solid #d8b448 !important;
  border-radius: 9px !important;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, .13),
    inset 0 1px 0 rgba(255, 255, 255, .26) !important;
  text-shadow: none !important;
  filter: none !important;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease !important;
}

body.page-product .qmpsh-btn--gold:hover,
body.page-product .qmpsh-btn--gold:focus,
body.page-product .qmpsh-mobile-bar .qmpsh-mobile-bar__buy:hover,
body.page-product .qmpsh-mobile-bar .qmpsh-mobile-bar__buy:focus {
  color: #0d0d0d !important;
  background: var(--qm-cookie-gold-hover-bg) !important;
  border-color: #e0c164 !important;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, .15),
    inset 0 1px 0 rgba(255, 255, 255, .32) !important;
  transform: none !important;
  filter: none !important;
}

body.page-product .qmpsh-btn--gold svg,
body.page-product .qmpsh-mobile-bar .qmpsh-mobile-bar__buy svg {
  color: currentColor !important;
  fill: currentColor !important;
}

/* ---------------------------------------------------------
   PRODUCT TABS
   Inactive = dark cookie; active = gold cookie.
   Only .active controls the gold state, preventing two
   stale PrestaShop active markers from looking selected.
--------------------------------------------------------- */

body#product .tabs > .nav-tabs .nav-link,
body#product .tabs > .nav-tabs .nav-link.js-product-nav-active:not(.active) {
  color: var(--qm-cookie-dark-text) !important;
  background: var(--qm-cookie-dark-bg) !important;
  border: 1px solid var(--qm-cookie-dark-border) !important;
  border-radius: 9px !important;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, .14),
    inset 0 1px 0 rgba(255, 255, 255, .045) !important;
  text-shadow: none !important;
  transform: none !important;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease !important;
}

body#product .tabs > .nav-tabs .nav-link:hover,
body#product .tabs > .nav-tabs .nav-link:focus,
body#product .tabs > .nav-tabs .nav-link.js-product-nav-active:not(.active):hover,
body#product .tabs > .nav-tabs .nav-link.js-product-nav-active:not(.active):focus {
  color: #fff8e8 !important;
  background: var(--qm-cookie-dark-hover-bg) !important;
  border-color: var(--qm-cookie-dark-border-hover) !important;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, .17),
    inset 0 1px 0 rgba(255, 255, 255, .055) !important;
  transform: none !important;
}

body#product .tabs > .nav-tabs .nav-link.active,
body#product .tabs > .nav-tabs .nav-link.active:hover,
body#product .tabs > .nav-tabs .nav-link.active:focus {
  color: var(--qm-cookie-gold-text) !important;
  background: var(--qm-cookie-gold-bg) !important;
  border-color: #d8b448 !important;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, .13),
    inset 0 1px 0 rgba(255, 255, 255, .26) !important;
  transform: none !important;
}

body#product .tabs > .nav-tabs .nav-link::after {
  opacity: 0 !important;
}

/* ---------------------------------------------------------
   FOCUS AND DISABLED STATES
--------------------------------------------------------- */

.qm-rdw-form__submit:focus-visible,
.qm-vehicle-selector__submit:focus-visible,
body#category .products-sort-order .select-title:focus-visible,
.product-miniature .qm-product-card__cta:focus-visible,
body.page-product .product-actions .add-to-cart:focus-visible,
body.page-product .qmpsh-btn:focus-visible,
body.page-product .qmpsh-link-btn:focus-visible,
body.page-product .qmpsh-mobile-bar button:focus-visible,
body#product .qmpt-accessory-button:focus-visible,
body#product .tabs > .nav-tabs .nav-link:focus-visible {
  outline: 2px solid var(--qm-cookie-focus) !important;
  outline-offset: 2px !important;
}

.qm-rdw-form__submit:disabled,
.qm-vehicle-selector__submit:disabled,
body.page-product .qmpsh-btn:disabled,
body.page-product .qmpsh-link-btn:disabled,
body.page-product .qmpsh-mobile-bar button:disabled {
  color: #8f8468 !important;
  background: #171612 !important;
  border-color: #50452b !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}

/* =========================================================
   QM BUTTON DESIGN SYSTEM V3 - SOFT GRAPHITE / CHAMPAGNE
   Added 2026-08-31 after on-device visual review.

   Rollback: remove only this complete V3 block, or restore
   custom.v2-before-soft-refinement.css.

   Scope:
   - softer visual tokens for the existing button family;
   - a targeted alignment correction for the RDW form;
   - no changes to page grids, product cards or breakpoints.
========================================================= */

:root {
  --qm-soft-graphite-bg:
    linear-gradient(180deg, #45443f 0%, #373631 100%);
  --qm-soft-graphite-hover-bg:
    linear-gradient(180deg, #504e48 0%, #41403a 100%);
  --qm-soft-graphite-text: #f3efe7;
  --qm-soft-graphite-border: #817967;
  --qm-soft-graphite-border-hover: #9a8f78;

  --qm-soft-champagne-bg:
    linear-gradient(180deg, #c5b58e 0%, #ad9a70 100%);
  --qm-soft-champagne-hover-bg:
    linear-gradient(180deg, #cec09e 0%, #b8a77e 100%);
  --qm-soft-champagne-text: #292720;
  --qm-soft-champagne-border: #a18e64;
  --qm-soft-champagne-border-hover: #95815a;

  --qm-soft-stone-bg:
    linear-gradient(180deg, #f5f2eb 0%, #e9e4d9 100%);
  --qm-soft-stone-hover-bg:
    linear-gradient(180deg, #efebe2 0%, #dfd8ca 100%);
  --qm-soft-stone-text: #403d36;
  --qm-soft-stone-border: #c9bea8;
  --qm-soft-focus: rgba(151, 133, 95, .52);
}

/* ---------------------------------------------------------
   SOFT GRAPHITE
   Secondary CTA and utility controls. Ivory replaces the
   earlier gold text so the dark surfaces feel less heavy.
--------------------------------------------------------- */

.qm-rdw-form__submit,
body#category .products-sort-order .select-title,
.product-miniature .qm-product-card__cta,
body.page-product .qmpsh-btn--dark,
body.page-product .qmpsh-btn--light,
body.page-product .qmpsh-link-btn,
body.page-product .qmpsh-mobile-bar button,
body#product .qmpt-accessory-button {
  color: var(--qm-soft-graphite-text) !important;
  background: var(--qm-soft-graphite-bg) !important;
  border-color: var(--qm-soft-graphite-border) !important;
  box-shadow:
    0 2px 5px rgba(25, 23, 19, .12),
    inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  text-shadow: none !important;
  filter: none !important;
}

.qm-rdw-form__submit:hover,
.qm-rdw-form__submit:focus,
body#category .products-sort-order .select-title:hover,
body#category .products-sort-order .select-title:focus,
.product-miniature .qm-product-card__cta:hover,
.product-miniature .qm-product-card__cta:focus,
body.page-product .qmpsh-btn--dark:hover,
body.page-product .qmpsh-btn--dark:focus,
body.page-product .qmpsh-btn--light:hover,
body.page-product .qmpsh-btn--light:focus,
body.page-product .qmpsh-link-btn:hover,
body.page-product .qmpsh-link-btn:focus,
body.page-product .qmpsh-mobile-bar button:hover,
body.page-product .qmpsh-mobile-bar button:focus,
body#product .qmpt-accessory-button:hover,
body#product .qmpt-accessory-button:focus {
  color: #fffdf8 !important;
  background: var(--qm-soft-graphite-hover-bg) !important;
  border-color: var(--qm-soft-graphite-border-hover) !important;
  box-shadow:
    0 3px 7px rgba(25, 23, 19, .14),
    inset 0 1px 0 rgba(255, 255, 255, .075) !important;
  transform: none !important;
  filter: none !important;
}

/* ---------------------------------------------------------
   MUTED CHAMPAGNE PRIMARY
   Reserved for the strongest action in each context.
--------------------------------------------------------- */

.qm-vehicle-selector__submit,
body.page-product .product-actions .add-to-cart,
body.page-product .qmpsh-btn--gold,
body.page-product .qmpsh-mobile-bar .qmpsh-mobile-bar__buy {
  color: var(--qm-soft-champagne-text) !important;
  background: var(--qm-soft-champagne-bg) !important;
  border-color: var(--qm-soft-champagne-border) !important;
  box-shadow:
    0 2px 6px rgba(49, 43, 31, .13),
    inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  text-shadow: none !important;
  filter: none !important;
}

.qm-vehicle-selector__submit:hover,
.qm-vehicle-selector__submit:focus,
body.page-product .product-actions .add-to-cart:hover,
body.page-product .product-actions .add-to-cart:focus,
body.page-product .qmpsh-btn--gold:hover,
body.page-product .qmpsh-btn--gold:focus,
body.page-product .qmpsh-mobile-bar .qmpsh-mobile-bar__buy:hover,
body.page-product .qmpsh-mobile-bar .qmpsh-mobile-bar__buy:focus {
  color: #211f1a !important;
  background: var(--qm-soft-champagne-hover-bg) !important;
  border-color: var(--qm-soft-champagne-border-hover) !important;
  box-shadow:
    0 3px 7px rgba(49, 43, 31, .15),
    inset 0 1px 0 rgba(255, 255, 255, .27) !important;
  transform: none !important;
  filter: none !important;
}

/* ---------------------------------------------------------
   PRODUCT TABS
   Warm stone for inactive tabs and muted champagne for the
   single active tab. This removes the black/gold split.
--------------------------------------------------------- */

body#product .tabs > .nav-tabs .nav-link,
body#product .tabs > .nav-tabs .nav-link.js-product-nav-active:not(.active) {
  color: var(--qm-soft-stone-text) !important;
  background: var(--qm-soft-stone-bg) !important;
  border-color: var(--qm-soft-stone-border) !important;
  box-shadow:
    0 2px 5px rgba(44, 40, 33, .09),
    inset 0 1px 0 rgba(255, 255, 255, .48) !important;
  text-shadow: none !important;
  transform: none !important;
}

body#product .tabs > .nav-tabs .nav-link:hover,
body#product .tabs > .nav-tabs .nav-link:focus,
body#product .tabs > .nav-tabs .nav-link.js-product-nav-active:not(.active):hover,
body#product .tabs > .nav-tabs .nav-link.js-product-nav-active:not(.active):focus {
  color: #312e28 !important;
  background: var(--qm-soft-stone-hover-bg) !important;
  border-color: #b7aa91 !important;
  box-shadow:
    0 3px 6px rgba(44, 40, 33, .11),
    inset 0 1px 0 rgba(255, 255, 255, .42) !important;
  transform: none !important;
}

body#product .tabs > .nav-tabs .nav-link.active,
body#product .tabs > .nav-tabs .nav-link.active:hover,
body#product .tabs > .nav-tabs .nav-link.active:focus {
  color: var(--qm-soft-champagne-text) !important;
  background: var(--qm-soft-champagne-bg) !important;
  border-color: var(--qm-soft-champagne-border) !important;
  box-shadow:
    0 2px 6px rgba(49, 43, 31, .12),
    inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  transform: none !important;
}

/* Wishlists stay deliberately quiet as utility controls. */
.product-miniature .wishlist-button-add,
body.page-product .product-actions .wishlist-button-product {
  color: #716650 !important;
  background: #f5f2eb !important;
  border-color: #c9bea8 !important;
  box-shadow: 0 2px 5px rgba(44, 40, 33, .08) !important;
}

.product-miniature .wishlist-button-add:hover,
.product-miniature .wishlist-button-add:focus,
body.page-product .product-actions .wishlist-button-product:hover,
body.page-product .product-actions .wishlist-button-product:focus {
  color: #403a30 !important;
  background: #e9e3d7 !important;
  border-color: #b5a88e !important;
  box-shadow: 0 3px 6px rgba(44, 40, 33, .10) !important;
  transform: none !important;
}

/* ---------------------------------------------------------
   RDW KENTEKEN FORM - TARGETED ALIGNMENT CORRECTION
   The copy now forms one left-aligned hierarchy above the
   input row. Only this component receives a layout change.
--------------------------------------------------------- */

.qm-rdw-form {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 10px !important;
  background: #f4f1e9 !important;
  border-color: #d9d0be !important;
}

.qm-rdw-form__copy {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 2px !important;
  align-items: start !important;
}

.qm-rdw-form__copy label {
  margin: 0 !important;
  color: #39362f !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

.qm-rdw-form__copy small {
  margin: 0 !important;
  color: #756f63 !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

.qm-rdw-form__controls {
  grid-template-columns: minmax(260px, 480px) max-content !important;
  align-items: stretch !important;
  justify-content: start !important;
  gap: 10px !important;
}

.qm-rdw-form__controls input {
  min-width: 0 !important;
  color: #35322c !important;
  background: #fffdfa !important;
  border-color: #c9bea8 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
  box-shadow: inset 0 1px 2px rgba(50, 45, 36, .07) !important;
}

.qm-rdw-form__controls input::placeholder {
  color: #9a958b !important;
  font-weight: 600 !important;
  letter-spacing: .035em !important;
  opacity: 1 !important;
}

.qm-rdw-form__controls input:focus {
  border-color: #a79572 !important;
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(167, 149, 114, .14),
    inset 0 1px 2px rgba(50, 45, 36, .06) !important;
}

.qm-rdw-form__privacy {
  color: #787267 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

/* Reuse the shop's existing mobile breakpoint value. */
@media (max-width: 767.98px) {
  .qm-rdw-form__controls {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .qm-rdw-form__submit {
    width: 100% !important;
  }
}

/* ---------------------------------------------------------
   FOCUS AND DISABLED STATES
--------------------------------------------------------- */

.qm-rdw-form__submit:focus-visible,
.qm-vehicle-selector__submit:focus-visible,
body#category .products-sort-order .select-title:focus-visible,
.product-miniature .qm-product-card__cta:focus-visible,
.product-miniature .wishlist-button-add:focus-visible,
body.page-product .product-actions .add-to-cart:focus-visible,
body.page-product .product-actions .wishlist-button-product:focus-visible,
body.page-product .qmpsh-btn:focus-visible,
body.page-product .qmpsh-link-btn:focus-visible,
body.page-product .qmpsh-mobile-bar button:focus-visible,
body#product .qmpt-accessory-button:focus-visible,
body#product .tabs > .nav-tabs .nav-link:focus-visible {
  outline: 2px solid var(--qm-soft-focus) !important;
  outline-offset: 2px !important;
}

.qm-rdw-form__submit:disabled,
.qm-vehicle-selector__submit:disabled,
body.page-product .product-actions .add-to-cart:disabled,
body.page-product .qmpsh-btn:disabled,
body.page-product .qmpsh-link-btn:disabled,
body.page-product .qmpsh-mobile-bar button:disabled,
body#product .qmpt-accessory-button:disabled {
  color: #817b70 !important;
  background: #e3ded4 !important;
  border-color: #c8c0b2 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}

/* =========================================================
   QM VISUAL REFINEMENT V4 - LIGHT WARM ELEGANCE
   Added 2026-09-01 after on-device visual review.

   Rollback: remove only this complete V4 block, or restore
   custom.v3-before-light-elegance.css.

   Visual overrides only: no page layout, grid, dimensions or
   breakpoint values are changed in this block.
========================================================= */

:root {
  --qm-air-neutral-bg:
    linear-gradient(180deg, #f0ede6 0%, #e1dcd2 100%);
  --qm-air-neutral-hover-bg:
    linear-gradient(180deg, #e8e3da 0%, #d6cfc3 100%);
  --qm-air-neutral-text: #3d3a34;
  --qm-air-neutral-border: #c7bcaa;
  --qm-air-neutral-border-hover: #b1a48d;

  --qm-air-primary-bg:
    linear-gradient(180deg, #d2c7ad 0%, #beaf8f 100%);
  --qm-air-primary-hover-bg:
    linear-gradient(180deg, #dbd2bd 0%, #c8b99b 100%);
  --qm-air-primary-text: #353129;
  --qm-air-primary-border: #ad9d7d;
  --qm-air-primary-border-hover: #9d8d6e;

  --qm-air-porcelain-bg:
    linear-gradient(180deg, #f8f6f1 0%, #ede9e1 100%);
  --qm-air-porcelain-hover-bg:
    linear-gradient(180deg, #f1eee8 0%, #e2ddd3 100%);
  --qm-air-focus: rgba(139, 124, 94, .46);
}

/* ---------------------------------------------------------
   LIGHT WARM SECONDARY BUTTONS
   All formerly dark CTA surfaces now use the same soft
   greige treatment and dark readable text.
--------------------------------------------------------- */

.qm-rdw-form__submit,
body#category .products-sort-order .select-title,
.product-miniature .qm-product-card__cta,
body.page-product .qmpsh-btn--dark,
body.page-product .qmpsh-btn--light,
body.page-product .qmpsh-link-btn,
body.page-product .qmpsh-mobile-bar button,
body#product .qmpt-accessory-button {
  color: var(--qm-air-neutral-text) !important;
  background: var(--qm-air-neutral-bg) !important;
  border-color: var(--qm-air-neutral-border) !important;
  box-shadow:
    0 2px 5px rgba(51, 46, 38, .08),
    inset 0 1px 0 rgba(255, 255, 255, .52) !important;
  text-shadow: none !important;
  filter: none !important;
}

.qm-rdw-form__submit:hover,
.qm-rdw-form__submit:focus,
body#category .products-sort-order .select-title:hover,
body#category .products-sort-order .select-title:focus,
.product-miniature .qm-product-card__cta:hover,
.product-miniature .qm-product-card__cta:focus,
body.page-product .qmpsh-btn--dark:hover,
body.page-product .qmpsh-btn--dark:focus,
body.page-product .qmpsh-btn--light:hover,
body.page-product .qmpsh-btn--light:focus,
body.page-product .qmpsh-link-btn:hover,
body.page-product .qmpsh-link-btn:focus,
body.page-product .qmpsh-mobile-bar button:hover,
body.page-product .qmpsh-mobile-bar button:focus,
body#product .qmpt-accessory-button:hover,
body#product .qmpt-accessory-button:focus {
  color: #302d28 !important;
  background: var(--qm-air-neutral-hover-bg) !important;
  border-color: var(--qm-air-neutral-border-hover) !important;
  box-shadow:
    0 3px 6px rgba(51, 46, 38, .10),
    inset 0 1px 0 rgba(255, 255, 255, .44) !important;
  transform: none !important;
  filter: none !important;
}

/* Keep icons inside secondary controls equally quiet. */
body#category .products-sort-order .select-title .material-icons,
.product-miniature .qm-product-card__cta i,
.product-miniature .qm-product-card__cta .material-icons,
body.page-product .qmpsh-btn--dark svg,
body.page-product .qmpsh-btn--light svg,
body.page-product .qmpsh-link-btn svg,
body.page-product .qmpsh-mobile-bar button svg,
body#product .qmpt-accessory-button i,
body#product .qmpt-accessory-button .material-icons {
  color: currentColor !important;
  fill: currentColor !important;
}

/* ---------------------------------------------------------
   LIGHT MUTED PRIMARY
   Champagne remains the hierarchy cue, but is now closer to
   linen/taupe than metallic gold.
--------------------------------------------------------- */

.qm-vehicle-selector__submit,
body.page-product .product-actions .add-to-cart,
body.page-product .qmpsh-btn--gold,
body.page-product .qmpsh-mobile-bar .qmpsh-mobile-bar__buy {
  color: var(--qm-air-primary-text) !important;
  background: var(--qm-air-primary-bg) !important;
  border-color: var(--qm-air-primary-border) !important;
  box-shadow:
    0 2px 5px rgba(57, 50, 38, .09),
    inset 0 1px 0 rgba(255, 255, 255, .34) !important;
  text-shadow: none !important;
  filter: none !important;
}

.qm-vehicle-selector__submit:hover,
.qm-vehicle-selector__submit:focus,
body.page-product .product-actions .add-to-cart:hover,
body.page-product .product-actions .add-to-cart:focus,
body.page-product .qmpsh-btn--gold:hover,
body.page-product .qmpsh-btn--gold:focus,
body.page-product .qmpsh-mobile-bar .qmpsh-mobile-bar__buy:hover,
body.page-product .qmpsh-mobile-bar .qmpsh-mobile-bar__buy:focus {
  color: #2c2923 !important;
  background: var(--qm-air-primary-hover-bg) !important;
  border-color: var(--qm-air-primary-border-hover) !important;
  box-shadow:
    0 3px 6px rgba(57, 50, 38, .11),
    inset 0 1px 0 rgba(255, 255, 255, .38) !important;
  transform: none !important;
  filter: none !important;
}

/* ---------------------------------------------------------
   PRODUCT TABS
   Porcelain inactive state and linen-champagne active state.
--------------------------------------------------------- */

body#product .tabs > .nav-tabs .nav-link,
body#product .tabs > .nav-tabs .nav-link.js-product-nav-active:not(.active) {
  color: #403c35 !important;
  background: var(--qm-air-porcelain-bg) !important;
  border-color: #cec4b3 !important;
  box-shadow:
    0 2px 4px rgba(49, 45, 38, .065),
    inset 0 1px 0 rgba(255, 255, 255, .60) !important;
}

body#product .tabs > .nav-tabs .nav-link:hover,
body#product .tabs > .nav-tabs .nav-link:focus,
body#product .tabs > .nav-tabs .nav-link.js-product-nav-active:not(.active):hover,
body#product .tabs > .nav-tabs .nav-link.js-product-nav-active:not(.active):focus {
  color: #34312b !important;
  background: var(--qm-air-porcelain-hover-bg) !important;
  border-color: #b9ad98 !important;
  box-shadow:
    0 3px 5px rgba(49, 45, 38, .08),
    inset 0 1px 0 rgba(255, 255, 255, .50) !important;
  transform: none !important;
}

body#product .tabs > .nav-tabs .nav-link.active,
body#product .tabs > .nav-tabs .nav-link.active:hover,
body#product .tabs > .nav-tabs .nav-link.active:focus {
  color: var(--qm-air-primary-text) !important;
  background: var(--qm-air-primary-bg) !important;
  border-color: var(--qm-air-primary-border) !important;
  box-shadow:
    0 2px 5px rgba(57, 50, 38, .085),
    inset 0 1px 0 rgba(255, 255, 255, .34) !important;
  transform: none !important;
}

/* ---------------------------------------------------------
   HEADER - MEDIUM WARM GREIGE INSTEAD OF BLACK
   Geometry, menu behaviour and search dimensions unchanged.
--------------------------------------------------------- */

html body #header {
  background: #5a5852 !important;
}

html body #header .header-top {
  background:
    radial-gradient(circle at 20% -45%, rgba(225, 216, 196, .11) 0%, transparent 38%),
    linear-gradient(105deg, #66635d 0%, #56544f 52%, #615f59 100%) !important;
  box-shadow:
    0 6px 16px rgba(39, 36, 31, .16),
    inset 0 1px 0 rgba(255, 255, 255, .055) !important;
}

html body #header .header-top::before {
  opacity: .055 !important;
}

html body #header .header-top::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(207, 194, 164, .13) 18%,
    rgba(225, 216, 195, .40) 50%,
    rgba(207, 194, 164, .13) 82%,
    transparent 100%
  ) !important;
}

html body #header #search_widget .search {
  color: #38342d !important;
  background: linear-gradient(135deg, #d4cab2 0%, #bbaa88 100%) !important;
  text-shadow: none !important;
}

/* ---------------------------------------------------------
   PARTS HUB STATUS SURFACES
   Remove the two remaining isolated black blocks.
--------------------------------------------------------- */

.qm-vehicle-selector__badge {
  color: #5b5344 !important;
  background: var(--qm-air-neutral-bg) !important;
  box-shadow: inset 0 0 0 1px #c8bda9 !important;
  text-shadow: none !important;
}

.qm-selected-vehicle {
  color: #3d3932 !important;
  background: var(--qm-air-neutral-bg) !important;
  border-color: #c7bcaa !important;
  box-shadow:
    0 3px 8px rgba(51, 46, 38, .075),
    inset 0 1px 0 rgba(255, 255, 255, .46) !important;
}

.qm-selected-vehicle > div,
.qm-selected-vehicle strong {
  color: #35322c !important;
}

.qm-selected-vehicle small {
  color: #69635a !important;
}

.qm-selected-vehicle span,
.qm-selected-vehicle a {
  color: #71654d !important;
}

.qm-selected-vehicle a:hover,
.qm-selected-vehicle a:focus {
  color: #4d4638 !important;
}

/* ---------------------------------------------------------
   OPEN FAQ STATE
   The active accordion no longer becomes black/gold.
--------------------------------------------------------- */

body#product .qmpt-accordion-header[aria-expanded="true"] {
  color: #37332c !important;
  background: linear-gradient(135deg, #ddd4c1 0%, #cbbda0 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28) !important;
  text-shadow: none !important;
}

body#product .qmpt-accordion-header[aria-expanded="true"] .qmpt-accordion-icon {
  color: #665b46 !important;
  background: rgba(92, 81, 60, .07) !important;
  border-color: rgba(105, 92, 66, .42) !important;
}

body#product .qmpt-accordion-header[aria-expanded="true"] .qmpt-accordion-icon::before,
body#product .qmpt-accordion-header[aria-expanded="true"] .qmpt-accordion-icon::after {
  background: #665b46 !important;
}

/* The mobile sales bar keeps an anchor, without pure black. */
body.page-product .qmpsh-mobile-bar {
  background: linear-gradient(180deg, #625f58 0%, #504e49 100%) !important;
  border-top-color: rgba(207, 194, 164, .38) !important;
  box-shadow: 0 -5px 14px rgba(41, 38, 33, .15) !important;
}

/* ---------------------------------------------------------
   MOBILE MENU - COLOR ONLY
   Reuses the existing 767px breakpoint and preserves every
   mobile menu size, position and interaction rule.
--------------------------------------------------------- */

@media (max-width: 767px) {
  #mobile_top_menu_wrapper,
  .mobile-menu,
  .mobile-menu-wrapper,
  .js-top-menu-bottom {
    background: linear-gradient(180deg, #66635d 0%, #53514c 100%) !important;
    border-color: rgba(207, 194, 164, .34) !important;
    border-top-color: #b9aa8a !important;
    box-shadow: 0 10px 24px rgba(40, 37, 32, .22) !important;
  }

  #mobile_top_menu_wrapper .top-menu > li,
  .mobile-menu .top-menu > li {
    border-bottom-color: rgba(235, 229, 216, .14) !important;
  }

  #mobile_top_menu_wrapper .top-menu > li > a,
  .mobile-menu .top-menu > li > a,
  #mobile_top_menu_wrapper .navbar-toggler,
  #mobile_top_menu_wrapper .collapse-icons,
  #mobile_top_menu_wrapper .sub-menu-arrow,
  .mobile-menu .navbar-toggler,
  .mobile-menu .collapse-icons,
  #mobile_top_menu_wrapper .material-icons,
  #mobile_top_menu_wrapper i,
  .mobile-menu .material-icons,
  .mobile-menu i {
    color: #f1ece2 !important;
  }

  #mobile_top_menu_wrapper .top-menu > li > a:hover,
  #mobile_top_menu_wrapper .top-menu > li.current > a,
  #mobile_top_menu_wrapper .top-menu > li.open > a,
  .mobile-menu .top-menu > li > a:hover {
    color: #fffaf0 !important;
    background: rgba(255, 255, 255, .075) !important;
  }

  #mobile_top_menu_wrapper .sub-menu,
  #mobile_top_menu_wrapper .popover,
  #mobile_top_menu_wrapper .category-sub-menu,
  .mobile-menu .sub-menu,
  .mobile-menu .category-sub-menu {
    background: rgba(255, 255, 255, .075) !important;
  }
}

/* ---------------------------------------------------------
   FOCUS AND DISABLED STATES
--------------------------------------------------------- */

.qm-rdw-form__submit:focus-visible,
.qm-vehicle-selector__submit:focus-visible,
body#category .products-sort-order .select-title:focus-visible,
.product-miniature .qm-product-card__cta:focus-visible,
.product-miniature .wishlist-button-add:focus-visible,
body.page-product .product-actions .add-to-cart:focus-visible,
body.page-product .product-actions .wishlist-button-product:focus-visible,
body.page-product .qmpsh-btn:focus-visible,
body.page-product .qmpsh-link-btn:focus-visible,
body.page-product .qmpsh-mobile-bar button:focus-visible,
body#product .qmpt-accessory-button:focus-visible,
body#product .tabs > .nav-tabs .nav-link:focus-visible,
.qm-selected-vehicle a:focus-visible,
body#product .qmpt-accordion-header:focus-visible {
  outline: 2px solid var(--qm-air-focus) !important;
  outline-offset: 2px !important;
}

.qm-rdw-form__submit:disabled,
.qm-vehicle-selector__submit:disabled,
body.page-product .product-actions .add-to-cart:disabled,
body.page-product .qmpsh-btn:disabled,
body.page-product .qmpsh-link-btn:disabled,
body.page-product .qmpsh-mobile-bar button:disabled,
body#product .qmpt-accessory-button:disabled {
  color: #8a847a !important;
  background: #e6e2da !important;
  border-color: #cbc3b6 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}

/* =========================================================
   QM VISUAL REFINEMENT V5 - MOBILE MENU + SIGNATURE HEADERS
   Added 2026-09-01 after mobile and category-page review.

   Rollback: remove only this complete V5 block, or restore
   custom.v4-before-mobile-menu-card-headers.css.

   Scope:
   - repair the mobile accordion's visibility and scroll state;
   - improve mobile menu readability and rhythm;
   - repeat the logo/menu-bar signature on selected structural
     menu and card headers without darkening complete cards.
========================================================= */

:root {
  --qm-signature-bg:
    radial-gradient(circle at 18% -55%, rgba(230, 221, 201, .13) 0%, transparent 40%),
    linear-gradient(105deg, #6a6761 0%, #575550 54%, #63605a 100%);
  --qm-signature-hover-bg:
    linear-gradient(105deg, #75716a 0%, #625f59 100%);
  --qm-signature-text: #faf7f1;
  --qm-signature-muted: #f0e7d5;
  --qm-signature-line: rgba(217, 204, 176, .34);
  --qm-menu-paper: #f4f1ea;
  --qm-menu-paper-deep: #e8e2d7;
  --qm-menu-ink: #403d36;
}

/* ---------------------------------------------------------
   MOBILE MENU REPAIR AND TOUCH-UP
   High specificity is intentional: older rules use both
   #header and #mobile_top_menu_wrapper with !important.
--------------------------------------------------------- */

@media (max-width: 767px) {
  html body #header #mobile_top_menu_wrapper {
    width: 100% !important;
    max-height: calc(100vh - 128px) !important;
    max-height: calc(100dvh - 128px) !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    background: var(--qm-signature-bg) !important;
    border: 1px solid var(--qm-signature-line) !important;
    border-top: 0 !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 12px 26px rgba(39, 36, 31, .22) !important;
    color: var(--qm-signature-text) !important;
  }

  html body.qm-mobile-menu-open #header #mobile_top_menu_wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body #header #mobile_top_menu_wrapper #_mobile_top_menu,
  html body #header #mobile_top_menu_wrapper ul.top-menu {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Compact, readable main rows. */
  html body #header #mobile_top_menu_wrapper ul.top-menu[data-depth="0"] > li {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(244, 239, 228, .14) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body #header #mobile_top_menu_wrapper ul.top-menu[data-depth="0"] > li:last-child {
    border-bottom: 0 !important;
  }

  html body #header #mobile_top_menu_wrapper ul.top-menu[data-depth="0"] > li > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin: 0 !important;
    padding: 0 58px 0 17px !important;
    box-sizing: border-box !important;
    color: var(--qm-signature-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 7px !important;
    font-size: 15.5px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: .025em !important;
    text-align: left !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body #header #mobile_top_menu_wrapper ul.top-menu[data-depth="0"] > li.open > a,
  html body #header #mobile_top_menu_wrapper ul.top-menu[data-depth="0"] > li.current > a,
  html body #header #mobile_top_menu_wrapper ul.top-menu[data-depth="0"] > li > a:hover,
  html body #header #mobile_top_menu_wrapper ul.top-menu[data-depth="0"] > li > a:focus {
    color: #fffaf0 !important;
    background: rgba(255, 255, 255, .09) !important;
    box-shadow: inset 3px 0 0 #c9b992 !important;
  }

  /* Move the arrow to the right; DOM order previously placed it left. */
  html body #header #mobile_top_menu_wrapper li > a > .float-xs-right {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    float: none !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #header #mobile_top_menu_wrapper li > a > .float-xs-right .navbar-toggler,
  html body #header #mobile_top_menu_wrapper li > a > .float-xs-right .collapse-icons {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #eee3ca !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body #header #mobile_top_menu_wrapper li > a > .float-xs-right .material-icons {
    color: #eee3ca !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  /* Closed collapses occupy no invisible space. */
  html body #header #mobile_top_menu_wrapper .collapse:not(.show):not(.in):not(.collapsing) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Open collapses must be visible as well as display:block. */
  html body #header #mobile_top_menu_wrapper .collapse.show,
  html body #header #mobile_top_menu_wrapper .collapse.in,
  html body #header #mobile_top_menu_wrapper li.open > .sub-menu {
    position: static !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  html body #header #mobile_top_menu_wrapper .collapsing {
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
  }

  html body #header #mobile_top_menu_wrapper .collapse.show *,
  html body #header #mobile_top_menu_wrapper .collapse.in *,
  html body #header #mobile_top_menu_wrapper li.open > .sub-menu * {
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Light inset submenu: strong contrast without a harsh black panel. */
  html body #header #mobile_top_menu_wrapper .popover.sub-menu.collapse.show,
  html body #header #mobile_top_menu_wrapper .popover.sub-menu.collapse.in,
  html body #header #mobile_top_menu_wrapper li.open > .popover.sub-menu {
    padding: 6px 8px 8px !important;
    background: linear-gradient(180deg, #f6f3ed 0%, #ece6dc 100%) !important;
    border: 0 !important;
    border-left: 3px solid #b9a982 !important;
    border-radius: 7px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65) !important;
    color: var(--qm-menu-ink) !important;
  }

  html body #header #mobile_top_menu_wrapper .sub-menu ul.top-menu,
  html body #header #mobile_top_menu_wrapper .collapse ul.top-menu {
    background: transparent !important;
    color: var(--qm-menu-ink) !important;
  }

  html body #header #mobile_top_menu_wrapper .sub-menu li,
  html body #header #mobile_top_menu_wrapper ul[data-depth="1"] > li,
  html body #header #mobile_top_menu_wrapper ul[data-depth="2"] > li,
  html body #header #mobile_top_menu_wrapper ul[data-depth="3"] > li {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(83, 75, 62, .11) !important;
  }

  html body #header #mobile_top_menu_wrapper .sub-menu li:last-child {
    border-bottom: 0 !important;
  }

  html body #header #mobile_top_menu_wrapper .sub-menu li > a,
  html body #header #mobile_top_menu_wrapper ul[data-depth="1"] > li > a,
  html body #header #mobile_top_menu_wrapper ul[data-depth="2"] > li > a,
  html body #header #mobile_top_menu_wrapper ul[data-depth="3"] > li > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 50px 10px 13px !important;
    box-sizing: border-box !important;
    color: var(--qm-menu-ink) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    font-size: 14.5px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: normal !important;
  }

  html body #header #mobile_top_menu_wrapper ul[data-depth="2"] > li > a,
  html body #header #mobile_top_menu_wrapper ul[data-depth="3"] > li > a {
    padding-left: 25px !important;
    color: #565149 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  html body #header #mobile_top_menu_wrapper .sub-menu li.open > a,
  html body #header #mobile_top_menu_wrapper .sub-menu li.current > a,
  html body #header #mobile_top_menu_wrapper .sub-menu li > a:hover,
  html body #header #mobile_top_menu_wrapper .sub-menu li > a:focus {
    color: #302d28 !important;
    background: #dfd6c6 !important;
  }

  html body #header #mobile_top_menu_wrapper .sub-menu li > a > .float-xs-right .navbar-toggler,
  html body #header #mobile_top_menu_wrapper .sub-menu li > a > .float-xs-right .collapse-icons,
  html body #header #mobile_top_menu_wrapper .sub-menu .material-icons {
    color: #74674f !important;
  }

  html body #header #mobile_top_menu_wrapper a:focus-visible,
  html body #header #mobile_top_menu_wrapper .navbar-toggler:focus-visible,
  html body #header #mobile_top_menu_wrapper .collapse-icons:focus-visible {
    outline: 2px solid rgba(226, 214, 187, .72) !important;
    outline-offset: -2px !important;
  }
}

/* ---------------------------------------------------------
   CATEGORY SIDEBAR CARDS
   Full-width signature headers with light, quiet bodies.
--------------------------------------------------------- */

@media (min-width: 768px) {
  body#category .block-categories,
  body#category .qm-category-brands {
    overflow: hidden !important;
    background: #f8f6f1 !important;
    border-color: rgba(151, 137, 108, .24) !important;
    box-shadow: 0 7px 18px rgba(47, 43, 36, .055) !important;
  }

  body#category .block-categories .category-top-menu > li:first-child > a {
    display: block !important;
    margin: -17px -18px 14px !important;
    padding: 12px 16px !important;
    color: var(--qm-signature-text) !important;
    background: var(--qm-signature-bg) !important;
    border-bottom: 1px solid var(--qm-signature-line) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .055em !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    text-shadow: none !important;
  }

  body#category .block-categories .category-sub-menu > li[data-depth="0"] {
    border-bottom: 1px solid rgba(96, 87, 72, .10) !important;
  }

  body#category .block-categories .category-sub-menu > li[data-depth="0"]:last-child {
    border-bottom: 0 !important;
  }

  body#category .block-categories .category-sub-menu > li[data-depth="0"] > a {
    color: #45413a !important;
    font-weight: 600 !important;
  }

  body#category .block-categories .category-sub-menu > li[data-depth="0"].is-open > a,
  body#category .block-categories .category-sub-menu a.current,
  body#category .block-categories .category-sub-menu a:hover,
  body#category .block-categories .category-sub-menu a:focus {
    color: #5d523f !important;
    background: rgba(190, 175, 143, .15) !important;
    border-radius: 5px !important;
  }

  body#category .block-categories .collapse-icons,
  body#category .block-categories .arrows {
    color: #75684f !important;
    background: rgba(190, 175, 143, .11) !important;
    border-radius: 6px !important;
  }

  body#category .qm-category-brands__title {
    margin: -15px -13px 12px !important;
    padding: 11px 14px !important;
    color: var(--qm-signature-text) !important;
    background: var(--qm-signature-bg) !important;
    border-bottom: 1px solid var(--qm-signature-line) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: .055em !important;
    line-height: 1.35 !important;
  }

  body#category .qm-category-brands__title a {
    color: inherit !important;
    text-decoration: none !important;
  }

  body#category .qm-category-brands__content a {
    color: #4a463f !important;
  }

  body#category .qm-category-brands__content a:hover,
  body#category .qm-category-brands__content a:focus {
    color: #665a43 !important;
  }
}

/* ---------------------------------------------------------
   SELECTED STRUCTURAL CARD HEADERS
   Only the header strip receives the signature treatment.
--------------------------------------------------------- */

body#category #content-wrapper .block-category > h1,
body#category #subcategories > .subcategory-heading {
  padding: 11px 15px !important;
  color: var(--qm-signature-text) !important;
  background: var(--qm-signature-bg) !important;
  border: 1px solid var(--qm-signature-line) !important;
  border-radius: 9px !important;
  box-shadow:
    0 3px 8px rgba(45, 41, 35, .10),
    inset 0 1px 0 rgba(255, 255, 255, .055) !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  text-shadow: none !important;
}

.qm-vehicle-selector__head {
  padding: 12px 14px !important;
  background: var(--qm-signature-bg) !important;
  border: 1px solid var(--qm-signature-line) !important;
  border-radius: 9px !important;
  box-shadow:
    0 3px 8px rgba(45, 41, 35, .09),
    inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

.qm-vehicle-selector__head .qm-vehicle-selector__eyebrow {
  color: var(--qm-signature-muted) !important;
}

.qm-vehicle-selector__head .qm-vehicle-selector__title {
  color: var(--qm-signature-text) !important;
}

.qm-vehicle-selector__head .qm-vehicle-selector__badge {
  color: #f3e8ce !important;
  background: rgba(255, 255, 255, .09) !important;
  box-shadow: inset 0 0 0 1px rgba(226, 214, 187, .38) !important;
}

body.page-product .qmpsh-card__header {
  padding: 13px 16px !important;
  color: var(--qm-signature-text) !important;
  background: var(--qm-signature-bg) !important;
  border: 1px solid var(--qm-signature-line) !important;
  border-radius: 9px !important;
  box-shadow:
    0 3px 8px rgba(45, 41, 35, .09),
    inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

body.page-product .qmpsh-card__header .qmpsh-card__eyebrow {
  color: var(--qm-signature-muted) !important;
}

body.page-product .qmpsh-card__header .qmpsh-card__title {
  color: var(--qm-signature-text) !important;
}

body.page-product .qmpsh-card__header .qmpsh-card__intro {
  color: #eee9df !important;
}

body#category #content-wrapper .block-category > h1:focus-visible,
body#category #subcategories > .subcategory-heading:focus-visible,
.qm-vehicle-selector__head a:focus-visible,
body.page-product .qmpsh-card__header a:focus-visible {
  outline: 2px solid rgba(226, 214, 187, .72) !important;
  outline-offset: 2px !important;
}

/* =========================================================
   QM VISUAL REFINEMENT V7 - ATTACHED CARD HEADER STRIPS
   Added 2026-09-01 after measured category-page review.

   Rollback: remove only this complete V7 block, or restore
   custom.v7-before-attached-card-headers.css.

   Alignment-only refinement: the Home, category-intro and
   Subcategorieen header strips now meet the inside of their
   card border, like the existing Merken card. Menu behaviour,
   grids, widths and existing breakpoints remain unchanged.
========================================================= */

@media (min-width: 768px) {
  /* The category plus-menu keeps its complete structure and
     behaviour; only its Home strip reaches the card edge. */
  html body#category #left-column .block-categories {
    overflow: hidden !important;
  }

  html body#category #left-column .block-categories
  .category-top-menu > li:first-child > a {
    display: block !important;
    margin: -17px -18px 14px !important;
    padding: 12px 16px !important;
    color: var(--qm-signature-text) !important;
    background: var(--qm-signature-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--qm-signature-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .055em !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    text-shadow: none !important;
  }

  /* These cards clip the square strip to their own rounded
     top corners, exactly as the Merken module already does. */
  html body#category #content-wrapper .block-category,
  html body#category #subcategories {
    overflow: hidden !important;
  }

  html body#category #content-wrapper .block-category > h1 {
    margin: -22px -24px 13px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--qm-signature-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html body#category #subcategories > .subcategory-heading {
    margin: -20px -22px 17px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--qm-signature-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* The same attached construction is retained when the category
   cards stack on a true mobile viewport. Existing mobile padding
   values are mirrored; no new breakpoint is introduced. */
@media (max-width: 767.98px) {
  html body#category #left-column .block-categories,
  html body#category #content-wrapper .block-category,
  html body#category #subcategories {
    overflow: hidden !important;
  }

  html body#category #left-column .block-categories
  .category-top-menu > li:first-child > a {
    display: block !important;
    margin: -14px -15px 13px !important;
    padding: 11px 14px !important;
    color: var(--qm-signature-text) !important;
    background: var(--qm-signature-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--qm-signature-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .055em !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    text-shadow: none !important;
  }

  html body#category #content-wrapper .block-category > h1 {
    margin: -16px -16px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--qm-signature-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html body#category #subcategories > .subcategory-heading {
    margin: -16px -14px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--qm-signature-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* =========================================================
   QM VISUAL REFINEMENT V8 - CONTROLLED TYPOGRAPHY SYSTEM
   Added 2026-09-01 after full CSS and live computed-style audit.

   Rollback: remove only this complete V8 block, or restore
   custom.v8-before-typography-system.css.

   One text family and three primary type roles:
   12px utility/navigation, 15px body/controls, 24px titles.
   Icon fonts remain untouched. Existing compact desktop-menu
   safety sizes at narrower desktop widths remain available.
========================================================= */

:root {
  --qm-type-family: "Manrope", Arial, sans-serif;
  --qm-type-utility: 12px;
  --qm-type-body: 15px;
  --qm-type-title: 24px;
  --qm-type-leading-utility: 1.35;
  --qm-type-leading-body: 1.55;
  --qm-type-leading-title: 1.22;
}

/* ---------------------------------------------------------
   ONE TEXT FAMILY
   Material Icons, Font Awesome and other icon glyph classes
   are deliberately not included in this selector group.
--------------------------------------------------------- */

html body,
html body button,
html body input,
html body select,
html body textarea,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  font-family: var(--qm-type-family) !important;
}

/* ---------------------------------------------------------
   BASE TEXT ROLE - 15PX
--------------------------------------------------------- */

html body {
  font-size: var(--qm-type-body) !important;
  line-height: var(--qm-type-leading-body) !important;
}

html body main,
html body main p,
html body main li,
html body main dt,
html body main dd,
html body main td,
html body main th,
html body main label,
html body main input,
html body main select,
html body main textarea,
html body main button {
  font-size: var(--qm-type-body) !important;
  line-height: var(--qm-type-leading-body) !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------
   TITLE ROLE - 24PX
   Weight creates hierarchy without introducing more sizes.
--------------------------------------------------------- */

html body main h1,
html body main h2,
html body main h3,
html body main h4,
html body main h5,
html body main h6,
html body #footer h1,
html body #footer h2,
html body #footer h3,
html body #footer h4,
html body #footer h5,
html body #footer h6 {
  font-size: var(--qm-type-title) !important;
  line-height: var(--qm-type-leading-title) !important;
  font-weight: 600 !important;
  letter-spacing: -.018em !important;
  text-shadow: none !important;
}

/* ---------------------------------------------------------
   HEADER TYPOGRAPHY
   Preserve the compact Manrope treatment the user selected.
--------------------------------------------------------- */

html body #header .header-nav #contact-link,
html body #header .header-nav .language-selector,
html body #header .header-nav .currency-selector,
html body #header .header-nav .user-info,
html body #header .header-nav .blockcart {
  font-size: var(--qm-type-utility) !important;
  line-height: var(--qm-type-leading-utility) !important;
  font-weight: 600 !important;
  letter-spacing: .012em !important;
}

@media (min-width: 1200px) {
  html body #header #_desktop_top_menu
  .top-menu[data-depth="0"] > li > a {
    font-size: var(--qm-type-utility) !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    letter-spacing: .012em !important;
  }
}

html body #header #search_widget input,
html body #header #search_widget input[type="text"],
html body #header #search_widget input[type="search"] {
  font-size: var(--qm-type-body) !important;
  line-height: var(--qm-type-leading-body) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 767.98px) {
  html body #header #mobile_top_menu_wrapper
  .top-menu[data-depth="0"] > li > a,
  html body #header #mobile_top_menu_wrapper
  .sub-menu li > a,
  html body #header #mobile_top_menu_wrapper
  ul[data-depth="1"] > li > a,
  html body #header #mobile_top_menu_wrapper
  ul[data-depth="2"] > li > a,
  html body #header #mobile_top_menu_wrapper
  ul[data-depth="3"] > li > a {
    font-size: var(--qm-type-body) !important;
    line-height: 1.35 !important;
  }
}

/* ---------------------------------------------------------
   BREADCRUMBS - QUIET, ALIGNED UTILITY RAIL
--------------------------------------------------------- */

html body nav.breadcrumb,
html body nav.breadcrumb li,
html body nav.breadcrumb a,
html body nav.breadcrumb span {
  font-size: var(--qm-type-utility) !important;
  line-height: var(--qm-type-leading-utility) !important;
  font-weight: 500 !important;
  letter-spacing: .005em !important;
  text-transform: none !important;
}

html body nav.breadcrumb {
  color: #777269 !important;
}

html body nav.breadcrumb ol {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  list-style: none !important;
}

html body nav.breadcrumb li {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #89847b !important;
  white-space: nowrap !important;
}

html body nav.breadcrumb li::after {
  margin: 0 8px !important;
  color: #b1aa9e !important;
  font-size: var(--qm-type-utility) !important;
  line-height: 1 !important;
}

html body nav.breadcrumb li:last-child {
  flex: 0 1 auto !important;
  overflow: hidden !important;
  color: #79746b !important;
}

html body nav.breadcrumb li:last-child::after {
  content: "" !important;
  margin: 0 !important;
}

html body nav.breadcrumb a {
  color: #5d5952 !important;
  text-decoration: none !important;
}

html body nav.breadcrumb a:hover,
html body nav.breadcrumb a:focus {
  color: #7b6740 !important;
}

html body nav.breadcrumb li:last-child span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body#product #wrapper nav.breadcrumb {
  min-height: 17px !important;
  margin-top: 13px !important;
  margin-bottom: 11px !important;
  padding: 0 !important;
}

@media (max-width: 767.98px) {
  html body#product #wrapper nav.breadcrumb li {
    flex-shrink: 1 !important;
  }

  html body#product #wrapper nav.breadcrumb li a,
  html body#product #wrapper nav.breadcrumb li a span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* ---------------------------------------------------------
   CATEGORY, SIDEBAR AND CATALOGUE TYPOGRAPHY
--------------------------------------------------------- */

html body#category #left-column .block-categories
.category-top-menu > li:first-child > a,
html body#category #left-column .block-categories .h6,
html body#category .qm-category-brands__title {
  font-size: var(--qm-type-utility) !important;
  line-height: var(--qm-type-leading-utility) !important;
  font-weight: 700 !important;
  letter-spacing: .055em !important;
}

html body#category #left-column .category-sub-menu a {
  font-size: var(--qm-type-body) !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

html body#category .qm-category-brands__content a {
  font-size: var(--qm-type-utility) !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

html body#category #content-wrapper .block-category > h1,
html body#category #subcategories > .subcategory-heading {
  font-size: var(--qm-type-title) !important;
  line-height: var(--qm-type-leading-title) !important;
  font-weight: 600 !important;
  letter-spacing: -.018em !important;
}

html body#category #category-description,
html body#category #category-description p,
html body#category #category-description li,
html body#category #category-description span,
html body#category #category-description div {
  font-size: var(--qm-type-body) !important;
  line-height: var(--qm-type-leading-body) !important;
  letter-spacing: 0 !important;
}

html body#category #subcategories .subcategories-list h5,
html body#category #subcategories .subcategory-name,
html body .product-miniature .product-title,
html body .product-miniature .product-title a,
html body .product-miniature .product-price-and-shipping,
html body .product-miniature .product-price {
  font-size: var(--qm-type-body) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

html body#category #subcategories .subcategory-name,
html body .product-miniature .product-title,
html body .product-miniature .product-title a {
  font-weight: 600 !important;
}

html body#category #products .products-selection,
html body#category #products .products-selection p,
html body#category #products .products-selection span,
html body#category #products .products-selection button,
html body#category #products .products-selection a,
html body#category .products-sort-order .select-title {
  font-size: var(--qm-type-body) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

html body .product-miniature .qm-product-card__cta {
  font-size: var(--qm-type-utility) !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: .015em !important;
}

/* ---------------------------------------------------------
   PRODUCT HERO - ONE UNMISTAKABLE PRODUCT TITLE
--------------------------------------------------------- */

html body#product #main .product-container
> .col-md-6 > h1.h1 {
  position: relative !important;
  margin: 0 0 12px !important;
  padding: 0 0 11px !important;
  color: #24211c !important;
  font-size: var(--qm-type-title) !important;
  line-height: var(--qm-type-leading-title) !important;
  font-weight: 700 !important;
  letter-spacing: -.022em !important;
  text-transform: none !important;
  text-shadow: none !important;
}

html body#product #main .product-container
> .col-md-6 > h1.h1::after {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 42px !important;
  height: 1px !important;
  content: "" !important;
  background: #b8a477 !important;
}

html body#product #main .product-prices,
html body#product #main .product-prices .current-price,
html body#product #main .product-prices .current-price span,
html body#product #main .product-prices .current-price-value {
  font-size: var(--qm-type-body) !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

html body#product #main .product-prices
.tax-shipping-delivery-label,
html body#product #main .product-prices small {
  font-size: var(--qm-type-utility) !important;
  line-height: var(--qm-type-leading-utility) !important;
  font-weight: 400 !important;
}

/* The rich-text sales subtitle is valid content, but it must
   not visually compete with the actual product H1 above it. */
html body#product #main .product-information
> .product-description h1,
html body#product #main .product-information
> [id^="product-description-short-"] h1 {
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: #35312b !important;
  font-size: var(--qm-type-body) !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body#product #main .product-information
> .product-description p,
html body#product #main .product-information
> [id^="product-description-short-"] p {
  font-size: var(--qm-type-body) !important;
  line-height: var(--qm-type-leading-body) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------
   PRODUCT CONTROLS, SALES HUB AND CONTENT TABS
--------------------------------------------------------- */

html body.page-product .qmpsh-card__eyebrow,
html body.page-product .qmpsh-payment__label,
html body.page-product .qmpsh-payment,
html body.page-product .qmpsh-trust,
html body.page-product .qmpsh-card__trust,
html body.page-product .product-reference,
html body.page-product .product-quantities,
html body.page-product .product-variants-item .control-label {
  font-size: var(--qm-type-utility) !important;
  line-height: var(--qm-type-leading-utility) !important;
  letter-spacing: .015em !important;
}

html body.page-product .qmpsh-card__title {
  font-size: var(--qm-type-title) !important;
  line-height: var(--qm-type-leading-title) !important;
  font-weight: 600 !important;
  letter-spacing: -.018em !important;
}

html body.page-product .qmpsh-card__intro,
html body.page-product .qmpsh-btn,
html body.page-product .qmpsh-link-btn,
html body.page-product .qmpsh-mobile-bar button,
html body.page-product .product-variants-item,
html body.page-product .product-variants-item select,
html body.page-product .product-add-to-cart .add-to-cart,
html body.page-product .product-availability,
html body.page-product .product-review-list-reviews,
html body.page-product .product-comments-additional-info button {
  font-size: var(--qm-type-body) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

html body#product .product-information > .tabs .nav-link,
html body#product .product-information > .tabs .tab-pane,
html body#product .product-information > .tabs .tab-pane p,
html body#product .product-information > .tabs .tab-pane li,
html body#product .product-information > .tabs .tab-pane td,
html body#product .product-information > .tabs .tab-pane th,
html body#product .qmpt-accordion-header,
html body#product .qmpt-accordion-content,
html body#product .qmpt-accordion-content p,
html body#product .qmpt-accordion-content li {
  font-size: var(--qm-type-body) !important;
  line-height: var(--qm-type-leading-body) !important;
  letter-spacing: 0 !important;
}

html body#product .product-information > .tabs .tab-pane h1,
html body#product .product-information > .tabs .tab-pane h2,
html body#product .product-information > .tabs .tab-pane h3,
html body#product .product-information > .tabs .tab-pane h4,
html body#product .product-information > .tabs .tab-pane h5,
html body#product .product-information > .tabs .tab-pane h6 {
  font-size: var(--qm-type-title) !important;
  line-height: var(--qm-type-leading-title) !important;
  font-weight: 600 !important;
  letter-spacing: -.018em !important;
}

/* ---------------------------------------------------------
   PARTS HUB, TRUST SURFACES, FOOTER AND COOKIE BAR
--------------------------------------------------------- */

html body .qm-vehicle-selector__eyebrow,
html body .qm-rdw-form__label,
html body .qm-vehicle-selector label,
html body .qm-vehicle-selector__badge,
html body .qm-selected-vehicle small,
html body .qm-trustbar,
html body .qm-trustbar span,
html body .qm-trustbar strong {
  font-size: var(--qm-type-utility) !important;
  line-height: var(--qm-type-leading-utility) !important;
}

html body .qm-vehicle-selector__title {
  font-size: var(--qm-type-title) !important;
  line-height: var(--qm-type-leading-title) !important;
  font-weight: 600 !important;
  letter-spacing: -.018em !important;
}

html body .qm-rdw-form input,
html body .qm-rdw-form button,
html body .qm-vehicle-selector input,
html body .qm-vehicle-selector select,
html body .qm-vehicle-selector button,
html body .qm-selected-vehicle,
html body .qm-selected-vehicle strong,
html body .qm-selected-vehicle a {
  font-size: var(--qm-type-body) !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

html body #footer,
html body #footer p,
html body #footer li,
html body #footer a,
html body #footer small {
  font-size: var(--qm-type-utility) !important;
  line-height: var(--qm-type-leading-body) !important;
  letter-spacing: 0 !important;
}

html body #footer input,
html body #footer select,
html body #footer textarea,
html body #footer button {
  font-size: var(--qm-type-body) !important;
  line-height: 1.35 !important;
}

html body .qmcc,
html body .qmcc p,
html body .qmcc a,
html body .qmcc button,
html body .qmcc__body,
html body .qmcc__links {
  font-size: var(--qm-type-utility) !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

html body .qmcc__title {
  font-size: var(--qm-type-body) !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------
   FINAL SPECIFICITY PASS
   Normalize nested text nodes that older module rules size
   independently. Icon glyph sizing remains deliberately free.
--------------------------------------------------------- */

@media (min-width: 1200px) {
  html body #header #_desktop_top_menu
  .top-menu[data-depth="0"] > li > a > span:not(.material-icons) {
    font-size: inherit !important;
    line-height: inherit !important;
  }
}

@media (max-width: 767.98px) {
  html body #header #mobile_top_menu_wrapper
  .top-menu a > span:not(.material-icons) {
    font-size: inherit !important;
    line-height: inherit !important;
  }
}

html body main h1 > span:not(.material-icons),
html body main h1 > strong,
html body main h2 > span:not(.material-icons),
html body main h2 > strong,
html body main h3 > span:not(.material-icons),
html body main h3 > strong,
html body main h4 > span:not(.material-icons),
html body main h4 > strong,
html body main h5 > span:not(.material-icons),
html body main h5 > strong,
html body main h6 > span:not(.material-icons),
html body main h6 > strong,
html body #footer h1 > span:not(.material-icons),
html body #footer h1 > strong,
html body #footer h2 > span:not(.material-icons),
html body #footer h2 > strong,
html body #footer h3 > span:not(.material-icons),
html body #footer h3 > strong,
html body #footer h4 > span:not(.material-icons),
html body #footer h4 > strong,
html body #footer h5 > span:not(.material-icons),
html body #footer h5 > strong,
html body #footer h6 > span:not(.material-icons),
html body #footer h6 > strong {
  font-size: inherit !important;
  line-height: inherit !important;
}

html body#product #main .product-information
> .product-description h1 > span:not(.material-icons),
html body#product #main .product-information
> .product-description h1 > strong,
html body#product #main .product-information
> [id^="product-description-short-"] h1 > span:not(.material-icons),
html body#product #main .product-information
> [id^="product-description-short-"] h1 > strong {
  font-size: inherit !important;
  line-height: inherit !important;
}

html body.page-product .qmpsh-btn > span:not(.material-icons),
html body.page-product .qmpsh-btn > strong,
html body.page-product .qmpsh-link-btn > span:not(.material-icons),
html body.page-product .qmpsh-link-btn > strong,
html body.page-product .qmpsh-card__title > span:not(.material-icons),
html body.page-product .qmpsh-card__title > strong {
  font-size: inherit !important;
  line-height: inherit !important;
}

html body.page-product .qmpsh-note,
html body.page-product .qmpsh-note__provider,
html body.page-product .qmpsh-note__terms,
html body.page-product .qmpsh-note__sep {
  font-size: var(--qm-type-utility) !important;
  line-height: var(--qm-type-leading-utility) !important;
  letter-spacing: 0 !important;
}

html body.page-product .qmpsh-note strong,
html body.page-product .qmpsh-note__amount {
  font-size: var(--qm-type-body) !important;
  line-height: 1.35 !important;
}

html body.page-product .product-actions
.product-variants-item > .control-label,
html body.page-product .product-actions
.product-variants-item > label {
  font-size: var(--qm-type-utility) !important;
  line-height: var(--qm-type-leading-utility) !important;
}

html body.page-product .product-actions
.product-variants-item select,
html body.page-product .product-actions
.product-variants-item .form-control-select,
html body.page-product .product-actions
.product-variants-item .attribute-name {
  font-size: var(--qm-type-body) !important;
  line-height: 1.35 !important;
}

html body#product .product-information > .tabs .nav-link > span:not(.material-icons),
html body#product .qmpt-accordion-header > span:not(.material-icons) {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* The newsletter label is a section title, not footer fine print. */
html body #blockEmailSubscription_displayFooterBefore
#block-newsletter-label {
  font-size: var(--qm-type-title) !important;
  line-height: var(--qm-type-leading-title) !important;
  font-weight: 600 !important;
  letter-spacing: -.018em !important;
}

html body #blockEmailSubscription_displayFooterBefore
form input[type="email"],
html body #blockEmailSubscription_displayFooterBefore
form input[type="submit"] {
  font-size: var(--qm-type-body) !important;
  line-height: 1.35 !important;
}

html body #blockEmailSubscription_displayFooterBefore form p {
  font-size: var(--qm-type-utility) !important;
  line-height: var(--qm-type-leading-body) !important;
}

/* =========================================================
   QM VISUAL REFINEMENT V9 - PRODUCT RHYTHM + SALES HIERARCHY
   Added 2026-09-02 after measured desktop/mobile review.

   Rollback: remove only this complete V9 block, or restore
   custom.v9-before-breadcrumb-sales-hub.css.

   Scope:
   - stop the desktop hero card from overlapping breadcrumbs;
   - add safe right breathing room to the hero summary;
   - simplify the Sales Hub hierarchy without removing actions;
   - give iDEAL in3 and SprayPay a dedicated finance surface.
========================================================= */

:root {
  --qm-v9-ink: #302e29;
  --qm-v9-muted: #706a60;
  --qm-v9-line: #ddd4c4;
  --qm-v9-paper: #faf8f3;
  --qm-v9-paper-deep: #f1ede5;
  --qm-v9-finance-line: #c7b68f;
  --qm-v9-finance-accent: #8a7449;
  --qm-v9-finance-bg:
    linear-gradient(180deg, #fbf8f1 0%, #f2ecdf 100%);
}

/* ---------------------------------------------------------
   PRODUCT HERO - BREADCRUMB CLEARANCE + TEXT BREATHING ROOM
   The existing decorative card extends 18px above its row.
   Matching desktop clearance prevents physical overlap.
--------------------------------------------------------- */

@media (min-width: 992px) {
  html body#product #wrapper nav.breadcrumb {
    margin-bottom: 29px !important;
  }

  html body.page-product #main > .row
  > .col-md-6:nth-child(2) > h1.h1,
  html body.page-product #main > .row
  > .col-md-6:nth-child(2) > .product-prices,
  html body.page-product #main > .row
  > .col-md-6:nth-child(2) > .product-information
  > [id^="product-description-short-"] {
    margin-right: 16px !important;
  }
}

/* ---------------------------------------------------------
   SALES HUB HEADER - REMOVE THE NESTED DARK PANEL
--------------------------------------------------------- */

html body.page-product .qmpsh-card__header {
  margin: 0 0 16px !important;
  padding: 0 0 16px !important;
  color: var(--qm-v9-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--qm-v9-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html body.page-product .qmpsh-card__header
.qmpsh-card__eyebrow {
  color: var(--qm-v9-finance-accent) !important;
  text-shadow: none !important;
}

html body.page-product .qmpsh-card__header
.qmpsh-card__title {
  color: var(--qm-v9-ink) !important;
  text-shadow: none !important;
}

html body.page-product .qmpsh-card__header
.qmpsh-card__intro {
  max-width: 76ch !important;
  color: var(--qm-v9-muted) !important;
  text-shadow: none !important;
}

/* ---------------------------------------------------------
   PRIMARY ACTIONS - TWO DECISIONS + ONE QUIET CONTACT ROUTE
--------------------------------------------------------- */

html body.page-product .qmpsh-actions--primary {
  gap: 10px !important;
}

@media (min-width: 992px) {
  html body.page-product .qmpsh-actions--primary {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(170px, .66fr) !important;
  }
}

html body.page-product .qmpsh-actions--primary
.qmpsh-btn--gold {
  color: #353129 !important;
  background:
    linear-gradient(180deg, #d5cbb5 0%, #c1b18f 100%) !important;
  border-color: #ad9d7d !important;
  box-shadow:
    0 2px 5px rgba(57, 50, 38, .09),
    inset 0 1px 0 rgba(255, 255, 255, .38) !important;
}

html body.page-product .qmpsh-actions--primary
.qmpsh-btn--gold:hover,
html body.page-product .qmpsh-actions--primary
.qmpsh-btn--gold:focus {
  color: #2c2923 !important;
  background:
    linear-gradient(180deg, #ded6c5 0%, #cabd9f 100%) !important;
  border-color: #9d8d6e !important;
  box-shadow:
    0 3px 6px rgba(57, 50, 38, .11),
    inset 0 1px 0 rgba(255, 255, 255, .42) !important;
}

html body.page-product .qmpsh-actions--primary
.qmpsh-btn--dark {
  color: #35322d !important;
  background:
    linear-gradient(180deg, #f8f6f1 0%, #ece8df 100%) !important;
  border-color: #bfb5a4 !important;
  box-shadow:
    0 2px 4px rgba(49, 45, 38, .065),
    inset 0 1px 0 rgba(255, 255, 255, .62) !important;
}

html body.page-product .qmpsh-actions--primary
.qmpsh-btn--dark:hover,
html body.page-product .qmpsh-actions--primary
.qmpsh-btn--dark:focus {
  color: #302d28 !important;
  background:
    linear-gradient(180deg, #f1eee8 0%, #e2ddd3 100%) !important;
  border-color: #aa9d88 !important;
  box-shadow:
    0 3px 5px rgba(49, 45, 38, .08),
    inset 0 1px 0 rgba(255, 255, 255, .54) !important;
}

html body.page-product .qmpsh-actions--primary
.qmpsh-btn--whatsapp {
  color: #514c43 !important;
  background: rgba(255, 255, 255, .42) !important;
  border-color: #d0c7b8 !important;
  box-shadow: none !important;
}

html body.page-product .qmpsh-actions--primary
.qmpsh-btn--whatsapp:hover,
html body.page-product .qmpsh-actions--primary
.qmpsh-btn--whatsapp:focus {
  color: #35312b !important;
  background: #f3efe7 !important;
  border-color: #b9ad99 !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   SECONDARY ACTIONS - RETAIN FUNCTIONS, REMOVE BUTTON NOISE
--------------------------------------------------------- */

html body.page-product .qmpsh-actions--secondary {
  gap: 0 !important;
  margin-top: 14px !important;
  padding-top: 11px !important;
  border-top: 1px solid var(--qm-v9-line) !important;
}

html body.page-product .qmpsh-actions--secondary
.qmpsh-link-btn {
  min-height: 40px !important;
  padding: 8px 12px !important;
  color: #655f55 !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid var(--qm-v9-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: var(--qm-type-utility) !important;
  line-height: var(--qm-type-leading-utility) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  transform: none !important;
}

html body.page-product .qmpsh-actions--secondary
.qmpsh-link-btn:nth-child(2) {
  color: #6c5934 !important;
  font-weight: 700 !important;
}

html body.page-product .qmpsh-actions--secondary
.qmpsh-link-btn:last-child {
  border-right: 0 !important;
}

html body.page-product .qmpsh-actions--secondary
.qmpsh-link-btn:hover,
html body.page-product .qmpsh-actions--secondary
.qmpsh-link-btn:focus {
  color: #35312b !important;
  background: #f3efe7 !important;
  border-color: var(--qm-v9-line) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ---------------------------------------------------------
   FINANCE SURFACE - IDEAL IN3 + SPRAYPAY AS REAL CHOICES
--------------------------------------------------------- */

html body.page-product .qmpsh-notes {
  margin-top: 16px !important;
  padding: 13px 14px !important;
  background: var(--qm-v9-finance-bg) !important;
  border: 1px solid var(--qm-v9-finance-line) !important;
  border-left: 3px solid var(--qm-v9-finance-accent) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

html body.page-product .qmpsh-note {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 13px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--qm-v9-ink) !important;
}

html body.page-product .qmpsh-note__label {
  display: flex !important;
  align-items: center !important;
  align-self: stretch !important;
  padding-right: 13px !important;
  color: #6d5b38 !important;
  border-right: 1px solid #d7c9ac !important;
  font-size: var(--qm-type-utility) !important;
  line-height: var(--qm-type-leading-utility) !important;
  font-weight: 700 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html body.page-product .qmpsh-note__values {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    max-content
    minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html body.page-product .qmpsh-note__value {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 4px 7px !important;
  min-width: 0 !important;
  padding: 8px 10px !important;
  color: #39352f !important;
  background: rgba(255, 255, 255, .68) !important;
  border: 1px solid #ded3bd !important;
  border-radius: 8px !important;
}

html body.page-product .qmpsh-note__provider {
  color: #665838 !important;
  font-size: var(--qm-type-utility) !important;
  line-height: var(--qm-type-leading-utility) !important;
  font-weight: 700 !important;
}

html body.page-product .qmpsh-note__value strong {
  color: #292722 !important;
  font-size: var(--qm-type-body) !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

html body.page-product .qmpsh-note__terms,
html body.page-product .qmpsh-note__sep {
  color: #7a7368 !important;
  font-size: var(--qm-type-utility) !important;
  line-height: var(--qm-type-leading-utility) !important;
  font-weight: 500 !important;
}

html body.page-product .qmpsh-note__sep {
  align-self: center !important;
  padding: 0 1px !important;
}

/* ---------------------------------------------------------
   MOBILE - SAME HIERARCHY, COMFORTABLE TOUCH TARGETS
--------------------------------------------------------- */

@media (max-width: 767.98px) {
  html body.page-product .qmpsh-card__header {
    margin-bottom: 14px !important;
    padding-bottom: 14px !important;
  }

  html body.page-product .qmpsh-actions--primary {
    gap: 8px !important;
  }

  html body.page-product .qmpsh-actions--secondary {
    margin-top: 10px !important;
    padding-top: 8px !important;
  }

  html body.page-product .qmpsh-actions--secondary
  .qmpsh-link-btn {
    min-height: 44px !important;
    padding: 10px 8px !important;
    justify-content: flex-start !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--qm-v9-line) !important;
  }

  html body.page-product .qmpsh-actions--secondary
  .qmpsh-link-btn:last-child {
    border-bottom: 0 !important;
  }

  html body.page-product .qmpsh-notes {
    margin-top: 14px !important;
    padding: 12px !important;
  }

  html body.page-product .qmpsh-note {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  html body.page-product .qmpsh-note__label {
    padding: 0 0 9px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #d7c9ac !important;
    white-space: normal !important;
  }

  html body.page-product .qmpsh-note__values {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  html body.page-product .qmpsh-note__value {
    justify-content: flex-start !important;
  }

  html body.page-product .qmpsh-note__sep {
    padding: 0 !important;
    text-align: center !important;
  }
}