@charset "UTF-8";
/* WC Plus — lean UI-helper styling. Structuur + gedrag, geen smaak.
   Bootstrap-vrij; overschrijfbaar via custom properties in het shop-theme.
   De standaardwaarden van alle --wcp-*-tokens (z-index-ladder, vlakken, offcanvas-
   breedte) staan in wcp-tokens.css, waar dit bestand van afhangt. */

/* Alles wat een dialog, offcanvas, collapse, dropdown of accordion aanstuurt is klikbaar.
   De cursor hing tot nu aan sierklassen (bv. .wcp-attr-help in single-product.css), dus
   dezelfde trigger elders in de markup kreeg er geen — zichtbaar bij het help-icoon naast
   een attribuutlabel, dat wel data-wcp-dialog draagt maar niet die klasse. De cursor hoort
   bij het gedrag, niet bij de opmaak. Knoppen en links hebben hem al van de browser; dit is
   voor de <i>'s en <span>'s met role/tabindex. */
[data-wcp-dialog],
[data-wcp-offcanvas],
[data-wcp-collapse],
[data-wcp-dropdown],
[data-wcp-accordion],
[data-wcp-dismiss] {
	cursor: pointer;
}

/* ── Backdrop ── */
.wcp-backdrop {
	position: fixed;
	inset: 0;
	background: var(--wcp-backdrop-bg);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
	z-index: var(--wcp-z-backdrop);
}
.wcp-backdrop.is-open {
	opacity: 1;
	visibility: visible;
}

/* ── Offcanvas ── */
/* Gesloten offcanvas-panelen staan met translateX buiten het scherm; een fixed element daar
   veroorzaakt in Chrome een horizontale scrollbar. `overflow-x: clip` snijdt dat af zonder een
   scroll-container te worden, zodat position: sticky blijft werken. */
html { overflow-x: clip; }

.wcp-offcanvas {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: var(--wcp-z-overlay);
	width: min(var(--wcp-offcanvas-width), 100%);
	background: var(--wcp-surface);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.25s ease;
	display: flex;
	flex-direction: column;
	overflow: auto;
}
.wcp-offcanvas[data-side="left"] {
	right: auto;
	left: 0;
	transform: translateX(-100%);
}
.wcp-offcanvas.is-open {
	transform: translateX(0);
}

/* ── Dialog ── */
dialog.wcp-dialog {
	width: min(900px, calc(100% - 2rem)); /* uitlegdialogen: leesbare regellengte, geen schermbrede tekst */
	max-width: 900px;
	border: 0;
	padding: 0;
	border-radius: var(--wcp-radius);
	background: var(--wcp-surface);
}
dialog.wcp-dialog::backdrop {
	background: var(--wcp-backdrop-bg);
}
/* Fallback voor browsers zonder <dialog>. */
.wcp-dialog-fallback {
	position: fixed;
	inset: 0;
	margin: auto;
	width: max-content;
	max-width: min(900px, calc(100% - 2rem));
	height: max-content;
	max-height: calc(100% - 2rem);
	z-index: var(--wcp-z-overlay);
	background: var(--wcp-surface);
	display: none;
}
.wcp-dialog-fallback.is-open {
	display: block;
}

/* ── Dropdown ── */
.wcp-dropdown {
	position: relative;
}
.wcp-dropdown__menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 100%;
	display: none;
	z-index: var(--wcp-z-dropdown);
	background: var(--wcp-surface);
}
.wcp-dropdown.is-open .wcp-dropdown__menu {
	display: block;
}

/* ── Tooltip ── */
.wcp-tooltip {
	position: absolute;
	transform: translate(-50%, calc(-100% - 0.5rem));
	padding: 0.25rem 0.5rem;
	background: var(--wcp-tooltip-bg);
	color: var(--wcp-tooltip-fg);
	font-size: 0.8125rem;
	line-height: 1.3;
	border-radius: 0.25rem;
	max-width: min(18rem, calc(100vw - 1rem)); /* lange tekst (productnaam + prijs) breekt af i.p.v. buiten beeld */
	width: max-content;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
	z-index: var(--wcp-z-tooltip);
}
.wcp-tooltip.is-open {
	opacity: 1;
}

/* ── Visually hidden (a11y) ──
   WP/WC output .screen-reader-text spans (e.g. after loop add-to-cart buttons);
   without this rule they take up layout space (flex/grid rows). Standard WP pattern. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal !important;
}

/* WooCommerce' link "Bekijk winkelwagen" naast een koopknop na het toevoegen: de toegevoegd-canvas/toast van WC+
   heeft al "Naar winkelwagen" (wcp-add-to-cart.js zet de knop zelf kort op "Toegevoegd aan winkelwagen"). */
a.added_to_cart.wc-forward { display: none !important; }

/* ── Read-more component (.wcp-collapse) ─────────────────── */
/* De standaard (--wcp-collapse-clamp, --wcp-collapse-fade) staat in wcp-tokens.css en niet
   als eigen declaratie op .wcp-collapse: een definitie daar zit dichter op het paneel dan de
   :root van een thema, en overruled dus het token dat een shop zet. Het thema-contract belooft
   juist dat --wcp-* instelbaar is. */
.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));
	pointer-events: none;
}

/* Geen plafond. Hier stond 200vh, zodat er iets te animeren viel (naar 'none' kun je niet
   animeren). Maar een beschrijving die hoger is dan twee schermen bleef daardoor ook ná
   "Lees meer" afgekapt, zonder fade (die zet .is-open hieronder juist uit) en dus zonder
   enige aanwijzing dat er meer stond. Op mobiel telt dat dubbel: smalle kolom = hoge tekst,
   en vh is er klein. Gemeten op 390x844: 3239px tekst tegen een plafond van 1688px (#73).
   De open/dicht-animatie vervalt hiermee; wil je die terug, dan moet wcp-ui.js tijdens de
   overgang een echte pixelhoogte zetten en die na transitionend weer loslaten. */
.wcp-collapse__panel.is-collapsible.is-open {
	max-height: none;
}

/* Past de tekst binnen de clamp (JS: wcp-ui.js), dan geen fade en geen knop. */
.wcp-collapse--fits .wcp-collapse__panel.is-collapsible { max-height: none; overflow: visible; }
.wcp-collapse--fits .wcp-collapse__panel.is-collapsible::after,
.wcp-collapse--fits .wcp-collapse__toggle { display: none; }

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