.collection-navigation .collections-display-container { min-width: 0; }
.collection-navigation .collection-display-image { width: 120px; height: 100px; }
.collection-navigation .collections-display-list {
  list-style: none;
  padding: 4px;
  align-items: center;
}
.collection-navigation .collection-display[aria-current="page"] {
  border-color: #1b1c1c;
  background: #f3ede4;
}
.collection-navigation .collection-display:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.collection-navigation--text .collection-display,
.collection-navigation .collection-display--all {
  border-radius: 999px;
  min-height: 44px;
  justify-content: center;
  padding: 0 16px;
  border-color: transparent;
}
.collection-navigation--text .collection-title,
.collection-navigation .collection-display--all .collection-title {
  font-weight: 400;
  white-space: nowrap;
}
.collection-navigation--text .collection-display:hover { background: #f8f4f1; }
.collection-navigation--side-by-side .collection-main {
  padding-left: 0;
  border-left: 0;
}
.collection-navigation--side-by-side .collection-navigation-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  margin-bottom: 48px;
  border-bottom: 1px solid #e8e0d7;
}
.collection-navigation--side-by-side .collections-display-list {
  margin: 0;
  gap: 12px;
}
.collection-navigation--side-by-side .collection-toolbar { margin: 0; }
.collection-navigation--side-by-side .sort-button {
  background: transparent;
  border: 0;
  min-height: 44px;
  padding: 8px 0;
  font-weight: 400;
}
@media (min-width: 769px) {
  .collection-navigation--side-by-side .collection-sidebar.always-visible {
    width: auto;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
  }
  .collection-navigation--side-by-side .collection-sidebar .filter-header {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .collection-navigation--side-by-side .collection-sidebar .filter-content {
    gap: 16px;
    overflow: visible;
  }
  .collection-navigation--side-by-side .collection-sidebar .filter-group {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    border: 0;
    padding: 0;
  }
  .collection-navigation--side-by-side .filter-group-toggle {
    min-height: 44px;
    gap: 12px;
    font-size: 14px;
    font-weight: 400;
  }
  .collection-navigation--side-by-side .filter-group-content.open {
    position: absolute;
    z-index: 10;
    top: 100%;
    right: 0;
    width: 280px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 20px;
    background: #fff;
    border: 1px solid #e8e0d7;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgb(27 28 28 / 8%);
  }
  .collection-navigation--side-by-side .collection-toolbar { flex-wrap: wrap; }
  .collection-navigation--side-by-side .toolbar-left:empty { display: none; }
}
@media (max-width: 1100px) {
  .collection-navigation--side-by-side .collection-navigation-bar {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .collection-navigation--side-by-side .collections-display-container { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .collection-navigation--side-by-side .collection-sidebar .filter-close-btn { display: flex !important; }
  .collection-navigation--side-by-side .filter-toggle-btn { min-width: 0; }
  .collection-navigation--side-by-side .collection-toolbar { flex-wrap: wrap; }
  .collection-navigation--side-by-side .collection-navigation-bar {
    display: block;
    margin-bottom: 24px;
  }
  .collection-navigation--side-by-side .collection-toolbar { margin-top: 12px; }
}

/* Style: Soft (NAVE demo, Figma 385:2000 desktop / 389:2020 mobile) */
.pcl--soft.collection-navigation--side-by-side .collection-navigation-bar {
  position: relative;
  gap: 20px;
  padding: 24px 0;
  margin-bottom: 60px;
  border-bottom: 0;
}
/* Full-width divider: border-image paints past the box edges without adding scroll width. */
.pcl--soft.collection-navigation--side-by-side .collection-navigation-bar::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  border-image: linear-gradient(#e9e3d8 0 0) fill 0 / / 0 100vw;
}
/* Tabs wrap instead of scrolling, so a long collection list never hides behind the filters. */
.pcl--soft .collections-display-list { flex-wrap: wrap; overflow: visible; padding: 0; }
.pcl--soft .collection-display,
.pcl--soft .collection-display--all {
  min-height: 35px;
  padding: 0 16px;
  border-radius: 20px;
  border-color: transparent;
}
.pcl--soft .collection-title { padding: 0; font-size: 14px; font-weight: 400; color: #1c1b19; }
.pcl--soft .collection-display[aria-current="page"] .collection-title { font-weight: 600; }
.pcl--soft .filter-group-toggle,
.pcl--soft .sort-button { gap: 8px; font-size: 14px; color: #1c1b19; }
.pcl--soft .filter-toggle-label,
.pcl--soft .sort-label { color: #5c5652; }
.pcl--soft .filter-toggle-value,
.pcl--soft .sort-value { font-weight: 600; }
.pcl--soft .filter-chevron,
.pcl--soft .sort-chevron { width: 14px; height: 14px; }

/* Controls share the tab height and sit on the first row when the tabs wrap. */
@media (min-width: 769px) {
  .pcl--soft.collection-navigation--side-by-side .collection-navigation-bar { align-items: start; }
  .pcl--soft.collection-navigation--side-by-side .filter-group-toggle,
  .pcl--soft.collection-navigation--side-by-side .sort-button { min-height: 35px; padding-block: 0; }
}

@media (max-width: 768px) {
  .pcl--soft.collection-navigation--side-by-side .collection-navigation-bar { padding: 20px 0; margin-bottom: 24px; }
  .pcl--soft.collection-navigation--side-by-side .collection-navigation-bar::after {
    border-image: linear-gradient(#f3ede4 0 0) fill 0 / / 0 100vw;
  }
  .pcl--soft .collections-display-list { gap: 8px; }
  .pcl--soft .collection-display,
  .pcl--soft .collection-display--all { min-height: 28px; padding: 0 14px; border-color: #f3ede4; }
  .pcl--soft .collection-title { font-size: 12px; }
  .pcl--soft.collection-navigation--side-by-side .collection-toolbar { margin-top: 16px; }
  .pcl--soft .filter-toggle-btn,
  .pcl--soft .filter-toggle-btn:hover,
  .pcl--soft .filter-toggle-btn.active,
  .pcl--soft .sort-button {
    min-width: 0;
    min-height: 44px;
    padding: 0;
    gap: 6px;
    border: 0;
    background: transparent;
    color: #1c1b19;
    font-size: 13px;
  }
  .pcl--soft .filter-toggle-btn { font-weight: 600; }
  .pcl--soft .filter-icon { display: none; }
}