/* ============================================================
   ESTE SKLEP — WARSTWA UX (additive). Pasek postępu, back-to-top,
   feedback dodania, skip-link, mobilny pasek akcji, anti-jump.
   Ładowana PO pozostałych. Bez ruchu degraduje gracefully.
   ============================================================ */

/* skip-link (a11y) */
.skip{position:fixed;left:12px;top:-60px;z-index:10000;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 10px 10px;font-family:var(--font-d);font-size:13px;letter-spacing:.04em;transition:top .25s}
.skip:focus{top:0}

/* pasek postępu czytania */
.scrollbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:9999;transition:width .12s linear;pointer-events:none}

/* back-to-top */
.totop{position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:50%;background:var(--ink);color:#fff;border:none;display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s,transform .3s,background .25s;z-index:9990}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--deep)}

/* mikro-feedback dodania do koszyka */
[data-add].added{background:var(--deep)!important;color:#fff!important;transform:scale(1.08)}
.count.bump{animation:cntbump .45s cubic-bezier(.2,.8,.2,1)}
@keyframes cntbump{0%,100%{transform:scale(1)}40%{transform:scale(1.55)}}

/* anti-jump: rezerwuj wysokość zanim siatki produktów się zapełnią */
.prod-grid:empty{min-height:360px;border-radius:var(--r);background:
  linear-gradient(100deg,transparent 20%,rgba(255,255,255,.5) 40%,transparent 60%) ,var(--bg-alt);
  background-size:200% 100%;animation:shimmer 1.4s infinite linear;opacity:.5}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* mobilny sticky pasek akcji */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:9991;display:none;gap:10px;align-items:center;background:rgba(248,246,241,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:10px 14px}
.mbar .btn{flex:1;justify-content:center;padding:14px 10px}
@media(max-width:760px){.mbar{display:flex}body{padding-bottom:74px}.totop{bottom:88px}}

@media (prefers-reduced-motion: reduce){
  .scrollbar,.totop{transition:none}
  .count.bump{animation:none}
  .prod-grid:empty{animation:none}
  .totop{scroll-behavior:auto}
}