/* home — главная (DESIGN.md, «Страницы → Главная»). Только раскладка: кнопки, чипы, карточки, .specs — из main.css.
   Mobile-first, точки 641 / 901 / 1101. */

/* ================================================================
   Вводный блок: h1 из фактов, строка фактов, одно главное действие
   ================================================================ */
.hintro { display: grid; gap: var(--sp-4); padding-block: var(--sp-2) var(--sp-5); }
.hintro__title { max-width: 20ch; } /* размер — из .h1 (--t-3xl): h1 старше заголовков разделов; 20ch — две строки на телефоне */
.hintro__side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.hintro__all { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--sp-2); font-size: var(--t-sm); }
@media (min-width: 901px) {
	.hintro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--sp-6); padding-block: var(--sp-4) var(--sp-6); }
}

/* ================================================================
   Категории: глушники крупно с калибрами внутри, остальные плитками
   ================================================================ */
.hcats { display: grid; gap: var(--sp-6); }
.hcats ul { margin: 0; padding: 0; list-style: none; }

.hsup { display: grid; gap: var(--sp-4); }
.hsup__img { display: block; aspect-ratio: 2 / 1; overflow: hidden; }
.hsup__img img { width: 100%; height: 100%; object-fit: contain; }
.hsup__body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hsup__name { font-size: var(--t-xl); line-height: var(--lh-xl); } /* на телефоне мельче h1: заголовок страницы и категории не спорят */
.hsup__hint { margin: var(--sp-4) 0 var(--sp-2); color: var(--muted); font-size: var(--t-sm); }
/* калибры — указатель в языке .specs: название слева, число справа */
.hsup__cals { align-self: stretch; border-top: 1px solid var(--line); }
.hsup__cals a { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); min-height: 44px; border-bottom: 1px solid var(--line); color: var(--fg); font-size: var(--t-sm); line-height: var(--lh-sm); }
.hsup__n { color: var(--dim); font-size: var(--t-xs); }
@media (min-width: 901px) {
	/* фото тянется на высоту списка: absolute, чтобы своей высотой не раздувало ряд */
	.hsup { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-6); }
	.hsup__img { position: relative; aspect-ratio: auto; min-height: calc(3 * var(--sp-9)); }
	/* к верхнему краю: срез рендера совпадает с краем подложки, а не висит линией внутри неё */
	.hsup__img img { position: absolute; inset: 0; object-position: 50% 0; }
	.hsup__body { padding-top: var(--sp-2); }
	.hsup__name { font-size: var(--t-2xl); line-height: var(--lh-2xl); }
	.hsup__hint { margin-top: var(--sp-5); }
	.hsup__cals a { min-height: 40px; }
}

.hcat__count { display: block; margin-top: var(--sp-1); color: var(--muted); font-size: var(--t-xs); line-height: var(--lh-xs); }
/* колонки одной ширины; неполный последний ряд — нормально для каталога, растянутая плитка — нет */
.hcats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-3); }
.hcat { display: block; min-width: 0; color: var(--fg); }
/* подложка 2:1, как сами снимки категорий; колонки равные — высота одна на ряд */
.hcat__img { display: block; aspect-ratio: 2 / 1; margin-bottom: var(--sp-3); overflow: hidden; }
.hcat__img img { width: 100%; height: 100%; padding: var(--sp-1); object-fit: contain; }
.hcat__name { display: block; font-size: var(--t-md); font-weight: 600; font-stretch: var(--narrow); line-height: var(--lh-md); text-wrap: balance; } /* «Тюнінг KelTec / SUB-2000», а не разрыв на дефисе */
@media (min-width: 641px) {
	.hcats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); }
}
@media (min-width: 1101px) {
	.hcats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ================================================================
   Флагман: фото на подложке, реальные характеристики, цена
   ================================================================ */
.hflag { display: grid; gap: var(--sp-5); }
.hflag__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.hflag__img img { width: 100%; height: 100%; padding: var(--sp-5); object-fit: contain; }
.hflag__body { display: flex; flex-direction: column; min-width: 0; }
.hflag__kind { font-size: var(--t-sm); }
.hflag__kind a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg-2); } /* отдельная ссылка — тач 44px; высота заменяет отступ до h2 */
.hflag__specs { margin-top: var(--sp-5); }
.hflag__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-5); }
.hflag__price { font-size: var(--t-xl); line-height: var(--lh-xl); }
.hflag__buy .avail { margin-top: var(--sp-1); }
/* после AJAX WooCommerce дописывает «Переглянути кошик» третьим flex-элементом — кнопка уезжала из-под курсора.
   Своей строкой под кнопкой; вид ссылки — .added_to_cart из main.css */
.hflag__buy .added_to_cart { display: flex; flex-basis: 100%; justify-content: flex-end; margin-top: calc(-1 * var(--sp-3)); }
@media (max-width: 640px) {
	.hflag__buy .btn, .hflag__buy .button { width: 100%; }
	.hflag__buy .added_to_cart { justify-content: center; }
}
/* две колонки уже с планшета: стопкой товар занимал больше экрана */
@media (min-width: 641px) {
	.hflag { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: center; }
}
/* с 901px — та же ось 7fr/5fr, что у вводного блока, глушников и услуг: правая колонка начинается в одном месте */
@media (min-width: 901px) {
	.hflag { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.hflag__img { aspect-ratio: 3 / 2; }
}

/* Рекомендации: на 3 колонках — два полных ряда, без одинокой карточки */
@media (min-width: 641px) and (max-width: 1100px) {
	.hrec__list > :nth-child(n+7) { display: none; }
}

/* ================================================================
   Послуги: одна большая на поверхности, две — текстом справа
   ================================================================ */
.hsrv { display: grid; gap: var(--sp-6); }
.hsrv__main { display: flex; flex-direction: column; align-items: flex-start; padding: var(--sp-5); background: var(--s1); border-radius: var(--r); }
.hsrv__text { max-width: 56ch; margin-top: var(--sp-2); color: var(--fg-2); font-size: var(--t-sm); line-height: var(--lh-sm); }
.hsrv__main .hsrv__text { margin-top: var(--sp-3); font-size: var(--t-md); line-height: var(--lh-md); }
.hsrv__price { align-self: stretch; margin-block: var(--sp-5); }
.hsrv__price > div { grid-template-columns: minmax(0, 1fr) auto; } /* цена справа: подпись в узкой колонке ломалась на три строки */
.hsrv__price dd { font-weight: 600; text-align: right; white-space: nowrap; }
.hsrv__art, .hsrv__opt { display: flex; flex-direction: column; align-items: flex-start; padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.hsrv__art .link, .hsrv__opt .link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--sp-2); font-size: var(--t-sm); }
@media (max-width: 640px) {
	.hsrv__main .btn { width: 100%; }
}
@media (min-width: 901px) {
	.hsrv { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; gap: var(--sp-6); }
	.hsrv__main { grid-row: span 2; padding: var(--sp-6); }
}

/* ================================================================
   Статьи: три закреплённых владельцем. На телефоне — лентой, чтобы не растягивать страницу на три экрана
   ================================================================ */
.hblog__list {
	display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: var(--sp-4);
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
	margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
}
.hblog__list > * { scroll-snap-align: start; }
@media (min-width: 641px) {
	.hblog__list {
		grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5);
		overflow: visible; margin-inline: 0; padding-inline: 0;
	}
}

/* ================================================================
   Ховеры
   ================================================================ */
@media (hover: hover) {
	.hsup__name a:hover, .hcat:hover .hcat__name, .hflag h2 a:hover, .hflag__kind a:hover,
	.hsup__img:hover + .hsup__body .hsup__name a,
	.hflag__img:hover + .hflag__body h2 a { text-decoration-line: underline; }
	.hsup__cals a:hover .hsup__cal { text-decoration-line: underline; }
}