/* ===== Category carousel (revamped) ===== */
.sfl-catbar{ margin:1.25rem 0; position:relative }
.sfl-catbar__head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem
}
.sfl-catbar__label{
  font-weight:600; font-size:14px; color:var(--sfl-dark); text-transform:uppercase; letter-spacing:.05em
}
.sfl-catbar__clear{
  border:0; background:transparent; color:var(--sfl-muted); font-size:12px; cursor:pointer
}

/* Rail with fade edges */
.sfl-catbar__wrap{
  position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:.75rem; align-items:center
}
.sfl-catbar__rail{
  display:flex; gap:.75rem; overflow-x:auto; overflow-y:hidden; padding:6px 6px;
  scrollbar-width:none; -ms-overflow-style:none; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  mask-image: linear-gradient(to right, transparent 0, black 28px, black calc(100% - 28px), transparent 100%);
}
.sfl-catbar__rail::-webkit-scrollbar{ display:none }

/* Arrows */
.sfl-catbar__scroll{
  appearance:none; background:var(--sfl-bg-alt); border:1px solid var(--sfl-border);
  color:var(--sfl-muted); width:40px; height:40px; border-radius:999px;
  display:grid; place-items:center; cursor:pointer; transition:all var(--s) var(--c); flex-shrink:0
}
.sfl-catbar__scroll:hover{ background:var(--sfl-dark); border-color:var(--sfl-dark); color:#fff }
.sfl-catbar__scroll[disabled]{ opacity:.35; cursor:not-allowed; background:var(--sfl-bg-alt); color:var(--sfl-muted) }

/* ===== Category pills — image cards ===== */
.sfl-catpill{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:10px; padding:12px 14px; min-width:130px; max-width:160px;
  background:var(--sfl-bg); border:1px solid var(--sfl-border); border-radius:14px;
  cursor:pointer; scroll-snap-align:start; transition:transform var(--s) var(--c), border-color var(--s) var(--c), background var(--s) var(--c);
  text-align:center
}
.sfl-catpill:hover{ border-color:var(--sfl-accent); transform:translateY(-2px) }

.sfl-catpill.is-active,
.sfl-catpill[aria-checked="true"]{
  background:var(--sfl-dark); border-color:var(--sfl-dark); color:#fff
}

/* Thumbnail — circular, with subtle ring */
.sfl-catpill__thumb{
  width:80px; height:80px; border-radius:50%; overflow:hidden; background:#f5f5f5; flex-shrink:0;
  box-shadow:0 0 0 1px var(--sfl-border) inset
}
.sfl-catpill__thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--c) }
.sfl-catpill:hover .sfl-catpill__thumb img{ transform:scale(1.05) }

/* Active ring */
.sfl-catpill.is-active .sfl-catpill__thumb,
.sfl-catpill[aria-checked="true"] .sfl-catpill__thumb{
  box-shadow:0 0 0 3px var(--sfl-bg), 0 0 0 5px var(--sfl-accent)
}

/* Label */
.sfl-catpill__label{
  font-size:12px; line-height:1.35; color:inherit; max-width:100%;
  display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden
}

/* Skeleton (kept) */
.sfl-catpill--sk .sfl-catpill__label{
  color:transparent; background:#eee; border-radius:999px; width:84px; height:14px
}

/* Mobile tweaks */
@media (max-width:640px){
  .sfl-catpill{ min-width:115px }
  .sfl-catpill__thumb{ width:70px; height:70px }
}