/* assets/styles.css — minimal, modern, responsive CSS
   - Mobile-first layout using CSS Grid & Flex
   - Easy class names and comments
*/

:root{
  --bg:#faf9f7;
  --text:#111;
  --muted:#666;
  --brand:#f59e0b; /* amber-500 */
  --border:#e5e5e5;
  --card:#fff;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial; color:var(--text); background:var(--bg); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ max-width:1100px; margin:0 auto; padding:0 16px; }
.section{ padding:48px 0; }
.section.alt{ background:#fff8eb; }
h1{ font-size:clamp(28px, 4vw, 40px); line-height:1.1; margin:0 0 8px; }
h2{ font-size:clamp(22px, 3vw, 28px); margin:0 0 12px; }
h3{ margin:0 0 6px; }

.row{ display:flex; align-items:flex-start; }
.row.center{ align-items:center; }
.row.between{ justify-content:space-between; }
.row.wrap{ flex-wrap:wrap; }
.row.gap{ gap:12px; }
.row.gap.small{ gap:8px; }
.grid{ display:grid; gap:16px; }
.grid.two{ grid-template-columns:1fr; }
.grid.three{ grid-template-columns:1fr; }
.grid.four{ grid-template-columns:1fr 1fr; }
.grid.gap{ gap:20px; }
@media(min-width:700px){
  .grid.two{ grid-template-columns:1.1fr 0.9fr; }
  .grid.three{ grid-template-columns:repeat(2,1fr); }
  .grid.four{ grid-template-columns:repeat(4,1fr); }
}
@media(min-width:1000px){
  .grid.three{ grid-template-columns:repeat(3,1fr); }
}

.btn{ display:inline-block; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:#fff; }
.btn.primary{ background:var(--brand); border-color:var(--brand); color:white; }
.btn.grow{ flex:1; }
.link{ text-decoration:underline; text-underline-offset:3px; }
.link.danger{ color:#b42318; }

.muted{ color:var(--muted); }
.small{ font-size:12px; }
.note{ margin-top:10px; color:var(--muted); }

/* Header */
.site-header{ position:sticky; top:0; background:rgba(255,255,255,0.9); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--border); z-index:20; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
.logo{ width:28px; height:28px; border-radius:9px; background:var(--brand); display:inline-block; }
.main-nav{ display:none; gap:16px; }
.cart-link{ font-weight:600; }
.hamburger{ background:#fff; border:1px solid var(--border); border-radius:8px; padding:8px 10px; }
@media(min-width:800px){
  .main-nav{ display:flex; }
  .hamburger{ display:none; }
}

.mobile-nav{ display:none; flex-direction:column; padding:8px 16px; border-bottom:1px solid var(--border); background:#fff; }
.mobile-nav a{ padding:10px 0; border-top:1px dashed #eee; }
.mobile-nav.open{ display:flex; }

/* Hero */
.hero .hero-img{ min-height:240px; background:url('assets/hero.jpg') center/cover no-repeat; border-radius:16px; box-shadow:0 10px 20px rgba(0,0,0,0.05); }
@media(min-width:700px){ .hero .hero-img{ min-height:320px; } }

/* Badges */
.badges .badge{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; }

/* Cards */
.card{ background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 6px 16px rgba(0,0,0,0.04); }
.card-img{ background:#f2f2f2 center/cover no-repeat; aspect-ratio:4/3; }
.card-body{ padding:16px; display:flex; flex-direction:column; gap:12px; }
.sizes{ display:flex; flex-wrap:wrap; gap:8px; }
.size-pill{ border:1px solid var(--border); border-radius:999px; padding:6px 10px; font-size:14px; cursor:pointer; }
.size-pill input{ display:none; }

.qty{ width:70px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; }

.ingredients{ color:var(--muted); }

/* Cart */
.cart-table{ border:1px solid var(--border); border-radius:16px; overflow:hidden; background:#fff; }
.cart-head{ padding:12px 16px; border-bottom:1px solid var(--border); background:#fffdf7; }
.cart-row{ padding:12px 16px; border-bottom:1px solid var(--border); }
.cart-row:last-child{ border-bottom:none; }
.thumb{ width:64px; height:64px; background:#eee center/cover no-repeat; border-radius:10px; }
.totals{ padding:16px; background:#fff; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.totals .grand{ font-size:18px; }

/* Forms */
.field{ display:flex; flex-direction:column; gap:6px; }
.field input, .field textarea{ padding:10px 12px; border:1px solid var(--border); border-radius:10px; width:100%; }
.field.full{ grid-column:1 / -1; }
.narrow{ max-width:800px; }

/* Footer */
.site-footer{ padding:24px 0; border-top:1px solid var(--border); background:#fff; }

/* Utilities */
.hero .actions{ display:flex; gap:8px; margin:14px 0; }

/* Story */
.story-img{ min-height:260px; background:url('assets/story.jpg') center/cover no-repeat; border-radius:16px; box-shadow:0 10px 20px rgba(0,0,0,0.05); }