@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 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); .container { margin: 0; padding: 0; } /* ----- PRODUCT-MAIN ----- */ .productImagesGallerySlide { width: 100% !important; margin: 0; } .productImagesGallerySlide .productImageTag { width: 100%; aspect-ratio: 1/1; object-fit: cover !important; } .carouselGaleryThumbs { margin-top: 16px; display: block; } .carouselGaleryThumbs .productImagesThumb { width: 90px !important; height: 100% !important; margin-right: 16px; margin-bottom: 0; } .carouselGaleryThumbs .productImagesThumb:last-child { margin-right: 0; } .carouselGaleryThumbs .productImagesThumb .figure { width: 100%; height: 100%; } .carouselGaleryThumbs .productImagesThumb .figure .thumbImg { width: 100%; aspect-ratio: 1/1; border-radius: 8px; object-fit: cover; } .carouselGaleryThumbs .productImagesThumb.productImagesThumbActive .carouselThumbBorder { border-radius: 8px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33)); } /* ----- RIGHT-COL ----- */ .productBrand--quickview { font-weight: 300; font-size: 20px; line-height: 34px; color: #575757; } .imageElement--pix-logo { width: 66px; height: 24px; padding-bottom: 5px; } .skuSelectorContainer { display: flex; flex-direction: column; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho { order: 1; margin-bottom: 10px; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after { content: "OUTROS TAMANHOS:"; font-size: 14px; line-height: 19px; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItem { width: 40px; height: 40px; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItem .skuSelectorInternalBox { border: 1px solid #989898; } .skuSelectorContainer .skuSelectorSubcontainer--cor { order: 2; margin-bottom: 16px; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after { content: "OUTRAS CORES:"; font-size: 14px; line-height: 19px; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItem { width: 48px; height: 48px; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItem .skuSelectorInternalBox { border: 1px solid #b9b9b9; } .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorNameContainer { margin: 0; } .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorNameContainer .skuSelectorName { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 0; text-transform: uppercase; color: #929292; } .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorNameContainer .skuSelectorOptionsList { margin: 0; gap: 16px; } .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { margin: 0; font-size: 14px; line-height: 19px; } .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround { border-radius: 50%; inset: 0; } .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { margin: 0; border-radius: 50%; } .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { border-radius: 50%; background-image: linear-gradient(to bottom right, transparent 48%, #d5d5d5 50%, transparent 52%); } .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue { padding: 10px; font-size: 14px; line-height: 19px; color: rgba(185, 185, 185, 0.6); } .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox { border: 2px solid #000000; } .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross { background-image: linear-gradient(to bottom right, transparent 48%, #000000 50%, transparent 52%); } .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue { color: #000000; } .shippingContainer { width: 61.6%; } @media only screen and (min-width: 1920px) { .shippingContainer { width: 45.24%; } } @media only screen and (max-width: 1024px) { .shippingContainer { width: 43.33%; } } @media only screen and (max-width: 639px) { .shippingContainer { width: 100%; } } .shippingContainer :global(.vtex-address-form__postalCode) { padding: 0; display: flex; gap: 32px; } @media only screen and (max-width: 639px) { .shippingContainer :global(.vtex-address-form__postalCode) { flex-direction: column; gap: 8px; } } .shippingContainer :global(.vtex-input__label) { font-size: 0; color: #929292; } .shippingContainer :global(.vtex-input__label)::after { content: "CALCULAR FRETE:"; font-size: 14px; line-height: 19px; } .shippingContainer :global(.vtex-input-prefix__group) { height: fit-content; justify-content: space-between; border: 1px solid #cccccc; border-radius: 0; } .shippingContainer :global(.vtex-address-form-4-x-input) { width: 82.5%; height: fit-content; padding: 16.5px 16px; font-size: 12px; line-height: 16px; color: #afafaf; } .shippingContainer :global(.vtex-input__suffix) { padding: 0; } .shippingContainer :global(.vtex-button) { width: fit-content; border: 0; border-radius: 0; background: #000000; } .shippingContainer :global(.vtex-button__label) { padding: 15px 14.5px !important; font-weight: 600; font-size: 0; color: #ffffff; } .shippingContainer :global(.vtex-button__label)::after { content: "OK"; font-size: 14px; line-height: 19px; } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { padding-top: 27.5px; display: flex; align-items: center; font-size: 12px; line-height: 16px; text-decoration-line: underline; } @media only screen and (max-width: 639px) { .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { padding: 0; justify-content: flex-end; } } .shippingContainer :global(.vtex__icon-external-link) { display: none; } .shippingTable { margin-top: 16px; padding: 0; border: 0; width: 50%; } @media only screen and (min-width: 1920px) { .shippingTable { width: 79.71%; } } @media only screen and (max-width: 1024px) { .shippingTable { width: 34.54%; } } @media only screen and (max-width: 639px) { .shippingTable { width: 100%; } } .shippingTable .shippingTableHead { display: table-header-group; text-align: left; font-size: 14px; line-height: 19px; text-transform: uppercase; color: #202020; } .shippingTable .shippingTableCell { padding: 0; font-size: 12px; line-height: 16px; color: #afafaf; } .shippingTable .shippingTableRow { padding-bottom: 15px; display: grid; grid-template-columns: 33.74% 24.54% 41.72%; grid-template-areas: "entregaTHead freteTHead prazoTHead" "entregaTBody freteTBody prazoTBody"; } .shippingTable .shippingTableRow .shippingTableHeadDeliveryName { grid-area: entregaTHead; font-weight: 400; } .shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate { grid-area: prazoTHead; font-weight: 400; } .shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice { grid-area: freteTHead; font-weight: 400; font-size: 0; position: relative; } .shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice::after { content: "FRETE"; width: min-content; position: absolute; bottom: 1px; left: 1px; font-size: 14px; line-height: 19px; text-align: left; } .shippingTable .shippingTableRow .shippingTableCellDeliveryName { grid-area: entregaTBody; } .shippingTable .shippingTableRow .shippingTableCellDeliveryEstimate { grid-area: prazoTBody; } .shippingTable .shippingTableRow .shippingTableCellDeliveryPrice { grid-area: freteTBody; } .shippingTable .shippingTableRadioBtn { display: none; } /* ----- INFO-AVAILABILITY ----- */ .subscriberContainer { margin-bottom: 16px; } .subscriberContainer .title { margin: 0; font-size: 0; color: #868686; } .subscriberContainer .title::after { content: "Produto indisponível"; font-size: 14px; font-weight: 700; line-height: 19px; } .subscriberContainer .subscribeLabel { font-size: 0; color: #868686; } .subscriberContainer .subscribeLabel::after { content: "Deseja saber quando estiver disponível?"; font-size: 14px; font-weight: 400; line-height: 19px; } .subscriberContainer .form { margin: 0; } .subscriberContainer .form .content { width: 57.74%; margin-top: 16px; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-areas: "name email" "submit submit"; column-gap: 8px; row-gap: 15px; } @media only screen and (max-width: 1024px) { .subscriberContainer .form .content { width: 100%; max-width: 1024px; } } .subscriberContainer .form .content .input { margin: 0; } .subscriberContainer .form .content .input.inputName { grid-area: name; } .subscriberContainer .form .content .input.inputEmail { grid-area: email; } .subscriberContainer .form .content .input :global(.vtex-input-prefix__group) { border: 1px solid #989898; border-radius: 0; } .subscriberContainer .form .content .input :global(.vtex-styleguide-9-x-input) { border-radius: 0; padding: 12px 14px; font-size: 12px; line-height: 16px; color: #989898; } .subscriberContainer .form .content .submit { grid-area: submit; margin: 0; } .subscriberContainer .form .content .submit :global(.vtex-button) { width: 100%; border: 0; border-radius: 0; background: #000000; } .subscriberContainer .form .content .submit :global(.vtex-button__label) { font-size: 0; text-transform: uppercase; color: #ffffff; } .subscriberContainer .form .content .submit :global(.vtex-button__label)::after { content: "AVISE-ME"; font-weight: 600; font-size: 18px; line-height: 25px; padding: 12px 0; } /* ----- PRODUCT-DESCRIPTION ----- */ .productDescriptionContainer .productDescriptionTitle { margin-bottom: 8px; font-size: 24px; line-height: 32px; color: #575757; } @media only screen and (min-width: 1920px) { .productDescriptionContainer .productDescriptionTitle { margin-bottom: 16px; font-size: 32px; } } @media only screen and (max-width: 1024px) { .productDescriptionContainer .productDescriptionTitle { font-size: 20px; } } .productDescriptionContainer .productDescriptionText { font-size: 16px; line-height: 22px; color: #929292; } @media only screen and (min-width: 1920px) { .productDescriptionContainer .productDescriptionText { font-size: 18px; line-height: 25px; } } @media only screen and (max-width: 1024px) { .productDescriptionContainer .productDescriptionText { font-size: 14px; line-height: 19px; } } .productDescriptionContainer .showMoreButton { width: 100%; margin: 0; padding: 12px 0; font-weight: 600; font-size: 18px; color: #ffffff; background: black; }