/*
 * Главная, первый экран: большой логотип YONDER и иконки шапки.
 *
 * ======== НАСТРОЙКИ — меняйте здесь ========
 *   --home-logo-width   ширина логотипа. min(40vw, 560px) значит «40% ширины
 *                       экрана, но не больше 560 px». Больше логотип —
 *                       увеличьте оба числа, например min(46vw, 660px).
 *   --home-header-height высота шапки на первом экране. Логотип по высоте
 *                       ≈ 0.18 своей ширины, шапка должна быть выше него
 *                       (для 560 px логотипа ≈ 102 px → шапка 130 px).
 *   --home-icons-drop   где стоят иконки относительно логотипа:
 *                       0 — по верхнему краю букв, 0.5 — по середине.
 * После правки поменяйте ?v= у home-header.css в templates/base.html
 * и выполните: sudo systemctl restart yonder
 * ============================================
 */
:root {
  --home-logo-width: min(40vw, 560px);
  --home-header-height: 132px;
  --home-icons-drop: 0.3;
}

/* ======== НАСТРОЙКА ДЛЯ ТЕЛЕФОНА ========
 *   --home-logo-mobile  ширина логотипа на первом экране телефона.
 *                       calc(100vw - 32px) — во всю ширину с полями 16 px.
 *                       Меньше — например calc(100vw - 80px).
 * ========================================= */
:root {
  --home-logo-mobile: calc(100vw - 32px);
}

/* При прокрутке: логотип быстро сжимается, значки поднимаются чуть позже,
   чтобы не заходить под него. Назад — одновременно. */
.header-left,
.header-right {
  transition: margin-top 0.38s cubic-bezier(0.22, 0.61, 0.36, 1) 0.14s;
}
.boutique-header .boutique-brand {
  transition:
    width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    top 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.boutique-home:not(.has-scrolled):not(.panel-open) :is(.header-left, .header-right) {
  transition: margin-top 0.45s ease;
}
@media (min-width: 601px) {
  .boutique-home:not(.has-scrolled):not(.panel-open):has(.first-campaign:not(.no-image))
    .boutique-header {
    height: var(--home-header-height);
    align-items: flex-start;
  }
  .boutique-home:not(.has-scrolled):not(.panel-open) .boutique-header .boutique-brand {
    width: var(--home-logo-width);
  }
  /* Верх логотипа = половина шапки − половина высоты логотипа (0.0915 ширины).
     Иконки (строка 22 px) опускаются от верха букв на долю --home-icons-drop. */
  .boutique-home:not(.has-scrolled):not(.panel-open):has(.first-campaign:not(.no-image))
    :is(.header-left, .header-right) {
    margin-top: max(
      8px,
      calc(
        var(--home-header-height) / 2 - var(--home-logo-width) * 0.0915 +
          var(--home-logo-width) * 0.183 * var(--home-icons-drop) - 11px
      )
    );
  }
}

/* Телефон: значок личного кабинета в шапке (раньше был скрыт до 600 px) */
@media (max-width: 600px) {
  .header-right > a[aria-label="Личный кабинет"] {
    display: inline-flex;
  }
  .header-left,
  .header-right {
    gap: 12px;
  }
}
/* Узкие телефоны: чуть меньше логотип и расстояния, чтобы значки не наезжали на него */
@media (max-width: 380px) {
  .header-left,
  .header-right {
    gap: 10px;
  }
  .boutique-header .boutique-brand,
  .boutique-home:not(.has-scrolled):not(.panel-open) .boutique-header .boutique-brand {
    width: 116px;
  }
}
@media (max-width: 340px) {
  .boutique-header {
    padding: 0 12px;
  }
  .boutique-header .boutique-brand,
  .boutique-home:not(.has-scrolled):not(.panel-open) .boutique-header .boutique-brand {
    width: 96px;
  }
  .boutique-header .icon {
    width: 18px;
    height: 18px;
  }
}

/* Телефон, первый экран (как у Miu Miu): логотип во всю ширину сверху,
   значки строкой под ним. При прокрутке логотип сжимается в обычную шапку. */
@media (max-width: 600px) {
  .boutique-home:not(.has-scrolled):not(.panel-open):has(.first-campaign:not(.no-image))
    .boutique-header {
    height: calc(16px + var(--home-logo-mobile) * 0.183 + 52px);
    align-items: flex-start;
  }
  .boutique-home:not(.has-scrolled):not(.panel-open):has(.first-campaign:not(.no-image))
    .boutique-header
    .boutique-brand {
    width: var(--home-logo-mobile);
    top: calc(16px + var(--home-logo-mobile) * 0.0915);
  }
  .boutique-home:not(.has-scrolled):not(.panel-open):has(.first-campaign:not(.no-image))
    :is(.header-left, .header-right) {
    margin-top: calc(16px + var(--home-logo-mobile) * 0.183 + 14px);
  }
}