challenge-vtex-io-nicolly-vieira/styles/sass/pages/product/vtex.store-components.scss

.newsletter {
  background: red;
}

.productImageTag--main {
  max-height: max-content !important;
}

.carouselGaleryThumbs {
  margin-top: 16px;

  @media screen and (max-width: 1024px) {
    margin-bottom: 32px;
    display: block;
  }

  .productImagesThumbActive,
  .productImagesThumb {
    margin: 0 16px 0 0;

    width: 90px !important;
    height: 90px;
    border-radius: 8px;
    overflow: hidden;
  }
}

.productNameContainer {
  margin-bottom: 8px;

  .productBrand {
    color: $gray-700;
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 34px;
  }
}

.skuSelectorContainer {
  display: flex;
  flex-direction: column-reverse;
  .skuSelectorSubcontainer--cor,
  .skuSelectorSubcontainer--tamanho {
    margin-bottom: 16px;
    .skuSelectorNameContainer {
      margin: 0;
      .skuSelectorTextContainer {
        .skuSelectorName,
        .skuSelectorNameSeparator,
        .skuSelectorSelectorImageValue {
          font-size: 0;
        }
      }
    }

    .skuSelectorOptionsList {
      margin: 0;
      gap: 16px;
      .skuSelectorItem {
        margin: 0;

        .skuSelectorInternalBox {
          .diagonalCross {
            background-image: none;

            &::after {
              content: "";
              display: block;
              width: 1px;
              height: 40px;
              background: $gray-300;

              transform: rotate(45deg);
              bottom: 0;
              left: 50%;
              // transform: translate(-50%, -50%);
              position: relative;
            }
          }

          .skuSelectorItem--selected {
            .frameAround {
              display: none;
            }

            .skuSelectorInternalBox {
              border: 2px solid $black;

              .valueWrapper {
                color: $black;
              }

              .diagonalCross {
                &::after {
                  background-color: $black;
                }
              }
            }
          }
        }
      }
    }
  }

  .skuSelectorSubcontainer--cor {
    .skuSelectorName {
      &::after {
        content: "Outras Cores:";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 19px;
        color: #929292;
        text-transform: uppercase;
      }
    }

    .skuSelectorOptionsList {
      .skuSelectorItem {
        width: 48px;
        height: 48px;

        .skuSelectorInternalBox {
          border: 1px solid $gray-450;
          border-radius: 50%;
          position: absolute;

          .diagonalCross {
            background-image: none;

            &::after {
              content: "";
              height: 48px;
            }
          }
        }
      }

      .skuSelectorItem--selected {
        .frameAround {
          display: none;
        }

        .skuSelectorInternalBox {
          border: 2px solid $black;

          .valueWrapper {
            color: $black;
          }

          .diagonalCross {
            &::after {
              background-color: $black;
            }
          }
        }
      }
    }
  }

  .skuSelectorSubcontainer--tamanho {
    .skuSelectorName {
      &::after {
        content: "OUTROS TAMANHOS:";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 19px;
        color: #929292;
        text-transform: uppercase;
      }
    }
    .skuSelectorOptionsList {
      .skuSelectorItem {
        width: 40px;
        height: 40px;

        .skuSelectorInternalBox {
          border: 1px solid $gray-600;
          border-radius: 50%;
          position: absolute;
          .valueWrapper {
            padding: 0;
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 19px;
            color: $gray-450;
          }

          // .diagonalCross {
          //   background-image: none;

          //   &::after {
          //     content: "";
          //     display: block;
          //     width: 1px;
          //     height: 40px;
          //     background: $gray-300;

          //     transform: rotate(45deg);
          //     bottom: 0;
          //     left: 50%;
          //     // transform: translate(-50%, -50%);
          //     position: relative;
          //   }
          // }
        }
      }

      .skuSelectorItem--selected {
        .frameAround {
          display: none;
        }

        .skuSelectorInternalBox {
          border: 2px solid $black;

          .valueWrapper {
            color: $black;
          }

          .diagonalCross {
            &::after {
              background-color: $black;
            }
          }
        }
      }
    }
  }
}

.shippingContainer {
  position: relative;
}
.shippingContainer :global(.vtex-input__label) {
  font-size: 0;

  &::after {
    content: "CALCULAR FRETE:";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    color: $gray-500;
  }
}

.shippingContainer :global(.vtex-input-prefix__group) {
  width: 280px;
  height: 49px;
  border: 1px solid #cccccc;
  border-radius: 0;

  @media screen and (max-width: 768px) {
    width: 100%;
  }
}

.shippingContainer :global(.vtex-address-form__postalCode) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  padding-bottom: 16px;
}
.shippingContainer :global(.vtex-input) {
  width: auto;

  @media screen and (max-width: 768px) {
    width: 100%;
  }
}
.shippingContainer :global(.vtex-input__suffix) {
  display: none;
}
.shippingContainer :global(.vtex-address-form-4-x-input) {
  padding: 16.5px 16px;
  margin: 0;
}
.shippingContainer :global(.vtex__icon-external-link) {
  display: none;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
  padding: 0 0 16.5px 32px;
  color: #000000 !important;

  @media screen and (max-width: 768px) {
    padding: 8px 0 0 0;
    text-align: end;
    width: 100%;
  }

  :last-child {
    color: #000000 !important;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    text-decoration-line: underline;

    @media screen and (max-width: 768px) {
      margin: 0;
    }
  }
}

.shippingContainer :global(.vtex-button) {
  width: auto;
  border: none;
  top: 27px;
  left: 234px;
  position: absolute;

  @media screen and (max-width: 768px) {
    right: 0;
    left: auto;
  }
}
.shippingContainer :global(.vtex-button__label) {
  font-size: 0;
  background-color: #000000;
  width: 49px;
  height: 49px;
  &::after {
    content: "OK";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;

    color: #ffffff;
  }
}

.shippingTable {
  margin: 0;
  padding: 0 0 16px 0;
  border: none;
  width: 326px;

  @media screen and (max-width: 768px) {
    width: 100%;
  }
}

.shippingTableRadioBtn {
  display: none;
}

.shippingTableHead {
  display: block;
}

.shippingTableLabel,
.shippingTableCell,
.currencyContainer {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #afafaf;
}

.shippingTableHeadDeliveryName,
.shippingTableHeadDeliveryEstimate,
.shippingTableHeadDeliveryPrice {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 19px;
  color: #202020;
  text-transform: uppercase;
  text-align: start;
}

.shippingTableRow {
  display: flex;
  gap: 32px;
}

.shippingTableCell {
  padding: 0;
}

.shippingTableHeadDeliveryName,
.shippingTableCellDeliveryName {
  width: 23.92638036%;
}

.shippingTableHeadDeliveryEstimate,
.shippingTableCellDeliveryEstimate {
  order: 3;
  width: 41.71779%;
}

.shippingTableCellDeliveryPrice,
.shippingTableHeadDeliveryPrice {
  width: 14.723926%;
}