@charset "UTF-8";
/* WC Plus core — productpagina-tabs + collapse.
   Structuur + gedrag, geen styling-opinie. Bootstrap-vrij.
   De --wcp-tabs-*-tokens hebben hun standaard in wcp-tokens.css; het shop-theme zet ze op
   :root. Ze stonden hier op .wcp-product-tabs zelf, maar een definitie op het element zit
   dichter op de inhoud dan de :root van een thema en won dus altijd van het thema-token. */

.wcp-product-tabs {
	/* 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;
	}

	/* Columns: elke tab een kolom (omschrijving naast specificaties). */
	.wcp-product-tabs[data-layout="columns"] .wcp-product-tabs__main {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	/* Paar tabs naast elkaar (wcp_product_tabs_side_by_side, bv. maattabel naast specificaties); de rest vol breed. */
	.wcp-product-tabs:not([data-layout="columns"]) .wcp-product-tabs__main:has(> .wcp-product-tabs__tab--half) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
	.wcp-product-tabs:not([data-layout="columns"]) .wcp-product-tabs__main:has(> .wcp-product-tabs__tab--half) > * { grid-column: 1 / -1; }
	.wcp-product-tabs:not([data-layout="columns"]) .wcp-product-tabs__main > .wcp-product-tabs__tab--half { grid-column: auto; }

	.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;
	}

	/* Open = geen hoogteplafond: met 100vh viel een lange omschrijving (na "Lees meer") of de volledige
	   specificatietabel onderaan weg (#184). */
	.wcp-product-tabs__panel.is-collapsible.is-open {
		max-height: none;
		overflow: visible;
		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): staat in wcp-ui.css, zodat hij ook op merk- en categoriepagina's gestyled is. */

/* ── 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) solid var(--wcp-color-border); /* --wcp-border is bij Starter/Lijmkam een shorthand; als kleur gelezen was de hele declaratie ongeldig en viel de rijrand weg */
	text-align: left;
	vertical-align: top;
}
.wcp-specs th {
	width: 40%;
	font-weight: var(--wcp-font-weight-medium);
}

/* ── 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);
	border-bottom: 1px solid var(--wcp-color-border);
	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;

	/* Op smalle schermen scrollt de lijst horizontaal i.p.v. de pagina te verbreden. */
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.wcp-jump-nav__link {
	display: inline-block;
	padding: 0.75rem 0;
	color: var(--wcp-color-dark);
	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);
	border-bottom-color: var(--wcp-color-primary);
}
/* 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): + / − in een getint rondje. */
.wcp-pros-cons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.wcp-pros-cons__item { display: flex; align-items: center; gap: 0.85rem; line-height: 1.4; }
.wcp-pros-cons__item > i {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	color: var(--wcp-color-success);
	background-color: color-mix(in srgb, var(--wcp-color-success) 14%, var(--wcp-color-surface));
}
.wcp-pros-cons__item--con > i {
	color: var(--wcp-color-danger);
	background-color: color-mix(in srgb, var(--wcp-color-danger) 12%, var(--wcp-color-surface));
}
.wcp-pros-cons__item > i::before {
	width: 0.75rem;
	height: 0.75rem;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.wcp-pros-cons__item--con > i::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

.wcp-jump-nav__list::-webkit-scrollbar { display: none; }
.wcp-jump-nav__item { flex: 0 0 auto; }

/* ── Ontwerp van de secties (wcp_product_tabs_pairs / wcp_product_tabs_styles) ─────────────────────── */
/* Paren (2:1) en halve tabs delen één raster van 6 kolommen; al het andere blijft vol breed. */
@media (min-width: 992px) {
	.wcp-product-tabs:not([data-layout="columns"]) .wcp-product-tabs__main:has(> :is(.wcp-product-tabs__tab--half, .wcp-product-tabs__tab--pair-main)) {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		align-items: start;
	}
	.wcp-product-tabs:not([data-layout="columns"]) .wcp-product-tabs__main:has(> :is(.wcp-product-tabs__tab--half, .wcp-product-tabs__tab--pair-main)) > * { grid-column: 1 / -1; }
	.wcp-product-tabs:not([data-layout="columns"]) .wcp-product-tabs__main > .wcp-product-tabs__tab--half { grid-column: span 3; }
	.wcp-product-tabs:not([data-layout="columns"]) .wcp-product-tabs__main > .wcp-product-tabs__tab--pair-main { grid-column: span 4; align-self: stretch; }
	.wcp-product-tabs:not([data-layout="columns"]) .wcp-product-tabs__main > .wcp-product-tabs__tab--pair-side { grid-column: span 2; align-self: stretch; }
	.wcp-product-tabs__tab:is(.wcp-product-tabs__tab--pair-main, .wcp-product-tabs__tab--pair-side) > .wcp-product-tabs__panel { height: 100%; }
}

/* Kaart: witte, afgeronde vlakken (Productinformatie, Voor- en nadelen, Reviews). */
.wcp-product-tabs__tab--card > .wcp-product-tabs__panel {
	box-sizing: border-box;
	padding: clamp(1.5rem, 3vw, 3rem);
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background-color: var(--wcp-color-surface);
}
.wcp-product-tabs__tab--card .wcp-product-tabs__title { margin-top: 0; }
.wcp-product-tabs__tab--card > .wcp-product-tabs__panel > :last-child { margin-bottom: 0; }
#tab-description .wcp-product-tabs__panel { color: color-mix(in srgb, var(--wcp-color-text) 80%, transparent); line-height: 1.75; }
#tab-description .wcp-product-tabs__panel :is(h2, h3, h4, strong) { color: var(--wcp-color-text); }
#tab-description .wcp-product-tabs__panel > .wcp-product-tabs__title { line-height: 1.2; }
#tab-description .wcp-product-tabs__panel :is(h2, h3, h4):not(.wcp-product-tabs__title) { margin: 1.5em 0 0.5em; font-size: 1.25rem; line-height: 1.3; }

/* Titel + intro links, inhoud rechts (FAQ). */
.wcp-product-tabs__head > :last-child { margin-bottom: 0; }
.wcp-product-tabs__intro { margin: 0.5rem 0 0; color: color-mix(in srgb, var(--wcp-color-text) 80%, transparent); }
.wcp-product-tabs__intro-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.75rem;
	color: var(--wcp-color-primary);
	font-weight: var(--wcp-font-weight-semibold, 600);
	text-decoration: none;
}
.wcp-product-tabs__intro-link::after { content: '\2192'; transition: transform 0.15s ease; }
.wcp-product-tabs__intro-link:hover { text-decoration: underline; }
.wcp-product-tabs__intro-link:hover::after { transform: translateX(0.2rem); }
@media (min-width: 992px) {
	.wcp-product-tabs__tab--aside > .wcp-product-tabs__panel {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: 2rem;
		align-items: start;
	}
	.wcp-product-tabs__tab--aside .wcp-product-tabs__head { position: sticky; top: var(--wcp-tabs-sticky-top, 6rem); }
	.wcp-product-tabs__tab--aside .wcp-product-tabs__head .wcp-product-tabs__title { margin-top: 0; }
}
@media (max-width: 991.98px) {
	.wcp-product-tabs__tab--aside .wcp-product-tabs__head { margin-bottom: 1.25rem; }
}
.wcp-product-tabs__tab--aside .wcp-faq-list { max-width: none; margin-bottom: 0; }

/* Specificaties: na wcp_product_specs_visible rijen ingeklapt. */
.wcp-specs-wrap.is-clamped:not(.is-open) .wcp-specs__extra { display: none; }
.wcp-specs-wrap.is-clamped:not(.is-open) .wcp-specs tbody tr:not(.wcp-specs__extra):nth-last-child(1 of :not(.wcp-specs__extra)) > :is(th, td) { border-bottom: 0; }
.wcp-specs__toggle { margin-top: 0.25rem; padding: 0.7rem 1.5rem; border-color: var(--wcp-color-border); background-color: var(--wcp-color-surface); color: var(--wcp-color-primary); font-weight: var(--wcp-font-weight-semibold, 600); }
.wcp-specs__toggle:hover { border-color: var(--wcp-color-primary); background-color: var(--wcp-color-surface); color: var(--wcp-color-primary); }