.woocommerce-product-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	@media (min-width: 1024px) {
		flex-wrap: nowrap;
	}

	& .slider-container {
	    position: relative;
	    width: 100%;

	    &.main-slider-wrapper {
	    	flex: 0 0 100%;
		    max-width: 100%;
		    align-self: flex-start;
		    margin: auto;

		    @media (min-width: 1024px) {
		    	flex: 0 0 100%;
		    	max-width: calc(100% - 132px);
		    }

		    & .swiper-slide {
		    	align-items: center;
  				border-radius: 10px;
		    	display: flex;
		    	justify-content: center;
		    	height: auto;

		    	& .image-wrapper {
		    		& img {
		    			width: 100%;
  						border-radius: 10px;
		    		}
		    	}
		    }

		    & .main-slider-button {
		    	align-items: center;
		    	background-color: transparent;
		    	display: flex;
		    	color: #a5a5a5;
		    	font-size: 24px;
		    	justify-content: center;
		    	height: 50px;
		    	line-height: 1;
		    	opacity: 0;
		    	pointer-events: none;
		    	transition: all .25s ease;
		    	width: 50px;
		    	&::after {
		    		display: none;
		    	}

		    	&.swiper-button-prev {
		    		transform: translateX(-30px);
		    	}

		    	&.swiper-button-next {
		    		transform: translateX(30px);
		    	}
		    }

		    &:hover {
		    	& .main-slider-button {
		    		opacity: 1;
		    		pointer-events: unset;
		    		transform: translateX(0);
		    	}
		    }

		    .acpd-lightbox-trigger-wrapper {
			    position: absolute;
			    bottom: 0;
			    inset-inline-start: 0;
			    z-index: 3;
			    display: flex;
			    align-items: flex-start;
			    flex-direction: column;
			    gap: 10px;
			    padding: 15px;
			    transition: all .3s ease;

			    & .acpd-lightbox-trigger {
				    align-items: center;
				    background-color: #FFFFFF;
				    border-radius: calc(18px * 2);
				    border: 1px solid white;
				    box-shadow: 0 0 5px rgba(0,0,0,0.08);
				    color: #333333;
				    display: flex;
				    flex-wrap: nowrap;
				    height: calc(18px * 2.8);
				    justify-content: flex-start;
				    min-width: calc(18px * 2.8);
				    overflow: hidden;
				    padding: 0;

				    & .action-icon {
					    display: inline-flex;
					    align-items: center;
					    justify-content: center;
					    width: calc(18px * 2.8);
					    height: calc(18px * 2.8);
					}

					& .action-text {
					    max-width: 0;
					    white-space: nowrap;
					    font-size: 90%;
					    font-weight: 600;
					    transition: padding 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15),max-width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15);
					}

					&:hover {
						background-color: white;
						color: #333;
						& .action-text {
							padding-inline-end: calc(18px * 1.4);
  							max-width: 280px;
						}
					}
				}

			}
	    }
	    &.thumbs-slider-wrapper {
	    	display: flex;
	    	flex-direction: row;
	    	gap: 0;
	    	flex: 1 1 100%;
	    	padding-inline: 45px;

		    @media (min-width: 1024px) {
		    	flex: 0 0 122px;
		    	flex-direction: column;
		    	gap: 2px;
			    order: -1;
			    height: 543px;
			    padding-inline: 0;
		    }

		    & .single-gallery-thumbs {
		    	height: auto;
		    	@media (min-width: 1024px) {
		    		height: 543px;
		    	}
		    }

		    & .thumbs-button-wrapper {
		    	display: flex;
		    	justify-content: center;
		    	align-items: center;
		    	gap: 5px;

		    	& .thumbs-button {
		    		--wd-arrow-size: 40px;
		    		--wd-arrow-width: 100%;
		    		--wd-arrow-offset-h: calc(var(--wd-arrow-width, var(--wd-arrow-size, 50px)) / -1);
		    		align-items: center;
		    		background-color: #f7f7f7;
		    		border-radius: calc(10px / 1.5);
		    		color: #333;
		    		cursor: pointer;
		    		display: inline-flex;
		    		flex: 1 1 auto;
		    		height: 40px;
		    		justify-content: center;
		    		line-height: 1;
		    		transition: all .25s ease;
		    		width: 100%;

			    	@media (max-width: 1024px) {
			    		position: absolute;
			    		top: 50%;
			    		width: 40px;
	  					z-index: 250;
	  					background-color: transparent;

	  					&.thumbs-button-prev {
	  						left: 0;
	  						transform: translateY(-50%) rotate(-90deg);
	  					}

	  					&.thumbs-button-next {
	  						right: 0;
	  						transform: translateY(-50%) rotate(-90deg);
	  					}
			    	}
		    	}
		    }
	    }
	}
}