/* ViBook header navigation harmony layer for Ashade. Scoped only to menus that contain the ViBook account item. */
:root {
  --vvb-header-accent: #f09a00;
  --vvb-header-accent-bright: #ffad24;
  --vvb-header-ink: #111111;
  --vvb-header-text: #f4f4f4;
  --vvb-header-muted: rgba(244, 244, 244, .72);
}

/* Desktop: one balanced row with consistent link rhythm and a separated account area. */
@media (min-width: 1270px) {
  html body ul.vvb-header-nav-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: clamp(14px, 1.55vw, 25px) !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    white-space: nowrap !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item > a {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 1px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: linear-gradient(var(--vvb-header-accent), var(--vvb-header-accent)) !important;
    background-repeat: no-repeat !important;
    background-position: left calc(100% - 4px) !important;
    background-size: 0 2px !important;
    box-shadow: none !important;
    color: var(--vvb-header-muted) !important;
    font-family: inherit !important;
    font-size: clamp(10px, .72vw, 12px) !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    letter-spacing: .065em !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    transition: color 180ms ease, background-size 180ms ease, transform 180ms ease !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item > a:hover,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item > a:focus-visible,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item.current-menu-item > a,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item.current_page_item > a,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item.current-menu-ancestor > a {
    color: #ffffff !important;
    background-size: 100% 2px !important;
    opacity: 1 !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta > a {
    min-height: 40px !important;
    padding: 0 22px !important;
    border: 1px solid rgba(255, 190, 76, .42) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #ffa91d 0%, #ed8d00 100%) !important;
    box-shadow: 0 5px 18px rgba(239, 151, 0, .22), inset 0 1px 0 rgba(255,255,255,.22) !important;
    color: #17130d !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .055em !important;
    text-shadow: none !important;
    transform: translateY(0) !important;
    transition: box-shadow 180ms ease, filter 180ms ease, transform 180ms ease !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta > a:hover,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta > a:focus-visible {
    background: linear-gradient(135deg, #ffb638 0%, #f39a0a 100%) !important;
    background-size: auto !important;
    box-shadow: 0 7px 22px rgba(239, 151, 0, .32), inset 0 1px 0 rgba(255,255,255,.28) !important;
    color: #17130d !important;
    filter: saturate(1.06) !important;
    transform: translateY(-1px) !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 42px !important;
    margin: 0 0 0 2px !important;
    padding: 0 0 0 clamp(13px, 1.25vw, 20px) !important;
    border: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, .17) !important;
    list-style: none !important;
    white-space: nowrap !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item > a.vvb-header-account-link {
    gap: 10px !important;
    min-height: 42px !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-avatar {
    flex-basis: 40px !important;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid rgba(255, 173, 36, .48) !important;
    box-shadow: 0 0 0 3px rgba(240, 154, 0, .08), 0 3px 12px rgba(0, 0, 0, .28) !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-copy {
    gap: 3px !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-greeting {
    max-width: 185px !important;
    color: #f7f7f7 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-action {
    color: var(--vvb-header-accent-bright) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
  }
}

/* Account base styles also apply if a theme renders the mobile and desktop menus separately. */
html body li.vvb-header-account-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  vertical-align: middle !important;
  margin: 0 0 0 clamp(12px, 1.35vw, 24px) !important;
  padding: 0 !important;
  list-style: none !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
}

html body li.vvb-header-account-item > a.vvb-header-account-link,
html body li.vvb-header-account-item > a.vvb-header-account-link:link,
html body li.vvb-header-account-item > a.vvb-header-account-link:visited {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--vvb-header-text) !important;
  font: inherit !important;
  line-height: 1.15 !important;
  letter-spacing: normal !important;
  text-align: left !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

html body li.vvb-header-account-item > a.vvb-header-account-link:hover,
html body li.vvb-header-account-item > a.vvb-header-account-link:focus-visible {
  color: #ffffff !important;
  background: transparent !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

html body .vvb-header-account-avatar {
  display: inline-flex !important;
  flex: 0 0 40px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  border-radius: 50% !important;
  background: #222222 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22) !important;
}

html body .vvb-header-account-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

html body .vvb-header-account-avatar-placeholder svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 7px !important;
  fill: #8e8e8e !important;
  stroke: #8e8e8e !important;
  stroke-width: 1.5 !important;
  stroke-linecap: round !important;
}

html body .vvb-header-account-copy {
  display: flex !important;
  flex: 0 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .vvb-header-account-greeting {
  display: block !important;
  max-width: 190px !important;
  overflow: hidden !important;
  color: #f7f7f7 !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  text-transform: none !important;
}

html body .vvb-header-account-action {
  display: block !important;
  color: var(--vvb-header-accent-bright) !important;
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: color 160ms ease, transform 160ms ease !important;
}

html body li.vvb-header-account-item > a.vvb-header-account-link:hover .vvb-header-account-action {
  color: #ffc04e !important;
  transform: translateX(2px);
}

html body li.vvb-header-account-item > a.vvb-header-account-link:focus-visible {
  outline: 2px solid var(--vvb-header-accent) !important;
  outline-offset: 5px !important;
}

/* Harmonize Ashade's common WooCommerce cart controls without changing the cart behavior. */
html body header a.cart-contents,
html body header .ashade-header-cart,
html body header .ashade-cart,
html body header .ashade-cart-link,
html body header .ashade-cart-icon,
html body header .ashade-woo-cart {
  color: #f4f4f4 !important;
  transition: color 180ms ease, opacity 180ms ease, transform 180ms ease !important;
}

html body header a.cart-contents:hover,
html body header .ashade-header-cart:hover,
html body header .ashade-cart:hover,
html body header .ashade-cart-link:hover,
html body header .ashade-cart-icon:hover,
html body header .ashade-woo-cart:hover {
  color: var(--vvb-header-accent-bright) !important;
  opacity: 1 !important;
  transform: translateY(-1px) !important;
}

/* Mobile: preserve Ashade's fullscreen vertical menu while making spacing and account placement deliberate. */
@media (max-width: 1269px) {
  html body ul.vvb-header-nav-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: clamp(15px, 2.1vh, 23px) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item > a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(244, 244, 244, .72) !important;
    font-family: inherit !important;
    font-size: clamp(15px, 4vw, 17px) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: .035em !important;
    text-align: left !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: color 160ms ease, transform 160ms ease !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item > a:hover,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item > a:focus-visible,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item.current-menu-item > a,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item.current_page_item > a,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item.current-menu-ancestor > a {
    color: #ffffff !important;
    transform: translateX(3px) !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta {
    width: auto !important;
    margin-top: 1px !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta > a {
    width: auto !important;
    min-height: 35px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255, 190, 76, .42) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #ffa91d 0%, #ed8d00 100%) !important;
    box-shadow: 0 5px 18px rgba(239, 151, 0, .22) !important;
    color: #17130d !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    transform: none !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item {
    display: flex !important;
    width: 100% !important;
    min-height: 50px !important;
    margin: 12px 0 0 !important;
    padding: 18px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .15) !important;
    white-space: normal !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item > a.vvb-header-account-link {
    width: auto !important;
    min-height: 50px !important;
    gap: 13px !important;
    white-space: normal !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-avatar {
    flex-basis: 48px !important;
    width: 48px !important;
    height: 48px !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-greeting {
    max-width: min(72vw, 300px) !important;
    font-size: 14px !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-action {
    font-size: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body ul.vvb-header-nav-menu > li > a,
  html body li.vvb-header-account-item > a,
  html body header a.cart-contents,
  html body header .ashade-header-cart,
  html body header .ashade-cart,
  html body header .ashade-cart-link,
  html body header .ashade-cart-icon,
  html body header .ashade-woo-cart {
    transition: none !important;
    transform: none !important;
  }
}


/* Refined active/hover states and account-card finish. The glass rail is owned by the Ashade nav wrapper in ViTheme. */
@media (min-width: 1270px) {

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item > a {
    min-height: 38px !important;
    padding: 0 11px 1px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: transparent !important;
    background-image: none !important;
    color: rgba(245,245,245,.72) !important;
    letter-spacing: .075em !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.26) !important;
    transition: color 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item > a::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 5px !important;
    width: 0 !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: linear-gradient(90deg, #e88b00, #ffc04a) !important;
    box-shadow: 0 0 10px rgba(255,166,26,.52) !important;
    transform: translateX(-50%) !important;
    transition: width 220ms ease !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item > a:hover,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item > a:focus-visible,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item.current-menu-item > a,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item.current_page_item > a,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item.current-menu-ancestor > a {
    color: #fff !important;
    border-color: rgba(255,174,45,.17) !important;
    background: linear-gradient(135deg, rgba(255,174,45,.13), rgba(255,255,255,.035)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 16px rgba(0,0,0,.16) !important;
    transform: translateY(-1px) !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item > a:hover::after,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item > a:focus-visible::after,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item.current-menu-item > a::after,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item.current_page_item > a::after,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item.current-menu-ancestor > a::after {
    width: 16px !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta > a {
    min-height: 39px !important;
    padding: 0 21px !important;
    border: 1px solid rgba(255,210,125,.56) !important;
    background: linear-gradient(140deg, #ffc04a 0%, #f49a08 48%, #df8200 100%) !important;
    box-shadow: 0 6px 20px rgba(232,137,0,.28), 0 0 0 3px rgba(240,154,0,.07), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -2px 0 rgba(118,62,0,.14) !important;
    color: #17110a !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.18) !important;
    transition: box-shadow 220ms ease, filter 220ms ease, transform 220ms ease !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta > a::after {
    display: none !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta > a:hover,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta > a:focus-visible {
    background: linear-gradient(140deg, #ffd073 0%, #ffab22 48%, #ed9000 100%) !important;
    box-shadow: 0 8px 25px rgba(239,151,0,.38), 0 0 0 4px rgba(240,154,0,.10), inset 0 1px 0 rgba(255,255,255,.46) !important;
    color: #17110a !important;
    filter: saturate(1.08) brightness(1.03) !important;
    transform: translateY(-2px) !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item {
    min-height: 44px !important;
    margin: 0 0 0 3px !important;
    padding: 3px 8px 3px 14px !important;
    border-left: 1px solid rgba(255,255,255,.17) !important;
    border-radius: 0 999px 999px 0 !important;
    background: linear-gradient(90deg, rgba(255,255,255,.025), rgba(255,255,255,.055)) !important;
    transition: background 220ms ease !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item:hover {
    background: linear-gradient(90deg, rgba(255,255,255,.045), rgba(240,154,0,.09)) !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-avatar {
    flex-basis: 38px !important;
    width: 38px !important;
    height: 38px !important;
    border: 1px solid rgba(255,190,83,.76) !important;
    box-shadow: 0 0 0 3px rgba(240,154,0,.11), 0 0 17px rgba(240,154,0,.16), 0 3px 12px rgba(0,0,0,.30) !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-greeting {
    font-size: 11px !important;
    font-weight: 750 !important;
    letter-spacing: .005em !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-action {
    color: #ffb52e !important;
    font-size: 10px !important;
    letter-spacing: .015em !important;
    text-shadow: 0 0 12px rgba(255,166,26,.16) !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu {
    min-width: 205px !important;
    margin-top: 12px !important;
    padding: 9px !important;
    border: 1px solid rgba(255,174,45,.24) !important;
    border-radius: 15px !important;
    background: linear-gradient(145deg, rgba(22,21,20,.97), rgba(7,7,8,.96)) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.075) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu > li {
    margin: 2px 0 !important;
    padding: 0 !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu > li > a {
    display: flex !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: rgba(245,245,245,.73) !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    letter-spacing: .07em !important;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease, padding 180ms ease !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu > li > a:hover,
  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu > li.current-menu-item > a {
    padding-left: 16px !important;
    border-color: rgba(255,174,45,.15) !important;
    background: linear-gradient(90deg, rgba(240,154,0,.14), rgba(255,255,255,.025)) !important;
    color: #ffc04a !important;
  }
}

@media (max-width: 1269px) {
  html body ul.vvb-header-nav-menu {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item > a {
    position: relative !important;
    padding: 5px 0 5px 2px !important;
    border: 0 !important;
    border-left: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(245,245,245,.70) !important;
    letter-spacing: .055em !important;
    transition: color 200ms ease, border-color 200ms ease, padding 200ms ease, text-shadow 200ms ease !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item > a::after {
    display: none !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item > a:hover,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item > a:focus-visible,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item.current-menu-item > a,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item.current_page_item > a,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item.current-menu-ancestor > a {
    padding-left: 10px !important;
    border-left-color: #f5a313 !important;
    background: linear-gradient(90deg, rgba(240,154,0,.12), transparent 82%) !important;
    color: #fff !important;
    text-shadow: 0 0 18px rgba(255,174,45,.20) !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta > a {
    border: 1px solid rgba(255,210,125,.56) !important;
    background: linear-gradient(140deg, #ffc04a 0%, #f49a08 48%, #df8200 100%) !important;
    box-shadow: 0 7px 22px rgba(232,137,0,.28), 0 0 0 3px rgba(240,154,0,.07), inset 0 1px 0 rgba(255,255,255,.34) !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item {
    box-sizing: border-box !important;
    min-height: 76px !important;
    margin: 18px 0 0 !important;
    padding: 14px 15px !important;
    border: 1px solid rgba(255,174,45,.22) !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)), linear-gradient(115deg, rgba(240,154,0,.075), transparent 58%) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.075) !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item > a.vvb-header-account-link {
    width: 100% !important;
    min-height: 48px !important;
    gap: 14px !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-avatar {
    flex-basis: 50px !important;
    width: 50px !important;
    height: 50px !important;
    border: 1px solid rgba(255,190,83,.74) !important;
    box-shadow: 0 0 0 3px rgba(240,154,0,.10), 0 0 18px rgba(240,154,0,.14), 0 4px 14px rgba(0,0,0,.3) !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-greeting {
    font-size: 14px !important;
    font-weight: 750 !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-action {
    color: #ffb52e !important;
    font-size: 12px !important;
    text-shadow: 0 0 14px rgba(255,166,26,.18) !important;
  }

  html body ul.vvb-header-nav-menu li.menu-item-has-children > ul.sub-menu {
    margin: 7px 0 3px 10px !important;
    padding: 7px !important;
    border: 1px solid rgba(255,174,45,.17) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.035) !important;
  }

  html body ul.vvb-header-nav-menu li.menu-item-has-children > ul.sub-menu > li > a {
    min-height: 34px !important;
    padding: 4px 10px !important;
    color: rgba(245,245,245,.68) !important;
    font-size: 13px !important;
    letter-spacing: .045em !important;
  }

  html body ul.vvb-header-nav-menu li.menu-item-has-children > ul.sub-menu > li > a:hover {
    color: #ffb52e !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body ul.vvb-header-nav-menu,
  html body ul.vvb-header-nav-menu > li > a,
  html body ul.vvb-header-nav-menu > li > a::after,
  html body ul.vvb-header-nav-menu .sub-menu > li > a,
  html body li.vvb-header-account-item,
  html body li.vvb-header-account-item > a {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}


/* ViBook v1.8.9: final layout pass for a calmer, more deliberate header rhythm. */
@media (min-width: 1270px) {
  html body ul.vvb-header-nav-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    width: max-content !important;
    max-width: calc(100vw - 300px) !important;
    padding: 0 9px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta):not(.vvb-header-nav-cart-item) {
    min-width: 66px !important;
    flex: 0 0 66px !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta):not(.vvb-header-nav-cart-item) > a {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 36px !important;
    padding: 0 9px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: rgba(246,246,246,.70) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .055em !important;
    line-height: 1 !important;
    text-align: center !important;
    text-shadow: none !important;
    transform: none !important;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease !important;
  }

  /* Use one state indicator only: a quiet filled capsule, not a capsule plus underline. */
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta) > a::after {
    display: none !important;
    content: none !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta) > a:hover,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta) > a:focus-visible,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta).current-menu-item > a,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta).current_page_item > a,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta).current-menu-ancestor > a {
    border-color: rgba(255,177,54,.22) !important;
    background: linear-gradient(135deg, rgba(255,174,45,.13), rgba(255,255,255,.045)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 3px 12px rgba(0,0,0,.12) !important;
    color: #fff !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta {
    margin: 0 3px 0 5px !important;
    flex: 0 0 auto !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta > a {
    box-sizing: border-box !important;
    min-width: 88px !important;
    min-height: 38px !important;
    padding: 0 19px !important;
    border: 1px solid rgba(255,218,145,.58) !important;
    border-radius: 999px !important;
    background: linear-gradient(145deg, #ffc24f 0%, #f39a08 54%, #df8500 100%) !important;
    box-shadow: 0 5px 16px rgba(231,136,0,.24), inset 0 1px 0 rgba(255,255,255,.38) !important;
    color: #1b1308 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .055em !important;
    text-shadow: none !important;
    transform: none !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta > a:hover,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta > a:focus-visible {
    filter: brightness(1.06) saturate(1.04) !important;
    box-shadow: 0 7px 20px rgba(231,136,0,.31), inset 0 1px 0 rgba(255,255,255,.44) !important;
    transform: translateY(-1px) !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item {
    box-sizing: border-box !important;
    min-width: 202px !important;
    min-height: 42px !important;
    margin: 0 0 0 2px !important;
    padding: 2px 10px 2px 13px !important;
    border: 0 !important;
    border-left: 1px solid rgba(255,255,255,.17) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item > a.vvb-header-account-link {
    gap: 9px !important;
    min-height: 38px !important;
    width: 100% !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-avatar {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    border: 1px solid rgba(255,190,83,.70) !important;
    box-shadow: 0 0 0 2px rgba(240,154,0,.08), 0 3px 10px rgba(0,0,0,.28) !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-copy {
    gap: 3px !important;
    max-width: 145px !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-greeting {
    max-width: 145px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-action {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  /* Cart is treated as a compact utility control, visually separated from account actions. */
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cart-item {
    display: inline-flex !important;
    flex: 0 0 42px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    min-height: 38px !important;
    margin: 0 0 0 1px !important;
    padding: 0 0 0 7px !important;
    border: 0 !important;
    border-left: 1px solid rgba(255,255,255,.15) !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cart-item > a,
  html body header a.cart-contents,
  html body header .ashade-header-cart,
  html body header .ashade-cart,
  html body header .ashade-cart-link,
  html body header .ashade-cart-icon,
  html body header .ashade-woo-cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.035) !important;
    color: rgba(255,255,255,.78) !important;
    box-shadow: none !important;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cart-item > a:hover,
  html body header a.cart-contents:hover,
  html body header .ashade-header-cart:hover,
  html body header .ashade-cart:hover,
  html body header .ashade-cart-link:hover,
  html body header .ashade-cart-icon:hover,
  html body header .ashade-woo-cart:hover {
    border-color: rgba(255,177,54,.34) !important;
    background: rgba(240,154,0,.11) !important;
    color: #ffbd48 !important;
    transform: none !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children {
    position: relative !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu {
    display: block !important;
    position: absolute !important;
    z-index: 99999 !important;
    top: calc(100% + 9px) !important;
    left: 0 !important;
    min-width: 205px !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid rgba(255,177,54,.22) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, rgba(22,21,20,.97), rgba(7,7,8,.96)) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
    backdrop-filter: blur(18px) saturate(135%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(6px) !important;
    transition: opacity 160ms ease, visibility 160ms ease, transform 160ms ease !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children:hover > ul.sub-menu,
  html body ul.vvb-header-nav-menu > li.menu-item-has-children:focus-within > ul.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu > li {
    display: block !important;
    width: 100% !important;
    margin: 2px 0 !important;
    padding: 0 !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu > li > a {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    padding: 0 11px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: rgba(245,245,245,.76) !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    letter-spacing: .045em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu > li > a:hover,
  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu > li.current-menu-item > a {
    padding-left: 11px !important;
    border-color: rgba(255,177,54,.14) !important;
    background: linear-gradient(90deg, rgba(240,154,0,.13), rgba(255,255,255,.025)) !important;
    color: #ffc04a !important;
  }
}

@media (max-width: 1269px) {
  html body ul.vvb-header-nav-menu {
    gap: 11px !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta) > a {
    min-height: 30px !important;
    padding: 5px 0 5px 3px !important;
    font-size: 15px !important;
    letter-spacing: .045em !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta) > a:hover,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta) > a:focus-visible,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta).current-menu-item > a,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta).current_page_item > a,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta).current-menu-ancestor > a {
    padding-left: 10px !important;
    border-left: 2px solid #f5a313 !important;
    border-radius: 0 8px 8px 0 !important;
    background: linear-gradient(90deg, rgba(240,154,0,.12), transparent 88%) !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta {
    margin-top: 5px !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item {
    margin-top: 15px !important;
    padding: 15px 16px !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.025)) !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu {
    position: static !important;
    display: block !important;
    margin: 5px 0 3px 10px !important;
    padding: 7px !important;
    border: 1px solid rgba(255,177,54,.16) !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.035) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu > li > a {
    min-height: 34px !important;
    padding: 4px 10px !important;
    color: rgba(245,245,245,.72) !important;
    font-size: 13px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body ul.vvb-header-nav-menu,
  html body ul.vvb-header-nav-menu > li > a,
  html body ul.vvb-header-nav-menu .sub-menu > li > a,
  html body li.vvb-header-account-item > a,
  html body header a.cart-contents {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ViBook v1.8.10: close the desktop dropdown hover gap and keep the cart badge inside the glass rail. */
@media (min-width: 1270px) {
  html body ul.vvb-header-nav-menu > li.menu-item-has-children {
    position: relative !important;
    overflow: visible !important;
  }

  /* The submenu box starts at the parent item's lower edge. Its transparent top
     padding creates the visual offset while remaining part of the hover target. */
  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu {
    top: calc(100% - 1px) !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 12px 8px 8px !important;
    border: 0 !important;
    border-radius: 0 0 15px 15px !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    top: 12px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    border: 1px solid rgba(255,177,54,.24) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, rgba(22,21,20,.97), rgba(7,7,8,.96)) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.075) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
    pointer-events: none !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu > li {
    position: relative !important;
    z-index: 1 !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-cart-generated,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cart-item.vvb-header-cart-generated {
    display: inline-flex !important;
    flex: 0 0 42px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    min-height: 38px !important;
    margin: 0 0 0 2px !important;
    padding: 0 3px 0 6px !important;
    border: 0 !important;
    border-left: 1px solid rgba(255,255,255,.15) !important;
    box-sizing: border-box !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-cart-generated > a.vvb-header-cart-link {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.035) !important;
    color: rgba(255,255,255,.82) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    overflow: visible !important;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-cart-generated > a.vvb-header-cart-link:hover,
  html body ul.vvb-header-nav-menu > li.vvb-header-cart-generated > a.vvb-header-cart-link:focus-visible {
    border-color: rgba(255,177,54,.48) !important;
    background: rgba(240,154,0,.13) !important;
    color: #ffc04a !important;
    box-shadow: 0 0 14px rgba(240,154,0,.12) !important;
  }

  html body ul.vvb-header-nav-menu .vvb-header-cart-icon {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  html body ul.vvb-header-nav-menu .vvb-header-cart-count {
    position: absolute !important;
    top: -5px !important;
    right: -4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 15px !important;
    height: 15px !important;
    padding: 0 3px !important;
    border: 1px solid rgba(255,190,76,.36) !important;
    border-radius: 999px !important;
    background: #171513 !important;
    color: #fff !important;
    box-shadow: 0 2px 7px rgba(0,0,0,.35) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
  }
}

/* Ashade places its WooCommerce cart control outside wp_nav_menu(). ViBook now
   renders the same cart/count as a menu item, so hide only the separate control. */
html body header .ashade-header-cart,
html body header .ashade-cart,
html body header .ashade-cart-link,
html body header .ashade-cart-icon,
html body header .ashade-woo-cart,
html body header a.cart-contents {
  display: none !important;
}

/* All Ashade-native cart aliases are duplicates: ViBook owns the single header cart. */
html body ul.vvb-header-nav-menu .ashade-header-cart,
html body ul.vvb-header-nav-menu .ashade-cart,
html body ul.vvb-header-nav-menu .ashade-cart-link,
html body ul.vvb-header-nav-menu .ashade-cart-icon,
html body ul.vvb-header-nav-menu .ashade-woo-cart,
html body ul.vvb-header-nav-menu a.cart-contents {
  display: none !important;
}

@media (max-width: 1269px) {
  html body ul.vvb-header-nav-menu > li.vvb-header-cart-generated {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 48px !important;
    min-height: 42px !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-cart-generated > a.vvb-header-cart-link {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border: 1px solid rgba(255,174,45,.22) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.04) !important;
    color: #f4f4f4 !important;
  }
}


/* ViBook v1.8.13: add a visible breathing space above desktop submenu cards and
   keep the first and last submenu links equally inset inside the card. */
@media (min-width: 1270px) {
  html body ul.vvb-header-nav-menu > li.menu-item-has-children {
    position: relative !important;
    overflow: visible !important;
  }

  /* The transparent bridge spans the full visual gap and slightly overlaps the submenu,
     so moving the pointer into the dropdown never crosses a dead hover area. */
  html body ul.vvb-header-nav-menu > li.menu-item-has-children::after {
    content: "" !important;
    position: absolute !important;
    z-index: 99998 !important;
    top: 100% !important;
    left: 0 !important;
    display: block !important;
    width: max(100%, 220px) !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    pointer-events: auto !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu {
    top: calc(100% + 12px) !important;
    left: 0 !important;
    margin: 0 !important;
    /* Symmetric vertical padding gives the first and last items the same card inset. */
    padding: 14px 8px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu::before {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    border: 1px solid rgba(255,177,54,.24) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, rgba(22,21,20,.97), rgba(7,7,8,.96)) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.075) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
    pointer-events: none !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-cart-generated {
    order: 9999 !important;
    margin-left: auto !important;
  }
}

/* Ashade outputs this wrapper beside wp_nav_menu(), outside the ViBook glass rail.
   Hide that external instance. The generated ViBook cart remains the single cart control. */
html body .ashade-wc-header-cart-wrap {
  display: none !important;
}

/* The Ashade cart wrapper is always a duplicate when ViBook adds its own cart item.
   Hide it even if a theme version injects it inside the menu. */
html body ul.vvb-header-nav-menu .ashade-wc-header-cart-wrap,
html body header .ashade-wc-header-cart-wrap {
  display: none !important;
}


/* ViBook v1.8.19: safe cinematic header intro.
   The menu is visible by default. Animation is activated only after the intro script
   adds .vvb-header-intro-active to <html>, so blocked JS/CSS can never hide navigation. */
@media (min-width: 1270px) {
  html body ul.vvb-header-nav-menu {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
    border-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body ul.vvb-header-nav-menu::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;
    display: block !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background:
      linear-gradient(115deg, rgba(18,18,18,.88), rgba(20,18,15,.80) 62%, rgba(8,8,8,.86)) padding-box,
      linear-gradient(115deg, rgba(255,255,255,.18), rgba(240,154,0,.38) 48%, rgba(255,255,255,.10)) border-box !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.28) !important;
    -webkit-backdrop-filter: blur(20px) saturate(138%) !important;
    backdrop-filter: blur(20px) saturate(138%) !important;
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top center !important;
    pointer-events: none !important;
  }

  /* On page entry, play only the reveal. The separate exit keyframes are used
     before leaving the current page; never replay an exit as part of the intro. */
  html.vvb-header-intro-active body ul.vvb-header-nav-menu::before {
    will-change: transform, opacity !important;
    animation: vvbHeaderRailIntro 680ms cubic-bezier(.2,.78,.25,1) both !important;
  }

  /* Normal state is always visible. The animation may temporarily override it. */
  html body ul.vvb-header-nav-menu > li {
    position: relative !important;
    z-index: 1 !important;
    opacity: 1;
    transform: none;
  }

  html.vvb-header-intro-active body ul.vvb-header-nav-menu > li {
    will-change: opacity, transform !important;
    animation: vvbHeaderMenuItemsIntro 360ms cubic-bezier(.2,.72,.25,1) 680ms both !important;
  }
}

@keyframes vvbHeaderRailIntro {
  /* A freshly loaded page starts with the rail folded and reveals it top-to-bottom. */
  from {
    opacity: .42;
    transform: scaleY(0);
    transform-origin: top center;
  }
  to {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top center;
  }
}

@keyframes vvbHeaderMenuItemsIntro {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body ul.vvb-header-nav-menu::before {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    will-change: auto !important;
  }

  html body ul.vvb-header-nav-menu > li {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    will-change: auto !important;
  }
}

/* ViBook v1.8.20: rebuild the Ashade fullscreen mobile navigation as a clean,
   stacked accordion. Desktop dropdown styling above remains untouched. */
@media (max-width: 1269px) {
  html body ul.vvb-header-nav-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 460px !important;
    max-height: calc(100vh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
    margin: 0 auto !important;
    padding: 58px 24px 30px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    list-style: none !important;
    text-align: left !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item {
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    list-style: none !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.menu-item-has-children) > a,
  html body ul.vvb-header-nav-menu > li.menu-item-has-children > a {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 11px 14px !important;
    border: 1px solid transparent !important;
    border-left: 2px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(246,246,246,.78) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    letter-spacing: .035em !important;
    text-align: left !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    transform: none !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item > a:hover,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item > a:focus-visible,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item.current-menu-item > a,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item.current_page_item > a,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item.current-menu-ancestor > a {
    border-color: rgba(255,177,54,.16) !important;
    border-left-color: #f5a313 !important;
    background: linear-gradient(90deg, rgba(240,154,0,.13), rgba(255,255,255,.025) 72%, transparent) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  /* Parent row and disclosure control stay on one line; the submenu occupies
     the next full row instead of floating beside the parent label. */
  html body ul.vvb-header-nav-menu > li.menu-item-has-children {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 6px !important;
    row-gap: 0 !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > a {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > .vvb-mobile-submenu-toggle {
    display: inline-flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,177,54,.19) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.035) !important;
    color: #ffbd48 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > .vvb-mobile-submenu-toggle > span {
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) translate(-2px, -2px) !important;
    transition: transform 180ms ease !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children.vvb-mobile-submenu-open > .vvb-mobile-submenu-toggle {
    border-color: rgba(255,177,54,.42) !important;
    background: rgba(240,154,0,.13) !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children.vvb-mobile-submenu-open > .vvb-mobile-submenu-toggle > span {
    transform: rotate(225deg) translate(-1px, -1px) !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu {
    display: block !important;
    position: static !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    box-sizing: border-box !important;
    width: calc(100% - 14px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 14px) !important;
    height: auto !important;
    max-height: none !important;
    margin: 7px 0 12px 14px !important;
    padding: 8px !important;
    float: none !important;
    border: 1px solid rgba(255,177,54,.20) !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg, rgba(25,24,23,.96), rgba(9,9,10,.95)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 24px rgba(0,0,0,.18) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    text-align: left !important;
  }

  html body ul.vvb-header-nav-menu.vvb-mobile-accordion-ready > li.menu-item-has-children:not(.vvb-mobile-submenu-open) > ul.sub-menu {
    display: none !important;
  }

  html body ul.vvb-header-nav-menu.vvb-mobile-accordion-ready > li.menu-item-has-children.vvb-mobile-submenu-open > ul.sub-menu {
    display: block !important;
    animation: vvbMobileSubmenuReveal 180ms ease-out both !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu > li {
    display: block !important;
    position: static !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    list-style: none !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu > li > a {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: rgba(245,245,245,.76) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    letter-spacing: .015em !important;
    text-align: left !important;
    text-transform: none !important;
    white-space: normal !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu > li > a:hover,
  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu > li.current-menu-item > a {
    border-color: rgba(255,177,54,.14) !important;
    background: linear-gradient(90deg, rgba(240,154,0,.14), rgba(255,255,255,.025)) !important;
    color: #ffc04a !important;
  }

  /* The booking CTA, customer card and cart form a distinct footer group. */
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta {
    width: auto !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta > a {
    display: inline-flex !important;
    width: auto !important;
    min-width: 112px !important;
    min-height: 42px !important;
    padding: 0 20px !important;
    border: 1px solid rgba(255,210,125,.56) !important;
    border-radius: 999px !important;
    background: linear-gradient(140deg, #ffc04a 0%, #f49a08 48%, #df8200 100%) !important;
    color: #17110a !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .045em !important;
    box-shadow: 0 7px 22px rgba(232,137,0,.27), inset 0 1px 0 rgba(255,255,255,.36) !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item {
    display: flex !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 76px !important;
    margin: 18px 0 0 !important;
    padding: 14px 15px !important;
    border: 1px solid rgba(255,174,45,.23) !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)), linear-gradient(115deg, rgba(240,154,0,.08), transparent 58%) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07) !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item > a.vvb-header-account-link {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    gap: 13px !important;
    white-space: normal !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-avatar {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-copy,
  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-greeting {
    max-width: 100% !important;
    white-space: normal !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-greeting {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-action {
    font-size: 12px !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cart-item {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 7px 0 0 !important;
    padding: 0 3px !important;
    border: 0 !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cart-item > a.vvb-header-cart-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,174,45,.24) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.045) !important;
    color: #f4f4f4 !important;
  }
}

@keyframes vvbMobileSubmenuReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu,
  html body ul.vvb-header-nav-menu > li.menu-item-has-children > .vvb-mobile-submenu-toggle > span {
    animation: none !important;
    transition: none !important;
  }
}

/* ViBook v1.8.21: mobile interaction and readability refinements. */
@media (max-width: 1269px) {
  html body ul.vvb-header-nav-menu > li.vvb-header-account-item {
    width: 100% !important;
    max-width: 100% !important;
  }
  html body ul.vvb-header-nav-menu > li.vvb-header-account-item > a.vvb-header-account-link {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-avatar {
    grid-column: 1 !important;
    flex: 0 0 48px !important;
  }
  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-copy {
    grid-column: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-greeting {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    font-size: clamp(11px, 3.6vw, 14px) !important;
    line-height: 1.25 !important;
  }
  html body ul.vvb-header-nav-menu > li.vvb-header-account-item .vvb-header-account-action {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cart-item > a.vvb-header-cart-link {
    color: #ffffff !important;
  }
  html body ul.vvb-header-nav-menu .vvb-header-cart-icon {
    display: block !important;
    fill: none !important;
    stroke: #ffffff !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    color: #ffffff !important;
  }
  html body ul.vvb-header-nav-menu .vvb-header-cart-icon path,
  html body ul.vvb-header-nav-menu .vvb-header-cart-icon circle {
    fill: none !important;
    stroke: #ffffff !important;
  }
  html body ul.vvb-header-nav-menu.vvb-mobile-nav-closing {
    pointer-events: none !important;
    animation: vvbMobileNavExit 260ms cubic-bezier(.55,0,.85,.35) both !important;
  }
}

html.vvb-header-intro-exit body ul.vvb-header-nav-menu::before {
  animation: vvbHeaderRailExit 260ms cubic-bezier(.55,0,.85,.35) both !important;
  transform-origin: top center !important;
}
html.vvb-header-intro-exit body ul.vvb-header-nav-menu > li {
  animation: vvbHeaderItemsExit 180ms ease-in both !important;
  pointer-events: none !important;
}
@keyframes vvbHeaderRailExit {
  from { opacity: 1; transform: scaleY(1); }
  to { opacity: .35; transform: scaleY(0); }
}
@keyframes vvbHeaderItemsExit {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-5px); }
}
@keyframes vvbMobileNavExit {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  html.vvb-header-intro-exit body ul.vvb-header-nav-menu::before,
  html.vvb-header-intro-exit body ul.vvb-header-nav-menu > li,
  html body ul.vvb-header-nav-menu.vvb-mobile-nav-closing {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ViBook v1.8.22: keep desktop navigation clean and restore the native Ashade hover menu.
   The mobile accordion is deliberately limited to small screens and never injects controls on desktop. */
@media (min-width: 1270px) {
  html body header nav.ashade-nav ul.vvb-header-nav-menu > li.vvb-header-nav-item,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body header nav.ashade-nav ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta):not(.vvb-header-nav-cart-item) > a,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta):not(.vvb-header-nav-cart-item) > a {
    border: 1px solid transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
  }

  html body header nav.ashade-nav ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta):not(.vvb-header-nav-cart-item) > a:hover,
  html body header nav.ashade-nav ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta):not(.vvb-header-nav-cart-item) > a:focus-visible,
  html body header nav.ashade-nav ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta):not(.vvb-header-nav-cart-item).current-menu-item > a,
  html body header nav.ashade-nav ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta):not(.vvb-header-nav-cart-item).current-menu-ancestor > a,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta):not(.vvb-header-nav-cart-item) > a:hover,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta):not(.vvb-header-nav-cart-item) > a:focus-visible,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta):not(.vvb-header-nav-cart-item).current-menu-item > a,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item:not(.vvb-header-nav-cta):not(.vvb-header-nav-cart-item).current-menu-ancestor > a {
    border-color: rgba(255,177,54,.18) !important;
    background: linear-gradient(135deg, rgba(255,174,45,.12), rgba(255,255,255,.025)) !important;
    box-shadow: none !important;
  }

  html body header nav.ashade-nav ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu > li,
  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu > li {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body header nav.ashade-nav ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu > li > a,
  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu > li > a {
    border: 1px solid transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  html body ul.vvb-header-nav-menu .vvb-mobile-submenu-toggle {
    display: none !important;
  }
}

/* Mobile accordion rows stay in normal document flow so long submenus push
   subsequent top-level items down instead of overlaying them. */
@media (max-width: 1269px) {
  html body ul.vvb-header-nav-menu.vvb-mobile-accordion-ready > li.menu-item-has-children:not(.vvb-mobile-submenu-open) > ul.sub-menu,
  html body ul.vvb-header-nav-menu.vvb-mobile-accordion-ready > li.menu-item-has-children.vvb-mobile-submenu-open > ul.sub-menu {
    display: block !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > a {
    display: flex !important;
    width: calc(100% - 48px) !important;
    min-height: 46px !important;
    margin: 0 !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > .vvb-mobile-submenu-toggle {
    position: absolute !important;
    top: 3px !important;
    right: 0 !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,177,54,.22) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.035) !important;
    color: #ffbd48 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu {
    display: block !important;
    position: static !important;
    box-sizing: border-box !important;
    width: calc(100% - 14px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 14px) !important;
    height: auto !important;
    margin: 0 0 0 14px !important;
    padding: 0 8px !important;
    float: none !important;
    overflow: hidden !important;
    max-height: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg, rgba(25,24,23,.96), rgba(9,9,10,.95)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 24px rgba(0,0,0,.18) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-5px) !important;
    transition: max-height 300ms cubic-bezier(.2,.72,.25,1), opacity 190ms ease, margin 240ms ease, padding 240ms ease, border-color 240ms ease, transform 240ms ease, visibility 0s linear 300ms !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children.vvb-mobile-submenu-open > ul.sub-menu {
    max-height: none !important;
    margin: 7px 0 12px 14px !important;
    padding: 8px !important;
    border-color: rgba(255,177,54,.20) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: max-height 300ms cubic-bezier(.2,.72,.25,1), opacity 190ms ease, margin 240ms ease, padding 240ms ease, border-color 240ms ease, transform 240ms ease, visibility 0s !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu > li {
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu > li > a {
    display: flex !important;
    width: 100% !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
    padding: 9px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: rgba(245,245,245,.76) !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    white-space: normal !important;
  }
}


/* ViBook v1.8.23: tidy mobile navigation rhythm and make the booking CTA
   a centered full-width action matching the customer account card. Desktop is untouched. */
@media (max-width: 1269px) {
  html body ul.vvb-header-nav-menu {
    gap: 7px !important;
    padding: 58px 24px 30px !important;
  }

  /* Keep every top-level parent label and chevron aligned in a predictable grid. */
  html body ul.vvb-header-nav-menu > li.menu-item-has-children {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > a {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > .vvb-mobile-submenu-toggle {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    align-self: center !important;
    justify-self: stretch !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
  }

  /* The submenu remains in normal flow, with a consistent inset and animated height. */
  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    position: static !important;
    display: block !important;
    box-sizing: border-box !important;
    width: calc(100% - 10px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 10px) !important;
    height: auto !important;
    margin: 0 0 0 10px !important;
    padding: 0 9px !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg, rgba(25,24,23,.96), rgba(9,9,10,.95)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 24px rgba(0,0,0,.18) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-4px) !important;
    transition: max-height 300ms cubic-bezier(.2,.72,.25,1), opacity 190ms ease, margin 240ms ease, padding 240ms ease, border-color 240ms ease, transform 240ms ease, visibility 0s linear 300ms !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children.vvb-mobile-submenu-open > ul.sub-menu {
    margin: 7px 0 9px 10px !important;
    padding: 8px 9px !important;
    border-color: rgba(255,177,54,.20) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: max-height 300ms cubic-bezier(.2,.72,.25,1), opacity 190ms ease, margin 240ms ease, padding 240ms ease, border-color 240ms ease, transform 240ms ease, visibility 0s !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu > li > a {
    min-height: 40px !important;
    padding: 8px 11px !important;
    line-height: 1.3 !important;
  }

  /* Book Me uses the same content width as the profile card and is centered. */
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 13px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta > a {
    display: flex !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    text-align: center !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-account-item {
    box-sizing: border-box !important;
    width: 100% !important;
    margin-top: 12px !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cart-item {
    width: 100% !important;
    justify-content: flex-end !important;
    margin-top: 7px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body ul.vvb-header-nav-menu > li.menu-item-has-children > ul.sub-menu,
  html body ul.vvb-header-nav-menu > li.menu-item-has-children > .vvb-mobile-submenu-toggle > span {
    transition: none !important;
    animation: none !important;
  }
}


/* ViBook v1.8.29: keep Home and Book Me visibly styled in the mobile menu
   even when they are not the current/active page. Desktop navigation is untouched. */
@media (max-width: 1269px) {
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-home-item > a,
  html body ul.vvb-header-nav-menu > li.menu-item-home.vvb-header-nav-item > a,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item:first-child:not(.vvb-header-nav-cta):not(.menu-item-has-children) > a {
    border: 1px solid rgba(255, 177, 54, .22) !important;
    border-left: 2px solid #f5a313 !important;
    border-radius: 10px !important;
    background: linear-gradient(110deg, rgba(240, 154, 0, .16), rgba(255, 255, 255, .045) 72%, rgba(255, 255, 255, .02)) !important;
    background-color: rgba(240, 154, 0, .075) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 3px 12px rgba(0,0,0,.12) !important;
    color: #fff !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta > a,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta > a:link,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta > a:visited {
    border: 1px solid rgba(255, 218, 145, .62) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, #ffc24f 0%, #f39a08 54%, #df8500 100%) !important;
    background-color: #f39a08 !important;
    box-shadow: 0 7px 20px rgba(231,136,0,.28), 0 0 0 3px rgba(240,154,0,.07), inset 0 1px 0 rgba(255,255,255,.38) !important;
    color: #1b1308 !important;
    opacity: 1 !important;
  }

  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta > a:hover,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta > a:focus-visible,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-cta > a:active {
    background: linear-gradient(145deg, #ffd071 0%, #ffa91d 54%, #eb9200 100%) !important;
    background-color: #ffa91d !important;
    color: #17110a !important;
    filter: none !important;
  }
}


/* ViBook v1.8.30: mobile submenu cards must participate in normal document flow.
   Use a block-flow accordion instead of the earlier grid row so each expanded
   submenu increases its parent item's height and pushes every following item down. */
@media (max-width: 1269px) {
  html body ul.vvb-header-nav-menu > li.menu-item-has-children.vvb-mobile-has-submenu {
    display: block !important;
    position: relative !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children.vvb-mobile-has-submenu > a {
    display: flex !important;
    position: relative !important;
    width: calc(100% - 48px) !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 11px 14px !important;
    box-sizing: border-box !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children.vvb-mobile-has-submenu > .vvb-mobile-submenu-toggle {
    position: absolute !important;
    top: 3px !important;
    right: 0 !important;
    z-index: 3 !important;
    display: inline-flex !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
  }

  html body ul.vvb-header-nav-menu.vvb-mobile-accordion-ready > li.menu-item-has-children.vvb-mobile-has-submenu > ul.sub-menu,
  html body ul.vvb-header-nav-menu.vvb-mobile-accordion-ready > li.menu-item-has-children.vvb-mobile-has-submenu.vvb-mobile-submenu-open > ul.sub-menu {
    display: block !important;
    position: static !important;
    inset: auto !important;
    float: none !important;
    clear: both !important;
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: auto !important;
    box-sizing: border-box !important;
    width: calc(100% - 14px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 14px) !important;
    height: auto !important;
    max-height: 0 !important;
    margin: 0 0 0 14px !important;
    padding: 0 9px !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg, rgba(25,24,23,.97), rgba(9,9,10,.96)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 24px rgba(0,0,0,.18) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    transition: max-height 320ms cubic-bezier(.2,.72,.25,1), opacity 200ms ease, margin 240ms ease, padding 240ms ease, border-color 240ms ease, visibility 0s linear 320ms !important;
  }

  html body ul.vvb-header-nav-menu.vvb-mobile-accordion-ready > li.menu-item-has-children.vvb-mobile-has-submenu.vvb-mobile-submenu-open > ul.sub-menu {
    margin: 8px 0 12px 14px !important;
    padding: 8px 9px !important;
    border-color: rgba(255,177,54,.22) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: max-height 320ms cubic-bezier(.2,.72,.25,1), opacity 200ms ease, margin 240ms ease, padding 240ms ease, border-color 240ms ease, visibility 0s !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children.vvb-mobile-has-submenu > ul.sub-menu > li {
    display: block !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body ul.vvb-header-nav-menu > li.menu-item-has-children.vvb-mobile-has-submenu > ul.sub-menu {
    transition: none !important;
  }
}


/* ViBook v1.8.31: keep expanded mobile submenus in the menu's actual flex flow.
   The menu itself is a vertical flex scroller; flex items must not shrink when
   a long submenu opens, otherwise the submenu paints over the following rows. */
@media (max-width: 1269px) {
  html body ul.vvb-header-nav-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  html body ul.vvb-header-nav-menu > li,
  html body ul.vvb-header-nav-menu > li.vvb-header-nav-item {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children.vvb-mobile-has-submenu {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children.vvb-mobile-has-submenu > a {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: calc(100% - 48px) !important;
    height: auto !important;
    min-height: 46px !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children.vvb-mobile-has-submenu > .vvb-mobile-submenu-toggle {
    position: absolute !important;
    top: 3px !important;
    right: 0 !important;
    flex: 0 0 40px !important;
  }

  html body ul.vvb-header-nav-menu.vvb-mobile-accordion-ready > li.menu-item-has-children.vvb-mobile-has-submenu > ul.sub-menu {
    display: block !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    position: static !important;
    inset: auto !important;
    width: calc(100% - 14px) !important;
    max-width: calc(100% - 14px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 0 14px !important;
    padding: 0 9px !important;
    overflow: hidden !important;
    float: none !important;
    clear: both !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  html body ul.vvb-header-nav-menu.vvb-mobile-accordion-ready > li.menu-item-has-children.vvb-mobile-has-submenu.vvb-mobile-submenu-open > ul.sub-menu {
    margin: 8px 0 12px 14px !important;
    padding: 8px 9px !important;
  }

  html body ul.vvb-header-nav-menu > li.menu-item-has-children.vvb-mobile-has-submenu > ul.sub-menu > li {
    display: block !important;
    flex: 0 0 auto !important;
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}




/* v1.0.9: keep the highlighted final word flowing beside the main hero headline.
   The older ViBook account stylesheet used text-wrap: balance, which could
   intentionally move the short highlighted ending onto its own line. */
html body .vvb-account-gate.vvb-account-entry .vvb-account-hero h1 {
  text-wrap: wrap !important;
}
html body .vvb-account-gate.vvb-account-entry .vvb-account-hero h1 > span {
  display: inline !important;
  white-space: nowrap !important;
}

/* v1.1.0: keep the highlighted hero ending identical in size and italic style.
   Only its Vita Vision orange color is different from the main headline. */
html body .vvb-account-gate.vvb-account-entry .vvb-account-hero h1 > span {
  display: inline !important;
  white-space: nowrap !important;
  color: #ff981d !important;
  font-size: inherit !important;
  font-style: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  vertical-align: baseline !important;
}