.amenity-page{
  .bordered-bottom{
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 50px;
    padding-bottom: 40px;
  }
  .promo-nav .g-menu-wrapper{
     margin-bottom: 30px;
     overflow: hidden;
  }

  .g-menu-container ul.responsive-visible li a.g-menu-placeholder-wrapper{
    border:  1px solid rgba(255, 255, 255, 0.2);
        border-radius: 999px;
       
  }
}

@media(min-width: 1200px){
  .amenity-page .column-splitter > div:first-child{
    max-width: 400px;
  }
}

/* ============================================================
   Amenity jump-to nav: full-width bar that pins to the top of the
   viewport once scrolled to. PromoNav.tsx toggles `.is-stuck`
   (position:sticky was being clipped by an ancestor's overflow).
   Mobile keeps the dropdown; the bar just becomes fixed. Active
   link is driven by the scroll-spy in PromoNav.tsx.
   ============================================================ */
.amenity-page .promo-nav.g-menu-container {
  display: block;
}

.amenity-page .promo-nav .promo-container {
  width: 100%;
}

/* Full-bleed bar (breaks out of the centred container to the viewport edges). */
.amenity-page .promo-nav .g-menu-wrapper {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: visible;
  margin-bottom: 60px;
}
@media(max-width: 1024px){
  .amenity-page .promo-nav .g-menu-wrapper {
    margin-bottom: 40px;
  }
}

/* Pinned to the top of the viewport while scrolling through the sections. */
.amenity-page .promo-nav .g-menu-wrapper.is-stuck {
  position: fixed;
  top: var(--amenity-nav-top, 0px);
  left: 0;
  right: 0;
  width: 100vw;
  margin: 0;
  z-index: 50;
  background: #efe7d9 url('/harbourside-vip/images/bg/bg-ivory.jpg') center / cover no-repeat;
}

/* Reserve the bar's height while pinned so the content below doesn't jump. */
.amenity-page .promo-nav.g-menu-container:has(.g-menu-wrapper.is-stuck) {
  padding-top: var(--amenity-nav-height, 60px);
}

/* Desktop: show every option in one centred row; scroll horizontally only if
   they don't all fit (safe center keeps the first item reachable when scrolling). */
@media (min-width: 1025px) {
  /* !important beats the component's inline `display` on #g-menu-ul-explore and
     the base side-nav rules. max-width:100vw guarantees the row overflows (and
     therefore scrolls) instead of growing wider than the screen. */
  .amenity-page .promo-nav .g-menu-ul#g-menu-ul-explore,
  .amenity-page .promo-nav .g-menu-ul {
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: safe center;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0 20px;
    list-style: none;
    overflow-x: scroll !important;
    overflow-y: hidden;
    min-width: 0;
  }

  /* Base side-nav CSS forces li to display:block; width:100% — make each tab
     content-width so they sit in a compact row. */
  .amenity-page .promo-nav .g-menu-ul li {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    display: block;
  }
  .amenity-page .promo-nav .g-menu-ul li a {
    white-space: nowrap;
    padding-inline: 10px;
  }

  /* Active indicator: gold underline beneath the text (base draws a left-side
     bar for the vertical side nav — flip it to a full-width 2px underline). */
  .amenity-page .promo-nav .g-menu-ul li a.active::before {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 2px;
    transform: none;
  }
}

.amenity-page .promo-nav .g-menu-ul {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.amenity-page .promo-nav .g-menu-ul::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Sticky offset — clears the fixed header (taller while the cookie bar shows).
   80px default / 120px with cookiebar; 60px / 100px on mobile. */
.amenity-page {
  --amenity-nav-top: 80px;
}
body:has(header.has-cookiebar) .amenity-page {
  --amenity-nav-top: 120px;
}
@media (max-width: 1024px) {
  .amenity-page {
    --amenity-nav-top: 60px;
  }
  body:has(header.has-cookiebar) .amenity-page {
    --amenity-nav-top: 100px;
  }
}


/* ============================================================
   PromoNav "Categories" variant
   ============================================================ */

/* The container must establish a positioning context so the pinned bar paints
   above the promo sections that follow it. No z-index here on purpose: adding
   one would create a stacking context and trap the bar's own z-index inside it. */
.amenity-page .promo-nav--categories.g-menu-container {
  position: relative;
}

/* Pinned bar. Restated for the Categories variant so the fixed positioning is
   unambiguous regardless of which other classes the author adds to the
   container (max-width-container, bg-ivory, padding-bottom...). */
.amenity-page .promo-nav--categories .g-menu-wrapper.is-stuck {
  position: fixed;
  top: var(--amenity-nav-top, 80px);
  left: 0;
  right: 0;
  width: 100vw;
  margin: 0;
  z-index: 50;
}

.promo-nav--categories #g-menu-ul-explore{
    width: 100%;
    background-image: url(/harbourside-vip/images/bg/bg-ivory.jpg);
    background-size: 100%;
    background-position: top left;
    background-repeat: repeat;
}
.promo-nav--categories .g-menu-container ul.g-menu-ul li a{
  color: #414141;
}
.promo-nav--categories .g-menu-container ul.responsive-visible li a.g-menu-placeholder-wrapper{
  border-radius: unset;
}