feat: scss prateleira sujestões

react/components/Html/style.css

@@ -1,11 +1,11 @@
-[class*='html'] {
+[class*='html--Quantity-Button'] {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 16px;
 }
 
-[class*='html'] > [class*='button'] {
+[class*='html--Quantity-Button'] > [class*='button'] {
   width: 100%;
   height: 49px;
   background: #000;

store/blocks/pdp/product.jsonc

@@ -58,7 +58,7 @@
       "blockClass": "product"
     },
     "children": [
-      "flex-layout.row#product-image",
+      "html#product-images",
       "product-bookmark",
       "product-specification-badges"
     ]
@@ -81,9 +81,13 @@
     }
   },
 
-  "flex-layout.row#product-image": {
+  "html#product-images": {
+    "props": {
+      "testId": "product-images"
+    },
     "children": ["product-images"]
   },
+
   "product-images": {
     "props": {
       "aspectRatio": {
@@ -118,6 +122,12 @@
     ]
   },
 
+  "shipping-simulator": {
+    "props": {
+      "testId": "shipping-simulator"
+    }
+  },
+
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3
@@ -145,6 +155,9 @@
     }
   },
   "html#quantityAndButton": {
+    "props": {
+      "blockClass": "Quantity-Button"
+    },
     "children": ["product-quantity", "add-to-cart-button"]
   },
 
@@ -322,6 +335,14 @@
     ]
   },
 
+  "product-summary-image": {
+    "props": {
+      "aspectRatio": {
+        "desktop": "1:1"
+      }
+    }
+  },
+
   "slider-layout#demo-products": {
     "props": {
       "itemsPerPage": {
@@ -330,7 +351,7 @@
         "phone": 2
       },
       "infinite": true,
-      "showNavigationArrows": "desktopOnly",
+      "showNavigationArrows": "always",
       "blockClass": "carousel"
     }
   }

styles/css/vtex.flex-layout.css

@@ -20,6 +20,9 @@
 .flexColChild :global(.vtex-store-components-3-x-container) {
   padding: 0 32px;
 }
+.flexColChild .agenciamagma-store-theme-5-x-html--Quantity-Button {
+  display: flex;
+}
 
 .flexRowContent {
   margin-bottom: 0;

styles/css/vtex.slider-layout.css

@@ -8,19 +8,28 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .sliderLayoutContainer {
-  padding: 16px 40px 113px;
+  padding: 0 40px 32px;
+  margin-bottom: 32px;
+}
+.sliderLayoutContainer .sliderLeftArrow {
+  left: 36px;
+  margin: 0;
+  padding: 0;
+}
+.sliderLayoutContainer .sliderRightArrow {
+  right: 36px;
+  margin: 0;
+  padding: 0;
 }
 .sliderLayoutContainer .sliderTrackContainer {
-  padding: 0 40px 36px;
+  margin: 0 auto;
+  width: 94%;
 }
 .sliderLayoutContainer .sliderTrackContainer .sliderTrack {
-  width: 450% !important;
   gap: 16px;
 }
 .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) {
   margin: 0;
-  width: 100%;
-  max-width: none !important;
 }
 .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) {
   padding: 0;
@@ -28,22 +37,13 @@
 .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) {
   display: flex;
   order: 1;
-  width: fit-content;
 }
 .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-store-components-3-x-discountInsideContainer) {
   display: none;
 }
-.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-product-summary-2-x-imageContainer) {
-  background-color: #ededed;
-}
 .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) {
-  width: fit-content;
+  width: 100%;
-  min-width: 314.4px;
+  height: 100%;
-  height: fit-content;
-  min-height: 314.4px;
-  max-height: 314.4px;
-  border-radius: 0;
-  background-color: #ededed;
 }
 .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) {
   display: flex;
@@ -138,7 +138,6 @@
 }
 .sliderLayoutContainer .paginationDotsContainer {
   align-items: center;
-  bottom: 113px;
 }
 .sliderLayoutContainer .paginationDotsContainer .paginationDot {
   width: 10px;

styles/css/vtex.store-components.css

@@ -9,8 +9,12 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .newsletter {
+  margin-top: 32px;
   background: black;
 }
+.newsletter .container {
+  padding: 32px 0 16px 0;
+}
 .newsletter .container .form .label {
   font-size: 0;
   display: flex;

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

@@ -15,6 +15,10 @@
   :global(.vtex-store-components-3-x-container) {
     padding: 0 32px;
   }
+
+  .agenciamagma-store-theme-5-x-html--Quantity-Button {
+    display: flex;
+  }
 }
 
 .flexRowContent {

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

@@ -1,42 +1,45 @@
 .sliderLayoutContainer {
-  padding: 16px 40px 113px;
+  padding: 0 40px 32px;
+  margin-bottom: 32px;
+
+  .sliderLeftArrow {
+    left: 36px;
+    margin: 0;
+    padding: 0;
+  }
+
+  .sliderRightArrow {
+    right: 36px;
+    margin: 0;
+    padding: 0;
+  }
 
   .sliderTrackContainer {
-    padding: 0 40px 36px;
+    margin: 0 auto;
+    width: 94%;
 
     .sliderTrack {
-      width: 450% !important;
       gap: 16px;
 
       .slide {
         .slideChildrenContainer {
           :global(.vtex-product-summary-2-x-container) {
             margin: 0;
-            width: 100%;
-            max-width: none !important;
 
             :global(.vtex-product-summary-2-x-element) {
               padding: 0;
               :global(.vtex-product-summary-2-x-imageContainer) {
                 display: flex;
                 order: 1;
-                width: fit-content;
 
                 :global(.vtex-store-components-3-x-discountContainer) {
                   :global(.vtex-store-components-3-x-discountInsideContainer) {
                     display: none;
                   }
                   :global(.vtex-product-summary-2-x-imageContainer) {
-                    background-color: #ededed;
-
                     :global(.vtex-product-summary-2-x-imageNormal) {
-                      width: fit-content;
+                      width: 100%;
-                      min-width: 314.4px;
+                      height: 100%;
-                      height: fit-content;
-                      min-height: 314.4px;
-                      max-height: 314.4px;
-                      border-radius: 0;
-                      background-color: #ededed;
                     }
                   }
                 }
@@ -149,7 +152,7 @@
   }
   .paginationDotsContainer {
     align-items: center;
-    bottom: 113px;
+    // bottom: -32px;
 
     .paginationDot {
       width: 10px;

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

@@ -1,6 +1,8 @@
 .newsletter {
+  margin-top: 32px;
   background: black;
   .container {
+    padding: 32px 0 16px 0;
     .form {
       .label {
         font-size: 0;

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

@@ -4,7 +4,6 @@
   flex-direction: row;
   justify-content: space-around;
   padding: 0 40px;
-  // column-gap: 197.5px;
 
   &::after {
     content: '';