/* Élit Pharma: floating pill header shared by all public pages. */
.hdr {
  top: 16px;
  width: min(1500px, calc(100% - 32px));
  margin: 16px auto;
  padding: 10px 0;
  border: 1px solid rgba(8, 64, 80, .12);
  border-radius: 999px;
  background: rgba(248, 252, 251, .68);
  box-shadow: 0 14px 44px rgba(8, 64, 80, .13), 0 2px 8px rgba(8, 64, 80, .05);
  -webkit-backdrop-filter: saturate(145%) blur(14px);
  backdrop-filter: saturate(145%) blur(14px);
  isolation: isolate;
  overflow: hidden;
}

/* On the home page the hero runs beneath the pill, so its side gaps
   show the hero instead of a white strip. */
body.home .hdr { margin-bottom: -106px; }

@media (hover: hover) {
  .hdr:hover { background: rgba(250, 253, 252, .78); }
}

@media (max-width: 900px) {
  body.home .hdr { margin-bottom: -90px; }
}

@media (max-width: 760px) {
  .hdr {
    top: 10px;
    width: calc(100% - 20px);
    margin: 10px auto;
    padding: 8px 0;
  }
  .hdr-in { gap: 10px; }
  body.home .hdr { margin-bottom: -74px; }

  /* На узких экранах название было спрятано — оставался один знак, и
     шапка не говорила, чей это сайт. Возвращаем имя, подпись убираем:
     двум строкам рядом с кнопкой меню места уже нет. */
  .hdr .mark-tx { display: flex; }
  .hdr .mark-s { display: none; }
  .hdr .mark-w { font-size: 19px; letter-spacing: .01em; }

  /* Знак и название — слева, как было. На главную уводит только нажатие
     на голову: по названию попадают случайно, листая страницу большим
     пальцем, и просмотр сбрасывался. */
  .hdr-in > .mark { pointer-events: none; cursor: default; }
  .hdr-in > .mark .mark-i { pointer-events: auto; cursor: pointer; }
}

@media (max-width: 380px) {
  .hdr .mark-w { font-size: 17px; }
}