/* Media with content */
.section--page-width {
  &.media-with-content {
    grid-template-areas: "margin-left media margin-right" "margin-left content margin-right";

    @media screen and (min-width: 750px) {
      /* Wide proportion is media 3.5 parts, content 2.5 parts. Which equals 7|5. So divide the central column by 7+5 and multiply accordingly */
      --media-with-content-grid-columns: var(--full-page-grid-margin)
        calc((var(--full-page-grid-central-column-width) / 12) * 7)
        calc((var(--full-page-grid-central-column-width) / 12) * 5)
        var(--full-page-grid-margin);

      grid-template-areas: "margin-left media content margin-right";
    }
  }

  &.media-with-content--media-right {
    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: var(--full-page-grid-margin)
        calc((var(--full-page-grid-central-column-width) / 12) * 5)
        calc((var(--full-page-grid-central-column-width) / 12) * 7)
        var(--full-page-grid-margin);

      grid-template-areas: "margin-left content media margin-right";
    }
  }

  &.media-with-content--medium {
    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: var(--full-page-grid-margin)
        repeat(2, calc(var(--full-page-grid-central-column-width) / 2))
        var(--full-page-grid-margin);
    }
  }

  &.media-with-content--narrow.media-with-content--media-right {
    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: var(--full-page-grid-margin)
        calc((var(--full-page-grid-central-column-width) / 3) * 2)
        calc(var(--full-page-grid-central-column-width) / 3)
        var(--full-page-grid-margin);
    }
  }

  &.media-with-content--narrow {
    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: var(--full-page-grid-margin)
        calc(var(--full-page-grid-central-column-width) / 3)
        calc((var(--full-page-grid-central-column-width) / 3) * 2)
        var(--full-page-grid-margin);
    }
  }
}

.section--full-width {
  &.media-with-content--media-right {
    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: 2.5fr 3.5fr;

      grid-template-areas: "content media";
    }
  }

  &.media-with-content--medium {
    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: 1fr 1fr;
    }
  }

  &.media-with-content--narrow {
    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: 2fr 4fr;
    }
  }

  &.media-with-content--narrow.media-with-content--media-right {
    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: 4fr 2fr;
    }
  }
}

/* Keep the CSS specificity lower assuming that liquid won't assign this class with a full width section */
.media-with-content.media-with-content--media-extend {
  grid-template-columns: var(--media-with-content-grid-columns);
  grid-template-areas: "media media media" "margin-left content margin-right";

  @media screen and (min-width: 750px) {
    grid-template-areas: "media media content margin-right";
  }
}

.media-with-content--media-extend.media-with-content--media-right {
  @media screen and (min-width: 750px) {
    grid-template-areas: "margin-left content media media";
  }
}

.media-with-content--media-right {
  @media screen and (min-width: 750px) {
    grid-template-areas: "margin-left content media media";
  }
}

.media-with-content {
  --media-with-content-grid-columns: var(--full-page-grid-with-margins);

  grid-template-columns: var(--media-with-content-grid-columns);
  grid-template-areas: "media media media" "content content content";

  @media screen and (min-width: 750px) {
    --media-with-content-grid-columns: 3.5fr 2.5fr;

    /* Default desktop layout is wide media, on the left, in full page section */
    grid-template-areas: "media content";
  }

  .media-block {
    grid-area: media;
  }

  .media-with-content__content {
    grid-area: content;
  }

  /* Inner blocks spacing */
  .media-with-content__content > .group-block-content {
    padding-inline: var(--page-margin);
    padding-block: calc(2 * var(--page-margin));

    @media screen and (min-width: 750px) {
      padding-block: var(--page-margin);
    }
  }

  &.section--page-width .media-with-content__content > .group-block-content {
    padding-inline: 0;

    @media screen and (min-width: 750px) {
      padding-inline-start: var(--page-margin);
    }
  }

  &.section--page-width.media-with-content--media-right
    .media-with-content__content
    > .group-block-content {
    padding-inline-end: var(--page-margin);
    padding-inline-start: 0;
  }
}

.media-with-content[data-shopify-visual-preview] {
  --hero-min-height: 500px;

  min-height: 500px;
}

/* Cart Recommendations */
.cart-recommendations {
  padding: var(--padding-md) 0;
  border-block-start: 1px solid var(--color-border);
}

.cart-recommendations__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--padding-md) var(--padding-sm);
}

.cart-recommendations__heading.h6 {
  text-transform: none;
  margin: 0;
}

.cart-recommendations__nav {
  display: flex;
  gap: var(--gap-2xs);
}

.cart-recommendations__nav-button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--style-border-radius-buttons-primary);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.cart-recommendations__nav-button:hover {
  opacity: 0.8;
}

.cart-recommendations__nav-button .svg-wrapper {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.cart-recommendations__nav-button--prev .svg-wrapper {
  transform: rotate(90deg);
}

.cart-recommendations__nav-button--next .svg-wrapper {
  transform: rotate(-90deg);
}

.cart-recommendations__products {
  display: flex;
  gap: var(--gap-sm);
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 0 var(--padding-md);
  scrollbar-width: none;
}

.cart-recommendations__products::-webkit-scrollbar {
  display: none;
}

.cart-recommendations__product {
  flex: 0 0 auto;
  width: 100%;
  max-width: 300px;
  display: flex;
  gap: var(--gap-sm);
  background-color: var(--color-background-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--style-border-radius-inputs);
  padding: var(--padding-sm);
}

.cart-recommendations__product-image {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  display: block;
  overflow: hidden;
  border-radius: var(--style-border-radius-inputs);
  background-color: var(--color-background);
}

.cart-recommendations__product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-recommendations__product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xs);
  min-width: 0;
}

.cart-recommendations__product-title.caption {
  color: var(--color-foreground);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  margin-bottom: auto;
  font-weight: 400;
}

.cart-recommendations__product-title:hover {
  text-decoration: underline;
}

.cart-recommendations__product-price.small {
  font-size: var(--font-size--base);
  font-weight: 400;
  color: var(--color-foreground);
  margin-bottom: var(--margin-3xs);
}

.cart-recommendations__add-button.small {
  font-size: var(--font-size--lg);
  font-weight: 500;
  color: var(--color-primary-button-background);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
}

.cart-recommendations__add-button:hover {
  text-decoration: underline;
}

/* Collection Links Component */
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";
    min-height: var(--section-min-height-desktop);

    &[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-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;
      height: 100%;
      slideshow-container,
      slideshow-slides,
      slideshow-slide,
      .collection-links__image,
      .collection-links__image img {
        height: 100%;
      }
    }

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

  .button {
    margin-top: 1.5rem;
  }
}

/* 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%;
    height: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--border-radius);

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

  .mobile-collection-slide__content-wrap {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
  }

  .mobile-collection-slide__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    flex: 1;
    justify-content: flex-start;
    padding: 2.5rem 1.5rem 0;
    height: 100%;
  }

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

  .mobile-collection-slide__content rte-formatter {
    margin-bottom: 1rem;
  }

  .mobile-collection-slide__content .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) {
  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: 2rem;
          margin-bottom: 2.5rem;
          min-height: unset;

          .slideshow-controls__dots {
            padding: 0;
          }
        }

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

/* 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;
  }
}

/* Here I should maybe set the width to auto when the ratio is set to adapt */
.featured-product-section .product-media-container.constrain-height {
  /* arbitrary offset value based on average theme spacing and header 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 {
  --padding-block: 20px;
  --padding-inline: 20px;

  @media screen and (min-width: 750px) {
    --padding-block: 40px;
    --padding-inline: 40px;
  }
}

@media screen and (max-width: 749px) {
  .featured-product-section .media-block {
    order: -1;
  }
}