/*
 * Дизайн-токены редизайна pvzbutik.ru.
 * Форма — от turbosmena.ru (шрифт, скругления, сетка, отступы, тени, движение; исходники ТС на 27.10.2026).
 * Цвета — только фирменные цвета pvzbutik (логотип, styles.scss / styles.css сайта на 28.10.2026).
 *
 * Подключение: положить шрифты из папки «шрифт-onest» в public/fonts/onest/,
 * этот файл — в public/css/ и подключить ПЕРВЫМ, до styles.css.
 * Значения не менять «на глаз»: если чего-то не хватает — брать из ГАЙД.md.
 */

/* ---------- Шрифт Onest (свой хостинг, те же файлы, что на turbosmena.ru) ---------- */
@font-face { font-family: 'Onest'; src: url('/fonts/onest/Onest-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('/fonts/onest/Onest-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('/fonts/onest/Onest-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('/fonts/onest/Onest-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: only light;

  /* ---------- Фирменные цвета pvzbutik ----------
   * Синий и красный — из логотипа «ПВЗ! БУТИК», остальные — из $color-* в styles.scss.
   * Наведение — тот же цвет на 12 % темнее. */
  --ts-blue: #0E61FF;           /* бренд: ссылки, выбранное, фокус, синие кнопки (rgb 14 97 255, «ПВЗ!») */
  --ts-blue-hover: #0C55E0;
  --ts-red: #EA3A3D;            /* бренд: ГЛАВНОЕ действие — одна красная кнопка на блок, ошибки полей,
                                   звёздочка обязательного поля, счётчик, скидка (rgb 234 58 61, «БУТИК») */
  --ts-red-hover: #CE3336;
  --ts-green: #06A765;          /* «Показать телефон», успех, «Верифицированный объект» (rgb 6 167 101) */
  --ts-green-hover: #059359;
  --ts-cyan: #00B4E8;           /* $color-blue-bright: индикатор загрузки, наведение на «Показать все города» */
  --ts-yellow: #FFDD00;         /* $color-yellow: только бледные метки (Яндекс Маркет, «Быстрая окупаемость») */
  --ts-purple: #D12AC4;         /* $color-purple: только бледная метка Wildberries */
  --ts-navy: #2B3A67;           /* фон баннера «Не пропустите выгодный вариант» */

  /* Мессенджеры — как сейчас на pvzbutik (.btn--telegram, .btn--max в temp.css) */
  --ts-telegram: linear-gradient(90deg, #229ED9, #0088CC);
  --ts-max: linear-gradient(90deg, #385AFB, #8750DB);

  /* ---------- Текст ---------- */
  --ts-black: #161617;          /* основной текст, тёмные кнопки, подвал (rgb 22 22 23) */
  --ts-gray: #6D7588;           /* второстепенный текст, подписи (rgb 109 117 136) */
  --ts-light-gray: #AAB4C8;     /* плейсхолдеры, мета-иконки, неактивное, старая цена (rgb 170 180 200) */
  --ts-white: #FFFFFF;

  /* ---------- Фоны и линии ---------- */
  --ts-bg-page: #EEF2F4;        /* фон всех страниц (body.grey-bg, rgb 238 242 244) */
  --ts-bg-cabinet: #EEF2F4;     /* фон кабинета продавца */
  --ts-bg-surface: #FFFFFF;     /* карточки, панели, шапка */
  --ts-bg-muted: #F6F7FA;       /* фон неактивного поля, наведение в списках и на белую кнопку (rgb 246 247 250) */
  --ts-bg-disabled: #EEF2F4;    /* серые кнопки 44 и 48, неактивная кнопка, скелетон, заглушка карты */
  --ts-line: #DADFE6;           /* рамки полей, выпадающих списков, белых кнопок (rgb 218 223 230) */
  --ts-line-cool: #DDE5F1;      /* рамки карточек и панелей, разделители строк (rgb 221 229 241) */
  --ts-line-strong: #AAB4C8;    /* неактивные точки галереи */

  /* ---------- Бледные заливки для меток и плашек ---------- */
  --ts-pale-blue: #0E61FF14;    /* 8 %: плашка-информация, текущая страница пагинации */
  --ts-pale-red: #EA3A3D14;     /* 8 %: плашка-предупреждение, метка скидки */
  --ts-pale-green: #06A76514;   /* 8 %: плашка успеха, круг под галочкой */
  --ts-pale-purple: #D12AC41F;  /* 12 %: метка Wildberries */
  --ts-pale-yellow: #FFDD0047;  /* 28 %: метка Яндекс Маркета (жёлтому нужно плотнее, иначе не виден) */

  /* ---------- Типографика ---------- */
  --ts-font: 'Onest', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ts-lh-heading: 1.3;

  /* ---------- Сетка ---------- */
  --ts-container: 1328px;       /* 1296 контент + 2×16 поля */
  --ts-gutter: 16px;            /* поля контейнера на ширине ≥ 768 */
  --ts-gutter-mobile: 3.5%;     /* поля контейнера на ширине < 768 */
  --ts-grid-gap: 24px;          /* 12 колонок, промежуток 24 */
  --ts-page-pad-top: 32px;
  --ts-page-pad-bottom: 96px;

  /* ---------- Скругления ---------- */
  --ts-radius-sm: 8px;          /* маленькие метки, мини-кнопки */
  --ts-radius: 10px;            /* базовый (rounded-default) */
  --ts-radius-btn: 12px;        /* ВСЕ кнопки и поля ввода */
  --ts-radius-card: 16px;       /* карточки, панели, баннеры */
  --ts-radius-modal: 20px;      /* модальные окна */
  --ts-radius-pill: 100px;

  /* ---------- Тени (их мало, они еле заметны) ---------- */
  --ts-shadow-xs: 0 1px 2px 0 #0000000D;   /* белая кнопка с рамкой */
  --ts-shadow-sm: 0 2px 3px 0 #00000012;   /* панель фильтров, белая кнопка с тенью */
  --ts-shadow-header: 0 2px 3px 0 #16161714; /* шапка, выпадающее меню, окно подтверждения */
  --ts-shadow-pop: 0 1px 3px 0 #0000001A;  /* выпадающие списки */
  --ts-ring: 0 0 0 2px #0E61FF33;          /* фокус поля ввода */
  --ts-ring-error: 0 0 0 2px #EA3A3D33;    /* фокус поля с ошибкой */

  /* ---------- Движение ---------- */
  --transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --ts-duration: 300ms;
  --ts-duration-fast: 150ms;
}

/* ---------- База страницы ----------
 * line-height у html/body не трогаем (у ТС там 1): старая вёрстка pvzbutik рассчитана на normal,
 * а компоненты .ts-* задают межстрочный интервал сами. */
body {
  font-family: var(--ts-font);
  color: var(--ts-black);
  background: var(--ts-bg-page);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Контейнер и сетка ---------- */
.ts-container {
  max-width: var(--ts-container);
  margin: 0 auto;
  padding-left: var(--ts-gutter);
  padding-right: var(--ts-gutter);
}
@media (max-width: 767px) {
  .ts-container { padding-left: var(--ts-gutter-mobile); padding-right: var(--ts-gutter-mobile); }
}
.ts-page { padding-top: var(--ts-page-pad-top); padding-bottom: var(--ts-page-pad-bottom); }
.ts-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--ts-grid-gap); }

/* ---------- Типографическая шкала (как на turbosmena.ru) ---------- */
.ts-h1, .ts-h2, .ts-h3 { font-family: var(--ts-font); font-weight: 700; line-height: 1.3; }
.ts-h1 { font-size: 40px; }
.ts-h2 { font-size: 32px; }
.ts-h3 { font-size: 24px; }
.ts-h4 { font-family: var(--ts-font); font-weight: 600; font-size: 24px; line-height: 32px; }
.ts-h5 { font-family: var(--ts-font); font-size: 18px; line-height: 28px; }
.ts-text { font-family: var(--ts-font); font-size: 16px; line-height: 24px; }
.ts-subtext { font-family: var(--ts-font); font-size: 18px; line-height: 1.3; color: var(--ts-gray); }
.ts-small { font-size: 14px; line-height: 18px; }

@media (max-width: 1279px) {
  .ts-h1 { font-size: 32px; }
  .ts-h2 { font-size: 28px; }
  .ts-h3 { font-size: 20px; }
  .ts-h4 { font-size: 18px; line-height: 24px; }
  .ts-h5 { font-size: 16px; line-height: 20px; }
  .ts-text { font-size: 14px; line-height: 20px; }
  .ts-subtext { font-size: 14px; }
}
@media (max-width: 767px) {
  .ts-h1 { font-size: 24px; }
  .ts-h2 { font-size: 24px; }
  .ts-h3 { font-size: 18px; }
}

/* ---------- Плавное появление (правило сайта: ничего не выскакивает рывком) ---------- */
.ts-fade { transition: opacity var(--ts-duration) var(--transition-timing-function); }
.ts-fade.is-hidden { opacity: 0; pointer-events: none; }

/* ---------- Скелетон загрузки ---------- */
@keyframes ts-skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ts-skeleton {
  display: block;
  border-radius: var(--ts-radius);
  background: linear-gradient(90deg, #EEF2F4 25%, #F6F7FA 50%, #EEF2F4 75%);
  background-size: 200% 100%;
  animation: ts-skeleton 3s infinite linear;
}

/* ---------- Полоса прокрутки внутри блоков ---------- */
.ts-scroll { scrollbar-width: thin; scrollbar-color: var(--ts-line) transparent; overscroll-behavior: contain; }
.ts-scroll::-webkit-scrollbar { width: 8px; height: 6px; }
.ts-scroll::-webkit-scrollbar-track { background: transparent; }
.ts-scroll::-webkit-scrollbar-thumb { background: var(--ts-line); border-radius: 100px; }
.ts-scroll::-webkit-scrollbar-thumb:hover { background: var(--ts-gray); }

/* ---------- Подчёркивание точками (адреса, «Выберите адрес») ---------- */
.ts-dotted {
  padding-bottom: 2px;
  margin-bottom: -2px;
  background: repeating-linear-gradient(to right, color-mix(in srgb, currentColor, transparent 70%) 0 1px, transparent 0 2px) 0 100% / 100% 1px no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Без лигатур Onest ----------
 * В Onest включены лигатуры, которые склеивают звёздочки: «+7 996 *** ** **» выглядит как «** *».
 * Вешать на скрытый номер телефона и любые строки из «*», «-», «>», где важен каждый знак. */
.ts-no-liga { font-feature-settings: 'liga' 0, 'calt' 0; font-variant-ligatures: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}