/**
 * Product gallery — main image, thumbnail slider, lightbox.
 *
 * @package TSD_Order_Quote
 */

.tsd .tsd-gallery { max-width: 100%; }

/* ==========================================================================
   Main image
   ========================================================================== */
.tsd .tsd-gallery__main {
	position: relative;
	border: 1px solid var(--tsd-line);
	border-radius: var(--tsd-radius);
	overflow: hidden;
	/* The current slide is now in-flow and drives the real height. aspect-ratio
	 * keeps the intended square shape; because a real slide contributes height,
	 * the box can no longer collapse (and let the block below overlap it) if
	 * aspect-ratio is ignored by a wrapper, theme, or older browser. */
	aspect-ratio: 1 / 1;
	background: var(--tsd-paper);
	cursor: zoom-in;
}
.tsd .tsd-gallery__slide {
	/* Inactive slides are stacked behind the current one and removed from
	 * flow. The CURRENT slide (below) stays in flow so its image gives the
	 * gallery its real height — the container no longer depends solely on
	 * aspect-ratio, so it can't collapse (and let the product block overlap it)
	 * if aspect-ratio is overridden by a wrapper, theme, or older browser. */
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease;
}
.tsd .tsd-gallery__slide.is-current {
	position: relative;
	inset: auto;
	opacity: 1;
	visibility: visible;
	z-index: 1;
}
.tsd .tsd-gallery__slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Counter (bottom-left) */
.tsd .tsd-gallery__count {
	position: absolute;
	bottom: 14px;
	left: 16px;
	font-family: var(--tsd-font-d);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1px;
	color: var(--tsd-ink);
	background: rgba(8, 19, 32, .7);
	border: 1px solid var(--tsd-line);
	padding: 4px 12px;
	border-radius: 20px;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* Zoom (bottom-right) */
.tsd .tsd-gallery__zoom {
	position: absolute;
	bottom: 12px;
	right: 14px;
	width: 40px;
	height: 40px;
	padding: 0 !important;
	border-radius: 50%;
	background: rgba(8, 19, 32, .7);
	border: 1px solid var(--tsd-line);
	color: var(--tsd-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: color .15s, border-color .15s;
}
.tsd .tsd-gallery__zoom:hover { color: #fff; border-color: var(--tsd-green); }
.tsd .tsd-gallery__zoom svg { width: 22px !important; height: 22px !important; }
.tsd .tsd-gallery__zoom:focus { outline: none; }
.tsd .tsd-gallery__zoom:focus-visible { outline: 2px solid var(--tsd-green); outline-offset: 2px; }

/* ==========================================================================
   Thumbnail rail — [arrow] [viewport] [arrow]
   ========================================================================== */
.tsd .tsd-gallery__rail {
	display: flex;
	align-items: stretch;
	gap: 10px;
	margin-top: 14px;
}
.tsd .tsd-gallery__viewport {
	overflow: hidden;
	flex: 1;
	min-width: 0;
}
.tsd .tsd-gallery__track {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0 !important;
	list-style: none;
	transition: transform .28s ease;
}
.tsd .tsd-gallery__track li { margin: 0; padding: 0; list-style: none; }

.tsd .tsd-gallery__thumb {
	position: relative;
	width: 84px;
	height: 84px;
	padding: 0 !important;
	border: 1px solid var(--tsd-line);
	border-radius: var(--tsd-radius-sm, 10px);
	overflow: hidden;
	background: var(--tsd-paper);
	cursor: pointer;
	opacity: .7;
	transition: border-color .15s, opacity .15s, box-shadow .15s;
}
.tsd .tsd-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tsd .tsd-gallery__thumb:hover { opacity: 1; }
.tsd .tsd-gallery__thumb.is-current {
	opacity: 1;
	border-color: transparent;
}
/* 1px blue → lighter-blue gradient ring that follows the rounded corners */
.tsd .tsd-gallery__thumb.is-current::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--tsd-radius-sm, 10px);
	padding: 1px;
	background: linear-gradient(135deg, var(--tsd-green, #0173FD), var(--tsd-green-600, #3a90ff));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
.tsd .tsd-gallery__thumb:focus { outline: none; }
.tsd .tsd-gallery__thumb:focus-visible { outline: 2px solid var(--tsd-green); outline-offset: 2px; }

/* Rail arrows — soft squares flanking the strip */
.tsd .tsd-gallery__nav {
	flex: 0 0 auto;
	align-self: stretch;
	width: 40px;
	padding: 0 !important;
	border-radius: var(--tsd-radius-sm, 10px);
	background: var(--tsd-paper);
	border: 1px solid var(--tsd-line);
	color: var(--tsd-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.tsd .tsd-gallery__nav:hover:not(:disabled) {
	background: var(--tsd-paper-2);
	border-color: var(--tsd-green);
	color: #fff;
}
.tsd .tsd-gallery__nav:disabled { opacity: .3; cursor: default; }
.tsd .tsd-gallery__nav svg { width: 22px !important; height: 22px !important; }
.tsd .tsd-gallery__nav:focus { outline: none; }
.tsd .tsd-gallery__nav:focus-visible { outline: 2px solid var(--tsd-green); outline-offset: 2px; }

/* ==========================================================================
   Lightbox
   ========================================================================== */
.tsd .tsd-gallery__lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: rgba(4, 10, 18, .92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.tsd .tsd-gallery__lb.is-open { display: flex; }
.tsd .tsd-gallery__lb-figure {
	margin: 0;
	max-width: 82vw;
	max-height: 82vh;
	border-radius: var(--tsd-radius);
	overflow: hidden;
	border: 1px solid var(--tsd-line);
}
.tsd .tsd-gallery__lb-figure img {
	display: block;
	max-width: 82vw;
	max-height: 82vh;
	object-fit: contain;
}
.tsd .tsd-gallery__lb-close {
	position: absolute;
	top: 24px;
	right: 28px;
	width: 46px;
	height: 46px;
	padding: 0 !important;
	border-radius: 50%;
	background: var(--tsd-paper);
	border: 1px solid var(--tsd-line);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .15s;
}
.tsd .tsd-gallery__lb-close:hover { border-color: var(--tsd-green); }
.tsd .tsd-gallery__lb-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	padding: 0 !important;
	border-radius: 50%;
	background: var(--tsd-paper);
	border: 1px solid var(--tsd-line);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color .15s;
}
.tsd .tsd-gallery__lb-nav:hover { border-color: var(--tsd-green); }
.tsd .tsd-gallery__lb-nav.is-prev { left: 28px; }
.tsd .tsd-gallery__lb-nav.is-next { right: 28px; }
.tsd .tsd-gallery__lb-nav svg { width: 26px !important; height: 26px !important; }
.tsd .tsd-gallery__lb-count {
	position: absolute;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--tsd-font-d);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1px;
	color: var(--tsd-muted-2);
}

@media (max-width: 640px) {
	.tsd .tsd-gallery__thumb { width: 64px; height: 64px; }
	.tsd .tsd-gallery__nav { width: 34px; }
}