/* Головний банер головної (сніпет HomeSlide, замість Revolution Slider): один слайд - текст HTML + фото.
   ПК: текст і фото поруч у рядку; телефон: фото зверху, текст під ним. Висота задана сіткою і пропорціями фото -
   без стрибків макета. */
.hs {
	--hs-bg: #eceef1;
	--hs-ink: #1d2328;
	--hs-ink2: #4a5560;
	--hs-acc: #e8542a;
	position: relative;
	background: var(--hs-bg);
	color: var(--hs-ink);
	overflow: hidden;
	/* фон на всю ширину екрана, вміст - у контейнері сайту (вирівняний з меню каталогу); без 100vw - без прокрутки вбік */
	box-shadow: 0 0 0 100vmax var(--hs-bg);
	clip-path: inset(0 -100vmax);
}
.hs_dark { --hs-ink: #fff; --hs-ink2: #d6dde4; }
.hs_in {
	max-width: 1170px;
	margin: 0 auto;
	padding: 40px 15px;
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: center;
	gap: 40px;
	box-sizing: border-box;
	height: 440px;  /* однакова висота всіх слайдів: фото вписується в рамку, тексти - до ~150 знаків */
}
.hs_img_left .hs_pic { order: -1; }
.hs_text { max-width: 520px; }
.hs_img_left .hs_text { justify-self: end; }
.hs_title {
	margin: 0;
	font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 2.9vw, 44px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--hs-ink);
	text-wrap: balance;
}
.hs_title em { font-style: normal; color: var(--hs-acc); }
.hs_desc {
	margin: 16px 0 0;
	font-size: clamp(15px, 1.25vw, 19px);
	line-height: 1.5;
	color: var(--hs-ink2);
}
.hs_price { font-weight: 700; font-size: 1.15em; color: var(--hs-ink); white-space: nowrap; }
.hs_btn {
	display: inline-block;
	margin-top: 26px;
	padding: 14px 30px;
	border-radius: 6px;
	background: var(--hs-acc);
	color: #fff !important;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background-color .15s;
}
.hs_btn:hover, .hs_btn:focus-visible { background: #c9431d; }
/* увесь банер клікабельний (кнопка розтягнута на блок) */
.hs_btn::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.hs_pic { display: flex; align-items: center; justify-content: center; height: 100%; min-width: 0; }
.hs_pic img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 340px;
}

/* на головній ширше 768px меню каталогу (300px) відкрите поверх лівого краю банера: вміст - праворуч від нього,
   висота - не менша за меню, щоб воно не налазило на блок нижче */
@media (min-width: 769px) {
	.hs_in { max-width: none; padding: 40px 40px 40px 340px; }
}
@media (min-width: 769px) and (max-width: 1100px) {
	.hs_in { gap: 24px; padding: 28px 20px 28px 320px; height: 410px; }
	.hs_pic img { max-height: 300px; }
	.hs_btn { padding: 13px 22px; font-size: 16px; }
}
/* телефон і вузький планшет (меню закрите): фото зверху на всю ширину, текст під ним */
@media (max-width: 768px) {
	.hs_in {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		padding: 20px 16px 24px;
		height: auto;
	}
	.hs_pic { order: -1; }
	.hs_img_left .hs_text { justify-self: start; }
	/* рамка фото і блок тексту однакової висоти, кнопка - внизу на одному рівні */
	.hs_text { max-width: none; display: flex; flex-direction: column; min-height: 236px; }
	.hs_pic { height: 52vw; }
	.hs_pic img { max-height: 100%; }
	.hs_title { font-size: clamp(24px, 6.6vw, 30px); }
	.hs_desc { margin: 10px 0 18px; font-size: 16px; }
	.hs_btn { display: block; margin-top: auto; padding: 15px 20px; text-align: center; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
	.hs_btn { transition: none; }
}