/* spb-clean · общий CSS сайта
 *
 * Вид — боевой spb-clean.ru (текст 18px/1.4 по ширине, сетка 200 + 30 + 750, объёмные кнопки)
 * плюс переделки теста 27.08: меню на CSS, стекло у таблиц, крошек и подвала.
 *
 * Один файл на весь сайт: браузер скачивает его один раз и дальше берёт из кэша. Слайдер, карта и
 * формы — в конце файла: отдельными файлами они экономили около 1 КБ на странице ценой лишнего
 * запроса там, где нужны. Ширины: телефон — до 767px, планшет — 768–991px.
 *
 * Разбор и решения — servers/panel.fh.spb.ru/spb-clean.ru/wiki/template-j6-rethink-2026-09-10.md
 */

/* ===== Переменные ===== */
:root {
  --brand: #395593;
  --brand-light: #647db5;
  --edge-light: #7189c0;
  --edge-dark: #364f87;
  --ink: #203050;
  --grad-brand: linear-gradient(var(--brand-light), var(--brand));
  --grad-brand-hover: linear-gradient(var(--brand), var(--brand-light));
  --grad-sky: linear-gradient(#73c2fd, #2e8ce3);
  --grad-sky-hover: linear-gradient(#59c2ff, #2e69e3);
}

/* ===== Сброс ===== */
*,
::before,
::after {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: sans-serif;
  color: #000;
  background: #dae2ec url("/images/paper.png");
}

img,
video,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

button,
input,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}

textarea {
  resize: vertical;
}

table {
  border-collapse: collapse;
}

summary {
  cursor: pointer;
}

/* м² в таблицах цен не раздвигает строку */
sup {
  position: relative;
  top: -0.5em;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

/* как на боевом: у списков нет маркеров; где нужны — в статье стоит list-style-type */
ul {
  list-style-type: none;
}

ol {
  list-style-position: inside;
}

dd {
  margin: 0 15px;
}

.visually-hidden,
.skip-link:not(:focus) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link:focus {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
}

/* ===== Сетка: 980 = левая колонка 200 + 30 + статья 750 ===== */
.site-head,
.site-toolbar,
.site-body,
.site-foot {
  max-width: 980px;
  margin-inline: auto;
}

.site-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.site-body:has(> .site-aside) {
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: 30px;
}

/* статья идёт в разметке первой (важнее для чтения и поиска), а на экране — справа */
.site-body:has(> .site-aside) > .site-main {
  grid-area: 1 / 2;
}

.site-aside {
  grid-area: 1 / 1;
  font-size: 14px;
  font-weight: 700;
}

/* ===== Текст статьи — как на боевом ===== */
.site-main {
  min-width: 0;
  padding-bottom: 10px;
  font-size: 18px;
  line-height: 1.4;
  text-align: justify;
}

.site-main :is(h1, h2, h3, h4, h5) {
  font-weight: 700;
  text-align: center;
}

.site-main h1 {
  margin: 0.67em 0;
  font-size: 2em;
}

.site-main h2 {
  margin: 0.83em 0;
  font-size: 1.5em;
}

.site-main p {
  margin: 10px 15px;
  text-indent: 15px;
}

.site-main li {
  padding-right: 15px;
}

.site-main dl {
  margin: 0;
}

.site-main a {
  color: #009ee3;
}

.site-main a:hover {
  color: #b40eb4;
}

.site-main img {
  display: block;
  margin: 0 auto;
}

@media (max-width: 991px) {
  .site-main p {
    margin: 10px 0;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .site-main {
    padding-right: 10px;
  }
}

/* телефон: одна колонка, левой колонки нет — как на боевом */
@media (max-width: 767px) {
  .site-body {
    display: block;
  }

  .site-aside {
    display: none;
  }

  .site-main {
    padding: 0 10px 10px;
    text-align: left;
  }

  .site-main h1 {
    font-size: 24px;
  }

  .site-main h2,
  .site-main h3 {
    font-size: 18px;
  }
}

/* ?tmpl=component — печать и модальные окна, без фона-«бумаги» */
body.component {
  background: #fff;
}

body.component .site-main {
  max-width: 750px;
  margin-inline: auto;
}

/* ===== Матовое стекло: таблицы цен, хлебные крошки, подвал =====
   Размытие фона съедает мелкий узор «бумаги», поэтому шероховатость — SVG-зерно в самой плашке. */
.item-page table,
ol.mod-breadcrumbs,
.site-footer {
  border: 1px solid rgba(255, 255, 255, 0.55);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E"),
    linear-gradient(118deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(255, 255, 255, 0.14) 62%, rgba(255, 255, 255, 0.01) 100%);
  background-size: 100px 100px, auto;
  background-blend-mode: soft-light, normal;
  -webkit-backdrop-filter: blur(1px) saturate(210%) brightness(103%);
  backdrop-filter: blur(1px) saturate(210%) brightness(103%);
}

/* ===== Кнопки =====
   Синяя объёмная — «Сделать заказ», «Обратный звонок», «Скачать анкету» (класс btn-brand в статье).
   Голубая — «Скидки и Акции», «ЛЬГОТЫ», «Заказать химчистку» в подвале. */
.panel__btn,
a.btn-brand {
  border-right: 1px solid var(--edge-dark);
  border-left: 1px solid var(--edge-light);
  background: var(--grad-brand);
  color: #fff;
  text-decoration: none;
}

.panel__btn:hover,
a.btn-brand:hover {
  background: var(--grad-brand-hover);
  color: #fff;
}

.promo__btn,
.site-footer a.site-footer__cta {
  border: 1px solid;
  border-color: #73c8f0 #73c8f0 rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  background: var(--grad-sky);
  box-shadow: inset 0 1px 0 #fff;
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

/* ===== Меню шапки (позиция topbar, html/mod_menu/menu-nav.php) =====
   От 768px — ряд с выпадающими подменю, как на старом сайте; на телефоне — выезжающая панель. */
.menu-nav ul {
  margin: 0;
  padding: 0;
}

.menu-nav > ul > li {
  position: relative;
}

.menu-nav a {
  color: #fff;
  text-decoration: none;
  text-shadow: #111 0 2px 0;
  white-space: nowrap;
}

.menu-nav a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.menu-nav__pigeon {
  flex: none;
  width: 30px;
}

@media (min-width: 768px) {
  .site-nav {
    position: relative;
    z-index: 5; /* над картинкой шапки: её верх на 17px уходит под меню */
  }

  .menu-nav {
    border: 1px solid #444;
    border-radius: 8px;
    background: var(--grad-brand);
    font: 700 19.68px/1.15 sans-serif;
  }

  .menu-nav > ul {
    display: flex;
    flex-wrap: wrap;
  }

  /* пункты тянутся до края ряда */
  .menu-nav > ul > li {
    flex: 1 1 auto;
  }

  .menu-nav a {
    text-align: center;
  }

  .menu-nav > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    padding: 16px 29px;
    border-left: 1px solid var(--edge-light);
    border-right: 1px solid var(--edge-dark);
    background: var(--grad-brand);
    transition: background 0.2s ease;
  }

  .menu-nav > ul > li:first-child > a {
    border-left: 0;
    border-radius: 8px 0 0 8px;
  }

  .menu-nav > ul > li:last-child > a {
    border-right: 0;
    border-radius: 0 8px 8px 0;
  }

  /* наведение и текущий раздел — градиент переворачивается */
  .menu-nav > ul > li > a:hover,
  .menu-nav > ul > li > a:focus-visible,
  .menu-nav > ul > li.active > a {
    background: var(--grad-brand-hover);
  }

  /* голубь съедает часть отступа — пункт остаётся прежней ширины */
  .menu-nav a.menu-nav__charity {
    padding-inline: 20px;
  }

  .menu-nav__pigeon {
    margin-block: -8px;
  }

  /* подменю — стекло поверх страницы */
  .menu-nav ul ul {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    width: max-content;
    min-width: 330px;
    overflow: hidden;
    border-radius: 0 0 5px 5px;
    background: rgba(54, 79, 135, 0.85);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 2px 5px 12px rgba(20, 30, 60, 0.45);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }

  .menu-nav li:hover > ul,
  .menu-nav li:focus-within > ul {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .menu-nav ul ul a {
    display: block;
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 16px;
    transition: background-color 0.15s ease;
  }

  .menu-nav ul ul li:first-child > a {
    border-top: 0;
  }

  .menu-nav ul ul a:hover,
  .menu-nav ul ul a:focus-visible {
    background: rgba(255, 255, 255, 0.14);
  }
}

/* планшет: ряд меню сжимается, а не переносится — как на старом сайте */
@media (min-width: 768px) and (max-width: 991px) {
  .menu-nav {
    font-size: 12px;
  }

  .menu-nav > ul > li {
    flex: 1 1 0;
    min-width: 0;
  }

  .menu-nav > ul > li > a {
    min-height: 0;
    padding: 17px 4px;
  }

  .menu-nav a.menu-nav__charity {
    padding-inline: 4px;
  }

  .menu-nav ul ul {
    min-width: 220px;
  }
}

/* ===== Телефон: полоса сверху и выезжающее меню (nav.js) ===== */
.mobile-bar,
.menu-nav__sub-toggle {
  display: none;
}

@media (max-width: 767px) {
  /* место под полосу; у ?tmpl=component полосы нет */
  body:has(> .mobile-bar) {
    padding-top: 44px;
  }

  .mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
    min-height: 44px;
    background: var(--brand);
    color: #fff;
    font: 700 16px/24px sans-serif;
    text-transform: uppercase;
  }

  .mobile-bar__burger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 0;
    background: none;
    text-transform: inherit;
    cursor: pointer;
  }

  /* три полоски */
  .mobile-bar__icon,
  .mobile-bar__icon::before,
  .mobile-bar__icon::after {
    width: 30px;
    height: 3px;
    background: #fff;
  }

  .mobile-bar__icon {
    display: inline-block;
    position: relative;
  }

  .mobile-bar__icon::before,
  .mobile-bar__icon::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .mobile-bar__icon::before {
    top: -8px;
  }

  .mobile-bar__icon::after {
    bottom: -8px;
  }

  .mobile-bar__phone {
    padding: 10px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
  }

  .site-nav {
    position: fixed;
    top: 44px;
    bottom: 0;
    left: 0;
    z-index: 110;
    width: min(300px, 85vw);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--brand);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  body.nav-open .site-nav {
    transform: none;
  }

  /* затемнение страницы под открытым меню */
  body.nav-open::after {
    content: "";
    position: fixed;
    inset: 44px 0 0;
    z-index: 105;
    background: rgba(10, 20, 45, 0.5);
  }

  .menu-nav {
    font: 700 16px/1.15 sans-serif;
  }

  .menu-nav li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .menu-nav a {
    display: block;
    padding: 14px 44px 14px 16px;
    text-align: left;
  }

  .menu-nav > ul > li > a:hover,
  .menu-nav > ul > li.active > a,
  .menu-nav ul ul a:hover {
    background: rgba(255, 255, 255, 0.12);
  }

  .menu-nav a.menu-nav__charity {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-inline: 16px 44px;
  }

  /* подменю — аккордеоном: наведения на тач-экране нет */
  .menu-nav__sub-toggle {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 50px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .menu-nav__sub-toggle::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    margin: 0 auto;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }

  .menu-nav .sub-open > .menu-nav__sub-toggle::before {
    transform: rotate(-135deg);
  }

  .menu-nav ul ul {
    display: none;
    background: rgba(0, 0, 0, 0.18);
  }

  .menu-nav .sub-open > ul {
    display: block;
  }

  .menu-nav ul ul a {
    padding-left: 30px;
    font-size: 15px;
  }
}

/* ===== Шапка: ссылка-логотип, телефон, картинка (модули 111 и 124) ===== */
.site-banner {
  display: flow-root; /* отрицательный отступ картинки не утягивает за собой весь блок */
  position: relative;
}

.site-banner .logo {
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  width: 143px;
  height: 105px;
}

.site-banner .telephone {
  position: absolute;
  top: 10px;
  right: 3px;
  z-index: 1;
  color: #083646;
  font-size: 22px;
  font-weight: 800;
  text-decoration: none;
}

.site-banner picture,
.site-banner .banner {
  display: block;
}

.site-banner .banner {
  width: 100%;
  margin-top: -17px; /* как на боевом: верх картинки уходит под меню */
}

@media (max-width: 767px) {
  .site-banner .banner {
    margin-top: 0;
  }

  /* вся картинка — ссылка на главную, телефон уже в полосе сверху */
  .site-banner .logo {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .site-banner .telephone {
    display: none;
  }
}

/* ===== Панель под шапкой (модуль 112): заказ и обратный звонок =====
   1.1.4: соцсети переехали в подвал (.site-footer__social), картинка «Способы оплаты» убрана. */
.panel {
  display: flex;
  align-items: center;
  min-height: 50px;
}

/* объёмная кнопка: тень-«подложка» и кружок со значком справа */
.panel__btn {
  position: relative;
  flex: none;
  margin: 5px 0;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 #8aa0d0, 0 5px 0 0 var(--ink), 0 10px 5px #999;
  font-size: 15px;
  text-shadow: 0 2px 0 #111;
}

.panel__btn--order {
  padding: 10px 50px 10px 20px;
}

.panel__btn--call {
  margin-left: auto;
  padding: 10px 40px 10px 14px;
}

.panel__btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 20px;
  height: 20px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--ink) no-repeat center;
  box-shadow: inset 0 1px 0 #203151, 0 1px 0 #c3d0e7;
}

.panel__btn--order::before {
  background-image: url("/images/right_arrow.png");
}

.panel__btn--call::before {
  background-image: url("/images/tel.png");
}

/* нажатие — кнопка проседает на подложку */
.panel__btn:active {
  top: 3px;
  box-shadow: inset 0 1px 0 #8aa0d0, 0 2px 0 0 var(--ink), 0 5px 3px #999;
}

/* телефон: панель не показываем. Кнопки на узком экране и раньше были скрыты (там стояли только соцсети),
   а позвонить и заказать можно из полосы сверху и из подвала */
@media (max-width: 767px) {
  .panel {
    display: none;
  }
}

/* ===== Левая колонка: кнопки (модуль 113) и меню услуг (html/mod_menu/side-menu.php) ===== */
.promo {
  width: 200px;
}

.promo__btn {
  display: block;
  box-sizing: content-box;
  width: 125px;
  margin: 5px 2px;
  padding: 11px 34px;
  text-shadow: #111 0 2px 0;
}

.promo__btn:hover {
  background: var(--grad-sky-hover);
}

.promo__btn--red {
  border-color: #e32e2e #e32e2e rgba(0, 0, 0, 0.25);
  background: linear-gradient(#fd7373, #e32e2e);
  letter-spacing: 4px;
}

.promo__btn--red:hover {
  background: linear-gradient(#e32e2e, #fd7373);
}

/* плашки меню услуг нарисованы градиентом — прежде был спрайт vert_menu.png */
.side-menu {
  margin: 5px 0;
  padding: 0;
}

.side-menu a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 55px;
  padding: 8px 12px;
  border: 1px solid #c3c2c2;
  border-radius: 5px;
  background: linear-gradient(#f0f0f0 0%, #f4f4f4 38%, #ecebeb 82%, #f0f0f0 100%);
  color: #0066cc;
  text-align: center;
  text-decoration: none;
  text-shadow: #ddd 1px 1px 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.side-menu a:hover,
.side-menu a:focus-visible {
  border-color: #2f8fd8;
  background: linear-gradient(#0e8bff 0%, #3fa9f5 6%, #3fa9f5 88%, #3998dc 100%);
  color: #fff;
  text-shadow: #1185ee 2px 2px 0;
}

/* страница, на которой стоишь */
.side-menu .active > a {
  border-color: #9dc4e6;
  background: linear-gradient(#e2eefb 0%, #d3e5f8 60%, #c9dff5 100%);
  color: #12508f;
  text-shadow: #fff 0 1px 0;
}

.side-menu a:active {
  background: linear-gradient(#3998dc 0%, #3fa9f5 40%, #0e8bff 100%);
}

/* ===== Хлебные крошки ===== */
.mod-breadcrumbs__wrapper {
  margin-top: 5px;
}

ol.mod-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.15rem;
  margin: 0;
  padding: 0.45rem 0.9rem;
  list-style: none;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(20, 35, 70, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(90, 110, 150, 0.12);
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: left;
}

.mod-breadcrumbs__here {
  margin-right: 0.2rem;
  color: #7a869e;
}

.mod-breadcrumbs__item {
  display: flex;
  align-items: center;
}

.mod-breadcrumbs__item a {
  color: var(--brand);
}

.mod-breadcrumbs__item.active span {
  color: #47536b;
  font-weight: 600;
}

/* разделитель — «↦», как на старом сайте */
.mod-breadcrumbs__item + .mod-breadcrumbs__item::before {
  content: "↦";
  padding: 0 0.4rem;
  color: #9aa5bb;
}

/* ссылки крошек и подвала: без подчёркивания, при наведении — тонкая линия снизу */
.mod-breadcrumbs__item a,
.site-footer__col a {
  border-bottom: 1px solid transparent;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.mod-breadcrumbs__item a:hover,
.mod-breadcrumbs__item a:focus-visible,
.site-footer__col a:hover,
.site-footer__col a:focus-visible {
  border-bottom-color: rgba(28, 86, 168, 0.45);
  color: #1c56a8;
}

/* ===== Статьи ===== */

/* таблицы цен: строки чередуются без линеек, строка под курсором или пальцем подсвечивается */
.item-page table {
  width: 100%;
  margin: 1rem 0 1.5rem;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(20, 35, 70, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  overflow: hidden;
  font-size: 17px;
}

.item-page th,
.item-page td {
  padding: 0.65rem 0.9rem;
  border: 0;
  text-align: left;
  text-indent: 0;
}

/* строка заголовка — в какой бы форме её ни написали в статье */
.item-page thead th,
.item-page tbody > tr:first-child > th {
  background: rgba(57, 85, 147, 0.72);
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(15, 25, 50, 0.45);
}

.item-page tbody tr {
  transition: background-color 0.15s ease;
}

.item-page tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.13);
}

.item-page tbody tr:hover,
.item-page tbody tr:active,
.item-page tbody tr:focus-within {
  background: rgba(100, 125, 181, 0.26);
}

@media (hover: none) {
  .item-page tbody tr:active {
    background: rgba(100, 125, 181, 0.3);
  }
}

/* классы старого сайта — по боевому min.css */
.item-page .front {
  float: left;
  margin: 0 6px 10px;
}

.item-page .r-float {
  float: right;
  margin: 0 5px 5px;
}

.item-page .imgshadow {
  border-radius: 5px;
  box-shadow: 3px 3px 8px #1a3457;
}

.item-page .text-center,
.item-page .imgp {
  text-align: center;
  text-indent: 0;
}

.item-page .underline {
  text-decoration: underline;
}

.item-page .big-red {
  color: red;
  font-size: 20px;
}

/* «Ответы технолога» */
.item-page .question {
  color: #1c428e;
  font-size: 1.3em;
  font-weight: 700;
  text-align: left;
  text-indent: 1px;
}

/* «Услуги»: плитки со ссылками; цвет при наведении не меняется — как на боевом */
.item-page .vseuslugi div {
  display: inline-block;
  width: 200px;
  margin: 10px 20px;
  vertical-align: top;
}

.item-page .vseuslugi a {
  display: block;
  color: #009ee3;
  text-align: center;
}

/* «Стирка ковров»: цена стирки красным, химчистки — зелёным */
.item-page .stirka td:nth-child(2) {
  width: 20%;
  color: red;
  text-align: center;
}

.item-page .stirka td:nth-child(3) {
  color: green;
  text-align: center;
}

/* «Химчистка салона автомобиля» */
.item-page table.avto-table {
  width: 720px;
  max-width: 100%;
}

.item-page .avto-table th,
.item-page .avto-table td {
  text-align: center;
}

.item-page .avto-table th {
  font-size: 16px;
}

.item-page .avto-table td {
  font-size: 18px;
}

.item-page .avto-table td:first-child {
  text-align: left;
}

/* «Работа в компании»: ссылка «Скачать анкету» кнопкой */
a.btn-brand {
  display: block;
  position: relative;
  float: left;
  padding: 10px;
  border-radius: 11px;
  text-align: center;
  text-shadow: 0 -1px 0 #111;
}

/* «Просмотров» на странице «О компании» */
.item-page .badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  background: #2e69e3;
  color: #fff;
  font-size: 0.85rem;
}

/* hCard — адрес и телефон пункта приёма */
.item-page .vcard {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--brand);
  border-radius: 4px;
  background: #f0f4fb;
  line-height: 1.7;
  text-align: left;
}

.item-page .vcard .fn.org {
  color: var(--brand);
  font-weight: 700;
}

.item-page .vcard > div {
  margin: 0.15rem 0;
}

@media (max-width: 991px) {
  .item-page table {
    table-layout: fixed;
    font-size: 12px;
  }

  .item-page .avto-table th,
  .item-page .avto-table td {
    font-size: 12px;
  }
}

@media (max-width: 767px) {
  .item-page .avto-table {
    display: block;
    overflow-x: auto;
  }

  .item-page .vseuslugi div {
    width: 45%;
    margin: 10px 2%;
  }
}

/* ===== Подвал (модуль 114): колонки ссылок, контакты, строка о персональных данных ===== */
.site-foot {
  padding: 1rem 0 1.5rem;
  color: #808080;
}

.site-foot a {
  color: var(--brand);
}

.site-footer {
  padding: 1.5rem 1.25rem 1rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20, 35, 70, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(90, 110, 150, 0.14);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem 1.5rem;
}

.site-footer__col h3 {
  margin: 0 0 0.6rem;
  color: #2d4478;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.site-footer__col ul {
  margin: 0;
  padding: 0;
}

.site-footer__col li + li {
  margin-top: 0.35rem;
}

/* во второй колонке две группы — второму заголовку нужен воздух */
.site-footer__col ul + h3 {
  margin-top: 1.1rem;
}

.site-footer__col a {
  color: #47536b;
  font-size: 0.875rem;
  line-height: 1.35;
}

.site-footer__contacts {
  color: #47536b;
  font-size: 0.875rem;
  line-height: 1.5;
}

.site-footer__contacts p {
  margin: 0 0 0.5rem;
}

.site-footer a.site-footer__phone {
  display: inline-block;
  color: #1f3a6b;
  font-size: 1.15rem;
  font-weight: 700;
  white-space: nowrap;
}

.site-footer a.site-footer__cta {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.65rem 1.5rem;
  font-size: 0.9rem;
  text-shadow: #111 0 1px 0;
  transition: background 0.15s ease;
}

.site-footer a.site-footer__cta:hover,
.site-footer a.site-footer__cta:focus-visible {
  border-bottom-color: rgba(0, 0, 0, 0.25);
  background: var(--grad-sky-hover);
  color: #fff;
}

.site-footer__legal {
  margin-top: 1.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(90, 110, 150, 0.18);
}

.site-footer__legal p {
  margin: 0;
  font-size: 0.82rem;
  text-align: center;
}

/* ===== Соцсети в подвале (модуль 114, с 1.1.4) =====
   Разметка — <ul class="site-footer__social"> со ссылками .soc .soc--<сеть> и скрытой подписью внутри (пустую ссылку
   редактор вычистил бы). Значки — Simple Icons 16.30.0 (CC0), маской из data URI: цвет даёт currentColor, лишних
   запросов нет. Спокойное состояние — стеклянный кружок в тон подвала, при наведении — цвет сети. */
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.site-footer a.soc {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(57, 85, 147, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 6px rgba(20, 35, 70, 0.06);
  color: rgba(45, 68, 120, 0.55);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.site-footer a.soc::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.site-footer a.soc:hover,
.site-footer a.soc:focus-visible {
  border-color: transparent;
  background-color: var(--soc, var(--brand));
  box-shadow: 0 6px 14px rgba(20, 35, 70, 0.18);
  color: #fff;
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .site-footer a.soc {
    transition: none;
  }

  .site-footer a.soc:hover,
  .site-footer a.soc:focus-visible {
    transform: none;
  }
}

.soc--vk { --soc: #0077ff; }
.soc--ok { --soc: #ee8208; }
.soc--yt { --soc: #ff0000; }
.soc--fb { --soc: #0866ff; }
.soc--x  { --soc: #000; }

.soc--vk { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9.489.004.729-.003h3.564l.73.003.914.01.433.007.418.011.403.014.388.016.374.021.36.025.345.03.333.033c1.74.196 2.933.616 3.833 1.516.9.9 1.32 2.092 1.516 3.833l.034.333.029.346.025.36.02.373.025.588.012.41.013.644.009.915.004.98-.001 3.313-.003.73-.01.914-.007.433-.011.418-.014.403-.016.388-.021.374-.025.36-.03.345-.033.333c-.196 1.74-.616 2.933-1.516 3.833-.9.9-2.092 1.32-3.833 1.516l-.333.034-.346.029-.36.025-.373.02-.588.025-.41.012-.644.013-.915.009-.98.004-3.313-.001-.73-.003-.914-.01-.433-.007-.418-.011-.403-.014-.388-.016-.374-.021-.36-.025-.345-.03-.333-.033c-1.74-.196-2.933-.616-3.833-1.516-.9-.9-1.32-2.092-1.516-3.833l-.034-.333-.029-.346-.025-.36-.02-.373-.025-.588-.012-.41-.013-.644-.009-.915-.004-.98.001-3.313.003-.73.01-.914.007-.433.011-.418.014-.403.016-.388.021-.374.025-.36.03-.345.033-.333c.196-1.74.616-2.933 1.516-3.833.9-.9 2.092-1.32 3.833-1.516l.333-.034.346-.029.36-.025.373-.02.588-.025.41-.012.644-.013.915-.009ZM6.79 7.3H4.05c.13 6.24 3.25 9.99 8.72 9.99h.31v-3.57c2.01.2 3.53 1.67 4.14 3.57h2.84c-.78-2.84-2.83-4.41-4.11-5.01 1.28-.74 3.08-2.54 3.51-4.98h-2.58c-.56 1.98-2.22 3.78-3.8 3.95V7.3H10.5v6.92c-1.6-.4-3.62-2.34-3.71-6.92Z'/%3E%3C/svg%3E"); }
.soc--ok { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0a6.2 6.2 0 0 0-6.194 6.195 6.2 6.2 0 0 0 6.195 6.192 6.2 6.2 0 0 0 6.193-6.192A6.2 6.2 0 0 0 12.001 0zm0 3.63a2.567 2.567 0 0 1 2.565 2.565 2.568 2.568 0 0 1-2.564 2.564 2.568 2.568 0 0 1-2.565-2.564 2.567 2.567 0 0 1 2.565-2.564zM6.807 12.6a1.814 1.814 0 0 0-.91 3.35 11.611 11.611 0 0 0 3.597 1.49l-3.462 3.463a1.815 1.815 0 0 0 2.567 2.566L12 20.066l3.405 3.403a1.813 1.813 0 0 0 2.564 0c.71-.709.71-1.858 0-2.566l-3.462-3.462a11.593 11.593 0 0 0 3.596-1.49 1.814 1.814 0 1 0-1.932-3.073 7.867 7.867 0 0 1-8.34 0c-.318-.2-.674-.29-1.024-.278z'/%3E%3C/svg%3E"); }
.soc--yt { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E"); }
.soc--fb { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E"); }
.soc--x { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'/%3E%3C/svg%3E"); }

@media (max-width: 767px) {
  .site-foot {
    padding-inline: 8px;
  }

  .site-footer {
    padding: 1.25rem 1rem 0.85rem;
  }

  .site-footer__cols {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
  }
}

/* ===== Слайдер на главной (#slider из статьи) =====
   Пять слайдов в одной ячейке сетки, анимация одна на всех — класс слайда задаёт только задержку старта. */

#slider {
  position: relative;
  width: 680px;
  max-width: 100%;
  margin: 40px auto 0;
  border: 5px solid #eaeaea;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
}

#mask {
  overflow: hidden;
  aspect-ratio: 7 / 3;
}

#slider ul {
  display: grid;
  height: 100%;
  margin: 0;
  padding: 0;
}

#slider li {
  grid-area: 1 / 1;
  position: relative;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  animation: slider-cycle 25s linear infinite;
}

#slider li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#slider .secondanimation { animation-delay: 5s; }
#slider .thirdanimation  { animation-delay: 10s; }
#slider .fourthanimation { animation-delay: 15s; }
#slider .fifthanimation  { animation-delay: 20s; }

@keyframes slider-cycle {
  0%        { opacity: 0; }
  2%, 18%   { opacity: 1; }
  20%, 100% { opacity: 0; }
}

/* подпись выезжает слева при наведении */
#slider .tooltip {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 305px;
  height: 60px;
  background: rgba(0, 0, 0, 0.7);
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
}

#slider .tooltip h5 {
  margin: 0;
  padding-left: 10px;
  color: #fff;
  font-size: 20px;
  font-weight: 100;
  line-height: 60px;
}

#slider li:hover .tooltip {
  transform: none;
}

#slider .progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: #000;
  transform-origin: left;
  animation: slider-progress 25s linear infinite;
}

@keyframes slider-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

#slider:hover li,
#slider:hover .progress-bar {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  #slider li,
  #slider .progress-bar {
    animation: none;
  }

  #slider li.firstanimation {
    opacity: 1;
  }
}

/* ===== «Контакты и карта»: карта пунктов приёма, фото в балунах, аккордеон районов ===== */

#YMapsID {
  width: 100%;
  max-width: 700px;
  height: 500px;
  margin: 1.5rem auto;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(20, 35, 70, 0.12);
  overflow: hidden;
}

/* карта не загрузилась — map.js пишет об этом в блок */
#YMapsID.map-failed {
  display: grid;
  place-items: center;
  height: auto;
  min-height: 120px;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.5);
}

/* фото пункта в балуне: оригиналы 400×300 */
[class*="ymaps"][class*="balloon"] img {
  display: block;
  width: 100%;
  max-width: 260px;
  margin-bottom: 0.5rem;
  border-radius: 6px;
}

/* районы — <details>, без скриптов */
.item-page details.view-source {
  margin: 0 0 4px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.15s ease;
}

.item-page details.view-source:hover,
.item-page details.view-source[open] {
  background: rgba(255, 255, 255, 0.6);
}

.item-page details.view-source > summary {
  padding: 0.7rem 1rem;
  list-style: none;
}

.item-page details.view-source > summary::-webkit-details-marker {
  display: none;
}

.item-page details.view-source > summary h3 {
  display: inline;
  margin: 0;
  color: var(--brand);
  font-size: 1.05rem;
}

/* стрелка справа поворачивается, когда район открыт */
.item-page details.view-source > summary::after {
  content: "";
  float: right;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-right: 2px solid var(--brand-light);
  border-bottom: 2px solid var(--brand-light);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.item-page details.view-source[open] > summary::after {
  margin-top: 10px;
  transform: rotate(-135deg);
}

.item-page details.view-source > .vcard,
.item-page details.view-source > div {
  margin: 0;
  padding: 0 1rem 0.9rem;
  background: none;
}

/* ===== Формы заявок «Обратный звонок» и «Заказать уборку» ===== */

.item-page .form {
  margin-bottom: 40px;
  padding-top: 20px;
}

/* подпись и поле в строку; font-size: 0 убирает пробел между inline-block */
.item-page .form-item {
  margin-bottom: 20px;
  font-size: 0;
}

.item-page .form-item > .form-item-label {
  display: inline-block;
  width: 130px;
  margin-top: 5px;
  font-size: 18px;
  vertical-align: top;
}

.item-page .form-item-input {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
}

.item-page .form-item-input input[type="text"],
.item-page .form-item-input input[type="tel"],
.item-page .form-item-input input[type="email"],
.item-page .form-item-input textarea {
  width: 260px;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid #cfd8ea;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.75);
  font-size: 16px;
}

.item-page .form-item-input textarea {
  line-height: 1.5;
}

.item-page .form-item-input input:focus,
.item-page .form-item-input textarea:focus {
  outline: 2px solid var(--brand-light);
  outline-offset: 1px;
}

.item-page .form-item-input button {
  padding: 9px 26px;
  border: 1px solid #2e8ce3;
  border-radius: 5px;
  background: var(--grad-sky);
  box-shadow: inset 0 1px 0 #fff;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-shadow: #111 0 1px 0;
  cursor: pointer;
  transition: background 0.2s ease;
}

.item-page .form-item-input button:hover {
  background: var(--grad-sky-hover);
}

.item-page .form-item-input button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* подпись у галочки согласия */
.item-page .form-item-input .form-item-label {
  font-size: small;
  line-height: 17px;
}

/* появляется вместо формы, когда заявка принята (forms.js) */
.item-page .form-sent {
  padding: 1rem 1.25rem;
  border: 1px solid rgba(46, 140, 227, 0.35);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 767px) {
  .item-page .form-item > .form-item-label {
    display: block;
    width: auto;
  }

  .item-page .form-item-input,
  .item-page .form-item-input input,
  .item-page .form-item-input textarea {
    width: 100%;
  }
}