/* ===========================================================================
   Переключалка картинок (.gv-slider) и фоновый слайдшоу (.gv-bg-slides).
   Появилась 10.08.2026: поля-галереи в «Содержимом сайта» позволяют класть в
   блок несколько картинок; одиночная картинка рисуется без этих классов, и
   вёрстка остаётся утверждённой.

   Слайды лежат стопкой в одной grid-ячейке — активный виден, остальные
   прозрачны. Высоту стопки задаёт самая высокая картинка, поэтому в местах с
   фиксированной высотой (.category-card, .wholesale-img) ничего не прыгает.
   =========================================================================== */

.gv-slider { position: relative; }
.gv-slider .gv-slides { display: grid; height: 100%; overflow: hidden; }
.gv-slider .gv-slides > img {
	grid-area: 1 / 1;
	width: 100%;
	opacity: 0;
	transition: opacity .4s;
	pointer-events: none;
}
.gv-slider .gv-slides > img.gv-on { opacity: 1; pointer-events: auto; }

/* Стрелки и точки — span[role=button]: слайдер бывает внутри карточки-ссылки,
   где настоящий <button> запрещён. z-index поднимает их над текстом карточек. */
.gv-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fffffff2;
	color: var(--ink, #183229);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	box-shadow: 0 4px 14px #1832292e;
	transition: background .15s, transform .15s;
}
.gv-nav:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.gv-prev { left: 10px; }
.gv-next { right: 10px; }
.gv-dots {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	gap: 7px;
}
.gv-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #18322947;
	cursor: pointer;
	transition: background .15s, transform .15s;
}
.gv-dot.gv-on { background: #183229d9; transform: scale(1.25); }

/* --------------------- hero, режим «одна общая картинка», несколько файлов */
/* Встаёт на место центрального фото композиции; одиночная картинка в этом
   режиме идёт классами .hero-product.hero-product-center из base.css. */
.hero-single {
	position: absolute;
	left: 50%;
	bottom: 48px;
	transform: translateX(-50%);
	z-index: 4;
	width: min(620px, 94%);
	height: 520px;
}
.hero-single .gv-slides > img {
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 32px 28px #204b363b);
}
@media (width <= 1100px) { .hero-single { height: 450px; } }
@media (width <= 760px)  { .hero-single { height: 350px; bottom: 26px; } }

/* -------------- hero, режим «одна общая картинка с фоном», во весь блок */
/* Фото накрывает градиент и орбиты целиком; штамп (z-index 8) остаётся
   поверх, подпись у фото поднимаем над картинкой адресно через :has. */
.hero-fullbg-img,
.gv-slider.hero-fullbg { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.hero-fullbg-img { object-fit: cover; }
.hero-fullbg .gv-slides { height: 100%; }
.hero-fullbg .gv-slides > img { height: 100%; object-fit: cover; }
.hero-visual:has(.hero-fullbg-img) .korea-note,
.hero-visual:has(.hero-fullbg) .korea-note { z-index: 3; }

/* ------------------------------------------------------- плитки категорий */
/* Слайдер занимает ту же grid-ячейку, что занимал одиночный <img>; правила
   .category-card img из base.css (object-fit, размеры) действуют на слайды. */
.category-card .gv-slider { overflow: hidden; }
.category-card .gv-slides { height: 100%; }
@media (width <= 1100px) {
	/* В одноколоночной карточке одиночный img уходит в absolute-угол — слайдер
	   повторяет то же: растягивается на карточку, слайды ложатся в угол сами
	   (правило .category-card img из base.css), активный держит опаковку .56. */
	.category-card .gv-slider { position: absolute; inset: 0; }
	.category-card .gv-slides { display: block; }
	.category-card .gv-slides > img.gv-on { opacity: .56; }
	.category-card .gv-nav { top: auto; bottom: 14px; transform: none; }
	.category-card .gv-nav:hover { transform: scale(1.08); }
	.category-card .gv-dots { left: auto; right: 14px; transform: none; }
}

/* ------------------------------------------------------------- «Оптовикам» */
/* Обёртка наследует место одиночной .wholesale-img во flex-строке; сами слайды
   несут класс .wholesale-img и берут размеры из extra.css. */
.gv-wholesale-slider { flex: 0 0 auto; width: 250px; }
@media (max-width: 900px) { .gv-wholesale-slider { width: 100%; } }

/* --------------------------------- фон «Корейского подхода», авто-слайдшоу */
.why-section.gv-bg { overflow: hidden; }
.why-section.gv-bg > .gv-bg-slides { position: absolute; inset: 0; z-index: 0; }
.gv-bg-slides img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s;
}
.gv-bg-slides img.gv-on { opacity: 1; }
/* Затемнение (extra.css) должно лежать НАД слайдами, но под содержимым. */
.why-section.gv-bg:has(.gv-bg-slides)::before { z-index: 1; }
.why-section.gv-bg:has(.gv-bg-slides) > * { z-index: 2; }
.why-section.gv-bg:has(.gv-bg-slides) > .gv-bg-slides { z-index: 0; }

/* Рестайл переключалок (11.08.2026): типографские ‹› смотрелись чужеродно.
   Глиф прячется font-size:0, шеврон рисуется бордерами в ::before — в отличие
   от шрифтового символа он геометрически центрируется в кнопке. Ховер — инверсия в --ink. */
.gv-nav { font-size: 0; width: 44px; height: 44px; background: #ffffffcc;
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border: 1px solid #18322921; box-shadow: 0 6px 24px #18322926; }
.hero-fullbg .gv-nav { width: 50px; height: 50px; }
.gv-nav::before { content: ''; width: 11px; height: 11px; border: 0 solid var(--ink, #183229); border-radius: 1px; transition: border-color .15s; }
.gv-prev::before { border-left-width: 2.5px; border-bottom-width: 2.5px; transform: rotate(45deg); margin-left: 5px; }
.gv-next::before { border-right-width: 2.5px; border-bottom-width: 2.5px; transform: rotate(-45deg); margin-right: 5px; }
.gv-nav:hover { background: var(--ink, #183229); }
.gv-nav:hover::before { border-color: #fff; }
.hero-fullbg .gv-prev { left: 20px; }
.hero-fullbg .gv-next { right: 20px; }
.gv-dot { transition: width .2s, background .15s; }
.gv-dot.gv-on { width: 22px; border-radius: 99px; transform: none; }