.main-collection-container {
  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;
  display: grid;
  grid-template-columns: repeat(var(--desktop-columns), 1fr);
  gap:20px;
}

@media (max-width: 959px) {
  .main-collection__list {
    margin-block-end: 20px;
    grid-template-columns: repeat(var(--mobile-columns), 1fr);
  }
}

@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 {
    grid-area: sorting;
  }

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

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

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

  /* Match the filter apps before either placeholder mounts. */
  .main-collection.facets-layout-vertical.enable-filtering {
    grid-template:
      "filtering count sorting" 40px
      "filtering list list" /
      300px auto auto;
  }

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

/* Keep Product Filter in charge when Smart Search also mounts a filter.
   Its empty mount node otherwise changes the named grid areas and breaks
   Product Filter's adjacent-sibling selector. */
body .main-collection-container.filter-plugin-con-container.search-filter-con-container {
  padding-inline: 0;
  grid-template: "filter-plugin content" / 300px minmax(0, 1fr);
}

body .main-collection-container.filter-plugin-con-container.search-filter-con-container > .plugin-search-filter-container__main {
  display: none;
}

body .main-collection-container.filter-plugin-con-container.search-filter-con-container > .main-collection.page-padding {
  grid-area: content;
  min-width: 0;
  /* Smart Search injects padding: 0 !important after the theme stylesheet. */
  padding: 40px var(--page-padding) !important;
}

/* The app creates the outer sidebar track before its deferred effect adds
   .left-position. Remove the native inner track at the same mount stage. */
@media (min-width: 750px) {
  body .main-collection-container.filter-plugin-con-container > .main-collection.facets-layout-vertical {
    grid-template:
      "filtering count sorting" 40px
      "filtering list list" /
      0 minmax(0, 1fr) auto;
  }
}

/* Both apps can insert a mobile trigger, even when the search mount is hidden. */
.main-collection-container .facets-mobile__modals:has(> .filter-m-trigger) > .plugin-search-filter-m-trigger {
  display: none;
}

@media (max-width: 749px) {
  body .main-collection-container.filter-plugin-con-container,
  body .main-collection-container.filter-plugin-con-container.search-filter-con-container {
    display: block;
    padding-inline: 0;
  }

  body .main-collection-container.filter-plugin-con-container > .filter-plugin-con.left-position {
    display: none;
  }

  body .main-collection-container.filter-plugin-con-container > .main-collection.page-padding,
  body .main-collection-container.filter-plugin-con-container.search-filter-con-container > .main-collection.page-padding {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-inline: 0;
    padding: 20px var(--page-padding) !important;
  }
}

/* Product Filter switches to its drawer at 750px, while this theme switches
   at 960px. When both apps are present, keep the existing sidebar usable in
   that interval and retain the theme's two-column product cards. */
@media (min-width: 750px) and (max-width: 959px) {
  body .main-collection-container.filter-plugin-con-container:has(.plugin-search-filter-m-trigger) > .main-collection {
    gap: 40px;
    padding-block: 40px;
  }

  .main-collection-container.filter-plugin-con-container:has(.plugin-search-filter-m-trigger) theme-facets-form[data-type="desktop"] {
    display: contents !important;
  }

  .main-collection-container.filter-plugin-con-container:has(.plugin-search-filter-m-trigger) theme-facets-form[data-type="mobile"] {
    display: none !important;
  }

  .main-collection-container.filter-plugin-con-container:has(.plugin-search-filter-m-trigger) .facets-desktop .facets-count {
    display: block !important;
    grid-area: count;
  }

  .main-collection-container.filter-plugin-con-container:has(.plugin-search-filter-m-trigger) .facets-sorting {
    grid-area: sorting;
  }

  .main-collection-container.filter-plugin-con-container:has(.plugin-search-filter-m-trigger) .main-collection__products {
    grid-area: list;
  }
}

/* Keep the loading skeleton from removing the collection's vertical padding. */
@media (min-width: 960px) {
  body .main-collection-container.search-filter-con-container > .main-collection.page-padding.facets-layout-vertical {
    padding-block: 40px !important;
  }
}