/* =========================
   MENU PAGE — HERO TRIPTYCH
   ========================= */
.menu-hero{
  background:
    radial-gradient(900px 380px at 80% 0%, rgba(255,184,77,.08), transparent 65%),
    radial-gradient(700px 320px at 15% 100%, rgba(207,103,70,.10), transparent 70%);
}
.menu-hero__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 5vw, 36px);
  align-items: center;
}
.menu-hero__title{
  font-family: "Playfair Display", serif;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  margin: 0 0 10px;
}
.menu-hero__lead{ margin: 0 0 8px; color: #efece6; }

.menu-chips{
  display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none;
}
.menu-chip{
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255,184,77,.12);
  border: 1px solid rgba(255,184,77,.25);
  font-size: .85rem; color: #f5f2ec;
  transition: transform .15s ease;
}
.menu-chip:hover{ transform: translateY(-2px); }

.menu-hero__triptych{
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
}
.hero-card{
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl);
  padding: 10px;
  box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.hero-card--raised{ transform: translateY(-6px); }
.hero-card:hover{ transform: translateY(-3px); border-color: rgba(255,184,77,.35); }
.hero-card img{
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: calc(var(--radius-2xl) - 8px);
  border: 1px solid rgba(255,255,255,.06);
}
.hero-card figcaption{
  margin-top: 8px; color: var(--clr-muted); font-size: .92rem;
}

@media (max-width: 980px){
  .menu-hero__grid{ grid-template-columns: 1fr; }
  .menu-hero__triptych{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .menu-hero__triptych{ grid-template-columns: 1fr; }
}

/* =========================
   SECTION 2 — STARTERS (ZIGZAG)
   ========================= */
.starters__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 5vw, 36px);
}
.section-title{
  font-family: "Playfair Display", serif;
  font-size: clamp(1.35rem, 1rem + 1.1vw, 1.9rem);
  margin: 0 0 6px;
}
.section-intro{ color: #efece6; margin: 0 0 8px; }

.menu-list{ list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.menu-item{
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-xl);
  padding: 10px 12px;
  box-shadow: var(--shadow-soft);
}
.menu-item__name{ font-weight: 700; }
.menu-item__price{ white-space: nowrap; }
.menu-item__line{
  display: inline-block; width: 100%; border-bottom: 1px dotted rgba(255,255,255,.18);
  transform: translateY(-3px);
}
.menu-item__desc{ margin: 6px 0 0; color: var(--clr-muted); font-size: .95rem; }

/* Зигзаг: чередуем выравнивание */
.menu-list--zigzag .menu-item:nth-child(odd){ transform: translateX(-2px); }
.menu-list--zigzag .menu-item:nth-child(even){ transform: translateX(2px); }

.starters__media{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.menu-photo{
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl);
  padding: 10px; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.menu-photo:hover{ transform: translateY(-3px); border-color: rgba(255,184,77,.35); }
.menu-photo img{
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: calc(var(--radius-2xl) - 8px); border: 1px solid rgba(255,255,255,.06);
}
.menu-photo figcaption{ margin-top: 8px; color: var(--clr-muted); font-size: .92rem; }

@media (max-width: 980px){
  .starters__grid{ grid-template-columns: 1fr; }
  .starters__media{ grid-template-columns: 1fr; }
}

/* =========================
   SECTION 3 — MAINS GRID
   ========================= */
.mains__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 5vw, 36px);
}
.badges{ display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; }
.badge{
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255,184,77,.12); border: 1px solid rgba(255,184,77,.25);
  font-size: .85rem; color: #f5f2ec;
}

.mains__media{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 980px){
  .mains__grid{ grid-template-columns: 1fr; }
  .mains__media{ grid-template-columns: 1fr; }
}
/* =========================
   SECTION 4 — SOUPS LADDER
   ========================= */
.soups__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 5vw, 36px);
}
.ladder{
  counter-reset: step; margin: 10px 0 0; padding: 0; list-style: none;
  display: grid; gap: 8px;
}
.ladder__step{
  position: relative;
  background: #1a1a1a; border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-xl); padding: 10px 12px 10px 44px;
  box-shadow: var(--shadow-soft);
}
.ladder__step::before{
  counter-increment: step; content: counter(step);
  position: absolute; left: 10px; top: 10px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--clr-accent), var(--clr-accent-2));
  color: #111; font-weight: 700; font-size: .9rem;
  box-shadow: 0 0 0 3px rgba(255,184,77,.18);
}
.ladder__title{ margin: 0; font-weight: 700; }
.ladder__desc{ margin: 4px 0 0; color: var(--clr-muted); }

.soups__media{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 980px){
  .soups__grid{ grid-template-columns: 1fr; }
  .soups__media{ grid-template-columns: 1fr; }
}

/* =========================
   SECTION 5 — DESSERTS BELT
   ========================= */
.desserts-belt{
  background:
    radial-gradient(700px 300px at 15% 100%, rgba(255,184,77,.08), transparent 65%);
}
.belt{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 320px);
  gap: 12px;
  overflow-x: auto;
  padding: 12px clamp(12px, 4vw, 24px) 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.belt:active{ cursor: grabbing; }
.belt::-webkit-scrollbar{ height: 8px; }
.belt::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; }

.belt__card{
  scroll-snap-align: start;
  background: #1a1a1a; border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl); padding: 10px; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.belt__card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,184,77,.35);
  box-shadow: 0 16px 28px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.18);
}
.belt__card img{
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: calc(var(--radius-2xl) - 8px); border: 1px solid rgba(255,255,255,.06);
}
.belt__card figcaption{ margin-top: 8px; color: var(--clr-muted); font-size: .92rem; }

/* =========================
   SECTION 6 — BAR MIXES
   ========================= */
.bar-mixes__grid{
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 5vw, 36px);
}
.bar-mixes__media{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.flavor-rings{ display: flex; gap: 8px; margin: 8px 0 10px; }
.ring{
  padding: 6px 10px; border-radius: 999px; font-size: .85rem;
  background: rgba(255,184,77,.12); border: 1px solid rgba(255,184,77,.25);
  color: #f5f2ec;
}
.ring--bitter{ background: rgba(207,103,70,.16); border-color: rgba(207,103,70,.35); }
.ring--fresh{ background: rgba(255,184,77,.18); }
.ring--sweet{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }

@media (max-width: 980px){
  .bar-mixes__grid{ grid-template-columns: 1fr; }
  .bar-mixes__media{ grid-template-columns: 1fr; }
}
/* =========================
   SECTION 7 — PANASIA NOTES
   ========================= */
.panasia__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 5vw, 36px);
}
.menu-list--tight{ gap: 6px; }
.panasia__collage{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  align-content: start;
}
.tile{
  background: #1a1a1a; border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl); padding: 10px; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.tile:hover{ transform: translateY(-3px); border-color: rgba(255,184,77,.35); }
.tile img{
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: calc(var(--radius-2xl) - 8px); border: 1px solid rgba(255,255,255,.06);
}
.tile figcaption{ margin-top: 8px; color: var(--clr-muted); font-size: .92rem; }
/* диагональный ритм */
.tile--a{ transform: translateY(-6px); }
.tile--b{ transform: translateY(0); }
.tile--c{ grid-column: 1 / -1; }
@media (max-width: 980px){
  .panasia__grid{ grid-template-columns: 1fr; }
  .panasia__collage{ grid-template-columns: 1fr; }
  .tile--a{ transform: none; }
}

/* =========================
   SECTION 8 — STEAMED FISH + PROCESS
   ========================= */
.steamed__grid{
  display: grid; grid-template-columns: .95fr 1.05fr;
  gap: clamp(18px, 5vw, 36px);
}
.steamed__media{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.process{
  margin: 8px 0 10px; padding: 0; list-style: none;
  display: grid; gap: 6px;
}
.process__step{
  position: relative;
  background: #1a1a1a; border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-xl); padding: 10px 12px;
  box-shadow: var(--shadow-soft);
}
@media (max-width: 980px){
  .steamed__grid{ grid-template-columns: 1fr; }
  .steamed__media{ grid-template-columns: 1fr; }
}

/* =========================
   SECTION 9 — ZERO-ALC INFUSIONS (TOGGLE)
   ========================= */
.infusions__wrap{ display: grid; gap: 12px; }
.infusions__head{ display: grid; gap: 10px; }
.infusions-toggle{
  justify-self: start;
  position: relative; width: 180px; height: 36px;
  border-radius: 999px; background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.10); cursor: pointer;
  display: inline-flex; align-items: center; padding: 0 10px 0 8px;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.infusions-toggle:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.infusions-toggle__dot{
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--clr-accent); transition: transform .25s ease;
}
.infusions-toggle__label{ margin-left: 8px; font-size: .9rem; color: var(--clr-muted); }

.infusions__grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.inf-card{
  background: #1a1a1a; border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl); padding: 10px; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.inf-card:hover{ transform: translateY(-3px); border-color: rgba(255,184,77,.35); }
.inf-card img{
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: calc(var(--radius-2xl) - 8px); border: 1px solid rgba(255,255,255,.06);
}
.inf-card figcaption{ margin-top: 8px; color: var(--clr-muted); font-size: .92rem; }

.infusions__list .menu-item{ padding: 10px 12px; }

.zero-alc-infusions.is-alt .infusions-toggle__dot{ transform: translateX(132px); }
.zero-alc-infusions.is-alt .infusions-toggle__label{ color: #e8e5df; }
/* можно добавить визуальные отличия по желанию, пока ограничимся тумблером */

@media (max-width: 980px){
  .infusions__grid{ grid-template-columns: 1fr; }
}
/* =========================
   SECTION 10 — PASTA WAVE
   ========================= */
.pasta__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 5vw, 36px);
}
.wave{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: end;
  position: relative;
}
.wave::before{
  content:""; position:absolute; left:0; right:0; bottom: -6px; height: 2px;
  background: linear-gradient(90deg, rgba(255,184,77,.35), rgba(207,103,70,.25));
  border-radius: 2px;
}
.wave__card{
  background:#1a1a1a; border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl); padding:10px; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.wave__card--up{ transform: translateY(-8px); }
.wave__card:hover{ transform: translateY(-3px); border-color: rgba(255,184,77,.35); }
.wave__card img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius: calc(var(--radius-2xl) - 8px); border:1px solid rgba(255,255,255,.06);
}
.wave__card figcaption{ margin-top:8px; color:var(--clr-muted); font-size:.92rem; }
@media (max-width: 980px){
  .pasta__grid{ grid-template-columns: 1fr; }
  .wave{ grid-template-columns: 1fr; }
  .wave__card--up{ transform: none; }
}

/* =========================
   SECTION 11 — SIDES GRID
   ========================= */
.sides__grid{
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 5vw, 36px);
}
.sides__media{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 980px){
  .sides__grid{ grid-template-columns: 1fr; }
  .sides__media{ grid-template-columns: 1fr; }
}

/* =========================
   SECTION 12 — COFFEE & DIGESTIFS
   ========================= */
.coffee__grid{
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 5vw, 36px);
}
.coffee-note{
  margin: 10px 0 0;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl); padding: 10px 12px;
}
.coffee-note > summary{
  cursor: pointer; font-weight: 700;
  list-style: none; /* убираем маркер Chrome/Firefox */
}
.coffee-note > summary::-webkit-details-marker{ display: none; }
.coffee-note[open]{ border-color: rgba(255,184,77,.35); }

.coffee__media{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 980px){
  .coffee__grid{ grid-template-columns: 1fr; }
  .coffee__media{ grid-template-columns: 1fr; }
}
/* =========================
   SECTION 13 — BREAD & BUTTER
   ========================= */
.bb__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 5vw, 36px);
}
.bb__media{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.bb-card{
  background:#1a1a1a; border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl); padding:10px; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.bb-card:hover{ transform: translateY(-3px); border-color: rgba(255,184,77,.35); }
.bb-card img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius: calc(var(--radius-2xl) - 8px); border:1px solid rgba(255,255,255,.06);
}
.bb-card figcaption{ margin-top:8px; color:var(--clr-muted); font-size:.92rem; }
.bb-list{ margin:8px 0 0; padding-left:18px; }
.bb-list li + li{ margin-top:4px; }
@media (max-width: 980px){
  .bb__grid{ grid-template-columns: 1fr; }
  .bb__media{ grid-template-columns: 1fr; }
}

/* =========================
   SECTION 14 — SPECIAL DIETS
   ========================= */
.sd__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 5vw, 36px);
}
.sd__media{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.sd-card{
  background:#1a1a1a; border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl); padding:10px; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.sd-card:hover{ transform: translateY(-3px); border-color: rgba(255,184,77,.35); }
.sd-card img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius: calc(var(--radius-2xl) - 8px); border:1px solid rgba(255,255,255,.06);
}
.sd-card figcaption{ margin-top:8px; color:var(--clr-muted); font-size:.92rem; }
@media (max-width: 980px){
  .sd__grid{ grid-template-columns: 1fr; }
  .sd__media{ grid-template-columns: 1fr; }
}

/* =========================
   SECTION 15 — SHARING SET
   ========================= */
.set__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 5vw, 36px);
}
.set__media{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.set-card{
  background:#1a1a1a; border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl); padding:10px; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.set-card:hover{ transform: translateY(-3px); border-color: rgba(255,184,77,.35); }
.set-card img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius: calc(var(--radius-2xl) - 8px); border:1px solid rgba(255,255,255,.06);
}
.set-card figcaption{ margin-top:8px; color:var(--clr-muted); font-size:.92rem; }
.set-price{ margin:8px 0 0; }

@media (max-width: 980px){
  .set__grid{ grid-template-columns: 1fr; }
  .set__media{ grid-template-columns: 1fr; }
}

/* =========================
   SECTION 16 — ALLERGENS FAQ
   ========================= */
.faq__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 5vw, 36px);
}
.faq-item{
  margin: 8px 0 0;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  padding: 10px 12px;
}
.faq-item > summary{
  cursor: pointer; font-weight: 700; list-style: none;
}
.faq-item > summary::-webkit-details-marker{ display: none; }
.faq-item[open]{ border-color: rgba(255,184,77,.35); }

.faq__media{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.faq-card{
  background:#1a1a1a; border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl); padding:10px; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.faq-card:hover{ transform: translateY(-3px); border-color: rgba(255,184,77,.35); }
.faq-card img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius: calc(var(--radius-2xl) - 8px); border:1px solid rgba(255,255,255,.06);
}
.faq-card figcaption{ margin-top:8px; color:var(--clr-muted); font-size:.92rem; }

@media (max-width: 980px){
  .faq__grid{ grid-template-columns: 1fr; }
  .faq__media{ grid-template-columns: 1fr; }
}