/* ============================================================
   Thema modern: homepagina (include/modern/home.php) en
   productlijst (content/productlist/productlist.php, zelfde markup
   als classic + sorteren). De productkaart (a.card) is overal gelijk,
   ook als productlist.php de lijst in JS opnieuw opbouwt.
   ============================================================ */

/* ---------- Secties ---------- */
main .shop-section {
	padding: var(--shop-section-y) var(--shop-gutter);
}
main .shop-section--tinted {
	background: var(--shop-bg-2) !important;
}
.shop-section__head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--shop-space-4);
	margin-bottom: var(--shop-space-6);
}
.shop-section__head .title {
	margin-bottom: 0 !important;
}
main .shop-section__more {
	display: inline-flex;
	align-items: center;
	gap: var(--shop-space-2);
	font-weight: var(--shop-weight-semibold);
	white-space: nowrap;
	text-decoration: none;
}
.shop-section__more i {
	transition: transform var(--shop-dur) var(--shop-ease);
}
.shop-section__more:hover i {
	transform: translateX(3px);
}
.shop-section__foot {
	display: none;
	margin-top: var(--shop-space-5);
}

/* ---------- Hero ---------- */
main .shop-hero {
	padding: var(--shop-space-5) var(--shop-gutter) 0;
}
.shop-hero__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: var(--shop-space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--shop-r-lg);
}
.shop-hero__track::-webkit-scrollbar {
	display: none;
}
.shop-hero__card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(360px, 42vw, 560px);
	border-radius: var(--shop-r-lg);
	overflow: hidden;
	scroll-snap-align: start;
	background: var(--shop-bg-3);
	isolation: isolate;
}
main .shop-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	border-radius: 0;
	z-index: -2;
}
.shop-hero__card::after {
	/* scrim: witte tekst haalt AA op elke foto */
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(10, 12, 16, 0.72) 0%, rgba(10, 12, 16, 0.45) 45%, rgba(10, 12, 16, 0) 80%),
		linear-gradient(0deg, rgba(10, 12, 16, 0.35) 0%, rgba(10, 12, 16, 0) 40%);
}
.shop-hero__body {
	/* breed genoeg voor een titelregel als "Happiness is knowing" (regels = regeleinden) */
	max-width: 46rem;
	padding: clamp(1.5rem, 1rem + 3vw, 4rem);
	color: #fff;
}
.shop-hero__title {
	font-family: var(--shop-font-display);
	font-size: var(--shop-text-4xl);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: #fff;
	margin-bottom: var(--shop-space-3);
}
.shop-hero__text {
	font-size: var(--shop-text-lg);
	line-height: var(--shop-leading-snug);
	color: rgba(255, 255, 255, 0.92);
	margin-bottom: var(--shop-space-5);
}
main .shop-hero__cta {
	min-height: 3.25rem;
	padding-inline: 1.75rem;
	gap: var(--shop-space-1);
}

/* home.hero_overlay = light: de foto blijft helder (bv. Joris IJs). Enkel een zachte
   lichte waas linksonder, achter de tekst; donkere tekst en een donkere knop.
   Contrast gemeten op de echte pixels (MR "Hero modern licht"). */
.shop-hero__card--light::after {
	background: radial-gradient(ellipse 72% 88% at 0% 100%, color-mix(in srgb, var(--shop-bg-1) 80%, transparent) 0%, color-mix(in srgb, var(--shop-bg-1) 58%, transparent) 40%, color-mix(in srgb, var(--shop-bg-1) 0%, transparent) 100%);
}
.shop-hero__card--light .shop-hero__body,
.shop-hero__card--light .shop-hero__title,
.shop-hero__card--light .shop-hero__text {
	color: var(--shop-fg-1);
}
main .shop-hero__card--light .shop-hero__cta {
	background-color: var(--shop-fg-1) !important;
	border-color: var(--shop-fg-1) !important;
	color: var(--shop-bg-1) !important;
}
main .shop-hero__card--light .shop-hero__cta:hover {
	background-color: color-mix(in srgb, var(--shop-fg-1) 85%, var(--shop-bg-1)) !important;
}
/* home.hero_overlay = none: geen waas, de tekst staat in een effen kaart. */
.shop-hero__card--none::after {
	content: none;
}
.shop-hero__card--none .shop-hero__body {
	margin: clamp(1rem, 0.5rem + 2vw, 2.5rem);
	padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
	border-radius: var(--shop-r-md);
	background: var(--shop-bg-1);
	box-shadow: var(--shop-shadow-md);
	color: var(--shop-fg-1);
}
.shop-hero__card--none .shop-hero__title {
	color: var(--shop-fg-1);
}
.shop-hero__card--none .shop-hero__text {
	color: var(--shop-fg-2);
}
.shop-hero__card--none .shop-hero__text:last-child {
	margin-bottom: 0;
}

/* Merkvlak: geen hero-foto (home.hero_image leeg). Merkkleur naar de diepere tint,
   een zacht stippenpatroon en twee lichtcirkels; tekst in --shop-fg-on-brand
   (berekend, AA op de merkkleur). Optioneel de foto van een uitgelicht product. */
.shop-hero__card--brand {
	align-items: center;
	color: var(--shop-fg-on-brand);
	background:
		radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--shop-fg-on-brand) 16%, transparent) 0 16%, transparent 16.2%),
		radial-gradient(circle at 62% 118%, color-mix(in srgb, var(--shop-fg-on-brand) 10%, transparent) 0 26%, transparent 26.2%),
		linear-gradient(120deg, var(--shop-brand) 0%, var(--shop-brand) 38%, var(--shop-brand-deep) 100%);
}
.shop-hero__card--brand::after {
	background-image: radial-gradient(color-mix(in srgb, var(--shop-fg-on-brand) 22%, transparent) 1.4px, transparent 1.6px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 85%);
	mask-image: linear-gradient(100deg, transparent 35%, #000 85%);
}
.shop-hero__card--brand .shop-hero__title,
.shop-hero__card--brand .shop-hero__body {
	color: var(--shop-fg-on-brand);
}
.shop-hero__card--brand .shop-hero__text {
	color: var(--shop-fg-on-brand);
	opacity: 0.92;
}
main .shop-hero__card--brand .shop-hero__cta {
	background-color: var(--shop-bg-1) !important;
	color: var(--shop-fg-1) !important;
	box-shadow: var(--shop-shadow-md);
}
main .shop-hero__card--brand .shop-hero__cta:hover {
	background-color: var(--shop-bg-2) !important;
	color: var(--shop-fg-1) !important;
}
.shop-hero__decor {
	position: absolute;
	right: clamp(1.5rem, 6vw, 6rem);
	top: 50%;
	width: clamp(220px, 30vw, 400px);
	aspect-ratio: 1;
	transform: translateY(-50%) rotate(-4deg);
	border-radius: 50%;
	overflow: hidden;
	box-shadow: var(--shop-shadow-lg), 0 0 0 10px color-mix(in srgb, var(--shop-fg-on-brand) 14%, transparent);
	z-index: -1;
}
main .shop-hero__decor img,
main .shop-hero__decor-img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	border-radius: 0;
}

/* ---------- Categorietegels ---------- */
.shop-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
	gap: var(--shop-space-4);
}
.shop-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--shop-space-4);
	height: 100%;
	padding: var(--shop-space-5);
	border-radius: var(--shop-r-card);
	background: var(--shop-bg-2);
	border: 1px solid transparent;
	color: var(--shop-fg-1) !important;
	position: relative;
	transition: transform var(--shop-dur) var(--shop-ease), box-shadow var(--shop-dur) var(--shop-ease), background-color var(--shop-dur) var(--shop-ease);
}
.shop-tile:hover {
	transform: translateY(var(--shop-lift));
	background: var(--shop-bg-1);
	border-color: var(--shop-border);
	box-shadow: var(--shop-shadow-md);
}
.shop-tile__icon {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: var(--shop-r-md);
	background: var(--shop-accent-quiet);
	color: var(--shop-brand-text);
	font-size: 1.35rem;
}
.shop-tile__label {
	/* Lange namen ("Peperkoekenhuisje") afbreken binnen de tegel: max-width want de
	   tegel lijnt links uit (flex-start), dan woordafbreking volgens <html lang="nl">,
	   en als laatste redmiddel breken waar het moet. Korte namen blijven heel. */
	max-width: 100%;
	min-width: 0;
	font-size: var(--shop-text-lg);
	font-weight: var(--shop-weight-semibold);
	line-height: var(--shop-leading-snug);
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
	overflow-wrap: anywhere;
}
.shop-tile__arrow {
	position: absolute;
	right: var(--shop-space-5);
	top: var(--shop-space-5);
	color: var(--shop-fg-3);
	transition: transform var(--shop-dur) var(--shop-ease), color var(--shop-dur) var(--shop-ease);
}
.shop-tile:hover .shop-tile__arrow {
	color: var(--shop-brand-text);
	transform: translateX(3px);
}

/* ---------- Productraster (home + lijst) ---------- */
.shop-products,
main #productlist .products-wrapper {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: var(--shop-space-5);
	margin: 0 !important;
}
main #productlist .products-wrapper > .column {
	width: auto !important;
	padding: 0 !important;
	flex: none;
}

/* ---------- Productkaart ---------- */
.shop-products .card,
main #productlist .products-wrapper .card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--shop-r-card);
	border: 1px solid var(--shop-border);
	box-shadow: none;
	background: var(--shop-bg-1);
	color: var(--shop-fg-1);
	transition: transform var(--shop-dur) var(--shop-ease), box-shadow var(--shop-dur) var(--shop-ease), border-color var(--shop-dur) var(--shop-ease);
}
.shop-products .card:hover,
main #productlist .products-wrapper .card:hover {
	transform: translateY(var(--shop-lift));
	box-shadow: var(--shop-shadow-lg);
	border-color: transparent;
}
.shop-products .card-image,
main #productlist .products-wrapper .card-image {
	position: relative;
	overflow: hidden;
	background: var(--shop-bg-3);
}
.shop-products .card-image img,
main #productlist .products-wrapper .card-image img {
	border-radius: 0 !important;
	max-width: none !important;
	max-height: none !important;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform var(--shop-dur-slow) var(--shop-ease);
}
.shop-products .card:hover .card-image img,
main #productlist .products-wrapper .card:hover .card-image img,
.shop-products .card:hover .card-image video.product-video,
main #productlist .products-wrapper .card:hover .card-image video.product-video {
	transform: scale(1.04);
}
/* Productvideo op de kaart (include/productvideo.php, JS: initProductVideos): over
   de foto in hetzelfde vak (geen layout shift), onzichtbaar tot hij echt speelt.
   De foto blijft het beeld voor laden, SEO en zonder JS. De labels (.tags-wrapper)
   staan later in de DOM en blijven erboven. Ook de kaarten van de atelier-home. */
main .card-image video.product-video--card,
main .at-card__img video.product-video--card {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--shop-dur-slow) var(--shop-ease), transform var(--shop-dur-slow) var(--shop-ease);
}
main .card-image video.product-video--card.is-playing,
main .at-card__img video.product-video--card.is-playing {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	main .card-image video.product-video--card,
	main .at-card__img video.product-video--card {
		display: none;
	}
}
.shop-products .card-content,
main #productlist .products-wrapper .card-content {
	flex: 1;
	padding: var(--shop-space-4) var(--shop-space-4) var(--shop-space-5) !important;
}
.shop-products .card-content .head,
main #productlist .products-wrapper .card-content .head {
	display: flex;
	gap: var(--shop-space-2);
	align-items: baseline;
	margin-bottom: var(--shop-space-1) !important;
}
.shop-products .card-content .head p:first-child,
main #productlist .products-wrapper .card-content .head p:first-child {
	flex: 1;
	font-size: var(--shop-text-lg) !important;
	font-weight: var(--shop-weight-semibold);
	line-height: var(--shop-leading-snug);
	color: var(--shop-fg-1) !important;
}
main #productlist .products-wrapper .card-content .quantity {
	color: var(--shop-fg-3) !important;
	font-size: var(--shop-text-sm) !important;
}
.shop-products .card-content .content > p.is-size-6,
main #productlist .products-wrapper .card-content .content > p.is-size-6 {
	font-size: var(--shop-text-md) !important;
	font-weight: var(--shop-weight-semibold);
	color: var(--shop-brand-text);
	font-variant-numeric: tabular-nums;
}
/* Labels op de foto (snel leverbaar, nieuw, ...): kleine pil linksboven, licht
   vlak met schaduw zodat ze op elke foto leesbaar zijn; hoogstens twee, naast elkaar (onder elkaar als ze niet passen).
   Dezelfde pil op de productkaarten van de atelier-home (include/modern/home-atelier.php). */
main #productlist .products-wrapper .card > .card-image > .tags-wrapper,
main .at-card__img > .tags-wrapper {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	bottom: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 6px;
	pointer-events: none;
}
main #productlist .products-wrapper .card > .card-image > .tags-wrapper > .tag,
main .at-card__img > .tags-wrapper > .tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 5px 10px;
	border-radius: var(--shop-r-pill) !important;
	background: rgba(255, 255, 255, 0.92) !important;
	color: var(--shop-fg-1) !important;
	font-family: var(--shop-font-ui);
	font-size: 11px;
	font-weight: 600;
	line-height: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
}
main #productlist .products-wrapper .card > .card-image > .tags-wrapper > .tag:nth-child(n + 3),
main .at-card__img > .tags-wrapper > .tag:nth-child(n + 3) {
	display: none;
}
main #productlist .products-wrapper .card > .card-image > .tags-wrapper > .tag p,
main .at-card__img > .tags-wrapper > .tag p {
	margin: 0;
	color: inherit !important;
	font: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
main #productlist .products-wrapper .card > .card-image > .tags-wrapper > .tag.shop-tag--quick::before,
main .at-card__img > .tags-wrapper > .tag.shop-tag--quick::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--shop-pos);
}

/* ---------- Productlijst: kop, resultaten en sorteren ---------- */
main #productlist.section {
	padding-top: var(--shop-space-5);
}
main #productlist .productlist > .columns > .column > .title.is-4 {
	font-size: var(--shop-text-3xl);
	margin-bottom: var(--shop-space-3);
}
main #productlist .productlist .columns.sort {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--shop-space-3);
	margin: 0 0 var(--shop-space-5) !important;
	padding-bottom: var(--shop-space-4);
	border-bottom: 1px solid var(--shop-border);
}
main #productlist .productlist .columns.sort > .column {
	padding: 0 !important; /* niet de 0.3rem uit productlist.php (gsm, klassiek) */
	flex: none;
}
/* Eén rij onder de titel: links een rustig aantal, rechts "Sorteren op" + keuze,
   allebei verticaal gecentreerd; label en keuze in hetzelfde font en dezelfde
   grootte. Het vak rond de select krijgt de hoogte van de select (Bulma zet
   2.5em, de select heeft min-height 2.75rem: die stak eronder uit en duwde
   "Aanbevolen" lager dan "Sorteren op"). */
main #productlist .productlist .columns.sort > .column.is-hidden-mobile p {
	font-family: var(--shop-font-ui);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--shop-fg-3);
	margin: 0;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.shop-sort {
	display: flex !important;
	align-items: center;
	gap: var(--shop-space-2);
	margin-left: auto;
}
.shop-sort__label {
	font-family: var(--shop-font-ui);
	font-size: 14px;
	line-height: 20px;
	color: var(--shop-fg-3);
	white-space: nowrap;
}
.shop-sort .select:not(.is-multiple) {
	height: auto;
}
/* Pijltje in de tekstkleur (staat niet in een <form>, dus niet de regel uit modern-base). */
.shop-sort .select:not(.is-multiple):not(.is-loading)::after {
	border-color: var(--shop-fg-2) !important;
}
.shop-sort .select select {
	height: 40px;
	min-height: 40px;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 1rem;
	font-family: var(--shop-font-ui);
	font-size: 14px;
	line-height: 20px;
	font-weight: var(--shop-weight-medium);
	border-radius: var(--shop-r-pill) !important;
}

/* ---------- Filters (zijkolom): opties als chips ---------- */
main #productlist .filter .label {
	font-size: var(--shop-text-sm);
	font-weight: var(--shop-weight-semibold);
	color: var(--shop-fg-1);
	border: 0 !important;
	margin-bottom: var(--shop-space-3);
}
main #productlist .filter form > .columns .field > label {
	border-bottom: 0 !important;
}
main #productlist .filter .field .field {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shop-space-2);
}
main #productlist .filter .field .field > .control.has-checkradio {
	margin: 0 !important;
}
main #productlist .filter .is-checkradio[type=checkbox] {
	position: absolute;
	opacity: 0;
}
main #productlist .filter .is-checkradio[type=checkbox] + label {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0 0.9rem !important;
	margin: 0 !important;
	border-radius: var(--shop-r-pill);
	border: 1px solid var(--shop-border-strong);
	background: var(--shop-bg-1);
	color: var(--shop-fg-1);
	font-size: var(--shop-text-sm);
	font-weight: var(--shop-weight-medium);
	cursor: pointer;
	transition: background-color var(--shop-dur-fast) var(--shop-ease), border-color var(--shop-dur-fast) var(--shop-ease);
}
main #productlist .filter .is-checkradio[type=checkbox] + label::before,
main #productlist .filter .is-checkradio[type=checkbox] + label::after {
	display: none !important;
}
main #productlist .filter .is-checkradio[type=checkbox] + label:hover {
	border-color: var(--shop-fg-2);
}
main #productlist .filter .is-checkradio[type=checkbox]:checked + label {
	background: var(--shop-brand);
	border-color: var(--shop-brand);
	color: var(--shop-fg-on-brand);
}
main #productlist .filter .is-checkradio[type=checkbox]:focus-visible + label {
	outline: 3px solid var(--shop-brand-text);
	outline-offset: 2px;
}
main #productlist .filter a.is-text {
	display: inline-flex;
	align-items: center;
	gap: var(--shop-space-1);
	font-size: var(--shop-text-sm);
	font-weight: var(--shop-weight-semibold);
	color: var(--shop-brand-text) !important;
}
main #productlist .filter a.is-text svg {
	width: 16px;
	height: 16px;
}
main #productlist .filter .active-filters .tag {
	background: var(--shop-accent-quiet);
	color: var(--shop-brand-text);
	box-shadow: none;
}

/* ---------- Filters mobiel: onderlade (bottom sheet) ---------- */
main #filterModal .modal-background {
	background: rgba(20, 22, 26, 0.45) !important;
}
main #filterModal .modal-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-height: 85vh;
	margin: 0;
	border-radius: var(--shop-r-lg) var(--shop-r-lg) 0 0;
	background: var(--shop-bg-1);
	overflow: auto !important;
}
main #filterModal .modal-content > .header {
	position: sticky;
	top: 0;
	z-index: 1;
	margin: 0;
	background: var(--shop-bg-1) !important;
	border-bottom: 1px solid var(--shop-border);
}
main #filterModal .modal-content > .header p {
	color: var(--shop-fg-1) !important;
	font-size: var(--shop-text-lg);
	font-weight: var(--shop-weight-bold);
}
main #filterModal .modal-content > .header .button {
	background: var(--shop-bg-2) !important;
	color: var(--shop-fg-1) !important;
	box-shadow: none;
}
main #filterModal .modal-content > .filter {
	padding: var(--shop-space-4);
}
main #filterModal .modal-content > .show {
	position: sticky;
	bottom: 0;
	margin: 0;
	padding: var(--shop-space-3) var(--shop-space-4) calc(var(--shop-space-3) + env(safe-area-inset-bottom));
	border-top: 1px solid var(--shop-border);
	height: auto !important;
}
main #filterModal .modal-content > .header {
	height: auto !important;
}
main #filterModal .modal-content > .filter {
	max-height: none !important;
	overflow: visible !important;
}
main #filterModal .modal-content .button.is-fullwidth {
	min-height: 3rem;
}

/* ---------- Paginering ---------- */
main #productlist .pagination-link,
main #productlist .pagination-previous {
	min-width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--shop-r-pill);
	border-color: var(--shop-border);
	color: var(--shop-fg-1);
}
main #productlist .pagination-link.is-current {
	background: var(--shop-brand);
	border-color: var(--shop-brand);
	color: var(--shop-fg-on-brand);
}

/* ---------- Mobiel ---------- */
@media screen and (max-width: 825px) {
	.shop-section__head {
		margin-bottom: var(--shop-space-4);
	}
	.shop-section__more {
		font-size: var(--shop-text-sm);
	}
	main .shop-hero {
		padding: var(--shop-space-3) var(--shop-space-4) 0;
	}
	.shop-hero__card {
		min-height: 420px;
	}
	.shop-hero__card::after {
		background: linear-gradient(0deg, rgba(10, 12, 16, 0.78) 0%, rgba(10, 12, 16, 0.4) 55%, rgba(10, 12, 16, 0) 85%);
	}
	main .shop-hero__cta {
		width: 100%;
	}
	.shop-hero__card--light::after {
		background: linear-gradient(0deg, color-mix(in srgb, var(--shop-bg-1) 82%, transparent) 0%, color-mix(in srgb, var(--shop-bg-1) 60%, transparent) 36%, color-mix(in srgb, var(--shop-bg-1) 0%, transparent) 72%);
	}
	.shop-hero__card--brand {
		align-items: flex-end;
		min-height: 380px;
	}
	.shop-hero__card--brand::after {
		background: radial-gradient(color-mix(in srgb, var(--shop-fg-on-brand) 22%, transparent) 1.4px, transparent 1.6px) 0 0 / 22px 22px;
		-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
		mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
	}
	.shop-hero__decor {
		top: var(--shop-space-5);
		right: var(--shop-space-5);
		width: 132px;
		transform: rotate(-4deg);
		box-shadow: var(--shop-shadow-md), 0 0 0 6px color-mix(in srgb, var(--shop-fg-on-brand) 14%, transparent);
	}
	.shop-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--shop-space-3);
	}
	.shop-tile {
		padding: var(--shop-space-4);
		gap: var(--shop-space-3);
	}
	.shop-tile__arrow {
		display: none;
	}
	/* uitgelicht: horizontaal swipen */
	.shop-products--scroll {
		display: flex !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--shop-gutter);
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--shop-gutter)) !important;
		padding: var(--shop-space-1) var(--shop-gutter) var(--shop-space-3);
		gap: var(--shop-space-3);
	}
	.shop-products--scroll::-webkit-scrollbar {
		display: none;
	}
	.shop-products--scroll > .shop-products__item {
		flex: 0 0 68%;
		scroll-snap-align: start;
	}
	.shop-section__foot {
		display: block;
	}
	.shop-section__foot .button {
		width: 100%;
	}
	main #productlist .products-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--shop-space-3);
	}
	main #productlist .products-wrapper .card-content {
		padding: var(--shop-space-3) !important;
	}
	main #productlist .products-wrapper .card-content .head {
		flex-direction: column;
		gap: 0;
	}
	main #productlist .products-wrapper .card-content .head p:first-child {
		font-size: var(--shop-text-md) !important;
	}
	main #productlist .productlist .columns.sort {
		flex-wrap: nowrap;
	}
	/* Twee kolommen op gsm: kleinere pil zodat "Smaak van de week" past. */
	main #productlist .products-wrapper .card > .card-image > .tags-wrapper,
	main .at-card__img > .tags-wrapper {
		top: 8px;
		left: 8px;
		right: 8px;
		gap: 4px;
	}
	main #productlist .products-wrapper .card > .card-image > .tags-wrapper > .tag,
	main .at-card__img > .tags-wrapper > .tag {
		padding: 4px 8px;
		font-size: 10px;
		line-height: 12px;
		gap: 5px;
	}
	main #productlist .productlist .columns.sort > .column.is-narrow.is-hidden-tablet {
		flex: 1;
	}
	main #productlist .productlist .columns.sort > .column.is-narrow.is-hidden-tablet .button {
		background: var(--shop-bg-1) !important;
		color: var(--shop-fg-1) !important;
		border: 1px solid var(--shop-border-strong) !important;
		box-shadow: none;
	}
	main #productlist .productlist .columns.sort > .column.shop-sort {
		flex: 0 1 auto;
		min-width: 0;
		margin-left: auto;
	}
	/* Zonder filterknop (die het aantal al toont): het aantal links, ook op gsm. */
	main #productlist .productlist .columns.sort:not(:has(> .is-hidden-tablet)) > .column.is-hidden-mobile {
		display: block !important;
		min-width: 0;
	}
	.shop-sort .select select {
		height: 44px;
		min-height: 44px;
	}
	main #productlist .productlist .columns.sort > .column.is-narrow.is-hidden-tablet {
		min-width: 0;
		flex: 1 0 auto;
	}
	main #productlist .productlist .columns.sort > .column.is-narrow.is-hidden-tablet .button {
		font-size: var(--shop-text-sm);
		padding-inline: 0.9rem;
		white-space: nowrap;
		gap: 0.35rem;
	}
	.shop-sort .select,
	.shop-sort .select select {
		max-width: 100%;
	}
	.shop-sort__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
}

/* ---------- Productlijst: lege toestand (0 resultaten, ook na filteren) ---------- */
main #productlist .shop-list-empty {
	margin-top: var(--shop-space-3);
}
main #productlist .shop-list-empty__icon {
	margin-bottom: var(--shop-space-3);
	color: var(--shop-fg-3);
}
main #productlist .shop-list-empty__icon svg {
	width: 2rem;
	height: 2rem;
}
main #productlist .shop-list-empty__title {
	color: var(--shop-fg-1);
	margin-bottom: var(--shop-space-2);
}
main #productlist .shop-list-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--shop-space-2);
	margin: var(--shop-space-5) 0 var(--shop-space-4);
}
main #productlist .shop-list-empty__contact {
	font-size: var(--shop-text-sm);
	color: var(--shop-fg-3);
}