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;
  }

  .productImagesGallerySlide {
    width: 100% !important;
  }


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


  .productNameContainer {
    font-size: 20px;
    line-height: 34px;
    color: #575757;
    display: flex;
    justify-content: flex-end;
  }

  .carouselGaleryThumbs {

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


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

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


    }



  }
  @include mq (sm, max) {
    .carouselGaleryThumbs{
display: block;
    }
  }
}

// sku-selector

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


  .skuSelectorSubcontainer--cor {


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


    .skuSelectorName {

      font-size: 0;

      margin-left: 16px;

      &::after {

        visibility: visible;
        display: block;
        content: "OUTRAS CORES:";
        font-size: 14px;


      }


    }

    .skuSelectorSelectorImageValue,
    .skuSelectorNameSeparator {
      display: none;
    }

    .frameAround {

      border-radius: 30px;

    }

    .skuSelectorItemImageValue,
    .skuSelectorInternalBox {

      border-radius: 21px;


    }

  }

  .skuSelectorSubcontainer--tamanho {

    .skuSelectorName {

      font-size: 0;

      margin-left: 16px;

      &::after {

        visibility: visible;
        display: block;
        content: "OUTROS TAMANHOS:";
        font-size: 14px;


      }

    }

    .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 {

  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;





   }


}

.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

.productDescriptionTitle {
  font-size: 24px;
  line-height: 32px;
  font-family: $font-open;
  padding-left: 32px;
  @include mq (md, max) {
    padding-left: 0;
    padding-top: 16px;
  }
}

.productDescriptionText {

  font-size: 0;

  &::after {
    position: absolute;
    font-size: 16px;
    line-height: 19px;
    display: block;
    color: $color-gray6;
    padding-left: 32px;
    content: "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.";
    @include mq (md, max) {
      padding: 0px 21px 0px 0;
    // border-bottom: 1px solid $color-gray7;



    }


  }


}

// tab-descrição-fim