:is(#brand-counter, #cat-counter) { position: relative; bottom: 10px; aspect-ratio: 1/1; font-size: 1rem; display: inline-flex; justify-content: center; align-items: center; width: 30px; height: auto; background-color: var(--secondary-color); color: var(--white); border-radius: 100%;}

/* ============================================
		TOP
=============================================*/


/* ============================================
		NAVIGATIE
=============================================*/


/* ============================================
		SLIDER/BANNER
=============================================*/

.container-fluid.banner { position: relative; overflow: hidden;}
.container-fluid.banner:has(img)::after { content: ''; position: absolute; right: 0; bottom: 0; aspect-ratio: 295/255; width: auto; height: 100%; background: var(--primary-color); clip-path: var(--triangle-up); transform: translateX(50%); z-index: 2;}
.container-fluid.banner:has(img) .image {}
.container-fluid.banner:has(img) .image::before { content: ''; position: absolute; width: 100%; height: 100%; background: #11111159;}
.container-fluid.banner:has(img) .image img { min-height: 250px;}
.container-fluid.banner:has(img) .content {}
.container-fluid.banner:has(img) .content .text {}
.container-fluid.banner:has(img) .content .text :is(h1,.h1) { text-wrap: balance;}
.container-fluid.banner:not(:has(img)) .content .text :is(h1,.h1) { color: var(--secondary-color); margin-bottom: 0;}

/* ============================================
		CONTENT
=============================================*/

.container-fluid.content > .row:first-child { margin-top: calc(var(--row-space) / 2);}
.container-fluid.content > .row:first-child:has(.breadcrumb) { margin-bottom: calc(var(--row-space) / 2);}

/* ==== Pagina's: producten ==== */
.block.product.cat-cards {}
.block.product.cat-cards .item { position: relative;}
.block.product.cat-cards .item .image { position: relative;}
.block.product.cat-cards .item .image::before { content: ''; position: absolute; width: 100%; height: 100%; background: var(--img-gradient25); z-index: 1;}
.block.product.cat-cards .item .image img { width: 100%;}
.block.product.cat-cards .item .content { position: absolute; inset: 0; width: 100%; height: 100%; padding: 36px 24px; display: flex; justify-content: space-between; align-items: flex-end; z-index: 2;}
.block.product.cat-cards .item .content hgroup { flex-direction: column-reverse; width: 100%; gap: 6px;}
.block.product.cat-cards .item .content hgroup h3 { font-size: clamp(1.125rem, -1.512rem + 4.96vw, 1.55rem); max-width: calc(100% - 44px); white-space: normal; overflow: visible; hyphens: auto; overflow-wrap: break-word;}
.block.product.cat-cards .item .content hgroup p { font-weight: 700;}
.block.product.cat-cards .item .content .btn { position: absolute; bottom: 35px; right: 24px; aspect-ratio: 1/1; background: var(--secondary-color); width: 32px; height: auto; display: flex; justify-content: center; align-items: center; padding: 0; transition: all 0.5s;}
.block.product.cat-cards .item .content .btn::after { background: var(--white); transform: rotate(-90deg); transition: all 0.5s;}

/* Hover */
.block.product.cat-cards a:is(:hover, :focus-visible) .item .content hgroup h3 { width: 11ch;}
.block.product.cat-cards a:is(:hover, :focus-visible) .item .content .btn { width: 55px; background: var(--primary-color);}
.block.product.cat-cards a:is(:hover, :focus-visible) .item .content .btn::after { background: var(--white); transform: rotate(0deg);}

/* ==== Pagina's: producten ==== */
.block.list.logos .brand-cards { position: relative; padding-bottom: 24px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; max-height: var(--brand-full, none); overflow: hidden; transition: max-height 0.5s ease;}
.block.list.logos .brand-cards::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 105px; background: var(--white-gradient); opacity: 0; pointer-events: none; transition: opacity 0.5s ease;}
.block.list.logos .brand-cards .item { position: relative; width: auto; transition: opacity 0.3s ease;}
.block.list.logos .brand-cards .item .image img { width: 100%; height: auto;}
.block.list.logos .brand-control { display: flex; justify-content: center; gap: 12px;}
.block.list.logos .brand-control button { color: var(--primary-color); font-size: 1rem; font-weight: 500; display: flex; flex-direction: column; align-items: center; text-transform: uppercase; background: transparent; border: unset; outline: unset;}
.block.list.logos .brand-control button::after { content: ''; font-family: var(--font-awesome-sharp); display: flex; justify-content: center; align-items: center; aspect-ratio: 1/1; width: 45px; height: auto; border: 1px solid var(--primary-color); border-radius: 100%; transition: all 0.5s;}
.block.list.logos .brand-control button.more::after { content: var(--arrow-down);}
.block.list.logos .brand-control button.less::after { content: var(--arrow-up);}

/* Hover */
.block.list.logos .brand-control button:is(:hover, :focus-visible)::after { background: var(--primary-color); color: var(--white);}

/* mutations */
.block.list.logos.closed .brand-cards { max-height: var(--brand-closed, none);}
.block.list.logos.closed .brand-cards::after { opacity: 1;}
.block.list.logos:not(.closed) .brand-control .more { display: none;}
.block.list.logos.closed .brand-control { margin-top: 24px;}
.block.list.logos.closed .brand-control .less { display: none;}

/* ==== Pagina's: producten, voorraad ==== */
.product-filter-grid {}
.product-filter-grid a { text-decoration: none;}
.product-filter-grid .product-cards { display: grid; grid-template-columns: repeat(3, 1fr);}
.product-filter-grid .product-cards .item.open { display: flex; justify-content: flex-end; position: relative; grid-column: 1 / -1;}
.product-filter-grid .product-cards .item.open .content { background: var(--black); text-transform: uppercase; color: var(--white); position: relative; padding: 36px; width: fit-content; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 20px; z-index: 3;}
.product-filter-grid .product-cards .item.open .content::before { content: ''; position: absolute; height: 100%; width: auto; right: 100%; bottom: 0; aspect-ratio: 1/2; background: var(--black); clip-path: var(--triangle-90-bottom-right);}
.product-filter-grid .product-cards .item.open .content h3 { max-width: 350px; text-wrap: balance; text-align: end; margin: 0;}
.product-filter-grid .product-cards .item.open .content .text {}
.product-filter-grid .product-cards .item.open .content .text p { margin: 0;}
.product-filter-grid .product-cards .item.open .image { position: absolute; inset: 0; width: 100%; height: 100%;}
.product-filter-grid .product-cards .item.open .image::before { content: ''; position: absolute; width: 100%; height: 100%; inset: 0; background: var(--img-gradient80);}
.product-filter-grid .product-cards .item.open .image img { width: 100%; height: 100%;}

/* Hover */
.product-filter-grid .content-top .sort:has(select:is(:hover, :focus-visible)) { border-color: var(--primary-color); & ::after { transform: translateY(-50%) translateY(3px);}}

/* ==== Pagina's: producten doorklik ==== */

.product-page { display: flex; flex-direction: column; gap: 40px;}

/* === Product head === */
.product-page .product-head {}
.product-page .product-head .container {}
.product-page .product-head .container .head-grid { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); grid-template-rows: 1fr 100px; grid-template-areas: "slider info" "thumbs price"; gap: 24px; align-items: stretch;}
.product-page .product-head .container .head-grid .head-info { grid-area: info; min-width: 0;}
.product-page .product-head .container .head-grid .head-price { grid-area: price; min-width: 0;}
.product-page .product-head .container .head-grid .slider-col.ms { grid-area: slider; min-width: 0;}
.product-page .product-head .container .head-grid .slider-col.ts { grid-area: thumbs; min-width: 0;}

/* == Slider == */
.product-page .product-head .container .head-grid .slider-col.ms { position: relative;}
.product-page .product-head .container .head-grid .slider-col.ms .note { position: absolute; top: 0; left: 0; background: var(--primary-color); color: var(--white); text-transform: uppercase; font-size: 1.125rem; padding: 8px 22px; z-index: 2;}
.product-page .product-head .slider-col {}
.product-page .product-head .slider-col .swiper {}

/* Hoofdslider */
.product-page .product-head .slider-col .main-slider { position: relative; border: 1px solid var(--black);}
.product-page .product-head .slider-col .main-slider .swiper-wrapper {}
.product-page .product-head .slider-col .main-slider .swiper-wrapper .swiper-slide { margin: 0;}
.product-page .product-head .slider-col .main-slider .swiper-wrapper .swiper-slide a { display: block; width: 100%; text-decoration: none;}
.product-page .product-head .slider-col .main-slider .swiper-wrapper .swiper-slide a img { display: block; width: 100%; height: 100%; aspect-ratio: 840 / 560; object-fit: cover;}
.product-page .product-head .slider-col .main-slider .swiper-wrapper .swiper-slide img.placeholder { opacity: 1; object-fit: contain; padding: 48px; background: var(--black); width: 100%; height: auto; aspect-ratio: 840/560; cursor: unset;}
.product-page .product-head .slider-col .main-slider .swiper-nav { position: absolute; bottom: 0; left: 0; width: 100%; height: 55px; z-index: 3; pointer-events: none; display: flex; justify-content: space-between;}
.product-page .product-head .slider-col .main-slider .swiper-nav :is(.swiper-button-prev, .swiper-button-next) { position: static; width: auto; height: 100%; margin: 0; pointer-events: auto; background: var(--black); color: var(--white); aspect-ratio: 1/1; transition: all 0.5s;}
.product-page .product-head .slider-col .main-slider .swiper-nav :is(.swiper-button-prev, .swiper-button-next)::after { content: ''; background: var(--white); width: 9px; height: 13px;}
.product-page .product-head .slider-col .main-slider .swiper-nav :is(.swiper-button-prev, .swiper-button-next) svg { display: none;}
.product-page .product-head .slider-col .main-slider .swiper-nav .swiper-button-prev::after { clip-path: var(--triangle-left);}
.product-page .product-head .slider-col .main-slider .swiper-nav .swiper-button-next::after { clip-path: var(--triangle-right);}
.product-page .product-head .slider-col .main-slider .swiper-slide a { display: block; overflow: hidden;}
.product-page .product-head .slider-col .main-slider .swiper-slide a img { transition: scale 0.5s ease;}
.product-page .product-head .slider-col .main-slider .swiper-slide a:is(:hover, :focus-visible) img { scale: 1.05;}

/* Thumbnails */
.product-page .product-head .slider-col .thumb-slider {}
.product-page .product-head .slider-col .thumb-slider .swiper-wrapper {}
.product-page .product-head .slider-col .thumb-slider .swiper-wrapper .swiper-slide { margin: 0; cursor: pointer; opacity: 0.5; transition: opacity 0.5s;}
.product-page .product-head .slider-col .thumb-slider .swiper-wrapper .swiper-slide img { display: block; width: auto; height: 100px; aspect-ratio: 2 / 1; object-fit: cover;}
.product-page .product-head .slider-col .thumb-slider .swiper-wrapper .swiper-slide-thumb-active { opacity: 1;}

/* Hover */
.product-page .product-head .slider-col .thumb-slider .swiper-wrapper .swiper-slide:is(:hover, :focus-visible) { opacity: 1;}
.product-page .product-head .slider-col .main-slider .swiper-nav :is(.swiper-button-prev, .swiper-button-next):is(:hover, :focus-visible) { background: var(--primary-color);}

/* == Info == */
.product-page .product-head .head-info { padding: 40px 30px; background: var(--black); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 24px; z-index: 0;}
.product-page .product-head .head-info::after { content: ''; background: var(--dark-grey-accent); position: absolute; bottom: 0; right: 0; width: 200px; height: auto; aspect-ratio: 200/345; clip-path: var(--triangle-90-bottom-right); z-index: -1;}
.product-page .product-head .head-info hgroup {}
.product-page .product-head .head-info hgroup h1 {}
.product-page .product-head .head-info hgroup h1::after { content: ''; position: relative; display: inline-block; width: clamp(12.96px, 3.15vw, 27px); height: clamp(11.16px, 2.71vw, 23px); clip-path: var(--triangle-up); background: var(--primary-color); transform: rotate(0deg); margin-left: 6px;}
.product-page .product-head .head-info hgroup p:not(:empty) { padding: 6px 12px; background: var(--primary-color); color: var(--white); font-size: 1.125rem; font-weight: 600; text-transform: uppercase; width: fit-content;}
.product-page .product-head .head-info .text {}
.product-page .product-head .head-info .text ul { display: flex; flex-direction: column; gap: 12px;}
.product-page .product-head .head-info .text ul li { line-height: 1; font-weight: 300;}
.product-page .product-head .head-info .text ul li::before { content: var(--check); color: var(--primary-color);}
.product-page .product-head .head-info .text * { color: var(--white);}
.product-page .product-head .head-info::after {}

/* == Price == */
.product-page .product-head .head-price { padding: 24px; background-color: var(--primary-color); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px;}
.product-page .product-head .head-price hgroup { flex-direction: column;}
.product-page .product-head .head-price hgroup h2 { color: var(--white); font-size: clamp(1.125rem, 0.97rem + 1.12vw, 1.25rem); &::after { display: none;}}
.product-page .product-head .head-price hgroup p { font-size: 1rem; color: var(--white);}
.product-page .product-head .head-price .btn:is(:hover, :focus-visible) { background: var(--white); color: var(--primary-color); &::after { background: var(--primary-color);}}

/* === Product informatie === */
.product-page .product-information {}
.product-page .product-information h2 { font-size: 2.1875rem;}
.product-page .product-information h2::after { width: clamp(12.96px, 3.15vw, 27px); height: clamp(11.16px, 2.71vw, 23px);}
.description-section .block.content.is-clamped { position: relative; max-height: 360px; overflow: hidden;}
.description-section .block.content.is-clamped::after { content: ""; position: absolute; inset: auto 0 0 0; height: 120px; background: linear-gradient(to bottom, transparent, var(--grey) 85%); pointer-events: none;}
.description-section .description-more-btn { margin-top: 24px;}
.desc-modal { width: min(var(--container-width), 100% - 32px); max-width: none;}
.desc-modal .desc-modal__eyebrow { display: block; margin-bottom: 4px; font-family: var(--primary-font); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-color);}
.desc-modal .specs-modal__header { padding-bottom: 24px; border-bottom: 1px solid var(--grey2);}
.specs-modal.desc-modal .specs-modal__body { padding-top: 32px; color: var(--text-color);}
.desc-modal .desc-modal__text { font-size: 1.0625rem; color: var(--text-color);}
.desc-modal .desc-modal__text p { margin: 0 0 1em; line-height: 1.75;}
.desc-modal .desc-modal__text strong { font-weight: 700;}
.desc-modal .desc-modal__text :is(h2, h3, h4) { margin: 2em 0 0.5em; font-family: var(--primary-font); font-size: 1.1875rem; font-weight: 800; line-height: 1.3; text-transform: none; color: var(--text-color);}
.desc-modal .desc-modal__text :is(h2, h3, h4)::before, .desc-modal .desc-modal__text :is(h2, h3, h4)::after { display: none;}
.desc-modal .desc-modal__text > :first-child { margin-top: 0;}
.desc-modal .desc-modal__text > :last-child { margin-bottom: 0;}
.desc-modal .desc-modal__footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; padding: 20px 40px; border-top: 1px solid var(--grey2); background: var(--grey);}
.desc-modal .desc-modal__footer p { margin: 0; font-family: var(--primary-font); font-weight: 700; color: var(--text-color);}

@media (max-width: 767.98px) {

  .desc-modal .desc-modal__footer { padding: 16px 20px;}

}

.product-page .product-information .information-wrapper { padding: 45px; background: var(--grey);}
.product-page .product-information .information-wrapper .description-section { padding-right: 24px;}
.product-page .product-information .information-wrapper .description-section h2 {}
.product-page .product-information .information-wrapper .description-section .block.content {}
.product-page .product-information .information-wrapper .specs-section { height: 100%; display: flex; flex-direction: column;}
.product-page .product-information .information-wrapper .specs-section h2 {}
.product-page .product-information .information-wrapper .specs-section table { width: 100%; margin-bottom: 24px;}
.product-page .product-information .information-wrapper .specs-section table tbody {}
.product-page .product-information .information-wrapper .specs-section table tbody tr { border-bottom: 1px solid var(--grey2);}
.product-page .product-information .information-wrapper .specs-section table tbody tr th { padding: 12px 0; color: var(--secondary-color); font-weight: 300;}
.product-page .product-information .information-wrapper .specs-section table tbody tr td { padding: 12px 0; color: var(--grey4);}
.product-page .product-information .information-wrapper .specs-section .more-file { display: flex; justify-content: space-between;}
.product-page .product-information .information-wrapper .specs-section .more-file button { display: flex; flex-direction: row-reverse; font-size: 1rem; font-weight: 500;}
.product-page .product-information .information-wrapper .specs-section .more-file button::after { background: var(--primary-color); transform: rotate(90deg);}
.product-page .product-information .information-wrapper .specs-section .more-file a { font-size: 1rem;}

/*Mutations*/
.product-page .product-information .information-wrapper .specs-section table tbody tr.is-hidden { display: none;}
.product-page .product-information .information-wrapper .specs-section .more-file { flex: 1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; margin-top: 24px;}
.product-page .product-information .information-wrapper .specs-section .more-file .btn {}
.product-page .product-information .information-wrapper .specs-section .more-file button[aria-expanded="true"]::after { background: var(--primary-color); transform: rotate(-90deg);}

/* ====== Pagina's: Voorraad detail (specificaties pop-up) ====== */
.specs-modal { max-height: 85vh; padding: 0; border: 0; border-top: 4px solid var(--primary-color); border-radius: var(--border-radius); background: var(--white); box-shadow: var(--box-shadow); overflow: hidden;}
.specs-modal[open] { display: flex; flex-direction: column; animation: specsModalIn 0.3s ease-out;}
.specs-modal::backdrop { background: var(--overlay-strong);}
.specs-modal .specs-modal__header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 32px 40px 16px;}
.specs-modal .specs-modal__header h2 { margin: 0; font-family: var(--primary-font); font-size: 2.1875rem; font-weight: 800; text-transform: uppercase; color: var(--text-color);}
.specs-modal .specs-modal__header .specs-modal__close { flex-shrink: 0; width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; padding: 0; border: 0; border-radius: var(--border-radius); background: var(--primary-color); color: var(--white); font-size: 0; cursor: pointer; transition: background 0.3s;}
.specs-modal .specs-modal__header .specs-modal__close::after { content: var(--times); font-family: var(--font-awesome); font-size: 1.25rem; font-weight: 300;}
.specs-modal .specs-modal__body { flex: 1; overflow-y: auto; padding: 0 40px 40px; scrollbar-width: thin; scrollbar-color: var(--primary-color) var(--grey);}
.specs-modal .specs-modal__body table { width: 100%;}
.specs-modal .specs-modal__body table tbody {}
.specs-modal .specs-modal__body table tbody tr { border-bottom: 1px solid var(--grey2);}
.specs-modal .specs-modal__body table tbody tr th { padding: 12px 24px 12px 0; font-family: var(--primary-font); font-weight: 300; color: var(--secondary-color);}
.specs-modal .specs-modal__body table tbody tr td { padding: 12px 0; color: var(--grey4);}

@keyframes specsModalIn {
  from { opacity: 0; transform: translateY(24px);}
  to { opacity: 1; transform: none;}
}

/* Hover */
.specs-modal .specs-modal__header .specs-modal__close:is(:hover, :focus-visible) { background: var(--primary-color-alt);}

/* === Product More === */
.product-page .product-more { padding-block: 40px;}
.product-page .product-more .product-cards { grid-template-columns: repeat(4, 1fr);}

/* === Product Dealer === */
.dealer-card { --img-w: 7; --content-w: 5;}
.dealer-card .dealer-item { position: relative; display: flex; flex-direction: row-reverse;}
.dealer-card .dealer-item .content { padding: 36px 12px 36px 0; flex: 0 0 calc(100% / 12 * var(--content-w)); background: var(--secondary-color); display: flex; flex-direction: column; justify-content: center;}
.dealer-card .dealer-item .content hgroup {}
.dealer-card .dealer-item .content hgroup h2 { font-size: clamp(2.5rem, 5.4vw, 5rem); font-weight: 800; color: var(--white);}
.dealer-card .dealer-item .content hgroup p { font-size: clamp(1.25rem, 2.7vw, 2.5rem); font-weight: 800; color: var(--white);}
.dealer-card .dealer-item .content .text { color: var(--white);}
.dealer-card .dealer-item .content .text ul { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px;}
.dealer-card .dealer-item .content .text ul li { line-height: 1;}
.dealer-card .dealer-item .content .text ul li::before { content: ''; width: 9px; height: 14px; background: var(--primary-color); clip-path: var(--triangle-right);}
.dealer-card .dealer-item .content .text p :last-child { margin: 0;}
.dealer-card .dealer-item .content .text .btn-primary:is(:hover, :focus-visible) { border-color: var(w);}
.dealer-card .dealer-item .image { position: relative; flex: 0 0 calc(100% / 12 * var(--img-w));}
.dealer-card .dealer-item .image img { height: 100%;}
.dealer-card .dealer-item .image::after { content: ''; position: absolute; bottom: 0; right: -1px; clip-path: var(--triangle-90-bottom-right); aspect-ratio: 18/31; width: auto; height: 100%; background-color: var(--secondary-color); z-index: 1;}

/* ==== Pagina's: producten, voorraad ==== */
.brand-filter-cards .block.list.logos { padding: 20px 0;}

/* ==== Pagina's: voorraad, nieuws ==== */
[class*="-filter-grid"] .content-top { display: flex; justify-content: space-between; align-items: flex-start;}
[class*="-filter-grid"] .content-top h2 { font-size: 2.5rem;}
[class*="-filter-grid"] .content-top h2::after { content: ''; position: relative; display: inline-block; width: clamp(12.96px, 3.15vw, 27px); height: clamp(11.16px, 2.71vw, 23px); clip-path: var(--triangle-up); background: var(--primary-color); transform: rotate(0deg); margin-left: 6px;}
[class*="-filter-grid"] .content-top .sort { position: relative; display: inline-flex; align-items: center; border: 1px solid var(--dark-grey-accent); background: var(--white);}
[class*="-filter-grid"] .content-top .sort::after { content: ''; width: 13px; height: 9px; background: var(--secondary-color); clip-path: var(--triangle-down); position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; transition: transform 0.3s;}
[class*="-filter-grid"] .content-top .sort select { appearance: none; -webkit-appearance: none; width: 100%; min-width: 190px; height: 48px; border: 0; border-radius: 0; background: transparent; padding: 0 46px 0 20px; font-family: var(--primary-font); font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.32px; color: var(--black); cursor: pointer; outline: none;}
[class*="-filter-grid"] .content-top .sort select option { font-family: var(--primary-font); font-size: 1rem; text-transform: none; color: var(--black); background: var(--white);}
[class*="-filter-grid"] .content-top .sort select option[value="placeholder"] { color: var(--grey4);}
[class*="-filter-grid"] .filters { --gap-space: 24px; padding: 24px 40px; display: flex; flex-direction: column; gap: var(--gap-space); position: relative; top: 0; background-color: var(--grey);}
[class*="-filter-grid"] .filters .filter-section { display: flex; flex-direction: column; gap: 10px;}
[class*="-filter-grid"] .filters .filter-section:not(:last-child) { padding-bottom: var(--gap-space);}
[class*="-filter-grid"] .filters .filter-section h4 { font-size: 1.125rem; font-weight: 700; text-transform: none; padding-bottom: 8px; margin-bottom: 0; border-bottom: 1px solid var(--grey3); order: -1;}
[class*="-filter-grid"] .filters .filter-section .search { background: var(--white); display: flex; justify-content: space-between; width: 100%;}
[class*="-filter-grid"] .filters .filter-section .search input { background: transparent; border: unset; padding: 6px 12px; font-size: 1rem;}
[class*="-filter-grid"] .filters .filter-section .search button { background: transparent; border: unset; padding: 6px 12px;}
[class*="-filter-grid"] .filters .filter-section .filter { display: flex; align-items: baseline; flex-wrap: wrap;}
[class*="-filter-grid"] .filters .filter-section .filter.is-empty { opacity: 0.5;}
[class*="-filter-grid"] .filters .filter-section .filter input { display: none;}
[class*="-filter-grid"] .filters .filter-section .filter input + label { flex: 1 1 0; min-width: 0; font-size: 1rem; font-weight: 500; color: var(--darkblue); display: flex; align-items: center; gap: 24px; text-transform: capitalize;}
[class*="-filter-grid"] .filters .filter-section .filter input + label::before { content: var(--check); font-family: var(--font-awesome); font-size: 0.4375rem; line-height: 1; color: var(--grey); display: inline-flex; flex-shrink: 0; justify-content: center; align-items: center; width: 15px; height: 15px; border: 1px solid var(--muted-color);}
[class*="-filter-grid"] .filters .filter-section .filter input:checked + label::before { background-color: var(--primary-color); border-color: var(--primary-color);}
[class*="-filter-grid"] .filters .filter-section .filter .amount { flex: 0 0 auto; margin-left: 8px; white-space: nowrap; line-height: 1; font-size: 1rem; text-align: end;}
[class*="-filter-grid"] .filters .filter-section .filter .amount::before { content: '('; display: inline-block;}
[class*="-filter-grid"] .filters .filter-section .filter .amount::after { content: ')'; display: inline-block;}
[class*="-filter-grid"] .filters .filter-section .filter-more { display: flex; gap: 6px; align-items: center; padding: 0; width: fit-content; background: transparent; color: var(--primary-color); border: unset;}
[class*="-filter-grid"] .filters .filter-section .filter-more::before { content: ''; display: inline-block; width: 13px; height: 9px; clip-path: var(--triangle-down); background: var(--primary-color); transition: all 0.5s;}
[class*="-filter-grid"] .filters .filter-section .filter-more[aria-expanded="true"]::before { transform: rotate(180deg);}
[class*="-filter-grid"] .filters .filter-section .filter[hidden] { display: none;}

/*Toggle knop balk*/
.filters-toggle-bar { margin-bottom: 20px;}
.btn-filters { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1.5px solid var(--text-color); color: var(--text-color); padding: 10px 20px; font-size: 1rem; font-weight: 600; border-radius: var(--border-radius-xl); cursor: pointer;}
.btn-filters::after { content: '';}
.btn-filters:hover { background: var(--text-color); color: var(--white);}

/*Overlay*/
.filters-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 998;}
.filters-modal-overlay.open { display: block;}
.filters-drawer { position: fixed; top: 0; left: -100%; width: min(400px, 90vw); height: 100vh; overflow-y: auto; background: var(--bg-color); z-index: 999; transition: left 0.3s ease; padding: 0 0 40px;}
.filters-drawer.open { left: 0;}
.filters-drawer-header { display: flex; flex-direction: column; gap: 24px; padding: 20px 24px; font-size: 1.125rem; font-weight: 700; position: sticky; top: 0; background: var(--white); z-index: 1;}
.filters-drawer-header .title { display: flex; justify-content: space-between; gap: 24px;}
.filters-drawer-header .title h3 { color: var(--primary-color); font-weight: 700; margin: 0;}
.filters-drawer-header .title button { all: unset; font-size: 1rem; color: var(--dark-grey-accent); text-decoration: underline; cursor: pointer;}
.filters-drawer-header .current-filters { display: flex; flex-wrap: wrap; gap: 6px;}
.filters-drawer-header .current-filters .active-filter-tag { padding: 9px 12px; display: flex; gap: 12px; background: var(--primary-color); color: var(--white);}
.filters-drawer-header .current-filters .active-filter-tag .filter-name {}
.filters-drawer-header .current-filters .active-filter-tag button { all: unset; cursor: pointer;}
.filters-close { background: none; border: none; font-size: 1.25rem; cursor: pointer; color: var(--text-color); padding: 4px;}
.filters-drawer .filters { padding: 24px;}

/*Scroll lock*/
body.filters-open { overflow: hidden;}

/*Boven xl: aside en drawer normaal tonen, overlay/toggle verbergen*/
@media (min-width: 1400px) {

  .filters-modal-overlay { display: none !important;}
  .filters-drawer { position: static; width: auto; height: auto; overflow: visible; transform: none; left: auto; padding: 0; border-radius: var(--border-radius); overflow: hidden;}
  .filters-drawer-header { background-color: var(--grey); padding-bottom: 0;}
  .filters-toggle-bar { display: none !important;}
  .filters-close { display: none;}
  body.filters-open { overflow: auto;}

}

[class*="-filter-grid"] .pagination { margin-top: 30px;}
[class*="-filter-grid"] .pagination ol { width: 100%; padding: 0; margin: 0; display: flex; justify-content: flex-end; align-items: center; gap: 12px;}
[class*="-filter-grid"] .pagination ol li { list-style: none;}
[class*="-filter-grid"] .pagination ol li a { color: var(--text-color); text-decoration: none !important;}
[class*="-filter-grid"] .pagination ol li a[aria-current] { color: var(--primary-color); font-weight: 500; text-decoration: underline !important;}
[class*="-filter-grid"] .pagination ol li a:is(.back,.next) { aspect-ratio: 1/1; width: 32px; height: 100%; background: var(--dark-grey-accent); display: flex; justify-content: center; align-items: center; transition: all 0.5s; &:is(:hover, :focus-visible) { background: var(--primary-color);}}
[class*="-filter-grid"] .pagination ol li a.back::before { content: ''; width: 9px; height: 13px; background: var(--white); clip-path: var(--triangle-left); display: inline-block;}
[class*="-filter-grid"] .pagination ol li a.next::before { content: ''; width: 9px; height: 13px; background: var(--white); clip-path: var(--triangle-right); display: inline-block;}
[class*="-filter-grid"] .pagination ol li a:is(:hover, :focus-visible) {}

/* ==== Pagina's: nieuws ==== */
.news-filter-grid {}
.news-filter-grid .news.overview { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;}
.news-filter-grid .news.overview .card { border-radius: 0; border: unset; outline: unset;}
.news-filter-grid.machinebuild .news.overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}

/* ==== Pagina's: Service ==== */
.block.product.support-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 36px;}
.block.product.support-grid .support-item { position: relative; background: var(--secondary-color); padding: 45px; overflow: hidden;}
.block.product.support-grid .support-item a { display: block; height: 100%; text-decoration: none;}
.block.product.support-grid .support-item .item { height: 100%;}
.block.product.support-grid .support-item .item .image { position: absolute; width: 100%; height: 100%; inset: 0; z-index: 1;}
.block.product.support-grid .support-item .item .image::before { content: ''; position: absolute; width: 100%; height: 100%; inset: 0; background: rgb(from var(--secondary-color) r g b / 0.8); z-index: 2;}
.block.product.support-grid .support-item .item .image img { width: 100%; height: 100%;}
.block.product.support-grid .support-item .item .content { position: relative; height: 100%; display: flex; flex-direction: column; z-index: 3;}
.block.product.support-grid .support-item .item .content hgroup { display: flex; flex-direction: column-reverse;}
.block.product.support-grid .support-item .item .content hgroup h3 { color: var(--white); &::after { display: none;}}
.block.product.support-grid .support-item .item .content hgroup p {}
.block.product.support-grid .support-item .item .content .text { color: var(--white); font-weight: 700; font-size: 1.25rem;}
.block.product.support-grid .support-item .item .content .btn-wrapper { flex: 1; display: flex; justify-content: flex-end; align-items: end; padding-top: 55px;}
.block.product.support-grid .support-item .item .content .btn-wrapper .btn {}

/* Mutations */
.block.product.support-grid .support-item:has(.image) { grid-column: 1 / -1;}

/* ==== Pagina's: Service doorklik ==== */
.block.product.support-grid > .row { grid-column: 1 / -1;}
.container-fluid.content > .row.bg-color-grey:first-child { margin-top: 0;}
.container-fluid.content > .row.bg-color-grey.bg-minus-bottom:nth-last-child(2) { background: var(--bgc);}

.block.content.service-detail-intro {}
.block.content.service-detail-intro hgroup {}
.block.content.service-detail-intro .text {}
.block.content.service-detail-intro .text p:last-child { margin-bottom: 0;}
.block.html.img.service-detail-image {}
.block.html.img.service-detail-image .image img { width: 100%; height: auto; object-fit: cover;}
.service-videos:not(:has(.video-item)) { display: none;}
.block.list.video-grid {}
.block.list.video-grid .video-item { height: 100%;}
.block.list.video-grid .video-item a { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--white);}
.block.list.video-grid .video-item a .image { position: relative; overflow: hidden; margin: 0;}
.block.list.video-grid .video-item a .image::before { content: ''; position: absolute; inset: 0; width: 100%; height: 100%; background: var(--img-gradient); z-index: 1;}
.block.list.video-grid .video-item a .image::after { content: var(--play); font-family: var(--font-awesome); font-weight: 900; padding: 0 !important; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; aspect-ratio: 1/1; width: 70px; height: auto; padding-left: 5px; background: var(--primary-color); color: var(--white); font-size: 1.25rem; border-radius: 100%; z-index: 2; transition: all 0.5s;}
.block.list.video-grid .video-item a .image img { width: 100%; height: auto; aspect-ratio: 640 / 360; object-fit: cover; display: block; transition: all 0.5s;}
.block.list.video-grid .video-item a .image img.placeholder {object-fit: contain; padding: 60px; background: var(--black);}
.block.list.video-grid .video-item a .content { flex: 1; display: flex; align-items: center; padding: 24px;}
.block.list.video-grid .video-item a .content h3 { font-size: 1.25rem; font-weight: 700; color: var(--secondary-color); text-transform: none; margin: 0;}
.block.content.service-detail-back {}
.block.content.service-detail-back p { margin-bottom: 0;}

/* Hover */
.block.list.video-grid .video-item a:is(:hover, :focus-visible) .image img { transform: scale(1.05);}
.block.list.video-grid .video-item a:is(:hover, :focus-visible) .image::after { background: var(--secondary-color); transform: translate(-50%, -50%) scale(1.1);}
.block.list.video-grid .video-item a:is(:hover, :focus-visible) .content h3 { color: var(--primary-color);}

/* ==== Pagina's: Contact ==== */
.block.html.contact { background: var(--secondary-color); height: 100%;}
.block.html.contact address { height: 100%; display: flex; flex-direction: column; margin: 0;}
.block.html.contact address .content { height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 30px;}
.block.html.contact address .content h2 { flex: 1; font-size: 32px; color: var(--primary-color); margin-bottom: 0; &::after { display: none;}}
.block.html.contact address .content p { margin: 0;}
.block.html.contact address .content p a { color: var(--white); text-decoration: none; &:hover { color: var(--primary-color);}}
.block.html.contact address .content p a span { color: var(--primary-color); width: 5ch;}
.block.html.contact address .content p.location {}
.block.html.contact address .content p.info { display: flex; flex-direction: column; gap: 6px;}
.block.html.contact address .content p.info a { display: flex; gap: 12px;}
.block.html.contact address .content p .btn { font-size: 1rem; font-weight: 400; text-transform: none; position: relative; text-decoration: underline; &::after { content: var(--arrow-right-up) !important; font-family: var(--font-awesome-sharp); position: absolute; bottom: 0; left: calc(100% + 12px); margin: 0; clip-path: none; background: none; width: fit-content; height: fit-content;} &:is(:hover, :focus-visible) { &::after { transform: translate(3px, -3px);}}}
.block.html.contact address .image { order: -1;}
.block.html.contact address .image img {}
.block.html.maps { height: 100%;}
.block.html.maps iframe { width: 100%; height: 100%;}
.block.form {}
.block.form form {}
.block.form form h3 { color: var(--dark-grey-accent); margin: 0;}
.block.form form .form-group {}
.block.form form .form-group label { font-weight: 600; text-transform: uppercase;}
.block.form form .form-group .form-control { padding: 1rem; color: var(--secondary-color); font-weight: 500; border-radius: 0; border-color: var(--grey3);}
.block.form form .form-group .form-control::placeholder { color: var(--grey5);}
.block.html.contact-sum { position: relative; height: 100%; background: var(--secondary-color); z-index: 0;}
.block.html.contact-sum::before { content: ''; position: absolute; bottom: 0; right: 0; aspect-ratio: 100/175; width: auto; max-width: 100%; height: 175px; background: var(--primary-color); clip-path: var(--triangle-90-bottom-right); z-index: -1;}
.block.html.contact-sum .content { padding: 50px; height: 100%; display: flex; flex-direction: column;}
.block.html.contact-sum .content > h3 { color: var(--white); font-size: 2.5rem; font-weight: 800;}
.block.html.contact-sum .content > h3::after { content: ''; position: relative; display: inline-block; width: clamp(12.96px, 3.15vw, 24px); height: clamp(11.16px, 2.71vw, 21px); clip-path: var(--triangle-up); background: var(--primary-color); transform: rotate(0deg); margin-left: 6px;}
.block.html.contact-sum .content .text { color: var(--white); font-size: 1.25rem; margin-bottom: 45px;}
.block.html.contact-sum .content .text p:last-child { margin-bottom: 0;}
.block.html.contact-sum .content .locations { position: relative; display: grid; gap: 60px 0; justify-content: space-between; grid-template-columns: repeat(2, auto);}
.block.html.contact-sum .content .locations::before { content: ''; position: absolute; top: 50%; transform: translateY(50%); width: 100%; height: 1px; background: var(--black3);}
.block.html.contact-sum .content .locations .location { width: fit-content;}
.block.html.contact-sum .content .locations .location h4 { color: var(--white); margin-bottom: 0;}
.block.html.contact-sum .content .locations .location a { display: block; color: var(--white); text-decoration: none; transition: all 0.5s; &:is(:hover, :focus-visible) { color: var(--primary-color);}}
.block.html.contact-sum .content .locations .location i { color: var(--white);}
body:has(.block.html.contact-sum) .pre-footer { display: none;}

/* ==== Pagina's: Over ons ==== */

/* === Fade slider === */
.block.slides.slider { position: relative;}
.block.slides.slider .swiper { position: relative;}
.block.slides.slider .swiper::before { content: ''; position: absolute; inset: 0; width: 100%; height: 100%; background: var(--img-gradient); z-index: 3; pointer-events: none;}
.block.slides.slider .swiper .swiper-wrapper {}
.block.slides.slider .swiper .swiper-wrapper .swiper-slide {}
.block.slides.slider .swiper .swiper-wrapper .swiper-slide .item {}
.block.slides.slider .swiper .swiper-wrapper .swiper-slide .item .image {}
.block.slides.slider .swiper .swiper-wrapper .swiper-slide .item .image a {}
.block.slides.slider .swiper .swiper-wrapper .swiper-slide .item .image a img {}
.block.slides.slider .swiper-nav { position: absolute; padding: 24px; bottom: 0; left: 0; display: flex; justify-content: space-between; align-items: flex-end; width: 100%; z-index: 2;}
.block.slides.slider .swiper-nav .swiper-pagination { position: relative; width: fit-content;}
.block.slides.slider .swiper-nav .swiper-pagination .swiper-pagination-bullet { width: 10px; height: auto; aspect-ratio: 1/1; background: var(--white); opacity: 1;}
.block.slides.slider .swiper-nav .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--primary-color);}
.block.slides.slider .swiper-nav .swiper-arrows { display: flex; gap: 12px; transform: translateY(calc(50% + 24px));}
.block.slides.slider .swiper-nav .swiper-arrows button { background-color: var(--secondary-color); border: unset; width: 60px; height: 60px; aspect-ratio: 1/1; display: flex; justify-content: center; align-items: center; transition: all 0.5s;}
.block.slides.slider .swiper-nav .swiper-arrows button::after { content: ''; width: 9px; height: 13px; background: var(--white);}
.block.slides.slider .swiper-nav .swiper-arrows button.prev::after { clip-path: var(--triangle-left);}
.block.slides.slider .swiper-nav .swiper-arrows button.next::after { clip-path: var(--triangle-right);}
.block.slides.slider .swiper-nav .swiper-arrows button:is(:hover, :focus-visible) { background: var(--primary-color);}

/* === Rovadi === */
.block.html.logo-lettering { display: flex; justify-content: center; width: 100%; margin-bottom: -150px; padding: 0 calc(var(--container-width) / 12);}
.block.html.logo-lettering svg { width: 100%;}

/* === Team === */
.block.html.team {}
.block.html.team .image {}
.block.html.team .image img { margin-bottom: -50px;}

/* === USPs === */
.block.list.text-list { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; z-index: 2;}
.block.list.text-list .item { background: var(--dark-grey-accent); padding: 45px;}
.block.list.text-list .item .content {}
.block.list.text-list .item .content h2 { color: var(--white);}
.block.list.text-list .item .content .text { color: var(--white); font-size: 20px; font-weight: 700;}

/* === Founders === */
.block.list.founders { display: flex; gap: 24px;}
.block.list.founders .item { position: relative;}
.block.list.founders .item .image {}
.block.list.founders .item .image img {}
.block.list.founders .item .content { position: absolute; width: 100%; height: 100%; inset: 0; display: flex; align-items: flex-end; padding: 24px;}
.block.list.founders .item .content h3 { margin: 0;}

/* ====== Pagina's: Sitemap ====== */
.block.sitemap { --sitemap-gap: 12px; margin-top: 30px; margin-bottom: 50px;}
.block.sitemap .sitemap_tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sitemap-gap); margin-bottom: 24px;}
.block.sitemap .sitemap_tools .sitemap_search { position: relative; flex: 1; min-width: 240px;}
.block.sitemap .sitemap_tools .sitemap_search::before { content: var(--search); font-family: var(--font-awesome); font-weight: 300; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--grey4); pointer-events: none;}
.block.sitemap .sitemap_tools .sitemap_search input { width: 100%; height: 48px; padding: 0 16px 0 44px; font-family: var(--primary-font); font-size: 1rem; color: var(--text-color); background: var(--white); border: 1px solid var(--grey2); border-radius: var(--border-radius); outline: none; transition: border-color 0.3s;}
.block.sitemap .sitemap_tools :is(.sitemap_expand, .sitemap_collapse) { height: 48px; padding: 0 20px; font-family: var(--primary-font); font-size: 0.9375rem; font-weight: 600; color: var(--text-color); background: var(--grey); border: 1px solid var(--grey); border-radius: var(--border-radius); cursor: pointer; transition: all 0.3s;}
.block.sitemap .sitemap_empty { display: none; padding: 20px 0; color: var(--grey4);}
.block.sitemap.is-empty .sitemap_empty { display: block;}
.block.sitemap > .sitemap_ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-color);}
.block.sitemap > .sitemap_ul > .sitemap_li { display: flex; flex-wrap: wrap; align-items: center; padding: 0; margin: 0; border-bottom: 1px solid var(--border-color);}
.block.sitemap > .sitemap_ul > .sitemap_li > .sitemap_a { flex: 1; display: flex; align-items: center; gap: 12px; padding: 16px 0; font-weight: 600; color: var(--text-color); text-decoration: none; transition: color 0.3s;}
.block.sitemap > .sitemap_ul > .sitemap_li > .sitemap_a::before { content: var(--angler-right); font-family: var(--font-awesome); font-weight: 400; color: var(--primary-color); transition: transform 0.3s;}
.block.sitemap .sitemap_toggle { display: flex; align-items: center; gap: 10px; padding: 8px 0 8px 16px; font-family: var(--primary-font); font-size: 0.875rem; color: var(--grey4); background: none; border: 0; cursor: pointer;}
.block.sitemap .sitemap_toggle .count { min-width: 28px; padding: 2px 8px; font-size: 0.8125rem; font-weight: 600; text-align: center; color: var(--text-color); background: var(--grey); border-radius: 20px; transition: all 0.3s;}
.block.sitemap .sitemap_toggle::after { content: var(--chevron-down); font-family: var(--font-awesome); font-weight: 400; display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; color: var(--white); background: var(--primary-color); border-radius: 50%; transition: transform 0.3s, background 0.3s;}
.block.sitemap .sitemap_li.is-open > .sitemap_toggle::after { transform: rotate(180deg);}
.block.sitemap .sitemap_li.is-open > .sitemap_toggle .count { color: var(--white); background: var(--primary-color);}
.block.sitemap .sitemap_li > .sitemap_ul { display: none; width: 100%; list-style: none; margin: 0 0 16px; padding: 20px 24px; grid-template-columns: repeat(3, 1fr); gap: 4px 24px; background: var(--grey);}
.block.sitemap .sitemap_li.is-open > .sitemap_ul { display: grid;}
.block.sitemap .sitemap_li > .sitemap_ul .sitemap_li { margin: 0; padding: 0;}
.block.sitemap .sitemap_li > .sitemap_ul .sitemap_li.is-hidden { display: none;}
.block.sitemap .sitemap_li > .sitemap_ul .sitemap_a { display: block; padding: 6px 0; font-size: 0.9375rem; color: var(--black3); text-decoration: none; transition: color 0.3s, transform 0.3s;}
.block.sitemap > .sitemap_ul > .sitemap_li.is-hidden { display: none;}
.block.sitemap .sitemap_a mark { padding: 0; color: var(--primary-color); background: none; font-weight: 700;}
.container-fluid.content .block.sitemap ul li::before { display: none;}

/* Hover */
.block.sitemap .sitemap_tools .sitemap_search input:focus-visible { border-color: var(--primary-color);}
.block.sitemap .sitemap_tools :is(.sitemap_expand, .sitemap_collapse):is(:hover, :focus-visible) { color: var(--white); background: var(--primary-color); border-color: var(--primary-color);}
.block.sitemap > .sitemap_ul > .sitemap_li > .sitemap_a:is(:hover, :focus-visible) { color: var(--primary-color); &::before { transform: translateX(4px);}}
.block.sitemap .sitemap_toggle:is(:hover, :focus-visible) { color: var(--text-color); &::after { background: var(--primary-color-alt);}}
.block.sitemap .sitemap_li > .sitemap_ul .sitemap_a:is(:hover, :focus-visible) { color: var(--primary-color); transform: translateX(4px);}


/* ============================================
		FOOTER & ENDPAGE
=============================================*/


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

/* --------------------------------------- */
@media only screen and (max-width: 1399px) {

  /*Content*/
  .block.product.cat-cards.populair > article:nth-child(n + 7) { display: none;}
  .block.list.logos .brand-cards { grid-template-columns: repeat(5, 1fr);}
  .product-filter-grid aside .filters-drawer { position: fixed; top: 0; left: 0; width: 100%; max-width: 350px; height: 100vh; background: var(--white); z-index: 1000; padding: 20px; overflow-y: auto; transform: translateX(-100%); transition: transform 0.3s ease; box-shadow: var(--box-shadow); border-radius: 0;}
  .product-filter-grid aside .filters-drawer.open { transform: translateX(0); background: var(--grey);}
  .product-filter-grid aside .filters-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 999;}
  .product-filter-grid aside .filters-modal-overlay.open { display: block;}
  .product-filter-grid aside .filters-drawer .filters-drawer-header .filters-close { display: flex; background: transparent; border: unset; color: var(--secondary-color);}
  .filters-drawer-header { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; background: var(--grey);}
  .filters-drawer-header .current-filters { flex: 0 0 100%;}
  .product-filter-grid aside .filters-drawer { padding: 0;}
  .product-filter-grid .filters .filter-section .filter input + label::before { color: var(--grey);}
  .block.html.contact-sum::before { height: 100%;}
  .block.html.contact-sum .content .locations { width: 50%;}

}

/* --------------------------------------- */
@media only screen and (max-width: 1199px) {

  /*Content*/
  .block.product.cat-cards .item .content hgroup h3 { font-size: 1.125rem;}
  .block.list.logos .brand-cards { grid-template-columns: repeat(4, 1fr);}
  .product-page .product-head .container .head-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: 465px auto auto; grid-template-areas: "slider slider slider thumbs" "info info info info" "price price price price";}
  .product-page .product-head .container .head-grid .slider-col.ts { display: flex; height: 100%; min-height: 0;}
  .product-page .product-head .container .head-grid .slider-col.ts .thumb-slider { flex: 1; width: 100%; height: 100%; max-height: 100%;}
  .product-page .product-head .container .head-grid .slider-col.ts .thumb-slider .swiper-wrapper .swiper-slide { height: auto;}
  .product-page .product-head .container .head-grid .slider-col.ts .thumb-slider .swiper-wrapper .swiper-slide img { width: 100%; height: 100%; object-fit: cover;}
  .product-page .product-more .product-cards { grid-template-columns: repeat(3, 1fr);}
  .product-page .product-more .product-cards .card:nth-child(4) { display: none;}
  .dealer-card .dealer-item .content { padding: 36px; flex: 0 0 100%; background: rgb(from var(--secondary-color) r g b / 0.75); z-index: 2;}
  .dealer-card .dealer-item .image { position: absolute; inset: 0; flex: 0 0 100%;}
  .dealer-card .dealer-item .image img { width: 100%;}
  /* .dealer-card .dealer-item .image::after {display: none;} */

  .product-page .product-information .information-wrapper .description-section { padding-right: 0;}
  .block.product.support-grid .support-item { padding: 24px;}
  .block.html.maps iframe { height: 350px;}
  .block.list.text-list { grid-template-columns: repeat(2, 1fr);}
  .product-page .product-information .information-wrapper > .row { gap: 45px;}
  .product-page .product-more { padding-block: 0px;}
  .news-filter-grid.machinebuild .news.overview { grid-template-columns: repeat(2, 1fr);}
  .block.list.video-grid .video-item a .content { padding: 18px;}

}

/* --------------------------------------- */
@media only screen and (max-width: 991px) {

  /* Banner */
  .container-fluid.banner .content .text h1 { max-width: calc(100% - calc(175px + 24px));}
  .container-fluid.banner .image img { min-height: 200px;}

  /* Content */
  .block.product.cat-cards.populair > article:nth-child(n + 5) { display: none;}
  .block.list.logos .brand-cards { grid-template-columns: repeat(3, 1fr);}
  .product-filter-grid .product-cards { grid-template-columns: repeat(2, 1fr);}
  .product-filter-grid .product-cards .item.open .content, .product-filter-grid .product-cards .item.open .content::before { background: rgb(from var(--black) r g b / 0.9);}
  .product-page .product-head .container .head-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto auto auto; grid-template-areas: "slider slider slider slider" "thumbs thumbs thumbs thumbs" "info info info info" "price price price price";}
  .product-page .product-head .container .head-grid .slider-col.ts { display: block; height: auto;}
  .product-page .product-head .container .head-grid .slider-col.ts .thumb-slider { height: auto; max-height: none;}
  .product-page .product-more .product-cards { grid-template-columns: repeat(2, 1fr);}
  .product-page .product-more .product-cards .card:nth-child(3) { display: none;}
  .block.product.support-grid { display: grid; grid-template-columns: repeat(1, 1fr); margin-top: 24px;}
  .block.html.contact-sum::before { height: 100%; background: var(--dark-grey-accent);}
  .block.html.contact-sum .content .locations { width: 100%;}
  .block.list.text-list { grid-template-columns: repeat(1, 1fr);}
  .product-page .product-information .information-wrapper { padding: 24px;}
  .block.html.logo-lettering { margin-bottom: -100px; margin-top: calc(0px - var(--row-space));}
  .block.sitemap .sitemap_li > .sitemap_ul { grid-template-columns: repeat(2, 1fr);}

}

/* --------------------------------------- */
@media only screen and (max-width: 767px) {

  /* Banner */
  .container-fluid.banner .image img { min-height: 150px;}

  /* Content */
  .block.product.cat-cards .item .content { padding: 12px;}
  .block.product.cat-cards .item .content .btn { bottom: 12px; right: 12px;}
  .product-filter-grid .product-cards .item.open .content { width: 100%; background: rgb(from var(--black) r g b / 0.5);}
  .product-filter-grid .product-cards .item.open .content::before { display: none;}
  .block.list.logos .brand-cards { grid-template-columns: repeat(2, 1fr);}
  [class*="-filter-grid"] .content-top { flex-direction: column; margin-bottom: 12px;}
  .block.html.contact address .image img { width: 100%;}
  .block.html.logo-lettering { margin-bottom: -50px;}
  .block.html.team .image img { margin-bottom: 0;}
  .news-filter-grid .news.overview, .news-filter-grid.machinebuild .news.overview { grid-template-columns: repeat(1, 1fr);}
  .block.html.logo-lettering { margin-bottom: -125px; margin-top: calc(0px - var(--row-space));}
  .specs-modal .specs-modal__header { padding: 24px 24px 12px;}
  .specs-modal .specs-modal__header h2 { font-size: 1.75rem;}
  .specs-modal .specs-modal__body { padding: 0 24px 24px;}
  .block.sitemap .sitemap_tools .sitemap_search { flex: 1 1 100%;}
  .block.sitemap .sitemap_tools :is(.sitemap_expand, .sitemap_collapse) { flex: 1;}
  .block.list.video-grid .video-item a .image::after { width: 55px; font-size: 1rem;}
  .block.list.video-grid .video-item a .content h3 { font-size: 1.125rem;}

}

/* --------------------------------------- */
@media only screen and (max-width: 575px) {

  /* Banner */
  /* .container-fluid.banner .content .text h1 {font-size: 2rem;} */

  /* Content */
  .block.product.cat-cards a:is(:hover, :focus-visible) .item .content hgroup h3 { width: 23ch;}
  .block.product.cat-cards.populair > article:nth-child(n + 4) { display: none;}
  .product-page .container { padding: 0;}
  .block:is(.product, .list, .calendar):has(.item) .container { padding: 0;}
  .block.list.text-list .item { padding: 24px;}
  .specs-modal { max-height: 90vh;}
  .specs-modal .specs-modal__header h2 { font-size: 1.5rem;}
  .specs-modal .specs-modal__header .specs-modal__close { width: 40px; height: 40px;}
  .block.sitemap .sitemap_li > .sitemap_ul { grid-template-columns: 1fr; padding: 16px;}
  .block.sitemap .sitemap_toggle .label { display: none;}

}

/* --------------------------------------- */
@media only screen and (max-width: 479px) {

  .container-fluid.banner .content .text h1 { max-width: 80%;}
  /* .container-fluid.banner .content .text h1 {font-size: 1.75rem;} */

  [class*="-filter-grid"] .content-top .sort { width: 100%;}
  .block.html.contact-sum .content .locations { grid-template-columns: repeat(1, 1fr);}
  .block.html.contact-sum .content .locations::before { display: none;}

}


.product-filter-grid .no-results { display: none; padding: 40px 0; text-align: center;}
.product-filter-grid.is-empty .no-results { display: block;}

/* #hours/#price zelf ook relatief positioneren, niet alleen .filter-minmax-track:
	   .filters-drawer is position:fixed (mobiel) resp. .filters is position:relative
	   (desktop) - zonder een positioned voorouder vlak bij de slider zelf, springen de
	   twee range-inputs (position:absolute) naar dié container en landen ze bovenaan
	   het hele filterpaneel, over de andere filters heen. */
#hours.filter-minmax, #price.filter-minmax { position: relative;}
.product-filter-grid .filter-minmax-values { display: flex; justify-content: space-between; font-size: 0.9375rem; font-weight: 500; color: var(--darkblue);}
.product-filter-grid .filter-minmax-track { position: relative; height: 20px; margin-top: 4px;}
.product-filter-grid .filter-minmax-track::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 4px; background: var(--grey3); border-radius: 2px; transform: translateY(-50%);}
.product-filter-grid .filter-minmax-track-fill { position: absolute; top: 50%; height: 4px; background: var(--primary-color); border-radius: 2px; transform: translateY(-50%);}
.product-filter-grid .filter-minmax-track input[type="range"] { position: absolute; top: 0; left: 0; width: 100%; height: 20px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;}
.product-filter-grid .filter-minmax-track input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--primary-color); border: 2px solid var(--white); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); cursor: pointer;}
.product-filter-grid .filter-minmax-track input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--primary-color); border: 2px solid var(--white); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); cursor: pointer;}
.product-filter-grid .filter-minmax-track input[type="range"]::-webkit-slider-runnable-track { background: transparent;}
.product-filter-grid .filter-minmax-track input[type="range"]::-moz-range-track { background: transparent;}