/* Hero */
.hero {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--color-paper-alt);
}
.hero img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 0;
}
.hero::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(20,18,16,.55), rgba(20,18,16,0) 55%);
	z-index: 1;
}
.hero-content {
	position: relative; z-index: 2;
	color: #fff;
	padding: var(--space-5) var(--space-3) var(--space-6);
	max-width: 46rem;
}
.hero-eyebrow { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; opacity: .85; }
.hero-title {
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 6vw, 4rem);
	font-weight: 500;
	line-height: 1.05;
	margin-top: var(--space-2);
}
.hero-subtitle { margin-top: var(--space-3); font-size: 1.05rem; max-width: 42ch; opacity: .92; }
.hero-actions { margin-top: var(--space-4); }
.hero .btn--primary { background: #fff; color: var(--color-ink); border-color: #fff; }
.hero .btn--primary:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* Product detail */
.product-detail {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.product-detail { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-6); }
}
.product-detail__category { text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--color-ink-soft); }
.product-detail__title { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-top: var(--space-1); }
.product-detail__short { color: var(--color-ink-soft); margin-top: var(--space-2); font-size: 1.05rem; }
.product-detail__description { margin-top: var(--space-4); line-height: 1.7; }
.spec-table { margin-top: var(--space-4); border-top: 1px solid var(--color-line); }
.spec-table dl { display: grid; grid-template-columns: 1fr 1.5fr; padding-block: var(--space-2); border-bottom: 1px solid var(--color-line); }
.spec-table dt { color: var(--color-ink-soft); font-size: 0.9rem; }
.spec-table dd { font-size: 0.9rem; }

.related-heading { margin-top: var(--space-7); }

/* Contact page */
.contact-layout {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.contact-layout { grid-template-columns: 1fr 1fr; }
}
.contact-info dl { margin-top: var(--space-3); }
.contact-info dt { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-soft); margin-top: var(--space-3); }
.contact-info dd { margin-top: 2px; font-size: 1.05rem; }
.contact-info dd a:hover { color: var(--color-accent); }
.social-links { display: flex; gap: var(--space-3); margin-top: var(--space-4); }

.page-header { padding-block: var(--space-5); }
.page-header__title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); }
.page-header__intro { margin-top: var(--space-2); color: var(--color-ink-soft); max-width: 60ch; }

.filters { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.filters a { font-size: 0.85rem; padding: var(--space-1) var(--space-3); border: 1px solid var(--color-line); border-radius: 999px; }
.filters a:hover, .filters a.is-active { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }

.empty-state { text-align: center; padding-block: var(--space-6); color: var(--color-ink-soft); }