/* CT Product Gallery
   Layout is driven by CSS variables that the widget's responsive "Thumbnails Position" control
   sets (bottom / left / right), so every Elementor breakpoint can have its own position.
   Every <button> gets padding:0 here AND from the widget's padding controls (default 0), because many
   themes add button padding that squeezes the arrow icon out of view. */
.ctpg {
	--ctpg-thumb-w: 64px;
	--ctpg-thumb-h: 64px;
	--ctpg-strip-pad: 2px;
	--ctpg-tnav: 28px;
	--ctpg-speed: 400ms;

	display: flex;
	flex-direction: var(--ctpg-dir, column);
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
}

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

/* ---- buttons: neutralise theme/kit button styles ---- */
.ctpg .ctpg-nav,
.ctpg .ctpg-tnav,
.ctpg .ctpg-thumb,
.ctpg .ctpg-dot {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	min-width: 0;
	min-height: 0;
	font: inherit;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
}

/* ---- main image ---- */
.ctpg-main {
	position: relative;
	order: 1;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}

.ctpg-viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #f3f4f6;
	touch-action: pan-y;
}

.ctpg-track {
	height: 100%;
}

.ctpg--slide .ctpg-track {
	display: flex;
	transition: transform var(--ctpg-speed) ease;
	will-change: transform;
}

.ctpg--slide .ctpg-slide {
	flex: 0 0 100%;
	min-width: 0;
}

.ctpg--fade .ctpg-track {
	display: grid;
}

.ctpg--fade .ctpg-slide {
	grid-area: 1 / 1;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ctpg-speed) ease;
}

.ctpg--fade .ctpg-slide.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

.ctpg-slide {
	overflow: hidden;
	height: 100%;
}

.ctpg-slide img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	-webkit-user-drag: none;
	user-select: none;
	transition: transform .25s ease;
}

@media (hover: hover) {
	.ctpg--zoom .ctpg-viewport:hover .ctpg-slide.is-active img {
		transform: scale(var(--ctpg-zoom, 1.8));
		transform-origin: var(--zx, 50%) var(--zy, 50%);
	}
}

/* ---- main arrows ---- */
.ctpg .ctpg-nav {
	position: absolute;
	top: 50%;
	z-index: 4;
	width: 36px;
	height: 36px;
	transform: translateY(-50%);
	color: #111827;
	background: #fff;
	border: 0 solid #e5e7eb;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
	transition: opacity .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.ctpg .ctpg-prev { left: 12px; }
.ctpg .ctpg-next { right: 12px; }

.ctpg .ctpg-nav svg {
	display: block;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.ctpg .ctpg-nav:hover,
.ctpg .ctpg-nav:focus-visible {
	color: #111827;
	background: #f3f4f6;
}

.ctpg .ctpg-nav.is-disabled {
	opacity: .35;
	pointer-events: none;
}

.ctpg--hover-arrows .ctpg-nav {
	opacity: 0;
}

.ctpg--hover-arrows .ctpg-main:hover .ctpg-nav,
.ctpg--hover-arrows .ctpg-nav:focus-visible {
	opacity: 1;
}

.ctpg--hover-arrows .ctpg-main:hover .ctpg-nav.is-disabled {
	opacity: .35;
}

@media (hover: none) {
	.ctpg--hover-arrows .ctpg-nav {
		opacity: 1;
	}
}

/* ---- dots ---- */
.ctpg-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 6px;
	pointer-events: none;
}

.ctpg .ctpg-dot {
	width: 8px;
	height: 8px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .6);
	box-shadow: 0 0 2px rgba(0, 0, 0, .3);
	pointer-events: auto;
	transition: width .2s ease, background-color .2s ease;
}

.ctpg .ctpg-dot.is-active {
	width: 18px;
	background: #fff;
}

/* ---- thumbnails ---- */
.ctpg-thumbs-wrap {
	position: relative;
	order: var(--ctpg-order, 2);
	flex: 0 0 auto;
	width: var(--ctpg-wrap-w, 100%);
}

.ctpg-thumbs {
	position: var(--ctpg-tpos, relative);
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ctpg-thumbs::-webkit-scrollbar {
	display: none;
}

.ctpg-thumbs-track {
	display: flex;
	flex-direction: var(--ctpg-track-dir, row);
	gap: 8px;
	width: max-content;
	min-width: 100%;
	height: max-content;
	min-height: 100%;
	padding: var(--ctpg-strip-pad);
}

.ctpg .ctpg-thumb {
	flex: 0 0 auto;
	width: var(--ctpg-thumb-w);
	height: var(--ctpg-thumb-h);
	overflow: hidden;
	background: #fff;
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	opacity: .75;
	transition: opacity .2s ease, border-color .2s ease;
}

.ctpg .ctpg-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.ctpg .ctpg-thumb:hover {
	opacity: 1;
}

.ctpg .ctpg-thumb.is-active {
	opacity: 1;
	border-color: #111827;
}

.ctpg .ctpg-thumb:focus-visible,
.ctpg .ctpg-nav:focus-visible,
.ctpg .ctpg-tnav:focus-visible,
.ctpg .ctpg-dot:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/* ---- thumbnail scroll arrows (only when the strip overflows) ---- */
.ctpg .ctpg-tnav {
	position: absolute;
	z-index: 3;
	display: none;
	width: var(--ctpg-tnav);
	height: var(--ctpg-tnav);
	color: #111827;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
	transition: opacity .2s ease, background-color .2s ease, color .2s ease;
}

.ctpg .ctpg-tnav svg {
	display: block;
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

.ctpg .ctpg-tnav .ico-v { display: none; }
.ctpg-thumbs-wrap.is-vert .ctpg-tnav .ico-h { display: none; }
.ctpg-thumbs-wrap.is-vert .ctpg-tnav .ico-v { display: block; }

.ctpg-thumbs-wrap.has-overflow .ctpg-tnav {
	display: inline-flex;
}

.ctpg .ctpg-tnav:hover {
	color: #111827;
	background: #f3f4f6;
}

.ctpg-thumbs-wrap.at-start .ctpg-tprev,
.ctpg-thumbs-wrap.at-end .ctpg-tnext {
	opacity: .35;
	pointer-events: none;
}

/* horizontal strip (thumbnails at the bottom): arrows at the left / right ends */
.ctpg .ctpg-tprev { left: 0; top: 50%; transform: translateY(-50%); }
.ctpg .ctpg-tnext { right: 0; top: 50%; transform: translateY(-50%); }
.ctpg-thumbs-wrap.has-overflow:not(.is-vert) {
	padding-left: calc(var(--ctpg-tnav) + 6px);
	padding-right: calc(var(--ctpg-tnav) + 6px);
}

/* vertical strip (thumbnails left/right): arrows at the top / bottom ends */
.ctpg-thumbs-wrap.is-vert .ctpg-tprev { top: 0; left: 50%; right: auto; bottom: auto; transform: translateX(-50%); }
.ctpg-thumbs-wrap.is-vert .ctpg-tnext { bottom: 0; left: 50%; right: auto; top: auto; transform: translateX(-50%); }
.ctpg-thumbs-wrap.is-vert.has-overflow .ctpg-thumbs {
	top: calc(var(--ctpg-tnav) + 6px);
	bottom: calc(var(--ctpg-tnav) + 6px);
}

@media (prefers-reduced-motion: reduce) {
	.ctpg--slide .ctpg-track,
	.ctpg--fade .ctpg-slide,
	.ctpg-slide img,
	.ctpg .ctpg-nav,
	.ctpg .ctpg-thumb {
		transition: none;
	}
}

/* ---- badges (Sale! / out of stock / CT Suite custom badges) ---- */
.ctpg {
	--ctpg-badge-x: 12px;
	--ctpg-badge-y: 12px;
}

.ctpg .ctpg-badges {
	position: absolute;
	z-index: 5;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 6px;
	max-width: calc(100% - 24px);
	pointer-events: none; /* clicks fall through to the image (lightbox) */
}

.ctpg .ctpg-badges--tl { top: var(--ctpg-badge-y); left: var(--ctpg-badge-x); align-items: flex-start; }
.ctpg .ctpg-badges--tr { top: var(--ctpg-badge-y); right: var(--ctpg-badge-x); align-items: flex-end; }
.ctpg .ctpg-badges--bl { bottom: var(--ctpg-badge-y); left: var(--ctpg-badge-x); align-items: flex-start; }
.ctpg .ctpg-badges--br { bottom: var(--ctpg-badge-y); right: var(--ctpg-badge-x); align-items: flex-end; }

/* Custom badges come wrapped in .wcb-badges-wrap - flatten it so every badge is a sibling of the Sale badge. */
.ctpg .ctpg-badges .wcb-badges-wrap {
	display: contents;
}

/* "Inline" layout keeps the custom badges in their own row; right-side positions hug the right edge. */
.ctpg .ctpg-badges--tr .wcb-badges-wrap,
.ctpg .ctpg-badges--br .wcb-badges-wrap {
	justify-content: flex-end;
}

.ctpg .ctpg-badges .ctpg-badge,
.ctpg .ctpg-badges .wcb-badge {
	display: inline-block;
	margin: 0;
	white-space: nowrap;
}

/* Default "Sale!" look: white pill, dark text, soft shadow (matches the reference design). */
.ctpg .ctpg-badge--sale {
	padding: 7px 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: #1f2a44;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.ctpg .ctpg-badge--stock {
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	background: #6b7280;
	border-radius: 999px;
}

/* ---- lightbox cursor hint ---- */
.ctpg--lightbox .ctpg-viewport {
	cursor: zoom-in;
}

.ctpg--lightbox .ctpg-viewport:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/* ---- lightbox popup (lives on <body>; colours/sizes come from CSS variables copied from the widget) ---- */
.ctpg-lb {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background: var(--ctpg-lb-overlay, rgba(10, 10, 14, .92));
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility 0s linear .2s;
}

.ctpg-lb *,
.ctpg-lb *::before,
.ctpg-lb *::after {
	box-sizing: border-box;
}

.ctpg-lb.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .2s ease;
}

.ctpg-lb-stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px 76px 12px;
}

.ctpg-lb .ctpg-lb-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	-webkit-user-drag: none;
	user-select: none;
	transition: opacity .15s ease;
}

.ctpg-lb.is-loading .ctpg-lb-img {
	opacity: .35;
}

/* padding:0 on purpose - theme button padding would push the icon out of the circle */
.ctpg-lb .ctpg-lb-btn,
.ctpg-lb .ctpg-lb-thumb {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	min-width: 0;
	min-height: 0;
	font: inherit;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.ctpg-lb .ctpg-lb-btn {
	position: absolute;
	z-index: 2;
	color: var(--ctpg-lb-arrow-color, #fff);
	background: var(--ctpg-lb-arrow-bg, rgba(255, 255, 255, .14));
	border: 0;
	box-shadow: none;
	transition: background-color .2s ease;
}

.ctpg-lb .ctpg-lb-btn:hover,
.ctpg-lb .ctpg-lb-btn:focus-visible {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .4);
}

.ctpg-lb .ctpg-lb-btn svg {
	display: block;
	width: 55%;
	height: 55%;
	flex: 0 0 auto;
}

.ctpg-lb .ctpg-lb-prev,
.ctpg-lb .ctpg-lb-next {
	top: 50%;
	width: var(--ctpg-lb-arrow-size, 46px);
	height: var(--ctpg-lb-arrow-size, 46px);
	border-radius: var(--ctpg-lb-arrow-radius, 50%);
	transform: translateY(-50%);
}

.ctpg-lb .ctpg-lb-prev { left: 16px; }
.ctpg-lb .ctpg-lb-next { right: 16px; }

.ctpg-lb .ctpg-lb-close {
	top: 14px;
	right: 14px;
	width: var(--ctpg-lb-close-size, 42px);
	height: var(--ctpg-lb-close-size, 42px);
	color: var(--ctpg-lb-close-color, #fff);
	background: var(--ctpg-lb-close-bg, rgba(255, 255, 255, .14));
	border-radius: var(--ctpg-lb-close-radius, 50%);
}

.ctpg-lb-counter {
	position: absolute;
	top: 22px;
	left: 20px;
	z-index: 2;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--ctpg-lb-counter-color, #fff);
}

.ctpg-lb-thumbs {
	flex: 0 0 auto;
	display: flex;
	gap: 8px;
	justify-content: safe center;
	overflow-x: auto;
	padding: 8px 16px 16px;
	scrollbar-width: none;
}

.ctpg-lb-thumbs::-webkit-scrollbar {
	display: none;
}

.ctpg-lb .ctpg-lb-thumb {
	flex: 0 0 auto;
	width: var(--ctpg-lb-thumb, 60px);
	height: var(--ctpg-lb-thumb, 60px);
	overflow: hidden;
	background: #111;
	border: 2px solid transparent;
	border-radius: 8px;
	opacity: .6;
	transition: opacity .2s ease, border-color .2s ease;
}

.ctpg-lb .ctpg-lb-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ctpg-lb .ctpg-lb-thumb:hover { opacity: 1; }

.ctpg-lb .ctpg-lb-thumb.is-active {
	opacity: 1;
	border-color: var(--ctpg-lb-thumb-active, #fff);
}

.ctpg-lb .ctpg-lb-btn:focus-visible,
.ctpg-lb .ctpg-lb-thumb:focus-visible {
	outline: 2px solid #60a5fa;
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.ctpg-lb-stage { padding: 56px 8px 8px; }
	.ctpg-lb .ctpg-lb-prev { left: 8px; }
	.ctpg-lb .ctpg-lb-next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.ctpg-lb,
	.ctpg-lb .ctpg-lb-img,
	.ctpg-lb .ctpg-lb-thumb { transition: none; }
}