@charset "UTF-8";
/* WC Plus — lean UI-helper styling. Structuur + gedrag, geen smaak.
   Bootstrap-vrij; overschrijfbaar via custom properties in het shop-theme. */

.wcp-ui,
:root {
	--wcp-z-dropdown: 1030;
	--wcp-z-backdrop: 1040;
	--wcp-z-overlay: 1050;
	--wcp-z-tooltip: 1060;
	--wcp-surface: #fff;
}

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

/* ── Offcanvas ── */
.wcp-offcanvas {
	--wcp-offcanvas-width: 22rem;
	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 {
	border: 0;
	padding: 0;
	background: var(--wcp-surface);
}
dialog.wcp-dialog::backdrop {
	background: var(--wcp-backdrop-bg, rgba(0, 0, 0, 0.5));
}
/* Fallback voor browsers zonder <dialog>. */
.wcp-dialog-fallback {
	position: fixed;
	inset: 0;
	margin: auto;
	width: max-content;
	max-width: 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, #111);
	color: var(--wcp-tooltip-fg, #fff);
	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;
}