/* =====================================================================
   DRAFT 1 · SABBIA (sand)
   Closest to the bakery site the owner liked: a quiet centred hero,
   then a full width photo that a cream lid rolls up off as you scroll.
   Sand panels split with photos. Menu as a calm two column list.
   Manrope only. Cream base, sand panels, maroon accent, sage details.
   ===================================================================== */
:root {
  --font: "Manrope", system-ui, sans-serif;
  --bg: #f6efe3; --surface: #fbf7f0; --sand: #e8d8bf; --sand-d: #c9a57a;
  --accent: #7d2a33; --text: #231c17; --soft: #6e6257; --line: #e4d7c3;
}
.nav .wtag { color: var(--sage-d); }

/* hero */
.hero-c { padding: 160px 0 var(--s800); text-align: center; }
.hero-c .wrap { display: flex; flex-direction: column; align-items: center; }
.hero-c .mark { width: auto; height: 120px; margin-bottom: var(--s400); }
@media (max-width: 560px) { .hero-c .mark { height: 88px; } }
.hero-c .hero-sub { margin-top: var(--s300); }
.hero-c .hero-act { justify-content: center; }
.band { margin: 0 var(--s300); border-radius: 24px; }
.band.small { margin-top: 0; }

/* category tiles */
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s300); }
.cat-tile { text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: var(--s50); }
.cat-tile .cat-img { display: block; overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 3; margin-bottom: var(--s100); }
.cat-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.cat-tile:hover img { transform: scale(1.04); }
.cat-tile .cat-it { color: var(--accent); }

/* sand panel, like the reference's tan split */
.tanpanel { background: var(--sand); padding: var(--s900) 0; }
.tanpanel .btn { background: var(--text); }

/* tagline sits on cream */
.tagsec { text-align: center; }
.tagsec .tagline { margin: 0 auto; }

/* ordering card */
.ordering { background: var(--surface); }
.ord-card { background: var(--bg); }

/* menu: two column list with round photos */
.mode-list .items { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s300) var(--s600); }
.mode-list .item { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--s200); align-items: start; padding-bottom: var(--s300); box-shadow: inset 0 -1px 0 var(--line); }
.mode-list .item img { width: 72px; height: 72px; border-radius: 9999px; object-fit: cover; }
.mode-list .item > div { display: flex; flex-direction: column; gap: var(--s50); }
.mode-list .price { color: var(--soft); white-space: nowrap; }
.mode-list .cat-head { padding-bottom: var(--s200); }

.visitshort { background: var(--sand); }
.visitshort .hours.card { background: var(--surface); }

/* footer: deep brown like the reference, flat */
.foot { background: #3b2a20; color: #f3e9da; --soft: #cbb9a4; --line: #574034; --text: #f3e9da; --accent: #e7c79f; }
.foot .phone b { color: #f3e9da; }

@media (max-width: 900px) {
  .cats { grid-template-columns: 1fr 1fr; }
  .mode-list .items { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cats { grid-template-columns: 1fr; }
  .band { margin: 0 var(--s200); }
  .mode-list .item { grid-template-columns: 56px 1fr; }
  .mode-list .item img { width: 56px; height: 56px; }
  .mode-list .price { grid-column: 2; }
}
/* inner page heads: centred like the home page, wide photo below like the home band */
.pagehead { text-align: center; padding-bottom: var(--s600); }
.pagehead .ph-grid { grid-template-columns: 1fr; gap: var(--s600); }
.pagehead .ph-copy { display: flex; flex-direction: column; align-items: center; }
.pagehead .hero-act { justify-content: center; }
.ph-img img { height: 340px; }
.search { margin: 0 auto var(--s300); }
.tabs { justify-content: center; }