@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

      :root {
        --red: #e83f35;
        --red2: #c92e28;
        --orange: #ff8a3d;
        --ink: #202124;
        --muted: #74777b;
        --soft: #f7f7f8;
        --line: #e7e7e8;
        --green: #278a56;
        --blue: #4267bd;
        --shadow: 0 8px 25px rgba(26, 28, 31, .08);
        --ease: cubic-bezier(.22, 1, .36, 1)
      }

      * {
        box-sizing: border-box
      }

      html {
        scroll-behavior: smooth
      }

      body {
        margin: 0;
        color: var(--ink);
        background: #fff;
        font-family: 'DM Sans', sans-serif
      }

      body.lock {
        overflow: hidden
      }

      button,
      input {
        font: inherit
      }

      button {
        border: 0;
        cursor: pointer
      }

      a {
        color: inherit;
        text-decoration: none
      }

      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover
      }

      .container {
        max-width: 1240px;
        margin: auto;
        padding: 0 28px
      }

      .topbar {
        height: 33px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: #fff;
        background: var(--red);
        font-size: 11px
      }

      .topbar b {
        letter-spacing: .05em
      }

      .topbar a {
        text-decoration: underline;
        text-underline-offset: 3px
      }

      .nav {
        position: sticky;
        top: 0;
        z-index: 40;
        border-bottom: 1px solid var(--line);
        background: rgba(255, 255, 255, .94);
        backdrop-filter: blur(16px)
      }

      .navin {
        height: 76px;
        display: flex;
        align-items: center;
        gap: 27px
      }

     .brand {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .brand img {
        width: 300px;
        height: auto;
        max-height: 150px;
        object-fit: contain;
    }

      .branddot {
        color: #ff7c33
      }

      .city {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 10px 12px;
        color: #44474b;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 7px;
        font-size: 12px
      }

      .city svg {
        color: var(--red)
      }

      .navsearch {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
        max-width: 420px;
        height: 43px;
        padding: 0 13px;
        color: #84878a;
        background: #f7f7f8;
        border: 1px solid #ebebed;
        border-radius: 8px
      }

      .navsearch svg {
        color: #73767a
      }

      .navsearch input {
        width: 100%;
        border: 0;
        outline: 0;
        background: none;
        color: var(--ink);
        font-size: 12px
      }

      .navsearch input::placeholder {
        color: #97999b
      }

      .navlinks {
        display: flex;
        align-items: center;
        gap: 21px;
        margin-left: auto;
        color: #5f6266;
        font-size: 12px
      }

      .navlinks a:hover {
        color: var(--red)
      }

      .navbtn {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 9px 0;
        color: #414449;
        background: none;
        font-size: 12px
      }

      .bagcount {
        min-width: 18px;
        height: 18px;
        display: grid;
        place-items: center;
        padding: 0 5px;
        color: #fff;
        border-radius: 50%;
        background: var(--red);
        font-size: 9px;
        font-weight: 700
      }

      .mobilemenu {
        display: none;
        padding: 7px;
        background: none;
        color: var(--ink)
      }

      .hero {
        padding: 31px 0 28px;
        background: linear-gradient(180deg, #fff 0%, #fff 67%, #fff8f5 100%)
      }

      .hero-grid {
        display: grid;
        grid-template-columns: 1fr 1.12fr;
        gap: 26px;
        align-items: stretch
      }

      .hero-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 38px 14px 38px 0
      }

      .eyebrow {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--red);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .16em;
        text-transform: uppercase
      }

      .eyebrow i {
        width: 21px;
        height: 2px;
        background: var(--red)
      }

      .hero h1 {
        max-width: 550px;
        margin: 19px 0 15px;
        font: 800 clamp(43px, 5.5vw, 74px)/1.01 'Plus Jakarta Sans', sans-serif;
        letter-spacing: -.085em
      }

      .hero h1 span {
        color: var(--red)
      }

      .hero-copy>p {
        max-width: 430px;
        margin: 0;
        color: #6d7075;
        font-size: 14px;
        line-height: 1.65
      }

      .hero-ctas {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 26px
      }

      .primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 18px;
        border-radius: 7px;
        color: #fff;
        background: var(--red);
        font-size: 12px;
        font-weight: 700;
        transition: .2s
      }

      .primary:hover {
        background: var(--red2);
        box-shadow: 0 7px 15px rgba(232, 63, 53, .2)
      }

      .secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 17px;
        border: 1px solid var(--line);
        border-radius: 7px;
        color: #55585d;
        background: #fff;
        font-size: 12px;
        font-weight: 600
      }

      .secondary:hover {
        border-color: #bfc1c4;
        color: var(--red)
      }

      .hero-proof {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 27px;
        color: #8a8d92;
        font-size: 10px
      }

      .mini-avatars {
        display: flex;
        padding-left: 4px
      }

      .mini-avatars span {
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        margin-left: -5px;
        border: 2px solid white;
        border-radius: 50%;
        background: #e1b196;
        color: #fff;
        font-size: 7px;
        font-weight: 700
      }

      .mini-avatars span:nth-child(2) {
        background: #a4c3a0
      }

      .mini-avatars span:nth-child(3) {
        background: #777e99
      }

      .hero-proof strong {
        display: block;
        color: #34373b;
        font-size: 11px;
        margin-bottom: 3px
      }

      .hero-media {
        position: relative;
        min-height: 372px;
        overflow: hidden;
        border-radius: 11px;
        background: #f3ded5
      }

      .hero-media:after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(50, 13, 8, .33), transparent 57%, rgba(0, 0, 0, .06))
      }

      .hero-media img {
        transition: transform .6s var(--ease)
      }

      .hero-media:hover img {
        transform: scale(1.04)
      }

      .hero-content {
        position: absolute;
        z-index: 2;
        left: 31px;
        top: 34px;
        color: #fff
      }

      .hero-content small {
        display: inline-block;
        padding: 6px 9px;
        border-radius: 5px;
        background: var(--red);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase
      }

      .hero-content h2 {
        max-width: 310px;
        margin: 15px 0 7px;
        font: 800 37px/1.04 'Plus Jakarta Sans', sans-serif;
        letter-spacing: -.08em
      }

      .hero-content p {
        margin: 0;
        color: #ffe8df;
        font-size: 12px
      }

      .hero-dots {
        position: absolute;
        z-index: 2;
        bottom: 19px;
        left: 31px;
        display: flex;
        gap: 5px
      }

      .hero-dots i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .5)
      }

      .hero-dots i:first-child {
        width: 21px;
        border-radius: 8px;
        background: #fff
      }

      .hero-deal {
        position: absolute;
        z-index: 3;
        right: 25px;
        bottom: 22px;
        padding: 10px 12px;
        border-radius: 8px;
        color: #4d281e;
        background: #ffd693;
        font-size: 10px;
        font-weight: 800;
        box-shadow: var(--shadow)
      }

      .section {
        padding: 46px 0
      }

      .section.grey {
        background: #fafafa
      }

      .sectionhead {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 20px
      }

      .sectionhead h2 {
        margin: 0;
        font: 800 29px/1 'Plus Jakarta Sans', sans-serif;
        letter-spacing: -.065em
      }

      .sectionhead p {
        margin: 0 0 3px;
        color: #8d9094;
        font-size: 11px
      }

      .viewall {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--red);
        font-size: 11px;
        font-weight: 700
      }

      .viewall:hover {
        text-decoration: underline;
        text-underline-offset: 3px
      }

      .cuisine-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 19px;
        margin-top: 26px
      }

      .cuisine {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        color: #45484c;
        background: none;
        font-size: 11px;
        font-weight: 600
      }

      .cuisine-img {
        width: 100%;
        aspect-ratio: 1;
        border-radius: 50%;
        overflow: hidden;
        background: #f1eeeb;
        box-shadow: 0 3px 12px rgba(30, 32, 34, .07);
        transition: transform .22s var(--ease), box-shadow .22s
      }

      .cuisine:hover .cuisine-img {
        transform: translateY(-5px);
        box-shadow: 0 9px 20px rgba(30, 32, 34, .13)
      }

      .cuisine-img img {
        transition: transform .25s var(--ease)
      }

      .cuisine:hover img {
        transform: scale(1.08)
      }

      .filters {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 24px 0 21px;
        overflow: auto;
        scrollbar-width: none
      }

      .filters::-webkit-scrollbar {
        display: none
      }

      .filter {
        display: flex;
        align-items: center;
        gap: 7px;
        flex: 0 0 auto;
        min-height: 35px;
        padding: 0 12px;
        border: 1px solid var(--line);
        border-radius: 5px;
        color: #676a6f;
        background: #fff;
        font-size: 10px;
        font-weight: 600
      }

      .filter:hover {
        border-color: var(--red);
        color: var(--red)
      }

      .filter.active {
        border-color: var(--red);
        color: var(--red);
        background: #fff6f4
      }

      .filter svg {
        color: var(--red)
      }

      .restaurant-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 23px 19px
      }

      .restaurant-card {
        overflow: hidden;
        border: 1px solid #e9e9ea;
        border-radius: 10px;
        background: #fff;
        transition: transform .23s var(--ease), box-shadow .23s ease
      }

      .restaurant-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 28px rgba(23, 24, 26, .1)
      }

      .restaurant-image {
        position: relative;
        overflow: hidden;
        height: 190px;
        background: #eceae7
      }

      .restaurant-image img {
        transition: transform .35s var(--ease)
      }

      .restaurant-card:hover .restaurant-image img {
        transform: scale(1.05)
      }

      .promobadge {
        position: absolute;
        left: 12px;
        bottom: 11px;
        padding: 6px 8px;
        border-radius: 4px;
        color: #fff;
        background: #1b7b4d;
        font-size: 9px;
        font-weight: 700
      }

      .favorite {
        position: absolute;
        right: 12px;
        top: 12px;
        width: 31px;
        height: 31px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #fff;
        background: rgba(0, 0, 0, .38)
      }

      .favorite.active,
      .favorite:hover {
        color: var(--red);
        background: #fff
      }

      .restaurant-body {
        padding: 14px 15px 15px
      }

      .restaurant-title {
        display: flex;
        justify-content: space-between;
        gap: 10px
      }

      .restaurant-title h3 {
        margin: 0;
        font-size: 15px;
        letter-spacing: -.025em
      }

      .rating {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 4px 6px;
        border-radius: 4px;
        color: #fff;
        background: #238550;
        font-size: 10px;
        font-weight: 700
      }

      .restaurant-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 7px;
        color: #777b80;
        font-size: 10px
      }

      .restaurant-meta span+span:before {
        content: '·';
        margin-right: 8px;
        color: #babcc0
      }

      .restaurant-tags {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 12px;
        padding-top: 11px;
        border-top: 1px solid #f0f0f1;
        color: #8b8e93;
        font-size: 10px
      }

      .restaurant-tags b {
        color: #da5b32
      }

      .restaurant-card.hidden {
        display: none
      }

      .noresults {
        display: none;
        padding: 55px;
        text-align: center;
        color: #888
      }

      .noresults.show {
        display: block
      }

      .offer {
        padding: 49px 0;
        background: #fff7f3
      }

      .offer-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px
      }

      .offer-card {
        position: relative;
        overflow: hidden;
        min-height: 169px;
        padding: 26px 28px;
        border-radius: 10px;
        background: #ffe0d4
      }

      .offer-card:nth-child(2) {
        background: #eaf3d9
      }

      .offer-card:after {
        content: '';
        position: absolute;
        right: -44px;
        bottom: -56px;
        width: 190px;
        height: 190px;
        border: 22px solid rgba(255, 255, 255, .48);
        border-radius: 50%
      }

      .offer-card:nth-child(2):after {
        border-color: rgba(255, 255, 255, .72)
      }

      .offer-card small {
        color: #b04b30;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .15em;
        text-transform: uppercase
      }

      .offer-card:nth-child(2) small {
        color: #547139
      }

      .offer-card h3 {
        max-width: 300px;
        margin: 12px 0 5px;
        font: 800 24px/1.05 'Plus Jakarta Sans', sans-serif;
        letter-spacing: -.07em
      }

      .offer-card p {
        margin: 0;
        color: #87685e;
        font-size: 11px
      }

      .offer-card:nth-child(2) p {
        color: #697b59
      }

      .offer-card button {
        position: absolute;
        z-index: 1;
        left: 28px;
        bottom: 23px;
        padding: 0;
        color: var(--red);
        background: none;
        font-size: 10px;
        font-weight: 800
      }

      .offer-card:nth-child(2) button {
        color: #397242
      }

      .steps {
        padding: 58px 0
      }

      .stepsgrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
        margin-top: 28px
      }

      .step {
        display: grid;
        grid-template-columns: 43px 1fr;
        gap: 14px;
        align-items: start
      }

      .step-icon {
        width: 43px;
        height: 43px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: var(--red);
        background: #fff0ed
      }

      .step h3 {
        margin: 0 0 6px;
        font-size: 14px;
        letter-spacing: -.02em
      }

      .step p {
        margin: 0;
        color: #82858a;
        font-size: 11px;
        line-height: 1.5
      }

      footer {
        padding: 45px 0 20px;
        border-top: 1px solid var(--line);
        background: #fbfbfb;
        color: #6e7175
      }

      .footer-top {
        display: flex;
        justify-content: space-between;
        gap: 40px;
        padding-bottom: 40px
      }

      .footer-brand {
        color: var(--red)
      }

      .footer-top>div:first-child p {
        margin: 13px 0 0;
        font-size: 11px
      }

      .footer-links {
        display: flex;
        gap: 85px
      }

      .footer-links div {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 118px
      }

      .footer-links strong {
        margin-bottom: 4px;
        color: #303338;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .12em
      }

      .footer-links a,
      .footer-links button {
        width: max-content;
        padding: 0;
        border: 0;
        color: #777a7e;
        background: none;
        font-size: 11px
      }

      .footer-links a:hover,
      .footer-links button:hover {
        color: var(--red)
      }

      .footer-bottom {
        display: flex;
        justify-content: space-between;
        padding-top: 17px;
        border-top: 1px solid var(--line);
        font-size: 10px
      }

      .overlay {
        position: fixed;
        z-index: 80;
        inset: 0;
        display: none;
        justify-content: flex-end;
        background: rgba(25, 26, 28, .45);
        backdrop-filter: blur(4px)
      }

      .overlay.open {
        display: flex
      }

      .cart {
        width: min(100%, 420px);
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 31px 26px 23px;
        background: #fff;
        box-shadow: -19px 0 50px rgba(0, 0, 0, .17);
        animation: slide .3s var(--ease)
      }

      .cart-head {
        display: flex;
        justify-content: space-between;
        align-items: start;
        padding-bottom: 19px;
        border-bottom: 1px solid var(--line)
      }

      .cart-head h2 {
        margin: 0;
        font: 800 28px 'Plus Jakarta Sans', sans-serif;
        letter-spacing: -.07em
      }

      .cart-head h2 span {
        color: #9a9da0;
        font: 400 13px 'DM Sans', sans-serif
      }

      .close {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        color: #63666a;
        background: #f4f4f5;
        font-size: 20px
      }

      .cart-items {
        flex: 1;
        overflow: auto;
        padding: 13px 0
      }

      .cart-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        text-align: center
      }

      .empty-icon {
        width: 57px;
        height: 57px;
        display: grid;
        place-items: center;
        margin-bottom: 15px;
        border-radius: 50%;
        color: var(--red);
        background: #fff0ed;
        font-size: 22px
      }

      .cart-empty h3 {
        margin: 0 0 7px;
        font-size: 22px
      }

      .cart-empty p {
        max-width: 200px;
        margin: 0 0 15px;
        color: #8d9094;
        font-size: 11px
      }

      .cart-empty button {
        color: var(--red);
        background: none;
        font-size: 11px;
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 3px
      }

      .cart-item {
        display: flex;
        gap: 11px;
        padding: 14px 0;
        border-bottom: 1px solid #eeeeef
      }

      .cart-item img {
        width: 64px;
        height: 64px;
        border-radius: 7px
      }

      .cart-main {
        flex: 1
      }

      .cart-main strong,
      .cart-main small {
        display: block
      }

      .cart-main strong {
        font-size: 12px
      }

      .cart-main small {
        margin-top: 4px;
        color: #8b8e92;
        font-size: 10px
      }

      .cart-foot {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 11px
      }

      .cart-foot b {
        font-size: 12px
      }

      .quantity {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px
      }

      .quantity button {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        color: #5f6266;
        background: #f0f0f1
      }

      .quantity button:hover {
        color: white;
        background: var(--red)
      }

      .summary {
        padding-top: 15px;
        border-top: 1px solid var(--line)
      }

      .summary-row {
        display: flex;
        justify-content: space-between;
        margin: 9px 0;
        color: #83868b;
        font-size: 11px
      }

      .summary-row b {
        color: #42454a;
        font-weight: 600
      }

      .summary-total {
        margin: 18px 0 15px;
        color: #24272c;
        font-size: 14px
      }

      .summary-total b {
        color: var(--red);
        font-size: 19px
      }

      .checkout {
        width: 100%;
        justify-content: center
      }

      .secure {
        text-align: center;
        color: #9a9ca0;
        font-size: 9px
      }

      .toast {
        position: fixed;
        z-index: 100;
        left: 50%;
        bottom: 24px;
        display: none;
        padding: 12px 15px;
        border-radius: 7px;
        color: #fff;
        background: #25272b;
        box-shadow: 0 11px 28px rgba(0, 0, 0, .2);
        font-size: 11px;
        transform: translateX(-50%);
        animation: toast .25s var(--ease)
      }

      .bottomnav {
        display: none
      }

      @keyframes slide {
        from {
          transform: translateX(100%)
        }

        to {
          transform: translateX(0)
        }
      }

      @keyframes toast {
        from {
          opacity: 0;
          transform: translate(-50%, 9px)
        }

        to {
          opacity: 1;
          transform: translate(-50%, 0)
        }
      }

      @media(max-width:940px) {
        .navlinks {
          gap: 13px
        }

        .city {
          display: none
        }

        .hero-grid {
          gap: 25px
        }

        .cuisine-grid {
          gap: 12px
        }

        .restaurant-grid {
          gap: 15px
        }
      }

      @media(max-width:700px) {
        .container {
          padding: 0 18px
        }

        .topbar {
          font-size: 9px
        }

        .navin {
          height: 64px;
          gap: 13px
        }

        .navsearch {
          order: 3;
          position: absolute;
          top: 72px;
          left: 18px;
          right: 18px;
          max-width: none
        }

        .navin {
          position: relative
        }

        .navlinks {
          display: none
        }

        .mobilemenu {
          display: block
        }

        .hero {
          padding-top: 70px
        }

        .hero-grid {
          display: flex;
          flex-direction: column;
          gap: 25px
        }

        .hero-copy {
          padding: 0
        }

        .hero h1 {
          font-size: clamp(42px, 12vw, 65px)
        }

        .hero-copy>p {
          font-size: 13px
        }

        .hero-media {
          min-height: 292px
        }

        .hero-content {
          left: 21px;
          top: 22px
        }

        .hero-content h2 {
          font-size: 28px;
          max-width: 245px
        }

        .hero-deal {
          right: 16px;
          bottom: 16px
        }

        .section {
          padding: 39px 0
        }

        .sectionhead h2 {
          font-size: 25px
        }

        .cuisine-grid {
          grid-template-columns: repeat(6, 94px);
          overflow: auto;
          gap: 14px;
          margin-right: -18px;
          padding-bottom: 7px
        }

        .restaurant-grid {
          grid-template-columns: 1fr 1fr;
          gap: 13px
        }

        .restaurant-image {
          height: 145px
        }

        .restaurant-body {
          padding: 11px
        }

        .restaurant-title {
          display: block
        }

        .restaurant-title h3 {
          font-size: 12px
        }

        .rating {
          display: inline-flex;
          margin-top: 6px;
          font-size: 9px
        }

        .restaurant-meta {
          font-size: 9px;
          display: block;
          line-height: 1.5
        }

        .restaurant-meta span+span:before {
          margin-right: 5px
        }

        .restaurant-tags {
          font-size: 9px;
          white-space: nowrap;
          overflow: hidden
        }

        .offer-grid {
          grid-template-columns: 1fr
        }

        .offer-card {
          min-height: 157px
        }

        .steps {
          padding: 44px 0
        }

        .stepsgrid {
          grid-template-columns: 1fr;
          gap: 22px
        }

        .footer-top {
          flex-direction: column;
          padding-bottom: 34px
        }

        .footer-links {
          gap: 35px
        }

        .footer-bottom {
          gap: 10px
        }

        .bottomnav {
          position: fixed;
          z-index: 25;
          left: 0;
          right: 0;
          bottom: 0;
          display: flex;
          justify-content: space-around;
          padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
          border-top: 1px solid var(--line);
          background: rgba(255, 255, 255, .96);
          backdrop-filter: blur(14px)
        }

        .bottomnav a {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 4px;
          color: #86898d;
          font-size: 9px
        }

        .bottomnav a.active {
          color: var(--red)
        }

        .bottomnav svg {
          width: 17px;
          height: 17px
        }
      }

      @media(max-width:430px) {
        .baglabel {
          display: none
        }

        .restaurant-image {
          height: 132px
        }

        .restaurant-card .desc {
          display: none
        }

        .restaurant-meta {
          margin-top: 5px
        }

        .hero-ctas .secondary {
          display: none
        }

        .hero-proof {
          margin-top: 20px
        }
      }

      /* Professional dark marketplace theme */
      :root {
        --red: #ff5b45;
        --red2: #e74735;
        --orange: #ff9a58;
        --ink: #f3f5f3;
        --muted: #9ba49e;
        --soft: #151918;
        --line: #2c332f;
        --green: #39a86d;
        --blue: #8fb6ff;
        --shadow: 0 14px 38px rgba(0, 0, 0, .28)
      }

      body {
        color: var(--ink);
        background: #0f1110
      }

      .topbar {
        background: #191d1a;
        border-color: #2b302c;
        color: #bec7c0
      }

      .topbar a {
        color: #f8a28d
      }

      .topbar b {
        color: #d9ee8e
      }

      .nav {
        border-bottom-color: #2a302c;
        background: rgba(15, 17, 16, .91)
      }

      .brand {
        color: #ff6a52
      }

      .brandmark {
        color: #fff;
        background: #ff5b45
      }

      .branddot {
        color: #ff9a58
      }

      .city {
        color: #d7ddd8;
        background: #171b19;
        border-color: #303833
      }

      .city svg {
        color: #ff7259
      }

      .navsearch {
        color: #8d9890;
        background: #171b19;
        border-color: #303833
      }

      .navsearch input {
        color: #f5f7f4
      }

      .navsearch input::placeholder {
        color: #7f8982
      }

      .navlinks {
        color: #9fa9a1
      }

      .navlinks a:hover {
        color: #fff
      }

      .navbtn {
        color: #dce2dd
      }

      .bagcount {
        color: #fff;
        background: #ff5b45
      }

      .mobilemenu {
        color: #e9eeea
      }

      .hero {
        background: radial-gradient(circle at 80% 14%, rgba(255, 91, 69, .13), transparent 28%), radial-gradient(circle at 6% 64%, rgba(216, 240, 110, .08), transparent 23%), #0f1110
      }

      .hero-copy>p {
        color: #a6b0a9
      }

      .hero-proof {
        color: #89958d
      }

      .hero-proof strong {
        color: #ecf1ec
      }

      .hero-media {
        background: #1c2621;
        box-shadow: 0 18px 48px rgba(0, 0, 0, .28)
      }

      .hero-media:after {
        background: linear-gradient(90deg, rgba(13, 17, 14, .5), transparent 60%, rgba(0, 0, 0, .2))
      }

      .hero-content {
        color: #fff
      }

      .hero-content p {
        color: #d0dbd3
      }

      .hero-deal {
        color: #2b1d15;
        background: #ffd08c
      }

      .section {
        background: #101211
      }

      .section.grey {
        background: #151817
      }

      .sectionhead h2 {
        color: #f2f5f2
      }

      .sectionhead p,
      .headnote {
        color: #88938b
      }

      .viewall {
        color: #ff8068
      }

      .cuisine {
        color: #d5dcd6
      }

      .cuisine-img {
        background: #222824;
        box-shadow: 0 5px 18px rgba(0, 0, 0, .24)
      }

      .filter {
        color: #aab3ac;
        background: #171b19;
        border-color: #303833
      }

      .filter:hover {
        border-color: #ff5b45;
        color: #ff8a73
      }

      .filter.active {
        border-color: #ff5b45;
        color: #ffb09e;
        background: #291c19
      }

      .restaurant-card {
        border-color: #2d3530;
        background: #171b19;
        box-shadow: none
      }

      .restaurant-card:hover {
        box-shadow: 0 15px 35px rgba(0, 0, 0, .32)
      }

      .restaurant-title h3 {
        color: #f4f7f4
      }

      .restaurant-meta {
        color: #98a39a
      }

      .restaurant-tags {
        border-top-color: #2a312d;
        color: #99a49c
      }

      .restaurant-tags b {
        color: #ff765d
      }

      .favorite {
        background: rgba(10, 13, 11, .66)
      }

      .promobadge {
        background: #287c51
      }

      .noresults {
        color: #9da69e
      }

      .offer {
        background: #161a18
      }

      .offer-card {
        background: linear-gradient(135deg, #35201d, #261916);
        border: 1px solid #4a2b26
      }

      .offer-card:nth-child(2) {
        background: linear-gradient(135deg, #263421, #1d2a1f);
        border-color: #344932
      }

      .offer-card small {
        color: #ff9d87
      }

      .offer-card:nth-child(2) small {
        color: #cde78c
      }

      .offer-card p {
        color: #c5a39a
      }

      .offer-card:nth-child(2) p {
        color: #a9bc9d
      }

      .offer-card button {
        color: #ff8b73
      }

      .offer-card:nth-child(2) button {
        color: #cce892
      }

      .steps {
        background: #101211
      }

      .stepsgrid .step {
        border-color: #2d3630;
        background: #181d1a
      }

      .step h3 {
        color: #eef2ee
      }

      .step p {
        color: #99a49b
      }

      .step-icon {
        color: #ff8069;
        background: #30201e
      }

      .steps .sectionhead h2 {
        color: #f1f4f1
      }

      .cta {
        background: #d9ed91;
        color: #182018
      }

      .cta h2 {
        color: #1c2b1b
      }

      .cta .kicker {
        color: #3f6b32
      }

      .cta .orangebtn {
        background: #e94b37
      }

      .cta .orangebtn:hover {
        background: #c93b2d
      }

      footer {
        background: #0b0d0c;
        color: #c0c9c1;
        border-top-color: #252c27
      }

      .footer-top>div:first-child p {
        color: #7f8b81
      }

      .footer-links strong {
        color: #cfe98c
      }

      .footer-links a,
      .footer-links button {
        color: #8d9990
      }

      .footer-links a:hover,
      .footer-links button:hover {
        color: #fff
      }

      .footer-bottom {
        border-top-color: #29312b;
        color: #707c72
      }

      .cart {
        background: #151918
      }

      .cart-head {
        border-bottom-color: #2c332f
      }

      .cart-head h2 {
        color: #f3f5f3
      }

      .close {
        color: #d4ddd6;
        background: #252c27
      }

      .cart-item {
        border-bottom-color: #2c332f
      }

      .cart-main strong {
        color: #edf2ed
      }

      .cart-main small,
      .cart-empty p,
      .summary-row,
      .secure {
        color: #8f9a91
      }

      .quantity button {
        color: #e0e9e1;
        background: #29332c
      }

      .summary {
        border-top-color: #2c332f
      }

      .summary-row b {
        color: #dce5de
      }

      .summary-total {
        color: #f2f5f2
      }

      .summary-total b {
        color: #ff7962
      }

      .empty-icon {
        color: #ff7962;
        background: #34201d
      }

      .cart-empty h3 {
        color: #f1f4f1
      }

      .cart-empty button {
        color: #ff907b
      }

      .bottomnav {
        border-top-color: #2d3530;
        background: rgba(17, 20, 18, .96)
      }

      .bottomnav a {
        color: #8e9991
      }

      .bottomnav a.active {
        color: #ff7560
      }

      .toast {
        color: #182019;
        background: #e8f1e1
      }



      /* Header wider + spacing */
.nav .container.navin {
  max-width: 1600px;      /* pehle shayad 1200px ke aaspaas tha */
  width: 100%;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 28px;              /* items ke beech ka gap */
}

.nav .brand { flex-shrink: 0; margin-right: 12px; }

.nav .city {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 12px 18px;
}

/* Search bar bachi hui jagah le, placeholder cut na ho */
.nav .navsearch {
  flex: 1 1 auto;
  min-width: 280px;
  max-width: 560px;
}
.nav .navsearch input { width: 100%; }

.nav .navlinks {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  white-space: nowrap;
}

.nav .navbtn { flex-shrink: 0; margin-left: 8px; gap: 8px; }

/* Chhoti screens par pehle jaisa */
@media (max-width: 1100px) {
  .nav .container.navin { padding: 0 20px; gap: 16px; }
}