/* Готовые решения: большая карточка с телефоном и меню ниши, маленькие по нажатию поднимаются на её место.
   У каждой ниши свой экран меню, не копия вока: пиццерия собирает пиццу, суши-бар тёмный со сетами,
   кофейня про любимый напиток и штампы, веган-кафе про состав и КБЖУ, русская кухня про повтор и слоты доставки,
   пекарня про предзаказ к дате */
.venues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.venue {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 14px;
  align-content: start;
  padding: 22px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.venue:not(.big):hover { border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); box-shadow: 0 12px 30px rgba(20, 21, 46, 0.08); }
.venue:focus-visible { outline: 3px solid var(--tang); outline-offset: 3px; }
.venue .phone { display: none; }
.venue .v-ico { grid-column: 2; grid-row: 1; width: 56px; height: 56px; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.venue:not(.big):hover .v-ico { transform: rotate(-8deg) scale(1.08); }
.venue-text { grid-column: 1; grid-row: 1; display: grid; gap: 8px; justify-items: start; }
.venue h3 { font: 900 22px/1.1 var(--display); }
.venue-text p { margin: 0; color: var(--ink-2); font-size: 15px; }
.venue .kind { justify-self: start; font: 600 11.5px var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); }
.venue .btn { display: none; }
/* маленькая карточка зовёт открыться */
.venue:not(.big)::after { content: '↗'; position: absolute; right: 18px; bottom: 14px; font-weight: 800; color: var(--ink-2); opacity: 0.45; transition: 0.25s; }
.venue:not(.big):hover::after { opacity: 1; color: var(--blue); transform: translate(2px, -2px); }

/* большая: телефон с меню и описание */
.venue.big { grid-column: 1 / -1; grid-template-columns: 250px 1fr; gap: 44px; align-items: center; padding: 30px 36px; cursor: default; }
.venue.big .phone { display: block; width: 100%; max-width: 250px; transform: rotate(-3deg); }
.venue.big .v-ico { display: none; }
.venue.big .venue-text { grid-column: 2; max-width: 560px; gap: 12px; }
.venue.big h3 { font-size: clamp(28px, 3.2vw, 38px); }
.venue.big .venue-text p { font-size: 17px; }
.venue.big .btn { display: inline-flex; }
.venue.big .kind { color: var(--tang); }

/* анимация: новая большая проявляется, телефон подлетает с поворотом; ушедшая вниз мягко проявляется на новом месте */
.venue.enter .phone { animation: v-phone 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both; }
.venue.enter .venue-text > * { animation: v-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.32s both; }
.venue.enter .venue-text > :nth-child(2) { animation-delay: 0.38s; }
.venue.enter .venue-text > :nth-child(3) { animation-delay: 0.44s; }
.venue.enter .venue-text > :nth-child(4) { animation-delay: 0.5s; }
.venue.leave > * { animation: v-fade 0.45s ease 0.3s both; }
@keyframes v-phone { from { opacity: 0; transform: translateY(40px) rotate(-14deg) scale(0.88); } to { opacity: 1; transform: rotate(-3deg); } }
@keyframes v-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes v-fade { from { opacity: 0; } }

@media (max-width: 860px) {
  .venues { grid-template-columns: 1fr 1fr; gap: 12px; }
  .venue { grid-template-columns: 1fr; padding: 16px; gap: 8px; }
  .venue .v-ico { grid-column: 1; width: 44px; height: 44px; }
  .venue-text { grid-row: 2; }
  .venue h3 { font-size: 18px; }
  .venue:not(.big) .venue-text p { display: none; }
  .venue:not(.big) .venue-text { padding-right: 16px; }
  .venue:not(.big)::after { right: 12px; bottom: 12px; }
  .venue.big { grid-template-columns: 1fr; padding: 22px; gap: 22px; }
  .venue.big .phone { margin: 0 auto; width: 220px; }
  .venue.big .venue-text { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .venue.enter .phone, .venue.enter .venue-text > *, .venue.leave > *, .pz-img { animation: none !important; }
}

/* ---------- экраны меню внутри телефона (все размеры от ширины телефона, cqw) ---------- */
.phone .scr.dark::before { color: #fff; }
.phone .scr.dark::after { filter: invert(1); }
.mk {
  position: absolute;
  top: 11.6cqw;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 3cqw;
  padding: 3cqw 4.4cqw 0;
  overflow: hidden;
  text-align: left;
  font: 500 3.4cqw/1.3 -apple-system, 'Helvetica Neue', system-ui, sans-serif;
  letter-spacing: 0;
  color: var(--mk-ink);
  background: var(--mk-bg);
}
.mk p { margin: 0; }
.mk b { font-weight: 700; }
.mk small { display: block; font-size: 2.8cqw; opacity: 0.7; }
.mk svg { display: block; }
.mk-top { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.mk .logo { font-size: 5.2cqw; line-height: 1; }
.mk .pill:only-child { margin-left: auto; }
.mk .pill { font-size: 2.7cqw; padding: 1.2cqw 2.6cqw; border-radius: 99px; background: var(--mk-soft); white-space: nowrap; }
.mk-cta { padding: 3cqw; border-radius: 3.6cqw; background: var(--mk-acc); color: #fff; font-weight: 700; font-size: 3.5cqw; text-align: center; }

/* пиццерия: собираешь свою пиццу, крупный продукт, размеры и тесто переключателями */
.mk-pizza { --mk-bg: #fff8ef; --mk-ink: #2b1a12; --mk-acc: #d8432f; --mk-soft: #f6e5d2; }
.mk-pizza .logo { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; letter-spacing: 0.14em; color: #d8432f; }
.pz-hero { position: relative; height: 58cqw; margin: 0 -4.4cqw; }
.pz-img { position: absolute; right: -17cqw; top: -1cqw; width: 62cqw; height: 62cqw; filter: drop-shadow(0 3cqw 4cqw rgba(120, 40, 10, 0.25)); animation: pz-spin 60s linear infinite; }
@keyframes pz-spin { to { transform: rotate(360deg); } }
.pz-info { position: absolute; left: 4.4cqw; top: 5cqw; width: 42cqw; display: grid; gap: 1.2cqw; }
.pz-info small { opacity: 1; color: #d8432f; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.pz-info b { font: 700 7.4cqw/1 Georgia, 'Times New Roman', serif; }
.pz-info p { font-size: 2.9cqw; opacity: 0.7; }
.seg { display: flex; padding: 0.8cqw; border-radius: 99px; background: var(--mk-soft); }
.seg span { flex: 1; padding: 1.8cqw 0; border-radius: 99px; text-align: center; font-size: 3cqw; font-weight: 600; }
.seg .on { background: #fff; box-shadow: 0 0.6cqw 1.6cqw rgba(0, 0, 0, 0.1); }
.adds { display: flex; flex-wrap: wrap; gap: 1.6cqw; }
.adds span { padding: 1.3cqw 2.4cqw; border: 0.35cqw dashed #d9b99a; border-radius: 99px; font-size: 2.7cqw; }
.pz-more { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.pz-more > div { display: grid; grid-template-columns: 11cqw 1fr; gap: 0.4cqw 2cqw; align-items: center; padding: 2.2cqw; border-radius: 3.4cqw; background: #fff; }
.pz-more svg { grid-row: span 2; width: 11cqw; height: 11cqw; }
.pz-more b { font-size: 3cqw; }
.pz-more small { font-size: 2.6cqw; }
.mk-pizza .tabs { display: flex; gap: 4cqw; margin-top: auto; padding: 3cqw 0 5cqw; border-top: 0.3cqw solid #f0dfcd; font-size: 3cqw; opacity: 0.8; }
.mk-pizza .tabs .on { color: #d8432f; font-weight: 700; opacity: 1; }

/* суши-бар: тёмный, сеты на доске с количеством штук, заказ ко времени */
.mk-sushi { --mk-bg: #121514; --mk-ink: #f3efe7; --mk-acc: #ff7a59; --mk-soft: #232927; }
.mk-sushi .logo { font-weight: 300; letter-spacing: 0.34em; }
.mk-sushi .pill { color: #ff7a59; }
.mk-sushi .ttl { font-size: 8cqw; font-weight: 800; line-height: 1; }
.mk-sushi .chips { display: flex; gap: 1.8cqw; overflow: hidden; }
.mk-sushi .chips span { padding: 1.5cqw 3cqw; border-radius: 99px; background: var(--mk-soft); font-size: 2.8cqw; white-space: nowrap; }
.mk-sushi .chips .on { background: #ff7a59; color: #121514; font-weight: 700; }
.mk-sushi .set { display: grid; grid-template-columns: 30cqw 1fr auto; gap: 3cqw; align-items: center; padding: 2.4cqw; border-radius: 4cqw; background: #1b201e; border: 0.3cqw solid #2a312e; }
.mk-sushi .rolls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8cqw; padding: 1.8cqw; border-radius: 2.6cqw; background: linear-gradient(135deg, #5a3d28, #3c2819); }
.mk-sushi .rolls svg { width: 100%; aspect-ratio: 1; }
.mk-sushi .set-t b { font-size: 3.6cqw; }
.mk-sushi .set-t span { display: block; margin-top: 0.8cqw; color: #ff7a59; font-weight: 700; font-size: 3.3cqw; }
.mk-sushi .set i { display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 50%; background: #ff7a59; color: #121514; font-style: normal; font-weight: 800; font-size: 4.4cqw; }
.mk-sushi .bar { display: flex; justify-content: space-between; margin: auto 0 5cqw; padding: 3.4cqw 4cqw; border-radius: 4cqw; background: #ff7a59; color: #121514; font-size: 3.1cqw; font-weight: 600; }

/* кофейня: приветствие, любимый напиток в одно касание, карта штампов */
.mk-coffee { --mk-bg: #f6efe6; --mk-ink: #3b2a20; --mk-acc: #3b2a20; --mk-soft: #eadfce; }
.mk-coffee .logo { font: italic 400 6.2cqw/1 Georgia, 'Times New Roman', serif; }
.mk-coffee .hi { font-size: 6.4cqw; font-weight: 800; line-height: 1.1; }
.mk-coffee .fav { display: grid; grid-template-columns: 20cqw 1fr; gap: 1.6cqw 3cqw; align-items: center; padding: 3.4cqw; border-radius: 5cqw; background: #3b2a20; color: #f6efe6; }
.mk-coffee .fav svg { grid-row: span 2; width: 20cqw; height: 20cqw; }
.mk-coffee .fav b { display: block; font-size: 3.8cqw; }
.mk-coffee .rep { grid-column: 2; justify-self: start; padding: 1.5cqw 3.6cqw; border-radius: 99px; background: #f6efe6; color: #3b2a20; font-weight: 700; font-size: 3cqw; }
.mk-coffee .stamps { display: grid; gap: 2cqw; padding: 3cqw 3.4cqw; border-radius: 4cqw; background: #fff; }
.mk-coffee .stamps small { opacity: 0.85; font-weight: 600; }
.mk-coffee .cups { display: flex; gap: 1.6cqw; }
.mk-coffee .cups i { flex: 1; min-width: 0; box-sizing: border-box; aspect-ratio: 1; border-radius: 50%; border: 0.5cqw dashed #cdb89f; }
.mk-coffee .cups i.on { border: 0; background: radial-gradient(circle, #c89668 44%, #8a5a3c 46% 60%, #fff 62%); box-shadow: 0 0 0 0.35cqw #e5d6c3; }
.mk-coffee .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.mk-coffee .grid > div { display: grid; gap: 0.6cqw; padding: 2.6cqw; border-radius: 4cqw; background: #fff; }
.mk-coffee .grid svg { width: 15cqw; height: 15cqw; margin-bottom: 0.8cqw; }
.mk-coffee .grid b { font-size: 3.3cqw; }

/* веган-кафе: фильтры, состав и КБЖУ крупно, план на несколько дней */
.mk-vegan { --mk-bg: #f3f8ef; --mk-ink: #1f3b1f; --mk-acc: #2e7d32; --mk-soft: #e1eed9; }
.mk-vegan .logo { font-size: 6.2cqw; font-weight: 800; letter-spacing: -0.03em; color: #2e7d32; }
.mk-vegan .pill { color: #2e7d32; font-weight: 600; }
.mk-vegan .filters { display: flex; flex-wrap: wrap; gap: 1.6cqw; }
.mk-vegan .filters span { padding: 1.3cqw 2.6cqw; border-radius: 99px; background: #fff; border: 0.3cqw solid #cfe0c4; font-size: 2.7cqw; }
.mk-vegan .filters .on { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.mk-vegan .dish { display: grid; gap: 2cqw; padding: 3.4cqw; border-radius: 5cqw; background: #fff; box-shadow: 0 1.5cqw 4cqw rgba(46, 125, 50, 0.08); }
.mk-vegan .bowl { justify-self: center; width: 44cqw; height: 44cqw; }
.mk-vegan .tags { display: flex; gap: 1.4cqw; }
.mk-vegan .tags span { padding: 0.8cqw 2cqw; border-radius: 99px; background: #e1eed9; color: #2e7d32; font-size: 2.6cqw; font-weight: 600; }
.mk-vegan .dish > b { font-size: 4.4cqw; line-height: 1.15; }
.mk-vegan .kbju { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; }
.mk-vegan .kbju span { display: grid; padding: 1.4cqw 0; border-radius: 2.6cqw; background: #f3f8ef; text-align: center; font-size: 2.4cqw; }
.mk-vegan .kbju b { font-size: 3.8cqw; }
.mk-vegan .row { display: grid; grid-template-columns: 9cqw 1fr auto; gap: 2.4cqw; align-items: center; padding: 2.4cqw 3cqw; border-radius: 4cqw; background: #fff; }
.mk-vegan .row svg { width: 9cqw; height: 15cqw; }
.mk-vegan .row > span { font-size: 3cqw; font-weight: 700; color: #2e7d32; }

/* русская кухня: «как в прошлый раз» одной кнопкой, домашние блюда, слоты доставки */
.mk-rus { --mk-bg: #fbf3ea; --mk-ink: #3a1f14; --mk-acc: #b23a26; --mk-soft: #f1dfcc; }
.mk-rus .logo { font: 700 5.6cqw/1 Georgia, 'Times New Roman', serif; color: #b23a26; }
.mk-rus .repeat { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 3.4cqw; border-radius: 4cqw; background: #b23a26; color: #fff; }
.mk-rus .repeat b { font-size: 3.6cqw; }
.mk-rus .rep { padding: 1.5cqw 3cqw; border-radius: 99px; background: #fff; color: #b23a26; font-size: 3cqw; font-weight: 700; }
.mk-rus .item { display: grid; grid-template-columns: 17cqw 1fr auto; gap: 2.6cqw; align-items: center; padding: 1.6cqw 0; border-bottom: 0.3cqw dashed #e6cfb7; }
.mk-rus .item svg { width: 17cqw; height: 17cqw; }
.mk-rus .item b { font-size: 3.4cqw; }
.mk-rus .price { display: block; margin-top: 0.8cqw; font-size: 3.2cqw; font-weight: 700; color: #b23a26; }
.mk-rus .step { padding: 1.2cqw 2cqw; border-radius: 99px; background: #f1dfcc; font-size: 3cqw; font-weight: 700; white-space: nowrap; }
.mk-rus .add { display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 50%; background: #b23a26; color: #fff; font-weight: 800; }
.mk-rus .slots { margin: auto 0 5cqw; }
.mk-rus .slots > div { display: flex; gap: 1.6cqw; margin-top: 1.6cqw; }
.mk-rus .slots span { flex: 1; padding: 1.8cqw 0; border-radius: 2.6cqw; background: #fff; border: 0.3cqw solid #ecd6bf; text-align: center; font-size: 2.9cqw; }
.mk-rus .slots .on { background: #3a1f14; border-color: #3a1f14; color: #fff; }

/* пекарня: предзаказ к дате, торт к субботе, выпечка к утру */
.mk-bake { --mk-bg: #fdf1f1; --mk-ink: #4a2c35; --mk-acc: #e0607e; --mk-soft: #f8dfe3; }
.mk-bake .logo { font-size: 6.4cqw; font-weight: 800; letter-spacing: -0.03em; color: #e0607e; }
.mk-bake .tabs2 { display: flex; padding: 0.8cqw; border-radius: 99px; background: #f8dfe3; }
.mk-bake .tabs2 span { flex: 1; padding: 1.8cqw 0; border-radius: 99px; text-align: center; font-size: 3cqw; font-weight: 600; }
.mk-bake .tabs2 .on { background: #fff; color: #e0607e; }
.mk-bake .days { display: flex; gap: 1.2cqw; }
.mk-bake .days span { flex: 1; padding: 1.6cqw 0; border-radius: 3cqw; background: #fff; text-align: center; font-size: 3.4cqw; font-weight: 700; }
.mk-bake .days small { font-size: 2.3cqw; font-weight: 500; }
.mk-bake .days .on { background: #e0607e; color: #fff; }
.mk-bake .cake { display: grid; grid-template-columns: 32cqw 1fr; gap: 3cqw; align-items: center; padding: 3cqw; border-radius: 5cqw; background: #fff; }
.mk-bake .cake svg { width: 32cqw; height: 29cqw; }
.mk-bake .cake b { font-size: 4.6cqw; }
.mk-bake .price { display: block; margin-top: 1.4cqw; font-size: 3.2cqw; font-weight: 700; color: #e0607e; }
.mk-bake .morning { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.mk-bake .morning > div { display: grid; gap: 0.6cqw; padding: 2.6cqw; border-radius: 4cqw; background: #fff; }
.mk-bake .morning svg { width: 20cqw; height: 14cqw; margin-bottom: 0.8cqw; }

/* добивка экранов: низ меню, как в живом приложении */
.mk .bar { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; margin: auto 0 5cqw; padding: 3.4cqw 4cqw; border-radius: 4cqw; font-size: 3.1cqw; }
.mk-coffee .bar { background: #3b2a20; color: #f6efe6; }
.mk-sushi .extras div { display: flex; gap: 1.6cqw; margin-top: 1.4cqw; }
.mk-sushi .extras span { padding: 1.3cqw 2.4cqw; border: 0.3cqw dashed #3b4541; border-radius: 99px; font-size: 2.7cqw; }
.mk-vegan .plan { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; margin: auto 0 5cqw; padding: 3.2cqw 3.6cqw; border-radius: 4cqw; background: #2e7d32; color: #fff; }
.mk-vegan .plan b { font-size: 3.4cqw; }
.mk-vegan .plan > span { font-weight: 700; font-size: 3.1cqw; white-space: nowrap; }
.mk-rus .item svg.tall { width: 10cqw; height: 17cqw; justify-self: center; }
.mk-rus .combo { margin: 1cqw 0 0; padding: 3cqw 3.4cqw; border-radius: 4cqw; background: #fff; border: 0.4cqw solid #e6cfb7; box-shadow: inset 0 0 0 1cqw #fbf3ea, inset 0 0 0 1.3cqw #e6cfb7; }
.mk-rus .combo b { font: 700 3.8cqw/1.2 Georgia, 'Times New Roman', serif; color: #b23a26; }
.mk-bake .note { padding: 2.6cqw 3.2cqw; border-radius: 3.4cqw; background: #fff; border: 0.35cqw dashed #efb8c4; }
.mk-bake .note b { font: italic 700 3.8cqw/1.2 Georgia, 'Times New Roman', serif; color: #e0607e; }
.mk-bake .mk-cta { margin: auto 0 5cqw; }