@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600;700;800&family=Rubik:wght@300;400;500;600&display=swap');
/*
Fonts:
- Montserrat: 300, 400, 600, 700, 800
- Rubik: 300, 400, 500, 600
*/

:root {
	--primary-color: #e05014;
	--secondary-color: #794afa;
	--secondary-dark-color: #142640;

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

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

	--percent100:100%;
	--percent50:50%;

	--fw3: 300;
	--fw5: 500;
	--fw6: 600;
	--fw7: 700;
	--fw8: 800;

	--trans-background-color: background-color .3s, color .3s;
	--trans-background: background-color .3s;
	--trans-color: color .3s;
}


 

*{
    margin:0;
    padding:0;
	font-family: 'Montserrat';
}
*,::before,::after {
	box-sizing: border-box;
}

body {
	font-family: 'Rubik', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--dark-color);
	background-color: var(--white-color);
}
a {
	text-decoration: none;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}
ul {
	list-style: none;
}
img {
	max-width: var(--percent100);
	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: 'Montserrat';
}

h1 {
	font-size: calc(1.3em + 1vw);
	font-weight: var(--fw8);
	line-height: 1;
}
h2 {
	font-size: 2.5em;
}
h3 {
	font-size: 1.2em;
	font-weight: var(--fw7);
}
h4 {
	font-size: 1em;
	font-weight: var(--fw6);
}

/* -----------------
 * 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;
}
.flexcenter {
	display: flex;
	align-items: center;
	justify-content: center;
}
.flexitem {
	display: flex;
	align-items: center;
}
.flexcol {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.main-links a:hover {
	color: var(--secondary-color);
}
.second-links a:hover {
	color: var(--primary-color);
}
.second-links a {
	font-weight: var(--fw6);
}

.icon-small, .icon-large {
	display: flex;
	align-items: center;
	padding: 0 0.25em;
	font-weight: normal;
}
.icon-small {
	font-size: 1.25em;
	margin-left: auto;
}
.icon-large {
	font-size: 1.75em;
	padding: 0 0.75em 0 0;
}


.mobile-hide {
	display: none;
}


.object-cover img {
	position: absolute; /*  LA VALEUR REEL EST absolute */
	object-fit: cover;
	width: var(--percent100);
	height: var(--percent100);
	display: block;
}
.products .media {
	position: relative;
	flex-shrink: 0;
	overflow: hidden;
}


.primary-button, .secondary-button, .light-button {
	font-size: var(--font-small);
	padding: 0.9em 2em;
	height: auto;
	width: fit-content;
	border-radius: 2em;
	transition: var(--trans-background-color);
}
.primary-button {
	background-color: var(--primary-color);
	color: var(--white-color);
}
.primary-button: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);
}
.light-button:hover {
	background-color: var(--secondary-dark-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: var(--light-text-color);
}





















































/*	---------------------------------
*	01. HEADER
*   ---------------------------------*/

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



	/* 01. HEADER -----------------
	*   a. Header Top
	*  ---------------------------*/

.header-top .container{
	border: 1px solid var(--border-color);
}
.header-top .wrapper {
	font-size: var(--font-small);
	font-weight: var(--fw3);
	justify-content: space-between;
	line-height: 42px;
}
.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;
}
:where(.header-top, .thetop-nav) .right ul ul li a {
	padding: 0.25em 1em;
}
:where(.header-top, .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);
}
.trigger {
	font-size: 1.5em;
	display: flex;
	padding: 0.25em;
	margin-right: 0.5em;
}
.logo a {
 	font-family: 'Montserrat';
 	font-size: 1.75em;
 	position: relative;
 	font-weight: var(--fw8);
 	display: flex;
 	padding-left: 0.75em;
 	margin-right: 2em;
}
.circle {
 	position: absolute;
 	top: -15px;
 	left: 0;
 	width: 38px;
 	height: 38px;
 	border-radius: var(--percent50);
 	background-color: var(--primary-color);
 	z-index: -1;
}
.circle::before {
	content: '';
	position: absolute;
	width: 28px;
	height: 28px;
	border-radius: var(--percent50);
	background-color: #142640;
	bottom: 5px;
	right: 5px;
	opacity: .4;
}
.header-nav nav > ul {
	line-height: 80px;
	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);
}
nav .fly-item {
	top: 50%;
	margin-top: -24px;
	width: 70px;
	border-radius: 3px;
	right: -52px;
	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;
	right: 16px;
	width: 16px;
	background-color: var(--secondary-dark-color);
	border-radius: var(--percent50);
}
.mega .flexcol {
	flex: 1;
	min-width: 180px;
	padding-right: 2.5em;
	margin-bottom: 1.5em;
	z-index: 1;
}

	/*  01. HEADER -------------------------------
	*    c. Header Main, Department Category
	*   -----------------------------------------*/

.header-main {
	background-color: var(--secondary-dark-color);
	padding: 1.5em;
	margin-bottom: 2em;
}
.dpt-cat {
	position: relative;
	z-index: 10;
}
.dpt-cat .dpt-head {
	position: relative;
	width: 300px;
	padding: 0.75em 1.5em;
	background-color: var(--primary-color);
	border-radius: 7px 7px 0 0;
	color: var(--white-color);
	margin-bottom: -2.15em;
}
.dpt-cat .dpt-head .mini-text {
	color: var(--light-bg-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: 46px;
	align-items: center;
}
.dpt-menu .has-child:hover ul {
	display: block;
}
.dpt-menu .has-child li a:hover {
	text-decoration: underline;
}

	/* 01. HEADER -------------------------------
	*	d. Search From
	*  ----------------------------------------*/
.header-main .right {
	flex: 1;
}
form {
	position: relative;
}
form.search input {
	line-height: 3.25em;
	padding: 0 4em 0 1em;
	border: 0;
	outline: 0;
	width: var(--percent100);
	border-radius: 7px;
	font-size: 0.9em;
	font-weight: var(--fw3);
}
form.search :where(span,button) {
	position: absolute;
	top: 0;
	padding: 0.55em 1.5em;
	font-size: 1em;
	color: var(--light-text-color);
	height: var(--percent100);
}
form.search button {
	right: 0;
	border: 0;
	outline: 0;
	font-size: 0.875em;
	font-weight: var(--fw6);
	background-color: #EBEBEB;
	border-radius: 0 7px 7px 0;
	cursor: pointer;
	transition: var(--trans-background);
}
form.search button:hover {
	background-color: var(--dark-color);
}



	/* 01. HEADER ----------------------
	*   e. Responsive MENU - Off Canvas
	* --------------------------------*/
.site-off {
	position: fixed;
	width: 320px;
	height: var(--percent100);
	background-color: var(--white-color);
	overflow-y: auto;
	z-index: 1000;
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform .4s, visibility .4s;
	will-change: transform, visibility;
}
.showmenu .site-off {
	transform: translateX(0);
	visibility: visible;
	transform: transform .4s 0s, visibility 0s 0s;
}
.off-canvas {
	width: var(--percent100);
	height: var(--percent100);
	touch-action: auto;
	padding: 1.5em;
}
.off-canvas .canvas-head {
	color: var(--white-color);
	justify-content: space-between;
	padding: 1.5em;
	margin: -1.5em -1.5em 1.5em;
	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: .75;
}
.t-close {
	font-size: 1.25em;
	width: 32px;
	height: 32px;
	border-radius: var(--percent50);
	background-color: var(--secondary-dark-color);
	color: var(--white-color);
	transition: var(--trans-background-color);
}
.t-close:hover {
	background-color: var(--white-color);
	color: var(--secondary-dark-color);
	opacity: .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 > :where(ul, .mega) {
	font-size: var(--font-small);
	font-weight: var(--fw3);
	line-height: 28px;
	padding-left: 3em;

	height: auto;
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s cubic-bezier(0.215, 0.610, 0.355, 1);
}
.off-canvas .expand > :where(ul, .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 0;
	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 .dpt-menu .icon-small {
	transform: rotate(90deg);
}
.off-canvas .has-child {
	width: var(--percent100);
}
.off-canvas .thetop-nav .right > ul > :where(:nth-child(4), li:nth-child(5)) > 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
 * -----------------------------------*/

.slider .item {
	position: relative;
	height: 474px;
}
.slider .item::before {
	content: '';
	position: absolute;
	top: 30%;
	left: 0;
	width: 450px;
	height: 300px;
	background-color: var(--white-color);
	z-index: 1;
	filter: blur(50px);
	opacity: .8;
}
.slider .text-content {
	position: relative;
	height: var(--percent100);
	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 :where(h2,h3) span:first-child {
	font-weight: var(--fw3);
	color: var(--light-text-color);
}
.text-content :where(h2,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);
}


/* ---------------------------
*  03. BRAND
*  -------------------------*/
.brands .wrapper {
	justify-content: space-around;
	flex-wrap: wrap;
	padding: 2em 0;
}
.brands .item img {
	opacity:  .5;
	transition: opacity .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 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: 34px;
	height: 35px;
	padding: 0.5em;
	line-height: initial;
	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: transform .3s;
}
.products :where(.image, .thumbnail):hover img {
	transform: scale(1.1);
}
.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(--percent50);
	line-height: 1;
	background-color: var(--white-color);
	opacity: .5;
	transition: var(--trans-background-color), opacity .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: transform .3s, opacity .2s;
}
.products .item:hover .hoverable li {
	transform: translateX(0);
	opacity: 1;
}
.products .hoverable li:last-child {
	transition-delay: .1s;
}

.products .discount {
	top: auto;
	right: 0;
	left: auto;
	bottom: 0;
	background-color: 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);
	color: var(--white-color);
}

.products .content {
	display: flex;
	flex-direction: column;
}

/*.products:where(.big,.main.one) .content {*/
.products:where(.big,.main, .one) .content {
	gap: 1em;
	margin-top: 1.25em;
}
.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' fill='rgba(255,216,0,1)'%3E%3Cpath d='M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26Z'%3E%3C/path%3E%3C/svg%3E");
	background-position-y: top;
	background-repeat-y: no-repeat;
}
.products .item:hover(: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: calc(1em + 1vw);
	color: var(--primary-color);
	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;
	max-width: 460px;
	margin: 0 auto;
}



	/* 04. PRODUCT -----------------------
	*   c. MINI product
	*  ---------------------------------*/
.products.mini .item {
	margin-bottom: 2em;
}
.products.mini .media {
	width: 130px;
	height: 160px;
	margin-right: 1.25em;
}
.products.mini .content {
	margin: 0;
	gap: 0.75em;
}
.products:where(.mini, .main) h3 {
	font-weight: 400;
}


	/*  04. PRODUIT ----------------------------
	*	 d. MAIN product
	* ----------------------------------------*/

.products.main .item {
	flex-direction: column;
	flex: 0 0 100%;
	padding: 0 0.938em;
	padding-bottom: 2em;
}
.products.main .media {
	height: 390px;
}
.products.main .footer {
	position: absolute;
	left: 0;
	right: 0;
	padding: 0 1em 1em;
	border-radius: 0px 0px 7px 7px;
	z-index: 3;
	background: linear-gradient(0deg, var(--light-bg-color) 0%, var(--white-color));
	opacity: 0;
	visibility: hidden;
	will-change: opacity;
	transition: all .2s ease-in-out;
}
.products.main .item:hover .footer {
	opacity: 1;
	visibility: visible;
	box-shadow: 0px 15px 30px;
}
.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: 0px;
}
.products.main .item:hover .content > *:not(.footer) {
	z-index: 3;
}


/* -----------------------------
*  05.  BANNER
*  ----------------------------*/
.banners .item {
	position: relative;
	background-color: var(--white-color);
	border: 1px solid var(--border-color);
}
.banner .image {
	text-align: right;
}
.banner .get-gray {
	background-color: var(--border-color);
}
.banner :where(.text-content, .over-link) {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--percent100);
	height: var(--percent100);
}
.banner .text-content {
	padding: 1.5em 2.5em;
}
.banner h3 span {
	font-size: 80%;
}
.banner .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: var(--font-small);
	color: var(--light-text-color);
	margin-top: 1em;
}
.banners .second-links {
	margin-top: 2em;

}
.mini-links li a:hover {
	text-decoration: underline;
}




































































































































































 /* ------------------------
 *  15. RESPONSIVE
 *  ----------------------*/

 @media screen and (min-width: 48px) {
 	.products.main .item {
 		flex: 0 0 50%;
 	}
 }


@media screen and (min-width: 768px) {
	.products .price .current {
		font-size: 1.25em;
	}
	.products.mini,
	.banner .row {
		flex: 0 0 50%;
	}
	.products.main .item {
 		flex: 0 0 33.3333%;
 	}
}




@media screen and (min-width: 992px) {
	.container {
		padding: 0 2em;
	}
	.desktop-hide {
		display: none;
	}
	.mobile-hide {
		display: block;
	}
	.logo a {
		margin-right: 2em;
	}
	.header-nav {
		padding: 0;
		margin: 0;
		border-bottom: 0;
	}
	.header-nav .right li > a {
		margin-left: 1em;
	}

	/* mega menu */
	nav .mega {
		position: absolute;
		width: var(--percent100);
		height: auto;
		top: auto;
		left: 0;
		right: 0;
		padding: 2.5em;
		line-height: 2em;
		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;
		text-transform: uppercase;
	}
	nav .mega ul {
		font-size: var(--font-small);
	}
	nav .mega .women-brands {
		display: flex;
		flex-wrap: wrap;
		max-width: 180px;
	}
	nav .mega .women-brands 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 .position .row {
		width: var(--percent100);
	}
	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-top: 0.5em;
		position: absolute;
		bottom: 4em;
		width: var(--percent100);	
	}
	nav .mega .products .text-content h4 {
		font-size: 2em;
		font-weight: var(--fw8);
		text-align: center;
		color: var(--secondary-dark-color);
	}
	.header-main .right {
		max-width: 600px;
		margin-left: auto;
	}

	/* Departments menu */
	.dpt-menu {
		position: absolute;
		top: var(--percent100);
		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;
		left: var(--percent100);
		width: var(--percent100);
		height: auto;
		min-height: var(--percent100);
		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 the first sub menu */
	
	.dpt-menu .beauty ul {
		background-image: url(assets/menu/menu_bg1.jpg);
	}
	.dpt-menu .electric ul {
		background-image: url(assets/menu/menu_bg2.jpg);
	}
	.dpt-menu .fashion ul {
		background-image: url(assets/menu/menu_bg3.jpg);
	}
	.dpt-menu .homekit .mega {
		background-image: url(assets/menu/menu_bg4.jpg);
	}
	.dpt-menu .has-child > :where(ul,.mega)::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(90deg, rgba(225, 225, 225, 1) 0%, rgba(165, 169, 165, 0.5));
	}
	.dpt-menu .mega {
		width: auto;
		min-width: var(--percent100);
	}
	.dpt-menu .has-child:hover .mega {
		display: flex;
	}

	/* slider */
	.slider > div > .wrapper {
		width: calc(100% - (300px + 2em));
		margin-left: auto;
	}

	/* products  */

	.trending .products,
	.product-categories .row {
		flex: 0 0 33.3333%;
	}
	.products.big .media {
		max-height: 373px;
	}
	.products.main .item {
		flex: 0 0 25%;
	}
}