:root{
  --bg:#fbfaf7;
  --paper:#ffffff;
  --ink:#121212;
  --muted:#5f5f5f;
  --line:rgba(18,18,18,.10);
  --shadow:0 14px 40px rgba(18,18,18,.10);
  --radius:18px;
  --btn:#121212;
  --btnInk:#ffffff;
  --gold:#b59a58;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Arial;
  color:var(--ink);
  background:
    radial-gradient(1100px 500px at 20% -10%, rgba(181,154,88,.10), transparent 55%),
    radial-gradient(900px 450px at 90% 0%, rgba(18,18,18,.06), transparent 50%),
    var(--bg);
}

.wrap{max-width:1020px;margin:0 auto;padding:26px 18px 60px}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:18px;
}

.brand{display:flex;flex-direction:column;line-height:1.1}
.brand .name{
  font-family:"Cormorant Garamond",serif;
  font-weight:600;
  letter-spacing:.04em;
  font-size:26px;
}
.brand .tag{
  font-size:12px;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;
  margin-top:6px;
}

.nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill{
  border:1px solid var(--line);
  background:rgba(255,255,255,.7);
  padding:10px 12px;border-radius:999px;
  text-decoration:none;color:var(--ink);
  font-size:13px;
}
.pill strong{font-weight:600}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  backdrop-filter: blur(8px);
}

.h1{
  font-family:"Cormorant Garamond",serif;
  font-weight:600;
  font-size:38px;
  margin:0 0 6px;
  letter-spacing:.02em;
}
.sub{color:var(--muted);margin:0 0 16px;font-size:14px}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media (max-width: 860px){.grid{grid-template-columns:1fr}}

.media{
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(255,255,255,.65);
}
.media img{display:block;width:100%;height:auto}

.kicker{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 10px;
}
.thumbs{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 860px){
  .thumbs{grid-template-columns: repeat(4, minmax(0, 1fr))}
}
.thumb{
  border:1px solid var(--line);
  background:rgba(255,255,255,.8);
  border-radius:14px;
  padding:8px;
  cursor:pointer;
}
.thumb img{
  width:100%;
  height:72px;
  object-fit:cover;
  border-radius:10px;
  display:block;
}
.thumb:focus{
  outline:none;
  border-color:rgba(181,154,88,.55);
  box-shadow:0 0 0 4px rgba(181,154,88,.14);
}
.title{
  font-family:"Cormorant Garamond",serif;
  font-weight:600;
  font-size:28px;
  margin:0 0 8px;
}
.desc{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 14px}

.price{
  font-size:16px;
  margin:0 0 12px;
}
.price strong{
  font-size:18px;
  letter-spacing:.02em;
}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

input[type=number], input[type=text], input[type=email]{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.9);
  font-size:14px;
  outline:none;
}
input:focus{
  border-color:rgba(181,154,88,.55);
  box-shadow:0 0 0 4px rgba(181,154,88,.14);
}

.btn{
  border:0;
  border-radius:14px;
  padding:12px 14px;
  cursor:pointer;
  font-weight:500;
  font-size:14px;
  letter-spacing:.02em;
  text-decoration:none;
  display:inline-block;
}
.btn-primary{
  background:linear-gradient(180deg, #141414, #0f0f0f);
  color:var(--btnInk);
  box-shadow: 0 12px 22px rgba(0,0,0,.18);
}
.btn-ghost{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
}
.btn-danger{
  background:transparent;
  border:1px solid rgba(0,0,0,.18);
  color:#2a2a2a;
  opacity:.85;
}

.flash{
  border:1px solid rgba(181,154,88,.35);
  background:rgba(181,154,88,.08);
  padding:12px 14px;border-radius:14px;
  margin-bottom:14px;
  font-size:14px;
}

.rule{height:1px;background:var(--line);margin:14px 0}

.fine{
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
  margin:12px 0 0;
}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.7);
  font-size:13px;
}

.panel{
  border:1px solid var(--line);
  background:rgba(255,255,255,.75);
  border-radius:16px;
  padding:16px;
}

.sum-row{display:flex;justify-content:space-between;gap:10px;margin:10px 0;font-size:14px}
.sum-row.total{font-weight:600}

.center{
  text-align:center;
}
.recipe-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 960px){ .recipe-grid{grid-template-columns:1fr} }

.recipe-card{
  border:1px solid var(--line);
  background:rgba(255,255,255,.75);
  border-radius:16px;
  overflow:hidden;
}
.recipe-card .img{
  aspect-ratio: 16 / 10;
  background:rgba(0,0,0,.03);
}
.recipe-card .img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.recipe-card .body{
  padding:14px;
}
.recipe-card .meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.recipe-card .meta span{
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 10px;
  background:rgba(255,255,255,.65);
}