/* WooCommerce/product-collection styles */

.img-mask-1-1,
.wc-block-components-product-image video,
.wc-block-components-product-image img,
ul.wc-block-product-template > li:nth-child(odd) .wc-block-components-product-image img,
ul.wc-block-product-template > li:nth-child(even) .wc-block-components-product-image img {
     -webkit-mask-image: url("../images/mask-1-1-2.svg");
    mask-image: url("../images/mask-1-1-2.svg");
	
	-webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
/*
ul.wc-block-product-template > li:nth-child(odd) .wc-block-components-product-image img {
    -webkit-mask-image: url("../images/mask-1-1-2.svg");
    mask-image: url("../images/mask-1-1-2.svg");
}

ul.wc-block-product-template > li:nth-child(even) .wc-block-components-product-image img {
    -webkit-mask-image: url("../images/mask-1-1-3.svg");
    mask-image: url("../images/mask-1-1-3.svg");
}
*/


/* ==========================================================================
   WooCommerce Product Collection
   Product image hover
   ========================================================================== */

   /* ==========================================================================
   WooCommerce Product Collection - Product Image Hover
   ========================================================================== */

.wc-block-components-product-image > a {
	position: relative;
	display: block;
}

/* Secondary image */
.wc-block-components-product-image__secondary {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover !important;
    aspect-ratio: 1;
	opacity: 0;
	z-index: 1;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

/* Keep sale badges and other inner content above the hover image */
.wc-block-components-product-image__inner-container {
	position: relative;
	z-index: 2;
}

/* Show secondary image on hover */
div:not(.product-scroll-image-swap) .wc-block-components-product-image > a:hover
.wc-block-components-product-image__secondary {
	opacity: 1;
}

/* Keyboard accessibility */
div:not(.product-scroll-image-swap) .wc-block-components-product-image > a:focus-visible
.wc-block-components-product-image__secondary {
	opacity: 1;
}


/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {

	div:not(.product-scroll-image-swap) .wc-block-components-product-image__secondary {
		transition: none;
	}

}


/* Don't rely on hover on touch devices */
@media (hover: none) {

	div:not(.product-scroll-image-swap) .wc-block-components-product-image__secondary {
		opacity: 0;
	}

}



/* ==========================================================================
WooCommerce: scroll-driven product image swap
========================================================================== */


.product-scroll-image-swap .wc-block-product {
  view-timeline: --product-image-scroll block;
}


/* --------------------------------------------------
   Primary image
-------------------------------------------------- */

.product-scroll-image-swap
.wc-block-components-product-image > a > img:not(.wc-block-components-product-image__secondary) {

	animation: product-primary-scroll linear both;
	animation-timeline: --product-image-scroll;

	/* Desktop */
	animation-range: cover 20% cover 80%;
}

/* --------------------------------------------------
   Secondary image
-------------------------------------------------- */

.product-scroll-image-swap
.wc-block-components-product-image > a > img.wc-block-components-product-image__secondary {

	animation: product-secondary-scroll linear both;
	animation-timeline: --product-image-scroll;

	/* Desktop */
	animation-range: cover 20% cover 80%;
}


/* --------------------------------------------------
   Mobile
-------------------------------------------------- */

@media (max-width: 781px) {

	.product-scroll-image-swap
	.wc-block-components-product-image > a > img:not(.wc-block-components-product-image__secondary),

	.product-scroll-image-swap
	.wc-block-components-product-image > a > img.wc-block-components-product-image__secondary {

		animation-range: cover 10% cover 90%;
	}

}


/* --------------------------------------------------
   Keyframes
-------------------------------------------------- */


@keyframes product-primary-scroll {
  0%, 35% {
    opacity: 1;
  }

  42%, 85% {
    opacity: 0;
  }

  92%, 100% {
    opacity: 1;
  }
}

@keyframes product-secondary-scroll {
  0%, 35% {
    opacity: 0;
  }

  42%, 85% {
    opacity: 1;
  }

  92%, 100% {
    opacity: 0;
  }
}


@media (prefers-reduced-motion: reduce) {
  .product-scroll-image-swap .wc-block-components-product-image > a > img {
    animation: none !important;
  }

  .product-scroll-image-swap .wc-block-components-product-image > a > img:not(.wc-block-components-product-image__secondary) {
    opacity: 1;
  }

  .product-scroll-image-swap .wc-block-components-product-image > a > img.wc-block-components-product-image__secondary {
    opacity: 0;
  }
}