/* ============================================================
   КАПРИН — телефон: меню и нижняя панель (dock-2, 22.10.2026)
   Проблемы, которые исправляет файл:
   1. Меню по бургеру стало белым на белом: decor.css перекрасил панель
      в полупрозрачный белый, а текст остался белым → пункты не читались.
   2. Первый пункт меню («Главная») уходил под шапку (inset:0 + padding 70px
      при высоте шапки 120px).
   3. Нижняя панель: подписи 11 px (мелко), AI-кнопка выпирает на 20 px
      и перекрывает соседей, фон непрозрачный.
   ============================================================ */

@media (max-width: 900px) {

  /* ---------- 1. Меню: тёмное прозрачное стекло ---------- */
  .navbar {
    background:
      linear-gradient(180deg, rgba(16, 16, 19, .99), rgba(9, 9, 11, .985)) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-right: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 14px 0 40px rgba(0, 0, 0, .34) !important;
    /* шапка сама сообщает свою высоту при открытии (--nav-top),
       поэтому первый пункт никогда не прячется под ней */
    top: var(--nav-top, 120px) !important;
    /* выше баннера cookies (950), иначе он перекрывает нижние пункты */
    z-index: 960 !important;
    padding: 8px 0 calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .navbar .container { padding: 0 8px !important; }

  .nav-link {
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    white-space: normal !important;
    color: #f1f5f9 !important;
    font-size: 16.5px !important;
    font-weight: 700 !important;
    padding: 15px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
  }
  .nav-link.on,
  .nav-link:active {
    color: #fff !important;
    background: rgba(255, 255, 255, .07) !important;
    border-radius: 10px !important;
    /* текущий раздел — спокойная синяя полоска слева, без рамки */
    box-shadow: inset 3px 0 0 #5ba4e0 !important;
  }
  .nav-cat-row { border-bottom: 1px solid rgba(255, 255, 255, .10) !important; }
  .nav-cat-more { color: #f1f5f9 !important; }
  .nav-cat .nav-drop {
    background: rgba(255, 255, 255, .07) !important;
    border: 1px solid rgba(255, 255, 255, .08);
  }
  .nav-drop a { color: #e2e8f0 !important; font-size: 15px !important; }
  .nav-drop a:active { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }
  .nav-mob-extra { border-top: 1px solid rgba(255, 255, 255, .14) !important; }
  /* акция: на тёмном фоне оранжевый читается */
  .navbar a.nav-link[href="/promo"] {
    color: #fdba74 !important;
    background: rgba(234, 88, 12, .16) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 0 1px rgba(234, 88, 12, .45);
    border-radius: 12px;
    margin: 4px 6px;
  }

  /* заголовок меню сверху, чтобы было понятно, что открылось */
  .navbar .container::before {
    content: "Меню";
    display: block;
    order: -1;
    margin: 0 6px 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
  }

  /* ---------- 2. Нижняя панель: компактнее, заметнее, стекло ---------- */
  .mob-bar-pro {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    /* высота 62 px вместо 72 — на экране остаётся больше контента */
    min-height: 62px !important;
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 16px 16px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .85) !important;
    /* прозрачное стекло: страница просвечивает, но текст читается */
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(246, 250, 254, .78)) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow:
      0 -1px 0 rgba(15, 23, 42, .06),
      0 -10px 28px rgba(15, 23, 42, .14) !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch;
  }

  .mob-bar-pro a,
  .mob-bar-pro button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    /* подпись крупнее (11 → 12.5 px) и темнее — видно без прищуривания */
    font-size: 12.5px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -.01em;
    color: #26313f !important;
    padding: 5px 2px 4px !important;
    min-height: 52px !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .58)) !important;
    border: 1px solid rgba(15, 23, 42, .06) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95);
    -webkit-tap-highlight-color: transparent;
  }
  .mob-bar-pro a svg,
  .mob-bar-pro button svg {
    width: 23px;
    height: 23px;
    stroke-width: 2.1;
  }
  .mob-bar-pro a.on,
  .mob-bar-pro a:active,
  .mob-bar-pro button.on,
  .mob-bar-pro button:active {
    color: #0b1220 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(233, 240, 248, .78)) !important;
    border-color: rgba(15, 23, 42, .14) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -1px 0 rgba(15, 23, 42, .06),
      0 2px 8px rgba(15, 23, 42, .10) !important;
  }

  /* AI по центру: было −20 px и 72 px высоты (перекрывал соседей) */
  .mob-bar-pro .mob-ai {
    margin-top: -9px !important;
    min-height: 60px !important;
    height: auto !important;
    border-radius: 17px !important;
    color: #fff !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 46%),
      linear-gradient(135deg, rgba(23, 23, 26, .92), rgba(224, 82, 12, .90)) !important;
    border: 1px solid rgba(255, 255, 255, .32) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .42),
      0 8px 20px rgba(224, 82, 12, .30) !important;
    font-size: 12.5px !important;
  }
  .mob-bar-pro .mob-ai svg { width: 22px !important; height: 22px !important; }
  /* активный раздел: синий текст + лёгкая синяя подложка */
  .mob-bar-pro a.on,
  .mob-bar-pro button.on {
    color: #0b3f73 !important;
    background: linear-gradient(180deg, rgba(219, 234, 254, .92), rgba(200, 222, 247, .70)) !important;
    border-color: rgba(37, 99, 185, .28) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -2px 0 #2563b9 !important;
  }
  .mob-bar-pro .mob-ai.on {
    color: #fff !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 46%),
      linear-gradient(135deg, rgba(23, 23, 26, .92), rgba(224, 82, 12, .90)) !important;
    border-color: rgba(255, 255, 255, .32) !important;
  }
  .mob-bar-pro .mob-call.on { color: #15803d !important; }

  /* баннер cookies не должен липнуть к панели */
  #caprin-cookie { bottom: calc(71px + env(safe-area-inset-bottom, 0px)) !important; }

  .mob-bar-pro .cart-count {
    top: 2px;
    right: 22%;
    min-width: 17px;
    height: 17px;
    line-height: 17px;
    font-size: 11px;
    font-weight: 900;
    background: #ef4444;
    color: #fff;
    box-shadow: 0 2px 6px rgba(239, 68, 68, .45);
  }

  /* контент и «купить» не должны прятаться за панелью */
  body { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; }
  #prod-sticky, #cart-sticky:not([hidden]) {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* очень узкие экраны: подписи чуть меньше, но не 11 px */
@media (max-width: 380px) {
  .mob-bar-pro a, .mob-bar-pro button { font-size: 12px !important; }
  .mob-bar-pro a svg, .mob-bar-pro button svg { width: 21px; height: 21px; }
  .mob-bar-pro { min-height: 58px !important; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* очень узкие экраны: логотип не должен переноситься на две строки */
@media (max-width: 380px) {
  .glogo-wm { white-space: nowrap; font-size: 15px !important; letter-spacing: .2px !important; }
  .glogo svg { height: 30px !important; width: 30px !important; }
  .glogo { gap: 8px !important; }
}