/* Homepage-only sections (index.html). Shared look — tokens, menu bar, hero, footer,
   sticky bar, reveal — is in site.css, which loads first. */
.home img { max-width: 100%; height: auto; display: block; }
.home a { color: var(--forest); }
.home h1, .home h2, .home h3 { font-family: 'Playfair Display', Georgia, serif; color: var(--forest); line-height: 1.1; margin: 0; }
body.home { font: 400 1rem/1.6 'Lato', system-ui, sans-serif; }

/* ── layout ── */
.home main { display: block; }
.hm-section { width: min(1100px, 90vw); margin: 0 auto; padding: 2.4rem 0; border-top: 1px solid var(--line); }
.hm-section[hidden] { display: none; }
.hm-section h2 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 900; margin-bottom: 1rem; }
.hm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.hm-head a { font-weight: 700; text-decoration: none; white-space: nowrap; }

/* steps stagger in when their section is revealed (site.js adds .st-reveal / .in) */
.st-reveal .hm-steps li { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.st-reveal.in .hm-steps li { opacity: 1; transform: none; }
.st-reveal.in .hm-steps li:nth-child(2) { transition-delay: .1s; } .st-reveal.in .hm-steps li:nth-child(3) { transition-delay: .2s; }

/* ── favourites (full-width forest band) ── */
.hm-band { border-top: 0; background: var(--forest); box-shadow: 0 0 0 100vmax var(--forest); clip-path: inset(0 -100vmax); padding: 2.6rem 0; }
.home .hm-band h2 { color: var(--cream); }
.hm-band .hm-head a { color: var(--sage); }
.hm-band + .hm-section { border-top: 0; }
.hm-fav-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 46%); gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; scrollbar-width: none; }
.hm-fav-row::-webkit-scrollbar { display: none; }
.hm-fav { scroll-snap-align: start; display: flex; flex-direction: column; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: var(--white); color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.06); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.hm-fav:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.1); }
.hm-fav:active { transform: scale(.98); }
.hm-fav:hover .hm-fav-add { transform: scale(1.12) rotate(90deg); }
.hm-fav img { transition: transform .5s var(--ease); }
.hm-fav:hover img { transform: scale(1.05); }
.hm-fav img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: .6rem .6rem 0; background: radial-gradient(circle at 50% 60%, #F7F4EA 0%, #FFFFFF 70%); filter: drop-shadow(0 8px 12px rgba(0,0,0,.10)); }
.hm-fav-body { position: relative; display: flex; flex-direction: column; padding: .7rem 3.2rem .8rem .9rem; min-height: 4.4rem; }
.hm-fav-name { font-weight: 900; line-height: 1.3; }
.hm-fav-price { color: var(--muted); font-weight: 700; }
.hm-fav-add { position: absolute; right: .7rem; bottom: .75rem; width: 38px; height: 38px; border-radius: 50%; background: var(--yolk); color: var(--ink); transition: transform .2s var(--ease); display: grid; place-items: center; font-size: 1.4rem; font-weight: 900; line-height: 1; }

/* ── ordering is easy ── */
.hm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; list-style: none; margin: 0; padding: 0; }
.hm-steps li { background: var(--white); border-radius: var(--radius); padding: .9rem .5rem; text-align: center; font-size: .82rem; color: var(--muted); line-height: 1.35; }
.hm-steps b { display: block; color: var(--forest); font-size: .98rem; margin-bottom: .2rem; }
.hm-step-icon { display: block; font-size: 1.7rem; margin-bottom: .3rem; }

/* ── family story ── */
.hm-story { display: grid; grid-template-columns: 120px 1fr; gap: 1.2rem; align-items: center; }
.hm-story img { width: 120px; height: 150px; object-fit: cover; border-radius: 60px 60px 16px 16px; border: 4px solid var(--sage); }
.hm-story img { animation: st-float 6s ease-in-out infinite; }
.hm-story h2 { margin-bottom: .5rem; }
.hm-story p { margin: 0 0 .6rem; color: var(--ink); }
.hm-story a { font-weight: 700; text-decoration: none; }

/* ── info ── */
.hm-info { display: grid; gap: 1rem; }
.hm-card { background: var(--white); border-radius: var(--radius); padding: 1.2rem 1.3rem; }
.hm-card h3 { font: 900 1rem 'Lato', sans-serif; margin: 1rem 0 .3rem; }
.hm-card h3:first-child { margin-top: 0; }
.hm-card p { margin: 0 0 .4rem; }
.hm-hours { width: 100%; border-collapse: collapse; }
.hm-hours th, .hm-hours td { padding: .45rem .5rem; text-align: left; font-weight: 400; border-bottom: 1px solid #efeadb; }
.hm-hours td { text-align: right; font-weight: 700; white-space: nowrap; }
.hm-hours small { color: var(--muted); }
.hm-hours tr.today th, .hm-hours tr.today td { background: #e3f0e7; font-weight: 900; }
.hm-hours tr.today th::after { content: 'Today'; margin-left: .5rem; padding: 1px 8px; border-radius: 999px; background: var(--forest); color: var(--white); font-size: .72rem; font-weight: 900; vertical-align: 2px; }
.hm-note { color: var(--muted); font-size: .88rem; margin-top: .6rem !important; }
.hm-phone { font-size: 1.2rem; font-weight: 900; text-decoration: none; }

/* ── cakes ── */
.hm-cakes { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: center; background: var(--white); border-radius: var(--radius); padding: .8rem; text-decoration: none; color: var(--ink) !important; transition: transform .2s var(--ease); }
.hm-cakes:hover { transform: translateY(-2px); }
.hm-cakes img { width: 96px; height: 96px; object-fit: cover; border-radius: 14px; }
.hm-cakes b { display: block; font: 900 1.2rem 'Playfair Display', serif; color: var(--forest); }
.hm-cakes em { display: block; font-style: normal; font-weight: 700; color: var(--forest); margin-top: .2rem; }

/* ── FAQ ── */
.hm-faq details { background: var(--white); border-radius: 14px; padding: 0 1.1rem; margin-bottom: .6rem; }
.hm-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; font-weight: 900; color: var(--forest); }
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary::after { content: '+'; font-size: 1.3rem; line-height: 1; transition: transform .2s var(--ease); }
.hm-faq details[open] summary::after { transform: rotate(45deg); }
.hm-faq p { margin: 0 0 1rem; line-height: 1.7; }

/* ── bigger screens ── */
@media (min-width: 700px) {
  .hm-fav-row { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; overflow: visible; }
  .hm-info { grid-template-columns: 1fr 1fr; }
  .hm-story { grid-template-columns: 180px 1fr; }
  .hm-story img { width: 180px; height: 225px; border-radius: 90px 90px 18px 18px; }
  .hm-cakes { grid-template-columns: 140px 1fr; }
  .hm-cakes img { width: 140px; height: 110px; }
}
@media (max-width: 340px) {
  .hm-steps { grid-template-columns: 1fr; }
  .hm-story { grid-template-columns: 1fr; }
}

/* ── today's cakes (filled by cakes-today.js; cards styled in site.css) ── */
.hm-today h2 { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.hm-today-kicker { display: inline-block; padding: .2rem .7rem; border-radius: 8px; background: var(--yolk); color: var(--ink); font: 900 .8rem/1.4 'Lato', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-3deg); }
.hm-today .hm-head a { color: var(--forest); }