/* ============================================================
   +7 Телеком — правки по замечаниям после просмотра сайта.

   Здесь НЕТ ни одного цвета числом и ни одного правила «только для тёмной
   темы»: всё берётся из theme-tokens.v1.css. Поэтому обе темы получаются
   сами собой, и правка не может сломать одну из них.
   ============================================================ */

/* ── 1. Список салонов: граница сливалась с фоном тёмной темы ── */
.salon-card {
  border-color: var(--t-line);
  background: var(--t-surface);
}
.salon-card:hover { border-color: var(--t-accent); }
.salon-card.active {
  border-color: var(--t-accent);
  background: var(--t-surface-3);
  box-shadow: 0 0 0 1px var(--t-accent) inset;
}
.salon-list { scrollbar-color: var(--t-scroll) transparent; }
.salon-list::-webkit-scrollbar { width: 8px; }
.salon-list::-webkit-scrollbar-thumb { background: var(--t-scroll); border-radius: 8px; }

/* ── 2. Сортировка «Сначала новые»: рамка в рамке и невидимая стрелка ──
   Была рамка у панели-обёртки и своя у списка. Оставляем один контур.
   Стрелку рисуем маской, залитой цветом темы: раньше она была картинкой с
   вписанным цветом и в тёмной теме исчезала. */
.catalog-toolbar {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  min-height: 0 !important;
  position: relative;
  display: inline-flex;
}
.catalog-toolbar .sort-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--t-line) !important;
  border-radius: 12px !important;
  background: var(--t-surface) !important;
  background-image: none !important;
  color: var(--t-ink) !important;
  padding: 11px 40px 11px 18px !important;   /* место справа под стрелку */
  min-width: 190px;
  text-align: center;
  text-align-last: center;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.catalog-toolbar .sort-select:hover { border-color: var(--t-accent) !important; }
.catalog-toolbar::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 12px;
  height: 8px;
  transform: translateY(-50%);
  pointer-events: none;
  background: var(--t-muted);                 /* цвет стрелки = цвет темы */
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='black' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='black' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ── 5. Фильтры каталога: галочки и счётчики ──
   Галочка была светлым квадратом на тёмном фоне, счётчик справа сливался. */
#catFilters .fx-val input[type="checkbox"] {
  accent-color: var(--t-accent);
  background: var(--t-surface);
  border: 1px solid var(--t-line-strong);
  border-radius: 4px;
}
#catFilters .fx-val .n {
  color: var(--t-muted);
  background: var(--t-accent-soft);
  border-radius: 999px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;   /* цифры не «прыгают» по ширине */
}
#catFilters .fx-group { border-top-color: var(--t-line); }
#catFilters .fx-price input,
#catFilters .fx-range .track { border-color: var(--t-line-strong); background: var(--t-surface-2); }
#catFilters .fx-reset,
#catFilters .fx-more { color: var(--t-accent); }

/* ── 6. Воздух между блоками главной ──
   Пустые полосы получались из сложения отступов соседних секций. */
#homeView .section,
#homeView section { padding-block: 46px; }
#homeView .perks { padding-block: 44px 30px; }
#homeView #saleSection,
#homeView #homeCategories,
#homeView #recentSection { padding-block: 30px; }
#homeView section + section { padding-top: 26px; }
@media (max-width: 680px) {
  #homeView .section, #homeView section { padding-block: 32px; }
  #homeView section + section { padding-top: 20px; }
}

/* ── 7. «Смотреть весь каталог» — заметная кнопка ── */
.catalog-cta {
  background: linear-gradient(120deg, var(--t-accent), var(--deep, #0a57a3)) !important;
  color: #fff !important;
  padding: 15px 34px !important;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(10, 87, 163, .25);
}
.catalog-cta:hover {
  background: linear-gradient(120deg, var(--deep, #0a57a3), var(--t-accent)) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(10, 87, 163, .32);
}
.catalog-cta-row { margin-top: 18px; }

/* ── 8. Ленты товаров тянутся мышкой ──
   «Вы недавно смотрели» и другие горизонтальные ленты можно тащить
   курсором. Сами по себе они не едут. */
.grid.hscroll { cursor: grab; scroll-behavior: auto; }
.grid.hscroll.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.grid.hscroll.dragging * { pointer-events: none; }
.grid.hscroll::-webkit-scrollbar { height: 8px; }
.grid.hscroll::-webkit-scrollbar-thumb { background: var(--t-scroll); border-radius: 8px; }

/* ── 9. Блок «Не определились с выбором» — компактнее ──
   Кнопка «Салоны на карте» убрана (дублировала раздел с картой ниже). */
.cta-strip {
  align-items: center;
  padding: 18px 24px;
  gap: 18px;
}
.cta-strip .cta-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.cta-strip .cta-actions { margin: 0; flex-wrap: wrap; justify-content: flex-end; }
.cta-strip .cta-call,
.cta-strip .cta-social { padding: 11px 18px; }
@media (max-width: 760px) {
  .cta-strip { padding: 16px; }
  .cta-strip .cta-right, .cta-strip .cta-actions { justify-content: stretch; width: 100%; }
  .cta-strip .cta-actions > * { flex: 1 1 auto; text-align: center; }
}

/* ── 10. Корзина: одно понятное действие ──
   Раньше внизу стояли две равные кнопки — «Оформить заказ» и
   «Забронировать». Для покупателя это один и тот же самовывоз, и выбор
   между непонятными словами только тормозил. Осталась одна кнопка, а
   срок получения человек пишет в комментарии. */
.cart-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--t-muted);
  text-align: center;
}

/* ── 11. «Привезём под заказ» ──
   Красное «Нет в наличии» — тупик: человек уходит искать в другом месте,
   хотя привезти мы можем. Поэтому у товара без остатка подпись синяя,
   информационная, а не тревожная: это приглашение к разговору, а не отказ.
   Цвет один и тот же в плитке, на странице товара и в списке салонов —
   иначе одно и то же состояние выглядело бы тремя разными. */
.stock-line.order,
.pp-stock.order,
.avail-st.order { color: var(--t-accent); white-space: normal; text-align: right; }
.pp-stock.order::before,
.avail-dot.order { background: var(--t-accent); }
.avail-dot.order { box-shadow: 0 0 0 4px var(--t-accent-soft); }

/* Пояснение под кнопками: как именно мы уточним срок. Без него «под заказ»
   выглядит обещанием, за которое никто не отвечает. */
.pp-order-hint {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--t-muted);
}

/* ── 12. Фото товара без серой подложки ──
   Под фотографией лежал серый квадрат. На белой карточке он читался как
   рамка вокруг товара: получалось «фото в рамке внутри карточки» — две
   границы там, где нужна одна, и внимание уходило на оформление, а не на
   сам товар.

   Убираем подложку ТОЛЬКО там, где фото есть (класс has-img ставит
   витрина). У карточек без фотографии остаётся значок на сером фоне —
   там подложка нужна, иначе значок повиснет в пустоте.

   Берём не «прозрачный», а --fl-surface: это ТА ЖЕ переменная, которой
   закрашена сама карточка (см. design-lab-flagship.v2.css → .card). Именно
   поэтому подложка перестаёт быть видна — она сливается с карточкой точь-
   в-точь, в обеих темах, и отдельных правил для тёмной не нужно вовсе.

   Просто «прозрачный» здесь не подходит: в тёмной теме карточка тёмная, а
   фотографии обработаны на белом фоне, и прозрачность оставила бы резкий
   белый прямоугольник. Брать другую переменную тоже нельзя — разойдётся с
   карточкой на пару тонов, и подложка снова проступит.

   Касается и плитки каталога, и списков в корзине/избранном, чтобы один и
   тот же товар не выглядел в разных местах по-разному. */
.card .thumb.has-img,
.dthumb.has-img,
.sg-thumb.has-img { background: var(--fl-surface) !important; }

/* ── 13. Подсветка карточки при наведении — по всему контуру ──
   Раньше при наведении загоралась красная полоска только по верхнему краю.
   Она читалась как «что-то сверху отвалилось», а не как «вот эта карточка
   выбрана»: глаз не связывал полоску с карточкой целиком.

   Теперь подсвечивается весь контур. Делаем это тем же псевдоэлементом,
   что рисовал полоску, — растягиваем его на всю карточку и превращаем
   фон в рамку. Так не появляется лишних элементов, а плавное появление
   (opacity) остаётся прежним.

   pointer-events: none — обязательно: рамка лежит поверх карточки, и без
   этого она перехватывала бы нажатия на фото и кнопки. */
.card::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: auto;
  background: none;
  border: 2px solid var(--fl-signal, #f04452);
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
}

/* ─── Первый экран главной: размеры из бывшего визуального редактора ───────
   29.07.2026. Оба редактора внешнего вида удалены (решение 005): владелец
   правит сайт через ИИ, а редакторами за всё время воспользовались дважды.

   Эти две величины — единственное, что в них было настроено. Перенесены
   один в один, чтобы главная выглядела ровно как раньше: в старом движке
   они тоже применялись без ограничения по ширине экрана.
   Прежний адрес правки: div.dl-view-enter:nth-of-type(2) div.hero .wrap. */
.hero .wrap {
  width: 1209px;
  max-width: 100%;
  min-height: 560px;
}