/*
* Página de produto — só o que não existe na home nem no woo.css.
*
* Arquivo próprio, e não mais um bloco no woo.css, por dois motivos: carrega
* apenas em is_product(), e mantém a PDP fora do arquivo que outras frentes
* estão editando ao mesmo tempo.
*/
/* Autor e pagamento no resumo -------------------------------------- */
/*
* A margem do título e a do preço são fixadas aqui, e não herdadas do
* Storefront, porque agora existe uma linha logo abaixo de cada um: com o
* espaçamento padrão o autor flutua longe do título e a linha do Pix parece
* pertencer ao botão de compra, não ao preço.
*/
.single-product div.product .product_title {
margin-bottom: var(--sp-2);
font-family: var(--font-display);
}
.coe-pdp-autor {
margin: 0 0 var(--sp-4);
font-family: var(--font-ui);
font-size: 16px;
color: var(--ink-muted);
}
.coe-pdp-autor__rotulo {
font-size: 14px;
}
.coe-pdp-autor__nome {
color: var(--navy);
font-weight: 600;
text-decoration: none;
}
a.coe-pdp-autor__nome:hover,
a.coe-pdp-autor__nome:focus {
text-decoration: underline;
}
.single-product div.product p.price {
margin-bottom: var(--sp-2);
}
.coe-pdp-pagamento {
display: flex;
flex-direction: column;
margin: 0 0 var(--sp-4);
font-family: var(--font-ui);
line-height: 1.5;
}
.coe-pdp-pagamento__parcela {
font-size: 14px;
color: var(--ink-muted);
}
/* Mesma hierarquia do card: o Pix em navy, a parcela em cinza. É o único
gatilho comercial da dupla e some se receber o mesmo peso. */
.coe-pdp-pagamento__pix {
font-size: 14px;
font-weight: 600;
color: var(--navy);
}
/*
* A sinopse é o texto corrido mais longo da página e vinha sem limite de
* medida: 101 caracteres por linha na coluna de 697px, contra os 62ch que o
* tema já usa na bio do autor. O problema cresceu junto com a correção da
* migração — enquanto o resumo era cortado em 400 caracteres, quase nenhum
* título chegava a três linhas; inteiros, chegam a dez, e nessa medida o olho
* erra a volta de linha.
*/
.single-product div.product .woocommerce-product-details__short-description {
max-width: 62ch;
line-height: 1.7;
}
/*
* O zoom da galeria injeta uma cópia ampliada da capa com a largura natural
* da imagem — 692px sobre uma galeria de 482. Sem recorte no pai, ela some
* por baixo do resumo ao passar o mouse. O `overflow` é o que a mantém dentro
* do quadro; encolher a cópia acabaria com o efeito, que é justamente ampliar.
*/
.single-product div.product .woocommerce-product-gallery__image {
overflow: hidden;
}
/* Ficha técnica --------------------------------------------------- */
.coe-ficha {
margin: var(--sp-6) 0 0;
padding: var(--sp-4) 0 0;
border-top: 1px solid var(--line);
font-family: var(--font-ui);
font-size: 14px;
line-height: 1.6;
}
.coe-ficha__linha {
display: flex;
gap: var(--sp-3);
padding: var(--sp-1) 0;
}
.coe-ficha__rotulo {
flex: 0 0 34%;
max-width: 160px;
margin: 0;
color: var(--ink-muted);
}
.coe-ficha__valor {
margin: 0;
color: var(--ink);
}
/* "aprox." não é nota de rodapé decorativa: sinaliza dado calculado, não
medido. Fica ao lado do valor, menor, e explica no title. */
.coe-ficha__nota {
margin-left: var(--sp-1);
color: var(--ink-muted);
font-size: 12px;
cursor: help;
}
/* Minibio do autor ------------------------------------------------ */
/*
* O recuo lateral é da própria seção, não do `.coe-container` de dentro.
*
* A seção tem fundo tintado, então a borda dela é visível — e o `.coe-container`
* zera o `padding-inline` acima de 1440px, onde a caixa já bate no limite de
* 1280px. Medido a 1495px em 07/09/2026: caixa e título começavam os dois em
* 123,5 e terminavam os dois em 1371,5, com o texto encostado nos dois lados.
* Abaixo de 1440 o container dava 16px, que numa caixa tintada ainda é pouco.
*
* Com o recuo aqui, os 32px de cima e de baixo passam a valer também nas
* laterais, e o resultado é o mesmo dos dois lados do breakpoint.
*/
.coe-autor-bio {
margin-top: var(--sp-12);
padding: var(--sp-8);
background-color: var(--paper-2);
}
/* Sem isto os dois recuos somam abaixo de 1440px e a caixa fica com 48px. */
.coe-autor-bio > .coe-container {
padding-inline: 0;
}
.coe-autor-bio__corpo {
display: flex;
gap: var(--sp-6);
align-items: flex-start;
margin-top: var(--sp-4);
}
.coe-autor-bio__retrato {
flex: 0 0 120px;
}
/* Mesmo arco da home, na escala do retrato — a forma é da marca, não da
seção, então repete em qualquer lugar que mostre pessoa. */
.coe-autor-bio__img {
display: block;
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 999px 999px 8px 8px;
}
.coe-autor-bio__texto {
flex: 1 1 auto;
max-width: 62ch;
}
/*
* Sem retrato, a medida de leitura afrouxa.
*
* Os 62ch acima são a medida certa para a coluna que divide a linha com o
* retrato de 120px. Quando não há foto — e hoje é o caso de 72 dos 72 autores
* cadastrados — a coluna fica sozinha numa caixa de 1216px e sobra metade dela
* vazia.
*
* 75ch é o teto de conforto para texto corrido; passar disso o olho perde a
* volta da linha. Ou seja: a caixa não fica cheia, e não deve ficar. O que sai
* é o vão que parecia erro de layout, não o respiro que a leitura pede.
*/
.coe-autor-bio__corpo--sem-retrato .coe-autor-bio__texto {
max-width: 75ch;
}
.coe-autor-bio__nome {
margin: 0 0 var(--sp-2);
font-family: var(--font-display);
font-size: 22px;
}
.coe-autor-bio__nome a {
color: var(--navy);
text-decoration: none;
}
.coe-autor-bio__nome a:hover {
text-decoration: underline;
}
.coe-autor-bio__resumo {
margin: 0 0 var(--sp-4);
color: var(--ink);
font-size: 15px;
line-height: 1.65;
}
/* ==========================================================================
Área de compra
Tudo aqui é chrome do WooCommerce que o tema nunca tinha alcançado: o
arquivo cobria só o que a PDP ganhou de novo — ficha, minibio, autor,
parcelamento. O botão vinha com `button alt` do Storefront e mais nada,
o que o deixava #333 cinza-chumbo, enquanto o card da vitrine usa o laranja
da marca para o mesmo gesto. A página onde a compra acontece era a única
sem a cor de compra.
Especificidade: o Storefront escreve `.woocommerce button.button.alt`, que
pesa (0,3,1). Os seletores abaixo carregam página e produto para passar
disso — sem `!important`, que só empurraria o problema para a próxima
regra.
========================================================================== */
.single-product div.product form.cart {
display: flex;
align-items: stretch;
justify-content: flex-start;
gap: var(--sp-3);
padding-inline: 0;
/*
* Zero embaixo: o espaço depois do botão vinha do bloco de SKU e categoria
* que saiu daqui, e sem ele sobrava um vão de quase 60px antes da linha
* das avaliações. Quem afasta agora é o `margin-top` de `.woocommerce-tabs`.
*/
margin-bottom: 0;
}
/*
* O clearfix do Storefront tem de sair antes do flex.
*
* O formulário carrega `::before` e `::after` com `content: ''` para limpar o
* float do seletor de quantidade. Em container flex, pseudo-elemento com
* conteúdo vira item de flex: dois itens de largura zero, um em cada ponta,
* cada um consumindo um `gap`. O resultado eram 12px de recuo antes da
* quantidade e 12px sobrando depois do botão — a linha de compra saía
* desalinhada da ficha logo acima, e o botão nunca fechava a direita.
*
* Sem float, não há o que limpar.
*/
.single-product div.product form.cart::before,
.single-product div.product form.cart::after {
content: none;
}
.single-product div.product form.cart .quantity {
margin: 0;
float: none;
}
.single-product div.product form.cart .quantity .qty {
width: 76px;
height: var(--input-h);
padding-inline: var(--sp-2);
border: 1px solid var(--line);
border-radius: var(--radius);
background-color: var(--paper);
font-family: var(--font-ui);
font-size: 16px;
font-weight: 600;
line-height: 1;
color: var(--ink);
text-align: center;
}
.single-product div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button.button.alt.single_add_to_cart_button {
flex: 1 1 0;
/*
* O CTA media 184 × 40 no celular — meia largura de tela, e 40px contra os
* 44 que o próprio token manda. Crescendo com a linha, sobra o que a
* quantidade não usa.
*/
max-width: 360px;
height: var(--btn-h);
padding-inline: var(--sp-8);
border: 0;
border-radius: var(--radius);
background-color: var(--orange);
font-family: var(--font-ui);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.2px;
line-height: 1;
color: var(--ink);
}
.single-product div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart button.button.alt.single_add_to_cart_button:hover {
background-color: var(--orange-hover);
color: var(--ink);
}
/* ==========================================================================
Amostra em PDF
Fica logo abaixo do botão de comprar e não disputa com ele. O CTA é laranja
cheio; este é texto com ícone, sublinhado só no hover. Dois pesos visuais
diferentes na mesma coluna, e não dois botões brigando — quem chegou para
comprar não deve tropeçar num segundo alvo do mesmo tamanho.
========================================================================== */
.coe-amostra {
display: inline-flex;
align-items: baseline;
gap: var(--sp-2);
margin-top: var(--sp-4);
color: var(--navy);
font-family: var(--font-ui);
font-size: 15px;
line-height: 1.4;
text-decoration: none;
}
/*
* O ícone alinha pelo texto, não pela linha de base — glifo e desenho têm
* métricas diferentes, e `align-items: baseline` no pai empurraria o traço
* do livro dois pixels abaixo da palavra.
*/
.coe-amostra .coe-icone {
align-self: center;
flex: 0 0 auto;
}
.coe-amostra__rotulo {
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: transparent;
transition: text-decoration-color .12s ease;
}
.coe-amostra__peso {
color: var(--ink-muted);
font-size: 13px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.coe-amostra:hover .coe-amostra__rotulo,
.coe-amostra:focus-visible .coe-amostra__rotulo {
text-decoration-color: currentColor;
}
.coe-amostra:focus-visible {
outline: 2px solid var(--navy);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
.coe-amostra__rotulo {
transition: none;
}
}
@media (max-width: 767px) {
/*
* No celular o rótulo e o peso quebram em duas linhas se ficarem na mesma:
* "Ler as primeiras 33 páginas" já ocupa a largura toda em 390px. O peso
* desce e o ícone segura a primeira linha.
*/
.coe-amostra {
flex-wrap: wrap;
row-gap: 2px;
}
.coe-amostra__peso {
flex-basis: 100%;
padding-left: calc(20px + var(--sp-2));
}
}
/* ==========================================================================
Abas
========================================================================== */
/*
* Na maioria dos títulos restou uma aba só, "Avaliações": a "Informação
* adicional" saiu porque repetia peso e dimensões da ficha, e discordava dela
* na ordem. Sete títulos ainda têm "Descrição", porque a migração preservou o
* texto que não deu para classificar.
*
* Daí a regra ter dois estados, e não um. Esconder a lista sempre parecia
* limpeza e era defeito: com duas abas, o JS do WooCommerce mostra só o
* primeiro painel e mantém o segundo em `display: none` — sem a lista para
* clicar, as avaliações desses sete ficavam inalcançáveis.
*
* Com duas ou mais abas, a lista aparece e o título do painel some, senão o
* mesmo texto sai duas vezes seguidas. Com uma aba só, o contrário: a lista
* some, porque botão que já está selecionado não é escolha, e o `` do
* painel assume o papel de título — heading de verdade, que mantém a
* hierarquia da página, contra um `
` que não é heading nenhum.
*
* Onde `:has()` não existir, cai no primeiro estado: aba única visível. Fica
* feio e continua funcionando, que é a ordem certa das prioridades.
*/
.single-product .woocommerce-tabs {
margin-top: var(--sp-8);
border-top: 1px solid var(--line);
padding-top: var(--sp-8);
}
/*
* O painel da aba volta a ocupar a linha inteira.
*
* O Storefront monta as abas em duas colunas: a lista de abas `float: left` com
* 30,4% e o painel `float: right` com 65,2%. Aqui a lista de abas some quando
* sobra uma aba só — é o caso da PDP, que tem apenas avaliações —, e o painel
* continuava recuado como se a coluna da esquerda estivesse lá.
*
* Medido a 1495px em 07/09/2026: o bloco de avaliações começava em 557,6
* enquanto a galeria, a minibio e os relacionados começavam em 123,5. Eram
* 434px de vazio à esquerda de "Avaliações", contra nada.
*
* `float: none` sozinho não bastaria: sem zerar a largura, o painel ficaria
* alinhado à esquerda mas ainda com 65,2% da linha.
*/
.single-product .woocommerce-tabs > .panel {
float: none;
width: 100%;
}
.single-product .woocommerce-tabs ul.tabs {
display: flex;
gap: var(--sp-6);
margin: 0 0 var(--sp-6);
padding: 0;
list-style: none;
}
.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs::after,
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after {
content: none;
}
.single-product .woocommerce-tabs ul.tabs li {
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.single-product .woocommerce-tabs ul.tabs li a {
display: inline-block;
padding: 0 0 var(--sp-2);
border-bottom: 2px solid transparent;
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
color: var(--ink-muted);
}
.single-product .woocommerce-tabs ul.tabs li.active a {
border-bottom-color: var(--orange);
color: var(--ink);
}
.single-product .woocommerce-tabs .panel {
margin: 0;
padding: 0;
border: 0;
}
/* Com aba visível, o título do painel repetiria o rótulo dela. */
.single-product .woocommerce-tabs .panel > h2,
.single-product .woocommerce-tabs .woocommerce-Reviews-title {
display: none;
}
.single-product .woocommerce-tabs:has(ul.tabs li:only-child) ul.tabs {
display: none;
}
.single-product .woocommerce-tabs:has(ul.tabs li:only-child) .panel > h2,
.single-product .woocommerce-tabs:has(ul.tabs li:only-child) .woocommerce-Reviews-title {
display: block;
margin: 0 0 var(--sp-6);
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
color: var(--ink);
}
/*
* "Não há avaliações ainda." sai como aviso azul do WooCommerce, cor que não
* existe na paleta. Não é erro nem alerta: é o estado normal de um título
* recém-publicado.
*/
.single-product .woocommerce-noreviews,
.single-product .woocommerce-Reviews .woocommerce-info {
margin: 0 0 var(--sp-6);
padding: var(--sp-4);
border: 0;
border-left: 3px solid var(--line);
border-radius: 0;
background-color: var(--paper-2);
font-size: 15px;
color: var(--ink-muted);
}
.single-product .woocommerce-noreviews::before,
.single-product .woocommerce-Reviews .woocommerce-info::before {
content: none;
}
/* ==========================================================================
Produtos relacionados
A seção era Storefront puro: nenhuma regra do tema a alcançava.
========================================================================== */
/*
* Colava na minibio. Medido a 1495px em 07/09/2026: o topo dos relacionados
* caía exatamente na base do card do autor, 0px entre os dois, enquanto o vão
* entre as avaliações e a minibio era de 48px. O respiro passa a ser o mesmo
* dos outros blocos da página.
*/
.single-product .related.products {
margin-top: var(--sp-12);
}
/*
* O título vinha do Storefront em `1.618em` — 22,65px — e centralizado. Era o
* único título centralizado da página: "Sobre quem escreveu" e "Avaliações"
* são os dois alinhados à esquerda, em 32 e 24px. Fora da escala e fora do
* eixo, o bloco lia como se fosse de outro layout.
*
* 24px é o mesmo tamanho do título das avaliações, que é o vizinho de cima e
* o par natural dele na hierarquia.
*/
/*
* O `:first-child` no seletor não é enfeite: quem centraliza é
* `.storefront-full-width-content .related.products > h2:first-child` do
* `woocommerce.css`, acima de 768px — (0,4,1). Sem o `:first-child` esta regra
* fica em (0,3,1) e perde, que foi o que aconteceu na primeira tentativa: o
* celular obedecia e o desktop seguia centralizado. Empatando a conta, vence a
* ordem de carregamento, e o `pdp.css` vem depois.
*/
.single-product .related.products > h2:first-child {
margin: 0 0 var(--sp-6);
font-size: 24px;
text-align: start;
}
/* ==========================================================================
Formulário de avaliação
O bloco nunca tinha passado pelo tema: os campos vinham com o cinza
`#f2f2f2` do Storefront sobre o papel `#f6f6ec` da marca — 1,03:1 de
contraste, e ainda cinza frio sobre creme quente, que é o pior par possível.
Sem borda e sem raio, o campo não tinha nem contorno para se anunciar. O
botão saía `#eee` em Source Sans Pro, fonte que não existe neste tema.
O destaque não vem de cor nova. Vem da mesma hierarquia de duas camadas que
a minibio do autor já usa: a caixa tintada em `--paper-2` separa o bloco da
página, e o campo em branco separa o campo da caixa. Branco em campo de
formulário já é vocabulário daqui — é o que a busca do cabeçalho usa no
celular.
========================================================================== */
.single-product #review_form_wrapper {
padding: var(--sp-8);
border: 1px solid var(--line);
border-radius: var(--radius);
background-color: var(--paper-2);
}
/*
* O `#respond` do Storefront tem 1,618em de recuo próprio — 22,65px medidos.
* Com o card por fora, os dois somavam: num celular de 375px o campo sobrava
* com 231px entre recuos de 55,6px de cada lado. Quem recua agora é o card, um
* nível acima.
*/
.single-product #respond {
padding: 0;
}
/*
* O `#reply-title` é um ``: sem `display: block` ele fica com altura 0 e
* o título não abre espaço nenhum acima do formulário.
*/
.single-product #reply-title {
display: block;
margin: 0 0 var(--sp-2);
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
color: var(--ink);
}
.single-product #commentform .comment-notes {
margin: 0 0 var(--sp-6);
font-family: var(--font-ui);
font-size: 14px;
color: var(--ink-muted);
}
.single-product #commentform label {
display: block;
margin-bottom: var(--sp-2);
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
color: var(--ink);
}
.single-product #commentform input[type="text"],
.single-product #commentform input[type="email"],
.single-product #commentform textarea {
width: 100%;
padding: 0 var(--sp-4);
border: 1px solid var(--line);
border-radius: var(--radius);
background-color: #fff;
font-family: var(--font-ui);
font-size: 16px;
color: var(--ink);
}
.single-product #commentform input[type="text"],
.single-product #commentform input[type="email"] {
height: var(--input-h);
}
/*
* 16px é o mínimo que impede o iOS de dar zoom ao focar o campo — vale para a
* caixa de texto tanto quanto para os inputs de uma linha.
*/
.single-product #commentform textarea {
min-height: 168px;
padding: var(--sp-4);
line-height: 1.6;
resize: vertical;
}
.single-product #commentform input[type="text"]:focus,
.single-product #commentform input[type="email"]:focus,
.single-product #commentform textarea:focus {
border-color: var(--navy);
outline: 2px solid var(--navy);
outline-offset: -2px;
}
/*
* A caixa de "salvar meus dados" é a única `label` do formulário que acompanha
* um checkbox em vez de titular um campo. A regra acima a deixava em bloco e em
* 600 — peso de título numa frase de rodapé, e a caixa empilhada acima do
* texto em vez de ao lado dele.
*/
.single-product #commentform .comment-form-cookies-consent {
display: flex;
align-items: flex-start;
gap: var(--sp-2);
clear: both;
}
.single-product #commentform .comment-form-cookies-consent label {
margin-bottom: 0;
font-weight: 400;
}
/*
* As estrelas.
*
* O que as apaga não é a cor, é `opacity: .25` no `::before` do Storefront —
* medido. Trocar só a cor não muda nada: o cinza dele (#6d6d6d) e a tinta
* apagada do tema (#6b6a72) têm praticamente a mesma clareza, e a um quarto
* de opacidade as duas somem igual. É o campo obrigatório que abre o
* formulário; sumir não é opção.
*
* Opacidade cheia, tinta apagada quando vazia, navy quando escolhida. E 22px
* no lugar de 14 — a estrela é o único controle do formulário que não é um
* campo, e a 14px o alvo tinha 14 × 14, um terço do mínimo do contrato.
*/
.single-product .comment-form-rating .stars a {
font-size: 22px;
padding-block: var(--sp-2);
}
.single-product .comment-form-rating .stars a::before {
opacity: 1;
color: var(--ink-muted);
}
.single-product .comment-form-rating .stars:hover a::before,
.single-product .comment-form-rating .stars a:focus-visible::before,
.single-product .comment-form-rating .stars.selected a.active::before,
.single-product .comment-form-rating .stars.selected a:not(.active)::before {
color: var(--navy);
}
/* Depois da escolhida, as estrelas voltam ao vazio — senão as cinco ficam
cheias e a nota não se lê. */
.single-product .comment-form-rating .stars.selected a.active ~ a::before {
color: var(--ink-muted);
}
/* O mesmo botão de serviço da "Minha conta": navy cheio, não o laranja de
compra — enviar avaliação não é uma ação de compra. */
.single-product #commentform .form-submit input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--btn-h);
padding-inline: var(--sp-8);
border: 0;
border-radius: var(--radius);
background-color: var(--navy);
font-family: var(--font-ui);
font-size: 15px;
font-weight: 600;
line-height: 1;
color: var(--paper);
cursor: pointer;
}
.single-product #commentform .form-submit input[type="submit"]:hover,
.single-product #commentform .form-submit input[type="submit"]:focus {
background-color: var(--navy-hover);
color: var(--paper);
}
/* ==========================================================================
Gatilho de zoom da galeria
========================================================================== */
/*
* O gatilho é o caractere 🔍. Com o script de emoji desligado (ver
* inc/produto.php) ele deixa de virar imagem do CDN, mas continua sendo um
* emoji do sistema — colorido, redondo, fora da marca. `font-size: 0` apaga o
* caractere e a máscara desenha a mesma lupa do campo de busca do cabeçalho.
*/
.single-product .woocommerce-product-gallery__trigger {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 999px;
background-color: var(--paper);
box-shadow: var(--shadow-card);
font-size: 0;
line-height: 0;
text-indent: 0;
}
.single-product .woocommerce-product-gallery__trigger::before,
.single-product .woocommerce-product-gallery__trigger::after {
content: "";
}
.single-product .woocommerce-product-gallery__trigger::after {
width: 20px;
height: 20px;
background-color: var(--navy);
-webkit-mask: var(--coe-lupa) center / contain no-repeat;
mask: var(--coe-lupa) center / contain no-repeat;
}
.single-product .woocommerce-product-gallery__trigger:hover {
background-color: var(--paper-2);
}
@media (max-width: 767px) {
/*
* 32px de cada lado numa caixa de 343px deixariam 279px de texto. No
* celular o recuo cai para 24px — a caixa já está afastada 16px da borda
* da tela pelo container da página, e o que a linha precisa é de largura.
*/
.coe-autor-bio {
padding: var(--sp-6);
}
/* Mesma conta do card da minibio, logo acima. */
.single-product #review_form_wrapper {
padding: var(--sp-6);
}
.coe-autor-bio__corpo {
flex-direction: column;
gap: var(--sp-4);
}
.coe-ficha__rotulo {
flex-basis: 42%;
}
/*
* O h1 saía com 36,65px, herdado do Storefront. A home usa 24px no h2 no
* mesmo breakpoint, então o título da PDP estava meia escala acima de
* tudo o que existe em volta dele.
*/
.single-product div.product .product_title {
font-size: 28px;
}
/* Sem teto: no celular o que sobra da linha depois da quantidade é pouco,
e limitar o botão o devolveria para a meia largura de antes. */
.single-product div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button.button.alt.single_add_to_cart_button {
max-width: none;
}
.single-product .woocommerce-tabs ul.tabs li a {
font-size: 20px;
}
}
/* ==========================================================================
Cálculo de frete
Um simulador só na página: o do plugin "Simulador de Frete para
WooCommerce", que lista todas as opções da zona de uma vez. Ele entra na
prioridade 35 do resumo do produto, logo abaixo da linha de compra (30).
A calculadora do Melhor Envio é injetada DENTRO do `