commerce/components/product/ProductView/ProductView.module.css

.root {
  @apply relative grid items-start gap-1 grid-cols-1 overflow-x-hidden;

  @screen lg {
    @apply grid-cols-12;
  }
}

.main {
  @apply relative px-0 pb-0 box-border  flex flex-col col-span-1;
  min-height: 600px;

  @screen md {
    min-height: 700px;
  }

  @screen lg {
    @apply mx-0 col-span-8;
  }
}

.squareBg {
  @apply absolute inset-0 bg-violet z-0 h-full;
}

.nameBox {
  @apply absolute top-6 left-0 z-20 pr-16;

  @screen lg {
    @apply left-6 pr-16;
  }

  & .name {
    @apply px-6 py-2 bg-primary text-primary font-bold;
    font-size: 2rem;
    letter-spacing: 0.4px;
  }

  & .price {
    @apply px-6 py-2 pb-4 bg-primary text-primary font-bold inline-block tracking-wide;
  }

  @screen lg {
    & .name,
    & .price {
      @apply bg-violet-light text-white;
    }
  }
}

.sidebar {
  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full h-full;

  @screen lg {
    @apply col-span-4 py-12;
  }
}

.sliderContainer {
  @apply flex items-center justify-center overflow-x-hidden bg-violet;
}

.imageContainer {
  & > div {
    @apply h-full;
    & > div {
      @apply h-full;
    }
  }
}

.sliderContainer .img {
  @apply w-full h-auto max-h-full object-cover;
}

.button {
  text-align: center;
  width: 100%;
  max-width: 300px;

  @screen sm {
    min-width: 300px;
  }
}

.wishlistButton {
  @apply absolute z-30 top-6 right-0 bg-primary text-primary
  w-10 h-10 flex items-center justify-center font-semibold
  leading-6 cursor-pointer px-6;

  @screen lg {
    @apply top-6 right-0 text-black bg-white w-14 h-14;
  }
}