[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of fanplayr/docs/README.md from the fanplayr VTEX app.

[Assistant]
Here's the implementation:

```markdown
📢 Use this project, [contribute](https://github.com/vtex-apps/CHANGEME) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

# APP NAME

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

Under the app's name, you should explain the topic, giving a **brief description** of the **app's functionality** in a store.

Next, you can **add media** (either an image of a GIF) if possible, so that users can better understand how the app works in practice.

![Media Placeholder](https://user-images.githubusercontent.com/52087100/71204177-42ca4f80-227e-11ea-89e6-e92e65370c69.png)

## Configuration

In this section, you first must **add the primary instructions** that will allow users to use the app in their store, such as [installing the app](https://vtex.io/docs/recipes/store/installing-an-app) and configuring it using the account's admin.

Remember to also **showcase any necessary disclaimer** related to the app in this section, such as the different behavior it may display during its configuration.

## Modus Operandi *(not mandatory)*

There are scenarios in which an app can behave differently in a store, according to its configuration. It's crucial then to go through these **behavioral changes** in this section, allowing users to fully understand the **practical application** of the app in their store.

If you feel compelled to give further details, such as the app's **relationship with others**, don't hesitate to use this section.

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of fanplayr/react/index.tsx from the fanplayr VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { canUseDOM } from 'vtex.render-runtime'
import { PixelMessage } from './typings/events'

export function handleEvents(e: PixelMessage) {
  switch (e.data.eventName) {
    case 'vtex:pageView': {

    }
    default: {
      return
    }
  }
}

if (canUseDOM) {
  window.addEventListener('message', handleEvents)
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of fanplayr/react/package.json from the fanplayr VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "ramda": "^0.26.1"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/graphql": "^14.5.0",
    "@types/jest": "^24.9.0",
    "@types/node": "^13.1.8",
    "@types/ramda": "^0.26.5",
    "@types/react": "^16.9.19",
    "@types/react-intl": "^3.0.0",
    "@vtex/test-tools": "^3.0.1",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.6.8",
    "eslint": "^5.16.0",
    "eslint-config-vtex-react": "^4.1.0",
    "graphql": "^14.5.4",
    "prettier": "^1.18.2",
    "react-intl": "^3.11.0",
    "tslint-eslint-rules": "^5.4.0",
    "typescript": "3.5.2"
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of fanplayr/store/interfaces.json from the fanplayr VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "pixel.APPNAME": {
    "component": "index"
  }
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of fanplayr/react/typings/events.d.ts from the fanplayr VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface PixelMessage extends MessageEvent {
  data:
    | ProductViewData
    | ProductClickData
    | OrderPlacedData
    | PageViewData
    | ProductImpressionData
    | AddToCartData
    | RemoveToCartData
    | CartChangedData
    | HomePageInfo
    | ProductPageInfoData
    | SearchPageInfoData
    | UserData
    | CartIdData
}

export interface EventData {
  event: string
  eventName: string
  currency: string
}

export interface PageInfoData extends EventData {
  event: 'pageInfo'
  eventName: 'vtex:pageInfo'
  accountName: string
  pageTitle: string
  pageUrl: string
}

export interface UserData extends PageInfoData {
  eventType: 'userData'
  eventName: 'vtex:userData'
  firstName?: string
  lastName?: string
  document?: string
  id?: string
  email?: string
  phone?: string
  isAuthenticated: boolean
}

export interface CartIdData extends PageInfoData {
  eventType: 'cartId'
  eventName: 'vtex:cartId'
  cartId: string
}

export interface HomePageInfo extends PageInfoData {
  eventType: 'homeView'
}

export interface ProductPageInfoData extends PageInfoData {
  eventType: 'productPageInfo'
}

export interface SearchPageInfoData extends PageInfoData {
  eventType:
    | 'internalSiteSearchView'
    | 'categoryView'
    | 'departmentView'
    | 'emptySearchView'
  category?: CategoryMetaData
  department?: DepartmentMetaData
  search?: SearchMetaData
}

interface CategoryMetaData {
  id: string
  name: string
}

interface DepartmentMetaData {
  id: string
  name: string
}

interface SearchMetaData {
  term: string
  category: CategoryMetaData
  results: number
}

export interface PageViewData extends EventData {
  event: 'pageView'
  eventName: 'vtex:pageView'
  pageTitle: string
  pageUrl: string
  referrer: string
}

export interface AddToCartData extends EventData {
  event: 'addToCart'
  eventName: 'vtex:addToCart'
  items: CartItem[]
}

export interface RemoveToCartData extends EventData {
  event: 'removeFromCart'
  eventName: 'vtex:removeFromCart'
  items: CartItem[]
}

export interface CartChangedData extends EventData {
  event: 'cartChanged'
  eventName: 'vtex:cartChanged'
  items: CartItem[]
}

export interface OrderPlacedData extends Order, EventData {
  event: 'orderPlaced'
  eventName: 'vtex:orderPlaced'
}

export interface ProductViewData extends EventData {
  event: 'productView'
  eventName: 'vtex:productView'
  product: ProductDetail
}

export interface ProductClickData extends EventData {
  event: 'productClick'
  eventName: 'vtex:productClick'
  product: ProductSummary
}

export interface ProductImpressionData extends EventData {
  event: 'productImpression'
  eventName: 'vtex:productImpression'
  impressions: Impression[]
  product?: ProductSummary // deprecated, use impressions list!
  position?: number // deprecated, use impressions list!
  list: string
}

interface CartItem {
  skuId: string
  variant: string
  price: number
  name: string
  quantity: number
  productRefId: string
  brand: string
  category: string
  detailUrl: string
  imageUrl: string
}

export interface Order {
  currency: string
  accountName: string
  orderGroup: string
  salesChannel: string
  coupon: string
  visitorType: string
  visitorContactInfo: string[]
  visitorAddressState: string
  visitorAddressCountry: string
  visitorAddressPostalCode: string
  transactionId: string
  transactionDate: string
  transactionAffiliation: string
  transactionTotal: number
  transactionShipping: number
  transactionSubtotal: number
  transactionDiscounts: number
  transactionTax: number
  transactionCurrency: string
  transactionPaymentType: PaymentType[]
  transactionShippingMethod: ShippingMethod[]
  transactionProducts: ProductOrder[]
  transactionPayment: {
    id: string
  }
}

export interface Impression {
  product: ProductSummary
  position: number
}

export interface PaymentType {
  group: string
  paymentSystemName: string
  installments: number
  value: number
}

export interface ShippingMethod {
  itemId: string
  selectedSla: string
}

export interface ProductOrder {
  id: string
  name: string
  sku: string
  skuRefId: string
  skuName: string
  productRefId: string
  ean: string
  slug: string
  brand: string
  brandId: string
  seller: string
  sellerId: string
  category: string
  categoryId: string
  categoryTree: string[]
  categoryIdTree: string[]
  priceTags: PriceTag[]
  originalPrice: number
  price: number
  sellingPrice: number
  tax: number
  quantity: number
  components: any[]
  measurementUnit: string
  unitMultiplier: number
}

export interface PriceTag {
  identifier: string
  isPercentual: boolean
  value: number
}

interface Product {
  brand: string
  brandId: string
  categories: string[]
  productId: string
  productName: string
  productReference: string
  linkText: string
  items: Item[]
}

export interface ProductSummary extends Product {
  sku: Item
}

export interface ProductDetail extends Product {
  categoryId: string
  categoryTree: { id: string; name: string }[]
  selectedSku: Item
}

export interface Item {
  itemId: string
  name: string
  ean?: string // TODO: provide this info at productImpression
  referenceId: { Key: string; Value: string }
  seller?: Seller
  sellers: Seller[]
}

export interface Seller {
  commertialOffer: CommertialOffer
  sellerId: string
}

export interface CommertialOffer {
  Price: number
  ListPrice: number
  AvailableQuantity: number
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of fanplayr/react/typings/vtex.render-runtime.d.ts from the fanplayr VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.render-runtime' {
  export const canUseDOM: boolean
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of fanplayr/react/typings/global.d.ts from the fanplayr VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface Window extends Window {
  dataLayer: any[]
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of chaordic/docs/README.md from the chaordic VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Chaordic

Open the VTEX APP Store and install the app on your store.

or

Run the following command:

```sh
vtex install vtex.chaordic@0.x
```

Next, open the app settings on your admin and fill the form with Chaordic API Key.

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of chaordic/react/index.tsx from the chaordic VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { canUseDOM } from 'vtex.render-runtime'
import { PixelMessage } from './typings/events'

export function handleEvents(e: PixelMessage) {
  switch (e.data.eventName) {
    case 'vtex:pageView': {

    }
    default: {
      return
    }
  }
}

if (canUseDOM) {
  window.addEventListener('message', handleEvents)
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of chaordic/react/package.json from the chaordic VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "ramda": "^0.26.1"
  },
  "devDependencies": {
    "@types/graphql": "^14.5.0",
    "@types/jest": "^24.0.11",
    "@types/node": "^11.13.0",
    "@types/ramda": "^0.26.5",
    "@vtex/test-tools": "^1.1.0",
    "eslint": "^5.16.0",
    "eslint-config-vtex-react": "^4.1.0",
    "graphql": "^14.5.4",
    "prettier": "^1.18.2",
    "tslint-eslint-rules": "^5.4.0",
    "typescript": "3.5.2"
  },
  "version": "0.0.4"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of chaordic/store/interfaces.json from the chaordic VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "pixel.chaordic": {
    "component": "index"
  }
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of chaordic/react/typings/events.d.ts from the chaordic VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface PixelMessage extends MessageEvent {
  data:
    | ProductViewData
    | ProductClickData
    | OrderPlacedData
    | PageViewData
    | ProductImpressionData
    | AddToCartData
    | RemoveToCartData
}

export interface EventData {
  event: string
  eventName: string
  currency: string
}

export interface PageViewData extends EventData {
  event: 'pageView'
  eventName: 'vtex:pageView'
  pageTitle: string
  pageUrl: string
  referrer: string
}

export interface AddToCartData extends EventData {
  event: 'addToCart'
  eventName: 'vtex:addToCart'
  items: CartItem[]
}

export interface RemoveToCartData extends EventData {
  event: 'removeFromCart'
  eventName: 'vtex:removeFromCart'
  items: CartItem[]
}

export interface OrderPlacedData extends Order, EventData {
  event: 'orderPlaced'
  eventName: 'vtex:orderPlaced'
}

export interface ProductViewData extends EventData {
  event: 'productView'
  eventName: 'vtex:productView'
  product: Product
}

export interface ProductClickData extends EventData {
  event: 'productClick'
  eventName: 'vtex:productClick'
  product: Product
}

export interface ProductImpressionData extends EventData {
  event: 'productImpression'
  eventName: 'vtex:productImpression'
  impressions: Impression[]
  product?: Product // deprecated, use impressions list!
  position?: number // deprecated, use impressions list!
  list: string
}

interface CartItem {
  skuId: string
  variant: string
  price: number
  name: string
  quantity: number
  productRefId: string
  brand: string
  category: string
}

export interface Order {
  currency: string
  accountName: string
  orderGroup: string
  salesChannel: string
  coupon: string
  visitorType: string
  visitorContactInfo: string[]
  visitorAddressState: string
  visitorAddressCountry: string
  visitorAddressPostalCode: string
  transactionId: string
  transactionDate: string
  transactionAffiliation: string
  transactionTotal: number
  transactionShipping: number
  transactionSubtotal: number
  transactionDiscounts: number
  transactionTax: number
  transactionCurrency: string
  transactionPaymentType: PaymentType[]
  transactionShippingMethod: ShippingMethod[]
  transactionProducts: ProductOrder[]
  transactionPayment: {
    id: string
  }
}

export interface Impression {
  product: Product
  position: number
}

interface PaymentType {
  group: string
  paymentSystemName: string
  installments: number
  value: number
}

interface ShippingMethod {
  itemId: string
  selectedSla: string
}

interface ProductOrder {
  id: string
  name: string
  sku: string
  skuRefId: string
  skuName: string
  productRefId: string
  ean: string
  slug: string
  brand: string
  brandId: string
  seller: string
  sellerId: string
  category: string
  categoryId: string
  categoryTree: string[]
  categoryIdTree: string[]
  priceTags: PriceTag[]
  originalPrice: number
  price: number
  sellingPrice: number
  tax: number
  quantity: number
  components: any[]
  measurementUnit: string
  unitMultiplier: number
}

interface PriceTag {
  identifier: string
  isPercentual: boolean
  value: number
}

interface Product {
  brand: string
  categoryId?: string // inconsistency
  categories: string[]
  productId: string
  productName: string
  selectedSku?: string // inconsistency
  items: Item[]
  sku: Item
  [key: string]: any
}

interface Item {
  itemId: string
  name: string
  seller?: Seller
  [key: string]: any
}

interface Seller {
  commertialOffer: CommertialOffer
  [key: string]: any
}

interface CommertialOffer {
  Price: number
  [key: string]: any
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of chaordic/react/typings/vtex.render-runtime.d.ts from the chaordic VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.render-runtime' {
  export const canUseDOM: boolean
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of chaordic/react/typings/global.d.ts from the chaordic VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface Window extends Window {
  dataLayer: any[]
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of dummy-build-testing-grounds/messages/pt.json from the dummy-build-testing-grounds VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "editor.base-store-component.title": "IO Base App",
  "editor.base-store-component.description": "Um componente de demonstração para apps do VTEX IO",
  "editor.base-store-component.title.title": "Título",
  "editor.base-store-component.title.description": "Especifique um título personalizado",
  "base.title": "Olá, Mundo!!",
  "base.change-value": "Troque seu valor: {value}",
  "example": "Isto é um exemplo"
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of dummy-build-testing-grounds/messages/en.json from the dummy-build-testing-grounds VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "editor.base-store-component.title": "IO Base App",
  "editor.base-store-component.description": "A demo component for IO apps",
  "editor.base-store-component.title.title": "Title",
  "editor.base-store-component.title.description": "Specify a custom title",
  "base.title": "Hello, World!!",
  "base.change-value": "Change your value: {value}",
  "example": "This is an example"
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of dummy-build-testing-grounds/messages/context.json from the dummy-build-testing-grounds VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "editor.base-store-component.title": "Title of IO Base App component",
  "editor.base-store-component.description": "Description of IO Base App component",
  "editor.base-store-component.title.title": "Title of title property",
  "editor.base-store-component.title.description": "Description of title property",
  "base.title": "Base title message to be shown when title is not provided via CMS",
  "base.change-value": "Text to be shown beside input component typed value"
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of dummy-build-testing-grounds/messages/es.json from the dummy-build-testing-grounds VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "editor.base-store-component.title": "IO Base App",
  "editor.base-store-component.description": "Un componente de demostración para aplicaciones IO.",
  "editor.base-store-component.title.title": "Título",
  "editor.base-store-component.title.description": "Especifique un título personalizado",
  "base.title": "¡Hola Mundo!",
  "base.change-value": "Cambia tu valor: {value}",
  "example": "Esto es un ejemplo"
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of dummy-build-testing-grounds/docs/README.md from the dummy-build-testing-grounds VTEX app.

[Assistant]
Here's the implementation:

```markdown
First of all (even before the block's name), its README.md should contain the following sentence at the very beginning:

`📢 Use this project, [contribute](https://github.com/{OrganizationName/{AppName}) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).`

# BLOCK NAME

Under the block's name, you should explain the topic, giving a **brief description** of the **block's functionality** in a store.

Next, **add media** (either an image of a GIF) with the rendered block, so that users can better understand how the block works in practice.

![Media Placeholder](https://user-images.githubusercontent.com/52087100/71204177-42ca4f80-227e-11ea-89e6-e92e65370c69.png)

## Configuration

In this section, you first must **add the primary instructions** that will allow users to use the block in their store, such as adding the block's app as a dependency in the `manifest.json` and declaring the block itself in a given template.

Next, add the **block's props table**:

| Prop name    | Type            | Description    | Default value                                                                                |
| ------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| `XXXXX`      | `XXXXXX`       | XXXXXXXX         | `XXXXXX`        |

Remember to also **showcase any necessary disclaimer** related to the block in this section, such as the different behavior it may display during its configuration.

## Modus Operandi *(not mandatory)*

There are scenarios in which a block can behave differently in a store, according to how it was added to the catalog, for example. It's crucial to go through these **behavioral changes** in this section, allowing users to fully understand the **practical application** of the block in their store.

If you feel compelled to give further details about the block, such as it's **relationship with the VTEX admin**, don't hesitate to use this section.

## Customization

The first thing that should be present in this section is the sentence below, showing users the recipe pertaining to CSS customization in blocks:

`In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).`

Thereafter, you should add a single column table with the available CSS handles for that block:

| CSS Handles |
| ----------- |
| `XXXXX` |
| `XXXXX` |
| `XXXXX` |
| `XXXXX` |
| `XXXXX` |

If there are none, add the following sentence instead:

`The component still doesn't have CSS Handles for its specific customization.`

---

Check out some documentation models that are already live:
- [Breadcrumb](https://github.com/vtex-apps/breadcrumb)
- [Image](https://vtex.io/docs/components/general/vtex.store-components/image)

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of dummy-build-testing-grounds/react/package.json from the dummy-build-testing-grounds VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test",
    "lint": "tsc --noEmit && eslint --ext ts,tsx ."
  },
  "dependencies": {
    "@vtex/css-handles": "^1.0.0",
    "classnames": "^2.2.6",
    "ramda": "^0.26.1",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-intl": "^2.7.2"
  },
  "devDependencies": {
    "@types/classnames": "^2.2.7",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.7.5",
    "@types/prop-types": "^15.7.0",
    "@types/ramda": "^0.26.5",
    "@types/react": "^16.9.2",
    "@vtex/test-tools": "^1.1.0",
    "apollo-client": "^2.5.1",
    "eslint": "^5.16.0",
    "eslint-config-vtex-react": "^4.1.0",
    "prettier": "^1.18.2",
    "tslint-eslint-rules": "^5.4.0",
    "typescript": "3.5.2"
  },
  "version": "0.2.2"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of dummy-build-testing-grounds/react/Example.tsx from the dummy-build-testing-grounds VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useState } from 'react'
import { Input } from 'vtex.styleguide'
import { FormattedMessage } from 'react-intl'

import TranslatedTitle from './components/TranslatedTitle'

import styles from './styles.css'

const Example: StorefrontFunctionComponent<ExampleProps> = ({ title }) => {
  const [inputValue, setValue] = useState<string | null>(null)

  return (
    <div className={`${styles.container} flex flex-column pv6 ph4`}>
      <TranslatedTitle title={title} />
      <div className="t-body pv4">
        <FormattedMessage
          id="base.change-value"
          values={{ value: inputValue || '' }}
        />
      </div>
      <Input
        value={inputValue}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          setValue(e.target.value)
        }
      />
    </div>
  )
}

interface ExampleProps {
  title?: string
}

Example.schema = {
  title: 'editor.base-store-component.title',
  description: 'editor.base-store-component.description',
  type: 'object',
  properties: {
    title: {
      title: 'editor.base-store-component.title.title',
      description: 'editor.base-store-component.title.description',
      type: 'string',
      default: null,
    },
  },
}

export default Example

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of dummy-build-testing-grounds/store/interfaces.json from the dummy-build-testing-grounds VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "base-store-component": {
    "component": "Example"
  }
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of dummy-build-testing-grounds/react/typings/storefront.d.ts from the dummy-build-testing-grounds VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { FunctionComponent } from 'react'

declare global {
  interface StorefrontFunctionComponent<P = {}> extends FunctionComponent<P> {
    getSchema?(props: P): object
    schema?: object
  }

  interface StorefrontComponent<P = {}, S = {}> extends Component<P, S> {
    getSchema?(props: P): object
    schema: object
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of dummy-build-testing-grounds/react/typings/vtex.render-runtime.d.ts from the dummy-build-testing-grounds VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* Typings for `render-runtime` */
declare module 'vtex.render-runtime' {
  import { Component, 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 = function({ id: string }): object {}

  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 {}>(
    Component: ComponentType<TOriginalProps & RenderContextProps>
  ) => ComponentType<TOriginalProps>
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of dummy-build-testing-grounds/react/typings/css.d.ts from the dummy-build-testing-grounds VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.css' {
  const css: any
  export default css
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of dummy-build-testing-grounds/react/typings/graphql.d.ts from the dummy-build-testing-grounds VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.graphql' {
  import { DocumentNode } from 'graphql'

  const value: DocumentNode
  export default value
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of dummy-build-testing-grounds/react/typings/vtex.styleguide.d.ts from the dummy-build-testing-grounds VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.styleguide' {
  import { ComponentType } from 'react'

  export const Input: ComponentType<InputProps>

  interface InputProps {
    [key: string]: any
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of dummy-build-testing-grounds/react/components/index.tsx from the dummy-build-testing-grounds VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { FormattedMessage } from 'react-intl'

const HelloWorld: FunctionComponent = () => {
  return (
    <div>
      <FormattedMessage id="example" />
    </div>
  )
}

export default HelloWorld

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of dummy-build-testing-grounds/react/components/TranslatedTitle.tsx from the dummy-build-testing-grounds VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { FormattedMessage } from 'react-intl'

// The b-s token makes the `b` class be applied only on mobile devices.
const TranslatedTile: FunctionComponent<TranslatedTileProps> = ({ title }) => {
  const titleText = title || <FormattedMessage id="base.title" />
  return (
    <div className="flex flex-grow-1 justify-center b-s">
      <span className="t-heading-4">{titleText}</span>
    </div>
  )
}

interface TranslatedTileProps {
  title?: string
}

export default TranslatedTile

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of dummy-build-testing-grounds/react/__tests__/index.test.tsx from the dummy-build-testing-grounds VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { render } from '@vtex/test-tools/react'
import Component from '../components/index'

describe('HelloWorld Component', () => {
  const { getByText } = render(<Component />)

  it('should render the example in TypeScript', () => {
    expect(getByText(/This is an example/)).toBeDefined()
  })
})

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/sitemap/sitemap.json from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "urlset": {
    "url": [
      {
        "loc": "https://storetheme.vtex.com/about-us"
      }
    ]
  }
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/docs/README.md from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Store theme
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->
Our boilerplate theme to create stores in the VTEX IO platform.

## Preview
![store-theme-default](https://user-images.githubusercontent.com/1354492/63937047-e8d81c80-ca37-11e9-86fc-61e88847bbfb.png)

## Tutorial
To understand how things work check our tutorial [Build a store using VTEX IO](https://vtex.io/docs/getting-started/build-stores-with-store-framework/1/)

## Dependencies
All store components that you see on this document are open source too. Production ready, you can found those apps in this GitHub organization.

Store framework is the baseline to create any store using _VTEX IO Web Framework_.
- [Store](https://github.com/vtex-apps/store/blob/master/README.md)

Store GraphQL is a middleware to access all VTEX APIs.
- [Store GraphQL](https://github.com/vtex-apps/store-graphql/blob/master/docs/README.md)

### Store Component Apps
- [Header](https://github.com/vtex-apps/store-header/blob/master/docs/README.md)
- [Footer](https://github.com/vtex-apps/store-footer/blob/master/docs/README.md)
- [Slider Layout](https://github.com/vtex-apps/slider-layout/blob/master/docs/README.md)
- [Shelf](https://github.com/vtex-apps/shelf/blob/master/docs/README.md)
- [Telemarketing](https://github.com/vtex-apps/telemarketing/blob/master/docs/README.md)
- [Menu](https://github.com/vtex-apps/menu/blob/master/docs/README.md)
- [Login](https://github.com/vtex-apps/login/blob/master/docs/README.md)
- [Minicart](https://github.com/vtex-apps/minicart/blob/master/docs/README.md)
- [Category Menu](https://github.com/vtex-apps/category-menu/blob/master/docs/README.md)
- [Product Summary](https://github.com/vtex-apps/product-summary/blob/master/docs/README.md)
- [Breadcrumb](https://github.com/vtex-apps/breadcrumb/blob/master/docs/README.md)
- [Search Result](https://github.com/vtex-apps/search-result/blob/master/docs/README.md)
- [Product Details](https://github.com/vtex-apps/product-details/blob/master/docs/README.md)
- [Store Components](https://github.com/vtex-apps/store-components/blob/master/docs/README.md)
- [Order Placed](https://github.com/vtex-apps/order-placed/blob/master/docs/README.md)

### Store Pixel Apps

 - [Facebook Pixel](https://github.com/vtex-apps/facebook-pixel/blob/master/docs/README.md)
 - [Google Tag Manager](https://github.com/vtex-apps/google-tag-manager/blob/master/docs/README.md)

## Contributing

Check it out [how to contribute](https://github.com/vtex-apps/awesome-io#contributing) with this project.

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="http://www.hugoccosta.com"><img src="https://avatars2.githubusercontent.com/u/20212776?v=4" width="100px;" alt=""/><br /><sub><b>Hugo Costa</b></sub></a><br /><a href="https://github.com/vtex-apps/store-theme/commits?author=hugocostadev" title="Documentation">📖</a></td>
  </tr>
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/docs/contact-schema.json from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "title": "Contact",
  "type": "object",
  "properties": {
    "title": {
      "type": "string",
      "title": "Title"
    },
    "name": {
      "type": "string",
      "title": "Name"
    },
    "email": {
      "type": "string",
      "format": "email",
      "title": "Email address"
    },
    "message": {
      "type": "string",
      "title": "Message"
    }
  },
  "required": ["email", "message"],
  "v-security": {
    "publicJsonSchema": true
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks.json from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.blog-home": {
    "blocks": [
      "blog-breadcrumb.wordpress-breadcrumb",
      "blog-search.wordpress-search",
      "blog-latest-posts-preview.wordpress-latest-posts-preview",
      "blog-category-preview.wordpress-category-preview#test",
      "blog-category-preview.wordpress-category-preview#test2",
      "blog-all-posts.wordpress-all-posts"
    ]
  },
  "store.blog-category": {
    "blocks": [
      "blog-breadcrumb.wordpress-breadcrumb",
      "blog-category-list.wordpress-category-list"
    ]
  },
  "store.blog-post": {
    "blocks": [
      "blog-breadcrumb.wordpress-breadcrumb",
      "blog-post-details.wordpress-post-details"
    ]
  },
  "store.blog-home#page": {
    "blocks": [
      "blog-breadcrumb.wordpress-breadcrumb",
      "blog-page-details.wordpress-page-details"
    ]
  },
  "store.blog-search-result": {
    "blocks": [
      "blog-breadcrumb.wordpress-breadcrumb",
      "blog-search-list.wordpress-search-list"
    ]
  },
  "blog-latest-posts-preview.wordpress-latest-posts-preview": {
    "props": {
      "title": "Latest post",
      "useTextOverlays": true,
      "twoColumns": true
    }
  },
  "blog-category-preview.wordpress-category-preview#test": {
    "props": {
      "category": 5,
      "description": "Description of category",
      "useTextOverlays": false
    }
  },
  "blog-category-preview.wordpress-category-preview#test2": {
    "props": {
      "category": 410,
      "description": "Description of category",
      "useTextOverlays": false
    }
  },
  "blog-post-details.wordpress-post-details": {
    "children": ["blog-related-products.wordpress-related-products"]
  },
  "blog-page-details.wordpress-page-details": {
    "children": ["blog-related-products.wordpress-related-products"]
  },
  "blog-related-products.wordpress-related-products": {
    "blocks": ["product-summary.shelf"],
    "props": {
      "orderBy": "OrderByTopSaleDESC",
      "productList": {
        "maxItems": 8,
        "itemsPerPage": 4,
        "scroll": "BY_PAGE",
        "arrows": true,
        "titleText": "Related Products"
      }
    }
  },
  "product-summary.shelf": {
    "children": [
      "product-summary-add-to-list-button",
      "product-summary-image",
      "product-summary-name",
      "product-rating-inline",
      "product-summary-space",
      "product-summary-price",
      "product-summary-buy-button"
    ]
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks.jsonc from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
/* Blocks can be defined both on the store/blocks.json file, and in any number of json
 * files inside the store/blocks directory, with any arbitrary directory structure.
 *
 * Additionally, all blocks files can support comments, such as this one, if given the
 * .jsonc file extension.
 *
 * The store/blocks.json file is intended for backwards compatibility, for miscellaneous
 * blocks, or if the app is simple enough that it doesn't warrant splitting the file.
 */
{
  "store.orderplaced": {
    "blocks": ["order-placed"]
  },

  "store.account": {
    "blocks": ["my-account"],
    "parent": {
      "challenge": "challenge.profile"
    }
  },

  "store.login": {
    "blocks": ["login-content#default"]
  },

  "login-content#default": {
    "props": {
      "isInitialScreenOptionOnly": false,
      "defaultOption": 1,
      "showPasswordVerificationIntoTooltip": true
    }
  },

  "store.product-review-form": {
    "blocks": ["product-review-form"]
  },

  "store.not-found#product": {
    "blocks": ["rich-text#not-found"]
  },

  "store.not-found#search": {
    "blocks": ["rich-text#not-found"]
  },

  "rich-text#not-found": {
    "props": {
      "textAlignment": "CENTER",
      "textPosition": "CENTER",
      "text": "**PAGE NOT FOUND**",
      "font": "t-heading-1"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/interfaces.json from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.col.search": {
    "allowed": ["rich-text", "filter-navigator.v3"]
  },
  "flex-layout.col.search-content": {
    "allowed": [
      "image",
      "search-content",
      "search-fetch-more",
      "search-products-count-per-page",
      "search-fetch-previous"
    ]
  },
  "stack-layout.greenBadge": {
    "allowed": ["vtex.product-highlights:product-highlights"]
  },
  "tab-layout.search-mobile": {
    "allowed": ["tab-list.tabContainer", "tab-content.search-result"]
  },
  "tab-content.item.products": {
    "allowed": [
      "flex-layout",
      "search-content",
      "filter-navigator.v3",
      "order-by.v2",
      "search-content",
      "search-fetch-more",
      "search-products-count-per-page"
    ]
  },
  "tab-content.item.article": {
    "allowed": ["search-blog-articles-list.wordpress"]
  },
  "tab-content.search-result": {
    "allowed": ["tab-content.item.products", "tab-content.item.article"]
  },
  "tab-list.tabContainer": {
    "allowed": ["flex-layout"]
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/routes.json from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#about-us": {
    "path": "/about-us"
  },
  "store.custom#faq": {
    "path": "/faq"
  },
  "store.custom#contact-us": {
    "path": "/contact-us"
  },
  "store.blog-home": {
    "path": "/blog"
  },
  "store.blog-category": {
    "path": "/blog/category/:categoryslug(/page/:page)"
  },
  "store.blog-post": {
    "path": "/blog/post/:slug"
  },
  "store.blog-search-result": {
    "path": "/blog/search/:term"
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/vtex.store-video.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.videoContainer {
  width: 100%;
  height: 300px;
  margin-top: 2%;
}

@media only screen and (min-width: 640px) {
  .videoContainer {
    height: 700px;
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/vtex.product-price.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.listPrice {
  color: #727273;
  margin-bottom: .25rem;
  font-size: 1rem;
}

.sellingPrice {
  color: #3f3f40;
  font-size: 1.25rem;
}

.sellingPriceValue {
  font-size: 2.25rem;
  font-weight: 700;
}

.installments {
  color: #727273;
  margin-bottom: 1rem;
}

.savings {
  font-weight: 500;
  color: #79B03A;
}

.sellingPriceValue--summary {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2E2E2E;
}

.savings--summary {
  background: #8BC34A;
  border-radius: 1000px;
  align-items: center;
  display: flex;

  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  vertical-align: baseline;
  color: #FFFFFF;
}

.savings-discount--summary {
  font-size: 0.875rem;
  font-weight: 600;
  vertical-align: baseline;
  color: #FFFFFF;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.listPrice--summary {
  margin-bottom: 0.25rem;
  font-size: .875rem;
}

.installments--summary {
  margin-bottom: 2rem;
  font-size: 0.875rem;
}

.savings--summaryPercentage {
  background: #0f3e99;
  border-radius: 1000px;
  align-items: center;
  display: flex;
}

.savingsPercentage--summaryPercentage {
  font-size: 0.875rem;
  font-weight: 600;
  vertical-align: baseline;
  color: #FFFFFF;
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/vtex.rich-text.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.container--deals {
  color: #ffffff;
  text-align: center;
  justify-content: center;
}

.container--shelfTitle {
  color: #727273;
  justify-content: center;
  text-align: center;
}

.headingLevel2--shelfTitle {
  font-weight: 200;
}

.container--deals .paragraph {
  margin: 0;
}

.container--link {
  justify-content: center;
}

.container--question {
  justify-content: center;
}

.container--question .paragraph {
  text-align: center;
  max-width: 540px;
  margin: 0 16px;
  padding-top: 120px;
  color: #03034E;
}

.container--question .strong {
  font-size: 32px;
  line-height: 2rem;
  font-weight: 700;
}

.container--link .paragraph {
  text-align: center;
  max-width: 540px;
  padding-top: 36px;
  padding-bottom: 84px;
  color: #03034E;
}

.container--link .strong {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.container--link .link {
  text-decoration: none;
  font-size: 36px;
  font-weight: 300;
  color: #03034E;
}

.container--title {
  color: #03034E;
  font-size: 28px;
  font-weight: 700;
}

@media only screen and (min-width: 640px) {
  .container--question .strong {
    font-size: 40px;
    line-height: 3rem;
  }

  .container--about {
    max-width: 85%;
  }

  .container--title {
    color: #03034E;
    font-size: 40px;
    font-weight: 700;
    max-width: 60%;
  }

  .container--title .paragraph {
    line-height: 1.3em;
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/vtex.product-summary.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
  border-radius: 50%;
}

.container :global(.vtex-modal-layout-0-x-triggerContainer) {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
  opacity: 1;
}

@media screen and (max-width: 40em) {
  .container :global(.vtex-modal-layout-0-x-triggerContainer) {
    display: none;
  }
}

.nameContainer {
  justify-content: start;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.brandName {
  font-weight: 600;
  font-size: 18px;
  color: #2E2E2E;
}

.container {
  text-align: start;
}

.imageContainer {
  text-align: center;
}

.image {
  border-radius: 0.25rem;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/vtex.modal-layout.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
@media screen and (min-width: 40em) {
  .paper--quickview {
    height: 260px;
    width: 580px;
  }

  .actionsContainer--quickview {
    padding: 0 2rem 2rem 2rem;
  }
}

@media screen and (min-width: 50em) {
  .paper--quickview {
    height: 450px;
    width: 900px;
  }
}

@media screen and (min-width: 75em) {
  .paper--quickview {
    width: calc(100% - 4rem);
    height: auto;
  }
}

@media screen and (min-width: 82em) {
  .actionsContainer--quickview {
    padding: 0 2.5rem 2.5rem 2.5rem;
  }
}

.paper--quickview {
  min-width: 320px;
  max-width: 96rem;
}

.headerContainer--quickview {
  border: none;
  position: absolute;
  right: 0;
}

.actionsContainer--quickview {
  height: 100%;
  width: 100%;
  transition: box-shadow 150ms ease-in-out, border-top 150ms ease-in-out;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: transparent;
  box-shadow: -4px 0px 27px -12px transparent;
}

.actionsContentWrapper {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #aaa;
  padding-top: 1.5rem;
}

.contentContainer--quickviewContent {
  padding: 2.5rem 0 2.5rem 2rem;
  overflow-x: hidden;
}

.triggerContainer--quickview {
  padding: .75rem;
}

.triggerContainer {
  outline: none;
}

.actionsContainer--quickview:not(.actionsContainerEndOfContent--quickview) {
  border-top-color: rgb(238, 238, 238);
  box-shadow: -4px 0px 27px -12px rgba(0,0,0,0.64);
}

.actionsContainer--quickview:not(.actionsContainerEndOfContent--quickview) .actionsContentWrapper {
  border-top-color: transparent;
}

.closeButton {
  padding-right: 1rem;
}

.paper--product-gifts {
  padding: 1.5rem;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/vtex.store-header.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
/* add transitions */
:global(.vtex-sticky-layout-0-x-container)
  :global(.vtex-store-components-3-x-logoLink),
:global(.vtex-sticky-layout-0-x-container)
  :global(.vtex-minicart-2-x-openIconContainer),
:global(.vtex-sticky-layout-0-x-container)
  :global(.vtex-store-components-3-x-searchBarContainer) {
  transition: all 0.3s ease;
  display: block;
}

/* desktop/mobile main header padding and background transitions */
:global(.vtex-flex-layout-0-x-flexRowContent--main-header),
:global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
  transition: background 0.3s ease;
  will-change: padding, background;
}

/* main header desktop has a bigger padding when not stuck */
:global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* add a box-shadow to desktop/mobile header when stuck */
:global(.vtex-sticky-layout-0-x-wrapper--stuck)
  :global(.vtex-flex-layout-0-x-flexRowContent--main-header),
:global(.vtex-sticky-layout-0-x-wrapper--stuck)
  :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
}

/*
 * remove the extra padding when stuck from the desktop header
 * we add a transition only when "stuck" for the "unstick" step seem faster
 */
:global(.vtex-sticky-layout-0-x-wrapper--stuck)
  :global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
  transition: padding 0.3s ease, background 0.3s ease;
  padding-top: 0;
  padding-bottom: 0;
}

/* if supported add some translucency to the desktop/mobile header background */
@supports (backdrop-filter: blur(5px)) {
  :global(.vtex-sticky-layout-0-x-wrapper--stuck)
    :global(.vtex-flex-layout-0-x-flexRowContent--main-header),
  :global(.vtex-sticky-layout-0-x-wrapper--stuck)
    :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
    backdrop-filter: blur(8px);
  }

  /* header background when stuck and not hovered */
  :global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover)
    :global(.vtex-flex-layout-0-x-flexRowContent--main-header),
  :global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover)
    :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
    background: rgba(240, 240, 240, 0.8);
  }
}

/* stick wrapper with the same color as the desktop/mobile header */
:global(.vtex-sticky-layout-0-x-wrapper--sticky-header) {
  background-color: #f0f0f0;
}

/* resize the logo for neat effect */
:global(.vtex-sticky-layout-0-x-wrapper--stuck)
  :global(.vtex-store-components-3-x-logoLink) {
  transform: scale(0.85);
}

@media (prefers-reduced-motion: reduce) {
  :global(.vtex-sticky-layout-0-x-container)
    :global(.vtex-store-components-3-x-logoLink),
  :global(.vtex-sticky-layout-0-x-container)
    :global(.vtex-minicart-2-x-openIconContainer),
  :global(.vtex-sticky-layout-0-x-container)
    :global(.vtex-store-components-3-x-searchBarContainer),
  :global(.vtex-sticky-layout-0-x-wrapper--stuck)
    :global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
    transition: none;
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/vtex.store-components.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.notificationBarContainer {
  background-color: #e6f1e6;
  color: #03034e;
  font-weight: 700;
  font-size: 12px;
  text-decoration: underline;
}

.infoCardContainer--info-card-home {
  max-width: 1520px;
  margin: 0 auto;
  background-color: #e6f1e6;
  padding: 0px;
}

.newsletter {
  background-color: #03054e;
  max-width: 1528px;
  margin: 0 auto;
}

.newsletter .container {
  padding: 60px 10px;
}

.label {
  color: #fff;
  font-size: 26px;
}

.inputGroup {
  padding-bottom: 4px;
  display: flex;
  color: #fff;
}

.inputGroup :global(.vtex-styleguide-9-x-hideDecorators) {
  background-color: transparent;
  color: #fff;
  border: none;
}

.inputGroup :global(.vtex-styleguide-9-x-hideDecorators)::placeholder {
  color: #fff;
  font-size: 16px;
}

.inputGroup :global(.vtex-button) {
  background-color: transparent;
  color: #fff;
  border: none;
  margin-right: -24px;
}

.buttonContainer {
  padding-top: 0px;
}

.imageElement--storePrint {
  max-height: 300px;
  margin-bottom: 20px;
}

.skuSelectorContainer {
  margin: 1rem 0;
}

@media only screen and (min-width: 640px) {
  .newsletter .container {
    padding: 140px;
  }

  .label {
    font-size: 40px;
  }

  .infoCardContainer--info-card-home .infoCardTextContainer {
    width: 30%;
  }

  .infoCardContainer--info-card-home .infoCardImageContainer {
    width: 70%;
  }

  .imageElement--storePrint {
    margin-bottom: 0px;
    max-height: 600px;
  }
}

.productImagesContainer--quickview .carouselContainer {
  justify-content: flex-start;
}

.productImagesContainer--quickview .productImageTag {
  object-fit: cover !important;
}

.productImagesContainer--quickview .carouselGaleryThumbs {
  display: none;
}

.productImagesContainer--quickview .carouselGaleryCursor {
  margin: 0;
  padding: 0;
  width: 100%;
}

.productNameContainer {
  color: #3f3f40;
  font-weight: bold;
  font-size: 30px;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/vtex.wordpress-integration.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.latestPostsBlockContainer,
.categoryBlockContainer,
.postContainer,
.searchResultBlockContainer,
.breadcrumbContainer,
.listTitle,
.listContainer,
.postFlex{
    max-width: 1280px;
    margin: 0 auto;
}
.latestPostsBlockContainer > svg[class*="vtex__icon-spinner"],
.categoryBlockContainer > svg[class*="vtex__icon-spinner"],
.postContainer > svg[class*="vtex__icon-spinner"],
.searchResultBlockContainer > svg[class*="vtex__icon-spinner"] {
	margin: auto;
    display: flex;
    width: 50px;
	height: 50px;
	color: #69b512;
}
.categoryBlockTitle {
    margin-top: 0;
    margin-bottom: 0;
}
.categoryBlockDescription {
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.8;
    letter-spacing: -0.2px;
    color: #555;
}
.searchBlockContainer {
	position: absolute;
    width: 300px;
    right: 0;
    bottom: 140px;
}
.searchBlockContainer div[class*="vtex-input-prefix__group"]{
	border: none;
}
.searchBlockContainer div[class*="vtex-input-prefix__group"] input{
	border-radius: 0;
	height: 36px;
	font-family: "Source Sans Pro";
    font-size: 14px;
    line-height: 34px;
    text-align: left;
	color: #333;
	padding-left: 10px;
	border: 1px solid #e5e5e5;
}
.searchBlockContainer div[class*="vtex-input-prefix__group"] input::placeholder{
	color: #919191;
	text-transform: capitalize;
}
.searchBlockContainer div[class*="vtex-input-prefix__group"] > span{
	border-radius: 0;
	height: 36px;
	margin-left: 2px;
	margin-right: 40px;
    padding: 0;
	background-color: #808080;
    color: #fff;
}
.searchBlockContainer div[class*="vtex-input-prefix__group"] > span > div{
	width: 100%;
    height: 100%;
    line-height: 36px;
    padding: 0 5px;
}
.searchBlockContainer div[class*="vtex-input-prefix__group"] > span > div > div{
	display: none;
}
.searchBlockContainer div[class*="vtex-input-prefix__group"] > span > div > span[class*="c-link"]{
	padding: 0;
}
.searchBlockContainer div[class*="vtex-input-prefix__group"] > span > div > span[class*="c-link"]:before{
	content:"Go";
	font-weight: 700;
    font-family: "Source Sans Pro";
	font-size: 19px;
	color: #fff;
}
.searchBlockContainer div[class*="vtex-input-prefix__group"] > span > div > span[class*="c-link"] svg{
	display: none;
}
.teaserTitle {
    font-size: 1.5rem;
}
.teaserTitle > a {
    color: #404040;
    text-decoration: none;
}
.latestPostsBlockContainer{
	padding-bottom: 40px;
}
.latestPostsBlockContainer .latestPostsBlockTitle{
	display: none;
}
.latestPostsBlockContainer .latestPostsBlockFlex{
	margin-top: 10px;
}
.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexFirstColumnItem{
	width: 63%;
}
.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexFirstColumnItem > div[class*="vtex-card"] > a .teaserImage{
	width: 100%;
}
.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexFirstColumnItem > div[class*="vtex-card"] > a .teaserGradientOverlay .teaserTextOverlay{
	border-left: 4.5px solid #69b518;
	padding-left: 20px;
	bottom: 12%;
}
.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexFirstColumnItem > div[class*="vtex-card"] > a .teaserGradientOverlay .teaserTextOverlay .teaserTextOverlayTitle{
	font-size: 35.3px;
	font-weight: 500;
	margin-top: 11px;
}
.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexFirstColumnItem > div[class*="vtex-card"] > a .teaserGradientOverlay .teaserTextOverlay .teaserTextOverlayMeta{
	font-size: 12.2px;
	color: #cccccc;
	margin-bottom: 10px;
}
.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexFirstColumnItem > div[class*="vtex-card"] > a .teaserGradientOverlay .teaserTextOverlay .teaserTextOverlayMeta a{
	color: #fff;
}

.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexSecondColumn{
	width: 37%;
}
.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexSecondColumn .latestPostsBlockFlexSecondColumnItem{
	margin: 0;
}
.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexSecondColumn .latestPostsBlockFlexSecondColumnItem :global(.relative){
    height: 220px;
    overflow: hidden;
}
.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexSecondColumn .latestPostsBlockFlexSecondColumnItem :global(.relative) img{
	height: auto;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexSecondColumn .latestPostsBlockFlexSecondColumnItem:first-child{
	margin-bottom: 5px;
}
.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexSecondColumn > div > div[class*="vtex-card"] > a{
	overflow: hidden;
    max-height: 213px;
}
.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexSecondColumn > div > div[class*="vtex-card"] > a .teaserGradientOverlay .teaserTextOverlay{
	left: 4%;
	bottom: 12%;
}
.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexSecondColumn > div > div[class*="vtex-card"] > a .teaserGradientOverlay .teaserTextOverlay .teaserTextOverlayTitle{
	font-size: 22px;
    font-weight: 500;
	line-height: normal;
	margin-bottom: 5px;
}
.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexSecondColumn > div > div[class*="vtex-card"] > a .teaserGradientOverlay .teaserTextOverlay .teaserTextOverlayMeta{
	font-size: 12.2px;
	color: #cccccc;
}
.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexSecondColumn > div > div[class*="vtex-card"] > a .teaserGradientOverlay .teaserTextOverlay .teaserTextOverlayMeta a{
	color: #fff;
}

.categoryBlockContainer{
	padding-top: 0;
}
.categoryBlockContainer .categoryBlockTitle{
	font-size: 36px;
    font-weight: 500;
    line-height: 1.14;
    text-align: center;
    color: #333;
}
.categoryBlockContainer .categoryBlockDescription{
	font-family: "Source Sans Pro";
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: -0.2px;
    color: #aaaaaa;
    max-width: 564px;
    margin: 25px auto 0;
}
.categoryBlockContainer .categoryBlockFlex{
	justify-content: space-between;
}
.categoryBlockContainer .categoryBlockFlex .categoryBlockFlexItem{
	max-width: 404px;
	padding: 0;
}
.categoryBlockContainer .categoryBlockFlex .categoryBlockFlexItem div[class*="vtex-card"]{
	display: flex;
	flex-direction: column;
	box-shadow: none!important;
}
.categoryBlockContainer .categoryBlockFlex .categoryBlockFlexItem div[class*="vtex-card"] > h5{
	order: 3;
	padding-top: 0;
	padding-left: 0;
	color: #888888;
	font-size: 12.2px;
    font-weight: normal;
    line-height: 2.16;
}
.categoryBlockContainer .categoryBlockFlex .categoryBlockFlexItem div[class*="vtex-card"] > a{
	order: 1;
}
.categoryBlockContainer .categoryBlockFlex .categoryBlockFlexItem div[class*="vtex-card"] > h3{
	order: 2;
	padding-bottom: 0;
	padding-left: 0;
	padding-top: 10px;
}
.categoryBlockContainer .categoryBlockFlex .categoryBlockFlexItem div[class*="vtex-card"] > h3 a div{
	font-size: 18px;
    font-weight: 500;
    line-height: normal;
    color: #404040;
}
.categoryBlockContainer .categoryBlockLink button{
	background-color: #f7f7f7;
    border: none;
    border-radius: 0;
}
.categoryBlockContainer .categoryBlockLink button div{
	font-size: 13px;
    line-height: normal;
    letter-spacing: -0.3px;
    color: #333;
    padding: 16px 0;
}
.breadcrumbContainer{
	padding: 0;
    margin-top: 30px !important;
    margin-bottom: 35px !important;
    font-size: 14px;
    line-height: normal;
    text-align: left;
    color: #8c8c8c;
}
.breadcrumbContainer .breadcrumbHomeLink,
.breadcrumbContainer .breadcrumbLink{
	color: #8c8c8c;
	text-transform: capitalize;
}
.listTitle{
	font-family: Poppins;
	text-transform: capitalize;
    font-size: 41px;
    font-weight: 500;
    line-height: 1;
    text-align: left;
    color: #333;
}
/* .listTitle{
	text-align: left;
    border-left: 4.5px solid #69b518;
    padding-left: 20px;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.33;
    color: #333;
} */

.listContainer{
	padding: 0;
	max-width: 1280px !important;
}
.listContainer svg[class*="vtex__icon-spinner"]{
	color: #69b518;
}
.listContainer > div:first-child{
	padding: 0;
}
.listContainer > div:first-child > div > div:nth-child(1){
	margin-right: 10px;
}
.listContainer > div:first-child > div > div:nth-child(2){
	margin-left: 10px;
}
.listContainer > div:first-child > div > div:nth-child(1) > div[class*="vtex-dropdown"] > label > div {
    border-color: #dedede;
    border-radius: 0;
}
.listContainer > div:first-child > div > div:nth-child(1) div[class*="vtex-dropdown__arrow"]{
	color: #69b518;
}
.listContainer > div:first-child > div >:nth-child(2) button[class*="c-on-action-secondary"]{
	color: #69b518;
}
.listContainer .listFlex{
	justify-content: space-between;
}
.listContainer .listFlex .listFlexItem{
	padding: 0;
	max-width: 623px;
}
.listContainer .listFlex .listFlexItem > div{
	display: flex;
	flex-direction: column;
	box-shadow: none !important;
}

/* date */
.listContainer .listFlex .listFlexItem > div > h5{
	order: 3;
    padding-left: 0;
    color: #888888;
    font-size: 12.2px;
    font-weight: normal;
    line-height: 2.16;
	text-align: left;
	padding: 0;
}
.listContainer .listFlex .listFlexItem > div > h5 a{
	color: #888888;
}

/* image */
.listContainer .listFlex .listFlexItem > div > a{
	order: 1;
}

/* title */
.listContainer .listFlex .listFlexItem > div > h3{
	order: 2;
    padding-left: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
	text-align: left;
	padding-bottom: 0;
    color: #404040;
}

/* short description */
.listContainer .listFlex .listFlexItem > div > div{
	order: 4;
    padding-left: 0;
    font-family: "Source Sans Pro";
    font-size: 14px;
    line-height: 1.64;
    letter-spacing: -0.1px;
    text-align: left;
    color: #555;
	margin-top: 7px;
	padding-bottom: 30px;
}

.postFlex{
	display: flex;
	justify-content: space-between;
	padding: 0;
}
.postFlex .postContainer{
	width: 100%;
	float: right;
	padding: 0;
}
.postFlex .postContainer .postTitle{
	margin: 1px 0 0;
    font-size: 41px;
    font-weight: 500;
    line-height: 1;
    color: #333;
}
.postFlex .postContainer .postMeta,
.postFlex .postContainer .postMeta a{
	color: #888888;
    text-transform: none;
	margin: 5px 0 15px;
    font-size: 12.2px;
    line-height: 2.16;
    text-align: left;
}
.postFlex .postContainer > div:nth-child(3){
	padding-bottom: 10px;
}
.postFlex .postContainer .postBody > div{
	font-family: "Source Sans Pro";
}
.postFlex .postContainer .postBody > div h2,
.postFlex .postContainer .postBody > div h3{
	font-weight: bold;
	font-size: 21px;
	margin-bottom: 0;
    font-family: 'Poppins',sans-serif;
}
.postFlex .postContainer .postBody > div h4{
    font-size: 18px;
	font-family: 'Poppins',sans-serif;
	margin-bottom: 0;
}
.postFlex .postContainer .postBody > div ul li{
	font-size: 18px;
    font-family: 'Poppins',sans-serif;
    line-height: 28px;
}
.postFlex .postContainer .postBody > div p{
	font-size: 15px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.8;
    letter-spacing: -0.2px;
	color: #555;
	margin-top: 9px;
	margin-bottom: 25px;
}
.postFlex .postContainer .postBody > div p a{
	color: #555;
	font-weight: normal;
}
.postFlex .postChildrenContainer{
	width: 199px!important;
    min-width: 199px;
    margin-left: 79px;
    box-sizing: content-box;
}
.postFlex .postChildrenContainer .wordpressRelatedProducts > div[class*="vtex-shelf"][class*="title"]{
	font-size: 30px;
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: center;
	color: #333;
	padding: 0 0 10px;
}
.postFlex .postChildrenContainer .wordpressRelatedProducts ul{
	display: flex;
	flex-direction: column;
}
.postFlex .postChildrenContainer .wordpressRelatedProducts ul li{
	width: 100% !important;
	padding: 0;
}

.postFlex .postChildrenContainer .wordpressRelatedProducts ul li div[class*="nameContainer"] span{
	font-size: 12.6px;
    font-weight: 500;
    line-height: 1.62;
    letter-spacing: .6px;
    color: #323232;
}
.postFlex .postChildrenContainer .wordpressRelatedProducts ul li div[class*="priceContainer"],
.postFlex .postChildrenContainer .wordpressRelatedProducts ul li div[class*="buyButtonContainer"]{
	display:none;
}
.postFlex .postBody figure{
	margin: 0;
}
.postFlex .postBody figure iframe{
	max-width: 100%;
}
.relatedPostsBlockContainer {
	max-width: 96rem;
	margin: auto;
	padding: 0 20px;
}
.relatedPostsBlockContainer .relatedPostsBlockTitle{
	font-size: 18px;
    font-weight: 500;
    color: #404040;
    margin-bottom: 13px;
    margin-top: 20px;
    text-align: center;
    font-family: Source Sans Pro;
}
.relatedPostsBlockContainer .relatedPostsBlockFlex {
	justify-content: center;
}
.relatedPostsBlockContainer .relatedPostsBlockFlex .relatedPostsBlockFlexItem > div{
	display: flex;
	flex-direction: column;
	font-family: "Source Sans Pro";
	background-color: #f7f7f7;
}
.relatedPostsBlockContainer .relatedPostsBlockFlex .relatedPostsBlockFlexItem > div > h5{
	order: 3;
	padding: 0px 1.5rem 5px;
    font-size: 12px;
    line-height: 2;
    text-align: left;
    color: #6e6e6e;
    font-weight: 500;
}
.relatedPostsBlockContainer .relatedPostsBlockFlex .relatedPostsBlockFlexItem > div > h5 a{
	display: none;
}
.relatedPostsBlockContainer .relatedPostsBlockFlex .relatedPostsBlockFlexItem > div > a{
	order: 1;
    max-height: 220px;
    overflow: hidden;
}
.relatedPostsBlockContainer .relatedPostsBlockFlex .relatedPostsBlockFlexItem > div > h3{
	order: 2;
    padding-bottom: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.56;
    text-align: left;
    color: #333;
    font-family: "Source Sans Pro";
}
.relatedPostsBlockContainer .relatedPostsBlockFlex .relatedPostsBlockFlexItem > div > div{
	order: 4;
    font-size: 13px;
    line-height: 1.54;
    text-align: left;
    color: #666;
}

@media only screen and (max-width: 1340px) {
	.latestPostsBlockContainer,
	.categoryBlockContainer,
	.postContainer,
	.searchResultBlockContainer,
	.breadcrumbContainer,
	.listTitle,
	.listContainer,
	.postFlex{
		max-width: 1140px;
		margin: 0 auto;
	}
	.breadcrumbContainer{
		margin-top: 30px !important;
		margin-bottom: 35px !important;
	}
	.categoryBlockContainer .categoryBlockFlex .categoryBlockFlexItem{
		max-width: 360px;
	}
	.listContainer .listFlex .listFlexItem{
		max-width: 555px;
	}
}
@media only screen and (max-width: 1200px) {
	.latestPostsBlockContainer,
	.categoryBlockContainer,
	.postContainer,
	.searchResultBlockContainer,
	.breadcrumbContainer,
	.listTitle,
	.listContainer,
	.postFlex{
		max-width: 960px;
		margin: 0 auto;
	}
	.categoryBlockContainer .categoryBlockFlex .categoryBlockFlexItem{
		max-width: 303px;
	}
	.listContainer .listFlex .listFlexItem{
		max-width: 467px;
	}
}
@media only screen and (max-width: 1025px) {
	.searchBlockContainer {
		position: absolute;
		width: 260px;
		bottom: 0px;
		left: 50%;
		transform: translate(-50%, 0%);
	}
	.searchBlockContainer div[class*="vtex-input-prefix__group"] > span{
		margin-right: 0;
	}
	.latestPostsBlockContainer,
	.categoryBlockContainer,
	.postContainer,
	.searchResultBlockContainer,
	.breadcrumbContainer,
	.listTitle,
	.listContainer,
	.postFlex{
		max-width: 800px;
		margin: 0 auto;
	}
	.categoryBlockContainer .categoryBlockFlex .categoryBlockFlexItem{
		max-width: 252px;
	}
	.listContainer .listFlex .listFlexItem{
		max-width: 390px;
	}
}
@media only screen and (max-width: 860px) {
	.latestPostsBlockContainer,
	.categoryBlockContainer,
	.postContainer,
	.searchResultBlockContainer,
	.breadcrumbContainer,
	.listTitle,
	.listContainer,
	.postFlex{
		padding: 5% 5% 0;
	}
	.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexFirstColumnItem{
		width: 100%;
	}
	.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexSecondColumn{
		width: 100%;
	}
	.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexSecondColumn > div > div[class*="vtex-card"] > a{
		overflow: hidden;
		max-height: 300px;
	}
	.breadcrumbContainer{
		margin: 0 !important;
	}
	.categoryBlockContainer .categoryBlockFlex .categoryBlockFlexItem{
		max-width: unset;
    	width: 100%;
	}
	.breadcrumbContainer{
		margin: 15px 0;
	}
	.listContainer .listFlex .listFlexItem{
		max-width: unset;
	}
	.postFlex .postContainer{
		width: 65%;
		float: left;
		padding: 0;
		margin: 0;
	}
	.postFlex .postChildrenContainer{
		margin-left: 0;
	}
}
@media only screen and (min-width: 631px) {
	.postFlex .postChildrenContainer .wordpressRelatedProducts ul{
		width: 100% !important;
		transform: none !important;
	}
	.postFlex .postChildrenContainer .wordpressRelatedProducts ul[class*='dotsContainer']{
		display: none;
	}
}
@media only screen and (max-width: 630px) {
	.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexFirstColumnItem > div[class*="vtex-card"] > a .teaserGradientOverlay .teaserTextOverlay .teaserTextOverlayTitle{
		font-size: 25.3px;
	}
	.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexFirstColumnItem > div[class*="vtex-card"] > a .teaserGradientOverlay .teaserTextOverlay .teaserTextOverlayMeta{
		font-size: 12.2px;
	}
	.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexSecondColumn > div > div[class*="vtex-card"] > a .teaserGradientOverlay .teaserTextOverlay .teaserTextOverlayTitle{
		font-size:20px;
	}
	.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexSecondColumn > div > div[class*="vtex-card"] > a .teaserGradientOverlay .teaserTextOverlay .teaserTextOverlayMeta{
		font-size: 12.2px;
	}
	.postFlex{
		flex-direction: column;
	}
	.postFlex .postContainer{
		width: 100%;
	}
	.postFlex .postChildrenContainer{
		width: 100%!important;
	}
	.postFlex .postChildrenContainer .wordpressRelatedProducts ul{
		flex-direction: unset;
	}
	.postFlex .postChildrenContainer .wordpressRelatedProducts ul li{
		width: inherit !important;
		padding: 0;
	}
}
@media only screen and (max-width: 450px) {
	.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexFirstColumnItem > div[class*="vtex-card"] > a .teaserGradientOverlay .teaserTextOverlay .teaserTextOverlayTitle{
		font-size: 17.3px;
	}
	.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexFirstColumnItem > div[class*="vtex-card"] > a .teaserGradientOverlay .teaserTextOverlay .teaserTextOverlayMeta{
		font-size: 10.2px;
	}
	.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexSecondColumn > div > div[class*="vtex-card"] > a .teaserGradientOverlay .teaserTextOverlay .teaserTextOverlayTitle{
		font-size:15px;
	}
	.latestPostsBlockContainer .latestPostsBlockFlex .latestPostsBlockFlexSecondColumn > div > div[class*="vtex-card"] > a .teaserGradientOverlay .teaserTextOverlay .teaserTextOverlayMeta{
		font-size: 10.2px;
	}
	.relatedPostsBlockContainer {
		padding: 0;
	}
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/vtex.store-footer.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.row--menu-row {
  padding-right: 24px;
}

.row--menu-row .rowContainer {
  align-items: flex-start;
}

.row--payment-methods {
  padding-top: 16px;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/vtex.product-identifier.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.product-identifier--productReference {
  margin-bottom: 1rem;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/vtex.reviews-and-ratings.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.container {
  max-width: 96rem;
  padding-left: .5rem;
  padding-right: .5rem;
}

.inlineContainer {
  margin-left: 0rem;
}

.star--filled {
  color: #FFB100;
}

.star--empty {
  color: #FFB100;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/vtex.product-highlights.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.productHighlightWrapper--collection {
  position: absolute;
  top: 10px;
  left: 5px;
  width: 200px;
}

.productHighlightText {
  background: antiquewhite;
  border-radius: 20px;
  padding: 5px 10px;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/vtex.flex-layout.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.flexRowContent--menu-link,
.flexRowContent--main-header {
  padding: 0 0.5rem;
}

@media screen and (min-width: 40em) {
  .flexRowContent--menu-link,
  .flexRowContent--main-header {
    padding: 0 1rem;
  }
}
@media screen and (min-width: 80rem) {
  .flexRowContent--menu-link,
  .flexRowContent--main-header {
    padding: 0 0.25rem;
  }
}

.flexRowContent--menu-link {
  background-color: #03044e;
  color: #fff;
}

.flexRowContent--main-header {
  background-color: #f0f0f0;
}

.flexRowContent--main-header-mobile {
  align-items: center;
  padding: 0.625rem 0.5rem;
  background-color: #f0f0f0;
}

.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
  color: #ffffff;
  font-size: 14px;
}

.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
  color: #727273;
  font-size: 14px;
}
.flexRow--deals {
  background-color: #a7afbd;
  padding: 14px 0px;
}

.flexRow--deals .stretchChildrenWidth {
  align-items: center;
}

.flexRow--deals .flexCol {
  align-items: center;
}

.flexCol--filterCol {
  max-width: 500px;
  min-width: 230px;
}

.flexCol--productCountCol {
  align-items: flex-start;
}

.flexCol--orderByCol {
  align-items: flex-end;
}

.flexCol--orderByMobileCol {
  width: 42%;
}

.flexCol--filterMobileCol {
  width: 38%;
}

.flexRow--quickviewMainRow {
  display: flex;
  max-height: 100%;
}

.flexColChild--quickviewDetails:first-child {
  overflow-y: auto;
  height: 66% !important;
  overflow-x: hidden;
}

.flexColChild--quickviewDetails:last-child {
  height: 34% !important;
}

.flexRow--addToCartRow {
  padding-bottom: 1rem;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/vtex.carousel.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.containerImg {
  background-color: #F0F0F0;
}

.containerImg .img {
  max-width: 1520px;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/vtex.search-result.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.galleryLayoutOptionButton {
  background-color: #F0F0F0;
  color: #3F3F40;
  padding: 0.375rem 0.75rem 0.375rem 0.75rem;
}

.galleryLayoutOptionButton--selected {
  background-color: #3F3F40;
  color: #FFFFFF;
}

.galleryLayoutSwitcher {
  border-radius: 4px 4px 4px 4px;
  justify-content: center;
  overflow: hidden;
  width: auto !important;
  align-self: center
}

.galleryItem--list {
  border-bottom: 1px #E7E9EE solid;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/vtex.slider-layout.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.sliderLayoutContainer {
  justify-content: center;
}
.sliderLayoutContainer--carousel {
  background-color: #F0F0F0;
}

.sliderTrackContainer {
  max-width: 1520px;
}

.paginationDotsContainer {
  margin-top: .5rem;
  margin-bottom: .5rem;
}

.layoutContainer--shelf {
  margin-top: 20px;
  margin-bottom: 20px;
  max-width: 96rem;
}

.slide--shelf {
  margin-bottom: 25px;
  padding-left: .5rem;
  padding-right: .5rem;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/vtex.stack-layout.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.stackItem--product {
  width: 100%;
}

.stackItem--quickview {
  right: 0;
  top: 0;
  left: auto;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/configs/style.json from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "typeScale": [
        3, 2.25, 1.5, 1.25, 1, 0.875, 0.75
      ],
      "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16],
      "customMedia": [
        { "s": 20 },
        { "ns": {
            "value": 40,
            "minWidth": true
          }
        },
        { "m": {
            "value": 40,
            "minWidth": true
          }
        },
        { "l": {
          "value": 64,
          "minWidth": true
        }
        },
        { "xl": {
            "value": 80,
            "minWidth": true
          }
        }
      ],
      "colors": {
        "black-90": "rgba(0,0,0,.9)",
        "black-80": "rgba(0,0,0,.8)",
        "black-70": "rgba(0,0,0,.7)",
        "black-60": "rgba(0,0,0,.6)",
        "black-50": "rgba(0,0,0,.5)",
        "black-40": "rgba(0,0,0,.4)",
        "black-30": "rgba(0,0,0,.3)",
        "black-20": "rgba(0,0,0,.2)",
        "black-10": "rgba(0,0,0,.1)",
        "black-05": "rgba(0,0,0,.05)",
        "black-025": "rgba(0,0,0,.025)",
        "black-0125": "rgba(0,0,0,.0125)",

        "white-90": "rgba(255,255,255,.9)",
        "white-80": "rgba(255,255,255,.8)",
        "white-70": "rgba(255,255,255,.7)",
        "white-60": "rgba(255,255,255,.6)",
        "white-50": "rgba(255,255,255,.5)",
        "white-40": "rgba(255,255,255,.4)",
        "white-30": "rgba(255,255,255,.3)",
        "white-20": "rgba(255,255,255,.2)",
        "white-10": "rgba(255,255,255,.1)",
        "white-05": "rgba(255,255,255,.05)",
        "white-025": "rgba(255,255,255,.025)",
        "white-0125": "rgba(255,255,255,.0125)"
      },
      "semanticColors": {
        "background": {
          "base": "#ffffff",
          "base--inverted": "#03044e",
          "action-primary": "#0F3E99",
          "action-secondary": "#eef3f7",
          "emphasis": "#f71963",
          "disabled": "#f2f4f5",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "hover-background": {
          "action-primary": "#072c75",
          "action-secondary": "#dbe9fd",
          "emphasis": "#dd1659",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#e13232",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "active-background": {
          "action-primary": "#0c389f",
          "action-secondary": "#d2defc",
          "emphasis": "#dd1659",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "text": {
          "action-primary": "#0F3E99",
          "action-secondary": "#eef3f7",
          "link": "#0F3E99",
          "emphasis": "#f71963",
          "disabled": "#979899",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "visited-text": {
          "link": "#0c389f"
        },
        "hover-text": {
          "action-primary": "#072c75",
          "action-secondary": "#dbe9fd",
          "link": "#0c389f",
          "emphasis": "#dd1659",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#e13232",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0"
        },
        "active-text": {
          "link": "#0c389f",
          "emphasis": "#dd1659",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0"
        },
        "border": {
          "action-primary": "#0F3E99",
          "action-secondary": "#eef3f7",
          "emphasis": "#f71963",
          "disabled": "#e3e4e6",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "hover-border": {
          "action-primary": "#072c75",
          "action-secondary": "#dbe9fd",
          "emphasis": "#dd1659",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#e13232",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "active-border": {
          "action-primary": "#0c389f",
          "action-secondary": "#d2defc",
          "emphasis": "#dd1659",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "on": {
          "base": "#3f3f40",
          "base--inverted": "#ffffff",
          "action-primary": "#ffffff",
          "action-secondary": "#0F3E99",
          "emphasis": "#ffffff",
          "disabled": "#979899",
          "success": "#ffffff",
          "success--faded": "#3f3f40",
          "danger": "#ffffff",
          "danger--faded": "#3f3f40",
          "warning": "#ffffff",
          "warning--faded": "#1a1a1a",
          "muted-1": "#ffffff",
          "muted-2": "#ffffff",
          "muted-3": "#3f3f40",
          "muted-4": "#3f3f40",
          "muted-5": "#3f3f40"
        },
        "hover-on": {
          "action-primary": "#ffffff",
          "action-secondary": "#0F3E99",
          "emphasis": "#ffffff",
          "success": "#ffffff",
          "success--faded": "#3f3f40",
          "danger": "#ffffff",
          "danger--faded": "#3f3f40",
          "warning": "#ffffff",
          "warning--faded": "#1a1a1a"
        },
        "active-on": {
          "action-primary": "#ffffff",
          "action-secondary": "#0F3E99",
          "emphasis": "#ffffff",
          "success": "#ffffff",
          "success--faded": "#3f3f40",
          "danger": "#ffffff",
          "danger--faded": "#3f3f40",
          "warning": "#ffffff",
          "warning--faded": "#1a1a1a"
        }
      },
      "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2],
      "borderRadius": [0, 0.125, 0.25, 0.5, 1],
      "widths": [1, 2, 4, 8, 16],
      "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96],
      "heights": [1, 2, 4, 8, 16],
      "sizes": [
        {"name": "small", "value": 2},
        {"name": "regular", "value": 2.5},
        {"name": "large", "value": 3}
      ],
      "typography":{
        "measure": [30, 34, 20],
        "styles": {
          "heading-1": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "700",
            "fontSize": "3rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "heading-2": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "700",
            "fontSize": "2.25rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "heading-3": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "700",
            "fontSize": "1.75rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "heading-4": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "normal",
            "fontSize": "1.5rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "heading-5": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "normal",
            "fontSize": "1.25rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "heading-6": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "normal",
            "fontSize": "1.25rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "body": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "normal",
            "fontSize": "1rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "small": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "normal",
            "fontSize": "0.875rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "mini": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "normal",
            "fontSize": "0.75rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "action": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "500",
            "fontSize": "1rem",
            "textTransform": "uppercase",
            "letterSpacing": "0"
          },
          "action--small": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "500",
            "fontSize": "0.875rem",
            "textTransform": "uppercase",
            "letterSpacing": "0"
          },
          "action--large": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "500",
            "fontSize": "1.25rem",
            "textTransform": "uppercase",
            "letterSpacing": "0"
          },
          "code": {
            "fontFamily": "Consolas, monaco, monospace",
            "fontWeight": "normal",
            "fontSize": "1rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          }
        }
      },
      "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0]
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/contact/vtex.flex-layout.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.flexRowContent--contact {
  max-width: 700px;
  margin: auto;
}

.flexRowContent--contact :global(.vtex-input__label),
.flexRowContent--contact :global(.vtex-textarea__label) {
  font-size: 1rem;
  color: #3f3f40;
}

.flexRowContent--contact :global(.vtex-input),
.flexRowContent--contact :global(.vtex-textarea) {
  display: block;
  margin-bottom: 1rem;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/faq/vtex.flex-layout.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.flexRowContent--faq {
  max-width: 700px;
  margin: auto;
}

```