/* =========================================================
   Stroitelstvo v1.2 — карточки, формы, адаптив, эффекты.
   Все значения, помеченные как var(--s-*), управляются
   из «Внешний вид → Настроить → Стиль сайта».
   ========================================================= */

/* ---------- Прижатый футер: убирает белую полосу внизу ---------- */
html { min-height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.site-main { flex: 1 0 auto; width: 100%; }
.site-footer { margin-top: auto; }

/* ---------- Кликабельные карточки ---------- */
.card { border-radius: var(--s-card-radius, 10px); }
.card--link { position: relative; cursor: pointer; }

.card__stretched {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.card__stretched:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: -3px;
  border-radius: inherit;
}
.card__link { position: relative; color: var(--c-primary); }
.card--link:hover .card__link { color: var(--c-accent); }

.card__thumb-empty {
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 3rem;
  font-weight: 800;
  color: var(--c-primary);
  background: #e9edf3;
}

/* Анимации наведения (карточки, кнопки, картинки, меню) задаются
   из панели «Стиль сайта» в stroi_style_variables(). Здесь — только цвет ссылок. */
a { transition: color 200ms ease, opacity 200ms ease; }
.btn {
  border-radius: var(--s-btn-radius, 6px);
  /* Кнопки не наследуют шрифт от body — задаём явно, иначе смена шрифта в настройках не видна. */
  font-family: var(--s-font-body, inherit);
  font-size: 1rem;
  line-height: 1.4;
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }

/* Пункты меню: подсветка-линия (включается настройкой) */
.main-nav a {
  position: relative;
  transition: color 220ms ease;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav .current-menu-item > a::after { transform: scaleX(1); }

/* Фильтры портфолио */
.filter-btn {
  border-radius: var(--s-btn-radius, 999px);
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

/* Атрибут hidden не срабатывает сам по себе: у .card задан display:flex,
   и правило класса перебивает display:none из стилей браузера. */
[data-filter-grid] > [hidden] { display: none !important; }

/* Сообщение «ничего не найдено» в отфильтрованной сетке */
.filter-empty {
  padding: 40px 20px;
  text-align: center;
  color: #7d828c;
}
.filter-empty[hidden] { display: none; }


/* ---------- Новости ---------- */
.news-section { background: var(--c-light); }
.news-card h3 { font-size: 1.1rem; }

/* ---------- Формы ---------- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-label {
  display: block;
  margin-bottom: 6px;
  color: var(--c-dark);
  font-size: .95rem;
  font-weight: 600;
}
.form-label em { color: #c0392b; font-style: normal; }

.lead-form input::placeholder,
.lead-form textarea::placeholder { color: #9aa1ac; opacity: 1; }

.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(31, 58, 95, .14);
}
.lead-form input.is-invalid,
.lead-form select.is-invalid,
.lead-form textarea.is-invalid { border-color: #c0392b; background: #fff8f7; }
.lead-form input.is-valid { border-color: #2e8b57; }

/* Сообщение об ошибке ВСЕГДА занимает своё место —
   включение текста больше не сдвигает вёрстку. */
.field-error {
  display: block;
  min-height: 1.3em;
  margin-top: 4px;
  font-size: .8rem;
  line-height: 1.3;
  font-weight: 500;
  color: #c0392b;
}
.field-error:empty { visibility: hidden; }

/* Чекбокс согласия: ЧЁРНЫЙ текст на любой подложке (в т.ч. в тёмном CTA).
   Селектор усилен до .lead-form .form-consent, чтобы перебить .lead-form label. */
.lead-form .form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.45;
  color: #1c1f24 !important;
  text-align: left;
}
/* Текст согласия чёрный, НО сообщение об ошибке — красное.
   Раньше правило ниже перебивало цвет .field-error, потому что ошибка — тоже <span>. */
.lead-form .form-consent > span:not(.field-error) { color: #1c1f24 !important; }
.lead-form .form-consent a {
  color: #1c1f24 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lead-form .form-consent a:hover { color: #000 !important; }
.lead-form .form-consent .field-error { color: #c0392b !important; }

/* Чекбокс: сбрасываем стили текстовых полей.
   .lead-form input давал padding 12px 14px и рамку — чекбокс раздувался
   в белый прямоугольник, который выглядел как «тень» над полем. */
.lead-form .form-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
  flex: 0 0 auto;
  accent-color: var(--c-primary);
}
.lead-form .form-consent input[type="checkbox"]:focus {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  box-shadow: none;
}
/* Ошибка согласия не занимает места, пока её нет */
.lead-form .form-consent .field-error { display: none; min-height: 0; margin-top: 0; }
.lead-form .form-consent.has-error .field-error { display: block; min-height: 1.3em; margin-top: 4px; }

/* ---------- Утилиты ---------- */
.text-center { text-align: center; }
.mt-4 { margin-top: 2rem; }

/* Скрытое honeypot-поле */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lead-form .btn[disabled] { opacity: .65; cursor: wait; transform: none; box-shadow: none; }

.btn-spinner {
  display: none;
  width: 15px;
  height: 15px;
  margin-left: 8px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: stroi-spin .7s linear infinite;
}
.btn[disabled] .btn-spinner { display: inline-block; }
@keyframes stroi-spin { to { transform: rotate(360deg); } }

.form-notice { margin: 0; }
.form-notice:empty { display: none; }
.form-notice--ok { background: #e7f7ec; color: #186a34; }
.form-notice--err { background: #fdecea; color: #a4262c; }

/* ---------- Контакты ---------- */
.contacts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.contact-info dl { display: grid; gap: 18px; margin: 0; }
.contact-info dt { font-size: .85rem; color: #7d828c; }
.contact-info dd {
  margin: 0;
  font-weight: 600;
  color: var(--c-dark);
  font-size: 1.1rem;
  overflow-wrap: anywhere;
}
.map-embed { width: 100%; height: 360px; border: 0; border-radius: var(--s-card-radius, 10px); }

/* Яндекс Карты: код виджета вставляется как есть, поэтому
   растягиваем его контейнер и сам iframe на всю ширину. */
.map-embed--yandex {
  height: auto;
  min-height: 360px;
  overflow: hidden;
  border-radius: var(--s-card-radius, 10px);
}
.map-embed--yandex > div { width: 100%; height: 360px; }
.map-embed--yandex iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block;
}
@media (max-width: 900px) {
  .map-embed--yandex > div,
  .map-embed--yandex iframe { height: 300px !important; }
}
@media (max-width: 600px) {
  .map-embed--yandex > div,
  .map-embed--yandex iframe { height: 240px !important; }
}
.map-placeholder {
  height: 360px;
  border-radius: var(--s-card-radius, 10px);
  background: var(--c-light);
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  color: #7d828c;
}

/* ---------- О компании ---------- */
.about-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}
.about-stats .stat strong { font-size: clamp(1.5rem, 4vw, 2.2rem); overflow-wrap: anywhere; }

/* ---------- Футер: меню списком без маркеров ---------- */
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.site-footer li { list-style: none; }
.site-footer li::marker { content: ""; }
.site-footer li a {
  display: inline-block;
  color: #b7bcc6;
  transition: color 220ms ease, transform 220ms ease;
}
.site-footer li a:hover,
.site-footer li a:focus-visible { color: var(--c-accent); transform: translateX(2px); }

/* ---------- Сетка и отступы из настроек ---------- */
.container { max-width: var(--s-container, 1200px); }
/* Отступы заданы в style.css через переменные, здесь только мобильная поправка */

/* ---------- Адаптив ---------- */
@media (max-width: 1024px) {
  .contacts-grid { gap: 28px; }
}

@media (max-width: 900px) {
  .contacts-grid { grid-template-columns: 1fr; }
  .map-embed,
  .map-placeholder { height: 300px; }
}

@media (max-width: 768px) {
  .section { padding: max(calc(var(--s-section-pad, 70px) * .65), 24px) 0; }

  /* «Цифры о компании»: крупный шрифт уменьшаем, карточки в 2 колонки */
  .stats {
    margin-top: -24px;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats .stat { padding: 20px 12px; }
  .stats .stat strong,
  .stat strong { font-size: calc(var(--s-stat-value-size, 35px) * .62); line-height: 1.1; }
  .stats .stat span,
  .stat span { font-size: calc(var(--s-stat-label-size, 16px) * .85); line-height: 1.25; }

  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .contacts-grid { gap: 24px; }
  .contact-info dd { font-size: 1rem; }
  .map-embed,
  .map-placeholder { height: 240px; }
  .form-consent { font-size: .85rem; }

  .stats,
  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat strong { font-size: calc(var(--s-stat-value-size, 35px) * .55); line-height: 1.05; }
  .stat span { font-size: calc(var(--s-stat-label-size, 16px) * .8); line-height: 1.25; }
}

@media (max-width: 380px) {
  .stats,
  .about-stats { grid-template-columns: 1fr; }
}

/* Уважаем «уменьшить движение» ТОЛЬКО если пользователь сам не включил анимации в настройках.
   Раньше это правило отключало анимации безусловно — отсюда «анимаций нет». */
@media (prefers-reduced-motion: reduce) {
  body.stroi-respect-motion .card,
  body.stroi-respect-motion .card__thumb img,
  body.stroi-respect-motion .btn,
  body.stroi-respect-motion .main-nav a::after { transition: none !important; }
  body.stroi-respect-motion .card:hover,
  body.stroi-respect-motion .card:focus-within,
  body.stroi-respect-motion .btn:hover { transform: none !important; }
}

/* ---------- Соцсети ---------- */
.social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

/* Иконки одного размера: фиксированный квадрат 20x20 внутри кнопки. */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: inherit;
  background: rgba(255, 255, 255, .09);
  text-decoration: none;
  /* Анимация только цвета. Подъёма нет. */
  transition: color var(--s-hover-speed, 260ms) ease, background-color var(--s-hover-speed, 260ms) ease;
}
.social-link svg {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

/* Конечный цвет наведения — «Акцент» из настроек. */
.social-link:hover,
.social-link:focus-visible {
  color: var(--c-accent);
  background: rgba(242, 169, 0, .14);
  transform: none;
}
.social-link:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.social-link__label { color: inherit; transition: color var(--s-hover-speed, 260ms) ease; }
.social-link:hover .social-link__label,
.social-link:focus-visible .social-link__label { color: var(--c-accent); }

/* Футер: только иконки */
.social-links--footer { margin-top: 20px; }
.social-links--footer .social-link { width: 38px; height: 38px; background: rgba(255, 255, 255, .08); }
.social-links--footer .social-link svg { width: 20px; height: 20px; }

/* Страница «Контакты»: светлый фон, иконки с подписями */
.social-links--contacts { margin-top: 6px; gap: 8px; }
.social-links--contacts .social-link {
  width: auto;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  color: var(--c-primary);
  background: var(--c-light);
  font-size: .9rem;
  font-weight: 600;
}
.social-links--contacts .social-link:hover,
.social-links--contacts .social-link:focus-visible {
  color: var(--c-accent);
  background: rgba(242, 169, 0, .12);
}

@media (max-width: 600px) {
  .social-link { width: 38px; height: 38px; }
  .social-links--contacts .social-link { padding: 0 12px; font-size: .85rem; }
}

/* ---------- Запись новости: меньше отступа между заголовком и текстом ---------- */
.section--entry { padding-top: 28px; }
@media (max-width: 768px) {
  .section--entry { padding-top: 20px; }
}

/* Заглушка с первой буквой — та же высота, что у картинки */
.card__thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: clamp(2rem, 8vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--c-primary);
  background: linear-gradient(135deg, #eef2f7, #dfe6ef);
  text-transform: uppercase;
  user-select: none;
}

/* Подпись согласия: отдельный класс, чтобы не задевать поле ошибки */
.lead-form .form-consent .form-consent__text { color: #1c1f24 !important; }

/* ---------- Блокировка прокрутки при открытом меню ----------
   overflow:hidden здесь использовать нельзя: он превращает body
   в scroll-контейнер и ломает position:sticky у шапки — она уезжает
   вверх вместе с меню. Поэтому фиксируем body и сдвигаем его на
   сохранённую прокрутку, которую JS пишет в --nav-scroll-offset. */
body.nav-locked {
  position: fixed;
  top: calc(var(--nav-scroll-offset, 0px) * -1);
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* ---------- Подложка затемнения под мобильным меню ---------- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(12, 16, 22, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}
body.nav-open .nav-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 260ms ease, visibility 0s linear 0s;
}
body.nav-open { overflow: hidden; }

/* На десктопе меню в строку — подложка не нужна */
@media (min-width: 901px) {
  .nav-overlay { display: none !important; }
}

/* ---------- Карточки под баннером: размеры и цвета из настроек ---------- */
.stat {
  background: var(--s-stat-bg, var(--c-white));
  text-align: var(--s-stat-align, center);

  /* Вертикальное выравнивание содержимого. Без flex значение и подпись
     прилипали к верху, и при разной длине подписей карточки выглядели рвано. */
  display: flex;
  flex-direction: column;
  justify-content: var(--s-stat-valign, center);
}
.stat strong {
  color: var(--s-stat-value-color, var(--c-primary));
  font-weight: var(--s-stat-value-weight, 700);
}
.stat span {
  display: block;
  color: var(--s-stat-label-color, inherit);
  line-height: 1.3;
}

/* Иконка услуги: SVG внутри плашки */
.service-icon svg {
  width: 28px;
  height: 28px;
  display: block;
  color: var(--c-primary, #1f3a5f);
}

/* Подпись не должна наследовать «книжный» интервал основного текста:
   при уменьшенном кегле на мобильных он визуально разрывает строку. */
.stat strong { line-height: 1.1; }

/* ---------- Карточки под баннером в режиме карусели ----------
   Те же приёмы, что у карусели карточек: overflow-x:auto превращает
   overflow-y в auto, поэтому отступы держат тень и подъём карточки
   внутри области прокрутки, а отрицательные margin возвращают вёрстку. */
@media (min-width: 901px) {
  .stats--carousel {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--s-grid-gap, 24px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 10px;
    padding: 24px 10px 32px;
    margin: -24px -10px 0;
  }

  /* Треть ширины контейнера: видно три карточки, четвёртая выглядывает —
     это подсказывает, что блок можно прокрутить. */
  .stats--carousel > .stat {
    flex: 0 0 calc((100% - 2 * var(--s-grid-gap, 24px)) / 3);
    max-width: none;
    scroll-snap-align: start;
  }

  .stats--carousel::-webkit-scrollbar { height: var(--s-stat-sb-height, 8px); }
  .stats--carousel::-webkit-scrollbar-track {
    background: var(--s-sb-track, #e8ebf0);
    border-radius: 4px;
  }
  .stats--carousel::-webkit-scrollbar-thumb {
    background: var(--s-sb-thumb, #1f3a5f);
    border-radius: 4px;
  }
}

/* ---------- Карусель карточек (компьютерная версия) ----------
   Включается настройкой в блоках главной. Сетка остаётся для мобильных,
   чтобы не заставлять пользователя скроллить по горизонтали пальцем. */
@media (min-width: 901px) {
  .grid--carousel {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 10px;

    /* overflow-x:auto превращает overflow-y в auto, и контейнер обрезает
       тень и подъём карточки. Отступы держат их внутри области прокрутки,
       отрицательные margin возвращают вёрстку к исходным размерам. */
    padding: 24px 10px 32px;
    margin: -24px -10px 0;
  }

  .carousel-wrap { margin-bottom: var(--s-scrollbar-gap, 28px); }

  /* ВАЖНО: в Chromium 121+ и Safari задание scrollbar-width или scrollbar-color
     отключает псевдоэлемент ::-webkit-scrollbar. Поэтому здесь только
     ::-webkit-scrollbar — иначе настройка толщины в пикселях не работает.
     Firefox получает цвета отдельным правилом через @supports. */
  .grid--carousel::-webkit-scrollbar { height: var(--s-scrollbar-height, 8px); }
  .grid--carousel::-webkit-scrollbar-track {
    background: var(--s-scrollbar-track, #e8ebf0);
    border-radius: 4px;
  }
  .grid--carousel::-webkit-scrollbar-thumb {
    background: var(--s-scrollbar-thumb, #1f3a5f);
    border-radius: 4px;
  }

  .grid--carousel > .card {
    flex: 0 0 300px;
    max-width: 300px;
    scroll-snap-align: start;
  }
  /* Кнопки прокрутки */
  .carousel-wrap { position: relative; }
  .carousel-nav {
    position: absolute;
    top: calc(50% - 28px);
    z-index: 5;
    width: 56px;
    height: 56px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--c-white, #fff);
    color: var(--c-primary, #1f3a5f);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease;
  }
  .carousel-nav svg {
    display: block;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    pointer-events: none;
    overflow: visible;
  }
  .carousel-nav:hover,
  .carousel-nav:focus-visible { background: var(--c-primary, #1f3a5f); color: #fff; }
  .carousel-nav:focus-visible { outline: 3px solid var(--c-accent, #f2a900); outline-offset: 3px; }
  .carousel-nav[disabled] { opacity: 0; pointer-events: none; }
  .carousel-nav--prev { left: -22px; }
  .carousel-nav--next { right: -22px; }
}

/* На мобильных карусель не нужна: карточки в обычной сетке */
@media (max-width: 900px) {
  .carousel-nav { display: none !important; }
}

/* Кнопка под блоком. На компьютере отступ сверху даёт сама полоса прокрутки
   (margin-bottom у .carousel-wrap), поэтому здесь он обнуляется.
   На мобильных карусель превращается в сетку, .carousel-wrap перестаёт быть
   соседом кнопки и обнуление не срабатывает — там нужен обычный отступ.
   Раньше правило обнуления стояло без медиазапроса, и на мобильных кнопка
   прилипала к секции. */
.stroi-all-link { margin-top: 2rem; }
.carousel-wrap + .stroi-all-link { margin-top: 0; }

@media (max-width: 900px) {
  /* Карусели на мобильных нет — возвращаем отступ кнопке под блоком */
  .carousel-wrap + .stroi-all-link { margin-top: 2rem; }
}

/* ---------- Полосы прокрутки: глобальные цвета ----------
   Цвета задаются в «Стиль сайта → Цвета» и действуют на все
   прокручиваемые области сайта. Толщина настраивается отдельно
   в блоках главной (::-webkit-scrollbar), т.к. в пикселях она
   стандартом не поддерживается. */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--s-sb-track, #e8ebf0); }
*::-webkit-scrollbar-thumb {
  background: var(--s-sb-thumb, #1f3a5f);
  border-radius: 6px;
  border: 2px solid var(--s-sb-track, #e8ebf0);
}
*::-webkit-scrollbar-thumb:hover { background: var(--s-sb-thumb-hover, var(--s-sb-thumb, #1f3a5f)); }
*::-webkit-scrollbar-corner { background: var(--s-sb-track, #e8ebf0); }

/* Firefox: цвета через стандартные свойства. В Chromium это правило
   не применяется, поэтому ::-webkit-scrollbar там продолжает работать. */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--s-sb-thumb, #1f3a5f) var(--s-sb-track, #e8ebf0); }
}

/* ---------- Просмотр картинок в тексте ----------
   Оверлей на весь экран. Масштаб меняется внутри него, поэтому
   touch-action:none гасит браузерный пинч страницы на мобильных. */
.entry-content img.is-zoomable {
  cursor: zoom-in;
}
.entry-content img.is-zoomable:focus-visible {
  outline: 3px solid var(--c-accent, #f2a900);
  outline-offset: 3px;
}

/* Прокрутка под оверлеем блокируется без ломки sticky-шапки */
html.zoom-locked body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

.zoom-viewer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 12, 16, .94);
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
  transition: none;
  animation: none;
}

.zoom-viewer img {
  transition: none !important;
  animation: none !important;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
}
.zoom-viewer img:active { cursor: grabbing; }

.zoom-viewer__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.zoom-viewer__close:hover { background: rgba(255, 255, 255, .3); }
.zoom-viewer__close { transition: none; }
.zoom-viewer__close:focus-visible { outline: 3px solid var(--c-accent, #f2a900); outline-offset: 2px; }

/* Мобильные: картинка на весь экран, крупная кнопка закрытия */
@media (max-width: 900px) {
  .zoom-viewer { padding: 0; }
  .zoom-viewer img { max-width: 100vw; max-height: 100vh; border-radius: 0; }
  .zoom-viewer__close {
    width: 52px;
    height: 52px;
    top: 12px;
    right: 12px;
    font-size: 30px;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(4px);
  }
}