.block-collection-list {
  position: relative;
}

@media (max-width: 959px) {
  .block-collection-list > li.multi-col-row {
    grid-row: var(--mobile-grid-row);
    grid-column: var(--mobile-grid-column);
    scroll-snap-align: var(--mobile-scroll-snap-align);
  }
}

@media (max-width: 959px) {
  .block-collection-list.full-screen {
    gap: 0;
    width: var(--body-container-width);
  }
}

.block-collection-list__theme-carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.block-collection-list__capsule {
  margin-block-start: 30px;
}

.block-collection-list__button {
  position: absolute;
  inset-block-start: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: rgb(0 0 0 / 100%);
  background-color: rgb(255 255 255 / 100%);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgb(0 0 0 / 15%);
}

.block-collection-list__button:disabled {
  display: none;
}

.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%);
}

/* Let a card take up several grid columns (e.g. a hero category card).
   Only for the wrapping grid — the slider variant lays items out in a single row. */
@media (min-width: 960px) {
  .block-collection-list--wrap > li.block-collection-list__item {
    grid-column: span var(--desktop-column-span, 1);
  }
}

@media (max-width: 959px) {
  .block-collection-list--wrap > li.block-collection-list__item {
    grid-column: span var(--mobile-column-span, 1);
  }
}

/* Fallback when container queries are unavailable: the ratio drives the height. */
.block-collection-list--fixed-ratio .block-collection-card__image-wrapper {
  aspect-ratio: var(--collection-card-aspect-ratio);
}

.block-collection-list--fixed-ratio .block-collection-card__image-wrapper img {
  object-fit: cover;
}

/* Every card in the list gets one explicit height, measured off the list's own
   width, so a card spanning several columns comes out wider — never taller — and
   the rows stay flush. The image is already cropped to the single-column ratio,
   so widening it only crops further. */
@supports (container-type: inline-size) {
  .block-collection-list--fixed-ratio {
    container-type: inline-size;
  }

  .block-collection-list--fixed-ratio .block-collection-card__image-wrapper {
    flex: none;
    aspect-ratio: auto;
  }

  /* Desktop takes the height straight from the design: --collection-card-design-height
     is what it asks for when the list is --collection-card-design-width wide
     (1380px of content at a 1440px viewport), and it scales from there. */
  @media (min-width: 960px) {
    .block-collection-list--fixed-ratio {
      --collection-card-design-width: 1380;
    }

    .block-collection-list--fixed-ratio .block-collection-card__image-wrapper {
      height: calc(
        100cqw * var(--collection-card-design-height, 443) /
          var(--collection-card-design-width, 1380)
      );
    }
  }

  /* Mobile derives it from one grid column, so the ratio holds per column. */
  @media (max-width: 959px) {
    .block-collection-list--fixed-ratio .block-collection-card__image-wrapper {
      height: calc(
        (100cqw - var(--column-gap) * (var(--mobile-gap-columns, 1) - 1)) /
          var(--mobile-columns, 1) *
          var(--collection-card-height-factor, 1.33333)
      );
    }
  }
}