@charset "UTF-8";
/* WC Plus core — productpagina-tabs + collapse.
   Structuur + gedrag, geen styling-opinie. Bootstrap-vrij.
   Override-tokens: zet ze in het shop-theme op .wcp-product-tabs of :root. */

.wcp-product-tabs {
	--wcp-tabs-gap: 2rem;          /* was $grid-gutter-width (gy-5) */
	--wcp-tabs-aside-width: 20rem; /* was col-lg-4 */
	--wcp-tabs-sticky-top: 1rem;   /* was .sticky-top */
	--wcp-tabs-border: 1px solid currentColor;
	--wcp-tabs-toggle-padding: 0.5rem 0;

	/* Sta op eigen benen: niet leunen op de theme-klasse .woocommerce-tabs voor breedte.
	   Float-gebaseerde themes (o.a. Storefront) floaten galerij/samenvatting; zonder clear
	   klemt de sectie tussen die floats tot ~0 breedte. */
	display: block;
	clear: both;
	width: 100%;
}

/* ── Layout ──────────────────────────────────────────────── */
.wcp-product-tabs__main {
	display: flex;
	flex-direction: column;
	gap: var(--wcp-tabs-gap);
}

/* Stacked (één kolom) is de default. Split (twee kolommen) pas vanaf de breakpoint. */
@media (min-width: 992px) {
	.wcp-product-tabs[data-layout="split"] .wcp-product-tabs__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--wcp-tabs-aside-width);
		gap: var(--wcp-tabs-gap);
		align-items: start;
	}

	.wcp-product-tabs__aside {
		position: sticky;
		top: var(--wcp-tabs-sticky-top);
		display: flex;
		flex-direction: column;
	}
}

/* ── Accordion / collapse (gedrag, niet Bootstrap-JS) ────── */
.wcp-product-tabs__toggle {
	display: none; /* desktop: geen toggle */
	width: 100%;
	align-items: center;
	gap: 0.75rem;
	padding: var(--wcp-tabs-toggle-padding);
	border: 0;
	border-bottom: var(--wcp-tabs-border);
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-align: left;
}

.wcp-product-tabs__arrow {
	margin-left: auto;
	transition: transform 0.2s ease;
}

.wcp-product-tabs__toggle[aria-expanded="true"] .wcp-product-tabs__arrow {
	transform: rotate(180deg);
}

/* Mobiel: collapsible panelen dicht tot de helper .is-open zet. */
@media (max-width: 991.98px) {
	.wcp-product-tabs__toggle {
		display: flex;
	}

	.wcp-product-tabs__panel.is-collapsible {
		overflow: hidden;
		max-height: 0;
		transition: max-height 0.25s ease;
	}

	.wcp-product-tabs__panel.is-collapsible.is-open {
		max-height: 100vh; /* ruim genoeg; JS kan exact scrollHeight zetten indien gewenst */
		padding-top: 0.75rem;
	}

	/* In accordion-modus toont de toggle de titel → titel in het paneel verbergen. */
	.wcp-product-tabs__panel.is-collapsible .wcp-product-tabs__title {
		display: none;
	}
}

/* Desktop: nooit ingeklapt, geen toggle. (was d-lg-block / d-none d-lg-block) */
@media (min-width: 992px) {
	.wcp-product-tabs__panel.is-collapsible {
		max-height: none;
		overflow: visible;
	}
}

/* ── Read-more component (.wcp-collapse) ─────────────────── */
.wcp-collapse {
	--wcp-collapse-clamp: 12rem;
}

.wcp-collapse__panel.is-collapsible {
	position: relative;
	overflow: hidden;
	max-height: var(--wcp-collapse-clamp);
	transition: max-height 0.25s ease;
}

/* Fade-out aan de onderkant zolang ingeklapt. */
.wcp-collapse__panel.is-collapsible::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3rem;
	background: linear-gradient(to bottom, transparent, var(--wcp-collapse-fade, #fff));
	pointer-events: none;
}

.wcp-collapse__panel.is-collapsible.is-open {
	max-height: 200vh;
}

.wcp-collapse__panel.is-collapsible.is-open::after {
	display: none;
}

.wcp-collapse__toggle {
	margin-top: 0.5rem;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* ── Specificaties-tabel ─────────────────────────────────── */
.wcp-specs {
	width: 100%;
	border-collapse: collapse;
}
.wcp-specs th,
.wcp-specs td {
	padding: 0.5rem 0.75rem;
	border-bottom: var(--wcp-border-width, 1px) solid var(--wcp-border, #e5e7eb);
	text-align: left;
	vertical-align: top;
}
.wcp-specs th {
	width: 40%;
	font-weight: var(--wcp-font-weight-medium, 500);
}

/* ── Jump-nav (ankers naar de productsecties; legacy wcp_custom_tabs-consumer) ── */
html { scroll-behavior: smooth; }
.wcp-jump-nav {
	border-top: 1px solid var(--wcp-color-border, #e5e7eb);
	border-bottom: 1px solid var(--wcp-color-border, #e5e7eb);
	margin: 1.5rem 0;
	overflow-x: auto;
}
.wcp-jump-nav__list {
	display: flex;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}
.wcp-jump-nav__link {
	display: inline-block;
	padding: 0.75rem 0;
	color: var(--wcp-color-dark, #374151);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: all 0.2s ease-in-out;
}
.wcp-jump-nav__link:hover {
	color: var(--wcp-color-primary, #873EFF);
	border-bottom-color: var(--wcp-color-primary, #873EFF);
}
/* ankers niet onder een eventuele sticky header laten verdwijnen */
.wcp-product-tabs__tab,
[id^="tab-"] {
	scroll-margin-top: 5rem;
}

.wcp-jump-nav { clear: both; width: 100%; }

/* Pros & cons (tab-inhoud) */
.wcp-pros-cons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.wcp-pros-cons__item { display: flex; align-items: baseline; gap: 0.5rem; }
.wcp-pros-cons__item .svg-icon__pro { color: #22a06b; }
.wcp-pros-cons__item .svg-icon__con { color: #9b1c1c; }