/* Наши дополнения к перенесённому CSS.
 *
 * base.css и slider.css скопированы с teclog.ru дословно, поэтому здесь только то,
 * что появилось из-за отличий нашей разметки от легаси:
 *   — <app-icon> заменён на inline SVG;
 *   — кликабельные элементы стали настоящими <button>/<a>, а глобальный стиль button
 *     в base.css красит их светло-голубым — гасим в шапке;
 *   — добавлены блоки, которых на старом сайте не было (хлебные крошки, пагинатор,
 *     результаты поиска, страница карточки товара).
 */

/* --- Прилипающая шапка ----------------------------------------------------------------- */

/* Распорка перед шапкой: когда шапка становится position:fixed, она выпадает из потока,
   и app.js задаёт распорке высоту спокойной шапки, чтобы контент не прыгал.
   flex:0 0 auto — иначе flex-колонка body может её сжать. */
.toplines {
  flex: 0 0 auto;
}

/* В оригинале .hdr_menu — это <div>, поэтому на него действует правило
   header>div{padding:4px;position:relative}. Мы сделали его <nav> ради семантики,
   из-за чего выпадающая панель каталога лишилась содержащего блока и начала
   позиционироваться от <header> (top:38px), перекрывая строку поиска.
   Возвращаем исходный бокс — правило ниже повторяет header>div для нашего nav.

   Обрезки панелью ul.menu{overflow:hidden} не происходит: содержащий блок панели
   (.hdr_menu) находится ВЫШЕ элемента с overflow, поэтому абсолютно позиционированный
   потомок из-под него выходит. */
header > .hdr_menu {
  position: relative;
  padding: 4px;
}

/* --- Иконки ------------------------------------------------------------------------ */

.svg-icon {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  fill: var(--brand-color, #fff);
  vertical-align: middle;
}

.icn-text {
  margin-left: 3px;
  font-size: 1rem;
  vertical-align: middle;
}

header a:hover .svg-icon,
header button:hover .svg-icon,
.contact a:hover .icn-text {
  fill: var(--brand-hv-color, #fff);
}

/* --- Кнопки в шапке: убираем глобальный стиль button из base.css ------------------- */

header button,
.search-toggle button {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: inherit;
  color: inherit;
  cursor: pointer;
}

header button:hover,
header button:focus-visible,
.search-toggle button:hover {
  background-color: transparent;
  color: var(--brand-hv-color, #fff);
  outline: none;
}

.cat-hamb-btn {
  position: relative;
}

/* Кнопка-гамбургер наследует визуал .hamburger из base.css */
.hamburger:focus-visible {
  outline: 1px solid var(--brand-hv-color, #fff);
}

/* Кнопка раскрытия списка контактов */
.tel .opencon {
  float: right;
  margin-top: 4px;
  margin-right: -14px;
}

/* Переключатель строки поиска нужен только на узких экранах */
.search-toggle {
  display: block;
  text-align: right;
}

/* app.js добавляет .is-open, чтобы показать поле поиска на узких экранах */
@media only screen and (max-width: 767px) {
  .autocomplete.search.is-open .autocomplete-input {
    display: block !important;
    width: 100%;
    color: #223;
  }

  .autocomplete.search.is-open .autocomplete-result-list {
    display: block;
  }
}

@media only screen and (min-width: 768px) {
  .search-toggle {
    display: none;
  }
}

/* Форма на странице поиска */
.site-search {
  display: flex;
  gap: 6px;
  max-width: 520px;
}

.site-search input[type="search"] {
  flex: 1 1 auto;
}

/* --- Панель каталога --------------------------------------------------------------- */

.linkpanel a.is-current {
  background-color: var(--brand-bg-color, #2a7a81);
  color: var(--brand-color, #fff);
  border-color: #2c3e59;
}

.has-panel.is-active .hdr_cat_menu::before {
  content: "\2212"; /* минус вместо плюса, как в оригинале */
}

/* --- Корзина: бейдж виден, когда в заявке есть позиции ----------------------------- */

.badge.order.active {
  opacity: 1;
}

/* --- Поиск: выпадающий список результатов ----------------------------------------- */

.autocomplete {
  position: relative;
}

.autocomplete-result-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  border: 1px solid #778;
  border-top: 0;
  max-height: 320px;
  overflow-y: auto;
  z-index: 40;
}

.autocomplete-result-list[hidden] {
  display: none;
}

.autocomplete-result-list li {
  padding: 0;
}

.autocomplete-result-list a {
  display: block;
  padding: 7px 10px;
  color: #223;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.3;
}

.autocomplete-result-list a:hover,
.autocomplete-result-list li.is-active a {
  background-color: #eef;
}

.autocomplete-result-list .sku {
  color: #667;
  font-size: 0.9rem;
  margin-left: 6px;
}

.autocomplete-result-list .empty {
  padding: 8px 10px;
  color: #667;
}

/* --- Листинг каталога -------------------------------------------------------------- */

.grid.brd .item b.item-title {
  display: block;
  font-size: 1.2rem;
  line-height: 1.3;
}

.grid.brd .item a.item-title {
  color: inherit;
  text-decoration: none;
}

.grid.brd .item a.item-title:hover {
  color: var(--brand-bg-color, #2a7a81);
  text-decoration: underline;
}

.grid.brd .item .snippet ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

/* Точки-индикаторы галереи плитки (на старом сайте их не было) */

/* Движок галереи (app.js, initGalleries) перемещает .slidetrack трансформом.
   У старого swipe2 трек сам имел overflow:hidden — клип едет вместе с треком,
   поэтому после переключения слайда соседний слайд оказывался вырезанным и галерея
   пустела (а хит-тест проваливался на контейнер: свайп «умирал»). Клипать должен
   только контейнер .swipe2 — он overflow:hidden сохраняет. */
.swipe2 .slidetrack {
  overflow: visible;
}

.swipe2 .dots {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0;
  z-index: 3;
}

.swipe2 .dots button {
  width: 9px;
  height: 9px;
  margin: 0 3px;
  padding: 0;
  border: 1px solid #778;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}

.swipe2 .dots button.is-active {
  background-color: var(--brand-bg-color, #2a7a81);
  border-color: var(--brand-bg-color, #2a7a81);
}

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

.breadcrumbs {
  padding: 10px 0 0;
  font-size: 1rem;
  color: #667;
}

.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumbs li {
  display: inline;
}

.breadcrumbs li + li::before {
  content: "\2192"; /* → */
  margin: 0 6px;
  color: #99a;
}

.breadcrumbs a {
  color: var(--base-link-color, #0000cd);
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

/* --- Карточка товара --------------------------------------------------------------- */

.product-card {
  align-items: start;
}

.product-card .product-order {
  margin-top: 12px;
}

.product-card .price {
  margin: 0 0 8px;
  font-size: 1.3rem;
  font-weight: 700;
}

/* Планка заказа в плитке: онлайн-заказа пока нет, поэтому вместо степпера — цена.
   Позиционирование повторяет .item_quant.list из base.css, чтобы высота плитки не изменилась. */
.item_order .item_price {
  position: absolute;
  top: 4px;
  right: 8px;
  line-height: 32px;
  font-size: 0.95rem;
  color: #445;
}

/* Заглушка заказа в карточке товара */
.order-placeholder {
  padding: 10px 12px;
  border: 1px solid #cce;
  background-color: #eef;
}

.order-placeholder p {
  margin: 0 0 6px;
}

.order-placeholder p:last-child {
  margin-bottom: 0;
}

.order-placeholder .hint {
  color: #556;
  font-size: 0.95rem;
}

.product-card .product-media {
  border: 1px solid #ddc;
  background-color: #fff;
}

.product-card .product-media picture {
  display: block;
  border: 0;
}

.product-card .product-media img {
  display: block;
  width: 100%;
  height: auto;
}

.product-card table.specs td:first-child {
  width: 45%;
  color: #445;
}

.product-card .product-analogs {
  padding: 8px 10px;
  background-color: #efeffa;
  border-left: 3px solid var(--brand-bg-color, #2a7a81);
}

.product-card .main_text p {
  margin: 0 0 12px;
}

/* --- Пагинатор (в MVP листинг отдаёт всё одной страницей) -------------------------- */

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 15px 0;
}

.pager a,
.pager span {
  display: inline-block;
  min-width: 34px;
  padding: 6px 8px;
  text-align: center;
  border: 1px solid #ccc;
  color: #334;
  text-decoration: none;
}

.pager .is-current {
  background-color: var(--brand-bg-color, #2a7a81);
  border-color: var(--brand-bg-color, #2a7a81);
  color: #fff;
}

/* --- Лайтбокс ---------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(10, 20, 30, 0.86);
  padding: 20px;
}

.lightbox[hidden] {
  display: none;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  background-color: #fff;
  pointer-events: auto;
}

.lightbox .lb-close {
  position: absolute;
  top: 12px;
  right: 18px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
}

/* --- Форма входа сотрудников --------------------------------------------------------- */

.login-form {
  max-width: 460px;
}

.login-form .btn {
  margin-right: 12px;
}

.login-cancel {
  color: var(--base-link-color, #0000cd);
}

.login-hint {
  margin-top: 16px;
  color: #667;
  font-size: 1rem;
}

.form-error {
  padding: 8px 12px;
  border-left: 3px solid var(--error-color, #ff0f2e);
  background-color: #fff2f3;
  color: #922c21;
}

/* --- Ссылка выхода в шапке (видна только в режиме редактора) ------------------------- */

header .editor-link {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.95rem;
  vertical-align: middle;
}

header .editor-link .svg-icon {
  width: 1.3rem;
  height: 1.3rem;
}

/* --- Двойной слайдер диапазона ------------------------------------------------------ */

.range-slider {
  position: relative;
  height: 26px;
  margin: 14px 0 4px;
}

.range-track {
  position: absolute;
  top: 11px;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
  background-color: #d8dce6;
}

.range-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  background-color: var(--brand-bg-color, #2a7a81);
}

/* Оба ползунка лежат друг на друге; клики ловят только ручки, иначе верхний
   перехватывал бы весь диапазон. */
.range-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 26px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.range-input:focus {
  outline: none;
}

.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: var(--brand-bg-color, #2a7a81);
  box-shadow: 0 1px 3px rgba(0, 20, 40, 0.4);
  cursor: pointer;
}

.range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: var(--brand-bg-color, #2a7a81);
  box-shadow: 0 1px 3px rgba(0, 20, 40, 0.4);
  cursor: pointer;
}

.range-input::-moz-range-track {
  background: none;
  border: 0;
}

.range-input:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--brand-hv-color, #d4f2ff);
  outline-offset: 2px;
}

/* Когда ручки сходятся, верхним делаем левый ползунок, чтобы его можно было утащить */
.range-slider.is-min-on-top .range-input[data-range-min-input] {
  z-index: 4;
}

.range-input[data-range-max-input] {
  z-index: 3;
}

.range-input:disabled::-webkit-slider-thumb {
  background-color: #b9bfcc;
  cursor: default;
}

.range-input:disabled::-moz-range-thumb {
  background-color: #b9bfcc;
  cursor: default;
}

.range-labels {
  position: absolute;
  top: 26px;
  left: 0;
  right: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 0.95rem;
  color: #445;
}

.range-labels output {
  font-weight: 700;
  color: #223;
}

.range-unit {
  color: #778;
  font-weight: 400;
}

.filters-item {
  padding-bottom: 22px; /* место под подписи диапазона */
}

/* --- Панель фильтров каталога ------------------------------------------------------- */

.filters {
  padding: 10px 12px;
  border: 1px solid #ddc;
  background-color: #fbfbfd;
}

.filters-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 18px;
}

.filters-item {
  min-width: 0;
}

.filters-title {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  color: #223;
}

.filters-range {
  display: flex;
  align-items: center;
  gap: 6px;
}

.filters-range input {
  width: 100%;
  min-width: 0;
  padding: 5px 6px;
}

.filters-values {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.filters-value {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 1rem;
  cursor: pointer;
}

.filters-value .cnt {
  color: #778;
  font-size: 0.9rem;
  font-weight: 400;
}

.filters-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e6e6ef;
}

.filters.is-loading {
  opacity: 0.55;
}

.filters.is-error {
  border-color: var(--error-color, #ff0f2e);
}

/* Чипсы применённых фильтров */
.filters-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filters-chips:empty {
  display: none;
}

.chip {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid #ccd;
  border-radius: 10rem;
  background-color: #efeffa;
  font-size: 0.95rem;
}

.chip b {
  font-weight: 700;
}

/* --- Служебные состояния ----------------------------------------------------------- */

.is-hidden {
  display: none !important;
}

/* --- Инлайн-редактор контента (виден только ADMIN/MANAGER) ------------------------- */

.edit-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  padding: 6px 10px;
  border: 1px dashed #9ab;
  border-radius: 3px;
  background-color: #f4f7fa;
}

.edit-toolbar .edit-label {
  font-size: 0.95rem;
  color: #556;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.edit-toolbar .btn {
  padding: 4px 10px;
  line-height: 18px;
  font-size: 0.95rem;
}

.edit-toolbar.is-editing {
  border-style: solid;
  border-color: var(--brand-bg-color, #2a7a81);
  background-color: #eaf4f5;
}

.edit-status {
  margin-left: auto;
  font-size: 0.95rem;
  color: #556;
}

.edit-status.is-ok {
  color: var(--success-color, #00a36a);
}

.edit-status.is-error {
  color: var(--error-color, #ff0f2e);
}

.page-content.is-editing {
  outline: 2px solid var(--brand-bg-color, #2a7a81);
  outline-offset: 4px;
  background-color: #fffef8;
}

/* Пустой блок описания карточки: без min-height в него невозможно кликнуть */
.product-content.is-editing {
  min-height: 140px;
  outline: 2px solid var(--brand-bg-color, #2a7a81);
  outline-offset: 4px;
  background-color: #fffef8;
}

.product-content:empty::before {
  content: "Описания карточки пока нет";
  color: #889;
}

.page-content.is-editing :is(a, button)[href],
.page-content.is-editing a {
  pointer-events: none;
}


/* --- Новости: лента ------------------------------------------------------------------ */

.news-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
}

.news-feed {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 16px;
}

.news-item {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e3e8ee;
}

.news-item-thumb {
  display: block;
  background-color: #f4f7fa;
  border: 1px solid #e3e8ee;
  overflow: hidden;
}

.news-item-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.news-item-noimage {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  color: #99a;
  font-size: 0.95rem;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: #556;
}

.news-draft {
  padding: 1px 8px;
  border-radius: 10px;
  background-color: #fff3cd;
  color: #7a5b00;
  font-size: 0.85rem;
  text-transform: lowercase;
}

.news-item-title {
  margin: 0 0 6px;
  font-size: 1.25rem;
  line-height: 1.3;
}

.news-item-annotation {
  margin: 0;
  color: #334;
}

.news-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.news-pager-position {
  color: #556;
}

@media (max-width: 720px) {
  .news-item {
    grid-template-columns: 1fr;
  }

  .news-item-thumb img {
    max-height: 220px;
    object-fit: cover;
  }
}

/* --- Новости: страница и форма -------------------------------------------------------- */

/* Галерея новости: те же .swipe2/data-lightbox, что в карточке товара; блок плывёт
   слева, аннотация и текст его обтекают. Клик по фото открывает оригинал в лайтбоксе. */
.news-photo {
  float: left;
  width: 300px;
  margin: 4px 20px 12px 0;
  border: 1px solid #ddc;
  background-color: #fff;
}

.news-photo picture {
  display: block;
}

.news-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Кнопки и следующий раздел не должны наползать на обтекаемую галерею */
.news-detail .news-actions,
.news-detail h2 {
  clear: left;
}

.news-lead {
  font-size: 1.1rem;
  font-weight: 600;
  color: #223;
}

@media (max-width: 720px) {
  .news-photo {
    float: none;
    width: 100%;
    max-width: 480px;
    margin: 0 0 16px;
  }

  .news-detail .news-actions,
  .news-detail h2 {
    clear: none;
  }
}

.btn-danger {
  background-color: var(--error-color, #ff0f2e);
  border-color: var(--error-color, #ff0f2e);
  color: #fff;
}

.news-form {
  max-width: 860px;
}

.news-form .news-field {
  display: block;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.news-form .news-field > label,
.news-form legend {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  padding: 0;
}

.news-required {
  color: var(--error-color, #ff0f2e);
}

.news-form input[type="text"],
.news-form input[type="date"],
.news-form input[type="file"],
.news-form textarea {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
}

.news-form textarea {
  resize: vertical;
}

.news-field-row {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

.news-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  cursor: pointer;
}

/* Текущие фото в форме правки: миниатюры 300×170 с чекбоксом «удалить» */
.news-photos-current {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 12px;
}

.news-photo-item {
  margin: 0;
}

.news-photo-item img {
  display: block;
  width: 180px;
  height: auto;
  border: 1px solid #e3e8ee;
}

.news-photo-item .news-check {
  padding: 4px 0 0;
}

.news-hint {
  display: block;
  margin: 4px 0 12px;
  color: #667;
  font-size: 0.9rem;
}

.news-form .news-field input[type="file"] {
  width: auto;
}

.form-status {
  margin: 10px 0;
  color: #556;
}

.form-status.is-error {
  color: var(--error-color, #ff0f2e);
}

.news-cancel {
  color: var(--base-link-color, #0000cd);
}

/* --- Картинки в пользовательском контенте и вставка из редактора ----------------------- */

.page-content img,
.product-content img {
  max-width: 100%;
  height: auto;
}