/* === Categories Page: Phase 3 overrides (additive) === */
.subcategory-header{display:flex;align-items:center;gap:8px;margin-top:12px}
.subcat-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid rgba(0,0,0,.08);border-radius:6px;background:#fff;color:inherit}
.subcat-toggle:hover{border-color:rgba(0,0,0,.16);box-shadow:0 2px 8px rgba(0,0,0,.05)}
.subcat-toggle[aria-expanded=false] .la-angle-down{transform:rotate(-90deg)}
.subcat-panel[hidden]{display:none !important}

/* Fix overflow: allow wrapping and flexible row for subcategory rows */
.subcat-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.child-category .category-name{white-space:normal}
/* === Phase 4: content/state (badges + skeleton) === */
.count-badge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:9999px;background:#f1f5f9;color:#334155;font-size:.75rem;line-height:1.2}
.category-tree-item>.count-badge{margin-top:6px;display:inline-block}

/* Lightweight skeleton for lazy images */
img.lazyload:not(.lazyloaded){
  background: linear-gradient(110deg, #f3f4f6 8%, #e5e7eb 18%, #f3f4f6 33%);
  background-size: 200% 100%;
  animation: categories-skeleton 1s linear infinite;
}
@keyframes categories-skeleton{to{background-position-x:-200%}}

/* === Phase 5: A11y focus states + View All chip === */
.view-all-chip{display:inline-block;padding:6px 10px;border-radius:9999px;border:1px dashed rgba(0,0,0,.25);background:#fff;color:inherit}
.category-name:focus-visible,
.view-all-chip:focus-visible,
.subcat-toggle:focus-visible{outline:2px solid hsl(var(--base));outline-offset:2px}