:root{
  --green:#2E7D32;
  --text:#111;
  --muted:#666;
  --card:#fff;
  --shadow:0 6px 16px rgba(17,17,17,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter;
  color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ==== Header & top bar ==== */
.app-header{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid #eee; background:#fff;
}
.brand{font-weight:800; letter-spacing:.2px}
.hours{font-size:12px; color:var(--muted)}
.geo-btn{
  margin-left:8px; border:1px solid var(--green); background:#fff; color:var(--green);
  padding:6px 10px; border-radius:999px; font-weight:700; cursor:pointer;
}
.geo-btn:disabled{opacity:.6; cursor:not-allowed}

/* ==== Geo banner ==== */
.geo-banner{display:none; padding:8px 12px; border-bottom:1px solid #eee; font-size:14px}
.geo-banner.ok{display:block; background:#eef6ee; color:#224a25}
.geo-banner.bad{display:block; background:#fff3f0; color:#7a2e21}

/* ==== Tabs ==== */
.tabs{
  display:flex; gap:8px; overflow-x:auto; padding:8px 12px; border-bottom:1px solid #eee;
  -webkit-overflow-scrolling:touch;
}
.tabs a{
  flex:0 0 auto; text-decoration:none; color:#333; background:#f6f6f6;
  padding:8px 12px; border-radius:999px; border:1px solid #e8e8e8;
  font-size:14px; font-weight:600; white-space:nowrap;
}
.tabs a.active{background:var(--green); color:#fff; border-color:var(--green)}

/* ==== Grid & cards ==== */
.grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:12px 12px 84px;
}
@media (min-width:720px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1024px){ .grid{grid-template-columns:repeat(4,1fr)} }

.card{
  background:var(--card); border:1px solid #eee; border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;
}
.card:active{transform:translateY(1px)}
.thumb{aspect-ratio:1/1; width:100%; object-fit:cover; background:#fafafa; display:block}
.card-body{padding:10px 12px; display:flex; flex-direction:column; gap:6px}
.title{
  font-weight:700; font-size:15px; line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em;
}
.price{font-weight:800; font-size:16px}
.actions{display:flex; align-items:center; justify-content:space-between; gap:8px}
.btn{
  padding:8px 12px; border-radius:999px; border:1px solid var(--green);
  background:#2E7D32; color:#fff; font-weight:700; cursor:pointer;
}

/* ==== Bottom cart bar ==== */
.cartbar{
  position:sticky; bottom:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px; background:#fff; border-top:1px solid #eee;
}
.cartbar.hidden{display:none}
.cartbar__cta{
  padding:10px 14px; border-radius:999px; background:#2E7D32; color:#fff; font-weight:800; border:none; cursor:pointer;
}
.cartbar__summary{display:flex; align-items:center; gap:6px; font-weight:600}
.cartbar__icon{
  width:18px; height:18px; color:var(--green); background:currentColor;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39A2 2 0 0 0 9.61 16H19a2 2 0 0 0 2-1.61L23 6H6"/></svg>') no-repeat center/contain;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39A2 2 0 0 0 9.61 16H19a2 2 0 0 0 2-1.61L23 6H6"/></svg>') no-repeat center/contain;
}

/* ==== Sheet (product modal) ==== */
.sheet{position:fixed; inset:0; display:none; z-index:60}
.sheet.show{display:block}
.sheet__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.25)}
.sheet__panel{
  position:absolute; left:0; right:0; bottom:0; background:#fff;
  border-top-left-radius:16px; border-top-right-radius:16px;
  transform:translateY(100%); transition:transform .18s ease; max-height:85vh; display:flex; flex-direction:column;
}
.sheet.show .sheet__panel{transform:translateY(0)}
.sheet__handle{width:44px; height:5px; background:#ddd; border-radius:999px; margin:8px auto 4px}
.sheet__content{padding:8px 14px 14px; overflow:auto}
.sheet-img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; background:#f6f6f6; margin-bottom:6px}
.desc{color:var(--muted); font-size:14px}
.sheet__x{
  position:absolute; right:10px; top:10px; background:#2E7D32; color:#fff; border:none;
  width:32px; height:32px; border-radius:50%; font-weight:900; line-height:32px; text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.15); cursor:pointer;
}

/* ==== Options (chips) ==== */
.options{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 8px}
.options-chips .opt{
  padding:8px 10px; border-radius:10px; border:1.5px solid #e3e3e3; background:#fcfcfc;
  font-weight:600; font-size:13px; line-height:1; cursor:pointer;
}
.opt-title{font-weight:700; margin-top:8px}
.opt-hint{font-size:12px; color:var(--muted); margin-top:-2px}

/* Flavor chips grid */
#flavorOptions{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.opt.flavor{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; border:1px solid rgba(0,0,0,.08); border-radius:10px; background:#fff; cursor:pointer;
}
.opt.flavor .nm{font-weight:500}
.opt.flavor .dot{width:10px; height:10px; border-radius:999px; border:1px solid rgba(0,0,0,.08); margin-right:6px}
.opt.flavor .heat{font-size:12px; opacity:.9}

/* Активное состояние чипсов */
.options-chips .opt.active,
.opt.flavor.active{
  border-color:var(--green);
  background:#eef6ee;
  box-shadow:inset 0 0 0 1px rgba(46,125,50,.15);
  color:#0f3d12;
}
.options-chips .opt:focus-visible{outline:2px solid var(--green); outline-offset:2px}

/* ==== Qty & add button ==== */
.qty{display:flex; align-items:center; gap:12px; margin:8px 0}
.qty button,.qtybtn{
  width:36px; height:36px; border-radius:50%; border:1px solid #e6e6e6; background:#f7f7f7; font-weight:800; cursor:pointer;
}
.add-btn{
  width:100%; padding:12px 14px; background:#2E7D32; color:#fff; border:none; border-radius:12px; font-weight:800; cursor:pointer;
}

/* ==== Included dips (нейтральный вид, без «доп. дипов») ==== */
#dipsChoice{display:grid; grid-template-columns:1fr; gap:8px; margin-top:8px}
.dip-row{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  padding:10px 12px; border:1px solid #e6e6e6; border-radius:10px; background:#fff;
}
.dip-name{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dip-ctr{display:flex; align-items:center; gap:6px}
.dip-btn{
  width:28px; height:28px; border:1px solid #e3e3e3; background:#f7f7f7; border-radius:6px; font-weight:800; line-height:26px; cursor:pointer;
}
.dip-count{min-width:26px; text-align:center; font-weight:800}
.dip-row.active{
  border-color:var(--green);
  box-shadow:inset 0 0 0 1px rgba(46,125,50,.12);
  background:#fafdfa;
}

/* ==== Checkout ==== */
.checkout{position:fixed; inset:0; display:none; z-index:70}
.checkout.show{display:block}
.checkout__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.25)}
.checkout__panel{
  position:absolute; right:0; top:0; bottom:0; width:min(620px,100%);
  background:#fff; border-left:1px solid #eee; display:flex; flex-direction:column;
}
.checkout__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid #eee;
}
.checkout__body{padding:12px 14px; display:flex; flex-direction:column; gap:12px; overflow:auto}
.checkout__body label{display:flex; flex-direction:column; gap:6px; font-size:14px}
.checkout__body input, .checkout__body textarea{
  padding:10px 12px; border:1px solid #e5e5e5; border-radius:10px; font-size:14px;
}
.checkout__body textarea{min-height:84px; resize:vertical}
.delivery-mode{margin-bottom:8px; font-weight:700}

.summary{border:1px solid #eee; border-radius:12px; padding:10px}
.total{display:flex; align-items:center; justify-content:space-between; font-weight:800; margin-top:8px}
.wa-btn{padding:12px 14px; background:#2E7D32; color:#fff; border:none; border-radius:12px; font-weight:800; cursor:pointer}

.address-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:8px}
@media (max-width: 480px){
  .address-grid{grid-template-columns:1fr 1fr}
  #coStreet{grid-column:1 / -1}
}

/* ==== Delivery / pickup segment ==== */
.segment{display:flex; gap:6px}
.seg{
  flex:1 1 auto; padding:10px 12px; border:1px solid #e6e6e6; background:#f9f9f9; border-radius:999px; font-weight:700; cursor:pointer;
}
.seg.active{background:#2E7D32; color:#fff; border-color:#2E7D32}

/* ==== Checkout items ==== */
.co-item{display:grid; grid-template-columns:1fr auto; gap:6px; padding:8px 0; border-bottom:1px dashed #eee}
.co-title{font-weight:600}
.co-controls{display:flex; align-items:center; gap:6px}
.co-qtybtn{width:30px; height:30px; border:1px solid #e6e6e6; background:#f7f7f7; border-radius:6px; font-weight:800; cursor:pointer}
.co-delete{border:1px solid #ffd1d1; background:#fff2f2; border-radius:6px; padding:6px 8px; cursor:pointer}
.co-sum{min-width:80px; text-align:right; font-weight:700}