/* ═══════════════════════════════════════════════
   Lepimy Gliwice — Redesign v2
   Artisan Editorial aesthetic
   Bevellier Medium (display) + Satoshi (body)
   OKLCH color system, mobile-first
   ═══════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   0. Design Tokens (OKLCH)
   ─────────────────────────────────────────────── */
:root {
	/* Core palette — OKLCH perceptually uniform */
	--c-base:        oklch(97.5% 0.012 75);   /* flour / warm white */
	--c-base-mid:    oklch(94%   0.018 72);   /* warm parchment */
	--c-base-deep:   oklch(90%   0.024 70);   /* deeper cream */
	--c-clay:        oklch(62%   0.115 46);   /* terracotta clay */
	--c-clay-hover:  oklch(55%   0.105 46);   /* clay dark */
	--c-clay-soft:   oklch(80%   0.065 50);   /* blush clay */
	--c-brown:       oklch(44%   0.05  55);   /* warm brown */
	--c-ink:         oklch(22%   0.03  50);   /* near-black warm */
	--c-ink-mid:     oklch(42%   0.04  52);   /* mid warm grey */
	--c-ink-soft:    oklch(58%   0.03  55);   /* soft warm grey */
	--c-sage:        oklch(63%   0.07  152);  /* muted sage */
	--c-dark:        oklch(20%   0.04  50);   /* section dark bg */
	--c-border:      oklch(88%   0.018 72);   /* subtle border */
	--c-border-strong: oklch(80% 0.025 68);   /* stronger border */

	/* Typography */
	--f-display: 'Bevellier', Georgia, 'Times New Roman', serif;
	--f-body:    'Satoshi', system-ui, -apple-system, sans-serif;

	/* Type scale — fluid with clamp */
	--t-xs:   clamp(0.75rem, 0.7rem + 0.2vw, 0.8rem);
	--t-sm:   clamp(0.875rem, 0.82rem + 0.25vw, 0.95rem);
	--t-base: clamp(1rem, 0.95rem + 0.25vw, 1.05rem);
	--t-lg:   clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
	--t-xl:   clamp(1.4rem, 1.1rem + 1.5vw, 2rem);
	--t-2xl:  clamp(1.8rem, 1.3rem + 2.5vw, 2.8rem);
	--t-3xl:  clamp(2.4rem, 1.6rem + 4vw, 4.2rem);
	--t-4xl:  clamp(3rem, 2rem + 5vw, 5.5rem);

	/* Spacing (4pt scale) */
	--sp-1:  4px;
	--sp-2:  8px;
	--sp-3:  12px;
	--sp-4:  16px;
	--sp-6:  24px;
	--sp-8:  32px;
	--sp-12: 48px;
	--sp-16: 64px;
	--sp-24: 96px;

	/* Layout */
	--max-w:      1200px;
	--max-w-text: 68ch;
	--pad-x:      clamp(1.25rem, 5vw, 2.5rem);
	--header-h:   70px; /* fits 50px logo + 10px vertical padding each side */

	/* Motion — cheap properties only */
	--ease:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur:      240ms;
	--dur-slow: 400ms;

	/* Shapes */
	--r-sm:  6px;
	--r-md:  12px;
	--r-lg:  20px;
	--r-xl:  32px;
	--r-full: 9999px;
}

@media (min-width: 1024px) {
	:root {
		--header-h: 96px; /* fits 76px logo + 10px vertical padding each side */
	}
}

/* ───────────────────────────────────────────────
   1. Reset
   ─────────────────────────────────────────────── */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	font-family: var(--f-body);
	font-size: var(--t-base);
	line-height: 1.68;
	color: var(--c-ink);
	background: var(--c-base);
	overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
address { font-style: normal; }

/* Screen-reader only — accessible skip-link & hidden labels */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sr-only--focusable:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; background: var(--c-base); color: var(--c-ink); padding: var(--sp-4) var(--sp-8); z-index: 99999; }
button { cursor: pointer; font: inherit; border: none; background: none; }

a {
	color: var(--c-clay);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}
a:hover { color: var(--c-clay-hover); }
a:focus-visible {
	outline: 2px solid var(--c-clay);
	outline-offset: 3px;
	border-radius: 3px;
}

::selection {
	background: var(--c-clay-soft);
	color: var(--c-ink);
}

/* Reduced motion — disable ALL animations and transitions */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	html { scroll-behavior: auto; }
	.reveal { opacity: 1 !important; transform: none !important; }
}

/* ───────────────────────────────────────────────
   2. Layout utilities
   ─────────────────────────────────────────────── */
.container {
	max-width: var(--max-w);
	margin-inline: auto;
	padding-inline: var(--pad-x);
}

.section-pad  { padding-block: clamp(4rem, 8vw, 7rem); }
.section-pad--lg { padding-block: clamp(5rem, 10vw, 9rem); }

/* ───────────────────────────────────────────────
   3. Typography system
   ─────────────────────────────────────────────── */
.display {
	font-family: var(--f-display);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.02em;
}

h1, h2, h3, h4 {
	font-family: var(--f-display);
	font-weight: 500; /* Bevellier Medium — only weight available */
	line-height: 1.12;
	color: var(--c-ink);
}

h1 { font-size: var(--t-3xl); letter-spacing: -0.025em; }
h2 { font-size: var(--t-2xl); letter-spacing: -0.02em; }
h3 { font-size: var(--t-xl); letter-spacing: -0.01em; }

.body-text {
	font-size: var(--t-lg);
	line-height: 1.72;
	color: var(--c-ink-mid);
	max-width: 62ch;
}

.eyebrow {
	font-family: var(--f-body);
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-clay);
}

.prose p {
	margin-bottom: 1.1em;
	color: var(--c-ink-mid);
	line-height: 1.75;
	font-size: var(--t-lg);
}

.prose--light p { color: oklch(90% 0.02 75); }

/* ───────────────────────────────────────────────
   4. Buttons
   ─────────────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	font-family: var(--f-body);
	font-size: var(--t-sm);
	font-weight: 500;
	padding: 0.7rem 1.75rem;
	border-radius: var(--r-full);
	border: 1.5px solid transparent;
	text-decoration: none;
	white-space: nowrap;
	transition: transform var(--dur) var(--ease),
	            background-color var(--dur) var(--ease),
	            border-color var(--dur) var(--ease),
	            color var(--dur) var(--ease),
	            box-shadow var(--dur) var(--ease);
}

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

.btn--primary {
	background: var(--c-clay);
	color: var(--c-base);
	border-color: var(--c-clay);
}
.btn--primary:hover {
	background: var(--c-clay-hover);
	border-color: var(--c-clay-hover);
	color: var(--c-base);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px oklch(62% 0.115 46 / 0.25);
}

.btn--ghost {
	background: transparent;
	color: var(--c-clay);
	border-color: var(--c-clay);
}
.btn--ghost:hover {
	background: var(--c-clay);
	color: var(--c-base);
}

.btn--ghost-light {
	background: transparent;
	color: oklch(95% 0.01 75);
	border-color: oklch(95% 0.01 75 / 0.4);
}
.btn--ghost-light:hover {
	background: oklch(95% 0.01 75 / 0.12);
	border-color: oklch(95% 0.01 75 / 0.7);
	color: oklch(98% 0.005 75);
}

.btn--lg { padding: 0.85rem 2.25rem; font-size: var(--t-base); }

/* ───────────────────────────────────────────────
   5. Scroll reveal (replaces AOS — no library)
   ─────────────────────────────────────────────── */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--dur-slow) var(--ease-out),
	            transform var(--dur-slow) var(--ease-out);
}
.reveal--left  { transform: translateX(-24px); }
.reveal--right { transform: translateX(24px); }
.reveal--scale { transform: scale(0.97); }

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

.reveal-d1 { transition-delay: 80ms; }
.reveal-d2 { transition-delay: 160ms; }
.reveal-d3 { transition-delay: 240ms; }

/* ───────────────────────────────────────────────
   6. Header — minimal, no backdrop-filter
   ─────────────────────────────────────────────── */
.site-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	height: var(--header-h);
	background: var(--c-base);
	border-bottom: 1px solid transparent;
	transition: border-color var(--dur) var(--ease),
	            box-shadow var(--dur) var(--ease);
}

/* Backdrop-filter removed — replaced with solid opaque background.
   Reason: blur() creates expensive compositor layers on every scroll,
   especially damaging on low-end Android devices. */
.site-header--scrolled {
	border-bottom-color: var(--c-border);
	box-shadow: 0 1px 12px oklch(22% 0.03 50 / 0.07);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	gap: var(--sp-4);
}

.site-header__logo img {
	height: 50px; /* mobile: +30% vs original 38px */
	width: auto;
}

@media (min-width: 1024px) {
	.site-header__logo img {
		height: 76px; /* desktop: +100% vs original 38px */
	}
}

/* Nav — desktop */
.site-nav { display: none; }

@media (min-width: 1024px) {
	.site-nav { display: block; }

	.site-nav__list {
		display: flex;
		align-items: center;
		gap: var(--sp-1);
	}

	.site-nav__link {
		font-size: var(--t-xs);
		font-weight: 500;
		letter-spacing: 0.04em;
		color: var(--c-ink-mid);
		padding: var(--sp-2) var(--sp-3);
		border-radius: var(--r-sm);
		transition: color var(--dur) var(--ease),
		            background var(--dur) var(--ease);
	}

	.site-nav__link:hover,
	.site-nav__link.active {
		color: var(--c-clay);
		background: oklch(62% 0.115 46 / 0.07);
	}
}

/* Hours badge in header */
.site-header__hours {
	display: none;
	align-items: center;
	gap: 6px;
	font-size: var(--t-xs);
	font-weight: 500;
	color: var(--c-ink-mid);
	letter-spacing: 0.02em;
}
.site-header__hours-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}
.site-header__hours.is-open .site-header__hours-dot {
	background: var(--c-sage);
}
.site-header__hours.is-closed .site-header__hours-dot {
	background: var(--c-clay);
}
@media (min-width: 768px) {
	.site-header__hours { display: flex; }
}

/* Phone in header */
.site-header__phone {
	display: none;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--t-xs);
	font-weight: 500;
	color: var(--c-clay);
	padding: var(--sp-2) var(--sp-4);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-full);
	transition: border-color var(--dur) var(--ease),
	            background var(--dur) var(--ease);
}
.site-header__phone:hover {
	border-color: var(--c-clay);
	background: oklch(62% 0.115 46 / 0.05);
	color: var(--c-clay);
}

@media (min-width: 768px) {
	.site-header__phone { display: flex; }
}

/* Burger */
.site-header__burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
}
.site-header__burger:focus-visible {
	outline: 2px solid var(--c-clay);
	outline-offset: 3px;
	border-radius: 3px;
}

@media (min-width: 1024px) {
	.site-header__burger { display: none; }
}

.burger-line {
	display: block;
	width: 22px;
	height: 1.5px;
	background: var(--c-ink);
	border-radius: 2px;
	transform-origin: center;
	transition: transform var(--dur) var(--ease),
	            opacity var(--dur) var(--ease);
}

.site-header__burger[aria-expanded="true"] .burger-line:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}
.site-header__burger[aria-expanded="true"] .burger-line:nth-child(2) {
	opacity: 0;
}
.site-header__burger[aria-expanded="true"] .burger-line:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile nav */
.site-nav--mobile-open {
	display: flex !important;
	position: fixed;
	inset-block-start: var(--header-h);
	inset-inline: 0;
	inset-block-end: 0;
	background: var(--c-base);
	z-index: 99;
	padding: var(--sp-8) var(--pad-x);
	flex-direction: column;
	animation: slideInDown var(--dur-slow) var(--ease-out) both;
}

.site-nav--mobile-open .site-nav__list {
	display: flex;
	flex-direction: column;
}

.site-nav--mobile-open .site-nav__link {
	display: block;
	font-family: var(--f-display);
	font-weight: 500;
	font-size: var(--t-2xl);
	color: var(--c-ink);
	padding: var(--sp-4) 0;
	border-bottom: 1px solid var(--c-border);
	letter-spacing: -0.02em;
}
.site-nav--mobile-open .site-nav__link:hover {
	color: var(--c-clay);
}

@keyframes slideInDown {
	from { opacity: 0; transform: translateY(-12px); }
	to   { opacity: 1; transform: translateY(0); }
}

body.nav-open { overflow: hidden; }
body.admin-bar .site-header { inset-block-start: 32px; }
@media (max-width: 782px) {
	body.admin-bar .site-header { inset-block-start: 46px; }
}

/* ───────────────────────────────────────────────
   7. Hero — asymmetric editorial
   ─────────────────────────────────────────────── */
.hero {
	padding-block-start: var(--header-h);
	min-height: 100svh;
	background: var(--c-base);
	overflow: hidden;
	display: grid;
	position: relative;
}

/* Subtle flour-texture dot pattern — very faint */
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(oklch(44% 0.05 55 / 0.07) 1px, transparent 1px);
	background-size: 28px 28px;
	pointer-events: none;
}

.hero__layout {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	min-height: calc(100svh - var(--header-h));
	position: relative;
	/* No z-index: avoids creating an extra stacking context that
	   would interact with hero__img will-change:transform layer */
}

@media (min-width: 900px) {
	.hero__layout {
		/* Image column enlarged — product shot takes dominant position */
		grid-template-columns: 38% 1fr;
		grid-template-rows: 1fr;
		align-items: stretch;
		max-width: 1440px;
		margin-inline: auto;
		width: 100%;
	}
}

/* Text column */
.hero__text-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2.5rem, 7vw, 5rem) var(--pad-x) clamp(3rem, 8vw, 6rem);
	position: relative;
	z-index: 1;
}

@media (min-width: 900px) {
	.hero__text-col {
		/* Extra left indent: vertical label lives in ~var(--pad-x) strip,
		   content starts well past it for clear visual separation */
		padding-inline-start: clamp(4.5rem, 8vw, 9rem);
		padding-inline-end: clamp(2rem, 4vw, 3.5rem);
	}
}

/* Rotated vertical label — editorial detail */
.hero__vertical-label {
	display: none;
}
@media (min-width: 900px) {
	.hero__vertical-label {
		display: block;
		position: absolute;
		/* Anchor to the left page-padding edge, clearly in the margin strip */
		left: var(--pad-x);
		top: 50%;
		transform: translateY(-50%) rotate(-90deg);
		transform-origin: center center;
		font-size: var(--t-xs);
		font-weight: 500;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--c-clay-soft);
		white-space: nowrap;
	}
}

.hero__eyebrow-wrap {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-6);
}

.hero__eyebrow-line {
	display: block;
	width: 2.5rem;
	height: 1px;
	background: var(--c-clay);
	flex-shrink: 0;
}

.hero__h1 {
	font-size: var(--t-3xl);
	margin-bottom: var(--sp-6);
	max-width: 14ch;
}

@media (min-width: 900px) {
	/* Remove hard ch-cap — let Bevellier fill the column naturally */
	.hero__h1 { max-width: none; }
}

.hero__sub {
	font-size: var(--t-lg);
	color: var(--c-ink-mid);
	max-width: 42ch;
	line-height: 1.65;
	margin-bottom: var(--sp-8);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

/* Image column — cream bg matches page: transparent PNG blends naturally */
.hero__image-col {
	position: relative;
	overflow: hidden;
	background: var(--c-base);
}

@media (max-width: 899px) {
	/* ── Mobile hero: image becomes full-bleed background ── */

	/* Grid → block; text fills section */
	.hero__layout {
		display: block;
		position: relative;
		min-height: 88svh;
	}

	/* Text column floats above the background */
	.hero__text-col {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		min-height: 88svh;
		padding: calc(var(--header-h) + var(--sp-8)) var(--pad-x) var(--sp-8);
	}
	.hero__eyebrow-wrap { justify-content: center; }
	.hero__h1 { max-width: 18ch; }
	.hero__sub { max-width: 36ch; margin-inline: auto; }
	.hero__actions { justify-content: center; }
	.hero__scroll-hint { display: none; }

	/* Image column: absolute background layer, sits behind text */
	.hero__image-col {
		position: absolute;
		inset: 0;
		z-index: 0;
		height: auto;
		max-height: none;
		margin-block-start: 0;
		overflow: hidden;
		background: var(--c-base);
	}

}

/* Hero image — transparent PNG, plate floats on cream (desktop) */
.hero__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center 54%;
	/* will-change promotes to compositor for JS parallax transform */
	will-change: transform;
}

/* Mobile override: cover fills the background — MUST come after base rule */
@media (max-width: 899px) {
	.hero__img {
		object-fit: cover;
		object-position: center 55%;
		will-change: auto;
	}
}


/* Gradient blend — krem lewej kolumny przelewa się na prawy panel */
@media (min-width: 900px) {
	.hero__image-col::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to right,
			var(--c-base) 0%,
			oklch(97.5% 0.012 75 / 0.7) 15%,
			transparent 40%
		);
		z-index: 1;
		pointer-events: none;
	}
}

/* Mobile — full-height overlay: cream at top (readable text),
   transparent mid (pierogi visible), cream at bottom (section blend) */
@media (max-width: 899px) {
	.hero__image-col::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to bottom,
			oklch(97.5% 0.012 75 / 0.90) 0%,
			oklch(97.5% 0.012 75 / 0.70) 28%,
			oklch(97.5% 0.012 75 / 0.35) 58%,
			var(--c-base) 100%
		);
		z-index: 1;
		pointer-events: none;
	}
	/* Bottom fade — blends into next section */
	.hero__image-col::after {
		content: '';
		display: block;
		position: absolute;
		inset-block: auto 0;
		inset-inline: 0;
		width: 100%;
		height: 180px;
		background: linear-gradient(to top, var(--c-base) 0%, transparent 100%);
		z-index: 2;
		pointer-events: none;
	}
}

/* Dekoracyjna linia — subtelny pionowy separator, desktop only */
@media (min-width: 900px) {
	.hero__image-col::after {
		content: '';
		position: absolute;
		inset-block: var(--sp-12);
		inset-inline-start: 0;
		width: 2px;
		background: var(--c-clay-soft);
		opacity: 0.3;
	}
}

/* Scroll hint */
.hero__scroll-hint {
	position: absolute;
	bottom: var(--sp-6);
	left: var(--pad-x);
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--t-xs);
	color: var(--c-ink-soft);
	letter-spacing: 0.06em;
}

.hero__scroll-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-clay-soft);
	animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 0.4; transform: scale(1); }
	50%       { opacity: 1;   transform: scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__scroll-dot { animation: none; opacity: 0.6; }
}

/* ───────────────────────────────────────────────
   8. About — full-bleed image + overlapping text
   ─────────────────────────────────────────────── */
.about {
	background: var(--c-base-mid);
	overflow: hidden;
}

.about__grid {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.about__grid {
		grid-template-columns: 1fr 1fr;
		align-items: start;
		min-height: 540px;
	}
}

/* Image fills its column fully — no card/frame */
.about__image-wrap {
	position: relative;
	overflow: hidden;
	height: 300px;
}

/* Mobile: hide about image — hero already shows the food photography */
@media (max-width: 767px) {
	.about__image-wrap {
		display: none;
	}
	.about__grid {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 768px) {
	.about__image-wrap {
		height: 100%;
		min-height: 540px;
	}
}

.about__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.7s var(--ease);
}

.about:hover .about__image {
	transform: scale(1.03);
}

/* Text column */
.about__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2.5rem, 7vw, 5rem) var(--pad-x) clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 4rem);
}

@media (min-width: 768px) {
	.about__content {
		padding-inline-start: clamp(2rem, 5vw, 4rem);
		padding-inline-end: var(--pad-x);
	}
}

.about__heading {
	margin-bottom: var(--sp-6);
}

/* Large decorative quote mark */
.about__content::before {
	content: '\201E'; /* „ */
	display: block;
	font-family: var(--f-display);
	font-size: 5rem;
	line-height: 0.8;
	color: var(--c-clay-soft);
	margin-bottom: var(--sp-4);
	opacity: 0.5;
}

.about__values {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin-top: var(--sp-8);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--c-border);
}

.about__value {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	font-size: var(--t-sm);
	font-weight: 500;
	color: var(--c-ink-mid);
}

.about__value-icon {
	font-size: 1.1rem;
	flex-shrink: 0;
}

/* ───────────────────────────────────────────────
   9. Menu — editorial list, no cards
   ─────────────────────────────────────────────── */
.menu-section {
	background: var(--c-base);
}

.menu-section__head {
	padding-block: clamp(3.5rem, 8vw, 6rem) 0;
	padding-inline: var(--pad-x);
	max-width: var(--max-w);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

@media (min-width: 768px) {
	.menu-section__head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
}

.menu-section__title { }

.menu-section__caption {
	font-size: var(--t-sm);
	color: var(--c-ink-soft);
	max-width: 36ch;
}
.menu-section__allergen-note {
	font-size: var(--t-xs);
	color: var(--c-ink-soft);
	max-width: 42ch;
	margin-top: var(--sp-2);
	font-style: italic;
}

/* Category layout */
.menu-section__body {
	padding-block: clamp(2rem, 5vw, 4rem) clamp(4rem, 8vw, 7rem);
}

.menu-cat {
	max-width: var(--max-w);
	margin-inline: auto;
	padding-inline: var(--pad-x);
}

.menu-cat + .menu-cat {
	padding-block-start: clamp(2.5rem, 5vw, 4rem);
}

/* Divider rule between categories */
.menu-cat + .menu-cat::before {
	content: '';
	display: block;
	height: 1px;
	background: var(--c-border);
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.menu-cat--seasonal {
	background: var(--c-base-mid);
	padding-block: clamp(2rem, 4vw, 3rem);
	margin-top: clamp(2rem, 5vw, 4rem);
	border-radius: var(--r-lg);
}
.menu-cat--seasonal::before { display: none; }

.menu-cat__header {
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.menu-cat__icon {
	font-size: 1.6rem;
	line-height: 1;
}

.menu-cat__name {
	font-size: var(--t-2xl);
}

.menu-cat__tag {
	font-size: var(--t-xs);
	color: var(--c-clay);
	font-weight: 500;
	letter-spacing: 0.06em;
}

/* Items as clean list — two columns on wide screens */
.menu-items {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

@media (min-width: 768px) {
	.menu-items { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 5rem); }
}

.menu-item {
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
	padding-block: 0.8rem;
	border-bottom: 1px solid var(--c-border);
}

.menu-item:last-child { border-bottom: none; }

.menu-item__body { flex: 1; }

.menu-item__name {
	font-weight: 600;
	font-size: var(--t-base);
	color: var(--c-ink);
	display: block;
}

.menu-item__desc {
	font-size: var(--t-xs);
	color: var(--c-ink-soft);
	font-style: italic;
}

.menu-item__price {
	font-family: var(--f-display);
	font-weight: 500;
	font-size: var(--t-lg);
	color: var(--c-clay);
	white-space: nowrap;
	flex-shrink: 0;
}

.menu-item__price span {
	font-family: var(--f-body);
	font-weight: 400;
	font-size: var(--t-xs);
	color: var(--c-ink-soft);
	margin-inline-start: 2px;
}

/* Atmospheric food image strip below menu */
.menu-section__strip {
	max-width: var(--max-w);
	margin-inline: auto;
	padding-inline: var(--pad-x);
	padding-block-end: clamp(4rem, 8vw, 7rem);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-3);
}

@media (max-width: 639px) {
	.menu-section__strip { grid-template-columns: 1fr 1fr; }
	.menu-section__strip > *:nth-child(3) { display: none; }
}

.menu-strip__item {
	overflow: hidden;
	border-radius: var(--r-md);
	aspect-ratio: 4/3;
}

.menu-strip__item:first-child {
	border-radius: var(--r-lg);
	aspect-ratio: 3/4;
	grid-row: span 1;
}

.menu-strip__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.menu-strip__item:hover img { transform: scale(1.04); }

/* ───────────────────────────────────────────────
   10. Orders — dark section, confident
   ─────────────────────────────────────────────── */
.orders {
	background: var(--c-dark);
	color: oklch(95% 0.012 75);
	position: relative;
	overflow: hidden;
}

.orders::before {
	/* Large decorative numeral - editorial accent */
	content: '';
	position: absolute;
	inset-inline-end: -2rem;
	inset-block: -3rem;
	width: 40%;
	background-image: radial-gradient(oklch(62% 0.115 46 / 0.06) 1.5px, transparent 1.5px);
	background-size: 20px 20px;
	pointer-events: none;
}

.orders__inner {
	max-width: var(--max-w);
	margin-inline: auto;
	padding-inline: var(--pad-x);
	padding-block: clamp(4rem, 9vw, 8rem);
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	position: relative;
	z-index: 1;
}

@media (min-width: 900px) {
	.orders__inner { grid-template-columns: 1.1fr 1fr; align-items: center; }
}

.orders h2 { color: oklch(97% 0.01 75); }

.orders__eyebrow {
	color: var(--c-clay-soft);
}

.orders__heading { margin-block: var(--sp-4) var(--sp-3); }
.orders__subheading {
	font-size: var(--t-xl);
	color: var(--c-clay-soft);
	margin-bottom: var(--sp-6);
	font-family: var(--f-display);
	font-style: italic;
	font-weight: 400;
}

.orders__features {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.orders__feature {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.orders__feature-icon {
	font-size: 1.3rem;
	flex-shrink: 0;
	margin-top: 2px;
}

.orders__feature-text {
	font-size: var(--t-sm);
	color: oklch(82% 0.02 72);
	line-height: 1.5;
}

.orders__cta { margin-top: var(--sp-8); }

.orders__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

/* ───────────────────────────────────────────────
   11. Reviews
   ─────────────────────────────────────────────── */
.reviews {
	background: var(--c-base-deep);
}

.reviews__inner {
	max-width: var(--max-w);
	margin-inline: auto;
	padding-inline: var(--pad-x);
	padding-block: clamp(4rem, 8vw, 7rem);
}

.reviews__header {
	margin-bottom: clamp(2rem, 5vw, 4rem);
}

.reviews__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
}

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

@media (min-width: 1024px) {
	.reviews__grid { grid-template-columns: repeat(4, 1fr); }
}

.review-card {
	background: var(--c-base);
	border-radius: var(--r-md);
	padding: var(--sp-6);
	display: flex;
	flex-direction: column;
	border: 1px solid var(--c-border);
	transition: transform var(--dur) var(--ease),
	            box-shadow var(--dur) var(--ease);
}

.review-card:hover {
	box-shadow: 0 8px 28px oklch(22% 0.04 50 / 0.1);
}

.review-card__stars {
	display: flex;
	gap: 2px;
	margin-bottom: var(--sp-4);
}

.review-card__star { color: var(--c-border-strong); }
.review-card__star--filled { color: oklch(78% 0.15 75); }

.review-card__text {
	flex: 1;
	font-size: var(--t-sm);
	color: var(--c-ink-mid);
	line-height: 1.65;
	margin-bottom: var(--sp-4);
}

.review-card__footer {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-border);
}

.review-card__avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--c-clay-soft);
	color: var(--c-base);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: var(--t-xs);
	flex-shrink: 0;
}

.review-card__author {
	font-weight: 600;
	font-style: normal;
	font-size: var(--t-xs);
	color: var(--c-ink);
	display: block;
	line-height: 1.3;
}

.review-card__date {
	font-size: var(--t-xs);
	color: var(--c-ink-soft);
}

.reviews__footer {
	margin-top: var(--sp-8);
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--t-xs);
	color: var(--c-ink-soft);
}

/* ───────────────────────────────────────────────
   12. Location
   ─────────────────────────────────────────────── */
.location {
	background: var(--c-base);
}

.location__inner {
	max-width: var(--max-w);
	margin-inline: auto;
	padding-inline: var(--pad-x);
	padding-block: clamp(4rem, 8vw, 7rem);
}

.location__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-8);
}

@media (min-width: 768px) {
	.location__grid {
		grid-template-columns: 340px 1fr;
		align-items: start;
		gap: clamp(2rem, 5vw, 4rem);
	}
}

.location__info {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
}

.location__detail {
	display: flex;
	gap: var(--sp-4);
	align-items: flex-start;
}

.location__icon {
	color: var(--c-clay);
	flex-shrink: 0;
	margin-top: 3px;
}

.location__detail-label {
	font-size: var(--t-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--c-ink-soft);
	display: block;
	margin-bottom: var(--sp-1);
}

.location__detail a {
	font-weight: 500;
	font-size: var(--t-base);
}

.location__hours-note {
	font-size: var(--t-xs);
	color: var(--c-clay);
	margin-top: var(--sp-2);
}

/* Hours list */
.hours-list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-1) var(--sp-4);
	font-size: var(--t-sm);
}

.hours-list dt { color: var(--c-ink-mid); }
.hours-list dd { font-weight: 500; text-align: right; }
.hours-list dd.hours-closed { color: var(--c-clay); font-weight: 600; }

/* Map */
.location__map-wrap {
	border-radius: var(--r-lg);
	overflow: hidden;
	border: 1px solid var(--c-border);
}

.location__map {
	width: 100%;
	height: 320px;
}

@media (min-width: 768px) {
	.location__map { height: 440px; }
}

/* Leaflet overrides */
.leaflet-popup-content-wrapper {
	border-radius: var(--r-md) !important;
	font-family: var(--f-body) !important;
	box-shadow: 0 4px 20px oklch(22% 0.04 50 / 0.15) !important;
}
.leaflet-popup-content {
	margin: 12px 16px !important;
	font-size: var(--t-sm) !important;
	line-height: 1.55 !important;
}

.lepimy-marker {
	background: var(--c-clay);
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	border: 3px solid var(--c-base);
	box-shadow: 0 2px 8px oklch(22% 0.04 50 / 0.25);
}

/* ───────────────────────────────────────────────
   13. FAQ
   ─────────────────────────────────────────────── */
.faq-section {
	background: var(--c-base-mid);
}

.faq-section__inner {
	max-width: var(--max-w);
	margin-inline: auto;
	padding-inline: var(--pad-x);
	padding-block: clamp(4rem, 8vw, 7rem);
}

.faq-section__header { margin-bottom: clamp(2rem, 5vw, 4rem); }

.faq-list {
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.faq-item {
	background: var(--c-base);
	border-radius: var(--r-md);
	border: 1px solid var(--c-border);
	overflow: hidden;
	transition: box-shadow var(--dur) var(--ease);
}

.faq-item:hover { box-shadow: 0 2px 12px oklch(22% 0.04 50 / 0.06); }
.faq-item[open] { border-color: var(--c-clay-soft); }

.faq-item__question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-4) var(--sp-6);
	cursor: pointer;
	font-weight: 600;
	font-size: var(--t-base);
	color: var(--c-ink);
	list-style: none;
}

.faq-item__question:focus-visible {
	outline: 2px solid var(--c-clay);
	outline-offset: -2px;
	border-radius: var(--r-sm);
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::marker { content: ''; }

.faq-item__chevron {
	flex-shrink: 0;
	color: var(--c-ink-soft);
	transition: transform var(--dur) var(--ease);
}
.faq-item[open] .faq-item__chevron { transform: rotate(180deg); }

.faq-item__answer {
	/* CSS grid trick for height animation — no JS reflow */
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.faq-item[open] .faq-item__answer {
	grid-template-rows: 1fr;
}

.faq-item__answer-inner {
	overflow: hidden;
	padding: 0 var(--sp-6);
}
.faq-item[open] .faq-item__answer-inner {
	padding-bottom: var(--sp-4);
}

.faq-item__answer p {
	font-size: var(--t-sm);
	color: var(--c-ink-mid);
	line-height: 1.7;
}

/* ───────────────────────────────────────────────
   14. Footer
   ─────────────────────────────────────────────── */
.site-footer {
	background: var(--c-dark);
	color: oklch(82% 0.02 72);
}

.site-footer__divider {
	height: 1px;
	background: linear-gradient(to right, transparent, oklch(62% 0.115 46 / 0.4), transparent);
}

.site-footer__inner {
	max-width: var(--max-w);
	margin-inline: auto;
	padding-inline: var(--pad-x);
	padding-block: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 3vw, 2.5rem);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-8);
	padding-bottom: var(--sp-8);
	border-bottom: 1px solid oklch(40% 0.02 50);
}

@media (min-width: 640px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 0.8fr; } }

.site-footer__logo { height: 44px; width: auto; margin-bottom: var(--sp-4); }

.site-footer__tagline {
	font-size: var(--t-sm);
	max-width: 26ch;
	color: oklch(68% 0.02 68);
}

.site-footer__heading {
	font-family: var(--f-body);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: oklch(92% 0.01 75);
	margin-bottom: var(--sp-4);
	font-weight: 600;
}

.site-footer__contact p,
.site-footer__contact address p {
	font-size: var(--t-sm);
	margin-bottom: var(--sp-1);
	color: oklch(75% 0.02 70);
}
.site-footer__contact a { color: var(--c-clay-soft); }
.site-footer__contact a:hover { color: oklch(88% 0.05 68); }

.site-footer__hours .hours-list dt { color: oklch(60% 0.02 68); }
.site-footer__hours .hours-list dd { color: oklch(85% 0.015 72); }

.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: oklch(30% 0.03 50);
	color: oklch(75% 0.02 72);
	margin-inline-end: var(--sp-2);
	transition: background var(--dur) var(--ease),
	            color var(--dur) var(--ease);
}
.social-link:hover {
	background: var(--c-clay);
	color: var(--c-base);
}

.site-footer__bottom {
	padding-top: var(--sp-6);
	font-size: var(--t-xs);
	color: oklch(50% 0.02 68);
	text-align: center;
}
.site-footer__warm {
	font-family: var(--f-display);
	font-size: var(--t-sm);
	color: oklch(65% 0.04 60);
	margin-bottom: var(--sp-3);
	letter-spacing: -0.01em;
}

/* ───────────────────────────────────────────────
   15. Section wave separator (used before dark footer)
   ─────────────────────────────────────────────── */
.section-wave {
	display: block;
	line-height: 0;
	overflow: hidden;
}

.section-wave svg {
	display: block;
	width: 100%;
	height: 48px;
}

.section-wave--dark {
	color: var(--c-dark);
}

/* ───────────────────────────────────────────────
   16. Section heading pattern (reusable)
   ─────────────────────────────────────────────── */
.section-heading-group {
	margin-bottom: clamp(2rem, 5vw, 4rem);
}

.section-heading-group .eyebrow {
	display: block;
	margin-bottom: var(--sp-3);
}

.section-heading-group h2 {
	margin-bottom: var(--sp-3);
}

.section-heading-group p {
	color: var(--c-ink-mid);
	font-size: var(--t-base);
	max-width: 52ch;
}

/* ───────────────────────────────────────────────
   17. Mobile improvements
   ─────────────────────────────────────────────── */

/* Header — bigger logo increases header height on mobile; compensate */
@media (max-width: 1023px) {
	.site-header {
		height: auto;
		min-height: var(--header-h);
		padding-block: var(--sp-2);
	}
	.site-header__inner {
		height: auto;
		padding-block: var(--sp-2);
	}
}

/* Hero — tighter on very small screens */
@media (max-width: 479px) {
	.hero__h1 {
		font-size: clamp(2rem, 8vw, 2.8rem);
	}
	.hero__sub {
		font-size: var(--t-base);
	}
	.hero__text-col {
		padding-top: clamp(1.5rem, 5vw, 3rem);
		padding-bottom: clamp(1.5rem, 5vw, 3rem);
	}
	.hero__scroll-hint {
		display: none; /* hidden on very small screens — no space */
	}
}

/* Hero actions — stack on narrow */
@media (max-width: 400px) {
	.hero__actions {
		flex-direction: column;
		align-items: flex-start;
	}
	.hero__actions .btn {
		width: 100%;
		justify-content: center;
	}
}

/* ── Mobile hero: text & button readability over food-photo bg ── */
@media (max-width: 899px) {
	/* Darker subtext — mid-grey disappears on semi-transparent cream overlay */
	.hero .hero__sub {
		color: var(--c-ink);
	}

	/* Primary button: stronger shadow to lift off the background */
	.hero__actions .btn--primary {
		box-shadow: 0 4px 24px oklch(62% 0.115 46 / 0.35);
	}

	/* Ghost "Zadzwoń": frosted cream glass — readable over any food photo */
	.hero__actions .btn--ghost {
		background: oklch(97.5% 0.012 75 / 0.78);
		-webkit-backdrop-filter: blur(12px) saturate(180%);
		backdrop-filter: blur(12px) saturate(180%);
		border-color: oklch(62% 0.115 46 / 0.55);
		color: var(--c-clay);
	}
	.hero__actions .btn--ghost:hover {
		background: var(--c-clay);
		color: var(--c-base);
		border-color: var(--c-clay);
	}
}

/* About — reduce decorative quote mark size on mobile */
@media (max-width: 767px) {
	.about__content::before {
		font-size: 3.5rem;
	}
	.about__content {
		padding: clamp(2rem, 6vw, 3.5rem) var(--pad-x);
	}
}

/* Menu — tighter category headers on mobile */
@media (max-width: 639px) {
	.menu-cat__name {
		font-size: var(--t-xl);
	}
	.menu-item__price {
		font-size: var(--t-base);
	}
}

/* Orders — full-width buttons on mobile */
@media (max-width: 479px) {
	.orders__actions {
		flex-direction: column;
	}
	.orders__actions .btn {
		width: 100%;
		justify-content: center;
	}
}

/* Reviews — 1 column always on very small screens */
@media (max-width: 479px) {
	.reviews__grid {
		grid-template-columns: 1fr;
	}
}

/* Location — info detail icons stay aligned on mobile */
@media (max-width: 479px) {
	.location__detail {
		gap: var(--sp-3);
	}
	.location__icon {
		width: 18px;
		height: 18px;
	}
}

/* FAQ — tighter padding on mobile */
@media (max-width: 479px) {
	.faq-item__question {
		padding: var(--sp-3) var(--sp-4);
		font-size: var(--t-sm);
	}
	.faq-item__answer-inner {
		padding-inline: var(--sp-4);
	}
}

/* Mobile nav — fix for taller logo */
@media (max-width: 1023px) {
	.site-nav--mobile-open {
		inset-block-start: calc(var(--header-h) + 16px);
	}
}

/* Icon SVGs in templates */
.icon-svg {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--c-clay);
}

/* In dark (orders) section — icons inherit light color */
.orders .icon-svg {
	color: var(--c-clay-soft);
}

/* ───────────────────────────────────────────────
   18. Print
   ─────────────────────────────────────────────── */
@media print {
	.site-header,
	.hero__image-col,
	.hero::before,
	.hero__scroll-hint { display: none !important; }

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

/* ───────────────────────────────────────────────
   19. Scroll progress bar
   ─────────────────────────────────────────────── */
.scroll-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	height: 2px;
	width: 0%;
	background: var(--c-clay);
	z-index: 10001;
	pointer-events: none;
	/* No transition — updated every rAF for smoothness */
}

/* ───────────────────────────────────────────────
   20. Pierogi Loader
   ─────────────────────────────────────────────── */

/* Lock scroll while loader is active */
body.has-loader {
	overflow: hidden;
}

/* Hero content starts invisible — revealed by loader-done */
body.has-loader .hero__text-col,
body.has-loader .hero__image-col {
	opacity: 0;
}

body.loader-done .hero__text-col,
body.loader-done .hero__image-col {
	opacity: 1;
	transition: opacity 600ms var(--ease-out) 100ms;
}

/* Hero elements reclaim their reveal animation after loader */
body.loader-done .hero__eyebrow-wrap,
body.loader-done .hero__h1,
body.loader-done .hero__sub,
body.loader-done .hero__actions {
	animation: hero-rise 700ms var(--ease-out) both;
}
body.loader-done .hero__h1      { animation-delay:  80ms; }
body.loader-done .hero__sub     { animation-delay: 180ms; }
body.loader-done .hero__actions { animation-delay: 280ms; }

@keyframes hero-rise {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Loader overlay ── */
.lp-loader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--c-base);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: all;
}

/* Exit: bloom + fade — logo has already flown out by this point */
.lp-loader.is-exiting {
	animation: loader-exit 500ms var(--ease-out) forwards;
}
.lp-loader.is-hidden {
	display: none;
}

@keyframes loader-exit {
	0%   { opacity: 1; transform: scale(1); }
	60%  { opacity: 1; transform: scale(1.04); }
	100% { opacity: 0; transform: scale(1.06); }
}

/* ── Stage ── */
.lp-loader__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-6);
}

/* ── Logo — zooms in AFTER pierogi draws, then flies to header via GSAP ── */
.lp-loader__logo {
	height: 180px;
	width: auto;
	opacity: 0;
	transform-origin: center;
	animation: lp-logo-reveal 550ms var(--ease-out) 1350ms forwards;
}

/* ── SVG pierogi ── */
.lp-pierogi {
	color: var(--c-clay);
	overflow: visible;
}

/* Body outline — dasharray drives the single-line draw */
.lp-body {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	fill: none;
	animation: path-draw 900ms var(--ease-out) 350ms forwards;
}

/* Fold/crimp line — draws after body completes */
.lp-fold {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	fill: none;
	animation: path-draw 500ms var(--ease-out) 1100ms forwards;
}

/* Fill polygon — fades in as body drawing finishes */
.lp-fill {
	fill: var(--c-clay-soft);
	opacity: 0;
	animation: lp-fade-in 350ms ease 1000ms forwards;
}

/* ── Tagline — rises after fold draws ── */
.lp-loader__text {
	font-family: var(--f-display);
	font-weight: 500;
	font-size: var(--t-sm);
	color: var(--c-ink-mid);
	letter-spacing: 0.04em;
	opacity: 0;
	animation: lp-text-rise 400ms var(--ease-out) 1400ms forwards;
}

/* ── Keyframes ── */
@keyframes path-draw {
	to { stroke-dashoffset: 0; }
}
@keyframes lp-fade-in {
	to { opacity: 1; }
}
@keyframes lp-logo-reveal {
	from { opacity: 0; transform: scale(0.7); }
	to   { opacity: 1; transform: scale(1.0); }
}
@keyframes lp-text-rise {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Reduced motion — skip drawing, show instantly ── */
@media (prefers-reduced-motion: reduce) {
	.lp-body,
	.lp-fold,
	.lp-fill,
	.lp-loader__logo,
	.lp-loader__text {
		animation: none;
		stroke-dashoffset: 0;
		opacity: 1;
	}
	.lp-loader.is-exiting {
		animation: none;
		opacity: 0;
		transition: opacity 200ms ease;
	}
}

/* ───────────────────────────────────────────────
   21. Hero: remove ken-burns (replaced by JS parallax)
   ─────────────────────────────────────────────── */
.hero__img {
	animation: none;
}

/* ───────────────────────────────────────────────
   22. About: stat counters
   ─────────────────────────────────────────────── */
.about__stats {
	display: flex;
	gap: var(--sp-8);
	margin-block: var(--sp-8) var(--sp-6);
}

.about__stat {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

.about__stat-value {
	font-family: var(--f-display);
	font-weight: 500;
	font-size: var(--t-2xl);
	color: var(--c-clay);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.about__stat-label {
	font-size: var(--t-xs);
	color: var(--c-ink-soft);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ───────────────────────────────────────────────
   23. Menu: tabular nums + stagger + hover
   ─────────────────────────────────────────────── */
.menu-item__price {
	font-variant-numeric: tabular-nums;
}

/* Items start hidden — revealed by parent .menu-cat gaining .is-visible */
.menu-item {
	opacity: 0;
	transform: translateX(-10px);
	transition: background-color 150ms ease;
}

.menu-cat.is-visible .menu-item {
	animation: item-slide-in 350ms var(--ease-out) both;
}

/* Stagger: up to 9 items */
.menu-cat.is-visible .menu-item:nth-child(1) { animation-delay:  30ms; }
.menu-cat.is-visible .menu-item:nth-child(2) { animation-delay:  80ms; }
.menu-cat.is-visible .menu-item:nth-child(3) { animation-delay: 130ms; }
.menu-cat.is-visible .menu-item:nth-child(4) { animation-delay: 180ms; }
.menu-cat.is-visible .menu-item:nth-child(5) { animation-delay: 220ms; }
.menu-cat.is-visible .menu-item:nth-child(6) { animation-delay: 260ms; }
.menu-cat.is-visible .menu-item:nth-child(7) { animation-delay: 300ms; }
.menu-cat.is-visible .menu-item:nth-child(8) { animation-delay: 340ms; }
.menu-cat.is-visible .menu-item:nth-child(9) { animation-delay: 380ms; }

@keyframes item-slide-in {
	from { opacity: 0; transform: translateX(-10px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* Hover micro on each row — transition added here (opacity/transform handled by animation above) */
.menu-item:hover {
	background-color: var(--c-base-mid);
}
.menu-item:hover .menu-item__price {
	color: var(--c-clay);
}

/* ───────────────────────────────────────────────
   24. Reviews: per-card stagger
   ─────────────────────────────────────────────── */
.reviews__grid .review-card {
	opacity: 0;
	transform: translateY(20px);
}
.reviews__grid .review-card.is-visible {
	animation: card-rise 480ms var(--ease-out) both;
}
.reviews__grid .review-card:nth-child(2).is-visible { animation-delay:  90ms; }
.reviews__grid .review-card:nth-child(3).is-visible { animation-delay: 180ms; }
.reviews__grid .review-card:nth-child(4).is-visible { animation-delay: 270ms; }

@keyframes card-rise {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ───────────────────────────────────────────────
   25. Seasonal snowflake: slow continuous spin
   ─────────────────────────────────────────────── */
.menu-cat--seasonal .icon-svg {
	animation: snowflake-spin 10s linear infinite;
	transform-origin: center center;
}

@keyframes snowflake-spin {
	to { transform: rotate(360deg); }
}

/* ───────────────────────────────────────────────
   26. Custom Leaflet map marker
   ─────────────────────────────────────────────── */
.lepimy-marker {
	width: 44px;
	height: 52px;
	background: var(--c-clay);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px oklch(62% 0.115 46 / 0.45);
	transition: transform 200ms var(--ease-out), box-shadow 200ms ease;
}
.lepimy-marker:hover {
	transform: rotate(-45deg) scale(1.1);
	box-shadow: 0 6px 20px oklch(62% 0.115 46 / 0.55);
}
.lepimy-marker svg {
	transform: rotate(45deg);
	width: 22px;
	height: 12px;
	flex-shrink: 0;
}

/* ───────────────────────────────────────────────
   27. About image: clip overflow for hover scale
   ─────────────────────────────────────────────── */
.about__image-wrap {
	overflow: hidden; /* clip hover scale overflow */
}

/* ───────────────────────────────────────────────
   28. Reduced motion overrides for new features
   ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.menu-item {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
	.reviews__grid .review-card {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
	.menu-cat--seasonal .icon-svg {
		animation: none !important;
	}
	.hero__img {
		will-change: auto;
	}
	/* Reduced motion — desktop keeps scale, mobile shows full plate */
	@media (min-width: 900px) {
		.hero__img {
			transform: scale(1.28) !important;
		}
	}
	.about__image {
		transform: none !important;
	}
}

/* ───────────────────────────────────────────────
   23. Background ambient — soft color atmosphere
   ─────────────────────────────────────────────── */

/* ── About / location: static SVG blobs, pointer-events blocked, no animation ── */
/* Sections need position:relative to contain the absolute blob */
.about    { position: relative; }
.location { position: relative; overflow: hidden; }

/* Grids stack above blob (DOM order is sufficient — no z-index needed) */
.about__grid     { position: relative; }
.location__inner { position: relative; }

.bg-ambient {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
}

.bg-ambient svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Blob fills — rgba fallback first, oklch for supporting browsers */
.blob--about {
	fill: rgba(210, 178, 150, 0.28);
	fill: oklch(82% 0.042 54 / 0.28);
}
.blob--location {
	fill: rgba(225, 200, 170, 0.22);
	fill: oklch(87% 0.030 64 / 0.22);
}

/* No animations — zero compositing cost, one-time rasterization */

/* ───────────────────────────────────────────────
   24. Custom pierogi cursor
   ─────────────────────────────────────────────── */

/* Hide native cursor on pointer (mouse) devices — must cover all elements
   that set their own cursor (a, button default to pointer) */
@media (pointer: fine) {
	html, html *, html *::before, html *::after { cursor: none !important; }
}

#lp-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	pointer-events: none;
	user-select: none;
	/* opacity separate from transform — no lag on movement */
	opacity: 0;
	transition: opacity 180ms ease;
}

#lp-cursor.is-visible {
	opacity: 1;
}

/* SVG handles the hover scale — div itself never transitions (would lag) */
#lp-cursor svg {
	display: block;
	transition: transform 180ms var(--ease-out), filter 180ms ease;
	transform-origin: center;
	overflow: visible;
}

#lp-cursor.is-hovering svg {
	transform: scale(1.22);
}

/* Touch / coarse pointer: restore native cursor, hide element */
@media (pointer: coarse) {
	html { cursor: auto !important; }
	#lp-cursor { display: none !important; }
}