.page-header {
  position: fixed;
  background: rgba(0, 0, 0, 0.33);
  transition: background .4s ease;
  height: var(--topbar-height);
  z-index: 9999;
  perspective: calc(100vh - var(--topbar-height));
  perspective-origin: bottom;
  top: 0;
}

.menu-open .page-header {
  background: var(--blue);
}

.page-header a {
  display: flex;
}

.page-header-inner {
  grid-column: 3 / span 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar-logo img {
  height: var(--logo-height);
  width: auto;
}

.header-nav {
  position: absolute;
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows .4s ease;
  top: var(--topbar-height);
  min-height: calc(100vh - var(--topbar-height));
  left: 0;
  width: 100%;
  background-color: var(--beige);
  overflow: auto;
  transform-origin: bottom;
  transform: rotateX(180deg);
  visibility: hidden;
}

.header-nav.transitions {
  transition: all .5s ease;
}

.menu-open .header-nav {
  transform: rotateX(0);
  visibility: visible;
}

.header-nav-inner {
  grid-column: 4 / span 8;
  grid-row: 1 / span 2;
  padding-top: var(--s-md);
}

.header-nav-inner ul {
  list-style-type: none;
  padding: 0;
}

.header-nav-inner > ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: max(1rem, 2.5vw);
  padding-bottom: var(--s-sm);
}

.header-nav-inner > ul > li > a {
  font-size: max(1.15rem, 1.25vw);
  font-weight: 400;
}

.header-nav-inner a {
  padding: 0.4em max(1rem, 1vw);
}

.header-nav-inner > ul > li > .sub-menu {
  border-top: 1px solid currentColor;
  padding-top: 0.5em;
}

.header-nav-inner > ul > li > .sub-menu > li > .sub-menu {
  position: relative;
  padding-left: max(1rem, 1vw);
  width: 100%;
}

.header-nav-inner > ul > li > .sub-menu > li > .sub-menu a {
  font-size: max(0.875rem, 0.8333333333vw);
}

.header-nav-inner .sub-arrow {
  width: 1em;
  height: 1em;
  position: relative;
  transition: transform .3s ease;
  align-self: center;
}

.header-nav-inner .sub-arrow.active {
  transform: rotate(45deg);
}

.header-nav-inner .sub-arrow::after,
.header-nav-inner .sub-arrow::before {
  content: '';
  background-color: var(--blue);
  width: 100%;
  height: 2px;
  position: absolute;
  transform: translateY(50%);
  bottom: 50%;
  left: 0;
}

.header-nav-inner .sub-arrow::before {
  transform: translateY(50%) rotate(90deg);
}

.header-nav-inner > ul > li > .sub-menu > li:has(.sub-arrow) {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.burger {
    height: 1.1em;
    width: 1.65em;
    position: relative;
}

.burgerline {
    height: 2px;
    width: 100%;
    position: absolute;
    background-color: var(--white);
    border-radius: 100vmin;
    transition: var(--def-trans);
}

.burgerline.top {
    top: 0;
}

.burgerline.bot {
    bottom: 0;
}

.burgerline.mid {
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

.menu-open .burgerline.bot {
    bottom: 50%;
    transform: translateY(50%) rotate(-135deg);
}

.menu-open .burgerline.top {
    top: 50%;
    transform: translateY(-50%) rotate(135deg);
}

.menu-open .burgerline.mid {
    width: 0;
}

.utilities-wrapper {
    display: flex;
    align-items: center;
    gap: 1.25em;
}

.header-utilities-item {
    font-size: max(0.9375rem, 0.78125vw);
    padding: 0.8em 1em;
}

.header-menu-item {
  color: var(--blue);
}

.header-content {
  display: flex;
  align-items: center;
	color: var(--beige);
  gap: 1.25em;
}

.page-header .wc-block-mini-cart__badge {
  color: var(--white);
}

.page-header .wc-block-mini-cart__button,
.page-header .wp-block-woocommerce-customer-account a {
  padding: 0;
}

.page-header .wp-block-woocommerce-customer-account a {
  aspect-ratio: 144/150;
  height: 1.1em;
  background-color: var(--white);
  mask-image: url('../img/user.svg');
  mask-repeat: no-repeat;
  mask-size: contain;
}

.page-header .wc-block-mini-cart__quantity-badge::before {
  content: '';
  aspect-ratio: 148/150;
  height: 1.1em;
  background-color: var(--white);
  mask-image: url('../img/cart.svg');
  mask-repeat: no-repeat;
  mask-size: contain;
}

.wc-block-mini-cart__quantity-badge svg {
  display: none;
}

.header-content-map-link,
.header-content-calendar-link {
  background-color: var(--white);
  mask-repeat: no-repeat;
  mask-size: contain;
  height: 1.1em;
}

.header-content-map-link {
  mask-image: url('../img/location.svg');
  aspect-ratio: 113/150;
}

.header-content-calendar-link {
  mask-image: url('../img/calendar.svg');
  aspect-ratio: 131/150;
}

@media (max-width: 1199.98px) {
  .page-header-inner,
  .header-nav-inner {
    grid-column: 2 / span 12;
  }
}

@media (max-width: 991.98px) {}

@media (max-width: 767.98px) {
  .utilities-wrapper .utilities {
    display: none;
  }

  .header-nav-inner > ul {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 499.98px) {
    .header-nav-inner > ul {
    grid-template-columns: 1fr;
  }
  
}