/**
 * SRD Shop Suite — Product Gallery layouts.
 *
 * Layouts (set on the wrapper by the [srd_gallery] shortcode):
 *   .srd-gallery--thumbs-left           vertical thumbnail rail, up/down scroll
 *   .srd-gallery--thumbs-bottom-scroll  horizontal thumbnail strip, left/right scroll
 *   .srd-gallery--no-thumbs-arrows      no thumbnails, prev/next arrows on the image
 *
 * .srd-mobile is toggled by JS (matchMedia against the configured breakpoint);
 * below it the left rail renders as a horizontal strip.
 *
 * !important is used on structural properties (float/width/margin of the
 * WooCommerce/theme thumbnail grid) so the layouts win against any theme,
 * including Divi's 4-per-row float grid.
 */

.srd-gallery {
	position: relative;
}

/* The gallery must never inherit the classic WooCommerce 48%-float split. */
.srd-gallery div.images.woocommerce-product-gallery,
.woocommerce div.product .srd-gallery div.images {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}

/* Pre-init FOUC guard: before FlexSlider wraps the figure in .flex-viewport,
   show only the first image instead of the full stacked list. */
.srd-gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child) {
	display: none;
}

/* Main image fills the gallery. WooCommerce core does this only inside
   `.woocommerce div.product`, so standalone contexts (Theme Builder section,
   shortcode on a page) would leave the image at natural width while the
   container — and the corner-pinned trigger/badge — spans the full section. */
.srd-gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Sale badge (sale-flash template output, sibling before the gallery).
   Top-left of the main image; the trigger owns the top-right corner. */
.srd-gallery > .onsale {
	position: absolute;
	top: 14px;
	inset-inline-start: 14px;
	z-index: 30;
}

/* Desktop left-rail layout: push the badge past the thumbnail rail
   (rail width + 14px flex gap) so it sits on the main image. */
.srd-gallery--thumbs-left:not(.srd-mobile) > .onsale {
	inset-inline-start: calc(var(--srd-thumb-size, 100px) + 14px + 14px);
}

/* Lightbox trigger (🔍) — top-right of the main image. WooCommerce puts a
   raw 🔍 emoji inside the link; hide it and draw our own SVG magnifier. */
.srd-gallery .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 12px;
	inset-inline-end: 12px;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	text-indent: -9999px;
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Image border (optional, module setting)                             */
/* ------------------------------------------------------------------ */

/* Post-init the main image lives in .flex-viewport; pre-init (and when
   FlexSlider is skipped, e.g. single-image galleries) the wrapper is still
   a direct child of the gallery — the same distinction the FOUC guard uses,
   so exactly one of the two ever gets the border. */
.srd-gallery--bordered .woocommerce-product-gallery .flex-viewport,
.srd-gallery--bordered .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	box-sizing: border-box;
	border: 1px solid var(--srd-border-color, #e2e2e2);
}

.srd-gallery--bordered ol.flex-control-thumbs li img {
	box-sizing: border-box;
	border: 1px solid var(--srd-border-color, #e2e2e2);
}

/* ------------------------------------------------------------------ */
/* Thumbnail strip: shared reset                                       */
/* ------------------------------------------------------------------ */

.srd-gallery ol.flex-control-thumbs {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	scroll-behavior: smooth;
	scrollbar-width: none;         /* Firefox */
	-ms-overflow-style: none;      /* old Edge/IE */
}

.srd-gallery ol.flex-control-thumbs::-webkit-scrollbar {
	display: none;
}

.srd-gallery ol.flex-control-thumbs li {
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer;
	line-height: 0;
}

.srd-gallery ol.flex-control-thumbs li img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

.srd-gallery ol.flex-control-thumbs li img:hover,
.srd-gallery ol.flex-control-thumbs li img.flex-active {
	opacity: 1;
}

/* Rail wrapper injected by JS around the ol (hosts the arrows). */
.srd-thumb-rail {
	position: relative;
	min-width: 0;
	min-height: 0;
}

/* ------------------------------------------------------------------ */
/* Layout: thumbnails left (desktop)                                   */
/* ------------------------------------------------------------------ */

.srd-gallery--thumbs-left:not(.srd-mobile) .woocommerce-product-gallery {
	display: flex !important;
	gap: 14px;
	align-items: flex-start;
}

.srd-gallery--thumbs-left:not(.srd-mobile) .woocommerce-product-gallery > .flex-viewport,
.srd-gallery--thumbs-left:not(.srd-mobile) .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	order: 2;
	flex: 1 1 auto;
	min-width: 0;
}

.srd-gallery--thumbs-left:not(.srd-mobile) .woocommerce-product-gallery > .srd-thumb-rail,
.srd-gallery--thumbs-left:not(.srd-mobile) .woocommerce-product-gallery > ol.flex-control-thumbs {
	order: 1;
	flex: 0 0 var(--srd-thumb-size, 100px);
	width: var(--srd-thumb-size, 100px);
}

.srd-gallery--thumbs-left:not(.srd-mobile) ol.flex-control-thumbs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow-y: auto;
	overflow-x: hidden;
	/* max-height is kept in sync with the main image height by JS */
}

.srd-gallery--thumbs-left:not(.srd-mobile) ol.flex-control-thumbs li {
	width: 100% !important;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------ */
/* Layout: thumbnails bottom, horizontal scroll                        */
/* (also the mobile fallback for thumbs-left)                          */
/* ------------------------------------------------------------------ */

.srd-gallery--thumbs-bottom-scroll ol.flex-control-thumbs,
.srd-gallery--thumbs-left.srd-mobile ol.flex-control-thumbs {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 10px;
	overflow-x: auto;
	overflow-y: hidden;
	margin-top: 12px !important;
	max-height: none;
}

.srd-gallery--thumbs-bottom-scroll ol.flex-control-thumbs li,
.srd-gallery--thumbs-left.srd-mobile ol.flex-control-thumbs li {
	flex: 0 0 var(--srd-thumb-size, 100px);
	width: var(--srd-thumb-size, 100px) !important;
}

.srd-gallery--thumbs-bottom-scroll .srd-thumb-rail,
.srd-gallery--thumbs-left.srd-mobile .srd-thumb-rail {
	width: 100%;
}

/* ------------------------------------------------------------------ */
/* Thumbnail rail arrows (injected by JS, shown only when overflowing) */
/* ------------------------------------------------------------------ */

.srd-thumb-arrow {
	position: absolute;
	z-index: 20;
	display: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	color: #333;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.srd-thumb-rail.srd-has-overflow .srd-thumb-arrow {
	display: flex;
}

.srd-thumb-arrow:hover {
	background: #fff;
}

.srd-thumb-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.srd-thumb-arrow svg {
	width: 16px;
	height: 16px;
	pointer-events: none;
}

/* Vertical rail: arrows at top/bottom, chevrons rotated up/down. */
.srd-gallery--thumbs-left:not(.srd-mobile) .srd-thumb-prev {
	top: 4px;
	left: 50%;
	transform: translateX(-50%);
}

.srd-gallery--thumbs-left:not(.srd-mobile) .srd-thumb-next {
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
}

.srd-gallery--thumbs-left:not(.srd-mobile) .srd-thumb-prev svg {
	transform: rotate(-90deg);
}

.srd-gallery--thumbs-left:not(.srd-mobile) .srd-thumb-next svg {
	transform: rotate(90deg);
}

/* Horizontal strip: arrows at the sides, vertically centered on the strip. */
.srd-gallery--thumbs-bottom-scroll .srd-thumb-prev,
.srd-gallery--thumbs-left.srd-mobile .srd-thumb-prev {
	left: 4px;
	top: 50%;
	transform: translateY(calc(-50% + 6px));
}

.srd-gallery--thumbs-bottom-scroll .srd-thumb-next,
.srd-gallery--thumbs-left.srd-mobile .srd-thumb-next {
	right: 4px;
	top: 50%;
	transform: translateY(calc(-50% + 6px));
}

.srd-gallery--thumbs-bottom-scroll .srd-thumb-prev svg,
.srd-gallery--thumbs-left.srd-mobile .srd-thumb-prev svg {
	transform: rotate(180deg);
}

/* ------------------------------------------------------------------ */
/* Layout: no thumbnails, arrows on the main image                     */
/* ------------------------------------------------------------------ */

.srd-gallery--no-thumbs-arrows ol.flex-control-thumbs {
	display: none !important;
}

/* FlexSlider direction nav: only visible in the arrows layout. */
.srd-gallery .flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.srd-gallery--thumbs-left .flex-direction-nav,
.srd-gallery--thumbs-bottom-scroll .flex-direction-nav {
	display: none !important;
}

.srd-gallery--no-thumbs-arrows .flex-direction-nav li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.srd-gallery--no-thumbs-arrows .flex-direction-nav a {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 25;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
	font-size: 0;             /* hide FlexSlider's "Previous"/"Next" text */
	color: transparent;
	text-decoration: none;
	cursor: pointer;
}

.srd-gallery--no-thumbs-arrows .flex-direction-nav a::before {
	content: "";
	display: block;
	width: 11px;
	height: 11px;
	border-top: 2px solid #333;
	border-right: 2px solid #333;
}

.srd-gallery--no-thumbs-arrows .flex-direction-nav a.flex-prev {
	left: 14px;
}

.srd-gallery--no-thumbs-arrows .flex-direction-nav a.flex-prev::before {
	transform: rotate(-135deg);
	margin-left: 5px;
}

.srd-gallery--no-thumbs-arrows .flex-direction-nav a.flex-next {
	right: 14px;
}

.srd-gallery--no-thumbs-arrows .flex-direction-nav a.flex-next::before {
	transform: rotate(45deg);
	margin-right: 5px;
}

.srd-gallery--no-thumbs-arrows .flex-direction-nav a.flex-disabled {
	opacity: 0.35;
	cursor: default;
}

/* ------------------------------------------------------------------ */
/* Product video slide                                                 */
/* ------------------------------------------------------------------ */

.srd-gallery .srd-gallery__video-slide .srd-video-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

.srd-gallery .srd-gallery__video-slide .srd-video {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.srd-gallery .srd-gallery__video-slide video.srd-video {
	object-fit: contain;
}

/* Play badge on the video thumbnail (li tagged by JS). */
.srd-gallery ol.flex-control-thumbs li.srd-video-thumb {
	position: relative;
}

.srd-gallery ol.flex-control-thumbs li.srd-video-thumb::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.55);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 5.5l11 6.5-11 6.5z' fill='%23fff'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
	pointer-events: none;
}

/* PhotoSwipe custom HTML item (spliced in by srd-gallery.js). */
.pswp .srd-pswp-video {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8vh 5vw;
}

.pswp .srd-pswp-video .srd-video-frame {
	position: relative;
	width: 100%;
	max-width: 1100px;
	aspect-ratio: 16 / 9;
}

.pswp .srd-pswp-video .srd-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ------------------------------------------------------------------ */
/* Editor / error notice                                               */
/* ------------------------------------------------------------------ */

.srd-gallery--error {
	padding: 1em;
	border: 1px dashed #c00;
	color: #c00;
	font-size: 14px;
}