/* Restaurant Menu Grid and Menu Category Navigation. Colours come from the design tokens (rew-base.css); widget Style
   controls override them through the --rew-* variables below. */

.rew-menu {
	--rew-menu-cols: 3;
	--rew-menu-gap: 24px;
	--rew-menu-group-gap: 64px;
	--rew-card-ratio: 1 / 1;
	--rew-card-media-bg: var(--mg-bg-soft);
	--rew-card-accent: var(--mg-secondary);
	--rew-label-veg: var(--mg-primary);
	--rew-label-halal: #1F5F7A;
	--rew-label-spice: var(--mg-danger);
	--rew-badge-bg: var(--mg-gold);
	--rew-badge-text: var(--mg-ink);
	--rew-chip-active: var(--mg-primary);
	color: var(--mg-text);
	font-family: var(--mg-font-ui);
}

.rew-menu__group + .rew-menu__group {
	margin-top: var(--rew-menu-group-gap);
}

.rew-menu__group[hidden] {
	display: none;
}

.rew-menu__group-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 24px;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--mg-border);
}

.rew-menu__group-title {
	margin: 0;
	color: var(--mg-text);
	font: 600 var(--mg-step-3) / 1.1 var(--mg-font-display);
	letter-spacing: -.01em;
}

.rew-menu__group-title:focus {
	outline: none;
}

.rew-menu__group-desc {
	margin: 0;
	color: var(--mg-text-muted);
	font: 400 var(--mg-step-0) / 1.5 var(--mg-font-ui);
}

.rew-menu__grid {
	display: grid;
	grid-template-columns: repeat(var(--rew-menu-cols), minmax(0, 1fr));
	gap: var(--rew-menu-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------------------------------------------------------------- card */
.rew-card {
	min-width: 0;
	margin: 0;
}

.rew-card[hidden] {
	display: none;
}

.rew-card__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--mg-border);
	border-radius: var(--mg-radius-lg);
	background: var(--mg-surface);
	transition: box-shadow var(--mg-transition-normal), border-color var(--mg-transition-normal), transform var(--mg-transition-normal);
}

.rew-card:not(.rew-card--soldout) .rew-card__inner {
	cursor: pointer;
}

.rew-menu--lift .rew-card:not(.rew-card--soldout) .rew-card__inner:hover {
	border-color: var(--mg-border-strong);
	box-shadow: var(--mg-shadow-md);
	transform: translateY(-2px);
}

.rew-card__inner:focus-within {
	border-color: var(--mg-primary);
}

.rew-card__media {
	position: relative;
	aspect-ratio: var(--rew-card-ratio);
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .85), transparent 64%),
		var(--rew-card-media-bg);
}

.rew-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--rew-ease);
}

.rew-menu--blend .rew-card__img {
	mix-blend-mode: multiply;
}

.rew-menu--zoom .rew-card:not(.rew-card--soldout) .rew-card__inner:hover .rew-card__img {
	transform: scale(1.04);
}

/* Branded placeholder for dishes without a photo. */
.rew-card__media--empty {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='38' fill='none' stroke='%23cfc2ac' stroke-width='1.5' stroke-dasharray='3 5'/%3E%3Cpath d='M38 76c14-2 28-14 38-34' fill='none' stroke='%237d8f63' stroke-width='2.4' stroke-linecap='round'/%3E%3Cellipse cx='49' cy='60' rx='5.5' ry='9' transform='rotate(-35 49 60)' fill='%23b8c49f'/%3E%3Cellipse cx='62' cy='50' rx='5.5' ry='9' transform='rotate(40 62 50)' fill='%23b8c49f'/%3E%3Cellipse cx='70' cy='62' rx='6.2' ry='8' fill='%233f5a2a'/%3E%3Ccircle cx='72' cy='59' r='1.6' fill='%23fff' opacity='.6'/%3E%3C/svg%3E") center / 46% no-repeat,
		var(--mg-secondary-soft);
}

.rew-card__badge,
.rew-card__soldout-tag {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 0 10px;
	border-radius: var(--mg-radius-pill);
	background: var(--rew-badge-bg);
	color: var(--rew-badge-text);
	font: 700 12px / 1 var(--mg-font-ui);
	letter-spacing: .02em;
}

.rew-card__soldout-tag {
	inset-inline-start: auto;
	inset-inline-end: 12px;
	background: var(--mg-ink);
	color: #FFF;
}

.rew-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px 18px;
}

.rew-card__title {
	margin: 0;
	color: var(--mg-text);
	font: 600 var(--mg-step-1) / 1.25 var(--mg-font-display);
	letter-spacing: -.005em;
}

body button.rew-card__open {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: start;
	cursor: pointer;
	box-shadow: none;
}

/* The title button covers the whole card, so the card is one large target; the Add button sits above it. */
body button.rew-card__open::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

body button.rew-card__open:hover,
body button.rew-card__open:focus {
	background: none;
	color: var(--mg-primary);
}

body button.rew-card__open:focus-visible,
body button.rew-card__open:focus {
	outline: none;
}

body button.rew-card__open:focus-visible::after {
	outline: 3px solid var(--mg-focus);
	outline-offset: -3px;
	border-radius: var(--mg-radius-lg);
}

.rew-card__desc {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--mg-text-muted);
	font: 400 var(--mg-step--1) / 1.5 var(--mg-font-ui);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.rew-card__labels {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rew-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 24px;
	padding: 0 8px 0 6px;
	border: 1px solid currentColor;
	border-radius: var(--mg-radius-pill);
	color: var(--rew-label-veg);
	font: 600 12px / 1 var(--mg-font-ui);
}

.rew-label--halal {
	color: var(--rew-label-halal);
}

.rew-label--spice {
	color: var(--rew-label-spice);
}

.rew-label__icon {
	width: 14px;
	height: 14px;
}

.rew-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 6px;
}

.rew-card__price {
	margin: 0;
	color: var(--mg-text);
	font: 700 var(--mg-step-1) / 1 var(--mg-font-ui);
	font-variant-numeric: tabular-nums;
}

.rew-card__old {
	margin-inline-start: 6px;
	color: var(--mg-text-muted);
	font-size: .8em;
	font-weight: 500;
}

body button.rew-card__add {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 18px 0 14px;
	border: 0;
	border-radius: var(--mg-radius-pill);
	background: var(--mg-primary);
	color: #FFF;
	font: 700 14px / 1 var(--mg-font-ui);
	cursor: pointer;
	box-shadow: none;
	transition: background-color var(--mg-transition-fast), transform var(--mg-transition-fast);
}

body button.rew-card__add:hover,
body button.rew-card__add:focus-visible,
body button.rew-card__add:focus {
	background: var(--mg-primary-hover);
	color: #FFF;
}

body button.rew-card__add:active {
	transform: scale(.97);
}

.rew-card__add svg {
	width: 18px;
	height: 18px;
}

body button.rew-card__add.is-busy {
	pointer-events: none;
	opacity: .75;
}

body button.rew-card__add.is-added {
	background: var(--mg-success);
}

body a.rew-card__cta {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: var(--mg-radius-pill);
	background: var(--mg-primary);
	color: #FFF;
	font: 700 14px / 1 var(--mg-font-ui);
	text-decoration: none;
}

.rew-card__soldout {
	margin: 0;
	color: var(--mg-text-muted);
	font: 600 13px / 1 var(--mg-font-ui);
}

.rew-card--soldout .rew-card__img,
.rew-card--soldout .rew-card__title {
	opacity: .55;
}

.rew-card--soldout .rew-card__img {
	filter: grayscale(.6);
}

/* Filter buttons (single-grid layout). */
.rew-menu__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

body button.rew-chip,
body a.rew-chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--rew-chip-border, var(--mg-border));
	border-radius: var(--mg-radius-pill);
	background: var(--rew-chip-bg, var(--mg-surface));
	color: var(--rew-chip-text, var(--mg-text));
	font: 600 14px / 1 var(--mg-font-ui);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	transition: border-color var(--mg-transition-fast), background-color var(--mg-transition-fast), color var(--mg-transition-fast);
}

body button.rew-chip:hover,
body a.rew-chip:hover,
body button.rew-chip:focus-visible,
body a.rew-chip:focus-visible,
body button.rew-chip:focus,
body a.rew-chip:focus {
	border-color: var(--rew-chip-hover, var(--mg-primary));
	background: var(--rew-chip-bg, var(--mg-surface));
	color: var(--rew-chip-text, var(--mg-primary));
}

body button.rew-chip[aria-pressed="true"],
body a.rew-chip[aria-current="true"] {
	border-color: var(--rew-chip-active, var(--mg-primary));
	background: var(--rew-chip-active, var(--mg-primary));
	color: var(--rew-chip-active-text, #FFF);
}

/* ---------------------------------------------------------------- category navigation */
.rew-catnav {
	--rew-catnav-bg: color-mix(in srgb, var(--mg-bg) 94%, transparent);
	--rew-catnav-line: var(--mg-border);
	--rew-chip-gap: 8px;
	display: flex;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--rew-catnav-line);
	background: var(--rew-catnav-bg);
}

.rew-catnav__list {
	display: flex;
	flex: 1 1 auto;
	gap: var(--rew-chip-gap);
	margin: 0;
	padding: 2px;
	overflow-x: auto;
	list-style: none;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.rew-catnav__list::-webkit-scrollbar {
	display: none;
}

.rew-catnav__list > li {
	flex: 0 0 auto;
	margin: 0;
	scroll-snap-align: start;
}

.rew-catnav__list > li[hidden] {
	display: none;
}

body button.rew-catnav__arrow {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--mg-border);
	border-radius: 50%;
	background: var(--mg-surface);
	color: var(--mg-text);
	cursor: pointer;
	box-shadow: none;
}

body button.rew-catnav__arrow:hover,
body button.rew-catnav__arrow:focus-visible,
body button.rew-catnav__arrow:focus {
	border-color: var(--mg-primary);
	background: var(--mg-surface);
	color: var(--mg-primary);
}

body button.rew-catnav__arrow[hidden] {
	display: none;
}

.rew-catnav__arrow--prev {
	margin-inline-end: 8px;
}

.rew-catnav__arrow--next {
	margin-inline-start: 8px;
}

body button.rew-catnav__arrow svg {
	width: 18px;
	height: 18px;
}

/* Sticky category bar: rew-menu.js marks the widget wrapper; it sits right under the header's current height. */
.rew-catnav-host {
	position: sticky;
	top: calc(var(--rew-header-visible, 0px) + var(--rew-catnav-offset, 0px));
	z-index: 20;
}

.rew-catnav-host.is-stuck .rew-catnav {
	box-shadow: 0 10px 20px -16px rgba(42, 38, 32, .5);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* Sections land below both sticky bars. */
.rew-menu__group {
	scroll-margin-top: calc(var(--rew-header-min, 0px) + 72px);
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1023px) {
	.rew-menu {
		--rew-menu-gap: 16px;
		--rew-menu-group-gap: 48px;
	}
}

@media (max-width: 767px) {
	body button.rew-catnav__arrow {
		display: none;
	}

	.rew-card__body {
		padding: 14px 14px 16px;
	}

	/* Compact rows: photo beside the text, the whole row still one target. */
	.rew-menu--m-row .rew-menu__grid {
		gap: 12px;
	}

	.rew-menu--m-row .rew-card__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 120px;
		align-items: stretch;
		border-radius: var(--mg-radius-md);
	}

	.rew-menu--m-row .rew-card__media {
		grid-column: 2;
		grid-row: 1;
		height: 100%;
		min-height: 120px;
		aspect-ratio: auto;
	}

	.rew-menu--m-row .rew-card__body {
		grid-column: 1;
		grid-row: 1;
		gap: 6px;
		padding: 14px 12px 14px 14px;
	}

	.rew-menu--m-row .rew-card__title {
		font-size: 1.05rem;
	}

	.rew-menu--m-row .rew-card__labels {
		display: none;
	}

	.rew-menu--m-row .rew-card__badge {
		top: 8px;
		inset-inline-start: 8px;
		min-height: 22px;
		padding: 0 7px;
		font-size: 11px;
	}

	.rew-menu--m-row .rew-card__soldout-tag {
		top: auto;
		bottom: 8px;
		inset-inline-end: 8px;
	}

	.rew-menu--m-row .rew-card__price {
		font-size: 1rem;
	}

	.rew-menu--m-row button.rew-card__add,
.rew-menu--m-row .rew-card__add {
		padding: 0 14px 0 10px;
	}

	.rew-catnav {
		padding-block: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rew-card__inner,
.rew-card__img,
body button.rew-card__add,
body button.rew-chip,
body a.rew-chip {
		transition: none;
	}

	.rew-menu--lift .rew-card:not(.rew-card--soldout) .rew-card__inner:hover,
	.rew-menu--zoom .rew-card:not(.rew-card--soldout) .rew-card__inner:hover .rew-card__img {
		transform: none;
	}

	.rew-catnav__list {
		scroll-behavior: auto;
	}
}