/* home.css - home page: banner, shop, product pop-up, story, contact. Phones first. */
.hero { margin: var(--s3); padding: var(--s5) var(--s3); text-align: center; border-radius: var(--r-lg); background: var(--tan-soft); }
.hero-logo { width: min(80%, 300px); height: auto; margin: 0 auto var(--s3); }
.hero h1 { font-size: 1.45rem; }
.hero p { margin: var(--s2) 0 var(--s4); }
.hero-actions { display: flex; flex-direction: column; gap: var(--s2); max-width: 320px; margin-inline: auto; }

.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-bottom: var(--s4); }
.chip { min-height: 38px; padding: 0 14px; border: 2px solid var(--tan); border-radius: var(--pill); font-weight: 700; font-size: .92rem; }
.chip.active { background: var(--tan); color: #fff; }

.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.product-card { display: flex; flex-direction: column; padding: var(--s2); text-align: center; background: var(--white); border: 2px solid var(--border); border-radius: var(--r-md); }
.card-main { display: block; width: 100%; text-align: center; }
.card-title { display: block; margin: var(--s2) 0 2px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.25; color: var(--brown); }
.price { font-weight: 800; color: var(--tan); }
.card-main .price, .product-card .stars { display: block; }
.product-card .stars { min-height: 1.5em; font-size: .9rem; }
.product-card .btn { margin-top: auto; }

/* product pop-up (bottom sheet on phones) */
.pv { display: grid; gap: var(--s4); padding: 0 var(--s3) var(--s5); }
.pv-info > * + * { margin-top: var(--s3); }
.pv .media .ph-emoji { font-size: 5rem; }
.pv-price { font-size: 1.4rem; }
.features { list-style: disc; padding-left: 1.2rem; color: var(--brown-soft); }
.pv-actions { display: flex; flex-direction: column; gap: var(--s2); }
.pv h3.block { margin: var(--s5) 0 var(--s2); }
.review { margin-top: var(--s2); padding: var(--s3); background: var(--cream); border-radius: var(--r-sm); }
.star-pick { display: flex; gap: 2px; margin-bottom: var(--s3); }
.star-pick button { width: var(--tap); height: var(--tap); font-size: 1.9rem; line-height: 1; color: #cdbb9f; }
.star-pick button.on { color: var(--star); }
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.mini { text-align: center; font-size: .85rem; font-weight: 700; }
.mini .media .ph-emoji { font-size: 2rem; }

.story { max-width: 640px; margin-inline: auto; text-align: center; }
.story p { margin-top: var(--s3); }
.contact-list { text-align: center; }
.contact-list p { margin-bottom: var(--s1); }

@media (min-width: 768px) {
  .hero { margin: var(--s4) auto; max-width: calc(var(--max) - var(--s4) * 2); padding: var(--s6) var(--s4); }
  .hero-logo { width: 340px; }
  .hero h1 { font-size: 2rem; }
  .hero-actions { flex-direction: row; justify-content: center; max-width: none; }
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
  .product-card { padding: var(--s3); transition: transform var(--dur) var(--ease); }
  .product-card:hover { transform: translateY(-4px); }
  .pv { grid-template-columns: 1fr 1fr; gap: var(--s5); padding: 0 var(--s5) var(--s5); }
  .pv > .pv-wide { grid-column: 1 / -1; }
  .pv-actions { flex-direction: row; }
}
@media (min-width: 1000px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }