/* ==========================================================================
   Header — Mobile (одиночная строка с бургером, лого, корзиной)
   Виден до 991px
   Sticky с прятанием при скролле вниз
   ========================================================================== */

.mc-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-bg);
  border-block-end: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  min-height: var(--header-h-mobile);
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

@media (min-width: 992px) {
  .mc-mobile-header { display: none; }
}

.mc-mobile-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

.mc-mobile-header.is-hidden {
  transform: translateY(-100%);
}

/* === Burger (открывает off-canvas меню) === */
.mc-mobile-header__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--fs-xl);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.mc-mobile-header__burger:hover,
.mc-mobile-header__burger:focus-visible {
  background: var(--color-bg-light);
  color: var(--color-primary);
}

/* === Лого по центру === */
.mc-mobile-header__logo {
  flex: 1;
  display: flex;
  justify-content: center;
}

.mc-mobile-header__logo img {
  max-width: 110px;
  height: auto;
  transition: max-width var(--dur-base) var(--ease-out);
}

.mc-mobile-header.is-scrolled .mc-mobile-header__logo img {
  max-width: 90px;
}

/* === Группа иконок справа (профиль + корзина) === */
.mc-mobile-header__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* === Иконки в правой части (профиль, корзина) === */
.mc-mobile-header__icon,
.mc-mobile-header__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--fs-xl);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.mc-mobile-header__icon:hover,
.mc-mobile-header__cart:hover {
  background: var(--color-bg-light);
  color: var(--color-primary);
  text-decoration: none;
}

.mc-mobile-header__cart .mc-icon-badge,
.mc-mobile-header__cart .badge {
  position: absolute !important;
  inset-block-start: 4px !important;
  inset-inline-end: 4px !important;
  inset-inline-start: auto !important;
  inset-block-end: auto !important;
  transform: none !important;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  font-family: var(--font-body);
  background: var(--color-primary);
  color: var(--color-primary-on);
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.mc-mobile-header__cart .mc-icon-badge:empty,
.mc-mobile-header__cart .badge:empty {
  display: none;
}