/**
 * Блок товара «main» — своя вёрстка вместо t744 (Tilda).
 * Подключается только на страницах товара (см. functions.php).
 *
 * Раскладка: справа текст на 40% ширины, слева галерея — всё остальное. На узком
 * экране колонки складываются в одну — текст уходит под картинку.
 */

.wsn-gmain {
	--wsn-gm-gap: clamp(26px, 3.9vw, 52px);
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(24px, 5vw, 90px) 20px 0;
	display: grid;
	/* minmax(0, 1fr) вместо 1fr: иначе широкая картинка не даёт колонке сжаться */
	grid-template-columns: minmax(0, 1fr) 40%;
	gap: var(--wsn-gm-gap);
	align-items: start;
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ галерея */

.wsn-gmain__gallery { min-width: 0; }

/* Кадр держит пропорцию самого частого формата фото — 1680x1119. Высота от
   ширины считается сама, поэтому при загрузке страницы блок не «прыгает».
   Скругление задано и кадру, и картинке: картинка не обязана занимать кадр
   целиком, но углы должны быть скруглены у обоих. */
.wsn-gmain__stage {
	position: relative;
	aspect-ratio: 1680 / 1119;
	line-height: 0;
	border-radius: 0;
	overflow: hidden;
}

/* contain: снимок вписывается в кадр целиком и упирается либо в ширину,
   либо в высоту — что раньше кончится; ничего не обрезается и не растягивается */
.wsn-gmain__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
}

/* Стрелки. Кликается не кружок, а полоса во всю высоту кадра шириной 15% —
   попасть по ней проще. Полоса прозрачная, под курсором темнеет; кружок со
   стрелкой внутри неё выглядит так же, как раньше. */
.wsn-gmain__arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 15%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: transparent;
	color: #fff;
	cursor: pointer;
	line-height: 0;
	-webkit-appearance: none;
	appearance: none;
}

/* Полупрозрачный серый: картинка под полосой остаётся видна.
   Не :focus, а :focus-visible — после клика мышью кнопка остаётся в фокусе,
   и подсветка залипала бы на кадре, пока не кликнешь мимо. */
.wsn-gmain__arrow:hover,
.wsn-gmain__arrow:focus-visible { background: rgba(34, 41, 55, .14); }

/* углы полосы повторяют скругление картинки, иначе вылезают за её края */
.wsn-gmain__arrow--prev { left: 0; }
.wsn-gmain__arrow--next { right: 0; }

/* Крутилка: показываем, пока грузится следующий кадр. Иконка та же, что на
   страницах админки, — fa-spinner из Font Awesome с анимацией fa-pulse. */
.wsn-gmain__spin {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.wsn-gmain__stage.is-load .wsn-gmain__spin { display: flex; }

/* размер и цвет как у заставки в админке, вращение делает сам fa-pulse */
.wsn-gmain__spin i { font-size: 46px; color: #222937; }

/* Пока кадр не готов, картинку не показываем вовсе: при opacity было видно,
   как снимок дорисовывается сверху вниз. Вместо этого — только крутилка. */
.wsn-gmain__stage.is-load .wsn-gmain__img { opacity: 0; }

/* Кружка под стрелкой нет: сама «птичка» синяя и вдвое крупнее прежней */
.wsn-gmain__arrow-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: #3d93ff;
}

.wsn-gmain__arrow:hover .wsn-gmain__arrow-ico,
.wsn-gmain__arrow:focus-visible .wsn-gmain__arrow-ico { color: #1084d1; }

.wsn-gmain__arrow svg { width: 14px; height: 26px; display: block; }
.wsn-gmain__arrow[hidden] { display: none; }

/* Ряд миниатюр: стрелки по краям, между ними — прокручиваемая полоса */
.wsn-gmain__thumbsrow {
	display: flex;
	align-items: stretch;
	gap: 6px;
	margin-top: 14px;
	transition: opacity .2s ease-in-out;
}

/* Полоса видна сразу: на месте каждого кадра стоит пустая плитка-заглушка.
   Ждать всю пачку не нужно — плитка снимает заглушку сама, как только её
   собственный снимок загрузился. */
.wsn-gmain__thumb { background: #eef1f6; }
.wsn-gmain__thumb img { opacity: 0; transition: opacity .2s ease-in-out; }

/* Кадр готов — плитка перестаёт держать пропорцию заглушки и подстраивается
   под сам снимок: вертикальный сузит её, широкий упрётся в ту же пропорцию. */
.wsn-gmain__thumb.is-ready {
	background: transparent;
	aspect-ratio: auto;
	width: auto;
	max-width: calc(71px * 1680 / 1119);
}

.wsn-gmain__thumb.is-ready img {
	opacity: 1;
	width: auto;
	height: 100%;
	max-width: 100%;
}

/* Кликается вся полоса во всю высоту ряда, а не кружок — так же, как у стрелок
   большого кадра. Сама зона прозрачная, под курсором темнеет. */
.wsn-gmain__tnav {
	flex: 0 0 auto;
	width: 33px;   /* было 44px, уже на четверть */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 0;
	background: #eef1f6;
	color: #222937;
	cursor: pointer;
	line-height: 0;
	-webkit-appearance: none;
	appearance: none;
}

.wsn-gmain__tnav:hover,
.wsn-gmain__tnav:focus-visible { background: #dee3ec; }

/* кружка вокруг стрелки нет — сама кнопка и есть полоса */
.wsn-gmain__tnav-ico { display: flex; align-items: center; justify-content: center; }

/* место под стрелку держим всегда, иначе полоса дёргается вбок */
.wsn-gmain__tnav[hidden] { display: flex; visibility: hidden; pointer-events: none; }
.wsn-gmain__tnav svg { width: 6px; height: 11px; display: block; }

/* Миниатюры под кадром — одна строка с горизонтальной прокруткой.
   Не помещающиеся кадры не переносятся, а уезжают вбок; активный кадр
   подводит к центру скрипт. Нативную полосу прокрутки прячем — она тут
   мешает, листается колесом, тачем и стрелками галереи. */
.wsn-gmain__thumbs {
	display: flex;
	flex-wrap: nowrap;
	/* safe center: пока кадры помещаются — по центру, когда нет — от левого
	   края, иначе первые миниатюры обрезались бы и до них не долистать */
	justify-content: center;
	justify-content: safe center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scroll-behavior: smooth;
	cursor: grab;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.wsn-gmain__thumbs::-webkit-scrollbar { height: 0; }

.wsn-gmain__thumb {
	flex: 0 0 auto;
	/* Плитка всегда одной пропорции — 1680x1119, как у обычного снимка. Размер
	   не зависит от того, загрузился кадр или нет, поэтому полоса не перестраивается. */
	height: 71px;
	aspect-ratio: 1680 / 1119;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	overflow: hidden;
}

.wsn-gmain__thumb img {
	/* картинка вписывается в плитку целиком, пустые поля остаются по краям */
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.wsn-gmain__thumb.is-active { border-color: #3d93ff; }

/* ------------------------------------------------------------------- текст */

.wsn-gmain__info { min-width: 0; }

.wsn-gmain__title {
	margin: 0;
	/* размеры как были на витрине: 24px, на узком экране 18px */
	font-size: 24px;
	font-weight: 500;
	line-height: 1.3;
	color: #000;
}

.wsn-gmain__sku {
	margin-top: 8px;
	font-size: 12px;   /* t-descr_xxs */
	color: #666;
}

.wsn-gmain__prices {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.wsn-gmain__price {
	font-size: 16px;   /* t-name_md */
	font-weight: 600;
	color: #000;
	white-space: nowrap;
}

.wsn-gmain__price-old {
	font-size: 16px;   /* t-name_md */
	color: #999;
	text-decoration: line-through;
	white-space: nowrap;
}

/* товара нет в наличии: цена красная, под ней подпись */
.wsn-gmain.is-out .wsn-gmain__price { color: #b81010; font-weight: 700; }

.wsn-gmain__soldout {
	margin-top: 3px;
	font-size: 14px;   /* как было у витрины */
	color: #f95d51;
}

/* кнопка: синяя при наличии, красная обводка — когда нет */
.wsn-gmain__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;   /* между значком корзины и подписью */
	margin-top: 22px;
	padding: 0 30px;
	min-height: 44px;
	border: 2px solid transparent;
	border-radius: 30px;
	background: #3d93ff;
	color: #fff;
	font-size: 15px;   /* t-btnflex_smd */
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.wsn-gmain__btn:hover,
.wsn-gmain__btn:focus { background: #1084d1; color: #fff; }

.wsn-gmain.is-out .wsn-gmain__btn {
	background: #fff;
	border-color: #b81010;
	border-radius: 40px;
	color: #b81010;
	font-weight: 600;
}

.wsn-gmain.is-out .wsn-gmain__btn:hover,
.wsn-gmain.is-out .wsn-gmain__btn:focus { background: #b81010; color: #fff; }

.wsn-gmain__descr {
	margin-top: 22px;
	/* размер как в блоке «Характеристики» (.wsn-spec) — 14px */
	font-size: 14px;
	line-height: 1.55;
	color: #333;
}

.wsn-gmain__descr p { margin: 0 0 10px; }
.wsn-gmain__descr ul { margin: 0 0 10px; padding-left: 20px; }
.wsn-gmain__descr li { list-style: disc; margin-bottom: 6px; }

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

/* тянем мышью — на десктопе это привычнее, чем крутить колесо над полосой */
.wsn-gmain__thumbs.is-drag { cursor: grabbing; scroll-behavior: auto; }
.wsn-gmain__thumbs.is-drag .wsn-gmain__thumb { pointer-events: none; }

/* Браузер по умолчанию таскает саму картинку полупрозрачным призраком и выделяет
   содержимое — при протяжке полосы это мешает, поэтому отключаем и то, и другое. */
.wsn-gmain__thumbs { user-select: none; -webkit-user-select: none; }
.wsn-gmain__thumbs img {
	-webkit-user-drag: none;
	user-select: none;
	pointer-events: none;   /* клик всё равно ловит кнопка-обёртка */
}

@media (max-width: 900px) {
	.wsn-gmain { grid-template-columns: 1fr; }
	.wsn-gmain__title { font-size: 18px; }
	.wsn-gmain__thumb { height: 63px; }
	.wsn-gmain__thumb.is-ready { max-width: calc(63px * 1680 / 1119); }
}

/* Значок корзины в кнопках страницы товара — тот же файл, что в шапке. Размер
   задаём здесь: в разметке он вставляется без width и height. */
.wsn-btn-ico { display: block; flex: 0 0 auto; width: 22px; height: 19px; }

/* ---------- просмотр фотографии на весь экран ---------- */

/* Открывается кликом по большому кадру галереи (assets/js/good-main.js).
   Повторяет то, что на витрине делал скрипт Tilda: тёмный фон, фотография
   вписана в экран, крестик и стрелки поверх. */
.wsn-zoom {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .97);
}

.wsn-zoom.is-open { display: flex; }

body.wsn-zoom-lock { overflow: hidden; }

.wsn-zoom__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* Обычный вид: фотография целиком в экране. */
.wsn-zoom__img {
	max-width: 92vw;
	max-height: 92vh;
	object-fit: contain;
	cursor: zoom-in;
	user-select: none;
}

/* Натуральная величина: снимок крупнее экрана, его возят мышью. */
.wsn-zoom.is-full .wsn-zoom__img {
	max-width: none;
	max-height: none;
	cursor: grab;
}

.wsn-zoom.is-full .wsn-zoom__img:active { cursor: grabbing; }

.wsn-zoom__close,
.wsn-zoom__nav {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background: rgba(0, 0, 0, .06);
	border: 0;
	border-radius: 50%;
	color: #232323;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s;
}

.wsn-zoom__close:hover,
.wsn-zoom__nav:hover { background: rgba(0, 0, 0, .12); }

.wsn-zoom__close { top: 20px; right: 20px; font-size: 28px; }
.wsn-zoom__nav--prev { left: 20px; top: 50%; margin-top: -23px; }
.wsn-zoom__nav--next { right: 20px; top: 50%; margin-top: -23px; }

/* Один снимок — листать нечего. */
.wsn-zoom_single .wsn-zoom__nav { display: none; }

.wsn-zoom__count {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	text-align: center;
	color: #8c8c8c;
	font-size: 14px;
}

/* Курсор-лупа на самом кадре галереи: подсказывает, что снимок открывается. */
.wsn-gmain__img { cursor: zoom-in; }