/*
 * Cabeçalho.
 *
 * Cópia dos valores da referência (farmaciaindiana.com.br), medidos em
 * assets/css/referencia.css e conferidos contra baseline/referencia/
 * home-desktop.png. Cada bloco abaixo diz de qual regra veio o número, para
 * quem precisar auditar não ter de caçar em 977 KB de CSS.
 *
 * Régua da referência (desktop ≥ 1025px):
 *   barra do topo ........... 44px de altura, #FCC404 (cor da CDM)
 *   linha do cabeçalho ...... max-width 1366px, padding 10px 0
 *   logo .................... 192px de largura, container com padding 0 10px
 *   busca ................... 570px × 50px, raio 15px, fundo #f4f4f4
 *   botão de busca .......... #062ac6, ícone branco de 19.11px
 *   bloco de ações .......... largura do conteúdo, gap 28px
 *   texto das ações ......... #062ac6, 15px/15px
 *   bolha do carrinho ....... #1e95fb, 14px/14px
 */

:root {
	/* As duas famílias vêm dos @font-face de referencia.css (Roboto/Poppins). */
	--cdm-ref-fonte:        "Farm Indiana Round", "Poppins", Arial, sans-serif;
	--cdm-ref-fonte-cnd:    "Farm Indiana Cnd", "Roboto", Arial, sans-serif;

	--cdm-ref-azul:         #062ac6;   /* ação: botões, ícones e texto do topo */
	--cdm-ref-azul-escuro:  #004077;   /* títulos institucionais */
	--cdm-ref-azul-bolha:   #1e95fb;   /* contador do carrinho */
	--cdm-ref-cinza-campo:  #f4f4f4;   /* fundo de campo e faixas */
	--cdm-ref-borda:        #e5e5e5;
	--cdm-ref-texto:        #444;
	--cdm-ref-largura:      1366px;
}

/* -------------------------------------------------------------------------
   1. Barra do topo
   Quatro selos com icone. Mesmo amarelo da barra principal (--cdm-amarelo,
   hoje #F5BE00); o que separa as duas faixas e o filete branco abaixo.

   Texto e icones em --cdm-azul (#0A3D7C): 6,21:1 sobre o amarelo, acima do
   minimo AA de 4,5:1. Houve uma rodada com esse texto em branco, a pedido do
   cliente; o branco dava 1,71:1 e foi revertido. O logo continua branco -- e
   o arquivo original da marca, e logotipo e isento de contraste na WCAG.
   ---------------------------------------------------------------------- */

.cdm-cabecalho__aviso {
	/* Amarelo mais claro que a faixa da marca, conforme referencia enviada
	   pelo cliente. O contraste do texto azul sobe junto: sobre #fde497 o
	   #0a3d7c da 9,0:1, contra 6,2:1 que dava sobre o #f5be00. */
	background-color: var(--cdm-amarelo-suave);
	color: var(--cdm-azul);
	border-bottom: none;
}

/*
 * Container das DUAS faixas. Mesma largura maxima e mesmo respiro lateral,
 * para o primeiro selo da barra do topo cair exatamente sobre a borda
 * esquerda do logo, e o ultimo sobre a borda direita da cesta.
 *
 * O seletor leva `ul` de proposito: o reset `ul[class]` de base.css tem
 * especificidade (0,1,1), maior que uma classe sozinha (0,1,0), e estava
 * zerando este padding -- era essa a origem do desalinhamento.
 */
ul.cdm-cabecalho__aviso-interno,
.cdm-cabecalho__linha {
	max-width: var(--cdm-ref-largura);
	margin-inline: auto;
	padding-inline: var(--cdm-e-4);
}

.cdm-cabecalho__aviso-interno {
	/* 38px: junto com a faixa principal, tira 10px de amarelo do topo da
	   pagina -- o cliente achou o conjunto pesado demais. */
	min-height: 38px;
	padding-block: var(--cdm-e-1);

	display: flex;
	align-items: stretch;
	/* Os quatro selos ocupam a largura toda do container em colunas iguais.
	   Colunas (flex: 1) em vez de space-between porque as divisas verticais
	   precisam cair em intervalos regulares: com space-between elas ficariam
	   coladas no texto, e nao no meio do vao. */
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--cdm-e-2) 0;

	list-style: none;
	font-family: var(--cdm-ref-fonte);
	font-size: 15px;
	line-height: 20px;
	font-weight: 500;
}

.cdm-cabecalho__aviso-item {
	flex: 1 1 0;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cdm-e-2);
	/* Sem quebra: os quatro rotulos sao curtos e a faixa tem folga de sobra
	   depois que o botao de ofertas e o endereco sairam. */
	white-space: nowrap;
}

/*
 * Divisas verticais entre os selos.
 *
 * Pseudo-elemento e nao border-left: a borda acompanharia a altura inteira do
 * item e encostaria nos limites da faixa, o que endurece o desenho. Assim a
 * linha flutua no meio, com folga em cima e embaixo.
 *
 * O primeiro item nao recebe divisa -- ela marcaria a borda do container, nao
 * uma separacao entre selos.
 */
.cdm-cabecalho__aviso-item {
	position: relative;
}

.cdm-cabecalho__aviso-item + .cdm-cabecalho__aviso-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);

	width: 1px;
	height: 18px;
	background: var(--cdm-amarelo-divisa);
}

/* Rotulo longo e curto convivem no HTML; o CSS escolhe. Ver
   cdm_rotulo_barra_topo() em inc/template-tags.php. */
.cdm-cabecalho__aviso-curto {
	display: none;
}

@media (max-width: 640px) {
	/*
	 * No celular a faixa fica em UMA linha, nunca empilhada. Para caber, dois
	 * ajustes de conteudo, ambos decididos com o cliente:
	 *   - "Ha mais de 40 anos" sai (e o unico selo que nao leva a lugar nenhum);
	 *   - "Lojas Casa do Medico" vira "Lojas".
	 * Sobram tres selos, que cabem em 360px com folga.
	 */
	.cdm-cabecalho__aviso-interno {
		flex-wrap: nowrap;
		font-size: 13px;
	}

	/*
	 * Os tres selos voltam a ocupar um terco da faixa cada um (flex:1 1 0,
	 * ja na regra base), centralizados dentro do proprio terco -- sem
	 * divisa, nao ha mais razao para alinhar a esquerda contra uma linha
	 * que nao existe mais.
	 */
	.cdm-cabecalho__aviso-item {
		min-width: 0;
	}

	/* Sem divisa no celular: só os três botões, um por terço. */
	.cdm-cabecalho__aviso-item + .cdm-cabecalho__aviso-item::before {
		content: none;
	}

	.cdm-cabecalho__aviso-item span {
		min-width: 0;
		overflow: hidden;
		text-overflow: clip;
	}

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

	.cdm-cabecalho__aviso-longo {
		display: none;
	}

	.cdm-cabecalho__aviso-curto {
		display: inline;
	}

	.cdm-cabecalho__aviso-item .cdm-icone {
		font-size: 14px;
	}
}

.cdm-cabecalho__aviso-item .cdm-icone {
	flex: 0 0 auto;
	font-size: 16px;
}

.cdm-cabecalho__aviso-link {
	display: inline-flex;
	align-items: center;
	gap: var(--cdm-e-2);
	color: inherit;
	text-decoration: none;
}

.cdm-cabecalho__aviso-link:hover,
.cdm-cabecalho__aviso-link:focus-visible {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   2. Barra principal
   Estrutura da referencia, cor da Casa do Medico: o mesmo #FCC404 da barra
   do topo. (Na referencia era branco -- o logo deles e colorido, o nosso e
   um arquivo 100% branco pintado pela mascara do bloco 3.)
   .vtex-sticky-layout-0-x-wrapper--sticky-header--stuck … { border-bottom:1px solid #e5e5e5 }
   .vtex-flex-layout-0-x-flexRow--header__content--nav { padding:10px 0; max-width:1366px; margin:0 auto }
   ---------------------------------------------------------------------- */

.cdm-cabecalho__barra {
	background: var(--cdm-amarelo);
	border-bottom: 1px solid var(--cdm-amarelo-escuro);
}

.cdm-cabecalho__linha {
	/* Respiro minimo: e o que sobrou depois de o logo crescer para 300px sem
	   deixar a faixa aumentar. */
	padding-block: var(--cdm-e-1);
	display: flex;
	align-items: center;
	gap: var(--cdm-e-8);
}

/* Cresce para ocupar a folga: e a busca dentro dela que estica, entao nao
   sobra vao morto entre o logo e o bloco de acoes. */
.cdm-cabecalho__esquerda {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: var(--cdm-e-6);
	min-width: 0;
}

/* -------------------------------------------------------------------------
   3. Logo
   .vtex-sticky-layout-0-x-wrapper--sticky-header .…logoContainer { padding:0 10px }
   <img width=192 height=58>

   O arquivo é 100% branco e aparece como está, sobre o amarelo da faixa.
   Largura 250px: a altura resultante (45px) e a maior que cabe sem passar dos
   50px da busca, que e o que define a altura da linha — o logo cresceu sem
   aumentar o cabeçalho.
   ---------------------------------------------------------------------- */

.cdm-cabecalho__logo {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.cdm-cabecalho__logo .cdm-logo__link {
	display: block;
	text-decoration: none;
}

/*
 * 300px, nao 250: o cliente pediu logo maior E cabecalho mais baixo, que
 * puxam para lados opostos. Resolvido invertendo quem manda na altura da
 * linha -- antes era a busca (50px) com o logo folgado dentro; agora e o
 * logo (300px de largura = ~54px de altura) e a busca encolheu para 46px.
 * A faixa ainda assim diminuiu: era 66px, ficou 62px.
 */
.cdm-logo__marca {
	display: block;
	width: 300px;
}

.cdm-logo__marca .cdm-logo__imagem {
	display: block;
	width: 300px;
	height: auto;
}

.cdm-logo__texto {
	font-family: var(--cdm-ref-fonte);
	font-size: 22px;
	font-weight: 700;
	color: var(--cdm-azul);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   4. Busca
   .…searchBarContainer { width:570px; padding:0 }
   .…autoCompleteOuterContainer .vtex-input-prefix__group {
       border-radius:15px; background:#f4f4f4; border:none; min-height:50px }
   .…vtex-styleguide-9-x-input { font-size:16px; line-height:20px; color:#111 }
   .…searchBarIcon--external-search { background-color:#062ac6 }  ícone 19.11px
   ---------------------------------------------------------------------- */

.cdm-busca {
	/* Ancora do painel de termos mais buscados (ver .cdm-busca__sugestoes). */
	position: relative;
	/* Elastica: absorve toda a folga da linha. A referencia fixava 570px e
	   deixava vao morto nas telas largas. */
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	margin-left: 0;
}

.cdm-busca__caixa {
	display: flex;
	align-items: stretch;
	overflow: hidden;

	/* 46px: com a busca em 50px a faixa nao encolhia. */
	height: 46px;
	border: none;
	border-radius: 15px;
	/* Branco, nao o cinza da referencia: sobre o amarelo o #f4f4f4 nao le
	   como campo editavel. */
	background: var(--cdm-branco);
	transition: all .2s ease-in-out;
}

/*
 * Qualificado por `input` de proposito. O base.css estiliza
 * input[type="search"] com borda, raio e padding proprios, e esse seletor tem
 * especificidade (0,1,1) -- maior que a classe sozinha (0,1,0). Sem o `input`
 * aqui, o `border: 0` abaixo era ignorado e o campo desenhava uma moldura
 * arredondada mais baixa que a caixa, fazendo o botao branco da lupa sobrar
 * acima e abaixo dela.
 */
input.cdm-busca__campo {
	flex: 1 1 auto;
	min-width: 0;

	height: 100%;
	border-radius: 0;

	margin: 0;
	padding: 0 var(--cdm-e-4);
	border: 0;
	outline: 0;
	background: transparent;

	font-family: var(--cdm-ref-fonte);
	font-size: 16px;
	line-height: 20px;
	color: #111;

	-webkit-appearance: none;
	appearance: none;
}

.cdm-busca__campo::-webkit-search-cancel-button,
.cdm-busca__campo::-webkit-search-decoration {
	-webkit-appearance: none;
}

.cdm-busca__campo::placeholder {
	color: #727273;
	opacity: 1;
}

.cdm-busca__enviar {
	flex: 0 0 auto;
	width: 51px;

	display: flex;
	align-items: center;
	justify-content: center;

	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0 15px 15px 0;
	/* Botao branco com a lupa no amarelo da marca, a pedido do cliente. Como o
	   campo de busca tambem e branco, o botao deixa de ter forma propria e o
	   que se ve e so a lupa -- e o efeito pretendido. */
	background-color: var(--cdm-branco);
	color: var(--cdm-amarelo);
	cursor: pointer;
}

.cdm-busca__enviar:hover,
.cdm-busca__enviar:focus-visible {
	opacity: .85;
}

/* --- termos mais buscados -------------------------------------------------
 *
 * Painel que abre sob o campo ao focar. Fica dentro de .cdm-busca__caixa, que
 * e o elemento posicionado; a caixa tem overflow:hidden para arredondar as
 * pontas do campo, entao o painel NAO pode ser filho dela -- por isso a
 * ancora e o proprio formulario .cdm-busca, que recebe position:relative.
 * -------------------------------------------------------------------- */

.cdm-busca__sugestoes {
	position: absolute;
	top: calc(100% + var(--cdm-e-1));
	left: 0;
	right: 0;
	z-index: var(--cdm-z-menu);
	/* Cabe a lista inteira de 10 termos sem rolagem interna (o titulo mais dez
	   linhas dao ~30rem); o teto por viewport so vale em tela baixa. */
	max-height: min(80vh, 32rem);
	overflow-y: auto;
	padding: var(--cdm-e-4);
	background: var(--cdm-branco);
	border-radius: var(--cdm-raio-lg);
	box-shadow: var(--cdm-sombra-lg);
	text-align: left;
}

.cdm-busca__sugestoes[hidden] {
	display: none;
}

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

ol.cdm-busca__termos {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdm-busca__termo-link {
	display: flex;
	align-items: baseline;
	gap: var(--cdm-e-3);
	padding: var(--cdm-e-2);
	color: var(--cdm-texto);
	font-size: var(--cdm-t-base);
	text-decoration: none;
	border-radius: var(--cdm-raio);
}

.cdm-busca__termo-link:hover,
.cdm-busca__termo-link:focus-visible {
	color: var(--cdm-azul);
	background: var(--cdm-azul-claro);
}

/* A posicao e a informacao do ranking: fixa a largura para os termos
   alinharem numa coluna so, com 1o e 10o na mesma margem. */
.cdm-busca__termo-posicao {
	flex: 0 0 auto;
	min-width: 1.75rem;
	color: var(--cdm-azul);
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-forte);
}

.cdm-busca__termo-texto {
	min-width: 0;
	overflow-wrap: break-word;
}

.cdm-busca__enviar .cdm-icone {
	font-size: 17px;
}

/* -------------------------------------------------------------------------
   5. Bloco de ações (perfil · cesta)
   .vtex-flex-layout-0-x-flexRowContent--header-user-actions {
       gap:14px; min-width:370px; max-width:370px; margin-right:10px }
   .vtex-login-2-x-container .…label:after { color:#062ac6; font-size:15px; line-height:15px }
   .farmaciaindiana-store-theme-3-x-mainButton { color:#062ac6; font-size:15px;
       line-height:15px; max-width:105px; min-width:105px }
   .…basketHeaderInfos { min-width:82px; max-width:82px; min-height:30px; max-height:30px }
   .…minicartQuantityBadge { background:#1e95fb; color:#fff; font-size:14px; line-height:14px }
   ---------------------------------------------------------------------- */

/* Os 370px fixos da referencia existiam para caber tres blocos (perfil, CEP,
   cesta). Com o endereco fora sobraram dois, e largura fixa so criaria vao --
   agora o bloco tem a largura do seu conteudo. */
.cdm-cabecalho__acoes {
	flex: 0 0 auto;
	box-sizing: border-box;
	margin-right: 0;

	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--cdm-e-8);
}

.cdm-conta,
.cdm-carrinho {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-2);

	color: var(--cdm-azul);
	text-decoration: none;

	font-family: var(--cdm-ref-fonte);
	font-size: 15px;
	line-height: 15px;
	font-weight: 400;
}

.cdm-conta:hover,
.cdm-carrinho:hover,
.cdm-conta:focus-visible,
.cdm-carrinho:focus-visible {
	color: var(--cdm-azul);
	text-decoration: underline;
}

/* 24px de fonte ocupa aproximadamente a mesma caixa visual que os 30px de
   SVG que havia aqui: o glifo desenha em cerca de 80% do corpo da fonte. */
.cdm-conta .cdm-icone,
.cdm-carrinho .cdm-icone {
	flex: 0 0 auto;
	font-size: 24px;
}

/* Sem clamp e sem largura fixa: a referencia cortava "Acesse o seu perfil"
   em "Acesse o seu..." porque espremia o rotulo em 65px de duas linhas. O
   rotulo agora ocupa a largura que precisa, numa linha so. */
.cdm-conta__texto {
	text-align: left;
	white-space: nowrap;
}

/* --- carrinho --- */

.cdm-carrinho-fragmento {
	display: flex;
	align-items: center;
}

.cdm-carrinho__icone {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 var(--cdm-e-1);
}

.cdm-carrinho__contador {
	position: absolute;
	right: 0;
	bottom: -5px;

	min-width: 16px;
	height: 16px;
	padding: 0 var(--cdm-e-1);
	box-sizing: border-box;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 999px;
	background: var(--cdm-vermelho);
	color: #fff;

	font-size: 14px;
	font-weight: var(--cdm-peso-normal);
	line-height: 14px;
	text-align: center;
	user-select: none;
}

/* Sem max-width: "R$ 1.234,56" e mais largo que os 82px da referencia e
   sairia cortado. */
.cdm-carrinho__texto {
	display: flex;
	flex-direction: column;
	justify-content: center;

	min-width: 82px;
	min-height: 30px;
}

.cdm-carrinho__rotulo,
.cdm-carrinho__total {
	font-size: 15px;
	line-height: 15px;
	color: inherit;
	white-space: nowrap;
}

.cdm-carrinho__rotulo {
	font-weight: 400;
}

/* Pedido do cliente: o valor da cesta sai em negrito. */
.cdm-carrinho__total {
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   7. Botões que só existem fora do desktop
   ---------------------------------------------------------------------- */

.cdm-cabecalho__hamburguer,
.cdm-cabecalho__lupa {
	display: none;

	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;

	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--cdm-azul);
	cursor: pointer;
}

.cdm-cabecalho__hamburguer:hover,
.cdm-cabecalho__lupa:hover {
	background: var(--cdm-amarelo-escuro);
}

.cdm-cabecalho__busca-movel {
	display: none;
	padding: 0 var(--cdm-e-4) var(--cdm-e-3);
}

.cdm-cabecalho__busca-movel[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
   8. Respostas de largura
   A referência encolhe a busca em três degraus antes de quebrar a linha:
   1366→570px, 1300→500px, 1250→480px, 1024→365px.
   ---------------------------------------------------------------------- */

/* A busca e elastica desde 1366px, entao nao ha mais degraus de largura a
   declarar: ela encolhe sozinha ate sair da linha em 1024px. */

/* Abaixo de 1025px a busca sai da linha, como na referência. */
/*
 * Só a barra da marca (logo · busca · ações) acompanha a rolagem, em qualquer
 * largura. A barra do topo (4 selos) fica de fora de propósito -- ela vive
 * fora do <header> (ver header.php), então rola com a página normalmente.
 */
.cdm-cabecalho {
	position: sticky;
	top: 0;
	z-index: var(--cdm-z-cabecalho);
}

@media (max-width: 1024px) {
	.cdm-cabecalho__linha {
		gap: var(--cdm-e-3);
	}

	.cdm-cabecalho__hamburguer {
		display: inline-flex;
	}

	.cdm-cabecalho__esquerda .cdm-busca {
		display: none;
	}

	/* 175px -> 215px: a saida do botao de lupa liberou largura na linha. */
	.cdm-logo__marca,
	.cdm-logo__marca .cdm-logo__imagem {
		width: 215px;
	}

	.cdm-cabecalho__acoes {
		gap: var(--cdm-e-4);
	}

	/* 13px/13px é o que a referência usa abaixo de 1025px. */
	.cdm-conta,
	.cdm-carrinho {
		font-size: 13px;
		line-height: 13px;
	}

	/* Abaixo de 1025px o rotulo do perfil nao cabe inteiro ao lado do logo e
	   da cesta. Em vez de cortar com reticencias, ele sai da tela e fica so
	   para leitor de tela -- o icone continua identificando o link. */
	.cdm-conta--perfil .cdm-conta__texto {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.cdm-carrinho__texto {
		min-width: 70px;
	}

	.cdm-carrinho__rotulo,
	.cdm-carrinho__total {
		font-size: 13px;
		line-height: 13px;
	}

	.cdm-carrinho__contador {
		font-size: 12px;
		line-height: 12px;
		min-width: 14px;
		height: 14px;
		bottom: 0;
	}

	/* .…autoCompleteOuterContainer { min-height:38px; max-height:38px } */
	.cdm-cabecalho__busca-movel {
		display: block;
	}

	/* Sem regra para [hidden]: o painel nao nasce mais escondido, porque nao
	   existe mais botao que o abra. */

	/* A faixa da busca no celular e branca de ponta a ponta, nao um campo
	   branco sobre amarelo: separa visualmente a barra de acoes da vitrine e
	   tira peso do amarelo, que o cliente achou pesado demais. */
	.cdm-cabecalho__busca-movel {
		background: var(--cdm-branco);
		padding: var(--cdm-e-2) var(--cdm-e-4);
	}

	.cdm-cabecalho__busca-movel .cdm-busca {
		width: 100%;
		margin-left: 0;
	}

	/* Dentro da faixa branca o campo precisa de contorno proprio, senao some. */
	.cdm-cabecalho__busca-movel .cdm-busca__caixa {
		border: 1px solid var(--cdm-borda);
	}

	.cdm-cabecalho__busca-movel .cdm-busca__caixa {
		height: 38px;
	}

	.cdm-cabecalho__busca-movel .cdm-busca__campo {
		font-size: 16px;
	}

	/* Sem fio embaixo da busca: a faixa branca já separa visualmente do
	   conteúdo, o traço amarelo ali só sobrava como uma barra indesejada. */
	.cdm-cabecalho__barra {
		border-bottom: 0;
	}
}

/*
 * Abaixo de 560px a linha do cabecalho nao cabe mais: hamburguer + logo de
 * 150px + lupa + perfil + cesta com rotulo passavam de 400px e empurravam o
 * documento inteiro para a direita (a barra do topo herdava essa largura e
 * por isso nao quebrava). Encolhe o logo e tira o rotulo "Cesta" da tela --
 * ele continua no DOM para leitor de tela, e o valor em negrito fica.
 */
@media (max-width: 380px) {
	/* Aparelhos de 360px: o rotulo cai para 12px para os tres selos caberem
	   inteiros. Abaixo disso nenhum aparelho relevante existe hoje. */
	.cdm-cabecalho__aviso-interno {
		font-size: 12px;
	}

	.cdm-cabecalho__aviso-item .cdm-icone {
		font-size: 13px;
	}
}

@media (max-width: 560px) {
	/* 128px -> 170px, mesmo motivo. */
	.cdm-logo__marca,
	.cdm-logo__marca .cdm-logo__imagem {
		width: 170px;
	}

	.cdm-cabecalho__acoes {
		gap: var(--cdm-e-1);
	}

	/* Abaixo de 560px sobra so o icone da cesta com a bolha, como em qualquer
	   loja no celular. O texto ("Cesta", o valor e a contagem de itens) continua
	   no DOM, fora da tela, entao o link segue com nome acessivel completo. */
	.cdm-carrinho__texto {
		position: absolute;
		width: 1px;
		height: 1px;
		min-width: 0;
		min-height: 0;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* Nenhum dos dois blocos pode empurrar a linha para fora da tela. */
	.cdm-cabecalho__esquerda,
	.cdm-cabecalho__acoes {
		min-width: 0;
	}

	/* Medido: em 360px a linha pedia ~370px. Estes quatro cortes devolvem
	   ~48px sem tirar nada da tela. */
	.cdm-cabecalho__linha {
		padding: var(--cdm-e-2);
	}

	.cdm-logo__marca,
	.cdm-logo__marca .cdm-logo__imagem {
		width: 140px;
	}

	.cdm-cabecalho__hamburguer,
	.cdm-cabecalho__lupa {
		width: 36px;
		height: 36px;
	}

	.cdm-conta .cdm-icone,
	.cdm-carrinho .cdm-icone {
		font-size: 21px;
	}
}

@media (max-width: 640px) {
	.cdm-cabecalho__aviso-interno {
		padding-block: var(--cdm-e-2);
		font-size: 13px;
		line-height: 17px;
		gap: 0 var(--cdm-e-3);
	}

	.cdm-cabecalho__aviso-interno {
		gap: var(--cdm-e-2) var(--cdm-e-5);
	}

	/* Sem nowrap aqui: num celular estreito "Lojas Casa do Medico" sozinho
	   passa da largura da tela e empurrava o documento inteiro. Deixando o
	   rotulo quebrar, nenhum item consegue estourar. */
	.cdm-cabecalho__aviso-item {
		white-space: normal;
	}
}

/* -------------------------------------------------------------------------
   9. Correções que a marcação do WordPress traz e a da referência não tem
   ---------------------------------------------------------------------- */

/*
 * A barra de administração do WP só é fixa a partir de 783px (breakpoint do
 * próprio core, admin-bar.css) -- abaixo disso ela rola com a página. Por
 * isso o ajuste vale só ali, e é um deslocamento de `top`, não um
 * `position: relative`: a versão antiga desligava o sticky inteiro sempre
 * que havia sessão logada, em QUALQUER largura -- por isso a barra da marca
 * nunca grudava para o admin, nem no desktop nem no celular.
 *
 * 32px é o valor fixo do próprio WordPress (#wpadminbar height ≥783px), não
 * um token do tema.
 */
@media (min-width: 783px) {
	.admin-bar .cdm-cabecalho {
		top: 32px;
	}

	/*
	 * Mesma correção para as gavetas. `inset: 0` as prende ao topo real da
	 * janela, e não ao topo do documento que a barra empurra — o cabeçalho da
	 * cesta (o ✕, o título e o "Remover todos") nascia atrás da barra do WP.
	 * Para quem está logado, e é assim que o cliente revisa o site, a cesta
	 * abria sem topo, com a lista encostada no alto e o primeiro item cortado.
	 */
	.admin-bar .cdm-gaveta {
		top: 32px;
	}
}

/* O Woo injeta <p class="woocommerce-info"> em fragmentos AJAX; dentro do
   bloco do carrinho ele herdaria o azul e o tamanho do rótulo. */
.cdm-carrinho-fragmento .woocommerce-info,
.cdm-carrinho-fragmento .woocommerce-message,
.cdm-carrinho-fragmento .woocommerce-error {
	display: none;
}

/* -------------------------------------------------------------------------
   10. Gaveta de categorias
   Unico menu completo do site. Estas regras se perderam numa reescrita do
   arquivo; sem elas o botao "Todas as categorias" abre uma lista sem
   formatacao no meio da pagina.
   ---------------------------------------------------------------------- */

.cdm-gaveta {
	position: fixed;
	inset: 0;
	z-index: var(--cdm-z-overlay);
}

.cdm-gaveta[hidden] {
	display: none;
}

.cdm-gaveta__fundo {
	position: absolute;
	inset: 0;
	/* tokens.css nao tem cor de scrim; escurecemos com o preto da paleta. */
	background-color: var(--cdm-preto);
	opacity: .55;
}

.cdm-gaveta__painel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: min(88%, 22rem);
	overflow-y: auto;
	background-color: var(--cdm-superficie);
	box-shadow: var(--cdm-sombra-lg);
}

.cdm-gaveta__topo {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cdm-e-3);
	padding: var(--cdm-e-4);
	color: var(--cdm-azul-escuro);
	background-color: var(--cdm-amarelo);
}

.cdm-gaveta__titulo {
	font-size: var(--cdm-t-md);
	font-weight: var(--cdm-peso-forte);
}

.cdm-gaveta__fechar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--cdm-e-8);
	height: var(--cdm-e-8);
	color: inherit;
	border: 0;
	background: none;
	border-radius: var(--cdm-raio-cheio);
	cursor: pointer;
}

.cdm-gaveta__item {
	/* Uma coluna so: a linha inteira e o alvo (link ou botao de nivel). Antes
	   havia uma segunda coluna para o botao do acordeao, que saiu junto com
	   ele. */
	display: block;
	border-bottom: 1px solid var(--cdm-cinza-200);
}

.cdm-gaveta__link {
	padding: var(--cdm-e-4);
	font-size: var(--cdm-t-base);
	font-weight: var(--cdm-peso-medio);
	color: var(--cdm-texto);
	text-decoration: none;
}

/* --- segundo nivel: subcategorias -----------------------------------------
 *
 * Painel que cobre a gaveta inteira e desliza da direita, com o nome da
 * categoria no topo e "Voltar" explicito. Substituiu o acordeao que abria a
 * lista embaixo do item: com 12 categorias de dois niveis, abrir uma jogava
 * as outras para fora da tela.
 *
 * A raiz continua montada por baixo -- voltar nao remonta nada.
 * -------------------------------------------------------------------- */

.cdm-gaveta__nivel {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	background: var(--cdm-superficie);
	transform: translateX(100%);
	transition: transform var(--cdm-transicao);
}

.cdm-gaveta__nivel[hidden] {
	display: none;
}

.cdm-gaveta__nivel--aberto {
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.cdm-gaveta__nivel {
		transition: none;
	}
}

.cdm-gaveta__topo--nivel {
	gap: var(--cdm-e-2);
	justify-content: flex-start;
}

.cdm-gaveta__voltar {
	display: inline-flex;
	align-items: center;
	gap: var(--cdm-e-2);
	padding: var(--cdm-e-1) var(--cdm-e-2) var(--cdm-e-1) 0;
	color: inherit;
	font: inherit;
	font-weight: var(--cdm-peso-semi);
	border: 0;
	background: none;
	cursor: pointer;
}

.cdm-gaveta__voltar .cdm-icone {
	font-size: var(--cdm-t-sm);
}

/* O nome da categoria e o titulo do nivel; sem o fio a esquerda ele
   encostaria no "Voltar". */
.cdm-gaveta__titulo--nivel {
	padding-left: var(--cdm-e-3);
	border-left: 1px solid currentColor;
	font-size: var(--cdm-t-base);
}

/* Linha de categoria que leva ao segundo nivel: e um <button>, entao zera a
   aparencia nativa para ficar identica a linha que e link. */
.cdm-gaveta__link--ramo {
	display: flex;
	align-items: center;
	width: 100%;
	font: inherit;
	text-align: left;
	border: 0;
	background: none;
	cursor: pointer;
}

.cdm-gaveta__rotulo {
	flex: 1 1 auto;
	min-width: 0;
}

.cdm-gaveta__avanco {
	flex: 0 0 auto;
	color: var(--cdm-texto-apagado);
	font-size: var(--cdm-t-sm);
}

/* --- "Não achou? Pesquise aqui" -------------------------------------------
 *
 * Fecha o segundo nível, depois da lista de subcategorias: rede de segurança
 * pra quem abriu o painel errado, num bloco separado -- não é mais um item
 * de lista (era o link "Ver tudo em X", que saiu daqui).
 * -------------------------------------------------------------------- */

.cdm-gaveta__busca-nivel {
	/* Logo depois da lista, não grudado no fim do painel -- a lista tem
	   tamanhos bem diferentes entre categorias e o convite de busca precisa
	   ficar perto do que a pessoa acabou de ler, não flutuando lá embaixo. */
	padding: var(--cdm-e-4);
	border-top: 1px solid var(--cdm-borda);
	background: var(--cdm-fundo-alt);
}

.cdm-gaveta__busca-nivel-titulo {
	margin: 0 0 var(--cdm-e-2);
	color: var(--cdm-texto-apagado);
	font-size: var(--cdm-t-sm);
	font-weight: var(--cdm-peso-medio);
}

.cdm-gaveta__busca-nivel .cdm-busca {
	width: 100%;
	margin-left: 0;
}

.cdm-gaveta__busca-nivel .cdm-busca__caixa {
	height: 42px;
	border: 1px solid var(--cdm-borda);
}

/* -------------------------------------------------------------------------
   Desfoque do fundo enquanto a gaveta esta aberta

   O filtro vai no cabecalho, no conteudo e no rodape -- nao no <body>. Se
   fosse no body, a propria gaveta seria desfocada junto: `filter` cria um
   contexto de empilhamento novo e passaria a valer para os descendentes
   posicionados, inclusive o menu.

   2px e de proposito: o suficiente para a pagina recuar, pouco o bastante
   para ela continuar reconhecivel atras do menu. Quem prefere menos
   movimento na tela nao recebe nem isso.
   ---------------------------------------------------------------------- */

.cdm-com-gaveta .cdm-cabecalho__aviso,
.cdm-com-gaveta .cdm-cabecalho,
.cdm-com-gaveta .cdm-conteudo,
.cdm-com-gaveta .cdm-rodape {
	filter: blur(2px);
	transition: filter var(--cdm-transicao);
}

@media (prefers-reduced-motion: reduce) {
	.cdm-com-gaveta .cdm-cabecalho__aviso,
	.cdm-com-gaveta .cdm-cabecalho,
	.cdm-com-gaveta .cdm-conteudo,
	.cdm-com-gaveta .cdm-rodape {
		filter: none;
	}
}

/* Ícone de cada categoria no menu lateral. Largura fixa para os rótulos
   alinharem numa vertical só, independente da largura do glifo. */
.cdm-gaveta__icone {
	flex: 0 0 auto;
	width: 22px;
	font-size: 15px;
	color: var(--cdm-azul);
	text-align: center;
}

/* O link da categoria passa a ter ícone + texto. */
.cdm-gaveta__link {
	display: flex;
	align-items: center;
	gap: var(--cdm-e-2);
}

/* Busca no topo do menu, logo abaixo do título. */
.cdm-gaveta__busca {
	padding: var(--cdm-e-3) var(--cdm-e-4);
	border-bottom: 1px solid var(--cdm-borda);
	background: var(--cdm-branco);
}

.cdm-gaveta__busca .cdm-busca {
	width: 100%;
	margin-left: 0;
}

.cdm-gaveta__busca .cdm-busca__caixa {
	height: 42px;
	border: 1px solid var(--cdm-borda);
}

/* -------------------------------------------------------------------------
   Rodapé do menu lateral

   Separado da lista por fundo e borda: antes eram três atalhos soltos no fim
   das categorias e liam como se fossem mais categorias. Agora é um bloco só,
   com rótulo de ação e o verde oficial do WhatsApp.
   ---------------------------------------------------------------------- */

.cdm-gaveta__rodape {
	margin-top: auto;
	padding: var(--cdm-e-4);
	border-top: 1px solid var(--cdm-borda);
	background: var(--cdm-fundo-alt);
}

.cdm-gaveta__whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cdm-e-2);

	padding: var(--cdm-e-3) var(--cdm-e-4);
	border-radius: var(--cdm-raio);
	background: var(--cdm-whatsapp);

	color: var(--cdm-branco);
	font-weight: var(--cdm-peso-semi);
	text-decoration: none;
}

.cdm-gaveta__whatsapp i {
	font-size: 20px;
}

.cdm-gaveta__whatsapp:hover,
.cdm-gaveta__whatsapp:focus-visible {
	filter: brightness(.94);
	color: var(--cdm-branco);
}