@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 */ .container { padding: 0 40px; margin: 0; } @media screen and (min-width: 1920px) { .container { margin: 6px 360px; padding: 0; } } .productNameContainer--quickview { font-weight: 300; font-size: 20px; line-height: 34px; text-align: right; color: #575757; } @media screen and (max-width: 1024px) { .productNameContainer--quickview { margin-top: 32px; text-align: left; } } .productImageTag--main { max-height: max-content !important; max-width: max-content; max-width: 100%; } .carouselGaleryThumbs { display: block; margin-top: 16px; margin-right: 16px; max-height: 90px; } .thumbImg { border-radius: 8px; height: 90px; width: 100%; max-width: 90px; } .carouselThumbBorder { height: 90px; width: 90px; } .figure { width: 90px; height: 90px; } .productImagesThumb { max-width: 90px; width: 90px !important; margin-right: 16px; } .skuSelectorContainer { display: flex; flex-direction: column; } .skuSelectorContainer .skuSelectorSubcontainer--cor { order: 2; margin-bottom: 16px; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer { margin: 0; } .skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround, .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue, .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox { border-radius: 50%; } .skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround { border-color: #000000; } .skuSelectorContainer .skuSelectorSubcontainer--cor .diagonalCross { color: #d5d5d5; top: 5px; left: 6px; bottom: 0px; z-index: 2; width: 28px; height: 28px; transform: rotateY(180deg); } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer { margin-bottom: 8px; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName { font-size: 0; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after { content: "OUTRAS CORES"; font-weight: 400; font-size: 14px; line-height: 19px; color: #929292; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorSelectorImageValue { display: none; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho { order: 1; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { margin: 0; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList { margin: 0; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue { padding: 0; margin: auto; font-weight: 400; font-size: 14px; line-height: 19px; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround, .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox { border-radius: 50%; width: 40px; height: 40px; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox { border-color: #989898; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround { border-color: #000000; top: -2px; left: 0; right: 0; bottom: 0; z-index: 2; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .diagonalCross { color: #d5d5d5; top: 4px; left: 6px; bottom: 0px; z-index: 2; width: 28px; height: 28px; transform: rotateY(180deg); } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName { font-size: 0; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after { content: "OUTROS TAMANHOS:"; font-weight: 400; font-size: 14px; line-height: 19px; color: #929292; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorSelectorImageValue { display: none; } .skuSelectorItem--size-sku--selected .skuSelectorItemTextValue--size-sku { color: #000000; } .skuSelectorItemTextValue { color: rgba(185, 185, 185, 0.6); } .skuSelectorItem { margin: 0 16px 0 0; } .shippingContainer { display: flex; position: relative; width: 409px; height: 49px; margin-top: 16px; } @media (max-width: 1024px) { .shippingContainer { margin: 16px 0; } } @media (max-width: 560px) { .shippingContainer { width: 296px; margin-bottom: 40px; } } .shippingContainer :global(.vtex-address-form__postalCode) { display: flex; padding: 0; margin: 0; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { width: 280px; height: 49px; } @media (max-width: 560px) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { width: 247px; } } @media (max-width: 280px) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { width: 151px; } } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) { display: none; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { border: 1px solid #cccccc; border-radius: 0px; height: 49px; border-right: 0; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { padding: 16.5px 16px; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder { font-weight: 400; font-size: 12px; line-height: 16px; color: #afafaf; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { position: absolute; right: -57px; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; display: flex; align-items: center; text-decoration-line: underline; color: #000000 !important; } @media (max-width: 560px) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { top: 45px; right: -4px; } } @media (max-width: 280px) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { right: 96px; } } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { display: none; } .shippingContainer :global(.vtex-button) { font-size: 0; background: black; width: 49px; height: 49px; border: none; border-radius: 0; } .shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after { content: "Ok"; font-family: "Open Sans"; font-style: normal; font-weight: 600; font-size: 14px; line-height: 19px; color: #fff; padding: 0; } :global(.vtex-button__label) { height: fit-content; } .shippingTable { display: flex; flex-direction: column; border: none; padding: 4px 0; } @media screen and (max-width: 1024px) { .shippingTable { margin-bottom: 12px; } } .shippingTable .shippingTableHead { display: flex; flex-direction: row; } .shippingTable .shippingTableHead .shippingTableHeadDeliveryName, .shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate, .shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice { padding: 0; } .shippingTable .shippingTableHead .shippingTableHeadDeliveryName { font-weight: 400; font-size: 14px; line-height: 19px; color: #202020; text-transform: uppercase; min-width: 140px; text-align: left; } @media screen and (max-width: 540px) { .shippingTable .shippingTableHead .shippingTableHeadDeliveryName { min-width: 100px; } } .shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate { font-size: 0; min-width: 140px; text-align: left; } @media screen and (max-width: 540px) { .shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate { min-width: 100px; } } .shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate::after { content: "FRETE"; font-weight: 400; font-size: 14px; line-height: 19px; color: #202020; } .shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice { font-size: 0; min-width: 140px; text-align: left; } .shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice::after { content: "PRAZO"; font-weight: 400; font-size: 14px; line-height: 19px; color: #202020; } .shippingTable .shippingTableBody .shippingTableRow { display: flex; flex-direction: row; } .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { display: flex; order: 3; } .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate .shippingTableCellDeliveryPrice { display: flex; order: 2; } .shippingTable .shippingTableBody .shippingTableCell { padding: 0; display: flex; color: #afafaf; font-weight: 400; font-size: 12px; line-height: 16px; min-width: 140px; padding-top: 15px; } @media screen and (max-width: 540px) { .shippingTable .shippingTableBody .shippingTableCell { min-width: 100px; } } .shippingTable .shippingTableRadioBtn { display: none; } @media (max-width: 1024px) { .subscriberContainer { margin-top: 24px; } } .subscriberContainer .title { font-size: 0; margin: 0; } .subscriberContainer .title::after { content: "Produto indisponível"; 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-weight: 400; font-size: 14px; line-height: 19px; color: #868686; } .subscriberContainer .form .content { display: grid; grid-template-areas: " nome email" " submit submit"; justify-content: inherit; gap: 8px; } .subscriberContainer .form .content .inputName { grid-area: nome; } .subscriberContainer .form .content .inputName :global(.vtex-input-prefix__group), .subscriberContainer .form .content .inputEmail :global(.vtex-input-prefix__group) { border-radius: 0; border: 1px solid #989898; } .subscriberContainer .form .content .inputName :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input), .subscriberContainer .form .content .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { padding: 12px 14px; font-weight: 400; font-size: 12px; line-height: 16px; color: #989898; } .subscriberContainer .form .content .inputName :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder, .subscriberContainer .form .content .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { font-weight: 400; font-size: 12px; line-height: 16px; color: #989898; } .subscriberContainer .form .content .inputEmail { grid-area: email; } .subscriberContainer .form .content .submit { grid-area: submit; width: 100%; } .subscriberContainer .form .content .submit :global(.vtex-button) { width: 100%; height: 49px; cursor: pointer; background-color: #000000; border: none; border-radius: 0; } .subscriberContainer .form .content .submit :global(.vtex-button__label) { font-size: 0; } .subscriberContainer .form .content .submit :global(.vtex-button__label)::after { content: "avise-me"; text-transform: uppercase; font-weight: 600; font-size: 18px; line-height: 25px; color: #fff; } .newsletter { display: block; background: #000000; margin-top: 96px; } .newsletter :global(.vtex-store-components-3-x-form) { padding: 32px 0 13px; width: 774px; max-width: 774px; position: relative; } @media screen and (max-width: 1024px) { .newsletter :global(.vtex-store-components-3-x-form) { width: 100%; max-width: 100%; padding: 64px 0 32px; } } .newsletter :global(.vtex-store-components-3-x-form) .label { display: flex; flex-direction: column; color: #fff; font-weight: 400; font-size: 24px; line-height: 38px; } .newsletter :global(.vtex-store-components-3-x-form) .label::after { content: "Receba ofertas e novidades por e-mail"; font-size: 18px; line-height: 25px; color: #929292; } @media screen and (max-width: 1024px) { .newsletter :global(.vtex-store-components-3-x-form) .label::after { font-size: 16px; line-height: 22px; } } .newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) { padding-top: 16px; display: flex; } .newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input-prefix__group) { border: none; border-radius: 0; } .newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { font-weight: 400; font-size: 18px; line-height: 25px; color: #929292; border-radius: 0; border-bottom: 1px solid #929292; background: transparent; padding: 0; } @media screen and (max-width: 1024px) { .newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { font-size: 12px; line-height: 16px; } } .newsletter :global(.vtex-store-components-3-x-form) .buttonContainer { padding: 0; } .newsletter :global(.vtex-store-components-3-x-form) .buttonContainer :global(.vtex-button) { font-weight: 700; font-size: 14px; line-height: 19px; color: #fff; background-color: transparent; border: none; } .newsletter :global(.vtex-store-components-3-x-form) .buttonContainer :global(.vtex-button__label) { border-bottom: 3px solid #929292; padding: 6px 17px 12px !important; }