/**
 * Cabeçalho — Figma "linha-principal" (node 128:1367).
 *
 * Medidas do Dev Mode:
 *   linha       padding 16/24 · borda inferior 1px line · fundo surface
 *   logo-e-menu gap 40 · logo 210×70
 *   menu        gap 4 · item padding 8/16 · Label 16/1.5 (500) · chevron 16
 *   item hover  fundo brand-subtle · texto brand · pill · chevron-up
 *   ações       gap 20 · ícone 20px em caixa 25×25 · carrinho 32×32
 *   contador    left 14 · top -2 · min 18×18 · padding 1/5 · 11px · brand / brand-contrast
 *
 * Só tokens: as cores mudam pelo painel Sua Loja.
 */

/* ---------- Estrutura ---------- */

.cdw-cabecalho {
	position: relative;
	z-index: var(--wp--custom--z-index--header);
	background: var(--wp--preset--color--surface);
}

.cdw-cabecalho--fixo {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
}

/* Até 600 px a barra do WordPress rola com a página (não fica fixa): sem desconto no topo. */
@media (max-width: 600px) {
	.cdw-cabecalho--fixo {
		top: 0;
	}
}

.cdw-cabecalho__linha {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.cdw-cabecalho__conteudo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--space-24);
	width: 100%;
	max-width: var(--wp--custom--layout--container-max);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--space-16) var(--wp--preset--spacing--space-24);
}

.cdw-cabecalho__logo-e-menu {
	display: flex;
	align-items: center;
	gap: 40px;
	min-width: 0;
}

/* ---------- Logo (Fundamentos/Logo do cliente · 210×70) ---------- */

.cdw-cabecalho__logo {
	display: flex;
	flex-shrink: 0;
	width: 210px;
	height: 70px;
}

.cdw-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	/* Figma: pt 21 / pb 24 → arte 1,5px acima do centro. */
	padding-bottom: 3px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.cdw-logo__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 210px;
	max-height: 46px;
	object-fit: contain;
}

.cdw-logo__img--padrao {
	width: 198px;
	height: 29px;
}

.cdw-logo__texto {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-sm);
	font-weight: var(--wp--custom--weight--heavy);
	line-height: var(--wp--custom--line-height--heading-sm);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- Menu (Menu/Item) ---------- */

.cdw-nav--desktop {
	min-width: 0;
}

.cdw-menu,
.cdw-submenu__lista,
.cdw-submenu__sublista,
.cdw-gaveta__atalhos {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdw-nav--desktop .cdw-menu {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-4);
	white-space: nowrap;
}

.cdw-menu__item {
	position: relative;
}

.cdw-menu__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--space-4);
	margin: 0;
	padding: var(--wp--preset--spacing--space-8) var(--wp--preset--spacing--space-16);
	border: 0;
	border-radius: var(--wp--custom--radius--full);
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao),
		color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-menu__chevron {
	font-size: 16px;
	transition: transform var(--wp--custom--motion--duracao-padrao) var(--wp--custom--motion--ease-padrao);
}

/* Estado hover/aberto (Menu/Item · color=ink · hover=true).
 * Texto em brand-text (= brand quando a cor passa 4,5:1; com o azul padrão é
 * idêntico ao Figma). Com uma cor clara de cliente, o texto continua legível. */
.cdw-menu__link:hover,
.cdw-menu__item.is-aberto > .cdw-menu__link,
.cdw-menu__link[aria-current="page"],
.cdw-menu__item.is-atual > .cdw-menu__link {
	background: var(--wp--preset--color--brand-subtle);
	color: var(--wp--preset--color--brand-text);
}

.cdw-menu__item.is-aberto > .cdw-menu__link .cdw-menu__chevron {
	transform: rotate(180deg);
}

@media (hover: hover) {
	.cdw-nav--desktop .cdw-menu__item--pai:hover > .cdw-menu__link {
		background: var(--wp--preset--color--brand-subtle);
		color: var(--wp--preset--color--brand-text);
	}

	.cdw-nav--desktop .cdw-menu__item--pai:hover > .cdw-menu__link .cdw-menu__chevron {
		transform: rotate(180deg);
	}
}

/* ---------- Submenu (desktop): mesmo padrão da lista do Formulário/Select ---------- */

.cdw-nav--desktop .cdw-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--wp--custom--z-index--dropdown);
	/* Ponte invisível entre o item e o painel: o hover não se perde. */
	padding-top: var(--wp--preset--spacing--space-8);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-4px);
	transition:
		opacity var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao),
		transform var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao),
		visibility 0s linear var(--wp--custom--motion--duracao-rapida);
}

.cdw-nav--desktop .cdw-menu__item:nth-last-child(-n+2) > .cdw-submenu {
	left: auto;
	right: 0;
}

.cdw-nav--desktop .cdw-menu__item.is-aberto > .cdw-submenu {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

@media (hover: hover) {
	.cdw-nav--desktop .cdw-menu__item--pai:hover > .cdw-submenu {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}
}

.cdw-nav--desktop .cdw-submenu__painel {
	min-width: 240px;
	padding: var(--wp--preset--spacing--space-8);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--float);
}

.cdw-submenu__ver-tudo,
.cdw-submenu__link,
.cdw-submenu__sublink {
	display: block;
	padding: 12px var(--wp--preset--spacing--space-16);
	border-radius: var(--wp--custom--radius--full);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao),
		color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-submenu__ver-tudo {
	color: var(--wp--preset--color--brand-text);
	font-weight: var(--wp--custom--weight--bold);
}

a.cdw-submenu__ver-tudo:hover,
a.cdw-submenu__link:hover,
a.cdw-submenu__sublink:hover,
.cdw-submenu [aria-current="page"] {
	background: var(--wp--preset--color--brand-subtle);
	color: var(--wp--preset--color--brand-text);
}

/* Terceiro nível: o painel vira colunas (grupo = título + links). */
.cdw-nav--desktop .cdw-submenu__lista:has(.cdw-submenu__sublista) {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(180px, auto);
	gap: var(--wp--preset--spacing--space-8) var(--wp--preset--spacing--space-24);
}

.cdw-submenu__item--grupo > .cdw-submenu__link,
.cdw-nav--desktop .cdw-submenu__lista:has(.cdw-submenu__sublista) > .cdw-submenu__item > .cdw-submenu__link {
	font-weight: var(--wp--custom--weight--bold);
}

.cdw-submenu__link--titulo {
	cursor: default;
}

.cdw-submenu__sublink {
	padding-block: 6px;
	color: var(--wp--preset--color--ink-muted);
}

/* ---------- Ações (ícones) ---------- */

.cdw-cabecalho__acoes {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 20px;
}

.cdw-cabecalho__acao {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-size: 20px;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-cabecalho__acao:hover,
.cdw-cabecalho__acao[aria-expanded="true"] {
	color: var(--wp--preset--color--brand-text);
}

.cdw-cabecalho__abrir-gaveta {
	display: none;
}

/* Header/Carrinho */
.cdw-carrinho {
	position: relative;
	display: block;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

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

.cdw-carrinho__icone {
	position: absolute;
	/* Figma: caixa 25×25 em top 4; glyph de 20px centralizado nela. */
	top: 6.5px;
	left: 0;
	font-size: 20px;
}

.cdw-carrinho__contador {
	position: absolute;
	top: -2px;
	left: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	min-height: 18px;
	padding: 1px 5px;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand-contrast);
	font-size: 11px;
	font-weight: var(--wp--custom--weight--regular);
	line-height: 1.5;
	white-space: nowrap;
}

/* A busca (campo no lugar do menu + sugestões) vive em assets/css/busca.css. */

/* ---------- Gaveta (menu no celular / menu que não cabe) ---------- */

.cdw-gaveta {
	position: fixed;
	inset: 0;
	z-index: var(--wp--custom--z-index--modal);
}

/* A gaveta vive dentro do cabeçalho (z-index 100). Com ela aberta, o cabeçalho sobe acima da
   barra do WordPress (#wpadminbar, 99999) para a gaveta não ficar com o topo escondido. */
.cdw-cabecalho:has(.cdw-gaveta.is-aberta) {
	z-index: 100000;
}

.cdw-gaveta__fundo {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent);
	opacity: 0;
	transition: opacity var(--wp--custom--motion--duracao-padrao) var(--wp--custom--motion--ease-padrao);
}

.cdw-gaveta__painel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: min(360px, 88vw);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--float);
	transform: translateX(-100%);
	transition: transform var(--wp--custom--motion--duracao-padrao) var(--wp--custom--motion--ease-padrao);
}

.cdw-gaveta.is-aberta .cdw-gaveta__fundo {
	opacity: 1;
}

.cdw-gaveta.is-aberta .cdw-gaveta__painel {
	transform: none;
}

.cdw-gaveta__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--space-16);
	padding: var(--wp--preset--spacing--space-8) var(--wp--preset--spacing--space-16);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.cdw-logo--gaveta {
	justify-content: flex-start;
	width: auto;
	height: 56px;
	padding-bottom: 0;
}

.cdw-logo--gaveta .cdw-logo__img {
	max-width: 180px;
	max-height: 32px;
}

.cdw-nav--gaveta {
	padding: var(--wp--preset--spacing--space-8);
}

.cdw-nav--gaveta .cdw-menu__link {
	justify-content: space-between;
	width: 100%;
	min-height: 48px;
	padding: 12px var(--wp--preset--spacing--space-16);
	text-align: left;
}

.cdw-nav--gaveta .cdw-submenu {
	display: none;
	padding: 0 0 var(--wp--preset--spacing--space-8) var(--wp--preset--spacing--space-16);
}

.cdw-nav--gaveta .cdw-menu__item.is-aberto > .cdw-submenu {
	display: block;
}

.cdw-nav--gaveta .cdw-submenu__ver-tudo,
.cdw-nav--gaveta .cdw-submenu__link,
.cdw-nav--gaveta .cdw-submenu__sublink {
	white-space: normal;
}

.cdw-nav--gaveta .cdw-submenu__sublista {
	padding-left: var(--wp--preset--spacing--space-16);
}

.cdw-gaveta__atalhos {
	margin-top: auto;
	padding: var(--wp--preset--spacing--space-8);
	border-top: 1px solid var(--wp--preset--color--line);
}

.cdw-gaveta__atalho {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 12px var(--wp--preset--spacing--space-16);
	border-radius: var(--wp--custom--radius--full);
	color: var(--wp--preset--color--ink);
	font-weight: var(--wp--custom--weight--bold);
	text-decoration: none;
}

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

.cdw-gaveta__atalho .cdw-icone {
	font-size: 20px;
}

.cdw-menu__vazio {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption);
}

.cdw-menu__vazio a {
	color: var(--wp--preset--color--brand-text);
}

/* ---------- Modo compacto ----------
 * Celular (< 782px, breakpoint "tablet") OU quando o menu do cliente não cabe
 * na largura (o JS mede e adiciona .is-compacto). */

.cdw-cabecalho.is-compacto .cdw-cabecalho__conteudo {
	padding: 12px var(--wp--preset--spacing--space-16);
}

.cdw-cabecalho.is-compacto .cdw-cabecalho__logo-e-menu {
	gap: 12px;
}

.cdw-cabecalho.is-compacto .cdw-nav--desktop,
.cdw-cabecalho.is-compacto .cdw-cabecalho__acao--desktop {
	display: none;
}

.cdw-cabecalho.is-compacto .cdw-cabecalho__abrir-gaveta {
	display: flex;
}

.cdw-cabecalho.is-compacto .cdw-cabecalho__logo {
	width: auto;
	height: 48px;
}

.cdw-cabecalho.is-compacto .cdw-logo {
	padding-bottom: 0;
}

.cdw-cabecalho.is-compacto .cdw-logo__img {
	max-width: 160px;
	max-height: 28px;
}

.cdw-cabecalho.is-compacto .cdw-logo__img--padrao {
	width: 160px;
	height: auto;
}

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