/* ==========================================================================
   Home page sections — shop-by-category, featured products, how pickup
   works, farm story/values, newsletter CTA.
   ========================================================================== */

.home-section {
	padding: 3rem 0;
}

.home-section--tint {
	/* Same white assumption as the reviews band below — these two tinted bands
	   have to follow the themed background together or they diverge. */
	background: color-mix(in srgb, var(--hw-accent, #32432d) 4%, var(--hw-bg, #faf7f0));
}

.home-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}

.home-section__title {
	font-size: calc(var(--font-heading-scale, 1) * 1.6rem);
	font-weight: 800;
	margin: 0;
}

.home-section__title--center {
	text-align: center;
	margin-bottom: 1.75rem;
}

.home-section__more {
	font-weight: 700;
	color: var(--hw-accent, #32432d);
	text-decoration: none;
	white-space: nowrap;
}

.home-section__more:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Shop by category ---------- */

.home-cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1rem;
}

.home-cat {
	text-decoration: none;
	color: inherit;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.home-cat__media {
	display: block;
	aspect-ratio: 3 / 2;
	border-radius: 12px;
	overflow: hidden;
	background: var(--hw-card, #fff);
	border: 1px solid var(--color-border, #e5e0d8);
}

.home-cat__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.home-cat:hover .home-cat__media img {
	transform: scale(1.05);
}

.home-cat__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 2rem;
	opacity: 0.2;
}

.home-cat__name {
	font-weight: 700;
	font-size: 0.92rem;
}

/* ---------- Featured products ---------- */

.home-products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 1.25rem;
}

.home-product {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.home-product__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	overflow: hidden;
	background: var(--hw-card, #fff);
	border: 1px solid var(--color-border, #e5e0d8);
}

.home-product__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.home-product:hover .home-product__media img {
	transform: scale(1.04);
}

.home-product__badge {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	background: #4a4a4a;
	color: var(--hw-on-accent, #fff);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 999px;
	padding: 0.2rem 0.6rem;
}

.home-product__badge--sale {
	background: #b3261e;
}

.home-product__name {
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.3;
}

.home-product__price {
	font-size: 0.9rem;
	opacity: 0.8;
}

.home-product__price del {
	opacity: 0.6;
	margin-right: 0.35rem;
}

.home-product__price ins {
	text-decoration: none;
	color: #b3261e;
	font-weight: 700;
}

/* ---------- How pickup works ---------- */

.home-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
}

.home-step {
	background: var(--hw-card, #fff);
	border: 1px solid var(--color-border, #e5e0d8);
	border-radius: 12px;
	padding: 1.75rem 1.5rem;
	text-align: center;
}

.home-step__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--hw-accent, #32432d) 10%, var(--hw-card, #fff));
	color: var(--hw-accent, #32432d);
	font-size: 1.6rem;
	margin-bottom: 0.9rem;
}

.home-step h3 {
	margin: 0 0 0.5rem;
	font-size: 1.02rem;
	font-weight: 800;
}

.home-step p {
	margin: 0;
	font-size: 0.92rem;
	opacity: 0.8;
	line-height: 1.55;
}

/* ---------- Story / values ---------- */

.home-section--story {
	background: var(--hw-accent, #32432d);
	color: var(--hw-on-accent, #fff);
}

.home-story {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 3rem;
	align-items: center;
}

@media (max-width: 749px) {
	.home-story {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

.home-story .home-section__title {
	color: var(--hw-on-accent, #fff);
	margin-bottom: 0.75rem;
}

.home-story__text p {
	margin: 0 0 1.25rem;
	line-height: 1.65;
	opacity: 0.92;
}

.home-story__cta {
	display: inline-block;
	/* This button sits ON the accent band, so it takes the contrasting
	   on-accent colour — the card colour would vanish into the band. */
	background: var(--hw-on-accent, #fff);
	color: var(--hw-accent, #32432d);
	font-weight: 800;
	text-decoration: none;
	border-radius: 10px;
	padding: 0.75rem 1.3rem;
}

.home-story__cta:hover {
	filter: brightness(0.94);
	color: var(--hw-accent, #32432d);
}

.home-values {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.home-values li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 700;
	font-size: 0.95rem;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 0.85rem 1rem;
}

.home-values .mdi {
	font-size: 1.3rem;
	opacity: 0.9;
}

/* ---------- Newsletter ---------- */

.home-news {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
	gap: 2rem;
	align-items: center;
}

@media (max-width: 749px) {
	.home-news {
		grid-template-columns: 1fr;
	}
}

.home-news p {
	margin: 0.4rem 0 0;
	opacity: 0.8;
}

.home-news__form {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.home-news__form input {
	flex: 1 1 220px;
	border: 1.5px solid var(--color-border, #d8d2c7);
	border-radius: 10px;
	padding: 0.8rem 0.95rem;
	font: inherit;
	background: var(--hw-card, #fff);
}

.home-news__form button {
	background: var(--hw-accent, #32432d);
	color: var(--hw-on-accent, #fff);
	border: none;
	border-radius: 10px;
	padding: 0.8rem 1.4rem;
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}

.home-news__form button:hover {
	filter: brightness(1.12);
}

.home-news__msg {
	flex-basis: 100%;
	margin: 0.25rem 0 0;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--hw-accent, #32432d);
}

/* ==========================================================================
   Contact page (page-contact.php) — OC-style: form card + info card.
   ========================================================================== */

.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
	gap: 1.5rem;
	align-items: start;
}

@media (max-width: 849px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
}

.contact-card {
	background: var(--hw-card, #fff);
	border: 1px solid var(--color-border, #e5e0d8);
	border-radius: 12px;
	padding: 1.75rem;
}

.contact-intro p:first-child {
	margin-top: 0;
}

.contact-row {
	margin: 0 0 1rem;
}

.contact-row label {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	margin-bottom: 0.35rem;
	opacity: 0.85;
}

.contact-row .required {
	color: #b3261e;
}

.contact-row input,
.contact-row textarea {
	width: 100%;
	border: 1.5px solid var(--color-border, #d8d2c7);
	border-radius: 10px;
	padding: 0.75rem 0.9rem;
	font: inherit;
	background: var(--hw-card, #fff);
	box-sizing: border-box;
}

.contact-row input:focus,
.contact-row textarea:focus {
	outline: 2px solid var(--hw-accent, #32432d);
	outline-offset: -1px;
}

/* Honeypot stays out of sight without display:none (some bots check) */
.contact-row--hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-actions {
	display: flex;
	justify-content: flex-end;
	border-top: 1px solid var(--color-border, #eee7db);
	padding-top: 1.1rem;
}

.contact-submit {
	border: none;
	border-radius: 999px;
	background: var(--hw-accent, #32432d);
	color: var(--hw-on-accent, #fff);
	font: inherit;
	font-weight: 700;
	padding: 0.85rem 1.8rem;
	cursor: pointer;
}

.contact-submit:hover:not(:disabled) {
	filter: brightness(1.12);
}

.contact-submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

.contact-msg {
	font-size: 0.9rem;
	font-weight: 600;
	margin: 0 0 0.75rem;
}

.contact-msg--ok { color: #2f7d39; }
.contact-msg--err { color: #b3261e; }

.contact-info__store {
	margin: 0 0 0.5rem;
	font-size: 1.2rem;
	font-weight: 800;
}

.contact-info__address {
	font-style: normal;
	opacity: 0.8;
	margin: 0 0 0.9rem;
	line-height: 1.5;
}

.contact-info__phone {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 1rem;
	font-weight: 700;
}

.contact-info__phone a {
	color: inherit;
	text-decoration: none;
}

.contact-info__phone .mdi {
	color: var(--hw-accent, #32432d);
}

.contact-info__map {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	border: 1.5px solid var(--hw-accent, #32432d);
	color: var(--hw-accent, #32432d);
	border-radius: 999px;
	padding: 0.55rem 1.2rem;
	font-weight: 700;
	text-decoration: none;
}

.contact-info__map:hover {
	background: rgba(50, 67, 45, 0.07);
	color: var(--hw-accent, #32432d);
}

.contact-info__hint {
	margin: 1.1rem 0 0;
	font-size: 0.85rem;
	opacity: 0.65;
	line-height: 1.5;
}

/* ==========================================================================
   Trust badges + customer reviews.

   Both are inserted from the block editor as patterns (see
   includes/home-blocks.php), so the markup below styles ordinary core blocks
   rather than theme-rendered sections. The client can retype every label.
   ========================================================================== */

/* --- Trust badges ------------------------------------------------------- */

/* The block editor wraps a group's children in .wp-block-group__inner-container,
   so the badges are a grandchild, not a child. Put the grid on BOTH and let the
   wrapper span the full row — that way the layout is the same whether or not
   the inner container is present. */
.hw-badges,
.hw-badges > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1.5rem 1rem;
}

.hw-badges > .wp-block-group__inner-container {
	grid-column: 1 / -1;
}

.hw-badges {
	max-width: var(--theme-max-width, 1680px);
	margin: 0 auto;
	padding: 2.75rem var(--gutter-container, 40px);
	border-top: 1px solid var(--hw-border, rgba(29, 39, 29, 0.12));
	border-bottom: 1px solid var(--hw-border, rgba(29, 39, 29, 0.12));
}

.hw-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.7rem;
	margin: 0;
}

/* The icon. Delivered as a mask so it takes the theme accent rather than a
   colour baked into the SVG — the black in the data URI is mask alpha, not a
   rendered colour. */
.hw-badge::before {
	content: "";
	inline-size: 2.5rem;
	block-size: 2.5rem;
	background-color: var(--hw-accent, #32432d);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.hw-badge__label {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--hw-text, #1d271d);
}

/* Sprout — grass fed. */
.hw-badge--grassfed::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V10'/%3E%3Cpath d='M12 12C12 12 8.5 7.5 3.5 8.5c.5 5 5 6.5 8.5 3.5Z'/%3E%3Cpath d='M12 12c0 0 3.5-6 8.5-5 -.5 5.5-5 7.5-8.5 5Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V10'/%3E%3Cpath d='M12 12C12 12 8.5 7.5 3.5 8.5c.5 5 5 6.5 8.5 3.5Z'/%3E%3Cpath d='M12 12c0 0 3.5-6 8.5-5 -.5 5.5-5 7.5-8.5 5Z'/%3E%3C/svg%3E");
}

/* Sun over pasture. */
.hw-badge--pasture::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='3.5'/%3E%3Cpath d='M12 2v1.5M12 14.5V16M19 9h-1.5M6.5 9H5M17 4l-1 1M8 13l-1 1M17 14l-1-1M8 5 7 4'/%3E%3Cpath d='M2.5 20h19'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='3.5'/%3E%3Cpath d='M12 2v1.5M12 14.5V16M19 9h-1.5M6.5 9H5M17 4l-1 1M8 13l-1 1M17 14l-1-1M8 5 7 4'/%3E%3Cpath d='M2.5 20h19'/%3E%3C/svg%3E");
}

/* Pill, struck through — no added hormones. */
.hw-badge--nohormones::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='8' rx='4'/%3E%3Cpath d='M12 8v8'/%3E%3Cpath d='M4 20 20 4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='8' rx='4'/%3E%3Cpath d='M12 8v8'/%3E%3Cpath d='M4 20 20 4'/%3E%3C/svg%3E");
}

/* Flask, struck through — nitrate free. */
.hw-badge--nonitrates::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 3h5M10.5 3v6L5 18a2 2 0 0 0 1.7 3h10.6a2 2 0 0 0 1.7-3l-5.5-9V3'/%3E%3Cpath d='M4 20.5 20 3.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 3h5M10.5 3v6L5 18a2 2 0 0 0 1.7 3h10.6a2 2 0 0 0 1.7-3l-5.5-9V3'/%3E%3Cpath d='M4 20.5 20 3.5'/%3E%3C/svg%3E");
}

/* Wheat, struck through — gluten free. */
.hw-badge--glutenfree::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V8'/%3E%3Cpath d='M12 8c0-2 1.5-3.5 3.5-3.5C15.5 6.5 14 8 12 8Z'/%3E%3Cpath d='M12 8c0-2-1.5-3.5-3.5-3.5C8.5 6.5 10 8 12 8Z'/%3E%3Cpath d='M12 13c0-2 1.5-3.5 3.5-3.5C15.5 11.5 14 13 12 13Z'/%3E%3Cpath d='M12 13c0-2-1.5-3.5-3.5-3.5C8.5 11.5 10 13 12 13Z'/%3E%3Cpath d='M4 20.5 20 3.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V8'/%3E%3Cpath d='M12 8c0-2 1.5-3.5 3.5-3.5C15.5 6.5 14 8 12 8Z'/%3E%3Cpath d='M12 8c0-2-1.5-3.5-3.5-3.5C8.5 6.5 10 8 12 8Z'/%3E%3Cpath d='M12 13c0-2 1.5-3.5 3.5-3.5C15.5 11.5 14 13 12 13Z'/%3E%3Cpath d='M12 13c0-2-1.5-3.5-3.5-3.5C8.5 11.5 10 13 12 13Z'/%3E%3Cpath d='M4 20.5 20 3.5'/%3E%3C/svg%3E");
}

/* Helix, struck through — non-GMO. */
.hw-badge--nongmo::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3c0 5 10 5 10 10s-10 5-10 8'/%3E%3Cpath d='M17 3c0 5-10 5-10 10s10 5 10 8'/%3E%3Cpath d='M8.5 7h7M8.5 17h7'/%3E%3Cpath d='M4 20.5 20 3.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3c0 5 10 5 10 10s-10 5-10 8'/%3E%3Cpath d='M17 3c0 5-10 5-10 10s10 5 10 8'/%3E%3Cpath d='M8.5 7h7M8.5 17h7'/%3E%3Cpath d='M4 20.5 20 3.5'/%3E%3C/svg%3E");
}

/* Six across is only honest on a wide screen. Step down in pairs so a row is
   never left with one orphan badge. */
@media screen and (max-width: 1023px) {
	.hw-badges,
	.hw-badges > .wp-block-group__inner-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hw-badges {
		padding-block: 2.25rem;
	}
}

@media screen and (max-width: 600px) {
	.hw-badges,
	.hw-badges > .wp-block-group__inner-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem 0.75rem;
	}

	.hw-badge::before {
		inline-size: 2.1rem;
		block-size: 2.1rem;
	}

	.hw-badge__label {
		font-size: 0.75rem;
	}
}

/* --- Customer reviews --------------------------------------------------- */

/* Sits directly below the story section, which is already a solid accent
   band — so this one stays light. Two dark bands back to back read as one
   long slab and the page loses its rhythm. */
.hw-reviews-band {
	/* Mixed into --hw-bg, not #fff: the page background is one of the colours
	   the hub lets an owner change, and mixing into white left this band
	   near-white under a dark palette while its text went light. */
	background: color-mix(in srgb, var(--hw-accent, #32432d) 4%, var(--hw-bg, #faf7f0));
	color: var(--hw-text, #1d271d);
	padding: 3.5rem var(--gutter-container, 40px);
	margin-block: 0;
}

.hw-reviews__title {
	margin: 0 0 2rem;
	font-size: calc(var(--font-heading-scale, 1) * 1.6rem);
	font-weight: 800;
	color: inherit;
}

.hw-reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: 1.5rem;
	max-width: var(--theme-max-width, 1680px);
	margin: 0 auto;
}

.hw-review {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	margin: 0;
	padding: 1.6rem;
	border: 1px solid var(--hw-border, rgba(29, 39, 29, 0.12));
	border-radius: var(--border-radius-cards, 12px);
	background: var(--hw-card, #fffdf8);
}

.hw-review__stars {
	display: inline-flex;
	gap: 0.2rem;
	color: var(--hw-accent, #32432d);
}

.hw-review__star {
	inline-size: 1.05rem;
	block-size: 1.05rem;
	background-color: currentColor;
	opacity: 0.22;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m12 17.3-6.2 3.7 1.7-7L2 9.2l7.1-.6L12 2l2.9 6.6 7.1.6-5.5 4.8 1.7 7z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m12 17.3-6.2 3.7 1.7-7L2 9.2l7.1-.6L12 2l2.9 6.6 7.1.6-5.5 4.8 1.7 7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hw-review__star.is-on {
	opacity: 1;
}

.hw-review__quote {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	/* No ellipsis clamp: the shortcode already trims on a word boundary, so
	   what renders here is a whole sentence rather than a cut-off one. */
}

.hw-review__by {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.6rem;
	margin-top: auto;
	padding-top: 0.2rem;
}

.hw-review__name {
	font-weight: 700;
}

.hw-review__product {
	font-size: 0.85rem;
	color: var(--hw-accent, #32432d);
	opacity: 0.8;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.hw-review__product:hover,
.hw-review__product:focus-visible {
	color: var(--hw-accent, #32432d);
	opacity: 1;
}

@media screen and (max-width: 600px) {
	.hw-reviews-band {
		padding-block: 2.5rem;
	}
}

/* --- Hero copy ---------------------------------------------------------- */

.hw-hero-copy__lede {
	margin: 0.6rem 0 0;
	font-size: clamp(1.05rem, 2.2vw, 1.4rem);
	font-weight: 600;
	line-height: 1.4;
}

.hw-hero-copy__sells {
	margin: 1rem 0 0;
	font-size: clamp(0.85rem, 1.5vw, 1rem);
	line-height: 1.7;
	opacity: 0.9;
}

/* The heading is its own editable block, so it can't hide itself when the
   shortcode below it finds no reviews. A brand-new store would otherwise show
   a green band with a title and nothing under it. */
.hw-reviews-band:not(:has(.hw-reviews)) {
	display: none;
}

/* The three steps are a grid row, so they already stretch to a shared height.
   Laying each one out as a column keeps the icon and heading on the same line
   across all three even when one step's sentence wraps further than another. */
.home-step {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.home-step p {
	margin-block: 0 auto;
}