/* ─────────────────────────────────────────────
       TOKENS
    ───────────────────────────────────────────── */
    :root {
      --olive:      #4A4F3A;
      --olive-dark: #2E3228;
      --clay:       #C99A5B;
      --gold:       #E6C17A;
      --sand:       #F4ECE2;
      --sand-light: #FDFAF6;
      --charcoal:   #1E1E1E;
      --white:      #FFFFFF;
      --serif: 'Playfair Display', Georgia, serif;
      --sans:  'Montserrat', Arial, sans-serif;
      --radius: 12px;
      --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { font-family: var(--sans); background: var(--white); color: var(--charcoal); overflow-x: hidden; }

    /* ─────────────────────────────────────────────
       NAV  —  minimal dark floating bar
    ───────────────────────────────────────────── */
    body { padding-top: 62px; }

    .nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 500;
      background: rgba(18, 14, 10, 0.97);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .nav__top {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      height: 62px;
      padding: 0 1.75rem;
    }

    .nav__left  { display: flex; align-items: center; }
    .nav__center { display: flex; justify-content: center; }
    .nav__right { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }

    .nav__logo {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      text-decoration: none;
      flex-shrink: 0;
    }
    .nav__logo img {
      height: 34px; width: auto;
    }
    .nav__logo-name {
      font-family: var(--serif);
      font-size: 1.1rem;
      color: rgba(244,236,226,0.88);
      transition: color 0.2s;
    }
    .nav__logo:hover .nav__logo-name { color: var(--sand); }

    /* Burger — always visible */
    .nav__burger {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 36px; height: 36px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      flex-shrink: 0;
    }
    .nav__burger span {
      display: block;
      width: 20px; height: 1.5px;
      background: rgba(244,236,226,0.75);
      border-radius: 1px;
      transition: background 0.2s;
    }
    .nav__burger:hover span { background: var(--sand); }

    /* Hide old nav elements */
    .nav__links, .nav__location, .mobile-menu { display: none !important; }

    /* ─────────────────────────────────────────────
       SITE NAV OVERLAY  —  full-screen drop from top
    ───────────────────────────────────────────── */
    .site-nav-overlay {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: var(--olive-dark);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transform: translateY(-100%);
      transition: transform 0.65s cubic-bezier(0.76, 0, 0.24, 1);
      overflow: hidden;
    }
    .site-nav-overlay.is-open { transform: translateY(0); }

    /* Top bar inside overlay */
    .sno__bar {
      position: absolute;
      top: 0; left: 0; right: 0;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      height: 62px;
      padding: 0 1.75rem;
    }
    .sno__bar .nav__logo-name { color: rgba(244,236,226,0.88); }
    .sno__bar-right { display: flex; justify-content: flex-end; }

    /* Close (×) button */
    .sno__close {
      background: none;
      border: none;
      color: rgba(244,236,226,0.5);
      font-size: 1.1rem;
      cursor: pointer;
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      transition: color 0.2s;
      padding: 0; line-height: 1;
    }
    .sno__close:hover { color: var(--sand); }

    /* Order Now button inside overlay */
    .btn-outline-light {
      font-family: var(--sans);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(244,236,226,0.7);
      border: 1px solid rgba(244,236,226,0.25);
      padding: 0.5rem 1.1rem;
      border-radius: 40px;
      background: transparent;
      text-decoration: none;
      cursor: pointer;
      transition: color 0.25s, border-color 0.25s;
      white-space: nowrap;
    }
    .btn-outline-light:hover { color: var(--sand); border-color: rgba(244,236,226,0.5); }

    /* Nav link rows */
    .sno__links {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      text-align: center;
    }
    .sno__row {
      display: flex;
      align-items: center;
      gap: clamp(1rem, 3vw, 2.5rem);
      flex-wrap: wrap;
      justify-content: center;
      padding: 0.15rem 2rem;
    }
    .sno__link {
      font-family: var(--serif);
      font-size: clamp(1.8rem, 3.2vw, 2.9rem);
      font-weight: 400;
      color: rgba(244,236,226,0.72);
      text-decoration: none;
      line-height: 1.3;
      letter-spacing: -0.01em;
      transition: color 0.2s;
    }
    .sno__link:hover,
    .sno__link--active { color: var(--clay); }
    .sno__link--pill {
      border: 1px solid rgba(244,236,226,0.28);
      border-radius: 50px;
      padding: 0.2em 0.9em;
      font-size: clamp(1.2rem, 2.2vw, 2rem);
    }
    .sno__link--pill:hover { border-color: rgba(201,154,91,0.7); }

    /* Social row */
    .sno__social {
      position: absolute;
      bottom: 2.5rem;
      display: flex;
      gap: 2rem;
      align-items: center;
    }
    .sno__social a {
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(244,236,226,0.3);
      text-decoration: none;
      transition: color 0.2s;
    }
    .sno__social a:hover { color: var(--clay); }

    /* Stagger animation on open */
    .site-nav-overlay.is-open .sno__link { animation: snoFadeUp 0.45s both; }
    .site-nav-overlay.is-open .sno__row:nth-child(1) .sno__link:nth-child(1) { animation-delay: 0.18s; }
    .site-nav-overlay.is-open .sno__row:nth-child(1) .sno__link:nth-child(2) { animation-delay: 0.23s; }
    .site-nav-overlay.is-open .sno__row:nth-child(1) .sno__link:nth-child(3) { animation-delay: 0.28s; }
    .site-nav-overlay.is-open .sno__row:nth-child(2) .sno__link:nth-child(1) { animation-delay: 0.33s; }
    .site-nav-overlay.is-open .sno__row:nth-child(2) .sno__link:nth-child(2) { animation-delay: 0.38s; }
    .site-nav-overlay.is-open .sno__row:nth-child(2) .sno__link:nth-child(3) { animation-delay: 0.43s; }
    .site-nav-overlay.is-open .sno__row:nth-child(3) .sno__link:nth-child(1) { animation-delay: 0.48s; }
    .site-nav-overlay.is-open .sno__row:nth-child(3) .sno__link:nth-child(2) { animation-delay: 0.53s; }

    @keyframes snoFadeUp {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: none; }
    }

    .btn {
      display: inline-block;
      font-family: var(--sans);
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 0.7rem 1.5rem;
      cursor: pointer;
      border: none;
      transition: all 0.25s var(--ease);
      white-space: nowrap;
    }
    .btn-primary  { background: var(--olive); color: var(--white); }
    .btn-primary:hover  { background: var(--clay); }
    .btn-outline  { background: transparent; color: var(--olive); border: 1.5px solid var(--olive); }
    .btn-outline:hover  { background: var(--olive); color: var(--white); }
    .btn-clay     { background: var(--clay); color: var(--white); }
    .btn-clay:hover     { background: var(--olive); }
    .btn-lg { padding: 1rem 2.5rem; font-size: 0.7rem; }
    .btn-round { border-radius: 40px; }

    /* ─────────────────────────────────────────────
       HERO
    ───────────────────────────────────────────── */
    .hero {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: calc(100svh - 72px);
      background: var(--sand);
      overflow: hidden;
    }

    .hero__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 5rem 4rem 5rem 5rem;
      position: relative;
    }

    .hero__badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: rgba(201,154,91,0.12);
      border: 1px solid rgba(201,154,91,0.35);
      color: var(--clay);
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      padding: 0.45rem 1rem;
      border-radius: 40px;
      width: fit-content;
      margin-bottom: 1.75rem;
    }
    .hero__badge-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--clay);
      animation: pulse 2s ease infinite;
    }

    .hero__title {
      font-family: var(--serif);
      font-size: clamp(2.8rem, 5vw, 4.5rem);
      font-weight: 500;
      color: var(--olive);
      line-height: 1.1;
      margin-bottom: 1.5rem;
    }
    .hero__title em { font-style: italic; color: var(--clay); }

    .hero__sub {
      font-size: 0.9rem;
      font-weight: 300;
      color: rgba(30,30,30,0.65);
      line-height: 1.85;
      max-width: 420px;
      margin-bottom: 2.5rem;
    }

    .hero__ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 3rem; }

    .hero__trust {
      display: flex;
      align-items: center;
      gap: 2rem;
      padding-top: 2.5rem;
      border-top: 1px solid rgba(74,79,58,0.1);
    }
    .trust-item { display: flex; flex-direction: column; gap: 0.2rem; }
    .trust-item__num {
      font-family: var(--serif);
      font-size: 1.5rem;
      color: var(--olive);
      line-height: 1;
    }
    .trust-item__label {
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--clay);
    }
    .trust-divider { width: 1px; height: 36px; background: rgba(74,79,58,0.12); }

    .hero__visual {
      position: relative;
      overflow: hidden;
    }
    .hero__visual-bg {
      position: absolute;
      inset: 0;
      background: url('brand_assets/Authentic-Shakshuka-Recipe.jpg') center/cover no-repeat;
    }
    .hero__visual-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(244,236,226,0.15) 0%, transparent 40%);
    }
    .hero__card {
      position: absolute;
      bottom: 3rem;
      left: 2rem;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(12px);
      padding: 1.25rem 1.5rem;
      border-radius: var(--radius);
      box-shadow: 0 8px 32px rgba(74,79,58,0.15);
      min-width: 220px;
    }
    .hero__card-label {
      font-size: 0.55rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--clay);
      margin-bottom: 0.4rem;
    }
    .hero__card-title {
      font-family: var(--serif);
      font-size: 1rem;
      color: var(--olive);
      margin-bottom: 0.25rem;
    }
    .hero__card-desc {
      font-size: 0.72rem;
      font-weight: 300;
      color: rgba(30,30,30,0.6);
    }


    /* ─────────────────────────────────────────────
       ORDER STRIP
    ───────────────────────────────────────────── */
    .order-strip {
      background: var(--olive);
      padding: 0;
    }
    .order-strip__inner {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      max-width: 100%;
    }
    .order-option {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      padding: 2rem 3rem;
      border-right: 1px solid rgba(255,255,255,0.08);
      cursor: pointer;
      transition: background 0.25s;
    }
    .order-option:last-child { border-right: none; }
    .order-option:hover { background: rgba(255,255,255,0.05); }
    .order-option__icon {
      width: 44px; height: 44px;
      background: rgba(230,193,122,0.15);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .order-option__icon svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .order-option__text { flex: 1; }
    .order-option__title {
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--sand);
      margin-bottom: 0.2rem;
    }
    .order-option__sub {
      font-size: 0.68rem;
      font-weight: 300;
      color: rgba(230,193,122,0.65);
    }
    .order-option__arrow { color: rgba(230,193,122,0.5); font-size: 1.1rem; }


    /* ─────────────────────────────────────────────
       SECTION HEADER (REUSABLE)
    ───────────────────────────────────────────── */
    .section-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 2.5rem;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .section-header h2 {
      font-family: var(--serif);
      font-size: clamp(1.8rem, 3vw, 2.5rem);
      font-weight: 500;
      color: var(--charcoal);
    }
    .section-header h2 em { font-style: italic; color: var(--clay); }
    .section-eyebrow {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--clay);
      margin-bottom: 0.6rem;
    }
    .section-link {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--olive);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      white-space: nowrap;
      transition: color 0.25s;
      padding-bottom: 4px;
    }
    .section-link:hover { color: var(--clay); }
    .section-link::after { content: '→'; font-size: 0.8rem; }


    /* ─────────────────────────────────────────────
       MENU FAVORITES CAROUSEL
    ───────────────────────────────────────────── */
    .favorites {
      padding: 5rem 0 5rem 3rem;
      background: var(--white);
      overflow: hidden;
    }
    .favorites__header {
      padding-right: 3rem;
      margin-bottom: 2.5rem;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
    }

    .carousel-wrap { position: relative; }

    .carousel {
      display: flex;
      gap: 1.25rem;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding-right: 3rem;
      padding-bottom: 1rem;
      cursor: grab;
    }
    .carousel:active { cursor: grabbing; }
    .carousel::-webkit-scrollbar { height: 3px; }
    .carousel::-webkit-scrollbar-track { background: rgba(74,79,58,0.05); }
    .carousel::-webkit-scrollbar-thumb { background: rgba(74,79,58,0.2); border-radius: 2px; }

    .food-card {
      flex: 0 0 240px;
      scroll-snap-align: start;
      display: flex;
      flex-direction: column;
      background: var(--white);
      border-radius: var(--radius);
      border: 1px solid rgba(74,79,58,0.1);
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
    }
    .food-card:hover {
      transform: scale(1.03);
      box-shadow: 0 10px 28px rgba(0,0,0,0.13);
    }

    .food-card__img-wrap {
      position: relative;
      overflow: hidden;
      height: 192px;
      flex-shrink: 0;
    }
    .food-card__img-bg {
      position: absolute;
      inset: 0;
      transition: transform 0.35s var(--ease);
    }
    .food-card:hover .food-card__img-bg { transform: scale(1.05); }

    .food-card__img-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, transparent 55%);
      pointer-events: none;
    }

    .food-card__veg {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 20px; height: 20px;
      border-radius: 4px;
      background: rgba(255,255,255,0.95);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .food-card__veg.is-veg   { border: 1.5px solid #16a34a; }
    .food-card__veg.is-nonveg{ border: 1.5px solid #dc2626; }
    .food-card__veg-dot { width: 10px; height: 10px; border-radius: 50%; }
    .is-veg   .food-card__veg-dot { background: #16a34a; }
    .is-nonveg .food-card__veg-dot { background: #dc2626; }

    .food-card__add-wrap {
      display: none;
      position: absolute;
      bottom: 14px;
      left: 0; right: 0;
      display: flex;
      justify-content: center;
    }
    .food-card__add-btn {
      font-family: var(--sans);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      background: rgba(255,255,255,0.88);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      color: var(--charcoal);
      border: 1px solid rgba(255,255,255,0.55);
      border-radius: 8px;
      padding: 0.5rem 2rem;
      cursor: pointer;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.25s, transform 0.25s, background 0.2s, color 0.2s;
      box-shadow: 0 4px 14px rgba(0,0,0,0.22);
    }
    .food-card:hover .food-card__add-btn {
      opacity: 1;
      transform: translateY(0);
    }
    .food-card__add-btn:hover {
      background: var(--olive);
      color: var(--white);
      border-color: var(--olive);
    }
    .food-card__add-btn:active { transform: scale(0.96); }

    .food-card__body {
      padding: 1rem;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .food-card__pricing {
      display: flex;
      align-items: baseline;
      gap: 0.45rem;
      flex-wrap: wrap;
    }
    .food-card__price {
      font-size: 1rem;
      font-weight: 700;
      color: var(--charcoal);
    }
    .food-card__original {
      font-size: 0.75rem;
      text-decoration: line-through;
      color: rgba(30,30,30,0.38);
    }
    .food-card__savings {
      font-size: 0.58rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      color: #16a34a;
    }
    .food-card__quantity {
      margin-top: 0.25rem;
      font-size: 0.72rem;
      color: rgba(30,30,30,0.48);
    }
    .food-card__name {
      margin-top: 0.5rem;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--charcoal);
      line-height: 1.3;
    }
    .food-card__prep {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      margin-top: auto;
      padding-top: 0.6rem;
      font-size: 0.68rem;
      color: rgba(30,30,30,0.4);
    }
    .food-card__prep svg { width: 12px; height: 12px; flex-shrink: 0; }

    .card-img-1 { background: url('brand_assets/Authentic-Shakshuka-Recipe.jpg') center/cover no-repeat; }
    .card-img-2 { background: url('brand_assets/eggs-benedict.jpg') center/cover no-repeat; }
    .card-img-3 { background: url('brand_assets/Green-Shakshuka-with-Quinoa-1536x864.jpg') center/cover no-repeat; }
    .card-img-4 { background: url('brand_assets/sunrise-platter.jpg') center/cover no-repeat; }
    .card-img-5 { background: url('brand_assets/musakhan-waffles.jpg') center/cover no-repeat; }
    .card-img-6 { background: url('brand_assets/knafeh-french-toast.jpg') center/cover no-repeat; }
    .card-img-7 { background: url('brand_assets/halloumi-herb-eggs.jpg') center/cover no-repeat; }
    .card-img-8 { background: url('brand_assets/fatteh-benedict.jpg') center/cover no-repeat; }

    .carousel-arrows {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }
    .carousel-btn {
      width: 40px; height: 40px;
      border-radius: 50%;
      border: 1.5px solid rgba(74,79,58,0.2);
      background: var(--white);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.25s;
      color: var(--olive);
      font-size: 0.9rem;
    }
    .carousel-btn:hover { background: var(--olive); color: var(--white); border-color: var(--olive); }


    /* ─────────────────────────────────────────────
       PROMO CARDS ROW
    ───────────────────────────────────────────── */
    .promos {
      padding: 2rem 3rem 5rem;
      background: var(--white);
    }
    .promos__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
    }
    .promo-card {
      border-radius: var(--radius);
      overflow: hidden;
      position: relative;
      min-height: 240px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 2rem;
      text-decoration: none;
      cursor: pointer;
    }
    .promo-card__bg {
      position: absolute;
      inset: 0;
      transition: transform 0.5s var(--ease);
    }
    .promo-card:hover .promo-card__bg { transform: scale(1.04); }
    .promo-card__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(30,30,30,0.75) 0%, rgba(30,30,30,0.1) 60%, transparent 100%);
    }
    .promo-card__content { position: relative; z-index: 1; }
    .promo-card__eyebrow {
      font-size: 0.55rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 0.4rem;
    }
    .promo-card__title {
      font-family: var(--serif);
      font-size: 1.35rem;
      color: var(--white);
      margin-bottom: 0.5rem;
      line-height: 1.2;
    }
    .promo-card__cta {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold);
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }
    .promo-card__cta::after { content: '→'; }

    .promo-bg-1 { background: linear-gradient(135deg,#4A4F3A 0%,#6B7A50 50%,#8B7A55 100%); }
    .promo-bg-2 { background: linear-gradient(135deg,#C99A5B 0%,#E6C17A 50%,#D4874A 100%); }
    .promo-bg-3 { background: linear-gradient(145deg,#2E3228 0%,#4A4F3A 50%,#C99A5B 100%); }


    /* ─────────────────────────────────────────────
       FULL MENU + FILTER TABS
    ───────────────────────────────────────────── */
    .menu-section {
      background: var(--sand);
      padding: 5rem 3rem;
    }

    .menu-tabs {
      display: flex;
      gap: 0;
      margin-bottom: 1.5rem;
      border-bottom: 2px solid rgba(74,79,58,0.1);
    }
    .menu-tab {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(30,30,30,0.45);
      padding: 0.85rem 1.5rem;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      transition: color 0.25s, border-color 0.25s;
      white-space: nowrap;
    }
    .menu-tab.active { color: var(--olive); border-bottom-color: var(--olive); }
    .menu-tab:hover:not(.active) { color: var(--clay); }

    .diet-filters {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-bottom: 3rem;
    }
    .diet-pill {
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--olive);
      border: 1px solid rgba(74,79,58,0.2);
      padding: 0.4rem 1rem;
      border-radius: 40px;
      cursor: pointer;
      background: transparent;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .diet-pill:hover, .diet-pill.active {
      background: var(--olive);
      color: var(--white);
      border-color: var(--olive);
    }

    .menu-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1.25rem;
    }

    .menu-card {
      background: var(--white);
      border-radius: var(--radius);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: box-shadow 0.3s, transform 0.3s;
    }
    .menu-card:hover { box-shadow: 0 8px 32px rgba(74,79,58,0.12); transform: translateY(-2px); }
    .menu-card.hidden { display: none; }

    .menu-card__img {
      aspect-ratio: 16/9;
      position: relative;
      overflow: hidden;
    }
    .menu-card__img-bg {
      position: absolute;
      inset: 0;
      transition: transform 0.5s var(--ease);
    }
    .menu-card:hover .menu-card__img-bg { transform: scale(1.05); }

    .mcard-img-1  { background: url('brand_assets/Authentic-Shakshuka-Recipe.jpg') center/cover no-repeat; }
    .mcard-img-2  { background: url('brand_assets/eggs-benedict.jpg') center/cover no-repeat; }
    .mcard-img-3  { background: url('brand_assets/Green-Shakshuka-with-Quinoa-1536x864.jpg') center/cover no-repeat; }
    .mcard-img-4  { background: url('brand_assets/halloumi-herb-eggs.jpg') center/cover no-repeat; }
    .mcard-img-5  { background: url('brand_assets/sunrise-platter.jpg') center/cover no-repeat; }
    .mcard-img-6  { background: url('brand_assets/musakhan-waffles.jpg') center/cover no-repeat; }
    .mcard-img-7  { background: url('brand_assets/fatteh-benedict.jpg') center/cover no-repeat; }
    .mcard-img-8  { background: url('brand_assets/knafeh-french-toast.jpg') center/cover no-repeat; }
    .mcard-img-9  { background: url('brand_assets/lemon-semolina-cake.jpg') center/cover no-repeat; }
    .mcard-img-10 { background: url('brand_assets/mint-lemonade.jpg') center/cover no-repeat; }
    .mcard-img-11 { background: url('brand_assets/saffron-latte.jpg') center/cover no-repeat; }
    .mcard-img-12 { background: url('brand_assets/jallab-sunrise.jpg') center/cover no-repeat; }

    .menu-card__badge {
      position: absolute;
      top: 0.65rem;
      left: 0.65rem;
      font-size: 0.5rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 0.25rem 0.6rem;
      border-radius: 3px;
    }
    .badge-new-sm   { background: var(--clay); color: var(--white); }
    .badge-pop-sm   { background: var(--olive); color: var(--white); }
    .badge-veg-sm   { background: #5A7A40; color: var(--white); }
    .badge-chef-sm  { background: var(--charcoal); color: var(--white); }

    .menu-card__body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
    .menu-card__name {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--charcoal);
      margin-bottom: 0.4rem;
    }
    .menu-card__desc {
      font-size: 0.76rem;
      font-weight: 300;
      color: rgba(30,30,30,0.58);
      line-height: 1.65;
      flex: 1;
      margin-bottom: 1rem;
    }
    .menu-card__footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .menu-card__price {
      font-family: var(--serif);
      font-style: italic;
      font-size: 1rem;
      color: var(--clay);
    }
    .menu-card__cal {
      font-size: 0.6rem;
      font-weight: 500;
      color: rgba(30,30,30,0.35);
    }
    .menu-card__tags {
      display: flex;
      gap: 0.35rem;
      margin-bottom: 0.75rem;
      flex-wrap: wrap;
    }
    .menu-tag {
      font-size: 0.5rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.2rem 0.5rem;
      border-radius: 3px;
    }
    .tag-veg   { background: rgba(90,122,64,0.1);  color: #5A7A40; }
    .tag-gf    { background: rgba(201,154,91,0.12); color: var(--clay); }
    .tag-df    { background: rgba(74,79,58,0.08);   color: var(--olive); }
    .tag-new   { background: rgba(201,154,91,0.15); color: var(--clay); }


    /* ─────────────────────────────────────────────
       FEATURED ITEM (SEASONAL CTA)
    ───────────────────────────────────────────── */
    .featured {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 500px;
    }
    .featured__visual {
      position: relative;
      overflow: hidden;
      background: url('brand_assets/Authentic-Shakshuka-Recipe.jpg') center/cover no-repeat;
    }
    .featured__visual::after {
      content: 'Shakshuka\00a0Al\00a0Falastin';
      position: absolute;
      bottom: 2rem; left: 2rem;
      font-family: var(--serif);
      font-style: italic;
      font-size: 0.85rem;
      color: rgba(255,255,255,0.6);
    }
    .featured__content {
      background: var(--olive);
      padding: 5rem 4rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .featured__eyebrow {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1.5rem;
    }
    .featured__title {
      font-family: var(--serif);
      font-size: clamp(1.8rem, 3vw, 2.8rem);
      color: var(--sand);
      line-height: 1.15;
      margin-bottom: 1.5rem;
    }
    .featured__desc {
      font-size: 0.875rem;
      font-weight: 300;
      color: rgba(244,236,226,0.7);
      line-height: 1.85;
      margin-bottom: 2.5rem;
    }
    .featured__detail {
      display: flex;
      gap: 2rem;
      margin-bottom: 2.5rem;
      padding-bottom: 2rem;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .featured__detail-item { display: flex; flex-direction: column; gap: 0.2rem; }
    .featured__detail-label {
      font-size: 0.55rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(230,193,122,0.6);
    }
    .featured__detail-val {
      font-family: var(--serif);
      font-size: 1.1rem;
      color: var(--gold);
    }


    /* ─────────────────────────────────────────────
       REWARDS / LOYALTY
    ───────────────────────────────────────────── */
    .rewards {
      background: var(--sand);
      padding: 5rem 3rem;
    }
    .rewards__inner {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 5rem;
      align-items: center;
    }
    .rewards__visual { position: relative; }
    .rewards__card-mock {
      background: linear-gradient(135deg,var(--olive) 0%,var(--olive-dark) 100%);
      border-radius: 16px;
      padding: 2.5rem;
      box-shadow: 0 20px 60px rgba(74,79,58,0.25);
      position: relative;
      overflow: hidden;
    }
    .rewards__card-mock::before {
      content: '';
      position: absolute;
      top: -40px; right: -40px;
      width: 160px; height: 160px;
      border-radius: 50%;
      background: rgba(230,193,122,0.08);
    }
    .rewards__card-mock::after {
      content: '';
      position: absolute;
      bottom: -30px; left: -30px;
      width: 120px; height: 120px;
      border-radius: 50%;
      background: rgba(230,193,122,0.06);
    }
    .rewards__card-logo { height: 36px; margin-bottom: 2.5rem; filter: brightness(0) invert(1) opacity(0.8); }
    .rewards__card-points {
      font-family: var(--serif);
      font-size: 2.8rem;
      color: var(--gold);
      line-height: 1;
      margin-bottom: 0.3rem;
    }
    .rewards__card-points-label {
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(230,193,122,0.6);
      margin-bottom: 2rem;
    }
    .rewards__card-bar-track {
      height: 4px;
      background: rgba(255,255,255,0.1);
      border-radius: 2px;
      margin-bottom: 0.5rem;
      overflow: hidden;
    }
    .rewards__card-bar-fill {
      height: 100%;
      width: 65%;
      background: linear-gradient(to right,var(--clay),var(--gold));
      border-radius: 2px;
    }
    .rewards__card-bar-label {
      display: flex;
      justify-content: space-between;
      font-size: 0.55rem;
      font-weight: 500;
      color: rgba(230,193,122,0.5);
    }
    .rewards__content h2 {
      font-family: var(--serif);
      font-size: clamp(1.8rem, 3vw, 2.5rem);
      color: var(--charcoal);
      line-height: 1.15;
      margin-bottom: 1.25rem;
    }
    .rewards__content h2 em { font-style: italic; color: var(--clay); }
    .rewards__content p {
      font-size: 0.875rem;
      font-weight: 300;
      color: rgba(30,30,30,0.65);
      line-height: 1.85;
      margin-bottom: 2rem;
    }
    .rewards__perks {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 2.5rem;
    }
    .reward-perk { display: flex; align-items: center; gap: 1rem; }
    .reward-perk__icon {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: rgba(201,154,91,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 0.85rem;
    }
    .reward-perk__text { font-size: 0.8rem; font-weight: 400; color: rgba(30,30,30,0.7); }
    .reward-perk__text strong { color: var(--charcoal); font-weight: 600; }


    /* ─────────────────────────────────────────────
       LOCATIONS
    ───────────────────────────────────────────── */
    .locations {
      background: var(--white);
      padding: 5rem 3rem;
    }
    .locations__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
      margin-top: 0;
    }
    .location-card {
      border: 1px solid rgba(74,79,58,0.1);
      border-radius: var(--radius);
      padding: 2rem;
      transition: box-shadow 0.3s, border-color 0.3s;
    }
    .location-card:hover { box-shadow: 0 8px 32px rgba(74,79,58,0.1); border-color: rgba(74,79,58,0.2); }
    .location-card__tag {
      display: inline-block;
      font-size: 0.52rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      background: rgba(201,154,91,0.12);
      color: var(--clay);
      padding: 0.3rem 0.75rem;
      border-radius: 4px;
      margin-bottom: 1rem;
    }
    .location-card__name {
      font-family: var(--serif);
      font-size: 1.15rem;
      color: var(--olive);
      margin-bottom: 0.5rem;
    }
    .location-card__address {
      font-size: 0.78rem;
      font-weight: 300;
      color: rgba(30,30,30,0.6);
      line-height: 1.7;
      margin-bottom: 1rem;
    }
    .location-card__hours {
      font-size: 0.7rem;
      font-weight: 500;
      color: var(--olive);
      margin-bottom: 1.5rem;
    }
    .location-card__hours span { color: rgba(30,30,30,0.45); font-weight: 300; }
    .location-card__actions { display: flex; gap: 0.5rem; }


    /* ─────────────────────────────────────────────
       RESERVE FLASH MESSAGE
    ───────────────────────────────────────────── */
    .flash {
      border-radius: var(--radius);
      padding: 1rem 1.5rem;
      margin-bottom: 2rem;
      font-size: 0.82rem;
      font-weight: 500;
      text-align: center;
    }
    .flash--ok    { background: rgba(22,163,74,0.15);  color: var(--gold); border: 1px solid rgba(22,163,74,0.3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
    .flash--error { background: rgba(220,38,38,0.12);  color: #7f1d1d; border: 1px solid rgba(220,38,38,0.25); }


    /* ─────────────────────────────────────────────
       FOOTER
    ───────────────────────────────────────────── */
    .footer {
      background: var(--charcoal);
      padding: 4.5rem 3rem 2rem;
    }
    .footer__grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 4rem;
      max-width: 100%;
      margin-bottom: 3.5rem;
      padding-bottom: 3.5rem;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .footer__brand img { height: 42px; margin-bottom: 1rem; filter: brightness(0) invert(1) opacity(0.75); }
    .footer__brand-name { font-family: var(--serif); font-size: 1.1rem; color: var(--sand); margin-bottom: 0.3rem; }
    .footer__brand-sub  { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--clay); margin-bottom: 1.25rem; }
    .footer__brand-desc { font-size: 0.78rem; font-weight: 300; color: rgba(244,236,226,0.35); line-height: 1.7; }

    .footer__col-title { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; }
    .footer__links { list-style: none; display: flex; flex-direction: column; gap: 0.8rem; }
    .footer__links a { font-size: 0.78rem; font-weight: 300; color: rgba(244,236,226,0.45); text-decoration: none; transition: color 0.25s; }
    .footer__links a:hover { color: var(--gold); }

    .footer__bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .footer__copy { font-size: 0.65rem; font-weight: 300; color: rgba(255,255,255,0.18); }
    .footer__social { display: flex; gap: 1.5rem; }
    .footer__social a { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.25); text-decoration: none; transition: color 0.25s; }
    .footer__social a:hover { color: var(--gold); }


    /* ─────────────────────────────────────────────
       KEYFRAMES & UTILS
    ───────────────────────────────────────────── */
    @keyframes pulse {
      0%,100% { opacity: 1; transform: scale(1); }
      50%      { opacity: 0.5; transform: scale(0.8); }
    }

    .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-d1 { transition-delay: 0.1s; }
    .reveal-d2 { transition-delay: 0.2s; }
    .reveal-d3 { transition-delay: 0.3s; }


    /* ─────────────────────────────────────────────
       ORDER MODAL
    ───────────────────────────────────────────── */
    .order-overlay {
      position: fixed;
      inset: 0;
      background: rgba(20,20,20,0.72);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      z-index: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s var(--ease);
    }
    .order-overlay.open {
      opacity: 1;
      pointer-events: all;
    }
    .order-modal {
      background: var(--sand-light);
      border-radius: 20px;
      padding: 3rem 2.5rem 2.5rem;
      max-width: 580px;
      width: 100%;
      position: relative;
      transform: scale(0.92) translateY(24px);
      transition: transform 0.35s var(--ease);
      box-shadow: 0 32px 80px rgba(20,20,20,0.28);
    }
    .order-overlay.open .order-modal {
      transform: scale(1) translateY(0);
    }
    .order-modal__close {
      position: absolute;
      top: 1.1rem;
      right: 1.1rem;
      background: none;
      border: 1px solid rgba(74,79,58,0.15);
      width: 34px; height: 34px;
      border-radius: 50%;
      font-size: 1rem;
      color: rgba(30,30,30,0.4);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .order-modal__close:hover { background: var(--sand); color: var(--charcoal); border-color: rgba(74,79,58,0.3); }
    .order-modal__eyebrow {
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--clay);
      margin-bottom: 0.75rem;
    }
    .order-modal__title {
      font-family: var(--serif);
      font-size: clamp(1.6rem, 3vw, 2.1rem);
      color: var(--olive);
      line-height: 1.15;
      margin-bottom: 0.6rem;
    }
    .order-modal__sub {
      font-size: 0.82rem;
      font-weight: 300;
      color: rgba(30,30,30,0.5);
      line-height: 1.7;
      margin-bottom: 2rem;
    }
    .order-modal__options {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
    .order-modal__option {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.85rem;
      background: var(--white);
      border: 1.5px solid rgba(74,79,58,0.1);
      border-radius: 14px;
      padding: 1.75rem 1rem 1.5rem;
      text-decoration: none;
      cursor: pointer;
      transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s;
    }
    .order-modal__option:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 36px rgba(30,30,30,0.12);
      border-color: rgba(74,79,58,0.22);
    }
    .order-modal__option svg { width: 100%; height: 40px; }
    .order-modal__option img { width: 100%; height: 40px; object-fit: contain; }
    .order-modal__option-tag {
      font-size: 0.55rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(30,30,30,0.58);
    }
    .order-modal__divider {
      text-align: center;
      margin-top: 1.75rem;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(74,79,58,0.1);
      font-size: 0.72rem;
      font-weight: 300;
      color: rgba(30,30,30,0.58);
    }
    @media (max-width: 520px) {
      .order-modal__options { grid-template-columns: 1fr; }
      .order-modal { padding: 2.5rem 1.5rem 2rem; }
    }

    /* ─────────────────────────────────────────────
       MENU CARD — ADD BUTTON
    ───────────────────────────────────────────── */
    .menu-card__add-wrap {
      position: absolute;
      bottom: 12px;
      left: 0; right: 0;
      display: flex;
      justify-content: center;
    }
    .menu-card__add-btn {
      font-family: var(--sans);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      background: rgba(255,255,255,0.9);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      color: var(--charcoal);
      border: 1px solid rgba(255,255,255,0.6);
      border-radius: 8px;
      padding: 0.5rem 2rem;
      cursor: pointer;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.25s, transform 0.25s, background 0.2s, color 0.2s;
      box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    }
    .menu-card:hover .menu-card__add-btn { opacity: 1; transform: translateY(0); }
    .menu-card__add-btn:hover { background: var(--olive); color: var(--white); border-color: var(--olive); }
    .menu-card__add-btn:active { transform: scale(0.96); }

    /* ─────────────────────────────────────────────
       CLEAR CART BUTTON
    ───────────────────────────────────────────── */
    .clear-cart-btn {
      font-family: var(--sans);
      font-size: 0.58rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      background: transparent;
      color: rgba(30,30,30,0.38);
      border: 1px solid rgba(30,30,30,0.16);
      padding: 0.48rem 0.85rem;
      border-radius: 40px;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
      display: none;
    }
    .clear-cart-btn:hover { background: rgba(220,38,38,0.07); color: #dc2626; border-color: rgba(220,38,38,0.28); }


    /* ─────────────────────────────────────────────
       RESPONSIVE
    ───────────────────────────────────────────── */
    @media (max-width: 1024px) {
      .hero               { grid-template-columns: 1fr; min-height: auto; }
      .hero__visual       { min-height: 50vw; }
      .featured           { grid-template-columns: 1fr; }
      .featured__visual   { min-height: 50vw; }
      .rewards__inner     { grid-template-columns: 1fr; gap: 3rem; }
      .locations__grid    { grid-template-columns: 1fr 1fr; }
      .promos__grid       { grid-template-columns: 1fr; }
      .footer__grid       { grid-template-columns: 1fr 1fr; gap: 3rem; }
    }

    @media (max-width: 768px) {
      /* NAV — mobile */
      .nav__top           { padding: 0 1rem; }
      .nav__logo-name     { display: none; }
      .nav__right         { gap: 0.4rem; }
      .nav__right .btn    { padding: 0.42rem 0.7rem; font-size: 0.55rem; letter-spacing: 0.09em; }
      .clear-cart-btn     { font-size: 0.55rem; padding: 0.42rem 0.55rem; }
      .clear-label        { display: none; }
      /* Site nav overlay — mobile */
      .sno__row           { gap: 0.75rem; padding: 0.1rem 1.25rem; }
      .sno__link          { font-size: clamp(1.5rem, 6vw, 2.2rem); }
      .sno__link--pill    { font-size: clamp(1.1rem, 4vw, 1.6rem); }
      .sno__bar .nav__logo-name { display: none; }
      .sno__social        { bottom: 1.75rem; gap: 1.25rem; }

      /* HERO */
      .hero__content      { padding: 3rem 1.5rem 2.5rem; }

      /* ORDER STRIP */
      .order-strip        { scroll-margin-top: 72px; }
      .order-strip__inner { grid-template-columns: 1fr; }
      .order-option       { padding: 1.25rem 1.5rem; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
      .order-option:last-child { border-bottom: none; }

      /* FAVORITES */
      .favorites          { padding: 3rem 0 3rem 1.25rem; }
      .favorites__header  { padding-right: 1.25rem; flex-wrap: wrap; gap: 0.75rem; }

      /* PROMO CARDS */
      .promos             { padding: 1.5rem 1.25rem 3rem; }

      /* MENU */
      .menu-section       { padding: 3.5rem 1.25rem; }
      .menu-tabs          { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

      /* FEATURED */
      .featured__content  { padding: 3rem 1.5rem; }

      /* REWARDS & LOCATIONS */
      .rewards            { padding: 3.5rem 1.25rem; }
      .locations          { padding: 3.5rem 1.25rem; }
      .locations__grid    { grid-template-columns: 1fr; }

      /* RESERVE */
      .res-form           { grid-template-columns: 1fr !important; }
      section#reserve     { padding-left: 1.5rem !important; padding-right: 1.5rem !important;
                            padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }

      /* FOOTER */
      .footer             { padding: 3rem 1.25rem 1.5rem; }
      .footer__grid       { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2rem; padding-bottom: 2rem; }
      .footer__bottom     { flex-direction: column; text-align: center; gap: 1rem; }
    }

    @media (max-width: 480px) {
      .hero__title        { font-size: clamp(2rem, 10vw, 3rem); }
      .featured__content h2 { font-size: clamp(1.8rem, 8vw, 2.5rem); }
      .section-header     { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
      .favorites__header  { flex-direction: column; align-items: flex-start; }
    }

    /* ─────────────────────────────────────────────
       FULL-SCREEN MENU OVERLAY
    ───────────────────────────────────────────── */
    #menu { display: none; } /* menu lives in overlay now */

    /* ─────────────────────────────────────────────
       ABOUT US
    ───────────────────────────────────────────── */
    .about {
      background: var(--sand-light);
      padding: 6rem 3rem;
    }
    .about__inner {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
    }
    .about__content h2 {
      font-family: var(--serif);
      font-size: clamp(2rem, 3.5vw, 2.8rem);
      color: var(--olive);
      margin-bottom: 1.5rem;
      line-height: 1.2;
    }
    .about__content h2 em { font-style: italic; color: var(--clay); }
    .about__content p {
      font-size: 0.875rem;
      font-weight: 300;
      color: rgba(30,30,30,0.65);
      line-height: 1.85;
      margin-bottom: 1.25rem;
    }
    .about__office {
      background: var(--sand);
      border: 1px solid rgba(74,79,58,0.12);
      border-radius: var(--radius);
      padding: 1.75rem 2rem;
      margin-top: 2rem;
    }
    .about__office-label {
      font-size: 0.55rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--clay);
      margin-bottom: 0.6rem;
    }
    .about__office-name {
      font-family: var(--serif);
      font-size: 1.1rem;
      color: var(--olive);
      margin-bottom: 0.35rem;
    }
    .about__office-address {
      font-size: 0.8rem;
      font-weight: 300;
      color: rgba(30,30,30,0.6);
      line-height: 1.7;
    }
    .about__visual-img {
      width: 100%;
      aspect-ratio: 4/5;
      object-fit: cover;
      border-radius: 16px;
      display: block;
    }
    .about__stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
      margin-top: 1.25rem;
    }
    .about__stat {
      background: var(--white);
      border: 1px solid rgba(74,79,58,0.1);
      border-radius: var(--radius);
      padding: 1.1rem;
      text-align: center;
    }
    .about__stat-num {
      font-family: var(--serif);
      font-size: 1.6rem;
      color: var(--olive);
      line-height: 1;
      margin-bottom: 0.2rem;
    }
    .about__stat-label {
      font-size: 0.55rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--clay);
    }

    /* ─────────────────────────────────────────────
       CATERING & EVENTS
    ───────────────────────────────────────────── */
    .catering {
      background: var(--olive);
      padding: 6rem 3rem;
    }
    .catering__inner { max-width: 1100px; margin: 0 auto; }
    .catering__header {
      text-align: center;
      margin-bottom: 4rem;
    }
    .catering__header h2 {
      font-family: var(--serif);
      font-size: clamp(2rem, 3.5vw, 3rem);
      color: var(--sand);
      line-height: 1.15;
      margin-bottom: 1rem;
    }
    .catering__header h2 em { font-style: italic; color: var(--gold); }
    .catering__header p {
      font-size: 0.9rem;
      font-weight: 300;
      color: rgba(244,236,226,0.65);
      max-width: 580px;
      margin: 0 auto;
      line-height: 1.8;
    }
    .catering__services {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
      margin-bottom: 4rem;
    }
    .catering__service {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(230,193,122,0.14);
      border-radius: var(--radius);
      padding: 2rem;
    }
    .catering__service-icon {
      width: 44px; height: 44px;
      background: rgba(201,154,91,0.15);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.25rem;
    }
    .catering__service-icon svg {
      width: 22px; height: 22px;
      stroke: var(--gold);
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .catering__service h3 {
      font-family: var(--serif);
      font-size: 1.05rem;
      color: var(--sand);
      margin-bottom: 0.6rem;
    }
    .catering__service p {
      font-size: 0.78rem;
      font-weight: 300;
      color: rgba(244,236,226,0.55);
      line-height: 1.75;
    }
    .catering__form-wrap {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(230,193,122,0.14);
      border-radius: 16px;
      padding: 3rem;
      max-width: 800px;
      margin: 0 auto;
    }
    .catering__form-title {
      font-family: var(--serif);
      font-size: 1.5rem;
      color: var(--sand);
      margin-bottom: 0.4rem;
    }
    .catering__form-sub {
      font-size: 0.78rem;
      font-weight: 300;
      color: rgba(244,236,226,0.5);
      margin-bottom: 2rem;
    }
    .catering-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25rem;
    }
    .catering-form__field { display: flex; flex-direction: column; gap: 0.45rem; }
    .catering-form__field--full { grid-column: 1 / -1; }
    .catering-form__label {
      font-size: 0.55rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(230,193,122,0.6);
    }
    .catering-form__input,
    .catering-form__select,
    .catering-form__textarea {
      font-family: var(--sans);
      font-size: 0.875rem;
      font-weight: 300;
      background: transparent;
      border: none;
      border-bottom: 1px solid rgba(230,193,122,0.2);
      color: var(--sand);
      padding: 0.7rem 0;
      outline: none;
      transition: border-color 0.25s;
      width: 100%;
    }
    .catering-form__input::placeholder { color: rgba(244,236,226,0.25); }
    .catering-form__input:focus,
    .catering-form__select:focus { border-bottom-color: var(--gold); }
    .catering-form__select { appearance: none; -webkit-appearance: none; }
    .catering-form__select option { background: var(--olive-dark); }
    .catering-form__textarea {
      resize: vertical;
      min-height: 80px;
      border: 1px solid rgba(230,193,122,0.2);
      border-radius: 6px;
      padding: 0.7rem;
    }
    .catering-form__textarea::placeholder { color: rgba(244,236,226,0.25); }
    .catering-form__textarea:focus { border-color: var(--gold); outline: none; }
    .catering-form__submit { grid-column: 1 / -1; text-align: right; margin-top: 0.5rem; }

    /* ─────────────────────────────────────────────
       GIFT CARDS
    ───────────────────────────────────────────── */
    .gift-cards {
      background: var(--sand);
      padding: 6rem 3rem;
    }
    .gift-cards__inner {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
    }
    .gift-cards__content h2 {
      font-family: var(--serif);
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      color: var(--olive);
      margin-bottom: 1rem;
      line-height: 1.2;
    }
    .gift-cards__content h2 em { font-style: italic; color: var(--clay); }
    .gift-cards__content p {
      font-size: 0.875rem;
      font-weight: 300;
      color: rgba(30,30,30,0.6);
      line-height: 1.85;
      margin-bottom: 2rem;
    }
    .gift-cards__amounts {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-bottom: 2rem;
    }
    .gift-cards__amount {
      font-family: var(--sans);
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--olive);
      border: 1.5px solid rgba(74,79,58,0.22);
      background: var(--white);
      border-radius: 8px;
      padding: 0.6rem 1.25rem;
      cursor: pointer;
      transition: all 0.2s;
    }
    .gift-cards__amount:hover,
    .gift-cards__amount.active {
      background: var(--olive);
      color: var(--white);
      border-color: var(--olive);
    }
    .gift-cards__ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; }
    .gift-cards__visual {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.5rem;
    }
    .gift-card-mock {
      width: 100%;
      max-width: 380px;
      aspect-ratio: 8/5;
      border-radius: 18px;
      background: linear-gradient(135deg, var(--olive) 0%, var(--olive-dark) 60%, #1a1f14 100%);
      padding: 2rem 2.5rem;
      position: relative;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(30,30,30,0.2);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .gift-card-mock::before {
      content: '';
      position: absolute;
      top: -40%; right: -20%;
      width: 280px; height: 280px;
      border-radius: 50%;
      background: rgba(201,154,91,0.1);
    }
    .gift-card-mock::after {
      content: '';
      position: absolute;
      bottom: -30%; left: -10%;
      width: 200px; height: 200px;
      border-radius: 50%;
      background: rgba(230,193,122,0.07);
    }
    .gift-card-mock__logo {
      height: 28px;
      filter: brightness(0) invert(1) opacity(0.82);
      position: relative;
      z-index: 1;
    }
    .gift-card-mock__bottom {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      position: relative;
      z-index: 1;
    }
    .gift-card-mock__value {
      font-family: var(--serif);
      font-size: 2.4rem;
      color: var(--gold);
      line-height: 1;
    }
    .gift-card-mock__label {
      font-size: 0.58rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(244,236,226,0.4);
      margin-bottom: 0.25rem;
    }
    .gift-card-mock__tag {
      font-size: 0.52rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold);
      background: rgba(230,193,122,0.1);
      border: 1px solid rgba(230,193,122,0.2);
      padding: 0.35rem 0.75rem;
      border-radius: 4px;
    }

    /* ─────────────────────────────────────────────
       REWARDS SIGNUP MODAL
    ───────────────────────────────────────────── */
    .rewards-signup-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25rem;
      margin-top: 1.5rem;
    }
    .rewards-signup-form .rsf-field {
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }
    .rewards-signup-form .rsf-field--full { grid-column: 1 / -1; }
    .rewards-signup-form label {
      font-size: 0.55rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(30,30,30,0.4);
    }
    .rewards-signup-form input {
      font-family: var(--sans);
      font-size: 0.875rem;
      font-weight: 300;
      background: transparent;
      border: none;
      border-bottom: 1px solid rgba(74,79,58,0.15);
      color: var(--charcoal);
      padding: 0.7rem 0;
      outline: none;
      transition: border-color 0.25s;
    }
    .rewards-signup-form input:focus { border-bottom-color: var(--clay); }
    .rewards-signup-form input::placeholder { color: rgba(30,30,30,0.25); }

    /* Responsive — new sections */
    @media (max-width: 900px) {
      .about__inner       { grid-template-columns: 1fr; gap: 2.5rem; }
      .gift-cards__inner  { grid-template-columns: 1fr; gap: 2.5rem; }
      .catering__services { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 600px) {
      .about              { padding: 3.5rem 1.25rem; }
      .catering           { padding: 3.5rem 1.25rem; }
      .catering__services { grid-template-columns: 1fr; }
      .catering__form-wrap { padding: 2rem 1.25rem; }
      .catering-form      { grid-template-columns: 1fr; }
      .catering-form__field--full { grid-column: 1; }
      .gift-cards         { padding: 3.5rem 1.25rem; }
      .gift-cards__inner  { gap: 2.5rem; }
      .rewards-signup-form { grid-template-columns: 1fr; }
      .rewards-signup-form .rsf-field--full { grid-column: 1; }
    }

    .fmo {
      position: fixed;
      inset: 0;
      z-index: 9998;
      background: var(--charcoal);
      transform: translateY(100%);
      transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .fmo.is-open { transform: translateY(0); }

    /* Top bar */
    .fmo__bar {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 2.5rem;
      height: 68px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .fmo__bar-brand { font-family: var(--serif); font-size: 1.15rem; color: var(--sand); letter-spacing: 0.03em; }
    .fmo__bar-brand em { color: var(--gold); font-style: italic; }
    .fmo__close {
      background: none; border: none;
      color: rgba(244,236,226,0.45); font-size: 1.6rem;
      cursor: pointer; line-height: 1; padding: 0.5rem;
      transition: color 0.2s;
    }
    .fmo__close:hover { color: var(--gold); }

    /* Screens */
    .fmo__screen { flex: 1; overflow-y: auto; }
    .fmo__screen.is-hidden { display: none; }

    /* Screen 1 — Categories */
    .fmo__s1 {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 3rem 2.5rem 3.5rem;
    }
    .fmo__s1-intro { text-align: center; margin-bottom: 2.75rem; }
    .fmo__s1-eyebrow {
      font-size: 0.6rem; font-weight: 700;
      letter-spacing: 0.25em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 0.55rem;
    }
    .fmo__s1-title {
      font-family: var(--serif);
      font-size: clamp(1.9rem, 3.5vw, 2.9rem);
      color: var(--sand); line-height: 1.12;
    }
    .fmo__s1-title em { color: var(--gold); font-style: italic; }

    /* Category grid */
    .fmo__cat-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      width: 100%;
      max-width: 1200px;
    }
    @media (max-width: 1024px) { .fmo__cat-grid { grid-template-columns: repeat(3, 1fr); } }
    .fmo__cat-card {
      position: relative;
      height: 24vh; min-height: 145px;
      border-radius: 12px; overflow: hidden;
      cursor: pointer;
      background-size: cover; background-position: center;
      transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
    }
    .fmo__cat-card:hover { transform: scale(1.025); box-shadow: 0 20px 55px rgba(0,0,0,0.55); }
    .fmo__cat-card::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.05) 100%);
      transition: background 0.3s;
    }
    .fmo__cat-card:hover::after { background: linear-gradient(to top, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.02) 100%); }
    .fmo__cat-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem 1.75rem; z-index: 1; }
    .fmo__cat-count {
      font-size: 0.58rem; font-weight: 700;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 0.25rem;
    }
    .fmo__cat-name {
      font-family: var(--serif);
      font-size: clamp(1.4rem, 2.5vw, 2.1rem);
      color: var(--white); line-height: 1.1;
    }
    .fmo__cat-arrow {
      display: inline-block; margin-top: 0.45rem;
      font-size: 0.68rem; font-weight: 600;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      transition: color 0.2s, transform 0.2s;
    }
    .fmo__cat-card:hover .fmo__cat-arrow { color: var(--gold); transform: translateX(5px); }

    /* Category card backgrounds */
    .fmo__cat-card--appetizers { background-image: url('brand_assets/sunrise-platter.jpg'); }
    .fmo__cat-card--soups      { background: linear-gradient(135deg, #3d4230 0%, #1e2218 100%); }
    .fmo__cat-card--bennys     { background-image: url('brand_assets/eggs-benedict.jpg'); }
    .fmo__cat-card--waffles    { background-image: url('brand_assets/knafeh-french-toast.jpg'); }
    .fmo__cat-card--mains      { background-image: url('brand_assets/Authentic-Shakshuka-Recipe.jpg'); }
    .fmo__cat-card--omelettes  { background-image: url('brand_assets/Green-Shakshuka-with-Quinoa-1536x864.jpg'); }
    .fmo__cat-card--croissants { background: linear-gradient(135deg, #a07840 0%, #5a3e18 100%); }
    .fmo__cat-card--manakeesh  { background: linear-gradient(135deg, #4a4a2a 0%, #252510 100%); }
    .fmo__cat-card--sandwiches { background-image: url('brand_assets/fatteh-benedict.jpg'); }
    .fmo__cat-card--desserts   { background-image: url('brand_assets/lemon-semolina-cake.jpg'); }
    .fmo__cat-card--specialty  { background-image: url('brand_assets/jallab-sunrise.jpg'); }
    .fmo__cat-card--beverages  { background-image: url('brand_assets/mint-lemonade.jpg'); }
    .fmo__cat-card--cafe       { background-image: url('brand_assets/saffron-latte.jpg'); }
    .fmo__cat-card--kids       { background: linear-gradient(135deg, #3a5a3a 0%, #1a2a1a 100%); }
    /* Item card gradient backgrounds (for items without dedicated photos) */
    .fmo-g-olive   { background: linear-gradient(135deg, #3d4230 0%, #1e2218 100%); }
    .fmo-g-clay    { background: linear-gradient(135deg, #a07840 0%, #5a3e18 100%); }
    .fmo-g-gold    { background: linear-gradient(135deg, #b89050 0%, #7a5820 100%); }
    .fmo-g-dark    { background: linear-gradient(135deg, #2e2e2e 0%, #141414 100%); }
    .fmo-g-warm    { background: linear-gradient(135deg, #5a3a1a 0%, #2a1a08 100%); }
    .fmo-g-red     { background: linear-gradient(135deg, #6B2D35 0%, #3a1018 100%); }
    .fmo-g-teal    { background: linear-gradient(135deg, #1a5a5a 0%, #0a2a2a 100%); }
    .fmo-g-coffee  { background: linear-gradient(135deg, #3a2010 0%, #1a0e08 100%); }
    .fmo-g-sand    { background: linear-gradient(135deg, #7a6a4a 0%, #3a3020 100%); }

    /* Screen 2 — Items */
    .fmo__s2 { padding: 0 2.5rem 3rem; }
    .fmo__s2-header {
      display: flex; align-items: center; gap: 1.5rem;
      padding: 1.5rem 0 1.25rem;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      margin-bottom: 1.75rem;
    }
    .fmo__back {
      display: flex; align-items: center; gap: 0.35rem;
      background: none; border: none;
      color: var(--gold); font-size: 0.68rem; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      cursor: pointer; padding: 0; white-space: nowrap;
      transition: color 0.2s, transform 0.2s;
    }
    .fmo__back:hover { color: var(--clay); transform: translateX(-3px); }
    .fmo__s2-title {
      font-family: var(--serif);
      font-size: clamp(1.5rem, 2.8vw, 2.2rem);
      color: var(--sand); line-height: 1.1;
    }

    /* Diet pills */
    .fmo__pills { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
    .fmo__pill {
      font-size: 0.6rem; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      padding: 0.4rem 1rem; border-radius: 100px;
      border: 1px solid rgba(255,255,255,0.15);
      color: rgba(244,236,226,0.45);
      background: transparent; cursor: pointer;
      transition: all 0.2s;
    }
    .fmo__pill.active, .fmo__pill:hover {
      border-color: var(--gold); color: var(--gold);
      background: rgba(230,193,122,0.08);
    }

    /* Items grid */
    .fmo__items-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 1.5rem;
    }
    /* Dimmed state for non-matching filter items */
    .fmo-item { transition: opacity 0.25s ease, transform 0.25s ease; }
    .fmo-item.fmo-dimmed { opacity: 0.15; transform: scale(0.98); pointer-events: none; }

    /* Dark-theme overrides for menu cards inside overlay */
    .fmo .menu-card { background: #2a2a2a; border-color: rgba(255,255,255,0.06); }
    .fmo .menu-card__name { color: var(--sand); }
    .fmo .menu-card__desc { color: rgba(244,236,226,0.48); }
    .fmo .menu-card__price { color: var(--gold); }
    .fmo .menu-card__footer { border-color: rgba(255,255,255,0.07); }
    .fmo .menu-card__tag { background: rgba(230,193,122,0.1); color: var(--gold); border-color: rgba(230,193,122,0.2); }
    .fmo .menu-card__cal { color: rgba(244,236,226,0.3); }

    /* Mobile */
    @media (max-width: 640px) {
      .fmo__bar { padding: 0 1.25rem; }
      .fmo__s1  { padding: 2rem 1.25rem 2.5rem; }
      .fmo__cat-grid { grid-template-columns: repeat(2, 1fr); gap: 0.65rem; }
      .fmo__cat-card { height: 22vh; min-height: 120px; }
      .fmo__s2  { padding: 0 1.25rem 2rem; }
      .fmo__items-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
    }
    @media (max-width: 380px) {
      .fmo__items-grid { grid-template-columns: 1fr; }
    }

  
    /* ─────────────────────────────────────────────
       TOAST NAV BUTTON
    ───────────────────────────────────────────── */
    .btn-toast-nav {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.45rem 0.85rem;
      background: rgba(255,255,255,0.07);
      border: 1.5px solid rgba(255,255,255,0.14);
      border-radius: 40px;
      cursor: pointer;
      text-decoration: none;
      transition: border-color 0.25s, background 0.25s;
      flex-shrink: 0;
    }
    .btn-toast-nav:hover { background: var(--white); border-color: var(--white); }
    .btn-toast-nav img { height: 18px; width: auto; display: block; filter: brightness(0) invert(1) opacity(0.82); transition: filter 0.25s; }
    .btn-toast-nav:hover img { filter: none; }

    .nav__active a { color: var(--clay) !important; }

    /* Page hero (used on sub-pages) */
    .page-hero {
      background: var(--sand);
      padding: 5rem 3rem 4rem;
      text-align: center;
    }
    .page-hero h1 {
      font-family: var(--serif);
      font-size: clamp(2.2rem, 4vw, 3.5rem);
      color: var(--olive);
      line-height: 1.15;
      margin-bottom: 1rem;
    }
    .page-hero h1 em { font-style: italic; color: var(--clay); }
    .page-hero p {
      font-size: 0.9rem;
      font-weight: 300;
      color: rgba(30,30,30,0.6);
      max-width: 560px;
      margin: 0 auto;
      line-height: 1.85;
    }

    /* ─────────────────────────────────────────────
       MENU PAGE
    ───────────────────────────────────────────── */
    .mpage__filter-bar {
      position: sticky;
      top: 62px;
      z-index: 100;
      background: var(--white);
      border-bottom: 1px solid rgba(74,79,58,0.1);
      box-shadow: 0 2px 20px rgba(0,0,0,0.06);
    }
    .mpage__cats {
      display: flex;
      align-items: stretch;
      overflow-x: auto;
      padding: 0 1.5rem;
      scrollbar-width: none;
      -ms-overflow-style: none;
      border-bottom: 1px solid rgba(74,79,58,0.07);
    }
    .mpage__cats::-webkit-scrollbar { display: none; }
    .mpage__cat {
      font-family: var(--sans);
      font-size: 0.59rem;
      font-weight: 700;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: rgba(30,30,30,0.4);
      padding: 0.9rem 1rem;
      border: none;
      border-bottom: 2px solid transparent;
      background: none;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: color 0.2s, border-color 0.2s;
      margin-bottom: -1px;
    }
    .mpage__cat:hover { color: var(--olive); }
    .mpage__cat.is-active { color: var(--clay); border-bottom-color: var(--clay); }
    .mpage__diet-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.6rem 1.75rem;
      flex-wrap: wrap;
    }
    /* Override pill colors for light background context */
    .mpage__diet-row .fmo__pill {
      color: rgba(30,30,30,0.5);
      border-color: rgba(74,79,58,0.22);
      background: transparent;
    }
    .mpage__diet-row .fmo__pill.active,
    .mpage__diet-row .fmo__pill:hover {
      color: var(--clay);
      border-color: var(--clay);
      background: rgba(201,154,91,0.08);
    }
    .mpage__items-wrap {
      background: var(--sand-light);
      padding: 3rem 2rem 5rem;
      min-height: 40vh;
    }
    .mpage__items {
      max-width: 1380px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 1.5rem;
    }
    .mpage__empty {
      max-width: 1380px;
      margin: 0 auto;
      text-align: center;
      padding: 5rem 2rem;
      color: rgba(30,30,30,0.3);
      font-size: 0.875rem;
      font-weight: 300;
      letter-spacing: 0.05em;
    }
    @media (max-width: 768px) {
      .mpage__cats { padding: 0 1rem; }
      .mpage__cat { padding: 0.85rem 0.75rem; font-size: 0.55rem; }
      .mpage__diet-row { padding: 0.55rem 1rem; }
      .mpage__items-wrap { padding: 2rem 1rem 3.5rem; }
      .mpage__items { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
    }