/**
 * Шапка и футер сайта (модуль site-chrome).
 * Подключается через include/site-chrome.php → site_chrome_styles_once()
 * или явной ссылкой в <head> (тогда задайте $GLOBALS['site_chrome_css_injected'] = true).
 */

.site-chrome {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.site-chrome--header {
  display: block;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Лого: фиксированный бокс, light/dark через opacity (без display:none → без мигания при SPA). */
.header__logo-mark {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: var(--header-logo-width, calc(var(--header-logo-height, 38px) * 68 / 38));
  height: var(--header-logo-height, calc(var(--header-height, 56px) - 18px));
  max-height: var(--header-logo-height, calc(var(--header-height, 56px) - 18px));
  contain: strict;
}

.header__logo-mark .logo-light,
.header__logo-mark .logo-dark {
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: 100%;
  max-width: var(--header-logo-width, 120px);
  max-height: 100%;
  object-fit: contain;
  object-position: left center;
  display: block !important;
  transition: none !important;
}

.header__logo-mark .logo-dark {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.header__logo-mark .logo-light {
  opacity: 1;
  visibility: visible;
}

[data-theme="dark"] .header__logo-mark .logo-light {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

[data-theme="dark"] .header__logo-mark .logo-dark {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Во время SPA/LK-навигации — зафиксировать видимое лого (без пересчёта display/opacity). */
html.shop-spa-swapping .header__logo-mark .logo-light,
html.shop-nav-swapping .header__logo-mark .logo-light,
html.shop-spa-swapping .header__logo-mark .logo-dark,
html.shop-nav-swapping .header__logo-mark .logo-dark {
  display: block !important;
  transition: none !important;
}

html.shop-spa-swapping[data-theme="dark"] .header__logo-mark .logo-light,
html.shop-nav-swapping[data-theme="dark"] .header__logo-mark .logo-light {
  opacity: 0 !important;
  visibility: hidden !important;
}

html.shop-spa-swapping[data-theme="dark"] .header__logo-mark .logo-dark,
html.shop-nav-swapping[data-theme="dark"] .header__logo-mark .logo-dark {
  opacity: 1 !important;
  visibility: visible !important;
}

html.shop-spa-swapping:not([data-theme="dark"]) .header__logo-mark .logo-light,
html.shop-nav-swapping:not([data-theme="dark"]) .header__logo-mark .logo-light {
  opacity: 1 !important;
  visibility: visible !important;
}

html.shop-spa-swapping:not([data-theme="dark"]) .header__logo-mark .logo-dark,
html.shop-nav-swapping:not([data-theme="dark"]) .header__logo-mark .logo-dark {
  opacity: 0 !important;
  visibility: hidden !important;
}

html.shop-spa-swapping .header__logo-mark {
  width: var(--header-logo-width, 68px);
  min-width: var(--header-logo-width, 68px);
  height: var(--header-logo-height, 38px);
  min-height: var(--header-logo-height, 38px);
}

@media (max-width: 768px) {
  .header__logo-text {
    display: none !important;
  }

  html.shop-spa-swapping .header__logo-mark,
  html.shop-nav-swapping .header__logo-mark {
    width: var(--header-logo-width, min(120px, 38vw));
    min-width: var(--header-logo-width, min(120px, 38vw));
    height: var(--header-logo-height, var(--header-control-height, 40px));
    min-height: var(--header-logo-height, var(--header-control-height, 40px));
  }
}

@media (max-width: 360px) {
  html.shop-spa-swapping .header__logo-mark,
  html.shop-nav-swapping .header__logo-mark {
    width: var(--header-logo-width, min(120px, 38vw));
    min-width: var(--header-logo-width, min(120px, 38vw));
    height: var(--header-logo-height, var(--header-control-height, 36px));
    min-height: var(--header-logo-height, var(--header-control-height, 36px));
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Вне главной — как .index-top-sticky: липкость на обёртке. У самого .header стоит
 * overflow:hidden (контент строки); в части WebKit это мешает sticky на самом header.
 */
body:not(.page-index) .site-chrome--header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--card);
  align-self: flex-start;
  width: 100%;
}
body:not(.page-index) .site-chrome--header .header {
  position: relative;
  top: auto;
  z-index: auto;
}

.site-chrome--footer {
  display: block;
  margin-top: auto;
  flex-shrink: 0;
  /* Палитра футера: заголовки и ссылки колонок — один приглушённый цвет; hover — акцент (синий) */
  --sf-bg: #1a1a2e;
  --sf-text: #c4c9d4;
  --sf-heading: #9ca3af;
  --sf-link-hover: var(--primary, #005bff);
  --sf-muted: #9099b0;
  --sf-border: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .site-chrome--footer {
  --sf-bg: #10121a;
  --sf-text: #c8cedd;
  --sf-heading: #a8b4d0;
  --sf-link-hover: var(--primary, #4d9aff);
  --sf-muted: #8f97ac;
  --sf-border: rgba(255, 255, 255, 0.1);
}

/* Футер */
.site-chrome .site-footer {
  background: var(--sf-bg) !important;
  color: var(--sf-text) !important;
  padding: 40px 0 20px;
  margin-top: 40px;
}

.site-chrome .footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.site-chrome .footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-chrome .footer-col h4 {
  color: var(--sf-heading) !important;
  font-size: 0.9rem;
  margin: 0 0 4px;
  font-weight: 600;
}

.site-chrome .footer-col a {
  color: var(--sf-heading) !important;
  font-size: 0.85rem;
  text-decoration: none !important;
  transition: color 0.2s;
}

.site-chrome .footer-col a:hover {
  color: var(--sf-link-hover) !important;
  text-decoration: none !important;
}

.site-chrome .footer-col a:focus-visible {
  outline: 2px solid var(--sf-link-hover);
  outline-offset: 2px;
}

/* Ссылка в строке копирайта (название магазина) — синяя, как основные ссылки сайта */
.site-chrome .footer-bottom a {
  color: var(--primary, #005bff) !important;
  text-decoration: none !important;
  transition: color 0.2s;
}

.site-chrome .footer-bottom a:hover {
  color: var(--primary-hover, #0050e0) !important;
  text-decoration: underline !important;
}

.site-chrome .footer-bottom {
  border-top: 1px solid var(--sf-border) !important;
  padding-top: 16px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--sf-muted) !important;
}

.site-chrome .footer-other-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-chrome .footer-other-hidden {
  display: none;
  flex-direction: column;
  gap: 8px;
}

.site-chrome .footer-other-wrap.open .footer-other-hidden {
  display: flex;
}

.site-chrome .footer-other-toggle {
  background: none;
  border: none;
  color: var(--sf-heading) !important;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
  transition: color 0.2s;
}

.site-chrome .footer-other-toggle:hover {
  color: var(--sf-link-hover) !important;
}

/* Мобильный: контент футера уже общего .container — 95% ширины экрана, отступы по бокам */
@media (max-width: 768px) {
  .site-chrome .site-footer > .container {
    width: 95%;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
}

/* Нижняя панель дублирует корзину / ЛК — на узком экране убираем из шапки */
@media (max-width: 767px) {
  .header.header--mbar-dedup-cart .header__cart {
    display: none !important;
  }

  .header.header--mbar-dedup-lk .header__user-cluster {
    display: none !important;
  }

  .header.header--mbar-dedup-lk .header__actions > .header__user-icon {
    display: none !important;
  }

  .header.header--mbar-dedup-lk .header__actions > .header__user-menu {
    display: none !important;
  }

  /* Пункты верхнего меню, совпадающие с нижней панелью, убраны из разметки моб. шторки;
     если совпали все — скрываем пустое меню (кнопка «☰», полоска иконок, панель). */
  .header.header--menu-all-mbar-dup .header__menu-btn,
  .header.header--menu-all-mbar-dup .header__mobicons-tray,
  .header.header--menu-all-mbar-dup .header__mobmenu-panel {
    display: none !important;
  }
}