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

    :root {
      --red:    #e8191e;
      --teal:   #00b4b4;
      --yellow: #f5c400;
      --dark:   #1a2e2e;
      --text:   #333;
      --light:  #f8f8f8;
    }

    /* NOTE: do NOT put overflow-x:hidden on html or body — it disables
       position:sticky on every descendant (including .nav-cat-area). */
    html { overflow-x: clip; }
    body {
      font-family: 'Poppins', sans-serif;
      color: var(--text);
    }

    /* ── HEADER ──────────────────────────────────────────── */
    header {
      background: url(../img/header_bg.svg) center 0px / contain no-repeat #fab933;
      position: sticky;
      top: 0;
      z-index: 100;
      padding: 6px 0 0 0;
      box-shadow: 0 3px 20px rgba(0,0,0,.18);
    }

    .header-content {
      display: flex;
      gap: 60px;
      align-items: center;
      max-width: 1200px;
      margin: 0 auto;
    }

    .nav-top {
      width: 560px;
      padding: 55px 0 10px 0;
    }

    .logo-area {
      width: 200px;
      position: relative;
    }
    .logo-area a {
      display: block;
      position: absolute;
      top:-3px;
    }

   

    .nav-links {
      display: flex;
      gap: 32px;
      list-style: none;
    }

    .nav-links a {
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      font-size: .9rem;
      letter-spacing: .5px;
      transition: opacity .2s;
    }
    .nav-links a:hover { opacity: .75; }

    /* Category strip — sticks directly below the header (70px tall). */
    .nav-cat-area {
      position: sticky;
      top: 94px;
      z-index: 95;
      padding: 0px 0px 0px 390px;
      background:#fff;
    }

    .nav-categories {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .nav-categories ul {
      display: flex;
      align-items: center;
      list-style: none;
      height: 44px;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .nav-categories ul::-webkit-scrollbar { display: none; }
    /* Chips must never shrink/wrap — they stay full width and the row
       scrolls horizontally instead (the bigbash behaviour). Without this
       flex-shrink:1 squashes chips and the text wraps on narrow phones. */
    .nav-categories li {
      flex: 0 0 auto;
      white-space: nowrap;
    }

    .nav-categories a {
      display: flex;
      align-items: center;
      height: 34px;
      padding: 0 16px;
      color: #000;
      text-decoration: none;
      font-size: .78rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .5px;
      white-space: nowrap;
      border-radius: 12px;
      transition: background .2s, color .2s;
    }
    .nav-categories a:hover { background: rgba(255,255,255,.08); }
    .nav-categories a.active {
      background: var(--yellow);
      color: var(--dark);
    }

    /* ── HERO ────────────────────────────────────────────── */
    .hero{ border-top: 7px solid #0098a0;}
    .banner_div{width:100%;text-align: center;}
    .banner_div img{width: 100%; display: block;}

    /* ── SECTION TITLES ──────────────────────────────────── */
    .section-title {
      text-align: center;
      font-family: 'Oswald', sans-serif;
      font-size: clamp(2rem, 4vw, 3rem);
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-bottom: 36px;
    }
    .section-title.teal  { color: var(--teal); }
    .section-title.dark  { color: var(--dark); }

    /* ── MENU SECTIONS ───────────────────────────────────── */
    .menu-section {
      padding: 64px 60px;
      position: relative;
      overflow: hidden;
      border-bottom:7px solid #E63020;
      scroll-margin-top: 90px;
    }
    .menu-section.alt { background: var(--light);border-color:#FBBA33 }

    .pizza-deco {
      position: absolute;
      pointer-events: none;
      z-index: 0;
    }
    .pizza-deco-tr { top: 0; right: 0; }
    .pizza-deco-bl { bottom: 0; left: 0; }
    .pizza-deco img { display: block; }

    .shape {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
    }
    .shape-teal  { width: 460px; height: 460px; background: var(--teal);  opacity: 1; top: -80px;  right: -230px; }
    .shape-red   { width: 280px; height: 280px; background: var(--red);   opacity: 1; top: 58%;   right: -140px; transform: translateY(-50%); }
    .shape-yellow{ width: 220px; height: 220px; background: var(--yellow); opacity: 1; bottom: 60px; left: -110px; }

    .menu-grid {
      display: grid;
      column-gap: 28px;
      row-gap: 168px;
      padding-top: 160px;
      position: relative;
      z-index: 1;
      justify-items: center;
      justify-content: center;
    }
    .menu-grid.cols-3,
    .menu-grid.cols-4 { grid-template-columns: repeat(3, minmax(0, 320px)); }

    /* ── MENU CARD ───────────────────────────────────────── */
    .card {
      position: relative;
      width: 100%;
      max-width: 320px;
      margin: 0 auto;
      opacity: 0;
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .card.in-view {
      opacity: 1;
      transform: translateY(0);
    }
    .card.in-view:hover {
      transform: translateY(-6px);
    }
    @media (prefers-reduced-motion: reduce), (scripting: none) {
      .card { opacity: 1; transform: none; }
    }
    html.no-js .card { opacity: 1; transform: none; }

    /* SVG background stretches to fill card height */
    .card > svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    /* Food image sits in the right side over the yellow arc */
    .card-img {
      position: absolute;
      top: -150px;
      left: 0px;     
      max-height: 200px;
      object-fit: contain;
      z-index: 3;
      pointer-events: none;
    }

    .card-body {
      position: relative;
      z-index: 2;
      padding: 36px 22px 18px;
      min-height: 190px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 12px;
    }

    .card-name {
      font-weight: 700;
      font-size: 15px;
      margin: 0 0 6px;
      color: #1a1a1a;
      line-height: 1.35;
      max-width: 175px;
    }

    .card-desc {
      font-size: 12px;
      color: #666;
      margin: 0;
      line-height: 1.5;
      max-width: 175px;
    }

    .card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .card-price {
      font-weight: 800;
      font-size: 15px;
      color: var(--red);
    }

    .btn-add {
      background: var(--teal);
      color: #fff;
      border: none;
      border-radius: 7px;
      padding: 6px 20px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      letter-spacing: 0.6px;
      transition: background .2s, transform .15s;
    }
    .btn-add:hover { background: #007A82; transform: scale(1.05); }

    .menu-section.alt .btn-add            { background: var(--red); }
    .menu-section.alt .btn-add:hover      { background: #c0131a; }

    /* ── CTA BANNER ──────────────────────────────────────── */
    .cta-banner {
      position: relative;
      min-height: 380px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
    }

    .cta-bg {
      position: absolute;
      inset: 0;
      background: url('../../img/bg-02.jpg') center/cover no-repeat;
      filter: brightness(.35);
    }

    .cta-inner {
      position: relative;
      z-index: 2;
      padding: 60px 40px;
    }

    .cta-label {
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--yellow);
      margin-bottom: 16px;
    }

    .cta-title {
      font-family: 'Oswald', sans-serif;
      font-size: clamp(1.8rem, 4vw, 3rem);
      color: #fff;
      text-transform: uppercase;
      max-width: 640px;
      line-height: 1.15;
      margin-bottom: 32px;
    }

    .btn-order {
      background: var(--yellow);
      color: var(--dark);
      border: none;
      border-radius: 6px;
      padding: 14px 38px;
      font-size: .95rem;
      font-weight: 800;
      cursor: pointer;
      letter-spacing: 1px;
      text-transform: uppercase;
      transition: background .2s, transform .15s;
    }
    .btn-order:hover { background: #e0b200; transform: scale(1.04); }

    /* ── FAQ ─────────────────────────────────────────────── */
    .faq-section {
      padding: 72px 60px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: start;
      position: relative;
      overflow: hidden;
    }

    .faq-blob-yellow {
      position: absolute;
      width: 220px;
      height: 220px;
      background: var(--yellow);
      border-radius: 50%;
      bottom: -80px;
      right: -60px;
      pointer-events: none;
      z-index: 0;
    }

    .faq-section > div:not(.faq-blob-yellow) { position: relative; z-index: 1; }

    .faq-tag {
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 12px;
    }

    .faq-heading {
      font-family: 'Oswald', sans-serif;
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      text-transform: uppercase;
      color: var(--dark);
      line-height: 1.2;
      margin-bottom: 32px;
    }

    .accordion { display: flex; flex-direction: column; gap: 12px; }

    .acc-item {
      border-left: 4px solid var(--red);
      border-radius: 0 8px 8px 0;
      background: #fff;
      box-shadow: 0 2px 12px rgba(0,0,0,.07);
      overflow: hidden;
    }

    .acc-header {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px 18px;
      cursor: pointer;
      font-weight: 600;
      font-size: .9rem;
      color: var(--dark);
      user-select: none;
    }

    .acc-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      background: var(--red);
      color: #fff;
      border-radius: 50%;
      font-size: .72rem;
      font-weight: 800;
      flex-shrink: 0;
    }

    .acc-body {
      padding: 0 18px 16px 58px;
      font-size: .84rem;
      color: #666;
      line-height: 1.65;
      display: none;
    }
    .acc-item.open .acc-body { display: block; }

    .faq-image-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 10px;
      height: 340px;
    }
    .faq-image-grid img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px;
    }
    .faq-image-grid img:first-child { grid-row: span 2; }

    /* ── GALLERY STRIP ───────────────────────────────────── */
    .gallery-strip {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      height: 220px;
    }
    .gallery-strip div { overflow: hidden; }
    .gallery-strip img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .4s;
    }
    .gallery-strip div:hover img { transform: scale(1.08); }

    /* ── FOOTER ──────────────────────────────────────────── */
    footer {
      color: var(--dark);
      padding: 56px 60px 0;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 40px;
      padding-bottom: 40px;
      border-bottom: 1px solid rgba(0,0,0,.15);
    }

    .footer-col h4 {
      color: var(--dark);
      font-size: .85rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 16px;
    }

    .footer-col p,
    .footer-col a {
      font-size: .82rem;
      line-height: 1.8;
      color: var(--dark);
      text-decoration: none;
      display: block;
    }
    .footer-col a:hover { color: var(--red); }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 0;
      flex-wrap: wrap;
      gap: 12px;
    }

    .footer-logo img { height: 60px; }

    .footer-copy { font-size: .78rem; color: var(--dark); }

    /* ── RESPONSIVE ─────────────────────────────────────── */

    /* Small-desktop / laptop ≤1280px ─ trim oversized fixed widths */
    @media (max-width: 1280px) {
      /* nav-cat-area was hand-tuned with padding-left:390px for big screens;
         pull it back so chips stay inside the viewport on laptops. */
      .nav-cat-area { padding-left: 220px; }
      .header-content { padding: 0 24px; }
      .menu-section { padding: 56px 40px; }
    }

    /* Tablet landscape ≤1024px */
    @media (max-width: 1024px) {
      .header-content { gap: 24px; padding: 0 20px; }
      .nav-top { width: auto; flex: 1; }
      .nav-cat-area { padding-left: 180px; }
      .menu-section { padding: 48px 28px; }

      .menu-grid { column-gap: 22px; row-gap: 168px; padding-top: 160px; }

      .card { max-width: 280px; }

      /* Shapes pulled in so they don't crowd cards */
      .shape-teal  { width: 360px; height: 360px; right: -180px; top: -60px; }
      .shape-red   { width: 230px; height: 230px; right: -120px; }
      .shape-yellow{ width: 180px; height: 180px; left: -90px;  bottom: 40px; }

      .faq-section { padding: 56px 32px; gap: 40px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
      footer { padding: 48px 32px 0; }
      .gallery-strip { height: 180px; }
    }

    /* Tablet portrait / small tablet ≤900px */
    @media (max-width: 900px) {
      .nav-cat-area { padding-left: 0; padding-right: 0; }
      .nav-categories { padding: 0 20px; }

      /* Grids: cols-3 → 2, cols-4 → 2 */
      .menu-grid.cols-3,
      .menu-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
      .menu-grid { column-gap: 18px; row-gap: 168px; padding-top: 160px; }

      .card { max-width: 340px; }

      /* FAQ stacks */
      .faq-section { grid-template-columns: 1fr; gap: 32px; padding: 48px 28px; }
      .faq-image-grid { height: 240px; }
    }

    /* Mobile ≤768px */
    @media (max-width: 768px) {
      /* ── Header — solid yellow, merges with category bar ── */
      header {
        padding: 6px 0;
        background: #fab933 !important;
        box-shadow: 0 3px 20px rgba(0,0,0,.18);
      }
      .header-content { gap: 16px; padding: 0 16px; max-width: 100%; }
      .logo-area { width: 100px; }
      .nav-logo img { height: 52px; }
      /* CRITICAL: kill the 559px fixed width that overflows phones. */
      .nav-top { width: auto; flex: 1; padding: 0 66px 0 0; display: flex; align-items: center; justify-content: flex-end; }
      .nav-links { gap: 18px; }
      .nav-links a { font-size: .78rem; letter-spacing: .3px; }

      /* ── Cart icon — pinned to the top-right, aligned with the sticky
         header band so it reads as the last item in the nav row:
         [logo]  Home About Contact  🛒
         (It stays position:fixed so it remains reachable while scrolling;
          the .nav-top right-padding above reserves its 44px + gap so the
          nav links never sit underneath it.) */
      .cart-badge { top: 12px !important; right: 14px !important; }
      .cart-icon-btn { width: 44px; height: 44px; border-width: 2px; }
      .cart-icon-btn svg { width: 22px; height: 22px; }

      /* ── Category bar — sticky strip, edge-to-edge ──
         The chip row scrolls horizontally; add a right-edge fade so it's
         visually obvious there are more categories to swipe to, plus
         scroll-snap + momentum for a native-feeling swipe. ── */
      .nav-cat-area {
        position: sticky;          /* re-assert: ancestor overrides cleared above */
        top: 64px;
        padding: 6px 0;
      }
      .nav-cat-area::after {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 36px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(255,255,255,0), #fff);
      }
      .nav-categories { padding: 0 12px; }
      .nav-categories ul {
        height: 40px;
        gap: 6px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: 12px;
        /* extra right padding so the last chip clears the fade overlay */
        padding-right: 28px;
      }
      .nav-categories li { scroll-snap-align: start; }
      /* Bigger touch targets for the chips themselves (44px row height). */
      .nav-categories a { height: 34px; padding: 0 14px; font-size: .7rem; }

      /* ── Menu sections ── */
      .menu-section { padding: 36px 14px; }
      /* Markup uses <img>, not <svg>, so target that. */
      .pizza-deco-tr img { width: 120px; height: auto; }
      .pizza-deco-bl img { width: 100px; height: auto; }

      /* ── Grids ── SINGLE COLUMN on mobile.
         One full-width card per row reads better than cramped 2-up cards
         and gives the price + ADD button room to sit side-by-side without
         clipping. (Matches how most food-delivery apps lay out menus.) */
      .menu-grid,
      .menu-grid.cols-3,
      .menu-grid.cols-4 { grid-template-columns: 1fr; column-gap: 0; row-gap: 168px; padding-top: 160px; }

      /* ── Cards — single column, full width (capped) ── */
      .card,
      .menu-grid.cols-3 .card,
      .menu-grid.cols-4 .card {
        max-width: 380px;
        margin: 0 auto;
      }
      .card-name { font-size: 1.05rem; word-break: break-word; }
      .card-desc { font-size: .72rem; }
      .card-footer { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
      .card-price { font-size: 1rem; text-align: left; }
      .btn-add { width: auto; padding: 8px 24px; font-size: .78rem; min-height: 40px; flex-shrink: 0; }

      /* ── Burger shapes — hide on mobile; they were designed for desktop
         layouts and become content-overlapping clutter below 768px. ── */
      .shape-teal,
      .shape-red,
      .shape-yellow { display: none; }

      /* ── CTA ── */
      .cta-banner { min-height: 280px; }
      .cta-inner { padding: 40px 20px; }
      .btn-order { padding: 12px 28px; font-size: .85rem; }

      /* ── FAQ ── */
      .faq-section {
        padding: 40px 16px;
        grid-template-columns: 1fr;
        gap: 24px;
        overflow: hidden;
      }
      .faq-heading { font-size: clamp(1.3rem, 5vw, 1.8rem); }
      .acc-header { padding: 14px 14px; font-size: .82rem; gap: 10px; }
      .acc-body { padding: 0 14px 14px 44px; font-size: .8rem; }
      .faq-image-grid { height: 180px; }
      .faq-blob-yellow { width: 120px; height: 120px; bottom: -40px; right: -30px; }

      /* ── Gallery ── */
      .gallery-strip { grid-template-columns: repeat(3, 1fr); height: 140px; }
      .gallery-strip div:nth-child(4),
      .gallery-strip div:nth-child(5) { display: none; }

      /* ── Footer ── */
      footer { padding: 36px 20px 0; }
      .footer-grid { grid-template-columns: 1fr; gap: 20px; }
      .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px 0;
        gap: 8px;
      }
      .footer-logo img { height: 48px; }
      .footer-copy { text-align: center; }
    }

    /* Mid-phone ≤560px */
    @media (max-width: 560px) {
      /* Hide corner decorations on small phones — they dominate the section */
      .pizza-deco { display: none; }

      .header-content { gap: 10px; padding: 0 12px; }
      .logo-area { width: 84px; }
      .nav-logo img { height: 48px; }
      .nav-links { gap: 12px; }
      .nav-links a { font-size: .72rem; }

      .menu-section { padding: 32px 14px; }
      /* Single column carries through; just tighten the section padding. */

      .gallery-strip { grid-template-columns: repeat(2, 1fr); height: 120px; }
      .gallery-strip div:nth-child(3) { display: none; }
    }

    /* Ultra-narrow phones ≤359px (iPhone SE, small Androids).
       NOTE: kept at 359 — NOT 400 — so mainstream 360–430px phones
       (iPhone 12–15, Pixel, Galaxy) keep the 2-column grid instead of
       dropping to a single stranded column with big empty gaps. */
    @media (max-width: 359px) {
      .header-content { gap: 8px; padding: 0 10px; }
      .logo-area { width: 72px; }
      .nav-logo img { height: 42px; }
      .nav-links { gap: 8px; }
      .nav-links a { font-size: .66rem; letter-spacing: 0; }

      .nav-categories a { height: 32px; padding: 0 12px; font-size: .64rem; }

      /* (Menu is already single-column from the ≤768 rules.) */
      .faq-section { padding: 32px 12px; }
      .faq-image-grid { height: 150px; }
      footer { padding: 26px 12px 0; }
      .gallery-strip { height: 100px; }
    }