/* CartButton — extraído de src/lib/components/CartButton.svelte.
   Scopeado con anidamiento nativo bajo su raíz para evitar colisiones
   de nombres de clase al pasar de CSS scoped de Svelte a CSS global. */

.cart-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 100px;
	border: 1.5px solid transparent;
	background: transparent;
	cursor: pointer;
	transition:
		border-color 0.3s,
		transform 0.3s var(--ease);

	&.light {
		color: var(--on-dark);
		border-color: var(--line-on-dark-strong);
	}

	&.dark {
		color: var(--tinta);
		border-color: var(--line-strong);
	}

	&:hover {
		transform: translateY(-2px);
	}

	&.light:hover {
		border-color: var(--on-dark);
	}

	&.dark:hover {
		border-color: var(--tinta);
	}

	.sc-badge {
		position: absolute;
		top: -5px;
		right: -5px;
		min-width: 19px;
		height: 19px;
		padding: 0 5px;
		border-radius: 100px;
		background: var(--accent-deep);
		color: var(--accent-ink);
		font-family: var(--sans);
		font-size: var(--fs-micro);
		line-height: 19px;
		text-align: center;
		font-weight: 700;
	}
}