/* * Main Stylesheet for Janki Jewellers
 * Contains all component and homepage section styles.
 */

/* ==========================================================================
   Utility / Layout
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html,
body {
	max-width: 100%;
}
body {
	overflow-x: hidden;
}
img,
svg,
video,
canvas,
iframe {
	max-width: 100%;
	height: auto;
}
.site {
	overflow-x: clip;
}
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}
.text-center { text-align: center; }

/* ==========================================================================
   Section Titles
   ========================================================================== */
.section-header {
	text-align: center;
	margin-bottom: 50px;
}
.section-title {
	font-family: var(--font-heading);
	color: var(--color-primary);
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
	margin-bottom: 8px;
}
.section-subtitle {
	color: var(--color-text-light);
	font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.05rem);
	margin-bottom: 5px;
}
.section-title-underline {
	width: 60px;
	height: 3px;
	background: var(--color-secondary);
	margin: 10px auto 0;
	border-radius: 2px;
}
.section-title-underline-left {
	margin: 10px 0 20px;
}
.section-cta {
	text-align: center;
	margin-top: 40px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.button {
	display: inline-block;
	padding: 12px 30px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.95rem;
	border: none;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: all 0.3s ease;
	text-decoration: none;
}
.primary-button {
	background: var(--color-primary);
	color: var(--color-white);
}
.primary-button:hover {
	background: var(--color-secondary);
	color: var(--color-dark);
}

/* ==========================================================================
   Top Bar
   ========================================================================== */
.top-bar {
	background: var(--color-dark);
	color: var(--color-white);
	font-size: 0.85rem;
	padding: 8px 0;
}
.top-bar-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.top-bar-left {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}
.top-bar-item i {
	margin-right: 5px;
	color: var(--color-secondary);
}
.top-bar-right a {
	color: var(--color-white);
	margin-left: 12px;
	font-size: 0.95rem;
}
.top-bar-right a:hover {
	color: var(--color-secondary);
}

/* Live metal rate ticker (below top bar) */
.janki-price-ticker {
	background: #151515;
	color: var(--color-white);
	font-size: 0.82rem;
	border-bottom: 1px solid rgba(212, 175, 55, 0.28);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	padding: 7px 0;
}
.janki-price-ticker-marquee {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}
.janki-price-ticker-track {
	display: flex;
	width: max-content;
	animation: janki-ticker-scroll 36s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.janki-price-ticker-track {
		animation: none;
	}
}
.janki-price-ticker-segment {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	padding-right: 3rem;
	white-space: nowrap;
}
.janki-ticker-sep {
	opacity: 0.45;
	padding: 0 0.15em;
}
.janki-price-ticker-updated {
	flex-shrink: 0;
	padding: 0 15px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.78rem;
	white-space: nowrap;
}
@keyframes janki-ticker-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}
.janki-price-ticker--empty {
	justify-content: center;
	text-align: center;
	padding: 8px 15px;
}
.janki-price-ticker-placeholder {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.8rem;
	line-height: 1.35;
	max-width: 720px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	background: var(--color-white);
	border-bottom: 1px solid #eee;
	position: sticky;
	top: 0;
	z-index: 1000;
	transition: box-shadow 0.3s ease;
}
.site-header.scrolled {
	box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}
.header-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.site-branding .site-title {
	font-family: var(--font-heading);
	font-size: 1.8rem;
	margin: 0;
}
.site-branding .site-title a {
	color: var(--color-primary);
}
.site-branding .site-description {
	font-size: 0.8rem;
	color: var(--color-text-light);
	margin: 0;
}
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 25px;
}
.main-navigation ul li a {
	color: var(--color-dark);
	font-weight: 500;
	font-size: 0.95rem;
	padding: 8px 0;
	position: relative;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
	color: var(--color-primary);
}
.menu-toggle {
	display: none;
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	color: var(--color-dark);
}
.header-actions .search-toggle-btn {
	background: none;
	border: none;
	font-size: 1.2rem;
	cursor: pointer;
	color: var(--color-dark);
	transition: color 0.3s;
}
.header-actions .search-toggle-btn:hover {
	color: var(--color-primary);
}

/* Search Overlay */
.search-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.9);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}
.search-overlay.active {
	opacity: 1;
	visibility: visible;
}
.search-overlay-inner {
	width: 90%;
	max-width: 600px;
	position: relative;
}
.search-close-btn {
	position: absolute;
	top: -50px;
	right: 0;
	background: none;
	border: none;
	color: var(--color-white);
	font-size: 2rem;
	cursor: pointer;
}
.search-overlay .search-form-wrap {
	display: flex;
}
.search-overlay .search-field {
	flex: 1;
	padding: 15px 20px;
	font-size: 1.1rem;
	border: none;
	outline: none;
	font-family: var(--font-body);
}
.search-overlay .search-submit {
	padding: 15px 25px;
	background: var(--color-secondary);
	color: var(--color-dark);
	border: none;
	cursor: pointer;
	font-size: 1.1rem;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section {
	position: relative;
	min-height: 600px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: linear-gradient(135deg, var(--color-primary) 0%, #4a0011 50%, var(--color-dark) 100%);
	overflow: hidden;
}
.hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.3);
}
.hero-content {
	position: relative;
	z-index: 1;
	padding: 60px 15px;
}
.hero-title {
	font-family: var(--font-heading);
	color: var(--color-white);
	font-size: 3.2rem;
	margin-bottom: 15px;
	line-height: 1.2;
}
.hero-subtitle {
	color: rgba(255,255,255,0.9);
	font-size: 1.2rem;
	margin-bottom: 30px;
}
.hero-buttons {
	display: flex;
	gap: 15px;
	justify-content: center;
	flex-wrap: wrap;
}
.hero-btn {
	padding: 14px 35px;
	font-size: 1rem;
	border-radius: 0;
}
.hero-btn-primary {
	background: var(--color-secondary);
	color: var(--color-dark);
}
.hero-btn-primary:hover {
	background: var(--color-white);
	color: var(--color-primary);
}
.hero-btn-secondary {
	background: transparent;
	color: var(--color-white);
	border: 2px solid var(--color-secondary);
}
.hero-btn-secondary:hover {
	background: var(--color-secondary);
	color: var(--color-dark);
}

/* ==========================================================================
   CATEGORY SHOWCASE (POINTED MUGHAL ARCH STYLE)
   ========================================================================== */
/* ==========================================
   CATEGORY SHOWCASE - JHAROKHA CARD SECTION
   ========================================== */

.section-categories {
	padding: 80px 0;
	background: linear-gradient(180deg, #fffdf9 0%, #fffaf3 100%);
	overflow: visible;
}

.section-categories .section-header {
	max-width: 760px;
	margin: 0 auto 46px;
	text-align: center;
}

.section-categories .section-title {
	font-family: var(--font-heading);
	font-size: clamp(2.3rem, 4vw, 4.2rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #6f1532;
	margin: 0;
}

.section-categories .section-subtitle {
	max-width: 620px;
	margin: 0 auto;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-text-light, #7c7063);
}

.section-categories .ornament-divider {
	color: #c99931 !important;
	letter-spacing: 2px;
	margin: 10px 0 20px !important;
	font-size: 1.2rem !important;
}

/* grid */
.jharokha-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 42px 30px;
	justify-items: center;
	align-items: start;
	overflow: visible;
}

/* card */
.jharokha-category-card {
	width: min(100%, 240px);
	display: block;
	text-decoration: none;
	cursor: pointer;
	outline: none;
	overflow: visible;
}

.jharokha-shell {
	position: relative;
	width: 100%;
	isolation: isolate;
	overflow: visible;
	transition: transform 0.35s ease;
}

/* hover panel behind card:
   top arch + lower square panel connected to same side edges */
.jharokha-shell::before,
.jharokha-shell::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.35s ease,
		transform 0.35s ease,
		box-shadow 0.35s ease,
		filter 0.35s ease;
}

/* upper arch part */
.jharokha-shell::before {
	top: 0;
	aspect-ratio: 78 / 106;
	background: linear-gradient(180deg, #fffefb 0%, #fffdfa 100%);
	clip-path: url(#jharokha-shape);
	-webkit-clip-path: url(#jharokha-shape);
	filter:
		drop-shadow(0 0 18px rgba(212, 175, 55, 0.32))
		drop-shadow(0 10px 18px rgba(0, 0, 0, 0.08));
	transform: translateY(8px) scale(0.985);
	z-index: -3;
}

/* lower rectangular part */
.jharokha-shell::after {
	top: 33%;
	bottom: -18px;
	background: linear-gradient(180deg, #fffefb 0%, #fffdfa 100%);
	border-radius: 0 0 18px 18px;
	box-shadow:
		0 18px 34px rgba(200, 156, 47, 0.50),
		0 6px 16px rgba(0, 0, 0, 0.05),
		inset 0 0 0 1px rgba(200, 156, 47, 0.50);
	transform: translateY(8px) scale(0.985);
	z-index: -4;
}

.jharokha-category-card:hover .jharokha-shell,
.jharokha-category-card:focus-visible .jharokha-shell {
	transform: translateY(-8px);
}

.jharokha-category-card:hover .jharokha-shell::before,
.jharokha-category-card:hover .jharokha-shell::after,
.jharokha-category-card:focus-visible .jharokha-shell::before,
.jharokha-category-card:focus-visible .jharokha-shell::after {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* image frame */
.arch-frame {
	position: relative;
	z-index: 2;
	width: 100%;
	aspect-ratio: 93 / 106;
	margin-bottom: 0;
	box-sizing: border-box;
	background: linear-gradient(180deg, #f2df9c 0%, #c99931 55%, #f6e8b7 100%);
	padding: 2px;
	clip-path: url(#jharokha-shape);
	-webkit-clip-path: url(#jharokha-shape);
	overflow: hidden;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.08));
	transition: filter 0.35s ease, transform 0.35s ease;
}

.arch-gap {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background: #fffdf8;
	padding: 4px;
	clip-path: url(#jharokha-shape);
	-webkit-clip-path: url(#jharokha-shape);
	overflow: hidden;
}

.arch-inner {
	position: relative;
	width: 100%;
	height: 100%;
	background: #efe4d7;
	clip-path: url(#jharokha-shape);
	-webkit-clip-path: url(#jharokha-shape);
	overflow: hidden;
}

.arch-img,
.arch-placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.arch-img {
	object-fit: cover;
	object-position: center center;
	transform: scale(1.01);
	transition: transform 0.65s cubic-bezier(0.2, 0.65, 0.2, 1);
}

.arch-placeholder {
	background: linear-gradient(135deg, #d8c4ab 0%, #f1e7db 45%, #b88e62 100%);
}

.jharokha-category-card:hover .arch-frame,
.jharokha-category-card:focus-visible .arch-frame {
	filter:
		drop-shadow(0 0 10px rgba(212, 175, 55, 0.28))
		drop-shadow(0 7px 14px rgba(0, 0, 0, 0.08));
}

.jharokha-category-card:hover .arch-img,
.jharokha-category-card:focus-visible .arch-img {
	transform: scale(1.08);
}

/* content under image */
.jharokha-content {
	position: relative;
	z-index: 2;
	padding: 14px 14px 0;
	min-height: 92px;
	text-align: center;
}

.jharokha-divider {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #c99931;
	margin: 0 0 10px;
}

.jharokha-divider::before,
.jharokha-divider::after {
	content: "";
	width: 56px;
	max-width: 28%;
	height: 1px;
	background: currentColor;
	opacity: 0.75;
}

.jharokha-divider .icon {
	font-size: 0.92rem;
	line-height: 1;
}

.jharokha-category-card .category-info {
	text-align: center;
}

.jharokha-category-card .category-name {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 1.5vw, 1.65rem);
	font-weight: 400;
	line-height: 1.08;
	color: #2f2925;
	margin: 0 0 6px;
	transition: color 0.3s ease;
}

.jharokha-category-card .product-count {
	font-family: var(--font-body);
	font-size: 0.98rem;
	font-weight: 300;
	line-height: 1.2;
	color: #7c7063;
	margin: 0;
}

.jharokha-category-card:hover .category-name,
.jharokha-category-card:focus-visible .category-name {
	color: #6f1532;
}

/* responsive */
@media (max-width: 1199px) {
	.jharokha-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.section-categories {
		padding: 60px 0;
	}

	.section-categories .section-header {
		margin-bottom: 34px;
	}

	.jharokha-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 20px;
	}

	.jharokha-category-card {
		width: min(100%, 215px);
	}

	.jharokha-content {
		padding: 12px 10px 0;
		min-height: 84px;
	}

	.jharokha-shell::after {
		bottom: -14px;
	}
}

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

	.jharokha-category-card {
		width: min(100%, 250px);
	}

	.jharokha-shell::after {
		top: 34%;
	}
}
/* ==========================================================================
   PRODUCT CARDS
   ========================================================================== */
.products-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px;
}
.section-featured {
	padding: 80px 0;
	background: var(--color-white);
}
.no-products-msg {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--color-text-light);
}
.product-card {
	border: 1px solid #eee;
	background: var(--color-white);
	border-radius: 4px;
	overflow: hidden;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
	position: relative;
}
.product-card:hover {
	box-shadow: 0 8px 25px rgba(0,0,0,0.08);
	transform: translateY(-3px);
}
.product-card-image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--color-light);
}
.product-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.product-card:hover .product-card-image img {
	transform: scale(1.08);
}
.product-card-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 3rem;
	color: var(--color-text-light);
}
.product-badge {
	position: absolute;
	top: 10px;
	padding: 4px 10px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 2px;
	z-index: 2;
}
.metal-badge {
	left: 10px;
	background: var(--color-secondary);
	color: var(--color-dark);
}
.sale-badge {
	right: 10px;
	background: var(--color-accent);
	color: var(--color-white);
}
.wishlist-btn {
	position: absolute;
	bottom: 10px;
	right: 10px;
	background: rgba(255,255,255,0.85);
	border: none;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1rem;
	color: var(--color-primary);
	z-index: 2;
	transition: all 0.3s;
}
.wishlist-btn:hover {
	background: var(--color-primary);
	color: var(--color-white);
}
.product-card-info {
	padding: 15px;
}
.product-card-title {
	font-size: 1rem;
	margin-bottom: 8px;
	font-weight: 600;
}
.product-card-title a {
	color: var(--color-dark);
}
.product-card-title a:hover {
	color: var(--color-primary);
}
.product-card-price {
	margin-bottom: 8px;
	font-size: 1.05rem;
}
.price-current {
	font-weight: 700;
	color: var(--color-primary);
}
.price-original {
	text-decoration: line-through;
	color: var(--color-text-light);
	margin-right: 8px;
	font-size: 0.9rem;
}
.price-sale {
	font-weight: 700;
	color: var(--color-accent);
}
.product-card-meta {
	display: flex;
	gap: 12px;
	font-size: 0.82rem;
	color: var(--color-text-light);
	margin-bottom: 8px;
}
.meta-purity {
	background: var(--color-light);
	padding: 2px 8px;
	border-radius: 3px;
	font-weight: 600;
	color: var(--color-primary);
}
.product-availability {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 3px 8px 3px 18px;
	border-radius: 3px;
	margin-bottom: 10px;
	position: relative;
}
.product-availability::before {
	content: '';
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.95;
}
.avail-instock { background: #e6f9e6; color: #27ae60; }
.avail-outofstock { background: #fde8e8; color: #c0392b; }
.avail-coming { background: #fef9e7; color: #f39c12; }
.avail-default { background: var(--color-light); color: var(--color-text-light); }
.product-card-actions {
	display: flex;
	gap: 8px;
	align-items: center;
}
.btn-view-details {
	flex: 1;
	text-align: center;
	padding: 9px 15px;
	font-size: 0.82rem;
	background: var(--color-primary);
	color: var(--color-white);
}
.btn-view-details:hover {
	background: var(--color-secondary);
	color: var(--color-dark);
}
.btn-whatsapp-inquiry {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #25D366;
	color: var(--color-white);
	border-radius: 50%;
	font-size: 1.2rem;
	transition: transform 0.3s;
}
.btn-whatsapp-inquiry:hover {
	transform: scale(1.1);
	color: var(--color-white);
}

/* ==========================================================================
   GOLD & SILVER SPLIT
   ========================================================================== */
.section-split {
	padding: 0;
}
.split-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.split-card {
	position: relative;
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}
.split-gold {
	background: linear-gradient(135deg, #D4AF37 0%, #b8941e 50%, #7a6311 100%);
}
.split-silver {
	background: linear-gradient(135deg, #C0C0C0 0%, #a8a8a8 50%, #6e6e6e 100%);
}
.split-card::before {
	content: "";
	position: absolute;
	inset: -4%;
	background: inherit;
	background-size: cover;
	background-position: center;
	transform: scale(1);
	transition: transform 0.55s ease;
	z-index: 0;
}
.split-card:hover::before {
	transform: scale(1.08);
}
.split-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.35);
	transition: background 0.3s;
}
.split-card:hover .split-overlay {
	background: rgba(0,0,0,0.5);
}
.split-content {
	position: relative;
	z-index: 1;
	padding: 40px;
	color: var(--color-white);
}
.split-content h2 {
	font-family: var(--font-heading);
	color: var(--color-white);
	font-size: 2rem;
	margin-bottom: 15px;
}
.split-content p {
	color: rgba(255,255,255,0.85);
	margin-bottom: 25px;
}
.split-btn {
	background: var(--color-white);
	color: var(--color-dark);
	padding: 12px 30px;
}
.split-btn:hover {
	background: var(--color-secondary);
	color: var(--color-dark);
}

/* ==========================================================================
   NEW ARRIVALS CAROUSEL
   ========================================================================== */
.section-new-arrivals {
	padding: 80px 0;
	background: var(--color-light);
}
.carousel-wrapper {
	position: relative;
}
.carousel-track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 10px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track .product-card {
	min-width: 270px;
	flex-shrink: 0;
}
.carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: var(--color-primary);
	color: var(--color-white);
	border: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 1rem;
	cursor: pointer;
	z-index: 10;
	transition: background 0.3s;
}
.carousel-arrow:hover {
	background: var(--color-secondary);
	color: var(--color-dark);
}
.carousel-prev { left: -15px; }
.carousel-next { right: -15px; }

/* ==========================================================================
   ABOUT / TRUST
   ========================================================================== */
.section-about-trust {
	padding: 80px 0;
	background: var(--color-white);
}
.about-trust-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: center;
}
.about-image-placeholder {
	width: 100%;
	height: 400px;
	background: linear-gradient(135deg, var(--color-light), #e0d9cf);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 5rem;
	color: var(--color-secondary);
	border-radius: 4px;
}
.about-content .section-title {
	text-align: left;
}
.about-content p {
	color: var(--color-text);
	margin-bottom: 25px;
	line-height: 1.8;
}
.trust-badges {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	margin-bottom: 30px;
}
.trust-badge {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	background: var(--color-light);
	border-radius: 4px;
}
.trust-badge i {
	font-size: 1.5rem;
	color: var(--color-secondary);
}
.trust-badge span {
	font-weight: 600;
	font-size: 0.9rem;
}

/* ==========================================================================
   WHY CHOOSE US
   ========================================================================== */
.section-why-choose {
	padding: 80px 0;
	background: var(--color-light);
}
.features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px;
}
.feature-box {
	text-align: center;
	padding: 35px 20px;
	background: var(--color-white);
	border-radius: 4px;
	transition: box-shadow 0.3s, transform 0.3s;
}
.feature-box:hover {
	box-shadow: 0 8px 25px rgba(0,0,0,0.08);
	transform: translateY(-5px);
}
.feature-box i {
	font-size: 2.5rem;
	color: var(--color-secondary);
	margin-bottom: 18px;
}
.feature-box h3 {
	font-size: 1.1rem;
	margin-bottom: 10px;
}
.feature-box p {
	font-size: 0.9rem;
	color: var(--color-text-light);
	line-height: 1.6;
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.section-testimonials {
	padding: 80px 0;
	background: var(--color-dark);
	color: var(--color-white);
}
.section-testimonials .section-title {
	color: var(--color-white);
}
.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
}
.testimonial-card {
	background: rgba(255,255,255,0.05);
	padding: 30px;
	border-radius: 4px;
	border: 1px solid rgba(212,175,55,0.2);
	transition: transform 0.3s;
}
.testimonial-card:hover {
	transform: translateY(-3px);
}
.testimonial-stars {
	margin-bottom: 15px;
	color: var(--color-secondary);
	font-size: 0.95rem;
}
.testimonial-stars i { margin-right: 2px; }
.testimonial-text {
	font-style: italic;
	color: rgba(255,255,255,0.85);
	line-height: 1.7;
	margin-bottom: 18px;
}
.testimonial-name {
	font-family: var(--font-heading);
	color: var(--color-secondary);
	margin-bottom: 3px;
}
.testimonial-location {
	font-size: 0.85rem;
	color: rgba(255,255,255,0.5);
}

/* ==========================================================================
   INSTAGRAM CTA
   ========================================================================== */
.section-instagram {
	padding: 80px 0;
	background: var(--color-white);
}
.instagram-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
}
.instagram-item {
	position: relative;
	aspect-ratio: 1;
	display: block;
	overflow: hidden;
	border-radius: 4px;
}
.instagram-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--color-light), #e0d9cf);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: var(--color-text-light);
}
.instagram-hover {
	position: absolute;
	inset: 0;
	background: rgba(128,0,32,0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	font-size: 1.5rem;
	opacity: 0;
	transition: opacity 0.3s;
}
.instagram-item:hover .instagram-hover {
	opacity: 1;
}

/* ==========================================================================
   CONTACT CTA BANNER
   ========================================================================== */
.section-contact-cta {
	position: relative;
	padding: 100px 0;
	background: linear-gradient(135deg, var(--color-primary) 0%, #4a0011 100%);
	background-attachment: fixed;
	text-align: center;
}
.contact-cta-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.4);
}
.contact-cta-content {
	position: relative;
	z-index: 1;
}
.contact-cta-content h2 {
	font-family: var(--font-heading);
	color: var(--color-white);
	font-size: 2.2rem;
	margin-bottom: 12px;
}
.contact-cta-content p {
	color: rgba(255,255,255,0.85);
	margin-bottom: 30px;
	font-size: 1.05rem;
}
.contact-cta-buttons {
	display: flex;
	gap: 15px;
	justify-content: center;
	flex-wrap: wrap;
}
.cta-btn-directions {
	background: var(--color-secondary);
	color: var(--color-dark);
}
.cta-btn-directions:hover {
	background: var(--color-white);
	color: var(--color-dark);
}
.cta-btn-whatsapp {
	background: #25D366;
	color: var(--color-white);
}
.cta-btn-whatsapp:hover {
	background: #1ebe57;
	color: var(--color-white);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
	background: var(--color-dark);
	color: rgba(255,255,255,0.8);
}
.footer-top {
	padding: 60px 0 40px;
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.5fr;
	gap: 40px;
}
.footer-heading {
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: 1.2rem;
	margin-bottom: 20px;
}
.footer-brand .footer-site-title a {
	color: var(--color-secondary);
	font-family: var(--font-heading);
	font-size: 1.5rem;
}
.footer-about-text {
	margin-bottom: 18px;
}
.footer-socials a {
	color: rgba(255,255,255,0.6);
	font-size: 1.2rem;
	margin-right: 12px;
	transition: color 0.3s;
}
.footer-socials a:hover {
	color: var(--color-secondary);
}
.footer-links ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.footer-links ul li {
	margin-bottom: 8px;
}
.footer-links ul li a {
	color: rgba(255,255,255,0.7);
	font-size: 0.95rem;
}
.footer-links ul li a:hover {
	color: var(--color-secondary);
}
.contact-info-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.contact-info-list li {
	margin-bottom: 12px;
	display: flex;
	gap: 12px;
	font-size: 0.95rem;
	align-items: flex-start;
}
.contact-info-list li i {
	color: var(--color-secondary);
	margin-top: 4px;
}
.contact-info-list li a {
	color: rgba(255,255,255,0.7);
}
.contact-info-list li a:hover {
	color: var(--color-secondary);
}
.footer-bottom {
	padding: 20px 0;
	border-top: 1px solid rgba(255,255,255,0.1);
	font-size: 0.85rem;
	text-align: center;
}
.site-info a {
	color: var(--color-secondary);
}

/* Floating WhatsApp */
.floating-whatsapp {
	position: fixed;
	bottom: 25px;
	right: 25px;
	width: 60px;
	height: 60px;
	background: #25D366;
	color: var(--color-white);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
	z-index: 9998;
	transition: transform 0.3s;
}
.floating-whatsapp:hover {
	transform: scale(1.1);
	color: var(--color-white);
}

/* Back to Top */
.back-to-top {
	position: fixed;
	bottom: 95px;
	right: 30px;
	width: 45px;
	height: 45px;
	background: var(--color-primary);
	color: var(--color-white);
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
	z-index: 9998;
}
.back-to-top.show {
	opacity: 1;
	visibility: visible;
}
.back-to-top:hover {
	background: var(--color-secondary);
	color: var(--color-dark);
}

/* ==========================================================================
   FADE IN ANIMATIONS
   ========================================================================== */
.fade-in-section {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-section.visible {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger fade-in children (used with JS transitionDelay) */
.fade-in-section .products-grid > *,
.fade-in-section .features-grid > *,
.fade-in-section .team-grid > *,
.fade-in-section .testimonials-grid > *,
.fade-in-section .category-grid > *,
.fade-in-section .instagram-grid > *,
.fade-in-section .values-grid > *,
.fade-in-section .counter-grid > *,
.fade-in-section .cert-grid > * {
	opacity: 0;
	transition: opacity 0.6s ease;
}
.fade-in-section.visible .products-grid > *,
.fade-in-section.visible .features-grid > *,
.fade-in-section.visible .team-grid > *,
.fade-in-section.visible .testimonials-grid > *,
.fade-in-section.visible .category-grid > *,
.fade-in-section.visible .instagram-grid > *,
.fade-in-section.visible .values-grid > *,
.fade-in-section.visible .counter-grid > *,
.fade-in-section.visible .cert-grid > * {
	opacity: 1;
}

/* ==========================================================================
   JEWELLERY ARCHIVE (COLLECTION)
   ========================================================================== */
.archive-jewellery .archive-hero {
	position: relative;
	padding: 90px 0 70px;
	background: linear-gradient(135deg, var(--color-primary) 0%, #4a0011 55%, var(--color-dark) 100%);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.archive-jewellery .archive-hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.35);
}
.archive-jewellery .archive-hero-inner {
	position: relative;
	z-index: 1;
	color: var(--color-white);
	text-align: left;
}
.archive-jewellery .archive-title {
	font-family: var(--font-heading);
	color: var(--color-white);
	font-size: 2.6rem;
	margin: 10px 0 8px;
}
.archive-jewellery .archive-count {
	color: rgba(255,255,255,0.85);
	margin: 0;
}
.archive-jewellery .archive-term-desc {
	margin-top: 16px;
	max-width: 800px;
	color: rgba(255,255,255,0.85);
}

.janki-breadcrumb a {
	color: rgba(255,255,255,0.9);
	text-decoration: none;
}
.janki-breadcrumb a:hover {
	color: var(--color-secondary);
}
.breadcrumb-inner {
	font-size: 0.92rem;
}
.crumb-sep {
	color: rgba(255,255,255,0.55);
	margin: 0 8px;
}
.crumb-current {
	color: var(--color-secondary);
	font-weight: 600;
}

.archive-body {
	padding: 50px 0 90px;
	background: var(--color-light);
}
.archive-layout {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 25px;
	align-items: start;
}

.archive-filters-trigger {
	display: none;
	background: var(--color-primary);
	color: var(--color-white);
	border: none;
	padding: 12px 16px;
	border-radius: 4px;
	font-weight: 600;
	width: 100%;
	margin-bottom: 10px;
	cursor: pointer;
}
.archive-filters-trigger:hover {
	background: var(--color-secondary);
	color: var(--color-dark);
}

.archive-sidebar {
	background: var(--color-white);
	border: 1px solid #eee;
	border-radius: 6px;
	padding: 18px;
	position: sticky;
	top: 90px;
}
.archive-sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}
.archive-sidebar-header h2 {
	font-size: 1.1rem;
	margin: 0;
}
.archive-drawer-close {
	display: none;
	background: none;
	border: none;
	font-size: 1.3rem;
	cursor: pointer;
	color: var(--color-dark);
}

.filter-group {
	padding: 14px 0;
	border-top: 1px solid #f0f0f0;
}
.filter-group:first-child {
	border-top: none;
	padding-top: 6px;
}
.filter-group h3 {
	font-size: 0.95rem;
	margin: 0 0 10px;
	color: var(--color-primary);
}
.filter-search {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-family: var(--font-body);
}
.filter-options {
	display: grid;
	gap: 8px;
}
.filter-check {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 0.92rem;
	color: var(--color-text);
}
.filter-check input {
	transform: translateY(-1px);
}
.filter-toggle {
	display: flex;
	gap: 10px;
	align-items: center;
	font-weight: 600;
	color: var(--color-text);
}

.price-labels {
	display: flex;
	justify-content: space-between;
	font-size: 0.9rem;
	color: var(--color-text-light);
	margin-bottom: 8px;
}
.price-sliders input[type="range"] {
	width: 100%;
	margin: 8px 0 0;
}

.filter-actions {
	display: flex;
	gap: 10px;
	padding-top: 15px;
}
.filter-actions .button {
	padding: 10px 16px;
	font-size: 0.85rem;
}
.filter-actions #janki-clear-filters {
	background: #f2f2f2;
	color: var(--color-dark);
}
.filter-actions #janki-clear-filters:hover {
	background: #e8e8e8;
}

.archive-content {
	min-width: 0;
}
.archive-topbar {
	display: flex;
	justify-content: space-between;
	gap: 15px;
	align-items: center;
	background: var(--color-white);
	border: 1px solid #eee;
	border-radius: 6px;
	padding: 12px;
	margin-bottom: 14px;
}
.topbar-right {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.topbar-field {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 0.9rem;
	color: var(--color-text-light);
}
.topbar-field select {
	padding: 8px 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: var(--color-white);
	font-family: var(--font-body);
}

.view-toggle {
	display: inline-flex;
	gap: 6px;
}
.view-btn {
	border: 1px solid #ddd;
	background: var(--color-white);
	width: 38px;
	height: 38px;
	border-radius: 4px;
	cursor: pointer;
	color: var(--color-dark);
}
.view-btn.is-active {
	border-color: var(--color-primary);
	background: rgba(128,0,32,0.08);
	color: var(--color-primary);
}

.active-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.filter-chip {
	border: 1px solid rgba(212,175,55,0.35);
	background: rgba(212,175,55,0.10);
	color: var(--color-dark);
	border-radius: 999px;
	padding: 7px 10px;
	cursor: pointer;
	font-size: 0.85rem;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.filter-chip:hover {
	background: rgba(212,175,55,0.18);
}
.chip-x {
	font-weight: 800;
	opacity: 0.75;
}

.archive-notice {
	margin: 0 0 12px;
	padding: 12px 14px;
	border-radius: 6px;
	border: 1px solid rgba(243,156,18,0.35);
	background: rgba(243,156,18,0.10);
	color: #8a5a00;
}

/* Loading skeletons */
.products-grid.is-loading {
	opacity: 0.85;
}
.skeleton-card {
	border: 1px solid #eee;
	background: var(--color-white);
	border-radius: 4px;
	overflow: hidden;
}
.skeleton-img {
	aspect-ratio: 1;
	background: linear-gradient(90deg, #f2f2f2 0%, #e9e9e9 50%, #f2f2f2 100%);
	background-size: 200% 100%;
	animation: shimmer 1.2s infinite linear;
}
.skeleton-lines {
	padding: 15px;
	display: grid;
	gap: 10px;
}
.skeleton-line {
	height: 12px;
	border-radius: 6px;
	background: linear-gradient(90deg, #f2f2f2 0%, #e9e9e9 50%, #f2f2f2 100%);
	background-size: 200% 100%;
	animation: shimmer 1.2s infinite linear;
}
.skeleton-line.w-80 { width: 80%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-40 { width: 40%; }
@keyframes shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Pagination */
.archive-pagination ul {
	list-style: none;
	padding: 0;
	margin: 25px 0 0;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}
.archive-pagination li a,
.archive-pagination li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 6px;
	border: 1px solid #ddd;
	background: var(--color-white);
	color: var(--color-dark);
	text-decoration: none;
}
.archive-pagination li span.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}
.archive-pagination li a:hover {
	background: var(--color-secondary);
	border-color: var(--color-secondary);
	color: var(--color-dark);
}

/* Empty state */
.archive-empty {
	grid-column: 1 / -1;
	background: var(--color-white);
	border: 1px solid #eee;
	border-radius: 6px;
	padding: 35px;
	text-align: center;
	color: var(--color-text-light);
}
.archive-empty h3 {
	color: var(--color-primary);
	margin-bottom: 10px;
}

/* List view (uses same cards, different layout) */
#janki-products-grid.is-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
#janki-products-grid.is-list .product-card {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 0;
}
#janki-products-grid.is-list .product-card-image {
	aspect-ratio: auto;
}
#janki-products-grid.is-list .product-card-image img {
	height: 100%;
}

/* Off-canvas drawer overlay */
.archive-drawer-overlay.is-visible {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.55);
	z-index: 9997;
}
.no-scroll {
	overflow: hidden;
}

/* ==========================================================================
   SINGLE JEWELLERY (PRODUCT DETAIL)
   ========================================================================== */
.single-product-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 35px;
	padding: 50px 0 10px;
	align-items: start;
}
.single-top {
	padding-top: 30px;
}

/* Gallery */
.product-gallery .gallery-main {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid #eee;
	background: var(--color-white);
}
.zoom-surface {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	cursor: zoom-in;
	background-size: 180%;
	background-position: 50% 50%;
}
.zoom-surface img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 0.18s ease;
}
.zoom-surface.is-zooming img {
	opacity: 0;
}
#janki-main-image.is-fading {
	opacity: 0.4;
}
.gallery-lightbox-hint {
	position: absolute;
	bottom: 12px;
	right: 12px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.9);
	cursor: pointer;
	color: var(--color-primary);
}
.gallery-lightbox-hint:hover {
	background: var(--color-secondary);
	color: var(--color-dark);
}
.gallery-thumbs {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	overflow-x: auto;
	padding-bottom: 6px;
}
.thumb-btn {
	border: 2px solid transparent;
	border-radius: 6px;
	padding: 0;
	background: transparent;
	cursor: pointer;
	flex: 0 0 auto;
}
.thumb-btn img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}
.thumb-btn.is-active {
	border-color: var(--color-secondary);
}

/* Lightbox */
.janki-lightbox .lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.8);
	z-index: 9999;
}
.janki-lightbox .lightbox-inner {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.janki-lightbox .lightbox-img {
	max-width: min(92vw, 980px);
	max-height: 85vh;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.45);
	background: #111;
}
.lightbox-close {
	position: fixed;
	top: 20px;
	right: 20px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.9);
	cursor: pointer;
	z-index: 10001;
}
.lightbox-nav {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.9);
	cursor: pointer;
	z-index: 10001;
}
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
.lightbox-nav:hover,
.lightbox-close:hover {
	background: var(--color-secondary);
	color: var(--color-dark);
}

/* Details */
.product-title {
	font-family: var(--font-heading);
	font-size: 2rem;
	color: var(--color-primary);
	margin-bottom: 8px;
}
.product-sku {
	color: var(--color-text-light);
	margin-bottom: 14px;
}
.product-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}
.badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	border: 1px solid rgba(212,175,55,0.35);
	background: rgba(212,175,55,0.10);
	color: var(--color-dark);
}
.badge-metal { border-color: rgba(212,175,55,0.45); }
.badge-purity { border-color: rgba(128,0,32,0.25); background: rgba(128,0,32,0.08); color: var(--color-primary); }

.product-price-block {
	background: var(--color-white);
	border: 1px solid #eee;
	border-radius: 6px;
	padding: 16px;
	margin-bottom: 14px;
}
.product-price-block .price-row {
	display: flex;
	gap: 12px;
	align-items: baseline;
}
.product-price-block .price-current,
.product-price-block .price-sale {
	font-size: 1.7rem;
	font-weight: 800;
	color: var(--color-primary);
}
.product-price-block .price-sale { color: var(--color-accent); }
.product-price-block .price-original {
	font-size: 1rem;
	color: var(--color-text-light);
	text-decoration: line-through;
}
.making-charges {
	margin-top: 10px;
	color: var(--color-text);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.making-type {
	color: var(--color-text-light);
	font-style: normal;
}
.price-note {
	margin: 10px 0 0;
	color: var(--color-text-light);
	font-size: 0.9rem;
}
.price-breakdown {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	font-size: 0.92rem;
	color: var(--color-text);
	border-top: 1px dashed #e5e5e5;
	padding-top: 10px;
}
.price-breakdown li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}
.price-breakdown li strong {
	font-weight: 700;
	color: var(--color-dark);
}
.price-fallback-note {
	margin: 10px 0 0;
	font-size: 0.88rem;
	color: var(--color-accent);
}
.product-meta-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 10px;
}
.product-weight {
	color: var(--color-text);
	font-weight: 600;
}
.product-weight i { color: var(--color-secondary); margin-right: 6px; }

.product-certs {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
	color: var(--color-text-light);
}
.cert-item i { color: var(--color-secondary); margin-right: 6px; }

.product-actions {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	margin-top: 16px;
}
.action-btn {
	padding: 12px 14px;
	text-align: center;
	font-size: 0.9rem;
}
.whatsapp-btn { background: #25D366; color: var(--color-white); }
.whatsapp-btn:hover { background: #1ebe57; color: var(--color-white); }
.call-btn { background: var(--color-primary); color: var(--color-white); }
.call-btn:hover { background: var(--color-secondary); color: var(--color-dark); }
.share-btn { background: #f2f2f2; color: var(--color-dark); }
.share-btn:hover { background: #e8e8e8; }

.share-panel {
	margin-top: 10px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	background: var(--color-white);
	border: 1px solid #eee;
	border-radius: 6px;
	padding: 12px;
}
.share-link {
	border: 1px solid #ddd;
	background: var(--color-white);
	border-radius: 6px;
	padding: 10px 12px;
	cursor: pointer;
	text-align: left;
}
.share-link:hover {
	border-color: var(--color-secondary);
	background: rgba(212,175,55,0.10);
}

.trust-row {
	margin-top: 16px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.trust-mini {
	background: var(--color-white);
	border: 1px solid #eee;
	border-radius: 6px;
	padding: 10px;
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	color: var(--color-text);
	font-weight: 600;
}
.trust-mini i { color: var(--color-secondary); }

/* Tabs */
.tabs-wrapper {
	padding: 30px 0 10px;
}
.tab-nav {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
}
.tab-btn {
	border: 1px solid #ddd;
	background: var(--color-white);
	border-radius: 999px;
	padding: 10px 14px;
	cursor: pointer;
	font-weight: 700;
	color: var(--color-dark);
}
.tab-btn.is-active {
	border-color: var(--color-primary);
	background: rgba(128,0,32,0.08);
	color: var(--color-primary);
}
.tab-pane {
	display: none;
	padding: 18px 0;
}
.tab-pane.is-active { display: block; }
.spec-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-white);
	border: 1px solid #eee;
	border-radius: 6px;
	overflow: hidden;
}
.spec-table th, .spec-table td {
	padding: 12px 14px;
	border-bottom: 1px solid #f2f2f2;
	text-align: left;
	font-size: 0.95rem;
}
.spec-table th {
	width: 220px;
	color: var(--color-primary);
	background: #faf7f7;
}
.pricing-breakup {
	background: var(--color-white);
	border: 1px solid #eee;
	border-radius: 6px;
	padding: 16px;
}
.pricing-note { color: var(--color-text-light); margin-bottom: 10px; }
.pricing-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pricing-list li { display: flex; justify-content: space-between; gap: 10px; }

/* Related / Recently viewed */
.related-products,
.recently-viewed {
	padding: 40px 0 10px;
}

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.section-spacing { padding: 70px 0; }
.page-hero {
	position: relative;
	padding: 90px 0;
	background: linear-gradient(135deg, var(--color-primary) 0%, #4a0011 55%, var(--color-dark) 100%);
	color: var(--color-white);
}
.page-hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.35);
}
.page-hero-content {
	position: relative;
	z-index: 1;
}
.page-hero h1 {
	color: var(--color-white);
	margin: 10px 0 0;
	font-size: 2.4rem;
}

.about-story-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 35px;
	align-items: center;
}
.story-image-placeholder {
	height: 420px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--color-light), #ddd2c4);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 5rem;
	color: var(--color-secondary);
}
.story-subtitle {
	color: var(--color-secondary);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.story-content blockquote {
	margin: 15px 0 0;
	padding-left: 15px;
	border-left: 4px solid var(--color-secondary);
	color: var(--color-primary);
	font-style: italic;
}

.values-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.value-card {
	background: var(--color-white);
	border: 1px solid #eee;
	padding: 26px 15px;
	text-align: center;
	border-radius: 8px;
}
.value-card i {
	font-size: 2rem;
	color: var(--color-secondary);
	margin-bottom: 8px;
}

.about-counter {
	background: var(--color-dark);
	color: var(--color-white);
	padding: 65px 0;
}
.counter-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.counter-item {
	text-align: center;
}
.counter-item .janki-counter {
	display: block;
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--color-secondary);
}
.counter-item small {
	color: rgba(255,255,255,0.8);
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.team-card {
	background: var(--color-white);
	border: 1px solid #eee;
	padding: 20px;
	text-align: center;
	border-radius: 8px;
}
.team-photo {
	width: 84px;
	height: 84px;
	margin: 0 auto 10px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-light);
	color: var(--color-primary);
	font-size: 2rem;
}

.cert-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.cert-card {
	border: 1px dashed #d2c1a0;
	border-radius: 8px;
	padding: 35px 10px;
	text-align: center;
	font-weight: 700;
	background: #fffaf2;
}

.about-cta {
	padding: 80px 0;
	background: linear-gradient(135deg, var(--color-primary), #4a0011);
	color: var(--color-white);
}
.about-cta-content { text-align: center; }
.about-cta-content h2 { color: var(--color-white); }
.about-cta-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 14px;
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.info-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.info-card {
	background: var(--color-white);
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 22px;
	text-align: center;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.info-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}
.info-card i {
	font-size: 1.8rem;
	color: var(--color-secondary);
	margin-bottom: 8px;
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
}
.contact-form-wrap,
.contact-map-wrap {
	background: var(--color-white);
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 22px;
}
.form-row { margin-bottom: 12px; }
.form-row label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}
.form-row input,
.form-row textarea,
.form-row select {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-family: var(--font-body);
}
.field-error {
	display: block;
	color: #c0392b;
	font-size: 0.82rem;
	min-height: 1em;
}
.hp-field {
	position: absolute;
	left: -9999px;
}
.contact-submit-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.btn-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255,255,255,0.35);
	border-top-color: #fff;
	border-radius: 50%;
	display: none;
	animation: spin 1s linear infinite;
}
.contact-submit-btn.is-loading .btn-spinner { display: inline-block; }
.contact-submit-btn.is-loading { opacity: 0.85; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Gold Spinner (global loading) */
@keyframes goldSpin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
.gold-spinner {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(212, 175, 55, 0.35);
	border-top-color: var(--color-secondary);
	animation: goldSpin 0.9s linear infinite;
	display: inline-block;
}

.contact-response {
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 0.92rem;
}
.contact-response.is-success {
	background: #e8f8ef;
	color: #1e7f45;
}
.contact-response.is-error {
	background: #fdeeee;
	color: #b63737;
}
.contact-map-wrap iframe {
	width: 100%;
	height: 100%;
	min-height: 500px;
	border: 0;
	border-radius: 6px;
}

.hours-card {
	background: var(--color-white);
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 22px;
}
.hours-header {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: center;
	margin-bottom: 10px;
}
.store-status {
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	background: #f2f2f2;
}
.store-status.is-open {
	background: #e8f8ef;
	color: #1e7f45;
}
.store-status.is-closed {
	background: #fdeeee;
	color: #b63737;
}
.hours-card ul { list-style: none; margin: 0; padding: 0; }
.hours-card li {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #f3f3f3;
}

.faq-item {
	border: 1px solid #eee;
	border-radius: 8px;
	margin-bottom: 10px;
	overflow: hidden;
	background: var(--color-white);
}
.faq-question {
	width: 100%;
	border: none;
	background: var(--color-white);
	text-align: left;
	padding: 14px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	font-weight: 700;
}
.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	padding: 0 16px;
}
.faq-item.is-open .faq-answer {
	max-height: 220px;
	padding-bottom: 14px;
}
.faq-item.is-open .faq-question i {
	transform: rotate(180deg);
}

/* ==========================================================================
   DEFAULT PAGE TEMPLATE
   ========================================================================== */
.default-page-wrap {
	padding: 50px 15px 80px;
}
.default-page-template .page-title {
	margin-bottom: 18px;
}

/* ==========================================================================
   Search Results (#43)
   ========================================================================== */
.search-results-page .archive-hero {
	position: relative;
	padding: 90px 0 70px;
	background: linear-gradient(135deg, var(--color-primary) 0%, #4a0011 55%, var(--color-dark) 100%);
	overflow: hidden;
}
.search-results-page .archive-hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.35);
}
.search-results-page .archive-hero-inner {
	position: relative;
	z-index: 1;
	text-align: left;
	color: var(--color-white);
}
.search-body-inner {
	padding: 60px 15px;
}
.search-no-results {
	max-width: 700px;
	margin: 40px auto;
	padding: 60px 20px;
	background: var(--color-white);
	border: 1px solid #eee;
	border-radius: 8px;
	text-align: center;
}
.search-no-results > i {
	font-size: 4rem;
	color: var(--color-secondary);
	margin-bottom: 25px;
	display: block;
}
.search-no-results h2 {
	font-family: var(--font-heading);
	color: var(--color-primary);
	margin-bottom: 15px;
}
.search-no-results p {
	color: var(--color-text-light);
	margin-bottom: 24px;
}
.search-quick-links {
	margin: 26px 0 24px;
}
.search-quick-links h3 {
	color: var(--color-primary);
	margin-bottom: 12px;
	font-size: 1.1rem;
}
.quick-links-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.quick-link {
	border: 1px solid #eee;
	background: var(--color-white);
	padding: 8px 12px;
	border-radius: 999px;
	color: var(--color-dark);
	font-weight: 700;
	font-size: 0.9rem;
	transition: all 0.2s ease;
}
.quick-link:hover {
	border-color: var(--color-secondary);
	color: var(--color-primary);
	transform: translateY(-2px);
}

/* ==========================================================================
   Custom Scrollbar (#48)
   ========================================================================== */
html { scroll-behavior: smooth; }
* {
	scrollbar-width: thin;
	scrollbar-color: rgba(212,175,55,0.45) rgba(0,0,0,0);
}
*::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
*::-webkit-scrollbar-track {
	background: transparent;
}
*::-webkit-scrollbar-thumb {
	background-color: rgba(212,175,55,0.35);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: content-box;
}

/* ==========================================================================
   Mobile Bottom Bar (Call + WhatsApp)
   ========================================================================== */
.mobile-bottom-bar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: var(--color-white);
	border-top: 1px solid #eee;
	padding: 10px 12px;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
}
.mobile-bottom-bar .bar-link {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 8px;
	font-weight: 800;
	color: var(--color-dark);
	border: 1px solid #eee;
	background: var(--color-white);
	text-transform: uppercase;
	font-size: 0.85rem;
}
.mobile-bottom-bar .bar-link.whatsapp {
	border-color: rgba(37,211,102,0.3);
	background: rgba(37,211,102,0.08);
	color: #1ebe57;
}
.mobile-bottom-bar .bar-link.call {
	border-color: rgba(128,0,32,0.2);
	background: rgba(128,0,32,0.06);
	color: var(--color-primary);
}

/* ==========================================================================
   INDEX / GENERAL
   ========================================================================== */
.posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
	margin: 40px 0;
}
.post-item {
	border: 1px solid #eee;
	border-radius: 4px;
	overflow: hidden;
}
.post-thumbnail img {
	width: 100%;
	height: auto;
}
.post-content {
	padding: 20px;
}
.read-more-link {
	font-weight: 600;
}

/* 404 */
.error-404-container {
	padding: 80px 15px;
	text-align: center;
}
.error-title {
	font-size: 8rem;
	color: var(--color-secondary);
	line-height: 1;
	margin-bottom: 0;
}
.error-subtitle {
	color: var(--color-primary);
	margin-bottom: 20px;
}
.error-desc {
	color: var(--color-text-light);
	margin-bottom: 30px;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}
.error-search-box {
	max-width: 400px;
	margin: 0 auto 30px;
}
.return-home-btn i { margin-right: 8px; }

/* Custom Search Form */
.custom-search-form .search-form-wrap {
	display: flex;
}
.custom-search-form .search-field {
	flex: 1;
	padding: 12px 15px;
	border: 1px solid #ddd;
	border-right: none;
	font-family: var(--font-body);
	outline: none;
}
.custom-search-form .search-submit {
	padding: 12px 20px;
	background: var(--color-primary);
	color: var(--color-white);
	border: 1px solid var(--color-primary);
	cursor: pointer;
}
.custom-search-form .search-submit:hover {
	background: var(--color-secondary);
	color: var(--color-dark);
	border-color: var(--color-secondary);
}