diff --git a/react/components/Html/style.css b/react/components/Html/style.css
index b04928c..36dde0c 100644
--- a/react/components/Html/style.css
+++ b/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;
+ }
+}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index ae85142..15e6c60 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/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"]
},
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 487946c..083e71e 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/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;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css
index 35e807c..7adbacc 100644
--- a/styles/css/vtex.product-identifier.css
+++ b/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;
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index a7c5c0e..5a58407 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -92,22 +92,30 @@
}
}
-.carouselGaleryThumbs :first-child {
- height: 90px;
+.carouselGaleryThumbs {
+ 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;
@@ -443,4 +478,20 @@
line-height: 25px;
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;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index 2358719..7a7ef75 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/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;
+ }
}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 2785ab7..a413ca1 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/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;
+ }
+}
diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss
index 8bcca6b..301439e 100644
--- a/styles/sass/pages/product/vtex.product-identifier.scss
+++ b/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;
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index f3172d8..4215edc 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/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;
+ }
+ }
+}
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index a1f9c43..9c689eb 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/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;
+ }
}