.featured-collection-wrapper {
  padding-inline: 0;
}

.featured-collection {
  --brand-red-500: #ff5232;
  --button-primary-background-hover: var(--light-100);

  .featured-collection-header {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--fixed-space-6);
    padding-inline: var(--fixed-space-4);

    @media (min-width: 990px) {
      align-items: center;
      flex-direction: row;
      justify-content: space-between;
      padding-inline: var(--fixed-space-12);
    }
  }

  .text-block {
    display: flex;
    flex-direction: column;
  }

  .title {
    margin-top: 0;
    text-align: center;

    @media (min-width: 990px) {
      text-align: left;
    }
  }

  .subtitle {
    margin: 0;
    text-align: center;

    @media (min-width: 990px) {
      text-align: left;
    }
  }

  .header-cta {
    border-color: var(--dark-800);
    flex-shrink: 0;
    margin-bottom: 0;
  }

  horizontal-scroll-carousel {
    display: block;
    overflow: visible;
    position: relative;
    width: 100%;
  }

  /* Scroll list: flex row, scrolled natively by horizontal-scroll-carousel */
  .featured-collection-scroll-list {
    align-items: center;

    /* Tiles draw only their end edges, so the list must supply the top and left outer edges. */
    border-block-start: 1px solid var(--dark-800);
    border-inline-start: 1px solid var(--dark-800);
    gap: 0;

    /* Adjacent tiles share a single 1px line instead of stacking two borders. */
    .product-card-link {
      border-block-start-width: 0;
      border-inline-start-width: 0;
    }

    .featured-collection-1-slides & {
      display: grid;
      grid-template-columns: 1fr;
    }

    @media (min-width: 750px) {
      .featured-collection-1-slides &,
      .featured-collection-2-slides & {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 990px) {
      .featured-collection-1-slides &,
      .featured-collection-2-slides &,
      .featured-collection-3-slides & {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }
    }
  }

  /* Slides: fixed width */
  .featured-collection-scroll-item {
    align-items: stretch;
    display: flex;
    height: 100%;
    min-width: 320px;
    position: relative;
    width: 85%;

    .featured-collection-1-slides & {
      padding-left: 0;
      padding-right: 0;
      width: auto;
    }

    @media (min-width: 750px) {
      width: calc(48% - var(--space-4));

      .featured-collection-1-slides &,
      .featured-collection-2-slides & {
        padding-left: 0;
        padding-right: 0;
        width: auto;
      }
    }

    @media (min-width: 990px) {
      min-width: 320px;
      width: 33.33%;

      .featured-collection-1-slides &,
      .featured-collection-2-slides &,
      .featured-collection-3-slides & {
        padding-left: 0;
        padding-right: 0;
        width: auto;
      }
    }
  }

  .featured-collection-product-card {
    width: 100%;

    .product-card-image {
      max-height: unset;
    }
  }

  .price-highlight {
    color: var(--brand-red-500);
  }

  .sold-out-text {
    color: var(--brand-red-500);
  }

  /* Prev/next controls — button look lives in horizontal-scroll-carousel.css */
  .scroll-button {
    top: 50%;
    transform: translateY(-50%);
  }

  .scroll-button-left {
    left: var(--space-2);
  }

  .scroll-button-right {
    right: var(--space-2);
  }

  @media (min-width: 750px) {
    .scroll-button-left {
      left: 50px;
    }

    .scroll-button-right {
      right: 50px;
    }
  }
}