/* GENERATED FILE — edit assets/src/*.css and run assets/src/build.py */
/**
 * Woo Variation VIP Pro - VIP gallery skin
 *
 * Loaded after the vendor frontend.css, scoped to .wvvp-vip so it can be turned
 * off without leaving orphan rules behind. Tweak the variables below (in your
 * theme's Additional CSS) rather than editing this file.
 */

.woo-variation-product-gallery.wvvp-vip {
	--wvvp-accent: #111827;
	--wvvp-radius: 14px;
	--wvvp-thumb-radius: 10px;
	--wvvp-thumb-gap: 5px;
	--wvvp-gap: 12px;
	--wvvp-btn-size: 44px;
	--wvvp-border: #ececec;
	--wvvp-border-w: 1px;
	--wvvp-btn-bg: #ffffff;
	--wvvp-btn-fg: #111827;
	--wvvp-shadow: 0 2px 10px rgba( 0, 0, 0, 0.16 );

	/* The vendor prints this on :root from its "Thumbnails Gap" setting and
	   uses it for BOTH the strip offset and the item spacing. Zero it here
	   (element beats :root) so only the VIP values below have any effect —
	   even when a cached page still carries an old :root value. */
	--wvg-thumbnail-item-gap: 0px;
}

/* --------------------------------------------------------------- main image */

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-wrapper .wvg-single-gallery-image-container {
	border-radius: var( --wvvp-radius );
	overflow: hidden;
	border: var( --wvvp-border-w ) solid var( --wvvp-border );
	background: #fff;
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-wrapper .wvg-single-gallery-image-container img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

/* ------------------------------------------------------------------- arrows */

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-slider-wrapper .wvg-slider-prev-arrow,
.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-slider-wrapper .wvg-slider-next-arrow {
	top: 50%;
	width: var( --wvvp-btn-size );
	height: var( --wvvp-btn-size );
	line-height: var( --wvvp-btn-size );
	margin-top: calc( var( --wvvp-btn-size ) / -2 );
	background: var( --wvvp-btn-bg );
	border-radius: 50%;
	box-shadow: none;
	border: 1px solid var( --wvvp-border );
	background: var( --wvvp-btn-bg );
	opacity: 0.6;
	transform: scale( 0.92 );
	transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
	z-index: 5;
}

/* Neutralise the vendor's slide-in-from-outside animation. */
.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-slider-wrapper .wvg-slider-prev-arrow,
.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-slider-wrapper:hover .wvg-slider-prev-arrow {
	left: 12px;
	right: auto;
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-slider-wrapper .wvg-slider-next-arrow,
.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-slider-wrapper:hover .wvg-slider-next-arrow {
	right: 12px;
	left: auto;
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-slider-wrapper:hover .wvg-slider-prev-arrow,
.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-slider-wrapper:hover .wvg-slider-next-arrow {
	opacity: 1;
	transform: scale( 1 );
	background: var( --wvvp-btn-bg );
	box-shadow: var( --wvvp-shadow );
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-slider-wrapper .wvg-slider-prev-arrow:hover,
.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-slider-wrapper .wvg-slider-next-arrow:hover {
	background: var( --wvvp-btn-bg );
	opacity: 1;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.24 );
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-slider-wrapper .wvg-slider-prev-arrow::before,
.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-slider-wrapper .wvg-slider-next-arrow::before {
	color: var( --wvvp-btn-fg );
	font-size: 22px;
	line-height: var( --wvvp-btn-size );
}

/* Touch devices have no hover, so keep the arrows visible. */
@media ( hover: none ) {

	.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-slider-wrapper .wvg-slider-prev-arrow,
	.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-slider-wrapper .wvg-slider-next-arrow {
		opacity: 1;
		transform: scale( 1 );
	}
}

/* --------------------------------------------------------- counter + zoom */

.woo-variation-product-gallery.wvvp-vip .wvvp-counter {
	position: absolute;
	z-index: 5;
	padding: 5px 13px;
	border-radius: 999px;
	background: var( --wvvp-btn-bg );
	color: var( --wvvp-btn-fg );
	border: 1px solid var( --wvvp-border );
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.08 );
	font-size: 13px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: 0.02em;
	pointer-events: none;
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-wrapper .woo-variation-gallery-trigger {
	width: auto;
	min-width: var( --wvvp-btn-size );
	height: var( --wvvp-btn-size );
	padding: 0 11px;
	gap: 0;
	background: var( --wvvp-btn-bg );
	border-radius: 10px;
	border: 1px solid var( --wvvp-border );
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.08 );
	color: var( --wvvp-btn-fg );
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	transition: box-shadow 0.18s ease, gap 0.18s ease;
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-wrapper .woo-variation-gallery-trigger:hover {
	box-shadow: var( --wvvp-shadow );
	gap: 8px;
}

/* Expand icon — the seller's own SVG (Font Awesome "arrows" glyph), applied as
   a CSS mask on a plain span: the vendor template prints the icon markup
   through wp_kses_post(), which strips inline <svg>, so the shape lives in
   the stylesheet instead. `background-color: currentColor` paints the mask,
   so it follows --wvvp-btn-fg like every other button glyph. */
.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-trigger .wvvp-zoom-icon {
	width: 14px;
	height: 16px;
	flex: 0 0 14px;
	display: block;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20448%20512%22%3E%3Cpath%20fill=%22%23000%22%20d=%22M416%20176V86.63L246.6%20256L416%20425.4V336c0-8.844%207.156-16%2016-16s16%207.156%2016%2016v128c0%208.844-7.156%2016-16%2016h-128c-8.844%200-16-7.156-16-16s7.156-16%2016-16h89.38L224%20278.6L54.63%20448H144C152.8%20448%20160%20455.2%20160%20464S152.8%20480%20144%20480h-128C7.156%20480%200%20472.8%200%20464v-128C0%20327.2%207.156%20320%2016%20320S32%20327.2%2032%20336v89.38L201.4%20256L32%2086.63V176C32%20184.8%2024.84%20192%2016%20192S0%20184.8%200%20176v-128C0%2039.16%207.156%2032%2016%2032h128C152.8%2032%20160%2039.16%20160%2048S152.8%2064%20144%2064H54.63L224%20233.4L393.4%2064H304C295.2%2064%20288%2056.84%20288%2048S295.2%2032%20304%2032h128C440.8%2032%20448%2039.16%20448%2048v128C448%20184.8%20440.8%20192%20432%20192S416%20184.8%20416%20176z%22/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20448%20512%22%3E%3Cpath%20fill=%22%23000%22%20d=%22M416%20176V86.63L246.6%20256L416%20425.4V336c0-8.844%207.156-16%2016-16s16%207.156%2016%2016v128c0%208.844-7.156%2016-16%2016h-128c-8.844%200-16-7.156-16-16s7.156-16%2016-16h89.38L224%20278.6L54.63%20448H144C152.8%20448%20160%20455.2%20160%20464S152.8%20480%20144%20480h-128C7.156%20480%200%20472.8%200%20464v-128C0%20327.2%207.156%20320%2016%20320S32%20327.2%2032%20336v89.38L201.4%20256L32%2086.63V176C32%20184.8%2024.84%20192%2016%20192S0%20184.8%200%20176v-128C0%2039.16%207.156%2032%2016%2032h128C152.8%2032%20160%2039.16%20160%2048S152.8%2064%20144%2064H54.63L224%20233.4L393.4%2064H304C295.2%2064%20288%2056.84%20288%2048S295.2%2032%20304%2032h128C440.8%2032%20448%2039.16%20448%2048v128C448%20184.8%20440.8%20192%20432%20192S416%20184.8%20416%20176z%22/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Label is collapsed to zero width and grows on hover, so the button stays a
   compact square until the customer shows interest. */
.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-trigger .wvvp-zoom-label {
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-width 0.22s ease, opacity 0.18s ease;
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-trigger:hover .wvvp-zoom-label {
	max-width: 140px;
	opacity: 1;
}

/* Touch devices cannot hover: keep the square, never the label. */
@media ( hover: none ) {

	.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-trigger .wvvp-zoom-label {
		display: none;
	}
}

/* Nudge the four supported zoom positions inward to match the image radius. */
.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-trigger-position-top-right {
	top: 12px;
	right: 12px;
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-trigger-position-top-left {
	top: 12px;
	left: 12px;
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-trigger-position-bottom-right {
	top: auto;
	bottom: 12px;
	right: 12px;
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-trigger-position-bottom-left {
	top: auto;
	bottom: 12px;
	left: 12px;
	right: auto;
}

/* -------------------------------------------------------------- thumbnails */

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-wrapper .wvg-gallery-thumbnail-image {
	opacity: 1;
	padding: var( --wvvp-thumb-gap );
	box-sizing: border-box;
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-wrapper .wvg-gallery-thumbnail-image > div {
	border-radius: var( --wvvp-thumb-radius );
	overflow: hidden;
	border: calc( var( --wvvp-border-w ) + 1px ) solid var( --wvvp-border );
	box-sizing: border-box;
	opacity: 1;
	transition: border-color 0.18s ease;
	line-height: 0;
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-wrapper .wvg-gallery-thumbnail-image:hover > div {
	border-color: rgba( 0, 0, 0, 0.3 );
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-wrapper .wvg-gallery-thumbnail-image.current-thumbnail > div,
.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-wrapper .slick-current .wvg-gallery-thumbnail-image > div,
.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-wrapper .slick-current.wvg-gallery-thumbnail-image > div {
	opacity: 1;
	border-color: var( --wvvp-accent );
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-wrapper .wvg-gallery-thumbnail-image img {
	border-radius: 0;
	display: block;
}

/* Thumbnail strip arrows are removed: slick keeps the strip in sync with the
   main slider (asNavFor), so the main arrows and swiping already move it. The
   vendor option is forced off in wvvp-trim.php; this is the belt to that
   brace for any markup still in a cached page. */
.woo-variation-product-gallery.wvvp-vip .wvg-thumbnail-prev-arrow,
.woo-variation-product-gallery.wvvp-vip .wvg-thumbnail-next-arrow {
	display: none;
}

/* ------------------------------------------------------------------ dots */

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-slider .slick-dots {
	display: none;
	justify-content: center;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: var( --wvvp-gap ) 0 0;
	padding: 0;
	position: static;
	width: 100%;
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-slider .slick-dots li {
	margin: 0;
	padding: 0;
	line-height: 0;
	list-style: none;
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-slider .slick-dots li::before,
.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-slider .slick-dots li::marker {
	content: none;
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-slider .slick-dots li button {
	display: block;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var( --wvvp-border );
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
	box-shadow: none;
	transition: width 0.2s ease, background 0.2s ease;
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-slider .slick-dots li button::before {
	content: none;
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-slider .slick-dots li.slick-active button {
	width: 22px;
	background: var( --wvvp-accent );
}

/* ------------------------------------------- strip offset (desktop token) */

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-top-top .woo-variation-gallery-thumbnail-slider {
	margin: 0;
	margin-bottom: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-top-bottom .woo-variation-gallery-thumbnail-slider {
	margin: 0;
	margin-bottom: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-top-left .woo-variation-gallery-thumbnail-slider {
	margin: 0;
	margin-bottom: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-top-right .woo-variation-gallery-thumbnail-slider {
	margin: 0;
	margin-bottom: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-bottom-top .woo-variation-gallery-thumbnail-slider {
	margin: 0;
	margin-top: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-bottom-bottom .woo-variation-gallery-thumbnail-slider {
	margin: 0;
	margin-top: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-bottom-left .woo-variation-gallery-thumbnail-slider {
	margin: 0;
	margin-top: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-bottom-right .woo-variation-gallery-thumbnail-slider {
	margin: 0;
	margin-top: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-left-top .woo-variation-gallery-thumbnail-slider {
	margin: 0;
	margin-right: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-left-bottom .woo-variation-gallery-thumbnail-slider {
	margin: 0;
	margin-right: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-left-left .woo-variation-gallery-thumbnail-slider {
	margin: 0;
	margin-right: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-left-right .woo-variation-gallery-thumbnail-slider {
	margin: 0;
	margin-right: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-right-top .woo-variation-gallery-thumbnail-slider {
	margin: 0;
	margin-left: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-right-bottom .woo-variation-gallery-thumbnail-slider {
	margin: 0;
	margin-left: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-right-left .woo-variation-gallery-thumbnail-slider {
	margin: 0;
	margin-left: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
}

.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-right-right .woo-variation-gallery-thumbnail-slider {
	margin: 0;
	margin-left: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
}

/* ------------------------------------------- strip offset (mobile token) */

@media ( max-width: 767px ) {
	.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-top-top .woo-variation-gallery-thumbnail-slider {
		margin: 0;
		margin-bottom: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
	}

	.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-top-bottom .woo-variation-gallery-thumbnail-slider {
		margin: 0;
		margin-top: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
	}

	.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-top-left .woo-variation-gallery-thumbnail-slider {
		margin: 0;
		margin-right: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
	}

	.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-top-right .woo-variation-gallery-thumbnail-slider {
		margin: 0;
		margin-left: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
	}

	.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-bottom-top .woo-variation-gallery-thumbnail-slider {
		margin: 0;
		margin-bottom: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
	}

	.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-bottom-bottom .woo-variation-gallery-thumbnail-slider {
		margin: 0;
		margin-top: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
	}

	.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-bottom-left .woo-variation-gallery-thumbnail-slider {
		margin: 0;
		margin-right: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
	}

	.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-bottom-right .woo-variation-gallery-thumbnail-slider {
		margin: 0;
		margin-left: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
	}

	.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-left-top .woo-variation-gallery-thumbnail-slider {
		margin: 0;
		margin-bottom: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
	}

	.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-left-bottom .woo-variation-gallery-thumbnail-slider {
		margin: 0;
		margin-top: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
	}

	.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-left-left .woo-variation-gallery-thumbnail-slider {
		margin: 0;
		margin-right: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
	}

	.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-left-right .woo-variation-gallery-thumbnail-slider {
		margin: 0;
		margin-left: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
	}

	.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-right-top .woo-variation-gallery-thumbnail-slider {
		margin: 0;
		margin-bottom: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
	}

	.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-right-bottom .woo-variation-gallery-thumbnail-slider {
		margin: 0;
		margin-top: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
	}

	.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-right-left .woo-variation-gallery-thumbnail-slider {
		margin: 0;
		margin-right: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
	}

	.woo-variation-product-gallery.wvvp-vip .woo-variation-gallery-thumbnail-position-right-right .woo-variation-gallery-thumbnail-slider {
		margin: 0;
		margin-left: max( 0px, calc( var( --wvvp-gap ) - var( --wvvp-thumb-gap ) ) );
	}
}

/* ==========================================================================
   DESKTOP  (( min-width: 1025px ))
   ========================================================================== */
@media ( min-width: 1025px ) {
	/* ---- variants for one device; d = d | t | m ---- */

	/* ---------------------------------------------------------------- arrows */

	.woo-variation-product-gallery.wvvp-vip.wvvp-d-arrows-always .woo-variation-gallery-slider-wrapper .wvg-slider-prev-arrow,
	.woo-variation-product-gallery.wvvp-vip.wvvp-d-arrows-always .woo-variation-gallery-slider-wrapper .wvg-slider-next-arrow {
		opacity: 1;
		transform: scale( 1 );
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-d-arrows-hidden .wvg-slider-prev-arrow,
	.woo-variation-product-gallery.wvvp-vip.wvvp-d-arrows-hidden .wvg-slider-next-arrow {
		display: none;
	}

	.woo-variation-product-gallery.wvvp-vip[class*="wvvp-d-arrows-corner"] .woo-variation-gallery-slider-wrapper .wvg-slider-prev-arrow,
	.woo-variation-product-gallery.wvvp-vip[class*="wvvp-d-arrows-corner"] .woo-variation-gallery-slider-wrapper .wvg-slider-next-arrow {
		top: auto;
		bottom: 12px;
		margin-top: 0;
		opacity: 1;
		transform: scale( 1 );
		border: 1px solid var( --wvvp-border );
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-d-arrows-corner-br .woo-variation-gallery-slider-wrapper .wvg-slider-prev-arrow,
	.woo-variation-product-gallery.wvvp-vip.wvvp-d-arrows-corner-br .woo-variation-gallery-slider-wrapper:hover .wvg-slider-prev-arrow {
		left: auto;
		right: calc( var( --wvvp-btn-size ) + 20px );
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-d-arrows-corner-br .woo-variation-gallery-slider-wrapper .wvg-slider-next-arrow,
	.woo-variation-product-gallery.wvvp-vip.wvvp-d-arrows-corner-br .woo-variation-gallery-slider-wrapper:hover .wvg-slider-next-arrow {
		left: auto;
		right: 12px;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-d-arrows-corner-bl .woo-variation-gallery-slider-wrapper .wvg-slider-prev-arrow,
	.woo-variation-product-gallery.wvvp-vip.wvvp-d-arrows-corner-bl .woo-variation-gallery-slider-wrapper:hover .wvg-slider-prev-arrow {
		right: auto;
		left: 12px;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-d-arrows-corner-bl .woo-variation-gallery-slider-wrapper .wvg-slider-next-arrow,
	.woo-variation-product-gallery.wvvp-vip.wvvp-d-arrows-corner-bl .woo-variation-gallery-slider-wrapper:hover .wvg-slider-next-arrow {
		right: auto;
		left: calc( var( --wvvp-btn-size ) + 20px );
	}

	/* ------------------------------------------------------------- counter */

	.woo-variation-product-gallery.wvvp-vip.wvvp-d-no-counter .wvvp-counter {
		display: none;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-d-counter-bottom-left .wvvp-counter {
		left: 12px;
		right: auto;
		top: auto;
		bottom: 12px;
		transform: none;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-d-counter-bottom-right .wvvp-counter {
		left: auto;
		right: 12px;
		top: auto;
		bottom: 12px;
		transform: none;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-d-counter-bottom-center .wvvp-counter {
		left: 50%;
		right: auto;
		top: auto;
		bottom: 12px;
		transform: translateX( -50% );
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-d-counter-top-left .wvvp-counter {
		left: 12px;
		right: auto;
		top: 12px;
		bottom: auto;
		transform: none;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-d-counter-top-right .wvvp-counter {
		left: auto;
		right: 12px;
		top: 12px;
		bottom: auto;
		transform: none;
	}

	/* Corner arrows and a same-side bottom counter would collide: flip it. */
	.woo-variation-product-gallery.wvvp-vip.wvvp-d-arrows-corner-br.wvvp-d-counter-bottom-right .wvvp-counter {
		right: auto;
		left: 12px;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-d-arrows-corner-bl.wvvp-d-counter-bottom-left .wvvp-counter {
		left: auto;
		right: 12px;
	}

	/* ---------------------------------------------------------- navigation */

	/* Dots-only / none: hide the strip (not remove — the vendor's asNavFor sync
	   must keep working) and give the slider the full width the strip occupied.
	   The vendor sets the slider to 80% / 100% depending on thumbnail position,
	   so both are reset here. */
	.woo-variation-product-gallery.wvvp-vip.wvvp-d-nav-dots .woo-variation-gallery-thumbnail-wrapper,
	.woo-variation-product-gallery.wvvp-vip.wvvp-d-nav-none .woo-variation-gallery-thumbnail-wrapper {
		display: none;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-d-nav-dots .woo-variation-gallery-container .woo-variation-gallery-slider-wrapper,
	.woo-variation-product-gallery.wvvp-vip.wvvp-d-nav-none .woo-variation-gallery-container .woo-variation-gallery-slider-wrapper {
		width: 100%;
		max-width: 100%;
		flex: 1 1 100%;
	}

	/* Dots are rendered by slick whenever any device wants them; show them only
	   where this device's setting asks. */
	.woo-variation-product-gallery.wvvp-vip.wvvp-d-nav-thumbnail .woo-variation-gallery-slider .slick-dots,
	.woo-variation-product-gallery.wvvp-vip.wvvp-d-nav-none .woo-variation-gallery-slider .slick-dots {
		display: none;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-d-nav-dots .woo-variation-gallery-slider .slick-dots,
	.woo-variation-product-gallery.wvvp-vip.wvvp-d-nav-both .woo-variation-gallery-slider .slick-dots {
		display: flex;
	}
}

/* ==========================================================================
   TABLET  (( min-width: 768px ) and ( max-width: 1024px ))
   ========================================================================== */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	/* ---- variants for one device; t = d | t | m ---- */

	/* ---------------------------------------------------------------- arrows */

	.woo-variation-product-gallery.wvvp-vip.wvvp-t-arrows-always .woo-variation-gallery-slider-wrapper .wvg-slider-prev-arrow,
	.woo-variation-product-gallery.wvvp-vip.wvvp-t-arrows-always .woo-variation-gallery-slider-wrapper .wvg-slider-next-arrow {
		opacity: 1;
		transform: scale( 1 );
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-t-arrows-hidden .wvg-slider-prev-arrow,
	.woo-variation-product-gallery.wvvp-vip.wvvp-t-arrows-hidden .wvg-slider-next-arrow {
		display: none;
	}

	.woo-variation-product-gallery.wvvp-vip[class*="wvvp-t-arrows-corner"] .woo-variation-gallery-slider-wrapper .wvg-slider-prev-arrow,
	.woo-variation-product-gallery.wvvp-vip[class*="wvvp-t-arrows-corner"] .woo-variation-gallery-slider-wrapper .wvg-slider-next-arrow {
		top: auto;
		bottom: 12px;
		margin-top: 0;
		opacity: 1;
		transform: scale( 1 );
		border: 1px solid var( --wvvp-border );
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-t-arrows-corner-br .woo-variation-gallery-slider-wrapper .wvg-slider-prev-arrow,
	.woo-variation-product-gallery.wvvp-vip.wvvp-t-arrows-corner-br .woo-variation-gallery-slider-wrapper:hover .wvg-slider-prev-arrow {
		left: auto;
		right: calc( var( --wvvp-btn-size ) + 20px );
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-t-arrows-corner-br .woo-variation-gallery-slider-wrapper .wvg-slider-next-arrow,
	.woo-variation-product-gallery.wvvp-vip.wvvp-t-arrows-corner-br .woo-variation-gallery-slider-wrapper:hover .wvg-slider-next-arrow {
		left: auto;
		right: 12px;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-t-arrows-corner-bl .woo-variation-gallery-slider-wrapper .wvg-slider-prev-arrow,
	.woo-variation-product-gallery.wvvp-vip.wvvp-t-arrows-corner-bl .woo-variation-gallery-slider-wrapper:hover .wvg-slider-prev-arrow {
		right: auto;
		left: 12px;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-t-arrows-corner-bl .woo-variation-gallery-slider-wrapper .wvg-slider-next-arrow,
	.woo-variation-product-gallery.wvvp-vip.wvvp-t-arrows-corner-bl .woo-variation-gallery-slider-wrapper:hover .wvg-slider-next-arrow {
		right: auto;
		left: calc( var( --wvvp-btn-size ) + 20px );
	}

	/* ------------------------------------------------------------- counter */

	.woo-variation-product-gallery.wvvp-vip.wvvp-t-no-counter .wvvp-counter {
		display: none;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-t-counter-bottom-left .wvvp-counter {
		left: 12px;
		right: auto;
		top: auto;
		bottom: 12px;
		transform: none;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-t-counter-bottom-right .wvvp-counter {
		left: auto;
		right: 12px;
		top: auto;
		bottom: 12px;
		transform: none;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-t-counter-bottom-center .wvvp-counter {
		left: 50%;
		right: auto;
		top: auto;
		bottom: 12px;
		transform: translateX( -50% );
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-t-counter-top-left .wvvp-counter {
		left: 12px;
		right: auto;
		top: 12px;
		bottom: auto;
		transform: none;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-t-counter-top-right .wvvp-counter {
		left: auto;
		right: 12px;
		top: 12px;
		bottom: auto;
		transform: none;
	}

	/* Corner arrows and a same-side bottom counter would collide: flip it. */
	.woo-variation-product-gallery.wvvp-vip.wvvp-t-arrows-corner-br.wvvp-t-counter-bottom-right .wvvp-counter {
		right: auto;
		left: 12px;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-t-arrows-corner-bl.wvvp-t-counter-bottom-left .wvvp-counter {
		left: auto;
		right: 12px;
	}

	/* ---------------------------------------------------------- navigation */

	/* Dots-only / none: hide the strip (not remove — the vendor's asNavFor sync
	   must keep working) and give the slider the full width the strip occupied.
	   The vendor sets the slider to 80% / 100% depending on thumbnail position,
	   so both are reset here. */
	.woo-variation-product-gallery.wvvp-vip.wvvp-t-nav-dots .woo-variation-gallery-thumbnail-wrapper,
	.woo-variation-product-gallery.wvvp-vip.wvvp-t-nav-none .woo-variation-gallery-thumbnail-wrapper {
		display: none;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-t-nav-dots .woo-variation-gallery-container .woo-variation-gallery-slider-wrapper,
	.woo-variation-product-gallery.wvvp-vip.wvvp-t-nav-none .woo-variation-gallery-container .woo-variation-gallery-slider-wrapper {
		width: 100%;
		max-width: 100%;
		flex: 1 1 100%;
	}

	/* Dots are rendered by slick whenever any device wants them; show them only
	   where this device's setting asks. */
	.woo-variation-product-gallery.wvvp-vip.wvvp-t-nav-thumbnail .woo-variation-gallery-slider .slick-dots,
	.woo-variation-product-gallery.wvvp-vip.wvvp-t-nav-none .woo-variation-gallery-slider .slick-dots {
		display: none;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-t-nav-dots .woo-variation-gallery-slider .slick-dots,
	.woo-variation-product-gallery.wvvp-vip.wvvp-t-nav-both .woo-variation-gallery-slider .slick-dots {
		display: flex;
	}
}

/* ==========================================================================
   MOBILE  (( max-width: 767px ))
   ========================================================================== */
@media ( max-width: 767px ) {
	/* ---- variants for one device; m = d | t | m ---- */

	/* ---------------------------------------------------------------- arrows */

	.woo-variation-product-gallery.wvvp-vip.wvvp-m-arrows-always .woo-variation-gallery-slider-wrapper .wvg-slider-prev-arrow,
	.woo-variation-product-gallery.wvvp-vip.wvvp-m-arrows-always .woo-variation-gallery-slider-wrapper .wvg-slider-next-arrow {
		opacity: 1;
		transform: scale( 1 );
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-m-arrows-hidden .wvg-slider-prev-arrow,
	.woo-variation-product-gallery.wvvp-vip.wvvp-m-arrows-hidden .wvg-slider-next-arrow {
		display: none;
	}

	.woo-variation-product-gallery.wvvp-vip[class*="wvvp-m-arrows-corner"] .woo-variation-gallery-slider-wrapper .wvg-slider-prev-arrow,
	.woo-variation-product-gallery.wvvp-vip[class*="wvvp-m-arrows-corner"] .woo-variation-gallery-slider-wrapper .wvg-slider-next-arrow {
		top: auto;
		bottom: 12px;
		margin-top: 0;
		opacity: 1;
		transform: scale( 1 );
		border: 1px solid var( --wvvp-border );
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-m-arrows-corner-br .woo-variation-gallery-slider-wrapper .wvg-slider-prev-arrow,
	.woo-variation-product-gallery.wvvp-vip.wvvp-m-arrows-corner-br .woo-variation-gallery-slider-wrapper:hover .wvg-slider-prev-arrow {
		left: auto;
		right: calc( var( --wvvp-btn-size ) + 20px );
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-m-arrows-corner-br .woo-variation-gallery-slider-wrapper .wvg-slider-next-arrow,
	.woo-variation-product-gallery.wvvp-vip.wvvp-m-arrows-corner-br .woo-variation-gallery-slider-wrapper:hover .wvg-slider-next-arrow {
		left: auto;
		right: 12px;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-m-arrows-corner-bl .woo-variation-gallery-slider-wrapper .wvg-slider-prev-arrow,
	.woo-variation-product-gallery.wvvp-vip.wvvp-m-arrows-corner-bl .woo-variation-gallery-slider-wrapper:hover .wvg-slider-prev-arrow {
		right: auto;
		left: 12px;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-m-arrows-corner-bl .woo-variation-gallery-slider-wrapper .wvg-slider-next-arrow,
	.woo-variation-product-gallery.wvvp-vip.wvvp-m-arrows-corner-bl .woo-variation-gallery-slider-wrapper:hover .wvg-slider-next-arrow {
		right: auto;
		left: calc( var( --wvvp-btn-size ) + 20px );
	}

	/* ------------------------------------------------------------- counter */

	.woo-variation-product-gallery.wvvp-vip.wvvp-m-no-counter .wvvp-counter {
		display: none;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-m-counter-bottom-left .wvvp-counter {
		left: 12px;
		right: auto;
		top: auto;
		bottom: 12px;
		transform: none;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-m-counter-bottom-right .wvvp-counter {
		left: auto;
		right: 12px;
		top: auto;
		bottom: 12px;
		transform: none;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-m-counter-bottom-center .wvvp-counter {
		left: 50%;
		right: auto;
		top: auto;
		bottom: 12px;
		transform: translateX( -50% );
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-m-counter-top-left .wvvp-counter {
		left: 12px;
		right: auto;
		top: 12px;
		bottom: auto;
		transform: none;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-m-counter-top-right .wvvp-counter {
		left: auto;
		right: 12px;
		top: 12px;
		bottom: auto;
		transform: none;
	}

	/* Corner arrows and a same-side bottom counter would collide: flip it. */
	.woo-variation-product-gallery.wvvp-vip.wvvp-m-arrows-corner-br.wvvp-m-counter-bottom-right .wvvp-counter {
		right: auto;
		left: 12px;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-m-arrows-corner-bl.wvvp-m-counter-bottom-left .wvvp-counter {
		left: auto;
		right: 12px;
	}

	/* ---------------------------------------------------------- navigation */

	/* Dots-only / none: hide the strip (not remove — the vendor's asNavFor sync
	   must keep working) and give the slider the full width the strip occupied.
	   The vendor sets the slider to 80% / 100% depending on thumbnail position,
	   so both are reset here. */
	.woo-variation-product-gallery.wvvp-vip.wvvp-m-nav-dots .woo-variation-gallery-thumbnail-wrapper,
	.woo-variation-product-gallery.wvvp-vip.wvvp-m-nav-none .woo-variation-gallery-thumbnail-wrapper {
		display: none;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-m-nav-dots .woo-variation-gallery-container .woo-variation-gallery-slider-wrapper,
	.woo-variation-product-gallery.wvvp-vip.wvvp-m-nav-none .woo-variation-gallery-container .woo-variation-gallery-slider-wrapper {
		width: 100%;
		max-width: 100%;
		flex: 1 1 100%;
	}

	/* Dots are rendered by slick whenever any device wants them; show them only
	   where this device's setting asks. */
	.woo-variation-product-gallery.wvvp-vip.wvvp-m-nav-thumbnail .woo-variation-gallery-slider .slick-dots,
	.woo-variation-product-gallery.wvvp-vip.wvvp-m-nav-none .woo-variation-gallery-slider .slick-dots {
		display: none;
	}

	.woo-variation-product-gallery.wvvp-vip.wvvp-m-nav-dots .woo-variation-gallery-slider .slick-dots,
	.woo-variation-product-gallery.wvvp-vip.wvvp-m-nav-both .woo-variation-gallery-slider .slick-dots {
		display: flex;
	}
}