.gradient-text{
	background: -webkit-linear-gradient(0deg, #0C71A8, #39CC96);
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}

.gradient-bg{
	background: -webkit-linear-gradient(0deg, #0C71A8, #39CC96);
	color: #fff !important;
}

.btn--custom{
	position: relative;
	padding: 0;
	color: transparent;
	background: -webkit-linear-gradient(0deg, #0C71A8, #39CC96);
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
	font-weight: 600;
	width: fit-content;
	padding-bottom: 2px;
}

.btn--custom:hover{
	color: transparent;
	background: -webkit-linear-gradient(0deg, #0C71A8, #39CC96);
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}

.btn--custom:after{
	content: url('/cdn/shop/files/Layer_2.svg?v=1730812793');
	position: absolute;
	left: calc(100% + 12px);
	top: calc(50% - 5px);
	display: block;
	width: 10px;
	height: 10px;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	justify-content: baseline;
	padding: 3px;
	transition: transform .3s;
	transform-origin: top left;
}

.btn--custom:hover:after{
	transform: translate(50%, 50%) scale(1.4);
}

.btn--custom:before{
	content: '';
	display: block;
	width: 100%;
	height: .1em;
	position: absolute;
	left: 0;
	bottom: 0;
	background: linear-gradient(90deg, #0C71A8, #39CC96);;
	transform: scale(0, 1);
	transform-origin: left;
	transition: transform .3s;
}

.btn--custom:hover:before{
	transform: scale(1, 1);
}

.btn--line{
	line-height: 1;
	display: flex;
	align-items: center;
	height: 44px;
	padding: 8px 16px;
	position: relative;
	color: #222;
	border-radius: 5px;
	z-index: 2;
	background: linear-gradient(0deg, #0C71A8, #39CC96);
}

.btn--line:before{
	content: '';
	position: absolute;
	left: 2px;
	top: 2px;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	background-color: #fff;
	z-index: -99;
	border-radius: 3px;
	transition: opacity .3s;
}

.btn--line:hover{ color: #fff; }
.btn--line:hover:before{ opacity: 0; }

.rte-setting{

	ul{
		padding-left: 0;
		list-style: none;

		li{
			margin: 24px 0;
            line-height: 1.4;
		}

		li:before{
			content: url('/cdn/shop/files/check.svg?v=1730816905');
            display: inline-block;
			width: fit-content;
            vertical-align: middle;
			height: 1.4em;
            margin-right: 12px;
		}
	}
}

.no-scrollbar{
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar{ display: none; }

collapsible-table{

	[collapsible-content]{
		height: 0;
		overflow: hidden;
		transition: height .3s;
	}
}

collapsible-table.active{

	[collapsible-content]{
		height: var(--height);
	}
}

.on-active{ display: none; }
.active .on-active{ display: block; }
.active .on-unactive{ display: none; }

@media only screen and (min-width: 768px) and (max-width: 1399px){
	:root{
		--outer: 52px;
	}
}

.theme__header{
	.navlink--toplevel{
		padding: 15px 10px;

		.navtext{
			font-size: var(--font-4);
			margin-top: 6px;
		}
	}

	.navlink.active:not([data-handle="buy-now"]) span{
		background: -webkit-linear-gradient(0deg, #0C71A8, #39CC96);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.navlink[data-handle="buy-now"] span,
	.header__mobile .link-s{
		line-height: 1;
		display: flex;
		align-items: center;
		height: 44px;
		padding: 8px 16px;
		position: relative;
		color: #222;
		border-radius: 50px;
		z-index: 2;
		background: linear-gradient(0deg, #0C71A8, #39CC96);
	}

	.navlink[data-handle="buy-now"] span:before,
	.header__mobile .link-s:before{
		content:'';
		position: absolute;
		left: 2px; top: 2px;
		width: calc(100% - 4px); height: calc(100% - 4px);
		background-color: #fff;
		z-index: -99;
		border-radius: 50px;
		transition: opacity .3s;
	}

	.navlink[data-handle="buy-now"] span:after,
	.header__mobile .link-s:after{
		content:none;
	}

	.navlink[data-handle="buy-now"]:hover span,
	.header__mobile .link-s:hover{
		color: #fff;
	}

	.navlink[data-handle="buy-now"]:hover span:before,
	.header__mobile .link-s:hover:before{
		opacity: 0;
	}

	.header__desktop__buttons{
		margin-left: 10px;
		gap: 20px;

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

			> a{
				position: relative;
				height: unset;
				padding: 10px;
				color: #222;
				transition: color .3s;
				background-color: #fff;
				border-radius: 50%;

				svg{
					width: 24px;
					height: 24px;
					position: relative;
				}
			}

			> a:hover{
				color: #fff;
			}

			> a:before{
				content:'';
				position: absolute;
				left: 0; top: 0;
				width: 100%; height: 100%;
				background: linear-gradient(0deg, #0C71A8, #39CC96);
				border-radius: 50%;
				opacity: 0;
				transition: opacity .3s;
			}

			> a:hover:before{
				opacity: 1;
			}

		}
	}

	.header__desktop__bar__l{
		flex: unset;

		img{
			width: 100%;
		}
	}

	.header__mobile{	
		align-items: center;

		.header__mobile__right{
			flex: 1;
			gap: 20px;
			margin-left: 20px;

			.link-s{
				font-weight: 600;
				line-height: 1;
				height: 44px;
				display: flex;
				align-items: center;
				font-size: var(--font-4);
			}

			.header__mobile__button{
				> a, > button{
					padding: 0;
					width: 44px;
					height: 44px;
					display: flex;
					align-items: center;
					justify-content: center;
	
					> .hamburger__lines{
						width: 24px; height: 24px;
						position: relative;
					}
				}

				> .navlink--cart{
					position: relative;
					height: unset;
					padding: 10px;
					color: #222;
					transition: color .3s;
					background-color: #fff;
					border-radius: 50%;

					svg{
						width: 24px;
						height: 24px;
						position: relative;
					}
				}

			}
		}
	}

	.navlink--cart .cart__icon__content{
		position: relative;

		.header__cart__status{
			display: block;
			position: absolute;
			right: -10px;
			top: -10px;
			background: linear-gradient(90deg, #0C71A8, #39CC96);
			color: #fff;
			border-radius: 50%;
			width: 20px;
			height: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			line-height: 1;
			font-size: var(--font-3);
		}

		.header__cart__status[data-cart-count="0"]{
			display: none;
		}
	}
}

.custom-footer{
	padding: 56px 0;
	background-color: #212126;
	color: #fff;

	> .top{

		*{ margin: 0; }
		.col-txt{ color: #AFB4C0; }

		> .el{
			.title{ margin-bottom: 10px; }
			.btn, button{ margin-top: 32px; }
		}

		> .el.socials{
			display: flex;
			align-items: center;
			gap: 30px;

			> .container{
				display: flex;
				align-items: center;
				gap: 8px;

				> .el{
					width: 44px;
					height: 44px;
					display: flex;
					justify-content: center;
					align-items: center;
					background: linear-gradient(90deg, #0C71A8 0%, #39CC9600 100%);
					background-color: #39CC96;
					border-radius: 50%;
					transition: background-color .3s;
				}

				> .el:hover{
					background-color: #0C71A8;
				}
			}
		}
	}

	@media(min-width: 768px){

		> .top{
			display: grid;
			grid-template-columns: repeat(3, minmax(auto, 290px));
			justify-content: space-between;
			align-items: flex-start;
			gap: 42px 20px;
		}

		> .bottom{
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 20px;
			border-top: 1px solid #AFB4C0;
			padding-top: 20px;
			margin-top: 20px;

			*{ margin: 0; }
			.col-txt{ color: #AFB4C0; }

			> .menu{
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				flex-wrap: wrap;
				gap: 8px 20px;

				> a:hover{
					text-decoration: underline;
				}
			}
		}
	}
	
	@media(max-width: 767.99px){

		> .top{
			display: flex;
			flex-direction: column;
			gap: 20px;
		}

		> .bottom{
			display: flex;
			flex-direction: column;
			gap: 40px;
			border-top: 1px solid #AFB4C0;
			padding-top: 20px;
			margin-top: 20px;

			*{ margin: 0; }
			.col-txt{ color: #AFB4C0; }

			> .menu{
				display: flex;
				flex-direction: column;
				gap: 20px;
			}
		}
	}
}

.section-hero, .section-video{

	.hero__content{
		margin: 0;
	}

	.scroll{
		position: absolute;
		left: 50%;
		bottom: 5%;
		width: 40px;
		height: 40px;
		cursor: pointer;

		> svg{
			width: 100%;
			height: 100%;
		}
	}

	@media(max-width: 767.99px){
		.hero__content__wrapper{
			justify-content: center;
			text-align: center;

			.text__standard{
				text-align: center !important;
			}
		}
	}
}

.section-icons__foreground{

	.icon__column{
		background-color: #fff;

		.svg{
			display: flex;
			align-items: center;
		}
	
		.icon__column__heading{
			height: 2.8em;
			margin: 20px 0;
			display: flex;
			align-items: center;
		}
	}
}

.section-timeline2{

	h3{
		text-align: center;
		margin: 0;
	}

	.trait{
		width: 100%;
		height: 3px;
		background: linear-gradient(90deg, #0D73A7, #39CC96);
		position: relative;
		margin: 150px auto;
		display: flex;
		justify-content: space-around;
		max-width: var(--w);

		.el{
			width: calc(100% / 6 * 2);
			flex: 1;
			transform: translateY(calc(-50% + 1px));
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			.point{
				width: 16px;
				height: 16px;
				background: linear-gradient(210deg, #39CC96 -174.73%, #0D73A7 100%);
				border-radius: 50%;
			}
		}

		.el:nth-child(even):before{
			content:'';
			display: block;
			width: 1px;
			height: 26px;
			background-color: #979797;
			position: absolute;
			top: 22px;
			left: 50%;
			transform: translateX(-50%);
		}

		.el:nth-child(even) .text{
			position: absolute;
			left: 50%;
			top: 54px;
			transform: translateX(-50%);
			display: block;
			width: 150%;
			font-size: 18px;
			font-weight: 600;
			line-height: 1;
			text-align: center;
		}

		.el:nth-child(odd):before{
			content:'';
			display: block;
			width: 1px;
			height: 26px;
			background-color: #979797;
			position: absolute;
			bottom: 22px;
			left: 50%;
			transform: translateX(-50%);
		}

		.el:nth-child(odd) .text{
			position: absolute;
			left: 50%;
			bottom: 54px;
			transform: translateX(-50%);
			display: block;
			width: 150%;
			font-size: 18px;
			font-weight: 600;
			line-height: 1;
			text-align: center;
		}
	}

	.arrow{ display: none; }
}

.section-timeline2.mobile{

	.top{
		position: relative;

		.arrow{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 40px;
			position: absolute;
			top: 50%;
			right: 40px;
			transform: translateY(-50%);
			cursor: pointer;
		}
	}

	.trait-outer{
		overflow: scroll hidden;
		scroll-padding: 0 100px;
		padding: 0 40px;
		width: 100vw;

		.trait{
			width: var(--w);
		}
	}
}

.section-video-with-text{

	@media(min-width: 990px){
		.container{
			display: flex;
			align-items: flex-start;
			gap: 48px;
	
			> .el{
				flex: 1;
				background-color: transparent;
			}
	
			> .el.txt{
	
				> *{
					margin-right: 100px;
				}
			}

			> .el.video{
				aspect-ratio: 16 / 9;
	
				> iframe{
					width: 100%;
					height: 100%;
					object-fit: cover;
					display: block;
					border-radius: 5px;
				}
			}
		}
	}

	@media(max-width: 989px){
		.container{
			display: flex;
			flex-direction: column;
			gap: 24px;
	
			> .el{
				background-color: transparent;
			}

			> .el.video{
				aspect-ratio: 16 / 9;
	
				> iframe{
					width: 100%;
					height: 100%;
					object-fit: cover;
					display: block;
					border-radius: 5px;
				}
			}
		}
	}

}

.section-img-txt2 > *{

	@media(min-width: 990px){
		display: flex;
		align-items: flex-start;
		gap: 72px;

		> .img{
			flex: 1;
			height: var(--h);

			> img{
				height: 100%;
				object-fit: cover;
				display: block;
				border-radius: 5px;
			}
		}

		.txt{
			flex: 2;

			.vignettes{
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 20px;
				margin-top: 40px;

				> .el{
					background-color: #f5f7fa;
					border-radius: 5px;
					padding: 24px;
					display: flex;
					flex-direction: column;
					gap: 16px;
					transition: box-shadow .3s, transform .3s;

					> .img{
						width: 64px;
						height: 64px;

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

					> p{ margin: 0; }
				}

				> .el:hover{
					box-shadow: 0 0 20px #00000022;
					transform: scale(1.02);
				}
			}
		}
	}

	@media(max-width: 989px){
		display: flex;
		flex-direction: column;
		gap: 40px;

		> .img{
			height: var(--h);

			> img{
				height: 100%;
				object-fit: cover;
				display: block;
				border-radius: 5px;
			}
		}

		.txt{

			.vignettes{
				display: flex;
				flex-direction: column;
				gap: 20px;
				margin-top: 40px;

				> .el{
					background-color: #f5f7fa;
					border-radius: 5px;
					padding: 24px;
					display: flex;
					flex-direction: column;
					gap: 16px;
					transition: box-shadow .3s, transform .3s;

					> .img{
						width: 64px;
						height: 64px;

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

					> p{ margin: 0; }
				}

				> .el:hover{
					box-shadow: 0 0 20px #00000022;
					transform: scale(1.02);
				}
			}
		}
	}
}

.notification.already-in-cart{
	padding: 16px;
	border: 1px solid #FDBA74;
	background-color: #FFF7ED;
	border-radius: 12px;
	align-items: center;
	gap: 12px;
	line-height: 1.4;
	margin-bottom: 24px;
	display: none;
}

.notification.already-in-cart.active{
	display: flex;
}

.product-section{

	.grid--product{
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 80px;
		position: relative;
	
		.grid__item.grid__item--product:has(.product__slides){ 
			flex: 1;

			.navigation{ display: none; }

			.product__slides{

				.product__media > div{
					background-color: #F5F7FA;
					border-radius: var(--RADIUS);
				}
			}
		}
	
		.grid__item.grid__item--product:has(.product__form__wrapper){
			max-width: 530px;

			.product__form__wrapper{
				position: static;

				.product__title__wrapper{

					.product__title{
						flex: 1;
					}
	
					.availability{
						background-color: #F5F7FA;
						color: #222222;
						font-weight: 600;
						font-size: var(--font-4);
						padding: 8px 16px;
						border-radius: 50px;
						line-height: 1.8;
					}
				}
	
				.product__price{
					font-weight: 600;

					.product__price-compare{
						font-size: .8em;
						text-decoration: line-through;
						margin-left: 8px;
						opacity: .7;
					}
				}
	
				.taxes{
					margin: 0;
					font-weight: 400;
					font-size: var(--font-3);
					color: #696B6F;
				}
	
				.product__subheading--rte{
	
					ul{
						padding-left: 0;
						list-style: none;
	
						li{
							margin: 16px 0;
							display: flex;
							align-items: center;
							gap: 12px;
						}
	
						li:before{
							content: url('/cdn/shop/files/check.svg?v=1730816905');
							width: 20px;
							height: 20px;
						}
					}
				}
	
				.product__submit__buttons{

					button, a{
						min-width: 0;
						padding: 8px 40px;
						height: 44px;
						font-size: calc(var(--font-5) - 2px);
						text-transform: lowercase;
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 10px;
						line-height: 1;
                        width: fit-content;
		
						span{ height: 1em; }

						.svg-loader circle{ stroke: currentColor; stroke-width: 2px; }
						.svg-loader circle:first-child{ opacity: 0; }

						.btn-state-complete{
							height: 10px;
							width: 1em;
							border-color: #fff;
							border-width: 2px;
						}
					}
				}
	
				.product__submit__buttons button[disabled],
                .product__submit__buttons a[disabled]{
					background-color: var(--btn-bgc) !important;
					color: #fff !important;
				}
	
				.product__custom-badges{
					display: flex;
					flex-direction: column;
					gap: 24px;
					background-color: #fff;
					border: 1px solid #AFB4C0;
					border-radius: 5px;
					padding: 16px 16px;
					width: 100%;
	
					> .el{
						display: flex;
						align-items: flex-start;
						gap: 10px;
	
						> .img{
							width: 24px;
							height: 24px;
							display: flex;
							align-items: center;
							justify-content: center;
						}
	
						> .right{
							flex: 1;
	
							.title{
								font-size: calc(var(--font-5) - 2px);
								font-weight: 600;
								margin-bottom: 10px;
							}
	
							.txt{
								font-size: var(--font-3);
								font-weight: 400;
								color: #726C6C;
							}
	
							p{ margin: 0; }
						}
					}
				}

				.product-custom-field{
					background-color: #F5F7FA;
					padding: 8px 16px;
					border-radius: 5px;

					label{
						font-size: var(--font-1);
						color: #696B6F;
						line-height: 1;
					}

					input{
						display: block;
						padding: 0;
						border: 0px solid;
						outline: none;
						background-color: inherit;
						color: #222222;
						width: 100%;
						margin: 0;
						line-height: 1;
					}
				}
			}
		}
	}

	@media(max-width: 767px){

		.grid--product{
			display: block;

			.grid__item.grid__item--product:has(.product__slides){
				margin-bottom: 24px;

				.navigation{
					margin-top: 20px;
					display: flex;
					justify-content: center;
					gap: 20px;

					button{
						width: 44px; height: 44px;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 50%;
						background-color: #F5F7FA;
					}
				}

				.product__slides{
					padding: 0;
					margin: 0 0;
    				scroll-snap-type: x mandatory;

					.product__media{
						width: 100%;
						flex: none;
						padding: 0;
						margin: 0;
	
						> div[data-type="image"]{
							padding-top: 100% !important;
		
							img{
								width: 100%;
								height: 100%;
								object-fit: cover;
								display: block;
							}
	
						}
					}
				}
			}
		}
	}
}

.section-tabs{

	p:first-child{ margin-top: 0;}
	p:last-child{ margin-bottom: 0; }

	.tab-content{
		margin-top: 20px;
		display: flex;
		flex-direction: column;
	}

	.tabs__head{

		.tabs{
			button{ color: #C6C6C6; }
			button.current{ color: #222; }
			button:after{ background: linear-gradient(90deg, #0C71A8 0%, #39CC96 100%); }
		}
	}

	.tabs__head:after{
		height: 2px;
		background-color: #C6C6C6;
	}

	.tab-content.description{

		.el{
			order: var(--order);
			border-bottom: 3px solid #F5F7FA;
			padding: 20px 0;

			.title{
				margin: 0;
				font-size: var(--font-5);
				font-weight: 600;
				margin-bottom: 20px;
			}

			.title:empty{ margin: 0; }
		}
		
		.el.desc{

			.container{
				display: flex;
				align-items: flex-start;
				gap: 48px;

				> .img{
					flex: 1;

					img{
						height: unset;
						border-radius: 5px;
					}
				}

				.content{
					flex: 1;
				}
			}
		}

		.el.details{

			.container{
				padding: 16px;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 24px;

				.detail{
					display: flex;
					align-items: flex-start;
					gap: 10px;

					.img{
						width: 24px;
						height: 24px;
						display: flex;
						justify-content: center;
						align-items: cenetr;

						> img{
							display: block;
							height: 100%;
							width: 100%;
						}
					}

					.el-title{
						margin: 0;
						margin-bottom: 10px;
						font-size: var(--font-4);
						font-weight: 600;
					}

					.el-txt{
						margin: 0;
						font-size: var(--font-4);
					}
				}
			}
		}

		.el.benefits{
			
			ul{
				margin: 0;
				padding-left: 0;
				list-style: none;
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 32px;

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

				li:before{
					content:url('/cdn/shop/files/check_c80dd675-a1e0-40a0-9d8c-0cd42701b510.svg?v=1731506033');
					display: block;
					width: 20px;
					height: 20px;
				}
			}
		}
	}

	.tab-content.text{
		display: flex;
		align-items: flex-start;
		gap: 48px;

		> .img{
			flex: 1;

			img{
				height: unset;
				border-radius: 5px;
			}
		}

		.content{
			flex: 1;
		}
	}

	@media(min-width: 768px){
		.tabs__head{
			.tabs{
				display: flex;

				button{
					flex: 1;
				}
			}
		}
	}

	@media(max-width: 767px){
		.tab-content.description{

			.el{
				padding-left: 20px; padding-right: 20px;
			}

			.el.desc{
				.container{
					flex-direction: column;
					gap: 10px;
				}
			}

			.el.details{
				.container{
					grid-template-columns: repeat(1, 1fr);
				}
			}
		}

		.tab-content.text{
			flex-direction: column;
			gap: 10px;
		}
	}
}

.section-atc-button{
	.product__submit__add{
		margin: 0 auto;
		min-width: 0;
		padding: 8px 40px;
		font-size: calc(var(--font-5) - 2px);
		text-transform: lowercase;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		line-height: 1;

		span{ height: 1em; }

		.svg-loader circle{ stroke: currentColor; stroke-width: 2px; }
		.svg-loader circle:first-child{ opacity: 0; }

		.btn-state-complete{
			height: 10px;
			width: 1em;
			border-color: #fff;
			border-width: 2px;
		}
	}
}

.section-reviews2{
	h3{
		text-align: center;
		margin: 0;
	}

	.container{
		margin: 40px auto 0;
		padding: 16px 16px;
		max-width: 550px;
		box-shadow: 0px 0px 7px 0px rgba(34, 34, 34, 0.10);
		border-radius: 5px;
		position: relative;

		p{ margin: 0; }

		.name{
			margin: 10px 0;
			font-weight: 600;
			color: #726C6C;
		}

		.job{
			color: #696B6F;
			font-size: var(--font-3);
		}

		svg{
			position: absolute;
			right: 16px;
			bottom: 16px;
		}
	}
}

.collection2{

	> .inner{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}

	@media(max-width: 999px){
		> .inner{
			grid-template-columns: repeat(1, 1fr);
		}
	}
}

.product-card{
	display: flex;
	flex-direction: column;
	gap: 12px;

	.img{
		display: block;
		width: 100%;
		aspect-ratio: 16 / 9;
		background-color: #F5F7FA;
		border-radius: 5px;
		overflow: hidden;

		img{
			height: 100%;
			width: 100%;
			object-fit: cover;
			object-position: center;
		}
	}

	.info{
		padding: 0 16px;

		.title{
			font-size: var(--font-3);
			font-weight: 400;
			text-align: center;
		}

		.prices{
			margin-top: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 12px;
			font-size: var(--font-5);
			font-weight: 600;

			.price-compare{
				font-size: var(--font-4);
				text-decoration: line-through;
			}
		}
	}

	.btns{
		padding: 0 16px;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 10px;

		a, button{
			flex: 1;
			max-width: 170px;
			height: 44px;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 12px;
		}

		button{
			text-transform: lowercase;
			color: #222;
			height: 44px;
			font-weight: 600;
			border-radius: 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(0deg, #0C71A8, #39CC96);
			position: relative;
			z-index: 2;
			line-height: 1;
		}

		button:before{
			content: '';
			background-color: #fff;
			position: absolute;
			left: 1px;
			top: 1px;
			display: block;
			width: calc(100% - 2px);
			height: calc(100% - 2px);
			border-radius: 4px;
			z-index: -99;
			transition: opacity .3s;
		}

		button:hover{ color: #fff; }
		button:hover:before{ opacity: 0; }

		.notification{ width: 100%; }
	}
}

.customer{

	input, button{ margin: 0; }

	input{
		border: 0;
		outline: 0;
		background-color: #F5F7FA;
		height: 44px;
		border-radius: 5px;
	}

	input::placeholder{
		color: #696B6F;
	}

	button{
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: var(--font-5);
	}
}

.customer-login{
	display: flex;

	.img{
		flex: 1;
		height: calc(var(--full-screen) - var(--header-height));
		position: relative;

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

		> .logo{
			position: absolute;
			left: 50%;
			top: 50%;
			translate: -50% -50%;
			z-index: 2;
		}

		> .back{
			position: absolute;
			top: 28px;left: 20px;
			color: #fff;
			display: flex;
			line-height: 1;
			align-items: center;
			gap: 10px;
			font-weight: 600;
		}
	}

	.img:before{
		content:'';
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0; top: 0;
		background: linear-gradient(90deg, rgba(12, 113, 168) 0%, rgba(57, 204, 150) 100%), lightgray 50% / cover no-repeat;
		opacity: .3;
	}

	> form{
		flex: 2;
		display: block;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		> .inner{
			width: 100%;
			max-width: calc(var(--LAYOUT-WIDTH) / 3 * 2);
			padding: 0 140px;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 16px;

			> .title{
				margin: 0;
				font-size: var(--font-12);
				text-align: center;
			}

			.subtitle{
				margin-top: -8px;
				text-align: center;
			}

			> .form{
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				margin: 12px 0;
				gap: 0 24px;

				input:not([type="checkbox"]), button{
					display: block;
					width: 100%;
					margin: 12px 0;
				}

				input.half-w{
					width: calc((100% - 24px) / 2);
				}

				button{
					margin-bottom: 24px;
				}

				.checkbox{
					width: 100%;
					display: flex;
					align-items: center;
					gap: 10px;

					label{
						flex: 1;
						line-height: 1.4;
						margin: 12px 0;

						a{ text-decoration: underline; }

						p{ margin: 0; }
					}
				}
			}

			> .links{
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 32px;

				a{
					font-size: var(--font-3);
					font-weight: 600;
					text-decoration: underline;
				}
			}
			
			.notification.error{
				padding: 16px;
				border: 1px solid #FDBA74;
				background-color: #FFF7ED;
				border-radius: 12px;
				display: flex;
				align-items: center;
				gap: 12px;
				line-height: 1.4;

				.errors{ flex: 1; }

				.errors{
					margin: 0; padding: 0;
					background-color: unset;
					color: unset;
				}
			}
			
			.notification.success{
				padding: 16px;
				border: 1px solid #56d92c;
				background-color: #f4fbf7;
				border-radius: 12px;
				display: flex;
				align-items: center;
				gap: 12px;
				line-height: 1.4;

				span{ flex: 1; }
			}
			
			.notification.info{
				padding: 16px;
				border: 1px solid #3878d8;
				background-color: #e8ecf4;
				border-radius: 12px;
				display: flex;
				align-items: center;
				gap: 12px;
				line-height: 1.4;

				span{
					flex: 1;

					p{ margin: 0; } 
					a{ text-decoration: underline; }
				}
			}
		}
	}

	#recover:not(:target){ display: none; }
	#recover:target ~ #login { display: none; }

	@media(max-width: 999px) and (min-width: 768px){
		> form{

			> .inner{
				padding: 0 32px;
			}
		}
	}

	@media(max-width: 767px){
		flex-direction: column;
		gap: 44px;
		padding-bottom: 32px;
		
		> .img{
			flex: unset;
			height: 200px;

			> .back{
				top: calc(100% + 12px);
				left: 12px;
				color: #222;

				> svg{
					fill: #222;
					stroke: #222;
				}
			}
		}

		> form{

			> .inner{
				padding: 0 20px;
				max-width: 400px;
				margin: 0 auto;
				
				.form{
					margin: 12px 0;
					gap: 0 16px;
	
					input:not([type="checkbox"]), button{
						margin: 8px 0;
					}

					input.half-w{
						width: calc((100% - 16px) / 2);
					}
				}
			}
		}
	}

}

.customer-account{
	padding-top: 54px;
	padding-bottom: 54px;

	h2.title{
		font-size: var(--font-6);
		margin: 0;
	}

	h3.subtitle{
		font-size: var(--font-5);
		margin: 0;
	}

	.back{
		display: flex;
		align-items: center;
		gap: 10px;
		line-height: 1;
		font-weight: 600;

		margin-bottom: 32px;

		span{ flex: 1; }
	}

	.input-container{
		margin-top: 24px;
		border: 1px solid #AFB4C0;
		padding: 16px 16px;
		border-radius: 5px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		--gap: 20px;
		gap: var(--gap);

		h3.subtitle{
			width: 100%;
		}

		.full-w{ grid-column: 1 / span 2; }

		.input{
			height: 48px;
			width: calc((100% - var(--gap)) / 2);
			background-color: #F5F7FA;
			padding: 8px 16px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 100%;
			border-radius: 5px;

			input, select{
				padding: 0;
				line-height: 1;
				width: 100%;
				border: 0;
				margin: 0;
				height: unset;
			}

			select{
				appearance: auto;
				background: none;
				margin-left: -4px;
			}

			input::placeholder{
				color: #696B6F;
			}

			label{
				color: #696B6F;
				font-size: 10px;
				line-height: 1;
				margin: 0;
			}
		}

		.input.empty:has(input:not(:focus)),
		.input.empty:has(input:not(:focus-visible)),
		.input.empty:has(input:not(:focus-within)),
		.input.empty:has(select:not(:focus)),
		.input.empty:has(select:not(:focus-visible)),
		.input.empty:has(select:not(:focus-within)){
			position: relative;
			justify-content: center;
			
			input{
				position: absolute;
				pointer-events: none;
				opacity: 0;
			}

			label{
				line-height: 2;
				font-size: var(--font-4);
			}
		}

		.input:has(input:focus),
		.input:has(input:focus-visible),
		.input:has(input:focus-within),
		.input:has(select:focus),
		.input:has(select:focus-visible),
		.input:has(select:focus-within){
			outline: 1px solid #222;
		}

		.input:has(input[disabled]),
		.input:has(select[disabled]){
			background-color: #DBDEE4;
			input, select{ background-color: #DBDEE4; }
		}

		select[disabled]{ opacity: 1; }
	}

	@media(max-width: 767px){
		
		.input-container{
			grid-template-columns: 1fr;

			> .full-w{ grid-column: 1 / span 1; }
		}
	}
}

.customer-account.account{
	display: flex;
	align-items: flex-start;
	gap: 64px;

	> .orders{
		width: 650px;

		> .container{
			margin-top: 8px;

			> .row{
				display: flex;
				gap: 16px;

				> *:nth-child(1){ flex: 2; }
				> *:nth-child(2){ flex: 7; }
				> *:nth-child(3){ flex: 3; }
				> *:nth-child(4){ width: 24px; }
			}
			
			> .row.header{
				color: #696B6F;
				padding: 10px 0;
			}

			> .row.product{
				padding: 30px 0;
				border-top: 1px solid #C6C6C6;

				> .id{
					font-size: var(--font-3);
					font-weight: 600;
					text-decoration: underline;
				}

				> .products{
					display: flex;
					flex-direction: column;
					gap: 24px;

					.product{
						display: flex;
						gap: 24px;

						> .img{
							width: 80px;
							height: 80px;
							background-color: #F5F7FA;
							border-radius: 5px;
							overflow: hidden;

							img{
								width: 100%;
								height: 100%;
								object-fit: cover;
								object-position: center;
							}
						}

						> .infos{
							flex: 1;
							display: flex;
							flex-direction: column;
							gap: 8px;

							> .title{
								font-weight: 600;
								line-height: 1.4;
							}

							> .qtt{
								font-weight: 600;
							}

							.brochure{
								gap: 12px;
								justify-content: center;
								height: 48px;
								font-weight: 600;
							}
						}
					}
				}

				> .status{

					span{
						padding: 8px 16px;
						background-color: #F5F7FA;
						font-weight: 600;
						border-radius: 50px;
						width: fit-content;
					}
				}

				> .link{
					width: 24px; height: 24px;
				}
			}

			> .subtitle{
				margin-top: 64px;
				font-size: var(--font-6);
				font-weight: 600;
			}

			> .btn--line{
				width: fit-content;
				font-weight: 600;
			}
		}
	}

	> .informations{
		flex: 1;

		.name{
			display: inline-block;
			margin: 24px 0 8px;
			color: #696B6F;
		}

		.btn{
			width: fit-content;
			margin: 0;
			height: 44px;
			display: flex;
			align-items: center;
		}

		.communication{
			margin: 24px 0;
			padding: 16px 16px;
			border: 1px solid #AFB4C0;
			border-radius: 5px;
			display: flex;
			flex-direction: column;
			gap: 10px;

			> .title{
				margin-bottom: 24px;
				font-size: var(--font-5);
				font-weight: 600;
			}

			> .subtitle{
				font-size: var(--font-3);
				color: #726C6C;
			}

			> .link{
				font-weight: 600;
				text-decoration: underline;
			}
		}

		.logout{
			width: fit-content;
			padding: 0 40px;
			font-weight: 600;
		}
	}

	@media(min-width: 768px) and (max-width: 1100px){
		flex-direction: column;
		gap: 24px;

		.orders{
			width: 100%;

			.brochure{
				width: fit-content;
				padding: 8px 40px;
			}
		}

		.informations{
			flex: unset;
		}
	}

	@media(max-width: 767px){
		flex-direction: column;
		gap: 24px;

		.orders{
			width: 100%;

			> .container{

				.row.header{ display: none;}

				.row.product{
					display: grid;
					grid-template-columns: 2;
					gap: 12px;
					border-top: 0;
					padding: 12px;
					margin-top: 24px;
					border-radius: 5px;
					box-shadow: 0px 0px 7px 0px rgba(34, 34, 34, 0.10);

					.id{ grid-column: 1 / span 1; }
					.products{
						grid-column: 1 / span 2;
						grid-row: 2 / span 1;

						.brochure svg{ display: none; }
					}
					.status{
						grid-column: 2 / span 1;
						justify-self: flex-end;
					}
					.link{ display: none; }
				}
			}
		}

		.informations{
			flex: unset;
		}
	}
}

.customer-account.addresses{
	padding-top: 54px;
	padding-bottom: 54px;

	form{
		display: block;
	}

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

.customer-account.order{
	.txt{
		margin-top: 24px;
		font-size: var(--font-3);
	}

	.products{
		margin-top: 24px;
		
		.row{
			display: grid;
			grid-template-columns: 100px 1fr 200px 100px;
			gap: 24px 120px;
			padding-right: 120px;

			> *:nth-child(1){ grid-column: 1 / span 1; }
			> *:nth-child(2){ grid-column: 2 / span 1; }
			> *:nth-child(3){ grid-column: 3 / span 1; }
            > *:nth-child(4){ grid-column: 4 / span 1; }
		}

		.row.header{
			padding-top: 10px; padding-bottom: 10px;
			margin-bottom: 24px;
			color: #696B6F;
			border-bottom: 1px solid #C6C6C6;
		}

		.row.product{
			padding-top: 12px; padding-bottom: 12px;

			.id{
				font-size: var(--font-3);
				font-weight: 600;
				text-decoration: underline;
			}

			.product{
				display: flex;
				gap: 24px;
				
				> .img{
					width: 80px;
					height: 80px;
					background-color: #F5F7FA;
					border-radius: 5px;
					overflow: hidden;

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

				> .infos{
					flex: 1;
					display: flex;
					flex-direction: column;
					gap: 8px;

					> .title, > .qtt{
						font-weight: 600;
						line-height: 24px;
					}

					> .prices{
						display: flex;
						align-items: center;
						gap: 8px;
						font-size: var(--font-3);

						> .price-compare{
							text-decoration: line-through;
							opacity: .8;
						}
					}

                    > .tid{
                        font-size: var(--font-3);
                    }
				}
			}

			.status{
                width: fit-content;
				height: fit-content;
                font-weight: 600;

                span{
    				background-color: #F5F7FA;
    				padding: 8px 16px;
    				border-radius: 50px; 
                }
			}

			.status:empty{
				background-color: none;
				padding: 0;
			}

            .tracking{

                a{
                    text-decoration: underline;
                    padding: 0;
                    margin-top: 8px;
                    display: inline-block;
                    font-weight: 600;
                }
            }
		}

		.row.btns{
			display: flex;
			gap: 24px;
			margin-top: 24px;

			button, a{
				justify-content: center;
				text-align: center;
				height: 44px;
				padding-left: 40px; padding-right: 40px;
				font-weight: 600;
				gap: 12px;

				span{
					flex: 1;
				}
			}
		}
	}

	@media(max-width: 1200px){

		.products{

			.row{
				padding-right: 0;
				gap: 24px 24px;
			}
		}
	}

	@media(max-width: 767px){
		.products{
			padding: 16px;
			box-shadow: 0px 0px 7px 0px rgba(34, 34, 34, 0.10);
			border-radius: 5px;

			.row.header{ display: none; }

			.row.product{
				padding: 0;
				grid-template-columns: 1fr 1fr;
				justify-content: space-between;
				gap: 0 12px;

				.id{
					grid-column: 1 / span 1;
					grid-row: 1 / span 1;
				}
				.status{
					grid-column: 2 / span 1;
					grid-row: 1 / span 1;
					justify-self: flex-end;
				}
				.product{
					grid-column: 1 / span 2;
                    margin-top: 12px;
				}
				.tracking{
					grid-row: 2 / span 1;
                    grid-column: 2 / span 1;
                    justify-self: flex-end;
                    padding-right: 16px;
				}
			}

			.row.btns{
				flex-direction: column;

				button, a{

					span{ flex: unset; }
				}
			}
		}
	}
}

.section-contact > *{
	display: flex;
	align-items: flex-start;
	gap: 72px;

	form{
		flex: 2;

		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;

		> .full-w{
			grid-column: 1 / span 2;
		}

		input, select, textarea{
			margin: 0;
			border: none;
			background-color: #F5F7FA;
			color: #222;
			border-radius: 5px;
			height: 44px;
			display: flex;
			align-items: center;
			min-width: 0;
		}

		input::placeholder, select::placeholder, textarea::placeholder, select:invalid{
			color: #696B6F;
		}

		textarea{
			height: unset;
			resize: vertical;
		}

		.checkbox{
			position: relative;

			input{
				position: absolute;
				left: 0;
				top: 50%;
				translate: 0 -50%;
				opacity: 0;
				width: 20px;
				height: 20px;
			}

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

				p{
					margin: 0;
				}

				.checkbox{
					width: 24px;
					height: 24px;
					border-radius: 5px;
					border: 1px solid;
				}

				span{
					flex: 1;
					background: -webkit-linear-gradient(0deg, #0C71A8, #39CC96);
					-webkit-background-clip: text;

					a{
						-webkit-text-fill-color: transparent;
						font-weight: 600;
						text-decoration: underline;
					}
				}
			}
		}

		.checkbox:has(input:checked){

			.checkbox{
				background-image: url(/cdn/shop/files/Icon_Stroke.svg?v=1732022792);
				background-position: center;
				background-repeat: no-repeat;
			}
		}

		.txt{
			color: #696B6F;
		}

		.button{
			display: flex;
			justify-content: flex-end;

			button{
				margin: 0;
				padding: 0 40px;
				height: 44px;
				display: flex;
				align-items: center; 
			}
		}

		.notification.error{
			padding: 16px;
			border: 1px solid #FDBA74;
			background-color: #FFF7ED;
			border-radius: 12px;
			display: flex;
			align-items: center;
			gap: 12px;
			line-height: 1.4;

			.errors{ flex: 1; }

			.errors{
				margin: 0; padding: 0;
				background-color: unset;
				color: unset;
			}
		}
		
		.notification.success{
			padding: 16px;
			border: 1px solid #56d92c;
			background-color: #f4fbf7;
			border-radius: 12px;
			display: flex;
			align-items: center;
			gap: 12px;
			line-height: 1.4;

			span{ flex: 1; }
		}
	}

	.right{
		max-width: 400px;
		align-self: stretch;
		display: flex;
		flex-direction: column;
		gap: 64px;

		.infos{
			padding: 16px;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 20px;
			border: 1px solid #AFB4C0;
			border-radius: 5px;

			> .title{
				font-size: var(--font-5);
				font-weight: 600;
			}

			> .phone{
				font-size: var(--font-6);
				font-weight: 600;
			}
		}

		.img{
			aspect-ratio: 3 / 4;
			border-radius: 5px;
			overflow: hidden;

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

	@media(min-width: 768px) and (max-width: 1000px){
		gap: 24px;

		form{

			input, select, textarea{
				grid-column: 1 / span 2;
			}
		}

		.right{
			gap: 24px;
			max-width: 300px;
		}
	}

	@media(max-width: 767px){
		flex-direction: column;
		margin-top: 80px;
		gap: 20px;

		form{

			input, select, textarea, .button{
				grid-column: 1 / span 2;
			}

			> .checkbox label{
				align-items: flex-start;
			}

			> .button{
				margin-top: 20px;

				button{
					width: 100%;
					justify-content: center;
				}
			}
		}

		.right{
			order: -1;
			max-width: unset;
			gap: 20px;

			.img{
				order: -1;
				aspect-ratio: 4 / 3;
			}
		}
	}
}

.section-contact > *:after{
	content: none;
}

.section-faq > *{
	display: flex;
	flex-direction: column;
	max-width: 1000px;

	.question{
		display: block;
		border-bottom: 3px solid #F5F7FA;
		padding: 20px;

		> .title{
			display: flex;
			font-size: calc(var(--font-4) + 2px);
			font-weight: 600;
			cursor: pointer;

			span{
				flex: 1;
			}
		}

		> .content{

			> .inner{
				padding-top: 20px;
				line-height: 1.5;

				*:first-child{ margin-top: 0; }
				*:last-child{ margin-bottom: 0; }

				.btn--custom{
					margin-bottom: 10px;
					box-shadow: none;
				}
			}
		}
	}
}

.section-404 > *{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 40px;

	> .title{
		font-size: var(--font-13);
		font-weight: 700;
		margin: 0;
	}

	> .subtitle{
		font-size: var(--font-8);
		margin: 0;
	}

	> .txt{
		*:first-child{ margin-top: 0; }
		*:last-child{ margin-bottom: 0; }

		a{
			text-decoration: underline;
			background: -webkit-linear-gradient(0deg, #0C71A8, #39CC96);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-weight: 600;
			position: relative;
		}

		a:after{
			content:'';
			display: block;
			width: 100%; height: 1px;
			position: absolute;
			bottom: 0; left: 0;
			background: linear-gradient(90deg, #0C71A8 0%, #39CC96 100%);
		}
	}
}

/* Error toast */
.toast {
  min-width: 280px;
  max-width: 90vw;
  background-color: white;
  color: #D32F2F;
  border-left: 4px solid #D32F2F;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 16px;
  position: fixed;
  z-index: 1000; 
  right: 24px;
  bottom: 32px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateY(100px);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.4s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
}

.toast::before {
  margin-right: 12px;
  font-size: 18px;
}

.toast.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.4s ease, opacity 0.3s ease, visibility 0s linear 0s;
}

.toast.hide {
  opacity: 0;
  transform: translateY(100px);
  transition: transform 0.4s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
}

.toast__content {
  flex: 1;
  padding-right: 12px;
	display: inline;
}

@media (max-width: 576px) {
  .toast {
    right: 16px;
    left: 16px;
    max-width: calc(100% - 32px);
    width: auto;
    bottom: 16px;
  }
}