:root{
      --c-bg:#fcfcfc;          /* основной */
      --c-surface:#f5f5f5;     /* подложки */
      --c-text:#212121;        /* акцентный основной (текст) */
      --c-accent:#212121;      /* акцент */
      --c-accent2:#fd1a16;     /* акцент спец */
      --c-border:#dedede;

      --r-sm:5px;              /* мелкие элементы */
      --r-lg:10px;             /* крупные элементы */

      --gap:12px;
      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans";
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: var(--font);
      color:var(--c-text);
      background: var(--c-bg);
    }

    .app{
      height:100vh;
      display:flex;
      flex-direction:column;
      gap:24px;
      padding:16px;
    }

    .section-title {
      font-weight:600;
    }
    /* Tabs */
    .tabs{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
          justify-content: flex-start;
    }
    .tab-btn{
      flex: 0 0 auto;
      appearance:none;
      border:1px solid var(--c-border);
      background: #fff;
      color:var(--c-text);
      padding:15px 12px;
      border-radius: var(--r-sm);
      cursor:pointer;
      font-weight:700;
          font-size: 1.05vw;
      transition: background .15s ease, border-color .15s ease;
      user-select:none;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .tab-btn:hover{
      background:var(--c-accent);
      color: #fff;
    }
    .tab-btn.is-active{
      border-color: var(--c-accent);
      background: var(--c-accent);
      color: #fff;
    }


    /* Layout */
    .layout{
      min-height:0; /* for flex scroll */
      flex:1 1 auto;
      display:flex;
      gap:var(--gap);
      background: var(--c-surface);
      padding:12px;
          max-height: 520px;
    }
    .col-left{
      width: 100%;
      min-width: 320px;
      max-width: 40%;
      display:flex;
      flex-direction:column;
      /* border:1px solid var(--c-border); */
      /* background: var(--c-surface); */
      /* border-radius: var(--r-lg); */
      overflow:hidden;
    }
    .col-left__head{
      
      padding:12px 12px 10px;
      border-bottom:1px solid var(--c-border);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      background: #fff;
      display:none;
    }
    .col-left__title{
      font-weight:800;
      font-size:14px;
      color: var(--c-text);
    }
    .col-left__meta{
      font-size:12px;
      color:#666;
      white-space:nowrap;
    }

    .cards{
      min-height:0;
      flex:1 1 auto;
      overflow:auto;
      padding-right: 10px;
      /* padding:12px; */
    }

    /* Card */
    .card{
      border:1px solid var(--c-border);
      background: #fff;
      border-radius: var(--r-lg);
      overflow:hidden;
      margin-bottom:12px;
    }
    .card.is-active{
      border-color: var(--c-accent2);
      box-shadow: 0 0 0 2px rgba(253,26,22,.12);
    }

    /* Header requested structure */
    .card__header{
      cursor:pointer;
      padding: 15px 20px;
      display:flex;
      flex-direction:column;
      /* gap:8px; */
    }
    .card__left{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
    }

    .card__title-wrap{
      display:flex;
      gap:8px;
          align-items: center;
      min-width:0;
      max-width:80%;
    }
    .card__title-icon{
      width:18px;height:18px;
      border-radius: var(--r-sm);
      object-fit:cover;
      flex:0 0 auto;
    }
    .card__title{
      font-size:18px;
      font-weight:700;
      line-height:1.25;
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .is-open .card__title-wrap {
      max-width: 100%;
    }
    .is-open .card__title{
      white-space:normal;
    }

    .card__right{
      flex:0 0 auto;
      display:flex;
      align-items:flex-start;
      justify-content:flex-end;
      max-width: 45%;
    }

    .mini-contact{
      font-size:12px;
      padding:5px 10px;
      border-radius: var(--r-sm);
      background: var(--c-surface);
      color:var(--c-text);
      text-decoration:none;
      max-width: 220px;
      overflow:hidden;
      text-overflow:ellipsis;
      /* white-space:nowrap; */
    }



    .card__addr{
      font-size:12px;
      color:var(--c-text);
      display:grid;
      grid-template-columns: 1fr;
      gap:6px;
      opacity:.95;
      min-width:0;
    }
    .card__addr a{
      color:var(--c-text);
      text-decoration:underline;
      text-decoration-color: rgba(33,33,33,.25);
    }

    /* Disabled (collapsed) interactive elements */
    .is-disabled{
      pointer-events:none;
      cursor:default !important;
      text-decoration:none !important;
      outline:none !important;
    }

    .card__body{
      padding:0 20px 15px;
      display:none;
    }
    .card.is-open .card__body{ display:block; }
.card.is-open .card__right{ display:none; }

    /* Expanded blocks (no separators, only spacing) */
    .block{ margin-top:10px; }
    .block:first-child{ margin-top:0; }

    .lines{
      display:flex;
      flex-direction:column;
      font-size:14px;
      line-height:1.35;
      color:var(--c-text);
    }

    .text-link {
          color: #333;
    font-weight: 600;
    }
    /* “Actions” (phones/emails/links) — styled as buttons */
    .actions{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .action{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 10px;
      border-radius: var(--r-sm);
      border:1px solid var(--c-border);
      background: var(--c-surface);
      color:var(--c-text);
      text-decoration:none;
      font-weight:700;
      font-size:12px;
      user-select:none;
    }
    .action:hover{ background:#efefef; }
    .action img{ width:16px;height:16px;border-radius: var(--r-sm); object-fit:cover; }

    /* crumbs */
    .chips{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:20px;
    }
    .chip{
      display:inline-flex;
      gap:8px;
      align-items:center;
      padding:8px 10px;
      border-radius: var(--r-sm);
      border:1px solid var(--c-accent);
      background: var(--c-accent);
      font-size:12px;
      color: var(--c-bg);
      text-decoration:none;
      user-select:none;
    }
    .chip img{ width:16px;height:16px;border-radius: var(--r-sm); object-fit:cover; }
/* Map column */
    .col-right{
      flex:1 1 auto;
      min-width: 0;
      max-width: 60%;
      border:1px solid var(--c-border);
      border-radius: var(--r-lg);
      overflow:hidden;
      background: var(--c-surface);
      position:relative;
    }
    #map{
      width:100%;
      height:100%;
      min-height: 420px;
    }

        .f-nc {
      flex-wrap: wrap;
      flex-direction: unset;
    }

    @media (max-width: 980px){
      .layout{ flex-direction:column; }
      .col-left{
        width:100%;
        max-width:none;
        min-width:0;
        height: 52vh;
      }
      .col-right{
        height: 48vh;
        max-width:100%;
      }
      #map{ min-height: 320px; }
    }


    
    @media screen and (max-width:640px) {
      .tab-btn{
            font-size: 3.6vw;
      }
      .mini-contact {
        font-size: 3vw;
      }
      .card__header {
            padding: 12px 15px 13px 15px;
      }
      .card {
            margin-bottom: 6px;
      }
    }