@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
/* 
Fonts:;
poppins : 300 400 600 700 800
rubik : 300 400 500 600
*/

:root {
	--primary-color:#FF4500;
	/* #E5C2AB; */
	/*--primary-color:#ff6b6b;*/
	/*couleur: #4F0216     #DCCCD0   #B899A1*/
	 /*#D3DDE6*/
	--secondary-color: rgb(79, 2, 22, 0.20); 
	/*--secondary-color: #794afa;*/
	/* --secondary-dark-color: #00BBFF; */
	--secondary-dark-color: #00a9a5;
	/* #4f0216; */
	/*--secondary-dark-color: #453c5c;*/
	--btn-color:#FF4500;
	--grey-color: #687080;

	--white-color: #ffffff;
	--light-bg-color: #f2f3f5;
	--light-text-color: #7c899a;
	--border-color : #e5e8ec;
	--dark-color : #0a021c;

	--font-small: 13px;
	--font-smaller: 11px;

	--pourcent100: 100%;
	--pourcent50: 50%;

	--fw3 : 300;
	--fw5 : 500;

	
	--fw6 : 600;
	--fw7 : 700;
	--fw8 : 800;

	--trans-backgrund-color : background-color .3s, color .3s;
	--trans-backgrund : background-color .3s;
	--trans-color : color .3s;
	--primary-font:'Monstserrat', 'sans-serif';
    --second-font: 'Prata', 'serif';
}
* { 
  margin: 0;
  padding: 0;
  
}
*,::before, ::after{
	box-sizing: border-box;
	
}
body{
	margin: 0;
	padding: 0;
	font-family: 'rubik', sans-serif;
	font-size: 1em;
	font-weight: 400;
	/*line-height: 1.4;*/
	color: var(--dark-color);
	background-color:#FFFFFF;
	/* background-color: var(--white-color);  */
}
a{
	text-decoration: none;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}
ul{
	list-style: none;
}
img{
	max-width: var(--pourcent100);
	vertical-align: middle;
}
strong {
	font-weight: var(--fw8);
}
table{
	border-collapse: collapse;
	border-spacing: 0;
}
input::placeholder{
	font: inherit;
}
h1, h2, h3, h4{
	/* font-family: 'poppins'; */
	font-family: var(--second-font);
}
h1{
	font-size: calc(1.3em+1vw);
	font-weight: var(--fw8);
	line-height: 1;
}
h2{
	font-size: 2.5em;
}
h3{
	font-size: 1.5em;
	font-weight: var(--fw5);
}
h4{
	font-size: 1.2em;
	font-weight: var(--fw5);
}

/********************/
/* Reusable Selector*/
/********************/
.container{
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 0.938em;
}
/* .column{ 
	margin-left: 0.938em;
	margin-right: 0.938em;
}

.column .row{
	padding: 0 0.938em;
}*/

.flexwrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.flexcenter{
	display: flex;
	align-items: center;
	justify-content: center;
}
.flexitem{
	display: flex;
	justify-content: center;
	align-items: center;
}
.flexcol{
	margin-left: 1em;
	display: flex;
	flex-direction: column;
	gap:1em;
}
.main-links a:hover{
	color: var(--secondary-color);
}

.second-links a:hover{
	color: var(--light-text-color);
}
.icon-small .icon-large{
	display: flex;
	align-items: center;
	padding: 0 0.25em;
	font-weight: normal;
}
.icon-small {
	font-size: 1.25em;
	margin: auto;
}
.icon-large{
	font-size: 1.75em;
	padding: 0 0.75em 0 0;
}
.mobile-hide{
	display: none;
}
.object-cover img{
	position: absolute;
	object-fit: cover;
	width: var(--pourcent100);
	height: var(--pourcent100);
	display: block;
}
.products .media{
	position: relative;
	flex-shrink: 0;
	
	overflow: hidden;
}

.primary-button, .secondary-button,  .light-button{
	font-size: var(--font-smaller);
	padding: 0.5em 1em;
	height: auto;
	width: fit-content;
	border-radius: 2em;
	transform: var(--trans-backgrund-color);
	display: inline-block;
}
.primary-button {
	background-color: var(--primary-color);
	color: var(--white-color);
}
.primary-button:hover {
	background-color: var(--dark-color);
}
.secondary-button,  .light-button{
	font-size: var(--font-smaller);
	font-weight:bold;
	margin-top:1em;
	padding: 1em 0em;
	height: auto;
	width: fit-content;
	border-radius: 2em;
	transform: var(--trans-backgrund-color);
	display: inline-block;
}
.primary-button1 {
	
	font-size: var(--font-smaller);
	font-weight:bold;
	margin-top:1em;
	padding: 0em 3em;
	height: 3.5em;
	width:140px;
	display:flex;
	justify-content: center;
	border-style: solid;
	color: white;
	background-color: var(--btn-color);
	border-radius: 2em;
	transform: var(--trans-backgrund-color);
	display: inline-block;
}
input[type=submit] {  
	font-size: var(--font-smaller);
	font-weight:bold;
	margin-top:1em;
	padding: 1em 0em;
	height: 35px;
	width: fit-content;
	border-radius: 2em;
	transform: var(--trans-backgrund-color);
	display: inline-block;
	display:flex;
	justify-content: center;
	background-color: var(--btn-color) ;
	width:140px;
	color: white;

	}
.primary-button1:hover {
	background-color: var(--dark-color);
}
.secondary-button{
	background-color: var(--secondary-dark-color);
	color: var(--white-color);
}
.secondary-button:hover {
	background-color: var(--light-bg-color);
	color: var(--secondary-dark-color);
}
.light-button{
	background-color: var(--light-bg-color);
	color: var(--white-color);
}

.view-all{
	font-size: var(--font-small);
	display: flex;
	gap:1em;
	transition: var(--trans-color);
}
.mini-text{
	font-size: var(--font-smaller);
	color: white;
}

/****************/
/* 01. Header   */
/****************/
.header li > a{
	display: flex;
	position: relative;
	line-height: inherit;
	transition: var(--trans-color);

}
.off-canvas li > a{
	display: flex;
	position: relative;
	line-height: inherit;
	transition: var(--trans-color);

}
/*01. Header--------/
/* a. Header   top */
/****************/
.header-top{
	height: 30px;
	margin-top: 5px;
	margin-bottom: 0 ;
}

.header-top .wrapper{
	font-size: var(--font-small);
	font-weight: var(--fw3);
	justify-content: space-between;
	/*line-height: 42px;*/
}
.header-top, .header-nav{
	background-color: var(--secondary-dark-color);
	color: white;
	font-size: 13px;
	font-weight: bold;
}
.header-top .wrapper ul {
	gap: 2em;
}
.header-top li{
	position: relative;
}
.header-top ul ul{
	position: absolute;
	left: 1em;
	line-height: 2em;
	background-color: var(--white-color);
	border: 1px solid var(--border-color);
	z-index: 1;
	display: none;
}
.header-top .right ul ul li a{
	padding: 0.25em 1em;
}
.thetop-nav .right ul ul li a{
	padding: 0.25em 1em;
}
.header-top .right ul ul li.current a{
	background-color: var(--border-color);
}
.header-top li:hover ul{
	display: block;
}
.thetop-nav .right ul ul li.current a{
	background-color: var(--border-color);
}
.header-top li:hover ul{
	display: block;
}


/* 01. Header *************
   b. header Nav */
/****************/
.header-nav{
	padding: 0.5em 0;
	margin-bottom: 1.5em; 
	border-bottom: 1px solid var(--border-color);
}

.header-nav ul ul{
 display: none;
}
.trigger{
	font-size: 1.5em;
	display: flex;
	padding: 0.25em;
	margin-right: 0.5em;
}
.logo a{
	font-family: 'Poppins';
	font-size: 1.75em;
	position: relative; 
	font-weight: var(--fw8);
	display: flex;
	padding-left: 0.75em;
	margin-right: 2em;
}
@media (min-width: 700px) {
	.logo{
		top:-20px;
	}
}
.flylogo{
	position: absolute;
	top: -15px;
	right:-40px;
	width: 38px;
	height: 38px;
	/*border-radius: var(--pourcent50);*/
	/*background-color: var(--primary-color);*/
	z-index: 1;
}
.circle{
	position: absolute;
	top: -15px;
	left : 0;
	width: 35px;
	height:35px;
	border-radius: var(--pourcent50);
	background-color: var(--light-bg-color);
	z-index: -1;
}
.circle::before{
	content: '';
	position: absolute;
	width: 25px;
	height: 25px;
	border-radius: var(--pourcent50);
	/*background-image:  url(admin/images/logo.jpg);*/
	background-color: var(--secondary-color);
	
	bottom: 5px;
	right: 5px;
	opacity: 0.4;
}

.circle1{
	position: absolute;
	top: -15px;
	left : 0;
	width: 23px;
	height: 23px;
	border-radius: var(--pourcent50);
	background-color: white;
	z-index: -1;
}
.circle1::before{
	content: '';
	position: absolute;
	width: 13px;
	height: 13px;
	border-radius: var(--pourcent50);
	/*background-image:  url(admin/images/logo.jpg);*/
	/*background-color: var(--secondary-color);*/
	/*background-color: var(--secondary-color);*/
	bottom: 5px;
	right: 5px;
	opacity: 0.4;
}
.header-nav{
	
	display: flex;
	justify-content: space-around;
	align-items: center;
	
	
	padding: 0;
	margin: 0;
	border-bottom: 0;
}
.header-nav nav > ul {
	line-height: 100px;
	gap:2em;
}
.fly-item{
	position: absolute;
	height: 16px;
	font-size:  var(--font-smaller);

	padding: 3px;
	text-align: center;
	line-height: 10px;
	color: var(--white-color);
}
.header-nav  .right  .fly-item{
	top:-50%;
}
nav .fly-item,
.header-nav .mini-cart .price .fly-item{
	top: 13%;
	margin-top: -24px;
	width: 50px;
	border-radius: 3px;
	/*right: 32px;*/
	background-color: var(--primary-color);
}
.header-nav  .right{
	position: relative;
	margin-left: auto;
}
.header-nav  .right .icon-large{
	position: relative;
}
.header-nav  .right  .fly-item{
	top: 0%;
	width: 16px;
	height: 16px;
	background-color: var(--primary-color);
	border-radius:var(--pourcent50); 
}
.mega .flexcol{
	flex: 1;
	min-width: 100px;
	padding-right: 2.5em;
	margin-bottom: 1.5em;
	z-index: 1;
}
/* 01. Header *************
   c.Header-main, Departments category */
/****************/
.header-main{
	width: 100vw;
	height: 50px;
	background-color: var(--secondary-dark-color);
	padding: 0 0;
	margin-bottom: 1em;
	margin-top: -10px;
}
.dpt-cat{
	
	position: relative;
	z-index: 10;
}
.dpt-cat .dpt-head{
	position: relative;
	width: 300px;
	height: 45px;
	padding: 0.5em 0.5em;
	background-color: var(--primary-color);
	border-radius: 7px 7px 0 0;
	color: var(--white-color);
	margin-bottom: -0.8em;
	margin-top: -0.5em;
}


.dpt-cat .dpt-head .mini-text{
	color: var(--secondary-dark-color);

}
.dpt-cat .dpt-trigger{
	position: absolute;
	right: 0;
	top: 0;
	padding: 1.3em;
	height: 60px;
	width: 60px
}
.dpt-menu > ul > li > a{
	font-size: var(--font-small);
	height: 45px;
	align-items: center;
}
.dpt-menu .has-child:hover ul{
	display: block;
}




/* 01. Header *************
   d.Header sarch form */
/****************/

.header-main .right{
	flex: 1;
	height: 40px;
	margin-top: 5px;
}
form {
	position: relative;
}
.search-box .search{
	height: 40px;
	
}
form.search input{
	line-height: 3.25em;
	padding: 0 7em 0 2.5em;
	border: 0;
	outline: 0;
	width: var(--pourcent100);
	border-radius: 30px;
	font-size: 0.9em;
	font-weight: var(--fw3);
	height:40px;
}

form.search span{
	position: absolute;
	top: 0;
	padding: 0.55em 1.5em;
	font-size: 1em;
	color: var(--light-text-color);
	height: var(--pourcent100);
	font-size: 0.875em;
	font-weight: var(--fw6);
	color: var(--light-text-color);
	border-radius: 0 7px 7px 0;
}
form.search button{
	position: absolute;
	top: 2px;
	right: 5px;
	/* padding: 0.55em 1.5em; */
	font-size: 1em;
	color: var(--white-color);
	background-color: var(--primary-color);
	border-radius: 50%;
	/* height: var(--pourcent100); */
	height: 35px;
	width: 35px;
	right: 0;
	border: 0;
	outline: 0
}

form.search button:hover{
	background-color: var(--dark-color);
}

/* 01. Header *************
   e.Header sarch form */
/****************/
.site-off{
	position: fixed;
	width: 320px;
	height: var(--pourcent100);
	background-color: var(--white-color);
	overflow-y: auto;
	z-index: 1000;
	transform: translateX(-100%);
	visibility: hidden;
	transform: transform 0.4s , visibility 0.4;
	will-change: transform, visibility;
}
.showmenu .site-off{
	transform: translateX(0);
	visibility: visible;
	transform: transform 0.4s 0s, visibility 0.4 0s;
}
.off-canvas{
	width: var(--pourcent100);
	height: var(--pourcent100);
	touch-action:auto;
	padding: 1.5em;
}
.off-canvas .canvas-head{
	color: var(--white-color);
	justify-content: space-around;
	padding:  0em;
	
	margin:  0em 0em 0em;
	
	background-color: var(--secondary-dark-color);
	border-bottom-right-radius: 160px 25px;
}
.off-canvas .canvas-head .logo{
	z-index: 10;
	position: relative;
}
.off-canvas .canvas-head .logo .circle{
	opacity: 0.75;
}
.t-close{
	font-size: 1.25em;
	width: 32px;
	height: 32px;
	
	border-radius: var(--pourcent50);
	background-color: var(--secondary-dark-color);
	color: var(--white-color);

}
.t-close:hover{
	background-color: var(--white-color);
	color: var(--secondary-dark-color);
	opacity: 0.75;
}
.off-canvas .dpt-head{
	font-size: var(--font-small);
	padding: 1em;
	margin-bottom: 1em;
	text-align: center;
	background-color: var(--light-bg-color); 
	border-radius: 7px 7px 0 0;
}
.off-canvas .has-child ul{
	font-size: var(--font-small);
	font-weight: var(--fw3);
	line-height: 20px;
	padding-left: 3em;
	height: auto;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
}
.off-canvas .has-child .mega{
	font-size: var(--font-small);
	font-weight: var(--fw3);
	line-height: 20px;
	padding-left: 3em;
	height: auto;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
}
.off-canvas .expand > ul{
	max-height: 2000px;
}
.off-canvas .expand > .mega{
	max-height: 2000px;
}
.off-canvas .thetop-nav ul, .off-canvas nav >ul{
	flex-direction: column;
	align-items: flex-start;
	font-size: var(--font-small);
	line-height: 36px;
	padding-top: 1.25em;
	margin: 1.25em;
	border-top: 1px solid var(--border-color);
}
.off-canvas nav .mega {
	padding: 0;
}
.off-canvas nav .mega .products {
	display: none;
}

.off-canvas .has-child .icon-small {
	padding: 0.5em;
	line-height: initial;
}
.off-canvas .has-child .icon-small i{
	transform: 90deg;
}

.off-canvas .has-child{
	width: var(--pourcent100);
}
.off-canvas .thetop-nav .right > ul:nth-child(1) > a{
	display: none;
}
.off-canvas .thetop-nav .right > ul > li:nth-child(2) > a{
	display: none;
}
.off-canvas .thetop-nav .right ul ul{
	display:flex;
	flex-direction: row;
}
.off-canvas .thetop-nav .right ul ul li a{
	padding: 0.5em;
	border: 1px solid var(--border-color);
	line-height: 16px;
	margin: 0 0.5em 0.5em 0;
}
/******************/
/* 02.Slider  */
/*****************/
/*
@media screen and (min-width : 1025px){
	.slider .item{
		position: relative;
		height: 474px;
	}
	.slider .itemtb{
		display:none;
	}
}
 @media screen and (min-width : 700px) and (max-width : 1025px){ 
	.slider .item{
		display: none;
	}
	.slider .itemtb{
		display: block;
		position: relative;
		height: 474px;
		
	}
	.slider  .itemb::before{
		content:'';
		position: absolute;
		top: 30%;
		left: 0;
		width: 450px;
		height: auto;
		background-color: var(--white-color);
		z-index: 1;
		filter: blur(50px);
		opacity: 0.8;
	}
	
}*/




.slider  .item::before{
	content:'';
	position: absolute;
	top: 30%;
	left: 0;
	width: 450px;
	height: auto;
	background-color: var(--white-color);
	z-index: 1;
	filter: blur(50px);
	opacity: 0.8;
}
.slider .text-content{
	position: relative;
	height: var(--pourcent100);
	justify-content: flex-end;
	padding: 0 0 10% 10%;
	z-index: 1;
}
.slider h4{
	font-size: var(--font-small);
	font-weight: var(--fw7);
	width: fit-content;
	padding: 4px 10px;
	background-color: var(--dark-color);
	color: var(--white-color);
	border-radius: 4px;
}
.text-content h2 span:first-child{
	font-weight: var(--fw3);
	columns: var(--light-text-color);
}
.text-content :where(h2,h3) span:first-child{
	font-weight: var(--fw3);
	color: var(--light-text-color);
}

.text-content h3 span:last-child{
	color: var(--secondary-dark-color);
	text-transform: uppercase;
	letter-spacing: -1px;
}
.swiper-pagination .swiper-pagination-bullet-active{
	background-color: var(--secondary-dark-color);
	/* -image-rendering:  */
}

.myslider :is(.swiper-button-next , .swiper-button-prev){
	outline: 0;
	color: var(--secondary-dark-color);
	transition: var(--trans-backgrund), transform 0.3s;
}

.myslider .big-image:hover .swiper-button-next{
	transform: translateX(10px);
}

.myslider .big-image:hover .swiper-button-prev{
	transform: translateX(-10px);
}
.myslider :is(.swiper-button-prev , .swiper-button-next)::after {
	font-size: 1.5em;
}

.myslider .big-image:hover :is(.swiper-button-prev , .swiper-button-next){
	background-color: var(--light-bg-color);
}


/* ****************** */
/* Slider page accessoires */
/* ******************* */
.containersl{
	max-width: 124rem;
	padding: 0 1rem;
	margin: 0 auto;
}
.text-center{
	text-align: center;
}
.section-heading{
	font-size: 3rem;
	color:orange;
	padding:rem 0;
}
#tranding{
	padding: 4rem 0;
}

@media (max-width:1440px){
	#tranding{
		padding: 7rem 0;
	}
}
#tranding .tranding-slider{
	height: 52rem;
	padding: 2rem 0;
	position: relative;
}
@media (max-width:500px){
	#tranding .tranding-slider{
		height:45rem;
	}
}
.tranding-slide{
	width: 37rem;
	height: 42rem ;
	position: relative;
}
@media (max-width:500px){
	.tranding-slide{
		width: 28rem !important;
		height: 36rem !important;
	}
	.tranding-slide .tranding-slide-img img{
		width: 28rem !important;
		height: 36rem !important;
	}
}
.tranding-slide .tranding-slide-img img{
	width: 37rem;
	height: 42rem;
	border-radius: 2rem;
	object-fit: cover;
}
.tranding-slide .tranding-slide-content{
	position:  absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
.tranding-slide-content .bague-price{
	position: absolute;
	top: 2rem;
	right: 2rem;
	color: #000;
}
.tranding-slide-content .tranding-slide-content-bottom{
	position: absolute;
	bottom: 2rem;
	color:var(--btn-color);
}
.bague-rating{
	padding-top: 1rem;
	display: flex;
	gap: 1rem;
};
.rating ion-icon{
	color: orangered
}
.swiper-slide-shadow-right,
.swiper-slide-shadow-left{
	display:none;
}
.tranding-slide-controle{
	position: relative;
	bottom: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tranding-slide-controle .swiper-button-next{
	left: 58% !important;
	transform: translateX(-58%) !important;
}
@media (max-width:990px){
	.tranding-slide-controle .swiper-button-next{
		left: 70% !important;
		transform: translateX(-70%) !important;
	}
}
@media (max-width:450px){
	.tranding-slide-controle .swiper-button-next{
		left: 80% !important;
		transform: translateX(-80%) !important;
	}
}
@media (max-width:990px){
	.tranding-slide-controle .swiper-button-prev{
		left: 30% !important;
		transform: translateX(-30%) !important;
	}
}
@media (max-width:450px){
	.tranding-slide-controle .swiper-button-prev{
		left: 20% !important;
		transform: translateX(-20%) !important;
	}
}
.tranding-slide-controle .slider-arrow{
	background-color: white;
	width: 3.5rem;
	height: 3.5;
	border-radius: 50%;
	left: 42%;
	transform: translateX(-42%);
	filter:  drop-shadow(0px 8px 24px rgba(18,28, 53, 0.1));
}
.tranding-slide-controle .slider-arrow ion-icon{
	font-size: 2rem;
	color: #222224;
}
.tranding-slide-controle .slider-arrow::after{
	content:'';
}
.tranding-slide-controle .swiper-pagination{
	position:relative;
	width: 15rem;
	bottom: 1rem;
}
.tranding-slide-controle .swiper-pagination .swiper-pagination-bullet{
	filter:  drop-shadow(0px 8px 24px rgba(18,28, 53, 0.1));
}
.tranding-slide-controle .swiper-pagination .swiper-pagination-active{
	background: orangered;
}

/******************/
/* 03.Brands */
/*****************/
.brands .wrapper{
	justify-content: space-around;
	flex-wrap: wrap;
	padding: 2em 0;
}
.brands .item img{
	opacity: 0.25;
	transition: opacity  0.3s;
}
.brands .item a:hover img{
	opacity :1;
}


/******************/
/* 04. product block style */
/*****************/
.sectop{
	justify-content: space-between;
	padding-bottom: 0.5em;
	margin-bottom: 2em;
	border-bottom:1px solid var(--border-color);
}
.sectop h2{
	position: relative;
	font-size: 1.5em;
	font-weight: var(--fw7);

}
.sectop h2 span:not(.circle){
	padding: 0 0 0 2em;
}
.sectop h2 .circle{
	top: -5px;
}



/*04.product******************/
/* a.Global product  */
/*********************/
.products .offer{
	text-align: center;
	margin-bottom: 1.5em;
}
.products .offer p{
	text-transform: uppercase;
	margin-bottom: 0.5em;
}
.products .offer ul{
	gap: 1em;
}
.products .offer ul li{
	position: relative;
	width: 25px;
	height: 25px;
	align-items: center;
	
	color: var(--secondary-dark-color);
	background-color: var(--light-bg-color);
	border-radius: 5px;
}
.products .offer ul li:not(:last-child)::before{
	content: ':';
	position: absolute;
	right: -0.6em;
	color: var(--light-text-color)
}
.products :where(.image, .thumbnail) img{
	transition: 0.3s;
}
.products .image-show:hover img{
	transform : scale(1.2);
}

.products .hoverable{
	position: absolute;
	top:0;
	right: 0;
}

.products .hoverable li a{ 
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0.25em;
	margin: 0.25em;
	border-radius: var(--pourcent50);
	line-height: 1;
	background-color: var(--white-color);
	opacity: 0.5;
	transition: var(--trans-backgrund-color) , opacity 0.3s;
}
.products .item:hover .hoverable li a{ 
	opacity : 1;
}
.products .hoverable li a:hover{ 
	color: var(--white-color);
	background-color: var(--dark-color);
	}

.products .hoverable li.active a:hover{ 
		background-color: var(--primary-color);
}
.products .hoverable li:not(.active) { 
		transform: translateX(100%);
		opacity: 0;
		transition: .3s, opacity .2s;
}
.products .item:hover .hoverable li { 
	opacity : 1;
	transform: translateX(0);
}
.products .item:hover  li:last-child { 
	transition-delay: 0.1s;
}
.products .discount{
	top: auto;
	right: 0;
	left: auto;
	bottom: 0; 
	background: transparent;
	z-index : 1;
}
.products .discount::before{
	background-color: var(--dark-color);
}
.products .discount span{
	position: relative;
	font-size: var(--font-smaller);
	font-weight: var(--fw5);
}
.products .content{
	
	display: flex;
	flex-direction: column;
}
.products:where(.big, .main, .mainb, .one) .content{
	gap:1em;
	margin-top: 1.25;
	
}

.products .rating{
	display: flex;
	align-items: center;
	gap: 0.5em;
	
}
.products .rating .stars{ 
	width: 80px;
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 18.26l-7.053 3.948 1.575-7.928L.587 8.792l8.027-.952L12 .5l3.386 7.34 8.027.952-5.935 5.488 1.575 7.928z' fill='rgba(241,196,14,1)'/%3E%3C/svg%3E");
	background-position-y:top;
	/* background-repeat-y: no-repeat; */
	
}
/*to set with of stars*/
.products .item:where(:nth-child(3), :nth-child(3)) .stars{
	width : 64px;
	
}
.products h3{
	font-family: 'Rubik';
	font-size: 1em;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp:2;
	display: -webkit-box;
	-webkit-box-orient:vertical;
}
.products h3 a:hover{
	text-decoration: underline;
}
.products .price .current{
	font-size: clac(1em + 1vw);
	color: green;
	margin-right: 0.25em;
}
.products .price .normal{
	color: var(--light-text-color);
	text-decoration: line-through;
}
.products .stock .qty{
	display: flex;
	justify-content: space-between;
}
.products .stock .bar{
	height: 3px;
	margin-top: 1em;
	background-color: var(--border-color);
	overflow: hidden;
}
.products .stock .available{
	height: 3px;
	width: 21%;
	background-color: var(--secondary-color);
}
.products .item{
	display: flex;
	position: relative;
}
.products .stock-danger{
	color: var(--primary-color);
}
.flexwrap .row{
	flex: 0 0 100%;
	width: 100%;
	margin-bottom: 2em;
}
/*04.Product*******************/
/* b.big product */
/*****************/
.products.big .item{
	flex-direction: column;
	padding: 2.5em;
	border: 2px solid var(--secondary-dark-color);
	border-radius: 7px;
	width: 300px;
	margin: 0 auto;
}

/*04.Product*******************/
/* c.big product */
/*****************/

.products.mini .item{
	margin-bottom: 2em;
}
.products.mini .media{
	width: 240px;
	height: 240px;
	margin-left: 1.25em;
}
.products .content{
	margin: 0;
	gap:0.75em;
}

.products:where(.mini, .main) h3 {
	font-weight: 400;
}

/*04.Product*******************/
/* d.main product */
/*****************/
.products.main .item{
	flex-direction: column;
	flex: 0 0 100%;
	padding: 0 0.938em;
	padding-bottom: 2em;
}
.products.main .media{
	/* height: 250px; */
	height: 200px;
	width: 200px;
	border-radius: 50%;
}

.products.main .footer{
	position: absolute;
	left: 0;
	right: 0;
	padding: 0 1em 1em;
	border-radius: 7px;
	z-index: 1;
	background: linear-gradient(0deg, var(--light-bg-color) 0%, var(--white-color) 70%);
	visibility: hidden;
	opacity: 0;
	will-change: opacity;
	transition: all .2s ease-in-out;
}
.products.main .footer ul{
	list-style: disc;
	padding: 1.25em 0 0 1.25em;
	line-height: 1.8;
	border-top: 1px solid var(--border-color);
	margin-top: 145px; 
}
.products.mainb .item:hover .footer{
	opacity: 1;
	visibility: visible;
}

.mainb.flexwrap{
	min-width: 350px;
} 

.products.mainb .item{
	flex-direction: column;
	flex: 0 0 100%;
	padding: 0 0.938em;
	padding-bottom: 2em;
}

.products.mainb .footer{
	position: absolute;
	left: 0;
	right: 0;
	padding: 0 1em 1em;
	border-radius: 7px;
	z-index: 1;
	background: linear-gradient(0deg, var(--light-bg-color) 0%, var(--white-color) 70%);
	visibility: hidden;
	opacity: 0;
	will-change: opacity;
	transition: all .2s ease-in-out;
}
.products.mainb .footer ul{
	list-style: disc;
	padding: 1.25em 0 0 1.25em;
	line-height: 1.8;
	border-top: 1px solid var(--border-color);
	margin-top: 145px; 
}
.products.mainb .item:hover .footer{
	opacity: 1;
	visibility: visible;
}

/******************/
/*     5.Banner    */
/*****************/
.banners .item{
	position: relative;
	background-color: var(--white-color);
	border: 1px solid var(--border-color);
}
.banners h4{
	margin-left: 1em;
}
.banners .image{
	text-align: right;
}
.banners .get-gray{
	background-color: var(--border);
}
.banners :where(.text-content, .over-link){
	position: absolute;
	top: 0;
	left:0;
	width: var(--pourcent100);
	height: var(--pourcent100);
}
.banners .text-content{
	padding: 1.5em 2.5em;
}
.banners h3{
	font-size: calc(1em + 0.5vw);
	font-weight: var(--fw3);
}
.banners h3 span{
	font-size: 80%;
}
.banners .primary-button{
	z-index: 3;
}


.banners .product-categories .item{
	display: flex;
	padding: 1.5em;
}
.banners .product-categories .image{
	max-width: 150px;
}
.mini-links ul{
	font-size: --font-small;
	color: var(--light-text-color);
	margin-top: 1em;
}
.banners .second-links{
	margin-top: 2em;
}
.mini-links li a:hover{
	text-decoration: underline;
}
.banners .image:hover img{
	transform:scale(1.5);
}
/****************/
/* Footer  */
/*****************/

/*5.Footer*******************/
/* a.newsletter */
/*****************/
.newsletter{
	padding:2.5em 0;
	background-color: var(--dark-color);
	color: var(--white-color);
}
.newsletter h3{
	font-size: 1.5em;
}
.newsletter p{
	font-weight: var(--fw3);
	color: var(--border-color);
	margin: 0.5em 0 1.5em;
}
.newsletter p strong{
	color: var(--primary-color);
}
.newsleter form{
	max-width: 500px;
	width: var(--pourrcent100);

}
/*5.Footer*******************/
/* b.Widgets */
/*****************/
.widgets {
	padding: 0.5em 2.5em;
	background-color: var(--light-bg-color) 
}
/*5.Footer*******************/
/* c.footer */
/*****************/
.footer-info{
	padding : 0.5em 2.5em;
}
.footer-info .wrapper .flexcol{
	align-items: center;
	gap: 0;
}
.footer-info ul li a{
	font-size: 1.25em;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: var(--light-bg-color);
	border-radius: var(--pourcent50);
	margin: 0.25em;
	transition: var(--trans-backgrund);
}
.footer-info ul li a:hover{
	background-color: var(--border-color);
}
.footer-info .logo a{
	margin: 0 0 1em -0.75;
}
.footer-info .mini-text{
	margin-top: 2em;
	text-align: center;
}
/*5.Footer*******************/
/* d.whatsapp */
/*****************/
.container-boton{
	position:fixed;
	bottom:40px;right:10px;
}

/******************/
/* 7.Overlay */
/******************/
.overlay {
	position: fixed;
	width: var(--pourrcent100);
	height: var(--pourrcent100);
	top:0;
	left:0;
	z-index: 999;
	background-color: rgb(0, 0, 0, .4 );
	visibility: hidden;
	opacity: 0;
	will-change: visibility opacity;
}
.showmen {
	opacity: 1;
	visibility: inherit;
}
/******************/
/* 8.page single  */
/******************/

/*page single*****************/
/* a.Departement Menu */
/*****************/

.page-home .dpt-cat .dpt-trigger,
.dpt-trigger .ri-close-line,
.showdpt .dpt-trigger .ri-menu-3-line{
	display:none;
}
.showdpt .dpt-trigger .ri-close-line{
	display:block;   
}

/*8.Page single******/
/* b.breadcrumb   */
/*****************/
.breadcrumb{
	font-size: var(--font-small);
	margin-bottom: 2em;
}
.breadcrumb li:not(:last-child)::after{
	content: '/';
	padding: 0 0.35em;
}
.breadcrumb li:last-child{
	display: block;
	display: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--light-text-color);

}
/*8.Page single**********/
/* c.Product details  */
/*********************/
.products.one .item{
	flex-direction: column;
}

.products.one .price .discount{
	font-size: 1em;
	font-weight: var(--fw7);
	line-height: 1;
	position: absolute;
	top:0;
	bottom: auto;
	padding: 1em;
	z-index: 2;
	background: var(--dark-color);
	color: var(--white-color);
	border-radius: var(--pourcent50);
	margin:0.5em;
}

.products.one :where(.big-image, .small-image){
	overflow: hidden;
}

.products.one .big-image{
	position: relative;
	margin-bottom: 1em;
}

.products.one .big-image img{
	object-fit: cover;
	width: var(--pourcent100);
	height: var(--pourcent100);
	display: block;
}
.products.one .small-image img{
	object-fit: cover;
	width: var(--pourcent100);
	height: var(--pourcent100);
	display: block;
}
.products.one  .thumbnail-show{
	position: relative;
	width: 80px;
	height:90px;
	overflow: hidden;
	margin: 0 2em 2em 0;
}
.products :is(.swiper-button-next , .swiper-button-prev){
	outline: 0;
	color: var(--secondary-dark-color);
	transition: var(--trans-backgrund), transform 0.3s;
}

.products .big-image:hover .swiper-button-next{
	transform: translateX(10px);
}

.products .big-image:hover .swiper-button-prev{
	transform: translateX(-10px);
}
.products :is(.swiper-button-prev , .swiper-button-next)::after {
	font-size: 1.5em;
}

.products .big-image:hover :is(.swiper-button-prev , .swiper-button-next){
	background-color: var(--light-bg-color);
}
/*lightbox: go to fslightbox.com*/
/*7.Page single********/
/* d.Product description  */
/*********************/
.products.one .available{
	font-size: var(--font-small);
	font-weight: var(--fw5);
	padding: 0.5em;
	margin-right: 1em;
	border-radius: 3px;
	color: #10ac84;
	background-color: var(--light-bg-color);
}
.products.one .add-review{
	color: var(--dark-color);
}
.products.one .price{
	display: flex;
	gap:1em;
	align-items: center;
	flex-wrap: wrap;
}
.products.one .price .current{
	font-size: 2.5em;
}
.colors{
	margin-top: 1em;
}
.sizes {
	margin-top: 1em;
}
.products .variant form{
	display: flex;
	margin-top: 0.5em;
}
.products .variant form p{
	position: relative;
	margin: 0 0.5em 0.5em;
}
.products .variant .circle{
	display: block;
	position: static;
	top: 0;
	margin: 0;
	cursor: pointer;
	z-index:1;
	
}
.products .actions .circle{
	display: block;
	position: static;
	top: 0;
	margin: 0;
	cursor: pointer;
	z-index:1;
	
}


.filter-block:not(.pricing) input{
	clip: rect(0,0,0,0);
	overflow: hidden;
	position: absolute;
	height: 0;
	width: 0;
}

.products .variant input{
	clip: rect(0,0,0,0);
	overflow: hidden;
	position: absolute;
	height: 0;
	width: 0;
}	
.products .colors .variant label::before{
	opacity: 1;
}
.products .variant label[for="white"]::before{
	background-color: #FFFFFF;
}
.products .variant label[for="coblack"]::before{
	background-color: black;
}
.products .variant label[for="cochêne"]::before{
	background: url(admin/images/Cheneclaire.jpg);
	top:0;
	left:0;
}
.products .variant label[for="cowhite"]::before{
	background-color: white;
}
.products .variant label[for="coblue"]::before{
	background-color: blue;
}
.products .variant label[for="cogreen"]::before{
	background-color: green;
}
.products .variant label[for="cored"]::before{
	background-color: red;
}
.products .variant label[for="cogrey"]::before{
	background-color: grey;
}
.products .variant label[for="cochene"]::before{
	background-image:url(admin/Images/cheneclaire.jpg);
	display: block;
}
.single-product .variant form p input:checked + label{
	background-color: transparent;
	border: 2px solid var(--dark-color);
	color: var(--white-color);
}
.page-category .variant input:checked + label{
	background-color: transparent;
	border: 2px solid var(--dark-color);
	color: var(--white-color);
}

.products .sizes .variant label::before{
	background-color: var(--white-color);
}
.products .sizes .variant label span{
	position: absolute;
	top:0;
	left:10px;
	width: var(--percent100);
	height: var(--pourcent100);
	font-size: 0.85em;
	display: flex;
	align-items: center;
	justify-content: center;
}
.single-product .sizes .variant form p input:checked + label::before{
	background-color: var(--dark-color);
	opacity: 1;
}
.products .actions{
	display: flex;
	flex-wrap: wrap;
	margin-top: 2em;
}
.products .qty-control{
	width: fit-content;
	padding: 0.5em;
	border: 1px solid var(--border-color);
	margin: 0 2em 2em 0;
}
.products .actions :where(input, button){
	font-size: 1.25em;
	outline: 0;
	border: 0;
}
.products .actions input{
	width: 50px;
	text-align: center;
}
.products .qty-control button::before{
	 background-color: transparent; 
}
.products .actions .button-cart{
	flex: 1;
	min-width: 200px;
}
.products .actions .button-cart button{
	width: var(--pourcent100);
	cursor: pointer;
}
.wish-share a{
	display: flex;
	align-items: center;
	text-transform: uppercase;
	font-weight: var(--fw7);
	margin: 1em 2em 1em 0;
	transition: var(--trans-color);
}

/*8.Page single**************/
/*e.product review*/
/*************/
.products .collapse .has-child > a{
	position: relative;
	font-weight:  var(--fw7);
	text-transform: uppercase; 
	padding: 1em 1.25em;
	border-top: 1px solid var(--border-color);
	gap:1em;
	display: flex;
	align-items: flex-start;
}
.products .collapse .has-child > a::before{
	content:'+';
	position: absolute;
	left:0;
}
.products .collapse .content{
	margin:0 0 1.5em 2em;
	font-size: var(--font-small);
}
.products .collapse .content li span:first-child{
	min-width: 100px;
	display: inline-flex;
	font-weight: var(--fw7);
	text-transform: uppercase;
}
.products .collapse table{
	line-height: 3em;
}
.products .collapse table thead th{
	vertical-align: bottom;
	border-bottom: 2px solid var(--dark-color);

}
.products .collapse table:where(th, td){
	border-bottom: 2px solid var(--border-color);
	padding-left: 2em;
}
.products .collapse .content {
	display: none;
}
.products .collapse .expand .content {
	display: flex;
}
.products .collapse .expand > a::before{
	content: '-';

}

/*8.Page single**************/
/*e.product review form****/
/*************************/
.products .reviews h4{
	font-size: 2em;
	color: var(--light-text-color);
	padding-top: 1em;
	margin: 1em 0 0.5em;
	border-top: 1px solid var(--border-color);
}
.products .review-block{
	color: initial;
	
}
.products .review-block-head > a{
	display: block;
	font-size: 1.25em;
	width: var(--pourcent100);
	margin-top: 1em;
	text-align: center;
}
.products .review-block-head .rate-sum{
	position: relative;
	font-size: 4em;
	font-weight: var(--fw7);
	padding-right: 0.5em;
}
.products .review-block-head .rate-sum::before{
	content:'' ;
	width: 2px;
	height: 50px;
	display: block;
	position: absolute;
	top:10px;
	right: 13px;
	transform: rotate(22deg);
	background-color: var(--light-text-color);
}
.products .review-block-body .item{
	gap:1em;
	padding-bottom: 2.5em;
	margin-top: 3.5em;
}
.products .review-block-body :where(.person, .review-title){
	font-weight: var(--fw7);
	text-transform: uppercase;
}
.products .review-block-body :where(.review-title, .view-all){
	font-size: 1.325em;
	justify-content: end;
}
.products .review-block-body .item:not(:last-child){
	border-bottom: 1px solid var(--border-color);
}
.review-form .rating{
	flex-wrap: wrap;
}
.review-form p{
	font-size: 1.25;
	margin-right:1em ;
} 
.review-form .rate-this input{
	display:none;
}
.review-form .rate-this label{
	float: right;
	font-size: 2em;
	color: var(--secondary-dark-color);
}
.rate-this > input:checked ~ label,
.rate-this:not(:checked) > label:hover,
.rate-this:not(:checked) > label:hover ~ label {
	color: #f1c40e;
}
.rate-this > input:checked + label:hover,
.rate-this > input:checked ~ label:hover ,
.rate-this > label:hover ~ input:checked ~ label,
.rate-this > input:checked ~ label:hover ~ label{
	color: #ffed85;
}
.review-form form{
	margin-top: 2.5em;
}
form p{
	display: flex;
	flex-direction: column;
	margin-bottom: 2em;
}
form :where(textarea, input){
	line-height: 1;
	padding: 1em;
	border: 1px solid var(--border-color);
	outline:0;
}
form label{
	font-weight: var(--fw5);
	margin-bottom: 0.5;
	text-transform: uppercase;
}
/******************************/
/*9.Page single: Special offer*/
/*****************************/
.page-single .stock{
	margin: 2em 0;
}
.page-single .stock .qty .span:last-child{
	color:initial;
}
.single-product .stock .bar{
	height: 10px;
}
.page-single .stock .bar .available{
	margin : 0;
	border-radius: 0;
	background-color: var(--secondary-dark-color);
}
.related-products .content {
	height: var(--pourcent100);
}
.related-products .offer{
	margin:0;
}
.related-products .offer p{
	margin: 0  1em 0 0;
	text-transform: none;
	line-height: 1;
}
.related-products .offer ul li{
	width: 28px;
	height: 28px;
	font-size: var(--font-small);
	padding: 0.5em 0.25em;
}
.related-products .content .stock{
	margin-top: 0;
}


/**********************/
/*10.Page category    */
/**********************/

.single-category .holder{
	display: flex;
	flex-direction: column;
	flex:1;
}
.single-category .sidebar,
.single-category  .section{
	flex: 1 0 100%;
}

/*10.Page category ---------------------- */
/** a.Sidebar product filter */
/******************************/

.filter-block{
	margin-bottom: 1em;
	padding-bottom: 1em;
}
.filter-block:not(:last-child){ 
	border-bottom: 1px solid var(--border-color);
}

.filter-block h4{
	font-size: 1.25em;
	margin-bottom: 0.5em;
}
.filter-block li{
	display: flex;
	font-size: 0.9em;
	position: relative;
	line-height: 2;
}
.filter-block label .checked{
	width: 16px;
	height: 16px;
	position: relative;
	line-height: 0;
	display: inline-block;
	border: 2px solid  var(--secondary-color);
	vertical-align: text-top;
	margin : 0 7em 0 0;
	cursor: pointer;
}
.filter-block label .checked::before{
	content:'';
	position: absolute;
	width: 8px;
	height: 8px;
	background-color: var(--secondary-color);
	top:2px;
	left: 2px;
	opacity:0;
}
.filter-block input:checked + label .checked::before{
	opacity:1;
}
.filter-block li .count{
	margin-left:auto;
	color: var(--light-text-color);
}
.bycolor label[for="cored"]::before{
	background-color: #ff6b6b;
}
.bycolor label[for="colight"]::before{
	background-color: var(--border-color);
}
.range-track {
	position: relative;
	
	height: 5px;
	margin: 30px 0;
	background: #8a8a8a;
}
.slider-track{
	width:  100%;
	position:absolute;
	background-color: #fe696a;
}
.range-track input{
	width: 100%;
	position:absolute;
	background: none;
	pointer-events: none;
	top: 50%;
	transform: translateY(-50%);
	appearance:none;
}


input[type="range"]::-webkit-slider-thumb{
	position: relative;
	height: 18px;
	width: 18px;
	border-radius: 50%;
	/*border: 3px solid ;*/
	background-color: var(--primary-color);
	
	appearance:none;
	
	pointer-events: auto;
	cursor: pointer;

}
input[type="range"]::-moz-range-thumb{
	position: relative;
	height: 18px;
	width: 18px;
	border-radius: 50%;
	/*border: 3px solid ;*/
	background-color: var(--primary-color);
	pointer-events: auto;
	cursor: pointer;
	-moz-appearance: none;
}

.tooltip{
	padding: .25rem .5rem;
	border:0;
	
	/*background: #373f50;*/
	color: #fff;
	font-size: 0.75rem;
	line-height: 1.2;
	border-radius: 0.25rem;
	bottom: -140%;
	display: block;
	position: absolute;
	text-align: center;
	white-space: nowrap;
}
.min-tooltip{
	
	left: 50%;
	color: black;
	transform: translateX(-50%) translateY(-100%);
	z-index: 5;
}
.max-tooltip{
	right: 50%;
	color: black;
	transform: translateX(50%) translateY(-100%);
	
}


/*10.Page category ---------------------- */
/** b.head and  products block */
/******************************/
.page-title{
	margin-bottom:3em;
}
.cat-description p{
	font-weight: var(--fw3);
	font-size: 0.9em;
}
.cat-navigation {
	font-size: 0.85em;
	margin: 2em 0;
	justify-content: flex-end;
	gap:1em;
}
.cat-navigation .item-filter{
	margin-right: auto;
}
.cat-navigation > div{ 
	position: relative;
}
.cat-navigation .item-filter a{
	align-items: center;
	text-transform: uppercase;
}
.cat-navigation ul{
	display: none;
	position: absolute;
	left: 0;
	min-width: var(--pourcent100);
	width: max-content;
	z-index:10;
}
.cat-navigation .label, .cat-navigation ul li{
	display: flex;
	gap:0.5em;
	padding: 0.5em 1em;
	transition: var(--trans-color);
}
:where(.item-sortir, .item-options) .label,
.cat-navigation ul{
	color: var(--light-text-color);
	background-color: var(--light-bg-color);
	cursor: pointer;
}

.cat-navigation :where(label, ul li):hover{
	color: var(--dark-color);
}
:where(.item-sortir, .item-options):hover ul{
	display: block;
}
.load-more{
	margin: 2em 0 4em;
}
.filter {
	position: fixed;
	top:0;
	left:0;
	bottom: 0;
	padding: 0em;
	max-width: 400em;
	width: 90%;
	background-color: var(--white-color);
	overflow: auto;
	z-index: 1000;
	box-shadow: rgb(0 0 0 / 30%) 0 10px 50px;
	visibility: hidden;
	opacity: 0;
}
.filter.show{
	visibility: visible;
	opacity: 1;
}
/*--------------------*/
/* 11.Cart */
/*****************/
.mini-cart {
	position: absolute;
	width: 350px;
	top:100%;
	right: -2em;
	padding-top: 10px;
	padding-left:10px;
	background-color: var(--white-color);
	z-index:1000;
	box-shadow: rgb(0 0 0 / 30%) 0 10px 50px;
	visibility: hidden;
	opacity: 0;
	border-radius: 1em;
}
.iscart:hover .mini-cart{
	visibility: visible;
	opacity: 1;
}
:is(.mini-cart .products, .products.cart, .checkout .products) .thumbnail  img{
	transform: none;
}
.mini-cart ul :where(li, .price){
	position: relative;
}
.price{
	color: black;
}
.mini-cart content{
	width: var(--pourcent100);
	height: var(--pourcent100);
	touch-action: auto;
	padding: 1.5em;
}
.mini-cart  .cart-head{
	font-size: 1.5em;
	font-weight: var(--fw5);
	color: var(--light-text-color);
	padding-bottom: 0.5em;
	margin-bottom: 1em;
	border-bottom: 1px solid var(--border-color);
}
.mini-cart .cart-body{
	padding: 0 1.5em;
	margin: 0  -1.5em;
	max-height: 450px;
	overflow: auto;
}
:where(.mini-cart, .products.cart, .checkout) .thumbnail {
	position: relative;
	width: 80px;
	height: 80px;
	flex-shrink: 0;
	margin-right: 1em;
}

.mini-cart .item-content {
	font-size: var(--font-small);
	font-weight: var(--fw5);
	margin-bottom: 1.5em;
	line-height: 1.2;
	color: black;
	
}
.mini-cart .item-remove{
	margin-left: 1em;
	flex: 1;
	justify-content: flex-end;
}
.mini-cart .subtotal{
	display: flex;
	flex-direction: column;
	padding-top: 1em;
	margin-bottom: 2em;
	border-top: 1px solid var(--border-color);
}
.mini-cart .subtotal p:last-child{
	font-size: 2em;
}
.cart-footer{
	color: black;
}
.mini-cart .action a{
	display: block;
	width: var(--pourcent100);
	text-align: center;
	margin-bottom: 1em;

}
.mini-cart.show{
	visibility: visible;
	opacity: 1;
	position: fixed;
	top: 0;
	bottom: 0;
	max-width: 400px;
	width: 90%;
}
/*----------------*/
/* 12. Page cart  */
/*****************/
.products.cart form{
	width: var(--pourcent100);
}
.products.cart table thead th{
	vertical-align: middle;
	background-color: var(--light-bg-color);
}
.products.cart table :where(th,  td){
	padding: 2em 1em;
	text-align: center;
}
.products.cart table :where(th,  td):first-child{
	text-align: left;
	padding-left: 2em;
}
.products.cart table tbody td:first-child{
	padding-left: 0;
}
.products.cart table  td :where(.content, .qty-control, p) {
	padding: 0;
	margin: 0;
}
.products.cart .qty-control :where(button,  input){
	width: 32px;
	height: 20px;
	padding: 0.25em;
	text-align: center;
	outline: 0;
	border: 0;
	background-color: transparent; 
}
.products.cart .qty-control button{
	cursor: pointer;
}
.products.cart table tbody tr{
	border-bottom: 1px solid var(--border-color);
}
.cart-summary{
	width: var(--pourcent100);
	margin: 2.5em 0 4em;
}
.cart-summary .item{
	background-color: var(--light-bg-color);
}
.cart-summary .coupon{
	position:relative;
}
.cart-summary .coupon input{
	font-size: 1.1em;
	outline: 0;
	width: var(--pourcent100);
	padding: 0 1.5em;
	line-height: 50px;
	background: var(--white-color);
	border: 3px solid var(--dark-color);
}
.cart-summary .coupon  button{
	position: absolute;
	top: 0;
	right: 0;
	border: 0;
	outline:0;
	font-size: 1em;
	padding : 0 2.5em;
	line-height: 56px;
	background-color: var(--dark-color);
	color: var(--white-color);
	cursor: pointer;
}
.cart-summary .shipping-rate{
	padding: 0 2em 0 1em;
}
.cart-summary .shipping-rate has-child > a {
	font-size: 1em;
	margin: 2em 0;
	border: 0;
}
.cart-summary .content form{
	display: flex;
	flex-direction: column;
	margin-bottom: 1em;
}

.styled :where(select, textarea){
	padding: 0.75em;
	outline: 0;
	background-color: var(--white-color);
	border-width: 0 0 3px 0; 
	border-style: solid;
	border-color: var(--border-color);
}
.styled  .variant input{

	padding: 0.75em;
	outline: 0;
	background-color: var(--white-color);
	border-width: 0 0 3px 0; 
	border-style: solid;
	border-color: var(--border-color);
	transform: translateX(-130px) translateY(12px);
}
/*.products .cart-summary .variant form label{
	position: relative;
	border:0;
	background-color: var(--white-color);
	transform: scale(0.5) translateY(-30px);
}
.cart-summary .variant p span{
	position: absolute;
	top:0;
	left:40px;
	line-height: 3;
}
.cart-summary .variant input:checked + label::before {
	opacity:1;
}*/
.products.cart .cart-total table tr > *{
	padding: 0;
}
.products.cart .cart-total table td {
	text-align: right;
}
.cart-summary  .cart-total{
	padding: 2em;
	background-color: var(--border-color);
	line-height: 2em; 
}
.cart-summary  .cart-total table{
	width: var(--pourcent100);
}
.cart-summary  .cart-total table tr{
	display: flex;
	justify-content: space-between;
}
.cart-summary  .grand-total td{
	font-size: 1.5em;
	font-family: 'Poppins';
	font-weight: var(--fw8);
	line-height: 1.5em;
}
.cart-summary  .cart-total > a{
width: var(--pourcent100);
display: block;
text-align: center;
margin-top: 2em;
font-size: 1.25em;
}

/*--------------------*/
/* 13. Page Checkout */
/*-------------------*/
.checkout {
	margin: 0 0;
}
.checkout .left{
	padding:4em;
	background-color: var(--light-bg-color);
	box-shadow: 0 15px 70px -8px rgb(0 0 0 / 20%);
}
.checkout .item{
	width: var(--pourcent100);
}
.checkout .item h1{
	font-weight: var(--fw8);
	margin-bottom: 1.5em;
}
.checkout .left label{
	font-size: var(--font-small);
	text-transform: capitalize;
	position: relative;
	width: fit-content;
}
.checkout .left label span{
	position: absolute;
	top: 0;
	right: -10px;
	width: 6px;
	height: 6px;
	background-color: red;
	border-radius: var(--percent50);
}
.checkout p :where(input, textarea){
	background-color: rgb(225 225 225 / 50%);
	font-family: inherit;
}
.checkout p input:focus{
	background-color: var(--white-color);
}
.checkout p.checkset{
	flex-direction: row;
}
.checkout p.checkset label{
	margin: 0 0 0 1em;
	cursor: pointer;
}
.input-group i{
	position: absolute;
}
.checkout h2{
	padding-top: 0.5em;
	margin-bottom: 0.75;
	border-top: 1px solid var(--border-color);
}
.primary-checkout button{
	display: block;
	border: 0;
	outline: 0;
	cursor: pointer;
	width: var(--pourrcent100);
	max-width: 200px;
	font-size: 1.2em;
	margin: 3em auto 0;
}
.checkout .item.right{
	padding: 5em 0 0;
}
.summary-totals ul{
	max-width: 335px;
	line-height: 2;
	margin-bottom: 3em;
	padding-bottom: 2em;
	border-bottom: 1px solid var(--secondary-dark-color);
}
.summary-totals li{
	display: flex;
	justify-content: space-between;
	font-weight: var(--fw7);
}
.summary-totals li strong{
	font-size: 2.5;
	line-height: 1;
}
.summary-totals li:last-child{
	margin-top: 2em;
}
.summary-totals li:not(:last-child) span:first-child{
	color: var(--light-text-color);
}
.summary-order .price{
	display: flex;
	flex-direction:column;
	color: var(--light-text-color);
	font-size: 0.85;
	margin-top: 0.5
}

/*--------------------*/
/* 14.Modal  */
/*****************/
.modal{
	position: fixed;
	top:0;
	bottom: 0;
	right: 0;
	left: 0;
	max-width: 600px;
	width: 90%;
	height: max-content;
	padding: 2em;
	margin: auto;
	text-align: center;
	background-color: var(--light-bg-color);
	z-index: 1000;
	visibility: hidden;
	opacity:0;
	transform: translateY(20px);
	transition: transform .2s, visibility .2s opacity .2s;
}
.modal .image{
	position: relative;
	height: calc(150px + 10vw);
	overflow: hidden;
	max-height: 400px;
	margin: -2em -2em 0 -2em;
	}
.modal h2{
	font-size: 1.75em;
	text-transform: uppercase;
	max-width: 300px;
	margin: 0.5em auto;
	line-height: 1;
}	
.modal p{
	margin-bottom: 1em;
	color: var(--light-text-color);
}
.modal .t-close{
	position: absolute;
	top: 1em;
	right: 1em; 
}
.showmodal .modal{
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition: transform 1s, visibility 1s, opacity 1s;
}
/*--------------------*/
/* 15.inscrip  */
/*****************/
.register {
	margin: 0 0;
}
.register .left{
	padding:1em;
	background-color: var(--light-bg-color);
	/*box-shadow: 0 15px 70px -8px rgb(0 0 0 / 20%);*/
}
.register.item{
	width: var(--pourcent100);
}
.register .item h1{
	font-weight: var(--fw8);
	margin-bottom: 1.5em;
}
.register .left label{
	font-size: var(--font-small);
	text-transform: capitalize;
	position: relative;
	width: fit-content;
}
.register .left label span{
	position: absolute;
	top: 0;
	right: -10px;
	width: 6px;
	height: 6px;
	background-color: red;
	border-radius: var(--percent50);
}
.register p :where(input, textarea){
	background-color: rgb(225 225 225 / 50%);
	font-family: inherit;
}
.register p input:focus{
	background-color: var(--white-color);
}
.register p.checkset{
	flex-direction: row;
}
.register p.checkset label{
	margin: 0 0 0 1em;
	cursor: pointer;
}
.register h3{
	padding-top: 0.5em;
	margin-bottom: 0.75;
	border-top: 1px solid var(--border-color);
}
.primary-register button{
	display: block;
	border: 0;
	outline: 0;
	cursor: pointer;
	width: var(--pourrcent100);
	max-width: 200px;
	font-size: 1.2em;
	margin: 3em auto 0;
}
.register .right{
	background-color:  #E5C2AB;
	
}
.info{
	display:flex;
	font-size: 12px;
}

/* Carousel01 */

.Carousel01 {
	margin-top: 10px;
	margin-left: 20px;
}

.mySwiper{
	margin-top: 10px;
	margin-left: 20px;
	padding-left: 20px;
}
.Carousel01 .swiper-scrollbar{
	--swiper-scrollbar-bottom:0;

}

.categ{
	margin-bottom:20px;
}
.card-cat img{
	border-radius: 10px;
}

/*--------------------*/
/* 16 responsive  */
/*****************/

@media screen and (min-width : 481px){
	
	.Carousel01 {
		padding-left: 30px;
	}

	 .products.main .item{ 
		flex: 0 0 50%;
	}
	 /* .products.mainb .item{   
		 padding-left: 10px; 
		 padding-right: 10px; 
		flex: 0 0 50%;
	} 
	.products .mainb .content{
		width: 140;
		gap:0.5em;
		margin-top: 1.25;
	}*/
	/*Page single*/
	.products.mainb .media{
		height: 200px;
		width: 200px;
		border-radius: 10px;
		
	}
	.products.one .big-image{
		margin-bottom:2em;
	}
	.products.one .image-show{
		height: auto;
	}

	/* slider vertical */
	.product.dotgrid .image{
        position: relative;
        max-width: 500px;
        width:100%;
        margin: 0 auto;
        height: min-content;
        overflow: hidden;
	}
	.product .outer-main{
        width: calc(100%-85px);
        height: 100%;
        margin: 0 0 0 85px;
    }
    .product .outer-thumb{
        display: block;
        position: absolute;
        top:0;
        left:0;
    }
    .custom-pagination{
        display:none;
    }
}


/* @media screen and (min-width : 768px)  { */
	
/* } */
@media screen and (max-width : 481px){
	.products.mini .media{
		width: 160px;
		height: 160px;
		margin-left: 1.25em;
		
	}
	.products.main .media{
		/* height: 250px; */
		height: 160px;
		width: 160px;
		border-radius: 50%;
	}

	.Carousel01 {
		padding-left:20px;
	}
	
	.products.mainb .item{
		max-width: 155px;
	}
	.products.mainb .media,.content{
		height: 152px;
		width: 152px;
		/* margin-left: 8px; */
	}

	
	 .products.mainb .item{ 
		/* padding-left: 15px; */
		/* padding-right: 5px; */
		flex: 0 0 50%;
	}
	
	
	html,body{
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		overflow-x: hidden;
	}

	.slider .item{
		position: relative;
		height: 200px;
	}
	.flylogo{
	position: absolute;
	top:20px;
	right:-40px;
	width: 38px;
	height: 38px;
	/*border-radius: var(--pourcent50);*/
	/*background-color: var(--primary-color);*/
	z-index: 1;
	}

}
@media screen and (max-width: 700px){
	.container {
		padding-left: 0;
	}
}
@media only screen and (min-width : 700px ) and (max-width:1024px){
	.products.mainb .item{   
		
	   flex: 0 0 50%;
	}
	/*categ  */
	.categ{
		margin-top: 1em;
		padding-left: 0.5em;
		display:grid;
		grid-template-columns: repeat(3,1fr);
		gap:10px;
		row-gap:20px;
		background-color: var(--white-color);
		margin-bottom: 3em;
	}
	.card-cat{
		margin-top: 1em;
		margin-bottom: 1.5em;
		
		width:200px;
		height: 200px;
		background-color:var(--white-color);
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
	}

	
	.categ img{
		width:200px;
		height:200px;
	}
}
@media screen and (max-width : 700px){
	/*categ  */
	.categ{
		margin-top: 1em;
		padding-left: 0.5em;
		display:grid;
		grid-template-columns: repeat(2,1fr);
		gap:20px;
		row-gap: 20px;
		background-color: var(--white-color);
		margin-bottom: 1em;
	}
	
	.categ img{
		width: 150px;
		height:150px;
	}
	/*****************/
/* 6. bottom Menu */
/*****************/
	.header-nav{
		width: 100vw;
		padding-left: 20px;
	}
	.menu-bottom{
		display: flex;
		justify-content: space-around;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60px;
		background-color: var(--secondary-dark-color);
		box-shadow: 0 -2px 10px rgb( 0 0 0 / 10%);
		z-index: 22222;
	}
	
	.menu-bottom nav li a{
		position:relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 1em 0;
		color: var(--light-text-color);
		transition: var(--trans-color);
	}
	.menu-bottom nav li a:hover{
		color: var(--dark-color);
	}
	.menu-bottom nav li a span{
		font-size: var(--font-smaller)
	}
	.menu-bottom nav li a i{
		font-size: 1.25em;
	}
	.menu-bottom .fly-item{
		right:50%;
		top:50%;
		width: 16px;
		border-radius: var(--pourcent50);
		margin-right: -20px;
		background-color: var(--secondary-dark-color)
	}
	/*6. bottom Menu****************/
	/*  a.Search*/
	/*****************/
	.search-bottom{
		position: fixed;
		bottom: 60px;
		width: 100vw;
		padding: 2.5em 0;
		background-color: var(--secondary-dark-color);
		z-index: 1000;
		
	}
	.search-bottom{
		position:fixed;
		bottom: 60px;
		width: var(--pourcent100);
		padding: 2.5em;
		background-color: var(--secondary-dark-color);
		z-index:1000;
		visibility: hidden;
		opacity: 0;
		will-change: visibility, opacity;
	}
	.showsearch .search-bottom{
		visibility: inherit;
		opacity: 1;
	}
	.search-bottom .t-close{
		position: absolute;
		top: -54px;
		right:0;
	}
	.search-bottom .t-close:hover{
		background-color: var(--primary-color);
	}
	.primary-button1{
		background-color: #FFFFE0;
		border-color: #FF4500;
		color: #FF4500;
	}
	.rightcolumn{
		display:none;
	}
	.slider .wrapper {
		padding: 0;
	}
	.slider {
		padding: 0;
	}
	.container{
		padding-left: 0.5em;
	}

	.slider .container{
		padding-left: 0;
		padding-right: 0;
	}


	#cart-table thead {
		display:none;
	}
	#cart-table tbody tr{
		display: flex;
		flex-wrap: wrap;
		position: relative;
		align-items: center;
	}
	#cart-table tbody tr td:first-child{ 
		width: var(--pourcent100);
		min-width: var(--pourcent100);
		position: relative;
	}
	#cart-table tbody tr td:not(:first-child){
		flex-basis:0;
		flex-grow: 1;
		max-width: var(--pourcent100);
	}
	#cart-table tbody tr td:last-child{ 
		position:absolute;
		top:0;
		right:0;
	}
}
@media screen and (min-width : 1024px){
	
/******************/
/* cat */
/*****************/
	.card-cat{
		margin-top: 1em;
		margin-bottom: 1em;
		
		width:250px;
		height: 250px;
		background-color:var(--white-color);
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
	}


	.categ{
		
		display:grid;
		padding-left: 0.5em;
		grid-template-columns: repeat(4,1fr);
		gap:20px;
		row-gap: 20px;
		justify-content: center;
	}

	.categ img{
		width: 250px;
		height:250px;
	}


	.products .price .current{
		font-size: 1.25em;
	}
	.products.mini, .banner .row, .widgets .row,.checkout .item,.register .item{
		flex: 0 0 50%;
	}

	.products.main .item{
		flex: 0 0 33.3333%;
	}
	.products.mainb .item{
		flex: 0 0 33.3333%;
	}
	

	.products.one .row
	{
		/*flex: 0 0 50%;*/
		/*width: 50%;*/
		flex: 0 0 33.33333%;
		width: 33.33333%;
	}
	.products.one .is_sticky, .is_sticky{
		position: sticky;
		top:2em;
	}
	.checkout .item.right{
	padding: 5em 0 0 5em;
	}
}
@media screen and (min-width : 700px) {
	
	.container {
		padding: 0.2em;
	}
	.desktop-hide{
		display: none;
	}
	.center-mobile{
		display: none;
	}
	.mobile-hide{
		display: block;
		
	}
	.logo a{
		margin-right: 2em;
	}
	
	.header-nav .right li > a {
		margin-left: 1em;
	}
	/************/
	/*mega menu*/
	/***********/
	nav .mega{
		position: absolute;
		width: var(--pourrcent100);
		height: auto;
		top: auto;
		right: 0;
		left: 0;
		padding: 2.5em;
		line-height: 2em;
		background-color: #88421D;
		/*background-color: var(--light-bg-color);*/
		box-shadow: rgb(0 0 0/20%) 0 30px 20px -30px;
		z-index: 100;
		display: none;
	}
	nav li.has-child:hover .mega{
		display: block;
	}
	nav .mega .wrapper{
		display: flex;
	}
	nav .mega h4{
		font-size: 0.8em;
		transition: uppercase;
	}
	nav .mega ul {
		font-size: var(--font-small);
	}
	nav .mega .women-bands{
		display: flex;
		flex-wrap: wrap;
		max-width: 180px;
	}
	nav .mega .women-bands li{
		min-width: 80px;
	}
	nav .mega .view-all{
		margin-top: 1em;
	}
	nav .mega .products{
		flex: 2;
		padding: 0;
		align-items: center;
		position: relative;
	}
	nav .mega .products .row{
		width: var(--pourcent100);
	}
	nav .mega .products .media{
		height: 400px;
	}
	nav .mega .products .text-content{
		line-height: initial;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5em;
		margin: 0.5em;
		position: absolute;
		bottom: 4em;
		width: var(--pourcent100);
	}
	nav .mega .products .text-content{
		font-size: 2em;
		font-weight: var(--fw8);
		text-align: center;
		color: var(--secondary-dark-color);
	}
	.header-main .right{
		max-width: 600px;
		margin-left: auto;
	}
	/*dept menu*/
	.dpt-menu{
		position: absolute;
		top: var(--pourcent100);
		width: 300px;
		background-color: var(--white-color);
		border: 1px solid var(--border-color);
		border-top: 0;
		border-bottom: 0; 
	}
	.dpt-menu > ul > li > a{
		font-weight: var(--fw5);
		padding: 0 1.5em;
		border-bottom: 1px solid var(--border-color);
	}
	.dpt-menu .has-child > ul, .dpt-menu .mega{
		position: absolute;
		top:0;
		width: var(--pourcent100);
		left: var(--pourcent100);
		height:  auto;
		min-height: var(--pourcent100);
		padding: 1.5em;
		font-size: var(--font-small);
		line-height :2.5em;
		border : 1px solid var(--border-color);
		border-top: 0;
		display: none;
		background-position: right bottom;
		background-repeat: no-repeat;
		background-size: auto;
	}

	/*Showing de first submenu*/
	.dpt-menu .furniture ul{
		
		background: white;
	}
	
	.dpt-menu .beauty ul{
		/*background-image: url(admin/images/Realisations/Realisation15.jpg);*/
		background: white;
	}
	.dpt-menu .electric ul{
		background-image: url(admin/images/Realisations/Realisation16.jpg);
	}
	.dpt-menu .fashion ul{
		/*background-image: url(admin/images/Realisations/Realisation15.jpg);*/
		background: white;
	}
	.dpt-menu .homekit .mega{
		background-image: url(admin/images/Realisations/Realisation8.jpg);
	}
	.dpt-menu .has-child > ul::before{
		content: '';
		position :absolute;
		top:0;
		left:0;
		right: 0;
		bottom: 0;
		background: linear-gradient(90deg,rgba(225,225,225,1) 0%,rgba(225,225,225,0))
	}

	.dpt-menu .has-child > .mega::before{
		content: '';
		position :absolute;
		top:0;
		left:0;
		right: 0;
		bottom: 0;
		background: linear-gradient(90deg,rgba(225,225,225,1) 0%,rgba(225,225,225,0))
	}
	.dpt-menu .mega{
		width: auto;
		min-width: var(--pourcent100);
		
	}
	.dpt-menu .has-child:hover .mega{
		display:flex;
	}
/*slider*/
	.slider > div > .wrapper{
	width: calc(100% - (300px + 2em));
	margin-left: auto;
	
	/*background: grey;*/
	}

/*Products*/
	.trending .products, .product-categories .row{
	flex: 0 0 33.3333%;
	}
	.products.big .media{
		max-height: 373px;
	}
	.products.main .item, .widgets .row{
		flex: 0 0 25%;
	}
	.products.mainb .item, .widgets .row{
		flex: 0 0 25%;
	}
	.single-product .row{
		flex: 0 0 33.333333%;
	}
	/*Footer*/
	.footer .box{
		display: flex;
		justify-content: space-between;
		align-content: center;
	}
	/*Page single*/
	#page:not(.page-home) .dpt-menu{
		display: none;
	}
	#page.showdpt .dpt-menu{
		display: block;
	}
	.products.one .flexwrap > .row:last-child > .item{
		padding-left: 2em;
	} 
	.ajouter, .ajouter0, .ajouter1,.ajouter2,.ajouter3, .ajouter4,.ajouter5, .ajouter6,.ajouter7, .ajouter8,.ajouter9, .ajouter10{
		cursor: pointer;
	}
/*Page category*/
	.single-category .holder{
		flex-direction: row;
	}
	.single-category .sidebar{
		flex: 1 0 25%;
	}
	.single-category .section{
		flex: 1 0 75%;
	}
	.single-category .sidebar .filter {
		padding-right: 0 1.5em 0 0;
		position: sticky;
		top: 2em;
		box-shadow: none;
		width: var(--pourcent100);
		z-index: initial;
		visibility: visible;
		opacity: 1;
	}
	.single-category .products-main .item{
		flex: 0 0 33.3333%;
	}
	/*Page cart*/
	.products.cart  .form-cart{
		width: 66%;
	}
	.products.cart  .cart-summary{
		width: 34%;
		padding-left: 2.5em;
		margin-top:0;
	}
}



/* Slider 3D cover */
.containersl3d{
	
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
     
	
	display: flex;
	width: 100%;
	height: 250px;
	background: #fff;
	justify-content: center;
	align-items: center;
	background: #111;
}


.containersl3d .swiper {
	width: 100%;
	padding-top: 25px;
	padding-bottom: 25px;
  }

  .containersl3d .swiper-slide {
	background-position: center;
	background-size: cover;
	width: 200px;
	height: 200px;
	background: black;
	-webkit-box-reflect: below 1px linear-gradient(transparent,transparent,#0006) ;
  }

  .containersl3d .swiper-slide img {
	display: block;
	width: 100%;
  }
/* ************************ */
/* Product image */
/* ******************* */
.dotgrid .wrapper{
    display: var(--display,grid);
    --grid-col: 175px;
    gap: var(--gutter,30px);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-col),100%),1fr));
    gap: var(--gutter, 30px)
}
.dotgrid .dot-image{
    position: relative;
    margin-bottom: 15px;
    overflow: hidden;
    
}

.dotgrid .dot-image > a,
.dotgrid .thumbnail.hover,
.dotgrid .actions,
.dotgrid .dot-image .label{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.dotgrid .dot-image > a {
    z-index: 1;
}

.dotgrid .thumbnail.hover{
    opacity: 0;
    transition: opacity .75s ease,
                transform 1.1s cubic-bezier(.15, .75, .5, 1) 0s;
    backface-visibility: hidden;
    transform:translateZ(0) ;
}

.dotgrid .dot-image:hover .thumbnail.hover {
    opacity: 1;
    transform: scale3d(1.1,1.1,1.1) translateZ(0);
}

.dotgrid .actions {
    z-index: 2;
    top:auto;
    bottom:20px;
    transform: translate3d(0,100%,0);
    opacity:0;
    transition: all .3s cubic-bezier(0,0,.2,1);
}

.dot-image:hover .actions{
    opacity:1;
    transform: translateZ(0);
}


.dotgrid .actions ul,
.dotgrid .dot-image .label{
    display: flex;
    justify-content: center;
    gap: 10px;
}

.dotgrid .actions ul li a,
.dotgrid .dot-image .label span{
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    background-color: var(--whitecolor);
    border-radius: 50%;
    transition: var(--transition-background), var(--transition-color);
}

.dotgrid .actions ul li a:hover{
    background-color: var(--dark-color);
    color: var(--whitecolor);
}

.dotgrid .dot-image .label{
    top:auto;
    bottom: 20px;
}

.dotgrid .dot-image .label span{
    font-size: 12px;
    font-weight: var(--fw600);
    background-color: var(--primary-color);
    color : var(--whitecolor);
}

.dotgrid .dot-info{
    text-align: center;
}


.dotgrid .product-price .before{
    text-decoration: line-through;
}


.product .wrapper{
    --grid-col: 331px;

}

.product .main-image img{
    width:100%
}
.dotgrid .wrapper{
    display: var(--display,grid);
    --grid-col: 175px;
    gap: var(--gutter,30px);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-col),100%),1fr));
    gap: var(--gutter, 30px)
}

.product .swiper-wrapper{
height: 240px;
width:240px;
}
.product .wrapper{
    --grid-col: 331px;

}

.product .main-image img{
    width:100%
}


.product .outer-thumb{  
    display: none;
}

.product .outer-thumb .item{
    height: fit-content!important;
    cursor: pointer;
}

.product .thumb-wrap{
    position: relative;
    width: 70px;
    height: 90px;
}
.product .outer-thumb img{
    transition: var(--transition-t-ransform);
}
.product .outer-thumb .swiper-slide-thumb-active > div,
.product .outer-thumb .item:hover{
    border: 1px solid var(--grey-color);
}
.product .outer-thumb .swiper-slide-thumb-active img,
.product .outer-thumb .item:hover img{
    
    transform : scale3d(0.85, 0.85, 0.85);
}
.product .custom-pagination{
    position:relative;
    height: 50px;
}

@media (min-width: 481px) {
	.slider .item{
		position: relative;
		height: 338px;
	}
    .product .wrapper{
        --gutter:60px;
    }
    .product.dotgrid .image{
        position: relative;
        max-width: 500px;
        width:100%;
        margin: 0 auto;
        height: min-content;
        overflow: hidden;
    }
    .product .outer-main{
        width: calc(100%-85px);
        height: 100%;
        margin: 0 0 0 85px;
    }
    .product .outer-thumb{
        display: block;
        position: absolute;
        top:0;
        left:0;
    }
    .custom-pagination{
        display:none;
    }
}


@media (min-width: 1200px) {
    .container.wide{
        --mx-width:1720px;
        --gutter:40px;
    }
}