:root{
  --cream: #F7F3EC;
  --cream-deep: #EDE5D6;
  --ink: #2A241D;
  --ink-soft: #6B6255;
  --wood: #A47551;
  --brass: #B08D57;
  --brass-soft: rgba(176,141,87,0.35);
  --line: rgba(42,36,29,0.12);
  --radius-lg: 28px;
  --ff-serif: 'Lora', serif;
  --ff-sans: 'Manrope', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--ff-sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.noise-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Header ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 10px;
  background:linear-gradient(var(--cream) 78%, transparent);
}
.brand-mark{ color:var(--ink); width:34px; }
.brand-svg{ width:34px; height:auto; display:block; }
.brand-letters{ font-family:var(--ff-serif); font-size:58px; fill:currentColor; }

.lang-switch{ display:flex; gap:4px; background:var(--cream-deep); border-radius:999px; padding:4px; }
.lang-btn{
  border:none; background:transparent; font-family:var(--ff-sans); font-weight:600; font-size:12px;
  letter-spacing:.04em; color:var(--ink-soft); padding:7px 12px; border-radius:999px; cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.lang-btn.is-active{ background:var(--ink); color:var(--cream); }

/* ---------- Search ---------- */
.search-wrap{
  position:relative; margin:6px 20px 14px; z-index:15;
}
.search-icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--ink-soft); }
.search-input{
  width:100%; font-family:var(--ff-sans); font-size:15px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:12px 16px 12px 40px; outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
.search-input:focus{ border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-soft); }

/* ---------- Views ---------- */
.view{ position:relative; min-height:60vh; }
.back-btn{
  margin:4px 20px 18px; background:none; border:none; cursor:pointer;
  font-family:var(--ff-sans); font-weight:600; font-size:13px; color:var(--ink-soft);
  display:flex; align-items:center; gap:6px;
}
.category-title{ font-family:var(--ff-serif); font-size:30px; margin:0 20px 28px; }

/* ---------- Section marker (big serif reveal between clusters) ---------- */
.section-marker{
  font-family:var(--ff-serif); font-style:italic; font-size:15px; letter-spacing:.03em;
  color:var(--ink-soft); margin:44px 20px 6px; padding-top:18px; border-top:1px solid var(--line);
}
.section-marker:first-child{ margin-top:6px; border-top:none; padding-top:0; }

/* ---------- Mosaic (organic scattered layout) ---------- */
.mosaic{
  column-count:2; column-gap:14px; padding:8px 20px 40px;
  max-width:520px; margin:0 auto;
}
.mosaic-item{
  break-inside:avoid; margin-bottom:30px; display:flex; flex-direction:column; align-items:center;
  text-align:center; background:none; border:none; cursor:pointer; width:100%;
}
.mosaic-circle{
  width:128px; height:128px; border-radius:50%; overflow:hidden; position:relative;
  background:var(--cream-deep); box-shadow:0 10px 24px rgba(42,36,29,0.10);
  will-change:transform; transition:transform .12s linear; margin:0 auto;
}
.mosaic-circle img{ width:100%; height:100%; object-fit:cover; display:block; }
.mosaic-circle.no-photo{
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(145deg, var(--cream-deep), #DCC9A8 70%, var(--wood));
}
.mosaic-circle.no-photo::after{
  content:'EL'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-serif); font-size:18px; letter-spacing:.04em; color:rgba(42,36,29,0.42);
}
.mosaic-item__name{
  font-family:var(--ff-serif); font-size:15px; line-height:1.25; color:var(--ink); margin-top:12px;
  max-width:140px;
}
.mosaic-item__price{ font-family:var(--ff-sans); font-size:12px; font-weight:600; color:var(--brass); margin-top:3px; }
.mosaic-item__count{ font-family:var(--ff-sans); font-size:11px; color:var(--ink-soft); margin-top:2px; }

/* size + stagger variety */
.mosaic-item.sz-sm .mosaic-circle{ width:96px; height:96px; }
.mosaic-item.sz-lg .mosaic-circle{ width:164px; height:164px; }
.mosaic-item:nth-child(3n+1){ margin-top:6px; }
.mosaic-item:nth-child(3n+2){ margin-top:38px; }
.mosaic-item:nth-child(3n){ margin-top:14px; }

@media (min-width:600px){
  .mosaic{ column-count:3; max-width:760px; }
}
@media (min-width:900px){
  .mosaic{ column-count:4; max-width:1040px; }
  .mosaic-circle{ width:150px; height:150px; }
  .mosaic-item.sz-sm .mosaic-circle{ width:112px; height:112px; }
  .mosaic-item.sz-lg .mosaic-circle{ width:190px; height:190px; }
}

/* ---------- Search results ---------- */
.search-results{ column-count:2; column-gap:14px; padding:6px 20px 40px; max-width:520px; margin:0 auto; }
.search-empty{ padding:60px 20px; text-align:center; color:var(--ink-soft); font-family:var(--ff-serif); font-size:16px; }
@media (min-width:600px){ .search-results{ column-count:3; max-width:760px; } }
@media (min-width:900px){ .search-results{ column-count:4; max-width:1040px; } }

/* ---------- Loading: rotating dot ring (per reference) ---------- */
.loading-state{ display:flex; flex-direction:column; align-items:center; gap:22px; padding:34vh 20px 20px; color:var(--ink-soft); font-family:var(--ff-serif); font-size:14px; }
.dot-ring{ position:relative; width:56px; height:56px; animation:ring-spin 1.6s linear infinite; }
.dot-ring span{
  position:absolute; top:50%; left:50%; width:7px; height:7px; border-radius:50%;
  border:1.4px solid var(--ink-soft); margin:-3.5px 0 0 -3.5px;
  transform-origin:3.5px 3.5px;
}
.dot-ring span:nth-child(1){ transform:rotate(0deg) translate(24px); }
.dot-ring span:nth-child(2){ transform:rotate(36deg) translate(24px); }
.dot-ring span:nth-child(3){ transform:rotate(72deg) translate(24px); }
.dot-ring span:nth-child(4){ transform:rotate(108deg) translate(24px); }
.dot-ring span:nth-child(5){ transform:rotate(144deg) translate(24px); }
.dot-ring span:nth-child(6){ transform:rotate(180deg) translate(24px); background:var(--ink); border-color:var(--ink); width:9px; height:9px; margin:-4.5px 0 0 -4.5px; transform-origin:4.5px 4.5px; }
.dot-ring span:nth-child(7){ transform:rotate(216deg) translate(24px); }
.dot-ring span:nth-child(8){ transform:rotate(252deg) translate(24px); }
.dot-ring span:nth-child(9){ transform:rotate(288deg) translate(24px); }
.dot-ring span:nth-child(10){ transform:rotate(324deg) translate(24px); }
@keyframes ring-spin{ to{ transform:rotate(360deg); } }

/* ---------- Modal ---------- */
.dish-modal{ position:fixed; inset:0; z-index:100; visibility:hidden; }
.dish-modal.is-open{ visibility:visible; }
.dish-modal__backdrop{
  position:absolute; inset:0; background:rgba(20,17,13,0.42); opacity:0; transition:opacity .3s ease;
}
.dish-modal.is-open .dish-modal__backdrop{ opacity:1; }
.dish-modal__sheet{
  position:absolute; left:0; right:0; bottom:0; max-height:92vh; overflow-y:auto;
  background:var(--cream); border-radius:26px 26px 0 0;
  transform:translateY(100%); transition:transform .38s cubic-bezier(.22,.68,.35,1);
  box-shadow:0 -20px 60px rgba(0,0,0,0.25);
}
.dish-modal.is-open .dish-modal__sheet{ transform:translateY(0); }
.dish-modal__close{
  position:absolute; top:16px; right:16px; z-index:5; width:36px; height:36px; border-radius:50%;
  border:none; background:rgba(255,255,255,0.85); backdrop-filter:blur(4px); font-size:16px; cursor:pointer; color:var(--ink);
}
.dish-modal__photo{
  height:44vh; min-height:260px; background:var(--cream-deep) center/cover no-repeat; position:relative;
  border-radius:26px 26px 0 0; display:flex; flex-direction:column; justify-content:flex-end; padding:24px;
}
.dish-modal__photo.no-photo{
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.5), transparent 55%),
    linear-gradient(155deg, var(--cream-deep), #DCC9A8 65%, var(--wood));
}
.dish-modal__photo-scrim{
  position:absolute; inset:0; border-radius:26px 26px 0 0;
  background:linear-gradient(to top, rgba(20,16,10,0.62) 0%, rgba(20,16,10,0.12) 42%, transparent 68%);
}
.dish-modal__eyebrow{
  position:relative; z-index:1; font-family:var(--ff-sans); font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,0.82); margin:0 0 6px;
}
.dish-modal__name{
  position:relative; z-index:1; font-family:var(--ff-serif); font-size:30px; line-height:1.12;
  color:#fff; margin:0;
}
.dish-modal__body{ padding:28px 24px 44px; }
.dish-modal__section-label{
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); margin:0 0 10px;
}
.dish-modal__section-label--details{ margin-top:26px; padding-top:18px; border-top:1px solid var(--line); }
.dish-modal__desc{ font-size:15px; line-height:1.6; color:var(--ink-soft); margin:0 0 4px; font-family:var(--ff-serif); }
.dish-modal__meta{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:20px; }
.dish-modal__meta span{ font-size:13px; color:var(--ink-soft); }
.dish-modal__meta b{ color:var(--ink); font-weight:700; }
.dish-modal__prices{ display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line); padding-top:18px; }
.price-row{ display:flex; justify-content:space-between; align-items:center; font-family:var(--ff-sans); }
.price-row .label{ font-size:14px; color:var(--ink-soft); }
.price-row .value{ font-family:var(--ff-serif); font-size:20px; font-weight:600; color:var(--ink); }

/* ---------- Footer ---------- */
.menu-footer{ text-align:center; padding:30px 20px 60px; color:var(--ink-soft); font-size:12px; letter-spacing:.04em; }

/* ---------- Desktop ---------- */
@media (min-width:860px){
  .topbar{ padding:24px 48px 12px; }
  .search-wrap{ margin:6px auto 18px; max-width:420px; }
  .section-tabs{ padding:2px 48px 22px; justify-content:center; }
  .category-heading{ margin:34px 48px 16px; }
  .category-nav{ padding:4px 48px 26px; }
  .carousel{ padding:34px 48px 24px; }
  .carousel::before, .carousel::after{ flex:0 0 2vw; }
  .dish-card:hover{ transform:scale(1.06); }
  .dish-modal__sheet{
    left:50%; right:auto; bottom:auto; top:50%; width:min(560px,90vw); max-height:86vh;
    transform:translate(-50%,-50%) scale(0.94); border-radius:26px; opacity:0;
    transition:transform .32s ease, opacity .32s ease;
  }
  .dish-modal.is-open .dish-modal__sheet{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  .dish-modal__photo{ border-radius:26px 26px 0 0; }
  .search-results{ padding:6px 48px 50px; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
}