:root{
  --cream:#fbf5ec;
  --cream-dark:#f2e8d8;
  --ink:#2b2218;
  --terracotta:#c0624a;
  --terracotta-dark:#a44f3a;
  --olive:#6f7d4f;
  --gold:#d8a657;
  --muted:#6b6358;
  --radius:16px;
  --shadow:0 10px 30px rgba(43,34,24,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.5;
}
h1,h2,h3{font-family:'Playfair Display',serif; margin:0 0 .4em; line-height:1.15}
p{margin:0 0 .6em}
a{color:inherit}
.container{max-width:1100px; margin:0 auto; padding:0 20px}
img{max-width:100%; display:block}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,245,236,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--cream-dark);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px}
.brand{font-family:'Playfair Display',serif; font-weight:700; font-size:1.15rem; text-decoration:none; color:var(--ink); white-space:nowrap}
.brand em{color:var(--terracotta); font-style:normal}
.main-nav{display:flex; gap:22px; flex-wrap:wrap}
.main-nav a{text-decoration:none; font-weight:500; font-size:.95rem; color:var(--ink); opacity:.8}
.main-nav a:hover{opacity:1; color:var(--terracotta)}
.cart-btn{
  position:relative; border:none; background:var(--terracotta); color:#fff;
  border-radius:999px; width:44px; height:44px; font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.cart-badge{
  position:absolute; top:-4px; right:-4px; background:var(--ink); color:#fff;
  font-size:.65rem; font-weight:700; padding:2px 6px; border-radius:999px; min-width:18px; text-align:center;
}

/* Hero */
.hero{
  background-size:cover; background-position:center;
  color:#fff; padding:90px 0 70px; text-align:center;
}
.hero-inner h1{font-size:2.3rem; max-width:720px; margin-left:auto; margin-right:auto}
.hero-sub{max-width:620px; margin:0 auto 26px; font-size:1.05rem; opacity:.95}
.hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

.btn{
  display:inline-block; padding:13px 26px; border-radius:999px; font-weight:600;
  text-decoration:none; border:none; cursor:pointer; font-size:.97rem; transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--terracotta); color:#fff; box-shadow:0 6px 18px rgba(192,98,74,.35)}
.btn-primary:hover{background:var(--terracotta-dark)}
.btn-whatsapp{background:#25D366; color:#fff}
.btn-vk{background:#2b2218; color:#fff}

/* About */
.about{padding:60px 20px 10px}
.about-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.about-card{
  background:#fff; border-radius:var(--radius); padding:24px 18px; text-align:center;
  box-shadow:var(--shadow); font-size:2rem;
}
.about-card h3{font-size:1rem; font-family:'Inter',sans-serif; font-weight:700; margin:10px 0 6px}
.about-card p{font-size:.88rem; color:var(--muted); margin:0}

/* How to order */
.how, .delivery, .menu{padding:60px 20px}
.how h2, .delivery h2, .menu h2, .contacts h2{text-align:center; font-size:1.8rem}
.section-lead{text-align:center; max-width:600px; margin:0 auto 30px; color:var(--muted)}
.how-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.how-steps{background:#fff; border-radius:var(--radius); padding:26px 28px; box-shadow:var(--shadow)}
.how-steps h3{font-family:'Inter',sans-serif; font-size:1.05rem; margin-bottom:12px}
.how-steps ol, .how-steps ul{margin:0; padding-left:20px; color:var(--ink)}
.how-steps li{margin-bottom:6px}

/* Delivery */
.delivery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.delivery-card{background:#fff; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.delivery-card h3{font-size:1.05rem; font-family:'Inter',sans-serif; margin-bottom:8px}
.delivery-card p{color:var(--muted); font-size:.92rem; margin:0}

/* Menu */
.cat-tabs{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:30px}
.cat-tab{
  border:1px solid var(--cream-dark); background:#fff; padding:9px 18px; border-radius:999px;
  cursor:pointer; font-weight:600; font-size:.9rem; color:var(--muted); transition:.15s;
}
.cat-tab.active{background:var(--terracotta); color:#fff; border-color:var(--terracotta)}
.menu-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px}
.menu-card{
  background:#fff; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:6px;
}
.menu-card .emoji{font-size:1.8rem}
.menu-card h4{font-family:'Inter',sans-serif; font-size:1rem; font-weight:700; margin:4px 0 0}
.menu-card .qty{color:var(--muted); font-size:.85rem}
.menu-card .price{font-size:1.15rem; font-weight:700; color:var(--terracotta-dark); margin-top:4px}
.menu-card .add-btn{
  margin-top:10px; border:none; background:var(--olive); color:#fff; border-radius:999px;
  padding:9px 0; font-weight:600; cursor:pointer; font-size:.9rem;
}
.menu-card .add-btn:hover{background:#5c6840}

/* Contacts */
.contacts{background:var(--ink); color:#fff; padding:60px 20px}
.contacts h2{color:#fff}
.contacts-inner{text-align:center}
.contacts p{color:#d8cfc2; max-width:480px; margin:0 auto 24px}
.contacts-links{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

.site-footer{background:var(--ink); color:#9a9284; text-align:center; padding:18px 20px; font-size:.85rem; border-top:1px solid #443a2c}

/* Cart drawer */
.cart-overlay{
  position:fixed; inset:0; background:rgba(43,34,24,.5); opacity:0; pointer-events:none; transition:opacity .2s; z-index:90;
}
.cart-overlay.open{opacity:1; pointer-events:auto}
.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:380px; max-width:92vw; background:#fff; z-index:91;
  box-shadow:-8px 0 30px rgba(0,0,0,.15); transform:translateX(100%); transition:transform .25s ease;
  display:flex; flex-direction:column; padding:22px; overflow-y:auto;
}
.cart-drawer.open{transform:translateX(0)}
.cart-drawer-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.cart-close{border:none; background:var(--cream-dark); width:34px; height:34px; border-radius:50%; font-size:1rem; cursor:pointer}
.cart-item{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--cream-dark)}
.cart-item-name{font-size:.88rem; font-weight:600}
.cart-item-sub{font-size:.78rem; color:var(--muted)}
.cart-item-qty{display:flex; align-items:center; gap:8px}
.cart-item-qty button{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--cream-dark); background:#fff; cursor:pointer; font-weight:700;
}
.cart-item-price{font-weight:700; font-size:.88rem; min-width:70px; text-align:right}
.cart-remove{border:none; background:none; color:var(--terracotta); cursor:pointer; font-size:.78rem; text-decoration:underline; margin-left:4px}
.cart-empty{color:var(--muted); font-size:.9rem; text-align:center; margin-top:30px}
.cart-total-row{display:flex; justify-content:space-between; align-items:center; font-size:1.1rem; padding:14px 0; border-top:2px solid var(--ink)}

.order-form{display:flex; flex-direction:column; gap:12px; margin-top:6px}
.order-form label{display:flex; flex-direction:column; font-size:.82rem; font-weight:600; color:var(--muted); gap:5px}
.order-form input[type=text], .order-form input[type=tel], .order-form textarea{
  font-family:inherit; font-size:.92rem; padding:10px 12px; border-radius:10px; border:1px solid var(--cream-dark); color:var(--ink); resize:vertical;
}
.radio-row span{display:flex; gap:16px; font-weight:400; font-size:.88rem; color:var(--ink)}
.radio-row label{flex-direction:row; align-items:center; gap:6px; font-weight:400}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.cart-submit{width:100%; margin-top:6px}

.fab-cart{
  display:none; position:fixed; bottom:18px; right:18px; z-index:60;
  background:var(--terracotta); color:#fff; border:none; border-radius:999px;
  padding:14px 20px; font-weight:700; font-size:.95rem; box-shadow:0 8px 24px rgba(192,98,74,.4); cursor:pointer;
}

@media (max-width: 860px){
  .main-nav{display:none}
  .about-grid{grid-template-columns:repeat(2,1fr)}
  .how-grid{grid-template-columns:1fr}
  .delivery-grid{grid-template-columns:1fr}
  .hero-inner h1{font-size:1.8rem}
  .fab-cart{display:block}
  .cart-btn{display:none}
}