/* ================================================
   RED POINT — PRODUCT GALLERY  (Figma 109:1378)
   ================================================
   row   flex · 16 gap · items-start
   main  652x600 · 16px radius · chevrons inside (RIGHT under RTL)
   rail  107 · five 107x107 thumbs · 16px radius · 60% opacity (active 100%)
   ================================================ */

.rp-gallery {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}

/* ------------------------------------------------
   MAIN  (109:1385) — first in DOM so RTL paints it RIGHT
   ------------------------------------------------ */
.rp-gallery__main {
	position: relative;
	flex: 1;
	min-width: 0;
	height: 600px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px;
	overflow: hidden;
	border-radius: 16px;
	box-sizing: border-box;
}

/* Ancestor in the selector (0,2,0) so it beats `.elementor img{height:auto}`. */
.rp-gallery .rp-gallery__main-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 16px;
	z-index: 0;
}

/* Prev/next chevrons, over the photo. */
.rp-gallery .rp-gallery__nav {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background-color: rgba(0, 0, 0, 0.3);
	color: #FFFFFF;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.rp-gallery .rp-gallery__nav:hover {
	background-color: rgba(0, 0, 0, 0.6);
}

.rp-gallery__nav svg {
	width: 20px;
	height: 20px;
}

/* ------------------------------------------------
   RAIL  (109:1379) — 107 wide, 107x107 thumbs
   ------------------------------------------------ */
.rp-gallery__rail {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 107px;
	flex-shrink: 0;
}

.rp-gallery .rp-gallery__thumb {
	width: 107px;
	height: 107px;
	padding: 0;
	border: 0;
	border-radius: 16px;
	overflow: hidden;
	background: none;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.15s ease;
}

.rp-gallery .rp-gallery__thumb:hover {
	opacity: 0.9;
}

.rp-gallery .rp-gallery__thumb.is-active {
	opacity: 1;
}

.rp-gallery .rp-gallery__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 16px;
}

/* ------------------------------------------------
   RESPONSIVE — no mobile frame in the Figma.
   ------------------------------------------------ */
/* ------------------------------------------------
   TABLET / PHONE — the photo stacks above its thumbnails
   ------------------------------------------------
   The desktop layout is a ROW: main first in the DOM so RTL paints it on the right, rail to
   its left. Stacking it needs two corrections, and both were wrong.

   1. `column`, NOT `column-reverse`. Reversing a column re-orders the DOM, and the main image
      is the first child — so the THUMBNAILS ended up above the photo, which is what the client
      photographed. The photo is the subject; it goes first.

   2. `flex: none` on the main. This is the one that actually broke it. The row layout gives
      the main `flex: 1`, i.e. `flex-basis: 0%`, and flex-basis applies to the MAIN AXIS — which
      is horizontal in a row but VERTICAL in a column. So in the stacked layout that 0% beat
      `height: 420px` and the photo collapsed to whatever the container happened to give it:
      measured at 80px, a letterbox strip with the chevrons floating in it.

      `height` alone could never win that argument. The flex shorthand has to be cleared. */
@media (max-width: 1024px) {
	.rp-gallery {
		flex-direction: column;
	}

	/* THE RAIL BECOMES A CAROUSEL — the client asked for four thumbnails at a time, sliding.
	   `scroll-snap-type` and `scroll-behavior` are what make it feel like a carousel rather than
	   a scrollbox; the chevrons drive it from redpoint-gallery.js, and a swipe works too.
	   The scrollbar is hidden because the thumbnails themselves show there is more to see. */
	.rp-gallery__rail {
		flex-direction: row;
		width: 100%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.rp-gallery__rail::-webkit-scrollbar {
		display: none;
	}

	/* FOUR ACROSS, AND SQUARE.
	   The thumbnails were 107x107 with no `flex-shrink: 0`, so in a row they kept their HEIGHT
	   and were squeezed on width — five of them crushed into narrow vertical slivers, which is
	   what the client photographed. A flex item shrinks by default; a fixed width is only a
	   starting point.

	   `flex: 0 0 <basis>` fixes the width and forbids shrinking. The basis is a quarter of the
	   rail minus the three 16px gaps that sit between four items. `aspect-ratio` then keeps them
	   square at whatever width that works out to, instead of the fixed 107px height that caused
	   the distortion in the first place. */
	.rp-gallery .rp-gallery__thumb {
		flex: 0 0 calc((100% - 48px) / 4);
		width: auto;
		height: auto;
		aspect-ratio: 1 / 1;
		scroll-snap-align: start;
	}

	.rp-gallery .rp-gallery__main {
		flex: none;
		width: 100%;
		height: 420px;
	}
}

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

/* A phone is narrower than the 420px frame is tall, and a near-square photo reads better than
   a tall one on a small screen. */
@media (max-width: 560px) {
	.rp-gallery .rp-gallery__main {
		height: 360px;
	}
}

/* ------------------------------------------------
   LIGHTBOX — click the main photo (client request, Oct 2026)
   ------------------------------------------------ */
.rp-lightbox {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: 100vw;
	max-height: 100vh;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
.rp-lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}
.rp-lightbox::backdrop {
	background: rgba(0, 0, 0, 0.88);
}
.rp-lightbox__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: min(92vw, 1100px);
}
.rp-lightbox .rp-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 140px);
	width: auto;
	height: auto;
	border-radius: 12px;
}
.rp-lightbox__caption {
	color: #fff;
	font-size: 18px;
	line-height: 1.4;
	text-align: center;
}
.rp-lightbox__close {
	position: fixed;
	top: 16px;
	left: 16px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}
.rp-lightbox__close:focus-visible,
.rp-gallery__main-img:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* lightbox arrows: only when the product has more than one photo */
.rp-lightbox__nav {
	display: none;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}
.rp-lightbox.has-nav .rp-lightbox__nav { display: block; }
.rp-lightbox__nav--prev { right: 16px; }
.rp-lightbox__nav--next { left: 16px; }
.rp-lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }