/* Локальные правки и оверрайды поверх ассетов из вёрстки.
   Файлы в assets/css/ менять нельзя — все новые стили сюда. */

/* Табы: скрытая панель (используется в press, потенциально и в других секциях) */
[data-tab-pane].press__grid--hidden,
[data-tab-pane].reputation__pane--hidden { display: none; }

.reputation__more {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  color: var(--purple);
}

.reputation__show-all {
  color: var(--purple);
  text-decoration: none;
}

.reputation__more:hover .reputation__show-all { text-decoration: underline; }

[data-ajax-form] input._invalid,
[data-ajax-form] textarea._invalid {
  border-color: #c0392b;
  box-shadow: 0 0 0 1px #c0392b;
}

[data-ajax-form] label._invalid {
  color: #c0392b;
}

/* ─────────────────────────────────────────
   BLOCK: subscribe-thanks-modal
   Модальное окно «Благодарим за подписку».
   Открыт/закрыт через модификатор --open
   (по образцу question-modal).
───────────────────────────────────────── */
.subscribe-thanks-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.subscribe-thanks-modal--open {
  display: block;
}

.subscribe-thanks-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.subscribe-thanks-modal__window {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  background: #fff;
  padding: 56px 48px 40px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.20);
  overflow-y: auto;
}

.subscribe-thanks-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
}

.subscribe-thanks-modal__close img {
  width: 16px;
  height: 16px;
  display: block;
}

/* ─────────────────────────────────────────
   BLOCK: cert-lightbox
   Полноэкранный просмотр изображений карточек репутации.
   Открыт/закрыт через модификатор --open (parallel с hidden).
───────────────────────────────────────── */
.cert-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.cert-lightbox[hidden]     { display: none; }
.cert-lightbox--open       { display: block; }

.cert-lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.cert-lightbox__window {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

.cert-lightbox__image {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  display: block;
  background: #fff;
  pointer-events: auto;
}

.cert-lightbox__caption {
  color: #fff;
  font-size: 14px;
  text-align: center;
  max-width: 90vw;
  padding: 0 16px;
  pointer-events: auto;
}

.cert-lightbox__close,
.cert-lightbox__prev,
.cert-lightbox__next {
  position: fixed;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 8px 14px;
  font-size: 28px;
  line-height: 1;
}
.cert-lightbox__close { top: 16px;  right: 24px; font-size: 32px; }
.cert-lightbox__prev  { top: 50%;   left: 24px;  transform: translateY(-50%); }
.cert-lightbox__next  { top: 50%;   right: 24px; transform: translateY(-50%); }

/* ─────────────────────────────────────────
   BLOCK: question-modal extras
   Inline-ошибка под кнопкой и блок благодарности,
   подменяющий форму после успешной отправки.
───────────────────────────────────────── */
.question-modal__error {
  color: #c0392b;
  font-size: 14px;
  margin-top: 12px;
}

.question-modal__thanks {
  padding: 24px 0;
  text-align: center;
}

.question-modal__thanks-text {
  font-size: 18px;
  line-height: 1.4;
  margin: 0;
}

/* ─────────────────────────────────────────
   BLOCK: tender-modal extras
   Inline-ошибка под кнопкой и блок благодарности,
   подменяющий форму после успешной отправки.
───────────────────────────────────────── */
.tender-modal__error {
  color: #c0392b;
  font-size: 14px;
  margin-top: 12px;
}

.tender-modal__thanks {
  padding: 24px 0;
  text-align: center;
}

.tender-modal__thanks-text {
  font-size: 18px;
  line-height: 1.4;
  margin: 0;
}

/* assets/css задаёт display: flex для .tender-modal__image, что перекрывает
   стандартный [hidden] { display: none }. Возвращаем поведение. */
.tender-modal__image[hidden] {
  display: none;
}

/* В состоянии благодарности заголовок выравниваем по центру,
   чтобы он лёг по той же оси, что и текст благодарности. */
.tender-modal--success .tender-modal__title {
  text-align: center;
}

/* ─────────────────────────────────────────
   BLOCK: catalog-menu (overrides)
   Панельная структура для переключения подкатегорий
   при наведении на тип в левой колонке.
───────────────────────────────────────── */

/* Панель — невидимая обёртка над .col--center и .col--right.
   display: contents — чтобы дочерние колонки участвовали в grid
   родителя .catalog-menu__inner (380px 1fr 1fr). */
.catalog-menu__panel {
  display: none;
}
.catalog-menu__panel--active {
  display: contents;
}

/* Стрелка-индикатор показывается только у активного типа */
.catalog-menu__category:not(.catalog-menu__category--active) .catalog-menu__category-arrow {
  display: none;
}

/* ─────────────────────────────────────────
   BLOCK: city-modal active city
   Подсвечивает текущий выбранный город в попапе выбора города.
───────────────────────────────────────── */
.city-modal__city-item--active .city-modal__city-name {
  font-weight: 600;
}

/* ─────────────────────────────────────────
   BLOCK: footer__contacts-worktime
   Строка «режим работы», добавлена рядом с телефонами в футере
   (паритет с bitrix/templates/scopula/footer.php при LOCATIONS_ENABLED=Y).
───────────────────────────────────────── */
.footer__contacts-worktime {
  margin-top: 4px;
}

/* ─────────────────────────────────────────
   BLOCK: header counters & favorite state
   Бэйджи с количеством товаров в корзине/избранном на иконках в шапке
   плюс активное состояние «сердечка» на карточке товара.
───────────────────────────────────────── */
.header__icon-btn {
  position: relative;
}

.header__icon-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #57159E;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
}

.header__icon-badge[hidden] {
  display: none;
}

.product-card__fav--active path {
  fill: #57159E;
  stroke: #57159E;
}

[data-add-to-basket]._loading,
[data-toggle-favorite]._loading {
  opacity: 0.6;
  pointer-events: none;
}

/* BLOCK: search suggestions — скрываем выпадающие подсказки, когда
   поиск ничего не нашёл (бэкенд вернул total=0).
   В assets/css/header.css есть правило
   `.search-box--typing .search-box__suggestions { display: block; }`,
   которое надо перебить. */
.search-box--no-suggestions .search-box__suggestions {
  display: none;
}

/* BLOCK: search history — скрываем выпадашку, когда история пуста.
   Перебивает `.search-box--active .search-box__dropdown { display: block; }`
   из assets/css/header.css (одинаковая специфичность — побеждает порядок
   подключения, backend.css грузится последним). */
.search-box--no-history .search-box__dropdown {
  display: none;
}

/* ─────────────────────────────────────────
   BLOCK: mobile-menu catalog (drill-down)
   Меню каталога в мобильном меню: уровень 1 виден по умолчанию,
   при клике по пункту с детьми обёртка получает .is-drilled
   (корневой список скрывается), а соответствующая .--sub-панель
   получает .is-active и показывает родителя как заголовок + его детей.
   Контейнер .mobile-menu__catalog-view уже задаёт padding/flex
   из assets/css/mobile-menu.css.
───────────────────────────────────────── */
.mobile-menu__catalog-level--root {
  display: flex;
  flex-direction: column;
}

.mobile-menu__catalog-level--sub {
  display: none;
  flex-direction: column;
}

.mobile-menu__catalog-tree.is-drilled .mobile-menu__catalog-level--root {
  display: none;
}

.mobile-menu__catalog-level--sub.is-active {
  display: flex;
}

/* ─────────────────────────────────────────
   BLOCK: page horizontal-overflow guard
   На узких экранах несколько position: fixed элементов
   (.float-btn с `right: 12px`, сторонний .piarme_cookie-notice)
   расширяют body.scrollWidth до viewport + ~20px и появляется
   горизонтальный скролл / лишняя пустая область справа от вёрстки.
   Клипуем по горизонтали — fixed-элементы всё равно якорятся
   к viewport, никаких визуальных потерь.
───────────────────────────────────────── */
html,
body {
  overflow-x: hidden;
}

.product-card__image {
  height: 220px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .product-card__image {
    height: 180px;
  }
}

@media (min-width: 960px) {
  .article-card__image {
    height: 220px;
  }
}

.header__subnav-link--accent {
  color: var(--purple);
  font-weight: 600;
}

.badge--slate { background: #7a7c93; color: #fff; }

.nav-arrows--hidden { display: none; }

.products__pane { display: none; }
.products__pane--active { display: block; }

.hero__slider {
  flex: 0 0 auto;
  width: 650px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.hero__track {
  display: flex;
  gap: 80px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.hero__track::-webkit-scrollbar { display: none; }
.hero__track .hero__product-card {
  width: 100%;
  scroll-snap-align: start;
}

@media (max-width: 1280px) {
  .hero__slider { width: 50%; }
}

@media (max-width: 959px) {
  .hero__slider { width: 100%; order: 2; }
}

@media (min-width: 960px) {
  .clients__grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .clients__grid::-webkit-scrollbar { display: none; }
  .clients__grid > .client-item {
    flex: 0 0 calc(100% / 6);
    max-width: calc(100% / 6);
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

.footer__bottom {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
}
.footer__ratings-wrap { display: flex; flex-direction: column; gap: 10px; }
.footer__ratings { padding: 0; gap: 20px; }
.footer__payments { margin-left: auto; }

@media (max-width: 959px) {
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 24px; padding: 20px 15px 80px; }
  .footer__copyright { order: 0; }
  .footer__payments { margin-left: 0; width: 100%; }
}

.footer__contacts-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-top: 15px; }
.footer__contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 190px;
  max-width: 100%;
  padding: 7px 10px;
  background: #fff;
  border: 1px solid var(--gray-border);
  color: var(--purple);
  font-family: Onest, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.footer__contact-btn:hover { border-color: var(--purple); }
.footer__contact-btn-icon { object-fit: contain; flex: 0 0 auto; }
.footer__contact-btn-icon--max { width: 14px; height: 14px; }
.footer__contact-btn-icon--tg  { width: 16px; height: 13px; }

a.save-contact-modal__btn { display: block; text-align: center; text-decoration: none; }