.base-cart-root {
	--base-cart-bg: #0b0e14;
	--base-cart-border: #22262f;
	--base-cart-pink: #ff2e93;
	--base-cart-cyan: #4fd8e8;
	--base-cart-text: #ffffff;
	--base-cart-muted: #9aa1ad;

	position: relative;
	display: inline-flex;
	align-items: center;
}

.base-cart-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 6px;
	line-height: 0;
	color: var(--base-cart-text);
	transition: color 0.2s ease;
}

.base-cart-toggle:hover {
	color: var(--base-cart-pink);
}

.base-cart-icon-svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
	stroke: none;
	display: block;
}

.base-cart-count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--base-cart-pink);
	color: #fff;
	font-size: 10px;
	line-height: 16px;
	text-align: center;
	font-weight: 700;
}

.base-cart-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 12px;
	width: 300px;
	max-width: calc(100vw - 24px);
	background: var(--base-cart-bg);
	border: 1px solid var(--base-cart-border);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
	padding: 16px;
	z-index: 99999;
	font-family: inherit;
	color: var(--base-cart-text);
}

.base-cart-dropdown-header {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 12px;
	color: var(--base-cart-text);
}

.base-cart-items {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-height: 280px;
	overflow-y: auto;
	padding-right: 10px;
	scrollbar-width: thin;
	scrollbar-color: var(--base-cart-muted) transparent;
}

.base-cart-items::-webkit-scrollbar {
	width: 6px;
}

.base-cart-items::-webkit-scrollbar-track {
	background: transparent;
	margin: 4px 0;
}

.base-cart-items::-webkit-scrollbar-thumb {
	background-color: var(--base-cart-muted);
	border-radius: 999px;
	border: 1px solid transparent;
	background-clip: padding-box;
}

.base-cart-items::-webkit-scrollbar-thumb:hover {
	background-color: var(--base-cart-text);
}

.base-cart-item-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--base-cart-border);
}

.base-cart-item-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.base-cart-item-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--base-cart-cyan);
}

.base-cart-item-price {
	font-size: 12px;
	color: var(--base-cart-muted);
}

.base-cart-item-controls {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.base-cart-qty-btn,
.base-cart-remove-btn {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid var(--base-cart-border);
	background: transparent;
	color: var(--base-cart-text);
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.base-cart-qty-btn:hover,
.base-cart-remove-btn:hover {
	border-color: var(--base-cart-pink);
	color: var(--base-cart-pink);
}

.base-cart-qty-value {
	min-width: 16px;
	text-align: center;
	font-size: 13px;
}

.base-cart-empty {
	font-size: 13px;
	color: var(--base-cart-muted);
	padding: 8px 0 4px;
}

.base-cart-total-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--base-cart-border);
	font-size: 14px;
	font-weight: 700;
}

.base-cart-continue-btn {
	width: 100%;
	margin-top: 14px;
	padding: 10px 16px;
	border: none;
	border-radius: 999px;
	background: var(--base-cart-pink);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.02em;
	cursor: pointer;
}

.base-cart-continue-btn:hover {
	filter: brightness(1.08);
}

.base-cart-btn-loading {
	opacity: 0.6;
	pointer-events: none;
}

.base-cart-btn-unavailable {
	opacity: 0.5;
	pointer-events: none;
}

/*
 * Responsive: the site's own header CSS hides .navbar-actions entirely
 * below 992px in favor of the hamburger menu, so #base-cart-root was moved
 * out of it to sit directly in .navbar-content and stay visible at every
 * width (see readme.txt). This breakpoint matches that same 992px so the
 * cart's touch targets grow at exactly the point the desktop nav switches
 * to the mobile hamburger menu.
 */
@media (max-width: 992px) {
	.base-cart-toggle {
		padding: 8px;
	}

	.base-cart-dropdown {
		width: calc(100vw - 32px);
		max-width: 360px;
		right: -8px;
	}

	.base-cart-items {
		max-height: min(280px, 42vh);
	}

	.base-cart-qty-btn,
	.base-cart-remove-btn {
		width: 32px;
		height: 32px;
		font-size: 15px;
	}

	.base-cart-item-controls {
		gap: 8px;
	}

	.base-cart-continue-btn {
		padding: 14px 16px;
		font-size: 14px;
	}
}

/*
 * "Add to Cart" feedback animations: a new row pops into the list, an item
 * already in the cart pulses in place instead (no jarring re-entrance for
 * a simple quantity bump), and the badge + icon give a quick tactile
 * confirmation that something happened. All of it is scoped inside
 * prefers-reduced-motion: no-preference, so a visitor who's asked their
 * OS to reduce motion gets the state changes with none of the movement -
 * the JS still toggles these classes either way, they just have nothing
 * to animate when this block doesn't apply.
 */
@media (prefers-reduced-motion: no-preference) {
	@keyframes base-cart-item-enter {
		from {
			opacity: 0;
			transform: translateY(-10px) scale(0.96);
		}
		to {
			opacity: 1;
			transform: translateY(0) scale(1);
		}
	}

	@keyframes base-cart-item-pulse {
		0% {
			background-color: rgba(255, 46, 147, 0.16);
		}
		100% {
			background-color: transparent;
		}
	}

	@keyframes base-cart-badge-pop {
		0% {
			transform: scale(1);
		}
		35% {
			transform: scale(1.4);
		}
		65% {
			transform: scale(0.9);
		}
		100% {
			transform: scale(1);
		}
	}

	@keyframes base-cart-icon-bump {
		0% {
			transform: scale(1) rotate(0deg);
		}
		30% {
			transform: scale(1.15) rotate(-10deg);
		}
		60% {
			transform: scale(1.05) rotate(8deg);
		}
		100% {
			transform: scale(1) rotate(0deg);
		}
	}

	.base-cart-item-row--entering {
		animation: base-cart-item-enter 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	}

	.base-cart-item-row--pulse {
		animation: base-cart-item-pulse 0.6s ease-out;
		border-radius: 8px;
	}

	.base-cart-count--pop {
		animation: base-cart-badge-pop 0.4s ease-out;
	}

	.base-cart-toggle--bump .base-cart-icon-svg {
		animation: base-cart-icon-bump 0.5s ease-out;
	}
}