/* ----------------------------------------------------------------------
   Тест «Подберём кофе» — экран «сейчас нечего предложить».

   Зачем он нужен. Раньше, если под ответы не подходило ничего, тест молча
   отдавал две первые попавшиеся карточки: покупатель, ответивший
   «кофемашина», получал батч-брю и светлую обжарку. Теперь в таком случае
   тест честно говорит, что кофе под этот способ закончился, и ведёт в
   каталог. Блок рисуется внутри .qr-grid, на месте карточек подбора.

   Своих цветов и своей кнопки не заводим: текст — та же типографика, что у
   описания в карточке подбора (.qr-card p), кнопка — общая .pbtn-green со
   своей формой и колпачками. Здесь только раскладка.

   ВАЖНО: этот файл нужно подключить в header.php строкой рядом с
   quiz-fix.css (около строки 239) — десктопные стили перечислены там
   поимённо. Без неё .qr-none теряет grid-column:1 / -1 и блок встаёт
   в одну ячейку .qr-grid, то есть в половину ширины на десктопе.

   Телефон и планшет-в-альбоме — отдельным файлом mobile/quiz-pick.css:
   мобильный слой sc2026 весь лежит там и подключается глобом, поэтому
   полная ширина продублирована и туда — телефон не зависит от header.php.
---------------------------------------------------------------------- */
.qr-none{
  /* Одна колонка на всю ширину сетки: карточек рядом нет. */
  grid-column:1 / -1;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:calc(18 * var(--u));
}

.qr-none p{
  margin:0;max-width:calc(560 * var(--u));
  font-family:var(--font-ui);font-weight:400;
  font-size:calc(15 * var(--u));line-height:1.45;color:#000;
}

/* Кнопка в блоке одна и стоит отдельной строкой — растягивать её по ширине
   сетки не нужно, она держит собственный размер из .pbtn-green. */
.qr-none .pbtn-green{align-self:flex-start}


/* ----------------------------------------------------------------------
   Карточки результата — те же, что в каталоге (16.09.2026).

   Заказчик: «на тесте сделай карточки похожие как на всём сайте, мало
   информации, и мне не нравится, как там выглядит зелёная обводка».
   Своей карточки .qr-card у теста больше нет: в #quizGrid home.js
   вставляет .pgrid-cell > .pcard, которые отдаёт сервер
   (ajax/quiz_cards.php) — тем же product-card.php, что рисует «Хиты
   продаж» этажом выше и список каталога. Правила .qr-card в site.css и
   цель '.qr-card' в wavy.js остались без элементов и ничего не делают.

   Карточке здесь ничего не задаём: размеры она считает от ширины своей
   ячейки (.pgrid-cell — контейнер, «пиксель карточки» --cp в site.css),
   живую обводку ей рисует wavy.js по классу .pcard, появление даёт
   filter.js (.rv → .in) по событию sc:catalog-updated. Здесь только
   СЕТКА: ячейка должна быть той же ширины, что у «Хитов продаж», иначе
   карточки в тесте выйдут крупнее соседних на той же странице.

   Специфичность (0,2,0) — выше .qr-grid (0,1,0) из site.css:685-686 и
   mobile/tablet.css:693, порядок подключения не важен. Телефон и
   телефон набок — в mobile/quiz-pick.css.
   ---------------------------------------------------------------------- */

/* ≥1040: у .pgrid четыре колонки на контейнер .mac минус три промежутка по
   20 (site.css:581-582). cqw здесь — ширина того же .mac: контейнером
   объявлен .quizsec > .mac (site.css:3841), а не колонка теста, поэтому
   ячейка выходит ровно такой, как у «Хитов». Двух ячеек (2 × 325 + 20 на
   1440) в колонке результата 900 хватает с запасом; лишнее место остаётся
   справа, а не растягивает карточки. */
@media (min-width:1040px){
  .qresult .qr-grid{
    grid-template-columns:repeat(2, calc((100cqw - 60px) / 4));
    gap:20px;justify-content:start;
  }
}

/* 768–1039: у .pgrid две колонки на всю ширину (site.css:583), тест в этом
   диапазоне тоже в одну колонку (site.css:3903) — ширина ячейки та же.
   Телефон набок (≤1023 и высота ≤520) сюда тоже попадает, но его правило
   в mobile/quiz-pick.css подключено позже и при равном весе побеждает. */
@media (min-width:768px) and (max-width:1039px){
  .qresult .qr-grid{grid-template-columns:repeat(2, minmax(0,1fr));gap:20px}
}

/* Пока карточки едут с сервера (обычно доли секунды), держим место, чтобы
   кнопка «Пройти тест заново» не подпрыгивала под плашку и обратно. */
.qr-grid.is-loading{min-height:120px}