/* ============================================================
   CATEGORY DETAIL - .sdx add-on (v1)
   Loads AFTER seller-dash.css + seller-business-sdx.css +
   serve-card-sdx.css (ed-card serve cards + ed-grid + ed-av +
   ed-stars) + public-sdx.css (plx-hero, ed-crumb, plx-kicker,
   ed-results-head, ed-skel-card, ed-empty).
   Adds the results-head count + sort select + subcategory
   filter chips. JS untouched (/api/categories/:ident).
   ============================================================ */

/* ---- results head: count + sort ---- */
body.fp-ed .sdx .ed-results-head [data-cd-count]{font-family:'Inter',sans-serif;font-size:clamp(18px,2.4vw,23px);font-weight:800;letter-spacing:-.03em;color:var(--sdx-ink-900);line-height:1.1;margin:0}
body.fp-ed .sdx .ed-sort{display:inline-flex;align-items:center;gap:9px;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;color:var(--sdx-ink-400);white-space:nowrap}
body.fp-ed .sdx .ed-sort select{height:42px;min-height:0;box-sizing:border-box;appearance:none;-webkit-appearance:none;cursor:pointer;border:1px solid var(--sdx-line);border-radius:11px;background-color:var(--sdx-surface);padding:0 34px 0 13px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--sdx-ink-800);outline:none;transition:.15s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667694' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:13px}
body.fp-ed .sdx .ed-sort select:hover{border-color:var(--sdx-brand-300)}
body.fp-ed .sdx .ed-sort select:focus{border-color:var(--sdx-brand-400);box-shadow:0 0 0 3.5px var(--sdx-brand-50)}

/* ---- subcategory filter chips ---- */
body.fp-ed .sdx .ed-filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
body.fp-ed .sdx .ed-filter{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:700;color:var(--sdx-ink-600);background:var(--sdx-surface);border:1px solid var(--sdx-line);border-radius:20px;padding:7px 14px;cursor:pointer;transition:.15s;white-space:nowrap}
body.fp-ed .sdx .ed-filter:hover{border-color:var(--sdx-brand-300);color:var(--sdx-brand-600);background:var(--sdx-brand-50)}
body.fp-ed[data-spx-theme] .sdx .ed-filter.is-active{background:linear-gradient(135deg,var(--sdx-brand-500),var(--sdx-brand-700));border-color:transparent;color:#fff;box-shadow:0 8px 16px -9px rgba(36,86,230,.55)}

/* ---- results grid spacing ---- */
body.fp-ed .sdx [data-cd-results]{margin-top:20px!important}

/* under-link in empty state */
body.fp-ed .sdx .ed-under{color:var(--sdx-brand-600);font-weight:700;text-decoration:underline}

/* ---- hero: compact + premium (scoped to this page only; serve cards untouched) ---- */
body.pl-catdetail .sdx .plx-hero{padding:28px 0 26px;margin-bottom:20px}
body.pl-catdetail .sdx .plx-kicker{display:inline-flex;align-items:center;font-family:'Inter',sans-serif;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--sdx-brand-600);background:var(--sdx-brand-50);border:1px solid var(--sdx-brand-100,rgba(36,86,230,.16));padding:6px 13px;border-radius:999px;margin-top:0}
body.pl-catdetail .sdx .plx-hero .ed-h1{font-family:'Inter',sans-serif;font-size:clamp(28px,3.3vw,40px)!important;line-height:1.07!important;letter-spacing:-.035em;font-weight:800;color:var(--sdx-ink-900);max-width:20ch!important;margin-top:16px!important}
body.pl-catdetail .sdx .plx-hero .ed-lead{font-size:15px!important;line-height:1.55;color:var(--sdx-ink-500);max-width:54ch!important;margin-top:12px!important}
/* trust meta row */
body.pl-catdetail .sdx .cd-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;position:relative;z-index:1}
body.pl-catdetail .sdx .cd-meta span{display:inline-flex;align-items:center;gap:7px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--sdx-ink-700)}
body.pl-catdetail .sdx .cd-meta svg{width:17px;height:17px;flex:0 0 auto;color:var(--sdx-brand-600)}

@media (max-width:600px){
  body.fp-ed .sdx .ed-sort{width:100%;justify-content:space-between;margin-top:10px}
  body.fp-ed .sdx .ed-sort select{flex:1;max-width:200px}
  body.pl-catdetail .sdx .plx-hero .ed-h1{font-size:clamp(26px,7vw,32px)!important;max-width:100%!important}
  body.pl-catdetail .sdx .cd-meta{gap:6px 14px}
}