/**
 * LOVSETTI product catalog styles: Furniture, Outdoor, and Products pages.
 * Enqueued only on those three pages (see lovsetti_theme_catalog_assets()
 * in functions.php). Product Detail keeps its own product.css (Stage 6).
 */

/* ===== Catalog hero ===== */
.ls-catalog-hero {
	padding-block: var(--ls-space-8) var(--ls-space-6);
	text-align: center;
}

.ls-catalog-hero .ls-container-narrow {
	margin-inline: auto;
}

.ls-catalog-hero__title {
	margin-bottom: var(--ls-space-3);
}

.ls-catalog-hero__tagline {
	font-size: 18px;
	color: var(--ls-text);
	margin-bottom: var(--ls-space-4);
}

.ls-catalog-hero__text {
	color: var(--ls-text-muted);
	margin-bottom: var(--ls-space-6);
}

.ls-catalog-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ls-space-4);
}

/* ===== Catalog nav (category + environment tabs) ===== */
.ls-catalog-nav {
	margin-bottom: var(--ls-space-6);
}

.ls-catalog-nav__list {
	display: flex;
	gap: var(--ls-space-5);
	list-style: none;
	margin: 0 0 var(--ls-space-3);
	padding: 0 0 var(--ls-space-2);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
	scrollbar-width: thin;
}

.ls-catalog-nav__list--category:last-child,
.ls-catalog-nav__list--environment:only-child {
	margin-bottom: 0;
}

.ls-catalog-nav__link {
	display: inline-block;
	font-size: 12px;
	letter-spacing: var(--ls-tracking-nav);
	text-transform: uppercase;
	color: var(--ls-text-muted);
	padding-block: var(--ls-space-2);
	border-bottom: 2px solid transparent;
	transition: color var(--ls-transition-fast), border-color var(--ls-transition-fast);
}

.ls-catalog-nav__link:hover,
.ls-catalog-nav__link:focus-visible {
	color: var(--ls-text);
}

.ls-catalog-nav__link.is-active {
	color: var(--ls-text);
	border-bottom-color: var(--ls-black);
}

/* ===== Catalog grid ===== */
.ls-catalog-grid {
	grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 480px) {
	.ls-catalog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ls-catalog-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1280px) {
	.ls-catalog-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* .ls-catalog-empty* now lives sitewide in components.css — shared with
   the Projects grid empty state (Stage 9). */

/* .ls-catalog-pagination* now lives sitewide in components.css —
   template-parts/product/pagination.php is reused as-is by the Projects
   grid too (Stage 9), despite its file location. */

/* Catalog CTA sections (customization / materials / final CTA): styles now
   live sitewide in components.css since catalog-cta.php is shared across
   Furniture/Outdoor/Products, Custom/Get a Quote, and Projects.
   .ls-catalog-section__link now lives sitewide in components.css too —
   reused by Outdoor (Stage 7) and About (Stage 10). */