.main-collection-container {
  position: relative;
  isolation: isolate;
  display: block;
  background: #fff;
}

/* Keep the centered 1360px content frame while letting the collection surface
   continue to both viewport edges, matching the white / #fafafa card contrast. */
.main-collection-container::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  z-index: -1;
  width: 100vw;
  content: "";
  background: #fff;
  transform: translateX(-50%);
}

/* The custom element scope is intentional: SHOPLINE can expose collection pages
   under different page-type values, so the layout must not depend on body data. */
theme-main-collection-products .main-collection.page-width {
  width: min(1360px, calc(100vw - 64px)) !important;
  max-width: none !important;
  padding: 32px 0 64px !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

theme-main-collection-products .main-collection__no-products-tips {
  color: rgb(var(--color-text));
}

theme-main-collection-products .facets-count {
  display: none !important;
}

theme-main-collection-products .main-collection__products {
  min-width: 0;
}

theme-main-collection-products .main-collection__list {
  --column-gap: 18px;
  --row-gap: 28px;

  grid-auto-flow: row !important;
  align-items: stretch;
  margin: 0 0 48px !important;
  overflow: visible;
}

theme-main-collection-products .main-collection__list > li {
  min-width: 0;
  list-style: none;
}

@media (min-width: 1200px) {
  theme-main-collection-products .main-collection__list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 960px) and (max-width: 1199px) {
  theme-main-collection-products .main-collection.page-width {
    width: min(1100px, calc(100vw - 48px)) !important;
  }

  theme-main-collection-products .main-collection__list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Desktop toolbar: filters, item count and sorting share one row above products. */
@media (min-width: 960px) {
  theme-main-collection-products .main-collection {
    display: block !important;
  }

  theme-main-collection-products .main-collection__toolbar {
    position: relative;
    z-index: 20;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 16px 24px !important;
    align-items: center;
    width: 100%;
    min-height: 40px;
    padding-block-end: 12px;
    margin: 0 0 24px !important;
    border-block-end: 1px solid #e4e7ec;
  }

  theme-main-collection-products .main-collection__toolbar > .facets-loading-wrapper {
    display: none !important;
  }

  theme-main-collection-products .main-collection__toolbar theme-facets-form[data-type="desktop"],
  theme-main-collection-products .main-collection__toolbar .facets-desktop {
    display: contents !important;
  }

  theme-main-collection-products .main-collection .facets-filtering {
    grid-area: auto !important;
    grid-row: 1 !important;
    grid-column: 1 !important;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
  }

  theme-main-collection-products .main-collection .facets-sorting-wrapper {
    grid-area: auto !important;
    grid-row: 1 !important;
    grid-column: 2 !important;
    position: relative !important;
    z-index: 20;
    display: flex;
    flex-direction: row-reverse !important;
    gap: 0;
    align-items: center;
    justify-content: flex-start !important;
    min-height: 40px;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  theme-main-collection-products .main-collection .facets-position-sticky {
    position: static !important;
    inset: auto !important;
  }

  theme-main-collection-products .main-collection .facets-filtering__filters {
    display: flex !important;
    flex: 0 1 auto;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    align-items: center;
    order: initial !important;
  }

  theme-main-collection-products .main-collection .facets-filtering__filters > theme-modal {
    position: relative;
    display: block;
    flex: 0 0 auto;
  }

  theme-main-collection-products .main-collection .facets-filtering theme-collapse,
  theme-main-collection-products .main-collection .facets-filtering__details {
    position: relative;
    display: block;
    border: 0 !important;
  }

  theme-main-collection-products .main-collection .facets-filtering theme-collapse:not(:last-child) {
    border: 0 !important;
  }

  theme-main-collection-products .main-collection .facets-filtering__summary,
  theme-main-collection-products .main-collection .facets-sorting__summary {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-start !important;
    min-height: 40px;
    padding: 0 !important;
    color: #101828;
    font-family: inherit !important;
    font-size: 14px;
    font-weight: 500 !important;
    line-height: 20px;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    border: 0 !important;
    border-radius: 0;
  }

  theme-main-collection-products .main-collection .facets-sorting__summary :is(span, strong, b),
  theme-main-collection-products .main-collection .facets-filtering__summary :is(span, strong, b) {
    color: inherit !important;
    font: inherit !important;
    letter-spacing: inherit !important;
  }

  theme-main-collection-products .main-collection .facets-filtering__details[open] .facets-filtering__summary,
  theme-main-collection-products .main-collection .facets-sorting__details[open] .facets-sorting__summary {
    color: #006fca;
    box-shadow: none;
  }

  theme-main-collection-products .main-collection .facets-filtering__content {
    position: absolute !important;
    inset-block-start: calc(100% + 8px) !important;
    inset-inline-start: 0 !important;
    z-index: 40 !important;
    display: flex !important;
    width: 280px !important;
    padding: 16px !important;
    overflow: visible !important;
    background: #fff;
    border: 1px solid #e4e7ec !important;
    border-radius: 10px !important;
    box-shadow: 0 18px 45px rgb(16 24 40 / 14%) !important;
  }

  theme-main-collection-products .main-collection .facets-filtering__content-header {
    display: flex !important;
  }

  theme-main-collection-products .main-collection .facets-filtering__content-header ~ fieldset {
    padding-block-start: 12px !important;
    border-block-start: 1px solid #e4e7ec !important;
  }

  theme-main-collection-products .main-collection .facets-filtering__active {
    display: flex !important;
    grid-row: 2;
    grid-column: 1 / -1;
    flex-basis: auto;
    margin-block-start: 10px;
  }

  theme-main-collection-products .main-collection .facets-count {
    display: none !important;
  }

  theme-main-collection-products .main-collection .facets-sorting__details {
    position: relative;
  }

  theme-main-collection-products .main-collection .facets-sorting__content {
    inset-block-start: 100% !important;
    inset-inline: auto 0 !important;
    z-index: 50 !important;
    width: 250px !important;
    min-width: 250px !important;
    margin-block-start: 8px !important;
    padding: 18px !important;
    border: 1px solid #e4e7ec !important;
    border-radius: 10px !important;
    box-shadow: 0 18px 45px rgb(16 24 40 / 14%) !important;
  }
}

/* SHOPLINE's filter plug-in is injected as a sibling of .main-collection and
   otherwise forces a 300px left rail. Recompose that injected DOM into the
   same 1360px toolbar used by item count and sorting. */
@media (min-width: 960px) {
  theme-main-collection-products.filter-plugin-con-container {
    display: grid !important;
    grid-template:
      "filter-plugin sorting" auto
      "products products" auto
      / minmax(0, 1fr) auto !important;
    gap: 12px 24px !important;
    align-items: start !important;
    width: min(1360px, calc(100vw - 64px)) !important;
    max-width: none !important;
    padding: 32px 0 64px !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  theme-main-collection-products.filter-plugin-con-container > .main-collection,
  theme-main-collection-products.filter-plugin-con-container .main-collection__toolbar {
    display: contents !important;
  }

  theme-main-collection-products.filter-plugin-con-container > .filter-plugin-con {
    grid-area: filter-plugin !important;
    position: relative !important;
    inset: auto !important;
    z-index: 60 !important;
    align-self: start !important;
    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  theme-main-collection-products.filter-plugin-con-container > .filter-plugin-con > div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 28px !important;
    align-items: flex-start !important;
    width: 100% !important;
    height: 40px !important;
    overflow: visible !important;
  }

  theme-main-collection-products.filter-plugin-con-container .filter-selected-con {
    display: none !important;
  }

  theme-main-collection-products.filter-plugin-con-container .filter-folder-con {
    position: relative !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
  }

  theme-main-collection-products.filter-plugin-con-container .filter-folder-header {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 !important;
    color: #101828 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  theme-main-collection-products.filter-plugin-con-container .filter-folder-header :is(span, strong, b) {
    color: inherit !important;
    font: inherit !important;
    letter-spacing: inherit !important;
  }

  theme-main-collection-products.filter-plugin-con-container .filter-folder-header:hover,
  theme-main-collection-products.filter-plugin-con-container .filter-folder-header:focus-visible,
  theme-main-collection-products.filter-plugin-con-container .kemove-filter-dropdown--open .filter-folder-header {
    color: #006fca !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  theme-main-collection-products.filter-plugin-con-container .filter-folder-header svg {
    flex: 0 0 auto !important;
    width: 9px !important;
    height: 9px !important;
    transition: transform 180ms ease !important;
  }

  theme-main-collection-products.filter-plugin-con-container
    .kemove-filter-dropdown--closed
    .filter-folder-header
    svg {
    transform: rotate(180deg) !important;
  }

  theme-main-collection-products.filter-plugin-con-container
    .kemove-filter-dropdown--open
    .filter-folder-header
    svg {
    transform: rotate(0deg) !important;
  }

  theme-main-collection-products.filter-plugin-con-container .filter-folder-content {
    position: absolute !important;
    inset-block-start: calc(100% + 8px) !important;
    inset-inline-start: 0 !important;
    z-index: 80 !important;
    width: 280px !important;
    min-width: 280px !important;
    max-height: min(420px, 70vh) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: auto !important;
    background: #fff !important;
    border: 1px solid #e4e7ec !important;
    border-radius: 10px !important;
    box-shadow: 0 18px 45px rgb(16 24 40 / 14%) !important;
    box-sizing: border-box !important;
  }

  theme-main-collection-products.filter-plugin-con-container
    .kemove-filter-dropdown--closed
    .filter-folder-content {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  theme-main-collection-products.filter-plugin-con-container
    .kemove-filter-dropdown--open
    .filter-folder-content {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  theme-main-collection-products.filter-plugin-con-container .filter-tags-con {
    padding: 14px 16px !important;
  }

  theme-main-collection-products.filter-plugin-con-container .filter-checkbox-con {
    min-height: 36px !important;
  }

  theme-main-collection-products.filter-plugin-con-container .facets-sorting-wrapper {
    grid-area: sorting !important;
  }

  theme-main-collection-products.filter-plugin-con-container .main-collection__products {
    grid-area: products !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-block-start: 24px !important;
    border-block-start: 1px solid #e4e7ec;
  }
}

/* Product cards: one image scale and one content rhythm for every card. */
theme-main-collection-products .main-collection__list .block-product-card {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  color: #080a0f;
  background: #fafafa !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none;
  transition:
    transform 220ms var(--kemove-ease-out),
    border-color 220ms ease,
    box-shadow 220ms var(--kemove-ease-out);
}

theme-main-collection-products .main-collection__list .block-product-image__layer-image-wrapper {
  flex: 0 0 auto;
  width: 100%;
  padding: 0 !important;
  overflow: hidden;
  background: #fafafa;
  border: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  box-shadow: none !important;
}

theme-main-collection-products .main-collection__list .block-product-image__image-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden;
  background: #fafafa;
  border-radius: 8px 8px 0 0 !important;
}

theme-main-collection-products .main-collection__list .block-product-image__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transition: transform 280ms var(--kemove-ease-out), opacity 200ms ease;
}

/* Persisted SHOPLINE swatches align to the same 16px content inset as the
   title, rating and price. Ratings are moved into the information stack by JS. */
theme-main-collection-products .main-collection__list .block-product-card > .plugin-color-board,
theme-main-collection-products .main-collection__list .block-product-card > .kemove-card-swatches {
  width: calc(100% - 32px) !important;
  min-width: 0;
  min-height: 32px !important;
  height: 32px !important;
  margin: 10px 16px 0 !important;
  overflow: hidden;
  box-sizing: border-box;
}

theme-main-collection-products .main-collection__list .kemove-card-swatches :is(.color-board__main, .color-board__box, .color-board__scroll) {
  height: 32px !important;
}

theme-main-collection-products .main-collection__list .kemove-card-swatches .color-board__col {
  height: 30px !important;
  padding: 2px !important;
  margin-block-start: 2px !important;
}

theme-main-collection-products .main-collection__list .block-product-card > link,
theme-main-collection-products .main-collection__list .block-product-card > script {
  display: none !important;
}

theme-main-collection-products .main-collection__list .block-product-card-info {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px !important;
  align-items: center;
  width: 100% !important;
  min-width: 0;
  padding: 14px 16px 18px !important;
  margin-block-start: auto;
  background: transparent;
}

theme-main-collection-products .main-collection__list .block-product-card-info > :not(.block-product-title):not(.block-product-price):not(.block-product-buy-button-wrapper) {
  grid-column: 1 / -1;
  min-width: 0;
}

theme-main-collection-products .main-collection__list .block-product-title {
  grid-column: 1 / -1;
  align-self: start;
  min-height: 44px;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  color: #101828;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: 0;
}

theme-main-collection-products .main-collection__list .block-product-title span,
theme-main-collection-products .main-collection__list .block-product-title a {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

theme-main-collection-products .main-collection__list .block-product-price {
  grid-column: 1;
  align-self: center;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  color: #080a0f;
  min-height: 32px;
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
}

theme-main-collection-products .main-collection__list .product-price {
  gap: 7px;
  align-items: baseline;
}

theme-main-collection-products .main-collection__list .product-price__sale {
  color: #080a0f;
  font-weight: 700;
}

theme-main-collection-products .main-collection__list .product-price__origin {
  color: #8b929c;
  font-size: 12px;
  font-weight: 500;
}

theme-main-collection-products .main-collection__list .kemove-card-rating,
theme-main-collection-products .main-collection__list :is([class*="review"], [class*="rating"], [data-rating]) {
  grid-column: 1 / -1;
  width: 100% !important;
  min-height: 22px;
  margin: 0 !important;
  max-width: 100%;
  color: #667085;
  font-size: 12px;
  line-height: 1.3;
}

theme-main-collection-products .main-collection__list .kemove-card-rating .product-plugin-comment-rate-star {
  height: 22px !important;
  margin: 0 !important;
}

theme-main-collection-products .main-collection__list .block-product-buy-button-wrapper {
  grid-column: 2;
  align-self: center;
  width: auto !important;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity 160ms ease,
    transform 180ms var(--kemove-ease-out),
    visibility 160ms ease;
}

theme-main-collection-products .main-collection__list .block-product-buy-button {
  width: auto !important;
  min-width: 104px;
  min-height: 36px;
  height: 36px;
  padding: 0 15px !important;
  color: #fff !important;
  font-size: 13px;
  white-space: nowrap !important;
  background: #0091ff !important;
  border: 1px solid #0091ff !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

theme-main-collection-products .main-collection__list .block-product-buy-button:hover {
  background: #080a0f !important;
  border-color: #080a0f !important;
  transform: translateY(-1px);
}

theme-main-collection-products .main-collection__list .block-product-buy-button:disabled {
  color: #fff !important;
  background: #9ca3af !important;
  border-color: #9ca3af !important;
}

theme-main-collection-products .main-collection__list .block-product-card__discount-tag,
theme-main-collection-products .main-collection__list .block-product-card__sold-out {
  padding: 7px 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  background: #0091ff;
  border-radius: 0 0 8px 0;
}

theme-main-collection-products .main-collection__list .block-product-card__discount-tag[data-kemove-discount-percentage] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 54px;
  padding: 0;
  font-size: 0;
  line-height: 1;
}

theme-main-collection-products .main-collection__list .block-product-card__discount-tag[data-kemove-discount-percentage]::before {
  content: attr(data-kemove-discount-percentage) "%";
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

theme-main-collection-products .main-collection__list .block-product-card__discount-tag[data-kemove-discount-percentage]::after {
  content: "OFF";
  margin-block-start: 3px;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
}

theme-main-collection-products .main-collection__list .block-product-card__sold-out {
  color: #080a0f;
  background: #fff;
  border: 1px solid #dfe3e8;
}

@media (hover: hover) and (pointer: fine) and (min-width: 960px) {
  theme-main-collection-products .main-collection__list .block-product-card:hover {
    border-color: rgb(0 145 255 / 20%) !important;
    box-shadow: 0 14px 34px rgb(16 24 40 / 9%) !important;
    transform: translateY(-3px);
  }

  theme-main-collection-products .main-collection__list .block-product-card:hover .block-product-image__image {
    transform: scale(1.02);
  }

  theme-main-collection-products .main-collection__list .block-product-card:hover .block-product-buy-button-wrapper,
  theme-main-collection-products .main-collection__list .block-product-card:focus-within .block-product-buy-button-wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

@media (max-width: 959px) {
  theme-main-collection-products .main-collection.page-width {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 16px 36px !important;
  }

  theme-main-collection-products .main-collection__list {
    --column-gap: 12px;
    --row-gap: 16px;

    margin-block-end: 28px !important;
  }

  theme-main-collection-products .main-collection__list .block-product-image__layer-image-wrapper {
    padding: 0 !important;
  }

  theme-main-collection-products .main-collection__list .block-product-card > .plugin-color-board,
  theme-main-collection-products .main-collection__list .block-product-card > .kemove-card-swatches {
    width: calc(100% - 20px) !important;
    margin-inline: 10px !important;
  }

  theme-main-collection-products .main-collection__list .block-product-card-info {
    display: flex !important;
    flex-direction: column;
    gap: 9px !important;
    align-items: stretch;
    padding: 10px !important;
  }

  theme-main-collection-products .main-collection__list .block-product-title {
    min-height: 38px;
    font-size: 13px;
    line-height: 1.4;
  }

  theme-main-collection-products .main-collection__list .block-product-price {
    margin-block-start: auto !important;
    font-size: 13px;
  }

  theme-main-collection-products .main-collection__list .block-product-buy-button-wrapper {
    width: 100% !important;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  theme-main-collection-products .main-collection__list .block-product-buy-button {
    width: 100% !important;
    min-width: 0;
    padding-inline: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  theme-main-collection-products .main-collection__list .block-product-card,
  theme-main-collection-products .main-collection__list .block-product-image__image,
  theme-main-collection-products .main-collection__list .block-product-buy-button-wrapper,
  theme-main-collection-products .main-collection__list .block-product-buy-button {
    transition: none !important;
  }
}
