collection-links-component {
  --alignment: flex-start;
  --text-align: left;

  display: grid;
  align-items: center;
  grid-gap: var(--gap-3xl);

  &:has([ratio="portrait"]) {
    --template-column-ratio: 0.8fr;
  }

  &:has([ratio="square"]) {
    --template-column-ratio: 1fr;
  }

  &:has([ratio="landscape"]) {
    --template-column-ratio: 1.4fr;
  }

  &[alignment="center"] {
    --alignment: center;
    --text-align: center;

    .text-block,
    .text-block > * {
      text-align: center;
    }
  }

  &[alignment="right"] {
    --alignment: flex-end;

    .text-block,
    .text-block > * {
      text-align: right;
    }
  }

  &[layout="spotlight"] {
    position: relative;
    grid-template-columns: 1fr var(--template-column-ratio);
    grid-template-areas: "content image";

    &[reverse] {
      grid-template-areas: "image content";
      grid-template-columns: var(--template-column-ratio) 1fr;

      .collection-links__content {
        padding-block: var(--padding-block-start-content-block)
          var(--padding-block-end-content-block);
        padding-inline: var(--padding-inline-start-content-block)
          var(--padding-inline-end-content-block);
      }
    }

    .collection-links__content {
      grid-area: content;
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 40px 0;
      padding-block: var(--padding-block-start-content-block)
        var(--padding-block-end-content-block);
      padding-inline: var(--padding-inline-start-content-block)
        var(--padding-inline-end-content-block);
    }

    .collection-links__container {
      align-items: var(--alignment);
      flex: 1;
    }

    .collection-descriptions {
      margin-top: auto;
    }

    .collection-links__images {
      grid-area: image;
      display: block;
    }

    .collection-links__mobile-slideshow {
      display: none;
    }
  }

  &[layout="text"] {
    grid-gap: 0;
    grid-template-areas: "text";

    .collection-links__container {
      gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: var(--alignment);
    }

    .collection-links__mobile-slideshow {
      display: none;
    }
  }
}

.collection-links__container {
  display: flex;
  gap: var(--gap-md);
  flex-direction: column;
}

.collection-links__content {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.collection-links__images {
  overflow: hidden;
}

.collection-descriptions {
  margin-top: var(--gap-xl);
}

.collection-descriptions__button {
  margin-top: 32px;
}

.collection-description__item {
  display: none;

  &:first-child {
    display: block;
  }
}

/* Mobile slideshow base styles */
.collection-links__mobile-slideshow {
  display: none;
  --slideshow-gap: var(--gap-lg);

  .mobile-collection-slide {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
  }

  .mobile-collection-slide__image {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--border-radius);

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .mobile-collection-slide__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    flex: 1;
    justify-content: flex-start;
    padding: var(--padding-4-5xl) var(--gap-md) 0;
  }

  .mobile-collection-slide__title {
    font-size: var(--font-size--2xl);
    font-weight: var(--font-subheading--weight);
    margin: 0;
  }

  .mobile-collection-slide__description {
    flex: 1;
  }

  .mobile-collection-slide__content .collection-descriptions__button {
    margin-top: auto;
    width: 100%;
  }

  .slideshow-scroller {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    display: flex;
    height: auto;
  }

  .slideshow-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    width: 100%;
    height: auto;
  }
}

/* Mobile responsive styles - should come AFTER desktop styles */
@media (max-width: 749px) {
  collection-links-component {
    grid-gap: 0;
    align-items: stretch;

    &[layout="spotlight"],
    &[layout="spotlight"][reverse] {
      grid-template-columns: 1fr;
      grid-template-areas: "mobile";

      &[alignment-mobile="left"] {
        text-align: left;
        --text-align-mobile: left;
        .text-block,
        .text-block > * {
          text-align: left;
        }
      }

      &[alignment-mobile="center"] {
        text-align: center;
        --text-align-mobile: center;
        .text-block,
        .text-block > * {
          text-align: center;
        }
      }

      &[alignment-mobile="right"] {
        text-align: right;
        --text-align-mobile: right;
        .text-block,
        .text-block > * {
          text-align: right;
        }
      }

      .collection-links__content,
      .collection-links__images {
        display: none;
      }

      .collection-links__mobile-slideshow {
        display: block;
        grid-area: mobile;
        width: 100%;

        &.slideshow-component {
          width: 100%;
          height: auto;
        }

        slideshow-controls:has(.slideshow-controls__dots) {
          mix-blend-mode: unset;
          margin-top: 25px;
          margin-bottom: 35px;
        }

        &:not(:has(slideshow-controls)) {
          margin-bottom: 40px;
        }

        .slideshow-controls__dots button {
          --color: var(--color-input-border);
        }

        .slideshow-controls__dots button[aria-selected="true"] {
          --color: var(--color-primary);
        }
      }
    }
  }

  .collection-links__images {
    image-block {
      max-width: 100%;
    }
  }
}

/* PF Spotlight Component */
pf-spotlight-component {
  --alignment: flex-start;
  --text-align: left;

  display: grid;
  align-items: center;
  grid-gap: var(--gap-3xl);

  &:has([ratio="portrait"]) {
    --template-column-ratio: 0.8fr;
  }

  &:has([ratio="square"]) {
    --template-column-ratio: 1fr;
  }

  &:has([ratio="landscape"]) {
    --template-column-ratio: 1.4fr;
  }

  &[alignment="center"] {
    --alignment: center;
    --text-align: center;

    .text-block,
    .text-block > * {
      text-align: center;
    }

    .pf-spotlight-descriptions .button {
      margin-right: auto;
      margin-left: auto;
    }
  }

  &[alignment="right"] {
    --alignment: flex-end;
    --text-align: right;

    .text-block,
    .text-block > * {
      text-align: right;
    }

    .pf-spotlight-descriptions .button {
      margin-left: auto;
    }
  }

  position: relative;
  grid-template-columns: 1fr var(--template-column-ratio);
  grid-template-areas: "content image";

  &[reverse] {
    grid-template-areas: "image content";
    grid-template-columns: var(--template-column-ratio) 1fr;
    .pf-spotlight__content {
      padding-block: var(--padding-block-start-content-block)
        var(--padding-block-end-content-block);
      padding-inline: var(--padding-inline-start-content-block)
        var(--padding-inline-end-content-block);
    }
  }

  .pf-spotlight__content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-block: var(--padding-block-start-content-block)
      var(--padding-block-end-content-block);
    padding-inline: var(--padding-inline-start-content-block)
      var(--padding-inline-end-content-block);
  }

  .pf-spotlight__container {
    align-items: var(--alignment);
    flex: 1;

    .pf-spotlight__link {
      opacity: var(--disabled-opacity);
      cursor: pointer;
      transition: all 0.3s ease;

      &[aria-current="true"] {
        opacity: 1;
      }

      &:hover {
        opacity: 0.75;
      }
    }
  }

  .pf-spotlight-descriptions {
    margin-top: auto;
    text-align: var(--text-align);
  }

  .pf-spotlight__images {
    grid-area: image;
    display: block;
  }

  .pf-spotlight__mobile-slideshow {
    display: none;
  }
}

.pf-spotlight__container {
  display: flex;
  gap: var(--gap-md);
  flex-direction: column;
}

.pf-spotlight__content {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.pf-spotlight__images {
  overflow: hidden;
}

.pf-spotlight-descriptions {
  margin-top: var(--gap-xl);
}

.pf-spotlight-descriptions__button {
  margin-top: 32px;
}

.pf-spotlight-description__item {
  display: none;

  &:first-child {
    display: block;
  }
}

/* Mobile slideshow base styles */
.pf-spotlight__mobile-slideshow {
  display: none;
  --slideshow-gap: var(--gap-lg);

  .mobile-spotlight-slide {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
  }

  .mobile-spotlight-slide__image {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--border-radius);

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .mobile-spotlight-slide__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    flex: 1;
    justify-content: flex-start;
    padding: var(--padding-6xl) var(--gap-md) 0;

    .button {
      margin-top: auto;
    }
  }

  .slideshow-scroller {
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    display: flex;
    height: auto;
  }

  .slideshow-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    width: 100%;
    height: auto;
  }
}

/* Mobile responsive styles - should come AFTER desktop styles */
@media (max-width: 749px) {
  pf-spotlight-component {
    grid-gap: 0;
    align-items: stretch;

    grid-template-columns: 1fr;
    grid-template-areas: "mobile";

    .pf-spotlight__content,
    .pf-spotlight__images {
      display: none;
    }

    &[reverse] {
      grid-template-columns: 1fr;
      grid-template-areas: "mobile";
    }

    &[alignment-mobile="left"] {
      text-align: left;
      --text-align-mobile: left;
      .text-block,
      .text-block > * {
        text-align: left;
      }
    }

    &[alignment-mobile="center"] {
      text-align: center;
      --text-align-mobile: center;
      .text-block,
      .text-block > * {
        text-align: center;
      }
    }

    &[alignment-mobile="right"] {
      text-align: right;
      --text-align-mobile: right;
      .text-block,
      .text-block > * {
        text-align: right;
      }
    }

    .pf-spotlight__mobile-slideshow {
      display: block;
      grid-area: mobile;
      width: 100%;

      &.slideshow-component {
        width: 100%;
        height: auto;
      }

      slideshow-controls:has(.slideshow-controls__dots) {
        mix-blend-mode: unset;
        margin-top: 25px;
        margin-bottom: 35px;
      }

      .slideshow-controls__dots button {
        --color: var(--color-input-border);
      }

      .slideshow-controls__dots button[aria-selected="true"] {
        --color: var(--color-primary);
      }
    }
  }

  .pf-spotlight__images {
    image-block {
      max-width: 100%;
    }
  }
}

/* Featured Product */

.featured-product-section .section-content-wrapper {
  grid-template-columns: 1fr;
  display: grid;
  overflow: hidden;

  @media (min-width: 750px) {
    grid-template-columns: 1fr 1fr;
  }
}

.featured-product-section .product-media-container.constrain-height {
  --viewport-offset: 400px;
  --constrained-min-height: var(--visual-preview--height, 80dvh);

  @media screen and (min-width: 750px) {
    --viewport-offset: 300px;
  }
}

.featured-product-section .product-grid__card {
  max-width: 35rem;
  margin: 0 auto;
  --padding-block: 30px;
  --padding-inline: 30px;

  @media screen and (min-width: 750px) {
    --padding-block: 50px;
    --padding-inline: 50px;
    justify-content: center;
  }
}

@media screen and (max-width: 749px) {
  .featured-product-section .media-block {
    order: -1;
  }
}
@media screen and (min-width: 750px) {
  div.media-block.spacing-style {
    min-height: 800px;
  }
}

/* video */
.video-interaction-hint {
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: var(--layer-flat);
}

.video-interaction-hint:hover {
  opacity: 1;
}

/* Footer */
@media screen and (min-width: 750px) {
  .shopify-section-group-footer-group .menu {
    width: auto;
    min-width: 10rem;
  }
}