/* ============================================================
   Карточка товара — доработки дизайна.
   Отдельный файл, подключается последним: правки main.css
   не нужны, при обновлении темы этот слой переживает.
   ============================================================ */

/* иконки сезона: теперь svg вместо прежних png, размер фиксируем —
   у svg он задан атрибутом, но в вёрстке надёжнее продублировать */
.product-icons__icon,
.prev-icons__icon {
	width: 32px;
	height: 32px;
}

/* --- Шрифт один на весь сайт ------------------------------- */
/* Сторонние библиотеки навязывают свои семейства: jquery-ui —
   Trebuchet MS, magnific-popup — Arial. Перебиваем здесь, а не
   правкой чужих файлов: так правка переживёт их обновление.
   Иконочные шрифты (Font Awesome, Glyphicons) не трогаем. */
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button,
.mfp-close,
.mfp-counter {
	font-family: 'Nunito', sans-serif;
}

/* поля ввода по умолчанию не наследуют шрифт страницы */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
}

/* --- Раскладка: самостоятельные блоки на сером фоне -------- */
/* Тема рисует одну общую белую плашку на всю карточку товара.
   Вместо неё — отдельные блоки с зазорами и мягкой тенью;
   фон страницы у темы серый (#F2F3F5), они на нём и «парят». */
.us-product,
.us-product:hover {
	background: none;
	box-shadow: none;
}

.us-product-top {
	align-items: flex-start;
	gap: 16px;
	border-bottom: 0;
}

/* Блоки под карточкой — описание, характеристики, отзывы — тоже
   самостоятельные. Общее правило, чтобы не перечислять каждый. */
.us-product > * {
	margin-bottom: 16px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.us-product > .us-product-top {
	margin-bottom: 16px;
	background: none;
	box-shadow: none;
}

/* у описания нет верхнего отступа — отдельной карточке он нужен */
.us-product > .us-product-description-cont {
	padding-top: 24px;
}

/* разделительные линии между блоками теперь лишние */
.us-product > .us-product-attributes {
	border-top: 0;
	border-bottom: 0;
}

.us-product-extra-tab-content + .us-product-extra-tab-content {
	border-top: 0;
}

.us-product > .us-reviews {
	padding-bottom: 24px;
	background: #fff;
}

/* у текста модели своих отступов не было */
.us-product > .tyre-model-text {
	padding: 24px 30px;
}

/* --- Плашки параметров под фотографией --------------------- */
/* Под снимком то, что покупатель сверяет глазами: сезон, транспорт,
   шипы, типоразмер и индексы с расшифровкой. Европейская этикетка
   отделена линией — её данные есть не у всех шин, и ярус просто
   не рисуется. Ссылка на все размеры модели — такая же плашка:
   это тот же товар в других цифрах, а не отдельный раздел. */
.us-tags {
	margin-top: 10px;
	/* у колонки с фотографией в теме text-align: center, а плашки
	   читаются слева — как заголовок и цена в правой колонке */
	text-align: left;
}

.us-tags__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

/* ярусы держатся отступом, без линеек: плашки и сами отделяют себя
   друг от друга рамками */
.us-tags__group + .us-tags__group {
	margin-top: 8px;
}

.us-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border: 1px solid #e3e8ee;
	border-radius: 8px;
	background: #f7f8fa;
	color: #1b2838;
	font-size: 12px;
	line-height: 18px;
	white-space: nowrap;
	cursor: default;
}

.us-tag .us-ico {
	color: #5c6673;
}

.us-tag__img {
	width: 16px;
	height: 16px;
}

/* плашка только с иконкой: тип транспорта узнаётся по рисунку,
   а расшифровка уходит в подсказку */
.us-tag--ico {
	padding: 5px 9px;
}

/* Типоразмер и модель — переходы, и это видно по виду: синяя
   заливка и жирный текст против серых плашек-подписей рядом.
   Наведение добавляет только плотности, чтобы плашка не выглядела
   неактивной до того, как на неё навели. */
a.us-tag {
	border-color: #1b2838;
	background: #f4f8fd;
	color: #1b2838;
	font-weight: 700;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

/* наведение уводит рамку и текст в синий: заливка остаётся прежней,
   меняется только то, за чем следит глаз */
a.us-tag:hover {
	border-color: #cfe0f3;
	color: #1f7ae0;
	text-decoration: none;
}

/* сезонные плашки — та же пастель, что в превью товара */
.us-tag--winter {
	border-color: #d3e7fa;
	background: #eaf4fe;
}

.us-tag--summer {
	border-color: #f7e4bb;
	background: #fdf5e4;
}

.us-tag--all {
	border-color: #cfe8d3;
	background: #eef8f0;
}

/* --- европейская этикетка ---------------------------------- */
.us-tag__ico {
	display: inline-block;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	background: #5c6673;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.us-tag__ico--fuel {
	-webkit-mask-image: url("../img/gas.svg");
	mask-image: url("../img/gas.svg");
}

/* Снежинка в окне — та же, что на сезонных плашках, но маской:
   своей голубой она выбивалась из ряда серых иконок. */
.us-tag__ico--snow {
	-webkit-mask-image: url("/image/icons/season-winter.svg");
	mask-image: url("/image/icons/season-winter.svg");
}

.us-tag__ico--wet {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 15a4 4 0 0 1 .6-8 5.5 5.5 0 0 1 10.2 1.4A3.5 3.5 0 0 1 17.3 15z'/%3E%3Cpath d='M8 18l-1 2.5M12 18l-1 2.5M16 18l-1 2.5'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 15a4 4 0 0 1 .6-8 5.5 5.5 0 0 1 10.2 1.4A3.5 3.5 0 0 1 17.3 15z'/%3E%3Cpath d='M8 18l-1 2.5M12 18l-1 2.5M16 18l-1 2.5'/%3E%3C/g%3E%3C/svg%3E");
}

.us-tag__ico--weight {
	-webkit-mask-image: url("../img/ico-weight.svg");
	mask-image: url("../img/ico-weight.svg");
}

.us-tag__ico--speed {
	-webkit-mask-image: url("../img/ico-speed.svg");
	mask-image: url("../img/ico-speed.svg");
}

.us-tag__ico--noise {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3L11.5 6v12L7 14.5H4z'/%3E%3Cpath d='M15 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3L11.5 6v12L7 14.5H4z'/%3E%3Cpath d='M15 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/g%3E%3C/svg%3E");
}

.us-tag__db {
	color: #5c6673;
}

/* Буква класса — в своём цвете шкалы этикетки: от зелёного A
   до красного E. Это не наши токены, а цвета самой этикетки,
   по ним класс узнаётся без чтения. Жёлтый C притемнён, иначе
   белая буква на нём не читается. */
.us-grade {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 5px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.us-grade--a {
	background: #0f8a3c;
}

.us-grade--b {
	background: #5aa832;
}

.us-grade--c {
	background: #c1a500;
}

.us-grade--d {
	background: #e8882b;
}

.us-grade--e {
	background: #d92b2b;
}

/* --- переходы под плашкой ---------------------------------- */
/* Висят на сером фоне страницы: это не данные шины, а ссылки.
   Стрелка справа от подписи говорит, что по ним переходят. */
.us-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
	margin-top: 10px;
}

.us-links .us-tag--sizes {
	white-space: normal;
}

.us-tag__arrow {
	display: inline-block;
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- кнопка «что означает этикетка» ------------------------ */
.us-info-btn,
.us-info-ico {
	display: inline-block;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	background: #8a8f98;
	-webkit-mask: url("../img/info-fill.svg") no-repeat center / contain;
	mask: url("../img/info-fill.svg") no-repeat center / contain;
}

button.us-info-btn {
	margin: 0 0 0 2px;
	padding: 0;
	border: 0;
	cursor: pointer;
	transition: background .15s ease;
}

button.us-info-btn:hover {
	background: #1f7ae0;
}

/* заголовок этикетки в характеристиках — тоже кнопка */
button.us-specs__label-title {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #5c6673;
	font-size: 12px;
	cursor: pointer;
}

button.us-specs__label-title:hover {
	color: #1f7ae0;
}

button.us-specs__label-title:hover .us-info-ico {
	background: #1f7ae0;
}

/* --- сноска под характеристиками --------------------------- */
.us-specs__note {
	margin: 14px 0 0;
	color: #8a8f98;
	font-size: 11px;
}

/* --- окно про европейскую этикетку ------------------------- */
.us-win {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.us-win__back {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 34, .55);
}

.us-win__box {
	position: relative;
	width: 100%;
	max-width: 860px;
	max-height: calc(100vh - 40px);
	padding: 28px 30px;
	overflow-y: auto;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 20px 60px rgba(16, 32, 56, .3);
}

button.us-win__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: #f2f3f5;
	cursor: pointer;
}

button.us-win__close:before,
button.us-win__close:after {
	content: '';
	position: absolute;
	top: 14px;
	left: 8px;
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background: #5c6673;
}

button.us-win__close:before {
	transform: rotate(45deg);
}

button.us-win__close:after {
	transform: rotate(-45deg);
}

button.us-win__close:hover {
	background: #e8ebf0;
}

.us-win__title {
	margin-bottom: 10px;
	padding-right: 40px;
	color: #1b2838;
	font-size: 20px;
	font-weight: 700;
}

.us-win__intro {
	margin: 0 0 20px;
	color: #5c6673;
	font-size: 14px;
	line-height: 1.5;
}

.us-win__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 26px;
}

.us-win__item {
	display: flex;
	gap: 12px;
	min-width: 0;
}

.us-win__ico {
	width: 26px;
	height: 26px;
	margin-top: 2px;
	flex: 0 0 auto;
}

.us-win__head {
	margin-bottom: 3px;
	color: #1b2838;
	font-size: 14px;
	font-weight: 700;
}

.us-win__item p {
	margin: 0;
	color: #5c6673;
	font-size: 13px;
	line-height: 1.5;
}

@media (max-width: 767px) {
	.us-win__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.us-win__box {
		padding: 24px 18px;
	}
}

/* --- Блок фото ------------------------------------- */
/* Ширина окна вернута к исходным 40%. */
.us-product-top .us-product-left {
	width: calc(40% - 16px);
	/* Нижнего отступа нет: на него опирается липкость — колонка
	   держится, пока её низ не дойдёт до низа ряда. Отступ в 16px
	   отпускал её на 16px раньше. */
	margin-bottom: 0;
	padding: 0;
	border-right: 0;
}

/* Под последним блоком правой колонки у темы висели два пустых
   обёртки с padding-bottom по 20px — для шин в них ничего нет
   (ни опций, ни отдельной кнопки быстрого заказа), а ряд из-за них
   был на 40px ниже блока гарантии, и фотография отлипала слишком
   поздно. Зазор до табов возвращаем честным отступом ряда. */
.us-product-right .us-product-one-click__wrap,
.us-product-right .us-product-action {
	padding: 0;
}

/* Белая плашка — отдельная обёртка внутри колонки: ссылки на модель
   и типоразмер должны висеть под ней на сером фоне, а не внутри. */
.us-pcard {
	padding: 20px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.us-product-top .us-product-right {
	width: 60%;
	padding: 0;
	background: none;
}

/* окно стало шире, но само колесо растёт лишь слегка */
.us-product-photo-main img {
	max-width: 82%;
	height: auto;
}

/* кнопки «в избранное» и «сравнить» прижаты к углу — отодвигаем
   от скругления */
/* Закладки и сравнение с фотографии убраны в плашку названия,
   старое правило их положения больше не нужно. */

/* --- Название справа от фото ------------------------------- */
.us-product-right .us-product-title-block {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	margin-bottom: 16px;
	border-bottom: 0;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.us-product-right .us-product-title-block h1 {
	margin: 0;
	font-size: 26px;
	line-height: 1.25;
	font-weight: 700;
}

/* У темы h1 несёт декоративную линию снизу (main.css, .us-main-shop-title:after).
   В карточке товара блок и так отделён, вторая черта лишняя. */
.us-product-title-main .us-main-shop-title:after {
	display: none;
}

/* правый столбец плашки названия: логотип, под ним кнопки */
.us-product-right .us-product-side {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

.us-product-right .us-product-brand-logo {
	flex: 0 0 auto;
	max-width: 110px;
}

.us-product-tools {
	display: flex;
	gap: 8px;
}

/* тот же вид, что у кнопок в превью товара; тег в селекторе нужен,
   чтобы перебить правило темы html [type=button] */
button.us-product-tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: #f7f8fa;
	color: #5c6673;
	font-size: 13px;
	transition: background .15s ease, color .15s ease;
}

button.us-product-tool:hover {
	background: #eef4fb;
	color: #1f7ae0;
}

.us-product-right .us-product-brand-logo img {
	max-width: 100%;
	height: auto;
}

/* Если логотип бренда не загружен, вместо картинки — название кнопкой.
   Таких брендов в каталоге сорок, место рядом с названием не пустует. */
.us-product-right .us-product-brand-logo--text {
	max-width: none;
}

.us-brand-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 16px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #f7f8fa;
	color: #1b2838;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.us-brand-btn:hover {
	border-color: #d4dde6;
	background: #eef1f5;
	color: #1b2838;
	text-decoration: none;
}

/* --- Заголовок: название и мета слева, логотип справа ----- */
.us-product-title-main {
	flex: 1 1 auto;
	min-width: 0;
}

/* строка с наличием и кодом товара не должна липнуть к названию */
.us-product-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 15px;
}

/* --- Название в две строки -------------------------------- */
.us-main-shop-title .us-title-head {
	display: block;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.2;
}

.us-main-shop-title .us-title-size {
	display: block;
	margin-top: 3px;
	font-size: 18px;
	font-weight: 400;
	color: #6b7280;
	line-height: 1.3;
}

/* --- Лейбл наличия: галочка в круге ----------------------- */
.us-product-stock-label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px 6px 10px;
	border-radius: 20px;
	background: #eaf7ee;
	color: #1f7a38;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.us-product-stock-label i {
	font-size: 15px;
	color: #2fa84f;
}

/* Товара нет: на месте кнопки покупки — спокойная серая плашка.
   Размеры и скругление берёт из общего правила кнопок выше,
   здесь только цвет. */
.us-product-actions .us-product-btn-out {
	border: 1px solid #e3e8ee;
	background: #eef1f5;
	color: #8a8f98;
	cursor: default;
}

.us-product-btn-out .us-cart-ico {
	opacity: 0.5;
}

html[data-theme="dark"] .us-product-actions .us-product-btn-out {
	border-color: #27333f;
	background: #1f2b39;
	color: #8b97a6;
}

.us-product-stock-label.is-out {
	background: #fdeaea;
	color: #b02a2a;
}

.us-product-stock-label.is-out i {
	color: #d64545;
}

/* Количество появляется только после выбора склада. Пока его нет,
   пустой span убираем из потока — иначе gap лейбла даёт лишний отступ. */
.us-product-stock-qty {
	font-weight: 700;
}

.us-product-stock-qty:empty {
	display: none;
}

/* --- Блок цены и кнопок ----------------------------------- */
.us-product-right .us-product-info {
	position: relative;
	padding: 20px;
	margin-bottom: 16px;
	border-bottom: 0;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.us-price-block {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 20px;
}

/* у темы у цены была серая плашка с паддингами — фон не нужен */
.us-price-actual {
	padding: 0;
	margin-right: 0;
	background: none;
}

.us-price-from {
	margin-right: 6px;
	font-size: 0.62em;
	font-weight: 500;
	color: #8a8f98;
}

/* подсказка стоит справа от цены, формой повторяет кнопку */
/* Подсказка занимает правую часть блока во всю его высоту и вынута
   из потока. Пока она стояла строкой с ценой, её высота задавала
   высоту строки, и после выбора склада блок подпрыгивал.
   Фон заметно голубее прежнего: он почти совпадал с кнопкой
   «Быстрый заказ» и читался как ещё одна кнопка. */
.us-product-right .us-product-info--hinted {
	padding-right: 310px;
}

.us-product-info .us-action-hint {
	position: absolute;
	top: 20px;
	right: 20px;
	bottom: 20px;
	display: flex;
	align-items: center;
	width: 275px;
	margin: 0;
	/* отступы со всех сторон одинаковые */
	padding: 16px;
	border: 0;
	border-radius: 12px;
	/* подложка прозрачной заливкой: светлее плотного цвета
	   и сама подстраивается под тёмную тему */
	background: rgba(31, 122, 224, .10);
	color: #46617f;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	cursor: default;
}

@media (max-width: 1199px) {
	.us-product-right .us-product-info--hinted {
		padding-right: 20px;
	}

	.us-product-info .us-action-hint {
		position: static;
		width: auto;
		margin-top: 14px;
	}
}

/* --- Кнопки покупки --------------------------------------- */
.us-product-actions {
	display: flex;
	align-items: stretch;
	gap: 10px;
	flex-wrap: wrap;
	margin: 18px 0 0;
}

.us-product-actions .us-action-buy,
.us-product-actions .us-action-quick,
.us-product-actions .us-product-btn-out {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: auto;
	min-height: 52px;
	margin-top: 0;
	padding: 14px 20px;
	border: 0;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-transform: none;
	cursor: pointer;
}

/* Тема прячет #button-cart целиком (main.css, .city-items-блок).
   Кнопка нужна сразу, поэтому перебиваем селектором с классом — вес 1,1,0. */
.us-product-actions #button-cart {
	display: inline-flex;
}

/* «Купить сейчас» — основная, тёмная */
.us-product-actions .us-action-buy {
	background: #1b2838;
	color: #fff;
}

.us-product-actions .us-action-buy:hover {
	background: #25374d;
}

/* «Быстрый заказ» — второстепенная, светлая */
.us-product-actions .us-action-quick {
	background: #eef1f5;
	color: #2b3647;
}

.us-product-actions .us-action-quick:hover {
	background: #e2e7ee;
}


/* --- Иконка молнии у быстрого заказа --------------------- */
.us-bolt-ico {
	display: inline-block;
	width: 21px;
	height: 21px;
	background-color: currentColor;
	-webkit-mask: url("../img/bolt-icon.svg") no-repeat center / contain;
	mask: url("../img/bolt-icon.svg") no-repeat center / contain;
}

/* Квадратные кнопки-инструменты: значок считался от размера
   текста кнопки (13px) и занимал чуть больше трети. Контурному
   рисунку этого мало — задаём явно. */
.us-card__tools a .fa-heart,
.us-card__tools a .fa-sliders-h,
button.us-product-tool .fa-heart,
button.us-product-tool .fa-sliders-h,
.us-module-buttons-link .fa-heart,
.us-module-buttons-link .fa-sliders-h {
	width: 18px;
	height: 18px;
}

/* --- Корзина и избранное: присланные значки ---------------- */
/* Тема рисует их шрифтом Font Awesome в полутора десятках мест.
   Правим не шаблоны, а сам значок: глиф гасим, рисунок подаём
   маской — цвет берётся от текста кнопки, как у наших остальных. */
.fa-heart,
.fa-shopping-cart,
.fa-sliders-h,
.fa-chart-bar,
.us-ico--cart,
.us-ico--favor,
.us-ico--compare {
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	vertical-align: -0.15em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fa-heart:before,
.fa-shopping-cart:before,
.fa-sliders-h:before,
.fa-chart-bar:before {
	content: none;
}

.fa-heart,
.us-ico--favor {
	-webkit-mask-image: url("../img/ico-favor.svg");
	mask-image: url("../img/ico-favor.svg");
}

.fa-shopping-cart,
.us-ico--cart {
	-webkit-mask-image: url("../img/ico-cart.svg");
	mask-image: url("../img/ico-cart.svg");
}

.fa-sliders-h,
.fa-chart-bar,
.us-ico--compare {
	-webkit-mask-image: url("../img/ico-compare.svg");
	mask-image: url("../img/ico-compare.svg");
}

/* На тёмной боковой плашке значки залитые: там они крупные
   и стоят на цветной подложке, контурные на ней теряются. */
/* Блочную коробку значка `text-align: center` темы не центрует —
   выравниваем её сами, иначе значок жмётся к левому краю. */
.oct-fixed-bar-link i {
	margin: 0 auto;
}

.oct-fixed-bar .fa-heart {
	-webkit-mask-image: url("../img/ico-favor-full.svg");
	mask-image: url("../img/ico-favor-full.svg");
}

.oct-fixed-bar .fa-shopping-cart {
	-webkit-mask-image: url("../img/ico-cart-full.svg?v=2");
	mask-image: url("../img/ico-cart-full.svg?v=2");
}

/* у залитого сравнения стрелки — дырка в круге, сквозь неё
   видно подложку плашки */
.oct-fixed-bar .fa-chart-bar {
	-webkit-mask-image: url("../img/ico-compare-full.svg");
	mask-image: url("../img/ico-compare-full.svg");
}

/* В мобильной полосе значки были картинками в белой заливке,
   теперь маска — цвет задаём явно, подложка там синяя. */
.us-mobile-top-btn .us-ico--cart,
.us-mobile-top-btn .us-ico--favor,
.us-mobile-top-btn .us-ico--compare {
	width: 26px;
	height: 26px;
	vertical-align: middle;
	color: #fff;
}

/* --- Иконка корзины -------------------------------------- */
/* Красим через mask: цвет наследуется от текста кнопки,
   отдельные файлы под каждый цвет не нужны. */
.us-cart-ico {
	display: inline-block;
	width: 23px;
	height: 23px;
	background-color: currentColor;
	-webkit-mask: url("../img/ico-cart.svg") no-repeat center / contain;
	mask: url("../img/ico-cart.svg") no-repeat center / contain;
}

/* --- Склады ----------------------------------------------- */
/* Единый блок: все города внутри одной белой карточки. */
.us-offers {
	margin-top: 0;
	margin-bottom: 16px;
	padding: 14px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

/* Плашка — одна строка: данные слева, цена и корзина справа */
.us-offers__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 14px;
	margin-bottom: 8px;
	border: 1px solid #eef0f2;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.us-offers__item:last-of-type {
	margin-bottom: 0;
}

.us-offers__item:hover {
	border-color: #d4dde6;
	background: #fafbfc;
}

/* Выбранная плашка подсвечена сдержанно: та же лёгкая заливка, что
   при наведении, но рамка на тон темнее и мягкая тень — так видно,
   какая выбрана, и без яркого кольца, которое раньше перетягивало
   внимание с цены. */
.us-offers__item--picked {
	border-color: #c3cfdc;
	background: #fafbfc;
	box-shadow: 0 1px 6px rgba(16, 32, 56, .08);
}

/* Зелёная заливка принадлежит лучшему предложению, но горит только
   пока оно выбрано: переключился на другой город — заливка ушла,
   и видно, что показана уже не лучшая цена. */
.us-offers__item--best.us-offers__item--picked {
	background: #f3faf5;
	border-color: #a8d8b4;
}

.us-offers__item--hidden {
	display: none;
}

.us-offers__price-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.us-offers__price {
	font-size: 19px;
	font-weight: 700;
	color: #1b2838;
	white-space: nowrap;
}

/* Метка лучшей цены — пульсирующий кружок слева от цены. Текст
   показывается подсказкой у курсора, её ведёт table.js. */
.us-offers__best-dot {
	position: relative;
	width: 10px;
	height: 10px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: #2fa84f;
}

.us-offers__best-dot:after {
	content: '';
	position: absolute;
	top: -4px;
	right: -4px;
	bottom: -4px;
	left: -4px;
	border: 2px solid rgba(47, 168, 79, .55);
	border-radius: 50%;
	animation: us-dot-pulse 1.9s ease-out infinite;
}

@keyframes us-dot-pulse {
	0%   { transform: scale(.6); opacity: .9; }
	70%  { transform: scale(1.55); opacity: 0; }
	100% { transform: scale(1.55); opacity: 0; }
}

/* подсказка, которую ведёт за курсором table.js */
.us-tip {
	position: fixed;
	z-index: 1080;
	padding: 6px 11px;
	border-radius: 7px;
	background: #1b2838;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	/* Затухание медленнее появления: исчезающая подсказка не мешает
	   читать страницу, а резкий обрыв заметен сильнее, чем резкий
	   показ. Сдвиг на 5 px даёт ощущение всплывания, а не мигания. */
	transform: translateY(5px);
	transition: opacity .42s ease, transform .42s ease;
}

.us-tip.is-on {
	opacity: 1;
	transform: translateY(0);
	transition: opacity .26s ease-out, transform .26s ease-out;
}

.us-offers__buy {
	flex: 0 0 auto;
	cursor: default;
}

.us-offers__buy .us-offers__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 40px;
	border: 0;
	border-radius: 10px;
	background: #1f7ae0;
	color: #fff;
	cursor: pointer;
	transition: background .15s ease;
}

.us-offers__buy .us-offers__btn:hover {
	background: #1765bd;
}

/* карточки данных — в ряд, одной высоты */
.us-offers__facts {
	display: flex;
	align-items: stretch;
	gap: 8px;
	flex-wrap: wrap;
	flex: 1 1 auto;
	margin: 0;
}

.us-offers__fact {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border: 1px solid #eef0f2;
	border-radius: 10px;
	background: #f7f8fa;
	flex: 0 0 auto;
}

.us-offers__fact i {
	font-size: 15px;
	color: #1f7ae0;
	flex: 0 0 auto;
}

.us-offers__fact--stock i {
	color: #2fa84f;
}

.us-offers__fact-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.15;
}

.us-offers__fact-value {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #1b2838;
	white-space: nowrap;
}

.us-offers__fact-label {
	display: block;
	font-size: 11px;
	color: #9aa0a8;
	white-space: nowrap;
}

.us-offers__flag {
	display: inline-block;
	width: 16px;
	height: 11px;
	margin-right: 4px;
	vertical-align: -1px;
	border-radius: 2px;
	background-size: cover;
	background-position: center;
}

.us-offers__fact .us-offers__flag {
	width: 20px;
	height: 14px;
	margin: 0;
	border-radius: 2px;
	flex: 0 0 auto;
}

.us-offers__more {
	width: 100%;
	margin-top: 8px;
	padding: 11px;
	border: 1px solid #eef0f2;
	border-radius: 12px;
	background: #f7f8fa;
	color: #1f7ae0;
	font-size: 14px;
	cursor: pointer;
}

.us-offers__more:hover {
	background: #eef1f5;
}

/* --- Информационная плашка под складами ------------------- */
.us-product-note {
	margin-bottom: 16px;
	padding: 16px 18px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

/* иконка «Важно» — в шапке блока, тёмная и без подложки,
   как у доставки, оплаты и гарантии */
.us-terms__ico--info {
	-webkit-mask-image: url("../img/info-circle.svg");
	mask-image: url("../img/info-circle.svg");
}

.us-product-note__body {
	flex: 1 1 auto;
	min-width: 0;
}

.us-product-note__body p {
	margin: 0 0 10px;
	color: #6b7280;
	font-size: 13px;
	line-height: 1.5;
}

.us-product-note__body p:last-child {
	margin-bottom: 0;
}

/* --- Перебиваем .city-items span { display: none } из main.css -----
   Плашка склада сохраняет класс city-items ради старой табличной
   логики, а тема прячет внутри него все span. Селектор темы весит
   0,2,0 — поэтому здесь class + тег, чтобы вес был 0,2,1. */
.us-offers__item span.us-offers__fact-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.15;
}

.us-offers__item span.us-offers__fact-value,
.us-offers__item span.us-offers__fact-label,
.us-offers__item span.us-offers__flag,
.us-offers__item span.us-offers__best-dot {
	display: block;
}

.us-offers__item span.us-cart-ico {
	display: inline-block;
}

/* --- Мобильные -------------------------------------------- */
@media (max-width: 991px) {
	.us-product-top .us-product-left,
	.us-product-top .us-product-right {
		width: 100%;
	}
}

@media (max-width: 767px) {
	/* Сначала факты, потом цена с кнопкой: в узкой плашке данные
	   склада важнее порядка «цена сверху», да и цена под фактами
	   читается как итог. Ширину задаём прямо: у темы на эти узлы
	   есть свои правила, и одного flex-basis не хватало — факты
	   сжимались по содержимому и вставали по центру. */
	.us-offers__item {
		flex-wrap: wrap;
	}

	/* Тема на узких экранах превращает .city-items в центрированную
	   колонку (main.css), а наша плашка носит этот класс ради старой
	   табличной логики. Возвращаем строку и левый край: иначе цена
	   вставала по центру, а кнопка уезжала на отдельную строку. */
	.us-offers__item.city-items {
		flex-direction: row;
		text-align: left;
	}

	.us-offers__item .us-offers__facts {
		width: 100%;
		flex: 1 1 100%;
		order: 1;
	}

	.us-offers__item .us-offers__price-wrap {
		order: 2;
		/* не растягиваем: с flex-grow цена занимала всю строку и кнопка
		   уезжала на следующую, хотя рядом было место */
		flex: 0 1 auto;
		margin-left: 0;
	}

	.us-offers__item .us-offers__buy {
		order: 3;
		width: auto;
		flex: 0 0 auto;
		margin-left: auto;
	}
}

@media (max-width: 575px) {
	.us-product-right .us-product-title-block h1 {
		font-size: 21px;
	}

	.us-price-block .us-action-hint {
		max-width: 100%;
	}

	.us-product-actions .us-action-buy,
	.us-product-actions .us-action-quick {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.us-offers__facts {
		gap: 6px;
	}

	.us-offers__fact {
		padding: 6px 9px;
	}
}

/* ============================================================
   Шапка сайта: две плашки одним блоком, парящим на сером фоне.
   Первая — лого со слоганом, поиск, подбор по авто, справа
   контакты над кнопками входа. Вторая прилегает снизу
   и остаётся видимой при прокрутке.
   ============================================================ */

/* У темы в main.css стоит body { overflow-x: hidden }, а это делает body
   контейнером прокрутки и ломает position: sticky. overflow-x: clip
   обрезает так же, но контейнера прокрутки не создаёт. */
html,
body {
	overflow-x: clip;
}

/* Адрес, часы и вход переехали в первую плашку, поэтому верхняя полоса
   темы на широких экранах не нужна. На мобильных она остаётся: там в ней
   бургер и панель с информацией, как и мобильное меню в menu-row. */
@media (min-width: 992px) {
	nav#top,
	.menu-row {
		display: none;
	}
}

/* У темы header { padding: 32px 0 } — из-за нижнего отступа между
   плашками оставался серый зазор. Обнуляем, плашки должны стыковаться. */
.us-head {
	padding: 14px 0 0;
}

.us-head__card {
	padding: 16px 20px 14px;
	border-radius: 14px 14px 0 0;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.us-head__main {
	display: flex;
	align-items: center;
	gap: 20px;
}

/* --- лого и слоган ---------------------------------------- */
.us-head__brand {
	flex: 0 0 auto;
	max-width: 200px;
}

/* Размер лого задаёт тема (.us-logo-img), свой max-width не навязываем */
.us-head__brand img {
	display: block;
	height: auto;
}

.us-head__name {
	font-size: 20px;
	font-weight: 800;
	color: #1b2838;
	white-space: nowrap;
}

/* Слоган обычным кеглем, без подгонки под ширину лого.
   Цвет — как у кнопки «Купить сейчас». */
.us-head__slogan {
	margin-top: 4px;
	color: #1b2838;
	font-size: 11px;
	line-height: 1.25;
}

/* --- поиск ------------------------------------------------- */
/* Поиск забирает всю свободную ширину — до линии у блока контактов. */
.us-head__search {
	flex: 1 1 auto;
	min-width: 220px;
}

/* input-group темы раскладываем в одну строку: у .form-control
   стоит width 100%, из-за него кнопка уезжала под поле */
.us-head__search #search {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	height: 48px;
	padding: 0;
	border: 1px solid #e3e8ee;
	border-radius: 12px;
	background: #fff;
}

/* лупа внутри поля слева */
.us-head__search #search:before {
	content: "\f002";
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 14px;
	color: #9aa0a8;
	pointer-events: none;
	z-index: 2;
}

.us-head__search .header-input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 100%;
	padding: 0 14px 0 42px;
	border: 0;
	border-radius: 12px 0 0 12px;
	background: none;
	box-shadow: none;
	font-size: 14px;
}

.us-head__search .header-input:focus {
	outline: none;
	box-shadow: none;
}

.us-head__search .header-btn-search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: auto;
	min-width: 112px;
	height: 100%;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: 0 12px 12px 0;
	background: #1f7ae0;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

.us-head__search .header-btn-search:hover {
	background: #1765bd;
	color: #fff;
}

/* на широких экранах у кнопки надпись, лупа в ней лишняя */
.us-head__search .header-btn-search i {
	display: none;
}

/* выпадашка живого поиска не должна растягивать строку */
.us-head__search #us_livesearch,
.us-head__search #us_livesearch_close {
	position: absolute;
}

/* Поверх второй плашки (у неё z-index 1020): подсказки уходили
   под ряд типов транспорта.
   overflow: hidden обязателен — у темы max-height без него,
   и список вываливался за пределы окна. */
.us-head__search #us_livesearch {
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 1040;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(27, 40, 56, 0.16);
}

html .us-head__search #us_livesearch.expanded {
	max-height: none;
	border: 1px solid #e3e8ee;
}

/* прокручивается сам список, а не весь блок: внизу живёт кнопка
   полной выдачи, и она должна быть видна всегда */
html .us-head__search #us_livesearch > div {
	max-height: none;
	min-height: 0;
	height: auto;
	padding: 6px;
	overflow: visible;
}

.us-ls__items {
	max-height: 56vh;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #c7ced7 transparent;
}

/* --- кнопка «показать все результаты» --------------------- */
.us-ls__foot {
	display: flex;
	justify-content: flex-end;
	padding: 8px 10px 4px;
	border-top: 1px solid #eef1f5;
}

.us-ls .us-ls__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #1f7ae0;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.us-ls .us-ls__all:hover {
	color: #1765bd;
	text-decoration: none;
}

.us-ls__all i {
	font-size: 11px;
	transition: transform .15s ease;
}

.us-ls__all:hover i {
	transform: translateX(3px);
}

/* --- строка подсказки ------------------------------------- */
.us-ls__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 10px;
	color: #1b2838;
}

.us-ls__item:hover {
	background: #f7f8fa;
	color: #1b2838;
	text-decoration: none;
}

.us-ls__item + .us-ls__item {
	border-top: 1px solid #eef1f5;
}

.us-ls__photo {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.us-ls__photo img {
	max-width: 100%;
	max-height: 100%;
}

/* нулевая основа обязательна: с «auto» длинное название не влезало
   в строку целиком и на телефоне переносилось вместе с фото */
.us-ls__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.us-ls__title {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
}

.us-ls__name {
	font-size: 14px;
	font-weight: 700;
}

.us-ls__size {
	color: #6b7280;
	font-size: 13px;
}

.us-ls__code {
	color: #8a8f98;
	font-size: 11px;
}

/* значки в подсказке мельче, чем в списках: строка узкая */
.us-ls__body .us-marks {
	gap: 6px;
	margin: 0;
}

.us-ls__side {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	white-space: nowrap;
}

.us-ls__price-now,
.us-ls__price-new {
	font-size: 15px;
	font-weight: 800;
}

.us-ls__price-new {
	color: #e01b1b;
}

.us-ls__price-old {
	color: #8a8f98;
	font-size: 12px;
	text-decoration: line-through;
}

/* --- крестик очистки -------------------------------------- */
/* У темы это зелёный квадрат сбоку от строки, который ещё
   и крутится при наведении. Делаем тихую кнопку внутри поля. */
html .us-head__search #us_livesearch_close {
	top: 50%;
	right: 136px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px !important;
	border-radius: 50%;
	background: #eef1f5;
	color: #6b7280;
	line-height: 1;
	transition: background .15s ease, color .15s ease;
}

html .us-head__search #us_livesearch_close:hover {
	background: #e3e8ee;
	color: #1b2838;
}

.us-head__search #us_livesearch_close i {
	font-size: 12px;
	transition: none;
}

.us-head__search #us_livesearch_close:hover i {
	transform: none;
}

html[data-theme="dark"] .us-head__search #us_livesearch.expanded {
	border-color: #27333f;
	background: #16202b;
}

html[data-theme="dark"] .us-ls__item {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-ls__item:hover {
	background: #1f2b39;
	color: #e4e9ef;
}

html[data-theme="dark"] .us-ls__item + .us-ls__item {
	border-top-color: #27333f;
}

html[data-theme="dark"] .us-ls__size,
html[data-theme="dark"] .us-ls__code,
html[data-theme="dark"] .us-ls__price-old {
	color: #8b97a6;
}

html[data-theme="dark"] .us-ls__items {
	scrollbar-color: #3a4a5c transparent;
}

html[data-theme="dark"] .us-ls__foot {
	border-top-color: #27333f;
}

html[data-theme="dark"] .us-head__search #us_livesearch_close {
	background: #1f2b39;
	color: #8b97a6;
}

html[data-theme="dark"] .us-head__search #us_livesearch_close:hover {
	background: #27333f;
	color: #e4e9ef;
}

/* --- подбор по авто --------------------------------------- */
/* Стоит в ряду плашек, между сезонами и радиусами, поэтому высота
   по плашкам, а не по строке поиска. */
.us-head__pick {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
	padding: 8px 15px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: #1b2838;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.us-head__pick:hover {
	background: #25374d;
	color: #fff;
	text-decoration: none;
}

.us-head__pick .us-ico {
	width: 19px;
	height: 19px;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* --- правая колонка: контакты над кнопками ---------------- */
/* Контакты и аккаунт стоят рядом в первой строке, каждый отделён
   тонкой линией — как на присланной раскладке. */
.us-head__info {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	max-width: 260px;
	margin-left: auto;
	padding-left: 22px;
	font-size: 11px;
	line-height: 1.35;
	text-align: left;
}

/* Разделители одной длины. Раньше у каждой зоны был свой
   border-left, а высота границы равна высоте блока: слева телефоны
   с кнопкой звонка, справа ряд значков — линии выходили разными.
   Рисуем их псевдоэлементом фиксированной высоты по центру. */
.us-head__info:before,
.us-head__actions:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 38px;
	margin-top: -19px;
	background: #e3e8ee;
}

/* Адресный блок: иконки в колонке одной ширины, текст от общей линии.
   Раньше у телефона был свой padding-left, а у адреса нет — из-за этого
   иконки стояли на разных вертикалях и строки «прыгали». */
.us-head__info-row,
.us-head__tel {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	padding-left: 0;
}

.us-head__info-row {
	color: #1b2838;
	font-weight: 600;
	font-size: 12px;
}

/* Два номера идут столбиком, кегль чуть меньше прежнего одиночного:
   иначе пара строк по 15px перевешивает поиск рядом. */
.us-head__tels {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.us-head__tel {
	color: #1b2838;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

/* Значок оператора фирменный и цветной — картинкой, не маской.
   Ширина та же, что у колонки значков адреса, чтобы номера
   стояли по одной вертикали. */
.us-head__tel-op {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	object-fit: contain;
}

.us-head__tel:hover {
	color: #1f7ae0;
	text-decoration: none;
}

/* иконки одной ширины и кегля, по центру своей колонки */
.us-head__info-row > i,
.us-head__tel > i {
	flex: 0 0 16px;
	width: 16px;
	color: #1f7ae0;
	font-size: 13px;
	text-align: center;
}

/* подгоняем иконку к первой строке: у адреса кегль 12, у телефона 15 */
.us-head__info-row > i {
	margin-top: 2px;
}

.us-head__tel > i {
	margin-top: 4px;
}

/* Часы работы из шапки убраны: строка длинная и ломала раскладку.
   Разметка в шаблоне осталась — вернуть можно этой одной правкой. */
.us-head__hours {
	display: none;
	flex-direction: column;
	margin-top: 2px;
	padding-left: 23px;
	color: #8a8f98;
}

/* 16 px иконка плюс 7 px зазор — строка встаёт под текстом, а не под иконкой */
.us-head__callback {
	margin-top: 4px;
	padding-left: 23px;
	color: #1f7ae0;
	font-size: 11px;
	text-decoration: underline;
	white-space: nowrap;
}

/* --- иконки транспорта ------------------------------------ */
/* Иконки присланы владельцем. Подаются маской, поэтому красятся
   цветом текста — отдельных файлов под каждый цвет не нужно.
   Пропорции у них разные, общий квадрат не подходит: размеры
   заданы по viewBox каждой, при общей высоте 17 px. */
.us-ico {
	display: inline-block;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* шасси: кнопка разноразмерного подбора */
.us-ico--chassis {
	width: 22px;
	height: 22px;
	-webkit-mask-image: url("../img/chassis.svg");
	mask-image: url("../img/chassis.svg");
}

/* пара шин: кнопка «поможем подобрать» в меню каталога */
.us-ico--tyres {
	width: 22px;
	height: 22px;
	-webkit-mask-image: url("../img/tyres-pair.svg");
	mask-image: url("../img/tyres-pair.svg");
}

/* авто в профиль, 28x28 */
.us-ico--car {
	width: 20px;
	height: 20px;
	-webkit-mask-image: url("../img/veh-car.svg");
	mask-image: url("../img/veh-car.svg");
}

/* Иконки разделов: ширина 32 px у легкового и внедорожника,
   24 px у легкогрузового и мотоцикла — они выше по рисунку,
   и при одинаковой ширине выглядели крупнее остальных.
   Высота у всех считается по пропорции, рисунок не искажается. */

/* легковой, 42x20 */
.us-ico--veh-pass {
	width: 32px;
	height: 15px;
	-webkit-mask-image: url("../img/veh-pass.svg");
	mask-image: url("../img/veh-pass.svg");
}

/* внедорожник, 45x20 */
.us-ico--veh-suv {
	width: 32px;
	height: 14px;
	-webkit-mask-image: url("../img/veh-suv.svg");
	mask-image: url("../img/veh-suv.svg");
}

/* легкогрузовой, 35x28 — отражён по горизонтали */
.us-ico--veh-truck {
	width: 24px;
	height: 19px;
	transform: scaleX(-1);
	-webkit-mask-image: url("../img/veh-truck.svg");
	mask-image: url("../img/veh-truck.svg");
}

/* мотоцикл — отражён по горизонтали. viewBox подрезан по рисунку
   (было 32x32 с пустыми полями, стало 32x23), иначе при ширине 32
   коробка была бы вдвое выше остальных иконок. */
.us-ico--veh-moto {
	width: 24px;
	height: 17px;
	transform: scaleX(-1);
	-webkit-mask-image: url("../img/veh-moto.svg");
	mask-image: url("../img/veh-moto.svg");
}

.us-ico--lg {
	transform: scale(1.15);
}

/* --- вход, закладки, корзина ------------------------------ */
.us-head__actions {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 0 0 auto;
	padding-left: 22px;
}

.us-head__act {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	color: #5c6673;
	font-size: 11px;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
}

.us-head__act:hover {
	color: #1f7ae0;
	text-decoration: none;
}

.us-head__act i {
	font-size: 20px;
}

/* корзина — модуль темы: снимаем колонку и приводим к виду соседей */
.us-head__actions #cart {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

.us-head__actions #cart .us-cart-content {
	display: none;
}

.us-head__actions #cart .us-cart-img {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 0;
	border: 0;
	background: none;
	color: #5c6673;
}

.us-head__actions #cart .us-cart-img:hover {
	color: #1f7ae0;
}

.us-head__actions #cart .us-cart-ico {
	width: 22px;
	height: 22px;
}

/* --- значки количества у иконок --------------------------- */
/* Подписи под иконками сняты, поэтому иконка — сама себе блок,
   а количество садится ей на угол. У темы ярлык корзины сделан
   как min-width + padding и border-radius: 100%, из-за чего
   двузначное число растягивало его в овал: ставим фиксированный
   круг, а пилюлю оставляем только для трёх знаков и больше. */
.us-head__act,
.us-head__actions #cart .us-cart-img {
	position: relative;
}

html .us-head__actions #cart .header-cart-index,
.us-head__act-count {
	position: absolute;
	top: -7px;
	right: -11px;
	left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border: 2px solid #fff;
	border-radius: 999px;
	background: #e01b1b;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

/* пусто — значок не рисуем, иначе у иконок висят нули */
.us-head__act-count.is-zero,
html .us-head__actions #cart .header-cart-index.is-zero {
	display: none;
}

html[data-theme="dark"] .us-head__actions #cart .header-cart-index,
html[data-theme="dark"] .us-head__act-count {
	border-color: #16202b;
}

/* --- плашки сезонов и диаметров --------------------------- */
.us-head__chips {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

/* Высоту плашек и кнопки подбора держим общим min-height: иначе она
   расходится от содержимого — у сезонов иконка 18 px, у кнопки 17 px,
   и кнопка выходила на 2.5 px ниже соседей. */
.us-chip,
.us-head__pick {
	min-height: 38px;
}

.us-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px;
	border: 1px solid #e3e8ee;
	border-radius: 20px;
	background: #fff;
	color: #1b2838;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	transition: border-color .15s ease, background .15s ease;
}

.us-chip:hover {
	border-color: #c9d4e0;
	color: #1b2838;
	text-decoration: none;
}

/* Сезоны в своих цветах: так их видно отдельно от радиусов
   и друг от друга. */
.us-chip--winter {
	border-color: #d3e7fa;
	background: #eaf4fe;
}

.us-chip--winter:hover {
	border-color: #a9cef4;
}

.us-chip--summer {
	border-color: #f7e4bb;
	background: #fdf5e4;
}

.us-chip--summer:hover {
	border-color: #f0d08c;
}

.us-chip--all {
	border-color: #cfe8d3;
	background: #eef8f0;
}

.us-chip--all:hover {
	border-color: #aad8b4;
}

.us-chip__ico {
	width: 18px;
	height: 18px;
}

/* у радиусов скругление как у кнопки «Купить» — так на глаз видно,
   что это другой тип подбора, не сезон */
.us-chip--dia {
	min-width: 58px;
	justify-content: center;
	border-radius: 12px;
}

.us-head__chips-sep {
	width: 1px;
	height: 24px;
	margin: 0 6px;
	background: #e3e8ee;
}

/* ============ вторая плашка ============ */
/* Прилегает к первой и прилипает к верху при прокрутке.
   Фон обёртки совпадает с фоном страницы, чтобы в прилипшем
   состоянии под плашкой не просвечивал контент. */
.us-bar-wrap {
	position: sticky;
	top: 0;
	z-index: 1020;
	margin-bottom: 12px;
	background: #f2f3f5;
}

.us-bar {
	position: relative;
	border-radius: 0 0 14px 14px;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

/* Боковые отступы совпадают с padding панели мегаменю (20 px):
   благодаря этому кнопка каталога и колонка сезонов под ней
   начинаются от одной вертикали. */
.us-bar__inner {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 20px;
}

/* Каталог — кнопка со скруглением, а не заливка во всю высоту плашки.
   Ширина 180 px совпадает с колонкой сезонов в мегаменю, чтобы кнопка
   и карточки под ней стояли одной колонкой. */
.us-bar__catalog {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex: 0 0 180px;
	width: 180px;
	min-height: 44px;
	padding: 11px 16px;
	border-radius: 12px;
	background: #1f7ae0;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.us-bar__catalog:hover {
	background: #1765bd;
	color: #fff;
	text-decoration: none;
}

/* стрелка переворачивается, когда меню выехало */
.us-bar__arrow {
	font-size: 11px;
	transition: transform .22s ease;
}



.us-bar__nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
	padding-left: 8px;
}

.us-bar__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 12px;
	border-radius: 8px;
	color: #1b2838;
	font-size: 14px;
	white-space: nowrap;
}

/* иконка раздела синяя, подпись остаётся тёмной */
.us-bar__link .us-ico {
	color: #1f7ae0;
}

.us-bar__link:hover {
	background: #f4f8fd;
	color: #1f7ae0;
	text-decoration: none;
}

.us-bar__contacts {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
}

.us-bar__msg {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 11px;
	border-radius: 8px;
	color: #5c6673;
	font-size: 11px;
	line-height: 1.2;
	text-align: center;
}

.us-bar__msg:hover {
	background: #f7f8fa;
	text-decoration: none;
}

.us-bar__msg i {
	font-size: 18px;
}

.us-bar__msg--viber i { color: #7360f2; }
.us-bar__msg--tg i    { color: #2aabee; }
.us-bar__msg--call i  { color: #2fa84f; }

.us-bar__msg--viber:hover { color: #7360f2; }
.us-bar__msg--tg:hover    { color: #2aabee; }
.us-bar__msg--call:hover  { color: #2fa84f; }

/* --- переключатель языков тумблером ----------------------- */
/* Разметку переключателя рисует не стандартный common/language,
   а модуль SEO-мультиязычности: он подменяет вывод в startup.php
   и отдаёт свой шаблон agootemplates/record/langmark.twig. Поэтому
   стилизуем его разметку: текущий язык там <span>, остальные <a>,
   между ними разделитель «|». Переключение идёт обычными ссылками,
   свой JavaScript не нужен. */
/* Язык и тема стоят одной группой у правого края строки плашек.
   Переключатель темы — после языков: стоя между плашками радиусов
   и языками, он читался как ещё один фильтр. Отступ вправо держит
   группа, а не сам блок языков, иначе кнопка темы оставалась бы
   приклеенной к радиусам. */
.us-head__prefs {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	margin-left: auto;
}

.us-head__lang {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.us-head__lang .pull-left {
	float: none !important;
}

.us-head__lang #select-language {
	display: inline-flex;
	align-items: stretch;
	margin: 0;
	padding: 3px;
	border: 1px solid #e6e9ef;
	border-radius: 999px;
	background: #fff;
	list-style: none;
}

.us-head__lang #select-language .list-inline-item {
	margin: 0;
	padding: 0;
}

/* разделитель «|» в тумблере не нужен */
.us-head__lang #select-language .delim {
	display: none;
}

.us-head__lang #select-language span,
.us-head__lang #select-language a {
	display: block;
	padding: 5px 14px;
	border-radius: 999px;
	color: #5c6673;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

.us-head__lang #select-language a:hover {
	color: #1b2838;
	background: #f4f6f9;
	text-decoration: none;
}

/* текущий язык модуль отдаёт как <span> — его и заливаем */
.us-head__lang #select-language span {
	background: #1f7ae0;
	color: #fff;
}

/* в мобильной панели темы оставляем вид модуля как был */
#us_info_mobile #select-language .delim {
	display: inline-block;
}

/* Тема прячет последний <li> списка языков: модуль ставил «|» после
   каждого языка, включая последний, и прятали именно его. Разделитель
   теперь ставится только между языками, последним идёт сам язык —
   прятать его нельзя. */
#select-language > li:last-child {
	display: inline-block;
}


/* ============ мегаменю ============ */
/* Панель лежит соседним элементом кнопки каталога — поэтому
   раскрытие делает селектор :hover + .us-mega, без JavaScript.
   Отсчитывается от .us-bar, у неё для этого position: relative. */
.us-mega {
	display: flex;
	position: absolute;
	/* Поднимаем на 8 px — ровно на нижний отступ плашки. Иначе под
	   кнопкой остаётся полоска, на которой курсор уже вышел из кнопки,
	   но ещё не вошёл в панель, и меню успевает закрыться. Панель белая,
	   как и плашка, поэтому наложение не видно. */
	top: calc(100% - 8px);
	left: 0;
	right: 0;
	z-index: 40;
	gap: 20px;
	padding: 28px 20px 20px;
	border-radius: 0 0 14px 14px;
	background: #fff;
	box-shadow: 0 14px 30px rgba(0, 0, 0, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity .18s ease, transform .22s ease, visibility .22s;
}

/* Состоянием управляет us-mega.js: класс на плашке, а не :hover.
   На :hover панель не удерживалась — см. комментарий в скрипте.
   Показываем через opacity, а не display, иначе выезд не анимировать. */
.us-bar.is-mega-open .us-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* пока меню раскрыто, у плашки снизу прямые углы —
   так она и панель читаются одним блоком */
.us-bar.is-mega-open {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* стрелка смотрит вверх, пока панель открыта */
.us-bar.is-mega-open .us-bar__arrow {
	transform: rotate(180deg);
}

.us-mega__title {
	margin-bottom: 10px;
	color: #1b2838;
	font-size: 14px;
	font-weight: 700;
}

.us-mega__col {
	flex: 1 1 auto;
	min-width: 0;
}

/* Вертикальные разделители между колонками, тем же цветом, что
   в шапке. Ставим рамкой на соседей, чтобы не плодить пустые
   элементы в разметке. */
.us-mega > div + div {
	padding-left: 20px;
	border-left: 1px solid #e3e8ee;
}

/* Колонка шире — за счёт этого она смещается левее, а плитки
   становятся крупнее при трёх столбцах вместо четырёх. */
.us-mega__col--brands {
	flex: 0 0 360px;
}

/* --- карточки сезонов ------------------------------------- */
/* 180 px вместо 240 — фото были крупноваты, пропорция 2:1 сохранена */
.us-mega__seasons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 0 0 180px;
}

/* Карточка сезона: фото в пропорции 2:1, слева тёмная заливка
   цветом кнопки подбора, текст и иконка белые без подложек.
   min-height — подстраховка для браузеров без aspect-ratio. */
.us-mega__season {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: 6px;
	aspect-ratio: 2 / 1;
	min-height: 90px;
	padding: 12px 14px;
	border-radius: 12px;
	background: #1b2838;
	color: #fff;
	overflow: hidden;
}

.us-mega__season:hover {
	color: #fff;
	text-decoration: none;
}

.us-mega__season:hover .us-mega__season-bg {
	transform: scale(1.04);
}

/* фото уводим под светлую заливку, чтобы подписи читались */
.us-mega__season-bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-size: cover;
	background-position: center;
	transition: transform .25s ease;
}

/* Тонировка слабее прежней: подписи стало меньше, читаемость держим
   тенью на тексте, а фото остаётся различимым. */
.us-mega__season-bg:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(100deg, rgba(27, 40, 56, .62) 0%, rgba(27, 40, 56, .32) 55%, rgba(27, 40, 56, .06) 100%);
}

.us-mega__season-ico {
	position: relative;
	z-index: 2;
}

.us-mega__season-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

/* иконки сезонов цветные — выбеливаем их фильтром, отдельные
   белые файлы под это заводить незачем */
.us-mega__season-ico img {
	width: 32px;
	height: 32px;
	filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

.us-mega__season-text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.us-mega__season-name {
	position: relative;
	z-index: 2;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* стрелка по центру справа, вне потока — подпись из-за неё не съезжает */
.us-mega__season > i {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	z-index: 2;
	color: #fff;
	font-size: 12px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* --- карточка помощи -------------------------------------- */
.us-mega__help {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 56px;
	padding: 12px 14px;
	border-radius: 12px;
	background: #1f7ae0;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
}

.us-mega__help:hover {
	background: #1765bd;
	color: #fff;
	text-decoration: none;
}

.us-mega__help .us-ico {
	opacity: .9;
}

/* --- типоразмеры и диаметры ------------------------------- */
/* типоразмеры — сеткой в четыре столбца, диаметры короткие
   и ложатся в строку сами */
.us-mega__chips {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	margin-bottom: 10px;
}

.us-mega__chips--dia {
	display: flex;
	flex-wrap: wrap;
}

/* отступы по бокам уменьшены — плашки были широкими,
   а колонкам нужно место под разделители */
.us-mega__chip {
	padding: 8px 6px;
	text-align: center;
	border: 1px solid #e8ebf0;
	border-radius: 8px;
	background: #f7f8fa;
	color: #1b2838;
	font-size: 12px;
	white-space: nowrap;
}

.us-mega__chip:hover {
	border-color: #1f7ae0;
	background: #f4f8fd;
	color: #1f7ae0;
	text-decoration: none;
}

.us-mega__chip--dia {
	min-width: 52px;
	text-align: center;
}

/* --- бренды ----------------------------------------------- */
.us-mega__brands {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 14px;
}

.us-mega__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 58px;
	padding: 8px;
	border: 1px solid #eef0f2;
	border-radius: 8px;
	background: #fff;
}

.us-mega__brand:hover {
	border-color: #c9d4e0;
}

.us-mega__brand img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

/* ссылки «все …» прижаты к правому краю своей колонки */
.us-mega__foot {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 18px;
}

.us-mega__col--brands .us-mega__foot {
	margin-bottom: 0;
}

.us-mega__all {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #1f7ae0;
	font-size: 13px;
	font-weight: 600;
}

.us-mega__all:hover {
	color: #1765bd;
	text-decoration: none;
}

.us-mega__all i {
	font-size: 11px;
}

@media (max-width: 1199px) {
	.us-mega {
		gap: 16px;
		padding: 24px 16px 16px;
	}

	.us-mega__seasons {
		flex: 0 0 160px;
	}

	.us-bar__catalog {
		flex: 0 0 160px;
		width: 160px;
		padding: 11px 13px;
	}

	.us-bar__inner {
		padding: 8px 16px;
	}

	.us-mega__col--brands {
		flex: 0 0 250px;
	}

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

	.us-mega__chips {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ============ узкие экраны ============ */
@media (max-width: 1399px) {
	.us-head__main {
		gap: 14px;
	}

	.us-head__info {
		max-width: 215px;
	}

	.us-bar__link {
		padding: 8px 9px;
		font-size: 13px;
	}

}

@media (max-width: 1200px) {
	.us-bar__msg span {
		display: none;
	}

	.us-head__brand {
		max-width: 160px;
	}

	/* Радиусы из строки убираем: пять плашек переносили язык и тему
	   на вторую строку. Их место занимают настройки, а сами радиусы
	   остаются в мегаменю и в подборе. Вторая разделительная линия
	   стояла перед радиусами — без них она ничего не делит.
	   Селектор с родителем: ниже по файлу есть второй, общий `.us-chip`
	   (плашки размеров на страницах), он того же веса и стоит позже. */
	.us-head__chips .us-chip--dia,
	.us-head__chips > span.us-head__chips-sep:nth-of-type(2) {
		display: none;
	}
}

/* Планшетные ширины: телефоны остаются в шапке. Раньше блок контактов
   скрывался целиком, хотя место для него находится: всю свободную
   ширину забирал поиск. Уменьшаем его предел — и номера встают
   на своё место. Ниже 992 шапка перестраивается в две строки,
   там номера по-прежнему в мобильном меню. */
@media (min-width: 992px) and (max-width: 1200px) {
	.us-head__info {
		max-width: 178px;
		padding-left: 18px;
	}

	.us-head__actions {
		padding-left: 18px;
	}

	.us-head__search {
		min-width: 140px;
	}

	.us-head__tel {
		font-size: 13px;
	}
}

@media (max-width: 991px) {
	.us-head {
		padding-top: 10px;
	}

	.us-head__card {
		padding: 12px 14px;
		/* скругление только сверху: снизу стыкуется плашка
		   с бургером, и по круглым углам они читались бы
		   как два отдельных элемента */
		border-radius: 14px 14px 0 0;
	}

	.us-head__main {
		flex-wrap: wrap;
	}

	.us-head__search {
		order: 3;
		flex: 1 1 100%;
	}

	/* Плашку оставляем: в неё переезжает строка плашек (us-head.js),
	   и за счёт этого она прилипает к верху при прокрутке. Прилипание
	   работает только у прямого ребёнка страницы, а карточка шапки
	   для этого слишком короткая: строка отлипла бы сразу за ней. */
	.us-bar-wrap {
		display: block;
	}

	.us-bar__inner {
		padding: 8px 12px;
	}

	/* мессенджеры в плашке не помещаются — они в окне контактов */
	.us-bar__contacts {
		display: none;
	}

	.us-bar .us-head__chips {
		flex: 1 1 auto;
		min-width: 0;
		margin-top: 0;
	}

	.us-head__chips {
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 4px;
	}
}

/* --- Подбор шин по автомобилю ------------------------------ */
/* Тёмная плашка на главной. Фон — фотография протектора,
   она уходит вправо, поэтому текст и форма держатся слева:
   на узком экране картинка сдвигается и под текстом остаётся
   ровная заливка. */
.us-pick {
	position: relative;
	margin: 20px 0 28px;
	border-radius: 16px;
	overflow: hidden;
	background: #1e3245 url('/image/catalog/selection/car-select-bg.jpg') no-repeat right center;
	background-size: cover;
	color: #fff;
}

.us-pick__body {
	padding: 26px 32px;
}

.us-pick__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

/* тема красит h1 и h2 внутри .selection-page в тёмный — перебиваем
   селектором из двух классов */
.us-pick .us-pick__title {
	margin: 0 0 6px;
	color: #fff;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
}

/* на странице подбора это заголовок страницы, под ним сразу
   идёт строка с машиной — нижний отступ не нужен */
.us-pick .us-pick__title--page {
	margin-bottom: 0;
	font-size: 24px;
}

.us-pick__lead {
	max-width: 720px;
	margin: 0 0 18px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 15px;
	line-height: 1.45;
}

/* --- форма ------------------------------------------------- */
.us-pick__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 980px;
}

.us-pick__form--params {
	margin-top: 14px;
}

.us-pick__form--params[hidden] {
	display: none;
}

.us-pick__field {
	position: relative;
	flex: 1 1 170px;
	min-width: 0;
}

/* подпись нужна скринридеру, на экране её заменяет
   первый пункт списка */
.us-pick__hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* стрелку рисуем сами: родная у каждого браузера своя */
.us-pick__select {
	width: 100%;
	height: 46px;
	padding: 0 34px 0 14px;
	border: 0;
	border-radius: 10px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231b2838' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center;
	color: #1b2838;
	font-size: 15px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
}

.us-pick__select:focus {
	outline: 2px solid #1f7ae0;
	outline-offset: 1px;
}

/* ещё не доступные списки держим светлыми: на тёмном фоне
   полупрозрачная заливка выглядела грязным пятном */
.us-pick__select:disabled {
	background-color: #eef1f5;
	color: #98a0aa;
	cursor: default;
}

/* пока список грузится, поле гасим — иначе непонятно,
   почему в нём ничего нет */
.us-pick__field.is-loading .us-pick__select {
	opacity: 0.6;
}

.us-pick__go {
	flex: 0 0 180px;
	height: 46px;
	padding: 0 18px;
	border: 0;
	border-radius: 10px;
	background: #2fa84f;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}

.us-pick__go:hover:enabled {
	background: #268c42;
}

.us-pick__go:disabled {
	background: rgba(47, 168, 79, 0.55);
	color: rgba(255, 255, 255, 0.75);
	cursor: default;
}

/* --- зоны плашки ------------------------------------------- */
/* Тонкие линии те же, что разделяют колонки мегаменю, только
   светлые: на тёмной подложке линия в цвет рамок читалась бы
   как грязь. Колонки растянуты по высоте, иначе разделитель
   получается короче содержимого соседней колонки. */
.us-pick__split {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.us-pick__split > * {
	display: flex;
	align-items: center;
	min-width: 0;
	padding: 0 30px;
}

.us-pick__split > *:first-child {
	padding-left: 0;
}

.us-pick__split > *:last-child {
	padding-right: 0;
}

.us-pick__split > * + * {
	border-left: 1px solid rgba(255, 255, 255, 0.14);
}

/* Три колонки с кнопками не переносим: перенос ломает вертикальные
   разделители. Ширину колонки отдаём флексу — при запрете переноса
   он делит место пропорционально содержимому, и колонка с девятью
   кнопками получает больше места, чем колонка с тремя. */
.us-pick__split--sizes {
	flex-wrap: nowrap;
}

/* верхняя строка страницы подбора идёт сразу под заголовком —
   отделять её линией незачем */
.us-pick__split--top {
	margin-top: 16px;
	padding-top: 0;
	border-top: 0;
}

/* до выбора машины нижняя зона делится пополам */
.us-pick__note {
	flex: 1 1 50%;
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	line-height: 1.5;
}

.us-pick__note + .us-pick__perks {
	flex: 1 1 50%;
}

/* --- выбранный автомобиль ---------------------------------- */
.us-pick__car {
	flex: 0 1 auto;
	gap: 22px;
}

.us-pick__car-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.us-pick__car-name,
a.us-pick__car-name {
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
}

a.us-pick__car-name:hover {
	color: #fff;
	text-decoration: underline;
}

.us-pick__car-sub {
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
}

/* «Сбросить» со значком круговой стрелки */
.us-pick .us-pick__reset {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #5fa8f0;
	font-size: 14px;
	text-decoration: underline;
	white-space: nowrap;
}

.us-pick .us-pick__reset:hover {
	color: #8cc3f8;
}

.us-pick__reset:before {
	content: '';
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12a8 8 0 1 1-2.6-5.9M20 4v5h-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 15px 15px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12a8 8 0 1 1-2.6-5.9M20 4v5h-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 15px 15px;
}

/* --- преимущества ------------------------------------------ */
.us-pick__perks {
	flex: 1 1 auto;
	flex-wrap: wrap;
	/* по центру своей половины, а не по левому краю:
	   справа оставалась пустая треть плашки */
	justify-content: center;
	gap: 14px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.us-pick__perk {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 34px;
	padding-left: 38px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 13px;
	line-height: 1.3;
}

.us-pick__perk-line {
	display: block;
}

.us-pick__perk:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 26px;
	height: 26px;
	margin-top: -13px;
	background: #2fa84f;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: 26px 26px;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: 26px 26px;
}

.us-pick__perk--check:before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.3 2.6 2.7L16 9.4'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.3 2.6 2.7L16 9.4'/%3E%3C/g%3E%3C/svg%3E");
}

.us-pick__perk--truck:before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h11v10H2z'/%3E%3Cpath d='M13 9h4l3.5 3.5V16H13z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h11v10H2z'/%3E%3Cpath d='M13 9h4l3.5 3.5V16H13z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

.us-pick__perk--shield:before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 2.8v5.4c0 4.2-2.8 7.5-7 8.8-4.2-1.3-7-4.6-7-8.8V5.8z'/%3E%3Cpath d='m9 12 2.2 2.2L15.5 10'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 2.8v5.4c0 4.2-2.8 7.5-7 8.8-4.2-1.3-7-4.6-7-8.8V5.8z'/%3E%3Cpath d='m9 12 2.2 2.2L15.5 10'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- «не подобрали — звоните» ------------------------------- */
.us-pick__help {
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	max-width: 300px;
}

.us-pick__help-title {
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

.us-pick__help-text {
	color: rgba(255, 255, 255, 0.65);
	font-size: 13px;
	line-height: 1.35;
}

.us-pick .us-pick__help-tel {
	margin-top: 3px;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	white-space: nowrap;
}

.us-pick .us-pick__help-tel:hover {
	color: #8cc3f8;
	text-decoration: none;
}

/* --- кнопки найденных типоразмеров -------------------------- */
/* Содержимое колонок прижато к верху, а сами колонки растянуты
   по высоте строки: иначе подписи «Заводская комплектация»
   и «Варианты замены» встают на разной высоте, потому что
   количество кнопок в колонках разное.
   Ширина по содержимому: при равных долях колонка с девятью
   кнопками переносилась в три ряда рядом с полупустой соседней. */
/* min-content – ширина самой широкой кнопки: с min-width: 0
   флекс сжимал столбец уже содержимого, а кнопка с
   `white-space: nowrap` сжаться не может и выезжала
   за разделитель. */
.us-pick__sizes-col {
	flex: 1 1 auto;
	min-width: min-content;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 9px;
}

/* над кнопкой нет подписи — поднимаем её на высоту чужой подписи,
   чтобы она встала в один ряд с первым рядом кнопок */
.us-pick__sizes-col--all {
	flex: 0 0 auto;
	padding-top: 25px;
}

.us-pick__sizes-label {
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.us-pick__sizes-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: min-content;
}

.us-pick .us-pick__size {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 12px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	font-size: 13px;
	white-space: nowrap;
}

.us-pick .us-pick__size:hover {
	border-color: rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	text-decoration: none;
}

.us-pick .us-pick__size.is-active {
	border-color: #2d8ef0;
	background: #2d8ef0;
	color: #fff;
}

/* размер без товаров в наличии показываем, но приглушённым:
   машине он подходит, просто сейчас его нет */
.us-pick .us-pick__size.is-empty {
	opacity: 0.45;
}

.us-pick__size-count {
	padding: 1px 6px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.8);
	font-size: 11px;
}

.us-pick__size.is-active .us-pick__size-count {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}

/* Ось размера на кнопке подбора: у разношироких машин
   размер идёт на свою ось, и без значка непонятно, на какую. */
.us-pick__size-axle {
	width: 24px;
	height: 12px;
	opacity: .9;
}

/* Выдача разношироких внутри страницы подбора: своего
   заголовка у блока нет – его несёт плашка сверху. */
.us-stagger--pick .us-stagger__seasons {
	margin-top: 0;
}

.us-pick__size--all {
	font-weight: 600;
}

/* Разноширокий комплект: в одном чипе два размера, поэтому он шире
   обычного и делится тонкой чертой. Значки осей — те же, что
   в фильтре разношироких. */
.us-pick .us-pick__size--pair {
	gap: 10px;
	padding: 6px 10px;
}

.us-pick__pair-side {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.us-pick__pair-side + .us-pick__pair-side {
	padding-left: 10px;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* значки нарисованы для светлого фона — на тёмной плашке
   приглушаем кузов, синее колесо остаётся заметным */
.us-pick__pair-side .us-ico--axle-front,
.us-pick__pair-side .us-ico--axle-rear {
	width: 26px;
	height: 13px;
	opacity: 0.85;
}

/* --- табы панели: по авто и по типоразмеру ------------------- */
/* Неактивный тусклее — он же подсказка, что есть второй путь.
   Линия под табами отделяет их от полей, как в фильтре. */
.us-pick__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.us-pick .us-pick__tab {
	position: relative;
	margin: 0;
	padding: 0 2px 12px;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, .45);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	text-align: left;
	cursor: pointer;
	transition: color .15s ease;
}

.us-pick .us-pick__tab + .us-pick__tab {
	margin-left: 26px;
}

.us-pick .us-pick__tab:hover {
	color: rgba(255, 255, 255, .75);
}

.us-pick .us-pick__tab.is-on {
	color: #fff;
}

/* подчёркивание активного — поверх линии блока */
.us-pick .us-pick__tab.is-on:after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	border-radius: 2px;
	background: #fff;
}

.us-pick__pane {
	display: none;
}

.us-pick__pane.is-on {
	display: block;
}

/* --- строки формы по типоразмеру ---------------------- */
/* Сначала сам размер, потом условия: девять списков
   одной обёрткой переносились по остатку места, и размер
   ничем не отличался от бренда с сезоном. */
.us-pick__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	flex: 1 1 100%;
	gap: 10px;
	min-width: 0;
}

/* Подпись оси – своя колонка постоянной ширины, иначе
   списки передней и задней оси не встают друг под другом. */
.us-pick__axle {
	display: inline-flex;
	align-items: center;
	flex: 0 0 135px;
	gap: 8px;
	color: rgba(255, 255, 255, .8);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

/* Задан разный размер по осям – у строки размера
   появилась колонка подписей, и строка условий без такого
   отступа съезжала влево. */
.us-pick__form--params.is-stagger .us-pick__row--more {
	padding-left: 145px;
}

/* Второй оси переключатель не нужен, но его колонку оставляем
   пустой – иначе списки второй оси шире списков первой. */
.us-pick__rear {
	padding-right: 210px;
}

/* кнопка стоит ровно под переключателем */
.us-pick__form--params .us-pick__go {
	flex: 0 0 200px;
}

/* --- разноразмерный подбор ----------------------------------- */
.us-pick .us-pick__stagger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* та же колонка, что у кнопки подбора строкой ниже */
	flex: 0 0 200px;
	gap: 9px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, .8);
	font-size: 14px;
	text-align: left;
	cursor: pointer;
	transition: color .15s ease;
}

/* пунктир на тексте, а не на кнопке: иначе он тянется
   на всю колонку и уезжает за слова */
.us-pick .us-pick__stagger span {
	border-bottom: 1px dashed rgba(255, 255, 255, .45);
	transition: border-color .15s ease;
}

.us-pick .us-pick__stagger:hover,
.us-pick .us-pick__stagger.is-on {
	color: #fff;
}

.us-pick .us-pick__stagger:hover span,
.us-pick .us-pick__stagger.is-on span {
	border-bottom-color: #fff;
}

/* Вторая ось идёт сразу за первой, под теми же списками –
   отделять её линией незачем: это продолжение размера,
   а не новый раздел. */
.us-pick__rear[hidden] {
	display: none;
}

/* подпись оси: значок и слово в одну строку перед полями */
/* значки нарисованы для светлого фона – на тёмной плашке
   приглушаем кузов, как в заводских парах */
.us-pick__axle .us-ico {
	width: 28px;
	height: 14px;
	opacity: .85;
}

/* Разноразмерный подбор требует по значению на каждую ось:
   незаполненную ось обводим, а не всю форму – иначе непонятно,
   где именно пусто. */
.us-pick__row--axle.is-incomplete .us-pick__select {
	box-shadow: 0 0 0 2px rgba(224, 27, 27, .65);
}

.us-pick__row--axle.is-incomplete .us-pick__axle {
	color: #ff9a9a;
}

@media (max-width: 1199px) {
	.us-pick__split > * {
		padding: 0 20px;
	}

	.us-pick__perks {
		gap: 12px 20px;
	}
}

/* на узком экране колонки встают друг под друга,
   и разделители из вертикальных становятся горизонтальными */
@media (max-width: 991px) {
	.us-pick__field {
		flex: 1 1 calc(50% - 5px);
	}

	.us-pick__go {
		flex: 1 1 100%;
	}

	.us-pick__axle,
	.us-pick .us-pick__stagger {
		flex: 1 1 100%;
	}

	.us-pick__rear {
		padding-right: 0;
	}

	.us-pick .us-pick__stagger {
		justify-content: flex-start;
	}

	.us-pick__form--params.is-stagger .us-pick__row--more {
		padding-left: 0;
	}

	.us-pick__split {
		display: block;
	}

	.us-pick__split > * {
		padding: 16px 0;
		border-left: 0;
	}

	.us-pick__split > *:first-child {
		padding-top: 0;
	}

	.us-pick__split > *:last-child {
		padding-bottom: 0;
	}

	.us-pick__split > * + * {
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}

	.us-pick__note,
	.us-pick__note + .us-pick__perks {
		max-width: none;
	}

	.us-pick__car,
	.us-pick__perks,
	.us-pick__help,
	.us-pick__sizes-col {
		display: flex;
	}

	.us-pick__help {
		max-width: none;
	}

	.us-pick__sizes-col--all {
		padding-top: 16px;
	}
}

@media (max-width: 575px) {
	.us-pick {
		background-position: 72% center;
	}

	/* в строку два таба не влезают: ставим столбиком,
	   иначе второй переносится с отступом сбоку */
	.us-pick .us-pick__tab {
		font-size: 19px;
	}

	.us-pick__body {
		padding: 22px 16px;
	}

	.us-pick .us-pick__title {
		font-size: 21px;
	}

	.us-pick .us-pick__title--page {
		font-size: 19px;
	}

	.us-pick__head {
		flex-wrap: wrap;
	}

	/* списки идут столбиком, так что колонка подписей
	   и колонка кнопки теряют смысл */
	.us-pick__axle {
		flex: 1 1 100%;
	}

	.us-pick .us-pick__stagger {
		flex: 1 1 100%;
		justify-content: flex-start;
	}

	.us-pick__rear {
		padding-right: 0;
	}

	.us-pick__form--params.is-stagger .us-pick__row--more {
		padding-left: 0;
	}

	.us-pick__field {
		flex: 1 1 100%;
	}

	.us-pick__car {
		flex-wrap: wrap;
		gap: 10px;
	}
}

/* --- страница подбора: список товаров ----------------------- */
.us-sizes-empty {
	margin: 20px 0;
	color: #5c6673;
}

.us-category-results {
	color: #5c6673;
	font-size: 13px;
}

/* --- Левая колонка уже ------------------------------------- */
/* Фильтр занимал четверть ширины; сократили на 30 % — освободившееся
   отдаём товарам. Селектор с id, потому что доля задана классом
   сетки и одного класса не хватает. */
@media (min-width: 768px) {
	#column-left.col-md-3 {
		flex: 0 0 17.5%;
		max-width: 17.5%;
	}

	#column-left.col-md-3 + #content.col-md-9 {
		flex: 0 0 82.5%;
		max-width: 82.5%;
	}
}

/* Подписи шкалы цены убраны: после сужения колонки числа наезжали
   друг на друга, а диапазон и так написан строкой выше
   («Цена 1187 - 29152 грн») и меняется при перетаскивании. */
#column-left .noUi-value {
	display: none;
}

#column-left .noUi-pips-horizontal {
	height: 14px;
	padding: 6px 0 0;
}

/* --- Превью товара в списках -------------------------------- */
/* Карточка собрана заново, под шкалу из DESIGN.md: содержимое по
   левому краю, название в две строки, строки данных под ним,
   цена отделена волосяной линией. Классы свои — старые
   .us-module-* остались теме и не мешают. */
/* Класс на обёртке живёт только до загрузки скриптов: common.js темы
   на DOM ready переписывает class колонки целиком
   ($('#content .product-grid').attr('class', ...)), и всё наше оттуда
   исчезает. Поэтому отступ между рядами и выравнивание высоты держим
   на самой карточке — так же, как это делала карточка темы. */
.us-card-cell {
	display: flex;
}

.us-card {
	display: flex;
	flex-direction: column;
	position: relative;
	height: calc(100% - 24px);
	margin-bottom: 24px;
	border: 1px solid #eef1f5;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 32, 56, .04);
	transition: box-shadow .18s ease, transform .18s ease;
}

.us-card:hover {
	box-shadow: 0 8px 24px rgba(16, 32, 56, .10);
	transform: translateY(-2px);
}

/* вокруг фотографии воздух: товар не подпирается рамкой карточки.
   Сверху места больше — там лежит лого бренда. */
.us-card__media {
	position: relative;
	padding: 40px 24px 12px;
}

/* --- лого бренда -------------------------------------------- */
.us-card__brand {
	position: absolute;
	top: 12px;
	left: 14px;
	display: flex;
	align-items: center;
	max-width: 96px;
	height: 22px;
	z-index: 2;
}

.us-card__brand img {
	max-width: 100%;
	max-height: 22px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* когда картинки у бренда нет, показываем название —
   так же, как на странице товара */
.us-card__brand-name {
	color: #5c6673;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.us-card__brand:hover .us-card__brand-name {
	color: #1f7ae0;
}

.us-card__photo {
	display: block;
	text-align: center;
}

.us-card__photo img {
	max-width: 100%;
	height: auto;
}

/* закладки и сравнение — проявляются при наведении на карточку */
/* --- классы этикетки на снимке ----------------------------- */
/* Столбиком в левом нижнем углу, как закладки в правом верхнем,
   но без появления по наведению: это свойство шины, а не действие.
   Подложка нужна — буквы ложатся поверх протектора. */
.us-card__eu {
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.us-card__eu-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 5px;
	border: 1px solid #e8ebf0;
	border-radius: 7px;
	background: rgba(255, 255, 255, .94);
}

.us-card__eu-item .us-tag__ico {
	width: 14px;
	height: 14px;
}

.us-card__eu-item .us-grade {
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	border-radius: 4px;
	font-size: 10px;
}

.us-card__tools {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	opacity: 0;
	transition: opacity .18s ease;
}

.us-card:hover .us-card__tools {
	opacity: 1;
}

.us-card__tools a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: #f7f8fa;
	color: #5c6673;
	font-size: 13px;
}

.us-card__tools a:hover {
	background: #eef4fb;
	color: #1f7ae0;
	text-decoration: none;
}

.us-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 0 20px 18px;
}

/* --- название в две строки --------------------------------- */
.us-card__title {
	display: block;
	color: #1b2838;
}

.us-card__title:hover {
	color: #1f7ae0;
	text-decoration: none;
}

.us-card__title-head {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.us-card__title-size {
	display: block;
	margin-top: 2px;
	color: #6b7280;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
}

/* --- строки данных ------------------------------------------ */
.us-card__line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 24px;
	margin-top: 10px;
	color: #5c6673;
}

.us-card__line--specs {
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 8px 12px;
}

/* страна изготовления: флаг и название одной плашкой */
.us-card__country {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 8px 2px 6px;
	border-radius: 6px;
	background: #f7f8fa;
	color: #5c6673;
	font-size: 12px;
	white-space: nowrap;
}

/* флаги растровые: в векторе гербы Сербии и Мексики весят
   по сотне килобайт, а в превью они размером 18 px */
.us-card__country img {
	width: 18px;
	height: 14px;
	border-radius: 2px;
	object-fit: cover;
}

.us-card__season {
	width: 22px;
	height: 22px;
}

.us-card__year {
	padding: 2px 8px;
	border-radius: 6px;
	background: #f7f8fa;
	color: #5c6673;
	font-size: 12px;
	font-weight: 700;
}

/* Несколько складов — значок слоёв: у товара больше предложений,
   чем одно. Подпись даёт всплывающая подсказка. */
.us-ico--offers {
	width: 18px;
	height: 18px;
	color: #1f7ae0;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 2.8 7.4 12 12l9.2-4.6z'/%3E%3Cpath d='M2.8 12 12 16.6 21.2 12'/%3E%3Cpath d='M2.8 16.6 12 21.2l9.2-4.6'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 2.8 7.4 12 12l9.2-4.6z'/%3E%3Cpath d='M2.8 12 12 16.6 21.2 12'/%3E%3Cpath d='M2.8 16.6 12 21.2l9.2-4.6'/%3E%3C/g%3E%3C/svg%3E");
}

/* Плашки-подписи — не текст для выделения: над ними курсор должен
   оставаться стрелкой, как над иконками рядом. Иначе строка данных
   ведёт себя по-разному в зависимости от того, куда попал курсор. */
.us-card__stock,
.us-card__year,
.us-card__country,
.us-card__line .us-ico {
	cursor: default;
}

/* наличие: сумма остатков по всем складам товара */
.us-card__stock {
	padding: 2px 8px;
	border-radius: 6px;
	background: #eaf7ee;
	color: #1f7a38;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

/* --- оценка -------------------------------------------------- */
.us-card__rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	white-space: nowrap;
}

.us-card__stars {
	display: inline-flex;
	gap: 2px;
}

/* звёзды золотые намеренно: это общепринятый знак оценки,
   синяя звезда читается как элемент интерфейса, а не как рейтинг */
.us-card__star {
	width: 13px;
	height: 13px;
	background: #dfe3e8;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E") no-repeat center / 13px 13px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E") no-repeat center / 13px 13px;
}

.us-card__star.is-on {
	background: #f5a623;
}

.us-card__reviews {
	font-size: 12px;
}

/* --- цена и кнопка ------------------------------------------- */
.us-card__buy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid #eef1f5;
}

/* Правило было с фиксированным отступом и перебивало margin-top: auto
   из блока выше — цена вставала сразу под данными, а не у низа.
   Карточки в ряду одной высоты, но строк данных у них разное число,
   и цена гуляла по вертикали. Оставляем auto: минимальный зазор
   держит padding-top самой строки. */
.us-card__line + .us-card__buy,
.us-card__title + .us-card__buy {
	margin-top: auto;
}

/* Зазор над линией держит не она сама, а сосед сверху: auto-отступ
   строки цены в тесных карточках обращается в ноль, и линия
   упиралась в последнюю строку данных. nth-last-child(2) — это
   всегда то, что стоит прямо перед ценой, чем бы оно ни было. */
.product-grid .us-card__body > *:nth-last-child(2) {
	margin-bottom: 14px;
}

.us-card__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 5px;
	min-width: 0;
}

.us-card__from {
	color: #6b7280;
	font-size: 13px;
	font-weight: 400;
}

.us-card__price-now {
	color: #1b2838;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.2px;
	white-space: nowrap;
}

.us-card__price-old {
	color: #9aa0a8;
	font-size: 13px;
	text-decoration: line-through;
	white-space: nowrap;
}

.us-card__cart,
a.us-card__cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 40px;
	border-radius: 10px;
	background: #2fa84f;
	color: #fff;
}

/* иконка темы, подаётся маской — красится цветом кнопки */
.us-card__cart-ico {
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url("../img/ico-cart.svg") no-repeat center / contain;
	mask: url("../img/ico-cart.svg") no-repeat center / contain;
}

/* подпись оставляем для скринридера и поиска по странице */
.us-card__hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

a.us-card__cart:hover {
	background: #268c42;
	color: #fff;
	text-decoration: none;
}

/* --- шипы ---------------------------------------------------- */
/* Рисунок временный, до своих иконок: протектор с шипами
   и протектор с ламелями. */
.us-ico--spike,
.us-ico--nospike {
	width: 20px;
	height: 20px;
}

.us-ico--spike {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5.5' y='2' width='13' height='20' rx='6.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cg fill='%23000'%3E%3Ccircle cx='9.5' cy='8' r='1.5'/%3E%3Ccircle cx='14.5' cy='8' r='1.5'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3Ccircle cx='9.5' cy='16' r='1.5'/%3E%3Ccircle cx='14.5' cy='16' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5.5' y='2' width='13' height='20' rx='6.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cg fill='%23000'%3E%3Ccircle cx='9.5' cy='8' r='1.5'/%3E%3Ccircle cx='14.5' cy='8' r='1.5'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3Ccircle cx='9.5' cy='16' r='1.5'/%3E%3Ccircle cx='14.5' cy='16' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

.us-ico--nospike {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='5.5' y='2' width='13' height='20' rx='6.5'/%3E%3Cpath d='M7.6 8q1.1-1.1 2.2 0t2.2 0 2.2 0 2.2 0'/%3E%3Cpath d='M7.6 12q1.1-1.1 2.2 0t2.2 0 2.2 0 2.2 0'/%3E%3Cpath d='M7.6 16q1.1-1.1 2.2 0t2.2 0 2.2 0 2.2 0'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='5.5' y='2' width='13' height='20' rx='6.5'/%3E%3Cpath d='M7.6 8q1.1-1.1 2.2 0t2.2 0 2.2 0 2.2 0'/%3E%3Cpath d='M7.6 12q1.1-1.1 2.2 0t2.2 0 2.2 0 2.2 0'/%3E%3Cpath d='M7.6 16q1.1-1.1 2.2 0t2.2 0 2.2 0 2.2 0'/%3E%3C/g%3E%3C/svg%3E");
}

@media (max-width: 575px) {
	.us-card__media {
		padding: 36px 16px 8px;
	}

	.us-card__body {
		padding: 0 14px 14px;
	}

	.us-card__cart {
		padding: 0 14px;
	}
}

/* ============ Ночная тема ============ */
/* Включается атрибутом data-theme="dark" на <html>: его ставит
   встроенный в шапку скрипт до первой отрисовки, иначе при загрузке
   мелькает светлая страница. Выбор помнится в localStorage.

   Тема собрана слоем поверх дневной, а не отдельным файлом: цвета
   в main.css темы прописаны значениями, переменных там нет, и
   переопределять всё равно пришлось бы селекторами. Токены ночи:

     фон страницы   #0f1720
     плашки         #18222e
     заливки        #1f2b39
     рамки          #27333f
     текст          #e4e9ef
     текст тусклый  #93a0ae
     ссылки         #4d9bea

   Синий и зелёный акценты те же, что днём. */

/* нативные элементы (прокрутка, списки, календари) тоже темнеют */
html[data-theme="dark"] {
	color-scheme: dark;
}

html[data-theme="dark"] body {
	background-color: #0f1720;
	color: #c7ced6;
}

/* --- заголовки и текст ------------------------------------- */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] label,
html[data-theme="dark"] .us-main-shop-title,
html[data-theme="dark"] .us-main-shop-title a {
	color: #e4e9ef;
}

html[data-theme="dark"] a {
	color: #4d9bea;
}

/* Ссылки с собственным цветом. Ночное правило ссылок выше бьёт
   по специфичности почти любой класс, поэтому цвет приходится
   возвращать явно: иначе синий текст ложится на синюю кнопку
   каталога и на зелёные кнопки покупки. */
/* Значок корзины — кнопка, а не ссылка, поэтому общее ночное
   правило ссылок его не красит, и он оставался серым рядом
   с голубыми соседями. */
html[data-theme="dark"] .us-head__actions #cart .us-cart-img {
	color: #4d9bea;
}

html[data-theme="dark"] a.us-bar__catalog,
html[data-theme="dark"] a.us-bar__catalog:hover,
html[data-theme="dark"] a.us-card__cart,
html[data-theme="dark"] a.us-sim__cart,
html[data-theme="dark"] a.us-stagger__buy,
html[data-theme="dark"] a.us-cart__checkout,
html[data-theme="dark"] a.us-cartpage__checkout {
	color: #fff;
}

/* Телефоны: светлые, синими становятся по наведению. */
html[data-theme="dark"] a.us-head__tel,
html[data-theme="dark"] html a.us-footer-phone,
html[data-theme="dark"] a.us-footer-phone {
	color: #e4e9ef;
}

html[data-theme="dark"] a.us-head__tel:hover,
html[data-theme="dark"] html a.us-footer-phone:hover,
html[data-theme="dark"] a.us-footer-phone:hover {
	color: #4d9bea;
}

/* Сезоны в выпадающем меню: синим по тёмному читались плохо.
   По наведению цвет не меняем — днём он тоже остаётся прежним. */
html[data-theme="dark"] a.us-mega__season,
html[data-theme="dark"] a.us-mega__season:hover {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-main-shop-title:after {
	background: #27333f;
}

/* --- шапка -------------------------------------------------- */
html[data-theme="dark"] .us-head__card,
html[data-theme="dark"] .us-bar,
html[data-theme="dark"] .us-mega {
	background: #18222e;
}

html[data-theme="dark"] .us-bar-wrap {
	background: #0f1720;
}

html[data-theme="dark"] .us-head__search #search,
html[data-theme="dark"] .us-chip {
	background: #1f2b39;
	border-color: #27333f;
	color: #e4e9ef;
}

html[data-theme="dark"] .us-head__search #search::placeholder {
	color: #7d8a98;
}

/* сезонные плашки: пастель днём, приглушённая заливка ночью */
html[data-theme="dark"] .us-chip--winter {
	background: #152536;
	border-color: #1d3a55;
}

html[data-theme="dark"] .us-chip--summer {
	background: #2a2416;
	border-color: #4a3c1c;
}

html[data-theme="dark"] .us-chip--all {
	background: #15291c;
	border-color: #1f4229;
}

html[data-theme="dark"] .us-head__info-row,
html[data-theme="dark"] .us-head__slogan,
html[data-theme="dark"] .us-head__user-label {
	color: #93a0ae;
}

html[data-theme="dark"] .us-head__chips-sep,
html[data-theme="dark"] .us-head__sep {
	background: #27333f;
}

html[data-theme="dark"] .us-head__lang #select-language {
	background: #1f2b39;
	border-color: #27333f;
}

html[data-theme="dark"] .us-head__lang #select-language a {
	color: #93a0ae;
}

html[data-theme="dark"] .us-head__lang #select-language a:hover {
	background: #253343;
	color: #e4e9ef;
}

/* --- мегаменю ----------------------------------------------- */
html[data-theme="dark"] .us-mega > div + div {
	border-color: #27333f;
}

html[data-theme="dark"] .us-mega__title {
	color: #93a0ae;
}

html[data-theme="dark"] .us-mega__chip,
html[data-theme="dark"] .us-mega__brand,
html[data-theme="dark"] .us-mega__help {
	background: #1f2b39;
	border-color: #27333f;
	color: #e4e9ef;
}

html[data-theme="dark"] .us-mega__chip:hover,
html[data-theme="dark"] .us-mega__help:hover {
	background: #1b2e46;
	border-color: #1f7ae0;
	color: #6fb0f2;
}

/* Логотипы брендов рисованы для светлого фона — на тёмном
   оставляем им подложку. Именно белую: часть логотипов приходит
   с собственным белым фоном, и на серой подложке он проявляется
   прямоугольником. */
html[data-theme="dark"] .us-mega__brand {
	background: #fff;
}

/* --- блоки страниц ------------------------------------------ */
html[data-theme="dark"] .us-category-content,
html[data-theme="dark"] .us-categories-box,
html[data-theme="dark"] .us-module-item,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .us-product > *,
html[data-theme="dark"] .us-product > .us-reviews,
html[data-theme="dark"] .us-pcard,
html[data-theme="dark"] .us-product-right .us-product-title-block,
html[data-theme="dark"] .us-product-right .us-product-info,
html[data-theme="dark"] .us-offers,
html[data-theme="dark"] .us-product-note {
	background-color: #18222e;
	border-color: #27333f;
	color: #c7ced6;
}

html[data-theme="dark"] .us-offers__item,
html[data-theme="dark"] .us-product-attr-item {
	background: #1f2b39;
	border-color: #27333f;
	color: #e4e9ef;
}

html[data-theme="dark"] .us-product-info-list,
html[data-theme="dark"] .us-product-note {
	color: #c7ced6;
}

/* --- превью товара ----------------------------------------- */
html[data-theme="dark"] .us-card {
	background: #18222e;
	border-color: #27333f;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

html[data-theme="dark"] .us-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

/* Фотографии товаров сняты на белом, поэтому область под фото
   ночью остаётся светлой: иначе получается яркий прямоугольник
   посреди тёмной карточки. Белым заливаем не всю зону, а плитку
   с отступом: иначе белое упирается прямо в название товара,
   и стык режет глаз. Отступ рисуется подложкой, а не padding'ом, —
   высоты карточки в двух темах остаются одинаковыми. */
html[data-theme="dark"] .us-card__media {
	position: relative;
	background: transparent;
}

html[data-theme="dark"] .us-card__media:before {
	content: '';
	position: absolute;
	top: 5px;
	right: 5px;
	bottom: 5px;
	left: 5px;
	border-radius: 12px;
	background: #fff;
}

/* фотография выше подложки: позиционированный псевдоэлемент
   иначе накрыл бы её собой */
html[data-theme="dark"] .us-card__photo {
	position: relative;
}

html[data-theme="dark"] .us-card__tools a {
	background: #fff;
	color: #5c6673;
}

html[data-theme="dark"] .us-card__title,
html[data-theme="dark"] .us-card__price-now {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-card__title-size,
html[data-theme="dark"] .us-card__from,
html[data-theme="dark"] .us-card__reviews {
	color: #93a0ae;
}

html[data-theme="dark"] .us-card__year,
html[data-theme="dark"] .us-card__country {
	background: #1f2b39;
	color: #aab6c4;
}

html[data-theme="dark"] .us-card__stock {
	background: #15291c;
	color: #5ecb7d;
}

html[data-theme="dark"] .us-card__buy {
	border-color: #27333f;
}

html[data-theme="dark"] .us-card__star {
	background: #2f3c4a;
}

html[data-theme="dark"] .us-card__star.is-on {
	background: #f5a623;
}

/* --- кнопки типоразмеров и прочие светлые плашки ------------ */
html[data-theme="dark"] .us-size,
html[data-theme="dark"] .selection-page .us-size {
	background: #1f2b39;
	border-color: #27333f;
	color: #e4e9ef;
}

html[data-theme="dark"] .us-size__count {
	background: #27333f;
	color: #aab6c4;
}

/* --- подвал ------------------------------------------------- */
/* Плиту подвала рисует `.footer-sub::before` по ширине страницы.
   Ночью фон красился на сам `footer` — то есть во всю ширину окна,
   и плита переставала читаться. Цвет оставляем только тексту. */
html[data-theme="dark"] footer,
html[data-theme="dark"] .us-footer,
html[data-theme="dark"] .us-footer-box {
	background-color: transparent;
	color: #c7ced6;
}

/* --- переключатель темы ------------------------------------ */
/* Иконки присланы владельцем: лампа и лампа с перечёркиванием.
   Подаются маской, поэтому красятся цветом текста. Размер
   нормализован по высоте — viewBox у них разный. */
button.us-head__theme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	min-height: 38px;
	padding: 0;
	border: 1px solid #e6e9ef;
	border-radius: 999px;
	background: #fff;
	color: #5c6673;
}

button.us-head__theme:hover {
	border-color: #c9d4e0;
	color: #1b2838;
}

button.us-head__theme:before {
	content: '';
	width: 16px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url("../img/ico-theme-dark.svg") no-repeat center / contain;
	mask: url("../img/ico-theme-dark.svg") no-repeat center / contain;
}

/* ночью на кнопке горящая лампа — ею свет включают обратно.
   Рисунок с лучами выше, чем широкий (28×41), поэтому коробка
   под него своя: в квадратной он ужался бы по ширине. */
button.us-head__theme.is-dark:before {
	width: 15px;
	height: 21px;
	-webkit-mask-image: url("../img/ico-theme-light.svg");
	mask-image: url("../img/ico-theme-light.svg");
}

html[data-theme="dark"] button.us-head__theme {
	background: #1f2b39;
	border-color: #27333f;
	color: #f0c55a;
}

html[data-theme="dark"] button.us-head__theme:hover {
	border-color: #3d4b5c;
	color: #ffd97a;
}

/* --- ночь: фильтр в левой колонке -------------------------- */
/* Тема задаёт этим блокам цвета через !important, поэтому и здесь
   без него не обойтись. */
html[data-theme="dark"] .ocfilter .panel-heading,
html[data-theme="dark"] .us-module-column-box .panel-heading,
html[data-theme="dark"] #column-left .panel-heading,
html[data-theme="dark"] #column-right .panel-heading {
	background-color: #1f2b39 !important;
	color: #e4e9ef !important;
}

/* Секции фильтра лежат на плашке панели и своего фона не имеют —
   днём он у них прозрачный. Ночью заливка давала плашку в плашке,
   а у блока выбранных значений — светлое пятно. */
html[data-theme="dark"] .ocfilter .list-group-item,
html[data-theme="dark"] #column-left .list-group-item,
html[data-theme="dark"] #column-right .list-group-item,
html[data-theme="dark"] .ocfilter-option .ocf-option-values {
	background-color: transparent !important;
	border-color: #27333f !important;
	color: #c7ced6 !important;
}

html[data-theme="dark"] .ocf-option-name,
html[data-theme="dark"] .ocfilter-option label span,
html[data-theme="dark"] #column-left label {
	color: #c7ced6 !important;
}

/* ползунок цены */
html[data-theme="dark"] .noUi-target {
	background: #27333f;
	border-color: #27333f;
	box-shadow: none;
}

html[data-theme="dark"] .noUi-handle {
	background: #1f2b39;
	border-color: #3d4b5c;
	box-shadow: none;
}

html[data-theme="dark"] .noUi-marker {
	background: #3d4b5c;
}

/* --- ночь: выпадающие списки ------------------------------- */
html[data-theme="dark"] select:not(.us-pick__select),
html[data-theme="dark"] select.form-control:not(.us-pick__select),
html[data-theme="dark"] .sort-select,
html[data-theme="dark"] .limit-select {
	background-color: #1f2b39;
	border-color: #27333f;
	color: #e4e9ef;
}

html[data-theme="dark"] .m-selection .select2-container .select2-selection--single,
html[data-theme="dark"] .select2-dropdown {
	background: #1f2b39 !important;
	color: #e4e9ef;
}

html[data-theme="dark"] .m-selection .select2-container--default.select2-container--disabled .select2-selection--single {
	background: #182331 !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-results__option {
	color: #c7ced6;
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: #1f7ae0;
	color: #fff;
}

/* поле подбора в тёмной плашке днём белое — ночью тоже
   оставляем светлым, плашка сама тёмная в обеих темах */

/* --- ночь: хлебные крошки и страницы ---------------------- */
html[data-theme="dark"] .breadcrumb {
	background-color: transparent;
	border-color: #27333f;
	color: #c7ced6;
}

html[data-theme="dark"] .pagination li a,
html[data-theme="dark"] .pagination li.active span {
	background: #18222e;
	border-color: #27333f;
	color: #c7ced6;
}

html[data-theme="dark"] .pagination li a:hover {
	background: #25374d;
	border-color: #3d4b5c;
	color: #fff;
}

/* ночью тёмная заливка активной страницы не читалась бы на тёмном
   фоне — поднимаем её на тон выше, как у переключателя вида */
html[data-theme="dark"] .pagination li.active span {
	background: #2e4056;
	border-color: #3d4b5c;
	color: #fff;
}

/* --- ночь: подсказка курсора ------------------------------- */
html[data-theme="dark"] .us-tip {
	background: #e4e9ef;
	color: #0f1720;
}

/* --- ночь: поля ввода -------------------------------------- */
/* Наши поля подбора (.us-pick__select) намеренно остаются светлыми:
   плашка подбора тёмная в обеих темах, белое поле на ней читается
   лучше любого тёмного. */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control:not(.us-pick__select) {
	background-color: #1f2b39;
	border-color: #27333f;
	color: #e4e9ef;
}

html[data-theme="dark"] ::placeholder {
	color: #7d8a98;
}

html[data-theme="dark"] .us-pick__select {
	color: #1b2838;
}

/* --- ночь: html-блоки на главной --------------------------- */
html[data-theme="dark"] .us-html-box,
html[data-theme="dark"] .us-html-box-text {
	background-color: #18222e;
	color: #c7ced6;
}

html[data-theme="dark"] .us-html-box .us-main-shop-title {
	color: #e4e9ef;
}

html[data-theme="dark"] .sezon-tabs .sub-tab label {
	color: #93a0ae;
}

html[data-theme="dark"] .sezon-tabs input:checked + label,
html[data-theme="dark"] .sezon-tabs .sub-tab label:hover {
	color: #e4e9ef;
}

/* --- ночь: цены на странице товара ------------------------- */
/* У темы цена тёмно-серая (#333) — на тёмном фоне она пропадала. */
html[data-theme="dark"] .us-price-actual,
html[data-theme="dark"] .us-price-value,
html[data-theme="dark"] .us-offers__price {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-price-old {
	color: #7d8a98;
}

html[data-theme="dark"] .us-price-from,
html[data-theme="dark"] .us-offers__label,
html[data-theme="dark"] .us-offers__item-label {
	color: #93a0ae;
}

html[data-theme="dark"] .us-product-code,
html[data-theme="dark"] .us-product-meta {
	color: #93a0ae;
}

/* таблица характеристик */
html[data-theme="dark"] .table,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
	color: #c7ced6;
	border-color: #27333f;
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
	background-color: #1b2634;
}

/* --- ночь: плашки складов в товаре ------------------------- */
html[data-theme="dark"] .us-offers__fact {
	background: #1f2b39;
	border-color: #27333f;
	color: #e4e9ef;
}

html[data-theme="dark"] .us-offers__fact small,
html[data-theme="dark"] .us-offers__fact span {
	color: #93a0ae;
}

/* --- Переключатель «список / сетка» ------------------------- */
/* Тема красит все кнопки правилом html [type=button] — отсюда тег
   в селекторе, одного класса не хватает. Фон тёмный, как у кнопки
   подбора по авто; неактивная иконка белая, активная синяя. */
/* Тумблером, как переключатель языков: тонкая рамка, внутри два
   сегмента без заливки. Залит только активный, и не синим, а тёмным —
   синий в этой строке уже занят ссылками и сортировкой. */
.us-category-appearance {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px;
	border: 1px solid #e6e9ef;
	border-radius: 12px;
	background: #fff;
}

/* Активное состояние — яркостью, а не цветом: синий в системе
   означает навигацию, зелёный — покупку, и для «каким видом смотрю»
   ни тот, ни другой не годится. Неактивная иконка приглушена,
   активная белая на чуть более светлой подложке. */
button.us-category-appearance-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #5c6673;
	font-size: 15px;
	transition: background .15s ease, color .15s ease;
}

button.us-category-appearance-btn:hover {
	background: #f4f6f9;
	color: #1b2838;
}

button.us-category-appearance-btn.active,
button.us-category-appearance-btn.active:hover {
	background: #1b2838;
	color: #fff;
}

/* --- Превью в режиме списка -------------------------------- */
/* Фотография слева и почти вдвое меньше, чем в сетке; справа от неё
   название, строки данных, а у правого края цена с кнопкой. */
.product-list {
	margin-bottom: 16px;
}

.product-list .us-card {
	flex-direction: row;
	align-items: stretch;
	height: auto;
	margin-bottom: 0;
}

/* media перестаёт быть точкой отсчёта, и лого с закладками
   встают по углам всей карточки, а не узкой колонки с фото */
.product-list .us-card__media {
	position: static;
	flex: 0 0 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
}

.product-list .us-card__photo img {
	max-height: 122px;
}

/* В сетке закладки лежат в углу фото, а в списке фото узкое:
   переносим их к разделителю, иначе они всплывают поверх цены.
   z-index обязателен: тело карточки в списке позиционировано и идёт
   в разметке позже, поэтому перекрывало кнопки — они были видны,
   но не нажимались. */
.product-list .us-card__eu {
	bottom: 8px;
	left: 8px;
	flex-direction: row;
	gap: 3px;
}

.product-list .us-card__tools {
	top: 50%;
	right: 206px;
	z-index: 3;
	flex-direction: row;
	transform: translateY(-50%);
}

.product-list .us-card__body {
	position: relative;
	justify-content: center;
	/* справа зарезервировано под колонку с ценой (190) и под
	   иконки закладок перед разделителем — обе вынуты из потока */
	padding: 14px 290px 14px 4px;
}

.product-list .us-card__line {
	justify-content: flex-start;
	gap: 12px;
	margin-top: 6px;
}

.product-list .us-card__rating {
	margin-left: 0;
}

/* Цена и кнопка — колонка у правого края, отделена линией.
   Вынесена из потока: будь она обычным блоком сетки, её высота
   растянула бы строки данных и между ними появились бы провалы. */
.product-list .us-card__buy {
	position: absolute;
	/* отступы сверху и снизу одинаковые: линия не упирается
	   в скругления плашки */
	top: 14px;
	right: 0;
	bottom: 14px;
	width: 190px;
	/* сетка, а не флекс: так группа «цена + кнопка» встаёт по центру
	   колонки, а внутри обе строки начинаются от одной линии слева */
	display: grid;
	justify-content: center;
	justify-items: start;
	align-content: center;
	gap: 12px;
	margin: 0;
	padding: 0 12px 0 24px;
	border-top: 0;
	border-left: 1px solid #eef1f5;
}

.product-list .us-card__cart {
	width: auto;
	gap: 9px;
	padding: 0 18px;
	font-size: 15px;
	font-weight: 700;
}

/* подпись кнопки: в сетке её не видно, но она остаётся
   доступной скринридеру */
.us-card__cart-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.product-list .us-card__cart-label {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
}

@media (max-width: 575px) {
	.product-list .us-card {
		flex-direction: column;
	}

	.product-list .us-card__media {
		flex: 0 0 auto;
	}

	.product-list .us-card__body {
		padding: 0 16px 16px;
	}

	.product-list .us-card__tools {
		top: 12px;
		right: 12px;
		transform: none;
	}

	.product-list .us-card__buy {
		position: static;
		width: auto;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 12px;
		padding: 14px 0 0;
		border-top: 1px solid #eef1f5;
		border-left: 0;
	}
}

/* в режиме списка плитка та же: радиус задан у подложки,
   отдельного правила на угол больше не нужно */

html[data-theme="dark"] .product-list .us-card__buy {
	border-color: #27333f;
}

/* --- Информационные страницы -------------------------------- */
/* Текстовые страницы (о нас, доставка, оферта, возврат, политика,
   контакты, карта сайта) идут на общей белой плашке `.us-content`.
   Ночью она оставалась белой: своего правила у неё не было. */
html[data-theme="dark"] .us-content {
	background-color: #16202b;
	box-shadow: none;
	color: #b9c2cd;
}

html[data-theme="dark"] .us-content h1,
html[data-theme="dark"] .us-content h3,
html[data-theme="dark"] .us-content h4,
html[data-theme="dark"] .us-content h5,
html[data-theme="dark"] .us-content strong,
html[data-theme="dark"] .us-content b,
html[data-theme="dark"] .us-content td,
html[data-theme="dark"] .us-content th {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-content table,
html[data-theme="dark"] .us-content td,
html[data-theme="dark"] .us-content th {
	border-color: #27333f;
}

/* Плашка заголовка внутри текста (её ставит тема классом head_d):
   прямоугольник без скруглений и чужой синий. Приводим к нашим
   радиусу и цвету — страницы текстовые, но рамка у них общая
   с остальным сайтом. */
.us-content .head_d {
	margin: 22px 0 18px;
	padding: 12px 18px;
	border-radius: 12px;
	background: #1f7ae0;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
}

.us-content .head_d:first-child {
	margin-top: 0;
}

html[data-theme="dark"] .us-content .head_d {
	background: #1b4f87;
	color: #e4e9ef;
}

/* Кнопки на текстовых страницах: у темы они серые, прямоугольные
   и в верхнем регистре. Геометрия наша, цвет — как у второстепенных
   кнопок карточки. */
.us-content a.us-module-btn,
.us-content button.us-module-btn,
.us-content input.us-module-btn,
#content a.us-module-btn,
#content button.us-module-btn,
#content input.us-module-btn,
#content .buttons a.us-module-btn,
#content .buttons button.us-module-btn,
#content .buttons input.us-module-btn {
	/* !important нужен из-за утилиты Bootstrap d-inline-block:
	   она стоит в разметке темы рядом с классом кнопки и объявлена
	   с !important. Без этого высота 42px остаётся, а центровка
	   пропадает, и текст уезжает в левый верхний угол. */
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 20px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #f7f8fa;
	color: #1b2838 !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
}

.us-content a.us-module-btn:hover,
.us-content button.us-module-btn:hover,
.us-content input.us-module-btn:hover {
	border-color: #1f7ae0;
	background: #fff;
	color: #1f7ae0 !important;
}

/* Отправка формы — главное действие на странице, она синяя.
   Селектор с #content обязателен: правило обычных кнопок выше
   тоже с #content и иначе перебивает его по специфичности. */
#content input.us-module-btn-green,
#content button.us-module-btn-green,
.us-content input.us-module-btn-green,
.us-content button.us-module-btn-green,
#content .buttons input.us-module-btn-green,
#content .buttons button.us-module-btn-green {
	border-color: #1f7ae0;
	background: #1f7ae0;
	color: #fff !important;
}

.us-content input.us-module-btn-green:hover,
.us-content button.us-module-btn-green:hover {
	border-color: #1765bd;
	background: #1765bd;
	color: #fff !important;
}

html[data-theme="dark"] #content a.us-module-btn,
html[data-theme="dark"] #content button.us-module-btn,
html[data-theme="dark"] #content input.us-module-btn,
html[data-theme="dark"] .us-content a.us-module-btn,
html[data-theme="dark"] .us-content button.us-module-btn,
html[data-theme="dark"] .us-content input.us-module-btn {
	border-color: #27333f;
	background: #1f2b39;
	color: #e4e9ef !important;
}

html[data-theme="dark"] #content input.us-module-btn-green,
html[data-theme="dark"] #content button.us-module-btn-green,
html[data-theme="dark"] .us-content input.us-module-btn-green,
html[data-theme="dark"] .us-content button.us-module-btn-green {
	border-color: #1f7ae0;
	background: #1f7ae0;
	color: #fff !important;
}

/* Поля формы обратной связи: у темы прямые углы
   и высота 40px. Селектор со страницей в корне: `.form-control`
   живёт ещё в поиске и фильтрах, туда лезть незачем. */
#information-contact input.form-control {
	height: 46px;
}

#information-contact input.form-control,
#information-contact textarea.form-control {
	padding: 10px 14px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff;
	color: #1b2838;
	font-size: 14px;
	box-shadow: none;
}

#information-contact input.form-control:focus,
#information-contact textarea.form-control:focus {
	border-color: #1f7ae0;
	outline: 2px solid rgba(31, 122, 224, .18);
}

html[data-theme="dark"] #information-contact input.form-control,
html[data-theme="dark"] #information-contact textarea.form-control {
	border-color: #27333f;
	background: #141c26;
	color: #e4e9ef;
}

/* Карта сайта: два столбца ссылок. Разделы крупнее вложенных,
   вложенные отбиты линией — иначе всё сливается в один список. */
.us-content-sitemap ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.us-content-sitemap > .row > div > ul > li {
	margin-bottom: 18px;
}

.us-content-sitemap > .row > div > ul > li > a {
	color: #1b2838;
	font-size: 16px;
	font-weight: 700;
}

.us-content-sitemap ul ul {
	margin: 8px 0 0;
	padding-left: 14px;
	border-left: 1px solid #e3e8ee;
}

.us-content-sitemap ul ul li {
	margin-bottom: 6px;
}

.us-content-sitemap ul ul a {
	color: #5c6673;
	font-size: 14px;
}

html .us-content-sitemap a {
	text-decoration: none;
}

html .us-content-sitemap a:hover {
	color: #1f7ae0;
	text-decoration: underline;
}

html[data-theme="dark"] .us-content-sitemap > .row > div > ul > li > a {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-content-sitemap ul ul {
	border-left-color: #27333f;
}

html[data-theme="dark"] .us-content-sitemap ul ul a {
	color: #b9c2cd;
}

/* --- Пагинация --------------------------------------------- */
/* Тема рисовала страницы радиусом 2px, а активную заливала
   салатовым из старой палитры — поверх неё настройки темы
   подставляли синий. Приводим к нашему радиусу и тёмной заливке:
   синяя страница в строке спорила бы со синими ссылками рядом. */
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pagination li:not(:last-child) {
	margin-right: 0;
}

.pagination li a,
.pagination li.active span {
	min-width: 38px;
	padding: 10px 13px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff;
	color: #1b2838;
	font-size: 14px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
}

.pagination li a:hover {
	border-color: #25374d;
	background: #25374d;
	color: #fff;
	text-decoration: none;
}

.pagination li.active span {
	border-color: #1b2838;
	background: #1b2838;
	color: #fff;
}

/* --- ночь: выбранная плашка склада ------------------------- */
html[data-theme="dark"] .us-offers__item--picked {
	background: #253343;
	border-color: #3d4b5c;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .us-offers__item--best.us-offers__item--picked {
	background: #16301f;
	border-color: #2b5c3a;
}

/* --- ночь: закладки и сравнение в карточке товара ---------- */
html[data-theme="dark"] button.us-product-tool {
	background: #1f2b39;
	color: #93a0ae;
}

html[data-theme="dark"] button.us-product-tool:hover {
	background: #1b2e46;
	color: #6fb0f2;
}

/* --- единственный поставщик -------------------------------- */
/* Переключать нечего: плашка выделена как активная сразу, в обычных
   тонах — зелёная заливка означает «лучшее из нескольких», а здесь
   сравнивать не с чем. На наведение вид не меняется, чтобы не
   выглядело кликабельным. */
.us-offers__item--single,
.us-offers__item--single:hover {
	cursor: default;
	border-color: #c3cfdc;
	background: #fafbfc;
}

html[data-theme="dark"] .us-offers__item--single,
html[data-theme="dark"] .us-offers__item--single:hover {
	background: #253343;
	border-color: #3d4b5c;
}

/* --- ночь: подсказка про города ---------------------------- */
html[data-theme="dark"] .us-product-info .us-action-hint {
	background: rgba(77, 155, 234, .14);
	color: #9db6cf;
}

/* --- ночь: переключатель вида ------------------------------ */
/* Тёмная заливка активного на тёмной странице не читалась бы,
   поэтому он на тон светлее — как у тумблера языков. */
html[data-theme="dark"] .us-category-appearance {
	background: #1f2b39;
	border-color: #27333f;
}

html[data-theme="dark"] button.us-category-appearance-btn {
	color: #93a0ae;
}

html[data-theme="dark"] button.us-category-appearance-btn:hover {
	background: #253343;
	color: #e4e9ef;
}

html[data-theme="dark"] button.us-category-appearance-btn.active,
html[data-theme="dark"] button.us-category-appearance-btn.active:hover {
	background: #2e4056;
	color: #fff;
}

/* --- Условия покупки: доставка, оплата, гарантия ----------- */
/* Три самостоятельных блока под складами. Иконки — кружок-подложка
   с маской внутри: сама иконка рисуется ::before, поэтому один
   элемент даёт и фон, и перекрашиваемый рисунок. */
.us-terms {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 16px;
}

.us-terms__block {
	padding: 18px 20px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.us-terms__head {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 11px;
	margin-bottom: 14px;
}

/* Явная раскладка: при неявных строках grid-row: 1/-1 охватывал
   только первую, и подпись в блоке оплаты уезжала под иконку. */
.us-terms__ico {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 22px;
	height: 22px;
	background: #1b2838;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.us-terms__title {
	grid-column: 2;
	grid-row: 1;
	color: #1b2838;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
}

.us-terms__subtitle {
	grid-column: 2;
	grid-row: 2;
	color: #6b7280;
	font-size: 13px;
	line-height: 1.3;
}

/* --- строки доставки --------------------------------------- */
.us-terms__rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.us-terms__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border-radius: 12px;
	background: #f7f8fa;
}

/* В строках доставки круглых подложек нет: у перевозчика свой
   логотип, и кружок рядом с ним выглядел бы лишней рамкой. */
.us-terms__rico {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	background: #1f7ae0;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.us-terms__rico--pin {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
}

/* от логотипа перевозчика оставлен только знак: надпись рядом
   с собственным названием строки дублировала бы её */
.us-terms__logo {
	flex: 0 0 auto;
	width: 34px;
	height: auto;
}

/* приписка третьей строкой: тариф считает перевозчик, не магазин */
.us-terms__tariff {
	margin-top: 3px;
	color: #4d9bea;
	font-size: 12px;
}

/* --- блок доставки: две карточки в ряд на фотографии -------- */
/* У background-image своей прозрачности нет, поэтому фотография
   приглушена белой вуалью поверх неё: слева она почти сплошная,
   под заголовком снимок не должен спорить с текстом, справа
   пропускает около 40 % — там стоит колесо. */
.us-terms__block--delivery {
	background-image:
		linear-gradient(to right,
			#fff 0%,
			rgba(255, 255, 255, .97) 26%,
			rgba(255, 255, 255, .6) 62%,
			rgba(255, 255, 255, .6) 100%),
		url('/image/catalog/product/delivery-bg.jpg');
	background-repeat: no-repeat;
	background-position: center right;
	background-size: cover;
}

.us-terms__block--delivery .us-terms__rows {
	flex-direction: row;
	gap: 12px;
}

/* карточки непрозрачные: сквозь них фотография читалась бы как грязь */
.us-terms__block--delivery .us-terms__row {
	flex: 1 1 0;
	min-width: 0;
	background: rgba(255, 255, 255, .93);
	box-shadow: 0 1px 4px rgba(16, 32, 56, .06);
}

@media (max-width: 767px) {
	.us-terms__block--delivery .us-terms__rows {
		flex-direction: column;
	}
}

.us-terms__row-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.us-terms__row-title {
	color: #1b2838;
	font-size: 14px;
	font-weight: 700;
}

.us-terms__row-note {
	color: #5c6673;
	font-size: 13px;
	line-height: 1.35;
}

/* --- кружок с иконкой -------------------------------------- */
.us-terms__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #eef4fb;
}

.us-terms__chip:before {
	content: '';
	width: 25px;
	height: 25px;
	background: #1f7ae0;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.us-terms__chip--green {
	background: #eaf7ee;
}

.us-terms__chip--green:before {
	background: #2fa84f;
}

/* --- способы оплаты ---------------------------------------- */
.us-terms__pays {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.us-terms__pay {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid #e3e8ee;
	border-radius: 12px;
	background: #fff;
	color: #1b2838;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.us-terms__pay-img {
	flex: 0 0 auto;
	height: auto;
}

/* карта — цветная иллюстрация, её пропорции 1.6:1 */
.us-terms__pay-img--card {
	width: 40px;
}

.us-terms__pay-img--pay {
	width: 62px;
}

/* тёмный вариант логотипа нужен только ночью */
.us-terms__pay-img--night {
	display: none;
}

html[data-theme="dark"] .us-terms__pay-img--pay:not(.us-terms__pay-img--night) {
	display: none;
}

html[data-theme="dark"] .us-terms__pay-img--night {
	display: inline-block;
}

.us-terms__pay-ico {
	width: 20px;
	height: 20px;
	/* тёмный, как значки заголовков: синим они спорили с кнопками */
	background: #1b2838;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* --- колонки гарантии -------------------------------------- */
/* Разделены линиями, а не заливкой: по нашим правилам залитая
   плашка означает состояние, а здесь просто три пункта. */
.us-terms__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.us-terms__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 4px 16px;
	text-align: center;
}

.us-terms__col + .us-terms__col {
	border-left: 1px solid #eef1f5;
}

.us-terms__col-title {
	color: #1b2838;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
}

.us-terms__col-note {
	color: #5c6673;
	font-size: 12px;
	line-height: 1.35;
}

@media (max-width: 575px) {
	.us-terms__block {
		padding: 16px;
	}

	.us-terms__cols {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.us-terms__col {
		flex-direction: row;
		align-items: center;
		text-align: left;
		padding: 0;
	}

	.us-terms__col + .us-terms__col {
		border-left: 0;
		border-top: 1px solid #eef1f5;
		padding-top: 14px;
	}
}

/* --- рисунки ------------------------------------------------ */
/* присланные иконки: маской, чтобы красились цветом текста */
.us-terms__ico--truck {
	width: 26px;
	height: 26px;
	-webkit-mask-image: url("../img/delivery-fast.svg");
	mask-image: url("../img/delivery-fast.svg");
}

.us-terms__chip--days:before,
.us-terms__chip--tyre:before {
	-webkit-mask-size: contain;
	mask-size: contain;
}

.us-terms__chip--pin:before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
}

.us-terms__ico--card {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 10h19M6 15h4'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 10h19M6 15h4'/%3E%3C/g%3E%3C/svg%3E");
}

/* интернет-банк: карта в телефоне */
.us-terms__pay-ico--privat {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='2.5'/%3E%3Cpath d='M9 7h6M9 11h6M10.5 18h3'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='2.5'/%3E%3Cpath d='M9 7h6M9 11h6M10.5 18h3'/%3E%3C/g%3E%3C/svg%3E");
}

.us-terms__pay-ico--invoice {
	-webkit-mask-image: url("../img/ico-invoice.svg");
	mask-image: url("../img/ico-invoice.svg");
}

.us-terms__ico--shield,
.us-terms__chip--shield:before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 2.8v5.4c0 4.2-2.8 7.5-7 8.8-4.2-1.3-7-4.6-7-8.8V5.8z'/%3E%3Cpath d='m9 12 2.2 2.2L15.5 10'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 2.8v5.4c0 4.2-2.8 7.5-7 8.8-4.2-1.3-7-4.6-7-8.8V5.8z'/%3E%3Cpath d='m9 12 2.2 2.2L15.5 10'/%3E%3C/g%3E%3C/svg%3E");
}

/* Шина присланная владельцем; цвет — тот самый, которым покрашена
   иконка всесезонных шин в каталоге (#D2691E), подложка — его
   светлый оттенок. */
.us-terms__chip--all {
	background: #fbeee4;
}

.us-terms__chip--all:before {
	background: #D2691E;
}

.us-terms__chip--tyre:before {
	-webkit-mask-image: url("../img/tyre-full.svg");
	mask-image: url("../img/tyre-full.svg");
}

.us-terms__chip--days:before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3.5v3M16 3.5v3'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3.5v3M16 3.5v3'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- ночь --------------------------------------------------- */
html[data-theme="dark"] .us-terms__block {
	background: #18222e;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}

html[data-theme="dark"] .us-terms__ico {
	background: #e4e9ef;
}

html[data-theme="dark"] .us-terms__title,
html[data-theme="dark"] .us-terms__row-title,
html[data-theme="dark"] .us-terms__col-title,
html[data-theme="dark"] .us-terms__pay {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-terms__subtitle,
html[data-theme="dark"] .us-terms__row-note,
html[data-theme="dark"] .us-terms__col-note {
	color: #93a0ae;
}

html[data-theme="dark"] .us-terms__row {
	background: #1f2b39;
}

html[data-theme="dark"] .us-terms__pay {
	background: #1f2b39;
	border-color: #27333f;
}

html[data-theme="dark"] .us-terms__chip {
	background: rgba(31, 122, 224, .16);
}

html[data-theme="dark"] .us-terms__chip:before {
	background: #6fb0f2;
}

html[data-theme="dark"] .us-terms__chip--green {
	background: rgba(47, 168, 79, .16);
}

html[data-theme="dark"] .us-terms__chip--green:before {
	background: #5ecb7d;
}

/* Разделитель под списком товаров в попапе корзины: тема рисует
   его почти белым (#F6F6F6). На светлом фоне его не видно вовсе,
   а на тёмном он превращался в яркую полосу. */
html[data-theme="dark"] .us-modal-body-cart {
	border-bottom-color: #27333f;
}

html[data-theme="dark"] .us-terms__pay-ico {
	background: #e4e9ef;
}

html[data-theme="dark"] .us-terms__col + .us-terms__col {
	border-color: #27333f;
}

/* --- ночь: условия покупки, присланные логотипы ------------ */
html[data-theme="dark"] .us-terms__rico {
	background: #6fb0f2;
}

html[data-theme="dark"] .us-terms__tariff {
	color: #6fb0f2;
}

html[data-theme="dark"] .us-terms__chip--all {
	background: rgba(210, 105, 30, .18);
}

html[data-theme="dark"] .us-terms__chip--all:before {
	background: #e8894a;
}

/* шина нарисована подробно — в кружке ей нужно больше места */
.us-terms__chip--tyre:before {
	width: 30px;
	height: 30px;
}

/* присланный рисунок карты, маской — красится синим как остальные */
.us-terms__pay-ico--card {
	-webkit-mask-image: url("../img/ico-card.svg");
	mask-image: url("../img/ico-card.svg");
}

/* --- ночь: блок доставки ----------------------------------- */
html[data-theme="dark"] .us-terms__block--delivery {
	background-image:
		linear-gradient(to right,
			#18222e 0%,
			rgba(24, 34, 46, .97) 26%,
			rgba(24, 34, 46, .12) 62%,
			rgba(24, 34, 46, .12) 100%),
		url('/image/catalog/product/delivery-bg-dark.jpg');
	/* Раскладку повторяем: сокращённая запись `background` в общем
	   ночном правиле блоков сбрасывает её в auto / 0% 0% / repeat,
	   и снимок выводился в натуральную величину от левого угла. */
	background-repeat: no-repeat;
	background-position: center right;
	background-size: cover;
}

html[data-theme="dark"] .us-terms__block--delivery .us-terms__row {
	background: rgba(31, 43, 57, .94);
	box-shadow: none;
}

/* --- Характеристики --------------------------------------- */
/* Шапка как у блоков доставки и гарантии, список через строку
   подсвечен — глазом проще вести строку от названия к значению,
   а этикетка стоит справа отдельной колонкой. */
.us-product-attributes.us-terms__block {
	padding: 18px 20px;
}

.us-terms__ico--specs {
	-webkit-mask-image: url("../img/setting-2.svg");
	mask-image: url("../img/setting-2.svg");
}

.us-specs {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.us-specs__list {
	flex: 1 1 auto;
	min-width: 0;
}

.us-specs__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 12px;
	border-radius: 8px;
}

/* через строку: заливка вместо линеек не дробит список */
.us-specs__row:nth-child(odd) {
	background: #f7f8fa;
}

.us-specs__name {
	color: #5c6673;
	font-size: 13px;
}

.us-specs__value {
	flex: 0 0 auto;
	max-width: 55%;
	color: #1b2838;
	font-size: 13px;
	font-weight: 700;
	text-align: right;
}

/* --- этикетка справа от списка ----------------------------- */
.us-specs__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	width: 350px;
	padding: 14px;
	border: 1px solid #e3e8ee;
	border-radius: 12px;
	background: #fff;
}

.us-specs__label-title {
	color: #5c6673;
	font-size: 12px;
	text-align: center;
}

/* этикетка приходит ссылкой на сервер поставщика; она svg,
   на провод уходит сжатой — около 30 КБ, и грузится отложенно */
.us-specs__label img {
	display: block;
	width: 100%;
	height: auto;
}

/* Этикетка занимает 350px: рядом с ней на средних экранах текст
   характеристик сжимался до трети блока. Уводим её под список
   уже с 991 — текст читается во всю ширину. Если этикетки нет
   вовсе, список и так занимает всю ширину. */
@media (max-width: 991px) {
	.us-specs {
		flex-direction: column;
	}

	.us-specs__list {
		width: 100%;
	}

	.us-specs__label {
		width: 100%;
		max-width: 320px;
		align-self: center;
	}
}

@media (max-width: 767px) {

	.us-specs__label {
		width: 100%;
		max-width: 240px;
		align-self: center;
	}

	.us-specs__row {
		padding: 8px 10px;
	}
}

/* --- ночь --------------------------------------------------- */
html[data-theme="dark"] .us-specs__row:nth-child(odd) {
	background: #1f2b39;
}

html[data-theme="dark"] .us-specs__name {
	color: #93a0ae;
}

html[data-theme="dark"] .us-specs__value {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-specs__label {
	border-color: #27333f;
	background: #e9edf2;
}

html[data-theme="dark"] .us-specs__label-title {
	color: #5c6673;
}

/* --- Боковая панель: закладки, сравнение, корзина ---------- */
/* Тема прижимала панель к краю окна прямым углом в своём сером.
   Отводим от края, скругляем и красим в наш тёмный — панель
   читается как плашка, а не как вырез в экране. */
.oct-fixed-bar {
	border-radius: 14px;
	overflow: hidden;
	background: #1b2838;
	box-shadow: 0 8px 24px rgba(16, 32, 56, .18);
}

/* сторона остаётся за настройкой темы, наше дело — зазор от края */
.oct-fixed-bar.fixed-left {
	left: 18px;
	right: auto;
}

.oct-fixed-bar.fixed-right {
	right: 18px;
	left: auto;
}

.oct-fixed-bar-item + .oct-fixed-bar-item {
	border-top-color: rgba(255, 255, 255, .12);
}

.oct-fixed-bar-link {
	width: 54px;
	padding: 13px 0;
}

/* наведение — подсветка белым: синяя заливка темы означала бы
   выбор раздела, а это просто ссылка */
.oct-fixed-bar-link:hover {
	background: rgba(255, 255, 255, .09);
}

.oct-fixed-bar-quantity,
.oct-fixed-bar-link:hover .oct-fixed-bar-quantity {
	background: #1f7ae0;
	font-weight: 600;
}

/* счётчик корзины — настоящий красный; у темы он был блёклый */
#oct-cart-quantity,
.oct-fixed-bar-link:hover #oct-cart-quantity {
	background: #e01b1b;
}

html[data-theme="dark"] .oct-fixed-bar {
	background: #1f2b39;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}

/* --- Плашка покупки снизу ---------------------------------- */
/* Купить должно быть на экране всегда. Пока виден блок с ценой,
   плашка не нужна; появляется, когда его выдавило наверх. Цена
   и кнопка оформлены как в режиме списка на витрине. */
.us-buybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1030;
	/* Во всю ширину полоса спорила с блочной страницей, поэтому
	   плашка идёт по ширине страницы и висит над её низом. */
	padding: 0 0 calc(16px + env(safe-area-inset-bottom, 0px));
	pointer-events: none;
	/* Выезжает снизу: резкое появление читалось как сбой вёрстки.
	   Спрятана прозрачностью и сдвигом, а не display: none —
	   иначе переход обрывается. */
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .34s ease, transform .34s cubic-bezier(.2, .7, .3, 1);
}

.us-buybar.is-on {
	opacity: 1;
	transform: none;
}

/* пока плашки не видно, она не должна перехватывать щелчки */
.us-buybar:not(.is-on) .us-buybar__inner {
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.us-buybar {
		transform: none;
		transition: opacity .2s ease;
	}
}

.us-buybar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 18px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(16, 32, 56, .18);
	pointer-events: auto;
}

.us-buybar__product {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.us-buybar__thumb {
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: 8px;
	background: #eef1f5;
	object-fit: contain;
}

.us-buybar__name {
	min-width: 0;
}

.us-buybar__name-head {
	display: block;
	color: #1b2838;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.us-buybar__name-size {
	display: block;
	color: #5c6673;
	font-size: 12px;
}

/* группа «цена + кнопка» отделена волосяной линией — как колонка
   с ценой в режиме списка */
.us-buybar__buy {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
	padding-left: 20px;
	border-left: 1px solid #eef1f5;
}

.us-buybar__price {
	color: #1b2838;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.2px;
	white-space: nowrap;
}

.us-buybar__price .us-price-from {
	color: #6b7280;
	font-size: 13px;
	font-weight: 400;
}

button.us-buybar__cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 40px;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: 10px;
	background: #2fa84f;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease;
}

button.us-buybar__cart:hover {
	background: #268c42;
}

@media (max-width: 575px) {
	.us-buybar__name-size,
	.us-buybar__thumb {
		display: none;
	}

	.us-buybar__buy {
		gap: 10px;
		padding-left: 12px;
	}

	button.us-buybar__cart {
		padding: 0 14px;
	}
}

html[data-theme="dark"] .us-buybar__inner {
	background: #18222e;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

html[data-theme="dark"] .us-buybar__name-head,
html[data-theme="dark"] .us-buybar__price {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-buybar__name-size {
	color: #93a0ae;
}

html[data-theme="dark"] .us-buybar__buy {
	border-left-color: #27333f;
}

/* --- Прокрутка карточки: фотография стоит, данные едут ------ */
/* Колонка с фотографией липнет под второй плашкой шапки — ровно
   когда хлебные крошки уходят под неё. Отпускать её не нужно
   вручную: sticky держит элемент только внутри родителя, а родитель
   кончается там, где начинается плашка «Характеристики / Отзывы»,
   то есть в тот момент, когда она упирается в низ фотографии.
   Отступ 78px — высота прилипшей плашки (66px) и те же 12px зазора,
   что у неё снизу. На узких экранах колонки идут друг под другом,
   и липкость там только мешала бы. */
@media (min-width: 992px) {
	.us-product-top .us-product-left {
		position: sticky;
		top: 78px;
		align-self: flex-start;
	}

}

/* --- ночь: плашки параметров ------------------------------- */
html[data-theme="dark"] a.us-tag {
	border-color: #e4e9ef;
	background: rgba(77, 155, 234, .12);
	color: #e4e9ef;
}

html[data-theme="dark"] a.us-tag:hover {
	border-color: rgba(77, 155, 234, .5);
	color: #4d9bea;
}

html[data-theme="dark"] .us-tag {
	border-color: #27333f;
	background: #1f2b39;
	color: #e4e9ef;
}

html[data-theme="dark"] .us-tag .us-ico,
html[data-theme="dark"] .us-tag__db {
	color: #93a0ae;
}

html[data-theme="dark"] .us-tag__ico {
	background: #93a0ae;
}

/* Сезонные плашки ночью остаются пастельными, но глуше: их цвет —
   единственный признак сезона, и терять его нельзя. */
html[data-theme="dark"] .us-tag--winter {
	border-color: rgba(31, 122, 224, .35);
	background: rgba(31, 122, 224, .14);
}

html[data-theme="dark"] .us-tag--summer {
	border-color: rgba(245, 166, 35, .35);
	background: rgba(245, 166, 35, .14);
}

html[data-theme="dark"] .us-tag--all {
	border-color: rgba(47, 168, 79, .35);
	background: rgba(47, 168, 79, .14);
}

/* --- ночь: окно про этикетку и кнопки ---------------------- */
html[data-theme="dark"] .us-win__box {
	background: #18222e;
}

html[data-theme="dark"] .us-win__title,
html[data-theme="dark"] .us-win__head {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-win__intro,
html[data-theme="dark"] .us-win__item p {
	color: #93a0ae;
}

html[data-theme="dark"] button.us-win__close {
	background: #1f2b39;
}

html[data-theme="dark"] button.us-win__close:before,
html[data-theme="dark"] button.us-win__close:after {
	background: #93a0ae;
}

html[data-theme="dark"] button.us-win__close:hover {
	background: #27333f;
}

html[data-theme="dark"] button.us-info-btn:hover {
	background: #4d9bea;
}

html[data-theme="dark"] button.us-specs__label-title:hover {
	color: #1f7ae0;
}

/* --- Табы под карточкой ------------------------------------ */
/* Панели лежат в разметке друг за другом, скрытую убираем классом:
   в теме у этих блоков своего display нет, двух классов хватает. */
.us-product .us-tab-off {
	display: none;
}

/* Тема рисовала закладки подчёркнутыми ссылками с зелёной полоской
   под активной. Приводим к нашему виду: плашки с тёмной активной,
   как переключатель вида в каталоге и тумблер языков. */
.us-product > .us-product-description-nav {
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px 20px;
}

.us-product-description-nav .us-product-nav-item {
	margin-right: 0;
}

.us-product-description-nav .us-product-nav-item a,
.us-product-description-nav .us-product-nav-item a:hover {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 16px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #f7f8fa;
	color: #5c6673;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.us-product-description-nav .us-product-nav-item a:hover {
	border-color: #cfd6e0;
	color: #1b2838;
}

.us-product-description-nav .us-product-nav-item-active a,
.us-product-description-nav .us-product-nav-item-active a:hover {
	border-color: #1b2838;
	background: #1b2838;
	color: #fff;
	font-size: 14px;
}

/* зелёная полоска под закладкой из темы здесь не нужна */
.us-product-description-nav .us-product-nav-item a:after,
.us-product-description-nav .us-product-nav-item a:hover:after,
.us-product-description-nav .us-product-nav-item-active a:after {
	display: none;
}

html[data-theme="dark"] .us-product-description-nav .us-product-nav-item a,
html[data-theme="dark"] .us-product-description-nav .us-product-nav-item a:hover {
	border-color: #27333f;
	background: #1f2b39;
	color: #93a0ae;
}

html[data-theme="dark"] .us-product-description-nav .us-product-nav-item a:hover {
	color: #e4e9ef;
}

/* ночью тёмная заливка слилась бы с плашкой — активный таб светлый */
html[data-theme="dark"] .us-product-description-nav .us-product-nav-item-active a,
html[data-theme="dark"] .us-product-description-nav .us-product-nav-item-active a:hover {
	border-color: #e4e9ef;
	background: #e4e9ef;
	color: #18222e;
}

/* --- Отзывы ------------------------------------------------ */
/* Тема рисует заголовок с зелёной полоской, кнопку прямоугольником
   и окно с зелёной шапкой. Приводим к виду остальных блоков:
   заголовок как у доставки и характеристик, кнопка — наша синяя
   навигационная, у окна наши скругления. */
.us-product > .us-reviews {
	padding: 20px 30px 24px;
}

.us-reviews .us-reviews-top {
	align-items: center;
	padding: 0;
}

.us-reviews .us-page-main-title {
	margin-bottom: 0;
	color: #1b2838;
	font-size: 19px;
	font-weight: 700;
}

.us-reviews .us-page-main-title:after {
	display: none;
}

.us-reviews #review {
	margin-top: 16px;
	color: #5c6673;
}

.us-reviews .no-product-reviews {
	margin: 0;
	padding: 0;
	color: #5c6673;
	font-size: 14px;
}

/* --- кнопка «Написать отзыв» ------------------------------- */
/* Тег в селекторе обязателен: у темы есть html [type=button] */
.us-reviews button.us-module-btn,
#us-review-modal button.us-module-btn,
#us-callback-modal button.us-module-btn,
#us-one-click-modal button.us-module-btn,
#us-cart-modal button.us-module-btn,
#loginModal button.us-module-btn,
#us-product-gallery button.us-module-btn {
	height: 42px;
	padding: 0 20px;
	border-radius: 10px;
	background-color: #1f7ae0;
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 42px;
	transition: background-color .15s ease;
}

.us-reviews button.us-module-btn:hover,
#us-review-modal button.us-module-btn:hover,
#us-callback-modal button.us-module-btn:hover,
#us-one-click-modal button.us-module-btn:hover,
#us-cart-modal button.us-module-btn:hover,
#loginModal button.us-module-btn:hover,
#us-product-gallery button.us-module-btn:hover {
	background-color: #1765bd;
}

/* --- окно «Написать отзыв» --------------------------------- */
#us-review-modal .modal-content,
#us-callback-modal .modal-content,
#us-one-click-modal .modal-content,
#us-cart-modal .modal-content,
#us-buy .modal-content,
#loginModal .modal-content,
#us-product-gallery .modal-content {
	border: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(16, 32, 56, .3);
}

#us-review-modal .modal-header,
#us-callback-modal .modal-header,
#us-one-click-modal .modal-header,
#us-cart-modal .modal-header,
#us-buy .modal-header,
#loginModal .modal-header,
#us-product-gallery .modal-header {
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid #eef1f5;
	background: #fff;
}

#us-review-modal .modal-title,
#us-callback-modal .modal-title,
#us-one-click-modal .modal-title,
#us-cart-modal .modal-title,
#us-buy .modal-title,
#loginModal .modal-title,
#us-product-gallery .modal-title {
	color: #1b2838;
	font-size: 18px;
	font-weight: 700;
}

#us-info button.us-close,
#us-contacts button.us-close,
#us-review-modal button.us-close,
#us-callback-modal button.us-close,
#us-one-click-modal button.us-close,
#us-cart-modal button.us-close,
#us-buy button.us-close,
#loginModal button.us-close,
#us-product-gallery button.us-close {
	width: 32px;
	height: 32px;
	margin: 0 0 0 auto;
	border-radius: 8px;
	background: #f2f3f5;
}

#us-info button.us-close:hover,
#us-contacts button.us-close:hover,
#us-review-modal button.us-close:hover,
#us-callback-modal button.us-close:hover,
#us-one-click-modal button.us-close:hover,
#us-cart-modal button.us-close:hover,
#us-buy button.us-close:hover,
#loginModal button.us-close:hover,
#us-product-gallery button.us-close:hover {
	background: #e8ebf0;
}

#us-info .us-modal-close-icon,
#us-contacts .us-modal-close-icon,
#us-review-modal .us-modal-close-icon,
#us-callback-modal .us-modal-close-icon,
#us-one-click-modal .us-modal-close-icon,
#us-cart-modal .us-modal-close-icon,
#us-buy .us-modal-close-icon,
#loginModal .us-modal-close-icon,
#us-product-gallery .us-modal-close-icon {
	top: 9px;
	bottom: 9px;
	left: 15px;
	border-color: #5c6673;
}

#us-review-modal .us-modal-body-one-click-left,
#us-callback-modal .us-modal-body-one-click-left,
#us-one-click-modal .us-modal-body-one-click-left,
#us-cart-modal .us-modal-body-one-click-left,
#us-product-gallery .us-modal-body-one-click-left {
	padding: 24px;
	border-right-color: #eef1f5;
}

#us-review-modal .us-modal-body-one-click-right,
#us-callback-modal .us-modal-body-one-click-right,
#us-one-click-modal .us-modal-body-one-click-right,
#us-cart-modal .us-modal-body-one-click-right,
#us-product-gallery .us-modal-body-one-click-right {
	padding: 24px;
}

#us-review-modal .product_title,
#us-callback-modal .product_title,
#us-one-click-modal .product_title,
#us-cart-modal .product_title,
#us-product-gallery .product_title {
	color: #1b2838;
	font-size: 14px;
	font-weight: 600;
}

#us-review-modal .form-control,
#us-callback-modal .form-control,
#us-one-click-modal .form-control,
#us-cart-modal .form-control,
#us-product-gallery .form-control,
#loginModal .form-control {
	height: 44px;
	padding: 10px 14px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	font-weight: 400;
}

#us-review-modal textarea.form-control,
#us-callback-modal textarea.form-control,
#us-one-click-modal textarea.form-control,
#us-cart-modal textarea.form-control,
#us-product-gallery textarea.form-control {
	height: auto;
	min-height: 130px;
}

#us-review-modal .form-control:focus,
#us-callback-modal .form-control:focus,
#us-one-click-modal .form-control:focus,
#us-cart-modal .form-control:focus,
#us-product-gallery .form-control:focus,
#loginModal .form-control:focus {
	border-color: #1f7ae0;
	outline: 2px solid #1f7ae0;
	box-shadow: none;
}

/* примечание — подпись, а не предупреждение: красным оно выглядело
   как ошибка ввода */
#us-review-modal .us-modal-comment,
#us-callback-modal .us-modal-comment,
#us-one-click-modal .us-modal-comment,
#us-cart-modal .us-modal-comment,
#us-product-gallery .us-modal-comment {
	color: #8a8f98;
	font-size: 11px;
}

#us-review-modal .us-modal-comment a,
#us-callback-modal .us-modal-comment a,
#us-one-click-modal .us-modal-comment a,
#us-cart-modal .us-modal-comment a,
#us-product-gallery .us-modal-comment a,
#us-review-modal .us-modal-comment span[style],
#us-callback-modal .us-modal-comment span[style],
#us-one-click-modal .us-modal-comment span[style],
#us-cart-modal .us-modal-comment span[style],
#us-product-gallery .us-modal-comment span[style] {
	color: #5c6673 !important;
}

/* --- ночь: отзывы ------------------------------------------ */
html[data-theme="dark"] .us-reviews .us-page-main-title,
html[data-theme="dark"] #us-review-modal .modal-title,
html[data-theme="dark"] #us-callback-modal .modal-title,
html[data-theme="dark"] #loginModal .modal-title,
html[data-theme="dark"] #us-one-click-modal .modal-title,
html[data-theme="dark"] #us-cart-modal .modal-title,
html[data-theme="dark"] #us-buy .modal-title,
html[data-theme="dark"] #us-product-gallery .modal-title,
html[data-theme="dark"] #us-review-modal .product_title,
html[data-theme="dark"] #us-callback-modal .product_title,
html[data-theme="dark"] #us-one-click-modal .product_title,
html[data-theme="dark"] #us-cart-modal .product_title,
html[data-theme="dark"] #us-product-gallery .product_title {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-reviews #review {
	color: #93a0ae;
}

html[data-theme="dark"] #us-review-modal .modal-content,
html[data-theme="dark"] #us-callback-modal .modal-content,
html[data-theme="dark"] #loginModal .modal-content,
html[data-theme="dark"] #us-one-click-modal .modal-content,
html[data-theme="dark"] #us-cart-modal .modal-content,
html[data-theme="dark"] #us-buy .modal-content,
html[data-theme="dark"] #us-product-gallery .modal-content,
html[data-theme="dark"] #us-review-modal .modal-header,
html[data-theme="dark"] #us-callback-modal .modal-header,
html[data-theme="dark"] #us-one-click-modal .modal-header,
html[data-theme="dark"] #us-cart-modal .modal-header,
html[data-theme="dark"] #us-buy .modal-header,
html[data-theme="dark"] #us-product-gallery .modal-header,
html[data-theme="dark"] #us-review-modal .modal-body,
html[data-theme="dark"] #us-callback-modal .modal-body,
html[data-theme="dark"] #us-one-click-modal .modal-body,
html[data-theme="dark"] #us-cart-modal .modal-body,
html[data-theme="dark"] #us-buy .modal-body,
html[data-theme="dark"] #us-product-gallery .modal-body {
	background: #18222e;
}

html[data-theme="dark"] #us-review-modal .modal-header,
html[data-theme="dark"] #us-callback-modal .modal-header,
html[data-theme="dark"] #us-one-click-modal .modal-header,
html[data-theme="dark"] #us-cart-modal .modal-header,
html[data-theme="dark"] #us-buy .modal-header,
html[data-theme="dark"] #us-product-gallery .modal-header,
html[data-theme="dark"] #us-review-modal .us-modal-body-one-click-left,
html[data-theme="dark"] #us-callback-modal .us-modal-body-one-click-left,
html[data-theme="dark"] #us-one-click-modal .us-modal-body-one-click-left,
html[data-theme="dark"] #us-cart-modal .us-modal-body-one-click-left,
html[data-theme="dark"] #us-product-gallery .us-modal-body-one-click-left {
	border-color: #27333f;
}

html[data-theme="dark"] #us-info button.us-close,
html[data-theme="dark"] #us-contacts button.us-close,
html[data-theme="dark"] #us-review-modal button.us-close,
html[data-theme="dark"] #us-callback-modal button.us-close,
html[data-theme="dark"] #us-one-click-modal button.us-close,
html[data-theme="dark"] #us-cart-modal button.us-close,
html[data-theme="dark"] #us-buy button.us-close,
html[data-theme="dark"] #us-product-gallery button.us-close {
	background: #1f2b39;
}

html[data-theme="dark"] #us-info button.us-close:hover,
html[data-theme="dark"] #us-contacts button.us-close:hover,
html[data-theme="dark"] #us-review-modal button.us-close:hover,
html[data-theme="dark"] #us-callback-modal button.us-close:hover,
html[data-theme="dark"] #us-one-click-modal button.us-close:hover,
html[data-theme="dark"] #us-cart-modal button.us-close:hover,
html[data-theme="dark"] #us-buy button.us-close:hover,
html[data-theme="dark"] #us-product-gallery button.us-close:hover {
	background: #27333f;
}

html[data-theme="dark"] #us-info .us-modal-close-icon,
html[data-theme="dark"] #us-contacts .us-modal-close-icon,
html[data-theme="dark"] #us-review-modal .us-modal-close-icon,
html[data-theme="dark"] #us-callback-modal .us-modal-close-icon,
html[data-theme="dark"] #us-one-click-modal .us-modal-close-icon,
html[data-theme="dark"] #us-cart-modal .us-modal-close-icon,
html[data-theme="dark"] #us-buy .us-modal-close-icon,
html[data-theme="dark"] #us-product-gallery .us-modal-close-icon {
	border-color: #93a0ae;
}

html[data-theme="dark"] #us-review-modal .form-control,
html[data-theme="dark"] #us-callback-modal .form-control,
html[data-theme="dark"] #us-one-click-modal .form-control,
html[data-theme="dark"] #us-cart-modal .form-control,
html[data-theme="dark"] #us-product-gallery .form-control {
	border-color: #27333f;
	background: #1f2b39;
	color: #e4e9ef;
}

/* --- ночь: классы этикетки на снимке ----------------------- */
/* Область под фотографией в превью ночью остаётся светлой, так что
   плашки классов остаются такими же, как днём. */
html[data-theme="dark"] .us-card__eu-item {
	border-color: #dfe4ea;
	background: rgba(255, 255, 255, .94);
}

/* --- Сортировка и число товаров на странице ----------------- */
/* У темы это светло-серые поля со скруглением 2px и своей серой
   стрелкой. Приводим к нашим спискам: белое поле, рамка, радиус
   10px, та же стрелка, что в плашке подбора, и тёмный текст —
   выбранное значение читается, а не угадывается.
   Тег в селекторе нужен: правило темы — .sort-limit select. */
.sort-limit select,
.us-category-sort-block .sort-limit select {
	height: 36px;
	padding: 0 34px 0 12px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231b2838' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
	color: #1b2838;
	font-size: 13px;
	font-weight: 600;
}

.us-category-sort-block .sort-select {
	margin-right: 8px;
	/* у темы позиция стрелки задана в процентах с !important —
	   на широком поле она уезжала к середине */
	background-position-x: calc(100% - 12px) !important;
}

.us-category-sort-block .sort-limit select:hover {
	border-color: #cfd6e0;
}

.us-category-sort-block .sort-limit select:focus {
	border-color: #1b2838;
	outline: none;
}

/* линия под рядом — наша волосяная, а не почти белая */
.us-category-sort-block {
	padding-bottom: 14px;
	border-bottom: 1px solid #eef1f5;
}

html[data-theme="dark"] .sort-limit select,
html[data-theme="dark"] .us-category-sort-block .sort-limit select {
	border-color: #27333f;
	background: #1f2b39 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23e4e9ef' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
	color: #e4e9ef;
}

html[data-theme="dark"] .us-category-sort-block .sort-limit select:hover {
	border-color: #35445a;
}

html[data-theme="dark"] .us-category-sort-block .sort-limit select:focus {
	border-color: #e4e9ef;
}

html[data-theme="dark"] .us-category-sort-block {
	border-bottom-color: #27333f;
}

/* --- Сравнение товаров ------------------------------------- */
/* Таблица темы была без скруглений, с бледными подписями и
   кнопками-прямоугольниками. Строки раскрашены через одну — так же,
   как характеристики в карточке товара: глазом проще вести строку
   от названия к значению. Отличия подсвечены голубым: в таблице
   из десятка строк важно, где шины расходятся. */
.us-content-compare,
.us-compare {
	padding: 20px 24px 18px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

/* таблица шире экрана прокручивается внутри блока, а не тянет страницу */
.us-compare__scroll {
	padding-bottom: 10px;
	overflow-x: auto;
}

.us-compare__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.us-compare__row > th,
.us-compare__row > td {
	padding: 10px 14px;
	border: 0;
	color: #1b2838;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	vertical-align: middle;
}

.us-compare__row > .us-compare__head {
	min-width: 150px;
	color: #5c6673;
	font-size: 13px;
	font-weight: 400;
	text-align: left;
}

/* Подсветка через строку; крайние ячейки скруглены, чтобы полоса
   не упиралась в края блока. Класс вешает скрипт по видимым строкам:
   nth-child считал бы и скрытые, и в режиме отличий рядом вставали
   бы две полосы одного цвета. */
.us-compare__row.is-odd > th,
.us-compare__row.is-odd > td {
	background: #f7f8fa;
}

.us-compare__row > th:first-child {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

.us-compare__row > td:last-child {
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

/* --- переключатель набора строк ---------------------------- */
/* Подкраска отличий пестрила: в таблице расходится почти каждая
   строка. Вместо неё выбор набора — все характеристики или только
   те, которыми шины отличаются. Вид как у переключателя языков:
   тонкая рамка, заливка только у выбранного. */
.us-compare__modes {
	display: inline-flex;
	gap: 2px;
	margin-bottom: 16px;
	padding: 3px;
	border: 1px solid #e3e8ee;
	border-radius: 12px;
}

button.us-compare__mode {
	height: 32px;
	margin: 0;
	padding: 0 14px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: #5c6673;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

button.us-compare__mode:hover {
	color: #1b2838;
}

button.us-compare__mode.is-active,
button.us-compare__mode.is-active:hover {
	background: #1b2838;
	color: #fff;
}

/* в режиме отличий прячем строки характеристик, одинаковые у всех;
   название, фото, цена и кнопки остаются на месте */
.us-compare__table.is-only-diff .us-compare__row--attr:not(.is-diff) {
	display: none;
}

/* --- содержимое ячеек -------------------------------------- */
.us-compare__name {
	color: #1b2838;
	font-size: 14px;
	font-weight: 700;
}

.us-compare__name:hover {
	color: #1f7ae0;
	text-decoration: none;
}

.us-compare__photo img {
	max-width: 120px;
	height: auto;
}

.us-compare__price {
	color: #1b2838;
	font-size: 17px;
	font-weight: 800;
	white-space: nowrap;
}

.us-compare__price-old {
	margin-right: 6px;
	color: #8a8f98;
	font-size: 13px;
	font-weight: 400;
	text-decoration: line-through;
}

.us-compare__val {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.us-compare__val .us-ico {
	color: #5c6673;
}

.us-compare__ico-img {
	width: 18px;
	height: 18px;
}

.us-compare__none {
	color: #b6bcc5;
	font-weight: 400;
}

/* --- звёзды ------------------------------------------------ */
.us-compare__stars {
	display: inline-flex;
	gap: 2px;
}

.us-compare__star {
	width: 13px;
	height: 13px;
	background: #d7dce3;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.6 7 .9-5 4.9 1.2 7L12 18l-6.2 3.4L7 14.4 2 9.5l7-.9z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.6 7 .9-5 4.9 1.2 7L12 18l-6.2 3.4L7 14.4 2 9.5l7-.9z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.us-compare__star.is-on {
	background: #f5a623;
}

/* --- кнопки ------------------------------------------------ */
/* Столбиком и одного размера: по месту в ячейке они вставали то
   в строку, то друг под другом, и ряд выглядел неряшливо. */
.us-compare__row--btn > td {
	padding-top: 16px;
}

.us-compare__btns {
	display: inline-flex;
	flex-direction: column;
	gap: 8px;
}

.us-compare__btns > * {
	width: 150px;
	height: 40px;
	margin: 0;
}

button.us-compare__buy,
a.us-compare__buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 20px;
	border: 0;
	border-radius: 10px;
	background: #2fa84f;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease;
}

button.us-compare__buy:hover,
a.us-compare__buy:hover {
	background: #268c42;
	color: #fff;
	text-decoration: none;
}

/* «Удалить» — действие служебное: та же форма, но без заливки,
   красным только на наведении */
.us-compare__del {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	color: #5c6673;
	font-size: 13px;
	font-weight: 600;
	transition: border-color .15s ease, color .15s ease;
}

.us-compare__del:hover {
	border-color: #e01b1b;
	color: #e01b1b;
	text-decoration: none;
}

.us-compare__empty {
	margin: 0 0 16px;
	color: #5c6673;
}

@media (max-width: 767px) {
	.us-compare {
		padding: 16px;
	}

	.us-compare__head {
		min-width: 120px;
	}
}

/* --- ночь: сравнение --------------------------------------- */
html[data-theme="dark"] .us-content-compare,
html[data-theme="dark"] .us-compare {
	background: #18222e;
}

html[data-theme="dark"] .us-compare__row > th,
html[data-theme="dark"] .us-compare__row > td,
html[data-theme="dark"] .us-compare__name,
html[data-theme="dark"] .us-compare__price {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-compare__row > .us-compare__head {
	color: #93a0ae;
}

html[data-theme="dark"] .us-compare__row.is-odd > th,
html[data-theme="dark"] .us-compare__row.is-odd > td {
	background: #1f2b39;
}

html[data-theme="dark"] .us-compare__val .us-ico {
	color: #93a0ae;
}

html[data-theme="dark"] .us-compare__del {
	border-color: #27333f;
	color: #93a0ae;
}

html[data-theme="dark"] .us-compare__star {
	background: #35445a;
}

/* --- ночь: переключатель набора строк ---------------------- */
html[data-theme="dark"] .us-compare__modes {
	border-color: #27333f;
}

html[data-theme="dark"] button.us-compare__mode {
	color: #93a0ae;
}

html[data-theme="dark"] button.us-compare__mode:hover {
	color: #e4e9ef;
}

/* ночью тёмная заливка слилась бы с плашкой — выбранный светлый */
html[data-theme="dark"] button.us-compare__mode.is-active,
html[data-theme="dark"] button.us-compare__mode.is-active:hover {
	background: #e4e9ef;
	color: #18222e;
}

/* --- Похожие по параметрам --------------------------------- */
/* Полоса карточек с горизонтальной прокруткой. Под каждой карточкой
   один и тот же набор строк, поэтому подписи и значения совпадают
   по высоте и сравниваются взглядом по горизонтали. Переключатель
   прячет строки, одинаковые у всех. */
.us-product > .us-sim,
.us-sim {
	margin-bottom: 16px;
	padding: 20px 24px 22px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.us-sim__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.us-sim__head {
	margin-bottom: 0;
}

.us-terms__ico--sim {
	-webkit-mask-image: url("../img/ico-similar.svg");
	mask-image: url("../img/ico-similar.svg");
}

.us-sim__tools {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

button.us-sim__mode {
	height: 34px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff;
	color: #5c6673;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

button.us-sim__mode:hover {
	border-color: #cfd6e0;
	color: #1b2838;
}

button.us-sim__mode.is-active {
	border-color: #1b2838;
	background: #1b2838;
	color: #fff;
}

button.us-sim__arrow,
button.us-scroll-arrow {
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

button.us-sim__arrow:hover,
button.us-scroll-arrow:hover {
	border-color: #1b2838;
}

button.us-sim__arrow:before,
button.us-scroll-arrow:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: #1b2838;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center / 14px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center / 14px;
}

button.us-sim__arrow--prev:before,
button.us-scroll-arrow--prev:before {
	transform: scaleX(-1);
}

/* --- полоса карточек --------------------------------------- */
.us-sim__scroll {
	display: flex;
	gap: 14px;
	/* зазор до полосы прокрутки: без него она липнет к карточкам */
	padding-bottom: 10px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.us-sim__card {
	flex: 0 0 220px;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-bottom: 2px;
}

.us-sim__photo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150px;
	border: 1px solid #eef1f5;
	border-radius: 12px;
	background: #fff;
}

.us-sim__photo img {
	max-width: 80%;
	max-height: 130px;
}

.us-sim__name {
	display: block;
	margin-top: 10px;
	color: #1b2838;
}

.us-sim__name:hover {
	color: #1f7ae0;
	text-decoration: none;
}

.us-sim__name-head {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
}

.us-sim__name-size {
	display: block;
	color: #5c6673;
	font-size: 12px;
}

.us-sim__line {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 22px;
	margin-top: 8px;
}

.us-sim__line .us-ico {
	color: #5c6673;
}

.us-sim__season {
	width: 18px;
	height: 18px;
}

.us-sim__buy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 8px;
}

.us-sim__price {
	color: #1b2838;
	font-size: 17px;
	font-weight: 800;
	white-space: nowrap;
}

.us-sim__from {
	color: #6b7280;
	font-size: 12px;
	font-weight: 400;
}

a.us-sim__cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 34px;
	flex: 0 0 auto;
	border-radius: 10px;
	background: #2fa84f;
	transition: background .15s ease;
}

a.us-sim__cart:hover {
	background: #268c42;
}

.us-sim__cart .us-card__cart-ico {
	background: #fff;
}

/* --- строки параметров ------------------------------------- */
.us-sim__rows {
	margin-top: 12px;
}

.us-sim__row {
	padding: 7px 10px;
	border-radius: 8px;
}

.us-sim__row:nth-child(odd) {
	background: #f7f8fa;
}

.us-sim__row-name {
	display: block;
	color: #8a8f98;
	font-size: 11px;
	line-height: 1.3;
}

.us-sim__row-val {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 2px;
	color: #1b2838;
	font-size: 13px;
	font-weight: 600;
}

.us-sim__row-val .us-tag__ico {
	width: 15px;
	height: 15px;
}

.us-sim__db {
	color: #5c6673;
	font-weight: 400;
}

.us-sim__none {
	color: #b6bcc5;
	font-weight: 400;
}

/* в режиме отличий прячем строки, одинаковые у всех карточек */
.us-sim__scroll.is-only-diff .us-sim__row:not(.is-diff) {
	display: none;
}

@media (max-width: 575px) {
	.us-sim {
		padding: 16px;
	}

	.us-sim__top {
		flex-direction: column;
	}

	.us-sim__card {
		flex-basis: 200px;
	}
}

/* --- ночь: похожие ----------------------------------------- */
html[data-theme="dark"] .us-sim {
	background: #18222e;
}

html[data-theme="dark"] .us-sim__name,
html[data-theme="dark"] .us-sim__price,
html[data-theme="dark"] .us-sim__row-val {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-sim__name-size,
html[data-theme="dark"] .us-sim__db,
html[data-theme="dark"] .us-sim__line .us-ico {
	color: #93a0ae;
}

html[data-theme="dark"] .us-sim__row:nth-child(odd) {
	background: #1f2b39;
}

html[data-theme="dark"] button.us-sim__mode,
html[data-theme="dark"] button.us-sim__arrow,
html[data-theme="dark"] button.us-scroll-arrow {
	border-color: #27333f;
	background: #1f2b39;
	color: #93a0ae;
}

html[data-theme="dark"] button.us-sim__arrow:before,
html[data-theme="dark"] button.us-scroll-arrow:before {
	background: #e4e9ef;
}

html[data-theme="dark"] button.us-sim__mode.is-active {
	border-color: #e4e9ef;
	background: #e4e9ef;
	color: #18222e;
}

/* --- Куда ещё посмотреть ----------------------------------- */
/* Одна плашка на два дела: слева переходы к соседним выборкам,
   справа предложение помочь с выбором. Делит их волосяная линия —
   тот же приём, что в плашке подбора по автомобилю. */
.us-more {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	margin-bottom: 16px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.us-more__links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	align-content: start;
	padding: 22px 24px;
}

.us-more__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	color: #1b2838;
	transition: border-color .15s ease, background .15s ease;
}

.us-more__link:hover {
	border-color: #1b2838;
	background: #f7f8fa;
	text-decoration: none;
}

.us-more__link-text {
	min-width: 0;
}

.us-more__link-label {
	display: block;
	color: #5c6673;
	font-size: 12px;
	line-height: 1.3;
}

.us-more__link-value {
	display: block;
	color: #1f7ae0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.us-more__link .us-tag__arrow {
	color: #1f7ae0;
}

/* --- помощь с выбором -------------------------------------- */
.us-more__help {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	/* текст слева, переходы справа: зона помощи идёт первой колонкой,
	   хотя в разметке стоит второй — на узких экранах порядок
	   разметки и нужен, там сверху должны быть переходы */
	order: -1;
	padding: 22px 24px;
	border-right: 1px solid #eef1f5;
	border-radius: 14px 0 0 14px;
	background: #f7f8fa;
	overflow: hidden;
}

.us-more__help-body {
	flex: 1 1 auto;
	min-width: 0;
}

.us-more__help-title {
	margin-bottom: 6px;
	color: #1b2838;
	font-size: 18px;
	font-weight: 700;
}

.us-more__help-text {
	margin: 0 0 16px;
	max-width: 42ch;
	color: #5c6673;
	font-size: 13px;
	line-height: 1.5;
}

button.us-more__help-btn {
	height: 42px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: 10px;
	background: #2fa84f;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease;
}

button.us-more__help-btn:hover {
	background: #268c42;
}

/* Картинка стоит внутри плашки с её отступами: прозрачные шины
   упирались в края, особенно сверху. По вертикали по центру —
   так зазоры сверху и снизу одинаковые. */
.us-more__help-img {
	flex: 0 0 auto;
	order: -1;
	width: 38%;
	max-width: 200px;
	height: auto;
	margin: 0;
}

@media (max-width: 991px) {
	.us-more {
		grid-template-columns: minmax(0, 1fr);
	}

	.us-more__help {
		order: 0;
		border-right: 0;
		border-top: 1px solid #eef1f5;
		border-radius: 0 0 14px 14px;
	}
}

@media (max-width: 575px) {
	.us-more__links {
		grid-template-columns: minmax(0, 1fr);
		padding: 16px;
	}

	.us-more__help {
		flex-direction: column;
		align-items: flex-start;
		padding: 16px;
	}

	.us-more__help-img {
		width: 70%;
		align-self: center;
	}
}

/* --- ночь: куда ещё посмотреть ----------------------------- */
html[data-theme="dark"] .us-more {
	background: #18222e;
}

html[data-theme="dark"] .us-more__link {
	border-color: #27333f;
	color: #e4e9ef;
}

html[data-theme="dark"] .us-more__link:hover {
	border-color: #e4e9ef;
	background: #1f2b39;
}

html[data-theme="dark"] .us-more__link-label,
html[data-theme="dark"] .us-more__help-text {
	color: #93a0ae;
}

html[data-theme="dark"] .us-more__link-value,
html[data-theme="dark"] .us-more__link .us-tag__arrow {
	color: #4d9bea;
}

html[data-theme="dark"] .us-more__help {
	border-color: #27333f;
	background: #1f2b39;
}

html[data-theme="dark"] .us-more__help-title {
	color: #e4e9ef;
}


/* --- Все модели бренда и популярные бренды ----------------- */
/* Две плашки одного покроя: шапка как у остальных блоков, внутри
   ссылки. Модели — плашками (их много и имена разной длины),
   бренды — столбцами с волосяными линиями: так список из трёх
   десятков читается сверху вниз, а не ищется глазами. */
.us-chips-block {
	margin-bottom: 16px;
	padding: 20px 24px 22px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.us-terms__ico--models {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='6' rx='2'/%3E%3Crect x='3' y='14' width='18' height='6' rx='2'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='6' rx='2'/%3E%3Crect x='3' y='14' width='18' height='6' rx='2'/%3E%3C/g%3E%3C/svg%3E");
}

.us-home__ico--sizes,
.us-terms__ico--brands {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.6 6.1.8-4.4 4.3 1.1 6.1L12 17l-5.4 2.8 1.1-6.1L3.3 9.4l6.1-.8z'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.6 6.1.8-4.4 4.3 1.1 6.1L12 17l-5.4 2.8 1.1-6.1L3.3 9.4l6.1-.8z'/%3E%3C/g%3E%3C/svg%3E");
}

.us-terms__ico--eye {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- полосы, которые тянут мышью --------------------------- */
/* Класс вешает us-drag.js: без него курсор обещал бы перетаскивание
   и на тач-устройствах, где его нет. */
.us-dragscroll {
	cursor: grab;
}

.us-dragscroll.is-dragging {
	cursor: grabbing;
	user-select: none;
}

/* --- просмотренные товары ---------------------------------- */
/* Полоса с прокруткой, как у похожих шин: просмотренных бывает
   два десятка, сеткой они заняли бы пол-страницы. */
.us-viewed {
	padding: 20px 24px 22px;
}

.us-viewed__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.us-viewed__head {
	margin-bottom: 0;
}

.us-viewed__tools {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}

.us-viewed__scroll {
	display: flex;
	gap: 14px;
	padding-bottom: 10px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.us-viewed__cell {
	flex: 0 0 230px;
	display: flex;
	min-width: 0;
}

/* в полосе карточке не нужен ни отступ на ряд сетки, ни высота строки */
.us-viewed__cell .us-card {
	width: 100%;
	height: auto;
	margin-bottom: 0;
}

.us-viewed .us-module-button {
	display: none;
}

@media (max-width: 575px) {
	.us-viewed {
		padding: 16px;
	}

	.us-viewed__cell {
		flex-basis: 200px;
	}
}

/* --- плашки моделей ---------------------------------------- */
.us-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.us-chip {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #f7f8fa;
	color: #1b2838;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	transition: border-color .15s ease, color .15s ease;
}

.us-chip:hover {
	border-color: #1b2838;
	color: #1f7ae0;
	text-decoration: none;
}

.us-chip--hidden {
	display: none;
}

.us-chips.is-open .us-chip--hidden {
	display: inline-flex;
}

button.us-chips__more {
	margin: 14px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: #1f7ae0;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

button.us-chips__more:hover {
	text-decoration: underline;
}

/* --- плитки брендов ---------------------------------------- */
/* Не колонки ссылок с подчёркиванием, а наши плитки: рамка, радиус,
   имя по центру. От плашек моделей отличаются тем, что выложены
   сеткой равной ширины — бренды короткие и выстраиваются ровно,
   а названия моделей все разной длины и идут строкой. */
.us-brands {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 8px;
}

.us-brands__link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 10px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	color: #1b2838;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.us-brands__link:hover {
	border-color: #1b2838;
	background: #f7f8fa;
	color: #1f7ae0;
	text-decoration: none;
}

@media (max-width: 767px) {
	.us-chips-block {
		padding: 16px;
	}

	.us-brands {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	}
}

/* --- ночь: модели и бренды --------------------------------- */
html[data-theme="dark"] .us-chips-block {
	background: #18222e;
}

html[data-theme="dark"] .us-chip {
	border-color: #27333f;
	background: #1f2b39;
	color: #e4e9ef;
}

html[data-theme="dark"] .us-chip:hover {
	border-color: #e4e9ef;
	color: #4d9bea;
}

html[data-theme="dark"] .us-brands__link {
	border-color: #27333f;
	color: #e4e9ef;
}

html[data-theme="dark"] .us-brands__link:hover {
	border-color: #e4e9ef;
	background: #1f2b39;
	color: #4d9bea;
}

html[data-theme="dark"] button.us-chips__more {
	color: #4d9bea;
}

/* --- окно быстрого заказа: свои строки --------------------- */
/* Фотография вдвое меньше: в окне важнее поля заказа, а шину
   покупатель только что видел на странице. */
#us-one-click-modal .us-modal-body-img {
	max-width: 130px;
	max-height: 140px;
	margin-bottom: 14px;
}

#us-one-click-modal .product_title,
#us-cart-modal .product_title,
#us-product-gallery .product_title {
	color: #1b2838;
	font-size: 14px;
	font-weight: 600;
}

/* ярлыки без подписей: сезон, транспорт, шип */
.us-one-click-marks {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 8px;
	color: #5c6673;
}

.us-one-click-mark {
	width: 18px;
	height: 18px;
}

html[data-theme="dark"] .us-one-click-marks {
	color: #93a0ae;
}

/* Количество и цена идут подписью слева и значением справа —
   у темы подписи были крупные и серые, цена мелкой. */
#us-one-click-modal .us-product-quantity,
#us-cart-modal .us-product-quantity,
#us-product-gallery .us-product-quantity,
#us-one-click-modal .us-price-block,
#us-cart-modal .us-price-block,
#us-product-gallery .us-price-block {
	gap: 10px;
	margin-top: 14px;
}

#us-one-click-modal .control-label,
#us-cart-modal .control-label,
#us-product-gallery .control-label {
	margin: 0;
	color: #5c6673;
	font-size: 13px;
}

#us-one-click-modal .us-module-price-actual,
#us-cart-modal .us-module-price-actual,
#us-product-gallery .us-module-price-actual,
#us-one-click-modal .us-module-price-new,
#us-cart-modal .us-module-price-new,
#us-product-gallery .us-module-price-new {
	color: #1b2838;
	font-size: 20px;
	font-weight: 800;
}

#us-one-click-modal .us-module-price-old,
#us-cart-modal .us-module-price-old,
#us-product-gallery .us-module-price-old {
	margin-right: 8px;
	color: #8a8f98;
	font-size: 13px;
	text-decoration: line-through;
}

/* поле количества — наш радиус и рамка, кнопки по краям */
#us-one-click-modal .us-product-quantity .btn-group,
#us-cart-modal .us-product-quantity .btn-group,
#us-product-gallery .us-product-quantity .btn-group {
	overflow: hidden;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
}

#us-one-click-modal .us-product-quantity .form-control,
#us-cart-modal .us-product-quantity .form-control,
#us-product-gallery .us-product-quantity .form-control {
	width: 54px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 0;
	text-align: center;
}

#us-one-click-modal button.us-product-quantity-btn,
#us-cart-modal button.us-product-quantity-btn,
#us-product-gallery button.us-product-quantity-btn {
	width: 34px;
	height: 38px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: #f7f8fa;
	color: #1b2838;
	font-size: 16px;
}

#us-one-click-modal button.us-product-quantity-btn:hover,
#us-cart-modal button.us-product-quantity-btn:hover,
#us-product-gallery button.us-product-quantity-btn:hover {
	background: #eef1f5;
}

html[data-theme="dark"] #us-one-click-modal .control-label,
html[data-theme="dark"] #us-cart-modal .control-label,
html[data-theme="dark"] #us-product-gallery .control-label {
	color: #93a0ae;
}

html[data-theme="dark"] #us-one-click-modal .us-module-price-actual,
html[data-theme="dark"] #us-cart-modal .us-module-price-actual,
html[data-theme="dark"] #us-product-gallery .us-module-price-actual,
html[data-theme="dark"] #us-one-click-modal .us-module-price-new,
html[data-theme="dark"] #us-cart-modal .us-module-price-new,
html[data-theme="dark"] #us-product-gallery .us-module-price-new {
	color: #e4e9ef;
}

html[data-theme="dark"] #us-one-click-modal .us-product-quantity .btn-group,
html[data-theme="dark"] #us-cart-modal .us-product-quantity .btn-group,
html[data-theme="dark"] #us-product-gallery .us-product-quantity .btn-group {
	border-color: #27333f;
}

html[data-theme="dark"] #us-one-click-modal button.us-product-quantity-btn,
html[data-theme="dark"] #us-cart-modal button.us-product-quantity-btn,
html[data-theme="dark"] #us-product-gallery button.us-product-quantity-btn {
	background: #1f2b39;
	color: #e4e9ef;
}

/* --- Окно корзины ------------------------------------------ */
/* Вытянуто по горизонтали: слева список товаров, справа итоги
   и действия. Раньше сумма стояла сверху по центру, а кнопка
   оформления — в самом низу, под списком. */
#us-cart-modal .modal-dialog,
#us-product-gallery .modal-dialog {
	max-width: 940px;
}

#us-cart-modal .modal-body,
#us-buy .modal-body,
#us-product-gallery .modal-body {
	padding: 20px;
}

.us-cart {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: 20px;
	align-items: start;
}

.us-cart__warning {
	margin-bottom: 14px;
	padding: 10px 14px;
	border-radius: 10px;
	background: #fdf0ef;
	color: #b3261e;
	font-size: 13px;
}

/* --- строки товаров ---------------------------------------- */
.us-cart__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 420px;
	overflow-y: auto;
}

#us-cart-modal .us-cart-item {
	gap: 14px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid #e3e8ee;
	border-radius: 12px;
	background: #fff;
}

#us-cart-modal .us-cart-item-left {
	gap: 14px;
	flex: 1 1 auto;
	min-width: 0;
}

#us-cart-modal .us-cart-item-img {
	width: 64px;
	height: 64px;
	flex: 0 0 auto;
	border-radius: 8px;
	object-fit: contain;
}

/* название, количество и сумма — в одну строку: окно широкое,
   и колонкой они растягивали плашку по высоте */
#us-cart-modal .us-cart-item-desc {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex: 1 1 auto;
	min-width: 0;
}

#us-cart-modal .us-cart-item-desc > .mb-3 {
	margin: 0 !important;
	flex: 1 1 auto;
	min-width: 0;
}

#us-cart-modal .us-cart-item-link {
	color: #1b2838;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

#us-cart-modal .us-cart-item-link:hover {
	color: #1f7ae0;
	text-decoration: none;
}

#us-cart-modal .us-cart-price-all,
#us-product-gallery .us-cart-price-all {
	flex: 0 0 auto;
	color: #1b2838;
	font-size: 16px;
	font-weight: 800;
	white-space: nowrap;
}

#us-cart-modal .us-cart-del,
#us-product-gallery .us-cart-del {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border-radius: 10px;
	color: #8a8f98;
	font-size: 14px;
	transition: background .15s ease, color .15s ease;
}

#us-cart-modal .us-cart-del:hover,
#us-product-gallery .us-cart-del:hover {
	background: #fdf0ef;
	color: #e01b1b;
}

/* --- итоги и действия -------------------------------------- */
.us-cart__sum {
	padding: 16px;
	border-radius: 12px;
	background: #f7f8fa;
}

.us-cart__sum-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	color: #5c6673;
	font-size: 13px;
}

.us-cart__sum-row.is-last {
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid #e3e8ee;
	color: #1b2838;
}

.us-cart__sum-row.is-last .us-cart__sum-name {
	font-size: 15px;
	font-weight: 700;
}

.us-cart__sum-val {
	color: #1b2838;
	font-weight: 700;
	white-space: nowrap;
}

.us-cart__sum-row.is-last .us-cart__sum-val {
	font-size: 20px;
	font-weight: 800;
}

a.us-cart__checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	margin-top: 14px;
	border-radius: 10px;
	background: #2fa84f;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	transition: background .15s ease;
}

a.us-cart__checkout:hover {
	background: #268c42;
	color: #fff;
	text-decoration: none;
}

a.us-cart__link {
	display: block;
	margin-top: 10px;
	color: #1f7ae0;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

@media (max-width: 767px) {
	.us-cart {
		grid-template-columns: minmax(0, 1fr);
	}

	#us-cart-modal .us-cart-item-desc {
		flex-wrap: wrap;
		gap: 8px;
	}
}

/* --- ночь: окно корзины ------------------------------------ */
html[data-theme="dark"] #us-cart-modal .us-cart-item {
	border-color: #27333f;
	background: #18222e;
}

html[data-theme="dark"] #us-cart-modal .us-cart-item-link,
html[data-theme="dark"] #us-cart-modal .us-cart-price-all,
html[data-theme="dark"] #us-product-gallery .us-cart-price-all,
html[data-theme="dark"] .us-cart__sum-val {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-cart__sum {
	background: #1f2b39;
}

html[data-theme="dark"] .us-cart__sum-row {
	color: #93a0ae;
}

html[data-theme="dark"] .us-cart__sum-row.is-last {
	border-top-color: #27333f;
	color: #e4e9ef;
}

/* Фраза «в корзине N товаров на сумму X» — над чертой итогов,
   цифры в ней тема оборачивает в <span>. */
.us-cart__sum-items {
	margin-bottom: 4px;
	color: #5c6673;
	font-size: 13px;
	line-height: 1.45;
}

.us-cart__sum-items p {
	margin: 0;
}

.us-cart__sum-items span {
	color: #1b2838;
	font-weight: 700;
	white-space: nowrap;
}

/* Ярлыки сезона, транспорта и шипов в строке товара — без подписей:
   значения те же, что у родительского товара. */
.us-cart-item-marks {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	color: #5c6673;
	font-size: 15px;
}

.us-cart-item-mark {
	width: 18px;
	height: 18px;
}

html[data-theme="dark"] .us-cart__sum-items {
	color: #93a0ae;
}

html[data-theme="dark"] .us-cart__sum-items span {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-cart-item-marks {
	color: #93a0ae;
}

/* --- Полоса прокрутки -------------------------------------- */
/* Браузерная по умолчанию широкая и серая. Делаем одинаковой
   везде, где мы прокручиваем содержимое сами. */
.us-sim__scroll,
.us-viewed__scroll,
.us-compare__scroll,
.us-cart__list {
	scrollbar-width: thin;
	scrollbar-color: #c7ced7 transparent;
}

.us-sim__scroll::-webkit-scrollbar,
.us-viewed__scroll::-webkit-scrollbar,
.us-compare__scroll::-webkit-scrollbar,
.us-cart__list::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.us-sim__scroll::-webkit-scrollbar-track,
.us-viewed__scroll::-webkit-scrollbar-track,
.us-compare__scroll::-webkit-scrollbar-track,
.us-cart__list::-webkit-scrollbar-track {
	background: transparent;
}

.us-sim__scroll::-webkit-scrollbar-thumb,
.us-viewed__scroll::-webkit-scrollbar-thumb,
.us-compare__scroll::-webkit-scrollbar-thumb,
.us-cart__list::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background: #c7ced7;
}

.us-sim__scroll::-webkit-scrollbar-thumb:hover,
.us-viewed__scroll::-webkit-scrollbar-thumb:hover,
.us-compare__scroll::-webkit-scrollbar-thumb:hover,
.us-cart__list::-webkit-scrollbar-thumb:hover {
	background: #a9b3c0;
}

/* зазор до полосы: иначе она липнет к плашкам товаров */
.us-cart__list {
	padding-right: 10px;
}

html[data-theme="dark"] .us-sim__scroll,
html[data-theme="dark"] .us-viewed__scroll,
html[data-theme="dark"] .us-compare__scroll,
html[data-theme="dark"] .us-cart__list {
	scrollbar-color: #3a4a5c transparent;
}

html[data-theme="dark"] .us-sim__scroll::-webkit-scrollbar-thumb,
html[data-theme="dark"] .us-viewed__scroll::-webkit-scrollbar-thumb,
html[data-theme="dark"] .us-compare__scroll::-webkit-scrollbar-thumb,
html[data-theme="dark"] .us-cart__list::-webkit-scrollbar-thumb {
	background: #3a4a5c;
}

html[data-theme="dark"] .us-sim__scroll::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .us-viewed__scroll::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .us-compare__scroll::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .us-cart__list::-webkit-scrollbar-thumb:hover {
	background: #4a5c70;
}

/* --- Уголок с сообщением ------------------------------------ */
/* Тема рисовала цветную плашку во всю высоту с мелким серым
   текстом. Приводим к остальным нашим окнам: белая карточка,
   рамка, мягкая тень, цвет остаётся только на значке. */
.us-alert {
	width: 340px;
	margin-bottom: 12px;
	border: 1px solid #e3e8ee;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 28px rgba(27, 40, 56, .16);
}

.us-alert-success,
.us-alert-danger,
.us-alert-warning,
.us-alert-primary {
	background: #fff;
}

/* по верхнему краю, а не по центру: текст бывает в две строки */
.us-alert .us-alert-content {
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
}

.us-alert .us-alert-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	border-radius: 10px;
	background: #1f7ae0;
}

.us-alert-success .us-alert-icon {
	background: #2fa84f;
}

.us-alert-danger .us-alert-icon,
.us-alert-warning .us-alert-icon {
	background: #e01b1b;
}

.us-alert .us-alert-icon i {
	width: auto;
	font-size: 15px;
	color: #fff;
}

.us-alert .us-alert-text {
	min-width: 0;
	padding: 0;
	background: none;
	color: #1b2838;
	font-size: 14px;
	line-height: 1.45;
}

.us-alert .us-alert-text a {
	color: #1f7ae0;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.us-alert .us-alert-text a:hover {
	text-decoration: underline;
}

/* первая ссылка — название товара: синей делаем только ту, по которой
   и правда хочется перейти («в корзину покупок») */
.us-alert .us-alert-text a:first-child {
	color: #1b2838;
	font-weight: 700;
}

.us-alert .us-alert-text a:first-child:hover {
	color: #1f7ae0;
}

html[data-theme="dark"] .us-alert .us-alert-text a:first-child {
	color: #e4e9ef;
}

.us-alert .us-alert-text-item:not(:last-child) {
	margin-bottom: 6px;
}

html[data-theme="dark"] .us-alert,
html[data-theme="dark"] .us-alert-success,
html[data-theme="dark"] .us-alert-danger,
html[data-theme="dark"] .us-alert-warning,
html[data-theme="dark"] .us-alert-primary {
	border-color: #27333f;
	background: #18222e;
}

html[data-theme="dark"] .us-alert .us-alert-text {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-alert .us-alert-text a {
	color: #5fa8f0;
}

/* --- Строки товаров: закладки и корзина --------------------- */
/* Один вид на обе страницы: снимок, название в две строки,
   ярлыки, справа цена и действие, удаление — значком. */
.us-lines {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.us-line {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 18px;
	border: 1px solid #e3e8ee;
	border-radius: 12px;
	background: #fff;
}

.us-line__photo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	flex: 0 0 auto;
}

.us-line__photo img {
	max-width: 100%;
	max-height: 100%;
	/* снимки поставщика с белой подложкой — убираем её */
	mix-blend-mode: multiply;
}

.us-line__body {
	flex: 1 1 auto;
	min-width: 0;
}

a.us-line__title,
.us-line__title {
	display: block;
	color: #1b2838;
	font-size: 15px;
	line-height: 1.35;
}

a.us-line__title:hover {
	color: #1f7ae0;
	text-decoration: none;
}

.us-line__name {
	font-weight: 700;
}

.us-line__size {
	color: #5c6673;
	font-weight: 400;
}

a.us-line__title:hover .us-line__size {
	color: #1f7ae0;
}

.us-line__note {
	margin-top: 6px;
	color: #5c6673;
	font-size: 13px;
}

.us-line__note span {
	color: #1b2838;
	font-weight: 600;
}

.us-line__out {
	margin-top: 6px;
	color: #e01b1b;
	font-size: 13px;
	font-weight: 700;
	cursor: help;
}

.us-line__opts {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	color: #5c6673;
	font-size: 13px;
}

.us-line__opts span {
	color: #1b2838;
}

.us-line__side {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 0 0 auto;
}

.us-line__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-width: 120px;
}

.us-line__price-now {
	color: #1b2838;
	font-size: 18px;
	font-weight: 800;
	white-space: nowrap;
}

.us-line__price-old {
	color: #8a8f98;
	font-size: 13px;
	text-decoration: line-through;
}

.us-line__price-one {
	margin-top: 2px;
	color: #5c6673;
	font-size: 12px;
	white-space: nowrap;
}

button.us-line__buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 22px;
	border: none;
	border-radius: 10px;
	background: #2fa84f;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	transition: background .15s ease;
}

button.us-line__buy:hover {
	background: #268c42;
}

a.us-line__del {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	border-radius: 10px;
	color: #8a8f98;
	font-size: 14px;
	transition: background .15s ease, color .15s ease;
}

a.us-line__del:hover {
	background: #fdf0ef;
	color: #e01b1b;
	text-decoration: none;
}

/* --- количество ---------------------------------------------- */
.us-line__qty {
	display: flex;
	align-items: center;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	overflow: hidden;
}

html button.us-line__qty-btn {
	width: 36px;
	height: 44px;
	border: none;
	background: #f7f8fa;
	color: #1b2838;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	transition: background .15s ease, color .15s ease;
}

html button.us-line__qty-btn:hover {
	background: #eef1f5;
	color: #1f7ae0;
}

input.us-line__qty-val {
	width: 48px;
	height: 44px;
	border: none;
	background: #fff;
	color: #1b2838;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
}

input.us-line__qty-val:focus {
	outline: none;
}

/* --- ярлыки --------------------------------------------------- */
.us-marks {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-top: 8px;
	color: #5c6673;
	font-size: 13px;
}

.us-marks__item {
	display: inline-flex;
	align-items: center;
	font-size: 17px;
}

.us-marks__img {
	width: 18px;
	height: 18px;
}

.us-marks__eu {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.us-marks__grade {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.us-marks__grade .us-tag__ico {
	width: 16px;
	height: 16px;
}

.us-marks__text {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.us-marks__flag {
	width: 16px;
	height: 11px;
	border-radius: 2px;
}

/* --- подвал списка -------------------------------------------- */
.us-lines__foot {
	margin-top: 18px;
}

a.us-lines__back {
	display: inline-flex;
	align-items: center;
	height: 46px;
	padding: 0 22px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff;
	color: #1b2838;
	font-size: 15px;
	font-weight: 600;
	transition: border-color .15s ease, color .15s ease;
}

a.us-lines__back:hover {
	border-color: #1f7ae0;
	color: #1f7ae0;
	text-decoration: none;
}

.us-lines__empty {
	padding: 28px 0;
	color: #5c6673;
	font-size: 15px;
}

/* --- страница корзины ----------------------------------------- */
.us-cartpage__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 20px;
	align-items: start;
}

.us-cartpage__warning {
	margin-bottom: 16px;
	padding: 12px 16px;
	border-radius: 10px;
	background: #fdf0ef;
	color: #b3261e;
	font-size: 14px;
}

.us-cartpage__sum {
	position: sticky;
	top: 90px;
	padding: 18px;
	border-radius: 12px;
	background: #f7f8fa;
}

.us-cartpage__sum-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	color: #5c6673;
	font-size: 13px;
}

.us-cartpage__sum-row.is-last {
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid #e3e8ee;
	color: #1b2838;
}

.us-cartpage__sum-row.is-last .us-cartpage__sum-name {
	font-size: 15px;
	font-weight: 700;
}

.us-cartpage__sum-val {
	color: #1b2838;
	font-weight: 700;
	white-space: nowrap;
}

.us-cartpage__sum-row.is-last .us-cartpage__sum-val {
	font-size: 20px;
	font-weight: 800;
}

a.us-cartpage__checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	margin-top: 14px;
	border-radius: 10px;
	background: #2fa84f;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	transition: background .15s ease;
}

a.us-cartpage__checkout:hover {
	background: #268c42;
	color: #fff;
	text-decoration: none;
}

a.us-cartpage__link {
	display: block;
	margin-top: 10px;
	color: #1f7ae0;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}

.us-cartpage__extra {
	margin-top: 20px;
	padding: 18px;
	border: 1px solid #e3e8ee;
	border-radius: 12px;
}

.us-cartpage__extra-title {
	color: #1b2838;
	font-size: 17px;
	font-weight: 700;
}

.us-cartpage__extra-text {
	margin-top: 4px;
	color: #5c6673;
	font-size: 13px;
	line-height: 1.5;
}

@media (max-width: 991px) {
	.us-cartpage__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.us-cartpage__sum {
		position: static;
	}
}

@media (max-width: 767px) {
	.us-line {
		flex-wrap: wrap;
		gap: 12px;
	}

	.us-line__body {
		flex: 1 1 100%;
		order: 2;
	}

	.us-line__side {
		order: 3;
		flex: 1 1 100%;
		justify-content: space-between;
	}
}

/* --- ночь ------------------------------------------------------ */
html[data-theme="dark"] .us-line {
	border-color: #27333f;
	background: #18222e;
}

html[data-theme="dark"] a.us-line__title,
html[data-theme="dark"] .us-line__title,
html[data-theme="dark"] .us-line__price-now,
html[data-theme="dark"] .us-cartpage__sum-val,
html[data-theme="dark"] .us-cartpage__extra-title {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-line__size,
html[data-theme="dark"] .us-line__note,
html[data-theme="dark"] .us-line__opts,
html[data-theme="dark"] .us-line__price-one,
html[data-theme="dark"] .us-marks,
html[data-theme="dark"] .us-cartpage__sum-row,
html[data-theme="dark"] .us-cartpage__extra-text,
html[data-theme="dark"] .us-lines__empty {
	color: #93a0ae;
}

html[data-theme="dark"] .us-line__note span,
html[data-theme="dark"] .us-line__opts span {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-cartpage__sum {
	background: #1f2b39;
}

html[data-theme="dark"] .us-cartpage__sum-row.is-last {
	border-top-color: #27333f;
	color: #e4e9ef;
}

html[data-theme="dark"] .us-line__qty,
html[data-theme="dark"] .us-cartpage__extra {
	border-color: #27333f;
}

html[data-theme="dark"] button.us-line__qty-btn {
	background: #1f2b39;
	color: #e4e9ef;
}

html[data-theme="dark"] input.us-line__qty-val {
	background: #18222e;
	color: #e4e9ef;
}

html[data-theme="dark"] a.us-lines__back {
	border-color: #27333f;
	background: #18222e;
	color: #e4e9ef;
}

/* Тема подчёркивает ссылки внутри .us-content — в наших строках
   название и кнопки подчёркивание не носят. */
html .us-content a.us-line__title,
html .us-content a.us-line__del,
html .us-content a.us-lines__back,
html .us-content a.us-cartpage__checkout,
html .us-content a.us-cartpage__link,
html .us-content a.us-line__photo {
	text-decoration: none;
}

html .us-content a.us-lines__back:hover,
html .us-content a.us-cartpage__link:hover {
	text-decoration: none;
}

/* Снимок поставщика идёт с белой подложкой. На странице товара её
   прячет mix-blend-mode, но в строке он не годится: ночью снимок
   сливается с тёмной плашкой. Кладём на белую плитку — она же
   отделяет снимок от строки в обеих темах. */
.us-line__photo {
	padding: 6px;
	border-radius: 10px;
	background: #fff;
}

.us-line__photo img {
	mix-blend-mode: normal;
}

/* Ночью панели кабинета и корзины у темы оставались белыми —
   наши строки висели на белом листе. */
html[data-theme="dark"] .us-wish,
html[data-theme="dark"] .us-cartpage,
html[data-theme="dark"] .us-account-list {
	background: #141c26;
	box-shadow: none;
}

html[data-theme="dark"] .us-account-item:not(:last-child) {
	border-bottom-color: #27333f;
}

html[data-theme="dark"] .us-account-link {
	color: #93a0ae;
}

html[data-theme="dark"] .us-account-link.active,
html[data-theme="dark"] .us-account-link:hover {
	color: #2d8ef0;
}

/* Крупные белые панели темы (кабинет, корзина, информационные
   страницы) шли с острыми углами — скругляем тем же радиусом,
   что наши блоки на странице товара. */
.us-content,
.us-account-list {
	border-radius: 14px;
}

.us-account-list {
	overflow: hidden;
}

/* --- Шапка страницы ---------------------------------------- */
/* Крошки и заголовок стоят в одном блоке на ширину содержимого.
   Фотография идёт вполсилы — она фон, а не содержание, — и слева
   закрыта градиентом в цвет блока, чтобы текст читался. */
.us-pagehead {
	position: relative;
	margin-bottom: 20px;
	padding: 6px 24px 20px;
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
}

.us-pagehead::before,
.us-pagehead::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.us-pagehead::before {
	background: url(/image/catalog/bg/head-day.webp) right center / cover no-repeat;
	opacity: .5;
}

.us-pagehead::after {
	background: linear-gradient(90deg,
		#fff 0%,
		rgba(255, 255, 255, .92) 36%,
		rgba(255, 255, 255, 0) 78%);
}

.us-pagehead > * {
	position: relative;
	z-index: 1;
}

/* Тонкая линия под заголовком больше не нужна: границу блока
   теперь держит сама плашка. */
.us-pagehead .us-main-shop-title {
	margin-bottom: 0;
}

.us-pagehead .us-main-shop-title:after {
	display: none;
}

.us-pagehead .us-breadcrumb {
	padding: 14px 0 10px;
}

@media (max-width: 767px) {
	.us-pagehead {
		padding: 4px 16px 16px;
	}

	/* на узком экране фотографии остаётся полоска справа —
	   градиент сдвигаем, иначе от неё не остаётся ничего */
	.us-pagehead::after {
		background: linear-gradient(90deg,
			#fff 0%,
			rgba(255, 255, 255, .92) 50%,
			rgba(255, 255, 255, 0) 100%);
	}
}

html[data-theme="dark"] .us-pagehead {
	background: #141c26;
}

html[data-theme="dark"] .us-pagehead::before {
	background-image: url(/image/catalog/bg/head-night.webp);
}

html[data-theme="dark"] .us-pagehead::after {
	background: linear-gradient(90deg,
		#141c26 0%,
		rgba(20, 28, 38, .92) 36%,
		rgba(20, 28, 38, 0) 78%);
}

@media (max-width: 767px) {
	html[data-theme="dark"] .us-pagehead::after {
		background: linear-gradient(90deg,
			#141c26 0%,
			rgba(20, 28, 38, .92) 50%,
			rgba(20, 28, 38, 0) 100%);
	}
}

/* Пустая плашка модулей идёт с margin-top: -30px — она подтягивалась
   под старый заголовок и съедала отступ под нашей шапкой. */
.us-pagehead + .content-top-box {
	margin-top: 0;
	margin-bottom: 20px;
}

/* --- Подвал ------------------------------------------------- */
/* Был полосой во всю ширину экрана. Делаем блоком той же ширины,
   что и содержимое страницы, со скруглением сверху: снизу он
   упирается в край окна, там скруглять нечего. */
footer {
	background: none;
}

.footer-sub {
	position: relative;
	/* 15px — отступ контейнера, 20px — внутренний отступ плиты:
	   текст встаёт ровно под логотипом в шапке */
	padding: 28px 35px 16px;
}

/* Плита подложкой: ширину задаёт контейнер темы (1170px, с 1600px —
   1410px), числом её фиксировать нельзя. */
.footer-sub::before {
	content: '';
	position: absolute;
	top: 0;
	right: 15px;
	bottom: 0;
	left: 15px;
	border-radius: 14px 14px 0 0;
	background: #fff;
	box-shadow: 0 -2px 14px rgba(27, 40, 56, .05);
}

.footer-sub > * {
	position: relative;
	z-index: 1;
}

.us-footer-box {
	margin-bottom: 18px;
}

.us-footer-title {
	margin-bottom: 14px;
	color: #1b2838;
	font-size: 17px;
	font-weight: 700;
}

.us-footer-item {
	margin-bottom: 8px;
}

html .us-footer-link {
	color: #5c6673;
	font-size: 14px;
	text-decoration: none;
	transition: color .15s ease;
}

html .us-footer-link:hover {
	color: #1f7ae0;
	text-decoration: none;
}

/* --- время работы -------------------------------------------- */
/* Часы были размером с текст всего расписания — это подпись
   к списку, а не картинка. */
.us-footer-shedule {
	align-items: flex-start;
	gap: 10px;
}

.us-footer-shedule-icon {
	width: 18px;
	flex: 0 0 auto;
	margin-top: 2px;
	opacity: .55;
}

.us-footer-shedule-icon img {
	width: 18px;
	height: 18px;
}

.us-footer-shedule-text-item {
	margin-bottom: 6px;
	color: #5c6673;
	font-size: 14px;
	line-height: 1.45;
}

/* --- соцсети -------------------------------------------------- */
.us-footer-social {
	margin-top: 18px;
}

.us-footer-social-text {
	margin-bottom: 10px;
	color: #5c6673;
	font-size: 14px;
}

.us-footer-social-list {
	gap: 8px;
	margin: 0;
}

html a.us-footer-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: #f7f8fa;
	color: #5c6673;
	font-size: 16px;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}

html a.us-footer-social-link:hover {
	background: #1f7ae0;
	color: #fff;
	transform: translateY(-2px);
	text-decoration: none;
}

/* --- контакты ------------------------------------------------- */
/* Номера в подвале: оба сразу, значок оператора слева.
   Раскрывающийся список убран, клика по номеру для показа
   второго больше не нужно. */
.us-footer-phones {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 12px;
}

html a.us-footer-phone {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #1b2838;
	font-size: 19px;
	font-weight: 700;
	text-decoration: none;
}

html a.us-footer-phone:hover {
	color: #1f7ae0;
}

.us-footer-phone-op {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	object-fit: contain;
}

html a.us-footer-phone-btn {
	padding: 0;
	border: none;
	background: none;
	color: #1b2838;
	font-size: 19px;
	font-weight: 700;
}

html a.us-footer-phone-btn:hover {
	color: #1f7ae0;
}

html a.us-footer-phone-btn i {
	margin-left: 8px;
	font-size: 11px;
	color: #8a8f98;
}

html a.us-footer-mail {
	display: inline-block;
	margin-top: 10px;
	color: #1f7ae0;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

html a.us-footer-mail:hover {
	text-decoration: underline;
}

.us-footer-address {
	margin-top: 8px;
	color: #5c6673;
	font-size: 14px;
	line-height: 1.45;
}

/* Мессенджеры: крупнее, со скруглением и цветом своей службы —
   раньше это были мелкие квадратики. */
.us-footer-contact-list {
	gap: 10px;
	margin: 16px 0 0;
}

html a.us-footer-contact-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	color: #fff;
	font-size: 20px;
	transition: transform .15s ease, box-shadow .15s ease;
}

html a.us-footer-contact-link:hover {
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(27, 40, 56, .18);
}

html a.us-footer-contact-link-viber {
	background: #7360f2;
}

html a.us-footer-contact-link-telegram {
	background: #2aabee;
}

html a.us-footer-contact-link-whatsapp {
	background: #25d366;
}

html a.us-footer-contact-link-messenger {
	background: #0084ff;
}

html a.us-footer-contact-link-skype {
	background: #00aff0;
}

/* --- подписка -------------------------------------------------- */
.us-foooter-subscribe-row {
	align-items: center;
	margin-bottom: 22px;
	padding-bottom: 22px;
	border-bottom: 1px solid #e3e8ee;
}

.us-footer-subscribe-text {
	gap: 14px;
}

.us-footer-subscribe-text-icon img {
	width: 44px;
	height: 44px;
}

.us-footer-subscribe-text-text div:first-child {
	color: #5c6673;
	font-size: 14px;
}

.us-footer-subscribe-text-text div:last-child {
	color: #1b2838;
	font-size: 17px;
	font-weight: 700;
}

.us-footer-form-top {
	gap: 10px;
}

input.us-footer-form-top-input {
	height: 46px;
	flex: 1 1 auto;
	padding: 0 16px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff;
	color: #1b2838;
	font-size: 14px;
}

input.us-footer-form-top-input:focus {
	outline: 2px solid #1f7ae0;
	outline-offset: -1px;
}

html button.us-footer-form-top-buttton {
	height: 46px;
	flex: 0 0 auto;
	padding: 0 24px;
	border: none;
	border-radius: 10px;
	background: #1f7ae0;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	transition: background .15s ease;
}

html button.us-footer-form-top-buttton:hover {
	background: #1765bd;
}

.us-footer-form-bottom {
	margin-top: 10px;
	color: #5c6673;
	font-size: 12px;
}

/* --- нижняя строка ---------------------------------------------- */
.us-footer-bottom {
	align-items: center;
	margin-top: 10px;
	padding-top: 16px;
	border-top: 1px solid #e3e8ee;
}

/* Подпись разработчика. Цвет ссылки взят из нашей палитры:
   в исходной разметке он был белым — это с тёмного футера,
   на светлом блоке её не было бы видно. */
.us-credits {
	color: #8a8f98;
	font-size: 12px;
	line-height: 1.5;
}

.us-credits__heart {
	color: #e01b1b;
}

.us-footer-bottom-credits .us-credits__link {
	color: #6b7280;
	font-weight: 600;
	text-decoration: none;
}

.us-footer-bottom-credits .us-credits__link:hover {
	color: #1f7ae0;
	text-decoration: none;
}

html[data-theme="dark"] .us-footer-bottom-credits .us-credits__link {
	color: #8b97a6;
}

html[data-theme="dark"] .us-footer-bottom-credits .us-credits__link:hover {
	color: #4da3f5;
}

.us-footer-bottom-payment-list {
	align-items: center;
	gap: 18px;
	margin: 0;
}

/* Логотипы присланы владельцем и ставятся вместо спрайта темы.
   Размер — по высоте, ширина своя у каждого: пропорции разные. */
.us-footer-bottom-payment-item.visa,
.us-footer-bottom-payment-item.mastercard,
.us-footer-bottom-payment-item.liqpay {
	background-image: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 1;
}

.us-footer-bottom-payment-item.visa:hover,
.us-footer-bottom-payment-item.mastercard:hover,
.us-footer-bottom-payment-item.liqpay:hover {
	opacity: 1;
}

.us-footer-bottom-payment-item.visa {
	width: 46px;
	height: 16px;
	background-image: url("../img/pay-visa.svg");
}

.us-footer-bottom-payment-item.mastercard {
	width: 91px;
	height: 16px;
	background-image: url("../img/pay-mastercard.svg");
}

.us-footer-bottom-payment-item.liqpay {
	width: 82px;
	height: 17px;
	background-image: url("../img/pay-liqpay.svg");
}

/* Ночью у mastercard и liqpay свои версии: надпись в них светлая,
   иначе на тёмной плите она пропадает. */
html[data-theme="dark"] .us-footer-bottom-payment-item.mastercard {
	background-image: url("../img/pay-mastercard-dark.svg");
}

html[data-theme="dark"] .us-footer-bottom-payment-item.liqpay {
	background-image: url("../img/pay-liqpay-dark.svg");
}

@media (max-width: 991px) {
	.footer-sub {
		padding: 22px 30px 14px;
	}
}

/* --- ночь -------------------------------------------------------- */
/* Плита светлее страницы, как блоки на главной, — иначе подвал
   сливается с фоном и границы не видно. */
html[data-theme="dark"] .footer-sub::before {
	background: #16202b;
	box-shadow: none;
}

html[data-theme="dark"] .us-footer-title,
html[data-theme="dark"] html a.us-footer-phone-btn,
html[data-theme="dark"] a.us-footer-phone-btn,
html[data-theme="dark"] html a.us-footer-phone,
html[data-theme="dark"] .us-footer-subscribe-text-text div:last-child {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-footer-link,
html[data-theme="dark"] .us-footer-shedule-text-item,
html[data-theme="dark"] .us-footer-address,
html[data-theme="dark"] .us-footer-social-text,
html[data-theme="dark"] .us-footer-subscribe-text-text div:first-child,
html[data-theme="dark"] .us-footer-form-bottom {
	color: #93a0ae;
}

html[data-theme="dark"] a.us-footer-social-link {
	background: #1f2b39;
	color: #93a0ae;
}

html[data-theme="dark"] a.us-footer-social-link:hover {
	background: #1f7ae0;
	color: #fff;
}

html[data-theme="dark"] .us-footer-bottom,
html[data-theme="dark"] .us-foooter-subscribe-row {
	border-color: #27333f;
}

html[data-theme="dark"] input.us-footer-form-top-input {
	border-color: #27333f;
	background: #141c26;
	color: #e4e9ef;
}

html[data-theme="dark"] .us-footer-shedule-icon {
	opacity: .7;
	filter: invert(1);
}

/* Плита подвала упирается в низ окна: собственные отступы темы
   (45px сверху и 18px снизу) здесь только мешают. */
footer {
	padding: 0;
	margin-top: 40px;
}

/* У расписания значок стоит у первой строки, а не по центру
   списка. Bootstrap держит выравнивание через !important. */
.us-footer-shedule.d-flex {
	align-items: flex-start !important;
}

/* Нижняя строка подвала шла через отступ темы в 30px плюс свой —
   между колонками и копирайтом зияла пустота. */
.footer-sub .row-padding-top {
	padding-top: 0;
}

.us-footer-bottom {
	margin-top: 0;
}

/* Наведение на мессенджер — обратная раскраска: фон белый,
   значок в цвете своей службы. Раньше оставался белым и значок,
   и плитка пропадала. */
html a.us-footer-contact-link:hover {
	background: #fff;
}

html a.us-footer-contact-link-viber:hover {
	color: #7360f2;
}

html a.us-footer-contact-link-telegram:hover {
	color: #2aabee;
}

html a.us-footer-contact-link-whatsapp:hover {
	color: #25d366;
}

html a.us-footer-contact-link-messenger:hover {
	color: #0084ff;
}

html a.us-footer-contact-link-skype:hover {
	color: #00aff0;
}

html[data-theme="dark"] a.us-footer-contact-link:hover {
	background: #1f2b39;
}

/* --- Страница брендов --------------------------------------- */
/* Указатель по буквам — чипы, как размеры в подборе. */
.us-brands__index {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.us-brands__index-label {
	margin-right: 6px;
	color: #5c6673;
	font-size: 14px;
}

html a.us-brands__letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid #e3e8ee;
	border-radius: 8px;
	background: #f7f8fa;
	color: #1b2838;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}

html a.us-brands__letter:hover {
	border-color: #1f7ae0;
	background: #fff;
	color: #1f7ae0;
	text-decoration: none;
}

/* --- группы по буквам ---------------------------------------- */
.us-brands__group {
	margin-bottom: 26px;
	/* чтобы заголовок не прятался под прилипающую плашку меню */
	scroll-margin-top: 90px;
}

.us-brands__title {
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid #e3e8ee;
	color: #1b2838;
	font-size: 20px;
	font-weight: 700;
}

.us-brands__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px;
}

html a.us-brands__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 16px 14px 14px;
	border: 1px solid #e3e8ee;
	border-radius: 12px;
	background: #fff;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

html a.us-brands__card:hover {
	border-color: #1f7ae0;
	box-shadow: 0 8px 18px rgba(27, 40, 56, .08);
	transform: translateY(-2px);
	text-decoration: none;
}

/* Логотипы приходят с белой подложкой после ресайза, поэтому
   кладём их на белую плитку — она же работает ночью. */
.us-brands__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 64px;
	padding: 6px 10px;
	border-radius: 10px;
	background: #fff;
}

.us-brands__logo img {
	max-width: 100%;
	max-height: 100%;
}

/* Логотипа нет — название вместо картинки */
.us-brands__mark {
	color: #1b2838;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .4px;
	text-align: center;
}

.us-brands__name {
	color: #1b2838;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

html a.us-brands__card:hover .us-brands__name {
	color: #1f7ae0;
}

/* Счётчик — только число: «280 шин» пришлось бы склонять,
   а подпись есть в подсказке. */
.us-brands__count {
	position: absolute;
	top: 10px;
	right: 10px;
	min-width: 26px;
	padding: 2px 7px;
	border-radius: 20px;
	background: #eef1f5;
	color: #5c6673;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
}

@media (max-width: 575px) {
	.us-brands__grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}

	.us-brands__logo {
		height: 52px;
	}
}

/* --- ночь ---------------------------------------------------- */
html[data-theme="dark"] a.us-brands__letter {
	border-color: #27333f;
	background: #1f2b39;
	color: #e4e9ef;
}

html[data-theme="dark"] a.us-brands__letter:hover {
	border-color: #1f7ae0;
	background: #18222e;
	color: #5fa8f0;
}

html[data-theme="dark"] .us-brands__index-label,
html[data-theme="dark"] .us-brands__count {
	color: #93a0ae;
}

html[data-theme="dark"] .us-brands__title {
	border-bottom-color: #27333f;
	color: #e4e9ef;
}

html[data-theme="dark"] a.us-brands__card {
	border-color: #27333f;
	background: #18222e;
}

html[data-theme="dark"] .us-brands__name,
html[data-theme="dark"] .us-brands__mark {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-brands__count {
	background: #1f2b39;
}

/* Карточка без логотипа: название стоит вместо картинки, поэтому
   высота должна совпадать с карточками, где логотип есть. */
.us-brands__card .us-brands__logo:last-child {
	height: 64px;
}

.us-brands__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

/* Белая плитка нужна только под логотип: у карточек с названием
   вместо картинки она ночью гасила текст. */
.us-brands__logo--text {
	background: none;
}

/* --- Окно с фотографиями товара ----------------------------- */
#us-product-gallery .modal-dialog {
	max-width: 760px;
}

#us-product-gallery .modal-body {
	padding: 20px;
}

.us-gal__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 420px;
	border-radius: 12px;
	background: #fff;
}

.us-gal__photo {
	display: none;
	max-width: 100%;
	max-height: 100%;
}

.us-gal__photo.is-on {
	display: block;
}

html button.us-gal__arrow {
	position: absolute;
	top: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff;
	transition: border-color .15s ease, background .15s ease;
}

html button.us-gal__arrow:hover {
	border-color: #1f7ae0;
	background: #f7f8fa;
}

html button.us-gal__arrow--prev {
	left: 0;
}

html button.us-gal__arrow--next {
	right: 0;
}

/* стрелка рисуется уголком, чтобы не тянуть шрифт значков */
html button.us-gal__arrow::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	margin: -5px 0 0 -3px;
	border-right: 2px solid #1b2838;
	border-bottom: 2px solid #1b2838;
	transform: rotate(-45deg);
}

html button.us-gal__arrow--prev::before {
	margin-left: -6px;
	transform: rotate(135deg);
}

.us-gal__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

html button.us-gal__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	padding: 4px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff;
	transition: border-color .15s ease;
}

html button.us-gal__thumb:hover {
	border-color: #1f7ae0;
}

html button.us-gal__thumb.is-on {
	border-color: #1b2838;
}

.us-gal__thumb img {
	max-width: 100%;
	max-height: 100%;
}

.us-gal__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #e3e8ee;
}

.us-gal__price-now {
	color: #1b2838;
	font-size: 22px;
	font-weight: 800;
}

.us-gal__price-old {
	margin-right: 8px;
	color: #8a8f98;
	font-size: 14px;
	text-decoration: line-through;
}

html a.us-gal__buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 22px;
	border-radius: 10px;
	background: #2fa84f;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s ease;
}

html a.us-gal__buy:hover {
	background: #268c42;
	color: #fff;
	text-decoration: none;
}

@media (max-width: 767px) {
	.us-gal__stage {
		height: 280px;
	}

	#us-product-gallery .modal-body {
		padding: 14px;
	}
}

/* --- Ярлык на снимке («заканчивается», скидка) --------------- */
/* Цвета задаёт владелец в настройках темы, мы правим только вид:
   у темы это был острый прямоугольник с текстом 10px. */
.us-product-stickers {
	top: 16px;
	left: 16px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.us-product-stickers-item {
	margin-bottom: 0;
	padding: 5px 11px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .2px;
	box-shadow: 0 4px 10px rgba(27, 40, 56, .14);
}

.us-product-stickers-discount {
	max-width: none;
}

/* --- ночь ---------------------------------------------------- */
html[data-theme="dark"] .us-gal__stage,
html[data-theme="dark"] button.us-gal__thumb {
	background: #fff;
}

html[data-theme="dark"] button.us-gal__arrow {
	border-color: #27333f;
	background: #18222e;
}

html[data-theme="dark"] button.us-gal__arrow::before {
	border-right-color: #e4e9ef;
	border-bottom-color: #e4e9ef;
}

html[data-theme="dark"] button.us-gal__thumb,
html[data-theme="dark"] .us-gal__foot {
	border-color: #27333f;
}

html[data-theme="dark"] .us-gal__price-now {
	color: #e4e9ef;
}

/* Снимок крупнее, но не выше экрана: на невысоких окнах рамка
   ужимается, иначе кнопка покупки уезжает за край. */
.us-gal__stage {
	height: 650px;
	max-height: calc(100vh - 260px);
}

#us-product-gallery .modal-dialog {
	max-width: 760px;
}

/* У темы окно галереи закрашивало страницу белым во всю высоту
   (`.modal-open .modal#us-product-gallery { background: #FFF }`) —
   это от прежней полноэкранной галереи. Возвращаем обычную
   затемнённую подложку, как у остальных окон. */
html body.modal-open .modal#us-product-gallery,
#us-product-gallery {
	background: rgba(4, 8, 12, .82) !important;
}

@media (max-width: 767px) {
	.us-gal__stage {
		height: 380px;
		max-height: calc(100vh - 240px);
	}
}

/* Bootstrap на время окна ставит body { overflow: hidden } — body
   становится контейнером прокрутки, и липкая колонка отлипает:
   при открытии окна снимок прыгал на своё «нелипкое» место,
   при закрытии возвращался. `clip` обрезает так же, но контейнера
   прокрутки не создаёт; страницу за окном всё равно скроллит html. */
body.modal-open {
	overflow: clip !important;
}

/* Белый блок витрины и брендов шёл с острыми углами — скругляем
   тем же радиусом, что остальные блоки. */
.us-category-content {
	border-radius: 14px;
}

/* На странице брендов внутри только сетка карточек, и 15px отступа
   у темы мало: указатель почти упирался в верхний край. */
.us-manufacturer-list-content {
	padding: 26px 24px 28px;
}

@media (max-width: 575px) {
	.us-manufacturer-list-content {
		padding: 18px 14px 20px;
	}
}

/* --- Боковой фильтр ----------------------------------------- */
/* Фильтр и витрина были одним белым полотном. Разводим: у каждого
   свой блок, между ними зазор. */
.us-category-content {
	padding: 0;
	background: none;
	box-shadow: none;
}

.us-category-content:hover {
	box-shadow: none;
}

.us-category-content > .row {
	margin-left: 0;
	margin-right: 0;
}

.us-category-content #column-left {
	padding-left: 0;
	padding-right: 18px;
}

.us-category-content #content {
	padding: 22px 24px 28px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .03);
}

.us-flt {
	margin: 0;
	padding: 18px;
	border: 0;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .03);
}

.us-flt__head {
	margin-bottom: 14px;
	color: #1b2838;
	font-size: 18px;
	font-weight: 700;
}

/* --- вкладки «по размеру / по авто» -------------------------- */
.us-flt__tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 16px;
	padding: 4px;
	border-radius: 12px;
	background: #f7f8fa;
}

html button.us-flt__tab {
	flex: 1 1 0;
	height: 36px;
	border: 0;
	border-radius: 9px;
	background: none;
	color: #5c6673;
	font-size: 14px;
	font-weight: 600;
	transition: background .15s ease, color .15s ease;
}

html button.us-flt__tab:hover {
	color: #1b2838;
}

html button.us-flt__tab.is-on {
	background: #fff;
	color: #1b2838;
	box-shadow: 0 1px 4px rgba(27, 40, 56, .12);
}

.us-flt__pane {
	display: none;
}

.us-flt__pane.is-on {
	display: block;
}

/* --- секции --------------------------------------------------- */
.us-flt .list-group,
.us-flt .list-group-item {
	border: 0;
	border-radius: 0;
	background: none;
}

.us-flt .ocfilter-option {
	padding: 14px 0;
	border-top: 1px solid #e3e8ee;
}

.us-flt__pane .ocfilter-option:first-child,
.us-flt .list-group > .ocfilter-option:first-child {
	border-top: 0;
	padding-top: 0;
}

.us-flt .ocf-option-name {
	position: relative;
	padding-right: 24px;
	color: #1b2838;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	user-select: none;
}

/* уголок сворачивания рисуем сами — значковый шрифт тут не нужен */
.us-flt .ocf-option-name::after {
	content: '';
	position: absolute;
	top: 6px;
	right: 4px;
	width: 8px;
	height: 8px;
	border-right: 2px solid #8a8f98;
	border-bottom: 2px solid #8a8f98;
	transform: rotate(45deg);
	transition: transform .15s ease;
}

.us-flt .is-folded .ocf-option-name::after {
	transform: rotate(-45deg);
	top: 9px;
}

.us-flt .ocf-option-values {
	margin-top: 10px;
}

.us-flt .is-folded .ocf-option-values,
.us-flt .is-folded .us-flt__tools {
	display: none;
}

/* --- значения ------------------------------------------------- */
.us-flt .ocf-option-values label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 5px 0;
	color: #1b2838;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
}

.us-flt .ocf-option-values label.is-hidden {
	display: none;
}

.us-flt .ocf-option-values label:hover {
	color: #1f7ae0;
}

.us-flt .ocf-option-values label.disabled {
	color: #b5bcc5;
	cursor: default;
}

.us-flt .ocf-option-values input[type="checkbox"],
.us-flt .ocf-option-values input[type="radio"] {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	margin: 0;
	accent-color: #1f7ae0;
}

.us-flt .ocf-option-values small.badge {
	margin-left: auto;
	padding: 1px 7px;
	border-radius: 20px;
	background: #eef1f5;
	color: #5c6673;
	font-size: 11px;
	font-weight: 600;
}

.us-flt .ocf-selected {
	font-weight: 600;
}

.us-flt__ico {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	font-size: 16px;
	color: #5c6673;
}

/* «показать все» — ссылкой, а не кнопкой во всю ширину */
.us-flt .collapse-value {
	margin-top: 4px;
}

html .us-flt .collapse-value button.btn {
	padding: 0;
	border: 0;
	background: none;
	color: #1f7ae0;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	text-decoration: none;
}

html .us-flt .collapse-value button.btn:hover {
	text-decoration: underline;
}

/* --- поиск и порядок у брендов -------------------------------- */
.us-flt__tools {
	margin-top: 10px;
}

.us-flt__search {
	display: block;
	margin: 0 0 10px;
}

.us-flt__search input {
	width: 100%;
	height: 38px;
	padding: 0 12px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff;
	color: #1b2838;
	font-size: 14px;
}

.us-flt__search input:focus {
	outline: 2px solid #1f7ae0;
	outline-offset: -1px;
}

.us-flt__sub {
	display: flex;
	gap: 16px;
	margin-bottom: 6px;
	border-bottom: 1px solid #e3e8ee;
}

html button.us-flt__subtab {
	padding: 0 0 8px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: #5c6673;
	font-size: 13px;
	font-weight: 600;
	transition: color .15s ease, border-color .15s ease;
}

html button.us-flt__subtab:hover {
	color: #1b2838;
}

html button.us-flt__subtab.is-on {
	border-bottom-color: #1f7ae0;
	color: #1f7ae0;
}

/* список брендов длинный — прокручиваем, как делают все */
.us-flt__values {
	max-height: 260px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #c7ced7 transparent;
	padding-right: 6px;
}

/* --- цена ------------------------------------------------------ */
.us-flt .ocfilter-option[data-toggle="popover-price"] .ocf-option-name {
	cursor: default;
}

.us-flt .ocfilter-option[data-toggle="popover-price"] .ocf-option-name::after {
	display: none;
}

.us-flt .ocf-price-inputs,
.us-flt .ocf-manual-price {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.us-flt input.form-control {
	height: 38px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	font-size: 14px;
}

/* --- кнопка «показать» ----------------------------------------- */
.us-flt #ocfilter-button {
	margin-top: 16px;
}

html .us-flt #ocfilter-button button.btn {
	width: 100%;
	height: 46px;
	border: 0;
	border-radius: 10px;
	background: #2fa84f;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}

html .us-flt #ocfilter-button button.btn:hover {
	background: #268c42;
}

html .us-flt #ocfilter-button button.btn.disabled {
	background: #c7ced7;
}

/* --- выбранное -------------------------------------------------- */
.us-flt .selected-options {
	padding: 0 0 12px;
}

.us-flt .selected-options .ocfilter-option {
	padding: 0 0 8px;
	border: 0;
}

html .us-flt .selected-options button.btn {
	margin: 2px 4px 2px 0;
	padding: 3px 9px !important;
	border: 0;
	border-radius: 8px;
	background: #eef1f5;
	color: #1b2838;
	font-size: 12px;
	font-weight: 600;
}

html .us-flt .selected-options button.btn:hover {
	background: #e01b1b;
	color: #fff;
}

html .us-flt .selected-options button.btn-block {
	width: 100%;
	margin-top: 6px;
	background: #fdf0ef;
	color: #e01b1b;
}

/* --- подбор по авто -------------------------------------------- */
.us-flt__pane[data-pane="car"] .form-group {
	margin-bottom: 10px;
}

@media (max-width: 991px) {
	.us-category-content #column-left {
		padding-right: 0;
	}

	.us-category-content #content {
		padding: 18px 16px 22px;
	}
}

/* --- ночь -------------------------------------------------------- */
html[data-theme="dark"] .us-flt,
html[data-theme="dark"] .us-category-content #content {
	background: #18222e;
}

html[data-theme="dark"] .us-flt__head,
html[data-theme="dark"] .us-flt .ocf-option-name,
html[data-theme="dark"] .us-flt .ocf-option-values label {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-flt .ocfilter-option,
html[data-theme="dark"] .us-flt__sub {
	border-color: #27333f;
}

html[data-theme="dark"] .us-flt__tabs {
	background: #1f2b39;
}

html[data-theme="dark"] button.us-flt__tab.is-on {
	background: #18222e;
	color: #e4e9ef;
}

html[data-theme="dark"] .us-flt .ocf-option-values small.badge {
	background: #1f2b39;
	color: #93a0ae;
}

html[data-theme="dark"] .us-flt__search input,
html[data-theme="dark"] .us-flt input.form-control {
	border-color: #27333f;
	background: #141c26;
	color: #e4e9ef;
}

/* Колонку фильтра расширяем: после вкладок и счётчиков в прежние
   17.5% названия секций переносились на две строки. */
@media (min-width: 992px) {
	#column-left.col-md-3 {
		flex: 0 0 21%;
		max-width: 21%;
	}

	#column-left.col-md-3 + #content.col-md-9 {
		flex: 0 0 79%;
		max-width: 79%;
	}
}

/* Доля считается от контейнера, а он у темы ниже 1600 сужается
   с 1440 до 1200 px — и плашке доставалось 228 px вместо 278, секции
   снова начинали ломаться. Держим колонку в пикселях: то, что отняла
   страница, забирает витрина — карточек в ряду от этого не убавляется,
   они просто чуть уже. 296 px — те же 21 % от широкой страницы,
   то есть размер до перестроения. Ниже 1200 колонки нет вовсе:
   там фильтр уходит в выдвижную панель, см. запрос ниже. */
@media (min-width: 1201px) and (max-width: 1599px) {
	#column-left.col-md-3 {
		flex: 0 0 296px;
		max-width: 296px;
	}

	#column-left.col-md-3 + #content.col-md-9 {
		flex: 0 0 calc(100% - 296px);
		max-width: calc(100% - 296px);
	}
}

/* --- Ниже 1200: фильтр выдвижной, витрина во всю ширину --------- */
/* Раскладка одна и для планшета, и для узкого окна на мониторе:
   делить их незачем, места под колонку фильтра одинаково мало,
   а товарам ширина нужна одинаково.

   Выдвижную панель умеет сама тема, но включала её только ниже 992:
   на панели стоит `d-lg-none`, у кнопки — `display: none` от 992.
   Поднимаем границу до 1200. Режим выбирается один раз при загрузке:
   модуль фильтра смотрит, видна ли панель (`options.mobile`),
   и переносит фильтр внутрь неё. */
@media (max-width: 1200px) {
	.ocf-offcanvas.ocfilter-mobile.d-lg-none {
		display: block !important;
	}

	/* Кнопку фильтра тема прячет от 992 (`main.css`) — возвращаем её,
	   но только в этой раскладке: выше 1200 колонка фильтра на месте
	   и кнопка не нужна. */
	.us-category-content .static_button_ocfilter,
	.us-category-sort-block .static_button_ocfilter {
		display: block;
	}

	#column-left.col-md-3 {
		display: none;
	}

	#column-left.col-md-3 + #content.col-md-9 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* Страница почти во всю ширину экрана: поля по 16px вместо
	   центрированного контейнера — иначе пятая карточка в ряд
	   не помещается. */
	.container {
		max-width: none;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Промежутки между карточками 12px вместо 30. Ряд у bootstrap
	   вынесен за края на свои 15px, поэтому поле витрины считаем
	   от них: 21 - 15 + 6 = 12px до первой карточки. */
	.us-category-content #content {
		padding-left: 21px;
		padding-right: 21px;
	}

	#content .row > .product-grid {
		padding-left: 6px;
		padding-right: 6px;
	}

	/* Боковая панель закладок у правого края ложится на товары, когда
	   страница идёт во всю ширину. Ниже 1200 разворачиваем её
	   горизонтально внизу экрана — плашкой по центру, как у мобильных
	   приложений. Кабинет и контакты добавляет в неё us-dock.js. */
	.oct-fixed-bar,
	.oct-fixed-bar.fixed-left,
	.oct-fixed-bar.fixed-right {
		top: auto;
		right: auto;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		left: 50%;
		z-index: 1035;
		/* ниже 992 тема гасит панель своим `!important` */
		display: flex !important;
		align-items: center;
		transform: translateX(-50%);
		border-radius: 16px;
	}

	/* в строке разделители вертикальные, а не между этажами */
	.oct-fixed-bar-item + .oct-fixed-bar-item {
		border-top: 0;
		border-left: 1px solid rgba(255, 255, 255, .12);
	}

	.oct-fixed-bar-link {
		width: 58px;
		padding: 12px 0;
	}

	/* счётчик уходит значком в угол: столбиком он вытягивал плашку.
	   Держим его мелким — крупный кружок спорил с самим значком. */
	.oct-fixed-bar-quantity {
		position: absolute;
		top: 6px;
		right: 8px;
		min-width: 16px;
		height: 16px;
		margin: 0;
		font-size: 9px;
		line-height: 16px;
	}

	/* Плашка покупки на карточке товара занимает тот же низ экрана —
	   пока она показана, плашку закладок поднимаем над ней. */
	body:has(.us-buybar.is-on) .oct-fixed-bar {
		bottom: calc(84px + env(safe-area-inset-bottom, 0px));
	}

	/* Пузырь сообщений больше не нужен: мессенджеры, почта и обратный
	   звонок переехали в окно контактов нижней плашки. */
	#us_fixed_contact_button,
	#us_fixed_contact_substrate {
		display: none !important;
	}
}

/* Сколько карточек в ряду — по ширине экрана. Держим максимум,
   какой ещё читается: карточке хватает примерно 155px, ниже этого
   цена с кнопкой в строку не встают. Поэтому по одной — только
   уже 380, на телефоне в руку всё равно идут две. */
@media (max-width: 1200px) and (min-width: 1100px) {
	#content .row > .product-grid {
		flex: 0 0 20%;
		max-width: 20%;
	}
}

@media (max-width: 1099px) and (min-width: 820px) {
	#content .row > .product-grid {
		flex: 0 0 25%;
		max-width: 25%;
	}
}

@media (max-width: 819px) and (min-width: 560px) {
	#content .row > .product-grid {
		flex: 0 0 33.3333%;
		max-width: 33.3333%;
	}
}

/* ниже 576 у ячеек вообще нет классов сетки — ширину задаём сами */
@media (max-width: 559px) and (min-width: 380px) {
	#content .row > .product-grid {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* У темы заголовок секции — серая плашка со своими !important. */
.us-flt .ocf-option-name {
	display: block !important;
	padding: 0 24px 0 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: #1b2838 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

.us-flt .list-group-item.ocfilter-option {
	padding: 14px 0 !important;
	background: none !important;
}

.us-flt .list-group-item.selected-options {
	padding: 0 0 12px !important;
	background: none !important;
}

html[data-theme="dark"] .us-flt .ocf-option-name {
	color: #e4e9ef !important;
}

html[data-theme="dark"] .us-flt .list-group-item.ocfilter-option,
html[data-theme="dark"] .us-flt .list-group-item.selected-options {
	background: none !important;
}

/* У темы заголовок секции светится синим (box-shadow) — гасим. */
.us-flt .ocf-option-name {
	box-shadow: none !important;
}

/* Подписи вкладок в одну строку: «За розміром» переносилось. */
html button.us-flt__tab {
	padding: 0 6px;
	font-size: 13px;
	white-space: nowrap;
}

/* Кнопка «показать N товаров» появляется внизу панели, когда выбор
   уже что-то меняет (класс ставит us-filter.js). */
.us-flt #ocfilter-button.is-on {
	display: block !important;
	position: sticky;
	bottom: 0;
	padding-top: 10px;
	background: #fff;
}

html[data-theme="dark"] .us-flt #ocfilter-button.is-on {
	background: #18222e;
}

/* --- подбор по авто: поля выбора ----------------------------- */
/* Это select2 темы — серые прямоугольники. Приводим к нашему полю. */
.us-flt .select2-container--default .select2-selection--single {
	height: 42px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff;
}

.us-flt .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-left: 12px;
	color: #1b2838;
	font-size: 14px;
	line-height: 40px;
}

.us-flt .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 40px;
}

/* Недоступное поле — светлая заливка, а не прозрачность:
   полупрозрачное на тёмной подложке выглядит грязным. */
.us-flt .select2-container--disabled .select2-selection--single {
	border-color: #e3e8ee;
	background: #eef1f5;
}

.us-flt .select2-selection__placeholder {
	color: #8a8f98 !important;
}

.select2-dropdown {
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: #1f7ae0;
}

/* --- цена ----------------------------------------------------- */
/* «Линейку» под ползунком убираем: мелкие штрихи только рябят. */
#column-left .noUi-pips-horizontal {
	display: none;
}

.us-flt .noUi-horizontal {
	height: 6px;
	border: 0;
	border-radius: 4px;
	background: #eef1f5;
	box-shadow: none;
}

.us-flt .noUi-connect {
	background: #1f7ae0;
}

.us-flt .noUi-horizontal .noUi-handle {
	width: 18px;
	height: 18px;
	top: -6px;
	right: -9px;
	border: 2px solid #1f7ae0;
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
	cursor: pointer;
}

.us-flt .noUi-handle::before,
.us-flt .noUi-handle::after {
	display: none;
}

.us-flt .ocfilter-option[data-toggle="popover-price"] .ocf-option-name {
	font-size: 15px !important;
}

html[data-theme="dark"] .us-flt .select2-container--default .select2-selection--single {
	border-color: #27333f;
	background: #141c26;
}

html[data-theme="dark"] .us-flt .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-flt .select2-container--disabled .select2-selection--single {
	background: #1f2b39;
}

html[data-theme="dark"] .us-flt .noUi-horizontal {
	background: #1f2b39;
}

/* Недоступные поля подбора тема красит в #cdcdcd — слишком темно
   для светлой панели; и выпадающий список у неё серый. */
.us-flt .m-selection .select2-container--default.select2-container--disabled .select2-selection--single {
	background: #eef1f5;
}

.select2-dropdown {
	border: 1px solid #e3e8ee !important;
	background: #fff !important;
}

html[data-theme="dark"] .us-flt .m-selection .select2-container--default.select2-container--disabled .select2-selection--single {
	background: #1f2b39;
}

html[data-theme="dark"] .select2-dropdown {
	border-color: #27333f !important;
	background: #18222e !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option {
	color: #e4e9ef;
}

/* Прилипшая кнопка перекрывает список — отделяем её тенью, чтобы
   было видно, что это плашка поверх. */
.us-flt #ocfilter-button.is-on {
	margin: 0 -18px -18px;
	padding: 12px 18px 18px;
	box-shadow: 0 -8px 16px rgba(255, 255, 255, .92);
}

html[data-theme="dark"] .us-flt #ocfilter-button.is-on {
	box-shadow: 0 -8px 16px rgba(24, 34, 46, .92);
}

/* --- Фильтр: скругление панели ------------------------------- */
/* У темы .panel идёт с border-radius: 0 !important — перебиваем. */
.us-flt.panel {
	border-radius: 14px !important;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .03) !important;
	overflow: visible;
}

/* --- Галочки ------------------------------------------------- */
/* Браузерная галочка плоская и мелкая. Рисуем свою: скруглённый
   квадрат с лёгким объёмом, при выборе — наш синий с белой птичкой
   и мягким ореолом. */
.us-flt .ocf-option-values input[type="checkbox"],
.us-flt .ocf-option-values input[type="radio"],
#product-search .us-form-checkbox-input,
[id^="account-"] .us-form-checkbox-input,
.simplecheckout input[type="checkbox"],
.simplecheckout input[type="radio"] {
	position: relative;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	border: 1.5px solid #d7dde5;
	border-radius: 7px;
	background: linear-gradient(180deg, #fff 0%, #f7f8fa 100%);
	box-shadow: 0 1px 2px rgba(27, 40, 56, .08), inset 0 1px 0 #fff;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.us-flt .ocf-option-values input[type="radio"],
.simplecheckout input[type="radio"] {
	border-radius: 50%;
}

.us-flt .ocf-option-values label:hover input:not(:disabled),
.simplecheckout label:hover input:not(:disabled) {
	border-color: #1f7ae0;
}

.us-flt .ocf-option-values input:checked,
#product-search .us-form-checkbox-input:checked,
[id^="account-"] .us-form-checkbox-input:checked,
.simplecheckout input:checked {
	border-color: #1f7ae0;
	background: linear-gradient(180deg, #2d8ef0 0%, #1f7ae0 100%);
	box-shadow: 0 3px 8px rgba(31, 122, 224, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* птичка — уголок из двух линий, без шрифта значков */
.us-flt .ocf-option-values input:checked::after,
#product-search .us-form-checkbox-input:checked::after,
[id^="account-"] .us-form-checkbox-input:checked::after,
.simplecheckout input:checked::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 6px;
	width: 5px;
	height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

.us-flt .ocf-option-values input:focus-visible,
#product-search .us-form-checkbox-input:focus-visible,
[id^="account-"] .us-form-checkbox-input:focus-visible,
.simplecheckout input:focus-visible {
	outline: 2px solid #1f7ae0;
	outline-offset: 2px;
}

.us-flt .ocf-option-values input:disabled,
.simplecheckout input[type="checkbox"]:disabled,
.simplecheckout input[type="radio"]:disabled {
	border-color: #e3e8ee;
	background: #f2f3f5;
	box-shadow: none;
	cursor: default;
}

/* --- Размер: выпадающие списки -------------------------------- */
.us-flt__drop {
	position: relative;
}

.us-flt__drop .ocf-option-name {
	display: flex !important;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 0 34px 0 14px !important;
	border: 1px solid #e3e8ee !important;
	border-radius: 10px !important;
	background: #fff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

.us-flt__drop .ocf-option-name::after {
	right: 14px;
	top: 16px;
}

.us-flt__drop.is-folded .ocf-option-name::after {
	top: 19px;
}

.us-flt__drop-sel {
	margin-left: auto;
	color: #1f7ae0;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 50%;
}

.us-flt__drop .ocf-option-values {
	margin-top: 6px;
}

.us-flt__drop-body {
	padding: 12px;
	border: 1px solid #e3e8ee;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 10px 24px rgba(27, 40, 56, .1);
}

.us-flt__drop-cap {
	margin: 10px 0 4px;
	color: #1b2838;
	font-size: 13px;
	font-weight: 700;
}

.us-flt__drop .us-flt__values {
	max-height: 230px;
}

/* --- Классы европейской этикетки ------------------------------ */
.us-flt .ocf-option-values .us-grade {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 22px;
	padding: 0 6px;
	border-radius: 6px;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
}

/* --- ночь ------------------------------------------------------ */
html[data-theme="dark"] .us-flt .ocf-option-values input[type="checkbox"],
html[data-theme="dark"] .us-flt .ocf-option-values input[type="radio"],
html[data-theme="dark"] #product-search .us-form-checkbox-input,
html[data-theme="dark"] [id^="account-"] .us-form-checkbox-input,
html[data-theme="dark"] .simplecheckout input[type="checkbox"],
html[data-theme="dark"] .simplecheckout input[type="radio"] {
	border-color: #3a4a5c;
	background: linear-gradient(180deg, #1f2b39 0%, #18222e 100%);
	box-shadow: none;
}

html[data-theme="dark"] .us-flt .ocf-option-values input:checked,
html[data-theme="dark"] #product-search .us-form-checkbox-input:checked,
html[data-theme="dark"] [id^="account-"] .us-form-checkbox-input:checked,
html[data-theme="dark"] .simplecheckout input:checked {
	border-color: #1f7ae0;
	background: linear-gradient(180deg, #2d8ef0 0%, #1f7ae0 100%);
}

html[data-theme="dark"] .us-flt .ocf-option-values input:disabled {
	border-color: #27333f;
	background: #141c26;
}

html[data-theme="dark"] .us-flt__drop .ocf-option-name {
	border-color: #27333f !important;
	background: #141c26 !important;
}

html[data-theme="dark"] .us-flt__drop-body {
	border-color: #27333f;
	background: #18222e;
}

html[data-theme="dark"] .us-flt__drop-cap {
	color: #e4e9ef;
}

/* Уголок у заголовка: закрытая секция — «вниз», открытая — «вверх». */
.us-flt .ocf-option-name::after {
	transform: rotate(-135deg);
	top: 9px;
}

.us-flt .is-folded .ocf-option-name::after {
	transform: rotate(45deg);
	top: 6px;
}

.us-flt__drop .ocf-option-name::after {
	top: 18px;
}

.us-flt__drop.is-folded .ocf-option-name::after {
	top: 15px;
}

/* Подсказка темы с числом товаров у каждого значения больше
   не нужна: то же самое пишет кнопка внизу панели. Подсказку
   цены («указать цену») не трогаем — у неё свой класс. */
.popover.ocfilter-option-popover {
	display: none !important;
}

/* Заголовки внутри списка значений: «Популярные» и «Все». */
.us-flt__cap {
	position: sticky;
	top: 0;
	z-index: 2;
	margin: 6px 0 2px;
	padding: 4px 0;
	background: #fff;
	color: #1b2838;
	font-size: 13px;
	font-weight: 700;
}

.us-flt__cap:first-child {
	margin-top: 0;
}

/* Кнопка «показать» должна быть выше списков и подсказок. */
.us-flt #ocfilter-button.is-on {
	z-index: 20;
}

.us-flt .ocfilter-option {
	position: relative;
	z-index: 1;
}

.us-flt__drop-body {
	position: relative;
	z-index: 3;
}

html[data-theme="dark"] .us-flt__cap {
	background: #18222e;
	color: #e4e9ef;
}

/* --- Значки осей --------------------------------------------- */
/* Двухцветные, поэтому картинкой, а не маской: кузов серый,
   нужное колесо нашим синим. */
.us-ico--axle-front,
.us-ico--axle-rear,
.us-ico--axle-both {
	display: inline-block;
	width: 30px;
	height: 15px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	-webkit-mask-image: none;
	mask-image: none;
}

.us-ico--axle-front {
	background-image: url("../img/veh-axle-front.svg");
}

.us-ico--axle-rear {
	background-image: url("../img/veh-axle-rear.svg");
}

/* оба колеса подкрашены: размер идёт на любую ось */
.us-ico--axle-both {
	background-image: url("../img/veh-axle-both.svg");
}

/* Заводские сочетания: подпись выделяем синим — это не просто
   «популярное», а то, что предусмотрел производитель. */
.us-flt__cap--factory {
	color: #2d8ef0;
}

/* --- Подбор разношироких в фильтре ---------------------------- */
.us-flt__stagger {
	margin-bottom: 14px;
}

.us-flt__switch {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #1b2838;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.us-flt__switch input {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	border: 1.5px solid #d7dde5;
	border-radius: 7px;
	background: linear-gradient(180deg, #fff 0%, #f7f8fa 100%);
	box-shadow: 0 1px 2px rgba(27, 40, 56, .08), inset 0 1px 0 #fff;
	position: relative;
	cursor: pointer;
}

.us-flt__switch input:checked {
	border-color: #1f7ae0;
	background: linear-gradient(180deg, #2d8ef0 0%, #1f7ae0 100%);
	box-shadow: 0 3px 8px rgba(31, 122, 224, .35);
}

.us-flt__switch input:checked::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 6px;
	width: 5px;
	height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

.us-flt__axles {
	display: none;
	margin-top: 12px;
}

.us-flt__pane.is-stagger .us-flt__axles {
	display: block;
}

/* при подборе по осям обычные списки размера не нужны,
   а свои списки осей (.us-flt__pick) остаются */
.us-flt__pane.is-stagger .us-flt__drop:not(.us-flt__pick) {
	display: none;
}

.us-flt__axle + .us-flt__axle {
	margin-top: 10px;
}

.us-flt__axle-name {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	color: #5c6673;
	font-size: 13px;
	font-weight: 600;
}

select.us-flt__axle-size {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff;
	color: #1b2838;
	font-size: 14px;
	font-weight: 600;
}

html a.us-flt__axle-go {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	margin-top: 12px;
	border-radius: 10px;
	background: #1f7ae0;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s ease;
}

html a.us-flt__axle-go:hover {
	background: #1765bd;
	color: #fff;
	text-decoration: none;
}

html[data-theme="dark"] .us-flt__switch {
	color: #e4e9ef;
}

html[data-theme="dark"] select.us-flt__axle-size {
	border-color: #27333f;
	background: #141c26;
	color: #e4e9ef;
}

/* --- Страница разношироких шин ------------------------------- */
.us-stagger {
	padding: 22px 24px 28px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .03);
}

/* подбор можно пересобрать прямо на странице */
.us-stagger__pick {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 22px;
	padding: 16px 18px;
	border-radius: 12px;
	background: #f7f8fa;
}

.us-stagger__axle-name {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	color: #5c6673;
	font-size: 13px;
	font-weight: 600;
}

select.us-stagger__size {
	width: 180px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff;
	color: #1b2838;
	font-size: 14px;
	font-weight: 600;
}

html button.us-stagger__go {
	height: 42px;
	padding: 0 22px;
	border: 0;
	border-radius: 10px;
	background: #1f7ae0;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	transition: background .15s ease;
}

html button.us-stagger__go:hover {
	background: #1765bd;
}

/* --- карточка модели ----------------------------------------- */
.us-stagger__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.us-stagger__card {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 20px;
	padding: 16px 18px;
	border: 1px solid #e3e8ee;
	border-radius: 12px;
	background: #fff;
}

.us-stagger__media {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.us-stagger__season {
	position: absolute;
	top: 0;
	left: 0;
	width: 26px;
	height: 26px;
}

.us-stagger__photo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 150px;
	padding: 6px;
	border-radius: 10px;
	background: #fff;
}

.us-stagger__photo img {
	max-width: 100%;
	max-height: 100%;
}

html a.us-stagger__name {
	color: #1b2838;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

html a.us-stagger__name:hover {
	color: #1f7ae0;
}

.us-stagger__rating {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* --- оси ------------------------------------------------------ */
.us-stagger__axles {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.us-stagger__side + .us-stagger__side {
	padding-top: 14px;
	border-top: 1px solid #e3e8ee;
}

.us-stagger__side-name {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	color: #5c6673;
	font-size: 13px;
	font-weight: 700;
}

.us-stagger__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 6px 0;
}

html a.us-stagger__size-link {
	color: #1f7ae0;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

html a.us-stagger__size-link:hover {
	text-decoration: underline;
}

.us-stagger__marks {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
	color: #5c6673;
	font-size: 13px;
}

.us-stagger__mark {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.us-stagger__mark img {
	width: 16px;
	height: 11px;
	border-radius: 2px;
}

.us-stagger__price {
	color: #1b2838;
	font-size: 17px;
	font-weight: 800;
	white-space: nowrap;
}

html a.us-stagger__buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 10px;
	background: #2fa84f;
	transition: background .15s ease;
}

html a.us-stagger__buy:hover {
	background: #268c42;
}

.us-stagger__buy .us-card__cart-ico {
	background-color: #fff;
}

.us-stagger__empty {
	padding: 28px 0;
	color: #5c6673;
	font-size: 15px;
}

@media (max-width: 767px) {
	.us-stagger__card {
		grid-template-columns: minmax(0, 1fr);
	}

	.us-stagger__row {
		flex-wrap: wrap;
	}

	select.us-stagger__size {
		width: 100%;
	}
}

/* --- ночь ------------------------------------------------------ */
html[data-theme="dark"] .us-stagger,
html[data-theme="dark"] .us-stagger__card {
	background: #18222e;
}

html[data-theme="dark"] .us-stagger__card,
html[data-theme="dark"] .us-stagger__side + .us-stagger__side {
	border-color: #27333f;
}

html[data-theme="dark"] .us-stagger__pick {
	background: #1f2b39;
}

html[data-theme="dark"] a.us-stagger__name,
html[data-theme="dark"] .us-stagger__price {
	color: #e4e9ef;
}

html[data-theme="dark"] select.us-stagger__size {
	border-color: #27333f;
	background: #141c26;
	color: #e4e9ef;
}

/* У .us-ico базовая заливка цветом (значки рисуются маской) —
   у двухцветных значков осей она закрашивала картинку. */
.us-ico--axle-front,
.us-ico--axle-rear,
.us-ico--axle-both {
	background-color: transparent;
}

/* Три связанных списка на ось: ширина, профиль, диаметр. */
.us-flt__axle-part {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	color: #5c6673;
	font-size: 13px;
	font-weight: 600;
}

.us-flt__axle-part span {
	width: 64px;
	flex: 0 0 auto;
}

.us-flt__axle-part select {
	flex: 1 1 auto;
	min-width: 0;
	height: 38px;
	padding: 0 10px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff;
	color: #1b2838;
	font-size: 14px;
	font-weight: 600;
}

.us-flt__axle + .us-flt__axle {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #e3e8ee;
}

html[data-theme="dark"] .us-flt__axle-part select {
	border-color: #27333f;
	background: #141c26;
	color: #e4e9ef;
}

html[data-theme="dark"] .us-flt__axle + .us-flt__axle {
	border-color: #27333f;
}

/* Списки подбора по осям — тот же вид, что у списков размера.
   Разница только в том, что выбор одиночный. */
.us-flt__pick {
	padding: 0 0 10px !important;
	border-top: 0 !important;
}

.us-flt__pick .ocf-option-name {
	min-height: 40px;
}

.us-flt__pick .us-flt__values {
	max-height: 210px;
}

.us-flt__stagger.is-incomplete .us-flt__pick .ocf-option-name {
	border-color: #e01b1b !important;
}

.us-flt__axle-name {
	margin-bottom: 8px;
}

/* Круглые отметки и вид выбранного значения — одинаковые и в обычных
   списках размера, и в подборе по осям. */
.us-flt__drop .ocf-option-values input[type="checkbox"] {
	border-radius: 50%;
}

/* Части размера в форме на странице разношироких идут в ряд. */
.us-stagger__parts {
	display: flex;
	gap: 8px;
}

select.us-stagger__size {
	width: 120px;
}

@media (max-width: 767px) {
	.us-stagger__parts {
		flex-wrap: wrap;
	}

	select.us-stagger__size {
		width: 100%;
	}
}

/* Подсказка о том, что выдача урезана. */
.us-stagger__note {
	margin-bottom: 14px;
	padding: 10px 14px;
	border-radius: 10px;
	background: #eef1f5;
	color: #5c6673;
	font-size: 13px;
}

html[data-theme="dark"] .us-stagger__note {
	background: #1f2b39;
	color: #93a0ae;
}

/* Вид галочки «разноширокие» ведём от состояния вкладки, а не от
   самого поля: щелчок по полю мы отрабатываем сами. */
.us-flt__pane.is-stagger .us-flt__switch input {
	border-color: #1f7ae0;
	background: linear-gradient(180deg, #2d8ef0 0%, #1f7ae0 100%);
	box-shadow: 0 3px 8px rgba(31, 122, 224, .35);
}

.us-flt__pane.is-stagger .us-flt__switch input::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 6px;
	width: 5px;
	height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

/* Выбранное значение в кнопке оставляем только у подбора по осям:
   в обычном фильтре выбранное и так перечислено в блоке «Вы выбрали». */
.us-flt__drop:not(.us-flt__pick) .us-flt__drop-sel {
	display: none;
}

/* --- Блок «Вы выбрали» ---------------------------------------- */
.us-flt .selected-options {
	margin: 0 0 14px !important;
	padding: 14px !important;
	border-radius: 12px;
	background: #f7f8fa !important;
}

.us-flt .selected-options .ocfilter-option span {
	display: block;
	margin-bottom: 6px;
	color: #5c6673;
	font-size: 13px;
	font-weight: 600;
}

/* important — у темы кнопка идёт с border-radius: 0 в самом теге */
html .us-flt .selected-options button.btn-block {
	height: 38px;
	border-radius: 10px !important;
	background: #fdf0ef;
	color: #e01b1b;
	font-size: 13px;
	font-weight: 700;
}

html .us-flt .selected-options button.btn-block:hover {
	background: #e01b1b;
	color: #fff;
}

html[data-theme="dark"] .us-flt .selected-options {
	background: #1f2b39 !important;
}

html[data-theme="dark"] .us-flt .selected-options button.btn-block {
	background: #2a1f23;
}

/* У темы блок выбранного идёт с острыми углами через !important. */
.us-flt .selected-options {
	border-radius: 12px !important;
}

/* Тема красит блок выбранного через #column-left с !important —
   перебить можно только такой же весомостью. */
#column-left .us-flt .list-group-item.selected-options,
#column-right .us-flt .list-group-item.selected-options {
	padding: 14px !important;
	border-radius: 12px !important;
	background: #f7f8fa !important;
}

html[data-theme="dark"] #column-left .us-flt .list-group-item.selected-options,
html[data-theme="dark"] #column-right .us-flt .list-group-item.selected-options {
	background: #1f2b39 !important;
}


/* --- Страница результатов поиска ------------------------------ */
/* Тема рисует здесь зелёную кнопку и серые поля. Приводим
   к нашему: поля как в фильтре, галочка та же, что в фильтре
   (её вид дописан в общие правила выше), кнопка синяя. */
#product-search .control-label {
	margin-bottom: 8px;
	color: #6b7280;
	font-size: 13px;
	font-weight: 600;
}

#product-search #input-search,
#product-search .us-acc-select {
	height: 44px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
	color: #1b2838;
	font-size: 14px;
}

#product-search #input-search:focus,
#product-search .us-acc-select:focus {
	border-color: #1f7ae0;
	box-shadow: 0 0 0 3px rgba(31, 122, 224, .12);
}

#product-search .us-search-block {
	align-items: center;
	margin-top: 14px;
}

#product-search .us-form-checkbox-group {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 12px;
}

/* Тема прячет сам input и рисует квадрат через label:before,
   а птичку — значком из шрифта. Возвращаем input (его вид задан
   выше, вместе с галочками фильтра) и убираем подделку. */
#product-search .us-form-checkbox-group .us-form-checkbox-input {
	display: inline-block;
}

#product-search .us-form-checkbox-group label:before,
#product-search .us-form-checkbox-input:checked + label:after {
	content: none;
	display: none;
}

#product-search .us-form-checkbox-group label {
	margin: 0;
	color: #1b2838;
	font-size: 14px;
	cursor: pointer;
}

html #product-search #button-search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 26px;
	border: 0;
	border-radius: 10px;
	background: #1f7ae0;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	transition: background .15s ease;
}

html #product-search #button-search:hover {
	background: #1765bd;
	color: #fff;
}

html[data-theme="dark"] #product-search #input-search,
html[data-theme="dark"] #product-search .us-acc-select {
	border-color: #27333f;
	background: #1f2b39;
	color: #e4e9ef;
}

html[data-theme="dark"] #product-search .us-form-checkbox-group label {
	color: #e4e9ef;
}


/* --- Сезоны на странице разношироких -------------------------- */
/* Тот же набор, что в шапке, но с количеством: выбор сужает уже
   найденную выдачу, поэтому число сразу говорит, есть ли там что. */
.us-stagger__seasons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.us-stagger .us-stagger__season-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 14px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff;
	color: #1b2838;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.us-stagger .us-stagger__season-chip:hover {
	border-color: #c7ced7;
	color: #1b2838;
	text-decoration: none;
}

.us-stagger .us-stagger__season-chip.is-on {
	border-color: #1f7ae0;
	background: #1f7ae0;
	color: #fff;
}

.us-stagger__season-ico {
	width: 18px;
	height: 18px;
}

/* на выбранной кнопке значок сезона снят белым — иначе цветная
   картинка на синем выглядит грязно */
.us-stagger__season-chip.is-on .us-stagger__season-ico {
	filter: brightness(0) invert(1);
}

.us-stagger__season-count {
	padding: 1px 7px;
	border-radius: 20px;
	background: #eef1f5;
	color: #6b7280;
	font-size: 12px;
	font-weight: 700;
}

.us-stagger__season-chip.is-on .us-stagger__season-count {
	background: rgba(255, 255, 255, .25);
	color: #fff;
}

html[data-theme="dark"] .us-stagger .us-stagger__season-chip {
	border-color: #27333f;
	background: #16202b;
	color: #e4e9ef;
}

html[data-theme="dark"] .us-stagger__season-count {
	background: #1f2b39;
	color: #8b97a6;
}


@media (max-width: 575px) {
	/* Строка поиска в шапке на телефоне шире экрана (вёрстка темы),
	   поэтому список держим в пределах окна сами. */
	.us-head__search #us_livesearch {
		max-width: calc(100vw - 20px);
	}

	.us-ls__item {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 8px 10px;
	}

	.us-ls__side {
		width: 100%;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		gap: 8px;
	}
}


/* --- Сортировка на странице подбора по авто -------------------- */
/* У темы здесь ряд с подписью сверху и полем Bootstrap: поле серое,
   со скруглением 2px, и ряд вплотную к карточкам. Приводим
   к сортировке каталога: подпись в строку, поле наше, снизу
   отступ, чтобы блок не слипался с превью. */
#content .us-category-sorting {
	gap: 14px;
	margin-bottom: 18px;
}

#content .us-category-sorting-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

#content .us-category-sorting-item > span {
	color: #6b7280;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

html #content .us-category-sorting-item select {
	width: auto;
	min-width: 190px;
	height: 36px;
	padding: 0 34px 0 12px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231b2838' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
	box-shadow: none;
	color: #1b2838;
	font-size: 13px;
	font-weight: 600;
	appearance: none;
	-webkit-appearance: none;
}

html #content .us-category-sorting-item select:hover {
	border-color: #cfd6e0;
}

#content .us-category-results {
	color: #6b7280;
	font-size: 13px;
}

html[data-theme="dark"] #content .us-category-sorting-item select {
	border-color: #27333f;
	background-color: #1f2b39;
	color: #e4e9ef;
}


/* --- Окно авторизации ----------------------------------------- */
/* Общий вид окна берётся из правил наших модальных окон выше,
   здесь только то, что есть лишь в этом окне. */
#loginModal .modal-body {
	padding: 20px;
}

#loginModal .popup-login-form-group {
	margin-bottom: 12px;
}

#loginModal .login-popup-links {
	margin: 14px 0 18px;
}

#loginModal .login-popup-links a {
	color: #1f7ae0;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

#loginModal .login-popup-links a:hover {
	color: #1765bd;
	text-decoration: underline;
}

#loginModal button.us-module-btn {
	width: 100%;
}

/* Вход через соцсети рисует сторонний модуль (socnetauth2):
   разметку не трогаем, только приводим к нашему виду —
   подпись как у наших заголовков-меток, значки плашками. */
#loginModal .sna_header {
	margin: 4px 0 10px;
	color: #6b7280;
	font-size: 13px;
	font-weight: 600;
}

#loginModal .sna_icons ul {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#loginModal .sna_icons li {
	margin: 0;
	float: none;
}

#loginModal .sna_icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid #e3e8ee;
	border-radius: 12px;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}

#loginModal .sna_icons a:hover {
	border-color: #c7ced7;
	box-shadow: 0 4px 10px rgba(27, 40, 56, .1);
}

#loginModal .sna_icons img {
	width: 26px;
	height: 26px;
	border-radius: 6px;
}

#loginModal .sna_icons br {
	display: none;
}

html[data-theme="dark"] #loginModal .sna_icons a {
	border-color: #27333f;
	background: #1f2b39;
}


/* --- Формы раздела «Аккаунт» ---------------------------------- */
/* Регистрация, вход, восстановление пароля, правка данных —
   всё собрано из одних и тех же классов темы, поэтому правим
   разом: привязка к контейнеру страницы (id вида account-*).
   Поля ставим в две колонки: в одну они растягивались на всю
   ширину блока, и короткое «Имя» выглядело полем для адреса. */
[id^="account-"] .us-content-register-text {
	margin-bottom: 20px;
	color: #5c6673;
	font-size: 14px;
}

[id^="account-"] .us-content-register-text a {
	color: #1f7ae0;
	font-weight: 600;
	text-decoration: none;
}

[id^="account-"] .us-content-register-text a:hover {
	text-decoration: underline;
}

[id^="account-"] fieldset {
	margin-bottom: 8px;
}

[id^="account-"] .form-group {
	margin-bottom: 14px;
}

[id^="account-"] .form-group > label {
	display: block;
	margin-bottom: 6px;
	color: #6b7280;
	font-size: 13px;
	font-weight: 600;
}

[id^="account-"] .form-group > label .required {
	margin-right: 4px;
	color: #e01b1b;
}

[id^="account-"] .form-control {
	height: 44px;
	padding: 0 14px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
	color: #1b2838;
	font-size: 14px;
}

[id^="account-"] textarea.form-control {
	height: auto;
	padding: 12px 14px;
}

[id^="account-"] .form-control:focus {
	border-color: #1f7ae0;
	box-shadow: 0 0 0 3px rgba(31, 122, 224, .12);
}

[id^="account-"] .form-control::placeholder {
	color: #a7aeb8;
}

/* две колонки с 768px: скрытые группы (d-none у групп покупателей)
   в сетку не попадают, они display: none */
@media (min-width: 768px) {
	[id^="account-"] fieldset {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 20px;
	}

	[id^="account-"] legend.us-content-title,
	[id^="account-"] .us-form-check-group-acc {
		grid-column: 1 / -1;
	}
}

/* --- согласие с условиями и кнопка --------------------------- */
[id^="account-"] .us-form-checkbox-group {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 6px 0 0;
}

[id^="account-"] .us-form-checkbox-group .us-form-checkbox-input {
	display: inline-block;
}

[id^="account-"] .us-form-checkbox-group label:before,
[id^="account-"] .us-form-checkbox-input:checked + label:after {
	content: none;
	display: none;
}

[id^="account-"] .us-form-checkbox-group label {
	margin: 0;
	color: #1b2838;
	font-size: 14px;
	cursor: pointer;
}

[id^="account-"] .us-form-checkbox-group label a {
	color: #1f7ae0;
	font-weight: 600;
}

/* Кнопки: главную выдаёт класс us-module-btn-green (у темы она
   зелёная), остальные — второстепенные. По тегу различать нельзя:
   на входе действие оформлено ссылкой, на восстановлении — полем. */
[id^="account-"] .btn-group {
	gap: 10px;
	margin-top: 18px;
}

html [id^="account-"] .us-module-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 22px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background-color: #f7f8fa;
	color: #5c6673 !important;
	font-size: 14px;
	font-weight: 600;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

html [id^="account-"] .us-module-btn:hover {
	border-color: #c7ced7;
	background-color: #eef1f5;
	color: #1b2838 !important;
}

html [id^="account-"] .us-module-btn.us-module-btn-green {
	padding: 0 26px;
	border: 0;
	background-color: #1f7ae0;
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
}

html [id^="account-"] .us-module-btn.us-module-btn-green:hover {
	background-color: #1765bd;
	color: #fff !important;
}

/* --- страница входа ------------------------------------------- */
/* Заголовки колонок здесь обычным div, а не legend. */
[id^="account-"] .us-content-title {
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eef1f5;
	color: #1b2838;
	font-size: 16px;
	font-weight: 700;
}

[id^="account-"] .us-acc-info-link {
	color: #1f7ae0;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

[id^="account-"] .us-acc-info-link:hover {
	text-decoration: underline;
}

html[data-theme="dark"] [id^="account-"] .form-control {
	border-color: #27333f;
	background: #1f2b39;
	color: #e4e9ef;
}

html[data-theme="dark"] [id^="account-"] .us-content-title {
	border-bottom-color: #27333f;
	color: #e4e9ef;
}

html[data-theme="dark"] [id^="account-"] label.radio-inline,
html[data-theme="dark"] [id^="account-"] .us-form-checkbox-group label {
	color: #e4e9ef;
}


/* --- Популярные типоразмеры ----------------------------------- */
/* Страница-указатель: карточка размера, в ней сезоны и бренды.
   Карточки идут в две колонки — список из четырнадцати размеров
   в одну колонку растягивал страницу на три экрана. */
.us-sizes__lead {
	margin: 0 0 18px;
	color: #6b7280;
	font-size: 14px;
}

.us-sizes__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

@media (min-width: 992px) {
	.us-sizes__list {
		grid-template-columns: 1fr 1fr;
	}
}

.us-sizes__card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 20px;
	border: 1px solid #e3e8ee;
	border-radius: 12px;
	background: #fff;
}

.us-sizes__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.us-sizes .us-sizes__name {
	color: #1b2838;
	font-size: 22px;
	font-weight: 800;
	text-decoration: none;
}

.us-sizes .us-sizes__name:hover {
	color: #1f7ae0;
	text-decoration: none;
}

/* Кнопка перехода к товарам: зелёная, как кнопка покупки в превью,
   и квадратная со скруглением — круглых кнопок в стилистике нет. */
.us-sizes .us-sizes__go {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #2fa84f;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
	transition: background .15s ease;
}

.us-sizes .us-sizes__go:hover {
	background: #268a41;
	color: #fff;
}

/* Ряд карточки: снимок, сезоны, справа бренды — так в присланной
   структуре, и карточка не растёт в высоту. */
.us-sizes__body {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	flex-wrap: wrap;
}

.us-sizes__photo {
	flex: 0 0 88px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
}

.us-sizes__photo img {
	max-width: 100%;
	height: auto;
}

.us-sizes__col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.us-sizes__col--season {
	flex: 0 0 auto;
}

.us-sizes__col--brands {
	flex: 1 1 220px;
	min-width: 200px;
}

.us-sizes__label {
	color: #6b7280;
	font-size: 13px;
	font-weight: 600;
}

.us-sizes .us-sizes__season {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #1b2838;
	font-size: 14px;
	text-decoration: none;
}

.us-sizes .us-sizes__season:hover .us-sizes__season-name {
	color: #1f7ae0;
}

.us-sizes__season-ico {
	width: 18px;
	height: 18px;
}

.us-sizes__season-count {
	color: #8a8f98;
	font-size: 12px;
}

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

.us-sizes .us-sizes__brand {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 12px;
	border: 1px solid #e3e8ee;
	border-radius: 20px;
	background: #fff;
	color: #1f7ae0;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.us-sizes a.us-sizes__brand:hover {
	border-color: #1f7ae0;
	background: #1f7ae0;
	color: #fff;
	text-decoration: none;
}

.us-sizes-empty {
	margin: 0;
	color: #6b7280;
	font-size: 14px;
}

@media (max-width: 575px) {
	.us-sizes__card {
		padding: 16px;
	}

	.us-sizes__body {
		gap: 14px;
	}

	.us-sizes__photo {
		flex-basis: 72px;
		width: 72px;
	}
}

html[data-theme="dark"] .us-sizes__card {
	border-color: #27333f;
	background: #16202b;
}

html[data-theme="dark"] .us-sizes .us-sizes__name,
html[data-theme="dark"] .us-sizes .us-sizes__season {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-sizes .us-sizes__brand {
	border-color: #27333f;
	background: #16202b;
	color: #4da3f5;
}


/* --- Результат подбора по авто в фильтре ---------------------- */
/* Было просто подчёркнутыми ссылками списком, и у разношироких
   машин перед с задом читались как «любой из двух на выбор».
   Теперь комплект — одна плашка с двумя осями, одиночный размер —
   обычный чип. */
.us-pickres {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 4px;
}

.us-pickres__label {
	display: block;
	margin-bottom: 7px;
	color: #6b7280;
	font-size: 12px;
	font-weight: 600;
}

.us-pickres__items {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.us-flt .us-pickres__size {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 11px;
	border: 1px solid #e3e8ee;
	border-radius: 8px;
	background: #fff;
	color: #1f7ae0;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.us-flt .us-pickres__size:hover {
	border-color: #1f7ae0;
	background: #1f7ae0;
	color: #fff;
	text-decoration: none;
}

/* Разноширокий комплект: перед и зад в одной плашке — это один
   комплект, а не выбор из двух. */
.us-flt .us-pickres__pair {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 100%;
	padding: 9px 11px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff;
	color: #1b2838;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.us-flt .us-pickres__pair:hover {
	border-color: #1f7ae0;
	box-shadow: 0 4px 10px rgba(31, 122, 224, .12);
	color: #1b2838;
	text-decoration: none;
}

.us-pickres__axle {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
}

html[data-theme="dark"] .us-flt .us-pickres__size,
html[data-theme="dark"] .us-flt .us-pickres__pair {
	border-color: #27333f;
	background: #1f2b39;
}

html[data-theme="dark"] .us-flt .us-pickres__size {
	color: #4da3f5;
}

html[data-theme="dark"] .us-flt .us-pickres__pair,
html[data-theme="dark"] .us-pickres__axle {
	color: #e4e9ef;
}


/* --- Свои блоки главной --------------------------------------- */
/* Каждый блок — белая плашка, как остальные на сайте. */
.us-home__block {
	margin-bottom: 14px;
	padding: 22px 24px;
	border: 1px solid #e3e8ee;
	border-radius: 12px;
	background: #fff;
}

.us-home__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}

.us-home__title {
	margin: 0 0 16px;
	color: #1b2838;
	font-size: 22px;
	font-weight: 800;
}

.us-home__head .us-home__title {
	margin: 0;
}

.us-home .us-home__more,
a.us-home__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #1f7ae0;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

a.us-home__more:hover {
	color: #1765bd;
	text-decoration: none;
}

.us-home__more i {
	font-size: 11px;
	transition: transform .15s ease;
}

a.us-home__more:hover i {
	transform: translateX(3px);
}

.us-home__sub {
	display: block;
	margin-top: 4px;
	color: #6b7280;
	font-size: 13px;
}

/* --- шапка блока: значок, название, описание ------------------ */
/* Раскладка та же, что у блоков карточки товара (us-terms__head):
   значок слева на две строки, название и описание справа. Часть
   блоков главной была без значка и без описания и выпадала
   из общего вида. */
.us-home__head-main {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 12px;
	min-width: 0;
}

.us-home__ico {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 26px;
	height: 26px;
	background: #1b2838;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.us-home__head-main .us-home__title {
	grid-column: 2;
	grid-row: 1;
}

.us-home__head-main .us-home__sub {
	grid-column: 2;
	grid-row: 2;
}

.us-home__ico--best {
	-webkit-mask-image: url("../img/ico-best.svg");
	mask-image: url("../img/ico-best.svg");
}

/* --- полоса «популярные шины» -------------------------------- */
/* Ровно четыре карточки в видимой части, шаг стрелок — вся полоса:
   получается три «свайпа» на двенадцать карточек. Устройство то же,
   что у полосы просмотренных, включая протяжку мышью (us-drag.js).
   scroll-snap здесь не ставим: при протяжке браузер подтягивает
   полосу к границе ячейки на каждом шаге, и ход получается рывками. */
.us-top__tools {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}

.us-top__scroll {
	display: flex;
	gap: 14px;
	padding-bottom: 12px;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: #c7ced7 transparent;
}

.us-top__cell {
	flex: 0 0 calc((100% - 42px) / 4);
	display: flex;
	min-width: 0;
}

/* в полосе карточке не нужны ни отступ ряда сетки, ни высота строки */
.us-top__cell .us-card {
	width: 100%;
	height: auto;
	margin-bottom: 0;
}

@media (max-width: 991px) {
	.us-top__cell {
		flex-basis: calc((100% - 14px) / 2);
	}
}

@media (max-width: 575px) {
	.us-top__cell {
		flex-basis: 78%;
	}
}

/* --- разделы по назначению ----------------------------------- */
/* --- шины по назначению: плашка с картинкой ------------------- */
/* Устройство то же, что у «помочь с выбором» на карточке товара:
   картинка сбоку, текст и кнопки в теле. Блок был голым списком
   кнопок под заголовком и выпадал из ряда остальных. */
.us-types__plate {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 24px;
	border-radius: 14px;
	background: #f7f8fa;
	overflow: hidden;
}

.us-types__body {
	flex: 1 1 auto;
	min-width: 0;
}

/* Картинка в плашке, а не навылет: прозрачные шины упирались бы
   в края. Ширина долей — на узком экране ужимается вместе с ней. */
.us-types__img {
	flex: 0 0 auto;
	width: 30%;
	max-width: 220px;
	height: auto;
	margin: 0;
}

.us-types__plate .us-home__title {
	margin: 0;
}

.us-types__text {
	margin: 6px 0 16px;
	max-width: 52ch;
	color: #5c6673;
	font-size: 13px;
	line-height: 1.5;
}

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

.us-types .us-types__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 46px;
	padding: 0 20px;
	border: 1px solid #e3e8ee;
	border-radius: 12px;
	background: #f7f8fa;
	color: #1b2838;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.us-types .us-types__btn:hover {
	border-color: #1f7ae0;
	background: #fff;
	color: #1f7ae0;
	text-decoration: none;
}

/* первая кнопка — «все шины», она же главная */
.us-types .us-types__btn:first-child {
	border-color: #1b2838;
	background: #1b2838;
	color: #fff;
}

.us-types .us-types__btn:first-child:hover {
	border-color: #25374d;
	background: #25374d;
	color: #fff;
}

.us-types__btn .us-ico {
	width: 26px;
	height: 26px;
}

/* --- SEO-текст ----------------------------------------------- */
/* Свёрнут до четырёх строк с мягким затуханием: на главной это
   текст для поиска, а не чтение в первую очередь. */
.us-seo__text {
	position: relative;
	max-height: 190px;
	overflow: hidden;
	color: #4b5563;
	font-size: 14px;
	line-height: 1.65;
}

.us-seo__text:after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 70px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 85%);
	pointer-events: none;
}

.us-seo.is-open .us-seo__text {
	max-height: none;
}

.us-seo.is-open .us-seo__text:after {
	display: none;
}

.us-seo__text h3 {
	margin: 18px 0 8px;
	font-size: 16px;
	font-weight: 700;
}

.us-seo__text p {
	margin: 0 0 10px;
}

.us-seo__text a {
	color: #1f7ae0;
	font-weight: 600;
}

html .us-seo__more {
	margin-top: 12px;
	padding: 0;
	border: 0;
	border-bottom: 1px dashed #c7ced7;
	background: none;
	color: #1f7ae0;
	font-size: 14px;
	font-weight: 600;
}

html .us-seo__more:hover {
	border-bottom-color: #1f7ae0;
}

@media (max-width: 575px) {
	.us-home__block {
		padding: 18px 16px;
	}

	.us-home__title {
		font-size: 19px;
	}

	.us-types .us-types__btn {
		height: 42px;
		padding: 0 14px;
		font-size: 14px;
	}

	/* на узком экране картинка идёт над текстом и во всю ширину:
	   сбоку от неё кнопкам осталась бы треть строки */
	.us-types__plate {
		flex-direction: column;
		align-items: stretch;
		padding: 18px;
	}

	.us-types__img {
		order: -1;
		width: 70%;
		max-width: 260px;
		align-self: center;
	}
}

html[data-theme="dark"] .us-home__block {
	border-color: #27333f;
	background: #16202b;
}

html[data-theme="dark"] .us-types__plate {
	background: #1b2530;
}

html[data-theme="dark"] .us-types__text {
	color: #93a0ae;
}

html[data-theme="dark"] .us-home__ico {
	background: #e4e9ef;
}

html[data-theme="dark"] .us-home__title,
html[data-theme="dark"] .us-seo__text h3 {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-types .us-types__btn {
	border-color: #27333f;
	background: #1f2b39;
	color: #e4e9ef;
}

/* главная кнопка и ночью должна читаться первой */
html[data-theme="dark"] .us-types .us-types__btn:first-child {
	border-color: #e4e9ef;
	background: #2b3a4c;
	color: #fff;
}

html[data-theme="dark"] .us-types .us-types__btn:first-child:hover {
	border-color: #fff;
	background: #35475c;
	color: #fff;
}

html[data-theme="dark"] .us-seo__text {
	color: #b9c2cd;
}

html[data-theme="dark"] .us-seo__text:after {
	background: linear-gradient(180deg, rgba(22, 32, 43, 0) 0%, #16202b 85%);
}


/* ============ Кнопка фильтра в строке сортировки ============ */
/* Тема ставила её отдельной зелёной полосой во всю ширину над
   витриной. Переносит кнопку в строку с сортировкой us-filter.js,
   здесь только вид: обычная кнопка в нашем тёмном, слева в строке,
   сортировка и число товаров остаются справа. */
.us-category-sort-block {
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* Ниже 768 тема растягивала сортировку на всю строку
   (`responsive.css`), из-за чего селекты уезжали влево. */
.us-category-sort-block .sort-limit {
	display: flex;
	justify-content: flex-end;
	width: auto;
}

.us-category-sort-block .static_button_ocfilter {
	/* Выравнивание строки — `justify-content-end` от bootstrap,
	   с `!important`. Не перебиваем его: при одном ребёнке
	   `space-between` прижал бы сортировку к левому краю. Кнопку
	   ставим слева автоотступом — сортировка остаётся справа
	   на любой ширине. */
	margin: 0 auto 0 0;
}

.us-category-sort-block .static_button_ocfilter .ocfilter-mobile-handle {
	padding: 0;
	text-align: left;
}

/* У темы кнопка зелёная, во всю ширину и с `color: #333 !important`.
   Селектор с id: в строке сортировки кнопка попадает внутрь
   `#content`, а там наше общее правило красит зелёные кнопки темы
   в синий — без id оно перевесит. */
/* `#product-category` в селекторе — ради веса: на прежнем месте
   над витриной кнопку перехватывает правило темы
   `#product-category .ocfilter-mobile-handle .us-module-btn`
   (inline-block, во всю ширину), и без id она выходила на 36px
   вместо 38, тогда как в строке сортировки была 42. Высота задана
   числом — одна и та же в обоих местах, как у плашек шапки. */
html #product-category .static_button_ocfilter button.us-module-btn,
html #content .static_button_ocfilter button.us-module-btn,
html .static_button_ocfilter button.us-module-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: auto;
	height: 38px;
	min-height: 38px;
	padding: 0 18px;
	line-height: 1;
	border: 0;
	border-radius: 10px;
	background: #1b2838;
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
}

html #product-category .static_button_ocfilter button.us-module-btn:hover,
html #content .static_button_ocfilter button.us-module-btn:hover,
html .static_button_ocfilter button.us-module-btn:hover {
	background: #25374d;
}

.static_button_ocfilter button.us-module-btn i {
	font-size: 14px;
}

/* ночью тёмная кнопка на тёмном фоне не читается — берём синий,
   как у остальных главных кнопок ночной темы */
html[data-theme="dark"] #product-category .static_button_ocfilter button.us-module-btn,
html[data-theme="dark"] #content .static_button_ocfilter button.us-module-btn,
html[data-theme="dark"] .static_button_ocfilter button.us-module-btn {
	background: #1f7ae0;
}

html[data-theme="dark"] #content .static_button_ocfilter button.us-module-btn:hover,
html[data-theme="dark"] .static_button_ocfilter button.us-module-btn:hover {
	background: #1765bd;
}

/* ============ Окно контактов нижней плашки ============ */
/* Содержимое то же, что на широком экране лежит в шапке и в пузыре
   сообщений: телефоны с операторами, часы колл-центра, почта,
   мессенджеры, соцсети и обратный звонок. */
.us-contacts {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1060;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(16, 32, 56, .45);
	opacity: 0;
	transition: opacity .2s ease;
}

.us-contacts.is-open {
	opacity: 1;
}

.us-contacts__box {
	position: relative;
	width: 100%;
	max-width: 420px;
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 18px 48px rgba(16, 32, 56, .28);
	/* выезжает снизу: резкое появление читается как сбой вёрстки */
	transform: translateY(14px);
	transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}

.us-contacts.is-open .us-contacts__box {
	transform: none;
}

/* Шапка и тело как у остальных окон: заголовок с крестиком
   отделён линией, прокручивается только тело. */
.us-contacts__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid #eef1f5;
}

.us-contacts__title {
	color: #1b2838;
	font-size: 18px;
	font-weight: 700;
}

.us-contacts__body {
	max-height: calc(100vh - 120px);
	padding: 2px 20px 20px;
	overflow-y: auto;
}

.us-contacts__label {
	margin: 18px 0 8px;
	color: #8a8f98;
	font-size: 12px;
}

.us-contacts__phones {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.us-contacts__phone {
	display: flex;
	align-items: center;
	gap: 9px;
	color: #1b2838;
	font-size: 17px;
	font-weight: 800;
	white-space: nowrap;
}

.us-contacts__phone:hover {
	color: #1f7ae0;
	text-decoration: none;
}

.us-contacts__op {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

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

.us-contacts__hour {
	padding: 8px 12px;
	border-radius: 10px;
	background: #eef1f5;
	color: #1b2838;
	font-size: 12px;
	font-weight: 600;
}

.us-contacts__address {
	color: #1b2838;
	font-size: 14px;
	line-height: 1.45;
}

.us-contacts__msgs {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.us-contacts__msg {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 46px;
	padding: 10px 16px;
	border: 1px solid #e3e8ee;
	border-radius: 12px;
	color: #1b2838;
	font-size: 14px;
	font-weight: 600;
}

.us-contacts__msg:hover {
	border-color: #1b2838;
	color: #1b2838;
	text-decoration: none;
}

.us-contacts__msg i {
	color: #1f7ae0;
	font-size: 17px;
}

.us-contacts__social {
	display: flex;
	gap: 10px;
}

.us-contacts__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: #f4f6f9;
	color: #1b2838;
	font-size: 17px;
}

.us-contacts__social-link:hover {
	background: #e7ebf1;
	color: #1b2838;
	text-decoration: none;
}

button.us-contacts__callback {
	display: block;
	width: 100%;
	min-height: 48px;
	margin-top: 20px;
	padding: 12px 20px;
	border: 0;
	border-radius: 12px;
	background: #1b2838;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

button.us-contacts__callback:hover {
	background: #25374d;
}

/* --- окно контактов ночью ---------------------------------- */
html[data-theme="dark"] .us-contacts__box {
	background: #18222e;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
}

html[data-theme="dark"] .us-contacts__head {
	border-bottom-color: #27333f;
}

html[data-theme="dark"] .us-contacts__title,
html[data-theme="dark"] .us-contacts__address,
html[data-theme="dark"] .us-contacts__phone,
html[data-theme="dark"] .us-contacts__hour,
html[data-theme="dark"] a.us-contacts__msg,
html[data-theme="dark"] a.us-contacts__social-link {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-contacts__hour {
	background: #1f2b39;
}

html[data-theme="dark"] a.us-contacts__msg {
	border-color: #27333f;
}

html[data-theme="dark"] a.us-contacts__msg:hover {
	border-color: #4d9bea;
	color: #e4e9ef;
}

html[data-theme="dark"] a.us-contacts__social-link {
	background: #1f2b39;
}

html[data-theme="dark"] a.us-contacts__social-link:hover {
	background: #27333f;
	color: #e4e9ef;
}

html[data-theme="dark"] button.us-contacts__close:hover {
	background: #1f2b39;
}

html[data-theme="dark"] button.us-contacts__close:before,
html[data-theme="dark"] button.us-contacts__close:after {
	background: #e4e9ef;
}

html[data-theme="dark"] button.us-contacts__callback {
	background: #1f7ae0;
}

html[data-theme="dark"] button.us-contacts__callback:hover {
	background: #1765bd;
}


/* На широком экране панель остаётся вертикальной у края и должна
   быть ровно такой, какой её задумала тема: закладки, сравнение,
   корзина. Наши пункты — фильтр, главная, контакты — только для
   горизонтальной версии. Разметка общая, поэтому прячем стилями.
   (Список правился вместе с пунктами: когда кабинет заменили
   фильтром и главной, правило про него осталось старым, и на
   широком экране вылезли оба новых пункта.) */
@media (min-width: 1201px) {
	.oct-fixed-bar-filter,
	.oct-fixed-bar-home,
	.oct-fixed-bar-contacts {
		display: none;
	}
}


/* --- Кнопка фильтра на самых узких экранах ------------------- */
/* Ниже 540 сортировка упирается в кнопку и строка ломается надвое.
   Там кнопка возвращается на своё прежнее место — полосой над
   витриной во всю ширину (переносит её us-filter.js), а сортировка
   остаётся одна и прижимается к левому краю. */
@media (max-width: 539px) {
	.us-category-content > .static_button_ocfilter {
		margin: 0 0 14px;
	}

	.us-category-content > .static_button_ocfilter .ocfilter-mobile-handle {
		padding: 0;
	}

	html #product-category .us-category-content > .static_button_ocfilter button.us-module-btn,
	html .us-category-content > .static_button_ocfilter button.us-module-btn {
		width: 100%;
	}

	/* Кнопки в строке нет, значит сортировка идёт по левому краю,
	   а количество остаётся у правого — как было у темы: она в этой
	   точке растягивала `.sort-limit` на всю строку. Мы его сузили
	   ради кнопки, здесь возвращаем. */
	.us-category-sort-block .sort-limit {
		justify-content: space-between;
		width: 100%;
	}
}

/* --- Подписи в нижней плашке --------------------------------- */
/* Из одних значков горизонтальная плашка выглядит сбитой, поэтому
   на широких экранах под каждым значком стоит слово. Подписи ставит
   us-dock.js: у пунктов темы названия длинные («Список сравнения»),
   короткие приходят из подвала. На вертикальной панели и на узких
   экранах подписей нет — там для них нет места. */
.oct-fixed-bar-label {
	display: none;
}

@media (min-width: 520px) and (max-width: 1200px) {
	.oct-fixed-bar-link {
		width: auto;
		min-width: 74px;
		padding: 9px 10px 8px;
	}

	.oct-fixed-bar-label {
		display: block;
		margin-top: 3px;
		color: #c7ced6;
		font-size: 10px;
		font-weight: 600;
		line-height: 1.2;
		white-space: nowrap;
	}

	.oct-fixed-bar-quantity {
		top: 4px;
		right: 12px;
	}
}

/* на телефоне в плашке шесть значков — ужимаем шаг */
@media (max-width: 519px) {
	.oct-fixed-bar-link {
		width: 50px;
		padding: 11px 0;
	}

	.oct-fixed-bar-quantity {
		right: 5px;
	}
}


/* --- Тесная карточка ----------------------------------------- */
/* Карточке важна собственная ширина, а не ширина окна: в одном
   и том же окне она бывает и 250px, и 160px — смотря сколько
   карточек в ряду. Поэтому тесную раскладку включает запрос
   к контейнеру (ячейке сетки), а не к экрану: пороги не надо
   пересчитывать каждый раз, когда меняется число карточек в ряду.

   Цена у нас `white-space: nowrap` и 20px, кнопка 48×40 — в карточке
   уже 190px они налезали друг на друга. */
.product-grid {
	container-type: inline-size;
}

/* сначала ужимаем кегль и кнопку — строка остаётся одной */
@container (max-width: 230px) {
	.us-card__price-now {
		font-size: 17px;
	}

	.us-card__buy {
		gap: 8px;
		padding-top: 12px;
	}

	.us-card__cart,
	a.us-card__cart {
		width: 42px;
		height: 36px;
	}

	.us-card__cart-ico {
		width: 18px;
		height: 18px;
	}
}

/* в самых тесных кнопка уходит под цену во всю ширину */
@container (max-width: 190px) {
	.us-card__buy {
		flex-wrap: wrap;
	}

	.us-card__price {
		flex: 1 1 100%;
	}

	.us-card__cart,
	a.us-card__cart {
		width: 100%;
	}
}


/* --- Выдвижная панель фильтра -------------------------------- */
/* У темы 250px: секции, счётчики и ползунок цены стоят вплотную,
   названия переносятся. Расширяем по ступеням — у границы 1200
   панель даже шире колонки фильтра на широком экране (296px),
   там для неё есть место.

   Закрытое положение тема задаёт отрицательным `left`, поэтому
   каждая ступень меняет и его. `:not(.active)` обязателен: правило
   того же веса, что `.ocf-offcanvas.active { left: 0 }`, но ниже
   по файлу — без него панель перестала бы открываться. */
.ocf-offcanvas.ocfilter-mobile {
	/* Выше прилипшей второй плашки (1020) и нижней плашки закладок
	   (1035): у темы было 1000, и панель резала шапка каталога. */
	z-index: 1040;
	width: 300px;
}

.ocf-offcanvas.ocfilter-mobile:not(.active) {
	left: -300px;
}

@media (min-width: 576px) {
	.ocf-offcanvas.ocfilter-mobile {
		width: 340px;
	}

	.ocf-offcanvas.ocfilter-mobile:not(.active) {
		left: -340px;
	}
}

@media (min-width: 768px) {
	.ocf-offcanvas.ocfilter-mobile {
		width: 380px;
	}

	.ocf-offcanvas.ocfilter-mobile:not(.active) {
		left: -380px;
	}
}

@media (min-width: 992px) {
	.ocf-offcanvas.ocfilter-mobile {
		width: 420px;
	}

	.ocf-offcanvas.ocfilter-mobile:not(.active) {
		left: -420px;
	}
}

/* Кнопка закрытия висела под шапкой панели (top: 88px) и красилась
   тусклым красным темы. Ставим по центру правого края — её видно
   с любой прокрутки списка — и в наш Alert red. Правило только для
   открытой панели: у закрытой тема прячет кнопку, иначе она торчала
   бы у левого края экрана. */
.ocf-offcanvas .ocfilter-mobile-handle {
	top: 50%;
	transform: translateY(-50%);
}

html .ocf-offcanvas.active .ocfilter-mobile-handle button.us-module-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	min-height: 56px;
	padding: 0;
	border: 0;
	border-radius: 0 12px 12px 0;
	background: #e01b1b;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(224, 27, 27, .25);
}

html .ocf-offcanvas.active .ocfilter-mobile-handle button.us-module-btn:hover {
	background: #c41616;
}

.ocf-offcanvas .ocfilter-mobile-handle button.us-module-btn i {
	font-size: 17px;
}


/* --- Кнопка «наверх» ----------------------------------------- */
/* У темы это зелёный полупрозрачный круг с жирной галочкой
   шрифта. Делаем наш тёмный круг, стрелку — тонкой линией
   (маска, как у остальных наших значков), и ставим её ниже:
   на телефоне она висела высоко над нижней плашкой. */
#back-top {
	right: 24px;
	width: 46px;
	height: 46px;
	line-height: 46px;
	background: #1b2838;
	opacity: 1;
	box-shadow: 0 8px 24px rgba(16, 32, 56, .18);
	transition: background .15s ease;
}

#back-top:hover {
	background: #25374d;
	opacity: 1;
}

#back-top a {
	display: block;
	height: 100%;
}

/* глиф темы гасим, рисунок подаём маской — стрелка тоньше
   и одинаковая во всех браузерах */
#back-top i {
	position: static;
	display: block;
	width: 18px;
	height: 18px;
	margin: 14px auto 0;
	background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M5 12l7-7 7 7'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M5 12l7-7 7 7'/%3E%3C/svg%3E") no-repeat center / contain;
}

#back-top i:before {
	content: none;
}

html[data-theme="dark"] #back-top {
	background: #1f2b39;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}

html[data-theme="dark"] #back-top:hover {
	background: #27333f;
}

/* Ниже 1200 внизу экрана стоит наша плашка: кнопку держим прямо
   над ней, а не на высоте темы (100–150px). На карточке товара
   плашка поднимается над строкой покупки — кнопка за ней. */
@media (max-width: 1200px) {
	#back-top,
	body.bottom #back-top {
		right: 16px;
		bottom: 74px;
	}

	body:has(.us-buybar.is-on) #back-top {
		bottom: 146px;
	}
}

/* на телефоне плашка ниже: подписей под значками нет */
@media (max-width: 519px) {
	#back-top,
	body.bottom #back-top {
		bottom: 64px;
	}

	body:has(.us-buybar.is-on) #back-top {
		bottom: 136px;
	}
}


/* --- Пузырь сообщений ---------------------------------------- */
/* У темы это зелёный круг 70px с пульсацией в 100px и крутящейся
   иконкой — на странице он читался как главный элемент. Делаем
   ровню кнопке «наверх»: тот же размер и форма, но наш синий —
   кнопка прокрутки служебная, а эта зовёт написать. Значок тонкой
   линией маской, как остальные наши. Ниже 1200 пузыря нет совсем:
   его содержимое в окне контактов нижней плашки. */
#us_fixed_contact_button {
	right: 24px;
	bottom: 24px;
	width: 46px;
	height: 46px;
	background-color: #1f7ae0;
	box-shadow: 0 8px 24px rgba(31, 122, 224, .3);
}

.us-fixed-contact-pulsation {
	width: 62px;
	height: 62px;
	top: -8px;
	left: -8px;
	background-color: #1f7ae0;
}

.us-fixed-contact-icon {
	top: 0;
	right: 0;
	width: 46px;
	height: 46px;
	/* глиф гасим кеглем: рисунок даёт маска */
	font-size: 0;
}

/* иконка у темы ещё и крутится — ни к чему */
.us-fixed-contact-icon .fa-comment-dots {
	animation: none;
}

.us-fixed-contact-icon i {
	display: block;
	width: 21px;
	height: 21px;
	background-color: #fff;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.us-fixed-contact-icon i:before {
	content: none;
}

.us-fixed-contact-icon .fa-comment-dots {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 9.9 9.9 0 0 1-4.2-.9L3 21l1.9-4.3A8.4 8.4 0 0 1 12 3.1a8.4 8.4 0 0 1 9 8.4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 9.9 9.9 0 0 1-4.2-.9L3 21l1.9-4.3A8.4 8.4 0 0 1 12 3.1a8.4 8.4 0 0 1 9 8.4z'/%3E%3C/svg%3E");
}

.us-fixed-contact-icon .fa-times {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* --- Значки боковой панели одной высоты ---------------------- */
/* Рисунки разной формы (воронка, домик, сердце, трубка), поэтому
   равняем не ширину, а высоту: всем 18px.

   У масок высота рисунка равна коробке, а у глифов шрифта — нет:
   замер `measureText` на самом шрифте темы дал воронке и трубке
   примерно кегль (102% и 101%), а домику — 89%. Отсюда и разные
   кегли: рисунок у всех выходит в одни 18px. */
.oct-fixed-bar-link i {
	display: block;
	width: 22px;
	height: 18px;
	margin: 1px auto;
	line-height: 18px;
}

.oct-fixed-bar-link .fa-heart,
.oct-fixed-bar-link .fa-chart-bar,
.oct-fixed-bar-link .fa-shopping-cart {
	width: 22px;
	height: 18px;
	vertical-align: 0;
}

.oct-fixed-bar-link .fa-filter,
.oct-fixed-bar-link .fa-phone {
	font-size: 17.5px;
}

.oct-fixed-bar-link .fa-home {
	font-size: 20px;
}

/* --- Внутренний отступ подвала ниже 1200 --------------------- */
/* Страница ниже 1200 идёт во всю ширину с полями по 16px, и общее
   правило контейнера снимало у подвала его собственные 35px —
   текст упирался в край плиты. Плите возвращаем воздух: сама она
   отступает от края экрана, как остальные блоки, а текст стоит
   внутри неё. */
@media (max-width: 1200px) {
	.footer-sub {
		padding-left: 34px;
		padding-right: 34px;
	}

	.footer-sub::before {
		right: 16px;
		left: 16px;
	}
}

@media (max-width: 575px) {
	.footer-sub {
		padding-left: 28px;
		padding-right: 28px;
	}
}


/* --- Кнопки у правого нижнего угла --------------------------- */
/* «Наверх» и мессенджеры — одна пара: кнопка прокрутки стоит прямо
   над пузырём, а не на высоте темы (120px), иначе между ними дыра
   в полэкрана. Когда на карточке товара выезжает строка покупки,
   обе поднимаются над ней — раньше пузырь уезжал под неё. */
@media (min-width: 1201px) {
	#back-top,
	body.bottom #back-top {
		right: 24px;
		bottom: 80px;
	}

	body:has(.us-buybar.is-on) #us_fixed_contact_button {
		bottom: 96px;
	}

	body:has(.us-buybar.is-on) #back-top,
	body.bottom:has(.us-buybar.is-on) #back-top {
		bottom: 152px;
	}
}

/* --- Окно мессенджеров --------------------------------------- */
/* У темы это белый прямоугольник с радиусом 1px и жирной тенью.
   Приводим к виду наших окон: скругление, мягкая тень, строки
   с круглым значком и подписью. */
.us-fixed-contact-dropdown {
	right: 0;
	bottom: 58px;
	min-width: 236px;
	padding: 10px;
	border-radius: 16px;
	box-shadow: 0 18px 48px rgba(16, 32, 56, .28);
}

.us-fixed-contact-dropdown.expanded {
	opacity: 1;
}

a.us-fixed-contact-item {
	gap: 10px;
	padding: 7px 8px;
	border-radius: 12px;
	color: #1b2838;
	font-size: 14px;
	font-weight: 600;
}

a.us-fixed-contact-item:hover {
	background: #f4f6f9;
	color: #1b2838;
	text-decoration: none;
}

.us-fixed-contact-item:not(:last-child) {
	margin-bottom: 2px;
}

.us-fixed-contact-item-icon {
	width: 34px;
	height: 34px;
	margin-right: 0;
	border-radius: 11px;
}

.us-fixed-contact-item-icon i {
	font-size: 17px;
}

html[data-theme="dark"] .us-fixed-contact-dropdown {
	background: #18222e;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
}

html[data-theme="dark"] a.us-fixed-contact-item {
	color: #e4e9ef;
}

html[data-theme="dark"] a.us-fixed-contact-item:hover {
	background: #1f2b39;
	color: #e4e9ef;
}


/* ============ Шапка ниже 992 ============ */
/* Тема в этой точке показывает свою мобильную полосу — бургер, инфо,
   язык, аккаунт, корзину. Она дублирует нашу шапку, поэтому убрана;
   всё, что в ней было, остаётся у нас. Корзину тема в этой же точке
   гасит своим `!important` — возвращаем. */
@media (max-width: 991px) {
	nav#top {
		display: none;
	}

	.us-head {
		padding-top: 14px;
	}

	html .us-head__actions #cart {
		display: flex !important;
	}

	.us-head__main {
		flex-wrap: nowrap;
		gap: 12px;
	}

	/* Телефоны остаются — ради них шапку и открывают.
	   Место под них освобождает поиск. */
	.us-head__info {
		display: flex;
		max-width: 164px;
		padding-left: 14px;
	}

	.us-head__tel {
		font-size: 13px;
	}

	.us-head__actions {
		gap: 16px;
		padding-left: 14px;
	}

	/* Поиск по значку: строка целиком рядом с телефонами
	   не помещается, поэтому выезжает панелью под шапкой. */
	.us-head__card {
		position: relative;
	}

	.us-head__search {
		position: absolute;
		top: calc(100% - 8px);
		right: 0;
		left: 0;
		z-index: 1041;
		display: none;
		order: 0;
		flex: 0 0 auto;
		min-width: 0;
		padding: 12px;
		border-radius: 0 0 14px 14px;
		background: #fff;
		box-shadow: 0 18px 40px rgba(16, 32, 56, .18);
	}

	.us-head__card.is-search-open .us-head__search {
		display: block;
	}

	button.us-head__act--search {
		display: inline-flex;
	}

	/* Каталог — бургером слева от сезонов. Кнопку и панель переносит
	   us-head.js: вторая плашка в этой точке не показывается. */
	.us-head__chips {
		position: static;
	}

	.us-head__chips > a.us-bar__catalog {
		flex: 0 0 38px;
		width: 38px;
		min-width: 38px;
		/* ровно как плашки сезонов рядом */
		height: 38px;
		min-height: 38px;
		padding: 0;
		justify-content: center;
		border-radius: 12px;
	}

	.us-head__chips > a.us-bar__catalog span,
	.us-head__chips > a.us-bar__catalog .us-bar__arrow {
		display: none;
	}

	.us-head__chips > a.us-bar__catalog:before {
		content: '';
		display: block;
		width: 18px;
		height: 14px;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Crect width='18' height='2' rx='1'/%3E%3Crect y='6' width='18' height='2' rx='1'/%3E%3Crect y='12' width='18' height='2' rx='1'/%3E%3C/svg%3E") no-repeat center / contain;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Crect width='18' height='2' rx='1'/%3E%3Crect y='6' width='18' height='2' rx='1'/%3E%3Crect y='12' width='18' height='2' rx='1'/%3E%3C/svg%3E") no-repeat center / contain;
	}

	/* Панель раскрывается во всю ширину плашки, колонки идут друг
	   под другом. */
	.us-mega {
		max-height: 74vh;
		overflow-y: auto;
		flex-direction: column;
		gap: 16px;
		padding: 18px 16px;
		border-radius: 0 0 14px 14px;
	}

	.us-mega > div + div {
		padding-top: 16px;
		padding-left: 0;
		border-top: 1px solid #e3e8ee;
		border-left: 0;
	}

	.us-mega .us-mega__col--brands,
	.us-mega .us-mega__seasons {
		flex: 0 0 auto;
	}

	/* типы транспорта переехали в панель — строкой плиток */
	.us-mega .us-bar__nav {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.us-mega .us-bar__link {
		padding: 9px 12px;
		border: 1px solid #e3e8ee;
		border-radius: 12px;
	}

	.us-mega .us-mega__seasons {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.us-mega .us-mega__season {
		flex: 1 1 140px;
	}

	.us-mega .us-mega__help {
		flex: 1 1 100%;
	}
}

/* Телефоны в шапке остаются на любой ширине. Там, где справа
   остаётся только поиск, место под них освобождает «Заказать
   звонок»: кнопку убираем, кегль номеров не трогаем — он тот же,
   что на планшете. Звонок заказывают из окна контактов нижней
   плашки и из подвала. */
@media (max-width: 575px) {
	.us-head__callback {
		display: none;
	}

	.us-head__info {
		max-width: 170px;
		padding-left: 12px;
	}

	.us-head__actions {
		padding-left: 12px;
	}
}

/* С 480, вместе с подбором по авто, уходит и подпись под логотипом:
   её место отдаём самому логотипу, чтобы не уменьшать его. */
@media (max-width: 480px) {
	.us-head__slogan {
		display: none;
	}

	.us-head__main {
		gap: 10px;
	}

	.us-head__info {
		padding-left: 10px;
	}

	.us-head__actions {
		padding-left: 10px;
	}
}

/* Панель мегаменю раскрывается меткой на странице: ниже 992 она
   лежит уже не внутри плашки, и правило, завязанное на плашку,
   до неё не достаёт. */
body.us-mega-open .us-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Значок поиска нужен только в узкой шапке. Порядок важен: сначала
   прячем, потом показываем — иначе правило из медиазапроса выше
   по файлу перебивалось этим. */
button.us-head__act--search {
	display: none;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

@media (max-width: 991px) {
	button.us-head__act--search {
		display: inline-flex;
	}
}


/* --- Пустая полоса от мобильной шапки темы ------------------- */
/* Полоса темы `position: fixed`, и под неё зарезервировано
   `body { padding-top: 50px }`. Полосу мы убрали — убираем и запас,
   иначе над шапкой остаётся пустое место. */
@media (max-width: 991px) {
	/* запас тема вешает на `body.top` — селектор с классом,
	   простого `body` не хватало */
	body,
	body.top {
		padding-top: 0;
	}
}

/* --- Телефон: горизонтальные отступы вдвое ------------------- */
/* Две карточки в ряд на 380px — каждый пиксель ширины на счету.
   Поля страницы, поля витрины и промежуток между карточками
   уменьшены вдвое, внутренние отступы карточки — следом. */
@media (max-width: 575px) {
	.container {
		padding-left: 8px;
		padding-right: 8px;
	}

	.us-category-content #content {
		padding-left: 18px;
		padding-right: 18px;
	}

	#content .row > .product-grid {
		padding-left: 3px;
		padding-right: 3px;
	}

	.us-card__media {
		padding: 30px 10px 8px;
	}

	.us-card__body {
		padding: 0 10px 12px;
	}

	/* плита подвала и её внутренний отступ — в той же пропорции */
	.footer-sub::before {
		right: 8px;
		left: 8px;
	}

	.footer-sub {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* --- Подвал: свёрнутые разделы ------------------------------- */
/* Ниже 768 разделы складываются в список заголовков. У темы
   между ними 15px сверху, 15 снизу и наши 18 у блока — на экран
   помещалось три строки. Сжимаем до обычной строки списка. */
@media (max-width: 767px) {
	.us-footer-box {
		margin-bottom: 0;
		/* у темы линия белая по белому — её не было видно */
		border-bottom-color: #eef1f5;
	}

	html[data-theme="dark"] .us-footer-box {
		border-bottom-color: #27333f;
	}

	.us-footer-title {
		margin-top: 0;
		margin-bottom: 0;
		padding: 11px 0;
		font-size: 15px;
	}

	.us-footer-list {
		padding-bottom: 6px;
	}
}

/* --- Оценка: одна звезда и число ----------------------------- */
/* До 480 пять звёзд занимали всю строку карточки. Оставляем одну
   звезду как знак оценки и ставим рядом само число. */
.us-card__rate-num {
	display: none;
}

/* Три столбца на планшете — карточки те же 160–230px, поэтому
   до 768 оценка тоже сокращённая. Между 480 и 560 столбцов два,
   карточка шире 220px — там звёзды помещаются. */
@media (max-width: 768px) and (min-width: 560px) {
	.us-card__star:not(:first-child) {
		display: none;
	}

	.us-card__star:first-child {
		background: #f5a623;
	}

	.us-card__rate-num {
		display: inline;
		color: #1b2838;
		font-size: 13px;
		font-weight: 700;
	}

	.us-card__rating {
		gap: 5px;
	}

	.us-card__stars:last-child .us-card__star {
		display: none;
	}
}

@media (max-width: 479px) {
	.us-card__star:not(:first-child) {
		display: none;
	}

	/* одиночная звезда всегда залита: это значок оценки,
	   а не доля пятёрки */
	.us-card__star:first-child {
		background: #f5a623;
	}

	.us-card__rate-num {
		display: inline;
		color: #1b2838;
		font-size: 13px;
		font-weight: 700;
	}

	.us-card__rating {
		gap: 5px;
	}

	/* без отзывов оценки нет — и звезду не рисуем */
	.us-card__stars:last-child .us-card__star {
		display: none;
	}
}


/* --- Язык и тема у правого края плашки ----------------------- */
/* Ниже 992 строка плашек прокручивается по горизонтали, и настройки
   уезжали вместе с ней за край. Прижимаем их к правому краю
   прокрутки: `sticky` работает и по горизонтали. Фон свой — под
   настройками проходят плашки, и без него они накладывались бы. */
@media (max-width: 991px) {
	.us-head__prefs {
		position: sticky;
		right: 0;
		z-index: 2;
		margin-left: auto;
		padding-left: 4px;
		background: #fff;
	}

	html[data-theme="dark"] .us-head__prefs {
		background: #18222e;
	}
}

/* --- С 820 сезоны уходят из плашки --------------------------- */
/* Места в строке остаётся на бургер, подбор по авто и настройки;
   сезоны никуда не деваются — они первым блоком в меню
   под бургером. Разделитель перед подбором тоже убираем:
   делить стало нечего. */
@media (max-width: 820px) {
	.us-head__chips .us-chip--winter,
	.us-head__chips .us-chip--summer,
	.us-head__chips .us-chip--all,
	.us-head__chips > span.us-head__chips-sep:nth-of-type(1) {
		display: none;
	}
}


/* --- С 576 в шапке остаётся только поиск --------------------- */
/* Вход, закладки и корзина есть в нижней плашке, в шапке они
   забирали место у логотипа. Поиск оставляем: его в плашке нет. */
@media (max-width: 575px) {
	.us-head__actions > *:not(.us-head__act--search),
	html .us-head__actions #cart {
		display: none !important;
	}

	.us-head__actions {
		gap: 0;
	}
}

/* --- Бренды в меню под бургером по три в ряд ----------------- */
/* Ниже 992 панель раскрывается во всю ширину плашки, и колонка
   брендов идёт не рядом с остальными, а под ними — в два ряда
   плитки получались непомерно широкими. */
@media (max-width: 991px) {
	.us-mega .us-mega__brands {
		grid-template-columns: repeat(3, 1fr);
	}
}


/* --- Самые узкие экраны: шапка в одну строку ----------------- */
/* Ниже 420 логотипу и номерам тесно даже без подписи и кнопки
   звонка — только здесь логотип уменьшается. Номера не трогаем. */
@media (max-width: 419px) {
	.us-head__brand {
		max-width: 120px;
	}

	.us-head__main {
		gap: 8px;
	}

	.us-head__info {
		padding-left: 8px;
	}

	.us-head__actions {
		padding-left: 8px;
	}
}

/* на 360 значок поиска подходил вплотную к краю плиты */
@media (max-width: 379px) {
	.us-head__brand {
		max-width: 105px;
	}
}


/* --- С 480 в плашке остаются бургер и настройки -------------- */
/* Подбор по авто никуда не девается: он первым экраном на главной
   и отдельной вкладкой в фильтре. В строке плашек на такой ширине
   кнопка занимала её почти целиком. */
@media (max-width: 480px) {
	.us-head__chips .us-head__pick {
		display: none;
	}
}

/* --- Нули у счётчиков нижней плашки -------------------------- */
/* Пустая корзина и пустые закладки не должны кричать кружком
   с нулём. Класс вешает us-dock.js: число приходит от темы,
   стилями его не прочитать. На вертикальной панели оставляем
   как было — она целиком принадлежит теме. */
@media (max-width: 1200px) {
	.oct-fixed-bar-quantity.is-zero {
		display: none;
	}
}


/* --- Значок «Информация» в строке плашек --------------------- */
/* Появляется там, где из строки уходит подбор по авто (с 480):
   в родной мобильной шапке темы такой значок был, и список
   разделов нужен под рукой. */
.us-head__chips-info {
	display: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border: 1px solid #e3e8ee;
	border-radius: 12px;
	background: #fff;
}

.us-head__chips-info img {
	width: 20px;
	height: 20px;
}

html[data-theme="dark"] .us-head__chips-info {
	border-color: #27333f;
	background: #1f2b39;
}

@media (max-width: 480px) {
	.us-head__chips .us-head__chips-info {
		display: inline-flex;
	}
}

/* список разделов в окне «Информация» */
.us-info__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 10px;
}

.us-info__link {
	padding: 10px 12px;
	border-radius: 12px;
	color: #1b2838;
	font-size: 15px;
	font-weight: 600;
}

.us-info__link:hover {
	background: #f4f6f9;
	color: #1b2838;
	text-decoration: none;
}

html[data-theme="dark"] .us-info__link {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-info__link:hover {
	background: #1f2b39;
	color: #e4e9ef;
}


/* --- Подсказка фильтра в выдвижной панели -------------------- */
/* На десктопе подсказку с числом товаров мы гасим по классу
   `ocfilter-option-popover`. В выдвижной панели модуль вешает
   подсказку на весь список значений и этот класс не ставит,
   поэтому там она всплывала снова. Гасим по содержимому: в этой
   подсказке лежит кнопка «показать», а в подсказке цены — поля. */
#ocfilter .popover:has(button) {
	display: none !important;
}

/* --- Знак вместо логотипа ниже 420 --------------------------- */
/* Полную надпись уменьшать дальше некуда — меняем её на знак. */
.us-head__brand .us-logo-mini {
	display: none;
	width: 38px;
	height: 38px;
}

@media (max-width: 419px) {
	.us-head__brand .us-logo-img {
		display: none;
	}

	.us-head__brand .us-logo-mini {
		display: block;
	}

	.us-head__brand {
		max-width: 38px;
	}
}

/* --- окно покупки из плашек по городам -----------------------
   Открывается кнопкой корзины в плашке поставщика. Общий вид
   окна дают правила выше; здесь только то, чего нет у других
   окон: ценовая строка, счётчик (у темы класс висит на самой
   группе кнопок, а не на обёртке) и примечание под ним. */
#us-buy .modal-dialog {
	max-width: 460px;
}

#us-buy .modal-body {
	padding: 22px 24px 24px;
}

#us-buy .us-modal-body {
	width: 100%;
}

#us-buy .buy-modal-price {
	margin-bottom: 16px;
	color: #5c6673;
	font-size: 14px;
	font-weight: 400;
}

#us-buy .buy-modal-price-item {
	color: #1b2838;
	font-size: 22px;
	font-weight: 800;
}

/* счётчик — наш радиус и рамка, кнопки по краям */
#us-buy .us-product-quantity.btn-group {
	overflow: hidden;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
}

#us-buy .us-product-quantity .form-control {
	width: 54px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: #1b2838;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
}

#us-buy button.us-product-quantity-btn {
	width: 34px;
	height: 38px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: #f7f8fa;
	color: #1b2838;
	font-size: 16px;
}

#us-buy button.us-product-quantity-btn:hover {
	background: #eef1f5;
}

#us-buy .buy-modal-bottom {
	padding-top: 14px;
	color: #5c6673;
	font-size: 13px;
	line-height: 1.45;
}

#us-buy .buy-modal-bottom i {
	margin-right: 4px;
	color: #1f7ae0;
}

/* Действие покупки — зелёное, как в нижней плашке товара.
   Тег в селекторе обязателен: у темы правило на [type=button]. */
#us-buy .ch_btn_wrap {
	margin-top: 20px;
}

#us-buy button.us-product-btn-active {
	width: 100%;
	max-width: 240px;
	height: 46px;
	margin: 0;
	padding: 0 24px;
	border: 0;
	border-radius: 10px;
	background: #2fa84f;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
	transition: background .15s ease;
}

#us-buy button.us-product-btn-active:hover {
	background: #268c42;
	opacity: 1;
}

html[data-theme="dark"] #us-buy .buy-modal-price-item {
	color: #e4e9ef;
}

html[data-theme="dark"] #us-buy .buy-modal-price,
html[data-theme="dark"] #us-buy .buy-modal-bottom {
	color: #93a0ae;
}

html[data-theme="dark"] #us-buy .us-product-quantity.btn-group {
	border-color: #27333f;
}

html[data-theme="dark"] #us-buy .us-product-quantity .form-control {
	background: #18222e;
	color: #e4e9ef;
}

html[data-theme="dark"] #us-buy button.us-product-quantity-btn {
	background: #1f2b39;
	color: #e4e9ef;
}

html[data-theme="dark"] #us-buy button.us-product-quantity-btn:hover {
	background: #27333f;
}


/* ===== Оформление заказа (модуль Simple) ===================== */
/* Разметку собирает закодированный модуль, поэтому всё правим
   отсюда. Селекторы с #content там, где перебиваем simple.css. */

/* Обе колонки плавающие, а шаг их не охватывает: модуль ставит
   clear уже за его пределами, и высота шага оставалась нулевой.
   Для липкой колонки это пустой контейнер — липнуть негде, поэтому
   замыкаем флоаты внутри шага. */
.simplecheckout-step:after {
	content: '';
	display: block;
	clear: both;
}

/* Раскладку шага держит сам модуль: колонки у него на флоатах,
   а их ширину и порядок задают настройки в админке. Своё здесь
   только залипание. Задано обеим колонкам намеренно: липнет та,
   что короче, а высокая колонка задаёт высоту шага, и sticky для
   неё — пустая запись. Так залипание переживает любую перестановку
   колонок в админке. */
.simplecheckout-left-column,
.simplecheckout-right-column {
	position: sticky;
	top: 90px;
}

/* С 1024 модуль ставит колонки друг под друга: липкая корзина
   закрыла бы собой формы. */
@media (max-width: 1024px) {
	.simplecheckout-left-column,
	.simplecheckout-right-column {
		position: static;
	}
}

/* --- плита блока --- */
.simplecheckout-block {
	margin-bottom: 18px;
	border: 1px solid #e3e8ee;
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
}

.simplecheckout-block .checkout-heading,
.simplecheckout-block .panel-heading {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	margin: 0;
	padding: 14px 20px;
	border: 0;
	border-bottom: 1px solid #eef1f5;
	border-radius: 0;
	background: #fff;
	color: #1b2838;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
}

.simplecheckout-block .checkout-heading-button a {
	color: #1f7ae0;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.simplecheckout-block .checkout-heading-button a:hover {
	color: #1765bd;
	text-decoration: underline;
}

/* У модуля отступы блока 20/10/10 с !important — поля и галочки
   прижимались к краям плиты. Своего перебиваем тем же способом. */
.simplecheckout-block-content {
	padding: 18px 20px !important;
}

/* Группы полей модуль разделяет верхним отступом, из-за чего первая
   висела ниже заголовка. Отступ держим снизу, как в наших формах. */
.simplecheckout-block-content .form-horizontal .form-group {
	margin-top: 0;
}

/* «Да / Нет» стояли вплотную: у модуля между ними 10px. */
.simplecheckout .row-customer_register .radio {
	margin-right: 24px;
}

/* --- поля --- */
#content .simplecheckout input[type="text"],
#content .simplecheckout input[type="email"],
#content .simplecheckout input[type="tel"],
#content .simplecheckout input[type="password"],
#content .simplecheckout select,
#content .simplecheckout textarea {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff;
	color: #1b2838;
	font-size: 14px;
	box-shadow: none;
}

#content .simplecheckout textarea {
	height: auto;
	min-height: 96px;
	padding: 12px 14px;
	line-height: 1.45;
}

#content .simplecheckout input[type="text"]:focus,
#content .simplecheckout input[type="email"]:focus,
#content .simplecheckout input[type="tel"]:focus,
#content .simplecheckout input[type="password"]:focus,
#content .simplecheckout select:focus,
#content .simplecheckout textarea:focus {
	border-color: #1f7ae0;
	outline: 2px solid #1f7ae0;
	outline-offset: -2px;
}

/* Подписи полей идут строкой над полем: в колонке 390px
   двухколоночная форма темы складывалась в кашу. */
.simplecheckout .form-group {
	display: block;
	margin: 0 0 14px;
}

.simplecheckout .form-group:last-child {
	margin-bottom: 0;
}

.simplecheckout .control-label {
	display: block;
	width: auto;
	margin: 0 0 6px;
	padding: 0;
	color: #5c6673;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
}

.simplecheckout .form-group > div[class^="col-"],
.simplecheckout .form-group > div[class*=" col-"] {
	width: 100%;
	padding: 0;
	float: none;
}

.simplecheckout .required-mark,
.simplecheckout .control-label .required {
	color: #e01b1b;
}

/* --- переключатели «да / нет» --- */
.simplecheckout .radio,
.simplecheckout .checkbox {
	margin: 0 0 6px;
}

/* Модуль переводит все метки в inline-block с !important,
   и подпись вставала по базовой линии — ниже кружка галочки.
   Возвращаем строку с выравниванием по центру. */
.simplecheckout .radio label,
.simplecheckout .checkbox label {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	color: #1b2838;
	font-size: 14px;
	line-height: 1.3;
}

/* --- корзина в правой плите --- */
#simplecheckout_cart .table,
#simplecheckout_cart table {
	margin: 0;
	border: 0;
}

#simplecheckout_cart thead td,
#simplecheckout_cart thead th {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid #eef1f5;
	background: #f7f8fa;
	color: #5c6673;
	font-size: 12px;
	font-weight: 600;
	text-transform: none;
}

#simplecheckout_cart tbody td {
	padding: 12px;
	border: 0;
	border-bottom: 1px solid #eef1f5;
	color: #1b2838;
	font-size: 14px;
	vertical-align: middle;
}

#simplecheckout_cart tbody tr:last-child td {
	border-bottom: 0;
}

#simplecheckout_cart tbody img {
	width: 56px;
	height: auto;
	padding: 4px;
	border: 1px solid #eef1f5;
	border-radius: 10px;
	background: #fff;
}

#simplecheckout_cart tbody a {
	color: #1b2838;
	font-weight: 600;
}

#simplecheckout_cart tbody a:hover {
	color: #1f7ae0;
}

/* Подпись и число стоят парой у правого края — так сумма читается
   на той же вертикали, что и цены в строках товара. */
.simplecheckout-cart-total {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding: 14px 20px;
	border-top: 1px solid #eef1f5;
	color: #5c6673;
	font-size: 14px;
}

.simplecheckout-cart-total-value {
	color: #1b2838;
	font-size: 18px;
	font-weight: 800;
}

/* --- действие: подтверждение заказа --- */
/* Покупка — зелёная, как кнопка в нижней плашке товара. */
.simplecheckout-button-block {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 4px;
}

#content a#simplecheckout_button_confirm,
#content #simplecheckout_button_confirm.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	height: 46px;
	padding: 0 26px;
	border: 0;
	border-radius: 10px;
	background: #2fa84f;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
	transition: background .15s ease;
}

#content a#simplecheckout_button_confirm:hover {
	background: #268c42;
	color: #fff;
	text-decoration: none;
}

.simplecheckout-button-left a,
.simplecheckout-button-left .btn {
	color: #5c6673;
	font-size: 14px;
}

/* --- предупреждения и ошибки --- */
.simplecheckout .simplecheckout-warning-block,
.simplecheckout .alert-danger {
	margin: 0 0 14px;
	padding: 10px 14px;
	border: 0;
	border-radius: 10px;
	background: #fdecec;
	color: #b02a2a;
	font-size: 13px;
}

.simplecheckout-error-text {
	color: #e01b1b;
	font-size: 12px;
}

.simplecheckout-proceed-payment {
	padding: 14px 20px;
	border-radius: 12px;
	background: #f7f8fa;
	color: #5c6673;
	font-size: 14px;
	text-align: center;
}

/* --- ночная тема --- */
html[data-theme="dark"] .simplecheckout-block {
	border-color: #27333f;
	background: #18222e;
}

html[data-theme="dark"] .simplecheckout-block .checkout-heading,
html[data-theme="dark"] .simplecheckout-block .panel-heading {
	border-bottom-color: #27333f;
	background: #18222e;
	color: #e4e9ef;
}

html[data-theme="dark"] #content .simplecheckout input[type="text"],
html[data-theme="dark"] #content .simplecheckout input[type="email"],
html[data-theme="dark"] #content .simplecheckout input[type="tel"],
html[data-theme="dark"] #content .simplecheckout input[type="password"],
html[data-theme="dark"] #content .simplecheckout select,
html[data-theme="dark"] #content .simplecheckout textarea {
	border-color: #27333f;
	background: #1f2b39;
	color: #e4e9ef;
}

html[data-theme="dark"] .simplecheckout .control-label,
html[data-theme="dark"] .simplecheckout-cart-total {
	color: #93a0ae;
}

html[data-theme="dark"] .simplecheckout .radio label,
html[data-theme="dark"] .simplecheckout .checkbox label,
html[data-theme="dark"] #simplecheckout_cart tbody td,
html[data-theme="dark"] #simplecheckout_cart tbody a,
html[data-theme="dark"] .simplecheckout-cart-total-value {
	color: #e4e9ef;
}

html[data-theme="dark"] #simplecheckout_cart thead td,
html[data-theme="dark"] #simplecheckout_cart thead th {
	border-bottom-color: #27333f;
	background: #1f2b39;
	color: #93a0ae;
}

html[data-theme="dark"] #simplecheckout_cart tbody td {
	border-bottom-color: #27333f;
}

html[data-theme="dark"] .simplecheckout-cart-total {
	border-top-color: #27333f;
}

/* --- узкий экран: один столбец, корзина первой --- */
@media (max-width: 991px) {
	.simplecheckout-step {
		display: block;
	}

	.simplecheckout-left-column {
		position: static;
	}

	.simplecheckout-button-block {
		justify-content: stretch;
	}

	#content a#simplecheckout_button_confirm,
	#content #simplecheckout_button_confirm.btn {
		width: 100%;
	}
}

@media (max-width: 575px) {
	.simplecheckout-block .checkout-heading,
	.simplecheckout-block .panel-heading {
		padding: 12px 14px;
		font-size: 16px;
	}

	.simplecheckout-block-content {
		padding: 14px;
	}

	.simplecheckout-cart-total {
		padding: 12px 14px;
	}

	#simplecheckout_cart tbody td,
	#simplecheckout_cart thead td {
		padding: 10px 8px;
		font-size: 13px;
	}
}

/* --- корзина в правой плите -------------------------------- */
/* Ширины колонок не трогаем: таблице модуля нужно около 500px,
   и плита под неё рассчитана. Здесь только вид — цвета, рамки,
   отступы. */

#simplecheckout_cart .table-responsive {
	margin: 0;
	border: 0;
}

#simplecheckout_cart .simplecheckout-cart {
	width: 100%;
}

#simplecheckout_cart th.image,
#simplecheckout_cart td.image {
	padding-left: 12px;
}

#simplecheckout_cart th.total,
#simplecheckout_cart td.total {
	padding-right: 12px;
}

#simplecheckout_cart td.image img {
	padding: 3px;
}

#simplecheckout_cart .name a {
	line-height: 1.35;
}

/* в ячейке названия модуль дублирует снимок для узких экранов */
#simplecheckout_cart .name .image {
	display: none;
}

/* --- счётчик количества --------------------------------- */
/* Крестик удаления и минус лежат у модуля в одном <span>, поэтому
   обёрткам даём display: contents — кнопки становятся прямыми
   элементами флекса, и крестик можно вынести из капсулы. */

#simplecheckout_cart .quantity .input-group {
	display: inline-flex;
	align-items: center;
	width: auto;
	max-width: none !important;
	border: 0;
	background: none;
}

#simplecheckout_cart .quantity .input-group-btn {
	display: contents;
}

/* удаление — отдельная иконка, краснеет при наведении */
#content #simplecheckout_cart .quantity .btn-danger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: #8a8f98;
	font-size: 14px;
	margin-right: 10px;
	transition: background .15s ease, color .15s ease;
}

#content #simplecheckout_cart .quantity .btn-danger:hover {
	background: #fdecec;
	color: #e01b1b;
}

/* минус, поле и плюс — одна капсула */
#content #simplecheckout_cart .quantity .btn-minus,
#content #simplecheckout_cart .quantity .btn-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 36px;
	padding: 0;
	border: 1px solid #e3e8ee;
	border-radius: 0;
	background: #f7f8fa;
	color: #1b2838;
	font-size: 12px;
	transition: background .15s ease;
}

#content #simplecheckout_cart .quantity .btn-minus {
	margin-right: -1px;
	border-radius: 10px 0 0 10px;
}

#content #simplecheckout_cart .quantity .btn-plus {
	margin-left: -1px;
	border-radius: 0 10px 10px 0;
}

#content #simplecheckout_cart .quantity .btn-minus:hover,
#content #simplecheckout_cart .quantity .btn-plus:hover {
	background: #eef1f5;
}

#content #simplecheckout_cart .quantity input.form-control {
	width: 46px;
	height: 36px;
	padding: 0;
	border: 1px solid #e3e8ee;
	border-radius: 0;
	background: #fff;
	color: #1b2838;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

#content #simplecheckout_cart .quantity input.form-control:focus {
	border-color: #1f7ae0;
	outline: 2px solid #1f7ae0;
	outline-offset: -2px;
	z-index: 1;
}

html[data-theme="dark"] #content #simplecheckout_cart .quantity .btn-minus,
html[data-theme="dark"] #content #simplecheckout_cart .quantity .btn-plus {
	border-color: #27333f;
	background: #1f2b39;
	color: #e4e9ef;
}

html[data-theme="dark"] #content #simplecheckout_cart .quantity .btn-minus:hover,
html[data-theme="dark"] #content #simplecheckout_cart .quantity .btn-plus:hover {
	background: #27333f;
}

html[data-theme="dark"] #content #simplecheckout_cart .quantity input.form-control {
	border-color: #27333f;
	background: #18222e;
	color: #e4e9ef;
}

html[data-theme="dark"] #content #simplecheckout_cart .quantity .btn-danger {
	color: #93a0ae;
}

/* Пустой контейнер формы онлайн-оплаты всё равно оставался
   флекс-элементом с рамкой и съедал зазор — из-за него формы
   начинались правее заголовка страницы. */
#simplecheckout_payment_form:empty {
	display: none;
}

#simplecheckout_payment_form {
	order: 4;
	flex: 0 0 100%;
}

/* --- телефон: кнопка во всю ширину, корзина без лишних колонок --- */
@media (max-width: 991px) {
	.simplecheckout-button-right {
		flex: 1 1 auto;
		width: 100%;
	}

	#content a#simplecheckout_button_confirm,
	#content #simplecheckout_button_confirm.btn {
		width: 100%;
		min-width: 0;
	}
}

@media (max-width: 767px) {
	/* те же соображения, что и на широком экране: прячем не
	   display:none, а нулевой шириной — иначе ячейки съезжают
	   в соседние столбцы */
	#simplecheckout_cart th.model,
	#simplecheckout_cart td.model,
	#simplecheckout_cart th.price,
	#simplecheckout_cart td.price {
		width: 0;
		max-width: 0;
		padding: 0;
		overflow: hidden;
		font-size: 0;
		color: transparent;
	}

	#simplecheckout_cart col.model,
	#simplecheckout_cart col.price {
		width: 0;
	}

	#simplecheckout_cart td.image img {
		width: 44px;
	}
}

/* ночью строку товара красит тема — снимаем её белый фон */
html[data-theme="dark"] #simplecheckout_cart .simplecheckout-cart,
html[data-theme="dark"] #simplecheckout_cart tbody,
html[data-theme="dark"] #simplecheckout_cart tbody tr,
html[data-theme="dark"] #simplecheckout_cart tbody td {
	background: transparent;
}

html[data-theme="dark"] #simplecheckout_cart td.image img {
	background: #fff;
}

/* === неполный комплект: меньше четырёх шин ================== */
/* Надбавку за неполный комплект покупатель должен заметить именно
   тогда, когда берёт меньше четырёх шин: в окне покупки надпись
   краснеет, в корзине появляется такая же и краснеет строка.
   Красный берём тот же, что у предупреждений корзины, а заливка
   строки мягкая — это подсказка, а не ошибка (так же сделана
   зелёная заливка лучшего предложения на странице товара). */

#us-buy .buy-modal-bottom--warn,
#us-buy .buy-modal-bottom--warn i {
	color: #b3261e;
}

html[data-theme="dark"] #us-buy .buy-modal-bottom--warn,
html[data-theme="dark"] #us-buy .buy-modal-bottom--warn i {
	color: #f08a84;
}

.us-line--few,
#us-cart-modal .us-cart-item--few {
	border-color: #f0bcbc;
	background: #fdf6f6;
}

html[data-theme="dark"] .us-line--few,
html[data-theme="dark"] #us-cart-modal .us-cart-item--few {
	border-color: #5c3030;
	background: #2e1e20;
}

/* Надпись в итогах — прямо над кнопкой оформления. */
.us-cartpage__few,
.us-cart__few {
	margin-bottom: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	background: #fdf0ef;
	color: #b3261e;
	font-size: 13px;
	line-height: 1.45;
}

.us-cartpage__few i,
.us-cart__few i {
	margin-right: 4px;
}

html[data-theme="dark"] .us-cartpage__few,
html[data-theme="dark"] .us-cart__few {
	background: rgba(224, 27, 27, .14);
	color: #f08a84;
}

/* --- «Заканчивается» на витрине ------------------------------ */
/* Правый нижний угол снимка, вровень с нижним классом этикетки
   (шум): слева столбик классов, справа плашка — углы снимка заняты
   поровну, и предупреждение не спорит с лого бренда. Красный наш,
   тот же, что у счётчиков и предупреждений; на странице товара
   такую же наклейку рисует тема своими цветами из настроек. */
.us-card__ends {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	padding: 4px 9px;
	border-radius: 8px;
	background: #e01b1b;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .2px;
	white-space: nowrap;
	box-shadow: 0 4px 10px rgba(224, 27, 27, .22);
}

@media (max-width: 575px) {
	.us-card__ends {
		right: 8px;
		bottom: 8px;
		padding: 3px 7px;
		font-size: 10px;
	}
}

/* --- плашки размеров на странице модели ---------------------- */
/* Блок вынесен из колонки витрины и стоит прямым ребёнком
   контейнера, как шапка страницы: боковые отступы колонки
   (24px, на телефоне 18px) съедали ширину, и в ряд влезали
   только две плашки.

   На телефоне вдобавок сужаем боковые отступы самой плашки:
   с 14px остаётся около 104px на плашку и три в ряд требуют
   330px — на экране 387 это впритык. С 10px плашка около 96px,
   и три столбца держатся уверенно от 360px. */
@media (max-width: 575px) {
	.us-chips-block--sizes .us-chip {
		padding: 0 10px;
	}
}

/* Те же плашки, что у моделей бренда на странице товара; выбранная
   залита тёмным, как активная кнопка переключателя вида. Блок
   стоит над списком, поэтому снизу отступ больше. */
.us-chips-block--sizes {
	margin-bottom: 20px;
}

.us-chip.is-on {
	border-color: #1b2838;
	background: #1b2838;
	color: #fff;
}

.us-chip--reset {
	font-weight: 700;
}

html[data-theme="dark"] .us-chip.is-on {
	border-color: #e4e9ef;
	background: #e4e9ef;
	color: #0f1720;
}

/* === карточка товара: перестроение на узких экранах ============ */

/* --- колонки и ссылки под фото ------------------------------- */
@media (max-width: 991px) {
	/* Колонки заявлены на всю ширину, но ряд не переносился: обе
	   сжимались и делили экран пополам, из-за чего плашки складов
	   оставались в 417px и ломались по одному факту в строку. */
	.us-product-top {
		flex-wrap: wrap;
	}

	/* Переходы к модели и типоразмеру нужны, пока фото стоит сбоку
	   и липнет. Колонки пошли друг под другом — те же переходы есть
	   ниже по странице, и под фото они только добавляют высоты. */
	.us-links {
		display: none;
	}
}

/* --- факты в плашке склада: по два в ряд ---------------------- */
/* Четыре факта (город, год, наличие, страна) в строку помещаются
   только в широкой колонке. Дальше раскладываем их сеткой по два
   равной ширины: строка не распадается на «3 + 1», а потом на один
   факт в ряд. */
@media (max-width: 1279px) {
	.us-offers__facts {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.us-offers__fact,
	.us-offers__item span.us-offers__fact-body {
		min-width: 0;
	}

	.us-offers__item span.us-offers__fact-value,
	.us-offers__item span.us-offers__fact-label {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* --- два склада в ряд ----------------------------------------- */
/* 768–991: колонка уже во всю ширину, а плашка в столбик занимает
   половину — показываем по два склада рядом, прокрутки меньше.
   Внутри плашки порядок: два факта, ещё два, цена, кнопка. */
@media (min-width: 768px) and (max-width: 991px) {
	.us-offers__item .us-offers__facts,
	.us-offers__item .us-offers__price-wrap,
	.us-offers__item .us-offers__buy {
		width: 100%;
		flex: 1 1 100%;
		margin-left: 0;
	}

	/* кнопка покупки — на всю строку, иначе одинокий квадрат */
	.us-offers__buy .us-offers__btn {
		width: 100%;
	}

	/* auto-fit: когда склад один, пустая колонка схлопывается
	   и плашка занимает всю ширину, как на узких экранах. */
	.us-offers {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
		gap: 8px;
		align-items: start;
	}

	/* Единственный склад: места хватает — цена и кнопка встают
	   в строку под фактами, а не каждая своей полосой. */
	.us-offers__item--single .us-offers__price-wrap {
		flex: 0 1 auto;
		width: auto;
	}

	.us-offers__item--single .us-offers__buy {
		flex: 0 0 auto;
		width: auto;
		margin-left: auto;
	}

	.us-offers__item--single .us-offers__btn {
		width: auto;
	}

	.us-offers__item {
		flex-wrap: wrap;
		margin-bottom: 0;
	}

	.us-offers__facts {
		flex: 1 1 100%;
	}

	.us-offers__price-wrap {
		flex: 1 1 100%;
		margin-left: 0;
	}

	.us-offers__buy {
		flex: 1 1 100%;
		width: 100%;
	}

	/* кнопка «показать ещё» — через оба столбца */
	button.us-offers__more {
		grid-column: 1 / -1;
	}
}

/* --- самая узкая плашка: всё столбиком ------------------------ */
/* Цена уже не становится рядом с фактами, поэтому четыре строки:
   два факта, ещё два, цена, кнопка покупки во всю ширину. */
@media (max-width: 575px) {
	/* Цена — по центру плашки: под фактами она читается как итог. */
	.us-offers__item .us-offers__price-wrap {
		justify-content: center;
	}

	/* На узкой кнопке один значок корзины выглядит загадкой —
	   добавляем подпись. Текст берём из подсказки кнопки,
	   он уже переведён. */
	.us-offers__buy .us-offers__btn:after {
		content: attr(data-tip);
		margin-left: 8px;
		font-size: 14px;
		font-weight: 700;
	}

	/* Единственный поставщик: цена и кнопка в плашке повторяют
	   то, что стоит выше в карточке, — на телефоне это лишняя
	   высота. */
	.us-offers__item--single .us-offers__price-wrap,
	.us-offers__item--single .us-offers__buy {
		display: none;
	}

	.us-offers__item .us-offers__facts,
	.us-offers__item .us-offers__price-wrap,
	.us-offers__item .us-offers__buy {
		width: 100%;
		flex: 1 1 100%;
		margin-left: 0;
	}

	/* кнопка покупки — на всю строку, иначе одинокий квадрат */
	.us-offers__buy .us-offers__btn {
		width: 100%;
	}

	.us-offers__price-wrap {
		flex: 1 1 100%;
		margin-left: 0;
	}

	.us-offers__buy {
		flex: 1 1 100%;
		width: 100%;
		margin-left: 0;
	}

	/* Способы оплаты: не влезают в строку — каждый на свою и во всю
	   ширину. Прежде они переносились по одному, и блок «прыгал». */
	.us-terms__pay {
		flex: 1 1 100%;
		justify-content: flex-start;
	}

}

/* --- отзывы: счётчик кружком и порядок на телефоне ------------ */
/* Число отзывов читается как счётчик корзины и закладок в шапке —
   тем же кружком, а не в скобках. */
.us-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	margin-left: 2px;
	padding: 0 4px;
	border-radius: 8px;
	/* Кружок — отметкой у верхнего края подписи, как степень
	   в формуле, а не по центру строки. */
	align-self: flex-start;
	vertical-align: top;
	margin-top: 2px;
	background: #e01b1b;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* у выбранной закладки фон тёмный — кружок делаем светлым */
.us-product-nav-item-active .us-count {
	background: #fff;
	color: #1b2838;
}

@media (max-width: 767px) {
	/* Тема на узком экране делает список закладок блочным, и каждая
	   занимала свою строку, даже когда они помещались рядом.
	   Возвращаем строку: влезают — идут рядом, не влезают — каждая
	   на всю ширину, без лесенки из полупустых строк. */
	ul.us-product-description-nav {
		/* У темы здесь display: block !important (responsive.css) —
		   отсюда и закладки по одной в строке. Перебить можно только
		   тем же способом. */
		display: flex !important;
		flex-wrap: wrap;
		gap: 8px;
	}

	.us-product-description-nav .us-product-nav-item,
	.us-product-description-nav .us-product-nav-item:not(:last-child) {
		flex: 1 1 auto;
		margin-bottom: 0;
	}

	.us-product-description-nav .us-product-nav-item a,
	.us-product-description-nav .us-product-nav-item a:hover {
		width: 100%;
		justify-content: center;
	}

	/* Кнопку «Написать отзыв» скрипт карточки переносит под список. */
	.us-reviews__write--moved {
		display: block;
		width: 100%;
		margin-top: 16px;
	}
}

/* Популярные бренды: лишние ряды прячет скрипт карточки. Подрезаем
   уже со средних экранов — там список уходил на семь рядов. */
@media (max-width: 991px) {
	.us-brands__link--hidden {
		display: none;
	}

	button.us-brands__more {
		margin-top: 10px;
	}
}

/* --- зазор между фото и названием на телефоне ----------------- */
/* С 767 тема переводит ряд колонок в display: block !important
   (responsive.css), и общий отступ ряда (gap) перестаёт работать —
   белая плашка фото прилипала к плашке с названием. Возвращаем
   отступ самой колонке. */
@media (max-width: 767px) {
	.us-product-top .us-product-left {
		margin-bottom: 16px;
	}
}

/* --- один поставщик: склад перед ценой ------------------------ */
/* В плашке единственного склада на телефоне не показываются цена
   и кнопка — остаются город, год и наличие. Это сведения о товаре,
   поэтому они идут сразу под названием, до цены и покупки. */
@media (max-width: 575px) {
	.us-product-right--single {
		display: flex;
		flex-direction: column;
	}

	.us-product-right--single > * {
		order: 5;
	}

	.us-product-right--single > .us-product-title-block {
		order: 1;
	}

	.us-product-right--single > .us-offers {
		order: 2;
		margin-bottom: 14px;
	}

	.us-product-right--single > .us-product-info {
		order: 3;
	}

	.us-product-right--single > .us-product-actions {
		order: 4;
	}
}

/* --- Страница «Оплата и доставка» --------------------------- */
/* Страница лежит на общей белой плашке .us-content, поэтому блоки
   условий тут без своего фона и тени: их делят заголовок и отступ.
   Строки остаются серыми плашками, как в карточке товара, — ночные
   правила к ним уже написаны. */
.us-content .us-info__block + .us-info__block {
	margin-top: 30px;
}

.us-info__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.us-info__grid--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Примечания разной длины, поэтому плашки равняются по верху,
   а не по середине, как одиночная строка в карточке. */
.us-info__grid .us-terms__row {
	align-items: flex-start;
	padding: 14px 16px;
}

/* Значки и логотипы разной ширины — отводим им общую колонку,
   иначе заголовки строк идут лесенкой. */
.us-info__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 70px;
	min-height: 30px;
}

/* Тема вставляет в каждый <img> описания свой class, затирая наш,
   поэтому размер и переключение день/ночь держит обёртка. */
.us-info__logo {
	display: inline-flex;
	max-width: 100%;
}

.us-info__logo img {
	width: 100%;
	height: auto;
}

.us-info__logo--np {
	width: 34px;
}

.us-info__logo--pay {
	width: 66px;
}

/* тёмный вариант логотипа нужен только ночью */
.us-info__logo--night {
	display: none;
}

html[data-theme="dark"] .us-info__logo--pay:not(.us-info__logo--night) {
	display: none;
}

html[data-theme="dark"] .us-info__logo--night {
	display: inline-flex;
}

/* Сроки: заголовок несёт сам срок, плашка под ним — оговорки. */
.us-info__note {
	padding: 14px 16px;
	border-radius: 12px;
	background: #f7f8fa;
}

.us-content .us-info__note p {
	margin: 0 0 8px;
	color: #5c6673;
	font-size: 13px;
	line-height: 1.5;
}

.us-content .us-info__note p:last-child {
	margin-bottom: 0;
}

.us-terms__ico--clock {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.3 2'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.3 2'/%3E%3C/g%3E%3C/svg%3E");
}

/* наличные: купюра со знаком гривны */
.us-terms__rico--cash {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2.5'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2.5'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/g%3E%3C/svg%3E");
}

/* терминал: карта с волнами бесконтактной оплаты */
.us-terms__rico--pos {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='13' height='12' rx='2.5'/%3E%3Cpath d='M2 10h13M5 14h3'/%3E%3Cpath d='M18 8.5a5 5 0 0 1 0 7M20.8 6.2a8.4 8.4 0 0 1 0 11.6'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='13' height='12' rx='2.5'/%3E%3Cpath d='M2 10h13M5 14h3'/%3E%3Cpath d='M18 8.5a5 5 0 0 1 0 7M20.8 6.2a8.4 8.4 0 0 1 0 11.6'/%3E%3C/g%3E%3C/svg%3E");
}

/* безналичный расчёт: счёт на оплату */
.us-terms__rico--invoice {
	-webkit-mask-image: url("../img/ico-invoice.svg");
	mask-image: url("../img/ico-invoice.svg");
}

@media (max-width: 991px) {
	.us-info__grid--three {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575px) {
	.us-info__grid,
	.us-info__grid--three {
		grid-template-columns: 1fr;
	}

	.us-info__ico {
		flex-basis: 52px;
	}
}

html[data-theme="dark"] .us-info__note {
	background: #1f2b39;
}

html[data-theme="dark"] .us-content .us-info__note p {
	color: #93a0ae;
}

/* --- выход в весь каталог из раздела ------------------------- */
/* Поставщик иногда относит шину не к тому разделу: легковую —
   во внедорожные и наоборот. Из категории её не видно, поэтому под
   выбранными значениями даём тот же набор фильтров по всему
   каталогу. Синий, а не зелёный: это переход, а не покупка. */
html .us-flt .us-flt__all {
	display: block;
	margin-top: 8px;
	padding: 9px 12px;
	border-radius: 10px;
	background: #eef4fb;
	color: #1f7ae0;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

html .us-flt .us-flt__all:hover {
	background: #1f7ae0;
	color: #fff;
}

.us-flt__all-note {
	margin-top: 6px;
	color: #8a8f98;
	font-size: 11px;
	line-height: 1.35;
	text-align: center;
}

html[data-theme="dark"] .us-flt .us-flt__all {
	background: rgba(31, 122, 224, .16);
	color: #6fb0f2;
}

html[data-theme="dark"] .us-flt .us-flt__all:hover {
	background: #1f7ae0;
	color: #fff;
}

/* --- значки заголовков ---------------------------------------- */
/* Те же рисунки, что в блоках условий карточки товара: доставка,
   адрес, оплата. Значок рисуется маской, поэтому красится цветом
   текста и в ночной теме светлеет вместе с ним. */
.simplecheckout-block .checkout-heading:before,
.simplecheckout-block .panel-heading:before {
	content: '';
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	background: #1b2838;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* ссылка в заголовке («Я зарегистрирован», «Изменить») — к правому краю */
.simplecheckout-block .checkout-heading-button {
	margin-left: auto;
}

#simplecheckout_cart .checkout-heading:before,
#simplecheckout_cart .panel-heading:before {
	-webkit-mask-image: url("../img/ico-cart.svg");
	mask-image: url("../img/ico-cart.svg");
}

#simplecheckout_shipping .checkout-heading:before,
#simplecheckout_shipping .panel-heading:before {
	-webkit-mask-image: url("../img/delivery-fast.svg");
	mask-image: url("../img/delivery-fast.svg");
}

#simplecheckout_shipping_address .checkout-heading:before,
#simplecheckout_shipping_address .panel-heading:before,
#simplecheckout_payment_address .checkout-heading:before,
#simplecheckout_payment_address .panel-heading:before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
}

#simplecheckout_payment .checkout-heading:before,
#simplecheckout_payment .panel-heading:before,
#simplecheckout_payment_form .checkout-heading:before,
#simplecheckout_payment_form .panel-heading:before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 10h19M6 15h4'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 10h19M6 15h4'/%3E%3C/g%3E%3C/svg%3E");
}

/* покупатель: такого значка в карточке не было, рисуем той же
   линией, что и остальные — круг головы и плечи */
#simplecheckout_customer .checkout-heading:before,
#simplecheckout_customer .panel-heading:before,
#simplecheckout_login .checkout-heading:before,
#simplecheckout_login .panel-heading:before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.8'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.8'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/g%3E%3C/svg%3E");
}

/* комментарий: пузырь из кнопки сообщений */
#simplecheckout_comment .checkout-heading:before,
#simplecheckout_comment .panel-heading:before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 9.9 9.9 0 0 1-4.2-.9L3 21l1.9-4.3A8.4 8.4 0 0 1 12 3.1a8.4 8.4 0 0 1 9 8.4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 9.9 9.9 0 0 1-4.2-.9L3 21l1.9-4.3A8.4 8.4 0 0 1 12 3.1a8.4 8.4 0 0 1 9 8.4z'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .simplecheckout-block .checkout-heading:before,
html[data-theme="dark"] .simplecheckout-block .panel-heading:before {
	background: #e4e9ef;
}

/* --- знаки перевозчиков и платёжных сервисов ----------------- */
/* Рядом с названием варианта ставим тот же знак, что в карточке
   товара и на странице оплаты и доставки. Рисуем фоном в ::after,
   чтобы не трогать разметку модуля: он собирает её сам. */
.simplecheckout .radio label[for^=r_nova_poshta]:after,
.simplecheckout .radio label[for^=free]:after,
.simplecheckout .radio label[for^=delivery]:after,
.simplecheckout .radio label[for=liqpay]:after {
	content: '';
	flex: 0 0 auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* склад и курьер — оба Новой почты */
.simplecheckout .radio label[for^=r_nova_poshta]:after,
.simplecheckout .radio label[for^=free]:after {
	width: 18px;
	height: 18px;
	background-image: url(../img/np-mark.svg);
}

.simplecheckout .radio label[for^=delivery]:after {
	width: 52px;
	height: 20px;
	background-image: url(../img/delivery-group.svg);
}

.simplecheckout .radio label[for=liqpay]:after {
	width: 54px;
	height: 15px;
	background-image: url(../img/liqpay.svg);
}

/* у этих двух знаков надпись тёмная — ночью берём светлый вариант */
html[data-theme=dark] .simplecheckout .radio label[for^=delivery]:after {
	background-image: url(../img/delivery-group-dark.svg);
}

html[data-theme=dark] .simplecheckout .radio label[for=liqpay]:after {
	background-image: url(../img/liqpay-dark.svg);
}

/* --- ловушка для ботов --------------------------------------- */
/* Поле формы, которого человек не видит и до которого не доберётся
   табом. Робот заполняет всё подряд — по заполненному полю заявку
   и отсеиваем. Убираем за край экрана, а не display: none: часть
   ботов пропускает скрытые поля. */
.us-hny {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- пустая корзина в оформлении ----------------------------- */
/* Кнопка возврата в каталог: синяя, как остальные переходы —
   зелёный у нас только у покупки. */
#content a.us-empty-btn,
a.us-empty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 22px;
	border: 0;
	border-radius: 10px;
	background: #1f7ae0;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

#content a.us-empty-btn:hover,
a.us-empty-btn:hover {
	background: #1765bd;
	color: #fff;
	text-decoration: none;
}

/* --- подвал держится низа экрана ----------------------------- */
/* На коротких страницах (пустая корзина, «спасибо», ошибка) подвал
   уезжал к середине и висел в воздухе. Страница — колонка во всю
   высоту окна, подвал прижат отступом: лучше пустое место над ним,
   чем парящая плашка. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body > footer {
	margin-top: auto;
	/* Плашка подвала упиралась в последний блок страницы — заметнее
	   всего на витрине, где снизу карточки и страницы списка. Фон
	   у самого подвала прозрачный, поэтому отступ внутри него даёт
	   обычный зазор между блоками. */
	padding-top: 22px;
}

/* Ниже 1200 закладки живут горизонтальной плашкой у низа экрана:
   теперь, когда подвал прижат, она накрывала подпись студии. */
@media (max-width: 1199px) {
	body > footer {
		padding-bottom: 68px;
	}
}

/* --- полосы на главной: место для подъёма карточки ----------- */
/* Полоса прокручивается по горизонтали, а это обрезает и то, что
   выходит за верхний край: при наведении карточка поднимается
   на 2px, и её рамка пряталась под обрез. Отступ сверху даём полосе,
   а наружу забираем обратно — расстояние до заголовка не меняется. */
.us-viewed__scroll,
.us-top__scroll {
	margin-top: -6px;
	padding-top: 6px;
}

/* ===== Ночь: доводка ========================================= */

/* --- фотографии --------------------------------------------- */
/* Снимки товаров сделаны на белом фоне, и ночью каждый из них
   читается как белая плитка. Чтобы плитки везде выглядели
   одинаково, скругляем сами снимки — углы обрезаются вместе
   с белым полем. */
/* Поле — частью самого снимка: padding внутрь, фон белый. Так
   белая плитка остаётся ровно по месту картинки и не меняет
   раскладку списков. */
/* `img { background: none !important }` в теме перебивает обычное
   объявление, поэтому здесь важность нужна. */
html[data-theme="dark"] .us-card__photo img {
	box-sizing: border-box;
	padding: 10px;
	background: #fff !important;
	border-radius: 12px;
}

html[data-theme="dark"] .us-sizes__photo img {
	box-sizing: border-box;
	padding: 6px;
	background: #fff !important;
	border-radius: 10px;
}

html[data-theme="dark"] .us-product-photo-main img,
html[data-theme="dark"] .us-gal__photo img,
html[data-theme="dark"] .us-gal__stage img {
	box-sizing: border-box;
	padding: 16px;
	background: #fff !important;
	border-radius: 14px;
}

/* логотип бренда в превью лежит поверх снимка — ему поле не нужно */
html[data-theme="dark"] .us-card__brand img {
	padding: 0;
	background: none !important;
	border-radius: 0;
}

/* --- подсветка в шапке --------------------------------------- */
/* Днём наведение подсвечивается почти белым — ночью это пятно.
   Берём едва заметную вуаль поверх тёмного. */
html[data-theme="dark"] .us-bar__link:hover,
html[data-theme="dark"] .us-bar__msg:hover {
	background: rgba(255, 255, 255, .06);
}

/* --- подложки, которых днём нет ------------------------------ */
/* Общее ночное правило красит целый список блоков, но у части из
   них днём фона нет вовсе: обёртка витрины с фильтром, верх
   карточки товара, секции бокового фильтра. Ночью они давали
   лишнюю плашку под плашкой. */
html[data-theme="dark"] .us-category-content,
html[data-theme="dark"] .us-product-top,
html[data-theme="dark"] .ocfilter-option,
html[data-theme="dark"] .ocf-option-values {
	background-color: transparent;
}

/* --- выбранные значения фильтра ------------------------------ */
html[data-theme="dark"] .us-flt .selected-options button.btn {
	background: #27333f;
	color: #e4e9ef;
}

html[data-theme="dark"] .us-flt .selected-options button.btn:hover {
	background: #e01b1b;
	color: #fff;
}

/* --- галочка «Разноширокие шины» ----------------------------- */
/* У неё свои правила рядом с подбором размера, и ночная раскраска
   галочек фильтра её не доставала. */
html[data-theme="dark"] .us-flt__switch input {
	border-color: #3a4a5c;
	background: linear-gradient(180deg, #1f2b39 0%, #18222e 100%);
	box-shadow: none;
}

html[data-theme="dark"] .us-flt__switch input:checked {
	border-color: #1f7ae0;
	background: linear-gradient(180deg, #2d8ef0 0%, #1f7ae0 100%);
}

/* --- знак шипов в превью ------------------------------------- */
/* Картинка, а не маска: у знака свой красный контур, маской он стал
   бы одноцветным. Размер — как у соседних значков строки. */
.us-card__spike {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	object-fit: contain;
}

/* --- ночь: наведение на разделы главной ---------------------- */
/* Ночное правило кнопок перебивало дневной :hover — у него
   специфичность выше из-за атрибута темы, и наведение пропадало. */
html[data-theme="dark"] .us-types .us-types__btn:hover {
	border-color: #6fb0f2;
	background: #27333f;
	color: #6fb0f2;
}

/* --- ночь: выпадающий список городов ------------------------- */
/* Поле «Город» на оформлении рисует select2 своими стилями —
   светлыми. Красим и само поле, и раскрытый список. */
html[data-theme="dark"] .select2-selection--single,
html[data-theme="dark"] .select2-selection--multiple {
	background: #1f2b39 !important;
	border-color: #3a4a5c !important;
	color: #e4e9ef;
}

html[data-theme="dark"] .select2-selection__rendered {
	color: #e4e9ef !important;
}

html[data-theme="dark"] .select2-selection__placeholder {
	color: #93a0ae !important;
}

html[data-theme="dark"] .select2-selection__arrow b {
	border-top-color: #93a0ae !important;
}

html[data-theme="dark"] .select2-dropdown {
	background: #18222e;
	border-color: #3a4a5c;
	color: #e4e9ef;
}

html[data-theme="dark"] .select2-search__field {
	background: #1f2b39 !important;
	border-color: #3a4a5c !important;
	color: #e4e9ef !important;
}

html[data-theme="dark"] .select2-results__option {
	background: transparent;
	color: #c7ced6;
}

html[data-theme="dark"] .select2-results__option--highlighted,
html[data-theme="dark"] .select2-results__option[aria-selected="true"] {
	background: #1f7ae0 !important;
	color: #fff !important;
}

/* --- подвал: текущая страница -------------------------------- */
/* Отметку ставит скрипт подвала. Цветом и насыщенностью, без
   подчёркивания: в списке из десяти строк подчёркивание читается
   как ошибка вёрстки. */
html .us-footer-link--here {
	color: #1f7ae0;
	font-weight: 700;
}

html[data-theme="dark"] .us-footer-link--here {
	color: #6fb0f2;
}

/* --- страница контактов: способы связи ----------------------- */
/* Блок стоит рядом с формой: письмо подождёт, а позвонить или
   написать в мессенджер можно сразу. Геометрия и цвета — общие
   с плашками шапки. */
.us-contact-ways {
	flex: 0 0 300px;
	align-self: flex-start;
	padding: 22px;
	border: 1px solid #e3e8ee;
	border-radius: 14px;
	background: #f7f8fa;
}

.us-contact-ways__title {
	margin-bottom: 14px;
	color: #1b2838;
	font-size: 17px;
	font-weight: 700;
}

.us-contact-ways__phones {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}

html .us-contact-ways__phone {
	color: #1b2838;
	font-size: 19px;
	font-weight: 700;
	text-decoration: none;
}

html .us-contact-ways__phone:hover {
	color: #1f7ae0;
}

.us-contact-ways__btns {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 18px;
}

html .us-contact-ways__btn,
html button.us-contact-ways__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 42px;
	padding: 0 16px;
	border: 1px solid #e3e8ee;
	border-radius: 10px;
	background: #fff;
	color: #1b2838;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

html .us-contact-ways__btn:hover,
html button.us-contact-ways__btn:hover {
	border-color: #1f7ae0;
	color: #1f7ae0;
}

/* значок каждого канала своего цвета — как в плашке шапки */
.us-contact-ways__btn--viber i {
	color: #7360f2;
}

.us-contact-ways__btn--tg i {
	color: #2aabee;
}

/* звонок — главное действие блока */
html button.us-contact-ways__btn--call {
	border-color: #2fa84f;
	background: #2fa84f;
	color: #fff;
}

html button.us-contact-ways__btn--call:hover {
	border-color: #268c42;
	background: #268c42;
	color: #fff;
}

html button.us-contact-ways__btn--call i {
	color: #fff;
}

.us-contact-ways__list {
	margin: 0;
}

.us-contact-ways__list dt {
	margin-bottom: 2px;
	color: #8a8f98;
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.us-contact-ways__list dd {
	margin: 0 0 12px;
	color: #1b2838;
	font-size: 14px;
	line-height: 1.4;
}

.us-contact-ways__list dd:last-child {
	margin-bottom: 0;
}

html .us-contact-ways__list a {
	color: #1f7ae0;
	text-decoration: none;
}

html .us-contact-ways__list a:hover {
	text-decoration: underline;
}

@media (max-width: 991px) {
	.us-contact-ways {
		flex: 1 1 100%;
		margin-top: 18px;
	}
}

html[data-theme="dark"] .us-contact-ways {
	border-color: #27333f;
	background: #1f2b39;
}

html[data-theme="dark"] .us-contact-ways__title,
html[data-theme="dark"] .us-contact-ways__list dd {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-contact-ways__phone {
	color: #e4e9ef;
}

html[data-theme="dark"] .us-contact-ways__btn,
html[data-theme="dark"] button.us-contact-ways__btn {
	border-color: #27333f;
	background: #18222e;
	color: #e4e9ef;
}

html[data-theme="dark"] button.us-contact-ways__btn--call {
	border-color: #2fa84f;
	background: #2fa84f;
	color: #fff;
}

/* Ряд контактов: слева форма, справа одной колонкой приглашение
   написать и способы связи. Раньше блок связи вклинивался между
   ними, и текст уезжал к правому краю в отрыве от формы. */
.us-content-contact {
	gap: 24px;
	align-items: flex-start;
}

.us-content-contact .us-contact-form-box {
	flex: 1 1 420px;
	width: auto;
	min-width: 0;
}

.us-contact-aside {
	flex: 0 1 340px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* в колонке «флекс 0 0 300px» превратился бы в высоту */
.us-contact-aside .us-content-contact-offer,
.us-contact-aside .us-contact-ways {
	flex: 0 0 auto;
	align-self: stretch;
	width: auto;
	min-width: 0;
}

@media (max-width: 991px) {
	.us-content-contact {
		flex-wrap: wrap;
	}

	.us-content-contact .us-contact-form-box,
	.us-contact-aside {
		flex: 1 1 100%;
	}

	.us-content-contact .us-content-border {
		display: none;
	}
}

/* --- ночь: наведение на бренды в типоразмерах ----------------- */
/* Ночная заливка плашки перебивала дневной :hover по специфичности,
   и наведение переставало читаться. Нужен свой ночной :hover. */
html[data-theme="dark"] .us-sizes a.us-sizes__brand:hover {
	border-color: #6fb0f2;
	background: #27333f;
	color: #6fb0f2;
}

/* --- подсказки поиска: фото в рамке, цена по правому краю ------ */
/* Кадр у шины обрезан вплотную к краям объекта, поэтому фото нужна
   светлая подложка со скруглением — как в витрине и карточке. */
.us-ls__photo {
	padding: 3px;
	border: 1px solid #e3e8ee;
	border-radius: 8px;
	background: #fff;
}

html[data-theme="dark"] .us-ls__photo {
	border-color: #27333f;
}

.us-ls__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}

/* --- мобильная шапка: значок «информация» --------------------- */
/* В самом файле заливка #DEDEDE — на светлой плашке её почти не
   видно. Ночью значок светлый и так, поэтому правим только день. */
html:not([data-theme="dark"]) .us-navbar-info,
html:not([data-theme="dark"]) .us-head__chips-info img {
	filter: brightness(.45);
}

/* --- страница контактов: карта отдельной плашкой --------------- */
.us-content-contact-img {
	overflow: hidden;
	border: 1px solid #e3e8ee;
	border-radius: 14px;
}

.us-content-contact-img iframe {
	display: block;
	border: 0;
}

html[data-theme="dark"] .us-content-contact-img {
	border-color: #27333f;
}

/* часы работы идут двумя строками: приём заказов и склад */
.us-contact-ways__open {
	display: block;
}

/* --- ночь: выезжающая панель поиска --------------------------- */
/* Ниже 991 строка поиска выезжает панелью под шапкой, и у неё своя
   белая подложка — ночью она светила рамкой вокруг тёмного поля. */
@media (max-width: 991px) {
	html[data-theme="dark"] .us-head__search {
		background: #18222e;
		box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
	}
}

/* --- страница контактов: приглашение над формой ---------------- */
/* Тема отводила тексту половину ряда — над формой ему нужна вся
   ширина, иначе строка обрывается на середине. */
.us-content-contact-offer.us-contact-intro {
	width: auto;
	margin-bottom: 20px;
}

/* --- страница поиска: поле и категории в столбик --------------- */
/* До 576 колонки ряда встают друг под друга вплотную: у темы между
   ними нет вертикального промежутка. */
#product-search #content > .row:not(.us-search-block) {
	row-gap: 12px;
}

/* --- страница контактов: черта между формой и связью ----------- */
/* Ряд выровнен по верху, и разделителю темы нечем расти — от него
   оставался обрубок в пару пикселей. Карточку связи и так видно. */
.us-content-contact .us-content-border {
	display: none;
}

/* --- ночь: заголовок выдачи на странице поиска ----------------- */
html[data-theme="dark"] #product-search .us-content-title {
	color: #e4e9ef;
}

/* --- Быстрая регистрация (Simple) ----------------------------- */
/* Строку Simple отдаёт бутстраповской сеткой: подпись слева, поле
   справа, у строки отрицательные поля. Нам нужна наша раскладка —
   подпись над полем, — поэтому сетку внутри строки снимаем, а всё
   остальное приходит из правил «Формы раздела Аккаунт» выше. */
#account-simpleregister .form-horizontal .form-group {
	margin-left: 0;
	margin-right: 0;
}

#account-simpleregister .form-group > label.control-label,
#account-simpleregister .form-group > div[class*="col-"] {
	float: none;
	width: auto;
	max-width: none;
	padding: 0;
	text-align: left;
}

/* заголовок группы Simple отдаёт строкой формы с legend внутри */
#account-simpleregister .simple-row-header {
	margin-bottom: 0;
}

#account-simpleregister legend {
	margin-bottom: 14px;
	padding-bottom: 10px;
	border: 0;
	border-bottom: 1px solid #eef1f5;
	color: #1b2838;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}

#account-simpleregister .simpleregister-have-account {
	margin-bottom: 20px;
	color: #5c6673;
	font-size: 14px;
}

#account-simpleregister .simpleregister-have-account a {
	color: #1f7ae0;
	font-weight: 600;
	text-decoration: none;
}

#account-simpleregister .simpleregister-have-account a:hover {
	text-decoration: underline;
}

#account-simpleregister .simplecheckout-error-text {
	margin-top: 6px;
	color: #e01b1b;
	font-size: 13px;
}

#account-simpleregister .simplecheckout-tooltip {
	margin-top: 6px;
	color: #8a8f98;
	font-size: 13px;
}

/* кнопка — синяя, как «Продолжить» на остальных формах кабинета */
#account-simpleregister .simpleregister-button-block {
	display: flex;
	justify-content: flex-end;
	margin-top: 18px;
	padding: 0;
	border: 0;
	background: none;
}

html #account-simpleregister #simpleregister_button_confirm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	height: 44px;
	padding: 0 26px;
	border: 0;
	border-radius: 10px;
	background: #1f7ae0;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

html #account-simpleregister #simpleregister_button_confirm:hover {
	background: #1765bd;
	color: #fff;
	text-decoration: none;
}

/* Две колонки даёт правило для fieldset в разделе «Аккаунт».
   Заголовку группы и почте нужна вся ширина: адрес длиннее
   остальных полей, а заголовок делит форму на части. */
@media (min-width: 768px) {
	#account-simpleregister .simple-row-header,
	#account-simpleregister .row-register_email {
		grid-column: 1 / -1;
	}
}

html[data-theme="dark"] #account-simpleregister legend {
	border-bottom-color: #27333f;
	color: #e4e9ef;
}

html[data-theme="dark"] #account-simpleregister .simpleregister-have-account {
	color: #b9c2cd;
}

/* --- Табы подбора: столбиком, пока не влезают в строку --------- */
/* Два заголовка по 22px перестают помещаться в одну строку около
   740: второй переносился со своим отступом слева, а подчёркивание
   оставалось под первым — выглядело как сбитая вёрстка. */
@media (max-width: 767px) {
	.us-pick__tabs {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		margin-bottom: 14px;
	}

	.us-pick .us-pick__tab {
		padding-bottom: 8px;
	}

	.us-pick .us-pick__tab + .us-pick__tab {
		margin-left: 0;
	}

	/* подчёркивание активного прячем: столбиком хватает яркости */
	.us-pick .us-pick__tab.is-on:after {
		display: none;
	}
}

/* --- SEO-блок: лестница заголовков ----------------------------- */
/* H1 страницы был мельче h2 внутри текста: своего размера у h2 не
   было, и приходил бутстраповский 30px. Расставляем ступени шкалы
   30 / 22 / 16 и один цвет на все заголовки блока — тот, которым
   до сих пор показывался h2. */
.us-seo > h1.us-home__title {
	font-size: 30px;
}

.us-seo__text h2 {
	margin: 18px 0 8px;
	font-size: 22px;
	font-weight: 700;
}

.us-seo > h1.us-home__title,
.us-seo__text h2,
.us-seo__text h3 {
	color: #4b5563;
}

html[data-theme="dark"] .us-seo > h1.us-home__title,
html[data-theme="dark"] .us-seo__text h2,
html[data-theme="dark"] .us-seo__text h3 {
	color: #e4e9ef;
}

/* --- описание способа доставки и оплаты ------------------------ */
/* Описание есть не у всех вариантов, и набранное тем же кеглем,
   что и подписи, оно читалось как ещё одна строка выбора. Делаем
   его тише: мельче текст, тихая подложка со скруглением, левый
   край — по подписи варианта (кружок 20px плюс зазор 7px). */
#content .simplecheckout-method-description {
	margin: 6px 0 12px 27px;
}

#content .simplecheckout-method-description label,
#content .simplecheckout-methods-description {
	display: block;
	margin: 0;
	padding: 10px 14px;
	border-radius: 10px;
	background: #f7f8fa;
	color: #5c6673;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
}

html[data-theme="dark"] #content .simplecheckout-method-description label,
html[data-theme="dark"] #content .simplecheckout-methods-description {
	background: #1f2b39;
	color: #b9c2cd;
}

@media (max-width: 575px) {
	#content .simplecheckout-method-description {
		margin-left: 0;
	}
}

/* --- кнопка «Показать ещё» у предложений складов -------------- */
/* Тема красит все кнопки синим (`html [type=button]`), и это правило
   специфичнее одного класса — поэтому здесь нужен тег в селекторе,
   иначе наш светлый фон не применяется и синий текст сливается. */
html button.us-offers__more {
	border-color: #e3e8ee;
	background: #f7f8fa;
	color: #1f7ae0;
	font-weight: 600;
}

html button.us-offers__more:hover {
	border-color: #c7ced7;
	background: #eef1f5;
	color: #1765bd;
}

html[data-theme="dark"] button.us-offers__more {
	border-color: #27333f;
	background: #1f2b39;
	color: #6fb0f2;
}

html[data-theme="dark"] button.us-offers__more:hover {
	border-color: #3a4a5c;
	background: #27333f;
	color: #8cc2f7;
}

/* --- плашка «такого размера нет» над разделом ----------------- */
/* Сюда уводит подбор, когда по выбранным параметрам пусто. Это
   сообщение, а не часть страницы: закрывается крестиком и само
   уходит через 10 секунд. Жёлтый, а не красный — покупатель
   ничего не сделал неправильно, просто такого размера нет. */
.us-nofilter {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid rgba(214, 69, 69, .4);
	border-radius: 10px;
	background: #fdeaea;
	color: #b02a2a;
	font-size: 14px;
	line-height: 1.4;
	transition: opacity .35s ease, transform .35s ease;
}

/* Уходит затуханием: класс вешает скрипт, из разметки плашку
   убираем уже после перехода. */
.us-nofilter.is-gone {
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
}

.us-nofilter__text { flex: 1 1 auto; }

/* Тег в селекторе обязателен: `html [type=button]` темы красит
   кнопки синим и одним классом не перебивается. */
html button.us-nofilter__close {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #e01b1b;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

html button.us-nofilter__close:hover {
	background: #e01b1b;
	color: #fff;
}

/* Ночью — то же оформление, что у сообщения в подборе: светлый фон
   на тёмной подложке бьёт по глазам. */
html[data-theme="dark"] .us-nofilter {
	border-color: rgba(224, 27, 27, .35);
	background: rgba(224, 27, 27, .12);
	color: #ff9a9a;
}

html[data-theme="dark"] button.us-nofilter__close { color: #ff9a9a; }

html[data-theme="dark"] button.us-nofilter__close:hover {
	background: #e01b1b;
	color: #fff;
}