:root {
	--bg-cream: #fff6e8;
	--bg-cream-deep: #ffe3b8;
	--accent-gold: #f4a261;
	--accent-gold-deep: #e68d34;
	--accent-red: #e63946;
	--accent-teal: #264653;
	--card-bg: #ffffff;
	--text-main: #2c1b16;
	--text-muted: #7a5b4b;
	--radius-lg: 22px;
	--shadow-soft: 0 20px 45px rgba(0, 0, 0, 0.08);
	--shadow-soft-strong: 0 24px 60px rgba(0, 0, 0, 0.16);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	background: radial-gradient(circle at top left, #ffe9c7 0, var(--bg-cream) 35%, #ffe8d3 70%, #ffe0c0 100%);
	color: var(--text-main);
	min-height: 100vh;
}

.page-shell {
	max-width: 1120px;
	margin: 0 auto;
	padding: 28px 18px 80px;
}

header.hero {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2.4fr);
	gap: 32px;
	align-items: center;
	margin-bottom: 46px;
}

@media (max-width: 860px) {
	header.hero {
		grid-template-columns: 1fr;
	}
}

.brand-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(230, 141, 52, 0.07);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--accent-teal);
	margin-bottom: 16px;
	border: 1px solid rgba(230, 141, 52, 0.35);
}

.brand-pill span.icon {
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: radial-gradient(circle at 30% 20%, #fff7e8 0, var(--accent-gold) 40%, var(--accent-red) 100%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px #ffffff, 0 6px 12px rgba(0, 0, 0, 0.18);
	color: #fff;
	font-size: 11px;
}

.hero-title {
	font-family: 'Playfair Display', 'Times New Roman', serif;
	font-size: clamp(2.4rem, 4vw, 3.2rem);
	letter-spacing: 0.04em;
	color: var(--accent-teal);
	margin-bottom: 10px;
}

.hero-subtitle {
	font-size: 1rem;
	max-width: 460px;
	line-height: 1.7;
	color: var(--text-muted);
}

.hero-subtitle strong {
	color: var(--accent-red);
	font-weight: 600;
}

.hero-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin-top: 18px;
	font-size: 0.9rem;
	color: var(--text-muted);
}

.hero-meta-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.8);
	box-shadow: 0 7px 16px rgba(0, 0, 0, 0.04);
}

.hero-meta-dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--accent-gold);
}

.hero-meta-dot--green {
	background: #06d6a0;
}

.cart-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	background: linear-gradient(135deg, #264653, #2a9d8f);
	color: #fff;
	border: none;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(38, 70, 83, 0.35);
}

.cart-button#cart-button {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 1000;
	padding: 10px 16px;
	box-shadow: 0 16px 36px rgba(38, 70, 83, 0.45);
	font-size: 0.98rem;
}

.cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 10px;
	border-radius: 999px;
	background: #e63946;
	color: #fff;
	font-weight: 700;
	font-size: 0.86rem;
}

.hero-photo-shell {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-photo {
	position: relative;
	width: 100%;
	max-width: 420px;
	border-radius: 30px;
	overflow: hidden;
	box-shadow: var(--shadow-soft-strong);
	transform: translateY(4px);
}

.hero-photo::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(145deg, rgba(230, 141, 52, 0.25), rgba(230, 57, 70, 0.16));
	mix-blend-mode: soft-light;
	pointer-events: none;
	opacity: 0.8;
}

.hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.03);
}

.hero-photo-badge {
	position: absolute;
	bottom: 16px;
	left: 18px;
	padding: 10px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.96);
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.78rem;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.hero-photo-badge span.icon {
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: radial-gradient(circle at 30% 20%, #fff, #f4a261 45%, #e76f51 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 14px;
}

.hero-photo-badge div strong {
	display: block;
	font-size: 0.8rem;
}

.hero-photo-badge div span {
	color: var(--text-muted);
	font-size: 0.76rem;
}

.hero-floating-tag {
	position: absolute;
	top: 10px;
	right: -8px;
	transform: rotate(6deg);
	background: #ffffff;
	color: var(--accent-teal);
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 0.74rem;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

main {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.order-card {
	background: linear-gradient(145deg, rgba(244, 162, 97, 0.22), rgba(255, 255, 255, 0.96));
	border-radius: var(--radius-lg);
	padding: 22px 22px 20px;
	box-shadow: var(--shadow-soft);
	border: 1px solid rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(12px);
}

.order-card h2 {
	font-family: 'Playfair Display', serif;
	font-size: 1.5rem;
	margin-bottom: 6px;
	color: var(--accent-teal);
	text-align: left;
}

.order-subtitle {
	font-size: 0.9rem;
	color: var(--text-muted);
	margin-bottom: 18px;
}

.order-primary-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 12px;
}

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

.btn-block {
	padding: 13px 16px;
	border-radius: 14px;
	border: none;
	cursor: pointer;
	font-size: 0.98rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	white-space: nowrap;
	text-decoration: none;
	transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.btn-block span.icon {
	font-size: 1rem;
}

.btn-call {
	background: linear-gradient(135deg, #264653, #2a9d8f);
	color: #fff;
	box-shadow: 0 14px 30px rgba(38, 70, 83, 0.35);
}

.btn-call:hover {
	transform: translateY(-1px);
	box-shadow: 0 20px 40px rgba(38, 70, 83, 0.4);
}

.btn-cash {
	background: linear-gradient(135deg, #06d6a0, #1b9aaa);
	color: #fff;
	box-shadow: 0 14px 32px rgba(6, 214, 160, 0.35);
}

.btn-cash:hover {
	transform: translateY(-1px);
	box-shadow: 0 20px 48px rgba(6, 214, 160, 0.5);
}

.btn-social {
	background: linear-gradient(135deg, #4361ee, #3a0ca3);
	color: #fff;
	box-shadow: 0 14px 32px rgba(67, 97, 238, 0.4);
}

.btn-social:hover {
	transform: translateY(-1px);
	box-shadow: 0 20px 46px rgba(67, 97, 238, 0.55);
}

.order-rows-secondary {
	display: grid;
	gap: 10px;
	margin-top: 12px;
}

.order-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 11px;
	border-radius: 12px;
	font-size: 0.88rem;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
}

.order-banner.muted {
	background: rgba(255, 255, 255, 0.8);
	box-shadow: none;
	border: 1px dashed rgba(122, 91, 75, 0.28);
}

.order-banner.accent {
	background: linear-gradient(135deg, #ffdd7a, #ffb703);
	color: #5c3500;
	box-shadow: 0 16px 40px rgba(255, 183, 3, 0.45);
}

.order-banner .icon-pill {
	width: 26px;
	height: 26px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(38, 70, 83, 0.06);
	font-size: 1rem;
}

.order-banner strong {
	font-weight: 600;
}

.text-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-style: dotted;
	text-underline-offset: 3px;
}

.section-heading {
	margin-top: 8px;
	margin-bottom: 12px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}

.section-heading-main {
	display: flex;
	align-items: center;
	gap: 10px;
}

.section-heading h2 {
	font-family: 'Playfair Display', serif;
	font-size: 1.7rem;
	color: var(--accent-teal);
}

.section-tagline {
	font-size: 0.9rem;
	color: var(--text-muted);
}

.badge-day {
	padding: 6px 11px;
	border-radius: 999px;
	font-size: 0.82rem;
	background: rgba(230, 57, 70, 0.1);
	color: var(--accent-red);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.menu-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.filter-pill {
    padding: 4px 9px;
    border-radius: 8px;
    font-size: 0.74rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
}

.filter-pill span.dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--accent-gold);
}

.filter-pill.active {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	border-width: 2px;
}

.filter-pill.active span.dot {
    background: #fff;
}

.menu-grid {
	display: grid;
	gap: 18px;
}

.menu-card {
	display: grid;
	grid-template-columns: minmax(0, 2.1fr) minmax(0, 3fr);
	gap: 18px;
	background: var(--card-bg);
	padding: 16px;
	border-radius: 20px;
	box-shadow: var(--shadow-soft);
}

@media (max-width: 720px) {
	.menu-card {
		grid-template-columns: 1fr;
	}
}

.menu-card-image-shell {
	border-radius: 18px;
	overflow: hidden;
	position: relative;
	max-height: 210px;
}

.menu-card-image-shell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.04);
}

.menu-card-pill {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 0.72rem;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.menu-card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.menu-card-header {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	align-items: baseline;
}

.menu-card-title {
	font-weight: 600;
	font-size: 1rem;
}

.menu-card-price {
	font-weight: 700;
	color: var(--accent-red);
	font-size: 1rem;
}

.menu-card-description {
	font-size: 0.88rem;
	color: var(--text-muted);
	line-height: 1.65;
}

.menu-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	font-size: 0.78rem;
	color: var(--text-muted);
}

.menu-card-meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.menu-card-meta-dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--accent-gold);
}

.menu-card-ingredients {
	margin-top: 4px;
	font-size: 0.8rem;
}

.menu-card-ingredients strong {
	font-weight: 600;
	color: var(--text-main);
}

.menu-card-ingredients ul {
	list-style: none;
	margin-top: 4px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 2px 18px;
}

.menu-card-ingredients li::before {
	content: '•';
	margin-right: 5px;
	color: var(--accent-gold);
}

.menu-card-cta-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
	gap: 10px;
	font-size: 0.82rem;
}

.menu-card-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.chip {
	padding: 4px 9px;
	border-radius: 8px;
	background: rgba(244, 162, 97, 0.13);
	color: #5c3500;
	border: 1px solid rgba(244, 162, 97, 0.4);
	font-size: 0.74rem;
}

.chip--mains {
	background: linear-gradient(135deg, #ffd79a, #f4a261);
	border-color: rgba(244, 162, 97, 0.55);
}

.chip--street {
	background: linear-gradient(135deg, #ffe08a, #ffb703);
	border-color: rgba(255, 183, 3, 0.55);
}

.chip--family {
	background: linear-gradient(135deg, #ffc6a5, #e76f51);
	border-color: rgba(231, 111, 81, 0.5);
}

.chip-hearty {
	background: linear-gradient(135deg, #ffd0a4, #e68d34);
	border-color: rgba(230, 141, 52, 0.55);
}
 
.chip--all {
	background: linear-gradient(135deg, #ffe3b8, #ffdd7a);
	border-color: rgba(255, 183, 3, 0.45);
}

.menu-card-cta {
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--accent-teal);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-weight: 500;
    box-shadow: 0 8px 20px rgba(38, 70, 83, 0.45);
    white-space: nowrap;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
    position: relative;
}

.menu-card-cta span.icon {
    font-size: 0.95rem;
}

.menu-card-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(38, 70, 83, 0.55);
}

.menu-card-cta:active {
    transform: scale(0.98);
}

.menu-card-cta.cta-click {
    animation: cta-pop 220ms ease-out;
}

@keyframes cta-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.menu-qty-badge {
    display: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--accent-teal);
    border: 1px solid rgba(38, 70, 83, 0.25);
    font-size: 0.78rem;
    font-weight: 600;
}

footer {
	margin-top: 38px;
	font-size: 0.78rem;
	color: var(--text-muted);
	display: flex;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.footer-pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.footer-pill {
	padding: 5px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(122, 91, 75, 0.16);
}

.cart-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(1px);
}

.cart-panel {
	position: fixed;
	top: 0;
	right: 0;
	width: 360px;
	max-width: 92vw;
	height: 100vh;
	background: #fff;
	box-shadow: var(--shadow-soft-strong);
	display: grid;
	grid-template-rows: auto 1fr auto;
}

.cart-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.cart-close {
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 1rem;
}

.cart-items {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 62vh;
    overflow-y: auto;
}

.cart-item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	align-items: center;
}

.cart-item-title {
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
}

.cart-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.cart-item-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.qty-input {
	width: 52px;
	padding: 6px 8px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
}

.remove-item {
    border: none;
    background: transparent;
    color: #e63946;
    cursor: pointer;
}

.cart-item-price {
    font-weight: 700;
    color: var(--accent-red);
    font-size: 0.95rem;
}

.cart-footer {
	padding: 14px 16px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	display: grid;
	gap: 12px;
}

.cart-total-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 700;
}

.cart-actions {
	display: flex;
	gap: 10px;
}

.cart-action-secondary {
	padding: 10px 14px;
	border-radius: 999px;
	background: rgba(244, 162, 97, 0.13);
	border: 1px solid rgba(244, 162, 97, 0.4);
	color: var(--accent-teal);
	cursor: pointer;
}

.cart-action-primary {
	padding: 10px 14px;
	border-radius: 999px;
	background: var(--accent-teal);
	color: #fff;
	border: none;
	box-shadow: 0 8px 20px rgba(38, 70, 83, 0.35);
	cursor: pointer;
}

.hidden {
	display: none;
}

.fallback-error {
	text-align: center;
	color: #e63946;
}

.fallback-controls {
	margin-top: 12px;
	display: flex;
	justify-content: center;
}

.fallback-button {
	padding: 10px 14px;
	border-radius: 8px;
	background: #264653;
	color: #fff;
	border: none;
	cursor: pointer;
}