/* Mobile — 480px */
@media (max-width: 480px) {
	.hv-collections-grid  { grid-template-columns: repeat(2, 1fr) !important; }
	.hv-why-grid          { grid-template-columns: 1fr !important; }

	/* Product section header: stack heading + button */
	.hv-products-header   { flex-direction: column !important; align-items: flex-start !important; }

	/* About stats: 3-across → wrap */
	.hv-about-stats       { flex-wrap: wrap; gap: 20px !important; }
}

/**
 * Refreshed Homepage content styling (theme)
 */

/* Blog Cards styling */
.hv-blog-card {
	background: var(--white, #ffffff);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(10, 31, 16, 0.02);
	border: 1px solid rgba(18, 43, 24, 0.08);
}

.hv-blog-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 20px;
	font-weight: 700;
	margin: 10px 0;
}

.hv-blog-title a {
	color: var(--text-dark, #0d1b2a);
	text-decoration: none;
}

.hv-blog-excerpt p {
	color: var(--text-muted, #5a6b5c);
	font-size: 14px;
	line-height: 1.5;
}

/* Hero decorations (positions moved out of inline styles). */
.hvh-bg-dots--a { right: 5%; top: 10%; width: 160px; height: 160px; }
.hvh-bg-dots--b { left: 2%; bottom: 8%; width: 100px; height: 100px; opacity: .3; }

.hvh-shield {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}

.hvh-shield--lg {
	right: -30px;
	top: 50%;
	width: 420px;
	height: 460px;
	opacity: .13;
	transform: translateY(-52%);
}

.hvh-shield--sm { right: 12%; top: 5%; width: 80px; height: 90px; opacity: .18; }

.hvh-bg-plus--1 { font-size: 38px; top: 8%; left: 48%; }
.hvh-bg-plus--2 { font-size: 22px; top: 18%; left: 55%; }
.hvh-bg-plus--3 { font-size: 30px; bottom: 20%; right: 6%; }
.hvh-bg-plus--4 { font-size: 18px; bottom: 35%; right: 18%; }
.hvh-bg-plus--5 { font-size: 26px; top: 65%; left: 42%; }
.hvh-bg-plus--6 { font-size: 16px; top: 12%; right: 28%; }

.hvh-glow--a {
	width: 300px;
	height: 300px;
	right: -80px;
	top: -80px;
	background: radial-gradient(circle, rgba(100, 180, 255, .18) 0%, transparent 70%);
}

.hvh-glow--b {
	width: 220px;
	height: 220px;
	left: -50px;
	bottom: -50px;
	background: radial-gradient(circle, rgba(24, 95, 165, .12) 0%, transparent 70%);
}

.hvh-float-ico { font-size: 22px; }

/* Blog card title font (was an inline block style). */
.hv-blog-query-wrap .wp-block-post-title {
	font-family: 'Playfair Display', Georgia, serif;
}

/* Blog track is a centred 1200px column, matching the other sections. */
.hv-blog-query-wrap > .wp-block-post-template {
	max-width: 1200px;
	margin-inline: auto;
}

/* Space between the sticky header and the hero (reference: 30px). The
   parent theme zeroes margins on entry-content children, so scope it. */
body.hv-home .entry-content > .hvh-hero {
	margin-top: 30px;
	margin-bottom: 20px;
}

/* Global `p` leading (1.65) beats .hvh-sub's own 1.6; the reference is 24px. */
body.hv-home .hvh-sub {
	line-height: 1.6;
}

/* Reference parity (home): the reference body runs on the system font
   stack over white, with Inter on the hero h1 and a tighter 1.3 leading on
   the collection-card titles. */
body.hv-home {
	--hv-font-sys: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-family: var(--hv-font-sys);
	color: #334155;
	/* !important: design-tokens.css forces `body { background: var(--paper) !important }`. */
	background: #fff !important;
}

body.hv-home .hvh-h1 {
	font-family: Inter, system-ui, sans-serif;
}

body.hv-home .hv-coll-card h3 {
	line-height: 1.3;
}

/* The global `.page .type-page .entry-content p` rule justifies text; the
   narrow collection cards need left-aligned copy. Specificity (0,5,1) beats it. */
body.hv-home.page .type-page .entry-content .hv-coll-card p {
	text-align: left;
}

body.hv-home .hv-strip-text p {
	font-family: var(--hv-font-sys);
	line-height: 1.5;
}