/* Новое оформление сайта — перенесено с примера _preview/primer/zamena-smesitelya.html на все страницы (просьба владельца 28.10.2026).
   Подключается последним на каждой странице (_src/build.ps1), поверх старых design-3.css и static.css.
   Меняются: кнопки звонка, главное меню, боковое меню, логотип, шапка, полоса с галочками, «Акции», отзывы.
   Цвет — прежний синий сайта #0985E0 (владелец 28.10.2026: «верни цвет сайту, только цвет»). */
:root {
  --main: #0985E0; --btn: #0985E0; --btn-hover: #0773C2; --light: #E8F3FC; --light-2: #F4F9FE; --line: #E1E8EF;
  --ink: #222; --muted: #555;
}

/* ===== Кнопки звонка — синие, белый текст ===== */
.button, a.button { background: var(--btn); border-radius: 8px; font-weight: 700; }
.button:hover, a.button:hover, a.button:focus { background: var(--btn-hover); opacity: 1; }
#header_zayavka a { background: var(--btn); border-color: var(--btn); color: #fff; border-radius: 8px; }
#header_zayavka a:hover, #header_zayavka a:focus { background: var(--btn-hover); border-color: var(--btn-hover); color: #fff; }
#header_zayavka .fa { color: #fff; }
#header .hdslide_contact_zayvka a { background: var(--btn); border-radius: 8px; }
#header .hdslide_contact_zayvka a:hover { background: var(--btn-hover); }
.phone-fixed { background-color: var(--btn); }

/* ===== Адрес убран из шапки (клиенты по нему прийти не могут); вместо него — «Мурманск и пригород» (см. ниже) ===== */

/* ===== Логотип слева от названия (с 30.10.2026 — дома над волнами, выбор владельца) ===== */
#header_logo_img img, #header_logo_img-2 img, #header_logo_img-3 img { display: block; width: 50px; height: 50px; margin-right: 12px; }
#header .head_slide #header_logo_img-3 img { width: 32px; height: 32px; margin: 4px 10px 0 0; }
#header .header__mobile .header__mobile-logo { flex-shrink: 0; }
#header .header__mobile #header_logo_img img { width: 48px; height: 48px; margin-right: 0; }

/* ===== Главное меню: компьютер ===== */
@media (min-width: 769px) {
  #top_menu { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  #top_menu_main, #flvmenu { background: #fff; }
  #top_menu a { color: var(--ink); text-transform: none; }
  #top_menu ul li:hover, #top_menu ul li.root-item-selected, #top_menu ul li.item-selected,
  #flvmenu ul li:hover, #flvmenu ul li.root-item-selected, #flvmenu ul li.item-selected { background: transparent; }

  /* Пункты верхнего уровня: обычные буквы, при наведении — синий текст и черта снизу */
  #flvmenu > ul > li > a { color: var(--ink); text-transform: none; font-size: 16px; font-weight: 600; padding: 17px 26px; box-shadow: inset 0 -3px 0 transparent; transition: color .15s, box-shadow .15s; }
  #flvmenu > ul > li:hover > a, #flvmenu > ul > li > a:hover, #flvmenu > ul > li > a:focus { color: var(--main); box-shadow: inset 0 -3px 0 var(--main); }
  #flvmenu > ul > li.root-item > a:first-child { padding-right: 42px; }
  #flvmenu > ul > li > a.flarr, #flvmenu > ul > li:hover > a.flarr { box-shadow: none; }
  #flvmenu > ul > li > a.flarr:after { color: var(--ink); }
  #flvmenu > ul > li:hover > a.flarr:after { color: var(--main); }

  /* Выпадающее меню: светлая панель, при наведении — светло-голубой фон вместо сплошной заливки */
  #flvmenu > ul > li ul { padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 12px 32px rgba(21, 41, 43, .14); }
  #flvmenu > ul > li ul li { width: 270px; border-top: 0; border-radius: 6px; }
  #flvmenu > ul > li ul li a { padding: 10px 34px 10px 14px; color: var(--ink); text-transform: none; font-size: 15px; }
  #top_menu ul li ul li:hover, #top_menu ul li ul li.root-item-selected, #top_menu ul li ul li.item-selected,
  #flvmenu > ul > li ul li:hover { background: var(--light); }
  #flvmenu > ul > li ul li:hover > a, #flvmenu > ul > li ul li:hover a.flarr, #flvmenu > ul > li ul li.root-item-selected > a { color: var(--main); }
  #flvmenu > ul > li ul li a.flarr:after, #flvmenu > ul > li ul li:hover > a.flarr:after { top: 11px; color: var(--main); }
}

/* ===== Главное меню: телефон ===== */
@media (max-width: 768px) {
  #flvmenu > ul, #flvmenu > ul li ul { background: #fff; }
  #top_menu ul li:hover, #top_menu ul li.root-item-selected, #top_menu ul li.item-selected,
  #flvmenu ul li:hover, #top_menu ul li ul li:hover { background: transparent; }
  #flvmenu > ul { border-top: 1px solid var(--line); box-shadow: 0 14px 24px rgba(21, 41, 43, .14); }
  #flvmenu > ul > li { border-bottom: 1px solid var(--line); }
  #flvmenu > ul li a { color: var(--ink) !important; text-transform: none; font-size: 17px; font-weight: 600; }
  #flvmenu > ul li ul { background: var(--light-2); }
  #flvmenu > ul > li > ul > li a { color: var(--muted) !important; font-size: 16px; font-weight: 500; }
  #flvmenu .flarr .fa { color: var(--main); }
}

/* ===== Боковое меню: без заливок и стрелок «›», разделы — линиями, текущая страница — светло-голубым фоном ===== */
ul#vertical-multilevel-menu { border: 0; border-top: 1px solid var(--line); }
ul#vertical-multilevel-menu li { border-bottom: 1px solid var(--line); }
#section_element_menu ul#vertical-multilevel-menu li > a::before { content: none !important; padding: 0; }
#section_element_menu ul#vertical-multilevel-menu > li > a { padding: 14px 44px 14px 12px; border-radius: 6px; color: var(--ink); background: none; font-size: 16px; font-weight: 600; }
#section_element_menu ul#vertical-multilevel-menu > li.menu-section-active2 > a,
#section_element_menu ul#vertical-multilevel-menu > li.menu-section-drive-active > a { background: none; color: var(--main); }
/* Наведение (просьба владельца 28.10): пункт заливается синим, текст белый.
   Белый текст при наведении задан ещё в design-3.css с !important — поэтому светлый фон давал «невидимый» текст. */
#section_element_menu ul#vertical-multilevel-menu li a:hover,
#section_element_menu ul#vertical-multilevel-menu li a:focus-visible,
#section_element_menu ul.menu-element-list-active2 a.item-selected:hover { background: var(--main); color: #fff !important; }
#sidebar_menu li.menu-section > a:hover ~ .section-toggle { color: #fff; }
/* Текущий раздел открыт сразу (на сайте сейчас ошибка: кнопка показывает «−», а список скрыт правилом .menu-element-list {display:none}) */
#section_element_menu .menu-element-list-active2 { display: block; }
/* Пункты внутри раздела — одинаково для текущего раздела и для раскрытых кнопкой */
#section_element_menu ul.menu-element-list { padding: 0 0 10px; border: 0; background: none; }
#section_element_menu ul.menu-element-list a { position: relative; margin-bottom: 1px; padding: 8px 30px 8px 26px; border-radius: 6px; color: #333; font-size: 15px; font-weight: 400; }
/* Стрелка «›» справа у каждой услуги и у пунктов без подменю — знак, что пункт можно выбрать (просьба владельца 28.10).
   Цвет — как у текста (currentColor): обычный пункт — тёмная, текущая страница — синяя, при наведении — белая. */
#section_element_menu ul.menu-element-list a::after,
#section_element_menu ul#vertical-multilevel-menu > li:not(:has(> ul)) > a::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg);
}
#section_element_menu ul#vertical-multilevel-menu > li > a { position: relative; }
#section_element_menu ul.menu-element-list-active2 a.item-selected,
#section_element_menu ul.menu-element-list-active2 a.item-selected:hover,
#sidebar_menu a[aria-current="page"] { background: var(--light); color: var(--main); font-weight: 600; }

/* Кнопка раскрытия раздела: вместо «+/−» — галочка, которая поворачивается */
.section-toggle { top: 9px; right: 0; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 6px; color: var(--main); font-size: 0; }
.menu-section-active2 > .section-toggle { color: var(--main); }
.section-toggle::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.section-toggle[aria-expanded="true"]::before { transform: translateY(2px) rotate(-135deg); }
.section-toggle:hover { background: var(--light); }

/* Полоса из 4 пунктов с галочками под первым экраном: пункты одной высоты, значки на одной линии.
   Было: пункты — строчные блоки с обтеканием, при ширине окна ~1000–1200 px текст разной длины сдвигал значки по высоте. */
#block_company_main ul { display: flex; align-items: stretch; gap: 3%; margin: 0; padding: 0; }
#block_company ul li { display: flex; align-items: center; gap: 14px; flex: 1 1 0; min-width: 0; width: auto; margin: 0; }
#block_company .fa { float: none; flex: none; font-size: 3.4em; }
#block_company .title { float: none; width: auto; margin: 0; font-size: 1.2em; line-height: 1.3; }

/* Отзывы с Авито текстом вместо скриншотов (просьбы владельца 28.10): читают и поисковики, и люди;
   все отзывы с оценкой «5» в одну строку, листаются стрелками (и пальцем на телефоне).
   Разметка — _src/partials/otzyvy.html и страница «Отзывы», заполняет _preview/primer/otzyvy.py; скрипт — /assets/js/otzyvy.js. */
.rv-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.rv-count { min-width: 92px; color: var(--muted); font-size: 15px; text-align: center; }
.rv-nav { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--main); border-radius: 50%; background: #fff; color: var(--main); cursor: pointer; }
.rv-nav:hover:not(:disabled), .rv-nav:focus-visible { background: var(--main); color: #fff; }
.rv-nav:disabled { border-color: var(--line); color: #B5BEC6; cursor: default; }
.rv-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 2px 2px 6px; scrollbar-width: none; }
.rv-track::-webkit-scrollbar { display: none; }
.rv-track:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }
.rv { display: flex; flex-direction: column; flex: 0 0 calc((100% - 32px) / 3); box-sizing: border-box; scroll-snap-align: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: 15px; line-height: 1.45; }
/* Длинный текст — 7 строк, остальное по кнопке «Читать полностью» (весь текст в коде страницы) */
.rv .rv__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.rv--open .rv__text { display: block; -webkit-line-clamp: unset; max-height: 15em; overflow-y: auto; }
.rv__more { align-self: flex-start; margin-top: auto; padding: 8px 0 0; border: 0; background: none; color: var(--main); font-weight: 600; cursor: pointer; }
.rv__more:hover { text-decoration: underline; }
@media (max-width: 992px) { .rv { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 767px) { .rv { flex-basis: 86%; } }
/* Отзывы в колонке текста вместо старых скриншотов «Отзывы о нашей работе» (решение владельца 28.10): по 2 в ряд */
.reviews-avito--content { margin: 10px 0 30px; padding: 0; }
.reviews-avito--content .reviews-avito__head { margin-bottom: 10px; }
.reviews-avito--content .reviews-avito__head h2 { margin: 0 15px 0 0; }
.reviews-avito--content .reviews-avito__note { margin: 0 0 15px; }
.reviews-avito--content .rv { flex-basis: calc((100% - 16px) / 2); }
@media (max-width: 767px) { .reviews-avito--content .rv { flex-basis: 86%; } }
/* На главной нет боковой колонки — лента во всю ширину, по 3 отзыва в ряд (на узком окне 2, на телефоне 1) */
@media (min-width: 993px) { .reviews_index .reviews-avito--content .rv { flex-basis: calc((100% - 32px) / 3); } }
/* Под полосой с галочками отзывов (скриншотов Авито) больше нет — отступ до меню и текста меньше (было 70 px) */
@media (min-width: 769px) { #wrapper-2 { padding-top: 40px; } }
.rv__head { display: flex; align-items: center; gap: 10px; }
.rv .rv__ava { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.rv__ava--letter { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 19px; line-height: 1; }
.rv__name { font-weight: 700; font-size: 16px; }
.rv__role { font-weight: 400; font-size: 13px; color: var(--muted); }
.rv__date { font-size: 13px; color: var(--muted); }
.rv__meta { margin-top: 8px; font-size: 13px; color: var(--muted); }
.rv__stars { margin-right: 4px; color: #E8A800; letter-spacing: 1px; }
.rv__text { margin: 8px 0 0; }

/* Блок «Акции» под боковым меню: обычные буквы, строки через линию вместо карточек с синей полосой */
#sidebar_action_block .title { text-transform: none; font-size: 19px; font-weight: 700; }
.sidebar-discounts .discount-card { margin: 0; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; }
.sidebar-discounts .discount-card__amount { color: var(--btn); font-size: 19px; font-weight: 700; }

/* Блок «Свяжитесь с нами для оформления заказа» у карты: рамка из синих точек и скруглённые углы — как у «Консультации
   по телефону» на первом экране (просьба владельца 28.10.2026). Было: серая штриховая рамка 2px dashed #e4e4e4. */
.map_form .form { position: relative; border-color: transparent; border-radius: 16px; }
.map_form .form::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 12px;
  background-image:
    radial-gradient(circle, #0985e0 1.5px, transparent 1.6px),
    radial-gradient(circle, #0985e0 1.5px, transparent 1.6px),
    radial-gradient(circle, #0985e0 1.5px, transparent 1.6px),
    radial-gradient(circle, #0985e0 1.5px, transparent 1.6px);
  background-size: 7px 3px, 7px 3px, 3px 7px, 3px 7px;
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  pointer-events: none;
}

/* Подвал на телефоне (29.10.2026): блок был шире экрана на 20px (ширина 100% плюс поля) — текст сдвигался и обрезался
   справа, а строку с ИНН закрывала круглая кнопка звонка. Поля — внутри ширины, снизу запас, чтобы текст был выше кнопки. */
@media (max-width: 768px) { #footer_bottom_main { box-sizing: border-box; padding: 30px 16px 100px; } }

/* Главная на телефоне (30.10.2026): заголовок H1 лежит прямо в #wrapper-2 без полей и стоял вплотную к краю экрана и к фото
   первого экрана. Поля — как у #content на остальных страницах: 20px сверху, 11.25px по бокам. */
@media (max-width: 768px) { #wrapper-2 > h1 { padding: 20px 11.25px 0; } }

/* Верхняя строка шапки: слева от поиска — геоточка и «Мурманск и пригород», без точного адреса (владелец 30.10.2026) */
#header_top_geo { float: left; display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 0.95em; color: #222; }
#header_top_geo .geo-icon { flex: none; width: 17px; height: 17px; color: var(--main); }
/* На телефоне в верхней строке только геоточка и «Мурманск и пригород» по центру (поиск там скрыт; владелец 30.10.2026) */
@media (max-width: 768px) {
  #header_top { display: block; margin-bottom: 0; }
  #header_top_main { box-sizing: border-box; padding: 6px 16px; }
  #header_top_geo { float: none; justify-content: center; margin: 0; }
}

/* Фото внутри текста страницы (раздел «Ремонт ванной и туалета» и далее): по ширине колонки, без растяжения */
#content img.content-photo { display: block; max-width: 100%; height: auto; margin: 12px 0 18px; border-radius: 6px; }