/* Start:/local/templates/dresscodeV2/news-page.css?17901034604930*/
/**
 * Стили страницы списка новостей (/news/) по Figma-макету "Первый".
 * Подключается только через шаблон компонента news/newsGrid, поэтому
 * не влияет на остальной сайт.
 */

#main {
	background-color: #f9f9f9;
}

#main .limiter::before {
	content: none;
}

.newsPage__limiter {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 20px;
}

.newsHead {
	padding: 40px 0 32px;
}

.newsHead__title {
	margin: 0 0 12px;
	font-family: "Inter", var(--font-family-base);
	font-weight: 600;
	font-size: var(--font-size-h1);
	color: var(--color-text);
}

.newsHead__lead {
	margin: 0 0 28px;
	max-width: 620px;
	font-size: var(--font-size-base);
	line-height: 1.4;
	color: var(--color-text-light);
}

.newsHead__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.newsHead__tab {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 20px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-border);
	background: #fff;
	font-size: var(--font-size-base);
	color: var(--color-text);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}

.newsHead__tab--active {
	border-color: var(--color-brand-green);
	background: var(--color-brand-green);
	color: #fff;
}

.newsGridAjax--loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* ---------- Сетка карточек ---------- */

.newsGrid {
	padding-bottom: 56px;
}

.newsGrid__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0 0 40px;
}

.newsCard {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--radius-card);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}

.newsCard__picture {
	position: relative;
	width: 100%;
	aspect-ratio: 380 / 240;
	background-color: var(--color-bg-muted);
	overflow: hidden;
}

.newsCard__picture img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.newsCard__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 24px 24px;
}

.newsCard__date {
	margin: 0 0 10px;
	font-size: var(--font-size-xs);
	font-weight: 600;
	color: var(--color-brand-green);
}

.newsCard__title {
	flex: 1;
	margin: 0 0 16px;
	font-family: "Inter", var(--font-family-base);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	color: var(--color-text);
}

.newsCard__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--font-size-base);
	font-weight: 500;
	color: var(--color-brand-green);
}

.newsCard__more img {
	width: 11px;
}

/* ---------- Промо-плитка ---------- */

.newsPromo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 32px 24px;
	border-radius: var(--radius-card);
	background: linear-gradient(180deg, #eaf8f8, #b9e6e6 160%);
}

.newsPromo__number {
	margin: 0 0 16px;
	font-family: "Inter", var(--font-family-base);
	font-weight: 800;
	font-size: 64px;
	line-height: 1;
	color: var(--color-brand-green);
}

.newsPromo__text {
	margin: 0;
	max-width: 220px;
	font-family: "Inter", var(--font-family-base);
	font-weight: 600;
	font-size: var(--font-size-base);
	color: var(--color-text);
}

@media (max-width: 992px) {
	.newsGrid__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.newsGrid__list {
		grid-template-columns: 1fr;
	}
}

/* ---------- Пагинация ---------- */

.newsPager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.newsPager__circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--color-border);
	color: var(--color-text);
	font-size: var(--font-size-base);
	text-decoration: none;
}

.newsPager__circle--active {
	background: var(--color-brand-green);
	border-color: var(--color-brand-green);
	color: #fff;
}

.newsPager__circle--disabled {
	opacity: 0.4;
	pointer-events: none;
}

.newsPager__circle img {
	width: 8px;
}

.newsPager__circle--prev img {
	transform: scaleX(-1);
}

.newsPager__dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--color-text-muted);
	font-size: var(--font-size-base);
}

.newsPager__next {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 51px;
	margin-left: 10px;
	padding: 0 6px 0 28px;
	border-radius: var(--radius-pill);
	background: var(--color-brand-green);
	color: #fff;
	font-size: var(--font-size-base);
	text-decoration: none;
}

.newsPager__next-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 39px;
	height: 39px;
	border-radius: 50%;
	background: #fff;
	flex-shrink: 0;
}

.newsPager__next-circle img {
	width: 8px;
}

/* End */


/* Start:/local/templates/dresscodeV2/news-detail.css?179122415019334*/
/**
 * Стили детальной страницы новости (/news/<code>/) по Figma-макету "Первый"
 * (файл uRTAAXySW7VCmjiTrGR53m, node 70:268). Подключается только через
 * шаблон компонента news.detail/newsGrid, поэтому не влияет на остальной
 * сайт. Ширина и фон страницы — из news-page.css (newsPage__limiter,
 * #main .limiter).
 */

.articleWrap {
	padding: 40px 0 64px;
	font-family: "Inter", var(--font-family-base);
	overflow-x: hidden;
}

/* ---------- Шапка статьи ---------- */

.articleHead {
	margin-bottom: 28px;
}

.articleHead__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}

.articleBreadcrumbs {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 12px;
	color: var(--mpk-breadcrumb-color, #02ab26);
}

.articleBreadcrumbs a {
	color: var(--mpk-breadcrumb-color, #02ab26);
	text-decoration: none;
}

.articleBreadcrumbs a:hover,
.articleBreadcrumbs a:focus-visible {
	color: #008b1d;
	text-decoration: underline;
}

.articleBreadcrumbs > :not(:first-child)::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 9px;
	margin: 0 10px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='9' viewBox='0 0 5 9'%3E%3Cpath d='M0.5 0.5 4.5 4.5 0.5 8.5' fill='none' stroke='%2302AB26' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	vertical-align: -1px;
}

.articleHead__date {
	flex: 0 0 auto;
	margin: 0;
	font-size: var(--font-size-xs);
	color: var(--color-brand-green);
	white-space: nowrap;
}

.articleHead__row {
	display: grid;
	grid-template-columns: 1fr 580px;
	align-items: start;
	gap: 57px;
	min-width: 0;
}

.articleHead__col {
	min-width: 0;
}

.articleHead__title {
	margin: 0 0 16px;
	font-family: "Inter", var(--font-family-base);
	font-weight: 600;
	font-size: var(--font-size-h1);
	line-height: 1.25;
	color: var(--color-text);
}

.articleHead__lead {
	margin: 0;
	font-size: 18px;
	line-height: 1.25;
	color: var(--color-text);
}

.articleHead__picture {
	overflow: hidden;
	border-radius: var(--radius-card);
	aspect-ratio: 580 / 391;
}

.articleHead__picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Тело статьи ---------- */

.articleBody {
	font-size: var(--font-size-base);
	line-height: 1.25;
	color: var(--color-text);
	overflow-wrap: break-word;
}

.articleBody p {
	margin: 0 0 20px;
}

.articleBody h2,
.articleBody .h2 {
	margin: 36px 0 18px;
	font-family: "Inter", var(--font-family-base);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.25;
	color: var(--color-text);
}

.articleBody h3,
.articleBody .h3 {
	margin: 0 0 10px;
	font-family: "Inter", var(--font-family-base);
	font-weight: 600;
	font-size: 18px;
	color: var(--color-text);
}

.articleBody ul,
.articleBody ol {
	margin: 0 0 20px;
	padding-left: 21px;
}

.articleBody li {
	margin-bottom: 12px;
}

.articleBody a {
	color: var(--color-brand-green);
}

.articleBody img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-card);
}

/* ---------- Сетка "зон"/пунктов (3 карточки) ---------- */

.articleGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	margin: 0 0 20px;
}

.articleGrid__item {
	padding: 32px 40px;
	border-radius: var(--radius-card);
	background: #fff;
	border: 0.7px solid var(--color-border);
}

.articleGrid__title {
	margin: 0 0 12px;
	font-family: "Inter", var(--font-family-base);
	font-weight: 600;
	font-size: 18px;
	color: var(--color-text);
}

.articleGrid__text {
	margin: 0;
	font-size: var(--font-size-base);
	line-height: 1.25;
	color: var(--color-text);
}

/* ---------- Серая заметка ---------- */

.articleNote {
	position: relative;
	margin: 0 0 20px;
	padding: 34px 44px;
	border-radius: var(--radius-card);
	overflow: hidden;
	background: linear-gradient(180deg, rgba(217, 217, 217, 0.19), #d9d9d9);
}

.articleNote__title {
	margin: 0 0 12px;
	font-family: "Inter", var(--font-family-base);
	font-weight: 600;
	font-size: 18px;
	color: var(--color-text);
}

.articleNote p:last-child {
	margin-bottom: 0;
}

/* ---------- Зелёный итог ---------- */

.articleSummary {
	position: relative;
	margin: 0 0 20px;
	padding: 34px 44px;
	border-radius: var(--radius-card);
	overflow: hidden;
}

.articleSummary::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.3;
	background: linear-gradient(180deg, #ebf8ed, #02ab26);
}

.articleSummary__title,
.articleSummary p {
	position: relative;
	z-index: 1;
}

.articleSummary__title {
	margin: 0 0 12px;
	font-family: "Inter", var(--font-family-base);
	font-weight: 600;
	font-size: 18px;
	color: var(--color-text);
}

.articleSummary p:last-child {
	margin-bottom: 0;
}

/* ---------- Чек-лист + тизер с контактами (2 колонки) ---------- */

.articleSplit {
	display: grid;
	grid-template-columns: 483px 1fr;
	gap: 96px;
	align-items: start;
	margin: 0 0 20px;
	min-width: 0;
}

.articleSplit__content {
	min-width: 0;
}

.articleSplit__content ul {
	margin: 0;
}

.articleCta {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: 372px;
	padding: 40px;
	border-radius: var(--radius-card);
	overflow: hidden;
	background: #fff;
	/*
	 * В Figma (узел 83:4182) у карточки нет рамки — вместо неё сплошной
	 * бирюзовый прямоугольник (83:4155) того же размера, но на 5px выше,
	 * выступающий из-под белой карточки снизу. Это и есть "тень": не
	 * blur, а плоский цветной офсет — box-shadow с нулевым blur/spread
	 * повторяет форму карточки (тот же border-radius), поэтому даёт
	 * ровно такой же эффект.
	 */
	box-shadow: 0 5px 0 0 var(--color-brand-teal-dark);
}

.articleCta__content {
	position: relative;
	z-index: 1;
	width: 100%;
}

/*
 * Ширины/отступы ниже сверены с Figma (узел 83:4189/83:4183/83:4184,
 * карточка 83:4182 580×335): title/text/note занимают всю ширину карточки
 * за вычетом паддинга (~500px), а не произвольные 324–332px — на таком
 * узком max-width заголовок и текст переносились не там, где в макете.
 */
.articleCta__title {
	margin: 0 0 24px;
	font-family: "Inter", var(--font-family-base);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.25;
	color: var(--color-text);
}

.articleCta__text {
	margin: 0 0 24px;
	font-size: var(--font-size-base);
	line-height: 1.25;
	color: var(--color-text);
}

.articleCta__note {
	margin: 0;
	padding-top: 12px;
	font-size: var(--font-size-base);
	line-height: 1.25;
	color: var(--color-text);
}

.articleCta__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.articleBody .articleCta__contact {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 51px;
	padding: 0 24px;
	border-radius: var(--radius-pill);
	border: 2px solid var(--color-brand-teal-dark);
	background: transparent;
	font-family: "Inter", var(--font-family-base);
	font-weight: 600;
	font-size: 16px;
	color: var(--color-brand-teal-dark);
	text-decoration: none;
	white-space: nowrap;
}

/* ---------- Карточка раздела и карточки товаров ("Что можно доукомплектовать") ---------- */

.articleProducts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	margin: 0 0 20px;
	min-width: 0;
}

.articleProducts > * {
	min-width: 0;
}

.articleSectionCard {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	min-height: 358px;
	padding: 24px;
	border-radius: var(--radius-card);
	overflow: hidden;
}

.articleSectionCard::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.33;
	background: linear-gradient(180deg, rgba(42, 191, 209, 0.33), var(--color-brand-cyan));
}

.articleSectionCard__body,
.articleSectionCard__link {
	position: relative;
	z-index: 1;
}

.articleBody .articleSectionCard__title {
	margin: 0 0 12px;
	font-family: "Inter", var(--font-family-base);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.25;
	color: var(--color-text);
}

.articleBody .articleSectionCard__text {
	margin: 0;
	font-size: var(--font-size-base);
	line-height: 1.25;
	color: var(--color-text);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}

/*
 * Двойной селектор (а не просто .articleSectionCard__link) — не косметика:
 * .articleBody a (выше по файлу, color: var(--color-brand-green)) имеет
 * специфичность 0,2,0, а одноклассовый .articleSectionCard__link — только
 * 0,1,0 и проигрывал её независимо от порядка в файле: белый текст на
 * зелёной кнопке становился зелёным на зелёном и визуально пропадал.
 */
.articleSectionCard .articleSectionCard__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 51px;
	padding: 0 24px;
	border-radius: var(--radius-pill);
	background: var(--color-brand-green);
	font-family: "Inter", var(--font-family-base);
	font-size: 14px;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.articleSectionCard__link::after {
	content: "→";
}

/*
 * Карточки товаров в статье — настоящие карточки каталога (news.detail/newsGrid
 * подставляет вместо маркера компонент dresscode:catalog.section, шаблон squares),
 * поэтому их оформление берётся из каталога (catalog.item/.default/style.css, на
 * #catalogSection), а здесь только встраиваем их в сетку статьи:
 *  - каждая карточка приходит в своей обёртке #catalogSection — это и есть ячейка сетки;
 *  - в каталоге карточка — треть ряда с отступом справа/снизу и высотой 370px, здесь
 *    ширину задаёт сетка .articleProducts, отступов нет, высота 358px (как у карточки
 *    раздела слева; 370 минус нижний отступ, который в каталоге отдан под зазор);
 *  - пустой .clear после ряда карточек не должен занимать место.
 * "body " и #catalogSection — чтобы перебить правила каталога
 * (body #catalogSection .product{width:33.3333%;height:370px;padding:...}).
 */
.articleProducts > #catalogSection {
	min-width: 0;
}

.articleProducts #catalogSection .items.productList {
	margin: 0;
	padding: 0;
	border: 0;
}

.articleProducts #catalogSection .clear {
	display: none;
}

body .articleProducts #catalogSection .product {
	float: none;
	box-sizing: border-box;
	width: 100%;
	height: 358px;
	margin: 0;
	padding: 0;
	/* Шрифт и интерлиньяж каталога: .articleWrap задаёт Inter, а .articleBody — line-height 1.25,
	   в каталоге же карточка набрана roboto с line-height 1.5 (body темы). */
	font-family: roboto_ltregular, arial, sans-serif;
	line-height: 1.5;
}

/* .articleBody img скругляет все картинки статьи — у фото в карточке каталога скругления нет. */
body .articleProducts #catalogSection .product img {
	border-radius: 0;
}

/*
 * ---------- Карточка готового комплекта ----------
 * news.detail/newsGrid подставляет её вместо абзаца «Для планирования можно посмотреть <ссылка>»
 * (маркер .articleKitCard или старый абзац после «Готовый пример комплектации»): название,
 * описание, группы, число позиций, мозаика из фото товаров комплекта и кнопка.
 * Оформление в духе блока CTA рядом: белая карточка с плоским цветным «офсетом» снизу
 * (у CTA он бирюзовый, у комплекта — зелёный, цвет кнопки). Селекторы с .articleBody —
 * чтобы перебить общие правила тела статьи для p, ul, li, a, img.
 */
.articleKit {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 40px;
	align-items: center;
	box-sizing: border-box;
	margin: 0 0 25px;
	padding: 36px 44px;
	border-radius: var(--radius-card);
	background: #fff;
	box-shadow: 0 5px 0 0 var(--color-brand-green);
}

.articleKit--noPhotos {
	grid-template-columns: minmax(0, 1fr);
}

.articleKit__body {
	min-width: 0;
}

.articleBody .articleKit__eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	background: #ebf8ed;
	font-family: "Inter", var(--font-family-base);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-brand-green);
}

.articleBody .articleKit__title {
	margin: 0 0 12px;
	font-family: "Inter", var(--font-family-base);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.25;
	color: var(--color-text);
}

.articleBody .articleKit__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 0 0 20px;
	font-size: var(--font-size-base);
	line-height: 1.45;
	color: var(--color-text-light);
}

.articleBody .articleKit__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.articleBody .articleKit__chip {
	margin: 0;
	padding: 6px 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-size: 13px;
	line-height: 1.2;
	color: var(--color-text);
}

.articleBody .articleKit__chip--count {
	border-color: transparent;
	background: #ebf8ed;
	font-weight: 600;
	color: var(--color-brand-green);
}

.articleKit__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
}

.articleBody a.articleKit__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	height: 51px;
	padding: 0 28px;
	border-radius: var(--radius-pill);
	background: var(--color-brand-green);
	font-family: "Inter", var(--font-family-base);
	font-size: 14px;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.articleBody a.articleKit__link::after {
	content: "→";
}

.articleBody a.articleKit__link:hover,
.articleBody a.articleKit__link:focus-visible {
	background: #029523;
	color: #fff;
}

.articleBody a.articleKit__photos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	min-width: 0;
	text-decoration: none;
}

.articleKit__photo {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	min-width: 0;
	overflow: hidden;
	border: 1px solid #e6e6e6;
	border-radius: 18px;
	background: #fff;
}

.articleBody .articleKit__photo img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 10px;
	border-radius: 0;
	object-fit: contain;
}

.articleKit__photo--more {
	flex-direction: column;
	gap: 2px;
	background: var(--color-brand-green);
	color: #fff;
	transition: background-color 0.15s ease;
}

.articleKit__photos:hover .articleKit__photo--more,
.articleKit__photos:focus-visible .articleKit__photo--more {
	background: #029523;
}

.articleKit__moreNumber {
	font-family: "Inter", var(--font-family-base);
	font-weight: 600;
	font-size: 30px;
	line-height: 1.1;
}

.articleKit__moreText {
	font-size: 13px;
	line-height: 1.2;
}



@media (max-width: 992px) {
	.articleHead__row {
		grid-template-columns: 1fr;
	}

	.articleHead__picture {
		order: -1;
		aspect-ratio: 16 / 9;
	}

	.articleCta {
		align-items: flex-start;
	}

	.articleCta__title,
	.articleCta__text {
		max-width: none;
	}

	.articleProducts {
		grid-template-columns: repeat(2, 1fr);
	}

	.articleKit {
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: 28px;
		padding: 30px 32px;
	}
}

@media (max-width: 700px) {
	/* Ряд карточек выходит за поля статьи (margin -20px у .articleProducts) — чтобы карточки
	   были такой же ширины, как в каталоге на телефоне; overflow-x:hidden у .articleWrap обрезал
	   их по краям, а горизонтальную прокрутку страницы и так гасит body (overflow-x:hidden). */
	.articleWrap {
		overflow-x: visible;
	}

	.articleGrid {
		grid-template-columns: 1fr;
	}

	.articleSplit {
		grid-template-columns: 1fr;
	}

	.articleHead__title {
		font-size: 26px;
	}

	.articleProducts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		margin-right: -20px;
		margin-left: -20px;
	}

	.articleSectionCard {
		min-height: 420px;
		gap: 12px;
		padding: 16px 14px 14px;
	}

	/* В каталоге на телефоне карточка 420px (в ней «Подробнее» вместо круглой кнопки). */
	body .articleProducts #catalogSection .product {
		height: 420px;
	}

	/* Комплект: фото сверху в ряд, ниже текст; кнопка на всю ширину. */
	.articleKit {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding: 22px 18px 24px;
	}

	.articleBody a.articleKit__photos {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
		order: -1;
	}

	.articleKit__photo {
		border-radius: 12px;
	}

	.articleBody .articleKit__photo img {
		padding: 6px;
	}

	.articleKit__moreNumber {
		font-size: 20px;
	}

	.articleKit__moreText {
		font-size: 11px;
	}

	.articleBody .articleKit__title {
		font-size: 20px;
	}

	.articleBody .articleKit__chips {
		margin-bottom: 20px;
	}

	/* На телефоне — число позиций и две первые группы, остальное делает карточку слишком длинной. */
	.articleBody .articleKit__chip:nth-child(n + 4) {
		display: none;
	}

	.articleBody a.articleKit__link {
		width: 100%;
	}

	.articleBody .articleSectionCard__title {
		font-size: 14px;
	}

	.articleBody .articleSectionCard__text {
		font-size: 13px;
		line-height: 1.3;
	}

	.articleSectionCard .articleSectionCard__link {
		box-sizing: border-box;
		width: 100%;
		height: 30px;
		padding: 0 4px;
		font-size: 11px;
	}

}

@media (max-width: 640px) {
	.articleBreadcrumbs {
		font-size: 11px;
	}
}

/* End */


/* Start:/local/templates/dresscodeV2/shared-cta-block.css?17901034605177*/
/**
 * Общий блок с призывом (цены, зона доставки, форма заявки) — переиспользуется
 * на детальных страницах статей/новостей и товаров. Разметка: local/templates/dresscodeV2/include/article-cta-block.php.
 * Вынесен из news-detail.css в отдельный файл, чтобы подключать без остальных стилей новостей.
 */
/* ---------- Общий блок с призывом внизу статьи (цены, зона доставки, форма) ---------- */

.articleCtaBlock {
	position: relative;
	padding-top: 40px;
	padding-bottom: 64px;
	font-family: "Inter", var(--font-family-base);
}

.articleCtaBlock::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	width: auto;
	margin: 0;
	background: #fff;
	box-shadow: 0 0 0 100vmax #fff;
	clip-path: inset(0 -100vmax);
}

.articleCtaBlock__top {
	display: grid;
	grid-template-columns: 769fr 379fr;
	gap: 15px;
	margin-bottom: 15px;
}

.articleCtaBlock__prices {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 40px 44px;
	border-radius: var(--radius-card);
	overflow: hidden;
	min-width: 0;
}

.articleCtaBlock__prices::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.3;
	background: linear-gradient(180deg, #ebf8ed, #02ab26);
}

.articleCtaBlock__pricesText {
	position: relative;
	z-index: 1;
	max-width: 360px;
}

.articleCtaBlock__pricesTitle {
	margin: 0 0 16px;
	font-family: "Inter", var(--font-family-base);
	font-weight: 600;
	font-size: var(--font-size-h1);
	line-height: 1.2;
	color: var(--color-text);
}

.articleCtaBlock__pricesLead {
	margin: 0;
	font-size: var(--font-size-base);
	line-height: 1.4;
	color: var(--color-text);
}

.articleCtaBlock__pricesImg {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: 180px;
	height: 180px;
	object-fit: contain;
}

.articleCtaBlock__order {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 41px 24px 40px;
	border-radius: var(--radius-card);
	overflow: hidden;
	min-width: 0;
}

.articleCtaBlock__order::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.4;
	background: linear-gradient(180deg, rgba(42, 191, 209, 0.33), var(--color-brand-cyan));
}

.articleCtaBlock__orderLabel {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: var(--font-size-base);
	line-height: 1.25;
	color: var(--color-text);
}

.articleCtaBlock__orderValue {
	position: relative;
	z-index: 1;
	margin: 0 0 18px;
	font-family: "Inter", var(--font-family-base);
	font-weight: 600;
	font-size: var(--font-size-h1);
	line-height: 1.25;
	color: var(--color-text);
}

.articleCtaBlock__orderValue:last-child {
	margin-bottom: 0;
}

.articleCtaBlock__map {
	padding: 35px 38px 40px;
	border-radius: var(--radius-card);
	background: #f9f9f9;
	margin-bottom: 15px;
}

.articleCtaBlock__mapTitle {
	max-width: 700px;
	margin: 0 0 7px;
	font-family: "Inter", var(--font-family-base);
	font-weight: 600;
	font-size: var(--font-size-h1);
	line-height: 1.25;
	color: var(--color-text);
}

.articleCtaBlock__mapLead {
	margin: 0 0 36px;
	font-size: 18px;
	line-height: 1.3;
	color: var(--color-text);
}

.articleCtaBlock__mapWrap {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
}

.articleCtaBlock__mapImg {
	display: block;
	width: 100%;
	height: auto;
}

.articleCtaBlock__stat {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 234px;
	max-width: 45%;
	padding: 32px 40px 36px;
	border-radius: var(--radius-card);
	overflow: hidden;
}

.articleCtaBlock__stat::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	box-sizing: border-box;
	opacity: 0.6;
	background: #fff;
	border: 0.7px solid var(--color-border);
	border-radius: inherit;
}

.articleCtaBlock__statValue {
	position: relative;
	z-index: 1;
	margin: 0 0 19px;
	font-family: "Inter", var(--font-family-base);
	font-weight: 600;
	font-size: var(--font-size-h1);
	line-height: 1.25;
	color: var(--color-text);
}

.articleCtaBlock__statText {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: var(--font-size-base);
	line-height: 1.3;
	color: var(--color-text);
}

.articleCtaBlock__form {
	padding: 44px;
	border: 1px solid var(--color-brand-green);
	border-radius: var(--radius-card);
	background: #fff;
}

.articleCtaBlock__formTitle {
	margin: 0 0 12px;
	font-family: "Inter", var(--font-family-base);
	font-weight: 600;
	font-size: 28px;
	line-height: 1.25;
	color: var(--color-text);
}

.articleCtaBlock__formLead {
	margin: 0 0 32px;
	font-size: 18px;
	line-height: 1.3;
	color: var(--color-text);
}

@media (max-width: 992px) {
	.articleCtaBlock__top {
		grid-template-columns: 1fr;
	}

	.articleCtaBlock__stat {
		position: static;
		width: auto;
		max-width: none;
		margin-top: 15px;
	}
}

@media (max-width: 700px) {
	.articleCtaBlock__prices {
		flex-direction: column;
		align-items: flex-start;
	}

	.articleCtaBlock__pricesText {
		max-width: none;
	}

	.articleCtaBlock__form {
		padding: 32px 24px;
	}
}

/* End */
/* /local/templates/dresscodeV2/news-page.css?17901034604930 */
/* /local/templates/dresscodeV2/news-detail.css?179122415019334 */
/* /local/templates/dresscodeV2/shared-cta-block.css?17901034605177 */