/**
 * header.css — Barra utilitária, barra de categorias, megamenu e drawer.
 *
 * O header foi MEDIDO de 360px a 2560px (não estimado). Duas armadilhas dessa medição
 * estão resolvidas aqui:
 *
 *  (a) O nav NUNCA acusa overflow — o flex o comprime e quem é expulso da tela é o CTA.
 *      Por isso a topbar encolhe por etapas (a mensagem some <1000px; <760px some o
 *      "📍 Atendemos", a busca vira fluida e o CTA fica só com o ícone).
 *  (b) O breakpoint do menu é 1200px, não 1000px: abaixo disso 8 categorias + CTA não
 *      cabem, e o hambúrguer já lista tudo.
 */

/* ═════════════════════════════════════════════════════ HEADER ══════════════ */

.ck-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--cor-fundo);
	box-shadow: var(--sombra-barra);
}

/* ── Barra utilitária ──────────────────────────────────────────────────────── */

.ck-topbar { background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); }

.ck-topbar__inner {
	max-width: var(--largura-barra);
	margin: 0 auto;
	padding: 6px 28px;
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: .78125rem;
	color: var(--cor-texto-suave);
}

.ck-topbar__local {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--cor-marca);
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
}
.ck-topbar__local:hover { color: var(--cor-link-hover); }

.ck-topbar__msg {
	flex: 1;
	text-align: center;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ck-busca {
	display: flex;
	align-items: center;
	gap: 7px;
	background: var(--cor-fundo);
	border: 1px solid var(--cor-borda-campo);
	border-radius: var(--raio-max);
	padding: 5px 13px;
	flex: none;
	transition: border-color var(--dur-media) var(--curva), box-shadow var(--dur-media) var(--curva);
}
.ck-busca:focus-within { border-color: var(--cor-marca); box-shadow: 0 0 0 3px rgba(91,30,154,.10); }
.ck-busca__icone { color: var(--cor-icone-suave); }
.ck-busca__campo {
	border: 0;
	outline: none;
	background: transparent;
	font-family: var(--fonte-corpo);
	font-size: .78125rem;
	color: var(--cor-texto);
	width: 150px;
	padding: 1px 0;
}

.ck-topbar__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	font-family: var(--fonte-titulo);
	font-weight: 600;
	font-size: .8125rem;
	background: var(--cor-whatsapp);
	color: var(--cor-fundo);
	border-radius: var(--raio-max);
	padding: 7px 16px;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 2px 10px rgba(24,134,71,.28);
	transition: transform var(--dur-media) var(--curva);
}
.ck-topbar__cta:hover { transform: translateY(-1px); color: var(--cor-fundo); }
.ck-topbar__cta svg { width: 17px; height: 17px; }

/* ── Barra principal ───────────────────────────────────────────────────────── */

.ck-bar {
	max-width: var(--largura-barra);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 8px 28px;
}

.ck-logo { display: flex; align-items: center; flex: none; text-decoration: none; }
.ck-logo img { height: 64px; width: auto; transition: height var(--dur-media) var(--curva); }
.ck-logo__texto { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.5rem; color: var(--cor-marca); }

.ck-burger {
	display: none;
	margin-left: auto;
	background: var(--cor-superficie);
	border: 1px solid var(--cor-borda-campo);
	border-radius: var(--raio-p);
	width: 46px; height: 46px;
	cursor: pointer;
	place-items: center;
}
.ck-burger__linhas { display: grid; gap: 4px; }
.ck-burger__linhas span { display: block; width: 20px; height: 2.4px; background: var(--cor-marca); border-radius: 2px; }

/* ═══════════════════════════════════════════════════════ NAV ═══════════════ */

.ck-nav {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.35vw, 26px);
	list-style: none;
	margin: 0;
	padding: 0;
	margin-left: 8px;
}

.ck-nav__item {
	/*
	 * static, NUNCA relative: o painel é position:absolute e precisa que o bloco de
	 * contenção seja o <header> (o sticky já o estabelece). Com relative aqui, o painel
	 * encolhe para a largura do item.
	 */
	position: static;
	display: inline-flex;
	align-items: center;
	padding: 6px 0;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: border-color var(--dur-media) var(--curva);
}

.ck-nav__link {
	font-family: var(--fonte-titulo);
	font-weight: 500;
	font-size: clamp(13px, 1.06vw, 15.5px);
	color: var(--cor-texto);
	text-decoration: none;
	border-radius: 6px;
}
.ck-nav__link:hover { color: var(--cor-marca); }

/* O item aberto se marca por sublinhado magenta — foi o que substituiu o "+" na barra. */
.ck-nav__item.is-open { border-bottom-color: var(--cor-magenta); }
.ck-nav__item.is-open > .ck-nav__link { color: var(--cor-marca); }

/*
 * ── O BOTÃO DO DISCLOSURE ──────────────────────────────────────────────────
 * Existe SEMPRE no DOM (a a11y é real), mas é invisível em repouso no desktop:
 * a barra de 8 categorias foi medida e não sobra espaço para 8 chevrons — quem seria
 * expulso da tela é o CTA. Ele aparece em três casos, e só neles:
 *   1. :focus-visible        → quem navega por teclado vê o controle
 *   2. [aria-expanded=true]  → o painel aberto mostra de onde saiu
 *   3. abaixo de 1200px      → vira o +/− do acordeão do drawer
 * Custo de layout em repouso: zero px.
 */
.ck-nav__toggle {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	background: transparent;
	color: var(--cor-marca);
	cursor: pointer;
}

.ck-nav__toggle:focus-visible,
.ck-nav__toggle[aria-expanded="true"] {
	position: static;
	width: auto; height: auto;
	margin: 0 0 0 4px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	display: inline-grid;
	place-items: center;
	padding: 2px;
}

.ck-chevron { transition: transform var(--dur-media) var(--curva); }
.ck-nav__toggle[aria-expanded="true"] .ck-chevron { transform: rotate(180deg); }

/* ═══════════════════════════════════════════════════ MEGAMENU ══════════════ */

.ck-panel {
	/*
	 * Devolve a quebra de linha. O painel é filho do <li> do nav — o que elimina o vão
	 * morto entre gatilho e painel —, e o <li> usa `white-space: nowrap` para o rótulo
	 * da BARRA não quebrar. Sendo herdada, a regra atravessava o painel inteiro e os
	 * rótulos longos dos cards saíam cortados na borda em vez de passar para a 2ª linha.
	 */
	white-space: normal;
	position: absolute;
	left: 0; right: 0;
	top: 100%;
	background: var(--cor-fundo);
	box-shadow: var(--sombra-barra);
	border-top: 1px solid var(--cor-borda);

	/*
	 * visibility:hidden (não display:none) tira o painel da árvore de acessibilidade
	 * — que é o correto — e ainda permite transição.
	 */
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-8px);
	transition: opacity var(--dur-media) var(--curva), transform var(--dur-media) var(--curva), visibility 0s linear var(--dur-media);

	/* Cobre o vão entre a barra e o painel: o ponteiro nunca cai fora. [requisito 1] */
	padding-top: 4px;
}

.ck-nav__item.is-open > .ck-panel {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	transition-delay: 0s;
}

/* Sem JS o painel ainda abre no mouse e no foco — degrada, não some. */
.no-js .ck-nav__item:hover > .ck-panel,
.no-js .ck-nav__item:focus-within > .ck-panel {
	visibility: visible; opacity: 1; pointer-events: auto; transform: none;
}

.ck-panel__inner {
	max-width: var(--largura-conteudo);
	margin: 0 auto;
	padding: 36px 28px;
	display: grid;
	grid-template-columns: .68fr 1fr;
	gap: 40px;
}
.ck-panel--card-unico .ck-panel__inner { grid-template-columns: .8fr 1fr; }

.ck-panel__links { border-right: 1px solid var(--cor-borda); padding-right: 40px; }

.ck-panel__eyebrow {
	font-family: var(--fonte-corpo);
	font-weight: 700;
	font-size: .75rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cor-texto-suave);
	margin: 0 0 16px;
}

.ck-panel__list { list-style: none; margin: 0 0 14px; padding: 0; }

/*
 * Categoria com muitos produtos (Infláveis, 20) em coluna única deixava o painel ~3×
 * mais alto que os cards ao lado. Duas colunas cortam a altura pela metade.
 * `break-inside` no <li> é obrigatório: sem ele o nome do produto parte no meio ao
 * virar a coluna. E a zona de texto precisa crescer, senão as 2 colunas nascem
 * espremidas contra as fotos.
 */
.ck-panel--lista-larga .ck-panel__inner { grid-template-columns: 1.15fr 1fr; }
.ck-panel--lista-larga .ck-panel__list { column-count: 2; column-gap: 28px; }
.ck-panel--lista-larga .ck-panel__list li { break-inside: avoid; }
.ck-panel__list a {
	display: block;
	font-weight: 600;
	font-size: .875rem;
	color: var(--cor-texto);
	padding: 5px 0;
	text-decoration: none;
	border-radius: 6px;
}
.ck-panel__list a:hover { color: var(--cor-link-hover); }

.ck-panel__all {
	display: inline-block;
	font-weight: 700;
	font-size: .875rem;
	color: var(--cor-marca);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.ck-panel__all:hover { color: var(--cor-link-hover); }

.ck-panel__cards { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; min-height: 280px; }
.ck-panel--card-unico .ck-panel__cards { grid-template-columns: 1fr; }

.ck-card {
	position: relative;
	overflow: hidden;
	border-radius: 22px;
	text-decoration: none;
	box-shadow: var(--sombra-barra);
	min-height: 150px;
	transition: transform var(--dur-lenta) var(--curva);
}
.ck-card:hover { transform: translateY(-3px); }
.ck-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Enquadramento do card: `cover` corta pelo CENTRO, e há foto cujo assunto não está lá.
   Quem pede a âncora é a tabela `$vitrine` do megamenu-painel.php (Leonardo, 02/08). */
.ck-card__img--right { object-position: right; }
.ck-card .ck-sem-foto { position: absolute; inset: 0; }
.ck-card__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(42,18,64,.6), rgba(42,18,64,0) 55%); }
.ck-card__label {
	position: absolute; left: 16px; right: 60px; bottom: 16px; z-index: 2;
	color: var(--cor-fundo);
	font-family: var(--fonte-titulo);
	font-weight: 600;
	font-size: 1.3125rem;
	line-height: 1.15;
}
/*
 * O rótulo do card pequeno tem o MESMO corpo do grande (1.3125rem = os 21px do design).
 * Este seletor já reduziu para 1.0625rem: divergência nascida na conversão para WP — na
 * Mesa os dois cards saem do mesmo laço, com um único font-size. Se voltar a encolher,
 * é regressão, não decisão.
 */
.ck-card__arrow {
	position: absolute; right: 14px; bottom: 14px; z-index: 2;
	width: 40px; height: 40px;
	border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(255,255,255,.28);
	color: var(--cor-fundo);
	font-size: 1.0625rem;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background var(--dur-media) var(--curva);
}
.ck-card:hover .ck-card__arrow { background: var(--cor-magenta); }

/* ── Faixa sazonal ─────────────────────────────────────────────────────────── */

.ck-panel__sazonal {
	max-width: calc(var(--largura-conteudo) - 56px);
	margin: 0 auto 22px;
	padding: 12px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	background: linear-gradient(90deg, var(--cor-temporada-a), var(--cor-temporada-b));
	border: 1px solid var(--cor-ambar-borda);
	border-radius: 16px;
}

.ck-sazonal__titulo {
	font-family: var(--fonte-titulo);
	font-weight: 600;
	font-size: .8125rem;
	color: var(--cor-ambar-texto);
	white-space: nowrap;
	padding-left: 4px;
}
.ck-sazonal__texto { font-size: .8125rem; color: var(--cor-texto-suave); flex: 1; min-width: 200px; }

.ck-chip {
	font-family: var(--fonte-titulo);
	font-weight: 600;
	font-size: .78125rem;
	color: var(--cor-marca);
	background: var(--cor-fundo);
	border: 1px solid var(--cor-borda-campo);
	border-radius: var(--raio-max);
	padding: 6px 14px;
	white-space: nowrap;
	text-decoration: none;
	transition: transform var(--dur-media) var(--curva), border-color var(--dur-media) var(--curva);
}
.ck-chip:hover { transform: translateY(-1px); border-color: var(--cor-magenta); color: var(--cor-marca); }

/* ═════════════════════════════════════════════════ RESPONSIVO ══════════════ */

@media (max-width: 1000px) { .ck-topbar__msg { display: none; } }

@media (max-width: 760px) {
	.ck-topbar__local { display: none; }
	.ck-busca { flex: 1 1 auto; min-width: 0; }
	.ck-busca__campo { width: 100%; min-width: 0; }
	.ck-topbar__cta-txt { display: none; }
	.ck-topbar__cta { padding: 7px 10px; }
	.ck-logo img { height: 46px; }
}

/* ── Drawer: abaixo de 1200px ──────────────────────────────────────────────── */

@media (max-width: 1199.98px) {

	.ck-burger { display: grid; }

	.ck-nav-wrap {
		position: fixed;
		inset: 0;
		z-index: 60;
		background: var(--cor-fundo);
		display: flex;
		flex-direction: column;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--dur-media) var(--curva), visibility 0s linear var(--dur-media);
	}
	.ck-drawer-on .ck-nav-wrap { transform: none; visibility: visible; transition-delay: 0s; }
	.ck-drawer-on { overflow: hidden; }

	.ck-drawer__topo {
		display: flex; align-items: center; justify-content: space-between;
		padding: 14px 22px;
		border-bottom: 1px solid var(--cor-borda);
	}
	.ck-drawer__marca { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.25rem; color: var(--cor-marca); }
	.ck-drawer__fechar {
		background: var(--cor-superficie);
		border: 1px solid var(--cor-borda-campo);
		border-radius: var(--raio-p);
		width: 46px; height: 46px;
		font-size: 1.5rem; line-height: 1;
		color: var(--cor-marca);
		cursor: pointer;
	}

	.ck-drawer__rolagem { flex: 1; overflow-y: auto; padding: 8px 22px 24px; }

	.ck-nav { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }

	.ck-nav__item {
		display: block;
		position: relative;
		border-bottom: 1px solid var(--cor-borda);
		padding: 0;
	}
	.ck-nav__item.is-open { border-bottom-color: var(--cor-borda); }

	.ck-nav__link {
		display: block;
		font-size: 1.1875rem;
		font-weight: 600;
		padding: 18px 52px 18px 2px;
	}

	/* No drawer o botão é sempre visível: é o +/− do acordeão. */
	.ck-nav__toggle,
	.ck-nav__toggle:focus-visible,
	.ck-nav__toggle[aria-expanded="true"] {
		position: absolute;
		top: 10px; right: 0;
		width: 44px; height: 44px;
		margin: 0;
		clip: auto; clip-path: none;
		overflow: visible;
		display: grid; place-items: center;
	}
	.ck-nav__toggle .ck-chevron { width: 18px; height: 18px; }

	.ck-panel {
		position: static;
		box-shadow: none;
		border-top: 0;
		padding: 0;
		display: none;
	}
	.ck-nav__item.is-open > .ck-panel { display: block; transform: none; }

	.ck-panel__inner { display: block; padding: 0 2px 16px; }
	.ck-panel__links { border-right: 0; padding-right: 0; }
	.ck-panel__eyebrow { display: none; }
	.ck-panel__list a { font-size: 1rem; color: var(--cor-texto-suave); padding: 10px 12px; border-radius: 10px; }
	.ck-panel__list a:hover { background: var(--cor-superficie); color: var(--cor-marca); }
	.ck-panel__cards { display: none; }        /* fotos no drawer = peso sem função */
	.ck-panel__sazonal { display: none; }

	.ck-drawer__extra { padding-top: 4px; }
	.ck-drawer__bloco { border-bottom: 1px solid var(--cor-borda); }
	.ck-drawer__toggle {
		width: 100%;
		display: flex; align-items: center; justify-content: space-between;
		background: transparent; border: 0; cursor: pointer;
		padding: 18px 2px;
		font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.1875rem;
		color: var(--cor-texto);
	}
	.ck-drawer__sinal { width: 16px; height: 16px; position: relative; }
	.ck-drawer__sinal::before,
	.ck-drawer__sinal::after {
		content: ''; position: absolute; inset: 50% 0 auto 0;
		height: 2.4px; background: var(--cor-marca); border-radius: 2px;
		transition: transform var(--dur-media) var(--curva);
	}
	.ck-drawer__sinal::after { transform: rotate(90deg); }
	.ck-drawer__bloco.is-open .ck-drawer__sinal::after { transform: rotate(0); }

	.ck-drawer__painel { display: none; padding: 0 2px 16px; }
	.ck-drawer__bloco.is-open .ck-drawer__painel { display: block; }
	.ck-drawer__grupo {
		margin: 12px 0 4px;
		font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
		color: var(--cor-texto-suave); font-weight: 700;
	}
	.ck-drawer__painel a { display: block; font-weight: 600; color: var(--cor-texto-suave); padding: 9px 12px; border-radius: 10px; text-decoration: none; }
	.ck-drawer__painel a:hover { background: var(--cor-superficie); color: var(--cor-marca); }

	.ck-drawer__link {
		display: block;
		font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.1875rem;
		color: var(--cor-texto);
		padding: 18px 2px;
		border-bottom: 1px solid var(--cor-borda);
		text-decoration: none;
	}

	.ck-drawer__cta {
		display: flex; align-items: center; justify-content: center; gap: 9px;
		margin-top: 20px;
		font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.0625rem;
		background: var(--cor-whatsapp); color: var(--cor-fundo);
		border-radius: var(--raio-max);
		padding: 15px;
		text-decoration: none;
	}
}

@media (min-width: 1200px) {
	.ck-drawer__topo,
	.ck-drawer__extra { display: none; }

	/*
	 * ⚠️ NÃO usar display:contents no .ck-nav-wrap — ele é um <nav>, e display:contents
	 * remove o landmark "navigation" da árvore de acessibilidade em vários navegadores.
	 * O wrapper vira um flex child normal; quem some da caixa é o .ck-drawer__rolagem,
	 * que é um <div> sem papel semântico e portanto seguro.
	 */
	.ck-nav-wrap { display: flex; align-items: center; flex: 1; min-width: 0; }
	.ck-drawer__rolagem { display: contents; }
}