/**
 * Bloco de variações agrupadas no carrinho lateral.
 *
 * O cabeçalho é um <button> por acessibilidade (foco, teclado, aria-expanded),
 * e é justamente por isso que ele precisa de um reset duro: o tema aplica o
 * estilo de botão dele em qualquer <button> da página — caixa alta, centralizado,
 * fonte grande, fundo, borda. Sem anular isso, o cabeçalho sai parecendo um CTA
 * no meio da lista de itens.
 *
 * O alvo é parecer uma LINHA DO CARRINHO, não um botão: mesma fonte, mesma
 * escala de texto e mesmo alinhamento das linhas de produto.
 */

.uc-side-cart .ucg-grupo {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(17, 24, 39, .07) !important;
}

/* Miniatura igual à das linhas de produto: mesmo tamanho, mesmo raio, mesmo
   recorte. É o que faz o cabeçalho alinhar com os itens em vez de flutuar. */
.uc-side-cart .ucg-foto {
	width: 72px !important;
	height: 72px !important;
	flex: 0 0 72px !important;
	border-radius: 8px !important;
	object-fit: cover !important;
	border: 0 !important;
	background: var(--uc-bg-subtle, #f4f5f6) !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
}

/* ── Reset: desfaz o botão do tema ── */
.uc-side-cart .ucg-cabecalho {
	all: unset;                       /* zera herança do tema de uma vez */
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	width: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 16px 20px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-family: var(--uc-font, 'Inter', -apple-system, sans-serif) !important;
	color: var(--uc-text, #111827) !important;
	transition: background .15s ease !important;
}
.uc-side-cart .ucg-cabecalho:hover { background: rgba(17, 24, 39, .025) !important; }
.uc-side-cart .ucg-cabecalho:focus-visible {
	outline: 2px solid rgba(17, 24, 39, .35) !important;
	outline-offset: -2px !important;
}

.uc-side-cart .ucg-meio {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	text-align: left !important;
}

/* Mesma escala de .uc-item-name, um passo de peso acima para marcar que é
   cabeçalho de bloco — sem virar outro tamanho de fonte na tela. */
.uc-side-cart .ucg-nome {
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	letter-spacing: -.01em !important;
	text-transform: none !important;
	text-align: left !important;
	color: var(--uc-text, #111827) !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* A linha de resumo agora carrega três coisas, e a hierarquia entre elas é o
   que faz o cliente perceber a quantidade: selo escuro, preço em segundo
   plano, e a palavra "ver" indicando que há algo a abrir. */
.uc-side-cart .ucg-resumo {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
	text-align: left !important;
	margin-top: 2px !important;
}

/* Selo da quantidade: fundo escuro, texto branco. Em cinza-claro passava
   despercebido — era exatamente o problema. Continua fora do verde, então não
   disputa com o botão de finalizar. */
.uc-side-cart .ucg-qtd {
	display: inline-flex !important;
	align-items: center !important;
	padding: 3px 9px !important;
	border-radius: 100px !important;
	background: #1f2937 !important;
	color: #fff !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	font-variant-numeric: tabular-nums;
	white-space: nowrap !important;
}

.uc-side-cart .ucg-preco {
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: #374151 !important;
	letter-spacing: -.01em !important;
	font-variant-numeric: tabular-nums;
	white-space: nowrap !important;
}

/* "ver" dá nome ao gesto: sozinha, a seta não diz que existe conteúdo. */
.uc-side-cart .ucg-acao {
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #6b7280 !important;
	text-transform: uppercase !important;
	letter-spacing: .06em !important;
	white-space: nowrap !important;
}

/* A seta ganha corpo de botão: círculo com borda. Solta no canto, em cinza
   claro, ela não parecia clicável — e o bloco inteiro passava por uma linha
   qualquer. */
.uc-side-cart .ucg-seta {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	border-radius: 100px !important;
	border: 1px solid rgba(17, 24, 39, .15) !important;
	background: #fff !important;
	color: #374151 !important;
	transition: transform .18s ease, background .15s ease, border-color .15s ease !important;
}
.uc-side-cart .ucg-cabecalho:hover .ucg-seta {
	background: #1f2937 !important;
	border-color: #1f2937 !important;
	color: #fff !important;
}
.uc-side-cart .ucg-seta svg { width: 15px !important; height: 15px !important; }
.uc-side-cart .ucg-aberto > .ucg-cabecalho .ucg-seta { transform: rotate(90deg) !important; }

/* Linhas de dentro: recuo e um fio à esquerda deixam claro que pertencem ao
   bloco acima, sem precisar de caixa, sombra ou fundo. */
.uc-side-cart .ucg-itens {
	list-style: none !important;
	margin: 0 0 4px 20px !important;
	padding: 0 0 0 10px !important;
	border-left: 2px solid rgba(17, 24, 39, .07) !important;
	background: transparent !important;
}
.uc-side-cart .ucg-itens .uc-cart-item {
	padding-left: 10px !important;
	padding-right: 20px !important;
}

@media (prefers-reduced-motion: reduce) {
	.uc-side-cart .ucg-seta,
	.uc-side-cart .ucg-cabecalho { transition: none !important; }
}