/* ========================================================== TÍTULO - TODO MUNDO TÁ LEVANDO ========================================================== */ .leo-products-title { width: 100% !important; margin: 0 !important; padding: 0 15px !important; box-sizing: border-box; } .leo-products-title .elementor-widget-container { margin: 0 !important; padding: 0 !important; } .leo-products-title .elementor-heading-title { margin: 0 !important; padding: 0 !important; text-align: center !important; color: #111111 !important; font-family: inherit !important; font-size: 28px !important; font-weight: 700 !important; line-height: 1.15 !important; } /* ========================================================== CARROSSEL DESKTOP ========================================================== */ .leo-product-carousel { --leo-visible: 5; --leo-gap: 16px; --leo-image-height: 210px; position: relative; width: min( 1300px, calc(100% - 80px) ); max-width: 100%; margin: 18px auto 0; padding: 0 0 38px; box-sizing: border-box; } /* ========================================================== VIEWPORT ========================================================== */ .leo-product-carousel .leo-product-viewport { width: 100%; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .leo-product-carousel .leo-product-viewport::-webkit-scrollbar { display: none; } /* ========================================================== WOOCOMMERCE ========================================================== */ .leo-product-carousel .leo-product-source, .leo-product-carousel .woocommerce { width: 100% !important; } .leo-product-carousel .woocommerce ul.products { width: 100% !important; display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: var(--leo-gap) !important; grid-template-columns: none !important; margin: 0 !important; padding: 3px !important; list-style: none !important; } /* ========================================================== CARD ========================================================== */ .leo-product-carousel .woocommerce ul.products li.product { position: relative !important; flex: 0 0 calc( ( 100% - ( var(--leo-gap) * ( var(--leo-visible) - 1 ) ) ) / var(--leo-visible) ) !important; width: auto !important; max-width: none !important; min-width: 0 !important; float: none !important; clear: none !important; margin: 0 !important; padding: 10px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-self: stretch; scroll-snap-align: start; scroll-snap-stop: always; background: #ffffff !important; border: 1px solid #dedede !important; border-radius: 18px !important; box-shadow: none !important; overflow: hidden; } /* ========================================================== REMOVE CATEGORIAS DEMO ========================================================== */ .leo-product-carousel li.product .ct-product-categories, .leo-product-carousel li.product a[rel="tag"] { display: none !important; } /* ========================================================== IMAGEM ========================================================== */ .leo-product-carousel li.product img { display: block !important; width: 100% !important; height: var(--leo-image-height) !important; max-height: var(--leo-image-height) !important; aspect-ratio: auto !important; object-fit: contain !important; object-position: center center !important; margin: 0 0 10px !important; background: #ffffff; } /* ========================================================== NOME DO PRODUTO ========================================================== */ .leo-product-carousel .woocommerce-loop-product__title { min-height: 38px !important; margin: 0 0 6px !important; padding: 0 !important; color: #1a1a1a !important; font-family: inherit !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.32 !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; } /* ========================================================== AVALIAÇÕES ========================================================== */ .leo-product-carousel .leo-product-rating { min-height: 17px; display: flex; align-items: center; gap: 5px; margin: 0 0 5px; } .leo-product-carousel .leo-product-rating .star-rating { float: none !important; margin: 0 !important; font-size: 13px !important; line-height: 1 !important; } .leo-product-carousel .leo-product-rating .star-rating::before { color: #d7d7d7 !important; } .leo-product-carousel .leo-product-rating .star-rating span::before { color: #F5A000 !important; } .leo-product-carousel .leo-review-count { color: #777777; font-size: 11px; font-weight: 400; line-height: 1; white-space: nowrap; } /* ========================================================== PREÇO ========================================================== */ .leo-product-carousel .price { display: block !important; margin: 2px 0 10px !important; color: #111111 !important; font-size: 19px !important; font-weight: 700 !important; line-height: 1.15 !important; } .leo-product-carousel .price del { display: inline; margin-right: 5px; color: #999999 !important; font-size: 11px !important; font-weight: 400 !important; opacity: .85; } .leo-product-carousel .price ins { text-decoration: none !important; } /* ========================================================== BOTÃO ========================================================== */ .leo-product-carousel li.product .button { width: 100% !important; min-height: 42px; margin: auto 0 0 !important; padding: 9px 10px !important; box-sizing: border-box; display: flex !important; align-items: center; justify-content: center; gap: 7px !important; border: 0 !important; border-radius: 10px !important; /* v0.5.11.33 — verde da referência do botão Adicionar da Home. */ background: #1A7A53 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.2; text-align: center !important; text-decoration: none !important; box-shadow: none !important; } /* ========================================================== CARRINHO ========================================================== */ .leo-product-carousel .leo-cart-icon { display: block; width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================== SELO DE OFERTA ========================================================== */ .leo-product-carousel .onsale { top: 10px !important; left: 10px !important; right: auto !important; min-width: auto !important; min-height: auto !important; padding: 6px 9px !important; border-radius: 20px !important; background: #ef3d43 !important; color: #ffffff !important; font-size: 11px !important; font-weight: 700 !important; } /* ========================================================== SETAS ========================================================== */ .leo-product-carousel .leo-product-arrow { position: absolute; top: calc(50% - 25px); z-index: 20; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: #e7e9eb; color: #303030; display: flex; align-items: center; justify-content: center; cursor: pointer; } .leo-product-carousel .leo-product-arrow span { display: block; margin-top: -3px; font-size: 30px; font-weight: 300; line-height: 1; } .leo-product-carousel .leo-product-prev { left: -48px; } .leo-product-carousel .leo-product-next { right: -48px; } .leo-product-carousel .leo-product-arrow:disabled { opacity: .25; cursor: default; } /* ========================================================== BOLINHAS ========================================================== */ .leo-product-carousel .leo-product-pagination { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 7px; } .leo-product-carousel .leo-product-dot { width: 9px; height: 9px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: #c5cbd0; cursor: pointer; } .leo-product-carousel .leo-product-dot.is-active { width: 42px; background: #FFB800; } /* ========================================================== NOTEBOOK ========================================================== */ @media (min-width:1000px) and (max-width:1199px) { .leo-product-carousel { --leo-visible: 4; --leo-image-height: 195px; width: calc(100% - 90px); } } /* ========================================================== TABLET ========================================================== */ @media (min-width:690px) and (max-width:999px) { .leo-products-title .elementor-heading-title { font-size: 24px !important; } .leo-product-carousel { --leo-visible: 3; --leo-gap: 14px; --leo-image-height: 180px; width: calc(100% - 70px); } .leo-product-carousel .leo-product-prev { left: -35px; } .leo-product-carousel .leo-product-next { right: -35px; } } /* ========================================================== CELULAR ========================================================== */ @media (max-width:689px) { /* ------------------------------------------------------- TÍTULO ------------------------------------------------------- */ .leo-products-title { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 8px !important; } .leo-products-title .elementor-widget-container { margin: 0 !important; padding: 0 !important; } .leo-products-title .elementor-heading-title { margin: 0 !important; padding: 0 !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.12 !important; letter-spacing: -0.25px !important; text-align: center !important; white-space: nowrap !important; } /* ------------------------------------------------------- CARROSSEL MOBILE ------------------------------------------------------- */ .leo-product-carousel { /* * Dois cards visíveis. */ --leo-visible: 2; /* * Pouco espaço entre eles. */ --leo-gap: 10px; /* * Imagem maior que antes, * acompanhando os cards mais largos. */ --leo-image-height: clamp( 145px, 42vw, 175px ); /* * IMPORTANTE: * * Aqui usamos a largura REAL * da tela do celular. * * Assim o Elementor não deixa * o carrossel estreito. */ width: min( 430px, calc(100vw - 18px) ) !important; max-width: none !important; position: relative; left: 50%; transform: translateX(-50%); margin: 12px 0 0 !important; padding: 0 0 36px !important; box-sizing: border-box; } /* ------------------------------------------------------- LISTA ------------------------------------------------------- */ .leo-product-carousel .woocommerce ul.products { width: 100% !important; gap: var(--leo-gap) !important; margin: 0 !important; padding: 1px !important; } /* ------------------------------------------------------- CARD ------------------------------------------------------- */ .leo-product-carousel .woocommerce ul.products li.product { /* * Exatamente metade do espaço, * descontando o gap. */ flex: 0 0 calc( ( 100% - var(--leo-gap) ) / 2 ) !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 10px !important; box-sizing: border-box !important; border: 1px solid #dedede !important; border-radius: 16px !important; background: #ffffff !important; } /* ------------------------------------------------------- IMAGEM ------------------------------------------------------- */ .leo-product-carousel li.product img { width: 100% !important; height: var(--leo-image-height) !important; max-height: var(--leo-image-height) !important; object-fit: contain !important; object-position: center center !important; margin: 0 0 8px !important; } /* ------------------------------------------------------- NOME DO PRODUTO ------------------------------------------------------- */ .leo-product-carousel .woocommerce-loop-product__title { min-height: 34px !important; margin: 0 0 5px !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.28 !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; } /* ------------------------------------------------------- AVALIAÇÕES ------------------------------------------------------- */ .leo-product-carousel .leo-product-rating { min-height: 16px; margin: 0 0 4px; gap: 3px; } .leo-product-carousel .leo-product-rating .star-rating { font-size: 11px !important; } .leo-product-carousel .leo-review-count { font-size: 9.5px; } /* ------------------------------------------------------- PREÇO ------------------------------------------------------- */ .leo-product-carousel .price { margin: 2px 0 8px !important; font-size: 17px !important; line-height: 1.15 !important; } .leo-product-carousel .price del { font-size: 10px !important; } /* ------------------------------------------------------- BOTÃO ------------------------------------------------------- */ .leo-product-carousel li.product .button { min-height: 41px; margin: auto 0 0 !important; padding: 8px 6px !important; gap: 6px !important; border-radius: 9px !important; font-size: 12.5px !important; } .leo-product-carousel .leo-cart-icon { width: 18px; height: 18px; flex: 0 0 18px; } /* ------------------------------------------------------- SEM SETAS NO CELULAR ------------------------------------------------------- */ .leo-product-carousel .leo-product-arrow { display: none !important; } /* ------------------------------------------------------- BOLINHAS ------------------------------------------------------- */ .leo-product-carousel .leo-product-pagination { bottom: 4px; gap: 6px; } .leo-product-carousel .leo-product-dot { width: 8px; height: 8px; } .leo-product-carousel .leo-product-dot.is-active { width: 32px; } } /* ========================================================== CELULARES MUITO ESTREITOS ========================================================== */ @media (max-width:359px) { .leo-products-title .elementor-heading-title { font-size: 18px !important; } .leo-product-carousel { width: calc(100vw - 14px) !important; --leo-gap: 8px; --leo-image-height: 132px; } .leo-product-carousel .woocommerce ul.products li.product { padding: 8px !important; } .leo-product-carousel li.product .button { font-size: 11.5px !important; } }