*{box-sizing:border-box}
:root{
  --paper:#f5f0e6;
  --paper-2:#faf7f0;
  --spruce:#365449;
  --ink:#1e2521;
  --muted:#7b756b;
  --gold:#b79650;
  --line:#ddd4c4;
  --white:#fffdf8;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Open Sans",Arial,sans-serif;
  overflow-x:hidden;
}

/* ============ LAYOUT ============ */
.website-menu{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:0 24px 70px;
}

/* ============ TOOLBAR: category pills + language ============ */
.menu-toolbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 0 14px;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.category-nav{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  flex:1;
  padding:2px 2px 4px;
}
.category-nav::-webkit-scrollbar{display:none}
.nav-btn{
  flex:0 0 auto;
  text-decoration:none;
  color:var(--ink);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 16px;
  font-size:13.5px;
  font-weight:600;
  white-space:nowrap;
  transition:.15s ease;
}
.nav-btn:hover,.nav-btn.active{
  background:var(--spruce);
  color:#fff;
  border-color:var(--spruce);
}
.language-switcher{
  display:flex;
  gap:4px;
  flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px;
  background:var(--paper-2);
}
.lang-btn{
  border:0;
  background:transparent;
  color:var(--muted);
  border-radius:999px;
  padding:7px 10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
}
.lang-btn.active{background:var(--spruce);color:#fff}

/* ============ SECTION HEADINGS ============ */
.menu-section{
  padding-top:32px;
  animation:menuFadeIn .18s ease;
}
@keyframes menuFadeIn{
  from{opacity:0; transform:translateY(4px)}
  to{opacity:1; transform:translateY(0)}
}
.section-heading{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin:0 0 6px;
}
.section-heading h2{
  margin:0;
  color:var(--spruce);
  font-size:24px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.01em;
}
.section-heading:after{
  content:"";
  height:1px;
  background:var(--gold);
  opacity:.45;
  flex:1;
  transform:translateY(-4px);
}

/* ============ MENU ROWS — classic printed-menu style ============ */
.items-list{
  display:flex;
  flex-direction:column;
}
.menu-row{
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.menu-row:last-child{
  border-bottom:0;
}
.menu-row-top{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px;
}
.item-name{
  margin:0;
  font-size:16px;
  line-height:1.35;
  font-weight:600;
  color:var(--ink);
  flex:0 1 auto;
  min-width:0;
}
.row-dots{
  flex:1;
  border-bottom:1px dotted var(--line);
  margin-bottom:5px;
  min-width:16px;
}
.item-price{
  flex:0 0 auto;
  margin-left:auto;
  color:var(--spruce);
  font-size:15px;
  font-weight:700;
  white-space:nowrap;
}
.item-desc{
  margin-top:5px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

.loading,.error{
  padding:80px 20px;
  text-align:center;
  color:var(--muted);
}
.error{color:#9b5b4b}

/* ============ RESPONSIVE ============ */
@media(max-width:640px){
  .website-menu{padding:0 16px 50px}
  .menu-toolbar{gap:8px}
  .language-switcher{padding:2px}
  .lang-btn{padding:6px 8px;font-size:10.5px}
  .menu-section{padding-top:34px}
  .section-heading h2{font-size:20px}
  .item-name{font-size:15px}
  .item-price{font-size:14px}
  .item-desc{font-size:12.5px}
  .nav-btn{padding:9px 14px;font-size:13px}
}
@media(max-width:380px){
  .website-menu{padding:0 12px 44px}
  .lang-btn{padding:6px 7px;font-size:10px}
  .nav-btn{padding:8px 12px;font-size:12.5px}
  .section-heading h2{font-size:18px}
}