/* ==========================================================================
   lux-menu-mobile.css — мобильное меню, переработка (fix_verstka/11-menu-mobile)
   Подключать ПОСЛЕ lux-shop.css. Все переменные берутся из .lx.

   Старые классы .lx-drawer__row / __group / __links / __phone остаются
   в lux-shop.css и не переопределяются: если что-то пойдёт не так,
   достаточно отключить этот файл и вернуть прежнюю разметку из git.

   Новый префикс — .lx-dw. Ничего вне .lx-drawer не затрагивается.

   Из исходного набора не перенесены .lx-dw-search (поиск убрали из меню
   по просьбе) и .lx-dw-sheet (лист адреса — вместо него переиспользован
   попап #popupSelCity, тот же, что открывает .lx-geo__addr в шапке).
   ========================================================================== */

/* ---------- каркас ---------- */
/* Панель шире прежних 88%: на 360px телефоне 88% давали 317px, и строки
   каталога со счётчиком и шевроном сжимались. */
.lx-drawer__panel{width:92%;max-width:420px;overflow:hidden;position:relative}

/* Шапка закреплена: список каталога прокручивается, а крестик остаётся
   на месте. Раньше при прокрутке до телефона выйти из меню было нечем. */
.lx-dw-head{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;
  align-items:center;justify-content:space-between;height:64px;
  padding:0 12px 0 20px;background:#fff;border-bottom:1px solid var(--line)}
.lx-dw-logo{font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:-.02em}
.lx-dw-logo i{font-style:normal;color:var(--violet)}
.lx-dw-x{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;color:var(--ink);border-radius:8px}
.lx-dw-x:hover{background:var(--bg4)}

.lx-dw-body{position:absolute;inset:64px 0 0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;display:flex;flex-direction:column}
.lx-dw-body::after{content:"";flex:none;height:28px}

/* ---------- адрес ---------- */
/* Рамка, иконка и шеврон: прежняя строка «Алматы · укажите адрес доставки»
   ничем не отличалась от надписи, и её не нажимали. */
.lx-dw-geo{display:flex;align-items:center;gap:11px;width:calc(100% - 40px);
  margin:16px 20px 4px;min-height:52px;padding:8px 12px 8px 14px;
  border:1px solid var(--line);border-radius:10px;background:#fff;text-align:left}
.lx-dw-geo:hover{border-color:var(--line3)}
.lx-dw-geo svg{flex:none;width:17px;height:17px;stroke:var(--violet)}
.lx-dw-geo span{flex:1;display:flex;flex-direction:column;gap:2px}
.lx-dw-geo b{font-size:14.5px;font-weight:700}
.lx-dw-geo em{font-style:normal;font-size:12px;color:var(--mute)}
.lx-dw-geo i{flex:none;font-style:normal;font-size:17px;color:var(--mute2)}

/* ---------- надпись группы ---------- */
/* Линейки разделяют пункты только внутри каталога. Группы разделены
   надписями и воздухом — иначе линейка делает две разные работы. */
/* --mute, а не --mute2: в системе надписи-ярлыки решены через .lx-kicker
   (lux-shop.css:42) именно этим токеном. --mute2 при 10.5px даёт 2.5:1. */
.lx-dw-kick{padding:22px 20px 8px;font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}

/* ---------- каталог ---------- */
.lx-dw-cat{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;
  padding:0 16px 0 20px;border-bottom:1px solid #f2f1ef;background:#fff;text-align:left}
.lx-dw-cat:hover{background:var(--bg3)}
.lx-dw-cat b{flex:1;font-size:16px;font-weight:600;letter-spacing:-.01em}
/* Счётчик — не украшение: по нему решают, стоит ли открывать раздел.
   --mute2 при 12px нечитаем, поэтому основной приглушённый тон. */
.lx-dw-cat em{flex:none;font-style:normal;font-size:12px;color:var(--ink2)}
.lx-dw-cat i{flex:none;font-style:normal;font-size:18px;color:#c4bfb9}

/* ---------- подборки ---------- */
/* Чипами, а не строками каталога: категория раскрывает уровень, подборка
   ведёт на страницу. Разное поведение — разная форма. */
.lx-dw-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px}
.lx-dw-chip{display:flex;align-items:center;height:40px;padding:0 16px;
  border:1px solid var(--line2);border-radius:20px;font-size:14px;font-weight:600}
.lx-dw-chip:hover{border-color:var(--ink);color:var(--ink)}
/* Фиолетовый вариант оставлен на будущее (плашка со скидкой), пока не
   используется — нет расчёта максимальной активной скидки одним запросом. */
.lx-dw-chip--sale{gap:8px;padding:0 8px 0 16px;border-color:#ddd6f7;
  background:#f6f3ff;color:var(--violet-fg)}
.lx-dw-chip--sale:hover{background:var(--violet-bg);border-color:#ddd6f7;color:var(--violet-fg)}
.lx-dw-chip--sale b{display:flex;align-items:center;height:24px;padding:0 8px;
  border-radius:12px;background:var(--violet-fg);color:#fff;font-size:11px;font-weight:800}

/* ---------- кабинет ---------- */
/* Своя карточка: вход был текстовой ссылкой в списке рядом с «Блогом». */
.lx-dw-acc{display:flex;flex-direction:column;gap:12px;margin:26px 20px 0;
  padding:16px;border-radius:12px;background:var(--bg2)}
.lx-dw-acc__in{display:flex;align-items:center;justify-content:center;width:100%;
  height:50px;border-radius:10px;background:var(--ink);color:#fff;font-size:12px;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.lx-dw-acc__in:hover{background:#2a2827;color:#fff}
.lx-dw-acc__me{display:flex;align-items:center;gap:12px;width:100%;height:50px;
  padding:0 14px;border-radius:10px;background:var(--ink);color:#fff;text-align:left}
.lx-dw-acc__me:hover{background:#2a2827;color:#fff}
.lx-dw-acc__me span{flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--violet-fg);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800}
.lx-dw-acc__me b{flex:1;font-size:14.5px;font-weight:700}
.lx-dw-acc__me em{flex:none;font-style:normal;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute2)}
.lx-dw-acc__two{display:flex;gap:8px}
.lx-dw-acc__two a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  height:46px;border:1px solid var(--line2);border-radius:10px;background:#fff;
  font-size:13.5px;font-weight:600}
.lx-dw-acc__two a:hover{border-color:var(--ink);color:var(--ink)}
.lx-dw-acc__two b{display:flex;align-items:center;justify-content:center;min-width:20px;
  height:20px;padding:0 5px;border-radius:10px;background:var(--violet-bg);
  color:var(--violet-fg);font-size:11px;font-weight:800}

/* ---------- сервисные ссылки ---------- */
/* 44px вместо прежних ~33px: gap:14px давал строку в 19px текста плюс
   воздух, но нажималась только сама строка. */
.lx-dw-info{display:flex;flex-direction:column;padding:26px 20px 0}
.lx-dw-info a{display:flex;align-items:center;min-height:44px;font-size:14px;color:var(--ink2)}
.lx-dw-info a:hover{color:var(--ink)}

/* ---------- подвал: телефон и языки ---------- */
.lx-dw-foot{margin-top:24px;padding:20px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:16px}
.lx-dw-tel{display:flex;flex-direction:column;gap:3px;color:var(--ink)}
.lx-dw-tel:hover{color:var(--ink)}
.lx-dw-tel em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute)}
.lx-dw-tel b{font-size:19px;font-weight:800;letter-spacing:-.01em}
.lx-dw-tel span{font-size:12px;color:var(--mute)}
/* Языки переключают раз в жизни, а стояли вторым блоком сверху и точками
   между собой выглядели как текст, а не как выбор. */
.lx-dw-lang{display:flex;gap:6px}
.lx-dw-lang a{width:52px;height:40px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);border-radius:9px;font-size:13px;font-weight:700;color:var(--ink2)}
.lx-dw-lang a:hover{border-color:var(--ink);color:var(--ink)}
.lx-dw-lang a.is-on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- второй уровень ---------- */
.lx-dw-sub{position:absolute;inset:64px 0 0;z-index:2;background:#fff;
  overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .22s ease}
.lx-dw-sub.is-on{transform:none}
.lx-dw-sub::after{content:"";flex:none;height:28px}
.lx-dw-back{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;
  padding:0 20px;border-bottom:1px solid var(--line);background:#fff;text-align:left}
.lx-dw-back:hover{background:var(--bg3)}
.lx-dw-back i{flex:none;font-style:normal;font-size:20px;color:var(--mute2)}
.lx-dw-back b{flex:1;font-size:16px;font-weight:700;letter-spacing:-.01em}
/* Общая страница категории отдельной строкой: она нужна чаще всего, когда
   подраздел заранее неизвестен, а из списка подразделов до неё не добраться. */
.lx-dw-all{display:flex;align-items:center;justify-content:space-between;
  min-height:52px;padding:0 20px;border-bottom:1px solid #f2f1ef;background:var(--bg3);
  font-size:13.5px;font-weight:700;color:var(--violet-fg)}
.lx-dw-all:hover{color:var(--violet-fg);background:var(--violet-bg)}
.lx-dw-all span{font-size:12px;font-weight:600;color:var(--ink2)}
/* Заголовок группы внутри второго уровня. «По типу средства», «по задаче»,
   «зона вокруг глаз» — это группировки, а не категории: на десктопе они
   серые и не ссылки. Начертание то же, что у .lx-dw-kick на первом уровне,
   чтобы «надпись группы» читалась одинаково на обоих экранах. */
.lx-dw-subkick{padding:22px 20px 8px;font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
/* Первая группа идёт сразу под «все товары раздела» — верхний отступ там
   лишний, иначе между ними провал в 22px. */
.lx-dw-all + .lx-dw-subkick{padding-top:14px}

.lx-dw-subrow{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 20px;
  border-bottom:1px solid #f6f5f3}
.lx-dw-subrow:hover{background:var(--bg3)}
.lx-dw-subrow b{flex:1;font-size:14.5px;font-weight:400}
.lx-dw-subrow em{flex:none;font-style:normal;font-size:12px;color:var(--ink2)}

/* ---------- узкий телефон ---------- */
@media (max-width:360px){
  .lx-dw-cat{min-height:54px;padding-left:16px}
  .lx-dw-cat b{font-size:15px}
  .lx-dw-cat em{display:none}
  .lx-dw-lang a{width:46px}
}

@media (prefers-reduced-motion:reduce){
  .lx-dw-sub{transition:none}
}