.single-product {
  @apply
    px-0;

  .cheat-sheet {
    .single-sheet {
      @apply
        border-t
        border-primary-250
        overflow-hidden
        flex
        flex-wrap
        lg:flex-nowrap
        pt-2
        lg:pt-4.5
        mt-7;

      .teaser-finiture,
      .teaser-tints {
        @apply
          cursor-pointer;
      }

      .title {
        @apply
          font-mono
          text-xs
          flex-none
          w-1/2
          mr-2
          lg:mr-0
          lg:w-[345px]
          mb-2.5

          lg:mb-0;
      }

      &.download {
        @apply
          sm:flex-nowrap
          border-b;

        .content {
          @apply
            flex
            w-full
            items-center
            pb-1
            border-b
            justify-between
            -mx-4;

          > div {
            @apply
              px-4;
          }

          svg {
            @apply
              h-5.5;
          }
        }
      }

      .content {
        @extend .has-base-font-size;
        @apply
          relative
          bottom-1.5;
      }
    }
  }

  .sheet-overlay {
    @apply
      fixed
      pointer-events-none
      opacity-0
      duration-300
      transition-all
      inset-0
      w-full
      h-full
      z-50
      p-4
      pb-18
      lg:p-11
      bg-white;

    .swiper-button-prev,
    .swiper-button-next {
      @apply
        absolute;

      svg {
        @apply
          h-5
          relative
          bottom-10
          sm:bottom-8;
      }
    }

    .swiper-container {
      @apply
        static
        mx-10
        h-full;
    }

    .swiper-slide {
      @apply
        flex
        flex-col
        h-full
        justify-center;
    }

    article {
      @apply
        flex
        px-0
        justify-center
        items-center
        w-full
        h-full
        pt-10
        flex-col;

      h3 {
        @apply
          text-xs
          max-w-5xl
          w-full
          font-mono;

        span {
          @apply
            inline-block
            mr-2;
        }
      }

      figure {
        @apply
          inline-block
          h-auto
          max-w-5xl
          bg-transparent
          w-full;

        img {
          @apply
            h-full
            object-cover
            w-full;
        }
      }
    }

    &.active {
      @apply
        pointer-events-auto
        opacity-100;
    }

    [data-close] {
      @apply
        cursor-pointer
        absolute
        z-50
        right-5
        top-5

        lg:right-10
        lg:top-10;
    }

    .swiper-button-next {
      @apply
        right-4

        lg:right-11;
    }

    .swiper-button-prev {
      @apply
        left-4

        lg:left-11;
    }
  }
}
