/*
 * Merchado Flow — subcategorie-widget boven de categoriepagina.
 * Ontwerp: Paper "Merchado — Subcategorie-widget" (desktop 160px-tegels, mobiel
 * 104px in een veegbare rij). Staat binnen de Elementor-titelcontainer, direct
 * na de subtitel, en neemt daarmee diens zijmarges over (50px desktop, 20px mobiel).
 */

.mc-subcats {
	--mc-sc-ink: #1D1D1B;
	--mc-sc-cream: #EFEEE4;
	--mc-sc-brons: #9E491D;
	--mc-sc-tegel: 160px;
	width: 100%;
	padding: 26px 0 6px;
}

.mc-subcats__rij {
	display: flex;
	gap: 20px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.mc-subcats__rij::-webkit-scrollbar {
	display: none;
}

/* Meebuigen tot 110px, dan scrollen: acht tegels passen op 1340px, zeven op tablet. */
.mc-subcats__item {
	flex: 0 1 var(--mc-sc-tegel);
	min-width: 110px;
	margin: 0 !important;
	padding: 0 !important;
	scroll-snap-align: start;
}

.mc-subcats__link {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--mc-sc-ink) !important;
	text-decoration: none !important;
}

.mc-subcats__beeld {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--mc-sc-cream);
	overflow: hidden;
}
.mc-subcats__img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	transition: transform .35s ease;
}

/* "Alles"-tegel: typografisch, zodat hij niet als dubbele productfoto leest. */
.mc-subcats__beeld--alles {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	padding: 16px;
}
.mc-subcats__alles {
	font-family: Optima, 'Marcellus', serif;
	font-size: 22px;
	line-height: 26px;
	letter-spacing: .3px;
	color: var(--mc-sc-ink);
}
.mc-subcats__pijl {
	color: var(--mc-sc-brons);
	transition: transform .2s ease;
}

/* Naam, met een 2px lijn erboven die alleen bij de actieve tegel kleurt. */
.mc-subcats__tekst {
	display: flex;
	flex-direction: column;
	padding-top: 10px;
	border-top: 2px solid transparent;
}
.mc-subcats__naam {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 20px;
	font-weight: 500;
	color: var(--mc-sc-ink);
	/* Lange samenstellingen (Weekendtassen, Woonaccessoires) netjes afbreken
	   (Nederlands, via lang="nl-NL") in plaats van over de tegelrand te lopen. */
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
	/* De naam mag de tussenruimte meegebruiken (gap), zodat elke categorienaam
	   op één regel blijft; tegels zijn daarop gemaat (langste: 111px op 13px). */
	margin-right: -20px;
}

/* Desktop: de laatste naam heeft geen buur en de rij geen ruimte rechts; niet
   laten doorlopen, anders kan een volle rij (Fashion, 8 tegels) 20px wiebelen.
   Onder 1200px loopt de rij door tot de schermrand en is die ruimte er wel. */
@media (min-width: 1200px) {
	.mc-subcats__item:last-child .mc-subcats__naam {
		margin-right: 0 !important;
	}
}

.mc-subcats__item.is-actief .mc-subcats__tekst {
	border-top-color: var(--mc-sc-brons);
}
.mc-subcats__item.is-actief .mc-subcats__naam {
	font-weight: 600;
}

@media (hover: hover) {
	.mc-subcats__link:hover .mc-subcats__img {
		transform: scale(1.04);
	}
	.mc-subcats__link:hover .mc-subcats__naam {
		color: var(--mc-sc-brons);
	}
	.mc-subcats__link:hover .mc-subcats__pijl {
		transform: translateX(3px);
	}
}
.mc-subcats__link:focus-visible {
	outline: 2px solid var(--mc-sc-brons);
	outline-offset: 4px;
}

/* Lange rijen op desktop.
   - 1200-1439px, 8 tegels (Fashion): past precies op de rij met namen op 14px
     ("Petten & Mutsen" 110px op een tegel van 110px). Geen veegrij: die zou hier
     alleen lege ruimte rechts laten verschuiven.
   - 1200-1439px, 9+ tegels (Alle producten): past echt niet, dus dezelfde
     veegbare rij tot de schermrand als op tablet (~8,5 tegel in beeld).
   - Vanaf 1440px, 9+ tegels: namen op 14px en tegels minstens 116px, dan past
     de langste naam ("Fashion & Textile", 113px) met lucht en passen tien
     tegels precies op de rij. */
@media (min-width: 1200px) and (max-width: 1439px) {
	.mc-subcats__rij:has(> :nth-child(8)) .mc-subcats__naam {
		font-size: 14px;
		line-height: 19px;
	}
	/* Precies 8: de rij vult de breedte en hoeft niet te scrollen. De laatste
	   naam (vet als hij actief is) mag dan de paginamarge in, zonder scroll. */
	.mc-subcats__rij:has(> :nth-child(8)):not(:has(> :nth-child(9))) {
		overflow: visible;
	}
	.mc-subcats__rij:has(> :nth-child(8)):not(:has(> :nth-child(9))) .mc-subcats__item:last-child .mc-subcats__naam {
		margin-right: -20px !important;
	}
	.mc-subcats:has(.mc-subcats__item:nth-child(9)) {
		--mc-sc-rand: calc((100vw - 100%) / 2);
		--mc-sc-tegel: clamp(116px, calc((100vw - 210px) / 8.5), 150px);
		width: calc(100% + var(--mc-sc-rand));
		margin-right: calc(-1 * var(--mc-sc-rand));
	}
	.mc-subcats:has(.mc-subcats__item:nth-child(9)) .mc-subcats__rij {
		padding-right: var(--mc-sc-rand) !important;
	}
	.mc-subcats:has(.mc-subcats__item:nth-child(9)) .mc-subcats__item {
		flex: 0 0 var(--mc-sc-tegel);
	}
	.mc-subcats:has(.mc-subcats__item:nth-child(9)) .mc-subcats__item:last-child .mc-subcats__naam {
		margin-right: -20px !important;
	}
}
/* 1200-1249px is de inhoud nog maar 1024px breed (marge 88-108px): daar ~7,5
   tegel in beeld, anders valt de hint op een paar pixels. */
@media (min-width: 1200px) and (max-width: 1249px) {
	.mc-subcats:has(.mc-subcats__item:nth-child(9)) {
		--mc-sc-tegel: clamp(116px, calc((50vw + 372px) / 7.5), 150px);
	}
}
@media (min-width: 1440px) {
	.mc-subcats__rij:has(> :nth-child(9)) .mc-subcats__item {
		min-width: 116px;
	}
	.mc-subcats__rij:has(> :nth-child(9)) .mc-subcats__naam {
		font-size: 14px;
		line-height: 19px;
	}
}

/* Onder 1200px: een veegbare rij die tot aan de schermrand doorloopt, zodat de
   volgende tegel half zichtbaar is (de hint dat er meer is). De rij steekt uit
   de container-padding tot de rand: (100vw - 100%) / 2, want de container is
   gecentreerd. De container knipt op zijn eigen rand af (overflow-x: clip), zo
   kan een schuifbalk-breedte in 100vw de pagina nooit horizontaal laten schuiven. */
.e-con:has(> .e-con-inner > .mc-subcats) {
	overflow-x: clip;
}

@media (max-width: 1199px) {
	.mc-subcats {
		--mc-sc-rand: calc((100vw - 100%) / 2);
		/* ~5,4 tegels in beeld (de zesde half), meeschalend met de breedte. */
		--mc-sc-tegel: clamp(112px, calc(17.6vw - 18.5px), 160px);
		width: calc(100% + var(--mc-sc-rand));
		margin-right: calc(-1 * var(--mc-sc-rand));
	}
	.mc-subcats__rij {
		padding-right: var(--mc-sc-rand) !important;
	}
	.mc-subcats__item {
		flex: 0 0 var(--mc-sc-tegel);
		min-width: 0;
	}
	.mc-subcats__naam {
		font-size: 14px;
		line-height: 19px;
	}
}

/* Mobiel: tegelbreedte schaalt met het scherm zodat er altijd een tegel half
   in beeld staat, en nooit smaller dan nodig voor de langste naam (111px op
   13px) plus zichtbare lucht naar de volgende naam (tegel >= 113px): ~4,4
   tegels vanaf 600px, ~3,4 van 440 tot 599px, ~2,4 daaronder. */
@media (max-width: 767px) {
	.mc-subcats {
		--mc-sc-tegel: clamp(100px, calc((100vw - 68px) / 4.4), 160px);
		padding: 14px 0 0;
	}
	.mc-subcats__rij {
		gap: 12px;
	}
	.mc-subcats__link {
		gap: 10px;
	}
	.mc-subcats__beeld--alles {
		padding: 12px;
		gap: 4px;
	}
	.mc-subcats__alles {
		font-size: 18px;
		line-height: 22px;
	}
	.mc-subcats__pijl {
		width: 18px;
		height: 10px;
	}
	.mc-subcats__tekst {
		padding-top: 8px;
	}
	.mc-subcats__naam {
		font-size: 13px;
		line-height: 18px;
		margin-right: -12px;
	}
}

@media (max-width: 599px) {
	.mc-subcats {
		--mc-sc-tegel: clamp(113px, calc((100vw - 56px) / 3.4), 170px);
	}
}
@media (max-width: 439px) {
	.mc-subcats {
		--mc-sc-tegel: calc((100vw - 44px) / 2.45);
	}
}

/*
 * Zijbalk: de widget neemt werk over (klantfeedback 2026-09-29). Dit bestand
 * laadt alleen waar de widget staat, dus elders blijft de zijbalk ongewijzigd.
 * Merken, Kleuren en Prijs blijven altijd. Telkens ook de scheidingslijn
 * eronder, anders begint de zijbalk met een losse lijn.
 *   Desktop-zijbalk (archieftemplate 16166): kop 42f2e17, lijst 6ee166d,
 *   lijn 1b7440e, facet Producten 0924357, lijn abb00ab.
 *   Mobiel filtermenu (popup 2337): kop cd7472b, lijst 3609191, lijn 60b2267,
 *   facet Producten 443bc86, lijn 62d694d.
 */
/* Overal waar de widget staat: het blok "Categorieën". */
.elementor-16166 .elementor-element-42f2e17,
.elementor-16166 .elementor-element-6ee166d,
.elementor-16166 .elementor-element-1b7440e,
.elementor-2337 .elementor-element-cd7472b,
.elementor-2337 .elementor-element-3609191,
.elementor-2337 .elementor-element-60b2267 {
	display: none !important;
}
/* Alleen op categoriepagina's ook het filter "Producten" (de subcategorie-
   tegels zijn daar precies die producttypes). Op Alle producten blijft het:
   daar is het de enige manier om over alle categorieën op type te filteren. */
.mc-subcats-cat .elementor-16166 .elementor-element-0924357,
.mc-subcats-cat .elementor-16166 .elementor-element-abb00ab,
.mc-subcats-cat .elementor-2337 .elementor-element-443bc86,
.mc-subcats-cat .elementor-2337 .elementor-element-62d694d {
	display: none !important;
}