/* Crawlable "Browse by manufacturer" directory injected into /directory/.
   Matches the brand/model detail pages and the maps per-place link sections. */
.dsl-section { background: var(--paper, #F4F1EA); border-top: 1px solid var(--rule, #D9D2C2); padding: 48px 0 64px; }
.dsl-section .wrap { max-width: 1140px; margin: 0 auto; padding: 0 var(--gutter, 24px); }
.dsl-eye { font: 600 11px var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange-deep, #C84711); }
.dsl-title { font: 900 clamp(22px, 2.6vw, 30px) var(--display, 'Archivo', sans-serif); letter-spacing: -0.02em; color: var(--charcoal-2, #1F2528); margin: 8px 0 6px; }
.dsl-sub { font: 400 14.5px/1.55 var(--body, 'DM Sans', sans-serif); color: var(--charcoal-3, #4A5560); max-width: 66ch; margin: 0 0 24px; }

.dsl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.dsl-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 13px; border-radius: 9px; text-decoration: none; transition: background 0.13s ease; }
.dsl-item:hover { background: #fff; }
.dsl-name { font: 600 14px var(--body, 'DM Sans', sans-serif); color: var(--charcoal-3, #3f474d); }
.dsl-item:hover .dsl-name { color: var(--orange-deep, #C84711); }
.dsl-count { font: 700 11px var(--mono, 'JetBrains Mono', monospace); color: var(--muted, #6E7178); background: #fff; border: 1px solid var(--rule, #D9D2C2); border-radius: 6px; padding: 1px 7px; }
.dsl-item:hover .dsl-count { border-color: var(--orange-soft, #F8A87C); }

.dsl-models-wrap { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule, #D9D2C2); }
.dsl-models-h { display: block; font: 600 11px var(--mono, 'JetBrains Mono', monospace); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted, #6E7178); margin-bottom: 12px; }
.dsl-models { display: flex; flex-wrap: wrap; gap: 7px; }
.dsl-model { display: inline-block; padding: 6px 12px; background: #fff; border: 1px solid var(--rule, #D9D2C2); border-radius: 999px; font: 500 12.5px var(--body, 'DM Sans', sans-serif); color: var(--charcoal-3, #4A5560); text-decoration: none; transition: border-color 0.13s ease, color 0.13s ease; }
.dsl-model:hover { border-color: var(--orange, #F25C1F); color: var(--orange-deep, #C84711); }

@media (max-width: 560px) { .dsl-grid { grid-template-columns: 1fr 1fr; } }