/*
 * base.css — fundação do tema.
 *
 * Reset enxuto, tipografia da Poppins, container, botões, formulários e um
 * punhado de utilitários. Nada aqui é de uma página específica: se a regra só
 * serve à home ou ao produto, ela mora na folha daquela área.
 *
 * Toda cor, espaço, raio, sombra e tamanho de fonte vem de tokens.css. Valores
 * crus só aparecem onde não há token possível: espessura de borda (1px),
 * porcentagens de layout e as quebras de media query (640/900/1200).
 */

/* ==========================================================================
   1. Fonte
   A Poppins é servida da própria loja (uploads/2026/04), como manda o
   enqueue.php, que já faz o preload dos dois .woff2. Só existem os pesos 400 e
   700 no pacote migrado — 500 e 600 dos tokens caem no arredondamento do
   navegador, sem download extra.
   ========================================================================== */

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../../../../uploads/2026/04/Poppins-Regular.woff2") format("woff2"),
	     url("../../../../uploads/2026/04/Poppins-Regular.woff") format("woff");
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../../../../uploads/2026/04/Poppins-Bold.woff2") format("woff2"),
	     url("../../../../uploads/2026/04/Poppins-Bold.woff") format("woff");
}

/* ==========================================================================
   2. Reset
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important; /* vence animação de plugin */
		transition-duration: .01ms !important;
	}
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

ul[class],
ol[class] {
	margin: 0;
	padding: 0;
	list-style: none;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

iframe {
	max-width: 100%;
	border: 0;
}

table {
	width: 100%;
	border-collapse: collapse;
}

/* ==========================================================================
   3. Tipografia
   ========================================================================== */

body {
	font-family: var(--cdm-fonte);
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-normal);
	line-height: var(--cdm-altura-normal);
	color: var(--cdm-texto);
	background-color: var(--cdm-fundo);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

/* Trava a rolagem enquanto a gaveta ou um modal está aberto. */
body.cdm-travado {
	overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--cdm-fonte-titulo);
	font-weight: var(--cdm-peso-forte);
	line-height: var(--cdm-altura-apertada);
	color: var(--cdm-azul);
}

h1 { font-size: var(--cdm-t-2xl); }
h2 { font-size: var(--cdm-t-xl); }
h3 { font-size: var(--cdm-t-lg); }
h4 { font-size: var(--cdm-t-md); }
h5, h6 { font-size: var(--cdm-t-base); }

@media (min-width: 900px) {
	h1 { font-size: var(--cdm-t-3xl); }
	h2 { font-size: var(--cdm-t-2xl); }
}

/* Pino de tamanho de cabeçalho.
   O nível da tag é hierarquia (SEO e leitor de tela); o tamanho na tela é
   outra coisa. Quando inc/hierarquia-titulos.php corrige o nível de um
   cabeçalho, ele carimba .cdm-tam-hN com o tamanho que a tag ANTIGA tinha —
   assim o documento fica correto sem que um pixel mude de lugar.
   Classe (0,1,0) vence a regra de elemento (0,0,1) logo acima. */
.cdm-tam-h1 { font-size: var(--cdm-t-2xl); }
.cdm-tam-h2 { font-size: var(--cdm-t-xl); }
.cdm-tam-h3 { font-size: var(--cdm-t-lg); }
.cdm-tam-h4 { font-size: var(--cdm-t-md); }
.cdm-tam-h5,
.cdm-tam-h6 { font-size: var(--cdm-t-base); }

@media (min-width: 900px) {
	.cdm-tam-h1 { font-size: var(--cdm-t-3xl); }
	.cdm-tam-h2 { font-size: var(--cdm-t-2xl); }
}

/* O pino também precisa cobrir a margem: o ritmo vertical do corpo editorial
   (`.cdm-pagina__corpo h2, h3` mais abaixo) é preso à TAG, então um h4 que
   virou h2 passava a ganhar 24px/12px que ele nunca teve — foi assim que as
   páginas das lojas físicas desceram 36px na primeira medição.
   Dois seletores de classe (0,2,0) vencem `.cdm-pagina__corpo h2` (0,1,1). */
.cdm-pagina__corpo .cdm-tam-h1,
.cdm-pagina__corpo .cdm-tam-h4,
.cdm-pagina__corpo .cdm-tam-h5,
.cdm-pagina__corpo .cdm-tam-h6,
.cdm-artigo__conteudo .cdm-tam-h1,
.cdm-artigo__conteudo .cdm-tam-h4,
.cdm-artigo__conteudo .cdm-tam-h5,
.cdm-artigo__conteudo .cdm-tam-h6 {
	margin: 0;
}

.cdm-pagina__corpo .cdm-tam-h2,
.cdm-pagina__corpo .cdm-tam-h3,
.cdm-artigo__conteudo .cdm-tam-h2,
.cdm-artigo__conteudo .cdm-tam-h3 {
	margin: var(--cdm-e-6) 0 var(--cdm-e-3);
}

p + p {
	margin-top: var(--cdm-e-4);
}

small {
	font-size: var(--cdm-t-xs);
}

strong, b {
	font-weight: var(--cdm-peso-forte);
}

a {
	color: var(--cdm-link);
	text-decoration: none;
	transition: color var(--cdm-transicao);
}

a:hover,
a:focus-visible {
	color: var(--cdm-azul-escuro);
	text-decoration: underline;
}

hr {
	height: 1px;
	margin: var(--cdm-e-8) 0;
	border: 0;
	background-color: var(--cdm-borda);
}

/* ==========================================================================
   4. Foco
   Um anel só, consistente no site inteiro. `:focus-visible` para não piscar
   contorno em clique de mouse.
   ========================================================================== */

:focus-visible {
	outline: 2px solid var(--cdm-azul);
	outline-offset: 2px;
	border-radius: var(--cdm-raio-sm);
}

/* ==========================================================================
   5. Layout
   ========================================================================== */

.cdm-container {
	width: 100%;
	max-width: var(--cdm-largura);
	margin-inline: auto;
	padding-inline: var(--cdm-e-4);
}

@media (min-width: 900px) {
	.cdm-container {
		padding-inline: var(--cdm-e-6);
	}
}

/* O <main> aberto no header.php. Cresce para empurrar o rodapé ao fim da
   página mesmo em conteúdo curto. */
.cdm-conteudo {
	display: block;
	min-height: 50vh;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.cdm-conteudo {
	flex: 1 0 auto;
}

/* Container estreito para leitura corrida (posts, páginas institucionais). */
.cdm-texto {
	max-width: var(--cdm-largura-texto);
	margin-inline: auto;
}

/* Espaçamento vertical padrão de uma seção de página. */
.cdm-secao {
	padding-block: var(--cdm-e-8);
}

@media (min-width: 900px) {
	.cdm-secao {
		padding-block: var(--cdm-e-12);
	}
}

/* ==========================================================================
   6. Acessibilidade
   ========================================================================== */

/* Não há link "pular para o conteúdo": o cliente pediu a remoção (aparecia
   como botão flutuante ao receber foco). Decisão do cliente, 28/08/2026. */

/* Texto só para leitor de tela. */
.cdm-oculto-visual {
	position: absolute !important; /* vence utilitários do WooCommerce */
	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;
}

/* ==========================================================================
   7. Ícones
   Toda marcação de ícone sai de cdm_obter_icone() com estas classes.
   ========================================================================== */

/* Ícone é glifo de fonte (Font Awesome Free 7.3.1), não SVG: herda a cor do
   texto e é dimensionado por `font-size`. Quem precisar de outro tamanho
   sobrescreve font-size no bloco pai, nunca width/height. */
.cdm-icone {
	flex: none;
	display: inline-block;
	font-size: var(--cdm-e-5);
	line-height: 1;
	font-style: normal;
	text-align: center;
}

/* ==========================================================================
   8. Botões
   Quatro variantes e três tamanhos. Qualquer botão do tema sai daqui —
   inclusive os do WooCommerce, que recebem .cdm-btn via inc/woocommerce.php.
   ========================================================================== */

.cdm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cdm-e-2);
	padding: var(--cdm-e-3) var(--cdm-e-5);
	font-family: inherit;
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-semi);
	line-height: var(--cdm-altura-apertada);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: var(--cdm-raio);
	transition: background-color var(--cdm-transicao), border-color var(--cdm-transicao), color var(--cdm-transicao);
}

.cdm-btn:hover,
.cdm-btn:focus-visible {
	text-decoration: none;
}

.cdm-btn[disabled],
.cdm-btn[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: .55;
}

/* Ação principal: amarelo da marca com texto azul-marinho — contraste alto e
   é a assinatura visual da Casa do Médico. */
.cdm-btn--primario {
	color: var(--cdm-azul-escuro);
	background-color: var(--cdm-amarelo);
	border-color: var(--cdm-amarelo);
}

.cdm-btn--primario:hover,
.cdm-btn--primario:focus-visible {
	color: var(--cdm-azul-escuro);
	background-color: var(--cdm-amarelo-escuro);
	border-color: var(--cdm-amarelo-escuro);
}

/* Verde exclusivo de "comprar" / "adicionar ao carrinho". Não use para
   outra coisa: o verde é o sinal de conversão em toda a loja. */
.cdm-btn--comprar {
	color: var(--cdm-branco);
	background-color: var(--cdm-verde);
	border-color: var(--cdm-verde);
}

.cdm-btn--comprar:hover,
.cdm-btn--comprar:focus-visible {
	color: var(--cdm-branco);
	background-color: var(--cdm-verde-escuro);
	border-color: var(--cdm-verde-escuro);
}

/* Ação secundária: só contorno. */
.cdm-btn--fantasma {
	color: var(--cdm-azul);
	background-color: transparent;
	border-color: var(--cdm-borda);
}

.cdm-btn--fantasma:hover,
.cdm-btn--fantasma:focus-visible {
	color: var(--cdm-azul-escuro);
	background-color: var(--cdm-azul-claro);
	border-color: var(--cdm-azul);
}

.cdm-btn--pequeno {
	padding: var(--cdm-e-2) var(--cdm-e-3);
	font-size: var(--cdm-t-sm);
}

.cdm-btn--grande {
	padding: var(--cdm-e-4) var(--cdm-e-8);
	font-size: var(--cdm-t-md);
}

.cdm-btn--bloco {
	width: 100%;
}

/* Botão que só tem ícone. Sempre com aria-label no HTML. */
.cdm-btn--icone {
	padding: var(--cdm-e-2);
	border-radius: var(--cdm-raio-cheio);
}

/* ==========================================================================
   9. Formulários
   ========================================================================== */

input,
select,
textarea,
button {
	font: inherit;
	color: inherit;
}

label {
	display: inline-block;
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-medio);
	color: var(--cdm-texto-fraco);
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: var(--cdm-e-3) var(--cdm-e-4);
	font-size: var(--cdm-t-base);
	color: var(--cdm-texto);
	background-color: var(--cdm-superficie);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
	transition: border-color var(--cdm-transicao), box-shadow var(--cdm-transicao);
	appearance: none;
}

textarea {
	min-height: var(--cdm-e-16);
	resize: vertical;
}

input::placeholder,
textarea::placeholder {
	color: var(--cdm-texto-apagado);
	opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--cdm-azul);
	outline: none;
	box-shadow: var(--cdm-sombra-sm);
}

input[type="search"]::-webkit-search-cancel-button {
	appearance: none;
}

input[type="checkbox"],
input[type="radio"] {
	width: var(--cdm-e-4);
	height: var(--cdm-e-4);
	accent-color: var(--cdm-azul);
	cursor: pointer;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}

fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

/* ==========================================================================
   10. Blocos genéricos reaproveitados por várias páginas
   ========================================================================== */

/* Cartão claro sobre o fundo cinza — a base visual da referência. */
.cdm-cartao {
	background-color: var(--cdm-superficie);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio-lg);
}

/* Estado vazio (busca sem resultado, carrinho vazio, 404). */
.cdm-vazio {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cdm-e-4);
	max-width: var(--cdm-largura-texto);
	margin-inline: auto;
	padding: var(--cdm-e-12) var(--cdm-e-4);
	text-align: center;
}

.cdm-vazio__texto {
	color: var(--cdm-texto-fraco);
}

/* Página genérica do index.php. */
.cdm-pagina {
	padding-block: var(--cdm-e-8);
}

.cdm-pagina__cabecalho {
	margin-bottom: var(--cdm-e-8);
}

.cdm-pagina__descricao {
	margin-top: var(--cdm-e-3);
	color: var(--cdm-texto-fraco);
}

.cdm-lista-posts {
	display: grid;
	gap: var(--cdm-e-6);
}

@media (min-width: 900px) {
	.cdm-lista-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cdm-post {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--cdm-superficie);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio-lg);
}

.cdm-post__imagem img {
	width: 100%;
	object-fit: cover;
}

.cdm-post__corpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cdm-e-3);
	padding: var(--cdm-e-5);
}

.cdm-post__titulo {
	font-size: var(--cdm-t-lg);
}

.cdm-post__meta {
	font-size: var(--cdm-t-xs);
	color: var(--cdm-texto-apagado);
}

.cdm-post__resumo {
	color: var(--cdm-texto-fraco);
}

.cdm-post__resumo p + p {
	margin-top: var(--cdm-e-2);
}

/* Paginação do WordPress (the_posts_pagination). */
.cdm-paginacao {
	margin-top: var(--cdm-e-10);
}

.cdm-paginacao .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--cdm-e-2);
}

.cdm-paginacao .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--cdm-e-10);
	padding: var(--cdm-e-2) var(--cdm-e-3);
	font-weight: var(--cdm-peso-medio);
	color: var(--cdm-azul);
	background-color: var(--cdm-superficie);
	border: 1px solid var(--cdm-borda);
	border-radius: var(--cdm-raio);
}

.cdm-paginacao .page-numbers:hover {
	text-decoration: none;
	background-color: var(--cdm-azul-claro);
}

.cdm-paginacao .page-numbers.current {
	color: var(--cdm-azul-escuro);
	background-color: var(--cdm-amarelo);
	border-color: var(--cdm-amarelo);
}

/* ==========================================================================
   11. Utilitários
   Poucos e nomeados pelo que fazem. Se precisar de um novo, avise: eles são
   compartilhados por todas as folhas.
   ========================================================================== */

.cdm-so-desktop {
	display: none;
}

@media (min-width: 900px) {
	.cdm-so-desktop {
		display: block;
	}

	.cdm-so-mobile {
		display: none !important; /* vence display de bloco do WooCommerce */
	}
}

.cdm-empilha {
	display: flex;
	flex-direction: column;
	gap: var(--cdm-e-3);
}

.cdm-linha {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-3);
}

.cdm-texto-fraco {
	color: var(--cdm-texto-fraco);
}

.cdm-texto-centro {
	text-align: center;
}

.cdm-sem-rolagem {
	overflow: hidden;
}

/* ==========================================================================
   12. Complementos
   Regras que faltavam para classes já presentes na marcação. Agrupadas aqui
   para o diff ficar legível; se este bloco crescer, mescle cada regra na sua
   seção de origem.
   ========================================================================== */

/* --- Classe do WordPress, não do tema ---------------------------------- */

/* O core imprime `<h2 class="screen-reader-text">` dentro da paginação, dos
   formulários de busca e de vários blocos; o WooCommerce faz o mesmo. Sem uma
   definição no tema esse h2 renderiza VISÍVEL e grande no meio da página.
   Mesma mecânica de .cdm-oculto-visual — mantidas separadas de propósito: uma
   é contrato nosso, a outra é contrato do core. */
.screen-reader-text {
	position: absolute !important; /* vence display de bloco do core/WooCommerce */
	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;
}

.screen-reader-text:focus {
	position: static !important; /* idem: devolve o link de pular do core ao fluxo */
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
}

/* --- Logo fora do cabeçalho -------------------------------------------- */

/* `.cdm-logo` é a classe padrão de cdm_logo(); o cabeçalho ainda soma
   `.cdm-cabecalho__logo`. Quem chamar a função sem classe extra (rodapé de
   checkout, página de erro) precisa destes zeros aqui, senão herda a margem
   de h1/div. */
.cdm-logo {
	margin: 0;
	font-size: var(--cdm-t-md);
	line-height: 1;
}

/* --- Lista de atalhos padrão ------------------------------------------- */

/* Classe default de cdm_menu_atalhos(). A barra do topo e a gaveta passam a
   sua própria, mas quem chamar sem argumento cai aqui. */
.cdm-atalhos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cdm-e-2) var(--cdm-e-4);
}

.cdm-atalhos a {
	display: inline-flex;
	align-items: center;
	gap: var(--cdm-e-2);
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-medio);
	color: var(--cdm-azul);
}

/* --- Títulos ----------------------------------------------------------- */

/* Títulos de arquivo e de busca costumam ter duas linhas; `balance` evita a
   linha órfã de uma palavra. Tamanho e cor vêm do h1 em §3. */
.cdm-pagina__titulo {
	text-wrap: balance;
}

/* O estado vazio é um h1 por hierarquia, mas visualmente não deve gritar
   como o título de uma página de conteúdo. */
.cdm-vazio__titulo {
	font-size: var(--cdm-t-xl);
	text-wrap: balance;
}

/* --- Widget da sidebar ------------------------------------------------- */

/* `inc/setup.php` registra a sidebar "cdm-filtros" envolvendo cada widget em
   `.cdm-widget` e o título em `.cdm-widget__titulo`. Como o registro é de um
   arquivo compartilhado e não de uma página, a casca mora aqui. O interior de
   cada filtro (listas de atributo, faixa de preço, swatches) é do catalogo.css
   — não estilize a casca de lá, sobrescreva só o que precisar. */
.cdm-widget {
	padding-block: var(--cdm-e-5);
	border-bottom: 1px solid var(--cdm-borda);
}

.cdm-widget:last-child {
	border-bottom: 0;
}

.cdm-widget__titulo {
	margin-bottom: var(--cdm-e-3);
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-forte);
	color: var(--cdm-azul);
}

.cdm-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdm-widget li + li {
	margin-top: var(--cdm-e-2);
}

/* ==========================================================================
   12. Páginas de conteúdo e artigo do blog (page.php, single.php)
   ========================================================================== */

.cdm-pagina__corpo {
	line-height: var(--cdm-altura-normal);
}

.cdm-pagina__corpo p,
.cdm-artigo__conteudo p {
	margin: 0 0 var(--cdm-e-4);
}

.cdm-pagina__corpo h2,
.cdm-pagina__corpo h3,
.cdm-artigo__conteudo h2,
.cdm-artigo__conteudo h3 {
	margin: var(--cdm-e-6) 0 var(--cdm-e-3);
}

.cdm-pagina__corpo ul,
.cdm-pagina__corpo ol,
.cdm-artigo__conteudo ul,
.cdm-artigo__conteudo ol {
	margin: 0 0 var(--cdm-e-4);
	padding-left: var(--cdm-e-5);
}

.cdm-pagina__partes {
	margin-top: var(--cdm-e-5);
	font-size: var(--cdm-t-sm);
	color: var(--cdm-texto-fraco);
}

.cdm-artigo__imagem {
	margin: 0 0 var(--cdm-e-5);
}

.cdm-artigo__imagem img {
	border-radius: var(--cdm-raio-lg);
	width: 100%;
	height: auto;
}

/* Navegação anterior/próximo do single. */
.cdm-artigo__navegacao {
	margin-top: var(--cdm-e-8);
	padding-top: var(--cdm-e-4);
	border-top: 1px solid var(--cdm-cinza-200);
}

.cdm-artigo__navegacao .nav-links {
	display: flex;
	justify-content: space-between;
	gap: var(--cdm-e-4);
}

.cdm-artigo__navegacao a {
	display: flex;
	flex-direction: column;
	gap: var(--cdm-e-1);
	max-width: 45%;
	font-size: var(--cdm-t-sm);
	color: var(--cdm-azul);
	text-decoration: none;
}

.cdm-artigo__navegacao a:hover span:last-child {
	text-decoration: underline;
}

.cdm-artigo__navegacao-rotulo {
	font-size: var(--cdm-t-xs);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--cdm-texto-apagado);
}

.cdm-artigo__navegacao .nav-next {
	margin-left: auto;
	text-align: right;
}

/* Comentários (quase nunca aparecem — ver comments.php). */
.cdm-comentarios {
	margin-top: var(--cdm-e-8);
	padding-top: var(--cdm-e-5);
	border-top: 1px solid var(--cdm-cinza-200);
}

.cdm-comentarios__titulo {
	margin-bottom: var(--cdm-e-4);
	font-size: var(--cdm-t-lg);
}

ol.cdm-comentarios__lista {
	display: flex;
	flex-direction: column;
	gap: var(--cdm-e-4);
	margin-bottom: var(--cdm-e-5);
}