/**
 * Radu Sava Widgets — Header Cart Link Styles
 *
 * Scoped strictly under .rs-cart-link.
 * Uses site design tokens with resilient fallbacks.
 *
 * @package RaduSavaVisuals\Widgets
 */

/* ==========================================================================
   Root Link Container
   ========================================================================== */

.rs-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	text-decoration: none !important;
	color: inherit;
	line-height: 1;
	box-sizing: border-box;
	cursor: pointer;
	vertical-align: middle;
}

.rs-cart-link.is-empty {
	display: none !important;
}

.rs-cart-link:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

/* ==========================================================================
   Icon
   ========================================================================== */

.rs-cart-link__icon {
	width: 20px;
	height: 20px;
	flex: none;
	display: block;
}

/* ==========================================================================
   Label & Underline Wipe
   ========================================================================== */

.rs-cart-link__label {
	font-family: var(--rs-font-mono, "IBM Plex Mono", ui-monospace, monospace);
	font-size: var(--rs-fs-mono, clamp(0.625rem, 0.68vw, 0.816rem));
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding-bottom: 3px;
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	transition: background-size 0.45s cubic-bezier(0.7, 0, 0.2, 1);
	color: inherit;
}

.rs-cart-link:hover .rs-cart-link__label {
	background-size: 0 1px;
	background-position: 100% 100%;
}

/* ==========================================================================
   Count Bubble
   ========================================================================== */

.rs-cart-link__count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--rs-graphite, #1b1a18);
	color: var(--rs-bd-hi, #e7e4df);
	font-family: var(--rs-font-mono, "IBM Plex Mono", ui-monospace, monospace);
	font-size: 10px;
	letter-spacing: 0;
	line-height: 1;
	box-sizing: border-box;
	transition: transform 0.3s var(--rs-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
}

/* Light header pages (body.rs-header-light, dark-hero pages, or .bar.light) */
body.rs-header-light .rs-cart-link__count,
.bar.light .rs-cart-link__count {
	background: var(--rs-bone, #ece8e1);
	color: var(--rs-film, #0b0b0a);
}

body.rs-header-light .rs-cart-link,
.bar.light .rs-cart-link {
	color: var(--rs-bone, #ece8e1);
}

/* ==========================================================================
   Bump Animation
   ========================================================================== */

.rs-cart-link.is-bump .rs-cart-link__count {
	animation: rs-cart-bump 0.5s var(--rs-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
}

@keyframes rs-cart-bump {
	40% {
		transform: scale(1.35);
	}
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media (max-width: 767px) {
	.rs-cart-link__label {
		display: none;
	}

	.rs-cart-link {
		min-width: 44px;
		justify-content: center;
	}
}

/* ==========================================================================
   Accessibility & Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.rs-cart-link__label {
		transition: none !important;
	}

	.rs-cart-link.is-bump .rs-cart-link__count {
		animation: none !important;
	}
}