/*
 * Secties van de pagina's
 * ------------------------------------------------------------------------
 * Elke sectie heeft een eigen blok hieronder, in dezelfde volgorde als op
 * de homepage. Kleuren komen uit de set van de sectie (tokens.css), dus
 * alles werkt in de lichte en de donkere modus.
 */

/* ---- Algemeen: kop boven een sectie -------------------------------------------- */

.mc-section-head {
	display: grid;
	gap: var(--sp-2);
	max-inline-size: 44rem;
}

.mc-section-head > * {
	margin: 0;
}

.mc-section-head .mc-lead {
	margin-block-start: var(--sp-2);
}

/* Afbeeldingen vullen hun kader altijd netjes. */
.mc-page img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* ==========================================================================
   1. Hero
   ========================================================================== */

.mc-hero {
	position: relative;
	display: grid;
	align-items: end;
	min-block-size: min(88svh, 52rem);
	padding-block: var(--sp-9) var(--sp-7);
	overflow: hidden;
	isolation: isolate;
	background: var(--night-bg);
	color: var(--c-text);
}

.mc-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.mc-hero__image {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* De wisselende beelden liggen boven de vaste foto. Elk beeld vloeit in en
   uit (1,6 s); het script zet .is-active op het beeld dat aan de beurt is.
   Zonder script blijven ze onzichtbaar en zie je de vaste foto. */
.mc-hero__slides,
.mc-hero__slide {
	position: absolute;
	inset: 0;
}

.mc-hero__slide {
	opacity: 0;
	transition: opacity 1.6s ease-in-out;
}

.mc-hero__slide.is-active {
	opacity: 1;
}

.mc-hero__slide img,
.mc-hero__slide video {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Donkere laag: onderaan en links het donkerst, waar de tekst staat. */
.mc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, rgb(8 13 15 / 0.92) 0%, rgb(8 13 15 / 0.55) 45%, rgb(8 13 15 / 0.35) 100%),
		linear-gradient(to right, var(--overlay) 0%, transparent 70%);
}

[dir="rtl"] .mc-hero::before {
	background:
		linear-gradient(to top, rgb(8 13 15 / 0.92) 0%, rgb(8 13 15 / 0.55) 45%, rgb(8 13 15 / 0.35) 100%),
		linear-gradient(to left, var(--overlay) 0%, transparent 70%);
}

.mc-hero__content {
	display: grid;
	gap: var(--sp-4);
	justify-items: start;
}

.mc-hero__content > * {
	margin: 0;
}

.mc-hero__title {
	max-inline-size: 16ch;
	color: #fff;
	/* Kleiner dan de gewone grote kop: op een pc-scherm hoogstens 4,25rem (68px). */
	font-size: clamp(2.4rem, 1.5rem + 3.2vw, 4.25rem);
}

.mc-hero__lead {
	color: var(--c-text-2);
	max-inline-size: 34em;
}

.mc-hero__actions {
	margin-block-start: var(--sp-2);
}

.mc-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-5);
	margin-block-start: var(--sp-4) !important;
	font-size: var(--fs-sm);
	color: var(--c-text-2);
}

.mc-hero__meta span {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
}

/* Vanaf 900px staat dit in de topbalk; niet twee keer tonen (ook niet voor schermlezers). */
@media (min-width: 900px) {
	.mc-hero__meta { display: none; }
}

/* Pauzeknop rechtsonder. */
.mc-hero__toggle {
	position: absolute;
	inset-inline-end: var(--gutter);
	inset-block-end: var(--sp-5);
	display: inline-grid;
	place-items: center;
	inline-size: var(--tap-min);
	block-size: var(--tap-min);
	padding: 0;
	color: #fff;
	background: rgb(8 13 15 / 0.45);
	border: 1px solid rgb(255 255 255 / 0.4);
	border-radius: var(--radius-pill);
	cursor: pointer;
}

.mc-hero__toggle[hidden] { display: none; }
.mc-hero__toggle .mc-hero__icon-play { display: none; }
.mc-hero__toggle.is-paused .mc-hero__icon-play { display: block; }
.mc-hero__toggle.is-paused .mc-hero__icon-pause { display: none; }

/* ==========================================================================
   2. Waarom (USP's)
   ========================================================================== */

.mc-usps {
	padding-block: var(--sp-7);
}

.mc-usps__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--sp-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-usps__item {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--sp-4);
	row-gap: var(--sp-1);
	align-items: start;
}

.mc-usps__icon {
	grid-row: span 2;
	display: inline-grid;
	place-items: center;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	color: var(--c-accent);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
}

.mc .mc-usps__title {
	margin: 0;
	font-family: var(--font-text);
	font-size: var(--fs-base);
	font-weight: 600;
	letter-spacing: 0;
}

.mc-usps__text {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--c-text-2);
}

/* Overgang: een omgekeerde band (bijv. de reviews) begint in de kleur van
   de pagina erboven en loopt in een extra hoge bovenmarge weg naar zijn
   eigen kleur (--mc-dusk in tokens.css). De tekst begint pas na de
   overgang, dus het contrast blijft overal goed. */
.mc-dusk {
	padding-block-start: calc(var(--sp-section) * 1.6);
	background-image: var(--mc-dusk);
	background-repeat: no-repeat;
	background-size: 100% calc(var(--sp-section) * 1.35);
}

/* ==========================================================================
   3. Diensten per categorie
   ========================================================================== */

.mc-cats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-cat__link {
	position: relative;
	display: grid;
	align-items: end;
	aspect-ratio: 4 / 3; /* telefoon: liggend, anders wordt de lijst erg lang */
	overflow: hidden;
	border-radius: var(--radius-l);
	text-decoration: none;
	background: var(--night-surface);
	isolation: isolate;
}

@media (min-width: 640px) {
	.mc-cat__link { aspect-ratio: 4 / 5; }
}

.mc-cat__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	transition: transform var(--dur-slow) var(--ease-out);
}

.mc-cat__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgb(8 13 15 / 0.9) 0%, rgb(8 13 15 / 0.35) 55%, rgb(8 13 15 / 0.05) 100%);
}

.mc-cat__link:hover .mc-cat__media,
.mc-cat__link:focus-visible .mc-cat__media {
	transform: scale(1.04);
}

.mc-cat__body {
	display: grid;
	gap: var(--sp-2);
	padding: var(--sp-5);
	color: var(--c-text);
}

.mc-cat__name {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: 600;
	line-height: 1.05;
}

.mc-cat__desc {
	font-size: var(--fs-sm);
	color: var(--c-text-2);
}

.mc-cat__meta {
	font-size: var(--fs-xs);
	font-weight: 600;
	font-stretch: var(--label-stretch);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-brass);
}

.mc-cat__more {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: #fff;
}

/* ==========================================================================
   4. Team
   ========================================================================== */

.mc-team__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-person {
	position: relative;
	display: grid;
	overflow: hidden;
	border-radius: var(--radius-l);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
}

.mc-person__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--c-alt);
}

.mc-person__media img {
	transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out);
}

.mc-person__placeholder {
	display: grid;
	place-items: center;
	block-size: 100%;
	color: var(--c-text-3);
}

.mc-person__caption {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0 var(--sp-3);
	padding: var(--sp-4) var(--sp-5);
}

.mc .mc-person__name {
	margin: 0;
	font-size: var(--fs-lg);
}

.mc-person__role {
	grid-column: 1;
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--c-text-2);
}

.mc-person__toggle {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: inline-grid;
	place-items: center;
	inline-size: var(--tap-min);
	block-size: var(--tap-min);
	padding: 0;
	color: var(--c-accent);
	background: transparent;
	border: 1px solid var(--c-line-control);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

/* De tekst in de knop is voor schermlezers; zichtbaar is alleen het plusje. */
.mc-person__toggle span {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* De introtekst. Zonder JavaScript: gewoon onder de kaart. */
.mc-person__intro {
	padding: var(--sp-5);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.mc-person__intro p {
	margin: 0 0 var(--sp-3);
}

.mc-person__intro-name {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 600;
}

/*
 * Met JavaScript (.is-enhanced): de tekst ligt over de foto en schuift
 * omhoog bij hover (muis), bij focus in de kaart (toetsenbord) of na een
 * tik op de knop (.is-open).
 */
.mc-person.is-enhanced .mc-person__intro {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	max-block-size: 100%;
	overflow-y: auto;
	transform: translateY(101%);
	visibility: hidden;
	transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}

.mc-person.is-enhanced.is-open .mc-person__intro,
.mc-person.is-enhanced:focus-within .mc-person__intro {
	transform: none;
	visibility: visible;
	transition: transform var(--dur-base) var(--ease-out), visibility 0s;
}

@media (hover: hover) and (pointer: fine) {
	.mc-person.is-enhanced:hover .mc-person__intro {
		transform: none;
		visibility: visible;
		transition: transform var(--dur-base) var(--ease-out), visibility 0s;
	}
	.mc-person:hover .mc-person__media img {
		transform: scale(1.03);
		filter: saturate(0.85);
	}
}

.mc-person.is-open .mc-person__toggle {
	transform: rotate(45deg);
	background: var(--c-accent);
	color: var(--c-on-accent);
	position: relative;
	z-index: 2;
}

/* ==========================================================================
   5. Uitgelicht (head spa): petrolband met embleem
   ========================================================================== */

.mc-spa__grid {
	display: grid;
	gap: var(--sp-7);
	align-items: center;
	justify-items: center;
}

@media (min-width: 900px) {
	.mc-spa__grid {
		grid-template-columns: minmax(16rem, 0.8fr) 1.2fr;
		justify-items: stretch;
		gap: var(--sp-8);
	}
}

/* Het embleem: het icoon in een zacht oplichtende cirkel met een messing
   ring die heel langzaam draait (zie motion.css). */
.mc-spa__emblem {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: min(18rem, 70vw);
	aspect-ratio: 1;
	margin-inline: auto;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 42%, rgb(255 255 255 / 0.14), transparent 62%),
		radial-gradient(circle, #114846 0 58%, transparent 59%);
}

.mc-spa__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	/* Een onderbroken messing ring: stukjes van 6 graden met gaten ertussen. */
	background: repeating-conic-gradient(var(--c-brass) 0 6deg, transparent 6deg 15deg);
	-webkit-mask: radial-gradient(circle, transparent calc(70% - 2px), #000 calc(70% - 1px) 71%, transparent calc(71% + 1px));
	mask: radial-gradient(circle, transparent calc(70% - 2px), #000 calc(70% - 1px) 71%, transparent calc(71% + 1px));
	opacity: 0.9;
}

.mc-spa__icon.mc-icon {
	inline-size: 42%;
	block-size: 42%;
	color: var(--c-brass);
	stroke-width: 1.25;
}

.mc-spa__body > * {
	margin-block: 0;
}

.mc-spa__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-spa__facts li {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-4);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.mc-spa__facts .mc-icon {
	color: var(--c-brass);
}

/* ==========================================================================
   6. Feed
   ========================================================================== */

.mc-feed__head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--sp-4);
	max-inline-size: none;
}

/*
 * De rij begint op dezelfde lijn als de rest van de pagina. --feed-pad is
 * zowel de binnenruimte als de "snap"-marge; als die twee verschillen,
 * schuift de browser de rij bij het laden een stukje op.
 */
.mc-feed {
	--feed-pad: var(--gutter);
}

@media (min-width: 1300px) {
	.mc-feed {
		--feed-pad: calc((100vw - var(--container)) / 2);
	}
}

.mc-feed__scroller {
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline mandatory;
	scroll-padding-inline: var(--feed-pad);
	scrollbar-width: thin;
	padding-block: var(--sp-2) var(--sp-4);
}

.mc-feed__scroller:focus-visible {
	outline-offset: -3px;
}

.mc-feed__list {
	display: flex;
	gap: var(--sp-4);
	margin: 0;
	padding: 0 var(--feed-pad);
	list-style: none;
	inline-size: max-content;
}

.mc-feed__item {
	flex: none;
	inline-size: min(72vw, 20rem);
	scroll-snap-align: start;
}

.mc-feed__figure {
	margin: 0;
}

.mc-feed__media {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius-m);
	background: var(--c-surface);
}

.mc-feed__media video {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.mc-feed__badge {
	position: absolute;
	inset-block-start: var(--sp-3);
	inset-inline-end: var(--sp-3);
	display: inline-grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	color: #fff;
	background: rgb(8 13 15 / 0.55);
	border-radius: var(--radius-pill);
	pointer-events: none;
}

.mc-feed__consent {
	display: grid;
	place-items: center;
	align-content: center;
	gap: var(--sp-3);
	block-size: 100%;
	padding: var(--sp-5);
	text-align: center;
	color: var(--c-text-2);
}

.mc-feed__consent p {
	margin: 0;
}

.mc-feed__consent-note {
	font-size: var(--fs-xs);
}

.mc-feed__embed {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

.mc-feed__caption {
	margin-block-start: var(--sp-3);
	font-size: var(--fs-sm);
	color: var(--c-text-2);
}

.mc-feed__caption a {
	margin-inline-start: var(--sp-1);
	color: var(--c-accent);
}

/* ==========================================================================
   7. Reviews
   ========================================================================== */

.mc-reviews__inner {
	display: grid;
	justify-items: center;
	gap: var(--sp-3);
	text-align: center;
}

.mc-reviews__inner > * {
	margin: 0;
}

.mc-reviews__score {
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
}

.mc-reviews__number {
	font-family: var(--font-display);
	font-size: clamp(4rem, 2.5rem + 7vw, 7.5rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
}

.mc-reviews__out-of {
	font-size: var(--fs-md);
	color: var(--c-text-2);
}

/*
 * Sterren: twee rijen over elkaar. De onderste is grijs; de bovenste is
 * messing en wordt afgesneden op --mc-stars-fill (berekend in reviews.php,
 * inclusief de ruimte tussen de sterren).
 */
.mc-reviews__stars {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.mc-reviews__stars-empty,
.mc-reviews__stars-full {
	display: inline-flex;
	gap: var(--sp-1);
}

.mc-reviews__stars-empty {
	color: var(--c-line);
}

.mc-reviews__stars-full {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	color: var(--c-brass);
	clip-path: inset(0 calc(100% - var(--mc-stars-fill, 100%)) 0 0);
}

[dir="rtl"] .mc-reviews__stars-full {
	clip-path: inset(0 0 0 calc(100% - var(--mc-stars-fill, 100%)));
}

/* Maten horen bij de berekening in reviews.php: 1,75rem per ster, 0,25rem ertussen. */
.mc-reviews__stars .mc-icon {
	inline-size: 1.75rem;
	block-size: 1.75rem;
}

.mc-reviews__stars-empty,
.mc-reviews__stars-full {
	gap: 0.25rem;
}

.mc-reviews__source {
	font-size: var(--fs-md);
}

.mc-reviews__note {
	max-inline-size: 36rem;
	font-size: var(--fs-xs);
	color: var(--c-text-3);
}

/* ==========================================================================
   8. Kom langs
   ========================================================================== */

.mc-visit__grid {
	display: grid;
	gap: var(--sp-7);
	align-items: center;
}

@media (min-width: 900px) {
	.mc-visit__grid {
		grid-template-columns: 1.2fr 1fr;
	}
}

.mc-visit__body > * {
	margin-block: 0;
}

.mc-visit .mc-hours {
	max-inline-size: 26rem;
	font-size: var(--fs-base);
}

.mc-visit__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--radius-l);
}

/* ==========================================================================
   Paginakop (alle pagina's behalve de homepage)
   ========================================================================== */

.mc-pagehead {
	position: relative;
	isolation: isolate;
	padding-block: var(--sp-8) var(--sp-7);
	overflow: hidden;
}

.mc-pagehead--image {
	padding-block: var(--sp-9) var(--sp-7);
	background: var(--night-bg);
}

.mc-pagehead__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.mc-pagehead--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgb(8 13 15 / 0.9) 0%, var(--overlay) 60%, rgb(8 13 15 / 0.45) 100%);
}

.mc-pagehead__inner {
	display: grid;
	gap: var(--sp-3);
	max-inline-size: 48rem;
}

.mc-pagehead__inner > * {
	margin: 0;
}

.mc-pagehead--image .mc-pagehead__title {
	color: #fff;
}

/* Ankermenu onder de paginakop (bijv. Heren · Dames · Nagels). */
.mc-anchors {
	position: sticky;
	inset-block-start: 3.75rem;
	z-index: 20;
	background: color-mix(in srgb, var(--c-bg) 94%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-block-end: 1px solid var(--c-line);
}

.admin-bar .mc-anchors { inset-block-start: calc(3.75rem + 32px); }

.mc-anchors ul {
	display: flex;
	gap: var(--sp-2);
	margin: 0;
	padding: var(--sp-3) 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.mc-anchors a .mc-icon {
	color: var(--c-accent);
}

.mc-anchors a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-block-size: 2.5rem;
	padding-inline: var(--sp-4);
	font-size: var(--fs-sm);
	font-weight: 500;
	white-space: nowrap;
	color: var(--c-text);
	text-decoration: none;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
}

/* Op een telefoon: alle knoppen naast elkaar in even brede vakjes, het pictogram
   boven de naam, zodat ze allemaal in beeld staan (zonder opzij vegen) en de
   balk laag blijft. Bij meer dan vijf categorieën mag de rij weer vegen. */
@media (max-width: 639.98px) {
	.mc-anchors ul {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(4rem, 1fr);
		gap: var(--sp-2);
	}
	.mc-anchors a {
		flex-direction: column;
		justify-content: center;
		gap: 0.15rem;
		inline-size: 100%;
		min-block-size: 3.25rem;
		padding: 0.35rem 0.125rem;
		font-size: var(--fs-xs);
		border-radius: var(--radius-m);
	}
}

/* Op een groter scherm: de knoppen in het midden, even breed, met ruimte ertussen. */
@media (min-width: 640px) {
	.mc-anchors ul {
		justify-content: center;
		gap: var(--sp-3);
	}
	.mc-anchors li {
		flex: 0 1 11rem;
	}
	.mc-anchors a {
		inline-size: 100%;
		justify-content: center;
	}
}

.mc-anchors a:hover {
	border-color: var(--c-accent);
	color: var(--c-accent);
}

/* Een sprong naar een anker landt niet onder de vaste header. */
.mc-page [id] {
	scroll-margin-block-start: 8rem;
}

/* ==========================================================================
   Prijslijst
   ========================================================================== */

.mc-pricelist {
	display: grid;
	gap: var(--sp-8);
}

.mc-pricelist__group {
	display: grid;
	gap: var(--sp-5);
}

/* Onderdelen mogen smaller worden dan hun inhoud (foto, kop met label),
   zodat niets op een heel smal scherm buiten beeld valt. */
.mc-pricelist__group > * {
	min-inline-size: 0;
}

@media (min-width: 900px) {
	.mc-pricelist__group {
		grid-template-columns: 18rem 1fr;
		gap: var(--sp-7);
		align-items: start;
	}
	.mc-pricelist__aside {
		position: sticky;
		inset-block-start: 10rem;
	}
}

.mc-pricelist__aside {
	display: grid;
	gap: var(--sp-3);
}

.mc-pricelist__aside > * { margin: 0; min-inline-size: 0; }

.mc-pricelist__photo {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-m);
}

.mc-pricelist__staff {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-sm);
	color: var(--c-text-2);
}

.mc-pricelist__staff li {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
}

.mc-pricelist__staff img,
.mc-pricelist__staff .mc-avatar {
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	object-fit: cover;
}

.mc-avatar {
	display: inline-grid;
	place-items: center;
	background: var(--c-alt);
	color: var(--c-text-2);
	font-weight: 600;
	font-size: var(--fs-xs);
}

.mc-pricelist__lists {
	display: grid;
	gap: var(--sp-6);
}

/* Kopje binnen een categorie, met een klein messing streepje ervoor. */
.mc-prices__title {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin: 0 0 calc(var(--sp-6) * -1 + var(--sp-3));
	font-family: var(--font-text);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-kicker, var(--c-accent));
}

.mc-prices__title::before {
	content: "";
	inline-size: 1.5rem;
	block-size: 2px;
	background: var(--c-brass, currentColor);
}

.mc-prices {
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--c-line);
}

.mc-price {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto; /* een lange naam loopt door op de volgende regel */
	gap: var(--sp-1) var(--sp-4);
	align-items: baseline;
	padding-block: var(--sp-4);
	border-block-end: 1px solid var(--c-line);
}

.mc-price__name {
	font-weight: 600;
	overflow-wrap: break-word;
}

/* Stippellijn tussen naam en prijs, zoals op een prijsbord in de zaak. */
.mc-price__name::after {
	content: "";
}

.mc-price__amount {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

.mc-price__amount.is-empty {
	font-weight: 400;
	color: var(--c-text-2);
}

.mc-price__meta {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1) var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--c-text-2);
}

.mc-price__meta span {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
}

.mc-price__desc {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--c-text-2);
}

.mc-price__book {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-accent);
	text-decoration: none;
}

.mc-price__book:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Tekst uit de editor (verhaal, head spa, juridische pagina's)
   ========================================================================== */

.mc-prose {
	max-inline-size: var(--container-narrow);
	font-size: var(--fs-md);
	line-height: 1.7;
}

.mc-prose > * { margin-block: 0 var(--sp-5); }
.mc-prose > :last-child { margin-block-end: 0; }
.mc-prose h2 { font-size: var(--fs-xl); margin-block-start: var(--sp-7); }
.mc-prose h3 { font-size: var(--fs-lg); margin-block-start: var(--sp-6); }

/* ==========================================================================
   Tijdlijn (ons verhaal)
   ========================================================================== */

.mc-timeline {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mc-step;
}

.mc-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: var(--sp-4);
	padding-block-end: var(--sp-6);
}

.mc-timeline__item::before {
	content: "";
	position: absolute;
	inset-block: 3rem 0;
	inset-inline-start: 1.5rem;
	border-inline-start: 1px dashed var(--c-brass);
}

.mc-timeline__item:last-child::before { display: none; }

.mc-timeline__dot {
	display: inline-grid;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	color: var(--c-accent);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: 50%;
}

.mc-timeline__body > * { margin: 0; }

.mc-timeline__place {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 600;
}

.mc-timeline__text {
	margin-block-start: var(--sp-1) !important;
	color: var(--c-text-2);
}

/* ==========================================================================
   Stappen (head spa)
   ========================================================================== */

.mc-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mc-step;
}

.mc-steps li {
	counter-increment: mc-step;
	display: grid;
	gap: var(--sp-2);
	padding: var(--sp-5);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-l);
}

.mc-steps li::before {
	content: counter(mc-step, decimal-leading-zero);
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: 600;
	color: var(--c-brass);
	line-height: 1;
}

.mc-steps h3 { margin: 0; font-size: var(--fs-md); }
.mc-steps p { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); }

/* ==========================================================================
   Producten
   ========================================================================== */

.mc-products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-product {
	display: grid;
	gap: var(--sp-3);
}

.mc-product__media {
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius-m);
	background: #fff; /* productfoto's hebben meestal een witte achtergrond */
	border: 1px solid var(--c-line);
}

.mc-page .mc-product__media img {
	object-fit: contain;
	padding: var(--sp-4);
}

.mc-product__name {
	margin: 0;
	font-family: var(--font-text);
	font-size: var(--fs-base);
	font-weight: 600;
	letter-spacing: 0;
}

.mc-product__price {
	margin: 0;
	font-variant-numeric: tabular-nums;
	color: var(--c-text-2);
}

/* ==========================================================================
   Galerij
   ========================================================================== */

.mc-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-gallery li {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-m);
}

/* ==========================================================================
   Contact
   ========================================================================== */

.mc-contact__grid {
	display: grid;
	gap: var(--sp-7);
}

@media (min-width: 900px) {
	.mc-contact__grid {
		grid-template-columns: 1fr 1.2fr;
		gap: var(--sp-8);
	}
}

.mc-contact__cards {
	display: grid;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-contact__card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-1) var(--sp-4);
	align-items: center;
	padding: var(--sp-4) var(--sp-5);
	color: var(--c-text);
	text-decoration: none;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
	transition: border-color var(--dur-fast) var(--ease-out);
}

a.mc-contact__card:hover {
	border-color: var(--c-accent);
}

.mc-contact__card .mc-icon {
	grid-row: span 2;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	color: var(--c-accent);
}

.mc-contact__label {
	font-size: var(--fs-xs);
	font-weight: 600;
	font-stretch: var(--label-stretch);
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	color: var(--c-text-2);
}

.mc-contact__value {
	font-weight: 600;
}

/* Kaart: pas laden na een klik. */
.mc-map {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--radius-l);
	background: var(--c-alt);
	isolation: isolate;
}

.mc-map__placeholder {
	position: absolute;
	inset: 0;
	z-index: -1;
	filter: grayscale(0.4) blur(1px);
	opacity: 0.55;
}

.mc-map__consent {
	display: grid;
	justify-items: center;
	gap: var(--sp-3);
	max-inline-size: 26rem;
	padding: var(--sp-6);
	text-align: center;
	background: color-mix(in srgb, var(--c-bg) 90%, transparent);
	border-radius: var(--radius-l);
}

.mc-map__consent p { margin: 0; }
.mc-map__note { font-size: var(--fs-xs); color: var(--c-text-2); }

.mc-map iframe {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

/* Formulier */
.mc-form {
	display: grid;
	gap: var(--sp-4);
	padding: var(--sp-6);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-l);
}

.mc-form > *,
.mc-field > * {
	margin: 0;
	min-inline-size: 0; /* velden mogen het formulier niet breder maken dan het scherm */
}

/* Op een heel smal scherm wat minder binnenruimte, zodat de velden breed genoeg blijven. */
@media (max-width: 400px) {
	.mc-form { padding: var(--sp-4); }
}

.mc-field {
	display: grid;
	gap: var(--sp-2);
}

.mc-field label,
.mc-field legend {
	font-size: var(--fs-sm);
	font-weight: 600;
}

.mc-field input,
.mc-field textarea,
.mc-field select {
	inline-size: 100%;
	min-inline-size: 0;
	min-block-size: var(--tap-min);
	padding: 0.65rem 0.85rem;
	font: inherit;
	font-size: max(16px, var(--fs-base)); /* 16px voorkomt inzoomen op iPhone */
	color: var(--c-text);
	background: var(--c-bg);
	border: 1px solid var(--c-line-control);
	border-radius: var(--radius-s);
}

.mc-field textarea {
	min-block-size: 8rem;
	resize: vertical;
}

.mc-field input:focus-visible,
.mc-field textarea:focus-visible {
	outline: 3px solid var(--c-focus);
	outline-offset: 1px;
}

.mc-field__hint {
	font-size: var(--fs-xs);
	color: var(--c-text-2);
}

.mc-field--row {
	display: grid;
	gap: var(--sp-4);
}

@media (min-width: 640px) {
	.mc-field--row { grid-template-columns: 1fr 1fr; }
}

.mc-check {
	display: flex;
	gap: var(--sp-3);
	align-items: flex-start;
	font-size: var(--fs-sm);
}

.mc-check input {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin-block-start: 0.15em;
	accent-color: var(--c-accent);
}

/* Een vinkje krimpt niet bij een lange tekst ernaast, en krijgt niet de
   opvulling en hoogte van een gewoon invoerveld (.mc-field input). */
.mc-check input[type="checkbox"],
.mc-check input[type="radio"] {
	flex: none;
	min-block-size: 0;
	padding: 0;
	margin-inline: 0;
}

/* Het vak van Cloudflare Turnstile. Vaste minimale hoogte, zodat de knop
   eronder niet verspringt als het vak verschijnt (65px volgens Cloudflare). */
.mc-form__check {
	display: grid;
	gap: var(--sp-2);
}

.mc-form__check .cf-turnstile {
	min-block-size: 65px;
}

.mc-form button[disabled] {
	opacity: 0.55;
	cursor: progress;
}

.mc-form__wait {
	margin-block-start: calc(var(--sp-2) * -1) !important;
}

/* Onzichtbaar veld tegen spambots (honeypot). Niet display:none: sommige bots slaan dat over. */
.mc-hp {
	position: absolute !important;
	inset-inline-start: -10000px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

.mc-notice {
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--radius-m);
	border: 1px solid var(--c-line);
	background: var(--c-surface);
}

.mc-notice--success { border-color: var(--c-accent); }
.mc-notice--error { border-color: var(--c-error); color: var(--c-text); }

/* ==========================================================================
   Blokstijlen uit de editor: lijst als "Tijdlijn" of als "Stappen"
   ========================================================================== */

.mc-prose .is-style-mc-timeline {
	margin-inline: 0;
	padding: 0;
	list-style: none;
}

.mc-prose .is-style-mc-timeline > li {
	position: relative;
	padding-inline-start: 2.75rem;
	padding-block-end: var(--sp-5);
}

/* De stip */
.mc-prose .is-style-mc-timeline > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.4rem;
	inset-block-start: 0.45em;
	inline-size: 0.9rem;
	block-size: 0.9rem;
	border: 2px solid var(--c-accent);
	border-radius: 50%;
	background: var(--c-bg);
}

/* De stippellijn naar de volgende stip */
.mc-prose .is-style-mc-timeline > li:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-inline-start: 0.83rem;
	inset-block: 1.6em 0;
	border-inline-start: 1px dashed var(--c-brass);
}

.mc-prose .is-style-mc-timeline strong {
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 600;
	color: var(--c-text);
}

.mc-prose .is-style-mc-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--sp-4);
	margin-inline: 0;
	padding: 0;
	list-style: none;
	counter-reset: mc-step;
	font-size: var(--fs-base);
}

.mc-prose .is-style-mc-steps > li {
	counter-increment: mc-step;
	display: grid;
	align-content: start;
	gap: var(--sp-2);
	padding: var(--sp-5);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-l);
}

.mc-prose .is-style-mc-steps > li::before {
	content: counter(mc-step, decimal-leading-zero);
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: 600;
	line-height: 1;
	color: var(--c-brass);
}

.mc-prose .is-style-mc-steps strong {
	display: block;
	color: var(--c-text);
}

/* ==========================================================================
   Dames & prijzen
   ========================================================================== */

.mc-ladies {
	display: grid;
	gap: var(--sp-7);
	align-items: start;
}

@media (min-width: 1000px) {
	.mc-ladies {
		grid-template-columns: 1.6fr 1fr;
		gap: var(--sp-8);
	}
}

.mc-ladies__person {
	display: grid;
	gap: var(--sp-5);
	align-items: start;
}

@media (min-width: 640px) {
	.mc-ladies__person {
		grid-template-columns: 14rem 1fr;
		gap: var(--sp-6);
	}
}

.mc-ladies__photo {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--radius-l);
	max-inline-size: 18rem;
}

.mc-ladies__person .mc-stack > * { margin: 0; }

.mc-ladies__daylist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
	gap: var(--sp-2);
	margin: var(--sp-3) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-sm);
}

.mc-ladies__daylist li {
	display: grid;
	gap: 2px;
	padding: var(--sp-2) var(--sp-3);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
}

.mc-ladies__daylist .is-on {
	border-color: var(--c-accent);
	background: var(--c-surface);
}

.mc-ladies__daylist .is-off {
	color: var(--c-text-3);
}

.mc-ladies__day {
	font-weight: 600;
}

.mc-ladies__time {
	font-variant-numeric: tabular-nums;
}

.mc-ladies__days,
.mc-ladies__summary {
	display: grid;
	gap: var(--sp-4);
	padding: var(--sp-6);
	border-radius: var(--radius-l);
}

.mc-ladies__days > *,
.mc-ladies__summary > * { margin: 0; }

.mc-ladies__day { text-transform: capitalize; }

.mc-ladies__note {
	font-size: var(--fs-sm);
	opacity: 0.85;
}

.mc-ladies__groups {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-ladies__groups li {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-block: var(--sp-3);
	border-block-end: 1px solid var(--c-line);
}

.mc-ladies__from {
	font-variant-numeric: tabular-nums;
	color: var(--c-brass);
	white-space: nowrap;
}

/* Galerijen uit de editor (blok Galerij) op deze pagina: een raster van
   staande foto's, op een telefoon twee naast elkaar. */
.mc-prose--wide {
	max-inline-size: var(--container);
}

.mc-ladies__content .wp-block-gallery {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-3) !important;
	margin-block: var(--sp-5) var(--sp-8);
}

@media (min-width: 700px) {
	.mc-ladies__content .wp-block-gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1100px) {
	.mc-ladies__content .wp-block-gallery { grid-template-columns: repeat(4, 1fr); }
	.mc-ladies__content .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
}

.mc-ladies__content .wp-block-gallery .wp-block-image {
	inline-size: auto !important;
	margin: 0 !important;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--radius-m);
}

.mc-ladies__content .wp-block-gallery.columns-3 .wp-block-image {
	aspect-ratio: 3 / 2;
}

.mc-ladies__content .wp-block-gallery img {
	inline-size: 100%;
	block-size: 100% !important;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}

.mc-ladies__content .wp-block-gallery .wp-block-image:hover img {
	transform: scale(1.04);
}

/* Op een telefoon: de eerste foto van een galerij met drie over de volle
   breedte, zodat er geen losse foto onderaan overblijft; en de foto van
   de kapster wat kleiner. */
@media (max-width: 699px) {
	.mc-ladies__content .wp-block-gallery.columns-3 .wp-block-image:first-child {
		grid-column: span 2;
	}
	.mc-ladies__photo {
		max-inline-size: 13rem;
	}
}

/* ==========================================================================
   Pictogrammen bij categorieën en diensten (V-007)
   ========================================================================== */

/* Rond pictogram voor een categorie: messing lijn in een zacht vlak. */
.mc-badge-icon {
	display: inline-grid;
	place-items: center;
	inline-size: 2.4em;
	block-size: 2.4em;
	margin-inline-end: 0.35em;
	vertical-align: middle;
	border-radius: 50%;
	background: var(--c-alt);
	color: var(--c-brass);
	border: 1px solid var(--c-line);
}

.mc-badge-icon .mc-icon {
	inline-size: 58%;
	block-size: 58%;
	vertical-align: 0;
}

.mc-pricelist__title {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.mc-pricelist__title .mc-badge-icon {
	font-size: 0.7em;
}

/* Op de categoriekaarten (over een foto): licht op een doorschijnend donker vlak. */
.mc-badge-icon--media {
	font-size: 0.55em;
	background: rgb(8 13 15 / 0.45);
	border-color: rgb(255 255 255 / 0.35);
	color: #fff;
	backdrop-filter: blur(4px);
}

/* Pictogram voor de naam van een dienst in de prijslijst. */
.mc-price__name {
	display: inline-flex;
	align-items: baseline;
	gap: var(--sp-2);
}

.mc-price__icon {
	flex: none;
	color: var(--c-accent);
}

.mc-price__icon .mc-icon {
	inline-size: 1.15em;
	block-size: 1.15em;
	vertical-align: -0.2em;
}

.mc-cat__name {
	display: flex;
	align-items: center;
	gap: 0.15em;
}

.mc-ladies__group {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
}

.mc-ladies__group .mc-icon {
	color: var(--c-brass);
}

/* Contactformulier: "niet verplicht" achter een label. */
.mc-field__optional {
	font-weight: 400;
	color: var(--c-text-2);
}

.mc-field select {
	appearance: auto;
}