/* Homepage: hero, category tiles, promo band, section rhythm */
.hero {
	background:
		radial-gradient(60rem 30rem at 85% -10%, rgba(25, 168, 123, 0.16), transparent 60%),
		radial-gradient(40rem 26rem at 0% 110%, rgba(250, 195, 6, 0.18), transparent 60%),
		var(--Clr3);
	padding-block: clamp(2rem, 6vw, 5rem);
}
.hero__grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.75rem); line-height: 1.08; margin: 0 0 1rem; text-wrap: balance; }
.hero__lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 34rem; margin: 0 0 1.5rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }
.button--ghost, .woocommerce a.button.button--ghost { background: transparent; color: var(--Clr2); box-shadow: inset 0 0 0 2px var(--Clr2); }
.button--ghost:hover, .woocommerce a.button.button--ghost:hover { background: var(--Clr2); color: #fff; }

/* [product_categories] tiles inside the hero: compact, icon-led */
.hero__cats .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 0; }
.hero__cats ul.products li.product-category { background: rgba(255, 255, 255, 0.85); border-radius: var(--radius); padding: 0.75rem 0.5rem; box-shadow: var(--shadow); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.hero__cats ul.products li.product-category:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14); }
.hero__cats ul.products li.product-category a img { width: 72px; height: 72px; aspect-ratio: 1; object-fit: contain; margin: 0 auto 0.4rem; background: none; }
.hero__cats ul.products li.product-category h2 { padding: 0; font-size: 0.9rem; line-height: 1.25; }
.hero__cats ul.products li.product-category mark { display: none; }

.front-section { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.front-section > h2 { margin-bottom: 1rem; }

.promo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(1rem, 4vw, 3rem); align-items: center; margin-block: clamp(1.5rem, 4vw, 3rem); padding: clamp(1.25rem, 3vw, 2.5rem); background: var(--Clr3); border-radius: calc(var(--radius) * 2); }
.promo__img img { width: 100%; height: auto; display: block; }
.promo__copy h2 { margin-top: 0; }
.promo__copy h2 a { text-decoration: none; }

/* Carousels (owl): keep the track clipped and the dots readable */
.front-sections .owl-carousel { max-width: 100%; }

@media (max-width: 900px) {
	.hero__grid, .promo { grid-template-columns: 1fr; }
	.hero__cats .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.hero__cats .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* WooCommerce's small-screen CSS gives category tiles a 48% width; let the grid size them */
.hero__cats ul.products li.product-category { width: auto !important; float: none !important; margin: 0 !important; min-width: 0; }
.hero__cats ul.products li.product-category h2 { overflow-wrap: anywhere; }

/* Home carousels (top rated, articles, products, featured businesses): titles are links but read as headings, so no underline */
.front-sections .owl-carousel a,
.front-sections .carousel-slider a { text-decoration: none; }
.front-sections .owl-carousel a:hover,
.front-sections .carousel-slider a:hover { text-decoration: none; color: var(--ClrPrim2); }
.front-sections .owl-carousel a:focus-visible,
.front-sections .carousel-slider a:focus-visible { outline: 3px solid var(--Clr2); outline-offset: 2px; border-radius: 2px; }