:root{ --bg:#0e0f10; --card:#17191b; --ink:#e9edf1; --muted:#aab2bd; --brand:#21c27a; --accent:#ffb703; --ring:#2d6cdf; --border:#23272b; }
    *{box-sizing:border-box}
    body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif}
    a{color:inherit;text-decoration:none}
    .container{max-width:1100px;margin:auto;padding:16px}

    /* Header */
    header{position:sticky;top:0;background:rgba(14,15,16,0.95);backdrop-filter:blur(8px);border-bottom:1px solid #24282c;z-index:50}
    header .bar{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:8px 16px}
    .brand{display:flex;align-items:center;gap:10px}
    .logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--brand),#8be89e)}
    h1{font-size:16px;margin:0;white-space:nowrap}

    /* Search */
    .search{position:relative}
    .search input{width:100%;padding:8px 10px 8px 32px;border-radius:10px;border:1px solid #2a2f34;background:#0b0c0d;color:var(--ink)}
    .search svg{position:absolute;left:8px;top:50%;transform:translateY(-50%)}

    /* Lang buttons */
    .controls{display:flex;gap:6px}
    .btn{border:1px solid #2a2f34;background:#0b0c0d;color:var(--ink);padding:6px 10px;border-radius:10px;cursor:pointer;font-size:13px}
    .btn[aria-pressed="true"]{outline:2px solid var(--ring)}

    /* Categories */
    .toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:8px 16px;border-top:1px solid #1e2226;border-bottom:1px solid #1e2226;background:#0b0c0d}
    .pill{padding:6px 10px;border-radius:999px;border:1px solid #2a2f34;background:#0b0c0d;color:#aab2bd;cursor:pointer;font-size:12px}
    .pill[aria-pressed="true"]{background:#15222e;color:#cfe3ff;border-color:#254463}

    /* Hamburger (mobile) */
    .hamburger{display:none;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #2a2f34;background:#0b0c0d;border-radius:8px;cursor:pointer}
    .hamburger[aria-expanded="true"]{outline:2px solid var(--ring)}
    .hamburger svg{pointer-events:none}

    /* Drawer */
    .drawer{position:fixed;inset:0 0 auto 0;top:56px;background:rgba(0,0,0,0.4);display:none}
    .drawer.open{display:block}
    .drawer-panel{background:#0b0c0d;border-bottom:1px solid var(--border);padding:12px 16px}
    .drawer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
    .drawer .pill{width:100%;text-align:center}

    /* Cards */
    .grid{display:block;padding:16px;}
    .card{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
    .imgwrap{aspect-ratio:5/3;background:#0b0c0d}
    .imgwrap img{width:100%;height:100%;object-fit:cover}
    .content{padding:12px 14px 14px}
    .names{margin-bottom:8px}
    .names .line{display:flex;gap:8px;flex-wrap:wrap}
    .names .main{font-size:15px;color:#fff}
    .names .sub{font-size:13px;color:#aab2bd}
    .desc{font-size:13px;color:#d6dde6;min-height:2.6em}
    .meta{display:flex;flex-direction:column;gap:8px;margin-top:10px}
    .single-price{font-weight:700}
    .variants{display:flex;flex-wrap:wrap;gap:6px}
    .var-item{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid #2a2f34;background:#0b0c0d}
    .badges{display:flex;flex-wrap:wrap;gap:6px}
    .badge{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid #2a2f34;color:#cfe3ff}
    .badge.spicy{color:#ffccb8;border-color:#532}
    .badge.halal{color:#c6f3da;border-color:#1d4733}
    .badge.new{color:#ffe9a6;border-color:#51410e}

    footer{color:#aab2bd;padding:24px 16px;text-align:center;border-top:1px solid #23272b}
    .notice{margin:12px 16px;padding:10px 12px;border-radius:10px;border:1px solid #423;background:#251a1a;color:#ffdede;display:none}

    /* Responsive: pills hide on small screens, hamburger shows */
    @media (max-width: 700px){
      header .bar{grid-template-columns:auto 1fr auto}
      .controls{display:none}
      .toolbar{display:none}
      .hamburger{display:flex}
      h1{font-size:15px}
      .search input{padding:8px 8px 8px 30px}
    }

    /* Mobile thumbnails: smaller image height, tap to zoom */
    @media (max-width: 700px){
      .imgwrap{aspect-ratio:auto;height:140px} /* small thumbnail strip */
      .imgwrap img{object-fit:cover}
    }

    /* Lightbox */
    #lightbox {
      display: none;                 /* hidden by default; JS will set to flex on open */
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.85);
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    #lightbox.open {                 /* optional: class you already add in JS */
      display: flex;
    }

    #lightbox img {
      max-width: 92vw;
      max-height: 92vh;
      border-radius: 12px;
      display: block;
    }

    #lightboxClose {
      position: absolute;
      top: 16px;
      right: 16px;
      background: #0b0c0d;
      color: #e9edf1;
      border: 1px solid #2a2f34;
      border-radius: 999px;
      padding: 8px 10px;
      cursor: pointer;
      font-size: 16px;
      line-height: 1;
    }
    #lightboxClose:focus { outline: 2px solid var(--ring, #2d6cdf); outline-offset: 2px; }


    /* Mobile language: show compact cycler, hide 3-button controls */
    .lang-cycle { display: none; }

    @media (max-width: 700px){
      .controls { display: none; }      /* hide the 3 separate buttons on mobile */
      .lang-cycle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 1px solid #2a2f34;
        background: #0b0c0d;
        color: #e9edf1;
        padding: 6px 10px;
        border-radius: 10px;
        cursor: pointer;
        font-size: 13px;
        white-space: nowrap;
      }
    }
    /* 2-row header with a right-side actions group */
    header .header-grid{
      display:grid;
      grid-template-columns: 1fr auto;    /* left area + actions group */
      grid-template-rows: auto auto;
      grid-template-areas:
        "logo   actions"
        "title  search";
      gap: 6px 10px;
      align-items:center;
      padding:8px 16px;
    }

    /* Map elements to areas */
    .logo{
      grid-area:logo;
      width:40px; height:40px;
      border-radius:10px;
      background: url('../images/res/logov2-bg.png') center/cover no-repeat;
    }
    .actions{ grid-area:actions; display:flex; align-items:center; gap:6px; justify-self:end; }
    #siteTitle{ grid-area:title; margin:0; font-size:18px; }
    .search{ grid-area:search; position:relative; justify-self:end; }

    #lang-cycle{ grid-area:lang; justify-self: end;}
    #hamburger{ grid-area:ham; justify-self: end;}
    /*.search input{ width:100%; padding:10px 12px 10px 10px; border-radius:12px; border:1px solid #2a2f34; background:#0b0c0d; color:var(--ink); }
    .search svg{ position:absolute; left:10px; top:50%; transform:translateY(-50%); } */
    /* set search width to roughly match actions width (44 + 6 + 40 = ~90) */
    .search{ width:110px; }                /* tweak as you like */
    .search input{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid #2a2f34; background:#0b0c0d; color:var(--ink); }


    /* Hide desktop controls by default on mobile */
    .controls{
      display:none;
    }

    /* make both icons tight + consistent */
    .lang-cycle{
      display:inline-flex; align-items:center; justify-content:center;
      min-width:44px; height:34px; padding:0 10px;
      border:1px solid #2a2f34; background:#0b0c0d; color:#e9edf1; border-radius:10px; cursor:pointer; font-size:13px;
    }
    
    .hamburger{
      display:inline-flex; align-items:center; justify-content:center;
      width:40px; height:34px; border:1px solid #2a2f34; background:#0b0c0d; 
      color:#e9edf1; border-radius:10px; cursor:pointer; font-size:18px; line-height:1;
    }

    /* Desktop layout */
    @media (min-width: 900px){
      /* Show 3-button language controls next to hamburger */
      .controls{ display:flex !important; gap:8px; }
      .lang-cycle{ display:none; }
      .actions{ gap:10px; }
      #hamburger{ display: none !important; }
      #catDrawer{ display: none !important; } /* prevent empty overlay on desktop */
    }

    /* Grouped category section in ALL view */
.cat-section { margin: 8px 0 18px; }
/*.cat-title {
  margin: 12px 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: #e9edf1;
  opacity: 0.9;
}*/

.cat-title {
  margin: 16px 0 8px;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  border-bottom: 2px solid var(--accent, #ffb703);
  padding-bottom: 4px;
}


/* Tiles grid: 2 cols on mobile, 3 on desktop */
.grid-tiles {
  display: grid;
  gap: 12px;
}

@media (max-width: 900px) {
  .grid-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 901px) {
  .grid-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Thumbnail strip height stays compact on mobile */
@media (max-width: 700px){
  .imgwrap { aspect-ratio: auto; height: 140px; }
  .imgwrap img { object-fit: cover; width: 100%; height: 100%; }
}

/* Ensure .imgwrap is click- and keyboard-activatable */
.imgwrap {
  display: block;
  border: none;
  background: #0b0c0d;
  cursor: pointer;
  width: 100%;
  padding: 0;
  aspect-ratio: 5 / 3;
}
.imgwrap:focus { outline: 2px solid var(--ring, #2d6cdf); outline-offset: 2px; }
.imgwrap img { width: 100%; height: 100%; object-fit: cover; }

/* Base styles for description + toggle */
.desc {
  font-size: 13px;
  color: #d6dde6;
}
.desc .more-toggle {
  display: none;           /* shown only when overflow on mobile */
  margin-left: 6px;
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
}

:root { --desc-clamp-lines: 1; }

/* Mobile-only: clamp to 1 line when collapsed */
@media (max-width: 900px) {
  .desc[data-collapsed="true"] .desc-text {
    /* Fallback for very old browsers (single-line) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Multi-line clamp (modern) */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;

    /* Standard property (lint appeasement / future-ready) */
    line-clamp: 1;
  }

  /* When expanded, remove clamping */
  .desc[data-collapsed="false"] .desc-text {
    white-space: normal;
    display: block;
    overflow: visible;
    text-overflow: clip;
  }
}

/* Header layout */
.header-grid { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:10px 16px; }
.head-actions { display:flex; gap:10px; align-items:center; justify-self:end; }
#langSelect { border:1px solid #2a2f34; background:#0b0c0d; color:#e9edf1; padding:8px 12px; border-radius:10px; }
.hamburger { border:1px solid #2a2f34; background:#0b0c0d; color:#e9edf1; padding:8px 12px; border-radius:10px; cursor:pointer; }

/* Drawer nav & submenu */
.drawer{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;z-index:60}
.drawer.open{display:block}
.drawer-panel{position:absolute;right:0;top:0;height:100%;width:min(85vw,360px);background:#0b0c0d;border-left:1px solid #23272b;display:flex;flex-direction:column;gap:12px;padding:20px}
.nav-vert{display:flex;flex-direction:column;gap:8px}
.nav-vert a, .nav-parent, .subitem{padding:10px 12px;border-radius:10px;border:1px solid #1f252a;color:#d8e0ea;background:#111315;text-align:left}
.nav-group{display:flex;flex-direction:column;gap:6px}
.nav-parent{display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.nav-parent[aria-expanded="true"] .chev { transform:rotate(90deg); }
.submenu{display:flex;flex-direction:column;gap:6px;padding-left:6px}
.submenu[hidden]{display:none}

/* Menu page search (under header) */
.menu-search { padding: 0 16px 8px; }
.menu-search .search input{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid #2a2f34; background:#0b0c0d; color:#e9edf1 }

/* Always show hamburger */
.hamburger {
  display: inline-flex;          /* ensure visible on all breakpoints */
  align-items: center;
  justify-content: center;
}

/* If you still have an old rule like:
@media (min-width: 900px){ #hamburger{ display:none } }
this will override it: */
@media (min-width:0){
  #hamburger { display: inline-flex !important; }
}

/* ===== Header 2×2 layout ===== */
.header-2x2 {
  display: grid;
  grid-template-columns: 1fr auto; /* left column grows; right column hugs content */
  gap: 14px 16px;
  align-items: center;
  padding: 10px 16px;
}

.h-left{
  display:flex;
  flex-direction:column;     /* stack: logo (top), name (bottom) */
  align-items:flex-start;    /* left align both elements */
  gap:6px;
  min-width:0;
}

.h-left .logo{
  display:block;
  width:48px; height:48px;        /* a bit larger; adjust if you like */
  border-radius:8px;
  background-position:left center;
  background-repeat:no-repeat;
  background-size:contain;        /* fits your actual logo without cropping */
  /* background-image is set via JS so paths work on both pages */
}

.h-left #siteTitle {
  margin: 0;
  font-size: 18px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.h-right {
  display: grid;
  grid-template-rows: auto auto; /* top: lang+ham, bottom: search */
  row-gap: 8px;
  justify-items: end; /* align right side to the right edge */
}

.h-right-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lang-label {
  color: #e9edf1;
  font-size: 0.85rem;
}

#langSelect {
  border: 1px solid #2a2f34;
  background: #0b0c0d;
  color: #e9edf1;
  padding: 8px 12px;
  border-radius: 10px;
}

.hamburger {
  display: inline-flex !important; /* always visible (desktop + mobile) */
  align-items: center;
  justify-content: center;
  border: 1px solid #2a2f34;
  background: #0b0c0d;
  color: #e9edf1;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
}

.h-right-bottom .search input {
  width: 100%;
  max-width: min(520px, 75vw);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #2a2f34;
  background: #0b0c0d;
  color: #e9edf1;
}

/* Mobile adjustments */
@media (max-width: 900px) {
  .h-right-bottom .search input {
    max-width: min(260px, 70vw);
  }
}

/* ===== HERO ===== */
.hero {
  position: relative;
  isolation: isolate;
  /* height scales by viewport; tweak to taste */
  min-height: clamp(380px, 60vh, 680px);
  display: grid;
  align-items: stretch;
  overflow: hidden;
  border-bottom: 1px solid #24282c;
}

.hero-media,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* left-to-right vignette so copy is readable on top of image */
  background: linear-gradient(90deg, rgba(10,12,14,.75) 0%, rgba(10,12,14,.45) 45%, rgba(10,12,14,.15) 70%, rgba(10,12,14,0) 100%);
  z-index: 1;
}

/* Copy container */
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  height: 100%;
  padding-top: 24px;
  padding-bottom: 24px;
}

/* Text block */
.hero-copy {
  max-width: 680px;
}

.hero-title {
  margin: 0 0 8px;
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.1;
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
}

.hero-sub {
  margin: 0 0 16px;
  color: #d0d9e5;
  font-size: clamp(14px, 2.2vw, 18px);
}

/* CTAs */
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #2a2f34;
}

.cta.primary {
  background: var(--brand);
  color: #08100a;
  border-color: transparent;
}

.cta.secondary {
  background: #0b0c0d;
  color: var(--ink);
}

/* Small screens: add a bit more overlay for readability */
@media (max-width: 700px) {
  .hero-overlay {
    background: linear-gradient(90deg, rgba(10,12,14,.85) 0%, rgba(10,12,14,.55) 50%, rgba(10,12,14,.2) 85%, rgba(10,12,14,0) 100%);
  }
}

.category-title {
  margin: 16px 0 8px;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  border-bottom: 2px solid var(--accent, #ffb703);
  padding-bottom: 4px;
}

.prefix {
  display: inline-block;
  font-weight: 700;
  margin-right: 6px;
  color: #cfe3ff;
  white-space: nowrap;
}

/* Collapsible category sections (ALL view) */
.cat-section { margin: 16px 0; }
.cat-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:8px 0;
  border-bottom:2px solid var(--accent, #ffb703);
}
.cat-toggle {
  appearance:none; background:none; border:0; color:#fff; cursor:pointer;
  display:flex; align-items:center; gap:8px; font:inherit; padding:0;
}
.cat-toggle .label { font-size:1.1rem; font-weight:700; }
.cat-toggle .chev { transition: transform .2s ease; display:inline-block; }
.cat-toggle[aria-expanded="false"] .chev { transform: rotate(-90deg); }

.cat-body[hidden] { display:none; }

/* --- Language selector --- */
.lang-select {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lang-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.lang-select select {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.9rem;
}

.footer-social {
  display: flex;
  justify-content: center; /* centers icons horizontally */
  align-items: center;
  gap: 16px; /* space between icons */
  margin-top: 15px;
}

.footer-social a img {
  width: 32px;
  height: 32px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.footer-social a img:hover {
  transform: scale(1.15);
  opacity: 0.8;
}