/**
 * Busca do cabeçalho com sugestões — Figma "Busca · exemplos" (140:1848) e "Header mobile · exemplos" (150:3011).
 *
 * Medidas do Dev Mode:
 *   Busca/Campo            altura 48 · pílula · borda 2 focus · padding 0/16 · gap 8 · lupa 20 · texto 16/1.5
 *   desktop                campo começa depois do logo (24 + 210 + 40) · "Fechar" (xmark 20 + Label 16) a 32 do campo
 *   mobile                 campo ocupa a linha (padding 16, gap 16) · "Cancelar" Label 16 brand, área de toque 48
 *   Busca/Sugestões Largo  corpo padding 32, gap 32 · coluna de termos 360, blocos a 24 · sombra card
 *   Busca/Sugestões Mobile corpo padding 24, gap 24 · sem "recentes"
 *   título do bloco        Overline 12/1.5 maiúsculo ink-muted · 16 até o conteúdo
 *   Busca/Termo            pílula 42 de altura · borda 1 line · padding 8/16 · 16/1.5 · gap 8
 *   recente                relógio 20 em caixa 25 + termo 16 · gap 8 · linhas a 16
 *   Busca/Produto sugerido foto 64 raio 8 · gap 16 · nome Label 16 (500) · preço 16 ink-muted · itens a 8
 *   ver todos              fundo surface-alt · padding 16/32 · à direita · Label 16 brand + seta 20 ink
 *
 * Só tokens: as cores mudam pelo painel Sua Loja.
 */

/* ---------- Campo na linha do cabeçalho ---------- */

.cdw-cabecalho__conteudo {
	position: relative;
}

.cdw-busca {
	position: absolute;
	top: 0;
	bottom: 0;
	/* padding da linha + logo + distância logo→menu */
	left: calc(var(--wp--preset--spacing--space-24) + 210px + 40px);
	right: var(--wp--preset--spacing--space-24);
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-32);
	margin: 0;
	background: var(--wp--preset--color--surface);
}

.cdw-busca[hidden],
.cdw-busca-painel[hidden],
.cdw-busca-painel [hidden] {
	display: none;
}

/* O menu e os ícones continuam ocupando o lugar (o cabeçalho não muda de altura), só saem de cena. */
.cdw-cabecalho.is-buscando .cdw-nav--desktop,
.cdw-cabecalho.is-buscando .cdw-cabecalho__acoes {
	visibility: hidden;
}

.cdw-busca__campo {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--wp--preset--spacing--space-8);
	min-width: 0;
	height: 48px;
	padding: 0 var(--wp--preset--spacing--space-16);
	border: 2px solid var(--wp--preset--color--focus);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	cursor: text;
}

.cdw-busca__campo .cdw-icone {
	flex: none;
	width: 25px;
	font-size: 20px;
}

.cdw-busca__campo input {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	-webkit-appearance: none;
	appearance: none;
}

.cdw-busca__campo input::placeholder {
	color: var(--wp--preset--color--ink-muted);
	opacity: 1;
}

.cdw-busca__fechar {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--wp--preset--spacing--space-8);
	min-height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--wp--custom--line-height--body);
	cursor: pointer;
	transition: color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-busca__fechar:hover {
	color: var(--wp--preset--color--brand-text);
}

.cdw-busca__fechar .cdw-icone {
	width: 25px;
	font-size: 20px;
}

.cdw-busca__fechar-mobile {
	display: none;
}

/* ---------- Painel de sugestões ---------- */

.cdw-busca-painel {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	max-height: calc(100vh - 140px);
	max-height: calc(100dvh - 140px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--card);
}

.cdw-busca-painel__corpo {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--space-32);
	width: 100%;
	max-width: var(--wp--custom--layout--container-max);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--space-32);
}

.cdw-busca-painel__termos {
	display: flex;
	flex: 0 0 360px;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-24);
	min-width: 0;
}

/* Sem populares e sem recentes, a coluna some e os produtos ocupam a largura toda. */
.cdw-busca-painel__termos:not(:has(.cdw-busca-painel__bloco:not([hidden]))) {
	display: none;
}

.cdw-busca-painel__bloco {
	min-width: 0;
}

.cdw-busca-painel__bloco--produtos {
	flex: 1;
}

.cdw-busca-painel__cabeca {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--space-16);
}

.cdw-busca-painel .cdw-busca-painel__titulo {
	margin: 0 0 var(--wp--preset--spacing--space-16);
	color: var(--wp--preset--color--ink-muted);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--overline);
	font-weight: var(--wp--custom--weight--regular);
	line-height: var(--wp--custom--line-height--body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cdw-busca-painel__limpar {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink-muted);
	font: inherit;
	font-size: var(--wp--preset--font-size--overline);
	line-height: var(--wp--custom--line-height--body);
	text-decoration: underline;
	cursor: pointer;
}

.cdw-busca-painel__limpar:hover {
	color: var(--wp--preset--color--ink);
}

.cdw-busca-painel__chips,
.cdw-busca-painel__recentes,
.cdw-busca-painel__produtos {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdw-busca-painel__chips {
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--space-8);
}

.cdw-busca__termo {
	display: block;
	padding: 8px var(--wp--preset--spacing--space-16);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--full);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	text-decoration: none;
	transition:
		border-color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao),
		background-color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-busca__termo:hover {
	border-color: var(--wp--preset--color--line-strong);
	background: var(--wp--preset--color--surface-hover);
}

.cdw-busca-painel__recentes {
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-16);
}

.cdw-busca__recente {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-8);
	max-width: 100%;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	text-decoration: none;
}

.cdw-busca__recente .cdw-icone {
	flex: none;
	width: 25px;
	font-size: 20px;
}

.cdw-busca__recente span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cdw-busca__recente:hover {
	color: var(--wp--preset--color--brand-text);
}

.cdw-busca-painel__produtos {
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-8);
	transition: opacity var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-busca-painel.is-carregando .cdw-busca-painel__produtos {
	opacity: 0.5;
}

.cdw-busca__produto {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-16);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.cdw-busca__produto-foto {
	flex: none;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface-alt);
}

.cdw-busca__produto-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cdw-busca__produto-dados {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-4);
	min-width: 0;
}

.cdw-busca__produto-nome {
	overflow: hidden;
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--wp--custom--line-height--body);
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-busca__produto:hover .cdw-busca__produto-nome {
	color: var(--wp--preset--color--brand-text);
}

.cdw-busca__produto-preco {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

.cdw-busca__produto-preco del {
	margin-right: var(--wp--preset--spacing--space-8);
	font-size: var(--wp--preset--font-size--caption);
}

.cdw-busca__produto-preco ins {
	text-decoration: none;
}

.cdw-busca-painel__vazio {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

.cdw-busca-painel__rodape {
	background: var(--wp--preset--color--surface-alt);
}

.cdw-busca-painel__todos {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--space-8);
	width: 100%;
	max-width: var(--wp--custom--layout--container-max);
	margin-inline: auto;
	min-height: 57px;
	padding: var(--wp--preset--spacing--space-16) var(--wp--preset--spacing--space-32);
	color: var(--wp--preset--color--brand-text);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--wp--custom--line-height--body);
	text-align: right;
	text-decoration: none;
}

.cdw-busca-painel__todos:hover span {
	text-decoration: underline;
}

.cdw-busca-painel__todos .cdw-icone {
	flex: none;
	width: 25px;
	color: var(--wp--preset--color--ink);
	font-size: 20px;
}

.cdw-busca__termo:focus-visible,
.cdw-busca__recente:focus-visible,
.cdw-busca__produto:focus-visible,
.cdw-busca__fechar:focus-visible,
.cdw-busca-painel__limpar:focus-visible,
.cdw-busca-painel__todos:focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 2px;
}

/* ---------- Cabeçalho compacto: o campo ocupa a linha inteira ---------- */

.cdw-cabecalho.is-compacto .cdw-busca {
	right: var(--wp--preset--spacing--space-16);
	left: var(--wp--preset--spacing--space-16);
	gap: var(--wp--preset--spacing--space-16);
}

.cdw-cabecalho.is-compacto.is-buscando .cdw-cabecalho__logo-e-menu {
	visibility: hidden;
}

/* ---------- Celular ---------- */

@media (max-width: 781px) {
	.cdw-busca__fechar {
		color: var(--wp--preset--color--brand-text);
	}

	.cdw-busca__fechar .cdw-icone,
	.cdw-busca__fechar-desktop {
		display: none;
	}

	.cdw-busca__fechar-mobile {
		display: inline;
	}

	.cdw-busca-painel {
		max-height: calc(100vh - 80px);
		max-height: calc(100dvh - 80px);
	}

	.cdw-busca-painel__corpo {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--space-24);
		padding: var(--wp--preset--spacing--space-24);
	}

	.cdw-busca-painel__termos {
		flex: none;
	}

	.cdw-busca-painel__bloco--recentes {
		display: none;
	}

	/* No celular a coluna só existe se houver populares (recentes não aparecem aqui). */
	.cdw-busca-painel__termos:not(:has(.cdw-busca-painel__chips)) {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cdw-busca *,
	.cdw-busca-painel * {
		transition-duration: 0s !important;
	}
}