diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 06be4ab..c5c13ca 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -1,3 +1,10 @@
-[class*="html--buy-button"]{
- display: flex;
+@media(min-width:769px){
+ [class*="html--buy-button"]{
+ display: flex;
+ }
+}
+@media(max-width: 768px){
+ [class*="html--buy-button"]{
+ display: block;
+ }
}
diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc
index b3dc525..7b616f6 100644
--- a/store/blocks/pdp/product-assembly.jsonc
+++ b/store/blocks/pdp/product-assembly.jsonc
@@ -6,12 +6,6 @@
},
"children": ["html#buy-button"]
},
- "product-assembly-options": {
- "children": [
- "flex-layout.row#product-assembly-options",
- "assembly-option-input-values"
- ]
- },
"assembly-option-input-values": {
"props": {
"optionsDisplay": "box"
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index bd95902..2caab25 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -117,10 +117,8 @@
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments",
- "product-separator",
"availability-subscriber",
"sku-selector",
- "product-assembly-options",
"product-gifts",
"html#buy-button",
"shipping-simulator"
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 4125368..39d6339 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -21,6 +21,11 @@
margin-top: 24px;
width: 375px;
}
+@media only screen and (max-width: 1023px) {
+ .flexRowContent--message-availability {
+ width: 100%;
+ }
+}
.sellingPriceValue {
font-size: 50px;
@@ -43,6 +48,12 @@
height: 49px;
margin-top: 8px;
}
+@media only screen and (max-width: 767px) {
+ .flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) {
+ margin: 0 0 16px;
+ height: auto;
+ }
+}
.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
font-size: 0;
}
@@ -51,6 +62,6 @@
content: "ADICIONAR À SACOLA";
font-size: 18px;
font-weight: 400;
- padding: 12px 0;
+ padding: 12px 64px;
line-height: 22px;
}
\ No newline at end of file
diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css
index 3466fe3..f6f1f04 100644
--- a/styles/css/vtex.product-identifier.css
+++ b/styles/css/vtex.product-identifier.css
@@ -15,6 +15,12 @@
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
}
+@media only screen and (max-width: 1023px) {
+ .product-identifier--productReference {
+ justify-content: start;
+ margin-bottom: 24px;
+ }
+}
.product-identifier--productReference .product-identifier__label {
display: none;
}
diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css
index b9db5c7..5369bca 100644
--- a/styles/css/vtex.product-price.css
+++ b/styles/css/vtex.product-price.css
@@ -15,18 +15,34 @@
}
.installments {
- font-weight: 300;
- font-size: 16px;
- line-height: 22px;
+ display: flex;
+ font-size: 0;
color: #929292;
+ margin-bottom: 8px;
}
.installments .installmentsNumber {
font-weight: 700;
font-size: 16px;
line-height: 22px;
}
+.installments .installmentsNumber::after {
+ content: "x ";
+}
.installments .installmentValue {
font-weight: 700;
font-size: 16px;
line-height: 22px;
+}
+.installments .installmentValue::before {
+ content: "de ";
+ margin-left: 5px;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+}
+.installments .installmentValue::after {
+ content: " sem juros";
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
}
\ No newline at end of file
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
index f874c99..4d473d3 100644
--- a/styles/css/vtex.product-quantity.css
+++ b/styles/css/vtex.product-quantity.css
@@ -14,6 +14,11 @@
width: 149px;
margin-right: 10px;
}
+@media only screen and (max-width: 767px) {
+ .quantitySelectorContainer {
+ margin-bottom: 10px;
+ }
+}
.quantitySelectorContainer .quantitySelectorTitle {
display: none;
}
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 2f5b631..258140a 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -16,8 +16,8 @@
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
/*PRODUTO INDISPONIVEL, TEXTOS */
- /* FORMULARIO DE PRODUTO INDISPONIVEL */
/* BUSCA DE CEP */
+ /* TRANSPORTADORAS */
}
.container .productNameContainer--quickview {
text-align: end;
@@ -26,6 +26,11 @@
line-height: 34px;
color: #575757;
}
+@media only screen and (max-width: 1023px) {
+ .container .productNameContainer--quickview {
+ text-align: start;
+ }
+}
.container .skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
@@ -106,6 +111,8 @@
}
.container .subscriberContainer {
width: 100%;
+ margin-top: 24px;
+ /* FORMULARIO DE PRODUTO INDISPONIVEL */
}
.container .subscriberContainer .title {
font-size: 0;
@@ -128,30 +135,41 @@
line-height: 19px;
color: #868686;
}
-.container .form {
+.container .subscriberContainer .form {
position: relative;
}
-.container .form :global(.vtex-store-components-3-x-content) {
+.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) {
width: 374.65px;
display: block;
margin-top: 16px;
}
-.container .form :global(.vtex-store-components-3-x-content) .inputName {
+@media only screen and (max-width: 1023px) {
+ .container .subscriberContainer .form :global(.vtex-store-components-3-x-content) {
+ width: 100%;
+ max-width: 100%;
+ }
+}
+.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName {
width: 182.46px;
margin-right: 10.08px;
margin-bottom: 15px;
}
-.container .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-input-prefix__group) {
+@media only screen and (max-width: 1023px) {
+ .container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName {
+ width: 49%;
+ }
+}
+.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-input-prefix__group) {
border: 0.6px solid #929292;
border-radius: 0;
}
-.container .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) {
+.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) {
padding: 0 14px;
font-size: 12px;
line-height: 28px;
color: #929292;
}
-.container .form :global(.vtex-store-components-3-x-content) .inputEmail {
+.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
position: absolute;
left: 51%;
top: 0%;
@@ -160,21 +178,28 @@
font-weight: 400;
margin-bottom: 15px;
}
-.container .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) {
+@media only screen and (max-width: 1023px) {
+ .container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
+ width: -webkit-fill-available;
+ margin: 0 0 0 8px;
+ left: 49%;
+ }
+}
+.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) {
border: 0.6px solid #929292;
border-radius: 0;
}
-.container .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
padding: 0 14px;
font-size: 12px;
line-height: 28px;
color: #929292;
}
-.container .form :global(.vtex-store-components-3-x-content) .submit {
+.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit {
width: 100%;
margin-bottom: 16px;
}
-.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) {
+.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) {
width: 100%;
height: 49px;
background-color: #000000;
@@ -185,7 +210,7 @@
align-items: center;
justify-content: center;
}
-.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before {
+.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before {
content: "AVISE-ME";
color: #fff;
font-weight: 600;
@@ -193,17 +218,28 @@
line-height: 25px;
font-family: "Open sans", sans-serif;
}
-.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) :global(.vtex-button__label) {
+.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) :global(.vtex-button__label) {
padding: 0;
}
.container .shippingContainer {
display: flex;
}
+@media only screen and (max-width: 767px) {
+ .container .shippingContainer {
+ display: block;
+ position: relative;
+ }
+}
.container .shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
align-items: center;
padding: 0;
}
+@media only screen and (max-width: 767px) {
+ .container .shippingContainer :global(.vtex-address-form__postalCode) {
+ display: block;
+ }
+}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) {
font-size: 0;
}
@@ -219,6 +255,11 @@
height: 49px;
border-radius: 0;
}
+@media only screen and (max-width: 767px) {
+ .container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
+ width: 100%;
+ }
+}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
padding: 0;
margin-top: 25px;
@@ -229,6 +270,13 @@
line-height: 16px;
text-decoration: underline;
}
+@media only screen and (max-width: 767px) {
+ .container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+ left: 0;
+ margin-top: 8px;
+ text-align: end;
+ }
+}
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
color: #000000;
}
@@ -245,6 +293,13 @@
border-radius: 0;
cursor: pointer;
}
+@media only screen and (max-width: 767px) {
+ .container .shippingContainer :global(.vtex-button) {
+ position: absolute;
+ right: 0px;
+ top: 0px;
+ }
+}
.container .shippingContainer :global(.vtex-button)::before {
content: "OK";
font-weight: 600;
@@ -255,6 +310,95 @@
.container .shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
height: fit-content;
}
+.container .shippingTable {
+ border: none;
+ padding: 0;
+ margin: 15px 0;
+}
+.container .shippingTable .shippingTableHead {
+ display: block;
+ text-transform: uppercase;
+ margin-bottom: 15px;
+}
+.container .shippingTable .shippingTableHead .shippingTableRow {
+ display: flex;
+ flex-direction: row;
+}
+.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
+ margin-right: 39px;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #202020;
+}
+@media only screen and (max-width: 767px) {
+ .container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
+ margin-right: 32px;
+ }
+}
+.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
+ display: flex;
+ order: 1;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #202020;
+}
+.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
+ font-size: 0;
+ margin-right: 30px;
+}
+@media only screen and (max-width: 767px) {
+ .container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
+ margin-right: 32px;
+ }
+}
+.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before {
+ content: "Frete";
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #202020;
+}
+.container .shippingTable .shippingTableBody .shippingTableRow {
+ display: flex;
+ flex-direction: row;
+}
+.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
+ width: 82px;
+ margin-right: 28px;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ color: #afafaf;
+}
+@media only screen and (max-width: 767px) {
+ .container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
+ margin-right: 22px;
+ }
+}
+.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
+ display: flex;
+ order: 1;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ color: #afafaf;
+}
+.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
+ width: 50px;
+ margin-right: 28px;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ color: #afafaf;
+}
+.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
+ padding: 0 0 15px;
+}
+.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn {
+ display: none;
+}
.productImage {
width: max-content;
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 3584833..8d9a06b 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -14,6 +14,9 @@
.flexRowContent--message-availability {
margin-top: 24px;
width: 375px;
+ @include mq(md, max) {
+ width: 100%;
+ }
}
.sellingPriceValue {
@@ -34,6 +37,10 @@
border: none;
height: 49px;
margin-top: 8px;
+ @include mq(sm, max) {
+ margin: 0 0 16px;
+ height: auto;
+ }
:global(.vtex-button__label) {
:global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
font-size: 0;
@@ -42,7 +49,7 @@
content: "ADICIONAR À SACOLA";
font-size: 18px;
font-weight: 400;
- padding: 12px 0;
+ padding: 12px 64px;
line-height: 22px;
}
}
diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss
index 9c71e9d..5e433e6 100644
--- a/styles/sass/pages/product/vtex.product-identifier.scss
+++ b/styles/sass/pages/product/vtex.product-identifier.scss
@@ -5,6 +5,10 @@
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
+ @include mq(md, max) {
+ justify-content: start;
+ margin-bottom: 24px;
+ }
.product-identifier__label {
display: none;
diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss
index 084e5de..6d12f64 100644
--- a/styles/sass/pages/product/vtex.product-price.scss
+++ b/styles/sass/pages/product/vtex.product-price.scss
@@ -6,18 +6,35 @@
}
.installments {
- font-weight: 300;
- font-size: 16px;
- line-height: 22px;
+ display: flex;
+ font-size: 0;
color: $color-gray-6;
+ margin-bottom: 8px;
.installmentsNumber {
font-weight: 700;
font-size: 16px;
line-height: 22px;
+
+ &::after {
+ content: "x ";
+ }
}
.installmentValue {
font-weight: 700;
font-size: 16px;
line-height: 22px;
+ &::before {
+ content: "de ";
+ margin-left: 5px;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ }
+ &::after {
+ content: " sem juros";
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ }
}
}
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
index f897cc6..ccc39fb 100644
--- a/styles/sass/pages/product/vtex.product-quantity.scss
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -4,6 +4,9 @@
margin-bottom: 16px;
width: 149px;
margin-right: 10px;
+ @include mq(sm, max) {
+ margin-bottom: 10px;
+ }
.quantitySelectorTitle {
display: none;
}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index fc449fa..d870b2f 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -10,6 +10,9 @@
font-size: 20px;
line-height: 34px;
color: $color-gray-7;
+ @include mq(md, max) {
+ text-align: start;
+ }
}
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
@@ -121,6 +124,7 @@
/*PRODUTO INDISPONIVEL, TEXTOS */
.subscriberContainer {
width: 100%;
+ margin-top: 24px;
.title {
font-size: 0;
margin-bottom: 0;
@@ -144,42 +148,29 @@
color: $color-gray-9;
}
}
- }
-
- /* FORMULARIO DE PRODUTO INDISPONIVEL */
- .form {
- position: relative;
- :global(.vtex-store-components-3-x-content) {
- width: 374.65px;
- display: block;
- margin-top: 16px;
- .inputName {
- width: 182.46px;
- margin-right: 10.08px;
- margin-bottom: 15px;
- :global(.vtex-input-prefix__group) {
- border: 0.6px solid $color-gray-6;
- border-radius: 0;
+ /* FORMULARIO DE PRODUTO INDISPONIVEL */
+ .form {
+ position: relative;
+ :global(.vtex-store-components-3-x-content) {
+ width: 374.65px;
+ display: block;
+ margin-top: 16px;
+ @include mq(md, max) {
+ width: 100%;
+ max-width: 100%;
}
- :global(.vtex-styleguide-9-x-input) {
- padding: 0 14px;
- font-size: 12px;
- line-height: 28px;
- color: $color-gray-6;
- }
- }
- .inputEmail {
- position: absolute;
- left: 51%;
- top: 0%;
- border-radius: 0;
- width: 182.46px;
- font-weight: 400;
- margin-bottom: 15px;
+ .inputName {
+ width: 182.46px;
+ margin-right: 10.08px;
+ margin-bottom: 15px;
+ @include mq(md, max) {
+ width: 49%;
+ }
- :global(.vtex-input-prefix__group) {
- border: 0.6px solid $color-gray-6;
- border-radius: 0;
+ :global(.vtex-input-prefix__group) {
+ border: 0.6px solid $color-gray-6;
+ border-radius: 0;
+ }
:global(.vtex-styleguide-9-x-input) {
padding: 0 14px;
font-size: 12px;
@@ -187,31 +178,56 @@
color: $color-gray-6;
}
}
- }
- .submit {
- width: 100%;
- margin-bottom: 16px;
- :global(.vtex-button) {
- width: 100%;
- height: 49px;
- background-color: $color-black-padrao;
- border: none;
+ .inputEmail {
+ position: absolute;
+ left: 51%;
+ top: 0%;
border-radius: 0;
- font-size: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- &::before {
- content: "AVISE-ME";
- color: $color-white;
- font-weight: 600;
- font-size: 18px;
- line-height: 25px;
- font-family: "Open sans", sans-serif;
+ width: 182.46px;
+ font-weight: 400;
+ margin-bottom: 15px;
+ @include mq(md, max) {
+ width: -webkit-fill-available;
+ margin: 0 0 0 8px;
+ left: 49%;
}
- :global(.vtex-button__label) {
- padding: 0;
+ :global(.vtex-input-prefix__group) {
+ border: 0.6px solid $color-gray-6;
+ border-radius: 0;
+ :global(.vtex-styleguide-9-x-input) {
+ padding: 0 14px;
+ font-size: 12px;
+ line-height: 28px;
+ color: $color-gray-6;
+ }
+ }
+ }
+ .submit {
+ width: 100%;
+ margin-bottom: 16px;
+ :global(.vtex-button) {
+ width: 100%;
+ height: 49px;
+ background-color: $color-black-padrao;
+ border: none;
+ border-radius: 0;
+ font-size: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ &::before {
+ content: "AVISE-ME";
+ color: $color-white;
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 25px;
+ font-family: "Open sans", sans-serif;
+ }
+
+ :global(.vtex-button__label) {
+ padding: 0;
+ }
}
}
}
@@ -221,10 +237,17 @@
/* BUSCA DE CEP */
.shippingContainer {
display: flex;
+ @include mq(sm, max) {
+ display: block;
+ position: relative;
+ }
:global(.vtex-address-form__postalCode) {
display: flex;
align-items: center;
padding: 0;
+ @include mq(sm, max) {
+ display: block;
+ }
:global(.vtex-input__label) {
font-size: 0;
&::before {
@@ -239,6 +262,9 @@
width: 280px;
height: 49px;
border-radius: 0;
+ @include mq(sm, max) {
+ width: 100%;
+ }
}
:global(.vtex-address-form__postalCode-forgottenURL) {
padding: 0;
@@ -249,6 +275,11 @@
font-size: 12px;
line-height: 16px;
text-decoration: underline;
+ @include mq(sm, max) {
+ left: 0;
+ margin-top: 8px;
+ text-align: end;
+ }
:last-child {
color: $color-black-padrao;
}
@@ -266,6 +297,12 @@
font-size: 0;
border-radius: 0;
cursor: pointer;
+
+ @include mq(sm, max) {
+ position: absolute;
+ right: 0px;
+ top: 0px;
+ }
&::before {
content: "OK";
font-weight: 600;
@@ -278,6 +315,100 @@
}
}
}
+
+ /* TRANSPORTADORAS */
+ .shippingTable {
+ border: none;
+ padding: 0;
+ margin: 15px 0;
+ .shippingTableHead {
+ display: block;
+ text-transform: uppercase;
+ margin-bottom: 15px;
+ .shippingTableRow {
+ display: flex;
+ flex-direction: row;
+ .shippingTableHeadDeliveryName {
+ margin-right: 39px;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: $color-black2;
+ @include mq(sm, max) {
+ margin-right: 32px;
+ }
+ }
+
+ .shippingTableHeadDeliveryEstimate {
+ display: flex;
+ order: 1;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: $color-black2;
+ }
+
+ .shippingTableHeadDeliveryPrice {
+ font-size: 0;
+ margin-right: 30px;
+ @include mq(sm, max) {
+ margin-right: 32px;
+ }
+ &::before {
+ content: "Frete";
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: $color-black2;
+ }
+ }
+ }
+ }
+
+ .shippingTableBody {
+ .shippingTableRow {
+ display: flex;
+ flex-direction: row;
+ .shippingTableCellDeliveryName {
+ width: 82px;
+ margin-right: 28px;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ color: $color-gray-10;
+ @include mq(sm, max) {
+ margin-right: 22px;
+ }
+ }
+
+ .shippingTableCellDeliveryEstimate {
+ display: flex;
+ order: 1;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ color: $color-gray-10;
+ }
+
+ .shippingTableCellDeliveryPrice {
+ width: 50px;
+ margin-right: 28px;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ color: $color-gray-10;
+ }
+ .shippingTableCell {
+ padding: 0 0 15px;
+ .shippingTableLabel {
+ .shippingTableRadioBtn {
+ display: none;
+ }
+ }
+ }
+ }
+ }
+ }
}
.productImage {
diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss
index 1257d59..30a8dc3 100644
--- a/styles/sass/utils/_vars.scss
+++ b/styles/sass/utils/_vars.scss
@@ -1,5 +1,6 @@
$color-black: #292929;
$color-black-padrao: #000000;
+$color-black2: #202020;
$color-white: #fff;
$color-gray: #6c6c6c;
@@ -11,6 +12,7 @@ $color-gray-6: #929292;
$color-gray-7: #575757;
$color-gray-8: #989898;
$color-gray-9: #868686;
+$color-gray-10: #afafaf;
$color-blue: #4267b2;
@@ -20,10 +22,10 @@ $color-green: #4caf50;
$grid-breakpoints: (
xs: 0,
cstm: 400,
- sm: 576px,
- md: 768px,
- lg: 992px,
- xl: 1200px,
+ sm: 768px,
+ md: 1024px,
+ lg: 1920px,
+ xl: 1921px,
) !default;
$z-index: (