From 3f1c097836fa928ff01b5ffe5bb4545ccad92cac Mon Sep 17 00:00:00 2001
From: Rafael Sampaio <rafael.sampa1989@gmail.com>
Date: Thu, 2 Feb 2023 10:43:54 -0300
Subject: [PATCH] feat: adiciona css prateleira e newsletter 1024px

---
 store/blocks/pdp/product.jsonc                       | 12 ++++++++++++
 styles/css/vtex.flex-layout.css                      |  3 +++
 styles/css/vtex.store-components.css                 |  7 +++++++
 styles/sass/pages/product/vtex.flex-layout.scss      |  1 +
 styles/sass/pages/product/vtex.store-components.scss |  8 ++++++++
 5 files changed, 31 insertions(+)

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index cc6c843..0d802e0 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -262,6 +262,18 @@
     "blocks": ["product-summary.shelf#shelfProducts"],
     "children": ["slider-layout#demo-products"]
   },
+
+  "slider-layout#demo-products": {
+    "props": {
+      "blockClass": "shelf",
+      "itemsPerPage": {
+        "desktop": 4,
+        "tablet": 3,
+        "phone": 2
+      }
+    }
+  },
+
   "newsletter#pageProduct": {
     "props": {
       "blockClass": "pageProduct",
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 13e2085..d48d387 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -119,6 +119,9 @@
 }
 
 @media (max-width: 1024px) {
+  .flexRowContent--product-container {
+    width: 100%;
+  }
   .flexRowContent--product-container .flexRowContent {
     flex-direction: column;
   }
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index ef2892a..2d3b657 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -30,6 +30,7 @@
 
 .carouselGaleryThumbs {
   max-height: 90px;
+  display: block;
 }
 
 .productImageTag--main {
@@ -464,10 +465,16 @@
 }
 
 @media (max-width: 1024px) {
+  .container {
+    padding: 0 40px;
+  }
   .productBrand--quickview {
     justify-content: flex-start;
     margin-top: 32px;
   }
+  .container--pageProduct {
+    width: 96%;
+  }
   .form .content {
     width: 100%;
     max-width: 100%;
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 87b9233..cbdd8db 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -112,6 +112,7 @@
 
 @media (max-width: 1024px) {
   .flexRowContent--product-container {
+    width: 100%;
     .flexRowContent {
       flex-direction: column;
     }
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index fa9c49e..0c2f72c 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -19,6 +19,7 @@
 
 .carouselGaleryThumbs {
   max-height: 90px;
+  display: block;
 }
 
 .productImageTag--main {
@@ -476,11 +477,18 @@
 }
 
 @media (max-width: 1024px) {
+  .container {
+    padding: 0 40px;
+  }
   .productBrand--quickview {
     justify-content: flex-start;
     margin-top: 32px;
   }
 
+  .container--pageProduct {
+    width: 96%;
+  }
+
   .form {
     .content {
       width: 100%;
-- 
2.34.1