/* ── Доводки UI: Manrope, чекбокс, иконки FAB, промо, бренды, поиск, категории ── */
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope.ttf') format('truetype');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope ExtraBold';
  src: url('/fonts/manrope-extrabold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
.card h3,
.pp-head h1 { font-family: 'Manrope', sans-serif; font-weight: 700; line-height: 1.07; letter-spacing: -0.03em; }
.pp-price { font-family: 'Manrope ExtraBold', 'Manrope', sans-serif; font-weight: 800; font-size: clamp(32px, 4.2vw, 40px); letter-spacing: -0.04em; line-height: 1; }
.modal .consent-check { align-items: center; flex-wrap: nowrap; }
.modal .consent-check input { width: 18px; height: 18px; min-width: 18px; min-height: 0; flex: 0 0 auto; margin: 0; }
.fab-item .fab-ico { display: inline-flex; align-items: center; line-height: 0; }
.fab-item .fab-ico .svg-ico { width: 18px; height: 18px; }
#fabMain .svg-ico { width: 24px; height: 24px; }

/* Промо-карточки: подзаголовок на всю ширину, стрелка по центру по вертикали */
.promo span:not(.parr) { max-width: none; }
.promo .parr { top: 50%; bottom: auto; transform: translateY(-50%); }

/* Поиск: чипы «Популярные категории» в светлой теме — светлый фон, синяя иконка */
html:not([data-theme="dark"]) .sg-chip { background: #eef3fb; color: #12283d; }
html:not([data-theme="dark"]) .sg-chip .svg-ico { color: #1769e0; }
html:not([data-theme="dark"]) .sg-chip:hover { background: #1769e0; color: #ffffff; }
html:not([data-theme="dark"]) .sg-chip:hover .svg-ico { color: #ffffff; }

/* Плитки категорий на главной (#homeCategories) — стиль референса: белые карточки,
   синяя иконка по центру сверху, подпись снизу. 8 колонок → 15 категорий в 2 строки. */
.cat-tiles { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.cat-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 8px; border-radius: 18px; min-height: 120px;
  background: var(--card-bg, #fff); border: 1px solid var(--fl-line, #eef2f8);
  box-shadow: 0 6px 18px rgba(20,40,80,.05);
  text-decoration: none; color: var(--fl-ink, #12243b); text-align: center;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.cat-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(20,40,80,.12); border-color: rgba(23,105,224,.30); }
.cat-tile-ico { width: 44px; height: 44px; border-radius: 0; background: none; display: inline-flex; align-items: center; justify-content: center; }
.cat-tile-ico .svg-ico { width: 34px; height: 34px; color: var(--blue, #1769e0); }
.cat-tile-name { font-weight: 700; font-size: 12.5px; line-height: 1.25; color: var(--fl-ink, #12243b); }
html[data-theme="dark"] .cat-tile { background: var(--card-bg) !important; border-color: var(--dl-line, #26394e) !important; }
@media (max-width: 1100px) { .cat-tiles { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 760px)  { .cat-tiles { grid-template-columns: repeat(4, 1fr); gap: 10px; } .cat-tile { min-height: 110px; } }
@media (max-width: 480px)  { .cat-tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; } .cat-tile { min-height: 100px; padding: 12px 6px; } }

/* Бегущая строка брендов — тоньше и фоновее (декоративный разделитель) */
.brands { padding-block: 10px !important; opacity: .9; }
.brands span { font-size: 18px !important; }
html:not([data-theme="dark"]) .brands span { color: #8aa4c2; }

/* Страница товара, мобильная: блок «Доставка/Гарантия/Настройка» опускаем под описание */
.pp-perks-mobile { display: none; }
@media (max-width: 960px) {
  #ppGallery .pp-mini-perks { display: none; }
  .pp-perks-mobile { display: block; margin-top: 4px; }
}

/* Наличие в салонах: заголовок с иконкой-пином; на мобильной название салона
   помещается целиком (переносится), кружок-статус по центру, а «в наличии/нет» —
   одной строкой справа. */
.avail-st { white-space: nowrap; }
.avail-head { display: flex; align-items: center; gap: 6px; }
.avail-head-ico { display: inline-flex; align-items: center; line-height: 0; }
.avail-head-ico .svg-ico { width: 16px; height: 16px; color: var(--blue, #1769e0); }
@media (max-width: 680px) {
  .avail-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; }
  .avail-dot { align-self: center; }
  .avail-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; min-width: 0; }
  .avail-st { grid-column: 3; grid-row: 1; align-self: center; text-align: right; max-width: none; }
}

/* Кнопки чата и «наверх» на странице товара (моб.): не перекрывают нижнюю
   панель покупки и не наезжают друг на друга — чат ниже, «наверх» заметно выше. */
@media (max-width: 680px) {
  body:has(#productPage:not([style*="none"])) #contactFab { bottom: 84px; }
  body:has(#productPage:not([style*="none"])) #scrollTopBtn { bottom: 150px; }
}

/* Ползунок цены в фильтрах каталога: бегунок ровно 18px вместе с белой рамкой
   (box-sizing:border-box), иначе он ~24px и синяя заливка вылезает за круглую
   ручку — формула заливки в filters.js рассчитана именно на 18px. */
.catalog-page .fx-range input[type=range]::-webkit-slider-thumb { box-sizing: border-box; }
.catalog-page .fx-range input[type=range]::-moz-range-thumb { box-sizing: border-box; }

/* Кнопка «наверх» — того же размера, что и кнопка чата (54px). */
#scrollTopBtn { width: 54px; height: 54px; font-size: 22px; }

/* Плитки категорий на главной — все одинаковой (фиксированной) высоты,
   чтобы длинные названия не делали отдельные плитки выше остальных. */
.cat-tiles .cat-tile { height: 122px; min-height: 0; overflow: hidden; }
@media (max-width: 760px) { .cat-tiles .cat-tile { height: 118px; } }
@media (max-width: 480px) { .cat-tiles .cat-tile { height: 116px; padding: 10px 6px; } }

/* ═══ Доводки по обратной связи (тёмная тема, фокус, кнопки) ═══ */

/* #1,#2 Рамка фокуса на сортировке и основном поиске — невидимая (по просьбе) */
.sort-select:focus, .sort-select:focus-visible,
.search:focus-within, .search input:focus, .search input:focus-visible {
  outline: none !important; box-shadow: none !important;
}

/* #1,#16 Выпадающий список сортировки в тёмной теме — читаемый */
html[data-theme="dark"] .sort-select {
  background: var(--card-bg, #14202e) !important; color: var(--ink, #e6eef7) !important;
  border-color: var(--dl-line, #26394e) !important;
}
html[data-theme="dark"] .sort-select option { background: #14202e; color: #e6eef7; }

/* #5 Заголовки фильтров в тёмной теме — контрастные */
html[data-theme="dark"] .catalog-page .fx-head,
html[data-theme="dark"] .catalog-page .fx-group > button.fx-head,
html[data-theme="dark"] .fx-head > span,
html[data-theme="dark"] .fx-group.closed .fx-head {
  color: var(--ink, #e6eef7) !important; opacity: 1 !important;
}

/* #3,#4 Корзина и оформление заказа в тёмной теме */
html[data-theme="dark"] #drawer .field label,
html[data-theme="dark"] #drawer .dtitle,
html[data-theme="dark"] #drawer .dprice,
html[data-theme="dark"] #drawer .total-row,
html[data-theme="dark"] #drawer .total-row b,
html[data-theme="dark"] #drawer .consent-check span { color: var(--ink, #e6eef7) !important; }
html[data-theme="dark"] #drawer input,
html[data-theme="dark"] #drawer select,
html[data-theme="dark"] #drawer textarea,
html[data-theme="dark"] #drawer .ord-salon {
  background: var(--sky, #14202e) !important; color: var(--ink, #e6eef7) !important;
  border-color: var(--dl-line, #26394e) !important;
}
html[data-theme="dark"] #drawer input::placeholder,
html[data-theme="dark"] #drawer textarea::placeholder { color: var(--muted, #8aa0b6); }
html[data-theme="dark"] #drawer .ditem { border-color: var(--dl-line, #26394e) !important; }

/* #19 Три промо-окна — тёмная гамма под тему */
html[data-theme="dark"] .promo:nth-child(1) { background: linear-gradient(135deg,#2a1a1e,#1b1315) !important; color:#f3d8dc !important; }
html[data-theme="dark"] .promo:nth-child(2) { background: linear-gradient(135deg,#152740,#111b2d) !important; color:#d5e6ff !important; }
html[data-theme="dark"] .promo:nth-child(3) { background: linear-gradient(135deg,#142e23,#111e18) !important; color:#d3efe0 !important; }
html[data-theme="dark"] .promo b, html[data-theme="dark"] .promo span:not(.parr) { color: inherit !important; }

/* #12 «Хиты» (3D-витрина) в тёмной теме — тёмная карточка, светлый текст */
html[data-theme="dark"] .c3d-item { background: var(--card-bg, #14202e) !important; border-color: var(--dl-line, #26394e) !important; }
html[data-theme="dark"] .c3d-item .t, html[data-theme="dark"] .c3d-item .p { color: var(--ink, #e6eef7) !important; }

/* #13 Избранное активно — сердечко красное (карточка и страница товара) */
.card .fav.on .svg-ico { color:#e0313f !important; fill:#e0313f !important; }
[data-action="pp-fav"].active { color:#e0313f !important; }
[data-action="pp-fav"].active .svg-ico { color:#e0313f !important; fill:#e0313f !important; }

/* #13,#18 Сравнение активно — синий бренд-акцент, виден в обеих темах */
.card .cmp.on .svg-ico { color: var(--blue,#1769e0) !important; fill: var(--blue,#1769e0) !important; }
[data-action="pp-cmp"].active { color: var(--blue,#1769e0) !important; }
[data-action="pp-cmp"].active .svg-ico { color: var(--blue,#1769e0) !important; fill: var(--blue,#1769e0) !important; }
.fav-cmp.on { color:#fff !important; background: var(--blue,#1769e0) !important; border-color: var(--blue,#1769e0) !important; }

/* Подсказка при 1 товаре в сравнении (#7) */
.cmp-hint { padding:12px 14px; margin-bottom:10px; border-radius:12px; background: rgba(23,105,224,.10); color: var(--blue,#1769e0); font-size:13px; line-height:1.4; }
/* ═══ Бронь и резерв ═══ */
.stock-line.booked, .pp-stock.booked { color:#c47b00 !important; }
.pp-stock.booked::before { background:#e0a400 !important; }
.submit.alt { margin-top:8px; background:var(--blue,#1769e0); }
.submit.alt:hover { filter:brightness(1.06); }
.book-list { display:grid; gap:8px; margin-bottom:10px; }
.book-item { display:grid; grid-template-columns:20px 46px 1fr; gap:10px; align-items:center; padding:8px; border:1px solid var(--fl-line,#eef2f8); border-radius:12px; cursor:pointer; }
.book-item input { width:18px; height:18px; }
.book-thumb { width:46px; height:46px; border-radius:8px; overflow:hidden; display:grid; place-items:center; background:var(--sky,#f2f6fc); font-size:20px; }
.book-thumb img { width:100%; height:100%; object-fit:contain; }
.book-info { display:flex; flex-direction:column; gap:2px; min-width:0; font-size:13px; }
.book-info b { font-weight:700; line-height:1.2; }
.book-no { color:#c0392b; font-size:11px; }
.book-note { margin:10px 0; padding:10px 12px; border-radius:12px; background:rgba(23,105,224,.08); color:var(--ink,#12243b); font-size:12.5px; line-height:1.45; }
html[data-theme="dark"] .book-item { border-color:var(--dl-line,#26394e); }
html[data-theme="dark"] .book-thumb { background:var(--sky,#14202e); }
html[data-theme="dark"] .book-note { color:var(--ink,#e6eef7); }
/* ═══ Доводки: бренды, фильтры, категория, хиты, стрелки ═══ */
/* #3 Выбранная категория — светлая карточка в светлой теме (в тёмной остаётся тёмной) */
html:not([data-theme="dark"]) .catalog-page .cat-featured { background: linear-gradient(135deg,#eaf1fb,#dce8fb) !important; color:#12243b !important; border-color: var(--fl-line,#e6eef7) !important; }
html:not([data-theme="dark"]) .catalog-page .cat-featured .cf-name { color:#12243b !important; }
html:not([data-theme="dark"]) .catalog-page .cat-featured .cf-count { color:#5a6b82 !important; }
html:not([data-theme="dark"]) .catalog-page .cat-featured .cf-icon { color:#1769e0 !important; }
html:not([data-theme="dark"]) .catalog-page .cat-featured .cf-tag { color:#1769e0 !important; background:rgba(23,105,224,.12) !important; }
html:not([data-theme="dark"]) .catalog-page .cat-featured .cf-chip { color:#12243b; border-color:rgba(18,36,59,.18); }

/* #2 Фильтры — ровные скруглённые углы */
.catalog-page #catFilters { border-radius:18px !important; }

/* #4 «Хиты» — компактнее, без лишнего пространства */
#carousel3d > .wrap { padding:22px 36px 18px !important; }
#carousel3d .c3d-stage { height:300px !important; }
@media (max-width:760px){ #carousel3d .c3d-stage { height:280px !important; } #carousel3d > .wrap { padding:20px 16px 14px !important; } }

/* #6 Бегущая строка брендов — выровнять по контенту (как блоки над/под) */
.brands { max-width:1200px; margin-left:auto; margin-right:auto; padding-left:20px !important; padding-right:20px !important; }

/* #6 Стрелка в промо-квадратике — строго по центру */
.promo .parr { display:flex !important; align-items:center; justify-content:center; line-height:1; }

/* #1 Кликабельные бренды: бегущая строка и бренд над названием товара */
.brands span[data-action] { cursor:pointer; transition:color .15s; }
.brands span[data-action]:hover { color: var(--blue,#1769e0); }
.pp-brand[data-action] { cursor:pointer; }
.pp-brand[data-action]:hover span { color: var(--blue,#1769e0); text-decoration:underline; }

/* Чат-FAB: прозрачный контейнер держит ширину/высоту скрытых пунктов меню и
   перехватывал тапы по кнопкам под ним («В корзину»/«Купить в 1 клик» иногда не
   нажимались). Контейнер больше не ловит клики — ловят только кнопки внутри. */
#contactFab { pointer-events: none; }
#contactFab > *, #contactFab #fabMain, #contactFab .fab-item { pointer-events: auto; }