/* === UI BASE (shared look like products_list) === */

* { box-sizing: border-box; }

:root{
  --bg:#f3f4f6;
  --card:#ffffff;
  --border:#e5e7eb;
  --border-strong:#d1d5db;
  --text:#111827;
  --muted:#6b7280;
  --accent:#ff7a00;
  --accent-soft:#fff4e5;
  --ok:#16a34a;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{ color:inherit; text-decoration:none; }

/* ===== TOP BAR ===== */
.top-bar{
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position:sticky;
  top:0;
  z-index:30;
}
.top-title{ display:flex; flex-direction:column; gap:2px; }
.top-title h1{ margin:0; font-size:18px; font-weight:800; letter-spacing:-0.02em; }
.top-title span{ font-size:12px; color:var(--muted); }

/* header nav buttons */
.mode-switch{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
.mode-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  font-size:12px;
  color:var(--muted);
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  transition:all .15s ease;
  white-space:nowrap;
}
.mode-link:hover{ border-color:var(--accent); }
.mode-link.active{
  background:var(--accent);
  color:#fff;
  font-weight:800;
  border-color:var(--accent);
}

/* cart in top bar (desktop) */
.cart-icon{
  margin-left:6px;
  background:var(--accent);
  border-radius:999px;
  padding:8px 12px;
  color:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:14px;
  border:1px solid rgba(0,0,0,0.05);
}
.cart-count{
  background:#ef4444;
  color:#fff;
  font-weight:800;
  border-radius:999px;
  padding:2px 8px;
  font-size:12px;
  line-height:1.2;
}

/* ===== MOBILE BOTTOM NAV (same style as map/products) ===== */
.mobile-bottom-nav{ display:none; }

/* ===== Bottom sheets ===== */
.sheet-backdrop{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 66px; /* важно: не накрываем нижнее меню */
  background: rgba(17,24,39,0.45);
  z-index: 9998;
  display: none;
}

.sheet{
  position:fixed;
  left:0; right:0;
  bottom:66px;
  z-index:9999;
  background:#fff;
  border-top-left-radius:18px;
  border-top-right-radius:18px;
  box-shadow:0 -12px 30px rgba(15,23,42,0.18);
  transform:translateY(110%);
  transition:transform .18s ease;
  max-height:calc(78vh - env(safe-area-inset-bottom));
  overflow:hidden;
  display:none;
}
.sheet-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background:#fff;
  gap:10px;
}
.sheet-title{ font-weight:800; font-size:16px; }
.sheet-close{
  border:none;
  background:#f3f4f6;
  width:40px; height:40px;
  border-radius:12px;
  cursor:pointer;
  font-size:18px;
  flex:0 0 auto;
}
.sheet-body{
  padding:12px 12px 18px;
  overflow:auto;
  max-height:calc(78vh - 56px);
}

body.sheet-open .sheet-backdrop{ display:block; }
body.sheet-open .sheet{ display:block; transform:translateY(0); }

/* ===== Mobile rules ===== */
@media (max-width: 768px){
  .top-bar{ flex-direction:column; align-items:flex-start; }

  

  .mobile-bottom-nav{
    display:flex;
    position:fixed;
    left:0; right:0; bottom:0;
    height:66px;
    background:#fff;
    border-top:1px solid var(--border);
    z-index:9997;
  }
  .mobile-bottom-nav a,
  .mobile-bottom-nav button{
    flex:1;
    text-align:center;
    color:var(--muted);
    font-size:11px;
    padding:8px 4px;
    position:relative;
    border:none;
    background:transparent;
    cursor:pointer;
    font-family:inherit;
  }
  .mobile-bottom-nav .icon{
    display:block;
    font-size:22px;
    line-height:1;
    margin-bottom:4px;
  }
  .mobile-bottom-nav a.active,
  .mobile-bottom-nav button.active{
    color:var(--accent);
    font-weight:800;
  }
  .mobile-bottom-nav .badge{
    position:absolute;
    top:6px;
    right:26%;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    background:#ef4444;
    color:#fff;
    font-size:11px;
    font-weight:800;
    display:none;
    align-items:center;
    justify-content:center;
    line-height:1;
  }

  /* чтобы контент не залезал под нижнее меню */
  .main{ padding-bottom:82px; }
}
@media (max-width: 768px){
  .top-cart{ display:inline-flex !important; }
}