/* ---------- Стан очікування: кнопки, рядки, списки ---------- */
@keyframes gaSpin{to{transform:rotate(360deg)}}
@keyframes gaShow{to{opacity:1}}
@keyframes gaShimmer{to{background-position:-200% 0}}
/* Спінер з'являється через 150мс: швидкі відповіді не мигають */
:where(.is-busy){position:relative}
.is-busy{cursor:progress!important;pointer-events:none}
.is-busy::after{content:"";position:absolute;right:14px;top:50%;width:16px;height:16px;margin-top:-8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;opacity:0;animation:gaSpin .7s linear infinite,gaShow .1s .15s forwards}
.is-busy.sm::after,.qty .is-busy::after,.ci .is-busy::after{right:50%;margin-right:-6px;width:12px;height:12px;margin-top:-6px}
.is-busy.sm,.qty .is-busy{color:transparent!important}
/* Блок, що перезавантажується (рядок кошика, сітка каталогу) */
.is-loading{position:relative;opacity:.5;pointer-events:none;transition:opacity .2s}
.is-loading::after{content:"";position:absolute;left:50%;top:min(50%,160px);width:30px;height:30px;margin:-15px 0 0 -15px;border:3px solid var(--accent,var(--accent));border-right-color:transparent;border-radius:50%;animation:gaSpin .7s linear infinite;z-index:3}
.ci.is-loading::after{width:20px;height:20px;margin:-10px 0 0 -10px;border-width:2px;top:50%}
/* Скелетон */
.skel{border-radius:8px;background:linear-gradient(90deg,rgba(128,140,160,.14) 25%,rgba(128,140,160,.28) 37%,rgba(128,140,160,.14) 63%);background-size:200% 100%;animation:gaShimmer 1.3s linear infinite;min-height:14px}
.sr-wait{display:flex;align-items:center;gap:10px;padding:16px;color:var(--mut,#8a93a3);font-size:14px}
.sr-wait i{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:gaSpin .7s linear infinite}
@media (prefers-reduced-motion:reduce){.is-busy::after,.is-loading::after,.sr-wait i{animation:gaShow .1s .15s forwards;border-right-color:currentColor}.skel{animation:none}}