@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait 900 - 1200px: Tablet landscape [1200 - 1800] is where our nortal styles apply 1800px + : Big desktop */ /* Media Query M3 */ /* Grid breakpoints */ .notificationBarContainer { background-color: black; height: 34px; } .notificationBarContainer .notificationBarInner { min-height: 34px; } .notificationBarContainer .notificationContent { display: flex; align-items: center; gap: 54px; font-weight: 400; font-size: 12px; line-height: 14px; color: #FFFFFF; } .notificationBarContainer .notificationContent::before { content: ""; display: flex; width: 6px; height: 6px; padding: 1px; box-shadow: 1px -1px 0 0px #fff inset; border: solid transparent; border-width: 0 0 1px 1px; transform: rotate(45deg); } .notificationBarContainer .notificationContent::after { content: ""; display: flex; width: 6px; height: 6px; padding: 1px; box-shadow: 1px -1px 0 0px #fff inset; border: solid transparent; border-width: 0 0 1px 1px; transform: rotate(-135deg); } .logoContainer { padding: 0; } .searchBarContainer { padding: 0; } .searchBarContainer :global(.vtex-input-prefix__group) { width: 243px; border: 1px solid #AEAEAE; border-width: 0 0 1px; border-radius: 0; flex-direction: row-reverse; } .searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { background: transparent; } .searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { padding-left: 12px; font-weight: 300; font-size: 12px; line-height: 16px; background: transparent; color: #AEAEAE; } .searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { padding: 0; } .searchBarContainer .searchBarIcon { padding: 0; } .searchBarContainer .searchBarIcon .searchIcon, .searchBarContainer .searchBarIcon .closeIcon { width: 10px; height: 10px; color: #AEAEAE; } @media screen and (max-width: 1024px) { .searchBarContainer { max-width: 100%; position: absolute; bottom: 32px; } .searchBarContainer .autoCompleteOuterContainer { max-width: 100%; padding: 8px 40px 0; } .searchBarContainer .autoCompleteOuterContainer :global(.vtex-input-prefix__group) { width: 100%; } } @media screen and (max-width: 300px) { .notificationBarContainer .notificationContent { gap: 34px; } } .newsletter { background: red; } .carouselContainer { flex-direction: column-reverse; } .container { padding: 0; } .productNameContainer { font-weight: 300; font-size: 20px; line-height: 34px; color: #575757; text-align: right; margin-bottom: 8px; } .carouselGaleryCursor { margin: 0; padding: 0; } .carouselGaleryThumbs { display: block; position: relative; margin-top: 16px; } .productImageTag--main { max-height: 664px !important; } .productImagesThumb { margin: 0; margin-right: 16px; width: 90px !important; border-radius: 8px; } .figure--video { width: 90px !important; height: 90px !important; border-radius: 8px; } .thumbImg--video { height: 100%; border-radius: 8px; } .productImagesThumbActive .carouselThumbBorder { background: linear-gradient(0deg, rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33)); border-radius: 8px; } .skuSelectorContainer { display: flex; flex-direction: column-reverse; } .skuSelectorSubcontainer--tamanho { margin-bottom: 10px; } .skuSelectorSubcontainer--tamanho .skuSelectorName::after { content: "OUTROS TAMANHOS:"; font-weight: 400; font-size: 14px; line-height: 19px; color: #929292; } .skuSelectorSubcontainer--cor { margin-bottom: 16px; } .skuSelectorSubcontainer--cor .skuSelectorName::after { content: "OUTRAS CORES"; font-weight: 400; font-size: 14px; line-height: 19px; color: #929292; } .skuSelectorNameContainer { margin: 0; } .skuSelectorName, .skuSelectorSelectorImageValue { font-size: 0; } .skuSelectorItem { height: 40px; margin: 0; } .skuSelectorOptionsList { margin: 0; display: flex; gap: 16px; } .skuSelectorInternalBox { width: 40px; height: 40px; border: 1px solid #989898; border-radius: 50%; } .skuSelectorItem--selected .frameAround { border: 2px solid #000000; border-radius: 50%; top: 0; bottom: 0; left: 0; right: 0; width: 40px; height: 40px; z-index: 50; } .valueWrapper { font-size: 14px; line-height: 19px; color: rgba(185, 185, 185, 0.6); padding: 0; text-align: center; } .skuSelectorItem--selected .valueWrapper { color: #000000; } .diagonalCross { background: #d5d5d5; width: 1px; height: 39.18px; left: 20px; top: 1px; transform: rotate(45deg); } .productDescriptionText .container { padding: 0; } .shippingContainer { display: flex; margin-top: 16px; position: relative; } .shippingContainer :global(.vtex-address-form__postalCode) { display: flex; padding: 0; align-items: center; gap: 32px; } .shippingContainer :global(.vtex-input__label) { font-size: 0; } .shippingContainer :global(.vtex-input__label)::after { content: "CALCULAR FRETE:"; font-size: 14px; line-height: 19px; color: #929292; } .shippingContainer :global(.vtex-input__suffix) { display: none; } .shippingContainer :global(.vtex-input-prefix__group) { width: 280px; height: 49px; border-radius: 0; border: 1px solid #CCCCCC; } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { padding: 0; padding-top: 24.5px; } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child { font-size: 12px; line-height: 16px; text-decoration-line: underline; color: #000000; } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { width: 0; } .shippingContainer :global(.vtex-address-form-4-x-input) { font-weight: 400; font-size: 12px; line-height: 16px; color: #AFAFAF; } .shippingContainer :global(.vtex-address-form-4-x-input)::placeholder { color: #AFAFAF; } .shippingContainer :global(.vtex-button) { width: 49px; height: 49px; background-color: #000000; border: 0; position: absolute; bottom: 0; left: 232px; } .shippingContainer :global(.vtex-button__label) { font-size: 0; } .shippingContainer :global(.vtex-button__label)::after { content: "Ok"; font-weight: 600; font-size: 14px; line-height: 19px; display: flex; align-items: center; color: #FFFFFF; } .shippingContainer :global(.vtex-input__error) { position: absolute; font-size: 10px; margin-top: 5px; } .shippingTable { border: 0; padding: 0; margin: 16px 0 0; } .shippingTable .shippingTableHead { display: block; } .shippingTable .shippingTableHead .shippingTableRow { display: flex; gap: 32px; justify-content: flex-start; align-items: center; text-align: start; font-size: 14px; line-height: 19px; text-transform: uppercase; color: #202020; } .shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice { font-size: 0; } .shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice::after { content: "Frete"; font-size: 14px; } .shippingTable .shippingTableHeadDeliveryName, .shippingTable .shippingTableCellDeliveryName { display: flex; width: 90px; text-align: start; order: 1; } .shippingTable .shippingTableHeadDeliveryEstimate, .shippingTable .shippingTableCellDeliveryEstimate { display: flex; width: 136px; text-align: start; order: 3; } .shippingTable .shippingTableHeadDeliveryPrice, .shippingTable .shippingTableCellDeliveryPrice { display: flex; width: 48px; text-align: start; order: 2; } .shippingTable .shippingTableBody .shippingTableRow { display: flex; gap: 32px; margin-top: 15px; } .shippingTable .shippingTableBody .shippingTableCell { font-size: 12px; line-height: 16px; padding: 0; color: #AFAFAF; } .shippingTable .shippingTableBody .shippingTableRadioBtn { display: none; } .productImagesContainer--description { width: 50%; max-width: 632px; max-height: 632px; } .productDescriptionContainer { width: 50%; } .productDescriptionTitle { font-size: 24px; line-height: 32px; color: #575757; margin-bottom: 8px; } .productDescriptionText { font-size: 16px; line-height: 22px; color: #929292; } .subscriberContainer .content { flex-wrap: wrap; justify-content: start; margin-top: 16px; } .subscriberContainer .title { font-size: 0; } .subscriberContainer .title::after { content: "Produto indisponível"; font-weight: 700; font-size: 14px; line-height: 19px; display: flex; align-items: center; color: #868686; } .subscriberContainer .subscribeLabel { font-size: 0; } .subscriberContainer .subscribeLabel::after { content: "Deseja saber quando estiver disponível?"; font-weight: 400; font-size: 14px; line-height: 19px; display: flex; align-items: center; color: #868686; } .subscriberContainer .input { width: 195.5px; height: 40px; margin: 0; } .subscriberContainer .inputName { margin-right: 8px; } .subscriberContainer :global(.vtex-input-prefix__group) { border: 1px solid #989898; border-radius: 0; } .subscriberContainer :global(.vtex-styleguide-9-x-input) { font-weight: 400; font-size: 12px; line-height: 16px; padding: 1px 0 1px 16px; color: #989898; } .subscriberContainer :global(.vtex-button) { width: 399px; height: 49px; margin-top: 15px; border: 0; background: #000000; } .subscriberContainer :global(.vtex-button__label) { font-size: 0; width: 100%; } .subscriberContainer :global(.vtex-button__label)::after { content: "AVISE-ME"; font-weight: 600; font-size: 18px; line-height: 25px; display: flex; align-items: center; color: #FFFFFF; } .imageElement--pix-image { width: 66px; height: 24px; } .newsletter { background: #000000; height: 175px; } .newsletter .container { height: 100%; } .newsletter .form { padding: 32px 0 16px; height: 100%; width: 774px; } .newsletter .form .label { display: flex; flex-direction: column; font-weight: 400; font-size: 24px; line-height: 38px; text-align: center; color: #FFFFFF; } .newsletter .form .label::after { content: "Receba ofertas e novidades por e-mail"; margin-top: 16px; font-size: 18px; line-height: 25px; text-align: center; color: #929292; } .newsletter .form :global(.vtex-input__error) { position: absolute; right: 50%; transform: translateX(50%); margin: 0; width: 100%; } .newsletter .form :global(.vtex-input-prefix__group) { border: 0; position: relative; width: 100%; } .newsletter .form :global(.vtex-styleguide-9-x-input) { background: transparent; border-radius: 0; border-bottom: 1px solid #929292; height: 32px; width: 100%; } .newsletter .form .buttonContainer { padding: 0; } .newsletter .form :global(.vtex-button) { width: 84px; height: 32px; min-height: 32px; border: 0; border-bottom: 3px solid #BFBFBF; } .newsletter .form :global(.vtex-button__label) { font-weight: 700; font-size: 14px; line-height: 19px; padding: 0; text-align: center; color: #FFFFFF; } @media screen and (min-width: 1920px) { .productImagesContainer--carousel .productImagesGallerySwiperContainer .productImageTag--main { max-height: 904px !important; } .productImagesContainer--description { max-height: 872px; } .productImageTag--main { max-height: 872px !important; } .productDescriptionTitle { margin-bottom: 16px; font-size: 32px; line-height: 32px; } .productDescriptionText { font-size: 18px; line-height: 25px; } .productImagesContainer--description { width: 100%; max-width: 872px; max-height: 872px; } } @media screen and (max-width: 1024px) { .productImageTag--main { max-height: 994px !important; } .productNameContainer { text-align: start; } .productImagesContainer--description { width: 100%; max-width: 100%; max-height: 944px; } .productDescriptionContainer { width: 100%; } .productDescriptionTitle { font-size: 20px; } .productDescriptionText { padding-bottom: 16px; border-bottom: 1px solid #B9B9B9; font-size: 14px; line-height: 19px; } .subscriberContainer .content { max-width: 100%; display: flex; } .subscriberContainer .submit { width: 100%; } .subscriberContainer .input { width: 49.3%; } .subscriberContainer :global(.vtex-button) { width: 100%; } .newsletter { height: 100%; } .newsletter .inputGroup { display: flex; } .newsletter .form { margin: 0; padding: 64px 16px 32px; height: 100%; width: 100%; max-width: 100%; } } @media screen and (max-width: 768px) { .shippingContainer :global(.vtex-address-form__postalCode) { flex-direction: column; align-items: flex-end; gap: 8px; width: 100%; } .shippingContainer :global(.vtex-input-prefix__group) { width: 100%; } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { padding: 0; } .shippingContainer :global(.vtex-button) { bottom: 24px; left: calc(100% - 48px); } } @media screen and (max-width: 650px) { .subscriberContainer .input { width: 48%; } }