:root {
	--taupe: #bda994;
	--text-dark: #333;
	--border-color: #eeeeee;
	--bg-light: #fdfdfd;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Montserrat', sans-serif; overflow-x: hidden; color: var(--text-dark); background: #fff; }

/* ANNOUNCEMENT */
.announcement-bar { background: var(--taupe); height: 35px; }

/* HEADER DESKTOP (Restored) */
.top-utility {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 15px 40px;
	border-bottom: 1px solid var(--border-color);
}
.header-left { display: flex; align-items: center; } /* Empty on desktop */
.logo img { height: 55px; display: block; }

.user-actions { display: flex; justify-content: flex-end; align-items: center; gap: 25px; }
.account-link { text-decoration: none; color: #000; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.icon-group { display: flex; gap: 18px; align-items: center; }
.nav-icon { width: 20px; height: 20px; fill: #333; cursor: pointer; transition: 0.2s; }
.nav-icon:hover { fill: var(--taupe); }
.cart-wrapper { position: relative; }
.cart-count { position: absolute; top: -5px; right: -8px; background: var(--taupe); color: white; font-size: 9px; padding: 2px 5px; border-radius: 10px; }

/* DESKTOP MENU */
.category-nav { border-bottom: 1px solid var(--border-color); }
.nav-menu { list-style: none; display: flex; justify-content: center; align-items: center; gap: 30px; padding: 14px 0; }
.nav-menu > li > a { text-decoration: none; color: var(--text-dark); font-size: 13px; letter-spacing: 0.5px; }
.has-dropdown { position: relative; }
.dropdown {
	position: absolute; top: 100%; left: 0; margin-top: 15px; background: white; list-style: none; min-width: 180px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.05); opacity: 0; visibility: hidden; transition: 0.3s; z-index: 1000; border: 1px solid #eee;
}
.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; }
.dropdown li a { display: block; padding: 12px 20px; text-decoration: none; color: #444; font-size: 12px; }
.mini-logo { height: 22px; margin-right: 10px; }

/* HERO SLIDER */
.hero-slider { position: relative; width: 100%; height: 80vh; overflow: hidden; }
.slider-wrapper { display: flex; width: 400%; height: 100%; transition: transform 0.8s ease-in-out; }
.slide { width: 25%; height: 100%; }
.panel { width: 100%; height: 100%; background-size: cover; background-position: center; }
.p1 { background-image: url('/images/slider/1.jpg'); }
.p2 { background-image: url('/images/slider/2.jpg'); }
.p3 { background-image: url('/images/slider/3.jpg'); }
.p4 { background-image: url('/images/slider/4.jpg'); }

.slider-arrow {
	position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.5);
	border: none; width: 50px; height: 50px; border-radius: 50%; font-size: 30px; cursor: pointer; z-index: 10;
}
.prev { left: 20px; } .next { right: 20px; }
.slider-dots { position: absolute; bottom: 25px; width: 100%; display: flex; justify-content: center; gap: 12px; }
.dot { width: 8px; height: 8px; border: 1px solid #fff; border-radius: 50%; cursor: pointer; }
.dot.active { background: #fff; }

/* GRID */
.container { max-width: 1400px; margin: 0 auto; padding: 80px 20px; }
.essentials-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.product-card { text-align: left; }
.product-card img { width: 100%; margin-bottom: 15px; }
.taupe-btn { width: 100%; background: var(--taupe); color: white; border: none; padding: 15px; font-size: 11px; cursor: pointer; }
/* Product Links */
.product-link {
	text-decoration: none; /* Removes underline */
	color: inherit;       /* Keeps text dark as defined in body */
	display: block;       /* Makes the whole area clickable */
}

.product-link:hover img {
	opacity: 0.9;         /* Slight visual feedback on hover */
	transition: 0.3s;
}

/* ABOUT US FOOTER */
.about-footer { background: var(--bg-light); padding: 80px 20px; border-top: 1px solid #eee; }
.frame-container { max-width: 1100px; margin: 0 auto; border: 1px solid var(--taupe); position: relative; padding: 60px 40px; }
.frame-header { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); background: var(--bg-light); padding: 0 30px; }
.frame-header h2 { font-family: 'Playfair Display', serif; font-size: 28px; color: var(--taupe); }
.about-grid { display: grid; grid-template-columns: 1fr 1.5fr 1fr; align-items: center; text-align: center; }
.about-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.social-icon { fill: var(--taupe); }
/* Social Link Blocks in Footer */
.social-link-block {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	transition: transform 0.3s ease;
}

.social-link-block:hover {
	transform: translateY(-3px); /* Gentle lift effect */
}

.social-link-block:hover .social-icon {
	fill: #000; /* Optional: darken the icon on hover */
}

/* BACK TO TOP */
.back-to-top {
	position: fixed; bottom: 30px; right: 30px; width: 45px; height: 45px; border-radius: 50%;
	background: white; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center;
	cursor: pointer; opacity: 0; visibility: hidden; transition: 0.4s; z-index: 2000;
}
.back-to-top.visible { opacity: 1; visibility: visible; }

/* --- MOBILE SPECIFIC (Fixed Issues) --- */
.mobile-menu-toggle { display: none; }
#menu-check { display: none; }

@media (max-width: 1024px) {
	.essentials-grid { grid-template-columns: repeat(2, 1fr); }
	.about-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
	.desktop-only, .account-link { display: none; }
	.mobile-menu-toggle { display: block; }

	.top-utility { grid-template-columns: 1fr 2fr 1fr; padding: 10px 15px; }
	.logo img { height: 40px; margin: 0 auto; }

	/* Hamburger Icon */
	.hamburger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; position: relative; z-index: 2001; }
	.hamburger span { width: 22px; height: 2px; background: #333; }

	/* Mobile Drawer */
	.mobile-nav {
		position: fixed; top: 0; left: -100%; width: 280px; height: 100vh;
		background: #fff; z-index: 3000; transition: 0.4s; padding: 60px 30px;
		box-shadow: 10px 0 30px rgba(0,0,0,0.1);
	}
	.close-menu {
		position: absolute; top: 20px; right: 20px; font-size: 30px; cursor: pointer; color: #333;
	}

	#menu-check:checked ~ .mobile-nav { left: 0; }

	/* Overlay to click and close */
	.menu-overlay {
		position: fixed; top: 0; left: 0; width: 100%; height: 100%;
		background: rgba(0,0,0,0.3); visibility: hidden; opacity: 0; transition: 0.3s; z-index: 2500;
	}
	#menu-check:checked ~ .menu-overlay { visibility: visible; opacity: 1; }

	/* Mobile Menu Items + Subcategories */
	.mobile-menu-list { list-style: none; }
	.mobile-menu-list > li { margin-bottom: 20px; border-bottom: 1px solid #f5f5f5; padding-bottom: 10px; }
	.mobile-menu-list a { text-decoration: none; color: #333; font-size: 16px; display: block; }

	.mob-dropdown { list-style: none; padding-left: 15px; margin-top: 10px; display: none; }
	.mob-has-dropdown:hover .mob-dropdown { display: block; } /* Simple hover reveal for subcats */
	.mob-dropdown li { margin-top: 8px; }
	.mob-dropdown li a { font-size: 14px; color: #777; }

	.essentials-grid { grid-template-columns: 1fr; }
	.hero-slider { height: 50vh; }
}

/* --- CATEGORY PAGE LAYOUT --- */
.category-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 40px;
	margin-top: 50px;
	align-items: start;
}

/* SIDEBAR STYLING */
.sidebar-title {
	font-size: 16px;
	letter-spacing: 2px;
	margin-bottom: 25px;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
	font-weight: 600;
}

.sidebar-menu { list-style: none; }
.sidebar-menu > li {
	margin-bottom: 15px;
	position: relative;
}

.sidebar-menu > li > a {
	text-decoration: none;
	color: #333;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: 0.3s;
}

/* Sidebar Toggle Arrow (Mimicking the image) */
.sidebar-menu > li > a::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	transform: rotate(45deg);
	transition: 0.3s;
	margin-left: 10px;
}

.sidebar-menu > li > a.expanded::after {
	transform: rotate(-135deg);
}

.sub-sidebar {
	list-style: none;
	padding-left: 15px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease-out;
}

.sub-sidebar.open {
	max-height: 500px; /* Adjust as needed */
	margin-top: 15px;
}

.sub-sidebar li {
	margin-bottom: 10px;
	font-size: 13px;
	color: #777;
	cursor: pointer;
}

.sub-sidebar li:hover { color: var(--taupe); }

/* SHOP GRID & PRODUCT CARDS (Matching Image) */
.shop-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.img-box {
	background-color: #dcd0c4; /* The beige/taupe background from image */
	padding: 30px;
	position: relative;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.img-box img {
	width: 100%;
	height: auto;
	mix-blend-mode: multiply; /* Helps transparent images blend with beige bg */
}

/* Circular Badge */
.badge {
	position: absolute;
	top: 15px;
	left: 15px;
	background: white;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.2;
	color: #333;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	z-index: 2;
}

.shop-grid .info h4 {
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 5px;
	letter-spacing: 0.5px;
}

.price-box {
	margin: 15px 0;
}

.cur-price {
	font-weight: 700;
	color: var(--taupe);
}

.old-price {
	text-decoration: line-through;
	color: #ccc;
	margin-right: 10px;
}

/* Secondary button for Out of Stock */
.btn-gray {
	background-color: #848484 !important;
}

/* Responsive for Category Page */
@media (max-width: 1024px) {
	.category-layout { grid-template-columns: 1fr; }
	.sidebar { display: none; }
	.shop-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.shop-grid { grid-template-columns: 1fr; }
}

/* Back to Top Icon Fix */
.back-to-top svg {
	fill: none;
	stroke: #333;
	stroke-width: 2;
}

/* --- SUB-SIDEBAR LINK UPDATES --- */

.sub-sidebar li {
	margin-bottom: 0; /* Remove margin from li to handle it in the link padding */
}

.sub-sidebar li a {
	text-decoration: none;
	color: #777; /* Grey color from the image */
	font-size: 13px;
	display: block; /* Makes the entire line clickable */
	padding: 5px 0;
	transition: 0.3s;
}

.sub-sidebar li a:hover {
	color: var(--taupe);
	padding-left: 5px; /* Subtle shift effect on hover */
}

/* Ensure the active/current sub-category stands out if needed */
.sub-sidebar li a.active-sub {
	color: var(--taupe);
	font-weight: 600;
}

/* SUB-HERO SECTION */
.sub-hero {
	display: flex;
	gap: 30px;
	margin-bottom: 50px;
}

.sub-hero-video {
	flex: 1.2; /* Takes up slightly more space than the text side */
	min-height: 400px;
	max-height: 520px;
}

.featured-video {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Ensures the video fills the area like an image */
	display: block;
}

.sub-hero-details {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.sub-hero-text {
	margin-bottom: 25px;
}

.sub-title-main {
	font-family: 'Playfair Display', serif;
	font-size: 32px;
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #4a4a4a;
}

.sub-description {
	font-size: 14px;
	color: var(--taupe);
	margin-top: 5px;
}

/* PRODUCT GRID INSIDE HERO */
.sub-hero-products {
	display: grid;
	grid-template-columns: 1fr 1fr; /* Two products side by side */
	gap: 20px;
}

/* Adjusting the size of info text inside the sub-hero to fit better */
.sub-hero-products .info h4 {
	font-size: 12px;
}
.sub-hero-products .info p {
	font-size: 10px;
}

/* --- RESPONSIVE FIXES --- */
@media (max-width: 1200px) {
	.sub-hero {
		flex-direction: column; /* Stacks video on top of products for tablet/mobile */
	}

	.sub-hero-video {
		min-height: 300px;
	}
}

@media (max-width: 480px) {
	.sub-hero-products {
		grid-template-columns: 1fr; /* Stack products on small phones */
	}
}

/* --- PRODUCT PAGE SPECIFIC --- */

.product-page {
	padding-top: 20px;
	padding-bottom: 150px; /* Space for sticky bar */
}

.product-header-meta {
	display: flex;
	justify-content: space-between;
	align-items: center; /* Vertically centers breadcrumbs and icons */
	padding-bottom: 15px;
	border-bottom: 1px solid #f2f2f2;
	margin-bottom: 20px;
}

.breadcrumbs {
	font-size: 11px;
	color: #bbb;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.breadcrumbs a {
	text-decoration: none;
	color: #999;
	transition: color 0.3s;
}

.breadcrumbs a:hover {
	color: var(--taupe);
}

.breadcrumbs span {
	color: #333;
	font-weight: 600;
}

.product-main-view {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	margin-bottom: 80px;
}

.product-nav-icons {
	display: flex;
	align-items: center; /* Ensures icons and arrows are on same line */
	gap: 15px;
}

.product-nav-icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #ccc;
	font-size: 16px; /* Size of chevrons */
	line-height: 1;
	transition: 0.3s;
}

.product-nav-icons svg {
	fill: #ccc;
	transition: fill 0.3s;
}

/* Hover States */
.product-nav-icons a:hover,
.product-nav-icons a:hover svg {
	color: var(--taupe);
	fill: var(--taupe);
}

/* ADD TO CART UI */
.add-to-cart-container {
	display: flex;
	gap: 15px;
	margin: 30px 0;
}

.quantity-input {
	display: flex;
	border: 1px solid #ddd;
	height: 50px;
}

.qty-btn {
	background: none;
	border: none;
	width: 35px;
	cursor: pointer;
	font-size: 18px;
}

.quantity-input input {
	width: 45px;
	text-align: center;
	border: none;
	font-family: inherit;
	font-weight: 600;
	-moz-appearance: textfield;
}

.quantity-input input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

.add-btn {
	flex: 1;
	max-width: 250px;
}

/* Image Side */
.main-img-box {
	background-color: var(--img-bg);
	padding: 40px;
	position: relative;
}

.large-badge {
	width: 80px;
	height: 80px;
	font-size: 11px;
}

/* Info Side */
.product-title {
	font-family: 'Playfair Display', serif;
	font-size: 36px;
	text-transform: uppercase;
	margin: 15px 0;
	font-weight: 400;
}

.product-price {
	font-size: 24px;
	color: var(--taupe);
	font-weight: 600;
	margin-bottom: 30px;
}

.product-description {
	font-size: 14px;
	color: #666;
	line-height: 1.8;
}

.product-description ul {
	margin: 20px 0;
	padding-left: 20px;
}

.stock-status {
	font-weight: 600;
	font-size: 14px;
	margin: 25px 0;
}

.out-of-stock {
	color: #cc0000;
}

.product-actions {
	display: flex;
	gap: 30px;
	border-bottom: 1px solid #eee;
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.action-link {
	background: none;
	border: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	color: #333;
}

/* Related Products */
.section-title-serif {
	font-family: 'Playfair Display', serif;
	font-size: 28px;
	margin-bottom: 40px;
	font-weight: 400;
}

.related-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 15px;
}

.related-products .shop-grid {
	grid-template-columns: repeat(4, 1fr); /* 4 columns like in listing */
	gap: 25px;
	margin-top: 30px;
}

/* Ensure font and price consistency in related products */
.related-products .info h4 {
	font-size: 13px;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 5px;
}

.related-products .info p {
	font-size: 11px;
	color: #999;
}

.related-products .cur-price {
	font-size: 14px;
	font-weight: 700;
	color: var(--taupe);
}

/* STICKY BOTTOM BAR */
.sticky-product-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #fff;
	box-shadow: 0 -5px 15px rgba(0,0,0,0.05);
	padding: 15px 0;
	z-index: 2000;
}

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

.bar-left {
	display: flex;
	align-items: center;
	gap: 15px;
}

.bar-thumb {
	width: 50px;
	height: 50px;
	background: var(--img-bg);
	object-fit: contain;
}

.bar-title { font-weight: 600; font-size: 14px; }

.bar-right {
	display: flex;
	align-items: center;
	gap: 30px;
}

.bar-price { font-weight: 600; color: #888; }

.bar-icons span {
	font-size: 18px;
	margin-left: 20px;
	cursor: pointer;
	color: #333;
}

/* Sticky Header Adjustment */
.sticky-header {
	position: sticky;
	top: 0;
	z-index: 2100;
	background: #fff;
}

/* Responsive */
@media (max-width: 992px) {
	.product-main-view { grid-template-columns: 1fr; }
	.related-grid { grid-template-columns: repeat(2, 1fr); }
	.sticky-product-bar { display: none; }
}

@media (max-width: 1024px) {
	.related-products .shop-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.product-header-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}
	.add-to-cart-container {
		flex-direction: column;
	}
	.add-btn {
		max-width: 100%;
	}
}

.inner-wrap {
	max-width: 1400px; /* Match this to your main container width */
	margin: 0 auto;    /* Centers the content */
	padding: 0 40px;   /* Standardized side padding for desktop */
	width: 100%;       /* Ensures it takes up space correctly */
}

/* Adjust the Header top-utility to play nice with inner-wrap */
.top-utility.inner-wrap {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding-top: 15px;
	padding-bottom: 15px;
}

/* Adjust the Navigation to play nice with inner-wrap */
.nav-menu.inner-wrap {
	display: flex;
	justify-content: center;
	gap: 30px;
}

/* Adjust the Sticky Bar to play nice with inner-wrap */
.bar-content.inner-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* --- MOBILE TWEAK --- */
@media (max-width: 768px) {
	.inner-wrap {
		padding: 0 15px; /* Smaller padding for mobile screens */
	}

	.top-utility.inner-wrap {
		grid-template-columns: 1fr 2fr 1fr; /* Adjust for mobile logo size */
	}

	.product-header-meta {
		padding: 10px 0;
	}
	.breadcrumbs {
		font-size: 10px;
	}
}