/* ==========================================================================
   COMPONENTS — библиотека переиспользуемых BEM-блоков.
   Слой 2 из трёх: tokens.css → components.css → style.css
   (см. docs/PRD-design-system.md, §4 «Архитектура» и §6 «Инвентарь компонентов»).

   Правила:
   - Сюда попадает блок, который используется более чем в одном месте
     либо является атомом по смыслу (кнопка, поле, карточка, чип) — §7 PRD.
   - Композиционные сетки конкретных секций остаются в style.css.
   - Значения — только через var(--…) из tokens.css (правило R1 PRD);
     legacy-литералы, приехавшие вместе с блоком, зачищаются отдельной
     задачей после T12 — здесь код перенесён без изменений.

   Порядок блоков внутри файла повторяет их прежний порядок в style.css,
   чтобы каскад не изменился.
   ========================================================================== */

/* ========== LAYOUT ========== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
}
.section { padding: var(--space-24) 0; }
.section--alt { background: var(--color-bg-alt); }

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-family: var(--font-family);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 100px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--ease-out-expo), color var(--ease-out-expo), border-color var(--ease-out-expo), opacity var(--ease-out-expo), box-shadow var(--ease-out-expo);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  box-shadow: 0 0 0 0 transparent;
}
.btn--primary {
  background: var(--color-bg-dark);
  color: var(--color-text-light);
  border-color: var(--color-bg-dark);
}
.btn--primary:hover { background: #2a2a2a; border-color: #2a2a2a; box-shadow: 0 0 0 4px rgba(10,10,10,0.14); }

.btn--outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}
.btn--outline:hover { background: var(--color-text); color: var(--color-text-light); box-shadow: 0 0 0 4px rgba(10,10,10,0.14); }

.btn--white {
  background: #ffffff;
  color: #0a0a0a;
  border-color: #ffffff;
}
.btn--white:hover { background: #e8e8e8; border-color: #e8e8e8; box-shadow: 0 0 0 4px rgba(255,255,255,0.18); }

.btn--lg {
  padding: 1.1rem 2rem 1.1rem 2.25rem;
  font-size: 1rem;
}
.btn__arrow { transition: transform var(--ease-out-expo); }
.btn--lg:hover .btn__arrow { transform: translateX(3px); }

.btn--submit {
  padding: 1.1rem 2rem 1.1rem 2.25rem;
  font-size: 1rem;
  align-self: flex-start;
  width: auto;
}

.btn--link {
  background: transparent;
  color: var(--color-text);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.btn--link:hover { opacity: 0.6; }

/* Submit */
.btn--submit:disabled { opacity: 0.4; cursor: not-allowed; }
.btn--submit:disabled:hover { background: var(--color-bg-dark); border-color: var(--color-bg-dark); }

/* ========== HEADER ========== */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-height);
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease-base), box-shadow var(--ease-base);
}
.header.scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: 0 1px 24px rgba(0,0,0,0.06);
}
.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.header__logo {
  margin-right: auto;
  display: flex;
  align-items: center;
  min-width: 0;
}
.header__logo-img {
  height: 28px;
  width: auto;
  max-width: 180px;
  display: block;
}
.header__nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.nav__link {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color var(--ease-base);
}
.nav__link:hover { color: var(--color-text); }

.header__cta { flex-shrink: 0; margin-left: var(--space-2); }

/* Пампаламповость toggle */
.pl-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.pl-switch {
  position: relative;
  width: 32px;
  height: 32px;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 5px;
  background: linear-gradient(155deg, #fdfdfd, #e3e3e3);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}
.pl-switch__screw {
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 35% 30%, #fff, #bcbcbc 65%, #8f8f8f);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.pl-switch__screw::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 3.5px; height: 0.5px;
  background: rgba(0,0,0,0.35);
  transform: translate(-50%, -50%) rotate(35deg);
}
.pl-switch__screw--left { left: 2.5px; }
.pl-switch__screw--right { right: 2.5px; }
.pl-switch__slot {
  position: absolute;
  top: 50%; left: 50%;
  width: 9px;
  height: 17px;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: #d3d3d3;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(0,0,0,0.08);
}
.pl-switch__paddle {
  position: absolute;
  left: 50%;
  top: 1px;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  transform: translateX(-50%);
  background: linear-gradient(155deg, #ffffff, #dcdcdc);
  box-shadow: 0 1px 2px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 1px rgba(0,0,0,0.08);
  transition: top var(--ease-out-expo);
}
.pl-switch[aria-checked="false"] .pl-switch__paddle { top: 9px; }
.pl-toggle__label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--ease-out-expo);
}
.pl-toggle__label:hover { color: var(--color-text); }
body.floaters-off .floater-wrap { display: none; }
@media (max-width: 900px) {
  .pl-toggle__label { display: none; }
}
@media (max-width: 768px) {
  .pl-toggle { display: none; }
}

.header__nav-close { display: none; }

.header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}
.header__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--ease-base), opacity var(--ease-base);
}
.header__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__burger.open span:nth-child(2) { opacity: 0; }
.header__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ========== FEATURE GRID ========== */
/* Ряд равных колонок, разделённых вертикальными линейками; на мобильном
   складывается в столбец и линейки становятся горизонтальными.
   Атом по смыслу (§7 PRD) — переехал из блока hero__feature (T14).
   Сетка-обёртка секции (растяжение, соседство с CTA) остаётся в style.css.
   Раскладку с точностью до декларации повторяет соседний .stat-list — почему
   это два блока, а не блок с модификатором, разобрано в его комментарии (T20). */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
}
.feature-grid__item {
  padding-left: 1.75rem;
  border-left: 1px solid var(--color-border);
}
.feature-grid__item:first-child {
  padding-left: 0;
  border-left: none;
}
.feature-grid__item h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.4rem;
}
.feature-grid__item p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
@media (max-width: 768px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid__item { padding-left: 0; border-left: none; padding-top: 1rem; border-top: 1px solid var(--color-border); }
  .feature-grid__item:first-child { padding-top: 0; border-top: none; }
}

/* ========== STAT LIST ========== */
/* Ряд фактов о компании: крупное значение и подпись под ним, колонки разделены
   линейками. Атом по смыслу (§7 PRD) — переехал из блока фактов press-страницы (T20).

   Почему это не .feature-grid, хотя раскладка совпадает буквально (те же три
   колонки с тем же gap, тот же padding-left + border-left и тот же сброс у
   первой колонки, то же мобильное правило) — решение T20:
   - у .feature-grid внутри «заголовок фичи 0.95rem/600 + пояснение 0.85rem»,
     здесь — «значение clamp(1.3–1.6rem)/700 + подпись 0.88rem»: модификатор
     переопределял бы 100% типографики блока и не переопределял ничего больше;
   - .feature-grid адресует внутренние узлы тегами h3/p (разметка hero), здесь
     узлы намеренно не заголовки, а strong/span: «5 лет» — не заголовок раздела,
     h3 испортил бы структуру документа. Схлопывание потребовало бы либо явных
     .feature-grid__title/__text вдобавок к тегам (два способа сказать одно и
     то же), либо переписывания разметки hero на index.html — вне T20;
   - и после схлопывания имя «ряд фич» врало бы на press-странице, а
     переименование блока снова тянет за собой index.html.
   Общего у блоков ровно три декларации раскладки и трёхстрочный @media —
   дешёвое и осознанное дублирование. Если появится третий такой блок, честным
   шагом будет вынести «ряд колонок с линейками» отдельным layout-атомом под
   обоими, а не подчинять один компонент другому. */
.stat-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
}
.stat-list__item {
  padding-left: 1.75rem;
  border-left: 1px solid var(--color-border);
}
.stat-list__item:first-child {
  padding-left: 0;
  border-left: none;
}
.stat-list__value {
  display: block;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
}
.stat-list__label {
  display: block;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
@media (max-width: 768px) {
  .stat-list { grid-template-columns: 1fr; gap: var(--space-8); }
  .stat-list__item { padding-left: 0; border-left: none; padding-top: 1rem; border-top: 1px solid var(--color-border); }
  .stat-list__item:first-child { padding-top: 0; border-top: none; }
}

/* ========== FEATURE LIST ========== */
/* Список тезисов со стрелкой-маркером вместо буллета. Атом по смыслу (§7 PRD):
   имя не привязано к месту, разметка — обычный <ul>. Переехал как есть из
   осиротевшего блока SECTION COMMON в style.css (T18), где оставался последним
   жильцом после переезда .section__label/__header/__title в T11.
   Единственное использование сегодня — .experience__left на index.html,
   откуда JS клонирует его в мобильную шапку секции. */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: var(--space-8);
}
.feature-list li {
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.feature-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

/* ========== SECTION COMMON ========== */
.section__label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.section__header {
  max-width: 600px;
  margin-bottom: var(--space-16);
}
.section__title { margin: var(--space-2) 0 var(--space-8); }

/* ========== CTA BAND ========== */
/* Полоса-призыв во всю ширину: фон, одна центрированная колонка контента.
   Схлопывание двух независимых копий одного паттерна: тёмный CTA внизу
   главной и блок «Контакт для прессы» на /press — T15 (§6 PRD).

   Контракт: .cta-band (+ вариант --dark) на <section>, внутри .container,
   внутри — одна обёртка .cta-band__inner. Содержимое обёртки произвольное:
   h2 + p + .btn на главной, .section__label + .cta-band__email +
   .cta-band__caption на /press.

   Базовая колонка — 720px с плотным шагом var(--space-4); страница вправе
   задать свою ширину и шаг контекстным правилом в style.css (так делает
   секция CTA DARK на главной). */
.cta-band {
  position: relative;
  overflow: hidden;
}
.cta-band .container { display: flex; justify-content: center; }
.cta-band__inner {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}

/* Тёмный вариант — сегодня единственный. Типографика внутри перекрывает
   глобальные правила h2/p и .section__label из светлого контекста. */
.cta-band--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-light);
}
.cta-band--dark h2 { color: var(--color-text-light); }
.cta-band--dark p  { color: rgba(255,255,255,0.55); }
.cta-band--dark .section__label { color: rgba(255,255,255,0.55); }

/* Опциональные элементы: крупная контактная ссылка и подпись под ней. */
.cta-band__email {
  display: block;
  width: 100%;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-light);
  word-break: break-word;
  transition: opacity var(--ease-out-expo);
}
.cta-band__email:hover { opacity: 0.75; }
.cta-band__caption { font-size: 0.95rem; }

/* ========== FOOTER ========== */
.footer {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: var(--space-24) 0 var(--space-8);
  overflow: hidden;
}
.footer .container { position: relative; z-index: 1; }
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-24);
  margin-bottom: var(--space-24);
}
.footer__logo {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-2);
}
.footer__tagline {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.footer__social { display: flex; gap: 0.75rem; }
.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: color var(--ease-out-expo), border-color var(--ease-out-expo), background var(--ease-out-expo);
}
.footer__social-link:hover {
  color: var(--color-text-light);
  background: var(--color-bg-dark);
  border-color: var(--color-bg-dark);
}
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer__copy { font-size: 0.85rem; color: var(--color-text-muted); }
.footer__legal { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.footer__legal a {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  transition: color var(--ease-base);
}
.footer__legal a:hover { color: var(--color-text); }

/* Footer requisites */
.footer__requisites {
  text-align: right;
}
.footer__requisites p {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ========== FORM ========== */
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form__field { display: flex; flex-direction: column; gap: 0.375rem; }
.form__field--full { grid-column: 1 / -1; }
.form__field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.form__field input {
  font-family: var(--font-family);
  font-size: 1.05rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  color: var(--color-text);
  transition: border-color var(--ease-out-expo), background var(--ease-out-expo), box-shadow var(--ease-out-expo);
  outline: none;
  width: 100%;
}
.form__field input::placeholder,
.form__field textarea::placeholder { color: #a3a3a3; }
.form__field input:focus,
.form__field textarea:focus {
  border-color: var(--color-text);
  background: var(--color-bg);
  box-shadow: 0 0 0 4px rgba(10,10,10,0.06);
}
.form__field textarea {
  font-family: var(--font-family);
  font-size: 1.05rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  color: var(--color-text);
  transition: border-color var(--ease-out-expo), background var(--ease-out-expo), box-shadow var(--ease-out-expo);
  outline: none;
  width: 100%;
  resize: vertical;
  min-height: 96px;
  line-height: 1.55;
}
.form__field-optional {
  font-weight: 400;
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* Custom checkbox */
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}
.form__check input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.form__check-box {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: 2px solid var(--color-text);
  border-radius: 6px;
  margin-top: 1px;
  transition: background var(--ease-out-expo), border-color var(--ease-out-expo), transform var(--ease-out-expo), box-shadow var(--ease-out-expo);
  display: flex; align-items: center; justify-content: center;
}
.form__check:hover .form__check-box {
  transform: scale(1.08);
  box-shadow: 0 0 0 5px rgba(10,10,10,0.06);
}
.form__check input:checked + .form__check-box {
  background: var(--color-text);
  border-color: var(--color-text);
}
.form__check input:checked + .form__check-box::after {
  content: '';
  display: block;
  width: 6px; height: 11px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg) translateY(-1px);
}
.form__check-text { font-size: 0.76rem; color: #9a9a9a; line-height: 1.5; }
.form__check-text a { color: #9a9a9a; text-decoration: none; }
.form__check-text a:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }
.form__check--sm .form__check-text { font-size: 0.74rem; }

/* Toggle switch */
.form__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--color-text);
}
.form__toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.form__toggle-track {
  position: relative;
  width: 36px; height: 20px;
  background: var(--color-border);
  border-radius: 100px;
  flex-shrink: 0;
  transition: background var(--ease-base);
}
.form__toggle input:checked ~ .form__toggle-track { background: var(--color-text); }
.form__toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--ease-base);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.form__toggle input:checked ~ .form__toggle-track .form__toggle-thumb { transform: translateX(16px); }
.form__toggle--sm .form__toggle-track { width: 32px; height: 18px; }
.form__toggle--sm .form__toggle-thumb { width: 14px; height: 14px; }
.form__toggle--sm input:checked ~ .form__toggle-track .form__toggle-thumb { transform: translateX(14px); }

/* ========== PRICING CALCULATOR ========== */
/* Калькулятор с ползунком: заголовок + info-тултип, ряд «инпут + range»,
   плашка результата и CTA. Атом по смыслу (§7 PRD) — переехал из секции
   PRICING CALCULATOR в style.css (T16). Единственный инстанс на сайте —
   #digitization-calc («Оцифровка вещей»); второй калькулятор («Подобрать
   тариф») заменён статичной секцией «Пакеты примерок» в T21.
   Секция-обёртка .pricing-calc-wrap своих правил не имеет — это только
   якорь разметки; фон и вертикальные отступы даёт .section--alt.
   Заливку трека range инлайново собирает updateRangeFill() в js/main.js
   из var(--color-text)/var(--color-border) — эти токены менять с оглядкой. */
.pricing-calc {
  background: var(--color-bg);
  border-radius: 48px;
  padding: var(--space-16);
}
.pricing-calc__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}
.pricing-calc__title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Info tooltip */
.pricing-calc__info { position: relative; flex-shrink: 0; }
.pricing-calc__info-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--color-text-muted);
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-family);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: border-color var(--ease-out-expo), color var(--ease-out-expo);
}
.pricing-calc__info-btn:hover,
.pricing-calc__info.is-open .pricing-calc__info-btn {
  border-color: var(--color-text);
  color: var(--color-text);
}
.pricing-calc__tooltip {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  width: min(300px, 80vw);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  padding: 0.9rem 1.1rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ease-out-expo);
}
.pricing-calc__info:hover .pricing-calc__tooltip,
.pricing-calc__info.is-open .pricing-calc__tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.pricing-calc__slider-label { display: block; margin-bottom: var(--space-4); }
.pricing-calc__slider-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: var(--space-16);
}
.pricing-calc__input {
  flex-shrink: 0;
  width: 7ch;
  font-family: var(--font-family);
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  padding: 0.85rem 0.5rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  color: var(--color-text);
  outline: none;
  transition: border-color var(--ease-out-expo), background var(--ease-out-expo), box-shadow var(--ease-out-expo);
}
.pricing-calc__input:focus {
  border-color: var(--color-text);
  background: var(--color-bg);
  box-shadow: 0 0 0 4px rgba(10,10,10,0.06);
}
.pricing-calc__range {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  min-width: 0;
  border-radius: 100px;
  background: var(--color-border);
  outline: none;
  cursor: pointer;
}
.pricing-calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--color-text);
  border: 4px solid var(--color-bg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: transform var(--ease-out-expo);
}
.pricing-calc__range::-webkit-slider-thumb:hover { transform: scale(1.1); }
.pricing-calc__range::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--color-text);
  border: 4px solid var(--color-bg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  cursor: pointer;
}
.pricing-calc__range::-moz-range-track {
  height: 6px;
  border-radius: 100px;
  background: var(--color-border);
}
.pricing-calc__result {
  padding: var(--space-8);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-16);
}
.pricing-calc__result-text { font-size: 1.15rem; }
.pricing-calc__result-text strong { font-weight: 700; }
.pricing-calc__result-price { font-size: 1.6rem; font-weight: 700; margin-top: 0.25rem; }

@media (max-width: 768px) {
  .pricing-calc { padding: var(--space-8); border-radius: 28px; }
  .pricing-calc__cta { width: 100%; justify-content: center; }

  .pricing-calc__slider-row { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .pricing-calc__input { width: 100%; }

  .pricing-calc__result { padding: calc(var(--space-8) / 2); }
  .pricing-calc__result-text { font-size: 0.9rem; }
  .pricing-calc__result-price { font-size: 1.25rem; }
}

/* ========== TARIFF MODAL ========== */
body.modal-open { overflow: hidden; }
.tariff-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}
.tariff-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.tariff-modal__dialog {
  position: relative;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  padding: var(--space-16);
  max-width: 560px;
  width: 100%;
  max-height: min(85vh, 720px);
  overflow-y: auto;
}
.tariff-modal__close {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg-alt);
  color: var(--color-text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--ease-out-expo);
}
.tariff-modal__close:hover { background: var(--color-border); }
.tariff-modal__summary {
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin-bottom: var(--space-8);
}
.tariff-modal__summary-text { font-size: 1.05rem; font-weight: 700; margin-top: 0.25rem; }
.tariff-modal__title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-8);
}

/* ========== CARD ========== */
/* Медиа-карточка: карусель товаров на index.html и блок «Другие товары»
   на товарных страницах. Переименована при переезде из блока product-related (§6 PRD). */
.card { display: block; }
.card__img {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-alt);
  margin-bottom: 0.75rem;
}
.card__img img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform var(--motion-base); }
.card:hover .card__img img { transform: scale(1.04); }
.card__name { font-size: 0.92rem; font-weight: 600; color: var(--color-text); }

/* Опциональный блок действия под изображением (T20): кнопка или ссылка внутри
   карточки. Базовая карточка его не содержит — оба существующих использования
   (.carousel__slide на index.html и «Другие товары» на товарных страницах)
   состоят из .card__img + .card__name, и добавление элемента их не касается:
   ни одно правило выше не переопределяется, новые селекторы без .card__action
   в разметке не срабатывают.
   Горизонтальные поля кнопки поджаты относительно базовой .btn: действие живёт
   внутри узкой карточки, где полные 1.75rem съедают ширину. */
.card__action { display: flex; justify-content: center; margin-top: var(--space-4); }
.card__action .btn { justify-content: center; padding: 0.875rem var(--space-4); }

/* Модификатор --panel: карточка на собственной подложке — залитый прямоугольник
   с внутренними полями и содержимым по центру (карточки скачивания логотипов
   на press.html). Ширину карточки задаёт композиция страницы, не компонент. */
.card--panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-8) var(--space-8) var(--space-4);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
}

/* Модификатор --shelf: медиа-бокс не квадратной рамкой, а полкой фиксированной
   высоты — изображение стоит в ней по центру в том размере, который задан ему
   самому. Полка не рамка: своей подложки, скругления и обрезки у неё нет (на
   панели подложка уже есть у самой карточки), картинку она не кадрирует
   (object-fit) и не зумит по hover — логотип не ссылка.
   Модификаторы --round/--line описывают отрисовку самого ассета и идут после
   полки: у них та же специфичность, побеждает порядок. */
.card__img--shelf {
  aspect-ratio: auto;
  height: 100px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  background: none;
  border-radius: 0;
  overflow: visible;
}
.card__img--shelf img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: fill; transition: none; }
.card:hover .card__img--shelf img { transform: none; }
.card__img--round img { width: 100px; height: 100px; border-radius: 50%; }
.card__img--line img { width: 100px; height: auto; }

/* ========== PRODUCT TILE ========== */
/* Мини-карточка вещи: квадратная миниатюра + роль («Верх» / «Низ») + название.
   Два независимых использования, оба в секции «Виртуальная примерка»
   (index.html): плитка поверх фото на десктопе (модификатор --row) и плитка
   в ряду под фото на мобильном (база). Переехала из .experience__product*
   (T18); компонент описывает только раскладку и типографику самой плитки —
   где она лежит и как выглядит подложка под ней, решает style.css.

   Почему это не .card, а соседний атом (решение T18):
   - у .card картинка обёрнута в .card__img (квадратная рамка --radius-md
     с отступом снизу), здесь <img> лежит в плитке напрямую;
   - у .card есть hover-зум картинки; у плитки hover-состояния нет вовсе —
     на десктопе она проезжает мимо курсора по скроллу;
   - у .card название полужирное (600), здесь — обычное (400) и мельче;
   - у плитки есть третий узел, которого у .card нет, — лейбл роли.
   Переиспользование .card потребовало бы переопределить в style.css каждое
   её свойство и отдельно погасить hover: компонент не дал бы ничего, кроме
   риска регресса. Расширять .card новыми элементами (как .card__action)
   тоже не за что — общей у них остаётся только идея «картинка + подпись».

   КОНТРАКТ С js/main.js (секция EXPERIENCE) — менять только вместе с ним:
   разметку плиток целиком генерирует JS (createElement + className),
   статического HTML для них не существует; порядок узлов внутри плитки
   (img → label → name) задан там же и важен для --row, где все три узла
   являются flex-элементами. */
.product-tile { display: block; }
.product-tile--row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.product-tile__img {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  object-fit: contain;
  /* На полтона темнее --color-bg-alt; литерал сохранён ради нулевого
     визуального регресса при переезде. */
  background: #f5f5f5;
  border-radius: var(--radius-sm);
  display: block;
}
.product-tile__label {
  display: block;
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
  margin-bottom: 0.3rem;
}
.product-tile__name {
  display: block;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--color-text);
}

/* ========== CAROUSEL ========== */
/* Рамка карусели: относительная обёртка .carousel, отсечка .carousel__clip,
   flex-лента .carousel__track со слайдами и ряд стрелок поверх картинок.
   Переехала из секции PRODUCTS SHOWCASE в style.css (T17). Имя нейтральное —
   компонент не завязан на товары; единственный инстанс сегодня — «Попробуйте
   нашу примерку» на index.html. Содержимое слайда компонент не описывает:
   внутри лежит .card, её растяжение на высоту слайда — page-specific доводка
   контекстным селектором в style.css.

   КОНТРАКТ С js/main.js (секция PRODUCTS CAROUSEL) — менять с оглядкой:
   - JS находит узлы по id (#products-track / #products-prev / #products-next),
     ни один класс отсюда для выборки не используется — переименование
     компонента JS не задевает;
   - прямые дети трека обязаны быть ровно слайдами, без посторонних обёрток:
     JS клонирует крайние CLONE_COUNT = 4 штук в начало и конец ленты
     и считает шаг по track.children[0];
   - шаг прокрутки = ширина слайда + gap, причём gap читается из computed
     style самого трека (columnGap || gap) — отступ между слайдами обязан
     задаваться на .carousel__track, а не на слайдах;
   - transform ленте JS проставляет инлайново, а transition на transform
     живёт здесь: переход через клон-зону выполняется по transitionend
     трека. Убрать переход = сломать зацикливание.

   Геометрия слайда (4 в ряд на desktop, 83.3% на мобильном) согласована
   с CLONE_COUNT = 4: клонов ровно столько, чтобы клон-зона всегда
   перекрывала видимую область на самом широком брейкпойнте. */
.carousel { position: relative; }
.carousel__clip { overflow: hidden; }
.carousel__track { display: flex; gap: var(--space-8); transition: transform 0.4s var(--ease-out-expo); }
.carousel__slide {
  flex: 0 0 calc((100% - 3 * var(--space-8)) / 4);
  display: flex;
  flex-direction: column;
}
/* Ряд стрелок — нулевой высоты и абсолютный, поверх ленты; padding-top
   повторяет ширину слайда, чтобы центр ряда совпал с центром квадратной
   картинки, а не с центром слайда вместе с подписью и кнопкой. */
.carousel__arrows {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  padding-top: calc((100% - 3 * var(--space-8)) / 4);
  pointer-events: none;
}
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: background var(--motion-base), color var(--motion-base);
}
.carousel__arrow:hover { background: var(--color-bg-dark); color: var(--color-text-light); }
.carousel__arrow--prev { left: -22px; }
.carousel__arrow--next { right: -22px; }

@media (max-width: 768px) {
  .carousel__slide { flex: 0 0 83.3%; }
  .carousel__arrows { padding-top: 83.3%; }
  .carousel__arrow--prev { left: 0.5rem; }
  .carousel__arrow--next { right: 0.5rem; }
}

/* ========== GALLERY ========== */
/* Галерея товара: крупное фото и ряд квадратных миниатюр под ним.
   Переехала из .product__gallery* (T19). Имя нейтральное — компонент
   описывает только саму галерею. То, что на товарной странице она прилипает
   к верху колонки (position: sticky) и распрямляется на мобильном, — свойство
   раскладки страницы, а не галереи: это правило осталось в style.css
   контекстным селектором .product__grid > .gallery.

   КОНТРАКТ С ИНЛАЙНОВЫМ СКРИПТОМ товарных страниц — менять только вместе
   с ним, и сразу во всех шести копиях (js/main.js на этих страницах
   не подключён, у каждой страницы свой одинаковый inline-<script>):
   - крупное фото и его обёртка ищутся по id (#product-main-img,
     #product-main-wrap), ряд миниатюр — по id (#product-thumbs);
   - сами миниатюры выбираются по классу .gallery__thumb — переименование
     блока без правки шести скриптов молча ломает и переключение фото,
     и lightbox;
   - порядок кнопок в DOM равен порядку кадров в lightbox: список картинок
     собирается как querySelectorAll('.gallery__thumb') → dataset.src,
     а стрелки листают его по индексу;
   - адрес крупного кадра берётся из data-src кнопки, а не из вложенной img,
     поэтому миниатюра и полноразмерный кадр могут быть разными файлами.
   Товар с единственным фото прячет ряд миниатюр атрибутом hidden на
   контейнере — компонент этого состояния не описывает. */
.gallery { display: block; }
.gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-alt);
  cursor: zoom-in;
  margin-bottom: var(--space-4);
}
.gallery__main img,
.gallery__main video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.gallery__thumbs { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.gallery__thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--color-border);
  background: var(--color-bg-alt);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--ease-out-expo);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__thumb.is-active { border-color: var(--color-text); }

/* ========== SPEC LIST ========== */
/* Таблица характеристик: пары «подпись — значение» в две колонки, отбитые
   сверху и снизу линейками. Переехала из .product__specs (T19).
   Внешнего отступа компонент не несёт — отбивку от следующего блока задаёт
   страница (.product__info .spec-list в style.css).
   Разметка пары — .spec-list__item со span (подпись) и strong (значение)
   внутри; собственных классов у них нет, стилизуются теги. */
.spec-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.spec-list__item { display: flex; flex-direction: column; gap: 0.2rem; }
.spec-list__item span { font-size: 0.76rem; color: var(--color-text-muted); }
.spec-list__item strong { font-size: 0.92rem; font-weight: 600; }

/* ========== CHIP ========== */
/* Переключаемый чип — атом выбора одного значения из ряда. Сегодня
   единственный инстанс — выбор размера на товарных страницах, откуда он
   и переехал (.product__size-chip → .chip, .product__size-list → .chip-group;
   T19). Состояние выбранного — .is-selected (тёмная заливка), его ставит
   скрипт страницы.

   Модификатора --radio у чипа намеренно нет: role="radio" и aria-checked —
   семантика разметки, визуального варианта за ней не стоит, а модификатор
   без собственных правил был бы пустым именем. Роль (radio, checkbox или
   просто кнопка-фильтр) выбирает страница, стили от неё не зависят.

   .chip-group — только ряд чипов (flex + перенос). Подпись над рядом
   в компонент не входит: на товарной странице это page-specific
   .product__sizes-label в style.css. */
.chip-group { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip {
  min-width: 46px;
  height: 46px;
  padding: 0 0.75rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--ease-out-expo), background var(--ease-out-expo), color var(--ease-out-expo);
}
.chip:hover { border-color: var(--color-text); }
.chip.is-selected { background: var(--color-text); border-color: var(--color-text); color: var(--color-text-light); }

/* ========== LIGHTBOX ========== */
/* Полноэкранный просмотр фото: затемнение на весь вьюпорт, кадр по центру,
   крестик и две стрелки поверх. Переехал из .product-lightbox* (T19).

   КОНТРАКТ С ИНЛАЙНОВЫМ СКРИПТОМ товарных страниц — менять вместе с ним:
   - все узлы ищутся по id (#product-lightbox, #lightbox-close,
     #lightbox-stage, #lightbox-img, #lightbox-prev, #lightbox-next),
     ни один класс отсюда для выборки не используется — переименование
     компонента скрипт не задевает;
   - закрытие по клику мимо кадра работает потому, что .lightbox — flex
     с центрированием: клик по подложке приходит на сам .lightbox
     (скрипт сверяет e.target === lightbox), а клик по картинке
     останавливает всплытие и вместо закрытия переключает зум;
   - скрытие — атрибутом hidden на .lightbox, а не классом; display: flex
     здесь задан безусловно и полагается на то, что UA-правило [hidden]
     помечено !important;
   - .is-zoomed на картинке (scale 1.6) снимается скриптом при каждом
     открытии и переключении кадра. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(10,10,10,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__stage { max-width: 90vw; max-height: 85vh; display: flex; align-items: center; justify-content: center; }
.lightbox__stage img { max-width: 90vw; max-height: 85vh; object-fit: contain; cursor: zoom-in; transition: transform 0.25s ease; }
.lightbox__stage img.is-zoomed { cursor: zoom-out; transform: scale(1.6); }
.lightbox__close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--ease-out-expo);
}
.lightbox__close:hover { background: rgba(255,255,255,0.2); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--ease-out-expo);
}
.lightbox__nav:hover { background: rgba(255,255,255,0.2); }
.lightbox__nav--prev { left: 1.5rem; }
.lightbox__nav--next { right: 1.5rem; }

@media (max-width: 768px) {
  .lightbox__nav { width: 40px; height: 40px; }
}

/* ========== COOKIE BANNER ========== */
.cookie-banner {
  position: fixed;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  width: min(calc(100vw - 2rem), 720px);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  padding: 1.25rem 1.5rem;
}
.cookie-banner__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cookie-banner__text { flex: 1; font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.55; min-width: 200px; }
.cookie-banner__text a { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__actions { display: flex; gap: 0.75rem; flex-shrink: 0; }
.cookie-btn { padding: 0.625rem 1.25rem; font-size: 0.85rem; }

/* Cookie settings panel */
.cookie-panel {
  position: fixed;
  bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  z-index: 201;
  width: min(calc(100vw - 2rem), 520px);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 40px rgba(0,0,0,0.15);
  padding: 1.5rem;
}
.cookie-panel__title { font-size: 1rem; font-weight: 700; margin-bottom: 1.25rem; }
.cookie-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 0;
  border-top: 1px solid var(--color-border);
}
.cookie-panel__row strong { font-size: 0.88rem; display: block; margin-bottom: 0.2rem; }
.cookie-panel__row p    { font-size: 0.8rem; color: var(--color-text-muted); margin: 0; }
.cookie-always { font-size: 0.78rem; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; }
.cookie-panel__footer { display: flex; gap: 0.75rem; justify-content: flex-end; padding-top: 1rem; border-top: 1px solid var(--color-border); margin-top: 0.5rem; }

/* ========== SCROLL TOP ========== */
.scroll-top { position: fixed; bottom: 2rem; left: 2rem; width: 42px; height: 42px; background: var(--color-bg-dark); color: var(--color-text-light); border: 1px solid var(--color-border); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 200; }
.scroll-top.visible { opacity: 1; transform: translateY(0); }
.scroll-top:hover { background: #1a1a1a; }

/* ========== DOC PAGE ========== */
/* Юридические страницы (oferta / privacy / terms / privacy-policy).
   До T11 блок был продублирован инлайновым <style> в каждой из четырёх. */
.doc-page { max-width: 740px; margin: 0 auto; padding: var(--space-24) var(--space-8) calc(var(--space-24) * 2); }
.doc-title { font-size: clamp(1.4rem, 4vw, 2rem); letter-spacing: -0.025em; font-weight: 700; margin-bottom: var(--space-8); }
.doc-body h2 { font-size: 1rem; font-weight: 700; letter-spacing: 0; margin: var(--space-16) 0 var(--space-2); color: var(--color-text); }
.doc-body h3 { font-size: 0.95rem; font-weight: 600; margin: var(--space-8) 0 var(--space-2); color: var(--color-text); }
.doc-body p { font-size: 0.92rem; line-height: 1.75; margin-bottom: 0.75rem; color: var(--color-text); }
.doc-body ul { margin: 0.25rem 0 0.75rem 1.5rem; padding: 0; }
.doc-body ul li { font-size: 0.92rem; line-height: 1.75; margin-bottom: 0.2rem; color: var(--color-text); }
.doc-download { display: block; margin-top: var(--space-24); padding-top: var(--space-8); border-top: 1px solid var(--color-border); font-size: 0.78rem; color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.doc-download:hover { color: var(--color-text); }