/* 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 */ .sliderLayoutContainer--carousel { background: unset; min-height: 448.4px; width: 94.435%; margin: 0 auto 64px; } @media (max-width: 1025px) and (min-width: 768px) { .sliderLayoutContainer--carousel { width: 92.166%; } } @media (max-width: 768px) and (min-width: 375px) { .sliderLayoutContainer--carousel { width: 78.616%; margin: 0 auto 32px; min-height: 273.8px; } } .sliderLayoutContainer--carousel .sliderTrackContainer { width: 96%; margin: 0 auto; } @media (max-width: 1025px) and (min-width: 768px) { .sliderLayoutContainer--carousel .sliderTrackContainer { width: 95.085%; } } @media (max-width: 768px) and (min-width: 375px) { .sliderLayoutContainer--carousel .sliderTrackContainer { width: 87.03%; } } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel { width: 5.3515% !important; } @media (max-width: 1025px) and (min-width: 768px) { .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel { width: 6.0831% !important; } } @media (max-width: 768px) and (min-width: 375px) { .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel { width: 6.921% !important; } } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel { width: 100%; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) { max-width: 100% !important; border-radius: 0; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { min-height: 448.4px; } @media (max-width: 1025px) and (min-width: 768px) { .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { min-height: 402.2px; } } @media (max-width: 768px) and (min-width: 375px) { .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) { min-height: 273.8px; } } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) { padding: 0; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) { padding: 16px 0 8px; display: flex; justify-content: center; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productNameContainer) :global(.vtex-product-summary-2-x-productBrand) { font-weight: 400; font-size: 18px; line-height: 25px; text-align: center; color: #000000; display: inline-block; vertical-align: text-top; min-height: 50px; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { width: 100%; height: 314.4px; } @media (max-width: 1025px) and (min-width: 768px) { .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { height: 291.2px; } } @media (max-width: 768px) and (min-width: 375px) { .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { height: 124.8px; } } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { border-radius: 0; } @media (max-width: 1920px) and (min-width: 1024px) { .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { min-width: 100%; } } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) { padding: 0; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) { row-gap: 8px; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) { padding: 0; font-weight: 400; font-size: 14px; line-height: 19px; text-align: center; text-decoration-line: line-through; color: #bababa; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) { text-transform: lowercase; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) { padding: 0; display: flex; justify-content: center; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) { display: none; } .sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack .slide--carousel .slideChildrenContainer--carousel :global(.vtex-product-summary-2-x-containerNormal) :global(.vtex-product-summary-2-x-clearLink) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPrice) { font-weight: 700; font-size: 24px; line-height: 33px; text-align: center; color: #000000; } .sliderLayoutContainer--carousel .sliderArrows { padding: 0; margin: 0; } .sliderLayoutContainer--carousel .paginationDotsContainer { display: flex; align-items: center; bottom: -32px; } .sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot { background-color: #000000; width: 10px !important; height: 10px !important; } .sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot--isActive { background-color: #ffffff; border: 0.5px solid #000000; width: 17px !important; height: 17px !important; }