/**
 * WOUTR Starter — component layer.
 *
 * theme.json covers colour, spacing, type and layout, so this file only carries
 * the treatments a token cannot express: paired hover states, card behaviour,
 * pill shapes and the composite widgets (search bar, collage, FAQ, shop).
 *
 * Every value resolves to a Core Framework variable. Nothing is hardcoded, so
 * re-saving the preset re-skins all of it.
 *
 * How a child theme re-skins this
 * -------------------------------
 * Where a brand is likely to want its own answer, the rule reads a local custom
 * property with a sensible default rather than a token directly:
 *
 *     .is-style-btn-primary { --woutr-btn-bg: var(--primary); … }
 *
 * A child adds its own brand-named variant by setting those four properties in
 * one short block; it never repeats the rule bodies below. The switches are:
 *
 *     --woutr-btn-bg / -hover / --woutr-btn-fg / --woutr-btn-border   buttons
 *     --woutr-band-ink / -lead / -body                                bands
 *     --woutr-hero-wash                                               hero
 *     --woutr-logo-1 / --woutr-logo-2                                 logo lockup
 *     --woutr-footer-bg / --woutr-footer-link                         footer
 *     --woutr-accent                                                  badges, stars
 */

/* ── Basis ──────────────────────────────────────────────────────────────── */

:root {
	/* The accent is the "attention" colour: sale badges, ratings, price drops.
	   It defaults to the preset's warning colour, which is the one hue every
	   preset already has for exactly this job. */
	--woutr-accent: var(--warning);

	--woutr-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img {
	max-width: 100%;
	height: auto;
}

p {
	text-wrap: pretty;
}

:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

.woutr-icon {
	display: block;
	flex: none;
}

/* Visible focus that follows the brand rather than the browser default. */
:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--secondary);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* ── Knoppen ────────────────────────────────────────────────────────────── */

.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	white-space: nowrap;
	border: 2px solid transparent;
	transition:
		transform var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}

.wp-block-button .wp-block-button__link:active {
	transform: translateY(1px);
}

/* One rule body for every button variant. A variant only sets the switches. */
.wp-block-button[class*="is-style-btn-"] .wp-block-button__link {
	background-color: var(--woutr-btn-bg);
	color: var(--woutr-btn-fg);
	border-color: var(--woutr-btn-border, transparent);
}

.wp-block-button[class*="is-style-btn-"] .wp-block-button__link:hover {
	background-color: var(--woutr-btn-bg-hover, var(--woutr-btn-bg));
	color: var(--woutr-btn-fg-hover, var(--woutr-btn-fg));
	border-color: var(--woutr-btn-border-hover, var(--woutr-btn-border, transparent));
	box-shadow: var(--woutr-btn-shadow, var(--shadow-sm));
}

.wp-block-button.is-style-btn-primary {
	--woutr-btn-bg: var(--primary);
	--woutr-btn-bg-hover: var(--primary-d-1);
	--woutr-btn-fg: var(--light);
}

.wp-block-button.is-style-btn-secondary {
	--woutr-btn-bg: var(--secondary);
	--woutr-btn-bg-hover: var(--secondary-d-1);
	--woutr-btn-fg: var(--light);
}

.wp-block-button.is-style-btn-tertiary {
	--woutr-btn-bg: var(--tertiary);
	--woutr-btn-bg-hover: var(--tertiary-d-1);
	--woutr-btn-fg: var(--primary);
	--woutr-btn-fg-hover: var(--light);
}

.wp-block-button.is-style-btn-ghost {
	--woutr-btn-bg: transparent;
	--woutr-btn-bg-hover: transparent;
	--woutr-btn-fg: var(--primary);
	--woutr-btn-border: var(--border-strong);
	--woutr-btn-border-hover: var(--primary);
	--woutr-btn-shadow: none;
}

/* ── Kaarten ────────────────────────────────────────────────────────────── */

.wp-block-group.is-style-card,
.wp-block-group.is-style-link-card {
	background-color: var(--bg-surface);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xs);
	overflow: hidden;
	transition:
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out);
}

.wp-block-group.is-style-card:hover,
.wp-block-group.is-style-link-card:hover,
.wp-block-group.is-style-link-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: var(--border-strong);
}

/* A whole card acting as one link: the anchor covers the card, but the text
   inside stays selectable and every child keeps its own stacking context. */
.wp-block-group.is-style-link-card {
	position: relative;
}

.wp-block-group.is-style-link-card .woutr-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.wp-block-group.is-style-link-card .woutr-card-link {
	color: var(--secondary);
	font-family: var(--font-display);
	font-weight: 700;
	display: inline-flex;
	gap: var(--space-2);
	align-items: center;
}

/* Columns marked as a card row keep equal-height children. */
.wp-block-columns.is-style-cards > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.wp-block-columns.is-style-cards > .wp-block-column > .wp-block-group {
	flex: 1;
}

/* ── Gekleurde band ─────────────────────────────────────────────────────── */

.wp-block-group.is-style-band {
	border-radius: var(--radius-xl);
	overflow: hidden;
}

/* On a saturated band the type flips to light. A band only says *which* of its
   backgrounds count as saturated by setting the three switches; the rules that
   do the flipping live here once. */
.wp-block-group.is-style-band.has-primary-background-color,
.wp-block-group.is-style-band.has-primary-dark-background-color,
.wp-block-group.is-style-band.has-secondary-background-color,
.wp-block-group.is-style-band.has-brand-gradient-background {
	--woutr-band-ink: var(--light);
	--woutr-band-lead: var(--light-90);
	--woutr-band-body: var(--light-80);
}

.wp-block-group.is-style-band {
	color: var(--woutr-band-ink, inherit);
}

.wp-block-group.is-style-band :where(h1, h2, h3, h4, h5, h6) {
	color: var(--woutr-band-ink, var(--text-title));
}

.wp-block-group.is-style-band .is-style-lead {
	color: var(--woutr-band-lead, var(--text-soft));
}

.wp-block-group.is-style-band .is-style-meta {
	color: var(--woutr-band-body, var(--text-mute));
}

.wp-block-group.is-style-band p:not([class*="has-"]) {
	color: var(--woutr-band-body, inherit);
}

/* ── Icoonvlak ──────────────────────────────────────────────────────────── */

/* Fixed-size things inside a constrained group.
   WordPress centres every child of a constrained layout with
   `margin-left:auto!important`, which silently centres anything narrower than
   the container. These are meant to sit hard left, and only an !important can
   answer an !important.

   The `.is-layout-constrained >` prefix is WordPress's own selector, repeated
   here so this fires exactly where that centring happens and nowhere else.
   Unscoped, the auto margin followed a tile into the hero collage's grid — and
   an auto margin makes a grid item ignore `justify-self: stretch`, so every
   tile shrank to the width of its own label and hugged the left of its cell. */
.is-layout-constrained > .wp-block-group.is-style-icon-tile,
.is-layout-constrained > .woutr-step-number,
.is-layout-constrained > .wp-block-group.is-style-photo,
.is-layout-constrained > .woutr-tile {
	margin-inline: 0 auto !important;
}

.wp-block-group.is-style-icon-tile {
	width: 54px;
	height: 54px;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

/* ── Fotovlak ───────────────────────────────────────────────────────────── */

.wp-block-group.is-style-photo,
.woutr-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	border-radius: var(--radius-lg);
	min-height: 200px;
	padding: var(--space-3);
	color: var(--light);
}

/* No colour picked and no photo yet: a warm neutral rather than nothing. */
.woutr-tile:not(.has-background) {
	background-color: var(--bg-cream-2);
	color: var(--text-soft);
}

/* The icon is centred by absolute positioning rather than by the flex box, so
   it stays dead centre no matter what the block layout adds around its
   siblings. */
.wp-block-group.is-style-photo .woutr-icon,
.woutr-tile .woutr-icon {
	position: absolute;
	inset: 0;
	margin: auto;
	opacity: 0.9;
}

/* A real photo fills the tile. */
.woutr-tile > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Placeholder caption naming the photo that belongs here. Delete the label once
   a real image goes in. */
.wp-block-group.is-style-photo .woutr-photo-label,
.woutr-tile .woutr-photo-label {
	position: relative;
	margin: 0;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dark-50);
}

/* ── Stappen ────────────────────────────────────────────────────────────── */

.wp-block-group.is-style-step > .woutr-step-number,
.woutr-step-number {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--text-2xl);
	color: var(--tertiary-d-1);
	background-color: var(--tertiary-l-2);
	width: 64px;
	height: 64px;
	border-radius: var(--radius-pill);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* ── Tekststijlen ───────────────────────────────────────────────────────── */

.is-style-eyebrow {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-sm);
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	color: var(--secondary);
}

.is-style-lead {
	font-size: var(--text-md);
	line-height: var(--lh-relaxed);
	color: var(--text-soft);
}

.is-style-meta {
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-mute);
	font-weight: 600;
}

.is-style-price {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--primary);
}

.is-style-stars {
	color: var(--woutr-accent);
	letter-spacing: 2px;
}

p.is-style-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-sm);
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	width: fit-content;
	margin: 0;
}

/* Untouched by the colour picker, a chip falls back to the warm neutral. */
p.is-style-chip:not([class*="background-color"]) {
	background-color: var(--bg-cream-2);
	color: var(--primary);
}

.is-style-section-title {
	margin-top: var(--space-2);
}

/* ── Pluspunten-lijst ───────────────────────────────────────────────────── */

ul.is-style-usp {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
}

ul.is-style-usp li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-sm);
	color: var(--primary);
}

ul.is-style-usp li::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background-color: var(--secondary);
	-webkit-mask: var(--woutr-check) center / contain no-repeat;
	mask: var(--woutr-check) center / contain no-repeat;
}

/* ── Logo-lockup ────────────────────────────────────────────────────────── */

/* A two-tone wordmark for sites without an image logo. The two halves take
   their colour from switches so a child sets the brand pairing in two lines. */
.woutr-logo {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--text-xl);
	line-height: 1;
	letter-spacing: -0.01em;
	display: inline-flex;
	gap: 0.28em;
	align-items: baseline;
	user-select: none;
}

.woutr-logo .l1 {
	color: var(--woutr-logo-1, var(--secondary));
}

.woutr-logo .l2 {
	color: var(--woutr-logo-2, var(--primary));
}

.woutr-footer .woutr-logo .l2 {
	color: var(--woutr-logo-2-inverted, var(--light));
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.woutr-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: transparent;
	border-bottom: 1px solid var(--border-primary);
	min-height: var(--header-height);
}

/* The frosted background sits on a pseudo-element, not on the header itself,
   and that is not a detail.

   `backdrop-filter` makes an element a containing block for every descendant
   with `position: fixed` — the property turns "fixed to the viewport" into
   "fixed to this box". Two things inside the header rely on being fixed to the
   viewport: the navigation's overlay menu and WooCommerce's mini-cart drawer.
   With the filter on the header, both were laid out inside a 72px-tall bar
   instead of over the page, and scrolled inside that strip.

   On a pseudo-element the effect looks identical and traps nothing, because
   the overlay is not a descendant of ::before. z-index: -1 keeps it behind the
   logo and the navigation, and the header's own stacking context (sticky plus
   z-index) keeps that -1 from falling behind the page. */
.woutr-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--light-90);
	backdrop-filter: saturate(1.4) blur(6px);
}

.woutr-header .wp-block-navigation {
	font-size: var(--nav-link-size);
}

.woutr-header .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--text-body);
}

.woutr-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--secondary);
}

.woutr-header .wp-block-navigation .wp-block-button__link {
	color: var(--light);
}

.woutr-header.is-scrolled {
	box-shadow: var(--shadow-sm);
}

/* The bar stays one row at every width. With wrapping, a phone pushes the
   controls onto a second line and a sticky header quietly eats a third of the
   viewport. Nothing here may wrap; what does not fit belongs in the overlay. */
.woutr-header__bar,
.woutr-header__controls {
	flex-wrap: nowrap;
}

/* The logo keeps its size; the controls give way first. */
.woutr-header__brand,
.woutr-header .woutr-logo {
	flex: none;
}

/* On mobile the navigation is a single hamburger, and it goes last so it sits
   hard right where a thumb expects it — after the cart and account icons. */
.woutr-header__controls > .wp-block-navigation {
	order: 2;
}

/* The call to action appears twice in the markup, and exactly one copy is ever
   shown.

   It cannot be one element. On a phone it has to sit *inside* the navigation
   block, because that is the only thing that collapses into the full-screen
   overlay — and it cannot stay in the bar, where the logo, the icons and the
   hamburger already use every pixel of a 360px screen. On a desktop it has to
   sit *after* the icons, which is outside the navigation block. No single
   element is in both places, so the pattern emits two and hides one.

   Both come out of one closure in the pattern, so the link and the label cannot
   drift apart, and display:none keeps the hidden one out of the accessibility
   tree — a screen reader and a tab key each meet the button once. */
.woutr-header .woutr-bar-cta {
	display: none;
}

/* From the width where the menu unfolds, the bar reads left to right: logo,
   menu items, then the icons and the call to action on the right. The
   navigation stretches across the free space in between, which is what pushes
   everything after it against the right edge. */
@media (min-width: 600px) {
	.woutr-header__controls {
		flex: 1;
	}

	.woutr-header__controls > .wp-block-navigation {
		order: 0;
		flex: 1;
	}

	.woutr-header .wp-block-navigation__responsive-container-content {
		width: 100%;
	}

	.woutr-header .woutr-nav-cta {
		display: none;
	}

	.woutr-header .woutr-bar-cta {
		display: flex;
	}
}

/* Anything you tap in the bar is at least 44px, the size a fingertip needs.
   The icons themselves stay 24px; the padding does the work. */
.woutr-header .wp-block-navigation__responsive-container-open,
.woutr-header .wp-block-navigation__responsive-container-close,
.woutr-header .wc-block-mini-cart__button,
.woutr-header .wc-block-customer-account__link {
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: var(--space-2);
	border-radius: var(--radius-md);
}

/* `display` deliberately omitted above, and set here on everything except the
   hamburger. Core hides that button above 600px with

       .wp-block-navigation__responsive-container-open:not(.always-shown)

   which is two classes — exactly as specific as `.woutr-header .…-open`. A
   theme stylesheet loads after core, so a `display` here would win the tie and
   leave the hamburger sitting next to the desktop menu. Core already gives the
   button `display: flex` for the widths where it belongs. */
.woutr-header .wp-block-navigation__responsive-container-close,
.woutr-header .wc-block-mini-cart__button,
.woutr-header .wc-block-customer-account__link {
	display: inline-flex;
}

/* ── Overlay-menu ───────────────────────────────────────────────────────── */

/* Below 600px the navigation becomes a full-screen dialog. Core handles the
   mechanics — focus trap, scroll lock, escape to close — so this is only the
   part core cannot know: that a menu filling a phone screen wants display type
   and room to breathe, not the 16px of a desktop menu bar. */
.woutr-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--space-6);
}

.woutr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--space-4);
	width: 100%;
}

/* Core hands the desktop justification (right) to the overlay as well, which
   pins a full-screen menu against the right edge. Read it back to the left. */
.woutr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.woutr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.woutr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
}

.woutr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-2xl);
	padding-block: var(--space-2);
}

/* The call to action rides along into the overlay, where it gets the width a
   primary action deserves rather than the size it had in the bar. */
.woutr-header .wp-block-navigation__responsive-container.is-menu-open .woutr-nav-cta {
	width: 100%;
	margin-top: var(--space-6);
}

.woutr-header .wp-block-navigation__responsive-container.is-menu-open .woutr-nav-cta .wp-block-button,
.woutr-header .wp-block-navigation__responsive-container.is-menu-open .woutr-nav-cta .wp-block-button__link {
	width: 100%;
}

.woutr-header .wp-block-navigation__responsive-container.is-menu-open .woutr-nav-cta .wp-block-button__link {
	justify-content: center;
	font-size: var(--text-md);
	padding: var(--space-4) var(--space-6);
	white-space: normal;
}

@media (max-width: 599px) {
	/* Tighter gaps so logo, cart and hamburger fit a 360px screen without the
	   logo having to shrink. */
	.woutr-header .woutr-header__bar,
	.woutr-header .woutr-header__controls {
		gap: var(--space-3);
	}
}

/* ── Zoekbalk ───────────────────────────────────────────────────────────── */

.woutr-search .wp-block-search__inside-wrapper {
	background-color: var(--bg-surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-pill);
	padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
	box-shadow: var(--shadow-sm);
	max-width: 440px;
	gap: var(--space-2);
}

.woutr-search .wp-block-search__input {
	border: 0;
	outline: 0;
	background: transparent;
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--text-body);
	padding: 0;
}

.woutr-search .wp-block-search__input::placeholder {
	color: var(--text-mute);
}

.woutr-search .wp-block-search__button {
	background-color: var(--primary);
	color: var(--light);
	border: 0;
	border-radius: var(--radius-pill);
	font-family: var(--font-display);
	font-weight: 700;
	padding: var(--space-3) var(--space-6);
	margin: 0;
	transition: background-color var(--dur-fast) var(--ease-out);
}

.woutr-search .wp-block-search__button:hover {
	background-color: var(--primary-d-1);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

/* The wash is a child-theme decision: a brand with a second and third accent
   paints a gradient here, one without simply keeps the warm ground. */
.woutr-hero {
	background-color: var(--bg-cream);
	background-image: var(--woutr-hero-wash, none);
}

/* Collage: one tall tile beside two stacked ones. */
.woutr-collage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 160px 160px;
	gap: var(--space-3);
}

/* The grid rows set the height here, so a tile's own min-height stands down,
   and the gap does the spacing rather than any margin the block layout adds. */
.woutr-collage > * {
	margin: 0;
	min-height: 0;
}

.woutr-collage > .woutr-collage-tall {
	grid-row: span 2;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.woutr-footer {
	background-color: var(--woutr-footer-bg, var(--primary));
	color: var(--light);
}

.woutr-footer :where(h1, h2, h3, h4, h5, h6) {
	color: var(--light);
}

.woutr-footer a {
	color: var(--woutr-footer-link, var(--tertiary));
}

.woutr-footer a:hover {
	color: var(--light);
}

.woutr-footer .is-style-meta,
.woutr-footer .woutr-muted {
	color: var(--light-70);
}

.woutr-footer .wp-block-separator {
	border-color: var(--light-20);
	color: var(--light-20);
	opacity: 1;
}

/* ── Blokken met een eigen vlak ─────────────────────────────────────────── */

/* Used on the single product page for the delivery promises. A class rather
   than a palette colour, so the starter's markup does not depend on a child's
   palette slugs. */
.woutr-product-usp {
	background-color: var(--bg-cream);
}

/* ── Responsief ─────────────────────────────────────────────────────────── */

@media (max-width: 781px) {
	.woutr-collage {
		grid-template-rows: 140px 140px;
	}

	.woutr-search .wp-block-search__inside-wrapper {
		max-width: none;
	}

	.wp-block-group.is-style-band {
		border-radius: var(--radius-lg);
	}
}

/* ── Editor ─────────────────────────────────────────────────────────────── */

/* Cards should not jump around while they are being edited. */
.editor-styles-wrapper .wp-block-group.is-style-card:hover,
.editor-styles-wrapper .wp-block-group.is-style-link-card:hover {
	transform: none;
}

.editor-styles-wrapper .woutr-header {
	position: static;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WooCommerce
   The shop runs on WooCommerce's own blocks. This layer pulls them into the
   theme's vormgeving — same pill buttons, same cards, same headings — again
   entirely through Core Framework variables.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Productraster ──────────────────────────────────────────────────────── */

.wc-block-product-template {
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--space-5);
}

.wc-block-product-template .wc-block-product {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.wc-block-product-template .wc-block-product > .wp-block-group.is-style-card {
	flex: 1;
	height: 100%;
}

/* Woo's own card chrome would fight the theme's card. */
.wc-block-product-template .wc-block-product::before,
.wc-block-product-template .wc-block-product::after {
	content: none;
}

/* ── Productafbeelding in de kaart ──────────────────────────────────────── */

.wc-block-components-product-image {
	margin: 0;
	position: relative;
}

.wc-block-components-product-image a,
.wc-block-components-product-image img {
	display: block;
	width: 100%;
	border-radius: 0;
}

/* Placeholder for products without a photo yet. */
.wc-block-components-product-image img[src*="woocommerce-placeholder"] {
	background-color: var(--bg-cream-2);
}

/* ── Aanbiedingslabel ───────────────────────────────────────────────────── */

.wc-block-components-product-sale-badge {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: var(--radius-pill);
	background-color: var(--woutr-accent);
	color: var(--light);
	border: 0;
	box-shadow: var(--shadow-sm);
}

.wc-block-components-product-image .wc-block-components-product-sale-badge {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 1;
}

/* ── Prijs ──────────────────────────────────────────────────────────────── */

.wc-block-components-product-price {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--primary);
}

.wc-block-components-product-price__regular,
.wc-block-components-product-price del {
	color: var(--text-mute);
	font-weight: 600;
	margin-right: var(--space-2);
}

.wc-block-components-product-price__value.is-discounted,
.wc-block-components-product-price ins {
	color: var(--secondary);
	text-decoration: none;
}

/* ── In winkelwagen-knop (raster) ───────────────────────────────────────── */

.wc-block-components-product-button .wp-block-button__link,
.wc-block-components-product-button .wc-block-components-product-button__button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-sm);
	padding: var(--space-2) var(--space-5);
	border-radius: var(--radius-pill);
	border: 2px solid transparent;
	background-color: var(--secondary);
	color: var(--light);
	white-space: nowrap;
	transition:
		background-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}

.wc-block-components-product-button .wp-block-button__link:hover,
.wc-block-components-product-button .wc-block-components-product-button__button:hover {
	background-color: var(--secondary-d-1);
	box-shadow: var(--shadow-sm);
	color: var(--light);
}

/* ── Beoordelingen ──────────────────────────────────────────────────────── */

.wc-block-components-product-rating,
.wc-block-grid__product-rating,
.star-rating,
.woocommerce .star-rating span::before,
.wc-block-components-product-rating__stars > span,
.star-rating > span {
	color: var(--woutr-accent);
}

/* ── Kruimelpad, sortering, aantallen ───────────────────────────────────── */

.wc-block-breadcrumbs,
.woocommerce-breadcrumb {
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-mute);
	font-weight: 600;
}

.wc-block-breadcrumbs a,
.woocommerce-breadcrumb a {
	color: var(--text-soft);
}

.wc-block-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover {
	color: var(--secondary);
}

.wc-block-catalog-sorting select,
.woocommerce-ordering select,
.wc-block-components-sort-select__select {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--text-body);
	background-color: var(--bg-surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-pill);
	padding: var(--space-2) var(--space-5);
}

/* ── Productdetail ──────────────────────────────────────────────────────── */

.wc-block-components-product-image-gallery img,
.woocommerce-product-gallery img {
	border-radius: var(--radius-lg);
}

.woocommerce-product-gallery .flex-control-thumbs img {
	border-radius: var(--radius-sm);
}

/* Quantity stepper + add to cart on the product page. */
.woutr-quantity,
form.cart .quantity input.qty,
.wc-block-components-quantity-selector input {
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--text-body);
	background-color: var(--bg-surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-pill);
	padding: var(--space-3) var(--space-4);
	text-align: center;
	min-width: 5rem;
}

form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
}

form.cart .variations,
form.cart .woocommerce-variation-add-to-cart {
	flex-basis: 100%;
}

form.cart table.variations th,
form.cart table.variations td {
	padding: var(--space-2) 0;
	text-align: left;
}

form.cart table.variations select {
	font-family: var(--font-body);
	background-color: var(--bg-surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-pill);
	padding: var(--space-3) var(--space-5);
	min-width: 12rem;
}

/* ── Woo-knoppen overal (klassiek en blok) ──────────────────────────────── */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button:not(.is-link) {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-base);
	line-height: 1.2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-pill);
	border: 2px solid transparent;
	background-color: var(--secondary);
	color: var(--light);
	text-decoration: none;
	transition:
		background-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:not(.is-link):hover {
	background-color: var(--secondary-d-1);
	color: var(--light);
	box-shadow: var(--shadow-sm);
}

/* The primary action on a page — add to cart, checkout — carries the primary. */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce .single_add_to_cart_button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background-color: var(--primary);
	color: var(--light);
	font-size: var(--text-md);
	padding: var(--space-4) var(--space-8);
}

.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--primary-d-1);
	color: var(--light);
}

.wc-block-components-button.is-link {
	color: var(--secondary);
	font-family: var(--font-display);
	font-weight: 600;
}

/* ── Formuliervelden (winkelwagen, afrekenen, account) ──────────────────── */

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-block-components-combobox-control input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--text-body);
	background-color: var(--bg-surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
}

.wc-block-components-text-input input:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	border-color: var(--secondary);
	outline: 2px solid var(--secondary-10);
	outline-offset: 0;
}

.wc-block-components-title,
.wc-block-cart__sidebar .wc-block-components-title,
.wc-block-components-checkout-step__title {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--text-title);
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--font-display);
	font-weight: 600;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--primary);
	font-family: var(--font-display);
	font-weight: 700;
}

.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar {
	background-color: var(--bg-cream);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}

/* ── Meldingen ──────────────────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	border-left-width: 4px;
}

.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	background-color: var(--success-10);
	border-left-color: var(--success);
}

.woocommerce-info,
.wc-block-components-notice-banner.is-info {
	background-color: var(--tertiary-l-3);
	border-left-color: var(--tertiary-d-1);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	background-color: var(--error-10);
	border-left-color: var(--error);
}

/* ── Producttabs ────────────────────────────────────────────────────────── */

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0 0 var(--space-8);
	padding: 0 0 var(--space-3);
	border-bottom: 1px solid var(--border-primary);
}

.woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-base);
	padding: var(--space-2) var(--space-5);
	border-radius: var(--radius-pill);
	color: var(--text-soft);
}

.woocommerce-tabs ul.tabs li.active a {
	background-color: var(--bg-cream-2);
	color: var(--primary);
}

/* ── Winkelwagen-teller in de koptekst ──────────────────────────────────── */

.woutr-header .wc-block-mini-cart__button {
	color: var(--text-body);
	padding: var(--space-2);
}

.woutr-header .wc-block-mini-cart__badge {
	background-color: var(--secondary);
	color: var(--light);
	font-family: var(--font-display);
	font-weight: 700;
}

/* ── Veelgestelde vragen ────────────────────────────────────────────────── */

/* Built on the core Details block, so it works without any JavaScript and
   stays keyboard-operable and findable by in-page search. */
.woutr-faq .wp-block-details {
	background-color: var(--bg-surface);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-5);
	transition: border-color var(--dur-base) var(--ease-out);
}

.woutr-faq .wp-block-details[open] {
	border-color: var(--border-strong);
	box-shadow: var(--shadow-xs);
}

.woutr-faq .wp-block-details summary {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-md);
	color: var(--text-title);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.woutr-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

/* A plus that becomes a minus, drawn from gradients so it needs no asset. */
.woutr-faq .wp-block-details summary::after {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	position: relative;
	background:
		linear-gradient(var(--secondary), var(--secondary)) center / 100% 2px no-repeat,
		linear-gradient(var(--secondary), var(--secondary)) center / 2px 100% no-repeat;
	transition: transform var(--dur-base) var(--ease-out);
}

.woutr-faq .wp-block-details[open] summary::after {
	background: linear-gradient(var(--secondary), var(--secondary)) center / 100% 2px no-repeat;
	transform: rotate(180deg);
}

.woutr-faq .wp-block-details > :not(summary) {
	margin-top: var(--space-3);
}

/* ── Reviews ────────────────────────────────────────────────────────────── */

/* De kaarten komen uit het blok woutr/reviews van de plugin, dus het raster
   staat hier en niet in een blok-layout. Kleur regelt de band eromheen: de
   koppen en de tekst pakken --woutr-band-ink en --woutr-band-body op. */
.woutr-reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--space-8);
}

.woutr-review {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.woutr-review__title {
	margin: 0;
	font-size: var(--text-md);
}

.woutr-review__text {
	margin: 0;
}

/* Het streepje hoort bij de opmaak, niet bij de gegevens: onder Reviews staat
   "Sanne, sportvereniging" en niet "— Sanne, sportvereniging". */
.woutr-review__author {
	margin-top: var(--space-3);
}

.woutr-review__author::before {
	content: "— ";
}

/* ── Formulieren ────────────────────────────────────────────────────────── */

.woutr-form {
	max-width: 40rem;
}

.woutr-form__form {
	display: grid;
	gap: var(--space-5);
}

.woutr-form__field {
	display: grid;
	gap: var(--space-2);
	margin: 0;
}

.woutr-form__field label {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-sm);
	color: var(--text-title);
}

.woutr-form__optional {
	font-weight: 400;
	color: var(--text-mute);
}

.woutr-form input[type="text"],
.woutr-form input[type="email"],
.woutr-form textarea {
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--text-body);
	background-color: var(--bg-surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	width: 100%;
	transition: border-color var(--dur-fast) var(--ease-out);
}

.woutr-form textarea {
	resize: vertical;
	line-height: var(--lh-normal);
}

.woutr-form input:focus,
.woutr-form textarea:focus {
	border-color: var(--secondary);
	outline: 2px solid var(--secondary-10);
	outline-offset: 0;
}

.woutr-form__field--fout input,
.woutr-form__field--fout textarea {
	border-color: var(--error);
}

.woutr-form__error {
	color: var(--error);
	font-size: var(--text-sm);
}

.woutr-form__notice {
	border-radius: var(--radius-md);
	border-left: 4px solid;
	padding: var(--space-4) var(--space-5);
	margin: 0 0 var(--space-6);
}

.woutr-form__notice--ok {
	background-color: var(--success-10);
	border-left-color: var(--success);
}

.woutr-form__notice--fout {
	background-color: var(--error-10);
	border-left-color: var(--error);
}

.woutr-form__actions,
.woutr-form__privacy {
	margin: 0;
}

.woutr-form__privacy {
	font-size: var(--text-xs);
	color: var(--text-mute);
}

/* De honeypot. Weggeschoven in plaats van display:none, want een deel van de
   bots slaat velden over die echt verborgen zijn — en juist die moeten hem
   invullen. aria-hidden en tabindex="-1" staan in de opmaak, zodat een
   schermlezer of een tab-toets er nooit langskomt. */
.woutr-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── Eigen blokken ──────────────────────────────────────────────────────── */

.woutr-icon-block {
	display: inline-flex;
	line-height: 0;
}

/* Overlay link: covers the whole tile without becoming the grid item itself,
   so a tile keeps its row span in the collage. */
.woutr-tile-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.woutr-tile:has(.woutr-tile-link) {
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.woutr-tile:has(.woutr-tile-link):hover,
.woutr-tile:has(.woutr-tile-link):focus-within {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.woutr-tile .woutr-photo-label {
	z-index: 1;
}

/* In the editor the tile is a live block, so give it a sensible working height
   even before it lands in the collage grid. */
.editor-styles-wrapper .woutr-tile {
	min-height: 160px;
}