:root{
    --cream:#f4ecdd;
    --black:#161310;
    --black-2:#1f1a15;
    --gold:#e0982f;
    --gold-dark:#c47f1f;
    --rust:#b8472f;
    --brown:#6b4a2a;
    --line:rgba(0,0,0,0.08);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{ 
    font-family:'Work Sans',sans-serif; 
    background:var(--cream); 
    color:var(--black);
  }
  h1,h2,h3,.display{ font-family:'Fraunces',serif; }
  a{ text-decoration:none; color:inherit; }
  img{ 
    max-width:100%; 
    display:block;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-drag: none;     /* Chrome, Safari, Opera */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
  }
  .wrap{ max-width:1220px; margin:0 auto; padding:0 32px; }
  .icon{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.6; }
  svg use{ fill:none; stroke:currentColor; }
  svg{ stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

  .ph{ position:relative; overflow:hidden; background:linear-gradient(135deg,#3a2c1e,#161310);
    display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.35);
    font-size:0.72rem; letter-spacing:1px; text-transform:uppercase; text-align:center; }
  .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .ph::after{ content:attr(data-label); position:relative; z-index:1; padding:0 10px; }

  /* NAV */
  header{ background:var(--black); position:sticky; top:0; z-index:50; transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease; border-bottom: 1px solid transparent; }
  nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:1220px; margin:0 auto; }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand img{ width:52px; height:52px; border-radius:50%; }
  .brand span{ color:var(--cream); font-size:1.3rem; font-weight:700; }
  .navlinks{ display:flex; gap:28px; }
  .navlinks a{ color:rgba(244,236,221,0.75); font-size:0.92rem; font-weight:500; padding-bottom:4px; border-bottom:2px solid transparent; }
  .navlinks a.active, .navlinks a:hover{ color:var(--gold); border-color:var(--gold); }
  .nav-right{ display:flex; align-items:center; gap:22px; }
  .hours-chip{ display:flex; align-items:center; gap:7px; color:var(--cream); font-size:0.85rem; opacity:0.8; transition: opacity 0.2s, outline 0.2s; }
  .hours-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; opacity: 1; }
  .btn{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:0.9rem; padding:11px 22px; border-radius:6px; border:none; cursor:pointer; font-family:'Work Sans'; }
  .btn-gold{ background:var(--gold); color:var(--black); }
  .btn-gold:hover{ background:var(--gold-dark); }
  .btn-outline{ border:1px solid rgba(244,236,221,0.4); color:var(--cream); background:transparent; }
  .btn-outline:hover{ border-color:var(--gold); color:var(--gold); }

  /* HERO */
  .hero{ background:var(--black);color:var(--cream);overflow: hidden;isolation: isolate;position: relative;}
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("../assets/herobg.png") center/cover no-repeat;
    opacity:0.12;    
    z-index:0;
    pointer-events: none; 
  }
  .hero-inner{position: relative;z-index: 1; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; max-width:1220px; margin:0 auto; padding:60px 32px 70px; }
  .kicker{ display:flex; align-items:center; gap:8px; color:var(--rust); font-weight:600; font-size:0.9rem; margin-bottom:14px; }
  .hero h1{ font-size:clamp(2.4rem,4.6vw,3.6rem); line-height:1.08; font-weight:800; }
  .hero h1 .accent{ color:var(--gold); }
  .hero p.sub{ margin:20px 0 30px; color:rgba(244,236,221,0.7); max-width:440px; font-size:1.02rem; }
  .hero-ctas{ display:flex; gap:14px; margin-bottom:26px; flex-wrap:wrap; }
  .delivery-mini{ display:flex; align-items:center; gap:14px; font-size:0.85rem; color:rgba(244,236,221,0.7); }
  .platform-badge{ display:flex; align-items:center; gap:8px; background:rgba(244,236,221,0.06); border:1px solid rgba(244,236,221,0.14); padding:7px 14px 7px 7px; border-radius:30px; }
  .platform-badge .dot{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
  .platform-badge .dot svg{ width:17px; height:17px; }
  .platform-badge span{ font-size:0.82rem; font-weight:600; color:var(--cream); }
  .hero-photo{ position:relative; border-radius:14px; overflow:hidden; height:440px; }

  /* SECTION HEAD */
  .section{ padding:80px 32px; }
  .section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; flex-wrap:wrap; gap:20px; }
  .eyebrow{ display:flex; align-items:center; gap:10px; color:var(--gold-dark); font-size:0.8rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:10px; }
  .eyebrow::before,.eyebrow::after{ content:""; width:24px; height:1px; background:var(--gold-dark); }
  .section-head h2{ font-size:clamp(1.9rem,3.4vw,2.5rem); font-style:italic; font-weight:600; }
  .link-arrow{ font-weight:700; font-size:0.9rem; color:var(--brown); display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(0,0,0,0.15); padding:11px 20px; border-radius:6px; cursor:pointer; background:none; font-family:'Work Sans'; }
  .link-arrow:hover{ border-color:var(--gold-dark); }

  /* CATEGORY CARDS */
  .cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
  .cat-card{ background:#fffaf1; border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(58,44,30,0.08); }
  .cat-card .ph{ height:200px; margin:14px 14px 0; border-radius:12px; }
  .cat-badge{ position:absolute; top:14px; left:14px; z-index:2; width:42px; height:42px; border-radius:50%; background:var(--brown); display:flex; align-items:center; justify-content:center; }
  .cat-badge svg{ width:20px; height:20px; stroke:#fffaf1; fill:none; }
  .cat-body{ padding:20px 22px 26px; }
  .cat-body h3{ font-size:1.15rem; margin-bottom:8px; font-weight:700; font-family:'Work Sans'; color:var(--rust); }
  .cat-body p{ font-size:0.88rem; color:#5c5044; margin-bottom:14px; line-height:1.5; }
  .explore-btn{ font-size:0.88rem; font-weight:700; color:var(--rust); display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; font-family:'Work Sans'; padding:0; }
  .explore-btn svg{ width:15px; height:15px; }
  .explore-btn:hover{ opacity:0.75; }

  /* MENU TABS (target of Explore clicks) */
  .menu-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:44px; }
  .tab-btn{ background:transparent; border:1px solid var(--line); color:var(--black); padding:10px 20px; border-radius:30px; font-size:0.88rem; font-weight:500; cursor:pointer; font-family:'Work Sans'; transition:all 0.2s; opacity:0.75; }
  .tab-btn:hover{ opacity:1; border-color:var(--gold-dark); }
  .tab-btn.active{ background:var(--gold-dark); color:#fff; border-color:var(--gold-dark); font-weight:700; opacity:1; }
  .menu-panel{ display:none; }
  .menu-panel.active{ display:block; animation:fadein 0.35s ease; }
  @keyframes fadein{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
  .menu-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 60px; max-width:920px; margin:0 auto; }
  .menu-item{ display:flex; justify-content:space-between; gap:16px; padding:18px 0; border-bottom:1px dashed var(--line); }
  .menu-item .name{ font-weight:600; font-size:1.02rem; }
  .menu-item .note{ display:block; font-size:0.78rem; color:var(--gold-dark); font-weight:400; margin-top:3px; }
  .menu-item .price{ font-family:'Fraunces',serif; font-weight:700; color:var(--rust); white-space:nowrap; font-size:1.05rem; }

  .combo{ background:#fffaf1; border:1px solid var(--line); border-radius:8px; padding:50px 40px; max-width:920px; margin:60px auto 0; position:relative; }
  .combo::before{ content:"BEST VALUE"; position:absolute; top:-13px; left:40px; background:var(--rust); color:#fff; font-size:0.7rem; font-weight:700; letter-spacing:1.5px; padding:5px 14px; border-radius:3px; }
  .combo h3{ font-size:1.6rem; margin-bottom:24px; color:var(--gold-dark); }

  /* COMBO SECTION (dark) */
  .combo-section{ background:var(--black); color:var(--cream); }
  .combo-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:40px; flex-wrap:wrap; gap:20px; }
  .combo-head h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); }
  .combo-head h2 .accent{ color:var(--gold); font-style:italic; }
  .combo-head p{ color:rgba(244,236,221,0.6); margin-top:10px; max-width:380px; font-size:0.95rem; }
  .combo-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .combo-card{ background:var(--black-2); border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,0.06); }
  .combo-card .ph{ height:170px; }
  .combo-card .cbody{ padding:18px 20px 22px; }
  .combo-card h3{ font-family:'Work Sans'; font-size:1.02rem; font-weight:600; margin-bottom:8px; }
  .combo-card .price{ color:var(--gold); font-family:'Fraunces',serif; font-weight:800; font-size:1.25rem; }

  /* WHY CHOOSE */
  .why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
  .why-card{ background:#fffaf1; border:1px solid rgba(0,0,0,0.06); border-radius:12px; padding:34px 26px; text-align:center; }
  .why-icon{ width:56px; height:56px; border-radius:50%; background:var(--black); color:var(--gold); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
  .why-icon svg{ width:24px; height:24px; }
  .why-card h3{ font-family:'Work Sans'; font-size:1.02rem; font-weight:700; margin-bottom:8px; }
  .why-card p{ font-size:0.85rem; color:#5c5044; line-height:1.5; }

  /* FOOTER */
  footer{ background:var(--black); color:var(--cream); padding-top:64px; }
  .foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:50px; max-width:1220px; margin:0 auto; padding-left:32px; padding-right:32px; }
  .foot-brand p{ color:rgba(244,236,221,0.55); font-size:0.88rem; max-width:220px; margin-top:14px; }
  .foot-notes{ margin-top:20px; font-size:0.75rem; line-height:1.45; max-width:280px; }
  .foot-notes p{ color:rgba(244,236,221,0.45); margin-bottom:5px; font-family:'Work Sans',sans-serif; }
  footer h4{ font-size:0.85rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--gold); margin-bottom:18px; }
  footer ul{ list-style:none; }
  footer li{ margin-bottom:11px; font-size:0.9rem; color:rgba(244,236,221,0.75); display:flex; align-items:center; gap:8px; }
  footer li svg{ width:15px; height:15px; flex-shrink:0; }
  footer li a:hover{ color:var(--gold); }
  .foot-social{ display:flex; gap:10px; margin-bottom:18px; }
  .foot-social a{ width:60px; height:60px; border-radius:50%; background:rgba(244,236,221,0.08); display:flex; align-items:center; justify-content:center; color:var(--cream); }
  .foot-social a svg{ width:30px; height:30px; }
  .foot-social a:hover{ background:var(--gold); color:var(--black); }
  .foot-qr{ display:inline-block; margin-top:4px; }
  .foot-qr a{ display:inline-block; transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
  .foot-qr a:hover{ transform:scale(1.06); }
  footer li{ color:var(--cream); }
  footer li svg{ color:var(--gold); }
  .bottom-bar{ background:var(--gold); color:var(--black); text-align:center; padding:14px; font-size:0.85rem; font-weight:600; }

  /* Hours Card Footer Styles */
  .footer-hours-card {
    margin-top: 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px;
    max-width: 100%;
    transition: all 0.3s ease;
  }
  .foot-brand {
    grid-row: 1 / 3;
  }
  .foot-follow {
    grid-row: 1 / 3;
  }
  #footer-hours-section {
    grid-column: 2 / 4;
    grid-row: 2;
    margin-top: 0;
  }
  .footer-hours-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(224, 152, 47, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  }
  .footer-hours-card h5 {
    font-family: 'Work Sans', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gold);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
  }
  .footer-hours-card h5 svg {
    width: 16px;
    height: 16px;
    color: var(--gold);
    stroke-width: 2px;
  }
  #hours-status-container {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 14px;
    transition: all 0.3s ease;
  }
  #hours-status-container.status-checking {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(244, 236, 221, 0.6);
  }
  #hours-status-container.status-checking .status-indicator-dot {
    background: rgba(244, 236, 221, 0.4);
  }
  #hours-status-container.status-open {
    background: rgba(46, 125, 50, 0.15);
    color: #81c784;
  }
  #hours-status-container.status-open .status-indicator-dot {
    background: #4caf50;
    box-shadow: 0 0 8px #4caf50;
    animation: pulse-green 2s infinite;
  }
  #hours-status-container.status-closed {
    background: rgba(184, 71, 47, 0.15);
    color: #e57373;
  }
  #hours-status-container.status-closed .status-indicator-dot {
    background: #f44336;
    box-shadow: 0 0 6px #f44336;
  }
  .status-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  @keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(76, 175, 80, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
  }
  .hours-schedule-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .schedule-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: rgba(244, 236, 221, 0.65);
    padding: 6px 8px;
    border-radius: 6px;
    border-left: 3px solid transparent;
    transition: all 0.25s ease;
  }
  .schedule-row.active-day {
    background: rgba(224, 152, 47, 0.08);
    border-left-color: var(--gold);
    color: var(--cream);
    font-weight: 600;
  }
  .day-label {
    font-weight: 600;
    flex-shrink: 0;
    width: 80px;
  }
  .time-label {
    text-align: right;
    line-height: 1.45;
  }

  /* MOBILE NAV */
  .hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
  .hamburger span{ width:24px; height:2px; background:var(--cream); border-radius:2px; }
  .mobile-drawer{ display:none; background:var(--black); border-top:1px solid rgba(244,236,221,0.1); padding:8px 32px 20px; }
  .mobile-drawer a{ display:block; padding:12px 0; color:rgba(244,236,221,0.85); font-size:1rem; border-bottom:1px solid rgba(244,236,221,0.08); }
  .mobile-drawer a:hover{ color:var(--gold); }
  .mobile-drawer.open{ display:block; }
  .drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 12, 10, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 49;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  @media (max-width: 960px) {
    .drawer-overlay {
      display: block;
    }
  }
  .drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  @media (max-width:960px){
    .hero-inner{ grid-template-columns:1fr; padding-top:44px; }
    .hero-photo{ height:300px; order:-1; }
    .cat-grid, .combo-row, .why-grid{ grid-template-columns:repeat(2,1fr); }
    .foot-grid{ grid-template-columns:1fr 1fr; gap:32px 24px; }
    .navlinks{ display:none; }
    .hamburger{ display:flex; }
    .section{ padding:56px 24px; }
    .wrap{ padding:0 0px; }
    nav{ padding:14px 20px; }
    .foot-brand, .foot-follow {
      grid-row: auto;
    }
    #footer-hours-section {
      grid-column: 1 / 3;
      grid-row: auto;
      max-width: 440px;
    }
  }

  @media (max-width:700px){
    .hero-inner{ padding:32px 20px 40px; gap:26px; }
    .hero-photo{ height:230px; }
    .hero-ctas{ gap:10px; }
    .btn{ padding:11px 18px; font-size:0.85rem; }
    .delivery-mini{ flex-wrap:wrap; gap:10px; }
    .section-head{ margin-bottom:30px; }
    .section-head, .combo-head{ flex-direction:column; align-items:flex-start; }
    .cat-grid{ grid-template-columns:1fr; gap:18px; }
    .combo-row{ grid-template-columns:1fr; }
    .why-grid{ grid-template-columns:1fr; gap:16px; }
    .menu-grid{ grid-template-columns:1fr; gap:0; }
    .menu-tabs{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
    .tab-btn{ flex-shrink:0; white-space:nowrap; }
    .combo{ padding:32px 22px; }
    .foot-grid{ grid-template-columns:1fr; gap:34px; padding-left:24px; padding-right:24px; }
    .hours-chip span{ display:none; }
    .nav-right .btn span{ display:none; }
    #footer-hours-section {
      grid-column: auto;
      grid-row: auto;
      max-width: 320px;
    }
  }

  @media (max-width:420px){
    .hero h1{ font-size:2rem; }
    .brand span{ font-size:1.1rem; }
    .brand img{ width:42px; height:42px; }
    .cat-card .ph{ height:170px; }
  }

  /* Custom Scrollbar */
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: var(--cream);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--brown);
    border-radius: 5px;
    border: 2px solid var(--cream);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--gold-dark);
  }

  /* Transitions and Hover Effects */
  .btn, .tab-btn, .explore-btn, .link-arrow, .add-menu-btn, .add-combo-btn {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .cat-card, .combo-card, .why-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .cat-card:hover, .combo-card:hover, .why-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(58, 44, 30, 0.15);
  }
  .cat-card .ph img, .combo-card .ph img {
    transition: transform 0.5s ease;
  }
  .cat-card:hover .ph img, .combo-card:hover .ph img {
    transform: scale(1.05);
  }

  /* Hero Showcase Styles */
  .hero-image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }
  .hero-logo-img {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 8px solid rgba(244, 236, 221, 0.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 2;
    animation: float 6s ease-in-out infinite;
  }
  .hero-glow {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 152, 47, 0.15) 0%, transparent 70%);
    z-index: 1;
    filter: blur(20px);
  }
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  
  /* Floating Badges */
  .badge-float {
    position: absolute;
    background: rgba(31, 26, 21, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(244, 236, 221, 0.15);
    color: var(--cream);
    padding: 10px 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 3;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: float-badge 6s ease-in-out infinite;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
  }
  .badge-float:hover {
    animation-play-state: paused;
    transform: translateY(-4px) scale(1.05) !important;
    background: rgba(41, 35, 29, 0.95);
    border-color: rgba(224, 152, 47, 0.45);
    box-shadow: 0 15px 35px rgba(224, 152, 47, 0.2);
  }
  .badge-top-left {
    top: 2%;
    left: -5%;
    animation-delay: 0s;
  }
  .badge-bottom-right {
    bottom: 15%;
    right: -5%;
    animation-delay: 2s;
  }
  .badge-bottom-left {
    bottom: -5%;
    left: 10%;
    animation-delay: 4s;
  }
  @keyframes float-badge {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.02); }
  }
  .badge-icon {
    font-size: 1.3rem;
  }
  .badge-text {
    display: flex;
    flex-direction: column;
    text-align: left;
  }
  .badge-text strong {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gold);
  }
  .badge-text span {
    font-size: 0.7rem;
    opacity: 0.8;
  }

  /* Ratings Badge Custom Styles */
  .badge-ratings {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    min-width: 160px;
  }
  .badge-ratings-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }
  .rating-logo-val {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    font-weight: 700;
  }
  .rating-logo-val strong {
    color: var(--gold);
    display: inline-flex;
    align-items: center;
    gap: 1px;
  }
  .rating-logo-val .star {
    font-size: 0.75rem;
    color: var(--gold);
    vertical-align: middle;
  }
  .badge-rating-img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 50%;
  }
  .rating-separator {
    width: 1px;
    height: 12px;
    background: rgba(244, 236, 221, 0.25);
  }
  .badge-ratings .badge-text {
    align-items: center;
    text-align: center;
  }

  /* About Section Intro */
  .about-intro {
    max-width: 800px;
    margin: 0 auto 50px;
    text-align: center;
  }
  .about-intro h2 {
    font-size: 2.4rem;
    margin: 10px 0 20px;
  }
  .about-lead {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #5c5044;
  }

  /* Menu Item Add Button */
  .menu-item-action {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .add-menu-btn {
    background: var(--rust);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Work Sans', sans-serif;
    transition: all 0.2s;
  }
  .add-menu-btn:hover {
    background: var(--black);
    color: var(--cream);
    transform: scale(1.05);
  }

  /* Combo Card Footer */
  .cbody-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
  }
  .add-combo-btn {
    background: var(--gold);
    color: var(--black);
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Work Sans', sans-serif;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .add-combo-btn:hover {
    background: var(--black);
    color: var(--cream);
    box-shadow: 0 0 0 1px var(--gold);
    transform: translateY(-2px);
  }
  .combo-card .cbody {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 145px;
  }
  .combo-card h3 {
    min-height: 48px;
    margin-bottom: 4px;
  }

  /* Order Modal CSS */
  .order-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 12, 10, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .order-modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  .order-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 90%;
    max-width: 440px;
    background: var(--cream);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    z-index: 1001;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
  }
  .order-modal.open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
  }

  .order-modal-content {
    position: relative;
    padding: 32px 24px 24px 24px;
  }

  .order-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--black);
    opacity: 0.6;
    transition: all 0.2s ease;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .order-modal-close:hover {
    opacity: 1;
    color: var(--rust);
  }

  .order-modal-header {
    text-align: center;
    margin-bottom: 28px;
  }
  .order-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: rgba(184, 71, 47, 0.1);
    border-radius: 50%;
    margin-bottom: 12px;
  }
  .order-modal-header h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.6rem;
    color: var(--black);
    margin: 0 0 6px 0;
  }
  .order-modal-subtitle {
    font-size: 0.95rem;
    color: #6b5e51;
    margin: 0;
    line-height: 1.4;
  }
  .order-modal-subtitle strong {
    color: var(--rust);
    font-weight: 600;
  }

  .order-platforms-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .platform-card {
    display: flex;
    align-items: center;
    padding: 16px;
    border-radius: 16px;
    text-decoration: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  .platform-logo-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.02);
    margin-right: 16px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }
  .platform-card-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .platform-info {
    flex: 1;
  }
  .platform-info h4 {
    font-size: 1.1rem;
    margin: 0 0 4px 0;
    color: var(--black);
    font-weight: 700;
  }
  .platform-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
  }
  
  .tag-gds {
    background: rgba(220, 168, 55, 0.15);
    color: var(--gold-dark);
  }
  .tag-zomato {
    background: rgba(226, 56, 75, 0.15);
    color: #e2384b;
  }

  .platform-info p {
    font-size: 0.85rem;
    color: #8c8275;
    margin: 0;
    line-height: 1.3;
  }

  .platform-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c4b5a2;
    transition: all 0.3s ease;
    padding-left: 8px;
    flex-shrink: 0;
  }

  /* Hover Animations */
  .platform-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  }
  .platform-card:hover .platform-logo-wrapper {
    transform: scale(1.05);
  }
  .platform-card:hover .platform-arrow {
    transform: translateX(4px);
  }

  /* Card Custom Brand Styling on Hover */
  .platform-card.card-gds:hover {
    border-color: rgba(220, 168, 55, 0.4);
    background: linear-gradient(135deg, #ffffff 0%, rgba(220, 168, 55, 0.03) 100%);
  }
  .platform-card.card-gds:hover .platform-arrow {
    color: var(--gold-dark);
  }

  .platform-card.card-zomato:hover {
    border-color: rgba(226, 56, 75, 0.3);
    background: linear-gradient(135deg, #ffffff 0%, rgba(226, 56, 75, 0.03) 100%);
  }
  .platform-card.card-zomato:hover .platform-arrow {
    color: #e2384b;
  }

  /* QR Lightbox Modal CSS */
  .qr-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 12, 10, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .qr-modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  .qr-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 90%;
    max-width: 400px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
    z-index: 2001;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
  }
  .qr-modal.open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
  }

  .qr-modal-content {
    position: relative;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .qr-large-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
  }

  .qr-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    transition: all 0.2s ease;
  }
  .qr-modal-close:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
  }

  @media (max-width: 960px) {
    .hero-image-wrapper {
      max-width: 320px;
      margin-top: 20px;
    }
    .hero-logo-img {
      width: 200px;
      height: 200px;
    }
    .hero-glow {
      width: 240px;
      height: 240px;
    }
    .badge-float {
      padding: 8px 12px;
    }
    .badge-icon {
      font-size: 1.1rem;
    }
    .badge-text strong {
      font-size: 0.75rem;
    }
    .badge-text span {
      font-size: 0.65rem;
    }
    .badge-ratings {
      padding: 8px 10px;
      gap: 4px;
      min-width: 130px;
    }
    .badge-rating-img {
      width: 14px;
      height: 14px;
    }
    .rating-logo-val {
      font-size: 0.75rem;
      gap: 3px;
    }
    .rating-logo-val .star {
      font-size: 0.65rem;
    }
    .rating-separator {
      height: 10px;
    }
  }

  @media (max-width: 480px) {
    .order-modal {
      width: 95%;
      border-radius: 20px;
    }
    .order-modal-content {
      padding: 24px 16px 20px 16px;
    }
    .platform-logo-wrapper {
      width: 52px;
      height: 52px;
      margin-right: 12px;
    }
    .platform-info h4 {
      font-size: 1rem;
    }
    .badge-top-left {
      left: -2%;
    }
    .badge-bottom-right {
      right: -2%;
    }
  }

  /* Scrolled Header Glassmorphism */
  header.header-scrolled {
    background: rgba(22, 19, 16, 0.82) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(244, 236, 221, 0.08);
  }

  /* Veg Dot Indicator */
  .veg-indicator {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 1.5px solid #2e7d32;
    margin-right: 8px;
    vertical-align: middle;
    position: relative;
    background: #fff;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  .veg-indicator::after {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    background: #2e7d32;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* Specialty Menu Badges */
  .badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 20px;
    margin-left: 8px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Work Sans', sans-serif;
  }
  .badge-best {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fcd34d;
  }
  .badge-spicy {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
  }
  .badge-chef {
    background: #ffedd5;
    color: #ea580c;
    border: 1px solid #fed7aa;
  }

  /* Support block display for name to push notes to a new line */
  .menu-item .name {
    display: block;
  }

  /* ==========================================================================
     IMAGE SHIMMER & SKELETON LOADERS
     ========================================================================== */
  
  /* Prevent images from flashing in unstyled if JS is active */
  .js-active img.img-loading {
    opacity: 0 !important;
  }

  .img-loaded {
    opacity: 1 !important;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* Shimmer skeleton loader */
  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }

  .shimmer-loading {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #1f1a15 25%, #2d261f 50%, #1f1a15 75%) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.5s infinite linear !important;
  }

  /* Ensure child images remain hidden while parent is shimmering */
  .shimmer-loading img {
    opacity: 0 !important;
  }

  /* Image Error State / Fallback Styling */
  .img-error-state {
    position: relative !important;
    background: linear-gradient(135deg, #161310, #221d18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(224, 152, 47, 0.15) !important;
    min-height: 140px;
    border-radius: 12px;
    overflow: hidden;
  }

  .img-error-state img:not(.fallback-logo-small) {
    display: none !important;
  }

  .error-fallback-ui {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    color: var(--cream);
    text-align: center;
    z-index: 10;
  }

  .fallback-icon-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .fallback-logo-small {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50%;
    border: 1.5px solid var(--gold);
    animation: fallbackLogoPulse 2s infinite ease-in-out;
    box-shadow: 0 0 10px rgba(224, 152, 47, 0.2);
  }

  .fallback-text {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: rgba(244, 236, 221, 0.65);
    text-transform: uppercase;
    font-family: 'Work Sans', sans-serif;
  }

  @keyframes fallbackLogoPulse {
    0%, 100% {
      transform: scale(1);
      opacity: 0.8;
    }
    50% {
      transform: scale(1.08);
      opacity: 1;
      box-shadow: 0 0 15px rgba(224, 152, 47, 0.4);
    }
  }

  /* FAQ Section Styling */
  .faq-container {
    max-width: 800px;
    margin: 40px auto 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .faq-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(244, 236, 221, 0.1);
    border-radius: 12px;
    padding: 16px 20px;
    transition: all 0.3s ease;
    overflow: hidden;
  }

  .faq-card[open] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(224, 152, 47, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }

  .faq-card:hover {
    border-color: rgba(224, 152, 47, 0.2);
  }

  .faq-question {
    font-family: 'Fraunces', serif;
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
  }

  .faq-question::-webkit-details-marker {
    display: none;
  }

  .faq-question::after {
    content: '+';
    font-family: 'Work Sans', sans-serif;
    font-size: 1.5rem;
    color: var(--gold);
    transition: transform 0.3s ease;
    line-height: 1;
  }

  .faq-card[open] .faq-question::after {
    content: '−';
    transform: rotate(180deg);
  }

  .faq-answer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(244, 236, 221, 0.1);
    line-height: 1.6;
    font-size: 0.95rem;
  }
  
  .faq-answer p {
    margin: 0;
  }