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

/* lighom 2026-11-11: between 768 and 959px the filter app shows its 300px sidebar while the theme still
   renders the full-bleed mobile filter bar, which pushed the page 300px wider than the screen. */
@media (min-width: 768px) and (max-width: 959px) {
  .main-collection-container.filter-plugin-con-container > .main-collection { min-width: 0; }
  /* put the Sort bar in its own full-width first row; it was landing in a 0px grid cell underneath the product cards */
  .main-collection-container.filter-plugin-con-container .facets-mobile-inner {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    margin-inline-start: 0;
  }
}