/* ==========================================================================
   Xtrona — theme additions on top of the ported utility CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typography

   The original build loaded Sora + Manrope but pointed --font-heading at
   "Onest" and --font-body at "Inter", neither of which was ever loaded, so
   every heading silently fell back to the system sans-serif. We map the
   variables to the fonts that are actually loaded.
   -------------------------------------------------------------------------- */
:root {
	--font-heading: "Sora";
	--font-body: "Manrope";
	--font-label: "Manrope";
}

body {
	font-family: var(--font-body), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.font-heading,
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   Screen-reader-only utility

   The ported build never used sr-only, so the class is absent from the
   compiled CSS and the skip link rendered visibly at the top of every page.
   -------------------------------------------------------------------------- */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.focus\:not-sr-only:focus {
	position: static;
	width: auto;
	height: auto;
	padding: 0.5rem 1rem;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* --------------------------------------------------------------------------
   Long-form content (legal pages, product descriptions)
   -------------------------------------------------------------------------- */
.xtrona-prose > * + * {
	margin-top: 1.1em;
}

.xtrona-prose h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: oklch(var(--foreground-950));
	margin-top: 2em;
	line-height: 1.3;
}

.xtrona-prose h3 {
	font-size: 1.175rem;
	font-weight: 700;
	color: oklch(var(--foreground-900));
	margin-top: 1.6em;
}

.xtrona-prose p {
	line-height: 1.75;
}

.xtrona-prose ul,
.xtrona-prose ol {
	padding-left: 1.35rem;
	line-height: 1.75;
}

.xtrona-prose ul { list-style: disc; }
.xtrona-prose ol { list-style: decimal; }
.xtrona-prose li + li { margin-top: 0.4em; }

.xtrona-prose a {
	color: #EF6528;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.xtrona-prose a:hover { color: #E66032; }

.xtrona-prose strong { color: oklch(var(--foreground-900)); font-weight: 700; }

.xtrona-prose img {
	border-radius: 0.75rem;
	max-width: 100%;
	height: auto;
}

.xtrona-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.xtrona-prose th,
.xtrona-prose td {
	border-bottom: 1px solid oklch(var(--background-200));
	padding: 0.625rem 0.5rem;
	text-align: left;
}

/* --------------------------------------------------------------------------
   Winkelmand in de kopbalk

   Met de hand geschreven, niet met Tailwind-klassen: het thema laadt een
   vooraf gecompileerd tailwind.css, dus een klasse die daar niet in staat komt
   nooit ergens terecht - hoe geldig ze ook oogt.
   -------------------------------------------------------------------------- */
.xtrona-cart-link {
	position: relative;
}

.xtrona-cart-count {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9999px;
	background-color: #EF6528;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	pointer-events: none;
}

/* Een lege mand toont geen nul; dat leest als een storing. */
.xtrona-cart-count[data-count="0"] {
	display: none;
}

/* --------------------------------------------------------------------------
   WooCommerce overrides
   -------------------------------------------------------------------------- */

/* Product gallery */
.woocommerce-product-gallery {
	position: relative;
}

.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	border-radius: 1rem;
	overflow: hidden;
	background: #fff;
	border: 1px solid oklch(var(--background-200) / 0.6);
}

.woocommerce-product-gallery img {
	border-radius: 0.75rem;
}

.woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs li {
	margin: 0;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	border: 1px solid oklch(var(--background-200) / 0.7);
	border-radius: 0.5rem;
	cursor: pointer;
	opacity: 0.65;
	transition: opacity 0.2s, border-color 0.2s;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
	padding: 0.25rem;
}

.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: #EF6528;
}

/* Price markup inside our own containers */
.woocommerce-Price-amount { white-space: nowrap; }

/* Quantity + add to cart */
.xtrona-cart-form form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
	margin: 0;
}

.xtrona-cart-form .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid oklch(var(--background-300));
	border-radius: 9999px;
	overflow: hidden;
	background: #fff;
}

.xtrona-cart-form .quantity input.qty {
	width: 4.5rem;
	height: 3.5rem;
	border: 0;
	text-align: center;
	font-weight: 700;
	font-size: 1rem;
	color: oklch(var(--foreground-900));
	background: transparent;
	-moz-appearance: textfield;
}

.xtrona-cart-form .quantity input.qty::-webkit-outer-spin-button,
.xtrona-cart-form .quantity input.qty::-webkit-inner-spin-button {
	opacity: 1;
	height: 2rem;
}

.xtrona-cart-form button.single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3.5rem;
	padding: 0 2rem;
	border: 0;
	border-radius: 9999px;
	background: #EF6528;
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
	box-shadow: 0 10px 15px -3px rgb(232 102 58 / 0.25);
	text-decoration: none;
}

.xtrona-cart-form button.single_add_to_cart_button {
	flex: 1 1 14rem;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.xtrona-cart-form button.single_add_to_cart_button:hover {
	background: #E66032;
	color: #fff;
}

.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Secondary buttons (continue shopping, update cart) */
.woocommerce .cart .button[name="update_cart"],
.woocommerce a.button.wc-backward {
	background: #102249;
	box-shadow: none;
}

.woocommerce .cart .button[name="update_cart"]:hover,
.woocommerce a.button.wc-backward:hover {
	background: #142138;
}

/* Notices
   ------------------------------------------------------------------------
   WooCommerce zet zijn icoon absoluut op `left: 1.5em` en rekent op
   `padding-left: 3.5em`. Wij gaven deze blokken ooit `padding: 1rem 1.25rem`
   en daarmee schoof de tekst onder het icoon: "Je account gebruikt…" begon
   zichtbaar bij "account". De ruimte links blijft nu staan.

   De knop erin stond los rechts te zweven door WooCommerce' `float: right`.
   Flex zet hem netjes achter de tekst, en op een smal scherm eronder. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	border-radius: 0.875rem;
	border: 1px solid oklch(var(--background-200));
	border-top: 3px solid #4a7fd9;
	background: #fff;
	padding: 1rem 1.25rem 1rem 3.25rem;
	margin: 0 0 1.5rem;
	list-style: none;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.woocommerce-message > .button,
.woocommerce-info > .button,
.woocommerce-error > .button {
	float: none !important;
	margin: 0 0 0 auto;
}

.woocommerce-message { border-top-color: #10b981; }
.woocommerce-error { border-top-color: #EF6528; }

/* Result count + ordering on the archive */
.woocommerce-ordering select {
	border: 1px solid oklch(var(--background-300));
	border-radius: 9999px;
	padding: 0.55rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	background: #fff;
	color: oklch(var(--foreground-800));
}

/* Pagination */
.woocommerce-pagination ul.page-numbers,
.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	border: 0;
	padding: 0;
	margin: 0;
	list-style: none;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.75rem;
	border-radius: 9999px;
	background: #fff;
	border: 1px solid oklch(var(--background-200));
	font-weight: 600;
	color: oklch(var(--foreground-700));
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: #102249;
	border-color: #102249;
	color: #fff;
}

/* Related products section spacing */
.related.products {
	max-width: 80rem;
	margin: 0 auto;
	padding: 3rem 1rem 3.5rem;
}

.related.products > h2 {
	font-size: 1.75rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: oklch(var(--foreground-950));
}

.related.products ul.products {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.related.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.related.products ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.related.products ul.products li.product {
	background: #fff;
	border: 1px solid oklch(var(--background-200) / 0.6);
	border-radius: 1rem;
	padding: 1rem;
	text-align: center;
}

.related.products ul.products li.product img {
	border-radius: 0.75rem;
	margin-bottom: 0.75rem;
}

.related.products ul.products li.product .woocommerce-loop-product__title {
	font-size: 0.95rem;
	font-weight: 700;
	color: oklch(var(--foreground-950));
	margin-bottom: 0.35rem;
}

/* Reviews */
.woocommerce #reviews #comments ol.commentlist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.woocommerce #reviews #comments ol.commentlist li .comment_container {
	display: flex;
	gap: 1rem;
	background: oklch(var(--background-50));
	border: 1px solid oklch(var(--background-200) / 0.6);
	border-radius: 1rem;
	padding: 1.25rem;
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 9999px;
	position: static;
	float: none;
	padding: 0;
	border: 0;
	background: transparent;
}

.woocommerce #review_form #respond textarea,
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"] {
	width: 100%;
	border: 1px solid oklch(var(--background-300));
	border-radius: 0.75rem;
	padding: 0.75rem 1rem;
	font: inherit;
}

/* Forms elsewhere (checkout, contact) */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
	border: 1px solid oklch(var(--background-300));
	border-radius: 0.75rem;
	padding: 0.75rem 1rem;
	font: inherit;
	line-height: 1.4;
}

/* Cart + checkout tables */
.woocommerce table.shop_table {
	border-radius: 1rem;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid oklch(var(--background-200));
	overflow: hidden;
}

.woocommerce table.shop_table th {
	background: oklch(var(--background-100));
	font-weight: 700;
	color: oklch(var(--foreground-900));
}

/* Keep WooCommerce shortcode pages inside the site container */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content {
	max-width: 80rem;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Details/summary FAQ — remove the native marker
   -------------------------------------------------------------------------- */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ""; }

/* --------------------------------------------------------------------------
   Respect reduced-motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   Merkkleuren uit de officiële kit

   Het oranje is geen vlakke kleur maar een verloop met vijf stops, diagonaal
   van linksonder naar rechtsboven. Twee stops halen de bron niet: het oranje
   loopt niet lineair van licht naar diep. De vlakke kleur blijft eronder staan
   als terugval voor browsers zonder gradient-ondersteuning.
   -------------------------------------------------------------------------- */
:root {
	--xtrona-navy: #102249;
	--xtrona-navy-diep: #0B1630;
	--xtrona-oranje-verloop: linear-gradient(
		45deg,
		#E66032 0%,
		#EF6528 25%,
		#F17725 50%,
		#F48523 75%,
		#F58F21 100%
	);
}

/* Primaire CTA's: vlak oranje wordt het merkverloop */
.bg-\[\#EF6528\],
.xtrona-cart-form button.single_add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt {
	background-image: var(--xtrona-oranje-verloop);
}

.bg-\[\#EF6528\]:hover,
.xtrona-cart-form button.single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background-image: none;
	background-color: #E66032;
}

/* De winkelwagenteller blijft vlak: een verloop op 18 px is ruis. */
.xtrona-cart-count {
	background-image: none !important;
	background-color: #EF6528;
}

/* -------------------------------------------------------------------------
 * WooCommerce specificity fixes
 *
 * woocommerce-layout.css declares `.woocommerce img, .woocommerce-page img
 * { height: auto }`. At 0,1,1 that outranks every single-class Tailwind height
 * utility (0,1,0) and loads after our stylesheet, so on shop pages the logo
 * snapped back to its intrinsic 1044x352 and product thumbnails lost h-full.
 * ---------------------------------------------------------------------- */
.xtrona-logo,
.xtrona-logo-footer {
	width: auto !important;
	max-width: none;
	object-fit: contain;
}

.xtrona-logo {
	height: 2.75rem !important;
}

@media (min-width: 768px) {
	.xtrona-logo {
		height: 3.5rem !important;
	}
}

.xtrona-logo-footer {
	height: 3.5rem !important;
}

.woocommerce img.h-full,
.woocommerce-page img.h-full {
	height: 100%;
}

/* -------------------------------------------------------------------------
 * Product gallery
 *
 * WooCommerce sizes the gallery with `.woocommerce div.product div.images
 * { float: left; width: 48% }`. That selector scores (0,3,2) - three classes
 * (.woocommerce, .product, .images) and two elements - so a rule carrying only
 * .woocommerce + .xtrona-gallery + the gallery class loses at (0,3,1), which is
 * why the gallery kept floating at 48% and the video sat beside it. Matching
 * WooCommerce's own chain and adding .xtrona-gallery clears it honestly.
 *
 * The design puts thumbnails in a vertical rail left of the main image;
 * flexslider inserts its own .flex-viewport around the slide strip once it
 * boots, so that element is the flex child that has to grow.
 * ---------------------------------------------------------------------- */
.woocommerce div.product .xtrona-gallery div.images.woocommerce-product-gallery {
	/* !important on these two only: `display` from this very rule wins over
	   woocommerce-layout.css, yet float and width did not, so something in the
	   loaded cascade outranks a (0,5,2) selector for them. Rather than guess at
	   it, pin the two properties the layout actually depends on. */
	float: none !important;
	width: 100% !important;
	min-width: 0;
	margin: 0;
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: 0.75rem;
}

.woocommerce div.product .xtrona-gallery div.images > .flex-viewport,
.woocommerce div.product .xtrona-gallery div.images > .woocommerce-product-gallery__wrapper {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	margin: 0;
	border-radius: 1rem;
	overflow: hidden;
}

.woocommerce div.product .xtrona-gallery div.images .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	background: #fff;
}

.woocommerce div.product .xtrona-gallery div.images ol.flex-control-thumbs {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 0 0 4.5rem;
	width: 4.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 34rem;
	overflow-y: auto;
	scrollbar-width: thin;
}

.woocommerce div.product .xtrona-gallery div.images ol.flex-control-thumbs li {
	width: 100%;
	float: none;
	margin: 0;
	list-style: none;
}

.woocommerce div.product .xtrona-gallery div.images ol.flex-control-thumbs img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
	padding: 0.25rem;
	border: 1px solid rgba(16, 34, 73, 0.12);
	border-radius: 0.75rem;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.woocommerce div.product .xtrona-gallery div.images ol.flex-control-thumbs img:hover,
.woocommerce div.product .xtrona-gallery div.images ol.flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: #EF6528;
}

/* The zoom hint WooCommerce injects would sit on top of the discount badge. */
.woocommerce div.product .xtrona-gallery div.images .woocommerce-product-gallery__trigger {
	top: 1rem;
	right: 1rem;
	left: auto;
	z-index: 20;
}

/* A slide can never be wider than the strip that holds it. Cheap insurance:
   if flexslider ever measures wrong again, the page stays readable. */
.woocommerce div.product .xtrona-gallery div.images .woocommerce-product-gallery__image {
	max-width: 100%;
}

@media (max-width: 640px) {
	.woocommerce div.product .xtrona-gallery div.images.woocommerce-product-gallery {
		flex-direction: column;
		/* Column flow puts the main axis vertical, so `flex: 1 1 auto` on the
		   viewport now sizes its height and the width falls back to content.
		   Flexslider measured that content - 6176px - and wrote it onto every
		   slide, so phones got an image eighteen screens tall. Stretching the
		   cross axis gives the viewport a definite width before it measures. */
		align-items: stretch;
	}

	.woocommerce div.product .xtrona-gallery div.images > .flex-viewport,
	.woocommerce div.product .xtrona-gallery div.images > .woocommerce-product-gallery__wrapper {
		width: 100%;
		max-width: 100%;
		align-self: stretch;
	}

	/* Top-right is where the best-seller badge sits; on a phone the two overlap. */
	.woocommerce div.product .xtrona-gallery div.images .woocommerce-product-gallery__trigger {
		top: auto;
		bottom: 1rem;
	}

	.woocommerce div.product .xtrona-gallery div.images ol.flex-control-thumbs {
		flex-direction: row;
		width: 100%;
		flex: 0 0 auto;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.woocommerce div.product .xtrona-gallery div.images ol.flex-control-thumbs li {
		flex: 0 0 4rem;
	}
}

/* WooCommerce floats the summary column right at 48%; ours is a grid cell. */
.woocommerce div.product .xtrona-buy,
.woocommerce div.product div.summary.xtrona-buy {
	float: none;
	width: 100%;
	margin: 0;
}

/* Long-form prose: product descriptions and the legal pages. */
.xtrona-prose h2 {
	font-family: Sora, ui-sans-serif, system-ui, sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	color: #102249;
	margin: 2rem 0 0.75rem;
	line-height: 1.3;
}

.xtrona-prose h3 {
	font-family: Sora, ui-sans-serif, system-ui, sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: #102249;
	margin: 1.5rem 0 0.5rem;
}

.xtrona-prose h2:first-child {
	margin-top: 0;
}

.xtrona-prose .xtrona-legal-intro {
	font-size: 1.05rem;
	color: #334155;
	border-left: 3px solid #EF6528;
	padding-left: 1rem;
	margin-bottom: 2rem;
}

.xtrona-prose blockquote {
	border-left: 3px solid rgba(16, 34, 73, 0.15);
	background: #f8fafc;
	padding: 1rem 1.25rem;
	margin: 1rem 0;
	border-radius: 0 0.75rem 0.75rem 0;
}

.xtrona-prose a {
	color: #EF6528;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Prose inside the imported BigBuy description. */
.xtrona-prose p {
	margin-bottom: 1rem;
}

.xtrona-prose ul {
	list-style: disc;
	padding-left: 1.25rem;
	margin: 1rem 0;
}

.xtrona-prose li {
	margin-bottom: 0.5rem;
}

.xtrona-prose b,
.xtrona-prose strong {
	color: #102249;
	font-weight: 700;
}

/* De aantalkiezer stond hier op `display: none`, uit de tijd van losse
   landingspagina's. Hij hoort er juist te staan: we bieden 10% korting vanaf
   twee artikelen, en dit is de plek waar je dat tweede artikel kiest. De opmaak
   staat verderop bij .xtrona-cart-form .quantity. */

/* -------------------------------------------------------------------------
 * Checkout quantity picker
 *
 * Sits inside the order summary card, under the total, so it reads as part of
 * the amount rather than as a second panel competing with the form.
 * ---------------------------------------------------------------------- */
.xtrona-qty {
	border-top: 1px solid rgba(16, 34, 73, 0.1);
	/* Matches the 16px inset WooCommerce gives the totals rows above, so the
	   label lines up with the amounts instead of hugging the card edge. */
	padding: 0.75rem 1rem 0.5rem;
	margin-top: 0.75rem;
}

.xtrona-qty__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.15rem 0;
}

.xtrona-qty__label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #475569;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.xtrona-qty__stepper {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	flex-shrink: 0;
}

.xtrona-qty__stepper button {
	width: 1.5rem;
	height: 1.5rem;
	line-height: 1;
	border: 1px solid rgba(16, 34, 73, 0.18);
	border-radius: 999px;
	background: #fff;
	color: #334155;
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.xtrona-qty__stepper button:hover {
	border-color: #EF6528;
	color: #EF6528;
}

.xtrona-qty__stepper input {
	width: 2.25rem;
	height: 1.5rem;
	text-align: center;
	border: 1px solid rgba(16, 34, 73, 0.18);
	border-radius: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #0f172a;
	background: #fff;
	padding: 0;
	-moz-appearance: textfield;
}

.xtrona-qty__stepper input::-webkit-outer-spin-button,
.xtrona-qty__stepper input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.xtrona-qty.is-busy {
	opacity: 0.5;
	pointer-events: none;
}

.xtrona-qty__remove {
	width: 1.5rem;
	height: 1.5rem;
	margin-left: 0.15rem;
	border: 0;
	background: none;
	color: #94a3b8;
	font-size: 0.9375rem;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s ease;
}

.xtrona-qty__remove:hover {
	color: #dc2626;
}

/* -------------------------------------------------------------------------
 * Order summary tidying
 *
 * The Checkout block prints the product short description inside a ~150px
 * column, where it becomes an unreadable ribbon of tiny text, and repeats the
 * line price under the name as well as on the right. The description goes; the
 * duplicate price is hidden by script only when it is literally the same
 * number, so the unit price still shows when someone orders more than one.
 * ---------------------------------------------------------------------- */
.wc-block-components-order-summary-item .wc-block-components-product-metadata {
	display: none;
}

.wc-block-components-order-summary-item .wc-block-cart-item__prices[data-xtrona-dupe] {
	display: none;
}

.wp-block-woocommerce-checkout-order-summary-subtotal-block[data-xtrona-dupe] {
	display: none;
}

.xtrona-qty__note {
	margin: 0.5rem 0 0;
	font-size: 0.6875rem;
	line-height: 1.4;
	color: #94a3b8;
}

.xtrona-qty__note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.xtrona-qty__note a:hover {
	color: #EF6528;
}

/* -------------------------------------------------------------------------
 * Cart and checkout call to action
 *
 * WooCommerce's block button inherits the editor's default styling, which here
 * came out as a square dark-grey slab with underlined orange text. Give it the
 * same shape and gradient as every other primary button on the site.
 * ---------------------------------------------------------------------- */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 3.25rem;
	padding: 0.75rem 1.5rem !important;
	border: 0 !important;
	border-radius: 999px !important;
	background-color: #EF6528 !important;
	background-image: var(--xtrona-oranje-verloop) !important;
	color: #fff !important;
	font-family: Sora, ui-sans-serif, system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none !important;
	box-shadow: 0 8px 20px -8px rgba(239, 101, 40, 0.6);
	transition: opacity 0.15s ease, transform 0.1s ease;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	opacity: 0.93;
	color: #fff !important;
}

.wc-block-cart__submit-button:active,
.wc-block-components-checkout-place-order-button:active {
	transform: translateY(1px);
}

/* -------------------------------------------------------------------------
 * Product video
 *
 * The manufacturer's clip plays inline, muted and looping, with YouTube's own
 * interface switched off so it reads as part of the gallery rather than as an
 * embed. The two buttons drive it through the IFrame API; the link below is
 * the deliberate route out to YouTube.
 * ---------------------------------------------------------------------- */
.xtrona-video {
	position: relative;
	margin: 1rem 0 0;
	border-radius: 1rem;
	overflow: hidden;
	background: #0B1630;
}

.xtrona-video__frame {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.xtrona-video__frame iframe,
.xtrona-video__player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.xtrona-video__badge {
	position: absolute;
	left: 0.75rem;
	bottom: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	height: 1.75rem;
	padding: 0 0.75rem;
	border-radius: 999px;
	background: rgba(11, 22, 48, 0.7);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
}

.xtrona-video__controls {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	display: inline-flex;
	gap: 0.375rem;
}

.xtrona-video__controls button {
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: rgba(11, 22, 48, 0.7);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: background 0.15s ease;
}

.xtrona-video__controls button:hover {
	background: #EF6528;
}

.xtrona-video__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #64748b;
	text-decoration: none;
}

.xtrona-video__link:hover {
	color: #EF6528;
}

.xtrona-video__link i {
	font-size: 1rem;
}

/* Clicks must not reach the player: the visitor stays on the product page. */
.xtrona-video__shield {
	position: absolute;
	inset: 0;
	z-index: 2;
	cursor: default;
}

.xtrona-video__badge,
.xtrona-video__controls {
	z-index: 3;
}

/* Hides YouTube's title card and channel avatar whenever the clip is not
   actually playing — which is the only time that chrome appears. */
.xtrona-video__cover {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	background-color: #0B1630;
	background-size: cover;
	background-position: center;
	cursor: pointer;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.xtrona-video__cover::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(11, 22, 48, 0.35);
}

.xtrona-video__play {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: #102249;
	font-size: 1.75rem;
	box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.5);
	transition: transform 0.15s ease;
}

.xtrona-video__cover:hover .xtrona-video__play {
	transform: scale(1.08);
}

.xtrona-video.is-playing .xtrona-video__cover {
	opacity: 0;
	pointer-events: none;
}

/* Our stand-in for WooCommerce's empty-cart block. */
.xtrona-empty-cart {
	padding: 3rem 0;
	text-align: center;
}

.xtrona-empty-cart h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: #102249;
	margin: 0 0 0.5rem;
}

.xtrona-empty-cart p {
	color: #5b6784;
	margin: 0 0 1.25rem;
}

.xtrona-empty-cart__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0 1.75rem;
	border-radius: 9999px;
	background: linear-gradient(135deg, #EF6528, #F59E0B);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.xtrona-empty-cart__cta:hover {
	filter: brightness(1.05);
	color: #fff;
}

/* On a phone the zoom trigger sat on top of the thumbnail rail. */
@media (max-width: 640px) {
	.woocommerce div.product .xtrona-gallery div.images .woocommerce-product-gallery__trigger {
		top: 1rem;
		bottom: auto;
		left: 1rem;
		right: auto;
	}
}

/* ==========================================================================
   Lopende vertrouwensband
   ==========================================================================
   Zeven beloftes passen niet stil naast elkaar op een telefoon en stapelen
   kost het halve scherm. Ze schuiven dus voorbij. De lijst staat er twee keer
   in en de animatie verschuift precies de helft, zodat de tweede kopie op de
   plek van de eerste eindigt en de naad niet te zien is.
   ========================================================================== */

.xtrona-marquee {
	overflow: hidden;
	position: relative;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.75rem 0;
	/* De randen vervagen, anders lijkt het of de tekst wordt afgekapt. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
	        mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}

.xtrona-marquee__track {
	display: flex;
	width: max-content;
	animation: xtrona-marquee 45s linear infinite;
}

/* Wie iets wil lezen houdt de muis stil; dan hoort de band dat ook te doen. */
.xtrona-marquee:hover .xtrona-marquee__track {
	animation-play-state: paused;
}

.xtrona-marquee__group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.xtrona-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 1.5rem;
	white-space: nowrap;
}

.xtrona-marquee__item i {
	font-size: 1.125rem;
}

@keyframes xtrona-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Bewegende tekst is voor sommige mensen onleesbaar of misselijkmakend. Staat
   dat in het systeem aangegeven, dan blijft de band staan: één set beloftes,
   netjes gecentreerd over meerdere regels. */
@media (prefers-reduced-motion: reduce) {
	.xtrona-marquee {
		-webkit-mask-image: none;
		        mask-image: none;
	}

	.xtrona-marquee__track {
		animation: none;
		width: 100%;
	}

	.xtrona-marquee__group {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 0.5rem;
		width: 100%;
	}

	.xtrona-marquee__group[aria-hidden="true"] {
		display: none;
	}
}

/* De header blijft staan bij het scrollen, dus een anker landt anders onder
   die balk. Een marge boven het doel zet de kop weer in beeld. */
.xtrona-anchor {
	scroll-margin-top: 6.5rem;
}

/* ==========================================================================
   Betaalmethodes
   ==========================================================================
   Alle logo's staan er, direct onder de koopknop, want daar valt de beslissing.
   Niets wordt weggevouwen: wie zijn eigen bank niet ziet staan klikt geen paneel
   open om het te controleren, die haakt af. De rij loopt door op de volgende
   regel. De logo's komen van de gateways zelf en verschillen in formaat, dus
   een vaste hoogte met vrije breedte houdt de rij rustig zonder een merk uit te
   rekken.
   ========================================================================== */

.xtrona-pay {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.xtrona-pay__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 3.25rem;
	height: 2.25rem;
	margin: 0;
	padding: 0 0.375rem;
	border: 1px solid rgba(16, 34, 73, 0.12);
	border-radius: 0.5rem;
	background: #fff;
}

.xtrona-pay__badge img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 1.5rem;
	max-height: 1.5rem;
	object-fit: contain;
	margin: 0;
	box-shadow: none;
}

.xtrona-pay__label {
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1;
	color: #45526b;
	text-align: center;
}

/* In de winkelmand, onder de afrekenknop. Daar telt vooral dat iemand zijn
   eigen bank of kaart terugvindt voor hij doorklikt. */
.xtrona-pay-mand {
	margin-top: 1rem;
	text-align: center;
}

.xtrona-pay-mand__kop {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	color: #45526b;
}

.xtrona-pay--mand {
	margin-top: 0.5rem;
}

/* Op navy in de voettekst, links uitgelijnd bij de rest van de kolom. */
.xtrona-pay--footer {
	justify-content: flex-start;
	margin-top: 0;
}

.xtrona-pay--footer .xtrona-pay__badge {
	background: rgba(255, 255, 255, 0.94);
	border-color: rgba(255, 255, 255, 0.14);
}

/* Op de kleinste schermen passen er zo nog vijf op een regel. */
@media (max-width: 380px) {
	.xtrona-pay {
		gap: 0.375rem;
	}

	.xtrona-pay__badge {
		width: 2.75rem;
		height: 2rem;
		padding: 0 0.25rem;
	}

	.xtrona-pay__badge img {
		height: 1.25rem;
		max-height: 1.25rem;
	}
}

/* ==========================================================================
   Terugknop
   ==========================================================================
   Contact en de juridische pagina's zijn de enige uitgangen van een
   landingpagina. De weg terug moet daarom een knop zijn die je ziet staan en
   met een duim raakt, geen tekstlinkje: 48px hoog op een telefoon, ruim boven
   de 44px die een aanraakvlak minimaal nodig heeft.
   ========================================================================== */

.xtrona-back {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 3rem;
	padding: 0 1.375rem 0 0.875rem;
	border: 1px solid rgba(16, 34, 73, 0.16);
	border-radius: 9999px;
	background: #fff;
	color: #102249;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(16, 34, 73, 0.06);
	transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.xtrona-back:hover,
.xtrona-back:focus-visible {
	border-color: #EF6528;
	color: #EF6528;
	box-shadow: 0 2px 8px rgba(239, 101, 40, 0.16);
}

.xtrona-back:focus-visible {
	outline: 2px solid #EF6528;
	outline-offset: 2px;
}

.xtrona-back__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 9999px;
	background: rgba(239, 101, 40, 0.1);
	color: #EF6528;
	font-size: 1.125rem;
}

.xtrona-back__text {
	white-space: nowrap;
}

/* Op een telefoon iets forser, en links uitgelijnd met de rest van de tekst. */
@media (max-width: 640px) {
	.xtrona-back {
		min-height: 3.25rem;
		padding-right: 1.5rem;
		font-size: 1.0625rem;
	}

	.xtrona-back__icon {
		width: 2.25rem;
		height: 2.25rem;
		font-size: 1.25rem;
	}
}

/* ==========================================================================
   Korting, voorraad en kleur
   ========================================================================== */

/* Verschijnt alleen als er een echte vanprijs boven de huidige staat. */
.xtrona-discount {
	display: inline-flex;
	align-items: center;
	height: 1.75rem;
	padding: 0 0.625rem;
	border-radius: 9999px;
	background: #EF6528;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
}

/* De balk staat vol zolang er ruim voorraad is en loopt pas leeg als het
   werkelijk krap wordt. Geen verzonnen schaarste. */
.xtrona-stockbar {
	position: relative;
	height: 0.5rem;
	margin-top: 0.625rem;
	border-radius: 9999px;
	background: rgba(16, 34, 73, 0.08);
	overflow: hidden;
}

.xtrona-stockbar__fill {
	display: block;
	height: 100%;
	border-radius: 9999px;
	background: #10b981;
	transition: width 0.3s ease;
}

/* Oranje bij beperkte voorraad, rood als het einde in zicht is. De groene
   variant staat hierboven als standaard. */
.xtrona-stockbar--limited .xtrona-stockbar__fill {
	background: #EF6528;
}

.xtrona-stockbar--low .xtrona-stockbar__fill {
	background: #dc2626;
}

/* De kleur waarin het product komt. Vaststelling, geen keuze, dus geen
   knopvorm die om een klik vraagt. */
/* De kleur is een mededeling, geen keuze.
 *
 * Dit stond eerder als pillen met een rand en ronde hoeken. Daardoor zag het
 * eruit als een knoppenrij en probeerden bezoekers erop te klikken - terwijl
 * er niets te kiezen valt: elk product komt in één uitvoering. Nu is het
 * gewone tekst onder het label, zoals elke andere specificatie. */
.xtrona-colour-line {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #3d4658;
}

/* ==========================================================================
   De kassa
   ==========================================================================
   WooCommerce levert hier zijn eigen blokken aan, met dunne lijntjes, kleine
   logo's en een selectie die je nauwelijks ziet. Op een telefoon is dat een
   rijtje grijze regels waar je naar moet turen. Dit trekt het gelijk met de
   rest van de site: echte kaarten, een aanraakvlak dat een duim aankan, en een
   gekozen optie die je in één oogopslag herkent.
   ========================================================================== */

/* --- adresvelden -------------------------------------------------------- */
.wc-block-checkout .wc-block-components-text-input input[type="text"],
.wc-block-checkout .wc-block-components-text-input input[type="email"],
.wc-block-checkout .wc-block-components-text-input input[type="tel"],
.wc-block-checkout .wc-block-components-text-input input[type="number"],
.wc-block-checkout .wc-block-components-combobox-control input,
.wc-block-checkout .wc-block-components-country-input input,
.wc-block-checkout .wc-block-components-state-input input {
	min-height: 3.25rem;
	border-radius: 0.75rem;
	border-color: rgba(16, 34, 73, 0.16);
	font-size: 1rem;
}

.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-combobox-control input:focus {
	border-color: #EF6528;
	box-shadow: 0 0 0 2px rgba(239, 101, 40, 0.18);
	outline: none;
}

/* --- verzend- en betaalopties ------------------------------------------- */
.wc-block-checkout .wc-block-components-radio-control {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	border: 0;
}

.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option {
	display: flex;
	align-items: center;
	min-height: 3.75rem;
	margin: 0;
	padding: 0.875rem 1rem 0.875rem 2.75rem;
	/* Belangrijk: de blokken-stylesheet van WooCommerce laadt na de onze en
	   zet de randbreedte terug op nul. */
	border: 1px solid rgba(16, 34, 73, 0.18) !important;
	border-radius: 0.875rem;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option:hover {
	border-color: rgba(16, 34, 73, 0.35) !important;
}

/* WooCommerce tekent zelf een kader om de hele groep en lijntjes ertussen.
   Met losse kaarten is dat een tweede rand om niets. */
.wc-block-checkout .wc-block-components-radio-control__option::before,
.wc-block-checkout .wc-block-components-radio-control__option::after,
.wc-block-checkout .wc-block-components-radio-control-accordion-option::before,
.wc-block-checkout .wc-block-components-radio-control-accordion-option::after,
.wc-block-checkout .wc-block-components-radio-control--highlight-checked::before,
.wc-block-checkout .wc-block-components-radio-control--highlight-checked::after {
	display: none !important;
	border: 0 !important;
}

.wc-block-checkout .wc-block-components-radio-control--highlight-checked {
	border: 0 !important;
	box-shadow: none !important;
}

.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option-checked,
.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option--checked-option-highlighted {
	border-color: #EF6528 !important;
	background: rgba(239, 101, 40, 0.05);
	box-shadow: 0 0 0 1px #EF6528;
}

.wc-block-checkout .wc-block-components-radio-control__input {
	left: 1rem;
	width: 1.25rem;
	height: 1.25rem;
}

.wc-block-checkout .wc-block-components-radio-control__input:checked {
	border-color: #EF6528;
	background: #EF6528;
	box-shadow: inset 0 0 0 3px #fff;
}

.wc-block-checkout .wc-block-components-radio-control__label {
	font-size: 1rem;
	font-weight: 600;
	color: #102249;
}

/* De logo's die de gateways meesturen zijn 24px hoog; dat leest niet op een
   telefoon. Hoogte vastzetten schaalt ze op, contain houdt de verhouding. */
.wc-block-checkout .wc-block-components-radio-control .wc-block-components-payment-method-icon {
	height: 1.75rem !important;
	width: auto !important;
	max-width: 3.5rem;
	object-fit: contain;
}

/* WooCommerce zet naam en logo in een rij die niet de volle breedte pakt,
   waardoor alles in het midden van de kaart bleef hangen. Naam links, logo
   rechts, zoals je het van een kassa verwacht. */
.wc-block-checkout .wc-block-components-radio-control__option-layout {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.75rem;
	width: 100%;
}

.wc-block-checkout .wc-block-components-radio-control__label-group,
.wc-block-checkout .wc-block-components-radio-control__label {
	flex: 1 1 auto;
	text-align: left;
	margin-right: auto;
}

.wc-block-checkout .wc-block-components-radio-control__option-checked-content,
.wc-block-checkout .wc-block-components-radio-control__description-group {
	flex: 0 0 auto;
}

/* De kaarten moeten los van elkaar staan; anders lezen ze als één grijs blok. */
.wc-block-checkout .wc-block-components-radio-control > * + * {
	margin-top: 0.625rem;
}

/* --- koppen en knop ----------------------------------------------------- */
.wc-block-checkout .wc-block-components-title,
.wc-block-checkout h2 {
	font-family: var(--font-heading, inherit);
	color: #102249;
}

.wc-block-checkout .wc-block-components-checkout-place-order-button {
	min-height: 3.5rem;
	border-radius: 9999px;
	background: linear-gradient(135deg, #EF6528, #F59E0B);
	font-size: 1.0625rem;
	font-weight: 700;
}

.wc-block-checkout .wc-block-components-checkout-place-order-button:hover {
	filter: brightness(1.05);
}

/* --- overzicht rechts ---------------------------------------------------- */
.wc-block-checkout .wc-block-components-sidebar .wc-block-components-panel,
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block {
	border-radius: 1rem;
	border-color: rgba(16, 34, 73, 0.12);
}

@media (max-width: 640px) {
	.wc-block-checkout .wc-block-components-radio-control__option {
		min-height: 4rem;
		padding-left: 2.875rem;
	}

	.wc-block-checkout .wc-block-components-radio-control .wc-block-components-payment-method-icon {
		height: 1.625rem !important;
		max-width: 3rem;
	}
}

/* ==========================================================================
   Kassa: verzending weg, betalen in één vak
   ==========================================================================
   Er is precies één verzendmethode en die is gratis. Een keuzelijst met één
   keuze is geen keuze; de kosten staan al in het besteloverzicht rechts, waar
   ze horen. Weg ermee.

   De betaalopties nemen met zeven kaarten een heel scherm in beslag. Ze zitten
   nu in één vak waarin je scrolt, zodat het adres, de knop en het totaal samen
   in beeld blijven.
   ========================================================================== */

.wc-block-checkout .wp-block-woocommerce-checkout-shipping-methods-block,
.wc-block-checkout .wc-block-checkout__shipping-option {
	display: none !important;
}

.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control {
	max-height: 14rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	gap: 0.5rem;
	padding: 0.625rem;
	border: 1px solid rgba(16, 34, 73, 0.16) !important;
	border-radius: 1rem;
	background: #fff;
}

.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control > * + * {
	margin-top: 0.5rem;
}

/* Compacter, anders passen er maar twee in het vak. */
.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control .wc-block-components-radio-control__option {
	min-height: 3.25rem;
	padding: 0.625rem 0.875rem 0.625rem 2.5rem;
	border-radius: 0.75rem;
}

.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control .wc-block-components-radio-control__input {
	left: 0.75rem;
}

/* Een scrollbalk die je ziet, anders raadt niemand dat er meer onder zit. */
.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control::-webkit-scrollbar {
	width: 0.5rem;
}

.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control::-webkit-scrollbar-thumb {
	border-radius: 9999px;
	background: rgba(16, 34, 73, 0.22);
}

.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control::-webkit-scrollbar-track {
	background: transparent;
}

/* ==========================================================================
   Besteloverzicht en het betaalvak
   ==========================================================================
   In een smalle zijbalk duwde de prijskolom met zijn "Bespaar"-badge de
   productnaam tot 36px samen, waarop de titel per letter afbrak. De kassa
   krijgt nu de volle breedte (zie page.php); dit houdt de verhoudingen ook
   daarbinnen op orde.
   ========================================================================== */

.wc-block-checkout .wc-block-components-sidebar {
	min-width: 20rem;
}

.wc-block-checkout .wc-block-components-order-summary-item__description {
	flex: 1 1 auto;
	min-width: 0;
}

/* Een woord mag afbreken, maar niet middenin op elke letter. */
.wc-block-checkout .wc-block-components-product-name,
.wc-block-checkout .wc-block-components-order-summary-item__description * {
	word-break: normal !important;
	overflow-wrap: break-word;
	hyphens: auto;
}

.wc-block-checkout .wc-block-components-order-summary-item__total-price {
	flex: 0 0 auto;
	text-align: right;
	white-space: nowrap;
}

/* De badge onder het bedrag in plaats van ernaast; naast het bedrag eet hij
   de halve kolom op. */
.wc-block-checkout .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.25rem;
}

.wc-block-checkout .wc-block-components-sale-badge {
	white-space: nowrap;
	font-size: 0.6875rem;
}

/* --- het betaalvak ------------------------------------------------------ */
/* Een half afgesneden kaartje onderaan is het teken dat er meer is. Met een
   vervagende onderrand leest dat als "scroll verder" in plaats van "kapot". */
.wc-block-checkout .wc-block-checkout__payment-method {
	position: relative;
}

.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control {
	max-height: 15.5rem;
	scroll-padding: 0.625rem;
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2rem), transparent);
	        mask-image: linear-gradient(to bottom, #000 calc(100% - 2rem), transparent);
}

/* Past alles er toch in, dan hoort er niets te vervagen of te scrollen. */
@supports (height: 1px) {
	.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control:not(:hover) {
		scrollbar-width: thin;
	}
}

/* Kiest iemand een methode met een eigen formulier - kaartgegevens bijvoorbeeld -
   dan mag het vak niet langer scrollen. Die velden invullen in een venster van
   248px is geen kassa, dat is een kokertje. Het vak groeit dan mee. */
.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control:has(.wc-block-components-radio-control-accordion-content *) {
	max-height: none;
	overflow: visible;
	-webkit-mask-image: none;
	        mask-image: none;
}

/* ==========================================================================
   Badges op de productfoto
   ==========================================================================
   Ze horen bij de hoofdafbeelding, niet bij de galerij als geheel: absoluut
   plaatsen binnen .xtrona-gallery zet ze anders bovenop de duimnagelrail.
   Op desktop staat die rail links (4,5rem + 0,75rem gap), op een telefoon
   eronder. De zoomknop zit op desktop rechtsboven en op mobiel linksboven,
   dus de stapel wisselt van kant mee.
   ========================================================================== */
.xtrona-badges {
	position: absolute;
	top: 1rem;
	left: calc(4.5rem + 0.75rem + 1rem);
	right: auto;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	max-width: calc(100% - 4.5rem - 0.75rem - 5rem);
	pointer-events: none;
}

.xtrona-badges:empty {
	display: none;
}

.xtrona-badges .xtrona-badge {
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 640px) {
	.xtrona-badges {
		left: auto;
		right: 1rem;
		align-items: flex-end;
		max-width: calc(100% - 5rem);
	}
}

/* De productfoto's staan op wit, dus een witte pil verdwijnt erin. Een rand
   geeft hem een contour zonder de rustige uitstraling te breken. */
.xtrona-badges .xtrona-badge-ship {
	background: #fff;
	border: 1px solid rgba(16, 34, 73, 0.14);
}

/* ==========================================================================
   Cookiebalk
   ==========================================================================
   Onderaan vastgezet, niet als blokkerend venster: de bezoeker mag de winkel
   zien terwijl hij kiest. De twee knoppen zijn even groot en even zwaar -
   weigeren moet even makkelijk zijn als accepteren, dat is de regel, geen smaak.
   ========================================================================== */
.xtrona-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: #fff;
	border-top: 1px solid rgba(16, 34, 73, 0.14);
	box-shadow: 0 -6px 24px rgba(16, 34, 73, 0.10);
	padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
}

.xtrona-consent__inner {
	max-width: 72rem;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.xtrona-consent__text {
	flex: 1 1 22rem;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: #3d4658;
}

.xtrona-consent__text strong {
	color: #102249;
	margin-right: 0.35rem;
}

.xtrona-consent__text a {
	color: #EF6528;
	text-decoration: underline;
}

.xtrona-consent__buttons {
	display: flex;
	gap: 0.625rem;
	flex: 0 0 auto;
}

.xtrona-consent__btn {
	min-height: 44px;
	padding: 0 1.25rem;
	border-radius: 9999px;
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.xtrona-consent__btn--solid {
	background: #EF6528;
	color: #fff;
}

.xtrona-consent__btn--solid:hover {
	background: #d9551b;
}

.xtrona-consent__btn--ghost {
	background: #fff;
	color: #102249;
	border-color: rgba(16, 34, 73, 0.22);
}

.xtrona-consent__btn--ghost:hover {
	background: #f4f6fa;
}

@media (max-width: 640px) {
	.xtrona-consent__inner {
		gap: 0.875rem;
	}

	.xtrona-consent__buttons {
		width: 100%;
	}

	.xtrona-consent__btn {
		flex: 1 1 0;
	}
}

/* ==========================================================================
   Betaalopties aan de kassa
   ==========================================================================
   WooCommerce zet elke methode in een eigen kaart met rand, ronde hoeken en
   ruime marges. Met acht methodes wordt dat ruim 800 px scrollen voor een
   beslissing die twee seconden hoort te duren - en het is de laatste stap voor
   de bestelling, dus precies waar je geen twijfel wil zaaien.

   Wat hier gebeurt:
     - Een omkaderde lijst met haarlijnen ertussen, geen acht losse kaarten.
     - Elk logo in hetzelfde vaste vak, rechts uitgelijnd. De logo's van Mollie
       verschillen sterk in vorm en kleur; op dezelfde plek en hoogte hoeft het
       oog maar een keer te ankeren.
     - Een duidelijke selectie: getinte rij met een oranje rail links. De
       standaardopmaak tekende een oranje ring en een donkere binnenrand, wat
       eruitzag als een weergavefout.
     - Rijen van 56 px, op smalle schermen 60 px: compact, maar ruim boven de
       44 px die een vinger nodig heeft.

   Over de !important-regels: de blokken-kassa is een React-app die op deze
   pagina 35 stylesheets NA het thema inspreekt. Bij gelijke specificiteit wint
   dan hun regel, ook al staat het thema in de <head> als laatste. Alleen de
   eigenschappen die zij overschrijven zijn hard gezet - niet meer dan dat.

   Alles is afgebakend tot het betaalblok, zodat de verzendkeuze - die dezelfde
   klassen gebruikt - ongemoeid blijft.
   ========================================================================== */
.wc-block-checkout__payment-method.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control {
	border: 1px solid rgba(16, 34, 73, 0.14) !important;
	border-radius: 0.75rem !important;
	overflow: hidden;
	background: #fff;
}

.wc-block-checkout__payment-method.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option {
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent;
	box-shadow: none !important;
}

.wc-block-checkout__payment-method.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option {
	border-top: 1px solid rgba(16, 34, 73, 0.09) !important;
}

.wc-block-checkout__payment-method.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option {
	display: flex !important;
	align-items: center;
	min-height: 56px;
	margin: 0 !important;
	padding: 0.5rem 1rem 0.5rem 2.75rem !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent;
	transition: background-color 0.12s ease;
}

.wc-block-checkout__payment-method.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option:hover {
	background: rgba(16, 34, 73, 0.025);
}

.wc-block-checkout__payment-method.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__input {
	left: 1rem !important;
	top: 50% !important;
	transform: translateY(-50%);
	margin: 0 !important;
}

/* Naam links, logo rechts - op elke rij op dezelfde plek. */
.wc-block-checkout__payment-method.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option-layout,
.wc-block-checkout__payment-method.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__label-group {
	width: 100%;
	margin: 0 !important;
}

.wc-block-checkout__payment-method.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__label {
	display: flex !important;
	align-items: center;
	justify-content: space-between !important;
	width: 100%;
	gap: 1rem;
	margin: 0 !important;
}

.wc-block-checkout__payment-method.wp-block-woocommerce-checkout-payment-block .wc-block-components-payment-method-label {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	color: #102249;
}

.wc-block-checkout__payment-method.wp-block-woocommerce-checkout-payment-block .wc-block-components-payment-method-icons {
	display: flex !important;
	align-items: center;
	justify-content: flex-end !important;
	flex: 0 0 auto;
	width: 2.75rem;
	margin: 0 !important;
}

.wc-block-checkout__payment-method.wp-block-woocommerce-checkout-payment-block .wc-block-components-payment-method-icon {
	width: auto !important;
	max-width: 2.75rem;
	height: 1.5rem !important;
	object-fit: contain;
	object-position: right center;
	margin: 0 !important;
}

/* De gekozen rij: getint, met een rail in de merkkleur. */
.wc-block-checkout__payment-method.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option-checked,
.wc-block-checkout__payment-method.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option--checked-option-highlighted {
	background: rgba(239, 101, 40, 0.06) !important;
	box-shadow: inset 3px 0 0 0 #EF6528 !important;
	border: 0 !important;
}

.wc-block-checkout__payment-method.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control--highlight-checked::after,
.wc-block-checkout__payment-method.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option--checked-option-highlighted::after {
	display: none !important;
}

/* Toetsenbordgebruikers moeten zien waar ze staan. */
.wc-block-checkout__payment-method.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__input:focus-visible + .wc-block-components-radio-control__option-layout {
	outline: 2px solid #EF6528;
	outline-offset: 3px;
	border-radius: 0.25rem;
}

/* Het uitklapdeel hoort bij de gekozen rij, niet ernaast. */
.wc-block-checkout__payment-method.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-content {
	margin: 0 !important;
	padding: 0 1rem 1rem 2.75rem !important;
	background: rgba(239, 101, 40, 0.06);
}

.wc-block-checkout__payment-method.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-content:empty {
	display: none;
}

@media (max-width: 640px) {
	.wc-block-checkout__payment-method.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option {
		min-height: 60px;
		padding-left: 2.5rem !important;
	}
}

/* ==========================================================================
   Voorraadstand
   ==========================================================================
   Drie niveaus met een eigen kleur. Bewust hier en niet met Tailwind-klassen:
   die worden bij het bouwen uit de broncode geplukt, en een kleur die er toen
   niet in stond bestaat later niet. Zo stond "Op voorraad" maandenlang zwart
   in plaats van groen zonder dat iemand het zag.
   ========================================================================== */
.xtrona-stock {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	margin: 0;
}

.xtrona-stock__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	flex: 0 0 auto;
	background: currentColor;
	animation: xtrona-stock-pols 2.6s ease-in-out infinite;
}

/* Een rustige hartslag, geen knipperlicht.
 *
 * Het stipje ademt tussen vol en bijna doorzichtig in ruim twee seconden. Dat
 * leest als "dit is live" zonder de aandacht weg te trekken van de prijs of de
 * koopknop. Sneller of harder maakt het een alarm, en daar is niets aan de hand.
 *
 * Wie in zijn systeem minder beweging heeft ingesteld, ziet een stilstaand
 * stipje: de regel bovenaan deze stylesheet zet elke animatie dan stil. */
@keyframes xtrona-stock-pols {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.35;
		transform: scale(0.88);
	}
}

.xtrona-stock--ok      { color: #059669; }
.xtrona-stock--limited { color: #EF6528; }
.xtrona-stock--low     { color: #dc2626; }


/* ==========================================================================
   MyXtrona - het klantenportaal
   ==========================================================================
   Met de hand geschreven, niet met Tailwind-klassen: het thema laadt een vooraf
   gecompileerd tailwind.css en een klasse die daar niet in staat bestaat niet.

   Twee kolommen op een breed scherm, gestapeld op een smal. Het menu links
   blijft staan waar je het achterliet; de inhoud rechts wisselt.
   ========================================================================== */

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

/*
 * WooCommerce zet `float: right` en een percentagebreedte op de inhoudskolom.
 * In een grid negeert de browser die float wel voor de plaatsing, maar niet de
 * breedte: het menu kreeg 832 px en de inhoud 163 px, precies omgekeerd aan de
 * bedoeling. De plaatsing staat daarom expliciet, en de erfenis wordt hier
 * ongedaan gemaakt in plaats van dat we hopen dat ze niet meedoet.
 */
.woocommerce-account .woocommerce > .xtrona-portaal__nav {
	grid-column: 1;
	float: none;
	width: auto;
	margin: 0;
}

.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
	grid-column: 2;
	float: none;
	width: auto;
	margin: 0;
}

@media (max-width: 860px) {
	.woocommerce-account .woocommerce > .xtrona-portaal__nav,
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
		grid-column: 1;
	}
}

@media (max-width: 860px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
}

/* Op de inlogpagina staat geen menu; daar mag de inhoud de volle breedte. */
.woocommerce-account:not(.logged-in) .woocommerce {
	display: block;
}

/* --- het menu --- */

.xtrona-portaal__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.xtrona-portaal__link {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.7rem 0.9rem;
	border-radius: 0.75rem;
	color: oklch(var(--foreground-700));
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}

.xtrona-portaal__link:hover {
	background: oklch(var(--background-100));
	color: oklch(var(--foreground-950));
}

.xtrona-portaal__link.is-actief {
	background: #EF6528;
	color: #fff;
}

.xtrona-portaal__link i {
	font-size: 1.125rem;
	line-height: 1;
}

.xtrona-portaal__label {
	flex: 1 1 auto;
}

/* De teller: hoeveel er bewaard, onderweg of in de wagen is. */
.xtrona-portaal__telt {
	flex: 0 0 auto;
	min-width: 1.375rem;
	height: 1.375rem;
	padding: 0 0.375rem;
	border-radius: 9999px;
	background: oklch(var(--background-200));
	color: oklch(var(--foreground-700));
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.375rem;
	text-align: center;
}

.xtrona-portaal__link.is-actief .xtrona-portaal__telt {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}

/* --- de inhoud --- */

.woocommerce-MyAccount-content {
	min-width: 0;
}

.xtrona-portaal__welkom h2 {
	margin: 0 0 0.35rem;
	font-size: 1.5rem;
	font-weight: 800;
	color: oklch(var(--foreground-950));
}

.xtrona-portaal__welkom p {
	margin: 0 0 1.75rem;
	color: oklch(var(--foreground-600));
}

.xtrona-portaal__kop {
	margin: 0 0 0.35rem;
	font-size: 1.25rem;
	font-weight: 800;
	color: oklch(var(--foreground-950));
}

.xtrona-portaal__intro {
	margin: 0 0 1.5rem;
	color: oklch(var(--foreground-600));
}

/* --- de kaarten op het dashboard --- */

.xtrona-portaal__kaarten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1rem;
}

.xtrona-portaal__kaart {
	display: block;
	padding: 1.25rem;
	border: 1px solid oklch(var(--background-200));
	border-radius: 1rem;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s, transform 0.15s;
}

.xtrona-portaal__kaart:hover {
	border-color: #EF6528;
	transform: translateY(-2px);
}

.xtrona-portaal__kaart i {
	display: block;
	margin-bottom: 0.6rem;
	font-size: 1.5rem;
	color: #EF6528;
}

.xtrona-portaal__kaart-titel {
	display: block;
	margin-bottom: 0.2rem;
	font-weight: 700;
	color: oklch(var(--foreground-950));
}

.xtrona-portaal__kaart-uit {
	display: block;
	font-size: 0.875rem;
	line-height: 1.5;
	color: oklch(var(--foreground-600));
}

/* --- de vakken op "Mijn account" --- */

.xtrona-portaal__vak {
	padding: 1.25rem;
	margin-bottom: 1.25rem;
	border: 1px solid oklch(var(--background-200));
	border-radius: 1rem;
	background: #fff;
}

.xtrona-portaal__subkop {
	margin: 0 0 1rem;
	font-size: 1rem;
	font-weight: 800;
	color: oklch(var(--foreground-950));
}

/*
 * WooCommerce zet zijn twee adreskolommen op `float` met percentages. In dit vak
 * werkt een grid beter: op een smal scherm komen ze dan vanzelf onder elkaar in
 * plaats van tegen elkaar aan te drukken.
 */
.xtrona-portaal__vak .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.25rem;
}

.xtrona-portaal__vak .woocommerce-Address {
	float: none;
	width: auto;
}

.xtrona-portaal__vak address {
	font-style: normal;
	line-height: 1.6;
	color: oklch(var(--foreground-700));
}

.xtrona-portaal__vak .woocommerce-Address-title h3 {
	margin: 0 0 0.4rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: oklch(var(--foreground-900));
}

/* --- het gegevensformulier --- */

.xtrona-gegevens__paar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0 1rem;
}

.xtrona-gegevens .woocommerce-form-row {
	margin: 0 0 1rem;
}

.xtrona-gegevens label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: oklch(var(--foreground-800));
}

.xtrona-gegevens input {
	width: 100%;
	padding: 0.6rem 0.8rem;
	border: 1px solid oklch(var(--background-300));
	border-radius: 0.625rem;
	background: #fff;
	font-size: 0.9375rem;
	color: oklch(var(--foreground-900));
}

.xtrona-gegevens input:focus {
	outline: 2px solid #EF6528;
	outline-offset: 1px;
	border-color: #EF6528;
}

.xtrona-gegevens .required {
	color: #b5451b;
}

.xtrona-gegevens__opslaan {
	margin: 0.5rem 0 0;
}

/* --- adressen --- */

.xtrona-adressen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
}

.xtrona-adres {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 1rem;
	border: 1px solid oklch(var(--background-200));
	border-radius: 0.875rem;
	background: oklch(var(--background-50));
}

.xtrona-adres__kop {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	color: oklch(var(--foreground-950));
}

.xtrona-adres address {
	margin: 0;
	font-style: normal;
	line-height: 1.6;
	color: oklch(var(--foreground-700));
}

.xtrona-adres__leeg {
	margin: 0;
	color: oklch(var(--foreground-500));
	font-style: italic;
}

/* --- uitleg en bevestiging in het portaal --- */

.xtrona-portaal__uitleg {
	margin: 0 0 1rem;
	color: oklch(var(--foreground-600));
	line-height: 1.6;
}

.xtrona-portaal__fout {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0 0 1rem;
	padding: 0.9rem 1rem;
	border: 1px solid #f0c6b4;
	border-radius: 0.75rem;
	background: #fff5f0;
	color: #b5451b;
	line-height: 1.5;
}

.xtrona-portaal__fout i {
	font-size: 1.125rem;
	line-height: 1.4;
}

.xtrona-portaal__gelukt {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	padding: 0.9rem 1rem;
	border: 1px solid #a7e0c8;
	border-radius: 0.75rem;
	background: #f0faf5;
	color: #0f7a52;
	line-height: 1.5;
}

.xtrona-portaal__gelukt i {
	font-size: 1.125rem;
	line-height: 1.4;
}

/* --- de lege stand --- */

.xtrona-portaal__leeg {
	padding: 2.5rem 1.5rem;
	border: 1px dashed oklch(var(--background-300));
	border-radius: 1rem;
	text-align: center;
}

.xtrona-portaal__leeg i {
	font-size: 2rem;
	color: oklch(var(--foreground-400));
}

.xtrona-portaal__leeg p {
	margin: 0.75rem auto 1.25rem;
	max-width: 26rem;
	color: oklch(var(--foreground-600));
}

/* --- knoppen --- */

.xtrona-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.6rem 1.1rem;
	border-radius: 9999px;
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background-color 0.15s, color 0.15s;
}

.xtrona-knop--vol {
	background: #EF6528;
	color: #fff;
}

.xtrona-knop--vol:hover {
	background: #E66032;
	color: #fff;
}

.xtrona-knop--rand {
	border-color: oklch(var(--background-300));
	background: #fff;
	color: oklch(var(--foreground-800));
}

.xtrona-knop--rand:hover {
	border-color: #EF6528;
	color: #EF6528;
}

/* --- favorieten --- */

.xtrona-fav {
	display: grid;
	gap: 0.75rem;
}

.xtrona-fav__kaart {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: center;
	padding: 0.9rem;
	border: 1px solid oklch(var(--background-200));
	border-radius: 1rem;
	background: #fff;
}

.xtrona-fav__beeld img {
	width: 100%;
	height: auto;
	border-radius: 0.625rem;
}

.xtrona-fav__naam {
	display: block;
	font-weight: 700;
	color: oklch(var(--foreground-950));
	text-decoration: none;
	line-height: 1.35;
}

.xtrona-fav__naam:hover {
	color: #EF6528;
}

.xtrona-fav__prijs {
	margin: 0.3rem 0 0;
	color: oklch(var(--foreground-700));
	font-size: 0.9375rem;
}

.xtrona-fav__acties {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.xtrona-fav__weg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid oklch(var(--background-200));
	border-radius: 9999px;
	background: #fff;
	color: oklch(var(--foreground-500));
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.xtrona-fav__weg:hover {
	border-color: #EF6528;
	color: #EF6528;
}

@media (max-width: 640px) {
	.xtrona-fav__kaart {
		grid-template-columns: 4rem minmax(0, 1fr);
	}

	.xtrona-fav__acties {
		grid-column: 1 / -1;
	}
}

/* --- bestellingen en aankopen --- */

.xtrona-best {
	display: grid;
	gap: 0.75rem;
}

.xtrona-best__kaart {
	padding: 1.1rem;
	border: 1px solid oklch(var(--background-200));
	border-radius: 1rem;
	background: #fff;
}

.xtrona-best__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.xtrona-best__nummer {
	font-weight: 700;
	color: oklch(var(--foreground-950));
}

.xtrona-best__status {
	padding: 0.2rem 0.65rem;
	border-radius: 9999px;
	background: oklch(var(--background-100));
	color: oklch(var(--foreground-700));
	font-size: 0.75rem;
	font-weight: 700;
}

.xtrona-best__status--processing,
.xtrona-best__status--on-hold {
	background: #fff2e8;
	color: #b5451b;
}

.xtrona-best__status--completed {
	background: #e7f7f0;
	color: #0f7a52;
}

.xtrona-best__datum {
	margin: 0.4rem 0 0.9rem;
	font-size: 0.875rem;
	color: oklch(var(--foreground-600));
}

.xtrona-best__artikelen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.xtrona-best__artikel {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: oklch(var(--foreground-700));
}

.xtrona-best__artikel img {
	width: 2.75rem;
	height: 2.75rem;
	object-fit: cover;
	border-radius: 0.5rem;
}

/* --- de suggestierij --- */

.xtrona-sug {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid oklch(var(--background-200));
}

.xtrona-sug__kop {
	margin: 0 0 1rem;
	font-size: 1.0625rem;
	font-weight: 800;
	color: oklch(var(--foreground-950));
}

.xtrona-sug__rij {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: 1rem;
}

.xtrona-sug__kaart a {
	display: block;
	padding: 0.75rem;
	border: 1px solid oklch(var(--background-200));
	border-radius: 0.875rem;
	background: #fff;
	text-decoration: none;
	transition: border-color 0.15s;
}

.xtrona-sug__kaart a:hover {
	border-color: #EF6528;
}

.xtrona-sug__kaart img {
	width: 100%;
	height: auto;
	border-radius: 0.625rem;
	margin-bottom: 0.6rem;
}

.xtrona-sug__naam {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	color: oklch(var(--foreground-900));
}

.xtrona-sug__prijs {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: #EF6528;
}

/* --- direct afrekenen, naast de mandknop --- */

.xtrona-direct {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.72rem 1.4rem;
	border: 1px solid #102249;
	border-radius: 9999px;
	background: #fff;
	color: #102249;
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.xtrona-direct:hover {
	background: #102249;
	color: #fff;
}

/* --- het hartje op een productpagina --- */

.xtrona-hart {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.6rem 1rem;
	border: 1px solid oklch(var(--background-300));
	border-radius: 9999px;
	background: #fff;
	color: oklch(var(--foreground-700));
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}

.xtrona-hart:hover {
	border-color: #EF6528;
	color: #EF6528;
}

.xtrona-hart.is-favoriet {
	border-color: #EF6528;
	color: #EF6528;
}

.xtrona-hart.is-favoriet i::before {
	content: "\ee0a"; /* ri-heart-3-fill */
}


/* -------------------------------------------------------------------------
   Niches en subniches op de collectiepagina
   ----------------------------------------------------------------------
   Eigen opmaak in plaats van Tailwind-klassen: het gecompileerde bestand kent
   alleen de klassen die er bij de bouw in stonden, dus een nieuwe klas daaruit
   doet niets.
   ---------------------------------------------------------------------- */

.xtrona-niches {
	background: #ffffff;
	border-bottom: 1px solid oklch(var(--background-200) / 0.6);
}

.xtrona-niches__binnen {
	max-width: 80rem;
	margin: 0 auto;
	padding: 1.5rem 1rem 1.75rem;
}

@media (min-width: 768px) {
	.xtrona-niches__binnen {
		padding: 1.75rem 1.5rem 2rem;
	}
}

.xtrona-kruimels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: 1.25rem;
	font-size: 0.8125rem;
	color: oklch(var(--foreground-500));
}

.xtrona-kruimels__link {
	color: oklch(var(--foreground-500));
	text-decoration: none;
	transition: color 0.15s;
}

.xtrona-kruimels__link:hover {
	color: #EF6528;
}

.xtrona-kruimels i {
	font-size: 1rem;
	line-height: 1;
	opacity: 0.6;
}

.xtrona-kruimels__hier {
	font-weight: 600;
	color: oklch(var(--foreground-700));
}

.xtrona-niches__kop {
	margin: 0 0 0.875rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: oklch(var(--foreground-500));
}

/*
 * De categorielijst klapt in op een telefoon.
 *
 * Met zeven subniches vulde hij het hele scherm en moest je drie keer vegen
 * voor je het eerste product zag. Op 768 pixels en breder blijft alles staan
 * zoals het was: de kop is er nog, alleen niet meer klikbaar.
 */
.xtrona-niches__vouw {
	margin: 0;
}

.xtrona-niches__vouwknop {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.25rem 0 0.875rem;
	cursor: pointer;
	list-style: none;
	-webkit-user-select: none;
	user-select: none;
}

.xtrona-niches__vouwknop::-webkit-details-marker {
	display: none;
}

.xtrona-niches__vouwknop .xtrona-niches__kop {
	margin: 0;
}

.xtrona-niches__vouwaantal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: oklch(var(--background-100));
	font-size: 0.75rem;
	font-weight: 700;
	color: oklch(var(--foreground-600));
}

.xtrona-niches__vouwpijl {
	margin-left: auto;
	font-size: 1.375rem;
	line-height: 1;
	color: oklch(var(--foreground-500));
	transition: transform 0.2s;
}

.xtrona-niches__vouw[open] .xtrona-niches__vouwpijl {
	transform: rotate(180deg);
}

@media (min-width: 768px) {
	.xtrona-niches__vouwknop {
		padding-bottom: 0.875rem;
		cursor: default;
		pointer-events: none;
	}

	.xtrona-niches__vouwaantal,
	.xtrona-niches__vouwpijl {
		display: none;
	}
}

.xtrona-niches__rij {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0.75rem;
}

.xtrona-niche {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	border: 1px solid oklch(var(--background-200));
	border-radius: 0.75rem;
	background: oklch(var(--background-50));
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.xtrona-niche:hover {
	border-color: #EF6528;
	background: #ffffff;
	transform: translateY(-1px);
}

.xtrona-niche__naam {
	font-weight: 600;
	color: oklch(var(--foreground-700));
	line-height: 1.3;
}

.xtrona-niche__aantal {
	margin-left: auto;
	font-size: 0.75rem;
	color: oklch(var(--foreground-500));
	white-space: nowrap;
}

.xtrona-niche__pijl {
	font-size: 1rem;
	line-height: 1;
	color: oklch(var(--foreground-400));
	transition: color 0.15s, transform 0.15s;
}

.xtrona-niche:hover .xtrona-niche__pijl {
	color: #EF6528;
	transform: translateX(2px);
}


/* -------------------------------------------------------------------------
   Rijen om te scrollen
   ----------------------------------------------------------------------
   Het spoor schuift horizontaal met scroll-snap, zodat een kaart altijd netjes
   aan de rand uitkomt. De pijltjes zijn een toevoeging, geen vereiste: met een
   muiswiel, een veeg of het toetsenbord werkt de rij ook zonder JavaScript. Ze
   staan daarom standaard verborgen en verschijnen pas als er iets te schuiven is.
   ---------------------------------------------------------------------- */

.xtrona-rijen {
	background: oklch(var(--background-50));
	border-bottom: 1px solid oklch(var(--background-200) / 0.6);
}

.xtrona-rijen__binnen {
	max-width: 80rem;
	margin: 0 auto;
	padding: 2rem 1rem 0.5rem;
}

@media (min-width: 768px) {
	.xtrona-rijen__binnen {
		padding: 2.5rem 1.5rem 1rem;
	}
}

.xtrona-rij {
	margin-bottom: 2rem;
}

.xtrona-rij__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.xtrona-rij__titel {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: oklch(var(--foreground-950));
	letter-spacing: -0.01em;
}

@media (min-width: 768px) {
	.xtrona-rij__titel {
		font-size: 1.5rem;
	}
}

.xtrona-rij__pijlen {
	display: flex;
	gap: 0.5rem;
	flex-shrink: 0;
}

/*
 * Een eigen `display` wint van de `[hidden]` van de browser: die staat in de
 * stijlen van de browser zelf en verliest het altijd van een stijl uit het
 * thema. Zonder deze regel stonden de pijltjes er terwijl er niets te schuiven
 * viel - het JavaScript zette `hidden` netjes, je zag het alleen niet.
 */
.xtrona-rij__pijlen[hidden] {
	display: none;
}

.xtrona-rij__pijl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid oklch(var(--background-300));
	border-radius: 9999px;
	background: #ffffff;
	color: oklch(var(--foreground-700));
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s, opacity 0.15s;
}

.xtrona-rij__pijl:hover:not(:disabled) {
	border-color: #EF6528;
	color: #EF6528;
}

.xtrona-rij__pijl:disabled {
	opacity: 0.35;
	cursor: default;
}

.xtrona-rij__spoor {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* Ruimte onder het spoor zodat een schaduw niet wordt afgeknipt. */
	padding-bottom: 0.75rem;
}

.xtrona-rij__spoor::-webkit-scrollbar {
	display: none;
}

.xtrona-kaart {
	flex: 0 0 auto;
	width: 11rem;
	scroll-snap-align: start;
	background: #ffffff;
	border: 1px solid oklch(var(--background-200) / 0.6);
	border-radius: 1rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s, border-color 0.2s;
}

@media (min-width: 640px) {
	.xtrona-kaart {
		width: 13rem;
	}
}

.xtrona-kaart:hover {
	border-color: oklch(var(--background-300));
	box-shadow: 0 10px 24px -12px rgba(16, 34, 73, 0.35);
}

.xtrona-kaart__beeld {
	display: block;
	aspect-ratio: 1 / 1;
	background: #ffffff;
}

.xtrona-kaart__beeld img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 0.75rem;
}

.xtrona-kaart__tekst {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: 0.75rem 0.875rem 1rem;
	flex: 1;
}

.xtrona-kaart__naam {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.35;
	color: oklch(var(--foreground-950));
	/* Twee regels, daarna afkappen: anders lopen de kaarten uiteen in hoogte. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.xtrona-kaart__naam a {
	color: inherit;
	text-decoration: none;
}

.xtrona-kaart__naam a:hover {
	color: #EF6528;
}

.xtrona-kaart__prijs {
	margin: auto 0 0;
	font-size: 1rem;
	font-weight: 700;
	color: oklch(var(--foreground-950));
}

.xtrona-kaart__prijs .woocommerce-Price-amount {
	font-size: inherit;
}


/* -------------------------------------------------------------------------
   "In het kort" onder de galerij
   ----------------------------------------------------------------------
   Alleen vanaf 1024px, want daar splitst de productpagina in twee kolommen en
   ontstaat het gat onder de video. Daaronder staan de kolommen onder elkaar en
   zou dit blok alleen de koopknop wegduwen.

   Eigen klasse en geen `hidden lg:block`: `lg:block` staat niet in het
   gecompileerde Tailwind-bestand, dus dat blok zou nooit zichtbaar worden.
   ---------------------------------------------------------------------- */

.xtrona-kort {
	display: none;
}

@media (min-width: 1024px) {
	.xtrona-kort {
		display: block;
	}
}


/* -------------------------------------------------------------------------
   De kop tussen 768 en 1023 pixels
   ----------------------------------------------------------------------
   Gemeten op een tablet van 768px: logo (166) + navigatie (315) + de knoppen
   rechts (272), plus tussenruimte en padding, kwam samen op 817px in een venster
   van 753. Gevolg: elke pagina schoof daar 56 pixels horizontaal.

   Eerst liet ik de navigatie pas vanaf 1024 verschijnen. Dat loste de overloop
   op, maar het duwde op een laptop van 1000px de hele menubalk achter het
   hamburgermenu - een zichtbare verslechtering voor iets wat niemand gevraagd
   had.

   Nu gaat de Contactknop weg in dat ene bereik. Die is 96 pixels breed, ruim
   meer dan de 56 die te veel waren, en hij staat ook in het menu en in de
   footer. De navigatie blijft staan waar ze stond.
   ---------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {
	.xtrona-contactknop {
		display: none;
	}

	/*
	 * ...maar dan moet het menu er wel zijn.
	 *
	 * De hamburger draagt `md:hidden` en verdween dus precies waar de
	 * Contactknop ook wegging. Tussen 768 en 1023 had een bezoeker daardoor
	 * geen van beide: geen knop en geen menu om hem in te vinden. Op een tablet
	 * rechtop was Contact onbereikbaar vanuit de kop.
	 *
	 * Hier blijft hij staan. Hij kost veertig pixels waar de knop er zesennegentig
	 * vroeg, en hij geeft er de categorieen bij.
	 */
	[data-xtrona-menu-toggle] {
		display: inline-flex !important;
	}

	/*
	 * Het paneel draagt zelf ook `md:hidden`, dus een zichtbare hamburger
	 * alleen was niet genoeg: je klikte en er gebeurde niets zichtbaars.
	 */
	#xtrona-mobile-menu.is-open {
		display: block !important;
	}
}


/* -------------------------------------------------------------------------
   De kop van de collectie
   ----------------------------------------------------------------------
   Het verloop van de homepage alleen was hier niet genoeg: dat beeld is druk en
   helder in het midden, precies waar de tekst staat. Deze waas ligt er
   gelijkmatig overheen en maakt het verhaal leesbaar zonder de foto weg te
   drukken.

   `text-white/85` gebruikte ik eerst voor de tekst - die klas staat niet in het
   gecompileerde Tailwind-bestand, dus de kleur viel terug op wat hij erfde.
   ---------------------------------------------------------------------- */

.xtrona-hero__waas {
	background: rgba(16, 34, 73, 0.45);
	pointer-events: none;
}

.xtrona-hero__tekst {
	color: #ffffff;
	text-shadow: 0 1px 12px rgba(16, 34, 73, 0.55);
}


/* De cookiebalk laat even van zich horen als je hem opnieuw opent. */
.xtrona-consent--let {
	animation: xtrona-consent-let 1.1s ease-out 1;
}

@keyframes xtrona-consent-let {
	0%   { box-shadow: 0 0 0 0 rgba(239, 101, 40, 0.55); }
	70%  { box-shadow: 0 0 0 14px rgba(239, 101, 40, 0); }
	100% { box-shadow: 0 0 0 0 rgba(239, 101, 40, 0); }
}


/* De regel die vertelt dat er korting te halen is. */
.xtrona-korting-tip {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.875rem 0 0;
	padding: 0.625rem 0.875rem;
	border: 1px solid rgba(239, 101, 40, 0.35);
	border-radius: 0.75rem;
	background: rgba(239, 101, 40, 0.06);
	font-size: 0.875rem;
	font-weight: 600;
	color: oklch(var(--foreground-700));
	line-height: 1.4;
}

.xtrona-korting-tip i {
	color: #EF6528;
	font-size: 1.125rem;
	line-height: 1;
	flex-shrink: 0;
}


/* -------------------------------------------------------------------------
   De kortingsregel in de totalen
   ----------------------------------------------------------------------
   Stond in hetzelfde grijs als de rest van de opsomming, waardoor het beste
   nieuws van de hele mand er als een boekhoudregel uitzag. Nu in het oranje van
   het merk, met een lichte achtergrond eromheen, zodat je hem ziet zonder te
   zoeken. Geldt op de winkelmand en op de kassa.
   ---------------------------------------------------------------------- */

.wc-block-components-totals-fees {
	color: #EF6528;
	font-weight: 700;
	background: rgba(239, 101, 40, 0.08);
	border-radius: 0.5rem;
	padding: 0.5rem 0.625rem;
	margin: 0.25rem 0;
}

.wc-block-components-totals-fees .wc-block-components-totals-item__label,
.wc-block-components-totals-fees .wc-block-components-totals-item__value,
.wc-block-components-totals-fees .wc-block-formatted-money-amount {
	color: #EF6528;
	font-weight: 700;
}


/* -------------------------------------------------------------------------
   De kortingsbalk op de homepage
   ----------------------------------------------------------------------
   Oranje op de plek tussen de hero en het procesblok, en hij loopt: de tekst
   schuift van rechts naar links en herhaalt zich naadloos. Twee identieke
   groepen, en de animatie verschuift het spoor precies de helft van zijn
   breedte - dan staat de tweede groep waar de eerste begon.

   Wie iets wil lezen houdt de muis stil; dan hoort de band dat ook te doen.
   ---------------------------------------------------------------------- */

.xtrona-kortingsbalk {
	display: block;
	overflow: hidden;
	position: relative;
	background: linear-gradient(90deg, #EF6528 0%, #E05418 100%);
	color: #ffffff;
	text-decoration: none;
	padding: 0.875rem 0;
	/* De randen vervagen, anders lijkt het of de tekst wordt afgekapt. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
	mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
}

.xtrona-kortingsbalk__spoor {
	display: flex;
	width: max-content;
	animation: xtrona-korting-loop 38s linear infinite;
}

.xtrona-kortingsbalk:hover .xtrona-kortingsbalk__spoor {
	animation-play-state: paused;
}

.xtrona-kortingsbalk__groep {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.xtrona-kortingsbalk__item {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0 2.25rem;
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.35;
	white-space: nowrap;
	color: #ffffff;
}

.xtrona-kortingsbalk__item i {
	font-size: 1.25rem;
	line-height: 1;
}

@keyframes xtrona-korting-loop {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Wie beweging liever niet ziet, krijgt gewoon een stilstaande balk. */
@media (prefers-reduced-motion: reduce) {
	.xtrona-kortingsbalk__spoor {
		animation: none;
	}
}

/* Verborgen is verborgen - het lege-mandblok draagt `hidden` zolang er iets in
   de mand zit, en dat mag geen enkele regel hierboven overrulen. */
.xtrona-empty-cart[hidden] {
	display: none !important;
}

/* De uitsnede van een herobeeld.
   Een hero is een brede, lage strook: van een 16:9-beeld blijft alleen een band
   uit het midden over. Standaard pakt `object-cover` het hart van de foto, en
   bij de contactbalie valt de chatbubbel dan half buiten beeld. Iets hoger
   mikken houdt headset, bubbel en doos alle drie in de strook. */
.xtrona-hero__beeld--contact {
	object-position: 50% 34%;
}

/* De regel onder de kop staat op een foto in plaats van op vlak blauw, dus
   iets steviger dan het doorzichtige wit dat daar eerst stond. */
.xtrona-hero__onder {
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 1px 10px rgba(16, 34, 73, 0.6);
}

/* Het floers over een herofoto waar de kop in het midden staat.
   De koppen van winkelmand en kassa gebruiken een verloop van links naar rechts;
   dat werkt daar omdat het onderwerp in het midden van het beeld ligt. Op de
   contactbalie staat het onderwerp links - de headset - en dat verdween precies
   in het donkerste deel. Dit floers is boven en onder zwaarder en in de band
   waar de tekst staat het lichtst: de foto blijft leesbaar en de tekst ook. */
.xtrona-hero__scrim {
	background: linear-gradient(
		180deg,
		rgba(16, 34, 73, 0.64) 0%,
		rgba(16, 34, 73, 0.38) 42%,
		rgba(16, 34, 73, 0.76) 100%
	);
	pointer-events: none;
}

/* Op een telefoon staat de foto bijna onbijgesneden in een lage strook, en dan
   valt de kop precies over de doos - het lichtste deel van het beeld. Daar mag
   het floers zwaarder: de tekst moet leesbaar zijn, het beeld hoeft alleen sfeer
   te geven. */
@media (max-width: 767px) {
	.xtrona-hero__scrim {
		background: linear-gradient(
			180deg,
			rgba(16, 34, 73, 0.74) 0%,
			rgba(16, 34, 73, 0.60) 45%,
			rgba(16, 34, 73, 0.84) 100%
		);
	}
}

/*
 * De zoekbalk onder de kopbalk.
 *
 * Donkere band met een wit, rond veld erin - dezelfde opzet als bol.com, waar
 * Yassin naar wees. Op brede schermen wordt de band smaller en het veld
 * gecentreerd, zodat hij niet over de volle breedte uitrekt.
 */
.xtrona-zoekband {
	background: #102249;
	padding: 0.75rem 1rem;
}

.xtrona-zoek {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 80rem;
	margin: 0 auto;
}

.xtrona-zoek__veld {
	width: 100%;
	height: 3rem;
	padding: 0 3.25rem 0 1.25rem;
	border: 0;
	border-radius: 999px;
	background: #ffffff;
	font-size: 1rem;
	color: oklch(var(--foreground-900));
	-webkit-appearance: none;
	appearance: none;
}

.xtrona-zoek__veld::placeholder {
	color: oklch(var(--foreground-400));
}

.xtrona-zoek__veld:focus {
	outline: 2px solid #EF6528;
	outline-offset: 2px;
}

/* Het kruisje dat Safari en Chrome zelf in een type=search zetten. */
.xtrona-zoek__veld::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.xtrona-zoek__knop {
	position: absolute;
	right: 0.3125rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.375rem;
	height: 2.375rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #102249;
	font-size: 1.375rem;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.xtrona-zoek__knop:hover {
	background: oklch(var(--background-100));
	color: #EF6528;
}

@media (min-width: 768px) {
	.xtrona-zoekband {
		padding: 0.875rem 1.5rem;
	}

	.xtrona-zoek {
		max-width: 40rem;
	}
}

/*
 * Het mobiele menu: categorieen bovenin, de rest eronder.
 *
 * Opgezet zoals bol.com het doet - een lijst met een regel per afdeling en een
 * pijl erachter. Een afdeling met subniches klapt open in plaats van meteen
 * door te sturen, zodat je vanuit het menu direct naar de juiste plank kunt.
 */
.xtrona-menucats {
	margin: -0.25rem -0.25rem 0;
}

.xtrona-menucat {
	border-bottom: 1px solid oklch(var(--background-200) / 0.7);
}

.xtrona-menucat__kop {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	width: 100%;
	padding: 0.9375rem 0.25rem;
	cursor: pointer;
	list-style: none;
	text-decoration: none;
	color: oklch(var(--foreground-800));
	-webkit-user-select: none;
	user-select: none;
}

.xtrona-menucat__kop::-webkit-details-marker {
	display: none;
}

.xtrona-menucat__kop--los {
	border-bottom: 1px solid oklch(var(--background-200) / 0.7);
}

.xtrona-menucat__naam {
	font-size: 1rem;
	font-weight: 600;
}


.xtrona-menucat__pijl {
	font-size: 1.375rem;
	line-height: 1;
	color: oklch(var(--foreground-400));
	transition: transform 0.2s;
}

.xtrona-menucat[open] .xtrona-menucat__pijl {
	transform: rotate(180deg);
}

.xtrona-menucat__kinderen {
	padding: 0 0.25rem 0.75rem 0.75rem;
	border-left: 2px solid oklch(var(--background-200));
	margin-left: 0.25rem;
}

.xtrona-menucat__kind {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.25rem;
	font-size: 0.9375rem;
	color: oklch(var(--foreground-700));
	text-decoration: none;
}

.xtrona-menucat__kind:hover {
	color: #EF6528;
}

.xtrona-menucat__kind--alles {
	font-weight: 700;
	color: #102249;
}

.xtrona-menuscheiding {
	height: 1px;
	margin: 1rem 0;
	background: oklch(var(--background-200) / 0.8);
}

/*
 * De land- en taalregel onderin het menu.
 *
 * Bij ons verschilt het assortiment echt per land, dus de uitleg staat er
 * gewoon bij in plaats van verstopt achter een vlaggetje.
 */
.xtrona-landregel {
	margin-top: 1rem;
	border-top: 1px solid oklch(var(--background-200) / 0.8);
}

.xtrona-landregel__kop {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.9375rem 0.25rem;
	cursor: pointer;
	list-style: none;
	-webkit-user-select: none;
	user-select: none;
}

.xtrona-landregel__kop::-webkit-details-marker {
	display: none;
}

.xtrona-landregel__vlag {
	font-size: 1.5rem;
	line-height: 1.2;
}

.xtrona-landregel__tekst {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.xtrona-landregel__titel {
	font-size: 0.9375rem;
	font-weight: 700;
	color: oklch(var(--foreground-800));
}

.xtrona-landregel__streep {
	margin: 0 0.25rem;
	color: oklch(var(--foreground-300));
	font-weight: 400;
}

.xtrona-landregel__uitleg {
	font-size: 0.8125rem;
	line-height: 1.35;
	color: oklch(var(--foreground-500));
}

.xtrona-landregel__pijl {
	margin-left: auto;
	align-self: center;
	font-size: 1.375rem;
	line-height: 1;
	color: oklch(var(--foreground-400));
	transition: transform 0.2s;
}

.xtrona-landregel[open] .xtrona-landregel__pijl {
	transform: rotate(180deg);
}

.xtrona-landregel__keuze {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0 0.25rem 1rem;
}

.xtrona-landregel__land {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	height: 2.25rem;
	padding: 0 0.75rem;
	border: 1px solid oklch(var(--background-200));
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
	color: oklch(var(--foreground-700));
	text-decoration: none;
}

.xtrona-landregel__land.is-huidig {
	border-color: #EF6528;
	color: #EF6528;
	background: oklch(var(--background-100));
}

/* Onze aanbieding in het menu: dezelfde belofte als op de winkelmand. */
.xtrona-menuactie {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.9375rem 0.25rem;
	text-decoration: none;
	color: #EF6528;
}

.xtrona-menuactie__icoon {
	font-size: 1.375rem;
	line-height: 1;
}

.xtrona-menuactie__tekst {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
}

.xtrona-menuactie__pijl {
	margin-left: auto;
	font-size: 1.375rem;
	line-height: 1;
}

/*
 * Het mobiele menu als paneel, niet als stuk pagina.
 *
 * Het stond in de gewone doorstroom onder de kopbalk. Bij het openen werd die
 * balk daardoor metershoog en moest je door het hele menu heen scrollen voor je
 * de pagina weer zag - en de pagina eronder scrolde vrolijk mee.
 *
 * Nu neemt het paneel de ruimte onder de kopbalk in, scrolt het zelf, en ligt
 * de pagina eronder stil. `--xtrona-kop` is de hoogte van de balk plus de
 * zoekband; die kloppen we hieronder per schermbreedte bij.
 */
:root {
	--xtrona-kop: 8.75rem;
}

@media (min-width: 768px) {
	:root {
		--xtrona-kop: 10.5rem;
	}
}

#xtrona-mobile-menu.is-open {
	position: fixed;
	top: var(--xtrona-kop);
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	background: #ffffff;
}

/*
 * Boven de telefoon is dit een zijbalk, geen scherm.
 *
 * Het paneel stond op `left: 0; right: 0` en nam dus op elke breedte de hele
 * pagina over. Op een telefoon klopt dat; op een tablet of een smal
 * laptopvenster krijg je een menu van 800 pixels breed met rijen die voor een
 * duim zijn gemaakt, en dat leest als een fout. Yassin, 7 sep 2026: "wat we
 * allemaal gedaan hebben voor mobile wat goed is, werkt niet op andere
 * formaten... jawel en zo groot!"
 *
 * Vanaf 600 pixels: een paneel van hoogstens 24rem tegen de linkerrand, met de
 * pagina erachter verduisterd. Zoals de zijbalk bij bol.
 */
@media (min-width: 600px) {
	#xtrona-mobile-menu.is-open {
		right: auto;
		width: min(24rem, 85vw);
		border-right: 1px solid oklch(var(--background-200) / 0.8);
		box-shadow: 0 1.25rem 3rem oklch(var(--foreground-900) / 0.18);
	}

	body.xtrona-menu-open::before {
		content: '';
		position: fixed;
		top: var(--xtrona-kop);
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 55;
		background: oklch(var(--foreground-900) / 0.45);
	}

	/* Rijen die voor een duim zijn gemaakt, zijn hier een maat te groot. */
	#xtrona-mobile-menu.is-open .xtrona-menucat__kop,
	#xtrona-mobile-menu.is-open .xtrona-menuactie {
		padding-top: 0.6875rem;
		padding-bottom: 0.6875rem;
		font-size: 0.9375rem;
	}
}

/* De pagina eronder stilzetten zolang het paneel openstaat. */
body.xtrona-menu-open {
	overflow: hidden;
}

/*
 * MyXtrona: de blokken onder de snelkaarten.
 *
 * Je laatste bestellingen en je gegevens staan uitgeschreven in plaats van
 * achter een link, zodat je in een oogopslag ziet waar je pakje is en naar welk
 * adres het gaat.
 */
.xtrona-portaal__blok {
	margin-top: 2rem;
	padding: 1.25rem 1.25rem 1rem;
	border: 1px solid oklch(var(--background-200) / 0.8);
	border-radius: 1rem;
	background: #ffffff;
}

.xtrona-portaal__blokkop {
	margin: 0 0 0.875rem;
	font-size: 1rem;
	font-weight: 700;
	color: oklch(var(--foreground-900));
}

.xtrona-portaal__leegtekst {
	margin: 0;
	font-size: 0.9375rem;
	color: oklch(var(--foreground-500));
}

.xtrona-portaal__meer {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-top: 0.875rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: #EF6528;
	text-decoration: none;
}

.xtrona-bestellijst {
	list-style: none;
	margin: 0;
	padding: 0;
}

.xtrona-bestelling {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.875rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid oklch(var(--background-200) / 0.7);
}

.xtrona-bestelling:last-child {
	border-bottom: 0;
}

.xtrona-bestelling__status {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #1a7f4b;
}

.xtrona-bestelling__nummer {
	font-weight: 700;
	color: oklch(var(--foreground-900));
	text-decoration: none;
}

.xtrona-bestelling__datum {
	font-size: 0.875rem;
	color: oklch(var(--foreground-500));
}

.xtrona-bestelling__bedrag {
	margin-left: auto;
	font-weight: 700;
	color: oklch(var(--foreground-900));
}

.xtrona-gegevens__adres {
	margin: 0;
	font-style: normal;
	line-height: 1.5;
	color: oklch(var(--foreground-700));
}

.xtrona-gegevens__mail {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	color: oklch(var(--foreground-600));
}

/* -------------------------------------------------------------------------
   Categorieen als uitklapmenu in de kop
   ----------------------------------------------------------------------
   Op de collectiepagina stond "Winkel per categorie" als een raster van blokken
   midden in de pagina. Op een telefoon werkt dat; op een desktop duwt het de
   producten een heel scherm naar beneden voordat je er een ziet. Yassin,
   7 sep 2026: *"voor desktop en tablets en andere formaten werk gwn die winkel
   per categorie weg zoals bijvoorbeeld bol.com doet"*.

   Vanaf 768 pixels gaat het raster dus weg en staan de categorieen in de balk.
   Daaronder verandert er niets: op mobiel blijft de inklapbare lijst staan en
   staan de categorieen ook in het hamburgermenu.
   ---------------------------------------------------------------------- */

.xtrona-katmenu {
	position: relative;
}

.xtrona-katmenu__knop {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: 9999px;
	background: transparent;
	font-size: 0.875rem;
	font-weight: 500;
	color: oklch(var(--foreground-600));
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s, background-color 0.15s;
}

.xtrona-katmenu__knop:hover,
.xtrona-katmenu__knop[aria-expanded="true"] {
	color: oklch(var(--foreground-950));
	background: oklch(var(--background-100));
}

.xtrona-katmenu__pijl {
	font-size: 1.125rem;
	transition: transform 0.15s;
}

.xtrona-katmenu__knop[aria-expanded="true"] .xtrona-katmenu__pijl {
	transform: rotate(180deg);
}

.xtrona-katmenu__paneel {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	z-index: 70;
	min-width: 20rem;
	max-height: min(70vh, 32rem);
	overflow-y: auto;
	padding: 0.5rem;
	border: 1px solid oklch(var(--background-200) / 0.8);
	border-radius: 1rem;
	background: #ffffff;
	box-shadow: 0 1.25rem 3rem oklch(var(--foreground-900) / 0.16);
}

.xtrona-katmenu__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.625rem 0.75rem;
	border-radius: 0.625rem;
	font-size: 0.9375rem;
	color: oklch(var(--foreground-800));
	text-decoration: none;
	transition: background-color 0.12s;
}

.xtrona-katmenu__item:hover {
	background: oklch(var(--background-100));
	color: oklch(var(--foreground-950));
}


/* Het raster met categorieblokken staat niet meer in de pagina; zie header.php. */

/* De subcategorieen staan iets ingesprongen onder hun niche. */
.xtrona-katmenu__item--niche {
	font-weight: 600;
}

.xtrona-katmenu__item--kind {
	padding-left: 1.75rem;
	font-size: 0.875rem;
	color: oklch(var(--foreground-600));
}

.xtrona-katmenu__item--niche + .xtrona-katmenu__item--niche {
	margin-top: 0.25rem;
}

/* -------------------------------------------------------------------------
 * De privacyzin
 * ----------------------------------------------------------------------
 * Staat onder het registratieformulier en onder de kassa. Klein en rustig:
 * het is een geruststelling, geen waarschuwing, en niemand moet erdoor
 * afgeleid worden van het veld waar hij mee bezig is.
 *
 * Op de kassa staat hij na het kassablok, en dat blok is over de volle breedte.
 * Een zin die dan van rand tot rand loopt leest niet; vandaar de max-breedte,
 * links uitgelijnd zodat hij onder de kolom met de velden blijft hangen.
 * ---------------------------------------------------------------------- */
.xtrona-privacyzin {
	margin: 0.75rem 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: oklch(var(--foreground-500));
}

.xtrona-privacyzin a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.xtrona-privacyzin a:hover,
.xtrona-privacyzin a:focus-visible {
	color: #EF6528;
}

.xtrona-privacyzin--kassa {
	max-width: 44rem;
	margin-top: 1.25rem;
}

/*
 * De eigen regel van WooCommerce boven de knop gaat weg.
 *
 * Daar stond "Door verder te gaan met je aankoop ga je akkoord met onze
 * Algemene voorwaarden en Privacybeleid", en daaronder onze eigen privacyzin.
 * Twee juridische regels vlak onder elkaar leest zwaar en zegt half hetzelfde.
 *
 * Yassin, 7 sep 2026: *"voeg samen"*. Onze zin draagt nu allebei de links en
 * zegt er bovendien bij waarvoor we de gegevens gebruiken - dat laatste stond
 * er bij WooCommerce niet. Hun regel wordt door React getekend en is niet in
 * PHP te herschrijven zonder in het kassablok te grijpen; verbergen is hier de
 * veilige weg. Zie xtrona_privacyzin() in de plugin voor de tekst zelf.
 */
.wc-block-checkout__terms {
	display: none;
}

/* -------------------------------------------------------------------------
 * De koopbalk onderaan de productpagina - alleen op de telefoon
 * ----------------------------------------------------------------------
 * Op een telefoon staat de koopknop een half scherm onder de fotos. Wie de
 * beschrijving of de specificaties leest, is hem kwijt.
 *
 * Prijs links, dan het hartje en het mandje als icoontjes van 40 pixels, en
 * rechts "Nu kopen" als enige knop met tekst. Op 360 pixels is dat precies wat
 * er past; twee even zware knoppen naast elkaar zouden bovendien alleen maar
 * laten twijfelen.
 *
 * Op tablet en desktop niet: daar staat de koopknop in de rechterkolom en
 * blijft hij lang genoeg in beeld.
 * ---------------------------------------------------------------------- */
.xtrona-koopbalk {
	display: none;
}

@media (max-width: 767px) {
	.xtrona-koopbalk {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
		background: #ffffff;
		border-top: 1px solid oklch(var(--background-200) / 0.9);
		box-shadow: 0 -6px 22px rgba(16, 34, 73, 0.12);
		transform: translateY(115%);
		visibility: hidden;
		transition: transform 0.22s ease, visibility 0.22s;
	}

	.xtrona-koopbalk.is-open {
		transform: none;
		visibility: visible;
	}

	/* Zodat de balk de laatste regel van de voettekst niet afdekt. */
	body.xtrona-koopbalk-open {
		padding-bottom: 4.75rem;
	}

	/*
	 * Het menu gaat voor. De cookiebalk staat op z-index 9999 en ligt er
	 * vanzelf overheen; die verdwijnt na een keuze.
	 */
	body.xtrona-menu-open .xtrona-koopbalk {
		display: none;
	}

	.xtrona-koopbalk__prijs {
		flex: 1 1 auto;
		min-width: 0;
		line-height: 1.15;
	}

	.xtrona-koopbalk__bedrag {
		display: block;
		font-size: 1.0625rem;
		font-weight: 700;
		color: oklch(var(--foreground-950));
		white-space: nowrap;
	}

	.xtrona-koopbalk__verzending {
		display: block;
		margin-top: 0.12rem;
		font-size: 0.625rem;
		font-weight: 600;
		color: #EF6528;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.xtrona-koopbalk__icoon {
		flex: 0 0 auto;
		width: 2.5rem;
		height: 2.5rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 1px solid oklch(var(--background-300));
		border-radius: 9999px;
		background: #ffffff;
		color: oklch(var(--foreground-700));
		font-size: 1.125rem;
		line-height: 1;
		cursor: pointer;
	}

	.xtrona-koopbalk__icoon--mand,
	.xtrona-koopbalk__icoon.is-favoriet {
		border-color: #EF6528;
		color: #EF6528;
	}

	/* Hetzelfde volle hartje als in het koopvak. */
	.xtrona-koopbalk__icoon.is-favoriet i::before {
		content: "\ee0a";
	}

	.xtrona-koopbalk__knop {
		flex: 0 1 auto;
		min-width: 6rem;
		padding: 0.72rem 1.05rem;
		border: 0;
		border-radius: 9999px;
		background: #EF6528;
		color: #ffffff;
		font-size: 0.875rem;
		font-weight: 700;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		box-shadow: 0 8px 14px -4px rgb(232 102 58 / 0.35);
	}

	.xtrona-koopbalk__knop:active {
		background: #E66032;
	}
}

/* Onder de 360 pixels moet er iets wijken; liever de verzendregel dan een knop. */
@media (max-width: 359px) {
	.xtrona-koopbalk__verzending {
		display: none;
	}
}






/* Op een telefoon staat de sortering al onder de telling; dan mag dit erbij. */
@media (max-width: 639px) {
	}

/* -------------------------------------------------------------------------
 * Categoriekaarten
 * ----------------------------------------------------------------------
 * Zachte vlakken met de naam van de categorie en er drie echte artikelen in.
 * Geen iconen: een bezoeker moet in het eerste schermbeeld zien dat hier echte
 * spullen liggen.
 *
 * Twee kolommen op de telefoon (vier kaarten in beeld zonder scrollen), drie
 * op een tablet, vijf op een breed scherm - dan passen tien kaarten in twee
 * rijen, zoals gevraagd.
 * ---------------------------------------------------------------------- */
.xtrona-katkaarten {
	background: oklch(var(--background-50));
	padding: 1.25rem 0 0.5rem;
}

.xtrona-katkaarten__binnen {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.xtrona-katkaarten__binnen {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
		padding: 0 1.5rem;
	}
}

@media (min-width: 1024px) {
	.xtrona-katkaarten__binnen {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		padding: 0 2rem;
	}
}

.xtrona-katkaart {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.6rem;
	min-height: 8.5rem;
	padding: 0.85rem 0.85rem 0.7rem;
	border-radius: 1rem;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.xtrona-katkaart:hover {
	transform: translateY(-2px);
	box-shadow: 0 0.75rem 1.5rem oklch(var(--foreground-900) / 0.12);
}

/*
 * Donker, met een gloed. Niet de pasteltinten van de buren.
 *
 * Yassin, 8 sep 2026: *"je gebruikt zelfde kleuren als bol.com, dat is te
 * opvallend, doe het anders, kom met een wow effect."* Terecht: lichtblauw en
 * perzik naast elkaar is letterlijk hun palet.
 *
 * Nu onze eigen kleuren, maar omgekeerd gebruikt: een diepe navy kaart met een
 * oranje gloed die er vanuit een hoek doorheen breekt, en de artikelen als
 * witte tegels die er als een waaier bovenop liggen. Op een lichte pagina
 * springt dat eruit zoals een etalage bij avond.
 */
.xtrona-katkaart {
	position: relative;
	overflow: hidden;
	background: linear-gradient(155deg, #1a3a70 0%, #102249 55%, #0b1730 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 0.6rem 1.4rem rgba(11, 23, 48, 0.28);
}

/* De gloed. Per kaart uit een andere hoek, zodat ze niet identiek zijn. */
.xtrona-katkaart::after {
	content: '';
	position: absolute;
	width: 11rem;
	height: 11rem;
	border-radius: 9999px;
	background: radial-gradient(circle, rgba(239, 101, 40, 0.55) 0%, rgba(239, 101, 40, 0) 68%);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
	opacity: 0.85;
}

.xtrona-katkaart--0::after { right: -3.5rem; top: -4rem; }
.xtrona-katkaart--1::after { left: -4rem; bottom: -4.5rem; }
.xtrona-katkaart--2::after { right: -4.5rem; bottom: -4rem; }
.xtrona-katkaart--3::after { left: -3.5rem; top: -4.5rem; background: radial-gradient(circle, rgba(74, 127, 217, 0.5) 0%, rgba(74, 127, 217, 0) 68%); }

.xtrona-katkaart:hover {
	transform: translateY(-3px);
	box-shadow: 0 1rem 2rem rgba(11, 23, 48, 0.4);
}

.xtrona-katkaart:hover::after {
	opacity: 1;
	transform: scale(1.15);
}

.xtrona-katkaart__naam {
	position: relative;
	z-index: 1;
	font-family: var(--font-heading, inherit);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	color: #ffffff;
}

/* De artikelen liggen als een waaier op de kaart en spreiden bij hover. */
.xtrona-katkaart__fotos {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	padding-left: 0.15rem;
}

.xtrona-katkaart__fotos img {
	width: 3rem;
	max-width: none;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 0.55rem;
	/*
	 * Niet spierwit. Yassin, 8 sep 2026: *"de witte tegels zijn leuk, maar te
	 * wit"*. Tegen een donkere kaart snijdt zuiver wit; een koele gebroken tint
	 * met een zachte rand ligt rustiger en laat het artikel het werk doen.
	 */
	background: #eef1f7;
	border: 1px solid rgba(255, 255, 255, 0.55);
	padding: 0.2rem;
	box-shadow: 0 0.35rem 0.8rem rgba(0, 0, 0, 0.3);
	transition: transform 0.25s ease;
}

.xtrona-katkaart__fotos img + img {
	margin-left: -0.75rem;
}

.xtrona-katkaart__fotos img:nth-child(1) { transform: rotate(-6deg); }
.xtrona-katkaart__fotos img:nth-child(2) { transform: rotate(1deg) translateY(-0.15rem); }
.xtrona-katkaart__fotos img:nth-child(3) { transform: rotate(7deg); }

.xtrona-katkaart:hover .xtrona-katkaart__fotos img:nth-child(1) { transform: rotate(-9deg) translateX(-0.25rem); }
.xtrona-katkaart:hover .xtrona-katkaart__fotos img:nth-child(2) { transform: rotate(0deg) translateY(-0.4rem); }
.xtrona-katkaart:hover .xtrona-katkaart__fotos img:nth-child(3) { transform: rotate(10deg) translateX(0.25rem); }

@media (min-width: 1024px) {
	.xtrona-katkaart {
		min-height: 10rem;
		padding: 1rem;
	}

	.xtrona-katkaart__naam {
		font-size: 1rem;
	}

	.xtrona-katkaart__fotos img {
		width: 3.6rem;
	}
}

/* De kop boven de kaarten, met een weg naar het volledige overzicht. */
.xtrona-katkaarten__kop {
	max-width: 80rem;
	margin: 0 auto;
	padding: 1.75rem 1rem 0;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	background: oklch(var(--background-50));
}

.xtrona-katkaarten__kop h2 {
	font-family: var(--font-heading, inherit);
	font-size: 1.25rem;
	font-weight: 700;
	color: oklch(var(--foreground-950));
	margin: 0;
}

.xtrona-katkaarten__kop a {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #EF6528;
	text-decoration: none;
	white-space: nowrap;
}

@media (min-width: 640px) {
	.xtrona-katkaarten__kop {
		padding: 2.25rem 1.5rem 0;
	}

	.xtrona-katkaarten__kop h2 {
		font-size: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.xtrona-katkaarten__kop {
		padding: 2.5rem 2rem 0;
	}
}

/*
 * Het scherm achter de tekst in de hero.
 *
 * Eigen CSS en geen Tailwind-klasse: `bg-[#102249]/80` bestaat niet in het
 * gecompileerde bestand, en een klasse die niet bestaat levert geen scherm maar
 * niets. Dat is precies waarom de kop op de telefoon onleesbaar werd.
 */
/*
 * Licht genoeg om de film te zien, donker genoeg om de kop te lezen.
 *
 * Eerst stond dit op 74 procent en was er van de video niets meer over -
 * Yassin, 8 sep 2026: *"de achtergrond is te donker gemaakt en kan de video
 * dat afgespeeld wordt amper nog zien"*. De leesbaarheid komt nu van het
 * verloop dat links het donkerst is, precies waar de tekst staat.
 */
.xtrona-heroscherm {
	background: rgba(16, 34, 73, 0.35);
}

@media (min-width: 768px) {
	.xtrona-heroscherm {
		background: rgba(16, 34, 73, 0.18);
	}
}

/* Een zachte schaduw houdt de kop leesbaar zonder het beeld te verduisteren. */
.xtrona-heroscherm ~ .relative h1,
.xtrona-heroscherm ~ .relative p {
	text-shadow: 0 1px 10px rgba(16, 34, 73, 0.75);
}

/* -------------------------------------------------------------------------
 * De zwevende knoppen onderaan
 * ----------------------------------------------------------------------
 * Naar boven, en naar de collectie. Ze schuiven pas in beeld zodra er zeshonderd
 * pixels gescrold is; daarvoor staat de knop naar boven op de plek waar je toch
 * al bent.
 *
 * Rechtsonder, en op de productpagina boven de koopbalk - die zit daar op de
 * telefoon al, en twee dingen in dezelfde hoek is er een te veel.
 * ---------------------------------------------------------------------- */
.xtrona-zweef {
	position: fixed;
	right: 1rem;
	bottom: calc(1rem + env(safe-area-inset-bottom));
	z-index: 45;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.75rem);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.xtrona-zweef.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.xtrona-zweef__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	height: 2.75rem;
	border: 0;
	border-radius: 9999px;
	background: #102249;
	color: #ffffff;
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 0.5rem 1.25rem rgba(16, 34, 73, 0.3);
}

.xtrona-zweef__knop--collectie {
	padding: 0 1rem;
	background: #EF6528;
	box-shadow: 0 0.5rem 1.25rem rgba(239, 101, 40, 0.35);
}

/* Onze eigen oranje, net als de knop ernaast. */
.xtrona-zweef__knop--top {
	width: 2.75rem;
	font-size: 1.125rem;
	background: #EF6528;
	box-shadow: 0 0.5rem 1.25rem rgba(239, 101, 40, 0.35);
}

.xtrona-zweef__knop:hover {
	filter: brightness(1.08);
}

/* Naast de koopbalk op de productpagina, niet erbovenop. */
body.xtrona-koopbalk-open .xtrona-zweef {
	bottom: calc(4.75rem + env(safe-area-inset-bottom));
}

/*
 * Op een smal scherm draagt de collectieknop alleen zijn icoon.
 *
 * De grens stond op 480 pixels en dat was te laag: op een telefoon van 500
 * breed lag de volle oranje pil over de prijs heen, met de koopbalk eronder
 * en het AI-blokje ernaast. Drie zwevende dingen in dezelfde hoek is er twee
 * te veel. Vanaf 640 pixels pas met tekst.
 */
@media (max-width: 639px) {
	.xtrona-zweef__knop--collectie span {
		display: none;
	}

	.xtrona-zweef__knop--collectie {
		width: 2.75rem;
		padding: 0;
		font-size: 1.125rem;
	}
}

/* -------------------------------------------------------------------------
 * Land en taal achter de wereldbol (desktop)
 * ----------------------------------------------------------------------
 * Hetzelfde blok als onderin het mobiele menu, maar dan als uitklappaneel.
 * De pillen delen hun opmaak met de mobiele versie, zodat er één vorm is.
 * ---------------------------------------------------------------------- */
.xtrona-landpaneel {
	width: min(22rem, 90vw);
	padding: 0.9rem 1rem 1rem;
}

.xtrona-landpaneel__kop {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 0.15rem;
	font-size: 0.9375rem;
	color: oklch(var(--foreground-900));
}

.xtrona-landpaneel__uitleg {
	margin: 0 0 0.7rem;
	font-size: 0.75rem;
	line-height: 1.4;
	color: oklch(var(--foreground-500));
}

.xtrona-landpaneel__label {
	margin: 0.9rem 0 0.45rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: oklch(var(--foreground-400));
}

.xtrona-landpaneel .xtrona-landregel__keuze {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0;
}

/* -------------------------------------------------------------------------
 * Het schap met producten in de hero
 * ----------------------------------------------------------------------
 * Vier artikelen uit vier verschillende niches, als kleine witte tegels naast
 * de belofte. Zonder prijs: hier laten we zien wát we verkopen.
 *
 * Deze regels waren even weg. Bij het vervangen van de kaartkleuren liep de
 * knip een blok te ver door en verdwenen ze mee - met als resultaat foto's van
 * volledige grootte dwars door de hero. Yassin: *"mijn hero is villian
 * geworden nu haha"*.
 * ---------------------------------------------------------------------- */
.xtrona-heroschap {
	display: flex;
	gap: 0.55rem;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.25rem;
}

.xtrona-heroschap::-webkit-scrollbar {
	display: none;
}

.xtrona-heroschap__item {
	flex: 0 0 auto;
	width: 5.25rem;
	display: block;
	padding: 0.4rem;
	border-radius: 0.75rem;
	background: #f5f7fb;
	border: 1px solid rgba(255, 255, 255, 0.7);
	text-decoration: none;
	box-shadow: 0 0.5rem 1.25rem rgba(16, 34, 73, 0.28);
	transition: transform 0.15s ease;
}

.xtrona-heroschap__item:hover {
	transform: translateY(-3px);
}

.xtrona-heroschap__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 0.4rem;
}

@media (min-width: 768px) {
	.xtrona-heroschap {
		flex: 0 0 auto;
		overflow: visible;
		gap: 0.75rem;
	}

	.xtrona-heroschap__item {
		width: 6.5rem;
	}
}

/* -------------------------------------------------------------------------
 * De kleur van een artikel
 * ----------------------------------------------------------------------
 * Een gevinkt bolletje met de uitvoering erin, en ernaast dat dit de enige is.
 * Het is bewust geen rij knoppen: er valt niets te kiezen, en een knop die
 * niets doet is erger dan geen knop.
 * ---------------------------------------------------------------------- */
.xtrona-kleur {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.xtrona-kleur__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	height: 2.25rem;
	padding: 0 0.85rem;
	border: 1px solid #EF6528;
	border-radius: 9999px;
	background: rgba(239, 101, 40, 0.07);
	font-size: 0.875rem;
	font-weight: 600;
	color: oklch(var(--foreground-900));
}

.xtrona-kleur__chip i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 9999px;
	background: #EF6528;
	color: #ffffff;
	font-size: 0.7rem;
}

.xtrona-kleur__uitleg {
	font-size: 0.75rem;
	color: oklch(var(--foreground-500));
}

/* -------------------------------------------------------------------------
   De maat van een artikel in maten (thema 5.26.0)
   ----------------------------------------------------------------------
   Hier valt wel iets te kiezen, dus hier mogen het knoppen zijn: rand, ronde
   hoeken, en de gekozen maat in dezelfde oranje stijl als het kleurbolletje.
   Eigen klassen, want nieuwe Tailwind-klassen bestaan niet in tailwind.css.
   ---------------------------------------------------------------------- */
.xtrona-cart-form .xtrona-maat {
	flex: 0 0 100%;
	margin-bottom: 0.25rem;
}

.xtrona-maat__keuzes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.xtrona-maat__pil {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3rem;
	height: 2.75rem;
	padding: 0 0.9rem;
	border: 1px solid oklch(var(--background-300));
	border-radius: 9999px;
	background: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	color: oklch(var(--foreground-900));
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.xtrona-maat__pil:hover {
	border-color: #EF6528;
}

.xtrona-maat__pil:focus-visible {
	outline: 2px solid #EF6528;
	outline-offset: 2px;
}

.xtrona-maat__pil.is-gekozen {
	border-color: #EF6528;
	background: rgba(239, 101, 40, 0.07);
	box-shadow: inset 0 0 0 1px #EF6528;
}

.xtrona-maat__pil:disabled {
	opacity: 0.45;
	text-decoration: line-through;
	cursor: not-allowed;
}

.xtrona-maat__hint {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #EF6528;
}

.xtrona-maat__leeg {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 700;
	color: oklch(var(--foreground-500));
}

/* Op slot tot er een maat gekozen is. */
.xtrona-cart-form button.single_add_to_cart_button:disabled,
.xtrona-direct:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.xtrona-direct:disabled:hover {
	background: #fff;
	color: #102249;
}

/* "vanaf" voor de laagste maatprijs, kleiner dan het bedrag zelf. */
.xtrona-vanaf {
	font-size: 0.55em;
	font-weight: 600;
}

/* Op de tegel staat het bedrag in een inline-flex: een spatie valt daar weg. */
.xtrona-tegel__vanaf {
	margin-right: 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   Het metselwerkraster op de schappen
   ----------------------------------------------------------------------
   Yassin, 8 sep 2026: het oude raster was "heel saai en te groot, zo 1 product
   op 1 scherm". Dat klopte: op een telefoon stond er één kaart per rij, zo
   breed als het scherm. Nu staan er twee naast elkaar en zie je er vier
   tegelijk.

   Waarom `columns` en geen `grid`?
   Voor een metselwerkraster - kolommen die niet gelijk lopen - bestaat
   `grid-template-rows: masonry`, maar dat zit in geen enkele stabiele browser.
   Met meerkolommen kan het wel: de browser vult kolom na kolom en elke tegel
   houdt zijn eigen hoogte. De leesvolgorde loopt daarmee van boven naar
   beneden per kolom in plaats van van links naar rechts per rij; bij een
   schap met producten is dat geen bezwaar, want er is geen verhaal dat je op
   volgorde moet lezen.

   `break-inside: avoid` is niet optioneel: zonder die regel knipt de browser
   een tegel doormidden over twee kolommen.
   ---------------------------------------------------------------------- */

.xtrona-raster {
	columns: 2;
	column-gap: 0.75rem;

	/*
	 * De tegels staan als `inline-block` in de kolom - de enige vorm waarin
	 * Safari `break-inside: avoid` respecteert. Tussen twee inline-blokken zet
	 * de browser de witruimte uit de broncode om in een spatie met een eigen
	 * regelhoogte, en dat zou een gat van twintig pixels tussen de tegels
	 * geven dat nergens in deze CSS staat. Regelhoogte nul hier haalt die
	 * spatie weg; de tegel zet zijn eigen regelhoogte terug.
	 */
	line-height: 0;
}

@media (min-width: 640px) {
	.xtrona-raster {
		columns: 3;
		column-gap: 1rem;
	}
}

@media (min-width: 1024px) {
	.xtrona-raster {
		columns: 4;
		column-gap: 1.25rem;
	}
}

@media (min-width: 1440px) {
	.xtrona-raster {
		columns: 5;
	}
}

.xtrona-tegel {
	break-inside: avoid;
	/* Safari kent `break-inside` op een kolom niet; dit is dezelfde regel onder
	   zijn oude naam. */
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;

	/* De onderrand is hier de rij-afstand: bij meerkolommen doet `gap` alleen
	   de ruimte tússen de kolommen, niet die eronder. */
	margin: 0 0 0.75rem;
	display: inline-block;
	vertical-align: top;
	width: 100%;
	line-height: 1.45;

	background: #ffffff;
	border: 1px solid oklch(var(--background-200) / 0.6);
	border-radius: 0.875rem;
	overflow: hidden;
	transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}

@media (min-width: 640px) {
	.xtrona-tegel {
		margin-bottom: 1rem;
		border-radius: 1rem;
	}
}

@media (min-width: 1024px) {
	.xtrona-tegel {
		margin-bottom: 1.25rem;
	}
}

.xtrona-tegel:hover {
	border-color: oklch(var(--background-300));
	box-shadow: 0 12px 28px -14px rgba(16, 34, 73, 0.4);
}

/*
 * Het beeldvlak.
 *
 * De verhouding komt per artikel uit `xtrona_tegel_vorm()` en staat als
 * `style` op het element - hij verschilt immers per tegel en kan dus niet in
 * een klasse. Alle foto's van de leverancier zijn vierkant; de wisselende
 * hoogte hier is wat de kolommen laat verspringen.
 *
 * `contain` en niet `cover`: bij een deel van de foto's raakt het artikel de
 * rand, dus bijsnijden zou het product zelf afsnijden.
 */
.xtrona-tegel__beeld {
	position: relative;
	display: block;
	background: #ffffff;
	overflow: hidden;
}

.xtrona-tegel__beeld img {
	width: 100%;
	height: 100%;
	/*
	 * Geen binnenmarge: de foto loopt tot de rand van de tegel. Met een marge
	 * eromheen zweeft er een postzegel in een wit vlak - dat is precies het
	 * beeld dat Yassin saai noemde.
	 */
	object-fit: contain;
	transition: transform 0.4s;
}

.xtrona-tegel:hover .xtrona-tegel__beeld img {
	transform: scale(1.04);
}

.xtrona-tegel__label {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	display: inline-flex;
	align-items: center;
	height: 1.375rem;
	padding: 0 0.5rem;
	border-radius: 999px;
	background: #EF6528;
	color: #ffffff;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
}

.xtrona-tegel__tekst {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.625rem 0.6875rem 0.75rem;
}

@media (min-width: 640px) {
	.xtrona-tegel__tekst {
		padding: 0.75rem 0.875rem 0.875rem;
	}
}

.xtrona-tegel__schap {
	margin: 0;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #4a7fd9;
	/* Eén regel: een schapnaam van drie woorden mag de tegel niet oprekken. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.xtrona-tegel__naam {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.35;
	color: oklch(var(--foreground-950));
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (min-width: 1024px) {
	.xtrona-tegel__naam {
		font-size: 0.875rem;
	}
}

.xtrona-tegel__naam a {
	color: inherit;
	text-decoration: none;
}

.xtrona-tegel__naam a:hover {
	color: #EF6528;
}

.xtrona-tegel__sterren {
	font-size: 0.6875rem;
	line-height: 1;
}

.xtrona-tegel__voet {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 0.125rem;
}

.xtrona-tegel__prijs {
	margin: 0;
	min-width: 0;
	color: oklch(var(--foreground-950));
}

/*
 * De euro's groot, de centen klein - zoals op de bon van een winkel. De cijfers
 * staan op tabelbreedte, anders danst het bedrag heen en weer tussen tegels.
 */
.xtrona-tegel__bedrag {
	display: inline-flex;
	align-items: baseline;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.xtrona-tegel__valuta {
	font-size: 0.875rem;
	font-weight: 700;
}

.xtrona-tegel__heel {
	font-size: 1.1875rem;
}

@media (min-width: 1024px) {
	.xtrona-tegel__heel {
		font-size: 1.3125rem;
	}
}

.xtrona-tegel__cent {
	font-size: 0.8125rem;
	font-weight: 700;
}

.xtrona-tegel__was {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.6875rem;
	color: oklch(var(--foreground-400));
	text-decoration: line-through;
}

.xtrona-tegel__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.875rem;
	height: 1.875rem;
	border-radius: 999px;
	background: #102249;
	color: #ffffff;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: background-color 0.2s;
}

@media (min-width: 640px) {
	.xtrona-tegel__knop {
		width: 2.25rem;
		height: 2.25rem;
		font-size: 1.0625rem;
	}
}

.xtrona-tegel__knop:hover {
	background: #EF6528;
	color: #ffffff;
}

/*
 * De verwante producten onder een productpagina staan in hetzelfde raster, want
 * twee soorten productkaarten op één site laat de winkel er samengeraapt
 * uitzien. WooCommerce tekent die lijst zelf, dus dit gaat over zijn eigen
 * `ul.products` en niet over onze tegel.
 */
@media (min-width: 640px) {
	.related.products ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.related.products ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------
   De balk boven een schap: telling links, twee uitklapmenu's rechts
   ----------------------------------------------------------------------
   Hier stonden drie losse pillen voor 24/48/96 en op een eigen regel eronder
   het sorteermenu van WooCommerce. Op een telefoon kostte dat twee regels.
   Nu staat alles op één regel; bij weinig ruimte breekt de telling af naar
   boven en houden de twee menu's elkaar vast.
   ---------------------------------------------------------------------- */

/*
 * Het rooster blijft onder de plakkende kop uit.
 *
 * Springt de browser zelf naar #producten, dan zet hij de sectie precies onder
 * de bovenkant van het venster - en daar staat de kop van 145 px overheen. Deze
 * marge duwt het doel omlaag, en `xtrona.js` rekent er nog eens mee voor het
 * geval de sprong helemaal niet aankomt.
 */
#producten {
	scroll-margin-top: 9.5rem;
}

@media (min-width: 1024px) {
	#producten {
		scroll-margin-top: 7rem;
	}
}

.xtrona-balk {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.625rem 1rem;
	margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
	.xtrona-balk {
		margin-bottom: 2rem;
	}
}

.xtrona-balk__telling {
	margin: 0;
	font-size: 0.8125rem;
	color: oklch(var(--foreground-500));
	font-variant-numeric: tabular-nums;
}

.xtrona-balk__keuzes {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
}

/*
 * Eén vorm voor beide menu's.
 *
 * De pijl is een eigen icoon boven op het veld: het pijltje dat de browser er
 * zelf in zet ziet er per besturingssysteem anders uit, en dat viel op naast
 * de rest van de knoppen. Vandaar `appearance: none` op het veld en ruimte aan
 * de rechterkant zodat de tekst niet onder de pijl loopt.
 */
/*
 * De hoofdnavigatie pas vanaf 1024, niet vanaf 768.
 *
 * Gemeten op 9 sep 2026 bij een venster van 768 px: de kop was 932 px breed en
 * de pagina schoof 164 px opzij. De oorzaak is `md:flex` op deze balk - die
 * zet hem aan op 768, terwijl hij 456 px nodig heeft en er naast het logo
 * (211) en de knoppen rechts (209) maar 753 px is.
 *
 * Onder 1024 doet het uitklapmenu dit werk al; de hamburger staat daar en
 * draagt dezelfde categorieen, de talen en de landen. Tailwind's `lg:`-klassen
 * zitten niet in het gecompileerde bestand, vandaar een eigen regel.
 */
@media (max-width: 1023px) {
	.xtrona-hoofdnav {
		display: none !important;
	}
}

.xtrona-kiezer {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	height: 2.25rem;
	padding: 0 0.625rem;
	border: 1px solid oklch(var(--background-200));
	border-radius: 999px;
	background: #ffffff;
	transition: border-color 0.2s;
}

.xtrona-kiezer:hover,
.xtrona-kiezer:focus-within {
	border-color: oklch(var(--background-300));
}

.xtrona-kiezer__naam {
	font-size: 0.75rem;
	font-weight: 600;
	color: oklch(var(--foreground-500));
	white-space: nowrap;
}

.xtrona-kiezer__veld,
.xtrona-kiezer .orderby {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 0;
	background: transparent;
	padding: 0 1.125rem 0 0;
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	color: oklch(var(--foreground-950));
	cursor: pointer;
	max-width: 11rem;
	text-overflow: ellipsis;
}

/*
 * De keuzelijst vult de hele knop, zodat je hem op een telefoon raakt.
 *
 * Gemeten op 9 sep 2026 bij 375 px: de pil is 36 px hoog, maar de `select`
 * erin was maar **13 px** - 35 x 13 voor "Tonen" en 136 x 13 voor het
 * sorteermenu. Alles eromheen zat wel goed (mand 37 x 44, menu 41 x 48,
 * paginanummers 44 x 44); alleen deze twee waren te klein om met een duim te
 * raken, en de rand eromheen deed niets.
 *
 * `align-self: stretch` met een regelhoogte die de tekst in het midden houdt
 * laat het uiterlijk gelijk en maakt de hele pil aanraakbaar.
 */
.xtrona-kiezer__veld,
.xtrona-kiezer .orderby {
	align-self: stretch;
	height: 100%;
	line-height: 2.25rem;
}

.xtrona-kiezer--sorteren .woocommerce-ordering {
	align-self: stretch;
	height: 100%;
}

.xtrona-kiezer__veld:focus,
.xtrona-kiezer .orderby:focus {
	outline: 2px solid #4a7fd9;
	outline-offset: 3px;
	border-radius: 0.25rem;
}

.xtrona-kiezer__pijl {
	position: absolute;
	right: 0.5rem;
	pointer-events: none;
	font-size: 1rem;
	line-height: 1;
	color: oklch(var(--foreground-500));
}

/*
 * Het sorteermenu is WooCommerce' eigen formulier. Het draagt normaal een
 * marge en een knop voor bezoekers zonder JavaScript; binnen deze knop hoort
 * geen van beide.
 */
.xtrona-kiezer--sorteren .woocommerce-ordering {
	margin: 0;
	display: flex;
	align-items: center;
}

.xtrona-kiezer--sorteren .woocommerce-ordering button,
.xtrona-kiezer--sorteren .woocommerce-ordering input[type="submit"] {
	display: none;
}

@media (max-width: 360px) {
	/*
	 * Pas op de smalste telefoons wint de sortering het van het woord "Tonen".
	 * Op 375 en breder - dat is bijna elk toestel - past het label er nog bij,
	 * en zonder dat label staat er alleen een los getal 24 in een knop.
	 */
	.xtrona-kiezer__naam {
		display: none;
	}
}

@media (max-width: 420px) {
	.xtrona-kiezer .orderby {
		max-width: 8.5rem;
	}
}

/* -------------------------------------------------------------------------
   Bladeren: twee knoppen, geen nummers
   ----------------------------------------------------------------------
   Met nummers stond onderaan een schap tot pagina 18, en bij 24 artikelen per
   pagina reken je het aantal daaruit terug. Dat was precies wat er weg moest.
   ---------------------------------------------------------------------- */

.xtrona-bladeren {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 2.5rem;
}

/*
 * De nummers zijn terug.
 *
 * `paginate_links()` levert een `ul` met `li`-items; die krijgen hier dezelfde
 * ronde vorm als de twee knoppen die er even stonden, zodat de bladerbalk niet
 * uit twee stijlen bestaat.
 */
.xtrona-bladeren ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.xtrona-bladeren .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border: 1px solid oklch(var(--background-200));
	border-radius: 999px;
	background: #ffffff;
	color: oklch(var(--foreground-950));
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.xtrona-bladeren a.page-numbers:hover {
	border-color: #102249;
	background: #102249;
	color: #ffffff;
}

.xtrona-bladeren .page-numbers.current {
	border-color: #102249;
	background: #102249;
	color: #ffffff;
}

/* De drie puntjes zijn geen knop en horen er ook niet als een uit te zien. */
.xtrona-bladeren .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	min-width: 1.5rem;
	padding: 0;
	color: oklch(var(--foreground-400));
}

.xtrona-bladeren__knop {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	height: 2.75rem;
	padding: 0 1.125rem;
	border: 1px solid oklch(var(--background-200));
	border-radius: 999px;
	background: #ffffff;
	color: oklch(var(--foreground-950));
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.xtrona-bladeren__knop i {
	font-size: 1.125rem;
	line-height: 1;
}

.xtrona-bladeren__knop:hover {
	border-color: #102249;
	background: #102249;
	color: #ffffff;
}

/*
 * De uitgeschakelde kant blijft staan en verdwijnt niet.
 *
 * Anders springt de overgebleven knop op pagina 1 en op de laatste pagina naar
 * het midden, en dat leest als een andere pagina.
 */
.xtrona-bladeren__knop.is-uit {
	color: oklch(var(--foreground-400));
	border-color: oklch(var(--background-200) / 0.5);
	cursor: default;
}

/*
 * De taalregel in het mobiele menu.
 *
 * Dezelfde regel als het land erboven, met één verschil: waar het land een vlag
 * draagt staat hier een icoon. Dat is smaller dan een vlagemoji, dus krijgt het
 * dezelfde breedte mee - anders staan de twee koppen niet uitgelijnd.
 */
.xtrona-landregel--taal .xtrona-landregel__vlag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	font-size: 1.25rem;
	color: oklch(var(--foreground-500));
}

/* -------------------------------------------------------------------------
   De seizoenskaarten, direct onder de hero
   ----------------------------------------------------------------------
   Yassin, 8 sep 2026, met een tekening erbij: twee brede kaarten naast elkaar
   en daaronder één die precies zo breed is als die twee samen.

       +----------------+----------------+
       |   HALLOWEEN    |  OKTOBERFEST   |
       +----------------+----------------+
       |             KERST               |
       +---------------------------------+

   Op een telefoon staan ze onder elkaar; naast elkaar zou elk van de twee
   nog geen achttien centimeter breed zijn en dan leest de naam niet meer.
   ---------------------------------------------------------------------- */

.xtrona-seizoen {
	padding: 1.5rem 0 0;
}

.xtrona-seizoen__binnen {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

@media (min-width: 768px) {
	.xtrona-seizoen {
		padding-top: 2.5rem;
	}

	.xtrona-seizoen__binnen {
		padding: 0 1.5rem;
		gap: 1rem;
	}
}

.xtrona-seizoen__paar {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.xtrona-seizoen__paar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}
}

/*
 * De kaart zelf.
 *
 * De kleur komt per seizoen mee als `--seizoen` in een style-attribuut; hij
 * verschilt per kaart en kan dus niet in een klasse. Het verloop maakt van één
 * kleur een vlak met diepte, zodat er geen afbeelding nodig is - en dus ook
 * geen afbeelding die we niet mogen gebruiken.
 */
.xtrona-seizoenkaart {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 6.5rem;
	padding: 1.25rem 1.25rem;
	border-radius: 1rem;
	overflow: hidden;
	text-decoration: none;
	color: #ffffff;
	background:
		linear-gradient(135deg, var(--seizoen, #102249) 0%, rgba(16, 34, 73, 0.92) 100%);
	transition: transform 0.2s, box-shadow 0.2s;
}

@media (min-width: 768px) {
	.xtrona-seizoenkaart {
		min-height: 8rem;
		padding: 1.5rem 1.75rem;
	}

	.xtrona-seizoenkaart--breed {
		min-height: 7rem;
	}
}

.xtrona-seizoenkaart:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px -18px rgba(16, 34, 73, 0.6);
	color: #ffffff;
}

.xtrona-seizoenkaart__tekst {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
	/* Niet meegroeien: de foto's ernaast hebben de ruimte nodig. */
	flex: 0 1 auto;
}

.xtrona-seizoenkaart__naam {
	font-family: var(--font-heading, inherit);
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

@media (min-width: 768px) {
	.xtrona-seizoenkaart__naam {
		font-size: 1.75rem;
	}

	.xtrona-seizoenkaart--breed .xtrona-seizoenkaart__naam {
		font-size: 2rem;
	}
}

.xtrona-seizoenkaart__pijl {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	font-size: 1.125rem;
	transition: background-color 0.2s, transform 0.2s;
}

.xtrona-seizoenkaart:hover .xtrona-seizoenkaart__pijl {
	background: rgba(255, 255, 255, 0.3);
	transform: translateX(2px);
}

/* -------------------------------------------------------------------------
   De seizoenskaarten aangekleed
   ----------------------------------------------------------------------
   Yassin, 8 sep 2026: *"volgens hun thema mooi maken en versieren"*.

   Alles is met CSS getekend en niets met een foto. Dat is geen zuinigheid maar
   een eis: bij kerst mogen er geen afbeeldingen van Jezus, kruisen of afgoderij
   op, en een vlak dat we zelf tekenen kan dat nooit per ongeluk bevatten. Het
   scheelt bovendien een bestand dat geladen moet worden.
   ---------------------------------------------------------------------- */

.xtrona-seizoenkaart__sier {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* --- Kerst: dennengroen, sneeuw en een warme gloed --- */

.xtrona-seizoenkaart--kerst {
	background:
		radial-gradient(120% 140% at 88% 120%, rgba(212, 175, 55, 0.32) 0%, rgba(212, 175, 55, 0) 55%),
		linear-gradient(135deg, #14532D 0%, #0B3D23 55%, #062917 100%);
}

/*
 * Sneeuw.
 *
 * Drie lagen stippen van verschillende grootte, elk met hun eigen raster. Door
 * de maten niet op elkaar te laten vallen ontstaat er een onregelmatig patroon
 * in plaats van een zichtbaar rooster.
 */
.xtrona-seizoenkaart--kerst .xtrona-seizoenkaart__sier {
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, 0.70) 1.5px, transparent 1.7px),
		radial-gradient(circle, rgba(255, 255, 255, 0.45) 1.1px, transparent 1.3px),
		radial-gradient(circle, rgba(255, 255, 255, 0.28) 2.2px, transparent 2.4px);
	background-size: 47px 39px, 29px 53px, 89px 67px;
	background-position: 0 0, 13px 23px, 37px 9px;
}

/*
 * Een gouden lijn onderaan, als het lint om een pakje.
 */
.xtrona-seizoenkaart--kerst::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, rgba(212, 175, 55, 0) 0%, #D4AF37 35%, #F0DFA0 50%, #D4AF37 65%, rgba(212, 175, 55, 0) 100%);
}

/* --- Valentijn: wijnrood met hartjes --- */

.xtrona-seizoenkaart--valentijn {
	background:
		radial-gradient(120% 140% at 12% 120%, rgba(255, 173, 191, 0.30) 0%, rgba(255, 173, 191, 0) 55%),
		linear-gradient(135deg, #9B1B30 0%, #7A1226 55%, #5A0B1B 100%);
}

/*
 * Hartjes als achtergrond.
 *
 * Twee bolletjes naast elkaar met een driehoek eronder maakt een hart, en dat
 * kan met verlopen alleen niet. Vandaar een kleine SVG als data-URI: geen
 * extern bestand, dus niets dat geblokkeerd kan worden of traag laadt.
 */
.xtrona-seizoenkaart--valentijn .xtrona-seizoenkaart__sier {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 46c-9-6.5-14-11.6-14-17.6a7.4 7.4 0 0 1 14-3.6 7.4 7.4 0 0 1 14 3.6C46 34.4 41 39.5 32 46z' fill='%23ffffff' fill-opacity='0.075'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 64 64'%3E%3Cpath d='M32 46c-9-6.5-14-11.6-14-17.6a7.4 7.4 0 0 1 14-3.6 7.4 7.4 0 0 1 14 3.6C46 34.4 41 39.5 32 46z' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E");
	background-size: 62px 62px, 38px 38px;
	background-position: 0 0, 29px 19px;
}

.xtrona-seizoenkaart--valentijn::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, rgba(255, 173, 191, 0) 0%, #FFADBF 40%, #FFD9E1 50%, #FFADBF 60%, rgba(255, 173, 191, 0) 100%);
}

/*
 * De tekst moet boven de versiering blijven staan.
 */
.xtrona-seizoenkaart__tekst,
.xtrona-seizoenkaart__pijl {
	position: relative;
	z-index: 1;
}

.xtrona-seizoenkaart__naam {
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/*
 * Bij minder beweging: de versiering blijft, alleen het optillen bij hover valt
 * weg. Een stilstaand patroon is geen beweging, dus dat mag blijven staan.
 */
@media (prefers-reduced-motion: reduce) {
	.xtrona-seizoenkaart {
		transition: none;
	}

	.xtrona-seizoenkaart:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   Producten op de seizoenskaart
   ----------------------------------------------------------------------
   Yassin, 8 sep 2026, over de kale gekleurde vlakken: *"mooi maar leeg???"* en
   *"toon producten er in, relevant houden"*.

   De foto's komen uit hetzelfde schap waar de kaart naartoe wijst - wat je op
   de kaart ziet staat er ook echt achter. Ze krijgen een witte ondergrond en
   een lichte rand, want een productfoto op wit valt anders weg tegen een donker
   vlak.
   ---------------------------------------------------------------------- */

.xtrona-seizoenkaart__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.8125rem;
	font-weight: 600;
	opacity: 0.85;
}

.xtrona-seizoenkaart__beelden {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	flex: 0 0 auto;
}

.xtrona-seizoenkaart__beeld {
	display: block;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 0.625rem;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.45);
	/* Een dunne lichte rand houdt een witte productfoto los van het vlak. */
	outline: 1px solid rgba(255, 255, 255, 0.55);
	outline-offset: -1px;
}

.xtrona-seizoenkaart__beeld img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 0.25rem;
}

/*
 * Hoeveel foto's er passen hangt van de breedte af.
 *
 * Op een telefoon van 375 pixels is de kaart 343 breed: de naam en de oproep
 * nemen daar de helft, dus meer dan twee foto's naast de pijl wordt gedrang.
 */
.xtrona-seizoenkaart__beeld:nth-child(n + 3) {
	display: none;
}

@media (min-width: 480px) {
	.xtrona-seizoenkaart__beeld:nth-child(3) {
		display: block;
	}
}

@media (min-width: 640px) {
	.xtrona-seizoenkaart__beeld {
		width: 3.75rem;
		height: 3.75rem;
	}

	.xtrona-seizoenkaart__beeld:nth-child(4) {
		display: block;
	}
}

@media (min-width: 768px) {
	.xtrona-seizoenkaart__beeld {
		width: 4.25rem;
		height: 4.25rem;
	}

	.xtrona-seizoenkaart__beelden {
		gap: 0.625rem;
	}
}

/* De pijl schuift mee naar rechts, los van de foto's. */
.xtrona-seizoenkaart__beelden + .xtrona-seizoenkaart__pijl {
	margin-left: 0.875rem;
}

/* -------------------------------------------------------------------------
   De seizoenspagina: kop, en een weg terug onderaan
   ---------------------------------------------------------------------- */

.xtrona-seizoenkop {
	position: relative;
	overflow: hidden;
	padding: 2.25rem 0;
	color: #ffffff;
}

@media (min-width: 768px) {
	.xtrona-seizoenkop {
		padding: 3rem 0;
	}
}

.xtrona-seizoenkop__binnen {
	position: relative;
	z-index: 1;
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1rem;
}

@media (min-width: 768px) {
	.xtrona-seizoenkop__binnen {
		padding: 0 1.5rem;
	}
}

.xtrona-seizoenkop__titel {
	margin: 0;
	font-family: var(--font-heading, inherit);
	font-size: 1.875rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

@media (min-width: 768px) {
	.xtrona-seizoenkop__titel {
		font-size: 2.5rem;
	}
}

/* De weg terug, onder de rijen. */

.xtrona-seizoen__terug {
	display: flex;
	justify-content: center;
	padding: 2rem 1rem 0.5rem;
}

.xtrona-seizoen__terugknop {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	height: 3rem;
	padding: 0 1.5rem;
	border-radius: 999px;
	background: #102249;
	color: #ffffff;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s;
}

.xtrona-seizoen__terugknop:hover {
	background: #EF6528;
	color: #ffffff;
}

/* -------------------------------------------------------------------------
 * De kopbalk op heel smalle telefoons
 *
 * Gemeten op 9 sep 2026: bij een venster van 320 pixels was
 * `document.scrollWidth` 326. Zes pixels, maar genoeg om de hele pagina
 * zijwaarts te laten schuiven en het accountpictogram half af te snijden.
 * Bij 360 pixels - de gangbaarste Androidbreedte - klopt alles wel, dus dit
 * raakt alleen de smalste toestellen en wie zijn lettergrootte opschroeft.
 *
 * De drie pictogrammen rechts staan op `p-2` (8 px) rondom. Onder de 360
 * wordt dat 5 px; dat wint achttien pixels, ruim genoeg, en de aanraakzone
 * blijft met 34 pixels nog binnen wat een duim raakt.
 * ---------------------------------------------------------------------- */
@media (max-width: 359px) {
	.xtrona-kop-acties > a,
	.xtrona-kop-acties > button {
		padding-left: 0.3125rem;
		padding-right: 0.3125rem;
	}

	.xtrona-kop-acties {
		gap: 0;
	}
}

/* -------------------------------------------------------------------------
 * Het aantal zoekresultaten
 *
 * `woocommerce_result_count()` schrijft zijn eigen `<p>`. Die stond in een
 * alinea met `text-white/70`, en een alinea mag geen alinea bevatten: de
 * browser sloot de buitenste en de tekst kwam donkergrijs op donkerblauw te
 * staan - onleesbaar. Vandaar dat de kleur hier op het element zelf staat en
 * niet van een ouder komt.
 *
 * Als speldje, zodat het als een gemeten feit leest en niet als een zin die
 * de kop probeert aan te vullen.
 * ---------------------------------------------------------------------- */
.xtrona-zoekaantal .woocommerce-result-count {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0.375rem 0.875rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

/* ==========================================================================
   Klassen die Tailwind nooit gebouwd heeft
   9 sep 2026

   `assets/css/tailwind.css` is een KLAAR bestand van 50 kB; er zit geen build
   bij het thema. Een klasse die er niet in staat doet niets en zegt niets.
   `python tmp/klassencheck.py --alles` vond er 51.

   Wat hieronder staat is precies wat Tailwind zelf zou hebben weggeschreven:
   dezelfde waarden, dezelfde variabelen, dezelfde breekpunten
   (sm 640, md 768, lg 1024). Zo blijven de sjablonen leesbaar als Tailwind en
   hoeft er in 39 bestanden niets verbouwd te worden.

   Drie ervan zijn eerst live nagemeten met getComputedStyle, want een
   vermoeden is geen bewijs:
     - het plusje van de FAQ stond op `transform: none` en draaide dus nooit
       naar een kruisje, op de homepage en op elke productpagina;
     - de footer stond op twee kolommen (490px 490px op een venster van 1100)
       waar er vijf horen, en had geen ruimte erboven;
     - de merknaam en de kicker stonden op `letter-spacing: normal`.

   Wat NIET in deze lijst staat en wel dood is: `list-none` op een `<summary>`.
   Gemeten: die summary staat op `display: flex`, en dan is de driehoek er toch
   al niet. Repareren wat niet stuk is levert alleen ruis op.
   ========================================================================== */

/* --- ruimte tussen dingen ------------------------------------------------ */
.gap-20 { gap: 5rem; }
.gap-x-8 { -moz-column-gap: 2rem; column-gap: 2rem; }
.gap-y-3 { row-gap: 0.75rem; }

/* --- marges en padding --------------------------------------------------- */
.m-0 { margin: 0; }
.p-0 { padding: 0; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.mt-20 { margin-top: 5rem; }
.mt-auto { margin-top: auto; }
.-mt-1 { margin-top: -0.25rem; }
.-ml-2 { margin-left: -0.5rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }

/* --- breedtes en verhoudingen -------------------------------------------- */
.max-w-5xl { max-width: 64rem; }
.max-w-sm { max-width: 24rem; }
.w-2\/5 { width: 40%; }
.w-3\/5 { width: 60%; }
.w-\[320px\] { width: 320px; }
.h-\[320px\] { height: 320px; }
.w-\[350px\] { width: 350px; }
.h-\[350px\] { height: 350px; }
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }
.list-none { list-style-type: none; }

/* --- randen en kleuren ---------------------------------------------------
   `background-200/50` bestaat wel en staat er als `oklch(var(...) / .5)`;
   `/60` is dezelfde regel met een ander cijfer. Zonder deze regel viel de
   rand terug op het grijs uit de preflight (#e5e7eb, live gemeten) - dichtbij,
   maar niet de kleur die er hoort te staan.
   ------------------------------------------------------------------------- */
.border-background-200\/60 { border-color: oklch(var(--background-200) / 0.6); }

.divide-background-200\/60 > :not([hidden]) ~ :not([hidden]) {
	border-color: oklch(var(--background-200) / 0.6);
}

.last\:border-0:last-child { border-width: 0; }
.bg-foreground-300 { background-color: oklch(var(--foreground-300) / 1); }
.text-white\/40 { color: #ffffff66; }

/* Het goud van de sterretjes bij een beoordeling. Zonder deze regel erfden ze
   de tekstkleur en waren het grijze sterren. */
.text-\[\#f5a623\] { color: #f5a623; }

/* De link in de mandmelding. `hover:underline` bestond wel, `underline` niet,
   dus de link was alleen te herkennen zodra je erover ging. */
.underline { text-decoration-line: underline; }

/* --- schaduw en waas ----------------------------------------------------- */
.blur-\[110px\] {
	--tw-blur: blur(110px);
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.shadow-xl,
.hover\:shadow-xl:hover {
	--tw-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
	--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* --- muisaanwijzer -------------------------------------------------------- */
.hover\:opacity-90:hover { opacity: 0.9; }
.hover\:text-\[\#EF6528\]:hover { color: #EF6528; }

/* --- lettergrootte -------------------------------------------------------- */
.text-5xl { font-size: 3rem; line-height: 1; }

/* --- het plusje van de FAQ -----------------------------------------------
   Gemeten op de homepage: `transform: none`. Het plusje bleef dus een plusje
   als het antwoord openstond, op de homepage en op elke productpagina.
   ------------------------------------------------------------------------- */
.group[open] .group-open\:rotate-45 {
	--tw-rotate: 45deg;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* --- de skiplink ---------------------------------------------------------
   Wie met de tabtoets binnenkomt krijgt eerst "Ga naar de inhoud". Die werd
   wel zichtbaar (`focus:not-sr-only` staat hierboven al) maar landde zonder
   plaats en zonder achtergrond ergens in de kop.
   ------------------------------------------------------------------------- */
.focus\:absolute:focus { position: absolute; }
.focus\:z-50:focus { z-index: 50; }
.focus\:top-2:focus { top: 0.5rem; }
.focus\:left-2:focus { left: 0.5rem; }
.focus\:bg-white:focus { background-color: #ffffff; }
.focus\:px-4:focus { padding-left: 1rem; padding-right: 1rem; }
.focus\:py-2:focus { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.focus\:rounded-lg:focus { border-radius: 0.5rem; }

/* --- op breedte ----------------------------------------------------------- */
@media (width >= 640px) {
	.sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
}

@media (width >= 768px) {
	.md\:gap-28 { gap: 7rem; }
	.md\:h-14 { height: 3.5rem; }
	.md\:pb-16 { padding-bottom: 4rem; }
}

@media (width >= 1024px) {
	.lg\:gap-8 { gap: 2rem; }
	.lg\:gap-14 { gap: 3.5rem; }
	.lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Twee klassen uit de taalplug-in

   Het taalmenu in de kop staat op `absolute right-0 top-full`, maar alleen
   `sm:top-full` bestond - dat geldt vanaf 640 pixels. Onder die breedte stond
   het menu dus op `top: auto` en klapte het OVER de knop heen, precies op de
   telefoon waar het menu het meest gebruikt wordt.

   De plug-in heeft geen eigen stijlblad; hij leunt op dat van het thema.
   -------------------------------------------------------------------------- */
.top-full { top: 100%; }
.min-w-\[10rem\] { min-width: 10rem; }

/* --------------------------------------------------------------------------
   Beoordelingen onder het product
   10 sep 2026

   WooCommerce levert de lijst en het formulier kaal aan; hier krijgen ze de
   huisstijl. We tekenen ze bewust niet zelf na: WooCommerce kent de regel
   "alleen wie het gekocht heeft", de moderatie en de paginering al, en dat
   namaken levert alleen nieuwe fouten op.
   -------------------------------------------------------------------------- */
.xtrona-beoordeling-samenvatting {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.25rem;
}

.xtrona-sterlink {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
}

.xtrona-sterlink:hover .text-foreground-500 {
	color: #EF6528;
}

/* De lijst met geplaatste beoordelingen */
.xtrona-beoordelingen .commentlist {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.xtrona-beoordelingen .commentlist .comment_container {
	display: flex;
	gap: 0.875rem;
	background: #ffffff;
	border: 1px solid oklch(var(--background-200) / 0.6);
	border-radius: 0.875rem;
	padding: 1rem 1.125rem;
}

.xtrona-beoordelingen .commentlist img.avatar {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	flex-shrink: 0;
}

.xtrona-beoordelingen .comment-text {
	flex: 1;
	min-width: 0;
}

.xtrona-beoordelingen .woocommerce-review__author {
	font-weight: 700;
	color: oklch(var(--foreground-900) / 1);
}

.xtrona-beoordelingen .woocommerce-review__published-date {
	color: oklch(var(--foreground-500) / 1);
	font-size: 0.8125rem;
}

/* "Geverifieerde koop" is het hele punt: het zegt dat deze koper echt bestaat. */
.xtrona-beoordelingen .woocommerce-review__verified {
	display: inline-flex;
	align-items: center;
	margin-left: 0.375rem;
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	background: rgba(4, 120, 87, 0.1);
	color: #047857;
	font-size: 0.75rem;
	font-weight: 700;
	font-style: normal;
}

.xtrona-beoordelingen .description {
	margin-top: 0.5rem;
	color: oklch(var(--foreground-700) / 1);
	line-height: 1.6;
}

/* De sterrenrij die WooCommerce zelf tekent, in onze kleur */
.xtrona-beoordelingen .star-rating {
	overflow: hidden;
	position: relative;
	height: 1.1em;
	line-height: 1.1;
	width: 5.4em;
	font-family: star;
	font-size: 0.9rem;
	color: #f5a623;
}

.xtrona-beoordelingen .star-rating::before {
	content: "\73\73\73\73\73";
	color: oklch(var(--background-300) / 1);
	position: absolute;
	top: 0;
	left: 0;
}

.xtrona-beoordelingen .star-rating span {
	overflow: hidden;
	float: left;
	top: 0;
	left: 0;
	position: absolute;
	padding-top: 1.5em;
}

.xtrona-beoordelingen .star-rating span::before {
	content: "\53\53\53\53\53";
	top: 0;
	position: absolute;
	left: 0;
	color: #f5a623;
}

/* Het formulier */
.xtrona-beoordelingen #review_form_wrapper {
	background: oklch(var(--background-100) / 1);
	border: 1px solid oklch(var(--background-200) / 0.6);
	border-radius: 0.875rem;
	padding: 1.125rem 1.25rem;
}

.xtrona-beoordelingen .comment-reply-title {
	font-weight: 700;
	color: oklch(var(--foreground-950) / 1);
	display: block;
	margin-bottom: 0.5rem;
}

.xtrona-beoordelingen .comment-form label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: oklch(var(--foreground-700) / 1);
	margin-bottom: 0.25rem;
}

.xtrona-beoordelingen .comment-form input[type="text"],
.xtrona-beoordelingen .comment-form input[type="email"],
.xtrona-beoordelingen .comment-form textarea {
	width: 100%;
	border: 1px solid oklch(var(--background-300) / 1);
	border-radius: 0.625rem;
	padding: 0.625rem 0.75rem;
	font: inherit;
	background: #ffffff;
	margin-bottom: 0.875rem;
}

.xtrona-beoordelingen .comment-form textarea {
	min-height: 7rem;
	resize: vertical;
}

.xtrona-beoordelingen .comment-form input:focus,
.xtrona-beoordelingen .comment-form textarea:focus {
	outline: none;
	border-color: #EF6528;
	box-shadow: 0 0 0 3px rgba(239, 101, 40, 0.15);
}

.xtrona-beoordelingen .comment-form-rating .stars a {
	color: #f5a623;
}

.xtrona-beoordelingen .comment-form .submit {
	display: inline-flex;
	align-items: center;
	background: #EF6528;
	color: #ffffff;
	font-weight: 700;
	border: 0;
	border-radius: 999px;
	padding: 0.7rem 1.5rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.xtrona-beoordelingen .comment-form .submit:hover {
	background: #E66032;
}

/* De melding "alleen geverifieerde kopers" van WooCommerce zelf */
.xtrona-beoordelingen .woocommerce-verification-required {
	margin: 0;
	color: oklch(var(--foreground-600) / 1);
}

.xtrona-beoordelingen #reply-title small {
	font-weight: 400;
	font-size: 0.875rem;
	margin-left: 0.5rem;
}

/* WooCommerce's eigen kop "Beoordelingen" weg: onze h2 erboven zegt het al.
   Twee koppen boven elkaar, gezien met eigen ogen op 10 sep 2026. */
.xtrona-beoordelingen .woocommerce-Reviews-title {
	display: none;
}

.xtrona-beoordelingen .woocommerce-noreviews {
	margin: 0 0 0.5rem;
	color: oklch(var(--foreground-600) / 1);
}

/* ---------------------------------------------------------------------------
 * De detailweergave van een bestelling
 * ---------------------------------------------------------------------------
 * Yassin, 10 sep 2026, na de eerste keer dat een klant zijn eigen bestelling
 * opende: *"fix de layout!"*. Terecht - dit scherm was het enige stuk van
 * MyXtrona dat nooit door de huisstijl is gehaald. De rest van het portaal
 * draait op `.xtrona-portaal__*`, maar `view-order` gebruikt de standaardopmaak
 * van WooCommerce: koppen zonder ruimte, een tabel zonder rand, adressen zonder
 * kaart, en een blauwe balk van de betaaldienst die nergens bij past.
 *
 * We doen dit met stijl en niet met een eigen sjabloon: de opbouw van
 * WooCommerce is prima, hij was alleen niet aangekleed. Zo blijft er niets te
 * onderhouden als WooCommerce zijn sjabloon ooit aanpast.
 * ------------------------------------------------------------------------- */

/* De regel "Bestelling #271 is geplaatst op ... en is op dit moment Afgerond." */
.woocommerce-MyAccount-content > p:first-of-type {
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid oklch(var(--background-200));
	border-radius: 1rem;
	background: oklch(var(--background-50));
	color: oklch(var(--foreground-700));
}

.woocommerce-MyAccount-content > p:first-of-type mark {
	background: none;
	color: oklch(var(--foreground-950));
	font-weight: 700;
}

/* De koppen "Bestellingsupdates" en "Bestelgegevens" */
.woocommerce-MyAccount-content h2,
.woocommerce-order-details__title,
.woocommerce-column__title {
	margin: 2rem 0 0.75rem;
	font-size: 1.125rem;
	font-weight: 800;
	color: oklch(var(--foreground-950));
}

.woocommerce-MyAccount-content h2:first-child {
	margin-top: 0;
}

/* De lijst met bestellingsupdates */
.woocommerce-OrderUpdates {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.woocommerce-OrderUpdates li {
	margin: 0 0 0.5rem;
	padding: 0.85rem 1.1rem;
	border: 1px solid oklch(var(--background-200));
	border-left: 3px solid oklch(var(--primary-500));
	border-radius: 0.75rem;
	background: #fff;
}

.woocommerce-OrderUpdates .woocommerce-OrderUpdate-meta {
	display: block;
	margin: 0 0 0.15rem;
	color: oklch(var(--foreground-500));
	font-size: 0.8125rem;
}

.woocommerce-OrderUpdates .woocommerce-OrderUpdate-description p:last-child {
	margin-bottom: 0;
}

/* De tabel met producten en totalen */
.woocommerce-table--order-details {
	width: 100%;
	margin: 0 0 1.5rem;
	border: 1px solid oklch(var(--background-200));
	border-radius: 1rem;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
	padding: 0.85rem 1.1rem;
	border-bottom: 1px solid oklch(var(--background-200));
	text-align: left;
	vertical-align: top;
}

.woocommerce-table--order-details thead th {
	background: oklch(var(--background-50));
	font-weight: 800;
	color: oklch(var(--foreground-950));
}

.woocommerce-table--order-details tfoot th {
	font-weight: 700;
	color: oklch(var(--foreground-700));
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td,
.woocommerce-table--order-details tbody tr:last-child td {
	border-bottom: 0;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
	font-size: 1.0625rem;
	font-weight: 800;
	color: oklch(var(--foreground-950));
}

.woocommerce-table--order-details td:last-child,
.woocommerce-table--order-details th:last-child {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Adressen naast elkaar, elk in een kaart */
.woocommerce-customer-details .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin: 0;
}

.woocommerce-customer-details .woocommerce-column {
	margin: 0;
	padding: 1.1rem 1.25rem;
	border: 1px solid oklch(var(--background-200));
	border-radius: 1rem;
	background: #fff;
}

.woocommerce-customer-details .woocommerce-column__title {
	margin: 0 0 0.6rem;
	font-size: 1rem;
}

.woocommerce-customer-details address {
	font-style: normal;
	line-height: 1.7;
	color: oklch(var(--foreground-700));
}

/* De balk van de betaaldienst: dezelfde kaart als de rest, geen blauw kader */
.woocommerce-MyAccount-content .mollie-instructions,
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-message {
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid oklch(var(--background-200));
	border-left: 3px solid oklch(var(--primary-500));
	border-radius: 0.75rem;
	background: oklch(var(--background-50));
	color: oklch(var(--foreground-700));
}

.woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-MyAccount-content .woocommerce-message::before {
	content: none;
}

/* --- correctie op de adressen, 10 sep 2026 ---------------------------------
 * De eerste poging zette een raster op `.woocommerce-columns--addresses`, maar
 * WooCommerce hangt op datzelfde blok ook zijn eigen kolomklassen: `col2-set`
 * met daarin `col-1` en `col-2`, en die dragen een vaste breedte en een float.
 * Gevolg op het scherm van Fatima: twee smalle kolommen tegen de rechterrand,
 * met de straatnaam woord voor woord onder elkaar.
 *
 * Daarom hier de floats uit en de breedte terug naar het raster. En de rand om
 * `address` weg: die kwam van de adreskaartjes elders in het portaal en gaf hier
 * een kader in een kader.
 * ------------------------------------------------------------------------- */

.woocommerce-customer-details .col2-set,
.woocommerce-customer-details .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1rem;
	width: 100%;
	margin: 0;
	float: none;
}

.woocommerce-customer-details .col2-set::before,
.woocommerce-customer-details .col2-set::after {
	content: none;
	display: none;
}

.woocommerce-customer-details .col-1,
.woocommerce-customer-details .col-2,
.woocommerce-customer-details .woocommerce-column {
	width: auto;
	max-width: none;
	float: none;
	margin: 0;
}

.woocommerce-customer-details address {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-style: normal;
	line-height: 1.7;
	color: oklch(var(--foreground-700));
}

.woocommerce-customer-details address p,
.woocommerce-customer-details address .woocommerce-customer-details--phone,
.woocommerce-customer-details address .woocommerce-customer-details--email {
	margin: 0.35rem 0 0;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	word-break: break-word;
}

/* De hele sectie mag de volle breedte, niet meedrijven met een float ernaast. */
.woocommerce-customer-details {
	clear: both;
	width: 100%;
	margin: 1.5rem 0 0;
}

/* De beoordeelknop bij een geleverd artikel, in Mijn aankopen. */
.xtrona-best__artikel {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.xtrona-best__artikelnaam {
	flex: 1 1 12rem;
	min-width: 0;
}

.xtrona-best__beoordeel {
	flex: 0 0 auto;
	padding: 0.3rem 0.85rem;
	border: 1px solid oklch(var(--primary-500));
	border-radius: 999px;
	background: none;
	color: oklch(var(--primary-600));
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}

.xtrona-best__beoordeel:hover,
.xtrona-best__beoordeel:focus-visible {
	background: oklch(var(--primary-500));
	color: #fff;
}

/* =========================================================================
 * Aanbodtegels op de homepage (inc/aanbod-tegels.php)
 * -------------------------------------------------------------------------
 * Yassin, 11 sep 2026: leuke reclametegels met echte productfoto's in plaats
 * van categoriekaarten. De witte achtergrond van de foto's valt weg in de tint
 * door mix-blend-mode: multiply. Eigen klassen, want nieuwe Tailwind-klassen
 * bestaan niet in het gecompileerde bestand.
 * ========================================================================= */
.xtrona-aanbod { --navy: #102249; --navy-2: #2c4a7c; --oranje: #EF6528; --blauw: #dce6fb; --blauw-2: #c6d6f6; --perzik: #fde4d6; --mist: #edf1f8; max-width: 80rem; margin: 0 auto; padding: 1.5rem 1rem 0.5rem; display: grid; gap: 1rem; }
@media (min-width: 768px) { .xtrona-aanbod { padding: 2rem 1.5rem 0.5rem; gap: 1.25rem; } }
@media (min-width: 1024px) { .xtrona-aanbod { padding-left: 2rem; padding-right: 2rem; } }

.xtrona-aanbod a { color: inherit; text-decoration: none; }
.xtrona-aanbod img { mix-blend-mode: multiply; display: block; }
.xtrona-aanbod__kop { font-family: Sora, system-ui, sans-serif; color: var(--navy); margin: 0; line-height: 1.12; letter-spacing: -0.01em; font-weight: 400; text-wrap: balance; }
.xtrona-aanbod__kop strong { font-weight: 800; }

/* De grote banner */
.xtrona-aanbod__banner { position: relative; overflow: hidden; border-radius: 1.25rem; background: var(--blauw); display: grid; grid-template-columns: 1fr; min-height: 16rem; transition: box-shadow .2s; }
.xtrona-aanbod__banner:hover { box-shadow: 0 14px 34px -18px rgba(16,34,73,.45); }
.xtrona-aanbod__banner-tekst { position: relative; z-index: 2; padding: 1.5rem 1.5rem 0; }
.xtrona-aanbod__banner .xtrona-aanbod__kop { font-size: clamp(1.6rem, 3.6vw, 3rem); }
.xtrona-aanbod__banner .xtrona-aanbod__kop span { display: block; font-size: .62em; margin-top: .35rem; color: var(--navy-2); font-weight: 500; }
.xtrona-aanbod__knop { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem; background: var(--oranje); color: #fff !important; font-weight: 700; padding: .8rem 1.4rem; border-radius: 999px; box-shadow: 0 8px 18px -8px rgba(239,101,40,.6); transition: background .2s, transform .2s; }
.xtrona-aanbod__banner:hover .xtrona-aanbod__knop { background: #E66032; transform: translateX(2px); }
.xtrona-aanbod__podium { position: relative; min-height: 13rem; }
.xtrona-aanbod__boog { position: absolute; right: -12%; top: -30%; width: 115%; aspect-ratio: 1; border-radius: 50%; background: var(--blauw-2); }
.xtrona-aanbod__fotos { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 0; padding: 0 .5rem .5rem; }
.xtrona-aanbod__fotos img { width: 27%; max-width: 13rem; height: auto; aspect-ratio: 1; object-fit: contain; margin: 0 -1.5%; transition: transform .3s; }
.xtrona-aanbod__fotos img:nth-child(odd) { transform: translateY(-.75rem); }
.xtrona-aanbod__banner:hover .xtrona-aanbod__fotos img { transform: translateY(-.35rem) scale(1.04); }
.xtrona-aanbod__stip { position: absolute; z-index: 3; display: grid; place-items: center; text-align: center; width: 5.6rem; height: 5.6rem; border-radius: 50%; background: var(--oranje); color: #fff; font-family: Sora, system-ui, sans-serif; font-weight: 800; line-height: 1.02; font-size: 1.05rem; box-shadow: 0 10px 22px -10px rgba(239,101,40,.7); }
.xtrona-aanbod__stip small { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .02em; }
.xtrona-aanbod__stip--1 { right: 1rem; top: .75rem; transform: rotate(-10deg); }
.xtrona-aanbod__stip--2 { display: none; }
@media (min-width: 768px) {
	.xtrona-aanbod__banner { grid-template-columns: 1.05fr 1fr; min-height: 18rem; }
	.xtrona-aanbod__banner-tekst { padding: 2.25rem 2.5rem; align-self: center; }
	.xtrona-aanbod__podium { min-height: 18rem; }
	.xtrona-aanbod__boog { right: -18%; top: -45%; width: 120%; }
	.xtrona-aanbod__stip { width: 6.6rem; height: 6.6rem; font-size: 1.3rem; }
	.xtrona-aanbod__stip small { font-size: .7rem; }
	.xtrona-aanbod__stip--1 { right: auto; left: -1.25rem; top: 1.5rem; }
	.xtrona-aanbod__stip--2 { display: grid; right: 1.25rem; top: 1rem; transform: rotate(12deg); background: var(--navy); }
}

/* De rij hoge tegels */
.xtrona-aanbod__rij6 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 640px) { .xtrona-aanbod__rij6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1024px) { .xtrona-aanbod__rij6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.xtrona-aanbod__tegel { position: relative; overflow: hidden; border-radius: 1rem; background: var(--blauw); display: flex; flex-direction: column; aspect-ratio: 3 / 4; padding: .9rem .9rem 0; transition: transform .2s, box-shadow .2s; }
.xtrona-aanbod__tegel:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(16,34,73,.5); }
.xtrona-aanbod__tegel .xtrona-aanbod__kop { font-size: clamp(1rem, 1.35vw, 1.2rem); }
.xtrona-aanbod__beeld { position: relative; flex: 1; min-height: 0; margin: .5rem -.4rem 0; }
.xtrona-aanbod__beeld img { position: absolute; object-fit: contain; transition: transform .3s; }
.xtrona-aanbod__beeld img:first-child { inset: 0 8% 4% 8%; width: 84%; height: 96%; }
.xtrona-aanbod__beeld img + img { width: 44%; height: 44%; right: -2%; bottom: 2%; }
.xtrona-aanbod__tegel:hover .xtrona-aanbod__beeld img:first-child { transform: scale(1.05); }
.xtrona-aanbod__tegel--perzik { background: var(--perzik); }
.xtrona-aanbod__tegel--mist { background: var(--mist); }
.xtrona-aanbod__tegel--blauw2 { background: var(--blauw-2); }

/* De rij brede tegels */
.xtrona-aanbod__rij4 { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 520px) { .xtrona-aanbod__rij4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1024px) { .xtrona-aanbod__rij4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.xtrona-aanbod__breed { position: relative; overflow: hidden; border-radius: 1rem; background: var(--perzik); min-height: 12.5rem; padding: 1.1rem 1.1rem 1rem; display: flex; flex-direction: column; justify-content: space-between; transition: transform .2s, box-shadow .2s; }
.xtrona-aanbod__breed:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(16,34,73,.5); }
.xtrona-aanbod__breed .xtrona-aanbod__kop { position: relative; z-index: 2; font-size: 1.2rem; max-width: 62%; }
.xtrona-aanbod__breed .xtrona-aanbod__kop span { display: block; font-weight: 400; color: var(--navy-2); font-size: .92em; margin-top: .15rem; }
.xtrona-aanbod__pijl { position: relative; z-index: 2; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--oranje); color: #fff; display: grid; place-items: center; font-size: 1.2rem; transition: transform .2s, background .2s; }
.xtrona-aanbod__breed:hover .xtrona-aanbod__pijl { transform: translateX(3px); background: #E66032; }
.xtrona-aanbod__breed .xtrona-aanbod__beeld { position: absolute; right: 0; bottom: 0; width: 62%; height: 88%; margin: 0; }
.xtrona-aanbod__breed .xtrona-aanbod__beeld img:first-child { inset: auto 2% 2% auto; width: 92%; height: 92%; }
.xtrona-aanbod__breed .xtrona-aanbod__beeld img + img { width: 46%; height: 46%; left: 0; bottom: 4%; right: auto; }
.xtrona-aanbod__breed--blauw { background: var(--blauw); }
.xtrona-aanbod__breed--mist { background: var(--mist); }
.xtrona-aanbod a:focus-visible { outline: 3px solid var(--oranje); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .xtrona-aanbod * { transition: none !important; } }
.xtrona-aanbod__kop, .xtrona-aanbod__banner-tekst, .xtrona-aanbod__podium { display: block; }
.xtrona-aanbod__kop > span { display: block; }
.xtrona-aanbod__beeld { display: block; }
.xtrona-aanbod__pijl i, .xtrona-aanbod__knop i { line-height: 1; }

/* =========================================================================
 * Aanbodtegels V5 - effen kaarten (output/xtrona-cards/xtrona-kleuren.css)
 * -------------------------------------------------------------------------
 * Goedgekeurd door Yassin op 11 sep 2026: "yessss dat is em". Onveranderd
 * overgenomen en bewust NA de basis-CSS van .xtrona-aanbod hierboven gezet.
 * ========================================================================= */
/* Xtrona V5: effen kaarten, uitsluitend een zachte waas achter producten.
   Laden NA de bestaande xtrona-aanbod CSS.
   Gecontroleerde selectors op https://xtrona.com/nl/ (11-09-2026).
   HTML, productbestanden, tekst en productposities blijven behouden.
   Geen bogen, diagonale vlakken of cirkelvormige versieringen. */
.xtrona-aanbod {
  --navy: #102249;
  --navy-2: #DCE4F0;
  --oranje: #EF6528;
  --blauw: #102249;
  --blauw-2: #102249;
  --perzik: #102249;
  --mist: #102249;
}

.xtrona-aanbod .xtrona-aanbod__banner {
  background-color: #102249;
  border-radius: 12px;
}

/* De oude decoratieve boog verdwijnt volledig. */
.xtrona-aanbod .xtrona-aanbod__boog {
  display: none;
}

.xtrona-aanbod .xtrona-aanbod__banner .xtrona-aanbod__kop {
  color: #FFFFFF;
}

.xtrona-aanbod .xtrona-aanbod__banner .xtrona-aanbod__kop > span {
  color: #DCE4F0;
}

/* Effen kleurvlakken zoals het aangeleverde keukenkaartje. */
.xtrona-aanbod .xtrona-aanbod__tegel,
.xtrona-aanbod .xtrona-aanbod__breed {
  --card-bg: #102249;
  --card-text: #FFFFFF;
  --card-muted: #DCE4F0;
  background-color: var(--card-bg);
  background-image: none;
  border-radius: 12px;
}

/* Oranje: Gezelliger, Speelplezier, Fit blijven. */
.xtrona-aanbod .xtrona-aanbod__rij6 > .xtrona-aanbod__tegel:nth-child(2),
.xtrona-aanbod .xtrona-aanbod__rij6 > .xtrona-aanbod__tegel:nth-child(6),
.xtrona-aanbod .xtrona-aanbod__rij4 > .xtrona-aanbod__breed:nth-child(1) {
  --card-bg: #EF6528;
  --card-text: #102249;
  --card-muted: #102249;
}

/* Gebroken wit: Zelf maken, Verzorging, Op pad. */
.xtrona-aanbod .xtrona-aanbod__rij6 > .xtrona-aanbod__tegel:nth-child(3),
.xtrona-aanbod .xtrona-aanbod__rij6 > .xtrona-aanbod__tegel:nth-child(5),
.xtrona-aanbod .xtrona-aanbod__rij4 > .xtrona-aanbod__breed:nth-child(3) {
  --card-bg: #F5F2ED;
  --card-text: #102249;
  --card-muted: #536078;
  background-image: none;
}

/* De originele JPG's blijven ongewijzigd. Een lokale, vervaagde lichte
   ondergrond houdt ze zichtbaar met hun bestaande multiply-mengmodus.
   Dit zijn geen kaartvullende vlakken of vormen met zichtbare contouren. */
.xtrona-aanbod .xtrona-aanbod__beeld::before {
  content: "";
  position: absolute;
  inset: 14% 3% 3% 5%;
  background: #F5F2ED;
  border-radius: 23% 31% 19% 27%;
  filter: blur(15px);
  pointer-events: none;
}

.xtrona-aanbod .xtrona-aanbod__breed .xtrona-aanbod__beeld::before {
  inset: 15% 1% 3% 2%;
  filter: blur(16px);
}

.xtrona-aanbod .xtrona-aanbod__rij6 > .xtrona-aanbod__tegel:nth-child(3) .xtrona-aanbod__beeld::before,
.xtrona-aanbod .xtrona-aanbod__rij6 > .xtrona-aanbod__tegel:nth-child(5) .xtrona-aanbod__beeld::before,
.xtrona-aanbod .xtrona-aanbod__rij4 > .xtrona-aanbod__breed:nth-child(3) .xtrona-aanbod__beeld::before {
  content: none;
}

.xtrona-aanbod .xtrona-aanbod__fotos::before {
  content: "";
  position: absolute;
  inset: 51% 3% 6% 6%;
  background: #F5F2ED;
  border-radius: 15% 23% 20% 12%;
  filter: blur(20px);
  pointer-events: none;
}

.xtrona-aanbod .xtrona-aanbod__fotos img {
  position: relative;
}

.xtrona-aanbod .xtrona-aanbod__tegel .xtrona-aanbod__kop,
.xtrona-aanbod .xtrona-aanbod__breed .xtrona-aanbod__kop {
  color: var(--card-text);
}

.xtrona-aanbod .xtrona-aanbod__breed .xtrona-aanbod__kop > span {
  color: var(--card-muted);
}

/* Zichtbaar contrast op de oranje sportkaart. */
.xtrona-aanbod .xtrona-aanbod__rij4 > .xtrona-aanbod__breed:nth-child(1) .xtrona-aanbod__pijl {
  background-color: #102249;
}

/* Geen cirkelvormige badges, pijlknoppen of pillen. */
.xtrona-aanbod .xtrona-aanbod__stip,
.xtrona-aanbod .xtrona-aanbod__knop,
.xtrona-aanbod .xtrona-aanbod__pijl {
  border-radius: 4px;
}

.xtrona-aanbod .xtrona-aanbod__stip {
  transform: none;
  box-shadow: 0 6px 16px -8px #10224966;
}

.xtrona-aanbod .xtrona-aanbod__stip--2 {
  background-color: #F5F2ED;
  color: #102249;
}

.xtrona-aanbod .xtrona-aanbod__knop {
  box-shadow: none;
}

/* =========================================================================
 * De banner als hero, met de film alleen achter de tekst
 * -------------------------------------------------------------------------
 * Yassin, 11 sep 2026: "ik wil nu deze als hero maar met die video in
 * achtergrond" en "de video alleen in dit gedeelte afspelen de rechts kant
 * blijft hoe het is nu". Rechts (producten met waas op navy) verandert niet.
 * De film loopt aan de rand zacht over in het navy, zonder harde lijn.
 * ========================================================================= */
.xtrona-aanbod--hero { padding-bottom: .25rem; }
.xtrona-aanbod--hero .xtrona-aanbod__banner-tekst { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-bottom: 1.5rem; }
.xtrona-aanbod__filmvak { position: absolute; inset: 0; z-index: -1; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
.xtrona-aanbod__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xtrona-aanbod__filmscherm { position: absolute; inset: 0; background: rgba(16, 34, 73, .72); }
@media (min-width: 768px) {
	.xtrona-aanbod--hero .xtrona-aanbod__banner-tekst { padding-bottom: 2.25rem; }
	.xtrona-aanbod__filmvak { -webkit-mask-image: linear-gradient(to right, #000 70%, transparent 100%); mask-image: linear-gradient(to right, #000 70%, transparent 100%); }
}
@media (prefers-reduced-motion: reduce) { .xtrona-aanbod__film { display: none; } }
/* De knop houdt zijn eigen breedte; in de kolom als flexbox rekte hij anders uit. */
.xtrona-aanbod--hero .xtrona-aanbod__knop { align-self: flex-start; }
/* Navy pijl op de gebroken-witte "Op pad"-tegel. Yassin, 11 sep 2026: "bij deze ook een blauwe pijl". */
.xtrona-aanbod .xtrona-aanbod__rij4 > .xtrona-aanbod__breed:nth-child(3) .xtrona-aanbod__pijl { background-color: #102249; }
/* Gelijke ruimte boven en onder de hero: tussen de kop en de oranje kortingsbalk.
   Yassin, 11 sep 2026: "de hero goed zetten tussen header en banner ook".
   Gemeten voor deze regel: 32 px boven, 4 px onder. */
.xtrona-aanbod.xtrona-aanbod--hero { padding-top: 1rem; padding-bottom: 1rem; }
@media (min-width: 768px) { .xtrona-aanbod.xtrona-aanbod--hero { padding-top: 1.5rem; padding-bottom: 1.5rem; } }
/* Het oranje label draagt nu de voorwaarde ("vanaf 2 artikelen"); iets meer ruimte voor die regel. */
.xtrona-aanbod .xtrona-aanbod__stip--1 small { max-width: 5.6rem; margin: .15rem auto 0; line-height: 1.15; }
/* Rechtsboven in de hero: "Gratis verzending - op elke bestelling". Een liggend label,
   geen vierkant: de tekst is langer dan "2+" en moet op een regel passen. */
.xtrona-aanbod .xtrona-aanbod__stip--verzending { width: auto; height: auto; padding: .8rem 1.1rem; font-size: 1.05rem; line-height: 1.2; text-align: left; place-items: start; }
.xtrona-aanbod .xtrona-aanbod__stip--verzending i { color: #EF6528; font-size: 1.25rem; vertical-align: -3px; margin-right: .2rem; }
.xtrona-aanbod .xtrona-aanbod__stip--verzending small { display: block; margin-top: .2rem; font-size: .75rem; font-weight: 600; color: #536078; letter-spacing: 0; }

/* Audit 11 sep 2026: bij voorraad 1 zet WooCommerce het aantal als verborgen
   veld. Het lege vak hield zijn rand en stond als dun streepje naast de
   koopknop, op desktop en mobiel, bij 505 artikelen. */
.xtrona-cart-form .quantity:has(> input.qty[type="hidden"]) { display: none; }

/* EU-vlag in het label "Europese voorraad" op de productfoto (start CJ, 11 sep 2026). */
.xtrona-badges .xtrona-euvlag { flex-shrink: 0; display: block; }

/* =========================================================================
 * De Halloweenkaart, breed direct onder de hero (inc/aanbod-tegels.php)
 * -------------------------------------------------------------------------
 * Yassin, 11 sep 2026: "ook zo een brede card maken juist onder de hero met
 * de thema halloween eh". Bouw van de brede tegel "Tuin & terras": navy vlak,
 * oranje pijl, producten op een zachte lichte waas. Halloween zit in de kleur:
 * een nachtpaarse hoek en oranje pompoenlicht achter de producten. Geen
 * getekende wezens.
 * ========================================================================= */
.xtrona-aanbod--halloween { padding-top: 0; padding-bottom: .5rem; }
.xtrona-halloween { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr; min-height: 14rem; border-radius: 12px; color: #fff; background-color: #102249; background-image: radial-gradient(90% 120% at 100% 100%, #3a1d5c 0%, rgba(58,29,92,0) 60%), linear-gradient(115deg, #102249 0%, #15193f 55%, #231546 100%); transition: transform .2s, box-shadow .2s; }
.xtrona-halloween:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -18px rgba(16,34,73,.6); }
.xtrona-halloween__gloed { position: absolute; right: 8%; bottom: -30%; width: 55%; aspect-ratio: 2 / 1; border-radius: 50%; background: rgba(239,101,40,.42); filter: blur(60px); pointer-events: none; }
.xtrona-halloween__tekst { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: 1.25rem 1.25rem .5rem; }
.xtrona-halloween .xtrona-aanbod__kop { color: #fff; font-size: clamp(1.5rem, 3vw, 2.4rem); }
.xtrona-halloween .xtrona-aanbod__kop strong { color: #fff; }
.xtrona-halloween .xtrona-aanbod__kop > span { display: block; color: #DCE4F0; font-size: .6em; font-weight: 400; margin-top: .2rem; }
.xtrona-halloween__onder { display: block; color: #EF6528; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.xtrona-halloween .xtrona-aanbod__pijl { margin-top: .6rem; }
.xtrona-halloween:hover .xtrona-aanbod__pijl { transform: translateX(3px); background: #E66032; }
.xtrona-halloween__fotos { position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 0 .75rem .75rem; min-height: 9rem; }
.xtrona-halloween__fotos::before { content: ""; position: absolute; inset: 12% 2% 2% 2%; background: #F5F2ED; border-radius: 30% 24% 20% 28%; filter: blur(18px); pointer-events: none; }
.xtrona-halloween__fotos img { position: relative; width: 30%; max-width: 12rem; height: auto; aspect-ratio: 1; object-fit: contain; margin: 0 -1%; transition: transform .3s; }
.xtrona-halloween__fotos img:nth-child(4) { display: none; }
.xtrona-halloween__fotos img:nth-child(even) { transform: translateY(-.6rem); }
.xtrona-halloween:hover .xtrona-halloween__fotos img { transform: translateY(-.3rem) scale(1.04); }
@media (min-width: 768px) {
	.xtrona-halloween { grid-template-columns: .8fr 1.5fr; min-height: 15rem; }
	.xtrona-halloween__tekst { justify-content: center; padding: 1.75rem 2rem; }
	.xtrona-halloween__fotos { padding: 1rem 1.5rem 1rem 0; }
	.xtrona-halloween__fotos img { width: 24%; }
	.xtrona-halloween__fotos img:nth-child(4) { display: block; }
}
@media (prefers-reduced-motion: reduce) { .xtrona-halloween, .xtrona-halloween * { transition: none !important; } }

/* =========================================================================
 * Eindeloos scrollen (voorbeeld, 13 sep 2026) - inc/eindeloos.php
 * De paginanummers blijven in de broncode voor zoekmachines, maar zijn weg
 * uit beeld zodra het voorbeeld aanstaat.
 * ========================================================================= */
body.xtrona-eindeloos-aan .xtrona-bladeren {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.xtrona-eindeloos { display: block; }
.xtrona-eindeloos__sectie { margin-top: 3rem; }
.xtrona-eindeloos__kop {
	font-family: Sora, system-ui, sans-serif;
	font-weight: 800;
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	line-height: 1.2;
	color: #102249;
	margin: 0 0 1.25rem;
	text-wrap: balance;
}
.xtrona-eindeloos__laden {
	text-align: center;
	color: #536078;
	font-size: 0.9rem;
	padding: 1.5rem 0;
	margin: 0;
}
.xtrona-eindeloos__wachter { height: 1px; }

/* Aantalkiezer weg op de productpagina. Yassin, 13 sep 2026: "wat is dit? zo lelijk
   en past daar niet dat aantal, moet overal weg". Het veld blijft onzichtbaar in het
   formulier (aantal 1), zodat "In winkelmand" en "Nu kopen" gewoon 1 stuk toevoegen;
   een tweede stuk kies je in de winkelmand of aan de kassa. Deze regel wint van de
   oudere opmaak van .xtrona-cart-form .quantity hoger in dit bestand. */
.xtrona-cart-form .quantity { display: none !important; }

/* =========================================================================
 * Hero met Xtorro en Carlos
 * -------------------------------------------------------------------------
 * Yassin, 15 sep 2026: "verander hero en voeg Xtorro en Carlos toe". De
 * illustratie vult de hele banner; links een donker verloop zodat de witte kop
 * leesbaar blijft. Teksten, knop en labels blijven echte HTML. Voorbeeld voor
 * beheerders tot "zet live" (klasse --held staat alleen dan op de banner).
 * ========================================================================= */
.xtrona-aanbod__banner--held { isolation: isolate; background-color: #0c1d3c; }
.xtrona-aanbod__held { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; }
.xtrona-aanbod__held-beeld { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: right center; }
.xtrona-aanbod__banner--held::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(12, 29, 60, .92) 0%, rgba(12, 29, 60, .72) 32%, rgba(12, 29, 60, 0) 54%); }
.xtrona-aanbod__banner--held .xtrona-aanbod__banner-tekst,
.xtrona-aanbod__banner--held .xtrona-aanbod__podium { position: relative; z-index: 2; }
.xtrona-aanbod__banner--held .xtrona-aanbod__fotos,
.xtrona-aanbod__banner--held .xtrona-aanbod__fotos::before { display: none; }
@media (min-width: 768px) {
	.xtrona-aanbod__banner--held { aspect-ratio: 2048 / 683; min-height: 18rem; }
}
@media (max-width: 767px) {
	.xtrona-aanbod__banner--held { aspect-ratio: 960 / 1072; min-height: 0; }
	.xtrona-aanbod__held-beeld { object-position: center bottom; }
	.xtrona-aanbod__banner--held::after { background: linear-gradient(180deg, rgba(12, 29, 60, .92) 0%, rgba(12, 29, 60, .6) 30%, rgba(12, 29, 60, 0) 46%); }
}
/* De film blijft links achter de tekst (Yassin, 15 sep 2026: "laat de video links wel werken").
   Hij loopt naar rechts zacht uit in de illustratie; het donkere verloop is dan niet meer nodig. */
.xtrona-aanbod__banner--held::after { content: none; }
/* De film zit in het tekstvak en blijft daar ACHTER de tekst (z-index -1 binnen dat vak);
   een positieve z-index legde hem over de kop heen. Het tekstvak zelf ligt boven de illustratie. */
.xtrona-aanbod__banner--held .xtrona-aanbod__banner-tekst { isolation: isolate; }
.xtrona-aanbod__banner--held .xtrona-aanbod__filmvak { z-index: -1; }
/* Labels in de hero met Xtorro en Carlos: niet over hun gezichten.
   Het podium wordt statisch, zodat de labels zich op de hele banner zetten. */
.xtrona-aanbod__banner--held .xtrona-aanbod__podium { position: static; min-height: 0; }
.xtrona-aanbod__banner--held .xtrona-aanbod__stip--1 { transform: none; }
@media (min-width: 768px) {
	.xtrona-aanbod__banner--held .xtrona-aanbod__banner-tekst { padding-top: 4.25rem; }
	.xtrona-aanbod__banner--held .xtrona-aanbod__stip--1 { left: 2.5rem; right: auto; top: 1.4rem; width: auto; height: auto; padding: .45rem .8rem; display: flex; align-items: baseline; gap: .5rem; font-size: 1.35rem; }
	.xtrona-aanbod__banner--held .xtrona-aanbod__stip--1 > span { display: flex; align-items: baseline; gap: .5rem; }
	.xtrona-aanbod__banner--held .xtrona-aanbod__stip--1 small { max-width: none; margin: 0; font-size: .8rem; }
	.xtrona-aanbod__banner--held .xtrona-aanbod__stip--2 { right: 1.25rem; top: 1.25rem; left: auto; bottom: auto; }
}
@media (max-width: 767px) {
	.xtrona-aanbod__banner--held .xtrona-aanbod__stip--1 { right: 1rem; left: auto; top: 50%; }
	.xtrona-aanbod__banner--held .xtrona-aanbod__stip--2 { display: none; }
}
/* Mobiel: tekst bovenaan en compact, zodat de film niet over Xtorro en Carlos valt.
   De illustratie staat onderaan; de banner iets hoger zodat de figuren vrij in beeld komen. */
@media (max-width: 767px) {
	.xtrona-aanbod__banner--held { aspect-ratio: 960 / 1180; grid-template-rows: auto 1fr; }
	.xtrona-aanbod__banner--held .xtrona-aanbod__banner-tekst { justify-content: flex-start; padding-top: 1.25rem; padding-bottom: 1rem; }
	.xtrona-aanbod__banner--held .xtrona-aanbod__filmvak { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
	.xtrona-aanbod__banner--held .xtrona-aanbod__held-beeld { object-position: center bottom; }
	.xtrona-aanbod__banner--held .xtrona-aanbod__stip--1 { top: auto; bottom: 1rem; right: 1rem; }
}
/* Mobiel met het desktopbeeld (15 sep 2026): het beeld vult het onderste deel van de banner,
   bijgesneden rond Xtorro, Carlos en het podium; de tekst staat erboven op de film.
   Het -10%-label klein, rechtsboven in het beeldvak, in de lege ruimte naast Carlos. */
@media (max-width: 767px) {
	.xtrona-aanbod__banner--held { aspect-ratio: auto; min-height: 0; grid-template-rows: auto 15.5rem; }
	.xtrona-aanbod__banner--held .xtrona-aanbod__held { top: auto; bottom: 0; height: 15.5rem; }
	.xtrona-aanbod__banner--held .xtrona-aanbod__held-beeld { object-position: 68% bottom; }
	.xtrona-aanbod__banner--held .xtrona-aanbod__podium { position: static; min-height: 0; }
	.xtrona-aanbod__banner--held .xtrona-aanbod__stip--1 { top: auto; bottom: 11.25rem; right: .75rem; left: auto; width: 4.4rem; height: 4.4rem; font-size: .95rem; }
	.xtrona-aanbod__banner--held .xtrona-aanbod__stip--1 small { font-size: .55rem; }
}
/* Zachtere overgang tussen film en illustratie (Yassin, 15 sep 2026: "de overgang").
   De film krijgt het donkerblauw van de illustratie als waas en loopt over een brede zone uit,
   zodat er geen rand zichtbaar is waar hij ophoudt. */
.xtrona-aanbod__banner--held .xtrona-aanbod__filmscherm { background: linear-gradient(90deg, rgba(12, 29, 60, .78) 0%, rgba(14, 36, 82, .82) 100%); }
@media (min-width: 768px) {
	.xtrona-aanbod__banner--held .xtrona-aanbod__filmvak { -webkit-mask-image: linear-gradient(to right, #000 0%, #000 38%, rgba(0,0,0,.55) 62%, transparent 100%); mask-image: linear-gradient(to right, #000 0%, #000 38%, rgba(0,0,0,.55) 62%, transparent 100%); }
}
@media (max-width: 767px) {
	.xtrona-aanbod__banner--held .xtrona-aanbod__filmvak { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, rgba(0,0,0,.5) 75%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 45%, rgba(0,0,0,.5) 75%, transparent 100%); }
}
/* Mobiel: geen harde horizontale lijn meer tussen film en illustratie (Yassin, 15 sep 2026: "NEEE").
   Het beeld wordt hoger en zijn bovenkant vervaagt zacht in de achtergrond, die dezelfde blauwe tint krijgt. */
@media (max-width: 767px) {
	.xtrona-aanbod__banner--held { background-color: #0f2553; grid-template-rows: auto 15.5rem; }
	.xtrona-aanbod__banner--held .xtrona-aanbod__held { height: 20rem; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 14%, #000 34%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 14%, #000 34%); }
	.xtrona-aanbod__banner--held .xtrona-aanbod__filmscherm { background: linear-gradient(180deg, rgba(12, 29, 60, .78) 0%, rgba(15, 37, 83, .86) 100%); }
	.xtrona-aanbod__banner--held .xtrona-aanbod__filmvak { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0,0,0,.45) 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0,0,0,.45) 72%, transparent 100%); }
}
/* Zonder film (Yassin, 15 sep 2026: "oke haal de video dan weg"): de illustratie is de hele achtergrond.
   Een rustig donker verloop links (desktop) of boven (mobiel) houdt de witte tekst leesbaar. */
.xtrona-aanbod__banner--held::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(10, 24, 54, .55) 0%, rgba(10, 24, 54, .3) 30%, rgba(10, 24, 54, 0) 50%); }
@media (max-width: 767px) {
	.xtrona-aanbod__banner--held::after { background: linear-gradient(180deg, rgba(10, 24, 54, .35) 0%, rgba(10, 24, 54, 0) 40%); }
}
/* Mobiel zonder film: beide figuren volledig in beeld en het label niet over een gezicht.
   Lager beeldvak = breder zichtbaar deel van de illustratie; label rechts naast de knop. */
@media (max-width: 767px) {
	.xtrona-aanbod__banner--held { grid-template-rows: auto 15rem; }
	.xtrona-aanbod__banner--held .xtrona-aanbod__held { height: 15.5rem; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%); mask-image: linear-gradient(to bottom, transparent 0%, #000 16%); }
	.xtrona-aanbod__banner--held .xtrona-aanbod__held-beeld { object-position: 69% bottom; }
	.xtrona-aanbod__banner--held .xtrona-aanbod__stip--1 { top: auto; bottom: 16rem; right: .9rem; left: auto; width: 4.2rem; height: 4.2rem; }
}
/* Heel smalle schermen: het label botste met de knop (gemeten op 360 px). De korting staat
   al voluit in de ondertitel, dus het label valt daar weg. */
@media (max-width: 379px) {
	.xtrona-aanbod__banner--held .xtrona-aanbod__stip--1 { display: none; }
}