/*
 * Apparaatpagina's (Bold Builder) — opmaak volgens het ontwerp "Productpagina"
 * (templates/product/Product.dc.html). De pagina's staan als builder-inhoud
 * onder de pagina Shop en zijn gegenereerd met Project/tools/gen-product-pages.php;
 * elke sectie draagt el_class="bnb-product" plus een eigen klasse
 * (bnb-product-hero, -intro, -band, -specs, -steps, -faq, -related, -cta).
 * Wordt geladen op elke pagina waarvan de inhoud de marker "bnb-product" bevat.
 */

.bnb-product {
	--bnb-product-space: clamp(4em, 7vw, 7em); /* ruimte tussen de secties */
}

/* --- Secties: afstand en breedte ------------------------------------------ */

/* De kop begint 20px onder de header; elke volgende sectie krijgt de
   sectieafstand als marge, de secties zelf hebben geen eigen ruimte (spacing none).
   Het thema zet boven portfolio-items --post-margin-top (4em); die ruimte
   zit hier in de kop zelf. */
body.single-portfolio .site-content {
	margin-top: 0;
}

/* Het thema legt de inhoud van een portfolio-item in een raster (foto, tekst,
   meta naast elkaar); zonder die onderdelen rekt de kolom de secties buiten
   het scherm. Hier is de inhoud de hele pagina: gewoon een blok. */
body.single-portfolio article.portfolio .entry-content {
	display: block;
}

.bt_bb_section.bnb-product-hero {
	margin-top: var(--content-padding) !important;
}

.bt_bb_section.bnb-product:not(.bnb-product-hero) {
	margin-top: var(--bnb-product-space) !important;
}

.bt_bb_section.bnb-product-cta {
	margin-bottom: var(--bnb-product-space) !important;
}

/* Kop en knop naast elkaar: kop links, knop rechtsonder. */
.bnb-product .bnb-product-head .bt_bb_row_holder {
	align-items: flex-end;
}

.bt_bb_headline.bnb-product-narrow {
	max-width: 40ch;
}

/* --- Lopende tekst en vinklijsten ------------------------------------------ */

.bnb-product .bt_bb_text.bnb-product-text {
	line-height: 1.8;
	color: var(--dark-gray-color);
}

.bnb-product .bnb-product-text > p,
.bnb-product .bnb-product-text > ol {
	margin: 0 0 1.25em;
	max-width: 62ch;
	text-wrap: pretty;
}

.bnb-product .bnb-product-text > :last-child {
	margin-bottom: 0;
}

.bnb-product .bnb-product-text h3 {
	margin: 2.5em 0 1em;
	font-size: var(--small-title-size);
	line-height: 1.2;
	color: var(--dark-color);
}

.bnb-product .bnb-product-text h3:first-child {
	margin-top: 0;
}

.bnb-product .bnb-product-text strong {
	font-weight: 500;
	color: var(--dark-color);
}

.bnb-product .bnb-product-text img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0.5em 0 1.5em;
	border-radius: var(--image-medium-rounded);
}

.bnb-product .bnb-product-text a {
	color: var(--accent-color);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Vinklijst "In één oogopslag": lijnen erboven en eronder, vinkje in accent.
   Geen flex: een item als "<strong>Kop</strong>: tekst" zou anders in twee
   kolommen uiteenvallen; het vinkje staat absoluut in de linkermarge. */
.bnb-product .bnb-product-text > ul {
	margin: 0 0 1.5em;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.5;
	color: var(--dark-color);
}

.bnb-product .bnb-product-text > ul > li {
	position: relative;
	padding: 0.9em 0 0.9em 2.2em;
	border-top: 1px solid var(--primary-07-color);
}

.bnb-product .bnb-product-text > ul > li:last-child {
	border-bottom: 1px solid var(--primary-07-color);
}

.bnb-product .bnb-product-text > ul > li:before {
	content: "\e908"; /* checkmark, IBM-set */
	position: absolute;
	left: 0;
	top: 1.05em;
	font-family: IBM;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--accent-color);
}

/* --- Kop: foto, kruimelpad, titel onderin ---------------------------------- */

/* De site-brede kopregel (style.css) centreert; het ontwerp zet de titel onderin. */
.bt_bb_section.bnb-product-hero {
	justify-content: flex-end;
}

.bt_bb_section.bnb-product-hero > .bt_bb_port {
	align-items: flex-end;
}

/* Donkere laag over de foto's van kop en offerteband (het thema zet de
   overlay op 50%; het ontwerp gebruikt 60% zwart). */
.bnb-product-hero:before,
.bnb-product-cta:before {
	background: var(--dark-60-color) !important;
	opacity: 1 !important;
}

.bnb-product-hero .bt_bb_column_content {
	padding: 0 calc(clamp(24px, 5vw, 4em) - 2.5625em); /* de port heeft al 2.5625em */
}

.bnb-product-hero .bt_bb_column_content_inner {
	max-width: 820px;
}

.bnb-product-hero .bt_bb_headline_subheadline {
	max-width: 62ch;
	margin-left: 0;
	margin-right: 0;
}

.bnb-product-hero .bt_bb_text.bnb-product-crumbs p {
	margin: 0 0 1.5em;
	font-family: var(--supertitle-font);
	text-transform: uppercase;
	letter-spacing: var(--supertitle-letter-spacing);
	font-size: var(--title-subtitle-size-extrasmall);
	line-height: 1.5;
	color: var(--accent-color); /* het ontwerp gebruikt alternate; die is op de site donkergrijs */
}

.bnb-product-hero .bnb-product-crumbs a {
	color: inherit;
	text-decoration: none;
}

.bnb-product-hero .bnb-product-crumbs a:hover,
.bnb-product-hero .bnb-product-crumbs span {
	color: var(--light-color);
}

@media (max-width: 1200px) {
	.bnb-product-hero .bt_bb_column_content {
		padding: 0;
	}
}

/* --- Apparaatkaart en "Over het apparaat" ---------------------------------- */

/* De kaart blijft in beeld terwijl de tekst rechts scrolt; daarvoor mag de
   rij de kolommen niet op gelijke hoogte rekken. */
.bnb-product-intro .bt_bb_row_holder {
	align-items: flex-start;
}

.bnb-product-intro .bt_bb_column.bnb-product-card {
	position: sticky;
	top: var(--content-padding);
}

/* Witte kaart: kleur en afronding komen van de kolom (dark-light, hard-rounded);
   de dubbele kolompadding van het thema (120px) wordt de kaartpadding uit het
   ontwerp. Op id, net als op de voorpagina, anders wint het thema. */
#over.bnb-product-intro .bt_bb_column.bnb-product-card.bt_bb_padding_double > .bt_bb_column_content,
#ook-interessant.bnb-product-related .bt_bb_column.bnb-product-card.bt_bb_padding_double > .bt_bb_column_content {
	padding: 1.8125em;
}

/* Apparaatfoto op een beige vierkant, het hele apparaat in beeld. */
.bnb-product .bnb-product-card .bt_bb_image.bnb-product-image {
	margin: 0;
}

.bnb-product .bnb-product-card .bt_bb_image.bnb-product-image > span,
.bnb-product .bnb-product-card .bt_bb_image.bnb-product-image > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: var(--beige-color);
	border-radius: var(--image-medium-rounded);
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.bnb-product .bnb-product-card .bt_bb_image.bnb-product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8%;
	border-radius: 0;
	transition: transform 0.4s;
}

.bnb-product .bnb-product-card-related:hover .bt_bb_image.bnb-product-image img {
	transform: scale(1.04);
}

/* Vergrootglas rechtsboven op de grote foto (de foto zelf opent de lightbox). */
.bnb-product .bnb-product-card .bt_bb_image.bnb-product-image > a {
	position: relative;
}

.bnb-product .bnb-product-card .bt_bb_image.bnb-product-image > a:after {
	content: "\f2db"; /* zoom-in-line, Remixicon */
	font-family: Remixicon;
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--light-color);
	color: var(--dark-color);
	font-size: 18px;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	transition: background 0.2s, color 0.2s;
}

.bnb-product .bnb-product-card .bt_bb_image.bnb-product-image > a:hover:after {
	background: var(--accent-color);
	color: var(--light-color);
}

/* Het thema zet klikken uit op een beeldraster zonder lightbox; de miniaturen
   moeten juist klikbaar zijn (zelfde specificiteit als de themaregel + .bnb-product). */
.bnb-product .bt_bb_css_image_grid.bt_bb_no_lightbox.bnb-product-thumbs .bt_bb_css_image_grid_content .bt_bb_css_image_grid_item {
	pointer-events: auto;
}

/* Miniaturen onder de grote foto: kleine vierkantjes van 52px in een rij (het
   raster van de builder zou ze op kolombreedte en in hun eigen verhouding
   zetten), de actieve met accentrand. */
.bnb-product .bnb-product-card .bt_bb_css_image_grid.bnb-product-thumbs {
	margin: 0;
}

.bnb-product .bnb-product-thumbs .bt_bb_css_image_grid_content {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bnb-product .bnb-product-thumbs .bt_bb_css_image_grid_item {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: var(--beige-color);
	transition: border-color 0.2s;
}

.bnb-product .bnb-product-thumbs .bt_bb_css_image_grid_item_inner,
.bnb-product .bnb-product-thumbs .bt_bb_css_image_grid_item_inner_image {
	width: 100%;
	height: 100%;
	pointer-events: auto;
}

.bnb-product .bnb-product-thumbs .bt_bb_css_image_grid_item_inner_image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bnb-product .bnb-product-thumbs .bt_bb_css_image_grid_item:hover,
.bnb-product .bnb-product-thumbs .bt_bb_css_image_grid_item.is-active {
	border-color: var(--accent-color);
}

/* Prijsregel: "Prijs op aanvraag" links, de garantieregel rechts. */
.bnb-product .bt_bb_headline.bnb-product-price {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	margin: 0;
}

.bnb-product .bt_bb_headline.bnb-product-price .bt_bb_headline_tag {
	margin: 0;
}

.bnb-product .bt_bb_headline.bnb-product-price .bt_bb_headline_superheadline {
	color: var(--accent-color);
}

.bnb-product .bt_bb_headline.bnb-product-price .bt_bb_headline_subheadline {
	margin: 0;
	font-size: 14px;
	color: var(--dark-gray-color);
}

/* Knoppen over de volle kaartbreedte, pijl rechts. */
.bnb-product-intro .bnb-product-card .bt_bb_button {
	display: block;
}

.bnb-product-intro .bnb-product-card .bt_bb_button .bt_bb_link {
	display: flex;
	width: 100%;
	justify-content: center;
	border-radius: var(--hard-rounded) !important;
}

@media (max-width: 991px) {
	.bnb-product-intro .bt_bb_column.bnb-product-card {
		position: static;
		margin-bottom: 2em;
	}
}

/* --- Voordelenband (accent) ------------------------------------------------ */

.bnb-product-band > .bt_bb_port {
	padding-top: clamp(3.5em, 6vw, 6em) !important;
	padding-bottom: clamp(3.5em, 6vw, 6em) !important;
}

.bnb-product-band .bt_bb_headline {
	max-width: 720px;
}

/* Supertitel op de tan band: gedempt wit (alternate is op de site donkergrijs). */
.bnb-product-band .bt_bb_headline_superheadline {
	color: rgba(255, 255, 255, 0.7);
}

.bnb-product-band .bt_bb_service,
.bnb-product-band .bt_bb_service .bt_bb_service_content_title,
.bnb-product-band .bt_bb_service .bt_bb_service_content_text {
	color: var(--light-color);
}

@media (max-width: 991px) {
	.bnb-product-band .bt_bb_column + .bt_bb_column {
		margin-top: 2em;
	}
}

/* --- Specificaties: tabs -------------------------------------------------- */

.bnb-product-specs .bt_bb_headline.bnb-product-narrow {
	max-width: 720px;
}

.bnb-product-specs .bt_bb_tabs,
.bnb-product-specs > .bt_bb_port .bt_bb_text.bnb-product-text {
	max-width: 960px;
}

.bnb-product-specs .bt_bb_tabs_header {
	flex-wrap: wrap;
	gap: 0.5em;
}

.bnb-product-specs .bt_bb_tab_content .bnb-product-text h3 {
	margin-top: 0;
}

/* --- Stappen --------------------------------------------------------------- */

/* Geen inschuif-animatie: de stappen staan er meteen. */
.bnb-product-steps .bt_bb_inner_step.animate {
	opacity: 1;
	transform: none;
}

/* --- Veelgestelde vragen --------------------------------------------------- */

.bnb-product-faq .bnb-product-faq-intro p {
	max-width: 34ch;
}

.bnb-product-faq .bt_bb_accordion_item_content {
	color: var(--dark-gray-color);
}

@media (max-width: 991px) {
	.bnb-product-faq .bt_bb_column + .bt_bb_column {
		margin-top: 2em;
	}
}

/* --- Ook interessant: productkaarten --------------------------------------- */

/* Ruimte tussen de kopregel en de kaarten. */
.bnb-product-related .bt_bb_row + .bt_bb_row {
	margin-top: 3em;
}

/* Drie kaarten even hoog: de kaart (column_content) vult de kolom. */
#ook-interessant.bnb-product-related .bt_bb_column.bnb-product-card-related {
	display: flex;
	flex-direction: column;
}

#ook-interessant.bnb-product-related .bt_bb_column.bnb-product-card-related > .bt_bb_column_content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

/* Kaartinhoud als raster: beeld · afstand · titel · tekst (rekt) · lijn ·
   prijs + Details naast elkaar, zoals de kaarten op de voorpagina. */
#ook-interessant.bnb-product-related .bnb-product-card-related .bt_bb_column_content_inner {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
	align-items: start;
}

#ook-interessant.bnb-product-related .bnb-product-card-related .bt_bb_column_content_inner > * {
	grid-column: 1 / -1;
}

#ook-interessant.bnb-product-related .bnb-product-card-related .bt_bb_column_content_inner > .bt_bb_headline.bnb-product-price {
	grid-column: 1;
	align-self: center;
}

#ook-interessant.bnb-product-related .bnb-product-card-related .bt_bb_column_content_inner > .bt_bb_button.bt_bb_style_clean {
	grid-column: 2;
	align-self: center;
	justify-self: end;
	margin: 0;
}

.bnb-product-related .bnb-product-card-related .bt_bb_text.bnb-product-card-text {
	margin-bottom: 1.5em;
	line-height: 1.7;
	color: var(--dark-gray-color);
}

.bnb-product-related .bnb-product-card-related .bt_bb_headline.bt_bb_size_small .bt_bb_headline_tag {
	font-size: var(--small-title-size);
	line-height: 1.2;
}

.bnb-product-related .bnb-product-card-related .bt_bb_headline_tag a {
	color: var(--dark-color);
	text-decoration: none;
}

.bnb-product-related .bnb-product-card-related .bt_bb_headline_tag a:hover {
	color: var(--accent-color);
}

@media (max-width: 991px) {
	.bnb-product-related .bt_bb_column + .bt_bb_column {
		margin-top: 2em;
	}
}

/* --- Offerteband ----------------------------------------------------------- */

.bnb-product-cta .bt_bb_headline {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.bnb-product-cta .bt_bb_dual_buttons {
	gap: 1em;
	flex-wrap: wrap;
	justify-content: center;
}

.bnb-product-cta .bt_bb_dual_buttons .bt_bb_button a {
	border-radius: var(--hard-rounded) !important;
}

.bnb-product-cta .bt_bb_dual_buttons .bt_bb_button .bt_bb_icon_holder {
	order: 2;
	margin-right: 0;
	margin-left: 0.8rem;
}

.bnb-product-cta .bt_bb_text.bnb-product-cta-contact p {
	margin: 0;
	font-family: var(--supertitle-font);
	text-transform: uppercase;
	letter-spacing: var(--supertitle-letter-spacing);
	font-size: var(--title-subtitle-size-extrasmall);
	line-height: 1.8;
	color: var(--accent-color);
}

.bnb-product-cta .bnb-product-cta-contact a {
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.bnb-product-cta .bnb-product-cta-contact a:hover {
	color: var(--light-color);
}

/* --- Mobiel ---------------------------------------------------------------- */

@media (max-width: 600px) {
	.bnb-product .bt_bb_column.bnb-product-card > .bt_bb_column_content {
		padding: 1.25em;
	}
}