/******************************************************************
  Template Name: Ashion
  Description: Ashion ecommerce template
  Author: Colorib
  Author URI: https://colorlib.com/
  Version: 1.0
  Created: Colorib
******************************************************************/

/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Categories Section
5.  Product Section
6.  Banner Section
7.  Countdown Section
8.  Instagram
9.  Contact
10.  Footer Style
-------------------------------------------------------------------*/

/*----------------------------------------*/

/* Template default CSS
/*----------------------------------------*/

html,
body {
	height: 100%;
	font-family: "Montserrat", sans-serif;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: #111111;
	font-weight: 400;
	font-family: "Montserrat", sans-serif;
}

h1 {
	font-size: 70px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 30px;
}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p {
	font-size: 14px;
	font-family: "Montserrat", sans-serif;
	color: #666666;
	font-weight: 400;
	line-height: 24px;
	margin: 0 0 15px 0;
}

img {
	max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
	outline: none;
}

a:hover,
a:focus {
	text-decoration: none;
	outline: none;
}

ul,
ol {
	padding: 0;
	margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/

.section-title {
	margin-bottom: 45px;
}

.section-title h4 {
	color: #111111;
	font-weight: 600;
	text-transform: uppercase;
	position: relative;
	display: inline-block;
}

.section-title h4:after {
	position: absolute;
	left: 0;
	bottom: -4px;
	height: 2px;
	width: 70px;
	background: #ca1515;
	content: "";
}

.set-bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}

.spad {
	padding-top: 100px;
	padding-bottom: 100px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
	color: #fff;
}

/* buttons */

.primary-btn {
	display: inline-block;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 600;
	padding: 12px 30px 10px;
	color: #ffffff;
	background: #ca1515;
}

.site-btn {
	font-size: 14px;
	color: #ffffff;
	background: #ca1515;
	font-weight: 600;
	border: none;
	text-transform: uppercase;
	display: inline-block;
	padding: 12px 30px;
	border-radius: 50px;
}

/* Preloder */

#preloder {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999999;
	background: #ffffff;
}

.loader {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -13px;
	margin-left: -13px;
	border-radius: 60px;
	animation: loader 0.8s linear infinite;
	-webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

.spacial-controls {
	position: fixed;
	width: 111px;
	height: 91px;
	top: 0;
	right: 0;
	z-index: 999;
}

.spacial-controls .search-switch {
	display: block;
	height: 100%;
	padding-top: 30px;
	background: #323232;
	text-align: center;
	cursor: pointer;
}

.search-model {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #ffffff;
	z-index: 99999;
}

.search-model-form {
	padding: 0 15px;
}

.search-model-form input {
	width: 500px;
	font-size: 40px;
	border: none;
	border-bottom: 2px solid #dddddd;
	background: 0 0;
	color: #999;
}

.search-close-switch {
	position: absolute;
	width: 50px;
	height: 50px;
	background: #333;
	color: #fff;
	text-align: center;
	border-radius: 50%;
	font-size: 28px;
	line-height: 28px;
	top: 30px;
	cursor: pointer;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

/*---------------------
  Header
-----------------------*/

.header {
	background: #ffffff;
	-webkit-box-shadow: 0px 5px 10px rgba(91, 91, 91, 0.1);
	box-shadow: 0px 5px 10px rgba(91, 91, 91, 0.1);
}

.header__logo {
	padding: 26px 0;
}

.header__logo a {
	display: inline-block;
}

.header__menu {
	padding: 30px 0 27px;
}

.header__menu ul li {
	list-style: none;
	display: inline-block;
	margin-right: 40px;
	position: relative;
}

.header__menu ul li.active a:after {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.header__menu ul li:hover a:after {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.header__menu ul li:hover .dropdown {
	top: 27px;
	opacity: 1;
	visibility: visible;
}

.header__menu ul li:last-child {
	margin-right: 0;
}

.header__menu ul li .dropdown {
	position: absolute;
	left: 0;
	top: 56px;
	width: 150px;
	background: #111111;
	text-align: left;
	padding: 2px 0;
	z-index: 9;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.header__menu ul li .dropdown li {
	display: block;
	margin-right: 0;
}

.header__menu ul li .dropdown li a {
	font-size: 14px;
	color: #ffffff;
	font-weight: 400;
	padding: 8px 20px;
	text-transform: capitalize;
}

.header__menu ul li .dropdown li a:after {
	display: none;
}

.header__menu ul li a {
	font-size: 15px;
	text-transform: uppercase;
	color: #111111;
	font-weight: 500;
	display: block;
	padding: 2px 0;
	position: relative;
}

.header__menu ul li a:after {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: #ca1515;
	content: "";
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}

.header__right {
	text-align: right;
	padding: 30px 0 27px;
}

.header__right__auth {
	display: inline-block;
	margin-right: 25px;
}

.header__right__auth a {
	font-size: 12px;
	color: #666666;
	position: relative;
	margin-right: 8px;
}

.header__right__auth a:last-child {
	margin-right: 0;
}

.header__right__auth a:last-child:after {
	display: none;
}

.header__right__auth a:after {
	position: absolute;
	right: -8px;
	top: -2px;
	content: "/";
	font-size: 13px;
}

.header__right__widget {
	display: inline-block;
}

.header__right__widget li {
	list-style: none;
	display: inline-block;
	font-size: 18px;
	color: #111111;
	margin-right: 20px;
	cursor: pointer;
}

.header__right__widget li:last-child {
	margin-right: 0;
}

.header__right__widget li a {
	font-size: 18px;
	color: #111111;
	position: relative;
}

.header__right__widget li a .tip {
	position: absolute;
	right: -12px;
	top: -11px;
	height: 18px;
	width: 18px;
	background: #111111;
	font-size: 10px;
	font-weight: 500;
	color: #ffffff;
	line-height: 18px;
	text-align: center;
	border-radius: 50%;
}

.offcanvas-menu-wrapper {
	display: none;
}

.canvas__open {
	display: none;
}

/*---------------------
  Banner
-----------------------*/

.banner {
	height: 500px;
}

.banner__text span {
	font-size: 18px;
	color: #ca1515;
	text-transform: uppercase;
}

.banner__text h1 {
	font-size: 80px;
	color: #111111;
	font-family: "Cookie", cursive;
	margin-bottom: 15px;
}

.banner__text a {
	font-size: 14px;
	color: #111111;
	text-transform: uppercase;
	font-weight: 700;
	position: relative;
	padding: 0 0 3px;
	display: inline-block;
}

.banner__text a:after {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	background: #ca1515;
	content: "";
}

.banner__slider {
	text-align: center;
	padding: 150px 0 0;
}

.banner__slider.owl-carousel .owl-dots {
	position: absolute;
	left: 0;
	top: 430px;
	width: 100%;
	text-align: center;
}

.banner__slider.owl-carousel .owl-dots button {
	height: 12px;
	width: 12px;
	background: #a1a1a1;
	border-radius: 50%;
	margin-right: 10px;
}

.banner__slider.owl-carousel .owl-dots button.active {
	background: #ca1515;
}

	.banner__slider.owl-carousel .owl-dots button:last-child {
		margin-right: 0;
	}



	/*  this code start for index page */



/* Taake Row ke andar 5 cards wrap na hon balkay line mein rahein */
.row {
	display: flex;
	flex-wrap: wrap;
}

/* 1. Image Box (Fixed Height & Position) */




.review-section {
	background: #fff;
	padding: 40px 0;
	font-family: 'Segoe UI', sans-serif;
}

.review-header {
	font-size: 24px;
	font-weight: 700;
	color: #333;
	margin-bottom: 25px;
}

.review-stats-box {
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 25px;
	background: #fff;
}

.big-rating {
	font-size: 48px;
	font-weight: 700;
	color: #333;
	line-height: 1;
}

.stars {
	color: #ffa500;
	font-size: 18px;
	letter-spacing: 2px;
}

.review-count {
	color: #666;
	font-size: 14px;
	margin-top: 5px;
}

.rating-bar {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
	font-size: 13px;
}

.rating-label {
	width: 50px;
	color: #555;
}

.rating-progress {
	flex: 1;
	height: 8px;
	background: #f0f0f0;
	border-radius: 4px;
	margin: 0 10px;
	overflow: hidden;
}

.rating-fill {
	height: 100%;
	border-radius: 4px;
}

.rating-number {
	width: 25px;
	text-align: right;
	color: #666;
}

.review-photos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	max-width: 200px;
	margin-bottom: 15px;
}

.review-photo {
	width: 45px;
	height: 45px;
	object-fit: cover;
	border-radius: 6px;
	cursor: pointer;
	transition: transform 0.2s;
}

	.review-photo:hover {
		transform: scale(1.1);
	}

.review-right-section {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	height: 100%;
}

.btn-write-review {
	border: 1px solid #ccc;
	background: #fff;
	color: #555;
	padding: 10px 25px;
	font-size: 13px;
	border-radius: 4px;
	transition: all 0.3s;
	cursor: pointer;
}

	.btn-write-review:hover {
		border-color: #333;
		color: #333;
	}

.review-tabs {
	border-bottom: 1px solid #e0e0e0;
	margin: 25px 0 20px;
}

.review-tab {
	display: inline-block;
	padding: 12px 0;
	margin-right: 25px;
	color: #888;
	font-size: 15px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
}

	.review-tab.active {
		color: #333;
		border-bottom-color: #333;
		font-weight: 600;
	}

.review-item {
	display: flex;
	padding: 20px 0;
	border-bottom: 1px solid #f0f0f0;
}

.reviewer-avatar {
	width: 45px;
	height: 45px;
	background: linear-gradient(135deg, #667eea, #764ba2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	position: relative;
	flex-shrink: 0;
}

.verified-icon {
	position: absolute;
	bottom: -2px;
	right: -2px;
	color: #28a745;
	font-size: 14px;
	background: #fff;
	border-radius: 50%;
}

.review-content {
	margin-left: 15px;
	flex: 1;
}

.reviewer-name {
	font-weight: 600;
	color: #333;
	font-size: 14px;
}

.verified-badge {
	display: inline-flex;
	align-items: center;
	color: #28a745;
	font-size: 11px;
	margin-top: 3px;
}

.review-stars {
	color: #ffa500;
	font-size: 12px;
	margin: 5px 0;
}

.review-text {
	color: #555;
	font-size: 14px;
	margin-top: 8px;
}

.review-date {
	color: #999;
	font-size: 12px;
	float: right;
}

/* ===== FIXED MODAL ===== */
.review-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
}

	.review-modal.show {
		display: block;
	}

.modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}

/* FIXED: Scrollable modal */
.modal-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 500px;
	max-height: 90vh; /* Screen se zyada height nahi */
	overflow-y: auto; /* Scrolling enable */
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.modal-header-custom {
	padding: 20px 25px;
	border-bottom: 1px solid #eee;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 10;
}

.modal-body-custom {
	padding: 25px;
}

.modal-title {
	font-weight: 700;
	font-size: 18px;
}

.btn-close-custom {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: #666;
}

.star-input {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	gap: 10px;
	font-size: 32px;
	margin-bottom: 20px;
}

	.star-input input {
		display: none;
	}

	.star-input label {
		color: #ddd;
		cursor: pointer;
		transition: 0.2s;
	}

		.star-input label:hover,
		.star-input label:hover ~ label,
		.star-input input:checked ~ label {
			color: #ffa500;
		}

.form-input {
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 12px;
	width: 100%;
	margin-bottom: 15px;
	font-size: 14px;
}

/* FIXED: Upload box compact */
.upload-box {
	border: 2px dashed #ccc;
	border-radius: 8px;
	padding: 20px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s;
	min-height: 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

	.upload-box:hover {
		border-color: brown;
		background: #fff5f5;
	}

/* FIXED: Image preview inline */
.upload-preview {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-top: 10px;
}

#imgPreview {
	max-width: 60px;
	max-height: 60px;
	border-radius: 6px;
	display: none;
}

.submit-btn {
	background: #ccc;
	color: #fff;
	border: none;
	padding: 14px;
	width: 100%;
	border-radius: 6px;
	font-weight: 600;
	cursor: not-allowed;
	margin-top: 15px;
	transition: all 0.3s;
}

	.submit-btn.active {
		background: brown;
		cursor: pointer;
	}

		.submit-btn.active:hover {
			background: #8b4513;
			transform: translateY(-2px);
		}

/*  this code for end index page */




/*this code for starting  layout 
*/




/* Cart Sidebar Styling */
.cart-sidebar-wrapper {
	position: fixed;
	right: -400px; /* Initially hidden */
	top: 0;
	width: 400px;
	height: 100%;
	background: #ffffff;
	z-index: 9999;
	padding: 30px;
	transition: all 0.4s ease;
	box-shadow: -5px 0 15px rgba(0,0,0,0.1);
	display: flex;
	flex-direction: column;
}

.cart-sidebar-wrapper.active {
	right: 0; /* Show sidebar */
}

.cart-sidebar-overlay {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 9998;
	visibility: hidden;
	opacity: 0;
	transition: 0.3s;
}

	.cart-sidebar-overlay.active {
		visibility: visible;
		opacity: 1;
	}

.cart-sidebar__close {
	font-size: 30px;
	cursor: pointer;
	position: absolute;
	top: 20px;
	right: 20px;
}

.cart-sidebar__title {
	font-weight: 700;
	font-size: 20px;
	margin-bottom: 30px;
	border-bottom: 1px solid #ebebeb;
	padding-bottom: 15px;
}

.cart-sidebar__footer {
	margin-top: auto;
	border-top: 1px solid #ebebeb;
	padding-top: 20px;
}

.checkout-btn {
	display: block;
	text-align: center;
	margin-top: 10px;
	padding: 12px;
	color: white !important;
}

/* Responsiveness */
@@media only screen and (max-width: 479px) {
	.cart-sidebar-wrapper {
		width: 100%; /* Full screen on mobile */
		right: -100%;
	}
}

.top-bar {
	background-color: brown; /* Brown Background */
	height: 40px; /* Fixed Height */
	display: flex;
	align-items: center; /* Vertically Center */
	color: #ffffff; /* White Text Color */
	font-size: 13px; /* Clean Font Size */
	font-family: sans-serif;
}

	.top-bar .container-fluid {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
		width: 100%;
	}

	.top-bar a {
		color: #ffffff !important;
		text-decoration: none;
		transition: 0.3s;
	}

		.top-bar a:hover {
			opacity: 0.8;
		}

	/* Icons ke darmiyan thora gap */
	.top-bar i {
		margin-right: 5px;
	}

/* Center text ko thora bold karne ke liye */
.top-bar-center span {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* --- Mobile Responsive Fix --- */
@@media (max-width: 768px) {
	/* Mobile par sirf center text dikhayen ya size chota kar dein */
	.top-bar-left, .top-bar-right {
		display: none; /* Mobile par number/email hide (optional) */
	}

	.top-bar-center {
		width: 100%;
		text-align: center;
		font-size: 11px;
	}
}
/* Header Size Reduction */
/* Header Height adjustment */
/* Header Padding to reduce overall size */
/* --- Header General Fix --- */
.header {
	padding: 11px 0;
	height: 50px; /* Fixed height ki wajah se links niche girte hain, auto behtar hai */
	min-height: 90px;
	display: flex;
	align-items: center;
	/* background: linear-gradient(to right, #ffe6f0, #fff0e6); */
}

/* Header ke links ko ek line mein rakhne ke liye wrapper */
.header__right__auth {
	display: inline-flex !important;
	align-items: center;
	vertical-align: middle;
	gap: 15px; /* Links ke darmiyan gap */
	font-size: 0; /* Stray characters (/) hide karne ke liye */
}

	.header__right__auth * {
		font-size: 14px; /* Text wapis show karne ke liye */
	}

/* --- User Dropdown Style --- */
.user-profile-dropdown {
	position: relative;
	display: inline-block;
}

.user-trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none !important;
	color: #111 !important;
	cursor: pointer;
	padding: 5px 0;
}

	.user-trigger i {
		font-size: 20px;
		color: #333;
	}

.user-name-label {
	font-size: 13px;
	font-weight: 600;
}

/* Professional Dropdown Card */
.user-dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	width: 190px;
	background: #fff;
	box-shadow: 0 10px 25px rgba(0,0,0,0.1);
	border-radius: 8px;
	padding: 10px 0;
	z-index: 1000;
	margin-top: 5px;
	border: 1px solid #eee;
}

/* Hover Logic with Bridge */
.user-profile-dropdown:hover .user-dropdown-menu {
	display: block;
}

/* Invisible Bridge: Mouse gap fill karne ke liye */
.user-profile-dropdown::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 0;
	width: 100%;
	height: 15px;
}

/* Dropdown Content */
.dropdown-user-info {
	padding: 5px 15px 10px;
	border-bottom: 1px solid #eee;
	margin-bottom: 5px;
}

	.dropdown-user-info strong {
		display: block;
		font-size: 14px;
		color: #111;
	}

	.dropdown-user-info span {
		font-size: 11px;
		color: #888;
	}

.user-dropdown-menu a {
	display: block;
	padding: 8px 15px;
	color: #444 !important;
	font-size: 13px !important;
	text-decoration: none !important;
	transition: 0.2s;
}

	.user-dropdown-menu a i {
		margin-right: 8px;
		width: 14px;
		color: #777;
	}

	.user-dropdown-menu a:hover {
		background: #fdf5f5;
		color: brown !important;
	}

.logout-text {
	color: #d9534f !important;
}

/* --- Mobile Fixes --- */
@@media (max-width: 991px) {
	.header__right__auth {
		display: none !important; /* Mobile main header se gayab */
	}
}

.offcanvas__auth {
	border-top: 1px solid #ebebeb;
	padding-top: 20px;
	margin-top: 20px;
}

	.offcanvas__auth a {
		display: block;
		margin-bottom: 12px;
		font-weight: 600;
		color: #111;
		text-decoration: none;
	}



.cart-sidebar-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 9998;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
}

.cart-sidebar-overlay.active {
	opacity: 1;
	visibility: visible;
}

.cart-sidebar-wrapper {
	position: fixed;
	top: 0;
	right: -400px;
	width: 380px;
	height: 100vh;
	background: white;
	z-index: 9999;
	box-shadow: -5px 0 20px rgba(0,0,0,0.1);
	transition: right 0.3s ease;
	display: flex;
	flex-direction: column;
}

	.cart-sidebar-wrapper.active {
		right: 0;
	}

.cart-sidebar__close {
	position: absolute;
	top: 15px;
	right: 20px;
	font-size: 28px;
	cursor: pointer;
	color: #333;
	z-index: 10;
}

.cart-sidebar__title {
	padding: 25px 20px;
	border-bottom: 2px solid #f0f0f0;
}

	.cart-sidebar__title p {
		margin: 0;
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}

.cart-sidebar__content {
	flex: 1;
	overflow-y: auto;
	padding: 0;
}

.cart-sidebar__footer {
	padding: 20px;
	border-top: 2px solid #f0f0f0;
	background: #fafafa;
}

.cart-item {
	display: flex;
	padding: 15px;
	border-bottom: 1px solid #ebebeb;
	gap: 15px;
	align-items: center;
}

.cart-item__image {
	width: 70px;
	height: 70px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid #eee;
}

.cart-item__details {
	flex: 1;
}

.cart-item__name {
	font-weight: 600;
	font-size: 14px;
	color: #333;
	margin-bottom: 5px;
}

.cart-item__price {
	color: #c0392b;
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 8px;
}

.cart-item__actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.quantity-control {
	display: flex;
	align-items: center;
	border: 1px solid #ddd;
	border-radius: 20px;
	overflow: hidden;
	height: 28px;
	background: white;
}

	.quantity-control button {
		background: none;
		border: none;
		width: 28px;
		height: 100%;
		cursor: pointer;
		font-size: 14px;
		color: #333;
	}

		.quantity-control button:hover {
			background: #f0f0f0;
		}

	.quantity-control input {
		width: 35px;
		text-align: center;
		border: none;
		font-size: 13px;
		font-weight: 600;
		height: 100%;
	}

.cart-item__remove {
	color: #999;
	cursor: pointer;
	font-size: 16px;
	margin-left: auto;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

	.cart-item__remove:hover {
		color: #dc3545;
		background: #fee;
	}

.cart-empty {
	text-align: center;
	padding: 50px 20px;
}

	.cart-empty i {
		font-size: 60px;
		color: #ddd;
		margin-bottom: 20px;
	}

.checkout-btn {
	display: block;
	width: 100%;
	text-align: center;
	padding: 12px;
	margin-bottom: 10px;
	border-radius: 25px;
	text-decoration: none;
	font-weight: 600;
	background: linear-gradient(135deg, #c0392b 0%, #8b4513 100%);
	color: white;
}

	.checkout-btn.bg-dark {
		background: #333;
	}


/*	this code form ending layout
*/
/*---------------------
  Footer
-----------------------*/
.footer {
	padding-top: 55px;
}

.footer__about {
	margin-bottom: 30px;
}

.footer__about p {
	margin-bottom: 20px;
}

.footer__logo {
	margin-bottom: 20px;
}

.footer__payment a {
	margin-right: 6px;
	margin-bottom: 10px;
	display: inline-block;
}

.footer__payment a:last-child {
	margin-right: 0;
}

.footer__widget {
	margin-bottom: 30px;
}

.footer__widget h6 {
	color: #111111;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.footer__widget ul li {
	list-style: none;
}

.footer__widget ul li a {
	font-size: 14px;
	color: #666666;
	line-height: 30px;
}

.footer__newslatter {
	margin-bottom: 30px;
}

.footer__newslatter h6 {
	color: #111111;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 25px;
}

.footer__newslatter form {
	position: relative;
	margin-bottom: 30px;
}

.footer__newslatter form input {
	height: 52px;
	width: 100%;
	border: 1px solid #e1e1e1;
	border-radius: 50px;
	padding-left: 30px;
	font-size: 14px;
	color: #666666;
}

.footer__newslatter form input::-webkit-input-placeholder {
	color: #666666;
}

.footer__newslatter form input::-moz-placeholder {
	color: #666666;
}

.footer__newslatter form input:-ms-input-placeholder {
	color: #666666;
}

.footer__newslatter form input::-ms-input-placeholder {
	color: #666666;
}

.footer__newslatter form input::placeholder {
	color: #666666;
}

.footer__newslatter form button {
	position: absolute;
	right: 4px;
	top: 4px;
}

.footer__social a {
	display: inline-block;
	height: 40px;
	width: 40px;
	background: #e1e1e1;
	font-size: 15px;
	color: #111111;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	margin-right: 6px;
	margin-bottom: 5px;
}

.footer__social a:last-child {
	margin-right: 0;
}

.footer__copyright__text {
	border-top: 1px solid #e1e1e1;
	padding: 18px 0 25px;
	text-align: center;
	margin-top: 35px;
}

.footer__copyright__text p {
	margin-bottom: 0;
}

.footer__copyright__text a {
	color: #5C5C5C;
}

.footer__copyright__text i {
	color: #ca1515;
}

.footer__copyright__text a:hover {
	color: #ca1515;
}

/*---------------------
  Breadcrumb
-----------------------*/

.breadcrumb-option {
	padding-top: 35px;
}

.breadcrumb__links a {
	font-size: 15px;
	font-weight: 500;
	color: #111111;
	margin-right: 18px;
	display: inline-block;
	position: relative;
}

.breadcrumb__links a:after {
	position: absolute;
	right: -14px;
	top: 0;
	content: "";
	font-family: "FontAwesome";
}

.breadcrumb__links a i {
	margin-right: 5px;
}

.breadcrumb__links span {
	font-size: 15px;
	font-weight: 500;
	color: #888888;
	display: inline-block;
}

/*---------------------
  Categories
-----------------------*/

.categories {
	overflow: hidden;
	margin-top: 10px;
}

.categories .container-fluid {
	padding-right: 5px;
}

.categories__item {
	height: 314px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding-left: 30px;
	margin-bottom: 10px;
	margin-right: 10px;
}

.categories__item.categories__large__item {
	height: 638px;
	padding-left: 70px;
}

.categories__item.categories__large__item .categories__text {
	max-width: 480px;
}

.categories__item.categories__large__item .categories__text p {
	margin-bottom: 15px;
}

.categories__text h1 {
	font-family: "Cookie", cursive;
	color: #111111;
	margin-bottom: 5px;
}

.categories__text h4 {
	color: #111111;
	font-weight: 700;
}

.categories__text p {
	margin-bottom: 10px;
}

.categories__text a {
	font-size: 14px;
	color: #111111;
	text-transform: uppercase;
	font-weight: 600;
	position: relative;
	padding: 0 0 3px;
	display: inline-block;
}

.categories__text a:after {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	background: #ca1515;
	content: "";
}

/*---------------------
  Product
-----------------------*/

.product {
	padding-top: 60px;
	padding-bottom: 50px;
}

.filter__controls {
	text-align: right;
	margin-bottom: 50px;
}

.filter__controls li {
	font-size: 14px;
	list-style: none;
	display: inline-block;
	color: #111111;
	margin-right: 35px;
	position: relative;
	cursor: pointer;
}

.filter__controls li.active:after {
	opacity: 1;
}

.filter__controls li:after {
	position: absolute;
	left: 0;
	bottom: -4px;
	height: 2px;
	width: 100%;
	background: #ca1515;
	content: "";
	opacity: 0;
}

.filter__controls li:last-child {
	margin-right: 0;
}

.product__item {
	margin-bottom: 35px;
}

.product__item:hover .product__hover li {
	opacity: 1;
	top: 0;
}

.product__item.sale .product__item__pic .label {
	background: #ca1515;
}

.product__item.sale .product__item__text .product__price {
	color: #ca1515;
}

.product__item__pic {
	height: 360px;
	position: relative;
	overflow: hidden;
}

.product__item__pic .label {
	font-size: 12px;
	color: #ffffff;
	font-weight: 500;
	display: inline-block;
	padding: 2px 8px;
	text-transform: uppercase;
	position: absolute;
	left: 10px;
	top: 10px;
}

.product__item__pic .label.new {
	background: #36a300;
}

.product__item__pic .label.stockout {
	background: #111111;
}

.product__item__pic .label.stockblue {
	background: #0066bd !important;
}

.product__item__pic .label.sale {
	background: #ca1515;
}

.product__hover {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 30px;
	text-align: center;
}

.product__hover li {
	list-style: none;
	display: inline-block;
	margin-right: 10px;
	position: relative;
	top: 100px;
	opacity: 0;
}

.product__hover li:nth-child(1) {
	-webkit-transition: all 0.4s ease 0.1s;
	-o-transition: all 0.4s ease 0.1s;
	transition: all 0.4s ease 0.1s;
}

.product__hover li:nth-child(2) {
	-webkit-transition: all 0.4s ease 0.15s;
	-o-transition: all 0.4s ease 0.15s;
	transition: all 0.4s ease 0.15s;
}

.product__hover li:nth-child(3) {
	-webkit-transition: all 0.4s ease 0.2s;
	-o-transition: all 0.4s ease 0.2s;
	transition: all 0.4s ease 0.2s;
}

.product__hover li:last-child {
	margin-right: 0;
}

.product__hover li:hover a {
	background: #ca1515;
}

.product__hover li:hover a span {
	color: #ffffff;
	-webkit-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}

.product__hover li a {
	font-size: 18px;
	color: #111111;
	display: block;
	height: 45px;
	width: 45px;
	background: #ffffff;
	line-height: 48px;
	text-align: center;
	border-radius: 50%;
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
}

.product__hover li a span {
	position: relative;
	-webkit-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
	display: inline-block;
}

.product__item__text {
	text-align: center;
	padding-top: 22px;
}

.product__item__text h6 a {
	font-size: 14px;
	color: #111111;
}

.product__item__text .rating {
	line-height: 18px;
	margin-bottom: 5px;
}

.product__item__text .rating i {
	font-size: 10px;
	color: #e3c01c;
	margin-right: -4px;
}

.product__item__text .rating i:last-child {
	margin-right: 0;
}

.product__item__text .product__price {
	color: #111111;
	font-weight: 600;
}

.product__item__text .product__price span {
	font-size: 14px;
	color: #b1b0b0;
	text-decoration: line-through;
	margin-left: 4px;
}

/*---------------------
  Shop
-----------------------*/

.shop {
	padding-top: 70px;
	padding-bottom: 80px;
}

.sidebar__categories {
	margin-bottom: 50px;
}

.sidebar__categories .section-title {
	margin-bottom: 35px;
}

.sidebar__categories .section-title h4 {
	font-size: 18px;
}

.categories__accordion .card {
	border: none;
	border-radius: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid #f2f2f2 !important;
	margin-bottom: 12px;
}

.categories__accordion .card:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none !important;
}

.categories__accordion .card-heading {
	cursor: pointer;
}

.categories__accordion .card-heading a {
	font-size: 14px;
	font-weight: 500;
	color: #111111;
	display: block;
}

.categories__accordion .card-body {
	padding-left: 0;
	padding-top: 6px;
	padding-bottom: 0;
}

.categories__accordion .card-body li {
	list-style: none;
	position: relative;
	padding-left: 16px;
}

.categories__accordion .card-body li:before {
	position: absolute;
	left: 4px;
	top: 14px;
	height: 1px;
	width: 4px;
	background: #666666;
	content: "";
}

.categories__accordion .card-body li a {
	font-size: 14px;
	color: #666666;
	line-height: 30px;
}

.categories__accordion .card-heading a:after,
.categories__accordion .card-heading>a.active[aria-expanded=false]:after {
	content: "";
	font-size: 14px;
	font-family: "FontAwesome";
	color: #666666;
	position: absolute;
	right: 30px;
	top: 0px;
}

.categories__accordion .card-heading.active a:after {
	content: "";
	font-size: 14px;
	font-family: "FontAwesome";
	color: #666666;
	position: absolute;
	right: 30px;
	top: -1px;
}

.categories__accordion .card-heading a[aria-expanded=true]:after,
.categories__accordion .card-heading>a.active:after {
	content: "";
	font-size: 14px;
	font-family: "FontAwesome";
	color: #666666;
	position: absolute;
	right: 30px;
	top: -1px;
}

.sidebar__filter {
	position: relative;
	margin-bottom: 60px;
}

.sidebar__filter .section-title {
	margin-bottom: 50px;
}

.sidebar__filter .section-title h4 {
	font-size: 18px;
}

.sidebar__filter a {
	font-size: 14px;
	color: #0d0d0d;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 700;
	display: inline-block;
	padding: 5px 16px 5px 24px;
	border: 2px solid #ff0000;
	position: absolute;
	right: 0;
	bottom: -5px;
	border-radius: 2px;
}

.filter-range-wrap .range-slider .price-input {
	position: relative;
}

.filter-range-wrap .range-slider .price-input p {
	font-size: 16px;
	color: #0d0d0d;
	font-weight: 500;
	display: inline-block;
	margin-bottom: 0;
}

.filter-range-wrap .range-slider .price-input:after {
	position: absolute;
	left: 81px;
	top: 12px;
	height: 1px;
	width: 5px;
	background: #0d0d0d;
	content: "";
}

.filter-range-wrap .range-slider .price-input input {
	font-size: 16px;
	color: #0d0d0d;
	max-width: 16%;
	border: none;
}

.filter-range-wrap .range-slider .price-input input:nth-child(1) {
	margin-right: 28px;
}

.filter-range-wrap .price-range {
	border-radius: 0;
	margin-bottom: 28px;
}

.filter-range-wrap .price-range.ui-widget-content {
	border: none;
	background: rgba(0, 0, 0, 0.1);
	height: 5px;
}

.filter-range-wrap .price-range.ui-widget-content .ui-slider-handle {
	height: 14px;
	width: 14px;
	border-radius: 50%;
	background: #ca1515;
	border: none;
	outline: none;
	cursor: pointer;
}

.filter-range-wrap .price-range .ui-slider-range {
	background: #ca1515;
	border-radius: 0;
}

.sidebar__sizes,
.sidebar__color {
	margin-bottom: 40px;
}

.sidebar__sizes .section-title,
.sidebar__color .section-title {
	margin-bottom: 35px;
}

.sidebar__sizes .section-title h4,
.sidebar__color .section-title h4 {
	font-size: 18px;
}

.sidebar__sizes .size__list label,
.sidebar__color .size__list label {
	display: block;
	padding-left: 20px;
	font-size: 14px;
	text-transform: uppercase;
	color: #444444;
	position: relative;
	cursor: pointer;
}

.sidebar__sizes .size__list label input,
.sidebar__color .size__list label input {
	position: absolute;
	visibility: hidden;
}

.sidebar__sizes .size__list label input:checked~.checkmark,
.sidebar__color .size__list label input:checked~.checkmark {
	border-color: #ca1515;
}

.sidebar__sizes .size__list label input:checked~.checkmark:after,
.sidebar__color .size__list label input:checked~.checkmark:after {
	border-color: #ca1515;
	opacity: 1;
}

.sidebar__sizes .size__list label .checkmark,
.sidebar__color .size__list label .checkmark {
	position: absolute;
	left: 0;
	top: 4px;
	height: 10px;
	width: 10px;
	border: 1px solid #444444;
	border-radius: 2px;
}

.sidebar__sizes .size__list label .checkmark:after,
.sidebar__color .size__list label .checkmark:after {
	position: absolute;
	left: 0px;
	top: -2px;
	width: 11px;
	height: 5px;
	border: solid #ffffff;
	border-width: 1.5px 1.5px 0px 0px;
	-webkit-transform: rotate(127deg);
	-ms-transform: rotate(127deg);
	transform: rotate(127deg);
	opacity: 0;
	content: "";
}

.sidebar__color .color__list label {
	text-transform: capitalize;
}

.pagination__option a {
	display: inline-block;
	height: 40px;
	width: 40px;
	border: 1px solid #f2f2f2;
	border-radius: 50%;
	font-size: 14px;
	color: #111111;
	font-weight: 600;
	line-height: 40px;
	text-align: center;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
	margin-right: 6px;
}

.pagination__option a:last-child {
	margin-right: 0;
}

.pagination__option a i {
	font-weight: 600;
}

.pagination__option a:hover {
	background: #0d0d0d;
	border-color: #0d0d0d;
	color: #ffffff;
}

/*---------------------
  Product Details
-----------------------*/

.product-details {
	padding-top: 70px;
	padding-bottom: 50px;
}

.product__details__pic {
	overflow: hidden;
}

.product__details__pic__left {
	width: 22%;
	max-height: 574px;
	float: left;
	overflow-y: auto;
}

.product__details__pic__left .pt {
	display: block;
	margin-bottom: 20px;
	cursor: pointer;
	position: relative;
}

.product__details__pic__left .pt::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #000;
	opacity: 0;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.product__details__pic__left .pt.active::after {
	opacity: 0.3;
}

.product__details__pic__left .pt:last-child {
	margin-bottom: 0;
}

.product__details__pic__left .pt img {
	min-width: 100%;
}

.product__details__slider__content {
	width: calc(78% - 20px);
	float: left;
	margin-left: 20px;
}

.product__details__pic__slider.owl-carousel .owl-nav button {
	position: absolute;
	left: 10px;
	top: 50%;
	font-size: 22px;
	color: #111111;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	line-height: 44px;
	text-align: center;
	margin-top: -20px;
}

.product__details__pic__slider.owl-carousel .owl-nav button.owl-next {
	left: auto;
	right: 10px;
}

.product__details__text h3 {
	color: #111111;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.product__details__text h3 span {
	display: block;
	font-size: 14px;
	color: #444444;
	text-transform: none;
	font-weight: 400;
	margin-top: 5px;
}

.product__details__text .rating {
	margin-bottom: 16px;
}

.product__details__text .rating i {
	font-size: 12px;
	color: #e3c01c;
	margin-right: -4px;
}

.product__details__text .rating span {
	font-size: 12px;
	color: #666666;
	margin-left: 5px;
}

.product__details__text p {
	color: #444444;
	margin-bottom: 28px;
}

.product__details__price {
	font-size: 30px;
	font-weight: 600;
	color: #ca1515;
	margin-bottom: 30px;
}

.product__details__price span {
	font-size: 18px;
	color: #b1b0b0;
	text-decoration: line-through;
	margin-left: 10px;
	display: inline-block;
}

.quantity {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

.quantity>span {
	font-size: 14px;
	color: #111111;
	font-weight: 600;
	float: left;
	margin-top: 14px;
	margin-right: 15px;
}

.pro-qty {
	height: 50px;
	width: 150px;
	border: 1px solid #ebebeb;
	border-radius: 50px;
	padding: 0 20px;
	overflow: hidden;
	display: inline-block;
}

.pro-qty .qtybtn {
	font-size: 14px;
	color: #666666;
	cursor: pointer;
	float: left;
	width: 12px;
	line-height: 46px;
}

.pro-qty input {
	font-size: 14px;
	color: #666666;
	font-weight: 500;
	border: none;
	float: left;
	width: 84px;
	text-align: center;
	height: 48px;
}

.product__details__button {
	overflow: hidden;
	margin-bottom: 25px;
}

.product__details__button .cart-btn {
	display: inline-block;
	font-size: 14px;
	color: #ffffff;
	background: #ca1515;
	font-weight: 600;
	text-transform: uppercase;
	padding: 14px 30px 15px;
	border-radius: 50px;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

.product__details__button ul {
	float: left;
}

.product__details__button ul li {
	list-style: none;
	display: inline-block;
	margin-right: 5px;
}

.product__details__button ul li:last-child {
	margin-right: 0;
}

.product__details__button ul li a {
	display: inline-block;
	height: 50px;
	width: 50px;
	border: 1px solid #ebebeb;
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	padding-top: 1px;
}

.product__details__button ul li a span {
	font-size: 18px;
	color: #666666;
}

.product__details__widget {
	border-top: 1px solid #ebebeb;
	padding-top: 35px;
}

.product__details__widget ul li {
	list-style: none;
	margin-bottom: 10px;
}

.product__details__widget ul li:last-child {
	margin-bottom: 0;
}

.product__details__widget ul li span {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	color: #111111;
	width: 150px;
	float: left;
}

.product__details__widget ul li .stock__checkbox {
	overflow: hidden;
}

.product__details__widget ul li .stock__checkbox label {
	display: block;
	padding-left: 20px;
	font-size: 14px;
	color: #666666;
	position: relative;
	cursor: pointer;
}

.product__details__widget ul li .stock__checkbox label input {
	position: absolute;
	visibility: hidden;
}

.product__details__widget ul li .stock__checkbox label input:checked~.checkmark {
	border-color: #ca1515;
}

.product__details__widget ul li .stock__checkbox label input:checked~.checkmark:after {
	border-color: #ca1515;
	opacity: 1;
}

.product__details__widget ul li .stock__checkbox label .checkmark {
	position: absolute;
	left: 0;
	top: 5px;
	height: 10px;
	width: 10px;
	border: 1px solid #444444;
	border-radius: 2px;
}

.product__details__widget ul li .stock__checkbox label .checkmark:after {
	position: absolute;
	left: 0px;
	top: -2px;
	width: 11px;
	height: 5px;
	border: solid #ffffff;
	border-width: 1.5px 1.5px 0px 0px;
	-webkit-transform: rotate(127deg);
	-ms-transform: rotate(127deg);
	transform: rotate(127deg);
	opacity: 0;
	content: "";
}

.product__details__widget ul li .color__checkbox label {
	display: inline-block;
	cursor: pointer;
	position: relative;
	margin-right: 20px;
}

.product__details__widget ul li .color__checkbox label.active input~.checkmark:after {
	border-color: #ffffff;
	opacity: 1;
}

.product__details__widget ul li .color__checkbox label:last-child {
	margin-right: 0;
}

.product__details__widget ul li .color__checkbox label input {
	position: absolute;
	visibility: hidden;
}

.product__details__widget ul li .color__checkbox label input:checked~.checkmark:after {
	border-color: #ffffff;
	opacity: 1;
}

.product__details__widget ul li .color__checkbox label .checkmark {
	position: absolute;
	left: 0;
	top: -10px;
	height: 20px;
	width: 20px;
	background: #e31e2f;
	border-radius: 50%;
	content: "";
}

.product__details__widget ul li .color__checkbox label .checkmark.black-bg {
	background: #111111;
}

.product__details__widget ul li .color__checkbox label .checkmark.grey-bg {
	background: #e4aa8b;
}

.product__details__widget ul li .color__checkbox label .checkmark:after {
	position: absolute;
	left: 3px;
	top: 5px;
	width: 13px;
	height: 6px;
	border: solid #ffffff;
	border-width: 1.5px 1.5px 0px 0px;
	-webkit-transform: rotate(127deg);
	-ms-transform: rotate(127deg);
	transform: rotate(127deg);
	opacity: 0;
	content: "";
}

.product__details__widget ul li .size__btn label {
	font-size: 14px;
	color: #666666;
	text-transform: uppercase;
	cursor: pointer;
	margin-right: 10px;
	display: inline-block;
	margin-bottom: 0;
}

.product__details__widget ul li .size__btn label:last-child {
	margin-right: 0;
}

.product__details__widget ul li .size__btn label.active {
	color: #ca1515;
}

.product__details__widget ul li .size__btn label input {
	position: absolute;
	visibility: hidden;
}

.product__details__widget ul li p {
	margin-bottom: 0;
	color: #666666;
}

.product__details__tab {
	padding-top: 80px;
	margin-bottom: 65px;
}

.nav {
	border-bottom: none;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	position: relative;
	margin-bottom: 40px;
}

.nav::before {
	position: absolute;
	left: 0;
	top: 13px;
	height: 1px;
	width: 335px;
	background: #e1e1e1;
	content: "";
}

.nav::after {
	position: absolute;
	right: 0;
	top: 13px;
	height: 1px;
	width: 335px;
	background: #e1e1e1;
	content: "";
}

.nav-item {
	margin-right: 46px;
}

.nav-item:last-child {
	margin-right: 0;
}

.nav-item .nav-link {
	font-size: 18px;
	color: #666666;
	font-weight: 600;
	border: none;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	padding: 0;
}

.nav-item .nav-link.active {
	color: #111111;
}

.tab-content .tab-pane h6 {
	color: #666666;
	font-weight: 600;
	margin-bottom: 24px;
}

.tab-content .tab-pane p:last-child {
	margin-bottom: 0;
}

.related__title h5 {
	font-size: 20px;
	color: #111111;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 35px;
}

/*---------------------
  Shop Cart
-----------------------*/

.shop-cart {
	padding-top: 70px;
	padding-bottom: 90px;
}

.shop__cart__table {
	margin-bottom: 30px;
}

.shop__cart__table table {
	width: 100%;
}

.shop__cart__table thead {
	border-bottom: 1px solid #f2f2f2;
}

.shop__cart__table thead th {
	font-size: 18px;
	color: #111111;
	font-weight: 600;
	text-transform: uppercase;
	padding-bottom: 20px;
}

.shop__cart__table tbody tr {
	border-bottom: 1px solid #f2f2f2;
}

.shop__cart__table tbody tr td {
	padding: 30px 0;
}

.shop__cart__table tbody tr .cart__product__item {
	overflow: hidden;
	width: 585px;
}

.shop__cart__table tbody tr .cart__product__item img {
	float: left;
	margin-right: 25px;
}

.shop__cart__table tbody tr .cart__product__item .cart__product__item__title {
	overflow: hidden;
	padding-top: 23px;
}

.shop__cart__table tbody tr .cart__product__item .cart__product__item__title h6 {
	color: #111111;
	font-weight: 600;
}

.shop__cart__table tbody tr .cart__product__item .cart__product__item__title .rating i {
	font-size: 10px;
	color: #e3c01c;
	margin-right: -4px;
}

.shop__cart__table tbody tr .cart__price {
	font-size: 16px;
	color: #ca1515;
	font-weight: 600;
	width: 190px;
}

.shop__cart__table tbody tr .cart__quantity {
	width: 190px;
}

.shop__cart__table tbody tr .cart__quantity .pro-qty {
	border: none;
	padding: 0;
	width: 110px;
	border-radius: 0;
}

.shop__cart__table tbody tr .cart__quantity .pro-qty input {
	color: #444444;
}

.shop__cart__table tbody tr .cart__quantity .pro-qty .qtybtn {
	font-size: 16px;
	color: #444444;
}

.shop__cart__table tbody tr .cart__total {
	font-size: 16px;
	color: #ca1515;
	font-weight: 600;
	width: 150px;
}

.shop__cart__table tbody tr .cart__close {
	text-align: right;
}

.shop__cart__table tbody tr .cart__close span {
	height: 45px;
	width: 45px;
	background: #f2f2f2;
	border-radius: 50%;
	font-size: 18px;
	color: #111111;
	line-height: 44px;
	text-align: center;
	display: inline-block;
	font-weight: 600;
	cursor: pointer;
}

.cart__btn {
	margin-bottom: 50px;
}

.cart__btn.update__btn {
	text-align: right;
}

.cart__btn a {
	font-size: 14px;
	color: #111111;
	font-weight: 600;
	text-transform: uppercase;
	display: inline-block;
	padding: 14px 30px 12px;
	background: #f5f5f5;
}

.cart__btn a span {
	color: #ca1515;
	font-size: 14px;
	margin-right: 5px;
}

.discount__content h6 {
	color: #111111;
	font-weight: 600;
	text-transform: uppercase;
	display: inline-block;
	margin-right: 30px;
}

.discount__content form {
	position: relative;
	width: 370px;
	display: inline-block;
}

.discount__content form input {
	height: 52px;
	width: 100%;
	border: 1px solid #444444;
	border-radius: 50px;
	padding-left: 30px;
	padding-right: 115px;
	font-size: 14px;
	color: #444444;
}

.discount__content form input::-webkit-input-placeholder {
	color: #444444;
}

.discount__content form input::-moz-placeholder {
	color: #444444;
}

.discount__content form input:-ms-input-placeholder {
	color: #444444;
}

.discount__content form input::-ms-input-placeholder {
	color: #444444;
}

.discount__content form input::placeholder {
	color: #444444;
}

.discount__content form button {
	position: absolute;
	right: 4px;
	top: 4px;
}

.cart__total__procced {
	background: #f5f5f5;
	padding: 40px;
}

.cart__total__procced h6 {
	color: #111111;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.cart__total__procced ul {
	margin-bottom: 25px;
}

.cart__total__procced ul li {
	list-style: none;
	font-size: 16px;
	color: #111111;
	font-weight: 600;
	overflow: hidden;
	line-height: 40px;
}

.cart__total__procced ul li span {
	color: #ca1515;
	float: right;
}

.cart__total__procced .primary-btn {
	display: block;
	border-radius: 50px;
	text-align: center;
	padding: 12px 0 10px;
}

/*---------------------
  Checkout
-----------------------*/

.checkout {
	padding-top: 80px;
	padding-bottom: 70px;
}

.coupon__link {
	font-size: 14px;
	color: #444444;
	padding: 14px 0;
	background: #f5f5f5;
	border-top: 2px solid #ca1515;
	text-align: center;
	margin-bottom: 50px;
}

.coupon__link a {
	font-size: 14px;
	color: #444444;
}

.coupon__link span {
	font-size: 14px;
	color: #ca1515;
}

.checkout__form h5 {
	color: #111111;
	font-weight: 600;
	text-transform: uppercase;
	border-bottom: 1px solid #e1e1e1;
	padding-bottom: 20px;
	margin-bottom: 25px;
}

.checkout__form .checkout__form__input p {
	color: #444444;
	font-weight: 500;
	margin-bottom: 10px;
}

.checkout__form .checkout__form__input p span {
	color: #ca1515;
}

.checkout__form .checkout__form__input input {
	height: 50px;
	width: 100%;
	border: 1px solid #e1e1e1;
	border-radius: 2px;
	margin-bottom: 25px;
	font-size: 14px;
	padding-left: 20px;
	color: #666666;
}

.checkout__form .checkout__form__input input::-webkit-input-placeholder {
	color: #666666;
}

.checkout__form .checkout__form__input input::-moz-placeholder {
	color: #666666;
}

.checkout__form .checkout__form__input input:-ms-input-placeholder {
	color: #666666;
}

.checkout__form .checkout__form__input input::-ms-input-placeholder {
	color: #666666;
}

.checkout__form .checkout__form__input input::placeholder {
	color: #666666;
}

.checkout__form .checkout__form__checkbox {
	margin-bottom: 20px;
}

.checkout__form .checkout__form__checkbox label {
	display: block;
	padding-left: 24px;
	font-size: 14px;
	color: #444444;
	font-weight: 500;
	position: relative;
	cursor: pointer;
	margin-bottom: 16px;
}

.checkout__form .checkout__form__checkbox label input {
	position: absolute;
	visibility: hidden;
}

.checkout__form .checkout__form__checkbox label input:checked~.checkmark {
	border-color: #ca1515;
}

.checkout__form .checkout__form__checkbox label input:checked~.checkmark:after {
	border-color: #ca1515;
	opacity: 1;
}

.checkout__form .checkout__form__checkbox label .checkmark {
	position: absolute;
	left: 0;
	top: 4px;
	height: 10px;
	width: 10px;
	border: 1px solid #444444;
	border-radius: 2px;
}

.checkout__form .checkout__form__checkbox label .checkmark:after {
	position: absolute;
	left: 0px;
	top: -2px;
	width: 11px;
	height: 5px;
	border: solid #ffffff;
	border-width: 1.5px 1.5px 0px 0px;
	-webkit-transform: rotate(127deg);
	-ms-transform: rotate(127deg);
	transform: rotate(127deg);
	opacity: 0;
	content: "";
}

.checkout__form .checkout__form__checkbox p {
	margin-bottom: 0;
}

.checkout__order {
	background: #f5f5f5;
	padding: 30px;
}

.checkout__order h5 {
	border-bottom: 1px solid #d7d7d7;
	margin-bottom: 18px;
}

.checkout__order .site-btn {
	width: 100%;
}

.checkout__order__product {
	border-bottom: 1px solid #d7d7d7;
	padding-bottom: 22px;
}

.checkout__order__product ul li {
	list-style: none;
	font-size: 14px;
	color: #444444;
	font-weight: 500;
	overflow: hidden;
	margin-bottom: 14px;
	line-height: 24px;
}

.checkout__order__product ul li:last-child {
	margin-bottom: 0;
}

.checkout__order__product ul li span {
	font-size: 14px;
	color: #111111;
	font-weight: 600;
	float: right;
}

.checkout__order__product ul li .top__text {
	font-size: 16px;
	color: #111111;
	font-weight: 600;
	float: left;
}

.checkout__order__product ul li .top__text__right {
	font-size: 16px;
	color: #111111;
	font-weight: 600;
	float: right;
}

.checkout__order__total {
	padding-top: 12px;
	border-bottom: 1px solid #d7d7d7;
	padding-bottom: 10px;
	margin-bottom: 25px;
}

.checkout__order__total ul li {
	list-style: none;
	font-size: 16px;
	color: #111111;
	font-weight: 600;
	overflow: hidden;
	line-height: 40px;
}

.checkout__order__total ul li span {
	color: #ca1515;
	float: right;
}

.checkout__order__widget {
	padding-bottom: 10px;
}

.checkout__order__widget label {
	display: block;
	padding-left: 25px;
	font-size: 14px;
	font-weight: 500;
	color: #111111;
	position: relative;
	cursor: pointer;
	margin-bottom: 14px;
}

.checkout__order__widget label input {
	position: absolute;
	visibility: hidden;
}

.checkout__order__widget label input:checked~.checkmark {
	border-color: #ca1515;
}

.checkout__order__widget label input:checked~.checkmark:after {
	border-color: #ca1515;
	opacity: 1;
}

.checkout__order__widget label .checkmark {
	position: absolute;
	left: 0;
	top: 4px;
	height: 10px;
	width: 10px;
	border: 1px solid #444444;
	border-radius: 2px;
}

.checkout__order__widget label .checkmark:after {
	position: absolute;
	left: 0px;
	top: -2px;
	width: 11px;
	height: 5px;
	border: solid #ffffff;
	border-width: 1.5px 1.5px 0px 0px;
	-webkit-transform: rotate(127deg);
	-ms-transform: rotate(127deg);
	transform: rotate(127deg);
	opacity: 0;
	content: "";
}

/*---------------------
    Blog
-----------------------*/

.blog {
	padding-top: 70px;
	padding-bottom: 80px;
}

.blog__item {
	margin-bottom: 35px;
}

.blog__item__pic {
	height: 240px;
}

.blog__item__pic.large__item {
	height: 540px;
}

.blog__item__text {
	padding: 25px 20px 0 0;
	margin-right: 30px;
	background: #ffffff;
	margin-top: -54px;
}

.blog__item__text h6 {
	margin-bottom: 6px;
}

.blog__item__text h6 a {
	color: #111111;
	font-weight: 600;
	line-height: 21px;
}

.blog__item__text ul li {
	font-size: 12px;
	color: #888888;
	display: inline-block;
	list-style: none;
	margin-right: 25px;
	position: relative;
}

.blog__item__text ul li span {
	color: #111111;
}

.blog__item__text ul li:after {
	position: absolute;
	right: -17px;
	top: 0px;
	content: "|";
}

.blog__item__text ul li:last-child {
	margin-right: 0;
}

.blog__item__text ul li:last-child:after {
	display: none;
}

.primary-btn.load-btn {
	color: #111111;
	background: #f2f2f2;
	padding: 12px 85px 10px;
	border-radius: 50px;
}

/*---------------------
  Blog Sidebar
-----------------------*/

.blog__sidebar {
	padding-left: 40px;
}

.blog__sidebar__item {
	margin-bottom: 50px;
}

.blog__sidebar__item:last-child {
	margin-bottom: 0;
}

.blog__sidebar__item .section-title {
	margin-bottom: 40px;
}

.blog__sidebar__item .section-title h4 {
	font-size: 16px;
}

.blog__sidebar__item .section-title h4:after {
	bottom: -7px;
}

.blog__sidebar__item ul li {
	list-style: none;
	line-height: 30px;
}

.blog__sidebar__item ul li a {
	font-size: 14px;
	color: #111111;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.blog__sidebar__item ul li a:hover {
	color: #ca1515;
}

.blog__sidebar__item ul li a:hover span {
	color: #111111;
}

.blog__sidebar__item ul li a span {
	float: right;
	color: #888888;
}

.blog__feature__item {
	display: block;
	overflow: hidden;
	margin-bottom: 30px;
}

.blog__feature__item:last-child {
	margin-bottom: 0;
}

.blog__feature__item__pic {
	float: left;
	margin-right: 25px;
}

.blog__feature__item__text {
	overflow: hidden;
}

.blog__feature__item__text h6 {
	font-size: 14px;
	color: #111111;
	font-weight: 600;
	line-height: 21px;
	margin-bottom: 5px;
}

.blog__feature__item__text span {
	font-size: 12px;
	color: #888888;
	display: block;
}

.blog__sidebar__tags a {
	display: inline-block;
	font-size: 13px;
	color: #666666;
	border: 1px solid #f2f2f2;
	padding: 8px 14px 7px;
	margin-right: 6px;
	margin-bottom: 10px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.blog__sidebar__tags a:hover {
	color: #111111;
}

.blog__sidebar__tags a:last-child {
	margin-right: 0;
}

/*---------------------
  Blog Details
-----------------------*/

.blog-details {
	padding-top: 80px;
	padding-bottom: 80px;
}

.blog__details__item {
	background: #ffffff;
	margin-bottom: 24px;
}

.blog__details__item__title {
	background: #ffffff;
	padding-top: 30px;
	padding-right: 30px;
	margin-top: -100px;
	position: relative;
	margin-right: 50px;
}

.blog__details__item__title .tip {
	font-size: 12px;
	color: #ffffff;
	background: #ca1515;
	text-transform: uppercase;
	font-weight: 500;
	display: inline-block;
	padding: 2px 11px 1px;
	border-radius: 5px;
}

.blog__details__item__title h4 {
	color: #111111;
	font-weight: 600;
	line-height: 39px;
	margin-top: 10px;
	margin-bottom: 5px;
}

.blog__details__item__title ul li {
	font-size: 12px;
	color: #888888;
	display: inline-block;
	list-style: none;
	margin-right: 25px;
	position: relative;
}

.blog__details__item__title ul li span {
	color: #111111;
}

.blog__details__item__title ul li:after {
	position: absolute;
	right: -17px;
	top: 0px;
	content: "|";
}

.blog__details__item__title ul li:last-child {
	margin-right: 0;
}

.blog__details__item__title ul li:last-child:after {
	display: none;
}

.blog__details__desc {
	margin-bottom: 40px;
}

.blog__details__desc p {
	font-size: 15px;
	color: #444444;
	line-height: 27px;
}

.blog__details__desc p:last-child {
	margin-bottom: 0;
}

.blog__details__quote {
	border-top: 2px solid #ca1515;
	position: relative;
	padding-top: 22px;
	margin-bottom: 20px;
}

.blog__details__quote .icon {
	height: 30px;
	width: 30px;
	font-size: 18px;
	color: #ca1515;
	background: #ffffff;
	position: absolute;
	left: 0;
	top: -11px;
}

.blog__details__quote p {
	font-size: 16px;
	color: #111111;
	font-weight: 600;
	font-style: italic;
	line-height: 30px;
	margin-bottom: 0;
}

.blog__details__tags {
	margin-bottom: 50px;
}

.blog__details__tags a {
	display: inline-block;
	font-size: 13px;
	color: #666666;
	border: 1px solid #f2f2f2;
	padding: 8px 14px 7px;
	margin-right: 6px;
	margin-bottom: 10px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.blog__details__tags a:hover {
	color: #111111;
}

.blog__details__tags a:last-child {
	margin-right: 0;
}

.blog__details__btns {
	background: #f5f5f5;
	padding: 14px 30px;
	margin-bottom: 55px;
}

.blog__details__btn__item.blog__details__btn__item--next {
	text-align: right;
}

.blog__details__btn__item.blog__details__btn__item--next h6 a i {
	margin-right: 0;
	margin-left: 5px;
}

.blog__details__btn__item h6 a {
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	color: #111111;
}

.blog__details__btn__item h6 a i {
	font-size: 15px;
	font-weight: 600;
	position: relative;
	top: -2px;
	margin-right: 5px;
}

.blog__details__comment {
	position: relative;
}

.blog__details__comment h5 {
	color: #111111;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 35px;
}

.blog__details__comment .leave-btn {
	font-size: 14px;
	font-weight: 700;
	color: #111111;
	text-transform: uppercase;
	position: absolute;
	right: 0;
	top: 0;
}

.blog__details__comment .leave-btn:after {
	position: absolute;
	left: 0;
	bottom: -5px;
	height: 1px;
	width: 100%;
	background: #ca1515;
	content: "";
}

.blog__comment__item {
	margin-bottom: 35px;
}

.blog__comment__item:last-child {
	margin-bottom: 0;
}

.blog__comment__item.blog__comment__item--reply {
	padding-left: 115px;
}

.blog__comment__item__pic {
	float: left;
	margin-right: 25px;
}

.blog__comment__item__pic img {
	border-radius: 50%;
}

.blog__comment__item__text {
	overflow: hidden;
}

.blog__comment__item__text h6 {
	color: #111111;
	font-weight: 600;
	margin-bottom: 14px;
}

.blog__comment__item__text p {
	font-size: 15px;
	color: #444444;
	line-height: 26px;
}

.blog__comment__item__text ul li {
	list-style: none;
	font-size: 12px;
	color: #888888;
	display: inline-block;
	margin-right: 25px;
}

.blog__comment__item__text ul li:last-child {
	margin-right: 0;
}

.blog__comment__item__text ul li i {
	font-size: 14px;
	color: #ca1515;
	margin-right: 5px;
}

/*---------------------
  Contact
-----------------------*/

.contact {
	padding-top: 80px;
	padding-bottom: 80px;
}

.contact__address {
	margin-bottom: 45px;
}

.contact__address h5 {
	color: #111111;
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.contact__address ul li {
	list-style: none;
	position: relative;
	margin-bottom: 20px;
}

.contact__address ul li:last-child {
	margin-bottom: 0;
}

.contact__address ul li h6 {
	color: #111111;
	font-weight: 600;
	margin-bottom: 10px;
}

.contact__address ul li h6 i {
	font-size: 16px;
	color: #ca1515;
	margin-right: 5px;
}

.contact__address ul li p {
	margin-bottom: 0;
	font-size: 15px;
	color: #444444;
}

.contact__address ul li span {
	font-size: 15px;
	color: #444444;
	display: inline-block;
	margin-right: 25px;
	position: relative;
}

.contact__address ul li span:after {
	position: absolute;
	right: -15px;
	top: 11px;
	content: "|";
	line-height: 0;
}

.contact__address ul li span:last-child {
	margin-right: 0;
}

.contact__address ul li span:last-child:after {
	display: none;
}

.contact__form h5 {
	color: #111111;
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 35px;
}

.contact__form form input {
	height: 50px;
	width: 100%;
	padding-left: 20px;
	font-size: 14px;
	color: #444444;
	border: 1px solid #e1e1e1;
	border-radius: 10px;
	margin-bottom: 20px;
}

.contact__form form input::-webkit-input-placeholder {
	color: #444444;
}

.contact__form form input::-moz-placeholder {
	color: #444444;
}

.contact__form form input:-ms-input-placeholder {
	color: #444444;
}

.contact__form form input::-ms-input-placeholder {
	color: #444444;
}

.contact__form form input::placeholder {
	color: #444444;
}

.contact__form form textarea {
	height: 130px;
	width: 100%;
	padding-left: 20px;
	padding-top: 12px;
	font-size: 14px;
	color: #444444;
	border: 1px solid #e1e1e1;
	border-radius: 10px;
	margin-bottom: 14px;
	resize: none;
}

.contact__form form textarea::-webkit-input-placeholder {
	color: #444444;
}

.contact__form form textarea::-moz-placeholder {
	color: #444444;
}

.contact__form form textarea:-ms-input-placeholder {
	color: #444444;
}

.contact__form form textarea::-ms-input-placeholder {
	color: #444444;
}

.contact__form form textarea::placeholder {
	color: #444444;
}

.contact__map {
	height: 780px;
}

.contact__map iframe {
	width: 100%;
}

/*--------------------------------- Responsive Media Quaries -----------------------------*/

@media only screen and (min-width: 1600px) and (max-width: 1900px) {
	.header {
		padding: 0 85px;
	}
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
	.header__menu ul li {
		margin-right: 20px;
	}
	.header {
		padding: 0 30px;
	}
}

@media only screen and (min-width: 1200px) {
	.container {
		max-width: 1170px;
	}
}

/* Medium Device = 1200px */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.header__menu ul li {
		margin-right: 20px;
	}
	.header__right__auth {
		margin-right: 5px;
	}
	.sidebar__filter a {
		padding: 5px 15px 5px 15px;
	}
	.nav::before {
		width: 240px;
	}
	.nav::after {
		width: 240px;
	}
}

/* Tablet Device = 768px */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.filter__controls li {
		margin-right: 15px;
	}
	.discount__pic img {
		height: auto;
	}
	.discount__text {
		height: auto;
	}
	.sidebar__filter a {
		position: relative;
		bottom: 0;
	}
	.filter-range-wrap .range-slider .price-input input {
		max-width: 27%;
	}
	.filter-range-wrap .range-slider .price-input {
		margin-bottom: 20px;
	}
	.product__details__pic {
		margin-bottom: 50px;
	}
	.nav::before {
		width: 125px;
	}
	.nav::after {
		width: 125px;
	}
	.discount__content {
		margin-bottom: 40px;
	}
	.checkout__order {
		margin-top: 20px;
	}
	.blog__sidebar {
		padding-left: 0;
	}
	.canvas__open {
		display: block;
		font-size: 22px;
		color: #222;
		height: 35px;
		width: 35px;
		line-height: 35px;
		text-align: center;
		border: 1px solid #323232;
		border-radius: 2px;
		cursor: pointer;
		position: absolute;
		right: 15px;
		top: 24px;
	}
	.offcanvas-menu-overlay {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.7);
		content: "";
		z-index: 98;
		-webkit-transition: all, 0.5s;
		-o-transition: all, 0.5s;
		transition: all, 0.5s;
		visibility: hidden;
	}
	.offcanvas-menu-overlay.active {
		visibility: visible;
	}
	.offcanvas-menu-wrapper {
		position: fixed;
		left: -300px;
		width: 300px;
		height: 100%;
		background: #ffffff;
		padding: 90px 20px 30px 30px;
		display: block;
		z-index: 99;
		overflow-y: auto;
		-webkit-transition: all, 0.5s;
		-o-transition: all, 0.5s;
		transition: all, 0.5s;
		opacity: 0;
	}
	.offcanvas-menu-wrapper.active {
		opacity: 1;
		left: 0;
	}
	.offcanvas__close {
		position: absolute;
		width: 40px;
		height: 40px;
		right: 30px;
		top: 25px;
		border: 1px solid #ddd;
		border-radius: 50%;
		font-size: 26px;
		text-align: center;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
		cursor: pointer;
	}
	.offcanvas__menu {
		display: none;
	}
	.slicknav_btn {
		display: none;
	}
	.slicknav_menu {
		background: transparent;
		padding: 0;
		margin-bottom: 20px;
	}
	.slicknav_nav ul {
		margin: 0;
	}
	.slicknav_nav .slicknav_row,
	.slicknav_nav a {
		padding: 7px 0;
		margin: 0;
		color: #111111;
		font-weight: 600;
	}
	.slicknav_nav .slicknav_row:hover {
		border-radius: 0;
		background: transparent;
		color: #111111;
	}
	.slicknav_nav a:hover {
		border-radius: 0;
		background: transparent;
		color: #111111;
	}
	.slicknav_nav {
		display: block !important;
	}
	.offcanvas__logo {
		margin-bottom: 25px;
	}
	.offcanvas__widget {
		text-align: center;
		margin-bottom: 20px;
	}
	.offcanvas__widget li {
		list-style: none;
		display: inline-block;
		font-size: 18px;
		color: #111111;
		margin-right: 20px;
		cursor: pointer;
	}
	.offcanvas__widget li:last-child {
		margin-right: 0;
	}
	.offcanvas__widget li a {
		font-size: 18px;
		color: #111111;
		position: relative;
	}
	.offcanvas__widget li a .tip {
		position: absolute;
		right: -12px;
		top: -11px;
		height: 18px;
		width: 18px;
		background: #111111;
		font-size: 10px;
		font-weight: 500;
		color: #ffffff;
		line-height: 18px;
		text-align: center;
		border-radius: 50%;
	}
	.offcanvas__auth a {
		font-size: 15px;
		color: #111111;
		position: relative;
		margin-right: 8px;
		font-weight: 500;
	}
	.offcanvas__auth a:last-child {
		margin-right: 0;
	}
	.offcanvas__auth a:last-child:after {
		display: none;
	}
	.offcanvas__auth a:after {
		position: absolute;
		right: -8px;
		top: -2px;
		content: "/";
		font-size: 13px;
	}
	.header__menu {
		display: none;
	}
	.header__right {
		display: none;
	}
}

/* Wide Mobile = 480px */

@media only screen and (max-width: 767px) {
	.canvas__open {
		display: block;
		font-size: 22px;
		color: #222;
		height: 35px;
		width: 35px;
		line-height: 35px;
		text-align: center;
		border: 1px solid #323232;
		border-radius: 2px;
		cursor: pointer;
		position: absolute;
		right: 15px;
		top: 24px;
	}
	.offcanvas-menu-overlay {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.7);
		content: "";
		z-index: 98;
		-webkit-transition: all, 0.5s;
		-o-transition: all, 0.5s;
		transition: all, 0.5s;
		visibility: hidden;
	}
	.offcanvas-menu-overlay.active {
		visibility: visible;
	}
	.offcanvas-menu-wrapper {
		position: fixed;
		left: -270px;
		width: 270px;
		height: 100%;
		background: #ffffff;
		padding: 90px 20px 30px 30px;
		display: block;
		z-index: 99;
		overflow-y: auto;
		-webkit-transition: all, 0.5s;
		-o-transition: all, 0.5s;
		transition: all, 0.5s;
		opacity: 0;
	}
	.offcanvas-menu-wrapper.active {
		opacity: 1;
		left: 0;
	}
	.offcanvas__close {
		position: absolute;
		width: 40px;
		height: 40px;
		right: 30px;
		top: 25px;
		border: 1px solid #ddd;
		border-radius: 50%;
		font-size: 26px;
		text-align: center;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
		cursor: pointer;
	}
	.offcanvas__menu {
		display: none;
	}
	.slicknav_btn {
		display: none;
	}
	.slicknav_menu {
		background: transparent;
		padding: 0;
		margin-bottom: 20px;
	}
	.slicknav_nav ul {
		margin: 0;
	}
	.slicknav_nav .slicknav_row,
	.slicknav_nav a {
		padding: 7px 0;
		margin: 0;
		color: #111111;
		font-weight: 600;
	}
	.slicknav_nav .slicknav_row:hover {
		border-radius: 0;
		background: transparent;
		color: #111111;
	}
	.slicknav_nav a:hover {
		border-radius: 0;
		background: transparent;
		color: #111111;
	}
	.slicknav_nav {
		display: block !important;
	}
	.offcanvas__logo {
		margin-bottom: 25px;
	}
	.offcanvas__widget {
		text-align: center;
		margin-bottom: 20px;
	}
	.offcanvas__widget li {
		list-style: none;
		display: inline-block;
		font-size: 18px;
		color: #111111;
		margin-right: 20px;
		cursor: pointer;
	}
	.offcanvas__widget li:last-child {
		margin-right: 0;
	}
	.offcanvas__widget li a {
		font-size: 18px;
		color: #111111;
		position: relative;
	}
	.offcanvas__widget li a .tip {
		position: absolute;
		right: -12px;
		top: -11px;
		height: 18px;
		width: 18px;
		background: #111111;
		font-size: 10px;
		font-weight: 500;
		color: #ffffff;
		line-height: 18px;
		text-align: center;
		border-radius: 50%;
	}
	.offcanvas__auth a {
		font-size: 15px;
		color: #111111;
		position: relative;
		margin-right: 8px;
		font-weight: 500;
	}
	.offcanvas__auth a:last-child {
		margin-right: 0;
	}
	.offcanvas__auth a:last-child:after {
		display: none;
	}
	.offcanvas__auth a:after {
		position: absolute;
		right: -8px;
		top: -2px;
		content: "/";
		font-size: 13px;
	}
	.header__menu {
		display: none;
	}
	.header__right {
		display: none;
	}
	.filter__controls {
		text-align: left;
		margin-bottom: 40px;
	}
	.filter__controls li {
		margin-right: 20px;
	}
	.discount__pic img {
		height: auto;
	}
	.discount__text {
		padding: 75px 40px 50px;
		height: auto;
	}
	.product__details__pic__left {
		height: auto;
	}
	.product__details__pic {
		margin-bottom: 30px;
	}
	.quantity {
		float: none;
		margin-right: 0;
	}
	.nav::before {
		display: none;
	}
	.nav::after {
		display: none;
	}
	.shop__cart__table {
		overflow-x: auto;
	}
	.shop__cart__table tbody tr .cart__product__item img {
		float: none;
		margin-right: 0;
	}
	.cart__btn {
		text-align: center;
		margin-bottom: 25px;
	}
	.cart__btn.update__btn {
		text-align: center;
	}
	.discount__content h6 {
		display: block;
		margin-right: 0;
		margin-bottom: 20px;
	}
	.discount__content {
		margin-bottom: 35px;
	}
	.blog__sidebar {
		padding-left: 0;
		padding-top: 40px;
	}
	.contact__content {
		margin-bottom: 40px;
	}
}

/* Small Device = 320px */

@media only screen and (max-width: 479px) {
	.categories__item.categories__large__item {
		padding-left: 30px;
	}
	.banner__text h1 {
		font-size: 45px;
	}
	.filter__controls li {
		margin-right: 5px;
		margin-bottom: 5px;
	}
	.discount__text {
		padding: 75px 0px 50px;
	}
	.footer__newslatter form {
		text-align: center;
	}
	.footer__newslatter form input {
		margin-bottom: 10px;
	}
	.footer__newslatter form button {
		position: relative;
		right: 0;
		top: 0;
	}
	.product__details__button .cart-btn {
		float: none;
		margin-right: 0;
	}
	.product__details__button ul {
		float: none;
	}
	.nav-item {
		margin-right: 20px;
	}
	.blog__details__item__title {
		margin-right: 30px;
	}
	.blog__comment__item.blog__comment__item--reply {
		padding-left: 0;
	}
	.blog__comment__item__text ul li {
		margin-right: 5px;
	}
	.primary-btn.load-btn {
		padding: 12px 50px 10px;
	}
	.blog__comment__item__pic {
		float: none;
		margin-bottom: 20px;
	}
	.discount__content form {
		width: 100%;
	}
	.search-model-form input {
		width: 100%;
		font-size: 24px;
	}
}




<style >
body {
	background-color: #fcfcfc;
	font-family: 'Inter', sans-serif;
	overflow-x: hidden;
}

a {
	text-decoration: none;
}

.view-switcher-container {
	margin: 20px 0;
	text-align: center;
}

.view-btn {
	border: 1px solid #ddd;
	background: #fff;
	padding: 6px 15px;
	margin: 2px;
	cursor: pointer;
	transition: 0.3s;
	border-radius: 4px;
}

	.view-btn.active {
		background: #000;
		color: #fff;
		border-color: #000;
	}

/* --- Desktop/Tablet Button Visibility --- */
@@media (max-width: 768px) {
	.btn-grid-6 {
		display: none !important;
	}
}

@@media (max-width: 576px) {
	.btn-grid-4, .btn-grid-3 {
		display: none !important;
	}
}

/* --- Card Wrapper --- */
/* --- Card Container & Gap Fix --- */
.product-container {
	padding: 10px; /* Is se 4 cards ke beech barabar 20px ka gap banega */
	margin-bottom: 20px;
	transition: all 0.3s ease;
}

/* Row ke margin ko compensate karne ke liye (Parent Row par lagayein) */
.row {
	margin-left: -10px;
	margin-right: -10px;
}

/* --- Height Adjustment (Without Zooming) --- */


/* --- Mobile Fix for 2 Columns Gap --- */
@@media (max-width: 576px) {
	.product-container {
		padding: 5px; /* Mobile par gap thoda kam taake space bache */
	}

	.enshee-card-img-box {
		aspect-ratio: 4 / 5.5; /* Mobile par thodi portrait look behtar lagti hai */
	}
}

/* --- Details Below --- */
.product-details {
	padding-top: 10px;
	text-align: left;
}

.product-name {
	font-size: 14px;
	font-weight: 500;
	color: #111;
	text-decoration: none;
	display: block;
}

.product-price {
	font-size: 15px;
	font-weight: 700;
	color: #333;
	margin-top: 4px;
}

/* --- Mobile Specific: Grid-1 (Single Card) Image Small Fix --- */
@@media (max-width: 576px) {
	.grid-1-active-mobile .enshee-card-img-box {
		width: 80%;
		margin: 0 auto;
		aspect-ratio: 1 / 1;
	}

	.grid-1-active-mobile .product-details {
		text-align: center;
	}
}

/* --- Desktop List View (Grid 1) --- */
@@media (min-width: 769px) {
	.grid-1-active-desktop {
		display: flex;
		gap: 20px;
		align-items: center;
	}

		.grid-1-active-desktop .enshee-card-img-box {
			width: 250px;
			flex-shrink: 0;
		}
}

/* Hide buttons on mobile hover, show always */
.hover-actions {
	position: absolute;
	bottom: -100%; /* Initially hide at the bottom */
	left: 0;
	width: 100%;
	display: flex;
	flex-direction: column; /* Position buttons vertically */
	opacity: 0;
	transition: bottom 0.3s ease, opacity 0.3s ease; /* Animate bottom position and opacity */
}

.enshee-card-img-box:hover .hover-actions {
	bottom: 0; /* Slide buttons up from the bottom on hover */
	opacity: 1;
}

.action-btn {
	flex: 1;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	border: none;
	padding: 8px;
	font-size: 10px;
	text-align: center;
	text-decoration: none;
}

@@media (max-width: 576px) {
	.hover-actions {
		opacity: 1;
		position: static;
		margin-top: 5px;
		flex-direction: row; /* Position buttons horizontally on mobile */
	}

	.action-btn {
		padding: 5px;
		background: #000;
	}
}

@@media (min-width: 992px) {
	.btn-grid-6, .btn-grid-4, .btn-grid-3, .btn-grid-2, .btn-grid-1 {
		display: inline-block;
	}
}

@@media (min-width: 577px) and (max-width: 991px) {
	.btn-grid-6 {
		display: none !important;
	}

	.btn-grid-4,
	.btn-grid-3,
	.btn-grid-2,
	.btn-grid-1 {
		display: inline-block;
	}
}

@@media (max-width: 576px) {
	.btn-grid-6, .btn-grid-4, .btn-grid-3 {
		display: none !important;
	}
}

/* --- Mobile Grid-1 (Single Card) Image Styling --- */
@@media (max-width: 576px) {
	.grid-1-mobile-view .enshee-card-img-box {
		width: 85% !important;
		margin: 0 auto;
		aspect-ratio: 1 / 1;
	}

	.grid-1-mobile-view .product-details {
		text-align: center;
	}
}

/* --- Standard Image Box --- */
.enshee-card-img-box {
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #f4f4f4;
}

	.enshee-card-img-box img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

/* --- Desktop/Tablet Button Visibility --- */
/* 1. Desktop: Saare buttons dikhao (992px se upar) */
@@media (min-width: 992px) {
	.view-btn {
		display: inline-block;
	}
}

/* 2. Tablet & Large Mobile: 600px par buttons dikhane ke liye breakpoint adjust kiya */
@@media (max-width: 991px) and (min-width: 577px) {
	.btn-grid-6 {
		display: none !important;
	}

	.btn-grid-4,
	.btn-grid-3,
	.btn-grid-2,
	.btn-grid-1 {
		display: inline-block !important;
	}
}

/* 3. Small Mobile: (576px se niche) */
@@media (max-width: 576px) {
	.btn-grid-6, .btn-grid-4, .btn-grid-3 {
		display: none !important;
	}

	.btn-grid-2,
	.btn-grid-1 {
		display: inline-block !important;
	}
}

/* Discount Rate Styling */
/* --- Updated Card Styles (Only changing the product part) --- */

/* --- Refined Card Elements --- */

/* --- Base Image Box --- */
.enshee-card-img-box {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background-color: #f9f9f9;
}

/* --- Heart Icon Base --- */
.heart-icon {
	position: absolute !important;
	top: 15px !important;
	left: -60px !important; /* Default: Chhupa hua */
	background: #fff !important;
	color: #d9534f !important;
	height: 35px !important;
	width: 35px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
	z-index: 15;
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	opacity: 0;
	text-decoration: none;
}

/* 1. Hover par show karne ke liye (Jo pehle se tha) */
.enshee-card-img-box:hover .heart-icon {
	left: 15px !important;
	opacity: 1 !important;
}

/* 2. Wishlist add hone par bina hover ke dikhane ke liye (The Fix) */
/* Jab JS 'is-active' class lagaye, toh heart hamesha dikhayi dega */
.heart-icon.is-active {
	left: 15px !important;
	opacity: 1 !important;
	color: #ff4d4d !important; /* Iska color hamesha red rahega */
}

	/* Heart icon ke andar ka color pakka karne ke liye */
	.heart-icon.is-active i {
		color: #ff4d4d !important;
	}
/* Jab wishlist mein item ho, toh ye class use hogi */
.heart-icon.is-active, .wishlist-btn.is-active {
	left: 15px !important; /* Index card ke liye */
	opacity: 1 !important;
	color: #ff4d4d !important;
}

	.heart-icon.is-active i, .wishlist-btn.is-active i {
		font-weight: 900 !important; /* Solid heart */
		color: #ff4d4d !important;
	}


/* --- Discount Badge --- */
.discount-rate {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #d9534f;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	height: 42px;
	width: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	z-index: 10;
	text-align: center;
	line-height: 1.1;
}

/* --- Desktop Hover Actions (Slide Up) --- */
.hover-actions {
	position: absolute;
	bottom: -100px;
	left: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease;
	background: rgba(255, 255, 255, 0.85);
	padding: 10px 0;
	z-index: 5;
}

.enshee-card-img-box:hover .hover-actions {
	bottom: 0;
	opacity: 1;
	visibility: visible;
	height: 100px;
}

/* --- Button Styling (Text to Icon Animation) --- */
.action-btn {
	width: 85%;
	height: 36px;
	margin: 4px auto;
	border: none;
	color: #fff !important;
	text-decoration: none;
	border-radius: 4px;
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

.quick-view-btn {
	background: #8e8e8e !important;
	height: 100px;
	background: gray !important;
}
/* Gray */
.cart-btn {
	background: brown !important;
}
/* Brown */

.btn-text {
	position: absolute;
	transition: transform 0.4s ease, opacity 0.3s ease;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.btn-icon {
	position: absolute;
	transform: translateY(40px);
	transition: transform 0.4s ease;
	font-size: 16px;
}

.action-btn:hover .btn-text {
	transform: translateY(-40px);
	opacity: 0;
}

.action-btn:hover .btn-icon {
	transform: translateY(0);
}

/* --- Color Palette --- */
.color-palette {
	margin-top: 12px;
	border-top: 1px solid #eee;
	padding-top: 8px;
}

.color-options {
	display: flex;
	gap: 8px;
	margin-top: 5px;
}

.color-option {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid #ddd;
	cursor: pointer;
	transition: 0.2s;
}

	.color-option:hover {
		transform: scale(1.3);
		box-shadow: 0 0 0 1px #000;
	}

/* =============================================
           MOBILE STYLES (Always Visible Icons)
           ============================================= */
@@media (max-width: 576px) {
	/* 1. Heart always visible on left */
	.heart-icon {
		left: 10px !important;
		opacity: 1 !important;
		transform: scale(0.9) !important;
		top: 10px !important;
	}
	/* 2. Quick View & Cart become circles on the Right */
	.hover-actions {
		position: absolute !important;
		bottom: auto !important;
		top: 60px !important; /* Discount ke niche */
		right: 10px !important;
		left: auto !important;
		width: auto !important;
		background: transparent !important;
		opacity: 1 !important;
		visibility: visible !important;
		gap: 8px !important;
		padding: 0 !important;
		height: 200px
	}

	.action-btn {
		width: 35px !important;
		height: 35px !important;
		border-radius: 50% !important;
		margin: 0 !important;
		box-shadow: 0 3px 8px rgba(0,0,0,0.2);
	}
	/* Hide text, only show icon on mobile */
	.btn-text {
		display: none !important;
	}

	.btn-icon {
		position: static !important;
		transform: none !important;
		font-size: 14px !important;
	}

	.discount-rate {
		height: 38px;
		width: 38px;
		font-size: 9px;
		top: 10px;
		right: 10px;
	}
}
/* --- Mini Banner (200px Height) --- */
.mini-banner {
	position: relative;
	width: 100%;
	height: 200px; /* Aapki required height */
	/* background-image: url('~/img/banner/hero.webp'); /* <-- Image path yahan change karein */ */ background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
	overflow: hidden;
	background-color: brown;
}

/* Overlay for text contrast */
.banner-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5); /* Black overlay with 50% transparency */
	z-index: 1;
}

/* Content Styling */
.banner-content {
	position: relative;
	z-index: 2;
	text-align: center;
	color: #ffffff;
	padding: 0 15px;
}

.banner-heading {
	font-size: 32px; /* Thora chota size kyunke banner height kam hai */
	font-weight: 800;
	text-transform: uppercase;
	margin: 0 0 8px 0;
	letter-spacing: 1.5px;
	text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.banner-description {
	font-size: 16px;
	font-weight: 300;
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
	letter-spacing: 0.5px;
}

/* Mobile Responsive */
@@media (max-width: 576px) {
	.mini-banner {
		height: 180px; /* Mobile par thora aur sleek */
	}

	.banner-heading {
		font-size: 24px;
	}

	.banner-description {
		font-size: 14px;
	}
}

.view-switcher-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px; /* Thoda gap barha diya taake clean lage */
	margin: 25px 0;
	width: 100%;
}

.view-btn {
	background: transparent; /* Background hata diya */
	border: 1px solid #eee; /* Bilkul halki line */
	width: 36px; /* Size thoda chota kiya taake delicate lage */
	height: 36px;
	cursor: pointer;
	border-radius: 4px; /* Kam roundness, modern look */
	color: #999; /* Light gray icons */
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease-in-out;
	box-shadow: none; /* Shadow khatam kar di */
}

	/* Active State - Soft Brown Touch */
	.view-btn.active {
		background: #fdfaf8 !important; /* Bahut halka brown tint background */
		color: #6F4E37 !important; /* Brown text color */
		border-color: #6F4E37 !important; /* Brown border */
		/* Niche ek choti line ya simple border hi kafi hai */
	}

	/* Hover State */
	.view-btn:hover:not(.active) {
		border-color: #333;
		color: #333;
		background: transparent;
	}

	.view-btn i {
		font-size: 18px; /* Icons thode baarik kar diye */
	}

/* Mobile Adjustment */
@@media (max-width: 576px) {
	.view-switcher-container {
		gap: 10px;
	}

	.view-btn {
		width: 40px;
		height: 42px;
	}

		.view-btn i {
			font-size: 12px;
		}
}
/* Tablet par Grid-3 dikhao, lekin bahut chote mobile par ise hide kar sakte hain */
@@media (max-width: 576px) {
	.btn-grid-6, .btn-grid-4, .btn-grid-3 {
		display: none !important; /* Mobile par sirf 1 aur 2 columns ka option best hota hai */
	}
}

@@media (min-width: 577px) and (max-width: 991px) {
	.btn-grid-6 {
		display: none !important;
	}

	.btn-grid-4, .btn-grid-3, .btn-grid-2, .btn-grid-1 {
		display: inline-flex !important;
	}
}
/* --- Desktop (Laptops & Large Screens) --- */
@@media (min-width: 1200px) {
	.btn-grid-6, .btn-grid-5, .btn-grid-4, .btn-grid-3, .btn-grid-2, .btn-grid-1 {
		display: inline-flex !important;
	}
}

/* --- Tablets & Mid-size Screens --- */
@@media (max-width: 1199px) and (min-width: 768px) {
	.btn-grid-6, .btn-grid-5 {
		display: none !important; /* In screens par 5/6 columns bahut chote ho jayenge */
	}

	.btn-grid-4, .btn-grid-3, .btn-grid-2, .btn-grid-1 {
		display: inline-flex !important;
	}
}

/* --- Mobile Screens --- */
@@media (max-width: 767px) {
	.btn-grid-6, .btn-grid-5, .btn-grid-4, .btn-grid-3 {
		display: none !important; /* Mobile par sirf 1 ya 2 columns best hain */
	}

	.btn-grid-2, .btn-grid-1 {
		display: inline-flex !important;
	}
}

/* Grid-5 Active State (Aapka Brown Theme) */
.view-btn.active {
	background: #fdfaf8 !important;
	color: #6F4E37 !important;
	border-color: #6F4E37 !important;
}
/* Custom 5 Column Grid for Desktop */
@@media (min-width: 992px) {
	.col-grid-5 {
		flex: 0 0 20% !important;
		max-width: 20% !important;
	}
}

/* Taake Row ke andar 5 cards wrap na hon balkay line mein rahein */
.row {
	display: flex;
	flex-wrap: wrap;
}
/* 1. Image Box (Fixed Height & Position) */
.enshee-card-img-box {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5; /* Card ko lamba hone se rokega */
	overflow: hidden;
	background-color: #f8f8f8;
}

	/* 2. Dono Images ki Shared Setting */
	.enshee-card-img-box img {
		position: absolute; /* Dono images ek dusre ke upar hongi */
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover; /* Image box mein fit rahegi */
		transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	}

/* Main Image Default */
.main-img {
	opacity: 1;
	z-index: 1;
}

/* Hover Image (Angle Variant) Default */
.hover-img {
	opacity: 0;
	z-index: 0;
	transform: scale(1.05); /* Halki si bari taake zoom-out effect aaye */
}

/* --- THE HOVER ACTION --- */

/* Jab mouse card par aaye: Main gayab, Hover nazar aaye */
.product-wrapper:hover .main-img {
	opacity: 0;
}

.product-wrapper:hover .hover-img {
	opacity: 1;
	z-index: 2;
	transform: scale(1); /* Wapis normal size par aye */
}

/* Card Darkness Effect */
.card-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.08); /* Bohat halka dark shade */
	opacity: 0;
	z-index: 3; /* Images ke upar dark layer */
	transition: opacity 0.4s ease;
	pointer-events: none; /* Mouse clicks ko block na kare */
}

.product-wrapper:hover .card-overlay {
	opacity: 1;
}

/* 3. Details (Compact) */
.product-details {
	padding: 10px 5px;
	text-align: center;
}

.product-name {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 2px !important;
	display: block;
	color: #333;
}
/* Image Box Setup */
.enshee-card-img-box {
	position: relative;
	aspect-ratio: 4/5;
	overflow: hidden;
	background-color: #f8f8f8;
	border-radius: 4px;
}

/* Smooth Image Swap */
.main-img, .hover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1); /* Luxury smooth timing */
}

.hover-img {
	opacity: 0;
	transform: scale(1.08);
}

.product-wrapper:hover .main-img {
	opacity: 0;
	transform: scale(1.08);
}

.product-wrapper:hover .hover-img {
	opacity: 1;
	transform: scale(1);
}

/* Dim Overlay */
.card-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.35);
	opacity: 0;
	transition: opacity 0.5s ease;
	z-index: 2;
}

.product-wrapper:hover .card-overlay {
	opacity: 1;
}

/* Static Heart (Left Side) */
.static-heart {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 10;
	color: #333;
	background: white;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	transition: all 0.3s ease;
	text-decoration: none;
}

	.static-heart:hover {
		transform: scale(1.1);
		color: #dc3545;
	}

/* Discount Circle (Right Side) */
.discount-circle {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 10;
	background: #ff4757;
	color: white;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 10px;
	font-weight: bold;
	box-shadow: 0 4px 10px rgba(255, 71, 87, 0.3);
}

/* Oval Vertical Buttons */
/* --- 1. Image Box & Base Card --- */
.enshee-card-img-box {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: #f8f8f8;
	border-radius: 4px;
}

.main-img, .hover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1); /* Luxury Smooth Transition */
}

.hover-img {
	opacity: 0;
	transform: scale(1.05);
}

/* Hover Effects */
.product-wrapper:hover .main-img {
	opacity: 0;
	transform: scale(1.05);
}

.product-wrapper:hover .hover-img {
	opacity: 1;
	transform: scale(1);
}

.card-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4); /* Screen Dim Effect */
	opacity: 0;
	transition: opacity 0.5s ease;
	z-index: 2;
	pointer-events: none;
}

.product-wrapper:hover .card-overlay {
	opacity: 1;
}

/* --- 2. Badges & Icons --- */
.static-heart {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 10;
	background: white;
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	color: #333;
	transition: 0.3s;
}

	.static-heart:hover {
		color: #ff4757;
		transform: scale(1.1);
	}

.status-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 10;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 10px;
	font-weight: 800;
	box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* --- 3. Desktop Oval Buttons (Animated) --- */
.hover-actions-vertical {
	position: absolute;
	top: 55%; /* Initial position slightly lower */
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 15;
	opacity: 0;
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	width: 80%;
}

.product-wrapper:hover .hover-actions-vertical {
	opacity: 1;
	top: 50%; /* Slides up to center */
}

/* --- Desktop Oval Buttons (Height Fix & Icon Color) --- */
.oval-btn {
	position: relative;
	overflow: hidden;
	background: #ffffff;
	color: #000000;
	/* Exact 50px Height as per requirement */
	height: 37px !important;
	min-width: 160px;
	border-radius: 50px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	text-decoration: none;
	border: none;
	box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

/* Text default color black */
.btn-text {
	color: #000000;
	transition: transform 0.4s ease, opacity 0.3s ease;
}

/* Icon default color black, hidden below */
.btn-icon {
	position: absolute;
	bottom: -40px;
	left: 50%;
	transform: translateX(-50%);
	color: #ffffff; /* Jab niche se nikle toh white ho */
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	font-size: 18px;
}

/* --- THE HOVER FIX --- */
.oval-btn:hover {
	background: #000000; /* Button background black */
}

	/* Hover par text gayab */
	.oval-btn:hover .btn-text {
		transform: translateY(-40px);
		opacity: 0;
	}

	/* Hover par icon center mein aur WHITE nazar aaye */
	.oval-btn:hover .btn-icon {
		bottom: 16px; /* 50px height ke hisab se exact center */
		color: #ffffff !important;
	}

/* Optional: Button par thora sa lift effect */
.product-wrapper:hover .oval-btn {
	transform: translateY(0);
}
/* --- 4. Mobile & Tablet Responsive --- */
/* --- 4. Mobile & Tablet Responsive (Icons Centering Fix) --- */
@@media (max-width: 991px) {
	.card-overlay {
		display: none;
	}

	.hover-actions-vertical {
		top: auto !important;
		bottom: 15px !important;
		right: 10px !important;
		left: auto !important;
		transform: none !important;
		width: auto !important;
		opacity: 1 !important;
		gap: 8px;
		display: flex !important;
		flex-direction: column !important;
	}

	.oval-btn {
		width: 40px !important; /* Thora sa size barhaya taake icon pyara lage */
		height: 40px !important;
		min-width: 40px !important;
		padding: 0 !important;
		border-radius: 50% !important;
		background: rgba(255, 255, 255, 0.95) !important;
		display: flex !important;
		align-items: center !important; /* Vertical center */
		justify-content: center !important; /* Horizontal center */
		box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	}

	.btn-text {
		display: none !important; /* Mobile par text bilkul khatam */
	}

	.btn-icon {
		position: static !important; /* Absolute position khatam taake center ho sake */
		margin: 0 !important;
		padding: 0 !important;
		font-size: 16px !important;
		color: #333 !important;
		display: block !important;
		line-height: 1 !important; /* Extra space khatam */
		transform: none !important; /* Purani animations reset */
	}

	.hover-img {
		display: none !important;
	}

	.product-wrapper:hover .main-img {
		opacity: 1 !important;
	}
}
/* Mobile par screen dim nahi hogi */

/* Color dots ko hamesha clickable rakhein */
.color-palette {
	position: relative;
	z-index: 30; /* Sab se upar */
}

.color-seed {
	transition: transform 0.2s;
}

	.color-seed:hover {
		transform: scale(1.2);
		border: 1px solid #000 !important;
	}

/* Image transition fix */
.main-img {
	transition: opacity 0.4s ease-in-out !important;
	z-index: 1;
}




/* 5 Columns Grid - Desktop */
.col-grid-5 {
	flex: 0 0 20%;
	max-width: 20%;
	padding-left: 8px;
	padding-right: 8px;
}

/* Tablet */
@@media (max-width: 991px) {
	.col-grid-5 {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
}

/* Mobile */
@@media (max-width: 767px) {
	.col-grid-5 {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* ==========================================
               ALL GRID CLASSES - COMPLETE
               ========================================== */
/* 6 Columns - 16.66% */
.col-grid-6 {
	flex: 0 0 16.666667% !important;
	max-width: 16.666667% !important;
	padding-left: 6px;
	padding-right: 6px;
}

/* 5 Columns - 20% (DEFAULT) */
.col-grid-5 {
	flex: 0 0 20% !important;
	max-width: 20% !important;
	padding-left: 8px;
	padding-right: 8px;
}

/* 4 Columns - 25% */
.col-grid-4 {
	flex: 0 0 25% !important;
	max-width: 25% !important;
	padding-left: 10px;
	padding-right: 10px;
}

/* 3 Columns - 33.33% */
.col-grid-3 {
	flex: 0 0 33.333333% !important;
	max-width: 33.333333% !important;
	padding-left: 12px;
	padding-right: 12px;
}

/* 2 Columns - 50% */
.col-grid-2 {
	flex: 0 0 50% !important;
	max-width: 50% !important;
	padding-left: 15px;
	padding-right: 15px;
}

/* 1 Column - 100% */
.col-grid-1 {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	padding-left: 15px;
	padding-right: 15px;
}

/* ==========================================
               TABLET (768px to 991px)
               ========================================== */
@@media (max-width: 991px) {
	.col-grid-6, .col-grid-5, .col-grid-4 {
		flex: 0 0 33.333333% !important;
		max-width: 33.333333% !important;
	}

	.col-grid-3,
	.col-grid-2 {
		flex: 0 0 50% !important;
		max-width: 50% !important;
	}
}

/* ==========================================
               MOBILE (below 768px)
               ========================================== */
@@media (max-width: 767px) {
	.col-grid-6, .col-grid-5, .col-grid-4, .col-grid-3 {
		flex: 0 0 50% !important;
		max-width: 50% !important;
	}

	.col-grid-2,
	.col-grid-1 {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

/* 🎨 Red-Brown Gradient Pagination */
.custom-pagination {
	display: inline-block;
}

.pagination-list {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 8px;
	align-items: center;
}

.page-item {
	display: inline-block;
}

/* 🔢 Number Buttons */
.number-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	color: #8B4513; /* Brown text */
	background: linear-gradient(145deg, #fff5f5 0%, #ffe0e0 100%);
	border: 2px solid #D2691E; /* Chocolate brown border */
	box-shadow: 0 4px 15px rgba(139, 69, 19, 0.15), inset 0 1px 0 rgba(255,255,255,0.8);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

	.number-btn:hover {
		background: linear-gradient(145deg, #B22222 0%, #8B4513 100%); /* Firebrick to Brown */
		color: #fff;
		border-color: #8B0000; /* Dark red */
		transform: translateY(-3px);
		box-shadow: 0 8px 25px rgba(178, 34, 34, 0.4), 0 4px 10px rgba(139, 69, 19, 0.3);
	}

/* ⭐ Active Button */
.page-item.active .number-btn {
	background: linear-gradient(145deg, #DC143C 0%, #8B4513 100%); /* Crimson to Brown */
	color: #fff;
	border-color: #8B0000;
	box-shadow: 0 6px 20px rgba(220, 20, 60, 0.4), inset 0 2px 4px rgba(0,0,0,0.2);
	transform: scale(1.05);
}

/* ⬅️➡️ Arrow Buttons */
.arrow-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	text-decoration: none;
	color: #fff;
	background: linear-gradient(145deg, #CD5C5C 0%, #8B4513 100%); /* Indian Red to Brown */
	border: 2px solid #8B0000;
	box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
	transition: all 0.3s ease;
}

	.arrow-btn:hover {
		background: linear-gradient(145deg, #B22222 0%, #A0522D 100%); /* Firebrick to Sienna */
		transform: scale(1.1) rotate(5deg);
		box-shadow: 0 6px 20px rgba(178, 34, 34, 0.5);
	}

/* Hover glow effect */
.page-link::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	opacity: 0;
	transition: opacity 0.3s;
	background: radial-gradient(circle, rgba(255,200,200,0.4) 0%, transparent 70%);
}

.page-link {
	position: relative;
	overflow: hidden;
}

	.page-link:hover::before {
		opacity: 1;
	}
/* ==========================================
                       RED-BROWN PRODUCT INFO SECTION
                       ========================================== */

.product-info-section {
	background: #fafafa;
	padding: 40px 0;
	margin-top: 30px;
	border-top: 3px solid #c0392b;
}

.info-block {
	background: white;
	border-radius: 8px;
	padding: 20px 25px;
	margin-bottom: 20px;
	box-shadow: 0 2px 8px rgba(139, 69, 19, 0.08);
	border-left: 4px solid #8b4513;
}

/* Headings - Red Brown Gradient */
.info-title {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 12px;
	background: linear-gradient(135deg, #c0392b 0%, #8b4513 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	position: relative;
	padding-bottom: 8px;
}

	.info-title::after {
		content: '';
		position: absolute;
		bottom: 0;
		/* ya */
		height: 1px !important;
		opacity: 0.6 !important; /* 🔥 Halki si transparent */
		background: linear-gradient(90deg, #c0392b, #8b4513);
	}

/* Body Text */
.info-text {
	font-size: 13px;
	line-height: 1.7;
	color: #555;
	margin: 0;
}

	.info-text .highlight {
		color: #c0392b;
		font-weight: 600;
	}

/* List Style */
.info-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

	.info-list li {
		font-size: 13px;
		color: #555;
		padding: 6px 0;
		border-bottom: 1px dotted #eee;
	}

		.info-list li:last-child {
			border-bottom: none;
		}

		.info-list li i {
			color: #8b4513;
			margin-right: 8px;
			font-size: 11px;
		}

/* Usage Grid */
.usage-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
}

.usage-item {
	text-align: center;
	padding: 15px 10px;
	background: linear-gradient(145deg, #fff5f5 0%, #fff0e6 100%);
	border-radius: 6px;
	border: 1px solid #e0d0c8;
}

	.usage-item i {
		font-size: 20px;
		background: linear-gradient(135deg, #c0392b 0%, #8b4513 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		margin-bottom: 6px;
		display: block;
	}

	.usage-item span {
		font-size: 11px;
		font-weight: 600;
		color: #555;
		text-transform: uppercase;
	}

/* FAQ Section */
.faq-section .faq-item {
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f0;
}

	.faq-section .faq-item:last-child {
		border-bottom: none;
	}

.faq-q {
	font-size: 13px;
	font-weight: 600;
	color: #8b4513;
	margin-bottom: 6px;
	cursor: pointer;
}

.faq-a {
	font-size: 12px;
	color: #666;
	line-height: 1.6;
	margin: 0;
	padding-left: 15px;
	border-left: 2px solid #e0d0c8;
}

/* Collection Links */
.collections-links {
	text-align: center;
	padding: 20px;
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(139, 69, 19, 0.08);
}

.collections-label {
	font-size: 12px;
	color: #888;
	text-transform: uppercase;
	margin-right: 10px;
}

.collection-link {
	display: inline-block;
	padding: 6px 14px;
	margin: 3px;
	background: linear-gradient(135deg, #c0392b 0%, #8b4513 100%);
	color: white !important;
	text-decoration: none !important;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	transition: all 0.3s;
}

	.collection-link:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(139, 69, 19, 0.3);
	}

/* Mobile Responsive */
@@media (max-width: 768px) {
	.usage-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.info-block {
		padding: 15px;
	}

	.collections-links {
		text-align: left;
	}
}