/* Animated "Add to Cart" button: cart nudges on hover, drives while adding, turns into a tick when added. */
.cb-atc { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; transition: background-color .25s, transform .15s; }
.cb-atc:not(:disabled):active { transform: scale(.97); }
.cb-atc-icon { position: relative; display: inline-flex; width: 20px; height: 20px; flex: none; }
.cb-atc-icon > svg { width: 20px; height: 20px; overflow: visible; transition: opacity .2s, transform .25s; }
.cb-atc-icon > svg .cb-atc-wheel { transform-box: fill-box; transform-origin: center; }
.cb-atc-done { position: absolute; inset: 0; display: inline-flex; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s; }
.cb-atc-done svg { width: 20px; height: 20px; }
.cb-atc-done path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.cb-atc-label { white-space: nowrap; }

/* hover: the cart rolls forward a little and its wheels turn */
.cb-atc:not(:disabled):hover .cb-atc-icon > svg { animation: cb-atc-nudge .7s ease-in-out; }
.cb-atc:not(:disabled):hover .cb-atc-wheel { animation: cb-atc-spin .7s linear; }

/* adding: an item drops into the cart while the cart drives back and forth */
.cb-atc.is-adding { pointer-events: none; }
.cb-atc.is-adding .cb-atc-icon > svg { animation: cb-atc-drive .8s ease-in-out infinite; }
.cb-atc.is-adding .cb-atc-wheel { animation: cb-atc-spin .5s linear infinite; }
.cb-atc.is-adding .cb-atc-icon::before { content: ""; position: absolute; left: 8px; top: -12px; width: 7px; height: 7px; border-radius: 2px; background: currentColor; animation: cb-atc-drop .8s ease-in infinite; }

/* added: the cart turns into a tick that draws itself */
.cb-atc.is-added { background-color: #16a34a !important; border-color: #16a34a !important; pointer-events: none; }
.cb-atc.is-added .cb-atc-icon > svg { opacity: 0; transform: scale(.4); }
.cb-atc.is-added .cb-atc-done { opacity: 1; transform: scale(1); }
.cb-atc.is-added .cb-atc-done path { animation: cb-atc-tick .35s .1s ease-out forwards; }

@keyframes cb-atc-nudge { 0% { transform: translateX(0); } 40% { transform: translateX(5px) rotate(-6deg); } 100% { transform: translateX(0); } }
@keyframes cb-atc-spin { to { transform: rotate(360deg); } }
@keyframes cb-atc-drive { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes cb-atc-drop { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@keyframes cb-atc-tick { to { stroke-dashoffset: 0; } }

.cb-atc-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
	.cb-atc, .cb-atc * { animation: none !important; transition: none !important; }
	.cb-atc.is-added .cb-atc-done path { stroke-dashoffset: 0; }
}

/* ---- Header cart icon and badge, animated when items go in or out ---- */
.cb-cart-link { position: relative; display: inline-flex; align-items: center; padding: 6px; color: inherit; text-decoration: none; }
.cb-cart-icon { display: inline-flex; width: 26px; height: 26px; transform-origin: 50% 80%; }
.cb-cart-icon svg { width: 26px; height: 26px; overflow: visible; }
.cb-cart-icon svg .cb-atc-wheel { transform-box: fill-box; transform-origin: center; }
.cb-cart-count { position: absolute; top: -3px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: var(--cb-primary, #1d4ed8); color: #fff; font-size: 11px; font-weight: 700; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.cb-cart-count[data-count="0"] { display: none; }
.cb-cart-link:hover .cb-cart-icon { animation: cb-cart-hop .5s ease; }

.cb-cart-link.is-in .cb-cart-icon { animation: cb-cart-in .8s cubic-bezier(.3, 1.4, .5, 1); }
.cb-cart-link.is-in .cb-atc-wheel { animation: cb-atc-spin .6s linear; }
.cb-cart-link.is-in .cb-cart-count { animation: cb-count-pop .55s cubic-bezier(.3, 1.6, .5, 1); background: #16a34a; }
.cb-cart-link.is-out .cb-cart-icon { animation: cb-cart-out .6s ease; }
.cb-cart-link.is-out .cb-cart-count { animation: cb-count-drop .5s ease; background: #dc2626; }
.cb-cart-link.is-in .cb-cart-count, .cb-cart-link.is-out .cb-cart-count { transition: background-color .6s .5s; }

@keyframes cb-cart-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px) rotate(-6deg); } }
@keyframes cb-cart-in { 0% { transform: translateY(0) scale(1); } 25% { transform: translateY(-10px) scale(1.18) rotate(-10deg); } 55% { transform: translateY(2px) scale(.95) rotate(4deg); } 100% { transform: translateY(0) scale(1); } }
@keyframes cb-cart-out { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-6px) rotate(-8deg); } 35% { transform: translateX(6px) rotate(8deg); } 55% { transform: translateX(-4px) rotate(-5deg); } 75% { transform: translateX(3px) rotate(3deg); } }
@keyframes cb-count-pop { 0% { transform: scale(.3); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes cb-count-drop { 0% { transform: scale(1); } 30% { transform: scale(1.4); } 100% { transform: scale(1); } }

/* ---- Cart page: rows slide away when removed ---- */
.cb-cart-table tr.is-removing td { animation: cb-row-out .38s ease forwards; }
@keyframes cb-row-out { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-36px); } }
.cb-cart.is-updating { opacity: .6; transition: opacity .2s; }

@media (prefers-reduced-motion: reduce) {
	.cb-cart-link *, .cb-cart-table tr.is-removing td { animation: none !important; transition: none !important; }
}