/* Korrto 2026: стили шапки и подвала, которых нет в прототипе (этап 2). Подключается в header.php после assets/css/site.css. */

/* Лупа в шапке — ссылка на /search/ (без JS работает как обычный переход) */
a.icon-btn--search { display: inline-grid; place-items: center; color: inherit; }

/* Ссылка «Все результаты» в быстром поиске */
.srch__all { margin-top: 6px; }
.srch__all svg { width: 16px; height: 16px; }

/* Мега-меню и колонка «Каталог» выводятся сервером: пустых пунктов не показываем */
.mega__roles:empty, .mega__types:empty { display: none; }

/* Выезжающая панель корзины (K26.drawer, bx/js/core.js): раскрывается при добавлении, сворачивается во вкладку у края */
.mini { position: fixed; right: 0; top: 96px; z-index: 70; display: flex; align-items: flex-start; transition: transform .35s var(--ease); max-width: 100vw; }
.mini.is-collapsed { transform: translateX(calc(100% - 52px)); }
.mini__tab { flex: none; width: 52px; height: 52px; display: grid; place-items: center; align-content: center; gap: 2px; background: var(--ink); color: #fff; border-radius: 14px 0 0 14px; position: relative; }
.mini__tab svg { width: 20px; height: 20px; }
.mini__tab span { font: 600 11px var(--f-mono); line-height: 1; }
.mini__panel { width: min(340px, calc(100vw - 52px)); background: var(--paper); border: 1px solid var(--line-strong); border-right: 0; border-radius: 0 0 0 16px; box-shadow: -12px 16px 40px -16px rgba(0,0,0,.35); display: flex; flex-direction: column; max-height: calc(100svh - 120px); }
.mini__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; font-size: 15px; }
.mini__x { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
.mini__x:hover { background: var(--mist); }
.mini__x svg { width: 18px; height: 18px; }
.mini__list { list-style: none; margin: 0; padding: 0 16px; overflow-y: auto; display: grid; gap: 12px; }
.mini__list li { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; }
.mini__img { width: 46px; height: 62px; border-radius: 8px; background: var(--mist); overflow: hidden; }
.mini__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini__txt { display: grid; gap: 2px; min-width: 0; }
.mini__txt b { font-size: 13.5px; font-weight: 560; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mini__txt i { font-style: normal; font-size: 12px; color: var(--ink-3); }
.mini__q { font: 600 13px var(--f-mono); white-space: nowrap; }
.mini__foot { padding: 14px 16px 16px; display: grid; gap: 12px; border-top: 1px solid var(--line); margin-top: 12px; }
.mini__sum { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.mini__sum b { font-size: 17px; }
.mini .btn { height: 46px; justify-content: center; }
@media (max-width: 760px) { .mini { top: auto; bottom: 88px; } .mini__panel { border-radius: 16px 0 0 16px; } }

/* Тост «Добавлено…»: в скрытом состоянии уходит за край целиком (раньше выглядывал снизу на телефоне) */
.toast { transform: translate(-50%, calc(100% + 48px)); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.toast.is-on { visibility: visible; transition: transform .45s var(--ease), visibility 0s; }

/* Бургер: иконка меню ↔ крестик; разделы сайта в меню, нижняя панель и липкая покупка — только на телефоне */
.burger__close, .mega__more, .tabbar, .pbar { display: none; }
.burger[aria-expanded="true"] .burger__open { display: none; }
.burger[aria-expanded="true"] .burger__close { display: contents; }
.burger__open { display: contents; }

/* ---------- Телефон (20.10.2026): нижняя панель, удобное меню, поля без автозума iOS, тап-зоны от 36–44px ---------- */
@media (max-width: 767px) {
  :root { --tab-h: 58px; --safe-b: env(safe-area-inset-bottom, 0px); --pbar-h: 68px; }

  /* Нижняя панель: каталог, поиск, избранное, кабинет, корзина. Иконки из шапки переехали сюда, в шапке — меню и логотип */
  .head__tools { display: none; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: calc(var(--tab-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: rgba(255,255,255,.97); border-top: 1px solid var(--line); }
  @supports (backdrop-filter: blur(8px)) { .tabbar { background: rgba(255,255,255,.88); backdrop-filter: saturate(1.4) blur(12px); } }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 520; color: var(--ink-3); -webkit-tap-highlight-color: transparent; }
  .tabbar a[aria-current="page"] { color: var(--ink); }
  .tabbar a:active { background: var(--mist); }
  .tabbar svg { width: 22px; height: 22px; stroke-width: 1.6; }
  .tabbar a[aria-current="page"] svg { stroke-width: 2; }
  .tabbar .badge { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--red); color: #fff; font: 600 10.5px/17px var(--f-mono); text-align: center; display: none; }
  .tabbar .badge.is-on { display: block; }
  .tabbar .badge.bump { animation: cartHit .5s var(--ease); }
  .tabbar a.is-hit svg { animation: cartHit .5s var(--ease); }
  body { padding-bottom: calc(var(--tab-h) + var(--safe-b)); }
  body:has(.pbar) { padding-bottom: calc(var(--tab-h) + var(--pbar-h) + var(--safe-b)); }
  body .toast { bottom: calc(var(--tab-h) + var(--safe-b) + 12px); }
  body.pbar-on .toast { bottom: calc(var(--tab-h) + var(--pbar-h) + var(--safe-b) + 12px); }
  body:has(.mini:not(.is-collapsed)) .toast { visibility: hidden; } /* открытая корзина и так показывает, что добавили */
  body .cookie-note { bottom: calc(var(--tab-h) + var(--safe-b) + 10px); }
  body .mini { bottom: calc(var(--tab-h) + var(--safe-b) + 12px); }
  body.pbar-on .mini { bottom: calc(var(--tab-h) + var(--pbar-h) + var(--safe-b) + 12px); }
  body .mini.is-collapsed { transform: translateX(100%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s .35s; } /* свёрнутая — не нужна, корзина в панели */

  /* Липкая покупка на карточке товара: сумма и «В корзину» над нижней панелью, пока основная кнопка за экраном */
  .pbar { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + var(--safe-b)); z-index: 59; height: var(--pbar-h); padding: 0 var(--gut); background: var(--paper); border-top: 1px solid var(--line-strong); transform: translateY(calc(100% + var(--tab-h) + var(--safe-b))); visibility: hidden; transition: transform .3s var(--ease), visibility 0s .3s; }
  body.pbar-on .pbar { transform: none; visibility: visible; transition: transform .3s var(--ease), visibility 0s; }
  .pbar__sum { flex: 1; min-width: 0; display: grid; gap: 1px; line-height: 1.25; }
  .pbar__sum b { font-size: 16px; font-weight: 640; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pbar__sum b small { font-size: 12px; font-weight: 500; color: var(--ink-3); }
  .pbar__sum b s { display: none; }
  .pbar__sum span { font-size: 12px; color: var(--ink-3); }
  .pbar__btn { flex: none; height: 48px; padding: 0 22px; justify-content: center; font-size: 15px; }

  /* Меню на весь экран под шапкой, страница под ним стоит */
  body.mega-open { overflow: hidden; }
  .mega { height: calc(100svh - var(--head-h)); overscroll-behavior: contain; }
  .mega .wrap { gap: 22px; padding-bottom: calc(28px + var(--tab-h) + var(--safe-b)); }
  .mega__roles a { padding: 13px 0; }
  .mega__roles .mono { white-space: nowrap; }
  .mega__types a { padding: 9px 0; }
  .mega__more { display: grid; gap: 10px; }
  .mega__more nav { display: grid; border-top: 1px solid var(--line); margin-bottom: 6px; }
  .mega__more nav a { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 540; }
  .mega__tel { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 14px; }
  .mega__tel > svg { width: 20px; height: 20px; flex: none; color: var(--red); }
  .mega__tel span { display: grid; gap: 2px; }
  .mega__tel b { font: 600 16px var(--f-mono); }
  .mega__tel i { font-style: normal; font-size: 12.5px; color: var(--ink-3); }
  .mega__cta { height: 52px; justify-content: center; margin-top: 4px; }

  /* Поля ввода 16px: иначе iOS увеличивает страницу при фокусе */
  body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-size: 16px; }

  /* Хлебные крошки — одна строка с прокруткой, а не три строки над товаром */
  body .crumbs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; padding-top: 14px; }
  body .crumbs::-webkit-scrollbar { display: none; }
  body .crumbs > * { flex: none; }

  /* Карточка: размеры, цвета и «избранное» — больше зона нажатия при прежнем виде */
  body .cat-grid .sizes .size, body .sizes .size { position: relative; min-width: 38px; height: 32px; line-height: 30px; font-size: 12.5px; }
  body .sizes .size::before { content: ""; position: absolute; inset: -3px; }
  body .swatches { gap: 12px; }
  body .swatch::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
  body .card__fav { width: 42px; height: 42px; top: 6px; right: 6px; }

  /* Карточка товара: кнопки «−/+» у размеров 44px */
  body .psq__qty { height: 44px; }
  body .psq__qty button { width: 44px; }
  body .psq__req { height: 40px; }
  /* «В корзину» и «в избранное» в одну строку (в прототипе между ними был счётчик, на Битриксе его заменили размеры с количеством) */
  body .buybox__actions { flex-wrap: nowrap; }
  body .buybox__add { order: 0; flex-basis: auto; }
  body .crumbs a { padding: 8px 0; }

  /* Каталог: заголовок компактнее, «Пошив под ваш бренд» — строкой, фильтры и сортировка — липкой строкой под шапкой.
     Товары начинаются примерно с 430px от верха экрана, а не с 600px */
  body .cat-head { gap: 8px; padding: 12px 0 14px; }
  body .cat-head__title { font-size: clamp(34px, 10.5vw, 44px); }
  body .cat-head__meta { margin-top: 8px; font-size: 13px; }
  body .cat-head__brand { flex-direction: row; align-self: flex-start; align-items: center; min-height: 36px; padding: 0; background: none; }
  body .cat-head__brand .mono { display: none; }
  body .cat-head__brand span:last-child { gap: 6px; font-size: 14.5px; font-weight: 560; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
  body .cat-head__brand svg { width: 16px; height: 16px; }
  body .cat-bar { position: sticky; top: var(--head-h); z-index: 40; flex-wrap: wrap; gap: 8px; margin: 0 calc(var(--gut) * -1) 14px; padding: 10px var(--gut); background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); }
  body .cat-bar .cat-bar__filters { flex: none; height: 42px; padding: 0 16px; gap: 8px; justify-content: center; }
  body .cat-bar .cat-bar__n:empty { display: none; }
  body .cat-bar .sort { flex: 1; margin-left: 0; }
  body .cat-bar .sort select { width: 100%; height: 42px; padding: 0 32px 0 14px; }
  body .cat-bar .sort svg { right: 12px; }
}