/**
 * Feeling Yachty — product gallery thumbnails as a swipeable strip.
 *
 * WooCommerce renders its thumbnails as <ol class="flex-control-thumbs">, and
 * the theme lays that out as a multi-row grid — so a yacht with 20+ photos
 * dumps every one of them onto the page at once, pushing the booking form far
 * below the fold on a phone.
 *
 * This turns that same <ol> into a single horizontal scroll-snap strip.
 *
 * PERFORMANCE NOTE, since this is the whole point: every effect here is
 * either native browser scrolling or a compositor-only property (transform /
 * opacity / box-shadow). There is no JavaScript animation loop, no layout
 * thrash, and no library. Native overflow scrolling gives momentum and swipe
 * for free on touch devices, which is both smoother and cheaper than anything
 * scripted. The images themselves are unchanged — lazy loading still does the
 * actual work of keeping bytes down.
 */

.fy-gs {
	--gs-accent: #d600d6;
	--gs-accent-2: #7c3aed;
	position: relative;
}

/* The strip itself: one row, snapping, native momentum. */
.fy-gs .flex-control-thumbs {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 10px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	margin: 12px 0 0;
	padding: 4px 2px 8px;
	list-style: none;
}

.fy-gs .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}

.fy-gs .flex-control-thumbs li {
	flex: 0 0 auto;
	width: 88px;
	margin: 0;
	scroll-snap-align: start;
	list-style: none;
}

@media (min-width: 900px) {
	.fy-gs .flex-control-thumbs li { width: 104px; }
}

.fy-gs .flex-control-thumbs img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 12px;
	cursor: pointer;
	opacity: 1;
	border: 2px solid transparent;
	/* Only transform/opacity/shadow animate — all compositor-only, so this
	   stays smooth even mid-scroll on a mid-range phone. */
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
	will-change: transform;
}

.fy-gs .flex-control-thumbs img:hover {
	transform: translateY(-2px) scale(1.03);
	box-shadow: 0 8px 18px rgba(23, 32, 51, .18);
}

/* FlexSlider marks the current thumbnail with .flex-active. */
.fy-gs .flex-control-thumbs img.flex-active {
	border-color: var(--gs-accent);
	box-shadow: 0 0 0 2px rgba(214, 0, 214, .28), 0 8px 20px rgba(214, 0, 214, .22);
	transform: translateY(-1px);
}

/* Un-chosen thumbs sit back very slightly so the active one reads first. */
.fy-gs .flex-control-thumbs img:not(.flex-active) {
	opacity: .78;
}

.fy-gs .flex-control-thumbs img:not(.flex-active):hover {
	opacity: 1;
}

/* ---------- arrows ---------- */
.fy-gs-arrow {
	position: absolute;
	bottom: 34px;
	z-index: 3;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--gs-accent), var(--gs-accent-2));
	color: #fff;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(214, 0, 214, .3);
	transition: opacity .2s ease, transform .15s ease;
}

.fy-gs-arrow:hover { transform: translateY(-1px); }
.fy-gs-arrow--prev { left: 2px; }
.fy-gs-arrow--next { right: 2px; }

.fy-gs-arrow[hidden],
.fy-gs-arrow.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.fy-gs-arrow:focus-visible,
.fy-gs .flex-control-thumbs img:focus-visible {
	outline: 3px solid var(--gs-accent-2);
	outline-offset: 2px;
}

/* Photo counter over the main image. */
.fy-gs-count {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(23, 32, 51, .72);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .02em;
	pointer-events: none;
	backdrop-filter: blur(4px);
}

@media (prefers-reduced-motion: reduce) {
	.fy-gs .flex-control-thumbs img,
	.fy-gs-arrow {
		transition: none;
	}
	.fy-gs .flex-control-thumbs img:hover,
	.fy-gs .flex-control-thumbs img.flex-active {
		transform: none;
	}
	.fy-gs .flex-control-thumbs {
		scroll-behavior: auto;
	}
}