/**
 * Storefront styles for the KitchenSync Menu and Menu Item blocks.
 *
 * Loaded on both the front end and in the editor (registered as `style` and
 * `editorStyle` in each block.json). The palette and type scale follow the
 * Tastemaker "Menu Item" Figma design (Inter; Primary #4B4EFC; Success/
 * Destructive/Warning pills; neutral grays), but every value is exposed as a
 * CSS custom property so a theme can re-skin the block without overriding
 * individual rules. Where the theme already provides a font, it is inherited.
 *
 * Layouts: each item article carries a `kitchensync-item--{horizontal|compact
 * |card}` modifier that selects its arrangement. The single-item block also
 * sets a matching modifier on its wrapper.
 */

.kitchensync-menu {
	/* Palette (Figma variables). */
	--ks-primary: #4b4efc;
	--ks-primary-50: #eef2ff;
	--ks-success: #22c55e;
	--ks-destructive: #ef4444;
	--ks-warning: #f59e0b;
	--ks-white: #fff;
	--ks-ink: #262626; /* Neutral/800 */
	--ks-ink-soft: #404040; /* Neutral/700 */
	--ks-muted: #737373; /* Neutral/500 */
	--ks-border: #e5e5e5; /* Neutral/200 */
	--ks-border-strong: #d4d4d4; /* Neutral/300 */
	--ks-surface-alt: #f5f5f5;

	/* Shape + rhythm. */
	--ks-radius-card: 16px;
	--ks-radius-media: 12px;
	--ks-radius-control: 10px;
	--ks-menu-gap: 1.5rem;
	--ks-item-gap: 1rem;

	color: var( --ks-ink );
}

/* ---- Menu (list) chrome ------------------------------------------------- */

/*
 * List container: wraps every section (the nav strip stays outside it). The
 * inspector-controlled list width / max-width / padding land here so they size
 * the menu independently of the nav. Centered when narrower than the block.
 */
.kitchensync-menu__list {
	width: var( --ks-menu-width, 100% );
	max-width: var( --ks-menu-max-width, none );
	padding: var( --ks-menu-padding, 0 );
	/* Inspector-controlled margin; default centers the list. */
	margin: var( --ks-menu-margin, 0 auto );
}

.kitchensync-menu__section {
	margin-block-end: var( --ks-menu-gap );
	/* The view script sets `--ks-scroll-margin` on the menu wrapper to match
	   the nav strip's height when sticky, so anchor jumps clear the bar. The
	   fallback (64px) keeps a sensible offset before JS runs / for non-nav
	   anchor links a theme might add. */
	scroll-margin-top: var( --ks-scroll-margin, 64px );
}

.kitchensync-menu__section-title {
	/* Space below the heading (gap to its items) is inspector-controlled via
	   `--ks-section-title-gap`; falls back to the design default. */
	margin: 0 0 var( --ks-section-title-gap, 0.75rem );
	padding-block-end: 0.35rem;
	border-block-end: 2px solid var( --ks-border );
}

/* ---- Section-anchor nav (Part B) --------------------------------------- */

/*
 * Sticky horizontal strip of section links above the menu. Hidden unless the
 * merchant turns it on in the inspector. Colors land via the merchant's
 * inspector pickers (PanelColorSettings) which the PHP layer inlines as
 * `--ks-nav-active-bg`, `--ks-nav-active-text`, `--ks-progress-fill` on the
 * menu wrapper; the values below are fallbacks for when no picker value is
 * set. Sticky offset reads `--ks-nav-offset` so a theme's own sticky header
 * can layer above the nav without overlap; defaults to 0.
 */
.kitchensync-menu__nav {
	--ks-nav-link-color: var( --ks-ink-soft );

	/*
	 * Merchant-controlled custom properties (--ks-nav-bg / --ks-nav-active-bg /
	 * --ks-nav-active-text / --ks-progress-fill / --ks-nav-width /
	 * --ks-nav-border / --ks-nav-shadow) are intentionally NOT declared here:
	 * PHP inlines them on the .kitchensync-menu wrapper (an ancestor); a
	 * local re-declaration would shadow the inherited value and the inspector
	 * controls would silently do nothing. Fallbacks live in the var()
	 * consumers below.
	 */

	position: relative;
	/* Merchant-controlled background (PHP inlines `--ks-nav-bg` on the wrapper);
	   defaults to white when unset. */
	background: var( --ks-nav-bg, var( --ks-white ) );
	z-index: 5;

	/* Inspector-controlled padding for the nav strip (separate from the list).
	   Default 0 keeps the existing look; the inner links carry their own
	   padding. */
	padding: var( --ks-nav-padding, 0 );

	/* Inspector-controlled width: PHP emits `--ks-nav-width: NN%` only when
	   the merchant picked something other than 100%; otherwise we keep the
	   default full-width strip. Centered when narrower. */
	width: var( --ks-nav-width, 100% );
	/* Inspector-controlled margin; the default keeps the strip centered with a
	   1rem gap below. A merchant-set margin overrides the auto-centering. */
	margin: var( --ks-nav-margin, 0 auto 1rem );

	/* Border: when the merchant configures a BorderControl value, PHP emits
	   a composed `--ks-nav-border: <width> <style> <color>` value that lands
	   on every side. The fallback keeps the original 1px bottom rule and
	   leaves the other sides bare so an un-configured nav still has its
	   visual separator. */
	border: var( --ks-nav-border, 0 none transparent );
	border-block-end: var( --ks-nav-border, 1px solid var( --ks-border ) );

	/* Shadow: PHP maps the preset key to a `box-shadow` value, else none. */
	box-shadow: var( --ks-nav-shadow, none );
}

.kitchensync-menu__nav--sticky {
	position: sticky;
	top: var( --ks-nav-offset, 0px );
}

/* Optional separate mobile sticky offset; falls back to the desktop offset
   when the merchant leaves the mobile field blank. */
@media ( max-width: 600px ) {
	.kitchensync-menu__nav--sticky {
		top: var( --ks-nav-offset-mobile, var( --ks-nav-offset, 0px ) );
	}
}

.kitchensync-menu__nav-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.kitchensync-menu__nav-scroll::-webkit-scrollbar {
	display: none;
}

.kitchensync-menu__nav-links {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0.25rem;
	display: flex;
	gap: 0.25rem;
	white-space: nowrap;
}

.kitchensync-menu__nav-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kitchensync-menu__nav-link {
	display: inline-block;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	color: var( --ks-nav-link-color );
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease;
}

.kitchensync-menu__nav-link:hover,
.kitchensync-menu__nav-link:focus-visible {
	background: var( --ks-nav-hover-bg, var( --ks-primary-50 ) );
	color: var( --ks-nav-hover-text, var( --ks-ink ) );
}

.kitchensync-menu__nav-link.is-active,
.kitchensync-menu__nav-link[aria-current="true"] {
	background: var( --ks-nav-active-bg, var( --ks-primary ) );
	color: var( --ks-nav-active-text, var( --ks-white ) );
}

.kitchensync-menu__nav-progress-track {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: transparent;
	pointer-events: none;
}

.kitchensync-menu__nav-progress-fill {
	height: 100%;
	width: 0;
	background: var( --ks-progress-fill, var( --ks-primary ) );
	transition: width 80ms linear;
}

@media ( prefers-reduced-motion: reduce ) {
	.kitchensync-menu__nav-link,
	.kitchensync-menu__nav-progress-fill {
		transition: none;
	}
}

.kitchensync-menu__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var( --ks-item-gap );
	/* Column count from the block's Columns control (1–3). PHP inlines
	   `--ks-menu-columns` on the wrapper only when > 1; default is a single
	   column. `minmax(0, 1fr)` lets columns shrink below their content width
	   so long item names don't blow out the track. */
	grid-template-columns: repeat( var( --ks-menu-columns, 1 ), minmax( 0, 1fr ) );
}

.kitchensync-menu__item-li {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
}

.kitchensync-menu__item-li > .kitchensync-menu__item {
	width: 100%;
}

/* Card layout in the full menu fans items out into a responsive grid rather
   than a single stacked column. When the Columns control is set (> 1), its
   explicit count wins; otherwise card falls back to responsive auto-fill. */
.kitchensync-menu--card .kitchensync-menu__items {
	grid-template-columns: repeat(
		var( --ks-menu-columns, auto-fill ),
		minmax( 15rem, 1fr )
	);
}

/* Compact layout collapses the inter-item gap; each row carries its own
   divider, so the grid gap would double the spacing. */
.kitchensync-menu--compact .kitchensync-menu__items {
	gap: 0;
}

/* Collapse every layout to a single column on phones, regardless of the
   chosen Columns count — multi-column menu rows are unreadable on narrow
   viewports, and a card grid with an explicit count would otherwise force
   tracks wider than the screen and overflow horizontally. Declared after the
   `--card` grid rule above so it wins on source order at equal specificity. */
@media ( max-width: 600px ) {
	.kitchensync-menu__items,
	.kitchensync-menu--card .kitchensync-menu__items {
		grid-template-columns: 1fr;
	}

	/* Stack the default horizontal item (image-left / body-right) into an
	   image-on-top column on phones — the side-by-side row is too cramped on
	   narrow screens. Card already stacks; compact stays a dense row. The
	   two-class selector beats core/group's single-class `flex-direction: row`
	   on the bound row regardless of source order. */
	.kitchensync-menu--horizontal .kitchensync-menu__row {
		flex-direction: column;
		align-items: stretch;
	}

	.kitchensync-menu--horizontal .kitchensync-menu__bound-image {
		width: 100%;
	}

	.kitchensync-menu--horizontal .kitchensync-menu__bound-image img {
		width: 100%;
		height: auto;
	}
}

/* ---- Item article (shared) --------------------------------------------- */

.kitchensync-menu__item {
	position: relative;
	display: flex;
	gap: 1rem;
	box-sizing: border-box;
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/*
 * Phase 3.2: the single Menu Item block's article is a *vertical* stack —
 * pills row, the bound `core/group` tree (which handles its own image-vs-
 * body row), the utility row (price + icon toggles), then the gallery /
 * nutrition panels at the bottom. The list-block items keep the legacy
 * `display: flex; gap: 1rem;` row layout from the rule above. Two-class
 * specificity wins over the single-class default.
 */
.kitchensync-menu--single.kitchensync-menu__item {
	flex-direction: column;
	gap: 0.75rem;
}

/*
 * The bound `core/image` inside the outer Group needs a sane default width
 * so it doesn't push the body off-screen when the merchant first inserts
 * the block — core/image renders at the full source-image size by default.
 * `:where()` keeps this at zero specificity so the merchant's own width /
 * sizeSlug / aspect-ratio choices override.
 */
:where( .kitchensync-menu--single .kitchensync-menu__bound-image ) {
	flex: 0 0 auto;
	width: 200px;
}

:where( .kitchensync-menu--single .kitchensync-menu__bound-image img ) {
	width: 100%;
	height: auto;
	border-radius: var( --ks-radius-media );
}

/*
 * Phase 3.4 footer row: price (left) + bound buttons group (right). Both
 * pieces are native blocks now — a `core/paragraph` bound to `priceHtml`
 * and a `core/buttons` carrying three `core/button`s (gallery / nutrition
 * / Order). Layout, gap, justify, vertical alignment all flow from the
 * merchant's Group block Layout panel. We only define zero-specificity
 * defaults so an unstyled block lands in the right shape out of the box.
 *
 * When a button's bound URL field returns null (no gallery / no nutrition
 * data / no external URL / sold-out) the `render_block_core/button`
 * filter in MenuItemBindingsSource drops the rendered subtree entirely —
 * no CSS hide tricks, no leftover empty `<a>`.
 */
/*
 * The footer-row nests inside the bound body group (which flows vertically),
 * so its `flex: 1 1 auto` here only governs its OWN child layout (the price
 * paragraph + the buttons cluster). `margin-block-start: auto` pushes it to
 * the bottom of the body column when the description is short — matches the
 * Figma reference where the price/buttons hug the bottom of the card.
 */
:where(.kitchensync-menu__footer-row) {
	width: 100%;
	align-items: center;
	margin-block-start: auto;
}

:where(.kitchensync-menu__bound-price) {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--ks-primary);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

:where(.kitchensync-menu__bound-price del) {
	color: var(--ks-muted);
	margin-inline-end: 0.35rem;
	font-size: 0.95rem;
	text-decoration: line-through;
}

/*
 * Icon-style buttons (gallery + nutrition) inside the bound buttons group.
 * Each is a native `core/button`, so its colors / radius / shadow come from
 * the merchant's Button block defaults. We just need to (a) keep the link
 * text accessible to screen readers while hiding it visually, and (b) paint
 * the right SVG icon over it. CSS mask-image inherits the button's current
 * text color, so an unstyled icon button matches a styled neighbour exactly.
 */
.kitchensync-menu__btn-icon .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	font-size: 0;
	line-height: 0;
}

.kitchensync-menu__btn-icon .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentColor;
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-position: center;
}

/* FA Pro 7 — gallery icon, viewBox 0 0 576 512 (mirrors BlockRegistrar::icon('gallery')). */
.kitchensync-menu__btn-gallery .wp-block-button__link::before {
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><path d='M160 64c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l320 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32L160 64zM96 96c0-35.3 28.7-64 64-64l320 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-320 0c-35.3 0-64-28.7-64-64L96 96zM32 144l0 304c0 17.7 14.3 32 32 32l368 0c8.8 0 16 7.2 16 16s-7.2 16-16 16L64 512c-35.3 0-64-28.7-64-64L0 144c0-8.8 7.2-16 16-16s16 7.2 16 16zm176-16a16 16 0 1 0 0 32 16 16 0 1 0 0-32zm48 16a48 48 0 1 1 -96 0 48 48 0 1 1 96 0zm89.3 51.7l-38.6 60c-2.8 4.4-7.6 7.1-12.9 7.3s-10.2-2.2-13.4-6.4l-10.1-13.4c-1.5-2-3.9-3.2-6.4-3.2s-4.9 1.2-6.4 3.2l-48 64c-1.8 2.4-2.1 5.7-.8 8.4S213 320 216 320l208 0c2.9 0 5.6-1.6 7-4.2s1.3-5.7-.3-8.2l-72-112c-1.5-2.3-4-3.7-6.7-3.7s-5.3 1.4-6.7 3.7zM352 160c13.6 0 26.3 6.9 33.6 18.4l72 112c7.9 12.3 8.5 28 1.5 40.8S438.6 352 424 352l-208 0c-15.2 0-29-8.6-35.8-22.1s-5.3-29.8 3.8-41.9l48-64c7.6-10.1 19.4-16 32-16 10.5 0 20.6 4.2 28 11.4l26.4-41c7.4-11.4 20-18.4 33.6-18.4z'/></svg>");
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><path d='M160 64c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l320 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32L160 64zM96 96c0-35.3 28.7-64 64-64l320 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-320 0c-35.3 0-64-28.7-64-64L96 96zM32 144l0 304c0 17.7 14.3 32 32 32l368 0c8.8 0 16 7.2 16 16s-7.2 16-16 16L64 512c-35.3 0-64-28.7-64-64L0 144c0-8.8 7.2-16 16-16s16 7.2 16 16zm176-16a16 16 0 1 0 0 32 16 16 0 1 0 0-32zm48 16a48 48 0 1 1 -96 0 48 48 0 1 1 96 0zm89.3 51.7l-38.6 60c-2.8 4.4-7.6 7.1-12.9 7.3s-10.2-2.2-13.4-6.4l-10.1-13.4c-1.5-2-3.9-3.2-6.4-3.2s-4.9 1.2-6.4 3.2l-48 64c-1.8 2.4-2.1 5.7-.8 8.4S213 320 216 320l208 0c2.9 0 5.6-1.6 7-4.2s1.3-5.7-.3-8.2l-72-112c-1.5-2.3-4-3.7-6.7-3.7s-5.3 1.4-6.7 3.7zM352 160c13.6 0 26.3 6.9 33.6 18.4l72 112c7.9 12.3 8.5 28 1.5 40.8S438.6 352 424 352l-208 0c-15.2 0-29-8.6-35.8-22.1s-5.3-29.8 3.8-41.9l48-64c7.6-10.1 19.4-16 32-16 10.5 0 20.6 4.2 28 11.4l26.4-41c7.4-11.4 20-18.4 33.6-18.4z'/></svg>");
}

/* FA Pro 7 — heart-pulse icon, viewBox 0 0 512 512 (mirrors BlockRegistrar::icon('heart-pulse')). */
.kitchensync-menu__btn-nutrition .wp-block-button__link::before {
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M378.9 64c-32.4 0-62.9 15.6-81.9 41.9l-28 38.7c-3 4.2-7.8 6.6-13 6.6s-10-2.5-13-6.6l-28-38.7C196.1 79.6 165.6 64 133.1 64 77.3 64 32 109.3 32 165.1 32 202.5 47.9 238.5 69.8 272l53.6 0c6.3 0 12-3.7 14.6-9.4l31.5-69.2c2.5-5.6 8-9.2 14.1-9.4s11.8 3.1 14.6 8.5l58.9 111.3 49.3-80.2c3-4.8 8.2-7.7 13.9-7.6s10.8 3.2 13.6 8.1l22.8 39.9c2.8 5 8.2 8.1 13.9 8.1l71.7 0C464.1 238.5 480 202.5 480 165.1 480 109.3 434.7 64 378.9 64zM448 304l-77.4 0c-17.2 0-33.1-9.2-41.7-24.2l-9.4-16.5-49.9 81c-3 4.9-8.4 7.8-14.1 7.6s-10.9-3.4-13.6-8.5l-56.8-107.2-18 39.6C159.3 293 142.2 304 123.4 304l-70.5 0C24.5 264.2 0 216.9 0 165.1 0 91.6 59.6 32 133.1 32 175.8 32 216 52.5 241 87.1l15 20.7 15-20.7C296 52.5 336.2 32 378.9 32 452.4 32 512 91.6 512 165.1 512 216.9 487.5 264.2 459.1 304L448 304zM91 352l43.2 0c34.6 36.6 71.1 67.9 98.1 88.5 6.2 4.8 14.4 7.5 23.7 7.5s17.4-2.7 23.7-7.5c27-20.6 63.5-51.9 98.1-88.5l43.2 0c-41.5 47.6-88.7 88.5-121.9 113.9-12.4 9.4-27.6 14.1-43.1 14.1s-30.8-4.6-43.1-14.1C179.6 440.5 132.5 399.6 91 352z'/></svg>");
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M378.9 64c-32.4 0-62.9 15.6-81.9 41.9l-28 38.7c-3 4.2-7.8 6.6-13 6.6s-10-2.5-13-6.6l-28-38.7C196.1 79.6 165.6 64 133.1 64 77.3 64 32 109.3 32 165.1 32 202.5 47.9 238.5 69.8 272l53.6 0c6.3 0 12-3.7 14.6-9.4l31.5-69.2c2.5-5.6 8-9.2 14.1-9.4s11.8 3.1 14.6 8.5l58.9 111.3 49.3-80.2c3-4.8 8.2-7.7 13.9-7.6s10.8 3.2 13.6 8.1l22.8 39.9c2.8 5 8.2 8.1 13.9 8.1l71.7 0C464.1 238.5 480 202.5 480 165.1 480 109.3 434.7 64 378.9 64zM448 304l-77.4 0c-17.2 0-33.1-9.2-41.7-24.2l-9.4-16.5-49.9 81c-3 4.9-8.4 7.8-14.1 7.6s-10.9-3.4-13.6-8.5l-56.8-107.2-18 39.6C159.3 293 142.2 304 123.4 304l-70.5 0C24.5 264.2 0 216.9 0 165.1 0 91.6 59.6 32 133.1 32 175.8 32 216 52.5 241 87.1l15 20.7 15-20.7C296 52.5 336.2 32 378.9 32 452.4 32 512 91.6 512 165.1 512 216.9 487.5 264.2 459.1 304L448 304zM91 352l43.2 0c34.6 36.6 71.1 67.9 98.1 88.5 6.2 4.8 14.4 7.5 23.7 7.5s17.4-2.7 23.7-7.5c27-20.6 63.5-51.9 98.1-88.5l43.2 0c-41.5 47.6-88.7 88.5-121.9 113.9-12.4 9.4-27.6 14.1-43.1 14.1s-30.8-4.6-43.1-14.1C179.6 440.5 132.5 399.6 91 352z'/></svg>");
}

.kitchensync-menu__item *,
.kitchensync-menu__item *::before,
.kitchensync-menu__item *::after {
	box-sizing: border-box;
}

.kitchensync-menu__media-col {
	flex: 0 0 auto;
}

.kitchensync-menu__media {
	margin: 0;
	overflow: hidden;
	border-radius: var( --ks-radius-media );
	background: var( --ks-surface-alt );
}

.kitchensync-menu__media-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Placeholder shown when "Show image" is on but the item has no thumbnail
 * (and no gallery first-frame). Keeps the layout's image column from
 * collapsing and gives the merchant a visible "image will go here" signal.
 */
.kitchensync-menu__media-placeholder {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	background: var( --ks-surface-alt );
	color: var( --ks-muted );
}

/*
 * On the single-item block the parent `<figure class="kitchensync-menu__media">`
 * for horizontal/compact has explicit 88px / 56px dimensions, so the
 * placeholder inside it inherits those automatically. On the card layout
 * the figure is 100% × 200px, ditto. No min-height on the placeholder
 * itself — that pushed past the parent and dragged the body to its own row.
 */

.kitchensync-menu__media-placeholder svg {
	width: 36%;
	max-width: 56px;
	height: auto;
	opacity: 0.65;
}

.kitchensync-menu__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* ---- Tag pills ---------------------------------------------------------- */

.kitchensync-menu__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.kitchensync-menu__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4;
	color: var( --ks-white );
	white-space: nowrap;
}

.kitchensync-menu__tag .kitchensync-menu__icon {
	width: 13px;
	height: 13px;
}

.kitchensync-menu__tag--diet {
	background: var( --ks-success );
}

.kitchensync-menu__tag--popular {
	background: var( --ks-warning );
}

/* ---- Head: title + count badge ----------------------------------------- */

.kitchensync-menu__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/*
 * Phase 3 (bindings): the item title now renders as a native `core/heading`
 * (bound to the picked item's title) and inherits the merchant's typography /
 * color choices from core block supports. The legacy `.kitchensync-menu__title`
 * selector survives only as a fallback for unmigrated blocks; we deliberately
 * stop styling it so theme + user settings win on freshly-saved blocks. The
 * .__head wrapper still positions the heading next to the photo-count badge.
 */
.kitchensync-menu__title {
	font: inherit;
	color: inherit;
}

.kitchensync-menu__count {
	margin-inline-start: auto;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 0.4rem;
	border: 0;
	border-radius: 999px;
	background: var( --ks-primary-50 );
	color: var( --ks-primary );
	font-size: 0.75rem;
	font-weight: 600;
	cursor: pointer;
}

/*
 * Phase 3: the description is now a native `core/paragraph` bound to the
 * item's excerpt. The merchant's typography/color choices win — we only zero
 * the legacy class's margin so unmigrated blocks don't double-spacing.
 */
.kitchensync-menu__description {
	margin: 0;
}

/* ---- Footer: price + actions ------------------------------------------- */

.kitchensync-menu__footer {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block-start: auto;
}

.kitchensync-menu__price {
	font-size: 1.125rem;
	font-weight: 600;
	color: var( --ks-primary );
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.kitchensync-menu__price-original {
	color: var( --ks-muted );
	margin-inline-end: 0.35rem;
	font-size: 0.95rem;
}

.kitchensync-menu__price-sale {
	text-decoration: none;
}

.kitchensync-menu__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-inline-start: auto;
}

.kitchensync-menu__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: var( --ks-radius-control );
	background: var( --ks-primary-50 );
	color: var( --ks-primary );
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.kitchensync-menu__icon-btn:hover,
.kitchensync-menu__icon-btn[aria-expanded='true'] {
	background: #e0e6ff;
}

/*
 * Phase 3: the CTA is now a native `core/button` block (URL bound to the
 * item's external_order_url). Its appearance is driven by the merchant's
 * Button block settings + theme defaults; we don't restyle it here. The
 * legacy `.kitchensync-menu__cta` class only renders on unmigrated blocks
 * via the render-callback fallback, so we keep the bare minimum (inline-flex
 * for icon + label) and let everything else cascade.
 */
.kitchensync-menu__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
}

/* ---- Sold-out + badges -------------------------------------------------- */

.kitchensync-menu__badge {
	display: inline-block;
	font-size: 0.7rem;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	border: 1px solid var( --ks-border-strong );
	color: var( --ks-muted );
	white-space: nowrap;
}

/* Sold-out: solid red with white text for at-a-glance recognition. */
.kitchensync-menu__badge--soldout {
	background: #c92a2a;
	border-color: #c92a2a;
	color: #ffffff;
	white-space: nowrap;
}

.kitchensync-menu__item.is-sold-out {
	opacity: 0.6;
}

/* ---- Gallery carousel --------------------------------------------------- */

.kitchensync-menu__gallery {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: 0.75rem;
	padding: 0.6rem;
	border-radius: var( --ks-radius-media );
	background: var( --ks-surface-alt );
}

.kitchensync-menu__gallery[hidden] {
	display: none;
}

.kitchensync-menu__thumbs {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	flex: 1 1 auto;
	scroll-behavior: smooth;
}

.kitchensync-menu__thumb {
	flex: 0 0 auto;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: var( --ks-white );
	cursor: pointer;
}

.kitchensync-menu__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kitchensync-menu__thumb.is-selected {
	border-color: var( --ks-primary );
}

.kitchensync-menu__gallery-nav,
.kitchensync-menu__gallery-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var( --ks-white );
	color: var( --ks-primary );
	cursor: pointer;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.12 );
}

.kitchensync-menu__gallery-close {
	color: var( --ks-muted );
	box-shadow: none;
	background: transparent;
}

/* ---- Nutrition panel ---------------------------------------------------- */

.kitchensync-menu__nutrition {
	margin-block-start: 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid var( --ks-border );
	border-radius: var( --ks-radius-media );
}

.kitchensync-menu__nutrition[hidden] {
	display: none;
}

.kitchensync-menu__nutrition-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.2rem 0;
	font-size: 0.875rem;
}

.kitchensync-menu__nutrition-label {
	color: var( --ks-muted );
}

.kitchensync-menu__nutrition-value {
	color: var( --ks-ink );
	font-weight: 600;
}

/* ---- Layout: horizontal (default) -------------------------------------- */

/*
 * `:where()` is zero-specificity, so when the merchant adds border / radius
 * via the block-supports panel WP's style engine wins and we don't double
 * up. The defaults below ship the Figma card look out of the box for any
 * merchant who never touches the border control.
 */
:where( .kitchensync-item--horizontal ) {
	align-items: stretch;
	padding: 1rem;
	border: 1px solid var( --ks-border );
	border-radius: var( --ks-radius-card );
	background: var( --ks-white );
}

.kitchensync-item--horizontal .kitchensync-menu__media {
	width: 120px;
	height: 120px;
}

/* The gallery + nutrition panels are siblings of media/body inside the flex
   article; let them span the full width below the main row. */
.kitchensync-item--horizontal .kitchensync-menu__gallery,
.kitchensync-item--horizontal .kitchensync-menu__nutrition,
.kitchensync-item--card .kitchensync-menu__gallery,
.kitchensync-item--card .kitchensync-menu__nutrition,
.kitchensync-item--compact .kitchensync-menu__gallery,
.kitchensync-item--compact .kitchensync-menu__nutrition {
	flex-basis: 100%;
	width: 100%;
	order: 2;
}

/*
 * Horizontal + compact layouts: image left, content right, single row. The
 * body has `min-width: 0` upstream so long descriptions wrap inside the body
 * rather than knocking the image to its own row. (The previous `flex-wrap:
 * wrap` was over-eager — it pushed the body below the image whenever the
 * intrinsic content width crowded the row.)
 */
.kitchensync-item--horizontal,
.kitchensync-item--compact {
	flex-direction: row;
	flex-wrap: nowrap;
}

/* ---- Layout: compact list row ------------------------------------------ */

.kitchensync-item--compact {
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem 0;
	border-block-end: 1px solid var( --ks-border );
}

.kitchensync-item--compact .kitchensync-menu__media {
	width: 56px;
	height: 56px;
}

.kitchensync-item--compact .kitchensync-menu__body {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
}

.kitchensync-item--compact .kitchensync-menu__tags {
	order: -1;
}

.kitchensync-item--compact .kitchensync-menu__head {
	flex: 1 1 12rem;
}

.kitchensync-item--compact .kitchensync-menu__description {
	flex: 1 1 100%;
	margin: 0;
}

.kitchensync-item--compact .kitchensync-menu__footer {
	margin: 0;
	flex: 0 0 auto;
}

.kitchensync-item--compact .kitchensync-menu__count {
	margin-inline-start: 0.5rem;
}

/* ---- Layout: card ------------------------------------------------------- */

:where( .kitchensync-item--card ) {
	flex-direction: column;
	gap: 0.75rem;
	padding: 0;
	border: 1px solid var( --ks-border );
	border-radius: var( --ks-radius-card );
	background: var( --ks-white );
	overflow: hidden;
}

.kitchensync-item--card .kitchensync-menu__media-col {
	width: 100%;
}

.kitchensync-item--card .kitchensync-menu__media {
	width: 100%;
	height: 200px;
	border-radius: 0;
}

.kitchensync-item--card .kitchensync-menu__body {
	padding: 0 1rem 1rem;
}

.kitchensync-item--card .kitchensync-menu__gallery,
.kitchensync-item--card .kitchensync-menu__nutrition {
	margin-inline: 1rem;
	margin-block-end: 1rem;
}

/* ---- Phase 3.5 layout modifiers (bound row group) ---------------------- */
/*
 * The legacy `.kitchensync-item--{layout}` rules above target the hand-rolled
 * markup the render_callback emits when there are no inner blocks (the
 * pre-Phase-3 migration fallback). For the bound single Menu Item block,
 * the visible row is a native `core/group` whose flex direction comes from
 * WP's auto-generated `.wp-container-core-group-is-layout-*` class — that's
 * a single-class selector, so a two-class modifier here is enough to win.
 *
 * Without these, every layout option rendered identically (image left, body
 * right) because the layout dropdown only flips the article's modifier
 * class — and the legacy `:where()` rules from before this file's "Single-
 * item block wrapper" section were aimed at the wrong markup.
 */

/* Horizontal is the default the template ships with — no overrides needed. */

/* Compact: small 56×56 image, tighter row gap. Description / pills still
   stack vertically because the body group inside our row group is vertical
   by default; the merchant can flatten further via the Group Layout panel. */
.kitchensync-menu--compact .kitchensync-menu__row {
	gap: 0.5rem;
}

.kitchensync-menu--compact .kitchensync-menu__bound-image {
	width: 56px;
}

.kitchensync-menu--compact .kitchensync-menu__bound-image img {
	width: 56px;
	height: 56px;
	object-fit: cover;
}

/* Card: image stacks on top of the body column. Two-class specificity
   (`.kitchensync-menu--card .kitchensync-menu__row`) beats core/group's
   auto-generated `.wp-container-core-group-is-layout-XYZ` one-class
   `flex-direction: row`. */
.kitchensync-menu--card .kitchensync-menu__row {
	flex-direction: column;
	align-items: stretch;
}

.kitchensync-menu--card .kitchensync-menu__bound-image {
	width: 100%;
}

.kitchensync-menu--card .kitchensync-menu__bound-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/*
 * Pin the footer row (price + buttons) to the bottom of the card so cards in
 * the same grid row line their footers up regardless of description length.
 * Real (non-:where) specificity so it beats core/group's auto-generated
 * layout margins — the previous zero-specificity `:where()` rule was getting
 * overridden, which is why the footer floated up under short content.
 */
.kitchensync-menu__footer-row.kitchensync-menu__footer-row {
	margin-block-start: auto;
}

/*
 * For the auto margin to have room, the row + body columns must stretch to
 * fill the card height. Grid cells stretch their items to equal height by
 * default, so this cascade lets the footer drop to the very bottom.
 */
.kitchensync-menu--card .kitchensync-menu__row,
.kitchensync-menu--card .kitchensync-menu__bound-body {
	flex: 1 1 auto;
}

/* ---- Single-item block wrapper ----------------------------------------- */

.kitchensync-menu--single {
	display: block;
}

.kitchensync-menu--single.kitchensync-menu--card,
.kitchensync-menu--single.kitchensync-menu--card .kitchensync-menu__item {
	max-width: 24rem;
}

/* ---- Empty state -------------------------------------------------------- */

.kitchensync-menu--empty {
	color: var( --ks-muted );
	font-style: italic;
}

/* ---- Responsive --------------------------------------------------------- */

@media ( max-width: 480px ) {
	.kitchensync-item--horizontal .kitchensync-menu__media {
		width: 88px;
		height: 88px;
	}

	.kitchensync-menu__actions {
		flex-wrap: wrap;
	}
}