/* ========================================================================== Chase — página de produto do design system Tradução de `referencia/loja/ProductScreen.jsx` e dos componentes que ela usa: `ProductMedia.jsx`, `Badge.jsx`, `PriceBlock.jsx`, `QuantityStepper.jsx`, `Tabs.jsx`, `Card.jsx` e `Button.jsx`. Cada valor aqui saiu do objeto `style` do componente correspondente. Carrega só na página de produto, e obedece o interruptor `CHASE_DS_ATIVO`. ── O QUE O PHP JÁ RESOLVEU, E POR QUE NÃO DAVA AQUI ── A ordem da coluna da direita e a posição das abas são hook, não CSS: o WooCommerce imprime as abas fora do resumo, e o simulador de frete nasce dentro do formulário de compra, antes do botão. Ver `chase_ds_produto()`. O que sobra para o CSS é o desenho — e a linha do botão de comprar, que é grade dentro do formulário. ── O QUE FICA DE FORA, E POR QUÊ ── O protótipo põe um selo "Lacrado" sobre a foto e quatro miniaturas fixas (frente, lateral, verso, detalhe). Nenhum dos dois tem lastro no catálogo: não existe atributo que diga "lacrado", e a quantidade de fotos é a que o produto tiver. A tarja de oferta, que é real, ocupa aquele canto; as miniaturas viram grade de quatro colunas quando existirem. ========================================================================== */ /* ========================================================================== POR QUE TODO SELETOR DAQUI COMECA COM `body` O `woocommerce.css` do Storefront carrega DEPOIS deste arquivo, e ele escreve os seletores desta tela na mesma forma que a nossa: .single-product div.product .woocommerce-product-gallery { width: ... } .single-product div.product form.cart::before { content: "" } Sao (0,3,1) e (0,3,2) — identicos aos que escreveriamos aqui. Empate com ele e derrota, porque quem carrega por ultimo vence. O `body` na frente acrescenta um elemento e desfaz o empate sem `!important`. E a mesma saida ja registrada no projeto para o `body h1` da ponte e para o `body.home #masthead`. Medido antes de fazer isso: a galeria ficou com 248px numa coluna de 603, o resumo com 290 numa de 548, e o clearfix do formulario continuou abrindo uma quarta linha de 0px. ========================================================================== */ /* ========================================================================== 1. Contêiner e as duas colunas Do ProductScreen: `max-width: var(--container-max)` com `padding: var(--space-6) var(--container-pad) 0`, a trilha em cima, e `gridTemplateColumns: '1.1fr 1fr'` com `gap: var(--space-10)` e `marginTop: var(--space-6)`. O contêiner e a trilha repetem o que o `listagem.css` faz, pelo mesmo motivo: são dois elementos irmãos — `.storefront-breadcrumb` e `#content` — e o `.col-full` do Storefront é `content-box`. Repetir aqui é deliberado; os dois arquivos nunca carregam juntos, então um seletor compartilhado moraria no `componentes.css` e valeria em telas que ainda não foram traduzidas. A COLUNA MAIOR É A DA FOTO. No Storefront é o contrário: a galeria fica com 41,17% e o resumo com 51,76%, medido em 486px contra 625px. O handoff inverte — 1.1fr para a imagem, 1fr para o texto. ========================================================================== */ .storefront-breadcrumb > .col-full, #content > .col-full { box-sizing: border-box; max-width: var(--container-max); margin: 0 auto; padding-inline: var(--container-pad); } .storefront-breadcrumb > .col-full { padding-top: var(--space-6); } .storefront-breadcrumb { background: transparent; border: 0; margin: 0; padding: 0; } .woocommerce-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; font-size: var(--text-sm); color: var(--text-body); } .woocommerce-breadcrumb a { color: var(--text-link); text-decoration: none; } .woocommerce-breadcrumb a:hover, .woocommerce-breadcrumb a:focus-visible { color: var(--text-link-hover); text-decoration: underline; } .woocommerce-breadcrumb .breadcrumb-separator { color: var(--neutral-300); } /* O `overflow: hidden` do Storefront em `body.single-product div.product` NÃO sai — é ele que contém as colunas flutuantes, e sem ele as abas subiam por cima. Com grade os floats deixam de existir, mas a regra fica: ela também é o que recorta a tarja de oferta no canto arredondado, comportamento já ajustado na 1.9.2 e que não vale refazer aqui. */ body.single-product div.product { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-10); align-items: start; margin-top: var(--space-6); } /* O `float` e a largura em porcentagem que o Storefront poe nos dois precisam ser desfeitos: item de grade continua obedecendo `width`. O `body` na frente e o que ganha do empate — ver a nota no topo do arquivo. */ body.single-product div.product > .woocommerce-product-gallery { grid-column: 1; grid-row: 1; float: none; width: auto; margin: 0; } body.single-product div.product > .summary { grid-column: 2; grid-row: 1; float: none; width: auto; margin: 0; } /* A TARJA DE OFERTA E FILHA DIRETA DO `div.product`, e virou item de grade. Sem lugar declarado, a colocacao automatica a mandou para uma linha depois do resumo — medida em y=1406, do lado direito, atravessando 549px. Ela pertence ao canto da foto. `position: absolute` a tira do fluxo da grade; o `grid-area` continua sendo necessario para dizer em qual celula ela se ancora. O bloco de contencao e o proprio `div.product`, que o Storefront ja declara `position: relative`. O canto externo quadrado e o recorte pelo card sao da 1.5.4 e seguem valendo — o que muda aqui e so a ancoragem. */ body.single-product div.product > .onsale { grid-column: 1; grid-row: 1; position: absolute; z-index: 1; margin: 0; } /* Tudo o que vem depois das duas colunas ocupa a largura inteira: o vídeo, a faixa de confiança e a paginação entre produtos. */ body.single-product div.product > .chase-video, body.single-product div.product > .chase-produto__confianca, body.single-product div.product > .related, body.single-product div.product > .up-sells { grid-column: 1 / -1; } /* O clearfix do Storefront vira item de grade e abre uma linha vazia — a mesma armadilha já paga em `ul.products` e no `.col-full` da listagem. */ body.single-product div.product::before, body.single-product div.product::after { content: none; } @media (max-width: 768px) { body.single-product div.product { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } body.single-product div.product > .woocommerce-product-gallery, body.single-product div.product > .summary { grid-column: 1; } body.single-product div.product > .woocommerce-product-gallery { grid-row: 1; } body.single-product div.product > .summary { grid-row: 2; } } /* ========================================================================== 2. A coluna do resumo Do ProductScreen: `display: flex`, `flexDirection: 'column'`, `gap: var(--space-4)`. O `gap` substitui as margens que o WooCommerce e o Storefront põem em cada filho. Sem zerá-las, o espaço vira a soma dos dois e a coluna estica — `p.price` sozinho traz 1,618em de margem inferior. ========================================================================== */ body.single-product div.product > .summary { display: flex; flex-direction: column; gap: var(--space-4); } body.single-product div.product > .summary > * { margin-top: 0; margin-bottom: 0; } /* Do `` da marca: `text-xs`, caixa alta, `tracking-caps`, `--text-muted`, peso 600. Aqui ele é um link para a categoria, e não um `` — a informação já está na tela e levar para a categoria é de graça. Por isso o `align-self`: sem ele o link esticaria pela coluna inteira e a área clicável iria muito além da palavra. */ .chase-produto__marca { align-self: flex-start; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); font-weight: var(--weight-semibold); text-decoration: none; } .chase-produto__marca:hover, .chase-produto__marca:focus-visible { color: var(--text-link); } /* Do `

`: `text-3xl` em Outfit. A FAMÍLIA PRECISA SER REPETIDA AQUI, e a ponte não dá conta sozinha. Ela manda todo `body h1` para o Outfit, com (0,0,2); o nosso `woocommerce.css` declara `.woocommerce div.product .product_title { font-family: var(--font-primary) }`, que é (0,3,2) e vence. Resultado medido: o título do produto saía em IBM Plex Sans enquanto todos os outros títulos do site já estavam em Outfit. É a mesma armadilha do `components.css` que obrigou o `body h1` a existir — só que uma camada acima, e por isso ela escapou daquela correção. */ body.single-product div.product .product_title { font-family: var(--font-display); font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); margin: 0; } /* ========================================================================== 3. Selo de estoque Do `Badge.jsx`: `padding: '4px 10px'`, `radius-pill`, `text-xs`, `--weight-semibold`, caixa alta com `tracking-caps` e `nowrap`. Os tons `success`, `warning` e `danger` são fundo em `-50` e texto em `-500`. O `align-self` é pelo mesmo motivo do link da marca: numa coluna flex o filho estica por padrão, e um selo esticado deixa de ser selo. ========================================================================== */ .chase-selo { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); white-space: nowrap; } .chase-selo--success { background: var(--success-50); color: var(--success-500); } .chase-selo--warning { background: var(--warning-50); color: var(--warning-500); } .chase-selo--danger { background: var(--danger-50); color: var(--danger-500); } .chase-selo--neutral { background: var(--neutral-100); color: var(--neutral-700); } /* ========================================================================== 4. Preço e as linhas de pagamento Do `PriceBlock.jsx` no tamanho `lg`: valor em `--font-display` 700, 36px, `--tracking-tight`, `--text-strong`, `line-height: 1.1`. O preço anterior fica acima, em `text-sm` / `--text-subtle`, riscado. As linhas de parcelamento (`--text-muted`) e do Pix (`--success-500`, peso 600) vêm logo abaixo, com 2px de respiro cada. O preço, o parcelamento e o Pix são TRÊS irmãos na coluna, então o `gap` de 16px do resumo os separaria demais — no protótipo eles são um bloco só, com 2px entre as linhas. As margens negativas trazem os dois de volta para junto do preço sem precisar de um invólucro no PHP. As três famílias de seletor de preço do projeto não entram aqui: esta tela só tem a da página de produto. As outras duas seguem no `componentes.css`. ========================================================================== */ body.single-product div.product .summary > p.price { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 36px; letter-spacing: var(--tracking-tight); color: var(--text-strong); line-height: 1.1; } body.single-product div.product .summary > p.price del { display: block; font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-regular); letter-spacing: normal; color: var(--text-subtle); line-height: 1.5; opacity: 1; } /* O valor novo herda o tamanho grande e não carrega decoração própria. */ body.single-product div.product .summary > p.price ins { background: transparent; text-decoration: none; } /* AS DUAS LINHAS VIRARAM UM BLOCO SO, e a conta da margem mudou com isso. Antes eram dois `` soltos no resumo, e CADA UM era item do flex da coluna — por isso cada um precisava descontar o `gap` de 16 para sobrar os 2px do protótipo. Agora os dois moram dentro de `.chase-pagamento`, que é UM item de flex. O desconto do gap se aplica ao bloco, uma vez; o espaço entre as duas linhas é o `gap: 2px` do próprio bloco, declarado no `componentes.css`. O bloco é compartilhado com os dois cards, então o que é comum a ele mora lá. Aqui fica só o que é da página de produto. */ body.single-product div.product .summary > .chase-pagamento { margin-top: calc(2px - var(--space-4)); } /* ========================================================================== 5. A linha de comprar Do ProductScreen: `display: flex`, `gap: var(--space-3)`, `alignItems: 'center'`, com o passo a passo à esquerda e o botão em `flex: 1`. Abaixo vem o botão do WhatsApp e, por último, o cartão do frete. O FORMULÁRIO É UMA GRADE, e não um flex, porque ele tem QUATRO filhos e não dois: o simulador do Melhor Envio nasce primeiro — o plugin o imprime em `woocommerce_before_add_to_cart_button` — e precisa ir para o fim sem que o PHP mexa na configuração dele. Com grade, cada filho vai para a célula certa por nome, e a ordem do markup deixa de importar. Reordenar por `order` num flex daria o mesmo desenho, mas a ordem de foco continuaria a do markup: quem navega por teclado sairia do botão de comprar direto para o campo de CEP que está desenhado embaixo, e não é isso que a tela mostra. ========================================================================== */ body.single-product div.product form.cart { display: grid; grid-template-columns: auto minmax(0, 1fr); /* `center`, como o `alignItems` da linha no ProductScreen. Sem declarar, os dois esticavam para a altura da linha — o passo a passo de 46px virava 52 junto com o botao. */ align-items: center; gap: var(--space-3) var(--space-3); margin: 0; } /* Clearfix do Storefront de novo — aqui ele abria uma quarta linha de 0px no formulario. Terceira vez neste redesenho; primeira dentro de um `form`. */ body.single-product div.product form.cart::before, body.single-product div.product form.cart::after { content: none; } body.single-product div.product form.cart .quantity { grid-column: 1; grid-row: 1; margin: 0; } body.single-product div.product form.cart .single_add_to_cart_button { grid-column: 2; grid-row: 1; width: 100%; margin: 0; /* Do `Button.jsx`, tamanho `lg`: 14px 24px, `text-md`, `min-height: 52`, `radius-md`. O tema estava em 16px 32px, o que dava 58px de altura. */ padding: 14px 24px; min-height: 52px; font-size: var(--text-md); font-family: var(--font-display); font-weight: var(--weight-semibold); line-height: 1.2; border-radius: var(--radius-md); } body.single-product div.product form.cart .chase-produto__whatsapp { grid-column: 1 / -1; grid-row: 2; } /* Botão do WhatsApp para produto sem formulário: ele fica solto no resumo, e sem isto encolheria à largura do texto na coluna flex. */ body.single-product div.product > .summary > .chase-produto__whatsapp { width: 100%; } .chase-produto__whatsapp svg { width: 20px; height: 20px; flex-shrink: 0; display: block; } @media (max-width: 480px) { /* A 375px o passo a passo mais o botão não cabem lado a lado: sobrariam 147px para "Adicionar ao carrinho", que tem `white-space: nowrap`. */ body.single-product div.product form.cart { grid-template-columns: minmax(0, 1fr); } body.single-product div.product form.cart .quantity { grid-column: 1; /* Item de grade estica por padrão: sem isto o passo a passo ia de 126 para os 327px da coluna, e os dois botões ficavam nas pontas da tela. */ justify-self: start; } body.single-product div.product form.cart .single_add_to_cart_button { grid-column: 1; grid-row: 2; } body.single-product div.product form.cart .chase-produto__whatsapp { grid-row: 3; } body.single-product div.product form.cart .chase-produto__frete { grid-row: 4; } } /* ========================================================================== 6. Passo a passo da quantidade Do `QuantityStepper.jsx`: `inline-flex`, borda de 1px em `--border-default`, `radius-md`, fundo `--surface-card`, `overflow: hidden`. Botão de 44×44 sem borda e sem fundo, em `--blue-700` a 18px na família de display; desligado, vai para `--neutral-300`. O valor no meio ocupa no mínimo 36px, centrado, também na família de display. O `padding: 0` no botão é obrigatório: o Storefront aplica `padding: 9.9px 22.65px` em TODO `button`, e sem zerar o passo a passo sairia com 190px de largura. É a armadilha já registrada no projeto. ========================================================================== */ body.single-product div.product form.cart .quantity { display: inline-flex; align-items: center; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card); overflow: hidden; } .chase-qtd__btn { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--blue-700); font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 18px; line-height: 1; cursor: pointer; transition: background var(--duration-fast) var(--ease-standard); } .chase-qtd__btn:hover:not(:disabled), .chase-qtd__btn:focus-visible:not(:disabled) { background: var(--blue-50); color: var(--blue-700); } .chase-qtd__btn:disabled { color: var(--neutral-300); cursor: not-allowed; background: transparent; } /* O campo perde a moldura própria — quem desenha a caixa agora é o `.quantity` em volta. As setinhas nativas saem porque os dois botões fazem o mesmo trabalho, com área de toque de verdade. */ body.single-product div.product form.cart .quantity input.qty { width: 36px; min-width: 36px; height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: center; font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-base); color: var(--text-strong); appearance: textfield; -moz-appearance: textfield; } body.single-product div.product form.cart .quantity input.qty::-webkit-outer-spin-button, body.single-product div.product form.cart .quantity input.qty::-webkit-inner-spin-button { appearance: none; -webkit-appearance: none; margin: 0; } /* O foco desenha em volta da caixa inteira, e não do campo nu — sem isso o anel de foco aparecia por dentro da borda e ficava quase invisível. */ body.single-product div.product form.cart .quantity:focus-within { border-color: var(--border-brand); box-shadow: var(--ring); } body.single-product div.product form.cart .quantity input.qty:focus { outline: none; box-shadow: none; } /* ========================================================================== 7. Cartão do simulador de frete Do ProductScreen o bloco é um `Card` com `tone="sunken"` e `padding: var(--space-4)`: fundo `--surface-sunken`, `radius-lg`, sem sombra, com o campo e o botão numa linha de `gap: var(--space-2)` e a frase de apoio embaixo, em `text-sm` / `--text-muted`. O CONTEÚDO É DO MELHOR ENVIO, e o markup dele não muda: `#inputCep`, o botão que o próprio plugin cria, o carregador e a tabela de resultado. Só o desenho é nosso. Mexer na estrutura ali quebraria na próxima atualização do plugin, e é ela que fala com a API. O protótipo tem um botão "Calcular frete" ao lado do campo. O plugin calcula ao digitar o CEP completo, sem botão nenhum — então não há botão para estilizar, e inventar um que não faz nada seria pior que não ter. ========================================================================== */ /* O cartao e o invólucro que o PHP poe em volta; o contêiner do plugin fica nu por dentro dele. Separar os dois e o que permite a frase de apoio ficar DENTRO do cartao sem tocar no markup do Melhor Envio. */ body.single-product div.product .chase-produto__frete { box-sizing: border-box; grid-column: 1 / -1; grid-row: 3; display: flex; flex-direction: column; gap: 10px; background: var(--surface-sunken); border-radius: var(--radius-lg); padding: var(--space-4); } body.single-product div.product .chase-produto__frete-apoio { font-size: var(--text-sm); color: var(--text-muted); } body.single-product div.product .containerCalculator { box-sizing: border-box; background: transparent; padding: 0; margin: 0; } body.single-product div.product .containerCalculator .calculatorRow > .row, body.single-product div.product .containerCalculator .col-75 { width: 100%; max-width: none; margin: 0; padding: 0; float: none; } /* A frase "Simulação de frete" é o rótulo do campo. */ body.single-product div.product .containerCalculator .col-75 > p { margin: 0 0 6px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-strong); } /* Do `Input.jsx`, com o `minHeight: 40` que o ProductScreen pede neste ponto — é o único campo do handoff abaixo dos 44px, e ele está dentro de um cartão, não numa barra de ação. */ body.single-product div.product .containerCalculator input.iptCep { box-sizing: border-box; width: 100%; font-family: var(--font-body); font-size: var(--text-base); line-height: normal; color: var(--text-strong); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); /* O `Input.jsx` usa 12px 14px sempre; o `minHeight: 40` que o ProductScreen passa neste ponto nunca chega a governar, porque a soma ja da 46. */ padding: 12px 14px; min-height: 40px; margin: 0; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } body.single-product div.product .containerCalculator input.iptCep:focus { border-color: var(--border-brand); box-shadow: var(--ring); outline: none; } body.single-product div.product .containerCalculator .resultado-frete { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-body); } body.single-product div.product .containerCalculator .resultado-frete table { width: 100%; margin: 0; border-collapse: collapse; font-size: var(--text-sm); } body.single-product div.product .containerCalculator .resultado-frete td { padding: 8px 0; border-bottom: 1px solid var(--border-subtle); } body.single-product div.product .containerCalculator small { display: block; font-size: var(--text-sm); color: var(--text-muted); } /* ========================================================================== 8. Abas Do `Tabs.jsx`: flex com `gap: var(--space-6)` e uma borda de 1px embaixo. Cada aba é `padding: '12px 0'`, família de display, `--weight-semibold`, `text-base`, `--text-muted`; a ativa vai para `--text-strong` e ganha o traço amarelo por `inset 0 -3px 0`. O painel abre com `paddingTop: var(--space-4)`. As abas do WooCommerce são `
  • ` de uma `