[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 b2b-theme/styles/css/vtex.modal-layout.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.triggerContainer--quickviewTrigger {
  background: #f3f9fe;
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  top: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
  outline: none;
}

.paper--quickviewContainer {
  padding: 32px;
  overflow: visible;
}

.paper--quickviewContainer
  :global(.vtex-store-components-3-x-carouselGaleryThumbs) {
  display: none;
  opacity: 0;
  visibility: hidden;
}

.paper--quickviewContainer
  :global(.vtex-store-components-3-x-productImagesContainer),
.paper--quickviewContainer
  :global(.vtex-store-components-3-x-carouselContainer) {
  width: auto;
}

.paper--quickviewContainer
  :global(.vtex-store-components-3-x-carouselGaleryCursor) {
  margin-left: initial !important;
  width: initial !important;
}

.paper--quickviewContainer
  :global(.vtex-store-components-3-x-productImagesContainer--desktop)::after {
  content: none;
}

.paper--quickviewContainer :global(.vtex-flex-layout-0-x-flexCol--right-col) {
  margin-right: 24px;
}

.paper--quickviewContainer .closeButton {
  width: 32px;
  height: 32px !important;
  display: block;
  position: absolute;
  top: -12px;
  right: -12px;
  min-height: initial;
  border-radius: 50%;
  background: #dee7ef;
  border: none;
  outline: none;
}

.paper--quickviewContainer .closeButtonLabel {
  display: none;
}

.paper--quickviewContainer .closeButton::before {
  content: url("assets/icons/closeQuickviewIcon.svg");
  display: block;
}

/* Shipping Availability */

.headerContainer--shipping-availability {
  align-items: center;
  border-bottom: 1px solid var(--lines-light);
  position: relative;
  padding: 0.5rem 1rem;
}

.closeButtonContainer--shipping-availability {
  align-items: center;
  background-color: var(--lines-light);
  border-radius: 999px;
  display: flex;
  height: 2rem;
  justify-content: center;
  top: 1rem;
  right: 1rem;
  width: 2rem;
}

@media (min-width: 64rem) {
  .paper--shipping-availability {
    overflow: visible;
  }
  .headerContainer--shipping-availability {
    border: none;
    height: 0;
    padding: 0;
  }
  .headerContent--shipping-availability {
    display: none;
  }
  .closeButtonContainer--shipping-availability {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
  }
}

.closeButton--shipping-availability {
  padding: 0;
  font-style: 0;
  line-height: 0;
}

.closeIcon--shipping-availability {
  height: 1.25rem;
  width: 1.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 b2b-theme/styles/css/vtex.sticky-layout.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.container--headerMobile {
  background: #597298;
  z-index: 999;
}

.wrapper--box--stuck .container--box {
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  margin-left: 354px;
  z-index: 997;
}

.container--stickyBuy {
  background: #fff;
  padding: 8px 0px;
}

.wrapper--stickyBuy {
  height: 0 !important;
  z-index: 999;
}

.container--stickyBuy :global(.vtex-button) {
  height: 48px;
  background: var(--serious-orange);
  border: 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 b2b-theme/styles/css/vtex.store-components.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.container {
  max-width: 1440px;
  width: 100%;
  padding: 0px 32px;
  margin: 0px auto;
}

.logoLink {
  display: block;
  transform: none !important;
}

.logoImage {
  display: block;
  height: 28px;
  width: auto;
}

.searchBarContainer :global(.vtex-input-prefix__group) {
  height: 48px;
}

.imageElement--vtexLogo {
  max-width: 67px;
  object-fit: contain;
  margin-right: 16px;
}

.newsletter {
  max-width: 100%;
  margin: 0;
  height: 104px;
  display: flex;
  align-items: center;
  background: var(--b2b-header-blue-medium);
}

.newsletter .container {
  padding: 0px 32px;
}

.productImageTag--sellersPage--main {
  max-width: 168px;
}

.newsletter .form {
  display: flex;
  align-items: center;
  max-width: 100%;
}

.newsletter .form .label {
  font-size: 32px;
  line-height: 40px;
  font-weight: 500;
  font-family: "Roboto";
  margin-right: auto;
  color: #fff;
}

.newsletter .inputGroup {
  max-width: 680px;
  width: 100%;
  padding: 0;
  position: relative;
}

.newsletter :global(.vtex-input-prefix__group) {
  height: initial;
  border: none;
}

.newsletter :global(.vtex-styleguide-9-x-input) {
  height: 56px;
  background: #fff;
  font-size: 20px;
  line-height: 24px;
  font-family: Roboto;
  color: var(--black-medium);
}

.newsletter :global(.vtex-styleguide-9-x-input)::placeholder {
  color: var(--black-medium);
  font-size: 20px;
  line-height: 24px;
  font-family: Roboto;
}

.newsletter .buttonContainer {
  position: absolute;
  right: 24px;
  top: 8px;
}

.newsletter .buttonContainer :global(.vtex-button) {
  color: var(--fresh-blue);
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
  font-family: Roboto;
  outline: none;
  border: none;
  background: none;
}

.newsletter .buttonContainer :global(.vtex-button__label) {
  padding: 0;
}

.imageElement--bannerThird {
  margin-bottom: 24px;
}

.logoContainer {
  display: block;
  padding: 0;
}

.imageElement--quickviewTrigger {
  width: 20px;
  height: 14px;
  object-fit: contain;
}

.searchBarContainer {
  width: 100%;
  max-width: 856px;
}

.searchBarContainer :global(.vtex-styleguide-9-x-input) {
  max-width: 100%;
  width: 100%;
}

.searchBarContainer :global(.vtex-input__suffix) {
  border-radius: 0px;
}

.imageElement--paymentImage {
  width: 100%;
  object-fit: contain;
  max-height: 18px;
}

.imageElement--networkImage {
  display: block;
}

.imageElement--shoByImage {
  width: 80px;
  height: auto;
  object-fit: contain;
  max-height: 80px;
  max-width: 80px;
  margin-bottom: 16px;
}

.imageElement--imageCategorySlider {
  border: 1px solid #dee7ef;
  padding: 16px;
  border-radius: 50%;
  margin-bottom: 12px;
}

.imageElement--blogImage {
  display: block;
  margin-bottom: 16px;
}

.imageElement--benefitImage {
  margin: 0px auto 24px;
  width: 32px;
  height: 34px;
  object-fit: contain;
}

.userAddressContainer {
  height: 100%;
  background: none;
  padding: 0;
  margin-right: 60px;
}

.userAddressContainer .container {
  padding: 0;
}

@media (max-width: 64rem) {
  .imageElement--blogImage {
    width: 100%;
  }

  .container {
    padding: 0px 16px;
  }

  .imageElement--homeSlider {
    max-height: 384px !important;
    object-fit: cover;
  }

  .newsletter {
    height: 136px;
  }

  .newsletter .container {
    padding: 0;
  }

  .newsletter .form {
    flex-flow: column nowrap;
  }

  .newsletter .form .label {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 12px;
    width: 100%;
    text-align: center;
  }

  .newsletter .buttonContainer :global(.vtex-button) {
    font-size: 14px;
  }

  .newsletter :global(.vtex-styleguide-9-x-input)::placeholder,
  .newsletter :global(.vtex-styleguide-9-x-input) {
    font-size: 18px;
    line-height: 20px;
  }

  .imageElement--paymentImage {
    margin: 0px auto;
  }

  .searchBarInnerContainer--searchMobile :global(.vtex-input-prefix__group) {
    border: none;
  }

  .searchBarInnerContainer--searchMobile :global(.vtex-styleguide-9-x-input) {
    max-width: 100%;
  }

  .searchIcon--searchMobile {
    display: none;
  }

  .searchBarIcon--searchMobile:not(.searchBarIcon--searchMobile--clear) {
    background: url("assets/icons/searchMobile.svg");
    width: 18px;
    height: 18px;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .imageElement--singleBanner {
    width: 100%;
    object-fit: cover;
  }

  .logoLink {
    margin-right: 56px;
    display: flex !important;
    align-items: center;
  }

  .logoImage {
    display: block;
    width: 123px;
    height: 24px;
  }

  .suffixWrapper--searchMobile {
    align-items: center;
  }

  .searchBarContainer {
    padding: 0;
  }

  .imageElement--networkImage {
    display: block;
  }

  .resultsList--searchMobile {
    height: 100%;
    max-height: 100%;
    padding: 0px 16px;
  }

  .resultsItem--searchMobile {
    color: #717786;
  }

  .resultsItemName--searchMobile,
  .searchTerm--searchMobile {
    color: #000 !important;
  }

  .productImagesContainer--sellersPage {
    height: 106px !important;
    overflow: hidden;
    width: 106px !important;
    margin-right: 24px;
  }

  .productImageTag--sellersPage--main {
    max-height: 106px;
    object-fit: contain;
  }
}

/* Product Images */

.productImagesContainer--desktop,
.carouselContainer--desktop {
  width: 564px;
}

.carouselGaleryThumbs--desktop {
  max-width: 100px;
}

.productImagesThumb--desktop,
.productImagesThumb--desktop :not(:global(.vtex-fake)) {
  border-radius: 4px;
  overflow: hidden;
}

.productImagesThumbActive--desktop .carouselThumbBorder--desktop {
  border: 1px solid #0067c7;
}

.carouselContainer--desktop .carouselGaleryCursor,
.productImagesGallerySwiperContainer--desktop,
.productImagesGallerySlide--desktop,
.productImage--desktop,
.productImageTag--desktop {
  height: 448px !important;
  width: 448px !important;
}

.carouselContainer--desktop .carouselGaleryCursor {
  margin-left: 100px;
  width: 464px !important;
}

.productImagesContainer--desktop {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.productImagesContainer--desktop::after {
  display: block;
  color: #717786;
  content: "Roll over image to zoom in";
  padding-top: 20px;
  padding-left: 116px;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.productImageTag--desktop--zoom {
  display: none;
}

/* Product Brand */

.productBrandContainer {
  font-size: 14px;
  line-height: 16px;
  color: #0067c7;
}

/* Product Name */

.productNameContainer--product-page {
  color: var(--serious-black);
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
}

.productNameContainer--minicart {
  color: var(--black-dark);
  font-size: 14px;
  line-height: 18px;
}

/* Sku Selector */

.skuSelectorContainer--desktop .skuSelectorSubcontainer {
  margin-bottom: 20px;
}

.skuSelectorContainer--desktop .skuSelectorNameContainer {
  margin: 0;
}

.skuSelectorContainer--desktop .skuSelectorName,
.skuSelectorContainer--desktop .skuSelectorNameSeparator,
.skuSelectorContainer--desktop .skuSelectorSelectorImageValue {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #717786;
}

.skuSelectorContainer--desktop .skuSelectorSelectorImageValue {
  color: #000000;
}

.skuSelectorContainer--desktop .skuSelectorTextContainer {
  margin-bottom: 8px;
}

.skuSelectorContainer--desktop .skuSelectorOptionsList {
  margin: 0;
}

.skuSelectorContainer--desktop .skuSelectorItem.skuSelectorItemImage {
  height: 48px;
  width: 48px;
}

.skuSelectorContainer--desktop .skuSelectorItem {
  height: 40px;
}

/* Round SKU Selector */

.skuSelectorContainer--color-round .frameAround {
  border: 1px solid #bdc9d6;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

.skuSelectorContainer--color-round .skuSelectorItem--selected .frameAround {
  box-shadow: 0 0 0 4px #f3f9ff;
  border-color: #0067c7;
}

.skuSelectorContainer--color-round .skuSelectorInternalBox {
  border: none;
}

.skuSelectorContainer--color-round
  .skuSelectorSubcontainer--cor
  .skuSelectorOptionsList
  :not(:global(.vtex-fake)) {
  border-radius: 9999px;
}

.productImagesContainer--fake-summary {
  pointer-events: none !important;
}

.productImagesContainer--fake-summary :not(:global(.vtex-fake)) {
  display: block;
  float: left;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.productImagesContainer--fake-summary,
.productImageTag--fake-summary {
  height: 96px !important;
  overflow: hidden;
  width: 96px !important;
}

.productImagesGallerySwiperContainer--fake-summary .swiper-pagination,
.swiperCaret--fake-summary,
.carouselGaleryThumbs--fake-summary {
  display: none !important;
}

.carouselContainer--fake-summary .carouselGaleryCursor {
  padding: 0;
  margin: 0;
  width: 100%;
}

.productNameContainer--fake-summary {
  font-size: 14px;
  line-height: 16px;
}

.productSKUAttributesContainer--inline {
  color: #717786;
  font-size: 14px;
  line-height: 16px;
}

.attributeLine--inline,
.attributeName--inline {
  color: inherit;
  display: inline;
  font-weight: inherit;
  font-size: inherit;
  margin: 0;
  padding: 0;
}

.attributeName--inline::after {
  content: " ";
}

.attributeLine--inline::after {
  content: ", ";
}

.attributeLine--inline:last-child::after {
  content: "";
}

/* Product Description */

@media (min-width: 64rem) {
  .productDescriptionContainer--desktop {
    max-width: 300px;
  }
}

.productDescriptionText {
  font-size: 14px;
  line-height: 1.25;
  color: var(--black-medium);
}

.productDescriptionTitle {
  display: none;
}

.productDescriptionTitle--desktop {
  display: block;
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: var(--black-dark);
  margin-bottom: 24px;
}

/* Product Images Gallery */

.productImagesGallerySwiperContainer--gallery {
  margin: 0;
  padding: 0;
}

@media (min-width: 64rem) {
  .productImagesGallerySwiperContainer--gallery {
    height: 464px;
    width: 664px;
  }
}

.carouselGaleryThumbs--gallery {
  display: none;
}

.productImagesGallerySlide--gallery {
  margin: 0;
  margin-bottom: 16px;
}

@media (min-width: 64rem) {
  .productImagesGallerySlide--gallery {
    height: 224px;
    width: 50% !important;
    max-width: 324px;
  }
}

.productImagesGallerySwiperContainer--gallery :not(:global(.vtex-fake)) {
  flex-wrap: wrap;
  justify-content: space-between;
  transform: translate3d(0, 0px, 0px) !important; /* Disables swiping */
}

.productImageTag--gallery {
  border-radius: 4px;
}

/* Dots Around */

.productImagesGallerySlide--dots-around {
  padding-bottom: 32px;
}

.productImagesContainer--dots-around .swiper-pagination {
  bottom: 0;
}

.productImagesContainer--dots-around .swiperBullet {
  background-color: var(--lines-dark);
  opacity: 1;
}

.productImagesContainer--dots-around .swiperBullet--active {
  background-color: var(--serious-blue-dark);
}

/* Shipping Simulator */

.shippingContainer
  :not(:global(.vtex-address-form__postalCode)):not(:global(.vtex-input)):not(:global(.vtex-input-prefix__group)):not(:global(.vtex-address-form-4-x-input)):not(:global(.vtex-button)):not(:global(.vtex-button__label)) {
  display: none;
}

.shippingContainer {
  display: flex;
}

@media (min-width: 40rem) {
  .shippingContainer {
    width: 18rem;
  }
}

.shippingContainer :global(.vtex-address-form__postalCode),
.shippingContainer :global(.vtex-button) {
  flex: 1 1 auto;
}

.shippingContainer :global(.vtex-address-form__postalCode) {
  width: 100%;
}

.shippingContainer :global(.vtex-input-prefix__group) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
  border-width: 0.0625rem;
  height: 2.75rem;
}

.shippingContainer :global(.vtex-address-form-4-x-input) {
  color: var(--black-dark);
}

.shippingContainer :global(.vtex-button) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
  color: var(--fresh-blue-dark);
  width: auto;
}

.shippingContainer :global(.vtex-button):focus {
  outline: none;
}

.shippingContainer :global(.vtex-button):disabled {
  color: var(--lines-light);
}

.shippingContainer :global(.vtex-input-prefix__group),
.shippingContainer :global(.vtex-button) {
  border-width: 0.0625rem;
  border-color: var(--lines-light);
  background-color: #fff;
}

.shippingContainer :global(.vtex-button__label) {
  color: inherit;
  font-size: 0;
}

.shippingContainer :global(.vtex-button__label)::before {
  content: "OK";
  font-size: 0.875rem;
}

.shippingTable,
.shippingTableBody,
.shippingTableRow {
  border: none;
}

.shippingTable {
  margin: 0;
  margin-top: 1rem;
  padding: 0;
}

.shippingTableCell {
  padding: 16px;
}

.shippingTableCellDeliveryName {
  background-color: #f3f9ff;
  padding-top: 32px;
  padding-bottom: 32px;
  height: 92px;
  width: 0px;
  padding-left: 0;
  padding-right: 0;
}

.shippingTableCellDeliveryEstimate {
  border-left: none;
}

.shippingTableRow {
  background-color: #fff;
  border: 1px solid #dee7ef;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.shippingTableRow:last-child {
  margin-bottom: 0;
}

.shippingTableLabel {
  white-space: pre;
  font-weight: 500;
  color: #000;
  position: relative;
  padding-left: 16px;
}

.shippingTableRadioBtn {
  display: none;
  margin-right: 36px;
  margin-left: 4px;
  top: 8px;
  position: relative;
}

.shippingTableCellDeliveryPrice {
  font-weight: 500;
  padding-left: 0;
  padding-right: 16px;
  text-align: right;
  width: 100%;
}

.shippingTableCellDeliveryEstimate,
.shippingTableCellDeliveryPrice {
  white-space: pre;
}

.shippingTableCellDeliveryEstimate::before,
.shippingTableCellDeliveryPrice::after {
  content: "\a";
  display: block;
}

.shippingNoMessage {
  color: var(--black-medium);
  text-align: center;
}

```


[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 b2b-theme/styles/css/vtex.wish-list.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.wishlistIconContainer {
  position: absolute;
  width: 38px;
  height: 38px;
  display: block;
  border-radius: 50%;
  background: #f3f9fe;
  transition: all .3s ease;
  opacity: 0;
  text-align: center;
}

.wishlistIconContainer :global(.vtex-button):hover,
.wishlistIconContainer :global(.vtex-button){
  outline: none;
  background: none;
}

.wishlistIconContainer :global(.vtex-button__label){
  padding: 0;
}

.wishlistIcon.outline {
  background: url("assets/icons/heartIcon.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 19px;
  height: 15px;
}

.wishlistIcon.fill {
  background: url("assets/icons/heartFilled.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 19px;
  height: 15px;
}
```


[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 b2b-theme/styles/css/vtex.wordpress-integration.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.categoryBlockTitle,
.categoryBlockLink {
  display: none;
}

.categoryBlockContainer,
.categoryBlockFlex {
  margin: 0;
  padding: 0;
}

.categoryBlockFlex {
  margin-left: -1rem;
  margin-right: -1rem;
}

.categoryBlockFlexItem {
  margin: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 50%;
}

.categoryBlockFlexItem:first-child {
  width: 100%;
}

@media (min-width: 64em) {
  .categoryBlockFlexItem,
  .categoryBlockFlexItem:first-child {
    width: 25%;
  }
}

.categoryBlockFlexItem :global(.vtex-card) {
  box-shadow: none !important;
}

.teaserImage {
  border-radius: 0.25rem;
  height: auto;
  margin-bottom: 1rem;
  width: 100%;
}

.teaserTitle,
.teaserTitleLink,
.teaserBody {
  padding: 0;
  margin: 0;
}

.teaserTitle,
.teaserTitleLink {
  color: #000;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 500;
  margin-bottom: 8px;
  text-decoration: none;
}

.teaserBody {
  font-size: 0.875rem;
  line-height: 1.2857142857;
  color: #717786;
  margin-bottom: 24px;
}

```


[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 b2b-theme/styles/css/vtex.store-footer.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.footerLayout {
  background: var(--b2b-blue-darkest);
  padding-top: 40px;
  padding-bottom: 0px;
}

.footerLayout--relative {
  position: relative;
}

.footerLayout--z-999 {
  z-index: 999;
}

.footerLayout--z-998 {
  z-index: 998;
}

@media (max-width: 64rem) {
  .footerLayout {
    padding-top: 24px;
    padding-bottom: 32px;
  }
}

```


[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 b2b-theme/styles/css/vtex.product-identifier.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.product-identifier--productReference {
  font-size: 12px;
  line-height: 16px;
  color: #717786;
}

```


[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 b2b-theme/styles/css/vtex.locale-switcher.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.button {
  padding: 8px 48px 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  height: 42px;
  position: relative;
}

.globeIcon {
  color: rgba(255, 255, 255, 0.4);
  margin-right: 8px;
}

.buttonText {
  color: #fff;
}

.button::after {
  content: url("assets/icons/chevronDownSwitcher.svg");
  position: absolute;
  right: 16px;
  top: 45%;
  transform: translateY(-50%);
}

.container--locationDrawer {
  width: auto;
  display: flex;
  justify-content: start;
  margin: 0;
}

.buttonText--locationDrawer {
  color: #000;
  font-size: 16px;
  line-height: 32px;
}

.button--locationDrawer {
  padding: 0;
  border: none;
}

.button--locationDrawer::before {
  content: url("assets/icons/globe.svg");
  width: 20px;
  height: 20px;
  margin-right: 16px;
}

.button--locationDrawer::after {
  content: none;
}

.globeIcon--locationDrawer {
  display: none;
  opacity: 0;
}

@media (max-width: 64rem) {
  .button {
    border: 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 b2b-theme/styles/css/vtex.auth-challenge.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.challengeContentWrapper--resellerChallengeFallback {
  display: flex;
  align-items: center;
}

.challengeContentWrapper--loginChallengeContent {
  display: flex;
  align-items: center;
}

```


[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 b2b-theme/styles/css/vtex.reviews-and-ratings.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.inlineContainer {
  margin: 0;
}

.container {
  max-width: initial;
  padding: 0;
  margin: 0;
}

.summaryContainer {
  display: flex;
  font-size: 12px;
  line-height: 16px;
  color: #717786;
  margin: 0;
  margin-bottom: 0.5rem;
}

.stars {
  display: flex;
  align-items: center;
  padding-right: 8px;
}

.summaryContainer .stars {
  justify-content: center;
}

.star {
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: transparent;
  display: inline-block;
  font-size: 0;
  height: 16px;
  width: 16px;
}

.star--filled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23FFBA09' d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'%3E%3C/path%3E%3C/svg%3E");
}

.star--empty {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23FFBA09' d='M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z'%3E%3C/path%3E%3C/svg%3E");
}

/* Product Page */

@media (min-width: 64rem) {
  .reviewCommentsContainer {
    width: 680px;
  }
}

:global(.vtex-flex-layout-0-x-flexCol--ratings-only) .container {
  background-color: #f3f9ff;
  border-radius: 4px;
  padding: 32px 24px;
}

.starsContainer,
.reviewsRating {
  margin-bottom: 1rem;
}

.reviewsRating {
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}

.starsContainer .stars {
  justify-content: center;
}

.writeReviewContainer {
  text-align: center;
  margin: 0;
}

.writeReviewContainer
  :global(.vtex-styleguide-9-x-jsFocusVisible)
  :not(:global(.vtex-fake)):first-child {
  justify-content: center;
}

.writeReviewContainer
  :global(.vtex-styleguide-9-x-jsFocusVisible)
  :not(:global(.vtex-fake)):first-child
  :not(:global(.vtex-fake)):last-child {
  flex-grow: unset;
}

.formContainer {
  background-color: transparent;
  margin: 0;
  padding: 0;
  text-align: initial;
}

.formContainer :global(.vtex-card) {
  background-color: transparent;
  box-shadow: none !important;
  padding: 0;
}

.reviewCommentRating {
  color: var(--black-dark);
}

.reviewComment {
  border-width: 1px;
  color: var(--black-medium);
}

```


[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 b2b-theme/styles/css/vtex.styleguide.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
:global(.vtex-input-prefix__group),
:global(.vtex-dropdown__container),
:global(.vtex-input) {
  border-width: 1px;
}

:global(.vtex-input-prefix__group),
.container:global(.vtex-dropdown__container) {
  border-color: var(--lines-darker);
}

.jsFocusVisible :global(.vtex__icon-caret-down),
.jsFocusVisible :global(.vtex__icon-caret-up) {
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
  color: transparent;
}

.jsFocusVisible :global(.vtex__icon-caret-down) {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%230067C7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.jsFocusVisible :global(.vtex__icon-caret-up) {
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 7L7 1L1 7' stroke='%23a3afbc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

```


[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 b2b-theme/styles/css/vtex.telemarketing.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.wrapper {
  background: var(--b2b-header-blue-medium);
}

.attendantContainer {
  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 b2b-theme/styles/css/vtex.store-drawer.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.drawer--menuDrawer,
.overlay--menuDrawer {
  z-index: 999;
}

.openIconContainer {
  display: flex;
  align-items: center;
  padding: 0;
}

.closeIconButton--menuDrawer {
  margin-left: auto;
}

.closeIconContainer--menuDrawer {
  background: #f3f9ff;
  margin-bottom: 40px;
}

.menuIcon {
  border: 1px solid #dee7ef;
  border-radius: 4px;
  box-sizing: border-box;
  color: #fff;
  height: 48px;
  padding: 16px 18px;
  width: 58px;
}

.childrenContainer--menuDrawer {
  padding: 0px 24px;
}

@media (max-width: 64rem) {
  .openIconContainer {
    margin-right: 16px;
  }

  .menuIcon {
    border-radius: 0;
    height: 14px;
    padding: 0;
    border: 0;
    width: 20px;
  }
}

```


[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 b2b-theme/styles/css/vtex.product-quantity.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.quantitySelectorContainer--desktop {
  margin: 0;
}

.quantitySelectorContainer--desktop :global(.vtex-numeric-stepper__input),
.quantitySelectorContainer--desktop :global(.vtex-numeric-stepper__plus-button),
.quantitySelectorContainer--desktop
  :global(.vtex-numeric-stepper__minus-button) {
  border-width: 1px;
  outline: none;
}

.quantitySelectorContainer--desktop
  :global(.vtex-numeric-stepper__plus-button) {
  border-left: 0;
}

.quantitySelectorContainer--desktop
  :global(.vtex-numeric-stepper__minus-button) {
  border-right: 0;
}

.quantitySelectorContainer :global(.vtex-input-prefix__group),
.quantitySelectorContainer :global(.vtex-dropdown__container) {
  border-width: 1px;
  border-color: var(--lines-darker);
  height: 3rem;
}

.quantitySelectorContainer :global(.vtex-dropdown__container),
.quantitySelectorContainer :global(.vtex-input-prefix__group) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.quantitySelectorContainer :global(.vtex-dropdown__button),
.quantitySelectorContainer :global(.vtex-styleguide-9-x-input) {
  color: var(--black-dark);
  font-weight: 500;
  font-size: 1rem;
  padding-left: 0;
}

.quantitySelectorContainer :global(.vtex-dropdown__container)::before,
.quantitySelectorContainer :global(.vtex-input-prefix__group)::before {
  color: var(--black-medium);
  display: inline-block;
  content: "Qty:\00a0";
  padding-left: 1rem;
}

.quantitySelectorContainer :global(.vtex-dropdown__arrow) {
  color: var(--lines-darker);
}

```


[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 b2b-theme/styles/css/vtex.product-availability.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.lowStockText,
.lowStockHighlight,
.lowStockText {
  font-size: 12px;
  line-height: 16px;
  color: #ff7d30;
  font-family: Roboto;
  font-weight: 700;
}

.highStockText {
  font-size: 12px;
  line-height: 16px;
  color: #000;
  font-family: Roboto;
  font-weight: 400;
}

.highStockText {
  color: #ff5f00;
  font-weight: 500;
  font-size: 14px;
}

```


[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 b2b-theme/styles/css/vtex.flex-layout.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
/* BEGIN - Header */
.flexRow--header {
  background: var(--b2b-header-blue-medium);
}

.flexRowContent--header {
  height: 72px;
  display: flex;
  align-items: center;
}

.flexRow--headerStripe {
  background: var(--b2b-blue-darkest);
}

.flexCol--drawerInnerCol :global(.vtex-login-2-x-buttonLink) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexCol--drawerInnerCol :global(.vtex-button)::before,
.flexCol--drawerInnerCol :global(.vtex-login-2-x-buttonLink)::before {
  content: url("assets/icons/drawerLoginIcon.svg");
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  width: 18px;
  height: 20px;
  margin-right: 12px;
}

.flexCol--drawerInnerCol :global(.vtex-login-2-x-container) {
  float: none;
}

.flexCol--drawerInnerCol
  :global(.vtex-login-2-x-container)
  :global(.vtex-button) {
  width: 150px;
  display: flex;
  align-items: center;
}

.flexCol--drawerInnerCol :global(.vtex-login-2-x-label)::after {
  content: none;
}

.flexCol--drawerInnerCol :global(.vtex-login-2-x-label) {
  color: #000;
  font-size: 16px;
  line-height: 32px;
}

.flexRow--cartSummary {
  border-bottom: 1px solid var(--lines-light);
}

.flexRowContent--cartSummary .stretchChildrenWidth:last-child {
  width: 100% !important;
}

.flexRowContent--bottomInfo {
  align-items: center;
}

.flexRowContent--bottomInfo .stretchChildrenWidth:last-child {
  max-width: 24px;
  margin-left: 16px;
}

.flexRowContent--bottomInfo .stretchChildrenWidth:first-child {
  width: 100% !important;
}

.flexCol--drawerInnerCol :global(.vtex-login-2-x-profile) {
  color: #717786;
}

/* END - Header */
/* BEGIN - Header */

.flexRow--full-banner {
  background-color: #3296f2;
  margin-bottom: 1.5rem;
}

.flexRow--menuHeader {
  width: 100%;
}

.flexRow--minicart-footer {
  box-shadow: none;
  border-top: 1px solid #dee7ef;
}

@media (max-width: 64rem) {
  .flexColChild--main-header-mobile:first-child {
    margin-bottom: 12px;
  }

  .flexCol--main-header-mobile {
    padding-top: 12px;
  }

  .flexCol--drawerInnerCol :global(.vtex-login-2-x-buttonLink)::before {
    content: none;
  }
}

/* END - Header */
/* BEGIN - ShopByCategory */

.flexRowContent--shopByCategory {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-column-gap: 16px;
}

.flexRow--shopByCategorySection {
  margin-bottom: 40px;
}

.flexRowContent--shopByCategory .stretchChildrenWidth {
  width: 100%;
}

@media (max-width: 64rem) {
  .flexRowContent--shopByCategory {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 2fr);
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .flexRowContent--shopByBrandHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e9eff5;
  }

  .flexRow--shopByBrandSection,
  .flexRow--shopByCategorySection {
    margin-bottom: 40px;
  }
}

/* END - ShopByCategory */
/* BEGIN - ImageBanners */

.flexRowContent--imageBanners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 16px;
  padding-top: 30px;
  margin-bottom: 64px;
  border-top: 1px solid #e9eff5;
}

.flexRowContent--imageBanners .stretchChildrenWidth {
  width: 100%;
}

/* END - ImageBanners */
/* BEGIN - Single Banner Home */

.flexRow--singleBanner {
  margin-bottom: 40px;
}

/* END - Single Banner Home */
/* BEGIN - Benefits */

.flexRow--benefits {
  margin-bottom: 40px;
}

.flexRowContent--flex-column {
  flex-flow: column nowrap;
  align-items: center;
}

/* END - Benefits */
/* BEGIN - Footer */

.flexRowContent--footer-row-1 {
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 16px;
}

.flexRow--footerStripe {
  background: #002446;
  margin-top: 16px;
}

/* END - Footer */
/* BEGIN - Trending Shelf */

.flexRow--trendingSection {
  background: #f3f9ff;
  padding: 48px 0px;
  margin-bottom: 40px;
}

.flexRowContent--trendingHead {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* END - Trending Shelf */
/* BEGIN - Popular Shelf */

.flexRowContent--popularHead {
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e9eff5;
  margin-bottom: 32px;
}

/* END - Popular Shelf */
/* BEGIN - Filter */

.flexColChild--filterCol {
  width: 264px;
  padding-right: 32px;
  border-right: 1px solid #e9eff5;
}

.flexRowContent--searchHeadInfo {
  justify-content: flex-start;
  border-bottom: 1px solid #e7e9ee;
  margin-bottom: 12px;
}

.flexRowContent--searchHeadInfo .stretchChildrenWidth:first-child {
  margin-right: auto;
}

.flexColChild--productCountCol {
  display: flex;
  align-items: center;
}

/* END - Filter */
/* BEGIN - SearchPage */

.flexRow--blogTitle :global(.vtex-search-result-3-x-galleryTitle--layout) {
  margin-bottom: 32px;
}

.flexCol--blogSEO {
  width: 264px;
}

.flexRow--blog {
  padding-top: 48px;
  padding-bottom: 64px;
}

/* END - SearchPage */

@media (min-width: 64rem) {
  .flexRowContent--footer-row-1 .stretchChildrenWidth:last-child {
    max-width: 161px;
    width: 100% !important;
  }

  .flexRowContent--paymentImages {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 16px;
  }

  .flexRowContent--networks {
    justify-content: flex-start;
  }

  .flexRow--paymentImages {
    margin-bottom: 24px;
  }
}

@media (max-width: 64rem) {
  .flexRowContent--quickOrderContainer {
    padding: 16px 0px 24px;
  }

  .flexRowContent--quickOrderContainer
    :global(.vtex-styleguide-9-x-jsFocusVisible) {
    margin: 16px 0px;
  }

  .flexRowContent--quickOrderContainer
    :global(.vtex-quickorder-3-x-textContainer)
    :not(:global(.vtex-fake)) {
    margin: 0;
  }

  .flexRow--bannersSection {
    margin-bottom: 32px;
  }

  .flexRow--blogItemRow {
    margin-bottom: 40px;
  }

  .flexRowContent--videoItemRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 16px;
  }

  .flexRowContent--footerLink {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 24px;
  }

  .flexRowContent--paymentImages {
    align-items: center;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }

  .flexCol--paymentCol {
    margin-bottom: 32px;
  }

  .flexRowContent--networks {
    justify-content: center;
  }

  .flexRow--networks {
    margin-bottom: 24px;
  }

  .flexColChild--orderByMobileCol {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flexRow--quickOrderRowMobile {
    padding: 24px 0px;
  }

  .flexRow--shelfComplete :global(.vtex-store-components-3-x-container) {
    padding-right: 0;
  }

  .flexRowContent--stickyPriceRow
    :global(.vtex-product-price-1-x-savings--desktop),
  .flexRowContent--stickyPriceRow
    :global(.vtex-product-price-1-x-savings--savingPercent) {
    font-size: 12px;
  }

  .flexRow--mobileCurrencyRow {
    margin-bottom: 32px;
    padding: 12px 0px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
  }

  .flexRowContent--mobileCurrencyRow .stretchChildrenWidth:first-child {
    position: relative;
  }

  .flexRowContent--mobileCurrencyRow .stretchChildrenWidth:first-child::after {
    content: "";
    display: block;
    height: 24px;
    width: 1px;
    background: rgba(255, 255, 255, 0.4);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
  }
}

/* Flex Utilities */

.flexRowContent--items-center {
  align-items: center;
}

.flexRowContent--items-end {
  align-items: flex-end;
}

.flexRowContent--items-start {
  align-items: flex-start;
}

.flexRowContent--justify-center {
  justify-content: center;
}

/* Product Page */

.flexRowContent--priceSavings {
  display: flex;
}

.flexRow--brand-and-rating {
  margin-bottom: 11px;
}

.flexRow--product-name {
  margin-bottom: 8px;
}

.flexRow--product-identifier {
  margin-bottom: 20px;
}

.flexCol--reset-text :not(:global(.vtex-fake)),
.flexRow--reset-text :not(:global(.vtex-fake)) {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: inherit;
  text-transform: inherit;
}

.flexCol--reset-layout :not(:global(.vtex-fake)),
.flexRow--reset-layout :not(:global(.vtex-fake)) {
  max-width: unset;
  max-height: unset;
  min-width: auto;
  min-height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.flexColChild--assembly-options {
  /* max-width: 80%; */
}

.flexColChild--assembly-options :first-child {
  font-size: 14px;
  font-weight: 500;
}

.flexColChild--assembly-options :global(.vtex-button) {
  width: 100%;
}

@media (max-width: 64rem) {
  .flexColChild--assembly-options :global(.vtex-button) {
    width: 100%;
    min-width: initial;
  }
  .flexColChild--assembly-options {
    max-width: 100%;
  }
}

.flexRow--assembly-options {
  color: #717786;
  line-height: 1.25rem;
}

.flexRow--assembly-options :global(.vtex-button) {
  border: 1px solid var(--lines-dark);
  margin-top: 0.5rem;
}

.flexRow--assembly-options :global(.vtex-button) :global(.vtex-button__label) {
  padding: 0 1rem !important;
}

.flexCol--right-col {
  width: 416px;
}

.flexRowContent--items-baseline {
  align-items: baseline;
}

@media (min-width: 64rem) {
  .flexCol--box {
    background-color: #fff;
    border: 1px solid #dee7ef;
    border-radius: 4px;
    padding: 24px;
    width: 334px;
  }
}

.flexRow--product-price {
  padding-bottom: 1rem;
}

.flexRowContent--location-availability {
  align-items: center;
}

.flexRow--location-availability,
.flexRow--product-availability-and-quantity {
  margin-bottom: 1rem;
}

.flexRowContent--location-availability::before {
  background-color: #f3f9ff;
  background-image: url("data:image/svg+xml,%3Csvg width='26' height='22' viewBox='0 0 26 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.3637 1H1V15.4443H17.3637V1Z' stroke='%230067C7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.3638 6.55566H21.7274L25.0002 9.88896V15.4444H17.3638V6.55566Z' stroke='%230067C7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.90893 20.9998C7.41516 20.9998 8.63621 19.7562 8.63621 18.2221C8.63621 16.688 7.41516 15.4443 5.90893 15.4443C4.40269 15.4443 3.18164 16.688 3.18164 18.2221C3.18164 19.7562 4.40269 20.9998 5.90893 20.9998Z' stroke='%230067C7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20.0911 20.9998C21.5973 20.9998 22.8183 19.7562 22.8183 18.2221C22.8183 16.688 21.5973 15.4443 20.0911 15.4443C18.5848 15.4443 17.3638 16.688 17.3638 18.2221C17.3638 19.7562 18.5848 20.9998 20.0911 20.9998Z' stroke='%230067C7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
  border-radius: 9999px;
  content: "";
  display: block;
  height: 64px;
  margin-right: 16px;
  min-width: 64px;
}

.flexRow--add-to-cart :global(.vtex-button) {
  background: #ff7d30;
  border-color: #ff7d30;
  color: #fff;
  height: 52px;
}

.flexRow--buy-now :global(.vtex-button) {
  background: var(--serious-blue-dark);
  border-color: var(--serious-blue-dark);
  color: #fff;
  height: 52px;
}

.flexRow--add-to-cart :global(.vtex-button):disabled,
.flexRow--buy-now :global(.vtex-button):disabled {
  opacity: 0.5;
}

.flexRowContent--fake-summary {
  padding-bottom: 1rem;
  border-bottom: 1px solid #dee7ef;
  margin-bottom: 1rem;
}

.flexRow--visible-sticky {
  max-height: 0;
  overflow: hidden;
}

:global(.vtex-sticky-layout-0-x-wrapper--stuck) .flexRow--visible-sticky {
  max-height: none;
  overflow: auto;
}

.flexRowContent--divider,
.flexCol--divider {
  border-width: 1px;
  border-color: #e9eff5;
  margin: 16px 0;
}

@media (min-width: 64rem) {
  .flexRowContent--divider,
  .flexCol--divider {
    margin: 32px 0;
  }
}

/* Table */

.flexRow--table-cell,
.flexCol--table-cell {
  padding: 1rem;
}

.flexRow--table-cell,
.flexCol--table-cell,
.flexCol--table-heading,
.flexRow--table-heading {
  background-color: #f3f9ff;
}

.flexRow--table-row:nth-child(odd) .flexRow--table-cell,
.flexRow--table-row:nth-child(odd) .flexCol--table-cell,
.flexRow--table-row:nth-child(odd) .flexCol--table-heading,
.flexRow--table-row:nth-child(odd) .flexRow--table-heading,
.flexCol--table-row:nth-child(odd) .flexRow--table-cell,
.flexCol--table-row:nth-child(odd) .flexCol--table-cell,
.flexCol--table-row:nth-child(odd) .flexCol--table-heading,
.flexCol--table-row:nth-child(odd) .flexRow--table-heading {
  background-color: transparent;
}

.flexRowChild--table-cell,
.flexColChild--table-cell {
  display: flex;
  align-items: center;
}

/* Reviews and Rating */

/**
 * Please refer to `store/blocks/product/reviews-and-ratings.jsonc` to better understand the styles bellow
**/

/* Reviews Only */

.flexRow--reviews-only :global(.vtex-reviews-and-ratings-2-x-reviewsHeading),
.flexRow--reviews-only :global(.vtex-reviews-and-ratings-2-x-reviewsRating),
.flexRow--reviews-only
  :global(.vtex-reviews-and-ratings-2-x-writeReviewContainer),
.flexCol--reviews-only :global(.vtex-reviews-and-ratings-2-x-reviewsHeading),
.flexCol--reviews-only :global(.vtex-reviews-and-ratings-2-x-reviewsRating),
.flexCol--reviews-only
  :global(.vtex-reviews-and-ratings-2-x-writeReviewContainer) {
  display: none;
}

/* Ratings Only */

.flexRow--ratings-only :global(.vtex-reviews-and-ratings-2-x-reviewsHeading),
.flexRow--ratings-only
  :global(.vtex-reviews-and-ratings-2-x-reviewCommentsContainer),
.flexCol--ratings-only :global(.vtex-reviews-and-ratings-2-x-reviewsHeading),
.flexCol--ratings-only
  :global(.vtex-reviews-and-ratings-2-x-reviewCommentsContainer) {
  display: none;
}

/* Sellers Page */

.flexCol--productBoxSellersPage {
  width: 216px;
  padding: 24px;
  border: 1px solid #dee7ef;
  border-radius: 4px;
}

.flexRow--sellersPageLayout {
  width: 100%;
}

@media (max-width: 64rem) {
  .flexRow--sellerLayoutMobile {
    width: 100%;
  }
}

/* Vertical Divider */

.flexCol--divider--vertical,
.flexRow--divider--vertical {
  border-bottom-style: solid;
  border-bottom-width: 0.0625rem;
}

@media (min-width: 40rem) {
  .flexCol--divider--vertical,
  .flexRow--divider--vertical {
    border-right-style: solid;
    border-right-width: 0.0625rem;
  }
}

/* Border Radius */

.flexRow--br2,
.flexCol--br2 {
  border-radius: 0.25rem;
}

/* Position */

.flexRow--relative,
.flexCol--relative {
  position: relative;
}

/* Z Index */

.flexRow--z-999,
.flexCol--z-999 {
  z-index: 999;
}

.flexRow--z-998,
.flexCol--z-998 {
  z-index: 998;
}

/* Background */

.flexRow--bg-base,
.flexCol--bg-base {
  background-color: var(--base);
}

.flexRow--bg-blue-medium,
.flexCol--bg-blue-medium {
  background-color: var(--blue-medium);
}

.flexRow--bg-fresh-blue-lightest,
.flexCol--bg-fresh-blue-lightest {
  background-color: var(--fresh-blue-lightest);
}

/* Colors */

.flexRow--c-on-base--inverted,
.flexCol--c-on-base--inverted {
  color: #fff;
}

```


[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 b2b-theme/styles/css/vtex.menu.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.menuContainer--flexCol {
  display: flex;
  flex-flow: column nowrap;
}

.styledLinkContainer--flexCol {
  margin: 0;
  padding: 0;
}

.styledLink--flexCol {
  color: #fff;
  font-size: 14px;
  line-height: 28px;
  font-family: Roboto;
  font-weight: 500;
}

.menuContainer--menuDrawer {
  flex-flow: column nowrap;
}

.styledLinkContainer--departItem {
  margin: 0;
  padding: 0;
}

.styledLinkContent--departItem {
  font-size: 16px;
  line-height: 44px;
  font-family: Roboto;
  color: #717786;
}

.menuContainerNav--menuDrawer {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid #dee7ef;
}

.styledLinkContainer--currencyFakeDropdown {
  padding: 0px 48px 0px 16px;
  margin: 0;
  margin-right: 16px;
  height: 42px;
  line-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  position: relative;
}

.menuContainerNav--currencyFakeDropdown {
  display: flex;
  align-items: center;
}

.styledLinkContent--currencyFakeDropdown {
  font-size: 14px;
  line-height: 42px;
  font-family: Roboto;
  color: #fff;
}

.styledLinkContainer--currencyFakeDropdown::after {
  content: url("assets/icons/chevronDownSwitcher.svg");
  position: absolute;
  right: 16px;
  top: 0;
}

@media (max-width: 64rem) {
  .styledLinkContainer--currencyFakeDropdown {
    border: 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 b2b-theme/styles/css/vtex.product-specifications.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.specificationName,
.specificationValue {
  font-size: 14px;
}

.specificationName {
  color: #717786;
}

.specificationValue {
  color: #000;
}

.specificationName--bullet-list {
  display: block;
  columns: auto 2;
  line-height: 2.5;
  width: 100%;
  white-space: pre-wrap;
}

```


[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 b2b-theme/styles/css/vtex.breadcrumb.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.homeLink--default {
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-left: 0;
  padding-bottom: 0;
}

.container--default {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

.arrow--default {
  display: flex;
  align-items: center;
}

.arrow--default,
.caretIcon--default,
.link--default,
.term--default {
  color: var(--black-medium);
  font-size: 0.875rem;
  white-space: nowrap;
}

.arrow--default,
.caretIcon--default {
  padding-left: 0;
  padding-right: 0.5rem;
}

.link--default,
.termArrow--default,
.term--default {
  padding: 0;
}

.homeLink--default {
  padding-right: 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 b2b-theme/styles/css/vtex.pickup-availability.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.container--default,
.container--default
  :not(:global(.vtex-fake)):not(.storeListItem--default):not(.storeListContainer--default):not(.chooseDifferentStoreButton--default) {
  font-size: 0.875rem;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}

.container--default {
  text-align: center;
}

@media (min-width: 40rem) {
  .container--default {
    width: 18rem;
  }
}

.container--default :global(.vtex-input-prefix__group) {
  border-width: 0.0625rem;
  border-color: var(--lines-dark);
  height: 2.75rem;
}

.container--default
  :not(:global(.vtex-input)):not(.storeListContainer--default):not(:global(.vtex-styleguide-9-x-input)):not(.availableAtHeader--default):not(.storeList--default):not(.storeSelectedContainer--default) {
  font-size: 0;
}

.storeSelectedContainer--default,
.storeListContainer--default {
  font-size: 0.875rem;
  text-align: left;
}

.storeListContainer--default :not(:global(.vtex-fake)),
.storeSelectedContainer--default :not(:global(.vtex-fake)) {
  font-size: inherit !important;
}

.storeListContainer--default :global(.vtex-radio__fakeRadioContainer),
.storeListContainer--default :global(.vtex-radio__label) {
  display: none;
}

.storeListContainer--default :global(.vtex-radio__input) {
  display: inline-block;
  height: 0.8125rem !important;
  opacity: 1;
  position: static;
  width: 0.8125rem !important;
}

.storeListContainer--default :global(.vtex-radio) {
  align-items: center;
  background-color: #f3f9ff;
  border-right: 1px solid #dee7ef;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 32px 16px;
  width: 53px;
}

.storeListItem--default {
  background-color: #fff;
  border: 1px solid var(--lines-light);
  border-radius: 0.25rem;
  padding: 0;
  margin-bottom: 0.5rem;
}

.storeListItem--default:last-child {
  margin-bottom: 0;
}

.storeListItem--default :not(:global(.vtex-fake)) {
  margin: 0;
}

.storeListItem--default:focus {
  outline: none;
}

.pickupItem--default {
  align-self: center;
  display: flex;
  line-height: 1.4285714286;
  padding: 1rem;
  width: 100%;
}

.pickupName--default,
.pickupEstimate--default,
.pickupUnavailable--default {
  font-weight: 500;
}

.pickupEstimate--default,
.estimateTranslated--default {
  display: inline !important;
  color: var(--green-dark);
}

.pickupUnavailable--default {
  color: var(--serious-orange);
}

.storeListContainer--default {
  margin: 0;
  margin-top: 1rem;
  padding: 0;
}

.availableAtHeader--default,
.availabilityHeader--default {
  display: none;
}

.storeSelectedContainer--default .pickupItem--default {
  border-radius: 0.25rem;
  background-color: #fff;
  border: 1px solid var(--lines-light);
}

.chooseDifferentStoreButton--default {
  margin-top: 1rem;
}

.chooseDifferentStoreButton--default :global(.vtex-button) {
  background-color: var(--fresh-blue);
  color: #fff;
  height: 3rem;
  width: 100%;
}

.chooseDifferentStoreButtonText--default {
  font-weight: 500;
  text-transform: uppercase;
}

```


[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 b2b-theme/styles/css/vtex.search-result.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.filter__container--title {
  display: none;
  opacity: 0;
  visibility: hidden;
}

.searchResultContainer:global(.vtex-store-components-3-x-container) {
  padding: 0;
}

.categoryParent {
  display: none;
  opacity: 0;
}

.filterTitle,
.categoryItemName {
  font-size: 16px;
  line-height: 32px;
  color: #000;
  font-weight: 500;
  font-family: Roboto;
}

.categoryItemChildren {
  padding: 0;
  font-size: 14px;
  line-height: 32px;
  font-weight: 400;
  font-family: Roboto;
  color: #000;
  background-color: none !important;
}

.filterTemplateOverflow {
  max-height: 100vh !important;
}

.filterItem :global(.vtex-checkbox__container) {
  margin-right: 12px;
}

.filterItem :global(.vtex-checkbox__box-wrapper),
.filterItem :global(.vtex-checkbox__container),
.filterItem :global(.vtex-checkbox__inner-container),
.filterItem :global(.vtex-checkbox__input) {
  width: 20px;
  height: 20px;
}

.filterItem :global(.vtex__icon-check) {
  width: 16px;
  height: 16px;
}

.filterAvailable {
  padding: 0;
  padding-bottom: 14px;
}

.filterItem :global(.vtex-checkbox__line-container) {
  align-items: center;
}

.filterItem :global(.vtex-checkbox__inner-container) {
  border-color: #a3afbc;
  border-width: 1px;
}

.filterItem :global(.vtex-checkbox__label) {
  font-size: 14px;
  line-height: 32px;
  color: #000;
  font-weight: 400;
  font-family: Roboto;
}

.filter__container--b {
  padding: 16px 0px;
}

.filter__container {
  border-color: #e9eff5;
}

.galleryTitle--layout {
  font-size: 24px;
  line-height: 32px;
  font-family: Roboto;
  font-weight: 500;
  color: #000;
  margin: 0;
  margin-bottom: 8px;
}

.galleryItem,
.gallery {
  padding: 0;
}

.totalProducts--layout {
  padding: 0;
}

.totalProductsMessage,
.totalProducts--layout {
  font-size: 14px;
  line-height: 20px;
  color: #000 !important;
  font-family: Roboto;
  text-transform: lowercase;
}
@media (max-width: 64rem) {
  .totalProducts--layout {
    padding: 8px 0px;
  }

  .filterPopupTitle,
  .totalProducts--layout {
    text-align: left;
  }

  .orderByButton {
    padding: 0;
  }

  .galleryItem--normal
    :global(.vtex-product-summary-2-x-container--summaryComplete) {
    max-width: 100%;
  }

  .sidebar {
    width: 85%;
  }

  .filterApplyButtonWrapper :global(.vtex-button) {
    height: 48px;
    color: #fff;
    background: #214d8e;
    border: none;
    font-weight: bold;
    font-family: "Roboto";
    font-size: 16px;
  }

  .filterClearButtonWrapper :global(.vtex-button) {
    height: 48px;
    border: 1px solid #bdc9d6;
    color: #214d8e;
    font-weight: bold;
    font-family: "Roboto";
    font-size: 16px;
  }

  .accordionFilterContainer {
    padding: 0px 16px;
  }

  .accordionFilterItemTitle {
    line-height: 64px;
    font-size: 18px;
    font-family: Roboto;
    color: #000;
  }

  .filterAccordionItemBox {
    height: initial;
    padding: 0;
    border: none;
  }

  .accordionFilterContent {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e9eff5;
  }

  .categoryItemChildrenContainer {
    padding: 0;
  }

  .categoryGroup {
    margin: 0;
  }

  .selectedCategory,
  .categoryItemChildren {
    font-size: 14px;
    line-height: 40px;
    color: #000;
    background: none;
    margin: 0;
  }

  .filterAccordionItemBox :global(.vtex-checkbox__label) {
    font-size: 14px;
    line-height: 40px;
    color: #000;
    margin: 0;
  }

  .galleryItem--normal
    :global(.vtex-product-summary-2-x-container--summaryComplete) {
    border-bottom: 1px solid #e9eff5;
    border-radius: 0px;
    padding: 16px 0px;
  }

  .galleryItem--normal
    :global(.vtex-product-summary-2-x-element--summaryComplete) {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    grid-column-gap: 16px;
  }

  .galleryItem--normal :global(.vtex-product-summary-2-x-imageNormal) {
    height: auto;
    margin-bottom: initial;
  }

  .galleryItem--normal
    :global(.vtex-product-summary-2-x-productBrandContainer) {
    margin-bottom: 4px;
  }
}

.categoryItemChildrenContainer :not(:global(.vtex-fake)) {
  border-color: transparent;
}

.orderByOptionsContainer {
  z-index: 9;
}

```


[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 b2b-theme/styles/css/vtex.slider-layout.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.sliderLayoutContainer:not(.sliderLayoutContainer--dotsCustom) {
  padding-bottom: 26px;
}

.sliderArrows--homeSlider {
  background-color: rgba(0, 51, 100, 0.32) !important;
  background-repeat: no-repeat !important;
  border-radius: 50%;
  height: 48px;
  padding: 0;
  width: 48px;
}

.caretIcon--homeSlider {
  display: none;
}

.sliderLeftArrow--homeSlider {
  background-image: url("assets/icons/chevronLeftWhite.svg") !important;
  background-position: 17px center !important;
  left: 16px;
}

.sliderRightArrow--homeSlider {
  background-image: url("assets/icons/chevronRightWhite.svg") !important;
  background-position: 20px center !important;
  right: 16px;
}

.paginationDotsContainer {
  bottom: 16px;
}

.paginationDotsContainer--dotsCustom {
  display: flex;
  width: auto;
  left: 50%;
  right: initial;
  transform: translateX(-50%);
  bottom: 16px;
  background: #fff;
  border-radius: 40px;
  padding: 2px 6px;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.16);
  height: 20px;
  align-items: center;
}

.paginationDot {
  background-color: #bdc9d6;
}

.paginationDot.paginationDot--isActive {
  background-color: #0067c7;
}

.sliderLayoutContainer--benefitsSlider {
  margin-top: 44px;
}

.sliderTrackContainer {
  max-width: 100%;
}

.sliderTrack--shelfStyle1 {
  padding: 16px 0px;
}

/* BEGIN - Trending Shelf */

.sliderTrack--shelfTrending {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  transform: initial;
  justify-content: initial;
}

.slide--shelfTrending {
  width: 100% !important;
}

.sliderArrows--shelfAlsoView,
.sliderArrows--categorySlider,
.sliderArrows--shelfPopular,
.sliderArrows--shelfStyle1 {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #a3afbc;
  background-color: #fff !important;
  border-radius: 999px;
  padding: 0;
  text-align: center;
}

.sliderArrows--shelfAlsoView .caretIcon,
.sliderArrows--shelfPopular .caretIcon,
.sliderArrows--shelfStyle1 .caretIcon {
  display: none;
  opacity: 0;
}

.sliderRightArrow--shelfAlsoView,
.sliderRightArrow--shelfPopular,
.sliderRightArrow--shelfStyle1 {
  border-color: #0067c7;
}

.sliderRightArrow--shelfAlsoView,
.sliderRightArrow--shelfPopular,
.sliderRightArrow--shelfStyle1,
.sliderLeftArrow--shelfAlsoView,
.sliderLeftArrow--shelfPopular,
.sliderLeftArrow--shelfStyle1 {
  background-repeat: no-repeat !important;
}

.sliderRightArrow--shelfAlsoView,
.sliderRightArrow--shelfPopular,
.sliderRightArrow--shelfStyle1 {
  background-position: 11px center !important;
  background-image: url("assets/icons/chevronRightBlue.svg") !important;
}

.sliderLeftArrow--shelfAlsoView,
.sliderLeftArrow--shelfPopular,
.sliderLeftArrow--shelfStyle1 {
  background-position: 9px center !important;
  background-image: url("assets/icons/chevronLeftBlue.svg") !important;
}

.sliderLayoutContainer--categorySlider {
  padding: 0px 50px 28px;
  margin-bottom: 24px;
}

.caretIcon--categorySlider {
  height: 16px;
  width: 12px;
}

/* END - Trending Shelf */

@media (max-width: 64rem) {
  .sliderLayoutContainer--categorySlider {
    padding: 0px 42px 28px;
  }

  .paginationDotsContainer--shelfAlsoView {
    bottom: 0;
  }

  .sliderLayoutContainer--shelfAlsoView,
  .sliderLayoutContainer--bannersSlider {
    margin-bottom: 32px;
  }

  .sliderLayoutContainer--shelfAlsoView,
  .sliderLayoutContainer.sliderLayoutContainer--bannersSlider {
    padding-bottom: 38px;
  }

  .sliderTrack--shelfTrending {
    grid-template-columns: 1fr;
    grid-row-gap: 8px;
    grid-column-gap: initial;
  }

  .sliderTrack--shelfPopular {
    overflow: hidden;
    pointer-events: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .sliderTrack--shelfPopular .slide {
    width: 100% !important;
  }

  .sliderLayoutContainer--stripeSlider {
    padding-bottom: 0 !important;
    background: #1b3255;
    margin-top: 16px;
    height: 40px;
  }

  .slide--shelfStyle1 {
    max-width: 160px;
  }
}

```


[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 b2b-theme/styles/css/vtex.store-newsletter.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.emailInputContainer :global(.vtex-input-prefix__group) {
  height: initial;
  border: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.emailInputContainer :global(.vtex-styleguide-9-x-input) {
  background: #fff;
  border: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  color: var(--black-medium);
  font-size: 1.25rem;
  height: 3.5rem;
  line-height: 1.2;
}

.emailInputContainer :global(.vtex-styleguide-9-x-input)::placeholder {
  color: var(--black-medium);
  font-size: 20px;
  line-height: 24px;
}

.formSubmitContainer :global(.vtex-button) {
  background: #fff;
  border: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  color: var(--fresh-blue);
  height: 3.5rem;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
  padding: 0 1.5rem;
  outline: none;
}

.formSubmitContainer :global(.vtex-button__label) {
  padding: 0 !important;
}

@media (max-width: 64rem) {
  .emailInputContainer :global(.vtex-styleguide-9-x-input)::placeholder,
  .emailInputContainer :global(.vtex-styleguide-9-x-input) {
    font-size: 18px;
    line-height: 20px;
  }

  .formSubmitContainer :global(.vtex-button) {
    font-size: 14px;
  }
}

```


[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 b2b-theme/styles/css/vtex.product-list.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.removeButtonContainer {
  display: flex;
  justify-content: flex-end;
}

.productName--minicart {
  color: var(--black-dark);
  font-size: 14px;
  line-height: 18px;
}

.productImage {
  height: 48px;
  object-fit: contain;
  width: 48px;
}

.productImageAnchor {
  display: block;
}

.productImageContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

```


[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 b2b-theme/styles/css/vtex.disclosure-layout.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.trigger {
  cursor: pointer;
}

.content {
  padding-top: 24px;
}

```


[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 b2b-theme/styles/css/vtex.seller-selector.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.sellerMasterContainer {
  max-width: 1440px;
  width: 100%;
  padding: 32px 32px 0px;
  margin: 0px auto;
}

.sellerHead {
  border-radius: 0px;
  background: #dee7ef;
}

.sellerRow {
  padding: 16px 0px;
  border: none;
  border-bottom: 1px solid #dee7ef;
}

.sellerRow:first-child {
  border-top: 1px solid #dee7ef;
}

.sellerList,
.sellerHead {
  margin-left: 0;
  margin-right: 0;
  flex: 100%;
}

.sellerPriceShippingText {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sellerBuyContainer :global(.vtex-button) {
  height: 48px;
  border-radius: 4px;
  background: var(--fresh-orange);
  border: none;
  outline: none;
}

.sellerMasterContainer {
  display: flex;
  flex-flow: row wrap;
}

.simulateShipping,
.sellerMasterContainer
  :global(.vtex-store-components-3-x-productNameContainer) {
  flex: 50%;
}

.sellerMasterContainer
  :global(.vtex-store-components-3-x-productNameContainer) {
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 18px;
  font-weight: 400;
  margin: 0;
}

.simulateShipping {
  display: flex;
  flex-flow: column;
  border: none;
  padding: 0;
}

.simulateShipping :global(.vtex-button) {
  margin: 0;
  border: none;
  height: 48px;
  background: var(--fresh-orange);
  margin-top: 16px;
  outline: none;
  border-radius: 4px;
}

@media (max-width: 64rem) {
  .sellerMasterContainer
    :global(.vtex-store-components-3-x-productNameContainer) {
    text-align: left;
  }

  .simulateShipping {
    margin: 0;
  }

  .sellerName {
    background: none;
  }

  .sellerBuyContainer {
    padding: 0;
  }
}

/* Link Seller */

.linkSellerContainer--default {
  display: block;
  flex-direction: initial;
}

.linkSeller--default {
  background-color: var(--fresh-blue-lightest);
  border: 0.0625rem solid var(--lines-light);
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--black-medium);
  text-decoration: none;
  padding: 1.1875rem 1.25rem;
  width: 100%;
}

.linkSeller--default::after {
  background-color: transparent;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 11L6 6L1 1' stroke='%230067C7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  content: "";
  display: inline-block;
  height: 0.75rem;
  width: 0.4375rem;
}

.linkSellerText--default {
  font-size: 0;
  padding: 0;
  margin: 0;
}

.linkSellerText--default::before {
  font-size: 0.875rem;
  content: "See from other sellers";
}

```


[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 b2b-theme/styles/css/vtex.checkout-summary.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.summarySmallDisclaimer {
  display: none;
  opacity: 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 b2b-theme/styles/css/vtex.stack-layout.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.stackItem--savingsStack:not(.stackItem--first),
.stackItem--savingsStack:not(:last-child) {
  bottom: 10px;
  top: initial;
}

.stackItem--savingsStack:last-child {
  bottom: 28px;
  top: initial;
}

```


[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 b2b-theme/styles/css/vtex.shopper-location.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.changeLocationContainer :global(.vtex-input-prefix__group),
.changeLocationContainer :global(.vtex-address-form-4-x-container) {
  border: 1px solid #A3AFBC;
}

```


[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 b2b-theme/styles/configs/style.json from the b2b-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": "transparent",
      "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": "#dbe9fd",
      "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": "transparent",
      "action-secondary": "#dbe9fd",
      "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": "Roboto, Fabriga, -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": "Roboto, Fabriga, -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": "Roboto, Fabriga, -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": "Roboto, Fabriga, -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": "Roboto, Fabriga, -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": "Roboto, Fabriga, -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": "Roboto, Fabriga, -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": "Roboto, Fabriga, -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": "Roboto, Fabriga, -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": "Roboto, Fabriga, -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": "Roboto, Fabriga, -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": "Roboto, Fabriga, -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 b2b-theme/styles/configs/font-faces.css from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```css
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto"), local("Roboto-Regular"),
    url("assets/fonts/roboto-v20-latin-regular.woff2") format("woff2"),
    url("assets/fonts/roboto-v20-latin-regular.woff") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: local("Roboto Medium"), local("Roboto-Medium"),
    url("assets/fonts/roboto-v20-latin-500.woff2") format("woff2"),
    url("assets/fonts/roboto-v20-latin-500.woff") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: local("Roboto Bold"), local("Roboto-Bold"),
    url("assets/fonts/roboto-v20-latin-700.woff2") format("woff2"),
    url("assets/fonts/roboto-v20-latin-700.woff") format("woff");
}

```


[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 b2b-theme/store/blocks/product-summary.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-summary.shelf.product-comparison#complete": {
    "props": {
      "blockClass": "summaryComplete"
    },
    "children": [
      "flex-layout.row#stackSavings",
      "product-summary-brand",
      "product-summary-name",
      "product-rating-summary",
      "check-permission#product-summary-price",
      "check-permission#product-summary-buy-button",
      "add-to-list-btn",
      "modal-trigger#quickview",
      "check-permission#product-comparison-block"
    ]
  },
  "product-summary.shelf#complete": {
    "props": {
      "blockClass": "summaryComplete"
    },
    "children": [
      "flex-layout.row#stackSavings",
      "product-summary-brand",
      "product-summary-name",
      "product-rating-summary",
      "check-permission#product-summary-price",
      "check-permission#product-summary-buy-button",
      "add-to-list-btn",
      "modal-trigger#quickview"
    ]
  },
  "product-summary.shelf#searchBar": {
    "props": {
      "blockClass": "summarySearch"
    },
    "children": [
      "product-summary-image#searchBar",
      "product-summary-brand",
      "product-summary-name"
    ]
  },
  "product-summary.shelf#searchBarMobile": {
    "props": {
      "blockClass": "summarySearch"
    },
    "children": [
      "product-summary-image#searchBarMobile",
      "product-summary-name"
    ]
  },
  "product-summary-image#searchBar": {
    "props": {
      "height": 140,
      "width": 140,
      "showBadge": false
    }
  },
  "product-summary-image#searchBarMobile": {
    "props": {
      "height": 48,
      "width": 48,
      "showBadge": false
    }
  },
  "flex-layout.row#stackSavings": {
    "children": ["stack-layout#summary"]
  },
  "stack-layout#summary": {
    "children": [
      "product-summary-image",
      "product-price-savings#summary",
      "product-price-savings#discount"
    ],
    "props": {
      "zIndexOffset": 3,
      "blockClass": ["savingsStack"]
    }
  },
  "product-price-savings#discount": {
    "props": {
      "message": "-{savingsPercentage}",
      "blockClass": "savingPercentage"
    }
  },
  "product-price-savings#summary": {
    "props": {
      "blockClass": "savingSummary"
    }
  },

  "check-permission#product-summary-buy-button": {
    "props": {
      "roles": [
        "store-admin",
        "sales-admin",
        "sales-manager",
        "sales-representative",
        "customer-admin",
        "customer-approver",
        "customer-buyer"
      ]
    },
    "blocks": ["allowed-content#product-summary-buy-button"]
  },

  "allowed-content#product-summary-buy-button": {
    "children": ["flex-layout.row#product-summary-buy-button"]
  },

  "flex-layout.row#product-summary-buy-button": {
    "children": ["add-to-cart-button#product-summary-buy-button"],
    "props": {
      "blockClass": ["product-summary-buy-button"]
    }
  },

  "add-to-cart-button#product-summary-buy-button": {
    "props": {
      "text": "Buy",
      "addToCartFeedback": "customEvent",
      "customPixelEventId": "add-to-cart-button"
    }
  },

  "add-to-list-btn": {
    "props": {
      "text": "Add to Cart"
    }
  },
  "product-summary-brand": {
    "props": {
      "displayMode": "text"
    }
  },
  "product-summary.shelf#normal": {
    "props": {
      "blockClass": "summaryComplete"
    },
    "children": ["flex-layout.row#stackSavings", "flex-layout.col#summaryInfo"]
  },
  "flex-layout.col#summaryInfo": {
    "children": [
      "product-summary-brand",
      "product-summary-name",
      "product-rating-summary",
      "check-permission#product-summary-price"
    ],
    "props": {
      "preventVerticalStretch": true
    }
  },
  "product-summary.shelf#trending": {
    "children": ["flex-layout.row#summaryTrending"],
    "props": {
      "blockClass": "trendingSummary"
    }
  },
  "flex-layout.row#summaryTrending": {
    "children": [
      "product-summary-image#trending",
      "product-summary-column#summaryTrending"
    ],
    "props": {
      "preventHorizontalStretch": true,
      "preserveLayoutOnMobile": true
    }
  },
  "product-summary-column#summaryTrending": {
    "props": {
      "blockClass": "summaryCol"
    },
    "children": [
      "product-summary-name#trending",
      "product-rating-summary",
      "check-permission#product-summary-price",
      "product-availability"
    ]
  },
  "product-summary-name#trending": {
    "props": {
      "width": {
        "desktop": 96,
        "mobile": 96
      },
      "height": {
        "desktop": 96,
        "mobile": 96
      }
    }
  },
  "product-availability": {
    "props": {
      "threshold": "10",
      "lowStockMessage": "Only {quantity} left in stock",
      "highStockMessage": "Order now!"
    }
  },
  "product-summary-image#trending": {
    "props": {
      "width": 96,
      "height": 96,
      "showBadge": false
    }
  },
  "product-summary.shelf#minimum": {
    "children": [
      "product-summary-image",
      "product-rating-summary",
      "check-permission#product-summary-price"
    ],
    "props": {
      "blockClass": "minimumSummary"
    }
  },
  "product-summary-image": {
    "props": {
      "showBadge": false
    }
  },

  "check-permission#product-comparison-block": {
    "props": {
      "roles": [
        "store-admin",
        "sales-admin",
        "sales-manager",
        "sales-representative",
        "customer-admin",
        "customer-approver",
        "customer-buyer"
      ]
    },
    "blocks": ["allowed-content#product-comparison-block"]
  },

  "allowed-content#product-comparison-block": {
    "children": ["product-comparison-block.selector"]
  }
}

```


[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 b2b-theme/store/blocks/shopper-location.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "shopper-location": {
    "children": ["modal-trigger#address"]
  },
  "modal-trigger#address": {
    "children": ["user-address", "modal-layout#address"]
  },
  "user-address": {
    "props": {
      "variation": "bar",
      "showStreet": false,
      "showCityAndState": true,
      "showPostalCode": true,
      "showPrefix": false,
      "showIfEmpty": true
    }
  },
  "modal-layout#address": {
    "children": ["modal-header#address", "modal-content#address"]
  },
  "modal-header#address": {
    "children": ["flex-layout.col#address-header"]
  },
  "flex-layout.col#address-header": {
    "children": ["rich-text#address-header"],
    "props": {
      "paddingLeft": 5
    }
  },
  "rich-text#address-header": {
    "props": {
      "text": "### Change Location"
    }
  },
  "modal-content#address": {
    "children": ["change-location"]
  }
}

```


[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 b2b-theme/store/blocks/default.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.orderplaced": {
    "blocks": ["order-placed"]
  },

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

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

  "product-summary.shelf": {
    "children": [
      "product-summary-add-to-list-button",
      "product-summary-name",
      "product-rating-inline",
      "product-summary-space",
      "check-permission#product-summary-price",
      "product-identifier.summary",
      "add-to-cart-button"
    ]
  },

  "flex-layout.col#spacer": {
    "props": {
      "width": "grow"
    }
  },

  "flex-layout.col#divider--vertical": {
    "children": [],
    "props": {
      "blockClass": ["divider--vertical"],
      "borderWidth": 0,
      "borderColor": "muted-5"
    }
  },

  "flex-layout.row#divider--vertical": {
    "children": [],
    "props": {
      "blockClass": ["divider--vertical"],
      "borderWidth": 0,
      "borderColor": "muted-5"
    }
  },

  "flex-layout.col#divider": {
    "children": [],
    "props": {
      "blockClass": "divider",
      "border": "top",
      "borderWidth": 1,
      "borderColor": "muted-5",
      "width": "grow"
    }
  },

  "flex-layout.row#divider": {
    "children": [],
    "props": {
      "blockClass": "divider",
      "border": "top",
      "borderWidth": 1,
      "borderColor": "muted-5"
    }
  },

  "disclosure-state-indicator": {
    "props": {
      "Show": "icon-caret#down",
      "Hide": "icon-caret#up"
    }
  },

  "icon-caret#down": {
    "props": {
      "blockClass": ["fresh-blue"],
      "orientation": "down"
    }
  },

  "icon-caret#up": {
    "props": {
      "blockClass": ["lines-darker"],
      "orientation": "up"
    }
  },

  "add-to-cart-button": {
    "props": {
      "addToCartFeedback": "customEvent",
      "customPixelEventId": "add-to-cart-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 b2b-theme/store/blocks/popular.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom.product-comparison#popular": {
    "blocks": [
      "search-result-layout.customQuery#popular",
      "flex-layout.row#newsletter"
    ]
  },

  "search-result-layout.customQuery#popular": {
    "props": {
      "querySchema": {
        "orderByField": "OrderByTopSaleDESC",
        "hideUnavailableItems": true,
        "maxItemsPerPage": 10,
        "skusFilter": "ALL",
        "simulationBehavior": "default"
      }
    },
    "blocks": [
      "search-result-layout.desktop.product-comparison#popular",
      "search-result-layout.mobile",
      "search-not-found-layout"
    ]
  },
  "search-result-layout.desktop.product-comparison#popular": {
    "children": [
      "flex-layout.row#searchLayout--popular",
      "product-comparison-drawer"
    ],
    "props": {
      "pagination": "show-more",
      "preventRouteChange": true
    }
  },
  "flex-layout.row#searchLayout--popular": {
    "children": ["flex-layout.col#pageContent--popular"],
    "props": {
      "colSizing": "auto",
      "fullWidth": true,
      "marginBottom": 9
    }
  },
  "flex-layout.col#pageContent--popular": {
    "children": ["flex-layout.col#search-content--popular"],
    "props": {
      "blockClass": "pageContent",
      "preventVerticalStretch": true
    }
  },

  "flex-layout.col#search-content--popular": {
    "children": [
      "rich-text#title--popular",
      "flex-layout.row#searchinfo",
      "flex-layout.row#fetchprevious",
      "flex-layout.row#products",
      "flex-layout.row#fetchmore"
    ],
    "props": {
      "paddingLeft": 7,
      "paddingRight": 7
    }
  },

  "rich-text#title--popular": {
    "props": {
      "text": "## Popular Picks",
      "blockClass": "title"
    }
  }
}

```


[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 b2b-theme/store/blocks/sellers.jsonc from the b2b-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.sellers": {
    "blocks": [
      "responsive-layout.desktop#sellerPage",
      "responsive-layout.mobile#sellerPage"
    ]
  },
  "responsive-layout.desktop#sellerPage": {
    "children": [
      "seller-table#desktop"
    ]
  },
  "responsive-layout.mobile#sellerPage": {
    "children": [
      "seller-table#mobile"
    ]
  },
  "seller-table#desktop": {
    "children": [
      "flex-layout.row#sellerLayout"
    ]
  },
  "flex-layout.row#sellerLayout": {
    "children": [
      "flex-layout.col#sellerPageProduct",
      "flex-layout.col#sellersList"
    ],
    "props": {
      "colSizing": "auto",
      "fullWidth": true,
      "colGap": 8,
      "blockClass": "sellersPageLayout"
    }
  },
  "flex-layout.col#sellersList": {
    "children": [
      "seller-body"
    ],
    "props": {
      "preventVerticalStretch": true,
      "width": "grow"
    }
  },
  "flex-layout.col#sellerPageProduct": {
    "children": [
      "flex-layout.col#productSellersPage",
      "flex-layout.row#simulateShipping"
    ]
  },
  "flex-layout.row#simulateShipping": {
    "children": [
      "seller-simulate-shipping"
    ]
  },
  "flex-layout.col#productSellersPage": {
    "children": [
      "product-images#sellers",
      "vtex.store-components:product-name",
      "product-identifier.product"
    ],
    "props": {
      "blockClass": [
        "productBoxSellersPage",
        "productSellersPageCol"
      ]
    }
  },
  "seller-body": {
    "children": [
      "seller-row"
    ]
  },
  "seller-row": {
    "children": [
      "vtex.seller-selector:seller-name",
      "vtex.seller-selector:seller-price",
      "seller-shipping",
      "seller-price-with-shipping",
      "seller-add-to-cart"
    ]
  },
  "seller-add-to-cart": {
    "blocks": [
      "add-to-cart-button"
    ]
  },
  "product-images#sellers": {
    "props": {
      "blockClass": "sellersPage",
      "aspectRatio": "1:1",
      "displayThumbnailsArrows": false,
      "maxHeight": 168,
      "showNavigationArrows": false,
      "showPaginationDots": false,
      "thumbnailMaxHeight": 0,
      "zoomMode": "disabled",
      "contentType": "images"
    }
  },
  "seller-table#mobile": {
    "children": [
      "flex-layout.row#sellerLayoutMobile"
    ]
  },
  "flex-layout.row#sellerLayoutMobile": {
    "children": [
      "flex-layout.row#sellerLayoutMobileCol"
    ],
    "props": {
      "fullWidth": true,
      "blockClass": "sellerLayoutMobile"
    }
  },
  "flex-layout.row#sellerLayoutMobileCol": {
    "children": [
      "flex-layout.row#productBox",
      "seller-simulate-shipping",
      "flex-layout.col#sellersList"
    ],
    "props": {
      "rowGap": 6
    }
  },
  "flex-layout.row#productBox": {
    "children": [
      "product-images#sellers",
      "flex-layout.col#productBoxInfo"
    ],
    "props": {
      "preserveLayoutOnMobile": true,
      "preventHorizontalStretch": true
    }
  },
  "flex-layout.col#productBoxInfo": {
    "children": [
      "vtex.store-components:product-name",
      "product-identifier.product"
    ],
    "props": {
      "verticalAlign": "middle",
      "preventVerticalStretch": true,
      "rowGap": 0
    }
  }
}
```