@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;
	white-space: nowrap;
	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;
}