.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 .sorting-and-toggle-menu {
    grid-area: sorting;
    padding: 18px 0px;
    border-top: 1px solid rgb(var(--color-entry-line));
    border-bottom: 1px solid rgb(var(--color-entry-line));
  }

  .sorting-and-toggle-menu .facets-sorting {
    display: flex;
    align-items: center;
  }

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

  .main-collection.facets-layout-vertical {
    grid-template:
      "sorting" auto
      "list" 1fr
      / minmax(0, 1fr);
  }

  .main-collection.facets-layout-vertical.enable-filtering {
    grid-template:
      "sorting sorting" auto
      "filtering list" 1fr
      / 280px minmax(0, 1fr);
    column-gap: 48px;
    padding-inline-end: var(--page-padding);
  }


  .main-collection.facets-layout-toggle_vertical {
    grid-template:
      "sorting" auto
      "list" 1fr
      / minmax(0, 1fr);
  }

  .main-collection.facets-layout-toggle_vertical.enable-filtering {
    grid-template:
      "sorting sorting" auto
      "filtering list" 1fr
      / 280px minmax(0, 1fr);
    column-gap: 48px;
    padding-inline-end: var(--page-padding);
  }

  .main-collection.facets-layout-toggle_vertical.enable-filtering.sidebar-closed {
    grid-template:
      "sorting" auto
      "list" 1fr
      / minmax(0, 1fr);
    gap: 0;
  }

  .main-collection.facets-layout-toggle_vertical.enable-filtering.sidebar-closed .facets-filtering__filters {
    display: none;
  }

  .main-collection.facets-layout-vertical.enable-filtering .main-collection__list,
  .main-collection.facets-layout-toggle_vertical.enable-filtering:not(.sidebar-closed) .main-collection__list {
    --desktop-columns: max(1, calc(var(--desktop-columns-setting, 4) - 1)) !important;
  }

  .main-collection.facets-layout-drawer {
    grid-template:
      "filtering sorting"
      "list list"
      / 1fr auto;
    row-gap: 8px;
  }
}
/* USWING: persistent collection filters, below the theme's sticky header. */
.main-collection .sorting-and-toggle-menu,
.main-collection .facets-mobile-inner {
  position: sticky;
  top: max(0px, var(--theme-sticky-offset, 0px));
  z-index: 4;
  background-color: rgb(var(--color-background));
  /* Offset follows the rendered header edge every animation frame. */
  transition: none;
}
@media (min-width: 960px) {
  .main-collection:is(.facets-layout-vertical, .facets-layout-toggle_vertical) .facets-desktop > .facets-filtering {
    position: sticky;
    align-self: start;
    top: calc(max(0px, var(--theme-sticky-offset, 0px)) + var(--uswing-filter-toolbar-height, 90px) + 12px);
    max-height: calc(100dvh - max(0px, var(--theme-sticky-offset, 0px)) - var(--uswing-filter-toolbar-height, 90px) - 24px);
    overflow-y: auto;
    scrollbar-width: none;
    z-index: 2;
    /* Offset follows the rendered header edge every animation frame. */
  transition: none;
  }
  /* Hide the sidebar scrollbar while keeping all filters scrollable. */
  .main-collection:is(.facets-layout-vertical, .facets-layout-toggle_vertical) .facets-desktop > .facets-filtering::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  .main-collection .sorting-and-toggle-menu .facets-sorting-wrapper { position: static; }
}
@media (max-width: 959px) {
  .main-collection .facets-mobile-inner {
    padding-block: 8px;
    /* The inner filter controls already supply their own divider. */
    border-bottom: 0;
  }
}

/* USWING: full collection titles with prices aligned within each grid row. */
.main-collection__list {
  align-items: stretch;
  grid-auto-rows: auto;
}
.main-collection__list .product-card-shadow-space {
  height: 100%;
  min-width: 0;
}
.main-collection__list theme-product-card.block-product-card {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  min-width: 0;
}
.main-collection__list .block-product-card-info:not(.block-product-card-info--layer) {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-width: 0;
}
.main-collection__list .block-product-title > span {
  display: block;
  -webkit-line-clamp: unset;
  block-size: auto;
  min-block-size: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: none;
}
.main-collection__list .block-product-card-info:not(.block-product-card-info--layer) > .block-product-price {
  margin-block-start: auto;
}

/* USWING: contain intrinsic card widths and wrap collection controls on laptops. */
.main-collection .main-collection__products,
.main-collection .main-collection__list,
.main-collection .main-collection__list > li {
  min-width: 0;
}
@media (min-width: 960px) {
  .main-collection .sorting-and-toggle-menu {
    min-width: 0;
    flex-wrap: wrap;
  }
  .main-collection .sorting-and-toggle-menu__left {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 600px;
  }
  .main-collection .sorting-and-toggle-menu .facets-filter-menu {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .main-collection .sorting-and-toggle-menu .facets-sorting-wrapper {
    flex: 0 0 auto;
    margin-inline-start: auto;
  }
}

/* Give cards enough room while the filter sidebar is open on compact desktops. */
@media (min-width: 960px) and (max-width: 1199px) {
  .main-collection.facets-layout-vertical.enable-filtering,
  .main-collection.facets-layout-toggle_vertical.enable-filtering:not(.sidebar-closed) {
    column-gap: 32px;
  }
  .main-collection.facets-layout-vertical.enable-filtering .main-collection__list,
  .main-collection.facets-layout-toggle_vertical.enable-filtering:not(.sidebar-closed) .main-collection__list {
    grid-template-columns: repeat(min(2, var(--desktop-columns)), minmax(0, 1fr));
  }
}

/* Keep the complete name readable and both prices together without repeating currency. */
.main-collection__list .block-product-title {
  padding-inline-end: 0;
  line-height: 1.4;
}
.main-collection__list .block-product-card-info:not(.block-product-card-info--layer) > .block-product-price {
  padding-block-start: 10px;
}
.main-collection__list .product-price {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 8px;
}
.main-collection__list .product-price__item {
  margin: 0;
  white-space: nowrap;
  line-height: 1.3;
}
.main-collection__list .product-price__origin {
  color: #737373;
  font-weight: 400;
}
.main-collection__list .product-price__origin-full {
  display: none;
}
.main-collection__list .product-price__origin-compact[hidden] {
  display: inline;
}
@media (max-width: 959px) {
  .main-collection__list .block-product-card-info:not(.block-product-card-info--layer) {
    padding-inline: 10px;
  }
  .main-collection__list .block-product-title {
    font-size: 14px;
  }
  .main-collection__list .product-price {
    gap: 6px;
  }
  .main-collection__list .product-price__sale {
    font-size: 14px;
  }
  .main-collection__list .product-price__origin {
    font-size: 12px;
  }
}
@media (max-width: 389px) {
  .main-collection__list .block-product-card-info:not(.block-product-card-info--layer) {
    padding-inline: 8px;
  }
  .main-collection__list .product-price {
    gap: 4px;
  }
}
@media (min-width: 360px) and (max-width: 374px) {
  .main-collection__list .product-price__sale {
    font-size: 13px;
  }
}
/* A single column on the narrowest phones keeps full names and prices readable. */
@media (max-width: 359px) {
  .main-collection__list {
    grid-template-columns: minmax(0, 1fr);
  }
  .main-collection__list .block-product-card-info:not(.block-product-card-info--layer) {
    padding-inline: 12px;
  }
}

/* USWING: only the current URL is selected; touch hover is not selection. */
.main-collection .facets-filter-menu__item {
  flex: 0 0 auto;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.main-collection .facets-filter-menu__item:not(.active) {
  background-color: #fff;
  border-color: #ddd;
  color: #111 !important;
}
.main-collection .facets-filter-menu__item.active {
  background-color: #000;
  border-color: #000;
  color: #fff !important;
}
.main-collection .facets-filter-menu__item:focus-visible {
  outline: 2px solid #555;
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .main-collection .facets-filter-menu__item:not(.active):hover {
    background-color: #f2f2f2;
    border-color: #aaa;
  }
}
/* Fixed filter/sort controls flank a native horizontal collection rail. */
@media (max-width: 959px) {
  .main-collection .facets-mobile-inner {
    padding-block: 0;
  }
  .main-collection .facets-mobile__modals {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 10px 0;
    margin-block-end: 8px;
    min-width: 0;
  }
  .main-collection .facets-mobile__modals .facets-filter-menu {
    order: 0;
    flex: 1 1 0%;
    min-width: 0;
    width: 0;
    max-width: 100%;
    gap: 8px;
    padding: 3px 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .main-collection .facets-mobile__modals .facets-filter-menu__item {
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 20px;
  }
  .main-collection .facets-mobile__modals theme-modal,
  .main-collection .facets-mobile__modals theme-modal details {
    flex: 0 0 auto;
  }
  .main-collection .facets-mobile__modals .facets-filtering summary,
  .main-collection .facets-mobile__modals .facets-sorting__details summary {
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 10px;
    gap: 6px;
    border: 1px solid #ddd;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }
  .main-collection .facets-mobile__modals .facets-filtering summary svg {
    width: 18px;
    height: 18px;
  }
}
