/*
 * Услуга на витрине: плашка на странице товара и блок внутри позиции корзины.
 *
 * Оформление повторяет то, к чему на сайте уже привыкли: оранжевая рамка
 * акцентного цвета и скругление, как у остальных блоков рядом с корзиной.
 * Классы при этом свои — плагин не должен зависеть от того, что тема
 * сохранит у себя ту или иную вёрстку.
 */

/* ------------------------------------------ Плашка на странице товара
 *
 * Задача плашки — не «сообщить про услугу», а снять возражение: везти
 * шины никуда не надо. Поэтому выгода вынесена в подпись, а цена стоит
 * рядом с названием и помечена как начальная.
 */

.lpr-box {
	--lpr-accent: #da4900;
	--lpr-accent-dark: #b83d00;

	/* Колонкой: кнопка подробностей встаёт под текстом, а не отъедает
	   у него ширину — иначе цена не помещается рядом с названием. */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 9px;
	margin: 20px 0;
	padding: 13px 14px;
	border: 1.5px solid #f0d9cc;
	border-radius: 14px;
	background: #fffaf7;
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

/* Услуг у товара может быть несколько, и плашки идут стопкой. Между
   соседними зазор меньше, чем до чужих блоков: они об одном и том же,
   и полный отступ разрывал бы их на два несвязанных предложения. */
.lpr-box + .lpr-box {
	margin-top: -8px;
}

/* Выбранная услуга подсвечена: покупатель должен видеть, что она в заказе */
.lpr-box.is-on {
	border-color: var(--lpr-accent);
	background: linear-gradient(135deg, #fff4ee 0%, #fffdfc 70%);
	box-shadow: 0 2px 14px rgba(218, 73, 0, .09);
}

.lpr-box-main {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	cursor: pointer;
}

.lpr-box-check {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin: 0;
	accent-color: var(--lpr-accent);
	cursor: pointer;
}

.lpr-box-icon {
	display: inline-block;
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 23px 23px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23da4900' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 3v5.8M12 15.2V21M3 12h5.8M15.2 12H21'/%3E%3C/svg%3E");
	box-shadow: 0 1px 4px rgba(218, 73, 0, .16);
}

.lpr-box-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	/* Занять всё свободное место: без этого блок сжимался по содержимому,
	   и цена не помещалась рядом с названием, уезжая на вторую строку. */
	flex: 1 1 auto;
	min-width: 0;
}

.lpr-box-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 7px;
}

.lpr-box-title {
	color: #1f1f1f;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
}

.lpr-box-price {
	color: var(--lpr-accent-dark);
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
}

.lpr-box-price .woocommerce-Price-amount,
.lpr-box-price bdi {
	color: inherit;
}

.lpr-box-note {
	color: #6f6f6f;
	font-size: 12px;
	line-height: 1.4;
}

/* Отступ равен ширине галочки и значка — кнопка выравнивается по тексту */
.lpr-box-actions {
	padding-left: 81px;
}

.lpr-box-more {
	flex: 0 0 auto;
	padding: 7px 13px;
	border: 1px solid #e6c9b8;
	border-radius: 999px;
	background: #fff;
	color: var(--lpr-accent) !important;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.lpr-box-more:hover {
	background: var(--lpr-accent);
	border-color: var(--lpr-accent);
	color: #fff !important;
}

@media (max-width: 560px) {
	.lpr-box-actions {
		padding-left: 0;
	}

	.lpr-box-more {
		width: 100%;
	}
}

/* Несколько услуг — одна плашка.
 *
 * Две отдельные рамки занимают вдвое больше высоты при том же смысле:
 * повторяются рамка, отступы и целая строка под кнопкой «Подробнее».
 * Поэтому рамка становится общей, а каждая услуга — строкой в ней:
 * галочка, значок, название с пояснением и «Подробнее» справа.
 *
 * Разметка самих плашек не меняется — браузер ищет их по data-lpr-box,
 * и своя разметка для сгруппированного вида означала бы вторую копию
 * всей логики страницы товара.
 */

.lpr-box-group {
	--lpr-accent: #da4900;
	--lpr-accent-dark: #b83d00;

	margin: 20px 0;
	border: 1.5px solid #f0d9cc;
	border-radius: 14px;
	background: #fffaf7;
	/* Подсветка выбранной строки доходит до самого края рамки, и без
	   обрезки её углы торчали бы за скруглением. */
	overflow: hidden;
}

.lpr-box-group .lpr-box {
	flex-direction: row;
	/* По верху, а не по центру: галочка, значок и «Подробнее» относятся
	   к названию услуги, и при пояснении в три строки центрирование
	   уводило их к середине абзаца — управление переставало читаться
	   как часть заголовка. */
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 9px 13px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.lpr-box-group .lpr-box + .lpr-box {
	/* Чуть темнее фона выбранной строки: на #fff3ec прежняя черта
	   пропадала, и две услуги сливались в один абзац. */
	border-top: 1px solid #efd2c2;
}

/* Выбранная строка подсвечена мягче, чем отдельная плашка: рамка и тень
   здесь общие, и повторять их у каждой строки означало бы нарисовать
   те же две плашки, только внутри третьей. */
.lpr-box-group .lpr-box.is-on {
	background: #fff3ec;
	box-shadow: none;
}

/* Значок мельче: в строке он стоит рядом с галочкой, а не возглавляет
   отдельный блок. */
.lpr-box-group .lpr-box-icon {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	background-size: 18px 18px;
	margin-top: 1px;
}

.lpr-box-group .lpr-box-main {
	align-items: flex-start;
	gap: 10px;
}

/* Галочку опускаем на высоту строки заголовка: сверху у неё нет своего
   текста, и без сдвига она встаёт выше буквы. */
.lpr-box-group .lpr-box-check {
	margin-top: 6px;
}

/* «Подробнее» переезжает вправо от текста: отдельная строка под ним
   стоила по сорок пикселей на услугу и ничего не добавляла. */
.lpr-box-group .lpr-box-actions {
	flex: 0 0 auto;
	padding-left: 0;
	margin-top: 1px;
}

.lpr-box-group .lpr-box-more {
	padding: 5px 11px;
}

@media (max-width: 560px) {
	/* На узком экране кнопка справа отжимает у названия половину ширины —
	   возвращаем её под текст, как у одиночной плашки. */
	.lpr-box-group .lpr-box {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.lpr-box-group .lpr-box-actions {
		padding-left: 42px;
	}
}

/* ------------------------------------------------- Окно с подробностями */

.lpr-modal[hidden] {
	display: none;
}

.lpr-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.lpr-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(24, 18, 14, .55);
	animation: lpr-fade .2s ease-out;
}

@keyframes lpr-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes lpr-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

.lpr-modal-window {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 620px;
	max-height: calc(100vh - 40px);
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
	overflow: hidden;
	animation: lpr-rise .24s ease-out;
}

.lpr-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	color: #6f6f6f;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.lpr-modal-close:hover {
	background: #f1f1f1;
	color: #1f1f1f;
}

.lpr-modal-scroll {
	overflow-y: auto;
	padding: 28px 30px 22px;
}

.lpr-modal-head {
	margin-bottom: 20px;
	padding-right: 34px;
}

.lpr-modal-badge {
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 12px;
	border-radius: 999px;
	background: #fff0e8;
	color: #b83d00;
	font-size: 12px;
	font-weight: 700;
}

.lpr-modal-title {
	margin: 0 0 10px;
	color: #17110d;
	font-size: 23px;
	font-weight: 700;
	line-height: 1.25;
}

.lpr-modal-lead {
	margin: 0;
	color: #52504e;
	font-size: 14px;
	line-height: 1.55;
}

/* Преимущества — галочками: список выгод читается быстрее абзаца */

.lpr-modal-benefits {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 9px;
}

.lpr-modal-benefits li {
	position: relative;
	padding-left: 30px;
	color: #2b2724;
	font-size: 14px;
	line-height: 1.45;
}

.lpr-modal-benefits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #edf7ee no-repeat center;
	background-size: 12px 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d6e1f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* Честный блок про цену: спокойный тон, без красного — это не тревога,
   а предупредительность. Доверие продаёт лучше, чем умолчание. */

.lpr-modal-honest {
	display: flex;
	gap: 12px;
	margin-bottom: 22px;
	padding: 14px 16px;
	border-radius: 12px;
	background: #fbf7ef;
	border: 1px solid #f0e4cd;
}

.lpr-modal-honest-icon {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	background: no-repeat center / contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5762a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}

.lpr-modal-honest p {
	margin: 0;
	color: #6b5a36;
	font-size: 13px;
	line-height: 1.5;
}

/* Адреса */

.lpr-modal-places h3 {
	margin: 0 0 12px;
	color: #17110d;
	font-size: 16px;
	font-weight: 700;
}

/* Карта филиалов.
 *
 * Рисуется JS API Яндекса, а не встраиваемым виджетом: тот игнорирует цвет
 * метки (проверены оранжевый, красный и зелёный — всегда синяя) и не даёт
 * открыть адрес по клику. Поэтому и метка, и подсказка здесь свои.
 */

.lpr-modal-map {
	position: relative;
	height: 280px;
	margin-bottom: 12px;
	border-radius: 12px;
	overflow: hidden;
	background: #f2f1ef;
}

/* Карта из конструктора Яндекса вставляется своим кодом — там свои размеры */
.lpr-modal-map.is-custom {
	height: auto;
	line-height: 0;
}

.lpr-modal-map.is-custom iframe {
	display: block;
	width: 100%;
	min-height: 260px;
	border: 0;
}

.lpr-map-canvas {
	position: absolute;
	inset: 0;
}

/* Пока грузится карта — надпись поверх серого поля, а не пустота */
.lpr-map-note {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	padding: 0 16px;
	color: #8d8a87;
	font-size: 13px;
	text-align: center;
}

.lpr-modal-map.is-ready .lpr-map-note {
	display: none;
}

/* Метка: капля фирменного цвета. Позиционируется сдвигом, потому что
   Яндекс ставит левый верхний угол разметки ровно в точку на карте. */
.lpr-map-pin {
	position: absolute;
	left: -16px;
	top: -44px;
	width: 32px;
	height: 44px;
	cursor: pointer;
	transform-origin: 50% 100%;
	transition: transform .16s ease;
}

.lpr-map-pin:hover {
	transform: scale(1.12);
}

/* Кластер — сколько сервисов рядом; по клику карта приближается */
.lpr-map-cluster {
	position: absolute;
	left: -22px;
	top: -22px;
	width: 44px;
	height: 44px;
	border: 2.5px solid #fff;
	border-radius: 50%;
	background: #da4900;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 39px;
	text-align: center;
	cursor: pointer;
	transition: transform .16s ease;
}

.lpr-map-cluster:hover {
	transform: scale(1.1);
}

/* Подсказка по клику. Внешнюю рамку рисует Яндекс — правим только то,
   что делает её похожей на остальные блоки окна. Селекторы по вхождению:
   в классах Яндекса зашита версия скрипта, и она меняется сама собой. */
.lpr-modal-map [class*="balloon__layout"] {
	border-radius: 12px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18) !important;
}

.lpr-modal-map [class*="balloon__content"] {
	margin: 0 !important;
	padding: 13px 36px 13px 15px !important;
	font-family: inherit !important;
}

.lpr-modal-map [class*="balloon__close-button"] {
	opacity: .5;
}

.lpr-map-balloon {
	max-width: 240px;
}

.lpr-map-balloon b {
	display: block;
	margin-bottom: 4px;
	color: #17110d;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.lpr-map-balloon span {
	display: block;
	margin-bottom: 8px;
	color: #6f6f6f;
	font-size: 12.5px;
	line-height: 1.4;
}

.lpr-map-balloon a {
	color: #da4900 !important;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none !important;
}

.lpr-map-balloon a:hover {
	color: #b83d00 !important;
	text-decoration: underline !important;
}

/* Список адресов — запасной выход. Обычно адреса показывает карта, но
   если она не поднялась (блокировщик, нет сети), покупателю всё равно
   нужно знать, куда ехать. */
.lpr-modal-fallback {
	display: none;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lpr-modal-places.is-map-failed .lpr-modal-fallback {
	display: grid;
}

.lpr-modal-places.is-map-failed .lpr-modal-map {
	height: auto;
	margin-bottom: 10px;
	background: none;
}

.lpr-modal-places.is-map-failed .lpr-map-canvas {
	display: none;
}

.lpr-modal-places.is-map-failed .lpr-map-note {
	position: static;
	transform: none;
	padding: 0;
	color: #8d8a87;
	font-size: 13px;
	text-align: left;
}

.lpr-modal-fallback li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border: 1px solid #eee;
	border-radius: 10px;
	background: #fcfcfc;
}

.lpr-branch-name {
	color: #17110d;
	font-size: 13.5px;
	font-weight: 600;
}

.lpr-branch-address {
	color: #7a7a7a;
	font-size: 12px;
	line-height: 1.35;
}

/* Обещание про согласование — сразу после адресов, где и возникает
   вопрос «а когда и куда». */
.lpr-modal-after-map {
	margin: 14px 0 0;
	padding: 12px 14px;
	border-radius: 10px;
	background: #f6f8f6;
	color: #4a5a4a;
	font-size: 13px;
	line-height: 1.5;
}

@media (max-width: 560px) {
	.lpr-modal {
		padding: 0;
		align-items: flex-end;
	}

	.lpr-modal-window {
		max-width: none;
		max-height: 92vh;
		border-radius: 18px 18px 0 0;
	}

	.lpr-modal-scroll {
		padding: 24px 18px 18px;
	}

	.lpr-modal-title {
		font-size: 20px;
	}

	/* Карта ниже: на телефоне окно и так занимает почти весь экран,
	   а под картой ещё текст про согласование времени. */
	.lpr-modal-map {
		height: 230px;
	}
}

/* ------------------------------------- Услуга внутри позиции корзины
 *
 * WooCommerce выводит данные позиции списком определений и всегда дописывает
 * к подписи двоеточие. Подпись прячем, а обёртки распрямляем: их отступы
 * рассчитаны на строчки вида «Цвет: красный», а не на плашку.
 */

/* Услуг у товара может быть несколько, и у второй ключ «lpr-2»: WooCommerce
   складывает данные позиции в массив, и два одинаковых ключа затёрли бы друг
   друга. Селектор с дефисом ловит все, кроме строки акции (lprpromo),
   у которой свои правила ниже. */

.variation dt.variation-lpr,
.variation dt[class*="variation-lpr-"] {
	display: none !important;
}

.variation dd.variation-lpr,
.variation dd[class*="variation-lpr-"] {
	margin: 8px 0 0 !important;
	padding: 0 !important;
	float: none !important;
	width: auto !important;
	clear: both;
}

.variation dd.variation-lpr p,
.variation dd[class*="variation-lpr-"] p {
	margin: 0 !important;
	padding: 0 !important;
	line-height: normal;
}

/* Между соседними услугами отступ меньше: они об одном и том же товаре. */
.variation dd.variation-lpr + dt + dd[class*="variation-lpr-"],
.variation dd[class*="variation-lpr-"] + dt + dd[class*="variation-lpr-"] {
	margin-top: 4px !important;
}

/* Сама плашка — одной строкой. Слева акцентная полоса: она привязывает
   услугу к товару, под которым стоит, а не оставляет висеть отдельно. */

.lpr-srv {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 7px 7px 10px;
	border-left: 3px solid #da4900;
	border-radius: 0 9px 9px 0;
	background: #fff5f0;
	font-size: 12.5px;
	line-height: 1.3;
}

/* Колесо фоном, а не тегом <svg>: разметка проходит через wp_kses_post(),
   который svg вырезает целиком. */
.lpr-srv-icon {
	display: inline-block;
	flex: 0 0 19px;
	width: 19px;
	height: 19px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23da4900' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 3v5.8M12 15.2V21M3 12h5.8M15.2 12H21'/%3E%3C/svg%3E");
}

.lpr-srv-name {
	flex: 1 1 auto;
	min-width: 0;
	color: #b83d00;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lpr-srv-amount {
	flex: 0 0 auto;
	color: #b83d00;
	font-weight: 700;
	white-space: nowrap;
}

.lpr-srv-amount .woocommerce-Price-amount,
.lpr-srv-amount bdi {
	color: inherit;
}

/* У услуги без цены на месте суммы стоит текст — «уточнит менеджер».
   Он не деньги, и красить его в цену значило бы обещать сумму, которой
   в заказе не будет. Класс ставит PHP: селектор :has() решил бы то же
   самое, но его нет в браузерах постарше, и там текст остался бы
   выкрашенным под цену. */
.lpr-srv-amount.is-text,
.lpr-total-amount.is-text {
	color: #6a6a6a;
	font-weight: 400;
	font-style: italic;
}

/* Колонка сумм на оформлении узкая, и «уточнит менеджер» в кегле цены
   разваливался на две строки, утаскивая крестик под себя. Кегль здесь
   меньше не для красоты: это подпись, а не сумма, и в одну строку она
   читается как продолжение названия услуги. */
.lpr-total-amount.is-text {
	font-size: 12.5px;
	white-space: nowrap;
}

/* В строке позиции места больше, но название всё равно длиннее суммы —
   разрешаем переносить текст, чтобы он не выдавливал название. */
.lpr-srv-amount.is-text {
	white-space: normal;
}

/* Действие. Тег именно <a>: разметка проходит через wp_kses_post(),
   который вырезает <button> вместе с обработчиком. */

.lpr-srv-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: #b3735a !important;
	font-size: 15px;
	line-height: 1;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background .15s ease, color .15s ease;
}

.lpr-srv-action:hover,
.lpr-srv-action:focus {
	background: #f6ded3;
	color: #c1272d !important;
}


/* Значки услуг.
 *
 * Услуг на товаре несколько, и один значок на всех читается как повтор
 * одной и той же услуги. Какой именно — решает настройка услуги, а не этот
 * файл: сюда приезжает только ключ в `data-lpr-icon`. Колесо остаётся
 * значением по умолчанию и живёт в правилах выше.
 *
 * Каждый значок нарисован в поле 24×24 и проверен в НАСТОЯЩИХ пикселях
 * обоих рабочих размеров — 23 px в плашке товара и 19 px в строке корзины.
 * Отсюда правила, которые нельзя нарушать при добавлении новых: фигура
 * в пределах y 5.2…18.8 (иначе значок сидит не по центру кружка), обводка
 * 1.65, никаких деталей тоньше двух единиц — в девятнадцати пикселях они
 * превращаются в грязь. Стопка эллипсов и «домик с шиной» эту проверку
 * не прошли и в наборе не появились.
 *
 * Толщина обводки одна на оба размера намеренно: разделять 1.6 и 1.7 —
 * это вдвое больше правил ради разницы, которой не видно.
 */

/* короб */
.lpr-box[data-lpr-icon="box"] .lpr-box-icon,
.lpr-srv[data-lpr-icon="box"] .lpr-srv-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23da4900' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 5.2h17.2v4.2H3.4z'/%3E%3Cpath d='M5.1 9.4v9.4h13.8V9.4'/%3E%3Cpath d='M9.6 13.6h4.8'/%3E%3C/svg%3E");
}

.lpr-srv.is-offer[data-lpr-icon="box"] .lpr-srv-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 5.2h17.2v4.2H3.4z'/%3E%3Cpath d='M5.1 9.4v9.4h13.8V9.4'/%3E%3Cpath d='M9.6 13.6h4.8'/%3E%3C/svg%3E");
}

/* календарь */
.lpr-box[data-lpr-icon="calendar"] .lpr-box-icon,
.lpr-srv[data-lpr-icon="calendar"] .lpr-srv-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23da4900' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='5.4' width='16.8' height='14.6' rx='2.2'/%3E%3Cpath d='M3.6 10.2h16.8M8.4 3.4v4M15.6 3.4v4'/%3E%3C/svg%3E");
}

.lpr-srv.is-offer[data-lpr-icon="calendar"] .lpr-srv-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='5.4' width='16.8' height='14.6' rx='2.2'/%3E%3Cpath d='M3.6 10.2h16.8M8.4 3.4v4M15.6 3.4v4'/%3E%3C/svg%3E");
}

/* часы */
.lpr-box[data-lpr-icon="clock"] .lpr-box-icon,
.lpr-srv[data-lpr-icon="clock"] .lpr-srv-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23da4900' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 7.2V12l3.4 2'/%3E%3C/svg%3E");
}

.lpr-srv.is-offer[data-lpr-icon="clock"] .lpr-srv-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 7.2V12l3.4 2'/%3E%3C/svg%3E");
}

/* Предложение добавить: приглушено, а действие — словом, потому что
   крестик у неактивной услуги читался бы как «удалить» */

.lpr-srv.is-offer {
	border-left-color: #d5d5d5;
	background: #f7f7f8;
}

.lpr-srv.is-offer .lpr-srv-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 3v5.8M12 15.2V21M3 12h5.8M15.2 12H21'/%3E%3C/svg%3E");
}

.lpr-srv.is-offer .lpr-srv-name,
.lpr-srv.is-offer .lpr-srv-amount {
	color: #4a4a4a;
}

.lpr-srv.is-offer .lpr-srv-action {
	width: auto;
	height: auto;
	padding: 4px 11px;
	border: 1px solid #da4900;
	border-radius: 999px;
	color: #da4900 !important;
	font-size: 11.5px;
	font-weight: 600;
}

.lpr-srv.is-offer .lpr-srv-action:hover {
	background: #da4900;
	color: #fff !important;
}

/* ------------------------------------------------------- Отклик действия */

.lpr-srv.is-busy {
	opacity: .55;
	pointer-events: none;
}

.lpr-srv {
	transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}

/* Подсветка изменившейся суммы: без неё непонятно, что именно поехало */
@keyframes lpr-flash {
	0%   { background-color: rgba(218, 73, 0, .16); }
	100% { background-color: transparent; }
}

.lpr-flash {
	animation: lpr-flash .9s ease-out;
	border-radius: 6px;
}

/* ------------------------------------------------- Панель мини-корзины
 *
 * Тема даёт правильную разметку, но раскладку задаёт скупо: позиция —
 * просто flex с выравниванием по центру, из-за чего фото плавает
 * относительно текста, а строки не выстраиваются по одной линии.
 *
 * Селекторы темы длиннее наших, поэтому здесь !important — иначе пришлось бы
 * дублировать её цепочки и держать их в синхроне при каждом обновлении.
 * Всё ограничено панелью корзины и за её пределы не выходит.
 */

.widget_shopping_cart_content ul.cart_list {
	padding: 0 20px !important;
}

.widget_shopping_cart_content ul.cart_list .mini_cart_item {
	align-items: flex-start !important;
	gap: 14px;
	padding: 18px 0 !important;
	margin: 0 !important;
	border-bottom: 1px solid #eeeeee !important;
}

.widget_shopping_cart_content ul.cart_list .mini_cart_item:last-child {
	border-bottom: 0 !important;
}

/* Фото */

.widget_shopping_cart_content .woocommerce-mini-cart-item__thumbnail {
	flex: 0 0 84px !important;
	width: 84px !important;
	padding-right: 0 !important;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item__thumbnail a {
	display: block;
	line-height: 0;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item__thumbnail img {
	width: 84px !important;
	height: 84px !important;
	max-width: none !important;
	object-fit: contain;
	padding: 6px;
	border: 1px solid #eeeeee;
	border-radius: 12px;
	background: #fff;
}

/* Содержимое */

.widget_shopping_cart_content .woocommerce-mini-cart-item__summary {
	justify-content: flex-start !important;
	gap: 8px;
	padding-top: 2px;
	min-width: 0;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item__name {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding-right: 0 !important;
	font-size: 13.5px !important;
	line-height: 1.4;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item__title {
	color: #1a1a1a;
	font-weight: 600;
	text-decoration: none;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item__title:hover {
	color: #da4900;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item__price {
	margin-top: 0 !important;
	color: #1a1a1a !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.1;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item__price .woocommerce-Price-amount,
.widget_shopping_cart_content .woocommerce-mini-cart-item__price bdi {
	color: inherit !important;
}

/* Плашка услуги: на всю ширину карточки, без флоатов и отступов,
   которые тема рассчитывала на строчки вида «Цвет: красный» */

.widget_shopping_cart_content .woocommerce-mini-cart-item__summary .variation {
	margin: 0 !important;
	display: block !important;
}

.widget_shopping_cart_content .variation dd.variation-lpr,
.widget_shopping_cart_content .variation dd[class*="variation-lpr-"] {
	display: block !important;
	float: none !important;
	margin: 0 !important;
	width: 100%;
}

/* Услуга без цены в панели корзины.
 *
 * Строка здесь вдвое уже, чем на странице корзины, а подпись «уточнит
 * менеджер» длиннее любой суммы — название сжималось до «Шиномонтаж R14 4 ...»
 * и переставало читаться. Разводим их по строкам: название получает всю
 * ширину, подпись уходит под него с отступом на значок (19 px + 9 px зазора).
 * Крестик остаётся на первой строке, у названия, к которому относится.
 *
 * Только для строки без цены: сумма коротка и рядом с названием помещается,
 * а лишняя строка в тесной панели ни к чему.
 */

.widget_shopping_cart_content .lpr-srv.is-note {
	flex-wrap: wrap;
	row-gap: 2px;
}

.widget_shopping_cart_content .lpr-srv.is-note .lpr-srv-name {
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
}

.widget_shopping_cart_content .lpr-srv.is-note .lpr-srv-action {
	order: 3;
	margin-left: auto;
}

.widget_shopping_cart_content .lpr-srv.is-note .lpr-srv-amount {
	order: 4;
	/* Целая строка: без flex-basis в 100% перенос внутри флекса не наступает,
	   и подпись возвращается к названию отжимать у него ширину. */
	flex: 1 0 100%;
	/* Отступ ВНУТРЬ строки, а не полем снаружи. Ширина в 100% плюс внешний
	   отступ — это ширина больше родительской, и панель корзины получала
	   горизонтальную прокрутку ровно в эти двадцать восемь пикселей.
	   Линейкой ловится сразу, глазом — как «что-то дёргается вбок». */
	box-sizing: border-box;
	padding-left: 28px;
	margin-left: 0;
}

/* Низ карточки: количество слева, удаление справа, по одной линии */

.widget_shopping_cart_content .woocommerce-cart-item__qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 2px;
}

.widget_shopping_cart_content .woocommerce-cart-item__qty .quantity {
	margin: 0 !important;
}

.widget_shopping_cart_content a.remove.remove_from_cart_button {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #a2a5a6 !important;
	font-size: 12px;
	text-decoration: none;
}

.widget_shopping_cart_content a.remove.remove_from_cart_button:hover {
	color: #c1272d !important;
}

.widget_shopping_cart_content a.remove .name {
	font-size: 12px !important;
	margin-left: 0 !important;
}

/* --------------------------- Услуга в итогах оформления заказа
 *
 * Колонка товара на чекауте узкая: плашка в ней разваливалась на три
 * строки. Управление перенесено в блок итогов — туда, где сумма услуги
 * и так стоит отдельной строкой.
 */

.woocommerce-checkout-review-order-table .lpr-total-action {
	display: inline-block;
	margin-left: 6px;
	color: #b3735a !important;
	font-size: 15px;
	line-height: 1;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: color .15s ease;
}

.woocommerce-checkout-review-order-table .lpr-total-action:hover {
	color: #c1272d !important;
}

.woocommerce-checkout-review-order-table tr.lpr-total-offer th {
	color: #4a4a4a;
	font-weight: 500;
}

.woocommerce-checkout-review-order-table tr.lpr-total-offer td {
	white-space: nowrap;
}

.woocommerce-checkout-review-order-table .lpr-total-amount {
	color: #6d6d6d;
	margin-right: 8px;
}

.woocommerce-checkout-review-order-table .lpr-total-add {
	display: inline-block;
	padding: 3px 11px;
	border: 1px solid #da4900;
	border-radius: 999px;
	color: #da4900 !important;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background .15s ease, color .15s ease;
}

.woocommerce-checkout-review-order-table .lpr-total-add:hover {
	background: #da4900;
	color: #fff !important;
}

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

/* Поля темы и выбор доставки: !important обязателен — тема ставит этим
   строкам инлайновый display:block из своего обработчика смены города,
   а инлайновый стиль перебивается только важностью. */
body.lpr-fitting-on .lpr-delivery-row,
body.lpr-fitting-on .woocommerce-shipping-totals {
	display: none !important;
}

/* Блок остаётся в разметке, когда услугу сняли: левую колонку формы
   WooCommerce не перерисовывает, и вернуть удалённый блок было бы нечем. */
body:not(.lpr-fitting-on) .lpr-fitting {
	display: none !important;
}

.lpr-fitting {
	--lpr-accent: #da4900;

	margin: 0 0 18px;
	padding: 15px 16px 13px;
	border: 1.5px solid #f0d9cc;
	border-radius: 14px;
	background: #fffaf7;
}

.lpr-fitting-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Значок фоном, а не тегом: та же причина, что и в корзине, — разметку
   блока однажды может понести через wp_kses_post(), который вырежет svg. */
.lpr-fitting-icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	background: center / 22px 22px no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23da4900' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 3v5.8M12 15.2V21M3 12h5.8M15.2 12H21'/%3E%3C/svg%3E");
}

.lpr-fitting-title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #1e1e1e;
}

.lpr-fitting .lpr-fitting-note {
	margin: 7px 0 0 !important;
	font-size: 13px;
	line-height: 1.5;
	color: #5c5c5c;
}

/* fieldset и legend браузеры и темы украшают по-своему: рамкой, отступами,
   всплывающей подписью. Обнуляем явно — иначе блок обрастает чужой рамкой. */
/* wpautop() всё равно обернёт список городов в свой <p> — он считает
   fieldset блочным тегом, а <label> инлайновым, и «висящий» инлайн
   заворачивает в абзац. Разметка от этого не страдает, но чужой отступ
   абзаца раздвинул бы блок. */
.lpr-fitting p:not(.lpr-fitting-note) {
	margin: 0 !important;
	padding: 0 !important;
}

.lpr-fitting .lpr-fitting-cities {
	margin: 13px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	min-width: 0;
}

.lpr-fitting .lpr-fitting-legend {
	display: block !important;
	float: none !important;
	width: auto !important;
	margin: 0 0 7px !important;
	padding: 0 !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: #1e1e1e;
}

/* Строка города — это <label>, а тема задаёт всем подписям формы заказа
   display:block селектором из четырёх классов. Без важности радиокнопка
   и название встают друг под другом, и список разъезжается на полэкрана. */
.lpr-fitting .lpr-fitting-city {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 2px !important;
	padding: 9px 10px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.lpr-fitting .lpr-fitting-city:hover {
	background: #fff3ec;
}

/* Выбранный город подсвечен рамкой: в списке из трёх строк точка радио
   слишком мелкая, чтобы отвечать на вопрос «а что я выбрал». */
.lpr-fitting .lpr-fitting-city.is-chosen,
.lpr-fitting .lpr-fitting-city:has(input:checked) {
	border-color: var(--lpr-accent);
	background: #fff4ee;
}

/* Размеры и отступы важностью: тема правит радиокнопки формы заказа
   собственными правилами, и без этого кружок уезжает от текста. */
.lpr-fitting .lpr-fitting-city input[type="radio"] {
	flex: 0 0 auto;
	width: 17px !important;
	height: 17px !important;
	min-width: 0 !important;
	margin: 1px 0 0 !important;
	padding: 0 !important;
	float: none !important;
	position: static !important;
	opacity: 1 !important;
	accent-color: var(--lpr-accent);
	cursor: pointer;
}

.lpr-fitting .lpr-fitting-city-body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.lpr-fitting .lpr-fitting-city-name {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: #1e1e1e;
}

/* Адреса города — справочно: выбирать конкретный сервис покупателю
   не нужно, но знать, что их пять, полезно. */
.lpr-fitting .lpr-fitting-city-list {
	font-size: 12px;
	line-height: 1.45;
	color: #8a8a8a;
}

.lpr-fitting .lpr-fitting-decline {
	display: inline-block;
	margin: 11px 0 0;
	font-size: 12.5px;
	color: #8a8a8a !important;
	text-decoration: underline !important;
	box-shadow: none !important;
}

.lpr-fitting .lpr-fitting-decline:hover {
	color: var(--lpr-accent) !important;
}

@media (max-width: 480px) {
	.lpr-fitting {
		padding: 13px 12px 11px;
	}

	.lpr-fitting .lpr-fitting-city {
		padding: 9px 6px;
	}
}

/* ==================================================================
   Акции
   ================================================================== */

/* Две цены сразу: одну показывает браузер по галочке услуги. Разметку
   обеих кладёт сервер — собирать сумму на месте значило бы разойтись
   с магазином в разделителе разрядов или в суффиксе цены. */
.lpr-price,
.lpr-price .lpr-price-on {
	display: inline-flex;
	flex-wrap: wrap;
	/* По базовой линии, а не по центру: цифры разного кегля должны стоять
	   на одной строке, иначе маленькая цена висит посреди большой. */
	align-items: baseline;
	gap: 9px;
}

.lpr-price [hidden] {
	display: none !important;
}

/* Зачёркнутая базовая цена: только цвет и линия, размер не трогаем.
   Здесь была ошибка, стоившая читаемости: em задавался и самому <del>,
   и вложенному .woocommerce-Price-amount — множители перемножались,
   и цена рисовалась девятью пикселями. Размер, который даёт тема,
   и так верный. */
.lpr-price del,
.lpr-price del .woocommerce-Price-amount,
.lpr-price del .woocommerce-Price-currencySymbol {
	color: #a3a3a3 !important;
	white-space: nowrap;
	opacity: 1;
}

/* Линия тоньше и светлее самих цифр: сплошная чёрточка в цвет текста
   превращает сумму в кашу, особенно на мелком кегле. */
.lpr-price del {
	text-decoration-line: line-through;
	text-decoration-color: #c9c9c9;
	text-decoration-thickness: 1px;
}

/* ЗАЧЁРКНУТАЯ ЦЕНА НА СТРАНИЦЕ ТОВАРА — решение заказчика от 31 августа 2026.
   Она стоит вплотную к новой цене, и выигрыш человек читает как разницу двух
   сумм: блёклая мелкая цифра рядом с крупной не читается вовсе. Поэтому цифры
   чёрные и того же кегля, а красная линия берёт на себя роль «эта цена больше
   не действует».

   Тема merchant даёт цене 24px, а зачёркнутой — 18px и серый #a0a0a0
   («.single-product div.product .entry-summary .price del» в её woocommerce.css).

   СЕЛЕКТОР НАЧИНАЕТСЯ С body НЕ ДЛЯ КРАСОТЫ. У темы селектор ровно такой же,
   а её woocommerce.css подключается 36-м, наш файл — 17-м: при равной
   специфичности побеждает тот, кто ниже по порядку, то есть тема. Первая
   версия правки поэтому и не сработала — красная линия появилась (её тема
   не задаёт), а размер остался темовым. `body` добавляет один элемент
   в специфичность и снимает зависимость от порядка подключения.

   Правило ограничено .entry-summary намеренно: в каталоге обе цены лежат
   в одной ячейке грида и сменяются анимацией, ширина ячейки считается по самой
   широкой сумме — крупная зачёркнутая цена дёргала бы там всю плитку. */
body.single-product div.product .entry-summary .price del,
body.single-product div.product .entry-summary .price del .woocommerce-Price-amount,
body.single-product div.product .entry-summary .price del .woocommerce-Price-currencySymbol {
	color: #000 !important;
}

body.single-product div.product .entry-summary .price del {
	/* Кегль задаётся ТОЛЬКО у <del>. Вложенному .woocommerce-Price-amount его
	   ставить нельзя: множители перемножатся, и цена нарисуется мелкотой —
	   эту ошибку в этом же файле уже делали, см. комментарий выше. */
	font-size: 28px;
	text-decoration-color: #d92c2c;
	text-decoration-thickness: 2px;
}

/* У темы к зачёркнутой цене приклеен margin-right: 13px, а у нашего блока
   расстояние между суммами задаёт gap флекса. Вместе они дают двойной зазор,
   и цены расползаются. Отступ снимаем только там, где работает gap. */
body.single-product div.product .entry-summary .price .lpr-price-on del {
	margin-right: 0;
}

/* Тема подчёркивает <ins> по умолчанию браузера — цена с подчёркиванием
   читается как ссылка. */
.lpr-price ins,
.lpr-price ins .woocommerce-Price-amount {
	background: none !important;
	text-decoration: none !important;
	font-weight: inherit;
	color: inherit;
}

/* ------------------------------------------------------------------
   Цена в каталоге: «было — стало» по кругу
   ------------------------------------------------------------------ */

/* Обе цены — в одной ячейке сетки, друг поверх друга. Не рядом и не
   переключением display: рядом они в тесную карточку не помещаются,
   а от смены display капсула прыгала бы в ширину на каждом обороте
   и дёргала всю плитку каталога. Ячейка одна, ширина её — по самой
   широкой из двух сумм, и она не меняется никогда. */
.lpr-price.lpr-price-anim {
	--lpr-cycle: 8s;
	display: inline-block;
	position: relative;
	/* Выше бегущей рамки капсулы: та рисуется фоном родителя, и без
	   собственного слоя цифры оказались бы под её тенью. */
	z-index: 1;
	gap: 0;
}

.lpr-price-flip {
	display: inline-grid;
	/* Обе цены в одну и ту же ячейку. Больше строк и колонок не будет:
	   всё, что попадёт внутрь, ляжет туда же. */
	grid-template-areas: "lpr";
}

.lpr-price-flip > * {
	grid-area: lpr;
	/* Не растягивать: растянутый на всю ячейку <del> увёл бы за собой
	   линию зачёркивания — она чертится по его ширине, а не по цифрам. */
	justify-self: center;
	align-self: center;
}

/* Обороты у обеих цен считаются от одного цикла и от одной точки отсчёта:
   разойдись они хоть на кадр — в карточке на мгновение окажутся две суммы
   сразу, и покупатель прочитает не ту. */
.lpr-price-anim .lpr-price-was,
.lpr-price-anim .lpr-price-now {
	animation-duration: var(--lpr-cycle, 8s);
	animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
	animation-iteration-count: infinite;
	animation-delay: var(--lpr-shift, 0s);
	animation-fill-mode: both;
}

.lpr-price-anim .lpr-price-was {
	position: relative;
	white-space: nowrap;
	/* Линию чертим сами: штатное подчёркивание нельзя ни анимировать,
	   ни провести слева направо. */
	text-decoration: none;
	animation-name: lpr-price-was;
}

.lpr-price-anim .lpr-price-now {
	white-space: nowrap;
	animation-name: lpr-price-now;
}

/* Пока старая цена показана одна, она полноценная, а не «бывшая»:
   серый, уместный рядом с новой ценой, здесь читался бы как неактивная
   кнопка. */
.lpr-price-anim .lpr-price-was,
.lpr-price-anim .lpr-price-was .woocommerce-Price-amount,
.lpr-price-anim .lpr-price-was .woocommerce-Price-currencySymbol {
	color: #1c1c1c !important;
}

/* Линия зачёркивания — фирменным оранжевым: на чёрных цифрах чёрная черта
   сливается с ними в кашу, а цветная сразу говорит, чья это работа. */
.lpr-price-anim .lpr-price-was::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	/* Не 50%: середина строки проходит ниже середины цифр, и линия
	   на глаз съезжает к нижнему краю. */
	top: 46%;
	height: 2px;
	border-radius: 1px;
	background: #da4900;
	transform: scaleX(0);
	transform-origin: left center;
	animation: lpr-price-strike var(--lpr-cycle, 8s) linear infinite var(--lpr-shift, 0s) both;
}

/* Капсула цены — та, что рисует тема. Класс ставит браузер: разметку
   `<span class="price">` отдаёт тема, и дописать в неё что-либо с сервера
   нельзя. Лента бежит фоном по border-box, а поверх неё лежит белая
   заливка padding-box — от этого цветным остаётся только контур. Своя
   рамка поверх чужой дала бы две линии подряд.

   Селектор длиной с тему намеренно, и дело не в весе правил: белая заливка
   закрывает всё, кроме контура, и там, где рамки у цены нет вовсе, она
   закрасила бы фон под ценой. Капсулу рисует только каталог — только
   в нём правило и работает. */
ul.products li.product .price.lpr-price-box {
	--lpr-cycle: 8s;
	position: relative;
	border-color: transparent !important;
	background-color: transparent !important;
	background-image:
		linear-gradient(#fff, #fff),
		linear-gradient(90deg, #ff7a2f 0%, #ff3d7f 16%, #a45cff 32%, #2f8fff 48%, #22c58b 64%, #ffb02f 82%, #ff7a2f 100%) !important;
	background-origin: padding-box, border-box !important;
	background-clip: padding-box, border-box !important;
	background-repeat: no-repeat, repeat !important;
	/* Лента начинается и заканчивается одним цветом, поэтому стыкуется
	   сама с собой и шва на обороте не видно. Цвета идут по кругу целиком,
	   а не бликом по тёплому фону: рамка должна переливаться, а не мигать.
	   Лента вдвое длиннее капсулы — иначе радуга умещается в неё целиком
	   и вместо перелива получается полосатый контур. */
	background-size: auto, 200px 100% !important;
	animation:
		lpr-price-border 3s linear infinite var(--lpr-shift, 0s),
		lpr-price-pulse var(--lpr-cycle, 8s) ease-out infinite var(--lpr-shift, 0s);
}

/* Карточки в ряду не должны мигать в один такт: одновременная вспышка
   двадцати капсул читается как неисправность страницы, вразнобой —
   как живая витрина. Сдвиг отрицательный: положительный заставил бы
   первые секунды после загрузки ждать. */
ul.products li.product:nth-child(4n+2) {
	--lpr-shift: -2s;
}

ul.products li.product:nth-child(4n+3) {
	--lpr-shift: -4s;
}

ul.products li.product:nth-child(4n+4) {
	--lpr-shift: -6s;
}

/* Вся карточка акции дышит тёплой тенью. Значок и цена говорят об акции
   тому, кто уже смотрит на карточку, — свечение выделяет её в плитке
   раньше, чем покупатель начал читать. Класс ставит сервер, а не браузер:
   тема собирает <li> штатным wc_product_class().

   Тень берёт самое сильное свечение к моменту, когда в капсуле появляется
   акционная цена, — карточка и цена делают одно движение, а не два. */
ul.products li.product.lpr-promo-card .product-inner {
	animation: lpr-card-glow var(--lpr-cycle, 8s) ease-in-out infinite var(--lpr-shift, 0s);
}

/* Ушла из виду — остановилась. Бесконечная анимация за краем экрана
   продолжает есть батарею телефона, а таких карточек на странице
   каталога двадцать. Тень карточки тут дороже всего: размытие в тридцать
   пикселей перерисовывается каждый кадр и на всю её ширину.

   Метка ставится на карточку, если сервер её пометил, иначе на капсулу, —
   поэтому в списке есть и она сама, и её потомки. */
.lpr-price-idle,
.lpr-price-idle .product-inner,
.lpr-price-idle .price,
.lpr-price-idle .lpr-price-was,
.lpr-price-idle .lpr-price-was::after,
.lpr-price-idle .lpr-price-now {
	animation-play-state: paused !important;
}

/* Цикл начинается и заканчивается на акционной цене — той, которую
   покупатель заплатит. Так её видно и в первую секунду после загрузки,
   и большую часть каждого оборота, а остановка анимации в любой точке
   оставляет на экране верную сумму. */
@keyframes lpr-price-now {
	0%, 50% {
		opacity: 1;
		/* Именно none, а не translateY(0): в покое у цены не должно быть
		   преобразования вовсе, иначе браузер держит её отдельным слоем
		   и рисует шрифт по-другому — мягче, чем весь текст вокруг. */
		transform: none;
	}

	55%, 84% {
		opacity: 0;
		transform: translateY(-10px);
	}

	85% {
		opacity: 0;
		transform: translateY(10px);
	}

	92%, 100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes lpr-price-was {
	0%, 52% {
		opacity: 0;
		transform: translateY(10px);
	}

	58%, 83% {
		opacity: 1;
		transform: none;
	}

	88% {
		opacity: 0;
		transform: translateY(-10px);
	}

	100% {
		opacity: 0;
		transform: translateY(10px);
	}
}

/* Черта проводится слева направо, живёт ровно столько, сколько видна
   старая цена, и гаснет вместе с ней. */
@keyframes lpr-price-strike {
	0%, 63% {
		opacity: 0;
		transform: scaleX(0);
	}

	64% {
		opacity: 1;
		transform: scaleX(0);
	}

	74%, 84% {
		opacity: 1;
		transform: scaleX(1);
	}

	88%, 100% {
		opacity: 0;
		transform: scaleX(1);
	}
}

/* Ни одного кадра без тени: карточка, у которой свечение пропадает
   совсем, читается не как живая, а как мигающая. Меняется глубина,
   а не наличие. */
@keyframes lpr-card-glow {
	0%, 100% {
		box-shadow: 0 6px 22px rgba(218, 73, 0, 0.10);
	}

	44% {
		box-shadow: 0 3px 12px rgba(218, 73, 0, 0.05);
	}

	92% {
		box-shadow: 0 12px 34px rgba(218, 73, 0, 0.20);
	}
}

@keyframes lpr-price-border {
	from {
		background-position: 0 0, 0 0;
	}

	to {
		background-position: 0 0, 200px 0;
	}
}

/* Капсула откликается на смену цены — коротко, дважды за оборот.
   Второй раз заметнее: там появляется цена, ради которой всё показано. */
@keyframes lpr-price-pulse {
	0%, 48% {
		box-shadow: 0 0 0 0 rgba(218, 73, 0, 0);
	}

	56% {
		box-shadow: 0 0 0 4px rgba(218, 73, 0, 0.10);
	}

	63%, 86% {
		box-shadow: 0 0 0 0 rgba(218, 73, 0, 0);
	}

	92% {
		box-shadow: 0 0 0 7px rgba(218, 73, 0, 0.20);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(218, 73, 0, 0);
	}
}

/* Просьбу системы «поменьше движения» выполняем буквально: обе цены
   встают рядом обычной парой «зачёркнуто — стало», как на любой
   распродаже. Смысл сохранён, движения нет. */
@media (prefers-reduced-motion: reduce) {
	ul.products li.product.lpr-promo-card .product-inner {
		animation: none !important;
		box-shadow: 0 6px 22px rgba(218, 73, 0, 0.12);
	}

	ul.products li.product .price.lpr-price-box {
		animation: none !important;
		border-color: #f0c4a5 !important;
		background-image: linear-gradient(#fff, #fff) !important;
	}

	.lpr-price-flip {
		display: inline-flex;
		align-items: baseline;
		gap: 8px;
	}

	.lpr-price-anim .lpr-price-was,
	.lpr-price-anim .lpr-price-now {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.lpr-price-anim .lpr-price-was {
		text-decoration: line-through;
		text-decoration-color: #da4900;
		text-decoration-thickness: 2px;
	}

	.lpr-price-anim .lpr-price-was::after {
		display: none;
	}
}

/* Строка про акцию внутри позиции корзины. Та же механика, что у услуги:
   WooCommerce выводит данные позиции списком определений и всегда
   дописывает к подписи двоеточие, поэтому подпись прячем. */
.variation dt.variation-lprpromo {
	display: none !important;
}

.variation dd.variation-lprpromo {
	margin: 6px 0 0 !important;
	padding: 0 !important;
	float: none !important;
	width: auto !important;
	clear: both;
}

.variation dd.variation-lprpromo p {
	margin: 0 !important;
	padding: 0 !important;
	line-height: normal;
}

.lpr-promo-note {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	background: #f2f2f2;
	color: #6a6a6a;
	font-size: 12px;
	line-height: 1.5;
}

/* Скидка получена — цвет акции. Не получена — серый: это предупреждение,
   а не награда, и красить его как награду было бы враньём. */
.lpr-promo-note.is-on {
	background: #fff1e9;
	color: #b03a00;
}

/* Строка-пояснение в итогах оформления: услуги там выбрать нельзя,
   и вместо её строки стоит текст акции.

   Ячейка только держит место — вид у блока внутри. Иначе тема выравнивает
   содержимое ячеек этой таблицы по центру и добавляет свои отступы,
   и сообщение растекалось на всю ширину между суммами. */
.woocommerce-checkout-review-order-table tr.lpr-promo-row td {
	padding: 6px 0 2px !important;
	border: 0 !important;
	background: none !important;
	text-align: left !important;
}

.lpr-promo-line {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 10px 12px;
	border: 1px solid #f0ddd1;
	border-radius: 8px;
	background: #fffaf7;
	color: #6a5a52;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
}

/* Значок фоном, а не тегом: разметку блока однажды может понести через
   wp_kses_post(), который вырезает svg целиком. */
.lpr-promo-line-icon {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 1px;
	background: center / contain no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23da4900' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M11 12h1v4h1'/%3E%3C/svg%3E");
}

/* Значок акции живёт в стопке значков темы над картинкой товара, поэтому
   размеры, отступы и тень берутся у неё (.wplb_box_on_image). Своего здесь
   только цвет: рядом стоят нейтральные белые плашки сезонности и размера,
   и акция обязана среди них выделяться, иначе её никто не заметит.

   Селектор с классом темы, а не один .lpr-badge: правило должно быть
   не короче её собственного, иначе белый фон перебьёт наш. */
.custom-sezonnost-icon .wplb_box_on_image.lpr-badge {
	background: #da4900;
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.02em;
	box-shadow: rgba(218, 73, 0, 0.28) 0 6px 18px 0;
}

.custom-sezonnost-icon .wplb_box_on_image.lpr-badge span {
	color: #fff;
}

/* ------------------------------------------------------------------
   Рассказ об акции: значок «?», пузырь и блок на странице товара
   ------------------------------------------------------------------ */

/* Значок стоит внутри чужих плашек — оранжевой в каталоге и светлой
   в корзине, — поэтому цвет берёт у текста рядом.

   Маской, а не фоновой картинкой: маска красится currentColor и потому
   подстраивается под любое окружение, тогда как картинку пришлось бы
   держать в двух цветах и угадывать, какая где нужна. Сам «?» в разметке
   остаётся — он озвучивается вместе с aria-label, — но не рисуется. */
.lpr-promo-help {
	display: inline-block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-left: 6px;
	font-size: 0;
	line-height: 0;
	/* ПО СЕРЕДИНЕ СТРОКИ, А НЕ НА ТРИ ПИКСЕЛЯ НИЖЕ БАЗОВОЙ ЛИНИИ.
	   Значок стоит в четырёх местах с разным кеглем: плашка на фото 13px,
	   строка в корзине 12px, оформление заказа 14px, мини-корзина 11px.
	   Жёсткий сдвиг подходил ровно одному из них, а в мелком тексте значок
	   съезжал под строку — заказчик увидел это сразу во всех.

	   Размер оставлен в пикселях намеренно: em здесь выродится в ноль,
	   потому что font-size: 0 скрывает текстовый «?» внутри ссылки —
	   он нужен озвучке, но не рисуется. */
	vertical-align: middle;
	text-decoration: none !important;
	background-color: currentColor;
	color: inherit !important;
	opacity: 0.55;
	cursor: help;
	-webkit-mask: url("data:image/svg+xml,<svg 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'><path d='M12 17V16.9929M12 14.8571C12 11.6429 15 12.3571 15 9.85714C15 8.27919 13.6568 7 12 7C10.6567 7 9.51961 7.84083 9.13733 9M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml,<svg 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'><path d='M12 17V16.9929M12 14.8571C12 11.6429 15 12.3571 15 9.85714C15 8.27919 13.6568 7 12 7C10.6567 7 9.51961 7.84083 9.13733 9M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z'/></svg>") center / contain no-repeat;
	transition: opacity .15s ease;
}

.lpr-promo-help:hover,
.lpr-promo-help:focus {
	opacity: 1;
	text-decoration: none !important;
}

/* Пузырь живёт на верхнем уровне страницы: внутри карточки каталога
   его обрезало бы переполнением, а в корзине — перекрывало соседями. */
.lpr-promo-bubble {
	/* Экранные координаты: в верхнем слое отсчёт идёт от окна. */
	position: fixed;
	/* Раскладку popover по умолчанию (по центру экрана) сбрасываем —
	   пузырь встаёт у значка, а не посреди страницы. */
	inset: auto;
	margin: 0;
	padding: 13px 15px;
	/* Запасной путь для браузеров без верхнего слоя: предельный z-index
	   и позиция в конце body. Панель мини-корзины стоит с тем же числом,
	   при равенстве побеждает тот, кто ниже в разметке. */
	z-index: 2147483647;
	width: 290px;
	max-width: calc(100vw - 24px);
	border: 1px solid #f0ddd1;
	border-radius: 10px;
	background: #fff;
	box-shadow: rgba(100, 100, 111, 0.22) 0 8px 30px 0;
	color: #4a4a4a;
	font-size: 13px;
	line-height: 1.5;
	text-align: left;
	overflow: visible;
}

/* Затемнения за пузырём быть не должно: это подсказка, а не окно. */
.lpr-promo-bubble::backdrop {
	background: transparent;
}

.lpr-promo-bubble[hidden] {
	display: none !important;
}

.lpr-promo-bubble-text {
	white-space: pre-line;
}

.lpr-promo-bubble-more {
	display: inline-block;
	margin-top: 10px;
	padding: 6px 13px;
	border-radius: 6px;
	background: #da4900;
	color: #fff !important;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none !important;
}

.lpr-promo-bubble-more:hover {
	background: #b83d00;
	color: #fff !important;
}

/* Блок на странице товара — над плашкой шиномонтажа. Тот же тёплый
   тон, что у неё, но без рамки: две рамки подряд читаются как спор
   двух блоков за внимание. */
.lpr-promo-intro {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0 0 12px;
	padding: 12px 14px;
	border-radius: 10px;
	background: #fff4ec;
}

.lpr-promo-intro-icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	background: center / contain no-repeat;
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23da4900' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M15.5 8.5L8.5 15.5M9.5 9.5H9.51M14.5 14.5H14.51M10 9.5C10 9.77614 9.77614 10 9.5 10C9.22386 10 9 9.77614 9 9.5C9 9.22386 9.22386 9 9.5 9C9.77614 9 10 9.22386 10 9.5ZM15 14.5C15 14.7761 14.7761 15 14.5 15C14.2239 15 14 14.7761 14 14.5C14 14.2239 14.2239 14 14.5 14C14.7761 14 15 14.2239 15 14.5ZM16.3287 4.75855C17.0676 4.77963 17.8001 5.07212 18.364 5.636C18.9278 6.19989 19.2203 6.9324 19.2414 7.67121C19.2623 8.40232 19.2727 8.76787 19.2942 8.85296C19.3401 9.0351 19.2867 8.90625 19.383 9.06752C19.428 9.14286 19.6792 9.40876 20.1814 9.94045C20.6889 10.4778 21 11.2026 21 12C21 12.7974 20.6889 13.5222 20.1814 14.0595C19.6792 14.5912 19.428 14.8571 19.383 14.9325C19.2867 15.0937 19.3401 14.9649 19.2942 15.147C19.2727 15.2321 19.2623 15.5977 19.2414 16.3288C19.2203 17.0676 18.9278 17.8001 18.364 18.364C17.8001 18.9279 17.0676 19.2204 16.3287 19.2414C15.5976 19.2623 15.2321 19.2727 15.147 19.2942C14.9649 19.3401 15.0937 19.2868 14.9325 19.3831C14.8571 19.4281 14.5912 19.6792 14.0595 20.1814C13.5222 20.6889 12.7974 21 12 21C11.2026 21 10.4778 20.6889 9.94047 20.1814C9.40874 19.6792 9.14287 19.4281 9.06753 19.3831C8.90626 19.2868 9.0351 19.3401 8.85296 19.2942C8.76788 19.2727 8.40225 19.2623 7.67121 19.2414C6.93238 19.2204 6.19986 18.9279 5.63597 18.364C5.07207 17.8001 4.77959 17.0676 4.75852 16.3287C4.73766 15.5976 4.72724 15.2321 4.70578 15.147C4.65985 14.9649 4.71322 15.0937 4.61691 14.9324C4.57192 14.8571 4.32082 14.5912 3.81862 14.0595C3.31113 13.5222 3 12.7974 3 12C3 11.2026 3.31113 10.4778 3.81862 9.94048C4.32082 9.40876 4.57192 9.14289 4.61691 9.06755C4.71322 8.90628 4.65985 9.03512 4.70578 8.85299C4.72724 8.7679 4.73766 8.40235 4.75852 7.67126C4.77959 6.93243 5.07207 6.1999 5.63597 5.636C6.19986 5.07211 6.93238 4.77963 7.67121 4.75855C8.40232 4.73769 8.76788 4.72727 8.85296 4.70581C9.0351 4.65988 8.90626 4.71325 9.06753 4.61694C9.14287 4.57195 9.40876 4.32082 9.94047 3.81863C10.4778 3.31113 11.2026 3 12 3C12.7974 3 13.5222 3.31114 14.0595 3.81864C14.5913 4.32084 14.8571 4.57194 14.9325 4.61693C15.0937 4.71324 14.9649 4.65988 15.147 4.70581C15.2321 4.72726 15.5976 4.73769 16.3287 4.75855Z'/></svg>");
}

.lpr-promo-intro-body {
	flex: 1 1 auto;
	min-width: 0;
}

.lpr-promo-intro-title {
	display: block;
	color: #b03a00;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.lpr-promo-intro .lpr-promo-intro-text {
	margin: 4px 0 0 !important;
	color: #6a5a52;
	font-size: 13px;
	line-height: 1.5;
}

.lpr-promo-intro-more {
	flex: 0 0 auto;
	align-self: center;
	padding: 7px 14px;
	border-radius: 7px;
	background: #da4900;
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
}

.lpr-promo-intro-more:hover {
	background: #b83d00;
	color: #fff !important;
}

@media (max-width: 560px) {
	.lpr-promo-intro {
		flex-wrap: wrap;
	}

	.lpr-promo-intro-more {
		width: 100%;
		text-align: center;
	}
}

/* ------------------------------------------------------------------
   Услуги и акция там, где заказ уже оформлен: «спасибо за заказ»,
   «Мои заказы» и кабинет менеджера.

   Строка услуги здесь та же, что в корзине, — покупатель видел её
   трижды по дороге, и четвёртый вид того же самого читался бы как
   чужая вставка. Голый список с маркерами именно так и читался.
   ------------------------------------------------------------------ */

.lpr-order-block-title {
	margin: 0 0 14px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
}

/* У покупателя блок — второй раздел карточки заказа, наравне с «Детали
   заказа»: тот же кегль заголовка и такая же линия сверху. Без неё услуги
   читались припиской к последнему товару.
   Рамка и отступы живут в модификаторе, а не в общем классе: в кабинете
   менеджера свою линию рисует чужой .lm_order_action, и вторая была бы
   лишней. */
.lpr-order-block.is-customer {
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid #ececec;
}

/* В кабинете менеджера заголовки блоков мельче: там их несколько подряд,
   и каждый — служебная пометка, а не раздел страницы. */
.lpr-order-block.is-manager .lpr-order-block-title {
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 700;
}

.lpr-order-block-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Название здесь переносится, а не обрезается многоточием: место есть,
   в отличие от тесной строки корзины, ради которой стоит nowrap. */
.lpr-order-block .lpr-srv {
	align-items: flex-start;
	padding: 10px 12px;
	font-size: 13.5px;
}

.lpr-order-block .lpr-srv-name {
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
}

.lpr-order-block .lpr-srv-amount {
	padding-top: 1px;
}

.lpr-order-block-note {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: #6b6b6b;
}

/* Акция — карточка того же семейства, но в три строки: товар, деньги,
   условие. Одной строкой условие читалось продолжением суммы. */
.lpr-promo-line {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 10px 12px;
	border-left: 3px solid #da4900;
	border-radius: 0 9px 9px 0;
	background: #fff5f0;
	font-size: 13px;
	line-height: 1.35;
}

.lpr-promo-line-product {
	color: #b83d00;
	font-weight: 600;
}

.lpr-promo-line-text {
	color: #7a2f00;
}

.lpr-promo-line-note {
	color: #6b6b6b;
	font-size: 12.5px;
}