diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 8b2419e..a8d7d98 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -1,17 +1,10 @@
/* [class*=html--pdp-breadcrumb]{
background: blue;
} */
-/* .html {
- background-color: red;
-}
-
-.html--pdp-breadcrumb {
- background-color: green;
-} */
.html--pdp-section_descriptions{
display: flex;
flex-direction: column;
- gap: 32;
+ gap: 32px;
padding: 0px 40px 0px 40px;
}
.html--pdp-section_descriptions :global(.vtex-flex-layout-0-x-flexRowContent){
@@ -20,6 +13,15 @@
.html--pdp-descriptions{
display: flex;
}
+.html--pdp-descriptions :global(.vtex-flex-layout-0-x-flexRow){
+ width: 100%;
+}
+.html--pdp-descriptions :global(.vtex-store-components-3-x-container){
+ max-width: 100%;
+}
+.html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){
+ padding-left: 28px;
+}
.html--pdp-departamens{
background: transparent;
margin-top: 32px;
@@ -36,6 +38,7 @@
list-style: none;
margin: 0;
}
+
.html--pdp-departamens div ul li button{
outline: none;
border: none;
@@ -51,3 +54,56 @@
color: #000000;
border-bottom: 1px solid #000000;
}
+:global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){
+ margin-bottom: 20px;
+}
+.html--pdp-productMain :global(.vtex-store-components-3-x-container){
+ max-width: 100%;
+}
+:global(.vtex-slider-layout-0-x-paginationDot--pdp-carrousel){
+ background: #000000;
+}
+:global(.vtex-slider-layout-0-x-paginationDotsContainer--pdp-carrousel){
+ align-items: center;
+}
+:global(.vtex-slider-layout-0-x-paginationDot--pdp-carrousel--isActive){
+ min-width: 17px;
+ min-height: 17px;
+ border: 0.5px solid black;
+ background: #ffffff;
+}
+@media screen and (max-width: 375px){
+ .html--pdp-descriptions :global(.vtex-store-components-3-x-productImageTag){
+ min-width: 100% !important;
+ max-height: 100% !important;
+}
+}
+@media screen and (max-width: 1024px) {
+ .html--pdp-descriptions :global(.vtex-store-components-3-x-productImageTag){
+ min-width: 296px;
+ }
+ .html--pdp-descriptions :global(.vtex-flex-layout-0-x-flexRowContent){
+ flex-direction: column;
+ }
+ .html--pdp-descriptions :global(.vtex-flex-layout-0-x-stretchChildrenWidth){
+ align-items: center;
+ width: 100% !important;
+ }
+ .html--pdp-descriptions :global(.vtex-store-components-3-x-productImagesContainer){
+ width: auto;
+ }
+ .html--pdp-departamens div ul{
+ flex-direction: column;
+ justify-content: end;
+ padding: 0;
+ }
+ .html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){
+ padding-left: 0px;
+ }
+ .html--pdp-departamens div ul li :global(button.open){
+ border-bottom: none;
+ }
+ .html--pdp-departamens ul{
+ border-top: 1px solid rgba(185, 185, 185, 1);
+ }
+}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index cf25548..af163ab 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -1,11 +1,94 @@
{
"store.product": {
"children": [
- "html#breadcrumb",
- "condition-layout.product#availability",
- "html#departaments"
+ "html#departaments",
+ "flex-layout.row#specifications-title",
+ "html#carousel"
]
},
+ "html#prateleira": {
+ "props": {
+ "testId": "vtex-product-sumary"
+ },
+ "children": [
+ "product-summary-image#shelfpdp",
+ "product-summary-name",
+ "product-list-price#summary",
+ "product-selling-price#summary"
+ ]
+ },
+ "html#carousel": {
+ "children": ["flex-layout.row#shelfpdp"]
+ },
+ "flex-layout.row#shelfpdp": {
+ "props": {
+ "blockClass": "pdp-carrousel"
+ },
+ "children": ["list-context.product-list#pdp"]
+ },
+ "list-context.product-list#pdp": {
+ "blocks": ["product-summary.shelf#Pdp"],
+ "children": ["slider-layout#demo-products#pdp"],
+ "props": {
+ "orderBy": "OrderByTopSaleDESC"
+ }
+ },
+ "slider-layout#demo-products#pdp": {
+ "props": {
+ "itemsPerPage": {
+ "desktop": 4,
+ "tablet": 3,
+ "phone": 2
+ },
+ "infinite": true,
+ "fullWidth": true,
+ "blockClass": "pdp-carrousel"
+ }
+ },
+
+ "product-summary.shelf#Pdp": {
+ "children": [
+ "stack-layout#pdp",
+ "product-summary-name",
+ "product-list-price#summary",
+ "product-selling-price#summarypdp",
+ "flex-layout.row#selling-price-savingspdp"
+ ]
+ },
+
+ "flex-layout.row#selling-price-savingspdp": {
+ "props": {
+ "blockClass": "pdp-price",
+ "colGap": 2,
+ "preserveLayoutOnMobile": true,
+ "preventHorizontalStretch": true,
+ "marginBottom": 4
+ },
+ "children": [
+ "product-selling-price#summary",
+ "product-price-savings#summary"
+ ]
+ },
+ "product-summary-name": {
+ "props": {
+ "blockClass": "pdp-name"
+ }
+ },
+ "stack-layout#pdp": {
+ "children": [
+ "product-summary-image#shelfpdp",
+ "modal-trigger#quickview" // Check quickview.jsonc
+ ]
+ },
+
+ "product-summary-image#shelfpdp": {
+ "props": {
+ "blockClass": "pdp-imgpdp",
+ "showBadge": false,
+ "aspectRatio": "1:1",
+ "maxHeight": 334.4
+ }
+ },
"html#breadcrumb": {
"props": {
"tag": "section",
@@ -34,16 +117,23 @@
"flex-layout.row#specifications-title": {
"children": ["rich-text#specifications"]
},
+
"rich-text#specifications": {
"props": {
- "text": "##### Product Specifications"
+ "text": "##### Você também pode gostar:",
+ "blockClass": "pdp-specifications"
}
},
"flex-layout.row#description": {
"props": {
- "width": "50%"
+ "width": "66%"
},
- "children": ["product-images#description","product-description"]
+ "children": ["product-images#description", "product-description"]
+ },
+ "product-description": {
+ "props": {
+ "collapseContent": false
+ }
},
"condition-layout.product#availability": {
"props": {
@@ -52,10 +142,19 @@
"subject": "isProductAvailable"
}
],
- "Then": "flex-layout.row#product-main",
+ "Then": "html#product-main",
"Else": "flex-layout.row#product-availability"
}
},
+
+ "html#product-main": {
+ "props": {
+ "tag": "div",
+ "testId": "Product-Images",
+ "blockClass": "pdp-productMain"
+ },
+ "children": ["flex-layout.row#product-main"]
+ },
"flex-layout.row#product-main": {
"props": {
"colGap": 7,
@@ -94,28 +193,28 @@
"testId": "description",
"blockClass": "pdp-section_descriptions"
},
- "children": ["html#Sections","html#description"]
+ "children": ["html#Sections", "html#description"]
},
+
"html#description": {
"props": {
"tag": "div",
"testId": "description",
"blockClass": "pdp-descriptions"
},
- "children": [
- "flex-layout.row#description"
- ]
+ "children": ["flex-layout.row#description"]
},
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"rowGap": 10,
- "width":"46%",
+ "width": "50%",
"blockClass": "StackLayout",
- "htmlId":"teste"
+ "htmlId": "teste"
}
},
+
"flex-layout.row#product-image": {
"children": ["product-images"]
},
@@ -134,6 +233,7 @@
},
"product-images#description": {
"props": {
+ "maxHeight": 872,
"testid": "product-images",
"aspectRatio": {
"desktop": "1:1",
@@ -143,7 +243,7 @@
"showPaginationDots": false,
"thumbnailVisibility": "hiden",
"displayMode": "first-image",
- "zoomMode":"disabled"
+ "zoomMode": "disabled"
}
},
"flex-layout.col#right-col": {
@@ -174,7 +274,12 @@
"message": "{installmentsNumber} de {installmentValue} sem juros"
}
},
-
+ "product-selling-price#summarypdp": {
+ "props": {
+ "blockClass": "desconto",
+ "message": "de {sellingPriceWithTax} por"
+ }
+ },
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3,
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index 9f092fd..0168755 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -13,7 +13,7 @@
margin-right: auto;
max-width: 96rem;
}
-@media screen and (max-width: 64.0625em) {
+@media screen and (max-width: 1024px) {
.container {
padding: 0 0 0 10.67%;
}
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index da42b84..9ab6e23 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -29,13 +29,13 @@
max-width: 526px;
}
-@media screen and (min-width: 40em) {
+@media screen and (min-width: 1024px) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 1rem;
}
}
-@media screen and (min-width: 80rem) {
+@media screen and (min-width: 1280px) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.25rem;
@@ -140,4 +140,37 @@
.flexRowContent--title {
align-items: end;
flex-direction: column-reverse;
+}
+
+.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) {
+ top: 33%;
+}
+@media screen and (max-width: 1024px) {
+ .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) {
+ max-width: 11.2px;
+ max-height: 29.6px;
+ top: 25%;
+ padding: 0;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-slide--pdp-carrousel) {
+ width: 4.9344% !important;
+ height: max-content;
+ min-height: max-content;
+ max-width: 274px;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel) {
+ height: 100%;
+ max-height: 392px;
+ }
+}
+
+.flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) {
+ max-width: 100%;
+}
+.flexRow--pdp-price .flexRowContent--pdp-price {
+ justify-content: center;
}
\ No newline at end of file
diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css
index 1f87cfd..5ccb422 100644
--- a/styles/css/vtex.product-price.css
+++ b/styles/css/vtex.product-price.css
@@ -107,4 +107,49 @@
}
.installments .installmentsNumber::after {
content: "x";
+}
+
+.sellingPriceValue--summary-pdp {
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 33px;
+ text-align: center;
+ color: #000000;
+}
+@media screen and (max-width: 1024px) {
+ .sellingPriceValue--summary-pdp {
+ font-size: 18px;
+ line-height: 25px;
+ }
+}
+
+.sellingPrice--desconto {
+ display: flex;
+ justify-content: center;
+ gap: 5px;
+ text-decoration-line: line-through;
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ color: #BABABA;
+ margin-bottom: 8px;
+}
+@media screen and (max-width: 1024px) {
+ .sellingPrice--desconto {
+ font-size: 12px;
+ line-height: 16px;
+ }
+}
+.sellingPrice--desconto .sellingPriceValue--desconto {
+ font-size: 14px;
+ line-height: 19px;
+}
+@media screen and (max-width: 1024px) {
+ .sellingPrice--desconto .sellingPriceValue--desconto {
+ font-size: 12px;
+ line-height: 16px;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css
index 5caa7a5..2484b75 100644
--- a/styles/css/vtex.product-summary.css
+++ b/styles/css/vtex.product-summary.css
@@ -20,7 +20,7 @@
opacity: 1;
}
-@media screen and (max-width: 40em) {
+@media screen and (max-width: 1024px) {
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
display: none;
}
@@ -54,4 +54,34 @@
}
.nameContainer .productNameContainer {
text-align: center;
+}
+@media screen and (max-width: 1024px) {
+ .nameContainer .productNameContainer--pdp-name {
+ max-height: 80px;
+ }
+}
+
+@media screen and (min-width: 1920px) {
+ .image--pdp-imgpdp {
+ min-width: 334.4px;
+ }
+}
+
+.nameContainer--pdp-name {
+ justify-content: center;
+}
+
+.productBrand--pdp-name {
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 25px;
+ text-align: center;
+}
+@media screen and (max-width: 1024px) {
+ .productBrand--pdp-name {
+ font-size: 14px;
+ line-height: 19px;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css
index 34c4328..d4e5e71 100644
--- a/styles/css/vtex.rich-text.css
+++ b/styles/css/vtex.rich-text.css
@@ -6,4 +6,15 @@
1800px + : Big desktop
*/
/* Media Query M3 */
-/* Grid breakpoints */
\ No newline at end of file
+/* Grid breakpoints */
+.container--pdp-specifications {
+ justify-content: center;
+}
+.container--pdp-specifications .wrapper--pdp-specifications .heading {
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 38px;
+ color: #575757;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 8b90328..d3dd458 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -90,19 +90,19 @@
.carouselContainer .productImage {
max-width: 85.238%;
}
-@media screen and (min-width: 156.25em) {
+@media screen and (min-width: 1920px) {
.carouselContainer .productImage {
min-width: 904px;
max-width: 100%;
}
}
-@media screen and (max-width: 64.0625em) {
+@media screen and (max-width: 1024px) {
.carouselContainer .productImage {
min-width: 296px;
max-width: 100%;
}
}
-@media screen and (max-width: 23.375em) {
+@media screen and (max-width: 375px) {
.carouselContainer .productImage {
min-width: 0;
max-width: 100%;
@@ -127,7 +127,7 @@
background: white;
margin-right: 1em;
}
-@media screen and (max-width: 64.0625em) {
+@media screen and (max-width: 1024px) {
.carouselGaleryThumbs .productImagesThumb {
width: 30% !important;
}
@@ -142,7 +142,7 @@
border-radius: 8px;
min-height: 5.54em;
}
-@media screen and (max-width: 64.0625em) {
+@media screen and (max-width: 1024px) {
.carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg {
min-height: 4.9em;
}
@@ -150,4 +150,43 @@
.carouselGaleryThumbs .productImagesThumb .figure .thumbImg {
border-radius: 8px;
width: 90px;
+}
+
+.productDescriptionContainer .productDescriptionTitle {
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 32px;
+ color: #575757;
+}
+@media screen and (min-width: 1920px) {
+ .productDescriptionContainer .productDescriptionTitle {
+ font-size: 32px;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .productDescriptionContainer .productDescriptionTitle {
+ font-size: 20px !important;
+ }
+}
+.productDescriptionContainer .content {
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ color: #929292;
+}
+@media screen and (min-width: 1920px) {
+ .productDescriptionContainer .content {
+ font-size: 18px;
+ line-height: 25px;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .productDescriptionContainer .content {
+ font-size: 14px !important;
+ line-height: 19px !important;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.store-video.css b/styles/css/vtex.store-video.css
index 21f3a6d..0b76909 100644
--- a/styles/css/vtex.store-video.css
+++ b/styles/css/vtex.store-video.css
@@ -4,7 +4,7 @@
margin-top: 2%;
}
-@media only screen and (min-width: 640px) {
+@media only screen and (min-width: 280px) {
.videoContainer {
height: 700px;
}
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index c843639..f42a4d8 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -3,7 +3,7 @@
margin-left: auto;
margin-right: auto;
max-width: 96rem;
- @media screen and (max-width: 64.0625em){
+ @media screen and (max-width: 1024px){
padding: 0 0 0 10.67%;
}
.term,.termArrow{
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 9106a60..495e092 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -18,14 +18,14 @@
}
}
}
-@media screen and (min-width: 40em) {
+@media screen and (min-width: 1024px) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 1rem;
}
}
-@media screen and (min-width: 80rem) {
+@media screen and (min-width: 1280px) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.25rem;
@@ -133,5 +133,42 @@
align-items: end;
flex-direction: column-reverse;
}
+.flexRowContent--pdp-carrousel{
+ :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel){
+ top: 33%;
+ @media screen and (max-width: 1024px){
+ max-width: 11.2px;
+ max-height: 29.6px;
+ top: 25%;
+ padding: 0;
+ }
+ }
+ :global(.vtex-slider-layout-0-x-slide--pdp-carrousel){
+ @media screen and (max-width: 1024px){
+ width: 4.9344% !important;
+ height: max-content;
+ min-height: max-content;
+ max-width: 274px;
+ }
+ }
+ :global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){
+ @media screen and (max-width: 1024px){
+ height: 100%;
+ max-height: 392px;
+ }
+ }
+}
+.flexRow--pdp-carrousel{
+ :global(.vtex-store-components-3-x-container){
+ max-width: 100%;
+ }
+ @media screen and (max-width: 1024px){
+ }
+}
+.flexRow--pdp-price{
+ .flexRowContent--pdp-price{
+ justify-content: center;
+ }
+}
diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss
index 5578ada..defe4de 100644
--- a/styles/sass/pages/product/vtex.product-summary.scss
+++ b/styles/sass/pages/product/vtex.product-summary.scss
@@ -11,7 +11,7 @@
opacity: 1;
}
-@media screen and (max-width: 40em) {
+@media screen and (max-width: 1024px) {
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
display: none;
}
@@ -46,4 +46,30 @@
.productNameContainer{
text-align: center;
}
+
+ .productNameContainer--pdp-name{
+ @media screen and (max-width: 1024px){
+ max-height: 80px;
+ }
+ }
+}
+.image--pdp-imgpdp{
+ @media screen and (min-width: 1920px){
+ min-width: 334.4px;
+ }
+}
+.nameContainer--pdp-name{
+ justify-content: center;
+}
+.productBrand--pdp-name{
+ font-family: 'Open Sans',sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 25px;
+ text-align: center;
+ @media screen and (max-width: 1024px){
+ font-size: 14px;
+ line-height: 19px;
+ }
}
diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss
index e69de29..6bfa5b8 100644
--- a/styles/sass/pages/product/vtex.rich-text.scss
+++ b/styles/sass/pages/product/vtex.rich-text.scss
@@ -0,0 +1,15 @@
+.container{
+ &--pdp-specifications{
+ justify-content: center;
+ .wrapper--pdp-specifications{
+ .heading{
+ font-family: 'Open Sans',sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 38px;
+ color: #575757;
+ }
+ }
+ }
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 07ec51f..5083fec 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -90,15 +90,15 @@
padding: 0 40px 0;
.productImage{
max-width:85.238%;
- @media screen and (min-width: 156.25em){
+ @media screen and (min-width: 1920px){
min-width: 904px;
max-width:100%;
}
- @media screen and (max-width: 64.0625em){
+ @media screen and (max-width: 1024px){
min-width: 296px;
max-width:100%;
}
- @media screen and (max-width: 23.375em){
+ @media screen and (max-width: 375px){
min-width: 0;
max-width:100%;
}
@@ -120,7 +120,7 @@
width: max-content !important;
background:white;
margin-right: 1em;
- @media screen and (max-width: 64.0625em){
+ @media screen and (max-width: 1024px){
width: 30% !important;
}
.figure{
@@ -130,7 +130,7 @@
.thumbImg{
border-radius: 8px;
min-height: 5.54em;
- @media screen and (max-width: 64.0625em){
+ @media screen and (max-width: 1024px){
min-height: 4.9em;
}
}
@@ -142,4 +142,36 @@
}
}
}
+.productDescriptionContainer{
+ .productDescriptionTitle{
+ font-family: 'Open Sans',sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 32px;
+ color: #575757;
+ @media screen and (min-width: 1920px){
+ font-size: 32px;
+ }
+ @media screen and (max-width: 1024px){
+ font-size: 20px !important;
+ }
+ }
+ .content{
+ font-family: 'Open Sans',sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ color: #929292;
+ @media screen and (min-width: 1920px){
+ font-size: 18px;
+ line-height: 25px;
+ }
+ @media screen and (max-width: 1024px){
+ font-size: 14px !important;
+ line-height: 19px !important;
+ }
+ }
+}
diff --git a/styles/sass/pages/vtex.product-price.scss b/styles/sass/pages/vtex.product-price.scss
index 299d942..907ecbd 100644
--- a/styles/sass/pages/vtex.product-price.scss
+++ b/styles/sass/pages/vtex.product-price.scss
@@ -102,3 +102,40 @@
}
}
}
+.sellingPriceValue--summary-pdp{
+ font-family: 'Open Sans',sans-serif;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 33px;
+ text-align: center;
+ color: #000000;
+ @media screen and (max-width: 1024px){
+ font-size: 18px;
+ line-height: 25px;
+ }
+}
+.sellingPrice--desconto{
+ display: flex;
+ justify-content: center;
+ gap: 5px;
+ text-decoration-line: line-through;
+ font-family: 'Open Sans',sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ color: #BABABA;
+ margin-bottom: 8px;
+ @media screen and (max-width: 1024px){
+ font-size: 12px;
+ line-height: 16px;
+ }
+ .sellingPriceValue--desconto{
+ font-size: 14px;
+ line-height: 19px;
+ @media screen and (max-width: 1024px){
+ font-size: 12px;
+ line-height: 16px;
+ }
+ }
+}
diff --git a/styles/sass/utils/_mixin.scss b/styles/sass/utils/_mixin.scss
index 923c227..0a8aae5 100644
--- a/styles/sass/utils/_mixin.scss
+++ b/styles/sass/utils/_mixin.scss
@@ -24,7 +24,7 @@
} //375px
}
@if $breakpoint == phone {
- @media only screen and (max-width: 37.5em) {
+ @media only screen and (max-width:1024px) {
@content;
} //600px
}
@@ -39,7 +39,7 @@
} //1200px
}
@if $breakpoint == big-desktop {
- @media only screen and (min-width: 112.5em) {
+ @media only screen and (min-width: 1900px) {
@content;
} //1800px
}