/* Bosstad Tweewielers – ronde 6 (2026-09-15): sticky header + proefrit-popover, snelkaarten, populaire e-bikes,
   compact assortiment, proefritpagina, proefrit-strook, productpagina sticky foto. */

/* ================================================================ Sticky header */
/* Solace zet overflow:hidden op .wrapper (niet-Elementor-pagina's zoals productpagina's) – dat blokkeert position:sticky. */
body.bs-sticky-hdr > .wrapper:not(.et-fb-iframe-ancestor){overflow:visible;overflow-x:clip}
body.bs-sticky-hdr header.header{position:sticky;top:0;z-index:1000;background:var(--bs-surface,#fff)}
body.bs-sticky-hdr.admin-bar header.header{top:32px}
@media(max-width:782px){body.bs-sticky-hdr.admin-bar header.header{top:46px}}
body.bs-sticky-hdr header.header.is-stuck{box-shadow:0 1px 0 var(--bs-border,#E3E4E2),0 8px 24px rgba(28,32,34,.08)}
body.bs-sticky-hdr{scroll-padding-top:var(--bs-hdr-h,84px)}

/* Header-CTA: proefrit-knop + popover */
.elementor-90 .bs-hdr-proefrit{position:relative}
.elementor-90 .bs-hdr-proefrit .elementor-button-content-wrapper{gap:8px}
.bs-hdr-pop{position:absolute;top:calc(100% + 10px);right:0;width:340px;max-width:calc(100vw - 32px);padding:18px 18px 16px;background:#fff;border:1px solid var(--bs-border,#E3E4E2);border-radius:4px;box-shadow:0 12px 32px rgba(28,32,34,.14);z-index:1001;text-align:left}
.bs-hdr-pop[hidden]{display:none}
.bs-hdr-pop::before{content:"";position:absolute;top:-6px;right:28px;width:10px;height:10px;background:#fff;border-left:1px solid var(--bs-border,#E3E4E2);border-top:1px solid var(--bs-border,#E3E4E2);transform:rotate(45deg)}
.bs-hdr-pop__kop{margin:0 0 4px;font-family:var(--bs-font-display,Newsreader,serif);font-size:21px;line-height:1.2;color:var(--bs-ink,#1C2022)}
.bs-hdr-pop__sub{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--bs-muted,#697478)}
.bs-hdr-pop .bs-pr__select{width:100%;margin-bottom:10px}
.bs-hdr-pop .bs-btn{width:100%}

/* ================================================================ Gedeelde select / velden */
.bs-pr__select,body.solacewp .bs-pr__select{appearance:none;-webkit-appearance:none;font:inherit;font-size:15px;line-height:1.3;color:var(--bs-ink,#1C2022);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231C2022' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/16px;padding:13px 40px 13px 14px;border:1px solid var(--bs-border,#E3E4E2);border-radius:2px;box-shadow:none;min-height:0;height:auto}
.bs-pr__select:focus-visible{outline:3px solid rgba(15,138,124,.28);outline-offset:1px;border-color:var(--bs-teal,#0F8A7C)}

/* ================================================================ Snelkaarten onder de hero */
.bs-qc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:1024px){.bs-qc{grid-template-columns:1fr;gap:12px}}
.bs-qc__card{display:flex;align-items:center;gap:16px;padding:20px 22px;background:#fff;border:1px solid var(--bs-border,#E3E4E2);border-radius:4px;text-decoration:none;color:var(--bs-ink,#1C2022);transition:border-color .18s var(--bs-ease),box-shadow .18s var(--bs-ease),transform .18s var(--bs-ease);min-height:96px}
a.bs-qc__card:hover,a.bs-qc__card:focus-visible{border-color:var(--bs-teal,#0F8A7C);box-shadow:var(--bs-shadow-soft);transform:translateY(-2px);color:var(--bs-ink,#1C2022);opacity:1}
.bs-qc__icon{flex:0 0 46px;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:rgba(51,199,183,.14);color:var(--bs-teal,#0F8A7C)}
.bs-qc__icon svg{width:24px;height:24px}
.bs-qc__txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.bs-qc__kop{font-family:var(--bs-font-display,Newsreader,serif);font-size:20px;line-height:1.2;color:var(--bs-ink,#1C2022);margin:0;display:block}
.bs-qc__sub{font-size:14px;line-height:1.4;color:var(--bs-muted,#697478)}
.bs-qc__arrow{flex:0 0 auto;color:var(--bs-teal,#0F8A7C);transition:transform .18s var(--bs-ease)}
.bs-qc__arrow svg{width:20px;height:20px;display:block}
a.bs-qc__card:hover .bs-qc__arrow{transform:translateX(4px)}
.bs-qc__field{display:flex;gap:6px;margin-top:6px}
.bs-qc__field input,body.solacewp .bs-qc__field input{flex:1 1 auto;min-width:0;font:inherit;font-size:15px;padding:10px 12px!important;border:1px solid var(--bs-border,#E3E4E2)!important;border-radius:2px!important;background:#fff;color:var(--bs-ink,#1C2022);box-shadow:none!important;min-height:0;height:auto}
.bs-qc__field input:focus-visible{outline:3px solid rgba(15,138,124,.28);outline-offset:1px;border-color:var(--bs-teal,#0F8A7C)!important}
.bs-qc__field button,body.solacewp .bs-qc__field button{flex:0 0 44px;width:44px;min-height:0;height:auto;padding:0!important;display:grid;place-items:center;background:var(--bs-turquoise,#33C7B7);color:var(--bs-btn-ink,#06110F);border:0;border-radius:2px;cursor:pointer;transition:background-color .18s var(--bs-ease)}
.bs-qc__field button:hover,.bs-qc__field button:focus-visible{background:var(--bs-turquoise-light,#4FD8C8)}
.bs-qc__field button svg{width:18px;height:18px}

/* ================================================================ Populaire e-bikes */
.bs-pop .bt-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1024px){.bs-pop .bt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.bs-pop .bt-grid{grid-template-columns:1fr}}
.bs-pop .bt-card h2.bt-card__title{margin:0}

/* ================================================================ Compact assortiment-kaart */
.bs-ass-chips{display:flex;flex-wrap:wrap;gap:8px}
.bs-ass-chips a{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1px solid var(--bs-border,#E3E4E2);border-radius:999px;font-size:13.5px;font-weight:600;letter-spacing:.2px;color:var(--bs-ink,#1C2022);text-decoration:none;background:#fff;transition:border-color .18s var(--bs-ease),color .18s var(--bs-ease)}
.bs-ass-chips a:hover,.bs-ass-chips a:focus-visible{border-color:var(--bs-teal,#0F8A7C);color:var(--bs-teal,#0F8A7C);opacity:1}

/* ================================================================ Proefritpagina */
.bs-pr{font-family:var(--bs-font-body)}
.bs-pr__form{margin:0 0 28px}
.bs-pr__label{display:block;margin:0 0 10px;font-size:15px;font-weight:700;color:var(--bs-ink,#1C2022)}
.bs-pr__row{display:flex;gap:10px;flex-wrap:wrap}
.bs-pr__row .bs-pr__select{flex:1 1 320px}
.bs-pr__btn{flex:0 0 auto}
.bs-pr__btn svg{width:14px;height:14px}
.bs-pr__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.bs-pr__card{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border:1px solid var(--bs-border,#E3E4E2);border-radius:4px;background:#fff;text-decoration:none;color:var(--bs-ink,#1C2022);transition:border-color .18s var(--bs-ease),box-shadow .18s var(--bs-ease)}
.bs-pr__card:hover,.bs-pr__card:focus-visible{border-color:var(--bs-teal,#0F8A7C);box-shadow:var(--bs-shadow-soft);color:var(--bs-ink,#1C2022);opacity:1}
.bs-pr__card-name{font-family:var(--bs-font-display,Newsreader,serif);font-size:22px;line-height:1.15}
.bs-pr__card-addr{font-size:14px;color:var(--bs-muted,#697478)}
.bs-pr__card-go{margin-top:8px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--bs-teal,#0F8A7C)}
.bs-pr__card-go svg{width:14px;height:14px}
.bs-pr__store{padding:24px 26px;border:1px solid var(--bs-border,#E3E4E2);border-left:4px solid var(--bs-turquoise,#33C7B7);border-radius:4px;background:#fff;margin-bottom:22px}
.bs-pr__eyebrow{margin:0 0 4px;font-size:11.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--bs-teal,#0F8A7C)}
h2.bs-pr__name{margin:0 0 8px;font-family:var(--bs-font-display,Newsreader,serif);font-size:30px;line-height:1.1;color:var(--bs-ink,#1C2022)}
.bs-pr__addr{margin:0 0 12px;line-height:1.5;color:var(--bs-text,#4A5356)}
.bs-pr__tel{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--bs-ink,#1C2022);text-decoration:none;margin-right:22px}
.bs-pr__tel svg{width:16px;height:16px;color:var(--bs-teal,#0F8A7C)}
.bs-pr__link{font-size:14px;color:var(--bs-teal,#0F8A7C)}
.bs-pr__agenda iframe{width:100%;min-height:720px;border:0;border-radius:4px;background:#fff}
.bs-pr__agenda--soon{padding:26px 28px;border:1px dashed var(--bs-border,#E3E4E2);border-radius:4px;background:var(--bs-surface-soft,#F6F5F2)}
.bs-pr__agenda--soon p{margin:0 0 10px;line-height:1.55;color:var(--bs-text,#4A5356)}
.bs-pr__soon-kop{font-family:var(--bs-font-display,Newsreader,serif);font-size:22px;color:var(--bs-ink,#1C2022)}
.bs-pr__ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* ================================================================ Strook boven de footer */
.bs-prs{background:var(--bs-surface-soft,#F6F5F2);border-top:1px solid var(--bs-border,#E3E4E2);padding:44px max(48px,calc((100vw - 1440px)/2))}
@media(max-width:1024px){.bs-prs{padding:36px 24px}}
@media(max-width:767px){.bs-prs{padding:32px 16px}}
.bs-prs__inner{max-width:1440px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.bs-prs__txt{flex:1 1 380px;min-width:0}
.bs-prs__eyebrow{margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--bs-teal,#0F8A7C)}
h2.bs-prs__kop{margin:0 0 6px;font-family:var(--bs-font-display,Newsreader,serif);font-size:clamp(24px,2.4vw,32px);line-height:1.15;color:var(--bs-ink,#1C2022)}
.bs-prs__sub{margin:0;font-size:15px;color:var(--bs-muted,#697478)}
.bs-prs__form{flex:1 1 420px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.bs-prs__form .bs-pr__select{flex:1 1 280px;max-width:420px}
.bs-prs__form .bs-btn{flex:0 0 auto}
.bs-prs__form .bs-btn svg{width:15px;height:15px}
@media(max-width:767px){.bs-prs__form{justify-content:stretch}.bs-prs__form .bs-pr__select{max-width:none;flex-basis:100%}}

.bs-prs__act{flex:1 1 440px;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.bs-prs__act .bs-prs__form{flex:0 1 auto;width:100%}
.bs-prs__link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--bs-teal,#0F8A7C);text-decoration:none}
.bs-prs__link svg{width:14px;height:14px;transition:transform .2s var(--bs-ease,ease)}
.bs-prs__link:hover svg{transform:translateX(3px)}
.bs-prs--dark{background:var(--bs-dark,#1C2022);border-top:0;padding-top:72px;padding-bottom:72px}
@media(max-width:1024px){.bs-prs--dark{padding-top:56px;padding-bottom:56px}}
@media(max-width:767px){.bs-prs--dark{padding-top:44px;padding-bottom:44px}.bs-prs__act{align-items:stretch}.bs-prs__link{justify-content:center}}
.bs-prs--dark .bs-prs__eyebrow{color:var(--bs-turquoise,#33C7B7)}
.bs-prs--dark h2.bs-prs__kop{color:#fff;font-size:clamp(28px,3vw,40px)}
.bs-prs--dark .bs-prs__sub{color:var(--bs-on-dark-muted,#B9C2C4);font-size:16px;max-width:560px}
.bs-prs--dark .bs-prs__link{color:#fff}
/* 2026-09-25: werkplaats-CTA + compacte openingstijden onder de proefritstrook */
.bs-prs__extra{width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-top:4px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.bs-prs__hours{margin:0;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--bs-on-dark-muted,#B9C2C4)}
.bs-prs__hours svg{width:15px;height:15px;flex:none;color:var(--bs-turquoise,#33C7B7)}
.bs-prs__link--wp{font-size:13.5px;gap:8px}
.bs-prs__link--wp svg:first-child{width:15px;height:15px;color:var(--bs-turquoise,#33C7B7)}
@media(max-width:767px){.bs-prs__extra{justify-content:flex-start}.bs-prs__link--wp{justify-content:flex-start}}
.bs-prs--dark .bs-pr__select{border-color:transparent}

/* ================================================================ Productpagina */
/* Foto scrolt mee tot de samenvatting (rechterkolom) voorbij is; header-hoogte via --bs-hdr-h (JS). */
@media(min-width:901px){
	/* Solace zet overflow:hidden op .wrapper; dat maakt position:sticky dood. clip knipt wél zonder scroll-container te worden. */
	body.single-bt_bicycle .wrapper{overflow:clip}
	body.single-bt_bicycle main.bt-single{overflow:visible}
	.bt-single__top{align-items:start}
	.bt-single__top .bt-gallery{position:sticky;top:calc(var(--bs-hdr-h,84px) + 20px);align-self:start}
}
/* 'Meer lezen' alleen bij écht lange omschrijvingen (drempel in round5.js verhoogd). */
.bs-desc.is-clamped:not(.is-open) .bs-desc__body{max-height:12em}
.bs-desc [data-bs-more][hidden]{display:none!important}
.bs-desc:not(.is-clamped) .bs-desc__body{max-height:none}

/* ================================================================ 2026-09-25: twee grote CTA's in de header (proefrit + werkplaats) */
.bs-hdr-ctas{display:flex;align-items:center;gap:10px}
.elementor-90 .bs-hdr-proefrit .elementor-widget-container{display:flex}
.bs-hdr-pr-wrap,.bs-hdr-wp-wrap{position:relative;display:inline-flex}
/* Zelfde stijl als de proefritknop (thema geeft .elementor-button de turquoise achtergrond): geen rand, zelfde hoogte. */
.bs-hdr-wp.elementor-button{border:0!important;box-shadow:none!important;padding:14px 24px!important}
.bs-hdr-wp.elementor-button:hover,.bs-hdr-wp.elementor-button[aria-expanded="true"]{background:var(--bs-turquoise-light,#4FD8C8)!important}
.bs-hdr-wp .elementor-button-icon svg{width:15px;height:15px}
.bs-hdr-wp-wrap .bs-hdr-pop{right:0}
.bs-hdr-pop .bs-pr__select.is-invalid{border-color:#B42318;outline:3px solid rgba(180,35,24,.18)}
/* Labels per breedte: ≥1501 'Plan een werkplaatsafspraak', 1201–1500 'Werkplaats', ≤1200 alleen het icoon (aria-label blijft). Proefritknop breekt nooit af. */
.elementor-90 .bs-hdr-proefrit .elementor-button-text{white-space:nowrap}
.bs-hdr-wp__short{display:none}
@media(max-width:1500px){.bs-hdr-wp__long,.bs-hdr-wp__full{display:none}.bs-hdr-wp__short{display:inline}}
@media(max-width:1100px){.bs-hdr-ctas{gap:6px}.bs-hdr-wp .elementor-button-text{font-size:11px}}
/* snelkaarten: vier gelijke kaarten op brede schermen, twee op tablet, één op mobiel */
@media(min-width:1200px){.bs-qc{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:768px) and (max-width:1199px){.bs-qc{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ================================================================ 2026-09-25: USP-rij onder de hero in dezelfde vier kolommen als de snelkaarten, elk item gecentreerd */
/* Elementor 'boxed' container: de widgets staan in .e-con-inner; dat wordt het grid (zelfde boxed breedte als de snelkaarten). */
@media(min-width:1025px){
.elementor-element-usp-row.e-con>.e-con-inner{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;justify-items:stretch;align-items:start}
.elementor-element-usp-row.e-con>.e-con-inner>.elementor-element{width:100%!important;max-width:none!important;margin:0}
.elementor-element-usp-row .elementor-icon-box-wrapper{justify-content:center}
}
@media(min-width:768px) and (max-width:1024px){
.elementor-element-usp-row.e-con>.e-con-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;align-items:start}
.elementor-element-usp-row.e-con>.e-con-inner>.elementor-element{width:100%!important;max-width:none!important;margin:0}
.elementor-element-usp-row .elementor-icon-box-wrapper{justify-content:center}
}
/* header-CTA's op tablet: korte tekst 'Werkplaats', proefritknop niet laten afbreken */
@media(max-width:1200px){
.bs-hdr-ctas{gap:8px}
.bs-hdr-wp .elementor-button-text{display:none}
.elementor-90 .bs-hdr-proefrit .elementor-button{padding-left:16px!important;padding-right:16px!important}
.bs-hdr-wp.elementor-button{padding:13px 14px!important}
.bs-hdr-wp .elementor-button-icon svg{width:18px;height:18px}
}

