/* 777 Sourcing: directory pages: supplier_list, supplier_detail,
   home, categories, category_detail. One-off tweaks layered over
   static/site.css + static/css/manifest.css. Loaded via
   {% block extra_head %} in those five templates. Token values only. */

/* ---- supplier_list: faceted filter sidebar ---- */
.directory-layout { grid-template-columns: 220px 1fr; }
.facet-group { margin: var(--sp-4) 0 var(--sp-1); }
.filters--stack { flex-direction: column; align-items: stretch; gap: var(--sp-1); }
.filters--stack .filter-link { text-align: left; }

/* ---- supplier_list: results head + sort dropdown ---- */
.results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.results-head h2 { margin-bottom: 0; }
.sort-form { display: flex; align-items: center; gap: var(--sp-2); }
.sort-form select { width: auto; }

/* ---- supplier_list ---- */
.supplier-layout { grid-template-columns: 1fr 300px; align-items: start; }
.hero-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.hero-head h1 { margin-bottom: 0; }
.supplier-facts { position: sticky; top: var(--sp-8); }
.product-list li { padding-block: var(--sp-2); border-bottom: 1px solid var(--hairline); }
.product-list li:last-child { border-bottom: 0; }

@media (max-width: 900px) {
  .directory-layout, .supplier-layout { grid-template-columns: 1fr; }
  .supplier-facts { position: static; }
}

/* ---- home + categories ---- */
/* Section rhythm: first section after the hero is flush (hero bottom
   padding is the header-to-content gap); sections space each other. */
.home-section + .home-section { margin-top: var(--sp-7); }
.home-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); max-width: var(--measure); }
.home-section__head p { color: var(--muted); }
.trust-strip { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--sp-6); }
.trust-strip .stats { margin-top: var(--sp-5); }
.category-tree, .category-tree ul { list-style: none; padding-left: 0; margin: 0; }
.category-tree ul { padding-left: var(--sp-5); border-left: 1px solid var(--hairline); margin-left: var(--sp-2); }
.category-tree li { margin-top: var(--sp-2); }
.category-node__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--hairline); }
.category-tree > li:last-child > .category-node__row { border-bottom: 0; }
.category-node__row:hover { background: var(--brand-50); }
.category-node__link { font-weight: 600; color: var(--ink); }
.category-node__link:hover { color: var(--brand-600); }
.category-node__children { list-style: none; margin: 0 0 0 var(--sp-5); padding: 0 0 0 var(--sp-5); border-left: 1px solid var(--hairline); }
.category-node__children .category-node__row { padding: var(--sp-2) var(--sp-4); border-bottom: 0; }
.category-node__children .category-node__link { font-weight: 500; font-size: 0.9375rem; }

/* mobile: sections and cards shrink proportionally */
@media (max-width: 40rem) {
  .home-section + .home-section { margin-top: var(--sp-6); }
  .trust-strip { padding: var(--sp-5); }
}