/**
 * Правки поверх зібраного style.css макета.
 *
 * Окремим файлом, а не всередині style.css: той файл — збірка їхнього
 * build (180 КБ у 15 рядків), і наступний експорт від дизайнера затер би
 * будь-яку правку в ньому. Тут тільки те, чого макет не передбачив, бо в
 * ньому було меньше даних, ніж у справжньому магазині.
 */

/* Панель каталога.
   У макеті в кожному розділі по дві підкатегорії, тому колонкам не задана
   ширина: flex-контейнер розкладав їх сам. У справжньому каталозі розділ
   «Техніка для волосся» має шість підкатегорій — без мінімальної ширини
   вони стискалися до кількох символів і текст наїжджав один на одний.
   Замінюємо розкладку на сітку: вона сама вважає, скільки колонок влізе, і
   тримає дві в ряд — як у макеті — на всіх ширинах, де меню видно. З
   фіксованою flex-основою так не виходило: на 1440 дві колонки вже не
   вміщалися й список ставав одним високим стовпчиком. */
.catalog-menu__columns {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* Довгі назви товарів у списку меню: у макеті вони короткі й вміщаються в
   один рядок висотою 44px, у нас бувають довші. Дозволяємо два рядки —
   як макет робить із назвами в мінікарточках — і обрізаємо все, що довше:
   інакше одна назва витягувала б колонку на пів екрана. */
.catalog-menu__list {
	gap: 12px;
}

.catalog-menu__list a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	height: auto;
	line-height: 20px;
}

/* Телефон у підвалі. У макеті це «0 800 33 00 77» — коротший за наш
   «+380 44 000 00 00», і той переносився на два рядки посеред номера.
   Номер завжди читається як одне ціле, тому переносу забороняємо. */
.footer__phone {
	white-space: nowrap;
}

/* Панель каталога на вузьких десктопах.
   Дизайн віддає підкатегоріям те, що лишилося після коренів (240px),
   товарів розділу (423px) і промо-плитки (200px). На 1600 це 441px і дві
   колонки, але на 1440 вже 297px, а на 1100 — 37px: колонки стискаються в
   нечитабельні смужки. У макеті цього не видно, бо там у розділі дві
   короткі назви, але розкладка від ширини не залежить — проблема не в
   наших даних.

   Повертаємо місце головному, списку підкатегорій. Спершу прибираємо пару
   товарів розділу: у макеті це декорація, а коштує 463px. Якщо й цього
   мало — знімаємо промо-плитку. Нижче 992px меню ховається зовсім, там
   працює мобільне. */
@media (max-width: 1599.98px) {
	.catalog-menu__panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.catalog-menu__products {
		display: none;
	}
}

@media (max-width: 1199.98px) {
	.catalog-menu__inner {
		grid-template-columns: 240px minmax(0, 1fr);
	}

	.catalog-promo {
		display: none;
	}
}