/* ============================================================
   Catalogue (Services / Tools) — Figma canon 2026-09-08
   Sources: Services 1280.md + Tools 1280.md export CSS (exact)
   + acceptance-spec.json catalogue_1280 gates.
   Geometry @1280 (container 1201): toolbar 56h one row =
   [tabs][search][switch], catalogue grid 353px | 840px (gap 8).
   ============================================================ */

/* --- Section title: «Предоставляемые услуги» 24/26/500 teal --- */
.catalogue-title{color:var(--teal);font-size:24px;line-height:26px;font-weight:500;margin:0 0 24px}

/* --- Toolbar: single 56px row: tabs | search | switch ---
   Tools canon: tabs 354 + gap 24 + search 653 + switch 162.
   Services canon: tabs auto; search flex; switch 162.
   Equipment page has no tabs: search must measure 653 => fixed width. */
.catalogue-toolbar{display:grid;grid-template-columns:auto minmax(0,1fr) 162px;gap:8px 24px;align-items:center;margin:0 0 24px;min-height:56px}
.catalogue-toolbar.no-tabs{grid-template-columns:653px minmax(0,1fr) 162px}
@media(min-width:1025px){
  .catalogue-toolbar.no-tabs .search-line{grid-column:1}
  .catalogue-toolbar.no-tabs .switch-btn{grid-column:3}
}

/* Segmented tabs: 354x56 white card r16 border #B3DFDF; text 16/18/500 #809CAF; active teal bg, white */
.mode-tabs{height:56px;display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid #B3DFDF;background:#fff;border-radius:16px;box-sizing:border-box;overflow:hidden}
.mode-tabs button{border:0;background:transparent;padding:10px 12px;color:#809CAF;font-size:16px;line-height:18px;font-weight:500;cursor:pointer;transition:.2s;white-space:nowrap;border-radius:8px;font-family:inherit}
.mode-tabs button:hover{color:var(--teal)}
.mode-tabs button.active{background:var(--teal);color:#fff;opacity:.8}

/* Search line: 653x56 flex-1, bg #F3F7FA r16 border #B3DFDF; placeholder 18/22 #A8B4BD; teal circle 40 */
.search-line{height:56px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 8px 12px 16px;border:1px solid #B3DFDF;background:#F3F7FA;border-radius:16px;box-sizing:border-box;min-width:0}
.search-line input{flex:1;border:0;outline:0;background:transparent;color:#272D31;font-size:18px;line-height:22px;font-weight:400;min-width:0;font-family:inherit}
.search-line input::placeholder{color:#A8B4BD}
.search-line button{width:40px;height:40px;border-radius:50%;border:0;background:var(--teal);color:#fff;cursor:pointer;display:grid;place-items:center;flex:0 0 40px;padding:0}
.search-line button .icon{width:20px;height:20px}

/* Switch button: 162x56, same row; Services variant grey #809BAF, Tools variant teal #009294 */
.catalogue-toolbar .switch-btn{width:162px;height:56px;min-width:162px;min-height:56px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:20px;font-weight:500;border-radius:16px;border:0;box-sizing:border-box}
.switch-btn--grey{background:#809BAF;color:#fff}
.switch-btn--teal{background:var(--teal);color:#fff}

/* --- Catalogue grid: sidebar 353 | results 840, gap 8 --- */
.catalogue{display:grid;grid-template-columns:353px minmax(0,1fr);gap:8px;align-items:start}

/* Sidebar category rows: 56h, r12, bg #F3F7FA, text 16/18/400 #5A6E7C, step 64 (gap 8) */
.category-list{display:grid;gap:8px;align-self:start}
.category-list button{min-height:56px;border:0;background:#F3F7FA;border-radius:12px;padding:0 16px;text-align:left;color:#5A6E7C;font-size:16px;line-height:18px;font-weight:400;cursor:pointer;transition:.2s;box-sizing:border-box;font-family:inherit}
.category-list button small{color:#809CAF;font-size:14px;line-height:16px;font-weight:400}
.category-list button:hover{background:#E8F0F4}
.category-list button.active{background:var(--teal);color:#fff}
.category-list button.active small{color:#CCF2EA}

/* Results shell: bg #F3F7FA r24 pad-x 16 */
.catalogue-list{background:#F3F7FA;border-radius:24px;padding:16px;box-sizing:border-box}

/* Result row: title 20/22/500 teal; meta 14/16/400 #809CAF; code badge 22h r4 #85BAAF 10/12/500 */
.catalogue-item{padding:20px 16px;border-bottom:1px solid #C7DCDF;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;box-sizing:border-box}
.catalogue-item:last-child{border-bottom:0}
.catalogue-item .code{display:inline-flex;align-items:center;min-height:22px;background:#85BAAF;color:#fff;border-radius:4px;padding:0 10px;font-size:10px;line-height:12px;font-weight:500;margin-bottom:10px;box-sizing:border-box}
.catalogue-item h3{font-size:20px;line-height:22px;color:var(--teal);font-weight:500;margin:0 0 6px}
.catalogue-item .service-name{font-size:20px;line-height:22px;color:var(--teal);font-weight:500}
.catalogue-item p{font-size:14px;line-height:16px;color:#809CAF;margin:0 0 4px}
.catalogue-item .service-method,.catalogue-item .service-indicator{font-size:14px;line-height:16px;color:#809CAF}

/* Right column: term badge, price, action button 44h outline pill */
.catalogue-side{border-left:1px solid var(--teal);padding-left:16px;min-width:170px;color:#5A6E7C;font-size:14px;line-height:16px;display:grid;align-content:center;gap:10px}
.catalogue-side>span{display:flex;align-items:center;gap:5px}
.catalogue-side .icon{width:15px;height:15px}
.add-btn{height:44px;min-height:44px;border:1px solid var(--teal);border-radius:999px;background:#fff;color:var(--teal);padding:0 24px;font-size:16px;line-height:20px;font-weight:500;cursor:pointer;transition:.2s;font-family:inherit;box-sizing:border-box}
.add-btn:hover{background:#E6F5F5}
.add-btn.added{background:var(--teal);color:#fff}
.info-chip{width:24px;height:24px;display:grid;place-items:center;border:1px solid #85BAAF;border-radius:50%;color:var(--teal);font-size:14px;font-style:normal}

/* Prices (gated by JS: guests see lock hint) */
.catalogue-price{color:var(--teal);font-weight:500;font-size:16px;line-height:18px}
.catalogue-price small{display:block;color:#809CAF;font-weight:400;font-size:14px;line-height:16px;margin-top:2px}
.price-private{display:inline-flex;align-items:center;gap:6px;color:#809CAF;font-size:14px;line-height:16px}
.login-hint{color:#809CAF;font-size:14px;line-height:16px;cursor:pointer}
.login-hint:hover{color:var(--teal)}

/* Detectors (equipment) */
.detectors{margin-top:10px}
.detectors summary{cursor:pointer;color:var(--teal);font-size:14px;line-height:16px;display:flex;align-items:center;gap:6px;list-style:none}
.detectors summary::-webkit-details-marker{display:none}
.detectors ul{list-style:none;margin:8px 0 0;padding:0 0 0 16px;display:grid;gap:6px;color:#5A6E7C;font-size:14px;line-height:16px}

/* Status / empty / pagination / more */
.catalogue-status{background:transparent;padding:0;margin:0 0 12px;color:#809CAF;font-size:14px;line-height:16px}
.catalogue-item.is-loading{opacity:.55}
.catalogue-empty{padding:44px 20px;text-align:center;color:#809CAF;font-size:14px}
.catalogue-pagination{display:flex;justify-content:center;gap:8px;margin-top:18px}
.catalogue-pagination button{border:1px solid #B3DFDF;background:#fff;color:var(--teal);border-radius:999px;padding:9px 14px}
.catalogue-more{grid-column:2;display:flex;justify-content:center;padding:18px 0 6px}
.catalogue-more[hidden]{display:none}
.catalogue-more .btn{min-width:220px}
.catalogue-more .btn:disabled{opacity:.55;cursor:wait}

/* Sub-filter tags inside categories */
.cat-filter{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.cat-filter button{border:1px solid #C7DCDF;background:#fff;border-radius:999px;padding:4px 10px;font-size:14px;color:#809CAF;cursor:pointer;transition:.2s;white-space:nowrap;font-family:inherit}
.cat-filter button:hover{border-color:var(--teal);color:var(--teal)}
.cat-filter button.active{background:var(--teal);color:#fff;border-color:var(--teal)}

/* --- Responsive (canon: 1024 gutter 40, content 944; 375 gutter 16, stacked) --- */
@media(max-width:1024px){
  .catalogue{grid-template-columns:minmax(0,1fr)}
  .category-list{display:flex;overflow-x:auto;gap:8px;flex-wrap:nowrap;padding-bottom:8px;max-width:100%;min-width:0}
  .category-list button{white-space:nowrap;min-height:56px;flex:0 0 auto}
  .catalogue-toolbar{grid-template-columns:minmax(0,1fr) auto;min-height:0}
  .catalogue-toolbar.no-tabs{grid-template-columns:minmax(0,1fr) auto}
  .mode-tabs{grid-column:1/-1;overflow-x:auto;max-width:100%}
  .catalogue-more{grid-column:1}
}
@media(max-width:768px){
  .catalogue-toolbar,.catalogue-toolbar.no-tabs{grid-template-columns:minmax(0,1fr)}
  .catalogue-toolbar .switch-btn,.catalogue-toolbar>.switch-btn{width:100%;min-width:0}
  .search-line{min-width:0}
  .catalogue-item{grid-template-columns:minmax(0,1fr);gap:10px}
  .catalogue-side{border-left:0;border-top:1px solid var(--teal);padding:12px 0 0;min-width:0}
  .catalogue-more{padding-top:14px}
  .catalogue-more .btn{width:100%;min-width:0}
}