@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=National+Park:wght@200..800&display=swap');

:root {
	--color-rose: #fc4a93;
	--color-rose-dim: #da677d;
	--color-rose-hover: #f13381;
	--color-cyan: #55afa5;
	--color-cyan-dark: #00bdbe;
	--color-cyan-light: #e4fffc;
	--color-green: #3aa39f;
	--color-yellow: #ffd000;
	--color-yellow-hover: #ffe365;
	--color-grey: #a2a3b1;
	--color-grey-light: #d9d9d9;
	--color-white: #fff;
	--color-black: #000;
	--color-input-bg: #eff2f5;
	--color-input-bg-2: #fbfdff;
	--color-input-border: #d3d6d9;
	--color-input-placeholder: #b7c0c9;
	--color-alert-success-bg: #ecfdf3;
	--color-alert-warning-bg: #fcebeb;
	--color-alert-warning-text: #a32d2d;

	--font-montserrat: 'Montserrat', sans-serif;
	--font-national-park: 'National Park', sans-serif;
}

* {
	margin: 0;
	padding: 0;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	background-repeat: no-repeat;
}

img,
iframe,
audio,
video,
canvas {
	display: block;
	height: auto;
	max-width: 100%;
}

input {
	outline: none;
}

input::placeholder {
	color: var(--color-input-placeholder);
}

ul,
ol {
	list-style-type: none;
}

body {
	font-family: var(--font-montserrat);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	background-color: var(--color-white);
	color: var(--color-black);
}

html,
body {
	&:has(#header-burger.active) {
		overflow: hidden;
	}
}

.overflow-hidden {
	overflow: hidden;
}

.container {
	margin-inline: auto;
	padding-inline: 1.5rem;
	width: 100%;
	max-width: 100%;

	/* sm — 576px */
	@media screen and (min-width: 576px) {
		width: calc(540px + 1.5rem * 2);
	}
	/* md — 768px */
	@media screen and (min-width: 768px) {
		width: calc(720px + 1.5rem * 2);
	}
	/* lg — 992px */
	@media screen and (min-width: 992px) {
		width: calc(960px + 1.5rem * 2);
	}
	/* xl — 1200px */
	@media screen and (min-width: 1200px) {
		width: calc(1140px + 1.5rem * 2);
	}
	/* xxl — 1400px */
	@media screen and (min-width: 1400px) {
		width: calc(1320px + 1.5rem * 2);
	}
	/* xxxl — 1600px */
	@media screen and (min-width: 1600px) {
		width: calc(1520px + 1.5rem * 2);
	}
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: 50px;
	text-decoration: none;
	height: 60px;
	border: none;
	border-radius: 20px;
	outline: none;
	background-color: var(--color-rose);
	font-family: var(--font-national-park);
	font-size: 20px;
	font-weight: 500;
	color: var(--color-white);
	transition:
		background-color 0.1s ease-in-out,
		box-shadow 0.1s ease-in-out;

	@media screen and (max-width: 1399px) {
		height: 50px;
		padding-inline: 40px;
		font-size: 18px;
	}

	@media screen and (max-width: 1199px) {
		height: 45px;
		padding-inline: 35px;
		font-size: 16px;
	}

	&:hover {
		background-color: var(--color-rose-hover);
		box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
		cursor: pointer;
	}
}

.section-title {
	margin-top: 12px;
	font-family: var(--font-national-park);
	font-size: 60px;
	font-weight: 700;
	color: var(--color-black);

	@media screen and (max-width: 1399px) {
		margin-top: 8px;
		font-size: 50px;
	}

	@media screen and (max-width: 1199px) {
		margin-top: 5px;
		font-size: 45px;
	}

	@media screen and (max-width: 991px) {
		font-size: 35px;
	}

	@media screen and (max-width: 575px) {
		margin-top: 0;
		font-size: 28px;
	}

	&:has(a) {
		display: flex;
		align-items: end;
		justify-content: space-between;
		gap: 20px;

		@media screen and (max-width: 767px) {
			flex-direction: column;
			align-items: start;
		}
	}

	a {
		font-family: var(--font-montserrat);
		font-size: 20px;
		font-weight: 400;
		color: var(--color-black);
		text-decoration-thickness: 1px;
		transform: translateY(-12px);
		transition: color 0.1s ease-in-out;

		@media screen and (max-width: 1399px) {
			font-size: 18px;
		}

		@media screen and (max-width: 575px) {
			font-size: 14px;
		}

		&:hover {
			color: var(--color-cyan);
			text-decoration: none;
		}
	}
}

.section-subtitle {
	font-size: 16px;
	color: var(--color-cyan);
	text-transform: uppercase;

	@media screen and (max-width: 991px) {
		font-size: 14px;
	}

	@media screen and (max-width: 575px) {
		font-size: 12px;
	}
}

/* HEADER */
header {
	.header-top {
		background-color: var(--color-black);

		@media screen and (max-width: 991px) {
			display: none;
		}

		.container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 86px;
			max-width: 100%;

			.address {
				text-decoration: none;
				font-size: 20px;
				font-weight: 300;
				color: var(--color-cyan-dark);
				transition: opacity 0.1s ease-in-out;

				&::before {
					content: url('../image/icon-location.svg');
					display: inline-block;
					vertical-align: middle;
					margin-right: 29px;
				}

				&:hover {
					opacity: 0.8;
				}
			}

			ul {
				display: flex;
				gap: 46px;

				li {
					a {
						text-decoration: none;
						font-size: 20px;
						font-weight: 300;
						color: var(--color-white);
						transition: color 0.1s ease-in-out;
						display: inline-block;

						&:hover {
							color: var(--color-cyan);
						}
					}
				}
			}
		}
	}

	.header-middle {
		border-bottom: 2px solid var(--color-grey-light);

		.container {
			height: 156px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 30px;

			@media screen and (max-width: 991px) {
				height: 120px;
			}

			.logo {
				max-width: 140px;

				@media screen and (max-width: 991px) {
					max-width: 120px;
				}

				@media screen and (max-width: 575px) {
					max-width: 100px;
				}
			}

			#search {
				position: relative;
				border: 2px solid var(--color-input-border);
				border-radius: 12px;

				@media screen and (min-width: 1600px) {
					width: 30%;
				}

				@media screen and (max-width: 575px) {
					width: 30%;
					flex-grow: 1;
				}

				input {
					display: block;
					height: 46px;
					width: 100%;
					background-color: var(--color-input-bg);
					border: none;
					border-radius: 10px;
					padding: 0 76px 0 16px;
					font-size: 20px;

					@media screen and (max-width: 1199px) {
						height: 41px;
					}

					@media screen and (max-width: 575px) {
						height: 35px;
						padding-right: 56px;
						font-size: 16px;
					}
				}

				button {
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					right: 0;
					top: 0;
					bottom: 0;
					width: 60px;
					border: none;
					background-color: var(--color-rose);
					border-top-right-radius: 10px;
					border-bottom-right-radius: 10px;
					transition: opacity 0.1s ease-in-out;

					@media screen and (max-width: 1199px) {
						width: 45px;

						img {
							max-width: 50%;
						}
					}

					@media screen and (max-width: 575px) {
						width: 40px;
					}

					&:hover {
						cursor: pointer;
						opacity: 0.8;
					}
				}
			}

			.link {
				@media screen and (max-width: 1199px) {
					padding: 0 25px;
				}

				@media screen and (max-width: 991px) {
					display: none;
				}
			}

			.telephones {
				@media screen and (max-width: 991px) {
					display: none;
				}
			}

			.buttons {
				@media screen and (max-width: 991px) {
					display: none;
				}
			}

			#header-burger {
				display: none;

				@media (max-width: 991px) {
					--w: 36px;
					--h: 4px;
					--gap: 7px;

					display: block;
					border: none;
					width: var(--w);
					height: calc(var(--h) * 3 + var(--gap) * 2);
					position: relative;
					background: none;
					border-radius: 2px;
					cursor: pointer;
					z-index: 20;

					&::before,
					&::after {
						content: '';
						display: block;
						width: var(--w);
						height: var(--h);
						position: absolute;
						background-color: var(--color-black);
						border-radius: 2px;
						transition:
							transform 0.3s ease,
							top 0.3s ease,
							bottom 0.3s ease,
							box-shadow 0.3s ease;
					}

					&::before {
						top: 0;
						box-shadow: 0 calc(var(--h) + var(--gap)) 0 var(--color-black);
					}

					&::after {
						bottom: 0;
					}

					&.active {
						&::before {
							top: 50%;
							transform: translateY(-50%) rotate(45deg);
							box-shadow: 0 0 0 transparent;
						}

						&::after {
							bottom: 50%;
							transform: translateY(50%) rotate(-45deg);
						}
					}

					&.active + ul {
						left: 0;
					}
				}
			}
		}

		&:has(#header-burger.active) + .header-bottom {
			display: block;
		}
	}

	.header-bottom {
		border-bottom: 2px solid var(--color-grey-light);

		@media screen and (max-width: 991px) {
			display: none;
			position: fixed;
			z-index: 10;
			padding: 30px 0 15px 0;
			inset: 0;
			background-color: #fff;
			overflow-y: auto;
		}

		.container {
			@media screen and (max-width: 991px) {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-evenly;
				gap: 20px;
				min-height: 100%;
			}

			.logo {
				display: none;

				@media screen and (max-width: 991px) {
					display: block;
				}

				img {
					max-width: 30%;
					margin-inline: auto;
				}
			}

			.menu-top-mobile {
				display: none;

				@media screen and (max-width: 991px) {
					display: block;

					ul {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						align-items: center;
						justify-content: center;

						li {
							flex: 50% 1 1;
							text-align: center;
						}

						a {
							font-size: 16px;
							color: var(--color-black);
							text-decoration: none;
						}
					}
				}
			}

			.address-mobile {
				display: none;
				font-size: 16px;

				@media screen and (max-width: 991px) {
					display: initial;
					color: var(--color-cyan-dark);
				}

				&::before {
					content: url(../image/icon-location.svg);
					display: inline-block;
					transform: translateY(7px);
					margin-right: 10px;
				}
			}

			.main-menu {
				display: flex;
				align-items: center;
				justify-content: space-between;

				@media screen and (max-width: 991px) {
					flex-direction: column;
					justify-content: center;
				}

				> li {
					position: relative;

					a {
						display: block;
						font-size: 28px;
						color: var(--color-black);
						text-decoration: none;
						transition: color 0.1s ease-in-out;
						padding: 28px 0;

						@media screen and (max-width: 1399px) {
							padding: 22px 0;
							font-size: 24px;
						}

						@media screen and (max-width: 1199px) {
							padding: 20px 0;
							font-size: 20px;
						}

						@media screen and (max-width: 991px) {
							padding: 5px 0;
						}

						li:hover > & {
							color: var(--color-rose);
						}
					}

					&:hover a::after {
						filter: brightness(0) saturate(100%) invert(44%) sepia(53%) saturate(3133%) hue-rotate(309deg) brightness(100%) contrast(98%);
						transform: translateY(5px) rotate(180deg);
					}

					@media screen and (min-width: 992px) {
						> a {
							li:has(ul) &::after {
								content: url('../image/icon-arrow-down.svg');
								margin-left: 10px;
								display: inline-block;
								transform: translateY(-2px);
								transition: transform 0.1s ease-in-out;
							}
						}
					}

					.child-menu {
						position: absolute;
						background-color: var(--color-white);
						min-width: 100%;
						border: 2px solid var(--color-grey-light);
						border-bottom-left-radius: 20px;
						border-bottom-right-radius: 20px;
						border-top-color: var(--color-white);
						padding: 10px 20px;
						transform: translateY(20px);
						transition:
							opacity 0.1s ease-in-out,
							visibility 0.1s ease-in-out,
							transform 0.1s ease-in-out;
						z-index: 100;
						opacity: 0;
						visibility: hidden;
						box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);

						@media screen and (min-width: 992px) {
							.main-menu li:hover & {
								opacity: 1;
								visibility: visible;
								transform: translateY(0);
							}
						}

						a {
							padding: 10px 0;
							white-space: nowrap;
						}
					}
				}
			}
		}

		@media screen and (min-width: 992px) {
			.link,
			.telephones,
			.buttons {
				display: none;
			}
		}
	}

	.link {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50px;
		padding: 0 65px;
		border-radius: 20px;
		background-color: var(--color-yellow);
		text-decoration: none;
		color: var(--color-black);
		font-size: 20px;
		font-weight: 600;
		transition:
			background-color 0.1s ease-in-out,
			box-shadow 0.1s ease-in-out;

		@media screen and (max-width: 1199px) {
			height: 45px;
		}

		@media screen and (max-width: 991px) {
			height: 40px;
			padding: 0 45px;
			font-size: 16px;
		}

		&:hover {
			background-color: var(--color-yellow-hover);
			box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
		}
	}

	.telephones {
		min-height: 51px;
		padding-left: 60px;
		background: url(../image/icon-telephone.svg) left center no-repeat;
		display: flex;
		flex-direction: column;

		@media screen and (max-width: 991px) {
			padding-left: 50px;
			background-size: 40px auto;
		}

		a {
			text-decoration: none;
			font-weight: 500;
			color: var(--color-black);
			transition: color 0.1s ease-in-out;
			white-space: nowrap;

			&:hover {
				color: var(--color-cyan);
			}
		}
	}

	.buttons {
		display: flex;
		align-items: center;
		gap: 28px;
		flex-shrink: 0;

		> a {
			position: relative;
			outline: none;

			&::after {
				width: 20px;
				height: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 0;
				right: 0;
				transform: translateX(50%) translateY(-50%);
				content: attr(data-count);
				background-color: var(--color-rose);
				border-radius: 50%;
				font-size: 12px;
				color: var(--color-white);
				line-height: 1;
			}

			&[data-count='0']::after {
				display: none;
			}

			&:hover img {
				filter: brightness(0) saturate(100%) invert(67%) sepia(35%) saturate(508%) hue-rotate(124deg) brightness(87%) contrast(87%);
			}

			img {
				@media screen and (max-width: 991px) {
					width: 36px;
				}
			}
		}
	}
}

/* HERO */
section.hero {
	height: 568px;
	padding-bottom: 30px;
	position: relative;
	margin-top: 0 !important;

	@media screen and (max-width: 1399px) {
		height: 450px;
	}

	@media screen and (max-width: 1199px) {
		height: 400px;
	}

	@media screen and (max-width: 767px) {
		height: 350px;
	}

	&::before {
		content: '';
		position: absolute;
		inset: 0;
		left: 32%;
		background-image: url('../image/hero.webp');
		background-position: left center;
		background-repeat: no-repeat;
		background-size: cover;
		pointer-events: none;
		z-index: -1;
	}

	.container {
		display: flex;
		align-items: center;
		height: 100%;

		h1 {
			margin-bottom: 11px;
			font-family: var(--font-national-park);
			font-size: 74px;
			font-weight: 700;
			text-transform: uppercase;

			@media screen and (max-width: 1399px) {
				font-size: 50px;
			}

			@media screen and (max-width: 1199px) {
				font-size: 40px;
			}

			@media screen and (max-width: 767px) {
				font-size: 35px;
				line-height: 1.2;
			}
		}

		p {
			margin-bottom: 48px;
			font-family: var(--font-national-park);
			font-size: 36px;
			font-weight: 600;
			text-transform: uppercase;
			color: var(--color-cyan);

			@media screen and (max-width: 1399px) {
				font-size: 26px;
			}

			@media screen and (max-width: 1199px) {
				font-size: 20px;
			}

			@media screen and (max-width: 767px) {
				font-size: 18px;
				line-height: 1.2;
			}

			span {
				color: var(--color-rose);
			}
		}

		.btn {
			padding-inline: 110px;
			font-family: var(--font-montserrat);
			font-size: 24px;
			text-transform: uppercase;

			@media screen and (max-width: 1399px) {
				padding-inline: 80px;
				font-size: 20px;
			}

			@media screen and (max-width: 1199px) {
				padding-inline: 50px;
				font-size: 18px;
			}

			@media screen and (max-width: 767px) {
				padding-inline: 40px;
				font-size: 16px;
			}
		}
	}
}

/* ADVANTAGES */
section.advantages {
	margin-top: -30px;

	.container {
		ul {
			display: flex;
			justify-content: space-evenly;
			gap: 20px;
			padding: 47px 133px;
			background-color: var(--color-black);
			border-radius: 20px;

			@media screen and (max-width: 1599px) {
				padding: 40px 50px;
			}

			@media screen and (max-width: 1199px) {
				padding: 40px;
			}

			@media screen and (max-width: 991px) {
				padding: 30px;
			}

			@media screen and (max-width: 767px) {
				flex-wrap: wrap;
			}

			li {
				display: flex;
				align-items: center;
				gap: 20px;

				@media screen and (max-width: 1199px) {
					gap: 10px;
				}

				@media screen and (max-width: 991px) {
					flex-direction: column;
				}

				@media screen and (max-width: 767px) {
					flex: calc(50% - 15px) 1 1;
				}

				.item-image {
					flex-shrink: 0;

					img {
						@media screen and (max-width: 1399px) {
							width: 60px;
						}

						@media screen and (max-width: 1199px) {
							width: 50px;
						}
					}
				}

				.item-title {
					font-family: var(--font-national-park);
					font-size: 28px;
					font-weight: 500;
					color: var(--color-white);
					text-align: center;

					@media screen and (max-width: 1599px) {
						font-size: 24px;
					}

					@media screen and (max-width: 1399px) {
						font-size: 22px;
					}

					@media screen and (max-width: 1199px) {
						font-size: 18px;
					}
				}

				.item-description {
					font-family: var(--font-montserrat);
					font-size: 16px;
					font-weight: 300;
					color: var(--color-white);
					text-align: center;

					@media screen and (max-width: 1199px) {
						font-size: 14px;
					}

					@media screen and (max-width: 767px) {
						font-size: 12px;
					}
				}
			}
		}
	}
}

/* HOME CATEGORIES */
section.home-categories {
	margin-top: 80px;

	@media screen and (max-width: 991px) {
		margin-top: 50px;
	}

	.container {
		.section-subtitle {
			color: var(--color-rose);
		}

		ul {
			display: flex;
			flex-wrap: wrap;
			gap: 20px;
			margin-top: 24px;

			li {
				flex: 0 0 calc((100% - 20px * 3) / 4);
				border-radius: 20px;
				aspect-ratio: 365/464;
				background-position: center;
				background-size: cover;
				transition: transform 0.1s ease-in-out;

				@media screen and (max-width: 991px) {
					flex: 0 0 calc((100% - 20px) / 2);
				}

				&:hover {
					/* transform: translateY(-10px); */
					transform: scale(1.03);
				}

				a {
					display: flex;
					align-items: end;
					justify-content: space-between;
					width: 100%;
					height: 100%;
					text-decoration: none;

					.item-content {
						flex: 100% 1 1;
						display: flex;
						justify-content: end;
						flex-direction: column;
						height: 50%;
						padding: 0 20px 20px;
						border-bottom-left-radius: 20px;
						border-bottom-right-radius: 20px;
						background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(217, 217, 217, 0.5) 33%, rgba(0, 0, 0, 1) 100%);

						h3 {
							font-family: var(--font-national-park);
							font-size: 32px;
							font-weight: 700;
							color: var(--color-white);
							line-height: 1.2;

							@media screen and (max-width: 1399px) {
								font-size: 28px;
							}

							@media screen and (max-width: 1199px) {
								font-size: 24px;
							}

							@media screen and (max-width: 575px) {
								font-size: 20px;
							}
						}

						p {
							margin-top: 4px;
							font-weight: 500;
							font-size: 16px;
							color: var(--color-cyan);

							@media screen and (max-width: 575px) {
								font-size: 14px;
							}

							li:nth-of-type(4n + 2) & {
								color: var(--color-rose);
							}

							li:nth-of-type(4n + 3) & {
								color: var(--color-yellow);
							}
						}
					}
				}
			}
		}
	}
}

/* CREDIT */
.credit-wrapper {
	padding: 40px;
	border-radius: 20px;
	background-color: var(--color-rose);
	display: flex;
	gap: 30px;

	@media screen and (max-width: 991px) {
		flex-direction: column;
	}

	.left-content {
		width: 40%;

		@media screen and (max-width: 991px) {
			width: auto;
			text-align: center;
		}

		h2 {
			font-family: var(--font-national-park);
			font-size: 60px;
			font-weight: 700;
			color: var(--color-white);

			@media screen and (max-width: 1399px) {
				font-size: 50px;
				line-height: 1.3;
			}

			@media screen and (max-width: 1199px) {
				font-size: 40px;
				line-height: 1.2;
			}

			@media screen and (max-width: 575px) {
				font-size: 30px;
			}
		}

		h3 {
			margin-top: 8px;
			font-family: var(--font-national-park);
			font-size: 45px;
			font-weight: 700;
			color: var(--color-yellow);

			@media screen and (max-width: 1399px) {
				font-size: 40px;
			}

			@media screen and (max-width: 1199px) {
				font-size: 30px;
			}

			@media screen and (max-width: 575px) {
				font-size: 24px;
			}
		}

		p {
			margin-top: 16px;
			font-size: 20px;
			font-weight: 500;
			color: var(--color-white);

			@media screen and (max-width: 1199px) {
				font-size: 16px;
			}
		}
	}

	.right-content {
		display: flex;
		align-items: center;

		@media screen and (max-width: 991px) {
			justify-content: center;
		}

		ul {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 20px;

			@media screen and (max-width: 767px) {
				grid-template-columns: 1fr;
			}

			li {
				border-radius: 20px;
				padding: 18px 28px;
				background-color: rgba(230, 230, 230, 0.2);
				border: 1px solid rgba(255, 255, 255, 0.4);
				box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
				text-align: center;

				@media screen and (max-width: 1199px) {
					padding: 12px;
				}

				h2 {
					font-family: var(--font-national-park);
					font-size: 60px;
					font-weight: 700;
					color: var(--color-yellow);

					@media screen and (max-width: 1399px) {
						font-size: 50px;
					}

					@media screen and (max-width: 1199px) {
						font-size: 40px;
					}

					li:nth-child(2) & {
						color: var(--color-cyan);
					}
				}

				p {
					font-size: 20px;
					font-weight: 500;
					color: var(--color-white);
					text-transform: uppercase;
					white-space: nowrap;

					@media screen and (max-width: 1399px) {
						font-size: 16px;
					}

					@media screen and (max-width: 1199px) {
						font-size: 14px;
					}
				}
			}
		}
	}
}

/* SPECIALS */
section.specials {
	margin-top: 80px;

	@media screen and (max-width: 991px) {
		margin-top: 50px;
	}
}

/* HTML MODULE */
section.html-module {
	margin-top: 80px;

	@media screen and (max-width: 991px) {
		margin-top: 50px;
	}

	.section-title {
		margin-bottom: 10px;
	}
}

/* SEO TEXT */
section.seo-text {
	.section-title {
		margin-bottom: 40px;
		font-size: 40px;
		text-align: center;

		@media screen and (max-width: 991px) {
			font-size: 32px;
		}

		@media screen and (max-width: 767px) {
			font-size: 28px;
			margin-bottom: 30px;
		}
	}

	.html-block-content {
		font-weight: 500;

		@media screen and (max-width: 991px) {
			font-size: 16px;
		}

		@media screen and (max-width: 767px) {
			font-size: 14px;
		}

		p:not(:last-child) {
			margin-bottom: 10px;
		}
	}
}

/* PRODUCTS LIST */
.products-list {
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
	row-gap: 36px;
	margin-top: 24px;

	.category-wrapper & {
		margin-top: 40px;
	}

	@media screen and (max-width: 575px) {
		margin-top: 15px;
	}

	> li {
		flex: 0 0 calc((100% - 20px * 3) / 4);
		word-wrap: break-word;
		transition: transform 0.1s ease-in-out;
		border-radius: 20px;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.category-wrapper:not(.search-wrapper) & {
			flex: 0 0 calc((100% - 20px * 2) / 3);

			@media screen and (max-width: 1199px) {
				flex: 0 0 calc((100% - 20px) / 2);
			}

			@media screen and (max-width: 575px) {
				flex: 0 0 100%;
			}
		}

		@media screen and (max-width: 1199px) {
			flex: 0 0 calc((100% - 20px) / 2);
		}

		@media screen and (max-width: 575px) {
			flex: 0 0 100%;
		}

		&:hover {
			/* transform: translateY(-10px); */
			box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
		}

		.product-image {
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			border: 1px solid var(--color-grey-light);
			border-bottom: none;
			position: relative;
			overflow: hidden;

			img {
				width: 100%;
				aspect-ratio: 365/277;
				object-fit: cover;
			}

			.badges {
				position: absolute;
				left: 20px;
				top: 20px;
				display: flex;
				flex-direction: column;
				align-items: start;
				gap: 5px;

				span {
					display: block;
					padding: 4px 12px;
					font-size: 16px;
					font-weight: 500;
					color: var(--color-white);
					text-transform: uppercase;
					border-radius: 9999px;
					background-color: var(--color-rose);

					@media screen and (max-width: 1399px) {
						font-size: 14px;
					}

					&.sale {
						background-color: var(--color-rose);
					}

					&.new {
						background-color: var(--color-yellow);
						color: var(--color-black);
					}

					&.top {
						background-color: var(--color-cyan);
					}
				}
			}

			.add-to-wishlist,
			.add-to-cart {
				display: none;
				position: absolute;

				@media screen and (max-width: 991px) {
					display: block;
				}

				li:hover & {
					display: block;
				}
			}
		}

		.product-info {
			padding: 24px 16px;
			border: 1px solid var(--color-grey-light);
			border-top: none;
			border-bottom-left-radius: 20px;
			border-bottom-right-radius: 20px;
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			a {
				font-size: 18px;
				font-weight: 500;
				color: var(--color-black);
				text-decoration: none;
				transition: color 0.1s ease-in-out;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				overflow: hidden;
				text-overflow: ellipsis;

				@media screen and (max-width: 1399px) {
					font-size: 16px;
				}

				&:hover {
					color: var(--color-rose);
				}
			}

			.price {
				margin-top: 17px;
				font-family: var(--font-national-park);
				font-size: 36px;
				font-weight: 700;
				line-height: 1.2;
				color: var(--color-cyan);

				@media screen and (max-width: 1399px) {
					font-size: 30px;
				}

				span {
					margin-left: 8px;
					font-size: 20px;
					font-weight: 500;
					color: var(--color-grey);
					text-decoration: line-through;

					@media screen and (max-width: 1399px) {
						font-size: 18px;
					}
				}
			}
		}
	}
}

/* Add to cart/wishlist buttons */
.add-to-wishlist,
.add-to-cart {
	display: block;
	right: 20px;
	width: 60px;
	height: 60px;
	background-color: var(--color-white);
	border-radius: 50%;
	border: none;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);

	@media screen and (max-width: 1399px) {
		width: 50px;
		height: 50px;
	}

	@media screen and (max-width: 1199px) {
		width: 45px;
		height: 45px;
	}

	&::before {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		background-size: 50% auto;
		filter: brightness(0) saturate(100%) invert(67%) sepia(35%) saturate(508%) hue-rotate(124deg) brightness(87%) contrast(87%);
		background-position: center;
		transition: filter 0.1s ease-in-out;
	}

	&:hover {
		cursor: pointer;

		&::before {
			filter: brightness(0) saturate(100%) invert(43%) sepia(86%) saturate(2846%) hue-rotate(312deg) brightness(107%) contrast(98%);
		}
	}
}

/* Product colors options */
.colors {
	display: flex;
	gap: 8px;
	margin-top: 17px;

	label {
		display: block;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		cursor: pointer;

		&:has(input:checked) {
			border: 3px solid var(--color-cyan);
		}

		input {
			display: none;
		}
	}
}

/* Add to cart/wishlist buttons */
.add-to-wishlist {
	top: 20px;

	&::before {
		transform: translateY(2px);
		background-image: url('../image/icon-wishlist.svg');
	}

	&.in-wishlist::before {
		background-image: url('../image/icon-wishlist-active.svg');
		filter: none !important;
	}
}

.add-to-cart {
	bottom: 20px;

	&::before {
		transform: translateX(-1px);
		background-image: url('../image/icon-cart.svg');
	}
}

/* BREADCRUMBS */
.breadcrumbs {
	display: flex;
	gap: 8px;
	margin-top: 40px;
	overflow-x: auto;

	@media screen and (max-width: 575px) {
		gap: 5px;
	}

	@media screen and (max-width: 1399px) {
		margin-top: 30px;
	}

	li {
		white-space: nowrap;

		a {
			color: var(--color-grey);
			text-decoration: none;

			@media screen and (max-width: 1399px) {
				font-size: 18px;
			}

			@media screen and (max-width: 575px) {
				font-size: 14px;
			}

			&:hover {
				text-decoration: underline;
			}

			li:last-child & {
				color: var(--color-black);
			}
		}

		&:not(:last-child)::after {
			content: url('../image/icon-arrow-down.svg');
			transform: rotate(-90deg);
			display: inline-block;
			margin-left: 8px;

			@media screen and (max-width: 575px) {
				transform: rotate(-90deg) scale(0.5);
				margin-left: 5px;
			}
		}
	}
}

/* CATEGORY */
.category-description {
	height: 343px;
	border-radius: 20px;
	margin-top: 28px;
	padding: 50px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	background-position: center;
	background-size: cover;
	background-color: var(--color-grey-light);

	@media screen and (max-width: 1399px) {
		height: 300px;
	}

	@media screen and (max-width: 767px) {
		padding: 50px 30px;
		height: auto;
	}

	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-image: linear-gradient(to left, rgba(217, 217, 217, 0.2) 39%, #161616 89%);

		@media screen and (max-width: 767px) {
			background-image: none;
			background-color: rgba(0, 0, 0, 0.5);
		}
	}

	> * {
		position: relative;
		z-index: 1;
	}

	h1 {
		font-family: var(--font-national-park);
		font-size: 60px;
		font-weight: 700;
		color: var(--color-white);
		line-height: 1.2;
		text-transform: capitalize;

		@media screen and (max-width: 1399px) {
			font-size: 50px;
		}

		@media screen and (max-width: 767px) {
			font-size: 40px;
		}
	}

	h2 {
		font-family: var(--font-national-park);
		font-size: 20px;
		font-weight: 700;
		color: var(--color-yellow);
		line-height: 1.2;
		text-transform: uppercase;

		@media screen and (max-width: 1399px) {
			font-size: 18px;
		}

		@media screen and (max-width: 767px) {
			font-size: 16px;
		}
	}

	.content {
		max-width: 35%;
		margin-top: 32px;
		font-size: 18px;
		font-weight: 400;
		color: var(--color-white);

		@media screen and (max-width: 1399px) {
			max-width: 45%;
			font-size: 16px;
		}

		@media screen and (max-width: 991px) {
			max-width: 80%;
		}

		@media screen and (max-width: 767px) {
			max-width: none;
			font-size: 14px;
		}
	}
}

.subcategories {
	margin-top: 80px;

	@media screen and (max-width: 991px) {
		margin-top: 50px;
	}

	.subcategories-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 10px;

		@media screen and (max-width: 767px) {
			flex-direction: column;
		}

		h2 {
			font-family: var(--font-national-park);
			font-size: 36px;
			font-weight: 700;

			@media screen and (max-width: 575px) {
				font-size: 28px;
			}
		}

		p {
			font-size: 18px;
			font-weight: 600;
			color: var(--color-rose);
			text-transform: uppercase;
		}
	}

	ul {
		display: flex;
		gap: 20px;
		margin-top: 14px;
		padding-top: 10px;
		overflow-x: auto;

		li {
			flex: 0 0 calc((100% - 20px * 5) / 6);
			aspect-ratio: 1;
			border-radius: 30px;
			border: 1px solid var(--color-input-placeholder);
			overflow: hidden;
			transition: transform 0.1s ease-in-out;

			@media screen and (max-width: 1599px) {
				flex: 0 0 calc((100% - 20px * 4) / 5);
			}

			@media screen and (max-width: 1399px) {
				flex: 0 0 calc((100% - 20px * 3) / 4);
			}

			@media screen and (max-width: 991px) {
				flex: 0 0 calc((100% - 20px * 2) / 3);
			}

			@media screen and (max-width: 767px) {
				flex: 0 0 calc((100% - 20px) / 2);
			}

			@media screen and (max-width: 479px) {
				flex: 0 0 70%;
			}

			&:hover {
				transform: translateY(-10px);
			}

			a {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				gap: 8px;
				width: 100%;
				height: 100%;
				text-decoration: none;
				position: relative;

				> span {
					position: absolute;
					left: 20px;
					top: 20px;
					font-size: 14px;
					font-weight: 500;
					color: var(--color-black);
				}

				img {
					width: 100%;
					aspect-ratio: 237/163;
					object-fit: cover;
				}

				p {
					flex-grow: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 10px;
					height: 56px;
					padding-bottom: 8px;
					padding-left: 20px;
					padding-right: 20px;
					font-family: var(--font-national-park);
					font-weight: 700;
					color: var(--color-black);

					@media screen and (max-width: 991px) {
						font-size: 16px;
					}

					&::after {
						content: url('../image/icon-arrow-down.svg');
						display: block;
						transform: rotate(-90deg);
					}

					span {
						display: -webkit-box;
						line-clamp: 2;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}
				}
			}
		}
	}
}

.category-wrapper {
	display: flex;
	gap: 30px;
	margin-top: 80px;
	margin-bottom: 80px;

	@media screen and (max-width: 991px) {
		flex-direction: column;
		gap: 0;
		margin-top: 50px;
	}

	aside {
		flex: 1 1 24%;

		@media screen and (max-width: 991px) {
			flex: auto;
		}
	}

	main {
		flex: 1 1 76%;

		@media screen and (max-width: 991px) {
			flex: auto;
		}

		.category-main-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 20px;

			@media screen and (max-width: 767px) {
				flex-direction: column-reverse;
			}

			.results-text {
				font-weight: 500;
				color: var(--color-grey);

				@media screen and (max-width: 1199px) {
					font-size: 18px;
				}
			}

			.category-sort {
				display: flex;
				align-items: center;
				gap: 20px;

				label {
					font-weight: 500;
					color: var(--color-grey);

					@media screen and (max-width: 1199px) {
						font-size: 18px;
					}
				}

				select {
					height: 60px;
					padding: 0 50px 0 20px;
					border: 1px solid var(--color-grey);
					border-radius: 20px;
					background-color: var(--color-white);
					outline: none;
					cursor: pointer;
					appearance: unset;
					background: url('../image/icon-arrow-down.svg') right 20px center no-repeat;
					font-family: var(--font-montserrat);
					font-size: 20px;

					@media screen and (max-width: 1199px) {
						height: 40px;
						padding: 0 40px 0 15px;
						font-size: 18px;
					}
				}
			}
		}

		.pagination {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 12px;
			flex-wrap: wrap;
			margin-top: 60px;

			li {
				a,
				span {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 8px;
					min-width: 36px;
					height: 36px;
					padding: 0 10px;
					border: 1px solid var(--color-grey-light);
					border-radius: 12px;
					font-size: 16px;
					font-weight: 500;
					color: var(--color-black);
					text-decoration: none;
				}

				a {
					&:hover {
						background-color: var(--color-black);
						color: var(--color-white);

						&::before,
						&::after {
							filter: brightness(0) invert(1);
						}
					}
				}

				&.active span {
					background-color: var(--color-black);
					color: var(--color-white);
				}

				&:first-child span,
				&:last-child span {
					color: var(--color-grey-light);
					pointer-events: none;

					&::before,
					&::after {
						filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(107%) hue-rotate(224deg) brightness(94%) contrast(80%);
					}
				}

				&:first-child a::before,
				&:first-child span::before,
				&:last-child a::after,
				&:last-child span::after {
					content: '';
					display: inline-block;
					width: 11px;
					height: 11px;
					background: url('../image/icon-arrow-down.svg') center center no-repeat;
					background-size: contain;
				}

				&:first-child a::before,
				&:first-child span::before {
					transform: rotate(90deg);
				}

				&:last-child a::after,
				&:last-child span::after {
					transform: rotate(-90deg) translateX(1px);
				}
			}
		}
	}
}

.text-empty {
	padding: 50px 0;
	color: var(--color-grey);
	text-align: center;
}

/* SEARCH */
.search-filter {
	margin-top: 30px;

	h1 {
		font-family: var(--font-national-park);
	}

	.search-filter-row {
		margin-block: 20px;

		label {
			display: block;
			margin-bottom: 5px;
			font-size: 16px;
			font-weight: 400;
			text-transform: uppercase;
			text-transform: none;

			&.search-filter-checkbox {
				display: inline-flex;
				align-items: center;
				gap: 8px;

				&:has(input:disabled) {
					opacity: 0.5;
				}

				input {
					display: inline-block;
					appearance: none;
					width: 23px;
					height: 23px;
					border-radius: 3px;
					border: 2px solid var(--color-grey-light);
					vertical-align: middle;

					&:checked {
						border-color: transparent;
						background: var(--color-cyan) url(../image/icon-checkmark.svg) center center no-repeat;
						background-size: 75% auto;
					}
				}
			}
		}

		input[type='text'],
		select {
			display: block;
			width: 400px;
			height: 48px;
			max-width: 100%;
			padding-inline: 16px;
			border: 2px solid var(--color-input-border);
			border-radius: 12px;
			background-color: var(--color-input-bg-2);
			font-family: var(--font-montserrat);
			font-size: 16px;
			font-weight: 300;
			outline: none;

			@media screen and (max-width: 575px) {
				width: 100%;
			}
		}

		select {
			appearance: none;
			padding-right: 35px;
			background: url(../image/icon-arrow-down.svg) right 10px center no-repeat;
		}
	}

	@media screen and (max-width: 575px) {
		.btn {
			width: 100%;
		}
	}
}

/* PRODUCT */
.product-detail {
	padding-bottom: 21px;

	.product-top {
		margin-top: 80px;
		display: flex;
		gap: 30px;

		@media screen and (max-width: 991px) {
			margin-top: 40px;
			flex-direction: column;
			gap: 0;
		}

		.main-category {
			margin-bottom: 12px;
			font-size: 18px;
			font-weight: 600;
			color: var(--color-rose);
			text-transform: uppercase;

			@media screen and (max-width: 1199px) {
				font-size: 16px;
			}

			@media screen and (max-width: 991px) {
				display: none;
			}

			&.main-category-mobile {
				display: none;

				@media screen and (max-width: 991px) {
					display: block;
				}
			}
		}

		.product-name {
			font-family: var(--font-national-park);
			font-size: 48px;
			font-weight: 700;
			line-height: 1;

			@media screen and (max-width: 1199px) {
				font-size: 40px;
			}

			@media screen and (max-width: 991px) {
				display: none;
			}

			@media screen and (max-width: 575px) {
				font-size: 32px;
			}

			&.product-name-mobile {
				display: none;

				@media screen and (max-width: 991px) {
					display: block;
					margin-bottom: 30px;
				}
			}
		}

		.product-image {
			flex: 1 1 49%;
			max-width: 49%;
			border-radius: 20px;
			overflow: hidden;

			@media screen and (max-width: 991px) {
				flex: 1 1 100%;
				max-width: none;
			}

			.owl-carousel {
				/* border-radius: 20px; */
				/* overflow: hidden; */
				height: 100%;

				.owl-stage-outer {
					height: 100%;

					.owl-stage {
						height: 100%;

						.owl-item {
							height: 100%;

							div {
								height: 100%;

								a {
									height: 100%;

									img {
										height: 100%;
									}
								}
							}
						}
					}
				}
			}

			.owl-item div a {
				display: block;
				/* border-radius: 20px; */
				/* overflow: hidden; */

				img {
					aspect-ratio: 750/675;
					/* object-fit: contain; */
					object-fit: cover;
				}
			}

			.owl-prev,
			.owl-next {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 60px;
				height: 60px;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				background: var(--color-white);
				border-radius: 50%;
				transition: background-color 0.1s ease-in-out;
				box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);

				@media screen and (max-width: 1399px) {
					width: 50px;
					height: 50px;
				}

				@media screen and (max-width: 1199px) {
					width: 45px;
					height: 45px;
				}

				&:hover {
					background: var(--color-yellow);

					&::before {
						filter: brightness(0) invert(1);
					}
				}

				&::before {
					display: block;
					content: '';
					width: 30px;
					height: 30px;
					background: url('../image/icon-arrow-down.svg') center center no-repeat;
					background-size: contain;
					filter: brightness(0) saturate(100%) invert(59%) sepia(61%) saturate(299%) hue-rotate(124deg) brightness(93%) contrast(91%);

					@media screen and (max-width: 1399px) {
						width: 25px;
						height: 25px;
					}

					@media screen and (max-width: 1199px) {
						width: 20px;
						height: 20px;
					}
				}

				span {
					display: none;
				}
			}

			.owl-prev {
				left: 12px;

				&::before {
					transform: rotate(90deg) translateY(2px);
				}
			}

			.owl-next {
				right: 12px;

				&::before {
					transform: rotate(-90deg) translateY(2px);
				}
			}

			.owl-dots {
				position: absolute;
				left: 12px;
				right: 12px;
				bottom: 24px;
				display: flex;
				justify-content: center;
				gap: 10px;
				flex-wrap: wrap;

				.owl-dot {
					width: 15px;
					height: 15px;
					display: flex;
					align-items: center;
					justify-content: center;
					background: var(--color-white);
					border-radius: 50%;
					box-shadow: 0 0 7px rgba(0, 0, 0, 0.7);

					&.active span {
						width: 13px;
						height: 13px;
						display: block;
						background: var(--color-cyan);
						border-radius: 50%;
					}
				}
			}
		}

		.product-info {
			flex: 1 1 51%;

			.product-price-actions {
				display: flex;
				justify-content: space-between;
				align-items: start;
				column-gap: 30px;
				flex-wrap: wrap;
				margin-top: 32px;

				@media screen and (max-width: 1399px) {
					column-gap: 15px;
				}

				@media screen and (max-width: 1199px) {
					margin-top: 20px;
					justify-content: start;
					row-gap: 20px;
				}

				.product-price {
					@media screen and (max-width: 1199px) {
						flex: 1 1 100%;
					}

					p {
						font-family: var(--font-national-park);
						font-size: 48px;
						font-weight: 700;
						line-height: 1;
						color: var(--color-cyan);

						@media screen and (max-width: 1199px) {
							font-size: 40px;
						}

						@media screen and (max-width: 575px) {
							font-size: 32px;
						}
					}

					span {
						display: block;
						margin-top: 5px;
						font-family: var(--font-national-park);
						font-size: 20px;
						font-weight: 500;
						color: var(--color-grey);
						text-decoration: line-through;

						@media screen and (max-width: 1199px) {
							font-size: 16px;
						}
					}
				}

				.product-buttons {
					display: flex;
					align-items: center;
					gap: 30px;

					@media screen and (max-width: 1399px) {
						column-gap: 15px;
					}

					#button-cart {
						cursor: pointer;
					}

					.add-to-wishlist {
						border: 1px solid var(--color-grey);
						box-shadow: none;

						&.in-wishlist {
							border-color: var(--color-rose);
						}

						&::before {
							filter: brightness(0);
							background-size: 40% auto;
							text-shadow: 0 0 1px #000;
						}

						&:hover {
							border-color: var(--color-rose);

							&::before {
								filter: brightness(0) saturate(100%) invert(50%) sepia(22%) saturate(7249%) hue-rotate(307deg) brightness(98%) contrast(102%);
							}
						}
					}
				}

				.product-price-text {
					margin-top: 5px;
					font-size: 20px;
					font-weight: 500;
					color: var(--color-grey);

					@media screen and (max-width: 767px) {
						font-size: 16px;
					}

					span {
						color: var(--color-black);
					}
				}
			}

			hr {
				display: block;
				height: 1px;
				border: 0;
				border-top: 1px solid var(--color-grey-light);
				margin: 20px 0 14px 0;
				padding: 0;
			}

			.product-options {
				.control-label {
					font-family: var(--font-national-park);
					font-size: 24px;
					font-weight: 600;

					@media screen and (max-width: 575px) {
						font-size: 20px;
					}
				}

				.colors {
					margin-top: 20px;

					label {
						width: 50px;
						height: 50px;
						border-radius: 20px;

						@media screen and (max-width: 575px) {
							width: 40px;
							height: 40px;
						}
					}
				}
			}

			.block-title {
				font-family: var(--font-national-park);
				font-size: 24px;
				font-weight: 600;

				@media screen and (max-width: 575px) {
					font-size: 20px;
				}
			}

			.product-financing {
				ul {
					margin-top: 20px;
					display: flex;
					align-items: center;
					gap: 8px;

					img {
						aspect-ratio: 1;
						max-width: 50px;
						max-height: 50px;
						border-radius: 35%;

						@media screen and (max-width: 575px) {
							max-width: 40px;
							max-height: 40px;
						}
					}
				}
			}

			.product-characteristics-statuses {
				display: flex;
				align-items: end;
				justify-content: space-between;
				gap: 30px;

				@media screen and (max-width: 767px) {
					flex-direction: column;
					align-items: start;
					gap: 0;
				}

				.product-characteristics {
					.block-title {
						margin-bottom: 15px;
					}

					.product-characteristics-list {
						display: inline-block;

						li {
							display: flex;
							padding: 5px 0;

							p {
								font-size: 18px;
								font-weight: 500;

								&:first-child {
									margin-right: 15px;
								}

								&:last-child {
									color: var(--color-grey);
								}
							}

							&.sizes {
								flex-direction: column;

								p:first-child {
									margin-right: 0;
								}

								.product-sizes {
									display: flex;

									div {
										position: relative;
										padding-right: 24px;

										&:not(:last-child)::after {
											content: 'X';
											display: block;
											font-size: 16px;
											position: absolute;
											right: 7px;
											bottom: 0;
										}

										p:first-child {
											font-size: 12px;
											font-weight: 400;
											color: var(--color-rose);
										}

										p:last-child {
											font-size: 16px;
											font-weight: 400;
											color: var(--color-black);
										}
									}
								}
							}
						}
					}
				}

				.product-statuses {
					display: flex;
					flex-direction: column;
					gap: 8px;
					margin-top: 15px;

					.alert {
						padding: 5px 15px;
						gap: 10px;
						box-shadow: none;
						font-size: 12px;
						font-weight: 600;
						line-height: normal;

						@media screen and (max-width: 1199px) {
							font-weight: 500;
						}

						.icon::before {
							width: 16px;
							height: 16px;
						}

						&.alert-success {
							color: var(--color-cyan);
							background-color: rgba(85, 175, 165, 0.3);
						}
					}
				}
			}
		}
	}

	.product-bottom {
		margin-top: 63px;

		@media screen and (max-width: 767px) {
			margin-top: 40px;
		}

		.product-description {
			margin-top: 32px;
			font-size: 18px;

			@media screen and (max-width: 767px) {
				margin-top: 20px;
			}

			h3 {
				margin-top: 20px;
				margin-bottom: 28px;
				font-family: var(--font-national-park);
				font-size: 24px;
				font-weight: 700;

				&:first-child {
					margin-top: 0;
				}
			}

			ul {
				list-style-type: disc;
				padding-left: 20px;
			}
		}
	}
}

/* Product quantity */
.product-quantity {
	margin-left: auto;

	@media screen and (max-width: 1199px) {
		margin-left: 0;
	}

	.quantity-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 60px;
		border: 1px solid var(--color-grey);
		border-radius: 20px;

		@media screen and (max-width: 1399px) {
			height: 50px;
		}

		@media screen and (max-width: 1199px) {
			height: 45px;
		}

		button {
			background: none;
			border: none;
			cursor: pointer;
			padding: 0 16px;
			font-size: 30px;
			color: var(--color-black);
			transition: color 0.1s ease-in-out;

			&:first-child {
				padding: 0 10px 0 16px;
			}

			&:last-child {
				padding: 0 16px 0 10px;
			}

			&:hover {
				color: var(--color-rose);
			}
		}

		input {
			background: none;
			border: none;
			text-align: center;
			font-family: var(--font-national-park);
			font-size: 20px;
			color: var(--color-black);
		}
	}
}

.product-related {
	margin-top: 30px;

	h2 {
		font-family: var(--font-national-park);
		font-size: 40px;
		font-weight: 700;

		@media screen and (max-width: 575px) {
			font-size: 30px;
		}
	}
}

/* CONTACTS & MAP */
section.contacts-map {
	margin-top: 80px;
	margin-bottom: -80px;

	@media screen and (max-width: 991px) {
		margin-top: 50px;
	}

	.contacts-map-wrapper {
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		overflow: hidden;
		display: grid;
		grid-template-columns: 43fr 57fr;

		@media screen and (max-width: 767px) {
			grid-template-columns: 1fr;
		}

		.contacts {
			padding: 75px 30px 50px;
			background-color: var(--color-yellow);
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;

			@media screen and (max-width: 1199px) {
				padding: 50px 30px 30px;
			}

			@media screen and (max-width: 767px) {
				order: 2;
				padding: 30px;
			}

			h2 {
				margin-bottom: 20px;
				font-family: var(--font-national-park);
				font-size: 32px;
				font-weight: 600;
				text-transform: uppercase;

				@media screen and (max-width: 1199px) {
					font-size: 28px;
				}

				@media screen and (max-width: 575px) {
					font-size: 24px;
				}
			}

			.address,
			.telephones,
			.open {
				font-size: 20px;
				font-weight: 600;
				text-transform: uppercase;
				padding-left: 50px;
				margin-block: 15px;
				display: flex;
				flex-direction: column;
				position: relative;

				@media screen and (max-width: 1199px) {
					margin-block: 10px;
					font-size: 18px;
				}

				@media screen and (max-width: 575px) {
					font-size: 16px;
				}

				&::before {
					content: '';
					width: 32px;
					height: 32px;
					display: block;
					position: absolute;
					filter: brightness(0);
					left: 0;
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;

					@media screen and (max-width: 575px) {
						width: 28px;
						height: 28px;
					}
				}

				a {
					text-decoration: none;
					font-weight: 600;
					color: var(--color-black);
					white-space: nowrap;

					&:hover {
						text-decoration: underline;
					}
				}
			}

			.address {
				&::before {
					background-image: url('../image/icon-location.svg');
				}
			}

			.telephones {
				&::before {
					background-image: url('../image/icon-telephone.svg');
				}
			}

			.open {
				font-weight: 600;
				color: var(--color-black);
				white-space: nowrap;

				&::before {
					background-image: url('../image/icon-time.svg');
				}
			}
		}

		.map {
			@media screen and (max-width: 767px) {
				height: 250px;
			}

			iframe {
				height: 100% !important;
			}
		}
	}
}

/* CONTENT PAGE */
#content-page {
	margin-block: 30px;

	h1 {
		margin-bottom: 15px;
		font-family: var(--font-national-park);
	}

	h2 {
		margin-bottom: 10px;
		font-family: var(--font-national-park);
	}

	h3 {
		margin-bottom: 10px;
		font-family: var(--font-national-park);
	}

	.content-page-text {
		p:not(:last-child) {
			margin-bottom: 10px;
		}

		ul {
			padding-left: 20px;
			list-style-type: disc;
		}

		ol {
			padding-left: 20px;
			list-style-type: decimal;
		}

		a {
			color: var(--color-cyan-dark);
			transition: opacity 0.1s ease-in-out;

			&:hover {
				opacity: 0.8;
			}
		}

		img {
			display: inline-block;
		}

		.contacts-page-wrapper {
			display: flex;
			gap: 30px;

			@media screen and (max-width: 991px) {
				flex-direction: column;
			}

			.store-info {
				flex: 1 1 50%;
			}

			form {
				flex: 1 1 50%;

				.form-group {
					&:not(:last-of-type) {
						margin-bottom: 15px;
					}

					label {
						display: block;
						margin-bottom: 5px;
						font-size: 16px;
						font-weight: 400;
						text-transform: uppercase;
						text-transform: none;

						&.search-filter-checkbox {
							display: inline-flex;
							align-items: center;
							gap: 8px;

							&:has(input:disabled) {
								opacity: 0.5;
							}

							input {
								display: inline-block;
								appearance: none;
								width: 23px;
								height: 23px;
								border-radius: 3px;
								border: 2px solid var(--color-grey-light);
								vertical-align: middle;

								&:checked {
									border-color: transparent;
									background: var(--color-cyan) url(../image/icon-checkmark.svg) center center no-repeat;
									background-size: 75% auto;
								}
							}
						}
					}

					input[type='text'],
					textarea {
						display: block;
						width: 400px;
						height: 48px;
						max-width: 100%;
						padding-inline: 16px;
						border: 2px solid var(--color-input-border);
						border-radius: 12px;
						background-color: var(--color-input-bg-2);
						font-family: var(--font-montserrat);
						font-size: 16px;
						font-weight: 300;
						outline: none;

						@media screen and (max-width: 575px) {
							width: 100%;
						}
					}

					textarea {
						height: 150px;
						padding-block: 10px;
						resize: vertical;
					}

					.error {
						margin: 5px 0 0 16px;
						font-size: 14px;
						color: red;
					}
				}

				.buttons {
					margin-top: 20px;

					@media screen and (max-width: 575px) {
						.btn {
							width: 100%;
						}
					}
				}
			}
		}
	}
}

/* FOOTER */
footer {
	margin-top: 80px;
	padding-top: 58px;
	background-color: var(--color-black);

	.footer-top {
		display: flex;
		gap: 30px;
		justify-content: space-between;
		padding-bottom: 62px;

		@media screen and (max-width: 991px) {
			flex-direction: column;
			align-items: center;
			text-align: center;
		}

		.logo {
			max-width: 237px;

			@media screen and (max-width: 1399px) {
				max-width: 200px;
			}

			a {
				img {
					padding: 32px;
					background-color: var(--color-white);
				}
			}

			.footer-logo-text {
				margin-top: 14px;
				font-size: 12px;
				font-weight: 600;
				color: var(--color-grey-light);
			}
		}

		.footer-menu {
			ul {
				li {
					a {
						font-size: 20px;
						font-weight: 300;
						color: var(--color-white);
						text-decoration: none;
						line-height: 1.4;

						@media screen and (max-width: 1199px) {
							font-size: 18px;
						}

						&:hover {
							text-decoration: underline;
						}
					}

					&:not(:last-child) {
						margin-bottom: 4px;
					}
				}
			}
		}

		.contacts {
			.contacts-wrapper {
				.address,
				.telephones,
				.open {
					font-size: 20px;
					font-weight: 300;
					text-transform: uppercase;
					padding-left: 45px;
					margin-block: 28px;
					display: flex;
					flex-direction: column;
					position: relative;
					color: var(--color-white);

					@media screen and (max-width: 1399px) {
						margin-block: 10px;
						font-size: 18px;
					}

					@media screen and (max-width: 575px) {
						font-size: 16px;
					}

					&::before {
						content: '';
						width: 25px;
						height: 25px;
						display: block;
						position: absolute;
						filter: brightness(0) invert(1);
						left: 0;
						top: 2px;
						background-size: contain;
						background-position: center;
						background-repeat: no-repeat;
					}

					a {
						text-decoration: none;
						font-weight: 300;
						color: var(--color-white);
						white-space: nowrap;

						&:hover {
							text-decoration: underline;
						}
					}
				}

				.address {
					&::before {
						background-image: url('../image/icon-location.svg');
					}
				}

				.telephones {
					&::before {
						background-image: url('../image/icon-telephone.svg');
					}

					@media screen and (max-width: 991px) {
						text-align: left;
					}
				}

				.open {
					white-space: nowrap;

					&::before {
						background-image: url('../image/icon-time.svg');
					}
				}

				.social-links {
					display: flex;
					gap: 25px;
					margin-top: 33px;

					@media screen and (max-width: 991px) {
						justify-content: center;
					}

					li {
						a {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 67px;
							height: 67px;
							border-radius: 50%;
							border: 1px solid var(--color-cyan);

							@media screen and (max-width: 1399px) {
								width: 50px;
								height: 50px;
							}

							&:hover {
								img {
									filter: brightness(0) saturate(100%) invert(83%) sepia(7%) saturate(2952%) hue-rotate(119deg) brightness(79%) contrast(73%);
								}
							}

							img {
								max-width: 70%;
								max-height: 70%;
							}
						}
					}
				}
			}
		}

		.footer-menu p,
		.contacts p {
			margin-bottom: 20px;
			font-family: var(--font-national-park);
			font-size: 24px;
			font-weight: 600;
			color: var(--color-white);
			text-transform: uppercase;

			@media screen and (max-width: 1399px) {
				font-size: 20px;
			}
		}
	}

	.footer-bottom {
		padding: 22px 0 30px;
		border-top: 1px solid var(--color-grey-light);

		.copyright {
			font-size: 16px;
			font-weight: 600;
			color: var(--color-white);
			text-align: center;
		}

		a {
			color: var(--color-white);
			text-decoration: underline;

			@media screen and (max-width: 1399px) {
				font-size: 14px;
			}

			&:hover {
				text-decoration: none;
			}
		}
	}
}

@keyframes slideLeft {
	0% {
		right: -100%;
	}

	100% {
		right: 15px;
	}
}

/* ALERTS */
.alert {
	padding: 12px 16px;
	border-radius: 20px;
	background-color: var(--color-alert-success-bg);
	display: flex;
	align-items: center;
	gap: 16px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
	font-family: var(--font-national-park);
	font-weight: 500;
	line-height: 1.1;

	body > & {
		position: fixed;
		top: 101px;
		right: 15px;
		z-index: 99999;
		animation: slideLeft 0.5s;
		max-width: 450px;

		@media screen and (max-width: 991px) {
			top: 15px;
		}

		@media screen and (max-width: 575px) {
			max-width: none;
			width: calc(100vw - 15px * 2);
		}
	}

	.popup & {
		box-shadow: none;
	}

	&.alert-success {
		background-color: var(--color-alert-success-bg);
		border: 1px solid var(--color-cyan-dark);
	}

	&.alert-info {
		background-color: var(--color-yellow);
		color: var(--color-black);

		.icon::before {
			background-image: url('../image/icon-attention.svg');
		}
	}

	&.alert-warning {
		background-color: var(--color-alert-warning-bg);
		border: 1px solid var(--color-rose-dim);
		color: var(--color-alert-warning-text);

		& .icon::before {
			background-color: var(--color-alert-warning-text);
			background-image: url('../image/icon-attention.svg');
		}
	}

	.icon {
		display: flex;
		align-items: center;

		&::before {
			content: '';
			width: 23px;
			height: 23px;
			display: block;
			border-radius: 50%;
			background: url('../image/icon-checkmark.svg') center center no-repeat;
			background-color: var(--color-cyan);
			background-size: 65% auto;
		}
	}

	.content {
		margin-right: auto;
		font-size: 14px;

		@media screen and (max-width: 1199px) {
			font-size: 12px;
		}

		p {
			font-family: var(--font-national-park);
			font-size: 20px;
			font-weight: 500;
		}

		a {
			color: var(--color-black);
		}

		p + a {
			font-size: 14px;
			color: var(--color-black);
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	.buttons {
		display: flex;
		align-items: center;

		a {
			font-family: var(--font-national-park);
			font-size: 14px;
			font-weight: 600;
			color: var(--color-white);
			text-decoration: none;
			background-color: var(--color-black);
			border-radius: 9999px;
			padding: 5px 25px;

			&:hover {
				opacity: 0.7;
			}
		}
	}
}

/* POPUP */
.popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-block: 30px;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 9999;
	display: none;
	overflow-y: auto;

	&.active {
		display: flex;
	}

	.popup-content {
		background-color: var(--color-white);
		padding: 80px;
		border-radius: 20px;
		max-width: 1365px;
		width: 95%;
		position: relative;
		margin: auto;

		&:has(.checkout-step-finish.checkout-step-active) {
			padding: 60px;
			max-width: 485px !important;

			.close-popup {
				top: 60px;
				right: 60px;
			}
		}

		@media screen and (max-width: 767px) {
			padding: 40px;
		}

		.popup-title {
			font-family: var(--font-national-park);
			font-size: 32px;
			font-weight: 700;
			margin-bottom: 32px;

			span {
				margin-left: 15px;
				font-size: 15px;
				font-weight: 400;
				color: var(--color-grey);
				text-transform: uppercase;
			}
		}

		.close-popup {
			position: absolute;
			top: 80px;
			right: 80px;
			width: 40px;
			height: 40px;
			background-color: transparent;
			border: none;
			border-radius: 50%;
			cursor: pointer;

			@media screen and (max-width: 767px) {
				top: 40px;
				right: 40px;
			}

			&::before,
			&::after {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				width: 20px;
				height: 2px;
				background-color: var(--color-black);
				transform-origin: center;
			}

			&::before {
				transform: translate(-50%, -50%) rotate(45deg);
			}

			&::after {
				transform: translate(-50%, -50%) rotate(-45deg);
			}
		}
	}
}

/* CART - POPUP */
.cart-wrapper {
	display: flex;
	justify-content: space-between;
	column-gap: 70px;

	@media screen and (max-width: 1199px) {
		flex-direction: column;
		row-gap: 30px;
	}

	.cart-left {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.cart-products {
			display: flex;
			flex-direction: column;
			gap: 26px;

			li {
				display: flex;
				justify-content: space-between;
				column-gap: 36px;

				@media screen and (max-width: 767px) {
					flex-direction: column;
					align-items: center;

					&:not(:last-child) {
						padding-bottom: 20px;
						border-bottom: 1px solid var(--color-grey);
					}
				}

				&.empty-li {
					text-align: center;
					justify-content: center;
					color: var(--color-grey);
				}

				.cart-product-image {
					flex-shrink: 0;

					img {
						width: 160px;
						aspect-ratio: 1;
						object-fit: cover;
						border-radius: 20px;

						@media screen and (max-width: 1199px) {
							width: 130px;
						}
					}
				}

				.cart-product-info {
					margin-right: auto;

					@media screen and (max-width: 767px) {
						margin-right: 0;
					}

					.cart-product-name {
						@media screen and (max-width: 767px) {
							margin-top: 10px;
						}

						a {
							font-family: var(--font-national-park);
							font-size: 24px;
							font-weight: 500;
							color: var(--color-black);
							text-decoration: none;

							@media screen and (max-width: 1199px) {
								font-size: 18px;
							}

							&:hover {
								text-decoration: underline;
							}
						}
					}

					.cart-product-options {
						margin-top: 10px;

						p {
							font-size: 16px;
							font-weight: 500;

							span {
								margin-right: 5px;
								color: var(--color-grey);
							}
						}
					}

					.cart-quantity-remove {
						display: flex;
						align-items: center;
						column-gap: 60px;
						margin-top: 20px;

						@media screen and (max-width: 991px) {
							column-gap: 20px;
						}

						@media screen and (max-width: 767px) {
							flex-direction: column;
							row-gap: 15px;
						}

						.product-quantity {
							margin-left: 0;
						}

						.btn-remove {
							background: none;
							border: none;
							cursor: pointer;
							font-family: var(--font-montserrat);
							font-size: 16px;
							font-weight: 400;
							letter-spacing: 0.1px;
							color: var(--color-rose-dim);

							&:hover {
								text-decoration: underline;
							}
						}
					}
				}

				.cart-product-price {
					font-size: 20px;
					font-weight: 600;

					@media screen and (max-width: 767px) {
						margin-top: 10px;
					}
				}
			}
		}

		.btn-continue {
			display: inline-block;
			margin-top: 32px;
			margin-right: auto;
			font-size: 20px;
			color: var(--color-black);

			@media screen and (max-width: 1199px) {
				font-size: 18px;
			}

			@media screen and (max-width: 767px) {
				margin-left: auto;
			}

			&:hover {
				text-decoration: none;
			}
		}
	}

	.cart-right {
		flex-basis: 32%;

		.cart-total {
			border-radius: 20px;
			border: 1px solid var(--color-grey);
			padding: 32px;

			.cart-total-title {
				margin-bottom: 32px;
				font-family: var(--font-national-park);
				font-size: 22px;
				font-weight: 600;
				line-height: 1.1;

				@media screen and (max-width: 1199px) {
					font-size: 20px;
				}
			}

			.cart-total-items {
				.cart-total-item {
					margin-block: 24px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 16px;
					font-weight: 300;

					@media screen and (max-width: 767px) {
						margin-block: 10px;
					}

					&:last-child {
						margin-top: 0;
						padding-top: 32px;
						border-top: 1px solid var(--color-grey);

						@media screen and (max-width: 767px) {
							padding-top: 15px;
							margin-bottom: 20px;
						}
					}

					&:nth-last-child(2) {
						margin-bottom: 0;
						padding-bottom: 32px;

						@media screen and (max-width: 767px) {
							padding-bottom: 15px;
						}
					}

					span[data-value='Free'] {
						color: var(--color-green);
					}
				}
			}

			.btn {
				width: 100%;
				height: 52px;
				font-family: var(--font-montserrat);
				font-size: 16px;
				font-weight: 400;
				cursor: pointer;
				white-space: nowrap;

				@media screen and (max-width: 1199px) {
					height: 45px;
				}
			}
		}
	}
}

/* CHECKOUT - POPUP */
#checkout-popup {
	.popup-content {
		max-width: 940px;

		.popup-title {
			.checkout-back {
				width: 20px;
				height: 20px;
				background: url('../image/icon-arrow-down.svg') center center no-repeat;
				border: none;
				transform: rotate(90deg);
				cursor: pointer;
			}

			span {
				text-transform: none;
			}
		}

		#checkout-form {
			#checkout-steps {
				.checkout-step {
					display: none;

					&.checkout-step-active {
						display: block;
					}

					&.checkout-step-finish {
						text-align: center;

						i {
							display: inline-flex;
							align-items: center;
							justify-content: center;
							width: 70px;
							height: 70px;
							background-color: var(--color-cyan-light);
							border-radius: 50%;

							&::before {
								display: block;
								content: '';
								width: 30px;
								height: 30px;
								background: url('../image/icon-checkmark.svg') center center no-repeat;
								background-size: 90% auto;
								filter: brightness(0) saturate(100%) invert(60%) sepia(57%) saturate(341%) hue-rotate(124deg) brightness(94%) contrast(83%);
							}
						}

						h1 {
							margin-top: 20px;
							font-family: var(--font-national-park);
							font-size: 32px;
							font-weight: 700;
						}

						p {
							margin-top: 15px;
							font-size: 20px;
							color: var(--color-grey);
							line-height: 1.25;
						}
					}

					.checkout-block {
						--gap: 20px;

						display: flex;
						flex-wrap: wrap;
						gap: var(--gap);
						margin-bottom: 24px;
						padding: 24px 20px;
						border: 1px solid var(--color-grey);
						border-radius: 20px;

						.checkout-block-title {
							flex-basis: 100%;
							font-family: var(--font-national-park);
							font-size: 24px;
							font-weight: 600;
							color: var(--color-cyan);
						}

						.checkout-form-input-wrap {
							width: calc((100% - var(--gap)) / 2);

							@media screen and (max-width: 767px) {
								width: 100%;
							}

							&.checkout-form-input-wrap-delivery-address,
							&.checkout-form-input-wrap-card-number {
								width: 100%;
							}

							&.checkout-form-input-wrap-delivery-method {
								padding: 16px;
								border: 2px solid var(--color-input-border);
								border-radius: 12px;
								cursor: pointer;
								display: grid;
								grid-template-columns: auto auto;
								grid-template-rows: auto;
								grid-template-areas:
									'label radio'
									'p radio';

								@media screen and (max-width: 1199px) {
									padding: 10px 16px;
								}

								&:has(input:checked) {
									background-color: var(--color-cyan-light);
								}

								p:first-child {
									font-size: 20px;
									font-weight: 500;
									text-transform: none;
									grid-area: label;
								}

								p:nth-child(1) {
									margin-top: 3px;
									font-size: 16px;
									font-weight: 400;
									grid-area: p;
								}

								> div {
									grid-area: radio;
									display: flex;
									align-items: center;
									justify-content: end;

									p {
										margin-bottom: 0;
										width: 33px;
										height: 33px;
										border: 1px solid var(--color-cyan);
										border-radius: 50%;
										cursor: pointer;

										&:has(input:checked) {
											background-color: var(--color-cyan);
										}

										input {
											display: none;
										}
									}
								}
							}

							label {
								display: block;
								margin-bottom: 5px;
								font-size: 16px;
								font-weight: 400;
								text-transform: uppercase;
							}

							input,
							select {
								display: block;
								width: 100%;
								height: 48px;
								padding-inline: 16px;
								border: 2px solid var(--color-input-border);
								border-radius: 12px;
								background-color: var(--color-input-bg-2);
								font-family: var(--font-montserrat);
								font-size: 16px;
								font-weight: 300;
								outline: none;

								@media screen and (max-width: 1199px) {
									height: 45px;
								}

								.checkout-form-input-wrap:has(.error:not(:empty)) & {
									border-color: red;
								}

								&:focus {
									border-color: var(--color-cyan);
								}

								&::placeholder {
									color: var(--color-grey-light);
								}
							}

							select {
								appearance: none;
								padding-right: 35px;
								background: url('../image/icon-arrow-down.svg') right 10px center no-repeat;
							}

							.error {
								margin-top: 5px;
								padding-inline: 16px;
								font-size: 13px;
								color: red;

								&:empty {
									margin-top: 0;
								}
							}
						}
					}

					.checkout-step-btns {
						margin-top: 36px;
						display: flex;
						justify-content: end;

						@media screen and (max-width: 767px) {
							.btn {
								width: 100%;
							}
						}
					}
				}
			}
		}
	}
}

/* XDSTICKERS */
.xdstickers_wrapper {
	position: absolute;
	z-index: 999;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 1.75;
}

.xdstickers_wrapper.position_upleft {
	top: 20px;
	left: 20px;
	right: auto;
}

.xdstickers_wrapper.position_upright {
	top: 5px;
	right: 15px;
	left: auto;
}

.xdstickers {
	padding: 0 10px;
	margin-bottom: 5px;
	border-radius: 9999px;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}

.xdsticker_sale {
	background-color: #fc4a94;
	color: #ffffff;
}

.xdsticker_bestseller {
	background-color: #55afa5;
	color: #ffffff;
}

.xdsticker_novelty {
	background-color: #ffd000;
	color: #000000;
}