/* =========================================================
   TIVOLI — menu.css
   Menu page only (enqueued conditionally). Builds entirely on the
   existing design tokens from base.css — no new colors, radii,
   spacing scale or fonts introduced here.
   ========================================================= */

/* ---------- Highlights bar ---------- */
.menu-highlights .pizza-card__price {
	white-space: nowrap;
}

/* ---------- Quick category nav (primary: Pizza/Burgery/…) ---------- */
.menu-quicknav {
	position: sticky;
	/* Sits directly under the sticky site header (89px tall unscrolled,
	   61px once .is-scrolled shrinks the logo/padding — see header.css)
	   so it never overlaps or hides behind it. */
	top: 89px;
	z-index: 40;
	background: rgba(247, 242, 228, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--color-cream-line);
	transition: top var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled ~ main .menu-quicknav {
	top: 61px;
}

.menu-quicknav__inner {
	padding-block: var(--space-sm);
}

.menu-quicknav__list {
	display: flex;
	gap: var(--space-2xs);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 2px;
}

.menu-quicknav__list::-webkit-scrollbar {
	display: none;
}

.menu-quicknav__item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 0.6em 1.15em;
	border-radius: var(--radius-full);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--color-ink);
	background: var(--color-cream-soft);
	border: 1px solid var(--color-cream-line);
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.menu-quicknav__item:hover {
	border-color: var(--color-green-700);
}

/* ETAP 17E (§16) — no .menu-quicknav__item/.pizza-subnav__item rule
   removes the browser default outline (confirmed by grep, same as the
   ETAP 17C audit for the rest of the theme), so keyboard focus was
   never literally invisible — this replaces the generic default with
   the same on-brand ring already used for .site-nav__list a/.account-link
   etc. (header.css, ETAP 17C), for visual consistency on this page too. */
.menu-quicknav__item:focus-visible,
.pizza-subnav__item:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--color-green-700);
}

.menu-quicknav__item.is-active {
	background: var(--color-green-700);
	border-color: var(--color-green-700);
	color: var(--color-cream);
}

/* ETAP 17E (audyt 17A/17E) — .menu-category (Pizza subgroups) already
   had this compensation (below); the primary quicknav's five top-level
   chips (Pizza/Burgery/Zapiekanki/Dania/Napoje) jump to .menu-section
   instead — that selector never had this rule at all, so clicking e.g.
   "Burgery" could land its heading right under the sticky header +
   sticky quicknav. Same value/rationale as .menu-category below and
   .order-section in order.css (ETAP 17B). */
.menu-section {
	scroll-margin-top: 170px;
}

/* ---------- Category groups ---------- */
.menu-category {
	/* Clears both sticky bars (site header ~89px + quicknav ~69px)
	   plus a little breathing room, so an anchor jump never lands a
	   category heading underneath them. */
	scroll-margin-top: 170px;
}

.menu-category + .menu-category {
	/* ~33% tighter than the old 2xl gap — fewer empty screens of
	   scrolling between the 7 pizza subgroups. */
	margin-top: var(--space-xl);
}

.menu-category__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
	padding-bottom: var(--space-xs);
	border-bottom: 2px solid var(--color-green-700);
}

.menu-category__title {
	font-size: clamp(1.65rem, 1.4rem + 1vw, 2.25rem);
}

/* Nested subgroup heading (e.g. "Dla małych smakoszy" inside Dania) —
   same idea, deliberately smaller so the hierarchy stays clear. */
.menu-category__head--sub {
	border-bottom-color: var(--color-cream-line);
	margin-bottom: var(--space-md);
}

.menu-category__title--sub {
	font-size: var(--fs-h4);
	color: var(--color-green-800);
}

/* Gives the *first* subgroup breathing room under the parent category
   heading too — the `.menu-category + .menu-category` rule above only
   covers the gap between subsequent subgroups. */
.menu-subgroup {
	margin-top: var(--space-xl);
}

.menu-category__count {
	flex-shrink: 0;
	font-size: 0.82rem;
	color: var(--color-text-muted);
}

/* ---------- Pizza row list ---------- */
.menu-list {
	display: flex;
	flex-direction: column;
}

.menu-row {
	display: grid;
	grid-template-columns: 2.25rem 1fr auto;
	align-items: start;
	column-gap: var(--space-md);
	padding-block: 0.85rem;
	border-bottom: 1px solid var(--color-cream-line);
	border-radius: var(--radius-sm);
	transition: background var(--dur-fast) var(--ease-out);
}

.menu-row:hover {
	background: var(--color-cream-deep);
}

.menu-category .menu-list .menu-row:last-child {
	border-bottom: none;
}

.menu-row__num {
	padding-top: 0.25em;
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-gold-deep);
}

.menu-row__info {
	min-width: 0;
}

.menu-row__name-line {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.45em;
}

.menu-row__name {
	font-size: 1.25rem;
	font-weight: 600;
}

.menu-row__popular {
	display: inline-flex;
	color: var(--color-gold);
}

.menu-row__popular svg {
	width: 1rem;
	height: 1rem;
}

.menu-row__ingredients {
	margin-top: 0.3em;
	font-size: 0.96rem;
	line-height: 1.55;
	color: var(--color-text-muted);
}

/* Fixed-width, equal 4-column grid so Mała/Średnia/Duża/Mega line up
   identically across every one of the 32 rows — reads like a clean
   price table without adding heavy borders.
   Columns use an explicit length (not `1fr`) on purpose: `1fr` tracks
   keep an implicit content-based minimum, so a row with a wider price
   ("90,50 zł") would push its own columns out of line with every
   other row — each `.menu-row__prices` is a separate grid, so that
   drift compounds across all 32 rows instead of cancelling out. */
.menu-row__prices {
	display: grid;
	grid-template-columns: repeat(4, 4.75rem);
	column-gap: var(--space-xs);
	width: 21.25rem;
	flex-shrink: 0;
	padding-top: 0.15em;
}

.menu-row__price {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.menu-row__price-size {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	white-space: nowrap;
}

.menu-row__price-amount {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.12rem;
	color: var(--color-green-700);
	white-space: nowrap;
}

/* ---------- Responsive: pizza rows ---------- */
@media (max-width: 640px) {
	.menu-row {
		grid-template-columns: 1.75rem 1fr;
		row-gap: 0.4rem;
	}

	.menu-row__prices {
		grid-column: 1 / -1;
		grid-template-columns: repeat(2, 1fr);
		width: auto;
		row-gap: 0.5rem;
		padding-top: 0.3rem;
		padding-left: calc(1.75rem + var(--space-md));
	}

	.menu-row__price {
		align-items: flex-start;
		text-align: left;
	}

	.menu-category__head {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--space-3xs);
	}
}

@media (max-width: 480px) {
	.menu-row__prices {
		padding-left: 0;
	}
}

/* ---------- Pizza size panel (shown once, above the list) ---------- */
.size-panel {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: var(--space-lg);
	border: 1px solid var(--color-cream-line);
	border-radius: var(--radius-lg);
	background: var(--color-cream-soft);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.size-panel__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3em;
	padding: var(--space-md) var(--space-sm);
	text-align: center;
	border-right: 1px solid var(--color-cream-line);
}

.size-panel__item:last-child {
	border-right: none;
}

.size-panel__name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.2rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--color-green-800);
}

.size-panel__diameter {
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-gold-deep);
}

@media (max-width: 560px) {
	.size-panel {
		grid-template-columns: repeat(2, 1fr);
	}

	.size-panel__item {
		border-right: 1px solid var(--color-cream-line);
		border-bottom: 1px solid var(--color-cream-line);
	}

	.size-panel__item:nth-child(2n) {
		border-right: none;
	}

	.size-panel__item:nth-child(n+3) {
		border-bottom: none;
	}
}

/* ---------- Free sauces note ---------- */
.pizza-sauces-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	margin-bottom: var(--space-lg);
	padding: 0.85em 1.4em;
	border-radius: var(--radius-full);
	background: var(--color-gold-soft);
	color: var(--color-green-900);
	font-weight: 600;
	font-size: 0.95rem;
	text-align: center;
}

.pizza-sauces-note svg {
	width: 1.2rem;
	height: 1.2rem;
	flex-shrink: 0;
	color: var(--color-green-800);
}

@media (max-width: 560px) {
	.pizza-sauces-note {
		font-size: 0.85rem;
		padding: 0.75em 1em;
	}
}

/* ---------- Pizza subcategory chips (secondary, lightweight nav) ---------- */
.pizza-subnav {
	margin-bottom: var(--space-lg);
}

.pizza-subnav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2xs);
}

.pizza-subnav__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	/* ETAP 17E (§4) — was 0.48em/0.85rem (~32px tall), under a
	   comfortable touch target; bumped toward the primary quicknav's
	   own proportions (menu-quicknav__item above, ~38px) — this row
	   wraps instead of scrolling horizontally, so extra height costs
	   nothing layout-wise. */
	min-height: 40px;
	padding: 0.6em 1.1em;
	border-radius: var(--radius-full);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-green-700);
	background: transparent;
	border: 1px solid var(--color-green-700);
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.pizza-subnav__item:hover,
.pizza-subnav__item.is-active {
	background: var(--color-green-700);
	color: var(--color-cream);
}

/* ---------- Product card grid (Burgery / Zapiekanki / Dania) ---------- */
.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
}

.product-grid--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

/* Single-item "showcase" — e.g. Domowy specjał's one dish. Narrower
   and centered so a lone card doesn't stretch across the whole row. */
.product-grid--cols-1 {
	grid-template-columns: 1fr;
	max-width: var(--container-narrow);
	margin-inline: auto;
}

@media (max-width: 900px) {
	.product-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.product-grid,
	.product-grid--cols-2 {
		grid-template-columns: 1fr;
	}

	.product-grid--cols-1 {
		max-width: none;
	}
}

.product-card {
	display: flex;
	flex-direction: column;
	background: var(--color-cream-soft);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--dur-base) var(--ease-out);
}

.product-card:hover {
	box-shadow: var(--shadow-md);
}

/* ETAP 17E (§11) — was 4:3, while every other product photo in the
   theme (pizza-card__media, order-card__media, homepage/menu-preview)
   uses 1:1 — the same Burgery/Zapiekanki/Dania photo read as a
   differently-cropped, seemingly different asset depending on whether
   it was seen here or on /zamow-online/'s order-card__media for the
   exact same SKU. Aligned to the dominant 1:1 convention used
   everywhere else — CSS box only, no image files touched. */
.product-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--color-green-100);
}

.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-card__media-empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-green-500);
	opacity: 0.4;
}

.product-card__media-empty svg {
	width: 2.25rem;
	height: 2.25rem;
}

.product-card__body {
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	flex: 1;
}

.product-card__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-sm);
}

.product-card__name {
	font-size: 1.2rem;
	font-weight: 600;
}

/* Optional size badge (e.g. Zapiekanki's "35 cm") next to the name. */
.product-card__size {
	flex-shrink: 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-gold-deep);
	background: var(--color-gold-soft);
	padding: 0.25em 0.6em;
	border-radius: var(--radius-full);
}

.product-card__desc {
	font-size: 0.94rem;
	line-height: 1.55;
	color: var(--color-text-muted);
	flex: 1;
}

.product-card__price {
	margin-top: 0.3em;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--color-green-700);
}

/* Empty/placeholder card — visibly unfinished (dashed outline, muted
   text) so it can never be mistaken for a real, priced product. */
.product-card--empty {
	background: transparent;
	border: 1.5px dashed var(--color-cream-line);
	box-shadow: none;
}

.product-card--empty:hover {
	box-shadow: none;
	border-color: var(--color-green-500);
}

.product-card--empty .product-card__name,
.product-card--empty .product-card__desc,
.product-card--empty .product-card__price {
	color: var(--color-text-muted);
}

/* ---------- Compact drinks grid (Napoje) ---------- */
.drink-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: var(--space-xl);
}

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

.drink-row {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	padding-block: 0.75em;
	border-bottom: 1px dashed var(--color-cream-line);
}

.drink-row__name {
	font-size: 1rem;
	color: var(--color-ink);
}

.drink-row__leader {
	flex: 1;
	border-bottom: 1px dotted var(--color-cream-line);
	min-width: 1rem;
	transform: translateY(-0.3em);
}

.drink-row__price {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--color-green-700);
	white-space: nowrap;
}