/* Рамка макета: шапка склада, меню Марины, подвал, пульт и плашка «будущее» (спека 028, T003).
   Шапка склада двухстрочная на любой ширине, поэтому одной высоты везде. */

/* ---------- Шапка склада ---------- */
.wh-head { background: var(--surface); box-shadow: var(--shadow-soft); }
.wh-head-in { max-width: var(--page); margin: 0 auto; padding: var(--sp-1) var(--side); }
.wh-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 64px; }
.wh-row + .wh-row { margin-top: var(--sp-2); }
.head-link {
  display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 56px;
  font-family: var(--display); font-weight: 700; font-size: var(--fs-caption);
  color: var(--ink); text-decoration: none;
}
.head-link:hover { text-decoration: underline; }
.head-quiet {
  display: inline-flex; align-items: center; min-height: 56px; padding: 0 var(--sp-1);
  font-size: var(--fs-caption); color: var(--ink-dim); text-decoration: underline;
}
.head-spacer { min-width: 1px; }

/* Переключатель магазина: одно имя; список раскрывается; либо неактивная подпись на том же месте */
.cab { position: relative; }
.cab > summary, .cab-label {
  display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 56px;
  font-family: var(--display); font-size: var(--fs-caption); font-weight: 700; color: var(--ink);
  list-style: none; cursor: pointer;
}
.cab > summary::-webkit-details-marker { display: none; }
.cab-label { cursor: default; color: var(--ink-dim); font-weight: 400; }
.cab-list {
  position: absolute; z-index: 20; left: 0; top: 100%; min-width: 260px;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-card);
  padding: var(--sp-1); display: flex; flex-direction: column; gap: var(--sp-1);
}
.cab-list a {
  display: flex; align-items: center; min-height: 56px; padding: 0 var(--sp-3);
  font-size: var(--fs-caption); color: var(--ink); text-decoration: none; border-radius: var(--radius);
}
.cab-list a[aria-current="true"] { background: var(--surface-2); font-weight: 700; }
.wh-row > .cab, .wh-row > .cab-label { flex: 1 1 0; min-width: 0; }
.wh-row > .head-quiet, .wh-row > .head-link { flex: none; }
/* Длинное имя магазина: по словам, без слогового переноса; стрелка рядом с последним словом */
.wh-head .cab > summary, .wh-head .cab-label { display: block; min-height: 56px; padding: 11px 0; line-height: 1.3; hyphens: none; overflow-wrap: normal; word-break: normal; }
.wh-head .cab > summary .ico { margin-left: 4px; }

/* Шапка склада на экране 1920: ссылки и переключатель магазина 26px */
.wh-head .head-link, .wh-head .head-quiet, .wh-head .cab > summary, .wh-head .cab-label, .wh-head .cab-list a { font-size: 26px; }
.wh-head .head-link, .wh-head .head-quiet { min-height: 64px; }
.wh-head .cab > summary, .wh-head .cab-label { min-height: 64px; padding: 15px 0; }
.wh-head .cab-list { min-width: 360px; }
.wh-head .cab-list a { min-height: 64px; }

/* ---------- Подвал ---------- */
.foot { max-width: var(--page); margin: 0 auto; padding: var(--sp-4) var(--side) var(--sp-5); font-size: var(--fs-caption); color: var(--ink-dim); }

/* ---------- Рамка Марины ---------- */
.m-shell { display: grid; grid-template-columns: var(--m-menu) minmax(0, 1fr); min-height: 100vh; }
/* Меню: 12 пунктов по 44px с промежутком 12px и три заголовка групп помещаются в 768px, потому что
   название и «Выйти» стоят в верхней строке .m-top, а не в колонке меню */
.m-aside {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 12px var(--sp-3);
  background: var(--surface); box-shadow: var(--shadow-soft);
}
.m-brand { font-family: var(--display); font-weight: 700; font-size: 20px; }
.m-nav { list-style: none; display: flex; flex-direction: column; gap: var(--m-gap); }
.m-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  min-height: var(--m-target); padding: 0 var(--sp-2); border-radius: var(--radius);
  font-family: var(--display); font-size: var(--m-text); color: var(--ink); text-decoration: none;
}
.m-nav a:hover { background: var(--surface-2); }
.m-nav a[aria-current="page"] { background: var(--surface-2); font-weight: 700; box-shadow: inset 4px 0 0 var(--ink); }
.m-nav .m-group { padding: 0 var(--sp-2); font-size: var(--m-caption); font-weight: 700; color: var(--ink-dim); line-height: 22px; margin-bottom: -8px; }
.m-badge {
  min-width: 26px; padding: 0 var(--sp-1); border-radius: 13px; text-align: center;
  background: var(--ink); color: var(--surface); font-size: var(--m-caption); font-weight: 700; line-height: 26px;
}
.m-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-2) var(--side) 0; max-width: calc(var(--page) + 2 * var(--side)); margin: 0 auto; }
.m-top .cab > summary, .m-top .cab-label { min-height: var(--m-target); font-size: var(--m-text); }
.m-top .cab-list { left: auto; right: 0; }
.m-right { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }
.m-who { font-size: var(--m-text); }
.m-out { display: inline-flex; align-items: center; min-height: var(--m-target); padding: 0 var(--sp-2); color: var(--ink-dim); font-size: var(--m-text); }
.m-soon-mark { font-size: var(--m-caption); color: var(--ink-dim); }
.m-top .cab-list a { min-height: var(--m-target); font-size: var(--m-text); }

/* ---------- Только сайт: выход - кнопка формы (закрывает сессию POST-ом) в виде тихой ссылки; подпись магазина в списке ---------- */
/* Ссылка «К содержимому»: без фокуса нулевой ширины (не цель и не видна), по фокусу - обычная ссылка шапки */
.skip-link { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: hidden; white-space: nowrap; }
.skip-link:focus { width: auto; height: auto; min-height: 56px; padding: 0 var(--sp-2); display: inline-flex; align-items: center; background: var(--surface, #fff); z-index: 10; }
/* Выход - кнопка склада: цель 72px, вид тихой ссылки */
.wh-head button.head-quiet { min-height: 72px; }
a.m-brand { display: inline-flex; align-items: center; min-height: 44px; }
button.head-quiet, button.m-out { background: none; border: 0; font-family: inherit; cursor: pointer; }
.cab-list small { font-size: inherit; color: var(--ink-dim); }
.cab > summary { max-width: 100%; }
a.m-brand { color: var(--ink); text-decoration: none; }