/* Start:/local/templates/dresscodeV2/css/catalog-infinite-scroll.css?17908783622540*/
/* The native Bitrix pager remains a fallback when JavaScript is unavailable. */
body #main #ajaxSection #catalogSection {
    overflow-anchor: none;
}

body #main #ajaxSection.catalogInfinite--enhanced #catalogSection .bx-pagination {
    display: none;
}

body #main .catalogInfinite {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    margin: 24px 0 40px;
    color: #687b7e;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}

body #main .catalogInfinite[hidden],
body #main .catalogInfinite__status:empty {
    display: none;
}

body #main .catalogInfinite--loading .catalogInfinite__status::before {
    content: '';
    display: inline-block;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    margin-right: 9px;
    vertical-align: -3px;
    border: 2px solid #cfe4e2;
    border-top-color: #008c9c;
    border-radius: 50%;
    animation: catalogInfiniteSpin .8s linear infinite;
}

@keyframes catalogInfiniteSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    body #main .catalogInfinite--loading .catalogInfinite__status::before {
        animation: none;
    }
}

/* If automatic loading fails, the revealed native pager remains usable on phones. */
@media (max-width: 600px) {
    body #main #ajaxSection #catalogSection .bx-pagination-container ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 5px;
        width: 100%;
    }

    body #main #ajaxSection #catalogSection .bx-pagination-container ul li {
        margin: 0;
    }

    body #main #ajaxSection #catalogSection .bx-pagination-container ul li:not(.bx-pag-next) span,
    body #main #ajaxSection #catalogSection .bx-pagination-container ul li:not(.bx-pag-next) a {
        min-width: 42px;
        width: 42px;
        height: 42px;
        line-height: 40px;
    }

    body #main #ajaxSection #catalogSection .bx-pagination-container ul li.bx-pag-next {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 4px 0 0;
    }

    body #main #ajaxSection #catalogSection .bx-pagination-container ul li.bx-pag-next a,
    body #main #ajaxSection #catalogSection .bx-pagination-container ul li.bx-pag-next span {
        height: 42px;
        line-height: 42px;
    }

    body #main #ajaxSection #catalogSection .bx-pagination-container ul li.bx-pag-next a {
        background: transparent;
        border: 0;
        border-radius: 999px;
    }
}

/* End */


/* Start:/local/templates/.default/components/dresscode/catalog/catalog_template/style.min.css?17891160522211*/
#middleSlider {
	margin-bottom: 24px;
}

.panel-click.selected {
	pointer-events: none;
}

.items.productList {
	margin-bottom: 24px;
}

.removeFromWishlist {
	display: none;
}

/**
 * Строка сортировки над сеткой товаров под новый дизайн — в макете виден
 * только дропдаун сортировки, переключатели "показывать по"/"вид" (плитка/
 * список/таблица) не показаны, поэтому скрываем эти колонки по CSS, сама
 * функциональность (cookie CATALOG_SORT_TO/CATALOG_VIEW) не трогаем.
 * Figma: "Первый" (2drAlmqRQHLNW6gxgw2d7H), фрейм "Каталог".
 */
/*
 * Префикс "body " здесь не для красоты — у #catalogLine{...} и
 * #catalogLine .label{...} в template_styles.css (общий шаблон, грузится
 * ПОСЛЕ этого файла в компоновке Bitrix) те же по силе селекторы; без
 * дополнительного типового селектора спор по специфичности выигрывает
 * более поздний файл, и переопределение здесь молча не применяется.
 */
body #catalogLine {
	height: auto;
	margin-bottom: 24px;
	padding: 0;
	line-height: normal;
	border: none;
}

body #catalogLine .column:has(.countElements),
body #catalogLine .column:has(.viewList) {
	display: none;
}

body #catalogLine .column:last-child {
	float: right;
}

body #catalogLine .label {
	display: none;
}

body #catalogLine .dropDownList.sortFields {
	width: auto;
	height: 38px;
	line-height: 38px;
	border: 1px solid var(--color-border, #d9d9d9);
	border-radius: var(--radius-pill, 999px);
}

body #catalogLine .dropDownList.sortFields .dropDownSelected {
	height: 36px;
	padding: 0 32px 0 16px;
	color: var(--color-text, #2b2a29);
	font-size: 14px;
	font-family: inherit;
	line-height: 36px;
	border-radius: var(--radius-pill, 999px);
}

body #catalogLine .dropDownList.sortFields .dropDownItems {
	border-color: var(--color-border, #d9d9d9);
	border-radius: 12px;
}

/* End */


/* Start:/local/templates/dresscodeV2/components/dresscode/catalog.item/detail/style.css?179032521920169*/
/**
 * Детальная страница товара под новый дизайн.
 * Figma: 2drAlmqRQHLNW6gxgw2d7H, узел 102:54 "Карточка товара".
 * Скоуп через #catalogElement.productDetail — переиспользуемые сайтовые
 * классы (.addCart, .quantityContainer, .changeName и т.п.) внутри этого
 * блока перестилизуются с префиксом "body ", т.к. их базовый вид задан
 * в template_styles.css/теме arctic, который грузится позже (см.
 * local/templates/dresscodeV2/components/dresscode/catalog.item/.default/style.css
 * и память css_load_order_bitrix — тот же приём).
 */

body #catalogElement.productDetail {
	padding: 24px 0 24px;
	font-family: var(--font-family-base);
	background: var(--color-bg-subtle);
}

/* Хлебные крошки (#breadcrumbs) рендерятся глобально в header.php внутри
   #main .limiter, ДО #catalogElement (карточка выводится отдельно через
   SetViewTarget("no_main_container") уже после закрытия #main) — это
   разные, не соседние блоки в DOM. Стилизовать сам bitrix:breadcrumb
   точечным классом нельзя (общий для всех страниц компонент), поэтому
   фон и отступ вешаем на #main — но этот style.css подключается ядром
   Bitrix только на детальной странице товара (по имени файла для
   шаблона "detail"), так что на остальных страницах сайта это правило
   не грузится и #main там не трогается. */
#main {
	padding-top: 24px;
	background: var(--color-bg-subtle);
}

#catalogElement.productDetail .limiter {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ---------- Заголовок ---------- */

body #catalogElement.productDetail .productDetail__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}

body #catalogElement.productDetail h1.productDetail__title {
	max-width: 700px;
	margin: 0;
	font-weight: 600;
	font-size: var(--font-size-h1);
	line-height: 1.25;
	color: var(--color-text);
}

.productDetail__headMeta {
	flex: 0 0 auto;
	text-align: right;
	white-space: nowrap;
}

.productDetail__art {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	margin: 0;
	font-size: var(--font-size-base);
	color: var(--color-text-muted);
}

@media (max-width: 600px) {
	body #catalogElement.productDetail .productDetail__head {
		flex-direction: column;
		gap: 8px;
	}

	body #catalogElement.productDetail h1.productDetail__title {
		min-width: 0;
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	#catalogElement.productDetail .productDetail__headMeta {
		max-width: 100%;
		text-align: left;
		white-space: normal;
	}

	#catalogElement.productDetail .productDetail__art {
		justify-content: flex-start;
	}
}

/* ---------- Галерея + карточка покупки ---------- */

body #catalogElement.productDetail .productDetail__main {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 40px;
}

@media (max-width: 900px) {
	body #catalogElement.productDetail .productDetail__main {
		grid-template-columns: 1fr;
	}
}

.productDetail__mainImageWrap {
	position: relative;
}

.productDetail__mainImage {
	aspect-ratio: 572 / 458;
	background: #fff;
	border-radius: var(--radius-card);
	overflow: hidden;
}

.productDetail__mainImage img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.productDetail__legalBadge {
	position: absolute;
	top: 22px;
	left: 21px;
	width: 38px;
	height: 45px;
}

.productDetail__legalBadge img {
	display: block;
	width: 100%;
	height: 100%;
}

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

.productDetail__thumb {
	aspect-ratio: 178.6 / 169;
	padding: 0;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	cursor: pointer;
	overflow: hidden;
}

.productDetail__thumb.is-active {
	border-color: var(--color-brand-green);
}

.productDetail__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.productDetail__buyCard {
	/* Горизонтальный паддинг 24px (не 40) — при 40px три кнопки
	   ("Напечатать"/"Поделиться"/"Добавить в избранное") не помещались
	   в один ряд и переносились на вторую строку, как в Figma (узел
	   102:71 "Group 91": сам ряд кнопок в макете имеет отступ от края
	   карточки ~19-25px, а не 40px). Проверено на живом дев-сервере
	   Playwright: при 40px .productDetail__actions получал flex-wrap
	   на 472px доступной ширины при суммарной ширине кнопок ~491px. */
	padding: 32px 24px;
	background: #fff;
	border-radius: var(--radius-card);
}

.productDetail__stockNote {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 0 16px;
	font-size: var(--font-size-base);
	color: var(--color-brand-green);
}

.productDetail__stockNote.is-out {
	color: var(--color-text-muted);
}

.productDetail__price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 10px;
	margin-bottom: 24px;
}

.productDetail__priceValue {
	font-weight: 600;
	font-size: var(--font-size-h1);
	line-height: 1.25;
	color: var(--color-text);
}

.productDetail__priceMeasure {
	/* Не var(--color-text-light, #383331) — --color-text-light уже
	   определена в design-tokens.css как #6e6e6e, поэтому fallback
	   в var() никогда не сработает (браузер использует #6e6e6e, а не
	   Figma-цвет #383331). Здесь и в трёх местах ниже — литерал. */
	font-size: var(--font-size-base);
	color: #383331;
}

.productDetail__oldPrice {
	font-size: 18px;
	color: var(--color-text-muted);
}

.productDetail__buyRow {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-bottom: 24px;
}

body #catalogElement.productDetail a.addCart.productDetail__addCart {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 230px;
	height: 51px;
	padding: 0 24px;
	font-size: var(--font-size-base);
	color: #fff;
	background: var(--color-brand-green);
	border: 0;
	border-radius: var(--radius-pill);
	text-decoration: none;
	cursor: pointer;
}

body #catalogElement.productDetail a.addCart.productDetail__addCart.disabled {
	background: var(--color-text-muted);
	pointer-events: none;
}

/* Тема arctic (themes/arctic/style.css) переопределяет .addCart.added
   через "background: #2b2b2b !important" глобально без привязки к
   контейнеру — после нажатия "Добавить в заявку" кнопка на детальной
   стала чёрной вместо фирменного зелёного. Перебиваем тем же !important,
   но с ID-скоупом (#catalogElement), чтобы не задеть остальные кнопки
   на сайте, которые эту тёмную "добавлено" тему используют осознанно. */
body #catalogElement.productDetail a.addCart.productDetail__addCart.added {
	background: var(--color-brand-green) !important;
}

body #catalogElement.productDetail a.addCart.productDetail__addCart.added:hover {
	background: var(--color-brand-green) !important;
}

body #catalogElement.productDetail a.addCart.productDetail__addCart img {
	display: none;
}

body #catalogElement.productDetail .quantityContainer.productDetail__qty {
	flex: 0 0 auto;
}

/* Товар "снято с продажи" (свойство CHOOSE_AN_ANALOGUE) — вместо цены и
   "Добавить в корзину" показываем один растянутый на всю ширину зелёный
   пилл-баттон "Запросить аналог" (Figma: файл 2drAlmqRQHLNW6gxgw2d7H,
   узел 102:831 "Карточка товара" на странице "На согласовании" —
   вариант карточки для товаров, снятых с продажи). */
body #catalogElement.productDetail a.productDetail__requestAnalogBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 100%;
	width: 100%;
	height: 51px;
	padding: 0 24px;
	font-size: var(--font-size-base);
	color: #fff;
	background: var(--color-brand-green);
	border: 0;
	border-radius: var(--radius-pill);
	text-decoration: none;
	cursor: pointer;
}

body #catalogElement.productDetail .quantityContainer .quantityWrapper {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 51px;
	padding: 0 20px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
}

body #catalogElement.productDetail .quantityContainer .quantity {
	width: 28px;
	padding: 0;
	font-size: 18px;
	text-align: center;
	color: #383331;
	background: none;
	border: 0;
}

body #catalogElement.productDetail .quantityContainer .minus,
body #catalogElement.productDetail .quantityContainer .plus {
	position: relative;
	display: block;
	width: 11px;
	height: 11px;
	background: no-repeat center / contain;
}

body #catalogElement.productDetail .quantityContainer .minus {
	background-image: url("/local/templates/dresscodeV2/components/dresscode/catalog.item/detail/../../../../images/product-detail/icon-minus.svg");
}

body #catalogElement.productDetail .quantityContainer .plus {
	background-image: url("/local/templates/dresscodeV2/components/dresscode/catalog.item/detail/../../../../images/product-detail/icon-plus.svg");
}

.productDetail__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

body #catalogElement.productDetail .productDetail__actionBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 51px;
	padding: 0 24px;
	font-family: inherit;
	font-size: var(--font-size-base);
	color: var(--color-brand-teal-dark);
	background: none;
	border: 1px solid var(--color-brand-teal-dark);
	border-radius: var(--radius-pill);
	text-decoration: none;
	cursor: pointer;
}

.productDetail__rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 38px;
	margin-top: 16px;
	color: #fff;
	background: var(--color-brand-green);
	border-radius: var(--radius-pill);
}

.productDetail__ratingValue {
	font-weight: 600;
	font-size: 18px;
}

.productDetail__ratingCount {
	font-size: var(--font-size-base);
}

.productDetail__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.productDetail__priceDisclaimer {
	margin: 16px 0 0;
	font-size: var(--font-size-base);
	line-height: 1.5;
	text-align: center;
	color: var(--color-text);
}

.productDetail__badge {
	display: flex;
	align-items: center;
	height: 38px;
	padding: 0 18px;
	font-size: var(--font-size-base);
	color: #383331;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
}

.productDetail__badge.is-filled {
	color: #383331;
	background: #afe0ba;
	border-color: transparent;
}

/* ---------- Описание + характеристики ---------- */

body #catalogElement.productDetail .productDetail__info {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 40px;
}

@media (max-width: 900px) {
	body #catalogElement.productDetail .productDetail__info {
		grid-template-columns: 1fr;
	}
}

.productDetail__blockTitle {
	margin: 0 0 32px;
	font-weight: 600;
	font-size: var(--font-size-lg);
	line-height: 1.25;
	color: var(--color-text);
}

.productDetail__descriptionText {
	font-size: var(--font-size-base);
	line-height: 1.38;
	color: var(--color-text);
}

body #catalogElement.productDetail .productDetail__characteristics #elementProperties h2.heading {
	margin: 0 0 32px;
	font-weight: 600;
	font-size: var(--font-size-lg);
	line-height: 1.25;
	color: var(--color-text);
}

body #catalogElement.productDetail .productDetail__characteristics table.stats {
	width: 100%;
	border-collapse: collapse;
}

body #catalogElement.productDetail .productDetail__characteristics table.stats tr.cap td {
	padding: 0 0 8px;
	font-weight: 600;
	color: var(--color-text);
}

body #catalogElement.productDetail .productDetail__characteristics table.stats td {
	padding: 6px 0;
	font-size: var(--font-size-base);
	line-height: 1.6;
	color: var(--color-text);
	vertical-align: top;
	border: 0;
	background: none;
}

body #catalogElement.productDetail .productDetail__characteristics table.stats td.name {
	width: 45%;
	font-weight: 600;
	white-space: nowrap;
}

body #catalogElement.productDetail .productDetail__characteristics table.stats td.right {
	display: none;
}

/* ---------- "Почему выбирают нас" ---------- */

/* Заголовок и 3 пункта — ОДНА горизонтальная строка (узел 102:64/102:222-224:
   заголовок и все три пункта лежат на одной Y, а не заголовок сверху блоком
   и пункты сеткой под ним, как было тут раньше). */
.productDetail__why {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 0;
	padding: 40px 44px;
	background: #afe0ba;
	border-radius: var(--radius-card);
}

.productDetail__whyTitle {
	flex: 0 0 auto;
	max-width: 200px;
	margin: 0;
	font-weight: 600;
	font-size: var(--font-size-lg);
	line-height: 1.27;
	color: var(--color-text);
}

.productDetail__whyItems {
	display: flex;
	flex: 1 1 auto;
	gap: 24px;
}

.productDetail__whyItems .productDetail__whyItem {
	/* flex:0 0 auto (max-content, без переноса) вылезал за границы
	   карточки на реальном тексте — нужен перенос строк, а не
	   фиксированная по контенту ширина. */
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 900px) {
	.productDetail__why {
		flex-wrap: wrap;
	}

	.productDetail__whyTitle {
		flex: 1 1 100%;
		max-width: none;
	}

	.productDetail__whyItems {
		flex-direction: column;
	}

	.productDetail__whyItems .productDetail__whyItem {
		flex: 1 1 auto;
	}
}

.productDetail__whyItem {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.productDetail__whyIcon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	background: var(--color-brand-green);
	border-radius: var(--radius-card);
}

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

.productDetail__whyItem p b {
	font-weight: 600;
}

/* ---------- "Покупают вместе" ---------- */

#productBoughtTogether {
	margin-bottom: 40px;
	padding-bottom: 24px;
	background: var(--color-bg-subtle);
}

#productBoughtTogether .limiter {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 20px;
}

.productBoughtTogether__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.productBoughtTogether__head .productDetail__blockTitle {
	margin: 0;
}

.productBoughtTogether__nav {
	display: flex;
	gap: 8px;
}

.productBoughtTogether__arrow {
	width: 38px;
	height: 38px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.productBoughtTogether__arrow img {
	display: block;
	width: 100%;
	height: 100%;
}

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

.productBoughtTogether__scroller {
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.productBoughtTogether__scroller::-webkit-scrollbar {
	display: none;
}

/* переиспользуем стиль карточки товара из catalog.item/.default (см.
   local/templates/dresscodeV2/components/dresscode/catalog.item/.default/style.css),
   но 4 карточки в ряд шириной 279px со скроллом вместо переноса строк —
   выше специфичность (доп. id) перебивает базовый "#catalogSection .product". */
#productBoughtTogether #catalogSection .items.productList {
	display: flex;
	flex-wrap: nowrap;
	gap: 16px;
}

#productBoughtTogether #catalogSection .product {
	flex: 0 0 279px;
	width: 279px;
	height: 370px;
	padding: 0;
}

/* ---------- Тост "Ссылка скопирована" (кнопка "Поделиться") ---------- */

.productDetail__shareToast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	z-index: 1100;
	max-width: calc(100% - 32px);
	padding: 14px 24px;
	background: #383331;
	color: #fff;
	font-size: var(--font-size-base);
	line-height: 1.3;
	text-align: center;
	border-radius: var(--radius-pill);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 12px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.productDetail__shareToast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ---------- Печать карточки товара (кнопка "Напечатать") ----------
   Раньше был classический приём "visibility:hidden на всё + visibility:
   visible + position:absolute на #catalogElement" — он ломался на живом
   сайте (проверено печатью в PDF): visibility:hidden НЕ убирает элемент
   из потока, скрытые шапка/футер/CTA-блок продолжали резервировать место
   по высоте — на печати вылезали пустые страницы в конце. Плюс админ-
   панель Bitrix (#bx-panel, видна только залогиненным редакторам) держит
   себя видимой через собственные безусловные (без @media print) правила
   в core_panel.css с !important той же специфичности — при проигрыше в
   порядке подключения CSS панель, зафиксированная вверху страницы,
   перекрывала #catalogElement, который старый приём тоже пришпиливал
   к верху (видно было наложение текста в распечатанном PDF).
   Теперь: known-блоки верхнего уровня (шапка/футер/breadcrumbs-обёртка/
   CTA-блок/попап/cookie-уведомление/панель) скрываю явно через
   display:none — они убираются из потока целиком, без пустого места.
   #catalogElement никуда не перемещаю — он и так единственное, что
   останется в потоке. Как подстраховку от неизвестных виджетов (чат и
   т.п. — обычно position:fixed, в поток высоты не добавляют) оставляю
   universal visibility:hidden/visible на body */
@media print {
	body * {
		visibility: hidden;
	}

	#catalogElement,
	#catalogElement * {
		visibility: visible;
	}

	#panel,
	#siteHeader,
	#main,
	.categoryCta,
	.categoryCtaCallbackPopup,
	#siteFooter,
	.cookie-notice,
	#upButton,
	#loading-spinner {
		display: none !important;
	}

	.productDetail__actions,
	.productDetail__buyRow,
	.productDetail__qty {
		display: none !important;
	}

	/* см. пояснение выше про core_panel.css — специфичность поднята через
	   "html body #bx-panel", чтобы победить гарантированно, а не
	   полагаться на порядок CSS в <head>. */
	html body #bx-panel,
	html body #bx-panel-error {
		display: none !important;
	}
}

/* End */


/* Start:/local/templates/dresscodeV2/components/dresscode/catalog.item/.default/style.css?179094076211927*/
/**
 * Карточка товара в сетке каталога (squares) под новый дизайн.
 * Figma: "Первый" (2drAlmqRQHLNW6gxgw2d7H), фрейм "Каталог" (node 102:2444).
 * Скоуп через #catalogSection — карточка на этом id используется только
 * в сеточном виде каталога (dresscode:catalog.section, шаблон squares),
 * другие карточки (корзина, похожие товары, виджеты) не затрагиваются.
 * Функциональная разметка (рейтинг, метки, сравнение/избранное, степпер
 * количества, SKU-свойства) не удалена — только скрыта, чтобы не ломать
 * существующий JS/CSS сайта (см. .product .addCart.added + .quantityContainer
 * в template_styles.css, зависящий от соседства элементов в DOM).
 */

/*
 * 3 карточки в ряд (не 4) — в Figma карточка товара шире относительно
 * узкого сайдбара фильтра, чем у базового #catalog .product{width:25%}.
 * "body " нужен, т.к. #catalog .product живёт в template_styles.css,
 * который грузится позже этого файла — при равной специфичности (оба
 * "#id .class") без лишнего токена спор по каскаду проигран (см.
 * [[css_load_order_bitrix]]).
 */
body #catalogSection .product {
	width: 33.3333%;
	height: 370px;
	padding: 0 12px 12px 0;
	border-right: 0;
	border-bottom: 0;
}

#catalogSection .productList {
	border-left: 0;
}

#catalogSection .product::before {
	display: none;
}

#catalogSection .product .tabloid {
	height: 100%;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--color-border, #d9d9d9);
	border-radius: var(--radius-card, 22px);
}

/*
 * Базовый .product:hover .tabloid (template_styles.css) на ховере делает
 * position:absolute + height:auto — карточка "вырастает" и наезжает на
 * соседние. В новом дизайне карточка фиксированной высоты, этот эффект
 * не нужен — откатываем на обычную раскладку.
 */
#catalogSection .product:hover {
	position: static;
}

#catalogSection .product:hover .tabloid {
	position: relative;
	z-index: 1;
	width: auto;
	height: 100%;
	overflow: hidden;
}

#catalogSection .product .markerContainer,
#catalogSection .product .rating,
#catalogSection .product .optional,
#catalogSection .product .quantityContainer,
#catalogSection .product .skuProperty,
#catalogSection .product .skuProperty.oSkuDropDownProperty {
	display: none;
}

#catalogSection .product .productColImage {
	height: 165px;
}

#catalogSection .product .picture {
	height: 165px;
	line-height: 0;
}

#catalogSection .product .picture img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

#catalogSection .product .productColText {
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100%;
	padding: 27px 28px 16px;
	overflow: hidden;
}

#catalogSection .product .dsArticle {
	flex: 0 0 auto;
	margin-bottom: 14px;
	color: var(--color-brand-green, #02ab26);
	font-size: 14px;
	line-height: 1.25;
}

/*
 * height (не max-height) — блок названия всегда резервирует одинаковую
 * высоту (под 3 строки), независимо от того, 1 строка там или 3. Иначе
 * .price ниже него оказывается на разной высоте в зависимости от длины
 * названия конкретного товара — карточки в одном ряду "плывут".
 */
#catalogSection .product .name {
	flex: 0 0 auto;
	height: 55px;
	margin-bottom: 21px;
	overflow: hidden;
	color: var(--color-text, #2b2a29);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

#catalogSection .product .middle {
	line-height: 1.3;
}

/*
 * .price всегда прижат к низу карточки через margin-top:auto — независимо
 * от того, сколько строк занимает название (1-3). Разделительная линия —
 * border-top ТОЛЬКО на .price (полная ширина колонки), не на .addCartContainer
 * отдельно, иначе при разной высоте элементов линия распадается на два
 * несовпадающих отрезка. Кнопка — position:absolute поверх этой же строки,
 * не участвует в потоке и не может вылезти за паддинг карточки.
 */
#catalogSection .product .price {
	flex: 0 0 auto;
	margin: auto 0 0;
	padding-top: 16px;
	padding-right: 50px;
	color: var(--color-text, #2b2a29);
	font-size: 18px;
	border-top: 1px solid var(--color-border, #d9d9d9);
}

#catalogSection .product .price .discount {
	display: block;
	font-size: 12px;
}

/*
 * top (не bottom) — .price может быть выше 1 строки (скрытый пустой
 * <s class="discount"> у товаров без скидки иногда всё равно занимает
 * место), поэтому bottom:16px "от низа .price" плавает и кнопка не
 * попадает в центр цифры цены. 143px = 27 (padding-top .productColText)
 * + 17.5 (.dsArticle) + 14 (margin-bottom .dsArticle) + 55 (высота .name)
 * + 21 (margin-bottom .name) + 16 (padding-top .price) + 1 (border-top
 * .price) + 21/2 (центр первой строки цены) − 19 (половина кнопки 38px).
 * Считалось по факту рендера (getBoundingClientRect), не на глаз.
 */
#catalogSection .product .addCartContainer {
	position: absolute;
	top: 143px;
	right: 28px;
	margin: 0;
	overflow: visible;
}

#catalogSection .product .dsAddCart {
	position: relative;
	width: 38px;
	height: 38px;
	padding: 0;
	background: none;
	border-radius: 50%;
}

#catalogSection .product .dsAddCart:hover,
#catalogSection .product .dsAddCart:active {
	background: none;
}

#catalogSection .product .dsAddCart .icon {
	display: none;
}

#catalogSection .product .dsAddCart span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	background: url("/local/templates/dresscodeV2/components/dresscode/catalog.item/.default/../../../../images/design2/icon-add-cart-circle.svg") 50% 50% no-repeat;
	transform: translate(-50%, -50%);
	font-size: 0;
}

#catalogSection .product .dsAddCart.added span,
#catalogSection .product .dsAddCart.disabled span,
#catalogSection .product .dsAddCart.subscribe span,
#catalogSection .product .dsAddCart.requestPrice span {
	left: 50%;
	transform: translate(-50%, -50%);
}

@media all and (max-width: 790px) {
	/* Стрелки карусели подразделов не должны расширять страницу. */
	#sectionSubcats .scrollNav.prev {
		left: 0;
	}

	#sectionSubcats .scrollNav.next {
		right: 0;
	}

	/* Панель фильтра и сортировки состоит из float-колонок. Учитываем её
	   высоту, чтобы первый ряд карточек начинался на одной линии. */
	#catalogLine {
		display: flow-root;
		padding-bottom: 16px;
	}

	body #catalogSection .product {
		width: 50%;
	}

	#catalogSection .product .productTable {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	#catalogSection .product .productColImage {
		flex: 0 0 165px;
	}

	#catalogSection .product .productColText {
		box-sizing: border-box;
		flex: 1 1 auto;
		min-height: 0;
		height: auto;
		padding: 16px 14px 14px;
	}

	#catalogSection .product .middle {
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	#catalogSection .product .price {
		padding-top: 12px;
		padding-right: 0;
		font-size: 14px;
	}

	#catalogSection .product .price .measure {
		font-size: 14px;
	}
}

/*
 * Телефон (до 700px): в карточке сетки остаётся одна кнопка — «Подробнее».
 * Круглую кнопку корзины тема на этой ширине скрывает (.addCartContainer
 * display:none), а саму «Подробнее» показывает правилом
 * ".product .btn-simple {display:inline-block}" (template_styles.css) — это
 * осталось от старого дизайна, где у карточки не было кнопки корзины.
 * Высота карточки при этом фиксирована (370px), поэтому при названии в три
 * строки и цене в две кнопка вылезала за карточку и обрезалась. Поднимаем
 * высоту так, чтобы кнопка помещалась в самом длинном случае (3 строки
 * названия + цена с «/ шт» отдельной строкой), и приводим кнопку к виду
 * кнопок сайта (скругление, полная ширина колонки).
 * В избранном личного кабинета высоту карточек задаёт personal-cabinet.css
 * (height:auto на телефоне — карточка растёт по содержимому), эти правила её
 * не перебивают: специфичность там выше.
 */
@media all and (max-width: 700px) {
	body #catalogSection .product {
		height: 420px;
	}

	#catalogSection .product .btn-simple.add-cart {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		height: 36px;
		margin-top: 10px;
		padding: 0 12px;
		color: var(--color-text, #2b2a29);
		font-size: 13px;
		line-height: 1;
		text-decoration: none;
		background: #ffffff;
		border: 1px solid var(--color-border, #d9d9d9);
		border-radius: 10px;
	}

	#catalogSection .product .btn-simple.add-cart:hover,
	#catalogSection .product .btn-simple.add-cart:focus-visible {
		color: var(--color-brand-green, #02ab26);
		background: #ffffff;
		border-color: var(--color-brand-green, #02ab26);
	}
}

/*
 * Товар добавлен в корзину: зелёный круг с белой галочкой вместо «чёрного круга
 * с плюсом». Тёмный фон давало общее правило темы ".addCart.added {background:
 * #2b2b2b !important}" (template_styles.css), рассчитанное на текстовые кнопки
 * старого дизайна, а плюс из фона span оставался прежним — было непонятно, что
 * товар уже в корзине. Здесь тоже !important, а перебиваем его специфичностью
 * (#catalogSection). Клик по кнопке в этом состоянии ведёт в корзину (href
 * подставляет system.js).
 */
body #catalogSection .product .dsAddCart.added,
body #catalogSection .product .dsAddCart.added:active {
	background: var(--color-brand-green, #02ab26) !important;
}

body #catalogSection .product .dsAddCart.added:hover {
	background: #029523 !important;
}

body #catalogSection .product .dsAddCart.added span {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.8' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / 20px 20px no-repeat;
}

/* End */


/* Start:/local/templates/dresscodeV2/components/bitrix/system.pagenavigation/round/style.css?17908740884566*/
.bx-pagination {
	margin: 10px 0;
}

.bx-pagination .bx-pagination-container {
	position: relative;
	margin-bottom: 40px;
	text-align: center;
}

.bx-pagination .bx-pagination-container ul {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bx-pagination .bx-pagination-container ul li {
	display: inline-block;
	margin: 0 2px 15px;
}

.bx-pagination .bx-pagination-container ul li span {
	display: block;
	box-sizing: border-box;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	color: #444444;
	font-size: 14px;
	line-height: 32px;
	vertical-align: middle;
	background: #eff0f1;
	border-radius: 16px;
	transition:
		color 0.3s ease,
		background-color 0.3s ease,
		border-color 0.3s ease;
}

.bx-pagination .bx-pagination-container ul li a {
	display: block;
	min-width: 32px;
	height: 32px;
	color: #444444;
	line-height: 32px;
	text-decoration: none;
	vertical-align: middle;
	border-radius: 16px;
}

.bx-pagination .bx-pagination-container ul li a:hover span {
	background: #dadada;
}

.bx-pagination .bx-pagination-container ul li.bx-pag-all a span,
.bx-pagination .bx-pagination-container ul li.bx-pag-prev a span,
.bx-pagination .bx-pagination-container ul li.bx-pag-next a span {
	padding: 0 18px;
	color: #444444;
	line-height: 28px;
	background: #ffffff;
	border: 2px solid #eff0f1;
}

.bx-pagination .bx-pagination-container ul li.bx-pag-all span,
.bx-pagination .bx-pagination-container ul li.bx-pag-prev span,
.bx-pagination .bx-pagination-container ul li.bx-pag-next span {
	padding: 0 18px;
	color: #aab1b4;
	line-height: 28px;
	background: #ffffff;
	border: 2px solid #eff0f1;
}

.bx-pagination .bx-pagination-container ul li.bx-pag-all a:hover span,
.bx-pagination .bx-pagination-container ul li.bx-pag-prev a:hover span,
.bx-pagination .bx-pagination-container ul li.bx-pag-next a:hover span {
	color: #000000;
	background: #ffffff;
	border-color: #dadada;
}

/**
 * Пагинация в сетке каталога под новый дизайн — скоуп через #catalogSection,
 * чтобы не задеть пагинацию "round" в других местах сайта (например, списки
 * новостей). Figma: "Первый" (2drAlmqRQHLNW6gxgw2d7H), фрейм "Каталог".
 */
#catalogSection .bx-pagination {
	margin: 32px 0 0;
}

#catalogSection .bx-pagination-container ul li {
	margin: 0 4px 0 0;
	vertical-align: middle;
}

#catalogSection .bx-pagination-container ul li span,
#catalogSection .bx-pagination-container ul li a {
	box-sizing: border-box;
	min-width: 51px;
	height: 51px;
	padding: 0;
	color: var(--color-brand-green, #02ab26);
	font-size: 14px;
	line-height: 49px;
	text-align: center;
	background: #ffffff;
	border: 1px solid var(--color-border, #d9d9d9);
	border-radius: 50%;
}

/* The circle is drawn by the inner span; a second border on the link doubles it. */
#catalogSection .bx-pagination-container ul li:not(.bx-pag-prev):not(.bx-pag-next) a {
	background: transparent;
	border: 0;
}

#catalogSection .bx-pagination-container ul li a:hover span {
	background: var(--color-bg-subtle, #f9f9f9);
}

#catalogSection .bx-pagination-container ul li.bx-active span {
	color: #ffffff;
	background: var(--color-brand-green, #02ab26);
	border-color: var(--color-brand-green, #02ab26);
}

#catalogSection .bx-pagination-container ul li.bx-pag-prev a span,
#catalogSection .bx-pagination-container ul li.bx-pag-prev span {
	position: relative;
	padding: 0;
	font-size: 0;
	background: var(--color-bg-subtle, #f9f9f9);
	border: 0;
}

#catalogSection .bx-pagination-container ul li.bx-pag-prev a span::before,
#catalogSection .bx-pagination-container ul li.bx-pag-prev span::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -6px 0 0 -3px;
	border-top: 2px solid var(--color-text, #2b2a29);
	border-right: 2px solid var(--color-text, #2b2a29);
	transform: rotate(-135deg);
}

#catalogSection .bx-pagination-container ul li.bx-pag-next {
	margin-left: 8px;
}

#catalogSection .bx-pagination-container ul li.bx-pag-next a span,
#catalogSection .bx-pagination-container ul li.bx-pag-next span {
	min-width: auto;
	padding: 0 28px;
	color: #ffffff;
	font-size: 14px;
	line-height: 51px;
	background: var(--color-brand-green, #02ab26);
	border: 0;
	border-radius: var(--radius-pill, 999px);
}

#catalogSection .bx-pagination-container ul li.bx-pag-next a:hover span {
	background: var(--color-brand-green, #02ab26);
	opacity: 0.9;
}

#catalogSection .bx-pagination-container ul li.bx-pag-all {
	display: none;
}

/* End */


/* Start:/local/templates/dresscodeV2/shared-product-delivery-block.css?17891211622702*/
/**
 * Блок "Доставка и пункты выдачи" на детальной странице товара.
 * Разметка: local/templates/dresscodeV2/include/product-delivery-block.php.
 * Figma: 2drAlmqRQHLNW6gxgw2d7H, узел 102:276 "Блок с доставкой".
 */

/*
 * Обёртка вокруг блоков доставки и призыва под карточкой товара
 * (local/templates/dresscodeV2/components/dresscode/catalog/.default/element.php).
 * Эти блоки выводятся через SetViewTarget("no_main_container") — там нет
 * сайтового контейнера, поэтому центрируем и ограничиваем ширину сами,
 * тем же значением (1160px), что и .limiter в header-footer.css.
 */
.productAfterBlocks__limiter {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 20px;
}

.productDeliveryBlock {
	display: grid;
	grid-template-columns: 557fr 557fr;
	gap: 24px;
	align-items: stretch;
	padding: 40px 44px;
	margin: 40px 0;
	background: var(--color-bg-subtle);
	border-radius: var(--radius-card);
}

.productDeliveryBlock__info {
	position: relative;
	padding-left: 66px;
	min-width: 0;
}

.productDeliveryBlock__icon {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: var(--color-brand-green);
	border-radius: var(--radius-card);
}

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

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

.productDeliveryBlock__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.productDeliveryBlock__tab {
	padding: 10px 18px;
	font-family: inherit;
	font-size: var(--font-size-base);
	line-height: 1.25;
	color: var(--color-text-light, #383331);
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	cursor: pointer;
}

.productDeliveryBlock__tab.is-active {
	border-color: var(--color-text);
}

.productDeliveryBlock__map {
	position: relative;
	border-radius: var(--radius-card);
	overflow: hidden;
	min-width: 0;
}

.productDeliveryBlock__map > img:first-child {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.productDeliveryBlock__pin {
	position: absolute;
	transform: translate(-50%, -100%);
	pointer-events: none;
}

@media (max-width: 900px) {
	.productDeliveryBlock {
		grid-template-columns: 1fr;
		padding: 32px 24px;
	}

	.productDeliveryBlock__map {
		aspect-ratio: 557 / 284;
	}
}

/* End */
/* /local/templates/dresscodeV2/css/catalog-infinite-scroll.css?17908783622540 */
/* /local/templates/.default/components/dresscode/catalog/catalog_template/style.min.css?17891160522211 */
/* /local/templates/dresscodeV2/components/dresscode/catalog.item/detail/style.css?179032521920169 */
/* /local/templates/dresscodeV2/components/dresscode/catalog.item/.default/style.css?179094076211927 */
/* /local/templates/dresscodeV2/components/bitrix/system.pagenavigation/round/style.css?17908740884566 */
/* /local/templates/dresscodeV2/shared-product-delivery-block.css?17891211622702 */