/* Compact sticky header and clear space for the section navigation. */
header {
  padding-bottom: 10px;
  transition: padding .3s ease, background .3s ease;
}

.ft {
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

header > * {
  min-width: 0;
}

/* Keep the progress line at the top, with the logo protected by the header background. */
.prog {
  top: calc(.9rem + env(safe-area-inset-top, 0px));
}

.prog.is-scrolled {
  top: calc(.9rem + env(safe-area-inset-top, 0px));
}

header .live {
  min-width: 0;
  overflow: hidden;
}

header .live span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

header .brand,
header .live,
header .live span,
header .rightnav,
header .menubtn,
header .cta,
header .cta2,
header .igb,
header .igb svg {
  transition: width .3s ease, height .3s ease, max-width .3s ease, font-size .3s ease, padding .3s ease, gap .3s ease;
}

header.is-scrolled {
  padding: calc(.7rem + env(safe-area-inset-top, 0px)) var(--gut) 10px;
  background: #050505;
  box-shadow: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: padding .3s ease, background .3s ease;
}

header.is-scrolled .brand {
  width: clamp(120px, 11vw, 170px);
}

header.is-scrolled .live {
  gap: .45rem;
  font-size: .72rem;
  max-width: 100%;
}

header.is-scrolled .live span {
  font-size: .72rem;
  letter-spacing: .06em;
}

header.is-scrolled .rightnav {
  gap: .65rem;
}

header.is-scrolled .menubtn {
  gap: .4rem;
  min-height: 34px;
  font-size: .72rem;
}

header.is-scrolled .cta,
header.is-scrolled .cta2 {
  font-size: .72rem;
  padding: .6rem .9rem;
}

header.is-scrolled .igb {
  width: 32px;
  height: 32px;
}

header.is-scrolled .igb svg {
  width: 15px;
  height: 15px;
}

header.is-scrolled + .panel {
  top: calc(6rem + env(safe-area-inset-top, 0px));
}

header.is-scrolled ~ .snav {
  top: calc(7.6rem + env(safe-area-inset-top, 0px));
}

header.is-scrolled ~ main .acats {
  top: calc(7.6rem + env(safe-area-inset-top, 0px));
}

header.is-scrolled + .panel a {
  padding-block: .62rem;
}

/* The WhatsApp order page uses a compact left-logo/right-actions header. */
header.order-header {
  grid-template-columns: auto 1fr;
}

header.order-header .brand {
  justify-self: start;
}

header.order-header .rightnav {
  justify-self: end;
}

header.order-header .live,
header.order-header .igm,
header.order-header .cta2 {
  display: none !important;
}

@media (max-width: 760px) {
  header {
    padding-bottom: 10px;
  }

  .prog {
    display: none !important;
  }

  header.order-header .cta {
    display: inline-flex !important;
    font-size: .62rem;
    padding: .55rem .7rem;
    border-radius: 8px;
    white-space: nowrap;
  }

  header.order-header .rightnav {
    gap: .25rem !important;
  }

  .prog {
    top: calc(.9rem + env(safe-area-inset-top, 0px));
  }

  .prog.is-scrolled {
    top: calc(.9rem + env(safe-area-inset-top, 0px));
  }

  header.is-scrolled {
    padding: calc(.55rem + env(safe-area-inset-top, 0px)) var(--gut) 10px;
  }

  header.is-scrolled .brand {
    width: 92px !important;
  }

  header.is-scrolled .live span {
    font-size: .52rem !important;
    max-width: min(5.3rem, calc(50vw - 3.8rem)) !important;
    line-height: 1.15 !important;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  header.is-scrolled .rightnav {
    gap: .2rem !important;
  }

  header.is-scrolled .igm,
  header.is-scrolled .menubtn {
    width: 32px !important;
    height: 32px;
    min-height: 32px;
  }

  header.is-scrolled .igm svg {
    width: 14px !important;
    height: 14px !important;
  }

  header.is-scrolled + .panel {
    top: calc(4.55rem + env(safe-area-inset-top, 0px));
    max-height: calc(100svh - 6rem);
  }

  header.is-scrolled ~ .snav {
    top: calc(4.95rem + env(safe-area-inset-top, 0px));
  }

  header.is-scrolled ~ main .acats {
    top: calc(4.95rem + env(safe-area-inset-top, 0px));
  }

  header.is-scrolled + .panel a {
    padding-block: .52rem;
  }

  .igm,
  .menubtn {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }

  .igm svg {
    width: 14px !important;
    height: 14px !important;
  }

  .menubtn i {
    grid-template-columns: repeat(2, 3px);
    gap: 3px;
  }

  .menubtn i b {
    width: 3px;
    height: 3px;
  }

  .acats a {
    min-height: 0 !important;
  }

  .dock a svg,
  .dock a.waorder svg,
  .dock a.pc2 svg {
    width: 24px !important;
    height: 24px !important;
  }
}

@media (max-width: 370px) {
  header.is-scrolled .brand {
    width: 84px !important;
  }

  header.is-scrolled .live span {
    max-width: min(5.3rem, calc(50vw - 3.8rem)) !important;
    font-size: .48rem !important;
  }
}

/* Keep every navigation state exactly 10px below the header. */
.snav.fit {
  display: none !important;
}

.panel,
.snav,
header ~ main .acats {
  top: calc(var(--header-bottom, 5.4rem) + 10px) !important;
}