.service-catalog { --catalog-gap: 22px; }
.service-catalog [hidden] { display: none !important; }
.catalog-tools { background: var(--soft, #edf2eb); padding: 30px; border: 1px solid var(--line, #d8ded8); border-radius: var(--radius, 3px); margin-bottom: 50px; }
.catalog-tools label { display: block; font-weight: 700; font-size: 19px; margin-bottom: 12px; }
.catalog-search-row { display: flex; gap: 18px; align-items: center; }
.catalog-search-row input { flex: 1; min-width: 0; width: 100%; border: 1px solid #6e8381; border-radius: var(--radius, 3px); background: var(--paper, #fbfaf6); color: var(--ink, #142e3d); padding: 14px 16px; font: inherit; font-size: 16px; }
.catalog-search-row input::placeholder { color: var(--muted, #54676b); opacity: 1; }
.catalog-reset { border: 0; background: none; text-decoration: underline; text-underline-offset: 4px; color: var(--accent, #17695e); padding: 10px 0; white-space: nowrap; font: inherit; font-size: 13px; }
.catalog-categories { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.catalog-category { border: 1px solid #6e8381; border-radius: 30px; background: var(--paper, #fbfaf6); color: var(--ink, #142e3d); padding: 10px 14px; font: inherit; font-size: 12px; line-height: 1.5; min-height: 42px; }
.catalog-category[aria-pressed=true] { background: var(--ink, #142e3d); border-color: var(--ink, #142e3d); color: #fff; }
.catalog-category:hover { border-color: var(--accent, #17695e); }
.catalog-count { font-size: 12px; color: var(--muted, #54676b); margin: 16px 0 0; }
.service-catalog > .catalog-count { margin: 0 0 24px; }
.catalog-group { margin-bottom: 52px; }
.catalog-group h2 { font-family: var(--sans, Arial, sans-serif); font-size: 29px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.catalog-intro { max-width: 800px; margin: 0 0 24px; color: var(--muted, #54676b); font-size: 15px; line-height: 1.75; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--catalog-gap); }
.catalog-card { display: flex; flex-direction: column; padding: 25px; border: 1px solid var(--line, #d8ded8); border-top: 2px solid var(--accent, #17695e); border-radius: 0 0 var(--radius, 3px) var(--radius, 3px); }
.catalog-card h3 { font-family: var(--sans, Arial, sans-serif); font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 14px; }
.catalog-card p { font-size: 14px; line-height: 1.75; margin: 0 0 22px; color: var(--muted, #54676b); }
.catalog-link { align-self: flex-start; margin-top: auto; color: var(--accent, #17695e); font: inherit; font-size: 13px; font-weight: 700; line-height: 1.6; text-decoration: underline; text-underline-offset: 4px; border: 0; background: none; padding: 0; text-align: left; }
.catalog-empty { border-left: 3px solid var(--accent, #17695e); padding: 20px 25px; margin-bottom: 35px; }
.catalog-empty h2, .catalog-help h2 { font-family: var(--sans, Arial, sans-serif); font-size: 26px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; margin: 0 0 12px; }
.catalog-empty p, .catalog-help p { font-size: 15px; color: var(--muted, #54676b); line-height: 1.75; margin: 0; max-width: 650px; }
.catalog-help { background: var(--soft, #edf2eb); padding: 32px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.catalog-help .button { flex-shrink: 0; }
.catalog-tools :focus-visible, .catalog-card :focus-visible, .catalog-help :focus-visible { outline: 3px solid var(--accent, #17695e); outline-offset: 4px; }
@media (max-width: 1000px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .catalog-help { flex-direction: column; align-items: flex-start; } }
@media (max-width: 600px) { .catalog-tools { padding: 22px 18px; margin-bottom: 35px; } .catalog-search-row { flex-wrap: wrap; gap: 4px; } .catalog-search-row input { flex-basis: 100%; } .catalog-grid { grid-template-columns: 1fr; gap: 15px; } .catalog-card { padding: 23px; } .catalog-group { margin-bottom: 38px; } .catalog-group h2 { font-size: 26px; } .catalog-categories { gap: 7px; } .catalog-category { font-size: 12px; padding: 9px 12px; } .catalog-help { padding: 25px; } .catalog-help h2, .catalog-empty h2 { font-size: 24px; } }
