/* Фотографии товара в карточке каталога.
   На телефоне идут сами, пока карточка на экране; на десктопе — пока курсор
   на карточке, и их перебирают, ведя курсор по нити.
   Разметку печатает inc/product-card-gallery.php, ход кадров — assets/product-card.js.

   Что чем управляется, решают медиавыражения и `event.pointerType`, а не
   `wp_is_mobile()`: страницы лежат в кеше WP Super Cache одним файлом на всех,
   и решение, принятое на сервере, досталось бы чужому устройству. */

/* Горизонталь забираем себе, вертикаль оставляем странице — иначе смахивание
   по фотографии и прокрутка каталога спорят друг с другом. */
.product-wrapper .thumbnail-wrapper {
	touch-action: pan-y;
}

/* Затемнение темы на наведении (`> a:before`, z-index 4) лежит поверх всего
   и перехватывает мышь раньше нити — до отрезков курсор просто не доходил.
   Само затемнение оставляем, событий ему не нужно: это чистое украшение,
   а ссылкой работает сам `<a>` под ним. */
.product-wrapper .thumbnail-wrapper > a:before {
	pointer-events: none;
}

.tk-shot {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 3;
	overflow: hidden;
	pointer-events: none;
}

/* width со звёздочкой — потому что тема правит ширину картинок внутри ссылки
   тем же способом: `.woocommerce .products .product a img{width:100%!important}`. */
.tk-shot__frame {
	position: absolute;
	left: 0;
	top: 0;
	width: 100% !important;
	height: 100%;
	margin: 0;
	object-fit: cover;
	opacity: 0;
	transition: opacity 420ms ease;
}

.tk-shot__frame.is-on { opacity: 1; }

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

   На телефоне нити нет. Там кадры меняются сами, и о том, что фотографий
   несколько, говорит сама смена — полоски поверх товара только сорят. */
.tk-shot__thread {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	gap: 4px;
	padding: 52px 14px 13px;
	background: linear-gradient(to top, rgba(29, 58, 55, 0.36), rgba(29, 58, 55, 0));
	opacity: 0;
	transition: opacity 260ms ease;
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
	.tk-shot__thread { display: flex; }

	.product-wrapper .thumbnail-wrapper:hover .tk-shot__thread {
		opacity: 1;
		pointer-events: auto;
	}
}

/* Спокойный режим на телефоне: кадры сами не идут, и нить остаётся
   единственным знаком, что фотографию можно пролистать пальцем. */
@media (hover: none) and (prefers-reduced-motion: reduce) {
	.tk-shot__thread {
		display: flex;
		opacity: 1;
		padding: 34px 10px 10px;
	}

	.tk-shot__seg:first-child > i { width: 100%; }
}

.tk-shot__seg {
	position: relative;
	flex: 1 1 0;
	height: 3px;
	background: rgba(255, 253, 249, 0.5);
}

/* Целиться курсором в трёхпиксельную полоску невозможно, поэтому у каждого
   отрезка своё поле попадания в 24 px высотой, без просветов между соседями. */
.tk-shot__seg::after {
	content: "";
	position: absolute;
	left: -2px;
	right: -2px;
	top: -11px;
	bottom: -10px;
}

.tk-shot__seg > i {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: #c09a5e;
}

/* Кадры всё равно листаются — это ответ на действие, а не украшение.
   Убираем растворение; сами по себе кадры в этом режиме не идут (см. скрипт). */
@media (prefers-reduced-motion: reduce) {
	.tk-shot__frame { transition: none; }
}