.product {
	.product-col {
		margin-bottom: 40px;

		@media (max-width: 576px) {
			padding: 0 20px 0 25px;
		}
	}

	.product-item {
		@media (max-width: 576px) {
			margin: auto;
			width: 100%;
		}

		.product-card {
			@media (max-width: 576px) {
				height: 132px;
			}
		}

		.product-link {
			@media (max-width: 576px) {
				display: flex;
				flex-direction: row;
				margin-top: 10px;
			}

			img {
				@media (max-width: 576px) {
					width: 112px;
					height: 90px;
					object-fit: cover;
					padding: 0;
				}
			}
		}

		.product-body {
			@media (max-width: 576px) {
				padding: 10px 0 0 10px;
				text-align: right;
			}

			.product-title {
				@media (max-width: 576px) {
					width: 240px;
				}
			}
		}

		.product-price {
			&.product-no-old-price {
				@media (max-width: 576px) {
					margin-top: 0;
				}
			}

			@media (max-width: 576px) {
				justify-content: flex-start;
			}
		}

		.product-no-price {
			@media (max-width: 576px) {
				margin: 0;
				text-align: start;
			}
		}
	}

	.product-footer {
		@media (max-width: 576px) {
			padding: 0;
		}

		&.product-call {
			@media (max-width: 576px) {
				margin-bottom: 5px;
			}
		}

		.product-basket {
			@media (max-width: 576px) {
				margin: 0 auto 7px;
			}
		}
	}

	.product-action-group {
		@media (max-width: 576px) {
			position: absolute;
			left: 40px;
			bottom: 48px;
		}
	}
}

.product-item {
	width: 270px;
	margin: 0 5px;
	// box-shadow: 0 0 15px rgba(98, 98, 98, 0.15);
	@media (max-width: 576px) {
		margin: auto;
	}

	.product-card {
		height: 433px;
		border: 0 none;
		position: relative;

		&.has-cart {
			border: 1px solid rgb(58 70 99 / 26%);
		}
	}

	.product-link {
		text-decoration: none;
		color: #546e7a;
		text-align: center;

		img {
			width: 235px;
			height: 235px;
			margin: auto;
			padding: 20px;
		}
	}

	.product-title {
		font-size: 15px;
		color: #546e7a;
		font-weight: bold;
		direction: rtl;
		text-align: right;
		width: 100%;
		display: inline-block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.product-price {
		display: flex;
		margin: 5px auto;
		align-items: center;
		justify-content: center;

		&.product-no-old-price {
			margin-top: 20px;
		}

		small {
			margin-right: 10px;
			font-weight: 300;
			font-size: 14px;
			text-align: center;
			color: #78909c;
		}

		span {
			font-weight: 900;
			font-size: 18px;
			text-align: center;
			color: #546e7a;
		}
	}

	.product-old-price {
		span,
		small {
			opacity: 0.5;
			text-decoration: line-through;
		}

		small {
			font-size: 12px;
		}

		span {
			font-size: 14px;
		}
	}

	.product-no-price {
		font-size: 12px;
		margin-top: 20px;
		display: block;
		text-align: center;
	}
}

.product-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	padding: 0 1rem 2rem;

	&.product-call {
		justify-content: center;
	}

	.product-basket {
		width: 130px;
		height: 31px;
		font-size: 14px;
		padding: 0;
	}
}

.product-notif {
	width: 160px;
	height: 31px;
	font-size: 14px;
	padding: 0;

	.icon {
		width: 18px !important;
		height: 18px !important;
		margin-left: 5px;
		color: #fff;
		margin-top: 2px;
	}
}

.product-action-group {
	direction: rtl;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;

	button {
		width: 30px;
		height: 30px;
		border: 1px solid rgba(0, 0, 0, 0.2);
		border-radius: 5px;
		padding: 0;

		.icon {
			width: 10px;
			height: 10px;
		}
	}

	span {
		width: 25px;
		text-align: center;
		font-weight: bold;
	}
}

.product-swiper {
	position: relative;

	@media (max-width: 576px) {
		padding: 0;
	}

	&:before,
	&:after {
		content: '';
		background-image: url('/assets/images/back-dots.png');
		width: 156px;
		height: 142px;
		position: absolute;

		@media (max-width: 576px) {
			background-size: cover;
			width: 97px;
			height: 102px;
		}
	}

	&:before {
		bottom: 19px;
		left: 31px;

		@media (max-width: 576px) {
			display: none;
		}
	}

	&:after {
		top: 2px;
		right: 23px;

		@media (max-width: 576px) {
			right: 0;
			top: 25px;
		}
	}

	.product-wrapper {
		margin-top: 60px;
		padding-bottom: 60px;

		@media (max-width: 576px) {
			margin-top: 60px;
		}

		h3 {
			margin-bottom: 40px;
			font-size: 25px;
			text-align: center;
			color: #455464;
			font-weight: bold;

			@media (max-width: 576px) {
				font-size: 16px;
			}
		}

		.swiper-slide {
			@media (max-width: 576px) {
				width: 300px !important;
			}
		}
	}

	.product-more-link {
		text-align: center;

		a {
			font-weight: 500;
			font-size: 18px;
			text-decoration-line: underline;
			color: #546e7a;

			@media (max-width: 576px) {
				font-size: 14px;
			}
		}
	}
}

.product-view-wrapper {
	@media (max-width: 576px) {
		margin: 10px 15px;
	}
}

.product-view-title {
	font-style: normal;
	font-weight: 500;
	font-size: 20px;
	color: #455464;
	position: relative;
	padding-bottom: 12px;
	margin-bottom: 40px;

	@media (max-width: 576px) {
		font-size: 16px;
		padding-bottom: 20px;
	}

	&:after {
		content: '';
		position: absolute;
		width: 89px;
		height: 4px;
		right: 0;
		bottom: 0;
		background: #48577c;
		border-radius: 2px;
	}
}

.product-view-price {
	font-style: normal;
	font-weight: bold;
	font-size: 25px;
	color: #455464;
	margin-bottom: 40px;
	display: block;

	@media (max-width: 576px) {
		font-size: 18px;
		margin-bottom: 20px;
	}

	.product-price {
		&.product-no-old-price {
			margin-top: 10px;
		}
	}

	.product-old-price {
		span,
		small {
			opacity: 0.5;
			text-decoration: line-through;
		}

		span {
			font-size: 18px;
		}
	}

	.product-no-price {
		font-size: 15px;
		margin-top: 20px;
		display: block;
	}
}

.product-view-groping {
	position: relative;
	margin-bottom: 15px;

	@media (max-width: 576px) {
		margin-bottom: 8px;
	}

	&:before {
		content: '•';
		color: #ff8852;
		font-size: 40px;
		position: absolute;
		line-height: 1;
	}

	span {
		font-weight: normal;
		font-weight: 400;
		font-size: 18px;
		text-align: center;
		color: #6f7e8d;
		margin-right: 30px;

		@media (max-width: 576px) {
			font-size: 16px;
		}
	}

	h3 {
		display: inline;
		width: 78px;
		height: 31px;
		font-weight: 700;
		font-size: 18px;
		line-height: 31px;
		text-align: center;
		color: #455464;

		@media (max-width: 576px) {
			font-size: 16px;
		}
	}
}

.product-view-description-wrapper {
	margin-top: 60px;

	@media (max-width: 576px) {
		display: none;
	}
}

.product-view-description-mobile {
	@media (min-width: 576px) {
		display: none;
	}
}

.product-view-description {
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	margin-bottom: -1px;

	.product-view-desc {
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;

		.product-view-text {
			padding: 10px;
			font-style: normal;
			font-weight: 400;
			font-size: 18px;
			color: #455464;

			@media (max-width: 576px) {
				font-size: 16px;
			}
		}
	}

	.product-view-accordion {
		height: 0;
		overflow: hidden;
		transition: all 0.4s ease-in-out;

		.product-view-accordion-wrapper {
			font-size: 14px;
			line-height: 25px;
			text-align: justify;
			padding: 10px;
			color: #455464;
		}
	}

	.product-details-table {
		width: 100%;
		tr {
			width: 100%;
			font-size: 15px;

			td {
				padding: 5px 10px;
			}

			td:nth-child(2) {
				text-align: left;
			}
		}
		tr:nth-child(odd) {
			background: #fff;
		}
	}
}

.product-view-action {
	position: relative;
	width: 100%;
	height: 100%;

	@media (max-width: 576px) {
		display: none;
	}

	.product-view-action-item {
		position: absolute;
		top: 470px;
		width: 100%;
	}
}

.product-view-action-mobile {
	margin: 40px auto;

	@media (min-width: 576px) {
		display: none;
	}

	.product-action-group {
		position: relative;
	}

	.product-footer {
		padding: 0;
		bottom: auto;
		position: relative;
		left: auto;

		.product-action-group {
			position: relative;
			left: auto;
			bottom: auto;
		}

		.product-basket {
			margin: 0;
			height: 40px;
			width: 150px;
		}
	}
}

.product-pagination {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: center;
	margin-top: 15px;
	margin-bottom: 20px;

	a,
	span {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ffffff;
		border: 1px solid #dfe3e8;
		border-radius: 4px;
		font-weight: bold;
		font-size: 14px;
		text-align: center;
		color: #455464;
		width: 32px;
		height: 32px;
		text-decoration: none;
		margin: 0 4px;
	}

	span {
		&.disabled {
			background: #919eab;
			opacity: 0.5;
			color: #c4cdd5;
		}
	}

	a {
		&.active,
		&:hover {
			border: 1px solid #4200ff;
		}
	}
}

.product-filter-back {
	background-color: rgba(0, 0, 0, 0.6);
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	display: none;

	&.active {
		display: block;
	}
}

.product-filter-menu {
	@media (max-width: 576px) {
		position: fixed;
		z-index: 100000;
		background-color: #f6f6f6;
		width: 100%;
		height: 100%;
		bottom: -100%;
		left: 0;
		transition: all 0.3s ease 0s;

		&.active {
			bottom: 0;
		}
	}

	.product-filter-menu-close {
		display: none;

		@media (max-width: 576px) {
			display: inline-block;
			outline: 0;
			border: 0;
			background-color: transparent;
			float: left;
		}
	}

	.product-filter-menu-done {
		display: none;

		@media (max-width: 576px) {
			display: block;
			width: 100%;
			text-align: center;
			position: absolute;
			left: 0;
			bottom: 40px;

			button {
				width: 90%;
				margin: auto;
			}
		}
	}
}

.product-filter-button-holder {
	@media (min-width: 576px) {
		display: none;
	}

	display: flex;
	flex-direction: row;
	margin: 0 8px 20px 13px;

	label {
		display: none;
	}

	.product-filter-button {
		width: 50px;
		height: 39px;
		background: #ffffff;
		border-radius: 8px;
		justify-content: center;
		align-items: center;
		display: flex;
		margin-left: 20px;
	}

	.product-filter-search {
		width: 100%;
	}

	.filter-search {
		background-color: #fff;
		border-radius: 8px;
		height: 38px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 10px;

		button {
			background-color: transparent;
			border: 1px solid transparent;

			.icon {
				width: 21px;
				margin-top: 3px;
			}

			&.search-reset {
				.icon {
					width: 100%;
					margin-left: 5px;
				}
			}
		}

		input {
			color: #000;
			font-size: 13px;
			border: 0 none;
			width: 100%;
			font-weight: 400;
			font-style: normal;

			&:focus {
				outline: none;
			}
		}
	}
}

.product-filter {
	margin: 40px 5px 50px -10px;
	padding-bottom: 15px;
	border-bottom: 1px solid rgb(135 135 135 / 30%);

	@media (max-width: 576px) {
		border: 0;
		margin: 50px auto 10px;
		width: 95%;
	}

	.product-filter-search {
		@media (max-width: 576px) {
			display: none;
		}
	}

	label {
		font-weight: normal;
		font-size: 15px;
		text-align: center;
		color: #455464;
		margin-bottom: 8px;
	}

	.filter-select {
		@media (max-width: 576px) {
			margin-bottom: 16px;
		}

		& > div {
			border: 0;
			border-radius: 8px;

			& > div:first-child {
				padding-left: 2px;

				& > div {
					font-style: normal;
					font-weight: 300;
					font-size: 15px;
					color: #78909c;

					& > div:first-child {
						padding: 2px 2px 2px 1px;

						& > span {
							font-size: 11px;
						}
					}

					& > div:last-child {
						padding: 0 2px 0;
					}
				}
			}

			& > div:last-child {
				& > span {
					display: none;
				}

				& > div {
					padding-right: 2px;
					padding-left: 4px;
				}
			}
		}
	}

	.filter-group {
	}

	.filter-option {
		font-size: 12px;
		color: #000;
		font-weight: 500;
		margin-right: 5px;
	}

	.filter-option-group {
		font-size: 12px;
		margin-right: 10px;
		color: #000;
		font-weight: 500;
	}

	.filter-search {
		background-color: #fff;
		border-radius: 8px;
		height: 38px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 10px;

		button {
			background-color: transparent;
			border: 1px solid transparent;

			.icon {
				width: 21px;
				margin-top: 3px;
			}

			&.search-reset {
				.icon {
					width: 100%;
					margin-left: 5px;
				}
			}
		}

		input {
			color: #000;
			font-size: 13px;
			border: 0 none;
			width: 100%;
			font-weight: 400;
			font-style: normal;

			&:focus {
				outline: none;
			}
		}
	}
}

.product-gallery {
	position: relative;

	@media (max-width: 576px) {
		margin: 25px auto;
	}

	.swiper-slide {
		background-size: cover;
		background-position: center;

		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.product-gallery-main {
		width: 100%;
		height: 350px;

		@media (max-width: 576px) {
			width: 80%;
			height: auto;
		}
	}

	.product-gallery-thumb {
		box-sizing: border-box;
		padding: 20px 0 10px;

		.swiper-wrapper {
			justify-content: center;
		}

		.swiper-slide {
			width: 100%;
			height: 100%;
			opacity: 0.6;

			img {
				display: block;
				width: 70px;
				height: 100%;
				object-fit: cover;
				border: 1px solid rgba(0, 0, 0, 0.2);
				border-radius: 11px;

				@media (max-width: 576px) {
					width: 60px;
				}
			}
		}

		.swiper-slide-thumb-active {
			opacity: 1;
		}
	}

	.swiper-prev,
	.swiper-next {
		position: absolute;
		background-repeat: no-repeat;
		width: 32px;
		height: 32px;
		color: #000;
		border-radius: 50%;
		z-index: 100;
		top: 40%;
		transform: translateY(-50%);
		cursor: pointer;

		&.swiper-button-disabled {
			opacity: 0.3;
		}
	}

	.swiper-next {
		background-image: url('/assets/images/arrow-gallery-right.png');
		right: -45px;

		@media (max-width: 576px) {
			right: 0;
		}
	}

	.swiper-prev {
		background-image: url('/assets/images/arrow-slider-left.png');
		left: -45px;

		@media (max-width: 576px) {
			left: 0;
		}
	}
}