/* =====================================================================
   Company catalog (CompanyOverview) — integrated from versted-site mockup.
   ALL selectors are scoped under .co to isolate from the rest of the site.
   ===================================================================== */
/* =====================================================================
   LIGA360 — Каталог компаній України
   Static markup (HTML / CSS / JS) reconstructed from Figma design.
   Design tokens are taken 1:1 from the Figma variable collection.
   ===================================================================== */

/* Design tokens винесені у var-companies.css (підключається глобально, до цього файлу) */


/* ----------------------------- Reset -------------------------------- */


.co .container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 46px;
}






@media (max-width: 1024px) { .co .container { padding: 0 20px; } }

.co .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----------------------------- Buttons ------------------------------ */
.co .btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  font-weight: 700; font-size: 14px; line-height: 20px;
  letter-spacing: .4px; text-transform: uppercase;
  border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 14px 24px; transition: .18s ease;
  white-space: nowrap;
}
.co .btn--primary { background: var(--c-accent); color: #fff; }
.co .btn--primary:hover { background: #6256d8; }
.co .btn--dark:hover { background: var(--c-cta-hover); }
.co .btn--ghost { background: #fff; color: var(--c-text); border-color: var(--c-border); }
.co .btn--ghost:hover { background: var(--c-surface-3); }
.co .btn--sm { padding: 10px 18px; }

/* ============================ LAYOUT ================================ */
.co main { padding-bottom: 64px; }

body {
    background: #F5F5F5;
}
.co .page {
    padding: 0 48px;
    max-width: 1920px;
    margin: 0 auto;
}

/* H1 сторінки (.co .page-title) переїхав у ~/css/page-title.css:
   його виводять і сторінки списку/пошуку, куди цей файл не підключається. */
.co .section { margin-top: 24px; }

/* ------------------------ Collapsible section ----------------------- */
.co .panel {
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-xl); overflow: hidden; margin-top: 24px;
  padding: 0 !important;
}
.co .panel__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.co .panel--kved .panel__head,
.co .panel--opf .panel__head,
.co .panel--regions .panel__head,
.co .panel--cities .panel__head {
    background: #fff;
}

    .co .panel__head h2 {
        font-size: 20px;
        font-weight: 600;
    }
.co .panel__head .toggle {
  margin-left: auto; width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid var(--c-border); background: #fff;
  display: grid; place-items: center; color: var(--c-subtle);
  transition: transform .2s, background .15s;
}
.co .panel__head .toggle svg { width: 18px; height: 18px; }
.co .panel.is-collapsed .panel__head .toggle { transform: rotate(180deg); }
.co .panel__body {
    padding: 0 24px 24px;
}

.co .panel--regions .panel__body {
    padding: 20px;
}

.co .panel--cities .panel__body {
    padding: 20px;
}

.co .panel.is-collapsed .panel__body {
    display: none;
}

/* transparent variant — shows page background through (e.g. "Переваги нашого продукту") */
.co .panel--transparent { background: transparent; border-color: transparent; }
.co .panel--transparent .panel__head { padding-left: 0; padding-right: 0; }
.co .panel--transparent .panel__body { padding-left: 0; padding-right: 0; }

/* КВЕД panel head — matches Figma (node 3397:102216): fire icon + bold title,
   borderless accent chevron, bottom divider under the header block. */

.co .panel--opf {
    margin-bottom: 80px;
}

.co .panel--kved .panel__head,
.co .panel--opf .panel__head {
    align-items: flex-start;
    gap: 8px;
    padding: 20px 20px 12px 20px;
    border-bottom: 1px solid var(--cntnr-border-default);
}
/* left column: title row (icon + heading) stacked over the subtitle */
.co .panel--kved .panel__head-text, .co .panel--opf .panel__head-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.co .panel--kved .panel__title, .co .panel--opf .panel__title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.co .panel--kved .panel__head-text .acc-sub, .co .panel--opf .panel__head-text .acc-sub {
    margin: 0;
}
.co .panel--kved .panel__ico, .co .panel--opf .panel__ico {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(250, 91, 1, .1);
    display: grid;
    place-items: center;
    overflow: hidden;
}
    .co .panel--kved .panel__ico img, .co .panel--opf .panel__ico img {
        width: 27px;
        height: 27px;
        object-fit: cover;
        display: block;
    }
.co .panel--kved .panel__head h2, .co .panel--opf .panel__head h2 {
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: .06px;
    line-height: 24px;
}
.co .panel--kved .toggle, .co .panel--opf .toggle {
  width: 40px; height: 40px; border: none; background: transparent;
  border-radius: var(--r-pill); color: var(--c-accent);
}
    .co .panel--kved .toggle:hover, .co .panel--opf .toggle:hover {
        background: var(--c-surface-3);
    }
    .co .panel--kved .toggle svg, .co .panel--opf .toggle svg {
        width: 22px;
        height: 22px;
    }
.co .panel--kved .panel__body, .co .panel--opf .panel__body {
    padding-top: 0 16px;
    background: rgba(251, 251, 255, 0.50);
}

/* ----------------------- Feature cards grid ------------------------- */
.co .features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.co .feature-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow .18s, transform .18s;
  border-radius: var(--cntnr-corner-Large, 16px);
border: 1px solid var(--cntnr-border-default);
background: var(--cntnr-bg-Transperent-Default, rgba(251, 251, 255, 0.50));
}
.co .feature-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.co .feature-card .ico { width: 28px; height: 28px; color: var(--c-accent); }
.co .feature-card h3 { font-size: 16px; font-weight: 700; }
.co .feature-card p { font-size: 14px; line-height: 20px; color: var(--c-subtle); }

/* --------------------------- Region widget -------------------------- */
/* Карта + 2 стовпці списку — одна grid-сітка. .region-lists = display:contents,
   тож обидві таблиці стають прямими grid-елементами .region-wrap і розкладаються
   через grid-template-areas (map / t1 / t2) на кожному брейкпоінті. */
.co .region-wrap {
  display: grid; gap: 16px 48px; align-items: start;
  grid-template-columns: 600px 1fr 1fr;
  grid-template-areas: "map t1 t2";
}
.co .region-map { grid-area: map; }
.co .region-wrap > .region-lists > .data-table:nth-child(1) { grid-area: t1; }
.co .region-wrap > .region-lists > .data-table:nth-child(2) { grid-area: t2; }
.co .region-map img { width: 100%; height: auto; }
/* map = one absolutely-positioned <svg> per oblast inside a 600x399 stage */
.co .region-map .ua-map { position: relative; width: 100%; aspect-ratio: 600 / 399; }
.co .map-region { position: absolute; pointer-events: none; outline: none; }
.co .map-region svg { width: 100%; height: 100%; display: block; overflow: visible; }
.co .map-region path { pointer-events: auto; cursor: pointer; transition: filter .15s ease; }
.co .map-region:hover path { filter: brightness(.9); }
.co .map-region:focus-visible path { stroke: var(--c-accent); stroke-width: 2; }
.co .map-dot { position: absolute; pointer-events: none; }
.co .map-dot svg { width: 100%; height: 100%; display: block; }
.co .region-lists { display: contents; }
/* region rows are links (same as cities) */
.co .region-lists a.row { cursor: pointer; color: inherit; }
.co .region-lists a.row:hover .nm { text-decoration: underline; }

.co .data-table { width: 100%; font-size: 14px; }
.co .data-table .thead {
  display: grid; align-items: center;
  color: var(--c-subtlest); font-weight: 500; font-size: 13px;
  padding: 0 0 10px; border-bottom: 1px solid var(--c-divider);
}
.co .data-table .row {
  display: grid; align-items: center; padding: 9px 0;
  border-bottom: 1px solid #f0f0f6;
}
.co .data-table .row:hover { background: var(--c-surface-3); }
.co .region-lists .data-table .thead, .co .region-lists .data-table .row { grid-template-columns: 1fr 100px 100px; }
.co .cell-name { display: flex; align-items: center; gap: 8px; color: var(--c-accent); min-width: 0; overflow: hidden; }
.co .cell-name .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v-25); flex: 0 0 auto; }
.co .cell-name .nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* dotted leader — evenly spaced round dots sitting near the text baseline */
.co .leader {
  flex: 1 1 auto; min-width: 8px; align-self: center; height: 16px; margin: 0 4px;
  background-image: radial-gradient(circle, #c2c2d6 1.1px, transparent 1.4px);
  background-repeat: repeat-x; background-size: 5px 5px; background-position: left bottom 2px;
}
.co .cell-num { text-align: right; color: var(--c-text); font-variant-numeric: tabular-nums; padding: 0;}
.co .data-table .thead .cell-num { color: var(--c-subtlest); }

/* --------------------------- Cities widget -------------------------- */
/* Міста: 6 під-таблиць у сітці 3/2/1 колонки. Вертикального гепу немає — під-таблиці
   в одній колонці читаються як суцільний список; заголовок лишаємо лише в тих, що
   стоять зверху колонки (решту ховаємо через :nth-child нижче). */
.co .cities-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 48px; }
/* десктоп = 3 колонки → зверху рядок 1 (таблиці 1–3), тому ховаємо заголовки 4–6 */
.co .cities-grid .data-table:nth-child(n+4) .thead { display: none; }
.co .cities-grid .data-table .thead, .co .cities-grid .data-table .row { grid-template-columns: 1fr auto auto; gap: 20px; }
.co .cities-grid .cell-name { color: var(--c-accent); }
/* whole city row is a link (name → counts) */
.co .cities-grid a.row { cursor: pointer; color: inherit; }
.co .cities-grid a.row:hover .nm { text-decoration: underline; }

/* --------------------------- Webinars strip ------------------------- */
.co .webinars { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; align-items: stretch; }
.co .webinar-intro {
  position: relative; overflow: hidden;
  border: 1px solid var(--c-border); border-radius: var(--r-xl);
  background: linear-gradient(180deg, #fbfaff, #f3f1ff);
  padding: 28px 24px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 14px;
}
.co .webinar-intro .lock { width: 40px; height: 40px; color: var(--c-accent); opacity: .85; }
.co .webinar-intro h3 { font-size: 18px; font-weight: 700; }
.co .webinar-intro p { font-size: 14px; color: var(--c-subtle); }
.co .webinar-card {
  border-radius: var(--r-xl); overflow: hidden; color: #fff;
  background: linear-gradient(150deg, #7a4fd6 0%, #6b46cf 40%, #5b39bd 100%);
  display: flex; flex-direction: column;
}
.co .webinar-card__media { position: relative; padding: 18px; min-height: 150px; overflow: hidden; }
.co .webinar-card__media::after {
  content: ""; position: absolute; right: -40px; top: -30px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%);
}
.co .webinar-badge {
  display: inline-flex; flex-direction: column; line-height: 1;
  font-weight: 800; font-size: 16px; letter-spacing: .5px;
  background: rgba(255,255,255,.12); padding: 6px 8px; border-radius: 6px;
}
.co .webinar-badge small { font-size: 7px; letter-spacing: 1px; opacity: .8; margin-top: 3px; }
.co .webinar-author {
  position: absolute; right: 14px; top: 16px; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.9); color: var(--c-text); padding: 5px 10px 5px 5px;
  border-radius: var(--r-pill); font-size: 11px;
}
.co .webinar-author img, .co .webinar-author .ava {
  width: 26px; height: 26px; border-radius: 50%; background: #d9d3f5;
}
.co .webinar-card__media .tag { position: absolute; left: 18px; bottom: 40px; font-size: 10px; opacity: .85; }
.co .webinar-card__media .lead { position: absolute; left: 18px; right: 18px; bottom: 16px; font-size: 12px; font-weight: 700; }
.co .webinar-card__foot { background: #fff; color: var(--c-text); padding: 14px 16px; flex: 1; }
.co .webinar-card__foot h4 { font-size: 14px; font-weight: 700; line-height: 18px; }
.co .webinar-card__meta { display: flex; gap: 10px; align-items: center; margin-top: 12px; font-size: 12px; color: var(--c-subtlest); }

/* ------------------------ KVED / SIC accordions --------------------- */
.co .acc-sub { font-size: 14px; color: var(--c-subtle); margin: -8px 0 16px; }
.co .acc-sub + .acc-sub { margin-top: 12px; }
.co .acc-item { border-bottom: 1px solid var(--c-border-soft); }
.co .acc-head {
  width: 100%; display: flex; align-items: center; gap: 16px;
  background: none; border: none; text-align: left;
  padding: 18px 0px; color: var(--c-text);
  cursor: pointer;
}
    .co .acc-head .code {
        font-size: 16px;
        font-weight: 700;
        color: var(--c-accent);
        min-width: 28px;
        display: flex;
        width: 40px;
        height: 40px;
        padding: var(--space-075);
        justify-content: center;
        align-items: center;
        border-radius: var(--cntnr-corner-Normal);
        border: 1px solid var(--cntnr-border-default);
        background: var(--cntnr-bg-Transperent-Default, rgba(251, 251, 255, 0.50));
    }
.co .acc-head .title { font-size: 16px; font-weight: 600; flex: 1; }
.co .acc-head .more {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  color: var(--c-subtle);
}
.co .acc-head .more svg { width: 16px; height: 16px; transition: transform .2s; }
.co .acc-item.is-open .acc-head .more svg { transform: rotate(180deg); }
.co .acc-body { display: none; padding: 0 8px 22px; }
.co .acc-item.is-open .acc-body { display: block; }

.co .kved-table { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 64px; }
.co .kved-col .thead, .co .kved-col .row { display: grid; grid-template-columns: 56px 1fr 90px 70px; align-items: center; }
.co .kved-col .thead { color: var(--c-subtlest); font-size: 13px; padding: 6px 0; }
.co .kved-col .row { padding: 8px 0; font-size: 14px; border-top: 1px solid #f3f3f8; }
.co .kved-col .row .rcode { color: var(--c-text); }
.co .kved-col .row .rname { color: var(--c-accent); display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.co .kved-col .row .rname .nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co a.rname { cursor: pointer; text-decoration: none; }
.co a.rname:hover .nm { text-decoration: underline; }
/* .rname .leader inherits the shared .leader dotted style above */
/* number columns: header + values share the exact same alignment so cells line up */
.co .kved-col .thead .rnum,
.co .kved-col .row .rnum { text-align: left; color: var(--c-text); font-variant-numeric: tabular-nums; }
.co .kved-col .row .rnum {color: var(--c-accent); }
/* clickable counts (Компанії / ФОП) — link-styled like the name */
.co a.rnum { cursor: pointer; text-decoration: none; color: var(--c-accent); }
.co a.rnum:hover { text-decoration: underline; }

/* single "Кількість" variant (SIC) */
.co .kved-col.kved-col--single .thead, .co .kved-col.kved-col--single .row { grid-template-columns: 56px 1fr 80px; }

.co .acc-foot { display: flex; justify-content: center; padding-top: 18px; }
.co .acc-foot button {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; color: var(--c-text);
  font-size: 13px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
}
.co .acc-foot .count {
  background: var(--c-primary-200); color: var(--c-accent-dark);
  border-radius: var(--r-pill); padding: 1px 8px; font-size: 12px;
}

/* ============================================================
   FAQ
   Стилі блоку переїхали в ~/css/faq.css: сам блок тепер рендериться
   один раз у _Layout (після SEO-тексту) і потрібен на сторінках, куди цей
   файл не підключається — списках, пошуку, пагінації.
   ============================================================ */
/* ============================ Responsive ===========================
   Breakpoints mirror the Figma set: 1280 (full desktop) · 1024 · 768 · 375.
   ≥1025px keeps the full desktop layout (full nav, map beside lists, 3-col).
   =================================================================== */

/* 1025–1440 — карта зверху-зліва, один стовпець списку праворуч від неї (t2, на всю
   висоту), другий (t1) — під картою. Дві рівні колонки, чисто через grid-areas. */
@media (min-width: 1025px) and (max-width: 1440px) {
  .co .region-wrap {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "map t2"
      "t1  t2";
  }
}

/* ---- ≤1024 — compact header (burger + buttons), map stacks, cities 2-col ---- */
@media (max-width: 1024px) {
  .co .container { padding: 0 32px; }
    .co .panel--kved .kved-col:nth-child(n+2) .thead,
    .co .panel--opf .kved-col:nth-child(n+2) .thead {
        display: none;
    }
    .co .kved-table {
        grid-template-columns: 1fr;
        gap: 0 48px;
    }
  .co .site-header__inner { height: 56px; gap: 14px; }
  .co .logo { font-size: 20px; }
  .co .main-nav { display: none; }
  .co .header-actions { display: flex; margin-left: auto; gap: 8px; }
  .co .header-actions .btn { padding: 7px 16px; font-size: 13px; }
  .co .nav-toggle {
    display: grid; place-items: center; margin-left: 4px;
    width: 40px; height: 32px; border: 1px solid var(--c-border);
    border-radius: var(--r-pill); background: #fff;
  }

  /* regions: карта зверху (на всю ширину, по центру), 2 стовпці списку під нею */
  .co .region-wrap {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "map map"
      "t1  t2";
    gap: 24px 48px;
  }
  .co .region-map { justify-self: center; width: 100%; max-width: 600px; }

  /* ≤1024 = 2 колонки → зверху таблиці 1–2, ховаємо заголовки 3–6 */
  .co .cities-grid { grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
  .co .cities-grid .data-table:nth-child(n+3) .thead { display: none; }
  .co .webinars { grid-template-columns: repeat(2, 1fr); }

  /* footer: brand on top, link columns auto-flow */
  .co .site-footer__inner { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px 24px; }
  .co .footer-brand { grid-column: 1 / -1; }
}

/* ---- ≤900 — feature cards 3 → 2 ---- */
@media (max-width: 900px) {
  .co .features-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- ≤768 — tablet portrait: tighter gutters, single-column tables ---- */
@media (max-width: 768px) {
  .co .container { padding: 0 16px; }
  /* КВЕД/ОПФ: 2 колонки розділів схлопуються в одну (gap 0 → суцільний список),
     тому заголовок "Розділ | Назва розділу | Кількість" лишаємо лише в 1-й колонці,
     а в 2-й (яка тепер стоїть під нею) ховаємо — інакше він показувався посередині. */
  
  .co .panel__head { padding: 18px 16px; }
  .co .panel__body { padding: 0 16px 20px; }
  .co .page {
      padding: 24px 16px 0;
  }
}

/* ---- ≤600 — mobile: single column, stacked banner card ---- */
@media (max-width: 600px) {
  .co .features-grid { grid-template-columns: 1fr; }
  /* міста лишаються 2-колонковими аж до 375 — 1 колонка нижче (див. @media ≤374) */
  /* регіони: карта зверху, обидві таблиці одна під одною в 1 колонку.
     2-га таблиця стає під 1-ю → ховаємо її заголовок, щоб "Область | Компанії | ФОП"
     не з'являвся посередині (row-gap 0 → суцільний список) */
  .co .region-wrap {
    grid-template-columns: 1fr;
    grid-template-areas: "map" "t1" "t2";
    row-gap: 0;
  }
  .co .region-lists .data-table:nth-child(n+2) .thead { display: none; }
  .co .webinars { grid-template-columns: 1fr; }

  .co .panel__head h2, .co .search-card__head h2 { font-size: 18px; }

  /* give the name column more room so oblast/city names don't truncate */
  .co .region-lists .data-table .thead, .co .region-lists .data-table .row { grid-template-columns: minmax(0, 1fr) 74px 64px; }
  /* вузькі 2 колонки: компактні числові стовпці, назва обрізається трьома крапками */
  .co .cities-grid .data-table .thead, .co .cities-grid .data-table .row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .co .data-table .cell-num { font-size: 13px; }

  /* compact header buttons */
  .co .site-header__inner { gap: 6px; }
  .co .logo { font-size: 18px; }
  .co .header-actions { gap: 6px; }
  .co .header-actions .btn { padding: 6px 10px; font-size: 11px; letter-spacing: .2px; }
  .co .nav-toggle { width: 34px; margin-left: 2px; }

  /* search stacks */
  .co .search-row { flex-direction: column; }
  .co .search-input, .co .search-card .btn--dark { width: 100%; height: 48px; }
  .co .search-note { padding: 18px 16px; }

  /* promo banner → vertical rounded card */
  .co .promo-banner {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 14px; padding: 20px;
    border-bottom: none;
  }
  .co .promo-banner__flower { display: none; }
  .co .pb-arrow { position: absolute; top: 22px; width: 32px; height: 32px; }
  .co .pb-arrow--prev { right: 60px; }
  .co .pb-arrow--next { right: 20px; }
  .co .pb-content { flex-direction: column; align-items: stretch; gap: 14px; }
  .co .pb-logo { width: 56px; height: 56px; }
  .co .pb-bot { width: 36px; height: 36px; }
  .co .pb-text { gap: 10px; }
  .co .pb-cta { width: 100%; height: 48px; }
}

/* ---- <375 — міста в 1 колонку (заголовок лише на першій під-таблиці) ---- */
@media (max-width: 600px) {
  .co .cities-grid { grid-template-columns: 1fr; }
  .co .cities-grid .data-table:nth-child(n+2) .thead { display: none; }
}

/* ---- ≤600 — КВЕД / ОПФ: таблиця розділів → вертикальні картки (макет 375px) ---- */
@media (max-width: 600px) {
  /* колонки в один стовпець, картки-рядки одна під одною */
  .co .panel--kved .kved-table,
  .co .panel--opf  .kved-table { grid-template-columns: 1fr; gap: 12px; }
  .co .panel--kved .kved-col,
  .co .panel--opf  .kved-col { display: flex; flex-direction: column; gap: 12px; }

  /* шапку таблиці ховаємо — підписи колонок переносимо в самі рядки */
  .co .panel--kved .kved-col .thead,
  .co .panel--opf  .kved-col .thead { display: none; }

  /* у хедері секції лишаємо тільки шеврон (без слова "Розгорнути") */
  .co .panel--kved .acc-head .more-txt,
  .co .panel--opf  .acc-head .more-txt { display: none; }

  /* рядок = картка: код зверху, назва (з переносом), потім лічильники з підписами.
     flex-wrap: rcode/rname займають цілий рядок, лічильники стають в один ряд нижче. */
  .co .panel--kved .kved-col .row,
  .co .panel--opf  .kved-col .row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 28px;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    background: rgba(251, 251, 255, .6);
  }

  /* код розділу/форми з підписом ("Розділ 01" / "Код 110") — власний рядок */
  .co .panel--kved .kved-col .row .rcode,
  .co .panel--opf  .kved-col .row .rcode { flex: 0 0 100%; font-size: 13px; color: var(--c-text); }
  .co .panel--kved .kved-col .row .rcode::before,
  .co .panel--opf  .kved-col .row .rcode::before { content: attr(data-label) " "; color: var(--c-subtlest); font-weight: 400; }

  /* назва — цілий рядок, з переносом (не обрізати) */
  .co .panel--kved .kved-col .row .rname,
  .co .panel--opf  .kved-col .row .rname { flex: 0 0 100%; min-width: 0; }
  .co .panel--kved .kved-col .row .rname .nm,
  .co .panel--opf  .kved-col .row .rname .nm { white-space: normal; overflow: visible; text-overflow: clip; }
  .co .panel--kved .kved-col .row .leader,
  .co .panel--opf  .kved-col .row .leader { display: none; }

  /* лічильники: сірий підпис + акцентне число; ФОП ліворуч, Компанії праворуч */
  .co .panel--kved .kved-col .row .rnum,
  .co .panel--opf  .kved-col .row .rnum { flex: 0 0 auto; font-size: 14px; }
  .co .panel--kved .kved-col .row .rnum::before,
  .co .panel--opf  .kved-col .row .rnum::before { content: attr(data-label) " "; color: var(--c-subtlest); font-weight: 400; }
  .co .panel--kved .kved-col .row .rnum--fop       { order: 1; }
  .co .panel--kved .kved-col .row .rnum--companies { order: 2; }
}

/* ===================================================================
   Integration overrides (.page container model + facet tables).
   =================================================================== */
.co { background: transparent; }
.co .container { max-width: none; padding: 0; }

/* regions/KVED facet tables: name | single real count */
.co .facet-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 48px; }
.co .facet-lists a.row { cursor: pointer; color: inherit; }
.co .facet-lists a.row:hover .nm { text-decoration: underline; }
.co .facet-empty { color: var(--c-subtlest); font-size: 14px; padding: 8px 0; }
.co .facet-lists .data-table .thead,
.co .facet-lists .data-table .row,
.co .region-lists .data-table .thead,
.co .region-lists .data-table .row { grid-template-columns: minmax(0,1fr) auto auto; gap: 20px; }
@media (max-width: 600px){
  .co .facet-lists { grid-template-columns: 1fr; }
  .co .facet-lists .data-table .thead,
  .co .facet-lists .data-table .row,
  .co .region-lists .data-table .thead,
  .co .region-lists .data-table .row { grid-template-columns: minmax(0,1fr) auto auto; }
}


@media (max-width: 375px) {
    .co .panel--opf {
        margin-bottom: 40px;
    }
}