/* Страница товара по макету Claude Design «Карточка товара · 1a» — 01.09.2026.

   Что делает файл: шапку страницы (крошки и переходы к соседям), галерею
   с колонкой миниатюр слева, колонку покупки, вкладки и блок похожих товаров.
   Разметку печатают тема и WooCommerce — inc/product-head.php
   и inc/product-single.php только переставляют хуки и добавляют три своих
   блока (выгода, доставка/оплата/возврат, ссылка на таблицу размеров).

   Отличия от макета — те же, что в каталоге, плюс два своих:
   • зелёный #1D3A37, а не #14322B, и шрифт Jost вместо Golos Text —
     фирменные для сайта, каталог собран так же;
   • кадр галереи 3:4, а не 4:5: исходники сняты в 3:4, обрезка до 4:5
     съела бы низ комплекта. Миниатюры квадратные — тема заказывает у Woo
     размер woocommerce_thumbnail (700×700), и в 3:4 они бы обрезались вдвое;
   • на кадре одна круглая кнопка — лупа. Сердечка в углу нет: «В избранное»
     стоит ниже кнопки покупки, и одно и то же действие в двух местах
     кадра только сбивает;
   • карточки похожих товаров — те же, что в каталоге (быстрый просмотр
     глазком в углу, покупка на низу кадра), а не «Быстрый просмотр» полосой
     из макета: карточка на сайте одна на все витрины;
   • строки «поделиться» в колонке нет — её нет и в макете.

   Своего файла токенов в теме нет: каждый ассет объявляет нужное сам. */

.tk-p-head,
:is(#main-content, #ts-quickshop-modal){
	--tkp-deep: #1D3A37;
	--tkp-deep-up: #254A46;
	--tkp-gold: #8A6A3B;
	--tkp-paper: #FBF9F6;
	--tkp-cream: #FFFDF9;
	--tkp-sand: #F7F4EF;
	--tkp-stone: #EFEBE5;
	--tkp-line: #E9E2D6;
	--tkp-line-soft: #E4DCCF;
	--tkp-muted: #A9A093;
	--tkp-soft: #55504A;
	--tkp-dim: #7C756C;
	--tkp-strike: #BDB4A6;
	--tkp-ok: #2F7D4F;
	--tkp-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==================================================================
   1. Шапка страницы: крошки и переходы к соседним товарам
   ================================================================== */

.tk-p-head{
	border-bottom: 1px solid var(--tkp-line);
}
.tk-p-head__inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding-top: 22px;
	padding-bottom: 22px;
}

/* Крошки печатает тема (mydecor_breadcrumbs → woocommerce_breadcrumb),
   поэтому правила идут по её узлам, а не по своим. */
.tk-p-head__crumbs .breadcrumbs,
.tk-p-head__crumbs .breadcrumbs-container{
	margin: 0;
	padding: 0;
	background: none;
	min-height: 0;
}
.tk-p-head__crumbs,
.tk-p-head__crumbs .woocommerce-breadcrumb{
	font-size: 12.5px;
	line-height: 18px;
	color: var(--tkp-soft);
}
.tk-p-head__crumbs a{
	color: #8A8279;
	text-decoration: none;
	transition: color 200ms ease;
}
.tk-p-head__crumbs a:hover,
.tk-p-head__crumbs a:focus-visible{
	color: var(--tkp-gold);
}
.tk-p-head__crumbs span{
	color: #CFC6B8;
	margin: 0 5px;
}

.tk-p-head__nav{
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 12.5px;
	white-space: nowrap;
}
.tk-p-head__nav-sep{
	color: var(--tkp-line-soft);
}
.tk-p-head__nav-link{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #8A8279;
	text-decoration: none;
	transition: color 200ms ease;
}
.tk-p-head__nav-link:hover,
.tk-p-head__nav-link:focus-visible{
	color: var(--tkp-gold);
}
.tk-p-head__nav-link.is-off{
	color: #CFC6B8;
	cursor: default;
}

/* ==================================================================
   2. Две колонки: галерея и покупка
   ================================================================== */

/* .product-images-summary печатает тема (mydecor_before_single_product_summary_images).
   Ширина правой колонки из макета — 452px при странице 1440. */
:is(#main-content, #ts-quickshop-modal) :is(.product-images-summary, .ts-quickshop-wrapper){
	display: grid;
	grid-template-columns: minmax(0, 1fr) 476px;
	gap: 0 56px;
	align-items: start;
	padding-top: 44px;
}
:is(#main-content, #ts-quickshop-modal) :is(.product-images-summary, .ts-quickshop-wrapper) > .woocommerce-product-gallery{
	grid-column: 1;
	grid-row: 1;
}
:is(#main-content, #ts-quickshop-modal) :is(.product-images-summary, .ts-quickshop-wrapper) > .summary{
	grid-column: 2;
	grid-row: 1;
}

/* Галерея: миниатюры колонкой слева, кадр справа. Флекс-слайдер WooCommerce
   печатает .flex-viewport вокруг кадров и ol.flex-control-thumbs после них,
   поэтому полосу миниатюр уводим влево абсолютом, а кадру отдаём отступ.

   Абсолютом, а не колонкой сетки: у разных товаров фотографий от четырёх
   до шести, и колонкой полоса становилась выше кадра. Прижатая к его верху
   и низу, она всегда ровно по кадру, а миниатюры делят его высоту поровну. */
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery{
	/* Ширину полосы подбирает assets/product.js под число фотографий:
	   миниатюры остаются квадратными, а полоса — ровно по высоте кадра.
	   78px здесь — запасное значение на случай, если скрипт не доехал. */
	--tkp-thumb: 78px;
	position: relative;
	padding-left: calc(var(--tkp-thumb) + 16px);
	float: none;
	width: auto;
	margin: 0;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery .flex-viewport,
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper{
	position: relative;
	margin: 0;
}
/* Рамка кадра — накладкой, а не рамкой самого кадра: слайдер держит у него
   ширину и высоту в пикселях, и лишние два пикселя border сбили бы расчёт.
   Накладка ничего не занимает и лежит поверх фотографии. */
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery .flex-viewport:after{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border: 1px solid var(--tkp-line);
	pointer-events: none;
}
/* Полоса прижата к верху и низу кадра. Миниатюры квадратные и все на виду
   при любом числе фотографий — ширину полосы под это число подбирает
   assets/product.js. */
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery ol.flex-control-thumbs{
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--tkp-thumb);
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery ol.flex-control-thumbs li{
	flex: 0 0 auto;
	width: 100%;
	margin: 0;
	padding: 0;
	float: none;
	list-style: none;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery ol.flex-control-thumbs li img{
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	opacity: 1;
	border: 1px solid var(--tkp-line);
	transition: border-color 220ms ease;
	cursor: pointer;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery ol.flex-control-thumbs li img:hover{
	border-color: var(--tkp-line-soft);
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active{
	border-color: var(--tkp-deep);
}

/* Кадр 3:4 — как сняты сами фотографии.

   Квадрат тут стоял с 01.09 ради того, чтобы кадр помещался на экран
   ноутбука целиком, и это оказалось дороже, чем выглядело: съёмка у всех
   товаров вертикальная 1086×1448, то есть ровно 3:4, и квадратная рамка
   срезала четверть высоты — вместе с головой модели. Владелец увидел это
   07.09.2026 и попросил вернуть 3:4. Размен принят осознанно: кадр стал
   выше, зато не режет кадр съёмки.

   Три пижамы сняты 2:3 (1024×1536) — они выше рамки и теряют по 5,5%
   сверху и снизу; проверено, головы у них при этом целы. Один оптовый
   комплект снят квадратом и подрезается по бокам.

   Соотношение задаём картинке, а не контейнеру: без общей рамки соседние
   кадры в слайдере были бы разной высоты. */
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery .woocommerce-product-gallery__image{
	position: relative;
	background: var(--tkp-stone);
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery .woocommerce-product-gallery__image > a,
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery .woocommerce-product-gallery__image > a > img,
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery .woocommerce-product-gallery__image > img{
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery .woocommerce-product-gallery__image > a{
	aspect-ratio: auto;
}

/* Ярлык скидки печатает inc/catalog-card.php тем же кодом, что и в каталоге. */
/* Ярлык и круглые кнопки стоят на одной оптической линии. Общий отступ
   сверху им не годится: ярлык — прямоугольник в 26px, кнопка — круг в 38px,
   и при равном top их центры расходятся на шесть пикселей. Совмещаем центры:
   18 + (38 − 26) / 2 = 24. */
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery .product-label{
	position: absolute;
	left: 18px;
	top: 24px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin: 0;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery .product-label span{
	display: inline-flex;
	align-items: center;
	height: 26px;
	/* margin: 0 обязателен: тема даёт ярлыку 10px сверху, и они уводили
	   его ниже линии круглых кнопок. */
	margin: 0;
	padding: 0 10px;
	border-radius: 0;
	background: var(--tkp-cream);
	color: var(--tkp-gold);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery .product-label span.featured{
	background: var(--tkp-deep);
	color: var(--tkp-sand);
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery .product-label span.out-of-stock{
	background: var(--tkp-stone);
	color: var(--tkp-soft);
}

/* Лупа — штатная кнопка WooCommerce (.woocommerce-product-gallery__trigger).
   Свою мы не печатаем: любой узел внутри .woocommerce-product-gallery__wrapper
   позиционируется от него, а слайдер двигает обёртку трансформом — кнопка
   уезжала на четыре ширины кадра вправо, за экран. Штатная лежит прямым
   ребёнком галереи и потому стоит там, где надо.

   Внутри у неё эмодзи-картинка «🔍» — прячем её и рисуем знак маской
   тем же приёмом, что у быстрого просмотра в каталоге. */
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .woocommerce-product-gallery__trigger{
	position: absolute;
	right: 18px;
	top: 18px;
	z-index: 3;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 253, 249, 0.92);
	color: var(--tkp-deep);
	font-size: 0;
	text-decoration: none;
	transition: background 200ms ease, color 200ms ease;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .woocommerce-product-gallery__trigger:hover,
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .woocommerce-product-gallery__trigger:focus-visible{
	background: var(--tkp-cream);
	color: var(--tkp-gold);
}
/* Внутри штатной кнопки лежит эмодзи-картинка «🔍» — её прячем, знак
   рисует своим SVG assets/product.js. Маской по :after не обошлись:
   в Firefox знак не доезжал, и в углу кадра оставался пустой кружок. */
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .woocommerce-product-gallery__trigger img,
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .woocommerce-product-gallery__trigger:before{
	display: none;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .woocommerce-product-gallery__trigger svg{
	display: block;
}

/* Стрелки листания. Свои, а не штатные флекс-слайдеровские: те он вешает
   внутрь .woocommerce-product-gallery__wrapper, который сам же и двигает
   трансформом. Печатает их assets/product.js в рамку кадра. */
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery .tk-p__arrow{
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 253, 249, 0.92);
	color: var(--tkp-deep);
	box-shadow: 0 2px 8px rgba(29, 58, 55, 0.14);
	cursor: pointer;
	opacity: 0;
	transition: opacity 200ms ease, background 200ms ease, color 200ms ease;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery .tk-p__arrow--prev{
	left: 18px;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery .tk-p__arrow--next{
	right: 18px;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery:hover .tk-p__arrow,
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery .tk-p__arrow:focus-visible{
	opacity: 1;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery .tk-p__arrow:hover{
	background: var(--tkp-cream);
	color: var(--tkp-gold);
}
/* На тач-экранах наведения нет — стрелки видны всегда. */
@media (hover: none){
	:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery .tk-p__arrow{
		opacity: 1;
	}
}

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

   Полоса набрана как строка заказа: слева тихая арифметика, справа сумма
   тем же начертанием, что цена. Рамка и подложка — те же, что у панели
   состава комплекта выше, чтобы блок читался как её продолжение, а не как
   случайная надпись под кнопкой. */
:is(#main-content, #ts-quickshop-modal) .summary .tk-p__total{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	/* Отступ держит сама обёртка, а не строка внутри: у пустой обёртки
	   верхний отступ ребёнка схлопывался наружу, и колонка всё равно
	   уезжала на эти пиксели. */
	margin-top: 12px;
	min-height: 46px;
	padding: 0 18px;
	border: 1px solid transparent;
	background: none;
	transition: background-color 200ms ease, border-color 200ms ease;
}
:is(#main-content, #ts-quickshop-modal) .summary .tk-p__total.is-on{
	align-items: center;
	border-color: var(--tkp-line);
	background: var(--tkp-cream);
}
/* Убрали плашку — убираем и числа. Раньше пропадали только рамка с фоном,
   а счёт оставался висеть голой строкой: убавив количество до одного,
   человек видел «2 × 16 106 ₽» и сумму за две штуки. Место под полосу
   при этом остаётся занятым — иначе всё, что ниже, ездит на каждый щелчок
   по «плюсу». `visibility`, а не `display`: строку не должен читать
   и экранный диктор. */
:is(#main-content, #ts-quickshop-modal) .summary .tk-p__total:not(.is-on):not(.is-note) > span{
	visibility: hidden;
}
:is(#main-content, #ts-quickshop-modal) .summary .tk-p__total-calc{
	font-size: 13px;
	line-height: 1.2;
	color: var(--tkp-soft);
	font-variant-numeric: tabular-nums;
}
:is(#main-content, #ts-quickshop-modal) .summary .tk-p__total-sum{
	font-size: 19px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--tkp-deep);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* Строку сниппета прячем: тот же счёт теперь печатаем сами
   (assets/product.js), а его текст разложить по углам полосы нечем.

   `.tinkley-opt-total` — та же строка у оптовых товаров, её печатает
   сниппет 20828. Она показывалась и при одной штуке — «Итого за 1 шт.:
   2 215 ₽» повторяло цену, стоящую строкой выше (замечание владельца
   11.09.2026). Наша полоса появляется от двух штук, когда счёт правда
   отличается от цены. */
:is(#main-content, #ts-quickshop-modal) .summary .tinkley-opt-total,
:is(#main-content, #ts-quickshop-modal) .summary .tinkley-retail-total{
	display: none !important;
}

/* Сердечко — второй круглой кнопкой под лупой. Узел переносит сюда
   assets/product.js: справа сверху собраны действия с фотографией и товаром,
   слева — что это за товар. */
/* Знак сердца рисуем фоном самого контейнера, а не значком внутри ссылки:
   внутренности ссылки YITH перерисовывает своими шаблонами (иконка приходит
   из настроек плагина и может не прийти вовсе — так и вышло, в кружке было
   пусто), а контейнер он не трогает. Фоновой картинкой, а не маской:
   маска в Firefox не доезжает, на этом уже спотыкались с лупой. */
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .yith-wcwl-add-to-wishlist{
	--tkp-heart: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231D3A37'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2020.3S3.6%2015.2%203.6%209.5A4.4%204.4%200%200112%206.9a4.4%204.4%200%20018.4%202.6c0%205.7-8.4%2010.8-8.4%2010.8z'/%3E%3C/svg%3E");
	--tkp-heart-on: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23F7F4EF'%20stroke='%23F7F4EF'%20stroke-width='1.7'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2020.3S3.6%2015.2%203.6%209.5A4.4%204.4%200%200112%206.9a4.4%204.4%200%20018.4%202.6c0%205.7-8.4%2010.8-8.4%2010.8z'/%3E%3C/svg%3E");
	position: absolute;
	right: 18px;
	top: 64px;
	z-index: 3;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 253, 249, 0.92) var(--tkp-heart) center / 18px 18px no-repeat;
	box-shadow: 0 2px 8px rgba(29, 58, 55, 0.14);
	transition: background-color 200ms ease;
}
/* Кнопка — только знак. Всё, что плагин кладёт рядом, с экрана убираем:
   в состоянии «в избранном» он печатает внутрь ещё «или» и ссылку
   «Просмотр ›» (add-to-wishlist-remove.php), и они вываливались из кружка.
   `font-size: 0` у контейнера добивает голые текстовые узлы, до которых
   селектором не дотянуться; подписи-подсказке кегль возвращаем. */
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .yith-wcwl-add-to-wishlist{
	font-size: 0;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .yith-wcwl-add-to-wishlist a > *:not(.ts-tooltip),
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .yith-wcwl-add-to-wishlist img,
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .yith-wcwl-add-to-wishlist i,
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .yith-wcwl-add-to-wishlist .separator,
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .yith-wcwl-add-to-wishlist .feedback,
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .yith-wcwl-add-to-wishlist a.view-wishlist,
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse,
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse{
	display: none;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .yith-wcwl-add-to-wishlist > div{
	width: 100%;
	height: 100%;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .yith-wcwl-add-to-wishlist a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tkp-deep);
	font-size: 17px;
	line-height: 1;
	text-decoration: none;
	transition: color 200ms ease;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .yith-wcwl-add-to-wishlist:hover{
	background-color: var(--tkp-cream);
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .yith-wcwl-add-to-wishlist a:hover{
	color: var(--tkp-gold);
}
/* Товар уже в избранном — кнопка заливается, это видно без наведения. */
/* Товар в избранном — по ссылке удаления: именно её плагин печатает вместо
   «добавить», когда товар уже в списке (поведение `remove`). Это надёжнее
   классов состояния: их плагин переставляет не во всех ветках. */
/* «В избранном» — по классу от assets/wishlist.js, а не по остаткам
   разметки плагина: класс `exists` он вешает при добавлении и не снимает
   при удалении, а `a.delete_item` переживает замену фрагмента. Сердечко
   из-за этого залипало залитым у товара, которого в списке уже нет. */
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .yith-wcwl-add-to-wishlist[data-tk-wished]{
	/* Тот же случай, что и с выключенной кнопкой: состояние «уже в избранном»
	   плагин красит с !important. */
	background: var(--tkp-deep) var(--tkp-heart-on) center / 18px 18px no-repeat !important;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .yith-wcwl-add-to-wishlist[data-tk-wished] a{
	color: var(--tkp-sand);
}
/* Подпись — подсказкой по наведению, слева от кнопки: над ней место занято
   лупой, а под — краем кадра на телефоне. */
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .yith-wcwl-add-to-wishlist .ts-tooltip{
	font-size: 11px;
	position: absolute;
	right: calc(100% + 8px);
	top: 50%;
	transform: translateY(-50%);
	padding: 5px 9px;
	background: var(--tkp-deep);
	color: var(--tkp-sand);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	box-shadow: none;
	transition: opacity 180ms ease;
	pointer-events: none;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .yith-wcwl-add-to-wishlist .ts-tooltip:before,
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .yith-wcwl-add-to-wishlist .ts-tooltip:after{
	display: none;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .yith-wcwl-add-to-wishlist a:hover .ts-tooltip,
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery > .yith-wcwl-add-to-wishlist a:focus-visible .ts-tooltip{
	opacity: 1;
	visibility: visible;
}

/* Кадр открывает просмотрщик по клику — знак лупы в углу обещает это,
   а щёлкают всё равно по самой фотографии. Обработчик в assets/product.js. */
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery .woocommerce-product-gallery__image,
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery .woocommerce-product-gallery__image a{
	cursor: zoom-in;
}

/* Счётчик кадров. Число проставляет assets/product.js, он же кладёт узел
   в рамку кадра. Рамке флекс-слайдер сам ставит position: relative. */
:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery .tk-p__counter{
	position: absolute;
	left: 18px;
	bottom: 18px;
	z-index: 3;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10.5px;
	letter-spacing: 0.1em;
	color: rgba(255, 253, 249, 0.85);
	text-shadow: 0 1px 6px rgba(20, 28, 26, 0.45);
	pointer-events: none;
}

/* ==================================================================
   3. Колонка покупки
   ================================================================== */

/* padding: 0 — у темы колонке задан отступ слева в 50px, которым она
   отбивает её от галереи. Здесь это делает зазор сетки, а отступ съедал
   у колонки 50 из 452 макетных пикселей: строка покупки не помещалась,
   и подпись кнопки обрезалась. */
:is(#main-content, #ts-quickshop-modal) :is(.product-images-summary, .ts-quickshop-wrapper) .summary{
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	position: sticky;
	top: 24px;
}

/* Артикул и категории тема печатает последним блоком колонки
   (mydecor_template_single_meta). В макете это эйбров над заголовком —
   поднимаем порядком, а не переносом хука: так у товара сохраняется вся
   разметка блока, включая woocommerce_product_meta_start для плагинов. */
:is(#main-content, #ts-quickshop-modal) .summary .meta-content{
	order: -2;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tkp-muted);
}
:is(#main-content, #ts-quickshop-modal) .summary .meta-content > div{
	margin: 0;
	padding: 0;
	border: 0;
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}
:is(#main-content, #ts-quickshop-modal) .summary .meta-content .cats-link{
	order: -1;
}
/* Подписи «SKU:» и «Категории:» в эйбров не помещаются и не нужны:
   строка читается как «Комплекты COMFORT · арт. 1212». */
:is(#main-content, #ts-quickshop-modal) .summary .meta-content > div > span:first-child{
	display: none;
}
:is(#main-content, #ts-quickshop-modal) .summary .meta-content .sku-wrapper:before{
	content: "·";
	color: var(--tkp-line-soft);
}
:is(#main-content, #ts-quickshop-modal) .summary .meta-content .sku:before{
	content: "арт. ";
}
:is(#main-content, #ts-quickshop-modal) .summary .meta-content a{
	color: inherit;
	text-decoration: none;
	transition: color 200ms ease;
}
:is(#main-content, #ts-quickshop-modal) .summary .meta-content a:hover,
:is(#main-content, #ts-quickshop-modal) .summary .meta-content a:focus-visible{
	color: var(--tkp-gold);
}

/* Имя товара — имя, а не заголовок афиши. 52px/700 с минус-трекингом
   годились «Ворону» из четырёх букв, но у полного названия вроде
   «Комплект постельного белья „Ворон“» получалась глыба в три строки.
   Кегль плавает по ширине экрана, вес на ступень легче, трекинг почти
   нулевой — длинное имя укладывается в две ровные строки. */
:is(#main-content, #ts-quickshop-modal) .summary h1.product_title{
	order: -1;
	margin: 0;
	font-size: clamp(28px, 3.2vw, 38px);
	line-height: 1.12;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--tkp-deep);
	text-wrap: balance;
}

/* Оценка и наличие стоят в одном блоке темы (.detail-meta-top) — одной
   строкой. Цена печатается следом, отдельным узлом: внутри этого блока её
   гасит клиентский сниппет ОПТ, подробности в inc/product-single.php. */
:is(#main-content, #ts-quickshop-modal) .summary .detail-meta-top{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 18px 0 0;
	padding: 0;
	border: 0;
}
:is(#main-content, #ts-quickshop-modal) .summary .detail-meta-top .woocommerce-product-rating{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	line-height: 1;
}
:is(#main-content, #ts-quickshop-modal) .summary .detail-meta-top .availability{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0 0 0 17px;
	border: 0;
	position: relative;
	font-size: 13px;
	color: var(--tkp-soft);
}
/* Точка состояния и разделительная черта от оценки — оба знака рисуем сами:
   у темы на их месте иконочный шрифт и рамка блока. */
:is(#main-content, #ts-quickshop-modal) .summary .detail-meta-top .availability:before{
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background: var(--tkp-ok);
}
:is(#main-content, #ts-quickshop-modal) .summary .detail-meta-top .availability.out-of-stock:before{
	background: var(--tkp-strike);
}
:is(#main-content, #ts-quickshop-modal) .summary .detail-meta-top .availability > span:first-child{
	display: none;
}
:is(#main-content, #ts-quickshop-modal) .summary .detail-meta-top .ts-social-sharing{
	display: none;
}

/* Оценка держится на двух числах, и они должны совпадать до пикселя: ширина
   коробки (лишнее по краям режет `overflow: hidden`) и ширина пяти звёзд
   внутри. У темы они разъезжались: коробке она даёт 5,5em, а звёзды разводит
   разрядкой в 2px — строка выходит на десять пикселей шире коробки, и пятая
   звезда всегда приезжала обрезанной. Врала и заливка: долю оценки Woo задаёт
   процентом от коробки, и при «4 из 5» подсветка обрывалась посреди звезды.

   Считаем ширину сами: глиф звезды в шрифте WooCommerce занимает 1,052734em,
   разрядка добавляет по 2px на каждый из пяти. Разрядку тут же и назначаем —
   тема ставит её ПСЕВДОЭЛЕМЕНТАМ, а не самой строке, и заданная строке
   в них не наследуется. Два числа должны меняться только вместе.
   Проверено замером: 5 из 5 заливают ровно 5 звёзд, 4,25 — ровно 4,25. */
:is(#main-content, #ts-quickshop-modal) .summary .star-rating,
:is(#main-content, #ts-quickshop-modal) #reviews .star-rating{
	width: calc(5.2637em + 10px);
}
:is(#main-content, #ts-quickshop-modal) .summary .star-rating:before,
:is(#main-content, #ts-quickshop-modal) .summary .star-rating span:before,
:is(#main-content, #ts-quickshop-modal) #reviews .star-rating:before,
:is(#main-content, #ts-quickshop-modal) #reviews .star-rating span:before{
	letter-spacing: 2px;
}
:is(#main-content, #ts-quickshop-modal) .summary .star-rating{
	float: none;
	font-size: 12px;
	color: var(--tkp-gold) !important;
}
:is(#main-content, #ts-quickshop-modal) .summary .star-rating span:before{
	color: var(--tkp-gold) !important;
}
:is(#main-content, #ts-quickshop-modal) .summary .woocommerce-review-link,
:is(#main-content, #ts-quickshop-modal) .summary .woocommerce-product-rating a{
	color: #8A8279;
	font-size: 13px;
	text-decoration: none;
	border-bottom: 1px solid var(--tkp-line-soft);
	transition: color 200ms ease;
}
:is(#main-content, #ts-quickshop-modal) .summary .woocommerce-review-link:hover,
:is(#main-content, #ts-quickshop-modal) .summary .woocommerce-product-rating a:hover{
	color: var(--tkp-gold);
}

/* Строка цены: цена, старая цена и выгода стоят рядом, как в макете.
   Обёртку печатает inc/product-single.php между приоритетами 16 и 20.
   Цен внутри две — постоянная (p.price) и цена выбранного варианта
   (.ts-variation-price); тема показывает то одну, то другую, набраны они
   одинаково и стоят в одном месте, поэтому подмена не видна. */
:is(#main-content, #ts-quickshop-modal) .summary .tk-p__price{
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-top: 22px;
}
:is(#main-content, #ts-quickshop-modal) .summary .tk-p__price p.price,
:is(#main-content, #ts-quickshop-modal) .summary .tk-p__price .ts-variation-price{
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	font-size: 32px;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	color: var(--tkp-deep);
}
:is(#main-content, #ts-quickshop-modal) .summary .ts-variation-price .price{
	display: contents;
}
:is(#main-content, #ts-quickshop-modal) .summary p.price.hidden,
:is(#main-content, #ts-quickshop-modal) .summary .ts-variation-price.hidden{
	display: none;
}
:is(#main-content, #ts-quickshop-modal) .summary .tk-p__price p.price ins,
:is(#main-content, #ts-quickshop-modal) .summary .tk-p__price .ts-variation-price ins{
	order: -1;
	text-decoration: none;
	background: none;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}
:is(#main-content, #ts-quickshop-modal) .summary .tk-p__price :is(p.price, .ts-variation-price) del,
:is(#main-content, #ts-quickshop-modal) .summary .tk-p__price :is(p.price, .ts-variation-price) del *{
	font-size: 17px;
	font-weight: 400;
	color: var(--tkp-strike);
	opacity: 1;
}
/* Всё, что лежит внутри цены, набирается кеглем и цветом обёртки.

   Поимённо перечислять узлы бесполезно: у постоянной цены разметка
   `p.price > ins > span.amount`, а у цены варианта между ними есть ещё
   `span.price`, и по нему тема попадает своим правилом — после выбора
   размера цена вырастала до 40px и чернела. Правило по всему поддереву
   снимает этот класс ошибок целиком. */
:is(#main-content, #ts-quickshop-modal) .summary .tk-p__price :is(p.price, .ts-variation-price) *{
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	/* Поля тоже обнуляем: тема даёт им свои, и постоянная цена оказывалась
	   на одиннадцать пикселей шире цены варианта при тех же числах —
	   ярлык выгоды рядом прыгал влево на выборе размера. Расстояние между
	   ценами держит gap самой строки. */
	margin: 0;
	padding: 0;
}

/* Кегль, вес и цвет цене назначает не ins/del, а вложенный в них
   span.woocommerce-Price-amount — та же грабля, что в каталоге. */
:is(#main-content, #ts-quickshop-modal) .summary p.price .amount,
:is(#main-content, #ts-quickshop-modal) .summary p.price .woocommerce-Price-currencySymbol,
:is(#main-content, #ts-quickshop-modal) .summary .ts-variation-price .amount,
:is(#main-content, #ts-quickshop-modal) .summary .ts-variation-price .woocommerce-Price-currencySymbol{
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	letter-spacing: inherit;
}
:is(#main-content, #ts-quickshop-modal) .summary .screen-reader-text{
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Выгода — не третье число россыпью, а ярлык: у неё появляется тело,
   и она перестаёт висеть в воздухе рядом с двумя цифрами. Тот же язык,
   что у ярлыка скидки на кадре — золото по светлому. */
:is(#main-content, #ts-quickshop-modal) .summary .tk-p__saving{
	align-self: center;
	margin: 0;
	padding: 5px 9px;
	background: var(--tkp-sand);
	font-size: 11.5px;
	line-height: 1.2;
	color: var(--tkp-gold);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
:is(#main-content, #ts-quickshop-modal) .summary .tk-p__saving:empty{
	display: none;
}


/* Обратный отсчёт распродажи тема печатает подписью «Акция заканчивается
   через:» даже тогда, когда самого счётчика нет (дата окончания не задана).
   Одинокая подпись — не блок, прячем её, но не сам счётчик. */
:is(#main-content, #ts-quickshop-modal) .summary .single-counter-wrapper{
	margin: 0;
}
:is(#main-content, #ts-quickshop-modal) .summary .single-counter-wrapper > span:only-child,
:is(#main-content, #ts-quickshop-modal) .summary .single-counter-wrapper:empty{
	display: none;
}

/* Разделитель перед выбором размера. */
:is(#main-content, #ts-quickshop-modal) .summary form.cart{
	position: relative;
	margin: 28px 0 0;
	padding-top: 28px;
	border-top: 1px solid var(--tkp-line);
}
:is(#main-content, #ts-quickshop-modal) .summary form.cart table.variations{
	margin: 0;
	border: 0;
	display: block;
}
/* Ссылка вынута из потока, а подписи оставлено место справа: в колонке
   раскладкой она отбирала ширину у самих плиток, и «Семейный» переносился
   на вторую строку при том, что ряд помещался целиком.

   Оформлена кнопкой, а не подчёркнутым текстом: серый текст с чертой снизу
   читается как выключенное поле ввода, хотя вкладку она открывает. */
:is(#main-content, #ts-quickshop-modal) .summary form.cart .tk-p__chartlink{
	position: absolute;
	right: 0;
	top: 25px;
	/* z-index обязателен: ячейка подписи размера — флекс-контейнер во всю
	   ширину колонки, и она перехватывала клик мышью. Скрипт при этом
	   срабатывал, поэтому кнопка казалась живой при проверке и мёртвой
	   на сайте. */
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border: 1px solid var(--tkp-line-soft);
	background: var(--tkp-cream);
	font-size: 12px;
	line-height: 1.2;
	color: var(--tkp-soft);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 200ms ease, color 200ms ease;
}
:is(#main-content, #ts-quickshop-modal) .summary form.cart .tk-p__chartlink:hover,
:is(#main-content, #ts-quickshop-modal) .summary form.cart .tk-p__chartlink:focus-visible{
	border-color: var(--tkp-deep);
	color: var(--tkp-deep);
}

:is(#main-content, #ts-quickshop-modal) .summary table.variations tbody,
:is(#main-content, #ts-quickshop-modal) .summary table.variations tr,
:is(#main-content, #ts-quickshop-modal) .summary table.variations th,
:is(#main-content, #ts-quickshop-modal) .summary table.variations td{
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
}
/* Подпись и выбранное значение — одной строкой: у темы label блочный,
   и значение падало под него, а двоеточие ему рисует :before у самого
   значения. Пустую подпись тема печатает всегда, поэтому до выбора размера
   на строке оставалось одинокое «:». */
:is(#main-content, #ts-quickshop-modal) .summary table.variations th.label{
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	padding-right: 140px;
}
:is(#main-content, #ts-quickshop-modal) .summary table.variations th.label label{
	display: inline;
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tkp-deep);
	text-transform: none;
}
/* Выбранное значение тема дописывает к подписи («Выберите размер: 1,5 сп.»)
   отдельным узлом со своим двоеточием из :before — на строке он вставал
   не по базовой линии подписи. Не выравниваем, а убираем: выбранный размер
   и так назван подсвеченной плиткой прямо под подписью, и повторять его
   второй раз в той же строке незачем. */
:is(#main-content, #ts-quickshop-modal) .summary table.variations th.label .selected-value{
	display: none;
}
:is(#main-content, #ts-quickshop-modal) .summary table.variations td.value{
	padding-top: 12px;
}
:is(#main-content, #ts-quickshop-modal) .summary table.variations td.value + td.value{
	padding-top: 18px;
}

/* Плитки размеров печатает тема (mydecor_variation_attribute_options_html). */
:is(#main-content, #ts-quickshop-modal) .summary .ts-product-attribute{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}
:is(#main-content, #ts-quickshop-modal) .summary .ts-product-attribute .option{
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}
:is(#main-content, #ts-quickshop-modal) .summary .ts-product-attribute .option a{
	display: block;
	padding: 12px 18px;
	border: 1px solid var(--tkp-line-soft);
	background: var(--tkp-cream);
	color: var(--tkp-soft);
	font-size: 13.5px;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
:is(#main-content, #ts-quickshop-modal) .summary .ts-product-attribute .option a:hover{
	border-color: var(--tkp-deep);
	color: var(--tkp-deep);
}
:is(#main-content, #ts-quickshop-modal) .summary .ts-product-attribute .option.selected a,
:is(#main-content, #ts-quickshop-modal) .summary .ts-product-attribute .option.active a{
	border-color: var(--tkp-deep);
	background: var(--tkp-deep);
	color: var(--tkp-sand);
}
:is(#main-content, #ts-quickshop-modal) .summary .ts-product-attribute .option.disabled a{
	opacity: 0.4;
	pointer-events: none;
}

/* Размера нет на складе. Плитку оставляем на месте и оставляем нажимаемой:
   пропавший размер читается как «такого у магазина не бывает», а погашенный
   и неотзывчивый — как поломка. Нажали — WooCommerce покажет «Нет в наличии»
   и выключит кнопку, и это единственное честное объяснение.

   Отличаем не только цветом: линия по значению видна и в чёрно-белом,
   и тем, кто цвета различает плохо. */
:is(#main-content, #ts-quickshop-modal) .summary .ts-product-attribute .option.is-out a{
	border-color: var(--tkp-line);
	background: transparent;
	color: var(--tkp-strike);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
:is(#main-content, #ts-quickshop-modal) .summary .ts-product-attribute .option.is-out a:hover{
	border-color: var(--tkp-line-soft);
	color: var(--tkp-muted);
}
/* Выбран размер, которого нет: линия остаётся, но плитка читается
   как выбранная — иначе непонятно, к чему относится «Нет в наличии». */
:is(#main-content, #ts-quickshop-modal) .summary .ts-product-attribute .option.is-out.selected a,
:is(#main-content, #ts-quickshop-modal) .summary .ts-product-attribute .option.is-out.active a{
	border-color: var(--tkp-muted);
	background: transparent;
	color: var(--tkp-dim);
}

:is(#main-content, #ts-quickshop-modal) .summary a.reset_variations{
	display: inline-block;
	margin-top: 10px;
	font-size: 12.5px;
	color: #8A8279;
	text-decoration: none;
	border-bottom: 1px solid var(--tkp-line-soft);
}
:is(#main-content, #ts-quickshop-modal) .summary a.reset_variations:hover{
	color: var(--tkp-gold);
}

/* Состав комплекта. Это описание выбранного варианта — WooCommerce приносит
   его вместе с ценой и остатком, а assets/product.js раскладывает строки
   «Пододеяльник — 150 × 215 см» парами. Ради него и затевался выбор размера:
   до него на странице нигде не написано, что лежит в коробке. */
:is(#main-content, #ts-quickshop-modal) .summary .woocommerce-variation-description{
	margin: 18px 0 0;
	padding: 18px 20px;
	border: 1px solid var(--tkp-line);
	background: var(--tkp-cream);
}
:is(#main-content, #ts-quickshop-modal) .summary .woocommerce-variation-description:empty{
	display: none;
}
:is(#main-content, #ts-quickshop-modal) .summary .woocommerce-variation-description p{
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--tkp-soft);
}
:is(#main-content, #ts-quickshop-modal) .summary .tk-p__set{
	display: flex;
	flex-direction: column;
	gap: 10px;
}
:is(#main-content, #ts-quickshop-modal) .summary .tk-p__set-row{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	font-size: 13px;
}
:is(#main-content, #ts-quickshop-modal) .summary .tk-p__set-row dt{
	margin: 0;
	color: #8A8279;
	font-weight: 400;
}
:is(#main-content, #ts-quickshop-modal) .summary .tk-p__set-row dd{
	margin: 0;
	text-align: right;
	color: var(--tkp-deep);
	font-weight: 500;
}

/* Цену и наличие варианта тема уже показывает выше, в шапке колонки. */
:is(#main-content, #ts-quickshop-modal) .summary .single_variation .woocommerce-variation-price,
:is(#main-content, #ts-quickshop-modal) .summary .single_variation .woocommerce-variation-availability{
	display: none;
}
/* Своей строки «Нет в наличии» под составом комплекта не печатаем: то же
   самое уже сказано дважды — в шапке колонки, где тема подменяет наличие
   вслед за выбором, и на самой кнопке. Три одинаковые фразы в одном экране
   не добавляют ясности, а место занимают. */
:is(#main-content, #ts-quickshop-modal) .summary .single_variation_wrap{
	margin: 0;
}

/* Количество и кнопка. У товара с вариациями их держит своя обёртка
   WooCommerce, у простого они лежат прямо в форме — там строку собирает
   сама форма. */
:is(#main-content, #ts-quickshop-modal) .summary .woocommerce-variation-add-to-cart{
	display: flex;
	align-items: stretch;
	gap: 10px;
	margin: 26px 0 0;
}
:is(#main-content, #ts-quickshop-modal) .summary form.cart:not(.variations_form){
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}
/* Тема вешает форме и строке кнопки клирфикс `::before`/`::after`
   (`content:" "; display:table`). Во флекс-контейнере псевдоэлементы
   становятся полноценными элементами: у простого товара это два невидимых
   соседа, которые съедали два лишних зазора — счётчик отступал от левого
   края колонки на 10px, а кнопка не доходила до правого. */
:is(#main-content, #ts-quickshop-modal) .summary form.cart:not(.variations_form):before,
:is(#main-content, #ts-quickshop-modal) .summary form.cart:not(.variations_form):after,
:is(#main-content, #ts-quickshop-modal) .summary .woocommerce-variation-add-to-cart:before,
:is(#main-content, #ts-quickshop-modal) .summary .woocommerce-variation-add-to-cart:after,
:is(#main-content, #ts-quickshop-modal) .summary .quantity .number-button:before,
:is(#main-content, #ts-quickshop-modal) .summary .quantity .number-button:after{
	display: none;
}
/* Ширину счётчику тема назначает процентами (css/responsive.css, он идёт
   после стилей child-темы) — на телефоне поле разъезжалось на 160px и
   подпись кнопки не помещалась. Считаем по содержимому. */
:is(#main-content, #ts-quickshop-modal) .summary .woocommerce-variation-add-to-cart .quantity,
:is(#main-content, #ts-quickshop-modal) .summary form.cart .quantity{
	/* Флекс, а не блок: внутри лежит подпись для диктора и пробелы между
	   узлами, и строка под них добавляла обёртке десять пикселей сверх
	   высоты самого счётчика — низ счётчика не совпадал с низом кнопки. */
	display: flex;
	flex: 0 0 auto;
	width: auto;
	height: 56px;
	margin: 0;
	float: none;
}
/* Когда нижняя и верхняя граница количества совпадают (товар продаётся
   поштучно или остался один), WooCommerce печатает вместо числового поля
   СКРЫТОЕ — `quantity-input.php`, ветка `$min_value === $max_value`.
   Браузер такое поле не рисует, а «минус» и «плюс» тема ставит отдельными
   кнопками рядом с ним: на экране остаётся пустая коробка со знаками,
   которые продолжают менять значение скрытого поля. Считать там нечего —
   счётчик убираем целиком, кнопка забирает строку покупки себе. */
:is(#main-content, #ts-quickshop-modal) .summary .quantity:has(input.qty[type="hidden"]){
	display: none;
}
/* Счётчик ждёт вместе с кнопкой: пока размер не выбран, считать нечего —
   у «Вороны» полуторный и семейный отличаются вдвое, и «3 шт.», набранные
   заранее, относились бы неизвестно к чему. Класс ставит assets/product.js,
   он же выключает сами поля, так что это только вид. Приглушаем на тон,
   а не гасим: счётчик должен остаться на месте, иначе строка покупки
   перестроится в момент выбора размера. */
:is(#main-content, #ts-quickshop-modal) .summary .quantity.is-off .number-button{
	/* Без заливки, как у кнопки рядом: пока размер не выбран, вся строка
	   покупки стоит контуром. Кремовая подложка делала счётчик почти
	   неотличимым от рабочего — владелец на это и указал. */
	border-color: var(--tkp-line-soft);
	background: transparent;
}
/* `[type="button"]` в селекторе не для красоты: правило знаков ниже
   по файлу имеет ровно такой же вес, и без атрибута выигрывало оно —
   счётчик стоял контуром, а знаки в нём оставались тёмными. */
:is(#main-content, #ts-quickshop-modal) .summary .quantity.is-off .number-button input,
:is(#main-content, #ts-quickshop-modal) .summary .quantity.is-off .number-button input[type="button"],
:is(#main-content, #ts-quickshop-modal) .summary .quantity.is-off .number-button input[type="button"]:hover,
:is(#main-content, #ts-quickshop-modal) .summary .quantity.is-off .number-button input.qty{
	color: var(--tkp-strike);
	cursor: not-allowed;
}

/* Упор в остаток и в единицу. WooCommerce ставит полю `max` по остатку
   выбранного размера, и обработчик темы честно отказывается считать выше:
   у «Ворона» полутораспальный лежит в одном экземпляре, «плюс» на нём
   не делал ничего и выглядел сломанным. Гасим тот знак, который больше
   ничего не изменит, — отказ становится видно до нажатия. */
:is(#main-content, #ts-quickshop-modal) .summary .quantity.is-max .number-button input.plus,
:is(#main-content, #ts-quickshop-modal) .summary .quantity.is-min .number-button input.minus,
:is(#main-content, #ts-quickshop-modal) .summary .quantity.is-max .number-button input.plus:hover,
:is(#main-content, #ts-quickshop-modal) .summary .quantity.is-min .number-button input.minus:hover{
	color: var(--tkp-strike);
	cursor: not-allowed;
}

/* Строка остатка занимает место полосы итога — оно и так зарезервировано,
   а показывать счёт за несколько штук там, где больше одной не купить,
   всё равно не придётся. */
:is(#main-content, #ts-quickshop-modal) .summary .tk-p__total-note{
	font-size: 13px;
	line-height: 1.2;
	color: var(--tkp-dim);
}
:is(#main-content, #ts-quickshop-modal) .summary .quantity .number-button{
	width: auto;
	display: flex;
	align-items: stretch;
	height: 56px;
	border: 1px solid var(--tkp-line-soft);
	background: var(--tkp-cream);
}
/* Тема ставит «минус» и «плюс» абсолютом поверх поля — счётчик тогда
   схлопывается по ширине одного поля, а знаки наезжают на цифру.
   Возвращаем всех троих в строку. */
:is(#main-content, #ts-quickshop-modal) .summary .quantity .number-button input[type="button"]{
	position: static;
	width: 44px;
	height: auto;
	padding: 0;
	border: 0;
	background: none;
	font-size: 18px;
	line-height: 1;
	color: #8A8279;
	cursor: pointer;
	transition: color 180ms ease;
}
:is(#main-content, #ts-quickshop-modal) .summary .quantity .number-button input[type="button"]:hover{
	color: var(--tkp-deep);
}
:is(#main-content, #ts-quickshop-modal) .summary .quantity .number-button input.qty{
	width: 40px;
	min-width: 40px;
	height: auto;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	color: var(--tkp-deep);
}

/* Подпись центруется флексом, а не line-height в высоту кнопки: у товара
   с двумя опциями она читается «Выберите параметры» и переносится на две
   строки — при line-height: 56px вторая строка уезжала за пределы кнопки. */
:is(#main-content, #ts-quickshop-modal) .summary button.single_add_to_cart_button{
	flex: 1;
	/* min-width: 0 — иначе флекс-элемент не сжимается ниже своей подписи,
	   и на телефоне кнопка выдавливала сердце за край колонки. */
	min-width: 0;
	/* Тема даёт кнопке десять пикселей сверху. Во флексовой строке покупки
	   это опускало её относительно счётчика: их низы не совпадали, а строка
	   выходила на те же десять пикселей выше нужного. */
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	height: auto;
	padding: 6px 20px;
	border: 0;
	border-radius: 0;
	background: var(--tkp-deep);
	color: var(--tkp-sand);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.25;
	text-align: center;
	transition: background 220ms ease, color 220ms ease;
}
:is(#main-content, #ts-quickshop-modal) .summary button.single_add_to_cart_button:hover{
	background: var(--tkp-deep-up);
	color: var(--tkp-cream);
}
/* Пока размер не выбран, строка покупки ждёт, а не выглядит сломанной:
   кнопка стоит контуром, без заливки. Плотная серо-бежевая плашка занимала
   ровно столько же места в глазу, сколько зелёная, и спорила с ценой
   за внимание — при том что нажать её нельзя. Пустая рамка говорит то же
   самое тише и оставляет единственную заливку на странице зелёной.

   Линия нарисована внутренней тенью, а не рамкой: у кнопки `border: 0`
   и высота 56px в строку со счётчиком — рамка добавила бы два пикселя
   и низы разъехались бы. */
:is(#main-content, #ts-quickshop-modal) .summary button.single_add_to_cart_button.disabled,
:is(#main-content, #ts-quickshop-modal) .summary button.single_add_to_cart_button.wc-variation-selection-needed{
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--tkp-line-soft);
	color: var(--tkp-muted);
	cursor: not-allowed;
}
/* Плюс тема рисует своим :before. Пока размер не выбран, кнопка говорит
   «Выберите размер» — плюс перед этим обещает не то. */
:is(#main-content, #ts-quickshop-modal) .summary button.single_add_to_cart_button.wc-variation-selection-needed:before{
	display: none;
}
/* !important здесь не от лени: выключенное состояние кнопки кто-то из темы
   или плагинов держит с !important — своё правило доезжает (проверено
   маркером outline), но фон перебивается. Обычное состояние кнопки при этом
   красится без всякого !important. */
/* Подтверждение «добавлено» — тот же зелёный, на тон светлее, а не золото.
   Золотом на сайте набраны тонкие вещи: нить под шапкой, ярлык выгоды,
   активная категория. Целая кнопка в золоте становилась самым ярким пятном
   страницы — ярче цены и ярче самого действия, которое к тому моменту уже
   произошло. Подтверждение должно звучать тише действия, поэтому меняется
   не цвет, а его глубина; что именно случилось, говорит галочка в подписи. */
/* Выключенная кнопка — не подтверждение. WooCommerce выключает её и когда
   размер выбран, а его нет на складе; красить это в зелёный «готово» было бы
   прямой ложью. Такая кнопка стоит контуром, как и до выбора размера, —
   а что именно мешает, говорят подпись на ней и строка «Нет в наличии». */
:is(#main-content, #ts-quickshop-modal) .summary button.single_add_to_cart_button[disabled]:not(.is-added),
:is(#main-content, #ts-quickshop-modal) .summary button.single_add_to_cart_button[disabled]:not(.is-added):hover{
	background: transparent !important;
	box-shadow: inset 0 0 0 1px var(--tkp-line-soft);
	color: var(--tkp-muted) !important;
	cursor: not-allowed;
}
/* Плюс перед подписью рисует тема. «+ Нет в наличии» — обещание положить
   в корзину то, чего нет; убираем его по той же причине, по которой убрали
   у «Выберите размер». */
:is(#main-content, #ts-quickshop-modal) .summary button.single_add_to_cart_button[disabled]:not(.is-added):before{
	display: none;
}

:is(#main-content, #ts-quickshop-modal) .summary button.single_add_to_cart_button.added,
:is(#main-content, #ts-quickshop-modal) .summary button.single_add_to_cart_button.is-added{
	background: var(--tkp-deep-up) !important;
	color: var(--tkp-cream) !important;
	box-shadow: none !important;
	opacity: 1 !important;
	cursor: default;
}

/* Сердечко уехало на кадр (правила выше), но печатается оно по-прежнему
   в строке покупки — переносит узел скрипт. Это запасной вид на случай,
   когда скрипт не доехал: кнопка остаётся на своём месте в строке, а не
   пропадает совсем. */
:is(#main-content, #ts-quickshop-modal) .summary form.cart .yith-wcwl-add-to-wishlist{
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	height: 56px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--tkp-line-soft);
	background: var(--tkp-cream);
	font-size: 12.5px;
	color: #8A8279;
}
:is(#main-content, #ts-quickshop-modal) .summary form.cart .yith-wcwl-add-to-wishlist a{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}
:is(#main-content, #ts-quickshop-modal) .summary form.cart .yith-wcwl-add-to-wishlist .ts-tooltip{
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	margin: 0;
	padding: 0;
	background: none;
	color: inherit;
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	box-shadow: none;
}
:is(#main-content, #ts-quickshop-modal) .summary form.cart .yith-wcwl-add-to-wishlist .ts-tooltip:before,
:is(#main-content, #ts-quickshop-modal) .summary form.cart .yith-wcwl-add-to-wishlist .ts-tooltip:after{
	display: none;
}

/* Доставка, оплата, возврат. */
/* Доставка · Оплата · Возврат.

   Ссылкой работает вся строка, поэтому слова «Подробно» в конце каждой
   больше нет: три одинаковых слова подряд ничего не сообщали, а место
   занимали. Что за строкой есть продолжение, говорит указатель справа —
   тот же язык, что у крошек и стрелок галереи. */
/* Правила блока не привязаны к колонке покупки намеренно: на телефоне
   assets/product.js переносит его под вкладки, и внутри `.summary` он там
   уже не лежит. Пока привязка была, после переноса блок терял всё
   оформление разом — строки превращались в маркированный список, подпись
   слипалась со значением («ДоставкаСДЭК по России»), уголки пропадали. */
:is(#main-content, #ts-quickshop-modal) .tk-p__trust{
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--tkp-line);
}
:is(#main-content, #ts-quickshop-modal) .tk-p__trust li{
	/* Блок, а не list-item: маркеру списка отводится строка даже при
	   `list-style: none`, и каждая строка выходила на 22px выше нужного. */
	display: block;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--tkp-line);
}
:is(#main-content, #ts-quickshop-modal) .tk-p__trust li > *{
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0 16px;
	padding: 14px 0;
	text-decoration: none;
	color: inherit;
}
:is(#main-content, #ts-quickshop-modal) .tk-p__trust .k{
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.7;
	color: var(--tkp-muted);
	transition: color 200ms ease;
}
:is(#main-content, #ts-quickshop-modal) .tk-p__trust .v{
	font-size: 13px;
	line-height: 1.5;
	color: var(--tkp-soft);
	text-wrap: pretty;
}
/* Указатель — уголок из двух границ, а не глиф: у шрифта сайта «›» стоит
   в строке выше середины и с уголками стрелок галереи не рифмуется. */
:is(#main-content, #ts-quickshop-modal) .tk-p__trust a:after{
	content: "";
	align-self: center;
	width: 7px;
	height: 7px;
	border: solid var(--tkp-muted);
	border-width: 1.5px 1.5px 0 0;
	transform: rotate(45deg);
	transition: border-color 200ms ease, transform 200ms ease;
}
:is(#main-content, #ts-quickshop-modal) .tk-p__trust a:hover .k,
:is(#main-content, #ts-quickshop-modal) .tk-p__trust a:focus-visible .k{
	color: var(--tkp-deep);
}
:is(#main-content, #ts-quickshop-modal) .tk-p__trust a:hover:after,
:is(#main-content, #ts-quickshop-modal) .tk-p__trust a:focus-visible:after{
	border-color: var(--tkp-gold);
	transform: rotate(45deg) translate(2px, -2px);
}
:is(#main-content, #ts-quickshop-modal) .tk-p__trust a:focus-visible{
	outline: 2px solid var(--tkp-gold);
	outline-offset: 2px;
}

/* ==================================================================
   4. Вкладки
   ================================================================== */

:is(#main-content, #ts-quickshop-modal) .woocommerce-tabs{
	margin: 72px 0 0;
	padding: 0;
	border: 0;
	/* У темы здесь overflow: hidden — им она обрезает свои переключения
	   вкладок. Заодно обрезался и список фильтра по звёздам в отзывах:
	   он абсолютный и раскрывается вниз, а панель кончалась раньше.
	   Ничего, что требовало бы обрезки, в наших вкладках нет. */
	overflow: visible;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-tabs ul.tabs{
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--tkp-line);
	list-style: none;
	text-align: left;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-tabs ul.tabs:before,
:is(#main-content, #ts-quickshop-modal) .woocommerce-tabs ul.tabs:after,
:is(#main-content, #ts-quickshop-modal) .woocommerce-tabs ul.tabs li:before,
:is(#main-content, #ts-quickshop-modal) .woocommerce-tabs ul.tabs li:after{
	display: none;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-tabs ul.tabs li{
	margin: 0 0 -1px;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-tabs ul.tabs li a{
	display: block;
	padding: 14px 20px;
	border-bottom: 2px solid transparent;
	font-size: 15px;
	font-weight: 400;
	color: var(--tkp-muted);
	text-transform: none;
	text-decoration: none;
	transition: color 200ms ease, border-color 200ms ease;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-tabs ul.tabs li a:hover{
	color: var(--tkp-soft);
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-tabs ul.tabs li.active a{
	border-bottom-color: var(--tkp-deep);
	color: var(--tkp-deep);
	font-weight: 700;
}

/* Резерв высоты, чтобы страница не прыгала при переключении вкладок. */
:is(#main-content, #ts-quickshop-modal) .woocommerce-tabs .panel{
	min-height: 300px;
	margin: 0;
	padding: 34px 0 0;
	border: 0;
	background: none;
}
:is(#main-content, #ts-quickshop-modal) .woocommerce-tabs .panel > h2:first-child{
	display: none;
}

/* Описание: рассказ слева, состав комплекта справа. */
:is(#main-content, #ts-quickshop-modal) .tk-p__desc{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 64px;
	align-items: start;
}
:is(#main-content, #ts-quickshop-modal) .tk-p__desc.is-single{
	grid-template-columns: minmax(0, 720px);
}
:is(#main-content, #ts-quickshop-modal) .tk-p__desc-main{
	max-width: 720px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--tkp-soft);
}
:is(#main-content, #ts-quickshop-modal) .tk-p__desc-main > p:first-child{
	font-size: 21px;
	line-height: 1.5;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--tkp-deep);
	text-wrap: pretty;
}
:is(#main-content, #ts-quickshop-modal) .tk-p__desc-main p{
	margin: 0 0 18px;
	text-wrap: pretty;
}
:is(#main-content, #ts-quickshop-modal) .tk-p__desc-main p:last-child{
	margin-bottom: 0;
}
:is(#main-content, #ts-quickshop-modal) .tk-p__desc-main p:empty{
	display: none;
	margin: 0;
}

:is(#main-content, #ts-quickshop-modal) .tk-p__desc-aside{
	padding-left: 32px;
	border-left: 1px solid var(--tkp-line);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--tkp-soft);
}
:is(#main-content, #ts-quickshop-modal) .tk-p__desc-eyebrow{
	margin-bottom: 16px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tkp-muted);
}
:is(#main-content, #ts-quickshop-modal) .tk-p__desc-aside ul{
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}
:is(#main-content, #ts-quickshop-modal) .tk-p__desc-aside ul li{
	position: relative;
	margin: 0 0 12px;
	padding-left: 24px;
	list-style: none;
}
:is(#main-content, #ts-quickshop-modal) .tk-p__desc-aside ul li:before{
	content: "—";
	position: absolute;
	left: 0;
	color: var(--tkp-gold);
}
:is(#main-content, #ts-quickshop-modal) .tk-p__desc-aside p{
	margin: 0 0 16px;
}
:is(#main-content, #ts-quickshop-modal) .tk-p__desc-aside p:empty{
	display: none;
	margin: 0;
}
:is(#main-content, #ts-quickshop-modal) .tk-p__desc-note{
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--tkp-muted);
}
:is(#main-content, #ts-quickshop-modal) .tk-p__desc-note p{
	margin: 0;
}
/* «Внимание!!!» — это не заголовок предупреждения, а его первая строка;
   в мелком примечании она лишняя. */
:is(#main-content, #ts-quickshop-modal) .tk-p__desc-note p:first-child{
	display: none;
}

/* Детали. */
:is(#main-content, #ts-quickshop-modal) .tk-p__specs{
	display: grid;
	grid-template-columns: 200px minmax(0, 320px) 200px minmax(0, 320px);
	column-gap: 18px;
	margin: 0;
	max-width: 1140px;
	font-size: 13.5px;
}
:is(#main-content, #ts-quickshop-modal) .tk-p__specs dt{
	padding: 15px 0;
	border-bottom: 1px solid var(--tkp-line);
	color: var(--tkp-muted);
	font-weight: 400;
}
:is(#main-content, #ts-quickshop-modal) .tk-p__specs dd{
	margin: 0;
	padding: 15px 0;
	border-bottom: 1px solid var(--tkp-line);
	color: var(--tkp-deep);
	font-weight: 500;
}
:is(#main-content, #ts-quickshop-modal) .tk-p__specs dd.is-wide{
	grid-column: span 2;
}

/* Таблица размеров — разметку печатает тема. */
:is(#main-content, #ts-quickshop-modal) .ts-size-chart-content{
	max-width: 900px;
	border: 1px solid var(--tkp-line);
	background: var(--tkp-cream);
	overflow-x: auto;
}
:is(#main-content, #ts-quickshop-modal) .ts-size-chart-content table.chart-table{
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 13.5px;
}
:is(#main-content, #ts-quickshop-modal) .ts-size-chart-content table.chart-table td{
	padding: 16px 22px;
	border: 0;
	border-top: 1px solid #EFE9DE;
	color: var(--tkp-soft);
	text-align: left;
	vertical-align: middle;
}
:is(#main-content, #ts-quickshop-modal) .ts-size-chart-content table.chart-table tr:first-child td{
	border-top: 0;
	padding-top: 14px;
	padding-bottom: 14px;
	background: #F3EFE7;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8A8279;
}
:is(#main-content, #ts-quickshop-modal) .ts-size-chart-content table.chart-table tr td:first-child{
	font-weight: 600;
	color: var(--tkp-deep);
}
:is(#main-content, #ts-quickshop-modal) .ts-size-chart-content table.chart-table tr:nth-child(odd) td{
	background: var(--tkp-paper);
}
:is(#main-content, #ts-quickshop-modal) .ts-size-chart-content table.chart-table tr:first-child td{
	background: #F3EFE7;
}

/* Отзывы. */
:is(#main-content, #ts-quickshop-modal) #reviews{
	max-width: 1000px;
	padding: 38px 40px;
	border: 1px solid var(--tkp-line);
	background: var(--tkp-cream);
}
:is(#main-content, #ts-quickshop-modal) #reviews #comments{
	padding: 0;
}
:is(#main-content, #ts-quickshop-modal) #reviews .woocommerce-Reviews-title{
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--tkp-deep);
}
:is(#main-content, #ts-quickshop-modal) #reviews .woocommerce-noreviews,
:is(#main-content, #ts-quickshop-modal) #reviews .woocommerce-verification-required{
	max-width: 460px;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	line-height: 1.6;
	color: var(--tkp-dim);
}

/* Разбивка по звёздам, фильтры и сами отзывы — разметка плагина
   «Фотоотзывы». Приводим её к языку страницы: золото вместо янтаря,
   прямые углы, наши линии. Звёзды плагин красит инлайном с !important,
   поэтому и здесь !important. */
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-overall-rating-and-rating-count{
	margin: 0 0 22px;
	padding: 0;
	border: 0;
	background: none;
}
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-stars-count{
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 520px;
}
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-row{
	display: grid;
	grid-template-columns: 74px minmax(0, 1fr) 28px;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
}
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-col-number{
	display: none;
}
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-col-star,
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-col-process,
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-col-rank-count{
	width: auto;
	padding: 0;
	float: none;
}
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-col-rank-count{
	font-size: 12.5px;
	color: var(--tkp-muted);
	text-align: right;
	font-variant-numeric: tabular-nums;
}
:is(#main-content, #ts-quickshop-modal) #reviews .rate-percent-bg{
	height: 6px;
	border-radius: 0;
	background: var(--tkp-stone);
}
:is(#main-content, #ts-quickshop-modal) #reviews .rate-percent{
	height: 6px;
	border-radius: 0;
	background: var(--tkp-gold) !important;
}
:is(#main-content, #ts-quickshop-modal) #reviews .star-rating{
	float: none;
	font-size: 12px;
	line-height: 1;
}
:is(#main-content, #ts-quickshop-modal) #reviews .star-rating:before,
:is(#main-content, #ts-quickshop-modal) #reviews .star-rating span:before,
:is(#main-content, #ts-quickshop-modal) #reviews .stars a:after{
	color: var(--tkp-gold) !important;
}
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-col-star .star-rating{
	font-size: 11px;
}

/* Фильтры: та же кнопка, что «Таблица размеров» в колонке покупки. */
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-filter-container{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 26px;
	padding: 0;
	border: 0 !important;
}
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-filter-container > .wcpr-filter-button{
	position: relative;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid var(--tkp-line-soft) !important;
	border-radius: 0;
	background: var(--tkp-cream);
	font-size: 12.5px;
	line-height: 1.2;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tkp-soft);
	text-decoration: none;
	transition: border-color 200ms ease, color 200ms ease;
}
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-filter-container > .wcpr-filter-button:hover,
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-filter-container > .wcpr-filter-button.wcpr-active{
	border-color: var(--tkp-deep) !important;
	color: var(--tkp-deep);
}
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-filter-button ul{
	z-index: 5;
	margin: 6px 0 0;
	padding: 6px 0;
	border: 1px solid var(--tkp-line);
	background: var(--tkp-cream);
	box-shadow: 0 10px 30px rgba(29, 58, 55, 0.1);
	list-style: none;
}
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-filter-button ul li{
	margin: 0;
	padding: 0;
	border: 0 !important;
	background: none;
	list-style: none;
}
/* Пункт меню — это ссылка внутри li, и оформлять надо её: у неё же висит
   класс .wcpr-filter-button, которым плагин красит и кнопки над меню.
   Капслок оттуда же: в одном меню кнопка и её пункты читались как две
   разные вещи. */
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-filter-button-ul a{
	display: block;
	margin: 0;
	padding: 9px 16px;
	border: 0 !important;
	background: none !important;
	font-size: 12.5px !important;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none !important;
	text-decoration: none;
	white-space: nowrap;
	color: var(--tkp-soft);
	transition: background-color 160ms ease, color 160ms ease;
}
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-filter-button-ul a:hover{
	background: var(--tkp-sand) !important;
	color: var(--tkp-deep);
}
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-filter-button-ul a.wcpr-active{
	color: var(--tkp-deep);
	font-weight: 600;
}

/* Сами отзывы. Плагин раскладывает их каменной кладкой в три колонки;
   на нашей ширине это две, и высоты карточек прыгают. Ставим обычную
   сетку: отзывы читают подряд, а не выхватывают из мозаики. */
:is(#main-content, #ts-quickshop-modal) #reviews ol.commentlist{
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Отзывы идут сверху вниз, по одному в строке. Плагин раскладывает их
   каменной кладкой в несколько колонок — читать так неудобно: глаз прыгает
   между столбцами и теряет порядок по дате. */
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-grid{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	column-count: auto;
}
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-grid-item{
	width: auto;
	margin: 0;
	padding: 0;
	break-inside: auto;
}
/* Фотографии ставим под текст отзыва: плагин печатает их первыми, порядок
   меняем раскладкой. Сначала кто и когда, потом что написал, и уже потом
   чем подтвердил — так отзыв и читают. */
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-content{
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 20px 22px;
	border: 1px solid var(--tkp-line);
	background: var(--tkp-paper);
}
/* Плагин отбивает текст отзыва на 15px по бокам — под свою раскладку,
   где фотографии стоят колонкой слева. У нас они лежат строкой под текстом,
   и от этих полей текст оказывался правее фотографий. */
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-content > .review-content-container{
	order: 1;
	padding: 0;
}
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-content > .reviews-images-container{
	order: 2;
}
:is(#main-content, #ts-quickshop-modal) #reviews .review-content-container-top{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 14px;
	margin-bottom: 10px;
}
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-comment-author{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tkp-deep);
}
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-review-rating{
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
/* Дата — служебная строка: прямое начертание вместо курсива плагина
   и нейтральный серый вместо тёплого. Тёплый стоял вплотную к золотым
   звёздам, и пара читалась как два акцента подряд. */
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-review-date{
	font-size: 12px;
	font-style: normal;
	color: #8C867E;
	font-variant-numeric: tabular-nums;
}
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-review-content{
	/* Строка длиной во всю карточку читается тяжело — держим её в пределах
	   привычных 70 знаков. */
	max-width: 68ch;
	font-size: 14px;
	line-height: 1.6;
	color: var(--tkp-soft);
	/* Плагин выключает текст по формату; на узкой карточке это давало
	   реки из пробелов между словами. */
	text-align: left;
	text-wrap: pretty;
}
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-review-content p{
	margin: 0 0 10px;
}
:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-review-content p:last-child{
	margin: 0;
}
/* «Покупка подтверждена» — знак, а не украшение: ставим его только там,
   где он что-то значит, и подписываем по наведению. */
:is(#main-content, #ts-quickshop-modal) #reviews .woocommerce-review__verified{
	font-size: 12px;
	line-height: 1;
	color: var(--tkp-ok);
}

/* Фотографии в отзыве. Плагин раскладывает их двумя ветками: одну картинку
   печатает справа от текста крупно, несколько — плиткой слева. Приводим обе
   к одному виду: ряд квадратных миниатюр над текстом, каждая открывается
   в просмотрщике плагина. */
:is(#main-content, #ts-quickshop-modal) #reviews .reviews-images-container{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px;
	height: auto !important;
	margin: 14px 0 0;
	float: none;
	width: auto;
}
/* display: contents — плагин делит фотографии на две обёртки (слева плитка,
   справа одиночная), и вместе с плиткой «+N» они складывались в три разных
   ряда. Растворяем обёртки: все миниатюры становятся элементами одного ряда
   и переносятся по ширине карточки. */
:is(#main-content, #ts-quickshop-modal) #reviews .reviews-images-wrap-left,
:is(#main-content, #ts-quickshop-modal) #reviews .reviews-images-wrap-right{
	display: contents;
}
/* Крупная фотография справа и счётчик «+N» — части родной раскладки плагина:
   он показывает первый снимок большим, рядом ставит плитку из всех снимков
   и подписывает «сколько ещё, кроме большого». В строке из одинаковых
   миниатюр большой снимок оказывается вторым экземпляром первого, а «+1»
   обещает фотографию, которой нет. Оставляем только плитку.
   Условие обязательно: при единственной фотографии плитка не печатается
   вовсе, и снимок живёт как раз в правой обёртке. */
:is(#main-content, #ts-quickshop-modal) #reviews .reviews-images-container:has(.reviews-images-wrap-left a) .reviews-images-wrap-right,
:is(#main-content, #ts-quickshop-modal) #reviews .reviews-images-container:has(.reviews-images-wrap-left a) .images-qty{
	display: none;
}
/* Плитку плагин раскладывает процентами ширины — миниатюры разъезжались
   по всей карточке. Ширину задаёт сама картинка, обёртка её только держит. */
:is(#main-content, #ts-quickshop-modal) #reviews .reviews-images-wrap{
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
}
/* margin: 0 — у плагина миниатюры центрируются автоматическими полями,
   а во флекс-строке auto-поля растаскивают элементы по всей ширине:
   две фотографии стояли рядом, остальные разъезжались по углам карточки. */
:is(#main-content, #ts-quickshop-modal) #reviews img.reviews-images{
	display: block;
	margin: 0 !important;
	width: 64px;
	height: 64px;
	max-width: none;
	object-fit: cover;
	border: 1px solid var(--tkp-line);
	cursor: zoom-in;
	transition: border-color 200ms ease;
}
:is(#main-content, #ts-quickshop-modal) #reviews img.reviews-images:hover{
	border-color: var(--tkp-deep);
}
/* «+1» — счётчик непоказанных фотографий. Плагин вешает его абсолютом,
   и он висел в углу карточки сам по себе; ставим его последней плиткой
   в тот же ряд, где он и читается как продолжение. */
:is(#main-content, #ts-quickshop-modal) #reviews .images-qty{
	position: static;
	margin: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0;
	border: 1px solid var(--tkp-line);
	border-radius: 0;
	background: var(--tkp-sand);
	color: var(--tkp-deep);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Пустой блок: у товара без отзывов «Фотоотзывы» всё равно печатают сводку
   по звёздам (все пять строк по нулям) и фильтры «С изображениями (0)» —
   выбор, в котором нечего выбирать. Заголовок «Отзывы» тоже лишний: под ним
   стоит строка «Отзывов пока нет», она и работает заголовком. */
:is(#main-content, #ts-quickshop-modal) #comments:has(.woocommerce-noreviews) .wcpr-overall-rating-and-rating-count,
:is(#main-content, #ts-quickshop-modal) #comments:has(.woocommerce-noreviews) .wcpr-filter-container,
:is(#main-content, #ts-quickshop-modal) #comments:has(.woocommerce-noreviews) .woocommerce-Reviews-title{
	display: none;
}
:is(#main-content, #ts-quickshop-modal) #comments:has(.woocommerce-noreviews) .woocommerce-noreviews{
	margin-bottom: 10px;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--tkp-deep);
}

/* ==================================================================
   5. Похожие товары
   ================================================================== */

/* Сами карточки красит assets/catalog.css — на странице товара он подключён
   тем же условием, что и разметка (inc/catalog-card.php). Здесь только
   строка заголовка и отступы. */
:is(#main-content, #ts-quickshop-modal) .tk-related{
	margin: 76px 0 0;
	padding: 0;
	border: 0;
}
/* Два блока витрин подряд — второму хватает меньшего разгона. */
:is(#main-content, #ts-quickshop-modal) .tk-related + .tk-related{
	margin-top: 56px;
}
:is(#main-content, #ts-quickshop-modal) .tk-related__head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 26px;
}
:is(#main-content, #ts-quickshop-modal) .tk-related__head h2{
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--tkp-deep);
}
:is(#main-content, #ts-quickshop-modal) .tk-related__all{
	font-size: 13px;
	color: #8A8279;
	text-decoration: none;
	border-bottom: 1px solid var(--tkp-line-soft);
	white-space: nowrap;
	transition: color 200ms ease;
}
:is(#main-content, #ts-quickshop-modal) .tk-related__all:hover,
:is(#main-content, #ts-quickshop-modal) .tk-related__all:focus-visible{
	color: var(--tkp-gold);
}
/* В каталоге ряд из трёх — там слева сайдбар. Здесь страница во всю ширину
   и в макете карточек четыре. Вес селектора равен весу правила каталога,
   поэтому важен порядок файлов: product.css зависит от catalog.css. */
:is(#main-content, #ts-quickshop-modal) .tk-related > .products{
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
}

/* ==================================================================
   6. Ширины
   ================================================================== */

/* ==================================================================
   Быстрый просмотр
   ================================================================== */

/* Окно печатает тема (`framework/quickshop.php`), состав колонки внутри —
   `inc/product-quickshop.php`. Всё, что написано выше по файлу, к этой
   колонке уже применяется: правила заданы на оба места сразу,
   `:is(#main-content, #ts-quickshop-modal)`. Здесь остаётся сама рама окна
   и две вещи, которых на странице товара нет, — эйбров и ссылка на товар.

   Скруглений и цветной каймы у окна нет намеренно: на сайте нет ни одной
   скруглённой плоскости крупнее таблетки сортировки, и окно не должно быть
   первой. Отделяет его от страницы только тень и глубина подложки. */
#ts-quickshop-modal .overlay{
	background: rgba(18, 40, 37, 0.55);
}
#ts-quickshop-modal .quickshop-container{
	/* Шире прежнего (было 1080) и с равными полями вместо 22 сверху и 30
	   снизу: кадр от этого крупнее, а полоса миниатюр перестаёт быть
	   строчкой точек сбоку. */
	width: min(1140px, calc(100vw - 64px));
	max-width: none;
	max-height: 88vh;
	padding: 32px;
	border: 0;
	border-radius: 0;
	background: var(--tkp-cream);
	box-shadow: 0 30px 80px rgba(18, 40, 37, 0.22);
	overflow: auto;
}
/* Поля держит рама окна, внутренняя обёртка темы их больше не добавляет:
   иначе слева и справа набегало по 30px сверх наших 32. */
#ts-quickshop-modal .quickshop-content{
	padding: 0;
}
/* Отступ сверху колонке даёт сама рама окна — на странице его давал
   отбой от шапки.

   Колонки в окне тянутся на всю высоту строки (`stretch`, а не `start`,
   как на странице): по нижней кромке кадра встаёт ссылка «Подробнее
   о товаре», и обе половины окна кончаются на одной линии. */
#ts-quickshop-modal .ts-quickshop-wrapper{
	grid-template-columns: minmax(0, 1fr) minmax(360px, 452px);
	gap: 0 48px;
	align-items: stretch;
	padding-top: 0;
}

/* Ширины колонок в окне тема держит своими процентами и флоатом
   (`#ts-quickshop-modal div.product div.images.woocommerce-product-gallery`,
   style.css 11620) — сетке они не оставляли ничего: кадр вставал в 214px,
   а колонка покупки в 384 вместо 476. Селектор длиннее теминого, иначе
   не перебить. Колонке там же снимается отбой в 40px: от кадра её отделяет
   зазор сетки, как и на странице товара. */
#ts-quickshop-modal div.product.ts-quickshop-wrapper > div.images.woocommerce-product-gallery,
#ts-quickshop-modal div.product.ts-quickshop-wrapper > .woocommerce-product-gallery{
	width: auto;
	max-width: none;
	float: none;
	margin: 0;
}
#ts-quickshop-modal div.product.ts-quickshop-wrapper > div.summary,
#ts-quickshop-modal div.product.ts-quickshop-wrapper > .summary{
	/* Колонку в окне тема вынимает из потока абсолютом — в сетке такой
	   элемент ширину трека не занимает, и `width: auto` считался у него
	   по содержимому: 344px вместо 476, из-за чего «Семейный» переносился
	   на вторую строку. Возвращаем в поток, дальше сетка сама. */
	position: static;
	width: auto !important;
	max-width: none;
	float: none;
	margin: 0;
	padding: 0;
}

/* Крестик — волосяной, как стрелки галереи. Тема рисует его глифом своего
   иконочного шрифта; шрифт в окне есть, но глиф тяжелее всего остального
   на этом листе. */
#ts-quickshop-modal .quickshop-container > .close{
	top: 16px;
	right: 16px;
	width: 34px;
	height: 34px;
	line-height: 34px;
	border-radius: 50%;
	background: none;
	color: var(--tkp-dim);
	font-size: 0;
	transition: color 200ms ease, background-color 200ms ease;
}
#ts-quickshop-modal .quickshop-container > .close:hover{
	background: var(--tkp-sand);
	color: var(--tkp-deep);
}
#ts-quickshop-modal .quickshop-container > .close:before,
#ts-quickshop-modal .quickshop-container > .close:after{
	content: "";
	position: absolute;
	left: 11px;
	top: 16px;
	width: 12px;
	height: 1.4px;
	background: currentColor;
}
#ts-quickshop-modal .quickshop-container > .close:before{
	transform: rotate(45deg);
}
#ts-quickshop-modal .quickshop-container > .close:after{
	transform: rotate(-45deg);
}

/* Эйбров: категория и артикул. На странице товара это `.meta-content` темы,
   поднятый порядком; в окне тема его не печатает вовсе, поэтому свой —
   но набран теми же 10,5px вразрядку капителью. */
#ts-quickshop-modal .summary .tk-p__eyebrow{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	margin: 0 0 12px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 16px;
	text-transform: uppercase;
	color: var(--tkp-muted);
}
#ts-quickshop-modal .summary .tk-p__eyebrow-sku:before{
	content: "·";
	margin-right: 8px;
	color: var(--tkp-strike);
}

/* Ссылка на товар — за ней описание, характеристики и отзывы, которых
   в окне нет. Уголок говорит, что строка ведёт дальше, тем же знаком,
   что у строк доставки на странице. */
#ts-quickshop-modal .summary .tk-p__more{
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 7px;
	/* Прижата к низу колонки, а не отбита от кнопки: колонка ниже кадра,
	   и отбитая ссылка оставляла под собой полсотни пикселей пустоты. */
	margin-top: auto;
	padding-top: 28px;
	font-size: 13px;
	line-height: 18px;
	color: var(--tkp-dim);
	text-decoration: none;
	transition: color 200ms ease;
}
#ts-quickshop-modal .summary .tk-p__more:after{
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.4px solid currentColor;
	border-top: 1.4px solid currentColor;
	transform: rotate(45deg);
}
#ts-quickshop-modal .summary .tk-p__more:hover{
	color: var(--tkp-gold);
}

/* Пустая строка итога места в окне не занимает: под кнопкой ничего нет,
   и ездить от её появления нечему. На странице товара место под неё держится
   всегда — там ниже стоит блок доставки, и он бы дёргался на каждый щелчок
   по «плюсу». */
#ts-quickshop-modal .summary .tk-p__total:not(.is-on):not(.is-note){
	display: none;
}
/* Ссылка «Очистить» под размерами скрыта, но место занимает — на нём и стоит
   отбой строки покупки. Свой отбой поверх него давал разрыв в полсотни
   пикселей ровно посередине колонки. */
#ts-quickshop-modal .summary .single_variation_wrap .woocommerce-variation-add-to-cart{
	margin-top: 4px;
}

/* Полоса миниатюр. Ширину и поля ей в окне задаёт тема селектором
   с идентификатором и тремя классами (`#ts-quickshop-modal div.product
   div.images .flex-control-thumbs li`, style.css): миниатюры выходили
   по 15px и читались сыпью битых картинок сбоку от кадра. Перебить это
   разумным селектором нельзя — отсюда !important. Сам размер считает
   assets/product.js, тем же уравнением, что на странице товара. */
#ts-quickshop-modal .woocommerce-product-gallery ol.flex-control-thumbs{
	/* Тема разводит полосу на 5px в стороны (`.flex-control-nav{margin:0 -5px}`),
	   и левый край миниатюр выходил за поле окна. */
	margin: 0 !important;
}
#ts-quickshop-modal .woocommerce-product-gallery ol.flex-control-thumbs li{
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

@media (max-width: 1279px){
	/* Ноутбучная ширина — самая ходовая, и именно здесь колонка была тесной:
	   380px не хватало ни длинному имени товара, ни строке покупки.
	   Забираем недостающее у кадра, он всё равно был крупнее нужного. */
	:is(#main-content, #ts-quickshop-modal) :is(.product-images-summary, .ts-quickshop-wrapper){
		grid-template-columns: minmax(0, 1fr) 430px;
		gap: 0 40px;
	}
	:is(#main-content, #ts-quickshop-modal) .tk-p__desc{
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 44px;
	}
	:is(#main-content, #ts-quickshop-modal) .tk-p__specs{
		grid-template-columns: 180px minmax(0, 1fr);
		max-width: 560px;
	}
}

@media (max-width: 991px){
	:is(#main-content, #ts-quickshop-modal) :is(.product-images-summary, .ts-quickshop-wrapper){
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding-top: 28px;
	}
	:is(#main-content, #ts-quickshop-modal) :is(.product-images-summary, .ts-quickshop-wrapper) > .summary{
		grid-column: 1;
		grid-row: 2;
		position: static;
		margin-top: 36px;
	}
	:is(#main-content, #ts-quickshop-modal) .woocommerce-tabs{
		margin-top: 48px;
	}
	:is(#main-content, #ts-quickshop-modal) .tk-p__desc{
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	:is(#main-content, #ts-quickshop-modal) .tk-p__desc-aside{
		padding-left: 0;
		padding-top: 28px;
		border-left: 0;
		border-top: 1px solid var(--tkp-line);
	}
	:is(#main-content, #ts-quickshop-modal) .tk-related{
		margin-top: 56px;
	}
	:is(#main-content, #ts-quickshop-modal) .tk-related > .products{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px){
	.tk-p-head__inner{
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding-top: 12px;
		padding-bottom: 12px;
	}
	/* Крошки сводятся к одной ссылке — на раздел, из которого товар.
	   Полная цепочка занимала на 375px строку целиком, а кончалась именем
	   товара, которое тут же повторял заголовок под ней. Разметку не трогаем:
	   она размечена для поисковиков и на десктопе стоит как стояла — прячем
	   только показ.

	   Имя товара тема печатает голым текстовым узлом, без обёртки, и
	   селектором до него не дотянуться: гасим кегль у контейнера и возвращаем
	   его нужной ссылке. Тем же кеглем уходят и разделители «›». */
	.tk-p-head__crumbs .breadcrumbs-container{
		font-size: 0;
	}
	/* Прячем всё, включая разделители: нулевой кегль убирает у них только
	   глиф, а боковые поля тема даёт им отдельно — три пары полей сдвигали
	   единственную оставшуюся крошку на двадцать пикселей от края. */
	.tk-p-head__crumbs .breadcrumbs-container > *{
		display: none;
	}
	.tk-p-head__crumbs .breadcrumbs-container > a:last-of-type{
		display: inline-flex;
		align-items: center;
		gap: 7px;
		font-size: 13px;
	}
	.tk-p-head__crumbs .breadcrumbs-container > a:last-of-type:before{
		content: "";
		width: 7px;
		height: 7px;
		border: solid var(--tkp-muted);
		border-width: 1.5px 0 0 1.5px;
		transform: rotate(-45deg);
	}
	/* «Предыдущий / Следующий» — удобство для десктопа, где мышь рядом
	   с краем экрана. На телефоне это две цели у самого верха, и ни одна
	   не ведёт туда, куда посетитель шёл. */
	.tk-p-head__nav{
		display: none;
	}
	:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery{
		padding-left: 0;
	}
	:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery ol.flex-control-thumbs{
		position: static;
		width: auto;
		margin-top: 10px;
		flex-direction: row;
		flex-wrap: wrap;
	}
	:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery ol.flex-control-thumbs li{
		flex: 0 0 auto;
		width: calc(25% - 8px);
	}
	/* Миниатюры повторяют рамку главного кадра, иначе они показывали бы
	   другой обрез того же снимка. */
	:is(#main-content, #ts-quickshop-modal) .woocommerce-product-gallery ol.flex-control-thumbs li img{
		aspect-ratio: 3 / 4;
		height: auto;
	}
	:is(#main-content, #ts-quickshop-modal) .summary h1.product_title{
		font-size: 30px;
	}
	:is(#main-content, #ts-quickshop-modal) .summary .tk-p__price{
		gap: 8px 12px;
	}
	:is(#main-content, #ts-quickshop-modal) .summary .tk-p__price p.price,
	:is(#main-content, #ts-quickshop-modal) .summary .tk-p__price .ts-variation-price{
		font-size: 30px;
		gap: 10px;
	}
	/* Выгода уходит на свою строку: втроём числа в 375px не помещаются. */
	:is(#main-content, #ts-quickshop-modal) .summary .tk-p__saving{
		flex: 0 0 100%;
	}
	:is(#main-content, #ts-quickshop-modal) .summary .detail-meta-top{
		grid-template-columns: minmax(0, 1fr);
		row-gap: 14px;
	}
	:is(#main-content, #ts-quickshop-modal) .summary .detail-meta-top .availability{
		grid-column: 1;
		grid-row: 2;
	}
	:is(#main-content, #ts-quickshop-modal) .summary .detail-meta-top > p.price{
		grid-row: 3;
	}
	/* На телефоне подпись и ссылка «Таблица размеров» в одну строку
	   не помещаются. Ссылка печатается первой в форме, поэтому колонку
	   раскладываем флексом и уводим её порядком под сами плитки.

	   Только у товара с вариациями: у простого товара форма — это и есть
	   строка покупки, и колонка растягивала счётчик количества во всю
	   ширину экрана. Кнопок «минус» и «плюс» по краям 355-пиксельной
	   плашки, между ними единица посередине — счётчик переставал читаться
	   как счётчик. Ширину ему задаёт содержимое, как и на десктопе. */
	:is(#main-content, #ts-quickshop-modal) .summary form.cart.variations_form{
		display: flex;
		flex-direction: column;
	}
	:is(#main-content, #ts-quickshop-modal) .summary table.variations th.label{
		padding-right: 0;
	}
	:is(#main-content, #ts-quickshop-modal) .summary form.cart .tk-p__chartlink{
		position: static;
		order: 2;
		align-self: flex-start;
		margin-top: 14px;
	}
	:is(#main-content, #ts-quickshop-modal) .summary form.cart .single_variation_wrap{
		order: 3;
	}
	:is(#main-content, #ts-quickshop-modal) .summary button.single_add_to_cart_button{
		padding: 6px 10px;
		font-size: 13px;
	}
	:is(#main-content, #ts-quickshop-modal) .summary .quantity .number-button input[type="button"]{
		width: 38px;
	}
	:is(#main-content, #ts-quickshop-modal) .summary .quantity .number-button input.qty{
		width: 34px;
		min-width: 34px;
	}
	/* Подпись встаёт над текстом, указатель держится справа на обе строки. */
	:is(#main-content, #ts-quickshop-modal) .tk-p__trust li > *{
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		gap: 3px 14px;
		padding: 13px 0;
	}
	:is(#main-content, #ts-quickshop-modal) .tk-p__trust .k,
	:is(#main-content, #ts-quickshop-modal) .tk-p__trust .v{
		grid-column: 1;
	}
	:is(#main-content, #ts-quickshop-modal) .tk-p__trust a:after{
		grid-column: 2;
		grid-row: 1 / span 2;
	}
	:is(#main-content, #ts-quickshop-modal) .woocommerce-tabs ul.tabs{
		overflow-x: auto;
		flex-wrap: nowrap;
	}
	:is(#main-content, #ts-quickshop-modal) .woocommerce-tabs ul.tabs li a{
		padding: 12px 14px;
		font-size: 14px;
		white-space: nowrap;
	}
	:is(#main-content, #ts-quickshop-modal) .tk-p__specs{
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	:is(#main-content, #ts-quickshop-modal) #reviews{
		padding: 24px 20px;
	}
	:is(#main-content, #ts-quickshop-modal) #reviews .wcpr-row{
		grid-template-columns: 64px minmax(0, 1fr) 24px;
	}
	:is(#main-content, #ts-quickshop-modal) #reviews .review-content-container-top{
		gap: 4px 10px;
	}
	:is(#main-content, #ts-quickshop-modal) .tk-related__head h2{
		font-size: 24px;
	}
}

@media (prefers-reduced-motion: reduce){
	:is(#main-content, #ts-quickshop-modal) :is(.product-images-summary, .ts-quickshop-wrapper) *,
	:is(#main-content, #ts-quickshop-modal) .woocommerce-tabs *{
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}
}