/* ==========================================================================
   Мобильная версия - оболочка. Кит `ui_kits/mobile/`, редакции 4-6.1.

   Здесь только то, что ниже 768 работает иначе, а не «чуть меньше»: своя
   шапка со знаком по центру и нижний модуль вместо десктопной шапки.
   Записка кита говорит прямо: нижний модуль - мобильная механика, на 768
   и выше его нет.

   Порядок подключения: `tokens-base` → `tokens-desktop` → `kit` →
   страничный лист → `narrow` → `mobile`. Последним, потому что только он
   имеет право отменять шапку целиком.

   `narrow.css` при этом остаётся: он держит промежуток 768-1199, для
   которого листов нет ни в одном ките.

   Имена классов сдвинуты там, где кит спорит сам с собой: `.ac-hd`
   в мобильном ките - знак в шапке, а в десктопном - вся шапка; `.ac-panel`
   в мобильном - содержимое модуля, в десктопном - белая карточка;
   `.ac-ph` в мобильном - шапка панели, в десктопном - шапка страницы.
   Здесь они называются `ac-mh`, `ac-dpanel`, `ac-pnh`: два разных смысла
   на одном имени однажды сойдутся в общем файле.
   ========================================================================== */

/* Модуль и шапка существуют только на узком экране. Выше - десктопная
   шапка, и оба элемента убраны из потока, а не спрятаны прозрачностью:
   иначе они ловили бы фокус с клавиатуры на десктопе. */
.ac-top,
.ac-dock,
.ac-dscrim { display: none; }

@media (max-width: 767px) {

  .ac-hd { display: none; }

  /* --- шапка: знак по центру ---------------------------------------------- */
  .ac-top { position: sticky; top: 0; z-index: 30; display: block;
            background: var(--ac-glass);
            backdrop-filter: blur(16px) saturate(1.15);
            -webkit-backdrop-filter: blur(16px) saturate(1.15);
            border-bottom: 1px solid var(--ac-line); }
  .ac-mh { display: grid; justify-items: center; gap: var(--ac-s1); padding: 10px 0; }
  .ac-mh__w { font-family: var(--ac-font-logo); font-size: var(--ac-size-logo);
              line-height: 1; letter-spacing: var(--ac-track-logo); }
  /* Слово между волосяными линейками с ромбовидными наконечниками - лок
     из кита. Линейки нарисованы псевдоэлементами, а не картинкой: знак
     должен наследовать цвет текста. */
  .ac-mh__l { display: flex; align-items: center; gap: 7px; color: var(--ac-ink-mute); }
  .ac-mh__l span { font-size: 9px; letter-spacing: var(--ac-track-sub); }
  .ac-mh__l i { width: 38px; height: 1px; background: currentColor; }

  /* --- нижний модуль ------------------------------------------------------ */
  .ac-dock { position: fixed; display: block;
             left: var(--ac-dock-inset); right: var(--ac-dock-inset);
             bottom: calc(var(--ac-dock-bottom) + env(safe-area-inset-bottom, 0px));
             z-index: 60; }
  .ac-sw { position: absolute; width: 0; height: 0; opacity: 0; margin: 0; pointer-events: none; }

  .ac-shell { display: flex; flex-direction: column; max-height: 78dvh; overflow: hidden;
              padding: var(--ac-s3); border-radius: var(--ac-r-dock);
              background: var(--ac-glass-dock);
              backdrop-filter: blur(16px) saturate(1.15);
              -webkit-backdrop-filter: blur(16px) saturate(1.15);
              box-shadow: var(--ac-elev-dock); }

  .ac-grab { display: none; flex: 0 0 auto; width: var(--ac-grab-w); height: var(--ac-grab-h);
             margin: 2px auto 10px; border-radius: var(--ac-r-pill); background: var(--ac-line-strong); }
  .ac-dpanel { display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto;
               padding: 0 var(--ac-s1) var(--ac-s3); scrollbar-width: none; }
  .ac-dpanel::-webkit-scrollbar { display: none; }
  .ac-rule { display: none; flex: 0 0 auto; height: 1px;
             margin: 0 calc(-1 * var(--ac-s3)) var(--ac-s3); background: var(--ac-line); border: 0; }

  /* Раскрытие без скрипта: значение переключателя решает, что показать. */
  .ac-sw:not([value="closed"]):checked ~ .ac-shell .ac-grab,
  .ac-sw:not([value="closed"]):checked ~ .ac-shell .ac-rule { display: block; }
  .ac-sw[value="menu"]:checked ~ .ac-shell .ac-dpanel--menu { display: block; }

  .ac-row { flex: 0 0 auto; display: flex; align-items: center; gap: var(--ac-s2); }
  .ac-gap { flex: 1 1 auto; }

  /* Кнопки-призраки 40 × 40, зона тапа доведена до 44 псевдоэлементом -
     визуальный размер при этом не растёт. */
  .ac-gh { position: relative; display: inline-flex; align-items: center; justify-content: center;
           gap: 6px; height: var(--ac-dock-cta); min-width: var(--ac-dock-cta);
           padding: 0 var(--ac-s3); border: 0; border-radius: var(--ac-r-pill);
           background: var(--ac-ghost); color: var(--ac-ink); font-size: var(--ac-size-sm);
           cursor: pointer; }
  .ac-gh::after { content: ""; position: absolute;
                  inset: calc((var(--ac-dock-cta) - var(--ac-tap)) / 2); }
  .ac-gh--ic { width: var(--ac-dock-cta); padding: 0; }
  .ac-gh--on { background: var(--ac-cta); color: var(--ac-on-ink); }

  /* «Заявка» - единственное цветное пятно на экране; цвет сезонный. */
  .ac-cta { position: relative; display: inline-flex; align-items: center; justify-content: center;
            height: var(--ac-dock-cta); padding: 0 var(--ac-s5); border: 0;
            border-radius: calc(var(--ac-dock-cta) / 2);
            background: var(--ac-cta); color: var(--ac-on-ink);
            font-size: var(--ac-size-sm); font-weight: var(--ac-w-med);
            white-space: nowrap; cursor: pointer; }
  .ac-cta:hover, .ac-cta:active { color: var(--ac-on-ink); }
  .ac-cta:active { background: var(--ac-cta-press); }
  .ac-cta::after { content: ""; position: absolute;
                   inset: calc((var(--ac-dock-cta) - var(--ac-tap)) / 2) 0; }

  .ac-badge { position: absolute; top: -2px; right: -2px; display: grid; place-items: center;
              min-width: var(--ac-badge); height: var(--ac-badge); padding: 0 5px;
              border-radius: calc(var(--ac-badge) / 2);
              background: var(--ac-ink); color: var(--ac-on-ink);
              font-size: var(--ac-size-xs); font-weight: var(--ac-w-semi); font-style: normal;
              box-shadow: 0 0 0 2px var(--ac-surface); }

  /* Обводка фокуса на видимой кнопке: сам переключатель нулевого размера,
     и обводка на нём не видна никому. Тот же приём, что у выбора варианта
     на странице изделия. */
  .ac-dock:has(.ac-sw:focus-visible) .ac-gh--menu { outline: 2px solid var(--ac-focus); outline-offset: 2px; }

  /* --- содержимое панели -------------------------------------------------- */
  .ac-pnh { display: flex; align-items: center; justify-content: space-between;
            gap: var(--ac-s3); margin-bottom: var(--ac-s3); }
  .ac-pnh h2 { font-family: var(--ac-font-display); font-size: var(--ac-size-h3);
               font-weight: var(--ac-w-semi); letter-spacing: -.015em; }
  .ac-x { display: inline-flex; align-items: center; justify-content: center;
          width: 32px; height: 32px; border-radius: var(--ac-r-pill);
          background: var(--ac-ghost); cursor: pointer; }
  .ac-grp { padding-top: var(--ac-s4); margin-top: var(--ac-s4); border-top: 1px solid var(--ac-line); }
  .ac-grp:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
  .ac-grp__t { display: block; margin-bottom: var(--ac-s2); font-size: var(--ac-size-xs);
               letter-spacing: var(--ac-track-caps); text-transform: uppercase;
               color: var(--ac-ink-mute); }
  .ac-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--ac-s3); }
  .ac-menu a { display: flex; align-items: center; justify-content: space-between;
               gap: var(--ac-s2); min-height: var(--ac-tap); font-size: var(--ac-size-sm); }
  .ac-menu em { font-style: normal; font-family: var(--ac-font-mono);
                font-size: var(--ac-size-nano); color: var(--ac-ink-mute); }
  .ac-menu--one { grid-template-columns: 1fr; }
  .ac-mfoot { display: grid; gap: 2px; padding-top: var(--ac-s4); margin-top: var(--ac-s4);
              border-top: 1px solid var(--ac-line); }
  .ac-mfoot__t { font-family: var(--ac-font-display); font-size: var(--ac-size-h3);
                 font-weight: var(--ac-w-semi); }

  /* Притемнение под раскрытым модулем. */
  .ac-dscrim { position: fixed; inset: 0; z-index: 50; display: block;
               background: var(--ac-scrim); opacity: 0; pointer-events: none;
               transition: opacity var(--ac-dur) var(--ac-ease); }
  body:has(.ac-sw:not([value="closed"]):checked) .ac-dscrim { opacity: 1; pointer-events: auto; }

  /* Модуль висит поверх страницы, значит последняя строка не должна
     оставаться под ним. */
  .ac-ft { padding-bottom: calc(var(--ac-dock-cta) + var(--ac-s10)); }

  /* --- баннер о cookie: над модулем, не поверх него ----------------------- */
  /* Перекрыть постоянное действие служебной полосой - худшее, что можно
     сделать с первым экраном. */
  .ac-cook { left: var(--ac-dock-inset); right: var(--ac-dock-inset);
             bottom: calc(var(--ac-dock-bottom) + var(--ac-dock-cta)
                          + var(--ac-s3) * 2 + var(--ac-s2)
                          + env(safe-area-inset-bottom, 0px));
             width: auto; padding: var(--ac-s4);
             background: var(--ac-glass-dock);
             backdrop-filter: blur(16px) saturate(1.15);
             -webkit-backdrop-filter: blur(16px) saturate(1.15);
             box-shadow: var(--ac-elev-dock); }
  .ac-cook__a { flex-wrap: wrap; }
  /* Пока модуль раскрыт, баннер уходит: он стоит ровно там, куда растёт
     панель, и накрывал бы её содержимое. Ответить на баннер можно и после -
     он никуда не денется. */
  body:has(.ac-sw:not([value="closed"]):checked) .ac-cook { display: none; }
  /* Пока баннер поднят, подсказка героя не спорит с ним за нижнюю треть. */
  body:has(.ac-cook) .ac-hero__h { visibility: hidden; }

  /* --- сетка каталога: две колонки ---------------------------------------- */
  /* Кадр 170 × 170 достаточен, чтобы отличить огранку, форму шинки и цвет
     металла; экран показывает шесть изделий вместо трёх. Так в ките, с ответом
     на открытый вопрос - не три и не одна. */
  .ac-grid,
  .ac-grid--3 { grid-template-columns: 1fr 1fr; gap: var(--ac-s2); }
  .ac-card { gap: var(--ac-s2); padding: var(--ac-s2) var(--ac-s2) var(--ac-s3); }
  .ac-card__p { font-size: var(--ac-size-body); }
}