/**
 * Страница товара: три колонки, типографика, цвет.
 *
 * Подключается с зависимостью от merchant-woocommerce-style, то есть печатается
 * ПОСЛЕ стилей родительской темы и выигрывает каскад без !important. Обычный
 * style.css дочерней темы грузится раньше родительского woocommerce.css и при
 * равной специфичности ему проигрывает — поэтому раскладка живёт здесь.
 *
 * Отступ липкой колонки приходит из PHP переменной --lin-buy-top: он считается
 * от фактической высоты липкой шапки по опциям кастомайзера, а не хардкодится.
 */

:root {
	--lin-accent: #da4900;
	--lin-accent-dark: #b83d00;
	--lin-ink: #111111;
	--lin-ink-soft: #525252;
	--lin-ink-mute: #8a8a8a;
	--lin-line: #e6e6e6;
	--lin-line-soft: #f0f0f0;
	--lin-ok: #0a7d33;
	--lin-warn: #c1272d;
	--lin-buy-top: 20px;

	/* Галерея и блок покупки имеют фиксированную ширину, средняя колонка —
	   нет: ей достаётся всё, что осталось, потому что именно её не хватало.
	   Ступень совпадает с той, на которой расширяется контейнер сайта. */
	/* Ширина блока покупки продиктована строкой действий, а не вкусом:
	   счётчик 116 + вишлист 52 + два зазора по 10 = 188px, плюс поля карточки
	   48px. Чтобы «В корзину» с иконкой не переносилась, ей нужно от 140px —
	   отсюда минимум 376. Берём 385 с запасом. Недостающее отнимаем
	   у галереи: фотография в оригинале 600x600 и в 360px уже не мылит. */
	--lin-gallery: 360px;
	--lin-buy: 385px;
}

/* Ступень совпадает с той, на которой расширяется контейнер сайта (style.css).
   Ниже неё контейнер всего 1170px, и расширять блок покупки там нельзя —
   ширину пришлось бы отнять у характеристик, которым её и так впритык. */
@media (min-width: 1440px) {
	:root {
		--lin-gallery: 440px;
		--lin-buy: 425px;
	}
}

/* --------------------------------------------------------------------------
   1. Каркас
   -------------------------------------------------------------------------- */

/* Ширина контейнера задаётся один раз для всего сайта в style.css дочерней
   темы: тот же .container несут шапка, подвал, каталог и обычные страницы,
   и расширять здесь только карточку товара значило бы рассогласовать её
   с остальным сайтом. */

@media (min-width: 992px) {

	.single-product div.product .product-gallery-summary {
		display: grid;
		/* Галерея получает фиксированный максимум, а не долю ширины.
		   Оригинал фотографии товара — 600x600px, растянутая шире она мылит.
		   Вся лишняя ширина уходит средней колонке, которой её не хватает. */
		grid-template-columns: minmax(0, var(--lin-gallery)) minmax(0, 1fr);
		column-gap: 40px;
		/* Растяжка намеренная: .entry-summary тянется на высоту всей строки,
		   и у липкой колонки появляется дорожка для скольжения. При
		   align-items:start дорожки не было бы и sticky не работал. */
		align-items: stretch;
	}

	.single-product div.product .product-gallery-summary > .woocommerce-product-gallery {
		grid-column: 1;
		align-self: start;
		width: auto;
		max-width: var(--lin-gallery);
		float: none;
		padding-left: 0;
	}

	/* Бокс сохраняется: single-product.js читает .offset() у этого элемента,
	   чтобы проскроллить к форме по кнопке липкой корзины. */
	.single-product div.product .entry-summary {
		grid-column: 2;
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--lin-buy);
		column-gap: 32px;
		align-items: start;
		width: auto;
		float: none;
		padding: 0;
		margin: 0;
		background: none;
		border: 0;
		border-radius: 0;
		overflow: visible;
		position: static;
	}

	.single-product div.product .lin-col--info {
		grid-column: 1;
		grid-row: 1;
		position: relative;
	}

	/* Блок покупки занимает обе строки сетки: первую с информацией и вторую
	   со вкладками. Без этого дорожка для прилипания кончалась там же, где
	   характеристики, и при чтении описания колонка уезжала за экран. */
	.single-product div.product .lin-col--buy {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: start;
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 15px;
		padding: 24px;
		position: relative;
	}

	/* Всё, что вывелось мимо колонок, раскладывается во всю ширину отдельной
	   строкой, а не втискивается в дорожку. */
	.single-product div.product .entry-summary > *:not(.lin-col) {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1280px) {
	.single-product div.product .lin-col--buy {
		position: sticky;
		top: var(--lin-buy-top, 20px);
	}

	/* Липкая корзина родительской темы здесь лишняя и появляется не вовремя.
	   Её порог считается от $('.entry-summary .cart').offset().top
	   (merchant/assets/js/woocommerce/single-product.js:624-648), а у прилипшей
	   колонки этот офсет растёт вместе с прокруткой — бар открывался почти
	   сразу, и на экране оказывались сразу две кнопки «В корзину».
	   Ниже 1280px наша колонка не липкая, и бар остаётся полезным, поэтому
	   отключаем его шириной, а не фильтром merchant_product_add_to_cart_sticky:
	   тот глобальный и снял бы бар заодно на планшетах и телефонах. */
	#merchant-sticky-add-to-cart {
		display: none;
	}
}

/* Контекст позиционирования для бейджей сезонности и типоразмера.

   add_custom_icon_to_product_image() (functions.php) печатает их на хуке
   woocommerce_product_thumbnails с инлайновым position:absolute, рассчитывая
   лечь на фотографию. Своего position:relative у галереи нет, а сводка его
   потеряла при переходе на сетку — бейджи отсчитывались от предка выше
   и висели рядом с фотографией, а не на ней. */
.single-product div.product .woocommerce-product-gallery {
	position: relative;
}

/* Место под галерею резервируется сразу, без скачка при загрузке.

   До инициализации слайдера все кадры стоят в потоке столбиком: у товара
   с двумя фотографиями галерея занимает двойную высоту. WooCommerce делает
   её прозрачной (opacity:0), но место она занимает всё равно — страница
   рисуется с этим запасом, а когда flexslider схлопывает кадры в один,
   соседние колонки и всё, что ниже, прыгает вверх.

   Поэтому до инициализации показываем только первый кадр — слайдер вернёт
   остальные сам. Условие на woocommerce-no-js: этот класс WooCommerce снимает
   скриптом, значит при отключённом JS правило не сработает и посетитель
   увидит все фотографии, как и раньше. */
/* Скрываем именно лишние КАДРЫ, а не всё подряд внутри обёртки: на том же
   хуке туда печатаются бейджи сезонности и типоразмера
   (add_custom_icon_to_product_image), и они не должны исчезать.
   Селектор берёт каждый кадр, перед которым уже был кадр, — то есть все,
   кроме первого. */
body:not(.woocommerce-no-js) .single-product div.product .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__image ~ .woocommerce-product-gallery__image {
	display: none;
}

/* Соотношение сторон известно заранее: фотографии товаров квадратные, 600x600.
   Браузер резервирует высоту до того, как файл загрузится.

   Правило касается только кадров галереи. Раньше оно било по всем картинкам
   внутри обёртки — включая иконки бейджей, которые лежат там же: значок
   сезонности растягивался в квадрат и разносил плашку. */
.single-product div.product .woocommerce-product-gallery__image img {
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: contain;
}

.single-product div.product .lin-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.single-product div.product .lin-col > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   1a. Шапка над колонками

   Название товара — «185/75R16C ROYAL BLACK ROYAL STUD II б/к шип 104/102 R
   M+S» — в колонке шириной 260px переносилось на шесть строк и съедало её
   целиком. Во всю ширину оно занимает одну строку, а колонка освобождается
   под то, ради чего нужна: характеристики и услуги.
   -------------------------------------------------------------------------- */

.single-product div.product .lin-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin-bottom: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--lin-line);
}

.single-product div.product .lin-head .wplb_brand_image {
	flex: 0 0 auto;
	width: 96px;
	margin: 0;
	line-height: 0;
}

/* Картинка блоком, иначе она стоит на базовой линии строки и под ней остаётся
   зазор в несколько пикселей — из-за него логотип не совпадал по вертикали
   с остальными элементами полосы. */
.single-product div.product .lin-head .wplb_brand_image img {
	display: block;
	width: 100%;
	height: auto;
}

.single-product div.product .lin-head .product_title {
	flex: 1 1 320px;
	margin: 0;
	font-size: 28px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--lin-ink);
}

/* Артикул и «поделиться» прижаты вправо: это служебные данные, они не должны
   конкурировать с названием за внимание. */
.single-product div.product .lin-head .lin-sku {
	flex: 0 0 auto;
	margin-left: auto;
	line-height: 1;
}

/* Блок «Поделиться» приходится собирать заново.

   Родитель даёт ему margin-top:35px (merchant/woocommerce.css:5760) — в полосе
   шапки этот отступ сдвигал блок вниз относительно соседей. А кружки соцсетей
   центрируют иконку строкой line-height:37px при высоте 30px, из-за чего
   содержимое стояло выше середины. Поэтому и отступ снимаем, и центрирование
   переводим на flex, где оно не зависит от высоты строки. */
.single-product div.product .lin-head .product-share {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	padding: 0;
	border: 0;
}

.single-product div.product .lin-head .product-share .sharing-icon {
	margin: 0;
	line-height: 1;
	white-space: nowrap;
}

.single-product div.product .lin-head .product-share .socials {
	display: flex;
	align-items: center;
	gap: 9px;
}

.single-product div.product .lin-head .product-share .social-share-link {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	line-height: 1;
}

/* Обёртка категории осталась пустой после снятия ссылки — её же переход
   уже есть в хлебных крошках. Саму обёртку не снимаем: её удаляет своими
   remove_action мобильная версия темы, и наша копия разошлась бы с ней. */
.single-product div.product .summary-top-box:empty {
	display: none;
}

@media (max-width: 767.98px) {
	.single-product div.product .lin-head {
		gap: 10px 14px;
		margin-bottom: 18px;
	}

	.single-product div.product .lin-head .product_title {
		flex: 1 1 100%;
		order: 3;
		font-size: 22px;
	}

	.single-product div.product .lin-head .wplb_brand_image {
		width: 64px;
	}

	/* «Поделиться» с телефона убираем. В строке шапки уже стоят логотип
	   бренда и артикул, а четыре кружка соцсетей добавляют к ним ещё 120px —
	   на экране 360px всё это сминается в кашу. Шинами в соцсетях не делятся,
	   а место на телефоне дороже всего. */
	.single-product div.product .lin-head .product-share {
		display: none;
	}

	.single-product div.product .lin-head .lin-sku {
		font-size: 12px;
	}
}

/* --------------------------------------------------------------------------
   2. Порядок блоков внутри колонок
   PHP решает, в какой колонке блок. CSS решает, в каком месте колонки.
   Поэтому Яндекс Пэй и Сплит, которые выводятся до формы, показываются
   под кнопками без единой правки PHP.
   -------------------------------------------------------------------------- */

/* Бренд, артикул, заголовок и «поделиться» уехали в шапку над колонками —
   здесь их больше нет. */
.single-product div.product .lin-col--info > *                                        { order: 20 }
/* Акция и доп.услуги — всегда вверху колонки.

   .lpr-box указан отдельно от .lpr-box-group намеренно: linaris-promo
   заворачивает плашки в группу, только когда их несколько. Одна услуга
   печатается голым .lpr-box, под правило для группы не попадала и уезжала
   в конец колонки по запасному order:20 — у обычного товара «Сезонное
   хранение» оказывалось под списком магазинов, а у акционного, где услуг
   две, стояло вверху. Разница была случайностью разметки, а не замыслом. */
.single-product div.product .lin-col--info > .lpr-promo-intro                          { order: 1 }
.single-product div.product .lin-col--info > .lpr-box-group                            { order: 2 }
.single-product div.product .lin-col--info > .lpr-box                                  { order: 2 }
.single-product div.product .lin-col--info > .tire-fitting-option                      { order: 2 }
.single-product div.product .lin-col--info > .woocommerce-product-details__short-description { order: 6 }
.single-product div.product .lin-col--info > .lin-specs                                { order: 9 }
.single-product div.product .lin-col--info > .product_meta                             { order: 11 }
.single-product div.product .lin-col--info > .product-share                            { order: 11 }

.single-product div.product .lin-col--buy > *                                          { order: 20 }
.single-product div.product .lin-col--buy > .summary-price-box                         { order: 1 }
.single-product div.product .lin-col--buy > .linaris_lp_price_calc_descr               { order: 2 }
.single-product div.product .lin-col--buy > .stock                                     { order: 3 }
.single-product div.product .lin-col--buy > form.cart                                  { order: 4 }
.single-product div.product .lin-col--buy > .yandex-pay-and-split_widget_container      { order: 5 }
.single-product div.product .lin-col--buy > .yandex-pay-badges                          { order: 5 }
/* Наличие в магазинах — первым в колонке, ещё до цены: «могу ли я забрать
   сегодня и где» покупатель решает раньше, чем смотрит на сумму. Блок
   свёрнутый и занимает одну строку, поэтому цену от кнопки он не отодвигает.
   На телефоне порядок другой, он задан в блоке для узких экранов. */
.single-product div.product .lin-col--buy > .lin-shops                                  { order: 0 }

/* --------------------------------------------------------------------------
   3. Типографика
   -------------------------------------------------------------------------- */

.lin-sku {
	font-size: 13px;
	color: var(--lin-ink-mute);
	white-space: nowrap;
}

.lin-sku__label:after {
	content: ':';
}

.lin-sku__value {
	color: var(--lin-ink-soft);
}

/* Оригинальный артикул внутри .product_meta больше не нужен — он выведен
   в шапке. Саму опцию темы не трогаем, чтобы не менять поведение
   быстрого просмотра и виджета Elementor. */
.single-product div.product .lin-col .product_meta .sku_wrapper {
	display: none;
}

/* --------------------------------------------------------------------------
   4. Блок покупки
   -------------------------------------------------------------------------- */

/* Grid, а не flex с переносом.

   У акционного товара в строке цены стоят сразу две суммы — зачёркнутая старая
   и новая, — и плашка наличия переставала помещаться: flex переносил её на
   вторую строку. Подогнать размеры нельзя, потому что длина цены не
   ограничена: сегодня «6 386 ₽ 5 549 ₽», завтра шестизначная сумма.
   В гриде колонок ровно две, поэтому перенос невозможен в принципе —
   при нехватке места сжимается плашка, а строка остаётся целой. */
.single-product div.product .lin-col--buy .summary-price-box {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, auto);
	align-items: center;
	justify-content: space-between;
	column-gap: 12px;
	row-gap: 8px;
	margin: 0;
}

/* Обе суммы держим в одной строке.

   У акционного товара в .price лежат зачёркнутая старая цена и новая. При
   34px они вместе с плашкой наличия не помещались в колонку, и строка
   разрывалась. Размер чуть уменьшен, а nowrap запрещает перенос: цена — это
   одно число, а не абзац, ломать её по строкам нельзя. */
.single-product div.product .lin-col--buy .price {
	display: flex;
	align-items: baseline;
	flex-wrap: nowrap;
	white-space: nowrap;
	gap: 10px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--lin-accent);
	margin: 0;
}

/* Перенос запрещаем там, где он на самом деле происходит.

   У акционного товара цену оборачивает linaris-promo, и обе суммы лежат
   внутри его собственного флекса: .lpr-price / .lpr-price-on с flex-wrap:wrap
   (lpr-public.css:1348). Наш nowrap на .price до них не доставал — ломалась
   именно внутренняя обёртка. Обе суммы к тому же одного кегля: так решил
   заказчик, чтобы выигрыш читался как разница двух чисел, — значит строка
   вдвое длиннее обычной, и запрет переноса тут обязателен. */
.single-product div.product .lin-col--buy .price .lpr-price,
.single-product div.product .lin-col--buy .price .lpr-price-on {
	flex-wrap: nowrap;
	gap: 8px;
}

.single-product div.product .lin-col--buy .price del {
	margin: 0;
	font-weight: 400;
	color: #a0a0a0;
}

.single-product div.product .lin-col--buy .price ins {
	text-decoration: none;
}

/* Носитель данных для пересчёта итога, ничего не показывает: стоимость
   комплекта теперь выводится один раз — живым итогом у поля количества. */
.lin-setprice {
	display: none;
}

/* Штатная строка наличия из формы дублирует плашку .wplb-stock, которую
   печатает родительская тема: два одинаковых «В наличии: больше 20 шт.»
   подряд. Оставляем плашку — она заметнее и умеет состояния. */
.single-product div.product .lin-col--buy > .stock {
	display: none;
}

/* Наличие стоит в одной строке с ценой, справа от неё: это два ответа на один
   вопрос «могу ли я купить прямо сейчас и почём», и разносить их по строкам
   незачем. Блок лежит внутри .summary-price-box сразу за ценой, поэтому
   достаточно снять растяжку на всю строку и прижать вправо. */
.single-product div.product .lin-col--buy .wplb-stock {
	grid-column: 2;
	justify-self: end;
	align-self: center;
	width: auto;
	min-width: 0;
	margin: 0;
	/* Компактно намеренно: в строке с акционной ценой стоят сразу две суммы
	   одного кегля, и место плашке приходится освобождать. Если его всё же
	   не хватит, сожмётся она — текст перенесётся внутри неё, а строка цены
	   останется целой. */
	padding: 4px 8px;
	font-size: 12px;
	line-height: 1.3;
	white-space: normal;
	color: var(--lin-ok);
	background: #f2faf5;
	border-color: #bfe3c9;
}

.single-product div.product .lin-col--buy .price {
	grid-column: 1;
}

/* Малый остаток — повод не откладывать покупку, поэтому он и выглядит иначе,
   чем спокойное «в наличии». Класс ставится на сам товар в product-columns.php. */
.single-product div.product.lin-low-stock .lin-col--buy .wplb-stock {
	color: var(--lin-warn);
	background: #fdf3f3;
	border-color: #f0cfcf;
}

/* Нет в наличии. Без этого правила надпись об отсутствии товара получала
   зелёный фон «в наличии» — цвет противоречил тексту. */
.single-product div.product.lin-out-of-stock .lin-col--buy .wplb-stock {
	color: var(--lin-ink-mute);
	background: #f5f5f5;
	border-color: #e2e2e2;
}

/* Кнопки: в колонке 360px штатный min-width:230px у «В корзину» вместе
   с полем количества не помещается в строку и вылезал бы за рамку. */
/* Одна строка действий: количество, «В корзину», вишлист.
   Итог поднят над ней через order, см. правило .lin-total ниже. */
.single-product div.product .lin-col--buy .product-button-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding-top: 0;
}

.single-product div.product .lin-col--buy .product-button-wrapper > .quantity {
	order: 1;
}

.single-product div.product .lin-col--buy .product-button-wrapper > * {
	margin: 0;
}

/* Кнопка занимает остаток строки, а не всю ширину: рядом с ней встаёт
   вишлист, который идёт следующим в разметке. Строкой выше — количество
   и итог, они разделены с действием намеренно. */
.single-product div.product .lin-col--buy .single_add_to_cart_button {
	order: 2;
	flex: 1 1 auto;
	/* Боковые поля скромнее штатных: в одной строке с полем количества
	   и вишлистом кнопке остаётся около 150px, и широкие поля съедали бы
	   место у самой подписи. */
	padding-left: 12px;
	padding-right: 12px;
	white-space: nowrap;
	/* Резет штатного min-width повторён с запасом специфичности: родительское
	   правило .single-product:not(.full-content) ... .single_add_to_cart_button
	   {min-width:220px} (merchant/assets/css/woocommerce.css:10123) специфичнее
	   обычного и просыпается, как только в области виджетов «Product Sidebar»
	   появится хоть один виджет — страница теряет класс full-content. */
	min-width: 0;
	margin-right: 0;
	height: 52px;
	font-size: 16px;
	font-weight: 600;
	/* Цвет задан явно. Без него кнопка наследовала var(--wplb-background-color-dark)
	   с дефолтом #1F1F1F и была оранжевой лишь потому, что так стоит настройка
	   темы в базе: акцент главного действия зависел от значения, которого нет
	   в коде. */
	background-color: var(--lin-accent);
	border-color: var(--lin-accent);
	color: #fff;
}

.single-product div.product .lin-col--buy .single_add_to_cart_button:hover,
.single-product div.product .lin-col--buy .single_add_to_cart_button:focus {
	background-color: var(--lin-accent-dark);
	border-color: var(--lin-accent-dark);
	color: #fff;
}

/* Резеты с той же формой селектора, что у родителя, иначе они проиграют ему
   по специфичности: у .single-product:not(.full-content) div.product
   .product-button-wrapper .single_add_to_cart_button вес (0,0,5,1), а у
   обычного нашего правила — (0,0,4,1). Правила родителя спят, пока у страницы
   есть класс full-content, и просыпаются от первого виджета в сайдбаре товара. */
.single-product:not(.full-content) div.product .lin-col--buy .product-button-wrapper .single_add_to_cart_button {
	min-width: 0;
}

.single-product:not(.full-content) div.product .entry-summary {
	padding-left: 0;
}

.single-product div.product .lin-col--buy .quantity {
	margin-right: 0;
	flex: 0 0 auto;
}

/* Счётчик компактнее штатного и вровень с кнопкой по высоте.

   По умолчанию поле 83px плюс кнопки «+/−» с полями по 16px — в одной строке
   с «В корзину» и вишлистом на саму кнопку оставалось меньше 140px, и подпись
   поджималась. Больше двух знаков в количестве шин всё равно не вводят. */
.single-product div.product .lin-col--buy .quantity .qty {
	width: 56px;
	height: 52px;
	line-height: 52px;
	padding-left: 6px;
	padding-right: 6px;
	font-size: 16px;
}

.single-product div.product .lin-col--buy .quantity .merchant-qty-button {
	padding: 0 10px;
}

/* Итог за выбранное количество — рядом с полем, а не где-то ниже:
   решение о количестве и его цена должны быть в одном поле зрения. */
/* Итог — отдельной строкой ПОД кнопками, как подытог в корзине.

   В самой строке действий стоят количество, «В корзину» и вишлист, места там
   не остаётся. order:4 опускает итог ниже вишлиста, хотя в разметке скрипт
   вставляет его сразу после поля количества.

   Подпись «Итого» рисуется псевдоэлементом: скрипт печатает только сумму,
   а называть её в разметке незачем. */
.single-product div.product .lin-col--buy .lin-total {
	display: flex;
	order: 4;
	flex: 1 0 100%;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin: 2px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--lin-line);
	white-space: nowrap;
}

.single-product div.product .lin-col--buy .lin-total:before {
	content: 'Итого';
	margin-right: auto;
	font-size: 15px;
	font-weight: 500;
	color: var(--lin-ink-soft);
}

.single-product div.product .lin-col--buy .lin-total__sum {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--lin-ink);
}

.lin-total__note {
	font-size: 13px;
	font-weight: 400;
	color: var(--lin-ink-mute);
}

/* «В Вашей корзине 4 шт. на сумму 41600 ₽» — сколько этого товара уже лежит
   в корзине. Плашку рисует js/single-product.js, данные приходят с сервера
   вместе с фрагментами корзины. По клику открывается боковая мини-корзина.

   Оранжевая, как кнопка «В корзину», — плашка про ту же корзину. Но фон
   белый, а рамка светлее фирменного цвета: сплошная оранжевая рамка прямо
   под сплошной оранжевой кнопкой читалась бы как вторая кнопка и спорила бы
   с главной. Полный цвет рамка набирает под курсором. */
.single-product div.product .lin-col--buy .lin-total__cart {
	display: flex;
	flex: 1 0 100%;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	padding: 8px 12px 8px 10px;
	border: 1px solid #f0b699;
	border-radius: 10px;
	background: #fff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--lin-accent);
	text-decoration: none;
	white-space: normal;
	transition: background-color .15s ease, border-color .15s ease;
	animation: lin-soft-in .35s ease-out both;
}

.single-product div.product .lin-col--buy .lin-total__cart:hover,
.single-product div.product .lin-col--buy .lin-total__cart:focus-visible {
	border-color: var(--lin-accent);
	background: #fff6f0;
	color: var(--lin-accent);
}

.single-product div.product .lin-col--buy .lin-total__cart:focus-visible {
	outline: 2px solid var(--lin-accent);
	outline-offset: 2px;
}

/* Уголок «откроется» — как у «Наличия в магазинах», только смотрит вправо:
   плашка не раскрывается на месте, а открывает панель сбоку. */
.single-product div.product .lin-col--buy .lin-total__cart::after {
	content: '';
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin: 0 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform .15s ease;
}

.single-product div.product .lin-col--buy .lin-total__cart:hover::after {
	transform: translateX(2px) rotate(-45deg);
}

.lin-total__cart-icon {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
}

/* Фраза длинная: на телефоне «20 шт. на сумму 208000 ₽» уходит на вторую
   строку — пусть переносится, а не обрезается. Числа не разрываются. */
.single-product div.product .lin-col--buy .lin-total__cart-text {
	flex: 1 1 auto;
	min-width: 0;
}

.single-product div.product .lin-col--buy .lin-total__cart-num {
	font-weight: 700;
	white-space: nowrap;
}

@keyframes lin-soft-in {
	from {
		opacity: 0;
		transform: translateY(-3px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Кнопка после добавления: «✓ Добавлено 4 шт.» на две секунды, потом
   прежняя надпись (js/single-product.js). Меняется только надпись, цвет
   кнопки прежний: зелёная вспышка на оранжевой кнопке кричала бы громче,
   чем нужно.

   Места под надпись 140–160px — у кнопки в одной строке счётчик и вишлист,
   поэтому кегль скрипт подбирает сам под ширину кнопки, а поля на это время
   уже: на телефоне 360px так помещается 14px вместо 13. flex-basis:0 —
   страховка: ширину кнопке задаёт строка, а не текст, и вишлист не съедет
   вниз, даже если надпись окажется длиннее обычной. */
.single-product div.product .lin-col--buy .single_add_to_cart_button.lin-atc--done {
	flex-basis: 0;
	padding-left: 8px;
	padding-right: 8px;
}

/* Перед возвратом прежней надписи текст гаснет — переход цвета у кнопки
   задан темой (0.3s). Правило стоит после :hover/:focus кнопки: вес у них
   одинаковый, а сразу после клика кнопка как раз в фокусе. */
.single-product div.product .lin-col--buy .single_add_to_cart_button.lin-atc--out {
	color: transparent;
}

.lin-atc {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	vertical-align: middle;
	line-height: 1.2;
	white-space: nowrap;
}

.lin-atc__icon {
	flex: 0 0 auto;
	width: 1.05em;
	height: 1.05em;
}

@media (prefers-reduced-motion: reduce) {
	.single-product div.product .lin-col--buy .lin-total__cart {
		animation: none;
	}
}

/* Класс именно wplb-buy-now-button: .merchant-buy-now-button, который стоял
   здесь раньше, в разметке не встречается — аддон buy-now печатает первый
   (merchant/addons/modules/buy-now/frontend.php:84). */
.single-product div.product .lin-col--buy .wplb-buy-now-button {
	flex: 1 1 100%;
}

/* Вишлист встаёт справа от «В корзину» и повторяет её высоту, иначе рядом
   с кнопкой 52px он выглядел бы приклеенным к верху строки. Селектор берёт
   именно обёртку: тот же класс висит и на вложенной ссылке. */
.single-product div.product .lin-col--buy .product-button-wrapper > .wplb-wishlist-button {
	order: 3;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	width: 52px;
	min-width: 0;
	padding: 0;
	margin: 0;
}

.single-product div.product .lin-col--buy .product-button-wrapper > .wplb-wishlist-button > .wplb-wishlist-button {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	margin: 0;
}

/* Подпись «В Избранное» внутри кнопки не нужна — кнопка квадратная, 52x52.

   На десктопе тема скрывает этот текст сама (woocommerce.css:5610), а
   в мобильной сборке то же правило идёт БЕЗ display:none — там штатная кнопка
   широкая и подпись уместна. У нас она вылезала за пределы квадрата.
   Селектор повторяет форму темового, чтобы не проиграть ему по специфичности. */
.single-product div.product .lin-col--buy .wplb-wishlist-button .wplb-wishlist-button__text {
	display: none;
}

/* --------------------------------------------------------------------------
   4a. Наличие в магазинах — свёрнутый блок в информационной колонке

   Список бывает до одиннадцати адресов. Развёрнутым он занимал больше места,
   чем цена с кнопкой вместе, поэтому свёрнут по умолчанию: факт наличия уже
   сказан плашкой у цены, а конкретные адреса нужны тому, кто едет забирать.
   Свёртывание на <details>, без JS.
   -------------------------------------------------------------------------- */

/* Блок зелёный — в цвет плашки «В наличии» у цены.

   Это не украшение: наличие в конкретном магазине и наличие на складе —
   один и тот же ответ на вопрос «могу ли я забрать сегодня», и общий цвет
   связывает их между собой. Заодно свёрнутый блок перестаёт теряться среди
   серых характеристик. */
.single-product div.product .lin-shops {
	border: 1px solid #bfe3c9;
	border-radius: 10px;
	background: #f2faf5;
	overflow: hidden;
}

.single-product div.product .lin-shops__head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 12px 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--lin-ok);
	cursor: pointer;
	user-select: none;
	/* Штатный треугольник убираем — рисуем свою стрелку, одинаковую
	   во всех браузерах. */
	list-style: none;
}

/* Метка на карте: у блока появляется опознавательный знак, и он читается
   как «где забрать», ещё до того как прочитан текст. Иконка нарисована
   в самом стиле, чтобы не тянуть отдельный файл ради 18 пикселей. */
.single-product div.product .lin-shops__head:before {
	content: '';
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a7d33'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.single-product div.product .lin-shops__head::-webkit-details-marker {
	display: none;
}

.single-product div.product .lin-shops__count {
	margin-left: auto;
	font-size: 13px;
	font-weight: 500;
	color: #3f8a56;
}

.single-product div.product .lin-shops__head::after {
	content: '';
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-top: -3px;
	margin-left: 2px;
	border-right: 2px solid #4f9468;
	border-bottom: 2px solid #4f9468;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.single-product div.product .lin-shops[open] .lin-shops__head::after {
	margin-top: 3px;
	transform: rotate(-135deg);
}

.single-product div.product .lin-shops[open] .lin-shops__head {
	border-bottom: 1px solid #cfe7d6;
}

.single-product div.product .lin-shops__head:hover {
	background: #eaf6ee;
}

/* Список на белом: адреса читаются спокойнее, чем на цветной подложке,
   и раскрытый блок явно отделён от свёрнутого состояния. */
.single-product div.product .lin-shops[open] .wplb_in_shop {
	background: #fff;
}

/* Внутренности прежнего блока: рамки и отступы снимаем — их теперь несёт
   сам раскрывающийся блок. Заголовок и иконка не нужны, о содержимом
   говорит подпись в шапке. */
.single-product div.product .lin-shops .wplb_in_shop {
	display: block;
	margin: 0;
	padding: 10px 14px 12px;
	border: 0;
	font-size: 13px;
	line-height: 1.5;
}

.single-product div.product .lin-shops .wplb_in_shop > svg,
.single-product div.product .lin-shops .wplb_in_shop_title {
	display: none;
}

.single-product div.product .lin-shops .wplb_in_shop ol li {
	padding: 3px 0;
}

/* --------------------------------------------------------------------------
   5. Характеристики
   -------------------------------------------------------------------------- */

.lin-specs__title {
	font-size: 17px;
	font-weight: 600;
	color: var(--lin-ink);
	margin-bottom: 12px;
}

.lin-specs table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

/* Строка — отдельная полоса с внутренними полями и подсветкой под курсором.
   При наведении видно, к какому параметру относится значение справа: без
   этого в списке из семи строк глаз сбивается на соседнюю. */
.lin-specs table tr {
	transition: background-color 0.12s ease;
}

.lin-specs table tr:hover {
	background: #fafafa;
}

.lin-specs table th,
.lin-specs table td {
	padding: 9px 10px;
	border: 0;
	border-bottom: 1px solid var(--lin-line-soft);
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
	vertical-align: baseline;
}

.lin-specs table th {
	width: 46%;
	padding-left: 0;
	font-weight: 400;
	color: var(--lin-ink-mute);
}

/* Значение темнее и плотнее подписи: в паре «что» и «сколько» читают
   в первую очередь второе. */
.lin-specs table td {
	padding-right: 0;
	color: var(--lin-ink);
	font-weight: 500;
	text-align: right;
}

/* Расшифровка идёт в той же строке, отдельной её делать незачем: «(630 кг
   на колесо)» короче самой подписи и рядом со значением читается как одно
   целое. Приглушена, потому что поясняет индекс, а не спорит с ним. */
.lin-specs table td .lin-specs__hint {
	font-weight: 400;
	color: var(--lin-ink-mute);
	white-space: nowrap;
}

.lin-specs table td p {
	margin: 0;
}

.lin-specs__hint {
	color: var(--lin-ink-mute);
}

.lin-specs__all {
	display: inline-block;
	margin-top: 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--lin-ink-soft);
	border-bottom: 1px solid var(--lin-line);
	text-decoration: none;
}

.lin-specs__all:hover {
	color: var(--lin-accent);
	border-bottom-color: currentColor;
}

.lin-specs__all:after {
	content: ' ›';
}

/* --------------------------------------------------------------------------
   6. Апсейл: рамка нейтральная, акцент на самом выборе
   -------------------------------------------------------------------------- */

.single-product .tire-fitting-option {
	border-color: var(--lin-line);
	color: var(--lin-ink);
	margin: 0;
}

.single-product .tire-fitting-option-desc {
	color: var(--lin-ink-mute);
	font-style: normal;
}

/* Плавающая кнопка записи на шиномонтаж перетягивает клики с «В корзину»:
   она того же цвета, крупная и зафиксирована на экране. На карточке товара
   шиномонтаж и так предлагается чекбоксом. */
.single-product .tire_fitting.ms_booking1 {
	display: none;
}

/* --------------------------------------------------------------------------
   7. Адаптив
   -------------------------------------------------------------------------- */

/* Планшет и узкий ноутбук: две колонки.

   Третья здесь физически не помещается. Контейнер до 1200px не имеет
   фиксированной ширины и на 992px даёт ~960px: после галереи и блока покупки
   средней колонке осталось бы ~240px — та самая ширина, на которой подписи
   характеристик ломаются пополам. Поэтому сводка складывается в один столбец:
   сначала цена и кнопка, под ними характеристики и услуги. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.single-product div.product .product-gallery-summary {
		grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
		column-gap: 32px;
	}

	.single-product div.product .product-gallery-summary > .woocommerce-product-gallery {
		max-width: 380px;
	}

	.single-product div.product .entry-summary {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}

	.single-product div.product .lin-col--buy {
		grid-column: 1;
		order: 1;
	}

	.single-product div.product .lin-col--info {
		grid-column: 1;
		order: 2;
	}
}

@media (max-width: 991.98px) {
	.single-product div.product .woocommerce-product-gallery,
	.single-product div.product .entry-summary {
		width: 100%;
		float: none;
	}

	.single-product div.product .entry-summary {
		padding: 0;
		background: none;
		border: 0;
		overflow: visible;
	}

	.single-product div.product .lin-col {
		gap: 14px;
	}

	/* Цена и кнопка сразу под фотографией — раньше характеристик и услуг. */
	.single-product div.product .lin-col--buy {
		order: 1;
		margin-bottom: 24px;
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 15px;
		padding: 20px;
	}

	.single-product div.product .lin-col--info {
		order: 2;
	}

	/* Вкладки теперь внутри сводки, значит на телефоне они участвуют в той же
	   колонке и должны идти последними — после характеристик и магазинов. */
	.single-product div.product .entry-summary > .woocommerce-tabs {
		order: 3;
		width: 100%;
		margin-left: 0;
	}

	.single-product div.product .entry-summary {
		display: flex;
		flex-direction: column;
	}
}

/* Планшет в портретной ориентации.

   До этой правки диапазон отсутствовал: блок max-width:991.98px сразу давал
   одну колонку, и планшет получал телефонную вёрстку — фотография во всю
   ширину, всё остальное простынёй под ней. Возвращаем две колонки: слева
   галерея, справа сводка одним столбцом. */
@media (min-width: 768px) and (max-width: 991.98px) {
	.single-product div.product .product-gallery-summary {
		display: grid;
		grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
		column-gap: 28px;
		align-items: start;
	}

	.single-product div.product .product-gallery-summary > .woocommerce-product-gallery {
		grid-column: 1;
		max-width: none;
		width: 100%;
	}

	.single-product div.product .entry-summary {
		grid-column: 2;
		width: 100%;
	}

	/* Карточка покупки здесь во всю ширину колонки: сужать её незачем,
	   рядом всё равно ничего не стоит. */
	.single-product div.product .lin-col--buy {
		margin-bottom: 20px;
	}
}

@media (max-width: 599.98px) {
	.single-product div.product .entry-summary .product_title {
		font-size: 22px;
	}

	.single-product div.product .lin-col--buy {
		padding: 16px;
	}

	.single-product div.product .lin-col--buy .price {
		font-size: 30px;
	}

	/* Порядок и ширины строки действий заданы ниже, в отдельном блоке
	   «Счётчик, „В корзину“ и вишлист — одной строкой». Здесь их больше нет:
	   прежний вариант пускал кнопку во всю ширину и выталкивал вишлист
	   на собственную строку. */
}

/* --------------------------------------------------------------------------
   8. Вкладки под колонками

   Прежде панель была карточкой с тенью и полями по 60px, а сами вкладки
   висели внутри сводки — то есть под информацией и покупкой, но не под
   галереей. Теперь блок вынесен под всю сетку (см. product-columns.php),
   и оформление приведено к остальной странице: подчёркнутые вкладки,
   контент без рамки, ширина строки ограничена ради читаемости.
   -------------------------------------------------------------------------- */

/* Карточка с рамкой — как остальные блоки страницы. Но внутри всё белое:
   серая подложка под вкладками утяжеляла верх и превращала ряд в «шапку
   таблицы», хотя это навигация. Разделяет ряд и содержимое одна тонкая
   линия, работают типографика и воздух. */
.single-product div.product .woocommerce-tabs {
	margin-top: 48px;
	clear: both;
	border: 1px solid var(--lin-line);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
}

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

   Ради этого вкладки и перенесены внутрь сводки (product-columns.php):
   снаружи они лежали ниже всех колонок, и блок покупки к тому моменту
   кончался — прилипать ему было негде. */
@media (min-width: 992px) {
	.single-product div.product .entry-summary > .woocommerce-tabs {
		grid-column: 1;
		grid-row: 2;
		width: auto;
		margin-top: 40px;
	}
}

/* Вкладки вытянуты влево под галерею — так их ширина складывается из галереи
 * и средней колонки, а справа продолжается липкий блок покупки.
 *
 * Отступ сверху задаёт js/single-product.js. Причина: вкладки лежат внутри
 * сводки, а галерея — снаружи, в соседней колонке внешней сетки. Вертикаль
 * у них общая только на бумаге — вкладки начинаются сразу под информационной
 * колонкой, и когда галерея выше (у товара с несколькими фотографиями это
 * обычное дело), блок наезжает на фотографию. Ни один из контейнеров не знает
 * высоту другого, поэтому разницу измеряет скрипт.
 *
 * Фолбэк на случай, если скрипт не отработал: отступ всё равно есть, просто
 * не подогнанный. */
@media (min-width: 1200px) {
	.single-product div.product .entry-summary > .woocommerce-tabs {
		margin-left: calc(-1 * (var(--lin-gallery) + 40px));
	}
}

/* Ряд вкладок: одна линия под всеми, активная отмечена подчёркиванием.
   Фоны и рамки у пунктов снимаем — они превращали ряд в набор кнопок
   и спорили с настоящими кнопками страницы. */
.single-product div.product .woocommerce-tabs > ul.tabs {
	display: flex;
	flex-wrap: wrap;
	/* Выравнивание задано явно: блок вкладок занимает две колонки, и по центру
	   подписи болтались бы посреди пустого места, оторвавшись от текста,
	   который начинается от левого края. */
	justify-content: flex-start;
	text-align: left;
	gap: 0 36px;
	margin: 0;
	/* Отступ по бокам совпадает с полями содержимого — подпись активной
	   вкладки стоит ровно над первой строкой текста под ней. */
	padding: 0 30px;
	background: none;
	border-bottom: 1px solid var(--lin-line-soft);
	list-style: none;
}

.single-product div.product .woocommerce-tabs > ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.single-product div.product .woocommerce-tabs > ul.tabs li:before,
.single-product div.product .woocommerce-tabs > ul.tabs li:after {
	display: none;
}

.single-product div.product .woocommerce-tabs > ul.tabs li a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 18px 2px 15px;
	font-size: 17px;
	/* Не полужирные: активную и без насыщенности видно по цвету и черте,
	   а три жирные подписи подряд спорили с заголовком товара. */
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--lin-ink-mute);
	text-decoration: none;
	/* Прозрачная линия держит место заранее: без неё текст дёргался
	   на пару пикселей при переключении вкладки. */
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.15s ease, border-color 0.15s ease;
}

/* При наведении — только цвет. Заливка на неактивной вкладке читалась как
   «уже выбрана» и спорила с настоящей активной. */
.single-product div.product .woocommerce-tabs > ul.tabs li a:hover {
	color: var(--lin-ink);
	border-bottom-color: var(--lin-line);
}

.single-product div.product .woocommerce-tabs > ul.tabs li.active a {
	color: var(--lin-ink);
	border-bottom-color: var(--lin-accent);
}

/* Значков у вкладок нет: три подписи и без них различаются мгновенно,
   а иконки добавляли шума в и без того плотный верх блока. */

/* Фокус с клавиатуры виден: переключение вкладок доступно и без мыши. */
.single-product div.product .woocommerce-tabs > ul.tabs li a:focus-visible {
	outline: 2px solid var(--lin-accent);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Содержимое внутри карточки, с полями по всем сторонам. */
.single-product div.product .woocommerce-tabs .panel {
	max-width: none;
	margin: 0;
	padding: 28px 30px 30px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
}

/* Строка длиной во весь экран не читается: глаз теряет начало следующей.
   Ограничиваем текст описания, таблицу и отзывы примерно 80 знаками. */
.single-product div.product .woocommerce-Tabs-panel--description {
	max-width: 820px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--lin-ink-soft);
}

.single-product div.product .woocommerce-Tabs-panel--description h2,
.single-product div.product .woocommerce-Tabs-panel--description h3 {
	margin: 28px 0 10px;
	font-size: 19px;
	font-weight: 600;
	color: var(--lin-ink);
}

.single-product div.product .woocommerce-Tabs-panel--description p {
	margin: 0 0 14px;
}

.single-product div.product .woocommerce-Tabs-panel--description > *:first-child {
	margin-top: 0;
}

/* Первый абзац крупнее остальных: он отвечает на вопрос «что это вообще
   за товар», и с него начинают читать. */
.single-product div.product .woocommerce-Tabs-panel--description > p:first-of-type {
	font-size: 17px;
	color: var(--lin-ink);
}

.single-product div.product .woocommerce-Tabs-panel--description ul,
.single-product div.product .woocommerce-Tabs-panel--description ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

.single-product div.product .woocommerce-Tabs-panel--description li {
	margin-bottom: 7px;
}

.single-product div.product .woocommerce-Tabs-panel--description table {
	width: 100%;
	border-collapse: collapse;
}

.single-product div.product .woocommerce-Tabs-panel--description table th,
.single-product div.product .woocommerce-Tabs-panel--description table td {
	padding: 9px 12px 9px 0;
	border: 0;
	border-bottom: 1px solid var(--lin-line-soft);
	text-align: left;
	vertical-align: baseline;
}

/* Характеристики в две колонки.

   Двенадцать строк в один столбец тянутся длинной полосой, а справа остаётся
   пустое поле: значения короткие, и ширина им не нужна. Таблицу раскладываем
   гридом — строки становятся парами «подпись слева, значение справа»,
   и колонки читаются независимо друг от друга.

   display на table/tbody/tr переопределяем намеренно: разметку печатает ядро
   WooCommerce, переопределять её шаблоном ради двух колонок не стоит. */
.single-product div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes {
	display: block;
	max-width: none;
	width: 100%;
	margin: 0;
	border: 0;
}

/* Одна колонка по умолчанию, две — только когда блоку хватает ширины.

   Вкладки занимают три пятых контейнера, то есть около 700px на экране 1366
   и около 840px на 1920. В первом случае колонка получается ~320px, и длинные
   значения вроде «104/102 (900 кг на колесо)» ломаются пополам — лучше одна
   колонка во всю ширину, чем две рваные. */
.single-product div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes tbody {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 56px;
}

@media (min-width: 1620px) {
	.single-product div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes tbody {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Подпись и значение рядом, а не по разным краям колонки.

   При justify-content:space-between между ними оставалось около 400px пустоты,
   и глазу приходилось перескакивать через неё, чтобы связать «Ширина профиля»
   с «185». Подпись занимает ровно половину строки, значение начинается сразу
   за ней — пара читается как одно целое. */
.single-product div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes tr {
	display: flex;
	align-items: baseline;
	gap: 18px;
	padding: 11px 12px;
	border-radius: 7px;
	background: none;
}

/* Подсветка строки под курсором вместо постоянной «зебры»: в двух колонках
   чередование фона даёт шахматку, потому что строки заполняются слева
   направо, а не сверху вниз. */
.single-product div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes tr:hover {
	background: #fafafa;
}

.single-product div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes th,
.single-product div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	font-size: 15px;
	line-height: 1.45;
	text-align: left;
	background: none;
	font-style: normal;
}

/* Подпись ровно в половину строки: значения выстраиваются по общей
   вертикали, и колонка читается сверху вниз одним движением. */
.single-product div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes th {
	flex: 0 0 50%;
	font-weight: 400;
	color: var(--lin-ink-mute);
}

.single-product div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes td {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
	font-weight: 500;
	color: var(--lin-ink);
}

/* Линия под каждой строкой, а не над каждой кроме первой: строки в сетке
   заполняются слева направо, и «кроме первой» оставило бы правую верхнюю
   ячейку с линией, а левую без неё. */
.single-product div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes tr {
	border-bottom: 1px solid var(--lin-line-soft);
}

.single-product div.product .woocommerce-Tabs-panel--additional_information table.shop_attributes td p {
	margin: 0;
}

/* Правило для телефона больше не нужно: одна колонка теперь базовая,
   а две включаются только от 1620px. */

/* --------------------------------------------------------------------------
   Отзывы

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

/* Своей рамки у отзывов больше нет — вся область вкладок и так карточка,
   вторая рамка внутри первой выглядела бы коробкой в коробке. */
.single-product div.product .woocommerce-Tabs-panel--reviews {
	max-width: 760px;
}

.single-product div.product .woocommerce-Tabs-panel--reviews .woocommerce-Reviews-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
	color: var(--lin-ink);
}

.single-product div.product .woocommerce-Tabs-panel--reviews .woocommerce-noreviews {
	margin: 0;
	padding: 0 0 20px;
	font-size: 15px;
	color: var(--lin-ink-mute);
}

.single-product div.product .woocommerce-Tabs-panel--reviews #review_form_wrapper {
	padding-top: 20px;
	border-top: 1px solid var(--lin-line);
}

.single-product div.product .woocommerce-Tabs-panel--reviews .comment-reply-title {
	display: block;
	margin-bottom: 14px;
	font-size: 16px;
	font-weight: 600;
	color: var(--lin-ink);
}

.single-product div.product .woocommerce-Tabs-panel--reviews .comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	color: var(--lin-ink-soft);
}

.single-product div.product .woocommerce-Tabs-panel--reviews .comment-form p {
	margin: 0 0 16px;
}

.single-product div.product .woocommerce-Tabs-panel--reviews .comment-form input[type="text"],
.single-product div.product .woocommerce-Tabs-panel--reviews .comment-form input[type="email"],
.single-product div.product .woocommerce-Tabs-panel--reviews .comment-form textarea,
.single-product div.product .woocommerce-Tabs-panel--reviews .comment-form select {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--lin-line);
	border-radius: 8px;
	background: #fff;
	font-size: 15px;
	color: var(--lin-ink);
}

.single-product div.product .woocommerce-Tabs-panel--reviews .comment-form textarea {
	min-height: 110px;
	line-height: 1.5;
	resize: vertical;
}

.single-product div.product .woocommerce-Tabs-panel--reviews .comment-form input:focus,
.single-product div.product .woocommerce-Tabs-panel--reviews .comment-form textarea:focus,
.single-product div.product .woocommerce-Tabs-panel--reviews .comment-form select:focus {
	outline: none;
	border-color: var(--lin-ink-mute);
}

/* Имя и почта рядом: две короткие строки подряд выглядят как анкета,
   а в паре читаются как одно действие. */
@media (min-width: 600px) {
	.single-product div.product .woocommerce-Tabs-panel--reviews .comment-form-author,
	.single-product div.product .woocommerce-Tabs-panel--reviews .comment-form-email {
		display: inline-block;
		width: calc(50% - 8px);
		vertical-align: top;
	}

	.single-product div.product .woocommerce-Tabs-panel--reviews .comment-form-author {
		margin-right: 14px;
	}
}

.single-product div.product .woocommerce-Tabs-panel--reviews .comment-form-rating select {
	max-width: 260px;
}

/* Кнопка отправки.

   Заливку ей задаёт сама тема инлайновым правилом с !important и селектором
   специфичнее нашего (.single-product div.product .woocommerce-Reviews
   .comment-respond .form-submit .submit). Перебить его нечем, поэтому фон
   принимаем как есть и делаем текст белым: в первой версии он был задан
   акцентным цветом и сливался с акцентным же фоном — кнопка выглядела пустой. */
.single-product div.product .woocommerce-Reviews .comment-respond .form-submit .submit {
	min-width: 0;
	width: auto;
	padding: 13px 28px;
	border: 0;
	border-radius: 8px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
}

/* Заголовок формы — слева и вровень с остальным текстом. По умолчанию тема
   ставит его по центру и крупно, из-за чего строка «Будьте первым, кто
   оставил отзыв на "185/75R16C ROYAL BLACK ROYAL STUD II б/к шип..."»
   растягивалась во всю ширину и выглядела как заголовок страницы. */
.single-product div.product .woocommerce-Reviews .comment-respond .comment-reply-title {
	display: block;
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	color: var(--lin-ink);
}

.single-product div.product .woocommerce-Reviews .woocommerce-Reviews-title,
.single-product div.product .woocommerce-Reviews .woocommerce-noreviews {
	text-align: left;
}

.single-product div.product .woocommerce-Tabs-panel--reviews .comment-notes {
	font-size: 13px;
	color: var(--lin-ink-mute);
}

/* Существующие отзывы, когда они появятся. */
.single-product div.product .woocommerce-Tabs-panel--reviews .commentlist {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.single-product div.product .woocommerce-Tabs-panel--reviews .commentlist li {
	padding: 16px 0;
	border-bottom: 1px solid var(--lin-line-soft);
}

@media (max-width: 599.98px) {
	.single-product div.product .woocommerce-Tabs-panel--reviews {
		padding: 20px 18px;
	}
}

@media (max-width: 767.98px) {
	.single-product div.product .woocommerce-tabs {
		margin-top: 32px;
	}

	/* На телефоне ряд вкладок прокручивается вбок, а не переносится
	   на вторую строку: три подписи в столбик занимают полэкрана.

	   Справа — растворяющийся край: без него третья вкладка просто
	   обрывается, и непонятно, что за ней что-то есть. Маска снимается
	   прокруткой до конца (animation-timeline поддерживают не все браузеры,
	   поэтому край статичный — он честно говорит «строка длиннее экрана»). */
	.single-product div.product .woocommerce-tabs > ul.tabs {
		flex-wrap: nowrap;
		gap: 0 26px;
		padding: 0 18px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
		mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
	}

	.single-product div.product .woocommerce-tabs > ul.tabs::-webkit-scrollbar {
		display: none;
	}

	.single-product div.product .woocommerce-tabs > ul.tabs li a {
		padding: 13px 14px 12px;
		font-size: 15px;
		white-space: nowrap;
	}

	.single-product div.product .woocommerce-tabs .panel {
		padding: 20px 18px 22px;
	}
}

/* --------------------------------------------------------------------------
   9. Телефон: единый поток вместо двух колонок

   Разбор сценария, который это правило чинит. Товар с акцией «цена при
   шиномонтаже»: галочка услуги меняет цену товара. На экране 390x844
   получалось так — цена на первом экране, кнопка на втором, а сами услуги
   только на третьем, потому что они лежат в информационной колонке, а она
   на телефоне идёт целиком после колонки покупки. Покупатель снимал галочку
   внизу и не видел ни новой цены, ни нового итога: они остались выше.
   Приходилось листать туда-обратно, чтобы понять, что изменилось.

   Переставить блоки обычным order нельзя — колонки это разные флекс-контейнеры,
   и порядок внутри одного не влияет на другой. Поэтому на телефоне колонки
   перестают быть боксами (display:contents): их содержимое становится прямыми
   участниками одного потока сводки, и порядок назначается сквозным.

   На .entry-summary такой приём применять НЕЛЬЗЯ (у элемента без бокса
   .offset() вернёт ноль, а его читает скрипт липкой корзины), но к самим
   колонкам это не относится: DOM не меняется, form.cart остаётся её потомком,
   селекторы темы и linaris.js продолжают находить форму.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
	.single-product div.product .entry-summary {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.single-product div.product .lin-col--info,
	.single-product div.product .lin-col--buy {
		display: contents;
	}

	/* Порядок выстроен по ходу решения: сколько стоит → почему столько →
	   что можно добавить → сколько вышло и кнопка → чем заплатить →
	   где забрать → что за товар. */
	/* Запасной порядок для блоков, которых нет в списке ниже: они уходят
	   в конец, а не в начало. Селектор идёт через .lin-col, потому что
	   display:contents убирает бокс, но не меняет DOM — для CSS содержимое
	   колонок по-прежнему их дети, а не дети сводки. */
	.single-product div.product .lin-col > * { order: 20 }
	.single-product div.product .summary-price-box { order: 1 }
	.single-product div.product .linaris_lp_price_calc_descr { order: 2 }
	.single-product div.product .lpr-promo-intro { order: 3 }
	.single-product div.product .lpr-box-group { order: 4 }
	.single-product div.product .lpr-box { order: 4 }
	.single-product div.product .tire-fitting-option { order: 4 }
	.single-product div.product form.cart { order: 5 }
	.single-product div.product .yandex-pay-and-split_widget_container { order: 6 }
	.single-product div.product .yandex-pay-badges { order: 6 }
	.single-product div.product .lin-shops { order: 7 }
	.single-product div.product .lin-specs { order: 8 }
	.single-product div.product .product_meta { order: 9 }
	.single-product div.product .entry-summary > .woocommerce-tabs { order: 10 }

	/* Рамки карточки покупки на телефоне нет: блоки и так во всю ширину,
	   а обводка вокруг части потока резала бы его пополам. */
	.single-product div.product .lin-col--buy,
	.single-product div.product .lin-col--info {
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
	}

	/* Цена крупнее — она теперь открывает страницу, а не сидит в карточке. */
	.single-product div.product .summary-price-box {
		padding-bottom: 4px;
	}

	/* Услуги и итог — соседи: между ними ничего не вклинивается, и смена
	   галочки сразу видна в сумме под ней. */
	.single-product div.product form.cart {
		padding-top: 16px;
		border-top: 1px solid var(--lin-line);
	}

	.single-product div.product .lin-shops {
		margin-top: 4px;
	}

	/* Вкладки на телефоне — без рамки: карточка во всю ширину экрана
	   выглядит лишней коробкой, а её боковые поля съедают и без того
	   узкую строку. */
	.single-product div.product .woocommerce-tabs {
		border: 0;
		border-radius: 0;
		border-top: 1px solid var(--lin-line);
		margin-top: 8px;
	}

	.single-product div.product .woocommerce-tabs > ul.tabs {
		padding: 0;
	}

	.single-product div.product .woocommerce-tabs .panel {
		padding: 20px 0 8px;
	}
}

/* Счётчик, «В корзину» и вишлист — одной строкой и на телефоне.

   Раньше кнопка уходила на свою строку, а вишлист оставался висеть рядом
   со счётчиком сам по себе. Втроём они помещаются: считаем по узкому
   экрану 360px, где на строку остаётся 330 — счётчик 100, вишлист 48,
   два зазора по 8, кнопке достаётся 166. */
@media (max-width: 599.98px) {
	.single-product div.product .lin-col--buy .product-button-wrapper {
		gap: 8px;
	}

	/* Снимаем растяжку темы.

	   merchant/woocommerce.css внутри @media (max-width:480px) задаёт
	   .product-button-wrapper > * { width: 100% } — каждый элемент строки
	   на всю ширину. Из-за неё счётчик, кнопка и вишлист вставали друг под
	   другом, сколько бы order и flex им ни назначали: ширина сильнее.
	   Наш селектор длиннее темового на один класс, поэтому побеждает. */
	.single-product div.product .lin-col--buy .product-button-wrapper > * {
		width: auto;
	}

	.single-product div.product .lin-col--buy .product-button-wrapper > .quantity {
		order: 1;
	}

	.single-product div.product .lin-col--buy .single_add_to_cart_button {
		order: 2;
		flex: 1 1 auto;
		min-width: 0;
	}

	.single-product div.product .lin-col--buy .product-button-wrapper > .wplb-wishlist-button {
		order: 3;
		width: 48px;
		height: 52px;
		margin-left: 0;
	}

	.single-product div.product .lin-col--buy .quantity .qty {
		width: 44px;
		padding-left: 2px;
		padding-right: 2px;
	}

	.single-product div.product .lin-col--buy .quantity .merchant-qty-button {
		padding: 0 8px;
	}

	/* Итог — единственный, кому нужна вся ширина: он идёт строкой ниже
	   действий. Растяжку ему возвращаем явно, раз общую сняли. */
	.single-product div.product .lin-col--buy .product-button-wrapper > .lin-total {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   10. «Похожие товары» и «Вы недавно смотрели» на телефоне

   Блок похожих оформлен карточкой с полями по 30px (style.css). На экране
   360px эти поля вместе с полями контейнера съедали 90px: на два товара
   в строке оставалось по 135px, и карточки сминались. На узком экране
   карточка вокруг карточек не нужна — товары и так отделены друг от друга.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
	.single-product div.product section.products.related,
	.single-product section.merchant-history-products {
		padding-left: 0;
		padding-right: 0;
		box-shadow: none;
		border-radius: 0;
		overflow: visible;
	}

	.single-product div.product section.products.related {
		padding-top: 24px;
		padding-bottom: 4px;
		margin-top: 12px;
		border-top: 1px solid var(--lin-line);
	}

	/* Промежуток между карточками режем вдвое: штатные 15px с каждой стороны
	   давали 30px пустоты посреди и без того узкой строки.

	   Правило намеренно ограничено блоком похожих товаров. Раньше оно било
	   по всем спискам на странице, и у «Вы недавно смотрели» отрицательные
	   поля выталкивали ряд за края экрана — по бокам выглядывали куски
	   соседних карточек. */
	.single-product div.product section.products.related ul.products li.product {
		padding-left: 7px;
		padding-right: 7px;
	}

	.single-product div.product section.products.related ul.products {
		margin-left: -7px;
		margin-right: -7px;
	}

	.single-product ul.products li.product .product-inner {
		padding: 0;
	}

	/* Заголовки блоков не должны висеть с отступом, которого нет у товаров
	   под ними. */
	.single-product div.product section.products.related > h2,
	.single-product section.merchant-history-products .recently-header {
		padding-left: 0;
		padding-right: 0;
	}
}

/* --------------------------------------------------------------------------
   11. Блок «Вы недавно смотрели» и кнопка чата на телефоне
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
	/* Ряд не должен вылезать за края экрана: товары подгружаются скриптом,
	   и до загрузки ширину блока не видно, поэтому переполнение обрезаем
	   явно, а не надеемся на содержимое. */
	.single-product section.merchant-history-products .recently-products {
		max-width: 100%;
		overflow-x: hidden;
	}

	.single-product section.merchant-history-products .recently-products ul.products {
		margin-left: 0;
		margin-right: 0;
	}
}

/* Кнопка чата над мобильной панелью навигации.

   Внизу экрана стоит панель «Меню, Аккаунт, Корзина, Избранное» высотой
   около 64px, и кнопка Jivo садилась прямо на неё, перекрывая «Избранное».

   Опора — класс __jivoMobileButton: почти все имена у виджета хешированные
   (wrap__hVG9k и подобные, они меняются от сборки к сборке), а этот записан
   с двойным подчёркиванием и остаётся стабильным. Он висит именно на кнопке,
   поэтому окно чата открывается как обычно и не уезжает вверх.

   Прошлая попытка сдвигать body > jdiv не работала в принципе: jdiv —
   нестандартный тег, по умолчанию строчный, а transform к строчным
   элементам не применяется. */
@media (max-width: 767.98px) {
	jdiv.__jivoMobileButton {
		transform: translateY(-74px) !important;
	}
}

/* --------------------------------------------------------------------------
   12. Единый ритм блоков под карточкой товара

   «Максимальная выгода», «Похожие товары» и «Вы недавно смотрели» приходят
   из разных мест — промо-блок темы, штатный вывод WooCommerce и модуль
   истории просмотров. Заголовки у них разного уровня (h3, h2, h2.recently-title)
   и свои отступы, поэтому расстояния между заголовком и рядом карточек
   отличались от блока к блоку. Задаём один ритм на всех.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
	/* Воздуха между секциями больше, и он одинаковый у всех трёх: линия
	   сверху плюс отступ от неё до заголовка. Раньше блоки шли почти
	   впритык, и «Максимальная выгода», «Похожие товары» и «Вы недавно
	   смотрели» читались как один длинный список. */
	.single-product .wplb_promo_loop,
	.single-product div.product section.products.related,
	.single-product section.merchant-history-products {
		margin-top: 40px;
		margin-bottom: 0;
		padding-top: 32px;
		border-top: 1px solid var(--lin-line);
	}

	.single-product .wplb_promo_loop > h3,
	.single-product div.product section.products.related > h2,
	.single-product section.merchant-history-products h2.recently-title {
		margin: 0 0 16px;
		padding: 0;
		font-size: 22px;
		line-height: 1.25;
		font-weight: 600;
		text-align: left;
	}

	/* Шапка блока истории несёт собственный отступ снизу — он складывался
	   с отступом заголовка и давал зазор вдвое больше, чем у соседей. */
	.single-product section.merchant-history-products .recently-header {
		margin-bottom: 0;
		padding-bottom: 0;
	}

	/* Кнопка «Смотреть все акции» — по левому краю, вслед за заголовками.

	   Два подвоха. Первый: ссылка лежит НЕ внутри .wplb_promo_loop, а рядом
	   с ним — плагин linarispromotions закрывает блок и печатает её следом
	   (class-linarispromotions-admin.php:500), поэтому селектор через
	   родителя до неё не доставал. Второй: там же ей задано
	   margin: 0 auto !important — без !important это не перебить. */
	.single-product .wplb_promo_loop {
		text-align: left;
	}

	.single-product .wplb_vew_all_promos {
		margin-left: 0 !important;
		margin-right: auto !important;
		/* Плагин обнуляет верхний отступ своим !important — возвращаем
		   отбивку от заголовка, такую же, как у рядов карточек в соседних
		   блоках. */
		margin-top: 16px !important;
	}
}

/* Карусель «Вы недавно смотрели»: боковые поля на телефоне не нужны.

   Правило .history-products-carousel { padding: 20px } задано в кастомайзере
   («Внешний вид → Настроить → Дополнительные стили»), а не в файлах темы —
   поэтому оно и не находилось поиском по коду. Инлайновые стили кастомайзера
   печатаются после файлов темы, так что перебить их порядком нельзя: берём
   специфичностью — три класса против одного.

   Верхнее поле сохраняем: плашка акции выступает за край карточки, а у
   свайпера overflow:hidden, и при нулевом поле она срезается. Ровно та же
   история, что и в блоке похожих товаров.

   Если правило из кастомайзера когда-нибудь уберут, это останется рабочим. */
@media (max-width: 767.98px) {
	.single-product .merchant-history-products .history-products-carousel {
		padding: 18px 0 0;
	}
}