/* === Salty & Bold — Theme === */

/* 1) Design tokens (easy to tweak later) */
:root{
  --bg: #fff8f1;               /* bakery paper */
  --card: #ffffff;
  --ink: #3b2a1d;              /* cocoa brown */
  --muted: #7a6b62;
  --accent: #2aa8a5;           /* sea-salt teal */
  --accent-2: #f2a45e;         /* caramel/orange CTA */
  --ring: rgba(42,168,165,.25);
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 18px;
}

/* 2) Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, #fff1e4 20%, transparent 60%),
    radial-gradient(1000px 500px at 110% 0%, #fbe9d9 15%, transparent 55%),
    var(--bg);
}

/* 3) Typography */
h1,h2,h3{font-family:"Playfair Display", serif; letter-spacing:.2px; color:var(--ink)}
h1{font-size:42px; line-height:1.1; margin:.1rem 0 .5rem}
h2{font-size:26px; margin:.25rem 0 .5rem}
p.muted{color:var(--muted); margin:.25rem 0}

/* 4) Layout helpers */
.container{max-width:1060px; margin:0 auto; padding:0 20px}
.section{padding:18px}
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  border:1px solid rgba(0,0,0,.04);
}

/* 5) Top nav */
.sb-nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(150%) blur(6px);
  background:rgba(255,248,241,.75);
  border-bottom:1px solid rgba(0,0,0,.05);
}
.sb-nav .row{display:flex; align-items:center; justify-content:space-between; height:64px}
.sb-brand{display:flex; gap:10px; align-items:center; font-weight:800; color:var(--ink); text-decoration:none}
.sb-brand img{height:26px}
.sb-menu{display:flex; gap:18px; align-items:center}
.sb-menu a{
  color:var(--ink); text-decoration:none; font-weight:600; opacity:.85
}
.sb-menu a:hover{opacity:1}

/* 6) Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border-radius:999px;
  font-weight:700; text-decoration:none; border:0; cursor:pointer;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{
  background:var(--accent-2); color:#2b180a;
  box-shadow:0 8px 24px rgba(242,164,94,.35);
}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{
  background:transparent; border:1px solid rgba(0,0,0,.08); color:var(--ink)
}
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700; background:rgba(42,168,165,.12); color:var(--accent);
  border:1px solid var(--ring);
}

/* 7) Hero */
.hero{
  display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center;
  padding:26px; overflow:hidden;
}
.hero .art{
  height:220px; border-radius:14px; background:
   radial-gradient(240px 120px at 20% 20%, rgba(42,168,165,.12), transparent 60%),
   url('/img/crumbs.png'), linear-gradient(to bottom right, #fff, #fffaf5);
  border:1px dashed rgba(0,0,0,.05);
}

/* 8) Product highlight grid */
.products{
  padding:16px 18px 18px;
}
.product-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.product{
  display:grid; grid-template-rows:auto 1fr auto; gap:10px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow);
  transition: transform .08s ease, box-shadow .2s ease;
}
.product:hover{transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.12)}
.product img{
  width:100%; height:150px; object-fit:cover; border-radius:12px; background:#faf5ef
}
.product .title{font-weight:800}
.price{font-weight:800}
.price small{font-weight:600; color:var(--muted)}

/* 9) Footer */
footer{
  margin-top:28px; padding:26px 0 40px; color:var(--muted);
}
.footer-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start;
}

/* 10) Responsive tweaks */
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .product-grid{grid-template-columns:1fr}
  h1{font-size:34px}
}

