/* ==========================================================================
   aanbod-style.css · new Aanbod overview (Figma 4917:112)
   PART 1 = the APPROVED CSS from the mockup (brandcars.css), Aanbod part: SAME class names, selectors, values, order.
            Only changes: select arrow path (/images/select-arrow.png), the 4 global resets (*, body, img, a) are
            limited to .bc-aanbod so no other page is touched, fonts come from /fonts (self-hosted).
   PART 2 = ADDITIONS that are not in the mockup (each one says why). Nothing in part 1 is edited.
   Breakpoints = the mockup's (1100 px and 640 px) in aanbod-responsive.css.
   ========================================================================== */

/* ---- fonts: the families the mockup asks for ('Plus Jakarta Sans' cards, 'Inter' filter), self-hosted ---- */
@font-face{font-family:'Plus Jakarta Sans';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/PlusJakartaSans-Regular.woff2') format('woff2'),url('../fonts/PlusJakartaSans-Regular.woff') format('woff')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/PlusJakartaSans-Medium.woff2') format('woff2'),url('../fonts/PlusJakartaSans-Medium.woff') format('woff')}
@font-face{font-family:'Inter';font-weight:400 700;font-style:normal;font-display:swap;src:url('../fonts/Inter-Regular.woff2') format('woff2'),url('../fonts/Inter-Regular.woff') format('woff')}

/* ======================= PART 1 · APPROVED CSS (mockup) ======================= */
:root{
  --bc-dark:#121212; --bc-dark-2:#1b1b1b; --bc-red:#b10002; --bc-red-dot:#b10000;
  --bc-grey-bg:#f8f8f8; --bc-tab-bg:#f5f5f5; --bc-line:#dddddd; --bc-line-2:#dfdfdf;
  --bc-green:#2ab540; --bc-wa:#36b84e; --bc-float:#171717;
  --bc-lama:'Lama Sans','Plus Jakarta Sans',Arial,sans-serif;   /* Lama Sans: use the font file NEO already has */
  --bc-jakarta:'Plus Jakarta Sans',Arial,sans-serif;
  --bc-inter:'Inter',Arial,sans-serif;
  --bc-w:1436px;
}
.bc-aanbod, .bc-aanbod *{box-sizing:border-box}
.bc-aanbod{font-family:var(--bc-inter);color:var(--bc-dark)}
.bc-aanbod img{display:block;max-width:100%}
.bc-aanbod a{color:inherit;text-decoration:none}
.bc-wrap{max-width:var(--bc-w);margin:0 auto;padding:0 20px}
@media (min-width:1476px){.bc-wrap{padding:0}}
.bc-dot{color:var(--bc-red-dot)}

/* ---------- Aanbod: filter bar ---------- */
.bc-filter{background:var(--bc-grey-bg);padding-top:40px}  /* no hero banner on Aanbod (removed by MI 02-11-2026) */
.bc-filter__box{max-width:1533px;margin:0 auto;background:#fff;padding:35px 35px 23px 30px}
.bc-filter__row{display:grid;grid-template-columns:repeat(4,1fr) 1.39fr;gap:7.5px}
.bc-select{height:70px;border:1px solid var(--bc-line-2);background:#fff url(/images/select-arrow.png) no-repeat;background-size:10px 10px;background-position:77% 50%;
  appearance:none;-webkit-appearance:none;padding:0 23px;font:400 14.6px var(--bc-inter);color:#b4b4b4;width:100%}
.bc-btn-dark{height:70px;background:var(--bc-dark);border:2px solid var(--bc-dark);color:#fff;font:400 15px var(--bc-inter);letter-spacing:.4px;text-transform:uppercase;cursor:pointer;width:100%}
.bc-filter__reset{display:block;text-align:right;margin-top:0;font:400 14.6px/24px var(--bc-inter);color:var(--bc-dark)}

/* ---------- Car card (Aanbod grid + Gerelateerde auto's) ---------- */
.bc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:40px 0 70px}
.bc-card{display:flex;flex-direction:column;gap:11px;color:var(--bc-dark)}
.bc-card__img{aspect-ratio:466/307;overflow:hidden;background:#ddd}
.bc-card__img img{width:100%;height:100%;object-fit:cover}
.bc-card__info{background:#fff;height:141px;padding:18px 21px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto 1fr;column-gap:10px;transition:background .2s,color .2s}
.bc-card__title{grid-column:1;font:500 20px/0.964 var(--bc-lama);white-space:nowrap}
.bc-card__sub{grid-column:1;margin-top:9px;font:400 14px/20px var(--bc-lama);color:rgba(18,18,18,.8)}
.bc-card__chips{grid-column:1;align-self:end;display:flex;gap:10px;margin-bottom:5px}
.bc-chip{border:1px solid rgba(18,18,18,.2);border-radius:5px;padding:5px 14px;font:500 12px/20px var(--bc-lama);white-space:nowrap}
.bc-card__price{grid-column:2;grid-row:3;align-self:end;text-align:right;margin-bottom:5px}
.bc-card__price b{display:block;font:500 16px var(--bc-lama)}
.bc-card__price span{display:block;margin-top:6px;font:400 14px var(--bc-lama);color:rgba(18,18,18,.5)}
/* hover = red state from Figma (first card) */
.bc-card:hover .bc-card__info{background:var(--bc-red);color:#fff}
.bc-card:hover .bc-card__sub{color:rgba(255,255,255,.8)}
.bc-card:hover .bc-chip{border-color:rgba(255,255,255,.2)}
.bc-card:hover .bc-card__price span{color:rgba(255,255,255,.5)}

/* ======================= PART 2 · ADDITIONS (not in the mockup) ======================= */
/* empty banner block that top-banner-section.ctp prints above the filter: dark like the header; its height is synced to the header by the script in aanbod-section.ctp */
.inner-banner-sec.aanbodtop{background:#121212;padding:0;margin:0;height:178px;min-height:0}

/* select: text ends in "..." before the arrow (arrow stays where the mockup has it at 1728 px) */
.bc-select{border-radius:0;margin:0;-moz-appearance:none;background-position:right 59px center;
  padding-right:77px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ZOEKEN + Reset: red hover (#b10002) with smooth transition; Reset changes its text colour */
.bc-btn-dark{padding:1px 6px;transition:background-color .3s ease,border-color .3s ease}
.bc-btn-dark:hover,.bc-btn-dark:focus-visible{background:var(--bc-red);border-color:var(--bc-red)}
.bc-filter__reset{transition:color .3s ease}
.bc-filter__reset:hover,.bc-filter__reset:focus-visible{color:var(--bc-red)}

/* card: image gets no height from CSS (the feed image decides); info box height is set by the script in aanbod-section.ctp */
.bc-card__img{aspect-ratio:auto}
.bc-card__img img{height:auto}
.bc-card__info{height:auto}
.bc-card__chips{grid-row:3}
.bc-card__price b small{display:block;font:400 12px/16px var(--bc-lama)}   /* "excl. BTW" line */
.bc-card:focus-visible .bc-card__info{background:var(--bc-red);color:#fff}
.bc-card:focus-visible .bc-card__sub{color:rgba(255,255,255,.8)}
.bc-card:focus-visible .bc-chip{border-color:rgba(255,255,255,.2)}
.bc-card:focus-visible .bc-card__price span{color:rgba(255,255,255,.5)}
.bc-empty{padding:70px 0;text-align:center;font:500 16px var(--bc-inter);color:var(--bc-red)}

/* one-line card variables: title / uitvoering / chips / price never wrap; children scale with the card width (cqw, used in aanbod-responsive.css) */
.bc-card{container-type:inline-size}
.bc-card__sub{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-chip{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}   /* if chips are ever too wide they shrink (...) instead of running into the price */
.bc-card__chips{min-width:0}
.bc-card__price{white-space:nowrap}

/* the cars are their own section (filter = section 1, cars = section 2); same grey page background */
.bc-cars{background:var(--bc-grey-bg)}

/* ======================= AANBOD DETAIL (view_car.ctp) · mockup aanbod-detail.html / Figma 4912:1794 =======================
   Same bc- classes as the mockup. Sizes = Figma at 1728 px; spacing between blocks scales down with clamp(). */
.bc-detail{background:#fff;font-family:var(--bc-inter);color:var(--bc-dark)}
.bc-detail h1,.bc-detail h2,.bc-detail h3,.bc-detail p{margin:0}
.bc-detail button{font-family:inherit}

/* back button */
.bc-sec-back{padding:60px 0 50px}   /* desktop 60 / 50 px, reduced on mobile (responsive css) */
.bc-back{display:inline-flex;align-items:center;height:60px;padding:0 30px;margin:0;border:2px solid var(--bc-line);font:400 15px var(--bc-inter);letter-spacing:.4px;text-transform:uppercase;color:#0a0a0a;background:transparent;transition:background-color .3s,border-color .3s,color .3s}
.bc-back:hover{background:var(--bc-red);border-color:var(--bc-red);color:#fff}

/* top: gallery (left) + panel (right), both columns are always equally high (>= 992 px) */
.bc-top{display:grid;grid-template-columns:minmax(0,812fr) minmax(0,605fr);column-gap:clamp(12px,1.32vw,19px);align-items:stretch}
.bc-gallery{display:flex;flex-direction:column;min-width:0}
.bc-gallery__main{position:relative;flex:1 1 auto;aspect-ratio:812/487;overflow:hidden;background:#ddd}
.bc-gallery__main .swiper-container{position:absolute;inset:0;width:100%;height:100%}
.bc-gallery__main .swiper-slide a{display:block;height:100%;cursor:default}   /* zoom cursor only inside the lightbox */
.bc-gallery__main img{width:100%;height:100%;object-fit:cover}
.bc-arrow,.bc-related__prev,.bc-related__next{position:absolute;z-index:1;width:44px;height:44px;border:0;padding:0;background:none;cursor:pointer;transition:opacity .3s}
.bc-arrow{top:50%;margin-top:-22px}
/* arrows stay in place; only the look changes on hover: outlined (default) -> filled red (hover) */
.bc-ai{width:44px;height:44px;display:block}
.bc-detail button img.bc-ai--on,.bc-detail .bc-arrow:hover img.bc-ai--off,.bc-detail .bc-related__prev:hover img.bc-ai--off,.bc-detail .bc-related__next:hover img.bc-ai--off{display:none}
.bc-detail .bc-arrow:hover img.bc-ai--on,.bc-detail .bc-related__prev:hover img.bc-ai--on,.bc-detail .bc-related__next:hover img.bc-ai--on{display:block}
.bc-arrow--prev{left:47px} .bc-arrow--prev .bc-ai,.bc-related__prev .bc-ai{transform:scaleX(-1)}
.bc-arrow--next{right:47px}
.bc-arrow.swiper-button-disabled,.bc-related__prev.swiper-button-disabled,.bc-related__next.swiper-button-disabled{opacity:.35;cursor:default;pointer-events:none}
.bc-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,.87vw,15px);margin-top:clamp(8px,.81vw,14px)}
.bc-thumbs a{position:relative;aspect-ratio:191/142;overflow:hidden;display:block;background:#ddd;cursor:default}
.bc-thumbs img{width:100%;height:100%;object-fit:cover}
.bc-thumbs__more{position:absolute;inset:9px 7px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(0,0,0,.05);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-family:var(--bc-lama);text-align:center}
.bc-thumbs__more b{font:400 clamp(20px,1.62vw,28px)/1 var(--bc-lama)}
.bc-thumbs__more span{font:400 clamp(11px,.81vw,14px)/1.5 var(--bc-lama)}

.bc-aside{display:flex;flex-direction:column;min-width:0}
.bc-panel{flex:1 1 auto;display:flex;flex-direction:column;border:1px solid rgba(18,18,18,.1);background:#fff}
.bc-panel__head{padding:clamp(22px,1.97vw,34px) clamp(16px,1.45vw,25px) clamp(20px,1.74vw,30px)}
.bc-panel__title{font:700 clamp(22px,1.74vw,30px)/1.2 var(--bc-lama);text-transform:uppercase}
.bc-panel__sub{margin-top:8px;font:400 clamp(14px,.93vw,16px)/24px var(--bc-lama);color:rgba(18,18,18,.8)}
.bc-panel__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:clamp(14px,1.27vw,22px)}
.bc-panel__price b{font:700 clamp(26px,1.8vw,32px) var(--bc-lama);color:var(--bc-red);white-space:nowrap}
.bc-panel__price span{font:400 clamp(16px,1.1vw,18px) var(--bc-lama);color:rgba(18,18,18,.53);white-space:nowrap}
.bc-specs--2{display:none}
.bc-specs{margin-top:auto;border-top:1px solid rgba(18,18,18,.2)}
.bc-specs__row{display:grid;grid-template-columns:minmax(0,1.27fr) minmax(0,1fr) minmax(0,.78fr);padding:clamp(14px,1.39vw,24px) clamp(16px,1.45vw,25px);border-bottom:1px solid rgba(18,18,18,.2)}
.bc-specs__row:last-child{border-bottom:0}
.bc-specs__cell{min-width:0;padding-left:clamp(10px,1.16vw,20px);border-left:1px solid rgba(18,18,18,.2)}
.bc-specs__cell:first-child{padding-left:0;border-left:0}
.bc-specs__cell small{display:block;font:500 clamp(12px,.93vw,16px) var(--bc-lama);color:rgba(18,18,18,.53);white-space:nowrap}
.bc-specs__cell b{display:block;margin-top:6px;font:400 clamp(14px,1.16vw,20px) var(--bc-lama);color:var(--bc-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.bc-contact{margin-top:clamp(12px,1.1vw,19px);border:1px solid rgba(18,18,18,.1)}
.bc-contact__red{background:var(--bc-red);padding:clamp(16px,1.27vw,22px) clamp(16px,1.45vw,25px);display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(14px,1.45vw,25px);color:#fff}
.bc-contact__red img.bc-avatar{width:71px;height:71px;border-radius:50%;object-fit:cover}
.bc-contact__red img.bc-avatar--logo{object-fit:contain;background:none;border-radius:0;width:auto;max-width:120px}   /* dealer logo from the CMS */
.bc-contact__text b{display:block;font:500 clamp(16px,1.16vw,20px)/24px var(--bc-lama)}
.bc-contact__text span{display:block;font:400 14px/24px var(--bc-lama);color:rgba(255,255,255,.7)}
.bc-contact__links{margin-left:auto;display:flex;flex-direction:column;gap:12px;font:400 14px/1.1 var(--bc-lama)}
.bc-contact__links a{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.bc-contact__links a:hover{text-decoration:underline}   /* links are underlined on hover only */
.bc-contact__links img{width:16px;height:auto}
.bc-contact__btns{display:flex;flex-wrap:nowrap;gap:clamp(5px,.46vw,8px);padding:clamp(14px,1.33vw,23px) clamp(12px,1.45vw,25px)}
.bc-btn{flex:1 1 auto;min-width:0;height:clamp(48px,3.47vw,60px);padding:0 clamp(6px,1.16vw,20px);display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--bc-line);font:500 clamp(12px,.93vw,16px)/1.2 var(--bc-lama);color:var(--bc-dark);white-space:nowrap;background:#fff;cursor:pointer;transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.bc-btn:hover,.bc-btn:focus-visible{background:var(--bc-red);border-color:var(--bc-red);color:#fff}
.bc-aanbod .bc-btn--green{background:var(--bc-green);border-color:var(--bc-green);color:#fff;text-decoration:none}
.bc-btn--green img{width:18px;height:18px;flex:0 0 auto}
.bc-aanbod .bc-btn--green:hover,.bc-aanbod .bc-btn--green:focus-visible{background:var(--bc-green);border-color:var(--bc-green);color:#fff;text-decoration:none}   /* WhatsApp button keeps its colour */

/* tabs: >= 768 px all in one row */
.bc-sec-tabs{padding:clamp(48px,6.4vw,110px) 0 0}
.bc-tabs{display:flex;flex-wrap:nowrap;gap:clamp(6px,.7vw,12px);margin:0 0 clamp(28px,3.6vw,62px)}
.bc-tab{flex:0 1 auto;min-width:0;height:48px;padding:10px clamp(10px,1.04vw,18px);border-radius:5px;background:var(--bc-tab-bg);border:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;font:400 16px/24px var(--bc-jakarta);color:var(--bc-dark);white-space:nowrap;cursor:pointer;transition:background-color .3s ease,color .3s ease}
.bc-tab img{width:7.5px;height:4px;flex:0 0 auto;transition:transform .2s}
.bc-tab:not(.is-active) img{transform:rotate(-90deg)}
.bc-tab:hover,.bc-tab.is-active{background:var(--bc-red);color:#fff}
.bc-tab:hover img,.bc-tab.is-active img{filter:brightness(0) invert(1)}
.bc-pane{display:none}
/* Onderhoudshistorie: like before - the tab button scrolls down to this block, which sits under the tabs */
.bc-onderhoud .row{margin-left:-10px;margin-right:-10px}
.bc-onderhoud [class*=col-]{padding-left:10px;padding-right:10px}
.bc-onderhoud .each-onderhoud-block{display:flex;margin-bottom:20px}
.bc-onderhoud .left-bg-block{flex:0 0 140px;width:140px;display:flex;align-items:center;justify-content:center;background:var(--bc-red);color:#fff;text-align:center}
.bc-onderhoud .left-bg-block h6{margin:0;font:500 16px/24px var(--bc-jakarta);color:#fff}
.bc-onderhoud .block-dtls{flex:1 1 auto;min-width:0;border:1px solid #0a0a0a;border-left:0;padding:20px 15px 5px;min-height:200px}
.bc-onderhoud .block-dtls h5{margin:10px 0 8px;font:700 17px/1.4 var(--bc-jakarta);color:#0a0a0a}
.bc-onderhoud .block-dtls h5:first-child{margin-top:0}
.bc-onderhoud .block-dtls h6{margin:0 0 20px;font:400 15px/1.5 var(--bc-jakarta);color:#0a0a0a;overflow-wrap:anywhere}
/* all tab panels use the Kenmerken font; the tab name is not repeated inside the panel */
.bc-pane .tab-common-heading{display:none}
.bc-pane,.bc-pane p,.bc-pane li,.bc-pane h3,.bc-pane h4,.bc-pane h6,.bc-pane span,.bc-pane a,.bc-pane label,.bc-pane td{font-family:var(--bc-jakarta)}
.bc-pane p,.bc-pane li{font-size:clamp(14px,1.16vw,17px);line-height:1.6;color:var(--bc-dark)}
.bc-pane h3{font-size:clamp(17px,1.39vw,22px);font-weight:500;color:var(--bc-dark);margin:0 0 18px}
/* Opties: every group (Onderscheidende opties, accessoire groups) = heading with a line under it + list with a red dot */
.bc-pane .star_icon h3,.bc-pane .tab_hedaing h6{margin:0 0 18px;padding:0 0 10px;border-bottom:1px solid #b4b4b4;font:500 clamp(17px,1.39vw,22px)/1.3 var(--bc-jakarta);color:var(--bc-dark)}
.bc-pane .tab_hedaing{padding:0;margin:0}
.bc-pane .bullet-panel,.bc-pane .star_icon{margin-bottom:24px}
.bc-pane .bullet-panel ul{list-style:none;margin:0;padding:0}
.bc-pane .bullet-panel ul li,.bc-pane .star_icon p{position:relative;margin:0;padding:0 0 10px 20px;font:400 clamp(14px,1.16vw,17px)/1.5 var(--bc-jakarta);color:#0c0c0c;word-break:break-word}
.bc-pane .bullet-panel ul li:before,.bc-pane .star_icon p:before{content:'';position:absolute;left:0;top:.45em;width:7px;height:11px;background:url(/images/d-bullet.svg) no-repeat center/contain}
.bc-pane .bullet-panel ul li:after{display:none}
.bc-pane .star_icon p img{display:none}
.bc-pane.is-active{display:block}

/* kenmerken (3 per row) */
.bc-kenm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,7.9vw,113px)}
.bc-kenm__item{display:flex;align-items:center;gap:12px;height:clamp(52px,4.05vw,70px);min-width:0;font:400 clamp(14px,1.16vw,20px)/1.5 var(--bc-jakarta);color:var(--bc-dark);white-space:nowrap;transition:padding .2s,color .2s}
.bc-kenm__item img{width:8.5px;height:13.5px;flex:0 0 auto}
.bc-kenm__item b{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font:500 clamp(14px,1.16vw,20px)/1.5 var(--bc-jakarta);padding-bottom:2px;text-align:right}   /* line-height keeps descenders (g, y, p) from being cut */
.bc-kenm__item:hover{color:var(--bc-red);padding-left:15px}   /* Figma annotation: hover state */
.bc-kenm__line{grid-column:1/-1;height:1px;background:var(--bc-line)}
.bc-btn-outline{display:inline-flex;align-items:center;height:48px;padding:10px 18px;margin-top:clamp(20px,1.74vw,30px);border:1px solid var(--bc-dark);border-radius:5px;font:400 16px/24px var(--bc-jakarta);color:var(--bc-dark);background:none;cursor:pointer;transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.bc-btn-outline:hover{background:var(--bc-red);border-color:var(--bc-red);color:#fff}

/* kenmerken popup: structure of the reference site (overlay, white box 75vh, car name, scrolling two-column list), brandcars colours + fonts */
.bc-pop{position:fixed;inset:0;z-index:1060;display:none}
.bc-pop.is-open{display:flex}
.bc-pop__overlay{position:fixed;inset:0;background:rgba(18,18,18,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.bc-pop__dialog{position:relative;width:93%;max-width:1200px;height:75vh;margin:auto;padding:clamp(24px,2.9vw,50px);background:#fff;box-shadow:0 0 25px rgba(0,0,0,.5);overflow:hidden;display:flex;flex-direction:column}
.bc-pop__close{position:absolute;top:20px;right:20px;width:40px;height:40px;padding:0;border:1px solid var(--bc-dark);border-radius:50%;background:none;cursor:pointer;transition:background-color .3s,border-color .3s}
.bc-pop__close span,.bc-pop__close span:before{position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;background:var(--bc-dark);transform:rotate(45deg);transition:background-color .3s}
.bc-pop__close span:before{content:'';left:0;top:0;margin:0;transform:rotate(90deg)}
.bc-pop__close:hover{background:var(--bc-red);border-color:var(--bc-red)}
.bc-pop__close:hover span,.bc-pop__close:hover span:before{background:#fff}
.bc-pop__model{flex:0 0 auto;padding:0 50px 24px 0}
.bc-pop__model h3{margin:0 0 6px;font:700 clamp(18px,1.6vw,26px)/1.2 var(--bc-lama);text-transform:uppercase;color:var(--bc-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-pop__model p{margin:0;font:400 clamp(14px,.93vw,16px)/1.4 var(--bc-lama);color:rgba(18,18,18,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-pop__content{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:16px}
.bc-pop__content::-webkit-scrollbar{width:10px}
.bc-pop__content::-webkit-scrollbar-track{border-radius:10px;background:rgba(18,18,18,.1)}
.bc-pop__content::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(18,18,18,.3)}
.bc-pop__content h4{margin:0 0 10px;font:700 clamp(16px,1.2vw,20px)/1.3 var(--bc-lama);color:var(--bc-dark)}
.bc-pop__content ul{margin-bottom:40px !important}
.bc-pop .kenmerken_tab .row{display:block;margin:0}
.bc-pop .kenmerken-tab{width:100%;max-width:none;padding:0}
.bc-pop .kenmerken-tab ul,.bc-pop__content > ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.bc-pop .kenmerken-tab ul li,.bc-pop__content > ul li{float:none;box-sizing:border-box;width:50%;margin:0;padding:10px 0;border-bottom:1px solid rgba(18,18,18,.15);font:400 15px/1.4 var(--bc-jakarta);color:var(--bc-dark)}
.bc-pop .kenmerken-tab ul li:nth-child(odd),.bc-pop__content > ul li:nth-child(odd){padding-right:10px}
.bc-pop .kenmerken-tab ul li:nth-child(even),.bc-pop__content > ul li:nth-child(even){font-weight:500;text-align:left;padding-left:10px}
.bc-pop__content > ul li{overflow-wrap:anywhere;word-break:break-word;min-width:0}
.bc-pop__content > ul li img,.bc-pop .kenmerken-tab ul li img{max-height:22px;width:auto;vertical-align:middle}

/* form */
.bc-form-sec{padding:clamp(56px,6.4vw,110px) 0 clamp(44px,4.9vw,85px)}
.bc-form-sec h2{margin:0 0 clamp(24px,2.3vw,40px);font:500 clamp(28px,2.37vw,41px)/1.2 Arial,sans-serif;letter-spacing:1px;color:#0a0a0a}
.bc-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;margin:0}
.bc-form__left{display:flex;flex-direction:column;gap:14px}
.bc-input,.bc-textarea{display:block;width:100%;height:60px;border:2px solid var(--bc-line);border-radius:0;background:#fff;padding:0 30px;font:700 14px var(--bc-inter);color:#0a0a0a;outline:0;transition:border-color .3s}
.bc-input:focus,.bc-textarea:focus{border-color:var(--bc-line);outline:0;box-shadow:none}   /* no black border on focus */
.bc-input::placeholder,.bc-textarea::placeholder{color:rgba(10,10,10,.5)}
.bc-textarea{height:208px;padding:30px;resize:none}
.bc-form__submit{grid-column:2;justify-self:end;width:221px;max-width:100%;height:60px;margin-top:14px;background:#0a0a0a;border:2px solid #0a0a0a;color:#fff;font:400 14.3px var(--bc-inter);letter-spacing:.4px;text-transform:uppercase;cursor:pointer;transition:background-color .3s ease,border-color .3s ease}
.bc-form__submit:hover{background:var(--bc-red);border-color:var(--bc-red)}

/* gerelateerde auto's */
.bc-related{position:relative;padding-bottom:clamp(48px,5.5vw,95px)}
.bc-related__bg{position:absolute;left:0;right:0;top:0;height:489px;background:var(--bc-dark)}   /* height is fitted to the card photos by the script */
.bc-related .bc-wrap{position:relative;padding-top:clamp(40px,4.57vw,79px)}
.bc-related h2{margin:0 0 clamp(24px,2.6vw,45px);text-align:center;font:700 clamp(30px,2.78vw,48px)/1.2 var(--bc-lama);color:#fff}
.bc-related__slider{position:relative}
.bc-related .swiper-slide{height:auto}
.bc-related .bc-card{height:100%}
.bc-related .bc-card__info{flex:1 1 auto;background:var(--bc-grey-bg)}
.bc-related .bc-card:hover .bc-card__info{background:var(--bc-red)}
.bc-related__prev{left:20px}.bc-related__next{right:20px}
.bc-related__prev,.bc-related__next{top:0}   /* vertical position: centre of the photo, set by the script */