/* WallCatcher Winkel, onderdeel Menu (live sinds 0.5.3; ?menu=oud toont het oude)
 * 0.7.0 (29 sept): Muurcirkels + Eigen foto vooraan, Home en Materialen als kop
 * eruit, materiaallinks in Meer categorieën (6 kolommen) en in de voet.
 *
 * Alles hangt aan body.wcw-menu-nieuw. Kleuren uit header.css (:root):
 * tekst #444, lijn #e6e6e6, zacht #f6f5f2, salie #9aa285. Geen terracotta.
 *
 * Computer: paneel over de hele breedte direct onder de header, zoals het
 * zoekpaneel, pagina eronder gedimd (.wcw-mm-achter). position: fixed, want
 * Extra CSS zet .menu-primary-menu-container op position: relative.
 * Telefoon: in de lade, één kop tegelijk open.
 */

body.wcw-menu-nieuw .wcw-mm,
body.wcw-menu-nieuw .wcw-mm-knop {
	display: none;
}

.wcw-mm-achter[hidden] {
	display: none !important;
}

.wcw-mm a {
	text-decoration: none !important;
}

.wcw-mm-kop {
	margin: 0 0 12px;
	color: #8a8a80;
	font: 600 12px/1.3 "Open Sans", Arial, sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.wcw-mm-foto,
.wcw-mm-duim {
	display: block;
	overflow: hidden;
	background: var(--wcw-zacht);
}

.wcw-mm-foto img,
.wcw-mm-duim img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.wcw-mm-link {
	display: block;
	padding: 5px 0;
	color: #333 !important;
	font: 400 15px/1.35 "Open Sans", Arial, sans-serif;
}

.wcw-mm-link:hover,
.wcw-mm-link:focus-visible {
	color: #111 !important;
	text-decoration: underline !important;
	text-decoration-color: var(--wcw-salie) !important;
	text-underline-offset: 4px;
}

.wcw-mm-tegel {
	display: block;
	color: #222 !important;
}

.wcw-mm-tegel .wcw-mm-foto {
	aspect-ratio: 1 / 1;
	border-radius: 6px;
}

.wcw-mm-tekst {
	display: block;
	padding-top: 10px;
}

.wcw-mm-naam {
	display: block;
	color: #222;
	font: 600 15px/1.3 "Open Sans", Arial, sans-serif;
}

.wcw-mm-regel {
	display: block;
	margin-top: 2px;
	color: #777;
	font: 400 13px/1.35 "Open Sans", Arial, sans-serif;
}

.wcw-mm-tegel:hover img,
.wcw-mm-vorm:hover img {
	transform: scale(1.04);
}

.wcw-mm-tegel:hover .wcw-mm-naam,
.wcw-mm-vorm:hover .wcw-mm-naam {
	text-decoration: underline;
	text-decoration-color: var(--wcw-salie);
	text-underline-offset: 4px;
}

/* Materialen: vrijstaande foto's op wit, dus niet bijsnijden; multiply laat
   het wit opgaan in de zachte achtergrond */
.wcw-mm-tegel--materiaal .wcw-mm-foto img {
	object-fit: contain;
	padding: 10%;
	mix-blend-mode: multiply;
}

.wcw-mm-voet {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--wcw-lijn);
}

/* Meer categorieën (alleen Wanddecoratie): ingeklapt achter een knop links in
   de voet. Open: kleine grijze regels onder de voet. De links staan altijd in
   de HTML (Google), ook als ze ingeklapt zijn. */
.wcw-mm-meer-knop {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: #222 !important;
	font: 600 15px/1.3 "Open Sans", Arial, sans-serif !important;
	cursor: pointer;
}

.wcw-mm-meer-knop:hover,
.wcw-mm-meer-knop:focus-visible {
	color: #000 !important;
}

.wcw-mm-meer-knop svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s ease;
}

.wcw-mm-meer-knop[aria-expanded="true"] svg {
	transform: rotate(90deg);
}

.wcw-mm-meer {
	display: none;
	margin-top: 22px;
}

.wcw-mm-meer.is-open {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 30px;
}

.wcw-mm-alles {
	flex-shrink: 0;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #222 !important;
	font: 600 15px/1.3 "Open Sans", Arial, sans-serif;
}

.wcw-mm-alles svg,
.wcw-mm-knop svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Tweede link in de voet van Wanddecoratie (0.7.0): rustiger dan "Bekijk alle" */
.wcw-mm-alles--klein {
	color: #555 !important;
	font-weight: 500;
}

.wcw-mm-alles--klein + .wcw-mm-alles {
	margin-left: 28px;
}

.wcw-mm-alles:hover svg {
	transform: translateX(3px);
}

.wcw-mm-uitleg {
	margin: 0 0 14px;
	color: #555;
	font: 400 15px/1.5 "Open Sans", Arial, sans-serif;
}

/* ── Lettertype: zoals de knoppen op de homepage (22 sept) ──────────
   "Ontdek de collectie" en "Maak het met je eigen foto" zijn Open Sans 15px,
   gewicht 500, letterafstand 0,15px, geen hoofdletters. Het menu stond in
   Raleway 14px in hoofdletters en "Zoeken" in Open Sans 600. Nu één lettertype
   in de hele header. Twee id's in de selector: Extra CSS zet op de menukoppen
   een regel met #site-navigation en #menu-hoofdmenu. */
@media (min-width: 993px) {
	html body.wcw-menu-nieuw #site-navigation #menu-hoofdmenu > li > a.wcw-mm-top,
	html body.wcw-menu-nieuw #site-navigation #menu-hoofdmenu > li > a.wcw-mm-top > span,
	html body.wcw-menu-nieuw.wcw-header #masthead .wcw-iconen--desktop .wcw-zoek-open span {
		font-family: "Open Sans", Arial, sans-serif !important;
		font-size: 15px !important;
		font-weight: 500 !important;
		letter-spacing: .15px !important;
		text-transform: none !important;
	}
}

/* Pijltje naast de koppen met een uitklappaneel (Dennis 22 sept), zodat je
   ziet dat er bij hover meer komt. Dun, in de tekstkleur, iets lichter; draait
   om als het paneel open is. span::after (het thema gebruikt alleen ::before). */
@media (min-width: 993px) {
	html body.wcw-menu-nieuw #site-navigation #menu-hoofdmenu > li.wcw-mm-heeft > a.wcw-mm-top > span::after {
		content: "";
		display: inline-block;
		width: 6px;
		height: 6px;
		margin-left: 7px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		opacity: .55;
		transform: translateY(-3px) rotate(45deg);
		transition: transform .2s ease, opacity .2s ease;
	}

	html body.wcw-menu-nieuw #site-navigation #menu-hoofdmenu > li.wcw-mm-heeft.is-open > a.wcw-mm-top > span::after {
		opacity: .85;
		transform: translateY(1px) rotate(225deg);
	}
}

/* Zonder hoofdletters zijn de woorden smaller: iets meer ruimte ertussen
   (thema: 8,25px links en rechts). Tot 1365px blijven de kleinere waarden
   hieronder gelden, zodat het menu op één regel past. */
@media (min-width: 1366px) {
	html body.wcw-menu-nieuw #site-navigation #menu-hoofdmenu > li > a.wcw-mm-top {
		padding-left: 13px !important;
		padding-right: 13px !important;
	}
}

@media (min-width: 1210px) and (max-width: 1365px) {
	html body.wcw-menu-nieuw #site-navigation #menu-hoofdmenu > li > a.wcw-mm-top {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

@media (min-width: 993px) and (max-width: 1209px) {
	html body.wcw-menu-nieuw #site-navigation #menu-hoofdmenu > li > a.wcw-mm-top {
		padding-left: 5px !important;
		padding-right: 5px !important;
	}

	/* Met de pijltjes erbij 1px kleiner, anders te dicht op het zoekicoon */
	html body.wcw-menu-nieuw #site-navigation #menu-hoofdmenu > li > a.wcw-mm-top,
	html body.wcw-menu-nieuw #site-navigation #menu-hoofdmenu > li > a.wcw-mm-top > span {
		font-size: 14px !important;
	}
}

/* ── Computer ───────────────────────────────────────────────────────── */

@media (min-width: 993px) {
	/* Het knopje is er voor het toetsenbord: onzichtbaar tot het focus krijgt */
	body.wcw-menu-nieuw .wcw-mm-knop {
		display: inline-flex;
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		padding: 0;
		border: 0;
		background: none !important;
	}

	body.wcw-menu-nieuw .wcw-mm-knop:focus-visible {
		width: 24px;
		height: 24px;
		clip: auto;
		align-items: center;
		justify-content: center;
		color: #444;
		outline: 2px solid var(--wcw-salie);
	}

	/* Kop met een open paneel: dun saliegroen streepje eronder (in plaats van
	   de dikke zwarte lijn van het thema) */
	body.wcw-menu-nieuw #menu-hoofdmenu > li.wcw-mm-item > a.wcw-mm-top {
		position: relative;
	}

	body.wcw-menu-nieuw #menu-hoofdmenu > li.wcw-mm-item > a.wcw-mm-top::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 2px;
		height: 2px;
		background: var(--wcw-salie);
		transform: scaleX(0);
		transition: transform .18s ease;
	}

	body.wcw-menu-nieuw #menu-hoofdmenu > li.wcw-mm-item.is-open > a.wcw-mm-top::after,
	body.wcw-menu-nieuw #menu-hoofdmenu > li.wcw-mm-item > a.wcw-mm-top:hover::after {
		transform: scaleX(1);
	}

	/* Het oude menu had menu-items van 87px hoog (22-109), waardoor de header
	   op 128px eindigde, gelijk met de inhoud (body padding-top 127). Zonder
	   die 30px eindigde de header op 98 en viel er een grijze strook onder
	   (Dennis 22 sept). Ook: de ruimte tussen kop en paneel hoort zo bij de
	   kop, dus de muis verlaat het menu niet op weg naar het paneel. */
	body.wcw-menu-nieuw #menu-hoofdmenu > li.wcw-mm-item {
		padding-bottom: 30px !important;
	}

	body.wcw-menu-nieuw li.wcw-mm-heeft.is-open > .wcw-mm {
		display: block;
		position: fixed;
		z-index: 9991;
		left: 0;
		right: 0;
		top: var(--wcw-kop, 127px);
		max-height: calc(100vh - var(--wcw-kop, 127px) - 24px);
		overflow-y: auto;
		background: #fff;
		border-top: 1px solid #eee;
		box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
		text-align: left;
		cursor: default;
		animation: wcw-mm-in .16s ease-out;
	}

	@keyframes wcw-mm-in {
		from { opacity: 0; transform: translateY(-6px); }
		to { opacity: 1; transform: none; }
	}

	.wcw-mm-achter {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: var(--wcw-kop, 127px);
		z-index: 9990;
		background: rgba(20, 20, 20, .28);
	}

	.wcw-mm-binnen {
		max-width: 1280px;
		margin: 0 auto;
		padding: 30px 40px 26px;
	}

	/* Wanddecoratie: vorm (met foto's) | onderwerp | ruimte | twee grote tegels */
	.wcw-mm-raster--wand {
		display: grid;
		grid-template-columns: minmax(330px, 1.7fr) minmax(130px, .8fr) minmax(130px, .8fr) minmax(400px, 2.2fr);
		gap: 36px;
	}

	.wcw-mm-vormen {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px 20px;
	}

	/* !important: het thema zet menulinks op display: block */
	.wcw-mm-vorm {
		display: flex !important;
		align-items: center;
		gap: 14px;
		padding: 3px 0;
		color: #222 !important;
	}

	.wcw-mm-vorm .wcw-mm-duim {
		flex: 0 0 52px;
		width: 52px;
		height: 52px;
		border-radius: 4px;
	}

	/* Niet inzoomen: de hele mockup, zodat je de vorm ziet (Dennis 22 sept) */

	.wcw-mm-vorm .wcw-mm-naam {
		font-weight: 500;
	}

	.wcw-mm-uitgelicht {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}

	/* Muurcirkels: intro | 5 x 2 tegels */
	.wcw-mm-raster--cirkels {
		display: grid;
		grid-template-columns: 220px 1fr;
		gap: 40px;
	}

	.wcw-mm-tegels {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 18px 16px;
	}

	.wcw-mm-tegels .wcw-mm-tekst {
		padding-top: 8px;
	}

	.wcw-mm-tegel--breed .wcw-mm-regel {
		display: none;
	}

	/* Materialen: 2 | 6 */
	.wcw-mm-raster--mat {
		display: grid;
		grid-template-columns: 2fr 6fr;
		gap: 40px;
	}

	.wcw-mm-matgroep--alle .wcw-mm-mattegels {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.wcw-mm-matgroep--recht .wcw-mm-mattegels {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 16px;
	}

	.wcw-mm-matgroep--alle {
		padding-right: 40px;
		border-right: 1px solid var(--wcw-lijn);
	}

	/* Woonaccessoires: twee tegels, links uitgelijnd */
	.wcw-mm-raster--acc {
		display: grid;
		grid-template-columns: repeat(2, 260px);
		gap: 24px;
	}

	/* Paneel en dimlaag vallen onder de zoekbalk: bij zoeken het menu dicht
	   (menu.js), dit is de vangrail */
	html.wcw-zoeken-open body.wcw-menu-nieuw li.wcw-mm-heeft.is-open > .wcw-mm {
		display: none;
	}
}

/* Menubreedte op laptops (gemeten 22 sept). Het thema zet 69px marge links
   van het menu en de iconen rechts nemen 164px in (20 + 144). Bijgesteld
   zodat het menu op één regel past met ruimte tot het zoekicoon; eerst voor
   de proef met Muurcirkels als kop (breder), met HOME is er nog iets meer. */

/* Vanaf 1210: marge links 30 in plaats van 69. Ruimte rechts (header.css:
   170 tot 1365, 230 daarboven, met het woord "Zoeken") iets ruimer. */
@media (min-width: 1210px) {
	body.wcw-menu-nieuw .menu-primary-menu-container {
		margin-left: 30px !important;
	}

	body.wcw-menu-nieuw.wcw-header .shoptimizer-primary-navigation {
		--wcw-ruimte: 250px;
	}
}

@media (min-width: 1210px) and (max-width: 1365px) {
	body.wcw-menu-nieuw.wcw-header .shoptimizer-primary-navigation {
		--wcw-ruimte: 190px;
	}

	body.wcw-menu-nieuw #menu-hoofdmenu > li > a.wcw-mm-top {
		padding-left: 6px !important;
		padding-right: 6px !important;
	}
}

/* 993-1209 (logo 170px): rechts 180 (header.css: 150), geen marge links */
@media (min-width: 993px) and (max-width: 1209px) {
	body.wcw-menu-nieuw.wcw-header .shoptimizer-primary-navigation {
		padding-right: 180px !important;
	}

	body.wcw-menu-nieuw .menu-primary-menu-container {
		margin-left: 0 !important;
	}

	body.wcw-menu-nieuw #menu-hoofdmenu > li > a.wcw-mm-top {
		padding-left: 4px !important;
		padding-right: 4px !important;
	}
}

/* 0.7.0: Home is weg, dus het eerste item is Muurcirkels. header.css verbergt
   tussen 993 en 1099px het eerste item (dat was Home): hier weer tonen, en in
   plaats daarvan Blog verbergen (0 winkelmandjes uit blogs; staat ook in de
   footer). Twee klassen op body: wint van de regel in header.css. */
@media (min-width: 993px) and (max-width: 1099px) {
	body.wcw-menu-nieuw.wcw-header #menu-hoofdmenu > li:first-child {
		display: inline-block !important;
	}

	body.wcw-menu-nieuw.wcw-header #menu-hoofdmenu > li.wcw-mm-blog {
		display: none !important;
	}
}

/* Muurcirkels + Eigen foto zijn breder dan Home: iets minder ruimte tussen de
   koppen, anders loopt het menu tegen het logo (1210) of het zoekicoon (1100) */
@media (min-width: 1210px) and (max-width: 1365px) {
	html body.wcw-menu-nieuw #site-navigation #menu-hoofdmenu > li > a.wcw-mm-top {
		padding-left: 4px !important;
		padding-right: 4px !important;
	}
}

@media (min-width: 993px) and (max-width: 1209px) {
	html body.wcw-menu-nieuw #site-navigation #menu-hoofdmenu > li > a.wcw-mm-top {
		padding-left: 3px !important;
		padding-right: 3px !important;
	}
}

/* Panelen op smalle laptops: minder witruimte, kolommen smaller */
@media (min-width: 993px) and (max-width: 1209px) {
	.wcw-mm-binnen {
		padding: 24px 24px 20px;
	}

	.wcw-mm-raster--wand {
		grid-template-columns: 300px minmax(110px, 1fr) minmax(110px, 1fr) minmax(280px, 1.6fr);
		gap: 22px;
	}

	.wcw-mm-raster--cirkels {
		grid-template-columns: 170px 1fr;
		gap: 24px;
	}

	.wcw-mm-matgroep--alle {
		padding-right: 24px;
	}

	.wcw-mm-raster--mat {
		gap: 24px;
	}

	.wcw-mm-regel {
		font-size: 12px;
	}
}

/* ── Telefoon en tablet: in de lade ─────────────────────────────────── */

@media (max-width: 992px) {
	/* Home alleen op de computer */
	body.wcw-menu-nieuw #menu-hoofdmenu > li.wcw-mm-home {
		display: none !important;
	}

	body.wcw-menu-nieuw li.wcw-mm-heeft {
		position: relative;
	}

	/* Het thema zet op elke regel een "›" (li::after). Bij een uitklapper
	   staat daar ons pijltje omlaag, dat bij openen omdraait. */
	body.wcw-menu-nieuw #menu-hoofdmenu > li.wcw-mm-heeft::after {
		content: none !important;
		display: none !important;
	}

	/* De hele regel opent; het pijltje rechts laat zien dat het een uitklapper is */
	body.wcw-menu-nieuw .wcw-mm-knop {
		display: flex;
		position: absolute;
		top: 0;
		right: 10px;
		width: 44px;
		height: 56px;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		background: none !important;
		color: #444 !important;
		box-shadow: none !important;
		pointer-events: none; /* de tik gaat naar de regel zelf */
	}

	body.wcw-menu-nieuw .wcw-mm-knop svg {
		transition: transform .2s ease;
	}

	body.wcw-menu-nieuw li.wcw-mm-heeft.is-open > .wcw-mm-knop svg {
		transform: rotate(180deg);
	}

	body.wcw-menu-nieuw li.wcw-mm-heeft.is-open > .wcw-mm {
		display: block;
		padding: 4px 20px 18px;
		background: #fff;
	}

	body.wcw-menu-nieuw .wcw-mm-binnen {
		padding: 0;
	}

	.wcw-mm-kop {
		margin: 16px 0 10px;
	}

	.wcw-mm-voet {
		justify-content: flex-start;
		margin-top: 14px;
		padding-top: 12px;
	}

	/* Telefoon: eerst "Bekijk alle", daaronder de knop */
	.wcw-mm-voet:has(.wcw-mm-meer-knop) {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 14px;
	}

	.wcw-mm-voet .wcw-mm-alles {
		margin-left: 0;
	}

	.wcw-mm-meer.is-open {
		display: block;
		margin-top: 4px;
	}

	.wcw-mm-link {
		font-size: 15px;
	}

	/* Onderwerp en Ruimte als knoppen die doorlopen op de regel: kort, niet
	   eindeloos scrollen */
	.wcw-mm-kol:not(.wcw-mm-kol--vorm):not(.wcw-mm-intro) .wcw-mm-links,
	.wcw-mm-intro .wcw-mm-links {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.wcw-mm-kol .wcw-mm-links .wcw-mm-link {
		padding: 8px 14px;
		border: 1px solid var(--wcw-lijn);
		border-radius: 20px;
		background: var(--wcw-zacht);
		font-size: 14px;
		line-height: 1.2;
	}

	/* Wanddecoratie: vormen 4 naast elkaar met foto, daaronder de twee grote tegels */
	.wcw-mm-raster--wand {
		display: flex;
		flex-direction: column;
	}

	.wcw-mm-vormen {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 12px 10px;
	}

	.wcw-mm-vorm {
		display: block;
		color: #222 !important;
		text-align: center;
	}

	.wcw-mm-vorm .wcw-mm-duim {
		aspect-ratio: 1 / 1;
		border-radius: 6px;
	}


	.wcw-mm-vorm .wcw-mm-naam {
		margin-top: 6px;
		font: 500 12px/1.25 "Open Sans", Arial, sans-serif;
	}

	.wcw-mm-uitgelicht,
	.wcw-mm-raster--acc {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		margin-top: 18px;
	}

	.wcw-mm-uitgelicht .wcw-mm-regel,
	.wcw-mm-raster--acc .wcw-mm-regel {
		font-size: 12px;
	}

	.wcw-mm-naam {
		font-size: 14px;
	}

	/* Muurcirkels: 3 naast elkaar */
	.wcw-mm-raster--cirkels {
		display: flex;
		flex-direction: column-reverse;
	}

	.wcw-mm-intro .wcw-mm-kop,
	.wcw-mm-uitleg {
		display: none;
	}

	.wcw-mm-intro .wcw-mm-links {
		margin-top: 16px;
	}

	.wcw-mm-tegels {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 14px 10px;
		margin-top: 12px;
	}

	.wcw-mm-tegels .wcw-mm-tekst {
		padding-top: 6px;
		text-align: center;
	}

	/* 0.7.0: tien tegels in drie kolommen laat er één los staan. Op de
	   telefoon negen; Jungle (minst verkocht) staat ook onder Meer categorieën */
	.wcw-mm-tegels .wcw-mm-tegel:nth-child(10) {
		display: none !important;
	}

	.wcw-mm-tegels .wcw-mm-naam {
		font: 500 13px/1.25 "Open Sans", Arial, sans-serif;
	}

	/* Eigen foto: brede kaart over de hele breedte */
	.wcw-mm-tegels .wcw-mm-tegel--breed {
		display: flex !important;
		grid-column: 1 / -1;
		align-items: center;
		gap: 14px;
		padding: 8px;
		border-radius: 8px;
		background: var(--wcw-zacht);
	}

	.wcw-mm-tegel--breed .wcw-mm-foto {
		flex: 0 0 72px;
		width: 72px;
		height: 72px;
	}

	.wcw-mm-tegels .wcw-mm-tegel--breed .wcw-mm-tekst {
		padding: 0;
		text-align: left;
	}

	.wcw-mm-tegels .wcw-mm-tegel--breed .wcw-mm-naam {
		font: 600 15px/1.3 "Open Sans", Arial, sans-serif;
	}

	/* Materialen: regels met een kleine foto */
	.wcw-mm-mattegels {
		display: flex;
		flex-direction: column;
	}

	/* !important: het thema zet menulinks op display: block */
	.wcw-mm-tegel--materiaal {
		display: flex !important;
		align-items: center;
		gap: 14px;
		padding: 6px 0;
	}

	.wcw-mm-tegel--materiaal .wcw-mm-foto {
		flex: 0 0 52px;
		width: 52px;
		height: 52px;
		aspect-ratio: auto;
	}

	.wcw-mm-tegel--materiaal .wcw-mm-foto img {
		padding: 4px;
	}

	.wcw-mm-tegel--materiaal .wcw-mm-tekst {
		padding: 0;
	}
}

/* ── 0.7.1: de introkolom links in Muurcirkels, Muurovalen en Eigen foto ──
   Dennis, 29 sept: "valt wat in elkaar weg". Eerste versie had een eigen vlak
   en pijltjes; dat leidde af van de productfoto's. Nu alleen tekst: de kop in
   Libre Baskerville, de uitleg rustig eronder, de links onder elkaar met dunne
   lijnen ertussen.
   Het lettertype wordt pas geladen als het paneel opengaat. */
@font-face {
	font-family: "Libre Baskerville";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/wp-content/fonts/libre-baskerville/libre-baskerville-400.woff2") format("woff2");
}

@media (min-width: 993px) {
	.wcw-mm-raster--cirkels {
		grid-template-columns: 260px 1fr;
		gap: 36px;
	}

	/* Geen eigen vlak meer (Dennis, 29 sept: "leidt af van de productfoto's") */
	.wcw-mm-intro {
		align-self: start;
		padding: 2px 0 0;
	}

	.wcw-mm-intro .wcw-mm-kop {
		margin: 0 0 12px;
		color: #1f1f1f;
		font: 400 21px/1.3 "Libre Baskerville", Georgia, "Times New Roman", serif;
		letter-spacing: 0;
		text-transform: none;
	}

	.wcw-mm-intro .wcw-mm-uitleg {
		margin: 0 0 20px;
		color: #666;
		font-size: 14px;
		line-height: 1.65;
	}

	.wcw-mm-intro .wcw-mm-links {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
		border-top: 1px solid var(--wcw-lijn);
	}

	.wcw-mm-intro .wcw-mm-links .wcw-mm-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 11px 2px;
		border: 0;
		border-bottom: 1px solid var(--wcw-lijn);
		border-radius: 0;
		background: none;
		color: #222;
		font-size: 15px;
		font-weight: 400;
		transition: color .15s ease;
	}

	.wcw-mm-intro .wcw-mm-links .wcw-mm-link:last-child {
		border-bottom: 0;
	}

	.wcw-mm-intro .wcw-mm-links .wcw-mm-link:hover {
		color: #111;
		text-decoration: underline !important;
		text-decoration-color: var(--wcw-salie) !important;
		text-underline-offset: 4px;
	}
}

/* 0.8.0: framerand op de Artframe-tegels, zelfde lijn als op de productpagina
   (snippet 134) en /artframe/ (snippet 156). De plek van het werk staat als
   --vx/--vy/--vb/--vh op de fotovak. Pas zichtbaar als de foto geladen is
   (klasse .geladen via menu-0.8.1.js), anders zie je lege vakjes met lijstjes.
   De rand schaalt bij hover vanuit het midden van de FOTO mee, niet vanuit zijn
   eigen midden, anders schuift hij van het werk af. */
.wcw-mm-foto--frame {
	position: relative;
}

.wcw-mm-foto--frame::after {
	content: "";
	position: absolute;
	pointer-events: none;
	box-sizing: border-box;
	left: calc(var(--vx) * 100%);
	top: calc(var(--vy) * 100%);
	width: calc(var(--vb) * 100%);
	height: calc(var(--vh) * 100%);
	/* Dikte volgens dezelfde regel als de productpagina (snippet 134): 0,55% van
	   de breedte van het PRODUCT in beeld, gleuf de helft daarvan. In een tegel
	   is het product 70 tot 110 px breed, dus 0,4 tot 0,6 px, gleuf 0,3 px. Met de
	   2 px van 134 oogde de rand hier drie keer zo zwaar, en ook 1 px was nog te
	   aanwezig (Dennis, 30 sept). Een halve pixel is op Retina één schermpixel en
	   dus scherp; op een gewoon scherm rondt de browser hem af op 1 px. */
	border: .5px solid #181818;
	box-shadow: inset 0 0 0 .5px rgba(8, 8, 10, .3);
	transform-origin: calc((.5 - var(--vx)) / var(--vb) * 100%) calc((.5 - var(--vy)) / var(--vh) * 100%);
	transition: transform .35s ease;
	opacity: 0;
}

.wcw-mm-foto--frame.geladen::after {
	opacity: 1;
}

.wcw-mm-tegel:hover .wcw-mm-foto--frame::after {
	transform: scale(1.04);
}