/* 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 */ .productImageTag--main { max-height: max-content !important; } .carouselGaleryThumbs { margin-top: 16px; } @media screen and (max-width: 1024px) { .carouselGaleryThumbs { margin-bottom: 32px; display: block; } } .carouselGaleryThumbs .productImagesThumbActive, .carouselGaleryThumbs .productImagesThumb { margin: 0 16px 0 0; width: 90px !important; height: 90px; border-radius: 8px; overflow: hidden; } .productNameContainer { margin-bottom: 8px; } .productNameContainer .productBrand { color: #575757; font-style: normal; font-weight: 300; font-size: 20px; line-height: 34px; } .skuSelectorContainer { display: flex; flex-direction: column-reverse; } .skuSelectorContainer .skuSelectorSubcontainer--cor, .skuSelectorContainer .skuSelectorSubcontainer--tamanho { margin-bottom: 16px; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer, .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { margin: 0; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName, .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorNameSeparator, .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue, .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName, .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorNameSeparator, .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue { font-size: 0; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList, .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList { margin: 0; gap: 16px; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem, .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem { margin: 0; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross, .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { background-image: none; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross::after, .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross::after { content: ""; display: block; width: 1px; height: 40px; background: #D5D5D5; transform: rotate(45deg); bottom: 0; left: 50%; position: relative; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .frameAround, .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .frameAround { display: none; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox, .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox { border: 2px solid #000; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper, .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper { color: #000; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after, .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after { background-color: #000; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after { content: "Outras Cores:"; font-style: normal; font-weight: 400; font-size: 14px; line-height: 19px; color: #929292; text-transform: uppercase; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem { width: 48px; height: 48px; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { border: 1px solid rgba(185, 185, 185, 0.6); border-radius: 50%; position: absolute; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { background-image: none; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross::after { content: ""; height: 48px; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .frameAround { display: none; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox { border: 2px solid #000; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper { color: #000; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after { background-color: #000; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after { content: "OUTROS TAMANHOS:"; font-style: normal; font-weight: 400; font-size: 14px; line-height: 19px; color: #929292; text-transform: uppercase; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem { width: 40px; height: 40px; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { border: 1px solid #989898; border-radius: 50%; position: absolute; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .valueWrapper { padding: 0; font-style: normal; font-weight: 400; font-size: 14px; line-height: 19px; color: rgba(185, 185, 185, 0.6); } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .frameAround { display: none; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox { border: 2px solid #000; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper { color: #000; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after { background-color: #000; } .shippingContainer { position: relative; } .shippingContainer :global(.vtex-input__label) { font-size: 0; } .shippingContainer :global(.vtex-input__label)::after { content: "CALCULAR FRETE:"; font-style: normal; font-weight: 400; font-size: 14px; line-height: 19px; color: #929292; } .shippingContainer :global(.vtex-input-prefix__group) { width: 280px; height: 49px; border: 1px solid #cccccc; border-radius: 0; } @media screen and (max-width: 768px) { .shippingContainer :global(.vtex-input-prefix__group) { width: 100%; } } .shippingContainer :global(.vtex-address-form__postalCode) { display: flex; flex-wrap: wrap; align-items: flex-end; padding-bottom: 16px; } .shippingContainer :global(.vtex-input) { width: auto; } @media screen and (max-width: 768px) { .shippingContainer :global(.vtex-input) { width: 100%; } } .shippingContainer :global(.vtex-input__suffix) { display: none; } .shippingContainer :global(.vtex-address-form-4-x-input) { padding: 16.5px 16px; margin: 0; } .shippingContainer :global(.vtex-address-form-4-x-input)::placeholder { font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; display: flex; color: #afafaf; } .shippingContainer :global(.vtex__icon-external-link) { display: none; } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { padding: 0 0 16.5px 32px; color: #000000 !important; } @media screen and (max-width: 768px) { .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { padding: 8px 0 0 0; text-align: end; width: 100%; } } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child { color: #000000 !important; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; text-decoration-line: underline; } @media screen and (max-width: 768px) { .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child { margin: 0; } } .shippingContainer :global(.vtex-button) { width: auto; border: none; top: 27px; left: 234px; position: absolute; } @media screen and (max-width: 768px) { .shippingContainer :global(.vtex-button) { right: 0; left: auto; } } .shippingContainer :global(.vtex-button__label) { font-size: 0; background-color: #000000; width: 49px; height: 49px; } .shippingContainer :global(.vtex-button__label)::after { content: "OK"; font-style: normal; font-weight: 600; font-size: 14px; line-height: 19px; color: #ffffff; } .shippingTable { margin: 0; padding: 0 0 16px 0; border: none; width: 326px; } @media screen and (max-width: 768px) { .shippingTable { width: 100%; } } .shippingTableRadioBtn { display: none; } .shippingTableHead { display: block; } .shippingTableLabel, .shippingTableCell, .currencyContainer { font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; color: #afafaf; } .shippingTableHeadDeliveryName, .shippingTableHeadDeliveryEstimate, .shippingTableHeadDeliveryPrice { font-style: normal; font-weight: 400; font-size: 14px; line-height: 19px; color: #202020; text-transform: uppercase; text-align: start; } .shippingTableRow { display: flex; gap: 32px; } .shippingTableCell { padding: 0; } .shippingTableHeadDeliveryName, .shippingTableCellDeliveryName { width: 23.92638036%; } .shippingTableHeadDeliveryEstimate, .shippingTableCellDeliveryEstimate { order: 3; width: 41.71779%; } .shippingTableCellDeliveryPrice, .shippingTableHeadDeliveryPrice { width: 14.723926%; } .discountInsideContainer { display: none; } .newsletter--product-newsletter { max-width: 774px; margin: 0 auto; width: 100%; } @media screen and (max-width: 768px) { .newsletter--product-newsletter { max-width: none; } } .newsletter--product-newsletter .container--product-newsletter { padding: 0; } .newsletter--product-newsletter .container--product-newsletter .form--product-newsletter { margin: 0; width: 100%; max-width: none; } .newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .label--product-newsletter { font-style: normal; font-weight: 400; font-size: 18px; line-height: 25px; text-align: center; color: #929292; } @media screen and (max-width: 768px) { .newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .label--product-newsletter { font-size: 16px; line-height: 22px; } } .newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter { width: 100%; border-bottom: 1px solid #929292; display: flex; } .newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter .buttonContainer { width: 10.852713178%; padding: 0; } .newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter .buttonContainer :global(.vtex-button) { width: 100%; border: none; border-radius: 0; background: transparent; border-bottom: 3px solid #bfbfbf; min-height: auto; } .newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter .buttonContainer :global(.vtex-button__label) { width: 100%; padding: 0 !important; padding-bottom: 10px !important; font-style: normal; font-weight: 700; font-size: 14px; line-height: 19px; color: #ffffff; } .newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter :global(.vtex-input) { flex: 1; } .newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter :global(.vtex-input-prefix__group) { border: none; height: 29px; } .newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter :global(.vtex-styleguide-9-x-input) { background: transparent; padding: 0; font-style: normal; font-weight: 400; font-size: 18px; line-height: 25px; color: #929292; } @media screen and (max-width: 768px) { .newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter :global(.vtex-styleguide-9-x-input) { font-size: 12px; line-height: 16px; } } .newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter :global(.vtex-styleguide-9-x-input)::placeholder { font-style: normal; font-weight: 400; font-size: 18px; line-height: 25px; color: #929292; } @media screen and (max-width: 768px) { .newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter :global(.vtex-styleguide-9-x-input)::placeholder { font-size: 12px; line-height: 16px; } }