.product__List {
	--grid-template: 1.5fr 2fr 1fr;
}

.product__List .product__List_Header {
	display: grid;
	padding: 1.5rem 2rem;
	background-color: var(--primary-40);
	border-radius: 0.5rem;
	grid-template-columns: var(--grid-template);
}

.product__List_Inner {
	border-radius: var(--border-radius);
	overflow: hidden;
}

.product__Item {
	display: grid;
	grid-template-columns: var(--grid-template);
	padding: 14px;

	border-bottom: solid var(--primary-90) 1px;
	background-color: var(--white);
	transition: var(--transition);
	position: relative;
	z-index: 0;
	--icon-color: transparent;
}

.product__Item:nth-child(odd) {
	background-color: var(--primary-100);
}

.product__Item:hover {
	z-index: 1;
	box-shadow: 0px 0px 16px 0px #0e132826;
	border-color: var(--primary-60);
	--icon-color: var(--primary-40);
}

.product__Item .item__Icon_Wrapper {
	--icon-url: url(../assets/icons/arrowRight.svg);
	--icon: 1.5rem;
	display: flex;
	justify-content: end;
	--icon-rotate: 90deg;
}

.products__Banner .banner_Image {
	height: calc(460px + var(--header-height));
}

.side__Category_Wrapper .category__Title {
	border-bottom: solid var(--Gray-95) 1px;
	color: var(--primary-40);
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-bottom: 1.5rem;
}

.product__List_Pagination{
	margin-top: var(--bottom-space);
}

.sideCat_List {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.sideCat_List .side__Cat_Title {
	width: fit-content;
	color: var(--cat-title-accent, var(--Gray-40));
	font-size: var(--fz-b3);
	font-weight: var(--cat-title-weight, var(--fw-400));
}

.sideCat_List li.sideCat_List-have-sub-menu > .sideCat_List_Item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-inline-end: 1rem;
	--icon-rotate: -180deg;
	--icon-url: url(../assets/icons/chevUp.svg);
	--icon-color: var(--Gray-40);
}

.sideCat_List li.active.sideCat_List-have-sub-menu > .sideCat_List_Item {
	--icon-rotate: 0deg;
	--cat-icon-gray: 0;
	--cat-image-op: 1;
	--cat-title-accent: var(--primary-40);
}

.sideCat_List li.sideCat_List-have-sub-menu > .sideCat_List_Item::after,
.sideCat_List > li > .sideCat_List-sub-menu .side__Cat_Title::before {
	content: "";
	height: var(--icon);
	width: var(--icon);
	min-width: var(--icon);
	min-height: var(--icon);
	display: inline-flex;
	vertical-align: middle;
	background: var(--icon-color);
	mask: var(--icon-url) no-repeat center / cover;
	-webkit-mask: var(--icon-url) no-repeat center / cover;
	margin: var(--icon-mt, 0) var(--icon-mr, 0) var(--icon-mb, 0) var(--icon-ml, 0);
	transition: all var(--transition);
	-webkit-transition: all var(--transition);
	rotate: calc(var(--icon-rotate, 0deg) * var(--direction-num, 1));
	cursor: pointer;
}

.sideCat_List-sub-menu {
	margin-inline-start: 4rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* layer 1  */
.sideCat_List > li {
	border-bottom: 1px var(--Gray-95) solid;
}

.sideCat_List > li > .sideCat_List_Item {
	--icon-rotate: -90deg;
}

.sideCat_List > li > .sideCat_List_Item .side__Cat_Title {
	display: flex;
	align-items: center;
	gap: 1rem;
	--cat-title-weight: var(--fw-500);
}

.sideCat_List > li > .sideCat_List_Item .side__Cat_Title img {
	height: 66px;
	filter: grayscale(var(--cat-icon-gray, 1));
	opacity: var(--cat-image-op, 0.7);
	transition: var(--transition);
}

/* layer 2 */
.sideCat_List > li > .sideCat_List-sub-menu {
	padding-block: 1.5rem 2rem;
}

/* layer 2 and so on */

.sideCat_List > li > .sideCat_List-sub-menu .side__Cat_Title {
	gap: 0.5rem;
	display: flex;
	align-items: center;
	--icon: 18px;
	--icon-color: var(--secondar-50);
	--icon-url: url(../assets/icons/arrowRight.svg);
	--icon-rotate: 90deg;
}

/* *------------------------------- Detail Start ------------------------------- */

.product__Detail_Header .btnStyle_Primary {
	--icon-url: url(../assets/icons/arrowRight.svg);
	--icon-rotate: 90deg;
	padding: 0.5rem 5rem;
}

.product__InfoTabe_Wrapper {
	display: none;
}

.product__InfoTabe_Wrapper:has(*) {
	display: block !important;
	border-radius: var(--border-radius-sm);
	border: solid 2px var(--mc1);
}

.product__Data_Table {
	margin-bottom: 0;
}

.product__Related_Wrapper:has(.slick-track:empty) {
	display: none;
}

/* !------------------------------- Detail End --------------------------------- */

/* *------------------------------- Order Start ------------------------------- */

.ModeCommerceEnquiryC .loader {
	display: none !important;
}

.order__Step_Item {
	display: none;
	position: relative;
}

.order__Step_Item::after{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 300%;
	background-color: rgba(255, 255, 255, 0.7);
	mask-image: linear-gradient (0deg , transparent ,black, transparent);
	-webkit-mask-image: -webkit-linear-gradient(-0deg ,black 40%,transparent,black 60%);
	animation: loading-slide 1s infinite ease-in-out;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	transition: var(--transition);
}

.order__Step_Item.loading::after{
	opacity: 1;
	visibility: visible;

}

@keyframes loading-slide{
	from{
		transform: translate(0);		
	}
	to{
		transform: translate(66%);		
	}
}


.order__Step_Item.active {
	display: block;
	opacity: 1;
}



.dejpa__Order_Wrapper .wizard-nav {
	display: flex;
	justify-content: space-between;
	padding-bottom: 40px;
	border-image: linear-gradient(270deg, transparent 0%, var(--primary-50) 50%, transparent 100%) 1;
	border-bottom: solid 1px;
	margin-bottom: 48px;
	position: relative;
	--nav-inline-padding: 48px;
	--nav-dots-width: 120px;
	padding-inline: var(--nav-inline-padding);

	--wiz-qty: 3;
	--wiz-active: 0;
}

.dejpa__Order_Wrapper .wizard-nav:has([data-step="0"].active) {
	--wiz-active: 0;
}

.dejpa__Order_Wrapper .wizard-nav:has([data-step="1"].active) {
	--wiz-active: 1;
}

.dejpa__Order_Wrapper .wizard-nav:has([data-step="2"].active) {
	--wiz-active: 2;
}

.dejpa__Order_Wrapper .wizard-nav:has([data-step="3"].active) {
	--wiz-active: 3;
}

.dejpa__Order_Wrapper .wizard-nav .wizard-progress-bar {
	position: absolute;
	width: calc(100% - var(--nav-inline-padding) * 2 - var(--nav-dots-width));
	height: 2px;
	left: 50%;
	top: 20%;
	transform: translate(-50%, -50%);
	background-color: var(--primary-95);
}

.dejpa__Order_Wrapper .wizard-nav .wizard-progress-bar::after {
	content: "";
	display: block;
	--step-size: calc(100% / var(--wiz-qty));
	transition: var(--transition);
	height: 100%;
	background-color: var(--primary-20);
	width: calc(var(--step-size) * var(--wiz-active));
}

.dejpa__Order_Wrapper .wizard-nav .nav-buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: var(--fz-t4);
	line-height: var(--lh-t4);
	font-weight: var(--fw-500);
	color: var(--color-accent, var(--primary-20));
	--icon: 44px;
	--icon-url: url(../assets/icons/logo-filled1.svg);
	filter: brightness(0.6);
	scale: 1.4;
	transition: var(--transition);
	width: var(--nav-dots-width);
	white-space: nowrap;
	text-align: center;
	position: relative;
}

.dejpa__Order_Wrapper .wizard-nav .nav-buttons>span:not(.dot){
	scale: 0.6;
	transition: var(--transition);
}

.dejpa__Order_Wrapper .wizard-nav .nav-buttons .dot {
	height: var(--icon);
	width: var(--icon);
	min-width: var(--icon);
	min-height: var(--icon);
	display: inline-flex;
	vertical-align: middle;
	background: var(--icon-url) no-repeat center / cover;
	transition: all var(--transition);
	-webkit-transition: all var(--transition);
	transition-delay: 0;
}

.dejpa__Order_Wrapper .wizard-nav .nav-buttons.active .dot {
	transition-delay: var(--transition);
}


.dejpa__Order_Wrapper .wizard-nav .nav-buttons.active ~ .nav-buttons {
	--color-accent: var(--Gray-50);
	--icon-url: url(../assets/icons/logo-hollow1.svg);
	scale: 1;
	filter: brightness(1);

}
.dejpa__Order_Wrapper .wizard-nav .nav-buttons.active ~ .nav-buttons>span:not(.dot) {
	scale: 1;
}

/* step 1 contnets */
.order__Step_Title {
	font-weight: var(--fw-600);
	font-size: var(--fz-t2);
	line-height: var(--lh-t2);
	text-align: center;
}

@media (max-width: 991px) {
	.order__Step_Title {
		--fz-t2: var(--fz-t4);
		--lh-t2: var(--lh-t4);
	}
}

.order__Category_Wrapper {
	display: flex;
	gap: 2rem;
	margin-bottom: 3rem;
}

.order__Category_Item {
	position: relative;
	--border-size: 2px;
	flex: 1;
	padding: var(--border-size);
	overflow: hidden;
	border-radius: 8px;
	border: solid 1px var(--primary-20);
	background-color: var(--inner-bak, var(--white));
	transition: var(--transition);
}

.order__Category_Item.active {
	--inner-bak: var(--primary-20);
	--text-accent: var(--primary-99);
	pointer-events: none;
}


.order__CatItem_Inner {
	width: 100%;
	padding: 0.5rem;
	display: flex;
	align-items: center;
	gap: 2rem;
	position: relative;
	transition: var(--transition);
	border-radius: calc(8px - var(--border-size));
	z-index: 1;

	font-size: var(--fz-t4);
	line-height: var(--lh-t4);
	font-weight: var(--fw-600);

	color: var(--text-accent, var(--Gray-60));
}

.order__Category_Item .category__Item_Image {
	height: 88px;
	width: auto;
	transition: var(--transition);
	filter: saturate(0);
}
.order__Category_Item.active .category__Item_Image {
	filter: brightness(10);
}

.order_Steps_RainbowBorder {
	position: relative;
	--border-size: 3px;
	padding: var(--border-size);
	background: linear-gradient(white, white) padding-box,
		linear-gradient(255.86deg, var(--primary-20) 0%, var(--primary-20) 100%) border-box;
	border-radius: 0.5rem;
	border: var(--border-size) solid transparent;
}

.wizard__Step_Content {
	border-radius: calc(0.5rem - var(--border-size));
	background-color: var(--white);
	padding: 2rem 1.5rem 1rem;
	position: relative;
}

.order__SubCat_List {
	justify-content: center;
	align-items: start;
}

.order__Cat_Item {
	display: flex;
	flex-direction: column;
	align-items: center;
	--title-to-contnet: 48px;
	gap: var(--title-to-contnet);
	flex: 1;
}

.order__Cat_Item:not(:has(.order__Product_Item)) {
	opacity: 0.5;
}

.order__Cat_Item:has(.order__Product_Item) .order__SubCat_Title::after {
	content: "";
	display: block;
	width: 1px;
	left: 50%;
	top: 100%;
	/* position: absolute; */
	height: calc(var(--title-to-contnet) - 0.75rem);
	border: dashed 1px var(--secondar-50);
	transition: var(--transition);
	opacity: 1;
	margin-bottom: 0.5rem;
}

.order__SubCat_Content {
	display: flex;
	gap: 0.5rem;
	width: 100%;
}

.order__SubCat_Content .subCat__Content_List {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

@media (min-width:992px) {
	.order__SubCat_Content .subCat__Content_List {
		max-height: 50vh;
		overflow-y: auto;
		padding-inline-end: 0.25rem;
	}

	/* width */
	.order__SubCat_Content .subCat__Content_List::-webkit-scrollbar {
	width: 6px;
	}
	
	/* Track */
	.order__SubCat_Content .subCat__Content_List::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 100px;
}

/* Handle */
.order__SubCat_Content .subCat__Content_List::-webkit-scrollbar-thumb {
	background: var(--primary-40);
	border-radius: 100px;
	}
	
	/* Handle on hover */
	.order__SubCat_Content .subCat__Content_List::-webkit-scrollbar-thumb:hover {
	background: var(--primary-30);
	}
}


.order__Product_Item {
	display: flex;
	padding: 0.5rem;
	align-items: center;
	justify-content: space-between;
	border-radius: var(--border-radius-sm);
	border: solid 1px var(--Gray-80);
	transition: var(--transition);
	width: 100%;
	--icon-url: url(../assets/icons/download.svg);
	--icon: 18px;
	--icon-color: var(--Gray-20);
}

.order__Product_Item:hover {
	box-shadow: 0px 2px 4px 0px #0e13281a;
	border-color: var(--Gray-40);
}

.order__Product_Item label {
	flex: 1;
	padding-inline-end: 1rem;
	color: var(--label-color , var(--Gray-20));
}

.order__Product_Item input {
	display: none;
}

.order__Product_Item:has(input:checked) {
	border-color: var(--primary-50);
	background-color: var(--primary-20);
	--label-color:var(--white);
	--icon-color:var(--white);
}

.order__Tip_Text {
	--icon-url: url(../assets/icons/info.svg);
	margin-top: 1.5rem;
	--icon-color: var(--Gray-20);
	color: var(--primary-20);
}

.order__Tip_Text > * {
	vertical-align: middle;
}

.info_Icon_Wrapper {
	--icon: 12px;
	align-items: center;
	justify-content: center;
	border: solid 1px var(--primary-20);
	--icon-color: var(--primary-20);
	border-radius: 0.5rem;
	width: 1.5rem;
	height: 1.5rem;
	display: inline-flex;
}

.wizard-buttons {
	display: flex;
	justify-content: space-between;
	margin-top: 1.5rem;
  gap: 1rem;
}

.wizard-btn {
	--icon-url: url(../assets/icons/tinyArrow.svg);
	width: 200px;
	padding: 0.5rem;
	gap: 1rem;
	--icon-rotate: 90deg;

	font-size: var(--fz-t4);
	line-height: var(--lh-t4);
	font-weight: var(--fw-600);
}

.wizard-btn::after {
	content: "";
	height: var(--icon);
	width: var(--icon);
	min-width: var(--icon);
	display: inline-flex;
	background: var(--icon-color);
	mask: var(--icon-url) no-repeat center / cover;
	-webkit-mask: var(--icon-url) no-repeat center / cover;
	transition: all var(--transition);
	-webkit-transition: all var(--transition);
	rotate: calc(var(--icon-rotate, 0deg) * var(--direction-num, 1));
}

.wizard-btn.prev {
	--icon-rotate: -90deg;
	flex-direction: row-reverse;

	--btn-accent: var(--mc2);
	--btn-bak: transparent;
	border-color: var(--btn-accent) !important;
}

.wizard-btn.prev::before {
	content: unset;
}

.wizard-btn:disabled {
	--accent-color: var(--primary-80);
	--bak-color: var(--primary-100);
}
.order__SubCat_List .slick-list{
	margin-inline: -0.5rem;
}
.order__SubCat_List  .slick-slide{
	margin-inline: 0.5rem;
}

.order__SubCat_Title {
	display: flex;
	align-items: center;
	flex-direction: column;
}

@media (min-width:992px) {

	.order__SubCat_Title{
		--line-limit:2;
		height: calc(32px * var(--line-limit));
		text-align: center;
	}
	.order__Cat_Item:not(.slick-slide){
		min-width: 25%;
		max-width: 25%;
	}
	
	.order__SubCat_List:not(.slick-initialized){
		display: flex;
		justify-content: start;
		gap: 1rem;
		overflow: hidden;
		max-width: 100%;
	}

	.order__Cat_Item{
		animation: fadeIn forwards calc(2 * var(--transition));
		filter: drop-shadow(0 0 0 var(--Gray-50));
		
	}

}
@keyframes fadeIn {
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

@media (max-width: 1199px) {
	.dejpa__Order_Wrapper .wizard-nav .nav-buttons {
		--icon: 33px;
	}

	.order__SubCat_Wrapper {
		padding: 1rem;
	}

	.order__Category_Wrapper {
		flex-direction: column;
		gap: 1rem;
	}

	.order__Category_Item .category__Item_Image {
		height: 55px;
	}

	.order__SubCat_List {
		display: flex;
		flex-direction: column;
	}

	.order__Cat_Item {
		width: 100%;
		transition: var(--transition);
	}

	.wizard-step.nav-buttons > *:not(.dot) {
		display: none;
	}

	.dejpa__Order_Wrapper .wizard-nav {
		--nav-dots-width: 33px;
	}

	.dejpa__Order_Wrapper .wizard-nav {
		--nav-inline-padding: 0px;
	}

	.dejpa__Order_Wrapper .wizard-nav .wizard-progress-bar {
		top: 25%;
	}

	.order__Cat_Item:not(.active) {
		gap: 0;
	}

	.order__Cat_Item:not(.active) .order__SubCat_Title::after {
		height: 0px;
		opacity: 0;
	}

	.order__SubCat_Title {
		display: flex;
		width: 100%;
		justify-content: space-between;
		gap: 0.5rem;
		padding-block: 10px 0px;
		flex-direction: row-reverse;
		align-items: center;
		--icon-url: url(../assets/icons/chevUp.svg);
		--icon-color: var(--Gray-20);
		--icon-rotate: 180deg;
	}

	.order__Cat_Item.active .order__SubCat_Title {
		--icon-rotate: 0deg;
	}

	.order__Cat_Item:has(.order__Product_Item) .order__SubCat_Title::before {
		content: "";
		height: var(--icon);
		width: var(--icon);
		min-width: var(--icon);
		min-height: var(--icon);
		display: inline-flex;
		vertical-align: middle;
		background: var(--icon-color);
		mask: var(--icon-url) no-repeat center / cover;
		-webkit-mask: var(--icon-url) no-repeat center / cover;
		margin: var(--icon-mt, 0) var(--icon-mr, 0) var(--icon-mb, 0) var(--icon-ml, 0);
		transition: all var(--transition);
		-webkit-transition: all var(--transition);
		rotate: calc(var(--icon-rotate, 0deg) * var(--direction-num, 1));
	}

	.order__Cat_Item {
		padding-bottom: 1rem;
		border-bottom: solid 1px var(--Gray-95);
	}

	.order__Cat_Item:last-child {
		margin-bottom: calc(var(--main-space) * 0.75);
	}

	.order__SubCat_Content {
		padding-inline: 20%;
	}

	.order__Cat_Item:has(.order__Product_Item) .order__SubCat_Title::after {
		position: absolute !important;
	}

	.order__SubCat_Title{
		overflow: visible;
	}
}

/* STEP 2 */

.form-group .customlist-items {
	display: grid;
	--col: 5;
	grid-template-columns: repeat(var(--col), 1fr);
	gap: 1rem;
	padding: 48px 80px 64px;
}

.customlist-item {
	border: 1px solid var(--Gray-95);
	padding: 1rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	transition: var(--transition);
	border-radius: 1rem;
	text-align: center;
	font-size: var(--fz-t6);
	font-weight: var(--fw-500);
	line-height: var(--lh-t6);
	cursor: pointer;
}

.customlist-item input {
	display: none;
}

.customlist-item .customlist-thumbnail {
	filter: grayscale(var(--thumb-gary, 1)) saturate(var(--thumb-sat, 1));
	transition: var(--transition);
}
.customlist-item .customlist-checked {
	display: none;
}

.customlist-item:hover {
	--thumb-gary: 0.3;
	border-color: var(--Gray-40);
	box-shadow: 0px 4px 8px 0px #0e132826;
}
.customlist-item:has(input:checked) {
	--thumb-gary: 0;
	--thumb-sat: 1.5;
	border-color: var(--primary-50);
	box-shadow: 0 0 0 transparent;
}
.OrderInfoPane {
	display: grid;
	--col: 2;
	grid-template-columns: repeat(var(--col), 1fr);
	gap: 1px;
	background: var(--Gray-95);
	padding: 0;
	margin: 2rem 1.5rem 1rem;
}
.OrderInfoPane > div {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem;
	background: var(--white);
}
.OrderInfoPane label {
	color: var(--primary-50);
	font-weight: var(--fw-500);
	font-size: var(--fz-sm);
}
.OrderInfoPane input {
	outline: 0;
	border: 0;
	color: var(--Gray-40);
}
@media (max-width: 1199px) {
	.form-group .customlist-items {
		--col: 3;
	}
}
@media (max-width: 991px) {
	.form-group .customlist-items {
		--col: 2;
		padding-inline: 2rem;
	}
	.OrderInfoPane {
		--col: 1;
	}
}
@media (max-width: 575px) {
	.form-group .customlist-items {
		--col: 1;
		padding: 0;
	}

	.customlist-item {
		flex-direction: row;
		align-items: center;
		gap: 40px;
	}

	.customlist-item img {
		height: 72px;
	}
}

.order__Succes_Message{
	margin-bottom: 2rem;
}

.order__Success_Buttons a{
	flex: 1;
}

/* step loading start */



/* step loading end */


/* !------------------------------- Order End --------------------------------- */
