/* Floating cart icon — owner's explicit call (2026-09-25): appears once the
   real header cart button (#cart) scrolls out of view, so a shopper who's
   scrolled deep into a page still has a visible reminder/way back to their
   cart. Built to match the site's own header cart icon exactly (same
   .icon_cart/.icon_tag/.bg_black mask-image icon, same .rm-header-cart-
   quantity badge class/color so it updates for free via the existing
   add-to-cart success handler) rather than inventing new visual language.
   z-index sits above the (currently disabled) .oct-fixed-bar's 1000. */

#nc-floating-cart {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 1001;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #E2E3E8;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

#nc-floating-cart.nc-floating-cart-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	/* Subtle, slow ring pulse — only while actually shown, so it never
	   animates off-screen for no reason. Kept gentle on purpose: a soft
	   fading ring, not a scale/bounce, so it reads as "still here" rather
	   than demanding attention. */
	animation: nc-floating-cart-pulse 2.6s ease-out infinite;
}

@keyframes nc-floating-cart-pulse {
	0% { box-shadow: 0 4px 16px rgba(0, 0, 0, .14), 0 0 0 0 rgba(0, 0, 0, .16); }
	70% { box-shadow: 0 4px 16px rgba(0, 0, 0, .14), 0 0 0 10px rgba(0, 0, 0, 0); }
	100% { box-shadow: 0 4px 16px rgba(0, 0, 0, .14), 0 0 0 10px rgba(0, 0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	#nc-floating-cart.nc-floating-cart-visible {
		animation: none;
	}
}

#nc-floating-cart:hover {
	border-color: #000;
}

#nc-floating-cart .icon_cart {
	width: 22px;
	height: 22px;
	position: static;
}

#nc-floating-cart .rm-header-cart-quantity {
	position: absolute;
	top: -3px;
	right: -3px;
	left: auto;
	opacity: 1;
}

@media (max-width: 767px) {
	#nc-floating-cart {
		top: 12px;
		right: 12px;
		width: 42px;
		height: 42px;
	}

	#nc-floating-cart .icon_cart {
		width: 19px;
		height: 19px;
	}
}