/* ---------------------------------------------------------------------------
   Gaveta do carrinho — Modern Cart for WooCommerce

   As cores vêm das custom properties do plugin (--moderncart-*), ajustadas nas
   opções dele para a paleta da marca; nada disso é repetido aqui. Este arquivo
   cobre o que as opções não alcançam:

     - o magenta que o Hello Elementor injeta em todo botão;
     - superfícies com cor fixa dentro do CSS do plugin;
     - o tamanho dos preços na vitrine de sugestões;
     - a altura da gaveta no celular.

   As regras de layout vieram do CSS do Customizer antigo (legado.css), que
   pintava o botão de finalizar e o marcador ativo do carrossel de #ffb89d com
   !important — era esse salmão que vencia as opções do plugin. Saiu tudo de lá
   e voltou aqui sem as cores e sem os !important desnecessários.
   --------------------------------------------------------------------------- */

#moderncart-slide-out-modal {

	/* ---- carrossel de sugestões ----
	   O tema pai pinta todo botão de #c36 no repouso; as setas herdavam esse
	   magenta no traço, e os marcadores inativos, no fundo. */
	& .splide__arrow {
		background-color: var(--fb-surface);
		border: 0.0625rem solid var(--fb-seam);
		color: var(--fb-ink);
		opacity: 1;

		& svg {
			fill: currentcolor;
			inline-size: 0.875rem;
			block-size: 0.875rem;
		}

		&:is(:hover, :focus-visible) {
			background-color: var(--fb-ground);
			border-color: var(--fb-seam-strong);
			color: var(--fb-ink);
		}

		&:disabled { opacity: 0.35; }
	}

	& .splide__pagination {
		inset-block-end: -5%;

		& .splide__pagination__page {
			background-color: var(--fb-seam-strong);
			border-color: transparent;
			color: inherit;

			&.is-active { background-color: var(--fb-terracota); }
		}
	}

	/* A barra de progresso do frete é um <span> de 3px que para no meio da
	   largura. Sem trilho atrás ela lia como falha de renderização, não como
	   progresso. */
	& .moderncart-progress-bar {
		background-color: var(--fb-seam);
		border-radius: var(--fb-radius-pill);
		overflow: hidden;
	}

	& .moderncart-free-shipping-progress-bar {
		border-radius: var(--fb-radius-pill);
	}

	/* ---- superfícies com cor fixa no plugin ----
	   Eram azul (#f0f9ff) e cinza-azulado (#f9fafb), de outra paleta. */
	& :is(.moderncart-notification, .moderncart-slide-header) {
		background-color: var(--fb-ground);
		border-color: var(--fb-seam);
		color: var(--fb-ink-2);
	}

	/* ---- vitrine: proporção da foto ----
	   O plugin impõe aspect-ratio: 1/1 (cart.css:1629). As fotos da loja são
	   4:5 — medido 0,806 em toda a amostra — então o quadro quadrado com
	   object-fit: cover comia cerca de 40% da altura da peça, que é justamente
	   o que o cliente precisa ver. O quadro passa a acompanhar a foto. */
	& .moderncart-cart-item-recommended-image img {
		aspect-ratio: 4 / 5;
		object-fit: cover;
		object-position: 50% 15%;
		border-radius: 0.125rem;
		background-color: var(--fb-ground);
	}

	/* ---- vitrine: preços ----
	   A coluna mede 8,5rem. O plugin de parcelamento imprime o preço a 25px,
	   que ocupa 8,875rem: os valores de slides vizinhos se atropelavam. */
	& .splide__slide {
		/* 14px, um degrau abaixo dos 15px do preço do item que já está no
		   carrinho: sugestão não pode pesar mais que a compra em andamento. */
		& .woo-custom-installments-group-main-price {
			font-size: 0.875rem;
			line-height: 1.3;

			& .woocommerce-Price-amount {
				font-size: inherit;
				white-space: nowrap;
			}
		}

		& .woo-custom-installments-price { font-size: inherit; }

		& .woo-custom-installments-details {
			font-size: 0.6875rem;
			line-height: 1.3;
			color: var(--fb-ink-2);
			text-wrap: pretty;

			& .woocommerce-Price-amount { font-size: inherit; }
		}

		/* o plugin imprime dois <p> vazios entre o preço e o botão */
		& p:empty { display: none; }

		/* O plugin pede -webkit-line-clamp:3 no nome do produto, mas mantém
		   white-space:nowrap e display:block — o clamp nunca age e o nome era
		   cortado na primeira linha (“Scrub Feminin…”). Com caixa vertical e
		   quebra normal ele faz o que o plugin queria: até três linhas. */
		& .moderncart-cart-item-product-link a {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			white-space: normal;
			text-wrap: pretty;
		}
	}
}

/* ===========================================================================
   Layout da lista

   O layout antigo centralizava nome, preço e “Remover” em cada linha. Numa
   lista isso custa caro: com o texto centralizado cada nome começa numa
   coluna diferente e o olho não desce em linha reta. Aqui vai tudo alinhado
   à esquerda, com a quantidade ancorada à direita.
   =========================================================================== */

/* A coluna só funciona se o miolo puder rolar. Sem isto o conteúdo transborda
   e o rodapé cobre a vitrine de sugestões: medido com 3 itens, 782px de
   conteúdo num contêiner de 648px, 134px inacessíveis atrás do rodapé. */
.moderncart-panel {
	min-block-size: 0;

	& :is(.moderncart-slide-out-header, .moderncart-slide-out-footer) {
		flex: none;
	}

	& .moderncart-slide-out-cart {
		flex: 1 1 auto;
		min-block-size: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* ===========================================================================
   Carrinho vazio
   =========================================================================== */

/* O painel usa justify-content: space-between. Com o carrinho vazio o conteúdo
   é mais curto que a gaveta, então a sobra virava 62px de vão morto entre o
   cabeçalho e o título — lia como falha, não como respiro. Aqui a faixa das
   sugestões passa a ser quem absorve a sobra. */
.moderncart-panel:has(.moderncart-slide-out-empty-cart-recommendations) {
	justify-content: flex-start;

	& .moderncart-slide-out-empty-cart-recommendations {
		display: grid;
		/* “safe” garante que, se o conteúdo crescer além da faixa, ele encoste
		   no topo e role — em vez de ser cortado nas duas pontas. */
		align-content: safe center;
		flex: 1 1 auto;
		min-block-size: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-block: var(--fb-space-md);

		/* Item de grade nasce com min-width: auto, ou seja, não encolhe abaixo
		   do próprio conteúdo mínimo. Aqui esse mínimo era a imagem de 250px
		   herdada do layout antigo, e o carrossel estourava 33px para fora da
		   gaveta no celular, levando a seta da direita para fora da tela. */
		& > * {
			min-inline-size: 0;
		}
	}

	/* “Total R$ 0,00” não diz nada sobre um carrinho vazio */
	& .moderncart-cart-line-items {
		display: none;
	}
}

/* Controles do carrossel.

   O splide posiciona as setas de forma absoluta, com top em pixel fracionado
   (205,109px) mais um translateY, e o plugin as deixa em 34x32 — retângulo
   passando por círculo. Ficavam por cima da peça, tortas, e cada uma dependia
   de um cálculo do JS.

   Aqui a coisa vira layout: o .splide é uma grade de três colunas; o card
   ocupa a primeira linha inteira e a segunda linha recebe seta, paginação e
   seta, alinhadas pelo centro da própria linha. Nenhum deslocamento negativo,
   nenhum número mágico, e a foto fica livre. */
:is(
	.moderncart-slide-out-empty-cart-recommendations,
	.moderncart-slide-out-recommendations
) .splide {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: var(--fb-space-xs);
	row-gap: var(--fb-space-sm);

	/* No celular o carrossel ocupa a gaveta inteira, então as setas encostavam
	   nas bordas — medido 0px de um lado e 1px do outro — e os próprios slides
	   iam de ponta a ponta. A folga entra no .splide, que é o elemento que
	   contém pista e controles: assim vale para os dois carrosséis e para
	   qualquer largura, sem depender do recuo que cada contêiner traz. */
	/* border-box porque no carrinho vazio o .splide tem largura declarada: sem
	   isto o recuo somava à largura e a seta da direita saía 11px para fora
	   da gaveta, trocando um problema pelo outro. */
	box-sizing: border-box;
	padding-inline: var(--fb-space-xs);

	& .splide__track {
		grid-area: 1 / 1 / 2 / 4;
		inline-size: 100%;
	}

	/* o invólucro das setas some da caixa para que elas entrem direto na grade */
	& .splide__arrows {
		display: contents;
	}

	/* O botão vinha com display:block e padding 8px 16px. Num quadrado de
	   2,25rem isso deixa 4px de caixa de conteúdo para um glifo de 21px: ele
	   transbordava e encostava na borda direita — 14px de folga à esquerda
	   contra 2px à direita. Zerar o padding e centralizar por grid resolve na
	   origem, sem compensar com margem. */
	& .splide__arrow {
		position: static;
		/* O splide grava display:block no atributo style pelo JS. Declaração
		   inline só cede a !important — não há seletor que a alcance. É o
		   caso legítimo do sinalizador: sem ele o glifo fica preso ao fluxo
		   de linha e desce do centro. */
		display: grid !important;
		place-items: center;
		box-sizing: border-box;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		padding: 0;
		translate: none;
		transform: none;
		inset: auto;

		& svg {
			inline-size: 1rem;
			block-size: 1rem;
		}
	}

	& .splide__arrow--prev { grid-area: 2 / 1; }
	& .splide__arrow--next { grid-area: 2 / 3; }

	& .splide__pagination {
		position: static;
		grid-area: 2 / 2;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--fb-space-3xs);
		margin: 0;
		padding: 0;
		inset: auto;

		/* Sem isto a coluna do meio herda min-width: auto e exige a soma dos
		   cinco marcadores (186px) onde a gaveta estreita só oferece 152 — a
		   grade estourava e empurrava a seta da direita para fora da tela. */
		min-inline-size: 0;

		& li { min-inline-size: 0; }

		& li {
			display: flex;
			margin: 0;
			padding: 0;
		}

		/* O plugin define os marcadores como traços de 20x2 com min-height
		   !important (cart.css:1637). É escolha coerente e já saem na paleta
		   certa — o que atrapalhava era a margem de 5px somada ao gap, que
		   estourava a coluna (211px em 194px) e jogava o quinto traço para
		   uma segunda linha. */
		flex-wrap: nowrap;
	}
}

/* No carrinho vazio o card é uma peça só, centralizada — o nome acompanha.
   A 18px os nomes mais longos do catálogo (63 caracteres) quebravam em três
   linhas e desalinhavam o preço; a 13px cabem em duas.

   Escopado no ID porque o plugin define margem e medidas dos marcadores em
   #moderncart-slide-out-modal .splide__pagination__page. */
#moderncart-slide-out-modal :is(
	.moderncart-slide-out-empty-cart-recommendations,
	.moderncart-slide-out-recommendations
) {
	& .splide__pagination__page {
		margin: 0;
		flex: 0 1 auto;
		min-inline-size: 0;
		padding-inline: 0.1875rem;
	}

	& .moderncart-cart-item-product-link {
		text-align: center;

		& a {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			font-size: 0.8125rem;
			line-height: 1.4;
			text-wrap: balance;
		}
	}

	& :is(.moderncart-cart-item-actions--pricing, .woo-custom-installments-group) {
		text-align: center;
	}
}

.moderncart-cart-item {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	gap: var(--fb-space-sm);

	& .moderncart-cart-item-container {
		display: grid;
		grid-template-columns: 4rem 1fr;
		align-items: start;
		gap: var(--fb-space-sm);
	}

	& .moderncart-cart-item-image {
		grid-row: 1 / -1;

		& img {
			display: block;
			inline-size: 4rem;
			block-size: 4rem;
			object-fit: cover;
			border-radius: 0.125rem;
			background-color: var(--fb-ground);
		}
	}

	/* Nome e “Ver detalhes” ocupam a linha inteira; preço e remover dividem a
	   última, então o ícone fica na base do preço em vez de pendurado embaixo. */
	& .moderncart-cart-item-product {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		row-gap: 0.25rem;
		column-gap: var(--fb-space-xs);
		min-inline-size: 0;
	}

	& :is(.moderncart-cart-item__details, .moderncart-collapse-btn-link) {
		grid-column: 1 / -1;
		min-inline-size: 0;
	}

	& .moderncart-cart-item-actions--pricing { grid-column: 1; }

	/* Ancorado ao preço, não à borda da coluna: à direita ele ficava solto no
	   vão entre o valor e o seletor de quantidade, sem pertencer a nenhum dos
	   dois. Colado ao preço, lê-se como a ação daquele item. */
	& .moderncart-cart-item-actions-remove {
		grid-column: 2;
		justify-self: start;
	}

	/* O seletor de quantidade acompanha o centro da linha, não o topo. */
	& .moderncart-cart-item-actions {
		align-self: center;
	}
}

/* nome: calmo e legível, no máximo duas linhas */
.moderncart-cart-item-product-link {
	text-align: start;
	text-wrap: pretty;

	& a {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: var(--fb-text-sm);
		font-weight: 500;
		line-height: 1.35;
		color: var(--fb-ink);
		text-decoration: none;

		&:hover { text-decoration: underline; }
	}
}

/* “Ver detalhes”: informação de apoio, não um segundo título */
.moderncart-cart-item-product .moderncart-collapse-btn-link {
	justify-self: start;
	font-size: var(--fb-text-xs);
	color: var(--fb-ink-3);
	text-align: start;
	text-decoration: none;

	&:hover { color: var(--fb-ink-2); text-decoration: underline; }
}

/* Preço: o dado mais firme da linha.

   O invólucro media 29px para um valor de 24px — 5px de sobra embaixo. Como a
   lixeira se alinha pelo centro da linha da grade, ela centralizava no
   invólucro e ficava alguns pixels acima do valor visível. Zerando a sobra, os
   dois passam a compartilhar a mesma caixa. */
.moderncart-cart-item-actions--pricing {
	display: flex;
	align-items: center;
	inline-size: auto;
	margin: 0;
	padding: 0;

	& .moderncart-price {
		display: block;
		inline-size: auto;
		margin: 0;
		padding: 0;
		text-align: start;
		line-height: 1.4;
	}
}

/* O valor fica num .woocommerce-Price-amount que traz cor e tamanho próprios;
   herdar do pai não bastava — saía em --fb-ink-2, 14px, mais apagado que o
   “Remover” ao lado. */
#moderncart-slide-out-modal .moderncart-price .woocommerce-Price-amount {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--fb-ink);
}

/* Remover vira ícone.

   O texto “Remover” competia com o preço e alongava a linha. O rótulo
   acessível não se perde: o botão já traz aria-label="Remover item do
   carrinho", então o texto visível é decoração e pode sair com font-size: 0.

   A lixeira entra por mask e não por background, assim ela herda currentcolor
   e acompanha os estados do botão sem uma segunda cópia do arquivo. */
#moderncart-slide-out-modal .moderncart-cart-item-actions-remove {
	display: grid;
	place-items: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: var(--fb-radius-pill);
	background: none;
	font-size: 0;
	color: var(--fb-ink-3);
	cursor: pointer;
	transition: color 0.2s, background-color 0.2s;

	&::before {
		content: "";
		inline-size: 1rem;
		block-size: 1rem;
		background-color: currentcolor;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-12M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	&:is(:hover, :focus-visible) {
		background-color: var(--fb-ground);
		color: var(--fb-espresso);
	}
}

/* Quantidade em linha, como em qualquer carrinho.

   O estilo 1 do plugin empilha o controle num grid vertical (cart.css:1533),
   com seletor #id.classe .classe — especificidade (1,2,0), acima de qualquer
   coisa que eu escrevesse com um ID só. O [class*=] iguala essa especificidade
   sem prender a regra a um número de estilo, e a nossa folha carrega depois.
   O mesmo bloco ainda empurra o controle 20px para baixo (linha 1603), o que
   não faz sentido com a linha alinhada pelo topo. */
#moderncart-slide-out-modal[class*="moderncart-cart-theme-style"] {

	& .moderncart-cart-item-quantity-selector {
		margin-block-start: 0;
	}

	& .moderncart-cart-item-quantity {
		display: inline-flex;
		align-items: center;
		border: 0.0625rem solid var(--fb-seam);
		border-radius: var(--fb-radius-pill);
		overflow: hidden;
	}

	/* O plugin imprime o incremento antes do decremento, então o controle
	   saía “+ 1 −”. A convenção em qualquer carrinho é “− 1 +”. Só a ordem
	   visual muda: os dois botões têm aria-label próprio, então quem navega
	   por teclado continua sabendo o que cada um faz. */
	& .quantity__button--down   { order: 1; }
	& .moderncart-quantity__input { order: 2; }
	& .quantity__button--up     { order: 3; }

	/* saíam 30x28: o plugin define largura e altura separadas. Quadrado, o
	   alvo de toque fica previsível e o traço cai em pixel inteiro. */
	& :is(.quantity__button--down, .quantity__button--up) {
		display: grid;
		place-items: center;
		box-sizing: border-box;
		inline-size: 2rem;
		block-size: 2rem;
		padding: 0;
		border: none;
		border-radius: 0;
		background: none;
		color: var(--fb-ink-2);
		cursor: pointer;

		& svg path { stroke: currentcolor; }

		&:is(:hover, :focus-visible) {
			background-color: var(--fb-ground);
			color: var(--fb-ink);
		}
	}

	/* O plugin dá ao campo uma borda de 1px e trava min/max em 30x35px
	   (cart.css:505, especificidade 1,2,1). Era essa borda que aparecia como
	   um retângulo claro dentro do chip, e o descasamento de altura contra os
	   botões de 32px que deixava a caixa torta. Aqui o seletor repete a forma
	   do plugin e acrescenta um nível, então vence sem !important. */
	& .moderncart-cart-item-quantity input[type="number"] {
		box-sizing: border-box;
		inline-size: 2rem;
		min-inline-size: 2rem;
		max-inline-size: 2rem;
		block-size: 2rem;
		min-block-size: 2rem;
		max-block-size: 2rem;
		padding: 0;
		border: none;
		background: none;
		font-size: var(--fb-text-xs);
		font-weight: 600;
		line-height: 2rem;
		color: var(--fb-ink);
		text-align: center;
		-moz-appearance: textfield;

		&::-webkit-inner-spin-button,
		&::-webkit-outer-spin-button { appearance: none; margin: 0; }
	}
}

h4.moderncart-slide-out-empty-cart-recommendations-title {
	text-wrap: balance;
}

/* O botão do rodapé quebrava em duas linhas de 320 a 430px: fonte fixa em
   18px para “Carrinho vazio. Compre agora →” num espaço interno de 176px.

   A fonte escala pela largura da GAVETA, não da janela — é o contêiner que
   manda aqui, já que a gaveta é 75% da tela no celular e 450px fixos no
   desktop. Por isso cqi e não vw: com vw a conta erraria justamente na
   transição entre os dois regimes. */
.moderncart-slide-out-footer {
	container-type: inline-size;
}

/* O seletor repete a forma do plugin — que fixa 18px em
   #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total
   a.checkout-button, especificidade (1,3,1) — e empata, vencendo pela ordem.
   Um seletor mais curto era simplesmente ignorado. */
#moderncart-slide-out-modal .moderncart-slide-out-footer .moderncart-cart-total a.checkout-button {
	/* Os dois rótulos têm comprimento parecido — “Finalizar Pedido →” e
	   “Começar a Comprar →” — então uma escala só serve aos dois. Havia aqui
	   uma exceção para o carrinho vazio, necessária enquanto o rótulo tinha
	   30 caracteres; encurtado, ela saiu. */
	font-size: clamp(0.875rem, 3.4cqi, 1.125rem);
	line-height: 1.3;
	text-wrap: nowrap;

	/* A fonte encolhe, o alvo de toque não: sem isto o botão caía para 38px
	   nas telas mais estreitas, abaixo do mínimo confortável para o dedo. */
	min-block-size: 2.75rem;
	display: grid;
	place-items: center;
}

.moderncart-cart-item-product .moderncart-collapse-btn-link {
	text-align: start;
}

/* ---- celular: a gaveta ocupa a tela inteira e rola por dentro ----
   dvh no lugar do 100vh do legado: com vh a barra do navegador cortava o
   rodapé, e o botão de finalizar ficava fora do alcance. */
@media (width <= 64rem) {
	:is(
		#moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total .checkout-button,
		#moderncart-slide-out .moderncart-slide-out-header-title span,
		.moderncart-slide-out-empty-cart-recommendations .moderncart-slide-out-empty-cart-recommendations-title
	) {
		font-size: 1rem;
	}

	#moderncart-slide-out {
		block-size: 100dvh;
		max-block-size: 100dvh;
		display: flex;

		& .moderncart-panel {
			display: flex;
			flex-direction: column;
			inline-size: 100%;
			max-block-size: 100%;
		}
	}

	.moderncart-slide-out-empty-cart-recommendations {
		flex: 1 1 auto;
		min-block-size: 0;
		overflow-y: auto;

		& .moderncart-empty-cart-recommendation-slider { padding-block-start: 0.3125rem; }

		/* 250px era largura fixa; vira teto. Em gaveta estreita a foto passa a
		   acompanhar a coluna em vez de forçá-la a crescer. */
		& .moderncart-cart-item-recommended-image img {
			inline-size: min(15.625rem, 100%);
			block-size: auto;
			display: block;
			margin-inline: auto;
		}
	}

	:is(.moderncart-slide-out-footer, .moderncart-slide-out-header) {
		flex-shrink: 0;
	}
}