/* 
 * Responsive Styles for Janki Jewellers
 */

/* === Desktop (<=1199px) === */
@media (max-width: 1199px) {
	.container {
		padding: 0 10px;
	}
}

/* ==========================================================================
   Responsive polish layer (non-breaking overrides)
   ========================================================================== */

@media (max-width: 1200px) {
	.section-header { margin-bottom: 38px; }
	.section-categories.section-jharokha-categories,
	.section-featured,
	.section-about-trust,
	.section-why-choose,
	.section-testimonials,
	.section-new-arrivals {
		padding: 64px 0;
	}
}

/* === Tablet / Small Desktop (<=1024px) === */
@media (max-width: 1024px) {
	.header-container { padding: 12px; }
	.site-branding img { max-height: 46px; width: auto; }

	/* Carousel arrows: avoid overlap */
	.carousel-arrow { width: 38px; height: 38px; }
	.carousel-prev { left: 6px; }
	.carousel-next { right: 6px; }

	/* Jharokha categories: cap at 3 columns */
	.section-jharokha-categories .category-grid.janki-arch-grid {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 26px 20px !important;
	}
}

/* === Tablet / Small Desktop (<=991px) === */
@media (max-width: 991px) {
	/* Mobile nav becomes a drawer; desktop stays untouched */
	.nav-overlay.is-visible {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.42);
		backdrop-filter: blur(2px);
		z-index: 9996;
	}
	.main-navigation ul {
		position: fixed;
		top: 0;
		right: 0;
		height: 100vh;
		width: min(88vw, 360px);
		padding: 76px 18px 18px;
		margin: 0;
		display: flex;
		gap: 0;
		flex-direction: column;
		overflow-y: auto;
		box-shadow: -12px 0 30px rgba(0, 0, 0, 0.12);
		transform: translateX(105%);
		transition: transform 0.25s ease;
	}
	.main-navigation.toggled ul {
		display: flex;
		transform: translateX(0);
	}
	.main-navigation ul li a {
		padding: 14px 8px;
		font-size: 1rem;
	}
	.main-navigation ul li.menu-item-has-children > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}
	.main-navigation ul li.menu-item-has-children > a::after {
		content: '▾';
		font-size: 0.95em;
		opacity: 0.7;
	}
	.main-navigation ul li ul {
		display: none;
		position: static;
		padding-left: 10px;
		border-left: 1px solid rgba(0, 0, 0, 0.08);
		margin: 4px 0 8px;
	}
	.main-navigation ul li.submenu-open > ul {
		display: block;
	}

	/* Tap target comfort */
	.button { padding: 12px 22px; }
	.search-toggle-btn { width: 44px; height: 44px; }
	.menu-toggle { width: 44px; height: 44px; }

	/* Products grid: 3 cols */
	.products-grid { grid-template-columns: repeat(3, 1fr); }
}

/* === Large Mobile (<=767px) === */
@media (max-width: 767px) {
	.top-bar-container { flex-direction: column; gap: 8px; text-align: center; }
	.top-bar-left { justify-content: center; gap: 10px 14px; }
	.top-bar-right a { margin: 0 8px; }

	/* Hero typography and spacing */
	.hero-section { min-height: 420px; }
	.hero-title { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.2rem); }
	.hero-subtitle { font-size: 1rem; }
	.hero-buttons { flex-wrap: wrap; gap: 10px; }

	/* Jharokha categories: 2 columns, tighter spacing */
	.section-jharokha-categories .category-grid.janki-arch-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 18px 12px !important;
	}
	.section-jharokha-categories .arch-hover-overlay { display: none !important; }

	/* Featured products */
	.products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.product-card-title { font-size: 0.95rem; }

	/* Split cards */
	.split-card { min-height: 240px; }

	/* Footer spacing */
	.footer-top { padding: 48px 0; }
}

/* === Small Mobile (<=575px) === */
@media (max-width: 575px) {
	.container { padding-left: 10px; padding-right: 10px; }

	/* Ensure content isn’t hidden under bottom bar */
	body { padding-bottom: 62px; }
	.mobile-bottom-bar { display: flex; }
	.floating-whatsapp { display: none; }
	.back-to-top { bottom: 86px; right: 16px; }

	.section-header { margin-bottom: 28px; }
	.section-title-underline { margin-top: 8px; }

	/* Carousel: let it swipe comfortably */
	.carousel-track { scroll-snap-type: x mandatory; }
	.carousel-track .product-card { scroll-snap-align: start; }
}

/* === Mobile (<=480px) === */
@media (max-width: 480px) {
	/* Category cards can go 1 column if too tight */
	.section-jharokha-categories .category-grid.janki-arch-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.jharokha-arch-title { font-size: 1rem; }
	.jharokha-arch-count { font-size: 0.82rem; }

	/* Product cards */
	.products-grid { grid-template-columns: 1fr; }
	.product-card-actions { flex-direction: column; align-items: stretch; }
	.btn-whatsapp-inquiry { width: 100%; height: 42px; border-radius: 10px; }
}

/* === Ultra Small (<=360px) === */
@media (max-width: 360px) {
	.top-bar { font-size: 0.78rem; }
	.section-title { letter-spacing: 0.01em; }
	.button { width: 100%; text-align: center; }
	.hero-buttons { width: 100%; }
	.hero-buttons .button { width: 100%; }
}

@media (hover: none) {
	.section-jharokha-categories .arch-hover-overlay { display: none !important; }
}

/* === Tablet / Small Desktop (<=991px) === */
@media (max-width: 991px) {
	/* Header -> hamburger */
	.header-container {
		flex-wrap: wrap;
	}
	.main-navigation ul {
		display: none;
		flex-direction: column;
		width: 100%;
		background: var(--color-white);
		padding: 15px 0;
		border-top: 1px solid #eee;
	}
	.main-navigation.toggled ul {
		display: flex;
	}
	.menu-toggle {
		display: block;
	}

	/* Products -> 2-3 columns */
	.products-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Archive filters -> off-canvas sidebar */
	.archive-layout {
		grid-template-columns: 1fr;
	}
	.archive-filters-trigger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}
	.archive-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: min(92vw, 360px);
		transform: translateX(-105%);
		transition: transform 0.25s ease;
		z-index: 9998;
		border-radius: 0;
		padding: 16px;
		overflow-y: auto;
	}
	.archive-sidebar.is-open {
		transform: translateX(0);
	}
	.archive-drawer-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.janki-price-ticker {
		font-size: 0.76rem;
	}
	.janki-price-ticker-updated {
		font-size: 0.72rem;
	}
}

/* === Large Mobile (<=767px) === */
@media (max-width: 767px) {
	.category-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.products-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.single-product-layout {
		grid-template-columns: 1fr;
	}
	.split-card {
		min-height: 240px;
	}
	.archive-jewellery .archive-hero {
		padding: 64px 0 44px;
	}

	.janki-price-ticker-track {
		animation-duration: 58s;
	}
}

/* === Tablet (1024px) === */
@media (max-width: 1024px) {
	.products-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.features-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.instagram-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* === Tablet Portrait (768px) === */
@media (max-width: 768px) {
	/* Header */
	.header-container {
		flex-wrap: wrap;
	}
	.main-navigation ul {
		display: none;
		flex-direction: column;
		width: 100%;
		background: var(--color-white);
		padding: 15px 0;
		border-top: 1px solid #eee;
	}
	.main-navigation.toggled ul {
		display: flex;
	}
	.menu-toggle {
		display: block;
	}

	/* Hero */
	.hero-section { min-height: 450px; }
	.hero-title { font-size: 2.2rem; }
	.hero-subtitle { font-size: 1rem; }

	/* Category */
	.category-grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	/* Products */
	.products-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Split */
	.split-grid {
		grid-template-columns: 1fr;
	}
	.split-card { min-height: 280px; }

	/* About */
	.about-trust-grid {
		grid-template-columns: 1fr;
	}
	.about-content .section-title {
		text-align: center;
	}
	.section-title-underline-left {
		margin: 10px auto 20px;
	}

	/* Testimonials */
	.testimonials-grid {
		grid-template-columns: 1fr;
	}

	/* Footer */
	.footer-grid {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.contact-info-list li {
		justify-content: center;
	}

	/* Posts (index) */
	.posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Archive (Collection) */
	.archive-layout {
		grid-template-columns: 1fr;
	}
	.archive-filters-trigger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}
	.archive-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: min(92vw, 360px);
		transform: translateX(-105%);
		transition: transform 0.25s ease;
		z-index: 9998;
		border-radius: 0;
		padding: 16px;
		overflow-y: auto;
	}
	.archive-sidebar.is-open {
		transform: translateX(0);
	}
	.archive-drawer-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.archive-topbar {
		flex-direction: column;
		align-items: stretch;
	}
	.topbar-right {
		justify-content: space-between;
	}
	.products-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	#janki-products-grid.is-list .product-card {
		grid-template-columns: 1fr;
	}

	/* Single product */
	.single-product-layout {
		grid-template-columns: 1fr;
		padding-top: 25px;
	}
	.product-actions {
		grid-template-columns: 1fr;
	}
	.trust-row {
		grid-template-columns: repeat(2, 1fr);
	}
	.tab-nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 12px;
	}
	.tab-btn {
		white-space: nowrap;
		flex: 0 0 auto;
	}
	.janki-lightbox .lightbox-img {
		max-width: 92vw;
		max-height: 75vh;
	}

	/* About / Contact pages */
	.about-story-grid,
	.contact-grid {
		grid-template-columns: 1fr;
	}
	.values-grid,
	.counter-grid,
	.team-grid,
	.cert-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.info-grid {
		grid-template-columns: 1fr;
	}
	.contact-map-wrap iframe {
		min-height: 320px;
	}
}

/* === Mobile (480px) === */
@media (max-width: 480px) {
	.hero-title { font-size: 1.8rem; }
	.hero-buttons { flex-direction: column; align-items: center; }

	.category-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
	.products-grid { grid-template-columns: 1fr; }

	.features-grid {
		grid-template-columns: 1fr;
	}

	.trust-badges {
		grid-template-columns: 1fr;
	}

	.instagram-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.carousel-prev { left: 0; }
	.carousel-next { right: 0; }

	.posts-grid {
		grid-template-columns: 1fr;
	}

	.top-bar-left { flex-direction: column; gap: 5px; }
	.top-bar-container { flex-direction: column; gap: 8px; text-align: center; }

	.values-grid,
	.counter-grid,
	.team-grid,
	.cert-grid {
		grid-template-columns: 1fr;
	}
	.page-hero h1 {
		font-size: 1.9rem;
	}
}

/* === Small Mobile (<=575px) === */
@media (max-width: 575px) {
	/* Replace floating WhatsApp with bottom bar */
	.mobile-bottom-bar {
		display: flex;
	}
	.floating-whatsapp {
		display: none;
	}

	/* Keep back-to-top accessible above bottom bar */
	.back-to-top {
		bottom: 86px;
		right: 16px;
	}

	/* Minimal padding */
	.container {
		padding: 0 10px;
	}

	/* Keep CTAs full width where applicable */
	.button {
		width: 100%;
		text-align: center;
	}

	/* Ticker: condensed (Gold 22K + Silver only), no marquee */
	.janki-price-ticker .janki-ticker-item:not(.janki-ticker-keep) {
		display: none;
	}
	.janki-price-ticker-track {
		animation: none;
	}
	.janki-price-ticker-marquee {
		overflow: visible;
	}
	.janki-price-ticker-segment {
		flex-wrap: wrap;
		justify-content: center;
		white-space: normal;
		padding-right: 0;
		text-align: center;
		gap: 4px 8px;
	}
	.category-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px;
	}
	.archive-jewellery .archive-hero {
		padding: 54px 0 34px;
	}
}
/* --- Jharokha Category Arch Responsive --- */

/* Tablet / Small Desktop (<=991px) */
@media (max-width: 991px) {
	.jharokha-grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

/* Tablet Portrait (<=768px) */
@media (max-width: 768px) {
	.jharokha-grid {
		gap: 30px 20px;
	}
}

/* Mobile (<=575px) */
@media (max-width: 575px) {
	.jharokha-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 25px 12px;
	}
	
	.jharokha-category-card .category-name {
		font-size: 1.1rem;
	}
	
	.jharokha-category-card .arch-container {
		border-width: 1px; /* Thinner gold border on tiny screens */
	}
}