.main-collection-container {
  display: block;
  background-color: rgb(var(--color-background));
}

.main-collection {
  padding-block: 48px;
}

.main-collection__no-products-tips {
  text-align: center;
  color: rgba(var(--color-text), 0.6);
  padding-block: 80px;
}

@media (max-width: 959px) {
  .main-collection__no-products-tips {
    padding-block: 48px;
  }
}

.main-collection__products {
  transition: opacity 0.2s ease;
}

.main-collection__products.is-filtering {
  opacity: 0.4;
  pointer-events: none;
}

.main-collection__list {
  margin-block-end: 40px;
  overflow: visible;
}

@media (max-width: 959px) {
  .main-collection__list {
    margin-block-end: 20px;
  }
}

@media (max-width: 959px) {
  .main-collection {
    padding-block: 20px;
  }
}

@media (min-width: 960px) {
  .main-collection {
    display: grid;
  }

  .main-collection .main-collection__products {
    grid-area: list;
  }

  .main-collection .facets-filtering {
    grid-area: filtering;
  }

  .main-collection .facets-sorting-wrapper {
    grid-area: sorting;
  }

  .main-collection.facets-layout-horizontal {
    grid-template:
      "filtering sorting"
      "list list"
      / 1fr auto;
    row-gap: 8px;
  }

  .main-collection.facets-layout-vertical {
    grid-template:
      "sorting sorting"
      "list list"
      / 256px auto;
  }

  .main-collection.facets-layout-vertical.enable-filtering {
    grid-template:
      "filtering sorting" auto
      "filtering list" 1fr
      / 256px auto;
    column-gap: 22px;
  }

  .main-collection.facets-layout-drawer {
    grid-template:
      "filtering sorting"
      "list list"
      / 1fr auto;
    row-gap: 8px;
  }

  .main-collection.facets-layout-custom.enable-filtering {
    grid-template:
      "filtering list"
      / clamp(280px, 20.3%, 400px) 1fr;
    column-gap: 23px;
    align-items: start;
  }

  .main-collection.facets-layout-custom .st-filter {
    grid-area: filtering;
  }
}

/* ---- Circles pagination style ---- */
#st-pagination[data-pagination-style="circles"] .pagination-standard a {
  color: #000;
  text-decoration: none;
}

/* Buttons: auto-width for text + icon, no circle background */
#st-pagination[data-pagination-style="circles"] .pagination-standard__button {
  width: auto;
  height: auto;
  gap: 8px;
  color: #000;
  background-color: transparent;
  border-radius: 0;
}

/* Hide the component's built-in icon — replaced by the blog arrow below */
#st-pagination[data-pagination-style="circles"] .pagination-standard__button .icon,
#st-pagination[data-pagination-style="circles"] .pagination-standard__button svg {
  display: none;
}

/* standard.css rotates the whole --previous button — remove that */
#st-pagination[data-pagination-style="circles"] .pagination-standard__button--previous {
  transform: none;
}

/* Blog arrow SVG via mask so it inherits currentColor */
#st-pagination[data-pagination-style="circles"] .pagination-standard__button--next::after,
#st-pagination[data-pagination-style="circles"] .pagination-standard__button--previous::before {
  content: '';
  display: block;
  width: 21px;
  height: 20px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 21 20' stroke='black' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 10H18M18 10L12.1667 4.16675M18 10L12.1667 15.8334'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 21 20' stroke='black' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 10H18M18 10L12.1667 4.16675M18 10L12.1667 15.8334'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Rotate only the Prev pseudo-element so the arrow points left */
#st-pagination[data-pagination-style="circles"] .pagination-standard__button--previous::before {
  transform: rotate(180deg);
}

/* "Next" text before the arrow → "Next →" */
#st-pagination[data-pagination-style="circles"] .pagination-standard__button--next::before {
  content: 'Next';
}

/* "Prev" text after the (left-pointing) arrow → "← Prev" */
#st-pagination[data-pagination-style="circles"] .pagination-standard__button--previous::after {
  content: 'Prev';
}

/* Page number indicators */
#st-pagination[data-pagination-style="circles"] .pagination-standard__indicator {
  border-radius: 999px;
}

/* Ellipsis dots — no circle shape */
#st-pagination[data-pagination-style="circles"] .pagination-standard__indicator.is-text {
  border-radius: 0;
}

#st-pagination[data-pagination-style="circles"] .pagination-standard__indicator.active {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #fff;
  background-color: #000;
  border-block-end: none;
}

#st-pagination[data-pagination-style="circles"] .pagination-standard__indicator.active a {
  color: #fff;
}

/* Product count info line */
.st-pagination-info {
  margin-top: 10px;
  text-align: center;
  color: rgb(var(--color-light-text));
}

@media (max-width: 959px) {
  #st-pagination[data-pagination-style="circles"] .pagination-standard__indicator.active {
    width: 36px;
    height: 36px;
  }
}