@charset "UTF-8";
/* ==========================================================================
   Общий слой UI — токены и базовые компоненты
   Исходник: style/ui.scss + style/ui/_*.scss  →  собирается в style/ui.css
   Сборка:   C:\OSPanel\bin\sass.bat style/ui.scss style/ui.css
             (или вотчер SCSS в PhpStorm — пересобирает при сохранении)
   --------------------------------------------------------------------------
   Подключается в header.php ДО $APPLICATION->ShowHead(), поэтому порядок такой:
     ui.css  →  style.css компонентов (bitrix/cache/css/.../page_*)  →  style/style.css
   Компонент может переопределить базовый класс вложенным правилом:
   .my-block .cs-btn--lg { ... }

   Как пользоваться:
   - в новых и переделанных компонентах цвета, радиусы, высоты и шрифты
     берём только из --cs-* переменных, а не пишем HEX руками;
   - кнопки, цены, плашки — классами .cs-btn, .cs-price, .cs-badge...,
     в style.css компонента остаётся только его раскладка и особенности;
   - не вешайте старые классы рядом с cs- классами: style.css грузится последним
     и перебьёт их при равной специфичности;
   - новый базовый компонент — новый файл в style/ui/ и строка @import ниже.

   Префикс cs- (cleansolutions), а не ui-: классы .ui-btn и т.п. есть у самого Bitrix.
   ========================================================================== */
:root {
  /* ---- Цвета: бренд ---- */
  --cs-brand: #049BCE; /* = --blue */
  --cs-brand-hover: #0385B1; /* = --blue-hover */
  --cs-brand-active: #036E93;
  --cs-brand-dark: #0679A1; /* текст на светло-голубом */
  --cs-brand-soft: #EAF7FC; /* светлый фон, hover вторичных кнопок */
  --cs-brand-rgb: 4, 155, 206; /* для теней и прозрачности: rgba(var(--cs-brand-rgb), .3) */
  /* ---- Цвета: статусы ---- */
  --cs-sale: rgb(255, 101, 117); /* = --danger: цена со скидкой, «Распродажа» */
  --cs-hit: #336FC4; /* плашка «Хит» */
  --cs-new: #21DB44; /* «Новинка» */
  --cs-success: #1E9E5A;
  --cs-warning: #F4D264;
  /* ---- Нейтральные ---- */
  --cs-text: #212529;
  --cs-text-muted: #66768A;
  --cs-border: #DBDBDB; /* = --border_color__card */
  --cs-border-soft: #E4E9EF;
  --cs-bg-page: #F5F5F5;
  --cs-surface: #FFFFFF;
  --cs-surface-alt: #FAFBFC;
  /* ---- Шрифт ---- */
  --cs-font: 'Montserrat', sans-serif;
  --cs-fs-xs: 12px;
  --cs-fs-sm: 13px;
  --cs-fs-base: 14px;
  --cs-fs-md: 16px;
  --cs-fs-lg: 18px;
  --cs-fs-xl: 20px;
  --cs-fs-h3: 22px;
  --cs-fs-h2: 28px;
  --cs-fs-h1: 32px;
  --cs-lh-tight: 1.2;
  --cs-lh-base: 1.5;
  /* ---- Скругления ---- */
  --cs-r-sm: 4px;
  --cs-r-md: 8px; /* = --radius-microElements: поля, мелкие кнопки */
  --cs-r-lg: 12px; /* крупные кнопки */
  --cs-r-xl: 16px; /* карточки, блоки */
  --cs-r-pill: 999px;
  /* ---- Высоты контролов ---- */
  --cs-h-sm: 36px;
  --cs-h-md: 44px;
  --cs-h-lg: 56px;
  /* ---- Тени и движение ---- */
  --cs-shadow-card: 0 1px 2px rgba(15, 30, 46, .04), 0 8px 24px rgba(15, 30, 46, .06);
  --cs-shadow-hover: 0 0 10px 3px rgba(128, 128, 128, .2); /* = --hoverBox */
  --cs-shadow-brand: 0 6px 16px rgba(var(--cs-brand-rgb), .28);
  --cs-shadow-brand-hover: 0 8px 22px rgba(var(--cs-brand-rgb), .36);
  --cs-focus-ring: 3px solid rgba(var(--cs-brand-rgb), .45);
  --cs-ease: cubic-bezier(.2, .7, .2, 1);
}

.cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--cs-h-md);
  margin: 0;
  padding: 10px 20px;
  border: 1.5px solid transparent;
  border-radius: var(--cs-r-md);
  background: transparent;
  color: var(--cs-text);
  font-family: var(--cs-font);
  font-size: var(--cs-fs-md);
  font-weight: 600;
  line-height: var(--cs-lh-tight);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s var(--cs-ease), border-color 0.2s var(--cs-ease), color 0.2s var(--cs-ease), box-shadow 0.2s var(--cs-ease), transform 0.15s var(--cs-ease);
  -webkit-tap-highlight-color: transparent;
}
.cs-btn svg {
  flex-shrink: 0;
}
.cs-btn:focus-visible {
  outline: var(--cs-focus-ring);
  outline-offset: 2px;
}
.cs-btn:disabled, .cs-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.cs-btn--sm {
  min-height: var(--cs-h-sm);
  padding: 6px 14px;
  font-size: var(--cs-fs-sm);
}

.cs-btn--lg {
  min-height: var(--cs-h-lg);
  padding: 14px 20px;
  border-radius: var(--cs-r-lg);
  font-size: 17px;
}

.cs-btn--primary {
  background: var(--cs-brand);
  box-shadow: var(--cs-shadow-brand);
  color: #fff;
}
.cs-btn--primary:hover {
  background: var(--cs-brand-hover);
  box-shadow: var(--cs-shadow-brand-hover);
  color: #fff;
  transform: translateY(-1px);
}
.cs-btn--primary:active {
  background: var(--cs-brand-active);
  box-shadow: 0 3px 8px rgba(var(--cs-brand-rgb), 0.28);
  color: #fff;
  transform: scale(0.985);
}

.cs-btn--outline {
  border-color: var(--cs-border-soft);
  background: var(--cs-surface);
  color: var(--cs-text);
}
.cs-btn--outline:hover {
  border-color: var(--cs-brand);
  background: var(--cs-brand-soft);
  color: var(--cs-brand-dark);
}

.cs-btn--ghost {
  color: var(--cs-brand);
}
.cs-btn--ghost:hover {
  background: var(--cs-brand-soft);
  color: var(--cs-brand-dark);
}

.cs-btn.is-pressed {
  animation: cs-btn-pop 0.45s var(--cs-ease);
}

@keyframes cs-btn-pop {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(0.96);
  }
  70% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cs-btn,
  .cs-btn.is-pressed {
    animation: none;
    transition: none;
  }
}
.cs-price {
  margin: 0;
  color: var(--cs-text);
  font-size: 22px;
  font-weight: 700;
  line-height: var(--cs-lh-tight);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.cs-price--lg {
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.cs-price--sale {
  color: var(--cs-sale);
}

.cs-price__unit {
  color: var(--cs-text-muted);
  font-size: var(--cs-fs-md);
  font-weight: 500;
  letter-spacing: 0;
}

.cs-price-old {
  margin: 0;
  color: var(--cs-text-muted);
  font-size: var(--cs-fs-md);
  font-weight: 500;
  text-decoration: line-through;
}
.cs-price-old:empty {
  display: none;
}

@media (max-width: 991.98px) {
  .cs-price--lg {
    font-size: 32px;
  }
}
@media (max-width: 767.98px) {
  .cs-price--lg {
    font-size: 30px;
  }
}
.cs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--cs-r-pill);
  background: var(--cs-brand-soft);
  color: var(--cs-brand-dark);
  font-size: var(--cs-fs-sm);
  font-weight: 500;
  line-height: var(--cs-lh-tight);
  white-space: nowrap;
}

.cs-badge--sale {
  background: var(--cs-sale);
  color: #fff;
}

.cs-badge--hit {
  background: var(--cs-hit);
  color: #fff;
}

.cs-badge--new {
  background: var(--cs-new);
  color: #fff;
}

.cs-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  background: var(--cs-brand-soft);
  color: var(--cs-brand-dark);
  font-size: var(--cs-fs-sm);
  font-weight: 500;
  line-height: 1.35;
}
.cs-note svg {
  flex-shrink: 0;
}

.cs-card {
  border: 1px solid var(--cs-border-soft);
  border-radius: var(--cs-r-xl);
  background: var(--cs-surface);
  box-shadow: var(--cs-shadow-card);
  color: var(--cs-text);
}

/*# sourceMappingURL=ui.css.map */