/* Home page specific styles for PillowDay (avoid duplicating base.css) */
:root { --hero-gap: var(--space-6); }

.hero { display: grid; gap: var(--hero-gap); align-items: center; padding-block: var(--space-16) var(--space-12); }
@media (min-width: 960px) { .hero { grid-template-columns: 1.1fr 0.9fr; } }
.hero__content { display: grid; gap: var(--space-5); }
.hero__media { position: relative; box-shadow: var(--shadow-md); border-radius: var(--radius-xl); overflow: hidden; }
.hero__search { display: grid; gap: var(--space-2); }
.hero__search .btn { width: max-content; }
.hero__quick-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.section { padding-block: var(--space-14); }
.section--alt { background: color-mix(in oklab, var(--gray-100) 60%, transparent); border-block: 1px solid var(--gray-200); }
.section__grid { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .section__grid { grid-template-columns: 1fr 1fr; align-items: center; } }
.section__media { box-shadow: var(--shadow-sm); }
.section__cta { margin-top: var(--space-6); display: flex; gap: var(--space-3); flex-wrap: wrap; }

.feature-list { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.feature-list i { color: var(--color-primary); }

.trust .card { text-align: left; display: grid; gap: var(--space-2); }
.trust .card i { font-size: 22px; color: var(--color-primary); }

.product-grid .product { display: grid; gap: var(--space-3); }
.product__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }

.section--cta { text-align: center; }

/* Improve hero heading look with serif accent for brand tone */
#home-hero-title { font-family: 'Playfair Display', var(--font-serif); }

/* Accessibility helpers */
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: static; width: auto; height: auto; padding: 8px 12px; background: var(--color-primary); color: var(--color-primary-contrast); border-radius: var(--radius-sm); }