/* Product Gallery Grid - frontend (v2) */

.pgg-gallery {
	--pgg-cols: 2;
	--pgg-cols-t: 2;
	--pgg-cols-m: 1;
	--pgg-spv: var(--pgg-cols);
	--pgg-gap: 6px;
	--pgg-radius: 0px;
	--pgg-width: 100%;
	--pgg-ratio: 1 / 1;
	--pgg-fit: cover;
	--pgg-bg: #f4f4f4;
	--pgg-label-bg: #000;
	--pgg-label-color: #fff;
	width: var(--pgg-width);
	max-width: 100%;
	box-sizing: border-box;
}

.pgg-gallery *,
.pgg-gallery *::before,
.pgg-gallery *::after {
	box-sizing: border-box;
}

@media (max-width: 1024px) {
	.pgg-gallery { --pgg-spv: var(--pgg-cols-t); }
}

@media (max-width: 640px) {
	.pgg-gallery { --pgg-spv: var(--pgg-cols-m); }
}

.pgg-stage {
	position: relative;
}

/* ---------- Grid layout (default) ---------- */

.pgg-grid {
	display: grid;
	grid-template-columns: repeat(var(--pgg-cols), minmax(0, 1fr));
	gap: var(--pgg-gap);
}

.pgg-count-1 .pgg-grid {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1024px) {
	.pgg-grid { grid-template-columns: repeat(var(--pgg-cols-t), minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.pgg-grid { grid-template-columns: repeat(var(--pgg-cols-m), minmax(0, 1fr)); }
}

/* ---------- Tiles ---------- */

.pgg-item {
	position: relative;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--pgg-bg);
	border-radius: var(--pgg-radius);
	aspect-ratio: var(--pgg-ratio);
}

.pgg-item .pgg-link {
	display: block;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

.pgg-item img.pgg-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	margin: 0;
	object-fit: var(--pgg-fit);
}

/* "Original image shape" mode */
.pgg-ratio-auto .pgg-item--image { aspect-ratio: auto; }
.pgg-ratio-auto .pgg-item--image img.pgg-img { height: auto; object-fit: contain; }
.pgg-ratio-auto .pgg-item--video { aspect-ratio: 1 / 1; }

/* ---------- Video tile ---------- */

.pgg-item--video .pgg-video-el {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}

.pgg-item--video .pgg-embed {
	position: absolute;
	inset: 0;
	background: #000;
}

.pgg-item--video .pgg-embed iframe,
.pgg-item--video .pgg-embed video,
.pgg-item--video .pgg-embed > div {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}

/* Mute / unmute button */
.pgg-sound {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.pgg-sound:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.pgg-sound .pgg-ico-on { display: none; }
.pgg-sound.is-on .pgg-ico-on { display: block; }
.pgg-sound.is-on .pgg-ico-off { display: none; }

/* ---------- Labels ---------- */

.pgg-label {
	position: absolute;
	z-index: 2;
	padding: 4px 10px;
	background: var(--pgg-label-bg);
	color: var(--pgg-label-color);
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.01em;
	pointer-events: none;
}

.pgg-label--top-right { top: 0; right: 0; }
.pgg-label--top-left { top: 0; left: 0; }
.pgg-label--bottom-right { bottom: 0; right: 0; }
.pgg-label--bottom-left { bottom: 0; left: 0; }

/* ---------- Slider layout ---------- */

.pgg-nav,
.pgg-dots {
	display: none;
}

.pgg-nav button {
	position: absolute;
	top: 50%;
	z-index: 4;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	padding: 0 0 4px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #000;
	font-size: 28px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.pgg-nav button:disabled { opacity: 0.35; cursor: default; }
.pgg-nav button:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.pgg-prev { left: 10px; }
.pgg-next { right: 10px; }

.pgg-dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #c9c9c9;
	cursor: pointer;
}

.pgg-dots button.is-active { background: #000; }
.pgg-dots button:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

@media (min-width: 641px) {
	.pgg-d-slider .pgg-grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.pgg-d-slider .pgg-grid::-webkit-scrollbar { display: none; }
	.pgg-d-slider .pgg-item {
		flex: 0 0 calc((100% - (var(--pgg-spv) - 1) * var(--pgg-gap)) / var(--pgg-spv));
		scroll-snap-align: start;
	}
	.pgg-d-slider.pgg-count-1 .pgg-item { flex-basis: 100%; }
	.pgg-d-slider .pgg-nav { display: block; }
	.pgg-d-slider .pgg-dots { display: flex; }
}

@media (max-width: 640px) {
	.pgg-m-slider .pgg-grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.pgg-m-slider .pgg-grid::-webkit-scrollbar { display: none; }
	.pgg-m-slider .pgg-item {
		flex: 0 0 calc((100% - (var(--pgg-spv) - 1) * var(--pgg-gap)) / var(--pgg-spv));
		scroll-snap-align: start;
	}
	.pgg-m-slider.pgg-count-1 .pgg-item { flex-basis: 100%; }
	.pgg-m-slider .pgg-nav { display: block; }
	.pgg-m-slider .pgg-dots { display: flex; }
}

.pgg-dots {
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

/* Hide arrows/dots when everything already fits */
.pgg-gallery.pgg-no-scroll .pgg-nav,
.pgg-gallery.pgg-no-scroll .pgg-dots {
	display: none !important;
}

/* ---------- Lightbox ---------- */

html.pgg-lb-open { overflow: hidden; }

.pgg-lb {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.92);
}

.pgg-lb[hidden] { display: none; }

.pgg-lb-img {
	max-width: 92vw;
	max-height: 90vh;
	object-fit: contain;
}

.pgg-lb button {
	position: absolute;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	line-height: 1;
}

.pgg-lb button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pgg-lb-close { top: 14px; right: 18px; font-size: 38px; }

.pgg-lb-prev,
.pgg-lb-next {
	top: 50%;
	transform: translateY(-50%);
	padding: 12px 16px !important;
	font-size: 54px;
}

.pgg-lb-prev { left: 6px; }
.pgg-lb-next { right: 6px; }

.pgg-lb-count {
	position: absolute;
	bottom: 14px;
	left: 0;
	right: 0;
	text-align: center;
	color: #fff;
	font-size: 13px;
}

@media (max-width: 640px) {
	.pgg-lb-prev,
	.pgg-lb-next { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.pgg-grid { scroll-behavior: auto; }
}