/* =====================================================================
   A LOJA — o que o theme.json não sabe dizer.

   A ESTRUTURA é a da SHEIN (decisão do dono, 08/10/2026): a barra de
   benefícios clara no alto, a barra principal ESCURA com a marca, a
   busca grande e os atalhos, a linha de categorias; a lista com os
   filtros à esquerda e o preço em vermelho; o produto com a coluna de
   miniaturas, o preço grande, os chips de numeração e o botão cheio.

   As CORES são SEMPRE as do theme.json (--wp--preset--color--*), que são
   as do app do cliente (app/app.css): nada aqui inventa cor. A fonte é a
   do aparelho, e não há fonte nem ícone da internet — os ícones são SVG
   inline, desenhados no functions.php.
   ===================================================================== */

:root { color-scheme: light; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}
:focus-visible { outline: 3px solid var(--wp--preset--color--marca); outline-offset: 2px; }
img { height: auto; max-width: 100%; }
.screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; }

.cm-icone {
	width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor;
	stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- A VITRINE LIMPA (decisão do dono, 30/10/2026) ----------
   Muito branco, a foto manda. Os títulos em serifa do aparelho (Georgia,
   e no Android a Noto Serif — nada baixado da internet), o texto na fonte
   do aparelho, botões escuros e retos com a letra espaçada, e as fotos
   num fundo de papel quente (`moldura`), sem borda nem canto arredondado.
   As cores continuam as do theme.json; as três novas (névoa, moldura e
   linha fina) são neutras e não mudam a identidade do app. */

/* ---------- 1. a faixa de benefícios (fina, clara, texto apagado) ---------- */
.cm-beneficios { background: var(--wp--preset--color--nevoa); }
.cm-beneficios__lista {
	list-style: none; margin: 0 auto; padding: .5rem clamp(14px, 3vw, 44px);
	display: flex; justify-content: center; max-width: 1340px;
}
.cm-beneficios__lista li {
	display: flex; align-items: center; margin: 0; padding: 0 .9rem;
	font-size: var(--wp--preset--font-size--x-small); font-weight: 400; letter-spacing: .02em; white-space: nowrap;
	color: var(--wp--preset--color--texto-2);
}
.cm-beneficios__lista li .cm-icone { display: none; }
.cm-beneficios__lista li + li::before { content: "\00B7"; margin-right: 1.8rem; color: var(--wp--preset--color--texto-3); }
@media (max-width: 781px) {
	.cm-beneficios__lista li:not(:first-child) { display: none; }
}

/* ---------- 2. a barra principal: branca, a marca no centro ---------- */
.cm-cabecalho { z-index: 30; padding-top: .9rem; padding-bottom: .9rem; border-bottom: 1px solid var(--wp--preset--color--linha-fina); }
body.admin-bar .cm-cabecalho { top: 32px !important; }
@media (max-width: 782px) { body.admin-bar .cm-cabecalho { top: 46px !important; } }

/* Três colunas: a busca, a marca e os atalhos. A do meio tem o tamanho da
   marca e as das pontas dividem o resto — é o que deixa a marca no centro
   de verdade, por mais atalhos que a direita tenha. */
.cm-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .75rem 2rem; }
.cm-logo { margin: 0; justify-self: center; }
.cm-logo img { display: block; width: 150px; }
.cm-logo a { display: block; }

.cm-busca { min-width: 0; max-width: 340px; }
.cm-busca .wp-block-search { margin: 0; }
.cm-busca .wp-block-search__inside-wrapper {
	border: 0 !important; border-bottom: 1px solid var(--wp--preset--color--linha-forte) !important; border-radius: 0;
	background: transparent; padding: 0; gap: 6px;
}
.cm-busca .wp-block-search__inside-wrapper:focus-within { border-bottom-color: var(--wp--preset--color--contrast) !important; }
.cm-busca .wp-block-search__input {
	border: 0 !important; background: transparent; font: inherit; font-size: .9rem;
	padding: .45rem 0; min-height: 40px; color: var(--wp--preset--color--texto);
}
.cm-busca .wp-block-search__input:focus { outline: none; }
.cm-busca .wp-block-search__input::placeholder { color: var(--wp--preset--color--texto-3); }
.cm-busca .wp-block-search__button {
	background: transparent; color: var(--wp--preset--color--contrast);
	border: 0; border-radius: 0; padding: 0 .25rem; min-height: 40px; min-width: 40px; margin: 0;
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.cm-busca .wp-block-search__button:hover,
.cm-busca .wp-block-search__button:focus-visible { color: var(--wp--preset--color--marca); background: transparent; }
.cm-busca .wp-block-search__button svg { fill: currentColor; width: 20px; height: 20px; }

.cm-atalhos { display: flex; align-items: center; justify-content: flex-end; gap: 1.4rem; }
.cm-atalho {
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	color: var(--wp--preset--color--contrast); font-size: .68rem; font-weight: 400;
	letter-spacing: .06em; text-decoration: none;
}
.cm-atalho .cm-icone { width: 22px; height: 22px; stroke-width: 1.5; }
.cm-atalho:hover, .cm-atalho:focus-visible { color: var(--wp--preset--color--marca); text-decoration: none; }

@media (max-width: 781px) {
	.cm-cabecalho { padding-top: .55rem; padding-bottom: .6rem; }
	.cm-topo { grid-template-columns: auto minmax(0, 1fr); gap: .5rem .75rem; }
	.cm-logo { justify-self: start; grid-column: 1; grid-row: 1; }
	.cm-logo img { width: 112px; }
	.cm-atalhos { grid-column: 2; grid-row: 1; gap: .9rem; }
	.cm-busca { grid-column: 1 / -1; grid-row: 2; max-width: none; }
	/* No celular os atalhos ficam SÓ com o ícone: com o rótulo, os cinco
	   (Lojas, Retirada, WhatsApp, Entrar e Carrinho) passavam por cima da
	   marca a 375 px. O rótulo continua lá para o leitor de tela — é ele o
	   nome do link —, só fora da vista. */
	.cm-atalho > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
	.cm-atalho { min-width: 32px; min-height: 40px; justify-content: center; }
	/* O bloco de imagem escreve style="width:150px" NA TAG, e o atributo
	   vence a folha — sem o !important a marca passava por cima dos ícones. */
	.cm-logo img { width: 112px !important; }
	.cm-atalhos .cm-sacola__n { left: auto; right: -2px; margin-left: 0; }
}

/* ---------- 3. a linha de categorias (o `grupo` do Seta, lido da loja) ---------- */
.cm-categorias { background: var(--wp--preset--color--branco); border-bottom: 1px solid var(--wp--preset--color--linha-fina); }
.cm-categorias__miolo { max-width: 1340px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 44px); }
.cm-categorias ul {
	list-style: none; margin: 0 auto; padding: 0; display: flex; gap: 2.2rem; width: max-content; max-width: 100%;
	overflow-x: auto; scrollbar-width: none; font-size: .78rem; font-weight: 400;
	letter-spacing: .12em; text-transform: uppercase;
}
.cm-categorias ul::-webkit-scrollbar { display: none; }
.cm-categorias li { margin: 0; }
.cm-categorias a {
	display: block; padding: .8rem 0; color: var(--wp--preset--color--texto); white-space: nowrap;
	border-bottom: 1px solid transparent;
}
.cm-categorias a:hover, .cm-categorias a:focus-visible {
	color: var(--wp--preset--color--contrast); border-bottom-color: var(--wp--preset--color--contrast); text-decoration: none;
}

/* ---------- 4. a capa da home: o convite à esquerda, duas peças à direita ---------- */
.cm-capa {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center; margin: var(--wp--preset--spacing--50) auto 0;
}
.cm-capa__centro { display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; padding: 1rem 0; }
.cm-capa__selo { margin: 0; font-size: .75rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--wp--preset--color--texto-2); }
.cm-capa__centro h2 {
	margin: 0; font-family: var(--wp--preset--font-family--titulo); font-weight: 400;
	font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.06; letter-spacing: -0.01em; max-width: 13ch; text-wrap: balance;
}
.cm-capa__centro p { margin: 0; color: var(--wp--preset--color--texto-2); font-size: 1.05rem; line-height: 1.6; max-width: 42ch; }
.cm-capa__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: .4rem; }
.cm-capa__botao {
	display: inline-block; background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--branco);
	padding: 1rem 1.9rem; border-radius: 0; font-size: .82rem; font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; text-decoration: none;
}
.cm-capa__botao:hover, .cm-capa__botao:focus-visible { background: var(--wp--preset--color--marca); color: var(--wp--preset--color--branco); text-decoration: none; }
.cm-capa__link {
	font-size: .88rem; letter-spacing: .04em; color: var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--preset--color--contrast); padding-bottom: 2px; text-decoration: none;
}
.cm-capa__link:hover, .cm-capa__link:focus-visible { color: var(--wp--preset--color--marca); border-bottom-color: var(--wp--preset--color--marca); text-decoration: none; }

/* As duas peças, a segunda um pouco abaixo da primeira — é o desenho. A
   foto vai INTEIRA (contain): é produto, e cortar escolheria o que mostrar. */
.cm-capa__lado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.cm-capa__foto { display: flex; flex-direction: column; gap: .5rem; color: var(--wp--preset--color--texto); text-decoration: none; min-width: 0; }
.cm-capa__foto:nth-child(2) { margin-top: 3rem; }
.cm-capa__moldura { display: block; background: var(--wp--preset--color--moldura); }
.cm-capa__foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: contain; mix-blend-mode: multiply; }
.cm-capa__foto span { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--texto-2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cm-capa__foto:hover, .cm-capa__foto:focus-visible { color: var(--wp--preset--color--marca); text-decoration: none; }

@media (max-width: 860px) {
	.cm-capa { grid-template-columns: 1fr; margin-top: var(--wp--preset--spacing--40); }
}
/* No CELULAR, debaixo do card grande vêm os DESTAQUES (21/10/2026, pedido
   do dono): a capa fica só com o convite, e as duas peças mais novas estão
   em "Chegaram agora" — empilhadas ali, empurravam os destaques para longe. */
@media (max-width: 600px) {
	.cm-capa__lado { display: none; }
}

/* ---------- 5. as categorias em quadros ---------- */
.cm-secao__titulo {
	font-family: var(--wp--preset--font-family--titulo); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 1.95rem);
	margin: var(--wp--preset--spacing--60) 0 1.4rem; padding-bottom: .8rem; border-bottom: 1px solid var(--wp--preset--color--linha-fina);
}
.cm-circulos ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.cm-circulos li { margin: 0; min-width: 0; }
.cm-circulos a { display: flex; flex-direction: column; gap: .6rem; color: var(--wp--preset--color--texto); text-decoration: none; }
.cm-circulos__moldura {
	width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--wp--preset--color--moldura);
	display: flex; align-items: center; justify-content: center; transition: opacity .2s ease;
}
.cm-circulos__moldura img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cm-circulos a:hover .cm-circulos__moldura, .cm-circulos a:focus-visible .cm-circulos__moldura { opacity: .85; }
.cm-circulos__nome { font-size: .78rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.cm-circulos a:hover .cm-circulos__nome { color: var(--wp--preset--color--marca); }
@media (max-width: 600px) {
	.cm-circulos ul { display: flex; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; gap: 12px; }
	.cm-circulos li { flex: none; width: 120px; }
}

/* ---------- 6. a lista: filtros à esquerda, grade à direita ---------- */
.cm-titulo { margin-bottom: var(--wp--preset--spacing--30); }
.cm-titulo h1 { margin: 0 0 .25rem; font-size: var(--wp--preset--font-size--large); }
.cm-titulo p { margin: 0; max-width: 60ch; }
.cm-migalhas { margin-bottom: .75rem; }
.cm-lista__colunas { gap: 0 2rem; }
.cm-ferramentas { margin-bottom: var(--wp--preset--spacing--30); row-gap: .5rem; }
.cm-ferramentas .wc-block-catalog-sorting select,
.cm-ferramentas .wc-block-catalog-sorting .orderby {
	font: inherit; font-size: var(--wp--preset--font-size--small);
	border: 1px solid var(--wp--preset--color--linha-forte); border-radius: 4px;
	padding: .45rem 2rem .45rem .7rem; background-color: var(--wp--preset--color--branco);
	color: var(--wp--preset--color--texto);
}
.cm-ferramentas .wc-block-product-results-count p { margin: 0; }

.cm-filtros { position: sticky; top: 92px; }
.cm-filtros__chave, .cm-filtros__botao { display: none; }
.cm-filtros__topo { display: flex; justify-content: space-between; align-items: center; padding-bottom: .6rem; border-bottom: 1px solid var(--wp--preset--color--linha); }
.cm-filtros__nome { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: var(--wp--preset--font-size--small); }
.cm-filtros__limpar { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--marca); }
.cm-filtro { padding: .9rem 0; border-bottom: 1px solid var(--wp--preset--color--linha); }
.cm-filtro__titulo { margin: 0 0 .6rem; font-size: var(--wp--preset--font-size--small); font-weight: 700; }
.cm-filtro__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.cm-filtro__lista li { margin: 0; }
.cm-filtro__opcao { display: flex; align-items: center; gap: .5rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--texto-2); text-decoration: none; }
.cm-filtro__opcao::before {
	content: ""; width: 15px; height: 15px; flex: none; border-radius: 3px;
	border: 1px solid var(--wp--preset--color--linha-forte); background: var(--wp--preset--color--branco);
}
.cm-filtro--categoria .cm-filtro__opcao::before { border-radius: 50%; }
.cm-filtro__opcao.is-marcada { color: var(--wp--preset--color--texto); font-weight: 650; }
.cm-filtro__opcao.is-marcada::before { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); box-shadow: inset 0 0 0 2px var(--wp--preset--color--branco); }
.cm-filtro__opcao:hover, .cm-filtro__opcao:focus-visible { color: var(--wp--preset--color--contrast); text-decoration: none; }
.cm-filtro__lista--numeros { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
.cm-filtro__lista--numeros .cm-filtro__opcao {
	min-width: 44px; justify-content: center; padding: .35rem .5rem; font-weight: 600;
	border: 1px solid var(--wp--preset--color--linha-forte); border-radius: 6px;
	background: var(--wp--preset--color--branco); color: var(--wp--preset--color--texto);
}
.cm-filtro__lista--numeros .cm-filtro__opcao::before { display: none; }
.cm-filtro__lista--numeros .cm-filtro__opcao.is-marcada { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--branco); border-color: var(--wp--preset--color--contrast); }
@media (max-width: 781px) {
	.cm-filtros { position: static; margin-bottom: .75rem; }
	.cm-filtros__botao {
		display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; cursor: pointer;
		border: 1px solid var(--wp--preset--color--linha-forte); border-radius: 8px;
		background: var(--wp--preset--color--branco); font-weight: 650; font-size: var(--wp--preset--font-size--small);
	}
	.cm-filtros__corpo { display: none; margin-top: .75rem; padding: .75rem 1rem; background: var(--wp--preset--color--branco); border: 1px solid var(--wp--preset--color--linha); border-radius: var(--wp--custom--raio); }
	.cm-filtros__chave:checked ~ .cm-filtros__corpo { display: block; }
}

/* ---------- 7. a grade de produtos ---------- */
.cm-grade ul.wc-block-product-template,
.cm-grade ul.wp-block-post-template {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	gap: 40px 20px; margin: 0; padding: 0; list-style: none;
}
@media (max-width: 600px) {
	.cm-grade ul.wc-block-product-template,
	.cm-grade ul.wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
}
.cm-grade li.wc-block-product,
.cm-grade li.wp-block-post { display: flex; flex-direction: column; gap: .3rem; margin: 0; padding: 0; min-width: 0; }

/* A foto: 4:5 no fundo de papel quente da Vitrine limpa (30/10/2026),
   INTEIRA e não cortada — cortar escolheria o que mostrar do sapato, e
   isso é decisão de quem fotografa. Sem borda nem canto: a foto manda. */
.cm-grade .cm-cartao__foto { margin: 0 0 .45rem; }
.cm-grade .cm-cartao__foto a { display: block; }
/* O bloco de imagem do Woo escreve style="object-fit:cover" NA TAG, e o
   atributo vence a folha: a foto deitada do fabricante (1200x640) era
   recortada e esticada para caber no 3:4 — o arquivo de 300 px ampliado
   2,7 vezes, borrado. O !important é o que devolve a foto inteira. */
.cm-grade .cm-cartao__foto img {
	display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: contain !important;
	background: transparent; border: 0; border-radius: 0;
	mix-blend-mode: multiply; transition: opacity .2s ease;
}
/* A FOTO "CHAPADA" (30/10/2026): o fundo bege fica no LINK, e a foto se
   MESCLA com ele (`multiply`). O branco da foto do fabricante vira a cor da
   moldura, e o calçado aparece direto sobre ela — sem o retângulo branco
   dentro do bege, e sem cortar nada. O fundo não pode ficar na própria
   imagem: aí ela se mesclaria com o branco da página e nada mudaria. */
.cm-grade .cm-cartao__foto a { background: var(--wp--preset--color--moldura); position: relative; }
.cm-grade li:hover .cm-cartao__foto img { opacity: .88; }
.cm-grade .cm-cartao__nome {
	margin: 0; font-size: .95rem; font-weight: 400; line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cm-grade .cm-cartao__nome a { color: var(--wp--preset--color--texto); }
.cm-grade .cm-cartao__preco { margin: 0; }
.cm-grade .cm-cartao__nome a:hover { color: var(--wp--preset--color--marca); text-decoration: none; }
.cm-grade .cm-cartao__preco .woocommerce-Price-amount { font-weight: 600; color: var(--wp--preset--color--contrast); }
/* A PROMOÇÃO DO SETA NO SITE (o "de/por", 30/10/2026): o Woo escreve o
   preço do cadastro num <del> e o da promoção num <ins>. O "de" fica
   riscado e apagado, o "por" no vermelho da marca — é o único vermelho
   do cartão, e é ele que o olho tem de achar. */
.cm-grade .cm-cartao__preco del, .cm-produto .cm-produto__preco del { color: var(--wp--preset--color--texto-3); text-decoration: line-through; margin-right: .45em; }
.cm-grade .cm-cartao__preco del .woocommerce-Price-amount { font-weight: 400; color: var(--wp--preset--color--texto-3); font-size: .85em; }
.cm-grade .cm-cartao__preco ins, .cm-produto .cm-produto__preco ins { text-decoration: none; background: none; }
.cm-grade .cm-cartao__preco ins .woocommerce-Price-amount { color: var(--wp--preset--color--marca); font-size: 1.12rem; font-weight: 700; }
/* O SELO DO DESCONTO, que o functions.php põe depois do "por" (30/10/2026:
   *"tão pequenos e simples não chamam a atenção"*), e a ETIQUETA na foto
   do cartão de quem tem selo. A etiqueta acha o selo pelo `:has()`; em
   navegador antigo ela só não aparece — o preço e o selo continuam. */
.cm-desconto {
	display: inline-block; vertical-align: .12em; margin-left: .45em; padding: .18em .5em;
	background: var(--wp--preset--color--marca); color: var(--wp--preset--color--branco);
	font-size: .72rem; font-weight: 700; letter-spacing: .04em; line-height: 1.3;
}
.cm-grade li:has(.cm-desconto) .cm-cartao__foto a::before {
	content: "Promoção"; position: absolute; top: 10px; left: 10px; z-index: 1;
	padding: .3rem .6rem; background: var(--wp--preset--color--marca); color: var(--wp--preset--color--branco);
	font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}

/* O que o modo vitrine põe no lugar do botão de comprar (o
   mu-plugins/calcemais-vitrine.php): a frase e o "Consultar". No cartão
   ele é discreto — o cartão é a foto. */
.cm-grade .cm-vitrine--compacta { margin: .1rem 0 0; align-items: flex-start; text-align: left; gap: .35rem; }
.cm-grade .cm-vitrine__disponivel { font-size: var(--wp--preset--font-size--x-small); font-weight: 500; color: var(--wp--preset--color--texto-2); }
.cm-grade .cm-vitrine__whatsapp {
	font-size: .72rem; font-weight: 500; letter-spacing: .06em; padding: .45rem .9rem; border-radius: 0;
	background: transparent; color: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--linha-forte);
}
.cm-grade .cm-vitrine__whatsapp:hover, .cm-grade .cm-vitrine__whatsapp:focus-visible {
	background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--branco); border-color: var(--wp--preset--color--contrast);
}

/* ---------- 8. a página do produto ---------- */
.cm-produto__colunas { row-gap: 1.5rem; }
.cm-galeria { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
.cm-galeria:not(.cm-galeria--varias) { grid-template-columns: minmax(0, 1fr); }
.cm-galeria:not(.cm-galeria--varias) .cm-galeria__miniaturas { display: none; }
.cm-galeria__miniaturas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cm-galeria__miniaturas li { margin: 0; }
.cm-galeria__miniaturas a { display: block; border: 1px solid transparent; overflow: hidden; background: var(--wp--preset--color--moldura); }
.cm-galeria__miniaturas a:hover, .cm-galeria__miniaturas a:focus-visible { border-color: var(--wp--preset--color--contrast); }
.cm-galeria__miniaturas img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.cm-galeria__principal {
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	background: var(--wp--preset--color--moldura);
}
.cm-galeria__principal::-webkit-scrollbar { display: none; }
.cm-galeria__foto { flex: none; width: 100%; margin: 0; scroll-snap-align: start; }
.cm-galeria__foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
/* A foto "chapada" também aqui (30/10/2026): o fundo bege é do quadro de
   fora, e a foto se mescla com ele — ver a grade. */
.cm-galeria__miniaturas img, .cm-circulos__moldura img { mix-blend-mode: multiply; }
/* A GALERIA EM GRADE no computador (Vitrine limpa, 30/10/2026, como no
   desenho): a primeira foto larga e as outras em duas colunas embaixo, sem
   a coluna de miniaturas e sem rolar de lado. O fundo bege vai em cada
   quadro, que é o de fora da foto (a mescla). No celular continua o
   carrossel de deslizar com as miniaturas embaixo. */
@media (min-width: 782px) {
	.cm-galeria, .cm-galeria:not(.cm-galeria--varias) { grid-template-columns: minmax(0, 1fr); }
	.cm-galeria .cm-galeria__miniaturas { display: none; }
	.cm-galeria .cm-galeria__principal {
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
		overflow: visible; scroll-snap-type: none; background: transparent;
	}
	.cm-galeria .cm-galeria__foto { width: auto; background: var(--wp--preset--color--moldura); }
	.cm-galeria .cm-galeria__foto:first-child { grid-column: 1 / -1; }
	.cm-galeria--vazia .cm-galeria__principal { display: flex; background: var(--wp--preset--color--moldura); }
}
.cm-galeria--vazia .cm-galeria__principal { aspect-ratio: 1; align-items: center; justify-content: center; color: var(--wp--preset--color--texto-3); }
@media (max-width: 781px) {
	.cm-galeria { grid-template-columns: minmax(0, 1fr); }
	.cm-galeria__miniaturas { flex-direction: row; order: 2; }
	.cm-galeria__miniaturas li { width: 56px; }
}

.cm-produto__dados { display: flex; flex-direction: column; gap: 1.2rem; }
.cm-produto__dados > * { margin: 0; }
.cm-produto__titulo { font-family: var(--wp--preset--font-family--titulo); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 400; line-height: 1.12; }
.cm-ficha { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--texto-2); }
.cm-ficha__rotulo { display: block; font-size: var(--wp--preset--font-size--x-small); text-transform: uppercase; letter-spacing: .06em; color: var(--wp--preset--color--texto-3); }
/* O preço da página do produto tem o MESMO tamanho com e sem promoção
   (30/10/2026, o dono: *"o preço normal na aba do produto ficou muito
   pequeno"*): 2rem, e na promoção o "por" no vermelho e o "de" menor. */
/* O TAMANHO VAI NO VALOR, em rem, e não no bloco: o bloco de preço do Woo
   escreve o tamanho da letra NA TAG (do theme.json), e o atributo vence a
   folha — com `em` o preço saía com 16 px e o "de" com 9 px (visto na loja,
   30/10/2026). */
.cm-produto .cm-produto__preco { font-weight: 600; line-height: 1.1; color: var(--wp--preset--color--contrast); }
.cm-produto .cm-produto__preco .woocommerce-Price-amount { font-size: 2rem; }
.cm-produto .cm-produto__preco del .woocommerce-Price-amount { font-size: 1.15rem; font-weight: 400; color: var(--wp--preset--color--texto-3); }
.cm-produto .cm-produto__preco ins .woocommerce-Price-amount { font-size: 2rem; color: var(--wp--preset--color--marca); font-weight: 700; }
.cm-produto .cm-produto__preco .cm-desconto { font-size: .9rem; vertical-align: .55em; padding: .25em .6em; }
.cm-produto .cm-produto__preco:empty { display: none; }
/* A numeração é SELECIONÁVEL (08/10/2026), como o tamanho na SHEIN: um
   rádio por numeração, fora da vista mas no teclado, e quem veste a
   pílula é o label. Acesa, fica na tinta com o texto no papel. */
.cm-numeros { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.cm-numeros__titulo { margin: 0 0 .6rem; padding: 0; font-weight: 400; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.cm-numeros__escolhida { font-weight: 500; color: var(--wp--preset--color--texto-2); }
.cm-numeros__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
.cm-numeros__item { margin: 0; position: relative; }
.cm-numeros__radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.cm-numeros__item label {
	display: flex; align-items: center; justify-content: center; min-height: 48px; padding: .4rem .5rem; text-align: center; font-weight: 400; cursor: pointer;
	border: 1px solid var(--wp--preset--color--linha-forte); border-radius: 0; background: var(--wp--preset--color--branco);
	color: var(--wp--preset--color--texto);
}
.cm-numeros__item label:hover { border-color: var(--wp--preset--color--contrast); }
.cm-numeros__radio:checked + label { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--branco); }
.cm-numeros__radio:focus-visible + label { outline: 2px solid var(--wp--preset--color--marca); outline-offset: 2px; }
.cm-numeros__item--sem label { color: var(--wp--preset--color--texto-3); border-color: var(--wp--preset--color--linha-fina); background: transparent; text-decoration: line-through; font-weight: 400; cursor: not-allowed; }
.cm-numeros__item--sem label:hover { border-color: var(--wp--preset--color--linha-forte); }
.cm-numeros__nota { margin: .5rem 0 0; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--texto-3); }

/* AS CORES DO MODELO (21/10/2026): uma miniatura por cor, a da tela com o
   contorno da tinta, a que acabou riscada e apagada — à vista, para não
   parecer que o modelo não vem naquela cor. A foto vai INTEIRA (contain):
   é produto, e cortar escolheria o que mostrar do sapato. */
.cm-cores { margin: 0 0 1rem; }
.cm-cores__titulo { margin: 0 0 .6rem; font-weight: 400; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.cm-cores__escolhida { font-weight: 500; color: var(--wp--preset--color--texto-2); }
.cm-cores__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.cm-cores__item { margin: 0; position: relative; }
/* AS BOLINHAS (Vitrine limpa, 30/10/2026, como no desenho): um anel de
   44 px com a cor dentro (32 px), a da tela com o anel na tinta, a
   esgotada riscada na diagonal. O nome continua no link, fora da vista —
   é o nome dele para o leitor de tela — e no `title`. */
.cm-cores__item a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid transparent; text-decoration: none; color: var(--wp--preset--color--texto); }
.cm-cores__bola { display: block; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; border: 1px solid var(--wp--preset--color--linha-forte); box-sizing: border-box; background: var(--wp--preset--color--moldura); }
.cm-cores__bola img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cm-cores__item a:hover { border-color: var(--wp--preset--color--linha-forte); }
.cm-cores__item.is-atual a { border-color: var(--wp--preset--color--contrast); }
.cm-cores__item a:focus-visible { outline: 2px solid var(--wp--preset--color--marca); outline-offset: 2px; }
.cm-cores__nome { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.cm-cores__item--sem .cm-cores__bola { opacity: .45; }
.cm-cores__item--sem a::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 1px; background: var(--wp--preset--color--texto-2); transform: rotate(-45deg); }

/* O que o modo vitrine põe no lugar do botão de comprar, aqui no lugar
   do "adicionar ao carrinho" da SHEIN: cheio, da largura da coluna. Só na
   FICHA (`cm-produto__dados`): escrito como `.cm-produto`, a regra
   alcançaria os cartões do "você também pode gostar", na mesma página. */
.cm-produto__dados .cm-vitrine { margin: .25rem 0 0; gap: .6rem; align-items: stretch; }
.cm-produto__dados .cm-vitrine__disponivel { font-weight: 600; }
.cm-produto__dados .cm-vitrine__whatsapp {
	display: block; text-align: center; text-transform: uppercase; letter-spacing: .1em; font-size: .82rem;
	padding: 1rem 1.4rem; border-radius: 0; background: var(--wp--preset--color--branco); font-weight: 600;
}
/* O hover diz a cor do TEXTO junto com a do fundo (21/10/2026): o botão é
   branco com a letra verde, e pintar só o fundo de verde deixava o texto
   verde sobre verde — o rótulo sumia. */
.cm-produto__dados .cm-vitrine__whatsapp:hover, .cm-produto__dados .cm-vitrine__whatsapp:focus-visible {
	background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--branco); border-color: var(--wp--preset--color--contrast);
}

/* A caixa cinza da SHEIN (entrega, troca, segurança), com o que é nosso. */
.cm-selos {
	list-style: none; margin: .25rem 0 0; padding: 1.1rem 0 0; display: grid; gap: .85rem;
	background: transparent; border: 0; border-top: 1px solid var(--wp--preset--color--linha-fina); border-radius: 0;
}
.cm-selos li { display: grid; grid-template-columns: 28px 1fr; gap: .15rem .75rem; align-items: start; margin: 0; }
.cm-selos svg { width: 22px; height: 22px; grid-row: span 2; fill: none; stroke: var(--wp--preset--color--texto-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cm-selos strong { font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.cm-selos span { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--texto-2); }

.cm-sobre { border-top: 1px solid var(--wp--preset--color--linha-fina); padding: .9rem 0 .4rem; }
.cm-sobre summary { font-weight: 400; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.cm-sobre summary::-webkit-details-marker { display: none; }
.cm-sobre summary::after { content: "+"; font-size: 1.2rem; color: var(--wp--preset--color--texto-2); }
.cm-sobre[open] summary::after { content: "\2212"; }
.cm-sobre p { color: var(--wp--preset--color--texto-2); font-size: var(--wp--preset--font-size--small); margin: .6rem 0 0; }

.cm-relacionados { margin-top: var(--wp--preset--spacing--70); }
.cm-relacionados__titulo { font-family: var(--wp--preset--font-family--titulo); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 1.8rem); margin: 0 0 1.4rem; padding-bottom: .8rem; border-bottom: 1px solid var(--wp--preset--color--linha-fina); }

/* ---------- 9. a paginação ---------- */
.cm-paginacao { margin-top: var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--small); }
.cm-paginacao .page-numbers { padding: .4rem .7rem; border-radius: 0; }
.cm-paginacao .page-numbers.current { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--branco); }
.cm-paginacao a.page-numbers:hover { background: var(--wp--preset--color--linha); text-decoration: none; }

/* ---------- 10. a página que não existe e a busca sem resultado ---------- */
.cm-nada .wp-block-search { margin: var(--wp--preset--spacing--30) 0; }
.cm-nada .wp-block-search__inside-wrapper { border: 1px solid var(--wp--preset--color--linha-forte) !important; border-radius: 4px; background: var(--wp--preset--color--branco); padding: 2px 2px 2px 16px; }
.cm-nada .wp-block-search__input { border: 0 !important; background: transparent; font: inherit; min-height: 44px; }
.cm-nada .wp-block-search__button { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--branco); border: 0; border-radius: 3px; padding: 0 1rem; min-height: 40px; margin: 0; }
.cm-nada .wp-block-search__button svg { fill: currentColor; }

/* ---------- 11. o rodapé ---------- */
.cm-rodape { margin-top: var(--wp--preset--spacing--70); border-top: 1px solid var(--wp--preset--color--linha-fina); }
.cm-rodape a { color: var(--wp--preset--color--contrast); text-decoration: underline; text-decoration-color: var(--wp--preset--color--linha-forte); text-underline-offset: 3px; }
.cm-rodape a:hover { color: var(--wp--preset--color--marca); text-decoration-color: currentColor; }
.cm-rodape__logo { margin: 0 0 .75rem; }
.cm-rodape__frase { color: var(--wp--preset--color--texto-2); max-width: 36ch; }
.cm-rodape .cm-rodape__titulo { font-family: var(--wp--preset--font-family--sistema); color: var(--wp--preset--color--texto-2); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 600; margin: 0 0 .6rem; }
.cm-rodape .cm-rodape__colunas p { color: var(--wp--preset--color--texto-2); line-height: 1.65; }
.cm-rodape .cm-rodape__linha { margin: var(--wp--preset--spacing--40) auto var(--wp--preset--spacing--30); border: 0; height: 1px; }
.cm-rodape__legal p { margin: 0; color: var(--wp--preset--color--texto-3); }
.cm-rodape__legal { align-items: flex-end; gap: .75rem 2rem; }
.cm-rodape .cm-rodape__empresa { line-height: 1.6; max-width: 70ch; }

/* A política de privacidade (o texto é do mu-plugins/calcemais-legal.php). */
.cm-legal { line-height: 1.65; }
.cm-legal__data { color: var(--wp--preset--color--texto-3); font-size: var(--wp--preset--font-size--small); }
.cm-legal h2 { font-size: 1.2rem; margin: 2rem 0 .6rem; }
.cm-legal ul { padding-left: 1.2rem; }
.cm-legal li { margin: .35rem 0; }
.cm-legal a { color: var(--wp--preset--color--contrast); text-decoration: underline; text-underline-offset: 3px; }
.cm-legal__form { margin: 1rem 0 1.5rem; padding: 1rem 1.2rem; border: 1px solid var(--wp--preset--color--linha-fina); }
.cm-legal__form label { display: block; font-weight: 600; margin-bottom: .25rem; }
.cm-legal__form input, .cm-legal__form textarea { width: 100%; max-width: 28rem; box-sizing: border-box; padding: .55rem .7rem; border: 1px solid var(--wp--preset--color--linha-forte); font: inherit; }
.cm-legal__recado { padding: .7rem .9rem; border-left: 4px solid var(--wp--preset--color--marca); background: var(--wp--preset--color--nevoa); }
.cm-legal__recado--ok { border-left-color: var(--wp--preset--color--contrast); }
.cm-meus__desistir { margin-top: 1rem; font-size: var(--wp--preset--font-size--small); }

/* ---------- 12. a loja no site (/loja/nome/) ----------
   A marcação é do mu-plugins/calcemais-vendedor.php e do calcemais-lojas.php;
   aqui só o jeito. O WhatsApp da loja é o DELA (decisão do dono, 09/10/2026).
   A ordem da página: o alto, os destaques, a vitrine, as dicas. */
.cm-vend {
	display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 1.25rem; align-items: center;
	padding: 1.25rem; background: var(--wp--preset--color--branco);
	border: 1px solid var(--wp--preset--color--linha); border-radius: var(--wp--custom--raio);
}
.cm-vend__moldura { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--linha); }
.cm-vend__foto { display: flex; width: 100%; height: 100%; object-fit: cover; align-items: center; justify-content: center; }
.cm-vend__foto--iniciais { font-weight: 700; font-size: 1.6rem; color: var(--wp--preset--color--marca); letter-spacing: .04em; }
.cm-vend__texto { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; min-width: 0; }
.cm-vend__papel { margin: 0; font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--marca); }
.cm-vend__nome { margin: 0; font-size: var(--wp--preset--font-size--x-large); }
.cm-vend__bio { margin: 0; color: var(--wp--preset--color--texto-2); max-width: 60ch; }
.cm-vend__acoes { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .4rem; }
.cm-vend__zap {
	display: inline-block; margin-top: .4rem; padding: .75rem 1.3rem; border-radius: 999px;
	background: var(--wp--preset--color--zap); color: var(--wp--preset--color--branco); font-weight: 700; text-decoration: none;
}
.cm-vend__acoes .cm-vend__zap, .cm-dicap__acoes .cm-vend__zap { margin-top: 0; }
.cm-vend__zap:hover, .cm-vend__zap:focus-visible { background: var(--wp--preset--color--verde); color: var(--wp--preset--color--branco); text-decoration: none; }
.cm-vend__zap--leve { margin: 0; padding: .5rem 1rem; font-size: var(--wp--preset--font-size--small); background: transparent; color: var(--wp--preset--color--verde); border: 1px solid var(--wp--preset--color--linha-forte); }
.cm-vend__zap-nota { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--texto-3); }
.cm-vend__vazio { margin: 0; padding: .9rem 1rem; color: var(--wp--preset--color--texto-2); background: var(--wp--preset--color--branco); border: 1px dashed var(--wp--preset--color--linha-forte); border-radius: var(--wp--custom--raioP); }
.cm-vend__painel { font-size: var(--wp--preset--font-size--small); font-weight: 650; color: var(--wp--preset--color--marca); }
.cm-espaco__secao { margin-top: var(--wp--preset--spacing--50); }
.cm-espaco__secao .cm-secao__titulo { margin: 0 0 1rem; }
@media (max-width: 600px) {
	.cm-vend { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.cm-vend__texto, .cm-vend__acoes { align-items: center; justify-content: center; }
}

/* Compartilhar: mandar no WhatsApp (a pessoa escolhe para quem) e copiar
   o link — o script do tema faz o "copiar" e diz que copiou. */
.cm-partilha { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.cm-partilha__zap, .cm-partilha__copiar {
	font: inherit; font-size: var(--wp--preset--font-size--small); font-weight: 650; padding: .5rem .95rem; border-radius: 999px;
	border: 1px solid var(--wp--preset--color--linha-forte); background: var(--wp--preset--color--branco); color: var(--wp--preset--color--texto);
	cursor: pointer; text-decoration: none; line-height: 1.2;
}
.cm-partilha__zap { color: var(--wp--preset--color--verde); }
.cm-partilha__zap:hover, .cm-partilha__copiar:hover, .cm-partilha__zap:focus-visible, .cm-partilha__copiar:focus-visible { border-color: var(--wp--preset--color--contrast); text-decoration: none; }
.cm-partilha__copiar.is-copiado { background: var(--wp--preset--color--verde); border-color: var(--wp--preset--color--verde); color: var(--wp--preset--color--branco); }

/* A VITRINE dela: as coleções, cada uma numa grade como a da loja — a
   foto inteira (contain), o nome, o preço. */
.cm-lojav__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.cm-lojav__chips a { padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--linha-forte); background: var(--wp--preset--color--branco); font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--texto); text-decoration: none; }
.cm-lojav__chips a:hover, .cm-lojav__chips a:focus-visible { border-color: var(--wp--preset--color--contrast); }
/* Todos os produtos da página da loja (21/10/2026): a categoria escolhida
   fica acesa, com quantos tem; e as páginas embaixo. No celular as pílulas
   rolam de lado, para não virarem um bloco antes da lista. */
.cm-lojav__chips a.is-atual { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--branco); }
.cm-lojav__chips small { font-weight: 500; opacity: .7; }
@media (max-width: 600px) { .cm-lojap .cm-lojav__chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; -webkit-overflow-scrolling: touch; } .cm-lojap .cm-lojav__chips a { flex: 0 0 auto; } }
.cm-lojap__nota { margin: -.4rem 0 1rem; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--texto-3); }
.cm-lojap__paginas { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 1.5rem; font-size: var(--wp--preset--font-size--small); }
.cm-lojap__paginas a { font-weight: 650; color: var(--wp--preset--color--texto); }
.cm-lojap__paginas a:last-child { justify-self: end; }
.cm-lojav__colecao + .cm-lojav__colecao { margin-top: var(--wp--preset--spacing--40); }
.cm-lojav__grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 22px 14px; }
@media (max-width: 600px) { .cm-lojav__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; } }
.cm-lojav__grade li { margin: 0; min-width: 0; }
.cm-lojav__item { display: flex; flex-direction: column; gap: .3rem; color: var(--wp--preset--color--texto); text-decoration: none; }
.cm-lojav__foto { display: block; }
.cm-lojav__foto img {
	display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: var(--wp--preset--color--branco);
	border: 1px solid var(--wp--preset--color--linha); border-radius: var(--wp--custom--raioP); transition: transform .2s ease, box-shadow .2s ease;
}
.cm-lojav__item:hover .cm-lojav__foto img, .cm-lojav__item:focus-visible .cm-lojav__foto img { transform: translateY(-2px); box-shadow: var(--wp--preset--shadow--cartao); }
.cm-lojav__nome { font-size: var(--wp--preset--font-size--small); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-lojav__preco { font-weight: 700; color: var(--wp--preset--color--marca); }
/* O PREÇO DOS CARTÕES DA LOJA E DA DICA (31/10/2026) é o MESMO da grade:
   o get_price_html() com o "de/por" e o selo. Antes ia o texto cru, e o
   leitor de tela aparecia escrito ("O preço original era: …"). */
.cm-lojav__preco, .cm-dica__produto-preco { display: block; }
.cm-lojav__preco del, .cm-dica__produto-preco del { color: var(--wp--preset--color--texto-3); text-decoration: line-through; margin-right: .4em; }
.cm-lojav__preco del .woocommerce-Price-amount, .cm-dica__produto-preco del .woocommerce-Price-amount { font-weight: 400; color: var(--wp--preset--color--texto-3); font-size: .85em; }
.cm-lojav__preco ins, .cm-dica__produto-preco ins { text-decoration: none; background: none; }
.cm-lojav__preco ins .woocommerce-Price-amount, .cm-dica__produto-preco ins .woocommerce-Price-amount { color: var(--wp--preset--color--marca); font-weight: 700; }
.cm-lojav__preco .cm-desconto, .cm-dica__produto-preco .cm-desconto { margin-left: .35em; }
.cm-lojav__foto { position: relative; }
.cm-lojav__grade li:has(.cm-desconto) .cm-lojav__foto::before {
	content: "Promoção"; position: absolute; top: 8px; left: 8px; z-index: 1;
	padding: .25rem .5rem; background: var(--wp--preset--color--marca); color: var(--wp--preset--color--branco);
	font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}

/* A DICA em cartão: a capa (a foto DELA preenche o quadro; sem foto dela,
   a do produto, inteira), o título, a frase e as peças. */
.cm-dicas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.cm-dica-cartao { display: flex; flex-direction: column; background: var(--wp--preset--color--branco); border: 1px solid var(--wp--preset--color--linha); border-radius: var(--wp--custom--raio); overflow: hidden; }
.cm-dica-cartao__capa { display: block; aspect-ratio: 4 / 5; background: var(--wp--preset--color--base); }
.cm-dica-cartao__capa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-dica-cartao__capa--produto img { object-fit: contain; background: var(--wp--preset--color--branco); }
.cm-dica-cartao__sem { display: flex; height: 100%; align-items: center; justify-content: center; color: var(--wp--preset--color--texto-3); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.cm-dica-cartao__corpo { display: flex; flex-direction: column; gap: .45rem; padding: .9rem 1rem 1rem; flex: 1; }
.cm-dica-cartao__titulo { margin: 0; font-size: var(--wp--preset--font-size--large); line-height: 1.25; }
.cm-dica-cartao__titulo a { color: var(--wp--preset--color--texto); text-decoration: none; }
.cm-dica-cartao__frase { margin: 0; color: var(--wp--preset--color--texto-2); font-size: var(--wp--preset--font-size--small); }
.cm-dica-cartao__pecas { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; gap: 6px; }
.cm-dica-cartao__pecas li { margin: 0; width: 44px; height: 44px; border: 1px solid var(--wp--preset--color--linha); border-radius: 6px; background: var(--wp--preset--color--branco); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cm-dica-cartao__pecas img { width: 100%; height: 100%; object-fit: contain; }
.cm-dica-cartao__mais { font-size: var(--wp--preset--font-size--x-small); font-weight: 700; color: var(--wp--preset--color--texto-2); }
.cm-dica-cartao__ler { margin-top: auto; padding-top: .3rem; font-size: var(--wp--preset--font-size--small); font-weight: 700; color: var(--wp--preset--color--marca); }

/* O que se reaproveita da dica: a assinatura e o cartãozinho do produto. */
.cm-dica__autor { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--wp--preset--font-size--small); font-weight: 650; color: var(--wp--preset--color--texto); text-decoration: none; margin-bottom: .5rem; }
.cm-dica__autor .cm-vend__foto { width: 32px; height: 32px; border-radius: 50%; font-size: .8rem; }
.cm-dica__produto {
	display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .25rem .8rem; align-items: center;
	padding: .5rem; margin-bottom: .9rem; border: 1px solid var(--wp--preset--color--linha); border-radius: var(--wp--custom--raioP);
	color: var(--wp--preset--color--texto); text-decoration: none; background: var(--wp--preset--color--base);
}
.cm-dica__produto img { grid-row: span 2; width: 64px; height: 64px; object-fit: contain; border-radius: 6px; background: var(--wp--preset--color--branco); }
.cm-dica__produto-nome { font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.cm-dica__produto-preco { font-weight: 700; color: var(--wp--preset--color--marca); }
.cm-dica__produto-ver { font-size: var(--wp--preset--font-size--x-small); font-weight: 700; color: var(--wp--preset--color--contrast); text-decoration: underline; }
.cm-dica__produto:hover, .cm-dica__produto:focus-visible { border-color: var(--wp--preset--color--contrast); text-decoration: none; }

/* A PÁGINA DA DICA (/loja/nome/dica/titulo/): as fotos dela de um lado, o
   texto do outro; as peças embaixo. As fotos saem INTEIRAS: é roupa e
   calçado no corpo, e cortar o pé é perder o assunto. */
.cm-dicap__trilha { display: flex; align-items: center; gap: .5rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--texto-3); margin-bottom: 1rem; }
.cm-dicap__trilha .cm-dica__autor { margin: 0; }
.cm-dicap__colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.cm-dicap__colunas > :only-child { grid-column: 1 / -1; max-width: 720px; }
@media (max-width: 781px) { .cm-dicap__colunas { grid-template-columns: 1fr; gap: 1.25rem; } }
.cm-dicap__fotos { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; scrollbar-width: thin; }
.cm-dicap__fotos li { flex: 0 0 100%; margin: 0; scroll-snap-align: start; aspect-ratio: 4 / 5; background: var(--wp--preset--color--branco); border: 1px solid var(--wp--preset--color--linha); border-radius: var(--wp--custom--raio); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cm-dicap__fotos img { width: 100%; height: 100%; object-fit: contain; }
.cm-dicap__fotos video { width: 100%; height: 100%; object-fit: contain; background: var(--wp--preset--color--contrast); }
.cm-dicap__titulo { margin: 0 0 .4rem; font-size: var(--wp--preset--font-size--xx-large); line-height: 1.15; }
.cm-dicap__frase { margin: 0 0 1rem; font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--texto-2); }
.cm-dicap__ficha { display: grid; gap: .6rem; margin: 0 0 1.1rem; padding: .9rem 1rem; background: var(--wp--preset--color--branco); border: 1px solid var(--wp--preset--color--linha); border-radius: var(--wp--custom--raioP); }
.cm-dicap__ficha div { display: grid; gap: .1rem; }
.cm-dicap__ficha dt { font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--marca); }
.cm-dicap__ficha dd { margin: 0; font-weight: 600; }
.cm-dicap__corpo > * { margin: 0 0 .9rem; }
.cm-dicap__acoes { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }
.cm-dicap__pecas, .cm-dicap__mais { margin-top: var(--wp--preset--spacing--60); }
.cm-dicap__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.cm-dicap__lista li { margin: 0; }
.cm-dicap__lista .cm-dica__produto { grid-template-columns: 1fr; margin: 0; padding: .6rem; background: var(--wp--preset--color--branco); height: 100%; align-content: start; }
.cm-dicap__lista .cm-dica__produto img { grid-row: auto; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; }

/* ---------- 13. os destaques: a faixa de bolinhas e os quadros ---------- */
.cm-destaques { margin-top: var(--wp--preset--spacing--40); }
.cm-destaques__lista { list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 1.1rem; overflow-x: auto; scrollbar-width: none; }
.cm-destaques__lista::-webkit-scrollbar { display: none; }
.cm-destaques__lista li { margin: 0; flex: none; width: 88px; }
.cm-destaques__bolinha { display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--wp--preset--color--texto); text-decoration: none; position: relative; }
/* O anel de quem tem destaque no ar: o vermelho da marca e o âmbar do logo. */
.cm-destaques__anel { display: block; padding: 3px; border-radius: 50%; background: linear-gradient(135deg, var(--wp--preset--color--marca), var(--wp--preset--color--ambar)); }
.cm-destaques__moldura { display: block; width: 70px; height: 70px; border-radius: 50%; overflow: hidden; background: var(--wp--preset--color--branco); border: 2px solid var(--wp--preset--color--branco); }
.cm-destaques__moldura .cm-vend__foto { font-size: 1.2rem; }
.cm-destaques__nome { font-size: var(--wp--preset--font-size--x-small); font-weight: 600; max-width: 88px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-destaques__quantos { position: absolute; top: 0; right: 6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--branco); font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cm-destaques__bolinha:hover .cm-destaques__anel, .cm-destaques__bolinha:focus-visible .cm-destaques__anel { transform: translateY(-2px); }
.cm-destaques__dados { display: none; }

.cm-destaques__quadros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 14px; }
.cm-destaques__quadros--curta { grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); max-width: 680px; }
.cm-destaques__quadros li { margin: 0; }
@media (max-width: 600px) { .cm-espaco__secao .cm-destaques__quadros { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
.cm-destaque { display: flex; flex-direction: column; gap: .3rem; color: var(--wp--preset--color--texto); text-decoration: none; }
.cm-destaque__quadro {
	display: flex; align-items: center; justify-content: center; aspect-ratio: 9 / 16; overflow: hidden;
	border-radius: var(--wp--custom--raioP); background: var(--wp--preset--color--contrast); border: 3px solid transparent;
	background-clip: padding-box; box-shadow: 0 0 0 2px var(--wp--preset--color--marca);
}
.cm-destaque__quadro img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Vídeo sem capa: o próprio vídeo, parado, com o "▶" por cima (21/10/2026).
   Ele não recebe toque — o clique é do link, que abre o visualizador. */
.cm-destaque__quadro { position: relative; }
.cm-destaque__previa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cm-destaque__video { position: relative; color: var(--wp--preset--color--branco); font-size: 2rem; opacity: .85; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.cm-destaque__titulo { font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-destaque__quando { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--texto-3); }
.cm-destaque:hover .cm-destaque__quadro, .cm-destaque:focus-visible .cm-destaque__quadro { box-shadow: 0 0 0 2px var(--wp--preset--color--contrast); }

/* Na página do produto: o que os vendedores dizem dele. */
.cm-vozes { margin-top: var(--wp--preset--spacing--60); }
.cm-vozes__lista { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.cm-voz { margin: 0; padding: 1rem 1.1rem; background: var(--wp--preset--color--branco); border: 1px solid var(--wp--preset--color--linha); border-radius: var(--wp--custom--raio); display: flex; flex-direction: column; gap: .4rem; }
.cm-voz .cm-dica__autor { margin: 0; }
.cm-voz__titulo { margin: 0; font-size: var(--wp--preset--font-size--medium); }
.cm-voz__resumo { margin: 0; color: var(--wp--preset--color--texto-2); font-size: var(--wp--preset--font-size--small); }
.cm-voz__mais { font-size: var(--wp--preset--font-size--small); font-weight: 650; color: var(--wp--preset--color--marca); }

/* ---------- 14. o visualizador: tela cheia, vertical, barrinhas em cima ----------
   Montado pelo assets/destaques.js. Sem ele, não existe: as bolinhas e
   os quadros são links para o espaço do vendedor. */
.cm-visor-aberto, .cm-visor-aberto body { overflow: hidden; }
.cm-visor { position: fixed; inset: 0; z-index: 10000; background: rgba(22, 32, 43, .96); display: flex; align-items: center; justify-content: center; }
.cm-visor[hidden] { display: none; }
.cm-visor__quadro {
	position: relative; width: min(100vw, calc(100vh * 9 / 16), 460px); height: min(100vh, calc(100vw * 16 / 9));
	background: #000; border-radius: 0; overflow: hidden; display: flex; flex-direction: column; color: var(--wp--preset--color--branco);
}
@media (min-width: 600px) { .cm-visor__quadro { border-radius: 16px; height: min(94vh, calc(460px * 16 / 9)); } }
.cm-visor__barras { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 3; display: flex; gap: 4px; }
.cm-visor__barra { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.cm-visor__barra i { display: block; height: 100%; width: 0; background: var(--wp--preset--color--branco); }
.cm-visor__cabeca { position: absolute; top: 18px; left: 10px; right: 10px; z-index: 3; display: flex; align-items: center; gap: .5rem; }
.cm-visor__quem { display: flex; align-items: center; gap: .5rem; color: var(--wp--preset--color--branco); text-decoration: none; min-width: 0; flex: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.cm-visor__moldura { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--wp--preset--color--base); flex: none; display: flex; align-items: center; justify-content: center; }
.cm-visor__moldura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-visor__iniciais { color: var(--wp--preset--color--marca); font-weight: 700; }
.cm-visor__nome { font-weight: 700; font-size: var(--wp--preset--font-size--small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-visor__quando { font-size: var(--wp--preset--font-size--x-small); opacity: .8; white-space: nowrap; }
.cm-visor__som, .cm-visor__fechar {
	flex: none; border: 0; cursor: pointer; color: var(--wp--preset--color--branco);
	background: rgba(0, 0, 0, .35); border-radius: 999px; font: inherit;
}
.cm-visor__som { font-size: .7rem; font-weight: 700; padding: .3rem .6rem; }
.cm-visor__fechar { width: 36px; height: 36px; font-size: 1.5rem; line-height: 1; }
.cm-visor__midia { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; touch-action: none; user-select: none; -webkit-user-select: none; }
.cm-visor__midia img, .cm-visor__midia video { width: 100%; height: 100%; object-fit: contain; display: block; }
.cm-visor__titulo { position: absolute; left: 14px; right: 14px; bottom: 96px; z-index: 3; margin: 0; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); pointer-events: none; }
.cm-visor__titulo:empty { display: none; }
.cm-visor__passo { position: absolute; top: 60px; bottom: 100px; width: 44px; border: 0; background: transparent; color: transparent; cursor: pointer; z-index: 2; }
.cm-visor__passo--ante { left: 0; }
.cm-visor__passo--prox { right: 0; }
.cm-visor__passo:focus-visible { outline: 2px solid var(--wp--preset--color--sage); outline-offset: -6px; }
@media (hover: hover) { .cm-visor__passo { display: none; } }
.cm-visor__pe { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; display: flex; flex-direction: column; gap: 8px; }
.cm-visor__pe:empty { display: none; }
.cm-visor__produto {
	display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: .6rem; align-items: center;
	padding: .5rem .7rem; border-radius: 12px; background: rgba(255, 255, 255, .94); color: var(--wp--preset--color--texto); text-decoration: none;
}
.cm-visor__produto img { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; background: var(--wp--preset--color--branco); }
.cm-visor__produto-texto { display: flex; flex-direction: column; min-width: 0; font-size: var(--wp--preset--font-size--x-small); }
.cm-visor__produto-texto strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-visor__produto-texto span { color: var(--wp--preset--color--marca); font-weight: 700; }
.cm-visor__produto-ver { font-size: var(--wp--preset--font-size--x-small); font-weight: 700; color: var(--wp--preset--color--contrast); white-space: nowrap; }
.cm-visor__zap { display: block; text-align: center; padding: .7rem 1rem; border-radius: 12px; background: var(--wp--preset--color--zap); color: var(--wp--preset--color--branco); font-weight: 700; text-decoration: none; }
.cm-visor__zap:hover, .cm-visor__zap:focus-visible { background: var(--wp--preset--color--verde); color: var(--wp--preset--color--branco); text-decoration: none; }

/* =====================================================================
   A VENDA (10/10/2026): comprar pela numeração, a sacola, a finalização
   e a tela do pagamento. Só aparecem quando o plugin da venda as escreve.
   ===================================================================== */
.cm-numeros--falta .cm-numeros__lista label { border-color: var(--wp--preset--color--marca); }
.cm-numeros--falta .cm-numeros__escolhida { color: var(--wp--preset--color--marca); font-weight: 700; }
.cm-comprar { margin: 1rem 0 .25rem; display: flex; flex-direction: column; gap: .4rem; }
.cm-comprar__botao { width: 100%; min-height: 54px; padding: .95rem 1rem; border-radius: 0; font-weight: 600; font-size: .85rem;
	letter-spacing: .12em; text-transform: uppercase;
	background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--branco); border: 0; cursor: pointer; }
.cm-comprar__botao:hover, .cm-comprar__botao:focus-visible { background: var(--wp--preset--color--marca); }
.cm-comprar__nota { margin: 0; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--texto-2); }
.cm-produto__dados .cm-vitrine__whatsapp { background: var(--wp--preset--color--branco); color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast); }
.cm-comprar ~ .cm-vitrine { margin-top: .25rem; }
.cm-vitrine__escolher { font-size: var(--wp--preset--font-size--x-small); padding: .45rem .8rem; border-radius: 999px; }
/* O carrinho e os pedidos no topo: o número de itens é uma bolinha sobre o
   ícone, como em toda loja — o cliente vê de longe que o carrinho tem algo.
   (A classe continua `cm-sacola`: é o nome interno, que o plugin escreve.) */
.cm-sacola { position: relative; }
.cm-sacola svg, .cm-pedidos svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.cm-sacola__n { position: absolute; top: -6px; left: 50%; margin-left: 4px; min-width: 18px; height: 18px; padding: 0 5px;
	border-radius: 999px; text-align: center; background: var(--wp--preset--color--marca); color: var(--wp--preset--color--branco);
	font-size: .68rem; font-weight: 700; line-height: 18px; box-shadow: 0 0 0 2px var(--wp--preset--color--branco); }
.cm-compra__titulo { font-family: var(--wp--preset--font-family--titulo); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.2rem); margin-bottom: var(--wp--preset--spacing--30); }
.cm-compra .woocommerce form .form-row { margin-bottom: .8rem; }
.cm-compra .woocommerce input.input-text, .cm-compra .woocommerce textarea, .cm-compra .woocommerce select {
	padding: .65rem .75rem; border: 1px solid var(--wp--preset--color--linha-forte, #c9cfc7); border-radius: 8px; width: 100%; }
.cm-compra .woocommerce .button, .cm-compra .woocommerce button.button { border-radius: 0; padding: .9rem 1.3rem; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; font-size: .82rem;
	background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--branco); border: 0; }
.cm-compra .woocommerce .button:hover, .cm-compra .woocommerce button.button:hover { background: var(--wp--preset--color--marca); color: var(--wp--preset--color--branco); }
.cm-compra .woocommerce table.shop_table { border-radius: 12px; }
.cm-retirada { margin: 1rem 0; padding: .9rem 1rem; border-radius: 12px; background: var(--wp--preset--color--base);
	border-left: 4px solid var(--wp--preset--color--sage); }
.cm-retirada p { margin: .2rem 0 0; }
.cm-pagar { margin: var(--wp--preset--spacing--40) 0; padding: var(--wp--preset--spacing--40); border-radius: 16px;
	background: var(--wp--preset--color--branco); border: 1px solid var(--wp--preset--color--linha); max-width: 560px; }
.cm-pagar__titulo { margin-top: 0; }
/* A CAIXA DO PAGAMENTO (28/10/2026): o QR à esquerda e o que fazer à
   direita; o botão de copiar e o da página do pagamento num bloco de ações
   com espaço entre eles — "estão grudados" foi o que o dono viu. */
.cm-pagar__texto { margin: 0 0 1rem; }
.cm-pagar__pix { display: flex; flex-wrap: wrap; gap: 1.25rem 1.5rem; align-items: flex-start; }
.cm-pagar__qr { display: block; flex: 0 0 auto; width: 200px; height: 200px; padding: 8px; border-radius: 12px;
	border: 1px solid var(--wp--preset--color--linha); background: var(--wp--preset--color--branco); image-rendering: pixelated; }
.cm-pagar__lado { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: .75rem; }
.cm-pagar__passo { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--texto-2); }
.cm-pagar__copia { width: 100%; box-sizing: border-box; font-family: Consolas, monospace; font-size: .78rem; padding: .6rem;
	border-radius: 8px; border: 1px solid var(--wp--preset--color--linha); background: var(--wp--preset--color--base);
	resize: none; word-break: break-all; }
.cm-pagar__acoes { display: flex; flex-direction: column; gap: .75rem; margin: .25rem 0 0; }
.cm-pagar__principal { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: .85rem 1rem;
	border-radius: 0; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; border: 0; cursor: pointer; text-decoration: none;
	background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--branco); }
.cm-pagar__principal:hover, .cm-pagar__principal:focus-visible { background: var(--wp--preset--color--marca);
	color: var(--wp--preset--color--branco); text-decoration: none; }
.cm-pagar__secundario { display: block; text-align: center; padding: .75rem 1rem; border-radius: 12px; font-weight: 700;
	text-decoration: none; color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--branco);
	border: 1px solid var(--wp--preset--color--linha-forte, #c9cfc7); }
.cm-pagar__secundario:hover, .cm-pagar__secundario:focus-visible { border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast); text-decoration: none; }
.cm-pagar__prazo { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--wp--preset--color--linha);
	font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--texto-2); }
.cm-pagar .cm-retirada { margin-bottom: 0; }

/* =====================================================================
   A FINALIZAÇÃO (28/10/2026): os dados à esquerda, o resumo e o
   pagamento à direita, cada parte num cartão — e, no celular, uma
   coluna só, na ordem em que se preenche.
   ===================================================================== */
.cm-compra form.checkout #customer_details,
.cm-compra form.checkout #order_review { background: var(--wp--preset--color--branco); border: 1px solid var(--wp--preset--color--linha);
	border-radius: 16px; padding: 1.25rem; box-sizing: border-box; }
.cm-compra .col2-set .col-1, .cm-compra .col2-set .col-2 { float: none; width: 100%; }
.cm-compra .woocommerce-billing-fields > h3, .cm-compra #order_review_heading, .cm-compra .cm-pagar-titulo {
	margin: 0 0 1rem; font-size: var(--wp--preset--font-size--large); }
.cm-compra #order_review_heading { margin-top: 1.5rem; }
.cm-compra .woocommerce-checkout-review-order-table { border: 0; margin: 0 0 1rem; }
.cm-compra .woocommerce-checkout-review-order-table th, .cm-compra .woocommerce-checkout-review-order-table td {
	padding: .55rem 0; border-color: var(--wp--preset--color--linha); background: transparent; }
.cm-compra .woocommerce-checkout-review-order-table .fee th, .cm-compra .woocommerce-checkout-review-order-table .fee td {
	color: var(--wp--preset--color--texto-2); }
.cm-compra .woocommerce-checkout-review-order-table .order-total th,
.cm-compra .woocommerce-checkout-review-order-table .order-total td { font-size: 1.1rem; font-weight: 800; border-top-width: 2px; }
.cm-compra #payment { background: transparent; border-radius: 0; }
.cm-compra #payment ul.payment_methods { padding: 0; border: 0; margin: 0; }
.cm-compra #payment ul.payment_methods > li > input[type="radio"],
.cm-compra #payment ul.payment_methods > li > label { display: none; }
.cm-compra #payment div.payment_box { margin: 0; padding: 0; background: transparent; }
.cm-compra #payment div.payment_box::before { display: none; }
.cm-compra #payment div.form-row.place-order { padding: 0; margin: 1rem 0 0; }
.cm-compra #place_order { float: none; width: 100%; padding: 1rem; font-size: 1.05rem; font-weight: 800; border-radius: 12px; }
@media (min-width: 900px) {
	.cm-compra form.checkout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 1.75rem;
		align-items: start; }
	.cm-compra form.checkout > * { grid-column: 1 / -1; }
	.cm-compra form.checkout > #customer_details { grid-column: 1; grid-row: 2 / span 2; }
	.cm-compra form.checkout > #order_review_heading { grid-column: 2; grid-row: 2; margin-top: 0; }
	.cm-compra form.checkout > #order_review { grid-column: 2; grid-row: 3; position: sticky; top: 1rem; }
}
/* Como receber e como pagar: opções em cartões, a escolhida contornada. */
.cm-receber, .cm-meio { margin: 0 0 1.25rem; padding: 0; border: 0; display: flex; flex-direction: column; gap: .6rem; }
.cm-receber__titulo { margin: 0 0 .6rem; padding: 0; font-size: var(--wp--preset--font-size--large); font-weight: 700; }
.cm-receber__opcao, .cm-meio__opcao { display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem; border-radius: 12px;
	border: 1px solid var(--wp--preset--color--linha-forte, #c9cfc7); background: var(--wp--preset--color--branco); cursor: pointer; }
.cm-receber__opcao:has(input:checked), .cm-meio__opcao:has(input:checked) { border: 2px solid var(--wp--preset--color--contrast);
	padding: calc(.8rem - 1px) calc(.9rem - 1px); }
.cm-receber__opcao input, .cm-meio__opcao input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0;
	accent-color: var(--wp--preset--color--contrast); }
.cm-receber__texto, .cm-meio__texto { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 auto; min-width: 0; }
.cm-receber__texto small, .cm-meio__texto small { color: var(--wp--preset--color--texto-2); font-size: var(--wp--preset--font-size--x-small); }
.cm-receber__preco { flex: 0 0 auto; font-size: var(--wp--preset--font-size--small); font-weight: 800; color: var(--wp--preset--color--verde); }
.cm-receber__opcao--desligada, .cm-meio__opcao--desligada { cursor: not-allowed; background: var(--wp--preset--color--base); opacity: .7; }
.cm-receber__opcao--desligada .cm-receber__preco { color: var(--wp--preset--color--texto-2); font-weight: 700; }
.cm-meio__icone { flex: 0 0 auto; display: flex; color: var(--wp--preset--color--contrast); }
.cm-meio__parcelas { display: flex; flex-direction: column; gap: .4rem; padding: .25rem 0 0; }
.cm-meio__parcelas[hidden] { display: none; }
.cm-meio__parcelas label { font-weight: 700; font-size: var(--wp--preset--font-size--small); }
.cm-meio__parcelas select { width: 100%; padding: .65rem .75rem; border-radius: 8px; border: 1px solid var(--wp--preset--color--linha-forte, #c9cfc7); }
.cm-meio__nota { margin: 0; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--texto-2); }

/* =====================================================================
   MEUS PEDIDOS: dentro da conta, só para quem entrou e só os pedidos
   dela (13/10/2026) — a lista e o detalhe com o PIX.
   ===================================================================== */
.cm-meus { max-width: 720px; margin: 0 0 var(--wp--preset--spacing--50); }
.cm-meus__titulo { margin: 0 0 .75rem; font-size: var(--wp--preset--font-size--x-large); }
.cm-meus__lista { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.cm-meus__pedido { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem; border-radius: 14px; text-decoration: none;
	color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--branco); border: 1px solid var(--wp--preset--color--linha); }
.cm-meus__pedido:hover, .cm-meus__pedido:focus-visible { border-color: var(--wp--preset--color--linha-forte); text-decoration: none;
	box-shadow: 0 2px 10px rgba(22, 32, 43, .07); }
.cm-meus__cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .75rem; }
.cm-meus__cabeca .cm-meus__titulo { margin: 0; }
.cm-meus__itens { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--texto-2); }
.cm-meus__pe { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; font-size: var(--wp--preset--font-size--small); }
.cm-meus__pe > span:first-child { color: var(--wp--preset--color--texto-2); }
.cm-meus__ver { margin-left: auto; font-weight: 700; color: var(--wp--preset--color--marca); }
.cm-meus__situacao { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 800;
	letter-spacing: .03em; text-transform: uppercase; background: var(--wp--preset--color--base); color: var(--wp--preset--color--texto-2); }
.cm-meus__situacao--aguardando { background: #fff4dc; color: #8a5a00; }
.cm-meus__situacao--pago { background: #e4f3ea; color: var(--wp--preset--color--verde); }
.cm-meus__situacao--pronto { background: var(--wp--preset--color--verde); color: var(--wp--preset--color--branco); }
.cm-meus__situacao--cancelado { background: #fbe7e9; color: var(--wp--preset--color--marca); }
.cm-meus__vazio { padding: 1rem; border-radius: 12px; background: var(--wp--preset--color--base); color: var(--wp--preset--color--texto-2); }
.cm-meus__aviso { margin: .5rem 0 1.5rem; }
.cm-meus__voltar { display: inline-block; margin-bottom: .75rem; font-weight: 700; color: var(--wp--preset--color--marca); }
.cm-meus__data { margin: .25rem 0 1rem; color: var(--wp--preset--color--texto-2); font-size: var(--wp--preset--font-size--small); }
.cm-meus__linhas { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--wp--preset--color--linha); }
.cm-meus__linhas li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--wp--preset--color--linha); }
.cm-meus__linhas small { color: var(--wp--preset--color--texto-2); }
.cm-meus__total { font-weight: 800; }
.cm-meus__sub { margin: 1.25rem 0 .5rem; font-size: var(--wp--preset--font-size--medium); }
.cm-meus__historico { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--wp--preset--color--linha); }
.cm-meus__historico li { display: flex; flex-direction: column; gap: .1rem; padding: .4rem 0; }
.cm-meus__historico time { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--texto-2); }
.cm-meus .cm-pagar { max-width: none; }
.cm-meus__taxa, .cm-meus__meio { color: var(--wp--preset--color--texto-2); font-size: var(--wp--preset--font-size--small); }

/* AS ETAPAS DO PEDIDO (28/10/2026), em círculos na horizontal: cheio com
   o ✓ é feito, vazado e piscando é o de agora, cinza é o que falta. A
   linha entre dois círculos fica verde até onde o pedido chegou. */
.cm-etapas { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cm-etapas__passo { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem;
	padding: 0 .2rem; }
.cm-etapas__passo + .cm-etapas__passo::before { content: ""; position: absolute; top: 15px; right: calc(50% + 18px);
	left: calc(-50% + 18px); height: 2px; background: #d6dad4; }
.cm-etapas__passo--feito::before, .cm-etapas__passo--atual::before { background: var(--wp--preset--color--verde) !important; }
.cm-etapas__bola { position: relative; z-index: 1; box-sizing: border-box; width: 32px; height: 32px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; border: 2px solid #d6dad4; background: #eef0ec;
	color: var(--wp--preset--color--branco); }
.cm-etapas__passo--feito .cm-etapas__bola { background: var(--wp--preset--color--verde); border-color: var(--wp--preset--color--verde); }
.cm-etapas__passo--atual .cm-etapas__bola { background: var(--wp--preset--color--branco); border: 3px solid var(--wp--preset--color--verde);
	animation: cm-etapa-pisca 1.6s ease-in-out infinite; }
.cm-etapas__nome { font-size: var(--wp--preset--font-size--small); font-weight: 700; line-height: 1.25; }
.cm-etapas__passo--falta .cm-etapas__nome { color: var(--wp--preset--color--texto-2); font-weight: 600; }
.cm-etapas__quando { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--texto-2); }
@keyframes cm-etapa-pisca {
	0%, 100% { box-shadow: 0 0 0 0 rgba(31, 122, 77, .45); opacity: 1; }
	50% { box-shadow: 0 0 0 8px rgba(31, 122, 77, 0); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .cm-etapas__passo--atual .cm-etapas__bola { animation: none; } }
.cm-etapas--compacto { margin: .35rem 0 .2rem; }
.cm-etapas--compacto .cm-etapas__bola { width: 20px; height: 20px; border-width: 2px; }
.cm-etapas--compacto .cm-etapas__bola svg { width: 11px; height: 11px; }
.cm-etapas--compacto .cm-etapas__passo + .cm-etapas__passo::before { top: 9px; right: calc(50% + 12px); left: calc(-50% + 12px); }
.cm-etapas--compacto .cm-etapas__nome { font-size: .7rem; font-weight: 600; }
@media (max-width: 420px) { .cm-etapas__nome { font-size: .72rem; } }

/* =====================================================================
   O CADASTRO E A FINALIZAÇÃO SEM PREENCHER DE NOVO (10/10/2026)
   ===================================================================== */
.cm-cadastro__nota { margin: 0 0 .9rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--texto-2); }
/* Os dados prontos: o resumo no lugar do formulário; "Alterar" (a
   caixinha antes dos campos) devolve o formulário, sem JavaScript. */
.cm-alterar-dados { position: absolute; opacity: 0; pointer-events: none; }
.cm-dados-prontos { padding: .9rem 1rem; border-radius: 12px; background: var(--wp--preset--color--branco);
	border: 1px solid var(--wp--preset--color--linha); position: relative; }
.cm-dados-prontos p { margin: 0; }
.cm-dados-prontos__titulo { font-size: var(--wp--preset--font-size--x-small); font-weight: 800; letter-spacing: .06em;
	text-transform: uppercase; color: var(--wp--preset--color--texto-2); margin-bottom: .35rem !important; }
.cm-dados-prontos__alterar { position: absolute; top: .8rem; right: 1rem; font-weight: 700; color: var(--wp--preset--color--marca); cursor: pointer; }
.cm-alterar-dados:focus-visible + .cm-dados-prontos .cm-dados-prontos__alterar { outline: 2px solid var(--wp--preset--color--marca); outline-offset: 2px; }
.cm-dados-prontos ~ .woocommerce-billing-fields__field-wrapper { display: none; }
.cm-alterar-dados:checked + .cm-dados-prontos { display: none; }
.cm-alterar-dados:checked ~ .woocommerce-billing-fields__field-wrapper { display: block; }

/* =====================================================================
   A PORTA DA LOJA e a CONTA (13/10/2026): entrar e criar o cadastro com a
   cara da ADOVA — woocommerce/myaccount/form-login.php e dashboard.php.
   As abas são dois rádios antes dos painéis: sem JavaScript.
   ===================================================================== */
.cm-porta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0; max-width: 940px; margin: 0 auto;
	border-radius: 20px; overflow: hidden; border: 1px solid var(--wp--preset--color--linha); background: var(--wp--preset--color--branco); }
.cm-porta__lado { padding: 2.2rem 2rem; background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--branco);
	position: relative; }
.cm-porta__lado::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
	background: linear-gradient(90deg, var(--wp--preset--color--sage) 0 33%, var(--wp--preset--color--marca) 33% 66%, var(--wp--preset--color--ambar) 66%); }
.cm-porta__selo { margin: 0 0 .5rem; font-size: var(--wp--preset--font-size--x-small); font-weight: 800; letter-spacing: .14em;
	text-transform: uppercase; color: var(--wp--preset--color--sage); }
.cm-porta__titulo { margin: 0 0 1.4rem; font-size: var(--wp--preset--font-size--x-large); line-height: 1.15; color: var(--wp--preset--color--branco); }
.cm-porta__beneficios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.cm-porta__beneficios li { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--wp--preset--font-size--small); line-height: 1.4; }
.cm-porta__beneficios .cm-icone { flex: 0 0 22px; width: 22px; height: 22px; padding: 3px; border-radius: 50%;
	background: var(--wp--preset--color--marca); color: var(--wp--preset--color--branco); fill: none; stroke: currentColor; stroke-width: 2.4; }
.cm-porta__caixa { padding: 1.6rem 2rem 2rem; }
.cm-porta__radio { position: absolute; opacity: 0; pointer-events: none; }
.cm-porta__abas { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 1.4rem; border-radius: 12px;
	background: var(--wp--preset--color--base); padding: 4px; }
.cm-porta__aba { text-align: center; padding: .65rem .5rem; border-radius: 9px; font-weight: 800; cursor: pointer;
	color: var(--wp--preset--color--texto-2); }
.cm-porta__radio--entrar:checked ~ .cm-porta__abas .cm-porta__aba--entrar,
.cm-porta__radio--cadastro:checked ~ .cm-porta__abas .cm-porta__aba--cadastro {
	background: var(--wp--preset--color--branco); color: var(--wp--preset--color--contrast); box-shadow: 0 1px 4px rgba(22, 32, 43, .12); }
.cm-porta__radio--entrar:focus-visible ~ .cm-porta__abas .cm-porta__aba--entrar,
.cm-porta__radio--cadastro:focus-visible ~ .cm-porta__abas .cm-porta__aba--cadastro { outline: 2px solid var(--wp--preset--color--marca); outline-offset: 2px; }
.cm-porta__radio--entrar:checked ~ .cm-porta__painel--cadastro,
.cm-porta__radio--cadastro:checked ~ .cm-porta__painel--entrar { display: none; }
.cm-porta__form { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.cm-porta__form .form-row { margin: 0 0 .85rem; padding: 0; }
.cm-porta__form label { display: block; margin-bottom: .25rem; font-size: var(--wp--preset--font-size--x-small); font-weight: 700; }
.cm-porta__form input.input-text { width: 100%; padding: .75rem .85rem; border: 1px solid var(--wp--preset--color--linha-forte);
	border-radius: 10px; font-size: 1rem; background: var(--wp--preset--color--branco); }
.cm-porta__form input.input-text:focus { outline: none; border-color: var(--wp--preset--color--marca); box-shadow: 0 0 0 3px rgba(162, 36, 49, .15); }
.cm-porta__form .form-row-first, .cm-porta__form .form-row-last { width: calc(50% - .4rem); }
.cm-porta__linha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin: .2rem 0 1rem; }
.cm-porta__lembrar { display: flex !important; align-items: center; gap: .4rem; font-weight: 600 !important; margin: 0 !important; }
.cm-porta__esqueci { font-size: var(--wp--preset--font-size--small); font-weight: 700; color: var(--wp--preset--color--marca); }
.cm-porta__botao { width: 100%; padding: .95rem 1rem !important; border-radius: 12px !important; border: 0 !important; font-weight: 800 !important;
	font-size: 1.05rem !important; background: var(--wp--preset--color--marca) !important; color: var(--wp--preset--color--branco) !important; cursor: pointer; }
.cm-porta__botao:hover, .cm-porta__botao:focus-visible { background: var(--wp--preset--color--contrast) !important; }
.cm-porta__troca { margin: 1rem 0 0; text-align: center; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--texto-2); }
.cm-porta__troca label { display: inline; font-weight: 800; color: var(--wp--preset--color--marca); cursor: pointer; text-decoration: underline; }
.cm-porta .woocommerce-privacy-policy-text { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--texto-2); }
.cm-porta .woocommerce-privacy-policy-text p { margin: 0 0 .8rem; }
@media (max-width: 781px) {
	.cm-porta { grid-template-columns: 1fr; border-radius: 16px; }
	.cm-porta__lado { padding: 1.4rem 1.25rem 1.6rem; }
	.cm-porta__titulo { margin-bottom: .9rem; font-size: var(--wp--preset--font-size--large); }
	.cm-porta__caixa { padding: 1.25rem; }
	.cm-porta__form .form-row-first, .cm-porta__form .form-row-last { width: 100%; }
}
/* A conta de quem entrou: o menu vira abas no alto, e o resto é nosso. */
.woocommerce-account .woocommerce-MyAccount-navigation { width: auto; float: none; margin-bottom: 1.2rem; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 4px; display: inline-flex; flex-wrap: wrap; gap: 4px;
	border-radius: 12px; background: var(--wp--preset--color--base); }
/* O woocommerce-blocktheme.css põe 1em em cima de cada aba MENOS a primeira
   (li:first-child), e ela ficava 16px acima das outras. O nth-child(n) pesa
   mais que o :first-child dele. */
.woocommerce-account .woocommerce-MyAccount-navigation ul li:nth-child(n) { margin: 0; padding: 0; border: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: .55rem 1rem; border-radius: 9px; font-weight: 700;
	text-decoration: none; color: var(--wp--preset--color--texto-2); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--wp--preset--color--branco); color: var(--wp--preset--color--contrast);
	box-shadow: 0 1px 4px rgba(22, 32, 43, .12); }
.woocommerce-account .woocommerce-MyAccount-content { width: auto; float: none; }
.cm-conta__ola { margin: 0 0 1rem; font-size: var(--wp--preset--font-size--large); }
.cm-conta__cpf small { display: block; margin-top: .25rem; color: var(--wp--preset--color--texto-2); }
.woocommerce-EditAccountForm p:has(#account_display_name) { display: none; }
.woocommerce-EditAccountForm input.input-text { padding: .7rem .8rem; border: 1px solid var(--wp--preset--color--linha-forte); border-radius: 10px; width: 100%; }
.woocommerce-EditAccountForm .button { border-radius: 12px; padding: .8rem 1.3rem; font-weight: 800; background: var(--wp--preset--color--marca);
	color: var(--wp--preset--color--branco); border: 0; }

/* =====================================================================
   O PAINEL DA LOJA (/minha-loja/, 14/10/2026) — o celular primeiro. A
   marcação é do mu-plugins/calcemais-lojas.php; o script que acende a
   busca, o teto, o subir/descer e o "copiar" é o assets/loja-painel.js.
   ===================================================================== */
.cm-painel { display: flex; flex-direction: column; gap: 1rem; }
/* A largura de um campo INCLUI a borda e o recheio: sem isto o campo de
   100% passa da borda do cartão no celular (medido na prova, 14/10/2026). */
.cm-painel *, .cm-painel *::before, .cm-painel *::after, .cm-partilha, .cm-dicap * { box-sizing: border-box; }
.cm-painel--fora { max-width: 560px; margin: 0 auto; padding: 1.5rem; background: var(--wp--preset--color--branco); border: 1px solid var(--wp--preset--color--linha); border-radius: var(--wp--custom--raio); }
.cm-painel__topo { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--branco); border-radius: var(--wp--custom--raio); }
.cm-painel__topo > div { flex: 1; min-width: 0; }
.cm-painel__foto { display: block; flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--wp--preset--color--branco); }
.cm-painel__foto--grande { width: 96px; height: 96px; }
.cm-painel__foto .cm-vend__foto { width: 100%; height: 100%; object-fit: cover; font-size: 1rem; }
.cm-painel__sobre { margin: 0; font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--sage); }
.cm-painel__titulo { margin: 0; font-size: var(--wp--preset--font-size--x-large); line-height: 1.2; }
.cm-painel__topo .cm-painel__titulo { color: var(--wp--preset--color--branco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-painel__ver { color: var(--wp--preset--color--branco); font-size: var(--wp--preset--font-size--small); font-weight: 650; white-space: nowrap; }
.cm-painel__ver:hover, .cm-painel__ver:focus-visible { color: var(--wp--preset--color--sage); }
.cm-painel__abas { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--wp--preset--color--linha-forte); scrollbar-width: none; }
.cm-painel__abas::-webkit-scrollbar { display: none; }
.cm-painel__abas a { padding: .7rem 1rem; font-size: var(--wp--preset--font-size--small); font-weight: 650; color: var(--wp--preset--color--texto-2); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.cm-painel__abas a.is-atual { color: var(--wp--preset--color--texto); border-bottom-color: var(--wp--preset--color--marca); }
.cm-painel__aviso { margin: 0; padding: .75rem 1rem; background: var(--wp--preset--color--branco); border: 1px solid var(--wp--preset--color--linha); border-left: 4px solid var(--wp--preset--color--verde); border-radius: var(--wp--custom--raioP); font-weight: 550; }
.cm-painel__aviso--erro { border-left-color: var(--wp--preset--color--marca); }
.cm-painel__bloco { padding: 1.1rem 1.2rem; background: var(--wp--preset--color--branco); border: 1px solid var(--wp--preset--color--linha); border-radius: var(--wp--custom--raio); }
.cm-painel__h2 { margin: 0 0 .8rem; font-size: var(--wp--preset--font-size--large); }
.cm-painel__h3 { margin: 1.2rem 0 .6rem; font-size: var(--wp--preset--font-size--medium); }
.cm-painel__nota { margin: .4rem 0 .8rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--texto-2); }
.cm-painel small { display: block; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--texto-3); }

/* O que fazer agora: cada linha leva à aba que resolve. */
.cm-painel__convites { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cm-painel__convites li { margin: 0; }
.cm-painel__convites a { display: block; padding: .7rem .9rem; border-radius: var(--wp--custom--raioP); background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--linha); color: var(--wp--preset--color--texto); text-decoration: none; font-weight: 550; }
.cm-painel__convites a::after { content: " →"; color: var(--wp--preset--color--marca); font-weight: 700; }
.cm-painel__convites a:hover, .cm-painel__convites a:focus-visible { border-color: var(--wp--preset--color--contrast); }

/* Os números: 7 e 30 dias lado a lado, e os 14 dias em barras. */
.cm-painel__periodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.cm-painel__periodo h3 { margin: 0 0 .5rem; font-size: var(--wp--preset--font-size--small); letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--texto-3); }
.cm-painel__periodo dl { margin: 0; display: grid; gap: 6px; }
.cm-painel__num { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem .75rem; background: var(--wp--preset--color--base); border-radius: var(--wp--custom--raioP); }
.cm-painel__num dt { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--texto-2); }
.cm-painel__num dt { flex: 1; min-width: 0; }
.cm-painel__num dd { flex: none; margin: 0; font-size: var(--wp--preset--font-size--large); font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-painel__num dd small { font-weight: 650; color: var(--wp--preset--color--verde); }
.cm-painel__sem { font-size: var(--wp--preset--font-size--x-small); font-weight: 650; color: var(--wp--preset--color--marca); }
.cm-painel__dias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; height: 150px; align-items: end; }
.cm-painel__dias li { margin: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.cm-painel__barra { display: block; width: 100%; max-width: 26px; height: calc(var(--v) * .7); min-height: 2px; background: var(--wp--preset--color--contrast); border-radius: 4px 4px 0 0; }
.cm-painel__zapdia { min-height: 1em; font-size: .7rem; font-weight: 700; color: var(--wp--preset--color--verde); }
.cm-painel__dia { font-size: .7rem; color: var(--wp--preset--color--texto-3); }

/* Os pedidos e os links. */
.cm-painel__tabela { overflow-x: auto; }
.cm-painel__tabela table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--small); }
.cm-painel__tabela th, .cm-painel__tabela td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--wp--preset--color--linha); vertical-align: top; }
.cm-painel__tabela th { font-size: var(--wp--preset--font-size--x-small); letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--texto-3); }
.cm-painel__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cm-painel__links li { margin: 0; display: grid; gap: .4rem; padding: .7rem .8rem; background: var(--wp--preset--color--base); border-radius: var(--wp--custom--raioP); }
.cm-painel__link-nome { font-size: var(--wp--preset--font-size--small); font-weight: 650; }
.cm-painel__links input[type="text"] { width: 100%; font: inherit; font-size: var(--wp--preset--font-size--x-small); padding: .45rem .6rem; border: 1px solid var(--wp--preset--color--linha-forte); border-radius: 6px; background: var(--wp--preset--color--branco); color: var(--wp--preset--color--texto-2); }

/* Os formulários. */
.cm-painel__form { display: grid; gap: 1rem; }
.cm-painel__form--linha { display: inline; }
.cm-campo { display: grid; gap: .35rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.cm-campo > * { min-width: 0; }
.cm-campo > span, .cm-campo > legend { padding: 0; font-size: var(--wp--preset--font-size--small); font-weight: 650; }
.cm-campo em { font-style: normal; font-weight: 500; color: var(--wp--preset--color--texto-3); }
.cm-campo input[type="text"], .cm-campo input[type="tel"], .cm-campo textarea {
	width: 100%; font: inherit; padding: .65rem .8rem; border: 1px solid var(--wp--preset--color--linha-forte);
	border-radius: var(--wp--custom--raioP); background: var(--wp--preset--color--branco); color: var(--wp--preset--color--texto);
}
.cm-campo input[type="file"] { font: inherit; font-size: var(--wp--preset--font-size--small); max-width: 100%; }
.cm-campo__aviso { font-size: var(--wp--preset--font-size--x-small); font-weight: 650; color: var(--wp--preset--color--marca); }
/* A capa tirada do vídeo, no formulário do destaque (21/10/2026). */
.cm-capa-auto { display: flex; align-items: center; gap: .7rem; margin: -.2rem 0 0; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--texto-3); }
.cm-capa-auto[hidden] { display: none; }
.cm-capa-auto img { width: 54px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--wp--custom--raioP); flex: 0 0 auto; }
.cm-campo--linha { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cm-campo--linha > legend { float: left; width: 100%; margin-bottom: .35rem; }
.cm-campo--marca { display: flex; gap: .5rem; align-items: center; font-size: var(--wp--preset--font-size--small); }
.cm-pilula { position: relative; }
.cm-pilula input { position: absolute; opacity: 0; pointer-events: none; }
.cm-pilula span { display: inline-block; padding: .5rem .95rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--linha-forte); background: var(--wp--preset--color--branco); font-size: var(--wp--preset--font-size--small); font-weight: 600; cursor: pointer; }
.cm-pilula input:checked + span { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--branco); }
.cm-pilula input:focus-visible + span { outline: 3px solid var(--wp--preset--color--marca); outline-offset: 2px; }
.cm-painel__botoes { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 0; }
.cm-painel__discreto { font: inherit; font-size: var(--wp--preset--font-size--x-small); font-weight: 650; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--linha-forte); background: none; color: var(--wp--preset--color--texto-2); cursor: pointer; }
.cm-painel__discreto:hover, .cm-painel__discreto:focus-visible { border-color: var(--wp--preset--color--marca); color: var(--wp--preset--color--marca); }
button[disabled] { opacity: .6; cursor: progress; }

/* As listas do painel: destaques no ar, dicas, coleções, fotos. */
.cm-painel__vivos, .cm-painel__dicas, .cm-painel__colecoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cm-painel__vivos li { margin: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .8rem; align-items: center; }
.cm-painel__vivos .cm-destaque__quadro { width: 64px; }
.cm-painel__vivos li > div, .cm-painel__dicas li > div:first-child, .cm-painel__colecoes li > div:first-child { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cm-painel__dicas li, .cm-painel__colecoes li { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; align-items: center; padding: .7rem .8rem; background: var(--wp--preset--color--base); border-radius: var(--wp--custom--raioP); }
.cm-painel__dicas .cm-partilha { width: 100%; }
.cm-painel__acoes { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; font-size: var(--wp--preset--font-size--small); font-weight: 650; }
.cm-painel__fotos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cm-painel__fotos li { margin: 0; }
.cm-painel__fotos label { display: grid; gap: .2rem; font-size: var(--wp--preset--font-size--x-small); }
.cm-painel__fotos img { display: block; width: 84px; height: 84px; object-fit: cover; border-radius: 6px; }
/* As fotos das peças (21/10/2026): uma caixa dobrável por peça, com a foto
   que aparece hoje, o nome e quantas fotos dela já tem. */
.cm-painel__fotos li > span { display: grid; gap: .15rem; margin-top: .25rem; font-size: var(--wp--preset--font-size--x-small); }
.cm-painel__fotos li > span label { display: flex; align-items: center; gap: .3rem; }
.cm-painel__fotoprods { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cm-painel__fotoprods > li { margin: 0; min-width: 0; }
.cm-painel__fotoprod { border: 1px solid var(--wp--preset--color--linha); border-radius: 10px; background: var(--wp--preset--color--branco); }
.cm-painel__fotoprod[open] { border-color: var(--wp--preset--color--linha-forte); }
.cm-painel__fotoprod > summary { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; cursor: pointer; list-style: none; }
.cm-painel__fotoprod > summary::-webkit-details-marker { display: none; }
.cm-painel__fotoprod > summary::after { content: "Trocar a foto"; margin-left: auto; flex: 0 0 auto; font-size: var(--wp--preset--font-size--x-small); font-weight: 650; color: var(--wp--preset--color--marca); }
.cm-painel__fotoprod[open] > summary::after { content: "Fechar"; }
.cm-painel__fotoprod-mini { flex: 0 0 48px; width: 48px; height: 64px; border-radius: 6px; overflow: hidden; background: var(--wp--preset--color--base); }
.cm-painel__fotoprod-mini img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cm-painel__fotoprod-nome { display: grid; gap: .1rem; min-width: 0; }
.cm-painel__fotoprod-nome strong { font-size: var(--wp--preset--font-size--small); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cm-painel__fotoprod-nome small { color: var(--wp--preset--color--texto-3); }
.cm-painel__fotoprod > form { padding: 0 .75rem .75rem; }
.cm-painel__perfil { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* A ESCOLHA de produtos: a lista com foto (inteira), nome e preço; os
   marcados no alto, na ordem — a ordem gravada é a deles. */
.cm-escolha { border: 1px solid var(--wp--preset--color--linha-forte); border-radius: var(--wp--custom--raioP); background: var(--wp--preset--color--branco); }
.cm-escolha__topo { display: flex; gap: .6rem; align-items: center; padding: .5rem; border-bottom: 1px solid var(--wp--preset--color--linha); }
.cm-escolha__busca { flex: 1; min-width: 0; width: 100%; font: inherit; padding: .55rem .7rem; border: 1px solid var(--wp--preset--color--linha-forte); border-radius: 6px; }
.cm-escolha__conta { margin-left: auto; font-size: var(--wp--preset--font-size--x-small); font-weight: 650; color: var(--wp--preset--color--texto-2); white-space: nowrap; }
.cm-escolha__lista { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow-y: auto; }
.cm-escolha__item { margin: 0; display: flex; align-items: center; gap: .4rem; padding: .35rem .5rem; border-bottom: 1px solid var(--wp--preset--color--linha); }
.cm-escolha__item:has(input:checked) { background: var(--wp--preset--color--base); }
.cm-escolha__item label { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 48px minmax(0, 1fr) auto; gap: .6rem; align-items: center; cursor: pointer; }
.cm-escolha__item label > .cm-escolha__nome:nth-child(2) { grid-column: 2 / -1; }
.cm-escolha__item img, .cm-escolha__semfoto { display: block; width: 48px; height: 48px; object-fit: contain; background: var(--wp--preset--color--base); border-radius: 6px; }
.cm-escolha__nome { min-width: 0; font-size: var(--wp--preset--font-size--small); line-height: 1.25; }
.cm-escolha__nome small { display: inline; color: var(--wp--preset--color--texto-3); }
.cm-escolha__preco { font-size: var(--wp--preset--font-size--small); font-weight: 700; color: var(--wp--preset--color--marca); white-space: nowrap; }
.cm-escolha__mover { display: flex; gap: 4px; }
/* `hidden` não vence `display` de autor (a lição de 31/07/2026): sem isto
   as setas apareciam também nas peças não marcadas. */
.cm-escolha__mover[hidden], .cm-escolha__busca[hidden], .cm-escolha__item[hidden] { display: none; }
.cm-escolha__mover button { font: inherit; width: 30px; height: 30px; border: 1px solid var(--wp--preset--color--linha-forte); border-radius: 6px; background: var(--wp--preset--color--branco); cursor: pointer; }
.cm-escolha__vazio { padding: .8rem; color: var(--wp--preset--color--texto-3); }
@media (max-width: 600px) {
	.cm-escolha__item label { grid-template-columns: auto 44px minmax(0, 1fr); }
	.cm-escolha__preco { grid-column: 3; }
	.cm-painel__topo { flex-wrap: wrap; }
	.cm-painel__ver { flex-basis: 100%; padding-left: calc(56px + .9rem); }
}

/* Na página do produto: o "como veste" que a loja escreveu. */
.cm-voz__veste { margin: 0; font-size: var(--wp--preset--font-size--x-small); font-weight: 650; color: var(--wp--preset--color--verde); }

/* =====================================================================
   AS LOJAS NA PLATAFORMA (14/10/2026): a página /lojas/, a faixa da
   home e "as lojas que têm esta peça" no produto. O rosto da loja
   preenche o círculo (cover); as peças, como em toda a loja, aparecem
   INTEIRAS (contain). O anel colorido é o mesmo dos destaques: só quem
   tem destaque no ar o ganha.
   ===================================================================== */
.cm-categorias__lojas { font-weight: 700; }
.cm-lojas__topo { margin-bottom: var(--wp--preset--spacing--40); }
.cm-lojas__titulo { margin: 0 0 .4rem; font-size: var(--wp--preset--font-size--xx-large); }
.cm-lojas__sobre { margin: 0; max-width: 60ch; color: var(--wp--preset--color--texto-2); }
.cm-lojas__vazio { padding: 1.5rem; border: 1px dashed var(--wp--preset--color--linha-forte); border-radius: var(--wp--custom--raio); color: var(--wp--preset--color--texto-2); }

.cm-lojas__grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.cm-lojas__item { margin: 0; min-width: 0; }
.cm-lojas__cartao {
	display: flex; flex-direction: column; align-items: center; gap: .45rem; height: 100%; padding: 1.2rem 1rem 1rem;
	background: var(--wp--preset--color--branco); border: 1px solid var(--wp--preset--color--linha); border-radius: var(--wp--custom--raio);
	color: var(--wp--preset--color--texto); text-decoration: none; text-align: center; transition: transform .2s ease, box-shadow .2s ease;
}
.cm-lojas__cartao:hover, .cm-lojas__cartao:focus-visible { transform: translateY(-2px); box-shadow: var(--wp--preset--shadow--cartao); text-decoration: none; }
.cm-lojas__anel { display: block; flex: none; padding: 3px; border-radius: 50%; background: var(--wp--preset--color--linha); }
.cm-lojas__anel--vivo { background: linear-gradient(135deg, var(--wp--preset--color--marca), var(--wp--preset--color--ambar)); }
.cm-lojas__anel .cm-vend__foto { width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--wp--preset--color--branco); background: var(--wp--preset--color--branco); object-fit: cover; }
.cm-lojas__nome { display: block; font-weight: 700; line-height: 1.25; }
.cm-lojas__bio { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--texto-2); line-height: 1.4; }
.cm-lojas__tem { display: block; font-size: var(--wp--preset--font-size--x-small); font-weight: 600; color: var(--wp--preset--color--marca); }
.cm-lojas__pecas { display: flex; gap: 6px; margin-top: auto; padding-top: .35rem; }
.cm-lojas__pecas img { width: 56px; height: 56px; object-fit: contain; background: var(--wp--preset--color--branco); border: 1px solid var(--wp--preset--color--linha); border-radius: 6px; }

/* A faixa da home: rola de lado, como a dos destaques, sem barra. */
.cm-lojas__cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.cm-lojas__cabeca .cm-secao__titulo { margin-bottom: 1rem; }
.cm-lojas__todas { font-size: var(--wp--preset--font-size--small); font-weight: 700; color: var(--wp--preset--color--marca); white-space: nowrap; }
.cm-lojas__faixa { list-style: none; margin: 0; padding: 0 0 6px; display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.cm-lojas__faixa::-webkit-scrollbar { display: none; }
.cm-lojas__faixa .cm-lojas__item { flex: none; width: 150px; }
.cm-lojas__faixa .cm-lojas__cartao { padding: 1rem .7rem .9rem; }
.cm-lojas__faixa .cm-lojas__anel .cm-vend__foto { width: 70px; height: 70px; }
.cm-lojas__faixa .cm-lojas__nome { font-size: var(--wp--preset--font-size--small); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* No produto: uma linha por loja, com o rosto, o nome e o que ela tem. */
.cm-lojas--produto { margin-top: var(--wp--preset--spacing--50); }
.cm-lojas__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.cm-lojas__lista li { margin: 0; }
.cm-lojas__linha {
	display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem; background: var(--wp--preset--color--branco);
	border: 1px solid var(--wp--preset--color--linha); border-radius: var(--wp--custom--raio); color: var(--wp--preset--color--texto); text-decoration: none;
}
.cm-lojas__linha:hover, .cm-lojas__linha:focus-visible { border-color: var(--wp--preset--color--contrast); text-decoration: none; }
.cm-lojas__linha .cm-lojas__anel .cm-vend__foto { width: 48px; height: 48px; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .cm-lojas__cartao { transition: none; } .cm-lojas__cartao:hover { transform: none; } }

/* =====================================================================
   DENTRO DO APP "CALCE MAIS LOJA" (14/10/2026). O app escreve no
   User-Agent e o site põe `cm-app` no <body>: a barra de baixo do app
   já leva a Lojas, à Sacola e à Conta, então a barra de benefícios e os
   atalhos do topo saem — menos o WhatsApp, que a barra não tem. A busca,
   o logo e as categorias ficam.
   ===================================================================== */
.cm-app .cm-beneficios { display: none; }
.cm-app .cm-atalhos .cm-atalho:not(.cm-atalho--zap) { display: none; }

/* =====================================================================
   O ESQUENTA BLACK (03/11/2026). Tudo aqui vale só com a classe
   `cm-esquenta` no <body> — quem a põe é o mu-plugin da campanha, com ela
   ligada. Desligada, a loja é a Vitrine limpa sem mexer em mais nada.
   A VITRINE continua clara: a foto do produto se mescla com o bege
   (multiply), e num fundo preto ela ficaria preta. Escuros são a faixa do
   alto, a capa, o atalho pelo preço e a etiqueta da foto.
   ===================================================================== */
:root { --esq-noite: #0F1318; --esq-noite-2: #1A2029; --esq-linha: #2B333E; --esq-texto: #E9EAEC; --esq-texto-2: #A8AEB6; --esq-rosa: #F2B6BC; }

/* 1. a faixa fina vira a da campanha */
.cm-esquenta .cm-beneficios { background: var(--esq-noite); }
.cm-esquenta .cm-beneficios__lista li { color: var(--esq-texto); }
.cm-esquenta .cm-beneficios__lista li + li::before { color: var(--esq-texto-2); }
.cm-esquenta .cm-beneficios__lista strong { color: var(--esq-rosa); font-weight: 600; letter-spacing: .04em; }

/* 2. a categoria da campanha, a primeira da linha */
.cm-esquenta .cm-categorias a.cm-cat-black { color: var(--wp--preset--color--marca); font-weight: 600; }
.cm-cat-black::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--wp--preset--color--marca); margin-right: .45rem; vertical-align: .1em; }

/* 3. a capa: de ponta a ponta da tela. A sombra pinta para os lados e o
   clip-path a deixa sair só na horizontal — sem mudar a marcação, e sem
   rolagem de lado (sombra não conta na largura da página). */
.cm-esquenta .cm-capa--esquenta {
	background: var(--esq-noite); color: var(--esq-texto); position: relative;
	box-shadow: 0 0 0 100vmax var(--esq-noite); clip-path: inset(0 -100vmax);
	margin-top: 0; padding: clamp(30px, 5vw, 64px) 0 clamp(36px, 5vw, 64px);
}
.cm-capa__regua { display: block; width: 132px; height: 6px; margin: 0 0 -.3rem;
	background: linear-gradient(90deg, var(--wp--preset--color--sage) 0 33.3%, var(--wp--preset--color--marca) 33.3% 66.6%, var(--wp--preset--color--ambar) 66.6% 100%); }
.cm-esquenta .cm-capa--esquenta .cm-capa__selo { color: var(--esq-rosa); font-weight: 600; }
.cm-esquenta .cm-capa--esquenta h2 { color: var(--wp--preset--color--branco); max-width: 14ch; }
.cm-esquenta .cm-capa--esquenta h2 em { font-style: italic; color: var(--esq-rosa); }
.cm-esquenta .cm-capa--esquenta .cm-capa__centro p { color: var(--esq-texto-2); }
.cm-esquenta .cm-capa--esquenta .cm-capa__centro .cm-capa__ate { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .5rem; color: var(--esq-texto); max-width: none; }
.cm-capa__ate b { font-family: var(--wp--preset--font-family--titulo); font-weight: 400; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; color: var(--wp--preset--color--branco); }
.cm-capa__ate span { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; }
.cm-capa__ate small { flex-basis: 100%; margin-top: .5rem; font-size: .95rem; color: var(--esq-texto-2); }
.cm-esquenta .cm-capa--esquenta .cm-capa__botao { background: var(--wp--preset--color--marca); }
.cm-esquenta .cm-capa--esquenta .cm-capa__botao:hover, .cm-esquenta .cm-capa--esquenta .cm-capa__botao:focus-visible { background: var(--wp--preset--color--branco); color: var(--esq-noite); }
.cm-esquenta .cm-capa--esquenta .cm-capa__link { color: var(--wp--preset--color--branco); border-bottom-color: rgba(255, 255, 255, .55); }
.cm-esquenta .cm-capa--esquenta .cm-capa__link:hover, .cm-esquenta .cm-capa--esquenta .cm-capa__link:focus-visible { color: var(--esq-rosa); border-bottom-color: var(--esq-rosa); }
.cm-esquenta .cm-capa--esquenta .cm-capa__foto span { color: var(--esq-texto-2); }
/* O preço da peça na capa. A regra da capa grampeia TODO <span> da foto
   numa linha (-webkit-box); o preço tem spans dentro, e eles voltam a ser
   texto corrido — menos o do leitor de tela, que continua escondido. */
.cm-esquenta .cm-capa__foto .cm-capa__precos { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .45rem; -webkit-line-clamp: unset; overflow: visible; color: var(--esq-texto); }
.cm-esquenta .cm-capa__foto .cm-capa__precos span:not(.screen-reader-text) { display: inline; -webkit-line-clamp: unset; overflow: visible; color: inherit; }
.cm-esquenta .cm-capa__foto .cm-capa__precos del { color: #7E8791; font-size: .85em; }
.cm-esquenta .cm-capa__foto .cm-capa__precos ins { text-decoration: none; color: var(--wp--preset--color--branco); font-weight: 700; }
.cm-esquenta .cm-capa__foto .cm-capa__precos .cm-desconto { display: inline-block; margin-left: 0; color: var(--wp--preset--color--branco); }
.cm-esquenta .cm-capa__foto .cm-capa__precos .cm-pix { color: #8FD3B0; }
.cm-esquenta .cm-capa__foto .cm-capa__precos span.cm-parcelas { display: none; }

/* 3b. a contagem */
.cm-contagem { margin: .3rem 0 .2rem; }
.cm-esquenta .cm-capa--esquenta .cm-contagem p { color: var(--esq-texto); }
.cm-esquenta .cm-capa--esquenta .cm-contagem__titulo { margin: 0 0 .7rem; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }
.cm-contagem__titulo b { color: var(--wp--preset--color--ambar); font-weight: 700; }
.cm-contagem[data-estado="hoje"] .cm-contagem__titulo b { color: var(--esq-rosa); }
.cm-contagem__relogio { display: flex; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.cm-contagem__relogio[hidden] { display: none; }
.cm-contagem__relogio li { margin: 0; min-width: 4.4rem; padding: .7rem .4rem .55rem; background: var(--esq-noite-2); border: 1px solid var(--esq-linha); text-align: center; }
.cm-contagem[data-estado="hoje"] .cm-contagem__relogio li { border-color: var(--wp--preset--color--marca); }
.cm-contagem__relogio b { display: block; font-family: var(--wp--preset--font-family--titulo); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; color: var(--wp--preset--color--branco); font-variant-numeric: tabular-nums; }
.cm-contagem__relogio span { display: block; margin-top: .35rem; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--esq-texto-2); }
.cm-esquenta .cm-capa--esquenta .cm-contagem__quando { margin: .7rem 0 0; font-size: .86rem; color: var(--esq-texto-2); }
.cm-contagem__quando strong { color: var(--esq-texto); font-weight: 600; }
@media (max-width: 600px) {
	.cm-contagem__relogio { gap: .4rem; }
	.cm-contagem__relogio li { min-width: 0; flex: 1 1 0; }
}

/* 4. as vantagens, logo abaixo da capa */
.cm-vantagens { list-style: none; margin: 0 0 var(--wp--preset--spacing--30); padding: 1rem 0; display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: .8rem 1.2rem; border-bottom: 1px solid var(--wp--preset--color--linha-fina); }
.cm-vantagens li { margin: 0; display: flex; gap: .6rem; align-items: center; font-size: .82rem; line-height: 1.3; color: var(--wp--preset--color--texto-2); }
.cm-vantagens strong { display: block; color: var(--wp--preset--color--contrast); font-weight: 600; }
.cm-vantagens svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--wp--preset--color--contrast); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) { .cm-vantagens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 5. o destaque do dia */
.cm-oferta-dia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: center;
	margin: var(--wp--preset--spacing--50) 0 0; padding: clamp(14px, 2.5vw, 26px); border: 1px solid var(--wp--preset--color--linha-forte); }
.cm-oferta-dia__foto { display: block; background: var(--wp--preset--color--moldura); }
.cm-oferta-dia__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; mix-blend-mode: multiply; }
.cm-oferta-dia__selo { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--wp--preset--color--marca); }
.cm-oferta-dia__relogio { letter-spacing: .06em; font-variant-numeric: tabular-nums; background: var(--esq-noite); color: var(--wp--preset--color--branco); padding: .3rem .6rem; font-weight: 600; }
.cm-oferta-dia h3 { margin: .7rem 0 .4rem; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.cm-oferta-dia h3 a { color: inherit; text-decoration: none; }
.cm-oferta-dia .cm-cartao__preco del { color: var(--wp--preset--color--texto-3); margin-right: .4rem; }
.cm-oferta-dia .cm-cartao__preco ins { text-decoration: none; }
.cm-oferta-dia .cm-cartao__preco ins .woocommerce-Price-amount { font-size: 1.6rem; color: var(--wp--preset--color--marca); font-weight: 700; }
.cm-oferta-dia .cm-capa__botao { margin-top: 1rem; }
@media (max-width: 700px) { .cm-oferta-dia { grid-template-columns: 1fr; } }

/* 6. "Já com preço de Black": o título, o atalho pelo preço, as categorias */
.cm-esquenta-bloco { margin-top: var(--wp--preset--spacing--50); }
.cm-black__titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; scroll-margin-top: 140px; }
.cm-black__ver { font-family: var(--wp--preset--font-family--sistema); font-size: .85rem; letter-spacing: .04em; color: var(--wp--preset--color--contrast); border-bottom: 1px solid currentColor; text-decoration: none; }
.cm-faixas-preco { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 10px; }
.cm-faixas-preco li { margin: 0; }
.cm-faixas-preco a { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem; background: var(--esq-noite); color: var(--esq-texto); text-decoration: none; }
.cm-faixas-preco a:hover, .cm-faixas-preco a:focus-visible { background: var(--wp--preset--color--marca); }
.cm-faixas-preco span { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--esq-texto-2); }
.cm-faixas-preco a:hover span, .cm-faixas-preco a:hover small, .cm-faixas-preco a:focus-visible span, .cm-faixas-preco a:focus-visible small { color: var(--wp--preset--color--branco); }
.cm-faixas-preco b { font-family: var(--wp--preset--font-family--titulo); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.75rem); color: var(--wp--preset--color--branco); }
.cm-faixas-preco small { font-size: .74rem; color: var(--esq-texto-2); }
.cm-filtro-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 1.4rem; padding: 0; list-style: none; }
.cm-filtro-chips li { margin: 0; }
.cm-filtro-chips a { display: inline-block; padding: .45rem .9rem; border: 1px solid var(--wp--preset--color--linha-forte); font-size: .82rem; color: var(--wp--preset--color--texto); text-decoration: none; }
.cm-filtro-chips a:hover, .cm-filtro-chips a:focus-visible { border-color: var(--wp--preset--color--contrast); }
.cm-filtro-chips small { color: var(--wp--preset--color--texto-3); }
.cm-validade { margin: .35rem 0 0; font-size: .78rem; color: var(--wp--preset--color--texto-3); }

/* 7. a etiqueta da foto diz a campanha; o selo -NN% é o mesmo de sempre */
.cm-esquenta .cm-grade li:has(.cm-desconto) .cm-cartao__foto a::before { content: "Esquenta Black"; background: var(--esq-noite); }

/* 8. o preço no Pix e as parcelas (só com a venda valendo — o functions.php decide) */
.cm-pix { font-size: .72rem; font-weight: 600; color: var(--wp--preset--color--verde); margin-left: .3rem; letter-spacing: .02em; }
.cm-parcelas { display: block; margin: .2rem 0 0; font-size: .76rem; font-weight: 400; color: var(--wp--preset--color--texto-2); }
.cm-produto .cm-produto__preco .cm-parcelas { font-size: .85rem; margin-top: .4rem; }

/* 9. a faixa da campanha na página do produto */
.cm-esq-faixa { display: flex; gap: .7rem; align-items: center; margin: .2rem 0 1rem; padding: .7rem .9rem; background: var(--esq-noite); color: var(--esq-texto); font-size: .86rem; line-height: 1.4; }
.cm-esq-faixa strong { color: var(--esq-rosa); font-weight: 600; }
.cm-esq-faixa svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--wp--preset--color--ambar); stroke-width: 1.6; }

/* 10. as lojas no esquenta: o anel dos destaques ganha a cor da campanha */
.cm-esquenta .cm-destaques__anel { background: linear-gradient(135deg, var(--wp--preset--color--marca), var(--esq-noite)); }