/* Компьютер: свой вид с ширины 1024 px. Телефонные правила выше не трогаем —
   всё, что ниже, работает только на широком экране. Подключается последним. */
.p-side, .dk-back, .biz-side { display: none; }
/* Мышь: подсветка повторяет форму кнопки, а не квадрат поверх круга (классы ставит mobile.js) */
@media (hover: hover) {
  .tap { cursor: pointer; }
  .tap--flat { border-radius: 12px !important; }
  .tap--round { border-radius: 50% !important; }
  .tap:focus-visible { outline-offset: 2px; }
}
@media (min-width: 1024px) {
  :root { --dock-w: 560px; --dock-gap: 16px; }

  /* Экран во всю ширину окна (фон без чёрных полей), содержимое — колонкой по центру.
     Ширина колонки по смыслу: формы и карточки — 760, кабинет — 880, каталог и заведение — 1200 */
  #screen { --desk-w: 760px; --desk-pad: max(32px, calc((100% - var(--desk-w)) / 2)); padding-left: var(--desk-pad); padding-right: var(--desk-pad); }
  #screen.biz, #screen.adm { --desk-w: 880px; }
  #screen:has(> .c-panel), #screen.vp { --desk-w: 1200px; }
  /* Один левый край: телефонные отступы 11–22 px у заголовков, текста и карточек на ПК убираем,
     всё встаёт по краю колонки (внутренние отступы карточек остаются) */
  #screen:not(.vp):not(:has(> .c-panel)) > :is(h1, h2, h3, p, a, div, section, form, nav, ul, label, details) { margin-left: 0; margin-right: 0; }
  #screen:not(.vp):not(:has(> .c-panel)) > :is(h1, h2, h3, p, .cb-back) { padding-left: 0; padding-right: 0; }
  #screen .cb-back h1, #screen .cb-back p { margin-left: 0; padding-left: 0; }
  #screen > :is(.b-head, .b-steps, .vp-form) { padding-left: 0; padding-right: 0; }
  #screen > .vp-form > * { margin-left: 0; margin-right: 0; }

  /* «Назад» — в левом верхнем углу; стрелки страниц (телефонные) на компьютере не нужны */
  .dk-back { position: absolute; z-index: 60; top: 22px; left: 24px; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px 0 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 600; }
  .cb-back a[data-na-back], .a-back, .biz-back, .blog-back, .ny-back, .p-hero__back { display: none !important; }
  #screen.vp > .p-hero { margin-top: 80px !important; }
  /* Шаги брони: фото заведения карточкой со скруглением, ниже кнопки «Назад» */
  #screen > .b-hero { margin-top: 80px; border-radius: 28px; overflow: hidden; }
  #screen > .b-hero .b-fade { display: none; }
  #screen > .b-head { margin-top: 22px; }

  /* Кабинет заведения: разделы слева на каждой странице, содержимое справа */
  body:has(.biz-side) { padding-left: 264px; }
  .biz-side { position: fixed; z-index: 55; left: 0; top: 0; bottom: 0; display: flex; flex-direction: column; width: 264px; padding: 22px 14px 24px; overflow-y: auto; scrollbar-width: none; border-right: 1px solid var(--line); background: var(--bg); }
  .biz-side__logo { margin: 4px 0 22px 12px; font-size: 30px; }
  .biz-side__cap { margin: 18px 12px 6px; color: var(--ink-tab); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
  .biz-side__a { display: flex; flex: none; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 14px; color: var(--ink); font-size: 14.5px; }
  .biz-side__a .side__icon { flex: none; width: 20px; height: 20px; }
  .biz-side__a[aria-current] { background: var(--plate-2); color: var(--accent-dock-2); font-weight: 600; }
  body:has(.biz-side) .dk-back { left: 288px; }
  /* Низ меню: подписка коротко (подробно — в «Подписке на сервис») и «Выйти» */
  .biz-side__foot { margin-top: auto; padding-top: 20px; }
  .biz-side .sub-banner { margin: 0 0 10px; padding: 12px; border-radius: 16px; font-size: 12.5px; line-height: 18px; }
  .biz-side .sub-banner b { display: block; font-size: 13px; line-height: 18px; }
  .biz-side .sub-banner p { display: none; }
  .biz-side .sub-banner a { display: inline-block; margin-top: 6px; color: var(--accent-ink); }
  .biz-side__out { width: 100%; height: 40px; padding: 0 12px; text-align: left; border: 1px solid var(--line); border-radius: 20px; font-size: 14px; font-weight: 600; }
  /* Меню уже слева: нижняя капсула и логотип страницы в кабинете не нужны */
  body:has(.biz-side) .dock, body:has(.biz-side) #screen .logo { display: none; }
  body:has(.biz-side) #screen { padding-top: 76px; }
  body.service-site:has(.biz-side) { padding-bottom: 48px; }
  .ds .biz-notif .notification-bell.g-bell { right: 24px; top: 22px; }
  /* Уведомления: окошко под колокольчиком справа, а не полоса на всю ширину */
  :root .ds .notification-panel.pn-panel { left: auto; right: 14px; width: 400px; }
  :root .ds .biz-notif .notification-panel.pn-panel { right: 24px; top: 70px; }
  :root .ds .notification-panel.ao-not { left: auto; right: 24px; width: 400px; height: auto; max-height: 70vh; }
  /* Затемнение страницы под шапкой — телефонное; на ПК окошко уведомлений и меню аккаунта без него */
  body:has(#notificationPanel:not([hidden]))::after, body:has(.g-acc[open])::after { display: none; }

  /* Нижняя панель — капсула по центру, отделена от края экрана */
  .dock { left: calc(50% - var(--dock-w) / 2); right: calc(50% - var(--dock-w) / 2); bottom: var(--dock-gap); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -16px rgb(0 0 0 / .8); }
  .dock--biz { border-top: 0; box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -16px rgb(0 0 0 / .8); }
  .dock--place { padding-bottom: 0; }
  body.service-site { padding-bottom: calc(64px + var(--dock-gap) * 2); }
  body.service-site:has(.dock--place) { padding-bottom: calc(143px + var(--dock-gap) * 2); }
  body.service-site:has(.dock--biz), body.service-site:has(.dock--adm) { padding-bottom: calc(66px + var(--dock-gap) * 2); }
  body.service-site:not(:has(.dock)) { padding-bottom: 0; }
  /* Подсказка всплывает над капсулой и не шире её */
  .toast { left: calc(50% - var(--dock-w) / 2); right: calc(50% - var(--dock-w) / 2); bottom: calc(88px + var(--dock-gap)); }

  /* Окна снизу (переписка, добавить бронь) — по центру шириной панели */
  dialog.ch-sheet, dialog.ad-sheet { left: calc(50% - var(--dock-w) / 2); right: calc(50% - var(--dock-w) / 2); }

  /* Толик: панель справа поверх страницы, а не на весь экран (по ширине — как на телефоне) */
  .to-panel { top: 16px; right: 16px; left: auto; width: 440px; bottom: 16px !important; z-index: 70; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 24px 60px -20px rgb(0 0 0 / .85); }
  /* Фильтры каталога: окно по центру с отступами сверху и снизу, без «ручки» шторки */
  .fl-dialog { margin: auto; max-height: calc(100dvh - 48px); border-radius: 24px; }
  .fl-dialog .fl-sheet { border-radius: 24px; }
  .fl-dialog .fl-grab { display: none; }

  /* Панель даты (журнал, брони): стрелки с датой ровно по центру, календарь справа.
     Слева — пустое место шириной календаря, чтобы середина была настоящей серединой. */
  .pillbar:has(.j-date__day)::before { content: ""; flex: none; width: 41px; }
  .pillbar:has(.j-date__day) > .j-date__step:first-of-type { margin-left: auto; }
  .pillbar:has(.j-date__day) > .j-date__day { flex: none; min-width: 190px; padding: 0 12px; }

  /* Календарь дня (брони, журнал): обычного размера под кнопкой календаря, а не во всю ширину */
  .ds .wk-cal__panel { left: auto; right: 0; width: 360px; }
  .ds .wk-cal__grid a { font-size: 14px; }

  /* ---------- Главная (каталог) ---------- */
  /* Фото-шапка во всю ширину, выше, мягко уходит в фон */
  #screen .c-hero { height: 520px; object-position: 50% 45%; -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }
  /* Верхняя строка: логотип, город — слева; вход гостя и заведения — справа */
  #screen .c-top { height: 96px; padding: 0; }
  #screen .c-logo { font-size: 40px; }
  #screen .c-city { margin-left: 32px; gap: 8px; font-size: 15px; }
  #screen .c-city svg:first-child { width: 20px; height: 20px; }
  #screen .c-auth { position: absolute; z-index: 13; top: 26px; right: var(--desk-pad); grid-template-columns: auto auto; gap: 10px; padding: 0; }
  #screen .c-auth a, #screen .c-auth a + a { height: 44px; padding: 0 22px 0 18px; gap: 10px; border-radius: 22px; font-size: 14px; }
  #screen .c-top__me { margin-left: auto; }
  /* Панель поиска — как на телефоне (поиск сверху, дата · время · гости, «Показать места»),
     та же разметка и вырезы, только крупнее и по центру: zoom увеличивает её целиком */
  #screen .c-panel { width: 480px; margin: 100px auto 0; zoom: 1.5; }
  #screen .c-hint, #screen .c-parsed, #screen .c-chips { max-width: 1080px; margin-left: auto; margin-right: auto; }
  /* Список: заголовок крупнее, карточки сеткой по три */
  #screen .c-list-head { height: auto; margin-top: 56px; margin-bottom: 18px; padding: 0; font-size: 24px; font-weight: 800; letter-spacing: 0; }
  #screen .c-map { width: auto; height: 40px; padding: 0 18px; border-radius: 20px; font-size: 14px; }
  #screen .c-cards { grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0; }
  #screen .c-card { height: 300px; border-radius: 22px; transition: transform .2s; }
  #screen .c-card:hover { transform: translateY(-3px); }
  /* Фото заканчивается под верхом плашки (как на телефоне), а не до низа карточки — иначе выглядывает в её нижних скруглённых углах */
  #screen .c-card img { width: 100%; height: calc(100% - 44px); margin: 0; }
  #screen .c-plate { height: 68px; padding: 11px 16px 0; border-radius: 22px; }
  #screen .c-plate::before { height: 232px; }
  #screen .c-plate__top { font-size: 17px; line-height: 22px; }
  #screen .c-plate__top span { font-size: 15px; }
  #screen .c-plate__sub { margin-top: 4px; font-size: 13px; line-height: 18px; }
  #screen .c-fav { top: 14px; right: 14px; width: 38px; height: 38px; }
  #screen .c-card--nophoto { background: var(--plate-2); }
  #screen .c-next { width: 320px; margin: 32px auto 0; }
  #screen .c-install { width: 360px; margin: 48px auto 0; }
  #screen .foot-card, #screen .foot-card--line { max-width: 640px; margin-left: auto; margin-right: auto; }
  #screen .catalog-main .empty { max-width: 640px; margin: 40px auto; text-align: center; }

  /* ---------- Карточка заведения ---------- */
  /* Фото сверху во всю колонку, ниже два столбца: описание слева, бронь справа */
  #screen.vp { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 48px; align-items: start; }
  #screen.vp > * { grid-column: 1; }
  #screen.vp > .p-hero { grid-column: 1 / -1; height: 460px; margin-top: 24px; border-radius: 28px; }
  #screen.vp .p-hero__fade { background: linear-gradient(180deg, rgb(0 0 0 / .35), transparent 30%); }
  #screen.vp .p-hero__btns { top: 20px; right: 20px; }
  #screen.vp .p-hero__btns .circ { width: 44px; height: 44px; }
  #screen.vp > .p-head { margin-top: 28px; padding: 0; }
  #screen.vp .p-head h1 { font-size: 34px; line-height: 40px; }
  #screen.vp .p-head p { font-size: 17px; }
  #screen.vp .p-rate { font-size: 20px; }
  #screen.vp > .p-tabs { margin-top: 20px; padding: 0; grid-template-columns: repeat(4, max-content); gap: 40px; }
  #screen.vp .p-tab { padding: 14px 4px 16px; font-size: 16px; }
  #screen.vp .vh-panel { padding-top: 8px; }
  #screen.vp .p-info, #screen.vp .p-feats, #screen.vp .p-extra, #screen.vp .p-about { padding-left: 0; padding-right: 0; }
  #screen.vp .p-sec { margin-left: 0; font-size: 22px; }
  /* Карточка брони прилипает при прокрутке */
  #screen.vp > .p-side { grid-column: 2; grid-row: 2 / span 30; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 8px; margin-top: 28px; padding: 26px 24px 24px; border: 1px solid var(--line); border-radius: 28px; background: var(--plate-2); }
  .p-side b { font-size: 22px; font-weight: 800; line-height: 28px; }
  .p-side p { color: var(--ink-sub); font-size: 15px; line-height: 22px; }
  .p-side__loc { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; }
  .p-side__loc svg { flex: none; margin-top: 2px; }
  .p-side__book { display: grid; place-items: center; height: 56px; margin-top: 14px; border-radius: 28px; background: var(--accent-book); color: var(--white); font-size: 17px; font-weight: 700; }
  /* Кнопка брони теперь в карточке справа — в нижней капсуле только меню */
  .dock--place { height: 63px; }
  .dock--place .p-book { display: none; }
  body.service-site:has(.dock--place) { padding-bottom: calc(64px + var(--dock-gap) * 2); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  #screen .c-cards { grid-template-columns: repeat(2, 1fr); }
  #screen .c-auth a span, #screen .c-auth a { font-size: 13px; }
}
/* Меню с колёсика (язык, валюта, тема) на компьютере — окно по центру, а не на весь экран (вариант B, решение Влада 3.11) */
@media (min-width: 1024px) {
  #mobileNav.me-dialog { position: fixed; inset: 0; margin: auto; width: 460px; height: fit-content; max-height: 88vh; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 24px 60px -20px rgb(0 0 0 / .85); }
  #mobileNav.me-dialog::backdrop { background: rgb(0 0 0 / .55); }
  #mobileNav .screen { min-height: 0; height: auto; padding-bottom: 20px; }
  /* Банкет: текст, форма, примечание и «О сервисе» — одной колонкой шириной с форму, по центру */
  #screen:has(> .banquet-picker) > :is(.q-lead, .q-form, .q-note, .q-foot) { box-sizing: border-box; max-width: 600px; margin-left: auto !important; margin-right: auto !important; }
  /* Статья блога: старое ограничение 720 px вместе с отступами колонки сжимало текст в полоску.
     Колонка 720 по центру — удобно читать; кнопка в конце — под вопросом */
  #screen.blog-post { max-width: none; --desk-w: 720px; }
  #screen.blog-post > .blog-post__image { max-width: 100%; margin-left: 0 !important; margin-right: 0 !important; }
  /* «Новый год 2027»: то же старое ограничение (1240 px) сжимало страницу; колонка 1200, как у каталога */
  #screen.new-year-page { max-width: none; --desk-w: 1200px; }
  #screen.blog-post .blog-post__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
}