.shopify-section--hero {
  & > zag-section {
    display: block;
    position: relative;
    inline-size: calc(100% - 2 * var(--zag-gutter));
    max-inline-size: var(--max-inline-size, 120rem);
    margin-inline: auto;
    margin-block-start: var(--mobile-margin-block-start);
    margin-block-end: var(--mobile-margin-block-end);
  }

  @media (width >= 48rem) {
    & > zag-section {
      margin-block-start: var(--desktop-margin-block-start);
      margin-block-end: var(--desktop-margin-block-end);
    }
  }

  & > [data-modifiers*="full-width"] {
    inline-size: 100%;
    max-inline-size: 100%;
  }

  & > [data-modifiers*="content-full-width"] .content-wrapper {
    padding-inline: var(--mobile-gutter, 1rem);
  }

  & > [data-modifiers*="content-full-width"] .content-wrapper,
  &
    > [data-modifiers*="content-full-width"]
    .content-wrapper
    .content-container {
    inline-size: calc(100% - 2 * var(--zag-gutter));
    max-inline-size: 90rem;
  }

  & .media-container :is(img, video) {
    display: block;
    inline-size: 100%;
    block-size: auto;
    object-fit: cover;
  }

  & .media-container .hero-video {
    &[data-modifiers*="desktop"] {
      display: none;
    }

    @media (width >= 48rem) {
      &[data-modifiers*="mobile"] {
        display: none;
      }

      &[data-modifiers*="desktop"] {
        display: block;
      }
    }
  }

  &
    > [data-modifiers*="mobile-height:percentage"]
    .media-container
    :is(img, video) {
    block-size: var(--mobile-height-percentage);
  }

  @media (width >= 48rem) {
    &
      > [data-modifiers*="desktop-height:percentage"]
      .media-container
      :is(img, video) {
      block-size: var(--desktop-height-percentage);
    }
  }

  & > [data-modifiers*="mobile-height:fixed"] .media-container :is(img, video) {
    block-size: var(--mobile-height-fixed);
  }

  @media (width >= 48rem) {
    &
      > [data-modifiers*="desktop-height:fixed"]
      .media-container
      :is(img, video) {
      block-size: var(--desktop-height-fixed);
    }
  }

  &
    > [data-modifiers*="mobile-height:aspect_ratio"]
    .media-container
    :is(img, video) {
    aspect-ratio: var(--mobile-height-aspect-ratio);
  }

  @media (width >= 48rem) {
    &
      > [data-modifiers*="desktop-height:aspect_ratio"]
      .media-container
      :is(img, video) {
      aspect-ratio: var(--desktop-height-aspect-fixed);
    }
  }

  & .content-wrapper {
    display: flex;
    position: absolute;
    align-items: flex-end;
    justify-content: flex-start;
    block-size: 100%;
    inline-size: calc(100% - 2 * var(--zag-gutter));
    max-inline-size: 85rem;
    margin-inline: auto;
    padding-block: 2.5rem;
    inset: 0;

    --navigation-bar-margin-inline-start: 8.5rem;
    --container-max-inline-size: 42.5rem;
    --container-margin-inline-end: 0;

    @media (width >= 60rem) {
      justify-content: flex-end;
      padding-block: 3.5rem;

      --navigation-bar-margin-inline-start: 11.75rem;
      --wrapper-justify: flex-end;
      --container-margin-inline-end: max(
        0rem,
        (
            min(100vw - var(--scrollbar-width) - 2 * var(--zag-gutter), 85rem) -
              var(--navigation-bar-margin-inline-start)
          ) - var(--container-max-inline-size)
      );
    }

    @media (width >= 70rem) {
      --navigation-bar-margin-inline-start: 16.75rem;
    }

    @media (width >= 80rem) {
      --navigation-bar-margin-inline-start: 28.75rem;
    }
  }

  & .content-container {
    display: block;
    position: relative;
    gap: 1rem;
    inline-size: 100%;
    max-inline-size: var(--container-max-inline-size);
    margin-inline-end: var(--container-margin-inline-end);
  }

  & .play-pause-button {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;

    & .play-pause-button__button {
      width: 100%;
      height: 100%;
      color: var(--white-color);
      background-color: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(25px);
      border-radius: 32px;
      padding: 0.75rem;

      & .play__icon,
      & .pause__icon {
      }

      & .play__icon {
        display: none;
      }
      > * {
        display: block;
        width: 100%;
        height: 100%;

        & svg {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  & .shopify-block--button:not([data-modifiers*="full-width"]) {
    inline-size: fit-content;
  }
}

/* First product section special rules */
[data-modifiers*="template:product"]
  .main-content
  .shopify-section--hero:first-child {
  /* Full content width available */
  & .content-wrapper {
    --navigation-bar-margin-inline-start: 0rem;
    --container-max-inline-size: calc(
      min(100vw - var(--scrollbar-width) - 2 * var(--zag-gutter), 85rem) -
        var(--navigation-bar-margin-inline-start)
    );
    --container-margin-inline-end: 0;

    @media (width >= 60rem) {
      --navigation-bar-margin-inline-start: 11.75rem;
    }
    @media (width >= 70rem) {
      --navigation-bar-margin-inline-start: 16.75rem;
    }

    @media (width >= 80rem) {
      --navigation-bar-margin-inline-start: 28.75rem;
    }
  }

  /* Ensure hero media on first product section leaves space for sticky bar */
  & .media-container :is(img, video) {
    max-block-size: calc(100svh - var(--sticky-bar-block-size));

    --sticky-bar-block-size: 8.75rem;

    @media (width >= 48rem) {
      --sticky-bar-block-size: 4.5rem;
    }
  }
}

/* Group behavior on product bundle hero */
[data-modifiers*="template:product"]
  .main-content
  .shopify-section--hero:first-child
  .shopify-block--group {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;

  @media (width >= 48rem) {
    gap: 1rem;
  }

  & .shopify-block--title:last-child {
    padding-block-start: 0.5rem;

    @media (width >= 48rem) {
      padding-block-start: 2rem;
    }
  }
}