/**
 * Header do portal — faixa utilitária, barra principal, drawer e cesta.
 *
 * Duas regras carregam o arquivo inteiro:
 *
 * 1. Todo controle da direita tem 44px de altura e `flex-shrink:0`. É o que
 *    impede a cesta de esticar a barra verde e de empurrar a busca.
 * 2. A nav é `flex:1 1 max-content` com `flex-wrap`, e cada item é
 *    `flex-shrink:0; white-space:nowrap`. Quando aperta, a navegação desce
 *    inteira para uma segunda linha DENTRO da barra — em vez de encolher e
 *    cortar rótulo. Nenhum item tem overflow/ellipsis, de propósito.
 *
 * Seletores com `.bpc-hd`/`.bpc-cc-wrap` na frente não são enfeite: o tema
 * declara `button { display: inline-block }` com a mesma especificidade de
 * uma classe, e quem vier depois na cascata ganha. Já quebrou uma vez.
 *
 * @package bpc-loja
 */

/*
 * Tokens de cor e tipografia.
 *
 * A lista de seletores não é redundância. O drawer e o overlay são
 * `position: fixed` e por isso ficam FORA do <header>: dentro dele, o
 * `z-index: 30` do header cria um contexto de empilhamento e prenderia os
 * dois atrás do conteúdo da página.
 *
 * Morando fora, eles não herdam as variáveis declaradas só em `.bpc-hd`, e
 * todo `var()` do drawer vira valor inválido — foi assim que ele apareceu
 * branco no branco: topo sem o verde, título branco sobre branco, "Anuncie no
 * Portal" invisível (texto #fff com fundo terracota que não resolveu) e os
 * itens fora da Zilla Slab. Declarar os tokens nos três resolve na raiz.
 */
.bpc-hd,
.bpc-hd__drawer,
.bpc-hd__overlay {
	--hd-util: #123a20;
	--hd-util-txt: #c3d6c6;
	--hd-sep: #7fa588;

	--hd-verde: #1d4d2e;
	--hd-verde-escuro: #123a20;
	--hd-placa: #f4efe6;
	--hd-translucido: rgba(255, 255, 255, .12);
	--hd-translucido-forte: rgba(255, 255, 255, .2);

	--hd-nav: #dce8dd;
	--hd-nav-ativo: #fff;

	--cc-pilula: #e9e2d4;
	--cc-pilula-ativa: #f4efe6;
	--cc-painel: #fff;
	--cc-borda: #e6dccb;
	--cc-divisoria: #f0e9dc;
	--cc-campo: #e0d7c4;
	--cc-neutro: #f6f1e7;

	--cc-verde: #2f6b43;
	--cc-verde-claro: #eaf1e8;
	--cc-verde-borda: #cdd9cc;

	--cc-terracota: #e15b43;
	--cc-terracota-hover: #c2422c;

	--cc-areia: #f2dfb4;
	--cc-areia-tinta: #6b4423;
	--cc-ambar: #9a6622;
	--cc-pessego: #f2c7a0;

	--cc-tinta: #2a1d12;
	--cc-menu: #3e3327;
	--cc-sec: #5a4d3c;
	--cc-sec2: #6b5d49;
	--cc-ter: #8a7763;
	--cc-ter2: #a89b86;
	--cc-rotulo-btn: #4a5a47;

	--hd-serif: "Zilla Slab", Georgia, serif;
	--hd-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

	/*
	 * Largura do conteúdo do header.
	 *
	 * 1200px é a mesma medida dos containers do Elementor no corpo da página
	 * (conferido em produção), então logo, menu e cesta ficam alinhados com o
	 * conteúdo em vez de flutuarem colados nas bordas da tela.
	 */
	--hd-largura: 1200px;
}

.bpc-hd {
	position: sticky;
	top: 0;
	z-index: 30;
	font-family: var(--hd-sans);
}

.bpc-hd *,
.bpc-hd *::before,
.bpc-hd *::after,
.bpc-hd__drawer *,
.bpc-hd__drawer *::before,
.bpc-hd__drawer *::after {
	box-sizing: border-box;
}

/* Só para leitor de tela — o tema pai não garante a classe. */
.bpc-hd .screen-reader-text,
.bpc-cc-wrap .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bpc-hd :focus-visible,
.bpc-hd__drawer :focus-visible {
	outline: 2px solid var(--cc-pessego);
	outline-offset: 2px;
}

/* ─────────────────────────────────────────────
 *  1 · FAIXA UTILITÁRIA
 * ───────────────────────────────────────────── */

.bpc-hd__util {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	align-items: center;
	justify-content: space-between;
	/*
	 * Conteúdo a 1200px, centralizado; o verde continua sangrando de ponta a
	 * ponta. O `max()` no padding faz as duas coisas sem um div extra: acima
	 * de 1200px a sobra vira recuo lateral, abaixo vale o respiro mínimo.
	 */
	padding: 7px max(26px, calc((100% - var(--hd-largura)) / 2));
	font-size: 12.5px;
	color: var(--hd-util-txt);
	background: var(--hd-util);
}

.bpc-hd__util-lado {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	align-items: center;
}

.bpc-hd__util-item {
	display: inline-flex;
	gap: 7px;
	align-items: center;
}

.bpc-hd__clima-icone {
	color: var(--cc-pessego);
}

.bpc-hd__sep {
	color: var(--hd-sep);
}

/* O último separador de cada lado não tem o que separar. */
.bpc-hd__util-lado > .bpc-hd__sep:last-child {
	display: none;
}

.bpc-hd__util-link {
	color: var(--hd-util-txt);
	text-decoration: none;
}

.bpc-hd__util-link:hover,
.bpc-hd__util-link:focus-visible {
	color: var(--hd-placa);
}

.bpc-hd__data::first-letter {
	text-transform: uppercase;
}

/* ─────────────────────────────────────────────
 *  2 · BARRA PRINCIPAL
 * ───────────────────────────────────────────── */

.bpc-hd__barra {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	row-gap: 6px;
	align-items: center;
	min-height: 82px;
	padding: 8px max(18px, calc((100% - var(--hd-largura)) / 2));
	background: var(--hd-verde);
}

/* O hamburger só existe no mobile.
   Qualificado por elemento (0,2,1) de propósito: com a mesma especificidade da
   regra .bpc-hd .bpc-hd__controle, quem ganhava era a ordem — e o LiteSpeed
   recombina os arquivos, então ordem aqui não é garantia de nada. */
.bpc-hd button.bpc-hd__hamburger {
	display: none;
}

.bpc-hd__hamburger-barras {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 15px;
}

.bpc-hd__hamburger-barras span {
	display: block;
	width: 19px;
	height: 2.4px;
	background: var(--hd-placa);
	border-radius: 2px;
	transition: transform .18s ease, opacity .12s ease;
}

/* Aberto vira "×": a do meio some e as outras cruzam. */
.bpc-hd__hamburger--aberto { background: rgba(255, 255, 255, .22) !important; }
.bpc-hd__hamburger--aberto .bpc-hd__hamburger-barras span:nth-child(1) { transform: translateY(6.4px) rotate(45deg); }
.bpc-hd__hamburger--aberto .bpc-hd__hamburger-barras span:nth-child(2) { opacity: 0; }
.bpc-hd__hamburger--aberto .bpc-hd__hamburger-barras span:nth-child(3) { transform: translateY(-6.4px) rotate(-45deg); }

/* Com o drawer aberto, a página atrás não rola. */
body.bpc-hd-travado { overflow: hidden; }

/* Controles translúcidos: busca e hamburger. Todos 44px. */
.bpc-hd .bpc-hd__controle {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--hd-placa);
	background: var(--hd-translucido);
	border: 0;
	border-radius: 11px;
	cursor: pointer;
	transition: background .16s ease;
}

.bpc-hd .bpc-hd__controle:hover {
	background: var(--hd-translucido-forte);
}

/* ── Logo ─────────────────────────────────── */

.bpc-hd__logo {
	display: flex;
	flex: none;
	align-items: center;
	padding: 5px 9px;
	background: var(--hd-placa);
	border-radius: 11px;
	text-decoration: none;
	/*
	 * A arte é traço escuro sobre fundo claro. Nada de filter:invert aqui —
	 * inverter deixaria o traço cinza-claro sobre o verde, ilegível.
	 */
}

/*
 * A altura manda; a largura segue a proporção da arte (≈3,6:1).
 *
 * 46px em vez de 58: a 58 o logo ocupava 208px e não sobrava linha para a
 * busca aberta. A 46 ele fica em ~166px e devolve 42px à barra.
 */
/*
 * Seletor longo de propósito: nas páginas de loja o WooCommerce declara
 *
 *     .woocommerce img, .woocommerce-page img { height: auto }
 *
 * que é (0,1,1) e ganhava de `.bpc-hd__logo-img` (0,1,0). Era por isso que o
 * header saía certo na home e, só em produto e loja, o logo inchava para
 * 300x83 e esticava a barra de 82px para 109px. Com (0,3,0) ela não alcança.
 */
.bpc-hd .bpc-hd__logo .bpc-hd__logo-img {
	display: block;
	width: auto;
	height: 46px;
	max-width: 200px;
	object-fit: contain;
}

.bpc-hd__logo-texto {
	font-family: var(--hd-serif);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--hd-verde);
}

/* ── Nav ──────────────────────────────────── */

.bpc-hd__nav {
	/*
	 * A regra crítica. `1 1 max-content` deixa a nav crescer até o conteúdo e
	 * encolher só até onde o wrap resolve; `min-width:0` autoriza o flex a
	 * quebrar a linha da barra, jogando a nav inteira para baixo em vez de
	 * espremer os rótulos.
	 */
	flex: 1 1 max-content;
	min-width: 0;
}

.bpc-hd__menu {
	display: flex;
	flex-wrap: wrap;
	row-gap: 2px;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpc-hd__menu > li {
	flex-shrink: 0;
	position: relative;
	white-space: nowrap;
}

.bpc-hd__menu > li > a {
	display: block;
	padding: 14px 12px 15px;
	font-family: var(--hd-serif);
	font-size: 16.5px;
	font-weight: 600;
	color: var(--hd-nav);
	text-decoration: none;
	/* Sem overflow/ellipsis: rótulo de navegação não pode ser truncado. */
}

.bpc-hd__menu > li > a:hover,
.bpc-hd__menu > li > a:focus-visible {
	color: var(--hd-nav-ativo);
}

.bpc-hd__menu > li.current-menu-item > a,
.bpc-hd__menu > li.current_page_item > a,
.bpc-hd__menu > li.current-menu-ancestor > a {
	font-weight: 700;
	color: var(--hd-nav-ativo);
}

/* Barra do item ativo: colada na base do rótulo, então acompanha a nav
   quando ela desce para a segunda linha. */
.bpc-hd__menu > li.current-menu-item > a::after,
.bpc-hd__menu > li.current_page_item > a::after,
.bpc-hd__menu > li.current-menu-ancestor > a::after {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 7px;
	left: 12px;
	height: 3px;
	background: var(--cc-terracota);
	border-radius: 3px;
}

/* ── Ações da direita ─────────────────────── */

.bpc-hd__acoes {
	display: flex;
	flex: none;
	gap: 10px;
	align-items: center;
	margin-left: auto;
}

/* ── Busca ────────────────────────────────── */

.bpc-hd__busca {
	position: relative;
	display: flex;
	flex: none;
	/* Não encolhe quando o botão some: o campo é absoluto e deixaria o box
	   em zero, fazendo cesta e Anuncie pularem 44px para a esquerda. */
	min-width: 44px;
	align-items: center;
}

.bpc-hd__busca[data-aberta="1"] .bpc-hd__busca-botao {
	display: none;
}

/*
 * O campo ocupa espaço de verdade na linha — não flutua sobre o menu.
 *
 * Para caber, a conta a 1200px teve de fechar em três frentes (medido nesta
 * página, com a nav em 627px, cesta 155 e Anuncie 101):
 *
 *   logo 58px + campo 240 + cesta cheia .... 1375  → estoura 175
 *   logo 46px + campo 240 + cesta cheia .... 1333  → estoura 133
 *   logo 46px + campo 200 + cesta cheia .... 1293  → estoura  93
 *   logo 46px + campo 200 + cesta em ícone . 1182  → sobram   18  ✓
 *
 * Daí o campo em 200px, o logo menor e a cesta virando ícone só enquanto a
 * busca está aberta (regra logo abaixo).
 */
.bpc-hd__busca-campo {
	display: flex;
	flex: none;
	gap: 8px;
	align-items: center;
	width: 200px;
	max-width: calc(100vw - 80px);
	height: 44px;
	padding: 0 8px 0 12px;
	background: var(--hd-placa);
	border-radius: 11px;
}

/*
 * Busca aberta → a cesta recolhe para o ícone.
 *
 * É o que devolve os 111px que faltavam. O subtotal some por alguns segundos,
 * enquanto a pessoa digita, e volta ao fechar a busca — troca barata perto de
 * empurrar a linha inteira para baixo ou cobrir o menu.
 */
.bpc-hd__barra:has(.bpc-hd__busca[data-aberta="1"]) .bpc-cc__btn {
	width: 44px;
	padding: 0;
	justify-content: center;
}

.bpc-hd__barra:has(.bpc-hd__busca[data-aberta="1"]) .bpc-cc__labels,
.bpc-hd__barra:has(.bpc-hd__busca[data-aberta="1"]) .bpc-cc__chevron {
	display: none;
}

.bpc-hd__busca-campo[hidden] {
	display: none;
}

.bpc-hd__busca-lupa {
	flex: none;
	color: var(--hd-verde);
}

.bpc-hd .bpc-hd__busca-campo input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	margin: 0;
	padding: 0;
	font-family: var(--hd-sans);
	font-size: 14.5px;
	color: var(--cc-tinta);
	background: none;
	border: 0;
	box-shadow: none;
}

.bpc-hd .bpc-hd__busca-campo input[type="search"]:focus {
	outline: 0;
	box-shadow: none;
}

.bpc-hd .bpc-hd__busca-fechar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	color: var(--cc-sec);
	background: none;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

.bpc-hd .bpc-hd__busca-fechar:hover {
	background: rgba(0, 0, 0, .06);
}

/* ── Anuncie ──────────────────────────────── */

.bpc-hd .bpc-hd__anuncie {
	display: flex;
	flex: none;
	align-items: center;
	height: 44px;
	padding: 0 20px;
	font-family: var(--hd-serif);
	font-size: 16.5px;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	text-decoration: none;
	background: var(--cc-terracota);
	border-radius: 11px;
	transition: background .16s ease;
}

.bpc-hd .bpc-hd__anuncie:hover {
	color: #fff;
	background: var(--cc-terracota-hover);
}

/* ─────────────────────────────────────────────
 *  3 · CESTA + CONTA — BOTÃO
 * ───────────────────────────────────────────── */

.bpc-cc-wrap {
	position: relative;
	display: inline-flex;
	flex: none;
	width: max-content;
}

.bpc-cc {
	position: relative;
}

.bpc-hd .bpc-cc__btn,
.bpc-cc-wrap .bpc-cc__btn {
	display: flex;
	flex: none;
	gap: 10px;
	align-items: center;
	height: 44px;
	margin: 0;
	padding: 0 13px;
	font: inherit;
	color: var(--hd-verde);
	white-space: nowrap;
	background: var(--cc-pilula);
	border: 0;
	border-radius: 11px;
	cursor: pointer;
	transition: background .16s ease;
}

.bpc-cc-wrap .bpc-cc__btn:hover,
.bpc-cc-wrap .bpc-cc__btn[aria-expanded="true"] {
	background: var(--cc-pilula-ativa);
}

.bpc-cc__icon {
	position: relative;
	display: flex;
	flex: none;
	color: var(--hd-verde);
}

/*
 * Contador dentro dos limites do botão.
 *
 * Com top/right maiores ele encostava na borda da barra verde e era cortado
 * pelo overflow do header. -5/-6 com borda de 2px o mantém colado na sacola
 * sem sair da caixa.
 */
.bpc-cc__count {
	position: absolute;
	top: -5px;
	right: -6px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	color: #fff;
	background: var(--cc-terracota);
	border: 2px solid var(--cc-pilula);
	border-radius: 999px;
}

.bpc-cc__btn:hover .bpc-cc__count,
.bpc-cc__btn[aria-expanded="true"] .bpc-cc__count {
	border-color: var(--cc-pilula-ativa);
}

.bpc-cc__count--pop {
	animation: bpcPop .28s ease;
}

@keyframes bpcPop {
	0%   { transform: scale(.7); }
	55%  { transform: scale(1.2); }
	100% { transform: scale(1); }
}

.bpc-cc__labels {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 1px;
	align-items: flex-start;
	white-space: nowrap;
}

.bpc-cc__top {
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--cc-rotulo-btn);
}

.bpc-cc__value {
	font-family: var(--hd-serif);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--hd-verde);
}

.bpc-cc__chevron {
	flex: none;
	color: var(--cc-rotulo-btn);
	transition: transform .18s ease;
}

.bpc-cc__btn[aria-expanded="true"] .bpc-cc__chevron {
	transform: rotate(180deg);
}

/* ─────────────────────────────────────────────
 *  4 · PAINEL
 * ───────────────────────────────────────────── */

.bpc-cc__panel {
	position: absolute;
	top: calc(100% + 13px);
	right: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	width: 380px;
	max-width: calc(100vw - 32px);
	overflow: hidden;
	color: var(--cc-tinta);
	text-align: left;
	background: var(--cc-painel);
	border: 1px solid var(--cc-borda);
	border-radius: 18px;
	box-shadow: 0 40px 70px -28px rgba(18, 58, 32, .5);
}

.bpc-cc__panel[hidden] {
	display: none;
}

.bpc-cc__alca {
	display: none;
}

.bpc-cc__seta {
	position: absolute;
	top: -7px;
	right: 26px;
	width: 13px;
	height: 13px;
	background: var(--hd-verde);
	border-top: 1px solid var(--cc-borda);
	border-left: 1px solid var(--cc-borda);
	transform: rotate(45deg);
}

.bpc-cc__panel:has(.bpc-cc__id--logado) .bpc-cc__seta {
	background: #fbf8f1;
}

.bpc-cc__secao {
	flex: none;
	padding: 14px 16px;
	border-bottom: 1px solid var(--cc-divisoria);
}

/* ── Identidade ───────────────────────────── */

.bpc-cc__id {
	display: flex;
	flex: none;
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
}

.bpc-cc__id--visitante {
	background: var(--hd-verde);
}

.bpc-cc__id--logado {
	background: #fbf8f1;
	border-bottom: 1px solid var(--cc-divisoria);
}

.bpc-cc__id-selo,
.bpc-cc__avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 13px;
}

.bpc-cc__id-selo {
	color: var(--cc-pessego);
	background: rgba(255, 255, 255, .14);
}

.bpc-cc__avatar {
	font-family: var(--hd-serif);
	font-size: 18px;
	font-weight: 700;
	color: var(--cc-areia-tinta);
	background: var(--cc-areia);
}

.bpc-cc__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bpc-cc__id-texto {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bpc-cc__id-texto strong {
	overflow: hidden;
	font-family: var(--hd-serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bpc-cc__id-texto span {
	overflow: hidden;
	font-size: 12.5px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bpc-cc__id--visitante .bpc-cc__id-texto strong { color: var(--hd-placa); }
.bpc-cc__id--visitante .bpc-cc__id-texto span   { color: var(--hd-util-txt); }
.bpc-cc__id--logado .bpc-cc__id-texto strong    { color: var(--cc-tinta); }
.bpc-cc__id--logado .bpc-cc__id-texto span      { color: var(--cc-ter); }

.bpc-cc__id-link {
	flex: none;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--cc-verde);
	text-decoration: none;
}

.bpc-cc__id-link:hover { text-decoration: underline; }

/* ── Botões do painel ─────────────────────── */

.bpc-cc-wrap .bpc-cc__botao {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 11px 14px;
	font-family: var(--hd-sans);
	font-size: 14.5px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 11px;
	cursor: pointer;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.bpc-cc__botao--escuro {
	width: 100%;
	color: #fff;
	background: var(--hd-verde);
}

.bpc-cc__botao--escuro:hover {
	color: #fff;
	background: var(--hd-verde-escuro);
}

.bpc-cc__botao--curto {
	width: auto;
	padding: 10px 22px;
}

.bpc-cc__botao--claro {
	flex: 1;
	color: var(--cc-verde);
	background: var(--cc-verde-claro);
	border: 1.5px solid var(--cc-verde-borda);
}

.bpc-cc__botao--claro:hover {
	color: var(--cc-verde-claro);
	background: var(--cc-verde);
	border-color: var(--cc-verde);
}

.bpc-cc__botao--terracota {
	flex: 1.3;
	color: #fff;
	background: var(--cc-terracota);
}

.bpc-cc__botao--terracota:hover {
	color: #fff;
	background: var(--cc-terracota-hover);
}

.bpc-cc__criar {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--cc-sec);
	text-align: center;
}

.bpc-cc__criar a {
	font-weight: 700;
	color: var(--cc-verde);
}

.bpc-cc__nota {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	margin: 12px 0 0;
	padding: 10px 12px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--cc-sec2);
	background: var(--cc-neutro);
	border-radius: 10px;
}

.bpc-cc__nota .bpc-svg {
	flex: none;
	margin-top: 1px;
	color: var(--cc-ter);
}

/* ── Atalhos ──────────────────────────────── */

.bpc-cc__atalhos {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 2px;
	padding: 10px;
	border-bottom: 1px solid var(--cc-divisoria);
}

.bpc-cc__atalho {
	display: flex;
	gap: 11px;
	align-items: center;
	min-height: 44px;
	padding: 9px 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cc-menu);
	text-decoration: none;
	border-radius: 10px;
	transition: background .15s ease;
}

.bpc-cc__atalho:hover {
	color: var(--cc-menu);
	background: var(--cc-neutro);
}

.bpc-cc__atalho .bpc-svg {
	flex: none;
	color: var(--cc-verde);
}

.bpc-cc__atalho-rotulo { flex: 1 1 auto; }

.bpc-cc__pilula {
	flex: none;
	padding: 3px 9px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--cc-areia-tinta);
	background: var(--cc-areia);
	border-radius: 999px;
}

/* ── Cesta ────────────────────────────────── */

/*
 * A cesta é a ÚNICA parte que rola.
 *
 * `flex:1 1 auto; min-height:0` no bloco e `overflow-y:auto` na lista. Sem o
 * min-height:0 um filho flex se recusa a encolher abaixo do conteúdo, o painel
 * cresce e o bottom sheet do mobile corta justamente o rodapé com os botões.
 */
.bpc-cc__cesta {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	padding: 14px 16px 0;
}

.bpc-cc__cesta-topo {
	display: flex;
	flex: none;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 11px;
}

.bpc-cc__rotulo {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--cc-ambar);
	text-transform: uppercase;
	letter-spacing: .14em;
}

.bpc-cc__contagem {
	font-size: 12.5px;
	color: var(--cc-ter);
}

.bpc-cc__itens {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 13px;
	min-height: 0;
	max-height: 252px;
	margin: 0;
	padding: 0 2px 14px 0;
	overflow-y: auto;
	list-style: none;
	scrollbar-width: thin;
}

.bpc-cc__item {
	display: flex;
	flex: none;
	gap: 11px;
	align-items: flex-start;
	transition: background .2s ease, opacity .15s ease;
}

.bpc-cc__item--ocupado {
	opacity: .55;
	pointer-events: none;
}

.bpc-cc__item--novo {
	background: var(--cc-verde-claro);
	border-radius: 4px;
	box-shadow: 0 0 0 6px var(--cc-verde-claro);
}

.bpc-cc__item-foto {
	flex: none;
	width: 52px;
	height: 52px;
	overflow: hidden;
	border-radius: 11px;
}

.bpc-cc__item-foto img,
.bpc-cc__item-foto span {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--cc-neutro);
}

.bpc-cc__item-corpo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.bpc-cc__item-parceiro {
	font-size: 11px;
	font-weight: 600;
	color: var(--cc-ambar);
}

.bpc-cc__item-nome {
	font-family: var(--hd-serif);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
}

.bpc-cc__item-nome a {
	color: var(--cc-tinta);
	text-decoration: none;
}

.bpc-cc__item-nome a:hover { text-decoration: underline; }

.bpc-cc__item-detalhes {
	font-size: 12px;
	color: var(--cc-ter);
}

.bpc-cc__item-acoes {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-top: 4px;
}

.bpc-cc__stepper {
	display: flex;
	align-items: center;
	border: 1.5px solid var(--cc-campo);
	border-radius: 999px;
}

.bpc-cc-wrap .bpc-cc__passo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	color: var(--cc-sec);
	background: none;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.bpc-cc-wrap .bpc-cc__passo:hover:not(:disabled) { background: var(--cc-neutro); }
.bpc-cc-wrap .bpc-cc__passo:disabled { opacity: .35; cursor: default; }

.bpc-cc__qtd {
	min-width: 22px;
	font-size: 13px;
	font-weight: 700;
	color: var(--cc-tinta);
	text-align: center;
}

.bpc-cc-wrap .bpc-cc__remover {
	padding: 0;
	font-family: inherit;
	font-size: 12px;
	color: var(--cc-ter2);
	background: none;
	border: 0;
	cursor: pointer;
}

.bpc-cc-wrap .bpc-cc__remover:hover {
	color: var(--cc-terracota-hover);
	text-decoration: underline;
}

.bpc-cc__item-total {
	flex: none;
	font-family: var(--hd-serif);
	font-size: 14.5px;
	font-weight: 700;
	color: var(--hd-verde);
}

/* ── Rodapé fixo do painel ────────────────── */

.bpc-cc__pe {
	flex: none;
	padding: 0 16px 14px;
	border-top: 1px solid var(--cc-divisoria);
}

.bpc-cc__frete {
	margin-top: 13px;
	padding: 11px 13px;
	background: var(--cc-neutro);
	border-radius: 11px;
}

.bpc-cc__frete-linha {
	display: flex;
	gap: 10px;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 12.5px;
	color: var(--cc-sec2);
}

.bpc-cc__frete-linha strong {
	flex: none;
	font-weight: 700;
	color: var(--hd-verde);
}

.bpc-cc__barra {
	height: 5px;
	overflow: hidden;
	background: var(--cc-borda);
	border-radius: 999px;
}

.bpc-cc__barra span {
	display: block;
	height: 100%;
	background: var(--cc-verde);
	border-radius: 999px;
	transition: width .25s ease;
}

.bpc-cc__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-top: 13px;
	padding-bottom: 12px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--cc-sec);
	border-bottom: 1px solid var(--cc-divisoria);
}

.bpc-cc__subtotal strong {
	font-family: var(--hd-serif);
	font-size: 23px;
	font-weight: 700;
	color: var(--hd-verde);
}

.bpc-cc__acoes {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

/* ── Vazia ────────────────────────────────── */

.bpc-cc__vazia {
	display: flex;
	flex-direction: column;
	gap: 7px;
	align-items: center;
	padding: 10px 6px 18px;
	text-align: center;
}

.bpc-cc__vazia-selo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin-bottom: 4px;
	color: var(--cc-ter);
	background: var(--cc-neutro);
	border-radius: 14px;
}

.bpc-cc__vazia strong {
	font-family: var(--hd-serif);
	font-size: 17px;
	font-weight: 700;
	color: var(--cc-tinta);
}

.bpc-cc__vazia p {
	max-width: 34ch;
	margin: 0 0 6px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--cc-sec2);
}

/* ── Desfazer ─────────────────────────────── */

.bpc-cc__desfazer {
	display: flex;
	flex: none;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	padding: 11px 16px;
	font-size: 13px;
	color: var(--hd-placa);
	background: var(--hd-verde);
}

.bpc-cc-wrap .bpc-cc__desfazer button {
	padding: 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--cc-pessego);
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}

/* ─────────────────────────────────────────────
 *  5 · FAIXA DE CESTA DO MOBILE
 * ───────────────────────────────────────────── */

.bpc-cc-faixa { display: none; }
.bpc-cc-faixa[hidden] { display: none; }

.bpc-hd .bpc-cc-faixa__botao {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 8px max(14px, calc((100% - var(--hd-largura)) / 2));
	font-family: var(--hd-sans);
	color: var(--hd-util-txt);
	background: var(--hd-util);
	border: 0;
	cursor: pointer;
}

.bpc-cc-faixa__texto { font-size: 12.5px; }

.bpc-cc-faixa__valor {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	font-family: var(--hd-serif);
	font-size: 14px;
	font-weight: 700;
	color: var(--cc-pessego);
}

/* ─────────────────────────────────────────────
 *  6 · DRAWER DO MOBILE
 * ───────────────────────────────────────────── */

.bpc-hd__overlay {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(18, 58, 32, .55);
}

.bpc-hd__overlay[hidden],
.bpc-hd__drawer[hidden] { display: none; }

.bpc-hd__drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 91;
	display: flex;
	flex-direction: column;
	width: 83%;
	max-width: 380px;
	font-family: var(--hd-sans);
	background: #fff;
}

.bpc-hd__drawer-topo {
	flex: none;
	padding: 18px 18px 16px;
	background: var(--hd-verde);
}

.bpc-hd__drawer-eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: var(--cc-pessego);
	text-transform: uppercase;
	letter-spacing: .16em;
}

.bpc-hd__drawer-titulo {
	display: block;
	margin-top: 3px;
	font-family: var(--hd-serif);
	font-size: 19px;
	font-weight: 700;
	color: #fff;
}

/*
 * A lista é a área de rolagem; o rodapé nunca encolhe. Sem `min-height:0` o
 * navegador manteria a lista inteira e empurraria os CTAs para fora da tela.
 */
.bpc-hd__drawer-lista {
	flex: 0 1 auto;
	min-height: 0;
	padding: 10px;
	overflow-y: auto;
}

.bpc-hd__drawer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpc-hd__drawer-menu > li > a {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	padding: 13px 12px;
	font-family: var(--hd-serif);
	font-size: 17px;
	font-weight: 600;
	color: var(--cc-tinta);
	text-decoration: none;
	border-radius: 11px;
}

.bpc-hd__drawer-menu > li.current-menu-item > a,
.bpc-hd__drawer-menu > li.current_page_item > a {
	color: var(--hd-verde);
	background: var(--cc-verde-claro);
}

.bpc-hd__drawer-seta { color: #c0863a; }

.bpc-hd__drawer-pe {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 9px;
	padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--cc-divisoria);
}

/*
 * Sem o prefixo `.bpc-hd`: o drawer está fora do header. A qualificação por
 * elemento cobre o `button { display:inline-block }` e a borda que o tema
 * desenha por padrão — era ela que aparecia rosa em volta do "Cesta e minha
 * conta".
 */
.bpc-hd__drawer a.bpc-hd__drawer-cta,
.bpc-hd__drawer button.bpc-hd__drawer-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 12px;
	font-family: var(--hd-sans);
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 11px;
	cursor: pointer;
}

.bpc-hd__drawer .bpc-hd__drawer-cta--terracota { color: #fff; background: var(--cc-terracota); }
.bpc-hd__drawer .bpc-hd__drawer-cta--clara     { color: var(--cc-verde); background: var(--cc-verde-claro); }

.bpc-hd__drawer-contato {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--cc-ter);
}

.bpc-hd__drawer-contato a { color: inherit; }

/* ─────────────────────────────────────────────
 *  7 · MOBILE
 * ───────────────────────────────────────────── */

@media (max-width: 719px) {
	.bpc-hd__util {
		gap: 4px 10px;
		padding: 7px 16px;
		font-size: 11.5px;
	}

	/* Só clima e plantão cabem; o resto sai. */
	.bpc-hd__data,
	.bpc-hd__whats,
	.bpc-hd__util-link--emergencias,
	.bpc-hd__util .bpc-hd__sep {
		display: none;
	}

	.bpc-hd__util-lado--fim .bpc-hd__util-link--plantao { display: inline-flex; }

	/* Uma linha só: hamburger · logo · busca · cesta. */
	.bpc-hd__barra {
		flex-wrap: nowrap;
		gap: 9px;
		min-height: 0;
		padding: 10px 12px;
	}

	.bpc-hd button.bpc-hd__hamburger { display: flex; }

	.bpc-hd__nav,
	.bpc-hd .bpc-hd__anuncie {
		display: none;
	}

	.bpc-hd__logo {
		flex: 1 1 auto;
		justify-content: center;
		min-width: 0;
		padding: 4px 8px;
	}

	.bpc-hd .bpc-hd__logo .bpc-hd__logo-img { height: 42px; max-width: 170px; }

	.bpc-hd__acoes {
		flex: none;
		gap: 9px;
		margin-left: 0;
	}

	/*
	 * A cesta vira placa clara de 44px, igual à busca.
	 * O `background` explícito existe porque o tema pinta botão por conta
	 * dele — foi assim que o controle apareceu rosa no celular.
	 */
	.bpc-hd .bpc-cc__btn,
	.bpc-cc-wrap .bpc-cc__btn {
		width: 44px;
		padding: 0;
		justify-content: center;
		background: var(--hd-placa);
	}

	.bpc-cc__labels,
	.bpc-cc__chevron {
		display: none;
	}

	.bpc-cc__count {
		border-color: var(--hd-placa);
	}

	.bpc-cc-faixa { display: block; }
	.bpc-cc-faixa[hidden] { display: none; }

	/* Painel vira bottom sheet. */
	.bpc-cc__panel {
		position: fixed;
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 95;
		width: 100%;
		max-width: none;
		/* max-height + min-height:0 é o que faz só a lista rolar. */
		max-height: 88vh;
		min-height: 0;
		padding-bottom: env(safe-area-inset-bottom);
		border-radius: 20px 20px 0 0;
		border-bottom: 0;
	}

	.bpc-cc__seta { display: none; }

	.bpc-cc__alca {
		display: block;
		flex: none;
		width: 42px;
		height: 4px;
		margin: 9px auto 3px;
		background: var(--cc-campo);
		border-radius: 999px;
	}

	.bpc-cc__itens { max-height: none; }
}

/* ─────────────────────────────────────────────
 *  8 · MENOS MOVIMENTO
 * ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.bpc-hd *,
	.bpc-cc-wrap * {
		transition: none !important;
	}

	.bpc-cc__count--pop { animation: none; }
}