.sn-sticky-nav {
  --sn-sticky-top: 0px;
  --sn-bg: rgba(255, 255, 255, 0.96);
  --sn-border: rgba(15, 23, 42, 0.12);
  --sn-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  --sn-button-bg: #ffffff;
  --sn-button-border: #cbd5e1;
  --sn-button-color: #111827;
  --sn-button-active-bg: #111827;
  --sn-button-active-color: #ffffff;

  position: sticky;
  top: var(--sn-sticky-top);
  z-index: 80;
  width: 100%;
  background: var(--sn-bg);
  border-top: 1px solid var(--sn-border);
  border-bottom: 1px solid var(--sn-border);
  box-shadow: var(--sn-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}



.sn-sticky-nav-placeholder {
  display: none;
  width: 100%;
}

.sn-sticky-nav.sn-is-fixed {
  position: fixed;
  top: var(--sn-sticky-top);
  left: var(--sn-fixed-left, 0px);
  width: var(--sn-fixed-width, 100%);
  z-index: 80;
}

.sn-sticky-nav * {
  box-sizing: border-box;
}

.sn-sticky-nav-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0.65rem 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.sn-sticky-nav-inner.sn-mobile-wrap {
  flex-wrap: wrap;
  overflow-x: visible;
}

.sn-sticky-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 2.35rem;
  padding: 0.85rem 1.3rem;
  border: 1px solid var(--sn-button-border);
  border-radius: 999px;
  background: var(--sn-button-bg);
  color: var(--sn-button-color);
  font-size: 0.92rem;
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.sn-sticky-nav-button:hover,
.sn-sticky-nav-button:focus {
  transform: translateY(-1px);
  text-decoration: none;
}

.sn-sticky-nav-button.sn-is-active,
.sn-sticky-nav-button.is-active,
.sn-sticky-nav-button.active {
  background: var(--sn-button-active-bg);
  color: var(--sn-button-active-color);
  border-color: var(--sn-button-active-bg);
	
  background: var(--bs-primary);
  color: var(--sn-button-active-color);
  border-color: var(--bs-primary);
}

@media (max-width: 640px) {
  .sn-sticky-nav-inner {
    max-width: none;
    padding: 0.55rem 0.75rem;
  }

  .sn-sticky-nav-button {
    min-height: 2.25rem;
    padding: 0.5rem 0.8rem;
    font-size: 0.88rem;
  }
}

.sticky-button-size-sm .sn-sticky-nav-inner .sn-sticky-nav-button {
  padding: 0.65rem 1.1rem !important;
  font-size: 0.88rem !important;
  font-size: 0.92rem !important;
  font-weight:500 !important;
}

.sticky-button-size-sm .sn-sticky-nav-inner {
  gap: 1rem !important; 
}