challenge-vtex-io-ueber-james/styles/sass/pages/product/vtex.store-components.scss

.container {
  // margin: 0;
  // padding: 0;
  max-width: 100%;
  padding-left: 40px;
  padding-right: 40px;

  @include mq (md, max) {
    padding: 0;
  }
  @include mq (xl, min) {
    padding: 0;
  }

  .productImagesGallerySlide {
    width: 100% !important;
  }


  .productImageTag--main {
    max-height: 100% !important;
    max-width: 100% !important;
  }


  .productNameContainer {
    font-family: $font-open;
    font-weight: 300;
    font-size: 20px;
    line-height: 34px;

    color: $color-gray8;
    display: flex;
    justify-content: flex-end;
  }

  .carouselGaleryThumbs {

    gap: 16px;
    display: block !important;



    .productImagesThumb {
      max-width: 90px;
      width: 100%;
      margin-right: 16px;


    }

    .thumbImg {
      border-radius: 9px;
      height: 90px;
    }


  }

  @include mq (md, max) {
    .productNameContainer {
      justify-content: flex-start;

    }

  }

}

// sku-selector

.skuSelectorContainer {
  display: flex;
  flex-direction: column-reverse;


  .skuSelectorSubcontainer--cor {


    // order: 2;
    margin-bottom: 16px;


    .skuSelectorName {

      font-size: 0;

      margin-left: 16px;

      &::after {
        font-family: $font-open;
        font-size: 14px;
        font-weight: 400;
        line-height: 19px;
        visibility: visible;
        display: block;
        content: "OUTRAS CORES:";



      }


    }

    .skuSelectorSelectorImageValue,
    .skuSelectorNameSeparator {
      display: none;
    }

    .frameAround {

      border-radius: 30px;

    }

    .skuSelectorItemImageValue,
    .skuSelectorInternalBox {

      border-radius: 21px;


    }

  }

  .skuSelectorSubcontainer--tamanho {

    .skuSelectorName {

      font-size: 0;

      margin-left: 16px;

      &::after {
        font-family: $font-open;
        font-size: 14px;
        font-weight: 400;
        line-height: 19px;
        visibility: visible;
        display: block;
        content: "OUTROS TAMANHOS:";



      }

    }

    .frameAround {
      // border:3px solid $color-black2;
      width: 40px;
      height: 40px;
      border-radius: 30px;
      top: 0;
      left: 0;
      right: 0;
    }

    .skuSelectorInternalBox {

      margin: auto;
      padding: 0;
      width: 40px;
      height: 40px;
      border-radius: 30px;
    }

    .skuSelectorItemTextValue {


      padding: 0;
      margin: auto;
    }
  }

  .valueWrapper .skuSelectorItemTextValue {
    margin-right: 5px;
  }

  .frameAround {
    border-color: $color-black2;
    z-index: 2;

  }

  .diagonalCross {
    background-image: linear-gradient(to top left, transparent 44%, rgba(0, 0, 0, 0.3) 48%, currentColor 48%, currentColor 52%, transparent 52%);
    width: 36px;
    height: 17px;
    top: 11px;
  }

  .skuSelectorItem--skus--selected {

    .skuSelectorItemTextValue {

      font-size: 14px;
      line-height: 19px;
      font-weight: 400;
      color: $color-black2 !important;
      font-family: $font-open;


    }


  }

}


// sku-selector-fim

// cep

.shippingContainer {
  @include mq (cstm, max) {
    display: block;

    :global(.vtex-address-form__postalCode) {
      flex-direction: column;
    }

    :global(.vtex-address-form__postalCode-forgottenURL) {
      left: 0 !important;
      margin-top: 0 !important;
      display: flex;
      justify-content: flex-end;
    }

    :global(.vtex-button) {
      right: 0 !important;
      margin-top: 0 !important;
      left: 86%;
      bottom: 78px;
    }

  }

  display: flex;
  padding: 0;

  :global(.vtex-input-prefix__group) {

    height: 49px;


  }

  :global(.vtex-input__label) {

    font-size: 0;

    &::after {
      content: "CALCULAR FRETE:";
      font-size: 14px;
      line-height: 19px;
      font-weight: 400;
      font-family: $font-open;
    }

  }

  :global(.vtex-address-form__postalCode) {
    display: flex;
    padding: 0;
  }

  :global(.vtex-button) {
    font-size: 0;
    position: relative;
    right: 164px;
    width: 49px;
    height: 49px;
    margin-top: 27px;
    background-color: $color-black2;
    border: none;
    border-radius: 0;

    &::after {

      content: "OK";
      color: $color-white;
      font-size: 14px;
      line-height: 19px;
      font-weight: 600;

    }
  }

  :global(.vtex-button__label) {
    height: fit-content;


  }

  :global(.vtex-address-form__postalCode-forgottenURL) {
    position: relative;
    left: 20px;
    margin-top: 31px;

    :last-child {
      color: $color-black2;

    }

  }

  :global(.vtex__icon-external-link) {
    display: none;
  }


  @include mq (md, max) {
    margin-bottom: 16px;


  }

  @include mq (sm, max) {
    padding-top: 16px;
  }
}

.shippingTable {

  border: none;
  color: $color-black300;

  font-size: 14px;
  font-family: $font-open;
  font-weight: 400 !important;
  text-transform: uppercase;

  .shippingTableLabel {
    color: $color-gray9;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    line-height: 16px;
  }

  .shippingTableRadioBtn {
    padding: 0;
    display: flex;
    color: $color-gray9;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    line-height: 16px;
    min-width: 140px;
    padding-top: 15px;
    display: none;

  }

  .shippingTableHead {
    display: flex;
    padding-bottom: 15px;

    .shippingTableRow {
      position: relative;


      .shippingTableHeadDeliveryEstimate {

        position: absolute;
        top: 0;
        left: 300px;

      }

      .shippingTableHeadDeliveryPrice {
        position: absolute;
        top: 0;
        left: 163px;
        font-size: 0;

        &::after {

          position: absolute;
          content: "FRETE";
          visibility: visible;
          display: block;
          font-size: 14px;
        }
      }
    }
  }

  .shippingTableBody {

    .shippingTableRow {
      display: flex;
      padding-bottom: 15px;

      .shippingTableCellDeliveryName {

        width: 100px;
      }

      .shippingTableCellDeliveryEstimate {
        display: flex;
        order: 2;
        margin-left: 66px;
      }

      .shippingTableCellDeliveryPrice {
        margin-left: 58px;
      }
    }
  }


}

// cep-fim

//produto-indisponivel
.subscriberContainer {


  .title {
    font-size: 0;

    &::after {
      content: "Produto indisponível";
      font-size: 14px;
      color: $color-gray8;
      line-height: 19px;
      font-family: $font-open;
    }
  }

  .subscribeLabel {
    font-size: 0;

    &::after {
      content: "Deseja saber quando estiver disponível?";
      font-size: 14px;
      color: $color-gray8;
      font-family: $font-open;
    }

  }

  .form {
    .content {
      display: grid;
      grid-template-areas: " nome email"
        " submit submit";

      .inputName {
        grid-area: nome;

        @include mq (md, max) {
          margin-bottom: 0;
        }

      }

      .inputEmail {
        grid-area: email;

        @include mq (md, max) {
          margin-bottom: 0;
        }
      }

      .submit {
        grid-area: submit;
        width: 100%;

        :global(.vtex-button) {
          width: 100%;
          height: 49px;
        }

        :global(.vtex-button__label) {
          background-color: $color-black2;
          font-size: 0;

          &::after {
            text-transform: uppcase;
            content: "avise-me";
            font-size: 18px;
            color: $color-white;
            font-family: $font-open;

          }
        }

      }
    }
  }
}

//produto-indiponivel-fim

// tab-descrição
.productDescriptionContainer {
  @include mq (md, max) {
    margin-bottom: 16px;
  }




  .productDescriptionTitle {
    font-size: 24px;
    line-height: 32px;
    font-family: $font-open;
    padding-left: 32px;
    color: $color-gray8;
    font-weight: 400;

    @include mq (md, max) {
      padding-left: 0;
      padding-top: 16px;
    }
    @include mq (xl, min) {

      font-size: 32px;

  }

  }

  .productDescriptionText {



    font-family: $font-open;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    display: block;
    color: $color-gray6;
    padding-left: 32px;


    @include mq (md, max) {
      padding: 0px 0px 0px 0;

    }
    @include mq (xl, min) {

      font-size: 18px;

  }
  }

}


// tab-descrição-fim