/* ============================================================
   XCAMS_GLOBAL_NAV_V1
   Shared navigation for category / models / profile / favorites
   Homepage keeps its existing native sidebar.
   ============================================================ */

body.xcams-global-nav-page {
  padding-left: 220px !important;
}

.xcams-global-nav {
  position: fixed;
  left: 0;
  top: 0;

  width: 210px;
  height: 100vh;

  overflow-y: auto;

  z-index: 9000;

  padding: 16px 10px 28px;

  background:
    linear-gradient(
      180deg,
      rgba(12,14,19,.985),
      rgba(3,4,6,.985)
    );

  border-right:
    1px solid rgba(255,255,255,.10);

  color: #fff;

  scrollbar-width: none;
}

.xcams-global-nav::-webkit-scrollbar {
  display: none;
}


.xcams-global-brand {
  display: block;

  margin:
    2px
    6px
    16px;

  color: #fff;

  text-decoration: none;

  font-size: 1.03rem;
  font-weight: 950;
  letter-spacing: -.045em;
}


.xcams-global-primary-nav,
.xcams-global-category-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
}


.xcams-global-primary-nav {
  margin-bottom: 18px;
}


.xcams-global-primary-nav a,
.xcams-global-category-nav a {
  display: block;

  width: 100%;

  padding:
    8px
    10px;

  border:
    1px solid transparent;

  border-radius: 9px;

  color: #d7deea;

  text-decoration: none;

  font-size: .78rem;
  font-weight: 850;
  line-height: 1.15;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}


.xcams-global-primary-nav a:hover,
.xcams-global-category-nav a:hover {
  background:
    rgba(255,255,255,.055);

  border-color:
    rgba(239,31,48,.24);

  color: #fff;
}


.xcams-global-category-nav a.active {
  background:
    rgba(239,31,48,.12);

  border-color:
    rgba(239,31,48,.48);

  color: #fff;
}


.xcams-global-nav-heading {
  margin:
    14px
    8px
    8px;

  color:
    rgba(255,255,255,.52);

  font-size: .67rem;
  font-weight: 950;

  letter-spacing: .11em;
  text-transform: uppercase;
}


.xcams-global-more {
  margin-top: 14px;
}


.xcams-global-more summary {
  cursor: pointer;

  list-style: none;

  padding:
    8px
    10px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius: 9px;

  background:
    rgba(255,255,255,.035);

  color: #f8fafc;

  font-size: .78rem;
  font-weight: 900;
}


.xcams-global-more summary::-webkit-details-marker {
  display: none;
}


.xcams-global-more summary::before {
  content: "▾ ";

  color: #ffd166;
}


.xcams-global-category-nav-more {
  margin-top: 7px;

  padding-left: 8px;

  border-left:
    1px solid rgba(245,182,35,.18);
}


/*
 * Favorites JS already looks for .side-nav.
 * Our primary nav intentionally has that class so the existing
 * dynamic Favorites link appears here without new favorites logic.
 */
.xcams-global-nav .xcams-favorites-nav,
.xcams-global-nav .favorites-nav-link {
  color: #ffb34f !important;
}


/*
 * Favorites page had its own old top navigation.
 * Global sidebar supersedes it.
 */
body.xcams-global-nav-page .fav-topnav {
  display: none !important;
}


/* ------------------------------------------------------------
   MOBILE / TABLET
   Turn the sidebar into a normal top navigation panel.
   ------------------------------------------------------------ */

@media (max-width: 900px) {

  body.xcams-global-nav-page {
    padding-left: 0 !important;
  }

  .xcams-global-nav {
    position: relative;

    left: auto;
    top: auto;

    width: 100%;
    height: auto;

    overflow: visible;

    padding:
      10px
      12px;

    border-right: 0;

    border-bottom:
      1px solid rgba(255,255,255,.10);
  }


  .xcams-global-brand {
    margin:
      0
      0
      9px;
  }


  .xcams-global-primary-nav {
    display: grid;

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap: 7px;

    margin-bottom: 8px;
  }


  .xcams-global-nav-heading,
  .xcams-global-category-nav,
  .xcams-global-more {
    display: none;
  }

}