diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 4a31bf8..4c0346f 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,4 +1,10 @@ [class*="html--wrapperQuantity"] { display: flex; margin-bottom: 16px; + +} +@media screen and (max-width: 375px) { + [class*="html--wrapperQuantity"] { + flex-direction: column; + } } \ No newline at end of file diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx index eee4b67..697b628 100644 --- a/react/components/Pix/Pix.tsx +++ b/react/components/Pix/Pix.tsx @@ -23,6 +23,11 @@ const Pix = () => { // const handles = useCssHandles(CSS_HANDLES) + if (typeof document !== "undefined") { + const input = document.querySelector(".vtex-address-form-4-x-input"); + input?.setAttribute("placeholder", "Digite seu CEP"); + } + return (
PixIcon diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 84e0c2d..6f61ddf 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -23,7 +23,8 @@ "breadcrumb#Pdp": { "props": { - "blockClass": "Pdp" + "blockClass": "Pdp", + "showOnMobile": true } }, @@ -89,7 +90,6 @@ "phone": 2 }, "infinite": true, - "showNavigationArrows": "desktopOnly", "blockClass": "prateleiraSlider" } }, @@ -325,7 +325,7 @@ "props": { "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "auto" }, "showNavigationArrows": false, "showPaginationDots": false, @@ -376,6 +376,7 @@ "children": ["vtex.store-components:product-name"] }, + "sku-selector": { "props": { "variationsSpacing": 3, @@ -403,9 +404,7 @@ "flex-layout.row#product-availability": { "props": { "colGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7 + "blockClass": "indisponivelWrapper" }, "children": [ "flex-layout.col#stack", @@ -420,9 +419,9 @@ }, "children": [ "flex-layout.row#product-name", - "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "product-identifier.product#identifierMain", + "flex-layout.row#availability", + "sku-selector#inverseOrder" ] }, "flex-layout.row#availability": { diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 2fd4df1..1c7a710 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -37,4 +37,11 @@ padding: 0; width: 94.44%; margin: 0 auto; + max-width: 94rem; +} +@media screen and (max-width: 1024px) { + .container--Pdp { + width: 100%; + padding: 0 40px; + } } \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 774e386..3cecc56 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -8,7 +9,37 @@ /* Media Query M3 */ /* Grid breakpoints */ .flexRow--productMainWrapper { - padding: 0 36px; + width: 95%; + margin: 0 auto; +} +@media screen and (max-width: 1024px) { + .flexRow--productMainWrapper { + width: 100%; + margin: 0; + padding: 0 40px; + } +} +@media screen and (max-width: 1024px) { + .flexRow--productMainWrapper :global(.vtex-store-components-3-x-container) { + padding: 0; + } +} + +.flexRow--indisponivelWrapper { + width: 95%; + margin: 0 auto; +} +@media screen and (max-width: 1024px) { + .flexRow--indisponivelWrapper { + width: 100%; + margin: 0; + padding: 0 40px; + } +} +@media screen and (max-width: 1024px) { + .flexRow--indisponivelWrapper :global(.vtex-store-components-3-x-container) { + padding: 0; + } } .flexRow--buyButton { @@ -17,6 +48,12 @@ width: 100%; margin-left: 10px; } +@media screen and (max-width: 375px) { + .flexRow--buyButton { + margin-left: 0; + padding-top: 10px; + } +} .flexRow--buyButton .flexRowContent--buyButton { margin: 0; height: 49px; @@ -41,4 +78,133 @@ line-height: 38px; color: #000000; margin: 0; +} + +@media screen and (max-width: 1024px) { + .flexRow--descriptionRow :global(.vtex-store-components-3-x-container) { + padding: 0 !important; + } +} + +.flexRowContent--productMainWrapper { + margin: 16px 0; + padding: 0; +} +@media screen and (max-width: 1024px) { + .flexRowContent--productMainWrapper { + flex-direction: column; + } +} +@media screen and (max-width: 1024px) { + .flexRowContent--productMainWrapper .stretchChildrenWidth { + width: 100% !important; + padding: 0; + } +} + +.flexRowContent--indisponivelWrapper { + margin: 16px 0; + padding: 0; +} +@media screen and (max-width: 1024px) { + .flexRowContent--indisponivelWrapper { + flex-direction: column; + } +} +@media screen and (max-width: 1024px) { + .flexRowContent--indisponivelWrapper .stretchChildrenWidth { + width: 100% !important; + padding: 0; + } +} + +@media screen and (max-width: 1024px) { + .flexRowContent--descriptionRow { + flex-direction: column; + } +} +@media screen and (max-width: 1024px) { + .flexRowContent--descriptionRow .stretchChildrenWidth { + width: 100% !important; + padding: 0; + } +} +.flexRowContent--descriptionRow .stretchChildrenWidth :global(.vtex-store-components-3-x-productImageTag--descriptionImg--main) { + object-fit: unset !important; + max-height: 994px !important; + margin-bottom: 16px; +} + +.flexRow--message-availability :global(.vtex-store-components-3-x-title) { + font-size: 0; + margin: 0; +} +.flexRow--message-availability :global(.vtex-store-components-3-x-title)::before { + content: "Produto indisponivel"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.flexRow--message-availability :global(.vtex-store-components-3-x-subscribeLabel) { + font-size: 0; +} +.flexRow--message-availability :global(.vtex-store-components-3-x-subscribeLabel)::before { + content: "Deseja saber quando estiver disponível?"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.flexRow--message-availability :global(.vtex-store-components-3-x-content) { + display: grid; + grid-auto-flow: column; + max-width: 400px; + column-gap: 8px; +} +@media screen and (max-width: 1024px) { + .flexRow--message-availability :global(.vtex-store-components-3-x-content) { + width: 100%; + } +} +.flexRow--message-availability :global(.vtex-store-components-3-x-content) :last-child { + grid-area: 2/1/2/3; +} +.flexRow--message-availability :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputEmail) { + margin: 0; +} +.flexRow--message-availability :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-inputName) { + margin: 0; + margin-bottom: 15px; +} +.flexRow--message-availability :global(.vtex-button) { + width: 100%; + background-color: #000000; + font-size: 0; + height: 49px; + border-radius: 0; + align-items: center; + justify-content: center; + display: flex; +} +.flexRow--message-availability :global(.vtex-button)::before { + content: "Avise-me"; + color: #fff; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; +} +.flexRow--message-availability :global(.vtex-button__label) { + display: none; +} +.flexRow--message-availability :global(.vtex-input-prefix__group) { + border-radius: 0; + border-color: #989898; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 1b5436d..00e2d9f 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -11,6 +11,12 @@ width: 90.63%; margin: 0 auto 101px auto; } +@media screen and (max-width: 1024px) { + .sliderLayoutContainer--prateleiraSlider { + width: 100% !important; + padding: 0 63px; + } +} .sliderArrows--prateleiraSlider { margin: 0; @@ -20,10 +26,20 @@ .sliderRightArrow--prateleiraSlider { right: -2.53%; } +@media screen and (max-width: 1024px) { + .sliderRightArrow--prateleiraSlider { + right: 3.91%; + } +} .sliderLeftArrow--prateleiraSlider { left: -2.53%; } +@media screen and (max-width: 1024px) { + .sliderLeftArrow--prateleiraSlider { + left: 3.91%; + } +} .paginationDotsContainer--prateleiraSlider { bottom: -32px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 3850abc..8689d51 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -14,10 +14,16 @@ .productImageTag--ImgsMain--main { object-fit: unset !important; } +@media screen and (max-width: 1024px) { + .productImageTag--ImgsMain--main { + max-height: 994px !important; + } +} .productImagesThumb { width: 13.605% !important; margin: 0 16px 0 0; + max-width: 90px; } .productNameContainer--quickview { @@ -30,6 +36,13 @@ line-height: 34px; color: #575757; } +@media screen and (max-width: 1024px) { + .productNameContainer--quickview { + justify-content: flex-start; + padding-top: 32px; + } +} + :global(.vtex-product-identifier-0-x-product-identifier--productReference) { display: flex; justify-content: end; @@ -41,6 +54,11 @@ line-height: 19px; color: rgba(146, 146, 146, 0.48); } +@media screen and (max-width: 1024px) { + :global(.vtex-product-identifier-0-x-product-identifier--productReference) { + justify-content: flex-start; + } +} .skuSelectorContainer--inverseOrder { display: flex; @@ -133,6 +151,29 @@ padding-top: 16.1px; text-decoration: underline; } +@media screen and (max-width: 600px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + left: 55px; + } +} +@media screen and (max-width: 490px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + left: -85px; + top: 50px; + } +} +@media screen and (max-width: 450px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + left: -112px; + top: 50px; + } +} +@media screen and (max-width: 375px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + left: -78px; + top: 50px; + } +} .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child { color: black; } @@ -151,6 +192,21 @@ border: none; border-radius: 0; } +@media screen and (max-width: 490px) { + .shippingContainer :global(.vtex-button) { + right: 31%; + } +} +@media screen and (max-width: 425px) { + .shippingContainer :global(.vtex-button) { + right: 24%; + } +} +@media screen and (max-width: 375px) { + .shippingContainer :global(.vtex-button) { + right: 40px; + } +} .shippingContainer :global(.vtex-button) ::before { content: "Ok"; font-weight: 600; @@ -240,4 +296,10 @@ font-weight: 400; font-size: 16px; line-height: 22px; +} + +@media screen and (max-width: 1024px) { + .productImagesGallerySlide--ImgsMain { + width: 100% !important; + } } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 070233f..cdcf0a4 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -11,11 +11,27 @@ width: 94.44%; margin: 0 auto; } +@media screen and (max-width: 1024px) { + .container--descriptionLayout { + width: 100%; + padding: 0 40px; + } +} .container--descriptionLayout .listContainer--descriptionButtonWrapper { justify-content: space-between; border-bottom: 1px solid #B9B9B9; padding: 0 64px; margin-bottom: 32px; + max-width: 94rem; + margin: 0 auto 32px auto; +} +@media screen and (max-width: 1024px) { + .container--descriptionLayout .listContainer--descriptionButtonWrapper { + padding: 16px 0 0 0; + flex-direction: column; + margin-bottom: 16px; + border-top: 1px solid #B9B9B9; + } } .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton { margin: 0; @@ -28,10 +44,19 @@ font-size: 18px; line-height: 38px; } +.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button):hover { + background-color: #fff; +} .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button__label) { padding: 0 16px !important; text-transform: capitalize; } +@media screen and (max-width: 1024px) { + .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button__label) { + margin-bottom: 16px; + padding: 0 !important; + } +} .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton { margin-top: 2px; } @@ -46,7 +71,17 @@ font-size: 18px; line-height: 38px; } +@media screen and (max-width: 1024px) { + .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button) { + border: none; + } +} .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button__label) { padding: 0 16px !important; text-transform: capitalize; +} +@media screen and (max-width: 1024px) { + .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button__label) { + padding: 0 !important; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 6388af7..f2ebd5b 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -28,4 +28,10 @@ padding: 0; width: 94.44%; margin: 0 auto; + max-width: 94rem; + + @media screen and (max-width: 1024px) { + width: 100%; + padding: 0 40px; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index ecc6a10..8f7fd7c 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,5 +1,34 @@ .flexRow--productMainWrapper{ - padding: 0 36px; + width: 95%; + margin: 0 auto; + + @media screen and (max-width: 1024px) { + width: 100%; + margin: 0; + padding: 0 40px; + } + :global(.vtex-store-components-3-x-container){ + + @media screen and (max-width: 1024px) { + padding: 0; + } + } +} +.flexRow--indisponivelWrapper{ + width: 95%; + margin: 0 auto; + + @media screen and (max-width: 1024px) { + width: 100%; + margin: 0; + padding: 0 40px; + } + :global(.vtex-store-components-3-x-container){ + + @media screen and (max-width: 1024px) { + padding: 0; + } + } } .flexRow--buyButton{ display: flex; @@ -7,6 +36,11 @@ width: 100%; margin-left: 10px; + @media screen and (max-width: 375px) { + margin-left: 0; + padding-top: 10px; + } + .flexRowContent--buyButton{ margin: 0; height: 49px; @@ -33,4 +67,137 @@ line-height: 38px; color: $color-black2; margin: 0; +} +.flexRow--descriptionRow{ + :global(.vtex-store-components-3-x-container) { + + @media screen and (max-width: 1024px) { + padding: 0 !important; + } + } +} + +.flexRowContent--productMainWrapper{ + margin: 16px 0; + padding: 0; + + @media screen and (max-width: 1024px) { + flex-direction: column; + } + + .stretchChildrenWidth{ + @media screen and (max-width: 1024px) { + width: 100% !important; + padding: 0; + } + } +} +.flexRowContent--indisponivelWrapper{ + margin: 16px 0; + padding: 0; + + @media screen and (max-width: 1024px) { + flex-direction: column; + } + + .stretchChildrenWidth{ + @media screen and (max-width: 1024px) { + width: 100% !important; + padding: 0; + } + } +} +.flexRowContent--descriptionRow{ + @media screen and (max-width: 1024px) { + flex-direction: column; + } + + .stretchChildrenWidth { + @media screen and (max-width: 1024px) { + width: 100% !important; + padding: 0; + } + + :global(.vtex-store-components-3-x-productImageTag--descriptionImg--main){ + object-fit: unset !important; + max-height: 994px !important; + margin-bottom: 16px; + } + } +} + +.flexRow--message-availability{ + :global(.vtex-store-components-3-x-title){ + font-size: 0; + margin: 0; + &::before { + content: "Produto indisponivel"; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-gray17; + } + } + :global(.vtex-store-components-3-x-subscribeLabel){ + font-size: 0; + &::before { + content: "Deseja saber quando estiver disponível?"; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray17; + } + } + :global(.vtex-store-components-3-x-content){ + display: grid; + grid-auto-flow: column; + max-width: 400px; + column-gap: 8px; + + @media screen and (max-width: 1024px) { + width: 100%; + } + + :last-child{ + grid-area: 2/1/2/3; + } + :global(.vtex-store-components-3-x-inputEmail){ + margin: 0; + } + :global(.vtex-store-components-3-x-inputName){ + margin: 0; + margin-bottom: 15px; + } + } + :global(.vtex-button){ + width: 100%; + background-color: $color-black2; + font-size: 0; + height: 49px; + border-radius: 0; + align-items: center; + justify-content: center; + display: flex; + &::before { + content: "Avise-me"; + color: $color-white; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; + } + } + :global(.vtex-button__label){ + display: none; + } + :global(.vtex-input-prefix__group){ + border-radius: 0; + border-color: $color-gray12; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index d4e4a7b..1f78771 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -25,12 +25,6 @@ .image--prateleiraImg{ min-height: 314px; - @media screen and (min-width: 1920px) { - - } - @media screen and (max-width: 1024px) { - - } @media screen and (max-width: 1280px) { min-height: 285px; } diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 33a12df..c8aadb7 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -1,6 +1,11 @@ .sliderLayoutContainer--prateleiraSlider{ width: 90.63%; margin: 0 auto 101px auto; + + @media screen and (max-width: 1024px) { + width: 100% !important; + padding: 0 63px; + } } .sliderArrows--prateleiraSlider{ margin: 0; @@ -8,9 +13,17 @@ } .sliderRightArrow--prateleiraSlider{ right: -2.53%; + + @media screen and (max-width: 1024px) { + right: 3.91%; + } } .sliderLeftArrow--prateleiraSlider{ left: -2.53%; + + @media screen and (max-width: 1024px) { + left: 3.91%; + } } .paginationDotsContainer--prateleiraSlider{ bottom: -32px; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 9aae666..e52dc66 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -4,11 +4,16 @@ .productImageTag--ImgsMain--main{ object-fit: unset !important; + + @media screen and (max-width: 1024px) { + max-height: 994px !important; + } } .productImagesThumb{ width: 13.605% !important; margin: 0 16px 0 0; + max-width: 90px; } .productNameContainer--quickview{ @@ -21,8 +26,9 @@ line-height: 34px; color: $color-gray14; - @media screen and (min-width: 1920px) { - + @media screen and (max-width: 1024px) { + justify-content: flex-start; + padding-top: 32px; } } @@ -36,6 +42,10 @@ font-size: 14px; line-height: 19px; color: $color-gray13; + + @media screen and (max-width: 1024px) { + justify-content: flex-start; + } } .skuSelectorContainer--inverseOrder{ @@ -148,6 +158,22 @@ padding-top: 16.1px; text-decoration: underline; + @media screen and (max-width: 600px) { + left: 55px; + } + @media screen and (max-width: 490px) { + left: -85px; + top: 50px; + } + @media screen and (max-width: 450px) { + left: -112px; + top: 50px; + } + @media screen and (max-width: 375px) { + left: -78px; + top: 50px; + } + :last-child{ color: black; } @@ -169,6 +195,16 @@ border: none; border-radius: 0; + @media screen and (max-width: 490px) { + right: 31%; + } + @media screen and (max-width: 425px) { + right: 24%; + } + @media screen and (max-width: 375px) { + right: 40px; + } + ::before{ content: "Ok"; font-weight: 600; @@ -262,4 +298,10 @@ font-weight: 400; font-size: 16px; line-height: 22px; +} + +.productImagesGallerySlide--ImgsMain{ + @media screen and (max-width: 1024px) { + width: 100% !important; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 61bb40e..d6f4ecd 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -2,11 +2,25 @@ width: 94.44%; margin: 0 auto; + @media screen and (max-width: 1024px) { + width: 100%; + padding: 0 40px; + } + .listContainer--descriptionButtonWrapper{ justify-content: space-between; border-bottom: 1px solid $color-gray6; padding: 0 64px; margin-bottom: 32px; + max-width: 94rem; + margin: 0 auto 32px auto; + + @media screen and (max-width: 1024px) { + padding: 16px 0 0 0; + flex-direction: column; + margin-bottom: 16px; + border-top: 1px solid $color-gray6; + } .listItem--descriptionButton{ margin: 0; @@ -18,9 +32,18 @@ font-size: 18px; line-height: 38px; } + :global(.vtex-button):hover{ + background-color: $color-white; + } + :global(.vtex-button__label){ padding: 0 16px !important; text-transform: capitalize; + + @media screen and (max-width: 1024px) { + margin-bottom: 16px; + padding: 0 !important; + } } } .listItemActive--descriptionButton{ @@ -35,10 +58,18 @@ font-weight: 400; font-size: 18px; line-height: 38px; + + @media screen and (max-width: 1024px) { + border: none; + } } :global(.vtex-button__label){ padding: 0 16px !important; text-transform: capitalize; + + @media screen and (max-width: 1024px) { + padding: 0 !important; + } } } } diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index c6f85ba..2e4b5ac 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -20,6 +20,7 @@ $color-gray13: rgba(146, 146, 146, 0.48); $color-gray14: #575757; $color-gray15: #929292; $color-gray16: #afafaf; +$color-gray17: #868686; $color-blue: #4267b2;