/**
 * NoLimits — premium horizontal navbar polish
 * Seamless, borderless, integrated with page background (structure unchanged).
 */

@media (min-width: 961px) {
  body.is-navigation-horizontal {
    --nav-bar-height: 64px;
    --nl-nav-link-gap: 34px;
    --nl-nav-util-gap: 12px;
    --nl-nav-logo-gap: 44px;
    --nav-util-height: 38px;
    --nav-util-pad-x: 11px;
    --nl-nav-link-color: rgba(255, 255, 255, 0.52);
    --nl-nav-link-color-hover: rgba(255, 255, 255, 0.74);
    --nl-nav-link-color-active: rgba(255, 255, 255, 0.92);
    --nav-util-text: rgba(255, 255, 255, 0.5);
    --nav-util-text-hover: rgba(255, 255, 255, 0.78);
    --nav-util-surface-bg: rgba(255, 255, 255, 0.04);
    --nav-util-border: rgba(255, 255, 255, 0.07);
    --nav-util-surface-hover-bg: rgba(255, 255, 255, 0.07);
    --nl-nav-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --nl-nav-motion: color 0.22s var(--nl-nav-ease), background 0.22s var(--nl-nav-ease),
      border-color 0.22s var(--nl-nav-ease), opacity 0.22s var(--nl-nav-ease);
  }

  /* Top breathing room — navbar floats below viewport edge */
  body.is-navigation-horizontal .site-header {
    padding-top: clamp(20px, 2.4vw, 32px);
    padding-left: clamp(20px, 3vw, 52px);
    padding-right: clamp(20px, 3vw, 52px);
    background: transparent;
    border: none;
  }

  /* Seamless nav rail — no box, no stroke; background shows through */
  body.is-navigation-horizontal .site-header > .site-navigation.navigation-horizontal {
    width: 100%;
    max-width: min(1520px, 100%);
    margin-left: auto;
    margin-right: auto;
    height: var(--nav-bar-height);
    min-height: var(--nav-bar-height);
    padding: 0 clamp(22px, 2.6vw, 44px);
    box-sizing: border-box;
    gap: 0;
    align-items: center;
    justify-content: flex-start;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* Logo — primary anchor, separated from link block */
  body.is-navigation-horizontal .nav-logo-container {
    flex-shrink: 0;
    margin-right: clamp(32px, 4vw, 56px) !important;
    padding-right: 2px;
  }

  body.is-navigation-horizontal .nav-logo-link {
    display: inline-flex;
    align-items: center;
    padding: 4px 0;
  }

  body.is-navigation-horizontal .nav-logo {
    height: clamp(44px, 4.25vw, 52px) !important;
    max-height: none !important;
    width: auto !important;
    display: block;
  }

  /* Nav links — secondary hierarchy */
  body.is-navigation-horizontal .site-navigation.navigation-horizontal .navigation-list.menu {
    flex: 1 1 auto;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    font-size: var(--nl-nav-font-size, 14px) !important;
    font-weight: 500 !important;
    font-synthesis: none !important;
    flex-wrap: nowrap !important;
    min-width: 0;
    height: 100%;
  }

  body.is-navigation-horizontal .site-navigation.navigation-horizontal .navigation-list > li:not(.nav-list-spacer):not(.nav-rail-divider):not(.currency-nav-item):not(.user-nav-item):not(.login-nav-item):not(.basket-nav-item) + li:not(.nav-list-spacer):not(.nav-rail-divider):not(.currency-nav-item):not(.user-nav-item):not(.login-nav-item):not(.basket-nav-item) {
    margin-left: var(--nl-nav-link-gap) !important;
  }

  body.is-navigation-horizontal .site-navigation.navigation-horizontal .navigation-list > li > a:not(.user-dropdown-item) {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
    min-height: 38px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
    border-radius: 8px !important;
    transition: var(--nl-nav-motion) !important;
  }

  body.is-navigation-horizontal .site-navigation.navigation-horizontal .navigation-list > li > a:not(.user-dropdown-item):hover {
    color: var(--nl-nav-link-color-hover) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: transparent !important;
  }

  body.is-navigation-horizontal .site-navigation.navigation-horizontal .navigation-list > li > a:not(.user-dropdown-item).link-active {
    color: var(--nl-nav-link-color-active) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border-color: transparent !important;
  }

  /* Spacer — no visible rail divider */
  body.is-navigation-horizontal .site-navigation.navigation-horizontal .nav-list-spacer {
    flex: 1 1 auto;
    min-width: clamp(32px, 4vw, 72px) !important;
  }

  body.is-navigation-horizontal .site-navigation.navigation-horizontal .nav-rail-divider {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* Utilities — keep pill surfaces (only the outer nav bar is borderless) */
  body.is-navigation-horizontal .site-navigation.navigation-horizontal .currency-nav-item + .user-nav-item,
  body.is-navigation-horizontal .site-navigation.navigation-horizontal .currency-nav-item + .login-nav-item,
  body.is-navigation-horizontal .site-navigation.navigation-horizontal .currency-nav-item + .basket-nav-item,
  body.is-navigation-horizontal .site-navigation.navigation-horizontal .user-nav-item + .basket-nav-item,
  body.is-navigation-horizontal .site-navigation.navigation-horizontal .login-nav-item + .basket-nav-item {
    margin-left: var(--nl-nav-util-gap) !important;
  }

  body.is-navigation-horizontal .currency-selector__toggle,
  body.is-navigation-horizontal .user-profile-nav,
  body.is-navigation-horizontal .login-btn-nav,
  body.is-navigation-horizontal .site-navigation .nav-basket-btn,
  body.is-navigation-horizontal .site-navigation .nav-basket-btn.btn-primary {
    height: var(--nav-util-height) !important;
    min-height: var(--nav-util-height) !important;
    border-radius: var(--nav-util-radius, 9px) !important;
    background: var(--nav-util-surface-bg) !important;
    background-color: var(--nav-util-surface-bg) !important;
    border: 1px solid var(--nav-util-border) !important;
    box-shadow: none !important;
    color: var(--nav-util-text) !important;
    --btn-color-bg: var(--nav-util-surface-bg) !important;
    --btn-color-text: var(--nav-util-text) !important;
    filter: none !important;
  }

  body.is-navigation-horizontal .currency-selector__toggle:hover,
  body.is-navigation-horizontal .currency-selector.open .currency-selector__toggle,
  body.is-navigation-horizontal .user-profile-nav:hover,
  body.is-navigation-horizontal .user-profile-nav.open,
  body.is-navigation-horizontal .login-btn-nav:hover,
  body.is-navigation-horizontal .site-navigation .nav-basket-btn:hover,
  body.is-navigation-horizontal .site-navigation .nav-basket-btn.btn-primary:hover,
  body.is-navigation-horizontal .site-navigation .nav-basket-btn.btn-primary:focus {
    background: var(--nav-util-surface-hover-bg) !important;
    background-color: var(--nav-util-surface-hover-bg) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    color: var(--nav-util-text-hover) !important;
    --btn-color-bg-hover: var(--nav-util-surface-hover-bg) !important;
    --btn-color-text-hover: var(--nav-util-text-hover) !important;
  }

  body.is-navigation-horizontal .currency-selector__toggle,
  body.is-navigation-horizontal .user-profile-nav {
    padding-left: var(--nav-util-pad-x) !important;
    padding-right: var(--nav-util-pad-x) !important;
  }

  body.is-navigation-horizontal .user-profile-nav {
    gap: 7px !important;
  }

  /* Beat shared.css heavy nav link styles */
  body.is-navigation-horizontal .navigation-horizontal a:not(.user-dropdown-item):hover,
  body.is-navigation-horizontal .navigation-horizontal a:not(.user-dropdown-item).link-active {
    color: inherit;
  }
}

@media (min-width: 1280px) {
  body.is-navigation-horizontal {
    --nl-nav-link-gap: 36px;
    --nl-nav-util-gap: 11px;
  }

  body.is-navigation-horizontal .site-header {
    padding-left: clamp(28px, 4vw, 64px);
    padding-right: clamp(28px, 4vw, 64px);
  }

  body.is-navigation-horizontal .site-header > .site-navigation.navigation-horizontal {
    max-width: min(1560px, 100%);
    padding-inline: clamp(28px, 3vw, 52px);
  }
}

@media (min-width: 1600px) {
  body.is-navigation-horizontal {
    --nl-nav-link-gap: 38px;
  }

  body.is-navigation-horizontal .site-header > .site-navigation.navigation-horizontal {
    max-width: min(1620px, 100%);
  }
}

@media (min-width: 961px) and (max-width: 1100px) {
  body.is-navigation-horizontal {
    --nl-nav-link-gap: 22px;
    --nl-nav-logo-gap: 28px;
  }

  body.is-navigation-horizontal .nav-logo-container {
    margin-right: 28px !important;
  }

  body.is-navigation-horizontal .nav-logo {
    height: 40px !important;
  }
}