.product-category-slideshow {
	--space-between-slides: 16px;
	--cattegory-image-overflow: 20px;
	
	padding-top: var(--cattegory-image-overflow);
	margin: var(--default-gap) calc(-1 * var(--space-between-slides)) 0 calc(-1 * var(--space-between-slides)) !important;
	

	@media (max-width: 768px) {
		--space-between-slides: 8px;
	}

	.slick-list {
		overflow: visible;

		@media only screen and (min-width: 768px) and (max-width: 1312px) {
			padding-left: 24px;
			padding-right: 24px;
		}
	}

	.slick-slide {
		margin-right: var(--space-between-slides);
		margin-left: var(--space-between-slides);
	}

	.slick-arrow {
		height: 48px;
		width: 48px;
		border-radius: 100%;
		font-size: 0;
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-color: black !important;
		z-index: 1;

		@media (min-width: 768px) {
			opacity: 0 !important;
		}

		&:before {
			content: '';
		}
		
		&.slick-next {
			background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='12' viewBox='0 0 13 12' fill='none'%3E%3Cg clip-path='url(/wp-content/themes/z-company/blocks/productcatslideshow/%23clip0_495_2968)'%3E%3Cpath d='M9.63125 6.75H0.5V5.25H9.63125L5.43125 1.05L6.5 0L12.5 6L6.5 12L5.43125 10.95L9.63125 6.75Z' fill='%23FFFFFF'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_495_2968'%3E%3Crect width='12' height='12' fill='white' transform='translate(0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"), linear-gradient(310deg, rgba(56, 72, 64, 1) 0%, rgba(41, 70, 68, 1) 100%);
					
			@media only screen and (min-width: 768px) and (max-width: 1312px) {
				right: 0;
			}
		}

		&.slick-prev {
			background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='12' viewBox='0 0 13 12' fill='none' style='&%2310; transform: scaleX(-1);&%2310;'%3E%3Cg clip-path='url(/wp-content/themes/z-company/blocks/productcatslideshow/%23clip0_495_2968)'%3E%3Cpath d='M9.63125 6.75H0.5V5.25H9.63125L5.43125 1.05L6.5 0L12.5 6L6.5 12L5.43125 10.95L9.63125 6.75Z' fill='%23FFFFFF'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_495_2968'%3E%3Crect width='12' height='12' fill='white' transform='translate(0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"), linear-gradient(60deg, rgba(56, 72, 64, 1) 0%, rgba(41, 70, 68, 1) 100%);
			
			@media only screen and (min-width: 768px) and (max-width: 1312px) {
				left: 0;
			}
		}

		&.slick-next, &.slick-prev {
			border: 3px solid #4E6866;
			transition: none !important;
		}
	}

	&:hover .slick-arrow {
		opacity: 1 !important;
	}

	&.slick-dotted {
		padding-bottom: 56px;

		.slick-arrow {
			transform: translate(0, -44px);
		}

		.slick-dots {
			display: flex;
			flex-direction: row;
			left: 50%;
			transform: translate(-50%, 0);
			bottom: 0;
			border-radius: 35px;
			width: fit-content;
			overflow: hidden;
			width: 100px;
			height: 11px;

			& * {
				transition: none !important;
			}

			li {
				flex: 1;
				display: flex;
				margin: 0;
				width: auto;
				height: auto;

				button {
					background-color: #0C2B29;
					padding: 0;
					display: flex;
					flex: 1;
					height: auto;
					width: auto;

					&:before {
						display: none;
					}

					.slick-active & {
						background-color: var(--color-neongreen);
						border-radius: 0 35px 35px 0;
					}
				}

				&:has(~ li.slick-active) button {
					background-color: var(--color-neongreen);
				}

				&:last-child button {
					border-radius: 0 35px 35px 0;
				}
			}
		}
	}
}

.product-cat-slideshowitem.slick-slide {
	position: relative !important;
	display: flex !important;
	flex-direction: column;
	gap: 12px;
	position: relative;
	border-radius: 16px;
	background: rgba(0, 0, 0, 0.20);
	backdrop-filter: blur(25px);
	min-height: 140px;
	padding: 24px 72px 24px 24px;

	* {
		color: var(--color-white);
	}

	a {
		text-decoration: none;

		&:before {
			content: '';
			position: absolute;
			inset: 0;
		}
	}

	h5 {
		font-size: 24px;
		margin: 0;
		letter-spacing: -0.03em;
		display: flex;
		flex-direction: column;
		max-width: 42.76%;
	}

	.product-cat-slideshowitem-count {
		color: var(--color-neongreen);
		font-size: 10px;
		font-weight: 500;
		line-height: 1.2;
		text-transform: uppercase;
		margin-top: auto;
	}

	&:after {
		content: '';
		position: absolute;
		height: 32px;
		width: 32px;
		aspect-ratio: 1/1;
		border-radius: 100%;
		background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_495_2968)'%3E%3Cpath d='M9.63125 6.75H0.5V5.25H9.63125L5.43125 1.05L6.5 0L12.5 6L6.5 12L5.43125 10.95L9.63125 6.75Z' fill='%23103634'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_495_2968'%3E%3Crect width='12' height='12' fill='white' transform='translate(0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
		background-color: var(--color-white);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 12px;
		bottom: 24px;
		right: 24px;
	}
	
	& > picture,
	& > img {
		position: absolute;
		top: calc(-1 * var(--cattegory-image-overflow));
		right: -10px;
		height: 70%;
		width: 57.24%;
		bottom: 68px;
		transform: translate(0, 0);
        object-fit: contain;
	}

	&:hover {
		background-color: var(--color-light);
		
		* {
			color: var(--color-darkblue) !important;
		}
	}
	
	&:hover:after {
		background-color: var(--color-darkblue);
		background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_495_2968)'%3E%3Cpath d='M9.63125 6.75H0.5V5.25H9.63125L5.43125 1.05L6.5 0L12.5 6L6.5 12L5.43125 10.95L9.63125 6.75Z' fill='%23ffffff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_495_2968'%3E%3Crect width='12' height='12' fill='white' transform='translate(0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
	}

	&:hover > :is(picture, img) {
		transform: translate(0, -10px);
	}

	& > picture img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}