Merge pull request 'Entrega do Desafio' (#7) from feature/challenge-vtex-io into develop

Reviewed-on: #7

react/Authors.tsx

@@ -0,0 +1,3 @@
+import Authors from "./components/Authors/Authors";
+
+export default Authors;

react/Autores.tsx

@@ -1,3 +0,0 @@
-import Autores from "./components/Autores/Autores";
-
-export default Autores;

react/InstallmentProduct.tsx

@@ -1,3 +0,0 @@
-import InstallmentProduct from "./components/InstallmentProduct/InstallmentProduct";
-
-export default InstallmentProduct;

react/components/Authors/Authors.tsx

@@ -1,17 +1,18 @@
 import React from "react";
+import styles from "./styles.css";
 
-const Autores = () => {
+const Authors = () => {
   return (
-    <div className="vtex-menu-2-x-AutoresBlock">
+    <div>
-      <ul className="vtex-menu-2-x-Autores-Group">
+      <ul className={styles.AutoresGroup}>
-        <li className="vtex-menu-2-x-Autores-List">
+        <li className={styles.AutoresList}>
           Powered by
           <img
             src="https://agenciamagma.vteximg.com.br/arquivos/logovtex-m3academy-anacarolinaduartecavalcante.svg"
             alt="ícone logo vtex"
           />
         </li>
-        <li className="vtex-menu-2-x-Autores-List">
+        <li className={styles.AutoresList}>
           Developed by
           <img
             src="https://agenciamagma.vteximg.com.br/arquivos/logom3-m3academy-anacarolinaduartecavalcante.svg"
@@ -23,4 +24,4 @@ const Autores = () => {
   );
 };
 
-export default Autores;
+export default Authors;

react/components/Authors/styles.css

@@ -0,0 +1,20 @@
+/* Footer Credits */
+
+.AutoresGroup {
+  display: flex;
+  align-items: center;
+  column-gap: 15.73px;
+  margin: 0;
+  padding: 0;
+
+}
+
+.AutoresList {
+  display: flex;
+  align-items: center;
+  font-weight: 400;
+  font-size: 10px;
+  line-height: 12px;
+  color: #ffffff;
+  column-gap: 8.72px;
+}

react/components/InstallmentProduct/InstallmentProduct.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { useProduct } from "vtex.product-context";
-import styles from "./styles.css";
-
-const InstallmentProduct = () => {
-  const product = useProduct();
-  const productWithInstallments = {
-    numberOfInstallments:
-      product?.selectedItem?.sellers[0].commertialOffer.Installments[3]
-        .NumberOfInstallments,
-    value:
-      product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value,
-  };
-  return (
-    <p className={styles.PriceContent}>
-      <span style={{fontWeight: "700"}}>{productWithInstallments.numberOfInstallments}x&nbsp;</span>
-      de&nbsp;
-      <span style={{fontWeight: "700"}}>
-        R$&nbsp;
-        {productWithInstallments.value?.toFixed(2).toString().replace(".", ",")}
-      </span>{" "}
-      sem juros
-    </p>
-  );
-};
-
-export default InstallmentProduct;

react/components/InstallmentProduct/styles.css

@@ -1,7 +0,0 @@
-.PriceContent {
-  margin: 0;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 22px;
-  color: #929292;
-}

react/components/PaymentMethods/PaymentMethods.tsx

@@ -1,65 +1,66 @@
 import React from "react";
+import styles from "./styles.css";
 
 const PaymentMethods = () => {
   return (
-    <div className="vtex-menu-2-x-FooterRightBlock">
+    <div className={styles.FooterRightBlock}>
-      <span className="vtex-menu-2-x-SpanTitleBig">Formas de pagamento</span>
+      <span className={styles.SpanTitleBig}>Formas de pagamento</span>
-      <ul className="vtex-menu-2-x-UlGroup">
+      <ul className={styles.UlGroup}>
-        <ul className="vtex-menu-2-x-UlSecondary">
+        <ul className={styles.UlSecondary}>
           <li>
             <img
-              className="vtex-menu-2-x-ImgCard"
+              className={styles.ImgCard}
               src="https://agenciamagma.vteximg.com.br/arquivos/mastercard-icon-m3academy-anacarolinaduartecavalcante.svg"
               alt="ícone mastercard"
             />
           </li>
           <li>
             <img
-              className="vtex-menu-2-x-ImgCard"
+              className={styles.ImgCard}
               src="https://agenciamagma.vteximg.com.br/arquivos/diners-icon-m3academy-anacarolinaduartecavalcante.svg"
               alt="ícone diners"
             />
           </li>
           <li>
             <img
-              className="vtex-menu-2-x-ImgCard"
+              className={styles.ImgCard}
               src="https://agenciamagma.vteximg.com.br/arquivos/boleto-icon-m3academy-anacarolinaduartecavalcante.svg"
               alt="ícone boleto"
             />
           </li>
           <li>
             <img
-              className="vtex-menu-2-x-ImgCard"
+              className={styles.ImgCard}
               src="https://agenciamagma.vteximg.com.br/arquivos/pix-icon-m3academy-anacarolinaduartecavalcante.svg"
               alt="ícone pix"
             />
           </li>
         </ul>
-        <ul className="vtex-menu-2-x-UlSecondary">
+        <ul className={styles.UlSecondary}>
           <li>
             <img
-              className="vtex-menu-2-x-ImgCard"
+              className={styles.ImgCard}
               src="https://agenciamagma.vteximg.com.br/arquivos/elo-icon-m3academy-anacarolinaduartecavalcante.svg"
               alt="ícone elo"
             />
           </li>
           <li>
             <img
-              className="vtex-menu-2-x-ImgCard"
+              className={styles.ImgCard}
               src="https://agenciamagma.vteximg.com.br/arquivos/hipercard-icon-m3academy-anacarolinaduartecavalcante.svg"
               alt="ícone hipercard"
             />
           </li>
           <li>
             <img
-              className="vtex-menu-2-x-ImgCard"
+              className={styles.ImgCard}
               src="https://agenciamagma.vteximg.com.br/arquivos/visa-icon-m3academy-anacarolinaduartecavalcante.svg"
               alt="ícone visa"
             />
           </li>
           <li>
             <img
-              className="vtex-menu-2-x-ImgCard"
+              className={styles.ImgCard}
               src="https://agenciamagma.vteximg.com.br/arquivos/amex-icon-m3academy-anacarolinaduartecavalcante.svg"
               alt="ícone amex"
             />

react/components/PaymentMethods/styles.css

@@ -0,0 +1,92 @@
+.FooterRightBlock {
+  margin-bottom: 16px;
+}
+
+@media (max-width: 1025px) and (min-width: 768px) {
+  .FooterRightBlock {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 0;
+  }
+}
+
+@media (max-width: 768px) and (min-width: 375px) {
+  .FooterRightBlock {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 0;
+  }
+}
+
+.SpanTitle {
+  color: #ffffff;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 38px;
+}
+
+.SpanTitleBig {
+  color: #ffffff;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+
+
+}
+
+@media (max-width: 1025px) and (min-width: 768px) {
+  .SpanTitleBig {
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 768px) and (min-width: 375px) {
+  .SpanTitleBig {
+    font-size: 14px;
+  }
+}
+
+.UlGroup {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  row-gap: 4px;
+}
+
+@media (max-width: 1025px) and (min-width: 768px) {
+  .UlGroup {
+    align-items: center;
+  }
+}
+
+@media (max-width: 768px) and (min-width: 375px) {
+  .UlGroup {
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.UlSecondary {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  column-gap: 8px;
+  list-style: none;
+}
+
+@media (max-width: 1025px) and (min-width: 768px) {
+  .ImgCard {
+    width: 42px;
+  }
+}
+
+@media (max-width: 768px) and (min-width: 375px) {
+  .ImgCard {
+    width: 42px;
+  }
+}

react/components/Pix/Pix.tsx

@@ -18,9 +18,9 @@ const Pix = () => {
         alt="logo pix"
       />
       <div className={styles.PixDiscount}>
-        <span className={styles.TextPixDiscount}>
+        <p className={styles.TextPixDiscount}>
           R$&nbsp;{pixPrice?.toFixed(2).toString().replace(".", ",")}
-        </span>
+        </p>
         <span className={styles.TextDiscount}>10 % de desconto</span>
       </div>
     </div>

react/components/Pix/styles.css

@@ -22,10 +22,11 @@
   font-size: 18px;
   line-height: 25px;
   color: rgba(0, 0, 0, 0.58);
+  margin: 0;
 }
 
 .TextDiscount {
-  font-weight: 300 ;
+  font-weight: 300;
   font-size: 13px;
   line-height: 18px;
   color: #929292;

react/components/Social/Social.tsx

@@ -1,11 +1,12 @@
 import React from "react";
+import styles from "./styles.css";
 
 const Social = () => {
   return (
-    <div className="vtex-menu-2-x-FooterRightBlock">
+    <div className={styles.FooterRightBlockSocial}>
-      <span className="vtex-menu-2-x-SpanTitle">Nos siga</span>
+      <span className={styles.SpanTitleSocial}>Nos siga</span>
-      <ul className="vtex-menu-2-x-UlGroup">
+      <ul className={styles.UlGroupSocial}>
-        <ul className="vtex-menu-2-x-UlSecondary">
+        <ul className={styles.UlSecondarySocial}>
           <li>
             <a href="/">
               <img
@@ -47,7 +48,7 @@ const Social = () => {
             </a>
           </li>
         </ul>
-        <ul className="vtex-menu-2-x-UlSecondary">
+        <ul className={styles.UlSecondarySocial}>
           <li>
             <a href="/">
               <img
@@ -73,7 +74,6 @@ const Social = () => {
             </a>
           </li>
           <li>
-            {" "}
             <a href="/">
               <img
                 src="https://agenciamagma.vteximg.com.br/arquivos/youtube-m3academy-anacarolinaduartecavalcante.svg"

react/components/Social/styles.css

@@ -0,0 +1,59 @@
+.FooterRightBlockSocial {
+  margin-bottom: 16px;
+}
+
+@media (max-width: 1025px) and (min-width: 768px) {
+  .FooterRightBlockSocial {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 0;
+  }
+}
+
+@media (max-width: 768px) and (min-width: 375px) {
+  .FooterRightBlockSocial {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 0;
+  }
+}
+
+.SpanTitleSocial {
+  color: #ffffff;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 38px;
+}
+
+.UlGroupSocial {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  row-gap: 4px;
+}
+
+@media (max-width: 1025px) and (min-width: 768px) {
+  .UlGroupSocial {
+    align-items: center;
+  }
+}
+
+@media (max-width: 768px) and (min-width: 375px) {
+  .UlGroupSocial {
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.UlSecondarySocial {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  column-gap: 8px;
+  list-style: none;
+}

react/index.d.ts

@@ -1,7 +0,0 @@
-declare module "*.css" {
-  interface IClassNames {
-    [className: string]: string;
-  }
-  const classNames: IClassNames;
-  export = classNames;
-}

react/tsconfig.json

@@ -7,11 +7,5 @@
     "moduleResolution": "node",
     "target": "es2017"
   },
-  "include": [
+  "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"]
-    "./typings/*.d.ts",
-    "./**/*.tsx",
-    "./**/*.ts",
-    "components/SwiperComponent/SwiperComponent.tsxonent.tsx",
-    "SwiperComponent.tsxonenSwiperComponent.tsxwiperComponent.tsx"
-  ]
 }

react/typings/css.d.ts

@@ -0,0 +1,4 @@
+declare module "*.css" {
+    const css: any;
+    export default css;
+}

react/typings/global.d.ts

@@ -0,0 +1,7 @@
+export interface TimeSplit {
+    hours: string
+    minutes: string
+    seconds: string
+}
+
+type GenericObject = Record<string, any>

react/typings/graphql.d.ts

@@ -0,0 +1,6 @@
+declare module "*.graphql" {
+    import { DocumentNode } from "graphql";
+
+    const value: DocumentNode;
+    export default value;
+}

react/typings/storefront.d.ts

@@ -0,0 +1,15 @@
+import { FunctionComponent } from "react";
+
+declare global {
+  interface StorefrontFunctionComponent<P = GenericObject>
+    extends FunctionComponent<P> {
+    getSchema?(props: P): GenericObject
+    schema?: GenericObject
+  }
+
+  interface StorefrontComponent<P = GenericObject, S = GenericObject>
+    extends Component<P, S> {
+    getSchema?(props: P): GenericObject
+    schema: GenericObject
+  }
+}

react/typings/vtex.css-handles.ts

@@ -0,0 +1 @@
+declare module "vtex.css-handles"

react/typings/vtex.order-manager.d.ts

@@ -0,0 +1,103 @@
+/* eslint-disable no-inner-declarations */
+declare module "vtex.order-manager/OrderQueue" {
+    export * from "vtex.order-manager/react/OrderQueue";
+    export { default } from "vtex.order-manager/react/OrderQueue";
+
+    export const QueueStatus = {
+        PENDING: "Pending",
+        FULFILLED: "Fulfilled",
+    } as const;
+}
+
+declare module "vtex.order-manager/OrderForm" {
+    import { createContext, useContext } from "react";
+    import type { DEFAULT_ORDER_FORM } from "@vtex/order-manager/src/constants";
+    import type { Context, OrderForm } from "@vtex/order-manager/src/typings";
+
+    type DefaultOrderForm = typeof DEFAULT_ORDER_FORM;
+    type DefaultOrderFormOmited = Omit<DefaultOrderForm, "items">;
+    type DefaultOrderFormUpdated = DefaultOrderFormOmited & {
+        items: OrderFormItem[] | null;
+    };
+
+    export const OrderFormContext = createContext<Context<OrderForm>>({
+        orderForm: DefaultOrderFormUpdated,
+        setOrderForm: noop,
+        error: undefined,
+        loading: false,
+    });
+
+    function useOrderForm<O extends OrderForm = DefaultOrderFormUpdated>() {
+        const context = useContext(OrderFormContext);
+
+        if (context === undefined) {
+            throw new Error(
+                "useOrderForm must be used within a OrderFormProvider"
+            );
+        }
+        return context as Context<O>;
+    }
+
+    export type OrderFormItem = {
+        additionalInfo: {
+            brandName: string;
+            __typename: string;
+        };
+        attachments: Array<any>;
+        attachmentOfferings: Array<any>;
+        bundleItems: Array<any>;
+        parentAssemblyBinding: any;
+        parentItemIndex: any;
+        sellingPriceWithAssemblies: any;
+        options: any;
+        availability: string;
+        detailUrl: string;
+        id: string;
+        imageUrls: Record<string, string>;
+        listPrice: number;
+        manualPrice: any;
+        measurementUnit: string;
+        modalType: any;
+        name: string;
+        offerings: Array<any>;
+        price: number;
+        priceTags: Array<any>;
+        productCategories: Record<string, string>;
+        productCategoryIds: string;
+        productRefId: string;
+        productId: string;
+        quantity: number;
+        seller: string;
+        sellingPrice: number;
+        skuName: string;
+        skuSpecifications: Array<any>;
+        unitMultiplier: number;
+        uniqueId: string;
+        refId: string;
+        isGift: boolean;
+        priceDefinition: {
+            calculatedSellingPrice: number;
+            total: number;
+            sellingPrices: Array<{
+                quantity: number;
+                value: number;
+                __typename: string;
+            }>;
+            __typename: string;
+        };
+        __typename: string;
+    };
+
+    export { OrderFormProvider, useOrderForm };
+    declare const _default: {
+        OrderFormProvider: import("react").FC<Record<string, never>>;
+        useOrderForm: typeof useOrderForm;
+    };
+    export default _default;
+}
+
+declare module "vtex.order-manager/constants" {
+    export * from "vtex.order-manager/react/constants";
+}
+
+

react/typings/vtex.render-runtime.d.ts

@@ -0,0 +1,38 @@
+/* Typings for `render-runtime` */
+declare module "vtex.render-runtime" {
+    import { ComponentType, ReactElement, ReactType } from "react";
+
+    export interface NavigationOptions {
+        page: string
+        params?: any
+    }
+
+    export interface RenderContextProps {
+        runtime: {
+            navigate: (options: NavigationOptions) => void
+        }
+    }
+
+    interface ExtensionPointProps {
+        id: string
+        [key: string]: any
+    }
+
+    export const ExtensionPoint: ComponentType<ExtensionPointProps>;
+
+    interface ChildBlockProps {
+        id: string
+    }
+
+    export const ChildBlock: ComponentType<ChildBlockProps>;
+    export const useChildBlock = () => GenericObject;
+
+    export const Helmet: ReactElement;
+    export const Link: ReactType;
+    export const NoSSR: ReactElement;
+    export const RenderContextConsumer: ReactElement;
+    export const canUseDOM: boolean;
+    export const withRuntimeContext: <TOriginalProps extends GenericObject>(
+        Component: ComponentType<TOriginalProps & RenderContextProps>
+    ) => ComponentType<TOriginalProps>;
+}

react/typings/vtex.styleguide.d.ts

@@ -0,0 +1,9 @@
+declare module "vtex.styleguide" {
+    import { ComponentType } from "react";
+
+    export const Input: ComponentType<InputProps>;
+
+    interface InputProps {
+        [key: string]: any
+    }
+}

store/blocks/footer/footer.json

@@ -55,7 +55,7 @@
   "html#footer-3-desktop": {
     "children": [
       "html#footer-credits-information",
-      "html#footer-credits-autores"
+      "html#footer-credits-authors"
     ],
     "props": {
       "blockClass": "credits"
@@ -71,11 +71,11 @@
       "rich-text#footer-cnpj"
     ]
   },
-  "html#footer-credits-autores": {
+  "html#footer-credits-authors": {
     "props": {
-      "blockClass": "autores-component"
+      "blockClass": "authors-component"
     },
-    "children": ["autores-component"]
+    "children": ["authors-component"]
   },
   "rich-text#footer": {
     "props": {
@@ -125,7 +125,7 @@
   "html#footer-1-mobile": {
     "children": [
       "html#footer-credits-information",
-      "html#footer-credits-autores"
+      "html#footer-credits-authors"
     ],
     "props": {
       "blockClass": "footer-credits-information-mobile",

store/blocks/pdp/product-right-col.jsonc

@@ -7,8 +7,8 @@
     "children": [
       "html#identification-product",
       // "product-rating-summary",
-      "flex-layout.row#selling-price",
+      "html#prices",
-      "installment-product-component",
+      "html#product-installments",
       "html#pix-component",
       // "product-separator",
       "html#sku-selector",
@@ -24,8 +24,32 @@
     ]
   },
 
+  "html#prices": {
+    "props": {
+      "testId": "product-price"
+    },
+    "children": ["flex-layout.row#selling-price"]
+  },
+
+  "html#product-installments": {
+    "props": {
+      "testId": "product-installments"
+    },
+    "children": ["product-installments"]
+  },
+
+  "product-installments": {
+    "props": {
+      "blockClass": "product-installments",
+      "markers": ["discount"],
+      "message": "{installmentsNumber} de {installmentValue} sem juros",
+      "installmentsCriteria": "max-quantity-without-interest"
+    }
+  },
+
   "html#product-name": {
     "props": {
+      "testId": "product-name",
       "marginBottom": 3
     },
     "children": ["vtex.store-components:product-name"]
@@ -35,7 +59,13 @@
     "props": {
       "blockClass": "identification-product-content"
     },
-    "children": ["html#product-name", "product-identifier.product"]
+    "children": ["html#product-name", "html#product-identifier.product"]
+  },
+  "html#product-identifier.product": {
+    "props": {
+      "testId": "product-code"
+    },
+    "children": ["product-identifier.product"]
   },
 
   "html#pix-component": {
@@ -88,8 +118,8 @@
     "children": ["add-to-cart-button"]
   },
 
-  "html#shipping-simulator":{
+  "html#shipping-simulator": {
-    "props":{
+    "props": {
       "testId": "shipping-simulator"
     },
     "children": ["shipping-simulator"]

store/blocks/pdp/product-slider-layout.jsonc

@@ -25,7 +25,9 @@
       "product-summary-image#slider-images",
       "product-summary-name",
       // "product-summary-space",
-      "product-summary-price"
+      // "product-summary-price"
+      "product-list-price",
+      "product-selling-price"
     ]
   },
 

store/blocks/pdp/product-tab-layout.jsonc

@@ -9,7 +9,7 @@
 
   "html#tab-layout#description": {
     "props": {
-      "testId": "tab-layout"
+      "testId": "product-description"
     },
     "children": ["tab-layout#description"]
   },

store/interfaces.json

@@ -6,9 +6,6 @@
     "component": "html",
     "composition": "children"
   },
-  "installment-product-component": {
-    "component": "InstallmentProduct"
-  },
   "pix-component": {
     "component": "Pix"
   },
@@ -21,7 +18,7 @@
   "payment-methods-component": {
     "component": "PaymentMethods"
   },
-  "autores-component": {
+  "authors-component": {
-    "component": "Autores"
+    "component": "Authors"
   }
 }

styles/css/vtex.flex-layout.css

@@ -8,6 +8,7 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
 .flexRow--main-header {
   display: flex;
   justify-content: center;
@@ -118,6 +119,19 @@
   width: 100% !important;
 }
 
+.flexRowContent :global(.vtex-product-price-1-x-sellingPrice) {
+  margin-top: 24px;
+}
+.flexRowContent :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-sellingPriceValue) {
+  height: 38px;
+}
+.flexRowContent :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-sellingPriceValue) :global(.vtex-product-price-1-x-currencyContainer) {
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: #000000;
+}
+
 .flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child {
   background: #000000;
   padding: 12px 64px;

styles/css/vtex.menu.css

@@ -149,99 +149,3 @@
     justify-content: center;
   }
 }
-
-.FooterRightBlock {
-  margin-bottom: 16px;
-}
-@media (max-width: 1025px) and (min-width: 768px) {
-  .FooterRightBlock {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 0;
-  }
-}
-@media (max-width: 768px) and (min-width: 375px) {
-  .FooterRightBlock {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 0;
-  }
-}
-.FooterRightBlock .SpanTitle {
-  color: #ffffff;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 38px;
-}
-.FooterRightBlock .SpanTitleBig {
-  color: #ffffff;
-  font-weight: 400;
-  font-size: 18px;
-  line-height: 38px;
-}
-@media (max-width: 1025px) and (min-width: 768px) {
-  .FooterRightBlock .SpanTitleBig {
-    font-size: 14px;
-  }
-}
-@media (max-width: 768px) and (min-width: 375px) {
-  .FooterRightBlock .SpanTitleBig {
-    font-size: 14px;
-  }
-}
-.FooterRightBlock .UlGroup {
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  row-gap: 4px;
-}
-@media (max-width: 1025px) and (min-width: 768px) {
-  .FooterRightBlock .UlGroup {
-    align-items: center;
-  }
-}
-@media (max-width: 768px) and (min-width: 375px) {
-  .FooterRightBlock .UlGroup {
-    justify-content: center;
-    align-items: center;
-  }
-}
-.FooterRightBlock .UlGroup .UlSecondary {
-  display: flex;
-  padding: 0;
-  margin: 0;
-  column-gap: 8px;
-  list-style: none;
-}
-@media (max-width: 1025px) and (min-width: 768px) {
-  .FooterRightBlock .UlGroup .UlSecondary .ImgCard {
-    width: 42px;
-  }
-}
-@media (max-width: 768px) and (min-width: 375px) {
-  .FooterRightBlock .UlGroup .UlSecondary .ImgCard {
-    width: 42px;
-  }
-}
-
-.AutoresBlock .Autores-Group {
-  display: flex;
-  align-items: center;
-  column-gap: 15.73px;
-  margin: 0;
-  padding: 0;
-}
-.AutoresBlock .Autores-Group .Autores-List {
-  display: flex;
-  align-items: center;
-  font-weight: 400;
-  font-size: 10px;
-  line-height: 12px;
-  color: #ffffff;
-  column-gap: 8.72px;
-}

styles/css/vtex.product-price.css

@@ -14,3 +14,121 @@
   color: #000000;
   margin-top: 24px;
 }
+
+.installments--product-installments {
+  margin: 0;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+.installments--product-installments .installmentsNumber {
+  font-weight: 700;
+}
+.installments--product-installments .installmentsNumber::after {
+  content: "x";
+  margin-left: 4px;
+}
+.installments--product-installments .installmentValue {
+  font-weight: 700;
+}
+
+.listPrice {
+  padding: 0;
+  text-align: center;
+  height: 19px !important;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 8px;
+  line-height: 19px;
+}
+@media (max-width: 1025px) and (min-width: 768px) {
+  .listPrice {
+    height: 16px !important;
+    line-height: 16px;
+  }
+}
+@media (max-width: 768px) and (min-width: 375px) {
+  .listPrice {
+    height: 16px !important;
+    line-height: 16px;
+  }
+}
+.listPrice :global(.vtex-store-components-3-x-listPriceLabel) {
+  display: none;
+}
+.listPrice .listPriceValue {
+  padding: 0;
+}
+.listPrice .listPriceValue .currencyContainer {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-decoration-line: line-through;
+  color: #bababa;
+  display: block;
+}
+@media (max-width: 1025px) and (min-width: 768px) {
+  .listPrice .listPriceValue .currencyContainer {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+@media (max-width: 768px) and (min-width: 375px) {
+  .listPrice .listPriceValue .currencyContainer {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+.listPrice .listPriceValue .currencyContainer::before {
+  content: "de ";
+}
+.listPrice .listPriceValue .currencyContainer::after {
+  content: " por";
+}
+
+.sellingPrice {
+  display: flex;
+  justify-content: center;
+  margin: 0;
+}
+@media (max-width: 1025px) and (min-width: 768px) {
+  .sellingPrice {
+    line-height: 25px;
+  }
+}
+.sellingPrice .sellingPriceValue {
+  height: 33px;
+  line-height: 33px;
+}
+@media (max-width: 1025px) and (min-width: 768px) {
+  .sellingPrice .sellingPriceValue {
+    line-height: 25px;
+    height: 25px;
+  }
+}
+@media (max-width: 768px) and (min-width: 375px) {
+  .sellingPrice .sellingPriceValue {
+    line-height: 25px;
+    height: 25px;
+  }
+}
+.sellingPrice .sellingPriceValue .currencyContainer {
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  text-align: center;
+  color: #000000;
+}
+@media (max-width: 1025px) and (min-width: 768px) {
+  .sellingPrice .sellingPriceValue .currencyContainer {
+    font-size: 18px;
+    line-height: 25px;
+  }
+}
+@media (max-width: 768px) and (min-width: 375px) {
+  .sellingPrice .sellingPriceValue .currencyContainer {
+    font-size: 18px;
+    line-height: 25px;
+  }
+}

styles/css/vtex.slider-layout.css

@@ -76,22 +76,7 @@
   border-radius: 0;
 }
 .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) {
-  min-height: 448.4px;
+  height: auto;
-}
-@media (max-width: 2561px) and (min-width: 1920px) {
-  .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) {
-    min-height: 543.4px;
-  }
-}
-@media (max-width: 1025px) and (min-width: 768px) {
-  .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) {
-    min-height: 383.2px;
-  }
-}
-@media (max-width: 768px) and (min-width: 375px) {
-  .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) {
-    min-height: 254.8px;
-  }
 }
 .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) {
   padding: 0;
@@ -153,89 +138,6 @@
     min-width: 100%;
   }
 }
-.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) {
-  padding: 0;
-}
-.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) {
-  row-gap: 8px;
-}
-@media (max-width: 2561px) and (min-width: 1920px) {
-  .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) {
-    height: 60px;
-  }
-}
-@media (max-width: 1025px) and (min-width: 768px) {
-  .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) {
-    height: 49px;
-  }
-}
-@media (max-width: 768px) and (min-width: 375px) {
-  .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) {
-    height: 49px;
-  }
-}
-.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) {
-  padding: 0;
-  text-align: center;
-}
-.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) {
-  display: none;
-}
-.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) {
-  padding: 0;
-}
-.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer) {
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 19px;
-  text-decoration-line: line-through;
-  color: #bababa;
-}
-@media (max-width: 1025px) and (min-width: 768px) {
-  .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer) {
-    font-size: 12px;
-    line-height: 16px;
-  }
-}
-@media (max-width: 768px) and (min-width: 375px) {
-  .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer) {
-    font-size: 12px;
-    line-height: 16px;
-  }
-}
-.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer)::before {
-  content: "de ";
-}
-.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) :global(.vtex-product-summary-2-x-currencyContainer)::after {
-  content: " por";
-}
-.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) {
-  padding: 0;
-  display: flex;
-  justify-content: center;
-}
-.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) {
-  display: none;
-}
-.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPrice) {
-  font-weight: 700;
-  font-size: 24px;
-  line-height: 33px;
-  text-align: center;
-  color: #000000;
-}
-@media (max-width: 1025px) and (min-width: 768px) {
-  .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPrice) {
-    font-size: 18px;
-    line-height: 25px;
-  }
-}
-@media (max-width: 768px) and (min-width: 375px) {
-  .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPrice) {
-    font-size: 18px;
-    line-height: 25px;
-  }
-}
 .sliderLayoutContainer--carousel .sliderArrows {
   padding: 0;
   margin: 0;

styles/css/vtex.store-components.css

@@ -489,7 +489,6 @@
   background: #000000;
   border-radius: 0;
   border: none;
-  bottom: 1px;
 }
 .shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
   display: none;

styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
+
 //Header
 
 .flexRow--main-header {
@@ -128,6 +130,23 @@
   width: 100% !important;
 }
 
+//Product Price
+
+.flexRowContent {
+  :global(.vtex-product-price-1-x-sellingPrice) {
+    margin-top: 24px;
+    :global(.vtex-product-price-1-x-sellingPriceValue) {
+      height: 38px;
+      :global(.vtex-product-price-1-x-currencyContainer) {
+        font-weight: 700;
+        font-size: 25px;
+        line-height: 38px;
+        color: $black;
+      }
+    }
+  }
+}
+
 //Botao add Cart
 
 .flexRow {

styles/sass/pages/product/vtexMenu/vtex.menu.scss

@@ -127,89 +127,3 @@
     }
   }
 }
-
-.FooterRightBlock {
-  margin-bottom: 16px;
-  @media (max-width: 1025px) and (min-width: 768px) {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 0;
-  }
-  @media (max-width: 768px) and (min-width: 375px) {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 0;
-  }
-  .SpanTitle {
-    color: $white;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 38px;
-  }
-  .SpanTitleBig {
-    color: $white;
-    font-weight: 400;
-    font-size: 18px;
-    line-height: 38px;
-    @media (max-width: 1025px) and (min-width: 768px) {
-      font-size: 14px;
-    }
-    @media (max-width: 768px) and (min-width: 375px) {
-      font-size: 14px;
-    }
-  }
-  .UlGroup {
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    margin: 0;
-    row-gap: 4px;
-    @media (max-width: 1025px) and (min-width: 768px) {
-      align-items: center;
-    }
-    @media (max-width: 768px) and (min-width: 375px) {
-      justify-content: center;
-      align-items: center;
-    }
-    .UlSecondary {
-      display: flex;
-      padding: 0;
-      margin: 0;
-      column-gap: 8px;
-      list-style: none;
-      .ImgCard {
-        @media (max-width: 1025px) and (min-width: 768px) {
-          width: 42px;
-        }
-        @media (max-width: 768px) and (min-width: 375px) {
-          width: 42px;
-        }
-      }
-    }
-  }
-}
-
-// Footer Credits
-
-.AutoresBlock {
-  .Autores-Group {
-    display: flex;
-    align-items: center;
-    column-gap: 15.73px;
-    margin: 0;
-    padding: 0;
-    .Autores-List {
-      display: flex;
-      align-items: center;
-      font-weight: 400;
-      font-size: 10px;
-      line-height: 12px;
-      color: $white;
-      column-gap: 8.72px;
-    }
-  }
-}

styles/sass/pages/product/vtexProduct/vtex.product-price.scss

@@ -1,4 +1,4 @@
-//dados produto
+//Dados produto
 
 .sellingPrice {
   font-weight: 700;
@@ -7,3 +7,108 @@
   color: $black;
   margin-top: 24px;
 }
+
+//Parcelamento
+
+.installments--product-installments {
+  margin: 0;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: $gray;
+  .installmentsNumber {
+    font-weight: 700;
+    &::after {
+      content: "x";
+      margin-left: 4px;
+    }
+  }
+  .installmentValue {
+    font-weight: 700;
+  }
+}
+
+//Slider
+
+.listPrice {
+  padding: 0;
+  text-align: center;
+  height: 19px !important;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 8px;
+  line-height: 19px;
+  @media (max-width: 1025px) and (min-width: 768px) {
+    height: 16px !important;
+    line-height: 16px;
+  }
+  @media (max-width: 768px) and (min-width: 375px) {
+    height: 16px !important;
+    line-height: 16px;
+  }
+  :global(.vtex-store-components-3-x-listPriceLabel) {
+    display: none;
+  }
+  .listPriceValue {
+    padding: 0;
+    .currencyContainer {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      text-decoration-line: line-through;
+      color: $BABABA;
+      display: block;
+      @media (max-width: 1025px) and (min-width: 768px) {
+        font-size: 12px;
+        line-height: 16px;
+      }
+      @media (max-width: 768px) and (min-width: 375px) {
+        font-size: 12px;
+        line-height: 16px;
+      }
+      &::before {
+        content: "de ";
+      }
+      &::after {
+        content: " por";
+      }
+    }
+  }
+}
+
+.sellingPrice {
+  display: flex;
+  justify-content: center;
+  margin: 0;
+
+  @media (max-width: 1025px) and (min-width: 768px) {
+    line-height: 25px;
+  }
+  .sellingPriceValue {
+    height: 33px;
+    line-height: 33px;
+    @media (max-width: 1025px) and (min-width: 768px) {
+      line-height: 25px;
+      height: 25px;
+    }
+    @media (max-width: 768px) and (min-width: 375px) {
+      line-height: 25px;
+      height: 25px;
+    }
+    .currencyContainer {
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 33px;
+      text-align: center;
+      color: $black;
+      @media (max-width: 1025px) and (min-width: 768px) {
+        font-size: 18px;
+        line-height: 25px;
+      }
+      @media (max-width: 768px) and (min-width: 375px) {
+        font-size: 18px;
+        line-height: 25px;
+      }
+    }
+  }
+}

styles/sass/pages/product/vtexSliderLayout/vtex.slider-layout.scss

@@ -47,16 +47,7 @@
             max-width: 100% !important;
             border-radius: 0;
             :global(.vtex-product-summary-2-x-clearLink) {
-              min-height: 448.4px;
+              height: auto;
-              @media (max-width: 2561px) and (min-width: 1920px) {
-                min-height: 543.4px;
-              }
-              @media (max-width: 1025px) and (min-width: 768px) {
-                min-height: 383.2px;
-              }
-              @media (max-width: 768px) and (min-width: 375px) {
-                min-height: 254.8px;
-              }
               :global(.vtex-product-summary-2-x-element) {
                 padding: 0;
                 :global(.vtex-product-summary-2-x-nameContainer) {
@@ -108,75 +99,6 @@
                     }
                   }
                 }
-                :global(.vtex-product-summary-2-x-priceContainer) {
-                  padding: 0;
-                  :global(.vtex-store-components-3-x-priceContainer) {
-                    row-gap: 8px;
-                    @media (max-width: 2561px) and (min-width: 1920px) {
-                      height: 60px;
-                    }
-                    @media (max-width: 1025px) and (min-width: 768px) {
-                      height: 49px;
-                    }
-                    @media (max-width: 768px) and (min-width: 375px) {
-                      height: 49px;
-                    }
-                    :global(.vtex-store-components-3-x-listPrice) {
-                      padding: 0;
-                      text-align: center;
-                      :global(.vtex-store-components-3-x-listPriceLabel) {
-                        display: none;
-                      }
-                      :global(.vtex-store-components-3-x-listPriceValue) {
-                        padding: 0;
-                        :global(.vtex-product-summary-2-x-currencyContainer) {
-                          font-weight: 400;
-                          font-size: 14px;
-                          line-height: 19px;
-                          text-decoration-line: line-through;
-                          color: $BABABA;
-                          @media (max-width: 1025px) and (min-width: 768px) {
-                            font-size: 12px;
-                            line-height: 16px;
-                          }
-                          @media (max-width: 768px) and (min-width: 375px) {
-                            font-size: 12px;
-                            line-height: 16px;
-                          }
-                          &::before {
-                            content: "de ";
-                          }
-                          &::after {
-                            content: " por";
-                          }
-                        }
-                      }
-                    }
-                    :global(.vtex-store-components-3-x-sellingPrice) {
-                      padding: 0;
-                      display: flex;
-                      justify-content: center;
-                      :global(.vtex-store-components-3-x-sellingPriceLabel) {
-                        display: none;
-                      }
-                      :global(.vtex-store-components-3-x-sellingPrice) {
-                        font-weight: 700;
-                        font-size: 24px;
-                        line-height: 33px;
-                        text-align: center;
-                        color: $black;
-                        @media (max-width: 1025px) and (min-width: 768px) {
-                          font-size: 18px;
-                          line-height: 25px;
-                        }
-                        @media (max-width: 768px) and (min-width: 375px) {
-                          font-size: 18px;
-                          line-height: 25px
-                        }
-                      }
-                    }
-                  }
-                }
               }
             }
           }

styles/sass/pages/product/vtexStore/vtex.store-components.scss

@@ -487,7 +487,6 @@
     background: $black;
     border-radius: 0;
     border: none;
-    bottom: 1px;
     :global(.vtex-button__label) {
       display: none;
     }