/* Public menu: dark, warm, quiet. The food photography is the star. */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }

body.menu {
  margin: 0;
  background: var(--forno);
  color: var(--farina);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body.menu.is-locked { overflow: hidden; }

a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--oliva); outline-offset: 3px; border-radius: 6px; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--farina);
  cursor: pointer;
}
.icon-btn:hover { background: var(--forno-2); }

/* ------------------------------------------------------------------ */
/* Top bar: logo and language switch                                   */
/* ------------------------------------------------------------------ */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-3) var(--s-4);
  padding-top: max(var(--s-3), env(safe-area-inset-top));
  position: relative;
  z-index: 2;
}
.topbar__logo { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; }

.langs {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: auto;
  padding: 3px 3px 3px var(--s-3);
  border-radius: 999px;
  background: rgb(42 36 32 / .8);
  backdrop-filter: blur(6px);
}
[dir="rtl"] .langs { padding: 3px var(--s-3) 3px 3px; }
.langs__icon { color: var(--oliva); width: 1.1rem; height: 1.1rem; margin-inline-end: var(--s-1); }
.langs a {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 32px;
  padding: 0 var(--s-2);
  border-radius: 999px;
  font-family: var(--font-latin-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--cenere);
}
.langs a.is-active { background: var(--farina); color: var(--forno); }

/* ------------------------------------------------------------------ */
/* Hero: the one bold moment                                           */
/* ------------------------------------------------------------------ */

.hero {
  position: relative;
  margin-top: -68px;            /* run under the top bar */
  padding: calc(68px + var(--s-6)) var(--s-4) var(--s-6);
  text-align: center;
  overflow: hidden;
}
.hero--cover { padding-top: calc(68px + var(--s-8)); padding-bottom: var(--s-7); }
.hero__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}
.hero__inner { position: relative; max-width: 720px; margin: 0 auto; }

.hero__name {
  margin: 0;
  font-family: var(--font-latin-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.4375rem, 12vw, 3.0625rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--farina);
  text-wrap: balance;
  animation: rise 1.1s var(--ease) both;
}

.hairline {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: min(220px, 60%);
  margin: var(--s-4) auto 0;
  color: var(--oliva);
}
.hairline::before, .hairline::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--oliva);
  transform-origin: center;
  animation: draw 1.1s .35s var(--ease) both;
}
.hairline .icon { width: 1rem; height: 1rem; animation: fade .8s .6s ease both; }

.hero__tagline {
  margin: var(--s-4) auto 0;
  max-width: 34ch;
  color: color-mix(in srgb, var(--farina) 75%, transparent);
  font-size: var(--step-0);
  animation: fade .8s .7s ease both;
}
[dir="ltr"] .hero__tagline { font-family: var(--font-latin-display); font-style: italic; font-size: var(--step-1); }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes fade { from { opacity: 0; } }

/* ------------------------------------------------------------------ */
/* Sticky section tabs + search                                        */
/* ------------------------------------------------------------------ */

.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-2) var(--s-2) var(--s-2) 0;
  background: rgb(31 26 23 / .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-block-end: 1px solid rgb(168 155 108 / .18);
}
[dir="rtl"] .bar { padding: var(--s-2) 0 var(--s-2) var(--s-2); }
@media (min-width: 721px) { .bar { border-radius: 0 0 var(--radius) var(--radius); } }

.tabs {
  display: flex;
  gap: var(--s-1);
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  padding-inline: var(--s-3);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 24px), transparent);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  padding: var(--s-2) var(--s-3);
  border-radius: 999px;
  color: var(--cenere);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: color .2s, background .2s;
}
.tabs__tab .icon { width: 1.1rem; height: 1.1rem; color: var(--oliva); transition: color .2s; }
.tabs__tab.is-active { color: var(--farina); background: var(--forno-2); }
.tabs__tab.is-active .icon { color: var(--pomodoro); }

.bar__search { color: var(--oliva); }

.search {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--forno);
}
.search__field { position: relative; flex: 1; }
.search__field .icon {
  position: absolute;
  inset-inline-start: var(--s-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--oliva);
  pointer-events: none;
}
.search input {
  width: 100%;
  height: 44px;
  padding: 0 var(--s-3);
  padding-inline-start: 2.6rem;
  border: 1px solid var(--forno-3);
  border-radius: 999px;
  background: var(--forno-2);
  color: var(--farina);
  font: inherit;
  font-size: 16px; /* prevents iOS zoom */
}
.search input::placeholder { color: var(--cenere); }
.search input:focus { outline: none; border-color: var(--oliva); }
.search input::-webkit-search-cancel-button { display: none; }

/* ------------------------------------------------------------------ */
/* Content                                                             */
/* ------------------------------------------------------------------ */

.content { max-width: 720px; margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-7); }

.menu-empty, .no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-7) var(--s-4);
  text-align: center;
  color: var(--cenere);
}
.menu-empty .icon { width: 2rem; height: 2rem; color: var(--oliva); }

/* Placeholder for missing or broken photos */
.ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--forno-2);
  color: var(--oliva);
}
.ph .icon { width: 36%; height: 36%; max-width: 3rem; max-height: 3rem; stroke-width: 1.5; opacity: .8; }

/* Chef's picks carousel */
.picks { margin: 0 calc(-1 * var(--s-4)) var(--s-6); }
.picks__title,
.section__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
}
.picks__title { padding-inline: var(--s-4); font-size: var(--step-2); }
.picks__title .icon { color: var(--oliva); width: 1.25rem; height: 1.25rem; }
[dir="ltr"] .picks__title, [dir="ltr"] .section__title { font-style: italic; }

.picks__track {
  display: flex;
  gap: var(--s-3);
  margin: 0;
  padding: 0 var(--s-4) var(--s-2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--s-4);
  scrollbar-width: none;
}
.picks__track::-webkit-scrollbar { display: none; }
.picks__track li { flex: none; width: min(68vw, 240px); scroll-snap-align: start; }

.pick {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: start;
  cursor: pointer;
}
.pick__media {
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--s-2);
  overflow: hidden;
  background: var(--forno-2);
}
.pick__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.pick:hover .pick__media img { transform: scale(1.03); }
.pick__name { font-weight: 600; line-height: 1.3; }
.pick.is-soldout .pick__media, .pick.is-soldout .pick__name, .pick.is-soldout .pick__price { opacity: .45; }

/* Sections */
.section { margin-block-end: var(--s-7); scroll-margin-top: 72px; }
.section__banner {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  margin-block-end: var(--s-4);
  background: var(--forno-2);
}
.section__title { font-size: var(--step-3); }
.section__title::after {
  content: "";
  flex: 1;
  height: 1px;
  margin-inline-start: var(--s-3);
  background: linear-gradient(to right, rgb(168 155 108 / .5), transparent);
}
[dir="rtl"] .section__title::after { background: linear-gradient(to left, rgb(168 155 108 / .5), transparent); }
[dir="rtl"] .section__title, [dir="rtl"] .picks__title { font-size: var(--step-2); }

.items { list-style: none; margin: 0; padding: 0; }
.items > li + li { border-block-start: 1px solid rgb(168 155 108 / .12); }

.item {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  width: 100%;
  padding: var(--s-4) 0;
  border: 0;
  background: none;
  text-align: start;
  cursor: pointer;
}
.item__media {
  display: block;
  width: 112px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--forno-2);
}
.item__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 2px; }
.item__name { font-size: var(--step-0); font-weight: 600; line-height: 1.35; }
.item__desc {
  color: var(--cenere);
  font-size: var(--step--1);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-1);
}
.item.is-soldout .item__media,
.item.is-soldout .item__name,
.item.is-soldout .item__desc,
.item.is-soldout .item__meta { opacity: .45; }

@media (min-width: 560px) {
  .item { grid-template-columns: 144px minmax(0, 1fr); }
  .item__media { width: 144px; }
}

.price, .size__price, .sheet__price, .sheet__sizes bdi {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.price { color: var(--pomodoro); font-weight: 700; }

.sizes {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--s-1);
  font-size: var(--step--1);
}
.size { white-space: nowrap; }
.size__label { color: var(--cenere); }
.size__price { color: var(--pomodoro); font-weight: 700; }
.sizes__dot { color: var(--forno-3); }
.sizes__cur { color: var(--pomodoro); font-weight: 600; }

.tags { display: inline-flex; gap: var(--s-2); }
.tag { display: inline-flex; color: var(--oliva); }
.tag .icon { width: 1rem; height: 1rem; }
.tag--veg { color: #7FA067; }  /* basil, lifted for contrast on dark */

.soldout-label {
  display: inline-flex;
  align-self: flex-start;
  margin: var(--s-1) 0 0;
  padding: 1px var(--s-2);
  border: 1px solid rgb(200 50 30 / .5);
  border-radius: 999px;
  color: #E9806E;
  font-size: var(--step--1);
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

.footer {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-4) calc(var(--s-7) + env(safe-area-inset-bottom));
  border-block-start: 1px solid rgb(168 155 108 / .18);
  text-align: center;
  color: var(--cenere);
  font-size: var(--step--1);
}
.footer__name {
  margin: 0 0 var(--s-4);
  font-family: var(--font-latin-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--step-2);
  color: var(--farina);
}
.footer__list { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: var(--s-2); justify-items: center; }
.footer__list li { display: inline-flex; align-items: center; gap: var(--s-2); }
.footer__list .icon { color: var(--oliva); width: 1rem; height: 1rem; }
.footer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.footer__phone { margin: var(--s-4) 0 0; font-variant-numeric: tabular-nums; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--forno-3);
  border-radius: 999px;
  color: var(--farina);
  text-decoration: none;
  font-weight: 500;
  transition: border-color .2s, background .2s;
}
.pill .icon { color: var(--oliva); width: 1.1rem; height: 1.1rem; }
.pill:hover { border-color: var(--oliva); background: var(--forno-2); }

/* ------------------------------------------------------------------ */
/* Item detail bottom sheet                                            */
/* ------------------------------------------------------------------ */

.sheet { position: fixed; inset: 0; z-index: 50; }
.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(15 12 10 / .65);
  animation: fade .25s ease both;
}
.sheet__panel {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  max-width: 640px;
  max-height: 92vh;
  max-height: 92dvh;
  margin: 0 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--forno-2);
  box-shadow: 0 -20px 60px rgb(0 0 0 / .4);
  animation: sheet-up .35s var(--ease) both;
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet__panel:focus { outline: none; }
.sheet.is-closing .sheet__panel { transform: translateY(100%); transition: transform .25s ease-in; }
.sheet.is-closing .sheet__backdrop { opacity: 0; transition: opacity .25s; }
@keyframes sheet-up { from { transform: translateY(100%); } }

.sheet__grip {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 2;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 4px;
  background: rgb(246 239 228 / .55);
}
.sheet__close {
  position: absolute;
  top: var(--s-3);
  inset-inline-end: var(--s-3);
  z-index: 2;
  background: rgb(31 26 23 / .7);
  backdrop-filter: blur(6px);
}
.sheet__close:hover { background: var(--forno); }

.sheet__media { aspect-ratio: 4 / 3; background: var(--forno-3); }
.sheet__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sheet__media.is-empty { aspect-ratio: auto; height: 64px; background: none; }

.sheet__body { padding: var(--s-5) var(--s-5) var(--s-6); }
.sheet__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1.15;
}
[dir="ltr"] .sheet__name { font-style: italic; }
[dir="rtl"] .sheet__name { font-size: var(--step-2); }
.sheet__desc { margin: var(--s-3) 0 0; color: color-mix(in srgb, var(--farina) 78%, transparent); }
.sheet__desc:empty { display: none; }
.sheet__price { margin: var(--s-4) 0 0; color: var(--pomodoro); font-size: var(--step-1); font-weight: 700; }
.sheet__price:empty { display: none; }
.sheet__sub { margin: var(--s-5) 0 var(--s-2); font-size: var(--step--1); font-weight: 600; color: var(--cenere); }
.sheet__sizes { list-style: none; margin: 0; padding: 0; }
.sheet__sizes li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-block-end: 1px solid rgb(168 155 108 / .15);
}
.sheet__sizes bdi { color: var(--pomodoro); font-weight: 700; }
.sheet__tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0 0; padding: 0; }
.sheet__tags:empty { display: none; }
.sheet__tags li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--forno-3);
  border-radius: 999px;
  font-size: var(--step--1);
}
.sheet__tags .icon { color: var(--oliva); width: 1rem; height: 1rem; }
.sheet__tags .is-veg .icon { color: #7FA067; }

/* ------------------------------------------------------------------ */
/* Section panel (one section at a time)                               */
/* ------------------------------------------------------------------ */

.panel { min-height: 50vh; transition: opacity .2s ease; }
.panel.is-loading { opacity: .4; pointer-events: none; }
.panel > .section:last-child { margin-block-end: 0; }
.no-results .icon { width: 2rem; height: 2rem; color: var(--oliva); }