#wrapper .wishlist-button-add{
	display: none;
}

:root{
	--color: #363a42;
	--site-width: 86.25rem;
	--font-size: .875rem;

	--primary-green:  hsl(172, 96%, 22%);
	--primary-yellow: hsl(30, 93%, 60%);

	--copper: hsl(15, 66%, 55%);
	--copperhover: hsl(15, 66%, 65%);

	--accent    : hsl(157, 25%, 94%);
	--accent-alt : #d7e2de;

	--primaryhover : hsl(158, 42%, 44%);
}

body{
	background: #f8fffc;
	font-size: var(--font-size);
	color: var(--color);
}
main{
	min-height: 100%;
	display: flex;
	flex-direction: column;
}
section#wrapper{
	display: flex;
	flex: 1;
}
#content{
	padding-bottom: 4rem;
}
.container, .wrap{
	width: min(100% - 1.6rem, var(--site-width));
	margin-inline: auto;
}
#wrapper .container{
	padding-block: 2rem;
}

body:not(#index) main{
/*	padding-block: 2rem;*/
}

.card {
    background: var(--accent);
    border-radius: 8px;
    padding: 1rem;
}

footer{
	margin-top: auto;
	background: var(--primary-green);
	padding-block: 1.5rem;
	color: #fff;
}

footer .links-container{
	align-items: flex-start;
}
footer a{
	color: #fff;
}
footer a:hover{
	color: #fff;
	text-decoration: underline;
}

footer #contact-infos{
	line-height: 1.7;
}

footer .flex{
	gap: 2rem;
}

footer .site-info{
	padding-top: 2rem;
}
footer nav ul{
	gap: 1rem;
}
footer ul li{
	margin-bottom: 5px;
}


.socials{
	gap: 1rem;
}

#carousel{
	z-index: 1;
	margin-bottom: 3rem;
}
#carousel h2{
	color: var(--primary-green);
}
#carousel figcaption{
	text-align: center;
	padding-top: 1rem;
}
#carousel figcaption p{
	margin: 0 auto;
}
#carousel figure img{
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    border-radius: 2rem;
}
#carousel .button{
	color: #fff;
	text-decoration: none;
	border-radius: 50px;
	font-weight: 600;
	background: var(--primary-green);
	padding: 0.8rem 1.4rem;
	display: inline-block;
}
#carousel .button:hover{
	background: #2bb54b;
}

#index .flex.home{
	gap: 4rem;
}
#index a.banner{
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 8px;
	overflow: hidden;
}
#index a.banner:hover{
	border-color: var(--primary-green);
}
#index .banner *{
	grid-area: stack;
}
#index .page-footer{
	display: none;
}

#index #custom-text{
	margin-bottom: 2rem;
}
#index #custom-text p{
	max-width: 90ch;
}
#index #custom-text p:last-of-type{
	margin-bottom: 0;
}
#index #custom-text p[style*="center"]{
	margin-inline: auto;
}
#index .page-text > p:first-child{
	margin-top: 0;
}

#index .pages_content{
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 2rem;
}
#index .pages_content h3{
	color: var(--primaryhover);
	margin-bottom: 0;
}

#main :is(ul, ol){
	list-style: initial;
	padding-left: 18px;
	max-width: 120ch;
}
#main :is(ul, ol) li{
	padding-block: 3px;
}
#main :is(ul, ol) li::marker{
	color: var(--primary-green);
}


#index .main-selection{
	--background: #ecf7f0;
	background: var(--background);
	box-shadow: 0 0 0 100vmax var(--background);
	clip-path: inset(0 -100vmax);
	padding-top: 3rem;
	translate: 0 -2rem;
	position: relative;
}


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

#main ul.carousel-inner{
	max-width: initial;
}
#main .carousel .carousel-control .icon-next:hover i,
#main .carousel .carousel-control .icon-prev:hover i{
    color: var(--copperhover);
}


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

#contact h1{
	text-align: center;
}
#contact #left-column{
	display: none;
}
#contact #content-wrapper{
	margin-inline: auto;
	float: none;
}

.contact-form .form-group:first-child{
	display: none;
}
#contact .grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	gap: 1rem;
}
#contact .grid strong{
	display: block;
}
.contact-rich .block{
	display: flex;
	line-height: 1.3;
}

#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{
	gap: 2rem;
}
.page-content aside{
	flex: 1 0 250px;
}
.page-content aside a:not(.current){
	color: var(--color);
}

.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-green);
}
.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;
}
.renew-password .form-group{
	display: flex;
	margin: 1rem 0 0;
}
.renew-password [class*="offset"]{
	margin-left: 0;
}
.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;
}

.contact-form {
	margin-bottom: 2rem;
}
.contact-form .alert-success{
	padding: 0;
	margin: 0;
	float: none;
}
.contact-form .alert-success ul{
	padding: 1rem;
}

#order-infos .box.shipping .box strong:nth-of-type(2):before {
	content: '';
	display: block;
}


#authentication h1{
	text-align: center;
}
#login-form > .flex{
	flex-direction: column;
}
#login-form .form-group{
	width: 100%;
}
button#submit-login{
	margin: 0 auto;
	display: flex;
}

#wrapper .alert ul{
	list-style: none;
}

.page-my-account #content .links{
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
	margin-bottom: 2rem;
}
.page-my-account #content .links a{
	margin: 0;
	display: grid;
	place-content: center;
	font-weight: 500;
	border-width: 2px;
	padding: 2rem;
	gap: 10px;
	color: var(--color);
}
.page-my-account #content .links a:hover{
	text-decoration: none;
	color: var(--primary-green);
	border-color: currentColor; 	
}

.page-my-account #content .links span{
	flex-direction: column;
	text-align: center;
}
.page-my-account #content .links svg{
	font-size: 1.4rem;
}
.page-my-account #content .links a#wishlist-link{
	display: none;
}

.field-password-policy + .field-password-policy{
	padding-block: 1rem;
}
.password-requirements-length,
.password-requirements-score{
	color: orange;
}
.password-requirements-length i,
.password-requirements-score i{
	font-size: 1rem;
}
.password-requirements-length:has(.text-success),
.password-requirements-score:has(.text-success){
	color: green;
}



.responsive-grid {
  --grid-max-col-count: 3;
  --grid-min-col-size: 200px;
  --grid-gap: 1rem;

  --grid-col-size-calc: calc(
    (100% - var(--grid-gap) * var(--grid-max-col-count)) /
      var(--grid-max-col-count)
  );
  --grid-col-min-size-calc: min(
    100%,
    max(var(--grid-min-col-size), var(--grid-col-size-calc))
  );

  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--grid-col-min-size-calc), 1fr)
  );
}
.responsive-grid[data-columns="5"]{ --grid-max-col-count: 5; }
.responsive-grid[data-columns="4"]{ --grid-max-col-count: 4; }
.responsive-grid[data-columns="3"]{ --grid-max-col-count: 3; }
.responsive-grid[data-columns="2"]{ --grid-max-col-count: 2; }



a.logout{
	display: inline-flex;
}


a{
	color: var(--primary-green);
	text-decoration: none;
}
a:hover{
	color: var(--accenthover);
	text-decoration: underline;
}
a.btn,
button.btn:not(.btn-touchspin, [data-action="show-password"]),
input.btn,
a.wp-block-button__link{
	padding: 1em 2em;
	font-size: var(--font-size);
	border-radius: 6px;
	color: #fff;
	display: inline-flex;
	font-weight: 700;
	background: var(--copper);
	cursor: pointer;
	border: 0;
	text-decoration: none !important;
	max-width: fit-content;
}
button.btn.add-to-cart{
	display: flex;
}
a.btn:hover,
button.btn:not(.btn-touchspin, [data-action="show-password"]):hover,
input.btn:hover,
a.wp-block-button__link:hover{
	background: var(--copperhover);
	text-decoration: none;
}

#wrapper a.btn[disabled],
#wrapper button[disabled]{
	background: gray;
}

button{
	border: 0;
	cursor: pointer;
	background: transparent;
}

a.logout{
	color: red;
}

h1, h2, h3{
	line-height: 1.1;
	text-wrap: balance;
}
h1{
	font-size: clamp(1.3rem, 2.5vw, 1.6rem);
	margin-top: 0;
	margin-bottom: 1em;
	color: var(--primary-green);
}
#cart h1{
	margin-bottom: .8rem;
}
h2{
	font-size: clamp(1.1rem, 2.5vw, 1.3rem);
	margin-bottom: .4em;
}
p + h2{
	margin-top: 1em;
}
h3{
	font-size: clamp(1rem, 2.5vw, 1.1rem);
}


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

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

p{
	margin-bottom: 1rem;
	line-height: 1.3;
	max-width: 75ch;
}

select{
	height: 40px;
	border-radius: 4px;
	border: 1px solid var(--primary-green);
	outline: none;
	background: #fff;
}

.error{
	background: #ffded2;
	padding: .8rem 1.5rem;
	border-radius: 8px;
	color: #a40000;
}
.error.min{
	display: inline-flex;
	padding: 6px 10px 5px;
	font-weight: 500;
	font-size: .7em;
	line-height: 1;
}
.error a{
	color: inherit;
	text-decoration: underline;
}



.breadcrumb{
	margin-bottom: 1rem;
}

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

main *:has( > *[class*="fa-"]){
	display: inline-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;
}

.align-right{
	margin-left: auto;
}

@media(min-width: 769px){
	#index .page-text{
		columns: 2;
	}
}
@media(max-width: 768px){
	#carousel figure{
		flex-direction: column;
	}
	.carousel-indicators{
		display: none;
	}
	

	footer .links-container{
		display: none;
	}

	footer #contact-infos{
		gap: 1rem;
	}
	footer .site-info{
		gap: 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(--primary-green);
	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-green);
}
.cookies span:hover{
	color: #fff;
	background: var(--primary-green);
}

#main .help-block ul{
	padding: 0;
}
.help-block ul li{
	list-style: none;
}


.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
	background: #fff !important;
}

.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled{
	opacity: 1 !important;
}
.ui-state-disabled .ui-state-default{
	background: #ececec !important;
	color: #ccc !important;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active{
	background: var(--primary-green) !important;
	color: #fff !important;
	border-color: var(--primaryhover) !important;
}