/* ============================================================
   Featured Products (home) — Sep 2026, Tyler's review round 2:
   "get people thinking about buying sooner". A row of shop products
   directly under the hero/USP card, above the category grid.
   Loaded after style.css from functions.php.
   ============================================================ */
.featured-products { padding: 40px 0 8px; text-align: center; }
.featured-products .kicker { color: var(--blue); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.featured-products h2 { font-size: 30px; margin-bottom: 10px; }
.featured-products .subhead { color: var(--muted-text); font-size: 15px; max-width: 640px; margin: 0 auto 30px; }
.featured-products .grid { text-align: left; }
.featured-products .card { border-radius: 6px; overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.featured-products .card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1); transform: translateY(-2px); }
.featured-products .card .card-img img { aspect-ratio: 1 / 0.85; object-fit: contain; background: #fff; padding: 14px; }
.featured-products .card .card-body { padding: 18px 20px 22px; }
.featured-products .card h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.featured-products .card p.short { font-size: 13.5px; margin-bottom: 14px; }
.featured-products .prod-card-price { font-size: 17px; margin-bottom: 8px; }
.featured-products .prod-card-price .small { font-weight: 400; }
.featured-products .card .card-btn .btn { background: var(--blue); border-radius: 4px; font-weight: 600; width: 100%; }
.featured-products .card .card-btn .btn:hover { background: var(--blue-dark); }
.featured-products .featured-more { margin-top: 28px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.featured-products .featured-note { font-size: 13px; color: var(--muted-text); margin-top: 14px; }
.featured-products .featured-note .ech-icon { width: 15px; height: 15px; margin-right: 4px; vertical-align: -3px; }
@media (max-width: 620px) { .featured-products { padding-top: 28px; } .featured-products h2 { font-size: 26px; } }