.variation{
	.form-label{
		margin: 0 0 8px;
		text-align: left;
	}
	select{
		cursor: pointer;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		display: block;
		width: auto;
		padding: 16px 48px 16px 20px;
		background: var(--gray-200) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="%23969ca1" d="m10.0002 11.4467 4.8667-4.86668.9333.94666-5.8 5.80672-5.8-5.80005.93333-.94667z"/></svg>') right 20px center no-repeat;
		border: 0;
		border-radius: 99px;
		font-family: var(--ff-realist);
		font-size: 16px;
		font-weight: 300;
		color: #000;

		@media (max-width: 639px){
			width: 100%;
		}
	}
}

.product-gallery{
	counter-reset: img-counter -5;
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;

	@media (max-width: 639px){
		grid-template-columns: repeat( 4, 1fr );
	}

	a{
		counter-increment: img-counter;
		display: block;
		aspect-ratio: 1;
		padding: 24px;
		background: var(--gray-200);
		border-radius: 8px;

		@media (max-width: 767px){
			padding: 6px;
		}

		img{
			width: 100%;
			height: 100%;
			object-fit: cover;
			mix-blend-mode: multiply;
		}

		&:first-child{
			grid-column: span 2;
			grid-row: span 2;
			padding: 48px;

			@media (max-width: 639px){
				grid-row: span 4;
				grid-column: span 4;
				padding: 12px;
			}
		}

		&:nth-child(n+5):not([href="#"]):not(:nth-child(5):nth-last-child(2)){
			pointer-events: none;
			opacity: 0;
			position: absolute;
			bottom: 0;
			right: 0;
			width: 50px;
		}

		&[href="#"]{
			display: none;

			&:nth-child(n+5){
				display: flex;
				align-items: center;
				justify-content: center;
				color: var(--gray-800);
				text-decoration: none;

				&::after{
					content: "+" counter(img-counter);
				}
			}
		}
	}
}

.product-gallery + .badges{
	position: absolute;
	z-index: 2;
	top: 16px;
	left: 16px;
}

.ratings-wrapper{
	display: flex;
	flex-direction: column;
	margin: 34px 0 48px;

	.rating-item{
		display: flex;
		align-items: center;

		span{
			width: 20px;
		}
	}
}

.progress{
	position: relative;
	width: 100%;
	height: 8px;
	background: var(--gray-200);
	border-radius: 9px;

	&::before{
		content: '';
		width: var(--w);
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		bottom: 0;
		background: var(--gray-500);
		border-radius: 9px;
	}
}

#addReviewModal{
	--bs-modal-width: 800px;
	--bs-modal-padding: 64px;
	--bs-modal-bg: var(--gray-50);

	@media (max-width: 1023px){
		--bs-modal-padding: 48px;
	}

	@media (max-width: 767px){
		--bs-modal-padding: 24px;
	}

	.modal-content{
		border-radius: 8px;
	}

	.modal-header{
		gap: 24px;
		background: #fff;
		padding: 40px;

		@media (max-width: 1023px){
			padding: 30px;
		}

		@media (max-width: 767px){
			padding: 20px;
		}
	}

	.btn-close{
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		min-width: 40px;
		aspect-ratio: 1;
		margin: 0 0 0 auto;
		padding: 0;
		background: #fff;
		border: 0;
		border-radius: 99px;
		box-shadow: 0 2px 4px 0 rgba(0,0,0,.2), 0 0 10px 2px rgba(0,0,0,.1);

		&::before{
			width: 16px;
		}
	}

	.rating-stars{
		margin: 0 0 40px;

		input{
			width: 34px;
		}
	}
}