/* БАЗА */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  padding-bottom: 84px; /* чтобы контент не уезжал под нижнюю панель */
}

/* КРИТИЧНО: скрытие блоков */
.hidden { display: none !important; }

/* Категории */
#cats, .cats, .categories { color: #111; }
.cat, .catItem, .categoryItem, .cats button, #cats button, .catBtn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 14px;
  line-height: 1.2;
  margin: 6px 0;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  color: #111;
  font-weight: 900;
  text-align: left;
}

/* Категории: чтобы текст точно был виден */
#categories, .categories, .cat, .catBtn, .cat-btn, .category, .category button, #categories button {
  color: var(--text, #111827) !important;
}

/* ---------- BOTTOM BAR (Корзина снизу) ---------- */
/* ОДНА версия #bottomBar (без дублей) */
#bottomBar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #0f172a;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

#bottomBar.hidden { display: none !important; }

#bottomBar .btn,
#bottomBar button,
#bottomBar a {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 10px 12px;
  margin-right: 8px;
}

/* Чтобы контент не прятался под bottomBar */
.page, #app {
  padding-bottom: 86px;
}

/* ---------- OVERLAY + SHEET (корзина) ---------- */
/* ВАЖНО: никаких display:none — иначе sheet всегда 0x0 */
#overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
  z-index: 6000;
  display: block;
}

#overlay.open {
  opacity: 1;
  pointer-events: auto;
}

#sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  background: #fff;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 28px rgba(0,0,0,.18);

  transform: translateY(110%);
  transition: transform .16s ease;

  z-index: 7000;
  max-height: 82vh;
  overflow: auto;
  padding: 12px;

  display: block;   /* КРИТИЧНО */
  min-height: 120px; /* чтобы точно не было 0 */
}

#sheet.open {
  transform: translateY(0);
}

/* ---------- ORDER SUCCESS OVERLAY ---------- */
#order-success {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(255,255,255,.92);
  padding: 16px;
}

#order-success .success-box {
  max-width: 520px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
}

/* Кнопка "Вернуться..." — не на весь экран */
#back-to-shop {
  display: inline-block !important;
  width: auto !important;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #111827;
}

/* line-clamp: убираем предупреждения VS Code */
.lineClamp2 { line-clamp: 2; -webkit-line-clamp: 2; }
.lineClamp3 { line-clamp: 3; -webkit-line-clamp: 3; }

#order-success.hidden { 
  display: none !important; 
}

/* ===== FIX: categories text vertical center ===== */
#cats button,
.catBtn,
.cat,
.catItem,
.categoryItem,
.categories button,
#categories button {
  display: flex !important;
  align-items: center !important;   /* ✅ по центру по вертикали */
  justify-content: flex-start;      /* слева */
  min-height: 44px;                /* чтобы было куда центрировать */
  line-height: 1.2 !important;     /* убираем “прилипание” */
  padding-top: 10px;
  padding-bottom: 10px;
}

/* если внутри кнопки есть span/div — тоже центрируем */
#cats button > *,
.catBtn > * {
  align-self: center;
}

.aboutBtn{
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 14px;
  background: #fff;
  padding: 10px 12px;
  font-weight: 800;
  cursor: pointer;
}
.aboutBtn:active{ transform: translateY(1px); }

.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;padding:12px;z-index:9999;}
.modal.hidden{display:none;}
.modalCard{background:#fff;border-radius:16px;width:100%;padding:12px;}
.mName{font-size:18px;font-weight:700;margin:8px 0;}

/* ---------- PRODUCT MODAL ---------- */
.modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  display:flex;
  align-items:flex-end;
  padding:12px;
  z-index:9999;
}
.modal.hidden{display:none;}

.modalCard{
  position:relative;
  background:#fff;
  border-radius:16px;
  width:100%;
  padding:12px;
  max-height: 86vh;        /* чтобы не вылезало за экран */
  overflow:auto;           /* скролл внутри модалки */
}

.mClose{
  position:absolute;
  top:10px; right:10px;
  width:36px; height:36px;
  border:none;
  border-radius:10px;
  background: rgba(0,0,0,.08);
  font-size:26px;
  line-height:36px;
  cursor:pointer;
}

#mImg{
  width:100%;
  height:auto;
  max-height: 55vh;        /* ключ: картинка влезает */
  object-fit: contain;     /* ключ: не обрезается и не уезжает */
  display:block;
  border-radius:12px;
  background:#f3f4f6;
}

.mName{font-size:18px;font-weight:700;margin:10px 0 6px;}
.mPrice{font-size:16px;opacity:.8;margin-bottom:10px;}
.mAdd{width:100%;height:44px;border-radius:12px;border:none;}

.mActions{
  margin-top: 14px;
}

/* чтобы кнопки/счётчик внутри модалки были большими и кликабельными */
#productModal .actions button,
#productModal .mActions button{
  min-height: 44px;
  font-size: 16px;
}

/* Горизонтальные +/- в модалке товара */
#productModal .actions,
#productModal .mActions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* кнопки + и - */
#productModal .actions button:not(#mAdd),
#productModal .mActions button:not(#mAdd) {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 22px;
}

/* КНОПКА "В КОРЗИНУ" — нормальная */
#mAdd {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
}

/* FORCE: кнопка "В корзину" в модалке должна быть широкой */
#productModal #mAdd,
#productModal button#mAdd,
#productModal .mAdd {
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  display: block !important;
}