:root {
     --brand-50: #eff6ff;
     --brand-100: #dbeafe;
     --brand-200: #bfdbfe;
     --brand-300: #93c5fd;
     --brand-400: #60a5fa;
     --brand-500: #3b82f6;
     --brand-600: #2563eb;
     --brand-700: #1d4ed8;
     --brand-800: #1e40af;
     --ink: #0f172a;
     --muted: #64748b;
     --line: #e2e8f0;
     --bg: #f0f9ff;
     --card: #ffffff;
     --ok: #15803d;
     --err: #b91c1c;
     --radius: 16px;
     --gap: 14px;
     --shadow: 0 1px 3px rgba(0,0,0,.08), 0 10px 28px rgba(0,0,0,.08);
 }

 * {
     box-sizing: border-box
 }

 html, body {
     height: 100%
 }

 body {
     margin: 0;
     font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
     background: var(--bg);
     color: var(--ink)
 }

 img {
     max-width: 100%;
     display: block
 }

 a {
     color: var(--brand-700);
     text-decoration: none
 }

 button {
     font: inherit
 }

 header {
     position: sticky;
     top: 0;
     z-index: 40;
     background: #fff;
     border-bottom: 1px solid var(--line);
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     padding: 10px 18px;
     transition: box-shadow .18s ease
 }

     header.elevated {
         box-shadow: 0 8px 24px rgba(2,6,23,.06)
     }

 .brand {
     font-weight: 800;
     letter-spacing: .3px
 }

 nav {
     display: flex;
     gap: 10px;
     align-items: center;
     flex-wrap: wrap
 }

     nav a {
         padding: 8px 10px;
         border-radius: 999px
     }

         nav a:hover {
             background: var(--brand-50)
         }

 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     border: none;
     border-radius: 999px;
     padding: 10px 14px;
     cursor: pointer;
     box-shadow: var(--shadow);
     transition: transform .05s ease, filter .15s
 }

     .btn:active {
         transform: translateY(1px)
     }

     .btn.primary {
         color: #fff;
         background: linear-gradient(135deg,var(--brand-600),var(--brand-700))
     }

     .btn.secondary {
         background: var(--brand-200);
         color: #0f172a
     }

     .btn.ghost {
         background: #fff;
         color: var(--brand-700);
         border: 1px solid var(--line)
     }

     .btn[disabled] {
         opacity: .6;
         cursor: not-allowed
     }

 .hero {
     position: relative;
     min-height: 48vh;
     display: grid;
     place-items: center;
     text-align: center;
     color: #fff;
     padding: 70px 18px;
     background: linear-gradient(180deg,rgba(30,64,175,.55),rgba(2,6,23,.55)),url('https://source.unsplash.com/1600x900/?indian,restaurant') center/cover no-repeat
 }

     .hero h1 {
         font-size: clamp(28px,5vw,44px);
         margin: .2em 0
     }

     .hero p {
         max-width: 760px;
         margin: 0 auto 18px;
         color: #eaf2ff
     }

 .badges {
     display: flex;
     gap: 8px;
     justify-content: center;
     flex-wrap: wrap
 }

 .pill {
     background: #e0f2fe;
     color: #075985;
     border: 1px solid #7dd3fc;
     padding: 6px 10px;
     border-radius: 999px;
     font-size: 12px
 }

 .container {
     max-width: 1180px;
     margin: 30px auto;
     padding: 0 18px
 }

 .section-title {
     display: flex;
     align-items: center;
     gap: 10px;
     margin: 6px 0 12px
 }

     .section-title h2 {
         margin: 0
     }

 .layout {
     display: grid;
     grid-template-columns: 260px 1fr;
     gap: 16px;
     align-items: start
 }

 .sidebar {
     position: sticky;
     top: 72px;
     background: #fff;
     border: 1px solid var(--line);
     box-shadow: var(--shadow);
     border-radius: 16px;
     padding: 14px;
     height: fit-content
 }

 .search {
     display: flex;
     align-items: center;
     gap: 8px;
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 999px;
     padding: 8px 12px
 }

     .search input {
         flex: 1;
         border: none;
         outline: none
     }

 .side-nav {
     display: grid;
     gap: 8px;
     margin-top: 10px
 }

     .side-nav .chip {
         width: 100%;
         justify-content: space-between;
         padding: 10px 12px;
         border-radius: 12px;
         border: 1px solid var(--line);
         background: #fff;
         text-align: left;
         cursor: pointer
     }

         .side-nav .chip[aria-pressed="true"] {
             background: var(--brand-700);
             color: #fff;
             border-color: transparent
         }

 #sideOverlay {
     position: fixed;
     inset: 0;
     background: rgba(2,6,23,.5);
     backdrop-filter: blur(2px);
     opacity: 0;
     visibility: hidden;
     transition: opacity .2s ease;
     z-index: 49
 }

     #sideOverlay.show {
         opacity: 1;
         visibility: visible
     }

 .show-mobile {
     display: none
 }

 @media(max-width:980px) {
     .layout {
         grid-template-columns: 1fr
     }

     .sidebar {
         position: fixed;
         left: -320px;
         top: 0;
         bottom: 0;
         width: 300px;
         max-width: 90vw;
         border-right: 1px solid var(--line);
         border-radius: 0;
         z-index: 50;
         transition: left .25s ease
     }

         .sidebar.open {
             left: 0
         }

     .show-mobile {
         display: inline-flex
     }
 }

 .grid {
     display: grid;
     gap: var(--gap)
 }

     .grid.cards {
         grid-template-columns: repeat(auto-fill,minmax(240px,1fr))
     }

 .card {
     background: var(--card);
     border: 1px solid var(--line);
     border-radius: var(--radius);
     overflow: hidden;
     box-shadow: var(--shadow);
     display: flex;
     flex-direction: column;
     transition: transform .12s ease
 }

     .card:hover {
         transform: translateY(-2px)
     }

 .thumb {
     position: relative;
     cursor: zoom-in
 }

     .thumb img {
         width: 100%;
         height: 170px;
         object-fit: cover
     }

 .badge {
     position: absolute;
     left: 10px;
     top: 10px;
     background: #1e40af;
     color: #fff;
     padding: 4px 8px;
     border-radius: 999px;
     font-size: 12px
 }

 .veg {
     position: absolute;
     right: 10px;
     top: 10px;
     background: #f0fdf4;
     border: 1px solid #bbf7d0;
     color: #065f46;
     padding: 4px 8px;
     border-radius: 999px;
     font-size: 12px
 }

 .nv {
     position: absolute;
     right: 10px;
     top: 10px;
     background: #fff1f2;
     border: 1px solid #fecdd3;
     color: #881337;
     padding: 4px 8px;
     border-radius: 999px;
     font-size: 12px
 }

 .card-body {
     padding: 12px;
     display: flex;
     flex-direction: column;
     gap: 8px
 }

 .muted {
     color: var(--muted)
 }

 .price {
     font-weight: 700;
     color: var(--brand-700)
 }

 .row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px
 }

 .qty {
     display: inline-flex;
     align-items: center;
     border: 1px solid var(--line);
     border-radius: 10px;
     overflow: hidden
 }

     .qty input {
         width: 58px;
         text-align: center;
         border: none;
         padding: 8px
     }

     .qty button {
         background: #f8fafc;
         color: #0f172a;
         border: none;
         padding: 8px 10px;
         cursor: pointer
     }

 .skeleton {
     background: linear-gradient(90deg,#e5edf8 25%,#f2f6fb 37%,#e5edf8 63%);
     animation: sheen 1.3s infinite;
     background-size: 400% 100%
 }

 @keyframes sheen {
     0% {
         background-position: 100% 0
     }

     100% {
         background-position: 0 0
     }
 }

 #overlay {
     position: fixed;
     inset: 0;
     background: rgba(2,6,23,.5);
     backdrop-filter: saturate(120%) blur(2px);
     opacity: 0;
     visibility: hidden;
     transition: opacity .2s ease;
     z-index: 39
 }

     #overlay.show {
         opacity: 1;
         visibility: visible
     }

 #drawer {
     position: fixed;
     top: 0;
     right: -440px;
     width: 400px;
     max-width: 92vw;
     height: 100%;
     background: #fff;
     border-left: 1px solid var(--line);
     box-shadow: var(--shadow);
     transition: right .25s ease;
     z-index: 50;
     display: flex;
     flex-direction: column
 }

     #drawer.open {
         right: 0
     }

     #drawer header {
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 12px 14px;
         border-bottom: 1px solid var(--line);
         background: linear-gradient(135deg,var(--brand-600),var(--brand-700));
         color: #fff
     }

 #cartTable {
     width: 100%;
     border-collapse: collapse
 }

     #cartTable th, #cartTable td {
         padding: 8px;
         border-bottom: 1px solid #f1f5f9;
         text-align: left
     }

 #totals {
     border-top: 1px dashed var(--line);
     margin-top: 8px;
     padding-top: 8px
 }

 .right {
     text-align: right
 }

 .empty {
     padding: 30px;
     text-align: center;
     color: var(--muted)
 }

 footer {
     padding: 28px 18px;
     margin-top: 40px;
     border-top: 1px solid var(--line);
     background: #fff
 }

 #toasts {
     position: fixed;
     right: 16px;
     bottom: 16px;
     display: flex;
     flex-direction: column;
     gap: 10px;
     z-index: 60
 }

 .toast {
     background: #fff;
     border: 1px solid var(--line);
     padding: 10px 12px;
     border-radius: 12px;
     box-shadow: var(--shadow)
 }

     .toast.ok {
         border-color: #bbf7d0
     }

     .toast.err {
         border-color: #fecaca
     }

 body.modal-open {
     overflow: hidden
 }

 #quickView {
     position: fixed;
     inset: 0;
     background: rgba(2,6,23,.6);
     backdrop-filter: blur(2px) saturate(120%);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 70;
     opacity: 0;
     visibility: hidden;
     transition: opacity .2s ease
 }

     #quickView.open {
         opacity: 1;
         visibility: visible
     }

 .qv-card {
     width: min(92vw,820px);
     max-height: 92vh;
     background: #fff;
     border-radius: 22px;
     box-shadow: var(--shadow);
     overflow: hidden;
     display: flex;
     flex-direction: column
 }

 .qv-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 14px 18px;
     border-bottom: 1px solid var(--line)
 }

 .qv-media img {
     width: 100%;
     height: min(48vh,460px);
     object-fit: cover
 }

 .qv-body {
     padding: 14px 18px;
     display: grid;
     gap: 12px
 }

 .qv-footer {
     position: sticky;
     bottom: 0;
     background: #fff;
     border-top: 1px solid var(--line);
     box-shadow: 0 -6px 20px rgba(2,6,23,.06);
     display: grid;
     grid-template-columns: 160px 1fr auto;
     gap: 12px;
     align-items: center;
     padding: 12px 16px
 }

 .qv-total {
     font-weight: 800;
     font-size: 18px;
     color: var(--ink);
     text-align: right
 }

 .stepper {
     display: inline-flex;
     align-items: center;
     background: var(--brand-50);
     border: 1px solid var(--brand-200);
     border-radius: 999px;
     padding: 0 6px
 }

     .stepper input {
         width: 52px;
         text-align: center;
         border: none;
         background: transparent;
         padding: 10px 6px
     }

     .stepper button {
         width: 36px;
         height: 36px;
         border: none;
         background: transparent;
         cursor: pointer;
         font-size: 18px
     }

 .btn.add {
     padding: 14px 16px;
     font-weight: 700
 }

 .qv-close {
     border-radius: 999px;
     width: 36px;
     height: 36px;
     display: grid;
     place-items: center
 }

 @media(max-width:560px) {
     .qv-footer {
         grid-template-columns: 1fr;
     }

     .qv-total {
         text-align: left;
         margin-top: 2px
     }
 }

.icon-btn{ color: var(--brand-600); }                 /* base blue */
  .icon-btn:hover{ color: var(--brand-700);             /* hover blue */
                     background: var(--brand-50);
                     border-color: var(--brand-200); }
  .icon{ width:20px; height:20px; display:block; }
  

  /* Animated fiery text */
.brand-hot{
  position:relative;
  display:inline-block;
  font-weight:800;
  background: linear-gradient(90deg,#ffd27d,#ff9d3a,#ff6a00,#b91c1c,#ff6a00,#ff9d3a,#ffd27d);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 0 10px rgba(255,128,0,.35), 0 0 24px rgba(255,80,0,.25);
  background-size:200% 100%;
  animation: flameSweep 4s linear infinite, flicker 1.7s steps(2,end) infinite;
  will-change: filter, background-position, transform;
}
.brand-hot::after{
  content:"🔥";
  position:absolute;
  right:-1.1em;
  top:-0.25em;
  font-size:1.1em;
  animation: floatUp 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255,120,0,.5));
}
.brand-hot:hover{ transform: rotate(-1deg) scale(1.02); }

/* Animations */
@keyframes flameSweep{ to{ background-position:-200% 0; } }
@keyframes flicker{
  0%{ filter:brightness(1); }
  20%{ filter:brightness(1.15); }
  40%{ filter:brightness(.95); }
  60%{ filter:brightness(1.2); }
  80%{ filter:brightness(1); }
  100%{ filter:brightness(1.1); }
}
@keyframes floatUp{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-3px) rotate(-4deg); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .brand-hot, .brand-hot::after{ animation:none; }
}

/* WhatsApp hotline pill */
.hotline{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px; border-radius:999px;
  background:#fff; border:1px solid var(--line, #e2e8f0);
  box-shadow:0 2px 10px rgba(2,6,23,.06);
  text-decoration:none; white-space:nowrap;
  color:var(--brand-700, #1d4ed8); font-weight:700;
}

.hotline .icon{
  width:22px; height:22px; flex:0 0 22px;
  color:#25D366; /* WhatsApp green */
}

.hotline .label{ color:var(--ink, #0f172a); font-weight:700; }
.hotline .num{ color:#ff7a18; /* brand-hot */ font-weight:800; font-variant-numeric:tabular-nums; }
.hotline .tag{
  margin-left:4px; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.2px;
  background:#e6fbeF; color:#0f766e; border:1px solid #b7f0da;
}

/* Hover/active */
.hotline:hover{ filter:saturate(110%); box-shadow:0 6px 18px rgba(2,6,23,.10); }
.hotline:active{ transform:translateY(1px); }

/* Responsive: condense on narrower screens */
@media (max-width: 1024px){
  .hotline{ padding:8px 12px; gap:8px; }
  .hotline .tag{ display:none; }                 /* hide small badge */
}
@media (max-width: 720px){
  .hotline .label, .hotline .num{ display:none; } /* show only icon */
  .hotline{ padding:8px 10px; }
}