/* =====================================================================
   home-ui.css — унификация UI главной ANDPRO (Stage 4C)
   ФАЗА 1: единые шапки секций + вертикальный ритм.

   Подключать ПОСЛЕ темы (например в local/templates/new после styles.css),
   чтобы оверрайды выигрывали. Эталон — новые ap-home-блоки (28px/800,
   pt24 + mb28). Приводим к нему аспро-блоки: «Выгодные подборки»,
   «База знаний», «Популярные бренды».
   ===================================================================== */

/* --- 1.1 Заголовки секций: 30px/700 → 28px/800 (как у ap-home) --- */
.mainpage-collection__header,
.mainpage-blog__header,
.mainpage-brands__header {
	font-size: clamp(22px, 4vw, 28px) !important; /* 28 на десктопе, 22 на мобайле */
	font-weight: 800 !important;
	line-height: 1.2 !important;
	color: #2c3a47 !important;
	text-align: left !important;
	margin: 0 !important; /* отступ под заголовок даёт __head (pb 16px) */
}

/* --- 1.2 Вертикальный ритм секций: единый (как .ap-home-section) --- */
.mainpage-collection,
.mainpage-blog,
.mainpage-brands {
	padding-top: 24px !important;
	padding-bottom: 0 !important;
	margin: 0 0 28px !important;
}

/* --- 1.3 Мобайл: чуть плотнее --- */
@media (max-width: 640px) {
	.mainpage-collection,
	.mainpage-blog,
	.mainpage-brands {
		padding-top: 20px !important;
		margin-bottom: 22px !important;
	}
}

/* =====================================================================
   ФАЗА 2: карточки и кнопки → системные токены.
   ВАЖНО: всё заскоуплено под блоки главной (.mainpage-collection / .mainpage-blog /
   .mainpage-brands). Классы .catalog-card и .card-btn ОБЩИЕ для всего каталога —
   без скоупа правка ушла бы на весь сайт. Не убирать префиксы секций!
   ===================================================================== */

/* --- 2.1 Карточки товаров в «Выгодных подборках» (radius 10→14 + рамка + видимая тень) --- */
.mainpage-collection .catalog-card[class~="--dop"] {
	background: #fff !important;
	border: 1px solid #dfe3f1 !important;
	border-radius: 14px !important;
	box-shadow: 0 8px 22px rgba(34, 36, 102, .05) !important;
	overflow: hidden !important;
	transition: transform .15s, box-shadow .15s, border-color .15s !important;
}
.mainpage-collection .catalog-card[class~="--dop"]:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 12px 28px rgba(34, 36, 102, .12) !important;
	border-color: #c7ccea !important;
}

/* --- 2.2 Карточки статей «База знаний» (приводим к карточке) --- */
.mainpage-blog .mainpage-blog__article {
	background: #fff !important;
	border: 1px solid #dfe3f1 !important;
	border-radius: 14px !important;
	box-shadow: 0 8px 22px rgba(34, 36, 102, .05) !important;
	overflow: hidden !important;
	transition: transform .15s, box-shadow .15s, border-color .15s !important;
}
.mainpage-blog .mainpage-blog__article:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 12px 28px rgba(34, 36, 102, .12) !important;
	border-color: #c7ccea !important;
}
/* если текст статьи касается рамки — у вложенного контента нет паддинга;
   текст внутри (.mainpage-blog__body) имеет left/bottom padding 0 → задаём отступ ниже */
.mainpage-blog .mainpage-blog__body { padding: 14px !important; }

/* --- 2.3 Кнопка «Купить» в подборках: radius 5→8, тач-таргет 44, акцент-контур --- */
.mainpage-collection .card-btn[class~="--buy"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 44px !important;
	padding: 10px 22px !important;
	border: 1.5px solid #575fcf !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: #575fcf !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	transition: background .15s !important;
}
.mainpage-collection .card-btn[class~="--buy"]:hover { background: #eef0fb !important; }

/* --- 2.4 Логотипы брендов: серые по умолчанию, цвет на hover --- */
.mainpage-brands .mainpage-brands__logo {
	filter: grayscale(1) !important;
	opacity: .7 !important;
	transition: filter .2s, opacity .2s !important;
}
.mainpage-brands .mainpage-brands__link:hover .mainpage-brands__logo {
	filter: grayscale(0) !important;
	opacity: 1 !important;
}

/* =====================================================================
   Фаза 3 (карусели/табы + mobile-first) — реализована НИЖЕ. Фаза 4 (по согласованию): hero-дедуп логотипов брендов; Stage 6 (WebP + preload LCP). */

/* ===== ФАЗА 3: карусели/табы + mobile-first (кросс-браузерно: Chrome/Safari/Firefox/Edge, iOS/Android) ===== */

/* --- 3.1 Стрелки каруселей (подборки/база знаний/бренды): единый акцент + чёткость + тач-таргет --- */
.mainpage-collection .dopitem_prev, .mainpage-collection .dopitem_next,
.mainpage-blog .slider_prev, .mainpage-blog .slider_next,
.mainpage-brands .brands_prev, .mainpage-brands .brands_next {
	width: 44px !important; height: 44px !important;
	display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important;
	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center !important;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center !important;
	border: 1px solid #dfe3f1 !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: #575fcf !important;
	-webkit-box-shadow: 0 4px 12px rgba(34, 36, 102, .08) !important; box-shadow: 0 4px 12px rgba(34, 36, 102, .08) !important;
	-webkit-transition: background .15s, border-color .15s; -o-transition: background .15s, border-color .15s; transition: background .15s, border-color .15s;
	cursor: pointer;
}
.mainpage-collection .dopitem_prev:hover, .mainpage-collection .dopitem_next:hover,
.mainpage-blog .slider_prev:hover, .mainpage-blog .slider_next:hover,
.mainpage-brands .brands_prev:hover, .mainpage-brands .brands_next:hover {
	background: #eef0fb !important; border-color: #c7ccea !important;
}
/* иконки-шевроны внутри (SVG на currentColor) */
.mainpage-collection .dopitem_prev svg, .mainpage-collection .dopitem_next svg,
.mainpage-blog .slider_prev svg, .mainpage-blog .slider_next svg,
.mainpage-brands .brands_prev svg, .mainpage-brands .brands_next svg { fill: currentColor; stroke: currentColor; }

/* --- 3.2 Табы подборок: горизонтальный скролл + тач-таргеты (mobile-first) --- */
.itempage-dopitem__tabs {
	display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important;
	-ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important;
	gap: 8px !important;
	overflow-x: auto !important; overflow-y: hidden !important;
	-webkit-overflow-scrolling: touch !important;   /* iOS-инерция */
	scroll-snap-type: x proximity;
	scrollbar-width: none;                           /* Firefox */
	-ms-overflow-style: none;                        /* старый Edge/IE */
	-webkit-tap-highlight-color: transparent;
}
.itempage-dopitem__tabs::-webkit-scrollbar { display: none; }  /* Chrome/Safari/Edge/Android */
.itempage-dopitem__tabs li {
	-webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto !important;
	scroll-snap-align: start;
}
.itempage-dopitem__tab-link {
	display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center !important;
	min-height: 44px !important;                      /* тач-таргет (Apple HIG 44 / Material 48) */
	padding: 10px 14px !important;
	white-space: nowrap !important;
	-webkit-tap-highlight-color: transparent;
}

/* --- 3.3 Мобайл --- */
@media (max-width: 640px) {
	.itempage-dopitem__tabs { gap: 6px !important; }
	/* стрелки оставлены (кнопки + свайп tns); если мешают на узких экранах — скрыть:
	   .mainpage-collection .dopitem_prev, .mainpage-collection .dopitem_next,
	   .mainpage-blog .slider_prev, .mainpage-blog .slider_next,
	   .mainpage-brands .brands_prev, .mainpage-brands .brands_next { display:none !important; } */
}

/* ===== ФАЗА 4: hero-дедуп брендов + Stage 6 LCP (CSS-часть; остальное — в doc) ===== */

/* --- 4.1 Hero-дедуп: прячем перечисление брендов (дублирует блок «Популярные бренды»),
        оставляем строку доверия + ссылку «500+ брендов →».
        Чистая формулировка (без «: и …») — опц. правка разметки в index.php, см. doc. --- */
.ap-tophero-brands b { display: none !important; }

/* --- 4.2 Stage 6: WebP-фон героя — АКТИВИРОВАТЬ ПОСЛЕ создания .webp (см. doc, шаги 1–2).
        image-set сам выберет webp в поддерживающих браузерах (все актуальные), jpg — фолбэк.
        Пока .webp нет — НЕ раскомментировать (иначе webp 404 без отката к jpg).
.ap-tophero__media {
	background-image: -webkit-image-set(url("/upload/andpro/home-hero-infra.webp") type("image/webp"), url("/upload/andpro/home-hero-infra.jpg") type("image/jpeg")) !important;
	background-image: image-set(url("/upload/andpro/home-hero-infra.webp") type("image/webp"), url("/upload/andpro/home-hero-infra.jpg") type("image/jpeg")) !important;
}
   --- */

/* служебный хвост
   ===================================================================== */


/* STAGE 6 ACTIVE HERO WEBP (2026-06) */
.ap-tophero__media{background-image:-webkit-image-set(url("/upload/andpro/home-hero-infra.webp") type("image/webp"),url("/upload/andpro/home-hero-infra.jpg") type("image/jpeg")) !important;background-image:image-set(url("/upload/andpro/home-hero-infra.webp") type("image/webp"),url("/upload/andpro/home-hero-infra.jpg") type("image/jpeg")) !important;}