.categories-page { margin: 0; background: #fff; color: #1c2333; }
.categories-main { width: min(100%, 760px); margin: 0 auto; padding: 0 20px 24px; }
.categories-title { margin: 0; padding: 22px 0 18px; border-bottom: 1px solid #eef0f4; text-align: center; font-size: 18px; font-weight: 650; line-height: 1.7; }
.categories-list { list-style: none; margin: 0; padding: 6px 0 0; }
.categories-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 12px 4px; color: #20283a; text-decoration: none; font-size: 14px; line-height: 1.8; border-radius: 8px; transition: color .16s ease, background-color .16s ease; }
.categories-link span { min-width: 0; overflow-wrap: anywhere; }
.categories-link svg { width: 17px; height: 17px; flex: 0 0 17px; color: #9ca2ae; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.categories-link:active { color: #2a39c6; background: #f4f5ff; }
.categories-link:focus-visible { outline: 2px solid #2a39c6; outline-offset: 2px; }
.categories-empty { padding: 40px 12px; text-align: center; color: #777f8d; line-height: 1.9; font-size: 14px; }
@media (hover: hover) { .categories-link:hover { color: #2a39c6; background: #f8f9fd; } }
@media (max-width: 768px) { .categories-title { font-size: 15px; padding: 16px 0; } .categories-main { padding-inline: 18px; } }
@media (prefers-reduced-motion: reduce) { .categories-link { transition: none; } }

.categories-group { border-bottom: 1px solid #f0f1f5; }
.categories-toggle { list-style: none; cursor: pointer; user-select: none; }
.categories-toggle::-webkit-details-marker { display: none; }
.categories-toggle::marker { content: ""; }
.categories-group[open] > .categories-toggle { color: #2a39c6; background: #f3f4ff; font-weight: 650; }
.categories-group[open] > .categories-toggle svg { color: #2a39c6; transform: rotate(180deg); }
.categories-children { list-style: none; margin: 6px 0 10px; padding: 4px 10px; background: #fafaff; border-inline-start: 2px solid #e0e3ff; border-radius: 12px; }
.categories-children .categories-link { min-height: 50px; padding: 10px 8px; font-size: 13px; }
.categories-children .categories-all { color: #2a39c6; background: #fff; font-weight: 650; }
.categories-toggle:focus-visible { outline: 2px solid #2a39c6; outline-offset: 2px; }