/* ============================================================
   commerce — шапка и мобильное меню
   Все правила ограничены корнем .ct-storefront.
   Префикс классов и переменных: ct- / ct-header-.
   Не переопределяет общие ct-button, ct-input, ct-container.
   ============================================================ */

/* --- Переменные и корневой контейнер шапки ------------------ */

.ct-storefront {--ct-header-bg:#eef4fa;}

.ct-storefront .ct-header {
  --ct-header-topbar-bg: #fff;
  --ct-header-topbar-color: var(--ct-color-muted);
  --ct-header-border: var(--ct-header-bg);
  --ct-header-active: var(--ct-color-primary);
  --ct-header-active-hover: var(--ct-color-primary-hover);
  --ct-header-pad-inline: clamp(16px, 4vw, 32px);
  --ct-header-max-width: var(--ct-content-max);
  --ct-header-brand-size: clamp(20px, 3vw, 28px);
  --ct-header-icon-size: 22px;
  --ct-header-control-min: 44px;
  position: relative;
  z-index: 20;
  background: var(--ct-header-bg);
  border-block-end: 1px solid var(--ct-header-border);
}

/* --- Skip-ссылка -------------------------------------------- */
/* H04: не зависит от --ct-header-pad-inline, объявленной на .ct-header.
   Использует фиксированное значение с fallback. */

.ct-storefront .ct-skip-link {
  position: absolute;
  left: clamp(16px, 4vw, 32px);
  top: 8px;
  z-index: 50;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--ct-color-primary);
  color: var(--ct-color-on-primary);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  transform: translateY(-300%);
  transition: transform 150ms ease;
}

.ct-storefront .ct-skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--ct-color-primary);
  outline-offset: 2px;
  box-shadow: var(--ct-focus-ring);
}

/* --- Служебная полоса ---------------------------------------- */

.ct-storefront .ct-header__topbar {
  background: var(--ct-header-topbar-bg);
  color: var(--ct-header-topbar-color);
  font-size: var(--ct-font-size-sm);
}

.ct-storefront .ct-header__topbar-inner {
  max-width: var(--ct-header-max-width);
  margin-inline: auto;
  padding-inline: var(--ct-header-pad-inline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ct-space-2) var(--ct-space-4);
  min-height: 36px;
}

.ct-storefront .ct-header__topbar-note {
  margin: 0;
  margin-inline-end: auto;
  overflow-wrap: anywhere;
}

.ct-storefront .ct-header__topbar-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ct-space-3);
}

.ct-storefront .ct-header__topbar-links a {
  color: inherit;
  text-decoration: none;
}

.ct-storefront .ct-header__topbar-links a:hover {
  color: var(--ct-header-active);
}

.ct-storefront .ct-header__topbar-links a:focus-visible {
  outline: none;
  box-shadow: var(--ct-focus-ring);
  border-radius: var(--ct-radius-sm);
}

/* --- Основная строка ----------------------------------------- */

.ct-storefront .ct-header__main {
  max-width: var(--ct-header-max-width);
  margin-inline: auto;
  padding-inline: var(--ct-header-pad-inline);
  padding-block: var(--ct-space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ct-space-3);
}

.ct-storefront .ct-header__brand {
  display: inline-flex;
  align-items: center;
  color: var(--ct-color-text);
  font-size: var(--ct-header-brand-size);
  font-weight: var(--ct-font-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  overflow-wrap: anywhere;
  margin-inline-end: auto;
  letter-spacing: -.035em;
}

.ct-storefront .ct-header__brand:hover {
  color: var(--ct-header-active);
}

.ct-storefront .ct-header__brand:focus-visible {
  outline: none;
  border-radius: var(--ct-radius-sm);
  box-shadow: var(--ct-focus-ring);
}

/* --- Поиск --------------------------------------------------- */

.ct-storefront .ct-header__search {
  flex: 1 1 260px;
  min-width: 200px;
  max-width: 560px;
}

.ct-storefront .ct-header__search-form {
  display: flex;
  gap: 0;
  width: 100%;
  border: 1px solid var(--ct-color-border);
  border-radius:var(--ct-control-radius);
  background: var(--ct-color-bg);
}

.ct-storefront .ct-header__search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  border-radius:var(--ct-control-radius) 0 0 var(--ct-control-radius);
  background: transparent;
  color: var(--ct-color-text);
  font-family: inherit;
  font-size: var(--ct-font-size-base);
  line-height: var(--ct-line-height-base);
}

.ct-storefront .ct-header__search-input:focus {
  outline: none;
  box-shadow: none;
}
.ct-storefront .ct-header__search-form:focus-within {border-color:var(--ct-header-active);box-shadow:var(--ct-focus-ring);}

.ct-storefront .ct-header__search-submit {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-height: 46px;
  border: 0;
  border-radius:var(--ct-control-radius);
  background: transparent;
  color: var(--ct-color-text);
  cursor: pointer;
}

.ct-storefront .ct-header__search-submit:hover {color:var(--ct-color-primary);background:var(--ct-color-surface);}
.ct-storefront .ct-header__search-submit:focus-visible {outline:2px solid var(--ct-color-primary);outline-offset:2px;}
.ct-storefront .ct-header__social {display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px;margin-inline-start:auto;max-width:100%;}
@media(max-width:639px) {.ct-storefront .ct-header__social {gap:0;}}
.ct-storefront .ct-social-link {display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--ct-control-radius);color:var(--ct-color-text);text-decoration:none;}
.ct-storefront .ct-social-icon {display:block;width:19px;height:19px;}
.ct-storefront .ct-social-link:hover {color:var(--ct-color-primary);background:var(--ct-color-bg);}
.ct-storefront .ct-social-link:focus-visible {outline:2px solid var(--ct-color-primary);outline-offset:2px;}

/* --- Действия: кабинет и корзина ------------------------------ */

.ct-storefront .ct-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ct-space-2);
  margin-inline-start: auto;
}

.ct-storefront .ct-header__action-link {
  position: relative;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: var(--ct-space-2);
  min-height: var(--ct-header-control-min);
  min-width: var(--ct-header-control-min);
  padding: var(--ct-space-2) var(--ct-space-3);
  border-radius:var(--ct-control-radius);
  color: var(--ct-color-text);
  text-decoration: none;
  font-weight: var(--ct-font-weight-semibold);
}

.ct-storefront .ct-header__action-link:hover {
  color: var(--ct-header-active);
  background: var(--ct-color-surface);
}

.ct-storefront .ct-header__action-link:focus-visible {
  outline: none;
  box-shadow: var(--ct-focus-ring);
}

.ct-storefront .ct-header__action-label {
  overflow-wrap: anywhere;
}

.ct-storefront .ct-header__icon {
  display: inline-flex;
  flex: none;
  width: var(--ct-header-icon-size);
  height: var(--ct-header-icon-size);
  color: currentColor;
}

.ct-storefront .ct-header__cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 14px;
  height: 14px;
  padding-inline: 3px;
  border-radius: var(--ct-radius-pill);
  background: var(--ct-header-active);
  color: var(--ct-color-on-primary);
  font-size: 9px;
  font-weight: var(--ct-font-weight-semibold);
  line-height: 1;
}
.ct-storefront .ct-header__cart-count:empty {display:none;}

/* --- Кнопка открытия мобильного меню -------------------------- */

.ct-storefront .ct-header__menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--ct-header-control-min);
  height: var(--ct-header-control-min);
  padding: 0;
  border: var(--ct-border-width) solid var(--ct-color-border);
  border-radius:var(--ct-control-radius);
  background: var(--ct-color-bg);
  color: var(--ct-color-text);
  cursor: pointer;
}

.ct-storefront .ct-header__menu-toggle:hover {
  border-color: var(--ct-header-active);
  color: var(--ct-header-active);
}

.ct-storefront .ct-header__menu-toggle:focus-visible {
  outline: none;
  box-shadow: var(--ct-focus-ring);
}

/* --- Каталожная навигация (настольная) ------------------------ */

.ct-storefront .ct-header__nav {
  max-width: var(--ct-header-max-width);
  margin-inline: auto;
  padding-inline: var(--ct-header-pad-inline);
  padding-block: var(--ct-space-2);
  overflow: visible;
}

.ct-storefront .ct-header__main > .ct-header__nav {order:4;flex-basis:100%;padding:0;min-width:0;}
@media(min-width:960px) {
  .ct-storefront .ct-header__brand {margin-inline-end:auto;}
  .ct-storefront .ct-header__main > .ct-header__nav {order:0;flex:0 1 auto;margin-inline:0;}
  .ct-storefront .ct-header__actions {margin-inline-start:0;flex-wrap:nowrap;gap:0;}
}

.ct-storefront .ct-header__nav-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ct-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ct-storefront .ct-header__nav-item {
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.ct-storefront .ct-header__nav-link,
.ct-storefront .ct-header__catalog summary {
  display: inline-flex;
  align-items: center;
  gap: var(--ct-space-2);
  min-height: var(--ct-header-control-min);
  padding: var(--ct-space-2) var(--ct-space-3);
  border-radius:var(--ct-control-radius);
  color: var(--ct-color-text);
  font-weight: var(--ct-font-weight-semibold);
  text-decoration: none;
  overflow-wrap: anywhere;
  font-size: var(--ct-font-size-sm);
}

.ct-storefront .ct-header__nav-link:hover,
.ct-storefront .ct-header__catalog summary:hover {
  color: var(--ct-header-active);
  background: var(--ct-color-surface);
}

.ct-storefront .ct-header__nav-link:focus-visible,
.ct-storefront .ct-header__catalog summary:focus-visible {
  outline: none;
  box-shadow: var(--ct-focus-ring);
}

.ct-storefront .ct-header__nav-link[aria-current="page"] {
  color: var(--ct-header-active);
}

/* Раскрывающийся раздел «Каталог» */

.ct-storefront .ct-header__catalog {
  position: relative;
  margin: 0;
}

.ct-storefront .ct-header__catalog summary {
  list-style: none;
  cursor: pointer;
}

.ct-storefront .ct-header__catalog summary::-webkit-details-marker {
  display: none;
}

.ct-storefront .ct-header__catalog[open] summary {
  color: var(--ct-header-active);
  background: var(--ct-color-surface);
}

.ct-storefront .ct-header__catalog-arrow {
  display: inline-flex;
  flex: none;
  transition: transform var(--ct-transition-fast);
}

.ct-storefront .ct-header__catalog[open] .ct-header__catalog-arrow {
  transform: rotate(180deg);
}

.ct-storefront .ct-header__catalog-panel {
  position: absolute;
  inset-block-start: calc(100% + var(--ct-space-1));
  inset-inline-start: 0;
  z-index: 25;
  min-width: 280px;
  max-width: min(72vw, 420px);
  padding: var(--ct-space-2);
  border: var(--ct-border-width) solid var(--ct-color-border);
  border-radius: var(--ct-radius-md);
  background: var(--ct-color-bg);
  box-shadow: var(--ct-shadow-card);
}

.ct-storefront .ct-header__catalog-panel > ul {
  display: grid;
  gap: var(--ct-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ct-storefront .ct-header__sub {
  position: relative;
}

.ct-storefront .ct-header__sub > details {
  display: block;
}

.ct-storefront .ct-header__sub summary {
  cursor: pointer;
  list-style: none;
}

.ct-storefront .ct-header__sub summary::-webkit-details-marker {
  display: none;
}

.ct-storefront .ct-header__sub-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ct-space-3);
  padding: var(--ct-space-2) var(--ct-space-3);
  border-radius: var(--ct-radius-sm);
  color: var(--ct-color-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.ct-storefront .ct-header__sub-link:hover {
  background: var(--ct-color-surface);
  color: var(--ct-header-active);
}

.ct-storefront .ct-header__sub-link:focus-visible,
.ct-storefront .ct-header__sub summary:focus-visible {
  outline: none;
  box-shadow: var(--ct-focus-ring);
}

.ct-storefront .ct-header__sub-panel {
  display: grid;
  gap: var(--ct-space-1);
  margin: 0;
  padding: var(--ct-space-2) 0 0 var(--ct-space-5);
  list-style: none;
}

.ct-storefront .ct-header__sub-panel a {
  display: block;
  padding: var(--ct-space-1) var(--ct-space-3);
  border-radius: var(--ct-radius-sm);
  color: var(--ct-color-muted);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.ct-storefront .ct-header__sub-panel a:hover {
  color: var(--ct-header-active);
  background: var(--ct-color-surface);
}

.ct-storefront .ct-header__sub-panel a:focus-visible {
  outline: none;
  box-shadow: var(--ct-focus-ring);
}

/* --- Мобильный dialog ----------------------------------------- */

.ct-storefront .ct-header__dialog {
  width: min(100vw - 32px, 420px);
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--ct-radius-md);
  background: var(--ct-color-bg);
  color: var(--ct-color-text);
  box-shadow: var(--ct-shadow-card);
  overflow: auto;
}

.ct-storefront .ct-header__dialog::backdrop {
  background: rgba(23, 32, 51, 0.5);
}

.ct-storefront .ct-header__dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ct-space-3);
  padding: var(--ct-space-3) var(--ct-space-4);
  border-block-end: 1px solid var(--ct-color-border);
  position: sticky;
  inset-block-start: 0;
  background: var(--ct-color-bg);
  z-index: 1;
}

.ct-storefront .ct-header__dialog-title {
  margin: 0;
  font-size: var(--ct-font-size-lg);
  font-weight: var(--ct-font-weight-semibold);
}

.ct-storefront .ct-header__dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--ct-header-control-min);
  height: var(--ct-header-control-min);
  padding: 0;
  border: var(--ct-border-width) solid var(--ct-color-border);
  border-radius:var(--ct-control-radius);
  background: var(--ct-color-bg);
  color: var(--ct-color-text);
  cursor: pointer;
}

.ct-storefront .ct-header__dialog-close:hover {
  border-color: var(--ct-header-active);
  color: var(--ct-header-active);
}

.ct-storefront .ct-header__dialog-close:focus-visible {
  outline: none;
  box-shadow: var(--ct-focus-ring);
}

.ct-storefront .ct-header__dialog-nav {
  padding: var(--ct-space-3) var(--ct-space-4);
  overflow: visible;
}

.ct-storefront .ct-header__dialog-nav .ct-header__nav-list {
  flex-direction: column;
  align-items: stretch;
}

/* Мобильное меню скрыто до успешной инициализации JS */

.ct-storefront .ct-header__menu-toggle,
.ct-storefront .ct-header__dialog {
  display: none;
}

/* --- Адаптив: мобильная компоновка ---------------------------- */

/* Мобильная компоновка (до 960 px) после инициализации JS */

.ct-storefront .ct-header[data-ct-enhanced] .ct-header__menu-toggle {
  display: inline-flex;
}

.ct-storefront .ct-header[data-ct-enhanced] .ct-header__dialog[open] {
  display: block;
}

.ct-storefront .ct-header[data-ct-enhanced] .ct-header__nav {
  display: none;
}

@media (min-width: 960px) {
  /* На десктопе кнопка и dialog не нужны, даже если JS уже включён */
  .ct-storefront .ct-header__menu-toggle,
  .ct-storefront .ct-header__dialog,
  .ct-storefront .ct-header[data-ct-enhanced] .ct-header__menu-toggle,
  .ct-storefront .ct-header[data-ct-enhanced] .ct-header__dialog {
    display: none;
  }

  .ct-storefront .ct-header[data-ct-enhanced] .ct-header__nav {
    display: block;
  }
}

/* Поиск на мобильной строке: полная ширина следующей строки */

.ct-storefront .ct-header__search {
  order: 5;
  flex-basis: 100%;
  max-width: none;
}

@media (min-width: 960px) {
  .ct-storefront .ct-header__search {
    order: 0;
    flex-basis: auto;
    max-width: 220px;
    min-width: 150px;
    flex: 0 1 220px;
  }
}

@media (min-width: 1400px) {
  .ct-storefront .ct-header__search {
    flex: 0 1 260px;
    max-width: 260px;
  }
}

/* --- H02: Панель каталога внутри dialog — обычный поток -------- */
@media (max-width: 639px) {
  .ct-storefront .ct-header__main {gap:var(--ct-space-2);}
  .ct-storefront .ct-header__actions {gap:var(--ct-space-1);flex-wrap:nowrap;}
  .ct-storefront .ct-header__action-link {position:relative;width:44px;padding:var(--ct-space-2);gap:0;justify-content:center;}
  .ct-storefront .ct-header__action-label {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
}
/* На мобильных и внутри dialog панель каталога не должна быть
   абсолютно позиционированной, чтобы вписываться в содержимое. */

.ct-storefront .ct-header__dialog .ct-header__catalog-panel {
  position: static;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding-inline-start: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Без JS на узком экране раскрытый каталог тоже в потоке.
   Десктопная навигация скрыта до data-ct-enhanced, но если
   JS отключён — она видна и каталог должен быть в потоке. */
@media (max-width: 959px) {
  .ct-storefront .ct-header__nav .ct-header__catalog-panel {
    position: static;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Длинные ссылки и summary не расширяют flex-элементы за пределы контейнера */
.ct-storefront .ct-header__dialog .ct-header__nav-link,
.ct-storefront .ct-header__dialog .ct-header__sub-link,
.ct-storefront .ct-header__dialog .ct-header__catalog summary {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* V2: icon actions retain accessible labels and native count state. */
.ct-storefront .ct-header__cart-count[hidden] { display: none; }