.main-collection-container {
  display: block;
  background-color: rgb(var(--color-background));
}

/* ===== Uniform card layout — fixed image container + auto card height ===== */
/* Card is locked to a fixed image area + auto-sized info area so all cards in a row */
/* stretch to the same height (grid align-items: stretch) without overflowing. */
/* Image container 260px (uniform, fits products with object-fit:contain). */
/* Card height is overridden to auto so the grid row sizes naturally to content. */
#shopline-section-template--collection__main-collection-products#shopline-section-template--collection__main-collection-products .block-product-card,
.main-collection .block-product-card {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch;
}
.main-collection .main-collection__list {
  grid-auto-rows: 1fr !important;
}
#shopline-section-template--collection__main-collection-products#shopline-section-template--collection__main-collection-products .block-product-image__layer-image-wrapper,
#shopline-section-template--collection__main-collection-products#shopline-section-template--collection__main-collection-products .block-product-image__image-wrapper,
.main-collection .block-product-image__layer-image-wrapper,
.main-collection .block-product-image__image-wrapper {
  height: 260px !important;
  min-height: 260px !important;
  max-height: 260px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
}
.main-collection .block-product-image__image,
.main-collection .block-product-image__image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
/* Force grid items to stretch so cards in same row share height + 32px row-gap */
#shopline-section-template--collection__main-collection-products#shopline-section-template--collection__main-collection-products .main-collection__list,
.main-collection .main-collection__list {
  align-items: stretch !important;
  row-gap: 32px !important;
}
.main-collection .main-collection__list > li {
  height: auto !important;
  display: flex;
  align-items: stretch;
}
.main-collection .main-collection__list > li > * {
  width: 100%;
}
/* Card uses column flex and stretches to fill li; buy-button pushed to bottom */
.main-collection .block-product-card {
  display: flex !important;
  flex-direction: column !important;
}
.main-collection .block-product-card-info {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.main-collection theme-product-form,
.main-collection .block-product-buy-button-wrapper {
  margin-top: auto !important;
}

/* ===== Sale badge on cards (reference parity) ===== */
/* JS inserts <span.mbs-sale-badge>Sale</span> at the top of the info section for */
/* products with strikethrough origin price. To keep titles vertically aligned */
/* across the row (sale + non-sale), every card reserves a fixed top slot. */
.main-collection .block-product-card-info,
#shopline-section-template--collection__main-collection-products#shopline-section-template--collection__main-collection-products .block-product-card-info,
#shopline-section-template--collections_all__main-collection-products#shopline-section-template--collections_all__main-collection-products .block-product-card-info {
  position: relative;
  padding-top: 36px !important;
}
.main-collection .mbs-sale-badge {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  background: rgb(18, 18, 18);
  color: #fff;
  border-radius: 999px;
  padding: 5px 14px;
  font-family: 'Assistant', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  z-index: 4;
  pointer-events: none;
}

/* ===== Collection card "Add to cart" button — outline style (reference parity) ===== */
/* Hide quick-add overlay button entirely — we use the real product-buy-button block. */
#shopline-section-template--collection__main-collection-products#shopline-section-template--collection__main-collection-products .block-product-card__quick-add,
#shopline-section-template--collections_all__main-collection-products#shopline-section-template--collections_all__main-collection-products .block-product-card__quick-add,
.main-collection .block-product-card__quick-add {
  display: none !important;
}

/* Style the real .block-product-buy-button as an outline CTA: black border + text, */
/* white fill, full width. Matches the same look as homepage/PDP buttons. */
.main-collection .block-product-buy-button,
.main-collection .block-product-buy-button-wrapper,
.main-collection theme-product-form .block-product-buy-button-wrapper > form {
  width: 100% !important;
}
.main-collection .block-product-buy-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 46px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  background: transparent !important;
  color: rgb(18, 18, 18) !important;
  border: 1px solid rgb(18, 18, 18) !important;
  font-family: 'Assistant', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.main-collection .block-product-buy-button-text {
  color: rgb(18, 18, 18) !important;
  font: inherit !important;
}
.main-collection .block-product-buy-button:hover {
  background: rgba(18, 18, 18, 0.06) !important;
}

.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;
  }
}

/* ===== PHASE 2: Collection page font parity (reference match) ===== */
/* Double-ID specificity to beat per-section inline rules */

/* Sort by: select — reference uses letter-spacing 0.4px (not 0.6px) */
#shopline-section-template--collection__main-collection-products#shopline-section-template--collection__main-collection-products .mbs-sort-select {
  letter-spacing: 0.4px !important;
}

/* "In stock (N products)" facets count — reference uses letter-spacing 0.6px (not 0.4px) */
#shopline-section-template--collection__main-collection-products#shopline-section-template--collection__main-collection-products .facets-count {
  letter-spacing: 0.6px !important;
}

/* Hide Add-to-cart button on collection cards (reference parity — clicking card takes user to PDP, no inline ATC). Double-ID specificity to beat per-section inline rules. */
#shopline-section-template--collection__main-collection-products#shopline-section-template--collection__main-collection-products .block-product-buy-button-wrapper,
#shopline-section-template--collection__main-collection-products#shopline-section-template--collection__main-collection-products theme-product-form,
#shopline-section-template--collections_all__main-collection-products#shopline-section-template--collections_all__main-collection-products .block-product-buy-button-wrapper,
#shopline-section-template--collections_all__main-collection-products#shopline-section-template--collections_all__main-collection-products theme-product-form,
.main-collection .block-product-buy-button-wrapper,
.main-collection theme-product-form {
  display: none !important;
}

