/* Product page — "Used in these kits / projects" (partials/_used_in.php).
   Cross-link rule from the Sep 2026 homepage plan: a part leads back to the
   builds that use it. Site tokens only, so both themes follow. */
.dk-usedin__kits { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.dk-usedin__kit { display: grid; gap: 4px; padding: 16px 18px; background: var(--bg2); border: 1px solid var(--border);
  border-left: 4px solid var(--primary); border-radius: 10px; text-decoration: none; transition: border-color .2s, transform .2s; }
.dk-usedin__kit:hover { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); transform: translateY(-2px); }
.dk-usedin__kind { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.dk-usedin__name { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--fg); }
.dk-usedin__meta { font-size: 13px; color: var(--fg3); }
.dk-usedin__projects { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dk-usedin__projects li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 999px; font-size: 13.5px; }
.dk-usedin__projects a { color: var(--fg); font-weight: 600; text-decoration: none; }
.dk-usedin__projects a:hover { color: var(--primary); }
.dk-usedin__projects span { font-size: 10.5px; color: var(--fg3); text-transform: uppercase; letter-spacing: .06em; }
.dk-usedin__more { margin: 10px 0 0; font-size: 13px; color: var(--fg3); }