.vkp{
    --vkp-brand:#003C71;
    --vkp-brand-2:#0A5FA5;
    --vkp-accent:#00A0DF;
    --vkp-ink:#12283C;
    --vkp-muted:#5A7186;
    --vkp-line:#E1E8EF;
    --vkp-bg:#F4F8FB;
    --vkp-radius:14px;
    color:var(--vkp-ink);
    font-size:16px;
    line-height:1.55;
    box-sizing:border-box;
  }
  .vkp *,.vkp *::before,.vkp *::after{box-sizing:border-box;}

  /* ---------- Шапка блоку ---------- */
  .vkp-hero{
    background:linear-gradient(135deg,var(--vkp-brand) 0%,var(--vkp-brand-2) 100%);
    border-radius:var(--vkp-radius);
    padding:28px 28px 26px;
    color:#fff;
    position:relative;
    overflow:hidden;
  }
  .vkp-hero::after{
    content:"";position:absolute;right:-60px;top:-70px;
    width:260px;height:260px;border-radius:50%;
    background:rgba(255,255,255,.07);
  }
  .vkp-hero::before{
    content:"";position:absolute;right:60px;bottom:-110px;
    width:180px;height:180px;border-radius:50%;
    background:rgba(255,255,255,.05);
  }
  .vkp-hero h2{
    margin:0 0 8px;font-size:1.6rem;line-height:1.25;color:#fff;font-weight:700;
    position:relative;z-index:1;
  }
  .vkp-hero p{
    margin:0;max-width:70ch;color:rgba(255,255,255,.88);
    /* Трохи зменшуємо шрифт на вузьких екранах, щоб назва підприємства
       вміщалась в один рядок і не розривалась. */
    font-size:clamp(.78rem, 3.6vw, .97rem);
    position:relative;z-index:1;
    overflow-wrap:break-word;word-break:normal;hyphens:none;
  }
  .vkp-hero-stats{
    display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;position:relative;z-index:1;
  }
  .vkp-chip{
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;padding:5px 14px;font-size:.85rem;font-weight:600;
    backdrop-filter:blur(2px);
  }

  /* ---------- Панель керування ---------- */
  .vkp-toolbar{
    margin-top:18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  }
  .vkp-search{position:relative;flex:1 1 280px;min-width:220px;}
  .vkp-search svg{
    position:absolute;left:14px;top:50%;transform:translateY(-50%);
    width:18px;height:18px;color:var(--vkp-muted);pointer-events:none;
  }
  .vkp-search input{
    width:100%;padding:12px 40px 12px 42px;font-size:.95rem;font-family:inherit;
    border:1.5px solid var(--vkp-line);border-radius:10px;background:#fff;
    color:var(--vkp-ink);transition:border-color .18s,box-shadow .18s;
  }
  .vkp-search input::-webkit-search-cancel-button,
  .vkp-search input::-webkit-search-decoration,
  .vkp-search input::-webkit-search-results-button{
    -webkit-appearance:none;appearance:none;display:none;
  }
  .vkp-search input:focus{
    outline:none;border-color:var(--vkp-accent);
    box-shadow:0 0 0 3px rgba(0,160,223,.15);
  }
  .vkp-clear{
    position:absolute;right:8px;top:50%;transform:translateY(-50%);
    border:0;background:transparent;cursor:pointer;color:var(--vkp-muted);
    font-size:20px;line-height:1;padding:4px 8px;border-radius:6px;display:none;
  }
  .vkp-clear:hover{background:var(--vkp-bg);color:var(--vkp-ink);}
  .vkp-search.is-filled .vkp-clear{display:block;}

  .vkp-actions{display:flex;gap:8px;flex-wrap:wrap;}
  .vkp-btn{
    display:inline-flex;align-items:center;gap:7px;
    padding:11px 16px;font-size:.9rem;font-weight:600;font-family:inherit;
    border:1.5px solid var(--vkp-line);border-radius:10px;background:#fff;
    color:var(--vkp-brand);cursor:pointer;transition:all .18s;white-space:nowrap;
  }
  .vkp-btn:hover{border-color:var(--vkp-brand);background:var(--vkp-brand);color:#fff;}
  .vkp-btn svg{width:16px;height:16px;}

  /* ---------- Вкладки-фільтри ---------- */
  .vkp-tabs{
    display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;
  }
  .vkp-tab{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 16px;border-radius:999px;cursor:pointer;
    border:1.5px solid var(--vkp-line);background:#fff;
    font-size:.9rem;font-weight:600;font-family:inherit;color:var(--vkp-ink);
    transition:all .18s;
  }
  .vkp-tab:hover{border-color:var(--vkp-brand-2);color:var(--vkp-brand);}
  .vkp-tab .vkp-count{
    background:var(--vkp-bg);color:var(--vkp-muted);
    border-radius:999px;padding:1px 8px;font-size:.78rem;font-weight:700;
  }
  .vkp-tab[aria-selected="true"]{
    background:var(--vkp-brand);border-color:var(--vkp-brand);color:#fff;
    box-shadow:0 4px 14px rgba(0,60,113,.22);
  }
  .vkp-tab[aria-selected="true"] .vkp-count{background:rgba(255,255,255,.2);color:#fff;}

  /* ---------- Секції ---------- */
  .vkp-results{margin-top:22px;}
  .vkp-section{
    border:1px solid var(--vkp-line);border-radius:var(--vkp-radius);
    background:#fff;overflow:hidden;margin-bottom:18px;
  }
  .vkp-section-head{
    display:flex;align-items:flex-start;gap:14px;
    padding:18px 20px;background:var(--vkp-bg);
    border-bottom:1px solid var(--vkp-line);
  }
  .vkp-ico{
    flex:0 0 auto;width:42px;height:42px;border-radius:11px;
    background:var(--vkp-brand);color:#fff;
    display:flex;align-items:center;justify-content:center;
  }
  .vkp-ico svg{width:22px;height:22px;}
  .vkp-section-head h3{
    margin:0 0 3px;font-size:1.06rem;font-weight:700;color:var(--vkp-brand);line-height:1.35;
  }
  .vkp-section-head p{margin:0;font-size:.86rem;color:var(--vkp-muted);}

  /* ---------- Таблиця ---------- */
  .vkp-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .vkp table{
    width:100%;border-collapse:collapse;font-size:.92rem;margin:0;background:#fff;
  }
  .vkp thead th{
    background:#fff;color:var(--vkp-muted);
    font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
    text-align:left;padding:12px 16px;border-bottom:2px solid var(--vkp-line);
    white-space:nowrap;vertical-align:bottom;
  }
  .vkp thead th.vkp-num{text-align:right;}
  .vkp tbody td{
    padding:13px 16px;border-bottom:1px solid var(--vkp-line);vertical-align:top;
  }
  .vkp tbody tr:last-child td{border-bottom:0;}
  .vkp tbody tr:hover td{background:#F8FBFD;}
  .vkp-idx{color:var(--vkp-muted);font-size:.85rem;width:44px;white-space:nowrap;}
  .vkp-code{
    font-variant-numeric:tabular-nums;white-space:nowrap;width:110px;
    font-weight:600;color:var(--vkp-brand-2);font-size:.86rem;
  }
  .vkp-name{min-width:280px;}
  .vkp-badge{
    display:inline-block;margin-top:5px;
    background:var(--vkp-bg);color:var(--vkp-muted);
    border:1px solid var(--vkp-line);border-radius:6px;
    padding:2px 8px;font-size:.76rem;font-weight:600;
  }
  .vkp-num{
    text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;width:130px;
  }
  .vkp-price-net{color:var(--vkp-muted);}
  .vkp-price-vat{font-weight:700;color:var(--vkp-brand);font-size:1rem;}
  .vkp mark{background:#FFF1A8;color:inherit;padding:0 1px;border-radius:2px;}

  /* Ховаємо колонку коду там, де її немає */
  .vkp-section.no-code .vkp-code{display:none;}

  /* ---------- Порожній результат ---------- */
  .vkp-empty{
    display:none;text-align:center;padding:48px 20px;
    border:1px dashed var(--vkp-line);border-radius:var(--vkp-radius);
    background:#fff;color:var(--vkp-muted);
  }
  .vkp-empty svg{width:40px;height:40px;color:var(--vkp-line);margin-bottom:10px;}
  .vkp-empty strong{display:block;color:var(--vkp-ink);font-size:1.05rem;margin-bottom:4px;}

  /* ---------- Примітка ---------- */
  .vkp-note{
    margin-top:22px;display:flex;gap:12px;align-items:flex-start;
    background:var(--vkp-bg);border-left:4px solid var(--vkp-accent);
    border-radius:10px;padding:16px 18px;font-size:.88rem;color:var(--vkp-muted);
  }
  .vkp-note svg{flex:0 0 auto;width:20px;height:20px;color:var(--vkp-accent);margin-top:1px;}
  .vkp-note strong{color:var(--vkp-ink);}

  /* ---------- Мобільна версія: картки ---------- */
  @media (max-width:760px){
    .vkp-hero{padding:22px 18px;}
    .vkp-hero h2{font-size:1.3rem;}
    .vkp-tabs{
      flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;
      scrollbar-width:none;-ms-overflow-style:none;
      -webkit-overflow-scrolling:touch;
    }
    .vkp-tabs::-webkit-scrollbar{display:none;}
    .vkp-tab{flex:0 0 auto;}
    .vkp-actions{width:100%;}
    .vkp-btn{flex:1 1 0;justify-content:center;}
    .vkp-section-head{padding:14px 16px;}
    .vkp thead{display:none;}
    .vkp table,.vkp tbody,.vkp tr,.vkp td{display:block;width:100%;}
    .vkp tbody tr{
      border-bottom:1px solid var(--vkp-line);padding:14px 16px;
    }
    .vkp tbody tr:last-child{border-bottom:0;}
    .vkp tbody td{border:0;padding:0;}
    .vkp tbody tr:hover td{background:transparent;}
    .vkp-idx{display:none !important;}
    .vkp-code{width:auto;margin-bottom:4px;}
    .vkp-name{min-width:0;margin-bottom:10px;}
    .vkp-num{
      text-align:left;display:flex !important;justify-content:space-between;
      width:100%;padding:4px 0 !important;border-top:1px dashed var(--vkp-line) !important;
    }
    .vkp-num::before{
      content:attr(data-label);font-size:.8rem;color:var(--vkp-muted);
      font-weight:600;text-transform:none;letter-spacing:0;
    }
  }

  /* ---------- Друк ---------- */
  @media print{
    .vkp-toolbar,.vkp-tabs,.vkp-hero-stats{display:none !important;}
    .vkp-hero{background:none !important;color:#000;padding:0 0 12px;}
    .vkp-hero h2,.vkp-hero p{color:#000 !important;}
    .vkp-hero::before,.vkp-hero::after{display:none;}
    .vkp-section{break-inside:auto;border-color:#999;}
    .vkp-section-head{background:#fff;}
    .vkp tbody tr{break-inside:avoid;}
    .vkp{font-size:11pt;}
  }