/* Класс `.cat_hero` продублирован намеренно: правила темы и `gw5-cat.css`
   написаны через родителя (`.page_category .cat_hero ...`), это три класса, и
   одиночный селектор им проигрывает при любом порядке подключения. Замер
   показал это прямо: крошки оставались по центру, чипсы — контурными,
   подзаголовок — крупным белым.

   ── Герой страницы категории. Эталон `out/ref_cathero.png`, вырезан из узла
      769:35606 в полном разрешении.

   Макет нарисован на 1920, контентная колонка в нём 1180px, у нас та же
   колонка 1180px при 1440 — но масштаб шрифтов и плиток пересчитан от ширины
   полотна, коэффициент 0.75. */

.cat_hero.cat_hero.cat_hero {
	/* Figma upper cap 758:32986: gradient #0066B2 → #000F37 (top→bottom brand→navy) */
	background-image: linear-gradient(180deg, #0066B2 0%, #000F37 100%);
}
/* Beat figma-home.css body[class*="product-category"] .cat_hero !important (navy→blue reverse).
   Applies to leaf categories too (body.product-category-20 /uslugi-krasoti/), not only -all. */
body[class*="product-category"] .page_category .cat_hero.cat_hero.cat_hero,
body[class*="product-category"] .cat_hero.cat_hero.cat_hero {
	background: linear-gradient(180deg, #0066B2 0%, #000F37 100%) !important;
	background-image: linear-gradient(180deg, #0066B2 0%, #000F37 100%) !important;
}
/* Figma WEB root /specialists/: tighter popular→first-card pitch — pad-b ~110 + gap −60. */
body.product-category-all .page_category .cat_hero.cat_hero.cat_hero {
	padding: 40px 0 110px !important;
	margin-bottom: -60px !important;
}

/* Контентная колонка hero = 1180 (Figma upper cap pad 370+370 на 1920).
   Bootstrap .container даёт 15px pad → 1150; обнуляем внутри hero. */
.cat_hero.cat_hero > .container {
	max-width: 1180px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

/* Крошки: в макете 763:29533 слева, 14/400, белые. */
.cat_hero.cat_hero .breadcrumb,
.cat_hero.cat_hero .breadcrumb * {
	text-transform: none;
}
.cat_hero.cat_hero .breadcrumb {
	justify-content: flex-start;
	margin: 0 0 40px;
	font-size: 14px;
	line-height: 18px;
}
.cat_hero.cat_hero .breadcrumb a,
.cat_hero.cat_hero .breadcrumb li {
	color: rgba(255, 255, 255, 0.9);
}
/* Имена подкатегорий в базе строчные («визажисты»). Поднимаем только
   первую букву крошки, не каждое слово — иначе «Услуги Красоты». */
.cat_hero.cat_hero .breadcrumb li::first-letter {
	text-transform: uppercase;
}

/* Полный H1 раздела — крупно, как в макете. */
.cat_hero.cat_hero .cat_hero__name { display: none; }
.cat_hero.cat_hero h1.home-widget-title {
	font-size: 48px;
	line-height: 1.15;
	font-weight: 300;
	color: #fff;
	text-align: center;
	max-width: 1180px;
	margin: 0 auto 28px;
}

/* ── Плитка + чипсы: Figma 763:29533 / Catalog2 hero ──
   Design: photo soft-fades (засветляется) into hero blue on the right,
   then neat icon-pills — NO hard dual-panel (pic box + chips card).
   Was: hard 280×208 rect + rgba panel → «криво», photo not blending. */
.cat_hero.cat_hero .cat_hero__row {
	display: flex;
	align-items: center;
	gap: 0;
	max-width: 1180px;
	margin: 0 auto;
	position: relative;
}
.cat_hero.cat_hero .cat_hero__pic {
	position: relative;
	flex: 0 0 auto;
	/* Wider canvas so fade has room before chips sit on the blue */
	width: 340px;
	height: 230px;
	margin-right: -48px; /* chips start over the soft edge (Figma overlap) */
	overflow: hidden;
	/* only soft left rounding — hard r10 box made photo look like a card island */
	border-radius: 12px 0 0 12px;
	/* soft right + mild bottom fade → hero gradient shows through */
	-webkit-mask-image: linear-gradient(
		100deg,
		#000 0%,
		#000 36%,
		rgba(0, 0, 0, 0.92) 48%,
		rgba(0, 0, 0, 0.55) 68%,
		rgba(0, 0, 0, 0.18) 86%,
		transparent 100%
	);
	mask-image: linear-gradient(
		100deg,
		#000 0%,
		#000 36%,
		rgba(0, 0, 0, 0.92) 48%,
		rgba(0, 0, 0, 0.55) 68%,
		rgba(0, 0, 0, 0.18) 86%,
		transparent 100%
	);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	z-index: 1;
}
.cat_hero.cat_hero .cat_hero__pic::after {
	/* cool blue wash so photo color-matches hero (not raw photo island) */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		/* right wash into hero navy/blue */
		linear-gradient(
			100deg,
			rgba(0, 55, 130, 0.08) 0%,
			rgba(0, 70, 150, 0.18) 38%,
			rgba(0, 70, 150, 0.55) 70%,
			rgba(0, 40, 110, 0.88) 100%
		),
		/* subtle top/bottom so hard image edges don't read as a box */
		linear-gradient(
			180deg,
			rgba(0, 55, 130, 0.22) 0%,
			transparent 18%,
			transparent 78%,
			rgba(0, 30, 90, 0.35) 100%
		);
	border-radius: inherit;
}
.cat_hero.cat_hero .cat_hero__pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center left;
	display: block;
	/* cool grade — closer to Figma treated photo */
	filter: saturate(0.88) brightness(0.94) contrast(1.04);
}

/* Чипсы float on hero blue — no panel plate (Figma 761:28096 pills).
   Compact h40–44, Icon 32–36 + label, gap 10–12. */
.cat_hero.cat_hero .like_tabs_links {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	justify-content: flex-start;
	gap: 10px 12px;
	margin: 0;
	padding: 4px 0 4px 8px;
	list-style: none;
	min-height: 0;
	box-sizing: border-box;
	/* kill hard plate that made photo+chips look like two broken cards */
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	position: relative;
	z-index: 2;
}
.cat_hero.cat_hero .like_tabs_links li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
}
.cat_hero.cat_hero .like_tabs_links li a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 3px 14px 3px 3px;
	font-size: 14px;
	line-height: 1;
	font-weight: 400;
	color: #fff;
	background: #0066B2;
	border: 0;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	box-sizing: border-box;
	box-shadow: 0 2px 8px rgba(0, 20, 60, 0.16);
	transition: background 0.15s ease, transform 0.15s ease;
}
/* Icon 32×32 — Figma compact chip glyph (white line icons on blue pill) */
.cat_hero.cat_hero .like_tabs_links li a .cat_hero__chip-icon,
.cat_hero.cat_hero .like_tabs_links li a img {
	width: 32px !important;
	height: 32px !important;
	flex: 0 0 32px;
	object-fit: contain;
	display: block;
	border-radius: 50%;
	/* monochrome white so colored PNGs read as Figma vectors on #0066B2 */
	filter: brightness(0) invert(1);
	opacity: 0.95;
	background: transparent;
}
.cat_hero.cat_hero .like_tabs_links li a .cat_hero__chip-label {
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
	color: #fff;
	letter-spacing: 0.01em;
}
.cat_hero.cat_hero .like_tabs_links li a[data-icon]::before {
	content: none;
	display: none;
}
.cat_hero.cat_hero .like_tabs_links li a:hover,
.cat_hero.cat_hero .like_tabs_links li.active a,
body[class*="product-category"] .page_category .cat_hero.cat_hero .like_tabs_links li a:hover,
body[class*="product-category"] .page_category .cat_hero.cat_hero .like_tabs_links li.active a {
	background: #fff;
	border-color: #fff;
	color: #0066B2;
	transform: translateY(-1px);
}
.cat_hero.cat_hero .like_tabs_links li a:hover .cat_hero__chip-label,
.cat_hero.cat_hero .like_tabs_links li.active a .cat_hero__chip-label,
body[class*="product-category"] .page_category .cat_hero.cat_hero .like_tabs_links li a:hover .cat_hero__chip-label,
body[class*="product-category"] .page_category .cat_hero.cat_hero .like_tabs_links li.active a .cat_hero__chip-label {
	color: #0066B2;
}
.cat_hero.cat_hero .like_tabs_links li a:hover .cat_hero__chip-icon,
.cat_hero.cat_hero .like_tabs_links li a:hover img,
.cat_hero.cat_hero .like_tabs_links li.active a .cat_hero__chip-icon,
.cat_hero.cat_hero .like_tabs_links li.active a img,
body[class*="product-category"] .page_category .cat_hero.cat_hero .like_tabs_links li a:hover img,
body[class*="product-category"] .page_category .cat_hero.cat_hero .like_tabs_links li.active a img {
	filter: none;
	opacity: 1;
}

/* ── Поиск: Figma Search group 980 (filter 44 + AI pill once markup exists) ── */
.cat_hero.cat_hero .cat_hero__srch {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 980px;
	margin: 40px auto 0;
	padding: 6px;
	background: #fff;
	border-radius: 10px;
	position: relative;
}
/* Filter control slot (Figma 44×44 r8) — harmless until tpl adds .cat_hero__filter */
.cat_hero.cat_hero .cat_hero__filter {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	border: 1px solid #E3E8EF;
	background: #fff;
	color: #5B6D9C;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	box-sizing: border-box;
}
/* AI wrap sits under search (Catalog2 + leaf categories — Figma AI pill) */
.cat_hero.cat_hero .cat_hero__ai-wrap {
	max-width: 980px;
	width: 100%;
	margin: 8px auto 0;
	text-align: right;
	position: relative;
	z-index: 2;
}
.cat_hero.cat_hero .cat_hero__ai {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	padding: 0 14px;
	border-radius: 9999px;
	background: #fff;
	border: 1px solid #FF6C1D;
	color: #0066B2;
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	cursor: pointer;
	box-sizing: border-box;
}
.cat_hero.cat_hero .cat_hero__ai:hover { background: #fff5ef; }
.cat_hero.cat_hero .cat_hero__ai[aria-pressed="true"] {
	background: #fff5ef;
	box-shadow: 0 0 0 1.5px #FF6C1D;
}
/* AI panel (shared with category_all markup) */
.cat_hero.cat_hero .cat_hero-ai-panel {
	max-width: 980px;
	width: 100%;
	margin: 12px auto 0;
	padding: 16px 20px;
	background: rgba(255, 255, 255, 0.96);
	border-radius: 10px;
	box-sizing: border-box;
	color: #0A1F44;
}
.cat_hero.cat_hero .cat_hero-ai-panel[hidden] { display: none !important; }
.cat_hero.cat_hero .cat_hero-ai-panel__title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 500;
	color: #0066B2;
}
.cat_hero.cat_hero .cat_hero-ai-panel__desc {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.4;
	color: #5B6D9C;
}
.cat_hero.cat_hero .cat_hero-ai-panel__form {
	display: flex;
	gap: 8px;
	align-items: center;
}
.cat_hero.cat_hero .cat_hero-ai-panel__input {
	flex: 1 1 auto;
	height: 44px;
	padding: 0 14px;
	border: 1px solid #E3E8EF;
	border-radius: 8px;
	font-size: 15px;
	box-sizing: border-box;
}
.cat_hero.cat_hero .cat_hero-ai-panel__btn {
	flex: 0 0 auto;
	height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 8px;
	background: #0066B2;
	color: #fff;
	font-size: 15px;
	cursor: pointer;
}
.cat_hero.cat_hero .cat_hero__field { flex: 1 1 auto; }
.cat_hero.cat_hero .cat_hero__field input {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	font-size: 15px;
	color: #5B6D9C;
	background: transparent;
	border: 0;
	box-sizing: border-box;
}
.cat_hero.cat_hero .cat_hero__field input:focus { outline: none; }
.cat_hero.cat_hero .cat_hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 24px;
	font-size: 15px;
	color: #fff;
	background: #0B4A8F;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}
.cat_hero.cat_hero .cat_hero__btn:hover { background: #0066B2; }

/* ── Узкие экраны ────────────────────────────────────────────────────────
   Фотография уходит наверх, чипсы становятся горизонтальной лентой. */
@media (max-width: 900px) {
	.cat_hero.cat_hero .cat_hero__row { flex-direction: column; gap: 16px; align-items: stretch; }
	.cat_hero.cat_hero .cat_hero__pic {
		width: 100%;
		height: 160px;
		margin-right: 0;
		border-radius: 10px;
		/* bottom fade on stacked mobile instead of right */
		-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
	}
	.cat_hero.cat_hero .cat_hero__pic::after {
		background: linear-gradient(
			180deg,
			rgba(0, 40, 100, 0.1) 0%,
			rgba(0, 55, 130, 0.35) 60%,
			rgba(0, 50, 120, 0.7) 100%
		);
	}
	.cat_hero.cat_hero .like_tabs_links { padding: 0; justify-content: center; }
}
@media (max-width: 640px) {
	.cat_hero.cat_hero h1.home-widget-title { font-size: 26px !important; line-height: 1.2 !important; }
	.cat_hero.cat_hero .like_tabs_links li a { height: 36px; padding: 2px 12px 2px 2px; font-size: 13px; }
	.cat_hero.cat_hero .like_tabs_links li a .cat_hero__chip-icon,
	.cat_hero.cat_hero .like_tabs_links li a img { width: 28px !important; height: 28px !important; flex: 0 0 28px; }
	.cat_hero.cat_hero .like_tabs_links li a .cat_hero__chip-label { font-size: 13px; }
	.cat_hero.cat_hero .cat_hero__srch { flex-wrap: wrap; }
	.cat_hero.cat_hero .cat_hero__btn { width: 100%; justify-content: center; }
}

.cat_hero.cat_hero h1.home-widget-title {
	font-size: 48px !important;
	line-height: 1.15 !important;
	font-weight: 300 !important;
	color: #fff !important;
	max-width: 1180px !important;
	width: 100% !important;
	margin: 0 auto 28px !important;
}
.cat_hero.cat_hero .cat_hero__pic img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
}
/* Beat figma-redesign / legacy plate behind chips */
.page_category .cat_hero.cat_hero .like_tabs_links,
body[class*="product-category"] .cat_hero.cat_hero .like_tabs_links {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}
/* Подписи чипсов приходили в нижнем регистре, в макете обычный. */
.cat_hero.cat_hero .like_tabs_links li,
.cat_hero.cat_hero .like_tabs_links li a {
	text-transform: none !important;
}

/* Названия подкатегорий лежат в базе строчными («бьюти школы»), в макете они
   с заглавной. Сами данные не трогаем — поднимаем только первую букву. */
.cat_hero.cat_hero .like_tabs_links li a::first-letter { text-transform: uppercase; }

/* Figma upper cap: pad T40 B110; parent gap −60 over catalog (root) */
.page_category .cat_hero.cat_hero.cat_hero {
	padding: 40px 0 110px;
	margin-bottom: -60px;
}
/* non-root category pages keep deeper pad if they need chip room */
body[class*="product-category"]:not(.product-category-all) .page_category .cat_hero.cat_hero.cat_hero {
	padding: 40px 0 180px;
	margin-bottom: -100px;
}
/* Empty leaf: no cards to tuck under the hero, so the CMS empty-copy
   (h3 «Мы ищем специалистов…») must not sit on the navy. */
body[class*="product-category"] .page_category.page_category--empty .cat_hero.cat_hero.cat_hero,
body[class*="product-category"] .page_category--empty .cat_hero.cat_hero.cat_hero {
	padding: 40px 0 48px !important;
	margin-bottom: 0 !important;
}
body[class*="product-category"] .page_category--empty .category_description {
	margin-top: 40px;
	padding: 0 0 48px;
	color: #5B6D9C;
	font-size: 16px;
	line-height: 1.5;
	position: relative;
	z-index: 1;
	background: #fff;
}
body[class*="product-category"] .page_category--empty .category_description h3 {
	color: #000F38;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.3;
	margin: 0 0 12px;
}
body[class*="product-category"] .page_category--empty .category_description p {
	margin: 0 0 12px;
}
@media (max-width: 767px) {
	body[class*="product-category"] .page_category.page_category--empty .cat_hero.cat_hero.cat_hero,
	body[class*="product-category"] .page_category--empty .cat_hero.cat_hero.cat_hero {
		padding: 24px 0 28px !important;
	}
	body[class*="product-category"] .page_category--empty .category_description {
		margin-top: 24px;
		padding: 0 16px 32px;
	}
	body[class*="product-category"] .page_category--empty .category_description h3 {
		font-size: 20px;
	}
}
/* Catalog root only: hero overlaps first cards by 100px (Figma parent gap −100) */
body.product-category-all .page_category > .container:nth-of-type(2),
body.product-category-all .page_category .items-home-categories {
	position: relative;
	z-index: 1;
}
body.product-category-all .page_category {
	padding-top: 0;
}

@media (max-width: 1024px) {
	.cat_hero.cat_hero h1.home-widget-title {
		font-size: 36px !important;
		line-height: 1.15 !important;
	}
	.cat_hero.cat_hero .cat_hero__pic {
		width: 240px;
		height: 170px;
		margin-right: -24px;
		border-radius: 10px 0 0 10px;
	}
	.cat_hero.cat_hero .like_tabs_links {
		min-height: 0;
		padding: 0 0 0 4px;
		background: transparent !important;
	}
	.cat_hero.cat_hero .like_tabs_links li a {
		height: 36px;
		font-size: 13px;
		padding: 2px 12px 2px 2px;
	}
	.cat_hero.cat_hero .like_tabs_links li a .cat_hero__chip-icon,
	.cat_hero.cat_hero .like_tabs_links li a img {
		width: 28px !important;
		height: 28px !important;
		flex: 0 0 28px;
	}
	.cat_hero.cat_hero .like_tabs_links li a .cat_hero__chip-label {
		font-size: 13px;
		line-height: 16px;
	}
}

/* Phone/narrow: the 1024px block above wins over the 900px stack and
   paints a 240×170 left tile. Category photos are wide banners
   (e.g. 730×280), so that tile crops them to a face on the left.
   Show the whole picture, full width, above the chips. */
@media (max-width: 900px) {
	.cat_hero.cat_hero .cat_hero__row {
		flex-direction: column;
		align-items: stretch;
	}
	.cat_hero.cat_hero .cat_hero__pic {
		width: 100%;
		height: auto;
		margin: 0 0 12px;
		border-radius: 12px;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.cat_hero.cat_hero .cat_hero__pic::after {
		display: none;
	}
	.cat_hero.cat_hero .cat_hero__pic img {
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		object-fit: contain !important;
		object-position: center center !important;
	}
	/* Крошки упирались в край экрана и обрезались вкладкой рассылки:
	   «Главная / Каталог специалистов / Услуги крас…». Отступ справа
	   держит текст левее вкладки, длинный путь переносится, а не режется. */
	.cat_hero.cat_hero .breadcrumb {
		margin: 0 0 16px;
		padding: 0 56px 0 16px;
		flex-wrap: wrap;
		white-space: normal;
		overflow: visible;
		row-gap: 2px;
		font-size: 13px;
		line-height: 18px;
	}
}

/* ── Business leaf /shopping/ (product-category-291) — Figma 852:45759 WEB ──
   Short hero: title + subtitle only, no search. Gradient brand→navy
   (beats figma-home body[class*="product-category"] inverted navy→blue). */
body.product-category-291 .page_category .cat_hero.cat_hero.cat_hero,
body.product-category-291 .cat_hero.cat_hero.cat_hero {
	background: linear-gradient(180deg, #0066B2 0%, #000F37 100%) !important;
	background-image: linear-gradient(180deg, #0066B2 0%, #000F37 100%) !important;
}
/* Desktop/tablet: compact upper cap (mobile ≤860 handled in gw8-catmob) */
@media (min-width: 861px) {
	body.product-category-291 .page_category .cat_hero.cat_hero.cat_hero,
	body.product-category-291 .cat_hero.cat_hero.cat_hero {
		padding: 40px 0 120px !important;
		margin-bottom: -80px !important;
		min-height: 0 !important;
	}
	body.product-category-291 .cat_hero__srch {
		display: none !important;
	}
	body.product-category-291 .cat_hero.cat_hero .cat_hero__name { display: none; }
	body.product-category-291 .cat_hero.cat_hero h1.home-widget-title {
		font-size: 48px !important;
		line-height: 1.15 !important;
		font-weight: 300 !important;
		opacity: 1;
		margin: 0 auto 28px !important;
		max-width: 1180px !important;
	}
	body.product-category-291 .cat_hero.cat_hero .breadcrumb {
		justify-content: flex-start;
		margin: 0 0 32px;
		font-size: 14px;
	}
	/* Figma 2-level «Главная / Магазины и шоппинг» — hide mid «Каталог специалистов» */
	body.product-category-291 .cat_hero .breadcrumb li:nth-child(2) {
		display: none !important;
	}
}

/* ── /search/ hero bar = Catalog2 Title and search 980×84 (763:29543)
   Loads last so it beats gw12 720px bar and figma-home underline/wrap.
   Full-bleed 1180 looked like a thin stretched strip. */
body.product-search .page_search .cat_hero.cat_hero .cat_hero__srch,
body.product-search .cat_hero.cat_hero .cat_hero__srch {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 10px !important;
	max-width: 980px !important;
	width: 100% !important;
	height: 84px !important;
	box-sizing: border-box !important;
	margin: 8px auto 0 !important;
	padding: 16px 16px 12px 8px !important;
	background: linear-gradient(180deg, #FFFFFF 0%, #F1F3F5 100%) !important;
	border: 1px solid #FFFFFF !important;
	border-radius: 6px !important;
	box-shadow: 0 5px 20px rgba(193, 200, 218, 0.25);
}
body.product-search .cat_hero.cat_hero .cat_hero__field {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	background: transparent !important;
	padding: 0 8px !important;
	border-radius: 0 !important;
}
body.product-search .cat_hero.cat_hero .cat_hero__field input {
	width: 100% !important;
	height: 56px !important;
	border: 0 !important;
	border-bottom: 0 !important;
	background: none !important;
	padding: 0 !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	color: #2E437B !important;
	box-shadow: none !important;
}
body.product-search .cat_hero.cat_hero .cat_hero__field input::placeholder {
	color: #96A1BD !important;
	font-size: 20px !important;
	opacity: 1;
}
body.product-search .cat_hero.cat_hero .cat_hero__btn {
	flex: 0 0 auto !important;
	width: 142px !important;
	min-width: 142px !important;
	max-width: 142px !important;
	height: 56px !important;
	padding: 0 16px !important;
	border: 1.3px solid #FFFFFF !important;
	border-radius: 6px !important;
	background: linear-gradient(180deg, #2E437B 0%, #0066B2 100%) !important;
	color: #fff !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	gap: 8px !important;
}
body.product-search .cat_hero.cat_hero .cat_hero__btn:hover {
	background: linear-gradient(180deg, #243562 0%, #00507F 100%) !important;
}
body.product-search .cat_hero.cat_hero .cat_hero__settings {
	flex: 0 0 44px !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 8px !important;
	border: 1px solid #E3E8EF !important;
	background: #fff !important;
	color: #5B6D9C !important;
}
body.product-search .cat_hero.cat_hero .cat_hero__ai-wrap {
	max-width: 980px !important;
	width: 100% !important;
	margin: 8px auto 0 !important;
	text-align: right !important;
}
@media (max-width: 860px) {
	body.product-search .page_search .cat_hero.cat_hero .cat_hero__srch,
	body.product-search .cat_hero.cat_hero .cat_hero__srch {
		height: auto !important;
		min-height: 56px;
		padding: 8px !important;
	}
	body.product-search .cat_hero.cat_hero .cat_hero__field input {
		height: 44px !important;
		font-size: 16px !important;
	}
	body.product-search .cat_hero.cat_hero .cat_hero__btn {
		width: 44px !important;
		min-width: 44px !important;
		max-width: 44px !important;
		height: 44px !important;
		padding: 0 !important;
		font-size: 0 !important;
		border-radius: 50% !important;
	}
}