/*
 * LEVA Mind: WooCommerce styles.
 * Loaded only when WooCommerce is active. Follows BRAND.md:
 * Olive for standard buttons, Terracotta only for the main CTA
 * (add to cart on a product page, place order, checkout).
 */

/* ---- Product grid ---- */
/* Product photos in grids (shop, collections, home page): the buttons' leaf shape, like on the product page. */
.wc-block-product-template .wc-block-components-product-image img,
.wc-block-components-product-image img {
	border-radius: var(--wp--custom--radius-button);
}
/* The photo's box has the same shape, so its Ivory background doesn't show in the corners (e.g. on the
   home page's Sage Green). */
.wc-block-components-product-image {
	border-radius: var(--wp--custom--radius-button);
}
.woocommerce-product-gallery img {
	border-radius: var(--wp--custom--radius);
}
/* Phones: one product per row, never two side by side (at full size, so labels, price and summary keep their
   normal size). */
@media (max-width: 599px) {
	.wc-block-product-template.wc-block-product-template {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}
/* Space between the rows of products (WooCommerce's default is 1.25em): each card (photo, summary,
   button) stands on its own. */
.wc-block-product-template.wc-block-product-template {
	row-gap: clamp(2.5rem, 4.5vw, 4rem);
}
.wc-block-product-template .wp-block-post-title {
	margin-block: var(--wp--preset--spacing--30) 0.25rem;
}
.wc-block-product-template .wp-block-post-title a {
	text-decoration: none;
}

/* Prices: Questrial in Dark Forest, sale price in Olive. */
.wc-block-components-product-price,
.wp-block-woocommerce-product-price {
	font-family: var(--wp--preset--font-family--questrial);
	color: var(--wp--preset--color--dark-forest);
}
.wc-block-components-product-price del,
.wp-block-woocommerce-product-price del {
	opacity: 0.55;
}
.wc-block-components-product-price ins,
.wp-block-woocommerce-product-price ins {
	text-decoration: none;
	color: var(--wp--custom--color--primary);
}

/* Sale badge: brand Badge (Soft Mustard pill, Dark Forest text). */
.wc-block-components-product-sale-badge,
.wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--soft-mustard);
	color: var(--wp--preset--color--dark-forest);
	border: 0;
	border-radius: var(--wp--custom--radius-pill);
	font-family: var(--wp--preset--font-family--questrial);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--button);
	padding: 0.2rem 0.8rem;
	margin: 0.75rem;
}

/* ---- Main calls to action: Terracotta Coral ---- */
.single_add_to_cart_button,
.wp-block-woocommerce-add-to-cart-form .wp-element-button,
.wp-block-woocommerce-add-to-cart-with-options .wp-element-button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-block-mini-cart__footer-checkout {
	background-color: var(--wp--preset--color--terracotta-coral) !important;
	color: var(--wp--preset--color--white) !important;
	border: 0 !important;
	border-radius: var(--wp--custom--radius-button) !important;
}
.single_add_to_cart_button:hover,
.wp-block-woocommerce-add-to-cart-form .wp-element-button:hover,
.wp-block-woocommerce-add-to-cart-with-options .wp-element-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-mini-cart__footer-checkout:hover {
	background-color: var(--wp--preset--color--dark-forest) !important;
	color: var(--wp--preset--color--ivory) !important;
}

/* Secondary mini-cart button: outline. */
.wc-block-mini-cart__footer-cart.wp-element-button {
	background: transparent;
	color: var(--wp--preset--color--dark-forest);
	border: 1px solid currentColor;
}

/* ---- Forms (cart, checkout, account) ---- */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-quantity-selector,
.woocommerce form .input-text,
.woocommerce form select,
.quantity .qty {
	border-color: #CFC7B3 !important;
	border-radius: var(--wp--custom--radius) !important;
	background-color: var(--wp--preset--color--ivory) !important;
}
.wc-block-components-text-input input:focus,
.woocommerce form .input-text:focus,
.quantity .qty:focus {
	border-color: var(--wp--custom--color--primary) !important;
	box-shadow: 0 0 0 1px var(--wp--custom--color--primary) !important;
	outline: 0;
}
.wc-block-components-radio-control__input:checked,
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--wp--custom--color--primary);
	background-color: var(--wp--custom--color--primary);
}

/* Order summary and totals panels: Ivory with a thin line. */
.wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-cart-order-summary-block {
	background: var(--wp--preset--color--ivory);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--custom--color--line);
}

/* Notices. */
.wc-block-components-notice-banner {
	border-radius: var(--wp--custom--radius);
	font-size: var(--wp--preset--font-size--small);
}
.wc-block-components-notice-banner.is-success {
	background-color: var(--wp--preset--color--ivory);
	border-color: var(--wp--custom--color--primary);
}
.wc-block-components-notice-banner.is-success > svg {
	background-color: var(--wp--custom--color--primary);
}

/* ---- Header icons ---- */
.wc-block-mini-cart__button,
.wc-block-customer-account a {
	color: var(--wp--preset--color--dark-forest);
}
.wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--terracotta-coral) !important;
	color: var(--wp--preset--color--white) !important;
	border-color: var(--wp--preset--color--ivory) !important;
}

/* Breadcrumbs, result count and sorting: quiet Questrial. */
.wc-block-breadcrumbs,
.woocommerce-breadcrumb,
.wc-block-product-results-count,
.woocommerce-result-count {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
}

/* Compact buttons in product grids (4 across). */
.wc-block-product-template .wp-block-button__link,
.wc-block-product-template .wc-block-components-product-button__button,
.wp-block-woocommerce-product-button .wp-element-button {
	font-size: 0.8125rem !important;
	padding: 0.7rem 1rem !important;
	line-height: 1.2 !important;
	white-space: nowrap !important; /* "In winkelwagen" on one line where the cards are wide enough */
	max-width: 100%;
}
/* Narrower product cards (4 columns below ~1200px, 2 columns on phones): let long button text wrap. */
@media (max-width: 1199px) {
	.wc-block-product-template .wp-block-button__link,
	.wc-block-product-template .wc-block-components-product-button__button,
	.wp-block-woocommerce-product-button .wp-element-button {
		white-space: normal !important;
		text-align: center;
	}
}

/* Sorting dropdown and quantity field. */
.woocommerce-ordering select,
.wc-block-catalog-sorting select,
input.qty {
	font-family: var(--wp--preset--font-family--questrial);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dark-forest);
	background-color: var(--wp--preset--color--ivory);
	border: 1px solid #CFC7B3;
	border-radius: var(--wp--custom--radius);
	padding: 0.6rem 0.9rem;
	min-height: 2.75rem;
}
input.qty {
	width: 4.5rem;
	text-align: center;
}
/* Dropdowns: our own chevron (Dark Forest, the same as in the menu) with room on its right, instead of
   the browser's arrow pressed against the edge. */
.woocommerce-ordering select,
.wc-block-catalog-sorting select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%233E4138' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 0.75rem;
	cursor: pointer;
}
.woocommerce-ordering select:focus,
.wc-block-catalog-sorting select:focus,
input.qty:focus {
	outline: 2px solid var(--wp--custom--color--primary);
	outline-offset: 1px;
}

/* Notices receive focus after add to cart: use the brand focus color. */
.wc-block-components-notice-banner:focus {
	outline: 2px solid var(--wp--custom--color--primary);
	outline-offset: 2px;
}

/* Everything WooCommerce renders on its own surface is Ivory too. */
.wc-block-components-drawer,
.wc-block-mini-cart__drawer .wc-block-components-drawer__content,
.wc-block-components-notice-banner,
.wc-block-components-panel,
.wc-block-components-totals-wrapper,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control--highlight-checked,
.woocommerce-product-gallery,
.wc-block-components-product-image,
table.shop_table,
.woocommerce-order-details,
.woocommerce-customer-details address {
	background-color: var(--wp--preset--color--ivory) !important;
}
.wc-block-components-drawer__screen-overlay {
	background-color: rgb(62 65 56 / 0.35);
}
.wc-blocks-components-select__container,
.wc-blocks-components-select .wc-blocks-components-select__container,
.woocommerce-product-gallery .zoomImg {
	background-color: var(--wp--preset--color--ivory) !important;
}

/* WooCommerce's own buttons follow the theme's (smaller) default button size. */
.single_add_to_cart_button,
.wp-block-woocommerce-add-to-cart-form .wp-element-button,
.wp-block-woocommerce-add-to-cart-with-options .wp-element-button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-block-mini-cart__footer-actions .wp-element-button {
	min-height: 0 !important;
	padding: 0.7rem 1.4rem !important;
	font-size: var(--wp--preset--font-size--small) !important;
	line-height: 1.2 !important;
}

/* Quantity field next to the add-to-cart button: same height as the (smaller) button. */
form.cart input.qty {
	box-sizing: border-box;
	height: 2.45rem;
	min-height: 0;
	padding-block: 0;
}

/* WooCommerce's notice bar sets its own (grey) focus color with a more specific rule: same Olive ring. */
.wc-block-components-notice-banner .wc-block-components-notice-banner__content a:focus-visible,
.wc-block-components-notice-banner .wc-block-components-notice-banner__content .wc-forward:focus-visible {
	outline: 2px solid var(--wp--custom--color--primary) !important;
	outline-offset: 2px;
}
/* WooCommerce animates *all* properties of notice links, so the focus ring faded in from grey;
   keep the animation for color/opacity only, so the Olive ring appears at once. */
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content a,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward {
	transition-property: color, background-color, opacity !important;
}

/*
 * Account panel (inc/account-drawer.php): slides in from the right like the mini-cart
 * (480px wide, Ivory, 0.3s slide, dimmed page behind it).
 */
.leva-account-drawer {
	position: fixed;
	inset: 0;
	z-index: 9999;
}
.leva-account-drawer__overlay {
	position: absolute;
	inset: 0;
	background-color: rgb(62 65 56 / 0.35);
	opacity: 0;
	transition: opacity 0.3s;
}
.leva-account-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	box-sizing: border-box;
	width: min(480px, 100%);
	height: 100%;
	overflow-y: auto;
	padding: 4rem var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--ivory);
	transform: translateX(100%);
	transition: transform 0.3s;
}
.leva-account-drawer.is-open .leva-account-drawer__overlay {
	opacity: 1;
}
.leva-account-drawer.is-open .leva-account-drawer__panel {
	transform: none;
}
.has-account-drawer body {
	overflow: hidden;
}
.leva-account-drawer__close {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--dark-forest);
	cursor: pointer;
}
.leva-account-drawer__close svg {
	fill: currentColor;
}
.leva-account-drawer__title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--xx-large);
}
.leva-account-drawer__form > p {
	margin: 0 0 var(--wp--preset--spacing--30);
}
.leva-account-drawer__field label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
}
.leva-account-drawer__field input {
	box-sizing: border-box;
	width: 100%;
	min-height: 3rem;
	padding: 0.6rem 1rem;
	border: 1px solid #CFC7B3;
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--ivory);
	color: var(--wp--preset--color--dark-forest);
	font-family: var(--wp--preset--font-family--questrial);
	font-size: var(--wp--preset--font-size--medium);
}
.leva-account-drawer__field input:focus {
	border-color: var(--wp--custom--color--primary);
}
.leva-account-drawer__remember label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}
.leva-account-drawer__remember input {
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--wp--custom--color--primary);
}
.leva-account-drawer__submit .wp-element-button {
	width: 100%;
	border: 0;
	cursor: pointer;
}
.leva-account-drawer__help,
.leva-account-drawer__logout {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 2;
}
.leva-account-drawer__error {
	margin-bottom: var(--wp--preset--spacing--30);
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--wp--preset--color--terracotta-coral);
	background-color: var(--wp--preset--color--warm-sand);
	border-radius: 0 var(--wp--custom--radius) var(--wp--custom--radius) 0;
	font-size: var(--wp--preset--font-size--small);
}
.leva-account-drawer__error p {
	margin: 0;
}
.leva-account-drawer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wp--custom--color--line);
}
.leva-account-drawer__links li {
	border-bottom: 1px solid var(--wp--custom--color--line);
}
.leva-account-drawer__links a {
	display: block;
	padding: 0.9rem 0;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--button);
	font-size: var(--wp--preset--font-size--small);
}
.leva-account-drawer__links a:hover {
	color: var(--wp--custom--color--primary);
}
@media (prefers-reduced-motion: reduce) {
	.leva-account-drawer__overlay,
	.leva-account-drawer__panel {
		transition: none;
	}
}

/* Cart, checkout and account pages: the title on the full content width like every other page
   (WooCommerce caps it at 1000px). */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .wp-block-post-title.alignwide {
	max-width: var(--wp--style--global--wide-size);
}

/* Outline buttons of WooCommerce (e.g. "Bekijk winkelwagen" in the cart panel): on hover the theme's
   button hover (Dark Forest with Ivory text) instead of WooCommerce's near-black with a white edge. */
.wc-block-components-button:not(.is-link).is-style-outline:is(:hover, :focus-visible, :active) {
	background-color: var(--wp--preset--color--dark-forest);
	color: var(--wp--preset--color--ivory);
	border-color: var(--wp--preset--color--dark-forest);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--dark-forest);
}

/*
 * Product page (templates/single-product.html): a sticky left column with the title, the photos (the
 * price on the photo, top left) and the add-to-cart button; the description on the right. The main photo has the buttons' leaf shape; the
 * thumbnails sit on top of it, at the bottom.
 */
@media (min-width: 782px) {
	/* Taller than the window (e.g. with a set picker): it scrolls along until its bottom is in view, then
	   sticks (--leva-aside-height from assets/js/header.js). */
	.product-layout > .product-media {
		position: sticky;
		top: min(
			calc(var(--leva-header-height, 96px) + var(--wp-admin--admin-bar--height, 0px) + 1.5rem),
			calc(100vh - var(--leva-aside-height, 0px) - 1.5rem)
		);
		align-self: flex-start;
	}
}
.product-media .woocommerce-product-gallery {
	position: relative;
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}
.product-media .woocommerce-product-gallery .flex-viewport,
.product-media .woocommerce-product-gallery__wrapper {
	border-radius: var(--wp--custom--radius-button);
	overflow: hidden;
}
/* One shape for all photos (square), so the column doesn't jump in height between photos and fits a
   13" screen while sticky. The lightbox (magnifier) shows the whole photo. */
.product-media .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}
/* Thumbnails on the photo, at the bottom. */
.product-media .woocommerce-product-gallery ol.flex-control-thumbs {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.9rem;
	z-index: 2;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0 0.9rem;
	list-style: none;
}
.product-media .woocommerce-product-gallery ol.flex-control-thumbs li {
	float: none !important;
	width: 3.5rem !important;
	margin: 0 !important;
}
.product-media .woocommerce-product-gallery ol.flex-control-thumbs img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border: 2px solid var(--wp--preset--color--ivory);
	border-radius: 3px 12px 3px 12px; /* a small leaf */
	box-shadow: 0 2px 8px rgb(62 65 56 / 0.18);
	opacity: 0.75;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.product-media .woocommerce-product-gallery ol.flex-control-thumbs img:hover,
.product-media .woocommerce-product-gallery ol.flex-control-thumbs img.flex-active {
	opacity: 1;
}
.product-media .woocommerce-product-gallery__trigger {
	z-index: 3;
}
/* Right column: the description directly below the add-to-cart form. */
.product-info > * {
	margin-block-start: 0;
}
.product-info > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}
.product-info .wp-block-woocommerce-product-details {
	margin-block-start: var(--wp--preset--spacing--50);
}
@media (max-width: 781px) {
	.product-media .woocommerce-product-gallery ol.flex-control-thumbs li {
		width: 2.6rem !important;
	}
	.product-media .woocommerce-product-gallery ol.flex-control-thumbs {
		gap: 0.3rem;
		bottom: 0.6rem;
	}
}
/* Left column: title above the photo, price on the photo, add-to-cart below it. */
.product-media > * {
	margin-block: 0 !important;
}
.product-media > * + * {
	margin-block-start: var(--wp--preset--spacing--30) !important;
}
.product-media .wp-block-post-title {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.15;
}
.product-photo {
	position: relative;
}
.product-photo__price {
	position: absolute;
	top: 0.9rem;
	left: 0.9rem;
	z-index: 3;
	margin: 0 !important;
	padding: 0.35rem 0.9rem;
	border-radius: 3px 12px 3px 12px; /* a small leaf */
	background: rgb(244 241 225 / 0.9);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: var(--wp--preset--font-size--medium) !important;
	line-height: 1.4;
	color: var(--wp--preset--color--dark-forest);
}
.product-photo__price .woocommerce-Price-amount {
	font-weight: 400;
}
/* Right column: the description from the top. */
.product-info .wp-block-woocommerce-product-details {
	margin-block-start: 0 !important;
}
/* The summary ("Korte productbeschrijving") at the top of the right column, next to the photo: an
   introduction above the description tabs (inc/product-summary.php leaves it out when the description
   already contains it). */
.product-info .product-lead {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--dark-forest);
}
.product-info .product-lead p {
	margin: 0;
}
.product-info .product-lead p + p {
	margin-top: 0.75rem;
}
.product-info .product-lead + * {
	margin-block-start: var(--wp--preset--spacing--50) !important;
}
/* Wide screens: the whole left column (title, photo, button) fits the window while sticky, also on a
   13" laptop: on short windows the square photo gets a little smaller. */
@media (min-width: 782px) {
	.product-media .product-photo {
		max-width: min(29rem, calc(100vh - var(--leva-header-height, 96px) - var(--wp-admin--admin-bar--height, 0px) - 14rem));
	}
}
/* The magnifier (opens the photo full size): the same small Ivory leaf as the price label. */
.product-media .woocommerce-product-gallery__trigger {
	top: 0.9rem !important;
	right: 0.9rem !important;
	width: 2.25rem !important;
	height: 2.25rem !important;
	display: grid !important;
	place-items: center;
	border-radius: 3px 12px 3px 12px !important;
	background: rgb(244 241 225 / 0.9) !important;
	font-size: 0 !important; /* only the icon */
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: none !important;
}

/* Product photos in the cart panel, on the cart page and in the checkout summary: the leaf shape too
   (scaled down for the small thumbnails). */
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img,
.wc-block-mini-cart__products-table .wc-block-cart-item__image img {
	border-radius: 3px 12px 3px 12px;
}

/*
 * Product grids (shop, collections, home page): the product name on the photo, top left, as two labels
 * (inc/product-card-labels.php): the title on an Olive label, with below it the subtitle (e.g. "Puzzel 99
 * stukjes") on a label like the floating header (translucent Ivory with blur). Their left sides are flat against the photo's edge; the right sides have the leaf corners,
 * mirrored top to bottom, so together they form one leaf.
 */
li.wc-block-product {
	position: relative;
}
li.wc-block-product > .product-card-labels {
	position: absolute;
	top: 1rem;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: calc(100% - 2.5rem);
}
.product-card-labels > .wp-block-post-title {
	margin: 0 !important;
	padding: 0.5rem 1.2rem 0.5rem 1rem;
	border-radius: 0 24px 6px 0;
	background-color: var(--wp--custom--color--primary);
	font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem) !important; /* up to 26px */
	line-height: 1.2;
	text-align: left !important;
	color: var(--wp--preset--color--ivory);
}
.product-card-labels > .wp-block-post-title a,
.product-card-labels > .wp-block-post-title a:hover {
	color: inherit;
	text-decoration: none;
}
.product-card-labels__subtitle {
	margin: 0 !important;
	padding: 0.3rem 0.9rem 0.3rem 1rem; /* text in line with the title's */
	border: 1px solid rgb(220 212 193 / 0.7);
	border-left: 0;
	border-radius: 0 6px 24px 0; /* the title label's corners, mirrored */
	background-color: rgb(244 241 225 / 0.72);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	font-family: var(--wp--preset--font-family--questrial);
	font-size: 0.8125rem;
	line-height: 1.3;
	color: var(--wp--preset--color--dark-forest);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.product-card-labels__subtitle {
		background-color: rgb(244 241 225 / 0.96);
	}
}
/* The price on the photo, bottom right: the mirror image of the name labels (flat against the photo's
   right edge, leaf corners on the left). The photos in grids are square and as wide as the card, so the
   photo's bottom edge is at 100% of the card's width (container query unit cqw). */
li.wc-block-product {
	container-type: inline-size;
}
li.wc-block-product > .wp-block-woocommerce-product-price {
	position: absolute;
	top: calc(100cqw - 1rem);
	right: 0;
	z-index: 2;
	transform: translateY(-100%);
	margin: 0 !important;
	padding: 0.4rem 0.9rem 0.4rem 1rem;
	border: 1px solid rgb(220 212 193 / 0.7);
	border-right: 0;
	border-radius: 24px 0 0 6px;
	background-color: rgb(244 241 225 / 0.72);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	line-height: 1.3;
}
/* The price itself: larger than the Small size set on the block (20px on wide screens, 16px on phones). */
li.wc-block-product > .wp-block-woocommerce-product-price .wc-block-components-product-price {
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem) !important;
	line-height: 1.3;
}
/* Below the photo: the summary (inc/product-summary.php) and the button. The card is a column, so the
   buttons in a row line up at the bottom, whatever the length of the summaries. */
li.wc-block-product {
	display: flex;
	flex-direction: column;
}
li.wc-block-product > .wc-block-components-product-image {
	margin-bottom: var(--wp--preset--spacing--30) !important;
}
li.wc-block-product > .product-card-summary {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3; /* cut off at 3 lines with "…"; the full summary is on the product page */
	line-clamp: 3;
	overflow: hidden;
	margin: 0 0 var(--wp--preset--spacing--30) !important;
	padding-inline: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	text-align: center;
	color: color-mix(in srgb, var(--wp--preset--color--dark-forest) 78%, transparent);
}
li.wc-block-product > .wp-block-woocommerce-product-button {
	margin-top: auto !important;
}
/* The sale badge moves to the bottom left of the photo, clear of the name (top left) and price (bottom right). */
li.wc-block-product .wc-block-components-product-image .wc-block-components-product-sale-badge {
	top: auto !important;
	bottom: 1rem !important;
	right: auto !important;
	left: 0.75rem !important;
}
/* Long names wrap neatly (hyphenated, never cut mid-word without a hyphen). */
.product-card-labels > * {
	overflow-wrap: normal;
	word-break: normal;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* Collection sections (pattern leva-u/category-sections, e.g. Serenity: puzzles by size). A group (e.g.
   "Piecely puzzels") has its own title and description, with its sections (h3, a little smaller) below. */
.collection-section + .collection-section,
.collection-group + .collection-section,
.collection-section + .collection-group,
.collection-group + .collection-group {
	margin-top: clamp(3.5rem, 7vw, 6rem) !important;
}
.collection-group__title {
	margin-bottom: 0.75rem !important;
	font-size: clamp(2rem, 3.2vw, 2.75rem);
}
.collection-group__title a {
	text-decoration: none;
}
.collection-group__description {
	margin-bottom: var(--wp--preset--spacing--50) !important;
}
@media (min-width: 782px) {
	.collection-group__description {
		max-width: calc(min(100%, var(--wp--style--global--wide-size)) * 0.62 - var(--wp--preset--spacing--60) * 0.62);
	}
}
.collection-group__description p {
	margin: 0;
}
.collection-group__description p + p {
	margin-top: 1lh; /* a blank line between paragraphs */
}
.collection-group > .collection-section {
	margin-top: 0;
}
.collection-group > .collection-section + .collection-section {
	margin-top: clamp(2.5rem, 5vw, 4rem) !important;
}
h3.collection-section__title {
	font-size: clamp(1.5rem, 2.1vw, 1.875rem);
}
.collection-section__title {
	margin-bottom: var(--wp--preset--spacing--40) !important;
	font-size: clamp(1.75rem, 2.6vw, 2.25rem);
}
.collection-section__title a {
	text-decoration: none;
}
/* The sub-collection's description (Products → Categories) between the title and the products: the shared
   text of its products, at a readable width (as the page text column). */
.collection-section__title:has(+ .collection-section__description) {
	margin-bottom: 0.75rem !important;
}
.collection-section__description {
	margin-bottom: var(--wp--preset--spacing--40) !important;
}
@media (min-width: 782px) {
	.collection-section__description {
		max-width: calc(min(100%, var(--wp--style--global--wide-size)) * 0.62 - var(--wp--preset--spacing--60) * 0.62);
	}
}
.collection-section__description p {
	margin: 0;
}
.collection-section__description p + p {
	margin-top: 1lh; /* a blank line between paragraphs */
}

/* Set picker (inc/product-set.php): choose e.g. 3 bookmarks; − / + per item, the counter shows x / 3. */
.product-set {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	border: 0;
}
.product-set__legend {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-bottom: 0.75rem;
	font-size: 0.75rem;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}
.product-set__count {
	color: var(--wp--preset--color--dark-forest);
	font-variant-numeric: tabular-nums;
}
.product-set.is-complete .product-set__count {
	color: var(--wp--custom--color--primary);
}
.product-set__list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.product-set__item {
	display: grid;
	grid-template-columns: 3rem 1fr auto;
	align-items: center;
	gap: 0.85rem;
	padding: 0.45rem 0.6rem 0.45rem 0.45rem;
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius-button);
	transition: border-color 0.2s ease;
}
.product-set__item.is-chosen {
	border-color: var(--wp--custom--color--primary);
}
.product-set__image {
	display: block;
	width: 3rem !important;
	height: 3rem !important;
	object-fit: cover;
	border-radius: 3px 12px 3px 12px;
}
.product-set__name {
	font-size: var(--wp--preset--font-size--small);
}
.product-set__stepper {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}
.product-set__stepper button {
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid #CFC7B3;
	border-radius: var(--wp--custom--radius-pill);
	background: transparent;
	color: var(--wp--preset--color--dark-forest);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}
.product-set__stepper button:hover:not(:disabled) {
	border-color: var(--wp--custom--color--primary);
	color: var(--wp--custom--color--primary);
}
.product-set__stepper button:disabled {
	opacity: 0.35;
	cursor: default;
}
.product-set__qty {
	width: 2rem;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font: inherit;
	-moz-appearance: textfield;
}
.product-set__qty::-webkit-inner-spin-button,
.product-set__qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.single_add_to_cart_button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/*
 * Review form (product page, tab "Beoordelingen"): the same look as the contact forms (main.css):
 * labels above the fields, Ivory fields with a sand border, focus ring and required marks in the
 * primary color, the same spacing between the fields.
 */
#review_form .comment-reply-title {
	display: block;
	margin-bottom: 0.25rem;
	font-size: var(--wp--preset--font-size--medium);
}
#review_form .comment-notes {
	margin: 0 0 1.75rem;
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.85;
}
#review_form .comment-form > :is(p, div) {
	margin: 0 0 1.75rem;
}
#review_form .comment-form > .form-submit {
	margin-bottom: 0;
}
#review_form label {
	display: block;
	margin-bottom: 0.25rem;
	font-family: var(--wp--preset--font-family--questrial);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--dark-forest);
}
#review_form .required {
	color: var(--wp--custom--color--primary);
	opacity: 0.85;
}
#review_form :is(input[type="text"], input[type="email"], textarea) {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 1rem;
	background-color: var(--wp--preset--color--ivory);
	color: var(--wp--preset--color--dark-forest);
	border: 1px solid #CFC7B3;
	border-radius: var(--wp--custom--radius);
	font-family: var(--wp--preset--font-family--questrial);
	font-size: var(--wp--preset--font-size--medium);
	box-shadow: none;
}
#review_form textarea {
	min-height: 12rem;
	resize: vertical;
}
#review_form :is(input, textarea):focus {
	border-color: var(--wp--custom--color--primary);
	outline: 2px solid var(--wp--custom--color--primary);
	outline-offset: 1px;
}
#review_form #respond p.stars {
	margin: 0;
	line-height: 1;
}
#review_form .stars a {
	color: var(--wp--custom--color--primary);
}
/* Checkbox and its label on one line. */
#review_form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}
#review_form .comment-form-cookies-consent input {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0.2rem 0 0;
	accent-color: var(--wp--custom--color--primary);
}
#review_form .comment-form-cookies-consent label {
	margin: 0;
	line-height: 1.5;
}

/*
 * Pagination below product grids (shop, collections; Query Pagination block): the page numbers are leaf-shaped
 * chips (pages you can go to outlined, the current page filled, a tint on hover); "Vorige pagina" and "Volgende
 * pagina" are normal links. More space above the footer.
 */
.wp-block-query-pagination {
	align-items: center;
	gap: 0.5rem 1.25rem;
	margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--60) !important;
}
.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 2.5rem;
	height: 2.5rem;
	margin: 0 !important;
	padding: 0 0.9rem;
	border: 1px solid var(--wp--custom--color--primary);
	border-radius: 4px 16px 4px 16px; /* the buttons' leaf, a little smaller */
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
	color: var(--wp--custom--color--primary);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.wp-block-query-pagination a.page-numbers:hover {
	background-color: color-mix(in srgb, var(--wp--custom--color--primary) 12%, transparent);
}
.wp-block-query-pagination .page-numbers.current {
	background-color: var(--wp--custom--color--primary);
	color: var(--wp--preset--color--ivory);
}
.wp-block-query-pagination > .wp-block-query-pagination-previous,
.wp-block-query-pagination > .wp-block-query-pagination-next {
	margin: 0 !important;
	font-size: var(--wp--preset--font-size--small); /* as the page numbers */
	color: var(--wp--custom--color--primary);
}
.wp-block-query-pagination .page-numbers.dots {
	min-width: 0;
	padding: 0 0.25rem;
	border: 0;
}
.wp-block-query-pagination a:focus-visible {
	outline: 2px solid var(--wp--custom--color--primary);
	outline-offset: 2px;
}