/* ========================================================================== Aletto - carrossel das secoes Este arquivo e carregado por ultimo, entao vence as regras anteriores. ========================================================================== */ /* -------------------------------------------------------------------------- Marcas: rolavel abaixo de 1280px (mesmo breakpoint em que a referencia Shopify troca o carrossel por uma grade estatica). A partir de 1280px este bloco nao se aplica mais e a regra original de .aletto-brands (style.css: flex-wrap:wrap; justify-content:center) volta a valer - apresentacao estavel, sem rolagem, igual ao comportamento desktop largo da referencia. Seletor com um nivel a mais de especificidade (".aletto-home-section .aletto-brands", nao so ".aletto-brands"): o tema carrega o proprio style.css uma segunda vez sob outro handle (boilerplate padrao de child theme), sem media query e por ultimo no - com a mesma especificidade de uma classe, aquela copia venceria por ordem de carregamento e quebraria a rolagem mesmo dentro da media query abaixo. -------------------------------------------------------------------------- */ @media (max-width: 1279px) { .aletto-home-section .aletto-brands { flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; gap: 0.8em; padding-bottom: 0.4em; } .aletto-home-section .aletto-brands::-webkit-scrollbar { width: 0; height: 0; display: none; } .aletto-home-section .aletto-brands__item { flex-shrink: 0; scroll-snap-align: start; } } /* Sem itens pra rolar em >=1280px: o JS (aletto-carousel.js) ja esconde as setas sozinho (deteta que scrollWidth == clientWidth), so tira o cursor de "arrastar" que ficaria sem função. */ @media (min-width: 1280px) { .aletto-carrossel .aletto-brands.aletto-arrastavel { cursor: auto; } } @media (max-width: 768px) { /* ---------------------------------------------------------------------- A faixa que rola ---------------------------------------------------------------------- */ body .aletto-home-section ul.products, body .aletto-bloco__produtos ul.products, body .aletto-brands, body .aletto-cats, body .related.products ul.products { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; grid-template-columns: none !important; justify-content: flex-start !important; align-items: stretch !important; width: auto !important; max-width: none !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; gap: 0.8em !important; padding-bottom: 0.4em !important; } /* Separacao entre os cards um pouco maior SO na Home (0.8em -> 1.1em) - com a area de imagem maior/mais respirada, o gap padrao ficava apertado demais entre um card e o outro. Regra separada de ".related.products"/".aletto-brands"/".aletto-cats" de proposito, pra nao alterar nada fora do escopo desta tarefa (so os cards de produto da Home). Nao muda a largura do card, so o espaco entre eles. */ body .aletto-home-section ul.products, body .aletto-bloco__produtos ul.products { gap: 1.1em !important; } body .aletto-home-section ul.products::-webkit-scrollbar, body .aletto-bloco__produtos ul.products::-webkit-scrollbar, body .aletto-brands::-webkit-scrollbar, body .aletto-cats::-webkit-scrollbar, body .related.products ul.products::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Sangria ate a borda da tela, menos dentro do bloco turquesa. */ body .aletto-home-section ul.products, body .aletto-home-section .aletto-brands, body .aletto-home-section .aletto-cats { margin-left: -1.2em !important; margin-right: -1.2em !important; padding-left: 1.2em !important; padding-right: 1.2em !important; } body .aletto-bloco__produtos ul.products { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* ---------------------------------------------------------------------- Itens ---------------------------------------------------------------------- */ body .aletto-home-section ul.products li.product, body .related.products ul.products li.product { flex: 0 0 46% !important; width: 46% !important; max-width: none !important; margin: 0 !important; float: none !important; scroll-snap-align: start; } /* Card das vitrines da Home: min-width um pouco maior que o padrao (162px) - o suficiente pra caber "Adicionar ao carrinho" numa linha so, sem crescer mais que o necessario. Regra separada da de ".related.products" de proposito, porque o card de cada area tem um padding um pouco diferente - cada uma recebeu o proprio minimo medido ao vivo, nao um valor copiado da outra. */ body .aletto-home-section ul.products li.product { min-width: 162px !important; } /* Produtos relacionados (pagina de produto): o teste anterior tinha deixado esse card em 148px de proposito (nao alterar sem necessidade). Reavaliado agora com o botao sempre em uma linha: a 148px nao sobrava espaco nem reduzindo a fonte ao minimo razoavel (~11px, abaixo do resto do site) - subiu pra 165px, medido ao vivo pra caber exatamente com o mesmo font-size/padding usado no resto do site (11.5px / 8px, ver aletto-extra.css), sem overflow. */ body .related.products ul.products li.product { min-width: 165px !important; } body .aletto-bloco__produtos ul.products li.product { flex: 0 0 62% !important; width: 62% !important; min-width: 140px !important; margin: 0 !important; scroll-snap-align: start; } body .aletto-brands .aletto-brands__item { flex: 0 0 auto !important; width: 92px !important; scroll-snap-align: start; } body .aletto-cats .aletto-cats__item { flex: 0 0 30% !important; min-width: 96px !important; scroll-snap-align: start; } /* Impede que um ancestral corte a rolagem. */ body .aletto-home-section, body .aletto-home, body .site-main { overflow: visible !important; } /* ---------------------------------------------------------------------- Banner mais no alto ---------------------------------------------------------------------- */ body .site-content { padding-top: 0 !important; } /* O Storefront (tema pai) reserva 4.2358em abaixo do ".site-header" em paginas sem breadcrumb, via a regra ".home.page:not(.page-template-template-homepage) .site-header" (ver storefront/style.css) - pensada pra dar respiro antes do conteudo de blog padrao. Na Home do Aletto isso sobra como um espaco em branco vazio entre o header e o banner no mobile (o banner ja tem sua propria separacao via a barra degrade). Zerado so aqui (Home + mobile); precisa de !important pra vencer a especificidade maior (4 classes) da regra do tema pai. */ body.home .site-header { margin-bottom: 0 !important; } body .aletto-home > .site-main > .aletto-banners { margin-top: 0 !important; } body .aletto-home .aletto-banners + .aletto-home-section { margin-top: 1.8em !important; } /* O div que o WooCommerce cria em volta da lista não pode cortar a rolagem. */ body .aletto-home-section .woocommerce, body .aletto-bloco__produtos .woocommerce { overflow: visible !important; width: 100% !important; margin: 0 !important; } } /* ========================================================================== Setas das faixas (desktop e celular) ========================================================================== */ .aletto-carrossel { position: relative; } /* "top" e o centro vertical da IMAGEM do card, nao do card inteiro - card de produto (imagem + marca + titulo + preco + parcela + botao) tem a imagem concentrada bem mais perto do topo do que a metade do card. Medido ao vivo (DevTools, card real das vitrines da Home e do bloco "Produtos em Destaque"): imagem ocupa de ~10px a ~155px de um card de ~370-380px de altura -> centro em ~22%. Antes disso era 42% (media aproximada de "algum lugar no meio do card"), o que colocava a seta em cima do nome da marca/titulo em vez da imagem - mesmo bug ja corrigido para "Produtos relacionados" (ver override abaixo) e que tambem afetava Bluwe/Promocoes/Mais Vendidos/Vòlia/Bloco aqui na Home. Marcas e Categorias tem card mais curto (sem preco/parcela/botao) e usam o proprio valor, ver override logo abaixo. */ .aletto-carrossel__seta { position: absolute; top: 22%; transform: translateY(-50%); z-index: 5; width: 38px; height: 38px; padding: 0; border: none; border-radius: 50%; background-color: #fff; color: var(--aletto-heading, #737b97); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); display: none; align-items: center; justify-content: center; cursor: pointer; } .aletto-carrossel__seta:hover { background-color: #fff; color: var(--aletto-verde-agua, #24c7b8); transform: translateY(-50%); filter: none; } .aletto-carrossel__seta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .aletto-carrossel.tem-rolagem .aletto-carrossel__seta { display: flex; } .aletto-carrossel__seta[disabled] { opacity: 0; pointer-events: none; } .aletto-carrossel__seta--prev { left: -4px; } .aletto-carrossel__seta--next { right: -4px; } /* Produtos relacionados (pagina de produto): "top:42%" acima foi medido pro card das vitrines da Home (imagem maior, proporcionalmente mais alta - centro da imagem fica perto da metade do card). No card de "Produtos relacionados" a imagem e menor e ha mais texto abaixo dela (marca, titulo, preco, parcela, botao) - com os mesmos 42% as setas ficavam sobre o nome da marca/titulo, nao sobre a imagem. Medido ao vivo (DevTools, card real): imagem ocupa de 14px a 151px de um card de 408px de altura -> centro em ~20%. Sobrescreve so este contexto, sem mudar as vitrines da Home. */ body.single-product .related.products .aletto-carrossel__seta { top: 20%; } /* Marcas e Categorias (Home): card so com logo/imagem + nome, sem preco/parcela/botao abaixo - a imagem ocupa uma fatia maior do card (medido ao vivo: ~30% de centro, contra ~22% do card de produto acima). Sem esta regra, essas duas faixas herdariam o "top:22%" do card de produto e a seta ficaria alta demais, acima do centro real da logo/imagem. */ .aletto-carrossel:has(> .aletto-brands) .aletto-carrossel__seta, .aletto-carrossel:has(> .aletto-cats) .aletto-carrossel__seta { top: 30%; } /* Cursor de arrastar no desktop. */ .aletto-carrossel .aletto-arrastavel { cursor: grab; } .aletto-carrossel .aletto-arrastavel.esta-arrastando { cursor: grabbing; scroll-snap-type: none; user-select: none; } .aletto-carrossel .aletto-arrastavel.esta-arrastando a { pointer-events: none; } @media (max-width: 768px) { .aletto-carrossel__seta--prev { left: 2px; } .aletto-carrossel__seta--next { right: 2px; } }