.zp-shoprank-demo.is-pinned .zp-shoprank-demo__track { position:relative; height:200vh; }
.zp-shoprank-demo.is-pinned .zp-shoprank-demo__sticky { position:sticky; top:var(--zp-header-h,72px); height:calc(100vh - var(--zp-header-h,72px)); display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.zp-shoprank-demo__panel { padding:16px; border-radius:24px; background:#e9ebee; border:1px solid var(--ink-200,#e3e5ea); box-shadow:0 22px 48px rgba(13,31,78,.12); display:grid; grid-template-columns:.9fr 2.1fr; gap:20px; align-items:stretch; color:var(--ink-900,#1a1a1a); }
.zp-shoprank-demo__score-card { padding:24px 22px; border-radius:20px; background:#fff; display:flex; flex-direction:column; align-items:center; text-align:center; }
.zp-shoprank-demo__title { font-size:22px; font-weight:900; letter-spacing:-0.02em; margin-bottom:12px; }
.zp-shoprank-demo__banner { display:inline-flex; align-items:center; gap:9px; padding:8px 13px; border-radius:12px; background:#fdf3e0; color:#7a6000; font-size:14px; font-weight:600; margin-bottom:6px; transition:background 600ms var(--ease-out,ease), color 600ms var(--ease-out,ease); }
.zp-shoprank-demo.is-fixed .zp-shoprank-demo__banner { background:#dcf6e3; color:#127a3a; }
.zp-shoprank-demo__score { font-size:62px; font-weight:900; letter-spacing:-0.04em; line-height:1.1; transition:color 400ms var(--ease-out,ease); }
.zp-shoprank-demo.is-fixed .zp-shoprank-demo__score { color:#127a3a; }
.zp-shoprank-demo__stats { display:grid; grid-template-columns:repeat(3,1fr); width:100%; margin:6px 0 18px; }
.zp-shoprank-demo__stat { padding:0 8px; border-left:1px solid #eceef1; }
.zp-shoprank-demo__stat:first-child { border-left:0; }
.zp-shoprank-demo__stat-label { font-size:16px; font-weight:600; margin-bottom:6px; }
.zp-shoprank-demo__stat-value { font-size:16px; color:var(--ink-600,#5b5d66); }
.zp-shoprank-demo__button { margin-top:auto; width:100%; padding:13px 18px; border-radius:999px; background:var(--ink-900,#1a1a1a); color:#fff; font-size:17px; font-weight:700; letter-spacing:-0.01em; transition:background 600ms var(--ease-out,ease); }
.zp-shoprank-demo.is-fixed .zp-shoprank-demo__button { background:#127a3a; }
.zp-shoprank-demo__right { display:flex; flex-direction:column; gap:20px; }
.zp-shoprank-demo__meters { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.zp-shoprank-demo__meter { padding:18px 20px; border-radius:20px; background:#fff; }
.zp-shoprank-demo__meter-head { font-size:17px; font-weight:600; margin-bottom:14px; }
.zp-shoprank-demo__meter-value { font-size:28px; font-weight:900; letter-spacing:-0.03em; margin-bottom:10px; }
.zp-shoprank-demo__bar { position:relative; height:9px; border-radius:999px; background:#eceef1; margin-bottom:24px; }
.zp-shoprank-demo__fill { position:absolute; left:0; top:0; height:100%; border-radius:999px; background:#e0a020; transition:background 500ms var(--ease-out,ease); }
.zp-shoprank-demo.is-fixed .zp-shoprank-demo__fill { background:#1a9c4c; }
.zp-shoprank-demo__tick { position:absolute; left:50%; top:-3px; width:2px; height:15px; background:#c9ccd2; }
.zp-shoprank-demo__rec { position:absolute; left:50%; top:17px; transform:translateX(-50%); font-size:13px; color:var(--ink-600,#5b5d66); white-space:nowrap; }
.zp-shoprank-demo__scale { display:flex; justify-content:space-between; font-size:14px; color:var(--ink-600,#5b5d66); }
.zp-shoprank-demo__rows { flex:1 1 auto; border-radius:20px; background:#fff; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
.zp-shoprank-demo__row { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; padding:16px 20px; border-top:1px solid var(--ink-100,#f1f2f5); }
.zp-shoprank-demo__row:first-child { border-top:0; }
.zp-shoprank-demo__thumb { flex:0 0 auto; width:42px; height:42px; border-radius:11px; background:#f4f5f7; display:flex; align-items:center; justify-content:center; }
.zp-shoprank-demo__name { flex:1 1 140px; min-width:0; font-size:16px; font-weight:600; }
.zp-shoprank-demo__badges { flex:0 1 auto; display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.zp-shoprank-demo__row-score { flex:0 0 auto; width:52px; text-align:right; font-size:16px; font-weight:600; }
.zp-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; font-size:13px; font-weight:600; white-space:nowrap; }
.zp-badge--pass { background:#dcf6e3; color:#127a3a; }
.zp-badge--warn { background:#fbe6bd; color:#8a5a00; }
.zp-badge--crit { background:#fbdfdf; color:#b3202c; }
@media (max-width:1023px) {
  .zp-shoprank-demo.is-pinned .zp-shoprank-demo__track { height:auto; }
  .zp-shoprank-demo.is-pinned .zp-shoprank-demo__sticky { position:static; height:auto; overflow:visible; }
  .zp-shoprank-demo__panel, .zp-shoprank-demo__meters { grid-template-columns:1fr; }
  .zp-shoprank-demo__row { padding-block:20px; }
  .zp-shoprank-demo__score-card, .zp-shoprank-demo__meter { padding-inline:20px; }
}
@media (prefers-reduced-motion: reduce) {
  .zp-shoprank-demo *, .zp-shoprank-demo *::before { transition:none !important; }
  .zp-shoprank-demo.is-pinned .zp-shoprank-demo__track { height:auto; }
  .zp-shoprank-demo.is-pinned .zp-shoprank-demo__sticky { position:static; height:auto; overflow:visible; }
}