/*
 * Содержимое шапки остаётся в исходном блоке 1440px.
 * Отдельный фон растягивается на всю ширину окна.
 */
.site-header{
  background:transparent !important;
  overflow:visible !important;
}

/* Полноширинная полоса за содержимым шапки */
.site-header::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  width:100dvw;
  transform:translateX(-50%);
  background:#fffdfa;
  border-bottom:1px solid rgba(9,49,57,.10);
  pointer-events:none;
  z-index:-1;
}

/* Убираем тень только с ограниченного блока */
.site-header.fixed-header-scrolled{
  box-shadow:none !important;
}

/* Тень теперь идёт по всей ширине полосы */
.site-header.fixed-header-scrolled::before{
  box-shadow:0 8px 24px rgba(9,49,57,.13);
}

/* Элементы шапки остаются поверх фоновой полосы */
.site-header > *{
  z-index:1;
}

/* Не изменяем позиционирование мобильного меню */
.site-header > .mobile-menu{
  z-index:1210;
}

/* MOBILE-FIT-FINAL-BEGIN */

/* Строгая адаптация шапки для телефона и планшета */
@media (max-width:900px){

  :root{
    --fixed-site-header-height:76px !important;
  }

  html,
  body{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
    overscroll-behavior-x:none !important;
  }

  body{
    padding-top:76px !important;
  }

  main{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
  }

  main > *{
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .site-header{
    display:grid !important;
    grid-template-columns:
      minmax(0,1.08fr)
      minmax(0,.92fr)
      46px !important;
    align-items:center !important;
    column-gap:7px !important;

    position:fixed !important;
    top:0 !important;
    right:0 !important;
    left:0 !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:76px !important;
    min-height:76px !important;
    max-height:76px !important;

    margin:0 !important;
    padding:7px 9px !important;
    transform:none !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }

  /* Полоса шапки не увеличивает ширину страницы */
  .site-header::before{
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100% !important;
    max-width:100% !important;
    transform:none !important;
  }

  /* Логотип Alean Family Sputnik */
  .site-header .hotel-logo{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    max-width:134px !important;
    min-width:0 !important;
    height:58px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .site-header .hotel-logo img{
    display:block !important;
    width:100% !important;
    max-width:134px !important;
    height:54px !important;
    object-fit:contain !important;
    object-position:left center !important;
  }

  /* Логотип Stay&Get */
  .site-header .stayget-mark{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    max-width:138px !important;
    min-width:0 !important;
    height:54px !important;
    margin:0 !important;
    padding:0 0 0 7px !important;
    gap:5px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .site-header .stayget-mark__icon{
    display:flex !important;
    flex:0 0 37px !important;
    width:37px !important;
    height:37px !important;
    min-width:37px !important;
    border-radius:10px !important;
    font-size:11px !important;
  }

  .site-header .stayget-mark > span:last-child{
    display:block !important;
    min-width:0 !important;
    max-width:90px !important;
    overflow:hidden !important;
  }

  .site-header .stayget-mark strong{
    display:block !important;
    max-width:100% !important;
    font-size:14px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
  }

  .site-header .stayget-mark small{
    display:block !important;
    max-width:100% !important;
    margin-top:3px !important;
    font-size:8px !important;
    line-height:1.08 !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
  }

  .site-header .desktop-nav,
  .site-header .header-phone{
    display:none !important;
  }

  /* Кнопка открытия мобильного меню */
  .site-header .menu-button{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    justify-self:end !important;

    position:relative !important;
    inset:auto !important;

    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;
    min-height:44px !important;

    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    box-sizing:border-box !important;
  }

  .site-header .menu-button svg{
    width:24px !important;
    height:24px !important;
  }

  /* Выпадающее меню строго внутри экрана */
  .mobile-menu,
  .mobile-menu.is-open{
    top:76px !important;
    right:0 !important;
    bottom:68px !important;
    left:auto !important;

    width:min(360px,100%) !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    max-height:none !important;

    margin:0 !important;
    padding:18px 18px 24px !important;
    box-sizing:border-box !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
  }

  .mobile-menu nav{
    width:100% !important;
    min-width:0 !important;
  }

  .mobile-menu nav a{
    max-width:100% !important;
    padding:9px 0 !important;
    font-size:21px !important;
    line-height:1.12 !important;
    overflow-wrap:break-word !important;
  }

  .mobile-menu__contacts{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:12px !important;
    box-sizing:border-box !important;
  }

  .mobile-menu__contacts a{
    max-width:100% !important;
    min-width:0 !important;
    overflow-wrap:anywhere !important;
  }

  /* София и календарь */
  #booking,
  .booking-section{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding-right:12px !important;
    padding-left:12px !important;
    box-sizing:border-box !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }

  .booking-shell,
  .booking-shell > div,
  .booking-shell [data-stayget-booking]{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-right:auto !important;
    margin-left:auto !important;
    box-sizing:border-box !important;
  }

  /* Нижняя панель */
  .mobile-contact-bar{
    right:0 !important;
    left:0 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .mobile-contact-bar a{
    width:auto !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  img,
  video,
  iframe{
    max-width:100% !important;
  }
}

/* Размеры контента именно для экранов телефонов */
@media (max-width:760px){

  .hero,
  .page-hero,
  .room-hero{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  .hero__content,
  .page-hero__content,
  .room-hero__content{
    width:calc(100% - 32px) !important;
    max-width:calc(100% - 32px) !important;
    min-width:0 !important;
    margin-right:auto !important;
    margin-left:auto !important;
    box-sizing:border-box !important;
  }

  .hero__content h1,
  .page-hero__content h1,
  .room-hero__content h1{
    max-width:100% !important;
    margin-top:14px !important;
    margin-bottom:18px !important;
    font-size:clamp(34px,10.4vw,44px) !important;
    line-height:1.02 !important;
    letter-spacing:-.025em !important;
    overflow-wrap:break-word !important;
  }

  .hero__content > p,
  .page-hero__content > p,
  .room-hero__content > p{
    max-width:100% !important;
    font-size:11px !important;
    line-height:1.4 !important;
  }

  .hero__content > span,
  .page-hero__content > span{
    max-width:100% !important;
    font-size:16px !important;
    line-height:1.45 !important;
    overflow-wrap:break-word !important;
  }

  .hero__actions{
    display:grid !important;
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .hero__actions .button,
  .hero__actions a{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .section-title,
  .booking-intro{
    max-width:100% !important;
    min-width:0 !important;
  }

  .section-title h2,
  .booking-intro h2{
    max-width:100% !important;
    font-size:clamp(30px,8.5vw,40px) !important;
    line-height:1.06 !important;
    overflow-wrap:break-word !important;
  }
}

/* Узкие телефоны */
@media (max-width:390px){

  .site-header{
    grid-template-columns:
      minmax(0,1.05fr)
      minmax(0,.95fr)
      42px !important;
    column-gap:4px !important;
    padding-right:6px !important;
    padding-left:6px !important;
  }

  .site-header .hotel-logo{
    max-width:122px !important;
  }

  .site-header .hotel-logo img{
    max-width:122px !important;
  }

  .site-header .stayget-mark{
    max-width:126px !important;
    padding-left:4px !important;
    gap:4px !important;
  }

  .site-header .stayget-mark__icon{
    flex-basis:34px !important;
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
  }

  .site-header .menu-button{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:40px !important;
  }

  .hero__content h1,
  .page-hero__content h1,
  .room-hero__content h1{
    font-size:clamp(32px,10vw,39px) !important;
  }
}

/* MOBILE-FIT-FINAL-END */

/* MOBILE-OFFCANVAS-REPAIR-BEGIN */

@media (max-width:900px){

  /*
   * Страница всегда равна ширине экрана телефона.
   */
  html{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:clip !important;
  }

  body{
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    overflow-x:clip !important;
  }

  @supports not (overflow:clip){
    html,
    body{
      overflow-x:hidden !important;
    }
  }

  /*
   * Главная причина расширения:
   * закрытое меню полностью удаляется из раскладки.
   */
  .mobile-menu{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;

    position:fixed !important;
    top:76px !important;
    right:0 !important;
    bottom:68px !important;
    left:auto !important;

    width:min(360px,100%) !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;

    margin:0 !important;
    transform:none !important;
    translate:none !important;

    box-sizing:border-box !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  /*
   * Меню появляется только после нажатия кнопки.
   */
  .mobile-menu.is-open{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transform:none !important;
    translate:none !important;
  }

  /*
   * Открытое меню прокручивается само,
   * но не блокирует вертикальную прокрутку сайта.
   */
  body.menu-open{
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:clip !important;
    overflow-y:auto !important;
    touch-action:pan-y !important;
  }

  /*
   * Кнопка меню всегда находится внутри шапки.
   */
  .site-header .menu-button{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;

    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    justify-self:end !important;
    flex:0 0 44px !important;

    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:44px !important;

    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    translate:none !important;
    z-index:1220 !important;
  }

  /*
   * Не даём фону шапки создавать дополнительную ширину.
   */
  .site-header::before{
    right:0 !important;
    left:0 !important;
    width:100% !important;
    max-width:100% !important;
    transform:none !important;
  }

  /*
   * Все основные блоки рассчитываются
   * от ширины телефона.
   */
  main,
  main > section,
  .hero,
  .page-hero,
  .room-hero,
  .booking-section,
  .booking-shell,
  .site-footer,
  .mobile-contact-bar{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  main{
    overflow-x:clip !important;
  }

  .hero__content,
  .page-hero__content,
  .room-hero__content{
    width:calc(100% - 32px) !important;
    max-width:calc(100% - 32px) !important;
    min-width:0 !important;
    margin-right:auto !important;
    margin-left:auto !important;
  }

  .booking-shell > div,
  .booking-shell [data-stayget-booking]{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .mobile-contact-bar{
    right:0 !important;
    left:0 !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    overflow:hidden !important;
  }

  img,
  video,
  iframe,
  svg{
    max-width:100%;
  }
}

/* MOBILE-OFFCANVAS-REPAIR-END */

/* MOBILE-STAYGET-ALIGN-BEGIN */

@media (max-width:900px){

  /*
   * Первая колонка теперь равна реальной ширине
   * логотипа отеля и не отталкивает Stay&Get вправо.
   */
  .site-header{
    grid-template-columns:
      134px
      minmax(0,1fr)
      44px !important;
    column-gap:7px !important;
  }

  .site-header .hotel-logo{
    justify-self:start !important;
    width:134px !important;
    min-width:134px !important;
    max-width:134px !important;
    margin:0 !important;
    transform:none !important;
  }

  .site-header .hotel-logo img{
    width:134px !important;
    max-width:134px !important;
  }

  .site-header .stayget-mark{
    justify-self:start !important;
    align-self:center !important;
    position:relative !important;
    left:0 !important;

    width:138px !important;
    max-width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    padding-left:7px !important;
    transform:none !important;
  }

  .site-header .menu-button{
    justify-self:end !important;
    margin:0 !important;
  }
}

/* Дополнительная адаптация для самых узких телефонов */
@media (max-width:350px){

  .site-header{
    grid-template-columns:
      112px
      minmax(0,1fr)
      40px !important;
    column-gap:4px !important;
    padding-right:6px !important;
    padding-left:6px !important;
  }

  .site-header .hotel-logo{
    width:112px !important;
    min-width:112px !important;
    max-width:112px !important;
  }

  .site-header .hotel-logo img{
    width:112px !important;
    max-width:112px !important;
  }

  .site-header .stayget-mark{
    width:100% !important;
    padding-left:4px !important;
    gap:4px !important;
  }

  .site-header .menu-button{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:40px !important;
  }
}

/* MOBILE-STAYGET-ALIGN-END */

/* SG-ICON-CENTER-BEGIN */
.site-header .stayget-mark__icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
/* SG-ICON-CENTER-END */