/* WallCatcher Winkel, onderdeel Menu (live sinds 0.5.3; ?menu=oud toont het oude)
 *
 * 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(5, minmax(0, 1fr));
	gap: 36px;
}

.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;
}

.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;
	}
}

/* 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;
	}

	.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;
	}
}