/* Дополнения к site.css (вёрстка). Сам site.css не правим — он 1:1 из вёрстки */

/* Рестораны всех городов выводятся сразу, лишние скрыты атрибутом hidden — а .row задаёт display: grid */
.row[hidden] { display: none; }

/* Блюдо первого экрана (width: 112%) и повёрнутый ценник (right: -10px) на 768–1160px вылезали за экран —
   появлялась горизонтальная прокрутка. clip режет только по горизонтали: блюдо по-прежнему заходит на белый блок */
.hero, .menu { overflow-x: clip; }

/* Плавающая кнопка на телефоне: появляется, когда кнопки первого экрана ушли из вида (main.js),
   иначе на первом экране дублирует их и закрывает блюдо */
@media (max-width: 860px) {
  .sticky { transform: translateY(100%); visibility: hidden; transition: transform .25s ease, visibility .25s; }
  .sticky.is-shown { transform: none; visibility: visible; }
}

/* Первый экран на телефоне — целиком в экран: меньше отступы, кнопки в ряд */
@media (max-width: 560px) {
  .hero { padding-block: 16px 20px; }
  .hero-grid { padding-top: 22px; }
  .hero h1 { margin-top: 12px; }
  .lead { margin-top: 14px; font-size: 16px; line-height: 1.5; }
  .cta-row { margin-top: 18px; flex-wrap: nowrap; gap: 8px; }
  .cta-row .btn { flex: 1 1 0; min-height: 48px; padding: 8px 10px; font-size: 13px; text-align: center; }
  .from { margin-top: 12px; }
  .hero-art { margin-top: 64px; }
  .note { top: -62px; }
  .note span { font-size: 22px; }
  .note img { width: 40px; margin-top: 18px; }
}
/* Низкие экраны (SE, старые Android): рукописную пометку скрываем, блюдо ближе к тексту */
@media (max-width: 560px) and (max-height: 620px) {
  .hero-grid { padding-top: 12px; }
  .hero h1 { margin-top: 8px; }
  .lead { font-size: 14px; }
  .from { margin-top: 8px; }
  .note { display: none; }
  .hero-art { margin-top: 10px; }
}