/* ==========================================================================
   Munti — main.css
   All directions are logical (inline-start = right in RTL).
   ========================================================================== */

:root {
	/* ---------- Brand palette (single color source; theme.json mirrors it for the editor) ----------
	   ink    #22223B  brand black: body text, header/footer/dark sections
	   slate  #4A4E69  secondary text, hover
	   mauve  #9A8C98  subtle accent: rules, editorial numbers (not small text; contrast too low)
	   rose   #C9ADA7  soft warmth: box frames, hover backgrounds
	   linen  #F2E9E4  main background
	   paper and sand are derived: lighter for cards, warmer for alternate sections. */
	--munti-ink: var(--wp--preset--color--ink, #22223B);
	--munti-slate: var(--wp--preset--color--slate, #4A4E69);
	--munti-mauve: var(--wp--preset--color--mauve, #9A8C98);
	--munti-rose: var(--wp--preset--color--rose, #C9ADA7);
	--munti-linen: var(--wp--preset--color--linen, #F2E9E4);
	--munti-paper: var(--wp--preset--color--paper, #FAF6F3);
	--munti-sand: var(--wp--preset--color--sand, #E8DCD6);
	--munti-ink-rgb: 34 34 59;
	--munti-linen-rgb: 242 233 228;

	/* Legacy names, so older rules still get the palette. */
	--munti-ivory: var(--munti-linen);
	--munti-stone: var(--munti-sand);
	--munti-accent: var(--munti-ink);
	--munti-muted: var(--munti-slate);
	--munti-line: rgb(var(--munti-ink-rgb) / 0.14);
	--munti-line-strong: rgb(var(--munti-ink-rgb) / 0.8);

	/* ---------- Global typography (Peyda) ----------
	   One scale site-wide. No letter-spacing on Persian: it breaks joined letters. */
	--fs-xs: 0.78rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-md: 1.125rem;
	--fs-lg: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
	--fs-xl: clamp(1.85rem, 1.35rem + 1.6vw, 2.5rem);
	--fs-2xl: clamp(2.4rem, 1.5rem + 2.8vw, 3.75rem);
	--fs-display: clamp(2.9rem, 1.4rem + 4.8vw, 5.5rem);
	--fw-thin: 200;
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-bold: 700;
	--lh-tight: 1.15;
	--lh-snug: 1.4;
	--lh-body: 1.9;

	/* ---------- Spacing scale (4px grid; 2px only for hairline gaps) ----------
	   Every padding, margin, gap and offset uses one of these (theme.json spacingSizes mirrors them).
	   Names are the pixel value at the default 16px root size. */
	--space-2: 0.125rem;
	--space-4: 0.25rem;
	--space-8: 0.5rem;
	--space-12: 0.75rem;
	--space-16: 1rem;
	--space-20: 1.25rem;
	--space-24: 1.5rem;
	--space-28: 1.75rem;
	--space-32: 2rem;
	--space-40: 2.5rem;
	--space-48: 3rem;
	--space-56: 3.5rem;
	--space-64: 4rem;
	--space-72: 4.5rem;
	--space-80: 5rem;
	--space-96: 6rem;
	--space-112: 7rem;
	--space-128: 8rem;

	--munti-header-h: 72px;
	--munti-gutter: clamp(var(--space-20), 5vw, var(--space-64));
	--munti-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--munti-radius: 2px;      /* Photos, cards, fields: near-sharp editorial edge */
	--munti-radius-btn: 0px;  /* Buttons: sharp rectangles */
}

@media (max-width: 767px) {
	:root { --munti-header-h: 60px; }
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Keep # targets and keyboard focus clear of the sticky header (WCAG 2.4.11).
   Not on scene pages: scroll-padding shifts the snap point there. */
html:not(.is-scene-page) {
	scroll-padding-block-start: calc(var(--munti-header-h) + var(--space-16));
}

body {
	margin: 0;
	background: var(--munti-linen);
	color: var(--munti-ink);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	font-family: var(--wp--preset--font-family--peyda, Peyda, system-ui, sans-serif);
	/* Peyda ss02: Latin digits (e.g. WooCommerce prices) render as Persian in Persian text.
	   Digits in English text stay Latin, since ss02 only applies to Arabic script. */
	font-feature-settings: "ss02";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

img,
svg,
video { max-inline-size: 100%; block-size: auto; }

a { color: inherit; }

::selection { background: var(--munti-rose); color: var(--munti-ink); }

/* Generic headings (outside scenes and self-sized blocks). */
h1, h2, h3, h4 { font-weight: var(--fw-light); line-height: var(--lh-tight); text-wrap: balance; }

/* Editorial label: number or category above headings. */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	margin: 0;
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	line-height: 1;
	color: var(--munti-slate);
}
.eyebrow::before { content: ""; inline-size: 2.5em; block-size: 1px; background: currentColor; opacity: 0.6; }

:focus-visible { outline: 2px solid currentColor; outline-offset: var(--space-4); }

/* [hidden] must always win; otherwise any display:grid/flex here overrides it
   (e.g. empty cart badge and "cart is empty" notice showed next to items). */
[hidden] { display: none !important; }

/* Form controls inherit the site font and Persian digits (browsers default to system font); not email/url/LTR fields. */
button, input, select, textarea { font-family: inherit; font-feature-settings: inherit; }
input[type="email"], input[type="url"], [dir="ltr"], code, kbd, pre { font-feature-settings: normal; }

.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	inset-block-start: var(--space-8);
	inset-inline-start: var(--space-8);
	z-index: 1000;
	inline-size: auto;
	block-size: auto;
	padding: var(--space-12) var(--space-16);
	margin: 0;
	clip-path: none;
	background: var(--munti-ink);
	color: var(--munti-linen);
	border-radius: var(--munti-radius, 2px);
}

.site-main:focus { outline: none; }

.btn,
.wp-block-button.is-style-munti-outline .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.75rem;
	padding: var(--space-8) var(--space-28);
	border-radius: var(--munti-radius-btn, 0px);
	background: var(--munti-accent);
	color: var(--munti-linen);
	font-size: 0.9rem;
	text-decoration: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.btn:hover { opacity: 0.88; }

.wp-block-button.is-style-munti-outline .wp-block-button__link {
	background: transparent;
	color: var(--munti-ink);
	box-shadow: inset 0 0 0 1px currentColor;
}

/* ---------- Scene mode: one scroll = one frame ---------- */
html.is-scene-page {
	scroll-snap-type: y mandatory;
}

/* Preserve the scrollbar and every viewport measurement during overlays.
   Input is locked in JS; scrollable overlay panels keep native scrolling. */
html.overlay-open { overscroll-behavior: none; }
html.scene-scroll-ready { scroll-snap-type: none; scroll-behavior: auto; }

.scene-page__content > * {
	margin-block: 0;
	scroll-snap-align: start;
}

.scene-page__content > .munti-scene {
	scroll-snap-stop: always; /* Stop fast trackpad flicks from skipping scenes. */
}

/* Regular content between scenes */
.scene-page__content > :not(.munti-scene) {
	padding: clamp(var(--space-48), 10vh, var(--space-128)) var(--munti-gutter);
	max-inline-size: none;
}

.scene-page__content > :first-child:not(.munti-scene) {
	padding-block-start: calc(var(--munti-header-h) + clamp(var(--space-32), 7vh, var(--space-96)));
}

/* ---------- Scene entrance animation (only once JS is ready) ----------
   Text rises staggered; editorial box settles slightly after the text;
   framed photos (editorial, mosaic) reveal upward like a curtain. */
.munti-scene__body > * {
	transition:
		opacity 0.9s var(--munti-ease),
		transform 0.9s var(--munti-ease);
}
.munti-scene__body > :nth-child(2) { transition-delay: 0.08s; }
.munti-scene__body > :nth-child(3) { transition-delay: 0.16s; }
.munti-scene__body > :nth-child(4) { transition-delay: 0.24s; }
.munti-scene__body > :nth-child(5) { transition-delay: 0.32s; }

.scenes-animate .munti-scene:not(.is-in) .munti-scene__body > * {
	opacity: 0;
	transform: translateY(18px);
}

.munti-scene.has-box .munti-scene__body {
	transition: opacity 1s var(--munti-ease), transform 1.1s var(--munti-ease);
}
.scenes-animate .munti-scene.has-box:not(.is-in) .munti-scene__body {
	opacity: 0;
	transform: translateY(28px);
}

.munti-scene__media .munti-scene__img {
	transition: transform 1.6s var(--munti-ease);
}
.scenes-animate .munti-scene:not(.is-in) .munti-scene__media .munti-scene__img {
	transform: scale(1.045);
}

.munti-scene__plate,
.munti-scene__tile {
	transition: clip-path 1.3s cubic-bezier(0.76, 0, 0.24, 1);
	clip-path: inset(0);
}
.munti-scene__tile--b { transition-delay: 0.25s; }
.scenes-animate .munti-scene:not(.is-in) .munti-scene__plate,
.scenes-animate .munti-scene:not(.is-in) .munti-scene__tile { clip-path: inset(100% 0 0 0); }

/* Scene heading weight from the theme type scale */
.munti-scene .munti-scene__title { font-weight: 250; }
.munti-scene--solid .munti-scene__title,
.munti-scene--editorial:not(.has-box) .munti-scene__title { font-weight: 200; }

/* ---------- Scene nav dots ---------- */
.scene-dots {
	position: fixed;
	inset-inline-end: clamp(var(--space-16), 1.8vw, var(--space-28));
	inset-block-start: 50%;
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	transform: translateY(-50%);
	color: var(--munti-ink);
	transition: color 0.4s ease;
}
.scene-dots[data-tone="light"] { color: var(--munti-linen); }
.scene-dots { transition: color 0.4s ease, opacity 0.4s ease; }
.scene-dots.is-away { opacity: 0; pointer-events: none; }

.scene-dots button {
	position: relative;
	inline-size: 22px;
	block-size: 22px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}
.scene-dots button::before {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.35;
	transform: translate(-50%, -50%);
	transition: opacity 0.3s ease, block-size 0.4s var(--munti-ease);
}
.scene-dots button[aria-current="true"]::before {
	opacity: 1;
	block-size: 16px;
	border-radius: 3px;
}

@media (max-width: 767px) {
	.scene-dots { display: none; }
}

/* ---------- Header ----------
   Transparent at top → semi-opaque linen with a light blur on scroll.
   Scene pages too: transparent on the first scene (tone from the scene), linen glass with ink text after. */
.site-header {
	--hdr-fg: var(--munti-ink);
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	block-size: var(--munti-header-h);
	color: var(--hdr-fg);
	background: transparent;
	transition:
		color 0.45s ease,
		background-color 0.45s ease,
		box-shadow 0.45s ease,
		-webkit-backdrop-filter 0.45s ease,
		backdrop-filter 0.45s ease;
}

/* On small screens WordPress's admin bar scrolls away. Its CSS height
   remains 46px, so a constant offset leaves an empty strip above the header. */
.admin-bar .site-header { inset-block-start: var(--munti-admin-offset, var(--wp-admin--admin-bar--height, 0px)); }

/* On scenes: fixed, takes no space. */
.is-scene-page .site-header {
	position: fixed;
	inset-inline: 0;
}
.is-scene-page .site-header[data-tone="light"] { --hdr-fg: var(--munti-linen); }

.site-header.is-scrolled,
.site-header.is-scrolled[data-tone] {
	--hdr-fg: var(--munti-ink);
	background: rgb(var(--munti-linen-rgb) / 0.94);
	box-shadow: 0 1px 0 var(--munti-line);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header.is-scrolled,
	.site-header.is-scrolled[data-tone] {
		/* 0.84: still glassy over photos, but not muddy grey over dark sections (footer, ink scene). */
		background: rgb(var(--munti-linen-rgb) / 0.84);
		-webkit-backdrop-filter: blur(14px) saturate(1.15);
		backdrop-filter: blur(14px) saturate(1.15);
	}
}
@media (prefers-reduced-transparency: reduce) {
	.site-header.is-scrolled,
	.site-header.is-scrolled[data-tone] { background: var(--munti-linen); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	block-size: 100%;
	padding-inline: clamp(var(--space-12), 3vw, var(--space-40));
}

.site-header__start,
.site-header__end {
	display: flex;
	align-items: center;
	min-inline-size: 0;
	line-height: 0;
}
.site-header__start { justify-content: flex-start; }
.site-header__end {
	justify-content: flex-end;
	gap: var(--space-2);
}

/* Logo: vector SVG with currentColor; follows header color, light on dark scenes. */
.site-logo { display: block; color: inherit; line-height: 0; text-decoration: none; }
.munti-logo { display: block; inline-size: auto; max-inline-size: none; fill: currentColor; }
.munti-logo--header { block-size: 28px; }
@media (max-width: 767px) {
	.munti-logo--header { block-size: 24px; }
}

.icon-btn {
	position: relative;
	display: inline-grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	font: inherit;
	line-height: 0;
	vertical-align: middle;
	flex-shrink: 0;
	transition: background-color 0.25s ease;
}
.icon-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.icon-btn .icon { display: block; inline-size: 22px; block-size: 22px; }

.cart-count {
	position: absolute;
	inset-block-start: var(--space-4);
	inset-inline-end: 1px;
	display: grid;
	place-items: center;
	min-inline-size: 16px;
	block-size: 16px;
	padding-inline: var(--space-4);
	border-radius: 999px;
	background: var(--hdr-fg);
	color: var(--munti-paper);
	/* Background-colored ring: count doesn't sit on the bag handle, reads separately. */
	box-shadow: 0 0 0 2px var(--munti-linen);
	font-size: 10px;
	line-height: 1;
}
.site-header:not(.is-scrolled)[data-tone="light"] .cart-count { box-shadow: none; }
.site-header[data-tone="light"] .cart-count { color: var(--munti-ink); }

/* ==========================================================================
   Fullscreen menu
   1) Open: circle grows from the menu button center (clip-path).
      JS sets center/radius in --mx/--my/--mr; radius = distance to farthest corner.
   2) Items: each line rises from under its own mask edge; dividers open from the center.
   3) Products panel: text moves up, cards enter with a vertical curtain and image zoom-out.
   ========================================================================== */

.site-menu {
	--menu-bg: var(--munti-ivory);
	--menu-fg: var(--munti-ink);
	--menu-ease: cubic-bezier(0.76, 0, 0.24, 1);      /* Circle: ease in and out */
	--menu-ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* Text: fast in, soft landing */

	--menu-tint: rgb(var(--munti-linen-rgb, 242 233 228) / 0.6);
	--menu-blur: 28px;
	/* On glass, "muted" must derive from ink, not a fixed grey;
	   otherwise small prices/links lose contrast over a dark scene behind. */
	--munti-muted: rgb(var(--munti-ink-rgb, 34 34 59) / 0.68);

	position: fixed;
	inset: 0;
	z-index: 100;
	overflow: hidden;
	background: var(--menu-bg);
	color: var(--menu-fg);
	clip-path: circle(0px at var(--mx, 50%) var(--my, 0px));
	transition: clip-path 0.9s var(--menu-ease);
	will-change: clip-path;
}
/* Frosted glass: the scene behind shows blurred and faded.
   saturate keeps some photo color so the glass doesn't look dead grey. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-menu {
		background: var(--menu-tint);
		-webkit-backdrop-filter: blur(var(--menu-blur)) saturate(1.25);
		backdrop-filter: blur(var(--menu-blur)) saturate(1.25);
	}
	@media (max-width: 767px) {
		.site-menu { --menu-blur: 20px; --menu-tint: rgb(var(--munti-linen-rgb, 242 233 228) / 0.66); }
	}
}
/* Reduced transparency or weak device (JS adds menu-solid): opaque background. */
@media (prefers-reduced-transparency: reduce) {
	.site-menu { background: var(--menu-bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
html.menu-solid .site-menu {
	background: var(--menu-bg);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.site-menu[hidden] { display: none; }
.site-menu.is-open { clip-path: circle(var(--mr, 150vmax) at var(--mx, 50%) var(--my, 0px)); }
/* Closing has its own curve: visible motion from the start, easing into the button.
   With the open curve, the first 350ms barely moved, then snapped shut.
   The trailing opacity is a fallback for browsers (old Safari) that misapply clip-path on a backdrop-filter layer. */
.site-menu.is-closing {
	opacity: 0;
	transition:
		clip-path var(--close-dur, 0.75s) var(--close-ease, cubic-bezier(0.32, 0, 0.15, 1)) 0.04s,
		opacity 0.28s ease calc(var(--close-dur, 0.75s) - 0.2s);
}

/* Header stays above the menu (close = menu button) and takes the menu color.
   "menu-closing" persists until the circle finishes, so it collapses into a visible button.
   [data-tone] is deliberate: must beat .is-scene-page .site-header[data-tone=light]. */
html.menu-open .site-header,
html.menu-open .site-header[data-tone],
html.menu-open .site-header.is-scrolled[data-tone],
html.menu-closing .site-header,
html.menu-closing .site-header[data-tone],
html.menu-closing .site-header.is-scrolled[data-tone] {
	z-index: 110;
	--hdr-fg: var(--munti-ink);
	background: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
html.overlay-open .scene-dots { opacity: 0; pointer-events: none; }

/* Menu button: smooth swap of the two icons */
.menu-toggle .menu-toggle__icon {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	transition: opacity 0.35s ease, transform 0.6s var(--munti-ease);
}
.menu-toggle__icon svg { inline-size: 22px; block-size: 22px; }
.menu-toggle__icon--close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open { opacity: 0; transform: rotate(90deg) scale(0.6); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close { opacity: 1; transform: none; }

/* Stage: two panels stacked in one grid cell */
.site-menu__stage {
	display: grid;
	block-size: 100%;
	padding:
		calc(var(--munti-header-h) + 2vh)
		var(--munti-gutter)
		max(var(--space-28), env(safe-area-inset-bottom));
}

.site-menu__panel {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-block-size: 0;
	min-inline-size: 0;
}

/* ---------- Main panel ---------- */
.site-menu__nav { inline-size: min(680px, 100%); }

.site-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.site-menu__list > li {
	position: relative;
	--d: calc(0.32s + var(--i, 0) * 0.07s);
}

/* Divider: 1px at scaleY(0.5) = true half pixel on retina. Opens from the center. */
.site-menu__list > li + li::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 12%;
	block-size: 1px;
	background: currentColor;
	opacity: 0.2;
	transform: scale(0, 0.5);
	transition: transform 1s var(--menu-ease-out) var(--d);
}

.site-menu__list a {
	display: block;
	padding-block: clamp(var(--space-8), 1.6vh, var(--space-16));
	overflow: hidden; /* Mask: text hides behind this edge. */
	color: inherit;
	font-size: clamp(2rem, 5.6vw, 4.25rem);
	font-weight: 200;
	line-height: 1.3;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.site-menu__label {
	position: relative;
	display: inline-block;
	transform: translateY(105%);
	transition:
		transform 1s var(--menu-ease-out) var(--d),
		opacity 0.35s ease,
		filter 0.35s ease;
}

.site-menu__count {
	position: absolute;
	inset-block-start: 0.35em;
	inset-inline-start: calc(100% + 0.35em);
	font-size: 0.26em;
	font-weight: 400;
	opacity: 0.55;
}

.site-menu.is-open .site-menu__label { transform: none; }
.site-menu.is-open .site-menu__list > li + li::before { transform: scale(1, 0.5); }

/* Closing: all at once and fast, no stagger */
.site-menu.is-closing .site-menu__label,
.site-menu.is-closing .site-menu__list > li + li::before {
	transition-duration: 0.45s;
	transition-delay: 0s;
}

/* Desktop hover: others fade, hovered item stays strong. */
/* Keyboard focus: underline the text instead of outlining the row. */
.site-menu__list a:focus-visible { outline: none; }
.site-menu__list a:focus-visible .site-menu__label {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

@media (hover: hover) and (pointer: fine) {
	/* :has — only when actually over an item, not the gap between items. */
	.site-menu__list:has(a:hover) .site-menu__label { opacity: 0.35; filter: blur(2px); }
	.site-menu__list:has(a:hover) a:hover .site-menu__label,
	.site-menu__list a:focus-visible .site-menu__label { opacity: 1; filter: none; }
}

/* # links (e.g. #collection on home) aren't "current page", though WordPress marks them current. */
.site-menu__list .current-menu-item > a:not([data-panel]):not([href*="#"]) .site-menu__label::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: calc(100% + 0.45em);
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: currentColor;
	transform: translateY(-50%);
}

.site-menu__legal {
	margin-block-start: clamp(var(--space-20), 5vh, var(--space-48));
	font-size: 0.82rem;
	color: var(--munti-muted);
	opacity: 0;
	transition: opacity 0.6s ease;
}
.site-menu.is-open .site-menu__legal { opacity: 1; transition-delay: 0.7s; }
.site-menu__legal .menu { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8) var(--space-24); margin: 0; padding: 0; list-style: none; }
.site-menu__legal a { text-decoration: none; }
.site-menu__legal a:hover { text-decoration: underline; }

/* ---------- Focus shift: menu → products ----------
   The menu stays behind, blurred and faded, like a lens refocusing;
   products sharpen out of the haze over it. Back is the exact reverse. */
/* Perf: blur the text boxes, not the full-screen panel (~1/20 the area to blur per frame).
   scale stays on the panel since transform is GPU-only. */
.site-menu__panel--main { transition: transform 0.9s var(--menu-ease); }
.site-menu.is-open[data-view="products"] .site-menu__panel--main {
	transform: scale(0.97);
	pointer-events: none;
}
.site-menu.is-open[data-view="products"] .site-menu__panel--main .site-menu__label {
	opacity: 0.15;
	filter: blur(10px);
	transition: opacity 0.8s var(--menu-ease), filter 0.8s var(--menu-ease);
}
.site-menu.is-open[data-view="products"] .site-menu__panel--main li + li::before {
	opacity: 0.05;
	transition: opacity 0.8s var(--menu-ease);
}
.site-menu.is-open[data-view="products"] .site-menu__legal { opacity: 0; transition-delay: 0s; }

/* ---------- Products panel ---------- */
.site-menu__panel--products {
	justify-content: safe center;
	gap: clamp(var(--space-20), 4vh, var(--space-40));
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear 0.6s;
}
.site-menu__panel--products::-webkit-scrollbar { display: none; }

.site-menu[data-view="products"] .site-menu__panel--products {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.menu-products__head {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: min(1240px, 100%);
}

.menu-products__title {
	margin: 0;
	font-size: clamp(1.8rem, 4vw, 3rem);
	font-weight: 200;
	line-height: 1.3;
}

.menu-products__back {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 50%;
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-8) var(--space-4);
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.88rem;
	cursor: pointer;
	transform: translateY(-50%);
}
.menu-products__back:focus-visible { outline: 1px solid currentColor; outline-offset: var(--space-4); border-radius: var(--munti-radius, 2px); }
.menu-products__back .icon { inline-size: 18px; block-size: 18px; transition: transform 0.35s var(--munti-ease); }
/* Back icon is a right arrow (backward in RTL). */
.menu-products__back:hover .icon { transform: translateX(3px); }

.menu-products {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(var(--space-16), 1.6vw, var(--space-24));
	inline-size: min(1240px, 100%);
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu-product__link {
	display: grid;
	gap: var(--space-4);
	color: inherit;
	text-decoration: none;
}

.menu-product__media {
	display: block;
	margin-block-end: var(--space-8);
	overflow: hidden;
	border-radius: var(--munti-radius, 2px);
	background: var(--munti-stone);
	aspect-ratio: 4 / 5;
}
.menu-product__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.menu-product__name { font-size: 0.95rem; font-weight: 400; line-height: 1.6; }
.menu-product__price { font-size: 0.82rem; color: var(--munti-muted); }
.menu-product__price del { opacity: 0.5; margin-inline-end: 0.3em; }
.menu-product__price ins { text-decoration: none; }

.menu-products__all { margin-block-start: clamp(var(--space-4), 1vh, var(--space-12)); }

/* Products panel elements: hidden state (and on back: fast, together, into haze) */
.menu-products__head,
.menu-products__all,
.menu-product {
	opacity: 0;
	filter: blur(16px);
	transform: scale(1.04);
	transition:
		opacity 0.35s ease,
		filter 0.4s ease,
		transform 0.5s var(--menu-ease);
}

/* Enter: haze to focus, staggered. Image sharpens slightly after its frame. */
.site-menu[data-view="products"] .menu-products__head,
.site-menu[data-view="products"] .menu-products__all,
.site-menu[data-view="products"] .menu-product {
	opacity: 1;
	filter: blur(0);
	transform: none;
	transition:
		opacity 0.8s ease var(--pd, 0.22s),
		filter 1s var(--menu-ease-out) var(--pd, 0.22s),
		transform 1.1s var(--menu-ease-out) var(--pd, 0.22s);
}
.site-menu[data-view="products"] .menu-product { --pd: calc(0.3s + var(--i, 0) * 0.07s); }
.site-menu[data-view="products"] .menu-products__all { --pd: 0.8s; }

.menu-product__img {
	transform: scale(1.1);
	transition: transform 0.5s var(--menu-ease);
}
.site-menu[data-view="products"] .menu-product__img {
	transform: none;
	transition: transform 1.6s var(--menu-ease-out) calc(0.3s + var(--i, 0) * 0.07s);
}

/* Card hover: other cards blur. On the inner link, to avoid clashing with the li entrance transition. */
.menu-product__link {
	transition: opacity 0.35s ease, filter 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
	.site-menu[data-view="products"] .menu-products:has(.menu-product__link:hover) .menu-product__link { opacity: 0.4; filter: blur(2px); }
	/* Same specificity as above (same :has) so the hovered card stays sharp. */
	.site-menu[data-view="products"] .menu-products:has(.menu-product__link:hover) .menu-product__link:hover,
	.site-menu[data-view="products"] .menu-products .menu-product__link:focus-visible { opacity: 1; filter: none; }
	.site-menu[data-view="products"] .menu-product__link:hover .menu-product__img {
		transform: scale(1.04);
		transition-delay: 0s;
		transition-duration: 0.8s;
	}
}

@media (max-width: 1099px) {
	.menu-products { grid-template-columns: repeat(3, minmax(0, 1fr)); inline-size: min(760px, 100%); }
}

@media (max-width: 699px) {
	.site-menu__panel--products { justify-content: flex-start; padding-block-end: var(--space-24); }
	.menu-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20) var(--space-12); }
	/* Intentionally no sticky header: any background makes a separate bar on the glass
	   (backdrop-filter inside the menu only sees the menu, not the scene behind). */
	.menu-products__head { padding-block: var(--space-4) 0; }
	.menu-products__back span { display: none; }
}

/* No JS or reduced motion: no circle, no stagger. */
@media (prefers-reduced-motion: reduce) {
	.site-menu,
	.site-menu.is-open { clip-path: none; }
	.site-menu__label,
	.menu-product,
	.menu-products__head,
	.menu-products__all { transform: none !important; }
	.menu-product,
	.menu-products__head,
	.menu-products__all,
	.site-menu__label { filter: none !important; }
}

/* ---------- Regular pages ---------- */
.page-body {
	padding-block: clamp(var(--space-32), 7vh, var(--space-96)) clamp(var(--space-56), 10vh, var(--space-128));
	padding-inline: var(--munti-gutter);
}

.page-head {
	max-inline-size: var(--wp--style--global--content-size, 760px);
	margin: 0 auto clamp(var(--space-28), 5vh, var(--space-56));
}

.page-head__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large, 2.5rem);
	font-weight: 250;
	line-height: 1.25;
}

.entry-content > * { margin-block: 0 var(--space-20); }
.entry-content > h2,
.entry-content > h3 { margin-block-start: var(--space-40); }
.entry-content > :last-child { margin-block-end: 0; }
.entry-content ul,
.entry-content ol { padding-inline-start: var(--space-20); }
.entry-content li { margin-block: var(--space-4); }
.entry-content hr { border: 0; border-block-start: 1px solid var(--munti-line); margin-block: var(--space-40); }

/* ---------- Contact pattern ----------
   No icons (designer icons only): editorial list with small labels and half-pixel rules.
   is-phone etc. classes remain in saved content and are harmless. */
.munti-contact-info {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}
.munti-contact-info li {
	position: relative;
	display: block;
	padding-block: var(--space-16);
}
.munti-contact-info li + li::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 1px;
	background: var(--munti-line);
}
.munti-contact-info li > div { min-inline-size: 0; }
.munti-contact-info strong { display: block; margin-block-end: var(--space-4); font-weight: var(--fw-medium); font-size: var(--fs-xs); color: var(--munti-slate); }
.munti-contact-info a { text-decoration: none; }
.munti-contact-info a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.munti-contact-info a[dir="ltr"] { unicode-bidi: isolate; }

/* ---------- One-screen pages (template "one-screen": contact, about, privacy) ----------
   One viewport-high section (minus header): text right, photo/map left with an editorial margin.
   Content is core blocks: group panel-body + group panel-media. */
.panel-page {
	--panel-pad: clamp(var(--space-16), 1.6vw, var(--space-28));
	--panel-h: calc(100svh - var(--munti-header-h) - var(--wp-admin--admin-bar--height, 0px));
}
.panel-page__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
	min-block-size: var(--panel-h);
}
.panel-page__grid > * { margin: 0; min-inline-size: 0; }

.panel-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 0;
	padding: clamp(var(--space-24), 5vh, var(--space-64)) var(--munti-gutter) clamp(var(--space-32), 6vh, var(--space-72));
}
.panel-body > * { max-inline-size: 34rem; margin-block: 0; }
.panel-body > * + * { margin-block-start: clamp(var(--space-16), 2.2vh, var(--space-24)); }
.panel-body > .panel-title { margin-block-start: clamp(var(--space-12), 2vh, var(--space-20)); }
.panel-body > .wp-block-buttons { margin-block-start: clamp(var(--space-20), 3.6vh, var(--space-40)); }

.panel-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.8em;
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	color: var(--munti-slate);
}
.panel-eyebrow::before {
	content: "";
	inline-size: 2.75em;
	block-size: 1px;
	background: currentColor;
	opacity: 0.7;
}
.panel-title {
	font-size: var(--fs-2xl);
	font-weight: var(--fw-light);
	line-height: var(--lh-tight);
	text-wrap: balance;
}
.panel-lead {
	font-size: var(--fs-md);
	line-height: var(--lh-body);
	color: var(--munti-ink);
}
.panel-body p:not([class]) {
	font-size: var(--fs-sm);
	line-height: 2;
	color: var(--munti-slate);
}
.panel-note { font-size: var(--fs-xs); color: rgb(var(--munti-ink-rgb) / 0.62); }
.panel-body .munti-contact-info { inline-size: 100%; }
.panel-body .munti-contact-info li { padding-block: clamp(var(--space-12), 1.6vh, var(--space-16)); }

/* Three short columns under the about text: small label + one line */
.panel-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-20);
	inline-size: 100%;
	/* No margin reset: the panel-body flow spacing (> * + *) sets the gap above the rule. */
	padding: clamp(var(--space-16), 2.4vh, var(--space-24)) 0 0;
	list-style: none;
	border-block-start: 1px solid var(--munti-line);
	font-size: var(--fs-xs);
	line-height: 1.8;
	color: var(--munti-slate);
}
.panel-facts li { margin: 0; }
.panel-facts strong { display: block; margin-block-end: 0.2em; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--munti-ink); }

/* Media: photo or map, from under the header to the bottom, thin margin */
.panel-media {
	position: relative;
	display: grid;
	padding: 0 0 var(--panel-pad);
	padding-inline-end: var(--panel-pad);
	block-size: var(--panel-h);
	min-block-size: 440px;
}
.panel-media > * { grid-area: 1 / 1; min-block-size: 0; margin: 0 !important; }
.panel-media > .wp-block-image,
.panel-media > .wp-block-image img {
	inline-size: 100%;
	block-size: 100%;
	border-radius: var(--munti-radius);
}
.panel-media > .wp-block-image img { object-fit: cover; }
.panel-media > .munti-map { block-size: 100%; min-block-size: 0; }

/* No media (privacy): heading and buttons in one column, notes in the second */
.panel-page.is-wide .panel-page__grid { grid-template-columns: minmax(0, 1fr); }
.panel-page.is-wide .panel-body {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	grid-auto-rows: min-content;
	align-content: center;
	column-gap: clamp(var(--space-40), 7vw, var(--space-128));
	inline-size: 100%;
	max-inline-size: var(--wp--style--global--wide-size, 1240px);
	margin-inline: auto;
}
.panel-page.is-wide .panel-body > * { grid-column: 1; }
.panel-page.is-wide .panel-body > .panel-points { grid-column: 2; grid-row: 1 / span 12; align-self: center; margin: 0; max-inline-size: none; }

.panel-points {
	counter-reset: pt;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(var(--space-20), 3vh, var(--space-32)) clamp(var(--space-24), 3vw, var(--space-48));
	margin: 0;
	padding: 0;
	list-style: none;
}
.panel-points li {
	counter-increment: pt;
	position: relative;
	margin: 0;
	padding-block-start: var(--space-16);
	border-block-start: 1px solid var(--munti-line);
	font-size: var(--fs-sm);
	line-height: 1.95;
	color: var(--munti-slate);
}
.panel-points li::before {
	content: counter(pt, decimal-leading-zero);
	position: absolute;
	inset-block-start: var(--space-16);
	inset-inline-end: 0;
	font-size: var(--fs-xs);
	color: var(--munti-mauve);
}
.panel-points strong {
	display: block;
	margin-block-end: 0.3em;
	padding-inline-end: 2em;
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	color: var(--munti-ink);
}
.panel-points a { color: var(--munti-ink); text-underline-offset: 0.3em; }

/* Message form: slides up over the map (JS). Without JS it stays below the map. */
.munti-sheet {
	position: absolute;
	z-index: 1100;
	inset: 0 0 var(--panel-pad);
	inset-inline-end: var(--panel-pad);
	overflow: auto;
	overscroll-behavior: contain;
	padding: clamp(var(--space-28), 5vh, var(--space-56)) clamp(var(--space-24), 4vw, var(--space-64));
	background: var(--munti-paper);
	border-radius: var(--munti-radius);
	clip-path: inset(100% 0 0 0);
	visibility: hidden;
	transition: clip-path 0.75s var(--munti-ease), visibility 0s linear 0.75s;
}
.is-sheet-open > .munti-sheet {
	clip-path: inset(0);
	visibility: visible;
	transition: clip-path 0.75s var(--munti-ease);
}
.munti-sheet > * { max-inline-size: 36rem; margin-block: 0 var(--space-16); }
.munti-sheet > h2 { font-size: var(--fs-xl); font-weight: var(--fw-light); line-height: var(--lh-tight); }
.munti-sheet > p { font-size: var(--fs-sm); color: var(--munti-slate); }
.munti-sheet__close {
	position: sticky;
	inset-block-start: 0;
	float: inline-end;
	margin: calc(-1 * var(--space-12)) calc(-1 * var(--space-12)) 0 0;
	margin-inline: 0 calc(-1 * var(--space-12));
}
.no-js .munti-sheet { position: static; clip-path: none; visibility: visible; grid-area: auto; }
.no-js .panel-media { display: block; block-size: auto; }
@media (prefers-reduced-motion: reduce) {
	.munti-sheet, .is-sheet-open > .munti-sheet { transition: none; }
}

@media (max-width: 899px) {
	/* Mobile is one screen too: shorter media, tighter text, two-column contact info, horizontal note cards */
	.panel-page__grid,
	.panel-page.is-wide .panel-body { grid-template-columns: minmax(0, 1fr); }
	.panel-page.has-media .panel-page__grid { grid-template-rows: auto 1fr; }
	.panel-media {
		order: -1;
		block-size: clamp(180px, 28svh, 300px);
		min-block-size: 0;
		padding: 0 var(--panel-pad);
	}
	.panel-body { justify-content: center; padding-block: var(--space-20) var(--space-28); }
	.panel-body > * + * { margin-block-start: var(--space-12); }
	.panel-body > .panel-title { margin-block-start: var(--space-12); }
	.panel-body > .wp-block-buttons { margin-block-start: var(--space-20); }
	.panel-title { font-size: clamp(1.85rem, 7.4vw, 2.5rem); }
	.panel-lead { font-size: var(--fs-base); line-height: 1.95; }
	.panel-body p:not([class]) { line-height: 1.9; }
	.panel-facts { gap: var(--space-12); padding-block-start: var(--space-12); }
	.panel-facts strong { font-size: var(--fs-xs); }
	.panel-facts li { font-size: 0.72rem; line-height: 1.7; }

	.panel-body .munti-contact-info { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-20); }
	.panel-body .munti-contact-info li { padding-block: var(--space-12); font-size: var(--fs-sm); }
	.panel-body .munti-contact-info li + li::before { display: none; }
	.panel-body .munti-contact-info li:nth-child(n+3)::before { display: block; content: ""; }

	.panel-page.is-wide .panel-body { justify-content: flex-start; padding-block-start: clamp(var(--space-20), 5vh, var(--space-40)); }
	.panel-page.is-wide .panel-body > .panel-points { grid-column: 1; grid-row: auto; margin-block-start: var(--space-24); }
	.panel-points {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 80%;
		gap: var(--space-12);
		inline-size: auto !important;
		margin-inline: calc(var(--munti-gutter) * -1) !important;
		padding: 0 var(--munti-gutter) var(--space-4);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--munti-gutter);
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	.panel-points::-webkit-scrollbar { display: none; }
	.panel-points li {
		scroll-snap-align: start;
		padding: var(--space-20) var(--space-20) var(--space-20);
		border: 0;
		background: var(--munti-paper);
		border-radius: var(--munti-radius);
		line-height: 1.85;
	}
	.panel-points li::before { inset-block-start: var(--space-20); inset-inline-end: var(--space-20); }
	.munti-sheet {
		position: fixed;
		inset: 0;
		z-index: 120;
		border-radius: 0;
		padding: calc(var(--space-20) + env(safe-area-inset-top)) var(--munti-gutter) calc(var(--space-32) + env(safe-area-inset-bottom));
	}
}

/* ---------- 404 ---------- */
.not-found {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: var(--space-16);
	min-block-size: calc(100svh - var(--munti-header-h) - 120px);
	padding: var(--space-64) var(--munti-gutter);
	text-align: center;
}
.not-found__code {
	margin: 0;
	font-size: clamp(5rem, 16vw, 11rem);
	font-weight: 100;
	line-height: 1;
	letter-spacing: 0.08em;
	opacity: 0.18;
}
.not-found__title { margin: 0; font-weight: 300; }

/* ---------- Post list ---------- */
.post-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: var(--space-40) var(--space-28);
	max-inline-size: var(--wp--style--global--wide-size, 1240px);
	margin-inline: auto;
}
.post-card__media img { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--munti-radius); }
.post-card__title { margin: var(--space-16) 0 var(--space-8); font-size: 1.2rem; font-weight: 400; }
.post-card__title a { text-decoration: none; }
.post-card__excerpt { margin: 0; color: var(--munti-muted); font-size: 0.92rem; }

/* ---------- Footer ----------
   Ink with linen text. Up to one row of groups: fixed-width columns centered as a row, so two groups
   don't leave an empty third column. More groups than columns (footer-nav--nN from footer.php):
   CSS columns, so short groups stack under each other instead of wrapping into a gappy second row.
   Full-width logo is SVG, so it stays sharp at any width. */
.site-footer {
	--ft-fg: var(--munti-linen);
	--ft-soft: rgb(var(--munti-linen-rgb) / 0.72);
	--ft-line: rgb(var(--munti-linen-rgb) / 0.16);
	background: var(--munti-ink);
	color: var(--ft-fg);
	font-size: var(--fs-sm);
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer :focus-visible { outline-color: var(--munti-linen); }

.footer-nav {
	--cols: 3;
	--col-gap: clamp(var(--space-28), 4.5vw, var(--space-72));
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: var(--col-gap);
	max-inline-size: 1360px;
	margin-inline: auto;
	padding: clamp(var(--space-64), 11vh, var(--space-128)) var(--munti-gutter) 0;
}
.footer-group {
	flex: 0 0 calc((100% - (var(--cols) - 1) * var(--col-gap)) / var(--cols));
	min-inline-size: 0;
	margin-block-end: clamp(var(--space-40), 6vh, var(--space-64));
	text-align: center;
}
.footer-nav--n4 { display: block; columns: var(--cols); }
.footer-nav--n4 .footer-group { break-inside: avoid; }
.footer-group__title {
	margin: 0;
	color: var(--ft-fg); /* theme.json makes all headings ink; they vanished on the ink background. */
	padding-block-end: var(--space-16);
	border-block-end: 1px solid var(--ft-fg);
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
}
.footer-group__list { margin: 0; padding: 0; list-style: none; }
.footer-group__list li { position: relative; }
.footer-group__list li + li::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 1px;
	background: var(--ft-line);
	transform: scaleY(0.5);
}
.footer-group__list a {
	display: block;
	padding-block: var(--space-12);
	color: var(--ft-soft);
	line-height: var(--lh-snug);
	transition: color 0.25s ease;
}
.footer-group__list a:hover,
.footer-group__list a[aria-current] { color: var(--ft-fg); }

.site-footer__meta {
	display: grid;
	justify-items: center;
	gap: clamp(var(--space-20), 3vh, var(--space-28));
	padding: clamp(var(--space-24), 4vh, var(--space-40)) var(--munti-gutter) 0;
	text-align: center;
}

.footer-social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-8) 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer-social li + li::before { content: "·"; margin-inline: 0.9em; color: var(--munti-mauve); }
.footer-social a { color: var(--ft-soft); transition: color 0.25s ease; }
.footer-social a:hover { color: var(--ft-fg); }

.site-footer__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-12); }
.footer-badge { padding: var(--space-8); border-radius: var(--munti-radius); background: var(--munti-paper); line-height: 0; }
.footer-badge img { max-block-size: 88px; inline-size: auto; }

.site-footer__copy { margin: 0; font-size: var(--fs-xs); color: rgb(var(--munti-linen-rgb) / 0.6); }

.footer-up {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	inline-size: min(410px, 100%);
	min-block-size: 3.1rem;
	border: 1px solid rgb(var(--munti-linen-rgb) / 0.5);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.footer-up .icon { inline-size: 18px; block-size: 18px; transform: rotate(90deg); transition: transform 0.4s var(--munti-ease); }
.footer-up:hover { background: var(--munti-linen); color: var(--munti-ink); border-color: var(--munti-linen); }
.footer-up:hover .icon { transform: rotate(90deg) translateX(-3px); }

.site-footer__logo {
	padding: clamp(var(--space-56), 10vh, var(--space-128)) var(--munti-gutter) calc(clamp(var(--space-24), 4vh, var(--space-48)) + env(safe-area-inset-bottom));
}
.site-footer__logo .site-logo { max-inline-size: 1680px; margin-inline: auto; }
.munti-logo--footer { inline-size: 100%; block-size: auto; }

@media (max-width: 1023px) {
	.footer-nav { --cols: 2; }
	.footer-nav--n3 { display: block; columns: var(--cols); }
	.footer-nav--n3 .footer-group { break-inside: avoid; }
}
@media (max-width: 599px) {
	.footer-nav { --cols: 1; padding-block-start: var(--space-56); }
}

/* Scenes and the scroll controller share the current visible viewport height. */
html.scene-scroll-ready { overscroll-behavior-y: none; scroll-behavior: auto !important; }
.scene-scroll-ready .scene-page__content > .munti-scene {
	block-size: var(--munti-screen-h, 100dvh) !important;
	min-block-size: var(--munti-screen-h, 100dvh) !important;
}
html.overlay-fixed { scroll-snap-type: none; scroll-behavior: auto; }
/* Mobile GPUs can flicker when a live backdrop is combined with a moving clip.
   Touch overlays use an opaque background and a short fade (defined below). */
@media (pointer: coarse) {
	.site-menu {
		background: var(--menu-bg, var(--munti-linen));
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}
.site-footer {
	box-sizing: border-box;
	block-size: var(--munti-screen-h, 100dvh);
	min-block-size: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	padding-block-start: calc(var(--munti-header-h) + 12px);
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
.site-footer .footer-nav {
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	columns: auto;
	inline-size: 100%;
	min-block-size: 0;
	flex: 0 1 auto;
	overflow-y: auto;
	padding-block-start: 0;
	gap: 16px 32px;
}
.site-footer .footer-group { margin: 0; }
.site-footer .footer-group__title { padding-block-end: 8px; }
.site-footer .footer-group__list a { padding-block: 8px; }
.site-footer .site-footer__meta { flex: 0 0 auto; gap: 10px; padding-block-start: 12px; }
.site-footer .site-footer__logo {
	flex: 0 0 auto;
	padding-block: clamp(12px, 3svh, 28px) calc(12px + env(safe-area-inset-bottom));
}
.site-footer .site-footer__logo .site-logo { max-inline-size: min(70vw, 1000px, calc(var(--munti-screen-h, 100dvh) * 0.8)); }
.site-footer .footer-badge img { max-block-size: 52px; }
@media (min-width: 1024px) {
	.site-footer .footer-nav--n4 { --cols: 4; }
}
@media (max-width: 599px) {
	.site-footer .footer-nav { --cols: 2; gap: 12px 20px; }
	.site-footer .footer-group__title { font-size: 13px; padding-block-end: 6px; }
	.site-footer .footer-group__list a { font-size: 12px; padding-block: 4px; }
	.site-footer .site-footer__meta { gap: 8px; font-size: 12px; }
	.site-footer .footer-up { min-block-size: 36px; }
	.site-footer .site-footer__logo .site-logo { max-inline-size: 65vw; }
}

@media (max-height: 700px) {
	.site-footer .site-footer__logo { padding-block: 12px calc(8px + env(safe-area-inset-bottom)); }
	.site-footer .site-footer__meta { gap: 6px; padding-block-start: 8px; }
}

html { scroll-behavior: smooth; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	html { scroll-behavior: auto; }
}

/* ---------- Print ---------- */
@media print {
	.site-header,
	.site-menu,
	.scene-dots,
	.site-footer { display: none !important; }
	html.is-scene-page { scroll-snap-type: none; }
	.munti-scene { block-size: auto; min-block-size: 0; page-break-inside: avoid; }
}

/* ==========================================================================
   Cart drawer
   Same circle engine: opens from and closes into the cart icon. Drawer on the left (inline-end in RTL).
   ========================================================================== */

/* Cart icon → x, like the menu button */
.cart-link__icon {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	transition: opacity 0.35s ease, transform 0.6s var(--munti-ease);
}
.cart-link__icon--close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.cart-link[aria-expanded="true"] .cart-link__icon--bag { opacity: 0; transform: rotate(90deg) scale(0.6); }
.cart-link[aria-expanded="true"] .cart-link__icon--close { opacity: 1; transform: none; }
.cart-link[aria-expanded="true"] .cart-count { opacity: 0; }
.cart-count { transition: opacity 0.3s ease; }

html.cart-open .site-header,
html.cart-closing .site-header,
html.cart-open .site-header.is-scrolled[data-tone],
html.cart-closing .site-header.is-scrolled[data-tone] {
	z-index: 110;
	background: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
html.cart-open .cart-link,
html.cart-closing .cart-link { color: var(--munti-ink); }

.cart-drawer {
	--menu-ease: cubic-bezier(0.76, 0, 0.24, 1);
	--menu-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--menu-tint: rgb(var(--munti-linen-rgb, 242 233 228) / 0.78);
	--menu-blur: 24px;
	--munti-muted: rgb(var(--munti-ink-rgb, 34 34 59) / 0.62);
	--pad: clamp(var(--space-20), 2.4vw, var(--space-32));
	position: fixed;
	inset: 0;
	z-index: 100;
}
.cart-drawer[hidden] { display: none; }

.cart-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(var(--munti-ink-rgb, 34 34 59) / 0.4);
	opacity: 0;
	transition: opacity 0.6s ease;
	cursor: pointer;
}
.cart-drawer.is-open .cart-drawer__backdrop { opacity: 1; }
.cart-drawer.is-closing .cart-drawer__backdrop { transition-duration: 0.6s; transition-delay: 0.1s; }

.cart-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	inline-size: min(460px, 100%);
	padding-block-start: var(--munti-header-h);
	background: var(--munti-ivory);
	color: var(--munti-ink);
	clip-path: circle(0px at var(--mx, 0px) var(--my, 0px));
	transition: clip-path 0.9s var(--menu-ease);
	will-change: clip-path;
}
.cart-drawer.is-open .cart-drawer__panel { clip-path: circle(var(--mr, 150vmax) at var(--mx, 0px) var(--my, 0px)); }
.cart-drawer.is-closing .cart-drawer__panel {
	opacity: 0;
	transition:
		clip-path var(--close-dur, 0.75s) var(--close-ease, cubic-bezier(0.32, 0, 0.15, 1)) 0.04s,
		opacity 0.28s ease calc(var(--close-dur, 0.75s) - 0.2s);
}

/* Glass, same rules as the menu: browser support, reduced transparency, adaptive quality (menu-solid). */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.cart-drawer__panel {
		background: var(--menu-tint);
		-webkit-backdrop-filter: blur(var(--menu-blur)) saturate(1.25);
		backdrop-filter: blur(var(--menu-blur)) saturate(1.25);
	}
}
html.menu-solid .cart-drawer__panel { background: var(--munti-ivory); backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) {
	.cart-drawer__panel { background: var(--munti-ivory) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

.cart-drawer__head {
	display: flex;
	align-items: baseline;
	gap: var(--space-12);
	padding: var(--space-4) var(--pad) var(--space-16);
}
.cart-drawer__title {
	margin: 0;
	font-size: clamp(1.7rem, 3vw, 2.2rem);
	font-weight: 200;
	line-height: 1.3;
	outline: none;
}
.cart-drawer__count { font-size: 0.85rem; color: var(--munti-muted); }

.cart-drawer__body {
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-inline: var(--pad);
	scrollbar-width: thin;
}

.cart-drawer__list { margin: 0; padding: 0; list-style: none; }

.cart-item {
	position: relative;
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) auto;
	gap: var(--space-16);
	align-items: start;
	padding-block: var(--space-16);
	transition:
		opacity 0.6s ease calc(0.32s + var(--i, 0) * 0.07s),
		filter 0.8s var(--menu-ease-out) calc(0.32s + var(--i, 0) * 0.07s),
		transform 0.9s var(--menu-ease-out) calc(0.32s + var(--i, 0) * 0.07s);
}
/* Half-pixel divider, like the menu */
.cart-item + .cart-item::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 1px;
	background: currentColor;
	opacity: 0.14;
	transform: scaleY(0.5);
}
.cart-item.is-entering { opacity: 0; filter: blur(8px); transform: translateY(14px); transition: none; }
.cart-item.is-pending .cart-item__price,
.cart-item.is-busy { opacity: 0.5; }

.cart-item__media {
	display: block;
	overflow: hidden;
	border-radius: var(--munti-radius, 2px);
	background: var(--munti-stone);
	aspect-ratio: 4 / 5;
}
.cart-item__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

.cart-item__info { display: grid; gap: var(--space-4); min-inline-size: 0; }
.cart-item__name { font-size: 0.95rem; line-height: 1.6; text-decoration: none; color: inherit; }
.cart-item__name:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.cart-item__meta { margin: 0; font-size: 0.8rem; color: var(--munti-muted); }

.cart-item__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8) var(--space-12);
	margin-block-start: var(--space-8);
}
.cart-item__price { font-size: 0.9rem; font-variant-numeric: tabular-nums; transition: opacity 0.25s ease; }

.qty {
	display: inline-grid;
	grid-template-columns: 32px 2.2rem 32px;
	align-items: center;
	block-size: 34px;
	border-radius: var(--munti-radius-btn, 0px);
	box-shadow: inset 0 0 0 1px rgb(var(--munti-ink-rgb, 34 34 59) / 0.18);
}
.qty__btn {
	display: grid;
	place-items: center;
	block-size: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.qty__btn:hover:not(:disabled) { background: rgb(var(--munti-ink-rgb, 34 34 59) / 0.08); }
.qty__btn:disabled { opacity: 0.3; cursor: default; }
.qty__btn:focus-visible { outline: 1px solid currentColor; outline-offset: 1px; }
.qty__val { text-align: center; font-size: 0.9rem; font-variant-numeric: tabular-nums; }

.cart-item__remove {
	display: grid;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	margin-block-start: calc(-1 * var(--space-4));
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--munti-muted);
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}
.cart-item__remove:hover { color: var(--munti-ink); background: rgb(var(--munti-ink-rgb, 34 34 59) / 0.06); }
.cart-item__remove:focus-visible { outline: 1px solid currentColor; outline-offset: 1px; }

/* Loading skeleton */
.cart-item.is-skeleton .cart-item__media,
.cart-item .sk {
	background: linear-gradient(90deg, rgb(var(--munti-ink-rgb, 34 34 59) / 0.06) 25%, rgb(var(--munti-ink-rgb, 34 34 59) / 0.11) 50%, rgb(var(--munti-ink-rgb, 34 34 59) / 0.06) 75%) 0 0 / 200% 100%;
	animation: munti-shimmer 1.3s linear infinite;
}
.cart-item .sk { display: block; block-size: 12px; border-radius: var(--munti-radius, 2px); }
.cart-item .sk--title { inline-size: 70%; block-size: 14px; margin-block: var(--space-8) var(--space-12); }
.cart-item .sk--line { inline-size: 40%; }
@keyframes munti-shimmer { to { background-position: -200% 0; } }

.cart-drawer__empty {
	display: grid;
	justify-items: center;
	gap: var(--space-12);
	padding-block: clamp(var(--space-40), 12vh, var(--space-96));
	text-align: center;
}
.cart-drawer__empty-title { margin: 0; font-size: 1.35rem; font-weight: 300; }
.cart-drawer__empty-text { margin: 0 0 var(--space-8); max-inline-size: 26ch; font-size: 0.9rem; color: var(--munti-muted); }

.cart-drawer__error { margin: var(--space-12) 0; padding: var(--space-12) var(--space-16); border-radius: var(--munti-radius, 2px); background: rgb(179 38 30 / 0.08); color: #8f1f18; font-size: 0.85rem; }

.cart-drawer__foot {
	display: grid;
	gap: var(--space-16);
	padding: var(--space-20) var(--pad) max(var(--space-24), env(safe-area-inset-bottom));
	border-block-start: 1px solid rgb(var(--munti-ink-rgb, 34 34 59) / 0.12);
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.4s ease, transform 0.5s var(--menu-ease);
}
.cart-drawer.is-open .cart-drawer__foot {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s ease 0.45s, transform 0.9s var(--menu-ease-out) 0.45s;
}

.cart-drawer__totals { display: grid; gap: var(--space-8); margin: 0; }
.cart-total { display: flex; justify-content: space-between; gap: var(--space-12); font-size: 0.88rem; }
.cart-total dt { color: var(--munti-muted); }
.cart-total dd { margin: 0; font-variant-numeric: tabular-nums; }
.cart-total.is-grand { margin-block-start: var(--space-4); font-size: 1.05rem; }
.cart-total.is-grand dt { color: inherit; }
.cart-total.is-grand dd { font-weight: 500; }

.cart-drawer__note { margin: 0; font-size: 0.78rem; color: var(--munti-muted); }

.cart-drawer__actions { display: grid; gap: var(--space-8); }
.cart-drawer__actions .btn { inline-size: 100%; min-block-size: 3rem; }
.btn--ghost { background: transparent; color: var(--munti-ink); box-shadow: inset 0 0 0 1px rgb(var(--munti-ink-rgb, 34 34 59) / 0.2); }
.btn--ghost:hover { background: rgb(var(--munti-ink-rgb, 34 34 59) / 0.05); opacity: 1; }

/* Touch browsers: avoid repainting a live backdrop through an animated circle.
   A short fade stays stable while the browser toolbar changes height. */
@media (pointer: coarse) {
 .site-menu,
 .cart-drawer__panel {
  clip-path: none !important;
  will-change: auto;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
 }
 .site-menu { background: var(--menu-bg, var(--munti-linen)); }
 .cart-drawer__panel { background: var(--munti-ivory); }
 .site-menu.is-open,
 .cart-drawer.is-open .cart-drawer__panel {
  opacity: 1;
  pointer-events: auto;
 }
 .site-menu.is-closing,
 .cart-drawer.is-closing .cart-drawer__panel {
  opacity: 0;
  transition: opacity 0.18s ease;
 }
}
.site-menu.is-closing,
.cart-drawer.is-closing { pointer-events: none; }

/* Mobile: drawer is full width, so the whole header turns dark over it. */
@media (max-width: 520px) {
	html.cart-open .site-header,
	html.cart-open .site-header[data-tone],
	html.cart-closing .site-header,
	html.cart-closing .site-header[data-tone] { --hdr-fg: var(--munti-ink); }
	.cart-drawer__backdrop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cart-drawer__panel,
	.cart-drawer.is-open .cart-drawer__panel { clip-path: none; }
	.cart-item.is-entering { opacity: 1; filter: none; transform: none; }
	.cart-drawer__foot { opacity: 1; transform: none; }
}
.cart-item.is-busy,
.cart-item.is-pending { transition-delay: 0s; }

/* ==========================================================================
   Home loader
   The stage is full-viewport from the start and only shrunk via transform: scale,
   so its aspect always matches the screen and the final zoom is scale → 1, GPU-only
   (animating width/height was CPU-bound, 50–83ms frames).
   The 1px frame lives outside the stage so scale doesn't change its thickness.
   Marquee: the frame scales out from the top-right corner (transform only).
   ========================================================================== */
.munti-loader { display: none; }

/* Scroll lock without overflow:hidden: removing it brings back the scrollbar (15px on Windows)
   and reflows the page, first scene included, at handoff. JS blocks scrolling; the scrollbar stays, tinted to the loader. */
html.is-loading { scrollbar-color: var(--munti-ink) var(--munti-ink); }
html.is-loading .munti-loader,
html.loader-settle .munti-loader,
html.loader-done .munti-loader {
	--s: 0.44;                       /* Photo size relative to viewport */
	--gap: var(--space-8);                      /* Frame-to-photo gap */
	--l-ease: cubic-bezier(0.76, 0, 0.24, 1);
	position: fixed;
	inset: 0;
	z-index: 300;
	display: block;
	overflow: hidden;
	background: var(--munti-ink);
	color: var(--munti-linen);
	contain: strict;
}
@media (max-width: 767px) {
	html.is-loading .munti-loader,
	html.loader-settle .munti-loader,
	html.loader-done .munti-loader { --s: 0.58; --gap: var(--space-8); }
}

/* Frame: photo + 2× gap; draws out from the corner via scale. */
.munti-loader__frame {
	position: absolute;
	inset: 0;
	margin: auto;
	inline-size: calc(100% * var(--s) + 2 * var(--gap));
	block-size: calc(100% * var(--s) + 2 * var(--gap));
	border: 1px solid rgb(var(--munti-linen-rgb) / 0.5);
	transform: scale(0);
	transform-origin: top right;
	transition: transform var(--l-draw, 0.9s) var(--l-ease), opacity 0.4s ease;
	pointer-events: none;
}
.munti-loader.is-drawn .munti-loader__frame { transform: none; }

.munti-loader__stage {
	position: absolute;
	inset: 0;
	transform: scale(var(--s));
	transition: transform var(--l-zoom, 1.3s) var(--l-ease);
}

.munti-loader__pic { display: contents; }
.munti-loader__img {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	object-position: var(--pos, 50% 50%);
	/* Square reveal from center: clip-path only.
	   No inner scale or will-change: both forced painting at full viewport size (4× slower on CPU). */
	/* 51%, not 50%: at 50% a 1px soft dot showed in the empty frame. */
	clip-path: inset(51% 51% 51% 51%);
	transition: clip-path var(--l-reveal, 0.65s) var(--l-ease);
}
.munti-loader__img.is-shown { clip-path: inset(0); }
/* clip-path is removed after the reveal. Even inset(0) made the browser paint at the small size
   and upscale during the final zoom (blurry). */
.munti-loader__img.is-open { clip-path: none; transition: none; }
/* Fully covered photos underneath stop painting. */
.munti-loader__img.is-covered { visibility: hidden; }
@media (max-width: 767px) {
	.munti-loader__img { object-position: var(--pos-m, var(--pos, 50% 50%)); }
}

.munti-loader__count {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(50% + 50% * var(--s) + var(--gap) + clamp(var(--space-16), 2.6vh, var(--space-28)));
	text-align: center;
	font-size: var(--fs-sm);
	font-weight: var(--fw-light);
	line-height: 1;
	opacity: 0;
	transition: opacity 0.6s ease 0.5s;
}
.munti-loader__count span { display: inline-block; min-inline-size: 3ch; }
.munti-loader.is-drawn .munti-loader__count { opacity: 0.8; }

/* Final zoom: stage to scale(1); frame and counter fade. */
.munti-loader.is-zoom .munti-loader__stage { transform: none; }
.munti-loader.is-zoom .munti-loader__frame,
.munti-loader.is-zoom .munti-loader__count { opacity: 0; transition: opacity 0.35s ease; }

/* Handoff: loader photo and first-scene photo match pixel for pixel; short fade just in case. */
.munti-loader.is-gone { opacity: 0; transition: opacity var(--l-fade, 0.4s) ease; pointer-events: none; }

/* While the loader runs, first-scene text, header and dots wait, then enter with the usual animation. */
html.is-loading .site-header,
html.is-loading .scene-dots,
html.loader-settle .site-header,
html.loader-settle .scene-dots { opacity: 0; }
.site-header { transition-property: color, background-color, box-shadow, -webkit-backdrop-filter, backdrop-filter, opacity; }
html.loader-done .site-header { transition-duration: 0.45s, 0.45s, 0.45s, 0.45s, 0.45s, 0.9s; transition-delay: 0s, 0s, 0s, 0s, 0s, 0.35s; }
html.is-loading .munti-scene .munti-scene__body > *,
html.loader-settle .munti-scene .munti-scene__body > * {
	opacity: 0;
	transform: translateY(18px);
}
html.loader-done .munti-scene:first-child .munti-scene__body > :nth-child(1) { transition-delay: 0.15s; }
html.loader-done .munti-scene:first-child .munti-scene__body > :nth-child(2) { transition-delay: 0.25s; }
html.loader-done .munti-scene:first-child .munti-scene__body > :nth-child(3) { transition-delay: 0.35s; }
html.loader-done .munti-scene:first-child .munti-scene__body > :nth-child(4) { transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
	.munti-loader { display: none !important; }
}