/*
 * Наши правки поверх вёрстки. Подключается после main.css, чтобы поставки от
 * верстальщиков можно было заменять целиком, не теряя эти правила.
 * Каждый блок — с причиной, почему макет не подходит как есть.
 * Файл в UTF-8: редактор молча пересохраняет его в CP1251, следите при правке.
 */

/*
 * Логотипы брендов приходят из админки как JPEG/PNG с белым фоном, залитым в пиксели,
 * тогда как в макете на их месте прозрачные SVG. На серой плашке карточки бренда
 * белый прямоугольник виден. multiply гасит белое до цвета плашки, тёмные буквы остаются.
 */
.brand-card__logo {
	mix-blend-mode: multiply;
}

/*
 * Звёзды рейтинга в подвале. В поставке вёрстки звёзды были картинкой на всю оценку,
 * а мы показываем живой рейтинг из Яндекса и Google, поэтому нужна дробная заливка:
 * золотые звёзды лежат поверх серых и обрезаются по ширине. Саму ширину в процентах
 * подставляет инлайном common/render_footer_review.php, здесь её быть не должно.
 * Размер шрифта звёзд задан в main.css у .site-footer__stars, наследуем оттуда.
 */
.site-footer__stars {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.site-footer__stars-wrap {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	line-height: 1;
}

.site-footer__stars-bg,
.site-footer__stars-fg {
	display: block;
}

.site-footer__stars-bg {
	color: var(--color-grey-300);
}

.site-footer__stars-fg {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: var(--color-rating);
}

/* Число рядом со звёздами: без своего цвета оно стало бы золотым от .site-footer__stars */
.site-footer__stars-value {
	font-size: 1.125rem;
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
}

/* Аксессуары раздела: слайдер берёт стили .product-slider из main.css, свой нужен
   только отступ от списка товаров */
.category-page__accessories {
	margin-top: var(--space-4xl);
}

/* Корни разделов остались без хлебных крошек - раньше отступ сверху давала их полоса,
   без неё заголовок упирался в шапку */
.catalog-page:not(:has(> .breadcrumbs, > .product-page__crumbs > .breadcrumbs)),
.category-page:not(:has(> .breadcrumbs, > .product-page__crumbs > .breadcrumbs)) {
	padding-top: var(--space-2xl);
}

/* Плашки фильтров, ведущие на страницы разделов, стали ссылками.
   У строчной ссылки width: 100% из main.css не работает: без блочности
   подсветка при наведении обрезалась бы по тексту.
   В вёрстке опция - <button>, поэтому подчёркивания в main.css нет */
a.filter-bar__option {
	display: block;
	text-decoration: none;
}

/* Пагинация при POST-фильтрах (new-design/catalog.php) выводится как
   <button type="submit">, чтобы не плодить GET-адреса. В вёрстке это <a>,
   и без сбросов страницы выглядят как серые системные кнопки */
button.pagination__link,
button.pagination__next {
	appearance: none;
	border: 0;
	background-color: transparent;
	font-family: inherit;
	cursor: pointer;
}

/* Согласие в тёмном блоке «Поможем выбрать»: ссылки на документы взяты из формы
   обратного звонка, но там они лежат на белом фоне. Красный #e00914 на чёрном
   даёт контраст 3.4:1 при размере caption, поэтому тут ссылки наследуют светлый
   цвет подписи, а от обычного текста отличаются подчёркиванием */
.choice-help .checkbox-field__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.choice-help .checkbox-field__link:hover {
	color: var(--color-action-primary);
}

/* Код товара в шапке карточки: в макете caption (0.75rem), для чтения мелко */
.product-header__code {
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
}

/* Ссылки в админку: одна линия с хлебными крошками, справа.
   Видны только залогиненному администратору. */
.product-page__crumbs {
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 16px;
	display: flex;
}
/* На хабе без крошек: иконка не занимает высоту, сидит в правом верхнем углу блока. */
.catalog-page,
.category-page,
.product-page {
	position: relative;
}
.product-page__crumbs--solo {
	position: absolute;
	top: 0;
	right: 4.5rem;
	margin: 0;
	z-index: 2;
	pointer-events: none;
}
.product-page__crumbs--solo .product-header__admin-link {
	pointer-events: auto;
}
.catalog-page > .product-page__crumbs,
.category-page > .product-page__crumbs {
	margin-bottom: 0;
}
.product-page__crumbs > .breadcrumbs {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	margin: 0;
}
.product-page__crumbs > .breadcrumbs .breadcrumbs__list {
	padding-inline: 0;
}
.product-page__admin {
	flex: 0 0 auto;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	display: flex;
}
.product-header__admin-link {
	color: var(--color-text-primary);
	border: 1px solid var(--color-grey-300);
	border-radius: var(--radius-search-action);
	width: 2rem;
	height: 2rem;
	align-items: center;
	justify-content: center;
	display: inline-flex;
}
.product-header__admin-link:hover {
	border-color: var(--color-action-primary);
	color: var(--color-action-primary);
}
.product-header__admin-icon {
	width: 1.25rem;
	height: 1.25rem;
}


/* Textarea в светлых формах (модалка консультации): в main.css лейбл заточен
   под тёмный блок choice-help, без этого на белом фоне он пропадает */
.textarea-field--form .textarea-field__label {
	color: var(--color-text-primary);
}
.textarea-field--form .textarea-field__textarea {
	border-color: var(--color-grey-300);
}

/*
 * Кнопка применения цены: тот же button-icon--red, что у поиска в шапке.
 * Стоит в ряду с полями от/до, без отдельной красной плашки.
 */
form.filter-bar__menu--range {
	margin: 0;
}

/*
 * Выпадающий список: скролл внутри, рамка с одинаковым padding.
 * Иначе max-height режет последнюю строку, а без лимита список на весь экран.
 */
.filter-bar--inline .filter-bar__menu:not(.filter-bar__menu--range) {
	max-height: 16.5rem;
	padding: var(--space-3xs);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.filter-bar--inline .filter-bar__menu-list {
	flex: 1 1 auto;
	min-height: 0;
	max-height: 100%;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.filter-bar__range-apply {
	flex: 0 0 auto;
	align-self: center;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* Две служебные ссылки карточки: сплошное подчёркивание из макета
   выглядит как линия инпута, штрихи отделяют их от обычных ссылок */
.config-list__link[data-config-list-more],
.price-card__link[href="#accessories"],
.product-page__description a.product-page__chars-link {
	text-decoration-line: underline;
	text-decoration-style: dashed;
	text-underline-offset: 0.2em;
}


/* Wi-Fi tile: one glyph + generation on the icon, like Best Buy / Zebra */
.product-features__icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.1rem;
	line-height: 1;
}
.product-features__icon:has(.product-features__badge) .product-features__glyph {
	width: 1.125rem;
	height: 1.125rem;
}
.product-features__badge {
	font-size: 0.5rem;
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.03em;
	white-space: nowrap;
	color: currentColor;
}
@media (max-width: 47.99em) {
	.product-features__icon:has(.product-features__badge) .product-features__glyph {
		width: 0.95rem;
		height: 0.95rem;
	}
	.product-features__badge {
		font-size: 0.4375rem;
	}
}

/* In-stock label on catalog cards */
.product-card__availability--in {
	color: #008000;
}

/* Pickup points: opening hours are not in the terminals tables yet,
   so an empty line must not add a gap inside the card */
.pickup-points__count {
	margin: 0 0 var(--space-sm);
	color: var(--color-text-primary);
	font-size: var(--font-size-heading-4);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-heading-4);
}
.pickup-points__count[hidden] {
	display: none;
}
.pickup-points__hours:empty {
	display: none;
}
.pickup-points__selected-hours:has(span:empty) {
	display: none;
}

/* Кнопки масштаба в правом нижнем углу. bottom оставляем из бандла: на живой
   карте он 3.75rem и поднимает кнопки над логотипом и копирайтом Яндекса */
.delivery-map__zoom {
	right: var(--space-xs-plus);
	left: auto;
}

/* Pickup point clusters on the delivery map: the bundle draws one marker per
   point, which turns into a heap of dots at city zoom */
.delivery-map__cluster {
	--tsd-carrier-color: var(--color-action-primary);
	--tsd-carrier-ink: var(--color-text-inverse);
	position: absolute;
	translate: -50% -50%;
	display: grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.5rem;
	border: 0.1875rem solid var(--tsd-carrier-color);
	border-radius: var(--radius-pill);
	background-color: var(--color-surface-primary);
	color: var(--tsd-carrier-color);
	font-family: inherit;
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 0 0.375rem #00000040;
}
.delivery-map__cluster:hover {
	background-color: var(--tsd-carrier-color);
	color: var(--tsd-carrier-ink);
}
.delivery-map__cluster:focus-visible {
	outline: 0.125rem solid var(--color-focus-ring);
	outline-offset: var(--space-hairline);
}

/* Каждая ТК на карте своего цвета и со своим знаком: иначе точки СДЭК и
   Деловых линий выглядят одинаковыми белыми кружками */
.delivery-map__cluster--cdek,
.delivery-map__marker--cdek {
	--tsd-carrier-color: #00b33c;
	--tsd-carrier-ink: var(--color-text-inverse);
	--tsd-carrier-mark: url("/assets/images/checkout/carriers/cdek-mark.png");
}
.delivery-map__cluster--dellin,
.delivery-map__marker--dellin {
	--tsd-carrier-color: #fcaf17;
	/* Белый знак на жёлтом почти не читается, у самих ДЛ он чёрный */
	--tsd-carrier-ink: #1c1c1c;
	--tsd-carrier-mark: url("/assets/images/checkout/carriers/dellin-mark.png");
}
.delivery-map__cluster--pek,
.delivery-map__marker--pek {
	--tsd-carrier-color: #242265;
	--tsd-carrier-ink: var(--color-text-inverse);
	--tsd-carrier-mark: url("/assets/images/checkout/carriers/pek-mark.png");
}
.delivery-map__cluster--cse,
.delivery-map__marker--cse {
	--tsd-carrier-color: #f47920;
	--tsd-carrier-ink: var(--color-text-inverse);
	--tsd-carrier-mark: url("/assets/images/checkout/carriers/cse-mark.png");
}
/* Подпись рядом с точкой дублировала бы знак ТК, а на плотной карте ещё и
   перекрывала соседние метки — подробности показывает плашка по клику */
.delivery-map__marker--carrier .delivery-map__marker-label {
	display: none;
}
/* Метка-капля со знаком ТК внутри: остриё приходится ровно на адрес пункта,
   поэтому базовый якорь -50% -100% оставляем как есть. Тень вешаем на
   контейнер: на самой метке filter применился бы до маски и дал бы
   прямоугольную тень */
.delivery-map__marker--carrier {
	--tsd-pin: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2031'%3E%3Cpath%20d='M12%200C5.4%200%200%205.4%200%2012c0%208.5%2012%2019%2012%2019s12-10.5%2012-19c0-6.6-5.4-12-12-12z'/%3E%3C/svg%3E");
	filter: drop-shadow(0 0.1875rem 0.25rem #00000040);
}
.delivery-map__marker--carrier .delivery-map__marker-dot {
	background-color: var(--tsd-carrier-color);
}
/* Специфичность как у правила выбранной точки, чтобы её красный цвет побеждал */
.delivery-map__marker--interactive.delivery-map__marker--carrier .delivery-map__marker-dot {
	position: relative;
	width: 2.25rem;
	height: 2.875rem;
	border-radius: 0;
	box-shadow: none;
	-webkit-mask: var(--tsd-pin) center / contain no-repeat;
	mask: var(--tsd-pin) center / contain no-repeat;
}
/* Знак сидит в круглой голове капли, а не по центру всей фигуры */
.delivery-map__marker--carrier .delivery-map__marker-dot::after {
	content: "";
	position: absolute;
	top: 0.5rem;
	left: 50%;
	width: 1.25rem;
	height: 1.25rem;
	translate: -50% 0;
	background-color: var(--tsd-carrier-ink);
	-webkit-mask: var(--tsd-carrier-mark) center / contain no-repeat;
	mask: var(--tsd-carrier-mark) center / contain no-repeat;
}
/* Выбранная точка красная, знак на ней белый независимо от цвета ТК */
.delivery-map__marker--selected.delivery-map__marker--carrier .delivery-map__marker-dot::after {
	background-color: var(--color-text-inverse);
}

/* Collapsed pickup point: without a card it reads as loose text on the page */
.pickup-points__selected {
	padding: var(--space-sm);
	border-radius: 1.375rem;
	background-color: var(--color-surface-primary);
}

/* Штатные 20rem на оформлении малы: на складской карте не видно ориентиров,
   а на карте ПВЗ помещается пара кварталов. Класс общий у всех трёх карт
   чекаута — склада, курьера и пунктов выдачи */
.delivery-map.checkout-page__delivery {
	height: 30rem;
}
@media (max-width: 47.99em) {
	.delivery-map.checkout-page__delivery {
		height: 24rem;
	}
}


/* Плашка пункта выдачи поверх карты: адрес, часы работы и кнопка выбора.
   Открывается кликом по метке только на широких экранах, на телефоне тот же
   пункт разворачивается в списке под картой (условие в main.js).
   Якорь у метки ТК — центр кружка, поэтому поднимаем плашку на его высоту */
.delivery-map__balloon {
	position: absolute;
	translate: -50% calc(-100% - 3.25rem);
	display: grid;
	gap: var(--space-2xs);
	justify-items: start;
	width: max-content;
	min-width: 15rem;
	max-width: 20rem;
	padding: var(--space-sm) var(--space-md) var(--space-md);
	border-radius: 1.375rem;
	background-color: var(--color-surface-primary);
	box-shadow: 0 0.75rem 1.5rem #00000026;
	text-align: left;
}
.delivery-map__balloon::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 1.5rem;
	height: 0.75rem;
	translate: -50% 0;
	background-color: var(--color-surface-primary);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* Плашка не закрывается после выбора — вместо кнопки показываем отметку */
.delivery-map__balloon-chosen {
	margin: var(--space-2xs) 0 0;
	color: var(--color-status-success);
	font-weight: 600;
}
.delivery-map__balloon-close {
	position: absolute;
	top: var(--space-2xs);
	right: var(--space-2xs);
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background-color: transparent;
	color: var(--color-text-secondary);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}
.delivery-map__balloon-close:hover {
	color: var(--color-text-primary);
}
.delivery-map__balloon-close:focus-visible {
	outline: 0.125rem solid var(--color-focus-ring);
	outline-offset: var(--space-hairline);
}
/* Место под крестик нужно только первой строке, а ей может быть и адрес,
   и название отделения над ним */
.delivery-map__balloon p:first-of-type {
	padding-right: 1.5rem;
}
.delivery-map__balloon-address {
	margin: 0;
	color: var(--color-text-primary);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.3;
}
.delivery-map__balloon-carrier,
.delivery-map__balloon-hours {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: 0.9375rem;
	line-height: 1.35;
}
.delivery-map__balloon-button {
	margin-top: var(--space-2xs);
}

/* Подсказки поиска: строка ведёт на карточку товара, цена и наличие видны до клика */
/* Список результатов - grid, а у grid-элемента минимальная ширина равна ширине
   содержимого: без min-width длинное название распирает панель и она едет вбок */
.search__result,
.search__result-link {
	min-width: 0;
}
.search__results {
	overflow-x: hidden;
}
.search__result-link {
	gap: var(--space-sm);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-label);
}
.search__result-link:hover {
	background-color: var(--color-pink-50);
}
.search__result-image {
	width: 2.75rem;
	height: 2.75rem;
}
.search__result-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-hairline);
	min-width: 0;
}
.search__result-title,
.search__result-meta {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.search__result-title {
	font-weight: var(--font-weight-medium);
}
.search__result-match {
	background: none;
	color: inherit;
	font-weight: var(--font-weight-semibold);
	box-shadow: inset 0 -0.125rem 0 var(--color-pink-200);
}
.search__result-meta {
	color: var(--color-text-muted);
	font-size: var(--font-size-caption);
	line-height: var(--line-height-caption);
}
.search__result-offer {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: var(--space-hairline);
	text-align: right;
}
.search__result-price {
	color: var(--color-action-primary);
	font-weight: var(--font-weight-semibold);
	white-space: nowrap;
}
.search__result-stock {
	color: var(--color-text-muted);
	font-size: var(--font-size-caption);
	line-height: var(--line-height-caption);
	white-space: nowrap;
}
/* Тот же зелёный, что у наличия на карточках каталога и в блоке цены на странице товара */
.search__result-stock[data-stock='in'] {
	color: #008000;
}
/* Заголовок раздела: оборудование отдельно от аксессуаров и запчастей */
.search__results-group {
	display: block;
	padding: var(--space-2xs) var(--space-xs) var(--space-3xs);
	color: var(--color-text-muted);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-caption);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
/* Первый заголовок стоит у самого верха панели, ему отбивка сверху не нужна */
.search__result--group:not(:first-child) .search__results-group {
	margin-top: var(--space-3xs);
	border-top: 0.0625rem solid var(--color-border-subtle);
	padding-top: var(--space-xs);
}
/* Подсветка выбранной стрелками строки. Мышь ведёт себя так же,
   чтобы клавиатура и курсор не спорили за активный пункт */
.search__result-link[data-active='true'] {
	background-color: var(--color-pink-50);
}
/* Пустая выдача: те же отступы, что у строки товара, текст слева */
.search__result--empty {
	padding: 0;
	border-bottom: none;
	text-align: left;
}
.search__result-empty {
	display: block;
	padding: var(--space-xs);
	color: var(--color-text-muted);
	font-size: var(--font-size-label);
	line-height: var(--line-height-label);
}
/* Строка "показать все результаты" - выход на полную выдачу, когда в подсказках нужного нет */
.search__result--all {
	margin-top: var(--space-3xs);
	border-top: 0.0625rem solid var(--color-border-subtle);
	padding-top: var(--space-3xs);
}
.search__result-all {
	justify-content: center;
	min-height: 2.5rem;
	color: var(--color-action-primary);
	font-weight: var(--font-weight-medium);
}
/* На узком экране цена важнее подписи под названием */
@media (max-width: 30rem) {
	.search__result-meta {
		display: none;
	}
	/* В одну строку модель не влезает: «Терминал сбора данных Urovo DT40» и
	   «...DT40S» обрезаются одинаково. Даём две строки, чтобы модель было видно */
	.search__result-title {
		display: -webkit-box;
		white-space: normal;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
	.search__result-link {
		align-items: flex-start;
	}
	.search__result-offer {
		padding-top: var(--space-hairline);
	}
}

/*
 * Подсказки поиска, меню каталога и модалки ставят body { overflow: hidden },
 * чтобы фон под ними не прокручивался. Вместе с этим пропадает полоса
 * прокрутки окна, и вся вёрстка прыгает на её ширину: вправо, когда подсказки
 * открылись, и обратно, когда строку стёрли. Стабильный жёлоб держит это место,
 * пока полоса скрыта. На системах с накладной полосой ширина жёлоба нулевая,
 * там сдвига и так не было.
 */
html {
	scrollbar-gutter: stable;
}

/*
 * Ярлык ОС (Android 10 и т.п.) на карточке товара. В старом дизайне это был
 * .os голубой (#29abe2) рядом с гарантией; в новом — такой же цвет у ui-tag.
 */
.ui-tag--os {
	background-color: #29abe2;
}

/*
 * Активная конфигурация на карточке товара: в поставке только розовый фон
 * и тонкая pink-обводка. У ПВЗ в корзине выбранная плитка с красным
 * inset-бордером — тот же приём здесь.
 */
.config-option:has(.config-option__input:checked) {
	border-color: transparent;
	background-color: var(--color-pink-50);
	box-shadow: inset 0 0 0 0.125rem var(--color-action-primary);
}

/*
 * Опции фильтров с чекбоксами (панель «Все фильтры» / side-panel): в поставке
 * color-text-muted (#9a9a9a) на сером фоне меню — низкий контраст. #525252 =
 * --color-grey-700 / text-secondary.
 */
.filter-bar--embedded .filter-bar__option,
.filter-bar:not(.filter-bar--inline):not(.filter-bar--embedded) .filter-bar__option {
	color: #525252;
}
.filter-bar--embedded .filter-bar__option[aria-selected="true"],
.filter-bar:not(.filter-bar--inline):not(.filter-bar--embedded) .filter-bar__option[aria-selected="true"] {
	color: var(--color-action-primary);
}

/*
 * Плашка «Фильтрация N» слева в шапке списка SKU: как filter-bar__summary —
 * красная, с крестиком, появляется когда выбраны параметры в панели фильтров.
 */
.config-list__header-main {
	align-items: center;
	gap: var(--space-sm);
	min-width: 0;
	flex: 1 1 auto;
	display: flex;
}
.config-list__header-main .config-list__title {
	flex: 1 1 auto;
	min-width: 0;
}
/* Как config-list__filter в макете: 36px, radius 12px, label 14px */
.config-list__header {
	gap: var(--space-xs);
}
.config-list__header > .config-list__filter {
	margin-left: auto;
}
.config-list__filter {
	box-sizing: border-box;
	height: 2.25rem;
	align-items: center;
	gap: var(--space-xs);
	border-radius: var(--radius-control);
	padding: var(--space-xs);
	background-color: var(--color-surface-secondary);
	color: var(--color-text-primary);
	font-family: inherit;
	font-size: var(--font-size-label);
	font-weight: 400;
	line-height: var(--line-height-label);
	white-space: nowrap;
	cursor: pointer;
	border: 0;
	flex: none;
	display: inline-flex;
}
.config-list__filter-icon {
	width: 0.75rem;
	height: 0.75rem;
	flex: none;
	display: block;
}
.config-list__filtering {
	box-sizing: border-box;
	height: 2.25rem;
	align-items: center;
	gap: var(--space-3xs);
	border-radius: var(--radius-control);
	padding: var(--space-xs);
	padding-right: var(--space-3xs);
	background-color: var(--color-action-primary);
	color: var(--color-text-inverse);
	font-family: inherit;
	font-size: var(--font-size-label);
	font-weight: 400;
	line-height: var(--line-height-label);
	white-space: nowrap;
	cursor: pointer;
	border: 0;
	flex: none;
	display: inline-flex;
}
.config-list__filtering[hidden] {
	display: none;
}
.config-list__filtering:hover {
	background-color: var(--color-red-600);
}
.config-list__filtering:focus-visible {
	outline: 0.125rem solid var(--color-focus-ring);
	outline-offset: -0.125rem;
	outline-color: var(--color-white);
}
.config-list__filtering-icon {
	width: 1rem;
	height: 1rem;
	flex: none;
	display: block;
}

/*
 * Схема размера на карточке рулона. У модификаций нет своего фото, поэтому в
 * сетке раздела все размеры серии идут с одной картинкой — различить их можно
 * только по числам. Рамка нарисована в пропорциях самой этикетки: 100×150
 * заметно вытянута вверх, 58×30 — в ширину, и это видно не читая подписей.
 * Ширину и высоту рамки ставит PHP инлайном, тут только оформление.
 */
.roll-size {
	position: absolute;
	top: var(--space-xs);
	right: var(--space-xs);
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
	align-items: center;
	justify-items: center;
	gap: 0.125rem;
	color: var(--color-text-secondary);
	font-size: 0.625rem;
	line-height: 1;
	pointer-events: none;
}
.roll-size__top {
	grid-column: 1;
	grid-row: 1;
}
.roll-size__box {
	grid-column: 1;
	grid-row: 2;
	border: 1px dashed var(--color-grey-400, #b3b3b3);
	border-radius: 0.125rem;
	/* Полупрозрачная заливка: на светлом фото рамки почти не видно */
	background-color: rgb(255 255 255 / 55%);
	display: block;
}
.roll-size__side {
	grid-column: 2;
	grid-row: 2;
}

/* На узких экранах карточка сама мелкая, схема начинает спорить с меткой
   «ХИТ» в противоположном углу — оставляем, но уменьшаем. */
@media (width <= 480px) {
	.roll-size {
		font-size: 0.5625rem;
		gap: 0.0625rem;
	}
}

/* category-card pixels variant (part 3) */
.category-card--pixels {
	display: grid;
	align-items: end;
	gap: 0 var(--space-md);
	padding: 0;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: 1fr auto;
}
.category-card__panel {
	position: relative;
	z-index: 1;
	align-self: stretch;
	background-color: var(--color-red-500);
	grid-column: 1 / -1;
	grid-row: 2;
	pointer-events: none;
	container-type: inline-size;
}
.category-card__pixels {
	position: absolute;
	bottom: calc(100% - 1px);
	left: 0;
	display: block;
	width: 100%;
	height: auto;
}
.category-card__pixels--mirror {
	display: none;
}
@container (width > 450px) {
	.category-card__pixels {
		width: 50%;
	}
	.category-card__pixels--mirror {
		display: block;
		left: calc(50% - 1px);
		width: calc(50% + 1px);
		transform: scaleX(-1);
	}
}
.category-card--pixels .category-card__content {
	max-width: none;
	padding: var(--space-md) 0 var(--space-md) var(--space-md);
	grid-column: 1;
	grid-row: 2;
}
@media (width < 768px) {
	.category-card--pixels .category-card__content {
		padding-top: 0;
	}
}
.category-card--pixels .category-card__content > * {
	max-width: var(--category-card-title-width);
}
.category-card--pixels .category-card__button {
	margin: 0 var(--space-md) var(--space-md) 0;
	grid-column: 2;
	grid-row: 2;
}

/* product-gallery swipe (part 3) */
.product-gallery__stage {
	touch-action: pan-y pinch-zoom;
}
.product-gallery__image {
	-webkit-user-drag: none;
	user-select: none;
}


/* Modal gallery: stage on top, thumbs row at bottom with left/right chevrons. */
.product-gallery--modal {
	flex-direction: column-reverse;
	align-items: stretch;
	justify-content: stretch;
	gap: var(--space-md);
	width: 100%;
	height: 100%;
	max-width: none;
	margin-inline: 0;
}
.product-gallery--modal .product-gallery__stage {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	min-height: 0;
	height: 100%;
	max-height: none;
	aspect-ratio: auto;
}
.product-gallery--modal .product-gallery__thumbs {
	flex: 0 0 auto;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 100%;
	max-height: none;
}
.product-gallery--modal .product-gallery__thumbs-list {
	flex-direction: row;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	overflow: auto hidden;
}
.product-gallery--modal .product-gallery__thumbs-arrow-icon {
	rotate: -90deg;
}
.product-gallery--modal .product-gallery__thumb {
	width: 5.875rem;
	height: 5.875rem;
}
@media (width < 768px) {
	.product-gallery--modal {
		align-items: center;
		justify-content: center;
		gap: 0.6875rem;
	}
	.product-gallery--modal .product-gallery__stage {
		flex: 1 1 auto;
		width: 100%;
		min-height: 0;
		height: auto;
		aspect-ratio: 358 / 344;
	}
	.product-gallery--modal .product-gallery__thumb {
		width: 4rem;
		height: 4rem;
	}
}

/* fixed-header descriptor on mobile (part 3) */
.fixed-header__descriptor {
	display: none;
}
@media (width < 768px) {
	.fixed-header__brand {
		display: flex;
		width: auto;
		height: 2.25rem;
		min-width: 0;
		flex: 0 1 auto;
		align-items: center;
		gap: 0.75rem;
	}
	.fixed-header__logo {
		width: 10.3125rem;
		flex: 0 0 auto;
	}
	.fixed-header__descriptor {
		display: block;
		width: 7.875rem;
		height: auto;
		min-width: 0;
		flex: 0 1 auto;
	}
}

/* popular-categories quick row: stop at last gray card (part 3) */
@media (width < 992px) {
	.popular-categories__quick {
		overflow: hidden;
	}
	.popular-categories__quick-scroller {
		overscroll-behavior-inline: contain;
	}
	.popular-categories__quick-item:last-child {
		scroll-snap-align: end;
	}
}
@media (width < 768px) {
	.popular-categories__quick {
		width: calc(100% + (var(--page-gutter) * 2));
		margin-left: calc(var(--page-gutter) * -1);
	}
}

/* email copy feedback */
.site-header__copy,
.mobile-menu__copy,
.fixed-header__copy,
.site-footer__copy {
	position: relative;
	color: var(--color-text-primary);
}
.site-header__copy svg,
.mobile-menu__copy svg,
.fixed-header__copy svg,
.site-footer__copy svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	transform-origin: center;
	transition: transform 0.15s ease;
}
.site-header__copy[data-copied='true'],
.mobile-menu__copy[data-copied='true'],
.fixed-header__copy[data-copied='true'],
.site-footer__copy[data-copied='true'] {
	color: var(--color-text-primary);
}
.site-header__copy[data-copy-press='true'] svg,
.mobile-menu__copy[data-copy-press='true'] svg,
.fixed-header__copy[data-copy-press='true'] svg,
.site-footer__copy[data-copy-press='true'] svg {
	transform: scale(0.82);
}
.site-header__copy[data-copied='true']::after,
.mobile-menu__copy[data-copied='true']::after,
.fixed-header__copy[data-copied='true']::after,
.site-footer__copy[data-copied='true']::after {
	position: absolute;
	bottom: calc(100% + 0.25rem);
	left: 50%;
	z-index: 5;
	width: max-content;
	max-width: 12rem;
	border: 0;
	border-radius: 999px;
	padding: 0.375rem 0.75rem;
	background-color: var(--color-grey-100);
	box-shadow: none;
	color: var(--color-text-primary);
	content: '\0421\043a\043e\043f\0438\0440\043e\0432\0430\043d\043e';
	font-size: 0.9375rem;
	font-weight: var(--font-weight-medium);
	line-height: 1.2;
	pointer-events: none;
	translate: -50% 0;
}
.site-header__copy[data-copied='true']::before,
.mobile-menu__copy[data-copied='true']::before,
.fixed-header__copy[data-copied='true']::before,
.site-footer__copy[data-copied='true']::before {
	content: none;
}
.site-footer__copy[data-copied='true']::after {
	background-color: var(--color-white, #fff);
}


/* Whole document card is a link, but the stretched :after must not eat the click. */
.document-card__action::after {
	pointer-events: none;
}

/* Document PDF viewer (/show/...).
   Old /show/ gave html and body a fixed height and the PDF plugin a
   block box of that height. A flex item stays blank in Safari. */
html:has(body.document-viewer),
body.document-viewer {
	height: 100%;
	overflow: hidden;
}
.document-viewer {
	margin: 0;
	height: 100%;
	min-height: 100%;
	background: var(--color-surface-secondary, #f1f1f1);
	color: var(--color-text-primary, #262626);
	font-family: var(--font-family-body, "Onest", sans-serif);
	display: flex;
	flex-direction: column;
}
.document-viewer__bar {
	display: block;
	padding: 0.9375rem var(--page-gutter, 1.5rem);
	background: var(--color-surface-primary, #fff);
	border-bottom: 0.0625rem solid var(--color-border-subtle, #e8e8e8);
}
.document-viewer__meta {
	display: block;
	min-width: 0;
	font-size: 1rem;
	line-height: 1.25;
}
.document-viewer__product {
	color: var(--color-red-500, #e00914);
	font-weight: var(--font-weight-medium, 500);
	text-decoration: none;
}
.document-viewer__product:hover {
	color: var(--color-red-600, #b20003);
	text-decoration: underline;
}
.document-viewer__sep {
	color: var(--color-text-primary, #262626);
}
.document-viewer__title {
	margin: 0;
	display: inline;
	color: var(--color-text-primary, #262626);
	font-weight: var(--font-weight-regular, 400);
}
.document-viewer__main {
	flex: 1 1 auto;
	min-height: 0;
	display: block;
	padding: 0;
}
.document-viewer__frame {
	display: block;
	width: 100%;
	height: calc(100vh - 3.5rem);
	border: 0;
	background: var(--color-grey-100, #f1f1f1);
}
.document-viewer__fallback {
	display: grid;
	place-items: center;
	min-height: 16rem;
	padding: var(--space-lg, 1.5rem);
	text-align: center;
	background: var(--color-surface-primary, #fff);
}
.document-viewer__fallback-link {
	color: var(--color-red-500, #e00914);
	font-weight: var(--font-weight-medium, 500);
}
@media (width < 768px) {
	.document-viewer__bar {
		padding: 0.625rem var(--page-gutter, 1rem);
	}
	.document-viewer__frame {
		height: calc(100vh - 4rem);
	}
}

@media (width < 480px) {
	body:has(.fixed-mobile-menu) .mango-callback .button-widget-open,
	body:has(.fixed-mobile-menu) .__jivoMobileButton {
		translate: 0 calc(-1 * (var(--fixed-mobile-menu-height, 3.75rem) + 0.5rem));
	}
}


/*
 * Конфигурация без остатка (класс config-option--unavailable, active != 1)
 * в поставке красится в --color-grey-300. Артикул, название и цена должны
 * оставаться как у остальных конфигураций: отсутствие на складе уже видно
 * по количеству «0 шт.»
 */
.config-option--unavailable .config-option__id,
.config-option--unavailable .config-option__description {
	color: var(--color-text-secondary);
}
.config-option--unavailable .config-option__price {
	color: var(--color-action-primary);
}
.config-table__row--unavailable .config-table__name,
.config-table__row--unavailable .config-table__price {
	color: var(--color-text-primary);
}

/* Sort dropdown in the config list header; scoped so the old category sort-select is untouched. */
.config-list__sort {
	position: relative;
	display: inline-flex;
	flex: none;
}
.config-list__header > .config-list__sort {
	margin-left: auto;
}
.config-list__header > .config-list__filter ~ .config-list__sort {
	margin-left: 0;
}
.config-list__sort .sort-select__dropdown {
	display: flex;
}
.config-list__sort .sort-select__toggle {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: var(--space-xs);
	border-radius: var(--radius-control);
	background-color: var(--color-surface-secondary);
	color: var(--color-text-primary);
	cursor: pointer;
	user-select: none;
	list-style: none;
	transition: background-color var(--transition-default);
}
.config-list__sort .sort-select__toggle::-webkit-details-marker {
	display: none;
}
.config-list__sort .sort-select__toggle::marker {
	content: none;
}
.config-list__sort .sort-select__dropdown[open] .sort-select__toggle {
	background-color: var(--color-grey-350);
}
.config-list__sort .sort-select__toggle:focus-visible {
	outline: 0.125rem solid var(--color-focus-ring);
	outline-offset: -0.125rem;
}
.config-list__sort .sort-select__label,
.config-list__sort .sort-select__value {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.config-list__sort .sort-select__icon {
	position: static;
	translate: none;
	display: block;
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}
.config-list__sort .sort-select__menu {
	position: absolute;
	top: calc(100% + var(--space-3xs));
	right: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	width: max-content;
	min-width: 100%;
	margin: 0;
	padding: var(--space-2xs) 0;
	border-radius: var(--radius-control);
	background-color: var(--color-surface-secondary);
	list-style: none;
}
.config-list__sort .sort-select__item {
	display: flex;
}
.config-list__sort .sort-select__option {
	width: 100%;
	padding: var(--space-3xs) var(--space-xs-plus);
	border: 0;
	background-color: transparent;
	color: var(--color-text-secondary);
	font-family: inherit;
	font-size: var(--font-size-label);
	line-height: var(--line-height-label);
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--transition-default);
}
.config-list__sort .sort-select__option:focus-visible {
	outline: 0.125rem solid var(--color-focus-ring);
	outline-offset: -0.125rem;
}
.config-list__sort .sort-select__option[aria-current='true'] {
	color: var(--color-text-subtle);
	cursor: default;
}
@media (hover: hover) {
	.config-list__sort .sort-select__toggle:hover {
		background-color: var(--color-grey-350);
	}
	.config-list__sort .sort-select__option:not([aria-current='true']):hover {
		color: var(--color-text-primary);
	}
}

/* Same sort dropdown next to the config table filters: rectangular, no shadow. */
.product-page__toolbar {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--space-md);
}
.product-page__toolbar-filters {
	flex: 1 1 auto;
	min-width: 0;
}
.config-list__sort--chip .sort-select__toggle {
	width: auto;
	height: 2.5rem;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-md);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	white-space: nowrap;
}
.config-list__sort--chip .sort-select__value {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
}
.config-list__sort--chip .sort-select__option {
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
}
@media (width < 480px) {
	.config-list__sort--chip .sort-select__toggle {
		width: 2rem;
		height: 2rem;
		gap: 0;
		padding: var(--space-2xs);
	}
	.config-list__sort--chip .sort-select__option {
		font-size: var(--font-size-label);
		line-height: var(--line-height-label);
	}
	.config-list__sort--chip .sort-select__value {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
}

/* Mobile: title on its own row, filter on the left and sort on the right below it. */
@media (width < 768px) {
	.config-list__header {
		flex-wrap: wrap;
		row-gap: var(--space-md);
	}
	.config-list__header-main {
		flex: 1 0 100%;
	}
	.config-list__header > .config-list__filter {
		order: 1;
		margin-left: 0;
	}
	.config-list__header > .config-list__filtering {
		order: 2;
	}
	.config-list__header > .config-list__sort,
	.config-list__header > .config-list__filter ~ .config-list__sort {
		order: 3;
		margin-left: auto;
	}
}

/* hero-slider: product photo over the shared background (panel/tsd_home_banner.php) */
.hero-slider__photo {
	position: absolute;
	top: 6%;
	right: 6%;
	display: block;
	width: auto;
	height: 88%;
	max-width: 48%;
	object-fit: contain;
	object-position: right center;
	pointer-events: none;
	user-select: none;
}
@media (width < 768px) {
	.hero-slider__photo {
		top: auto;
		right: var(--space-md);
		bottom: var(--space-md);
		height: 48%;
		max-width: 55%;
		object-position: right bottom;
	}
}

/*
 * Картинка баннера шире слайда на 5.625rem и в вёрстке прижата к левому краю
 * (inset: 0), поэтому правый край обрезается. Держим правый край картинки
 * у правого края слайда.
 */
.hero-slider__image {
	left: auto;
	right: 0;
}


/*
 * Разделитель крошек в вёрстке стоит ::before у следующего пункта, поэтому
 * при переносе строки слэш оказывается в начале новой. Вешаем его ::after
 * на текущий пункт: слэш остаётся справа от названия раздела.
 */
.breadcrumbs__item + .breadcrumbs__item::before {
	content: none;
}
.breadcrumbs__item:not(:last-child)::after {
	padding-inline: var(--space-xs);
	color: var(--color-link-secondary);
	content: "/";
}

/*
 * Между перенесёнными строками крошек интервал вдвое меньше.
 * Высота пункта остаётся 3rem, поэтому отступы сверху и снизу те же.
 * Класс вешает assets/js/homepage-compat.js только на пункты со второй строки.
 */
.breadcrumbs__item--nextline {
	margin-top: -1rem;
}