/* ==========================================================================
   MorrisMuis — custom styles
   ========================================================================== */

:root {
	/* --- Palette ------------------------------------------------------ */
	--mm-cream: #fef8e7;
	--mm-cream-soft: #f6ecc9;
	--mm-cream-deep: #ecdfb0;
	--mm-bark: #2f1d10;
	--mm-chocolate: #5a3a22;
	--mm-caramel: #c89968;
	--mm-moss: #7a8c3f;
	--mm-moss-deep: #5a6b2d;
	--mm-danger: #b04a2f;

	/* --- Border / shape --------------------------------------------- */
	--mm-radius-sm: 12px;
	--mm-radius-md: 18px;
	--mm-radius-lg: 22px;
	--mm-radius-pill: 999px;
	--mm-border-soft: 1px solid rgba(47, 29, 16, 0.06);
	--mm-border-medium: 1px solid rgba(47, 29, 16, 0.10);

	/* --- Shadows ---------------------------------------------------- */
	--mm-shadow-card: 0 12px 40px -20px rgba(47, 29, 16, 0.14);
	--mm-shadow-btn-hover: 0 12px 24px -14px rgba(47, 29, 16, 0.40);

	/* --- Buttons (single source of truth) --------------------------- */
	--mm-btn-radius: 999px;
	--mm-btn-font: 'Outfit', system-ui, sans-serif;
	--mm-btn-weight: 600;
	--mm-btn-letter: 0.01em;

	/* Heights per maat */
	--mm-btn-size-sm: 40px;
	--mm-btn-size-md: 48px;
	--mm-btn-size-lg: 54px;

	/* Padding per maat */
	--mm-btn-pad-sm: 0 1.25rem;
	--mm-btn-pad-md: 0 1.5rem;
	--mm-btn-pad-lg: 0 2rem;

	/* Font-size per maat */
	--mm-btn-fs-sm: 0.875rem;
	--mm-btn-fs-md: 0.9375rem;
	--mm-btn-fs-lg: 1rem;

	/* --- Typografie tokens ------------------------------------------ */
	--mm-font-display: 'Quicksand', 'Nunito', system-ui, sans-serif;
	--mm-font-body: 'DM Sans', system-ui, sans-serif;
	--mm-font-ui: 'Outfit', system-ui, sans-serif;
	--mm-panel-title-fs: 1.0625rem;
	--mm-panel-title-fs-md: 1.125rem;
	--mm-panel-title-weight: 500;
	--mm-panel-title-letter: -0.01em;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
	max-width: 100%;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	font-family: 'DM Sans', system-ui, sans-serif;
	background-color: var(--mm-cream);
	color: var(--mm-bark);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	max-width: 100vw;
	position: relative;
	-webkit-tap-highlight-color: transparent;
}

/* Premium text selection — branded warm caramel tint. */
::selection {
	background-color: rgba(200, 153, 104, 0.32);
	color: var(--mm-bark);
}
::-moz-selection {
	background-color: rgba(200, 153, 104, 0.32);
	color: var(--mm-bark);
}

/* Custom scrollbar — subtle, warm, matches the brand. */
@media (min-width: 768px) {
	html {
		scrollbar-width: thin;
		scrollbar-color: rgba(47, 29, 16, 0.20) transparent;
	}
	::-webkit-scrollbar {
		width: 10px;
		height: 10px;
	}
	::-webkit-scrollbar-track {
		background: transparent;
	}
	::-webkit-scrollbar-thumb {
		background-color: rgba(47, 29, 16, 0.18);
		border-radius: 999px;
		border: 2px solid var(--mm-cream);
		transition: background-color 0.2s ease;
	}
	::-webkit-scrollbar-thumb:hover {
		background-color: rgba(47, 29, 16, 0.32);
	}
}

/* Universal focus ring tokens — consistent across all interactive elements. */
:focus-visible {
	outline: 2px solid var(--mm-chocolate);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Avoid double-rings on elements that already define their own focus style. */
.mm-btn:focus-visible,
.mm-icon-btn:focus-visible,
.mm-snackbar__close:focus-visible,
.mm-drawer-link:focus-visible,
.mm-faq__summary:focus-visible,
.mm-help-tab:focus-visible,
.mm-account-nav__link:focus-visible,
.mm-catalog-card__add:focus-visible,
.mm-product-details__summary:focus-visible {
	outline: none;
}

/* Sensible link styling baseline (theme-level links inherit body color). */
a {
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}

/* Safety nets — nothing escapes the viewport horizontally. */
img, svg, video, iframe, canvas {
	max-width: 100%;
	height: auto;
}
.mm-page, .mm-wc { max-width: 100vw; overflow-x: clip; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mm-font-display);
	font-weight: 400;
}

/* Anchor offset for hash-links under the fixed nav */
[id="contact"] { scroll-margin-top: 96px; }

/* ---------- Reveal-on-scroll utility ------------------------------------- */
.mm-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
.mm-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.mm-reveal[data-delay="100"] { transition-delay: 100ms; }
.mm-reveal[data-delay="200"] { transition-delay: 200ms; }
.mm-reveal[data-delay="300"] { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
	.mm-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.animate-floaty {
		animation: none !important;
	}
	html { scroll-behavior: auto; }

	/* Honour the user's preference — keep everything calm. */
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   MODAL — Reusable confirm dialog (gebruikt via MM.confirm()).
   Branded card, centered, backdrop blur, mobile-first.
   ========================================================================== */
.mm-modal {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s ease;
}
.mm-modal.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.mm-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(47, 29, 16, 0.55);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.mm-modal__backdrop {
		background: rgba(47, 29, 16, 0.50);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
	}
}

.mm-modal__panel {
	position: relative;
	width: 100%;
	max-width: 24rem;
	background: var(--mm-cream);
	border-radius: 22px;
	padding: 1.75rem 1.5rem 1.5rem;
	box-shadow: 0 30px 60px -20px rgba(47, 29, 16, 0.45);
	transform: translateY(10px) scale(0.97);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.mm-modal.is-visible .mm-modal__panel {
	transform: translateY(0) scale(1);
}

.mm-modal__title {
	margin: 0 0 0.6rem;
	font-family: var(--mm-font-display);
	font-weight: 500;
	font-size: 1.375rem;
	line-height: 1.2;
	color: var(--mm-bark);
	letter-spacing: -0.01em;
}
@media (min-width: 640px) {
	.mm-modal__title { font-size: 1.5rem; }
}

.mm-modal__message {
	margin: 0 0 1.5rem;
	font-family: var(--mm-font-body);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--mm-chocolate);
}

.mm-modal__actions {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.6rem;
}
@media (min-width: 480px) {
	.mm-modal__actions {
		flex-direction: row;
		justify-content: flex-end;
	}
}
.mm-modal__actions .mm-btn {
	width: 100%;
}
@media (min-width: 480px) {
	.mm-modal__actions .mm-btn { width: auto; min-width: 7rem; }
}

/* Danger variant — rode bevestig-knop voor destructieve acties. */
.mm-btn--danger {
	background-color: var(--mm-danger);
	color: var(--mm-cream);
	border-color: transparent;
}
.mm-btn--danger:link,
.mm-btn--danger:visited { color: var(--mm-cream); }
.mm-btn--danger:hover {
	background-color: #94391f;
	color: var(--mm-cream);
	transform: translateY(-1px);
	box-shadow: var(--mm-shadow-btn-hover);
}

/* ---------- Hero door walk-through ------------------------------------- */
.mm-door {
	display: block;
	cursor: default;
}
.mm-door__img {
	display: block;
	margin-inline: auto;
}
/* Open door sits exactly on top of the closed one, hidden until opened. */
.mm-door__img--open {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}
.mm-door__img--closed {
	transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.mm-door.is-open .mm-door__img--open {
	opacity: 1;
}
.mm-door.is-open .mm-door__img--closed {
	opacity: 0;
}

/* Fullscreen "walking through the doorway" portal. */
#mm-door-portal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: #fef8e7;
	opacity: 0;
	transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	overflow: hidden;
	pointer-events: none;
}
#mm-door-portal.is-active {
	opacity: 1;
}
.mm-door-portal__zoom {
	position: absolute;
	transform: scale(1);
	opacity: 1;
	transform-origin: center center;
	transition:
		transform 0.45s cubic-bezier(0.55, 0, 0.65, 1),
		opacity 0.3s ease 0.12s;
	will-change: transform, opacity;
}
.mm-door-portal__zoom.is-zooming {
	transform: scale(4);
	opacity: 0;
}
.mm-door-portal__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
	.mm-door__img--open,
	.mm-door__img--closed { transition: none; }
	#mm-door-portal { display: none; }
}

/* ==========================================================================
   FOOTER — clean premium webshop footer.
   ========================================================================== */
.mm-footer {
	padding: 4.5rem 0 1.75rem;
}
@media (min-width: 768px) {
	.mm-footer { padding: 5.5rem 0 2rem; }
}

.mm-footer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem 2rem;
}
@media (min-width: 768px) {
	.mm-footer__grid {
		grid-template-columns: 2.2fr 1fr 1fr 1fr;
		gap: 3rem;
	}
}

.mm-footer__brand {
	grid-column: 1 / -1;
	max-width: 22rem;
}
@media (min-width: 768px) {
	.mm-footer__brand { grid-column: auto; }
}
.mm-footer__tagline {
	margin: 1.1rem 0 0;
	font-family: var(--mm-font-body);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--mm-chocolate);
	max-width: 22rem;
}
.mm-footer__credits {
	margin: 1.25rem 0 0;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 0.75rem;
	line-height: 1.7;
	letter-spacing: 0.02em;
	color: var(--mm-chocolate);
	opacity: 0.7;
}

.mm-footer__eyebrow {
	margin: 0 0 1.1rem;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--mm-bark);
}

.mm-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

/* Bedrijfsgegevens-kolom — platte tekst (geen links), rustig en leesbaar. */
.mm-footer__list--info li {
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--mm-chocolate);
	font-variant-numeric: tabular-nums;
}

.mm-footer__link {
	display: inline-block;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--mm-chocolate);
	text-decoration: none;
	transition: color 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.mm-footer__link:hover {
	color: var(--mm-bark);
	transform: translateX(2px);
}
.mm-footer__link--inline {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}
.mm-footer__link--inline svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform 0.25s ease;
}
.mm-footer__link--inline:hover svg { transform: scale(1.08); }

/* Bottom strip — hairline + copyright + inline legal links */
.mm-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 0.9rem;
	margin-top: 3.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(47, 29, 16, 0.10);
	font-family: 'Outfit', system-ui, sans-serif;
}
@media (min-width: 640px) {
	.mm-footer__bottom {
		flex-direction: row;
		gap: 1.5rem;
	}
}

.mm-footer__copy {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--mm-chocolate);
	opacity: 0.7;
}

.mm-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	flex-wrap: wrap;
	justify-content: center;
}
.mm-footer__legal a {
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--mm-chocolate);
	text-decoration: none;
	opacity: 0.75;
	transition: opacity 0.2s ease, color 0.2s ease;
}
.mm-footer__legal a:hover {
	opacity: 1;
	color: var(--mm-bark);
}
.mm-footer__legal-sep {
	color: var(--mm-chocolate);
	opacity: 0.4;
	font-size: 0.75rem;
	user-select: none;
}

/* Social icons — small, clean, hairline circle that fills on hover. */
.mm-footer__socials {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.mm-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	color: var(--mm-chocolate);
	background: transparent;
	border: 1px solid rgba(47, 29, 16, 0.14);
	transition: color 0.2s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.mm-footer__social svg {
	width: 15px;
	height: 15px;
	transition: transform 0.25s ease;
}
.mm-footer__social:hover {
	color: var(--mm-cream);
	background-color: var(--mm-bark);
	border-color: var(--mm-bark);
}
.mm-footer__social:hover svg { transform: scale(1.08); }
.mm-footer__social:focus-visible {
	outline: 2px solid var(--mm-chocolate);
	outline-offset: 3px;
}

/* TikTok (and other socials) not live yet — visible but not interactive. */
.mm-footer__social--pending {
	filter: blur(0.75px);
	opacity: 0.42;
	pointer-events: none;
	cursor: default;
}
.mm-footer__social--pending:hover {
	color: var(--mm-chocolate);
	background-color: transparent;
	border-color: rgba(47, 29, 16, 0.14);
	transform: none;
}
.mm-footer__social--pending:hover svg {
	transform: none;
}

/* On cream-soft/deep footers the hairline reads a touch deeper */
.mm-footer--soft .mm-footer__social,
.mm-footer--deep .mm-footer__social {
	border-color: rgba(47, 29, 16, 0.18);
}

/* ==========================================================================
   NAVBAR — premium frosted glass with hairline border.
   ========================================================================== */
.mm-nav {
	background-color: rgba(254, 248, 231, 0.94);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.mm-nav {
		background-color: rgba(254, 248, 231, 0.72);
		backdrop-filter: saturate(180%) blur(18px);
		-webkit-backdrop-filter: saturate(180%) blur(18px);
	}
}
.mm-nav.is-scrolled {
	background-color: rgba(254, 248, 231, 0.96);
	box-shadow: 0 1px 0 rgba(47, 29, 16, 0.04), 0 10px 32px -22px rgba(47, 29, 16, 0.20);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.mm-nav.is-scrolled {
		background-color: rgba(254, 248, 231, 0.88);
	}
}

/* Hairline border baked into the nav (always-on, intensifies on scroll) */
.mm-nav__hairline {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(
		to right,
		transparent,
		rgba(47, 29, 16, 0.10) 18%,
		rgba(47, 29, 16, 0.10) 82%,
		transparent
	);
	transition: opacity 0.3s ease;
	opacity: 0.55;
	pointer-events: none;
}
.mm-nav.is-scrolled .mm-nav__hairline { opacity: 1; }

/* Tiny uppercase eyebrow next to the hamburger — premium signal. */
.mm-nav__eyebrow {
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mm-chocolate);
	user-select: none;
}

/* ---------- Icon buttons (shared) ---------------------------------------- */
.mm-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	color: var(--mm-bark);
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.mm-icon-btn svg {
	width: 20px;
	height: 20px;
	transition: transform 0.25s ease;
}
.mm-icon-btn:hover {
	background-color: rgba(47, 29, 16, 0.06);
	color: var(--mm-bark);
}
.mm-icon-btn:hover svg { transform: scale(1.06); }
.mm-icon-btn:active { transform: scale(0.96); }
.mm-icon-btn:focus-visible {
	outline: none;
	background-color: rgba(47, 29, 16, 0.08);
	box-shadow: 0 0 0 2px var(--mm-cream), 0 0 0 3px var(--mm-chocolate);
}
.mm-icon-btn--sm {
	width: 38px;
	height: 38px;
}
.mm-icon-btn--sm svg { width: 18px; height: 18px; }

@media (min-width: 640px) {
	.mm-icon-btn { width: 44px; height: 44px; }
	.mm-icon-btn svg { width: 21px; height: 21px; }
}

/* Cart badge — original moss chip, top-right corner of the icon button. */
.mm-icon-btn--cart .mm-cart-count {
	position: absolute;
	top: -2px;
	right: -2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 0.25rem;
	border-radius: 999px;
	background: var(--mm-moss);
	color: var(--mm-cream);
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 1px 2px rgba(47, 29, 16, 0.18), 0 0 0 2px var(--mm-cream);
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.mm-icon-btn--cart:hover .mm-cart-count {
	transform: scale(1.08);
	box-shadow: 0 2px 6px rgba(47, 29, 16, 0.28), 0 0 0 2px var(--mm-cream);
}

/* Bump animation when cart count changes — triggers via JS toggle of .is-bumped. */
@keyframes mm-cart-bump {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.25); }
	60%  { transform: scale(0.95); }
	100% { transform: scale(1); }
}
.mm-icon-btn--cart .mm-cart-count.is-bumped {
	animation: mm-cart-bump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Hamburger morph ---------------------------------------------- */
.mm-burger { color: var(--mm-bark); }
.mm-burger__line {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: 20px;
	height: 1.5px;
	background: currentColor;
	border-radius: 2px;
	transform-origin: center;
	transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.25s ease, width 0.3s ease;
}
.mm-burger__line--top { transform: translate(-50%, -6px); }
.mm-burger__line--mid { transform: translate(-50%, -50%); width: 14px; }
.mm-burger__line--bot { transform: translate(-50%, 4px); }
.mm-burger:hover .mm-burger__line--mid { width: 20px; }

.mm-burger.is-open .mm-burger__line--top {
	transform: translate(-50%, -50%) rotate(45deg);
	width: 20px;
}
.mm-burger.is-open .mm-burger__line--mid {
	opacity: 0;
	transform: translate(-50%, -50%) scaleX(0.1);
}
.mm-burger.is-open .mm-burger__line--bot {
	transform: translate(-50%, -50%) rotate(-45deg);
	width: 20px;
}

/* ---------- Logo --------------------------------------------------------- */
.mm-logo,
img.mm-logo {
	display: block;
	width: auto;
	height: auto;
}
.mm-nav .mm-logo--nav {
	height: 36px;
	max-height: 36px;
	max-width: 160px;
}
@media (min-width: 640px) {
	.mm-nav .mm-logo--nav { height: 42px; max-height: 42px; max-width: 180px; }
}
.mm-drawer .mm-logo--drawer {
	height: 32px;
	max-height: 32px;
	max-width: 150px;
}
footer .mm-logo--footer {
	height: 34px;
	max-height: 34px;
	max-width: 150px;
}
.mm-logo-link {
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.mm-logo-link:hover { opacity: 0.82; }

/* ==========================================================================
   SIDEBAR DRAWER — premium menu with eyebrow labels & hairline dividers.
   ========================================================================== */
.mm-drawer {
	transform: translateX(-100%);
	background-color: var(--mm-cream);
	box-shadow: 24px 0 60px -30px rgba(47, 29, 16, 0.28);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.mm-drawer.is-open {
	transform: translateX(0);
}
.mm-drawer-backdrop {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.mm-drawer-backdrop {
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
	}
}
.mm-drawer-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

.mm-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid rgba(47, 29, 16, 0.08);
}

.mm-drawer__nav {
	flex: 1;
	padding: 1.75rem 1.5rem 1rem;
}

.mm-drawer__eyebrow {
	margin: 0 0 0.85rem;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--mm-chocolate);
	opacity: 0.7;
}
.mm-drawer__eyebrow--secondary {
	margin-top: 2rem;
}

.mm-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(47, 29, 16, 0.08);
}
.mm-drawer__list li {
	border-bottom: 1px solid rgba(47, 29, 16, 0.08);
}

/* Big premium nav links — restrained type with chevron that walks right. */
.mm-drawer-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	font-family: 'Outfit', system-ui, sans-serif;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--mm-bark);
	text-decoration: none;
	transition: color 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}

/* Stagger drawer links in when the drawer opens. */
@keyframes mm-drawer-fade-in {
	from { opacity: 0; transform: translateX(-12px); }
	to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
	.mm-drawer.is-open .mm-drawer__list li {
		animation: mm-drawer-fade-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
	.mm-drawer.is-open .mm-drawer__list li:nth-child(1) { animation-delay: 0.10s; }
	.mm-drawer.is-open .mm-drawer__list li:nth-child(2) { animation-delay: 0.16s; }
	.mm-drawer.is-open .mm-drawer__list li:nth-child(3) { animation-delay: 0.22s; }
	.mm-drawer.is-open .mm-drawer__list li:nth-child(4) { animation-delay: 0.28s; }
	.mm-drawer.is-open .mm-drawer__list li:nth-child(5) { animation-delay: 0.34s; }
}
.mm-drawer-link__label {
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.mm-drawer-link__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--mm-chocolate);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease;
}
.mm-drawer-link__arrow svg { width: 18px; height: 18px; }
.mm-drawer-link:hover { color: var(--mm-chocolate); }
.mm-drawer-link:hover .mm-drawer-link__label { transform: translateX(2px); }
.mm-drawer-link:hover .mm-drawer-link__arrow {
	opacity: 1;
	transform: translateX(0);
	color: var(--mm-bark);
}
.mm-drawer-link.is-disabled {
	pointer-events: none;
	color: rgba(47, 29, 16, 0.32);
}

/* Small sublinks (account, cart) */
.mm-drawer__list--small {
	border-top: 1px solid rgba(47, 29, 16, 0.08);
}
.mm-drawer-sublink {
	display: block;
	padding: 0.75rem 0;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--mm-chocolate);
	text-decoration: none;
	transition: color 0.2s ease, transform 0.25s ease;
}
.mm-drawer-sublink:hover {
	color: var(--mm-bark);
	transform: translateX(2px);
}

/* Drawer foot — contact + copy */
.mm-drawer__foot {
	padding: 1.25rem 1.5rem 1.75rem;
	border-top: 1px solid rgba(47, 29, 16, 0.08);
}
.mm-drawer__contact {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	margin-bottom: 1.25rem;
}
.mm-drawer__contact-link {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 0.875rem;
	color: var(--mm-chocolate);
	text-decoration: none;
	transition: color 0.2s ease;
}
.mm-drawer__contact-link svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.mm-drawer__contact-link:hover { color: var(--mm-bark); }

.mm-drawer__copy {
	margin: 0;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--mm-chocolate);
	opacity: 0.6;
}

/* ==========================================================================
   BUTTONS — single source of truth.
   Compose: <a class="mm-btn mm-btn--primary mm-btn--lg">…</a>.
   Modifiers: --primary | --secondary | --ghost   ×  --sm | --md | --lg | --block.
   .mm-cta is a back-compat alias for .mm-btn--primary.
   ========================================================================== */
.mm-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 1px solid transparent;
	border-radius: var(--mm-btn-radius);
	min-height: var(--mm-btn-size-md);
	padding: var(--mm-btn-pad-md);
	font-family: var(--mm-btn-font);
	font-size: var(--mm-btn-fs-md);
	font-weight: var(--mm-btn-weight);
	letter-spacing: var(--mm-btn-letter);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	text-shadow: none;
	user-select: none;
	-webkit-user-select: none;
	transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}
.mm-btn:link,
.mm-btn:visited { text-decoration: none; }

.mm-btn:focus-visible {
	outline: 2px solid var(--mm-chocolate);
	outline-offset: 3px;
}

.mm-btn:disabled,
.mm-btn.is-disabled,
.mm-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* --- Sizes ---------------------------------------------------------- */
.mm-btn--sm {
	min-height: var(--mm-btn-size-sm);
	padding: var(--mm-btn-pad-sm);
	font-size: var(--mm-btn-fs-sm);
}
.mm-btn--md {
	min-height: var(--mm-btn-size-md);
	padding: var(--mm-btn-pad-md);
	font-size: var(--mm-btn-fs-md);
}
.mm-btn--lg {
	min-height: var(--mm-btn-size-lg);
	padding: var(--mm-btn-pad-lg);
	font-size: var(--mm-btn-fs-lg);
}
.mm-btn--block { width: 100%; }

/* --- Variant: primary (bark fill) ---------------------------------- */
.mm-btn--primary,
.mm-cta {
	background-color: var(--mm-bark);
	color: var(--mm-cream);
	border-color: transparent;
}
.mm-btn--primary:link,
.mm-btn--primary:visited,
.mm-cta:link,
.mm-cta:visited { color: var(--mm-cream); }

.mm-btn--primary:hover,
.mm-cta:hover {
	background-color: var(--mm-chocolate);
	color: var(--mm-cream);
	transform: translateY(-1px);
	box-shadow: var(--mm-shadow-btn-hover);
}
.mm-btn--primary:active,
.mm-cta:active {
	transform: translateY(0);
	box-shadow: none;
}

/* --- Variant: secondary (cream-soft fill) -------------------------- */
.mm-btn--secondary {
	background-color: var(--mm-cream-soft);
	color: var(--mm-bark);
	border-color: rgba(47, 29, 16, 0.10);
}
.mm-btn--secondary:link,
.mm-btn--secondary:visited { color: var(--mm-bark); }

.mm-btn--secondary:hover {
	background-color: var(--mm-cream-deep);
	color: var(--mm-bark);
}

/* --- Variant: ghost (link-style action) ---------------------------- */
.mm-btn--ghost {
	background: transparent;
	color: var(--mm-chocolate);
	border-color: transparent;
	min-height: 0;
	padding: 0;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.mm-btn--ghost:link,
.mm-btn--ghost:visited { color: var(--mm-chocolate); }
.mm-btn--ghost:hover { color: var(--mm-bark); background: transparent; }

/* ---------- Display heading ----------------------------------------------
   Quicksand — zachte rounded sans. Vriendelijk & kindvriendelijk zonder
   schreeuwerig te worden. Iets zwaarder (500) voor heading-presence.
   --------------------------------------------------------------------- */
.mm-display {
	font-family: var(--mm-font-display);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.15;
}
.mm-display em {
	font-style: normal;
	font-weight: inherit;
	color: inherit;
}


/* ---------- Shared panel / card title (used across WC sections) --------- */
.mm-panel-title {
	margin: 0 0 1rem;
	font-family: var(--mm-font-display);
	font-weight: var(--mm-panel-title-weight);
	font-size: var(--mm-panel-title-fs);
	line-height: 1.3;
	color: var(--mm-bark);
	letter-spacing: var(--mm-panel-title-letter);
}
@media (min-width: 640px) {
	.mm-panel-title { font-size: var(--mm-panel-title-fs-md); }
}

/* Shared muted intro paragraph */
.mm-panel-intro {
	margin: 0 0 1rem;
	font-family: var(--mm-font-body);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--mm-chocolate);
}

/* ---------- Snackbar (WooCommerce notices) ------------------------------- */
.mm-snackbar-host {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 0.5rem;
	padding: 0 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
	pointer-events: none;
}

.mm-has-cart-sticky .mm-snackbar-host {
	padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

.mm-snackbar {
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	max-width: 22rem;
	width: 100%;
	padding: 0.8rem 0.9rem;
	background: var(--mm-cream);
	color: var(--mm-bark);
	border: 1px solid rgba(47, 29, 16, 0.10);
	border-radius: 14px;
	box-shadow: 0 18px 40px -20px rgba(47, 29, 16, 0.40), 0 2px 6px -2px rgba(47, 29, 16, 0.10);
	font-size: 0.875rem;
	line-height: 1.45;
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.mm-snackbar.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}
.mm-snackbar--success .mm-snackbar__icon-wrap {
	color: var(--mm-moss-deep);
}
.mm-snackbar--error .mm-snackbar__icon-wrap {
	color: var(--mm-danger);
}
.mm-snackbar.is-leaving {
	opacity: 0;
	transform: translateY(8px) scale(0.98);
}

.mm-snackbar__icon-wrap {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	margin-top: 0.05rem;
	color: var(--mm-chocolate);
}
.mm-snackbar__icon {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
}

.mm-snackbar__text { flex: 1; min-width: 0; }
.mm-snackbar__text p { margin: 0; }
.mm-snackbar__action,
.mm-snackbar__text a {
	color: var(--mm-chocolate);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	font-size: inherit !important;
	box-shadow: none !important;
}
.mm-snackbar__action:hover,
.mm-snackbar__text a:hover { color: var(--mm-bark); }

.mm-snackbar__close {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	border: 0;
	background: transparent;
	color: var(--mm-chocolate);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	border-radius: 999px;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.mm-snackbar__close:hover {
	background: var(--mm-cream-soft);
	color: var(--mm-bark);
}

.mm-notices-wrapper:empty {
	display: none;
}

/* Hide inline WC notices when JS snackbars are active */
.mm-js .woocommerce-notices-wrapper:not(.mm-snackbar-host *) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Sticky cart checkout bar (mobile) ---------------------------- */
.mm-cart-sticky {
	display: none;
}
@media (max-width: 767px) {
	.mm-cart-sticky {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 55;
		background: rgba(254, 248, 231, 0.92);
		backdrop-filter: saturate(180%) blur(18px);
		-webkit-backdrop-filter: saturate(180%) blur(18px);
		border-top: 1px solid rgba(47, 29, 16, 0.08);
		box-shadow: 0 -12px 32px -16px rgba(47, 29, 16, 0.2);
		padding: 0.875rem 1rem calc(0.875rem + env(safe-area-inset-bottom, 0px));
		transform: translateY(120%);
		opacity: 0;
		animation: mm-sticky-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
	}
	@keyframes mm-sticky-in {
		to { transform: translateY(0); opacity: 1; }
	}
	@media (prefers-reduced-motion: reduce) {
		.mm-cart-sticky {
			animation: none;
			transform: none;
			opacity: 1;
		}
	}
	.mm-cart-sticky__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		max-width: 36rem;
		margin: 0 auto;
	}
	.mm-cart-sticky__total {
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
		min-width: 0;
	}
	.mm-cart-sticky__label {
		font-family: 'Outfit', system-ui, sans-serif;
		font-size: 0.75rem;
		font-weight: 400;
		color: var(--mm-chocolate);
		line-height: 1.2;
	}
	.mm-cart-sticky__amount {
		font-family: 'Outfit', system-ui, sans-serif;
		font-weight: 500;
		font-size: 1.0625rem;
		color: var(--mm-bark);
		white-space: nowrap;
		letter-spacing: -0.01em;
	}
	/* Geen "incl. € btw" mee in de onderbalk — staat al in de mand. */
	.mm-cart-sticky__amount .tax_label,
	.mm-cart-sticky__amount small {
		display: none;
	}
	.mm-cart-sticky__checkout {
		flex: 1;
		max-width: 13rem;
	}
	body.mm-has-cart-sticky .mm-page-content {
		padding-bottom: 5rem;
	}
}

/* ---------- Quantity stepper buttons ------------------------------------- */
.mm-qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	min-width: 44px;
	height: 100%;
	border: 0;
	background: transparent;
	color: var(--mm-bark);
	font-size: 1.125rem;
	font-weight: 500;
	cursor: pointer;
	transition: color 0.2s ease;
	flex-shrink: 0;
}
.mm-qty-btn:hover { color: var(--mm-chocolate); }
.mm-qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }


/* ============================================================================
 * FAQ accordion (used on /hulp/)
 * ========================================================================= */
.mm-faq {
	background: #fff;
	border: 1px solid rgba(47, 29, 16, 0.08);
	border-radius: 20px;
	padding: 0 1.25rem;
	overflow: hidden;
	box-shadow: 0 12px 36px -22px rgba(47, 29, 16, 0.12);
}
@media (min-width: 640px) {
	.mm-faq { padding: 0 1.75rem; }
}

.mm-faq__item {
	border-bottom: 1px solid rgba(47, 29, 16, 0.08);
}
.mm-faq__item:last-child { border-bottom: 0; }

.mm-faq__summary {
	list-style: none;
	cursor: pointer;
	padding: 1.15rem 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	font-family: 'Outfit', system-ui, sans-serif;
	font-weight: 500;
	font-size: 1rem;
	color: var(--mm-bark);
	transition: color 0.2s ease;
	user-select: none;
}
@media (min-width: 640px) {
	.mm-faq__summary { font-size: 1.05rem; padding: 1.3rem 0; }
}
.mm-faq__summary::-webkit-details-marker { display: none; }
.mm-faq__summary::marker { display: none; content: ''; }
.mm-faq__summary:hover { color: var(--mm-chocolate); }

.mm-faq__q { flex: 1 1 auto; line-height: 1.4; }

.mm-faq__icon {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 1px solid rgba(47, 29, 16, 0.20);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--mm-bark);
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
	margin-top: 1px;
}
.mm-faq__summary:hover .mm-faq__icon {
	border-color: rgba(47, 29, 16, 0.40);
	background-color: var(--mm-cream);
}
.mm-faq__icon::before,
.mm-faq__icon::after {
	content: '';
	position: absolute;
	background-color: currentColor;
	border-radius: 1px;
	top: 50%;
	left: 50%;
}
.mm-faq__icon::before {
	width: 11px;
	height: 2px;
	transform: translate(-50%, -50%);
}
.mm-faq__icon::after {
	width: 2px;
	height: 11px;
	transform: translate(-50%, -50%);
	transition: transform 0.3s ease;
}
.mm-faq__item[open] .mm-faq__icon {
	background-color: var(--mm-bark);
	border-color: var(--mm-bark);
	color: var(--mm-cream);
}
.mm-faq__item[open] .mm-faq__icon::after {
	transform: translate(-50%, -50%) scaleY(0);
}

.mm-faq__answer {
	padding: 0 0 1.4rem;
	color: var(--mm-chocolate);
	line-height: 1.7;
	font-size: 0.9375rem;
	max-width: 60ch;
}
@media (min-width: 640px) {
	.mm-faq__answer { font-size: 1rem; }
}
.mm-faq__answer > * + * { margin-top: 0.75rem; }

/* Subtle fade-in for FAQ answer when opened (respects reduced motion) */
@keyframes mm-faq-open {
	from { opacity: 0; transform: translateY(-2px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
	.mm-faq__item[open] .mm-faq__answer {
		animation: mm-faq-open 0.28s cubic-bezier(0.22, 1, 0.36, 1);
	}
}

/* ============================================================================
 * Contact pills (mailto / Instagram / etc.)
 * ========================================================================= */
.mm-contact-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1.25rem;
	background: var(--mm-cream-soft);
	color: var(--mm-bark);
	border: 1px solid rgba(47, 29, 16, 0.10);
	border-radius: 999px;
	font-family: 'Outfit', system-ui, sans-serif;
	font-weight: 500;
	font-size: 0.95rem;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
}
.mm-contact-pill svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.mm-contact-pill:hover {
	background: #fff;
	border-color: rgba(47, 29, 16, 0.20);
	transform: translateY(-1px);
}
.mm-contact-pill--ghost {
	background: transparent;
}
.mm-contact-pill--ghost:hover {
	background: var(--mm-cream-soft);
}

/* On cream-soft sections, flip pill bg so it stands out */
section.bg-cream-soft .mm-contact-pill {
	background: var(--mm-cream);
}
section.bg-cream-soft .mm-contact-pill:hover {
	background: #fff;
}

/* ============================================================================
 * Help tabs (used on /hulp/)
 * Mobile-first horizontal-scroll strip, underline indicator on active tab.
 * ========================================================================= */
.mm-help {
	scroll-margin-top: 96px; /* clear sticky navbar when scrolled to via hash */
}

.mm-help-tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid rgba(47, 29, 16, 0.10);
	margin-bottom: 1.75rem;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.mm-help-tabs::-webkit-scrollbar { display: none; }

.mm-help-tab {
	flex-shrink: 0;
	background: transparent;
	border: 0;
	padding: 0.95rem 1rem;
	color: rgba(47, 29, 16, 0.55);
	font-family: 'Outfit', system-ui, sans-serif;
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	position: relative;
	transition: color 0.2s ease;
}
@media (min-width: 640px) {
	.mm-help-tab {
		font-size: 0.875rem;
		padding: 1.1rem 1.5rem;
	}
}
.mm-help-tab::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 1rem;
	right: 1rem;
	height: 2px;
	background-color: var(--mm-bark);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.25s ease;
}
@media (min-width: 640px) {
	.mm-help-tab::after { left: 1.5rem; right: 1.5rem; }
}
.mm-help-tab:hover { color: var(--mm-bark); }
.mm-help-tab.is-active {
	color: var(--mm-bark);
}
.mm-help-tab.is-active::after {
	transform: scaleX(1);
}
.mm-help-tab:focus-visible {
	outline: 2px solid var(--mm-chocolate);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Panels */
.mm-help-panels { position: relative; }
.mm-help-panel { display: none; }
.mm-help-panel.is-active { display: block; }

.mm-help-prose p { margin: 0; }

/* Legal pages (algemene voorwaarden, privacybeleid) */
.mm-legal-prose {
	max-width: 42rem;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--mm-chocolate);
}
.mm-legal-prose > * + * { margin-top: 1rem; }
.mm-legal-prose h2 {
	margin-top: 2rem;
	margin-bottom: 0.5rem;
	font-family: var(--mm-font-display, inherit);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--mm-bark);
}
.mm-legal-prose h3 {
	margin-top: 1.25rem;
	margin-bottom: 0.25rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--mm-bark);
}
.mm-legal-prose ul {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
	list-style: disc;
}
.mm-legal-prose li + li { margin-top: 0.35rem; }
.mm-legal-prose a { color: var(--mm-chocolate); text-decoration: underline; }
.mm-legal-intro { font-size: 1.125rem; color: var(--mm-bark); }
.mm-legal-meta {
	margin-top: 2rem !important;
	font-size: 0.875rem;
	color: rgb(92 64 51 / 0.75);
}

/* ============================================================================
 * Contact cards (op /hulp/) — Loavies-style box met icon, titel, regel.
 * Mobile-first: stacked. Vanaf sm: twee kolommen.
 * ========================================================================= */
.mm-contact-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.875rem;
}
@media (min-width: 640px) {
	.mm-contact-cards {
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem;
	}
}

/* Single-card variant: one centered card, not full-width on desktop. */
.mm-contact-cards--single {
	grid-template-columns: 1fr;
	max-width: 22rem;
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 640px) {
	.mm-contact-cards--single {
		grid-template-columns: 1fr;
	}
}

.mm-contact-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.35rem;
	padding: 1.75rem 1.25rem;
	background-color: var(--mm-cream);
	border: 1px solid rgba(47, 29, 16, 0.10);
	border-radius: 20px;
	color: var(--mm-bark);
	text-decoration: none;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
@media (min-width: 640px) {
	.mm-contact-card { padding: 2rem 1.5rem; }
}
.mm-contact-card:hover {
	transform: translateY(-2px);
	background-color: var(--mm-cream);
	border-color: rgba(47, 29, 16, 0.22);
	box-shadow: 0 14px 28px -18px rgba(47, 29, 16, 0.28);
}
.mm-contact-card:focus-visible {
	outline: 2px solid var(--mm-chocolate);
	outline-offset: 3px;
}

.mm-contact-card__icon {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background-color: var(--mm-cream-soft);
	color: var(--mm-bark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.6rem;
	transition: background-color 0.25s ease;
}
.mm-contact-card:hover .mm-contact-card__icon {
	background-color: var(--mm-cream-deep);
}
.mm-contact-card__icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

.mm-contact-card__title {
	font-family: 'Outfit', system-ui, sans-serif;
	font-weight: 500;
	font-size: 1.0625rem;
	color: var(--mm-bark);
	letter-spacing: -0.005em;
}

.mm-contact-card__desc {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--mm-chocolate);
}

/* About page — soft photo frame (mat + shadow) */
.mm-photo-frame {
	width: 100%;
	border-radius: var(--mm-radius-lg);
	border: var(--mm-border-soft);
	background: var(--mm-cream);
	padding: 6px;
	box-shadow: var(--mm-shadow-card);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.mm-photo-frame:hover {
	transform: translateY(-2px);
	box-shadow: 0 22px 56px -24px rgba(47, 29, 16, 0.24);
}

.mm-photo-frame__media {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: calc(var(--mm-radius-lg) - 6px);
	box-shadow: inset 0 0 0 1px rgba(47, 29, 16, 0.05);
}

.mm-photo-frame__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* About page — smaller, playful offset photos on mobile */
@media (max-width: 767px) {
	.mm-about-photo {
		max-width: 14rem;
	}

	.mm-about-photo--start {
		margin-right: auto;
		margin-left: 0;
	}

	.mm-about-photo--end {
		margin-left: auto;
		margin-right: 0;
	}
}

/* ==========================================================================
   COMPLIANZ — cookie banner above theme UI layers.
   ========================================================================== */
#cmplz-cookiebanner-container {
	position: fixed;
	inset: 0;
	z-index: 100000;
	pointer-events: none;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner {
	pointer-events: auto;
	z-index: 100001 !important;
	max-width: min(100vw - 2rem, var(--cmplz_banner_width, 32rem));
}

#cmplz-manage-consent {
	z-index: 100000;
}

#cmplz-manage-consent .cmplz-manage-consent {
	z-index: 100001 !important;
}

.cmplz-cookiebanner.cmplz-show:not(.cmplz-dismissed) {
	display: grid !important;
	visibility: visible !important;
	opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
	#cmplz-cookiebanner-container,
	#cmplz-cookiebanner-container *,
	#cmplz-manage-consent,
	#cmplz-manage-consent * {
		animation-duration: revert !important;
		animation-delay: revert !important;
		transition-duration: revert !important;
	}
}

/* ==========================================================================
   PRINT — clean, ink-friendly version of the site.
   ========================================================================== */
@media print {
	.mm-nav,
	.mm-drawer,
	.mm-drawer-backdrop,
	.mm-cart-sticky,
	.mm-snackbar-host,
	.mm-footer__socials,
	#mm-door-portal {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
	}

	.mm-wave,
	.mm-reveal {
		display: none !important;
	}

	.mm-reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	a {
		color: #000 !important;
		text-decoration: underline !important;
	}

	.mm-display,
	h1, h2, h3 {
		color: #000 !important;
		page-break-after: avoid;
	}

	img {
		max-width: 100% !important;
		page-break-inside: avoid;
	}

	section {
		padding: 1rem 0 !important;
		break-inside: avoid;
	}
}