/* ==========================================================================
   KARTA PRODUKTU — galeria (Swiper). Ładowane warunkowo na is_product()
   przez `inc/woo/gallery.php`. Wartości = tokeny theme.json (var(--wp--preset--*) /
   var(--wp--custom--*)), zero hardkodów. Reużywa prymitywów (.pill) z components.css.
   Markup renderuje `humee_render_product_gallery()`; zachowanie: product-gallery.js.

   LIGHTBOX (.lightbox*) = `assets/css/lightbox.css` — wspólny dla galerii produktu
   i bloku „galeria" (ADR-0039). Tu zostaje wyłącznie galeria karty produktu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LAYOUT KARTY (grid galeria|zakup + sticky kolumny kupna) żyje w
   `assets/css/single.css` (koncern single-layout, ADR-0020) — jeden właściciel
   selektora `.single-product div.product`, żeby dwa arkusze nie walczyły o ten
   sam grid. Tu zostaje wyłącznie wnętrze galerii.
   --------------------------------------------------------------------------
   GALERIA — pasek miniatur | główny Swiper (na białym kaflu).
   -------------------------------------------------------------------------- */
.galeria {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--sm);
}

/* Główne zdjęcie = Swiper. Biały kafel, render „pływa" (contain + padding). */
.galeria__main {
	order: -1;                       /* mobile: duże zdjęcie nad miniaturami */
	inline-size: 100%;
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--white);
}

.galeria__slide {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 100%;
	padding: var(--wp--preset--spacing--md);
}

.galeria__open {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.galeria__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	object-position: center;
}

/* Podpowiedź „powiększ" w rogu dużego zdjęcia. */
.galeria__zoom-hint {
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--sm);
	inset-inline-end: var(--wp--preset--spacing--sm);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 14px 6px;
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--dark);
	background: color-mix(in srgb, var(--wp--preset--color--bg-alt) 85%, transparent);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	backdrop-filter: blur(4px);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.galeria__main:hover .galeria__zoom-hint,
.galeria__main:focus-within .galeria__zoom-hint { opacity: 0.75; }

/* Pasek miniatur — poziomy scroll mobile, pionowa kolumna desktop. */
.galeria__thumbs {
	display: flex;
	gap: var(--wp--preset--spacing--sm);
	overflow-x: auto;
	scrollbar-width: none;
}
.galeria__thumbs::-webkit-scrollbar { display: none; }

.galeria__thumb {
	flex: 0 0 22%;
	max-inline-size: 5.5rem;
	aspect-ratio: 1 / 1;
	padding: var(--wp--preset--spacing--xs);
	background: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--wp--custom--radius--none);
	cursor: pointer;
	transition: box-shadow 0.2s ease;
}
.galeria__thumb-image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	object-position: center;
}
.galeria__thumb.is-active { box-shadow: inset 0 0 0 2px var(--wp--preset--color--dark); }

.galeria__thumb:focus-visible,
.galeria__open:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* „więcej zdjęć" — strzałki (prev/next głównego zdjęcia). */
.galeria__more {
	display: flex;
	gap: var(--wp--preset--spacing--sm);
	justify-content: center;
}
.galeria__nav {
	font-size: var(--wp--preset--font-size--button-1);
	line-height: 1;
}

@media (min-width: 768px) {
	.galeria { grid-template-columns: minmax(4rem, 16%) 1fr; align-items: start; }
	.galeria__rail { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--sm); }
	.galeria__thumbs { flex-direction: column; overflow: visible; }
	.galeria__thumb { flex: none; max-inline-size: none; }
	.galeria__main { order: 0; aspect-ratio: 4 / 5; }

	/* Rail jest wąski (~16% szerokości galerii). Dwa pełne `.pill` (poziomy padding
	   20px) nie mieściły się obok siebie i wylewały poza rail — prawa strzałka
	   wjeżdżała pod główne zdjęcie. Każda strzałka bierze połowę railu i może się
	   skurczyć (padding poziomy z prymitywu zdjęty), więc zawsze się mieszczą. */
	.galeria__more { gap: var(--wp--preset--spacing--xs); }
	.galeria__nav { flex: 1 1 0; min-inline-size: 0; padding-inline: 0; }
}