/** * Experiências relacionadas — componente do carrinho e do slot do vale. * * Só estiliza o que é nosso (`.oe-rel*`). O bloco de relacionados da página de * produto não aparece aqui de propósito: ele é markup do WooCommerce renderizado * pelo JetWooBuilder e já tem o visual do catálogo. Mexer nele seria mudar o * design de uma tela que ninguém pediu para mudar. * * Cores da marca, as mesmas que o tema aplica no drawer (custom-v28.css:253-256): * #61C6C0 principal, #38928D escuro, #C6F0EA claro. * * Versão no NOME do arquivo, não em `?ver=`: arquivo novo não precisa de purga * total do LiteSpeed. Ao mudar este CSS, crie o -v3 e troque o enqueue. */ .oe-rel { margin: 16px 0 8px; padding: 14px 0 0; border-top: 1px solid #e6e6e6; /* Defensivo. Hoje os blocos ficam dentro de `.cart-collaterals`, que é um contexto de formatação próprio e não precisa disto. Mas na página de carrinho o formulário flutua à esquerda (790px) e o total à direita (564px), sobrando uma fresta de 56px: um bloco colocado fora daquela div, sem clear, fica com a caixa da largura toda e o CONTEÚDO espremido na fresta — medido, a lista de 4 cards recebeu colunas de 6,6px cada e o título virou uma coluna de letras na vertical. Uma linha para o dia em que alguém mudar o gancho. */ clear: both; } .oe-rel__titulo { margin: 0 0 10px; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; color: #38928D; } /* O tema esconde TODO `h2` dentro da coluna do total, para sumir com o "Totais do carrinho" do WooCommerce: .woocommerce .cart-collaterals h2 { display: none } (0,2,1, inline no ) Como os três blocos são irmãos do `.cart_totals` dentro da mesma `.cart-collaterals`, o `.oe-rel__titulo` (0,1,0) perdia e sumia junto — medido em /carrinho/: `display: none`, altura 0, com o texto intacto no DOM. Na gaveta o título sempre apareceu, porque lá não existe `.cart-collaterals`; foi por isso que passou. Devolvemos por especificidade (0,4,0), não por `!important`. Se o título voltar a sumir, o suspeito é essa regra do tema ter ganhado peso. Repetimos o bloco inteiro, e não só o `display`: a mesma regra do tema, mais a do `woocommerce.min.css` com o mesmo seletor, também vestem o h2 com a caixa do "Totais do carrinho" — fundo #f7f7f7, `border-bottom`, `margin: 0 -20px 20px` sangrando para fora da coluna e `padding: .8em 20px`. Corrigir só o `display` devolve o título dentro daquela caixa: medido, 41,6px de altura e cor #444, em vez dos ~17px em #38928D. Toda propriedade abaixo existe porque alguma daquelas duas regras a define. */ .woocommerce .cart-collaterals .oe-rel .oe-rel__titulo { display: block; margin: 0 0 10px; padding: 0; background: none; border-bottom: 0; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; /* A mesma regra do `woocommerce.min.css` centraliza o h2 desta coluna. Os cards, o subtotal e o Original Flex começam todos na margem esquerda; o título centralizado era o único elemento fora desse eixo. */ text-align: left; color: #38928D; } /* Nesta coluna os blocos não se separam por linha: o espaço já separa, e a `.cart_totals` logo abaixo traz a própria moldura. Três traços cinza empilhados acima dela viravam ruído. Fora daqui — a gaveta, a página de produto — o `border-top` da regra base continua valendo. */ .cart-collaterals .oe-rel { border-top: 0; } /* A margem de 16px separa um bloco do outro. No primeiro da coluna ela não separa nada: empurra a coluna inteira para baixo e desalinha do topo da tabela de produtos — medido, tabela em 262px e o bloco em 278px. O mesmo vale para o `padding-top`. `:first-child` em vez de `.oe-rel--carrinho` porque quem vem primeiro é a ordem dos ganchos (5, 6, 7), e ela pode mudar. */ .cart-collaterals .oe-rel:first-child { margin-top: 0; padding-top: 0; } .oe-rel__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } .oe-rel--vale .oe-rel__lista, .oe-rel--video .oe-rel__lista { grid-template-columns: minmax(0, 1fr); } .oe-rel__item { margin: 0; padding: 0; list-style: none; } .oe-rel__link { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px; border: 1px solid #e6e6e6; border-radius: 8px; text-decoration: none; color: #181818; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; } .oe-rel__link:hover, .oe-rel__link:focus-visible { border-color: #61C6C0; box-shadow: 0 0 0 2px #C6F0EA; } /* Foco visível é requisito, não enfeite: o componente é navegável por teclado. */ .oe-rel__link:focus-visible { outline: 2px solid #38928D; outline-offset: 2px; } .oe-rel__img { grid-row: span 2; width: 56px; height: 56px; border-radius: 6px; object-fit: cover; } .oe-rel__nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.35; } /* #38928D sobre #fff dá 4,7:1 — passa em WCAG AA para texto normal. */ .oe-rel__preco { font-size: 12px; font-weight: 700; color: #38928D; } .oe-rel__preco del { font-weight: 400; opacity: .6; } /* --------------------------------------------------------------------------- * Card com botão (faixa da Vídeo Mensagem) * * Mesma moldura dos outros cards. A diferença é que o card não é clicável — quem * age é o botão — então ele não recebe o hover de link. * ------------------------------------------------------------------------- */ /* Posicionamento EXPLÍCITO, não automático. * * Com três colunas e quatro filhos, o auto-placement do grid põe o preço na * coluna 3 (ao lado do nome) e empurra o botão para uma segunda linha solto no * meio do card. Foi o que aconteceu: nome com 418px, preço com 52px encostado na * direita e o botão flutuando embaixo. Cada filho declara onde fica. */ .oe-rel__link--estatico { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; cursor: default; } .oe-rel__link--estatico .oe-rel__img { grid-area: 1 / 1 / 3 / 2; } .oe-rel__link--estatico .oe-rel__nome { grid-area: 1 / 2 / 2 / 3; } .oe-rel__link--estatico .oe-rel__preco { grid-area: 2 / 2 / 3 / 3; } .oe-rel__link--estatico .oe-rel__botao { grid-area: 1 / 3 / 3 / 4; align-self: center; justify-self: end; } /* A nota fica DENTRO do card, ocupando a largura toda numa linha própria abaixo do resto. O separador acima dela a distingue do nome e do preço sem precisar de caixa nova. */ .oe-rel__link--estatico .oe-rel__nota { grid-area: 3 / 1 / 4 / 4; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0f0f0; font-size: 11px; line-height: 1.4; /* #5b6b6a sobre #fff dá 5,4:1 — passa em WCAG AA para texto pequeno. */ color: #5b6b6a; } .oe-rel__link--estatico:hover, .oe-rel__link--estatico:focus-within { border-color: #61C6C0; } .oe-rel__botao { padding: 9px 18px; border-radius: 20px; background: #38928D; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none; transition: background-color .15s ease; } .oe-rel__botao:hover, .oe-rel__botao:focus-visible { background: #2b736f; color: #fff; } .oe-rel__botao:focus-visible { outline: 2px solid #38928D; outline-offset: 2px; } /* Estado de "adicionando": o botão não pode aceitar um segundo clique enquanto o primeiro está em voo, senão entram dois vídeos no carrinho. */ .oe-rel__botao[aria-busy="true"] { opacity: .6; pointer-events: none; } /* Card estreito (gaveta): o botão desce para a própria linha, senão o nome do produto fica espremido em duas ou três palavras por linha. */ @media (max-width: 420px) { .oe-rel__link--estatico { grid-template-columns: 56px minmax(0, 1fr); } .oe-rel__link--estatico .oe-rel__botao { grid-area: 3 / 1 / 4 / 3; justify-self: stretch; margin-top: 6px; text-align: center; } .oe-rel__link--estatico .oe-rel__nota { grid-area: 4 / 1 / 5 / 3; } } /* O drawer é estreito: uma coluna só, senão o card fica ilegível. */ .vi-wcaio-sidebar-cart .oe-rel__lista { grid-template-columns: minmax(0, 1fr); } /* A gaveta tem ~360px: o botão ao lado do nome não cabe, vai para a linha de baixo. A media query acima não resolve porque a janela é larga; o estreito aqui é o container. */ .vi-wcaio-sidebar-cart .oe-rel__link--estatico { grid-template-columns: 56px minmax(0, 1fr); } .vi-wcaio-sidebar-cart .oe-rel__link--estatico .oe-rel__botao { grid-area: 3 / 1 / 4 / 3; justify-self: stretch; margin-top: 6px; text-align: center; } .vi-wcaio-sidebar-cart .oe-rel__link--estatico .oe-rel__nota { grid-area: 4 / 1 / 5 / 3; } .vi-wcaio-sidebar-cart .oe-rel { padding-left: 12px; padding-right: 12px; } /* Na página /carrinho/, que é o caminho do mobile, cabe mais. */ @media (min-width: 768px) { .oe-rel--carrinho .oe-rel__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } .oe-rel--carrinho .oe-rel__link { grid-template-columns: minmax(0, 1fr); text-align: center; } .oe-rel--carrinho .oe-rel__img { grid-row: auto; width: 100%; height: auto; aspect-ratio: 1 / 1; } } @media (prefers-reduced-motion: reduce) { .oe-rel__link { transition: none; } }