challenge-vtex-io-josecarloslins/styles/sass/pages/product/vtex.flex-layout.scss

.flexRow--container-product-main{
  padding: 0 40px;
  .flexRowContent--container-product-main {
    display: grid;
    grid-template-columns: 48.824% 1fr;
    grid-column-gap: 32px;

    padding: 16px 0;
    .stretchChildrenWidth{
        padding-right: 0;
    }
   }
}

.flexRow--container-product-availability{
  padding: 0 40px;
  .flexRowContent--container-product-availability{
    display: grid;
    grid-template-columns: 48.824% 1fr;
    grid-column-gap: 32px;
    padding-top: 16px;

    padding-bottom: 16px;
    .stretchChildrenWidth{
        padding-right: 0;
    }

    .flexRowContent--message-availability{
      :global(.vtex-store-components-3-x-subscriberContainer){
        :global(.vtex-store-components-3-x-title){
          font-size: 0;
          &::after{
            content: "Produto indisponível";
            font-weight: 700;
            font-size: 14px;
            line-height: 19px;
            color: #868686;
          }
        }

        :global(.vtex-store-components-3-x-subscribeLabel){
          font-size: 0;
          &::after{
            content: "Deseja saber quando estiver disponível?";
            font-weight: 400;
            font-size: 14px;
            line-height: 19px;
            color: #868686;
          }
        }

        :global(.vtex-store-components-3-x-form){
          margin-bottom: 16px;
          :global(.vtex-store-components-3-x-content){
            display: grid;
            grid-template-areas: "name email"
                                 "button button";
            grid-template-columns: 1fr 1fr;
            column-gap: 8px;
            row-gap: 15px;
            max-width: 100%;

            :global(.vtex-store-components-3-x-inputName){
              grid-area: name;
              margin: 0;
              margin-right: 8px;

              :global(.vtex-styleguide-9-x-input){
                font-weight: 400;
                font-size: 12px;
                line-height: 16px;
                color: #989898;
              }
            }

            :global(.vtex-store-components-3-x-inputEmail){
              grid-area: email;
              margin: 0;

              :global(.vtex-styleguide-9-x-input){
                font-weight: 400;
                font-size: 12px;
                line-height: 16px;
                color: #989898;
              }
            }

            :global(.vtex-store-components-3-x-submit){
              grid-area: button;
              margin: 0;
              :global(.vtex-button){
                width: 100%;
                border: 0;
                background-color: #000000;
                color: #ffffff;
                border-radius: 0;
                min-height: auto;
                vertical-align: auto;

                :global(.vtex-button__label){
                  font-size: 0;
                  padding: 12px 0 !important;
                  &::after{
                    content: "avise-me";
                    font-weight: 600;
                    font-size: 18px;
                    line-height: 25px;
                    text-transform: uppercase;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.swiper-wrapper{
  .swiper-slide-active{
    width: 100%;
  }

  .swiper-slide{
    width: 100%;
  }
}

.flexRowContent{
  margin: 0;
}

.flexRowContent--container-quantity-and-buy-button{
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 10px;
  margin-bottom: 16px;

  :global(.vtex-button){
    background-color: #000000;
    border: 0;
    border-radius: 0;

    :global(.vtex-button__label){
      padding: 12px 0 !important;
    }
  }

  .stretchChildrenWidth{
    width: 100% !important;
  }
}

.container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth){
  width: 100%;
}

.flexRowContent--container-related-products-pdp{
  flex-direction: column;
  padding: 0 61px;

  .stretchChildrenWidth{
    width: 100% !important;
  }
}

.flexRow--message-availability{
  width: 60.0903%;
}

.flexRow--container-description-section-product-pdp{
  padding: 0 32px;
  .flexRowContent--container-description-section-product-pdp{
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr 1fr;

    .stretchChildrenWidth{
      width: 100% !important;
    }
  }
}

@media screen and (min-width: 1920px) {
  .flexRow--container-product-main{
    padding: 0 360px;

    .flexRowContent--container-product-main {
      grid-template-columns: 49.1305% 1fr;
    }
  }

  .flexRow--container-product-availability{
    padding: 0 360px;

    .flexRowContent--container-product-availability{
      grid-template-columns: 49.1305% 1fr;
    }
  }

  .flexRowContent--container-related-products-pdp{
    padding: 0 381px;
  }
}

@media screen and (max-width: 1024px) {
  .flexRow--container-product-main{
    .flexRowContent--container-product-main {
      display: flex;
      flex-direction: column;
      padding-top: 16px;
      padding-bottom: 0;
     }
  }

  .flexRowContent--container-related-products-pdp{
    padding: 0 53px;
  }

  .flexRow--container-description-section-product-pdp{
    padding: 0;
    .flexRowContent--container-description-section-product-pdp{
      display: flex;
      flex-direction: column;
      margin-left: 0;
      gap: 16px;
      padding: 0;

      border-bottom: 1px solid #BFBFBF;
    }
  }

  .flexRow--container-product-availability{
    .flexRowContent--container-product-availability{
      display: flex;
      flex-direction: column;
    }
  }

  .flexRow--message-availability{
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .flexRowContent--container-quantity-and-buy-button{
    display: flex;
    flex-direction: column;

    :global(.vtex-flex-layout-0-x-stretchChildrenWidth){
      justify-content: flex-start;
    }

    :global(.vtex-button){
      :global(.vtex-button__label){
        display: inline-block;
        width: 56.7567%;
      }
    }
  }

  .flexRowContent--container-related-products-pdp{
    padding: 0 48px;
  }
}