feat: css mobile

react/components/Html/style.css

@@ -1,6 +1,5 @@
 [class*='html--Quantity-Button'] {
   display: flex;
-  align-items: center;
   gap: 10px;
   margin-bottom: 16px;
 }
@@ -22,3 +21,23 @@
   display: flex;
   flex-direction: column;
 }
+
+[class*='html--codigo'] {
+  margin-bottom: 16px;
+}
+
+[class*='html--product-installments'] {
+  margin-bottom: 8px;
+}
+
+@media (max-width: 576px) {
+  [class*='html--Quantity-Button'] {
+    flex-direction: column;
+  }
+}
+
+@media (min-width: 577px) {
+  [class*='html--Quantity-Button'] {
+    align-items: center;
+  }
+}

store/blocks/pdp/product.jsonc

@@ -130,7 +130,8 @@
 
   "html#product-installments": {
     "props": {
-      "testId": "product-installments"
+      "testId": "product-installments",
+      "blockClass": "product-installments"
     },
     "children": ["product-installments"]
   },

styles/css/vtex.flex-layout.css

@@ -16,6 +16,9 @@
     flex-direction: column;
   }
 }
+:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-carouselContainer) {
+  margin-bottom: 32px;
+}
 :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-productImageTag) {
   max-height: none;
 }
@@ -30,7 +33,20 @@
   display: flex;
 }
 
+@media (max-width: 1024px) {
+  .flexColChild--image-description :global(.vtex-store-components-3-x-imageElement) {
+    width: 100%;
+  }
+}
+
 .flexRowContent {
   margin-bottom: 0;
   padding-bottom: 0;
 }
+
+@media (max-width: 1024px) {
+  .stretchChildrenWidth {
+    width: 100% !important;
+    padding: 0;
+  }
+}

styles/css/vtex.product-identifier.css

@@ -9,7 +9,7 @@
 /* Grid breakpoints */
 .product-identifier {
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
   font-family: "Open Sans", sans-serif;
   font-style: normal;
   font-weight: 400;
@@ -18,6 +18,11 @@
   text-align: right;
   color: rgba(146, 146, 146, 0.48);
 }
+@media (min-width: 1025px) {
+  .product-identifier {
+    justify-content: flex-end;
+  }
+}
 .product-identifier .product-identifier__label,
 .product-identifier .product-identifier__separator {
   display: none;

styles/css/vtex.store-components.css

@@ -92,22 +92,30 @@
   }
 }
 
-.carouselGaleryThumbs :first-child {
+.carouselGaleryThumbs {
-  height: 90px;
+  width: 47.67%;
+}
+@media (min-width: 1025px) {
+  .carouselGaleryThumbs {
+    width: 68.02%;
+  }
 }
 .carouselGaleryThumbs :first-child :first-child {
   gap: 16px !important;
 }
 .carouselGaleryThumbs :first-child :first-child .productImagesThumb {
-  width: 13.605%;
   height: fit-content !important;
   max-height: 90px;
   margin: 0;
 }
+.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg {
+  border-radius: 8px;
+  min-height: 90px;
+}
 
 .productBrand {
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
   font-family: "Open Sans", sans-serif;
   font-style: normal;
   font-weight: 300;
@@ -115,10 +123,16 @@
   line-height: 34px;
   color: #575757;
 }
+@media (min-width: 1025px) {
+  .productBrand {
+    justify-content: flex-end;
+  }
+}
 
 .skuSelectorContainer {
   display: flex;
   flex-direction: column-reverse;
+  margin: 16px 0;
 }
 .skuSelectorContainer .frameAround {
   width: 43px;
@@ -133,12 +147,18 @@
 .skuSelectorContainer .skuSelectorInternalBox {
   border-radius: 50%;
 }
+.skuSelectorContainer .skuSelectorSubcontainer--cor {
+  margin: 0;
+}
 .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer {
   margin: 0;
 }
 .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList {
   margin-left: 0 !important;
 }
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
+  margin: 0;
+}
 .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName,
 .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue {
   font-size: 0;
@@ -235,6 +255,11 @@
   display: flex;
   padding-bottom: 16px;
 }
+@media (max-width: 376px) {
+  .shippingContainer :global(.vtex-address-form__postalCode) {
+    flex-direction: column;
+  }
+}
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
   display: flex;
   flex-direction: column;
@@ -280,6 +305,12 @@
   left: 312px;
   top: 41.5px;
 }
+@media (max-width: 376px) {
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+    position: unset;
+    justify-content: right;
+  }
+}
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
   color: #000;
 }
@@ -325,7 +356,6 @@
   margin-bottom: 15px;
   font-family: "Open Sans", sans-serif;
   font-style: normal;
-  font-weight: 400;
   font-size: 14px;
   line-height: 19px;
   color: #202020;
@@ -333,6 +363,7 @@
 }
 .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
   order: 2;
+  font-weight: 400 !important;
 }
 .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
   font-size: 0;
@@ -344,6 +375,11 @@
   font-weight: 400;
   line-height: 19px;
 }
+.shippingTable .shippingTableBody {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
 .shippingTable .shippingTableBody .shippingTableRow {
   display: flex;
 }
@@ -355,7 +391,6 @@
   line-height: 16px;
   align-items: center;
   color: #afafaf;
-  margin-bottom: 15px;
 }
 .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
   order: 2;
@@ -444,3 +479,19 @@
   text-transform: uppercase;
   padding: 12px;
 }
+
+@media (max-width: 1024px) {
+  .productDescriptionContainer {
+    position: relative;
+    padding: 16px 0;
+  }
+  .productDescriptionContainer::before {
+    content: "";
+    background-color: #bfbfbf;
+    display: inline-block;
+    width: 100%;
+    height: 1px;
+    position: absolute;
+    bottom: 0;
+  }
+}

styles/css/vtex.tab-layout.css

@@ -23,6 +23,25 @@
   position: relative;
   bottom: 9px;
 }
+@media (max-width: 1024px) {
+  .listContainer {
+    flex-direction: column;
+    padding: 0 40px 16px;
+    margin-bottom: 0px;
+  }
+  .listContainer::before {
+    content: "";
+    background-color: #bfbfbf;
+    display: inline-block;
+    width: 100%;
+    height: 1px;
+    position: relative;
+    top: 0px;
+  }
+  .listContainer::after {
+    bottom: 0px;
+  }
+}
 
 .listItem :global(.vtex-button) {
   background-color: white;
@@ -37,14 +56,32 @@
   border-radius: 0;
 }
 
+@media (max-width: 1024px) {
+  .listItem {
+    margin: 0;
+    padding: 0;
+  }
+  .listItem :global(.vtex-button) {
+    margin: 0;
+    padding: 0;
+  }
+  .listItem :global(.vtex-button) :global(.vtex-button__label) {
+    padding: 0;
+  }
+}
+
 .listItemActive :global(.vtex-button) {
   background-color: white;
   color: black;
   border: 0;
-  border-bottom: 2px black solid;
   font-family: "Open Sans", sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 18px;
   line-height: 38px;
 }
+@media (min-width: 1025px) {
+  .listItemActive :global(.vtex-button) {
+    border-bottom: 2px black solid;
+  }
+}

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

@@ -8,6 +8,10 @@
     }
   }
 
+  :global(.vtex-store-components-3-x-carouselContainer) {
+    margin-bottom: 32px;
+  }
+
   :global(.vtex-store-components-3-x-productImageTag) {
     max-height: none;
   }
@@ -27,7 +31,22 @@
   }
 }
 
+.flexColChild--image-description {
+  :global(.vtex-store-components-3-x-imageElement) {
+    @media (max-width: 1024px) {
+      width: 100%;
+    }
+  }
+}
+
 .flexRowContent {
   margin-bottom: 0;
   padding-bottom: 0;
 }
+
+.stretchChildrenWidth {
+  @media (max-width: 1024px) {
+    width: 100% !important;
+    padding: 0;
+  }
+}

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

@@ -1,8 +1,8 @@
 .product-identifier {
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
 
-  font-family: "Open Sans", sans-serif;
+  font-family: 'Open Sans', sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
@@ -11,6 +11,10 @@
 
   color: rgba(146, 146, 146, 0.48);
 
+  @media (min-width: 1025px) {
+    justify-content: flex-end;
+  }
+
   .product-identifier__label,
   .product-identifier__separator {
     display: none;

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

@@ -87,17 +87,25 @@
 }
 
 .carouselGaleryThumbs {
+  width: 47.67%;
+  @media (min-width: 1025px) {
+    width: 68.02%;
+  }
   :first-child {
-    height: 90px;
-
     :first-child {
       gap: 16px !important;
 
       .productImagesThumb {
-        width: 13.605%;
         height: fit-content !important;
         max-height: 90px;
         margin: 0;
+
+        .figure {
+          .thumbImg {
+            border-radius: 8px;
+            min-height: 90px;
+          }
+        }
       }
     }
   }
@@ -105,7 +113,7 @@
 
 .productBrand {
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
 
   font-family: 'Open Sans', sans-serif;
   font-style: normal;
@@ -114,11 +122,16 @@
   line-height: 34px;
 
   color: #575757;
+
+  @media (min-width: 1025px) {
+    justify-content: flex-end;
+  }
 }
 
 .skuSelectorContainer {
   display: flex;
   flex-direction: column-reverse;
+  margin: 16px 0;
 
   .frameAround {
     width: 43px;
@@ -136,10 +149,14 @@
   }
 
   .skuSelectorSubcontainer--cor {
+    margin: 0;
     .skuSelectorNameContainer {
       margin: 0;
       .skuSelectorOptionsList {
         margin-left: 0 !important;
+        .skuSelectorItem {
+          margin: 0;
+        }
       }
       .skuSelectorTextContainer {
         .skuSelectorName,
@@ -252,6 +269,10 @@
     display: flex;
     padding-bottom: 16px;
 
+    @media (max-width: 376px) {
+      flex-direction: column;
+    }
+
     :global(.vtex-input) {
       display: flex;
       flex-direction: column;
@@ -303,6 +324,10 @@
       padding: 0;
       left: 312px;
       top: 41.5px;
+      @media (max-width: 376px) {
+        position: unset;
+        justify-content: right;
+      }
 
       :last-child {
         color: #000;
@@ -359,7 +384,6 @@
 
       font-family: 'Open Sans', sans-serif;
       font-style: normal;
-      font-weight: 400;
       font-size: 14px;
       line-height: 19px;
       color: #202020;
@@ -367,6 +391,7 @@
 
       .shippingTableHeadDeliveryEstimate {
         order: 2;
+        font-weight: 400 !important;
       }
       .shippingTableHeadDeliveryPrice {
         font-size: 0;
@@ -382,6 +407,10 @@
   }
 
   .shippingTableBody {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+
     .shippingTableRow {
       display: flex;
 
@@ -393,7 +422,6 @@
         line-height: 16px;
         align-items: center;
         color: #afafaf;
-        margin-bottom: 15px;
       }
 
       .shippingTableCellDeliveryEstimate {
@@ -502,3 +530,19 @@
     }
   }
 }
+
+.productDescriptionContainer {
+  @media (max-width: 1024px) {
+    position: relative;
+    padding: 16px 0;
+    &::before {
+      content: '';
+      background-color: #bfbfbf;
+      display: inline-block;
+      width: 100%;
+      height: 1px;
+      position: absolute;
+      bottom: 0;
+    }
+  }
+}

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

@@ -14,6 +14,24 @@
     position: relative;
     bottom: 9px;
   }
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    padding: 0 40px 16px;
+    margin-bottom: 0px;
+
+    &::before {
+      content: '';
+      background-color: #bfbfbf;
+      display: inline-block;
+      width: 100%;
+      height: 1px;
+      position: relative;
+      top: 0px;
+    }
+    &::after {
+      bottom: 0px;
+    }
+  }
 }
 .listItem :global(.vtex-button) {
   background-color: white;
@@ -27,14 +45,31 @@
   text-transform: capitalize;
   border-radius: 0;
 }
+.listItem {
+  @media (max-width: 1024px) {
+    margin: 0;
+    padding: 0;
+    :global(.vtex-button) {
+      margin: 0;
+      padding: 0;
+      :global(.vtex-button__label) {
+        padding: 0;
+      }
+    }
+  }
+}
+
 .listItemActive :global(.vtex-button) {
   background-color: white;
   color: black;
   border: 0;
-  border-bottom: 2px black solid;
   font-family: 'Open Sans', sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 18px;
   line-height: 38px;
+
+  @media (min-width: 1025px) {
+    border-bottom: 2px black solid;
+  }
 }