/* ==========================================================================
   Stijl V-009: de vormgeving van de mockup MR_MRS_CHOP_BOOKING_BARBER_FIRST_FIXED4
   --------------------------------------------------------------------------
   Op verzoek van de opdrachtgever (25-09-2026 19:18): "dezelfde stijl ... en
   ook dezelfde foto's, en onze functionaliteiten eraan koppelen".

   Wat er uit de mockup komt
   - Donkere kop (#080d0f) met een wit logoblok met turquoise rand.
   - Grote foto bovenaan met schaduw van links, een kop in een smalle, hoge
     letter in hoofdletters (Anton, in de stijl van Impact) met een turquoise
     punt, en een handgeschreven regel (Caveat).
   - Een donkere balk met vier voordelen, grote fotokaarten (HEREN, DAMES),
     persoonskaarten, een lichtgrijze band "Over ons", kleine kaarten,
     prijzen als tegels, producten op donker, reviews op donker.
   - Koppen in Gelasio (dezelfde maten als Georgia) met een turquoise streep
     eronder; tekst in Arial.

   Wat bewust anders is dan de mockup
   - Het turquoise van de mockup (#079f98) haalt op wit maar 3,3:1. Tekst en
     knoppen op licht gebruiken daarom #03827c (4,6:1 met witte tekst, WCAG
     AA); het felle turquoise alleen op donker en als versiering.
   - De fotokaarten hebben de schaduw aan de kant van de tekst (rechts), zodat
     de tekst op elke foto leesbaar is.
   - Geen emoji of tekentjes (zoals in de mockup): overal onze eigen pictogrammen.

   Dit bestand komt na alle andere stijlen (zie inc/assets.php) en past vooral
   tokens aan; de opbouw (kleursets, lichte en donkere stand) blijft werken.
   ========================================================================== */

/* ---- 1. Tokens ----------------------------------------------------------- */

:root {
	--paper-bg:             #ffffff;
	--paper-surface:        #ffffff;
	--paper-elevated:       #ffffff;
	--paper-elevated-hover: #f2f2ef;
	--paper-alt:            #f5f5f2;  /* lichtgrijze banden (Over ons, prijzen) */
	--paper-line:           #dddddd;
	--paper-line-control:   #767676;  /* 4,5:1 op wit                         */
	--paper-text:           #171b1c;
	--paper-text-2:         #444a4c;  /* 9,1:1                                */
	--paper-text-3:         #5b6366;
	--paper-accent:         #03827c;  /* 4,6:1 op wit, wit op accent 4,6:1    */
	--paper-accent-hover:   #026b66;
	--paper-accent-press:   #015652;
	--paper-on-accent:      #ffffff;

	--night-bg:             #080d0f;
	--night-surface:        #101718;
	--night-elevated:       #151d1f;
	--night-elevated-hover: #1c2729;
	--night-alt:            #0b1113;
	--night-line:           #263437;
	--night-text-2:         #b8c0c1;  /* 10,4:1                               */
	--night-accent:         #12c4bf;  /* 9,0:1 op #080d0f                     */
	--night-accent-hover:   #3fd6d1;
	--night-accent-press:   #079f98;
	--night-on-accent:      #061012;

	--line-accent: #0ba9a2;           /* het streepje onder koppen (versiering) */

	--font-display: "Gelasio", Georgia, "Times New Roman", serif;
	--font-text:    Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif;
	--font-impact:  "Anton", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
	--font-hand:    "Caveat", "Segoe Script", "Bradley Hand", cursive;

	--radius-btn: 10px;

	/* Ruimte boven en onder een sectie: 58 px op een pc, 42 px op een telefoon (mockup). */
	--sp-section: clamp(2.6rem, 2rem + 1.6vw, 3.625rem);
}

.mc :is(h1, h2, h3, h4) {
	letter-spacing: 0;
}

/* ---- 2. Koppen met een turquoise streep, labels ------------------------- */

.mc .mc-kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.25em;
	font-stretch: normal;
}

.mc .mc-section-head .mc-h1,
.mc .mc-about .mc-h1,
.mc .mc-visit .mc-h1,
.mc .mc-pagehead__title {
	font-weight: 700;
	font-size: clamp(2.1rem, 1.55rem + 1.6vw, 2.7rem); /* 35 px op een telefoon, 43 px op een pc */
	line-height: 1.12;
}

.mc .mc-section-head .mc-h1::after,
.mc .mc-about .mc-h1::after,
.mc .mc-visit .mc-h1::after,
.mc .mc-pagehead__title::after {
	content: "";
	display: block;
	inline-size: 70px;
	block-size: 4px;
	margin-block-start: 18px;
	background: var(--line-accent);
	border-radius: 2px;
}

[style*="text-align:center"] .mc-h1::after,
.mc .mc-reviews .mc-h1::after {
	margin-inline: auto;
}

/* ---- 3. Knoppen ---------------------------------------------------------- */

.mc .mc-btn {
	border-radius: var(--radius-btn);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
	font-stretch: normal;
	padding-block: 15px;
	padding-inline: 20px;
}

.mc .mc-btn--small {
	min-block-size: 36px;
	padding: 10px 14px;
	font-size: 11px;
	border-radius: 8px;
}

.mc .mc-set-media .mc-btn--ghost,
.mc .mc-hero .mc-btn--ghost {
	--btn-fg: #fff;
	--btn-border: #fff;
	border-width: 1px;
	border-radius: 8px;
}

/* ---- 4. Balk bovenaan, kop en logo --------------------------------------- */

.mc .mc-topbar {
	background: #0b1012;
	color: #e8f2f1;
	font-size: 12px;
}

.mc .mc-header {
	background: #080d0f;
	box-shadow: 0 3px 15px rgb(0 0 0 / 0.33);
	border-block-end: 0;
}

.mc .mc-header__inner {
	min-block-size: 82px;
}

.mc .mc-header.is-scrolled .mc-header__inner {
	min-block-size: 70px;
}

.mc .mc-nav__list a {
	font-family: var(--font-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
}

.mc .mc-nav__list a:hover,
.mc .mc-nav__list .current-menu-item > a,
.mc .mc-nav__list a[aria-current="page"] {
	color: #12c4bf;
}

/* Het logo: een wit blok met turquoise rand, "MR&MRS" klein, "CHOP" groot. */
.mc .mc-logo {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	inline-size: 158px;
	block-size: 64px;
	padding: 0;
	line-height: 0.75;
	color: #071a26;
	background: #f8faf9;
	border: 2px solid #12b8b2;
	border-radius: 12px;
	box-shadow: 0 4px 10px rgb(0 0 0 / 0.33);
	text-decoration: none;
}

.mc .mc-logo__small {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: #008e8a;
}

.mc .mc-logo__big {
	font-family: var(--font-display);
	font-size: 43px;
	font-weight: 700;
	letter-spacing: -0.09em;
	color: #071a26;
}

@media (max-width: 560px) {
	.mc .mc-logo { inline-size: 128px; block-size: 56px; }
	.mc .mc-logo__big { font-size: 35px; }
}

.mc .mc-header__cta {
	padding: 16px 22px;
}

/* ---- 5. Hero ------------------------------------------------------------- */

.mc .mc-hero {
	min-block-size: 510px;
	align-items: center;
	padding-block: var(--sp-8);
}

@media (max-width: 900px) { .mc .mc-hero { min-block-size: 560px; } }
@media (max-width: 560px) { .mc .mc-hero { min-block-size: 520px; } }

/* Schaduw van links naar rechts, zoals in de mockup, plus onderaan wat extra voor de tekst. */
.mc .mc-hero::before {
	background:
		linear-gradient(90deg, rgb(0 0 0 / 0.67) 0%, rgb(0 0 0 / 0.33) 38%, transparent 75%),
		linear-gradient(to top, rgb(0 0 0 / 0.45) 0%, transparent 45%);
}

@media (max-width: 700px) {
	.mc .mc-hero::before {
		background:
			linear-gradient(90deg, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0.5) 60%, rgb(0 0 0 / 0.3) 100%),
			linear-gradient(to top, rgb(0 0 0 / 0.5) 0%, transparent 50%);
	}
}

.mc .mc-hero .mc-kicker {
	color: #fff;
	letter-spacing: 5px;
}

.mc .mc-hero__title {
	max-inline-size: 14ch;
	font-family: var(--font-impact);
	font-weight: 400;
	font-size: clamp(2.8rem, 1.9rem + 3.1vw, 3.9rem); /* 45 / 51 / 62 px */
	line-height: 1.02;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.mc-hero__dot {
	color: #10c8c0;
}

.mc .mc-hero__lead {
	color: #fff;
	line-height: 1.6;
}

/* Handgeschreven regel rechtsonder, met een turquoise streep eronder. */
.mc-hero__scribble {
	position: absolute;
	inset-inline-end: 7%;
	inset-block-end: 65px;
	z-index: 1;
	max-inline-size: 11ch;
	margin: 0;
	color: #fff;
	font-family: var(--font-hand);
	font-size: 34px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	transform: rotate(-8deg);
	pointer-events: none;
}

.mc-hero__scribble::after {
	content: "";
	display: block;
	block-size: 5px;
	margin-block-start: 6px;
	background: #11c9c1;
	border-radius: 3px;
	transform: rotate(-7deg);
}

@media (max-width: 900px) { .mc-hero__scribble { inset-inline-end: 5%; inset-block-end: 35px; font-size: 27px; } }
@media (max-width: 560px) { .mc-hero__scribble { display: none; } }

/* ---- 6. Donkere balk met voordelen --------------------------------------- */

.mc .mc-usps {
	background: #0b1113;
	padding-block: 22px;
}

.mc .mc-usps__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.mc .mc-usps__item {
	display: grid;
	grid-template-columns: 45px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 8px;
	padding-inline-end: 15px;
	border-inline-end: 1px solid #334044;
	text-align: start;
}

.mc .mc-usps__item:last-child { border: 0; }

.mc .mc-usps__icon {
	grid-row: 1 / 3;
	color: #0ad0ca;
	background: none;
	inline-size: auto;
	block-size: auto;
}

.mc .mc-usps__icon .mc-icon { inline-size: 32px; block-size: 32px; }

.mc .mc-usps__title {
	font-family: var(--font-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
}

.mc .mc-usps__text {
	font-size: 12px;
	line-height: 1.45;
	color: #dddddd;
}

@media (max-width: 900px) {
	.mc .mc-usps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mc .mc-usps__item:nth-child(2) { border: 0; }
}

@media (max-width: 560px) {
	.mc .mc-usps__list { grid-template-columns: 1fr; gap: 0; }
	.mc .mc-usps__item { border-inline-end: 0; border-block-end: 1px solid #334044; padding-block: 12px; }
	.mc .mc-usps__item:last-child { border: 0; }
}

/* ---- 7. Grote fotokaarten (HEREN, DAMES) --------------------------------- */

.mc .mc-cards__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-card__link {
	position: relative;
	display: block;
	block-size: 300px;
	overflow: hidden;
	border-radius: 7px;
	color: #fff;
	text-decoration: none;
	background: #101718;
}

@media (max-width: 900px) { .mc-card__link { block-size: 380px; } }

.mc-card__media img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.mc-card__link:hover .mc-card__media img { transform: scale(1.04); }

/* Schaduw aan de kant van de tekst (rechts), zodat de tekst op elke foto leesbaar is. */
.mc-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(270deg, rgb(0 0 0 / 0.8) 0%, rgb(0 0 0 / 0.6) 48%, rgb(0 0 0 / 0.15) 100%);
}

.mc-card__copy {
	position: absolute;
	inset-block: 30px 25px;
	inset-inline-start: 56%;
	inset-inline-end: 22px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	background: none;
}

.mc-card__name {
	font-family: var(--font-impact);
	font-size: clamp(1.8rem, 1.5rem + 1vw, 2.2rem);
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.mc-card__sub {
	font-family: var(--font-display);
	font-size: 20px;
}

.mc-card__list {
	display: grid;
	gap: 2px;
	margin-block: 10px 14px;
	font-size: 13px;
}

.mc-card__item::before {
	content: "";
	display: inline-block;
	inline-size: 5px;
	block-size: 5px;
	margin-inline-end: 10px;
	vertical-align: middle;
	background: #12c4bf;
	border-radius: 50%;
}

.mc-card__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-block-start: auto;
	padding: 12px 18px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #111;
	background: #fff;
	border-radius: 30px;
}

.mc-card__pill .mc-icon { inline-size: 14px; block-size: 14px; }
.mc-card__link:focus-visible { outline: 3px solid #12c4bf; outline-offset: 3px; }

/* Kaart Dames (V-026): de foto is zelf al donker en heeft links een grijze
   rand. Daarom een lichtere schaduw, de foto iets lichter en iets breder,
   zodat de rand buiten beeld valt. Een schaduw op de tekst houdt hem leesbaar. */
.mc-card--dames .mc-card__media img {
	inset-inline-start: -7%;
	inline-size: 107%;
	object-position: 40% 30%;
	filter: brightness(1.3) saturate(1.05);
}
.mc-card--dames .mc-card__link { background: #3a302a; }
.mc-card--dames .mc-card__link::after {
	background: linear-gradient(270deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.32) 50%, rgb(0 0 0 / 0) 100%);
}
.mc-card--dames .mc-card__copy { text-shadow: 0 1px 8px rgb(0 0 0 / 0.55); }
.mc-card--dames .mc-card__pill { text-shadow: none; }

@media (max-width: 560px) {
	.mc-card__copy { inset-inline-start: 42%; inset-inline-end: 16px; }
	.mc-card__sub { font-size: 17px; }
	.mc-card__list { font-size: 12px; }
}

/* ---- 8. Team -------------------------------------------------------------- */

.mc .mc-team__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
	gap: 20px;
	align-items: stretch;
}

.mc .mc-team__head { align-self: center; }

.mc .mc-team__head .mc-btn {
	justify-self: start;
	inline-size: fit-content;
	margin-block-start: var(--sp-4);
}

.mc .mc-team__layout .mc-team__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 20px;
}

@media (max-width: 900px) {
	.mc .mc-team__layout { grid-template-columns: 1fr; }
}

.mc .mc-person {
	min-block-size: 360px;
	border: 0;
	border-radius: 8px;
	background: #101516;
	color: #fff;
}

@media (max-width: 900px) { .mc .mc-person { min-block-size: 430px; } }

.mc .mc-person__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	background: #101516;
}

.mc .mc-person__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	opacity: 0.9;
}

.mc .mc-person__caption {
	position: relative;
	align-self: end;
	padding: 35px 22px 20px;
	background: linear-gradient(transparent, rgb(0 0 0 / 0.9));
	color: #fff;
}

.mc .mc-person__name {
	font-family: var(--font-display);
	font-size: 27px;
	font-weight: 700;
	color: #fff;
}

.mc .mc-person__role { color: #d8e0df; }
.mc .mc-person__toggle { color: #fff; }

/* ---- 9. Over ons ----------------------------------------------------------- */

.mc .mc-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 50px;
	align-items: center;
}

.mc .mc-about__body p { color: var(--c-text-2); line-height: 1.65; }

.mc .mc-about__media img {
	inline-size: 100%;
	block-size: 100%;
	max-block-size: 470px;
	object-fit: cover;
	border-radius: 10px;
}

@media (max-width: 900px) {
	.mc .mc-about__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- 10. Kleine kaarten ----------------------------------------------------- */

.mc .mc-minis { padding-block-start: 0; }
.mc .mc-about + .mc-minis { padding-block-start: var(--sp-section); }

.mc .mc-minis__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: 18px;
}

.mc-mini {
	display: flex;
	min-block-size: 175px;
	overflow: hidden;
	background: #fff;
	color: #171b1c;
	border: 1px solid #dddddd;
	border-radius: 8px;
}

.mc-mini__media { flex: 0 0 45%; }

.mc-mini__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.mc-mini__body {
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 20px;
}

.mc-mini__body > * { margin: 0; }
.mc .mc-mini .mc-h3 { font-size: 23px; font-weight: 700; }
.mc-mini__body p { font-size: 13px; line-height: 1.5; color: #444a4c; }
.mc-mini__body .mc-btn { justify-self: start; }

.mc-mini__icon {
	display: grid;
	place-items: center;
	flex: 0 0 34%;
	color: #fff;
	background: #03827c;
}

.mc-mini__icon .mc-icon { inline-size: 56px; block-size: 56px; }

/* ---- 11. Prijzen als tegels (Heren & prijzen, Dames & prijzen) -------------- */

.mc .mc-prices {
	display: grid;
	/* Naast de categoriefoto twee tegels per rij: dan past een naam als
	   "Wassen, knippen en model föhnen" op één of twee regels. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
	gap: 10px;
	border: 0;
}

.mc .mc-price {
	padding: 15px 17px;
	background: #fff;
	color: #171b1c;
	border: 1px solid #dddddd;
	border-radius: 7px;
}

.mc .mc-prices__title {
	margin-block: var(--sp-5) var(--sp-2);
	font-family: var(--font-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--c-accent);
}

.mc .mc-pricelist__lists > .mc-prices__title:first-child { margin-block-start: 0; }

/* ---- 12. Producten op donker ------------------------------------------------ */

.mc .mc-products-band { background: #0b1113; }

.mc .mc-products-band .mc-products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: 10px;
}

.mc .mc-products-band .mc-product {
	background: #151d1f;
	border: 1px solid #263437;
	border-radius: 7px;
	color: #fff;
}

/* ---- 13. Reviews en Kom langs ------------------------------------------------ */

.mc .mc-reviews {
	background: #071012;
}

/* ---- 14. Voettekst ------------------------------------------------------------ */

.mc .mc-footer {
	background: #080d0f;
}

/* ---- 15. Paginakop op de andere pagina's ------------------------------------- */

.mc .mc-pagehead:not(.mc-pagehead--image) {
	background: var(--c-alt);
}

/* ---- 16. Boekpagina: donkere band met witte kaarten, zoals "Plan uw afspraak" -- */

.mc .mc-page--booking .mc-booking-band {
	background: #101718;
}

.mc .mc-page--booking .mc-booking-band .mc-book__step,
.mc .mc-page--booking .mc-booking-band .mc-book__summary {
	border-radius: 12px;
	border-color: transparent;
}

.mc .mc-products-band .mc-product {
	overflow: hidden;
	padding-block-end: 14px;
}

.mc .mc-products-band .mc-product__name,
.mc .mc-products-band .mc-product__price {
	padding-inline: 14px;
}

.mc .mc-products-band .mc-product__price {
	font-weight: 700;
	color: #12c4bf;
}

/* Lange woorden in een kop ("Privacyverklaring") breken netjes af op een smal scherm. */
.mc .mc-pagehead__title,
.mc .mc-section-head .mc-h1 {
	hyphens: auto;
	overflow-wrap: anywhere; /* "anywhere" telt ook mee voor de minimale breedte in een raster */
}

/* ---- 13. Japanese Head Spa (V-011) -----------------------------------------
   Zoals in de mockup: de band "#headSpaInfo" (uitleg links, stappen rechts),
   de kleine kaart met foto en het venster "Meer informatie". De band en het
   venster staan in de donkere set, dus de kleuren komen uit de tokens
   (--c-accent is daar #12c4bf, 9:1 op de achtergrond). */

.mc .mc-spainfo__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 50px;
	align-items: start;
}

.mc .mc-spainfo__text { --stack-space: var(--sp-4); }
.mc .mc-spainfo__text .mc-h1 {
	max-inline-size: 760px;
	font-size: clamp(32px, 3.6vw, 50px);
	line-height: 1.08;
	hyphens: auto;
	overflow-wrap: anywhere;
}
.mc .mc-spainfo__text { min-inline-size: 0; }
.mc .mc-spainfo__text p { color: var(--c-text-2); line-height: 1.65; }

.mc .mc-spainfo__steps {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc .mc-spainfo__step {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 14px;
	row-gap: 8px;
	padding: 20px 22px;
	background: rgb(255 255 255 / 0.03);
	border: 1px solid rgb(255 255 255 / 0.16);
}

.mc .mc-spainfo__nr { color: var(--c-accent); font-weight: 800; }
.mc .mc-spainfo__step b { font-size: 18px; }
.mc .mc-spainfo__step small {
	grid-column: 2;
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--c-text-2);
}

.mc .mc-spainfo__duration {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-color: var(--c-accent);
}

.mc .mc-spainfo__duration strong { text-transform: uppercase; letter-spacing: 0.08em; }
.mc .mc-spainfo__duration em {
	font-style: normal;
	font-size: 24px;
	font-weight: 800;
	color: var(--c-accent);
}

@media (max-width: 800px) {
	.mc .mc-spainfo__grid { grid-template-columns: 1fr; gap: 28px; }
	.mc .mc-spainfo__text .mc-h1 { font-size: 34px; }
}

/* De kleine kaart: de foto links (zoals de mockup), de prijs vet. */
.mc-mini--spa .mc-mini__price { font-weight: 800; color: #171b1c; }

/* Het venster (dialog). */
.mc-spa-dialog {
	inline-size: min(680px, calc(100% - 32px));
	max-block-size: 88vh;
	margin: auto;
	padding: 28px;
	overflow: auto;
	background: #0b1517;
	color: #f4f7f6;
	border: 1px solid var(--c-accent);
	border-radius: 20px;
	box-shadow: 0 25px 80px rgb(0 0 0 / 0.8);
}

.mc-spa-dialog[open] { animation: mc-menu-in var(--dur-base) var(--ease-out); }
.mc-spa-dialog::backdrop { background: rgb(0 0 0 / 0.8); backdrop-filter: blur(6px); }
.mc-spa-dialog > * { margin-block: 0 12px; }
.mc-spa-dialog .mc-h2 { font-size: clamp(28px, 5vw, 46px); line-height: 1.05; margin-block: 8px 16px; padding-inline-end: 40px; }
.mc-spa-dialog p { font-size: 16px; line-height: 1.6; color: var(--c-text-2); }
.mc-spa-dialog p strong { color: var(--c-text); }

.mc-spa-dialog__close-form { position: absolute; inset-inline-end: 12px; inset-block-start: 10px; margin: 0; }
.mc-spa-dialog__close {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	color: var(--c-text);
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.mc-spa-dialog__close:hover { background: rgb(255 255 255 / 0.08); }
.mc-spa-dialog__close:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

.mc-spa-dialog__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 22px 0;
	padding: 0;
	list-style: none;
}

.mc-spa-dialog__steps li {
	padding: 14px;
	background: #0f2022;
	border: 1px solid #244447;
	border-radius: 12px;
}

.mc-spa-dialog__steps b { display: block; margin-block-end: 7px; font-size: 12px; color: var(--c-accent); }

.mc-spa-dialog__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding-block-start: 18px;
	border-block-start: 1px solid #244447;
}

.mc-spa-dialog__bottom strong { font-size: 21px; }
.mc-spa-dialog__bottom strong:first-child { text-transform: uppercase; }
.mc-spa-dialog__bottom .mc-btn { margin-inline-start: auto; }
.mc-spa-dialog__more { margin-block: 14px 0; font-size: var(--fs-sm); }
.mc-spa-dialog__more a { color: var(--c-accent); }

@media (max-width: 560px) {
	.mc-spa-dialog { padding: 28px 20px 20px; }
	/* Op een telefoon staan de stappen al in de tekst; zo blijft de knop in beeld. */
	.mc-spa-dialog__steps { display: none; }
	.mc-spa-dialog__bottom .mc-btn { inline-size: 100%; margin-inline-start: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.mc-spa-dialog[open] { animation: none; }
}

/* Eén losse head spa-kaart (Dames & prijzen): niet over de hele breedte. */
.mc .mc-minis--single .mc-minis__grid { grid-template-columns: minmax(0, 40rem); }

/* ---- 14. Taalkeuze NL / EN met vlaggen (V-011) -------------------------------
   Twee gewone links; de huidige taal is vet en onderstreept. Op de telefoon
   staat hij in de kop naast de menuknop (alleen vlaggen) en in het menu. */

.mc-lang__list {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-lang__list li + li::before {
	content: "|";
	margin-inline: 4px;
	color: var(--c-text-2);
	opacity: 0.6;
}

.mc-lang__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-block-size: 44px;
	padding-inline: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--c-text);
	text-decoration: none;
	border-radius: 6px;
}

a.mc-lang__item:hover { color: var(--c-accent); }
a.mc-lang__item:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.mc-lang__item.is-current { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

.mc-flag {
	inline-size: 22px;
	block-size: 15px;
	flex: none;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25);
}

.mc .mc-lang--header { margin-inline-start: auto; }
.mc .mc-lang--header + .mc-header__cta { margin-inline-start: 12px; }
.mc .mc-header .mc-lang--header ~ .mc-nav-toggle { margin-inline-start: 8px; }

@media (max-width: 899px) {
	/* Op de telefoon in de kop alleen de vlaggen; de naam staat in het menu. */
	.mc .mc-lang--header .mc-lang__item > span[aria-hidden] { display: none; }
	.mc .mc-lang--header .mc-lang__list li + li::before { margin-inline: 2px; }
}

@media (min-width: 900px) {
	.mc .mc-lang--header { margin-inline-start: 18px; }
}

.mc-lang--menu { margin-block: 8px 0; }
.mc-lang--menu .mc-lang__item { font-size: 14px; }
@media (max-width: 899px) {
	.mc .mc-lang--header .is-current .mc-flag { box-shadow: 0 0 0 2px var(--c-accent); }
}

/* ---- 17. V-012: teksten en indeling uit de aangeleverde HTML ------------------ */

/* Topbalk: adres, tijden, twee nummers, e-mail en social media. Op smallere
   schermen (900 - 1200px) loopt hij netjes door op een tweede regel. */
.mc .mc-topbar__inner {
	flex-wrap: wrap;
	gap: 4px 26px;
	padding-block: 6px;
}
.mc .mc-topbar__item { color: #e8f2f1; }
.mc .mc-topbar__item:hover { color: #ffffff; text-decoration: underline; }
.mc .mc-topbar__item .mc-icon { color: #42c7c6; }
.mc .mc-topbar__social .mc-icon { inline-size: 1.05rem; block-size: 1.05rem; }

/* Teamfoto's: de hele foto (niet meer vooraf bijgesneden), met het gezicht in
   beeld. Het gezicht staat bij de portretten in het bovenste deel. */
.mc .mc-person__media img { object-position: 50% 15%; }

/* Reviews: kop in het midden, kaarten eronder. */
.mc .mc-quotes__head { text-align: center; }
.mc .mc-quotes__head .mc-h1 { margin-block: 8px 12px; }
.mc .mc-quotes__sub { color: #aebabb; margin: 0 0 35px; }
.mc .mc-quotes__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mc .mc-quote {
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 22px;
	background: #0b1719;
	border: 1px solid #244447;
	border-radius: 16px;
}
.mc .mc-quote > * { margin: 0; }
.mc .mc-quote blockquote { margin: 0; }
.mc .mc-quote blockquote p { margin: 0; color: #e8f2f1; line-height: 1.6; }
.mc .mc-quote__stars { display: inline-flex; gap: 2px; color: #f5c451; }
.mc .mc-quote__stars .mc-icon { inline-size: 16px; block-size: 16px; }
.mc .mc-quote__who { font-size: 13px; color: #aebabb; }
.mc .mc-quotes__more { margin: 28px 0 0; text-align: center; }
.mc .mc-quotes__more a { display: inline-flex; align-items: center; gap: 6px; color: #42c7c6; }
.mc .mc-quote blockquote { padding: 0; border: 0; }

/* ---- 18. V-015: teamkaarten, de eigen woorden creatief in beeld ------------- */

/*
 * Teamkaart: bij hover (muis) of na een tik op het plusje opent de tekst als
 * een cirkel vanuit het plusje. Daarna komen het aanhalingsteken, de woorden,
 * de handtekening en de knop een voor een in beeld. De foto zoomt zacht in en
 * wordt donkerder. Wie minder beweging wil (systeeminstelling), krijgt
 * hetzelfde zonder animatie.
 * Toetsenbord: open zolang de focus zichtbaar in de kaart staat
 * (:focus-visible), zodat een muisklik op het kruisje de tekst echt sluit.
 */
.mc .mc-person {
	--mc-reveal: 0.65s;
	--mc-step: 0.08s;
	min-block-size: 440px;
}
@media (max-width: 900px) { .mc .mc-person { min-block-size: 460px; } }
@media (prefers-reduced-motion: reduce) {
	.mc .mc-person { --mc-reveal: 0s; --mc-step: 0s; }
}

.mc .mc-person.is-enhanced .mc-person__intro {
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px 22px 20px;
	color: #ffffff;
	background:
		radial-gradient(120% 80% at 100% 100%, rgb(3 130 124 / 0.55), transparent 62%),
		linear-gradient(to top, rgb(5 11 13 / 0.95) 0%, rgb(5 11 13 / 0.84) 58%, rgb(5 11 13 / 0.5) 100%);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	transform: none;
	/* Dicht: een cirkel van 0 rond het plusje (rechtsonder). */
	clip-path: circle(0 at calc(100% - 44px) calc(100% - 42px));
	transition: clip-path var(--mc-reveal) cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear var(--mc-reveal);
}
.mc .mc-person.is-enhanced.is-open .mc-person__intro,
.mc .mc-person.is-enhanced:has(:focus-visible) .mc-person__intro {
	transform: none;
	visibility: visible;
	clip-path: circle(150% at calc(100% - 44px) calc(100% - 42px));
	transition: clip-path var(--mc-reveal) cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
}

/* De onderdelen een voor een. */
.mc .mc-person.is-enhanced .mc-person__intro > * {
	margin: 0;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity calc(var(--mc-reveal) * 0.6) ease, transform var(--mc-reveal) cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mc .mc-person.is-enhanced.is-open .mc-person__intro > *,
.mc .mc-person.is-enhanced:has(:focus-visible) .mc-person__intro > * {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--mc-reveal) * 0.3 + var(--i, 0) * var(--mc-step));
}
.mc .mc-person__intro > :nth-child(2) { --i: 1; }
.mc .mc-person__intro > :nth-child(3) { --i: 2; }
.mc .mc-person__intro > :nth-child(4) { --i: 3; }

.mc .mc-person__mark {
	font-family: var(--font-display);
	font-size: 72px;
	line-height: 0.6;
	block-size: 32px;
	color: #12c4bf;
}
.mc .mc-person__words p {
	margin: 0 0 8px;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 16px;
	line-height: 1.45;
	color: #f2f6f6;
}
.mc .mc-person__words p:last-child { margin-block-end: 0; }
.mc .mc-person__sign {
	position: relative;
	justify-self: start;
	align-self: flex-start;
	font-family: var(--font-hand);
	font-size: 26px;
	line-height: 1.1;
	color: #42c7c6;
}
/* Een penstreek onder de handtekening, die zich "tekent". */
.mc .mc-person__sign::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -4px;
	block-size: 3px;
	background: #12c4bf;
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--mc-reveal) cubic-bezier(0.2, 0.7, 0.2, 1);
}
[dir="rtl"] .mc .mc-person__sign::after { transform-origin: right center; }
.mc .mc-person.is-open .mc-person__sign::after,
.mc .mc-person:has(:focus-visible) .mc-person__sign::after {
	transform: scaleX(1);
	transition-delay: calc(var(--mc-reveal) * 0.9);
}
.mc .mc-person.is-enhanced .mc-person__intro .mc-btn {
	align-self: flex-start;
	min-block-size: 40px;
	padding: 11px 16px;
	margin-block-start: 4px;
}

/* De foto: zacht inzoomen en donkerder; naam en functie wijken. */
.mc .mc-person.is-open .mc-person__media img {
	transform: scale(1.07);
	filter: saturate(0.7) brightness(0.8);
}
.mc .mc-person__name,
.mc .mc-person__role { transition: opacity 0.3s ease; }
.mc .mc-person.is-open .mc-person__name,
.mc .mc-person.is-open .mc-person__role { opacity: 0; }

/* Het plusje blijft altijd bovenop, zodat je de tekst ook weer dicht tikt. */
.mc .mc-person.is-enhanced .mc-person__toggle { position: relative; z-index: 2; }

/* Muis: hetzelfde bij er overheen gaan. */
@media (hover: hover) and (pointer: fine) {
	.mc .mc-person.is-enhanced:not(.mc-person--click):hover .mc-person__intro {
		visibility: visible;
		clip-path: circle(150% at calc(100% - 44px) calc(100% - 42px));
		transition: clip-path var(--mc-reveal) cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
	}
	.mc .mc-person.is-enhanced:not(.mc-person--click):hover .mc-person__intro > * {
		opacity: 1;
		transform: none;
		transition-delay: calc(var(--mc-reveal) * 0.3 + var(--i, 0) * var(--mc-step));
	}
	.mc .mc-person.is-enhanced:not(.mc-person--click):hover .mc-person__sign::after {
		transform: scaleX(1);
		transition-delay: calc(var(--mc-reveal) * 0.9);
	}
	.mc .mc-person.is-enhanced:not(.mc-person--click):hover .mc-person__media img {
		transform: scale(1.07);
		filter: saturate(0.7) brightness(0.8);
	}
	.mc .mc-person.is-enhanced:not(.mc-person--click):hover .mc-person__name,
	.mc .mc-person.is-enhanced:not(.mc-person--click):hover .mc-person__role { opacity: 0; }
}

/* ---- 19. V-016: uitgebreide tekst, cijfers als stempels, kaart groeit mee -- */

/* Tekst onderaan beginnen zonder justify-content: flex-end; zo telt de
   hoogte van de inhoud (scrollHeight) ook als die hoger is dan de kaart. */
.mc .mc-person.is-enhanced .mc-person__intro > :first-child { margin-block-start: auto; }

/* Open: de kaart wordt zo hoog als de tekst (--mc-open-h komt uit site.js). */
.mc .mc-team__grid { align-items: start; }
.mc .mc-person { --mc-min: 440px; transition: min-block-size var(--mc-reveal) cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (max-width: 900px) { .mc .mc-person { --mc-min: 460px; } }
.mc .mc-person.is-enhanced.is-open,
.mc .mc-person.is-enhanced:has(:focus-visible) {
	min-block-size: max(var(--mc-min), var(--mc-open-h, 0px));
}
.mc .mc-person.is-enhanced .mc-person__intro {
	overflow: hidden;
	padding-block-end: 76px; /* het kruisje rechtsonder krijgt zijn eigen plek */
}
.mc .mc-person.is-enhanced .mc-person__intro > .mc-person__kicker + .mc-person__mark { margin-block-start: 26px; }

.mc .mc-person__intro > :nth-child(5) { --i: 4; }
.mc .mc-person__intro > :nth-child(6) { --i: 5; }
.mc .mc-person__intro > :nth-child(7) { --i: 6; }

.mc .mc-person__kicker {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #42c7c6;
}
.mc .mc-person__more {
	padding-block-start: 12px;
	border-block-start: 1px solid rgb(255 255 255 / 0.14);
}
.mc .mc-person__more p {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.55;
	color: #d8e0df;
}
.mc .mc-person__more p:last-child { margin-block-end: 0; }

/* Cijfers als ronde stempels, licht scheef, die een voor een "neergezet" worden. */
.mc .mc-person__stamps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 6px 0 4px;
	list-style: none;
}
.mc .mc-person__stamps li {
	--r: -6deg;
	display: grid;
	place-content: center;
	gap: 3px;
	inline-size: 70px;
	block-size: 70px;
	margin: 0;
	padding: 4px;
	text-align: center;
	border: 2px dashed rgb(18 196 191 / 0.75);
	border-radius: 50%;
	background: radial-gradient(circle, rgb(3 130 124 / 0.4), rgb(5 11 13 / 0.7));
	box-shadow: 0 0 0 4px rgb(5 11 13 / 0.55), 0 0 0 5px rgb(18 196 191 / 0.35);
	opacity: 0;
	transform: rotate(var(--r)) scale(0.4);
	transition: opacity 0.3s ease, transform var(--mc-reveal) cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mc .mc-person__stamps li:nth-child(even) { --r: 5deg; }
.mc .mc-person__stamps li:nth-child(3n) { --r: -2deg; }
.mc .mc-person__stamps b {
	font-family: var(--font-display);
	font-size: 20px;
	line-height: 1;
	color: #12c4bf;
}
.mc .mc-person__stamps span {
	font-size: 8.5px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #e8f2f1;
}
.mc .mc-person.is-open .mc-person__stamps li,
.mc .mc-person:has(:focus-visible) .mc-person__stamps li {
	opacity: 1;
	transform: rotate(var(--r)) scale(1);
}
.mc .mc-person.is-open .mc-person__stamps li:nth-child(1) { transition-delay: calc(var(--mc-reveal) * 0.9); }
.mc .mc-person.is-open .mc-person__stamps li:nth-child(2) { transition-delay: calc(var(--mc-reveal) * 0.9 + var(--mc-step) * 1.5); }
.mc .mc-person.is-open .mc-person__stamps li:nth-child(3) { transition-delay: calc(var(--mc-reveal) * 0.9 + var(--mc-step) * 3); }
.mc .mc-person.is-open .mc-person__stamps li:nth-child(4) { transition-delay: calc(var(--mc-reveal) * 0.9 + var(--mc-step) * 4.5); }

@media (hover: hover) and (pointer: fine) {
	.mc .mc-person.is-enhanced:not(.mc-person--click):hover {
		min-block-size: max(var(--mc-min), var(--mc-open-h, 0px));
	}
	.mc .mc-person.is-enhanced:not(.mc-person--click):hover .mc-person__stamps li {
		opacity: 1;
		transform: rotate(var(--r)) scale(1);
		transition-delay: calc(var(--mc-reveal) * 0.9);
	}
	/* Kaart die alleen via het plusje opent: het plusje "roept" bij de muis erover. */
	.mc .mc-person--click:not(.is-open):hover .mc-person__toggle {
		background: #12c4bf;
		color: #061012;
		transform: scale(1.1);
	}
}

/* ---- 20. V-016: badge Erkend leerbedrijf in de footer ------------------------ */

.mc .mc-sbb {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-block-start: 18px;
	padding: 10px 14px 10px 10px;
	color: #e8f2f1;
	text-decoration: none;
	border: 1px solid #263437;
	border-radius: 12px;
	background: #101718;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.mc .mc-sbb:hover { border-color: #12c4bf; background: #151d1f; }
.mc .mc-sbb:focus-visible { outline: 2px solid #12c4bf; outline-offset: 3px; }
/* Eigen badge: een rond zegel met een afstudeerhoedje. */
.mc .mc-sbb__seal {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 48px;
	block-size: 48px;
	color: #061012;
	background: #12c4bf;
	border-radius: 50%;
	box-shadow: 0 0 0 3px #101718, 0 0 0 4px rgb(18 196 191 / 0.5);
}
.mc .mc-sbb__seal .mc-icon { inline-size: 26px; block-size: 26px; }
/* Het officiele erkenningsbordje van SBB (V-020), NL of EN naar de taal van de pagina. */
.mc .mc-sbb__logo {
	flex: 0 0 auto;
	inline-size: 160px;
	block-size: 160px;
	object-fit: contain;
}
/* V-021: met het bordje erboven en de tekst eronder, zodat het groot en
   leesbaar is (de kleine letters op het bordje vragen minstens 150 px). */
.mc .mc-sbb:has(.mc-sbb__logo) {
	flex-direction: column;
	align-items: flex-start;
	padding: 12px;
}
.mc .mc-sbb__text { display: grid; gap: 2px; }
.mc .mc-sbb__text b { font-size: 14px; letter-spacing: 0.02em; }
.mc .mc-sbb__text small { font-size: 12px; line-height: 1.35; color: #b8c0c1; }
.mc .mc-sbb__check { display: inline-flex; align-items: center; gap: 4px; color: #42c7c6 !important; }
.mc .mc-sbb__check .mc-icon { inline-size: 12px; block-size: 12px; }

/* ---- 21. V-021: hero op mobiel, het bord "MR & MRS CHOP" leesbaar ------------ */

/* Op een smal scherm staat de tekst onderaan en blijft de bovenkant van de
   foto licht, zodat de naam op het uithangbord te lezen is. De foto schuift
   iets naar links, want daar hangt het bord. */
@media (max-width: 700px) {
	.mc .mc-hero {
		align-items: end;
		min-block-size: 660px;
		padding-block: 240px 28px;
	}
	.mc .mc-hero::before {
		background: linear-gradient(to top, rgb(0 0 0 / 0.86) 0%, rgb(0 0 0 / 0.66) 48%, rgb(0 0 0 / 0.12) 76%, transparent 100%);
	}
	.mc .mc-hero__media img,
	.mc .mc-hero__media video { object-position: 34% 35%; }
}

/* De actie bij de head spa (V-021): opvallende regel op de kaart. */
.mc-mini__offer {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 10px 12px;
	border-inline-start: 4px solid #03827c;
	border-radius: 6px;
	background: #e6f4f3;
	color: #171b1c;
}
.mc-mini__offer b { font-size: 15px; color: #015652; }
.mc-mini__offer span { font-size: 12.5px; line-height: 1.45; color: #2c3436; }

/* ---- 22. V-021: werkdagen als tijdlijn (Heren en Dames) en meldingen -------- */

.mc .mc-week {
	display: grid;
	gap: 14px;
	padding: clamp(20px, 3vw, 30px);
	color: #e8f2f1;
	background:
		radial-gradient(120% 70% at 100% 0%, rgb(3 130 124 / 0.35), transparent 60%),
		#101718;
	border: 1px solid #244447;
	border-radius: 16px;
}
.mc .mc-week > * { margin: 0; }
.mc .mc-week .mc-h3 { color: #ffffff; }
.mc .mc-week__status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-self: start;
	padding: 5px 12px;
	font-size: 13px;
	font-weight: 700;
	color: #061012;
	background: #12c4bf;
	border-radius: 999px;
}
.mc .mc-week__pulse {
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background: #061012;
	animation: mc-pulse 1.8s ease-in-out infinite;
}
@keyframes mc-pulse { 50% { opacity: 0.25; } }

.mc .mc-week__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mc .mc-week__day {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 10px;
}
.mc .mc-week__day.is-today { background: rgb(18 196 191 / 0.12); box-shadow: inset 0 0 0 1px rgb(18 196 191 / 0.45); }
.mc .mc-week__name { font-weight: 700; }
.mc .mc-week__name small {
	display: block;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #42c7c6;
}
.mc .mc-week__time { font-variant-numeric: tabular-nums; font-size: 14px; color: #c9d2d3; white-space: nowrap; }

/* De tijdlijn: een rail met per tijdsblok een balk, die bij het laden aangroeit. */
.mc .mc-week__track {
	position: relative;
	block-size: 10px;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.08);
}
.mc .mc-week__track i {
	position: absolute;
	inset-block: 0;
	inset-inline-start: var(--a);
	inline-size: calc(var(--b) - var(--a));
	border-radius: 999px;
	background: linear-gradient(90deg, #03827c, #12c4bf);
	transform-origin: left center;
	animation: mc-grow 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(var(--i, 0) * 0.07s);
}
.mc .mc-week__day.is-today .mc-week__track i { background: linear-gradient(90deg, #12c4bf, #8ff0ec); }
@keyframes mc-grow { from { transform: scaleX(0); } }
.mc .mc-week__now {
	position: absolute;
	inset-block: -5px;
	inset-inline-start: var(--n);
	inline-size: 2px;
	background: #ffffff;
	border-radius: 2px;
	box-shadow: 0 0 0 3px rgb(255 255 255 / 0.18);
}
.mc .mc-week__note { font-size: 13px; color: #aebabb; }

@media (max-width: 520px) {
	.mc .mc-week__day { grid-template-columns: 1fr auto; row-gap: 6px; }
	.mc .mc-week__track { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
	.mc .mc-week__track i { animation: none; }
	.mc .mc-week__pulse { animation: none; }
}

/* Vriendelijke melding (vakantie, afwijkende dag). */
.mc .mc-away {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
	color: #171b1c;
	background: #fff8e6;
	border: 1px solid #f2d48a;
	border-radius: 12px;
}
.mc .mc-away__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 38px;
	block-size: 38px;
	color: #7a5200;
	background: #ffe7a6;
	border-radius: 50%;
}
.mc .mc-away__body p { margin: 0; font-size: 14px; line-height: 1.5; color: #3a3220; }
.mc .mc-away__body .mc-away__title { font-weight: 700; color: #171b1c; margin-block-end: 2px; }

/* ---- 23. V-021: bestellen op de pagina Producten ----------------------------- */

.mc .mc-order__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: 10px;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
}
.mc .mc-order__items legend { margin-block-end: 10px; font-weight: 700; }
.mc .mc-order__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	background: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 10px;
}
.mc .mc-order__item label { display: grid; gap: 2px; cursor: pointer; }
.mc .mc-order__name { font-weight: 600; }
.mc .mc-order__price { font-size: 13px; color: #444a4c; }
.mc .mc-order__item input { inline-size: 4.5rem; text-align: center; }
.mc [data-show-when][hidden] { display: none; }

/* ---- 24. V-021: kopmenu met vijf items (Producten erbij) ---------------------- */
.mc .mc-nav__list a,
.mc .mc-header__cta { white-space: nowrap; }
@media (max-width: 1360px) {
	.mc .mc-header__inner { gap: 14px; }
	.mc .mc-nav__list a { font-size: 12px; padding-inline: 8px; letter-spacing: 0; }
	.mc .mc-header__cta { padding-inline: 14px; }
}
/* Tussen tablet en laptop past het volle menu niet: dan het menu achter de knop. */
@media (min-width: 900px) and (max-width: 1139px) {
	.mc .mc-nav { display: none; }
	.mc .mc-header .mc-nav-toggle { display: inline-grid; margin-inline-start: auto; }
}
.mc .mc-lang--header .mc-lang__list { flex-wrap: nowrap; white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1139px) {
	.mc .mc-lang--header { margin-inline-start: auto; }
	.mc .mc-header .mc-nav-toggle { margin-inline-start: 0; }
}

/* ---- 25. V-021: vacatures en formulieren met keuzes --------------------------- */

.mc .mc-jobs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mc .mc-job {
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 22px;
	background: #ffffff;
	border: 1px solid #dddddd;
	border-top: 4px solid #03827c;
	border-radius: 12px;
}
.mc .mc-job > * { margin: 0; }
.mc .mc-job__kind {
	justify-self: start;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #015652;
	background: #e6f4f3;
	border-radius: 999px;
}
.mc .mc-job__title a { color: inherit; text-decoration: none; }
.mc .mc-job__title a:hover { text-decoration: underline; }
.mc .mc-job__text { color: #444a4c; line-height: 1.55; }
.mc .mc-job__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: #444a4c; }
.mc .mc-job__meta li { display: inline-flex; align-items: center; gap: 6px; }
.mc .mc-job__meta .mc-icon { color: #03827c; }
.mc .mc-job .mc-btn { justify-self: start; }
.mc .mc-job__meta--head { margin-block-start: 12px; font-size: 15px; }
.mc .mc-jobs__none { padding: 22px; background: #f5f5f2; border-radius: 12px; }

/* Keuzerondjes en vinkjes als knoppen naast elkaar (in dienst / zzp / stagiair). */
.mc .mc-choice { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.mc .mc-choice legend { inline-size: 100%; margin-block-end: 8px; font-weight: 700; }
.mc .mc-choice__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: #ffffff;
	border: 1px solid #c9cfd0;
	border-radius: 999px;
	cursor: pointer;
}
.mc .mc-choice__item:has(input:checked) { border-color: #03827c; background: #e6f4f3; box-shadow: inset 0 0 0 1px #03827c; }
.mc .mc-choice__item:has(input:focus-visible) { outline: 2px solid #03827c; outline-offset: 2px; }
.mc input[type="file"] { padding: 10px; background: #ffffff; border: 1px dashed #9aa5a7; border-radius: 10px; inline-size: 100%; }
.mc .mc-choice__item input {
	flex: 0 0 auto;
	inline-size: 18px;
	block-size: 18px;
	min-block-size: 0;
	margin: 0;
	accent-color: #03827c;
}
.mc .mc-choice__item span { white-space: nowrap; font-weight: 600; }
.mc .mc-quotes__note { margin: 18px 0 0; text-align: center; font-size: 13px; color: #aebabb; }

/* ---- 26. V-022: openingstijden heren en dames, erkenningsbordje zonder kader -- */

.mc .mc-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 14px 22px; }
.mc .mc-duo__group { display: grid; gap: 6px; align-content: start; }
.mc .mc-duo__title { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #03827c; }
.mc .mc-duo__group.is-dames .mc-duo__title { color: #8a3a63; }
.mc .mc-duo__list { display: grid; gap: 4px; margin: 0; }
.mc .mc-duo__row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 8px; background: rgb(0 0 0 / .035); }
.mc .mc-duo__row dt { font-weight: 700; }
.mc .mc-duo__row dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc .mc-duo__row.is-today { box-shadow: inset 3px 0 0 #03827c; }
.mc .mc-duo__notes { grid-column: 1 / -1; margin: 0; padding: 0; list-style: none; font-size: 13px; color: #7a5200; }
.mc .mc-duo--dark .mc-duo__row { background: rgb(255 255 255 / .06); color: #e8f2f1; }
.mc .mc-duo--dark .mc-duo__title { color: #42c7c6; }
.mc .mc-duo--dark .mc-duo__group.is-dames .mc-duo__title { color: #e7a6c6; }
.mc .mc-duo--dark .mc-duo__notes { color: #ffd98a; }

/* Openingstijden als tabel of per dag (V-029). Volledige dagnamen; vandaag
   met een tealstreep. Tijden als "09:30–19:00" (en-streepje, geen spaties),
   zodat drie kolommen ook in de smalle footer passen. */
.mc .mc-duo--tabel,
.mc .mc-duo--per_dag { display: block; }
.mc .mc-duo--tabel .mc-duo__notes,
.mc .mc-duo--per_dag .mc-duo__notes { margin-block-start: 8px; }
.mc .mc-hours { inline-size: 100%; margin: 0; border-collapse: separate; border-spacing: 0 4px; font-variant-numeric: tabular-nums; }
.mc .mc-hours th,
.mc .mc-hours td { padding: 7px 10px; text-align: start; white-space: nowrap; background: rgb(0 0 0 / .035); border: 0; }
.mc .mc-hours thead th { padding: 0 10px 2px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #5b6366; background: none; }
.mc .mc-hours thead .is-heren { color: #03827c; }
.mc .mc-hours thead .is-dames { color: #8a3a63; }
.mc .mc-hours tbody th { font-weight: 700; border-radius: 8px 0 0 8px; }
.mc .mc-hours tbody td:last-child { border-radius: 0 8px 8px 0; }
.mc .mc-hours .is-closed { color: #6b7375; }
.mc .mc-hours tr.is-today > * { background: rgb(3 130 124 / .09); }
.mc .mc-hours tr.is-today th { box-shadow: inset 3px 0 0 #03827c; }
.mc .mc-days { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.mc .mc-days__item { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; padding: 7px 10px; border-radius: 8px; background: rgb(0 0 0 / .035); }
.mc .mc-days__item.is-today { background: rgb(3 130 124 / .09); box-shadow: inset 3px 0 0 #03827c; }
.mc .mc-days__name { font-weight: 700; }
.mc .mc-days__times { display: grid; justify-items: end; gap: 1px; }
.mc .mc-days__t { white-space: nowrap; }
.mc .mc-days__t b { margin-inline-end: 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #03827c; }
.mc .mc-days__t.is-dames b { color: #8a3a63; }
.mc .mc-days__t.is-closed { color: #6b7375; }
/* Donker (footer). */
.mc .mc-duo--dark .mc-hours th,
.mc .mc-duo--dark .mc-hours td,
.mc .mc-duo--dark .mc-days__item { color: #e8f2f1; background: rgb(255 255 255 / .06); }
.mc .mc-duo--dark .mc-hours thead th { color: #9fb3b1; background: none; }
.mc .mc-duo--dark .mc-hours thead .is-heren,
.mc .mc-duo--dark .mc-days__t b { color: #42c7c6; }
.mc .mc-duo--dark .mc-hours thead .is-dames,
.mc .mc-duo--dark .mc-days__t.is-dames b { color: #e7a6c6; }
.mc .mc-duo--dark .mc-hours .is-closed,
.mc .mc-duo--dark .mc-days__t.is-closed { color: #9fb3b1; }
.mc .mc-duo--dark .mc-hours tr.is-today > *,
.mc .mc-duo--dark .mc-days__item.is-today { background: rgb(66 199 198 / .14); }
.mc .mc-duo--dark .mc-hours tr.is-today th { box-shadow: inset 3px 0 0 #42c7c6; }
.mc .mc-duo--dark .mc-days__item.is-today { box-shadow: inset 3px 0 0 #42c7c6; }
.mc .mc-duo--dark .mc-hours { font-size: 13.5px; }
.mc .mc-duo--dark .mc-hours th,
.mc .mc-duo--dark .mc-hours td { padding-inline: 7px; }
.mc .mc-topbar__item b { font-weight: 800; color: #42c7c6; }

/* Het bordje los, zonder kader: groter en duidelijker, met de link eronder. */
.mc .mc-sbb.has-logo {
	display: inline-grid;
	gap: 8px;
	justify-items: start;
	padding: 0;
	border: 0;
	background: none;
}
.mc .mc-sbb.has-logo:hover { background: none; }
.mc .mc-sbb.has-logo .mc-sbb__logo { inline-size: 150px; block-size: 150px; border-radius: 4px; }
.mc .mc-sbb__check { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #42c7c6; }
.mc .mc-sbb__check .mc-icon { inline-size: 12px; block-size: 12px; }
.mc .mc-sbb.has-logo:hover .mc-sbb__check { text-decoration: underline; }

/* Uitklapbare formulieren en de alertbalk (V-022). */
.mc .mc-fold__panel[hidden] { display: none; }
.mc .mc-fold__panel { display: grid; gap: 16px; }
.mc .mc-section-head .mc-btn[data-mc-fold] { justify-self: start; margin-block-start: 6px; }
.mc .mc-alertbar__box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	padding: 16px 20px;
	background: #e6f4f3;
	border: 1px solid #b9dedb;
	border-radius: 12px;
}
.mc .mc-alertbar__text { display: grid; gap: 4px; flex: 1 1 22rem; }
.mc .mc-alertbar__text > * { margin: 0; }
.mc .mc-alertbar__text .mc-h3 { display: inline-flex; align-items: center; gap: 8px; color: #015652; }
.mc .mc-alertbar__text p { font-size: 14px; color: #2c3436; }
.mc .mc-alertbar .mc-fold__panel { margin-block-start: 16px; }

/* Telefoon met landnummer en adresblok (V-022). */
/* Zonder script: de gewone keuzelijst ("Nederland +31"), zo breed als nodig;
   te smal? Dan komt het nummer eronder. */
.mc .mc-phone__row { display: flex; flex-wrap: wrap; gap: 8px; }
.mc .mc-phone__cc { flex: 0 0 auto; inline-size: auto; max-inline-size: 100%; }
.mc .mc-phone__row input { flex: 1 1 8.5rem; min-inline-size: 8.5rem; }

/* Met script (V-023): een knop met alleen de vlag (V-024) naast het nummer, altijd op
   één regel. Open: een lijst met vlag, nummer en naam (assets/phone.js). */
.mc .mc-phone.has-flags .mc-phone__row { flex-wrap: nowrap; align-items: stretch; }
.mc .mc-phone.has-flags .mc-phone__row input { flex: 1 1 auto; min-inline-size: 0; }
.mc .mc-cc { position: relative; flex: 0 0 auto; display: flex; }
.mc .mc-cc__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-block-size: 3rem;
	padding: 0 10px;
	font: inherit;
	font-size: max(16px, var(--fs-base));
	color: var(--c-text);
	background: var(--c-bg);
	border: 1px solid var(--c-line-control);
	border-radius: var(--radius-s);
	white-space: nowrap;
	cursor: pointer;
}
.mc .mc-cc__btn:hover { border-color: #03827c; }
.mc .mc-cc__btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 1px; }
.mc .mc-cc__flag { flex: none; inline-size: 24px; block-size: 16px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.18); }
.mc .mc-cc__dial { font-variant-numeric: tabular-nums; }
.mc .mc-cc__caret { inline-size: 0; block-size: 0; border-inline: 5px solid transparent; border-block-start: 6px solid currentColor; opacity: 0.65; transition: transform 0.15s ease; }
.mc .mc-cc.is-open .mc-cc__caret { transform: rotate(180deg); }
.mc .mc-cc__list {
	position: absolute;
	z-index: 40;
	inset-block-start: calc(100% + 4px);
	inset-inline-start: 0;
	inline-size: max-content;
	min-inline-size: 15rem;
	max-inline-size: min(20rem, 86vw);
	max-block-size: 17rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0;
	padding: 4px;
	list-style: none;
	color: var(--c-text);
	background: var(--c-bg);
	border: 1px solid var(--c-line-control);
	border-radius: var(--radius-s);
	box-shadow: 0 12px 32px rgb(0 0 0 / 0.18);
}
.mc .mc-cc__list[hidden] { display: none; }
.mc .mc-cc__list [role="option"] { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; font-size: 15px; line-height: 1.2; cursor: pointer; }
.mc .mc-cc__list [role="option"]:hover,
.mc .mc-cc__list [role="option"].is-active { background: rgb(3 130 124 / 0.12); }
.mc .mc-cc__list [aria-selected="true"] { font-weight: 700; }
.mc .mc-cc__list .mc-cc__dial { min-inline-size: 3.4rem; }
.mc .mc-cc__name { color: var(--c-text-2); }

/* Velden even hoog (V-023): invoervelden, keuzelijsten en de knop met vlag
   48px, ook naast elkaar (contact, sollicitatie, bestellen). */
.mc .mc-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.mc .mc-field select { block-size: 3rem; min-block-size: 3rem; padding-block: 0; }
/* Twee velden naast elkaar: labels, velden en hints op dezelfde hoogte, ook
   als het ene label (bijv. "(niet verplicht)") op twee regels staat. */
@media (min-width: 640px) {
	@supports (grid-template-rows: subgrid) {
		.mc .mc-field--row { grid-template-rows: auto auto auto; row-gap: 0; }
		.mc .mc-field--row > .mc-field { grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--sp-2); align-items: end; }
		.mc .mc-field--row > .mc-field > :not(label) { align-self: start; }
	}
}
.mc .mc-address { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }
.mc .mc-address legend { margin-block-end: 6px; font-weight: 700; }
.mc .mc-address__top { grid-template-columns: 2fr 1.2fr 1fr; }
@media (max-width: 560px) { .mc .mc-address__top { grid-template-columns: 1fr 1fr; } }
.mc [data-show-filled][hidden],
.mc [data-show-choice][hidden] { display: none; }
/* Sollicitatie in delen (V-023): wat zoek je, over jou, adres, cv en motivatie. */
.mc .mc-formpart { display: grid; gap: 14px; margin: 0; padding: 18px 0 0; border: 0; border-block-start: 1px solid #e3e8e8; }
.mc .mc-formpart:first-of-type { padding-block-start: 0; border-block-start: 0; }
.mc .mc-formpart > legend { float: left; inline-size: 100%; margin-block-end: 4px; padding: 0; font-family: var(--font-display, inherit); font-size: 1.15rem; font-weight: 700; }
.mc .mc-formpart > legend + * { clear: both; }

/* ---- 27. V-022: reviews in bewegende rijen ------------------------------------ */

.mc .mc-marquee { display: grid; gap: 18px; margin-block: 8px 0; overflow: hidden; }
.mc .mc-marquee__row {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.mc .mc-marquee__track { display: flex; gap: 18px; inline-size: max-content; margin: 0; padding: 4px 0; list-style: none; }
.mc .mc-marquee .mc-quote { inline-size: min(78vw, 340px); flex: 0 0 auto; }
.mc .mc-marquee .mc-quote blockquote p {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mc .mc-quotes.is-moving .mc-marquee__track { animation: mc-marquee var(--mc-secs, 60s) linear infinite; }
.mc .mc-quotes.is-moving .mc-marquee__row.is-reverse .mc-marquee__track { animation-direction: reverse; }
.mc .mc-quotes.is-moving .mc-marquee__row:hover .mc-marquee__track,
.mc .mc-quotes.is-moving .mc-marquee__row:focus-within .mc-marquee__track,
.mc .mc-quotes.is-paused .mc-marquee__track { animation-play-state: paused; }
@keyframes mc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Niet genoeg reviews om te bewegen: netjes in het midden. */
.mc .mc-quotes:not(.is-moving) .mc-marquee__track { inline-size: auto; flex-wrap: wrap; justify-content: center; padding-inline: 16px; }
/* Minder beweging op het apparaat: de rij beweegt toch, trager (op verzoek,
   V-027, net als de ticker). base.css zet animaties dan uit met !important;
   dit gaat daarvoor. De pauzeknop blijft. */
@media (prefers-reduced-motion: reduce) {
	.mc .mc-quotes.is-moving .mc-marquee__track { animation-duration: calc(var(--mc-secs, 60s) * 1.6) !important; animation-iteration-count: infinite !important; }
}
/* V-026: drie kaarten per rij in beeld (tablet twee, telefoon één met een
   stukje van de volgende), binnen de breedte van de pagina. De breedte van
   een kaart rekent met de breedte van de rij (container query), zodat er
   altijd precies drie naast elkaar passen terwijl de rij doorloopt. */
.mc .mc-marquee {
	box-sizing: border-box;
	max-inline-size: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.mc .mc-marquee__row {
	container-type: inline-size;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
}
.mc .mc-marquee .mc-quote { inline-size: calc(100cqi - 48px); }
@media (min-width: 640px) { .mc .mc-marquee .mc-quote { inline-size: calc((100cqi - 18px) / 2); } }
@media (min-width: 1024px) { .mc .mc-marquee .mc-quote { inline-size: calc((100cqi - 36px) / 3); } }
.mc .mc-marquee .mc-quote { box-sizing: border-box; }

.mc .mc-quote__who { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.mc .mc-quote__who b { color: #e8f2f1; }
.mc .mc-quote__who a, .mc .mc-quote__who span { font-size: 12.5px; color: #8fa3a5; }
.mc .mc-quote__who a { text-decoration: underline; text-underline-offset: 2px; }
.mc .mc-quotes__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; margin-block-start: 22px; }
.mc .mc-quotes__foot .mc-quotes__note { margin: 0; }
.mc .mc-quotes__pause {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 13px;
	color: #e8f2f1;
	background: transparent;
	border: 1px solid #36504f;
	border-radius: 999px;
	cursor: pointer;
}
.mc .mc-quotes__pause:hover { border-color: #42c7c6; }

/* ---- 28. V-023: openingstijden als bewegende regel (ticker) in de topbalk ---- */
/* De regel staat twee keer achter elkaar en schuift de helft op: zo loopt hij
   naadloos door. Stil bij de muis erop, bij Tab en met de pauzeknop. */
.mc .mc-ticker { display: flex; align-items: center; gap: 8px; flex: 1 1 16rem; min-inline-size: 0; }
.mc .mc-ticker__link {
	flex: 1 1 auto;
	min-inline-size: 0;
	overflow: hidden;
	color: #e8f2f1;
	text-decoration: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}
.mc .mc-ticker__link:hover { color: #ffffff; }
.mc .mc-ticker__link:focus-visible { outline: 2px solid #42c7c6; outline-offset: 2px; }
.mc .mc-ticker__track { display: flex; inline-size: max-content; white-space: nowrap; animation: mc-ticker var(--mc-ticker-secs, 40s) linear infinite; }
.mc .mc-ticker__group { display: flex; align-items: center; padding-inline-end: 22px; }
.mc .mc-ticker__part { display: inline-flex; align-items: center; gap: 6px; }
.mc .mc-ticker__part + .mc-ticker__part::before { content: ""; inline-size: 4px; block-size: 4px; margin-inline: 16px; border-radius: 50%; background: #42c7c6; }
.mc .mc-ticker__group + .mc-ticker__group::before { content: ""; inline-size: 4px; block-size: 4px; margin-inline-end: 16px; border-radius: 50%; background: #42c7c6; }
.mc .mc-ticker__part b { font-weight: 800; color: #42c7c6; }
.mc .mc-ticker__now { font-weight: 700; }
.mc .mc-ticker__now .mc-icon { color: #42c7c6; }
.mc .mc-ticker:hover .mc-ticker__track,
.mc .mc-ticker:focus-within .mc-ticker__track,
.mc .mc-ticker.is-paused .mc-ticker__track { animation-play-state: paused; }
@keyframes mc-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mc .mc-ticker__pause {
	flex: none;
	display: inline-grid;
	place-items: center;
	inline-size: 26px;
	block-size: 26px;
	padding: 0;
	color: #e8f2f1;
	background: transparent;
	border: 1px solid #36504f;
	border-radius: 999px;
	cursor: pointer;
}
.mc .mc-ticker__pause:hover { border-color: #42c7c6; }
.mc .mc-ticker__pause:focus-visible { outline: 2px solid #42c7c6; outline-offset: 2px; }
.mc .mc-ticker__pause .mc-icon { inline-size: 13px; block-size: 13px; }
.mc .mc-ticker__icon-play,
.mc .mc-ticker.is-paused .mc-ticker__icon-pause { display: none; }
.mc .mc-ticker.is-paused .mc-ticker__icon-play { display: inline-block; }
/* Minder beweging op het apparaat: de ticker loopt toch (op verzoek, V-024),
   maar half zo snel (site.js), en de pauzeknop blijft. base.css zet bij
   minder beweging alle animaties uit met !important; dit gaat daarvoor. */
@media (prefers-reduced-motion: reduce) {
	.mc .mc-ticker .mc-ticker__track { animation-duration: var(--mc-ticker-secs, 80s) !important; animation-iteration-count: infinite !important; }
}
/* Mobiel (onder 900px): van de topbalk alleen de ticker, als smalle regel. */
@media (max-width: 899px) {
	.mc .mc-topbar { display: block; }
	.mc .mc-topbar__inner { min-block-size: 0; padding-block: 5px; }
	.mc .mc-topbar__inner > :not(.mc-ticker) { display: none; }
}

/* Openingstijden in de footer (V-029): de kolom met de tijden iets breder
   op een groot scherm (merk, contact, tijden, menu), en de tabel compacter
   als het vak smal is. */
@media (min-width: 640px) {
	.mc .mc-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.mc .mc-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, .85fr); }
}
.mc .mc-duo--tabel { container-type: inline-size; overflow-x: auto; }
@container (max-width: 320px) {
	.mc .mc-hours { font-size: 12.5px; }
	.mc .mc-hours th,
	.mc .mc-hours td { padding-inline: 5px; }
	.mc .mc-hours thead th { font-size: 10.5px; letter-spacing: .08em; }
}

/* V-030: de bewegende tijden bovenin linken naar de openingstijden in de
   footer (#openingstijden). Ruimte boven het anker, zodat de vaste header
   de kop "Openingstijden" niet bedekt. */
.mc #openingstijden { scroll-margin-block-start: 7rem; }

/* V-031: Instagram en TikTok (en Facebook) als gekleurd logo (mc_brand_icon),
   zodat ze opvallen op de donkere balk bovenin en in de footer. */
.mc .mc-brand { display: block; inline-size: 1.25rem; block-size: 1.25rem; flex: none; border-radius: 6px; }
.mc .mc-brand--tiktok { box-shadow: 0 0 0 1px rgb(255 255 255 / .22); } /* zwart tegeltje: randje op donker */
.mc .mc-topbar__social { padding-inline: 3px; }
.mc .mc-topbar__social:hover .mc-brand,
.mc .mc-topbar__social:focus-visible .mc-brand { transform: scale(1.12); }
.mc .mc-footer__social { border-color: transparent; }
.mc .mc-footer__social .mc-brand { inline-size: 1.75rem; block-size: 1.75rem; border-radius: 8px; transition: transform var(--dur-fast) var(--ease-out); }
.mc .mc-footer__social:hover,
.mc .mc-footer__social:focus-visible { border-color: transparent; }
.mc .mc-footer__social:hover .mc-brand,
.mc .mc-footer__social:focus-visible .mc-brand { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) {
	.mc .mc-topbar__social:hover .mc-brand,
	.mc .mc-topbar__social:focus-visible .mc-brand,
	.mc .mc-footer__social:hover .mc-brand,
	.mc .mc-footer__social:focus-visible .mc-brand { transform: none; }
}

/* ---- V-035: Google-reviews live op de homepage --------------------------------
   Dezelfde kaarten als de eigen reviews, met bovenaan de schrijver (foto, naam
   met link naar het profiel), zoals Google het vraagt. Onderaan "Google Maps"
   in de vorm die Google voorschrijft: normaal gewicht, 12 tot 16 pixels, niet
   afgebroken, niet vertaald (translate="no" in de HTML), wit op donker. */
.mc .mc-quote__author { display: flex; align-items: center; gap: 10px; min-inline-size: 0; }
.mc .mc-quote__avatar { inline-size: 36px; block-size: 36px; flex: none; border-radius: 50%; object-fit: cover; background: #18302f; }
.mc .mc-quote__name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: #e8f2f1; }
.mc a.mc-quote__name { text-decoration: none; }
.mc a.mc-quote__name:hover, .mc a.mc-quote__name:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.mc .mc-quotes__score { margin: 0 0 28px; color: #e8f2f1; font-weight: 600; }
.mc .mc-quotes__wait { margin: 0; padding: 24px 16px; text-align: center; color: #8fa3a5; font-size: 14px; }
.mc .mc-quotes__all {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	color: #0b1719;
	background: #e8f2f1;
	border-radius: 999px;
	text-decoration: none;
}
.mc .mc-quotes__all:hover, .mc .mc-quotes__all:focus-visible { background: #ffffff; color: #0b1719; }
.mc .mc-quotes.is-google .mc-quotes__note { flex-basis: 100%; max-inline-size: 46rem; }
.mc .mc-gmaps {
	display: inline-block;
	margin-inline-end: 6px;
	font-family: Roboto, Arial, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 13px;
	letter-spacing: normal;
	white-space: nowrap;
	color: #ffffff;
}