/**
 * WooCommerce styles: product cards, archives, single product, cart/checkout touches.
 * Loaded only when WooCommerce is active. Uses the tokens defined in theme.css.
 */


	/* ---------- Archive toolbar ---------- */
	.px-shop-toolbar {
		gap: 0.75rem 1.5rem;
		padding-block: 0.75rem;
		border-block: 1px solid var(--px-border);
		margin-block: 0.5rem 1.5rem !important;

		& p, & form { margin: 0; }
		& select {
			font: inherit;
			font-size: var(--wp--preset--font-size--small);
			padding: 0.5rem 2.25rem 0.5rem 0.75rem;
			border: 1px solid var(--px-border-strong);
			border-radius: var(--px-radius-s);
			background-color: var(--px-white);
		}
	}

	/* ---------- Product lists (archives, rows on pages, "Bekijk ook") ----------
	   One grid for every list: as many columns as fit at >= 12.5rem, at most five,
	   two on phones. WooCommerce's product template and core's post template alike. */
	.px-products .wc-block-product-template.wc-block-product-template,
	.px-products.wp-block-post-template.wp-block-post-template {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 12.5rem), calc((100% - 4 * 1rem) / 5)), 1fr));
		gap: 3rem 1rem !important;
		margin: 0;
		padding: 0;

		& > li { inline-size: auto !important; margin: 0 !important; }
	}
	@media (max-width: 599px) {
		.px-products .wc-block-product-template.wc-block-product-template,
		.px-products.wp-block-post-template.wp-block-post-template {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 2.25rem 0.75rem !important;
		}
	}
	.px-card {
		position: relative;
		block-size: 100%;
		gap: 0.4rem !important;
		padding: 0.75rem;
		border: 1px solid var(--px-border);
		border-radius: var(--px-radius-m);
		background: var(--px-white);
		transition: border-color var(--px-ease), box-shadow var(--px-ease), transform var(--px-ease);

		&:hover {
			border-color: color-mix(in srgb, var(--px-red) 45%, var(--px-border));
			box-shadow: var(--wp--preset--shadow--card);
		}

		& .wc-block-components-product-image {
			margin: 0 0 0.35rem !important;
			border-radius: var(--px-radius-s);
			overflow: hidden;
			background: var(--px-white);
		}
		& .wc-block-components-product-image img {
			aspect-ratio: 1;
			object-fit: contain;
			transition: transform 400ms ease;
		}
		&:hover .wc-block-components-product-image img { transform: scale(1.04); }
	}
	.px-card__title {
		font-size: var(--wp--preset--font-size--small) !important;
		font-weight: 600;
		line-height: 1.35;
		margin: 0 !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;

		& a { color: var(--px-text); text-decoration: none; }
		& a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */
		& a:hover { color: var(--px-red); }
	}
	.px-card__price {
		margin: auto 0 0 !important;
		font-size: var(--wp--preset--font-size--small) !important;
		text-align: start !important;
	}
	/* Prices */
	.px-price-from {
		font-weight: 400;
		font-size: 0.85em;
		color: var(--px-muted);
	}
	.px-price-on-request { font-weight: 600; color: var(--px-red); }
	.woocommerce-Price-amount { font-weight: 700; color: var(--px-text); }
	.woocommerce-price-suffix { font-size: 0.75em; font-weight: 400; color: var(--px-muted); margin-inline-start: 0.2em; }

	/* Empty category */
	.px-empty {
		text-align: center;
		padding: clamp(2rem, 6vw, 4rem) 1rem;
		background: var(--px-surface);
		border-radius: var(--px-radius-l);

		& .wp-block-buttons { justify-content: center; }
	}

	/* Pagination */
	.wp-block-query-pagination {
		margin-block: 2rem 0 !important;
		gap: 0.35rem;

		& .page-numbers,
		& a {
			min-inline-size: 2.5rem;
			block-size: 2.5rem;
			display: inline-grid;
			place-items: center;
			padding-inline: 0.75rem;
			border: 1px solid var(--px-border);
			border-radius: var(--px-radius-s);
			color: var(--px-text);
			text-decoration: none;
		}
		& .page-numbers.current { background: var(--px-red); border-color: var(--px-red); color: var(--px-white); }
		& a:hover { border-color: var(--px-red); color: var(--px-red); }
	}

	/* ---------- Single product ---------- */
	.px-product {
		padding-block: 1.25rem 0;

		& > .wc-block-breadcrumbs { color: var(--px-muted); }
		& > .wc-block-breadcrumbs a { color: inherit; text-decoration: none; }
	}
	/* Add to cart */
	.wp-block-add-to-cart-form form.cart {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
		align-items: stretch;
		margin-block: 1.5rem 0.75rem;

		& .quantity input {
			font: inherit;
			inline-size: 5.5rem;
			block-size: 100%;
			min-block-size: 3rem;
			text-align: center;
			border: 1px solid var(--px-border-strong);
			border-radius: var(--px-radius-s);
		}
		& .single_add_to_cart_button {
			flex: 1 1 12rem;
			min-block-size: 3rem;
		}
	}
	.px-quote-button { margin-block: 0 !important; }
	.px-quote-button .wp-block-button__link { inline-size: 100%; text-align: center; }
	.px-product__summary:not(:has(form.cart)) .px-quote-button .wp-block-button__link {
		/* Quote-only product: make the quote button the primary action. */
		background: var(--px-red);
		color: var(--px-white);
		box-shadow: none;
		margin-block-start: 1.5rem;
	}

	.px-related {
		padding-block: 2rem 0;
		border-block-start: 1px solid var(--px-border);

		& h2 { margin-block-start: 0; }
	}

	/* ---------- Notices, store notice ---------- */
	.woocommerce-store-notice,
	p.demo_store {
		background: var(--px-text) !important;
		font-size: var(--wp--preset--font-size--small);
		position: fixed;
		inset-block-end: 0;
		inset-block-start: auto !important;

		& a { color: inherit; font-weight: 600; }
	}

	.wc-block-components-notice-banner {
		border-radius: var(--px-radius-m);
	}

	/* ---------- Cart & checkout (block based) ---------- */
	.wc-block-cart,
	.wc-block-checkout {
		& .wc-block-components-button:not(.is-link) {
			background: var(--px-red);
			color: var(--px-white);
			border-radius: var(--px-radius-control);
			font-weight: 700;
		}
		& .wc-block-components-button:not(.is-link):hover { background: var(--px-red-dark); }
	}


/* =====================================================================
   Product page (v4): gallery panel with thumbnail rail, ordering in three
   steps (colour, logo positions, quantity), "Kies je maten" dialog.
   ===================================================================== */

.px-product__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	grid-template-areas:
		"gallery summary"
		"info    summary";
	align-items: start;
	gap: 0 clamp(1.5rem, 4vw, 3.5rem);
	margin-block: 1rem 3rem !important;

	& > * { margin: 0 !important; }
}
.px-product__gallery { grid-area: gallery; min-inline-size: 0; }
.px-product__summary { grid-area: summary; min-inline-size: 0; }
.px-product__info    { grid-area: info; min-inline-size: 0; }

@media (max-width: 899px) {
	.px-product__layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "gallery" "summary" "info";
		gap: 1.5rem;
	}
}

/* Gallery: photo on a soft panel, thumbnail rail on wide screens */
.px-product__gallery .wp-block-woocommerce-product-image-gallery { max-inline-size: none !important; inline-size: 100%; }
.px-product__gallery .woocommerce-product-gallery {
	inline-size: 100% !important;
	max-inline-size: none !important;
	float: none !important;
	opacity: 1 !important;          /* WooCommerce fades it in after its script: bad for LCP */
	transition: none !important;
}
.px-product__gallery .flex-viewport,
.px-product__gallery .woocommerce-product-gallery__wrapper {
	border-radius: var(--px-radius-l);
	background: var(--px-surface);
	overflow: hidden;
}
.px-product__gallery .woocommerce-product-gallery__image img:not(.zoomImg) {
	aspect-ratio: 4 / 5 !important;
	object-fit: contain;
	inline-size: 100%;
	block-size: auto;
	background: var(--px-surface);
	mix-blend-mode: multiply;       /* white photo backgrounds blend into the panel */
}
.px-product__gallery .flex-control-thumbs {
	display: grid !important;
	grid-auto-flow: column;           /* one swipeable row below the photo */
	grid-auto-columns: 56px;
	gap: 0.5rem;
	margin: 0.6rem 0 0 !important;
	overflow-x: auto;
	scrollbar-width: none;

	& li { inline-size: auto !important; float: none !important; margin: 0 !important; }
	& img {
		aspect-ratio: 4 / 5 !important;
		object-fit: contain;
		border-radius: var(--px-radius-m);
		background: var(--px-surface);
		border: 1px solid transparent;
		opacity: 1 !important;
		mix-blend-mode: multiply;
		transition: border-color var(--px-ease);
	}
	& img:hover { border-color: var(--px-border); }
	& img.flex-active { border-color: var(--px-text); }
}
@media (min-width: 1024px) {
	.px-product__gallery .woocommerce-product-gallery--with-images {
		display: grid !important;
		grid-template-columns: 64px 1fr;
		gap: 0.75rem;
		align-items: start;
	}
	.px-product__gallery .flex-viewport,
	.px-product__gallery .woocommerce-product-gallery__wrapper { grid-column: 2; grid-row: 1; }
	.px-product__gallery .flex-control-thumbs {
		grid-column: 1;
		grid-row: 1;
		grid-auto-flow: row;
		grid-template-columns: 1fr !important;
		margin: 0 !important;
		overflow-x: hidden;
		max-block-size: 640px;
		overflow-y: auto;
		scrollbar-width: none;
	}
}

/* Summary column */
.px-product__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	margin: 0 0 0.35rem !important;

	& a { color: var(--px-muted); text-decoration: none; }
	& a:hover { color: var(--px-red); }
}
.px-product__title {
	font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.2rem) !important;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0 0 0.35rem !important;
}
.px-product-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0;
	margin: 0.5rem 0 0 !important;
	font-size: var(--wp--preset--font-size--small);
	color: var(--px-muted);

	& strong { color: var(--px-text); font-weight: 700; }
	& span + span::before {
		content: "";
		display: inline-block;
		inline-size: 1px;
		block-size: 0.9em;
		margin-inline: 0.75rem;
		background: var(--px-border);
		vertical-align: -0.1em;
	}
}
.px-product__pricing {
	gap: 0.25rem 0.6rem !important;
	align-items: baseline !important;
	margin-block: 0.75rem 0.25rem !important;

	& .px-product__price { margin: 0 !important; font-size: 1.35rem !important; }
	& .px-product__price-note { margin: 0 !important; color: var(--px-muted); }
}
.px-product__excerpt { color: var(--px-muted); margin-block: 0.5rem 1rem !important; }
.px-product__summary:has(.px-config) > .px-quote-button { display: none; }
.px-product__usps {
	background: transparent !important;
	padding: 0 !important;
	margin-block: 1.5rem 0 !important;
}

/* ---------- Configurator ---------- */
.px-config { margin-block: 0 !important; }
.px-config__form { display: grid; gap: 0; }

.px-step {
	display: grid;
	gap: 0.75rem;
	min-inline-size: 0;
	margin: 0;
	padding: 1.1rem 0;
	border: 0;
	border-block-start: 1px solid var(--px-border);
}
.px-step__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 0.75rem;
	inline-size: 100%;
	padding: 0;
	float: left;                     /* lets the legend take part in the fieldset's grid */
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}
.px-step__head + * { clear: both; }
.px-step__num { color: var(--px-red); }
.px-step__value { font-weight: 400; font-size: var(--wp--preset--font-size--small); color: var(--px-muted); }
.px-step__badge {
	padding: 0.15rem 0.55rem;
	border-radius: var(--px-radius-pill);
	background: var(--px-success-bg);
	color: var(--px-success-text);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	white-space: nowrap;
}
.px-step__note { margin: 0; font-size: var(--wp--preset--font-size--x-small); color: var(--px-muted); }
.px-color-name { display: none; }

/* Step 1: colours */
.px-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.px-swatch {
	position: relative;
	display: block;
	cursor: pointer;

	& input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
}
.px-swatch__dot {
	display: block;
	inline-size: 2.1rem;
	block-size: 2.1rem;
	border-radius: var(--px-radius-control);
	background: var(--px-swatch, var(--px-border));
	box-shadow: inset 0 0 0 1px var(--px-hairline);
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: outline-color var(--px-ease), transform var(--px-ease);
}
.px-swatch:hover .px-swatch__dot { transform: scale(1.06); }
.px-swatches__check { position: absolute; opacity: 0; pointer-events: none; }
.px-swatches__check:not(:checked) + .px-swatches .px-swatch.is-extra:not(:has(input:checked)) { display: none; }
.px-swatches__more .px-swatch__dot {
	display: grid;
	place-items: center;
	background: var(--px-white);
	box-shadow: inset 0 0 0 1px var(--px-border);

	&::before {
		content: "";
		inline-size: 0.85rem;
		block-size: 0.85rem;
		background: var(--px-text);
		mask: var(--px-i-plus) center / contain no-repeat;
		transition: transform var(--px-ease);
	}
}
.px-swatches__check:checked + .px-swatches .px-swatches__more .px-swatch__dot::before { transform: rotate(45deg); }
.px-swatches__check:focus-visible + .px-swatches .px-swatches__more .px-swatch__dot { outline-color: var(--px-red); }
.px-swatch input:checked + .px-swatch__dot { outline-color: var(--px-text); }
.px-swatch input:focus-visible + .px-swatch__dot { outline-color: var(--px-red); }

/* Step 2: logo positions. Unchosen = "+ pill"; chosen = card on top (order), pure CSS. */
.px-places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(var(--px-control-h), auto); align-items: start; gap: 0.5rem; }
@media (max-width: 480px) { .px-places { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.px-places__more {
	order: 1;
	grid-column: 1 / -1;
	margin: 0.35rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--px-muted);
}
.px-places:not(:has(.px-place__check:checked)) .px-places__more,
.px-places:not(:has(.px-place__check:not(:checked))) .px-places__more { display: none; }
.px-place { order: 2; display: contents; }
.px-place__check { position: absolute; opacity: 0; pointer-events: none; }
.px-place__pill {
	order: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-block-size: var(--px-control-h);
	padding: 0.4rem 0.6rem;
	border-radius: var(--px-radius-control);
	background: var(--px-white);
	border: 1px solid var(--px-border);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	transition: border-color var(--px-ease), background-color var(--px-ease);

	&::before {
		content: "";
		inline-size: 0.75rem;
		block-size: 0.75rem;
		background: currentColor;
		mask: var(--px-i-plus) center / contain no-repeat;
	}
	&::before { inline-size: 0.65rem; block-size: 0.65rem; flex: none; }
	&:hover { border-color: var(--px-text); }
}
.px-place__check:focus-visible + .px-place__pill { outline: 2px solid var(--px-red); outline-offset: 2px; }
.px-place__card { display: none; }
.px-place__check:checked + .px-place__pill { display: none; }
.px-place__check:checked ~ .px-place__card {
	order: 0;
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 2.75rem 1fr auto 2rem;
	align-items: center;
	gap: 0.75rem;
	padding: 0.55rem 0.6rem 0.55rem 0.75rem;
	border: 1px solid var(--px-text);
	border-radius: var(--px-radius-control);
	background: var(--px-white);
}
.px-place__icon svg { display: block; inline-size: 2.75rem; block-size: 2.75rem; }
.px-icon__body { fill: var(--px-surface); stroke: var(--px-border-hover); stroke-width: 1.2; stroke-linejoin: round; }
.px-icon__mark { fill: var(--px-red); }
.px-place__name { font-weight: 700; font-size: var(--wp--preset--font-size--small); }
.px-place__tech {
	display: inline-flex;
	gap: 0.35rem;

	& label { position: relative; cursor: pointer; }
	& input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
	& span {
		display: block;
		padding: 0.4rem 0.75rem;
		border: 1px solid var(--px-border);
		border-radius: var(--px-radius-control);
		background: var(--px-white);
		font-size: var(--wp--preset--font-size--x-small);
		font-weight: 500;
		color: var(--px-text);
		transition: border-color var(--px-ease), box-shadow var(--px-ease);
	}
	& label:hover span { border-color: var(--px-border-hover); }
	& input:checked + span { border-color: var(--px-text); box-shadow: inset 0 0 0 1px var(--px-text); font-weight: 600; }
	& input:focus-visible + span { outline: 2px solid var(--px-red); outline-offset: 2px; }
}.px-place__remove {
	display: grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	cursor: pointer;

	&::before {
		content: "";
		inline-size: 0.85rem;
		block-size: 0.85rem;
		background: var(--px-muted);
		mask: var(--px-i-plus) center / contain no-repeat;
		transform: rotate(45deg);
	}
	&:hover { background: var(--px-surface); }
}
@media (max-width: 480px) {
	.px-place__check:checked ~ .px-place__card {
		grid-template-columns: 2.5rem 1fr 2rem;
		& .px-place__tech { grid-column: 2 / 4; grid-row: 2; justify-self: start; }
	}
}

/* Step 3: quantity presets (compact boxes, saving as a small tag) */
.px-qty {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-block-start: 0.4rem; /* room for the saving tags */
}
.px-qty__opt {
	position: relative;
	display: grid;
	place-items: center;
	min-block-size: var(--px-control-h);
	padding: 0 0.25rem;
	border: 1px solid var(--px-border);
	border-radius: var(--px-radius-control);
	background: var(--px-white);
	cursor: pointer;
	transition: border-color var(--px-ease), box-shadow var(--px-ease);

	& > input[type="radio"] { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
	&:hover { border-color: var(--px-border-hover); }
	&:has(> input:checked) { border-color: var(--px-text); box-shadow: inset 0 0 0 1px var(--px-text); }
	&:has(> input:focus-visible) { outline: 2px solid var(--px-red); outline-offset: 2px; }
}
.px-qty__n { font-size: var(--wp--preset--font-size--small); font-weight: 600; font-variant-numeric: tabular-nums; }
.px-qty__save {
	position: absolute;
	inset-block-start: -0.55rem;
	inset-inline-end: -0.3rem;
	padding: 0.05rem 0.3rem;
	border-radius: var(--px-radius-pill);
	background: var(--px-green);
	color: var(--px-white);
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1.4;
	pointer-events: none;

	&[hidden] { display: none; }
}
.px-qty__opt { flex: 1 1 3.4rem; }
.px-qty__opt--custom { flex: 1.6 1 5.75rem; padding: 0; } /* wide enough for "Anders" */
.px-qty__custom {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	padding: 0 0.5rem;
	font: inherit;
	font-size: 1rem;
	text-align: center;
	background: transparent;
	border: 0;
	border-radius: inherit;
	-moz-appearance: textfield;
	appearance: textfield;

	&::-webkit-outer-spin-button,
	&::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
	&::placeholder { color: var(--px-muted); font-size: var(--wp--preset--font-size--small); }
	&:focus { outline: none; }
}
/* Total + actions */
.px-config__summary {
	display: grid;
	gap: 0.75rem;
	padding-block-start: 1.1rem;
	border-block-start: 1px solid var(--px-border);
}
.px-total { display: grid; gap: 0.15rem; font-variant-numeric: tabular-nums; }
.px-total__price { font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.px-total__meta { font-size: var(--wp--preset--font-size--x-small); color: var(--px-muted); }
.px-total__saving {
	justify-self: start;
	margin-block-start: 0.35rem;
	padding: 0.2rem 0.6rem;
	border-radius: var(--px-radius-pill);
	background: color-mix(in srgb, var(--px-green) 12%, var(--px-white));
	color: var(--px-success-text);
	font-size: var(--wp--preset--font-size--x-small);

	&[hidden] { display: none; }
}
.px-config__quote {
	justify-self: center;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--px-text);
	text-underline-offset: 3px;

	&:hover { color: var(--px-red); }
}
.px-config__note { margin: 0; text-align: center; font-size: var(--wp--preset--font-size--x-small); color: var(--px-muted); }

/* ---------- Sizes: inline without JavaScript, a modal dialog with it ---------- */
.px-sizes {
	display: grid;
	gap: 0.75rem;
	padding-block: 1.1rem;
	border-block-start: 1px solid var(--px-border);
}
.px-sizes__head { position: relative; }
.px-sizes__title { margin: 0; font-size: var(--wp--preset--font-size--medium); }
.px-sizes__intro { margin: 0.25rem 2.5rem 0 0; font-size: var(--wp--preset--font-size--x-small); color: var(--px-muted); }
.px-sizes__close,
.px-sizes__product,
.px-sizes__pct,
.px-size__pct,
.px-size__bar,
.px-sizes__foot,
.px-stepper__btn { display: none; }
.px-config.is-enhanced .px-config__summary .px-config__note { margin-block-start: -0.25rem; }

.px-sizegrid { display: none; gap: 0; } /* the chosen colour's grid is shown by inline :has() rules */
.px-size {
	display: grid;
	grid-template-columns: 3.25rem 1fr auto;
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.45rem;
	border-block-end: 1px solid var(--px-border);

	&:last-child { border-block-end: 0; }
	&.is-unavailable { opacity: 0.45; }
}
.px-size__name { font-weight: 700; font-size: var(--wp--preset--font-size--small); }
.px-size__stock {
	grid-column: 2;
	grid-row: 1;
	font-size: 0.6875rem;
	color: var(--px-success-text);
	white-space: nowrap;
}
.px-size.is-unavailable .px-size__stock { color: var(--px-muted); }
.px-stepper { grid-column: 3; display: inline-flex; align-items: center; gap: 0.25rem; }
.px-size__qty {
	box-sizing: border-box;
	inline-size: 3.5rem;
	block-size: 2.1rem;
	margin: 0;
	padding: 0 0.2rem;
	font: inherit;
	font-size: 1rem; /* ≥16px prevents zoom on iOS */
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--px-text);
	background: var(--px-white);
	border: 1px solid var(--px-border-strong);
	border-radius: var(--px-radius-s);
	-moz-appearance: textfield;
	appearance: textfield;

	&::-webkit-outer-spin-button,
	&::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
	&::placeholder { color: var(--px-border-hover); }
	&:focus { outline: none; border-color: var(--px-red); }
	&:disabled { background: transparent; border-style: dashed; }
}

/* Dialog */
.px-sizes-dialog {
	box-sizing: border-box;
	inline-size: min(34rem, calc(100vw - 2rem));
	max-block-size: calc(100dvh - 2rem);
	padding: 0;
	border: 0;
	border-radius: var(--px-radius-l);
	box-shadow: var(--px-shadow-modal);
	color: var(--px-text);
	overscroll-behavior: contain;

	&::backdrop { background: var(--px-backdrop); }
	&[open] { animation: px-pop 180ms ease-out; }

	& .px-sizes { padding: 1.4rem 1.4rem 0; border: 0; gap: 1rem; }
	& .px-sizes__close {
		position: absolute;
		inset-block-start: -0.25rem;
		inset-inline-end: -0.25rem;
		display: grid;
		place-items: center;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		padding: 0;
		border: 1px solid var(--px-border);
		border-radius: 50%;
		background: var(--px-white);
		cursor: pointer;

		&::before {
			content: "";
			inline-size: 0.9rem;
			block-size: 0.9rem;
			background: var(--px-text);
			mask: var(--px-i-plus) center / contain no-repeat;
			transform: rotate(45deg);
		}
		&:hover { background: var(--px-surface); }
	}
	& .px-sizes__title { font-size: 1.35rem; }
	& .px-sizes__product {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding-block-end: 0.75rem;
		border-block-end: 1px solid var(--px-border);
		font-size: var(--wp--preset--font-size--small);

		& img { inline-size: 3.5rem; block-size: auto; aspect-ratio: 4 / 5; object-fit: contain; border-radius: var(--px-radius-m); background: var(--px-surface); mix-blend-mode: multiply; }
		& strong { display: block; }
	}
	& .px-sizes__meta { color: var(--px-muted); font-size: var(--wp--preset--font-size--x-small); }
	& .px-size {
		grid-template-columns: 3rem 2.75rem 1fr auto;
		border-block-end: 0;
		padding-block: 0.3rem;
	}
	& .px-size__pct { display: block; font-size: var(--wp--preset--font-size--x-small); color: var(--px-muted); font-variant-numeric: tabular-nums; }
	& .px-size__bar {
		display: block;
		block-size: 0.4rem;
		border-radius: var(--px-radius-pill);
		background: var(--px-surface);
		overflow: hidden;

		& span { display: block; block-size: 100%; inline-size: var(--px-share, 0%); background: var(--px-text); border-radius: inherit; transition: inline-size 200ms ease; }
	}
	& .px-size__stock { display: none; grid-column: 3; grid-row: 2; margin-block-start: -0.25rem; }
	& .px-size.is-low .px-size__stock { display: block; color: var(--px-warning-text); }
	& .px-size.is-unavailable .px-size__stock { display: block; grid-row: 1; }
	& .px-size.is-unavailable .px-size__bar { visibility: hidden; }
	& .px-stepper { grid-column: 4; grid-row: 1; gap: 0; border: 1px solid var(--px-border); border-radius: var(--px-radius-control); padding: 0.15rem; }
	& .px-stepper__btn {
		display: grid;
		place-items: center;
		inline-size: 1.9rem;
		block-size: 1.9rem;
		padding: 0;
		border: 0;
		border-radius: var(--px-radius-s);
		background: transparent;
		font: inherit;
		font-size: 1.1rem;
		line-height: 1;
		color: var(--px-text);
		cursor: pointer;

		&:hover { background: var(--px-surface); }
	}
	& .px-size__qty { inline-size: 2.75rem; block-size: 1.9rem; border: 0; background: transparent; font-weight: 600; }
	& .px-size.is-unavailable .px-stepper { visibility: hidden; }
	& .px-sizes__foot {
		position: sticky;
		inset-block-end: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin-inline: -1.4rem;
		padding: 1rem 1.4rem;
		background: var(--px-white);
		border-block-start: 1px solid var(--px-border);
	}
	& .px-sizes__sum { display: grid; margin: 0; font-size: var(--wp--preset--font-size--x-small); color: var(--px-muted); font-variant-numeric: tabular-nums; }
	& .px-sizes__sum strong { color: var(--px-text); font-size: var(--wp--preset--font-size--small); }
	& .px-config__confirm { inline-size: auto; }
}
.px-config.is-enhanced > form > .px-sizes { display: none; } /* until moved into the dialog */
@keyframes px-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .px-sizes-dialog[open] { animation: none; } }

/* ---------- Product information accordion (under the gallery) ---------- */
.px-product-info {
	margin-block-start: 1.5rem !important;
	border-block-start: 1px solid var(--px-border);
}
.px-product-info__section {
	border-block-end: 1px solid var(--px-border);

	& summary {
		list-style: none;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1rem 0.25rem;
		font-weight: 700;
		font-size: var(--wp--preset--font-size--medium);
	}
	& summary::-webkit-details-marker { display: none; }
	& summary::after {
		content: "";
		inline-size: 1rem;
		block-size: 1rem;
		background: var(--px-red);
		mask: var(--px-i-plus) center / contain no-repeat;
		transition: transform var(--px-ease);
	}
	&[open] summary::after { transform: rotate(45deg); }
	& summary:hover { color: var(--px-red); }
}
.px-product-info__body {
	padding: 0 0.25rem 1.25rem;
	font-size: var(--wp--preset--font-size--small);

	& p:first-child { margin-block-start: 0; }
}
.px-spec-table,
.px-size-table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);

	& th, & td { padding: 0.5rem 0.65rem; border-block-end: 1px solid var(--px-border); text-align: start; vertical-align: top; }
}
.px-spec-table th { inline-size: 38%; font-weight: 600; color: var(--px-muted); }
.px-size-table {
	& thead th { background: var(--px-surface); font-weight: 600; }
	& td, & thead th:not(:first-child) { text-align: center; }
}
.px-table-scroll { overflow-x: auto; }

/* =====================================================================
   Shop filters: sidebar on desktop, slide-in drawer below 1024px.
   ===================================================================== */

.px-shop {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	align-items: start;
	gap: 2rem;

	& > * { margin: 0 !important; }
}
.px-shop__results { min-inline-size: 0; }

.px-filters { position: relative; }
.px-filters__toggle,
.px-filters__close,
.px-filters__backdrop { display: none; }
.px-filters__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.px-filters__title { margin: 0 0 0.5rem; font-size: var(--wp--preset--font-size--large); }

/* Active filters */
.px-filters__active {
	display: grid;
	gap: 0.5rem;
	padding-block: 0.25rem 1rem;
	border-block-end: 1px solid var(--px-border);
}
.px-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.px-chip-remove {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.55rem;
	border-radius: var(--px-radius-pill);
	background: var(--px-text);
	color: var(--px-white);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-decoration: none;

	&::after { content: "×"; font-size: 1.1em; line-height: 1; opacity: 0.8; }
	&:hover { background: var(--px-red); color: var(--px-white); }
}
.px-filters__reset { font-size: var(--wp--preset--font-size--x-small); font-weight: 600; justify-self: start; }

/* Facet sections */
.px-facet {
	border-block-end: 1px solid var(--px-border);

	& > summary {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.85rem 0;
		cursor: pointer;
		list-style: none;
		font-weight: 700;
		font-size: var(--wp--preset--font-size--small);
	}
	& > summary::-webkit-details-marker { display: none; }
	& > summary::after {
		content: "";
		margin-inline-start: auto;
		inline-size: 0.6rem;
		block-size: 0.6rem;
		border-inline-end: 2px solid currentColor;
		border-block-end: 2px solid currentColor;
		transform: rotate(45deg) translateY(-25%);
		transition: transform var(--px-ease);
	}
	&[open] > summary::after { transform: rotate(-135deg) translateY(-25%); }
}
.px-facet__count {
	display: inline-grid;
	place-items: center;
	min-inline-size: 1.25rem;
	block-size: 1.25rem;
	padding-inline: 0.3rem;
	border-radius: var(--px-radius-pill);
	background: var(--px-red);
	color: var(--px-white);
	font-size: 0.6875rem;
}
.px-facet__body { padding-block-end: 0.9rem; }
.px-facet__note { margin: 0.4rem 0 0; font-size: var(--wp--preset--font-size--x-small); color: var(--px-muted); }
.px-facet__more {
	margin-block-start: 0.35rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--px-red);
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	cursor: pointer;
}

.px-options { list-style: none; margin: 0; padding: 0; }
.px-option input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.px-option.is-empty { opacity: 0.4; }
.px-filters.is-enhanced .px-facet__body:not(.show-all) .px-option.is-extra { display: none; }

/* Checkbox list */
.px-options--check { display: grid; gap: 0.1rem; }
.px-options--check label {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.3rem 0;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--small);

	&::before {
		content: "";
		flex: none;
		inline-size: 1.05rem;
		block-size: 1.05rem;
		border: 1.5px solid var(--px-border-hover);
		border-radius: 3px;
		background: var(--px-white) center / 80% no-repeat;
		transition: background-color var(--px-ease), border-color var(--px-ease);
	}
	&:hover::before { border-color: var(--px-red); }
}
.px-options--check input:checked + .px-option__name { font-weight: 600; }
.px-options--check label:has(input:checked)::before {
	background-color: var(--px-red);
	border-color: var(--px-red);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.px-options--check label:has(input:focus-visible)::before { outline: 2px solid var(--px-red); outline-offset: 2px; }
.px-option__count {
	margin-inline-start: auto;
	color: var(--px-muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-variant-numeric: tabular-nums;
}

/* Colour swatches */
.px-options--swatch { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.px-options--swatch label { position: relative; display: block; cursor: pointer; }
.px-option__swatch {
	display: block;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border-radius: 50%;
	background: var(--px-swatch);
	box-shadow: inset 0 0 0 1px var(--px-hairline);
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: outline-color var(--px-ease), transform var(--px-ease);
}
.px-options--swatch label:hover .px-option__swatch { transform: scale(1.08); }
.px-options--swatch input:checked + .px-option__swatch { outline-color: var(--px-text); }
.px-options--swatch input:focus-visible + .px-option__swatch { outline-color: var(--px-red); }

/* Price */
.px-price { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.px-price label { display: grid; gap: 0.2rem; font-size: var(--wp--preset--font-size--x-small); color: var(--px-muted); }
.px-price__field {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding-inline: 0.5rem;
	border: 1px solid var(--px-border-strong);
	border-radius: var(--px-radius-s);
	background: var(--px-white);
	color: var(--px-text);

	&:focus-within { border-color: var(--px-red); }
	& input {
		box-sizing: border-box;
		inline-size: 100%;
		min-inline-size: 0;
		padding: 0.45rem 0;
		border: 0;
		background: transparent;
		font: inherit;
		font-size: 1rem;
		-moz-appearance: textfield;
		appearance: textfield;
	}
	& input:focus { outline: none; }
	& input::-webkit-outer-spin-button,
	& input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
}

.px-filters__actions { padding-block: 1rem; }
.px-filters.is-enhanced:not(.is-open) .px-filters__actions { display: none; } /* filters apply instantly */
.px-filters.is-loading .px-filters__form { opacity: 0.55; pointer-events: none; }

/* Drawer below 1024px */
@media (max-width: 1023px) {
	.px-shop { grid-template-columns: minmax(0, 1fr); gap: 1rem; }

	.px-filters.is-enhanced .px-filters__toggle {
		display: inline-flex;

		&::before {
			content: "";
			inline-size: 1rem;
			block-size: 1rem;
			background: currentColor;
			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center / contain no-repeat;
		}
	}
	.px-filters__badge {
		display: inline-grid;
		place-items: center;
		min-inline-size: 1.3rem;
		block-size: 1.3rem;
		border-radius: var(--px-radius-pill);
		background: var(--px-red);
		color: var(--px-white);
		font-size: 0.75rem;
	}

	.px-filters.is-enhanced .px-filters__panel {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		z-index: 100001; /* above WooCommerce's store notice */
		box-sizing: border-box;
		inline-size: min(88vw, 360px);
		padding: 1rem 1.25rem 0;
		overflow-y: auto;
		background: var(--px-white);
		box-shadow: var(--wp--preset--shadow--raised);
		transform: translateX(-105%);
		transition: transform 250ms ease;
		visibility: hidden;
	}
	.px-filters.is-open .px-filters__panel { transform: none; visibility: visible; }
	.px-filters.is-enhanced .px-filters__close {
		display: grid;
		place-items: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		border: 0;
		border-radius: 50%;
		background: var(--px-surface);
		font-size: 1.5rem;
		cursor: pointer;
	}
	.px-filters.is-open .px-filters__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 100000;
		background: var(--px-backdrop);
	}
	.px-filters.is-open .px-filters__actions {
		display: block;
		position: sticky;
		inset-block-end: 0;
		background: var(--px-white);
		border-block-start: 1px solid var(--px-border);
	}
}
html.px-no-scroll { overflow: hidden; }

/* =====================================================================
   Cart (promotex/cart): one row per product + colour + positions,
   sizes adjustable in place, sticky summary.
   ===================================================================== */
.px-cart-page__title { margin-block: 1.5rem 1rem !important; }
.px-cart {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
	align-items: start;
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-block: 0 3rem !important;
}
.px-cart:has(.px-cart__empty) { display: block; }
@media (max-width: 899px) { .px-cart { grid-template-columns: minmax(0, 1fr); } }

.px-cart__items { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--px-border); }
.px-cart-item {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr) auto;
	gap: 1.1rem;
	padding-block: 1.25rem;
	border-block-end: 1px solid var(--px-border);
}
.px-cart-item__media {
	display: block;
	align-self: start;
	border-radius: var(--px-radius-m);
	background: var(--px-surface);
	overflow: hidden;

	& img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 5; object-fit: contain; mix-blend-mode: multiply; }
}
.px-cart-item__title {
	margin: 0 0 0.4rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;

	& a { color: inherit; text-decoration: none; }
	& a:hover { color: var(--px-red); }
}
.px-cart-item__color { font-weight: 400; color: var(--px-muted); }
.px-cart-item__meta {
	display: grid;
	gap: 0.3rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);

	& > div { display: flex; gap: 0.5rem; align-items: baseline; }
	& dt { min-inline-size: 4.5rem; color: var(--px-muted); }
	& dd { margin: 0; }
}
.px-cart-item__sizes { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.px-chip {
	padding: 0.1rem 0.5rem;
	border-radius: var(--px-radius-pill);
	background: var(--px-surface);
	font-variant-numeric: tabular-nums;

	& b { font-weight: 700; }
}
.px-cart-item__edit {
	margin-block-start: 0.6rem;

	& summary {
		display: inline-flex;
		align-items: center;
		gap: 0.3rem;
		list-style: none;
		cursor: pointer;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
		color: var(--px-red);
		text-decoration: underline;
		text-underline-offset: 3px;
	}
	& summary::-webkit-details-marker { display: none; }
	&[open] summary { margin-block-end: 0.6rem; }
}
.px-cart-sizes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
	gap: 0.4rem 1rem;
	margin-block-end: 0.75rem;
}
.px-cart-size {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--small);

	& label { font-weight: 700; }
	&.is-unavailable { opacity: 0.45; }
}
.px-cart .px-stepper { display: inline-flex; align-items: center; border: 1px solid var(--px-border); border-radius: var(--px-radius-control); padding: 0.1rem; }
.px-cart .px-stepper__btn {
	display: grid;
	place-items: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--px-radius-s);
	background: transparent;
	font: inherit;
	font-size: 1.05rem;
	line-height: 1;
	color: var(--px-text);
	cursor: pointer;

	&:hover { background: var(--px-surface); }
}
.px-cart .px-size__qty {
	box-sizing: border-box;
	inline-size: 2.75rem;
	block-size: 1.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	appearance: textfield;

	&::-webkit-outer-spin-button,
	&::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
	&:focus { outline: 2px solid var(--px-red); border-radius: var(--px-radius-s); }
}
.px-cart-item__single {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: 0.6rem;
	font-size: var(--wp--preset--font-size--small);

	& .px-size__qty { border: 1px solid var(--px-border); border-radius: var(--px-radius-s); inline-size: 4rem; block-size: 2rem; }
}
.px-cart-item__side {
	display: grid;
	justify-items: end;
	align-content: start;
	gap: 0.15rem;
	text-align: end;
	font-variant-numeric: tabular-nums;
}
.px-cart-item__total { margin: 0; font-weight: 700; font-size: var(--wp--preset--font-size--medium); }
.px-cart-item__unit { margin: 0; font-size: var(--wp--preset--font-size--x-small); color: var(--px-muted); white-space: nowrap; }
.px-cart-item__remove {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-block-start: 0.5rem;
	padding: 0.25rem 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--px-muted);
	cursor: pointer;

	&::before {
		content: "";
		inline-size: 0.7rem;
		block-size: 0.7rem;
		background: currentColor;
		mask: var(--px-i-plus) center / contain no-repeat;
		transform: rotate(45deg);
	}
	&:hover { color: var(--px-red); }
}
@media (max-width: 560px) {
	.px-cart-item { grid-template-columns: 4.5rem minmax(0, 1fr); }
	.px-cart-item__side { grid-column: 2; justify-items: start; text-align: start; }
}

.px-cart__summary {
	position: sticky;
	inset-block-start: 1rem;
	display: grid;
	gap: 1rem;
	padding: 1.4rem;
	border-radius: var(--px-radius-l);
	background: var(--px-surface);

	& h2 { margin: 0; font-size: var(--wp--preset--font-size--large); }
}
.px-cart__totals {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;

	& > div { display: flex; justify-content: space-between; gap: 1rem; }
	& dt { color: var(--px-muted); }
	& dd { margin: 0; font-weight: 600; }
	& .is-free { color: var(--px-success-text); }
	& .is-discount dd { color: var(--px-success-text); }
}
.px-cart__grand {
	margin-block-start: 0.4rem;
	padding-block-start: 0.75rem;
	border-block-start: 1px solid var(--px-border);

	& dt { color: var(--px-text) !important; font-weight: 700; font-size: var(--wp--preset--font-size--medium); }
	& dt small { font-weight: 400; color: var(--px-muted); font-size: var(--wp--preset--font-size--x-small); }
	& dd { font-size: 1.5rem; font-weight: 700 !important; }
}
.px-cart__usps {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--x-small);

	& li { display: flex; gap: 0.5rem; align-items: baseline; }
	& li::before {
		content: "";
		flex: none;
		inline-size: 0.8rem;
		block-size: 0.8rem;
		background: var(--px-green);
		mask: var(--px-i-check) center / contain no-repeat;
		transform: translateY(0.1rem);
	}
}
.px-cart__continue { justify-self: center; font-size: var(--wp--preset--font-size--small); color: var(--px-text); text-underline-offset: 3px; }
.px-cart__empty {
	display: grid;
	justify-items: center;
	gap: 0.75rem;
	padding: 3rem 1rem;
	text-align: center;
	border-radius: var(--px-radius-l);
	background: var(--px-surface);

	& h2, & p { margin: 0; }
}
/* =====================================================================
   Mini cart (promotex/mini-cart): header button + drawer, rows per
   product + colour + positions, sizes via the "Kies je maten" dialog.
   ===================================================================== */
.px-mini-cart { position: relative; }
.px-mini-cart__button {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 50%;
	color: var(--px-text);
	transition: background-color var(--px-ease);

	&:hover { background: var(--px-surface); }
}
.px-mini-cart__badge {
	position: absolute;
	inset-block-start: 0.1rem;
	inset-inline-end: 0;
	min-inline-size: 1.15rem;
	block-size: 1.15rem;
	padding-inline: 0.3rem;
	box-sizing: border-box;
	border-radius: var(--px-radius-pill);
	background: var(--px-red);
	color: var(--px-white);
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1.15rem;
	text-align: center;

	&[hidden] { display: none; }
}

.px-drawer {
	box-sizing: border-box;
	position: fixed;
	inset: 0 0 0 auto;
	inline-size: min(28rem, 100vw);
	max-inline-size: 100vw;
	block-size: 100dvh;
	max-block-size: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--px-white);
	color: var(--px-text);
	box-shadow: -16px 0 48px color-mix(in srgb, var(--px-ink) 18%, transparent);
	overscroll-behavior: contain;

	&::backdrop { background: var(--px-backdrop); }
	&[open] { display: flex; flex-direction: column; animation: px-slide 220ms ease-out; }
}
@keyframes px-slide { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .px-drawer[open] { animation: none; } }
.px-drawer__body { display: flex; flex-direction: column; flex: 1; min-block-size: 0; }
.px-drawer__loading { margin: auto; color: var(--px-muted); font-size: var(--wp--preset--font-size--small); }
.px-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem 1.25rem;
	border-block-end: 1px solid var(--px-border);
}
.px-drawer__title { margin: 0; font-size: var(--wp--preset--font-size--large); }
.px-drawer__close {
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;

	&::before {
		content: "";
		inline-size: 1rem;
		block-size: 1rem;
		background: var(--px-text);
		mask: var(--px-i-plus) center / contain no-repeat;
		transform: rotate(45deg);
	}
	&:hover { background: var(--px-surface); }
}
.px-drawer__message {
	margin: 0.75rem 1.25rem 0;
	padding: 0.55rem 0.8rem;
	border-radius: var(--px-radius-m);
	background: color-mix(in srgb, var(--px-green) 12%, var(--px-white));
	color: var(--px-success-text);
	font-size: var(--wp--preset--font-size--small);

	&.is-error { background: var(--px-danger-bg); color: var(--px-red-dark); }
}
.px-drawer__empty { display: grid; justify-items: center; gap: 1rem; margin: auto; padding: 2rem; text-align: center; }
.px-drawer__form { flex: 1; overflow-y: auto; padding-inline: 1.25rem; }
.px-drawer__form.is-busy { opacity: 0.5; pointer-events: none; }
.px-drawer__items { list-style: none; margin: 0; padding: 0; }
.px-drawer-item {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) auto;
	gap: 0.9rem;
	padding-block: 1.1rem;
	border-block-end: 1px solid var(--px-border);

	&:last-child { border-block-end: 0; }
}
.px-drawer-item__media {
	align-self: start;
	display: block;
	border-radius: var(--px-radius-m);
	background: var(--px-surface);
	overflow: hidden;

	& img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 5; object-fit: contain; mix-blend-mode: multiply; }
}
.px-drawer-item__main { display: grid; gap: 0.3rem; align-content: start; min-inline-size: 0; }
.px-drawer-item__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.3;

	& a { color: inherit; text-decoration: none; }
	& a:hover { color: var(--px-red); }
	& span { font-weight: 400; color: var(--px-muted); }
}
.px-drawer-item__places { margin: 0; font-size: var(--wp--preset--font-size--x-small); color: var(--px-muted); }
.px-drawer-item__sizes { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; font-size: var(--wp--preset--font-size--x-small); }
.px-drawer-item__edit {
	justify-self: start;
	margin-block-start: 0.15rem;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: var(--px-red);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.px-drawer-item__side { display: grid; justify-items: end; align-content: start; gap: 0.1rem; text-align: end; font-variant-numeric: tabular-nums; }
.px-drawer-item__total { margin: 0; font-weight: 700; font-size: var(--wp--preset--font-size--small); }
.px-drawer-item__qty { margin: 0; font-size: var(--wp--preset--font-size--x-small); color: var(--px-muted); white-space: nowrap; }
.px-drawer-item__remove {
	display: grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	margin-block-start: 0.35rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;

	&::before {
		content: "";
		inline-size: 1rem;
		block-size: 1rem;
		background: var(--px-muted);
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
	}
	&:hover { background: var(--px-surface); }
	&:hover::before { background: var(--px-red); }
}
.px-drawer__foot {
	display: grid;
	gap: 0.6rem;
	padding: 1rem 1.25rem 1.25rem;
	border-block-start: 1px solid var(--px-border);
	background: var(--px-white);
}
.px-drawer__totals {
	display: grid;
	gap: 0.3rem;
	margin: 0 0 0.25rem;
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;

	& > div { display: flex; justify-content: space-between; gap: 1rem; }
	& > div:first-child { font-weight: 700; font-size: var(--wp--preset--font-size--medium); }
	& dt small { font-weight: 400; color: var(--px-muted); font-size: var(--wp--preset--font-size--x-small); }
	& dd { margin: 0; }
	& > div:not(:first-child) dt { color: var(--px-muted); }
	& .is-free { color: var(--px-success-text); font-weight: 600; }
}
.px-drawer-sizes .px-sizegrid.is-current { display: grid; }
.px-drawer-sizes .px-sizes__product img { inline-size: 3.5rem; block-size: auto; }

/* WooCommerce hover zoom: the large image at its own size over the photo */
.px-product__gallery .woocommerce-product-gallery__image .zoomImg {
	max-inline-size: none !important;
	max-block-size: none !important;
	background: var(--px-surface);
	mix-blend-mode: normal;
}

/* =====================================================================
   Catalogue (Monday Merch style): plain title, small category tiles,
   photo tiles with minimum + colour squares, square filter swatches.
   ===================================================================== */

/* Title area without the grey band */
.px-page-head.px-page-head--archive {
	background: transparent !important;
	padding-block: 1.25rem 0.5rem;

	& h1 {
		margin-block: 0.75rem 0;
		font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem);
		font-weight: 700;
		letter-spacing: -0.02em;
		line-height: 1.1;
	}
	& .px-term-intro { font-size: var(--wp--preset--font-size--small); margin-block-start: 0.5rem; }
}

/* Sub-categories: small square photo tiles in one scrollable row */
.px-cat-grid.px-cat-grid--compact {
	display: flex;
	gap: 0.75rem;
	margin-block: 1rem 2rem;
	padding-block-end: 0.25rem;
	overflow-x: auto;
	scrollbar-width: none;

	& .px-cat-grid__item { flex: 0 0 6.5rem; }
	& .px-cat-grid__link {
		display: grid;
		gap: 0.45rem;
		border: 0;
		border-radius: 0;
		background: none;
		overflow: visible;

		&:hover { box-shadow: none; transform: none; }
	}
	& .px-cat-grid__media {
		aspect-ratio: 1;
		padding: 0;
		border-radius: var(--px-radius-l);
		background: var(--px-surface);
		overflow: hidden;
		transition: background-color var(--px-ease);

		& img { object-fit: cover; mix-blend-mode: multiply; }
	}
	& .px-cat-grid__link:hover .px-cat-grid__media { background: var(--px-surface-hover); }
	& .px-cat-grid__name {
		padding: 0;
		border: 0;
		text-align: center;
		font-size: var(--wp--preset--font-size--x-small);
		font-weight: 600;
		line-height: 1.25;
	}
	& .px-cat-grid__link:hover .px-cat-grid__name { color: var(--px-red); }
}

/* Product cards: photo tile with the minimum and colours over its bottom edge */
.px-products .px-card {
	gap: 0.15rem !important;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;

	&:hover { border: 0; box-shadow: none; }
	& .wc-block-components-product-image {
		margin: 0 !important;
		border-radius: var(--px-radius-l);
		background: var(--px-surface);
	}
	& .wc-block-components-product-image img {
		aspect-ratio: 4 / 5 !important;
		object-fit: contain;
		padding: 8% 8% 18%;
		box-sizing: border-box;
		mix-blend-mode: multiply;
	}
	&:hover .wc-block-components-product-image img { transform: scale(1.03); }
}
.px-card__meta {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin: -2.3rem 0 1.15rem !important; /* bottom: space between photo and name / quick add */
	padding-inline: 0.75rem;
	block-size: 1.6rem;
	pointer-events: none;
	font-size: 0.6875rem;
	color: var(--px-muted);
}
.px-card__moq { white-space: nowrap; }
.px-card__colors {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.2rem;
	font-variant-numeric: tabular-nums;

	& i {
		inline-size: 0.8rem;
		block-size: 0.8rem;
		border-radius: 3px;
		background: var(--px-swatch);
		box-shadow: inset 0 0 0 1px var(--px-hairline);
	}
	& > span:not(.screen-reader-text) { margin-inline-start: 0.15rem; }
}
.px-products .px-card__title {
	margin-block-start: 0.2rem !important;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 700;

	& a:hover { color: var(--px-text); text-decoration: underline; }
}
.px-products .px-card__price {
	margin: 0 !important;
	font-size: var(--wp--preset--font-size--x-small) !important;
	color: var(--px-muted);

	& .woocommerce-Price-amount { font-weight: 600; }
}
.px-shop-toolbar { border-block: 0; padding-block: 0 0.25rem; }

/* Filters like the product page: square swatches with a "+" square, square check boxes */
.px-options--swatch { display: grid; grid-template-columns: repeat(6, 2rem); gap: 0.45rem; }
.px-option__swatch { inline-size: 2rem; block-size: 2rem; border-radius: var(--px-radius-control); }
.px-options--swatch label:hover .px-option__swatch { transform: scale(1.06); }
.px-filters.is-enhanced .px-facet__body:not(.show-all) .px-option.is-extra { display: none; }
.px-option--more { display: none; }
.px-filters.is-enhanced .px-option--more { display: block; }
.px-facet__more--swatch {
	display: grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--px-radius-control);
	background: var(--px-white);
	box-shadow: inset 0 0 0 1px var(--px-border);
	cursor: pointer;

	&::before {
		content: "";
		inline-size: 0.8rem;
		block-size: 0.8rem;
		background: var(--px-text);
		mask: var(--px-i-plus) center / contain no-repeat;
		transition: transform var(--px-ease);
	}
	&[aria-expanded="true"]::before { transform: rotate(45deg); }
	&:hover { box-shadow: inset 0 0 0 1px var(--px-text); }
}
.px-options--check label::before { border-radius: var(--px-radius-s); border-color: var(--px-border-strong); }
.px-options--check label:has(input:checked)::before { background-color: var(--px-text); border-color: var(--px-text); }
.px-options--check label:hover::before { border-color: var(--px-text); }
.px-price__field { border-radius: var(--px-radius-control); border-color: var(--px-border); }
.px-chip-remove { border-radius: var(--px-radius-control); }
.px-facet > summary { font-size: var(--wp--preset--font-size--small); }
/* ---------- Cards: colour grid on hover, quick add over the name ---------- */
.px-products .px-card { position: relative; }
.px-card__meta { pointer-events: auto; align-self: stretch; box-sizing: border-box; inline-size: 100%; }
.px-card__moq,
.px-card__colors { transition: opacity 240ms ease; }
.px-card__palette {
	position: absolute;
	inset-inline: 0.6rem;
	inset-block-end: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-end;
	gap: 0.3rem;
	padding-block: 0.45rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 320ms ease;

	& a {
		inline-size: 0.95rem;
		block-size: 0.95rem;
		border-radius: 3px;
		background: var(--px-swatch);
		box-shadow: inset 0 0 0 1px var(--px-hairline);
		outline: 1.5px solid transparent;
		outline-offset: 1.5px;
		transition: transform 150ms ease, outline-color 150ms ease;
	}
	& a:hover,
	& a.is-current { outline-color: var(--px-text); transform: scale(1.15); }
}
@media (hover: hover) {
	.px-card__meta:hover .px-card__moq,
	.px-card__meta:hover .px-card__colors { opacity: 0; }
	.px-card__meta:hover .px-card__palette { opacity: 1; pointer-events: auto; }
}

.px-products .px-card__title {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: unset;

	& a:hover { text-decoration: none; }
}
.px-products .px-card__title,
.px-products .px-card__price { transition: opacity 200ms ease; }
.px-card__quick {
	position: absolute;
	z-index: 3;
	inset-inline: 0;
	inset-block-end: 0;
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;
	transition: opacity 220ms ease, transform 220ms ease, background-color var(--px-ease);
	font-weight: 500;
}
@media (hover: hover) {
	.px-products .px-card:hover .px-card__title,
	.px-products .px-card:hover .px-card__price,
	.px-products .px-card:focus-within .px-card__title,
	.px-products .px-card:focus-within .px-card__price { opacity: 0; }
	.px-products .px-card:hover .px-card__quick,
	.px-products .px-card:focus-within .px-card__quick { opacity: 1; transform: none; pointer-events: auto; }
}

/* Quick add dialog: the product configurator in a modal */
.px-quick {
	box-sizing: border-box;
	inline-size: min(38rem, calc(100vw - 1.5rem));
	max-block-size: calc(100dvh - 1.5rem);
	padding: 0 1.4rem 1.2rem;
	border: 0;
	border-radius: var(--px-radius-l);
	box-shadow: var(--px-shadow-modal);
	color: var(--px-text);
	overscroll-behavior: contain;

	&::backdrop { background: var(--px-backdrop); }
	&[open] { animation: px-pop 180ms ease-out; }
	& .px-config { margin: 0 !important; }
}
.px-quick__loading { margin: 3rem 0; text-align: center; color: var(--px-muted); }
.px-quick__head {
	position: sticky;
	inset-block-start: 0;
	z-index: 2;
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	margin-inline: -1.4rem;
	padding: 1.1rem 1.4rem 0.9rem;
	background: var(--px-white);
	border-block-end: 1px solid var(--px-border);
}
.px-quick__img {
	inline-size: 4.5rem;
	block-size: auto;
	aspect-ratio: 4 / 5;
	object-fit: contain;
	border-radius: var(--px-radius-m);
	background: var(--px-surface);
	mix-blend-mode: multiply;
}
.px-quick__info { display: grid; gap: 0.15rem; min-inline-size: 0; }
.px-quick__title { margin: 0; font-weight: 700; font-size: var(--wp--preset--font-size--medium); line-height: 1.25; }
.px-quick__info .px-product-meta { margin: 0 !important; font-size: var(--wp--preset--font-size--x-small); }
.px-quick__more { justify-self: start; font-size: var(--wp--preset--font-size--x-small); color: var(--px-text); }
.px-quick__close {
	align-self: start;
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	padding: 0;
	border: 1px solid var(--px-border);
	border-radius: 50%;
	background: var(--px-white);
	cursor: pointer;

	&::before {
		content: "";
		inline-size: 0.9rem;
		block-size: 0.9rem;
		background: var(--px-text);
		mask: var(--px-i-plus) center / contain no-repeat;
		transform: rotate(45deg);
	}
	&:hover { background: var(--px-surface); }
}
.px-quick .px-step:first-of-type { border-block-start: 0; }
/* Colour chosen with a click on a card */
.px-card__palette a.is-selected { outline-color: var(--px-text); }
/* Option boxes (positions, quantities, techniques) share the control box model */
.px-place__pill,
.px-qty__opt,
.px-place__tech span { box-sizing: border-box; margin: 0; }

/* One-line names end with "…" inside the card instead of widening it */
.px-products .px-card__title,
.px-products .px-card__price { align-self: stretch; min-inline-size: 0; max-inline-size: 100%; }
/* ---------- Size chart (pop-up + product information) ---------- */
.px-link-button {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	color: var(--px-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;

	&:hover { color: var(--px-red); }
}
.px-sizechart { display: grid; gap: 0.75rem; }
.px-sizechart--guide {
	grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
	align-items: start;
	gap: 1.25rem;

	@media (max-width: 640px) { grid-template-columns: minmax(0, 1fr); }
}
.px-sizechart__figure {
	margin: 0;
	padding: 0.75rem;
	border-radius: var(--px-radius-l);
	background: var(--px-surface);

	& img { display: block; inline-size: 100%; block-size: auto; mix-blend-mode: multiply; }
	@media (max-width: 640px) { max-inline-size: 14rem; justify-self: center; }
}
.px-sizechart__data { display: grid; gap: 0.6rem; min-inline-size: 0; }
.px-sizechart .px-muted { margin: 0; font-size: var(--wp--preset--font-size--x-small); color: var(--px-muted); }
.px-sizechart .px-size-table {
	font-variant-numeric: tabular-nums;

	& tbody th { font-weight: 700; }
	& tbody tr:nth-child(even) { background: var(--px-surface); }
}

.px-sizechart-dialog {
	box-sizing: border-box;
	inline-size: min(52rem, calc(100vw - 1.5rem));
	max-block-size: calc(100dvh - 1.5rem);
	padding: 1.4rem;
	border: 0;
	border-radius: var(--px-radius-l);
	box-shadow: var(--px-shadow-modal);
	color: var(--px-text);
	overscroll-behavior: contain;

	&::backdrop { background: var(--px-backdrop); }
	&[open] { animation: px-pop 180ms ease-out; }
	& .px-sizes__close {
		display: grid;
		place-items: center;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		padding: 0;
		border: 1px solid var(--px-border);
		border-radius: var(--px-radius-control);
		background: var(--px-white);
		cursor: pointer;

		&::before {
			content: "";
			inline-size: 0.9rem;
			block-size: 0.9rem;
			background: var(--px-text);
			mask: var(--px-i-plus) center / contain no-repeat;
			transform: rotate(45deg);
		}
		&:hover { background: var(--px-surface); }
	}
}
.px-sizechart-dialog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-block-end: 1rem;

	& h2 { margin: 0; font-size: 1.35rem; }
}
/* ---------- Mobile (≤ 781px): shop pages ---------- */
@media (max-width: 781px) {
	/* Category: "Filters" and sorting side by side, then the count and the two-column grid */
	.px-shop {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0.75rem;
	}
	.px-shop__results,
	.px-shop__results > .px-shop-toolbar { display: contents; }
	.px-shop__filters { grid-column: 1; grid-row: 1; }
	.px-shop .wp-block-woocommerce-catalog-sorting { grid-column: 2; grid-row: 1; margin: 0 !important; }
	.px-shop .wp-block-woocommerce-product-results-count { grid-column: 1 / -1; grid-row: 2; margin: 0 !important; color: var(--px-muted); }
	.px-shop .wp-block-woocommerce-product-collection { grid-column: 1 / -1; grid-row: 3; margin: 0 !important; }
	.px-filters.is-enhanced .px-filters__toggle { inline-size: 100%; justify-content: center; }
	.px-shop .wp-block-woocommerce-catalog-sorting select {
		box-sizing: border-box;
		inline-size: 100%;
		min-block-size: var(--px-control-h-s);
		padding-block: 0;
		border: 1px solid var(--px-text);
		border-radius: var(--px-radius-control);
		font-weight: 600;
		font-size: var(--wp--preset--font-size--small);
	}
	.px-shop .woocommerce-ordering { margin: 0; }

	/* Product page: photo edge to edge, order bar fixed at the bottom while choosing */
	.px-product__gallery { margin-inline: calc(-1 * var(--px-gutter)) !important; }
	.px-product__gallery .flex-viewport,
	.px-product__gallery .woocommerce-product-gallery__wrapper { border-radius: 0; }
	.px-config__summary {
		position: sticky;
		inset-block-end: 0;
		z-index: 20;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 0.75rem;
		margin-inline: calc(-1 * var(--px-gutter));
		padding: 0.7rem var(--px-gutter) calc(0.7rem + env(safe-area-inset-bottom));
		background: color-mix(in srgb, white 94%, transparent);
		backdrop-filter: blur(8px);
		border-block-start: 1px solid var(--px-border);
	}
	.px-config__summary .px-total { gap: 0; }
	.px-config__summary .px-total__price { font-size: 1.3rem; }
	.px-config__summary .px-total__vat,
	.px-config__summary .px-total__saving,
	.px-config__summary .px-config__quote,
	.px-config__summary .px-config__note { display: none; }
	.px-config__summary .px-config__add.px-btn--block { display: inline-flex; inline-size: auto; padding-inline: 1.25rem; }
	.px-quick .px-config__summary { margin-inline: -1.4rem; padding-inline: 1.4rem; } /* inside the quick add dialog */
}
/* =====================================================================
   Customer account (Mijn account): navigation + dashboard with order
   cards, progress, proof approval and track & trace.
   ===================================================================== */
/* Layout: sidebar card + content, as wide as the rest of the site. WooCommerce caps
   `main .woocommerce` at 1000px and adds clearfix ::before/::after, which would take grid cells. */
.woocommerce-account main .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
	align-items: start;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	max-inline-size: var(--wp--style--global--wide-size, 1536px);
	margin-block: 0.5rem 2rem;

	&::before, &::after { content: none; display: none; }

	@media (max-width: 781px) { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { float: none; inline-size: auto; min-inline-size: 0; }

.woocommerce-account .woocommerce-MyAccount-navigation {
	position: sticky;
	inset-block-start: 1.5rem;
	display: grid;
	gap: 0.75rem;
	padding: 0.75rem;
	border: 1px solid var(--px-border);
	border-radius: var(--px-radius-l);
	background: var(--px-white);

	@media (max-width: 781px) { position: static; padding: 0; border: 0; background: none; }

	& ul {
		display: grid;
		gap: 0.15rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	& li { padding: 0; }
	& li a {
		display: flex;
		align-items: center;
		gap: 0.7rem;
		min-block-size: var(--px-control-h);
		padding-inline: 0.85rem;
		border-radius: var(--px-radius-control);
		color: var(--px-text);
		font-weight: 600;
		font-size: var(--wp--preset--font-size--small);
		text-decoration: none;
		transition: background var(--px-ease), color var(--px-ease);
	}
	& li a::before {
		content: "";
		flex: none;
		inline-size: 1.15rem;
		block-size: 1.15rem;
		background: currentColor;
		opacity: 0.7;
		mask: var(--px-i-icon, var(--px-i-arrow)) center / contain no-repeat;
	}
	& li a:hover { background: var(--px-surface); text-decoration: none; }
	& li.is-active a { background: var(--px-text); color: var(--px-white); text-decoration: none; }
	& li.is-active a::before { opacity: 1; }
	& .woocommerce-MyAccount-navigation-link--dashboard { --px-i-icon: var(--px-i-home); }
	& .woocommerce-MyAccount-navigation-link--orders { --px-i-icon: var(--px-i-box); }
	& .woocommerce-MyAccount-navigation-link--edit-address { --px-i-icon: var(--px-i-pin); }
	& .woocommerce-MyAccount-navigation-link--edit-account { --px-i-icon: var(--px-i-user); }
	& .woocommerce-MyAccount-navigation-link--customer-logout {
		--px-i-icon: var(--px-i-logout);
		margin-block-start: 0.35rem;
		padding-block-start: 0.35rem;
		border-block-start: 1px solid var(--px-border);

		& a { color: var(--px-muted); }
		& a:hover { color: var(--px-red); }
	}

	/* Phones: the menu as a row of chips that scrolls sideways */
	@media (max-width: 781px) {
		& ul {
			display: flex;
			gap: 0.5rem;
			overflow-x: auto;
			scrollbar-width: none;
			margin-inline: calc(-1 * var(--px-gutter));
			padding-inline: var(--px-gutter);
		}
		& li a { white-space: nowrap; min-block-size: var(--px-control-h-s); border: 1px solid var(--px-border); }
		& .woocommerce-MyAccount-navigation-link--customer-logout { margin: 0; padding: 0; border: 0; }
	}
}

.px-account-user {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.5rem 0.85rem;
	border-block-end: 1px solid var(--px-border);

	@media (max-width: 781px) { display: none; }
}
.px-account-user__avatar {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 50%;
	background: var(--px-red);
	color: var(--px-white);
	font-weight: 700;
	letter-spacing: 0.02em;
}
.px-account-user__text {
	display: grid;
	min-inline-size: 0;
	line-height: 1.3;

	& strong, & span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	& span { font-size: var(--wp--preset--font-size--x-small); color: var(--px-muted); }
}

/* Content column */
.px-account { display: grid; gap: 2rem; }
.px-account__hello h2 { margin: 0 0 0.25rem; font-size: var(--wp--preset--font-size--x-large); }
.px-account__hello p { margin: 0; color: var(--px-muted); }
.px-account__section { display: grid; gap: 0.85rem; }
.px-account__title { margin: 0; font-size: var(--wp--preset--font-size--large); }

.px-account__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;

	@media (max-width: 1024px) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.px-stat {
	display: grid;
	gap: 0.1rem;
	padding: 1rem 1.15rem;
	border-radius: var(--px-radius-l);
	background: var(--px-surface);

	& strong { font-size: 1.75rem; line-height: 1.1; }
	& span { font-size: var(--wp--preset--font-size--small); color: var(--px-muted); }
}
.px-stat.is-attention { background: var(--px-warning-bg); & strong { color: var(--px-warning-text); } }
.px-account__empty {
	display: grid;
	justify-items: start;
	gap: 0.75rem;
	padding: 1.25rem;
	border-radius: var(--px-radius-l);
	background: var(--px-surface);

	& p { margin: 0; }
}

.px-order-cards { display: grid; gap: 1rem; }
.px-order-card {
	display: grid;
	gap: 1rem;
	padding: clamp(1rem, 2vw, 1.5rem);
	border: 1px solid var(--px-border);
	border-radius: var(--px-radius-l);
	background: var(--px-white);
	transition: border-color var(--px-ease), box-shadow var(--px-ease);

	&:hover { border-color: color-mix(in srgb, var(--px-text) 25%, var(--px-white)); box-shadow: var(--px-shadow-hover); }
	& .px-progress { padding: 0.9rem 0.5rem 0.75rem; border-radius: var(--px-radius-m); background: var(--px-surface); }
}
.px-order-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem 1rem;

	& h3 { margin: 0 0 0.15rem; font-size: var(--wp--preset--font-size--large); }
	& h3 a { color: inherit; text-decoration: none; }
	& h3 a:hover { color: var(--px-red); }
}
.px-order-meta,
.px-order-card__items { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--px-muted); }
.px-order-card__items { color: var(--px-text); }
.px-order-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--px-border);
}
.px-order-card__total { font-weight: 700; }
.px-order-card__more { justify-self: start; font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--px-text); text-underline-offset: 3px; }

.px-status {
	padding: 0.2rem 0.6rem;
	border-radius: var(--px-radius-control);
	background: var(--px-surface);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	white-space: nowrap;
}
.px-status--px-proof { background: var(--px-warning-bg); color: var(--px-warning-text); }
.px-status--px-production { background: var(--px-info-bg); color: var(--px-info-text); }
.px-status--px-shipped,
.px-status--completed { background: var(--px-success-bg); color: var(--px-success-text); }
.px-status--cancelled,
.px-status--failed { background: var(--px-danger-bg); color: var(--px-red-dark); }

/* Progress: five steps with a line, the current one highlighted */
.px-progress {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: 0.25rem 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
	font-size: 0.6875rem;
	text-align: center;

	& li { position: relative; display: grid; justify-items: center; gap: 0.35rem; color: var(--px-muted); counter-increment: step; }
	& li::before {
		content: counter(step);
		position: relative;
		z-index: 1;
		display: grid;
		place-items: center;
		inline-size: 1.5rem;
		block-size: 1.5rem;
		border-radius: 50%;
		background: var(--px-white);
		border: 2px solid var(--px-border);
		font-weight: 700;
		font-size: 0.6875rem;
	}
	& li + li::after {
		content: "";
		position: absolute;
		inset-block-start: 0.7rem;
		inset-inline: -50% 50%;
		block-size: 2px;
		background: var(--px-border);
	}
	& li.is-done::before { content: ""; background: var(--px-text) center / 60% no-repeat; border-color: var(--px-text); }
	& li.is-done::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
	& li.is-done + li::after,
	& li.is-current::after,
	& li.is-done::after { background: var(--px-text); }
	& li.is-current::before { border-color: var(--px-red); color: var(--px-red); }
	& li.is-current { color: var(--px-text); font-weight: 700; }
}
.px-progress__stopped { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--px-red-dark); font-weight: 600; }

.px-notice {
	margin: 0;
	padding: 0.85rem 1rem;
	border-radius: var(--px-radius-l);
	background: var(--px-surface);
	font-size: var(--wp--preset--font-size--small);

	& p { margin: 0 0 0.5rem; }
	& p:last-child { margin: 0; }
}
.px-notice--action { background: var(--px-warning-bg); border: 1px solid var(--px-warning-line); }
.px-notice__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 0.25rem 0.5rem; & form { margin: 0; } }
.px-notice__small { font-size: var(--wp--preset--font-size--x-small); color: var(--px-muted); }

/* Proof files: thumbnails that open full size */
.px-proof { display: grid; gap: 0.75rem; & > p { margin: 0; } }
.px-proof__note { padding: 0.65rem 0.85rem; border-radius: var(--px-radius-m); background: var(--px-white); white-space: normal; }
.px-proof-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;

	& a { display: grid; gap: 0.35rem; color: var(--px-text); text-decoration: none; }
	& img, & .px-proof-gallery__file {
		box-sizing: border-box;
		inline-size: 100%;
		aspect-ratio: 1;
		border: 1px solid var(--px-border);
		border-radius: var(--px-radius-m);
		background: var(--px-white);
		object-fit: contain;
		transition: border-color var(--px-ease), box-shadow var(--px-ease);
	}
	& a:hover img, & a:hover .px-proof-gallery__file { border-color: var(--px-text); box-shadow: var(--px-shadow-hover); }
	& .px-proof-gallery__file { display: grid; place-items: center; font-weight: 700; font-size: 1.25rem; color: var(--px-red); }
	& .px-proof-gallery__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--wp--preset--font-size--x-small); color: var(--px-muted); }
}
.px-proof-gallery--s { grid-template-columns: repeat(auto-fill, minmax(5rem, 6rem)); & .px-proof-gallery__name { display: none; } }
.px-proof-gallery a { cursor: zoom-in; }

/* Pop-up for proofs (plugin assets/proof-lightbox.js) */
.px-lightbox-open { overflow: hidden; }
.px-lightbox {
	box-sizing: border-box;
	inline-size: 100vw;
	block-size: 100dvh;
	max-inline-size: none;
	max-block-size: none;
	margin: 0;
	padding: clamp(0.75rem, 3vw, 2.5rem) clamp(0.75rem, 6vw, 5rem) 4.5rem;
	border: 0;
	background: transparent;
	color: var(--px-white);

	&::backdrop { background: var(--px-backdrop-strong); backdrop-filter: blur(4px); }
	&[open] { display: grid; grid-template-rows: minmax(0, 1fr); }
}
.px-lightbox__stage {
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	place-items: center;
	min-block-size: 0;
	block-size: 100%;
	overflow: hidden;

	& img {
		inline-size: auto;
		block-size: auto;
		max-inline-size: 100%;
		max-block-size: 100%;
		object-fit: contain;
		border-radius: var(--px-radius-m);
		background: var(--px-white);
		box-shadow: var(--px-shadow-modal);
	}
	& iframe { inline-size: min(100%, 60rem); block-size: 100%; border: 0; border-radius: var(--px-radius-m); background: var(--px-white); }

	&.is-loading img { visibility: hidden; }
	&.is-loading::after {
		content: "";
		position: fixed;
		inset: 50% auto auto 50%;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		margin: -1.25rem 0 0 -1.25rem;
		border: 3px solid var(--px-on-ink-glass-hover);
		border-block-start-color: var(--px-white);
		border-radius: 50%;
		animation: px-spin 0.8s linear infinite;
	}
}
@keyframes px-spin { to { rotate: 1turn; } }
.px-lightbox__bar {
	position: fixed;
	inset: auto 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1.25rem;
	padding: 1rem;
	font-size: var(--wp--preset--font-size--small);

	& .px-lightbox__count { opacity: 0.7; }
	& .px-lightbox__open { color: var(--px-white); font-weight: 600; text-underline-offset: 3px; }
}
.px-lightbox__close,
.px-lightbox__nav {
	position: fixed;
	display: grid;
	place-items: center;
	inline-size: var(--px-control-h);
	block-size: var(--px-control-h);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--px-on-ink-glass);
	color: var(--px-white);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--px-ease);

	&:hover, &:focus-visible { background: var(--px-on-ink-glass-hover); }
}
.px-lightbox__close { inset: 1rem 1rem auto auto; }
.px-lightbox__nav { inset-block-start: 50%; translate: 0 -50%; }
.px-lightbox__nav--prev { inset-inline-start: 1rem; }
.px-lightbox__nav--next { inset-inline-end: 1rem; }
.px-lightbox.is-single .px-lightbox__nav { display: none; }
@media (max-width: 781px) {
	.px-lightbox { padding-inline: 0.75rem; }
	.px-lightbox__nav { inset-block: auto 0.75rem; translate: none; }
}

.px-tracking {
	padding: 0.75rem 1rem;
	border-radius: var(--px-radius-l);
	background: color-mix(in srgb, var(--px-green) 8%, var(--px-white));
	font-size: var(--wp--preset--font-size--small);

	& ul { margin: 0.25rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; }
	& a { font-weight: 700; color: var(--px-text); }
}
.px-tracking__title { margin: 0; font-weight: 700; }

.px-order-list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--px-border);

	& li {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.25rem 1rem;
		padding-block: 0.6rem;
		border-block-end: 1px solid var(--px-border);
		font-size: var(--wp--preset--font-size--small);
	}
	& li > a:first-child { font-weight: 700; color: var(--px-text); }
	& span { color: var(--px-muted); }
}
.px-order-list__again { margin-inline-start: auto; font-weight: 600; color: var(--px-red); }

.px-account__links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: 0.75rem;

	& a {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 0.85rem;
		align-items: center;
		padding: 1rem 1.1rem;
		border: 1px solid var(--px-border);
		border-radius: var(--px-radius-l);
		color: var(--px-text);
		text-decoration: none;
		transition: border-color var(--px-ease);
	}
	& a::before {
		content: "";
		grid-row: span 2;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		border-radius: var(--px-radius-m);
		background: var(--px-surface) var(--px-i-icon) center / 1.15rem no-repeat;
	}
	& a:hover { border-color: var(--px-text); }
	& span { font-size: var(--wp--preset--font-size--x-small); color: var(--px-muted); }
	& .px-link--address { --px-i-icon: var(--px-i-pin); }
	& .px-link--account { --px-i-icon: var(--px-i-user); }
	& .px-link--quote { --px-i-icon: var(--px-i-chat); }
}
.px-order-view { margin-block-end: 1.5rem; }

/* WooCommerce's own account tables and forms in the theme's style */
.woocommerce-orders-table,
.woocommerce-table--order-details {
	inline-size: 100%;
	border: 1px solid var(--px-border);
	border-radius: var(--px-radius-l);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--small);

	& th, & td { padding: 0.85rem 1rem; border: 0; border-block-end: 1px solid var(--px-border); text-align: start; vertical-align: middle; }
	& thead th { background: var(--px-surface); font-size: var(--wp--preset--font-size--x-small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--px-muted); }
	& tbody tr:last-child > *, & tfoot tr:last-child > * { border-block-end: 0; }
	& tbody tr:hover { background: color-mix(in srgb, var(--px-surface) 50%, var(--px-white)); }
	& a { color: var(--px-text); font-weight: 600; text-underline-offset: 3px; }
	& .button {
		display: inline-flex;
		align-items: center;
		min-block-size: var(--px-control-h-s);
		margin: 0;
		padding-inline: 0.9rem;
		border: 1px solid var(--px-text);
		border-radius: var(--px-radius-control);
		background: var(--px-white);
		color: var(--px-text);
		text-decoration: none;
		font-size: var(--wp--preset--font-size--x-small);
		font-weight: 700;
		transition: background var(--px-ease), color var(--px-ease);
	}
	& .button:hover { background: var(--px-text); color: var(--px-white); }
	& .woocommerce-orders-table__cell-order-actions { text-align: end; }
	& .woocommerce-orders-table__cell-order-actions a { display: inline-flex; margin: 0; }
	& tfoot th, & tfoot td { background: color-mix(in srgb, var(--px-surface) 60%, var(--px-white)); }
}
/* Phones: WooCommerce stacks the order list; make every order its own card */
@media (max-width: 768px) {
	.woocommerce-orders-table.shop_table_responsive {
		border: 0;
		border-radius: 0;
		overflow: visible;

		& tbody { display: grid; gap: 0.75rem; }
		& tbody tr {
			display: grid;
			padding: 0.4rem 0.9rem 0.9rem;
			border: 1px solid var(--px-border);
			border-radius: var(--px-radius-l);
		}
		& tbody tr:hover { background: none; }
		& tbody tr > * { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-block-end: 1px solid var(--px-border); text-align: end; }
		& tbody tr > *::before { font-weight: 600; color: var(--px-muted); text-align: start; }
		/* WooCommerce hides every tbody th on small screens; the order number is one. */
		.woocommerce-page & tbody th.woocommerce-orders-table__cell-order-number { display: block; text-align: start; font-size: var(--wp--preset--font-size--large); }
		& .woocommerce-orders-table__cell-order-number::before { display: none; }
		& .woocommerce-orders-table__cell-order-actions { display: block; border: 0; padding-block-end: 0; }
		& .woocommerce-orders-table__cell-order-actions::before { display: none; }
		& .woocommerce-orders-table__cell-order-actions .button { display: flex; justify-content: center; inline-size: 100%; }
	}
}

.woocommerce-account .woocommerce-customer-details address {
	box-sizing: border-box;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--px-border);
	border-radius: var(--px-radius-l);
	font-style: normal;
	line-height: 1.6;
}

/* Addresses as two cards */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1rem;
	margin-block-start: 1rem;

	&::before, &::after { content: none; display: none; }
	& .woocommerce-Address { float: none; inline-size: auto; padding: 1.25rem; border: 1px solid var(--px-border); border-radius: var(--px-radius-l); }
	& .woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-block-end: 0.75rem; }
	& .woocommerce-Address-title::before, & .woocommerce-Address-title::after { content: none; }
	& .woocommerce-Address-title h2 { margin: 0; font-size: var(--wp--preset--font-size--large); }
	& .woocommerce-Address-title .edit { float: none; margin: 0; font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--px-red); }
	& address { font-style: normal; line-height: 1.6; color: var(--px-muted); }
}

/* Account forms (address, account details): same controls as the rest of the site */
.woocommerce-MyAccount-content {
	& form .form-row { display: grid; gap: 0.3rem; margin: 0 0 1rem; padding: 0; float: none; inline-size: auto; }
	& form label { font-weight: 600; font-size: var(--wp--preset--font-size--small); }
	& form .input-text,
	& form select,
	& form .select2-selection {
		box-sizing: border-box;
		inline-size: 100%;
		min-block-size: var(--px-control-h);
		padding-inline: 0.75rem;
		border: 1px solid var(--px-border);
		border-radius: var(--px-radius-control);
		background: var(--px-white);
		font: inherit;
	}
	& form .input-text:focus, & form select:focus { outline: 2px solid var(--px-red); outline-offset: 1px; }
	& form em, & form .description { font-size: var(--wp--preset--font-size--x-small); font-style: normal; color: var(--px-muted); }
	& .woocommerce-EditAccountForm, & .woocommerce-address-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1rem;
		max-inline-size: 48rem;

		@media (max-width: 781px) { grid-template-columns: minmax(0, 1fr); }
		& > *:not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; }
		& > .clear { display: none; }
	}
	& fieldset {
		margin: 0.5rem 0 1rem;
		padding: 1.25rem 1.25rem 0.25rem;
		border: 1px solid var(--px-border);
		border-radius: var(--px-radius-l);

		& legend { padding-inline: 0.4rem; font-weight: 700; }
	}
	& form button[type="submit"], & form .button { justify-self: start; }
	& .woocommerce-address-fields > p:last-child { margin-block-start: 0.5rem; }
}
/* Logged out: the login form as a centred card */
.woocommerce-account .wp-block-post-content > .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
	max-inline-size: 28rem;
	margin: 2rem auto 3rem;
}
.woocommerce-form-login {
	display: grid;
	gap: 0.75rem;
	padding: 1.5rem;
	border: 1px solid var(--px-border);
	border-radius: var(--px-radius-l);

	& label { display: block; margin-block-end: 0.25rem; font-weight: 600; font-size: var(--wp--preset--font-size--small); }
	& .input-text {
		box-sizing: border-box;
		inline-size: 100%;
		min-block-size: var(--px-control-h);
		padding-inline: 0.75rem;
		border: 1px solid var(--px-border);
		border-radius: var(--px-radius-control);
		font: inherit;
	}
	& .input-text:focus { outline: 2px solid var(--px-red); outline-offset: 1px; }
	& .woocommerce-form-login__submit { inline-size: 100%; margin-block-start: 0.5rem; }
	& p { margin: 0; }
}