/*
Theme Name: Demo Theme
Text Domain: promisys
Author: Promisys
Version: 1.0
*/

:root{
	--font-size: 1rem;
	--color: #363a42;
	--site-width: 75rem;

	--primary: hsl(134, 67%, 39%);
	--hover:   #62a11c;
	--accent : hsl(145, 33%, 87%);

	--cream: #f5f3ee;
	--cream-green: #c1d5aa;
	--cream-gray: #62665a;

	--fs-300: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
	--fs-400: clamp(1.03rem, calc(0.78rem + 0.22vw), 1.25rem);
	--fs-500: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
	--fs-600: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem);
}

body{
	font-family: futura-pt, sans-serif;
	font-weight: 400;
	font-size: var(--fs-400);
	line-height: 1.4;
	color: var(--color);
}

.container, .wrap{
	width: min(100% - 3rem, var(--site-width));
	margin-inline: auto;
}
body:not(#index) main{
/*	padding-block: 2rem;*/
}

:is(#cart, #checkout) main{
	padding-top: 2rem;
}


footer#footer{
	padding-top: 4rem;
	margin-top: auto;
}
footer .site-info{
	gap: 2rem;
}
footer nav ul{
	gap: 1rem;
}
footer .footer-container{
	border-top: 1px solid #e7e7e7;
	padding-top: 2rem;
}
footer .footer-container .flex{
	margin-bottom: 1rem;
}
footer .footer-container .flex > *{
	flex: 1;
}
footer .site-info{
	padding-block: 0.575rem;
	border-top: 1px solid #efefef;
	text-align: center;
	display: block;
}

.owl-carousel .owl-item{
	max-width: 90px;
}
footer .owl-stage{
	display: flex;
	justify-content: center;
}
footer .labels{
	border-block: 1px solid #efefef;
	padding: 1rem;
}
footer .labels img{
	filter: grayscale(100%);
	transition: filter 0.2s;
	max-height: 50px;
}
footer .labels img:hover{
	filter: grayscale(0%);
}

.socials{
	gap: 1rem;
}

#carousel{
	border-radius: 1rem;
	padding-inline: 2.5rem;
	z-index: 1;
}
.carousel .carousel-item figure{
	border-radius: 1rem;
	overflow: hidden;
}
#carousel .carousel-item img {
    width: 100%;
    width: 100%;
		max-height: 585px;
		object-fit: contain;
}
#carousel .caption{
	position: absolute;
	top: 58%;
	right: 10%;
	text-align: center;
}
#carousel .caption-description{
	color: #3a5f3b;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.2;
}
#carousel .button{
	color: #fff;
	text-decoration: none;
	border-radius: 50px;
	font-weight: 600;
	background: var(--primary);
	padding: 0.8rem 1.4rem;
	display: inline-block;
}
#carousel .button:hover{
	background: #2bb54b;
}


#index .page-footer{
	display: none;
}

#index .main-selection{
	padding-top: 3rem;
	translate: 0 -2rem;
	position: relative;
}

#index .featured-products .products{
	--_columns: 5;
}
#index .featured-products h3{
	text-align: center;
}


#index section.categories{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	text-align: center;
	gap: 1rem;
}
#index .categories figure{
	border: 1px solid #efefef;
	border-radius: 8px;
	margin: 0;
	padding: 1rem;
	cursor: pointer;
	transition: border-color 0.2s;
}
#index .categories figure strong{
	display: block;
}
#index .categories figure svg{
	width: 80px;
	transition: scale 0.2s, translate 0.2s;
}
#index .categories figure:hover{
	border-color: hsl(145deg 28.98% 78.03%);
	background: #fbfffb;
}
#index .categories figure:hover svg{
	scale: 1.05;
	translate: 0 -5px;
}
#index .categories figure a:hover{
	text-decoration: none;
}
#index .categories figure p:last-child{
	margin-bottom: 0;
}


#index section{
    padding-block: 3rem;
}
#index section:is(.groups, .eqn-values){
    background: var(--cream);
    box-shadow: 0 0 0 100vmax var(--cream);
    clip-path: inset(0 -100vmax);
}

section.groups .product-groups{
	--min-col-size: 106px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--min-col-size), 100%), 1fr));

	gap: 2rem;
	max-width: 50rem;
	margin-inline: auto;
}
div.product-groups figure{
	margin: 0;
}
div.product-groups a {
    display: flex;
    flex-direction: column;
    transition: color 0.2s;
    height: 100%;
    color: var(--color);
    align-items: center;
}
div.product-groups svg {
    color: var(--cream-green);
    height: auto;
    max-height: 100px;
    aspect-ratio: 1;
    transition: color 0.2s;
    width: 5rem;
    margin-inline: auto;
    margin-bottom: 10px;
    border: 3px solid currentColor;
    border-radius: 50%;
    padding: 0.2rem;
}
div.product-groups a:hover,
div.product-groups a:hover svg {
    color: var(--hover);
    text-decoration: none;
}
div.product-groups figcaption {
    font-weight: 500;
    text-transform: uppercase;
    margin-top: auto;
    text-align: center;
}


section.eqn-values .is-content-justification-center{
	gap: 1rem;
}
section.eqn-values .is-content-justification-center img{
	max-height: 7rem;
	width: auto;
}

section.eqn-values .heading{
	justify-content: center;
	align-items: center;
	gap: 2rem;
}
section.eqn-values .heading img {
    max-height: 7rem;
    width: auto;
}
section.eqn-values .heading h3{
	color: var(--cream-gray);
	font-size: 1.475rem;
	margin-bottom: 0;
	text-wrap: balance;
	font-weight: 400;
	max-width: 35ch;
}
section.eqn-values .values{
	--min-col-size: 200px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--min-col-size), 100%), 1fr));

	background: #b2b0a3;
	padding: 2rem;
	gap: 3rem;
	border-radius: 8px;
	color: #fff;
}
section.eqn-values .values .column{
	flex: 1;
}
section.eqn-values .values h3{
	color: #fff;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1;
	gap: .5rem;
	margin-bottom: 1.5rem;
}
section.eqn-values .values h3::before{
	content: '';
	background-image: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 92.9 57.3'><g fill='%23fff'><path d='M47.4,53.1c3.5-.5,13.4-1.7,22.2-6,9-3.7,16.8-10.5,21.2-9.6,2.1,1.4,2.6,5,1.6,7.6-4,8.9-23.8,12.9-45,8'/><path d='M47.7,51.2c2.9-1.8,11-6.5,17.3-13.4,6.7-6.5,11.6-15.3,15.6-16.1,2.1.4,3.4,3.2,3.2,5.8-1,9-16.8,19.9-36.1,23.7'/><path d='M48,49.9c1.6-2.4,6.2-9,9-16.5,3.1-7.3,4.5-15.6,7.1-17.8,1.6-.6,3.3,1,3.9,3,1.5,7-7.1,21-20,31.3'/><path d='M23.3,47.1c-9-3.7-16.8-10.5-21.2-9.6C0,38.9-.5,42.5.5,45.1c3.9,8.9,23.7,13,44.9,8-3.5-.6-13.4-1.8-22.1-6Z'/><path d='M44.9,49.9c-1.6-2.4-6.2-9-9.1-16.5-3.1-7.3-4.5-15.6-7.1-17.8-1.6-.6-3.3,1-3.9,3-1.5,7,7.1,21,20.1,31.3'/><path d='M45.1,51.2c-2.9-1.8-11-6.5-17.3-13.4-6.7-6.5-11.6-15.3-15.6-16.1-2.1.4-3.4,3.2-3.2,5.8,1,9,16.8,19.9,36.1,23.7'/><path d='M46.5,52.3c-4.9,6.6,5,6.6,0,0'/><path d='M46.5,51.5c28.3-68.7-28.2-68.7,0,0'/></g></svg>");
	background-size: cover;
	background-repeat: no-repeat;
	width: 34px;
	margin-inline: auto;
	height: 20px;
}
section.eqn-values .values h3::after{
	content: '';
	width: 5rem;
	margin-inline: auto;
	border-top: 1px solid currentColor;
	translate: 0 8px;
}
section.eqn-values .values ul{
	list-style: none;
	text-align: center;
	font-size: 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 0;
}


@media(max-width: 876px){
	section.domains{
		display: none;
	}
}

#index section.domains{
	padding-block: 0;
}
.areas-circle{
	background: url('../img/circle-bg.jpg') center no-repeat;
	width: 800px;
	height: 800px;
	position: relative;
	margin: 40px auto;
	--icon-size: 45px;
}
.areas-circle::before,
.areas-circle::after{
	content: '';
	width: 465px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	border: 3px solid #e7e7e7;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.areas-circle::after{
	width: 665px;
	border: 10px solid #e7e7e7;
	z-index: -1;
}
.areas-circle > div{
	position: absolute;
	width: var(--icon-size);
	height: var(--icon-size);
	opacity: 0;
	transition: opacity 0.2s;
}
.areas-circle > div h3{
	text-align: center;
	position: absolute;
	top: -5px;
	left: 50%;
	transform: translateY(-100%) translateX(-50%);
	width: 185px;
	padding: 0 20px;
	font-size: 16px;
	line-height: 20px;
	text-transform: uppercase;
	transition: transform 0.4s;
}
.areas-circle > div:hover h3{
	transform: translateY(-125%) translateX(-50%);
}
.areas-circle > div .icon{
	display: block;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	cursor: pointer;
	border-radius: 50%;
	transition: transform 0.4s;
}
.areas-circle svg{
	width: var(--icon-size);
	height: var(--icon-size);
	background: #fff;
	border-radius: 50%;
}
.areas-circle > div:hover .icon{
	transform: scale(1.2);
	transform-origin: center;
}

.owl-carousel .owl-stage-outer{
	display: flex;
	justify-content: center;
}
.brands.owl-carousel li{
	border: 1px solid #fff;
	border-radius: 8px;
	transition: border-color 0.2s;
}
.brands.owl-carousel li:hover{
	border-color: #efefef;
}

.contact-form .form-group:first-child{
	display: none;
}

.cart-item{
	border-bottom: 1px solid #efefef;
}
#cart #cart-subtotal-shipping{
	display: none;
}

#content #search_widget{
	float: none;
}

.page_block_content + .page_block_content{
	margin-top: 2rem;
}
.page_block_content img{
	width: auto;
}
.page_block_content :is(ul, ol){
	margin-bottom: 1rem;
}
li::before {
  display: none;
}

#content.page-content.flex{
	align-items: start;
	gap: 3rem;
}


section.page-banner{
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	aspect-ratio: 1905 / 320;
}
section.page-banner:not(.products){
	margin-bottom: 3rem;
}

#cms h1,
#index h2{
	color: var(--cream-gray);
	font-size: 1.6rem;
	text-transform: uppercase;
	padding-block: .4em;
	border-block: 1px solid currentColor;
	margin-inline: auto;
	margin-top: 0;
	margin-bottom: 2rem;
	max-width: max-content;
	letter-spacing: 3px;
	font-size: 1.6rem;
	text-transform: uppercase;
	text-align: center;
	font-weight: 100;
}

.page-content aside{
	background: var(--cream);
	padding: 2rem;
	border-radius: 6px;
	flex: 1;
	max-width: 16rem;
}
.page-content aside > strong{
	display: block;
	font-size: 18px;
	margin-bottom: 10px;
}
.page-content aside a:not(.curent){
	color: var(--color);
}
.page-content aside a.current{
	font-weight: 500;
}
.page-content aside li{
	list-style: none;
	padding: 5px 0;
}
.page-content aside li[class*="current"] > a{
	font-weight: 500;
}
.page-content aside li ul[class*="sub-menu"]{
	display: none;
	padding-left: 2rem;
}
.page-content aside li[class*="current"] ul[class*="sub-menu"]{
	display: block;
}
.page-content aside + .entry-content{
	flex: 1 0;
}

aside .links.block + .links.block{
	margin-top: 2rem;
}
aside .links.block:not(:has(a.current)){
	display: none;
}

.page_block_content ul li,
.page-content.page-cms ul li{
	list-style: none;
}
.page_block_content .entry-content ul li::before,
.page-content.page-cms .entry-content ul li::before{
	content: "\f06c";
	font: var(--fa-font-regular);
}
.page_block_content li svg,
.page-content.page-cms li svg{
	color: var(--primary);
}
.page_block_content .grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	gap: 2rem;
}

.login-form,
.forgotten-password .form-group,
.renew-password{
	max-width: 40rem;
	margin: 0 auto 2rem;
}
.forgotten-password .form-group{
	flex-direction: column;
	gap: 1rem;
}
.page-customer-account #content .no-account .flex{
	justify-content: center;
	gap: 1rem;
	padding: 1rem;
}
.page-customer-account #content .no-account .flex a{
	display: flex;
	gap: 5px;
}

/*REGISTRATION FORM*/
#customer-form > div{
	display: grid;
}
#customer-form .form-group{
}
#customer-form .form-control-comment{
	display: none;
}
#registration .popover{
	display: none;
}
#customer-form em{
	font-size: 0.7rem;
	text-wrap: balance;
	display: block;
}

.page-my-account #content .links{
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	margin-bottom: 2rem;
}
.page-my-account #content .links a{
	margin: 0;
	border-width: 2px;
}
.page-my-account #content .links a:hover{
	text-decoration: none;
	color: var(--primary);
	border-color: currentColor; 	
}
.page-my-account #content .links a#wishlist-link{
	display: none;
}
a.logout{
	display: inline-flex;
}

.pro__container{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
	gap: 1rem;
	border: 1px solid #efefef;
	border-radius: 1rem;
	padding: 2rem;
	margin-bottom: 2rem;
}
.pro__container figure{
	text-align: center;
	margin: 0 auto;
}
.pro__container figure > a{
	border-radius: 50%;
	display: inline-block;
	overflow: hidden;
}
.pro__container figure > a:hover img{
	scale: 1.05;
}
.pro__container figure img{
	aspect-ratio: 1;
	width: 170px;
	transition: scale 0.2s;
}

.pro__container figcaption{
	font-size: .9rem;
}
.pro__container h3{
	margin-bottom: 0;
}
.pro__container h3 a{
	font-size: 1.1rem;
	text-decoration: none;
}


a{
	color: var(--primary);
	text-decoration: none;
}
a:hover{
	color: var(--hover);
	text-decoration: underline;
}
a.btn,
button.btn,
input.btn,
a.wp-block-button__link{
	padding: .7em 2em;
	font-size: var(--font-size);
/*	background: var(--primary);*/
	border-radius: 50px;
	color: var(--color);
	border: 2px solid #d5d5d5;
	display: inline-block;
	font-weight: 500;
	background: #fff;
	cursor: pointer;
	max-width: fit-content;
}
button.btn.add-to-cart{
	display: flex;
}
a.btn:hover,
button.btn:hover,
input.btn:hover,
a.wp-block-button__link:hover{
	color: var(--primary);
	text-decoration: none;
	border-color: var(--primary);
}

a.social{
	font-size: 1.4rem;
	color: var(--color);
}
a.social:hover{
	color: var(--primary);
}

a.logout{
	color: red;
}

h1, h2, h3{
	line-height: 1.1;
	text-wrap: balance;
}
h1{
	font-size: var(--fs-600);
	margin-top: 1em;
	margin-bottom: 1em;
	color: var(--cream-gray);
}
.breadcrumb + h1{
	margin-top: 0;
}
h2{
	font-size: var(--fs-500);
}
p + h2{
	margin-top: 0.8em;
}
h3{
	font-size: var(--fs-400);
}

strong{
	font-weight: 500;
}
img{
	max-width: 100%;
	height: auto;
	display: block;
}
ul{
	margin: 0;
}

hr {
	border: 0;
	border-bottom: 1px solid #efefef;
	margin-block: 4rem;
}

p{
	margin-bottom: 1rem;
}


.flex{
	display: flex;
}
.flow > * + *,
.entry-content > * + *{
	margin-top: 1em;
}

*:has( > *[class*="fa-"]){
	display: flex;
	gap: 5px;
	align-items: center;
}

.block-social li a{
	font-size: 1.4rem;
}

.breadcrumb ol{
	padding: 0;
	display: flex;
	list-style: none;
	gap: 5px;
}
.breadcrumb li + li::before{
	display: inline-block;
	content: '>';
	font-size: .8rem;
}

@media(max-width: 768px){
	main{
		padding-top: 1rem;
	}
	.container, .wrap{
		width: 100%;
	}
	.carousel-indicators{
		display: none;
	}
	#custom-text{
		padding: 0;
	}
	header .user-info a span,
	header a.btn.pro{
		display: none;
	}
	footer#footer{
		padding-top: 0;
	}

	footer .labels{
		flex-wrap: wrap;
		gap: 1rem;
	}
	footer .footer-container .flex{
		flex-direction: column;
	}
	footer .links .title[data-target="#contact-infos"]{
		display: none;
	}
	footer .links #contact-infos{
		display: block;
		padding: 1rem;
		font-size: 1rem;
	}
	section.labels.flex > *{
		flex-basis: 15%;
	}

	hr{
		margin-block: 2rem;
	}

	div.logout{
		text-align: center;
		padding: 0 0 2rem;
	}
	.page-my-account #content .links{
		padding: 0 2rem;
	}
	#login-form .form-footer{
		text-align: center;
	}
	.page-customer-account #content .no-account .flex{
		flex-direction: column;
		align-items: center;
	}

	#carousel .carousel-item img{
		min-height: initial;
	}
	#carousel .caption a.button{
		font-size: 0.7rem;
		padding: .6rem;
	}

}


/**
 * Cookies
**/
.cookies{
	background: var(--accent);
	display: none;
	position: fixed;
	inset: auto 1rem 1rem auto;
	max-width: 50ch;
	padding: 25px;
	border-radius: 10px;
	z-index: 9;
}
@media( max-width: 768px ){
	.cookies{
		max-width: 100%;
		inset: auto 10px 10px 10px;
	}
}
.cookies span{
	display: block;
	padding: 8px;
	cursor: pointer;
	font-weight: 600;
	margin-top: 1em;
	text-align: center;
	border: 1px solid currentColor;
	color: var(--primary);
}
.cookies span:hover{
	color: #fff;
	background: var(--primary);
}


div.flex.labels{
	flex: 1;
	justify-content: flex-start;
	gap: 1rem;
	flex-wrap: wrap;
}

div.flex.labels img{
	width: auto;
	max-height: 70px;
}