/* UI-03c-dock (R182): нижняя мобильная навигация Hub Garage (inc/mobile-dock.php). Подключается в <head> после hub.css:
   резерв нижнего стека задан до первой отрисовки и не зависит от JS. Порог 680 px — тот же, где шапка переходит в мобильную
   сетку и при прокрутке прячет строку разделов (hub.css); на 681 px и шире панели и резерва нет.
   Нижний стек — одна переменная: --hg-bottom-stack = высота панели + safe-area снизу. Safe-area разложена по сторонам
   (--hg-safe-*), проверка может подставить своё значение. Полоса во всю ширину вплотную к низу, плотная поверхность
   наших токенов, backdrop-filter выключен. Новых цветов нет: тень и затемнение — значения hub.css и catalog-ux-r47.css.
   r2: пока открыта клавиатура и панель скрыта (html.hg-dock-keyboard), нижний стек — только safe-area: от него же считаются
   отступ body и scroll-padding-bottom. Лист без JS — нативный popover, с JS — класс .is-open. */
.hg-dock,.hg-dock-sheet{display:none}
@media (max-width:680px){
 :root{--hg-safe-bottom:env(safe-area-inset-bottom,0px);--hg-safe-left:env(safe-area-inset-left,0px);--hg-safe-right:env(safe-area-inset-right,0px);
  --hg-dock-h:58px;--hg-bottom-stack:calc(var(--hg-dock-h) + var(--hg-safe-bottom))}
 html{scroll-padding-bottom:calc(var(--hg-bottom-stack) + 12px)}
 /* Клавиатура телефона: панели нет на экране — резерв и прокрутка к полю как без панели, плюс safe-area. */
 html.hg-dock-keyboard{--hg-bottom-stack:var(--hg-safe-bottom);scroll-padding-bottom:var(--hg-bottom-stack)}
 /* Единственный резерв: штатный отступ Ecomus (.ecomus-navigation-bar-show, 67px) при включённой опции не складывается с нашим. */
 body.hg-store,body.hg-store.ecomus-navigation-bar-show{padding-bottom:var(--hg-bottom-stack)}
 .hg-dock{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;z-index:60;left:0;right:0;bottom:0;box-sizing:border-box;height:calc(var(--hg-dock-h) + var(--hg-safe-bottom));margin:0;
  padding:4px calc(4px + var(--hg-safe-right)) var(--hg-safe-bottom) calc(4px + var(--hg-safe-left));background:var(--hg-white);color:var(--hg-muted);
  border-top:1px solid var(--hg-line);box-shadow:0 -10px 28px #171b2210;-webkit-backdrop-filter:none;backdrop-filter:none;visibility:visible;
  transition:transform .22s var(--hg-ease),visibility 0s}
 html[data-theme=dark] .hg-dock{box-shadow:0 -10px 28px #0005}
 /* Клавиатура телефона: панель уходит вниз transform; её высота не зависит от резерва. */
 .hg-dock.is-keyboard{transform:translateY(calc(100% + 12px));visibility:hidden;transition:transform .22s var(--hg-ease),visibility 0s .22s}
 .hg-dock .hg-dock-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:50px;margin:0;padding:0 1px;
  border:0;border-radius:10px;background:transparent;color:inherit;font:inherit;font-size:12px;font-weight:500;line-height:1.2;letter-spacing:0;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background-color .15s var(--hg-ease),color .15s var(--hg-ease)}
 /* Ecomus задаёт ссылкам и кнопкам transition:all — кольцо фокуса появлялось бы через промежуточный цвет. */
 .hg-dock-sheet :is(a,button){transition:background-color .15s var(--hg-ease),color .15s var(--hg-ease)}
 /* …и кнопкам — «блик» button:hover::after (анимация shine): в панели и листе его нет. */
 .hg-dock button::after,.hg-dock-sheet button::after{content:none}
 .hg-dock-label{max-width:100%;white-space:nowrap}
 .hg-dock-icon{position:relative;display:block;width:24px;height:24px;transition:transform .12s var(--hg-ease)}
 .hg-dock-icon>svg{display:block;width:24px;height:24px}
 /* Кнопка «Ещё» — <button>: hover/focus Ecomus для кнопок (тёмная заливка) здесь не применяются. */
 .hg-dock .hg-dock-item:is(:hover,:focus){background:transparent;box-shadow:none;color:inherit}
 .hg-dock .hg-dock-item:hover{color:var(--hg-ink)}
 .hg-dock .hg-dock-item:active{background:var(--hg-soft)}
 .hg-dock-item:active .hg-dock-icon{transform:scale(.9)}
 .hg-dock .hg-dock-item:focus-visible{outline:3px solid var(--hg-red);outline-offset:-3px}
 /* Текущий раздел — цвет акцента, вес и метка над иконкой; при открытом «Ещё» выделен только он. */
 .hg-dock .hg-dock-item:is([aria-current],[aria-expanded=true],[data-has-current-child=true]){color:var(--hg-red);font-weight:700}
 .hg-dock-item:is([aria-current],[aria-expanded=true],[data-has-current-child=true])::before{content:"";position:absolute;top:-4px;left:50%;width:24px;height:3px;margin-left:-12px;border-radius:0 0 3px 3px;background:currentColor}
 .hg-dock.is-more-open .hg-dock-item:is([aria-current],[data-has-current-child=true]):not([aria-expanded=true]){color:var(--hg-muted);font-weight:500}
 .hg-dock.is-more-open .hg-dock-item:not([aria-expanded=true])::before{content:none}
 .hg-dock-cart-count{position:absolute;top:-6px;left:14px;box-sizing:border-box;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--hg-red);color:#fff;
  box-shadow:0 0 0 2px var(--hg-white);font-size:10px;font-weight:700;line-height:18px;text-align:center}
 html[data-theme=dark] .hg-dock-cart-count{color:#231b1b}
 .hg-dock-cart-count[data-count="0"]{display:none}
 /* «Ещё»: лист над панелью; панель остаётся видимой и закрывает его повторным нажатием. Без JS — popover: сброс его
    стилей браузера (рамка, поля, Canvas, размер по содержимому); :popover-open — отдельным правилом, чтобы браузер без popover
    не отбросил остальные. Затемнение — кнопка закрытия без фокуса по Tab. */
 .hg-dock-sheet{position:fixed;z-index:59;inset:0 0 var(--hg-bottom-stack);width:auto;height:auto;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible}
 .hg-dock-sheet.is-open{display:block}
 .hg-dock-sheet:popover-open{display:block}
 html.hg-dock-js .hg-dock-sheet:not(.is-open){display:none}
 .hg-dock-scrim{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:#0009;box-shadow:none;cursor:default}
 .hg-dock-sheet .hg-dock-scrim:is(:hover,:focus,:active){background:#0009;box-shadow:none}
 .hg-dock-panel{position:absolute;left:calc(8px + var(--hg-safe-left));right:calc(8px + var(--hg-safe-right));bottom:8px;box-sizing:border-box;max-height:calc(100% - 24px);overflow:auto;
  overscroll-behavior:contain;padding:8px 16px 16px;background:var(--hg-white);color:var(--hg-ink);border:1px solid var(--hg-line);border-radius:14px;box-shadow:var(--hg-shadow)}
 .hg-dock-sheet.is-open .hg-dock-scrim{animation:hg-dock-fade .2s linear}
 .hg-dock-sheet.is-open .hg-dock-panel{animation:hg-dock-rise .24s var(--hg-ease)}
 .hg-dock-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-right:-8px}
 .hg-dock-panel-head h2{margin:0;font-size:18px;line-height:1.3;color:var(--hg-ink)}
 .hg-dock-close{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--hg-ink);cursor:pointer}
 .hg-dock-panel .hg-dock-close:is(:hover,:focus){background:transparent;box-shadow:none;color:var(--hg-ink)}
 .hg-dock-panel .hg-dock-close:active{background:var(--hg-soft)}
 .hg-dock-group{padding:8px 0 6px;border-top:1px solid var(--hg-line)}
 .hg-dock-group h3{margin:4px 0 2px;font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.02em;color:var(--hg-muted)}
 .hg-dock-group ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;margin:0;padding:0;list-style:none}
 .hg-dock-group a{display:flex;align-items:center;min-height:44px;font-size:14px;line-height:1.35;color:var(--hg-ink);text-decoration:none}
 .hg-dock-group a[aria-current]{color:var(--hg-red);font-weight:700}
 html:lang(ja) .hg-dock-group a{word-break:auto-phrase;line-break:strict}
 .hg-dock-prefs{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding-top:10px;border-top:1px solid var(--hg-line)}
 .hg-dock-languages{display:flex;gap:4px}
 .hg-dock-languages a{display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:8px;font-size:13px;font-weight:600;color:var(--hg-ink);text-decoration:none}
 .hg-dock-languages a[aria-current]{background:var(--hg-soft);color:var(--hg-red)}
 .hg-dock-theme{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--hg-muted);border-radius:22px;background:transparent;color:var(--hg-ink);font:inherit;font-size:13px;cursor:pointer}
 .hg-dock-panel .hg-dock-theme:is(:hover,:focus){background:transparent;box-shadow:none;color:var(--hg-ink);border-color:var(--hg-muted)}
 .hg-dock-panel .hg-dock-theme:active{background:var(--hg-soft)}
 .hg-dock-theme svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
 .hg-dock-theme .hg-sun-icon,html[data-theme=dark] .hg-dock-theme .hg-moon-icon{display:none}
 html[data-theme=dark] .hg-dock-theme .hg-sun-icon{display:block}
 .hg-dock-sheet :focus-visible{outline:3px solid var(--hg-red);outline-offset:2px}
}
@keyframes hg-dock-fade{from{opacity:0}}
@keyframes hg-dock-rise{from{opacity:0;transform:translateY(12px)}}
@media (max-width:360px){.hg-dock .hg-dock-item{font-size:11px}}
@media (prefers-reduced-motion:reduce){
 .hg-dock,.hg-dock.is-keyboard,.hg-dock-icon{transition:none}
 .hg-dock-item:active .hg-dock-icon{transform:none}
 .hg-dock-sheet.is-open :is(.hg-dock-scrim,.hg-dock-panel){animation:none}
}
@media (forced-colors:active){
 .hg-dock{border-top-color:CanvasText}
 .hg-dock-item:is([aria-current],[aria-expanded=true],[data-has-current-child=true]){text-decoration:underline}
 .hg-dock-item:is([aria-current],[aria-expanded=true],[data-has-current-child=true])::before{background:Highlight}
 /* UI-03d: при открытом листе выделен только «Ещё» — как вне forced-colors. */
 .hg-dock.is-more-open .hg-dock-item:not([aria-expanded=true]){text-decoration:none}
 .hg-dock-panel{border-color:CanvasText}
}
@media print{.hg-dock,.hg-dock-sheet{display:none!important}body.hg-store{padding-bottom:0!important}}