/* =========================================================================
   Janela ao adicionar ao carrinho
   Base: folha que sobe da parte de baixo no celular. A partir de 640px,
   cartão no centro da tela. Fundo, cartão e botão fechar são os do popup
   do tema (.vh-popup-overlay, .vh-popup-card, .vh-fechar-popup).
   ========================================================================= */

.vh-carrinho-janela {
	position: fixed;
	inset: 0;
	z-index: var(--vh-z-modal);
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--vh-cor-texto);
	overflow: hidden;
}

.vh-carrinho-janela[open] {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.vh-carrinho-janela::backdrop {
	background: transparent;
}

html.vh-carrinho-aberto {
	overflow: hidden;
}

.vh-carrinho-janela .vh-popup-overlay {
	animation: vh-carrinho-fundo-entra 0.22s ease both;
}

.vh-carrinho-janela__card {
	width: 100%;
	max-height: 88dvh;
	padding: var(--vh-espaco-3) var(--vh-espaco-5) 0;
	border-bottom: 0;
	border-radius: var(--vh-raio-2xl) var(--vh-raio-2xl) 0 0;
	animation: vh-carrinho-folha-entra 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* A alça indica que é uma folha. */
.vh-carrinho-janela__card::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 0.25rem;
	margin: 0 auto var(--vh-espaco-4);
	border-radius: var(--vh-raio-full);
	background: var(--vh-cor-borda-forte);
}

.vh-carrinho-janela.is-fechando .vh-popup-overlay {
	animation: vh-carrinho-fundo-sai 0.2s ease both;
}

.vh-carrinho-janela.is-fechando .vh-carrinho-janela__card {
	animation: vh-carrinho-folha-sai 0.2s ease-in both;
}

/* --- Topo ---------------------------------------------------------------- */

.vh-carrinho-janela__topo {
	display: flex;
	align-items: center;
	gap: var(--vh-espaco-3);
	padding-right: var(--vh-espaco-8);
	margin-bottom: var(--vh-espaco-4);
}

.vh-carrinho-janela__selo {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--vh-raio-full);
	background: var(--vh-cor-sucesso-fundo);
	color: var(--vh-cor-sucesso);
	animation: vh-carrinho-selo 0.42s 0.12s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}

.vh-carrinho-janela__topo--erro .vh-carrinho-janela__selo {
	background: var(--vh-cor-erro-fundo);
	color: var(--vh-cor-erro);
}

.vh-carrinho-janela__titulo {
	margin: 0;
	font-size: var(--vh-fonte-lg);
	font-weight: var(--vh-fonte-peso-bold);
	line-height: var(--vh-linha-apertada);
	color: var(--vh-cor-texto);
}

/* --- Itens --------------------------------------------------------------- */

.vh-carrinho-janela__itens {
	display: grid;
	gap: var(--vh-espaco-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vh-carrinho-janela__item {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: var(--vh-espaco-3);
	align-items: center;
	padding: var(--vh-espaco-3);
	border: 1px solid var(--vh-cor-borda);
	border-radius: var(--vh-raio-xl);
	background: var(--vh-cor-fundo);
}

.vh-carrinho-janela__foto {
	display: block;
	width: 4.5rem;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--vh-raio-lg);
	background: var(--vh-cor-superficie);
}

.vh-carrinho-janela__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vh-carrinho-janela__dados {
	display: flex;
	flex-direction: column;
	gap: var(--vh-espaco-1);
	min-width: 0;
}

.vh-carrinho-janela__nome {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--vh-fonte-sm);
	font-weight: var(--vh-fonte-peso-semi);
	line-height: var(--vh-linha-apertada);
	color: var(--vh-cor-texto);
}

.vh-carrinho-janela__detalhe {
	font-size: var(--vh-fonte-xs);
	color: var(--vh-cor-texto-suave);
}

.vh-carrinho-janela__linha {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--vh-espaco-2);
	font-size: var(--vh-fonte-sm);
}

.vh-carrinho-janela__qtd {
	color: var(--vh-cor-texto-suave);
}

.vh-carrinho-janela__preco {
	font-weight: var(--vh-fonte-peso-bold);
	color: var(--vh-cor-texto);
	white-space: nowrap;
}

/* --- Resumo -------------------------------------------------------------- */

.vh-carrinho-janela__resumo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--vh-espaco-3);
	margin: var(--vh-espaco-4) 0 0;
	padding-top: var(--vh-espaco-4);
	border-top: 1px solid var(--vh-cor-borda);
	font-size: var(--vh-fonte-sm);
	color: var(--vh-cor-texto-suave);
}

.vh-carrinho-janela__resumo strong {
	font-size: var(--vh-fonte-lg);
	font-weight: var(--vh-fonte-peso-extra);
	color: var(--vh-cor-texto);
}

/* --- Rodapé: subtotal e botões ficam à mão enquanto a fileira rola ---- */

.vh-carrinho-janela__rodape {
	position: sticky;
	bottom: 0;
	z-index: 1;
	margin: 0 calc(-1 * var(--vh-espaco-5));
	padding: 0 var(--vh-espaco-5) calc(var(--vh-espaco-5) + env(safe-area-inset-bottom, 0px));
	background: var(--vh-cor-superficie);
}

/* Com a fileira acima, o resumo encosta numa linha de largura total. */
.vh-carrinho-combina + .vh-carrinho-janela__rodape {
	box-shadow: 0 -1px 0 var(--vh-cor-borda);
}

.vh-carrinho-combina + .vh-carrinho-janela__rodape .vh-carrinho-janela__resumo {
	margin-top: 0;
	padding-top: var(--vh-espaco-3);
	border-top: 0;
}

/* A janela de erro não tem rodapé: o respiro fica nas ações. */
.vh-carrinho-janela__erros + .vh-carrinho-janela__acoes {
	padding-bottom: calc(var(--vh-espaco-5) + env(safe-area-inset-bottom, 0px));
}

/* --- Combina com --------------------------------------------------------- */

.vh-carrinho-combina {
	margin-top: var(--vh-espaco-5);
}

.vh-carrinho-combina__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vh-espaco-3);
	margin-bottom: var(--vh-espaco-3);
}

.vh-carrinho-combina__titulo {
	margin: 0;
	font-size: var(--vh-fonte-base);
	font-weight: var(--vh-fonte-peso-bold);
	color: var(--vh-cor-texto);
}

.vh-carrinho-combina__setas {
	display: flex;
	gap: var(--vh-espaco-2);
}

.vh-carrinho-combina__setas[hidden] {
	display: none;
}

.vh-carrinho-combina__seta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid var(--vh-cor-borda);
	border-radius: var(--vh-raio-full);
	background: var(--vh-cor-superficie);
	color: var(--vh-cor-texto);
	cursor: pointer;
	transition: var(--vh-transicao-rapida);
}

.vh-carrinho-combina__seta:hover:not(:disabled),
.vh-carrinho-combina__seta:focus-visible {
	border-color: var(--vh-cor-primaria);
	color: var(--vh-cor-primaria);
}

.vh-carrinho-combina__seta:disabled {
	opacity: 0.4;
	cursor: default;
}

/* A fileira encosta nas bordas da folha e espia o próximo card. */
.vh-carrinho-combina__lista {
	display: flex;
	gap: var(--vh-espaco-3);
	margin: 0 calc(-1 * var(--vh-espaco-5));
	padding: var(--vh-espaco-1) var(--vh-espaco-5) var(--vh-espaco-3);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--vh-espaco-5);
	scrollbar-width: none;
}

.vh-carrinho-combina__lista::-webkit-scrollbar {
	display: none;
}

.vh-carrinho-combina__card {
	flex: 0 0 clamp(7.5rem, 36vw, 8.5rem);
	scroll-snap-align: start;
}

.vh-carrinho-combina__card .vh-mega-card-imagem {
	aspect-ratio: 1;
}

.vh-carrinho-combina__card .vh-mega-card-corpo {
	gap: var(--vh-espaco-1);
	padding: var(--vh-espaco-2) var(--vh-espaco-3);
}

.vh-carrinho-combina__card .vh-mega-card-nome {
	font-size: var(--vh-fonte-xs);
}

.vh-carrinho-combina__link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.vh-carrinho-combina__link:hover,
.vh-carrinho-combina__link:focus-visible {
	color: inherit;
	text-decoration: none;
}

.vh-carrinho-combina__acao {
	margin-top: auto;
	padding: 0 var(--vh-espaco-2) var(--vh-espaco-2);
}

.vh-carrinho-combina__acao .vh-btn {
	width: 100%;
}

/* --- Erro ---------------------------------------------------------------- */

.vh-carrinho-janela__erros {
	display: grid;
	gap: var(--vh-espaco-2);
	margin: 0;
	padding: var(--vh-espaco-3) var(--vh-espaco-4);
	list-style: none;
	border-radius: var(--vh-raio-lg);
	background: var(--vh-cor-erro-fundo);
	font-size: var(--vh-fonte-sm);
	line-height: var(--vh-linha-normal);
	color: var(--vh-cor-texto);
}

/* --- Ações --------------------------------------------------------------- */

.vh-carrinho-janela__acoes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--vh-espaco-2);
	margin-top: var(--vh-espaco-4);
}

.vh-carrinho-janela__acoes .vh-btn-primary,
.vh-carrinho-janela__acoes .vh-btn:only-child {
	grid-column: 1 / -1;
}

.vh-carrinho-janela__acoes .vh-btn {
	width: 100%;
}

/* O botão do card e o da página do produto enquanto a janela carrega. */
.vh-carrinho-carregando {
	opacity: 0.7;
	cursor: progress;
	pointer-events: none;
}

/* --- Tablet e computador: cartão no centro ------------------------------- */

@media (min-width: 640px) {
	.vh-carrinho-janela[open] {
		align-items: center;
		padding: var(--vh-espaco-6);
	}

	.vh-carrinho-janela__card {
		width: min(27.5rem, 100%);
		max-height: min(92dvh, 52rem);
		padding: var(--vh-espaco-6) var(--vh-espaco-6) 0;
		border-bottom: 1px solid var(--vh-cor-borda);
		border-radius: var(--vh-raio-2xl);
		animation-name: vh-carrinho-cartao-entra;
		animation-duration: 0.28s;
	}

	.vh-carrinho-janela__card::before {
		display: none;
	}

	/* Com sugestões, a janela alarga para a fileira mostrar três cards. */
	.vh-carrinho-janela__card:has(.vh-carrinho-combina) {
		width: min(36rem, 100%);
	}

	.vh-carrinho-janela__rodape {
		margin-inline: calc(-1 * var(--vh-espaco-6));
		padding-inline: var(--vh-espaco-6);
	}

	.vh-carrinho-janela__rodape,
	.vh-carrinho-janela__erros + .vh-carrinho-janela__acoes {
		padding-bottom: var(--vh-espaco-6);
	}

	.vh-carrinho-combina__lista {
		margin: 0 calc(-1 * var(--vh-espaco-6));
		padding-inline: var(--vh-espaco-6);
		scroll-padding-inline: var(--vh-espaco-6);
	}

	.vh-carrinho-combina__card {
		flex-basis: 9rem;
	}

	.vh-carrinho-janela.is-fechando .vh-carrinho-janela__card {
		animation-name: vh-carrinho-cartao-sai;
	}

}

/* --- Movimento ----------------------------------------------------------- */

@keyframes vh-carrinho-fundo-entra {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes vh-carrinho-fundo-sai {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes vh-carrinho-folha-entra {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}

@keyframes vh-carrinho-folha-sai {
	from { transform: translateY(0); }
	to { transform: translateY(100%); }
}

@keyframes vh-carrinho-cartao-entra {
	from { opacity: 0; transform: translateY(12px) scale(0.97); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes vh-carrinho-cartao-sai {
	from { opacity: 1; transform: translateY(0) scale(1); }
	to { opacity: 0; transform: translateY(8px) scale(0.98); }
}

@keyframes vh-carrinho-selo {
	from { opacity: 0; transform: scale(0.4); }
	to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.vh-carrinho-janela .vh-popup-overlay,
	.vh-carrinho-janela__card,
	.vh-carrinho-janela__selo {
		animation: none;
	}
}