/**
 * Echt Bärig — shopstijlen.
 *
 * Wordt alleen ingeladen op WooCommerce-weergaven (zie inc/assets.php).
 * Bevat: productraster en -kaart, badges, filters, productpagina, winkelwagen,
 * kassa en mijn-account.
 */

/* ==========================================================================
   1. Shoplayout
   ========================================================================== */

.eb-shop {
	display: grid;
	gap: var(--eb-space-5);
	padding-block: var(--eb-space-5) var(--eb-space-8);
}

/* Vanaf lg komt er een filterzijbalk naast het raster. Onder lg zitten de filters
   in een bottom sheet, dus daar is één kolom juist. */
@media (min-width: 1024px) {
	.eb-shop {
		grid-template-columns: 17rem 1fr;
		gap: var(--eb-space-6);
		align-items: start;
	}
}

.eb-shop__header {
	padding-block: var(--eb-space-5) 0;
}

.eb-shop__title {
	margin-bottom: var(--eb-space-2);
}

.eb-shop__description {
	max-width: 68ch;
	color: var(--eb-text-muted);
}

/* Balk met resultaataantal, sorteren en de filterknop. Sticky op mobiel zodat
   sorteren en filteren altijd binnen bereik blijven bij lange lijsten. */
.eb-shop__bar {
	position: sticky;
	top: var(--eb-header-offset);
	z-index: 30;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--eb-space-2);
	padding-block: var(--eb-space-3);
	background: var(--eb-bg);
	border-bottom: 1px solid var(--eb-border);
	margin-bottom: var(--eb-space-4);
}

/*
 * Mobiel als raster in plaats van als flexrij. Met flex-wrap belandden het aantal, de
 * filterknop en het sorteerveld op drie regels met een gat ertussen, wat eruitzag als
 * een lege eerste positie in het productraster.
 */
.eb-shop__bar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--eb-space-2);
	align-items: center;
}

.eb-shop__count {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--eb-step--1);
	color: var(--eb-text-muted);
}

.eb-shop__bar .woocommerce-ordering {
	margin: 0;
	min-width: 0;
}

.eb-shop__bar select {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	border-radius: var(--eb-radius-full);
	padding-inline: var(--eb-space-3);
	font-size: var(--eb-step--1);
}

.eb-shop__bar .eb-filter-toggle {
	width: 100%;
	justify-content: center;
}

/* Vanaf md past alles op één regel: aantal links, dan filter en sorteren rechts. */
@media (min-width: 768px) {
	.eb-shop__bar {
		grid-template-columns: 1fr auto auto;
	}

	.eb-shop__count {
		grid-column: auto;
	}

	.eb-shop__bar select {
		width: auto;
		min-width: 12rem;
		padding-inline: var(--eb-space-4);
	}

	.eb-shop__bar .eb-filter-toggle {
		width: auto;
	}
}

@media (min-width: 1024px) {
	.eb-shop__bar {
		grid-template-columns: 1fr auto;
	}
}

.eb-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--eb-space-2);
}

@media (min-width: 1024px) {
	.eb-filter-toggle {
		display: none;
	}
}

.eb-filter-toggle svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
	stroke-linecap: round;
}

/* ==========================================================================
   2. Productraster
   ========================================================================== */

/* Twee kolommen op mobiel. Eén kolom zou minder scrollen betekenen maar geeft
   onnodig grote afbeeldingen en verbergt hoeveel assortiment er is. */
ul.products,
.eb-product-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--eb-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 480px) {
	ul.products,
	.eb-product-grid {
		gap: var(--eb-space-4);
	}
}

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

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

/* WooCommerce zet zelf kolomklassen en floats op de li's; die worden hier
   uitgeschakeld omdat grid de layout doet. */
ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
}

/*
 * De clearfix van WooCommerce uitschakelen.
 *
 * woocommerce.css zet `.woocommerce ul.products::before { content:" "; display:table }`
 * — een overblijfsel uit de tijd dat dit raster met floats werkte. In een
 * grid-container wordt zo'n pseudo-element echter zélf een gridcel: hij pakte de
 * eerste positie, waardoor het hele raster één plek opschoof en linksboven een gat
 * bleef staan.
 */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none;
	display: none;
}

/* ==========================================================================
   3. Productkaart
   ========================================================================== */

.eb-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--eb-white);
	border: 1px solid var(--eb-border);
	border-radius: var(--eb-radius-md);
	overflow: hidden;
	transition: box-shadow var(--eb-transition), transform var(--eb-transition), border-color var(--eb-transition);
}

.eb-card:hover,
.eb-card:focus-within {
	border-color: var(--eb-border-strong);
	box-shadow: var(--eb-shadow-2);
	transform: translateY(-2px);
}

.eb-card__media {
	position: relative;
	display: block;
	background: var(--eb-brown-100);
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.eb-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1);
}

.eb-card:hover .eb-card__media img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.eb-card:hover .eb-card__media img {
		transform: none;
	}
}

.eb-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--eb-space-1);
	padding: var(--eb-space-3);
}

.eb-card__brand {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eb-brown-400);
}

.eb-card__title {
	margin: 0;
	font-family: var(--eb-font-body);
	font-size: var(--eb-step-0);
	font-weight: 600;
	line-height: 1.3;
	color: var(--eb-text);
}

.eb-card__title a {
	color: inherit;
	text-decoration: none;
}

/* De hele kaart klikbaar maken via een overlay op de titellink. Dat houdt één
   link in de toegankelijkheidsboom in plaats van drie naar dezelfde plek. */
.eb-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.eb-card__price {
	margin-top: auto;
	padding-top: var(--eb-space-2);
	font-size: var(--eb-step-1);
	font-weight: 700;
	color: var(--eb-brown-700);
}

.eb-card__price del {
	margin-inline-end: var(--eb-space-2);
	font-size: var(--eb-step--1);
	font-weight: 400;
	color: var(--eb-text-muted);
}

.eb-card__price ins {
	text-decoration: none;
	color: var(--eb-sale);
}

.eb-card__tax-note {
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--eb-text-muted);
	display: block;
	line-height: 1.4;
}

.eb-card__actions {
	position: relative;
	z-index: 2;
	display: flex;
	gap: var(--eb-space-2);
	padding: 0 var(--eb-space-3) var(--eb-space-3);
}

.eb-card__actions .button {
	flex: 1;
	min-height: 40px;
	padding-inline: var(--eb-space-3);
	font-size: var(--eb-step--1);
}

/*
 * Wenslijst van de plugin, rechtsboven op de afbeelding.
 *
 * De plugin rendert een blok met het label "Zur Merkliste". In de stroom onder de
 * afbeelding werd dat blok 83 px hoog en liep het buiten het beeldvlak, waar de
 * kaartinhoud er overheen viel: half afgeknipte tekst onder elke foto. Hier wordt het
 * uit de stroom gehaald en teruggebracht tot het hartje.
 */
.eb-card__wishlist-wrap {
	position: absolute;
	top: var(--eb-space-2);
	right: var(--eb-space-2);
	z-index: 3;
	line-height: 0;
}

.eb-card__wishlist-wrap .tinv-wraper,
.eb-card__wishlist-wrap .tinvwl-loop-button-wrapper {
	margin: 0;
	padding: 0;
}

.eb-card__wishlist-wrap .tinvwl_add_to_wishlist_button {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: var(--eb-radius-full);
	background: rgb(255 255 255 / 92%);
	box-shadow: var(--eb-shadow-1);
	color: var(--eb-brown-600);
	font-size: 0;
	overflow: hidden;
}

.eb-card__wishlist-wrap .tinvwl_add_to_wishlist_button:hover,
.eb-card__wishlist-wrap .tinvwl_add_to_wishlist_button.tinvwl-product-in-list {
	background: var(--eb-white);
	color: var(--eb-sale);
}

/* Het icoon van de plugin is een pseudo-element met een eigen font. */
.eb-card__wishlist-wrap .tinvwl_add_to_wishlist_button::before {
	font-size: 17px;
	line-height: 1;
	margin: 0;
}

/* Het tekstlabel verbergen zonder het voor schermlezers weg te nemen. */
.eb-card__wishlist-wrap .tinvwl_add_to_wishlist_button .tinvwl_add_to_wishlist-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Meldingen en tellers van de plugin horen niet op een productkaart. */
.eb-card__wishlist-wrap .tinv-wishlist-clear,
.eb-card__wishlist-wrap .tinvwl-tooltip,
.eb-card__wishlist-wrap .tinv-modal {
	display: none !important;
}

/* Eigen variant, voor als de plugin ooit weggaat. */
.eb-card__wishlist {
	position: absolute;
	top: var(--eb-space-2);
	right: var(--eb-space-2);
	z-index: 2;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--eb-radius-full);
	background: rgb(255 255 255 / 92%);
	box-shadow: var(--eb-shadow-1);
	color: var(--eb-brown-600);
}

.eb-card__wishlist:hover {
	background: var(--eb-white);
	color: var(--eb-sale);
}

/* Categorietegel in het productraster, zie woocommerce/content-product_cat.php. */
.eb-cat-tile {
	list-style: none;
}

.eb-cat-tile .eb-cat-card {
	height: 100%;
	display: block;
}

.eb-cat-tile .eb-cat-card img,
.eb-cat-card__empty {
	aspect-ratio: 4 / 5;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eb-cat-card__empty {
	background: linear-gradient(135deg, var(--eb-amber-100), var(--eb-brown-100));
}

/* WooCommerce zet zijn eigen titel er ook nog in als een plugin dat forceert. */
.eb-cat-tile .woocommerce-loop-category__title {
	display: none;
}

/* ==========================================================================
   4. Badges
   ========================================================================== */

.eb-badges {
	position: absolute;
	top: var(--eb-space-2);
	left: var(--eb-space-2);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--eb-space-1);
	pointer-events: none;
}

.eb-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--eb-space-2);
	border-radius: var(--eb-radius-full);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.6;
	text-transform: uppercase;
	background: var(--eb-brown-600);
	color: var(--eb-white);
}

/* Amber met donkere tekst — wit op amber haalt geen leesbaar contrast. */
.eb-badge--preorder {
	background: var(--eb-amber-500);
	color: var(--eb-ink);
}

.eb-badge--sale {
	background: var(--eb-sale);
	color: var(--eb-white);
}

.eb-badge--new {
	background: var(--eb-success);
	color: var(--eb-white);
}

.eb-badge--soldout {
	background: var(--eb-grey-500);
	color: var(--eb-white);
}

.eb-badge--retired {
	background: var(--eb-brown-800);
	color: var(--eb-amber-200);
}

/* WooCommerce's eigen sale-flash wordt vervangen door .eb-badge. */
.woocommerce span.onsale {
	display: none;
}

/* ==========================================================================
   5. Filters
   ========================================================================== */

/* Mobiel: bottom sheet. Vanaf lg: gewone zijbalk. */
.eb-filters {
	position: fixed;
	inset: auto 0 0;
	z-index: 130;

	/*
	 * `vh` telt op iPhone-Safari het gebied onder de browserbalk mee. Een paneel van 85vh loopt
	 * daardoor tot achter die balk door, en de knoppenbalk onderaan — Zurücksetzen en Anzeigen —
	 * valt buiten beeld. In het Engels viel dat het eerst op: "Reset" en "Show" zijn korter, maar
	 * de labels van de filters zelf zijn langer, dus het paneel wordt hoger en raakt de grens
	 * eerder.
	 *
	 * `dvh` volgt de werkelijk zichtbare hoogte en krimpt mee als de browserbalk verschijnt.
	 * De `vh`-regel blijft als terugval staan voor browsers die `dvh` nog niet kennen.
	 */
	max-height: 85vh;
	max-height: 85dvh;
	display: flex;
	flex-direction: column;
	background: var(--eb-white);
	border-radius: var(--eb-radius-lg) var(--eb-radius-lg) 0 0;
	box-shadow: var(--eb-shadow-3);
	transform: translateY(100%);
	transition: transform var(--eb-transition);
	overflow: hidden;
}

.eb-filters.is-open {
	transform: translateY(0);
}

.eb-filters__head {
	/*
	 * Kop en knoppenbalk mogen niet krimpen. Zonder dit krijgen ze de standaard `flex-shrink: 1`
	 * en drukt een lange filterlijst ze samen tot niets — het paneel heeft `overflow: hidden`, dus
	 * ze verdwijnen dan gewoon. Dat gebeurde zodra je een filtergroep openklapte: de bevestigings-
	 * knop onderaan was ineens weg. De body eronder mag wél meegeven; die kan scrollen.
	 */
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--eb-space-3);
	padding: var(--eb-space-4);
	border-bottom: 1px solid var(--eb-border);
}

.eb-filters__head h2 {
	margin: 0;
	font-size: var(--eb-step-1);
}

.eb-filters__body {
	/*
	 * `flex-basis: auto`, en dat is wezenlijk. Hier stond `flex: 1 1 0`, met als gedachte dat de
	 * body het enige deel is dat mag inleveren. Dat klopt, maar een basis van nul werkt alleen als
	 * het paneel een definitieve hoogte heeft om te verdelen — en die heeft het niet: de bottom
	 * sheet staat op `inset: auto 0 0` met alleen `max-height` als plafond, dus de hoogte is `auto`.
	 *
	 * Bij een basis van nul is de hypothetische hoogte van de body dan nul, en `min-height: 0`
	 * haalt óók de ondergrens weg die hem normaal op zijn inhoud houdt. Het paneel kromp daardoor
	 * tot de kop plus de knoppenbalk: een klein vlak waar niets in staat. Op desktop gebeurde
	 * hetzelfde, want ook daar is de hoogte `auto`.
	 *
	 * Met `auto` is de basis de inhoudshoogte: het paneel wordt zo hoog als de filterlijst, tot aan
	 * `max-height`. Pas daar begint `flex-shrink` te werken, en dan zorgt `min-height: 0` er
	 * terecht voor dat de body mag inleveren en gaat scrollen in plaats van de knoppen weg te
	 * drukken. `min-height: 0` moet dus blijven staan — alleen de basis was fout.
	 */
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--eb-space-4);
}

.eb-filters__foot {
	flex-shrink: 0;
	display: flex;
	gap: var(--eb-space-3);

	/* Extra ruimte onder de knoppen voor de streep van de thuisknop op nieuwere iPhones. */
	padding: var(--eb-space-4);
	padding-bottom: calc(var(--eb-space-4) + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--eb-border);
	background: var(--eb-bg-alt);
}

.eb-filters__foot > * {
	flex: 1;
}

@media (min-width: 1024px) {
	.eb-filters {
		position: sticky;

		/*
		 * `inset` moet vóór `top` staan. Het is een verkorte notatie voor alle vier de zijden,
		 * dus erna gezet zette hij `top` weer op `auto` — en sticky zonder top-waarde plakt
		 * nergens aan. Het paneel scrolde daardoor gewoon mee, wat samen met de te hoge z-index
		 * verklaarde waarom het over de header heen schoof.
		 */
		inset: auto;
		top: calc(var(--eb-header-offset) + var(--eb-space-4));
		max-height: none;
		transform: none;
		border-radius: var(--eb-radius-md);
		border: 1px solid var(--eb-border);
		box-shadow: none;
		background: var(--eb-bg-alt);

		/*
		 * De z-index van de mobiele bottom sheet (130) hier terugzetten. Die stond hoger dan de
		 * vaste header (.site-header, 100), en omdat de zijbalk meescrolt schoof het filtervlak
		 * bij het scrollen over het menu heen. Op desktop hoort dit paneel gewoon in de stroom
		 * mee te tellen.
		 */
		z-index: auto;

		/* Hoger dan het venster mag hij niet worden, anders is de onderkant onbereikbaar. */
		max-height: calc(100vh - var(--eb-header-offset) - var(--eb-space-6));
		overflow-y: auto;
	}

	.eb-filters__close,
	.eb-filters__foot {
		display: none;
	}

	.eb-filters__body {
		overflow: visible;

		/*
		 * Op desktop scrolt het paneel zelf (`overflow-y: auto` hierboven), niet de body. De body
		 * hoeft dus niet mee te geven en krijgt gewoon zijn inhoudshoogte. Zie de basisregel voor
		 * waarom de basis `auto` moet zijn en niet nul.
		 */
		flex: 0 0 auto;
		min-height: auto;
	}
}

/* Elke filtergroep is een <details>, dus uitklappen werkt ook zonder JavaScript. */
.eb-filter-group {
	border-bottom: 1px solid var(--eb-border);
	padding-block: var(--eb-space-3);
}

.eb-filter-group:last-child {
	border-bottom: 0;
}

.eb-filter-group > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--eb-space-2);
	min-height: var(--eb-tap);
	cursor: pointer;
	font-weight: 600;
	color: var(--eb-brown-700);
	list-style: none;
}

.eb-filter-group > summary::-webkit-details-marker {
	display: none;
}

.eb-filter-group > summary::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	transform: rotate(45deg);
	transition: transform var(--eb-transition);
}

.eb-filter-group[open] > summary::after {
	transform: rotate(-135deg);
}

.eb-filter-list {
	display: grid;
	gap: var(--eb-space-1);
	margin-top: var(--eb-space-2);
	max-height: 16rem;
	overflow-y: auto;
}

.eb-filter-list label {
	display: flex;
	align-items: center;
	gap: var(--eb-space-2);
	min-height: 36px;
	margin: 0;
	font-size: var(--eb-step--1);
	font-weight: 400;
	cursor: pointer;
}

.eb-filter-list input[type="checkbox"],
.eb-filter-list input[type="radio"] {
	width: 18px;
	height: 18px;
	min-height: 0;
	flex: none;
	accent-color: var(--eb-brown-600);
}

.eb-filter-list .eb-filter-count {
	margin-inline-start: auto;
	color: var(--eb-text-muted);
	font-size: 0.72rem;
}

.eb-filter-price {
	display: flex;
	align-items: center;
	gap: var(--eb-space-2);
	margin-top: var(--eb-space-3);
}

.eb-filter-price input {
	min-width: 0;
}

/* Actieve filters als verwijderbare chips boven het raster. */
.eb-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eb-space-2);
	margin-bottom: var(--eb-space-4);
}

.eb-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--eb-space-2);
	min-height: 34px;
	padding: var(--eb-space-1) var(--eb-space-3);
	border: 1px solid var(--eb-border-strong);
	border-radius: var(--eb-radius-full);
	background: var(--eb-brown-100);
	color: var(--eb-brown-700);
	font-size: var(--eb-step--1);
	text-decoration: none;
}

.eb-chip:hover {
	background: var(--eb-brown-200);
	color: var(--eb-brown-800);
}

.eb-chip__x {
	font-size: 1rem;
	line-height: 1;
}

/*
 * Vaste prijsklassen onder de twee invoervelden. Ze hergebruiken .eb-chip, want het is
 * hetzelfde element met dezelfde betekenis: een aan te klikken keuze die de URL aanpast.
 */
.eb-filter-ranges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eb-space-2);
	margin-top: var(--eb-space-3);
}

.eb-chip.is-active {
	border-color: var(--eb-brown-700);
	background: var(--eb-brown-700);
	color: var(--eb-white);
}

.eb-chip.is-active:hover {
	background: var(--eb-brown-800);
	color: var(--eb-white);
}

/* ==========================================================================
   6. Productpagina
   ========================================================================== */

.eb-product {
	display: grid;
	gap: var(--eb-space-5);
	padding-block: var(--eb-space-5);
}

@media (min-width: 900px) {
	.eb-product {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: var(--eb-space-7);
		align-items: start;
	}
}

/* Galerij blijft op desktop in beeld tijdens het lezen van de beschrijving. */
@media (min-width: 900px) {
	.woocommerce-product-gallery {
		position: sticky;
		top: calc(var(--eb-header-offset) + var(--eb-space-4));
	}
}

.woocommerce-product-gallery {
	margin: 0;
}

.woocommerce-product-gallery__wrapper {
	border-radius: var(--eb-radius-lg);
	overflow: hidden;
	background: var(--eb-brown-100);
}

.woocommerce-product-gallery img {
	border-radius: var(--eb-radius-lg);
}

.woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--eb-space-2);
	margin: var(--eb-space-3) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.woocommerce-product-gallery .flex-control-thumbs {
		grid-template-columns: repeat(5, 1fr);
	}
}

.woocommerce-product-gallery .flex-control-thumbs img {
	border-radius: var(--eb-radius-sm);
	border: 2px solid transparent;
	cursor: pointer;
	aspect-ratio: 1;
	object-fit: cover;
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	border-color: var(--eb-brown-600);
}

.eb-product__summary > * + * {
	margin-top: var(--eb-space-4);
}

.eb-product__brand {
	font-size: var(--eb-step--1);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eb-brown-400);
}

.eb-product__title {
	margin: 0;
	font-size: var(--eb-step-3);
}

.eb-product__price {
	font-size: var(--eb-step-2);
	font-weight: 700;
	color: var(--eb-brown-700);
}

.eb-product__price del {
	font-size: var(--eb-step-0);
	font-weight: 400;
	color: var(--eb-text-muted);
	margin-inline-end: var(--eb-space-2);
}

.eb-product__price ins {
	text-decoration: none;
	color: var(--eb-sale);
}

.woocommerce-product-details__short-description {
	color: var(--eb-text-muted);
	max-width: 62ch;
}

/* Voorraadmelding met een puntje ervoor: kleur alleen is geen toegankelijke
   informatiedrager, dus de tekst zegt het ook. */
.eb-stock {
	display: inline-flex;
	align-items: center;
	gap: var(--eb-space-2);
	font-size: var(--eb-step--1);
	font-weight: 600;
}

.eb-stock::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentcolor;
	flex: none;
}

.eb-stock--in { color: var(--eb-success); }
.eb-stock--low { color: var(--eb-warning); }
.eb-stock--out { color: var(--eb-error); }

/* Bestelblok */
.eb-product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eb-space-3);
	align-items: center;
	margin: 0;
	padding: var(--eb-space-4);
	border: 1px solid var(--eb-border);
	border-radius: var(--eb-radius-md);
	background: var(--eb-bg-alt);
}

.eb-product form.cart .quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--eb-border-strong);
	border-radius: var(--eb-radius-md);
	background: var(--eb-white);
	overflow: hidden;
}

.eb-product form.cart .quantity input.qty {
	width: 3.5rem;
	min-height: var(--eb-tap);
	border: 0;
	border-radius: 0;
	text-align: center;
	font-weight: 600;
	-moz-appearance: textfield;
}

.eb-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.eb-product form.cart .quantity input.qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.eb-qty-btn {
	width: var(--eb-tap);
	min-height: var(--eb-tap);
	border: 0;
	background: transparent;
	color: var(--eb-brown-700);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1;
}

.eb-qty-btn:hover {
	background: var(--eb-brown-100);
}

.eb-product form.cart .single_add_to_cart_button {
	flex: 1 1 12rem;
}

/* ==========================================================================
   Exemplaarkeuze
   ========================================================================== */

/*
 * Elke beer is een uniek stuk met een eigen foto. De keuze gaat daarom via de foto's
 * en niet via een nummerdropdown. Horizontaal schuifbaar, want bij sommige producten
 * zijn er tot 24 exemplaren en dan wil je niet dat de pagina metershoog wordt.
 */
.eb-variants {
	margin-bottom: var(--eb-space-4);
}

.eb-variants__intro {
	margin: 0 0 var(--eb-space-2);
	font-size: var(--eb-step--1);
	color: var(--eb-text-muted);
}

.eb-variants__list {
	display: flex;
	gap: var(--eb-space-2);
	margin: 0;
	padding: 0 0 var(--eb-space-2);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;

	/* Zichtbare, smalle scrollbalk: hij mág opvallen, want hij vertelt dat er meer
	   exemplaren zijn dan er passen. */
	scrollbar-width: thin;
	scrollbar-color: var(--eb-brown-300) var(--eb-brown-100);
}

.eb-variants__list::-webkit-scrollbar {
	height: 6px;
}

.eb-variants__list::-webkit-scrollbar-track {
	background: var(--eb-brown-100);
	border-radius: var(--eb-radius-full);
}

.eb-variants__list::-webkit-scrollbar-thumb {
	background: var(--eb-brown-300);
	border-radius: var(--eb-radius-full);
}

.eb-variants__item {
	flex: none;
	scroll-snap-align: start;
}

.eb-variant {
	display: grid;
	gap: var(--eb-space-1);
	width: 84px;
	padding: var(--eb-space-1);
	border: 2px solid var(--eb-border);
	border-radius: var(--eb-radius-md);
	background: var(--eb-white);
	cursor: pointer;
	transition: border-color var(--eb-transition), box-shadow var(--eb-transition);
}

.eb-variant:hover {
	border-color: var(--eb-brown-400);
}

.eb-variant[aria-pressed="true"] {
	border-color: var(--eb-brown-600);
	box-shadow: 0 0 0 3px rgb(240 168 48 / 35%);
}

.eb-variant__media {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--eb-radius-sm);
	background: var(--eb-brown-100);
}

.eb-variant__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eb-variant__label {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--eb-brown-700);
	text-align: center;
}

.eb-variant.is-sold-out {
	cursor: not-allowed;
	opacity: 0.45;
}

.eb-variant__sold {
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--eb-error);
	text-align: center;
}

@media (min-width: 768px) {
	.eb-variant {
		width: 96px;
	}
}

/*
 * De keuzelijst van WooCommerce blijft in de DOM staan omdat alles eromheen erop
 * gebouwd is. Zodra het JavaScript de fotokeuze heeft aangezet wordt hij verborgen —
 * zonder JavaScript blijft hij zichtbaar en werkt de pagina gewoon.
 */
.eb-variants-active table.variations {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Variatietabel */
.woocommerce-variation-add-to-cart,
table.variations {
	width: 100%;
}

table.variations {
	display: grid;
	gap: var(--eb-space-3);
	border: 0;
}

table.variations tbody,
table.variations tr {
	display: contents;
}

table.variations th,
table.variations td {
	display: block;
	padding: 0;
	border: 0;
	text-align: start;
}

table.variations th label {
	margin-bottom: var(--eb-space-1);
}

.reset_variations {
	display: inline-block;
	margin-top: var(--eb-space-2);
	font-size: var(--eb-step--1);
}

/* Servicepunten onder de bestelknop. */
.eb-product__services {
	display: grid;
	gap: var(--eb-space-2);
	padding: var(--eb-space-4);
	border: 1px dashed var(--eb-border-strong);
	border-radius: var(--eb-radius-md);
	background: var(--eb-bg-warm);
	font-size: var(--eb-step--1);
}

.eb-product__services li {
	display: flex;
	gap: var(--eb-space-2);
	align-items: flex-start;
}

.eb-product__services svg {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	fill: none;
	stroke: var(--eb-brown-600);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.eb-product__meta {
	font-size: var(--eb-step--1);
	color: var(--eb-text-muted);
}

.eb-product__meta a {
	color: var(--eb-brown-600);
}

/* Sticky bestelbalk op mobiel: verschijnt zodra het bestelblok uit beeld is. */
.eb-sticky-buy {
	position: fixed;
	inset: auto 0 0;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: var(--eb-space-3);
	padding: var(--eb-space-3) var(--eb-gutter);
	background: var(--eb-white);
	border-top: 1px solid var(--eb-border);
	box-shadow: 0 -4px 16px rgb(42 20 16 / 12%);
	transform: translateY(110%);
	transition: transform var(--eb-transition);

	/* Ruimte voor de home-indicator op iPhones. */
	padding-bottom: max(var(--eb-space-3), env(safe-area-inset-bottom));
}

.eb-sticky-buy.is-visible {
	transform: translateY(0);
}

@media (min-width: 900px) {
	.eb-sticky-buy {
		display: none;
	}
}

.eb-sticky-buy__info {
	flex: 1;
	min-width: 0;
}

.eb-sticky-buy__name {
	font-size: var(--eb-step--1);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.eb-sticky-buy__price {
	font-size: var(--eb-step-0);
	font-weight: 700;
	color: var(--eb-brown-700);
}

.eb-sticky-buy .button {
	flex: none;
}

/* Tabs onder het product. */
.woocommerce-tabs {
	padding-block: var(--eb-space-6);
	border-top: 1px solid var(--eb-border);
}

.woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--eb-space-2);
	overflow-x: auto;
	scrollbar-width: none;
	margin: 0 0 var(--eb-space-5);
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--eb-border);
}

.woocommerce-tabs ul.tabs::-webkit-scrollbar {
	display: none;
}

.woocommerce-tabs ul.tabs li {
	flex: none;
}

.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: var(--eb-space-3) var(--eb-space-4);
	border-bottom: 3px solid transparent;
	color: var(--eb-text-muted);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--eb-accent);
	color: var(--eb-brown-700);
}

.woocommerce-Tabs-panel h2 {
	font-size: var(--eb-step-2);
}

.shop_attributes th {
	width: 12rem;
}

/* ==========================================================================
   7. Winkelwagen en kassa
   ========================================================================== */

.eb-cart,
.eb-checkout {
	padding-block: var(--eb-space-5) var(--eb-space-8);
}

/* Klassieke winkelwagentabel wordt op mobiel een kaartenlijst: een tabel met
   zes kolommen is op 360px niet leesbaar. */
table.shop_table_responsive {
	border: 0;
}

@media (max-width: 767px) {
	table.shop_table_responsive thead {
		display: none;
	}

	table.shop_table_responsive tr {
		display: block;
		margin-bottom: var(--eb-space-4);
		border: 1px solid var(--eb-border);
		border-radius: var(--eb-radius-md);
		padding: var(--eb-space-3);
	}

	table.shop_table_responsive td {
		display: flex;
		justify-content: space-between;
		gap: var(--eb-space-3);
		padding: var(--eb-space-2) 0;
		border: 0;
		text-align: end;
	}

	table.shop_table_responsive td::before {
		content: attr(data-title) ": ";
		font-weight: 600;
		text-align: start;
	}

	table.shop_table_responsive td.product-remove::before,
	table.shop_table_responsive td.product-thumbnail::before {
		content: "";
	}
}

@media (min-width: 768px) {
	table.shop_table th,
	table.shop_table td {
		padding: var(--eb-space-3);
		border-bottom: 1px solid var(--eb-border);
		text-align: start;
	}

	table.shop_table th {
		background: var(--eb-brown-100);
		font-weight: 600;
	}
}

.cart_totals,
.eb-order-summary {
	padding: var(--eb-space-5);
	border: 1px solid var(--eb-border);
	border-radius: var(--eb-radius-md);
	background: var(--eb-bg-alt);
}

.cart_totals h2,
.eb-order-summary h2 {
	margin-top: 0;
	font-size: var(--eb-step-1);
}

.cart-collaterals {
	display: grid;
	gap: var(--eb-space-5);
	margin-top: var(--eb-space-5);
}

@media (min-width: 900px) {
	.cart-collaterals {
		grid-template-columns: 1fr minmax(20rem, 24rem);
		align-items: start;
	}
}

/* De kassa in twee kolommen op desktop, één op mobiel. WooCommerce Blocks doet dit
   zelf al; deze regels vangen de klassieke kassa af als die actief is. */
.woocommerce-checkout form.checkout {
	display: grid;
	gap: var(--eb-space-6);
}

@media (min-width: 900px) {
	.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 1.3fr) minmax(20rem, 26rem);
		align-items: start;
	}

	#order_review_heading,
	#order_review {
		grid-column: 2;
	}

	.woocommerce-checkout form.checkout > .col2-set,
	#customer_details {
		grid-column: 1;
	}
}

#order_review {
	position: sticky;
	top: calc(var(--eb-header-offset) + var(--eb-space-4));
	padding: var(--eb-space-5);
	border: 1px solid var(--eb-border);
	border-radius: var(--eb-radius-md);
	background: var(--eb-bg-alt);
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
	font-size: var(--eb-step-1);
	padding-bottom: var(--eb-space-2);
	border-bottom: 1px solid var(--eb-border);
}

.form-row {
	margin-bottom: var(--eb-space-3);
}

@media (min-width: 600px) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--eb-space-3);
	}

	.form-row-wide,
	.form-row-full {
		grid-column: 1 / -1;
	}
}

.woocommerce-form__label-for-checkbox {
	display: flex;
	gap: var(--eb-space-2);
	align-items: flex-start;
	font-weight: 400;
	font-size: var(--eb-step--1);
}

.woocommerce-form__label-for-checkbox input {
	width: 18px;
	height: 18px;
	min-height: 0;
	flex: none;
	margin-top: 3px;
	accent-color: var(--eb-brown-600);
}

/* Verzendmethodekeuze als aanklikbare rijen in plaats van kale radio's. */
#shipping_method,
.wc-block-components-shipping-rates-control {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--eb-space-2);
}

#shipping_method li {
	margin: 0;
}

#shipping_method label {
	display: flex;
	align-items: center;
	gap: var(--eb-space-3);
	min-height: var(--eb-tap);
	padding: var(--eb-space-3);
	border: 1px solid var(--eb-border-strong);
	border-radius: var(--eb-radius-md);
	background: var(--eb-white);
	font-weight: 500;
	cursor: pointer;
	transition: border-color var(--eb-transition), background var(--eb-transition);
}

#shipping_method label:hover {
	border-color: var(--eb-brown-400);
	background: var(--eb-brown-100);
}

#shipping_method input[type="radio"] {
	width: 18px;
	height: 18px;
	min-height: 0;
	flex: none;
	accent-color: var(--eb-brown-600);
}

/* Betaalmethoden */
.wc_payment_methods {
	list-style: none;
	margin: 0 0 var(--eb-space-4);
	padding: 0;
	display: grid;
	gap: var(--eb-space-2);
}

.wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: var(--eb-space-3);
	min-height: var(--eb-tap);
	padding: var(--eb-space-3);
	border: 1px solid var(--eb-border-strong);
	border-radius: var(--eb-radius-md);
	background: var(--eb-white);
	cursor: pointer;
	font-weight: 500;
}

.wc_payment_method input[type="radio"] {
	width: 18px;
	height: 18px;
	min-height: 0;
	flex: none;
	accent-color: var(--eb-brown-600);
}

.payment_box {
	margin: 0;
	padding: var(--eb-space-3) var(--eb-space-4);
	border-radius: 0 0 var(--eb-radius-md) var(--eb-radius-md);
	background: var(--eb-bg-warm);
	font-size: var(--eb-step--1);
}

.payment_box p:last-child {
	margin-bottom: 0;
}

#place_order,
.wc-block-components-checkout-place-order-button {
	width: 100%;
	min-height: 52px;
	font-size: var(--eb-step-1);
}

/* ==========================================================================
   8. WooCommerce Blocks
   ========================================================================== */

/* De blok-winkelwagen en -kassa hebben eigen custom properties; die worden hier op
   de huisstijl gezet in plaats van hun CSS te overschrijven. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	--wc-blocks-color-primary: var(--eb-brown-600);
	--wc-blocks-color-accent: var(--eb-accent);
}

.wc-block-components-button:not(.is-link) {
	background: var(--eb-action);
	color: var(--eb-white);
	border-radius: var(--eb-radius-md);
	min-height: var(--eb-tap);
	font-weight: 600;
}

.wc-block-components-button:not(.is-link):hover {
	background: var(--eb-action-hover);
}

.wc-block-components-text-input input,
.wc-block-components-select select {
	border-radius: var(--eb-radius-sm);
	border-color: var(--eb-border-strong);
	min-height: var(--eb-tap);
}

.wc-block-components-title {
	font-family: var(--eb-font-heading);
	color: var(--eb-brown-700);
}

.wc-block-components-totals-item__value {
	font-weight: 700;
	color: var(--eb-brown-700);
}

/* ==========================================================================
   9. Mijn account
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 var(--eb-space-5);
	padding: 0;
	display: flex;
	gap: var(--eb-space-2);
	overflow-x: auto;
	scrollbar-width: none;
	border-bottom: 1px solid var(--eb-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
	display: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--eb-space-3) var(--eb-space-4);
	border-bottom: 3px solid transparent;
	color: var(--eb-text-muted);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	border-bottom-color: var(--eb-accent);
	color: var(--eb-brown-700);
}

@media (min-width: 1024px) {
	.woocommerce-account .woocommerce-MyAccount-content,
	.woocommerce-account .woocommerce-MyAccount-navigation {
		float: none;
		width: auto;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		border-bottom: 1px solid var(--eb-border);
	}
}

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
	max-width: 30rem;
	padding: var(--eb-space-5);
	border: 1px solid var(--eb-border);
	border-radius: var(--eb-radius-md);
	background: var(--eb-bg-alt);
}

.woocommerce-form-login__rememberme {
	display: flex;
	gap: var(--eb-space-2);
	align-items: center;
	font-weight: 400;
}

/* Inloggen zonder wachtwoord, onder het gewone inlogformulier. */
.eb-magic {
	margin-top: var(--eb-space-5);
	padding-top: var(--eb-space-5);
	border-top: 1px solid var(--eb-border);
}

.eb-magic__intro {
	font-size: var(--eb-step--1);
	color: var(--eb-text-muted);
	max-width: 46ch;
}

.eb-magic__form .form-row {
	margin-bottom: var(--eb-space-3);
}

/* ==========================================================================
   10. Lege staten
   ========================================================================== */

.eb-empty {
	padding: var(--eb-space-8) var(--eb-space-4);
	text-align: center;
	border: 1px dashed var(--eb-border-strong);
	border-radius: var(--eb-radius-lg);
	background: var(--eb-bg-alt);
}

.eb-empty h2 {
	margin-bottom: var(--eb-space-2);
}

.eb-empty p {
	max-width: 46ch;
	margin-inline: auto;
	color: var(--eb-text-muted);
}

/* Bevestigingspaneel na het aanvragen van een inloglink. */
.eb-magic--sent h2 {
	margin-top: var(--eb-space-5);
	font-size: var(--eb-step-2);
}

.eb-magic--sent h3 {
	margin-top: var(--eb-space-5);
	font-size: var(--eb-step-1);
}

.eb-magic--sent ul {
	margin: 0 0 var(--eb-space-4);
	padding-inline-start: 1.35em;
}

.eb-magic--sent li + li {
	margin-top: var(--eb-space-2);
}

/* --------------------------------------------------------------------------
   Teller voor gratis verzending
   -------------------------------------------------------------------------- */

/*
 * Staat boven het winkelwagen- en kassablok. Amber als achtergrond met donkere tekst erop —
 * amber is in deze huisstijl een achtergrondkleur, nooit een tekstkleur op wit.
 */
.eb-free-shipping {
	margin: 0 0 var(--eb-space-4);
	padding: var(--eb-space-3) var(--eb-space-4);
	border-radius: var(--eb-radius-md);
	background: var(--eb-amber-100);
	color: var(--eb-brown-800);
	font-size: var(--eb-step--1);
	text-align: center;
}

/*
 * Gehaald: geen groen vlak maar een groene rand met donkere tekst. Het thema heeft één
 * groentint (--eb-success) en die is bedoeld als accent, niet als achtergrond — als vlak
 * zou de tekst erop te weinig contrast houden.
 */
.eb-free-shipping.is-reached {
	background: var(--eb-white);
	border: 1px solid var(--eb-success);
	color: var(--eb-brown-800);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Bericht wanneer een artikel terug is
   -------------------------------------------------------------------------- */

.eb-stock-notify {
	margin-top: var(--eb-space-5);
	padding: var(--eb-space-4);
	border: 1px solid var(--eb-border);
	border-radius: var(--eb-radius-md);
	background: var(--eb-bg-warm);
}

.eb-stock-notify__title {
	margin: 0 0 var(--eb-space-2);
	font-size: var(--eb-step-0);
}

.eb-stock-notify__intro,
.eb-stock-notify__legal,
.eb-stock-notify__done {
	margin: 0 0 var(--eb-space-3);
	font-size: var(--eb-step--1);
	color: var(--eb-text-muted);
}

.eb-stock-notify__done {
	margin-bottom: 0;
	color: var(--eb-text);
	font-weight: 600;
}

.eb-stock-notify__legal {
	margin-bottom: 0;
	margin-top: var(--eb-space-2);
	font-size: 0.72rem;
}

.eb-stock-notify__error {
	margin: 0 0 var(--eb-space-3);
	font-size: var(--eb-step--1);
	color: var(--eb-sale);
}

/* Op mobiel onder elkaar, vanaf sm naast elkaar met de knop op maat. */
.eb-stock-notify__row {
	display: grid;
	gap: var(--eb-space-2);
}

@media (min-width: 480px) {
	.eb-stock-notify__row {
		grid-template-columns: 1fr auto;
	}
}

.eb-stock-notify__row input {
	width: 100%;
	min-width: 0;
}

/* Waarschuwing over invoerheffingen buiten de EU. Zelfde plek als de verzendteller, maar
   neutraler van kleur: het is informatie en geen aanmoediging. */
.eb-customs {
	margin: 0 0 var(--eb-space-4);
	padding: var(--eb-space-3) var(--eb-space-4);
	border: 1px solid var(--eb-border-strong);
	border-radius: var(--eb-radius-md);
	background: var(--eb-white);
	color: var(--eb-text);
	font-size: var(--eb-step--1);
}

/* --------------------------------------------------------------------------
   Beoordelingsbeleid en vertrouwenssignalen
   -------------------------------------------------------------------------- */

/* Verplichte uitleg bij beoordelingen (Omnibus). Klein maar leesbaar: het is
   informatie waar iemand naar zoekt, geen kleine lettertjes om te verstoppen. */
.eb-review-policy {
	max-width: 68ch;
	margin: var(--eb-space-5) 0 0;
	font-size: var(--eb-step--1);
	color: var(--eb-text-muted);
}

.eb-trust {
	display: grid;
	gap: var(--eb-space-2);
	margin: var(--eb-space-5) 0 0;
	padding: var(--eb-space-4);
	list-style: none;
	border: 1px solid var(--eb-border);
	border-radius: var(--eb-radius-md);
	background: var(--eb-bg-alt);
	font-size: var(--eb-step--1);
	color: var(--eb-text);
}

@media (min-width: 768px) {
	.eb-trust {
		grid-template-columns: 1fr 1fr;
		gap: var(--eb-space-2) var(--eb-space-5);
	}
}