challenge-vtex-io-carlos-winter/styles/sass/pages/product/vtex.store-components.scss

.newsletter {
  background: black;
  .container {
    .form {
      .label {
        font-size: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        &::before {
          content: "Assine nossa newsletter";
          font-size: 24px;
          font-family: "Open Sans", sans-serif;
          font-style: normal;
          font-weight: 400;
          line-height: 38px;
          color: #ffffff;
        }
        &::after {
          content: "Receba ofertas e novidades por e-mail";
          white-space: pre;
          font-family: "Open Sans", sans-serif;
          font-style: normal;
          font-weight: 400;
          font-size: 18px;
          line-height: 25px;
          color: #929292;
          @media (max-width: 350px) {
            white-space: unset;
          }
        }
      }
      .inputGroup {
        display: flex;
        justify-content: center;
        :global(.vtex-input) {
          width: 686px;
          @media (max-width: 1024px) {
            width: 100%;
          }
          :global(.vtex-input-prefix__group) {
            border: none;
            border-bottom: 1px #929292 solid;
            border-radius: 0;
            :global(.vtex-styleguide-9-x-input) {
              background: black;
              font-family: "Open Sans", sans-serif;
              font-style: normal;
              font-weight: 400;
              font-size: 18px;
              line-height: 25px;
              color: #929292;
              width: 774px;
              &::before {
                content: "Digite seu e-mail";
                font-size: 16px;
                color: white;
              }
            }
          }
        }
        :global(.vtex-store-components-3-x-buttonContainer) {
          padding: 0;
          :global(.vtex-button) {
            width: 88px;
            background: black;
            border: none;
            border-bottom: 3px gray solid;
            border-radius: 0;
            font-family: "Open Sans", sans-serif;
            font-style: normal;
            font-weight: 700;
            font-size: 14px;
            line-height: 19px;
          }
        }
      }
    }
  }
}
.productBrand {
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  line-height: 34px;
  margin-bottom: 8px;
  float: right;
  color: #575757;
}
.productImageTag {
  object-fit: unset !important;
  max-height: 100% !important;
  width: 100%;
}
:global(.vtex-store-components-3-x-productImageTag--zoom) {
  display: none;
}
:global(.vtex-stack-layout-0-x-stackItem) {
  min-height: unset;
}

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

.skuSelectorSubcontainer--tamanho {
  margin-bottom: 10px;
  .skuSelectorNameContainer {
    margin: 0;
    .skuSelectorTextContainer {
      .skuSelectorName {
        font-size: 0;
        &::after {
          font-family: "Open Sans";
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          line-height: 19px;
          content: "OUTROS TAMANHOS: ";
          color: #929292;
        }
      }
    }
    .skuSelectorOptionsList {
      margin: 0;
      margin-left: 0;
      column-gap: 16px;
      .skuSelectorItem {
        border-radius: 100%;
        width: 40px;
        height: 40px;
        margin: 0;
        // border: 1px solid #989898;
        .frameAround--sku-selector {
          border-color: #000000;
          border-width: 2px;
          width: 40px;
          height: 40px;
          border-radius: 24px;
          top: 0;
          bottom: 0;
          right: 0;
          left: 0;
          z-index: 5;
          margin: 0 auto;
          font-weight: 400;
          font-size: 14px;
          line-height: 19px;
        }
        .skuSelectorInternalBox {
          border-radius: 100%;
          width: 40px;
          height: 40px;
          border: 1px solid #989898;
          .diagonalCross {
            width: 30px;
            height: 30px;
            transform: rotate(274deg);
            left: 4px;
            top: 5px;
          }
          .skuSelectorItemTextValue {
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            font-weight: 400;
            font-size: 14px;
            line-height: 19px;
            color: rgba(185, 185, 185, 0.6);
          }
        }
      }
      .skuSelectorItem--selected {
        .skuSelectorInternalBox {
          .skuSelectorItemTextValue {
            color: #000000;
          }
        }
      }
    }
  }
}

.skuSelectorSubcontainer--cor {
  .skuSelectorNameContainer {
    margin: 0;
    .skuSelectorTextContainer {
      .skuSelectorName,
      .skuSelectorNameSeparator,
      .skuSelectorSelectorImageValue {
        font-size: 0;
      }
      &::after {
        font-family: "Open Sans";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 19px;
        content: "OUTRAS CORES:";

        color: #929292;
      }
    }
    .skuSelectorOptionsList {
      margin: 0;
      .skuSelectorItem--sku-selector {
        .frameAround--sku-selector {
          border: 2px solid #000000;
          border-radius: 24px;
          z-index: 5;
        }
        .skuSelectorInternalBox {
          border-radius: 24px;
        }
      }
    }
  }
}
.shippingContainer {
  position: relative;
}

:global(.vtex-tab-layout-0-x-contentContainer) {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px 32px;
  gap: 32px;
  .productImagesContainer {
    width: 50%;
  }
  .productDescriptionContainer {
    width: 50%;
    .productDescriptionTitle {
      font-family: "Open Sans";
      font-style: normal;
      font-weight: 400;
      font-size: 24px;
      line-height: 32px;
      color: #575757;

      @media (min-width: 2560px) {
        font-size: 32px;
      }
    }
    .productDescriptionText {
      font-family: "Open Sans";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 22px;

      @media (min-width: 2560px) {
        font-size: 18px;
        line-height: 25px;
      }

      color: #929292;
      :first-child {
        @media (min-width: 2560px) {
          margin: 0;
        }
      }
    }
  }
}
// .swiper-container-initialized {
//   .swiper-wrapper {
.carouselGaleryThumbs {
  margin-top: 16px;
  @media (max-width: 639px) {
    display: block;
  }
  :first-child {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
    :first-child {
      .productImagesThumb {
        height: 90px !important;
        width: 90px !important;
        margin-bottom: 0;
        .figure {
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          padding: 0px;
          gap: 16px;
          .thumbImg {
            height: 90px;
            width: 90px;
            border-radius: 8px;
          }
        }
      }
    }
  }
}
.shippingContainer {
  display: flex;
  margin: 0;
  align-items: center;
  position: relative;

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

    @media (max-width: 540px) {
      width: calc(100% - 47px);
      flex-direction: column;
    }

    :global(.vtex-input) {
      display: flex;
      flex-direction: column;

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

      :global(.vtex-input__label)::before {
        content: "CALCULAR FRETE:";

        font-family: "Open Sans", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 19px;
        color: #929292;
      }

      :global(.vtex-input-prefix__group) {
        @media (max-width: 540px) {
          width: 100%;
        }
        width: 231px;
        height: 49px;
        margin: 0;
        padding: 16.5px 0 16.5px 16px;

        border: 1px solid #cccccc;
        border-radius: 0;

        :global(.vtex-address-form-4-x-input) {
          font-family: "Open Sans";
          font-style: normal;
          font-weight: 400;
          font-size: 12px;
          line-height: 16px;
          display: flex;
          align-items: center;
          padding: 8px 0;
        }
      }
      :global(.vtex-input__error) {
        position: absolute;
        bottom: 0;
      }
    }

    :global(.vtex-address-form__postalCode-forgottenURL) {
      display: flex;
      position: absolute;
      padding: 0;
      left: 312px;
      top: 41.5px;

      @media (max-width: 540px) {
        margin-top: 8px;
        margin-right: -49px;
        justify-content: right;
        position: static;
      }

      :last-child {
        color: #000;
        line-height: normal;
        :last-child {
          display: none;
        }
      }
    }
  }

  :global(.vtex-button) {
    display: flex;
    width: 49px;
    height: 49px;
    align-self: end;
    background: #000;
    border: 1px solid #000;
    border-radius: 0;
    cursor: pointer;

    @media (max-width: 540px) {
      align-self: center;
      bottom: 0;
    }

    :global(.vtex-button__label) {
      padding: 0;
      font-size: 0;
    }

    :global(.vtex-button__label)::before {
      content: "OK";
      font-family: "Open Sans", sans-serif;
      font-style: normal;
      font-weight: 600;
      font-size: 14px;
      line-height: 19px;

      display: flex;
      align-items: center;

      color: #fff;
    }
  }
}

.shippingTable {
  border: 0;
  width: auto;
  .shippingTableHead {
    display: block;
    .shippingTableRow {
      display: grid;
      grid-template-columns: 103px 56px 136px;
      grid-template-areas: "A B C";
      column-gap: 32px;
      .shippingTableHeadDeliveryName,
      .shippingTableHeadDeliveryEstimate,
      .shippingTableHeadDeliveryPrice {
        font-weight: 400;
        font-size: 14px;
        line-height: 19px;
        color: #202020;
        text-transform: uppercase;
        padding: 0;
      }
      .shippingTableHeadDeliveryName {
        text-align: left;
        grid-area: A;
      }
      .shippingTableHeadDeliveryEstimate {
        grid-area: C;
        text-align: left;
      }
      .shippingTableHeadDeliveryPrice {
        text-align: left;
        grid-area: B;
        font-size: 0;
        &::after {
          content: "Valor";
          font-size: 14px;
        }
      }
    }
  }
  .shippingTableBody {
    .shippingTableRow {
      display: grid;
      grid-template-columns: 103px 56px 136px;
      grid-template-areas: "A B C";
      column-gap: 32px;
      margin-top: 15px;
      :nth-child(n) {
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: #afafaf;
      }
      .shippingTableCell {
        padding: 0;
      }
      .shippingTableRadioBtn {
        display: none;
      }
      .shippingTableCellDeliveryName {
        grid-area: A;
        text-transform: capitalize;
      }
      .shippingTableCellDeliveryEstimate {
        white-space: nowrap;
        grid-area: C;
      }
      .shippingTableCellDeliveryPrice {
        grid-area: B;
      }
    }
  }
}

@media screen and (max-width: 1024px) {
  :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
    width: 100% !important;
  }

  .productBrand {
    float: left;
  }

  .productDescriptionTitle {
    font-size: 20px !important;
    line-height: 32px !important;
  }

  .productDescriptionText {
    font-size: 14px !important;
    line-height: 19px !important;
  }

  .container {
    .form {
      margin: 0 16px;
      max-width: 992px;
      .label {
        width: 100%;

        &::after {
          font-size: 16px !important;
          line-height: 22px !important;
        }
      }

      .inputGroup {
        width: 100%;

        :global(.vtex-styleguide-9-x-input) {
          font-size: 12px !important;
          line-height: 16px !important;
          width: 100% !important;
        }
      }
    }
  }
}

:global(.vtex-store-components-3-x-subscriberContainer) {
  :global(.vtex-store-components-3-x-title) {
    font-size: 0;
    margin: 0;
    &::after {
      content: "Produto indisponível";
      font-family: "Open Sans", "sans-serif";
      font-style: normal;
      font-weight: 700;
      font-size: 14px;
      line-height: 19px;
      display: flex;
      align-items: center;
      color: #868686;
    }
  }
  :global(.vtex-store-components-3-x-subscribeLabel) {
    font-size: 0;
    margin: 0;
    &::before {
      content: "Deseja saber quando estiver disponível?";
      font-family: "Open Sans";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 19px;
      display: flex;
      align-items: center;
      color: #868686;
    }
  }
  :global(.vtex-store-components-3-x-form) {
    margin: 0;
    :global(.vtex-store-components-3-x-content) {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-column-gap: 8px;
      grid-row-gap: 13px;
      @media (min-width: 2560px) {
        min-width: 765px;
      }
      :global(.vtex-store-components-3-x-inputName) {
        grid-area: 1 / 1 / 2 / 2;
        margin: 0 !important;
        :global(.vtex-input) {
          :global(.vtex-input-prefix__group) {
            :global(.vtex-styleguide-9-x-input) {
              font-family: "Open Sans";
              font-style: normal;
              font-weight: 400;
              font-size: 12px;
              line-height: 16px;
              display: flex;
              align-items: center;
              color: #989898;
            }
          }
        }
      }
      :global(.vtex-store-components-3-x-inputEmail) {
        grid-area: 1 / 2 / 2 / 3;
        margin: 0 !important;
        :global(.vtex-input) {
          :global(.vtex-input-prefix__group) {
            :global(.vtex-styleguide-9-x-input) {
              font-family: "Open Sans";
              font-style: normal;
              font-weight: 400;
              font-size: 12px;
              line-height: 16px;
              display: flex;
              align-items: center;
              color: #989898;
            }
          }
        }
      }
      :global(.vtex-store-components-3-x-submit) {
        grid-area: 2 / 1 / 3 / 3;
        :global(.vtex-button) {
          font-size: 0;
          width: 100%;
        }
        :global(.vtex-button)::before {
          content: "AVISE-ME";
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          gap: 10px;
          height: 49px;
          background: #000000;
          font-weight: 600;
          font-size: 18px;
          line-height: 25px;
          color: #ffffff;
        }
      }
    }
  }
}