.collection-wrapper {
  /* Sidebar is a drawer below 1025px — do not reserve desktop sidebar columns */
  @media screen and (min-width: 750px) {
    --facets-vertical-col-width: 2;
  }

  @media screen and (min-width: 1025px) {
    --facets-vertical-col-width: 3;
  }

  &:has(.facets-block-wrapper--right) {
    @media screen and (min-width: 990px) {
      --facets-vertical-col-start: 12;
    }
  }
}





.collection-wrapper:has(> .facets--horizontal) .facets__panel[open] {
  @media screen and (min-width: 750px) {
    z-index: var(--facets-open-z-index);
  }
}

.main-collection-grid {
  grid-column: 1 / 14;

  @media screen and (min-width: 750px) {
    grid-column: var(--grid-column--desktop);
  }

  @media screen and (min-width: 750px) and (max-width: 1024px) {
    grid-column: 2 / var(--full-width-column-number);
  }
}

.collection-wrapper {
  @media screen and (min-width: 750px) {
    grid-template-columns:
      1fr repeat(
        var(--centered-column-number),
        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
      )
      1fr;
  }
}







.collection-wrapper:has(.facets--horizontal) {
  .collection-header {
    grid-column: 1 / -1;
  }
}



.collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .facets-vertical-sort,
.collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .collection-header,
.collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid {
  @media screen and (min-width: 1025px) {
    grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number);
  }
}

.collection-wrapper:has(.facets-block-wrapper--right .facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .facets-vertical-sort,
.collection-wrapper:has(.facets-block-wrapper--right .facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .collection-header,
.collection-wrapper:has(.facets-block-wrapper--right .facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid {
  @media screen and (min-width: 1025px) {
    grid-column: 2 / var(--facets-vertical-col-start);
  }
}

.collection-wrapper:has(.facets--vertical, .facets--vertical .collection-header) {
  display: grid;
  grid-template-rows: max-content max-content 1fr;
  .collection-header {
    grid-column: 1 / -1;

    @media screen and (min-width: 750px) {
      grid-column: 2/14;
    }

    @media screen and (min-width: 1025px) {
      grid-row: 1 / 2;
    }
  }

  @media screen and (max-width: 1024px) {
    .facets-block-wrapper--vertical {
      grid-row: 2 / 3;
    }

    &:has(.facets-vertical-sort--vertical-divider) .collection-header {
      border-bottom: var(--style-border-width) solid var(--color-border);
    }
  }


  .facets-block-wrapper--vertical:not(.hidden) ~ .facets-vertical-sort {
    grid-row: 2 / 3;
  }

  .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid {
    grid-row: 3 / 4;
  }
}





:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
  [product-grid-view='default']
  .product-grid__card {
  @media screen and (max-width: 749px) {
    padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
    padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
  }
}

:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
  [product-grid-view='mobile-single']
  .product-grid__card {
  @media screen and (max-width: 749px) {
    padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
    padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
  }
}

/* Make product media go edge-to-edge by using negative margins */
:is(.collection-wrapper--full-width) .card-gallery,
:is(.collection-wrapper--full-width-on-mobile) .card-gallery {
  @media screen and (max-width: 749px) {
    margin-inline-start: calc(-1 * max(var(--padding-xs), var(--padding-inline-start)));
    margin-inline-end: calc(-1 * max(var(--padding-xs), var(--padding-inline-end)));
  }
}