/* OyeKudiye - listing infinite scroll (js/listing-more.js). Everything here is an enhancement: without JS the numbered pager
   (nav.lst-pager) is the only pagination UI and the loader block stays [hidden]. */
.lst-pager{padding:0 0 60px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;font:500 13px/1 'Jost',sans-serif}
.lst-pager a{padding:12px 16px;min-width:44px;box-sizing:border-box;text-align:center;border-radius:999px;border:1px solid rgba(59,11,62,.2);color:#3B0B3E;text-decoration:none}
.lst-pager a[aria-current="page"]{background:#3B0B3E;color:#FDF0F8;border-color:#3B0B3E}
.lst-pager a:focus-visible{outline:2px solid #E6157F;outline-offset:2px}
.lst-pg-gap{padding:12px 4px;color:rgba(59,11,62,.5)}
@media (hover:hover){.lst-pager a:not([aria-current]):hover{background:rgba(230,21,127,.08)}}

/* enhanced mode: the pager stays in the DOM (crawlers, no-JS fallback) but is replaced visually by the status line + button */
[data-listing].is-enhanced .lst-pager{display:none}
.lst-loader:not([hidden]){display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 0 56px;position:relative}
.lst-status{margin:0;font:400 14px/1.4 'Jost',sans-serif;color:rgba(59,11,62,.7);text-align:center}
.lst-progress{width:min(260px,70%);height:4px;border-radius:4px;background:rgba(59,11,62,.12);overflow:hidden}
.lst-progress i{display:block;height:100%;background:#E6157F;border-radius:4px;transition:width .35s ease}
.lst-more{padding:0 32px;height:44px;border-radius:999px;border:1px solid #3B0B3E;background:none;color:#3B0B3E;font:500 13px/1 'Jost',sans-serif;letter-spacing:.12em;cursor:pointer}
.lst-more:focus-visible,.lst-retry:focus-visible,.lst-prevbtn:focus-visible,.lst-top:focus-visible{outline:2px solid #E6157F;outline-offset:3px}
.lst-more[disabled]{opacity:.55;cursor:progress}
.lst-more[hidden]{display:none}
@media (hover:hover){.lst-more:not([disabled]):hover{background:#3B0B3E;color:#FDF0F8}}
.lst-err{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;font:400 14px/1.4 'Jost',sans-serif;color:#B00A60}
.lst-err[hidden],.lst-end[hidden],.lst-skels[hidden],.lst-prevwrap[hidden]{display:none}
.lst-retry{padding:0 20px;height:40px;border-radius:999px;border:1px solid #B00A60;background:none;color:#B00A60;font:500 12px/1 'Jost',sans-serif;letter-spacing:.1em;cursor:pointer}
.lst-end{margin:0;font:400 14px/1.5 'Jost',sans-serif;color:rgba(59,11,62,.7);text-align:center}
.lst-end a{color:#3B0B3E;text-decoration:underline}
.lst-sentinel{position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none}
.lst-prevwrap:not([hidden]){display:flex;justify-content:center;padding:18px 0 0}
.lst-prevbtn{padding:13px 28px;border-radius:999px;border:1px solid #3B0B3E;color:#3B0B3E;font:500 13px/1 'Jost',sans-serif;letter-spacing:.1em;text-decoration:none}

/* skeleton cards reserve the space while a page is being fetched */
.lst-skels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%}
.lst-skels span{display:block;aspect-ratio:3/4.2;border-radius:8px;background:linear-gradient(100deg,#FDE4EF 30%,#fff3f9 50%,#FDE4EF 70%);background-size:200% 100%;animation:lst-shimmer 1.2s linear infinite}
@keyframes lst-shimmer{to{background-position:-200% 0}}
@media (max-width:1024px){.lst-skels{grid-template-columns:repeat(3,1fr)}.lst-skels span:nth-child(4){display:none}}
@media (max-width:640px){.lst-skels{grid-template-columns:repeat(2,1fr);gap:8px}.lst-skels span:nth-child(4){display:block}}

/* cards inserted by JS fade in; reduced motion = no animation at all */
.lst-card.lst-in{animation:lst-fade .45s ease both}
@keyframes lst-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .lst-card.lst-in{animation:none}
  .lst-skels span{animation:none}
  .lst-progress i{transition:none}
}

/* screen-reader-only live region */
.lst-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- JS masonry: real flex columns, cards go into the shortest one (no CSS columns, no transforms; cards stay in normal flow) ---- */
.lst-mason{display:flex;gap:12px;align-items:flex-start}
.lst-col{flex:1 1 0;min-width:0}
.lst-mason .lst-card{margin-bottom:12px}
@media (max-width:640px){.lst-mason{gap:8px}.lst-mason .lst-card{margin-bottom:8px}}