/* =========================================================
   Дизайн-токены — сняты из макета Figma
   ========================================================= */
:root {
	--accent:        #2671FF;
	--accent-hover:  #1a5ce0;
	--accent-deep:   #0147BF;
	--footer-bg:     #002CA1;
	--dark:          #262629;
	/* Ниже — фон страницы из макета. Он заметно темнее прежнего,
	   поэтому серый текст на нём чуть притемнён ради читаемости,
	   а светлая заливка внутри белых карточек вынесена в --bg-soft. */
	--muted:         #525C6B;
	--border:        #C3CBDD;
	--bg:            #D3D9E6;
	--bg-soft:       #F2F5FA;
	--white:         #FFFFFF;
	--green:         #12B76A;
	--green-bg:      #ECFDF3;

	--radius:        20px;
	--radius-sm:     10px;
	--gap:           20px;
	--container:     1880px;

	--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* =========================================================
   База
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.5;
	color: var(--dark);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* В макете все заголовки синие. Исключения — заголовки на цветном фоне
   (шапка баннера, блок подбора, подвал, баннер «Сервиса») — там задан белый цвет. */
h1, h2, h3, h4 { margin: 0 0 16px; font-weight: 500; letter-spacing: -0.02em; color: var(--accent-deep); }
h1 { font-size: 32px; line-height: 36px; }
h2 { font-size: 28px; line-height: 34px; }
h3 { font-size: 20px; line-height: 26px; }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 20px;
}

.card {
	background: var(--white);
	border-radius: var(--radius);
	padding: 32px;
}

/* Кнопки */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--accent);
	color: var(--white);
	font: inherit;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background .15s ease;
}
.btn:hover { background: var(--accent-hover); color: var(--white); }
.btn--block { width: 100%; }
.btn--ghost {
	background: transparent;
	color: var(--accent);
	border: 1px solid var(--accent);
}
.btn--ghost:hover { background: var(--accent); color: var(--white); }

/* =========================================================
   Шапка — по макету Figma
   ========================================================= */
.site-header { background: var(--white); }

.header-top {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 18px 24px;
	max-width: var(--container);
	margin: 0 auto;
}

/* Логотип. Знак и начертание — из макета, подключены маской:
   рисунок работает как трафарет, цвет задаётся фоном. Один комплект
   файлов и на светлом фоне шапки, и на синем в подвале.
   Все размеры в em от 35px — так логотип масштабируется целиком. */
.ap-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.2286em;
	font-size: 35px;
	line-height: 0;
	white-space: nowrap;
}
.ap-logo__mark {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.4857em;
	height: 1em;
	border-radius: 0.1143em;
	background: var(--accent-deep);
}
.ap-logo__glyph {
	display: block;
	width: 0.8571em;
	height: 0.4286em;
	background: var(--white);
	-webkit-mask: url(../img/logo-ap.png) center / contain no-repeat;
	mask: url(../img/logo-ap.png) center / contain no-repeat;
}
.ap-logo__word {
	display: block;
	flex: none;
	width: 6.8571em;
	height: 0.4286em;
	background: var(--accent-deep);
	-webkit-mask: url(../img/logo-word.png) center / contain no-repeat;
	mask: url(../img/logo-word.png) center / contain no-repeat;
}
.ap-logo__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.header-info {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0 auto;
	font-size: 14px;
	color: var(--muted);
}
.header-info i { font-style: normal; color: var(--accent); }
.header-info b { color: var(--dark); font-weight: 600; }

.header-phone,
.header-mail {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
/* Телефон и почта в макете идут одной строкой: не переносим и не сжимаем. */
.header-phone,
.header-mail { flex: none; white-space: nowrap; }
.header-info__extra { min-width: 0; }

.header-phone {
	font-size: 19px;
	font-weight: 700;
	color: var(--dark);
	letter-spacing: -0.01em;
}
.header-phone:hover { color: var(--accent); }
.header-phone svg { width: 18px; height: 18px; color: var(--accent); flex: none; }

.header-mail { color: var(--muted); }
.header-mail:hover { color: var(--accent); }
.header-mail svg { width: 17px; height: 17px; color: var(--muted); flex: none; }

.header-cta { flex: none; }

.btn--deep { background: var(--accent-deep); }
.btn--deep:hover { background: #013A9E; }

.header-nav { border-top: 1px solid var(--border); }
.header-nav__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 24px;
	max-width: var(--container);
	margin: 0 auto;
}
.header-nav a {
	padding: 9px 18px;
	border: 1px solid transparent;
	border-radius: 8px;
	color: var(--dark);
	font-size: 15px;
	white-space: nowrap;
	transition: color .15s ease, border-color .15s ease;
}
.header-nav a:hover { color: var(--accent); }
.header-nav a.is-active {
	border-color: #B9CDF5;
	color: var(--accent);
}

/* =========================================================
   Хлебные крошки
   ========================================================= */
.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 16px 0;
	font-size: 13px;
	color: var(--muted);
}
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs span[aria-current] { color: var(--dark); font-weight: 500; }
.breadcrumbs .sep { opacity: .5; }

/* =========================================================
   Страница товара
   ========================================================= */
.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 460px;
	gap: var(--gap);
	align-items: start;
}

.product__main { padding: 32px; }

.product__title { margin-bottom: 6px; }
.product__sku { margin-bottom: 24px; font-size: 13px; color: var(--muted); }

.product__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

/* Галерея */
.gallery { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 16px; }
.gallery__thumbs { display: flex; flex-direction: column; gap: 10px; }
.gallery__thumb {
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 4px;
	background: var(--white);
	cursor: pointer;
}
.gallery__thumb.is-active { border-color: var(--accent); }
/* Одно фото — лента миниатюр не нужна. */
.gallery--solo { grid-template-columns: minmax(0, 1fr); }
.gallery--solo .gallery__thumbs { display: none; }
.gallery__stage {
	display: grid;
	place-items: center;
	min-height: 380px;
	border-radius: var(--radius-sm);
	background: var(--white);
	overflow: hidden;
}
.gallery__stage img { max-height: 420px; width: auto; object-fit: contain; }

/* Характеристики */
.tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.tabs__btn {
	padding: 8px 16px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--dark);
	font: inherit;
	font-size: 15px;
	cursor: pointer;
}
.tabs__btn.is-active { background: var(--accent); color: var(--white); }

.tab-panel[hidden] { display: none; }

/* table-layout: fixed — иначе длинное значение («Аккумуляторы 220 В + бензиновый
   Honda (опция)») распирает таблицу и она уезжает под карточку с ценой. */
.specs {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 14px;
}
.specs tr:nth-child(odd) { background: var(--bg-soft); }
.specs th, .specs td {
	padding: 9px 14px;
	text-align: left;
	font-weight: 400;
	vertical-align: top;
	overflow-wrap: break-word;
}
.specs th { width: 54%; color: var(--muted); white-space: normal; }
.specs td { width: 46%; padding-left: 20px; text-align: right; font-weight: 500; white-space: normal; }

.specs-empty {
	padding: 20px;
	border: 1px dashed var(--border);
	border-radius: var(--radius-sm);
	color: var(--muted);
	font-size: 14px;
}

/* Правая колонка */
.product__aside { display: grid; gap: var(--gap); position: sticky; top: 20px; }

.price-card { padding: 28px; }
.price-card__label { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.price-card__value { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 20px; white-space: nowrap; }

.notice-card {
	display: flex;
	gap: 12px;
	padding: 20px;
	border-radius: var(--radius);
	background: var(--green-bg);
	font-size: 14px;
}
.notice-card__icon { color: var(--green); flex: none; }
.notice-card b { display: block; margin-bottom: 4px; }

/* Описание и текстовые блоки */
.prose { font-size: 15px; line-height: 1.65; }
.prose p { margin-bottom: 14px; }

/* Текст перенесён со старого сайта как есть — подстраховываемся,
   чтобы чужая вёрстка не распирала колонку. */
.prose { overflow-wrap: break-word; }
.prose img { max-width: 100%; height: auto; }
/* Ролики со старого сайта вставлены жёстким размером 320×170.
   Растягиваем на ширину колонки и держим пропорции кадра. */
.prose iframe, .prose video {
	display: block;
	width: 100%;
	max-width: 560px;
	height: auto;
	aspect-ratio: 16 / 9;
	margin: 0 0 18px;
	border: 0;
	border-radius: 12px;
	background: var(--dark);
}
.prose table { display: block; max-width: 100%; overflow-x: auto; }
.prose pre { max-width: 100%; overflow-x: auto; }

.info-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	margin-top: var(--gap);
}

/* =========================================================
   Каталог
   ========================================================= */
.catalog-intro { margin-bottom: var(--gap); }

/* Описание категории идёт после техники, перед блоком вопросов. */
.cat-text { margin-top: 40px; }
.cat-text .prose > *:first-child { margin-top: 0; }
.cat-text .prose > *:last-child { margin-bottom: 0; }
.cat-text .prose h2,
.cat-text .prose h3 { margin: 26px 0 10px; color: var(--accent-deep); }
.cat-text .prose h2 { font-size: 24px; }
.cat-text .prose h3 { font-size: 19px; }
.cat-text .prose ul,
.cat-text .prose ol { margin: 0 0 14px 20px; }
.cat-text .prose li { margin-bottom: 6px; }

.tehnika-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--gap);
}

.tehnika-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 18px;
	background: var(--white);
	border-radius: 12px;
	transition: box-shadow .15s ease;
}
.tehnika-card:hover { box-shadow: 0 10px 30px rgba(38,38,41,.10); }

/* Вся карточка ведёт на страницу техники, а не только заголовок:
   ссылка названия растягивается невидимым слоем на всю плитку. */
.tehnika-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
/* Кнопка заказа должна остаться кнопкой — поднимаем её над этим слоем.
   Бейджи наверх не поднимаем: они не кликабельны, и клик по ним
   должен вести на страницу техники, как и по остальной плитке. */
.tehnika-card .btn { position: relative; z-index: 2; }

.tehnika-card__badges {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin-bottom: 4px;
}
.badge {
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--white);
}
.badge--stock { background: #16A34A; }
.badge--top   { background: #6D28D9; }

.tehnika-card__media {
	display: grid;
	place-items: center;
	height: 180px;
	margin-bottom: 16px;
}
.tehnika-card__media img { max-height: 180px; width: auto; object-fit: contain; }

.tehnika-card__title {
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.32;
	color: var(--accent-deep);
}
.tehnika-card__title a { color: inherit; }
.tehnika-card__title a:hover { color: var(--accent); }

.tehnika-card__specs { margin-bottom: 18px; font-size: 12px; }
.tehnika-card__specs div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid var(--border);
	color: var(--muted);
}
.tehnika-card__specs div:last-child { border-bottom: 0; }
.tehnika-card__specs b { color: var(--dark); font-weight: 500; }

.tehnika-card__price {
	margin-top: auto;
	margin-bottom: 14px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--dark);
}

.tehnika-card .btn { background: var(--accent-deep); }
.tehnika-card .btn:hover { background: #013A9E; }

/* =========================================================
   Карусель
   ========================================================= */
.section__tools { display: flex; align-items: center; gap: 20px; }
.section__link { font-size: 15px; }

.carousel__nav { display: flex; gap: 10px; }
.carousel__btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 8px;
	background: var(--accent-deep);
	color: var(--white);
	cursor: pointer;
	transition: background .15s ease, opacity .15s ease;
}
.carousel__btn:hover { background: #013A9E; }
.carousel__btn svg { width: 20px; height: 20px; }
.carousel__btn[disabled] { opacity: .35; cursor: default; }

.carousel__track {
	display: flex;
	gap: var(--gap);
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	padding-bottom: 4px;
	scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * {
	flex: 0 0 clamp(250px, 20%, 340px);
	scroll-snap-align: start;
}

.carousel__bar {
	position: relative;
	height: 3px;
	margin-top: 24px;
	border-radius: 2px;
	background: #DCE1EC;
	overflow: hidden;
}
.carousel__bar span {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 20%;
	border-radius: 2px;
	background: var(--accent-deep);
	transition: width .15s ease, transform .15s ease;
}

@media (max-width: 900px) {
	.carousel__track > * { flex-basis: 78%; }
	.section__link { display: none; }
}

/* =========================================================
   Подвал — по макету Figma
   ========================================================= */
.site-footer {
	margin-top: 56px;
	padding: 44px 0 32px;
	background: var(--footer-bg);
	color: var(--white);
}
.site-footer a { color: var(--white); }
.site-footer a:hover { color: rgba(255,255,255,.75); }

/* В подвале логотип инвертируется: белая плашка, знак и начертание цвета фона. */
.site-footer .ap-logo { margin-bottom: 36px; font-size: 33px; }
.site-footer .ap-logo__mark { background: var(--white); }
.site-footer .ap-logo__glyph { background: var(--footer-bg); }
.site-footer .ap-logo__word { background: var(--white); }

.footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 40px;
}
.footer-col h3 {
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: 500;
	color: var(--white);
}
.footer-col p { margin: 0; font-size: 14px; opacity: .9; }

.footer-item { margin-bottom: 22px; }
.footer-label { display: block; margin-bottom: 6px; font-size: 14px; opacity: .75; }
.footer-big { font-size: 20px; font-weight: 600; }
.footer-item a { font-size: 14px; line-height: 1.7; }
.footer-item .footer-big { font-size: 20px; }

.btn--white { background: var(--white); color: var(--accent-deep); }
.btn--white:hover { background: #E8EEFB; color: var(--accent-deep); }
.site-footer .btn--white { color: var(--footer-bg); }
.site-footer .btn--white:hover { color: var(--footer-bg); }

.footer-social {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-top: 26px;
	border-radius: 8px;
	background: rgba(255,255,255,.16);
	color: var(--white);
}
.footer-social:hover { background: rgba(255,255,255,.28); color: var(--white); }
.footer-social svg { width: 22px; height: 22px; }

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { font-size: 14px; opacity: .9; }

.footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 48px;
	margin-top: 40px;
	padding-top: 22px;
	border-top: 1px solid rgba(255,255,255,.22);
	font-size: 13px;
	opacity: .85;
}

/* =========================================================
   Секции
   ========================================================= */
.section { margin-top: 40px; }
.section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: var(--gap);
}
.section__head h2 { margin: 0; }
.section__center { display: flex; justify-content: center; margin-top: 28px; }

/* =========================================================
   Адаптив
   ========================================================= */
/* Между 1200 и 1700 шапке тесно: поджимаем отступы, чтобы строка не ломалась. */
@media (max-width: 1700px) {
	.header-top { gap: 22px; }
	.header-info { gap: 20px; }
	.header-phone { font-size: 17px; }
	.header-cta { padding: 13px 24px; font-size: 15px; }
}

@media (max-width: 1450px) {
	.header-info { gap: 14px; font-size: 13px; }
	.header-phone { font-size: 16px; }
	.header-mail { font-size: 13px; }
}

/* Ниже 1380 строка уже не вмещает всё: убираем вторую почту —
   она есть в подвале и на «Контактах», а адрес и режим работы важнее. */
@media (max-width: 1380px) {
	.header-mail { display: none; }
}

@media (max-width: 1200px) {
	.product { grid-template-columns: minmax(0, 1fr); }
	.product__body { grid-template-columns: minmax(0, 1fr); }
	.product__aside { position: static; }
	.header-info__extra { display: none; }
	.header-top { gap: 20px; }
	.header-info { margin-left: auto; margin-right: 0; }
}

@media (max-width: 900px) {
	h1 { font-size: 24px; line-height: 30px; }
	.card, .product__main { padding: 20px; }
	.info-grid, .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.header-nav__inner { overflow-x: auto; justify-content: flex-start; padding: 10px 16px; }
	.header-top { flex-wrap: wrap; gap: 12px; }
	.ap-logo { font-size: 31px; }
	.header-info { width: 100%; margin: 0; justify-content: flex-start; gap: 12px; }
	.header-cta { padding: 12px 20px; font-size: 14px; margin-left: auto; }
	.header-nav a { white-space: nowrap; }
	.gallery { grid-template-columns: minmax(0, 1fr); }
	.gallery__thumbs { flex-direction: row; overflow-x: auto; order: 2; }
	.gallery__thumb { flex: none; width: 74px; }
	.gallery__stage { min-height: 260px; }
	.gallery__stage img { max-height: 300px; }
}

@media (max-width: 600px) {
	.header-top { padding: 12px 16px; }
	.ap-logo { font-size: 28px; }
	.header-phone { font-size: 17px; }
	/* На узком экране отдаём значению больше места и слегка убавляем кегль,
	   иначе длинные слова вроде «Грузоподъёмность» рвутся посередине. */
	.specs { font-size: 13px; }
	.specs th, .specs td { padding: 9px 8px; }
	.specs th { width: 44%; }
	.specs td { width: 56%; padding-left: 10px; }
	.tehnika-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Модальное окно заявки
   ========================================================= */
.modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__overlay { position: absolute; inset: 0; background: rgba(38,38,41,.55); backdrop-filter: blur(2px); }

.modal__window {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 32px;
	background: var(--white);
	border-radius: var(--radius);
	box-shadow: 0 24px 64px rgba(38,38,41,.25);
}

.modal__close {
	position: absolute;
	top: 14px; right: 16px;
	width: 32px; height: 32px;
	border: 0; border-radius: 8px;
	background: transparent;
	color: var(--muted);
	font-size: 26px; line-height: 1;
	cursor: pointer;
}
.modal__close:hover { background: var(--bg-soft); color: var(--dark); }

.modal__title { margin-bottom: 8px; font-size: 24px; line-height: 30px; }
.modal__lead { margin-bottom: 22px; font-size: 14px; color: var(--muted); }

.modal__done { text-align: center; padding: 12px 0; }
.modal__done-icon {
	display: grid; place-items: center;
	width: 56px; height: 56px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--green-bg);
	color: var(--green);
	font-size: 24px;
}

/* Форма */
.form__row { margin-bottom: 16px; }
.form__label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.form__label i { font-style: normal; color: #E5484D; }

.form__input {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--white);
	font: inherit;
	font-size: 15px;
	color: var(--dark);
	transition: border-color .15s ease;
}
.form__input:focus { outline: none; border-color: var(--accent); }
.form__input--area { resize: vertical; min-height: 84px; }

.form__item {
	padding: 11px 16px;
	border-radius: var(--radius-sm);
	background: var(--bg-soft);
	font-size: 14px;
	font-weight: 500;
}

.form__consent {
	display: flex;
	gap: 10px;
	margin: 4px 0 20px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--muted);
	cursor: pointer;
}
.form__consent input { margin-top: 2px; flex: none; accent-color: var(--accent); }

.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__error {
	margin-bottom: 14px;
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	background: #FEF3F2;
	color: #B42318;
	font-size: 13px;
}

@media (max-width: 600px) {
	.modal__window { padding: 24px 20px; }
}

/* =========================================================
   Баннер на главной — по макету Figma
   ========================================================= */
/* Заголовок главной. В макете его нет, но странице нужен свой H1,
   поэтому он сдержанный и не спорит со слайдером под ним. */
.page-h1 {
	margin: var(--gap) 0 0;
	font-size: 26px;
	line-height: 1.25;
	font-weight: 600;
	color: var(--muted);
}

@media (max-width: 900px) {
	.page-h1 { font-size: 20px; }
}

.hero {
	position: relative;
	margin-top: 14px;
	border-radius: var(--radius);
	overflow: hidden;
	background: linear-gradient(105deg, #1E63F5 0%, #2E72FF 38%, #5A93FF 72%, #7FAEFF 100%);
}
.hero__track { display: flex; transition: transform .45s ease; }

.hero__slide {
	position: relative;
	flex: 0 0 100%;
	min-height: 400px;
}

/* Фото врезано в баннер и срезано по диагонали сверху справа */
.hero__media {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 18.5%;
	width: 20.5%;
	overflow: hidden;
	clip-path: polygon(0 0, 68% 0, 100% 26%, 100% 100%, 0 100%);
}
.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero__body {
	position: relative;
	margin-left: 44%;
	padding: 56px 72px 56px 0;
	max-width: 760px;
	color: var(--white);
}

.hero__head {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	margin-bottom: 28px;
}

.hero__title {
	margin: 0;
	font-size: 40px;
	line-height: 1.16;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--white);
}

.hero__badge {
	flex: none;
	margin-top: 6px;
	padding: 8px 18px;
	border: 1px solid rgba(255,255,255,.85);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--white);
}

/* Стрелки */
.hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 8px;
	background: var(--accent-deep);
	color: var(--white);
	cursor: pointer;
	transition: background .15s ease;
	z-index: 2;
}
.hero__nav:hover { background: #013A9E; }
.hero__nav svg { width: 20px; height: 20px; }
.hero__nav--prev { left: 18px; }
.hero__nav--next { right: 18px; }

/* Полоса прокрутки слайдов */
.hero__dots {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	width: 33%;
	max-width: 500px;
	z-index: 2;
}
.hero__dots button {
	flex: 1;
	height: 5px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: rgba(255,255,255,.9);
	cursor: pointer;
	transition: background .2s ease;
}
.hero__dots button.is-active { background: var(--accent-deep); }

.btn--light { background: var(--white); color: var(--accent); }
.btn--light:hover { background: #EEF3FF; color: var(--accent); }

@media (max-width: 1200px) {
	.hero__media { left: 12%; width: 26%; }
	.hero__body { margin-left: 42%; padding: 44px 40px 56px 0; }
	.hero__title { font-size: 32px; }
}

@media (max-width: 900px) {
	/* По макету на мобильном фото сверху, под ним текст, стрелки — внизу слева. */
	.hero__slide { min-height: 0; display: flex; flex-direction: column; }
	.hero__media {
		position: relative;
		left: 0;
		width: auto;
		height: 200px;
		margin: 16px 16px 0;
		border-radius: 12px;
		background: var(--white);
		/* Срез по диагонали на узком экране убран: при вписывании фото целиком
		   он отрезал именно технику, а не пустой угол. */
		clip-path: none;
	}
	/* Фото показываем целиком — обрезка по ширине съедала стрелу и полмашины. */
	.hero__media img {
		object-fit: contain;
		padding: 10px;
	}
	.hero__body { margin-left: 0; padding: 22px 20px 84px; max-width: none; }
	.hero__head { flex-direction: column; gap: 14px; margin-bottom: 20px; }
	.hero__badge { margin-top: 0; align-self: flex-start; }
	.hero__title { font-size: 26px; }

	.hero__nav {
		top: auto;
		bottom: 20px;
		transform: none;
		width: 44px;
		height: 44px;
		border-radius: 10px;
	}
	.hero__nav--prev { left: 20px; }
	.hero__nav--next { left: 74px; right: auto; }
	.hero__dots { display: none; }
}

/* =========================================================
   Плитки категорий — по макету Figma
   ========================================================= */
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }

.cat {
	display: flex;
	flex-direction: column;
	padding: 22px 24px 26px;
	border-radius: 12px;
	background: var(--white);
	color: var(--dark);
	transition: background .18s ease, box-shadow .18s ease;
}
.cat:hover,
.cat:focus-visible {
	background: var(--accent-deep);
	color: var(--white);
	box-shadow: 0 12px 32px rgba(1,71,191,.22);
	outline: none;
}

.cat__num {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .04em;
	color: #A3B1CC;
	transition: color .18s ease;
}
.cat:hover .cat__num,
.cat:focus-visible .cat__num { color: rgba(255,255,255,.65); }

.cat__art {
	display: grid;
	place-items: center;
	height: 120px;
	margin: 10px 0 18px;
	color: var(--accent);
	transition: color .18s ease;
}
.cat:hover .cat__art,
.cat:focus-visible .cat__art { color: var(--white); }

.cat__icon {
	display: block;
	width: 100%;
	max-width: 190px;
	height: 100%;
	background-color: currentColor;
	-webkit-mask: var(--cat-icon) center / contain no-repeat;
	mask: var(--cat-icon) center / contain no-repeat;
}

.cat__price {
	align-self: flex-start;
	margin-bottom: 14px;
	padding: 5px 12px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--accent);
	transition: color .18s ease;
}
.cat:hover .cat__price,
.cat:focus-visible .cat__price { color: var(--white); }

.cat__name {
	margin-top: auto;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--accent);
	transition: color .18s ease;
}
.cat:hover .cat__name,
.cat:focus-visible .cat__name { color: var(--white); }

/* =========================================================
   Главная: вопросы и ответы
   ========================================================= */
.faq { background: var(--white); border-radius: var(--radius); overflow: hidden; }
.faq__item + .faq__item { border-top: 1px solid var(--border); }
.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 22px 28px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 17px;
	text-align: left;
	color: var(--dark);
	cursor: pointer;
}
.faq__q i { font-style: normal; font-size: 22px; color: var(--accent); flex: none; }
.faq__q.is-open i { transform: rotate(45deg); }
.faq__a { padding: 0 28px 22px; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 900px; }

/* =========================================================
   Призыв к действию: подбор
   ========================================================= */
.cta {
	display: grid;
	grid-template-columns: 380px minmax(0, 1fr);
	align-items: center;
	gap: 40px;
	margin-top: 40px;
	padding: 44px 56px;
	border-radius: var(--radius);
	background: linear-gradient(105deg, #2E72FF 0%, #4B86FF 45%, #6FA2FF 100%);
	color: var(--white);
}
.cta__art { display: grid; place-items: center; }
.cta__art img { max-height: 240px; width: auto; }

.cta__text h2 {
	margin: 0 0 14px;
	max-width: 620px;
	font-size: 30px;
	line-height: 1.22;
	font-weight: 700;
	color: var(--white);
}
.cta p { margin: 0 0 26px; font-size: 15px; opacity: .9; }

@media (max-width: 900px) {
	.faq__q { padding: 18px 20px; font-size: 15px; }
	.faq__a { padding: 0 20px 18px; }
}

/* =========================================================
   Статьи и страницы
   ========================================================= */
.article { max-width: 1100px; }
.article__meta { margin-bottom: 20px; font-size: 13px; color: var(--muted); }
.article__cover { margin-bottom: 24px; border-radius: var(--radius-sm); overflow: hidden; }
.article__body { font-size: 16px; }
.article__body h2 { font-size: 24px; margin-top: 32px; }
.article__body h3 { font-size: 19px; margin-top: 24px; }
.article__body ul, .article__body ol { padding-left: 22px; }
.article__body li { margin-bottom: 8px; }

.contacts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--gap);
	margin-top: var(--gap);
}
.contacts__card h3 { font-size: 16px; color: var(--muted); font-weight: 400; margin-bottom: 12px; }
.contacts__card p { font-size: 16px; }
.contacts__big { font-size: 26px; font-weight: 600; color: var(--dark); }
.contacts__big:hover { color: var(--accent); }

/* =========================================================
   Квиз подбора
   ========================================================= */
/* Квиз подбора — по макету Figma. */
.quiz { max-width: 720px; margin-top: var(--gap); }

/* Заголовок страницы подбора: нужен для поиска, в макете его нет —
   поэтому он скромный и не мешает первому вопросу. */
.quiz__title { margin: 0 0 18px; font-size: 22px; line-height: 1.25; font-weight: 600; color: var(--muted); }

.quiz__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.quiz__counter { font-size: 20px; color: var(--muted); }
.quiz__counter b { font-weight: 700; color: var(--accent-deep); }

.quiz__progress { height: 4px; margin: 18px 0 26px; border-radius: 2px; background: var(--border); overflow: hidden; }
.quiz__progress span { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }

.quiz__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 10px;
}
.quiz__q { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--accent-deep); }

.quiz__nav { display: flex; flex: none; gap: 10px; }
.quiz__arrow {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 10px;
	background: var(--accent-deep);
	color: var(--white);
	cursor: pointer;
	transition: background .15s ease;
}
.quiz__arrow:hover { background: #013A9E; }
.quiz__arrow[disabled] { background: #B9C6E4; cursor: default; }
.quiz__arrow svg { width: 20px; height: 20px; }

.quiz__sub { margin: 0 0 22px; font-size: 16px; line-height: 1.4; color: var(--accent); }

.quiz__options { display: grid; gap: 12px; margin-bottom: 18px; }
.quiz__option {
	width: 100%;
	padding: 16px 20px;
	border: 2px solid var(--accent-deep);
	border-radius: 999px;
	background: var(--white);
	color: var(--accent-deep);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.quiz__option:hover { background: #EEF3FF; }
.quiz__option.is-active { background: var(--accent-deep); color: var(--white); }

/* Свой вариант: подпись и поле в общей рамке. */
.quiz__other {
	padding: 14px 18px 16px;
	border: 2px solid var(--accent-deep);
	border-radius: 16px;
	margin-bottom: 18px;
}
.quiz__other-label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--dark); }
.quiz__other-input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--white);
	font: inherit;
	font-size: 15px;
	color: var(--dark);
}
.quiz__other-input:focus { outline: 0; border-color: var(--accent); }

.quiz__skip {
	width: 100%;
	padding: 16px;
	border: 0;
	border-radius: 12px;
	background: var(--bg-soft);
	color: var(--muted);
	font: inherit;
	font-size: 15px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.quiz__skip:hover { background: #E4E8F2; color: var(--dark); }

.quiz__summary { display: grid; gap: 8px; margin-bottom: 22px; }
.quiz__summary div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;
}
.quiz__summary span { color: var(--muted); }
.quiz__summary b { font-weight: 500; text-align: right; }

.quiz__form { max-width: none; }
.quiz__consent { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.quiz__consent a { color: inherit; text-decoration: underline; }

.quiz__done { text-align: center; }
.quiz__done-lead { margin: 0 0 22px; font-size: 16px; line-height: 1.5; color: var(--dark); }
.quiz__done-card {
	display: grid;
	gap: 8px;
	margin-bottom: 22px;
	padding: 22px;
	border-radius: 16px;
	background: var(--white);
	box-shadow: 0 6px 24px rgba(38,38,41,.08);
}
.quiz__done-card span { font-size: 15px; color: var(--dark); }
.quiz__done-card a { font-size: 20px; font-weight: 700; color: var(--accent-deep); }

@media (max-width: 600px) {
	.quiz { padding: 20px 18px; }
	.quiz__title { font-size: 18px; margin-bottom: 14px; }
	.quiz__counter { font-size: 18px; }
	.quiz__q { font-size: 22px; }
	.quiz__arrow { width: 42px; height: 42px; }
	.quiz__option { padding: 14px 16px; font-size: 14px; }
	.quiz__done-card a { font-size: 18px; }
}



@media (max-width: 1280px) {
	.cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cat { padding: 18px 18px 22px; border-radius: 12px; }
	.cat__art { height: 96px; margin: 8px 0 14px; }
	.cat__name { font-size: 15px; }
}
@media (max-width: 520px) {
	.cats { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Текстовый блок на главной
   ========================================================= */
.intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
	gap: var(--gap);
	margin-top: 40px;
	align-items: stretch;
}

.intro__aside {
	padding: 36px 34px;
	border-radius: var(--radius);
	background: linear-gradient(150deg, #2671FF 0%, #3F7DFF 55%, #5B8FFF 100%);
	color: var(--white);
}
.intro__aside .prose { font-size: 15px; line-height: 1.6; }
.intro__aside p { margin-bottom: 18px; }

.intro__main {
	padding: 36px 40px;
	border-radius: var(--radius);
	background: var(--white);
}
.intro__main .prose { font-size: 15px; line-height: 1.7; color: #4A5568; }
.intro__main h2 {
	margin: 0 0 14px;
	font-size: 24px;
	line-height: 30px;
	font-weight: 600;
	color: var(--accent-deep);
}
.intro__main h2 + p { margin-bottom: 26px; }
.intro__main p:last-child { margin-bottom: 0; }
.intro__main > .prose > h2:not(:first-child) { margin-top: 8px; }

@media (max-width: 1000px) {
	.intro { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.intro__aside, .intro__main { padding: 24px 20px; }
	.intro__main h2 { font-size: 20px; line-height: 26px; }
}

/* =========================================================
   Теги «Возможно, Вас заинтересует»
   ========================================================= */
.tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.tag {
	padding: 11px 22px;
	border: 1px solid var(--accent-deep);
	border-radius: 999px;
	font-size: 14px;
	line-height: 1.3;
	color: var(--accent-deep);
	background: transparent;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}
.tag:hover,
.tag:focus-visible {
	background: var(--accent-deep);
	color: var(--white);
	outline: none;
}
.tag[hidden] { display: none; }

.tags__more {
	padding: 11px 4px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 14px;
	color: var(--accent);
	text-decoration: underline;
	cursor: pointer;
}
.tags__more:hover { color: var(--accent-deep); }

@media (max-width: 700px) {
	.tag { white-space: normal; padding: 10px 18px; font-size: 13px; }
}

@media (max-width: 1000px) {
	.footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.footer-col--links { grid-column: 1 / -1; }
	.cta { grid-template-columns: minmax(0, 1fr); text-align: center; padding: 32px 24px; }
	.cta__art img { max-height: 180px; }
	.cta__text h2 { font-size: 24px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 700px) {
	.footer-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.footer-legal { gap: 8px 24px; }
}

/* =========================================================
   Карточка новости
   ========================================================= */
.news-card {
	position: relative;
	display: block;
	height: 300px;
	border-radius: 12px;
	overflow: hidden;
	background: #C9D2E4;
	color: var(--white);
}
.news-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.news-card:hover img { transform: scale(1.04); }

.news-card__date {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 5px 12px;
	border-radius: 6px;
	background: var(--accent-deep);
	font-size: 12px;
	font-weight: 500;
	color: var(--white);
	z-index: 1;
}

.news-card__title {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	padding: 14px 16px;
	border-radius: 10px;
	background: rgba(24,28,38,.72);
	backdrop-filter: blur(3px);
	font-size: 15px;
	line-height: 1.35;
	font-weight: 500;
	color: var(--white);
	z-index: 1;
}

@media (max-width: 700px) {
	.news-card { height: 250px; }
}

/* =========================================================
   Страница «Сервис»
   ========================================================= */
.srv-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
	align-items: center;
	gap: 48px;
	margin-top: var(--gap);
	padding: 48px 56px;
	border-radius: var(--radius);
	background: linear-gradient(105deg, #2E72FF 0%, #4B86FF 48%, #6FA2FF 100%);
	color: var(--white);
}
.srv-hero h1 {
	margin: 0 0 14px;
	max-width: 620px;
	font-size: 34px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--white);
}
.srv-hero p { margin: 0 0 26px; max-width: 560px; font-size: 15px; opacity: .92; }
.srv-hero__media { border-radius: 14px; overflow: hidden; min-height: 200px; background: rgba(255,255,255,.15); }
.srv-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.srv-lead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	margin-top: var(--gap);
	padding: 34px 40px;
	border-radius: var(--radius);
	background: #E4E8F2;
}
.srv-lead p { margin: 0; font-size: 14px; line-height: 1.65; color: #4A5568; }
.srv-lead__accent {
	font-size: 19px !important;
	line-height: 1.4 !important;
	font-weight: 700;
	color: var(--accent-deep) !important;
}

.srv-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gap);
}
.srv-card {
	display: flex;
	flex-direction: column;
	padding: 24px;
	border-radius: 12px;
	background: var(--white);
	transition: box-shadow .15s ease;
}
.srv-card:hover { box-shadow: 0 10px 30px rgba(38,38,41,.10); }
.srv-card__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: 22px;
	border-radius: 10px;
	background: var(--accent-deep);
	color: var(--white);
}
.srv-card__icon svg { width: 22px; height: 22px; }
.srv-card h3 {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--accent-deep);
}
.srv-card p { margin: 0 0 18px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.srv-card__price {
	align-self: flex-start;
	margin-top: auto;
	padding: 5px 12px;
	border: 1px solid var(--accent);
	border-radius: 999px;
	font-size: 11px;
	color: var(--accent);
}

.srv-form-wrap {
	margin-top: 40px;
	padding: 40px 48px;
	border-radius: var(--radius);
	background: #E4E8F2;
}
/* Заголовок и подпись живут в той же колонке, что и поля,
   поэтому получают ту же ширину и то же центрирование. */
.srv-form-wrap h2 { max-width: 1000px; margin: 0 auto 4px; font-size: 26px; color: var(--accent-deep); }
.srv-form-wrap__sub { max-width: 1000px; margin: 0 auto 28px; font-size: 14px; color: var(--accent); }

.srv-form { max-width: 1000px; margin-inline: auto; }
.srv-form__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.srv-form .form__label { color: #4A5568; }
.srv-form .form__label i { color: #E5484D; }

.srv-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 8px;
}
.srv-form__note { margin: 0; max-width: 320px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.srv-form__note a { color: var(--muted); text-decoration: underline; }

.srv-bottom {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 40px;
	margin-top: 40px;
	padding: 40px 48px;
	border-radius: var(--radius);
	background: var(--white);
}
.srv-bottom__text p { font-size: 14px; line-height: 1.7; color: #4A5568; }

.srv-benefits {
	align-self: start;
	padding: 30px 32px;
	border-radius: 14px;
	background: #E7EDFA;
}
.srv-benefits h3 { margin: 0 0 18px; font-size: 19px; font-weight: 600; color: var(--accent-deep); }
.srv-benefits ul { list-style: none; margin: 0; padding: 0; }
.srv-benefits li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 12px;
	font-size: 14px;
	color: var(--dark);
}
.srv-benefits li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: -1px;
	color: var(--accent-deep);
	font-weight: 600;
}

@media (max-width: 1200px) {
	.srv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.srv-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 30px 24px; }
	.srv-hero h1 { font-size: 25px; }
	.srv-lead, .srv-bottom { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 26px 22px; }
	.srv-form-wrap { padding: 26px 22px; }
	.srv-form__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.srv-form__submit { flex-direction: column; align-items: stretch; text-align: center; }
	.srv-form__note { max-width: none; }
}
@media (max-width: 600px) {
	.srv-grid { grid-template-columns: minmax(0, 1fr); }
}

.form__done {
	padding: 20px 24px;
	border-radius: var(--radius-sm);
	background: var(--green-bg);
	font-size: 15px;
	color: var(--dark);
}

/* =========================================================
   Страница «Контакты»
   ========================================================= */
.page-title { margin: 6px 0 22px; font-size: 32px; color: var(--accent-deep); }

.kont-cards {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--gap);
}
.kont-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px;
	border-radius: 12px;
	background: var(--white);
}
.kont-card__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin-bottom: 12px;
	border-radius: 9px;
	background: var(--accent-deep);
	color: var(--white);
}
.kont-card__icon svg { width: 20px; height: 20px; }
.kont-card h3 { margin: 0 0 4px; font-size: 14px; font-weight: 500; color: var(--muted); }
.kont-card p { margin: 0; font-size: 14px; line-height: 1.5; }
.kont-card a { font-size: 14px; line-height: 1.6; }
.kont-card__big { font-size: 19px; font-weight: 600; color: var(--dark); }
.kont-card__big:hover { color: var(--accent); }
.kont-card__muted { font-size: 13px; color: var(--muted); }

.kont-card__link {
	align-self: flex-start;
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 13px;
	color: var(--accent);
	text-decoration: underline;
	cursor: pointer;
}
.kont-card__row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.kont-chip {
	padding: 6px 12px;
	border: 1px solid var(--accent);
	border-radius: 999px;
	font-size: 12px !important;
	color: var(--accent);
}
.kont-chip:hover { background: var(--accent); color: var(--white); }

.kont-map-wrap {
	display: grid;
	grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
	gap: var(--gap);
	margin-top: var(--gap);
}
.kont-route { display: grid; gap: var(--gap); align-content: start; }
.kont-route__item {
	padding: 26px 28px;
	border-radius: 12px;
	background: var(--white);
}
.kont-route__item h3 { margin: 0 0 12px; font-size: 19px; font-weight: 600; color: var(--accent-deep); }
.kont-route__item .prose { font-size: 13px; line-height: 1.65; color: #4A5568; }

.kont-map {
	min-height: 420px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--white);
}
.kont-map iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }

.kont-req {
	margin-top: var(--gap);
	padding: 34px 40px;
	border-radius: var(--radius);
	background: var(--white);
}
.kont-req h2 { margin: 0 0 22px; font-size: 24px; color: var(--accent-deep); }
.kont-req__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 48px;
}
.kont-req__row {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 11px 0;
	border-bottom: 1px solid var(--border);
	font-size: 13px;
}
.kont-req__row span { color: var(--muted); }
.kont-req__row b { font-weight: 500; text-align: right; }

@media (max-width: 1200px) {
	.kont-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.kont-map-wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
	.kont-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kont-req__grid { grid-template-columns: minmax(0, 1fr); }
	.kont-req { padding: 24px 22px; }
	.page-title { font-size: 25px; }
}
@media (max-width: 520px) {
	.kont-cards { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Статья блога — по макету Figma
   ========================================================= */
.art { display: grid; gap: 40px; }

.art-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	min-height: 400px;
	padding: 20px;
	border-radius: var(--radius);
	overflow: hidden;
	color: var(--white);
	background: #2B3550 var(--art-cover, none) center / cover no-repeat;
}
/* Затемнение как в макете: ровная плёнка плюс усиление к низу под заголовок. */
.art-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12,16,28,.30) 0%, rgba(12,16,28,.30) 45%, rgba(12,16,28,.62) 100%);
}
.art-hero > * { position: relative; z-index: 1; }
.art-hero--plain { background: var(--accent-deep); }

.art-hero__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.art-hero__pills { display: flex; gap: 10px; flex-wrap: wrap; }
.art-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 8px;
	background: var(--accent);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}
.art-pill--rate { background: rgba(20,22,28,.55); }

/* Счётчики лежат отдельным блоком над обложкой: на широком экране их
   накладываем в правый верхний угол обложки, на узком они остаются
   строкой над фото — так в макете. */
.art-head { position: relative; }
.art-hero__counts { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.art-count { display: inline-flex; align-items: center; gap: 8px; color: var(--white); }
.art-count:hover { color: rgba(255,255,255,.78); }
.art-count svg { width: 20px; height: 20px; flex: none; }

@media (min-width: 901px) {
	.art-hero__counts {
		position: absolute;
		top: 32px;
		right: 32px;
		z-index: 2;
	}
}

.art-hero__bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; padding: 4px 4px 6px; }
.art-hero__title { margin: 0; font-size: 44px; line-height: 1.12; font-weight: 700; color: var(--white); }
.art-hero__lead { margin: 0; font-size: 18px; line-height: 1.5; }

.art-col { width: 100%; max-width: 1180px; margin-inline: auto; display: grid; gap: 60px; }

.art-toc {
	display: grid;
	gap: 14px;
	padding: 30px 40px;
	border-radius: var(--radius);
	background: var(--accent);
	color: var(--white);
}
.art-toc__row { display: flex; gap: 18px; align-items: baseline; color: var(--white); font-size: 16px; line-height: 1.45; }
.art-toc__num { flex: none; font-weight: 600; color: rgba(255,255,255,.6); }
.art-toc__row:hover { color: var(--white); }
.art-toc__row:hover .art-toc__text { text-decoration: underline; }

.art-body h2 { margin: 0 0 16px; font-size: 30px; line-height: 1.25; font-weight: 700; color: var(--dark); }
.art-body h2:not(:first-child) { margin-top: 44px; }
.art-body h3 { margin: 28px 0 10px; font-size: 16px; font-weight: 700; color: var(--dark); }
.art-body p { margin: 0 0 14px; font-size: 15px; line-height: 1.75; color: #4A5568; }
.art-body strong { color: var(--dark); }
.art-body a { color: var(--accent); text-decoration: underline; }
.art-body ul { list-style: none; margin: 0 0 16px; padding: 0; }
.art-body li { position: relative; padding-left: 18px; margin-bottom: 8px; font-size: 15px; line-height: 1.7; color: #4A5568; }
.art-body li::before { content: ''; position: absolute; left: 2px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: #8A95AB; }

.art-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 30px 0; }
.art-figs figure { margin: 0; }
.art-figs img { display: block; width: 100%; height: 340px; object-fit: cover; border-radius: 12px; background: #E4E8F2; }
.art-figs figcaption { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--muted); }

.art-cats h2 { margin: 0 0 18px; font-size: 24px; color: var(--accent-deep); }

.art-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.art-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	background: #E4E8F2;
	font-size: 13px;
	color: var(--dark);
}
.art-chip:hover { background: #D8DEEC; color: var(--dark); }
.art-chip svg { width: 18px; height: 18px; }
.art-share { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }

.art-rating { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 22px 32px; }
.art-rating__left { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.art-rating__label { color: var(--muted); }
.art-rating__score { font-size: 17px; }
.art-rating__right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.art-rating__ask { font-size: 14px; color: var(--dark); }

.stars { display: inline-flex; gap: 2px; }
.stars__i { font-style: normal; font-size: 15px; line-height: 1; color: #C9CFDD; }
.stars__i.is-on { color: #E02B20; }

.vote { display: inline-flex; align-items: center; gap: 10px; }
.vote__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--white);
	color: var(--dark);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.vote__btn svg { width: 18px; height: 18px; flex: none; }
.vote__btn:hover { border-color: var(--accent); color: var(--accent); }
.vote__btn--accent { padding: 12px 20px; border-color: transparent; background: var(--accent-deep); color: var(--white); font-size: 14px; font-weight: 500; }
.vote__btn--accent:hover { background: #013A9E; color: var(--white); }
.vote.is-done .vote__btn { opacity: .55; pointer-events: none; }

.art-author { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 32px; font-size: 14px; }
.art-author__label { color: var(--muted); margin-right: 6px; }
.art-author__dot { color: var(--muted); margin: 0 6px; }
.art-author__spec { color: var(--muted); }
.art-author__link { color: var(--accent); text-decoration: underline; }

.art-comments { padding: 28px 32px; }
.art-comments__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.art-comments__head h2 { margin: 0; font-size: 22px; color: var(--dark); }
.art-comments__count { font-size: 15px; color: var(--muted); }
.art-comments__closed { margin: 0; font-size: 14px; color: var(--muted); }

.art-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.art-form__row { margin: 0; grid-column: 1 / -1; }
.art-form__row--half { grid-column: auto; }
.art-form__input {
	width: 100%;
	padding: 14px 20px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--white);
	font: inherit;
	font-size: 14px;
	color: var(--dark);
}
.art-form__input:focus { outline: none; border-color: var(--accent); }
textarea.art-form__input { min-height: 52px; border-radius: 20px; resize: vertical; }
.art-form .form-submit { grid-column: 1 / -1; margin: 0; }
.art-form .comment-form-cookies-consent { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: var(--muted); }

.comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.comment-list .children { list-style: none; margin: 18px 0 0; padding: 0 0 0 18px; border-left: 2px solid var(--border); display: grid; gap: 18px; }
.comment-item__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.comment-item__name { font-size: 14px; }
.comment-item__time { font-size: 12px; color: var(--muted); }
.comment-item__text { margin: 6px 0 10px; font-size: 14px; line-height: 1.65; color: #4A5568; }
.comment-item__text p { margin: 0 0 8px; }
.comment-item__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.comment-item__score { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.comment-item__reply a { font-size: 13px; color: var(--accent); }

.news-card__rate {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 8px;
	background: rgba(20,22,28,.55);
	font-size: 12px;
	font-weight: 600;
	color: var(--white);
}

.to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 60;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: none;
	border-radius: 50%;
	background: var(--accent);
	color: var(--white);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--accent-deep); }
.to-top svg { width: 20px; height: 20px; }

@media (max-width: 1000px) {
	.art-hero__bottom { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.art-hero__title { font-size: 32px; }
	.art-hero__lead { font-size: 16px; }
	.art-toc { padding: 24px 22px; }
	.art-body h2 { font-size: 24px; }
	.art-figs { grid-template-columns: minmax(0, 1fr); }
	.art-figs img { height: 240px; }
	.art-rating, .art-author, .art-comments { padding: 20px 18px; }
	.art-share { margin-left: 0; }
	.art-form { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
	.art-hero { min-height: 340px; }
	.art-hero__title { font-size: 26px; }
	.art-hero__counts { gap: 14px; font-size: 13px; }
	.art-col { gap: 36px; }
}

/* Срезы категории — как фильтр на старом сайте, но это отдельные страницы */
.cat-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.cat-filter__pill {
	padding: 9px 18px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--white);
	font-size: 14px;
	color: var(--dark);
	white-space: nowrap;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cat-filter__pill:hover { border-color: var(--accent); color: var(--accent); }
.cat-filter__pill.is-active { border-color: transparent; background: var(--accent-deep); color: var(--white); }

/* =========================================================
   Спецпредложение
   ========================================================= */
.offer-hero {
	margin-top: var(--gap);
	padding: 48px 56px;
	border-radius: var(--radius);
	background: linear-gradient(105deg, #2E72FF 0%, #4B86FF 48%, #6FA2FF 100%);
	color: var(--white);
}
.offer-hero h1 {
	margin: 0 0 14px;
	max-width: 720px;
	font-size: 34px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--white);
}
.offer-hero p { margin: 0 0 26px; max-width: 620px; font-size: 15px; line-height: 1.6; opacity: .92; }

.offer-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap);
}

.offer-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--white);
	transition: box-shadow .15s ease;
}
.offer-card:hover { box-shadow: 0 10px 30px rgba(38,38,41,.10); }

/* Фото со старого сайта разного размера и пропорций,
   поэтому вписываем целиком, а не обрезаем. */
.offer-card__media {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 300px;
	padding: 24px;
	background: var(--bg-soft);
}
.offer-card__media img {
	max-width: 100%;
	max-height: 260px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
.offer-card__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--accent-deep);
	color: var(--white);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: .02em;
}

.offer-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px;
}
.offer-card__title {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--accent-deep);
}
.offer-card__sub { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.offer-card__price {
	margin: 0 0 22px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--dark);
}
.offer-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin-top: auto;
}
.offer-card__more { font-size: 14px; color: var(--accent); }
.offer-card__more:hover { text-decoration: underline; }

.offer-text { margin-top: var(--gap); }

.offer-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	margin-top: var(--gap);
	padding: 36px 48px;
	border-radius: var(--radius);
	background: #E4E8F2;
}
.offer-cta h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.25; }
.offer-cta p { margin: 0; font-size: 14px; line-height: 1.6; color: #4A5568; }
.offer-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.offer-cta__phone { font-size: 22px; font-weight: 700; color: var(--accent-deep); white-space: nowrap; }

@media (max-width: 1200px) {
	.offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.offer-hero { padding: 34px 28px; }
	.offer-hero h1 { font-size: 26px; }
	.offer-cta { padding: 28px 24px; }
	.offer-cta h2 { font-size: 20px; }
}

@media (max-width: 600px) {
	.offer-grid { grid-template-columns: minmax(0, 1fr); }
	.offer-hero { padding: 26px 20px; }
	.offer-hero h1 { font-size: 22px; }
	.offer-card__media { min-height: 240px; padding: 18px; }
	.offer-card__media img { max-height: 210px; }
	.offer-card__body { padding: 20px; }
	.offer-cta__actions { width: 100%; }
	.offer-cta__actions .btn { width: 100%; }
}

/* =========================================================
   Мобильное меню
   ========================================================= */
.nav-burger { display: none; }

@media (max-width: 900px) {
	/* На узком экране в шапке остаются только логотип и бургер. */
	.header-info,
	.header-cta,
	.header-nav { display: none; }

	.header-top { flex-wrap: nowrap; align-items: center; justify-content: space-between; }

	.nav-burger {
		display: grid;
		align-content: center;
		gap: 5px;
		flex: none;
		width: 52px;
		height: 52px;
		padding: 0 14px;
		border: 0;
		border-radius: 12px;
		background: var(--accent-deep);
		cursor: pointer;
	}
	.nav-burger span {
		display: block;
		height: 3px;
		border-radius: 2px;
		background: var(--white);
	}
}

.navpanel {
	position: fixed;
	inset: 0;
	z-index: 9998;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--white);
	-webkit-overflow-scrolling: touch;
}
.navpanel[hidden] { display: none; }

.navpanel__screen {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 16px 24px 32px;
}
.navpanel__screen[hidden] { display: none; }

.navpanel__bar { display: flex; justify-content: flex-end; margin-bottom: 22px; }
.navpanel__bar--split { justify-content: space-between; align-items: center; }

.navpanel__close {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 12px;
	background: var(--accent-deep);
	color: var(--white);
	cursor: pointer;
}
.navpanel__close svg { width: 24px; height: 24px; }

.navpanel__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--accent-deep);
	font: inherit;
	font-size: 20px;
	font-weight: 700;
	cursor: pointer;
}
.navpanel__back svg { width: 22px; height: 22px; }

.navpanel__phone,
.navpanel__mail {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.navpanel__phone {
	margin-bottom: 10px;
	color: var(--accent-deep);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.01em;
}
.navpanel__phone svg { width: 26px; height: 26px; }
.navpanel__mail { margin-bottom: 26px; color: var(--dark); font-size: 17px; }
.navpanel__mail svg { width: 22px; height: 22px; color: var(--accent-deep); }

.navpanel__cta { width: 100%; padding: 18px; font-size: 17px; }

.navpanel__catalog {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-top: 26px;
	padding: 18px;
	border: 2px solid var(--accent-deep);
	border-radius: var(--radius-sm);
	background: var(--white);
	color: var(--accent-deep);
	font: inherit;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
}
.navpanel__catalog svg { width: 18px; height: 18px; }

.navpanel__links { display: grid; margin-top: 12px; }
.navpanel__links a {
	padding: 17px 8px;
	color: #3A3A3D;
	font-size: 17px;
	text-align: center;
}
.navpanel__links a:hover { color: var(--accent); }

/* Экран каталога: раздел заголовком, под ним срезы в две колонки. */
.navpanel__cat { margin-bottom: 26px; }
.navpanel__cat-title {
	display: block;
	margin-bottom: 12px;
	color: var(--accent-deep);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
}
/* Колонки, а не сетка: в макете список заполняется сверху вниз,
   а не слева направо — «8, 10, 12, 14, 15» в левой колонке. */
.navpanel__slices {
	columns: 2;
	column-gap: 16px;
}
.navpanel__slices a {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 10px;
	break-inside: avoid;
	color: var(--dark);
	font-size: 14px;
}
.navpanel__slices a b { font-size: 12px; font-weight: 400; color: var(--muted); }
.navpanel__slices a:hover { color: var(--accent); }

/* На этом экране кнопки «назад» и «закрыть» светлые, как в макете. */
.navpanel__screen--catalog .navpanel__bar { margin-bottom: 18px; }
.navpanel__screen--catalog .navpanel__close {
	background: var(--bg-soft);
	color: var(--dark);
}
.navpanel__screen--catalog .navpanel__back {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: var(--bg-soft);
	color: var(--dark);
}
.navpanel__screen--catalog .navpanel__back span { display: none; }
.navpanel__title {
	flex: 1;
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	color: var(--dark);
}

/* Адрес и режим работы прижаты к низу панели. */
.navpanel__foot { margin-top: auto; padding-top: 40px; text-align: center; }
.navpanel__foot p { margin: 0 0 8px; font-size: 15px; color: var(--dark); }
.navpanel__foot i { font-style: normal; color: var(--accent-deep); }

/* =========================================================
   Карточка товара на мобильном
   ========================================================= */

/* Плашка с ценой: последний блок страницы, липнет к низу экрана.
   Положение считает браузер, поэтому она не разъезжается, когда
   мобильный браузер прячет и показывает свою нижнюю панель. */
.price-bar { display: none; }

@media (max-width: 900px) {
	.price-bar {
		display: block;
		position: sticky;
		bottom: 0;
		z-index: 900;
		border-radius: 20px 20px 0 0;
		background: var(--white);
		/* Второй тенью продлеваем белый фон вниз на 120 px. Когда мобильный
		   браузер прячет свою панель, экран становится выше и под плашкой
		   на мгновение открывается полоса фона страницы — эта тень её
		   закрывает. Тень не занимает места в потоке и не удлиняет страницу,
		   поэтому в самом низу страницы её не видно. */
		box-shadow:
			0 -8px 30px rgba(38, 38, 41, .16),
			0 120px 0 0 var(--white);
	}
	.price-bar__inner { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); }
	.price-bar__label { display: block; margin-bottom: 4px; font-size: 15px; color: var(--dark); }
	.price-bar__value {
		display: block;
		margin-bottom: 14px;
		font-size: 30px;
		font-weight: 700;
		line-height: 1.15;
		color: var(--accent-deep);
	}
	.price-bar .btn { padding: 17px; font-size: 17px; }

	/* В правой колонке карточка с ценой на узком экране не нужна — её роль
	   играет нижняя плашка, иначе цена повторялась бы дважды. */
	.single-tehnika .product__aside .price-card { display: none; }

	/* Табы: активный — сплошная заливка, как в макете. */
	.tabs { gap: 6px; }
	.tabs__btn { padding: 14px 22px; font-size: 17px; border-radius: 10px; }
	.tabs__btn.is-active { background: var(--accent-deep); font-weight: 600; }

	/* Миниатюры делят ряд поровну — иначе четвёртая уезжает за край экрана. */
	.gallery__thumbs { gap: 8px; overflow: visible; }
	.gallery__thumb {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		max-width: 96px;
		border-radius: 10px;
	}
	.gallery__thumb img { width: 100%; }
	.gallery__thumb.is-active { border-width: 2px; padding: 3px; }
}

/* Лента новостей: карточки с фото. На телефоне по две в ряд, как в макете. */
.news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--gap);
}

@media (max-width: 900px) {
	.news-grid { gap: 14px; }
}

@media (max-width: 600px) {
	.news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.news-card { height: 240px; border-radius: 10px; }
	.news-card__date { top: 10px; left: 10px; padding: 4px 9px; font-size: 11px; }
	.news-card__title { left: 8px; right: 8px; bottom: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.3; }
}

@media (max-width: 600px) {
	/* Рядом дата и рейтинг не помещаются — рейтинг уходит под дату, как в макете. */
	.news-card__rate {
		top: 38px;
		right: auto;
		left: 10px;
		padding: 4px 8px;
		gap: 4px;
		font-size: 11px;
	}
	.news-card__rate svg { width: 10px; height: 10px; }
}

/* =========================================================
   Статья на мобильном
   ========================================================= */
@media (max-width: 900px) {
	/* Счётчики над обложкой — на светлом фоне, значит тёмным по макету. */
	.art-hero__counts {
		gap: 26px;
		margin: 0 0 14px;
		padding: 0 2px;
		font-size: 15px;
	}
	.art-hero__counts .art-count { color: var(--dark); }
	.art-hero__counts .art-count:hover { color: var(--accent); }
	.art-hero__counts .art-count svg { width: 22px; height: 22px; color: var(--accent-deep); }

	.art-hero { min-height: 380px; gap: 24px; padding: 16px; }
	.art-hero__pills { gap: 8px; }
	.art-pill { padding: 7px 12px; font-size: 12px; }
	.art-hero__title { font-size: 26px; }
}

/* =========================================================
   Контакты на мобильном
   ========================================================= */
@media (max-width: 900px) {
	/* В макете мессенджеры идут последними, а в разметке они вторые. */
	.kont-cards { gap: 12px; }
	.kont-card:nth-child(2) { order: 5; }

	.kont-card { padding: 18px; gap: 4px; }
	/* Название блока — крупным тёмным, значение под ним синим. */
	.kont-card h3 { margin: 6px 0 2px; font-size: 19px; font-weight: 600; color: var(--dark); }
	.kont-card__big { font-size: 17px; color: var(--accent-deep); }
	.kont-card p,
	.kont-card a { font-size: 15px; }
	.kont-card__muted { font-size: 13px; }

	.kont-map iframe { min-height: 280px; }
	.kont-map-wrap { gap: 14px; }
	.kont-route { gap: 14px; }
	.kont-route__item { padding: 18px; }
	.kont-route__item h3 { font-size: 17px; }
}

/* =========================================================
   Отзывы на карточке техники и в разделе каталога
   ========================================================= */
.reviews__avg {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: var(--dark);
}
.reviews__avg b { font-size: 19px; font-weight: 700; color: var(--accent-deep); }
.reviews__avg i { font-style: normal; color: var(--muted); }

.reviews__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--gap);
}

.review {
	display: flex;
	flex-direction: column;
	padding: 24px;
	border-radius: var(--radius-sm);
	background: var(--white);
}
.review__rate { margin-bottom: 12px; }
.review__text {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.6;
	color: #4A5568;
	overflow-wrap: break-word;
}
/* Подпись прижата к низу, чтобы в ряду карточки выглядели ровно. */
.review__who {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--border);
}
.review__name { font-size: 15px; font-weight: 600; color: var(--dark); }
.review__company { font-size: 14px; color: var(--accent-deep); }
.review__date { margin-left: auto; font-size: 13px; color: var(--muted); }

@media (max-width: 600px) {
	.reviews__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.review { padding: 20px; }
	.review__text { font-size: 14px; }
	.review__date { margin-left: 0; }
}

/* =========================================================
   Переключатель вида каталога: плиткой и списком
   ========================================================= */
.catalog-tools { display: flex; justify-content: flex-end; margin-bottom: 14px; }

.view-switch {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border-radius: 10px;
	background: var(--white);
}
.view-switch__btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	color: #9AA6C0;
	transition: background .15s ease, color .15s ease;
}
.view-switch__btn:hover { color: var(--accent); }
.view-switch__btn.is-active { background: var(--accent-deep); color: var(--white); }
.view-switch__btn svg { width: 19px; height: 19px; }

/* Обёртка содержимого: в плитке обычная колонка. */
.tehnika-card__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }

/* Список: широкие строки по две в ряд, фото слева. */
.tehnika-grid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tehnika-grid--list .tehnika-card {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: 22px;
	padding: 20px;
}
.tehnika-grid--list .tehnika-card__badges {
	flex-basis: 100%;
	flex-direction: row;
	margin-bottom: 12px;
}
.tehnika-grid--list .tehnika-card__media {
	flex: 0 0 190px;
	height: 190px;
	margin-bottom: 0;
}
.tehnika-grid--list .tehnika-card__media img { max-height: 190px; }
.tehnika-grid--list .tehnika-card__title { font-size: 18px; }
.tehnika-grid--list .tehnika-card__specs { font-size: 13px; }

@media (max-width: 1200px) {
	.tehnika-grid--list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
	/* На телефоне плитка и список и так в одну колонку — фото оставляем
	   сверху, иначе на карточку не остаётся ширины. */
	/* flex-wrap нужен только в строке — в колонке он разносит содержимое
	   во вторую колонку и карточка вылезает за экран. */
	.tehnika-grid--list .tehnika-card { flex-direction: column; flex-wrap: nowrap; }
	.tehnika-grid--list .tehnika-card__badges { flex-basis: auto; }
	.tehnika-grid--list .tehnika-card__media {
		flex: none;
		width: 100%;
		height: 180px;
		margin-bottom: 16px;
	}
	.catalog-tools { display: none; }
}

/* --- Карта сайта и список разделов с ценами ------------------------------ */
.cat-prices { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 10px; }
.cat-prices li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
	padding: 12px 16px; border-radius: 12px; background: var(--bg-soft); }
.cat-prices a { font-weight: 600; color: var(--dark); }
.cat-prices a:hover { color: var(--accent-deep); }
.cat-prices span { color: var(--muted); font-size: 14px; }

.sitemap-tree h2 { margin: 30px 0 14px; font-size: 22px; }
.sitemap-tree h2:first-child { margin-top: 0; }
.sitemap-tree ul { margin: 0; padding-left: 20px; }
.sitemap-tree li { margin-bottom: 7px; }
.sitemap-tree a { color: var(--dark); }
.sitemap-tree a:hover { color: var(--accent-deep); text-decoration: underline; }
.sitemap-cats > li { margin-bottom: 14px; font-weight: 600; }
.sitemap-cats ul { margin-top: 7px; font-weight: 400; }
.sitemap-items, .sitemap-pages, .sitemap-news { columns: 2; column-gap: 32px; }
.sitemap-items li, .sitemap-pages li, .sitemap-news li { break-inside: avoid; }

@media (max-width: 700px) {
	.sitemap-items, .sitemap-pages, .sitemap-news { columns: 1; }
}