.collection-spotlight {
  background-color: rgba(var(--color-background));
  color: rgba(var(--color-text));
}

.collection-spotlight__inner {
  display: flex;
}

.collection-spotlight__inner--media-end {
  flex-direction: row-reverse;
}

.collection-spotlight__media {
  position: relative;
  flex: 0 0 40%;
  align-self: flex-start;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

/* Outline hugs the image (Figma: frame around the left picture). */
.collection-spotlight__media--framed {
  border: 1px solid rgba(var(--color-text));
  box-sizing: border-box;
}

.collection-spotlight__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: rgba(var(--color-media-background));
}

.collection-spotlight__media theme-video-media,
.collection-spotlight__media .theme-video-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
}

.collection-spotlight__media .theme-video-media__video,
.collection-spotlight__media .theme-video-media__media,
.collection-spotlight__media video,
.collection-spotlight__media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Autoplay: hide play control chrome. */
.collection-spotlight__media theme-video-media[data-autoplay='true'] .theme-video-media__play-button,
.collection-spotlight__media theme-video-media[data-controls='false'] .theme-video-media__play-button {
  display: none;
}

.collection-spotlight__media theme-video-media[data-autoplay='true'],
.collection-spotlight__media theme-video-media[data-controls='false'] {
  pointer-events: none;
}

.collection-spotlight__media .theme-video-media video::-webkit-media-controls,
.collection-spotlight__media .theme-video-media video::-webkit-media-controls-enclosure {
  display: none !important;
}

.collection-spotlight__content {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.collection-spotlight__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  max-width: calc(100% - 120px);
  min-height: 40px;
}

.collection-spotlight__heading {
  color: rgba(var(--color-text));
}

.collection-spotlight__description {
  max-width: 62ch;
  margin: 0;
  color: rgba(var(--color-light-text));
}

.collection-spotlight__link {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: rgba(var(--color-button-text-link));
  text-decoration: underline;
  text-underline-offset: 4px;
}

.collection-spotlight__link svg {
  width: 14px;
  height: 14px;
}

.collection-spotlight__products {
  min-width: 0;
}

/* White product surfaces (override nested product-list scheme). */
.collection-spotlight .block-product-list {
  position: static;
  background-color: transparent;
}

.collection-spotlight .block-product-card__image-wrapper,
.collection-spotlight .block-product-card__content.product-card-style--card {
  background-color: #ffffff;
}

/* Equal-height cards: push Find Similar to the bottom of each card. */
.collection-spotlight .block-product-list.grid,
.collection-spotlight .carousel__track {
  align-items: stretch;
}

.collection-spotlight .block-product-list > li {
  display: flex;
  min-height: 100%;
}

.collection-spotlight .block-product-card,
.collection-spotlight .block-product-card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.collection-spotlight .block-product-list__carousel {
  position: static;
}

/* Figma: arrows sit top-right beside the section title (y aligned with heading). */
.collection-spotlight .block-product-list__button {
  position: absolute;
  inset-block-start: 0;
  z-index: 2;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background-color: #ffffff;
  border: 1px solid rgba(var(--color-text), 0.15);
  border-radius: 0;
  box-shadow: none;
}

.collection-spotlight .block-product-list__button--previous {
  inset-inline-start: auto;
  inset-inline-end: 52px;
  transform: none;
}

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

.collection-spotlight .block-product-list__button--next {
  inset-inline-end: 0;
  transform: none;
}

.collection-spotlight .block-product-list__button svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 959px) {
  .collection-spotlight__inner {
    flex-direction: column;
  }

  /* A percentage flex-basis resolves against an indefinite height once stacked. */
  .collection-spotlight__media,
  .collection-spotlight__content {
    flex: 0 0 auto;
    width: 100%;
  }

  .collection-spotlight__media {
    position: relative;
    align-self: auto;
    aspect-ratio: 3 / 4;
  }

  .collection-spotlight__text {
    max-width: calc(100% - 100px);
  }

  .collection-spotlight .block-product-list__button {
    width: 36px;
    height: 36px;
  }

  .collection-spotlight .block-product-list__button--previous {
    inset-inline-end: 44px;
  }
}