/* ==========================================================================
   Home page. Loaded on the front page only.
   ========================================================================== */

.hero { background: linear-gradient(180deg, var(--bd-yellow-soft), var(--bd-white)); overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--bd-space-6); align-items: center; padding-block: clamp(2.5rem, 6vw, 5.5rem); }
.hero__eyebrow { color: var(--bd-ink-2); }
.hero__title { margin-top: var(--bd-space-2); font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.4rem); line-height: 1.02; }
.hero__lead { max-width: 46ch; margin-top: var(--bd-space-4); font-size: var(--bd-step-1); color: var(--bd-text-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--bd-space-3); margin-top: var(--bd-space-6); }

/* Three real sets, stacked like boxes on a shelf */
.hero__showcase { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bd-space-3); margin: 0; padding: 0; list-style: none; }
.hero__set a { display: block; border-radius: var(--bd-radius-l); background: var(--bd-white); box-shadow: var(--bd-shadow); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hero__set a:hover { transform: translateY(-4px) rotate(0deg) !important; box-shadow: var(--bd-shadow-lift); }
.hero__set img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: var(--bd-space-4); mix-blend-mode: multiply; }
.hero__set--1 a { transform: rotate(-3deg) translateY(18px); }
.hero__set--2 a { transform: translateY(-14px); }
.hero__set--3 a { transform: rotate(3deg) translateY(24px); }
.hero__set-name { display: block; padding: 0 var(--bd-space-3) var(--bd-space-3); color: var(--bd-ink); font-size: var(--bd-step--1); font-weight: 700; line-height: 1.3; }
.hero__set-name span { color: var(--bd-muted); font-weight: 600; }

.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--bd-space-2) var(--bd-space-6); margin: 0 auto; padding: var(--bd-space-4) 0; list-style: none; border-bottom: 1px solid var(--bd-line); font-size: var(--bd-step--1); font-weight: 600; color: var(--bd-ink-2); }
.trust li::before { content: "✓"; margin-right: 0.45em; color: var(--bd-green); font-weight: 800; }

.callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bd-space-4); padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--bd-radius-l); background: var(--bd-ink); color: var(--bd-white); }
.callout p { max-width: 60ch; font-size: var(--bd-step-1); font-weight: 600; }
.callout .btn { background: var(--bd-yellow); border-color: var(--bd-yellow); color: var(--bd-ink); }

/* "On sale now": a yellow band right under the hero while a sale runs */
.sale-row { background: var(--bd-yellow); }
.sale-row__head { align-items: center; flex-wrap: wrap; }
.sale-row__kicker {
	display: inline-block; margin-bottom: var(--bd-space-2); padding: 0.2em 0.7em; border-radius: var(--bd-radius-s);
	background: var(--bd-red); color: var(--bd-white);
	font-family: var(--bd-font-display); font-size: var(--bd-step-0); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
}
.sale-row h2 { font-size: var(--bd-step-4); font-weight: 800; line-height: 1; }
.sale-row .card { border-color: transparent; }

@media (max-width: 900px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__showcase { margin-top: var(--bd-space-4); }
	.hero__set-name { display: none; }
}