/**
 * Frontend parity layer — exact deltas vs Next.js localhost:3002
 * Load after main.css. Do not redesign; only match reference.
 */

/* Header — React: h-16 lg:h-18, shadow-sm → shadow-md on scroll */
.site-header {
	box-shadow: 0 1px 2px rgba(28, 20, 16, 0.06);
	transition: box-shadow 200ms ease;
}
.site-header.is-scrolled {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
@media (min-width: 1024px) {
	.header-inner {
		min-height: 4.5rem;
	}
}

/* Collections hero — React: bg-cream-dark border-b border-gold/10 */
.collections-hero {
	background: var(--cream-dark);
	border-bottom: 1px solid rgba(200, 155, 94, 0.1);
	padding-block: 2.5rem;
}
@media (min-width: 1024px) {
	.collections-hero {
		padding-block: 4rem;
	}
	.collections-hero-title {
		font-size: 3rem;
		line-height: 1.15;
	}
	.collections-hero-sub {
		font-size: 1.125rem;
	}
}

/* Category chip active — React: bg-gold text-white shadow-gold */
.cat-chip.active {
	color: #fff;
	box-shadow: var(--shadow-gold);
}

/* Product grid — React: always 3 columns (grid-cols-3) */
.coll-product-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
}
@media (min-width: 640px) {
	.coll-product-grid {
		gap: 1rem;
	}
}
@media (min-width: 1024px) {
	.coll-product-grid {
		gap: 1.5rem;
	}
}

/* Product card — React: rounded-2xl shadow-card hover:shadow-gold */
.coll-card {
	border-radius: 1rem;
	box-shadow: var(--shadow-card);
	border: none;
}
.coll-card:hover {
	box-shadow: var(--shadow-gold);
	transform: none;
}
.coll-card-img {
	transition: transform 500ms ease;
}
.coll-card:hover .coll-card-img {
	transform: scale(1.05);
}

/* Hero image — React: shadow-gold-lg on lifestyle shot */
.hero-img {
	box-shadow: var(--shadow-gold-lg);
}

/* Float badges — React: rounded-2xl shadow-gold / shadow-card */
.hero-float-badge {
	border-radius: 1rem;
	background: #fff;
}
.hero-float-top {
	box-shadow: var(--shadow-gold);
}
.hero-float-bottom {
	box-shadow: var(--shadow-card);
}

/* Cart overlay — React: bg-charcoal/60 */
.cart-overlay.is-visible {
	background: rgba(28, 20, 16, 0.6);
}

/* Checkout modal backdrop */
.checkout-overlay.is-visible {
	background: rgba(28, 20, 16, 0.6);
}

/* Glass-style trust strip on product (where used) */
.product-trust-glass {
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* Reduced motion — match globals.css */
@media (prefers-reduced-motion: reduce) {
	.coll-card:hover .coll-card-img,
	.product-card--v2:hover .product-card-image {
		transform: none;
	}
}