/*
 * NeoGrow product gallery.
 *
 * The carousel is a CSS scroll-snap track: the browser supplies the swipe,
 * the momentum and the correct touch-action, so a horizontal drag never
 * blocks vertical page scrolling.
 */

.ngpp-gallery {
	--ngpp-g-line: var(--ng-line, #e3eaec);
	--ngpp-g-accent: var(--ng-primary-dark, #259da2);
	--ngpp-g-radius: 14px;

	display: grid;
	gap: 12px;
	min-width: 0;
}

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

/* -------------------------------------------------------------------------
 * Stage
 * ---------------------------------------------------------------------- */

.ngpp-gallery__stage {
	position: relative;
	border: 1px solid var(--ngpp-g-line);
	border-radius: var(--ngpp-g-radius);
	background: #fff;
	overflow: hidden;
}

.ngpp-gallery__viewport {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* Horizontal panning is ours; vertical panning stays with the page. */
	touch-action: pan-x pan-y pinch-zoom;
}

.ngpp-gallery__viewport::-webkit-scrollbar {
	display: none;
}

.ngpp-gallery__viewport:focus-visible {
	outline: 2px solid var(--ngpp-g-accent);
	outline-offset: -2px;
}

.ngpp-gallery__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ngpp-gallery__slide {
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
	padding: 16px;
	list-style: none;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	display: grid;
	place-items: center;
	cursor: zoom-in;
}

/*
 * One fixed stage height for every slide, so switching between a portrait
 * phone render and a landscape accessory shot never resizes the column.
 */
.ngpp-gallery__image {
	display: block;
	width: 100%;
	height: clamp(420px, 46vw, 620px);
	max-width: 100%;
	object-fit: contain;
	background: #fff;
}

.ngpp-gallery.is-single .ngpp-gallery__slide {
	cursor: zoom-in;
}

/* Sale flash sits over the stage. */
.ngpp-gallery__stage .onsale {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-start: 14px;
	z-index: 4;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 6px 11px;
	border-radius: 8px;
	background: var(--ng-sale, #d63f44);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
}

/* -------------------------------------------------------------------------
 * Controls
 * ---------------------------------------------------------------------- */

.ngpp-gallery__nav {
	position: absolute;
	inset-block-start: 50%;
	z-index: 3;
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	transform: translateY(-50%);
	border: 1px solid var(--ngpp-g-line);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: var(--ng-dark, #101718);
	cursor: pointer;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.ngpp-gallery__nav.is-prev {
	inset-inline-start: 12px;
}

.ngpp-gallery__nav.is-next {
	inset-inline-end: 12px;
}

/* Arrows point the way the reader reads. */
[dir="rtl"] .ngpp-gallery__nav svg {
	transform: scaleX(-1);
}

.ngpp-gallery__nav:hover:not([disabled]) {
	background: #fff;
	border-color: var(--ngpp-g-accent);
}

.ngpp-gallery__nav[disabled] {
	opacity: 0.35;
	cursor: default;
}

.ngpp-gallery__zoom {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	z-index: 4;
	display: grid;
	width: 36px;
	height: 36px;
	place-items: center;
	border: 1px solid var(--ngpp-g-line);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: var(--ng-dark, #101718);
	cursor: pointer;
}

.ngpp-gallery__counter {
	position: absolute;
	inset-block-end: 12px;
	inset-inline-end: 12px;
	z-index: 3;
	margin: 0;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(16, 23, 24, 0.72);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
}

.ngpp-gallery__dots {
	display: none;
	justify-content: center;
	gap: 6px;
}

.ngpp-gallery__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #cdd8da;
	transition: background-color 0.15s ease, width 0.15s ease;
}

.ngpp-gallery__dot.is-active {
	width: 20px;
	border-radius: 999px;
	background: var(--ngpp-g-accent);
}

/* -------------------------------------------------------------------------
 * Thumbnails
 * ---------------------------------------------------------------------- */

.ngpp-gallery__thumbs {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: thin;
	scroll-behavior: smooth;
}

.ngpp-gallery__thumbs::-webkit-scrollbar {
	height: 4px;
}

.ngpp-gallery__thumbs::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background: #d3dee0;
}

.ngpp-gallery__thumb {
	flex: 0 0 auto;
	margin: 0;
	list-style: none;
}

.ngpp-gallery__thumb button {
	display: block;
	width: 74px;
	height: 74px;
	padding: 5px;
	border: 1px solid var(--ngpp-g-line);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	opacity: 0.72;
	transition: border-color 0.15s ease, opacity 0.15s ease;
}

.ngpp-gallery__thumb button:hover {
	opacity: 1;
}

.ngpp-gallery__thumb button[aria-current="true"] {
	border-color: var(--ngpp-g-accent);
	box-shadow: inset 0 0 0 1px var(--ngpp-g-accent);
	opacity: 1;
}

.ngpp-gallery__thumb button:focus-visible {
	outline: 2px solid var(--ngpp-g-accent);
	outline-offset: 2px;
}

.ngpp-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* -------------------------------------------------------------------------
 * Desktop: vertical thumbnail rail beside the stage
 * ---------------------------------------------------------------------- */

@media (min-width: 1200px) {
	.ngpp-gallery {
		grid-template-columns: 82px minmax(0, 1fr);
		grid-template-areas: "thumbs stage";
		align-items: start;
		gap: 10px;
	}

	.ngpp-gallery__stage {
		grid-area: stage;
	}

	.ngpp-gallery__thumbs {
		grid-area: thumbs;
		flex-direction: column;
		max-height: clamp(420px, 46vw, 620px);
		overflow-x: hidden;
		overflow-y: auto;
	}

	.ngpp-gallery__thumb button {
		width: 74px;
		height: 74px;
	}
}

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

body.ngpp-lightbox-open {
	overflow: hidden;
}

.ngpp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	background: rgba(10, 15, 16, 0.94);
}

.ngpp-lightbox[hidden] {
	display: none;
}

.ngpp-lightbox__stage {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100dvh;
	padding: 56px 8px;
	overflow: hidden;
	touch-action: none;
}

.ngpp-lightbox__stage img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transform-origin: center center;
	will-change: transform;
}

.ngpp-lightbox__stage img.is-zoomed {
	cursor: grab;
}

.ngpp-lightbox__close {
	position: absolute;
	inset-block-start: calc(12px + env(safe-area-inset-top));
	inset-inline-end: calc(12px + env(safe-area-inset-right));
	z-index: 2;
	display: grid;
	width: 44px;
	height: 44px;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	cursor: pointer;
}

.ngpp-lightbox__nav {
	display: grid;
	width: 52px;
	height: 52px;
	place-items: center;
	margin-inline: 10px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	cursor: pointer;
}

[dir="rtl"] .ngpp-lightbox__nav svg {
	transform: scaleX(-1);
}

.ngpp-lightbox__nav[disabled] {
	opacity: 0.3;
	cursor: default;
}

.ngpp-lightbox.is-single .ngpp-lightbox__nav {
	display: none;
}

.ngpp-lightbox__counter {
	position: absolute;
	inset-block-end: calc(18px + env(safe-area-inset-bottom));
	inset-inline: 0;
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
	text-align: center;
}

.ngpp-lightbox button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.ngpp-lightbox {
		grid-template-columns: minmax(0, 1fr);
	}

	.ngpp-lightbox__nav {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ngpp-gallery__viewport,
	.ngpp-gallery__thumbs {
		scroll-behavior: auto;
	}

	.ngpp-gallery__dot,
	.ngpp-gallery__nav,
	.ngpp-lightbox__stage img {
		transition: none !important;
	}
}

/* -------------------------------------------------------------------------
 * Gallery modes
 *
 * One engine, one script, one set of markup. A mode only changes how the
 * stage and thumbnails are arranged, which is purely a CSS concern.
 * ---------------------------------------------------------------------- */

/* Horizontal thumbnails: strip stays under the stage at every width. */
@media (min-width: 1200px) {
	.ngpp-gallery--horizontal-thumbs {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "stage" "thumbs";
	}

	.ngpp-gallery--horizontal-thumbs .ngpp-gallery__thumbs {
		flex-direction: row;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
	}
}

/* Two-column grid: stage plus a static pair of secondary images. */
@media (min-width: 1200px) {
	.ngpp-gallery--two-column-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas: "stage stage" "thumbs thumbs";
	}

	.ngpp-gallery--two-column-grid .ngpp-gallery__thumbs {
		flex-direction: row;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.ngpp-gallery--two-column-grid .ngpp-gallery__thumb button {
		width: 100%;
		height: 120px;
	}

	.ngpp-gallery--two-column-grid .ngpp-gallery__thumb {
		flex: 1 1 calc(50% - 4px);
	}
}

/* Mixed grid: tall hero with a secondary column, used by Visual Story. */
@media (min-width: 1200px) {
	.ngpp-gallery--mixed-grid {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		grid-template-areas: "stage thumbs";
		gap: 12px;
	}

	.ngpp-gallery--mixed-grid .ngpp-gallery__image {
		height: clamp(460px, 52vw, 700px);
	}

	.ngpp-gallery--mixed-grid .ngpp-gallery__thumbs {
		flex-direction: column;
		max-height: clamp(460px, 52vw, 700px);
		gap: 12px;
	}

	.ngpp-gallery--mixed-grid .ngpp-gallery__thumb {
		flex: 1 1 auto;
	}

	.ngpp-gallery--mixed-grid .ngpp-gallery__thumb button {
		width: 100%;
		height: 100%;
		min-height: 120px;
		border-radius: 14px;
	}
}

/* Full width: no rail, edge-to-edge stage, dots instead of thumbnails. */
.ngpp-gallery--full-width {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1200px) {
	.ngpp-gallery--full-width {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "stage" "thumbs";
	}

	.ngpp-gallery--full-width .ngpp-gallery__thumbs {
		flex-direction: row;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
	}
}

.ngpp-gallery--full-width .ngpp-gallery__dots {
	display: flex;
}

/* Media and customer content: square stage, denser rail. */
@media (min-width: 1200px) {
	.ngpp-gallery--media-social {
		grid-template-columns: 68px minmax(0, 1fr);
	}

	.ngpp-gallery--media-social .ngpp-gallery__thumb button {
		width: 60px;
		height: 60px;
	}
}

.ngpp-gallery--media-social .ngpp-gallery__image {
	height: clamp(400px, 44vw, 580px);
}