.block-collection-list {
  position: relative;
  column-gap: var(--column-gap);
  row-gap: var(--row-gap);
}

.block-collection-list > li {
  min-width: 0;
}

@media (max-width: 959px) {
  .block-collection-list {
    width: calc(100% + var(--page-padding) * 2);
    padding-inline: var(--page-padding);
    margin-inline: calc(-1 * var(--page-padding));
    scroll-padding-inline: var(--page-padding);
  }

  .block-collection-list[data-mobile-slider="true"] {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: var(--column-width);
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .block-collection-list[data-mobile-slider="false"] {
    grid-template-columns: repeat(var(--mobile-columns), minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
    scroll-snap-type: none;
  }
}

@media (min-width: 960px) {
  .block-collection-list[data-desktop-slider="true"] {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: var(--column-width);
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .block-collection-list[data-desktop-slider="false"] {
    grid-template-columns: repeat(var(--desktop-columns), minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
    scroll-snap-type: none;
  }
}

.block-collection-list__theme-carousel {
  display: block;
  width: 100%;
}

.block-collection-list__button {
  position: absolute;
  inset-block-start: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: rgb(var(--color-button-secondary-text)) !important;
  background-color: rgb(var(--color-button-secondary-background)) !important;
  border: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgb(var(--color-button-secondary-border)),
    0 4px 10px rgb(0 0 0 / 15%);
  transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.block-collection-list__button:disabled {
  display: flex;
  opacity: 0.45;
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .block-collection-list__button:not(:disabled):hover {
    color: rgb(var(--color-button-text)) !important;
    background-color: rgb(var(--color-button-background)) !important;
    box-shadow:
      inset 0 0 0 1px rgb(var(--color-button-background)),
      0 4px 10px rgb(0 0 0 / 15%);
  }
}

.block-collection-list__button--previous {
  inset-inline-start: 0;
  transform: translate(-50%, -50%);
}

.block-collection-list__button--previous svg {
  transform: rotate(180deg);
}

.block-collection-list__button--next {
  inset-inline-end: 0;
  transform: translate(50%, -50%);
}

.block-collection-list__progress {
  display: none;
}

body[data-page-type="index"] .collection-list-wrapper .block-collection-card__title::after {
  width: fit-content;
  font-size: clamp(13px, 1.6667vw, 24px) !important;
  text-decoration: none !important;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size 200ms ease-in;
}

@media (hover: hover) and (pointer: fine) {
  body[data-page-type="index"] .collection-list-wrapper .block-collection-card:hover .block-collection-card__title::after {
    background-size: 100% 2px;
  }
}

body[data-page-type="index"] .collection-list-wrapper .block-collection-card:focus-visible .block-collection-card__title::after {
  background-size: 100% 2px;
}

@media (max-width: 959px) {
  .block-collection-list__progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-block-start: var(--carousel-pagination-spacing, 24px);
  }

  .block-collection-list__progress button {
    width: 8px;
    height: 8px;
    padding: 0;
    appearance: none;
    background: rgb(var(--color-button-secondary-background));
    border: 0;
    border-radius: 999px;
    opacity: 0.3;
    cursor: pointer;
    transition: width 0.2s ease, background-color 0.2s ease;
  }

  .block-collection-list__progress button[aria-current="true"] {
    width: 24px;
    background: rgb(var(--color-button-background));
    opacity: 1;
  }
}