/**
 * What the server-rendered category page adds on top of the shop listing (ticket #264).
 *
 * Deliberately thin: the page reuses the shop's own left column, product grid and product card by
 * keeping their class names (.container-filters-result, .filters, .result), so the charter and the
 * mobile "Filtres" collapse apply through scss/shop.css and scss/<shop>/shop.css unchanged. Only
 * the two blocks the shop listing does not have — the breadcrumb and the neighbouring categories —
 * plus the real-link pagination, live here. The loading skeleton lives in shop.css instead:
 * the search results page loads that sheet and not this one.
 */
.category-page .breadcrumb-category a {
  color: inherit;
  text-decoration: none;
}
.category-page .breadcrumb-category a:hover {
  text-decoration: underline;
}
.category-page .breadcrumb-category .breadcrumb-trail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.category-page .breadcrumb-category .breadcrumb-trail li + li::before {
  content: "\203A";
  margin: 0 .5rem;
}
.category-page .breadcrumb-category .breadcrumb-current {
  margin: 0;
  font-weight: 600;
}
.category-page .category-neighbours {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
}
.category-page .category-neighbours a {
  text-decoration: none;
}
.category-page .category-neighbours a:hover {
  text-decoration: underline;
}
.category-page .pagination {
  color: #A9A9A9;
}
.category-page .pagination > a.page {
  display: inline-block;
  border: 1px solid #A9A9A9;
  border-radius: 20px;
  width: 30px;
  height: 30px;
  padding-top: 2px;
  color: inherit;
  text-decoration: none;
  transition: all 0.4s;
  cursor: pointer;
}
.category-page .pagination > a.page:hover {
  text-decoration: none;
}

/**
 * Below md the trail stays on one row and scrolls sideways instead of wrapping, so the whole
 * hierarchy stays reachable. public/js/breadcrumb-scroll.js puts it on its end — the current page
 * shows first, the ancestors are one swipe away — and maintains data-overflow, which fades the edge
 * where content remains. Touch scrollbars are invisible on iOS and Android anyway, so the fade is
 * the only cue there is.
 *
 * flex-wrap goes back to wrap above md: the desktop layout does not change.
 */
@media (max-width: 767.98px) {
  .category-page .breadcrumb-category .breadcrumb-trail {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .category-page .breadcrumb-category .breadcrumb-trail::-webkit-scrollbar {
    display: none;
  }
  .category-page .breadcrumb-category .breadcrumb-trail li {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .category-page .breadcrumb-category .breadcrumb-trail[data-overflow="left"] {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem);
    mask-image: linear-gradient(to right, transparent 0, #000 1.5rem);
  }
  .category-page .breadcrumb-category .breadcrumb-trail[data-overflow="right"] {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent 100%);
  }
  .category-page .breadcrumb-category .breadcrumb-trail[data-overflow="both"] {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%);
  }
}