/* Product category sub-nav (Products page)
   Sticky, scroll-spied, mobile-friendly tab bar.
   Enqueue this file from functions.php — see product-subnav-enqueue.php for the snippet. */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Offsets anchor targets so headings aren't hidden under the pinned nav */
[id^="foundation-section"] {
  scroll-margin-top: 90px;
}

.product-subnav {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  padding: 12px 0;
  border-bottom: 1px solid #e3e1f0;
  gap: 8px;

  /* Right-edge fade hints that the row scrolls (mobile only) */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
}

.product-subnav.at-end {
  -webkit-mask-image: none;
  mask-image: none;
}

.product-subnav.is-pinned {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: auto !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
  z-index: 1000;
  padding-left: 16px;
  padding-right: 16px;
}

/* Push the pinned nav below the WP admin bar for logged-in users */
body.admin-bar .product-subnav.is-pinned {
  top: 32px;
}

.product-subnav .nav-link {
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 999px !important;
  padding: 10px 20px;
  font-weight: 600;
  color: #3d3877 !important;
  background: #f0eefa !important;
  transition: background .15s ease, color .15s ease;
}

.product-subnav .nav-link:hover {
  background: #ddd8f5 !important;
  color: #3d3877 !important;
  text-decoration: none;
}

.product-subnav .nav-link.active {
  background: #3d3877 !important;
  color: #fff !important;
}

@media (min-width: 576px) {
  .product-subnav {
    overflow-x: visible;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  .product-subnav .nav-link {
    white-space: normal;
  }
}