store/blocks/pdp/product.jsonc

@@ -312,7 +312,7 @@
     "props": {
       "itemsPerPage": {
         "desktop": 4,
-        "tablet": 1,
+        "tablet": 3,
         "phone": 1
       },
       "infinite": true,

styles/css/vtex.flex-layout.css

@@ -9,9 +9,22 @@
 /* Media Query M3 */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
+.flexRowContent {
+  margin: 8px 0 0 0px;
+  padding: 0;
+}
+
+:global(.vtex-stack-layout-0-x-stackItem) .flexRow {
+  margin: 0;
+}
+
+.flexRow--buyButton .flexRowContent {
+  margin: 0 0 0 0 !important;
+  padding: 0;
+}
+
 .flexRowContent--cart {
   display: flex;
-  align-items: center;
   justify-content: center;
   margin-bottom: 25px;
 }
@@ -30,3 +43,10 @@
   line-height: 25px;
   color: #ffffff;
 }
+
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .flexRowContent {
+    display: flex;
+    flex-direction: column;
+  }
+}

styles/css/vtex.product-price.css

@@ -1,79 +1,27 @@
-.listPrice {
+/*
-  color: #727273;
+0 - 600PX: Phone
-  margin-bottom: .25rem;
+600 - 900px: Table portrait
-  font-size: 1rem;
+900 - 1200px: Tablet landscape
-}
+[1200 - 1800] is where our nortal styles apply
-
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Grid breakpoints */
 .sellingPrice {
-  color: #3f3f40;
+  font-family: "Open Sans";
-  font-size: 1.25rem;
+  font-style: normal;
-}
-
-.sellingPriceValue {
-  font-size: 2.25rem;
   font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: #000000;
 }
 
 .installments {
-  color: #727273;
+  font-family: "Open Sans";
-  margin-bottom: 1rem;
+  font-style: normal;
-}
+  font-weight: 700;
-
+  font-size: 16px;
-.savings {
+  line-height: 22px;
-  font-weight: 500;
+  color: #929292;
-  color: #79B03A;
-}
-
-.sellingPriceValue--summary {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #2E2E2E;
-}
-
-.savings--summary {
-  background: #8BC34A;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-}
-
-.savings-discount--summary {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.listPrice--summary {
-  margin-bottom: 0.25rem;
-  font-size: .875rem;
-}
-
-.installments--summary {
-  margin-bottom: 2rem;
-  font-size: 0.875rem;
-}
-
-.savings--summaryPercentage {
-  background: #0f3e99;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-}
-
-.savingsPercentage--summaryPercentage {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
 }

styles/css/vtex.product-summary.css

@@ -1,42 +1,10 @@
-.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
+/*
-  border-radius: 50%;
+0 - 600PX: Phone
-}
+600 - 900px: Table portrait
-
+900 - 1200px: Tablet landscape
-.container :global(.vtex-modal-layout-0-x-triggerContainer) {
+[1200 - 1800] is where our nortal styles apply
-  opacity: 0;
+1800px + : Big desktop
-  transition: opacity 200ms ease-in-out;
+*/
-}
+/* Media Query M3 */
-
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
-.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
+/* Grid breakpoints */
-  opacity: 1;
-}
-
-@media screen and (max-width: 40em) {
-  .container :global(.vtex-modal-layout-0-x-triggerContainer) {
-    display: none;
-  }
-}
-
-.nameContainer {
-  justify-content: start;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.brandName {
-  font-weight: 600;
-  font-size: 18px;
-  color: #2E2E2E;
-}
-
-.container {
-  text-align: start;
-}
-
-.imageContainer {
-  text-align: center;
-}
-
-.image {
-  border-radius: 0.25rem;
-}

styles/css/vtex.store-components.css

@@ -10,20 +10,22 @@
 /* Grid breakpoints */
 .container {
   max-width: 100%;
-  margin: 0 0 0 0 !important;
+  margin: 0 40px 0 40px !important;
 }
 
 .productImageTag {
   max-height: none !important;
 }
 
-.thumbImg {
+/*
-  width: 86%;
+.productImagesGallerySlide {
-  margin: 0;
+  .productImageTag {
+    width: 800px;
+  }
 }
-
+*/
 .productImagesThumb {
-  height: auto !important;
+  margin-right: 16px;
 }
 
 .productBrand {
@@ -159,6 +161,99 @@
   top: 8px;
 }
 
+.shippingTableRadioBtn {
+  display: none;
+}
+
+.shippingTableHead {
+  display: grid;
+  position: relative;
+  right: 60px;
+}
+
+.shippingTable {
+  border: none;
+  grid-template-columns: none !important;
+}
+
+.shippingTableRow {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+
+.shippingTableCellDeliveryName {
+  order: 0;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+}
+
+.shippingTableCellDeliveryPrice {
+  order: 1;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+}
+
+.shippingTableCellDeliveryEstimate {
+  order: 2;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+}
+
+.shippingTableHeadDeliveryName {
+  order: 0;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+}
+
+.shippingTableHeadDeliveryPrice {
+  order: 1;
+  font-size: 0;
+}
+.shippingTableHeadDeliveryPrice::before {
+  content: "FRETE";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+}
+
+.shippingTableHeadDeliveryEstimate {
+  order: 2;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+}
+
 .productDescriptionContainer .productDescriptionTitle {
   font-family: "Open Sans";
   font-style: normal;
@@ -176,23 +271,27 @@
   color: #929292;
 }
 
+/*
 .newsletter {
-  margin-top: 64px;
-}
-.newsletter .container {
-  display: flex;
-  height: 175px;
-  padding: 0 0 0 0;
   background: black;
+  border-bottom: 1px solid #ffffff;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .container {
+    display: flex;
+    //height: 175px;
+    //padding: 0 0 0 0;
+    //background: black;
     align-items: center;
     justify-content: center;
-}
+    .label {
-.newsletter .container .label {
       display: flex;
       flex-direction: column;
       font-size: 0;
-}
+      &::before {
-.newsletter .container .label::before {
         content: "Assine nossa Newsletter";
         font-family: "Open Sans";
         font-style: normal;
@@ -201,8 +300,8 @@
         line-height: 38px;
         text-align: center;
         color: #ffffff;
-}
+      }
-.newsletter .container .label::after {
+      &::after {
         content: "Receba ofertas e novidades por e-mail";
         font-family: "Open Sans";
         font-style: normal;
@@ -211,8 +310,9 @@
         line-height: 25px;
         text-align: center;
         color: #929292;
-}
+      }
-.newsletter .container :global(.vtex-input-prefix__group) {
+    }
+    :global(.vtex-input-prefix__group) {
       display: flex;
       justify-content: center;
       width: 774px;
@@ -220,23 +320,23 @@
       border-right: none;
       border-left: none;
       border-bottom: 1px solid #929292;
-}
+    }
-.newsletter .container :global(.vtex-styleguide-9-x-input) {
+    :global(.vtex-styleguide-9-x-input) {
       background: transparent;
       padding: 0 0 0 0;
-}
+    }
-.newsletter .container :global(.vtex-button) {
+    :global(.vtex-button) {
       position: relative;
       left: 145px;
       background: transparent;
       border: none;
       border-radius: 0;
       border-bottom: 3px solid #bfbfbf;
-}
+      &:hover {
-.newsletter .container :global(.vtex-button):hover {
         border-bottom: 5px solid #bfbfbf;
-}
+      }
-.newsletter .container :global(.vtex-button) :global(.vtex-button__label) {
+
+      :global(.vtex-button__label) {
         font-family: "Open Sans";
         font-style: normal;
         font-weight: 700;
@@ -246,4 +346,64 @@
         color: #ffffff;
         border: 1px solid #000000;
         text-transform: uppercase;
+      }
+    }
+  }
+}
+*/
+.newsletter {
+  background: black;
+  border-bottom: 1px solid #ffffff;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.label {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  text-align: center;
+  color: #ffffff;
+  border: none;
+}
+
+.label::after {
+  content: "Receba ofertas e novidades por e-mail";
+  font-family: sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+  color: #929292;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.productDescriptionTitle {
+  font-family: sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: #575757;
+  margin-bottom: 8px;
+}
+
+.productDescriptionText {
+  text-align: left;
+}
+
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+  }
 }

styles/css/vtex.tab-layout.css

@@ -9,7 +9,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
 .container {
-  margin-bottom: 16px;
+  padding: 0 40px 16px 40px;
 }
 
 .listContainer {
@@ -62,3 +62,19 @@
   flex-direction: row;
   gap: 32px;
 }
+
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .listContainer {
+    display: flex;
+    flex-direction: column;
+  }
+  .contentItem {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid #b9b9b9;
+    padding-bottom: 16px;
+  }
+  .productDescriptionText {
+    text-align: justify;
+  }
+}

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

@@ -1,6 +1,24 @@
+.flexRow {
+}
+.flexRowContent {
+  margin: 8px 0 0 0px;
+  padding: 0;
+}
+:global(.vtex-stack-layout-0-x-stackItem) {
+  .flexRow {
+    margin: 0;
+  }
+}
+.flexRow--buyButton {
+  .flexRowContent {
+    margin: 0 0 0 0 !important;
+    padding: 0;
+  }
+}
+
 .flexRowContent--cart {
   display: flex;
-  align-items: center;
+
   justify-content: center;
   margin-bottom: 25px;
   .flexRow--buyButton {
@@ -21,3 +39,9 @@
     }
   }
 }
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .flexRowContent {
+    display: flex;
+    flex-direction: column;
+  }
+}

styles/sass/pages/product/vtex.product-price.scss

@@ -0,0 +1,17 @@
+.sellingPrice {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: #000000;
+}
+
+.installments {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}

styles/sass/pages/product/vtex.product-summary.scss

@@ -0,0 +1,2 @@
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+}

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

@@ -10,3 +10,5 @@
   display: flex;
   justify-content: center;
 }
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+}

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

@@ -1,20 +1,22 @@
 .container {
   max-width: 100%;
-  margin: 0 0 0 0 !important;
+  margin: 0 40px 0 40px !important;
 }
-
 .productImageTag {
   max-height: none !important;
 }
-
+/*
-.thumbImg {
+.productImagesGallerySlide {
-  width: 86%;
+  .productImageTag {
-  margin: 0;
+    width: 800px;
+  }
 }
+*/
 
 .productImagesThumb {
-  height: auto !important;
+  margin-right: 16px;
 }
+
 .productBrand {
   display: flex;
   justify-content: flex-end;
@@ -159,7 +161,92 @@
     top: 8px;
   }
 }
+.shippingTableRadioBtn {
+  display: none;
+}
+.shippingTableHead {
+  display: grid;
+  position: relative;
+  right: 60px;
+}
+.shippingTable {
+  //display: grid;
+  border: none;
+  //flex-direction: column;
+  grid-template-columns: none !important;
+}
+.shippingTableRow {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+.shippingTableCellDeliveryName {
+  order: 0;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+}
+.shippingTableCellDeliveryPrice {
+  order: 1;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+}
+.shippingTableCellDeliveryEstimate {
+  order: 2;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+}
 
+.shippingTableHeadDeliveryName {
+  order: 0;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+}
+.shippingTableHeadDeliveryPrice {
+  order: 1;
+  font-size: 0;
+  &::before {
+    content: "FRETE";
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 19px;
+    color: #202020;
+    text-transform: uppercase;
+  }
+}
+.shippingTableHeadDeliveryEstimate {
+  order: 2;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+}
 //Estilização da descrição do produto
 .productDescriptionContainer {
   .productDescriptionTitle {
@@ -179,14 +266,20 @@
     color: #929292;
   }
 }
-
+/*
 .newsletter {
-  margin-top: 64px;
+  background: black;
+  border-bottom: 1px solid #ffffff;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   .container {
     display: flex;
-    height: 175px;
+    //height: 175px;
-    padding: 0 0 0 0;
+    //padding: 0 0 0 0;
-    background: black;
+    //background: black;
     align-items: center;
     justify-content: center;
     .label {
@@ -252,3 +345,57 @@
     }
   }
 }
+*/
+.newsletter {
+  background: black;
+  border-bottom: 1px solid #ffffff;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.label {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  text-align: center;
+  color: #ffffff;
+  border: none;
+}
+.label::after {
+  content: "Receba ofertas e novidades por e-mail";
+  font-family: sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+  color: #929292;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.productDescriptionTitle {
+  font-family: sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: #575757;
+  margin-bottom: 8px;
+}
+
+.productDescriptionText {
+  text-align: left;
+}
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+  }
+}

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

@@ -1,5 +1,5 @@
 .container {
-  margin-bottom: 16px;
+  padding: 0 40px 16px 40px;
 }
 .listContainer {
   display: flex;
@@ -52,3 +52,18 @@
   flex-direction: row;
   gap: 32px;
 }
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .listContainer {
+    display: flex;
+    flex-direction: column;
+  }
+  .contentItem {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid #b9b9b9;
+    padding-bottom: 16px;
+  }
+  .productDescriptionText {
+    text-align: justify;
+  }
+}