diff --git a/manifest.json b/manifest.json
index 9ee3cc5..a2cde0d 100644
--- a/manifest.json
+++ b/manifest.json
@@ -15,7 +15,6 @@
"postreleasy": "vtex publish --verbose"
},
"dependencies": {
- "agenciamagma.store-theme": "5.x",
"vtex.store": "2.x",
"vtex.store-header": "2.x",
"vtex.product-summary": "2.x",
diff --git a/react/DescriptionSection.tsx b/react/DescriptionSection.tsx
new file mode 100644
index 0000000..c0b282f
--- /dev/null
+++ b/react/DescriptionSection.tsx
@@ -0,0 +1,3 @@
+import { DescriptionSection } from "./components/description-section";
+
+export default DescriptionSection;
diff --git a/react/SKUSelectorPDP.tsx b/react/SKUSelectorPDP.tsx
new file mode 100644
index 0000000..aa22d81
--- /dev/null
+++ b/react/SKUSelectorPDP.tsx
@@ -0,0 +1,3 @@
+import { SkuSelectorPDP } from "./components/sku-selector-pdp";
+
+export default SkuSelectorPDP;
diff --git a/react/components/descont-pix/index.tsx b/react/components/descont-pix/index.tsx
index b08725c..af25c9a 100644
--- a/react/components/descont-pix/index.tsx
+++ b/react/components/descont-pix/index.tsx
@@ -9,6 +9,7 @@ export const DescontPix: FC = () => {
let sellingPrice = Number(productContextValue?.product?.priceRange.sellingPrice.highPrice);
sellingPrice = (sellingPrice - (sellingPrice/10));
+
return (
diff --git a/react/components/descont-pix/styles.css b/react/components/descont-pix/styles.css
index fd310bc..99984d3 100644
--- a/react/components/descont-pix/styles.css
+++ b/react/components/descont-pix/styles.css
@@ -2,6 +2,7 @@
display: flex;
align-items: center;
margin-top: 8px;
+ margin-bottom: 16px;
}
.containerDescontPix img {
diff --git a/react/components/description-section/index.tsx b/react/components/description-section/index.tsx
new file mode 100644
index 0000000..8cc0e57
--- /dev/null
+++ b/react/components/description-section/index.tsx
@@ -0,0 +1,33 @@
+import React, { FC } from 'react'
+import { useProduct } from 'vtex.product-context'
+import styles from "./styles.css";
+
+export const DescriptionSection: FC = () => {
+
+ const productContextValue = useProduct();
+
+ const imageProduct = productContextValue?.product?.items[0].images[0].imageUrl;
+ const imageProductAlt = productContextValue?.product?.productName;
+ const descriptionProduct = productContextValue?.product?.description;
+ return (
+
+
+
+
+
+
+
Descrição do produto
+
{descriptionProduct}
+
+
+
+ );
+}
diff --git a/react/components/description-section/styles.css b/react/components/description-section/styles.css
new file mode 100644
index 0000000..3aaf8fe
--- /dev/null
+++ b/react/components/description-section/styles.css
@@ -0,0 +1,37 @@
+.containerDescriptionSection{
+ display: flex;
+ flex-direction: column;
+ padding: 0 40px;
+}
+
+.containerDescriptionSectionNav{
+ display: flex;
+ list-style: none;
+ padding: 0 64px;
+ justify-content: space-between;
+}
+
+.linkContainer{
+ width: 114px;
+ height: 38px;
+ display: grid;
+ place-items: center;
+
+ border-bottom: 2px solid #000000;
+}
+
+.linkContainer a:active{
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 38px;
+ color: #000000;
+ text-decoration: none;
+}
+
+/* .active{
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 38px;
+ color: #000000;
+ text-decoration: none;
+} */
diff --git a/react/components/installments/index.tsx b/react/components/installments/index.tsx
index 0ee84ad..2bf9072 100644
--- a/react/components/installments/index.tsx
+++ b/react/components/installments/index.tsx
@@ -5,7 +5,6 @@ import styles from "./styles.css";
export const Installments: FC = () => {
const productContextValue = useProduct();
- console.log(productContextValue?.product?.priceRange.sellingPrice)
let sellingPrice = Number(productContextValue?.product?.priceRange.sellingPrice.highPrice)/4;
diff --git a/react/components/product-reference/index.tsx b/react/components/product-reference/index.tsx
index 220b937..d8cc358 100644
--- a/react/components/product-reference/index.tsx
+++ b/react/components/product-reference/index.tsx
@@ -4,6 +4,19 @@ import styles from "./styles.css";
export const ProductReference: FC = () => {
+ // MODIFICAÇÂO DE TITULOS DE ALGUNS ELEMENTOS
+ // if (typeof document !== 'undefined') {
+ // const titleSizeSKU = document.querySelectorAll(".vtex-store-components-3-x-skuSelectorName");
+ // titleSizeSKU[1].innerHTML = "Outros Tamanhos:"
+ // titleSizeSKU[0].innerHTML = "Outras Cores"
+ // }
+
+ if (typeof document !== 'undefined') {
+ const inputCEP = document.querySelector(".vtex-address-form-4-x-input");
+ inputCEP?.setAttribute("placeholder", "Digite seu CEP")
+ console.log(inputCEP);
+ }
+
const productContextValue = useProduct();
console.log(productContextValue)
diff --git a/react/components/sku-selector-pdp/index.tsx b/react/components/sku-selector-pdp/index.tsx
new file mode 100644
index 0000000..8411caa
--- /dev/null
+++ b/react/components/sku-selector-pdp/index.tsx
@@ -0,0 +1,11 @@
+
+
+export const SkuSelectorPDP = () => {
+
+ if (typeof document !== 'undefined') {
+ const inputCEP = document.querySelector(".vtex-address-form-4-x-input");
+ console.log(inputCEP);
+ }
+
+ return null;
+}
diff --git a/react/components/sku-selector-pdp/styles.css b/react/components/sku-selector-pdp/styles.css
new file mode 100644
index 0000000..3a99065
--- /dev/null
+++ b/react/components/sku-selector-pdp/styles.css
@@ -0,0 +1,3 @@
+.containerSKUSelector{
+ display: flex;
+}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 6a6c716..1784b91 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -3,6 +3,7 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
+ "description-section",
"flex-layout.row#description",
"flex-layout.row#specifications-title",
"product-specification-group#table",
@@ -118,18 +119,40 @@
"flex-layout.row#selling-price",
"installments",
"descont-pix",
- "product-separator",
- "product-identifier.product",
+ // "product-separator",
+ // "product-identifier.product",
+ // "sku-selector-pdp",
"sku-selector",
- "product-quantity",
- "product-assembly-options",
- "product-gifts",
- "flex-layout.row#buy-button",
+ "flex-layout.row#quantity-and-buy-button",
+ // "product-quantity",
+ // "product-assembly-options",
+ // "product-gifts",
+ // "flex-layout.row#buy-button",
"availability-subscriber",
- "shipping-simulator",
- "share#default"
+ "shipping-simulator"
+ // "share#default"
]
},
+ "flex-layout.row#quantity-and-buy-button": {
+ "props": {
+ "blockClass": "container-quantity-and-buy-button"
+ },
+ "children": [
+ "product-quantity",
+ "buy-button"
+ ]
+ },
+ "product-quantity": {
+ "props": {
+ "width": "100%"
+ }
+ },
+
+ "buy-button": {
+ "props": {
+ "width": "100%"
+ }
+ },
"product-reference": {
"props": {
"blockClass": "title-product-reference"
diff --git a/store/interfaces.json b/store/interfaces.json
index d6ae06d..e23f04a 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -11,6 +11,12 @@
"descont-pix": {
"component": "DescontPix"
},
+ "sku-selector-pdp": {
+ "component": "SKUSelectorPDP"
+ },
+ "description-section": {
+ "component": "DescriptionSection"
+ },
"html": {
"component": "html",
"composition": "children"
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index d48e47d..2149ee4 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -28,4 +28,20 @@
.flexRowContent {
margin: 0;
+}
+
+.flexRowContent--container-quantity-and-buy-button {
+ display: grid;
+ grid-template-columns: 128px 1fr;
+ gap: 10px;
+ margin-bottom: 16px;
+}
+.flexRowContent--container-quantity-and-buy-button :global(.vtex-button) {
+ background-color: #000000;
+ border: 0;
+ border-radius: 0;
+}
+
+.container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+ width: 100%;
}
\ 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..9c2c0d0
--- /dev/null
+++ b/styles/css/vtex.product-quantity.css
@@ -0,0 +1,43 @@
+/*
+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 */
+.quantitySelectorContainer {
+ margin-top: 6px;
+}
+
+.quantitySelectorTitle {
+ display: none;
+}
+
+.quantitySelectorContainer {
+ height: 49px;
+ margin: 0;
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper__input), .quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button), .quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button) {
+ width: 100%;
+ height: 100%;
+ background: transparent;
+ border: 0;
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper-container) {
+ height: 49px;
+ border: 1px solid #CCCCCC;
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper__input) {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ color: #929292;
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button), .quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button) {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ color: #000000;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index c60db02..da11a98 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
@@ -35,10 +36,253 @@
max-width: none;
}
+.skuSelectorNameContainer {
+ margin: 0;
+}
+
.productNameContainer {
text-align: right;
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: #575757;
+}
+
+.skuSelectorContainer {
+ display: flex;
+ flex-direction: column-reverse;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName {
+ font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after {
+ content: "Outras cores";
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+ text-transform: uppercase;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName {
+ font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
+ content: "Outros tamanhos:";
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+ text-transform: uppercase;
+}
+.skuSelectorContainer .skuSelectorSelectorImageValue {
+ display: none;
+}
+.skuSelectorContainer .skuSelectorOptionsList {
+ display: flex;
+ gap: 16px;
+ margin: 0;
+ margin-bottom: 2px;
+}
+.skuSelectorContainer .skuSelectorOptionsList .skuSelectorItem {
+ margin: 0;
+ width: 40px;
+ height: 40px;
+}
+.skuSelectorContainer .skuSelectorOptionsList .skuSelectorItem .frameAround {
+ border-color: #000000;
+ border-radius: 50%;
+ border-width: 2px;
+ z-index: 5;
+ bottom: 0;
+ top: 0;
+ left: 0;
+ right: 0;
+}
+.skuSelectorContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
+ border: 1px solid #989898;
+ border-radius: 50%;
+}
+.skuSelectorContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .valueWrapper {
+ padding: 0;
+ color: rgba(185, 185, 185, 0.6);
+}
+.skuSelectorContainer .skuSelectorOptionsList .skuSelectorItemImage {
+ width: 48px;
+ height: 48px;
+}
+.skuSelectorContainer .skuSelectorOptionsList .skuSelectorItemImage .diagonalCross {
+ background: #D5D5D5;
+ top: 48%;
+ left: 1%;
+ width: 46px;
+ height: 1px;
+ transform: rotate(-45deg);
+}
+.skuSelectorContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper {
+ color: #000000;
+}
+.skuSelectorContainer .diagonalCross {
+ background: #D5D5D5;
+ top: 46%;
+ left: 1%;
+ width: 38px;
+ height: 1px;
+ transform: rotate(-45deg);
+}
+
+.buyButtonText {
+ font-size: 0;
+}
+.buyButtonText::after {
+ content: "ADICIONAR À SACOLA";
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 25px;
+}
+
+.shippingContainer {
+ width: 409px;
+ position: relative;
+ display: grid;
+ grid-template-areas: "label button notCep";
+ grid-template-columns: 56.4792% max-content 1fr;
+ margin-bottom: 16px;
+}
+.shippingContainer :global(.vtex-input__label) {
+ font-size: 0;
+}
+.shippingContainer :global(.vtex-input__label)::after {
+ content: "CALCULAR FRETE:";
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+ padding: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
+ grid-area: label;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
+ padding: 0 16px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ color: #AFAFAF;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
+ display: none;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+ grid-area: notCep;
+ position: absolute;
+ right: 0;
+ top: 43px;
+ padding: 0;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ text-decoration-line: underline;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
+ color: #000000;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
+ display: none;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
+ height: 49px;
+ border-radius: 0;
+ box-sizing: border-box;
+}
+.shippingContainer :global(.vtex-button) {
+ grid-area: button;
+ width: max-content;
+ height: max-content;
+ background-color: #000000;
+ margin-top: 27px;
+ margin-left: -2px;
+ border-radius: 0;
+ border: 0;
+ padding: 0;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
+ font-size: 0;
+ width: 49px;
+ height: 49px;
+ padding: 0;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
+ content: "OK";
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ color: #FFFFFF;
+}
+
+.shippingTable {
+ border: 0;
+ padding: 0;
+ margin: 0;
+ width: max-content;
+}
+.shippingTable .shippingTableHead {
+ display: table-caption;
+ text-align: left;
+}
+.shippingTable .shippingTableHead .shippingTableRow {
+ display: grid;
+ grid-template-areas: "entrega frete prazo";
+ grid-template-columns: 1fr 1fr 1fr;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
+ font-weight: 400;
+ font-size: 14px;
+ color: #202020;
+ text-transform: uppercase;
+ padding: 0;
+ padding-bottom: 15px;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
+ grid-area: entrega;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
+ grid-area: prazo;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
+ grid-area: frete;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
+ font-size: 0;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after {
+ content: "FRETE";
+ font-weight: 400;
+ font-size: 14px;
+ color: #202020;
+ text-transform: uppercase;
+}
+.shippingTable .shippingTableBody {
+ display: table-cell;
+}
+.shippingTable .shippingTableBody .shippingTableRow {
+ display: grid;
+ grid-template-areas: "entrega frete prazo";
+ grid-template-columns: 1fr 1fr 1fr;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
+ padding: 0;
+ padding-bottom: 15px;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableRadioBtn {
+ display: none;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
+ grid-area: prazo;
}
\ No newline at end of file
diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss
index 8b13789..e69de29 100644
--- a/styles/sass/pages/product/agenciamagma.store-theme.scss
+++ b/styles/sass/pages/product/agenciamagma.store-theme.scss
@@ -1 +0,0 @@
-
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 6e64dba..fe5872e 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -23,3 +23,20 @@
.flexRowContent{
margin: 0;
}
+
+.flexRowContent--container-quantity-and-buy-button{
+ display: grid;
+ grid-template-columns: 128px 1fr;
+ gap: 10px;
+ margin-bottom: 16px;
+
+ :global(.vtex-button){
+ background-color: #000000;
+ border: 0;
+ border-radius: 0;
+ }
+}
+
+.container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth){
+ width: 100%;
+}
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..315dec8
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -0,0 +1,38 @@
+.quantitySelectorContainer{
+ margin-top: 6px;
+}
+
+.quantitySelectorTitle {
+ display: none;
+}
+
+.quantitySelectorContainer{
+ height: 49px;
+ margin: 0;
+
+ :global(.vtex-numeric-stepper__input), :global(.vtex-numeric-stepper__minus-button), :global(.vtex-numeric-stepper__plus-button){
+ width: 100%;
+ height: 100%;
+ background: transparent;
+ border: 0;
+ }
+
+ :global(.vtex-numeric-stepper-container){
+ height: 49px;
+ border: 1px solid #CCCCCC;
+ }
+
+ :global(.vtex-numeric-stepper__input){
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ color: #929292;
+ }
+
+ :global(.vtex-numeric-stepper__minus-button), :global(.vtex-numeric-stepper__plus-button){
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ color: #000000;
+ }
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index b70f851..02a70da 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -29,6 +29,10 @@
max-width: none;
}
+.skuSelectorNameContainer{
+ margin: 0;
+}
+
.productNameContainer{
text-align: right;
font-weight: 300;
@@ -36,3 +40,293 @@
line-height: 34px;
color: #575757;
}
+
+
+.skuSelectorContainer{
+ display: flex;
+ flex-direction: column-reverse;
+
+ .skuSelectorSubcontainer--cor{
+ .skuSelectorName {
+ font-size: 0;
+ &::after{
+ content: "Outras cores";
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+ text-transform: uppercase;
+ }
+ }
+ }
+
+ .skuSelectorSubcontainer--tamanho{
+ .skuSelectorName {
+ font-size: 0;
+ &::after{
+ content: "Outros tamanhos:";
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+ text-transform: uppercase;
+ }
+ }
+ }
+
+
+ .skuSelectorSelectorImageValue{
+ display: none;
+ }
+
+ .skuSelectorOptionsList{
+ display: flex;
+ gap: 16px;
+ margin: 0;
+ margin-bottom: 2px;
+
+ .skuSelectorItem{
+ margin: 0;
+ width: 40px;
+ height: 40px;
+
+ .frameAround{
+ border-color: #000000;
+ border-radius: 50%;
+ border-width: 2px;
+ z-index: 5;
+
+ bottom: 0;
+ top: 0;
+ left: 0;
+ right: 0;
+ }
+
+ .skuSelectorInternalBox{
+ border: 1px solid #989898;
+ border-radius: 50%;
+
+ .valueWrapper{
+ padding: 0;
+ color: rgba(185, 185, 185, 0.6);
+ }
+ }
+
+ }
+
+ .skuSelectorItemImage{
+ width: 48px;
+ height: 48px;
+
+ .diagonalCross{
+ background: #D5D5D5;
+ top: 48%;
+ left: 1%;
+ width: 46px;
+ height: 1px;
+ transform: rotate(-45deg);
+ }
+ }
+
+ .skuSelectorItem--selected{
+ .skuSelectorInternalBox{
+ .valueWrapper{
+ color: #000000;
+ }
+ }
+ }
+}
+
+.diagonalCross{
+ background: #D5D5D5;
+ top: 46%;
+ left: 1%;
+ width: 38px;
+ height: 1px;
+ transform: rotate(-45deg);
+}
+}
+
+.buyButtonText{
+ font-size: 0;
+ &::after{
+ content: "ADICIONAR À SACOLA";
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 25px;
+ }
+}
+
+.shippingContainer{
+ width: 409px;
+ position: relative;
+ display: grid;
+ grid-template-areas: "label button notCep";
+ grid-template-columns: 56.4792% max-content 1fr;
+ margin-bottom: 16px;
+
+ :global(.vtex-input__label){
+ font-size: 0;
+ &::after{
+ content: "CALCULAR FRETE:";
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+ }
+ }
+
+ :global(.vtex-address-form__postalCode){
+ padding: 0;
+ :global(.vtex-input){
+ grid-area: label;
+
+ :global(.vtex-input-prefix__group){
+ :global(.vtex-address-form-4-x-input){
+ padding: 0 16px;
+ &::placeholder{
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ color: #AFAFAF;
+ }
+ }
+ :global(.vtex-input__suffix){
+ display: none;
+ }
+ }
+ }
+
+ :global(.vtex-address-form__postalCode-forgottenURL){
+ grid-area: notCep;
+ position: absolute;
+ right: 0;
+ top: 43px;
+ padding: 0;
+
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ text-decoration-line: underline;
+
+ :last-child{
+ color: #000000;
+ }
+
+ :global(.vtex__icon-external-link){
+ display: none;
+ }
+ }
+
+ :global(.vtex-input-prefix__group){
+ height: 49px;
+ border-radius: 0;
+ box-sizing: border-box;
+ }
+ }
+
+ :global(.vtex-button){
+ grid-area: button;
+ width: max-content;
+ height: max-content;
+ background-color: #000000;
+ margin-top: 27px;
+ margin-left: -2px;
+ border-radius: 0;
+ border: 0;
+ padding: 0;
+
+ :global(.vtex-button__label){
+ font-size: 0;
+ width: 49px;
+ height: 49px;
+ padding: 0;
+ &::after{
+ content: "OK";
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ color: #FFFFFF;
+ }
+ }
+ }
+}
+
+.shippingTable {
+ border: 0;
+ padding: 0;
+ margin: 0;
+ width: max-content;
+
+ .shippingTableHead {
+ display: table-caption;
+ text-align: left;
+
+ .shippingTableRow{
+ display: grid;
+ grid-template-areas: "entrega frete prazo";
+ grid-template-columns: 1fr 1fr 1fr;
+ .shippingTableHeadDeliveryName, .shippingTableHeadDeliveryEstimate, .shippingTableHeadDeliveryPrice{
+ font-weight: 400;
+ font-size: 14px;
+ color: #202020;
+ text-transform: uppercase;
+
+ padding: 0;
+ padding-bottom: 15px;
+ }
+
+ .shippingTableHeadDeliveryName{
+ grid-area: entrega;
+ }
+
+ .shippingTableHeadDeliveryEstimate{
+ grid-area: prazo;
+ }
+
+ .shippingTableHeadDeliveryPrice{
+ grid-area: frete;
+ }
+
+ .shippingTableHeadDeliveryPrice{
+ font-size: 0;
+ &::after{
+ content: "FRETE";
+ font-weight: 400;
+ font-size: 14px;
+ color: #202020;
+ text-transform: uppercase;
+ }
+ }
+ }
+
+
+ }
+
+ .shippingTableBody{
+ display: table-cell;
+
+ .shippingTableRow{
+ display: grid;
+ grid-template-areas: "entrega frete prazo";
+ grid-template-columns: 1fr 1fr 1fr;
+
+ .shippingTableCell{
+ padding: 0;
+ padding-bottom: 15px;
+
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ }
+
+ .shippingTableRadioBtn{
+ display: none;
+ }
+
+ .shippingTableCellDeliveryEstimate{
+ grid-area: prazo;
+ }
+ }
+ }
+}