/*
Theme Name: Orient Foods Restaurant
Theme URI: https://orientfoods.pk
Author: Orient Foods
Description: Modern restaurant theme for Orient Foods with a foodpanda-style menu page, basket, checkout and a live 30-minute order timer. Orders are saved on the website (Orders in wp-admin) and emailed to the restaurant.
Version: 13.1.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: orientfood
*/

:root {
  --ink: #1d1710;
  --forest: #08241b;
  --green: #0f3a2c;
  --green-2: #17513c;
  --green-3: #e4eee8;
  --saffron: #f2a73b;
  --saffron-deep: #c97d0c;
  --chili: #c8401c;
  --cream: #fbf5ea;
  --sand: #f3e9d6;
  --paper: #fffdf8;
  --text: #2a2118;
  --muted: #6d5f50;
  --line: rgba(36, 28, 20, .1);
  --wa: #1a9e4e;
  --radius: 28px;
  --shadow: 0 20px 50px rgba(60, 40, 10, .12);
  --shadow-sm: 0 6px 18px rgba(60, 40, 10, .1);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --urdu: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
  --header-h: 74px;
  --ease: cubic-bezier(.22, .8, .25, 1);
  --jaali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23f2a73b' stroke-opacity='.17' stroke-width='1'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z'/%3E%3Cpath d='M30 14L46 30L30 46L14 30Z'/%3E%3Ccircle cx='30' cy='30' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 10px); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans); font-size: 1.02rem; line-height: 1.7; color: var(--text);
  background: var(--cream); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 820px; }
.urdu { font-family: var(--urdu); line-height: 2; }
em { font-style: italic; color: var(--saffron-deep); }
h1, h2, h3 { font-family: var(--serif); line-height: 1.12; color: var(--ink); letter-spacing: -.015em; }

:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; border-radius: 8px; }
.skip-link { position: absolute; left: 14px; top: -70px; z-index: 600; background: var(--saffron); color: var(--ink); padding: 12px 18px; border-radius: 12px; font-weight: 700; transition: top .25s; }
.skip-link:focus { top: 14px; }

/* ================= HEADER ================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--header-h);
  transition: background .35s var(--ease), box-shadow .35s;
  /* Keep header stuck on mobile Safari / Chrome */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.site-header.is-scrolled,
body:not(.home):not(.menu-page) .site-header,
.site-header.nav-open,
body.menu-page .site-header.is-scrolled {
  background: rgba(251, 245, 234, .97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--line);
}
/* On menu page always give header a solid base once scrolled */
body.menu-page .site-header.is-scrolled {
  background: #fbf5ea;
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.header-inner { height: 100%; display: flex; align-items: center; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 11px; font-family: var(--serif); font-size: 1.45rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); line-height: 1; }
.logo-icon { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px rgba(200, 64, 28, .35); }
.logo-text span { color: var(--saffron-deep); font-style: italic; font-weight: 500; }
.nav { margin-left: auto; }
.nav-list { display: flex; gap: 4px; }
.nav-list a { display: block; font-size: .9rem; font-weight: 700; color: var(--muted); padding: 9px 16px; border-radius: 999px; transition: color .2s, background .2s; }
.nav-list a:hover, .nav-list .current-menu-item > a { color: var(--ink); background: rgba(36, 28, 20, .06); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.cart-btn {
  position: relative; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line);
  background: var(--paper); display: grid; place-items: center; transition: transform .25s var(--ease), border-color .2s;
}
.cart-btn:hover { border-color: var(--green); transform: translateY(-1px); }
.cart-btn svg { width: 22px; height: 22px; }
.cart-count {
  position: absolute; top: -5px; right: -5px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 99px;
  background: var(--chili); color: #fff; font-size: .72rem; font-weight: 800; line-height: 21px; text-align: center;
}
.cart-count.bump { animation: bump .4s var(--ease); }
@keyframes bump { 40% { transform: scale(1.35); } }
.nav-toggle { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper); position: relative; }
.nav-toggle span { position: absolute; left: 14px; right: 14px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s, top .3s; }
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-open .nav-toggle span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* ================= BUTTONS ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px; border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--sans); font-size: .92rem; font-weight: 800; letter-spacing: .005em;
  transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-sm { padding: 11px 22px; font-size: .84rem; }
.btn-lg { padding: 17px 34px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-green { background: var(--green); color: #fff; box-shadow: 0 10px 24px rgba(15, 58, 44, .25); }
.btn-green:hover { background: var(--green-2); }
.btn-primary { background: var(--saffron); color: var(--ink); box-shadow: 0 10px 26px rgba(242, 167, 59, .4); }
.btn-primary:hover { background: #ffb852; }
.btn-outline { background: var(--paper); color: var(--ink); border-color: rgba(36, 28, 20, .2); }
.btn-outline:hover { border-color: var(--ink); }
.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 10px 24px rgba(26, 158, 78, .28); }
.btn-wa:hover { background: #15883f; }
.btn-light { background: #fff; color: var(--green); }
.icon-wa { width: 18px; height: 18px; fill: currentColor; stroke: none; flex: none; }
.icon-wa-lg { width: 30px; height: 30px; }
.icon-bag { width: 22px; height: 22px; }

/* ================= HERO ================= */
.hero { position: relative; display: flex; align-items: center; min-height: min(90vh, 800px); padding: calc(var(--header-h) + 54px) 0 120px; background: var(--forest); color: #fff; overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0 0 0 auto; width: 80%; z-index: -3; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; filter: saturate(1.12) contrast(1.06) brightness(1.05); animation: heroZoom 1.8s var(--ease) both; }
@keyframes heroZoom { from { transform: scale(1.08); opacity: .4; } to { transform: none; opacity: 1; } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, var(--forest) 0%, var(--forest) 22%, rgba(8, 36, 27, .84) 38%, rgba(8, 36, 27, .28) 60%, rgba(8, 36, 27, 0) 78%),
    linear-gradient(180deg, rgba(8, 36, 27, .6) 0, rgba(8, 36, 27, 0) 24%, rgba(8, 36, 27, 0) 76%, rgba(8, 36, 27, .55) 100%);
}
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--jaali); background-size: 60px 60px; opacity: .55; -webkit-mask-image: linear-gradient(90deg, #000, transparent 52%); mask-image: linear-gradient(90deg, #000, transparent 52%); pointer-events: none; }
.hero-grid { position: relative; display: block; }
.hero-content { max-width: 660px; }
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 99px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); font-size: .82rem; font-weight: 700; color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--saffron); box-shadow: 0 0 0 4px rgba(242, 167, 59, .3); }
.hero h1 { margin: 22px 0 20px; font-weight: 600; color: #fff; }
.hero-urdu-title { display: block; text-align: left; font-size: clamp(2.3rem, 4.6vw, 3.6rem); color: var(--saffron); font-weight: 600; line-height: 1.5; }
.hero-en { display: block; font-size: clamp(2.6rem, 5vw, 4.1rem); text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.hero em { color: var(--saffron); }
.hero-lead { font-size: 1.12rem; color: rgba(255, 255, 255, .86); max-width: 31em; margin-bottom: 30px; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.btn-ghost { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: #fff; color: var(--green); }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px 22px; font-weight: 700; font-size: .92rem; color: rgba(255, 255, 255, .92); }
.hero-points li { display: inline-flex; align-items: center; gap: 8px; }
.hero-points svg { width: 20px; height: 20px; color: var(--saffron); }
.hero-chips { position: absolute; right: 28px; bottom: -64px; display: flex; align-items: flex-end; gap: 14px; }
.hero-chip { background: var(--paper); border-radius: 22px; box-shadow: 0 24px 50px rgba(0, 0, 0, .35); padding: 16px 22px; display: grid; }
.hero-chip--deal { background: var(--chili); color: #fff; max-width: 240px; transition: transform .3s var(--ease); border: 2px solid rgba(255, 255, 255, .25); }
.hero-chip--deal:hover { transform: rotate(-2deg) translateY(-3px); }
.hero-chip--deal small { font-weight: 800; font-size: .78rem; opacity: .9; }
.hero-chip--deal strong { font-family: var(--serif); font-size: 2rem; line-height: 1.1; color: var(--saffron); }
.hero-chip--deal span { font-size: .78rem; opacity: .92; line-height: 1.4; margin-top: 4px; }
.hero-chip--time { text-align: center; }
.hero-chip--time strong { font-family: var(--serif); font-size: 1.8rem; color: var(--green); line-height: 1.1; }
.hero-chip--time span { font-size: .78rem; color: var(--muted); }
.hero-anim { animation: rise .8s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* header over the dark hero / menu banner */
:is(body.home, body.menu-page) .site-header:not(.is-scrolled):not(.nav-open) .logo { color: #fff; }
:is(body.home, body.menu-page) .site-header:not(.is-scrolled):not(.nav-open) .logo-text span { color: var(--saffron); }
:is(body.home, body.menu-page) .site-header:not(.is-scrolled):not(.nav-open) .nav-list a { color: rgba(255, 255, 255, .82); }
:is(body.home, body.menu-page) .site-header:not(.is-scrolled):not(.nav-open) .nav-list a:hover { color: #fff; background: rgba(255, 255, 255, .14); }
:is(body.home, body.menu-page) .site-header:not(.is-scrolled):not(.nav-open) .cart-btn,
:is(body.home, body.menu-page) .site-header:not(.is-scrolled):not(.nav-open) .nav-toggle { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); color: #fff; }
:is(body.home, body.menu-page) .site-header:not(.is-scrolled):not(.nav-open) .nav-toggle span { background: #fff; }
:is(body.home, body.menu-page) .site-header:not(.is-scrolled):not(.nav-open) .nav-cta { background: var(--saffron); color: var(--ink); box-shadow: none; }

/* ================= MARQUEE ================= */
.marquee { background: var(--green); color: var(--cream); overflow: hidden; padding: 16px 0; }
.marquee-track { display: flex; align-items: center; gap: 28px; width: max-content; animation: marquee 34s linear infinite; font-family: var(--serif); font-size: 1.25rem; font-style: italic; white-space: nowrap; }
.marquee-track i { width: 7px; height: 7px; border-radius: 50%; background: var(--saffron); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ================= SECTIONS ================= */
.section { padding: 96px 0; }
.section-head { text-align: center; max-width: 660px; margin: 0 auto 48px; }
.section-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; text-align: left; max-width: none; margin-bottom: 30px; }
.eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--chili); margin-bottom: 12px; }
.section-head h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 12px; }
.section-head p:not(.eyebrow) { color: var(--muted); }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.in, html:not(.js) .reveal { opacity: 1; transform: none; }
.center-cta { text-align: center; margin-top: 34px; }

/* ================= BENTO GALLERY ================= */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 14px; }
.bt { position: relative; border-radius: 24px; overflow: hidden; background: var(--sand); }
.bt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.bt:hover img { transform: scale(1.04); }
.bt figcaption { position: absolute; inset: auto 0 0 0; padding: 40px 20px 18px; color: #fff; display: grid; background: linear-gradient(0deg, rgba(20, 12, 4, .78), transparent); }
.bt figcaption b, .bt figcaption .urdu { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; line-height: 1.5; }
.bt figcaption .urdu { justify-self: start; }
.bt figcaption small { font-size: .82rem; opacity: .85; }
.bt-big { grid-area: 1 / 1 / 3 / 3; }
.bt-seekh { grid-area: 1 / 3; }
.bt-tikka { grid-area: 1 / 4 / 3 / 5; }
.bt-rice { grid-area: 2 / 3; }
.bt-deal { grid-area: 3 / 1 / 4 / 3; }
.bt-plat { grid-area: 3 / 3; }
.bt-svc { grid-area: 3 / 4; }
.bt-deal {
  background: radial-gradient(circle at 85% 0%, rgba(242, 167, 59, .35), transparent 55%), linear-gradient(135deg, #c8401c, #8f2b10);
  color: #fff; padding: 26px 30px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; column-gap: 20px; align-content: center;
  transition: transform .3s var(--ease);
}
.bt-deal:hover { transform: translateY(-3px); }
.deal-flag { grid-column: 1; font-weight: 800; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--saffron); }
.deal-price { grid-column: 2; grid-row: 1 / 3; align-self: center; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 700; color: var(--saffron); line-height: 1; }
.bt-deal ul { grid-column: 1; font-size: .95rem; line-height: 1.8; padding-top: 6px; }
.bt-deal li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--saffron); margin-right: 10px; vertical-align: middle; }
.deal-go { grid-column: 1 / 3; margin-top: 12px; justify-self: start; background: var(--saffron); color: var(--ink); font-weight: 800; font-size: .86rem; padding: 10px 20px; border-radius: 99px; }
.bt-svc { background: var(--green); color: #fff; padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.bt-svc p { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--saffron); }
.bt-svc li { font-weight: 700; display: flex; align-items: center; gap: 10px; line-height: 2; }
.bt-svc li::before { content: ""; width: 14px; height: 8px; border-left: 2.5px solid var(--saffron); border-bottom: 2.5px solid var(--saffron); transform: rotate(-45deg) translateY(-2px); }
.bt-svc a { font-weight: 800; font-size: .92rem; color: var(--cream); border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 10px; }

/* ================= DISH CARDS ================= */
.dish { position: relative; }
.dish-open { display: flex; width: 100%; text-align: left; background: none; border: 0; padding: 0; }
.dish-media { position: relative; overflow: hidden; background: var(--sand); flex: none; }
.dish-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.dish-media--ph { display: grid; place-items: center; background: linear-gradient(135deg, #f7e3bd, #efc98a); color: var(--green); }
.dish-media--ph svg { width: 46%; height: 46%; stroke-width: 1.8; opacity: .8; }
.dish-tag { position: absolute; top: 8px; left: 8px; background: var(--chili); color: #fff; font-size: .68rem; font-weight: 800; padding: 3px 10px; border-radius: 99px; letter-spacing: .02em; }
.dish-info { display: grid; align-content: start; gap: 2px; min-width: 0; }
.dish-name { font-weight: 800; font-size: 1rem; line-height: 1.3; color: var(--ink); }
.dish-ur { font-size: .95rem; color: var(--muted); line-height: 1.9; text-align: left; direction: rtl; }
.dish-desc { font-size: .84rem; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dish-price { font-weight: 800; color: var(--green); margin-top: 6px; }

/* dish cards (menu grid): photo on top */
.dish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; }
.dish-grid .dish { display: flex; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; transition: box-shadow .3s, transform .3s var(--ease), border-color .2s; }
.dish-grid .dish:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: rgba(201, 125, 12, .45); }
.dish-grid .dish-open { flex-direction: column; width: 100%; }
.dish-grid .dish-media { width: 100%; aspect-ratio: 4 / 3; }
.dish-grid .dish-info { padding: 14px 16px 68px; flex: 1; }
.dish-grid .dish:hover img { transform: scale(1.06); }
.dish--noimg .dish-media { aspect-ratio: 16 / 6; }

.dish-price { position: absolute; left: 16px; bottom: 16px; margin: 0; font-family: var(--serif); font-weight: 700; font-size: 1.2rem; color: var(--green); }
.dish-add {
  position: absolute; right: 12px; bottom: 12px; height: 40px; padding: 0 16px 0 11px; border-radius: 99px; border: 0;
  background: var(--green); color: #fff; box-shadow: 0 8px 18px rgba(15, 58, 44, .3); display: inline-flex; align-items: center; gap: 4px;
  font-weight: 800; font-size: .86rem; transition: transform .25s var(--ease), background .2s, color .2s;
}
.dish-add svg { width: 18px; height: 18px; stroke-width: 2.8; }
.dish-add:hover { background: var(--saffron); color: var(--ink); transform: scale(1.06); }
.dish-add.pop { animation: bump .4s var(--ease); background: var(--saffron); color: var(--ink); }
.dish-tag { background: var(--saffron); color: var(--ink); box-shadow: 0 4px 10px rgba(0, 0, 0, .18); }
.dish-media--ph { background: var(--jaali) center / 46px 46px, linear-gradient(135deg, #f9e7c3, #f0cf92); }
.dish-media--ph svg { width: 54px; height: 54px; }


/* tile cards (rails) */
.rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: none; scroll-behavior: smooth; }
.rail::-webkit-scrollbar { display: none; }
.rail .dish { flex: 0 0 min(270px, 78vw); scroll-snap-align: start; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease); }
.rail .dish:hover { transform: translateY(-4px); }
.rail .dish-open { flex-direction: column; }
.rail .dish-media { width: 100%; aspect-ratio: 4 / 3; }
.rail .dish-info { padding: 14px 16px 18px; }
.rail .dish:hover img { transform: scale(1.05); }
.rail-nav { display: flex; gap: 8px; flex: none; }
.rail-nav button, .cats-arrow, .promo-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper); display: grid; place-items: center; transition: background .2s, color .2s, border-color .2s; }
.rail-nav button:hover, .cats-arrow:hover { background: var(--green); color: #fff; border-color: var(--green); }
.rail-nav svg, .cats-arrow svg, .promo-arrow svg { width: 20px; height: 20px; }

/* ================= POPULAR / HOW / WHY ================= */
.popular { background: var(--paper); }
.section-how { background: var(--cream); }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.how-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 30px; position: relative; }
.how-n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--green); color: var(--saffron); font-family: var(--serif); font-weight: 700; font-size: 1.3rem; margin-bottom: 18px; }
.how-card h3 { font-size: 1.35rem; margin-bottom: 8px; }
.how-card p { color: var(--muted); font-size: .96rem; }
.section-why { background: var(--green); color: #fff; }
.section-why h2 { color: #fff; }
.section-why .eyebrow { color: var(--saffron); }
.section-why .section-head p:not(.eyebrow) { color: rgba(255, 255, 255, .7); }
.section-why em { color: var(--saffron); }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.why-card { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: 24px; padding: 30px 26px; transition: background .3s, transform .3s var(--ease); }
.why-card:hover { background: rgba(255, 255, 255, .12); transform: translateY(-4px); }
.why-icon-wrap { width: 54px; height: 54px; border-radius: 16px; background: var(--saffron); display: grid; place-items: center; margin-bottom: 18px; color: var(--ink); }
.why-icon { width: 26px; height: 26px; }
.why-card h3 { color: #fff; font-size: 1.2rem; margin-bottom: 6px; }
.why-card p { color: rgba(255, 255, 255, .72); font-size: .94rem; }

/* ================= LOCATION ================= */
.section-location { background: linear-gradient(180deg, var(--cream), var(--sand)); }
.location-card { display: grid; grid-template-columns: .85fr 1.15fr; max-width: 1100px; margin: 0 auto; background: var(--paper); border-radius: 36px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.location-photo { position: relative; min-height: 520px; }
.location-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.location-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 12, 4, .55), transparent 40%); }
.loc-badge { position: absolute; z-index: 2; left: 20px; bottom: 20px; right: 20px; display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 253, 248, .94); border-radius: 99px; padding: 10px 18px; font-weight: 800; font-size: .84rem; color: var(--green); width: max-content; max-width: 100%; }
.loc-badge i { width: 9px; height: 9px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 0 4px rgba(26, 158, 78, .2); }
.location-text { padding: clamp(32px, 5vw, 60px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.location-text h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.loc-address { display: flex; gap: 12px; color: var(--muted); max-width: 30em; line-height: 1.6; }
.loc-address svg { width: 22px; height: 22px; flex: none; color: var(--chili); margin-top: 2px; }
.loc-phones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.loc-phones span { width: 100%; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.loc-phones a { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; color: var(--green); background: var(--green-3); padding: 6px 16px; border-radius: 99px; transition: background .2s, color .2s; }
.loc-phones a:hover { background: var(--green); color: #fff; }
.location-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* ================= CTA ================= */
.cta-banner { padding: 90px 0; text-align: center; color: #fff; background: radial-gradient(circle at 20% 0%, rgba(242, 167, 59, .25), transparent 50%), linear-gradient(135deg, #17513c, #0f3a2c); }
.cta-banner h2 { color: #fff; font-family: var(--urdu); font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.6; }
.cta-banner p { color: rgba(255, 255, 255, .8); margin: 8px 0 28px; }

/* ================= FOOTER ================= */
.site-footer { background: #0b2a20; color: rgba(255, 255, 255, .75); padding: 70px 0 28px; font-size: .94rem; }
.site-footer .logo { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; margin-bottom: 44px; }
.footer-brand p { margin-top: 10px; max-width: 24em; }
.footer-col { display: grid; align-content: start; gap: 8px; }
.footer-col h4 { color: var(--saffron); font-family: var(--serif); font-size: 1.1rem; margin-bottom: 6px; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 22px; font-size: .86rem; }
.float-wa { position: fixed; right: 20px; bottom: 20px; z-index: 150; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 28px rgba(26, 158, 78, .45); transition: transform .25s var(--ease), bottom .3s; }
.float-wa:hover { transform: scale(1.08); }

/* generic pages */
.page-hero { padding: calc(var(--header-h) + 60px) 0 40px; text-align: center; background: var(--sand); }
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); }
.page-body { padding: 60px 0 90px; }
.entry-title { font-size: 1.6rem; margin-bottom: 8px; }
.entry-content > * + * { margin-top: 1em; }

/* ================= MENU PAGE ================= */
.mhero { position: relative; padding: calc(var(--header-h) + 44px) 0 110px; background: var(--forest); color: #fff; overflow: hidden; isolation: isolate; }
.mhero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 88% 10%, rgba(242, 167, 59, .32), transparent 46%), var(--jaali); background-size: auto, 60px 60px; opacity: 1; }
.mhero-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.mhero h1 { color: #fff; font-size: clamp(2.6rem, 6vw, 4.2rem); display: flex; align-items: baseline; gap: 16px; }
.mhero h1 .urdu { font-size: .6em; color: var(--saffron); }
.mhero-meta { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 14px; font-weight: 700; font-size: .86rem; }
.mhero-meta li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 99px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .92); }
.mhero-meta svg { width: 17px; height: 17px; color: var(--saffron); }
.search { position: relative; flex: 1 1 320px; max-width: 460px; }
.search svg { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--muted); }
.search input { width: 100%; padding: 16px 22px 16px 50px; border-radius: 99px; border: 2px solid transparent; background: #fff; font: inherit; font-size: .96rem; box-shadow: 0 14px 34px rgba(0, 0, 0, .25); transition: border-color .2s, box-shadow .2s; }
.search input:focus { outline: none; border-color: var(--saffron); box-shadow: 0 0 0 5px rgba(242, 167, 59, .3); }
.promo-wrap { position: relative; z-index: 5; margin-top: -72px; padding-bottom: 26px; }
.trust { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-sm); }
.trust li { display: grid; padding: 14px 20px; border-left: 1px solid var(--line); }
.trust li:first-child { border-left: 0; }
.trust b { color: var(--green); font-size: .94rem; }
.trust span { color: var(--muted); font-size: .8rem; }

/* side basket */
.menu-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.side-cart { display: none; }
@media (min-width: 1100px) {
  .menu-layout { grid-template-columns: minmax(0, 1fr) 340px; }
  .side-cart { display: flex; flex-direction: column; position: sticky; top: calc(var(--header-h) + 84px); max-height: calc(100vh - var(--header-h) - 110px); background: var(--paper); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); overflow: hidden; }
  .admin-bar .side-cart { top: calc(var(--header-h) + 116px); }
}
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--sand), var(--paper)); }
.side-head h3 { font-size: 1.3rem; }
.side-eta { background: var(--green); color: var(--saffron); font-weight: 800; font-size: .78rem; padding: 5px 12px; border-radius: 99px; }
.side-items { flex: 1; overflow-y: auto; padding: 4px 18px; }
.side-empty { padding: 34px 20px 40px; text-align: center; color: var(--muted); display: grid; justify-items: center; gap: 6px; }
.side-foot { padding: 16px 18px 20px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }


.promos { position: relative; }
.promo-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 30px; scrollbar-width: none; scroll-behavior: smooth; box-shadow: var(--shadow); }
.promo-track::-webkit-scrollbar { display: none; }
.promo { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 1fr 1fr; min-height: 290px; color: #fff; position: relative; overflow: hidden; }
.promo--red { background: linear-gradient(120deg, #b83514, #8f2b10); }
.promo--green { background: linear-gradient(120deg, #17513c, #0b2a20); }
.promo--gold { background: linear-gradient(120deg, #c97d0c, #8a520a); }
.promo-text { padding: 36px clamp(24px, 5vw, 56px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; position: relative; z-index: 2; }
.promo-tag { background: rgba(255, 255, 255, .18); padding: 5px 14px; border-radius: 99px; font-size: .8rem; font-weight: 800; }
.promo h2 { color: var(--saffron); font-size: clamp(2.4rem, 5vw, 3.6rem); }
.promo--gold h2 { color: #fff; }
.promo p { opacity: .9; margin-bottom: 14px; }
.promo-img { position: relative; }
.promo-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%); mask-image: linear-gradient(90deg, transparent, #000 38%); }
.promo-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; background: rgba(255, 253, 248, .92); box-shadow: var(--shadow-sm); }
.promo-prev { left: 14px; }
.promo-next { right: 14px; }
.promo-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; z-index: 3; }
.promo-dots button { width: 9px; height: 9px; border-radius: 99px; border: 0; background: rgba(255, 255, 255, .5); transition: width .3s var(--ease), background .2s; padding: 0; }
.promo-dots button.on { width: 26px; background: #fff; }

.cats {
  position: -webkit-sticky;
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  background: rgba(251, 245, 234, .97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  /* Stay stuck under fixed header on mobile */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.admin-bar .cats { top: calc(var(--header-h) + 32px); }
@media (max-width: 782px) {
  .admin-bar .cats { top: calc(var(--header-h) + 46px); }
}
.cats-inner { display: flex; align-items: center; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
.cats-arrow { flex: none; width: 38px; height: 38px; }
.cats-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; flex: 1; padding: 2px; }
.cats-scroll::-webkit-scrollbar { display: none; }
.cat-chip { flex: none; padding: 10px 20px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--paper); font-weight: 800; font-size: .88rem; color: var(--muted); white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.cat-chip:hover { border-color: var(--green); color: var(--green); }
.cat-chip.is-active { background: var(--green); border-color: var(--green); color: #fff; }

.menu-body { padding: 36px 0 120px; }
.msec { margin-bottom: 46px; scroll-margin-top: calc(var(--header-h) + 80px); }
.msec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.msec-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.msec-count { color: var(--muted); font-weight: 700; font-size: .88rem; }
.no-results { text-align: center; padding: 60px 0; color: var(--muted); }
.menu-note { text-align: center; color: var(--muted); font-size: .86rem; }

/* ================= OVERLAYS: SHEET / DRAWER ================= */
.overlay { position: fixed; inset: 0; z-index: 350; background: rgba(29, 23, 16, .5); opacity: 0; transition: opacity .3s; }
.overlay.is-open { opacity: 1; }
.sheet {
  position: fixed; z-index: 400; left: 50%; top: 50%; width: min(520px, calc(100% - 28px)); max-height: calc(100% - 40px);
  background: var(--paper); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column;
  transform: translate(-50%, -46%) scale(.97); opacity: 0; transition: transform .35s var(--ease), opacity .25s; box-shadow: 0 40px 90px rgba(20, 12, 4, .35);
}
.sheet.is-open { transform: translate(-50%, -50%); opacity: 1; }
.sheet-close, .drawer-close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 253, 248, .95); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.sheet-close { position: absolute; top: 14px; right: 14px; z-index: 3; }
.sheet-close svg, .drawer-close svg { width: 20px; height: 20px; }
.sheet-media { aspect-ratio: 4 / 3; background: var(--sand); flex: none; }
.sheet-media img { width: 100%; height: 100%; object-fit: cover; }
.sheet-media.ph { display: grid; place-items: center; background: linear-gradient(135deg, #f7e3bd, #efc98a); color: var(--green); }
.sheet-media.ph svg { width: 90px; height: 90px; stroke-width: 1.6; }
.sheet-body { padding: 22px 26px 10px; overflow: auto; }
.sheet-body h3 { font-size: 1.6rem; }
.sheet-ur { color: var(--muted); font-size: 1.1rem; text-align: left; }
.sheet-desc { color: var(--muted); margin-top: 6px; }
.sheet-foot { display: flex; align-items: center; gap: 14px; padding: 16px 26px 24px; }
.qty { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--line); border-radius: 99px; padding: 4px; background: var(--cream); flex: none; }
.qty button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--paper); font-size: 1.3rem; font-weight: 700; line-height: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.qty button:hover { background: var(--green); color: #fff; }
.qty output { min-width: 34px; text-align: center; font-weight: 800; }
.qty--sm button { width: 30px; height: 30px; font-size: 1.05rem; }
.qty--sm output { min-width: 26px; font-size: .92rem; }

.drawer { position: fixed; z-index: 400; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--paper); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .4s var(--ease); box-shadow: -30px 0 80px rgba(20, 12, 4, .25); }
.drawer.is-open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.drawer-head h3 { font-size: 1.4rem; }
.drawer-close { background: var(--cream); box-shadow: none; }
.drawer-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.drawer-scroll { flex: 1; overflow-y: auto; padding: 16px 24px; }
.drawer-foot { padding: 16px 24px 22px; border-top: 1px solid var(--line); background: var(--paper); display: grid; gap: 12px; }
.drawer-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; padding: 30px; color: var(--muted); }
.empty-ic { width: 76px; height: 76px; border-radius: 50%; background: var(--sand); display: grid; place-items: center; color: var(--green); margin-bottom: 6px; }
.empty-ic svg { width: 34px; height: 34px; }
.drawer-empty .btn { margin-top: 12px; }
.line { display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.line img, .line .line-ph { width: 58px; height: 58px; border-radius: 14px; object-fit: cover; background: var(--sand); }
.line-name { font-weight: 800; font-size: .94rem; line-height: 1.3; }
.line-price { color: var(--muted); font-size: .86rem; }
.line-right { display: grid; justify-items: end; gap: 6px; }
.line-sum { font-weight: 800; font-size: .92rem; color: var(--green); }
.sum { display: grid; gap: 6px; }
.sum div { display: flex; justify-content: space-between; gap: 12px; font-weight: 800; }
.sum dd { color: var(--green); }
.sum-note { font-weight: 600 !important; font-size: .84rem; color: var(--muted); }
.sum-note dd { color: var(--muted); }
.foot-note { font-size: .8rem; color: var(--muted); text-align: center; line-height: 1.5; }
.back-link { background: none; border: 0; color: var(--green); font-weight: 800; font-size: .9rem; padding: 4px 0 14px; }
.seg { border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--cream); border-radius: 99px; padding: 5px; margin-bottom: 16px; }
.seg label { position: relative; text-align: center; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: block; padding: 11px 8px; border-radius: 99px; font-weight: 800; font-size: .88rem; color: var(--muted); transition: background .2s, color .2s; }
.seg input:checked + span { background: var(--green); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--saffron); }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field span { font-weight: 800; font-size: .84rem; }
.field input, .field textarea { width: 100%; padding: 13px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--cream); font: inherit; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(15, 58, 44, .1); background: #fff; }
.field.invalid input, .field.invalid textarea { border-color: var(--chili); }
.pay { background: var(--green-3); border-radius: 14px; padding: 12px 16px; font-size: .9rem; color: var(--green); }
.form-err { color: var(--chili); font-weight: 700; font-size: .88rem; margin-top: 12px; }

.basket-bar { display: none; position: fixed; z-index: 160; left: 14px; right: 14px; bottom: 14px; border: 0; border-radius: 99px; background: var(--green); color: #fff; padding: 15px 22px; box-shadow: 0 16px 40px rgba(15, 58, 44, .45); align-items: center; justify-content: space-between; gap: 12px; font-weight: 800; white-space: nowrap; font-size: .95rem; }
.basket-bar-l b { background: var(--saffron); color: var(--ink); border-radius: 99px; padding: 2px 10px; margin-right: 4px; }
.basket-bar-r { color: var(--saffron); }
.track-pill { position: fixed; z-index: 160; left: 18px; bottom: 20px; display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 99px; background: var(--chili); color: #fff; padding: 12px 20px; font-weight: 800; font-size: .88rem; box-shadow: 0 12px 30px rgba(200, 64, 28, .4); }
.track-pill-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.toast { position: fixed; z-index: 700; left: 50%; bottom: 90px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 99px; font-weight: 700; font-size: .9rem; opacity: 0; transition: opacity .3s, transform .3s var(--ease); box-shadow: var(--shadow); max-width: calc(100% - 32px); text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ================= ORDER TRACKER ================= */
.tracker { position: fixed; inset: 0; z-index: 600; overflow-y: auto; background: radial-gradient(circle at 50% -10%, rgba(242, 167, 59, .3), transparent 55%), var(--cream); opacity: 0; transform: translateY(20px); transition: opacity .4s, transform .5s var(--ease); }
.tracker.is-open { opacity: 1; transform: none; }
.tracker-inner { max-width: 520px; margin: 0 auto; padding: 34px 24px 60px; text-align: center; position: relative; }
.tracker-min { position: absolute; top: 24px; right: 20px; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper); display: grid; place-items: center; }
.tracker-min svg { width: 20px; height: 20px; }
.trk-id { font-weight: 800; font-size: .8rem; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.tracker h2 { font-size: clamp(1.8rem, 6vw, 2.3rem); margin: 6px 0 22px; }
.ring { position: relative; width: 240px; height: 240px; margin: 0 auto 18px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 12; }
.ring-bg { stroke: var(--sand); }
.ring-fg { stroke: var(--chili); stroke-linecap: round; stroke-dasharray: 552.9; stroke-dashoffset: 552.9; transition: stroke-dashoffset 1s linear, stroke .6s; }
.ring.done .ring-fg { stroke: var(--wa); }
.ring-mid { position: absolute; inset: 0; display: grid; place-content: center; }
.ring-time { font-family: var(--serif); font-size: 3.4rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.ring-sub { font-size: .82rem; color: var(--muted); margin-top: 6px; font-weight: 700; }
.trk-msg { min-height: 3em; color: var(--green); font-weight: 700; font-style: italic; font-family: var(--serif); font-size: 1.1rem; margin-bottom: 18px; transition: opacity .4s; }
.steps { text-align: left; display: grid; gap: 0; margin: 0 auto 22px; max-width: 380px; }
.steps li { position: relative; display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; padding-bottom: 20px; color: var(--muted); }
.steps li:last-child { padding-bottom: 0; }
.steps li i { grid-row: 1 / 3; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--line); background: var(--paper); margin: 2px 4px; position: relative; z-index: 1; transition: background .4s, border-color .4s; }
.steps li::before { content: ""; position: absolute; left: 14px; top: 26px; bottom: -2px; width: 2px; background: var(--line); }
.steps li:last-child::before { display: none; }
.steps li b { font-size: .98rem; color: var(--muted); }
.steps li span { font-size: .84rem; }
.steps li.done i { background: var(--green); border-color: var(--green); }
.steps li.done::before { background: var(--green); }
.steps li.done b, .steps li.active b { color: var(--ink); }
.steps li.active i { border-color: var(--chili); background: #fff; animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(200, 64, 28, .45); } 100% { box-shadow: 0 0 0 12px rgba(200, 64, 28, 0); } }
.trk-sum { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 16px 20px; text-align: left; font-size: .9rem; margin-bottom: 18px; }
.trk-sum ul { display: grid; gap: 4px; margin-bottom: 10px; }
.trk-sum li { display: flex; justify-content: space-between; gap: 12px; }
.trk-sum .tot { display: flex; justify-content: space-between; border-top: 1px dashed var(--line); padding-top: 10px; font-weight: 800; }
.trk-sum small { display: block; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.trk-actions { display: grid; gap: 10px; margin-bottom: 14px; }
.trk-link { background: none; border: 0; color: var(--muted); text-decoration: underline; font-size: .86rem; padding: 6px; }

/* ================= THEME POLISH (v9) ================= */
body { background: var(--cream) radial-gradient(circle at 1px 1px, rgba(201, 125, 12, .07) 1px, transparent 0) 0 0 / 26px 26px; }

/* marquee */
.marquee { position: relative; background: var(--forest); padding: 20px 0; border-block: 3px solid var(--saffron); }
.marquee::before { content: ""; position: absolute; inset: 0; background: var(--jaali); background-size: 60px 60px; opacity: .6; }
.marquee-track { position: relative; gap: 34px; font-size: 1.5rem; font-style: normal; font-weight: 600; letter-spacing: .005em; }
.marquee-track i { width: 14px; height: 14px; border-radius: 0; transform: rotate(45deg); background: var(--saffron); }

/* section headings */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--chili); letter-spacing: .1em; }
.eyebrow::before, .section-head:not(.section-head--row) .eyebrow::after { content: ""; width: 26px; height: 2px; background: currentColor; opacity: .6; }
.section-location .eyebrow::after { display: none; }
.section-why .eyebrow { color: var(--saffron); }
.section-head h2 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); }

/* gallery: mehrab (arch) frames */
.bento { gap: 16px; }
.bt-tikka, .bt-plat { border-radius: 170px 170px 24px 24px; }
.bt-big { border-radius: 24px 90px 24px 24px; }
.bt { box-shadow: var(--shadow-sm); }
.bt-svc { background: var(--forest) var(--jaali); background-size: auto, 60px 60px; }
.bt-deal { box-shadow: 0 24px 50px rgba(143, 43, 16, .35); }

/* popular */
.popular { background: var(--paper); position: relative; }
.popular::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 10px; background: repeating-linear-gradient(90deg, var(--saffron) 0 24px, var(--chili) 24px 48px, var(--green) 48px 72px); }

/* how it works */
.how-grid { counter-reset: how; position: relative; }
.how-card { overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.how-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.how-card::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 120px; height: 120px; background: var(--jaali); background-size: 60px 60px; opacity: .8; transform: rotate(8deg); }
.how-n { width: 54px; height: 64px; border-radius: 27px 27px 10px 10px; background: linear-gradient(180deg, var(--green-2), var(--forest)); box-shadow: 0 10px 20px rgba(15, 58, 44, .25); }

/* why */
.section-why, .cta-banner { position: relative; isolation: isolate; background-color: var(--forest); }
.section-why::before, .cta-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--jaali); background-size: 60px 60px; }
.cta-banner { background: radial-gradient(circle at 20% 0%, rgba(242, 167, 59, .28), transparent 50%), linear-gradient(135deg, #17513c, var(--forest)); }
.why-icon-wrap { width: 58px; height: 68px; border-radius: 29px 29px 12px 12px; background: linear-gradient(180deg, #ffc15e, var(--saffron)); }
.why-card { backdrop-filter: blur(4px); }

/* location */
.location-photo { border-radius: 0 0 0 0; }
.location-card { border-radius: 40px; }

/* footer */
.site-footer { position: relative; background: var(--forest); border-top: 6px solid var(--saffron); }

/* chips with icons */
.cat-chip { display: inline-flex; align-items: center; gap: 8px; }
.cat-chip svg { width: 18px; height: 18px; stroke-width: 2; }
.cats { background: rgba(255, 253, 248, .94); box-shadow: 0 8px 24px rgba(60, 40, 10, .06); }
.msec-head h2 { position: relative; padding-left: 18px; }
.msec-head h2::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 6px; border-radius: 6px; background: linear-gradient(180deg, var(--saffron), var(--chili)); }
.msec-count { background: var(--sand); padding: 4px 12px; border-radius: 99px; }
.promo-track { box-shadow: 0 30px 60px rgba(8, 36, 27, .35); border: 3px solid rgba(255, 255, 255, .12); }
.promo-text .btn-light { color: var(--green); box-shadow: 0 10px 22px rgba(0, 0, 0, .25); }

/* tracker page */
.tracker { background: radial-gradient(circle at 50% -10%, rgba(242, 167, 59, .35), transparent 55%), var(--cream); }
.tracker::before { content: ""; position: fixed; inset: 0; background: var(--jaali); background-size: 60px 60px; opacity: .28; pointer-events: none; }
.tracker-inner { z-index: 1; }
.tracker-inner { max-width: 540px; }
.ring { width: 260px; height: 260px; filter: drop-shadow(0 20px 30px rgba(200, 64, 28, .18)); }
.ring-bg { stroke: #ead8b4; }
.ring-time { font-size: 3.7rem; }
.tracker.is-cancelled .ring-fg { stroke: #8a8178; }
.tracker.is-cancelled h2 { color: var(--muted); }
.trk-actions { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .trk-actions { grid-template-columns: 1fr; } }

/* rail tiles: price + add at the bottom */
.rail .dish { display: flex; }
.rail .dish-open { width: 100%; }
.rail .dish-info { padding: 14px 16px 66px; }
.rail .dish-add { top: auto; bottom: 12px; right: 12px; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .location-card { grid-template-columns: 1fr; }
  .location-photo { min-height: 320px; }
}
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav { position: fixed; left: 0; right: 0; top: var(--header-h); background: var(--cream); padding: 12px 20px 26px; box-shadow: 0 30px 40px rgba(60, 40, 10, .15); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity .3s, transform .3s var(--ease), visibility .3s; margin: 0; }
  .nav-open .nav { opacity: 1; transform: none; visibility: visible; }
  .nav-list { flex-direction: column; }
  .nav-list a { padding: 14px 8px; font-size: 1.05rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .header-actions { margin-left: auto; }
  .basket-bar:not([hidden]) { display: flex; }
  body.has-cart .float-wa { bottom: 86px; }
  body.has-cart .track-pill { bottom: 86px; }
  body.has-cart .toast { bottom: 150px; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
  .bento .bt { grid-area: auto; }
  .bt-big { grid-column: 1 / 3; grid-row: span 2; }
  .bt-tikka { grid-row: span 2; }
  .bt-deal, .bt-svc { grid-column: 1 / 3; }
  .bt-svc { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .bt-svc ul { display: flex; gap: 18px; flex-wrap: wrap; }
  .how-grid { grid-template-columns: 1fr; }
  .promo { grid-template-columns: 1fr; min-height: 340px; }
  .promo-img { position: absolute; inset: 0 0 0 40%; opacity: .5; }
  .promo-arrow { display: none; }
  .sheet { top: auto; bottom: 0; left: 0; width: 100%; max-height: 92%; border-radius: 28px 28px 0 0; transform: translateY(100%); opacity: 1; }
  .sheet.is-open { transform: none; }
  .section { padding: 72px 0; }
}
@media (max-width: 600px) {
  :root { --header-h: 64px; }
  .container { padding: 0 18px; }
  .nav-cta { display: none; }
  .hero { padding-top: calc(var(--header-h) + 30px); }
  .hero-btns .btn { flex: 1 1 100%; }
  .why-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .section-head--row { align-items: flex-start; flex-direction: column; }
  .rail-nav { display: none; }
  .cats-arrow { display: none; }
  .ring { width: 210px; height: 210px; }
  .ring-time { font-size: 3rem; }
  .logo { font-size: 1.25rem; }
  .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
}

@media (max-width: 1000px) {
  .hero-chips { position: static; margin-top: 34px; flex-wrap: wrap; }
  .trust { grid-template-columns: repeat(2, 1fr); }
  .trust li:nth-child(3) { border-left: 0; }
  .trust li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .hero { display: block; min-height: 0; padding: var(--header-h) 0 48px; }
  .hero-media { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 4 / 3.1; z-index: 0; }
  .hero-media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(180deg, transparent, var(--forest)); }
  .hero::before { background: linear-gradient(180deg, rgba(8, 36, 27, .7) 0, rgba(8, 36, 27, 0) 130px); }
  .hero::after { -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 75%); mask-image: linear-gradient(180deg, transparent 40%, #000 75%); }
  .hero-grid { position: relative; z-index: 1; margin-top: -48px; }
  .hero-content { max-width: none; }
  .hero-urdu-title { font-size: 2.1rem; }
  .hero-en { font-size: 2.5rem; }
  .hero-chip { padding: 12px 16px; }
  .mhero { padding-bottom: 96px; }
  .mhero h1 { font-size: 2.6rem; }
}
@media (max-width: 600px) {
  .trust li { padding: 12px 14px; }
  .dish-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .dish-grid .dish-info { padding: 10px 12px 62px; }
  .dish-grid .dish-desc { display: none; }
  .dish-grid .dish-name { font-size: .92rem; }
  .dish-price { left: 12px; bottom: 14px; font-size: 1.05rem; }
  .dish-add { right: 8px; bottom: 10px; height: 38px; padding: 0 12px 0 8px; }
  .dish-add span { display: none; }
  .dish-add { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .marquee-track { animation: none; }
}