/* ═══════════════════════════════════════════════════════════════
   site.css — доробки поверх `style.css`.

   ⚠️ ЧОМУ ОКРЕМИЙ ФАЙЛ: `style.css` перезбирається скриптом із мокапу
   квіза (`quiz.html`). Усе, дописане туди руками, зникає при наступному
   перезбиранні — мовчки, без жодної помилки. Тому все, що не походить
   із мокапу (футер, форма контактів), живе тут.

   Вантажиться на КОЖНІЙ сторінці, після `pivona`.
   ═══════════════════════════════════════════════════════════════ */

/* ── Футер: три ряди замість одного ──────────────────────────────
   Головні посилання й соцмережі відділені від юридичних: у футері їх
   шукають очима, а не читають підряд, тож «Про Pivona» поруч із
   «Публічною офертою» просто губиться. */
.ft-links--main{margin-top:20px}
.ft-links--main a{font-size:15px; color:#F2E9DA; font-weight:500}

.ft-social{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-top:14px}
.ft-social a{
  display:inline-flex; align-items:center; gap:7px;
  color:rgba(242,233,218,.82); font-size:13.5px; text-decoration:none;
  border:1px solid rgba(242,233,218,.22); border-radius:999px;
  padding:6px 14px; transition:.15s;
}
.ft-social a:hover{color:#F2E9DA; border-color:rgba(242,233,218,.5); background:rgba(242,233,218,.06)}
/* Іконка Instagram намальована рамкою, а не картинкою: один зайвий
   мережевий запит у футері не вартий 16 пікселів. */
.ft-social a::before{
  content:''; width:13px; height:13px; flex:none;
  border:1.6px solid currentColor; border-radius:4px;
  box-shadow:inset 0 0 0 1.6px transparent;
  background:
    radial-gradient(circle at 50% 50%, currentColor 0 1.6px, transparent 1.9px),
    radial-gradient(circle at 78% 22%, currentColor 0 .9px, transparent 1.2px);
}

@media (max-width:480px){
  .ft-links--main a{font-size:14px}
  .ft-social{gap:8px 12px}
  .ft-social a{font-size:12.5px; padding:5px 12px}
}

/* ── Сторінка «Контакти» ─────────────────────────────────────────
   Токени беруться зі style.css (--bg / --ink / --accent / --rose-ink):
   свою палітру тут заводити не можна — розійдеться з рештою сайту. */
.pv-contacts{background:var(--bg); color:var(--ink)}
.pv-c-in{max-width:1080px; margin:0 auto; padding:0 24px}
.pv-c-sec{padding:56px 0}
.pv-c-sec--paper{background:rgba(255,255,255,.42); border-top:1px solid rgba(38,24,21,.08)}

.pv-c-hero{padding:64px 0 8px}
.pv-c-hero-in{display:flex; align-items:center; justify-content:space-between; gap:32px}
.pv-c-hero-text{flex:1; min-width:0}
.pv-c-mascot{width:min(260px,26vw); height:auto; flex:none}
.pv-c-kicker{display:inline-block; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink,#5E6E04); background:var(--accent-soft,#EAF1B6);
  padding:6px 12px; border-radius:999px; margin-bottom:18px}
.pv-c-h1{font-family:var(--font-display); font-size:clamp(30px,5.2vw,50px); line-height:1.12; margin:0}
.pv-c-h2{font-family:var(--font-display); font-size:22px; margin:0 0 18px}
.pv-c-lead{font-size:18px; line-height:1.55; max-width:56ch; margin:16px 0 0; color:rgba(38,24,21,.82)}
.pv-c-lead--sm{font-size:16px}

.pv-c-grid{display:grid; grid-template-columns:1.35fr .85fr; gap:44px; align-items:start}

/* Права колонка їде разом із формою: вона вдвічі коротша (455px проти 742px),
   тож у нижній третині форми прямі контакти просто зникали б з очей — саме
   там, де людина вагається, писати чи ні.
   57px — висота липкої шапки сайту; без цього відступу картки заїжджали б під неї.
   `align-items:start` вище обов'язковий: при значенні за замовчуванням (stretch)
   колонка розтягується на всю висоту рядка й sticky не має куди рухатись. */
.pv-c-side{position:sticky; top:81px}

/* ── Форма ── */
.pv-field{margin-bottom:18px; display:flex; flex-direction:column; gap:7px}
.pv-field label{font-size:14.5px; font-weight:500}
.pv-field input, .pv-field select, .pv-field textarea{
  font:inherit; font-size:16px; /* НЕ менше 16px: iOS Safari зумить сторінку на фокусі */
  color:var(--ink); background:#fff;
  border:1px solid rgba(38,24,21,.18); border-radius:12px; padding:12px 14px;
  transition:border-color .15s, box-shadow .15s;
}
.pv-field textarea{resize:vertical; min-height:120px}
.pv-field input:focus, .pv-field select:focus, .pv-field textarea:focus{
  outline:none; border-color:var(--accent,#9FB80E); box-shadow:0 0 0 3px var(--accent-soft,#EAF1B6);
}
.pv-hint{font-size:13px; color:rgba(38,24,21,.55)}

/* Honeypot: прибрано з потоку, але НЕ display:none — частина ботів
   свідомо пропускає приховані поля, а зсунуте за екран заповнює. */
.pv-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.pv-consent{display:flex; gap:10px; align-items:flex-start; font-size:14px;
  line-height:1.5; color:rgba(38,24,21,.78); margin:6px 0 20px}
.pv-consent input{margin-top:3px; flex:none; width:17px; height:17px; accent-color:var(--accent,#9FB80E)}
.pv-consent a{color:var(--rose-ink,#9E574D)}

.pv-btn{font:inherit; font-size:16px; font-weight:600; cursor:pointer;
  background:var(--ink); color:#FBF1DD; border:0; border-radius:999px;
  padding:14px 30px; min-height:48px; transition:.15s}
.pv-btn:hover{transform:translateY(-1px)}
.pv-btn:disabled{opacity:.55; cursor:default; transform:none}

.pv-form-status{margin:14px 0 0; font-size:14.5px; min-height:1.2em}
.pv-form-status.is-ok{color:var(--accent-ink,#5E6E04); font-weight:500}
.pv-form-status.is-err{color:var(--rose-ink,#9E574D)}
/* Після успіху поля ховаємо: лишати заповнену форму поруч зі словом
   «дякую» — запрошення надіслати те саме вдруге. */
.pv-form.is-sent .pv-field,
.pv-form.is-sent .pv-consent,
.pv-form.is-sent .pv-btn{display:none}

/* ── Картки прямих каналів ── */
.pv-c-card{display:block; text-decoration:none; color:inherit;
  background:#fff; border:1px solid rgba(38,24,21,.1); border-radius:14px;
  padding:14px 16px; margin-bottom:10px; transition:.15s}
.pv-c-card:hover{border-color:var(--accent,#9FB80E); transform:translateY(-1px)}
.pv-c-card-t{display:block; font-weight:600; font-size:15.5px}
.pv-c-card-s{display:block; font-size:13.5px; color:rgba(38,24,21,.6); margin-top:3px}
.pv-c-note{font-size:13.5px; color:rgba(38,24,21,.6); margin-top:14px}

/* ── Реквізити ── */
.pv-c-req{margin:22px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:12px 32px}
.pv-c-req > div{display:flex; flex-direction:column; gap:2px;
  padding-bottom:10px; border-bottom:1px solid rgba(38,24,21,.08)}
.pv-c-req dt{font-size:13px; color:rgba(38,24,21,.55)}
.pv-c-req dd{margin:0; font-size:15.5px}
.pv-c-docs{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:24px}
.pv-c-docs a{font-size:14px; color:var(--rose-ink,#9E574D)}

@media (max-width:860px){
  .pv-c-grid{grid-template-columns:1fr; gap:34px}
  /* У стовпчик колонки йдуть одна за одною — липкість тут не має сенсу
     і лише перекривала б вміст. */
  .pv-c-side{position:static; top:auto}
  .pv-c-hero-in{flex-direction:column-reverse; align-items:flex-start; gap:14px}
  .pv-c-mascot{width:132px; align-self:center}
  .pv-c-req{grid-template-columns:1fr}
  .pv-c-hero{padding:44px 0 4px}
  .pv-c-sec{padding:40px 0}
  .pv-c-in{padding:0 18px}
}

/* ── Часті питання ───────────────────────────────────────────────
   На <details>, не на JS-акордеоні: працює без скриптів, доступне з
   клавіатури й — головне — текст закритих відповідей лишається в DOM.
   Якби відповіді підвантажувались, для пошуку й AI сторінка була б
   порожня саме там, де в неї найцінніший вміст. */
.pv-faq{padding:56px 0; background:rgba(255,255,255,.42); border-top:1px solid rgba(38,24,21,.08)}
.pv-faq-in{max-width:820px; margin:0 auto; padding:0 24px}
.pv-faq-h{font-family:var(--font-display); font-size:clamp(24px,3.4vw,32px); margin:0 0 24px; color:var(--ink)}
.pv-faq-list{display:flex; flex-direction:column; gap:10px}

.pv-faq-item{background:#fff; border:1px solid rgba(38,24,21,.1); border-radius:14px; overflow:hidden}
.pv-faq-item[open]{border-color:rgba(159,184,14,.5)}

.pv-faq-q{cursor:pointer; list-style:none; padding:16px 46px 16px 18px; position:relative;
  font-size:16.5px; font-weight:600; line-height:1.4; color:var(--ink)}
.pv-faq-q::-webkit-details-marker{display:none}
/* Знак розгортання малюємо самі: типовий трикутник браузера не можна
   ні пересунути, ні вирівняти по правому краю. */
.pv-faq-q::after{content:''; position:absolute; right:18px; top:50%;
  width:9px; height:9px; margin-top:-6px; transform:rotate(45deg);
  border-right:2px solid var(--rose-ink,#9E574D); border-bottom:2px solid var(--rose-ink,#9E574D);
  transition:transform .18s}
.pv-faq-item[open] .pv-faq-q::after{transform:rotate(-135deg); margin-top:-2px}
.pv-faq-q:hover{background:rgba(234,241,182,.35)}
.pv-faq-q:focus-visible{outline:2px solid var(--accent,#9FB80E); outline-offset:-2px}

.pv-faq-a{padding:0 18px 16px}
.pv-faq-a p{margin:0; font-size:16px; line-height:1.6; color:rgba(38,24,21,.82)}

@media (max-width:640px){
  .pv-faq{padding:40px 0}
  .pv-faq-in{padding:0 18px}
  .pv-faq-q{font-size:15.5px; padding:14px 42px 14px 15px}
  .pv-faq-a{padding:0 15px 14px}
  .pv-faq-a p{font-size:15.5px}
}

/* ── Блог ────────────────────────────────────────────────────────
   Сітка авто-заповненням, а не фіксованими 3 колонками: рубрика з
   двома матеріалами не має виглядати як зламана сітка з дірою. */
.pv-blog, .pv-post{background:var(--bg); color:var(--ink)}
.pv-blog-in, .pv-post-in{max-width:1080px; margin:0 auto; padding:0 24px}
.pv-blog-hero{padding:56px 0 8px}
.pv-blog-h1{font-family:var(--font-display); font-size:clamp(30px,5vw,46px); margin:0}
.pv-blog-lead{font-size:17.5px; line-height:1.55; max-width:60ch; margin:14px 0 0; color:rgba(38,24,21,.8)}
.pv-blog-body{padding:32px 0 64px}
.pv-blog-empty{font-size:17px; color:rgba(38,24,21,.75)}

.pv-blog-cats{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.pv-chip{font-size:14px; text-decoration:none; color:var(--ink);
  border:1px solid rgba(38,24,21,.16); border-radius:999px; padding:7px 15px; transition:.15s}
.pv-chip:hover{border-color:var(--accent,#9FB80E)}
.pv-chip.is-on{background:var(--ink); color:#FBF1DD; border-color:var(--ink)}

.pv-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px}
.pv-card{background:#fff; border:1px solid rgba(38,24,21,.1); border-radius:16px;
  overflow:hidden; display:flex; flex-direction:column; transition:.15s}
.pv-card:hover{border-color:var(--accent,#9FB80E); transform:translateY(-2px)}
.pv-card-img{display:block; aspect-ratio:16/9; overflow:hidden; background:var(--accent-soft,#EAF1B6)}
.pv-card-img img{width:100%; height:100%; object-fit:cover; display:block}
.pv-card-body{padding:18px; display:flex; flex-direction:column; gap:9px; flex:1}
.pv-card-meta{margin:0; font-size:13px; color:rgba(38,24,21,.55); display:flex; flex-wrap:wrap; gap:7px; align-items:center}
.pv-card-cat{color:var(--accent-ink,#5E6E04); text-decoration:none; font-weight:600}
.pv-card-h{font-family:var(--font-display); font-size:19.5px; line-height:1.3; margin:0}
.pv-card-h a{color:inherit; text-decoration:none}
.pv-card-h a:hover{color:var(--rose-ink,#9E574D)}
.pv-card-x{margin:0; font-size:15px; line-height:1.55; color:rgba(38,24,21,.72); flex:1}
.pv-card-more{font-size:14.5px; font-weight:600; color:var(--rose-ink,#9E574D); text-decoration:none}

.pv-pager{margin-top:36px}
.pv-pager .nav-links{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.pv-pager a, .pv-pager .current{padding:9px 15px; border-radius:999px; text-decoration:none;
  font-size:14.5px; border:1px solid rgba(38,24,21,.16); color:var(--ink)}
.pv-pager .current{background:var(--ink); color:#FBF1DD; border-color:var(--ink)}

/* ── Стаття ── */
.pv-post-head{padding:44px 0 0}
.pv-post-head .pv-post-in, .pv-post-body .pv-post-in{max-width:760px}
.pv-crumbs{display:flex; gap:8px; font-size:13.5px; color:rgba(38,24,21,.6); margin-bottom:18px}
.pv-crumbs a{color:inherit}
.pv-post-h1{font-family:var(--font-display); font-size:clamp(28px,4.6vw,42px); line-height:1.15; margin:0}
.pv-post-meta{margin:14px 0 0; font-size:13.5px; color:rgba(38,24,21,.55);
  display:flex; flex-wrap:wrap; gap:7px; align-items:center}
.pv-post-cover{padding:26px 0 0}
.pv-post-cover .pv-post-in{max-width:900px}
.pv-post-cover img{width:100%; height:auto; border-radius:16px; display:block}

/* Міра рядка ~68 символів: довший рядок втомлює на довгому тексті. */
.pv-post-body{padding:28px 0 56px}
.pv-post-body p, .pv-post-body li{font-size:17.5px; line-height:1.7; color:rgba(38,24,21,.88)}
.pv-post-body h2{font-family:var(--font-display); font-size:26px; margin:38px 0 14px}
.pv-post-body h3{font-family:var(--font-display); font-size:21px; margin:30px 0 12px}
.pv-post-body a{color:var(--rose-ink,#9E574D)}
.pv-post-body img{max-width:100%; height:auto; border-radius:14px}
.pv-post-body blockquote{margin:26px 0; padding:4px 0 4px 20px;
  border-left:3px solid var(--accent,#9FB80E); color:rgba(38,24,21,.78); font-style:italic}
.pv-post-body ul, .pv-post-body ol{padding-left:22px}
.pv-post-body code{background:rgba(38,24,21,.06); padding:2px 6px; border-radius:6px; font-size:15px}
.pv-post-body strong{font-weight:600; color:var(--ink)}
.pv-post-body li{margin:6px 0}
.pv-post-body hr{border:0; border-top:1px solid rgba(38,24,21,.12); margin:36px 0}

/* Таблиця. Ширина колонок від вмісту, контейнер зі скролом.
   У статтях є таблиці на 4 колонки з датами — на 360px вони не влазять
   НІКОЛИ. Без обгортки таблиця розсовує <body>, і горизонтально їде вся
   сторінка, а не таблиця; тому скролиться саме контейнер. Картками не
   переробляємо: тут колонки «період → сума → дедлайн» читаються рядком,
   і розбиття на картки ламає саме порівняння, заради якого таблиця й є. */
.pv-table{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:26px 0;
  border:1px solid rgba(38,24,21,.12); border-radius:14px; background:#fff}
.pv-table table{border-collapse:collapse; width:100%; min-width:min(560px,100%)}
.pv-table th, .pv-table td{padding:12px 16px; text-align:left; font-size:16px; line-height:1.5;
  border-bottom:1px solid rgba(38,24,21,.08); vertical-align:top}
.pv-table thead th{font:600 13px var(--font-sans); letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted,#9A8470); background:var(--surface-2,#FBF4E6); white-space:nowrap}
.pv-table tbody tr:last-child td{border-bottom:0}

/* Чекліст. Своя галочка замість disabled-чекбокса: вимкнений елемент
   керування читається як зламаний інтерфейс, а не як пункт списку. */
.pv-post-body .pv-check{list-style:none; padding-left:0; margin:22px 0;
  display:flex; flex-direction:column; gap:2px}
/* Рядок будує <label>, а не <li>: саме його ставить pandoc навколо
   пункту чеклиста. Флекс на <li> лишив би label одним інлайн-блоком —
   і текст ішов би ПІД галочку, а не поруч. */
.pv-post-body .pv-check li{padding:11px 14px; background:#fff;
  border:1px solid rgba(38,24,21,.1); border-radius:12px; margin:0}
.pv-post-body .pv-check li > label{display:flex; gap:12px; align-items:flex-start}
/* display:block обов'язково — inline-span ігнорує width/height і
   «галочка» схлопується у вертикальну риску завширшки 0. */
.pv-check-box{display:block; flex:0 0 auto; width:19px; height:19px; margin-top:3px;
  border:1.5px solid var(--accent,#9FB80E); border-radius:5px; background:var(--accent-soft,#EAF1B6)}

/* Примітка-джерело під текстом: тихіша за основний текст, але не сірий
   шум — на неї спираються і читач, і AI-відповідь. */
.pv-post-note{font-size:15px; line-height:1.6; color:rgba(38,24,21,.62);
  border-left:2px solid rgba(38,24,21,.14); padding-left:14px; margin:22px 0}
.pv-post-note a{color:var(--rose-ink,#9E574D)}

/* Підпис автора. Один на статтю і завжди від шаблону — byline у тілі
   тексту розходиться з шаблонним при першій же правці визначення. */
.pv-byline{display:flex; gap:14px; align-items:flex-start; margin:40px 0 0;
  padding:18px 20px; background:var(--surface-2,#FBF4E6);
  border:1px solid rgba(38,24,21,.1); border-radius:16px}
.pv-byline img{width:44px; height:44px; flex:0 0 auto}
/* Фото автора — коло з м'якою рамкою: квадрат у цьому блоці читається як
   іконка застосунку, а не як людина. object-fit тримає кадр при будь-якому
   вихідному співвідношенні сторін.
   Селектор із двох класів навмисно: `.pv-post-body img{border-radius:14px}`
   вище має специфічність 0,1,1 і одинокий клас програв би йому — фото
   виходило скругленим квадратом, а не колом. */
.pv-byline .pv-byline-photo{border-radius:50%; object-fit:cover; object-position:center 22%;
  border:1px solid rgba(38,24,21,.12)}
.pv-byline-t{font-size:15.5px; line-height:1.55; color:rgba(38,24,21,.82); margin:0}
.pv-byline-t b{font-family:var(--font-display); font-weight:400; font-size:16px; color:var(--ink)}
.pv-byline-t a{color:var(--rose-ink,#9E574D)}

.pv-post-cta{background:rgba(255,255,255,.5); border-top:1px solid rgba(38,24,21,.08); padding:44px 0}
.pv-post-cta .pv-post-in{max-width:760px; text-align:center}
.pv-post-cta-h{font-family:var(--font-display); font-size:26px; margin:0 0 10px}
.pv-post-cta p{font-size:16.5px; color:rgba(38,24,21,.78); margin:0 0 20px}
.pv-post-cta .pv-btn{display:inline-block; text-decoration:none}
.pv-post-cta-alt{display:block; margin-top:14px; font-size:14.5px; color:var(--rose-ink,#9E574D)}

.pv-related{padding:48px 0 64px}
.pv-related-h{font-family:var(--font-display); font-size:24px; margin:0 0 22px}

@media (max-width:640px){
  .pv-blog-in, .pv-post-in{padding:0 18px}
  .pv-blog-hero{padding:38px 0 4px}
  .pv-cards{grid-template-columns:1fr; gap:18px}
  .pv-post-body p, .pv-post-body li{font-size:16.5px}
  .pv-post-body h2{font-size:23px}
  .pv-table th, .pv-table td{padding:10px 13px; font-size:15px}
  .pv-byline{padding:15px 16px; gap:11px}
}

/* ── Меню в шапці ────────────────────────────────────────────────
   Було: логотип + одне посилання «Що таке Pivona →». Сторінок стало
   більше, ніж одна, і єдиним входом на них лишався футер — тобто кінець
   сторінки. Меню без JS: три пункти вміщаються навіть на 360px, а бургер
   тут означав би зайвий клік і залежність від скрипта заради того, щоб
   сховати те, що й так видно. */
.nav-menu{display:flex; align-items:center; gap:4px}
.nav-link{
  color:var(--muted); font-size:14px; text-decoration:none;
  padding:7px 11px; border-radius:999px; white-space:nowrap; transition:.15s;
}
.nav-link:hover{color:var(--ink); background:rgba(38,24,21,.05)}
/* Поточна сторінка — кольором і вагою, не підкресленням: підкреслення в
   меню читається як «сюди можна натиснути», а це саме те місце, де ти вже є. */
.nav-link.is-current{color:var(--ink); font-weight:600; background:rgba(234,241,182,.55)}

.nav-cta{
  margin-left:6px; font-size:14px; font-weight:600; text-decoration:none;
  background:var(--ink); color:#FBF1DD;
  padding:8px 16px; border-radius:999px; white-space:nowrap; transition:.15s;
}
.nav-cta:hover{transform:translateY(-1px)}

@media (max-width:640px){
  .nav-in{padding:0 14px}
  .nav-menu{gap:1px}
  .nav-link{font-size:13px; padding:6px 7px}
  .nav-cta{margin-left:3px; font-size:13px; padding:7px 12px}
  .logo span{font-size:16px}
}
/* Вузькі екрани: CTA лишається, «Контакти» ховаються — вони є у футері
   й на самій сторінці контактів, а кнопка «Спробувати» веде в продукт.
   Поріг 480, не 400: заміряно на живому — на 414px повне меню вилазило
   за край на 9px (кнопка різалась, скрін А. 23.08). */
@media (max-width:480px){
  .nav-link:nth-child(3){display:none}
}
@media (max-width:400px){
  /* Слово «Pivona» біля квітки ховаємо: іконки досить, а звільнені ~60px —
     різниця між кнопкою «Спробувати» в екрані і кнопкою за краєм. */
  .logo span{display:none}
  .nav-in{padding:0 12px; gap:8px}
  .nav-cta{padding:7px 11px}
}

/* ── Кастомний селект форми контактів ─────────────────────────────
   Нативний випадаючий список системний і темі не підкоряється, тому
   contact-form.js підміняє select на кнопку + власний список. Сам
   <select> лишається в DOM прихованим носієм значення: форма і код,
   що читає .value, працюють без змін, а без JS видно нативний. */
.pv-select{position:relative}
.pv-select-btn{
  font:inherit; font-size:16px; width:100%; text-align:left; cursor:pointer;
  color:var(--ink); background:#fff;
  border:1px solid rgba(38,24,21,.18); border-radius:12px;
  padding:12px 44px 12px 14px;
  transition:border-color .15s, box-shadow .15s;
}
.pv-select-btn.is-empty{color:rgba(38,24,21,.45)}
.pv-select-btn:focus-visible, .pv-select.is-open .pv-select-btn{
  outline:none; border-color:var(--accent,#9FB80E); box-shadow:0 0 0 3px var(--accent-soft,#EAF1B6);
}
.pv-select-chev{
  position:absolute; right:15px; top:50%; width:16px; height:16px;
  margin-top:-8px; pointer-events:none; color:var(--ink);
  transition:transform .18s;
}
.pv-select.is-open .pv-select-chev{transform:rotate(180deg)}
.pv-select-list{
  position:absolute; z-index:40; left:0; right:0; top:calc(100% + 6px);
  margin:0; padding:6px; list-style:none;
  background:#fff; border:1px solid rgba(38,24,21,.12); border-radius:14px;
  box-shadow:0 14px 34px rgba(38,24,21,.16);
  max-height:280px; overflow:auto; display:none;
}
.pv-select.is-open .pv-select-list{display:block}
.pv-select-list li{
  padding:10px 12px; border-radius:9px; cursor:pointer; font-size:15.5px;
}
.pv-select-list li.is-active{background:var(--accent-soft,#EAF1B6)}
.pv-select-list li[aria-selected="true"]{font-weight:600}
.pv-select-list li.pv-opt-empty{color:rgba(38,24,21,.45)}
.pv-select-native{
  position:absolute; left:-9999px; width:1px; height:1px; opacity:0;
}