/* CAPSLOCKS — дизайн-токены и базовые компоненты кассы шоурума «CAPSLOCKS Pay».
   Сняты с capslocks.ru 15.11.2026 (Tilda, проект 13793907). Описание: /root/capslocks_pay/docs/DESIGN.md
   Подключение:
     <link rel="stylesheet" href="/static/brand/fonts/manrope.css">
     <link rel="stylesheet" href="/static/brand/tokens.css">

   ВАЖНО про имена. Переменные и классы оставлены с префиксом cps- (как в исходной кассе, с которой скопирован проект),
   чтобы app.css и шаблоны переносились почти без правок. Значения — CAPSLOCKS.
   «--cps-blue» здесь = фирменный ФИОЛЕТОВЫЙ, «--cps-orange» = РОЗОВЫЙ акцент. Для нового кода есть понятные
   синонимы --cl-* (это одни и те же цвета). */

:root {
  /* ---------- Бренд CAPSLOCKS (исходные значения) ---------- */
  --cl-violet: #9e72ff;          /* фирменный: логотип «CAPS», «Каталог», «Купить», «В корзину», кнопка поиска, чекбоксы */
  --cl-violet-light: #a48bff;    /* наведение на кнопки Tilda (на сайте при наведении кнопка СВЕТЛЕЕТ) */
  --cl-violet-dark: #8556ec;     /* «Протестировать в шоуруме», «Мне нужна помощь в выборе», ссылки «Сравнить»; белый текст 4,6:1 */
  --cl-violet-deep: #6a4ae0;     /* наведение на кнопки собственных виджетов сайта (#cl-sr, #cls); белый текст 5,7:1 */
  --cl-pink: #fa94ff;            /* розовый акцент: метки «ХИТ», «-30%» (градиент #ffc7fd → #fa94ff) */
  --cl-pink-light: #ffc7fd;
  --cl-dark: #222222;            /* чёрные кнопки-таблетки («Каталог» на баннере, «Оставить заявку»), подвал */
  --cl-dark-hover: #303030;      /* наведение на чёрную кнопку (.icon-button-black:hover) */
  --cl-logo-ink: #353535;        /* «LOCKS» в логотипе */
  --cl-lavender: #f9f7fe;        /* фон страниц сайта */
  --cl-violet-bg: #f1edff;       /* плашка «Шоурум в Москве», фон иконок-кружков */
  --cl-violet-hover-bg: #ebe6ff; /* наведение на плашки-фильтры */

  /* ---------- Совместимость с исходной кассой: те же имена, значения CAPSLOCKS ---------- */
  --cps-blue: var(--cl-violet-dark);       /* был #195dd8: заливки навигации, активные плашки, ссылки, контурные кнопки */
  --cps-blue-dark: var(--cl-violet-deep);  /* был #063da1: наведение/нажатие, счётчик в карточке товара */
  --cps-blue-ink: var(--cl-violet-deep);   /* был #0b43a8: фиолетовый текст в инфоблоках, кольцо фокуса */
  --cps-orange: var(--cl-pink);            /* был оранжевый CTA: здесь только метки и «время кончается» */
  --cps-orange-2: var(--cl-pink-light);
  --cps-orange-hover: var(--cl-pink);
  --cps-orange-text: var(--cl-violet-deep);
  --cps-lime: var(--cl-pink-light);        /* лаймового на capslocks.ru нет */
  --cps-telegram: #28b0ef;                 /* на capslocks.ru не используется, оставлено для совместимости */
  --cps-logo: var(--cl-violet);

  /* ---------- Текст ---------- */
  --cps-ink: #222222;             /* основной текст, заголовки, цены (настройки Tilda: titleColor, price color) */
  --cps-ink-2: #2b2533;           /* тёмный фиолетово-серый: текст кнопки «Сравнить», плашка сравнения */
  --cps-muted: #6c6775;           /* второстепенный: описание, «Подробнее», старая цена в каталоге (5,5:1 на белом) */
  --cps-muted-2: #777777;         /* «Артикул: …» в карточке товара (4,5:1 — не мельче 14px) */
  --cps-faint: #9a96a3;           /* «Не сейчас» в окне сайта — только служебный текст (2,9:1) */
  --cps-price-old: #6c6775;       /* зачёркнутая цена в каталоге (price_optsObj.colorOld) */

  /* ---------- Фоны и поверхности ---------- */
  --cps-bg: var(--cl-lavender);   /* фон страницы — светло-лавандовый, карточки на нём белые */
  --cps-topbar: var(--cl-violet-bg);
  --cps-tile: #ffffff;            /* плашки разделов на сайте белые с тонкой рамкой (см. .cps-tile ниже) */
  --cps-surface: #fbfaff;         /* инфоблок «Примерьте очки в шоуруме» в карточке товара */
  --cps-soft: #f4f3f6;            /* серые подложки: кнопка-крестик окна, наведение на строки */
  --cps-info-bg: var(--cl-violet-bg);
  --cps-orange-bg: #fff4ec;       /* на сайте нет; оставлено как фон предупреждения */

  /* ---------- Линии ---------- */
  --cps-line: #e7e7e7;            /* рамка карточки в настройках каталога Tilda; разделители */
  --cps-line-blue: #dfd5ff;       /* рамка фиолетового инфоблока */
  --cps-line-input: #cdcdcd;      /* рамка поиска в шапке сайта */
  --cps-line-search: #cdcdcd;
  --cl-line-violet: #dbd7e2;      /* рамка кнопок «Подробнее»/«Сравнить», панели фильтров */
  --cl-line-chip: #f0f0f0;        /* рамка плашек разделов «Все / Умные очки / …» */

  /* ---------- Статусы (на сайте своих нет — как в исходной кассе) ---------- */
  --cps-success: #247849;  --cps-success-bg: #eaf4ee;
  --cps-error: #d9262c;    --cps-error-bg: #fdecec;
  --cps-warning: #c2410c;  --cps-warning-bg: #fff4ec;
  --cps-info: var(--cl-violet-dark); /* --cps-info-bg задан выше */

  /* ---------- Градиенты ---------- */
  --cps-grad-cta: var(--cl-violet);              /* на сайте главные кнопки сплошные, без градиента */
  --cps-grad-cta-hover: var(--cl-violet-dark);
  --cps-grad-blue: linear-gradient(320.4deg, #a491f1 0%, #d2c6f9 50%, #ece8ff 100%); /* светлые баннеры главной (точно из CSS) */
  --cps-grad-hero: linear-gradient(135deg, #c1c0ff 0%, #b896ff 55%, #9e72ff 100%);   /* главный баннер — снято пипеткой со скриншота */
  --cl-grad-pink: linear-gradient(129deg, #ffc7fd 0%, #fa94ff 100%);                 /* метки товаров (точно из CSS) */

  /* ---------- Шрифты ---------- */
  --cps-font: 'Manrope', Arial, sans-serif;
  --cps-font-display: 'Manrope', Arial, sans-serif; /* отдельного акцидентного шрифта нет: крупные слова — Manrope 800 */

  /* ---------- Радиусы ---------- */
  --cps-r-pill: 100px;   /* кнопки, поля, плашки (на сайте 30px / 99px / 100px / 110px — всё таблетки) */
  --cps-r-xl: 24px;      /* окна (всплывающее окно «Шоурум в Москве») */
  --cps-r-lg: 20px;      /* белые блоки, баннеры, корзина */
  --cps-r-md: 20px;      /* картинка товара в каталоге, плитки преимуществ */
  --cps-r-sm: 12px;      /* инфоблок в карточке товара */
  --cps-r-xs: 10px;      /* карточка каталога, панель фильтров */

  /* ---------- Тени ---------- */
  --cps-shadow-header: 0 15px 30px -10px rgba(0, 11, 48, .2);  /* шапка сайта (t1261__panel) */
  --cps-shadow-card: 0 10px 28px 0 rgba(106, 72, 183, .08);    /* белый блок «Примерьте перед покупкой» */
  --cps-shadow-soft: 0 8px 24px rgba(0, 0, 0, .08);            /* наведение на карточку в виджете сравнения */
  --cps-shadow-hover: 0 5px 15px -2px rgba(0, 0, 0, .07);      /* наведение на карточку каталога (prodcard shadowHover) */
  --cps-shadow-float: 0 24px 70px rgba(29, 27, 34, .3);        /* всплывающее окно */
  --cps-focus: 0 0 0 2px #fff, 0 0 0 4px #6a4ae0;

  /* ---------- Размеры (касса для планшета/телефона, крупнее сайта) ---------- */
  --cps-tap: 56px;
  --cps-tap-lg: 64px;
  --cps-gap: 16px;
  --cps-container: 1200px;
}

/* ================= База ================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cps-bg);
  color: var(--cps-ink);
  font: 400 17px/1.45 var(--cps-font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cps-blue); text-decoration: none; }
a:hover { color: var(--cps-blue-dark); }
:focus-visible { outline: none; box-shadow: var(--cps-focus); }

/* на сайте заголовки жирные (Manrope 700), в исходной кассе были тонкие 400 */
.cps-h1 { margin: 0 0 16px; font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
.cps-h2 { margin: 0 0 12px; font-size: 24px; line-height: 1.25; font-weight: 700; }
.cps-h3 { margin: 0 0 8px;  font-size: 20px; line-height: 1.3; font-weight: 700; }
.cps-display { font-family: var(--cps-font-display); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.cps-accent { color: var(--cl-violet); }
.cps-muted { color: var(--cps-muted); }
.cps-small { font-size: 14px; color: var(--cps-muted); }
.cps-price { font-weight: 700; white-space: nowrap; }
.cps-price-old { color: var(--cps-price-old); text-decoration: line-through; font-weight: 700; }

/* ================= Шапка ================= */
.cps-topbar { background: var(--cps-topbar); font-size: 13px; color: var(--cps-ink); }
.cps-topbar__in { max-width: var(--cps-container); margin: 0 auto; padding: 6px 20px; display: flex; gap: 16px; justify-content: space-between; }
.cps-header { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: var(--cps-shadow-header); }
.cps-header__in { max-width: var(--cps-container); margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 16px; }
.cps-header__logo { height: 32px; width: auto; display: block; }   /* logo.svg 134×27 → ~159px шириной */
.cps-header__title { font-size: 15px; font-weight: 600; color: var(--cps-muted); white-space: nowrap; }
@media (max-width: 479px) { .cps-header__title { display: none; } .cps-header__logo { height: 28px; } }
.cps-header__spacer { flex: 1; }

/* ================= Кнопки ================= */
/* На capslocks.ru кнопки — таблетки, БЕЗ заглавных букв, Manrope 600 */
.cps-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--cps-tap); padding: 0 28px;
  border: 0; border-radius: var(--cps-r-pill);
  font: 600 16px/1.2 var(--cps-font); text-transform: none; letter-spacing: 0;
  cursor: pointer; text-decoration: none; user-select: none;
  transition: background-color .2s ease-in-out, color .2s ease-in-out, box-shadow .2s ease-in-out, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.cps-btn:active { transform: scale(.98); }
.cps-btn[disabled], .cps-btn.is-disabled { opacity: .45; pointer-events: none; }
.cps-btn--block { display: flex; width: 100%; }
.cps-btn--lg { min-height: var(--cps-tap-lg); font-size: 19px; font-weight: 700; }   /* 19px/700 = «крупный текст»: белый на #9e72ff (3,3:1) проходит */

/* Главный призыв: фирменный фиолетовый #9e72ff (как «Купить», «В корзину»). Только крупно (--lg), один на экран */
.cps-btn--cta { color: #fff; background: var(--cps-grad-cta); }
.cps-btn--cta:hover, .cps-btn--cta:focus-visible { color: #fff; background: var(--cps-grad-cta-hover); }

/* Покупка/подтверждение («Добавить»): тёмный фиолетовый #8556ec, нажатие — #6a4ae0. Белый текст 4,6:1 */
.cps-btn--primary { color: #fff; background: var(--cps-blue); }
.cps-btn--primary:hover, .cps-btn--primary:focus-visible { color: #fff; background: var(--cps-blue-dark); }

/* Навигация («Продажи», «Каталог»): чёрная таблетка, как «Каталог» на баннере сайта */
.cps-btn--blue { color: #fff; background: var(--cl-dark); }
.cps-btn--blue:hover { color: #fff; background: var(--cl-dark-hover); }

/* Контурная (как «Выбрать время» в карточке товара) */
.cps-btn--outline { color: var(--cps-blue); background: #fff; box-shadow: inset 0 0 0 2px var(--cps-blue); }
.cps-btn--outline:hover { color: var(--cps-blue-dark); box-shadow: inset 0 0 0 2px var(--cps-blue-dark); }

/* Тихая (отмена, «назад»): серая подложка, при наведении — светло-фиолетовая, как плашки сайта */
.cps-btn--ghost { color: var(--cps-ink); background: var(--cps-soft); }
.cps-btn--ghost:hover { background: var(--cl-violet-hover-bg); color: var(--cps-blue-dark); }

/* Круглая иконка (плюс/минус) */
.cps-btn-icon {
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cps-blue); background: #fff; box-shadow: inset 0 0 0 2px var(--cps-blue);
  font: 500 26px/1 var(--cps-font);
}
.cps-btn-icon--filled { color: #fff; background: var(--cps-blue); box-shadow: none; }

/* ================= Поля ввода ================= */
.cps-field { display: block; margin: 0 0 16px; }
.cps-label { display: block; margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--cps-ink); }
.cps-input {
  width: 100%; height: var(--cps-tap); padding: 0 24px;
  border: 1px solid var(--cps-line-input); border-radius: var(--cps-r-pill);
  background: #fff; color: var(--cps-ink);
  font: 400 18px/1.2 var(--cps-font);
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.cps-input::placeholder { color: var(--cps-muted); opacity: 1; }
.cps-input:focus { outline: none; border-color: var(--cl-violet); box-shadow: 0 0 0 3px rgba(158, 114, 255, .2); }
.cps-field.is-error .cps-input { border-color: var(--cps-error); box-shadow: 0 0 0 3px rgba(217, 38, 44, .12); }
.cps-hint { margin: 6px 0 0 24px; font-size: 14px; color: var(--cps-muted); }
.cps-field.is-error .cps-hint { color: var(--cps-error); }

/* Поиск как в шапке сайта: поле с рамкой #cdcdcd + фиолетовая кнопка-лупа справа */
.cps-search { display: flex; height: var(--cps-tap); }
.cps-search__input {
  flex: 1; min-width: 0; padding: 0 22px; border: 1px solid var(--cps-line-search); border-right: 0;
  border-radius: 30px 0 0 30px; font: 400 17px var(--cps-font); color: var(--cps-ink); background: #fff;
}
.cps-search__input:focus { outline: none; border-color: var(--cl-violet); }
.cps-search__btn { width: 64px; border: 0; border-radius: 0 30px 30px 0; background: var(--cl-violet); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cps-search__btn:hover { background: var(--cps-blue); }

/* ================= Карточки ================= */
.cps-card { background: #fff; border-radius: var(--cps-r-lg); box-shadow: var(--cps-shadow-card); padding: 24px; }
.cps-box { background: var(--cps-surface); border: 1px solid var(--cps-line-blue); border-radius: var(--cps-r-sm); padding: 16px 18px; }
.cps-soft { background: var(--cps-soft); border-radius: 16px; padding: 14px 18px; }

/* Плашка раздела: белая таблетка с тонкой рамкой, как «Все / Умные очки / Гаджеты» на /catalog */
.cps-tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  min-height: 120px; padding: 20px 22px; border-radius: var(--cps-r-md);
  background: var(--cps-tile); color: var(--cps-ink-2); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--cps-line);
  font-size: 18px; font-weight: 600; line-height: 1.35;
}
.cps-tile.is-active { background: var(--cps-blue); color: #fff; box-shadow: none; }

/* Карточка товара: белая квадратная картинка со скруглением 20px на лавандовом фоне, название 700, цена 700 */
.cps-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px 16px; }
.cps-product { position: relative; display: flex; flex-direction: column; gap: 6px; border-radius: var(--cps-r-xs); transition: box-shadow .2s; }
.cps-product:hover .cps-product__img { box-shadow: var(--cps-shadow-hover); }
.cps-product__img { aspect-ratio: 1 / 1; width: 100%; object-fit: contain; background: #fff; border-radius: var(--cps-r-md); transition: box-shadow .2s; }
/* Метка «ХИТ» / «-30%»: розовый градиент как на сайте, но текст ТЁМНЫЙ (на сайте белый — 1,4:1, не читается) */
.cps-product__mark {
  position: absolute; top: 10px; left: 10px; height: auto; padding: 4px 10px; border-radius: 20px;
  background: var(--cl-grad-pink); color: var(--cps-ink-2); font-size: 14px; font-weight: 600; line-height: 1.2;
}
.cps-product__title { margin: 6px 0 0; font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--cps-ink); }
.cps-product__sku { font-size: 13px; color: var(--cps-muted); }
.cps-product__price { font-size: 17px; font-weight: 700; color: var(--cps-ink); }
.cps-product__stock { font-size: 13px; color: var(--cps-muted); }
.cps-product .cps-btn { align-self: flex-start; min-height: 48px; padding: 0 26px; font-size: 15px; margin-top: auto; }
.cps-product__price, .cps-product > div:has(.cps-product__price) { margin-bottom: 8px; }

/* Строка корзины / истории */
.cps-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--cps-line); }
.cps-row:last-child { border-bottom: 0; }
.cps-row__img { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: #fff; flex: none; box-shadow: inset 0 0 0 1px var(--cps-line); }
.cps-row__main { flex: 1; min-width: 0; }
.cps-row__title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.cps-row__sub { font-size: 14px; color: var(--cps-muted); }
.cps-row__sum { font-size: 17px; font-weight: 700; white-space: nowrap; }

/* Нижняя закреплённая панель «Итого + кнопка» */
.cps-bottombar {
  position: sticky; bottom: 0; z-index: 40; background: #fff;
  border-radius: var(--cps-r-lg) var(--cps-r-lg) 0 0; box-shadow: 0 -10px 30px -10px rgba(29, 27, 34, .18);
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
}
.cps-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.cps-total__label { font-size: 16px; color: var(--cps-muted); }
.cps-total__sum { font-size: 28px; font-weight: 800; color: var(--cps-ink); }

/* ================= Плашки и статусы ================= */
.cps-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--cps-r-pill); font-size: 13px; font-weight: 600; background: #fff; color: var(--cps-ink); }
.cps-chip--blue { background: var(--cps-blue); color: #fff; }
.cps-chip--soft { background: var(--cps-info-bg); color: var(--cps-blue-ink); }   /* как «Шоурум в Москве» */
.cps-chip--success { background: var(--cps-success-bg); color: var(--cps-success); }
.cps-chip--error { background: var(--cps-error-bg); color: #c81e24; }
.cps-chip--wait { background: var(--cps-warning-bg); color: var(--cps-warning); }

.cps-alert { padding: 14px 18px; border-radius: 16px; font-size: 16px; line-height: 1.4; }
.cps-alert--info { background: var(--cps-info-bg); color: var(--cps-blue-ink); }
.cps-alert--success { background: var(--cps-success-bg); color: var(--cps-success); }
.cps-alert--error { background: var(--cps-error-bg); color: #c81e24; }
.cps-alert--warning { background: var(--cps-warning-bg); color: var(--cps-warning); }

/* ================= Экран QR ================= */
.cps-qr { text-align: center; padding: 28px 24px; }
.cps-qr__sum { font-size: 40px; font-weight: 800; line-height: 1.1; margin: 0 0 4px; letter-spacing: -.01em; }
.cps-qr__hint { font-size: 18px; color: var(--cps-muted); margin: 0 0 20px; }
.cps-qr__code { width: min(78vw, 340px); aspect-ratio: 1; margin: 0 auto; padding: 14px; background: #fff; border-radius: 24px; box-shadow: inset 0 0 0 2px var(--cps-line); }
.cps-qr__code img, .cps-qr__code svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.cps-qr__timer { margin-top: 16px; font-size: 16px; color: var(--cps-muted); }

.cps-done { text-align: center; padding: 36px 24px; }
.cps-done__icon { width: 112px; height: 112px; margin: 0 auto 18px; border-radius: 50%; background: var(--cps-success-bg); color: var(--cps-success); display: flex; align-items: center; justify-content: center; }
/* «Оплачено»: Manrope 800, обычный регистр (в исходной кассе был акцидентный шрифт строчными) */
.cps-done__title { font-family: var(--cps-font-display); font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--cps-success); margin: 0 0 10px; text-transform: none; }

/* ================= Подвал: тёмный, как на capslocks.ru ================= */
.cps-footer { margin-top: 48px; background: var(--cl-dark); color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 22px; }
.cps-footer__in { max-width: var(--cps-container); margin: 0 auto; padding: 28px 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.cps-footer a { color: #fff; }

/* ================= Раскладка ================= */
.cps-container { max-width: var(--cps-container); margin: 0 auto; padding: 20px; }
.cps-stack > * + * { margin-top: var(--cps-gap); }
@media (min-width: 768px) {
  body { font-size: 18px; }
  .cps-h1 { font-size: 40px; }
  .cps-products { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px 20px; }
  .cps-header__logo { height: 34px; }
}