/*
 * Главная страница (templates/main.php) — 15.09.2026, по разбору UX, UI и аудита.
 * Баннер; ленты и плитки — css/tiles.css.
 */
.gsm-home { box-sizing: border-box; padding-top: var(--gsm-s-3, 12px); color: var(--gsm-ink, #23282d); font-family: var(--gsm-font, 'Open Sans', Tahoma, Verdana, Arial, sans-serif); text-align: left; }
.gsm-home *, .gsm-home *::before, .gsm-home *::after { box-sizing: border-box; }
/* Заголовок только для поисковиков и экранных дикторов; блок преимуществ убран по решению 15.09.2026 */
.gsm-home__h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Баннер: общий радиус карточек, отступ до лент */
.gsm-home .parent_banners { margin: 0 0 var(--gsm-s-8, 32px); }
.gsm-home .new_banners > div > div > div { border-radius: var(--gsm-r-lg, 16px); }

@media (max-width: 560px) {
	.gsm-home { padding: var(--gsm-s-3, 12px) var(--gsm-s-3, 12px) 0; }
	.gsm-home .parent_banners { margin-bottom: var(--gsm-s-6, 24px); }
}

/* ── Разделы каталога плитками под баннером (23.09.2026, modules/home_catalog.php) ──
   Как в мобильной версии: название слева сверху, картинка справа снизу с полями, ровная сетка. */
.gsm-hcats { margin: 0 0 var(--gsm-s-8, 32px); }
.gsm-hcats__head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 var(--gsm-s-3, 12px); }
.gsm-hcats__title { margin: 0; font-size: var(--gsm-fs-xl, 22px); font-weight: 700; line-height: 1.25; color: var(--gsm-ink, #23282d); }
.gsm-hcats__all, .gsm-hcats__all:visited { color: var(--gsm-link, #2876a5); font-size: var(--gsm-fs-base, 14px); font-weight: 600; text-decoration: none; }
.gsm-hcats__all:hover { color: var(--gsm-link-hover, #1f5f86); }
.gsm-hcats__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gsm-s-3, 12px); }
.gsm-hcat, .gsm-hcat:visited { position: relative; display: block; aspect-ratio: 1 / 1; padding: var(--gsm-s-3, 12px); overflow: hidden;
	border-radius: var(--gsm-r-lg, 16px); background: var(--gsm-card, #fff); box-shadow: 0 1px 3px rgba(20, 28, 38, .08);
	color: var(--gsm-ink, #23282d); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.gsm-hcat:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20, 28, 38, .12); color: var(--gsm-ink, #23282d); }
.gsm-hcat__name { position: relative; z-index: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	font-size: var(--gsm-fs-base, 14px); font-weight: 600; line-height: 1.3; }
.gsm-hcat__img { position: absolute; right: var(--gsm-s-3, 12px); bottom: var(--gsm-s-3, 12px); width: 66%; height: 58%; object-fit: contain; object-position: right bottom; }
.gsm-hcat__ico { position: absolute; right: var(--gsm-s-4, 16px); bottom: var(--gsm-s-4, 16px); width: 44px; height: 44px; fill: none; stroke: var(--gsm-btn, #0f89c6); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gsm-hcat--all, .gsm-hcat--all:visited { background: linear-gradient(145deg, #0f89c6 0%, #1d5f86 38%, #2b3440 72%, #23282d 100%); color: #fff; box-shadow: 0 4px 12px rgba(35, 40, 45, .28); }
.gsm-hcat--all:hover { color: #fff; }
.gsm-hcat--all .gsm-hcat__ico { stroke: #fff; }
@media (max-width: 1100px) { .gsm-hcats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .gsm-hcats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gsm-s-2, 8px); } }
@media (prefers-reduced-motion: reduce) { .gsm-hcat { transition: none; } .gsm-hcat:hover { transform: none; } }

/* Слайдер главной (25.09.2026): мастер-баннер выводится как есть — рамка всегда 1035:200
   на любой ширине (раньше на узких экранах рамка была 41% и 60% и картинку сильно резало),
   картинка вписывается целиком, без растяжения. */
.gsm-home .new_banners_wrap_wrap { padding-top: 19.324% !important; }
.gsm-home .desktop-banner-image, .gsm-home .tablet-banner-image, .gsm-home .mobile-banner-image {
	display: none !important; }
.gsm-home .desktop-banner-image {
	display: block !important; position: absolute; inset: 0; width: 100%; height: 100%;
	background-size: contain !important; background-repeat: no-repeat; background-position: 50% 50%; }