/* Корзина: то, чего не было в перенесённых бандлах.

   Отдельный лист, потому что `pages.css` и `catalog.css` собраны прежним конвейером из
   `design/` в старом проекте (см. долг в START-HERE.md). Пока источник не сведён, править их
   руками — значит потерять правку при следующей сборке дизайна. */

/* 1. Кнопка корзины в шапке. Счётчик появляется только когда в корзине что-то есть: пустой
      «0» на кнопке читается как поломка. */
.act-cart {
  position: relative;
}

.cartnum {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
}

/* В выпадающем меню счётчик стоит в строке, а не углом кнопки. */
.cartnum-row {
  position: static;
  display: inline-block;
  margin-left: 10px;
  vertical-align: 1px;
}

/* Шапка лендинга лежит на фотографии: там кнопки нет, есть ссылка в общем ряду. */
.links .cart-link {
  position: relative;
}

.links .cart-link .cartnum {
  top: -8px;
  right: -20px;
}

/* 2. Пустая корзина. Тупик без выхода — главная причина, по которой корзину закрывают. */
.cart-empty {
  padding: clamp(34px, 6vw, 64px) 0;
  text-align: center;
}

.cart-empty h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 600;
  margin-bottom: 12px;
}

.cart-empty p {
  color: var(--ink-mute);
  margin-bottom: 26px;
}

/* 3. Строка товара: ссылка на модель и подпись про допы «по запросу». */
.crow h3 a {
  color: inherit;
}

.crow h3 a:hover {
  color: var(--accent-ink);
}

.cnote {
  margin-top: 10px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.76rem;
  color: var(--ink-mute);
}

.csum.csum-ask {
  font-size: 0.95rem;
  color: var(--ink-mute);
}

/* 4. Поля с ошибкой. Красная рамка без текста ничего не объясняет — текст идёт под полем. */
.inp.bad {
  border-color: #c0392b;
  background: var(--surface);
}

.fielderr {
  grid-column: 1 / -1;
  margin-top: -4px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  color: #c0392b;
}

.agree.bad span {
  color: #c0392b;
}

/* 5. Кнопка отправки в работе: без этого второй клик шлёт вторую заявку. */
.btn[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* 6. Полоса состояния стенда. Не украшение: пока приёмника заявок нет, человек должен
      видеть, что заказ не улетел сам собой. */
.mockbar.is-live {
  color: var(--ink-mute);
}

/* 7. `hidden` против классов раскладки.

   Проверено в браузере: пустая корзина показывала и заглушку «В корзине пусто», и сетку с
   формой разом. Причина не в скрипте — атрибут был проставлен. У `.bgrid` стоит
   `display: grid`, и правило класса сильнее правила
   `[hidden] { display: none }` из таблицы браузера. Атрибут применялся и ничего не делал. */
[data-cart-grid][hidden],
[data-cart-empty][hidden],
[data-cart-note][hidden],
.cartnum[hidden] {
  display: none !important;
}

/* 8. Подпись про допы и сумма строки не должны наезжать друг на друга.

   Сумма в строке позиционирована абсолютно у правого нижнего угла — так её поставил
   перенесённый бандл. Пока под количеством ничего не было, это работало; подпись «Допы
   считает менеджер» упирается прямо в цену. Снимок это и показал. Ниже 520 px сумма
   становится обычной строкой (правило из `pages.css`), и отступ там уже не нужен. */
@media (min-width: 521px) {
  .crow .cnote {
    padding-right: 150px;
  }
}

/* 9. Узкий экран: сумма строки становится обычной строкой, а не висит поверх текста.

   В `pages.css` это уже написано — и не работает. Медиазапрос с `.csum { position: static }`
   стоит в файле ВЫШЕ обычного правила `.csum { position: absolute }`, а специфичность у них
   одинаковая: побеждает то, что ниже, независимо от ширины экрана. Медиазапрос в этом наборе
   не значит ничего. Снимок на 390 px: цена «160 000 ₽» лежала поверх подписи про допы.

   Здесь то же правило повторено в листе, который подключается последним, — и потому
   действует. Заодно возвращён уменьшенный кадр: он не влезал в строку по той же причине. */
@media (max-width: 520px) {
  /* Третья колонка строки существует ради цены, висящей в углу. Как только цена встаёт в
     поток, колонка сжимает название и саму цену в две строки — сетку надо сузить вместе с
     ней. Медиазапрос из `pages.css` это и делал, и был перебит тем же порядком правил. */
  .crow {
    grid-template-columns: auto 1fr;
  }

  .crow .csum {
    position: static;
    grid-column: 1 / -1;
    margin-top: 14px;
  }

  .crow .cnote {
    padding-right: 0;
  }

  .crow .cthumb {
    width: 92px;
    height: 92px;
  }
}

/* Телефон в блоке «без JavaScript»: единственный рабочий путь заказа на такой странице,
   поэтому он крупнее текста вокруг, а не ссылкой в общем потоке. */
.cart-nojs-phone {
  margin: 4px 0 18px;
}

.cart-nojs-phone a {
  font-family: 'Manrope', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
}

/* Резерв высоты под содержимое корзины, пока его не отрисовал скрипт.

   Замерено на 390 px при 4G и процессоре вчетверо медленнее: CLS страницы корзины с товаром
   был **0.843** при пороге 0.1, с пустой — 0.258. Виновник в обоих случаях один: подвал.
   Оба блока содержимого отдаются скрытыми, подвал при первой отрисовке стоит сразу под
   крошками, а через секунду улетает вниз на высоту экрана. Прошлый аудит мерил только пустую
   корзину и потому недооценил поломку втрое.

   Резервируем высоту экрана: подвал при первой отрисовке оказывается ЗА пределами видимой
   области, и его последующее движение в CLS не попадает — сдвигом считается перемещение
   того, что человек уже видит.

   Резерв НЕ снимается после отрисовки, хотя первая редакция снимала. Замер показал, почему:
   у пустой корзины содержимое ниже экрана, и снятие резерва подтягивало подвал вверх — это
   ровно такой же сдвиг, и CLS пустой страницы вырос с 0.258 до 0.356. Оставленный резерв
   стоит пустой полосы под сообщением «в корзине пусто» и не стоит ничего, когда товар есть:
   содержимое всё равно выше экрана.

   `min-height` на самом `main`, а не на внутреннем блоке: подвал идёт следом за ним. */
.cart-reserve {
  min-height: 100vh;
}

/* Пустая корзина занимает зарезервированную высоту осмысленно, а не пустой полосой.

   `:not([hidden])` обязательно: правило задаёт `display`, а такой класс перебивает
   `[hidden] { display: none }` из браузерного листа — блок стал бы виден всегда, включая
   корзину с товаром. В этом проекте на такой грабле уже теряли время. */
.cart-reserve .cart-empty:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 68vh;
  text-align: center;
}