:root {
	touch-action: manipulation;
	
	--font: "PP Neue Montreal";
	--text-color: #333131;
	--title-color: #161616;
	
	--white-50: #F3EFEB;
	--white-64: #FAF7F4A3;
	--white-100: #FAF7F4;
	
	--black-400: #333131;
	--black-600: #201F1F;
	
	--brown-10: #F3EFEB;
	--brown-50: #E8DDCF;
	--brown-100: #D8C1A2;
	--brown-400: #A37E49;
	
	--green-10: #E3E7E1;
	--green-50: #CFDBC3;
	--green-100: #B9C7A8;
	--green-500: #1F4B26;
	--green-700: #102F13;
	
	--section-space: 200px;
}

* {
	box-sizing: border-box;
	scroll-behavior: smooth;
	scroll-margin-top: 100px;
}

body {
	font: 400 16px/1.5 var(--font), sans-serif;
	background-color: var(--white-50);
	color: var(--text-color);
	margin: 0;
	padding-top: 8px;
	-webkit-text-size-adjust: 100%;
	
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	
	&.overflow {
		overflow: hidden;
		
		@media (min-width: 1200px) {
			padding-right: 13px;
		}
	}
}

body > main {
	flex-grow: 1;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font), sans-serif;
	font-weight: 500;
	color: var(--title-color);
	margin: 0;
}

h1, h2 {
	font-size: 40px;
	line-height: 1.2;
}

h3 {
	font-size: 24px;
	line-height: 1.33;
}

h4, h5 {
	font-size: 18px;
	line-height: 1.33;
}

p {
	padding: 0;
	margin: 0;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

a {
	text-decoration: none;
	transition: .3s;
	color: inherit;
	
	&:hover {
		color: var(--green-500);
	}
}

img,
video,
iframe {
	max-width: 100%;
	border-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

blockquote, q {
	quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
	content: none;
}

button,
input,
optgroup,
select,
textarea {
	font: 400 16px/1.5 var(--font), sans-serif;
	color: var(--text-color);
	margin: 0;
	padding: 0;
	border: 0;
}

button {
	background-color: transparent;
}

input:focus,
select:focus,
textarea:focus {
	outline: var(--green-500) solid 2px;
}

section {
	position: relative;
	margin-bottom: var(--section-space);
}

[data-action] {
	cursor: pointer;
}

.container {
	max-width: 1344px;
	margin: 0 auto;
	padding: 0 32px;
	
	@media (max-width: 767px) {
		padding: 0 16px;
	}
}

.container-fluid {
	max-width: 1440px;
	margin: 0 auto;
}

.m-0 {
	margin: 0 !important;
}

.mb-0 {
	margin-bottom: 0 !important;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.text-medium {
	font-weight: 500;
}

.hidden {
	display: none !important;
}

.img_absolute {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100% !important;
}

.text-white-50 {
	color: var(--white-50);
}

.text-white-100 {
	color: var(--white-100);
}

.text-black-400 {
	color: var(--black-400);
}

.text-black-600 {
	color: var(--black-600);
}

.text-brown-50 {
	color: var(--brown-50);
}

.text-brown-100 {
	color: var(--brown-100);
}

.text-brown-400 {
	color: var(--brown-400);
}

.text-green-50 {
	color: var(--green-50);
}

.text-green-100 {
	color: var(--green-100);
}

.text-green-500 {
	color: var(--green-500);
}

.text-green-700 {
	color: var(--green-700);
}


.bg-white-50 {
	background-color: var(--white-50);
}

.bg-white-100 {
	background-color: var(--white-100);
}

.bg-black-400 {
	background-color: var(--black-400);
}

.bg-black-600 {
	background-color: var(--black-600);
}

.bg-brown-10 {
	background-color: var(--brown-10);
}

.bg-brown-50 {
	background-color: var(--brown-50);
}

.bg-brown-100 {
	background-color: var(--brown-100);
}

.bg-brown-400 {
	background-color: var(--brown-400);
}

.bg-green-10 {
	background-color: var(--green-10);
}

.bg-green-50 {
	background-color: var(--green-50);
}

.bg-green-100 {
	background-color: var(--green-100);
}

.bg-green-500 {
	background-color: var(--green-500);
}

.bg-green-700 {
	background-color: var(--green-700);
}

.swiper {
	.swiper-pagination {
		position: relative;
		top: 0 !important;
		bottom: 0 !important;
		margin-top: 16px;
		display: flex;
		justify-content: center;
		gap: 4px;
		
		@media (min-width: 768px) {
			display: none;
		}
		
		.swiper-pagination-bullet {
			width: 6px;
			height: 6px;
			margin: 0 !important;
			background-color: var(--brown-50);
			border-radius: 2px;
			opacity: 1;
			
			&.swiper-pagination-bullet-active {
				background-color: var(--brown-100);
			}
		}
	}
}

.swiper-head {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	margin-bottom: 56px;
	text-align: center;
	
	div.swiper-button-prev,
	div.swiper-button-next {
		all: unset;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40px;
		height: 40px;
		flex-shrink: 0;
		background-color: var(--green-50);
		border-radius: 8px;
		cursor: pointer;
		transition: .4s;
		user-select: none;
		
		&:after {
			display: none;
		}
		
		&:hover {
			background-color: var(--green-100);
		}
		
		svg {
			width: 12px;
			height: 12px;
		}
		
		&.swiper-button-disabled {
			opacity: 1;
			background-color: #E3E7E1;
			
			path {
				stroke: #fff;
			}
		}
	}
	
	@media (max-width: 1199px) {
		margin-bottom: 40px;
	}
	
	@media (max-width: 767px) {
		gap: 24px;
		
		h2 {
			max-width: 190px;
		}
	}
}

/*global button*/
#body .button {
	display: inline-block;
	padding: 12px 32px;
	font-weight: 500;
	line-height: inherit;
	color: var(--white-100);
	background-color: var(--green-700);
	border-radius: 24px;
	border: 0;
	text-align: center;
	cursor: pointer;
	transition: .4s;
	
	@media (max-width: 767px) {
		padding: 9px 32px;
	}
	
	&:hover {
		color: var(--white-100);
		background-color: var(--green-500);
	}
	
	&[disabled] {
		background-color: #A3B2A8;
		pointer-events: none;
	}
}

.link {
	font-weight: 500;
	color: var(--green-700);
	padding-bottom: 4px;
	border-bottom: 1px solid var(--green-700);
	cursor: pointer;
	transition: .4s;
	
	&:hover {
		color: var(--green-500);
		border-color: var(--green-500);
	}
	
	&[disabled] {
		color: var(--green-50);
		border-color: var(--green-50);
		cursor: not-allowed;
	}
}

/*add-to-cart button*/
.loading {
	pointer-events: none;
	position: relative;
	color: transparent !important;
	
	&:after {
		all: unset;
		content: "" !important;
		position: absolute !important;
		left: 50%;
		top: 50% !important;
		transform: translate(-50%, -50%);
		width: 16px;
		height: 16px;
		border: 2px solid #fff;
		border-top: 2px solid #999;
		border-radius: 50%;
		animation: addToCartSpin 0.7s linear infinite !important;
	}
}

@keyframes addToCartSpin {
	0% {
		transform: translate(-50%, -50%) rotate(0);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/*end add-to-cart button*/

.icon-button-box {
	--r: 16px;
	--p: 10px;
	
	position: absolute;
	right: 0;
	bottom: 0;
	padding-left: var(--p);
	padding-top: var(--p);
	border-radius: var(--r) 0 0 0;
	background-color: var(--white-50);
	
	
	&:before {
		content: "";
		position: absolute;
		bottom: 100%;
		right: 0;
		width: calc(var(--r) * 2);
		height: calc(var(--r) * 2);
		border-bottom-right-radius: var(--r);
		box-shadow: var(--p) var(--p) 0 0 var(--white-50);
	}
	
	&:after {
		content: "";
		position: absolute;
		right: 100%;
		bottom: 0;
		width: calc(var(--r) * 2);
		height: calc(var(--r) * 2);
		border-bottom-right-radius: var(--r);
		box-shadow: var(--p) var(--p) 0 0 var(--white-50);
	}
}

.icon-button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 82px;
	height: 82px;
	background-color: var(--green-700);
	border-radius: 16px;
	transition: .4s;
	
	&:hover {
		background-color: var(--green-500);
	}
	
	&[disabled] {
		background-color: var(--green-50);
		cursor: not-allowed;
	}
	
	svg {
		max-width: 40px;
		max-height: 40px;
	}
	
	&.small {
		width: 56px;
		height: 56px;
		
		svg {
			max-width: 24px;
			max-height: 24px;
		}
	}
}

[data-video-box] {
	&:hover {
		.video_controls {
			opacity: 1;
		}
	}
}

.video_controls {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	transition: .4s;
	
	span {
		display: inline-block;
		width: 72px;
		height: 72px;
		cursor: pointer;
	}
	
	.pause_btn {
		display: none;
	}
	
	&.playing {
		opacity: 0;
		
		.play_btn {
			display: none;
		}
		
		.pause_btn {
			display: inline-block;
		}
	}
}

label.field_box {
	position: relative;
	display: block;
	
	input:not([type="radio"], [type="checkbox"], [type="file"], [type="submit"]),
	select,
	textarea {
		display: block;
		width: 100%;
		padding: 12px 24px;
		background-color: var(--white-100);
		border-radius: 60px;
		border: 0;
	}
	
	select {
		appearance: none;
		padding-right: 32px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	
	textarea {
		height: 100px;
		resize: none;
		border-radius: 16px;
	}
	
	input[type="radio"] {
		accent-color: var(--green-700);
		outline: none;
	}
	
	.wpcf7-not-valid-tip {
		font-size: 13px;
		padding-left: 15px;
		padding-top: 3px;
	}
	
	&.select {
		&:after {
			content: "";
			position: absolute;
			top: 18px;
			right: 20px;
			width: 8px;
			height: 8px;
			border-right: 1px solid var(--text-color);
			border-bottom: 1px solid var(--text-color);
			transform: rotateZ(45deg);
			pointer-events: none;
		}
	}
	
	&.checkbox {
		position: relative;
		display: grid;
		grid-template-columns: 24px auto;
		grid-gap: 8px;
		outline: none;
		cursor: pointer;
		
		input {
			position: absolute;
			top: 0;
			left: 0;
			width: 24px;
			height: 24px;
			opacity: 0;
			pointer-events: none;
		}
		
		.appearance {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			width: 24px;
			height: 24px;
			border: 2px solid var(--green-700);
			border-radius: 8px;
			
			&:before {
				content: "\2713";
				font-size: 20px;
				color: transparent;
			}
		}
		
		input:checked + .appearance {
			background-color: var(--green-700);
			
			&:before {
				color: var(--brown-50);
			}
		}
	}
	
	&[hidden] {
		display: none !important;
	}
	
	.error {
		display: inline-block;
		padding-top: 3px;
		padding-left: 16px;
		color: var(--wc-red);
		font-size: 14px;
	}
	
	.show_password {
		--s: 18px;
		
		position: absolute;
		right: 16px;
		top: 14px;
		width: var(--s);
		height: var(--s);
		z-index: 2;
		user-select: none;
		cursor: pointer;
		
		svg {
			width: var(--s);
			height: var(--s);
		}
		
		.hide {
			display: none;
		}
		
		&.showed {
			.hide {
				display: block;
			}
			
			.show {
				display: none;
			}
		}
	}
}

.yith-wcwl-feedback-messages-container {
	top: auto;
	left: auto;
	bottom: 25px;
	right: 25px;
	transform: none;
}

.woocommerce {
	.woocommerce-form-coupon-toggle {
		display: none;
		
		& ~ .woocommerce-message {
			display: none;
		}
	}
}

body .cmplz-cookiebanner .cmplz-header .cmplz-title {
	display: block;
}

/*Responsive*/
@media (min-width: 1200px) {
	.hide_desktop {
		display: none !important;
	}
}

.ul {
	li {
		position: relative;
		padding-left: 24px;
		margin-bottom: 8px;
		
		&:before {
			content: "";
			position: absolute;
			top: 13px;
			left: 12px;
			transform: translate(-50%, -50%);
			width: 3px;
			height: 3px;
			background-color: var(--text-color);
		}
		
		&:last-child {
			margin-bottom: 0;
		}
	}
}

@media (max-width: 1199px) {
	:root {
		--section-space: 100px;
	}
	
	body {
		font-size: 14px;
	}
	
	h1, h2 {
		font-size: 24px;
	}
	
	h3 {
		font-size: 18px;
	}
	
	.hide_mobile {
		display: none !important;
	}
	
	.icon-button-box {
		--r: 8px;
		--p: 8px;
	}
	
	.icon-button, .icon-button.small {
		width: 40px;
		height: 40px;
		border-radius: 8px;
		
		svg {
			max-width: 16px;
			max-height: 16px;
		}
	}
}

@media (max-width: 767px) {
	.icon-button-box {
		--p: 4px;
	}
}