feat: css do frete

react/components/Html/style.css

@@ -8,7 +8,7 @@
 [class*='html'] > [class*='button'] {
   width: 100%;
   height: 49px;
-  /* margin-right: 40px; */
   background: #000;
   border: #000;
+  border-radius: 0;
 }

styles/css/vtex.flex-layout.css

@@ -11,7 +11,7 @@
   padding: 0 40px;
 }
 :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-productImageTag) {
-  max-height: 664px !important;
+  max-height: none;
 }
 
 .flexColChild :global(.vtex-store-components-3-x-productDescriptionTitle) {
@@ -20,3 +20,8 @@
 .flexColChild :global(.vtex-store-components-3-x-container) {
   padding: 0 32px;
 }
+
+.flexRowContent {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}

styles/css/vtex.slider-layout.css

@@ -120,14 +120,17 @@
   display: none;
 }
 .sliderLayoutContainer .paginationDotsContainer {
+  align-items: center;
   bottom: 113px;
 }
 .sliderLayoutContainer .paginationDotsContainer .paginationDot {
   width: 10px;
   height: 10px;
   background-color: #000;
-  border: 0.5px solid #000;
 }
 .sliderLayoutContainer .paginationDotsContainer .paginationDot--isActive {
   background-color: #fff;
+  width: 17px !important;
+  height: 17px !important;
+  border: 0.5px solid #000;
 }

styles/css/vtex.store-components.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 0 - 600PX: Phone
 600 - 900px: Table portrait
@@ -54,11 +55,6 @@
   color: #929292;
   width: 774px;
 }
-.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::before {
-  content: "Digite seu e-mail";
-  font-size: 16px;
-  color: white;
-}
 .newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) {
   padding: 0;
 }
@@ -74,8 +70,22 @@
   line-height: 19px;
 }
 
-.productImageTag {
+.productImagesGallerySlide {
-  width: auto !important;
+  width: 100%;
+  height: 100%;
+}
+.productImagesGallerySlide .productImage {
+  width: 100%;
+  height: 100%;
+}
+.productImagesGallerySlide .productImage .productImageTag {
+  max-height: none !important;
+}
+@media (min-width: 1025px) {
+  .productImagesGallerySlide .productImage .productImageTag {
+    width: 100% !important;
+    height: fit-content;
+  }
 }
 
 .carouselGaleryThumbs :first-child {
@@ -87,6 +97,7 @@
 .carouselGaleryThumbs :first-child :first-child .productImagesThumb {
   width: 13.605%;
   height: fit-content !important;
+  max-height: 90px;
   margin: 0;
 }
 
@@ -105,30 +116,103 @@
   display: flex;
   flex-direction: column-reverse;
 }
-.skuSelectorContainer .frameAround,
+.skuSelectorContainer .frameAround {
-.skuSelectorContainer .skuSelectorInternalBox {
+  width: 43px;
+  height: 43px;
   border-radius: 1.5rem;
   z-index: 3;
   padding: 0;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItem {
-  height: 43px;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
-  width: 40px;
-  height: 40px;
-  bottom: -0.25rem;
-  top: 0rem;
-  left: 0rem;
-  right: -0.25rem;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .valueWrapper {
-  padding: 10px 11px;
-  width: 40px;
-  height: 40px;
-}
-.skuSelectorContainer .frameAround {
   border-color: #000;
+  top: -3%;
+  left: -1px;
+}
+.skuSelectorContainer .skuSelectorInternalBox {
+  border-radius: 50%;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName,
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue {
+  font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::before {
+  content: "OUTRAS CORES";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho {
+  margin-bottom: 10px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer {
+  margin: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName {
+  font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  content: "OUTROS TAMANHOS: ";
+  color: #929292;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList {
+  margin: 0;
+  margin-left: 0;
+  column-gap: 16px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
+  border-radius: 100%;
+  width: 40px;
+  height: 40px;
+  margin: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .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;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
+  border-radius: 100%;
+  width: 40px;
+  height: 40px;
+  border: 1px solid #989898;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross {
+  width: 30px;
+  height: 30px;
+  transform: rotate(274deg);
+  left: 4px;
+  top: 5px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .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);
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue {
+  color: #000000;
 }
 
 .shippingContainer {
@@ -139,6 +223,7 @@
 }
 .shippingContainer :global(.vtex-address-form__postalCode) {
   display: flex;
+  padding-bottom: 16px;
 }
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
   display: flex;
@@ -165,8 +250,19 @@
   border-radius: 0;
 }
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
   padding: 8px 0;
 }
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) {
+  position: absolute;
+  bottom: 0;
+}
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
   display: flex;
   position: absolute;
@@ -181,7 +277,7 @@
   display: flex;
   width: 49px;
   height: 49px;
-  margin-bottom: 5px;
+  margin-top: 11px;
   background: #000;
   border: 1px solid #000;
   border-radius: 0;
@@ -202,3 +298,139 @@
   align-items: center;
   color: #fff;
 }
+
+.shippingTable {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+.shippingTable .shippingTableHead {
+  display: flex;
+}
+.shippingTable .shippingTableHead .shippingTableRow {
+  display: flex;
+  gap: 62px;
+  margin-bottom: 15px;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
+  order: 2;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
+  font-size: 0;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before {
+  content: "FRETE";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 19px;
+}
+.shippingTable .shippingTableBody .shippingTableRow {
+  display: flex;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  align-items: center;
+  color: #afafaf;
+  margin-bottom: 15px;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
+  order: 2;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
+  width: 108px;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
+  width: 95px;
+  margin-right: 32px;
+  padding: 0;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName .shippingTableLabel .shippingTableRadioBtn {
+  display: none;
+}
+
+.subscriberContainer .title {
+  font-size: 0;
+  margin-bottom: 0;
+  border: none;
+}
+.subscriberContainer .title::before {
+  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;
+}
+.subscriberContainer .subscribeLabel {
+  font-size: 0;
+}
+.subscriberContainer .subscribeLabel::before {
+  content: "Deseja saber quando estiver disponível?";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  display: flex;
+  align-items: center;
+  color: #868686;
+}
+.subscriberContainer .form .content {
+  position: relative;
+  display: flex;
+  height: 40px;
+  gap: 8px;
+}
+.subscriberContainer .form .content .input {
+  margin: 0;
+}
+.subscriberContainer .form .content .input :global(.vtex-input) :global(.vtex-input-prefix__group) {
+  border: 0.6px solid #989898;
+  border-radius: 0;
+}
+.subscriberContainer .form .content .input :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+  border-radius: 0;
+}
+.subscriberContainer .form .content .submit {
+  width: 100%;
+  position: absolute;
+  bottom: calc(-100% - 27px);
+  margin: 0 !important;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button) {
+  width: 100%;
+  background: #000;
+  border: 0.6px solid #000;
+  border-radius: 0;
+  color: #fff;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label) {
+  padding: 12px;
+  font-size: 0;
+}
+.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label)::before {
+  content: "avise-me";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-size: 18px;
+  line-height: 25px;
+  text-transform: uppercase;
+  padding: 12px;
+}

styles/css/vtex.tab-layout.css

@@ -11,7 +11,8 @@
   margin-bottom: 32px;
   display: flex;
   flex-direction: row;
-  column-gap: 197.5px;
+  justify-content: space-around;
+  padding: 0 40px;
 }
 .listContainer::after {
   content: "";

styles/sass/pages/product/vtex.flex-layout.scss

@@ -2,7 +2,8 @@
   padding: 0 40px;
 
   :global(.vtex-store-components-3-x-productImageTag) {
-    max-height: 664px !important;
+    // max-height: 664px !important;
+    max-height: none;
   }
 }
 
@@ -15,3 +16,8 @@
     padding: 0 32px;
   }
 }
+
+.flexRowContent {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}

styles/sass/pages/product/vtex.slider-layout.scss

@@ -130,17 +130,20 @@
     }
   }
   .paginationDotsContainer {
+    align-items: center;
     bottom: 113px;
 
     .paginationDot {
       width: 10px;
       height: 10px;
       background-color: #000;
-      border: 0.5px solid #000;
     }
 
     .paginationDot--isActive {
       background-color: #fff;
+      width: 17px !important;
+      height: 17px !important;
+      border: 0.5px solid #000;
     }
   }
 }

styles/sass/pages/product/vtex.store-components.scss

@@ -44,11 +44,6 @@
               line-height: 25px;
               color: #929292;
               width: 774px;
-              &::before {
-                content: 'Digite seu e-mail';
-                font-size: 16px;
-                color: white;
-              }
             }
           }
         }
@@ -71,8 +66,22 @@
   }
 }
 
-.productImageTag {
+.productImagesGallerySlide {
-  width: auto !important;
+  width: 100%;
+  height: 100%;
+
+  .productImage {
+    width: 100%;
+    height: 100%;
+
+    .productImageTag {
+      @media (min-width: 1025px) {
+        width: 100% !important;
+        height: fit-content;
+      }
+      max-height: none !important;
+    }
+  }
 }
 
 .carouselGaleryThumbs {
@@ -85,6 +94,7 @@
       .productImagesThumb {
         width: 13.605%;
         height: fit-content !important;
+        max-height: 90px;
         margin: 0;
       }
     }
@@ -108,36 +118,121 @@
   display: flex;
   flex-direction: column-reverse;
 
-  .frameAround,
+  .frameAround {
-  .skuSelectorInternalBox {
+    width: 43px;
+    height: 43px;
     border-radius: 1.5rem;
     z-index: 3;
     padding: 0;
+    border-color: #000;
+    top: -3%;
+    left: -1px;
+  }
+
+  .skuSelectorInternalBox {
+    border-radius: 50%;
+  }
+
+  .skuSelectorSubcontainer--cor {
+    .skuSelectorNameContainer {
+      .skuSelectorTextContainer {
+        .skuSelectorName,
+        .skuSelectorSelectorImageValue {
+          font-size: 0;
+        }
+        .skuSelectorName::before {
+          content: 'OUTRAS CORES';
+          font-family: 'Open Sans', sans-serif;
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 19px;
+          color: #929292;
+        }
+      }
+    }
   }
 
   .skuSelectorSubcontainer--tamanho {
-    .skuSelectorItem {
+    margin-bottom: 10px;
-      height: 43px;
-    }
 
-    .frameAround {
+    .skuSelectorNameContainer {
-      width: 40px;
+      margin: 0;
-      height: 40px;
 
-      bottom: -0.25rem;
+      .skuSelectorTextContainer {
-      top: 0rem;
+        .skuSelectorName {
-      left: 0rem;
+          font-size: 0;
-      right: -0.25rem;
+          &::after {
-    }
+            font-family: 'Open Sans', sans-serif;
-    .valueWrapper {
+            font-style: normal;
-      padding: 10px 11px;
+            font-weight: 400;
-      width: 40px;
+            font-size: 14px;
-      height: 40px;
+            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;
 
-  .frameAround {
+          .frameAround--sku-selector {
-    border-color: #000;
+            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;
+            }
+          }
+        }
+      }
+    }
   }
 }
 
@@ -149,6 +244,7 @@
 
   :global(.vtex-address-form__postalCode) {
     display: flex;
+    padding-bottom: 16px;
 
     :global(.vtex-input) {
       display: flex;
@@ -179,9 +275,20 @@
         border-radius: 0;
 
         :global(.vtex-address-form-4-x-input) {
+          font-family: 'Open Sans', sans-serif;
+          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) {
@@ -201,7 +308,7 @@
     display: flex;
     width: 49px;
     height: 49px;
-    margin-bottom: 5px;
+    margin-top: 11px;
 
     background: #000;
     border: 1px solid #000;
@@ -229,3 +336,163 @@
     }
   }
 }
+
+.shippingTable {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  border: none;
+
+  .shippingTableHead {
+    display: flex;
+    .shippingTableRow {
+      display: flex;
+      gap: 62px;
+      margin-bottom: 15px;
+
+      font-family: 'Open Sans', sans-serif;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: #202020;
+      text-transform: uppercase;
+
+      .shippingTableHeadDeliveryEstimate {
+        order: 2;
+      }
+      .shippingTableHeadDeliveryPrice {
+        font-size: 0;
+      }
+      .shippingTableHeadDeliveryPrice::before {
+        content: 'FRETE';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 19px;
+      }
+    }
+  }
+
+  .shippingTableBody {
+    .shippingTableRow {
+      display: flex;
+
+      .shippingTableCell {
+        font-family: 'Open Sans', sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        align-items: center;
+        color: #afafaf;
+        margin-bottom: 15px;
+      }
+
+      .shippingTableCellDeliveryEstimate {
+        order: 2;
+      }
+      .shippingTableCellDeliveryPrice {
+        width: 108px;
+      }
+      .shippingTableCellDeliveryName {
+        width: 95px;
+        margin-right: 32px;
+        padding: 0;
+
+        .shippingTableLabel {
+          .shippingTableRadioBtn {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+.subscriberContainer {
+  .title {
+    font-size: 0;
+    margin-bottom: 0;
+    border: none;
+  }
+  .title::before {
+    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;
+  }
+  .subscribeLabel {
+    font-size: 0;
+  }
+  .subscribeLabel::before {
+    content: 'Deseja saber quando estiver disponível?';
+    font-family: 'Open Sans', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    display: flex;
+    align-items: center;
+
+    color: #868686;
+  }
+  .form {
+    .content {
+      position: relative;
+      display: flex;
+      height: 40px;
+      gap: 8px;
+
+      .input {
+        margin: 0;
+
+        :global(.vtex-input) {
+          :global(.vtex-input-prefix__group) {
+            border: 0.6px solid #989898;
+            border-radius: 0;
+
+            :global(.vtex-styleguide-9-x-input) {
+              border-radius: 0;
+            }
+          }
+        }
+      }
+      .submit {
+        width: 100%;
+        position: absolute;
+        bottom: calc(-100% - 27px);
+        margin: 0 !important;
+
+        :global(.vtex-button) {
+          width: 100%;
+          background: #000;
+          border: 0.6px solid #000;
+          border-radius: 0;
+          color: #fff;
+
+          :global(.vtex-button__label) {
+            padding: 12px;
+            font-size: 0;
+          }
+          :global(.vtex-button__label)::before {
+            content: 'avise-me';
+            font-family: 'Open Sans', sans-serif;
+            font-style: normal;
+            font-size: 18px;
+            line-height: 25px;
+            text-transform: uppercase;
+            padding: 12px;
+          }
+        }
+      }
+    }
+  }
+}

styles/sass/pages/product/vtex.tab-layout.scss

@@ -2,7 +2,10 @@
   margin-bottom: 32px;
   display: flex;
   flex-direction: row;
-  column-gap: 197.5px;
+  justify-content: space-around;
+  padding: 0 40px;
+  // column-gap: 197.5px;
+
   &::after {
     content: '';
     background-color: #bfbfbf;