/*
 * Topo: faixa preta, cabeçalho (celular primeiro, computador a partir de 900px),
 * busca e gaveta do celular. Referência: Main.dc.html e HomeMobile.dc.html.
 */

/* ---------- Faixa preta ---------- */

.ir-faixa {
	background: var(--ir-preto);
	color: var(--ir-fundo);
}

.ir-faixa__curta {
	margin: 0;
	padding: 7px var(--ir-margem);
	font-size: 11px;
	text-align: center;
}

.ir-faixa__itens {
	display: none;
}

/* ---------- Cabeçalho (celular) ---------- */

.ir-topo {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--ir-fundo);
	border-bottom: 1px solid var(--ir-cor-linha);
}

/* Com a barra de administração fixa (de 600px a 782px), o topo desce junto. */
@media (min-width: 600px) {
	.admin-bar .ir-topo {
		top: var(--wp-admin--admin-bar--height, 0px);
	}
}

.ir-topo__linha {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	/* A primeira linha tem sempre 56px; a segunda só existe com a busca aberta. */
	grid-template-rows: var(--ir-topo-altura) auto;
	align-items: center;
	padding: 0 4px;
}

.ir-topo__esquerda {
	grid-column: 1;
	grid-row: 1;
	display: flex;
}

.ir-topo__logo {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	min-height: var(--ir-toque);
}

.ir-topo__logo .ir-logo {
	display: block;
	width: auto;
	height: 18px;
}

.ir-topo__direita {
	grid-column: 3;
	grid-row: 1;
	display: flex;
	justify-content: flex-end;
}

.ir-topo__nav {
	display: none;
}

/* Os botões ☰ e lupa dependem de JavaScript; sem ele, a busca fica sempre visível. */
.ir-topo__menu,
.ir-topo__buscar {
	display: none;
}

.ir-js .ir-topo__menu,
.ir-js .ir-topo__buscar {
	display: inline-flex;
}

.ir-carrinho__contador {
	position: absolute;
	top: 6px;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: var(--ir-raio-pilula);
	background: var(--ir-preto);
	color: var(--ir-fundo);
	font-size: 9px;
	font-weight: var(--ir-peso-forte);
	line-height: 1;
}

.ir-carrinho__contador[hidden] {
	display: none;
}

/* ---------- Busca ---------- */

.ir-busca {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0;
	padding: 0 12px 12px;
}

.ir-js .ir-busca:not(.is-aberta) {
	display: none;
}

.ir-busca__campo {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: var(--ir-toque);
	padding: 0 16px;
	border-radius: var(--ir-raio-campo);
	background: var(--ir-fundo-suave);
	color: var(--ir-cor-terciaria);
}

.ir-busca__campo:focus-within {
	outline: 2px solid var(--ir-preto);
	outline-offset: 2px;
}

.ir-busca__campo .ir-icone {
	width: 17px;
	height: 17px;
}

.ir-busca__entrada {
	flex: 1;
	min-width: 0;
	min-height: var(--ir-toque);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ir-cor-texto);
	/* 16px no celular evita o zoom automático do iOS ao tocar no campo. */
	font-size: 16px;
	font-weight: var(--ir-peso-normal);
}

.ir-busca__entrada:focus {
	outline: none;
}

.ir-busca__entrada::placeholder {
	color: var(--ir-cor-terciaria);
	opacity: 1;
}

.ir-busca__entrada::-webkit-search-cancel-button {
	cursor: pointer;
}

/* ---------- Cabeçalho (computador) ---------- */

@media (min-width: 900px) {
	.ir-faixa__curta {
		display: none;
	}

	.ir-faixa__itens {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px 28px;
		max-width: var(--ir-largura);
		margin: 0 auto;
		padding: 9px var(--ir-margem);
		font-size: 12px;
		letter-spacing: 0.04em;
	}

	.ir-faixa__separador {
		color: var(--ir-escuro-separador);
	}

	.ir-topo {
		position: static;
		border-bottom: 0;
	}

	/*
	 * De 900px a 1099px a busca desce para uma segunda linha inteira, para os
	 * ícones de conta e carrinho nunca ficarem sozinhos numa linha. A partir de
	 * 1100px fica tudo numa linha, como no mockup.
	 */
	.ir-topo__linha {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-rows: auto;
		grid-template-areas:
			"logo nav acoes"
			"busca busca busca";
		align-items: center;
		gap: 12px 36px;
		max-width: var(--ir-largura);
		min-height: 0;
		margin: 0 auto;
		padding: 18px var(--ir-margem);
	}

	.ir-topo__logo {
		grid-area: logo;
	}

	.ir-topo__nav {
		grid-area: nav;
	}

	.ir-busca {
		grid-area: busca;
	}

	.ir-topo__direita {
		grid-area: acoes;
	}

	.ir-topo__esquerda,
	.ir-js .ir-topo__esquerda {
		display: none;
	}

	.ir-topo__logo .ir-logo {
		height: 24px;
	}

	.ir-topo__nav {
		display: block;
	}

	.ir-topo__nav-lista {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 26px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.ir-topo__nav-lista a {
		display: flex;
		align-items: center;
		min-height: var(--ir-toque);
		font-size: 12px;
		font-weight: var(--ir-peso-destaque);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		text-decoration: none;
	}

	.ir-topo__nav-lista a[aria-current="page"] {
		text-decoration: underline;
		text-underline-offset: 6px;
		text-decoration-thickness: 1.5px;
	}

	.ir-busca,
	.ir-js .ir-busca:not(.is-aberta) {
		display: block;
		padding: 0;
	}

	.ir-busca__entrada {
		font-size: 14px;
	}

	.ir-topo__direita {
		gap: 4px;
	}

	.ir-topo .ir-icone-botao .ir-icone {
		width: 21px;
		height: 21px;
	}

	.ir-carrinho__contador {
		top: 2px;
		right: 2px;
		min-width: 18px;
		height: 18px;
		font-size: 10px;
	}
}

@media (min-width: 1100px) {
	.ir-topo__linha {
		grid-template-columns: auto auto minmax(220px, 1fr) auto;
		grid-template-areas: "logo nav busca acoes";
		gap: 16px 36px;
	}
}

/* ---------- Gaveta do celular ---------- */

.ir-gaveta {
	position: fixed;
	inset: 0;
	z-index: 100000;
}

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

.ir-gaveta__fundo {
	position: absolute;
	inset: 0;
	background: var(--ir-vidro-cor);
	-webkit-backdrop-filter: var(--ir-vidro-desfoque);
	backdrop-filter: var(--ir-vidro-desfoque);
	opacity: 0;
	transition: opacity var(--ir-transicao);
}

.ir-gaveta__painel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: min(318px, 86vw);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--ir-fundo);
	transform: translateX(-100%);
	transition: transform var(--ir-transicao);
}

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

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

.ir-gaveta__painel:focus {
	outline: none;
}

/* O painel rola (overflow), então o contorno de foco fica por dentro para não ser cortado. */
.ir-gaveta__painel :focus-visible {
	outline-offset: -2px;
}

/* No botão preto, por dentro ele sumiria: fica por fora (há folga em volta). */
.ir-gaveta__painel .ir-gaveta__botao--principal:focus-visible {
	outline-offset: 2px;
}

.ir-gaveta__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 8px 12px 20px;
	border-bottom: 1px solid var(--ir-cor-linha);
}

.ir-gaveta__topo .ir-logo {
	display: block;
	width: auto;
	height: 18px;
}

.ir-gaveta__conta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 20px;
	background: var(--ir-fundo-suave-2);
}

.ir-gaveta__ola {
	margin: 0;
	font-size: 14px;
	font-weight: var(--ir-peso-destaque);
}

.ir-gaveta__botoes {
	display: flex;
	gap: 8px;
}

.ir-gaveta__botao {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ir-toque);
	border: 1px solid var(--ir-preto);
	border-radius: var(--ir-raio-campo);
	font-size: 13px;
	font-weight: var(--ir-peso-destaque);
	text-decoration: none;
}

.ir-gaveta__botao--principal {
	background: var(--ir-preto);
	color: var(--ir-fundo);
}

.ir-gaveta__botao--principal:hover {
	color: var(--ir-fundo);
}

.ir-gaveta__titulo {
	margin: 0;
	padding: 16px 20px 4px;
	color: var(--ir-cor-secundaria);
	font-size: 11px;
	font-weight: var(--ir-peso-forte);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ir-gaveta__produtos a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	padding: 0 20px;
	font-size: 15px;
	font-weight: var(--ir-peso-medio);
	text-decoration: none;
}

.ir-gaveta__contagem {
	color: var(--ir-cor-terciaria);
	font-size: 12px;
}

.ir-gaveta__divisor {
	margin: 8px 20px;
	border: 0;
	border-top: 1px solid var(--ir-cor-linha);
}

.ir-gaveta__ajuda {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ir-gaveta__ajuda a {
	display: flex;
	align-items: center;
	min-height: 46px;
	padding: 0 20px;
	font-size: 14px;
	text-decoration: none;
}

.ir-gaveta__produtos a[aria-current="page"],
.ir-gaveta__ajuda a[aria-current="page"] {
	font-weight: var(--ir-peso-forte);
}

.ir-gaveta__rodape {
	margin-top: auto;
	padding: 20px;
}

.ir-gaveta__rodape .ir-botao--whatsapp {
	display: flex;
	gap: 8px;
	width: 100%;
	min-height: 48px;
	border-radius: var(--ir-raio-campo);
	font-size: 13px;
	font-weight: var(--ir-peso-destaque);
	letter-spacing: 0;
	text-transform: none;
}

@media (min-width: 900px) {
	.ir-gaveta {
		display: none;
	}
}