diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 47285e6..1d92b5e 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -94,3 +94,43 @@ button[class*="vtex-numeric-stepperminus-button numeric-stepperminus-button br2
[class*="quantitySelectorTitle"] {
display: none;
} */
+
+[class*="flexRowContent--btn-product"] button {
+ background-color: black;
+ border-color: black;
+ max-width: 526px;
+ width: 100%;
+ height: 49px;
+ display: flex;
+ border-radius: 0px;
+ left: 158px;
+ bottom: 73px;
+}
+
+[class*="flexRowContent--btn-product"] button span {
+ font-size: 0px;
+}
+
+[class*="flexRowContent--btn-product"] button span::after {
+ content: "ADICIONAR À SACOLA";
+ font-size: 14px;
+ font-family: "Open Sans", sans-serif;
+}
+
+[class*="flexRowContent--btn-product"] button:hover {
+ background-color: #000000;
+}
+
+[class*="vtex-address-form__postalCode-forgottenURL"] a {
+ color: black;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+}
+
+[class*="vtex-address-form__postalCode-forgottenURL"] span {
+ display: none;
+}
+
+
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index c9d040e..f499601 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -107,7 +107,6 @@
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments",
- "product-separator",
"sku-selector",
"product-quantity",
"product-assembly-options",
diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css
index 34c4328..228a2c3 100644
--- a/styles/css/vtex.product-identifier.css
+++ b/styles/css/vtex.product-identifier.css
@@ -6,4 +6,19 @@
1800px + : Big desktop
*/
/* Media Query M3 */
-/* Grid breakpoints */
\ No newline at end of file
+/* Grid breakpoints */
+.product-identifier--productReference {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ text-align: right;
+ display: block;
+ color: rgba(146, 146, 146, 0.48);
+}
+
+.product-identifier__label,
+.product-identifier__separator {
+ display: none;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
new file mode 100644
index 0000000..5476938
--- /dev/null
+++ b/styles/css/vtex.product-quantity.css
@@ -0,0 +1,33 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.quantitySelectorTitle {
+ display: none;
+}
+
+.quantitySelectorStepper :global(.vtex-numeric-stepper__input) {
+ border-top: 2px solid #cccccc;
+ border-left: none;
+ border-right: none;
+ border-bottom: 2px solid #cccccc;
+ color: black;
+ height: 50px;
+}
+.quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button) {
+ color: black;
+ border-color: #cccccc;
+ border-radius: 0;
+ height: 50px;
+}
+.quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) {
+ background-color: white;
+ border-color: #cccccc;
+ border-radius: 0;
+ height: 50px;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 4145dd4..ebc1bd6 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -12,6 +12,16 @@
}
.productNameContainer {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 300;
+ font-size: 20px;
+ line-height: 34px;
+ text-align: right;
+ color: #000000;
+}
+
+.productNameContainer--quickview {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
@@ -19,4 +29,76 @@
line-height: 34px;
text-align: right;
color: #575757;
+}
+
+.skuSelectorContainer {
+ display: flex;
+ flex-direction: column-reverse;
+}
+.skuSelectorContainer .frameAround {
+ border-radius: 50%;
+ border-color: black;
+ z-index: 2;
+}
+.skuSelectorContainer .skuSelectorInternalBox {
+ border-radius: 50%;
+}
+.skuSelectorContainer .diagonalCross {
+ background-image: linear-gradient(to top left, transparent 44%, rgba(0, 0, 0, 0.3) 48%, currentColor 48%, currentColor 52%, transparent 52%);
+}
+
+.skuSelectorItem {
+ height: 50px;
+ width: 50px;
+}
+
+.shippingContainer {
+ display: flex;
+ position: relative;
+}
+.shippingContainer :global(.vtex-button) {
+ background-color: black;
+ width: 70px;
+ height: 45px;
+ color: white;
+ margin-top: 23px;
+ margin-left: -4px;
+}
+.shippingContainer :global(.vtex-input__label) {
+ font-size: 0px;
+}
+.shippingContainer :global(.vtex-input__label)::before {
+ content: "calcular frete:";
+ font-size: 14px;
+ text-transform: uppercase;
+}
+.shippingContainer :global(.vtex-button__label) {
+ font-size: 0px;
+}
+.shippingContainer :global(.vtex-button__label)::after {
+ content: "OK";
+ font-size: 14px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+ width: 280px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+ color: black;
+ position: absolute;
+ right: 32px;
+ top: 25px;
+}
+
+.shareContainer {
+ display: none;
+}
+
+.shippingTable .shippingTableRadioBtn {
+ display: none;
+}
+.shippingTable .shippingTableHead {
+ display: contents;
+}
+.shippingTable .shippingTableRow {
+ text-align: left;
}
\ 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
new file mode 100644
index 0000000..c71f073
--- /dev/null
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -0,0 +1,9 @@
+// button.flexRow--btn-product {
+// background-color: black;
+// border-color: black;
+// max-width: 526px;
+// width: 100%;
+// height: 49px;
+// display: flex;
+// border-radius: 0px;
+// }
diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss
index 8b13789..5a6d0bb 100644
--- a/styles/sass/pages/product/vtex.product-identifier.scss
+++ b/styles/sass/pages/product/vtex.product-identifier.scss
@@ -1 +1,22 @@
+.product-identifier--productReference {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ text-align: right;
+ display: block;
+ color: rgba(146, 146, 146, 0.48);
+
+}
+
+.product-identifier__label,
+.product-identifier__separator {
+ display: none;
+}
+
+
+
+
+
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
new file mode 100644
index 0000000..f423a93
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -0,0 +1,28 @@
+.quantitySelectorTitle {
+ display: none;
+}
+
+.quantitySelectorStepper {
+ :global(.vtex-numeric-stepper__input) {
+ border-top: 2px solid #cccccc;
+ border-left: none;
+ border-right: none;
+ border-bottom: 2px solid #cccccc;
+ color: black;
+ height: 50px;
+ }
+
+ :global(.vtex-numeric-stepper__plus-button) {
+ color: black;
+ border-color: #cccccc;
+ border-radius: 0;
+ height: 50px;
+ }
+
+ :global(.vtex-numeric-stepper__minus-button) {
+ background-color: white;
+ border-color: #cccccc;
+ border-radius: 0;
+ height: 50px;
+ }
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 34d51e4..b8ffe0e 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -2,8 +2,17 @@
background: red;
}
-
.productNameContainer {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 300;
+ font-size: 20px;
+ line-height: 34px;
+ text-align: right;
+ color: #000000;
+}
+
+.productNameContainer--quickview {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
@@ -13,4 +22,96 @@
color: #575757;
}
+.skuSelectorContainer {
+ display: flex;
+ flex-direction: column-reverse;
+ .frameAround {
+ border-radius: 50%;
+ border-color: black;
+ z-index: 2;
+ }
+
+ .skuSelectorInternalBox {
+ border-radius: 50%;
+ }
+
+ .diagonalCross {
+ background-image: linear-gradient(
+ to top left,
+ transparent 44%,
+ rgba(0, 0, 0, 0.3) 48%,
+ currentColor 48%,
+ currentColor 52%,
+ transparent 52%
+ );
+ }
+}
+
+.skuSelectorItem {
+ height: 50px;
+ width: 50px;
+}
+
+.shippingContainer {
+ display: flex;
+ position: relative;
+ :global(.vtex-button) {
+ background-color: black;
+ width: 70px;
+ height: 45px;
+ color: white;
+ margin-top: 23px;
+ margin-left: -4px;
+ }
+
+ :global(.vtex-input__label) {
+ font-size: 0px;
+ }
+
+ :global(.vtex-input__label)::before {
+ content: "calcular frete:";
+ font-size: 14px;
+ text-transform: uppercase;
+ }
+
+ :global(.vtex-button__label) {
+ font-size: 0px;
+ }
+
+ :global(.vtex-button__label)::after {
+ content: "OK";
+ font-size: 14px;
+ }
+
+ :global(.vtex-address-form__postalCode) {
+ width: 280px;
+ }
+
+ :global(.vtex-address-form__postalCode-forgottenURL) {
+ color: black;
+ position: absolute;
+ right: 32px;
+ top: 25px;
+ }
+}
+
+.shareContainer {
+ display: none;
+}
+
+.shippingTable {
+ .shippingTableRadioBtn {
+ display: none;
+
+
+ }
+
+ .shippingTableHead {
+ display: contents;
+ }
+
+ .shippingTableRow {
+ text-align: left;
+ }
+}