:root {
	--primary: #7a3200;
	--primary2: #b96a17;
	--light: #f7efe3;
	--dark: #2d1300;

	--primary_color: #f5aa49;
	--secondary_color: #521801;
	--bg_soft: #e8e6e6;
	--black: #000;
	--text_color: #69778a;
	--white_color: #ffffff;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Baloo 2', sans-serif;
	overflow-x: hidden;
}

a {
	text-decoration: none;
	color: var(--secondary_color);
}

ul {
	list-style: none;
}

img {
	width: 100%;
}

button {
	border: none;
	outline: none;
	cursor: pointer;
}


.container {
	width: 95%;
	max-width: 1500px;
	margin: auto;
}

/* =========================
           TOP BAR
        ========================= */
.topbar {
	background: #f5eadb;
	border-bottom: 1px solid #ead7bf;
}

.topbar-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 10px 0;
	flex-wrap: wrap;
}

.topbar-left,
.topbar-right {
	display: flex;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
}

.topbar-item {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #6a4b2d;
	font-size: 14px;
	font-weight: 500;
}

.topbar-item i {
	color: var(--primary2);
}

/* =========================
           MAIN HEADER
        ========================= */
.main-header {
	padding: 10px 0;
	background: #fff;
}

.header-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 25px;
}

/* LOGO */
.logo img {
	width: 220px;
	max-width: 100%;
}

/* SEARCH */
.search-box {
	flex: 1;
	max-width: 700px;
	position: relative;
}

.search-box input {
	width: 100%;
	height: 58px;
	border-radius: 12px;
	border: 1px solid #e1d4c6;
	padding: 0 70px 0 25px;
	font-size: 16px;
	outline: none;
	transition: .3s;
}

.search-box input:focus {
	border-color: var(--primary2);
}

.search-btn {
	position: absolute;
	right: 0;
	top: 0;
	width: 65px;
	height: 58px;
	border: none;
	background: linear-gradient(135deg, var(--primary2), #d88222);
	color: #fff;
	font-size: 20px;
	border-radius: 0 12px 12px 0;
	cursor: pointer;
}

/* HEADER ICONS */
.header-icons {
	display: flex;
	align-items: center;
	gap: 30px;
}

.icon-box {
	position: relative;
	text-align: center;
	min-width: 80px;
	cursor: pointer;
}

.icon-box i {
	font-size: 28px;
	color: #4a1f00;
	margin-bottom: 5px;
}

.icon-box h4 {
	font-size: 13px;
	color: #222;
	font-weight: 500;
}

.icon-box p {
	font-size: 13px;
	color: #555;
}

.count {
	position: absolute;
	top: -5px;
	right: 18px;
	width: 22px;
	height: 22px;
	background: #f28c1c;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
}

.cart-price {
	font-size: 15px;
	font-weight: 700;
	color: var(--dark);
}

/* =========================
           NAVBAR
        ========================= */
.navbar {
	background: linear-gradient(90deg, #3d1600, #6d2c00);
	position: relative;
}

.nav-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

/* CATEGORY BTN */
.all-category-wrapper {
	position: relative;
}

.all-category {
	background: linear-gradient(135deg, #b96a17, #d88222);
	min-width: 240px;
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 20px;
	color: #fff;
	font-weight: 600;
	border-radius: 0 0 12px 12px;
	cursor: pointer;
	user-select: none;
}

.all-category .arrow {
	transition: .3s;
}

.all-category.active .arrow {
	transform: rotate(180deg);
}

/* =========================
   DROPDOWN
========================= */

.category-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	width: 320px;
	background: #fff;
	border-radius: 0 0 14px 14px;
	overflow: hidden;
	box-shadow: 0 15px 35px rgba(0, 0, 0, .12);

	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);

	transition: .3s;
	z-index: 999;
}

.category-dropdown.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.category-dropdown a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	color: #222;
	border-bottom: 1px solid #eee;
	transition: .3s;
	font-weight: 500;
}

.category-dropdown a:hover {
	background: #faf4ec;
	color: #b96a17;
	padding-left: 28px;
}

.category-dropdown a i {
	width: 20px;
	text-align: center;
}

/* MENU */
.menu {
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: space-between;
	overflow-x: auto;
	scrollbar-width: none;
}

.menu::-webkit-scrollbar {
	display: none;
}

.menu li {
	position: relative;
	flex-shrink: 0;
}

.menu li a {
	color: #fff;
	padding: 20px 18px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	transition: .3s;
}

.menu li a:hover {
	background: rgba(255, 255, 255, .08);
}

.menu li a i {
	font-size: 18px;
}

/* OFFER BTN */
.offer-btn {
	background: linear-gradient(135deg, var(--primary2), #cf7b1e);
	color: #fff;
	height: 48px;
	padding: 0 22px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	flex-shrink: 0;
}

/* =========================
           MOBILE MENU BTN
        ========================= */
.mobile-toggle {
	display: none;
	width: 50px;
	height: 50px;
	border-radius: 10px;
	border: none;
	background: var(--primary2);
	color: #fff;
	font-size: 22px;
}

/* =========================
           MOBILE MENU
        ========================= */
.mobile-menu {
	position: fixed;
	top: 0;
	left: -100%;
	width: 300px;
	height: 100vh;
	background: #fff;
	z-index: 9999;
	transition: .4s;
	overflow-y: auto;
	box-shadow: 0 0 30px rgba(0, 0, 0, .15);
	padding: 25px;
}

.mobile-menu.active {
	left: 0;
}

.mobile-menu-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}

.mobile-menu ul li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	color: #222;
	border-bottom: 1px solid #eee;
	font-weight: 500;
}

.mobile-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
}

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






/* =========================
HERO
========================= */

.hero {
	padding: 30px 0 40px 0;
}

.hero-grid {
	display: grid;
	grid-template-columns: 2.2fr 1fr;
	gap: 28px;
}

.hero-left {
	background: #f2ecdf;
	border-radius: 34px;
	overflow: hidden;
	min-height: 540px;
	position: relative;
	display: flex;
	align-items: center;
}


.hero-right {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.hero-right img {
	border-radius: 25px;
}









/* SHop by category */
/*--===============|| 04. SHOP BY CATEGORY ||===============--*/
.bg_offer {
	margin-top: 80px;
}

.offer_heading h1 {
	font-size: 36px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 30px;
}

.offer_card {
	text-align: center;
	padding: 5px;
}

.offer_card img {
	width: 100%;
	padding: 15px;
	border-radius: 50%;
	margin-bottom: 15px;
	background-color: var(--bg_soft);
}

.offer_card h6 {
	font-size: 16px;
	font-weight: 600;
}

.owl-nav {
	text-align: center;
	font-size: 18px;
	margin-top: 15px !important;
}

.owl-carousel .owl-nav button.owl-next {
	color: var(--primary_color);
	margin-left: 15px;
}

.owl-carousel .owl-nav button.owl-next:focus {
	outline: none;
}

.owl-carousel .owl-nav button.owl-prev {
	color: var(--primary_color);
}

.owl-carousel .owl-nav button.owl-prev:focus {
	outline: none;
}

.owl-dots {
	display: none;
}








/*--===============|| 05. PRODUCT ||===============--*/
.bg_offer {}

.latestproduct {
	padding: 15px 0;
}

.latest_product_card {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	padding: 10px;
	border-radius: 25px;
	border: 1px solid var(--bg_soft);
	background-color: var(--white_color);
	cursor: pointer;
	margin: 15px;
}

.latest_product_card img {
	width: 100%;
	border-radius: 10px;
	background-color: var(--bg_soft);
}

.latest_product_card h5 {
	font-size: 16px;
	font-weight: 600;
	margin-top: 10px;
	margin-bottom: 0px;
	color: var(--secondary_color);
}

.latest_product_card p {
	font-size: 18px;
	margin-top: 10px;
	margin-bottom: 0px;
}

.latest_product_card p del {
	color: var(--text_color);
}

.latest_product_card p strong {
	color: var(--secondary_color);
	margin-left: 15px;
}

.latest_product_card .commision {
	position: absolute;
	top: 15px;
	left: 15px;
	font-size: 14px;
	padding: 0px 10px;
	border-radius: 5px;
	color: var(--white_color);
	background-color: var(--secondary_color);
}

.cartBtn {
	background-color: var(--secondary_color);
	color: var(--white_color);
	padding: 12px 0px;
	text-align: center;
	font-size: 14px;
	text-decoration: none;
	border-radius: 25px;
	transition: all 0.5s ease-in;
	z-index: 2;
	display: block;
	margin-top: 20px;
	display: block;
	width: 100%;
}

.pro_wishlist {
	position: absolute;
	top: 20px;
	right: 15px;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 50%;
	background: var(--white_color);
	cursor: pointer;
	transition: all 0.5s ease-in;
	z-index: 2;
}

.pro_wishlist i {
	color: var(--text_color);
}

.pro_wishlist:hover {
	background: var(--primary_color);
	transform: scale(1.1);
}

.pro_wishlist:hover i {
	color: var(--white_color);
}

.pro_wishlist::after {
	content: attr(title);
	position: absolute;
	right: 40px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--primary_color);
	color: var(--white_color);
	font-size: 14px;
	padding: 5px 6px;
	white-space: nowrap;
	opacity: 0;
	border-radius: 4px;
	visibility: hidden;
	transition: all 0.5s ease-in;
}

.pro_wishlist:hover::after {
	opacity: 1;
	visibility: visible;
}


.cartBtn i {
	margin-right: 10px;
}

.latest_product_card a:hover .cartBtn {
	opacity: 1;
	visibility: visible;
}

.latest_product_card a:hover .cartBtn:hover {
	color: var(--white_color);
	background-color: var(--primary_color);
}

.cartBtn i {
	display: inline-block;
	transition: transform 0.4s ease;
}

.latest_product_card a:hover .cartBtn:hover i {
	animation: iconMove 0.5s ease;
}

@keyframes iconMove {
	0% {
		transform: translateY(0);
		opacity: 1;
	}

	40% {
		transform: translateY(-12px);
		opacity: 0;
	}

	41% {
		transform: translateY(12px);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}




.new_arrival_heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.new_arrival_heading h3 {
	font-size: 24px;
}

.new_arrival_heading a {
	text-decoration: none;
	font-size: 16px;
}


.allProduct {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	/* gap: 10px; */
}





.offer-section {
	width: 100%;
	margin-top: 5%;
	margin-bottom: 3%;

}

.offer-container {
	margin: auto;
	height: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

/* =========================
CARD
========================= */

.offer-card {
	position: relative;
	overflow: hidden;
	border-radius: 30px;
	cursor: pointer;
}

/* =========================
BACKGROUND IMAGE
========================= */

.offer-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	transition: transform .8s ease;
}

/* ZOOM EFFECT */

.offer-card:hover .offer-bg {
	transform: scale(1.12);
}

/* DARK OVERLAY */

.overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
			rgba(0, 0, 0, 0.30),
			rgba(0, 0, 0, 0.05));
}

/* =========================
CONTENT
========================= */

.offer-content {
	position: relative;
	z-index: 2;
	padding: 70px 55px;
	color: #fff;
	max-width: 480px;

}

.offer-content h2 {
	font-size: 40px;
	line-height: 1.1;
	margin-bottom: 22px;
	font-weight: 800;

}

.offer-content p {
	font-size: 15px;
	font-weight: 500;
}

/* =========================
LEFT CARD
========================= */



/* =========================
RIGHT CARD
========================= */


/* =========================
RESPONSIVE
========================= */

@media(max-width:1200px) {

	.offer-content h2 {
		font-size: 44px;
	}

}

@media(max-width:900px) {

	.offer-container {
		grid-template-columns: 1fr;
	}

	.offer-card {
		min-height: 260px;
	}

}

@media(max-width:768px) {

	.offer-content {
		padding: 50px 35px;
	}

	.offer-content h2 {
		font-size: 36px;
	}

	.offer-content p {
		font-size: 20px;
	}

	.offer-card {
		border-radius: 24px;
		min-height: 230px;
	}

}

@media(max-width:480px) {

	.offer-content {
		padding: 38px 24px;
	}

	.offer-content h2 {
		font-size: 28px;
		margin-bottom: 16px;
	}

	.offer-content p {
		font-size: 17px;
	}

	.offer-card {
		min-height: 210px;
	}

}





/*--===============|| 09. POINT OF SALE ||===============--*/
.allProces {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.point_of_sale {
	margin-top: 80px;
	margin-bottom: 80px;
	border-radius: 15px;
}

.discont_card {
	position: relative;
	border-radius: 15px;
	background-color: var(--primary_color);
}

.discount_card_img img {
	width: 100%;
	padding: 50px 0px 0px 0px;
}

.discount_card_content {
	margin-top: 50px;
	margin-left: 30px;
}

.discount_card_content h3 {
	font-weight: 600;
	font-size: 32px;
	color: var(--white_color);
	margin-bottom: 20px;
}

.discount_card_content a {
	color: var(--black);
	padding: 8px 20px;
	text-decoration: none;
	border-radius: 20px;
	border: 1px solid var(--text_color);
	background-color: var(--white_color);
}


.discount_card_content a i {
	margin-left: 10px;
}



.bg_discount {
	margin-top: 80px;
}

.process_card {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 30px 25px;
	border-radius: 15px;
	background: rgba(255, 165, 0, 0.12);
	overflow: hidden;
	transition: 0.3s ease;
}

.icon_box {
	position: relative;
	width: 60px;
	height: 60px;
	overflow: hidden;
}

.bg_img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
}

.svg_icon {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: 0.5s ease;
}

.svg1 {
	opacity: 1;
}

.svg2 {
	top: 120%;
	opacity: 0;
}

.process_card:hover {
	background: rgba(255, 165, 0, 0.25);
	transform: translateY(-3px);
}

.process_card:hover .svg1 {
	top: -50%;
	opacity: 0;
}

.process_card:hover .svg2 {
	top: 50%;
	opacity: 1;
	transform: translate(-50%, -50%);
}

.content_process h3 {
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 0px;
}

.content_process p {
	font-size: 15px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.card_process_sy {
	background-color: #e6eef9 !important;
}

.card_process_syt {
	background-color: #DFF8F6 !important;
}

.card_process_syss {
	background-color: #FFEEF0 !important;
}

/*--===============|| 10. FOOTER ||===============--*/
.footer_bg {
	padding: 50px 0px 0px 0px;
	background-color: #521801;
	position: relative;
	overflow: hidden;
}

.allFoot {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.footer_bg::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 250px;
	background-image: url("../images/footer-bottom-shape-3.png");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: contain;
	opacity: 0.4;
	z-index: 0;
	pointer-events: none;
}

.footer_bg>* {
	position: relative;
	z-index: 1;
}

.footer_box img {
	width: 110px;
	margin-bottom: 15px;
}

.footer_box p {
	font-size: 16px;
	color: #e6eef9;
	margin-bottom: 15px;
}

.footer_info ul {
	padding: 0;
	color: #e6eef9;
	margin: 0;
}

.footer_info ul li {
	display: flex;
	gap: 12px;
	color: #e6eef9;
	margin-top: 12px;
	list-style: none;
	align-items: flex-start;
}

.footer_info ul li i {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	color: #000000;
	background: var(--white_color);
	border: 1px solid var(--primary_color);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.footer_info ul li span {
	color: #e6eef9;
	font-size: 15px;
}

.footer_social ul {
	padding: 0;
	margin-top: 20px;
	display: flex;
	gap: 12px;
	list-style: none;
}

.footer_social ul li a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: #e6eef9;
	border: 1px solid #e6eef9;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: 0.3s;
}

.footer_social ul li a:hover {
	background-color: #fecc89;
	color: #000000;
}

.account_ft h3 {
	font-size: 22px;
	font-weight: 600;
	color: #fff;
	position: relative;
	margin-bottom: 20px;
}

.account_ft h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -8px;
	width: 50px;
	height: 3px;
	background: #fff;
}

.account_ft ul {
	padding: 0;
	margin: 0;
}

.account_ft ul li {
	list-style: none;
	margin-top: 12px;
}

.account_ft ul li a {
	color: #fff;
	text-decoration: none;
	transition: 0.3s;
}

.account_ft ul li a:hover {
	color: #fecc89;
}

.copyright {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 40px;
	gap: 10px;
}

.copyright p,
.copyright h6 {
	margin: 0;
	color: #fff;
	font-size: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.copyright .bg_img {
	max-width: 180px;
}




.productFilter {
	display: grid;
	grid-template-columns: 1fr 4fr;
	padding-top: 30px;
	border-top: 1px solid #ddd;
	margin-top: 30px;
	gap: 30px;
}

.productFilter .allProduct {
	grid-template-columns: repeat(4, 1fr);
}






:root {

	--dark: #121826;
	--light-dark: #1b2335;
	--text: #dfe6f1;
	--gray: #8f9bb3;
	--border: rgba(255, 255, 255, 0.08);
	--glass: rgba(255, 255, 255, 0.04);
	--shadow: 0 10px 40px #ddd;
}

.filter-sidebar {
	width: 100%;
	max-width: 340px;
	backdrop-filter: blur(18px);
	border-radius: 28px;
	padding: 28px;
	border-radius: 25px;
	border: 1px solid var(--bg_soft);
	background-color: var(--white_color);
	margin-top: 20px;
}

.filter-group {
	margin-bottom: 40px;
}

.filter-title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	margin-bottom: 22px;
	text-transform: uppercase;
	position: relative;
	padding-left: 16px;
}

.filter-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 5px;
	height: 18px;
	border-radius: 10px;
	background: linear-gradient(to bottom, var(--primary), var(--secondary_color));
}

.filter-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.filter-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.filter-label {
	display: flex;
	align-items: center;
	gap: 14px;
	cursor: pointer;
	width: 100%;
	transition: 0.3s ease;
}

.filter-label:hover {
	transform: translateX(4px);
}

.filter-label span {
	font-size: 15px;
}

/* Premium Checkbox */
.checkbox {
	appearance: none;
	min-width: 22px;
	width: 22px;
	height: 22px;
	border-radius: 8px;
	border: 2px solid #ddd;
	background: rgba(255, 255, 255, 0.03);
	cursor: pointer;
	position: relative;
	transition: 0.3s;
}

.checkbox:checked {
	background: linear-gradient(135deg, var(--primary), var(--secondary_color));
	border-color: transparent;
	box-shadow: 0 0 15px rgba(108, 92, 231, 0.5);
}

.checkbox:checked::before {
	content: "✓";
	position: absolute;
	font-size: 13px;
	font-weight: bold;
	top: 50%;
	left: 50%;
	color: var(--light);
	transform: translate(-50%, -50%);
}

/* Price Range */
.price-box {
	background: var(--glass);
	padding: 20px;
	border-radius: 18px;
	border: 1px solid var(--border);
}

.range-values {
	display: flex;
	justify-content: space-between;
	margin-bottom: 18px;
	font-weight: 600;
}

.range-slider {
	position: relative;
	height: 6px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 10px;
}

.slider-track {
	height: 100%;
	position: absolute;
	background: linear-gradient(to right, var(--primary), var(--secondary_color));
	border-radius: 10px;
}

.range-input {
	position: relative;
}

.range-input input {
	position: absolute;
	width: 100%;
	top: -6px;
	height: 6px;
	background: none;
	pointer-events: none;
	appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 4px solid var(--primary);
	cursor: pointer;
	box-shadow: 0 0 10px rgba(108, 92, 231, 0.5);
}

.filter-btn {
	margin-top: 22px;
	width: 100%;
	border: none;
	background: linear-gradient(135deg, var(--primary), var(--secondary_color));
	padding: 14px;
	border-radius: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: 0.3s ease;
	font-size: 15px;
	color: #fff;
}

.filter-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(108, 92, 231, 0.4);
}

.filter-item .count {
	color: #521801;
	font-size: 14px;
	position: relative;
}

@media(max-width:768px) {
	body {
		padding: 20px;
	}

	.filter-sidebar {
		max-width: 100%;
		padding: 22px;
		border-radius: 22px;
	}
}



.pagination-wrapper {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.pagination-custom {
	display: flex;
	gap: 10px;
	list-style: none;
	padding: 12px 18px;
	background: #fff;
	border-radius: 50px;
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}

.page-btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: #521801;
	font-weight: 600;
	cursor: pointer;
	transition: 0.3s ease;
	position: relative;
}

/* hover glow */
.page-btn:hover {
	background: #521801;
	color: #fff;
	transform: translateY(-2px);
}

/* active */
.page-btn.active {
	background: #521801;
	color: #fff;
	box-shadow: 0 5px 15px rgba(98, 85, 73, 0.3);
}

/* arrows */
.prev,
.next {
	font-size: 16px;
}

/* dots */
.dots {
	display: flex;
	align-items: center;
	color: #999;
}

.page-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* responsive */
@media(max-width:600px) {
	.pagination-custom {
		gap: 6px;
		padding: 10px;
	}

	.page-btn {
		width: 36px;
		height: 36px;
		font-size: 14px;
	}
}





/* =========================
           BREADCRUMB
        ========================= */

.breadcrumb {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.breadcrumb a {
	color: var(--primary);
	font-weight: 600;
	font-size: 15px;
}

.breadcrumb span {
	color: #999;
	font-size: 13px;
}

/* =========================
           PRODUCT SECTION
        ========================= */

.product-wrapper {
	display: grid;
	grid-template-columns: 90px 1.2fr 1fr;
	gap: 22px;
	align-items: start;
}

/* =========================
           THUMBNAILS
        ========================= */

.thumbs {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.thumb {
	width: 80px;
	height: 80px;
	border-radius: 14px;
	overflow: hidden;
	cursor: pointer;
	border: 2px solid transparent;
	background: var(--light);
	transition: .3s;
}

.thumb.active {
	border-color: var(--primary2);
}

.thumb:hover {
	transform: translateY(-3px);
}

.video-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-weight: 600;
	color: var(--primary);
	gap: 4px;
}

.video-thumb i {
	font-size: 26px;
}

/* =========================
           MAIN IMAGE
        ========================= */

.main-image {
	background: #f8efe5;
	border-radius: 20px;
	padding: 18px;
	position: relative;
	overflow: hidden;
}

.main-image img {
	border-radius: 14px;
	height: 100%;
	object-fit: cover;
}

.badge {
	position: absolute;
	top: 18px;
	left: 18px;
	width: 85px;
	height: 85px;
	background: var(--secondary_color);
	border-radius: 50%;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	border: 4px solid #d8b58c;
	line-height: 1.2;
}

/* =========================
           PRODUCT DETAILS
        ========================= */

.product-info {
	padding-right: 10px;
}

.top-icons {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-bottom: 10px;
}

.top-icons button {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	border: 1px solid #e7d6c7;
	background: #fff;
	cursor: pointer;
	transition: .3s;
	color: var(--primary);
	font-size: 18px;
}

.top-icons button:hover {
	background: var(--primary);
	color: #fff;
}

.product-title {
	font-size: 42px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 5px;
}

.sub-title {
	color: var(--text_color);
	font-size: 18px;
	margin-bottom: 10px;
}

.rating-box {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.stars {
	color: #ffb400;
}

.rating-box p {
	color: var(--text_color);
	font-size: 16px;
}

.price-box {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.new-price {
	font-size: 48px;
	font-weight: 800;
	color: var(--secondary_color);
}

.old-price {
	font-size: 28px;
	color: #999;
	text-decoration: line-through;
}

.discount {
	background: #ffb24d;
	color: white;
	padding: 5px 14px;
	border-radius: 30px;
	font-size: 15px;
	font-weight: 700;
}

.tax {
	color: var(--text_color);
	margin-bottom: 18px;
}

.desc {
	font-size: 18px;
	line-height: 1.7;
	color: #444;
	margin-bottom: 24px;
}

/* =========================
           SIZE BUTTONS
        ========================= */

.section-title {
	font-size: 20px;
	margin-bottom: 12px;
	font-weight: 700;
}

.size-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 22px;
}

.size-btn {
	border: 2px solid #ead7c3;
	background: #fff;
	padding: 12px 22px;
	border-radius: 12px;
	cursor: pointer;
	transition: .3s;
	font-weight: 600;
	color: var(--dark);
}

.size-btn.active,
.size-btn:hover {
	background: var(--light);
	border-color: var(--primary2);
	color: var(--primary);
}

/* =========================
           QUANTITY
        ========================= */

.qty-box {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 28px;
}

.qty-control {
	display: flex;
	align-items: center;
	border: 1px solid #ead7c3;
	border-radius: 12px;
	overflow: hidden;
}

.qty-control button {
	width: 45px;
	height: 45px;
	border: none;
	background: var(--light);
	font-size: 20px;
	cursor: pointer;
	color: var(--primary);
}

.qty-control input {
	width: 55px;
	text-align: center;
	border: none;
	outline: none;
	font-size: 18px;
	font-weight: 700;
}

/* =========================
           BUTTONS
        ========================= */

.btn-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-bottom: 22px;
}

.btn {
	height: 62px;
	border-radius: 14px;
	border: none;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	transition: .3s;
}

.cart-btn {
	background: var(--secondary_color);
	color: white;
}

.buy-btn {
	background: white;
	border: 2px solid var(--primary2);
	color: var(--primary);
}

.btn:hover {
	transform: translateY(-3px);
}

/* =========================
           FEATURES
        ========================= */

.mini-features {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.mini-feature {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--primary);
	font-weight: 600;
}

.mini-feature i {
	font-size: 18px;
}

/* =========================
           RIGHT SIDE CARD
        ========================= */

.service-card {
	border: 1px solid #ead7c3;
	border-radius: 18px;
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.service-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.service-icon {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--light);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	flex-shrink: 0;
}

.service-item h4 {
	font-size: 20px;
	margin-bottom: 4px;
}

.service-item p {
	color: var(--text_color);
	line-height: 1.4;
}

/* =========================
           BOTTOM AREA
        ========================= */

.bottom-wrapper {
	margin-top: 26px;
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 24px;
}

.tabs-box {
	border: 1px solid #ead7c3;
	border-radius: 18px;
	overflow: hidden;
}

.tabs {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid #ead7c3;
	background: #fffaf5;
}

.tab-btn {
	padding: 18px 26px;
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 18px;
	font-weight: 700;
	color: var(--dark);
	transition: .3s;
}

.tab-btn.active {
	color: var(--primary);
	background: white;
}

.tab-content {
	padding: 28px;
}

.tab-content p {
	line-height: 1.8;
	font-size: 18px;
	color: #444;
	margin-bottom: 16px;
}

.tab-content ul {
	list-style: none;
}

.tab-content ul li {
	margin-bottom: 10px;
	position: relative;
	padding-left: 28px;
	font-size: 17px;
}

.tab-content ul li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--primary2);
	font-weight: 700;
}

/* =========================
           TRUST CARD
        ========================= */

.trust-card {
	border: 1px solid #ead7c3;
	border-radius: 18px;
	padding: 28px;
}

.trust-icon {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: var(--light);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	margin-bottom: 18px;
}

.trust-card h3 {
	font-size: 24px;
	margin-bottom: 10px;
}

.trust-card p {
	color: var(--text_color);
	line-height: 1.7;
	margin-bottom: 22px;
}

.avatars {
	display: flex;
	align-items: center;
}

.avatars img {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid white;
	margin-left: -12px;
}

.avatars img:first-child {
	margin-left: 0;
}

.avatars span {
	margin-left: 10px;
	font-weight: 700;
	color: var(--primary);
}

/* =========================
           RESPONSIVE
        ========================= */

@media(max-width:1200px) {

	.product-wrapper {
		grid-template-columns: 80px 1fr;
	}

	.service-card {
		grid-column: 1 / -1;
	}

	.bottom-wrapper {
		grid-template-columns: 1fr;
	}
}

@media(max-width:768px) {

	.product-wrapper {
		grid-template-columns: 1fr;
	}

	.thumbs {
		flex-direction: row;
		order: 2;
		overflow-x: auto;
	}

	.thumb {
		min-width: 80px;
	}

	.main-image {
		order: 1;
	}

	.product-info {
		order: 3;
	}

	.service-card {
		order: 4;
	}

	.product-title {
		font-size: 32px;
	}

	.new-price {
		font-size: 38px;
	}

	.btn-group {
		grid-template-columns: 1fr;
	}

	.mini-features {
		gap: 16px;
	}

	.tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
	}

	.tab-btn {
		white-space: nowrap;
	}
}

@media(max-width:480px) {

	.container {
		padding: 14px;
	}

	.product-title {
		font-size: 28px;
	}

	.sub-title,
	.desc,
	.tab-content p {
		font-size: 16px;
	}

	.new-price {
		font-size: 32px;
	}

	.old-price {
		font-size: 20px;
	}

	.service-item h4 {
		font-size: 18px;
	}

	.tab-content {
		padding: 20px;
	}
}