/**
 * WC Product Image Slider — front-end styles.
 * Deliberately light: colours and spacing inherit from the active theme.
 */

.wcpis {
	position: relative;
	margin: 0 0 1.5em;
}

.wcpis__main {
	margin: 0 0 10px;
}

.wcpis__img {
	display: block;
	width: 100%;
	height: auto;
}

.wcpis__lightbox {
	display: block;
	cursor: zoom-in;
	outline-offset: -2px;
}

.wcpis__nav {
	margin: 0 -5px;
}

.wcpis__thumb {
	padding: 0 5px;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

.wcpis__thumb:hover,
.wcpis__thumb.slick-current {
	opacity: 1;
}

/* Main slider arrows sit over the image. */
.wcpis__main .slick-prev,
.wcpis__main .slick-next {
	z-index: 2;
	width: 32px;
	height: 32px;
}

.wcpis__main .slick-prev {
	left: 0px;
}

.wcpis__main .slick-next {
	right: 0px;
}

.wcpis__main .slick-prev:before,
.wcpis__main .slick-next:before {
	color: #333;
    font-size: 22px;
    opacity: 1;
    content: '';
    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xOC43NTkzIDkuMzQ5MjFDMTguMzk5OCA4LjkyOTg4IDE3Ljc2ODUgOC44ODEzMiAxNy4zNDkyIDkuMjQwNzRDMTYuOTI5OSA5LjYwMDE3IDE2Ljg4MTMgMTAuMjMxNSAxNy4yNDA3IDEwLjY1MDhMMTguNzU5MyA5LjM0OTIxWk0zMCAyNEwzMC43NTkzIDI0LjY1MDhDMzEuMDgwMiAyNC4yNzYzIDMxLjA4MDIgMjMuNzIzNyAzMC43NTkzIDIzLjM0OTJMMzAgMjRaTTE3LjI0MDcgMzcuMzQ5MkMxNi44ODEzIDM3Ljc2ODUgMTYuOTI5OSAzOC4zOTk4IDE3LjM0OTIgMzguNzU5M0MxNy43Njg1IDM5LjExODcgMTguMzk5OCAzOS4wNzAxIDE4Ljc1OTMgMzguNjUwOEwxNy4yNDA3IDM3LjM0OTJaTTE3LjI0MDcgMTAuNjUwOEwyOS4yNDA3IDI0LjY1MDhMMzAuNzU5MyAyMy4zNDkyTDE4Ljc1OTMgOS4zNDkyMUwxNy4yNDA3IDEwLjY1MDhaTTI5LjI0MDcgMjMuMzQ5MkwxNy4yNDA3IDM3LjM0OTJMMTguNzU5MyAzOC42NTA4TDMwLjc1OTMgMjQuNjUwOEwyOS4yNDA3IDIzLjM0OTJaIiBmaWxsPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo=);
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xOC43NTkzIDkuMzQ5MjFDMTguMzk5OCA4LjkyOTg4IDE3Ljc2ODUgOC44ODEzMiAxNy4zNDkyIDkuMjQwNzRDMTYuOTI5OSA5LjYwMDE3IDE2Ljg4MTMgMTAuMjMxNSAxNy4yNDA3IDEwLjY1MDhMMTguNzU5MyA5LjM0OTIxWk0zMCAyNEwzMC43NTkzIDI0LjY1MDhDMzEuMDgwMiAyNC4yNzYzIDMxLjA4MDIgMjMuNzIzNyAzMC43NTkzIDIzLjM0OTJMMzAgMjRaTTE3LjI0MDcgMzcuMzQ5MkMxNi44ODEzIDM3Ljc2ODUgMTYuOTI5OSAzOC4zOTk4IDE3LjM0OTIgMzguNzU5M0MxNy43Njg1IDM5LjExODcgMTguMzk5OCAzOS4wNzAxIDE4Ljc1OTMgMzguNjUwOEwxNy4yNDA3IDM3LjM0OTJaTTE3LjI0MDcgMTAuNjUwOEwyOS4yNDA3IDI0LjY1MDhMMzAuNzU5MyAyMy4zNDkyTDE4Ljc1OTMgOS4zNDkyMUwxNy4yNDA3IDEwLjY1MDhaTTI5LjI0MDcgMjMuMzQ5MkwxNy4yNDA3IDM3LjM0OTJMMTguNzU5MyAzOC42NTA4TDMwLjc1OTMgMjQuNjUwOEwyOS4yNDA3IDIzLjM0OTJaIiBmaWxsPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo=);
    background-color: rgba(180, 180, 180, .6);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: cover;
    mask-size: cover;
    display: block;
    width: 100%;
    height: 100%;
}
.wcpis__main .slick-prev:before{
	transform: rotateZ(180deg) !important;
}
.wcpis__main .slick-prev:hover:before,
.wcpis__main .slick-next:hover:before{
	background-color: rgba(180,180,180,1);
}

/* Thumbnail nav arrows sit outside the strip, in the reserved gutters. */
.wcpis--thumb-arrows .wcpis__nav {
	padding: 0 26px;
}

.wcpis__nav .slick-prev,
.wcpis__nav .slick-next {
	z-index: 2;
    width: 32px;
    height: 56px;
	box-shadow: none !important;
}

.wcpis__nav .slick-prev {
	left: 0;
}

.wcpis__nav .slick-next {
	right: 0;
}

.wcpis__nav .slick-prev:before,
.wcpis__nav .slick-next:before {
	color: #333;
	font-size: 18px;
	opacity: 0.85;
}

.wcpis__nav .slick-arrow.slick-disabled {
	opacity: 0.25;
	pointer-events: none;
}

.wcpis .slick-dots {
	position: static;
	margin-top: 8px;
}

.wcpis__thumb:focus-visible,
.wcpis__slide:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Pre-init: show a single slide so the markup does not flash as a stack. */
.wcpis__main:not(.slick-initialized) .wcpis__slide + .wcpis__slide {
	display: none;
}

.wcpis__nav:not(.slick-initialized) {
	display: flex;
}

.wcpis__nav:not(.slick-initialized) .wcpis__thumb {
	flex: 0 0 25%;
}

@media (prefers-reduced-motion: reduce) {
	.wcpis .slick-track {
		transition: none !important;
	}
}

/* --- Fancybox (scoped via baseClass: wcpis-fancybox) --- */

/* Active thumbnail highlight. Override --wcpis-lightbox-accent in your theme. */
.wcpis-fancybox .fancybox-thumbs__list a:before {
	border-color: var(--wcpis-lightbox-accent, #ff5268);
	border-width: 4px;
}

/* Horizontal filmstrip along the bottom (thumbs.axis is 'x').
   With axis 'x' Fancybox sets an inline width on __list and scrolls its PARENT,
   so the grid owns the overflow and the fixed-width list is centred with auto
   margins — which collapse to 0 once the strip is wider than the viewport.
   Selectors are doubled up so they win against the vendor stylesheet
   regardless of which of the two prints last. */
.wcpis-fancybox.fancybox-container .fancybox-thumbs {
	top: auto;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	height: 96px;
	padding: 6px 4px;
	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: hidden;
}

.wcpis-fancybox.fancybox-show-thumbs .fancybox-inner {
	right: 0;
	bottom: 96px;
}

.wcpis-fancybox.fancybox-container .fancybox-thumbs__list {
	position: relative;
	height: 100%;
	margin: 0 auto;
	overflow: visible;
	white-space: nowrap;
}

.wcpis-fancybox.fancybox-container .fancybox-thumbs__list a {
	float: none;
	display: inline-block;
	vertical-align: top;
	width: 84px;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0 2px;
}

.wcpis-fancybox.fancybox-container .fancybox-thumbs::-webkit-scrollbar {
	height: 6px;
}

.wcpis-fancybox.fancybox-container .fancybox-thumbs::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.35);
	border-radius: 3px;
}

@media (max-width: 767px) {
	.wcpis-fancybox.fancybox-container .fancybox-thumbs {
		height: 72px;
	}

	.wcpis-fancybox.fancybox-show-thumbs .fancybox-inner {
		bottom: 72px;
	}

	.wcpis-fancybox.fancybox-container .fancybox-thumbs__list a {
		width: 60px;
	}
}