feat: Finalização coluna da direita pdp Desktop

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",

react/DescriptionSection.tsx

@@ -0,0 +1,3 @@
+import { DescriptionSection } from "./components/description-section";
+
+export default DescriptionSection;

react/SKUSelectorPDP.tsx

@@ -0,0 +1,3 @@
+import { SkuSelectorPDP } from "./components/sku-selector-pdp";
+
+export default SkuSelectorPDP;

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 (
     <div className={styles.containerDescontPix}>
       <img src={logopix} alt="Desconto no PIX" />

react/components/descont-pix/styles.css

@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   margin-top: 8px;
+  margin-bottom: 16px;
 }
 
 .containerDescontPix img {

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 (
+    <section className={styles.containerDescriptionSection}>
+      <nav>
+        <ul className={styles.containerDescriptionSectionNav}>
+          <li className={styles.linkContainer}><a className={styles.active} href="#description1">Descrição</a></li>
+          <li className={styles.linkContainer}><a href="#description2">Descrição</a></li>
+          <li className={styles.linkContainer}><a href="#description3">Descrição</a></li>
+          <li className={styles.linkContainer}><a href="#description4">Descrição</a></li>
+          <li className={styles.linkContainer}><a href="#description5">Descrição</a></li>
+        </ul>
+      </nav>
+
+      <div className={styles.wrapperImageAndDescription}>
+        <img className={styles.imageProductDescriptionSection} src={imageProduct} alt={imageProductAlt} />
+        <div className={styles.wrapperDescriptionSection}>
+          <h3 className={styles.descriptionSectionTitle}>Descrição do produto</h3>
+          <p className={styles.descriptionSectionParagraph}>{descriptionProduct}</p>
+        </div>
+      </div>
+    </section>
+  );
+}

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;
+} */

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;
 

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)
 

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;
+}

react/components/sku-selector-pdp/styles.css

@@ -0,0 +1,3 @@
+.containerSKUSelector{
+  display: flex;
+}

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-separator",
-      "product-identifier.product",
+      // "product-identifier.product",
+      // "sku-selector-pdp",
       "sku-selector",
-      "product-quantity",
+      "flex-layout.row#quantity-and-buy-button",
-      "product-assembly-options",
+      // "product-quantity",
-      "product-gifts",
+      // "product-assembly-options",
-      "flex-layout.row#buy-button",
+      // "product-gifts",
+      // "flex-layout.row#buy-button",
       "availability-subscriber",
-      "shipping-simulator",
+      "shipping-simulator"
-      "share#default"
+      // "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"

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"

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%;
 }

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;
+}

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;
 }

styles/sass/pages/product/agenciamagma.store-theme.scss

@@ -1 +0,0 @@
-

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%;
+}

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;
+  }
+}

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;
+      }
+    }
+  }
+}