/* ==================================================
   PRODUCTS SECTION — Mobile First
   Homepage "New Arrivals" block. Loaded unconditionally
   since it's called directly from front-page.php.
================================================== */

.products-section {
	background: var(--bg);
	padding-block: 3rem;
}

.products-section .section-eyebrow {
	display: block;
	font-size: .625rem;
	font-weight: 500;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: .875rem;
}

.products-section .section-title {
	font-family: var(--serif);
	font-size: clamp(1.625rem, 6vw, 2.625rem);
	font-weight: 400;
	color: var(--black);
	line-height: 1.15;
}

.section-row-hdr {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.products-section .link-underline {
	font-size: .7188rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 400;
	color: var(--mid);
	text-decoration: none;
	border-bottom: .0625rem solid var(--light);
	padding-bottom: .125rem;
	transition: color .2s, border-color .2s;
}

.products-section .link-underline:hover {
  color: var(--black);
  border-color: var(--black);
}

.products-section .link-underline:focus-visible {
	outline: 0.125rem solid var(--accent);
	outline-offset: 0.25rem;
}

.view-all-center {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

/* ─── TABLET (≥641px) ─── */
@media (min-width: 641px) {

	.products-section {
		padding-block: 4rem;
	}

}

/* ─── DESKTOP (≥901px) ─── */
@media (min-width: 901px) {

	.products-section {
		padding-block: 5rem;
	}

	.section-row-hdr {
		flex-direction: row;
		align-items: baseline;
		margin-bottom: 2.5rem;
	}

}