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

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

.main-collection__no-products-tips {
  color: rgb(var(--color-text));
}

.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: 0 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;
  }
}

/* lighom 2026-10-19: the EasyRank filter app hides the native facets, centres the container at 1360px as a
   300px + 1fr grid (sidebar | page-width) and rewrites the inner grid to "filtering count sorting / filtering list list"
   with a 0px filtering column — all after its script runs (CLS 0.21 on desktop). Reserve that exact layout up front
   so nothing moves when the app arrives. If the app is ever removed, drop this block. */
@media (min-width: 960px) {
  .main-collection-container { display: grid; grid-template-columns: 300px minmax(0, 1fr); max-width: 1360px; margin-inline: auto; }
  .main-collection-container > .main-collection { grid-column: 2; }
  .main-collection.facets-layout-vertical.enable-filtering {
    grid-template:
      "filtering count sorting" auto
      "filtering list list" 1fr
      / 0px 1fr 1fr;
    column-gap: 22px;
  }
  .main-collection .facets-filtering { display: none; }
}