/* ==========================================================================
   Квартал — дизайн-система
   Все размеры кратны 4 и целые. Светлая тема, один зелёный акцент.
   ========================================================================== */

/* Шрифты: локальные woff2 (Inter — заголовки, Manrope — текст) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Цвет */
  --bg: #FFFFFF;
  --page: #F4F6F5;
  --surface: #F2F4F3;
  --surface-hover: #E8ECEA;
  --surface-press: #DFE4E1;
  --ink: #131915;
  --ink-2: #57615C;
  --ink-3: #626C67;
  --line: #E4E8E6;

  --accent: #FCE000;
  --on-accent: #131915;
  --accent-hover: #F2D600;
  --accent-press: #E5CA00;
  --accent-soft: #FFF8CC;
  --accent-soft-hover: #FFF1A3;
  --accent-ink: #5E5100;
  --success: #1A7A43;
  --focus: rgba(138, 118, 0, 0.72);

  --star: #F2A900;
  --danger: #C8382B;
  --danger-soft: #FBEAE8;
  --warn-soft: #FFF4DB;

  /* Типографика */
  --font-head: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Скругления */
  --r-8: 8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-20: 20px;
  --r-24: 24px;
  --r-pill: 400px;

  /* Тени — лёгкие, с небольшим размахом */
  --shadow-sm: 0 4px 12px rgba(19, 25, 21, 0.06);
  --shadow-md: 0 8px 24px rgba(19, 25, 21, 0.08);

  /* Сетка */
  --container: 1280px;
  --gutter: 32px;
  --header-h: 72px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --header-h: 64px;
  }
}

/* ---------- База ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.page-grey {
  background: var(--page);
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: 40px; line-height: 48px; }
h2 { font-size: 28px; line-height: 36px; }
h3 { font-size: 20px; line-height: 28px; font-weight: 600; }
h4 { font-size: 16px; line-height: 24px; font-weight: 600; }

@media (max-width: 767px) {
  h1 { font-size: 28px; line-height: 36px; }
  h2 { font-size: 24px; line-height: 32px; }
  h3 { font-size: 20px; line-height: 28px; }
}

p { margin: 0; }

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

::selection {
  background: var(--accent-soft-hover);
  color: var(--ink);
}

:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 0;
  border-radius: var(--r-8);
}

input,
textarea {
  caret-color: var(--ink);
}

* {
  scrollbar-width: thin;
  scrollbar-color: #C9D0CC transparent;
}

.num {
  font-variant-numeric: tabular-nums;
}

.muted { color: var(--ink-2); }
.small { font-size: 12px; line-height: 16px; }
.visually-hidden {
  position: absolute !important;
  width: 4px; height: 4px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-16 { width: 16px; height: 16px; }
.icon-20 { width: 20px; height: 20px; }

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border-radius: var(--r-12);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-press); }

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
}
.btn-secondary:hover { background: var(--surface-hover); }
.btn-secondary:active { background: var(--surface-press); }

.btn-soft {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.btn-soft:hover { background: var(--accent-soft-hover); }

.btn-ghost {
  color: var(--ink);
}
.btn-ghost:hover { background: var(--surface); }

.btn-sm { height: 40px; padding: 0 16px; border-radius: var(--r-12); }
.btn-xs { height: 32px; padding: 0 12px; border-radius: var(--r-8); font-size: 12px; line-height: 16px; }
.btn-lg { height: 56px; padding: 0 24px; border-radius: var(--r-16); }
.btn-block { width: 100%; }

.btn-icon {
  width: 48px;
  padding: 0;
}
.btn-icon.btn-sm { width: 40px; }

.btn[disabled],
.btn.is-disabled {
  background: var(--surface);
  color: var(--ink-3);
  cursor: not-allowed;
  transform: none;
}

.btn.is-loading {
  color: transparent;
  position: relative;
  pointer-events: none;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid rgba(19, 25, 21, 0.2);
  border-top-color: var(--on-accent);
  animation: spin 720ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Чипы ---------- */

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chips-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
}
.chips-scroll::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  white-space: nowrap;
  flex: none;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.chip:hover { background: var(--surface-hover); }
.chip.is-active,
.chip[aria-pressed="true"] {
  background: var(--ink);
  color: #FFFFFF;
}
.chip-sm { height: 32px; padding: 0 12px; font-size: 12px; line-height: 16px; }
.chip .count { color: var(--ink-3); font-weight: 600; }
.chip.is-active .count { color: rgba(255, 255, 255, 0.64); }

/* ---------- Поля ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--ink-2);
}

.input,
.select,
.textarea {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-12);
  background: var(--surface);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink);
  transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease);
  appearance: none;
}

.textarea {
  height: auto;
  min-height: 120px;
  padding: 12px 16px;
  resize: vertical;
}

.input::placeholder,
.textarea::placeholder { color: var(--ink-3); }

.input:hover,
.select:hover,
.textarea:hover { background: var(--surface-hover); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  background: var(--bg);
  box-shadow: inset 0 0 0 4px var(--accent);
}

.input.is-error { box-shadow: inset 0 0 0 4px var(--danger-soft); background: var(--bg); }
.field-error { font-size: 12px; line-height: 16px; color: var(--danger); font-weight: 600; }

.select {
  padding-right: 48px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2357615C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* Плавающая подпись (как в кабинете-референсе) */
.float {
  position: relative;
  display: block;
  background: var(--surface);
  border-radius: var(--r-12);
  transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.float:hover { background: var(--surface-hover); }
.float:focus-within { background: var(--bg); box-shadow: inset 0 0 0 4px var(--accent); }
.float > span {
  position: absolute;
  top: 8px;
  left: 16px;
  right: 16px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--ink-3);
  pointer-events: none;
}
.float > .input,
.float > .select,
.float > .textarea {
  background-color: transparent;
  height: 56px;
  padding-top: 24px;
  box-shadow: none;
}
.float > .textarea { height: auto; min-height: 112px; padding-top: 28px; }
.float > .select { background-position: right 16px top 20px; }
.float.is-imported::after {
  content: "С сайта";
  position: absolute;
  top: 8px;
  right: 12px;
  height: 16px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.input-icon {
  position: relative;
}
.input-icon > .icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}
.input-icon > .input { padding-left: 48px; }

/* Переключатель */
.switch {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 24px;
  flex: none;
}
.switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}
.switch span {
  width: 44px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--surface-press);
  transition: background-color 200ms var(--ease);
  position: relative;
}
.switch span::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 4px 8px rgba(19, 25, 21, 0.12);
  transition: transform 200ms var(--ease);
}
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 4px solid var(--focus); }

/* Чекбокс */
.check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  cursor: pointer;
  font-weight: 600;
}
.check input {
  appearance: none;
  width: 24px;
  height: 24px;
  margin: 0;
  flex: none;
  border-radius: var(--r-8);
  background: var(--surface-press);
  cursor: pointer;
  transition: background-color 160ms var(--ease);
  display: grid;
  place-items: center;
}
.check input::after {
  /* Галочка — значок по маске, ровно по центру квадрата */
  content: "";
  width: 16px;
  height: 16px;
  background: var(--on-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M5 12.5l4.5 4.5L19 7.5%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%273.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M5 12.5l4.5 4.5L19 7.5%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%273.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0);
  transition: transform 160ms var(--ease);
}
.check input:checked { background: var(--accent); }
.check input:checked::after { transform: scale(1); }
.check:hover input:not(:checked) { background: #D3D9D6; }
.check .count { margin-left: auto; color: var(--ink-3); font-weight: 600; }

/* ---------- Рейтинг, статусы, бейджи ---------- */

.rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: var(--ink);
}
.rating .icon { width: 16px; height: 16px; fill: var(--star); stroke: var(--star); }
.rating .muted { font-weight: 600; }

.stars {
  display: inline-flex;
  gap: 4px;
}
.stars .icon { width: 16px; height: 16px; fill: var(--star); stroke: none; }
.stars .icon.is-off { fill: var(--surface-press); }

.status-open { color: var(--success); font-weight: 700; }
.status-closed { color: var(--danger); font-weight: 700; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--r-8);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  white-space: nowrap;
}
.badge-green { background: var(--accent-soft); color: var(--accent-ink); }
.badge-white { background: rgba(255, 255, 255, 0.92); color: var(--ink); }

.dot-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-3);
  vertical-align: middle;
  margin: 0 8px;
}

/* Логотип компании-заглушка */
.logo-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--r-12);
  color: #FFFFFF;
  font-family: var(--font-head);
  font-size: 16px;
  line-height: 20px;
  font-weight: 800;
  letter-spacing: 0;
}
.logo-mark.lg { width: 80px; height: 80px; border-radius: var(--r-20); font-size: 24px; line-height: 32px; }
.logo-mark.sm { width: 40px; height: 40px; border-radius: var(--r-12); font-size: 12px; line-height: 16px; }

.avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-head);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
}
.avatar.sm { width: 40px; height: 40px; font-size: 12px; line-height: 16px; }

/* ---------- Шапка ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  transition: box-shadow 200ms var(--ease);
}
.page-grey .header { background: rgba(244, 246, 245, 0.96); }
.header.is-scrolled { box-shadow: 0 4px 16px rgba(19, 25, 21, 0.06); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 28px;
  font-weight: 800;
  color: var(--ink);
  flex: none;
}
.brand-mark { width: 32px; height: 32px; flex: none; }

.city-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r-12);
  font-weight: 700;
  color: var(--ink);
  flex: none;
}
.city-btn:hover { background: var(--surface); }
.city-btn .icon { color: var(--accent-ink); }

.header-search {
  flex: 1;
  max-width: 560px;
}
.header-search .input { height: 48px; background: var(--surface-hover); } /* на белой шапке обычный фон поля почти не виден */
.header-search .input:hover { background: var(--surface-press); }
.header-search .input:focus { background: var(--bg); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-12);
  color: var(--ink);
  flex: none;
  transition: background-color 160ms var(--ease);
}
.icon-btn:hover { background: var(--surface); }
.icon-btn .dot {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  text-align: center;
}

.biz-link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r-12);
  font-weight: 700;
  color: var(--ink-2);
}
.biz-link:hover { background: var(--surface); color: var(--ink); }

@media (max-width: 1023px) {
  .header-search,
  .biz-link { display: none; }
}

@media (max-width: 767px) {
  .header-inner { gap: 8px; }
  .header .btn-login { display: none; }
  .city-btn { padding: 0 8px; }
}

/* ---------- Нижняя навигация (мобайл) ---------- */

.tabbar {
  display: none;
}

@media (max-width: 767px) {
  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 64px;
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -4px 16px rgba(19, 25, 21, 0.06);
  }
  .tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    color: var(--ink-3);
  }
  .tabbar a.is-active { color: var(--ink); }
  body.has-tabbar { padding-bottom: 64px; }
}

/* ---------- Секции ---------- */

.section {
  padding-top: 48px;
}
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.section-head a.more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: var(--accent-ink);
  flex: none;
}
.section-head a.more:hover { color: var(--ink); }

@media (max-width: 767px) {
  .section { padding-top: 40px; }
  .section-head { margin-bottom: 16px; }
}

/* ---------- Главная: поиск ---------- */

.home-top {
  padding-top: 32px;
}
.home-top h1 { margin-bottom: 20px; }

.search-xl {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: var(--r-20);
  background: var(--surface);
  transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.search-xl:focus-within {
  background: var(--bg);
  box-shadow: inset 0 0 0 4px var(--accent);
}
.search-xl .input-icon { flex: 1; min-width: 0; }
.search-xl .input {
  height: 48px;
  background: transparent;
  box-shadow: none;
  font-size: 16px;
}
.search-xl .input:focus { background: transparent; box-shadow: none; }

.search-hints {
  margin-top: 16px;
}

@media (max-width: 767px) {
  .home-top { padding-top: 16px; }
  .home-top h1 { margin-bottom: 16px; }
  .search-xl { padding: 4px; border-radius: var(--r-16); }
  .search-xl .btn { width: 48px; padding: 0; }
  .search-xl .btn span { display: none; }
}

/* ---------- Главная: плитка категорий ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 184px;
  gap: 12px;
  grid-template-areas:
    "car car cafe delivery"
    "car car law beauty"
    "shop med repair all";
}

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-24);
  background: var(--surface);
  padding: 20px;
  isolation: isolate;
  transition: background-color 200ms var(--ease);
}
.tile:hover { background: var(--surface-hover); }
.tile:hover img { transform: translateY(-4px) scale(1.02); }

.tile-title {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}
.tile-sub {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--ink-2);
}

.tile img {
  position: absolute;
  right: -8px;
  bottom: -12px;
  width: 152px;
  height: 152px;
  object-fit: contain;
  transition: transform 400ms var(--ease);
  z-index: 0;
}

.tile-xl { padding: 32px; }
.tile-xl .tile-title { font-size: 32px; line-height: 40px; }
.tile-xl .tile-sub { font-size: 16px; line-height: 24px; margin-top: 8px; }
.tile-xl img {
  width: 360px;
  height: 360px;
  right: 8px;
  bottom: -24px;
}
.tile-xl .tile-cta {
  position: absolute;
  left: 32px;
  bottom: 32px;
  z-index: 1;
}

.tile-all {
  background: var(--accent-soft);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tile-all:hover { background: var(--accent-soft-hover); }
.tile-all .tile-title { color: var(--accent-ink); }
.tile-all .tile-sub { color: var(--accent-ink); }
.tile-all .tile-icons {
  display: flex;
  gap: 8px;
  color: var(--accent-ink);
}
.tile-all .tile-icons { gap: 4px; }
.tile-all .tile-icons span {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-16);
  background: rgba(255, 255, 255, 0.72);
}
.tile-all .tile-icons img {
  position: static;
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.tile-all:hover .tile-icons img { transform: none; }
.tile-all .tile-icons .more-ico { width: 56px; color: var(--accent-ink); }

@media (max-width: 1023px) {
  .bento { grid-auto-rows: 168px; }
  .tile-xl img { width: 280px; height: 280px; }
  .tile img { width: 128px; height: 128px; }
}

@media (max-width: 767px) {
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 120px;
    gap: 8px;
    grid-template-areas:
      "car cafe"
      "car delivery"
      "law beauty"
      "shop med"
      "repair all";
  }
  .tile { padding: 12px; border-radius: var(--r-20); }
  .tile-title { font-size: 16px; line-height: 20px; }
  .tile-sub { font-size: 12px; line-height: 16px; }
  .tile img { width: 92px; height: 92px; right: -4px; bottom: -8px; }
  .tile-xl { padding: 16px; }
  .tile-xl .tile-title { font-size: 20px; line-height: 24px; }
  .tile-xl .tile-sub { font-size: 12px; line-height: 16px; margin-top: 4px; }
  .tile-xl img { width: 184px; height: 184px; right: -24px; bottom: 0; }
  .tile-xl .tile-cta { display: none; }
  .tile-all .tile-icons { display: none; }
}

/* ---------- Карточка компании (сетка) ---------- */

.cards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1023px) {
  .cards-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .cards-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 264px;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
    scroll-padding: 0 var(--gutter);
  }
  .cards-row::-webkit-scrollbar { display: none; }
  .cards-row > * { scroll-snap-align: start; }
}

.ccard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.ccard-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-20);
  overflow: hidden;
  background: var(--surface);
}
.ccard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.ccard:hover .ccard-media img { transform: scale(1.04); }
.ccard-media .badge { position: absolute; left: 12px; top: 12px; }
.ccard-fav {
  position: absolute;
  right: 12px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-12);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
}
.ccard-fav.is-on .icon { fill: var(--accent); stroke: var(--accent); }

.ccard-body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ccard-body .logo-mark { margin-top: 4px; }
.ccard-name {
  font-family: var(--font-head);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ccard-cat {
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ccard-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--ink-2);
}
.ccard-text { min-width: 0; flex: 1; }

/* ---------- Свободные окна сегодня ---------- */

.slots-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.slot-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: var(--r-24);
  background: var(--surface);
}
.slot-card-head {
  display: flex;
  gap: 12px;
  align-items: center;
}
.slot-card-head .ccard-text { min-width: 0; }
.slot-times {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.time-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 72px;
  padding: 0 12px;
  border-radius: var(--r-12);
  background: var(--bg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.time-pill:hover { background: var(--accent); color: var(--on-accent); }

@media (max-width: 1023px) {
  .slots-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .slots-list { grid-template-columns: 1fr; gap: 8px; }
  .slot-card { padding: 16px; border-radius: var(--r-20); }
}

/* ---------- Бизнес-баннер ---------- */

.biz-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 40px;
  border-radius: var(--r-24);
  background: var(--accent-soft);
}
.biz-band h2 { color: var(--ink); }
.biz-band p { margin-top: 12px; color: var(--accent-ink); font-weight: 600; max-width: 480px; }
.biz-band form {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: var(--r-20);
  background: var(--bg);
}
.biz-band form .input-icon { flex: 1; min-width: 0; }
.biz-band form .input { background: transparent; }
.biz-band form .input:focus { box-shadow: none; }
.biz-steps {
  display: flex;
  gap: 24px;
  margin-top: 16px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--accent-ink);
}
.biz-steps span { display: inline-flex; align-items: center; gap: 4px; }

@media (max-width: 1023px) {
  .biz-band { grid-template-columns: 1fr; padding: 32px; }
}
@media (max-width: 767px) {
  .biz-band { padding: 20px; gap: 20px; border-radius: var(--r-20); }
  .biz-band form { flex-direction: column; }
  .biz-steps { flex-direction: column; gap: 8px; }
}

/* ---------- Подвал ---------- */

.footer {
  margin-top: 80px;
  padding: 40px 0 48px;
  background: var(--page);
}
.page-grey .footer { background: var(--bg); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer h4 { margin-bottom: 12px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a { color: var(--ink-2); font-weight: 600; }
.footer a:hover { color: var(--ink); }
.footer-note { margin-top: 12px; color: var(--ink-2); max-width: 320px; }
.footer-bottom { margin-top: 40px; color: var(--ink-3); font-size: 12px; line-height: 16px; font-weight: 600; }

@media (max-width: 767px) {
  .footer { margin-top: 56px; padding: 32px 0 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}

/* ---------- Хлебные крошки ---------- */

.crumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 16px 0 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--ink-3);
}
.crumbs a:hover { color: var(--ink); }
.crumbs .icon { width: 16px; height: 16px; }

/* ---------- Каталог ---------- */

.catalog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0 20px;
}
.catalog-head h1 sup {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--ink-3);
  vertical-align: top;
  margin-left: 8px;
}

.catalog-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin-top: 24px;
}

.filters {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.filter-group h2 { margin-bottom: 8px; font-size: 16px; line-height: 24px; font-weight: 600; }
.filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  font-weight: 600;
  cursor: pointer;
}

.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.results-bar .select { width: auto; height: 40px; font-weight: 700; }

.results { display: flex; flex-direction: column; gap: 12px; }

.rcard {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  padding: 12px;
  border-radius: var(--r-24);
  background: var(--bg);
  transition: background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.rcard:hover { box-shadow: var(--shadow-md); }
.rcard-media {
  position: relative;
  border-radius: var(--r-16);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 4 / 3;
}
.rcard-media img { width: 100%; height: 100%; object-fit: cover; }
.rcard-media .badge { position: absolute; left: 8px; top: 8px; }
.rcard-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 8px 4px 0;
  min-width: 0;
}
.rcard-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.rcard-name {
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}
.rcard-name:hover { color: var(--accent-ink); }
.rcard-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--ink-2);
}
.rcard-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.rcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}
.rcard-slots { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rcard-slots .time-pill { background: var(--surface); height: 32px; min-width: 64px; border-radius: var(--r-8); font-size: 12px; line-height: 16px; }
.rcard-slots .time-pill:hover { background: var(--accent); }
.rcard-price { font-weight: 800; white-space: nowrap; }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 64px 24px;
  border-radius: var(--r-24);
  background: var(--bg);
  text-align: center;
}
.empty .icon { width: 48px; height: 48px; color: var(--ink-3); stroke-width: 2; }

.mobile-filter-btn { display: none; }

@media (max-width: 1023px) {
  .catalog-layout { grid-template-columns: minmax(0, 1fr); }
  .filters { display: none; }
  .mobile-filter-btn { display: inline-flex; }
  .filters.is-open {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    top: auto;
    z-index: 80;
    max-height: 80vh;
    overflow-y: auto;
    padding: 24px var(--gutter) 24px;
    background: var(--bg);
    border-radius: var(--r-24) var(--r-24) 0 0;
    box-shadow: 0 -8px 24px rgba(19, 25, 21, 0.12);
  }
  .filters .sheet-actions { display: flex; }
}
.filters .sheet-actions { display: none; gap: 8px; position: sticky; bottom: 0; background: var(--bg); padding-top: 8px; }
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(19, 25, 21, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease);
}
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }

@media (max-width: 767px) {
  .catalog-head { padding-bottom: 16px; }
  .catalog-head h1 { min-width: 0; }
  .catalog-head h1 sup { font-size: 16px; line-height: 24px; margin-left: 4px; }
  .catalog-layout { margin-top: 16px; }
  .rcard { grid-template-columns: 1fr; gap: 12px; padding: 8px; border-radius: var(--r-20); }
  .rcard-media { aspect-ratio: 16 / 9; border-radius: var(--r-16); }
  .rcard-body { padding: 0 8px 8px; }
  .rcard-name { font-size: 16px; line-height: 24px; }
  .rcard-foot { flex-direction: column; align-items: stretch; }
  .rcard-foot .btn { width: 100%; }
}

/* ---------- Страница компании ---------- */

.gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 8px;
  margin-top: 16px;
  border-radius: var(--r-24);
  overflow: hidden;
}
.gallery a,
.gallery button {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface);
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.gallery a:hover img { transform: scale(1.03); }
.gallery > :first-child { grid-row: span 2; }
.gallery.g-1 { grid-template-columns: 1fr; }
.gallery.g-2 > :nth-child(2) { grid-row: span 2; }
.gallery .more-photos {
  position: absolute;
  inset: auto 12px 12px auto;
}

.company-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 376px;
  gap: 40px;
  align-items: start;
  margin-top: 32px;
}

.company-head {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.company-head h1 { margin-bottom: 4px; }
.company-sub {
  color: var(--ink-2);
  font-weight: 600;
}
.company-facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 0;
  margin-top: 12px;
  font-weight: 600;
  color: var(--ink-2);
}

.company-actions {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.about-card {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 16px;
  margin-top: 24px;
  padding: 20px;
  border-radius: var(--r-20);
  background: var(--surface);
}
.about-card img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--r-12); }
.about-card p { color: var(--ink-2); margin-top: 4px; }

.tabs {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  display: flex;
  gap: 4px;
  margin-top: 32px;
  padding: 8px 0;
  background: var(--bg);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-12);
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.tab:hover { color: var(--ink); background: var(--surface); }
.tab.is-active { color: var(--ink); background: var(--surface); }
.tab .count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border-radius: var(--r-8);
  background: var(--surface-hover);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
}

.csection { padding-top: 40px; }
.csection > h2 { margin-bottom: 16px; }
.csection-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.svc-group + .svc-group { margin-top: 24px; }
.svc-group h3 { margin-bottom: 8px; }

.svc {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-radius: var(--r-16);
  background: var(--surface);
}
.svc + .svc { margin-top: 4px; }
.svc-name { font-weight: 700; }
.svc-desc { margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--ink-2); font-weight: 600; }
.svc-price { font-weight: 800; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.svc-price small { display: block; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); }
.svc .btn.is-added { background: var(--accent); color: var(--on-accent); }

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.dish {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 12px;
  border-radius: var(--r-20);
  background: var(--surface);
}
.dish-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dish img,
.dish-ph { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-12); background: var(--surface-hover); }
.dish.no-img { grid-template-columns: minmax(0, 1fr); padding: 16px; }
.dish-name { font-weight: 700; }
.dish-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: 8px; }
.qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 4px;
  border-radius: var(--r-12);
  background: var(--bg);
}
.qty button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-8);
}
.qty button:hover { background: var(--surface); }
.qty span { min-width: 24px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }

.staff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.staff {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--r-20);
  background: var(--surface);
}
.staff-top { display: flex; gap: 12px; align-items: center; }
.staff-top .avatar { background: var(--bg); }
.staff-name { font-weight: 700; }
.staff-role { font-size: 12px; line-height: 16px; color: var(--ink-2); font-weight: 600; }
.staff .slot-times .time-pill { height: 32px; min-width: 64px; font-size: 12px; line-height: 16px; border-radius: var(--r-8); }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.photo-grid img { aspect-ratio: 1; object-fit: cover; border-radius: var(--r-16); width: 100%; }

.reviews-summary {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: center;
  padding: 24px;
  border-radius: var(--r-24);
  background: var(--surface);
}
.reviews-score {
  font-family: var(--font-head);
  font-size: 48px;
  line-height: 56px;
  font-weight: 800;
}
.bars { display: grid; gap: 8px; }
.bar-row {
  display: grid;
  grid-template-columns: 16px 1fr 40px;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--ink-2);
}
.bar {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-press);
  overflow: hidden;
}
.bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--star); }

.review {
  padding: 24px 0 8px;
}
.review-head { display: flex; gap: 12px; align-items: center; }
.review-name { font-weight: 700; }
.review-date { font-size: 12px; line-height: 16px; color: var(--ink-3); font-weight: 600; }
.review p { margin-top: 12px; color: var(--ink); }
.review-reply {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: var(--r-16);
  background: var(--surface);
  font-size: 16px;
  color: var(--ink-2);
}
.review-reply b { color: var(--ink); display: block; font-size: 12px; line-height: 16px; margin-bottom: 4px; }

.aside {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.panel {
  padding: 24px;
  border-radius: var(--r-24);
  background: var(--bg);
  box-shadow: var(--shadow-md);
}
.panel-flat {
  padding: 24px;
  border-radius: var(--r-24);
  background: var(--surface);
}
.panel h3 { margin-bottom: 4px; }
.panel .seg { margin: 16px 0; }

.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-12);
  background: var(--surface);
}
.seg button {
  height: 40px;
  border-radius: var(--r-8);
  font-weight: 700;
  color: var(--ink-2);
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.seg button.is-active {
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 4px 8px rgba(19, 25, 21, 0.06);
}

.selected-list { display: grid; gap: 8px; margin: 16px 0; }
.selected-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-12);
  background: var(--surface);
  font-weight: 600;
}
.selected-item b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.panel-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 16px 0;
  font-weight: 700;
}
.panel-total b { font-family: var(--font-head); font-size: 24px; line-height: 32px; font-variant-numeric: tabular-nums; }

.contact-list { display: grid; gap: 16px; }
.contact-item { display: flex; gap: 12px; align-items: flex-start; }
.contact-item .icon { color: var(--ink-3); margin-top: 0; }
.contact-item a { font-weight: 700; color: var(--accent-ink); }
.contact-item a:hover { color: var(--ink); }
.contact-item small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-2); font-weight: 600; }

.hours { display: grid; gap: 4px; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--ink-2); font-weight: 600; }
.hours div { display: flex; justify-content: space-between; gap: 16px; }
.hours .is-today { color: var(--ink); font-weight: 800; }

.mobile-cta { display: none; }

@media (max-width: 1023px) {
  .company-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .aside { position: static; margin-top: 40px; }
  .aside .panel-book { display: none; }
  .staff-grid { grid-template-columns: repeat(2, 1fr); }
  .menu-grid { grid-template-columns: minmax(0, 1fr); }
  .mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 65;
    display: flex;
    gap: 8px;
    padding: 12px var(--gutter);
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -4px 16px rgba(19, 25, 21, 0.08);
  }
  .mobile-cta .btn-primary { flex: 1; }
  body.has-mobile-cta { padding-bottom: 80px; }
  body.has-mobile-cta .tabbar { display: none; }
}

@media (max-width: 767px) {
  .gallery {
    display: flex;
    margin: 0 calc(var(--gutter) * -1);
    border-radius: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 4px;
    height: 264px;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery > * { flex: 0 0 88%; scroll-snap-align: start; }
  .gallery > :first-child { flex-basis: 100%; }
  .company-layout { margin-top: 0; }
  .company-head {
    position: relative;
    flex-direction: column;
    gap: 12px;
    margin-top: -40px;
  }
  .company-head .logo-mark.lg { width: 72px; height: 72px; box-shadow: 0 0 0 4px var(--bg); }
  .company-actions .btn-primary { flex: 1 0 100%; }
  .company-actions .btn-secondary { flex: 1; }
  .about-card { grid-template-columns: 1fr; padding: 16px; }
  .about-card img { display: none; }
  .menu-grid, .staff-grid { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-summary { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .svc { grid-template-columns: 1fr auto; }
  .svc .btn { grid-column: 1 / -1; }
  .tabs { margin: 24px calc(var(--gutter) * -1) 0; padding: 8px var(--gutter); }
  .csection { padding-top: 32px; }
}

/* ---------- Запись / бронирование ---------- */

.booking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 376px;
  gap: 40px;
  align-items: start;
  margin-top: 24px;
}

.step {
  padding: 24px;
  border-radius: var(--r-24);
  background: var(--bg);
}
.step + .step { margin-top: 12px; }
.step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.step-num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  font-family: var(--font-head);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--ink-2);
  flex: none;
}
.step.is-done .step-num { background: var(--accent); color: var(--on-accent); }
.step-head .step-value { margin-left: auto; color: var(--ink-2); font-weight: 600; font-size: 12px; line-height: 16px; text-align: right; }

.option-list { display: grid; gap: 8px; }
.option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: var(--r-16);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.option:hover { background: var(--surface-hover); }
.option.is-selected {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 4px var(--accent);
}
.option-main { flex: 1; min-width: 0; }
.option-title { font-weight: 700; }
.option-sub { font-size: 12px; line-height: 16px; color: var(--ink-2); font-weight: 600; margin-top: 4px; }
.star-inline { width: 12px; height: 12px; fill: var(--star); stroke: var(--star); vertical-align: middle; }
.option-price { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.option .avatar { background: var(--bg); }
.option-radio {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg);
  flex: none;
  display: grid;
  place-items: center;
}
.option.is-selected .option-radio { background: var(--accent); }
.option.is-selected .option-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-accent); }

.options-2 { grid-template-columns: 1fr 1fr; }

.dates {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.dates::-webkit-scrollbar { display: none; }
.date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 64px;
  height: 72px;
  flex: none;
  border-radius: var(--r-16);
  background: var(--surface);
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.date:hover { background: var(--surface-hover); }
.date small { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-2); text-transform: lowercase; }
.date b { font-family: var(--font-head); font-size: 20px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.date.is-weekend small { color: var(--danger); }
.date.is-selected { background: var(--ink); color: #FFFFFF; }
.date.is-selected small { color: rgba(255, 255, 255, 0.72); }
.date[disabled] { opacity: 0.4; cursor: not-allowed; }

.slot-group + .slot-group { margin-top: 16px; }
.slot-group h4 { font-size: 12px; line-height: 16px; color: var(--ink-2); margin-bottom: 8px; font-family: var(--font-text); font-weight: 700; }
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
.slot {
  height: 48px;
  border-radius: var(--r-12);
  background: var(--surface);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.slot:hover { background: var(--surface-hover); }
.slot.is-selected { background: var(--accent); color: var(--on-accent); }
.slot[disabled] {
  background: transparent;
  color: var(--ink-3);
  text-decoration: line-through;
  cursor: not-allowed;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-grid .span-2 { grid-column: 1 / -1; }

.summary-company { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; }
.summary-rows { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-16); background: var(--surface); }
.summary-row { display: flex; justify-content: space-between; gap: 16px; font-weight: 600; }
.summary-row span { color: var(--ink-2); }
.summary-row b { text-align: right; font-variant-numeric: tabular-nums; }
.summary-row b.is-empty { color: var(--ink-3); font-weight: 600; }
.summary-note { margin-top: 12px; font-size: 12px; line-height: 16px; color: var(--ink-3); font-weight: 600; text-align: center; }

.counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: var(--r-12);
  background: var(--surface);
}
.counter button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-8);
  background: var(--bg);
}
.counter button:disabled { opacity: 0.4; cursor: not-allowed; }
.counter span { min-width: 32px; text-align: center; font-family: var(--font-head); font-size: 20px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }

.success {
  max-width: 560px;
  margin: 48px auto 0;
  text-align: center;
}
.success-icon {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.success-icon .icon { width: 40px; height: 40px; stroke-width: 2; }
.success p { margin-top: 8px; color: var(--ink-2); }
.ticket {
  margin-top: 32px;
  padding: 24px;
  border-radius: var(--r-24);
  background: var(--bg);
  text-align: left;
}
.ticket-num {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  font-weight: 700;
  color: var(--ink-2);
}
.ticket-num b { font-family: var(--font-head); font-size: 20px; line-height: 28px; color: var(--ink); font-variant-numeric: tabular-nums; }
.success-actions { display: flex; gap: 8px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

@media (max-width: 1023px) {
  .booking-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .booking-layout .aside { position: static; margin-top: 0; }
}

@media (max-width: 767px) {
  .step { padding: 16px; border-radius: var(--r-20); }
  .options-2 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .success { margin-top: 24px; }
  .ticket { padding: 20px; }
}

/* ---------- Кабинет компании ---------- */

.cab {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  min-height: 100vh;
}

.cab-side {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 20px 16px 24px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cab-company {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--r-20);
  background: var(--surface);
}
.cab-company-top { display: flex; gap: 12px; align-items: center; }
.cab-company-name { font-weight: 800; line-height: 20px; }
.cab-company-addr { font-size: 12px; line-height: 16px; color: var(--ink-2); font-weight: 600; margin-top: 4px; }
.progress {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-press);
  overflow: hidden;
}
.progress i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
  width: 100%;
  transform-origin: left center;
  transition: transform 600ms var(--ease);
}
.progress-label { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-2); }

.cab-nav { display: grid; gap: 4px; }
.cab-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r-12);
  font-weight: 600;
  color: var(--ink-2);
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.cab-nav a:hover { background: var(--surface); color: var(--ink); }
.cab-nav a.is-active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.cab-nav a .icon { width: 20px; height: 20px; }
.cab-nav .sub { padding-left: 44px; height: 36px; }
.cab-nav .badge { margin-left: auto; }
.cab-nav-label { padding: 12px 12px 4px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-3); }

.cab-main {
  background: var(--page);
  padding: 24px 32px 64px;
  min-width: 0;
}
.cab-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.cab-topbar-actions { display: flex; gap: 8px; align-items: center; }
.save-state { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; }
.save-state.is-dirty { color: var(--ink-2); }

.cab-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}
.cab-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }

.card {
  padding: 24px;
  border-radius: var(--r-24);
  background: var(--bg);
}
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.card-head p { margin-top: 4px; color: var(--ink-2); font-size: 16px; }
.card-stack { display: grid; gap: 12px; }

.import-card { box-shadow: inset 0 0 0 4px var(--accent-soft); }
.import-form { display: flex; gap: 8px; }
.import-form .input-icon { flex: 1; min-width: 0; }
.import-form .input { height: 56px; border-radius: var(--r-16); }
.import-form .btn { height: 56px; border-radius: var(--r-16); }

.import-progress { display: grid; gap: 12px; margin-top: 20px; }
.import-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--ink-3);
  transition: color 200ms var(--ease);
}
.import-step .st {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface);
  flex: none;
}
.import-step.is-active { color: var(--ink); }
.import-step.is-active .st::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 4px solid var(--accent-soft-hover);
  border-top-color: var(--accent-ink);
  animation: spin 720ms linear infinite;
}
.import-step.is-done { color: var(--ink); }
.import-step.is-done .st { background: var(--accent); color: var(--on-accent); }
.import-step.is-done .st .icon { width: 16px; height: 16px; stroke-width: 3; }

.import-result { margin-top: 20px; }
.import-found {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.found-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-16);
  background: var(--surface);
  cursor: pointer;
}
.found-item .check { min-height: 24px; }
.found-item b { display: block; font-weight: 700; }
.found-item small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.found-item > div { min-width: 0; }
.import-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.import-hint { margin-top: 12px; font-size: 12px; line-height: 16px; color: var(--ink-3); font-weight: 600; }

.action-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.action-type {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-16);
  background: var(--surface);
  cursor: pointer;
}
.action-type .ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-12);
  background: var(--bg);
  color: var(--ink-2);
  flex: none;
}
.action-type b { display: block; font-weight: 700; }
.action-type small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-2); font-weight: 600; }
.action-type > div { flex: 1; min-width: 0; }
.action-type:has(input:checked) .ico { background: var(--accent-soft); color: var(--accent-ink); }

.primary-pick { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.primary-pick:empty { display: none; }

.social-list { display: grid; gap: 8px; }
.social-row { display: flex; gap: 8px; align-items: center; }
.social-row .float { flex: 1; }
.social-row .float .icon { position: absolute; left: 16px; top: 16px; color: var(--ink-3); }
.social-row .float > span { left: 56px; }
.social-row .float > .input { padding-left: 56px; }

.catalog-table { display: grid; gap: 4px; }
.catalog-table .row {
  display: grid;
  grid-template-columns: 1fr 120px 120px 40px;
  gap: 12px;
  align-items: center;
  min-height: 56px;
  padding: 8px 16px;
  border-radius: var(--r-12);
  background: var(--surface);
  font-weight: 600;
}
.catalog-table .row.head { background: transparent; min-height: 32px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-3); }
.catalog-table .row span:nth-child(2),
.catalog-table .row span:nth-child(3) { font-variant-numeric: tabular-nums; }
.catalog-table .row span:nth-child(3) { text-align: right; font-weight: 800; }
.catalog-table .row.head span:nth-child(3) { font-weight: 700; }
.catalog-table .row.is-new { animation: rowIn 600ms var(--ease) both; }
@keyframes rowIn { from { background: var(--accent-soft); } to { background: transparent; } }

.preview {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.preview-cap { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); text-align: center; }

.phone {
  width: 320px;
  margin: 0 auto;
  padding: 12px;
  border-radius: 48px;
  background: #DDE3E0;
}
.phone-screen {
  position: relative;
  height: 600px;
  overflow: hidden;
  border-radius: 36px;
  background: var(--bg);
}
.phone-cover { height: 176px; background: var(--surface); position: relative; }
.phone-cover img { width: 100%; height: 100%; object-fit: cover; }
.phone-cover .badge { position: absolute; right: 12px; bottom: 28px; }
.phone-sheet {
  position: relative;
  margin-top: -20px;
  padding: 20px 16px 16px;
  border-radius: 20px 20px 0 0;
  background: var(--bg);
}
.phone-sheet::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 32px;
  height: 4px;
  margin-left: -16px;
  border-radius: 4px;
  background: var(--surface-press);
}
.phone-sheet .logo-mark { position: absolute; top: -44px; left: 16px; box-shadow: 0 0 0 4px var(--bg); }
.phone-name { font-family: var(--font-head); font-size: 20px; line-height: 28px; font-weight: 700; margin-top: 12px; }
.phone-cat { font-size: 12px; line-height: 16px; color: var(--ink-2); font-weight: 600; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; line-height: 16px; font-weight: 700; }
.phone-actions { display: flex; gap: 8px; margin-top: 16px; }
.phone-actions .btn { height: 40px; font-size: 12px; line-height: 16px; border-radius: var(--r-12); }
.phone-actions .btn-primary { flex: 1; padding: 0 8px; }
.phone-actions .btn-secondary { width: 40px; padding: 0; }
.phone-about { margin-top: 16px; padding: 12px; border-radius: var(--r-12); background: var(--surface); font-size: 12px; line-height: 16px; color: var(--ink-2); font-weight: 600; }
.phone-about b { display: block; color: var(--ink); font-size: 12px; margin-bottom: 4px; }
.phone-tabs { display: flex; gap: 4px; margin-top: 16px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-2); }
.phone-tabs span { padding: 4px 8px; border-radius: var(--r-8); }
.phone-tabs span:first-child { color: var(--ink); background: var(--surface); }
.phone-svc { display: grid; gap: 8px; margin-top: 12px; }
.phone-svc div { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 600; }
.phone-svc b { white-space: nowrap; }

.cab-mobile-bar { display: none; }

@media (max-width: 1279px) {
  .cab-grid { grid-template-columns: minmax(0, 1fr); }
  .preview { position: static; order: -1; display: none; }
  .preview.is-open { display: flex; }
}

@media (max-width: 1023px) {
  .cab { grid-template-columns: minmax(0, 1fr); }
  .cab-side {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 90;
    width: 296px;
    transform: translateX(-100%);
    transition: transform 280ms var(--ease);
    box-shadow: 8px 0 24px rgba(19, 25, 21, 0.12);
  }
  .cab-side.is-open { transform: none; }
  .cab-mobile-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 64px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.96);
  }
  .cab-main { padding: 20px 24px 64px; }
}

@media (max-width: 767px) {
  .cab-main { padding: 16px 16px 48px; }
  .card { padding: 20px 16px; border-radius: var(--r-20); }
  .import-form { flex-direction: column; }
  .import-found, .action-types { grid-template-columns: minmax(0, 1fr); }
  .catalog-table .row { grid-template-columns: 1fr 96px 32px; }
  .catalog-table .row span:nth-child(2) { display: none; }
  .cab-topbar { flex-wrap: wrap; }
  /* Кнопки сохранения и публикации переносятся, а не распирают страницу */
  .cab-topbar-actions { flex-wrap: wrap; width: 100%; min-width: 0; }
  .cab-topbar-actions .save-state { flex: 1 0 100%; }
  .phone { width: 296px; }
}

/* ---------- Тост ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  border-radius: var(--r-16);
  background: var(--ink);
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  transform: translate(-50%, 24px);
  opacity: 0;
  pointer-events: none;
  transition: transform 320ms var(--ease), opacity 320ms var(--ease);
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.toast .icon { color: var(--accent); }

@media (max-width: 767px) {
  .toast { bottom: 88px; }
}

/* ---------- Появление ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise 600ms var(--ease) both; }
  .reveal-2 { animation-delay: 60ms; }
  .reveal-3 { animation-delay: 120ms; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
  html { scroll-behavior: auto; }
}

.float.is-imported:has(select)::after { right: 48px; }
.svc .btn-secondary { background: var(--bg); }
.svc .btn-secondary:hover { background: var(--surface-press); }
@media (max-width: 767px) {
  .svc .btn { grid-column: auto; justify-self: start; }
  .svc { grid-template-columns: 1fr auto; row-gap: 12px; }
}

/* ---------- Выбор города ---------- */

.city-btn span {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.city-panel {
  position: fixed;
  z-index: 90;
  display: none;
  flex-direction: column;
  gap: 16px;
  width: 640px;
  max-height: calc(100vh - 96px);
  padding: 24px;
  border-radius: var(--r-24);
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(19, 25, 21, 0.12);
}
.city-panel.is-open { display: flex; }
.city-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -8px -8px -4px 0; }

.city-detect {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-16);
  background: var(--accent-soft);
  color: var(--accent-ink);
  text-align: left;
  transition: background-color 160ms var(--ease);
}
.city-detect:hover { background: var(--accent-soft-hover); }
.city-detect b { display: block; font-weight: 700; }
.city-detect small { display: block; font-size: 12px; line-height: 16px; font-weight: 600; }
.city-detect.is-error small { color: var(--danger); }
.city-detect[disabled] { cursor: progress; }

.city-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  columns: 3;
  column-gap: 8px;
  margin: 0 -8px;
  padding: 0 8px;
}
.city-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--r-12);
  font-weight: 600;
  text-align: left;
  break-inside: avoid;
  transition: background-color 160ms var(--ease);
}
.city-item:hover { background: var(--surface); }
.city-item.is-active { color: var(--accent-ink); font-weight: 800; }
.city-item mark { background: none; color: var(--accent-ink); font-weight: 800; }
.city-empty { column-span: all; padding: 16px 12px; color: var(--ink-2); }

.city-ask {
  position: fixed;
  z-index: 85;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 320px;
  padding: 16px;
  border-radius: var(--r-20);
  background: var(--bg);
  box-shadow: var(--shadow-md);
  animation: rise 320ms var(--ease) both;
}
.city-ask p { font-weight: 600; }
.city-ask-actions { display: flex; gap: 8px; }
.city-ask-actions .btn { flex: 1; }

@media (max-width: 767px) {
  .city-btn span { max-width: 120px; }
  .city-panel {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-height: 88vh;
    padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
    border-radius: var(--r-24) var(--r-24) 0 0;
  }
  .city-list { columns: 1; }
  .city-ask { left: 16px; right: 16px; top: calc(var(--header-h) + 8px); width: auto; }
}

/* ---------- Регистрация и вход ---------- */

.auth {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  max-width: 1088px;
  margin: 32px auto 0;
}

.auth-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 32px;
  border-radius: var(--r-24);
  background: var(--bg);
}
.auth-card h1 { font-size: 32px; line-height: 40px; }
.auth-sub { margin-top: 8px; color: var(--ink-2); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-note {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-16);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}
.auth-note .icon { color: var(--ink-3); }
.field-hint { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); }
.field-ok { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 4px; }
.auth-consent { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-2); align-items: flex-start; min-height: 24px; }
.auth-consent a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 4px; }
.auth-switch { text-align: center; color: var(--ink-2); font-weight: 600; }
.auth-switch button { color: var(--accent-ink); font-weight: 700; }
.auth-switch button:hover { color: var(--ink); }
.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  height: 32px;
  margin: -8px 0 -8px -8px;
  padding: 0 8px;
  border-radius: var(--r-8);
  font-weight: 700;
  color: var(--ink-2);
}
.auth-back:hover { background: var(--surface); color: var(--ink); }

.otp { display: flex; gap: 12px; }
.otp input {
  width: 64px;
  height: 72px;
  border: 0;
  border-radius: var(--r-16);
  background: var(--surface);
  text-align: center;
  font-family: var(--font-head);
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  caret-color: var(--ink);
  transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.otp input:focus { outline: none; background: var(--bg); box-shadow: inset 0 0 0 4px var(--accent); }
.otp.is-error input { background: var(--danger-soft); }
.otp.is-ok input { background: var(--accent-soft); color: var(--accent-ink); }
.otp-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); }
.otp-meta button { color: var(--accent-ink); font-weight: 700; }
.otp-meta button[disabled] { color: var(--ink-3); cursor: default; }

.auth-side {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px;
  border-radius: var(--r-24);
  background: var(--accent-soft);
  overflow: hidden;
}
.auth-side h2 { color: var(--ink); max-width: 400px; }
.auth-perks { display: grid; gap: 16px; position: relative; z-index: 1; }
.auth-perk { display: flex; gap: 16px; align-items: flex-start; max-width: 360px; }
.auth-perk .ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--r-16);
  background: var(--bg);
  color: var(--accent-ink);
}
.auth-perk b { display: block; color: var(--ink); font-weight: 700; }
.auth-perk span { display: block; color: var(--accent-ink); font-size: 12px; line-height: 16px; font-weight: 600; margin-top: 4px; }
.auth-side img {
  align-self: flex-end;
  width: 240px;
  height: 240px;
  margin: auto -16px -24px 0;
  object-fit: contain;
}

@media (max-width: 1023px) {
  .auth { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .auth-side { display: none; }
}

@media (max-width: 767px) {
  .auth { margin-top: 16px; }
  .auth-card { padding: 24px 16px; border-radius: var(--r-20); gap: 16px; }
  .auth-card h1 { font-size: 28px; line-height: 36px; }
  .otp { gap: 8px; }
  .otp input { width: 56px; height: 64px; font-size: 28px; line-height: 36px; }
}

.float:has(.is-error) { background: var(--danger-soft); }
.float:has(.is-error):focus-within { background: var(--bg); box-shadow: inset 0 0 0 4px var(--danger-soft); }

/* Постоянные места на главной */
.slot-card-head .place-fav { position: static; margin-left: auto; flex: none; background: var(--bg); }
.slot-card-head a.ccard-text:hover .ccard-name { color: var(--accent-ink); }
.place-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: -4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--ink-2);
}
.place-hint.is-due { color: var(--accent-ink); }
.gallery.g-1 { grid-template-rows: 320px; }
.gallery.g-1 > :first-child { grid-row: auto; }
@media (max-width: 767px) { .gallery.g-1 > * { flex-basis: 100%; } }

/* ==========================================================================
   Рабочая версия: состояния без данных, запись, кабинет
   ========================================================================== */

.home-sub { margin: -8px 0 20px; color: var(--ink-2); font-size: 16px; line-height: 24px; font-weight: 600; }

.empty-city {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px;
  border-radius: var(--r-24);
  background: var(--surface);
}
.empty-city h2 { margin-bottom: 8px; }
.empty-city p { max-width: 560px; }
.empty-city-actions { display: flex; gap: 8px; flex: none; }

.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.how-step { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: var(--r-20); background: var(--surface); }
.how-step b { display: block; font-weight: 700; }
.how-step span:not(.how-ico) { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-2); }
.how-ico { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: var(--r-16); background: var(--accent-soft); color: var(--accent-ink); }
.how-note { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-2); }
.how-note .icon { color: var(--accent-ink); }

.photo-empty { display: grid; place-items: center; width: 100%; height: 100%; background: var(--surface); }
.verified { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; background: var(--accent); color: var(--on-accent); vertical-align: middle; }
.verified .icon { width: 12px; height: 12px; }

.rcard-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rcard-desc { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.company-layout.no-gallery { margin-top: 16px; }
.draft-note { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 12px 16px; border-radius: var(--r-16); background: var(--warn-soft); font-weight: 600; flex-wrap: wrap; }
.draft-note a { color: var(--accent-ink); font-weight: 700; margin-left: auto; }
.socials { display: flex; gap: 8px 16px; flex-wrap: wrap; }
.socials a { font-weight: 700; color: var(--accent-ink); }

.trust-line { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--accent-ink); }
.trust-line .icon { color: var(--accent-ink); }
.opt { font-family: var(--font-text); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); margin-left: 4px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.link { color: var(--accent-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

.booking-bar { display: none; }
@media (max-width: 1023px) {
  .booking-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 66;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px var(--gutter);
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -4px 16px rgba(19, 25, 21, 0.08);
  }
  .booking-bar .btn { flex: 1; }
  .booking-bar-sum { display: flex; flex-direction: column; flex: none; }
  .booking-bar-sum small { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-2); }
  .booking-bar-sum b { font-family: var(--font-head); font-size: 20px; line-height: 28px; font-variant-numeric: tabular-nums; }
  body:has(.booking-bar) { padding-bottom: 96px; }
  body:has(.booking-bar) .tabbar { display: none; }
}

.stars-input { display: flex; gap: 4px; }
.stars-input button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-12); color: var(--surface-press); }
.stars-input button .icon { fill: currentColor; stroke: none; width: 28px; height: 28px; }
.stars-input button.is-on { color: var(--star); }
.review-form, .reply-form { display: grid; gap: 12px; margin-top: 12px; justify-items: start; }
.review-form .float, .reply-form .float { width: 100%; }

.auth-benefit { display: none; align-items: center; gap: 4px; margin-top: 8px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--accent-ink); }
@media (max-width: 1023px) { .auth-benefit { display: flex; } }

/* Кабинет */
.cab-topbar > div:first-child { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.status-badge { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface-press); font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-2); }
.status-badge.is-on { background: var(--accent-soft); color: var(--accent-ink); }
.missing-note { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; padding: 12px 16px; border-radius: var(--r-16); background: var(--warn-soft); font-weight: 600; }
.cab-side-foot { display: grid; gap: 4px; margin-top: auto; }

.photo-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; }
.photo-tile { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-16); overflow: hidden; background: var(--surface); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile .badge { position: absolute; left: 8px; top: 8px; }
.photo-del { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-8); background: rgba(255, 255, 255, 0.92); color: var(--danger); }
.photo-cover { position: absolute; left: 8px; bottom: 8px; height: 24px; padding: 0 8px; border-radius: var(--r-8); background: rgba(255, 255, 255, 0.92); font-size: 12px; line-height: 16px; font-weight: 700; opacity: 0; transition: opacity 160ms var(--ease); }
.photo-tile:hover .photo-cover, .photo-cover:focus-visible { opacity: 1; }
.photo-empty-drop { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 16px; border-radius: var(--r-16); background: var(--surface); color: var(--ink-2); font-weight: 600; text-align: center; cursor: pointer; }
.photo-empty-drop:hover { background: var(--surface-hover); }

.svc-editor { display: grid; gap: 4px; }
.svc-ed-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 80px 104px 40px 40px; gap: 8px; align-items: center; }
.svc-ed-row.head { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-3); padding: 0 4px; }
.svc-ed-row .input { height: 40px; padding: 0 12px; }
.svc-ed-row .check { min-height: 40px; justify-content: center; }
.staff-editor { display: grid; gap: 8px; }
.staff-ed-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 8px; align-items: center; }

.bk-list { display: grid; gap: 8px; }
.bk-item { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; padding: 20px; border-radius: var(--r-20); background: var(--bg); }
.bk-main { display: grid; gap: 8px; min-width: 0; }
.bk-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bk-what { font-weight: 700; }
.bk-client { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-2); }
.bk-client a { color: var(--accent-ink); font-weight: 700; }
.bk-comment { padding: 8px 12px; border-radius: var(--r-12); background: var(--surface); color: var(--ink-2); }
.bk-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: none; }

@media (max-width: 1023px) {
  .how { grid-template-columns: minmax(0, 1fr); }
  .empty-city { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px) {
  .home-sub { margin: -8px 0 16px; }
  .empty-city { padding: 20px; border-radius: var(--r-20); }
  .empty-city-actions { width: 100%; flex-direction: column; }
  .svc-ed-row { grid-template-columns: minmax(0, 1fr) 96px 40px; padding: 8px; border-radius: var(--r-12); background: var(--surface); }
  .svc-ed-row.head { display: none; }
  .svc-ed-row [data-svc="groupName"], .svc-ed-row [data-svc="durationMin"], .svc-ed-row .check { display: none; }
  .bk-item { flex-direction: column; padding: 16px; }
  .bk-actions { justify-content: flex-start; }
  .staff-ed-row { grid-template-columns: minmax(0, 1fr) 40px; }
}

/* Документы */
.doc { max-width: 808px; padding-top: 32px; }
.doc h1 { margin-bottom: 8px; }
.doc h2 { margin: 32px 0 12px; font-size: 20px; line-height: 28px; }
.doc p, .doc li { color: var(--ink); line-height: 24px; }
.doc p + p { margin-top: 12px; }
.doc ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.doc a { color: var(--accent-ink); font-weight: 700; }
[data-fill] { padding: 0 4px; border-radius: 4px; background: var(--warn-soft); }

/* Атрибут hidden всегда скрывает, даже если у элемента задан display */
[hidden] { display: none !important; }

/* Обзор разделов в каталоге */
.all-sections {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.sec-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: var(--r-20);
  background: var(--bg);
}
.sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  text-align: left;
  color: var(--ink);
}
.sec-head > .icon:last-child { margin-left: auto; color: var(--ink-3); transition: transform 160ms var(--ease); }
.sec-head:hover > .icon:last-child { transform: translateX(4px); color: var(--accent-ink); }
.sec-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-12);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.sec-name { font-family: var(--font-head); font-size: 16px; line-height: 20px; font-weight: 700; }
.sec-count { margin-left: 4px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-3); }
.sec-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sec-cats button {
  display: block;
  width: 100%;
  padding: 4px 0;
  text-align: left;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--ink-2);
}
.sec-cats button:hover { color: var(--accent-ink); }
.sec-cats .num { color: var(--ink-3); font-size: 12px; }
.sec-more { align-self: flex-start; margin-top: auto; padding: 4px 0; font-weight: 700; color: var(--accent-ink); }

@media (max-width: 1279px) { .all-sections { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .all-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .all-sections { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 16px; }
  .sec-card { border-radius: var(--r-16); }
}
.empty-city .btn-secondary { background: var(--bg); }
.empty-city .btn-secondary:hover { background: var(--surface-hover); }

/* Картинка раздела вместо иконки — как мини-объекты на плитке главной */
.sec-ico { width: 56px; height: 56px; border-radius: var(--r-16); background: var(--surface); }
.sec-ico img { width: 48px; height: 48px; object-fit: contain; transition: transform 400ms var(--ease); }
.sec-head:hover .sec-ico img { transform: translateY(-4px) scale(1.04); }

/* 3D-картинки в шагах «Как это работает» и в плашке для бизнеса */
.how-ico { width: 64px; height: 64px; background: var(--bg); border-radius: var(--r-16); }
.how-ico img { width: 56px; height: 56px; object-fit: contain; }
.biz-band { grid-template-columns: 176px minmax(0, 1fr) minmax(0, 1fr); }
.biz-art { width: 176px; height: 176px; object-fit: contain; align-self: center; }
@media (max-width: 1023px) {
  .biz-band { grid-template-columns: 136px minmax(0, 1fr); }
  .biz-band > div:last-child { grid-column: 1 / -1; }
  .biz-art { width: 136px; height: 136px; }
}
@media (max-width: 767px) {
  .biz-band { grid-template-columns: minmax(0, 1fr); }
  .biz-art { width: 120px; height: 120px; margin: -8px 0 -8px -8px; }
  .how-ico { width: 56px; height: 56px; }
  .how-ico img { width: 48px; height: 48px; }
}
.biz-steps { flex-wrap: wrap; gap: 8px 20px; }
.biz-steps span { white-space: nowrap; }

/* Витрина в плашке бизнеса — крупнее */
.biz-band { grid-template-columns: 224px minmax(0, 1fr) minmax(0, 1fr); }
.biz-art { width: 224px; height: 224px; margin: -24px 0; }
@media (max-width: 1023px) {
  .biz-band { grid-template-columns: 176px minmax(0, 1fr); }
  .biz-art { width: 176px; height: 176px; margin: -16px 0; }
}
@media (max-width: 767px) {
  .biz-band { grid-template-columns: minmax(0, 1fr); }
  .biz-art { width: 160px; height: 160px; margin: -16px 0 -8px -8px; }
}

/* ---------- Сторис компании ---------- */
.stories {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.stories::-webkit-scrollbar { display: none; }
/* Ряд стоит под вкладками, над «Коротко о месте» */
.stories-tabs { margin: 0 0 16px; }
.story {
  position: relative;
  flex: 0 0 128px;
  height: 176px;
  padding: 0;
  border-radius: var(--r-16);
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  transition: transform 200ms var(--ease);
}
.story:hover { transform: translateY(-4px); }
.story img,
.story video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.story-title {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 4px 8px;
  border-radius: var(--r-8);
  background: rgba(19, 25, 21, 0.72);
  color: #FFFFFF;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-align: left;
}
.story-kind {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: rgba(19, 25, 21, 0.72);
  color: #FFFFFF;
}
@media (max-width: 767px) {
  .stories { margin: 0 calc(var(--gutter) * -1) 16px; padding: 0 var(--gutter); gap: 8px; }
  .story { flex-basis: 120px; height: 168px; }
  .story-title { left: 4px; right: 4px; bottom: 4px; }
}

/* Полноэкранный просмотр */
html.sv-open { overflow: hidden; }
.sv {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: #0B0F0D;
  animation: sv-in 200ms var(--ease);
}
@keyframes sv-in { from { opacity: 0; } }
.sv-stage { display: flex; align-items: center; justify-content: center; gap: 24px; width: 100%; height: 100%; }
.sv-frame {
  position: relative;
  height: min(800px, calc(100vh - 48px));
  aspect-ratio: 9 / 16;
  border-radius: var(--r-24);
  overflow: hidden;
  background: #000000;
  color: #FFFFFF;
  touch-action: manipulation;
  user-select: none;
}
.sv-media,
.sv-media img,
.sv-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-top { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 3; display: grid; gap: 8px; padding: 8px; border-radius: var(--r-16); background: rgba(19, 25, 21, 0.4); }
.sv-bars { display: flex; gap: 4px; }
.sv-bar { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.4); overflow: hidden; }
.sv-bar i { display: block; width: 0; height: 100%; background: #FFFFFF; }
.sv-head { display: flex; align-items: center; gap: 8px; }
.sv:focus { outline: none; }
.sv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; }
.sv-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
}
.sv-btn:hover { background: rgba(255, 255, 255, 0.28); }
.sv-tap { position: absolute; top: 96px; bottom: 120px; z-index: 2; background: transparent; }
.sv-tap-prev { left: 0; width: 32%; }
.sv-tap-next { right: 0; width: 68%; }
.sv-foot { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; display: grid; gap: 8px; }
.sv-title {
  justify-self: start;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: var(--r-12);
  background: rgba(19, 25, 21, 0.72);
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 28px;
  font-weight: 800;
}
.sv-arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.sv-arrow:hover { background: rgba(255, 255, 255, 0.24); }
.sv-arrow:disabled { opacity: 0.32; pointer-events: none; }
@media (max-width: 767px) {
  .sv-stage { gap: 0; }
  .sv-frame { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
  .sv-arrow { display: none; }
  .sv-top { top: calc(8px + env(safe-area-inset-top)); }
  .sv-foot { left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* ---------- Услуги с группами ---------- */
.svc-layout {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.svc-nav {
  position: sticky;
  top: calc(var(--header-h) + 72px);
  display: grid;
  gap: 4px;
  max-height: calc(100vh - var(--header-h) - 96px);
  overflow-y: auto;
  scrollbar-width: none;
}
.svc-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 4px 12px 4px 4px;
  border-radius: var(--r-16);
  font-weight: 700;
  color: var(--ink-2);
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.svc-nav-item:hover,
.svc-nav-item.is-active { background: var(--surface); color: var(--ink); }
.svc-nav-ico {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: var(--r-12);
  background: var(--surface);
  color: var(--ink-3);
}
.svc-nav-item.is-active .svc-nav-ico,
.svc-nav-item:hover .svc-nav-ico { background: var(--bg); }
.svc-nav-ico img { width: 40px; height: 40px; object-fit: contain; }
.svc-nav-name { flex: 1; min-width: 0; line-height: 20px; }
.svc-nav-item .num { font-size: 12px; line-height: 16px; }
.svc-group { scroll-margin-top: calc(var(--header-h) + 72px); }
.svc-tiles { display: none; }

.svc.has-img { grid-template-columns: 72px minmax(0, 1fr) auto auto; padding: 12px 16px 12px 12px; }
.svc-img { width: 72px; height: 72px; padding: 4px; border-radius: var(--r-12); background: var(--bg); object-fit: contain; }
.svc-text { min-width: 0; }
.svc-about { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.svc-text .svc-desc { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.svc { scroll-margin-top: calc(var(--header-h) + 72px); transition: box-shadow 200ms var(--ease); }
.svc.is-flash,
.dish.is-flash { box-shadow: 0 0 0 4px var(--accent); }

/* Меню и каталог — карточки с картинкой сверху */
.menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dish { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 12px; align-items: stretch; padding: 8px 8px 12px; }
.dish.no-img { grid-template-rows: 1fr; }
.dish-media { display: block; aspect-ratio: 1; border-radius: var(--r-16); background: var(--bg); overflow: hidden; }
.dish .dish-media img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; background: none; }
.dish-body { padding: 0 4px; height: 100%; }
.dish .svc-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 1023px) {
  .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .svc-layout { grid-template-columns: minmax(0, 1fr); }
  .svc-nav { display: none; }
  .svc-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 24px;
  }
  .svc-tile {
    position: relative;
    aspect-ratio: 1;
    padding: 8px;
    border-radius: var(--r-16);
    background: var(--surface);
    overflow: hidden;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    color: var(--ink);
  }
  .svc-tile span { position: relative; z-index: 1; display: block; overflow-wrap: anywhere; }
  .svc-tile img { position: absolute; right: -4px; bottom: -4px; width: 68%; height: 68%; object-fit: contain; }
  .svc-tile:active { background: var(--surface-hover); }
  .svc.has-img { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: start; }
  .svc-img { width: 64px; height: 64px; }
  .svc.has-img .btn { grid-column: 2 / -1; }
  .svc.has-img > span:last-child { display: none; }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dish-foot { flex-wrap: wrap; }
}

/* ---------- Кабинет: картинки услуг и сторис ---------- */
.svc-ed-row { grid-template-columns: 40px minmax(0, 2fr) minmax(0, 1fr) 80px 104px 40px 40px; }
.svc-ed-row:not(.head) { padding: 8px; border-radius: var(--r-12); background: var(--surface); }
.svc-ed-row:not(.head) .input { background: var(--bg); }
.svc-ed-row .svc-ed-desc { grid-column: 2 / -1; }
.svc-ed-img {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-8);
  background: var(--bg);
  color: var(--ink-3);
  cursor: pointer;
  overflow: hidden;
  transition: background-color 160ms var(--ease);
}
.svc-ed-img:hover { background: var(--accent-soft); color: var(--ink); }
.svc-ed-img img { width: 36px; height: 36px; object-fit: contain; }

button.photo-empty-drop { width: 100%; font: inherit; }
.story-ed-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px; }
.story-ed {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  padding: 8px;
  border-radius: var(--r-16);
  background: var(--surface);
}
.story-ed-media {
  position: relative;
  width: 72px;
  height: 128px;
  border-radius: var(--r-12);
  overflow: hidden;
  background: var(--surface-hover);
}
.story-ed-media img,
.story-ed-media video { width: 100%; height: 100%; object-fit: cover; }
.story-ed-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 4px 0; }
.story-ed-body b { overflow-wrap: anywhere; }
.story-ed-body small { font-size: 12px; line-height: 16px; color: var(--ink-2); font-weight: 600; overflow-wrap: anywhere; }
.story-ed-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.story-form {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 16px;
  padding: 16px;
  border-radius: var(--r-20);
  background: var(--surface);
}
.story-form .input,
.story-form .select { background: var(--bg); }
.story-pick {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  width: 160px;
  height: 284px;
  padding: 12px;
  border: 4px dashed var(--line);
  background: var(--bg);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.story-pick:hover { border-color: var(--accent); }
.story-pick.has-media { padding: 0; border: 0; }
.story-pick.has-media img,
.story-pick.has-media video { position: absolute; inset: 0; }
.story-form-acts { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 767px) {
  .svc-ed-row { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) 40px; }
  .svc-ed-row [data-svc="name"] { grid-column: 2 / 4; grid-row: 1; }
  .svc-ed-row [data-del-svc] { grid-column: 4; grid-row: 1; }
  .svc-ed-row [data-svc="groupName"] { display: block; grid-column: 1 / 3; grid-row: 2; }
  .svc-ed-row [data-svc="price"] { grid-column: 3 / 5; grid-row: 2; }
  .svc-ed-row .svc-ed-desc { grid-column: 1 / -1; grid-row: 3; }
  .story-form { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .story-pick { width: 128px; height: 228px; }
  .story-ed-list { grid-template-columns: minmax(0, 1fr); }
}

/* Заголовок карточки кабинета на телефоне: текст на всю ширину, кнопка под ним */
@media (max-width: 767px) {
  .card-head { flex-wrap: wrap; gap: 12px; }
  .card-head > div:first-child { flex: 1 1 100%; }
  .card-head p { font-size: 14px; line-height: 20px; }
}

/* Монохромные 3D-иконки: в шапке (город, записи) — везде, в нижнем меню — на мобайле */
.nav-art { display: none; object-fit: contain; }
.city-btn .nav-svg,
.icon-btn .nav-svg { display: none; }
.city-btn .nav-art { display: block; width: 20px; height: 20px; }
.icon-btn .nav-art { display: block; width: 24px; height: 24px; }
@media (max-width: 767px) {
  .tabbar .nav-svg { display: none; }
  .tabbar .nav-art { display: block; width: 24px; height: 24px; opacity: 0.4; transition: opacity 160ms var(--ease); }
  .tabbar a.is-active .nav-art { opacity: 1; }
}

/* ---------- Отзывы на странице компании ---------- */
.rv-top {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 8px;
}
.rv-summary,
.rv-form {
  padding: 24px;
  border-radius: var(--r-24);
  background: var(--surface);
}
.rv-summary .reviews-score.is-empty { color: var(--ink-3); }
.rv-summary .stars { margin-top: 4px; }
.rv-summary .stars .icon { width: 20px; height: 20px; }
.rv-count { margin-top: 8px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink-2); }
.rv-summary .bars { margin-top: 20px; }
.rv-summary .bar-row { grid-template-columns: 16px minmax(0, 1fr) 24px; gap: 8px; }
.rv-summary .bar-row .num:last-child { text-align: right; }
.rv-form { display: grid; gap: 16px; align-content: start; }
.rv-form h3 { margin: 0; }
.rv-form p { margin: -8px 0 0; }
.rv-form .btn-sm { justify-self: start; }
.rv-form .textarea { background: var(--bg); }
.stars-input-lg { align-items: center; gap: 4px; flex-wrap: wrap; margin-left: -4px; }
.stars-input-lg button { width: 48px; height: 48px; transition: color 120ms var(--ease), background-color 120ms var(--ease); }
.stars-input-lg button:hover { background: var(--bg); }
.stars-input-lg button .icon { width: 36px; height: 36px; }
.stars-input-lg:hover button { color: var(--surface-press); }
.stars-input-lg button:hover,
.stars-input-lg button:has(~ button:hover) { color: var(--star); }
.rv-rate-label { margin-left: 8px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink-2); }
.rv-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.rv-note { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-3); }
.rv-list { margin-top: 8px; }
.rv-list .review + .review { border-top: 4px solid var(--surface); }
.review-stars { margin-left: auto; flex: none; }
.rv-verified { display: inline-flex; align-items: center; gap: 4px; color: var(--success); font-weight: 700; vertical-align: top; }
.rv-empty { margin-top: 16px; }
.rv-more { margin-top: 16px; }
@media (max-width: 767px) {
  .rv-top { grid-template-columns: minmax(0, 1fr); }
  .rv-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: center; padding: 20px; }
  .rv-summary .reviews-score { grid-row: span 2; }
  .rv-summary .stars { margin: 0; align-self: end; }
  .rv-summary .rv-count { margin: 0; align-self: start; }
  .rv-summary .bars { grid-column: 1 / -1; margin-top: 16px; }
  .rv-form { padding: 20px; }
  .stars-input-lg button { width: 44px; height: 44px; }
  .stars-input-lg button .icon { width: 32px; height: 32px; }
  .rv-rate-label { flex: 1 0 100%; margin: 4px 0 0 4px; }
  .rv-form-foot .btn { width: 100%; }
}
.rv-empty-score { font-family: var(--font-head); font-size: 20px; line-height: 28px; font-weight: 800; color: var(--ink); }
.rv-form #rv-submit:disabled { background: var(--surface-hover); color: var(--ink-3); box-shadow: none; opacity: 1; }
.rv-form .input { background: var(--bg); }
@media (max-width: 767px) { .rv-summary .rv-empty-score { grid-row: span 2; font-size: 16px; line-height: 24px; } }

/* Вход по паролю */
.auth-link { align-self: flex-start; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--accent-ink); }
.auth-link:hover { color: var(--ink); }
.pwd-field { position: relative; }
.pwd-field .input { padding-right: 56px; }
.pwd-eye { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-12); color: var(--ink-3); }
.pwd-eye:hover { background: var(--surface-hover); color: var(--ink); }
.pwd-eye[aria-pressed="true"] { color: var(--ink); }
.pwd-form { display: grid; gap: 12px; justify-items: start; }
.pwd-form .form-grid { width: 100%; }

/* ---------- Кабинет: режим работы — сетка «дни × часы» ---------- */
.wk-presets-label { align-self: center; margin-right: 4px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-3); }
.wk-preview { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-2); font-weight: 600; }
.wk-preview .icon { flex: none; margin-top: 4px; }
.wk-preview b { color: var(--ink); }
/* Слева без отступа: колонка дней прилипает к самому краю и закрывает уехавшие часы */
.hg-scroll { position: relative; margin: 0 -4px 0 0; padding: 4px 4px 8px 0; overflow-x: auto; scrollbar-width: thin; }
.hg {
  display: grid;
  grid-template-columns: 40px repeat(24, minmax(20px, 1fr));
  gap: 4px;
  min-width: 640px;
  user-select: none;
  -webkit-user-select: none;
}
.hg-corner { position: sticky; left: 0; z-index: 2; background: var(--bg); }
.hg-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.hg-day {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding-right: 4px;
  background: var(--bg);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
}
.hg-check {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: 4px;
  background: var(--surface-hover) no-repeat center / 12px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 120ms var(--ease);
}
.hg-check:hover { background-color: var(--surface-press); }
.hg-check:checked {
  background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.hg-check:indeterminate {
  background-color: var(--ink-3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}
.hg-check:focus-visible { outline: 4px solid var(--focus); outline-offset: 0; }
.hg-cell {
  height: 24px;
  padding: 0;
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
  transition: background-color 80ms var(--ease);
}
.hg-cell:hover { background: var(--surface-press); }
.hg-cell.is-on { background: var(--accent); }
.hg-cell.is-on:hover { background: var(--accent-hover); }
.hg-cell:focus-visible { outline: 4px solid var(--focus); outline-offset: 0; position: relative; z-index: 1; }
.hg-tip {
  position: absolute;
  z-index: 5;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: var(--shadow-md);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}
/* Телефон: список графиков «дни + время» вместо сетки */
.hg.is-list { grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.hl-row { display: grid; gap: 8px; }
/* Время занимает столько, сколько нужно, дням — остальное */
.hl-line { display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; gap: 8px; align-items: center; }
.hl-field[data-hl-act="time"] > span { overflow: visible; }
.hl-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  padding: 8px 8px 8px 12px;
  border-radius: var(--r-12);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  font-weight: 600;
  text-align: left;
  transition: background-color 160ms var(--ease);
}
.hl-field span { min-width: 0; }
.hl-field > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-field small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.hl-field .icon { flex: none; color: var(--ink-2); transition: transform 160ms var(--ease); }
.hl-field:hover { background: var(--surface-hover); }
.hl-field.is-open { background: var(--accent-soft); }
.hl-field.is-open .icon { transform: rotate(180deg); }
.hl-ph { color: var(--ink-3); }
.hl-del { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-12); color: var(--ink-2); }
.hl-del:hover { background: var(--surface); color: var(--ink); }
.hl-panel { display: grid; gap: 12px; justify-items: start; padding: 16px; border-radius: var(--r-16); background: var(--surface); }
.hl-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; width: 100%; }
.hl-day { height: 40px; border-radius: var(--r-12); background: var(--bg); font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink); }
.hl-day.is-on { background: var(--accent); color: var(--on-accent); }
.hl-day.is-taken { background: var(--surface-hover); color: var(--ink-3); }
.hl-hint { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.hl-times { display: flex; flex-wrap: wrap; gap: 12px; }
.hl-times label { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink-2); }
.hl-panel .check { font-weight: 600; }
.hl-panel .btn-secondary { background: var(--bg); }
.hl-panel .btn-secondary:hover { background: var(--surface-press); }
.hl-add { display: inline-flex; align-items: center; gap: 8px; justify-self: start; height: 40px; font-weight: 700; color: var(--ink-2); }
.hl-add:hover { color: var(--ink); }
.hl-empty { color: var(--ink-3); font-weight: 600; }
.wk-time {
  height: 40px;
  padding: 0 32px 0 12px;
  border: 0;
  border-radius: var(--r-12);
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2357615C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.wk-time:focus-visible { outline: 4px solid var(--focus); outline-offset: 0; }

/* Текстовая версия страницы компании с сервера: её читают поисковики, пока не загрузился интерфейс */
.seo-page { display: grid; gap: 8px; padding: 32px 0 48px; color: var(--ink-2); }
.seo-page h1 { color: var(--ink); }
.seo-page h2 { margin-top: 16px; color: var(--ink); }
.seo-page ul { display: grid; gap: 4px; padding-left: 20px; }
.seo-page blockquote { margin: 0; }

/* Кабинет: превью «В Яндексе» */
.seo-snip-wrap { display: grid; gap: 12px; padding: 16px; }
.seo-note { display: flex; gap: 8px; padding: 8px 12px; border-radius: var(--r-12); background: var(--warn-soft); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-2); }
.seo-note .icon { flex: none; }
.seo-snip { display: grid; gap: 4px; padding: 12px; border-radius: var(--r-12); background: var(--bg); box-shadow: var(--shadow-sm); font-family: Arial, sans-serif; }
.seo-snip-url { font-size: 12px; line-height: 16px; color: #1A7A43; overflow-wrap: anywhere; }
.seo-snip-title { font-size: 16px; line-height: 20px; color: #1A0DAB; }
.seo-snip-desc { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.seo-check { display: grid; gap: 4px; font-size: 12px; line-height: 16px; }
.seo-check b { margin-bottom: 4px; font-size: 14px; line-height: 20px; }
.seo-check span { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-weight: 600; }
.seo-check span.is-ok { color: var(--ink); }
.seo-check span.is-ok .icon { color: var(--success); }
.seo-check small { margin-top: 4px; color: var(--ink-3); }

/* 3D-иконки в кнопках: вход, кабинет, выход, на сайт */
.art3d { flex: none; width: 20px; height: 20px; object-fit: contain; }

/* ---------- Карта: страница «На карте» и мини-карта в карточке ---------- */

.map-page { background: var(--bg); }
.map-page .footer { display: none; }
.map-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
}
.map-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--bg);
}
.map-side-head { display: grid; gap: 12px; padding: 20px 20px 8px; }
.map-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.map-title h1 { font-size: 24px; line-height: 32px; }
.map-count { margin: 0; }
.map-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px 16px; }
.map-more { padding: 12px 8px; text-align: center; }
.map-sheet-handle { display: none; }

.map-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: start;
  width: 100%;
  padding: 12px 8px;
  border-radius: var(--r-16);
  text-align: left;
  transition: background 150ms var(--ease);
}
.map-row:hover { background: var(--surface); }
.map-row.is-active { background: var(--accent-soft); }
.map-row > img, .map-row > .logo-mark { width: 56px; height: 56px; border-radius: var(--r-12); object-fit: cover; }
.map-row-text { display: grid; gap: 2px; min-width: 0; }
.map-row-text b { font-family: var(--font-head); font-size: 15px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-row-meta { display: flex; align-items: center; flex-wrap: wrap; font-size: 12px; line-height: 16px; }
.map-row-price { font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap; }

.map-wrap { position: relative; min-height: 0; background: var(--surface); }
.map-canvas { position: absolute; inset: 0; }
.map-note { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 16px 20px; border-radius: var(--r-16); background: var(--bg); box-shadow: var(--shadow-md); font-weight: 600; }

/* Метка: логотип компании в кружке + рейтинг; хвостик под логотипом указывает на точку */
.map-pin-wrap { position: relative; width: 0; height: 0; }
.map-pin {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate(-20px, -8px);
  transform-origin: 20px 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(19, 25, 21, 0.2);
  font: 700 12px/16px var(--font-text);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 150ms var(--ease), background 150ms var(--ease), box-shadow 150ms var(--ease);
}
.map-pin::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: -5px;
  width: 12px;
  height: 12px;
  background: inherit;
  transform: rotate(45deg);
  border-radius: 2px;
}
.map-pin-logo {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  font: 800 11px/1 var(--font-head);
  letter-spacing: 0.02em;
}
.map-pin-logo.has-img { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.map-pin-logo img { width: 100%; height: 100%; object-fit: contain; }
.map-pin-rate { position: relative; z-index: 1; padding-right: 8px; }
.map-pin:hover { transform: translate(-20px, -10px) scale(1.06); z-index: 3; }
.map-pin.is-active { background: var(--accent); color: var(--on-accent); transform: translate(-20px, -10px) scale(1.15); box-shadow: 0 8px 20px rgba(19, 25, 21, 0.28); z-index: 4; }
.leaflet-container { font-family: var(--font-text); background: var(--surface); }
.leaflet-div-icon, .map-pin-wrap.leaflet-marker-icon { background: none; border: 0; }

/* Подробная карточка выбранной компании поверх карты: фото, контакты, услуги, действия */
.map-card {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 1100; /* выше кнопок и подписей карты */
  width: 380px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--r-20);
  background: var(--bg);
  box-shadow: var(--shadow-md);
}
.map-card-close { position: absolute; right: 8px; top: 8px; z-index: 2; background: rgba(255, 255, 255, 0.92); }
.map-card-media { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 4px; height: 150px; overflow-x: auto; scrollbar-width: none; }
.map-card-media::-webkit-scrollbar { display: none; }
.map-card-media.is-single { grid-auto-columns: 100%; }
.map-card-media img { width: 100%; height: 100%; object-fit: cover; }
.map-card-body { display: grid; gap: 12px; padding: 16px; }
.map-card-head { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding-right: 32px; color: inherit; }
.map-card-head .logo-mark { width: 48px; height: 48px; }
.map-card-head > span { display: grid; gap: 2px; min-width: 0; }
.map-card-head b { font-family: var(--font-head); font-size: 17px; line-height: 22px; }
.map-card-media + .map-card-body .map-card-head { padding-right: 0; }
.map-card-facts { display: grid; gap: 6px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.map-card-facts > * { display: flex; gap: 8px; align-items: flex-start; color: inherit; }
.map-card-facts .icon { flex: none; margin-top: 1px; color: var(--ink-3); }
.map-card-facts a:hover { color: var(--ink); }
.map-card-desc { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.map-card-svc { display: grid; gap: 6px; padding: 12px; border-radius: var(--r-16); background: var(--surface); font-size: 13px; line-height: 18px; }
.map-card-svc > div { display: flex; justify-content: space-between; gap: 12px; }
.map-card-svc > div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-card-svc b { white-space: nowrap; }
.map-card-svc.is-loading > div { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--surface-hover), var(--surface-press), var(--surface-hover)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.map-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.map-card-actions .btn:first-child { flex: 1 1 auto; }
.map-sentinel { height: 1px; }

/* Мини-карта в карточке компании */
.mini-map { position: relative; height: 200px; margin-top: 16px; border-radius: var(--r-16); overflow: hidden; background: var(--surface); }
.mini-map .leaflet-control-attribution { font-size: 9px; }
.mini-map-link { position: absolute; left: 8px; bottom: 8px; z-index: 500; }

@media (max-width: 1023px) {
  .map-layout { grid-template-columns: 340px 1fr; }
}

@media (max-width: 767px) {
  .map-page.has-tabbar { padding-bottom: 0; }
  .map-layout {
    display: block;
    position: relative;
    height: calc(100dvh - var(--header-h) - 64px);
  }
  .map-wrap { position: absolute; inset: 0; }
  /* Список — выезжающая снизу панель; в свёрнутом виде видна ручка и разделы */
  .map-side {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
    max-height: 72%;
    border-right: 0;
    border-radius: var(--r-24) var(--r-24) 0 0;
    box-shadow: 0 -8px 24px rgba(19, 25, 21, 0.12);
    transform: translateY(calc(100% - 132px));
    transition: transform 300ms var(--ease);
  }
  .map-side.is-open { transform: none; }
  .map-sheet-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 16px 4px;
    font-size: 14px;
  }
  .map-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--surface-press); }
  .map-side-head { padding: 8px 16px 8px; gap: 8px; }
  .map-title, .map-count { display: none; }
  .map-list { padding: 0 8px 16px; }
  .map-card { left: 8px; right: 8px; top: auto; bottom: 140px; width: auto; max-width: none; max-height: calc(100% - 156px); }
  .map-card-media { height: 120px; }
  .leaflet-bottom.leaflet-right { bottom: 132px; }
  /* На телефоне карту приближают пальцами — кнопки масштаба только мешают карточке */
  .map-wrap .leaflet-control-zoom { display: none; }
}

/* ---------- Кабинет клиента и заявки ---------- */

.acc-layout { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; margin-bottom: 48px; }
.acc-nav { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 4px; padding: 8px; border-radius: var(--r-20); background: var(--bg); }
.acc-nav a {
  display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px;
  border-radius: var(--r-12); font-weight: 600; color: var(--ink-2);
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.acc-nav a:hover { background: var(--surface); color: var(--ink); }
.acc-nav a.is-active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.acc-nav .icon { width: 20px; height: 20px; }
.acc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.acc-list { display: grid; gap: 12px; margin-bottom: 32px; }
.acc-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.acc-booking { grid-template-columns: 120px 1fr; }
.acc-section { display: grid; gap: 12px; margin-bottom: 12px; }
.acc-section h3 { font-size: 18px; line-height: 24px; }
.acc-contact { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); }
.acc-contact > div { display: grid; gap: 2px; }
.acc-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acc-inline .float { flex: 1 1 220px; }
.acc-danger { grid-template-columns: 1fr; }
.acc-delete { color: var(--danger); }

.lead-card { display: grid; gap: 12px; }
.lead-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lead-top h3 { font-size: 18px; line-height: 24px; margin-bottom: 4px; }
.lead-text { margin: 0; white-space: pre-line; color: var(--ink); }
.lead-sub { font-size: 14px; line-height: 20px; margin-top: 4px; }
.lead-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.lead-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lead-form-card { margin-bottom: 24px; }
.lead-form { display: grid; gap: 16px; margin-top: 16px; }

.resp-card { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 16px; border-radius: var(--r-16); background: var(--surface); }
.resp-card.is-chosen { background: var(--accent-soft); }
.resp-card .lead-top, .resp-text, .resp-actions { grid-column: 1 / -1; }
.resp-company { display: flex; align-items: center; gap: 12px; color: inherit; min-width: 0; }
.resp-company > span { display: grid; gap: 2px; }
.resp-price { font-family: var(--font-head); font-size: 18px; line-height: 24px; white-space: nowrap; }
.resp-text { margin: 0; white-space: pre-line; }
.resp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.resp-form { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-16); background: var(--surface); }
.resp-form .input, .resp-form .textarea { background: var(--bg); }

/* Полоса «Не нашли? Оставьте заявку» на главной и в каталоге */
.lead-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px; border-radius: var(--r-24); background: var(--accent-soft); }
.lead-band h2 { font-size: 24px; line-height: 32px; }
.lead-band p { margin-top: 4px; color: var(--accent-ink); }

@media (max-width: 1023px) {
  .acc-layout { grid-template-columns: 1fr; }
  .acc-nav { position: static; display: flex; overflow-x: auto; scrollbar-width: none; padding: 4px; }
  .acc-nav a { flex: none; height: 40px; }
}
@media (max-width: 767px) {
  .acc-head, .lead-band { flex-direction: column; align-items: stretch; }
  .lead-band { padding: 24px; }
  .acc-booking { grid-template-columns: 1fr; }
  .lead-top { flex-direction: column; }
}

/* ---------- Горизонтальные ленты: стрелки по краям, перетаскивание мышью ---------- */
.hscroll { position: relative; min-width: 0; } /* в сетке и флексе лента не должна растягиваться под все чипы */
.hscroll > .hscroll-track { cursor: grab; scroll-behavior: auto; }
.hscroll > .hscroll-track.is-dragging { cursor: grabbing; user-select: none; }
.hscroll > .hscroll-track.is-dragging > * { pointer-events: none; }
.hscroll-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(19, 25, 21, 0.16);
  transition: transform 150ms var(--ease), background 150ms var(--ease);
}
.hscroll-btn:hover { background: var(--surface); transform: scale(1.06); }
.hscroll-btn.is-prev { left: -8px; }
.hscroll-btn.is-next { right: -8px; }
/* Растворение у края, где лента продолжается: сама лента плавно становится прозрачной под стрелкой.
   Маска, а не подложка, — работает на любом фоне */
.hscroll > .hscroll-track {
  --fl: 0px;
  --fr: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--fl) * 0.4), #000 var(--fl), #000 calc(100% - var(--fr)), transparent calc(100% - var(--fr) * 0.4));
  mask-image: linear-gradient(90deg, transparent calc(var(--fl) * 0.4), #000 var(--fl), #000 calc(100% - var(--fr)), transparent calc(100% - var(--fr) * 0.4));
}
.hscroll.can-prev > .hscroll-track { --fl: 120px; }
.hscroll.can-next > .hscroll-track { --fr: 120px; }
@media (max-width: 767px) {
  .hscroll.can-prev > .hscroll-track { --fl: 56px; }
  .hscroll.can-next > .hscroll-track { --fr: 56px; }
}
@media (hover: hover) {
  .hscroll.can-prev > .hscroll-btn.is-prev, .hscroll.can-next > .hscroll-btn.is-next { display: grid; }
}

/* ---------- Логотип и обложка компании ---------- */
.logo-mark.has-img { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; padding: 0; }
.logo-mark.has-img img { width: 100%; height: 100%; object-fit: contain; }
.brand-grid { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: start; }
.brand-item { display: grid; gap: 8px; }
.brand-pick {
  position: relative; display: grid; place-items: center; gap: 4px; overflow: hidden; cursor: pointer;
  border-radius: var(--r-20); background: var(--surface); color: var(--ink-3); text-align: center; font-size: 12px; line-height: 16px;
  transition: background 150ms var(--ease);
}
.brand-pick:hover { background: var(--surface-hover); }
.brand-pick.is-logo { width: 160px; height: 160px; }
.brand-pick.is-cover { width: 100%; aspect-ratio: 16 / 9; max-height: 220px; }
.brand-pick img { position: absolute; inset: 0; width: 100%; height: 100%; }
.brand-pick.is-logo img { object-fit: contain; background: var(--bg); padding: 12px; }
.brand-pick.is-cover img { object-fit: cover; }
.brand-acts { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 767px) {
  .brand-grid { grid-template-columns: 1fr; }
}


/* «+N» на метке: сколько ещё компаний в этой точке, показаны только лучшие */
.map-pin-more {
  position: relative;
  z-index: 1;
  margin: 0 2px 0 -2px;
  padding: 0 8px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-size: 11px;
}
.map-pin.no-rate .map-pin-more { margin-left: 0; }
.map-pin.is-active .map-pin-more { background: var(--on-accent); }

/* Несколько компаний в одной точке */
.map-group-head { display: grid; gap: 2px; padding-right: 32px; }
.map-group-head b { font-family: var(--font-head); font-size: 17px; line-height: 22px; }
.map-group-list { display: grid; gap: 2px; margin: 0 -8px; }
.map-group-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: start;
  width: 100%;
  padding: 8px;
  border-radius: var(--r-12);
  text-align: left;
  transition: background 150ms var(--ease);
}
.map-group-row:hover { background: var(--surface); }
.map-group-row .logo-mark { width: 40px; height: 40px; }
.map-card-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 12px 0 -4px 12px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--r-8);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}
.map-card-back:hover { background: var(--surface); color: var(--ink); }

/* Лента рубрик в боковой панели карты: выходит к краям панели, а не страницы */
.map-side .chips-scroll { margin: 0 -20px; padding: 0 20px; }
.map-side .hscroll-btn.is-prev { left: -12px; }
.map-side .hscroll-btn.is-next { right: -12px; }
@media (max-width: 767px) {
  .map-side .chips-scroll { margin: 0 -16px; padding: 0 16px; }
  .map-side .hscroll-btn.is-prev { left: -8px; }
  .map-side .hscroll-btn.is-next { right: -8px; }
}

/* Строка над выдачей каталога на телефоне: «Найдено N» отдельной строкой, ниже «На карте» и сортировка */
@media (max-width: 767px) {
  .results-bar { flex-wrap: wrap; }
  .results-bar #found { flex: 1 0 100%; }
  .results-bar #to-map { margin-left: 0 !important; }
  .results-bar label { flex: 1; min-width: 0; }
  .results-bar .select { width: 100%; }
}

/* Страховка: ни один элемент не делает страницу шире экрана — иначе на телефоне едет нижняя панель.
   clip, а не hidden: липкая шапка продолжает работать */
html, body { overflow-x: clip; }

/* Ссылки внутри карточек: категория, адрес, район — выглядят как текст, подсвечиваются при наведении */
.meta-link { color: inherit; text-decoration: none; border-radius: 4px; transition: color 150ms var(--ease); }
.meta-link:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ccard-name, .map-card-name { display: block; color: inherit; }
.ccard-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard-name:hover, .map-card-name:hover { color: var(--accent-ink); }
.ccard-media-link { display: block; width: 100%; height: 100%; }
.ccard-media-link .photo-empty { height: 100%; }

/* Избранное: жёлтое заполненное сердечко */
.fav-btn .icon { transition: fill 150ms var(--ease), stroke 150ms var(--ease), transform 150ms var(--ease); }
.fav-btn:hover .icon { transform: scale(1.1); }
.fav-btn.is-on .icon, .fav-btn.is-on:hover .icon { fill: var(--accent); stroke: var(--accent); } /* без тёмного контура */

/* Лента дат в записи: растворение уже, чем у рубрик, — даты узкие */
.hscroll.can-prev > .dates { --fl: 72px; }
.hscroll.can-next > .dates { --fr: 72px; }
.hscroll > .dates + .hscroll-btn, .hscroll > .dates ~ .hscroll-btn { margin-top: -22px; }

/* ---------- Просмотр фото на весь экран ---------- */
.pv {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(11, 15, 13, 0.96);
  color: #fff;
  animation: sv-in 200ms var(--ease);
}
.pv:focus { outline: none; }
.pv-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top)); }
.pv-title { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-count { color: rgba(255, 255, 255, 0.72); font-weight: 700; font-size: 14px; }
.pv-btn, .pv-arrow {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: background 150ms var(--ease);
}
.pv-btn { width: 40px; height: 40px; }
.pv-btn:hover, .pv-arrow:hover { background: rgba(255, 255, 255, 0.24); }
.pv-stage { display: flex; align-items: center; gap: 16px; min-height: 0; padding: 0 16px; }
.pv-arrow { width: 52px; height: 52px; }
.pv-track { flex: 1; height: 100%; min-width: 0; display: grid; place-items: center; touch-action: pan-y; }
.pv-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-16); animation: pv-img 250ms var(--ease); user-select: none; -webkit-user-drag: none; }
@keyframes pv-img { from { opacity: 0; transform: scale(0.98); } }
.pv-thumbs { display: flex; gap: 8px; justify-content: center; overflow-x: auto; scrollbar-width: none; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
.pv-thumbs::-webkit-scrollbar { display: none; }
.pv-thumb { flex: none; width: 64px; height: 64px; border-radius: var(--r-12); overflow: hidden; opacity: 0.5; outline: 2px solid transparent; outline-offset: 2px; transition: opacity 150ms var(--ease), outline-color 150ms var(--ease); }
.pv-thumb:hover { opacity: 0.85; }
.pv-thumb.is-active { opacity: 1; outline-color: var(--accent); }
.pv-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {
  .pv-stage { padding: 0; }
  .pv-arrow { display: none; }
  .pv-img { border-radius: 0; }
  .pv-thumbs { justify-content: flex-start; }
  .pv-thumb { width: 52px; height: 52px; }
}
/* Фото на странице компании открываются в просмотре */
.gallery button, .photo-grid button { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; border-radius: inherit; }
.photo-grid button { border-radius: var(--r-16); }
.photo-grid button img { transition: transform 400ms var(--ease); }
.photo-grid button:hover img { transform: scale(1.04); }

/* ---------- Просмотр историй: дополнения ---------- */
.sv-frame.is-switch { animation: sv-switch 300ms var(--ease); }
@keyframes sv-switch { from { opacity: 0.4; transform: scale(0.97); } }
.sv-loader { position: absolute; left: 50%; top: 50%; z-index: 2; width: 40px; height: 40px; margin: -20px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.24); border-top-color: #fff; animation: spin 800ms linear infinite; }
.sv-who { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: #fff; }
.sv-who .logo-mark { width: 36px; height: 36px; border-radius: 50%; font-size: 11px; box-shadow: 0 0 0 2px #fff; }
.sv-who-text { display: grid; min-width: 0; }
.sv-who-text small { font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, 0.72); font-weight: 600; }
.sv-cta { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24); }
.sv-quicks { display: flex; gap: 8px; }
.sv-quick {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: var(--r-12);
  background: rgba(19, 25, 21, 0.56);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  transition: background 150ms var(--ease);
}
.sv-quick:hover { background: rgba(19, 25, 21, 0.76); }
.sv-quick.fav-btn.is-on .icon { fill: var(--accent); stroke: var(--accent); }

/* ---------- Лента «Истории» на главной: кружки компаний ---------- */
.sr { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 8px; }
.sr::-webkit-scrollbar { display: none; }
.sr-item { flex: none; display: grid; justify-items: center; gap: 8px; width: 84px; text-align: center; }
.sr-ring {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--accent), #FFB800, #FF7A00, var(--accent));
  transition: transform 200ms var(--ease);
}
.sr-item.is-seen .sr-ring { background: var(--surface-press); }
.sr-item:hover .sr-ring { transform: scale(1.05); }
.sr-pic { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 3px solid var(--bg); background: var(--surface); display: grid; place-items: center; }
.sr-pic img { width: 100%; height: 100%; object-fit: cover; }
.sr-pic .logo-mark { width: 100%; height: 100%; border-radius: 50%; }
.sr-name { width: 100%; font-size: 12px; line-height: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-item.is-seen .sr-name { color: var(--ink-2); font-weight: 600; }

/* ---------- Раздел «Истории» на странице компании ---------- */
.stories-block { margin: 0 0 16px; }
.stories-block .csection-head { margin-bottom: 0; }
.story.is-seen { opacity: 0.72; }
.story::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--accent); pointer-events: none; }
.story.is-seen::after { box-shadow: none; }
.hscroll.can-prev > .sr { --fl: 72px; }
.hscroll.can-next > .sr { --fr: 72px; }

/* Переключатель «клиент ↔ компания» в личном кабинете */
.mode-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px; border-radius: var(--r-16); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.mode-switch > span { display: flex; align-items: center; gap: 8px; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* Кабинет: подразделы «Данных о компании» */
.cab-subnav { display: grid; gap: 2px; margin: 2px 0 6px; }
.cab-subnav .sub { height: auto; min-height: 36px; padding-top: 8px; padding-bottom: 8px; line-height: 20px; font-size: 14px; }
.cab-subnav[hidden] { display: none; }
.cab-crumb { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-3); margin-bottom: 4px; }
.cab-save-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 8px; }
@media (max-width: 767px) { .cab-save-foot .btn { flex: 1; } .cab-save-foot .save-state { display: none; } }

/* ---------- Админка ---------- */
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(0.92); }
.adm-auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--surface); }
.adm-auth-card { width: 100%; max-width: 420px; display: grid; gap: 16px; padding: 32px; }
.adm-auth-card h1 { font-size: 28px; line-height: 36px; margin-bottom: 4px; }
.adm .brand .badge, .adm-auth .brand .badge { margin-left: 4px; }
.adm-me { display: grid; gap: 2px; padding: 8px 12px 12px; font-size: 14px; line-height: 20px; }
.adm-me span { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.adm-main { max-width: 1120px; }
.adm-sub { margin-top: 4px; max-width: 720px; }
.adm-h2 { font-size: 18px; line-height: 24px; margin: 24px 0 12px; }
.adm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.adm-tile { display: grid; gap: 4px; padding: 16px; border-radius: var(--r-20); background: var(--bg); box-shadow: var(--shadow-md); color: var(--ink); }
.adm-tile .icon { color: var(--ink-3); }
.adm-tile b { font-family: var(--font-head); font-size: 32px; line-height: 40px; }
.adm-tile span { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.adm-tile.is-hot { background: var(--accent-soft); }
.adm-tile.is-hot .icon { color: var(--accent-ink); }
.adm-tile.is-plain b { font-size: 24px; line-height: 32px; }
.adm-tile:hover { transform: translateY(-1px); }
.adm-seg { margin-bottom: 16px; max-width: 640px; }
.adm-seg .num { margin-left: 6px; font-size: 12px; color: var(--accent-ink); }
.adm-filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.adm-filters.is-tight { grid-template-columns: minmax(0, 1fr) 110px; margin: 0 0 8px; }
.adm-list { display: grid; gap: 12px; }
.adm-more { display: flex; justify-content: center; padding: 16px 0; }
.adm-loading { padding: 16px 0; }
.adm-empty { padding: 48px 16px; }
.adm-item { display: grid; gap: 10px; padding: 20px; }
.adm-item.is-compact { gap: 6px; padding: 16px 20px; }
.adm-item.is-done { background: var(--accent-soft); }
.adm-done { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent-ink); }
.adm-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-row-head b { font-size: 16px; line-height: 24px; }
.adm-co-head { display: flex; align-items: center; gap: 12px; }
.adm-co-head .logo-mark { flex: none; width: 48px; height: 48px; border-radius: 14px; font-size: 16px; }
.adm-co-head.is-small .logo-mark { width: 32px; height: 32px; border-radius: 10px; font-size: 12px; }
.adm-co-title { display: grid; min-width: 0; flex: 1; }
.adm-co-title b { font-size: 16px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-co-title span { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.adm-co-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.adm-owner { display: flex; gap: 6px; align-items: center; font-size: 13px; line-height: 18px; color: var(--ink-2); padding: 8px 12px; border-radius: var(--r-12); background: var(--surface); }
.adm-fields { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 14px; line-height: 20px; }
.adm-fields dt { color: var(--ink-3); }
.adm-fields dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.adm-diff { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.adm-diff th { width: 180px; text-align: left; vertical-align: top; font-weight: 600; color: var(--ink-3); padding: 8px 16px 8px 0; border-top: 1px solid var(--line); }
.adm-diff td { padding: 8px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.adm-diff del, .adm-svc del { display: block; color: var(--ink-3); text-decoration: line-through; }
.adm-diff ins { display: block; text-decoration: none; background: var(--accent-soft); border-radius: 6px; padding: 2px 6px; margin-top: 2px; white-space: pre-line; }
.adm-svc { display: grid; gap: 4px; font-size: 14px; line-height: 20px; }
.adm-svc ul { margin: 0 0 8px; padding-left: 20px; }
.adm-svc li del { display: inline; }
.adm-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.adm-file { position: relative; aspect-ratio: 1; border-radius: var(--r-12); overflow: hidden; background: var(--surface); padding: 0; border: 0; cursor: pointer; }
.adm-file img, .adm-file video { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-file-label { position: absolute; left: 6px; top: 6px; padding: 2px 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.92); font-size: 11px; line-height: 16px; font-weight: 700; color: var(--ink); }
.adm-file-off { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 4px; background: rgba(180, 35, 24, 0.72); color: #fff; font-size: 12px; font-weight: 700; }
.adm-file.is-off .adm-file-off { display: flex; }
.adm-file:focus-visible { outline: 4px solid var(--focus); }
.adm-details summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.adm-details ul { margin: 8px 0 0; padding-left: 20px; font-size: 14px; line-height: 20px; display: grid; gap: 4px; }
.adm-details small { display: block; color: var(--ink-3); }
.adm-acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.adm-text { white-space: pre-line; overflow-wrap: anywhere; font-size: 15px; line-height: 22px; }
.adm-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-stars { color: #F5B400; letter-spacing: 1px; }
.adm-stars i { font-style: normal; color: var(--line); }
.adm-reply { padding: 10px 12px; border-radius: var(--r-12); background: var(--accent-soft); font-size: 14px; line-height: 20px; white-space: pre-line; }
.adm-reply b { display: block; font-size: 12px; line-height: 16px; color: var(--accent-ink); margin-bottom: 2px; }
.adm-reply.is-old { background: var(--surface); }
.adm-reply.is-old b { color: var(--ink-3); }
.adm-st { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-size: 11px; line-height: 16px; font-weight: 700; }
.adm-st-ok { background: var(--accent-soft); color: var(--accent-ink); }
.adm-st-warn { background: #FFF3C4; color: #7A5A00; }
.adm-st-bad { background: var(--danger-soft); color: var(--danger); }
.adm-st-muted { background: var(--surface-press); color: var(--ink-2); }
.adm-list.adm-stories { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.adm-story { display: grid; grid-template-rows: auto 1fr; overflow: hidden; padding: 0; }
.adm-story-media { aspect-ratio: 9 / 14; background: #000; }
.adm-story-media img, .adm-story-media video { width: 100%; height: 100%; object-fit: contain; display: block; }
.adm-story-body { display: grid; gap: 6px; align-content: start; padding: 14px 16px 16px; }
.adm-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(19, 25, 21, 0.48); }
.adm-modal[hidden] { display: none; }
.adm-dialog { width: 100%; max-width: 520px; display: grid; gap: 12px; padding: 24px; max-height: calc(100vh - 32px); overflow: auto; }
.adm-dialog h3 { font-size: 20px; line-height: 28px; }
.adm-dialog-acts { display: flex; justify-content: flex-end; gap: 8px; }
.adm-geo { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.adm-geo-list { padding: 12px; position: sticky; top: 16px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
#cities { overflow: auto; display: grid; gap: 2px; align-content: start; }
.adm-city { display: grid; gap: 2px; text-align: left; padding: 8px 12px; border-radius: var(--r-12); background: none; border: 0; cursor: pointer; color: var(--ink); }
.adm-city b { font-size: 14px; line-height: 20px; }
.adm-city span { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.adm-city:hover { background: var(--surface); }
.adm-city.is-active { background: var(--accent-soft); }
#city-panel { display: grid; gap: 16px; }
.adm-city-form { display: grid; gap: 12px; }
.adm-districts { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.adm-districts li { display: grid; grid-template-columns: minmax(0, 1fr) auto 40px 40px; gap: 8px; align-items: center; }
.adm-districts .input { height: 44px; }
.adm-d-add { display: grid; gap: 8px; justify-items: start; }
.adm-d-add .float { width: 100%; }
.adm-admin-form { display: grid; gap: 12px; margin-bottom: 16px; }
.adm-perms { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.adm-perms legend { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.adm-perms[disabled] { opacity: 0.48; }
.adm-city-pick { display: grid; gap: 8px; }
.adm-city-pick[hidden] { display: none; }
.adm-city-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 12px; max-height: 240px; overflow: auto; padding: 4px; }
.adm-city-checks [hidden] { display: none; }
.adm-log { padding: 8px 16px; }
.adm-log table { width: 100%; border-collapse: collapse; }
.adm-log td { padding: 10px 8px; border-top: 1px solid var(--line); vertical-align: top; font-size: 14px; line-height: 20px; }
.adm-log tr:first-child td { border-top: 0; }
.adm-log td:first-child { width: 140px; white-space: nowrap; }
@media (max-width: 1023px) {
  .adm-geo { grid-template-columns: minmax(0, 1fr); }
  .adm-geo-list { position: static; max-height: 360px; }
}
@media (max-width: 767px) {
  .adm-filters { grid-template-columns: minmax(0, 1fr); }
  .adm-fields { grid-template-columns: minmax(0, 1fr); }
  .adm-fields dd { margin-bottom: 6px; }
  .adm-diff th { width: 96px; }
  .adm-co-head { flex-wrap: wrap; }
  .adm-co-meta { justify-content: flex-start; width: 100%; }
  .adm-item { padding: 16px; }
  .adm-auth-card { padding: 24px; }
  .adm-districts li { grid-template-columns: minmax(0, 1fr) 40px 40px; }
  .adm-districts li .small { display: none; }
}

/* Кабинет: состояние модерации */
.mod-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-16); margin-bottom: 16px; font-size: 14px; line-height: 20px; background: var(--surface); color: var(--ink-2); }
.mod-note .icon { flex: none; margin-top: 0; }
.mod-note b { color: var(--ink); }
.mod-note.is-wait { background: #FFF6D6; }
.mod-note.is-bad { background: var(--danger-soft); }
.mod-note.is-bad .icon { color: var(--danger); }
.mod-note.is-ok { background: var(--accent-soft); }
.mod-note .link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.mod-tag { display: inline-flex; align-self: flex-start; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-size: 11px; line-height: 16px; font-weight: 700; }
.mod-tag.is-wait { background: #FFF3C4; color: #7A5A00; }
.mod-tag.is-bad { background: var(--danger-soft); color: var(--danger); height: auto; padding: 3px 8px; }
.mod-tag.is-ok { background: var(--accent-soft); color: var(--accent-ink); }

/* Каталог компании: длинные описания — три строки, остальное по нажатию */
[data-more] { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; cursor: pointer; }
[data-more].is-open { display: block; -webkit-line-clamp: unset; overflow: visible; cursor: auto; }
.dish-portion { font-size: 12px; line-height: 16px; color: var(--ink-3); margin-top: 2px; }

/* Обрезка фото под квадрат */
.crop-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(19, 25, 21, 0.56); }
.crop-dialog { width: 100%; max-width: 440px; display: grid; gap: 12px; padding: 24px; border-radius: 24px; background: var(--bg); box-shadow: var(--shadow-md); max-height: calc(100vh - 32px); overflow: auto; }
.crop-dialog h3 { font-size: 20px; line-height: 28px; }
.crop-dialog p { font-size: 14px; line-height: 20px; }
.crop-view { display: grid; place-items: center; padding: 20px; border-radius: var(--r-16); background: #1b201d; overflow: hidden; }
.crop-stage { position: relative; width: min(320px, calc(100vw - 120px)); aspect-ratio: 1; touch-action: none; cursor: grab; user-select: none; }
.crop-stage:active { cursor: grabbing; }
.crop-stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
/* Всё за рамкой — затемнено, внутри — то, что попадёт в квадрат */
.crop-frame { position: absolute; inset: 0; border: 2px solid #fff; border-radius: 4px; box-shadow: 0 0 0 999px rgba(19, 25, 21, 0.62); pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 33.333% 33.333%; background-position: -1px -1px; }
.crop-zoom-row { display: flex; align-items: center; gap: 12px; color: var(--ink-3); }
.crop-zoom { flex: 1; accent-color: var(--accent); }
.crop-acts { display: flex; justify-content: flex-end; gap: 8px; }

/* Кабинет: редактор каталога — карточка на позицию */
.cat-for { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 16px; }
.chip.is-static { cursor: default; background: var(--surface); gap: 6px; }
.chip.is-static:hover { background: var(--surface); }
.cat-list { display: grid; gap: 12px; }
.svc-ed-row.cat-item { display: grid; grid-template-columns: 112px minmax(0, 1fr) 40px; gap: 16px; align-items: start; padding: 16px; border-radius: var(--r-16); background: var(--surface); }
.cat-item .float { background: var(--bg); }
.cat-item .float:hover { background: var(--bg); }
.svc-ed-row.cat-item .float > .input,
.svc-ed-row.cat-item .float > .select { height: 56px; padding: 24px 16px 0; background-color: transparent; }
.cat-media { display: grid; gap: 6px; justify-items: center; }
.cat-img { position: relative; width: 112px; aspect-ratio: 1; border-radius: var(--r-12); background: var(--bg); display: grid; place-items: center; align-content: center; gap: 4px;
  color: var(--ink-3); font-size: 12px; font-weight: 700; cursor: pointer; overflow: hidden; border: 2px dashed var(--line); }
.cat-img:hover { border-color: var(--ink-3); color: var(--ink-2); }
.cat-img.has-img { border: 0; }
.cat-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-img:focus-within { outline: 4px solid var(--focus); }
.cat-img-del { background: none; border: 0; padding: 2px 6px; font-size: 12px; font-weight: 700; color: var(--ink-3); cursor: pointer; }
.cat-img-del:hover { color: var(--danger); }
.cat-fields { display: grid; gap: 8px; min-width: 0; }
.cat-row { display: grid; gap: 8px; }
.cat-row-main { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.cat-row-params { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: center; }
.cat-from { min-height: 56px; padding: 0 4px; }
.cat-desc { position: relative; }
.cat-desc > .textarea { min-height: 80px; resize: vertical; padding-bottom: 22px; }
.cat-count { position: absolute; right: 12px; bottom: 6px; font-size: 11px; line-height: 16px; color: var(--ink-3); font-variant-numeric: tabular-nums; pointer-events: none; }
.cat-count.is-near { color: var(--danger); font-weight: 700; }
.cat-acts { display: grid; gap: 4px; justify-items: center; }
.cat-acts .btn[disabled] { opacity: 0.3; }
.cat-add-bottom { margin-top: 12px; width: 100%; }
.cat-empty { background: var(--surface); padding: 40px 24px; }
@media (max-width: 767px) {
  .svc-ed-row.cat-item { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .cat-img { width: 88px; }
  .cat-fields { grid-column: 1 / -1; grid-row: 2; }
  .cat-acts { grid-column: 2; grid-row: 1; display: flex; justify-content: flex-end; align-self: start; }
  .cat-row-main { grid-template-columns: minmax(0, 1fr); }
}

/* Кабинет: превью — настоящая страница в «телефоне» */
.phone-screen .pv-frame { width: 390px; border: 0; transform-origin: 0 0; display: block; background: var(--bg); }
.pv-catalog { padding: 16px 12px; display: grid; gap: 12px; align-content: start; height: 100%; overflow: auto; background: var(--surface); }
.pv-catalog-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; }
.pv-catalog-cards { display: grid; }
.pv-catalog-cards .ccard { pointer-events: none; }
/* Страница в режиме предпросмотра: без всплывающих элементов, мешающих в маленьком окне */
.is-preview .tabbar { display: none !important; }

/* ---------- Страница компании: обзор с переходами в разделы ---------- */
.sec-link { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.sec-link .num { font-size: 16px; font-weight: 700; margin-left: 2px; }
.sec-link .icon { color: var(--ink-3); transition: transform 160ms var(--ease); }
.sec-link:hover .icon { transform: translateX(3px); color: var(--ink); }
.sec-more { margin-top: 16px; }
.sec-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rv-brief { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.rv-brief .reviews-score { font-size: 40px; line-height: 48px; }
.photo-grid a { display: block; overflow: hidden; border-radius: var(--r-16); cursor: zoom-in; }
.photo-grid a img { transition: transform 400ms var(--ease); }
.photo-grid a:hover img { transform: scale(1.04); }

/* ---------- Раздел на всю страницу ---------- */
.csub-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.csub-back { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 12px 6px 6px; border-radius: var(--r-16); color: var(--ink); }
.csub-back:hover { background: var(--surface); }
.csub-back > .icon { color: var(--ink-3); flex: none; }
.csub-back span { display: grid; min-width: 0; }
.csub-back b { font-family: var(--font-head); font-size: 18px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csub-back small { font-size: 13px; line-height: 18px; color: var(--ink-3); }
.csub-head + .tabs { margin-top: 12px; }
.csub-body { padding: 24px 0 48px; }
.csub-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 20px; }
.csub-title small { font-family: var(--font-body, inherit); font-size: 14px; line-height: 20px; font-weight: 600; }
.csub-services .menu-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.staff-grid-wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.photo-grid-lg { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.photo-grid-lg button { border-radius: var(--r-16); }
.photo-grid-lg button.is-hl { outline: 4px solid var(--accent); outline-offset: 2px; }
.story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.story.story-lg { flex: none; width: 100%; height: auto; aspect-ratio: 9 / 14; }
.csub-reviews .rv-top { margin-top: 0; }

/* ---------- Корзина ---------- */
.cart-btn { position: relative; }
.cart-n { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 11px; line-height: 20px; font-weight: 800; }
.cart-bar { position: sticky; bottom: 0; z-index: 60; margin: 0 calc(var(--gutter) * -1); padding: 12px var(--gutter); padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96); box-shadow: 0 -4px 16px rgba(19, 25, 21, 0.08); backdrop-filter: blur(8px); }
.cart-bar[hidden] { display: none; }
.cart-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0; }
.cart-bar-sum { display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 8px 12px; border-radius: var(--r-12); cursor: pointer; color: var(--ink); text-align: left; }
.cart-bar-sum:hover { background: var(--surface); }
.cart-bar-sum span { display: grid; }
.cart-bar-sum b { font-size: 16px; line-height: 22px; }
.cart-bar-sum small { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cart-bar-sum u { font-size: 14px; font-weight: 700; color: var(--accent-ink); text-underline-offset: 4px; }
.cart-sheet { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: rgba(19, 25, 21, 0.48); }
.cart-dialog { width: 100%; max-width: 520px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; border-radius: 24px; background: var(--bg); box-shadow: var(--shadow-md); overflow: hidden; }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 8px 24px; }
.cart-head h3 { font-size: 20px; line-height: 28px; }
.cart-list { overflow: auto; padding: 4px 24px; display: grid; gap: 4px; }
.cart-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 96px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cart-row img, .cart-noimg { width: 56px; height: 56px; border-radius: var(--r-12); object-fit: cover; background: var(--surface); display: grid; place-items: center; color: var(--ink-3); }
.cart-name { display: grid; min-width: 0; }
.cart-name b { font-size: 15px; line-height: 20px; }
.cart-name small { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.cart-price { text-align: right; }
.cart-foot { padding: 12px 24px 20px; display: grid; gap: 8px; }
@media (max-width: 1023px) {
  /* На телефоне корзина — в нижней панели страницы */
  .cart-bar { display: none; }
}
@media (max-width: 767px) {
  .cart-sheet { align-items: end; padding: 0; }
  .cart-dialog { max-width: none; border-radius: 24px 24px 0 0; max-height: 88vh; }
  .cart-row { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .cart-row img, .cart-noimg { width: 48px; height: 48px; }
  .cart-price { grid-column: 2 / -1; text-align: left; }
  .csub-head .btn { display: none; }
  .photo-grid-lg { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .story-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Витрина товаров и услуг: разделы слева, карточки, корзина справа ---------- */
.csub-services .csub-title { margin-bottom: 16px; }
.shop { display: grid; grid-template-columns: 232px minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.shop.no-nav { grid-template-columns: minmax(0, 1fr) 320px; }
.shop.no-cart { grid-template-columns: 232px minmax(0, 1fr); }
.shop.no-nav.no-cart { grid-template-columns: minmax(0, 1fr); }
.shop-nav { position: sticky; top: 88px; display: grid; gap: 2px; max-height: calc(100vh - 104px); overflow: auto; scrollbar-width: thin; }
.shop-nav-item { display: flex; align-items: center; gap: 12px; padding: 6px 10px 6px 6px; border-radius: var(--r-12); color: var(--ink); font-size: 15px; line-height: 20px; font-weight: 600; }
.shop-nav-item:hover { background: var(--surface); }
.shop-nav-item.is-active { background: var(--surface-press); }
.shop-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--surface); color: var(--ink-3); }
.shop-ico img { width: 100%; height: 100%; object-fit: cover; }
.shop-main { display: grid; gap: 40px; min-width: 0; }
.shop-sec { scroll-margin-top: 96px; }
.shop-sec h2 { font-size: 24px; line-height: 32px; margin-bottom: 16px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.pcard { display: flex; flex-direction: column; padding: 8px; border-radius: 20px; background: var(--bg); box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(19, 25, 21, 0.05); }
.pcard-img { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--surface); cursor: pointer; }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.pcard-img:hover img { transform: scale(1.04); }
.pcard-noimg { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-3); }
.pcard-noimg .icon { width: 40px; height: 40px; }
.pcard-price { margin: 10px 4px 2px; font-family: var(--font-head); font-size: 20px; line-height: 26px; font-weight: 800; }
.pcard-price small { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pcard-name { padding: 0 4px; border: 0; background: none; text-align: left; font: inherit; font-size: 15px; line-height: 20px; color: var(--ink); cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; }
.pcard-name:hover { color: var(--accent-ink); }
.pcard-meta { padding: 2px 4px 0; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.pcard-act { margin-top: auto; padding-top: 10px; }
.pcard-act [data-qty] { display: block; }
/* Кнопка «+» во всю ширину, после добавления — счётчик */
.pcard-act [data-qty] > .btn { width: 100%; height: 44px; border-radius: 14px; background: var(--surface); color: var(--ink); }
.pcard-act [data-qty] > .btn:hover { background: var(--surface-hover); }
.pcard-act .qty { width: 100%; justify-content: space-between; height: 44px; border-radius: 14px; background: var(--accent); }
.pcard-act .qty button { background: transparent; }
.pcard-act [data-pick] { height: 44px; border-radius: 14px; }
.pcard-act [data-pick].is-added { background: var(--accent); }
.shop-cart { position: sticky; top: 88px; display: flex; flex-direction: column; min-height: 420px; max-height: calc(100vh - 104px); padding: 20px; border-radius: 24px; background: var(--bg); box-shadow: var(--shadow-md); }
.shop-cart h3 { font-size: 22px; line-height: 28px; margin-bottom: 8px; }
.shop-cart .cart-list { padding: 0; flex: 1; }
.shop-cart .cart-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
.shop-cart .cart-row img, .shop-cart .cart-noimg { width: 44px; height: 44px; }
.shop-cart .cart-price { grid-column: 2 / -1; text-align: left; font-size: 14px; }
.shop-cart .cart-foot { padding: 12px 0 0; }
.cart-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 32px 8px; text-align: center; }
.cart-empty .icon { width: 72px; height: 72px; color: var(--accent); stroke-width: 1.5; margin-bottom: 8px; }
.cart-empty b { font-family: var(--font-head); font-size: 20px; line-height: 26px; }
.cart-empty span { color: var(--ink-2); font-size: 14px; line-height: 20px; }
/* Карточка позиции */
.item-dialog { position: relative; max-width: 560px; }
.item-close { position: absolute; top: 12px; right: 12px; z-index: 1; background: rgba(255, 255, 255, 0.92); }
.item-img { aspect-ratio: 4 / 3; background: var(--surface); }
.item-img img { width: 100%; height: 100%; object-fit: cover; }
.item-body { display: grid; gap: 8px; padding: 20px 24px 24px; overflow: auto; }
.item-body h3 { font-size: 22px; line-height: 28px; padding-right: 40px; }
.item-desc { white-space: pre-line; color: var(--ink-2); }
.item-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
.item-foot > b { font-family: var(--font-head); font-size: 24px; }
.item-foot [data-qty] > .btn { width: auto; padding: 0 20px; }
@media (max-width: 1279px) {
  .shop { grid-template-columns: 200px minmax(0, 1fr) 288px; gap: 20px; }
}
@media (max-width: 1023px) {
  /* Телефон и планшет: разделы — лентой сверху, корзина — в нижней панели */
  .shop, .shop.no-nav, .shop.no-cart { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .shop-cart { display: none; }
  .shop-nav { position: sticky; top: 64px; z-index: 5; display: flex; gap: 8px; max-height: none; overflow-x: auto; padding: 8px 0; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter);
    background: var(--bg); scrollbar-width: none; }
  .shop-nav::-webkit-scrollbar { display: none; }
  .shop-nav-item { flex: none; flex-direction: column; gap: 4px; width: 76px; padding: 4px; font-size: 12px; line-height: 16px; text-align: center; }
  .shop-nav-item span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .shop-ico { width: 56px; height: 56px; border-radius: 16px; }
  .shop-sec { scroll-margin-top: 170px; }
}
@media (max-width: 767px) {
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .shop-sec h2 { font-size: 20px; line-height: 28px; }
  .pcard-price { font-size: 18px; }
  .item-img { aspect-ratio: 1; }
}

/* Кабинет: разделы каталога с иконками */
.cat-groups { margin-bottom: 16px; padding: 16px; border-radius: var(--r-16); background: var(--surface); }
.cat-groups-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.cat-groups-list { display: grid; gap: 6px; }
.cat-group { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 6px; border-radius: var(--r-12); background: var(--bg); }
.cat-group-img { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: var(--surface); color: var(--ink-3); border: 2px dashed var(--line); cursor: pointer; }
.cat-group-img.has-img { border: 0; }
.cat-group-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-group-img img.is-fallback { opacity: 0.45; }
.cat-group-img:focus-within { outline: 4px solid var(--focus); }
.cat-group-name { font-weight: 700; overflow-wrap: anywhere; }
.cat-group-move { display: flex; }
.cat-group-move .btn[disabled] { opacity: 0.3; }
.cat-groups-hint { margin-bottom: 12px; }