@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 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); /* Grid breakpoints */ .newsletter { background: red; } .productBrand--quickview { display: flex; justify-content: end; color: #575757; font-style: normal; font-weight: 300; font-size: 20px; line-height: 34px; } .carouselGaleryThumbs { max-height: 90px; width: 150%; display: block; } .productImageTag--main { width: 100%; max-height: max-content !important; max-width: 100%; object-fit: contain; } .carouselThumbBorder { display: none; } .shareLabel { display: none; } .skuSelectorContainer { display: flex; flex-direction: column; } .skuSelectorItem { height: 40px !important; width: 40px; } .frameAround { border-radius: 50%; border-color: black; } .diagonalCross { transform: rotate(90deg); top: 4px; left: 6px; bottom: 0px; z-index: 2; width: 28px; height: 28px; } .skuSelectorInternalBox { border-radius: 50%; display: flex; justify-content: center; } .skuSelectorSubcontainer--cor { order: 2; } .skuSelectorSubcontainer--cor .skuSelectorName { font-size: 0; } .skuSelectorSubcontainer--cor .skuSelectorName::after { display: block; content: "OUTRAS CORES:"; font-size: 14px; color: #929292; } .skuSelectorSubcontainer--tamanho { order: 1; margin: 0; } .skuSelectorSubcontainer--tamanho .skuSelectorName { font-size: 0; } .skuSelectorSubcontainer--tamanho .skuSelectorName::after { display: block; content: "OUTROS TAMANHOS:"; font-size: 14px; color: #929292; } .productImagesThumb { max-width: 90px; margin-right: 16px; } .productImagesThumb .figure .thumbImg { width: 90px; height: 90px; border-radius: 8px; } .shippingContainer { display: flex; position: relative; max-width: 664px; } .shippingContainer :global(.vtex-address-form__postalCode) { display: flex; padding: 0; } .shippingContainer :global(.vtex-input__label) { font-size: 0; } .shippingContainer :global(.vtex-input__label)::after { font-size: 14px; display: block; content: "CALCULAR FRETE:"; color: #929292; } .shippingContainer :global(.vtex-input-prefix__group) { border: 1px solid #cccccc; border-radius: 0; height: 49px; } .shippingContainer :global(.vtex-button) { width: 49px; height: 49px; position: absolute; left: 232px; top: 33%; background: #000000; border: none; border-radius: 0; } .shippingContainer :global(.vtex-button__label) { font-size: 0; } .shippingContainer :global(.vtex-button__label)::after { font-size: 14px; font-weight: 600; color: #fff; display: block; content: "OK"; } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { font-size: 0; visibility: hidden; position: absolute; left: 302px; top: 36%; } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL)::after { visibility: visible; content: "Não sei meu CEP"; font-size: 12px; color: #000000; text-decoration-line: underline; } .shippingTable { border: none; padding: 0; max-width: 382px; } .shippingTableHead { display: flex; } .shippingTableRow { position: relative; width: 100%; } .shippingTableHeadDeliveryName { font-size: 0; } .shippingTableHeadDeliveryName::after { font-weight: 400; font-size: 14px; line-height: 19px; content: "Entrega"; text-transform: uppercase; display: block; color: #000000; } .shippingTableHeadDeliveryEstimate { font-size: 0; position: absolute; top: 5%; left: 61%; } .shippingTableHeadDeliveryEstimate::after { font-weight: 400; font-size: 14px; line-height: 19px; content: "Prazo"; text-transform: uppercase; display: block; color: #000000; } .shippingTableHeadDeliveryPrice { font-size: 0; position: absolute; top: 5%; left: 36%; } .shippingTableHeadDeliveryPrice::after { font-weight: 400; font-size: 14px; line-height: 19px; content: "Frete"; text-transform: uppercase; display: block; color: #000000; } .shippingTableRadioBtn { display: none; } .shippingTableCellDeliveryName, .shippingTableCellDeliveryEstimate, .shippingTableCellDeliveryPrice { font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; color: #afafaf; padding: 0; padding-top: 15px; } .shippingTableCellDeliveryEstimate { position: absolute; left: 61%; } .shippingTableCellDeliveryPrice { position: absolute; left: 36%; } .skuSelectorOptionsList { margin: 0; } .skuSelectorNameContainer { margin-bottom: 0; } :global(.vtex-address-form-4-x-input)::placeholder { font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; } .price_sellingPriceContainer { margin-bottom: 32px; } .price_sellingPriceLabel { display: none; } .price_sellingPrice { font-style: normal; font-weight: 700; font-size: 24px; line-height: 33px; color: #000000; } .newsletter--pageProduct { height: 175px; margin: 64px 0 32px 0; background: #000000; display: flex; } .container--pageProduct { padding: 0; padding-top: 32px; width: 53.75%; max-width: unset; } .form--pageProduct { max-width: unset; } .label--pageProduct { display: flex; flex-direction: column; gap: 16px; font-style: normal; font-weight: 400; font-size: 24px; line-height: 38px; color: #fff; } .label--pageProduct::after { content: "Receba ofertas e novidades por e-mail"; font-style: normal; font-weight: 400; font-size: 18px; line-height: 25px; color: #929292; } .buttonContainer--pageProduct { padding: 0; } .buttonContainer--pageProduct :global(.vtex-button) { border: none; border-bottom: 4px solid #cccccc; border-radius: 0; background: transparent; font-style: normal; font-weight: 700; font-size: 14px; line-height: 19px; color: #fff; } .inputGroup--pageProduct { display: flex; } .inputGroup--pageProduct :global(.vtex-input-prefix__group) { border: none; border-radius: 0; border-bottom: 1px solid #cccccc; } .inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) { background: transparent; padding: 0; } .inputGroup--pageProduct :global(.vtex-input__error) { margin-top: 8px; } .subscriberContainer { margin-top: 43px; } .subscriberContainer .title { font-size: 0; margin: 0; } .subscriberContainer .title::after { content: "Produto indisponível"; font-style: normal; font-weight: 700; font-size: 14px; line-height: 19px; color: #868686; } .subscriberContainer .subscribeLabel { font-size: 0; } .subscriberContainer .subscribeLabel::after { content: "Deseja saber quando estiver disponível?"; font-style: normal; font-weight: 400; font-size: 14px; line-height: 19px; color: #868686; } .form { width: 100%; margin: 0; } .form .content { display: grid; grid-template-areas: "nm em" "sub sub"; justify-content: inherit; gap: 8px; width: 59.024%; } .form .content .inputName { grid-area: nm; width: 100%; margin: 0; } .form .content .inputName :global(.vtex-input-prefix__group) { border: 1px solid #868686; border-radius: 0; padding-bottom: 5px; } .form .content .inputName :global(.vtex-styleguide-9-x-input)::placeholder { font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; color: #989898; } .form .content .inputEmail { grid-area: em; width: 100%; margin: 0; } .form .content .inputEmail :global(.vtex-input-prefix__group) { border: 1px solid #868686; border-radius: 0; padding-bottom: 5px; } .form .content .inputEmail :global(.vtex-styleguide-9-x-input)::placeholder { font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; color: #989898; } .form .content .submit { grid-area: sub; width: 100%; margin: 0; margin-top: 7px; } .form .content .submit :global(.vtex-button) { height: 49px; background: #000000; border: none; border-radius: 0; width: 100%; } .form .content .submit :global(.vtex-button__label) { font-size: 0; } .form .content .submit :global(.vtex-button__label)::after { content: "avise-me"; font-style: normal; font-weight: 600; font-size: 18px; line-height: 25px; color: #fff; } .productImagesGallerySlide { width: 100% !important; } :global(.vtex-input__error) { position: absolute; margin: 0; } @media (max-width: 1024px) { .productBrand--quickview { justify-content: flex-start; margin-top: 32px; } .price_sellingPrice { font-size: 18px; } .container--pageProduct { width: 96%; } .form .content { width: 100%; max-width: 100%; } } @media (max-width: 492px) { .shippingContainer { margin-bottom: 22px; } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { left: 170px; top: 95%; } .shippingTable { margin-top: 32px; } }