/* 📣 Повідомлення про зміну цін (лист № 2610 від 15.10.2026) — банер «Огляду», бейдж на товарах листа (каталог, картка
   товару, кошик) і чіп фільтра каталогу. Розмітка — public/js/price-notice.js.
   ⚠ Лише токени (tokens.css дає й темну тему): колір «підвищення» — --warning, текст — його суміш з --ink-900 (у світлій темі
     темніший бурштин, у темній — світліший, контраст тримається в обох). Жодних style="…" у розмітці — CSP style-src 'self'.
   Окремим файлом, а не в app.css: фіча тимчасова (до 07.11.2026) і не чіпає чужих правил. */
.pn-banner {
    display: grid; gap: var(--s3);
    padding: var(--s4); margin-bottom: var(--s4);
    border-inline-start: 3px solid color-mix(in srgb, var(--warning) 75%, transparent);
}
.pn-banner .pn-head { display: flex; align-items: flex-start; gap: var(--s3); }
.pn-banner .pn-ic { flex: none; font-size: 22px; line-height: 1.25; }
.pn-banner .pn-htx { display: grid; gap: 2px; min-width: 0; }
.pn-banner .pn-title { margin: 0; font-size: var(--fs-17); line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: var(--ink-900); }
.pn-banner .pn-ref { font-size: var(--fs-12); color: var(--ink-600); }
.pn-banner .pn-lead { margin: 0; font-size: var(--fs-15); line-height: 1.4; color: var(--ink-900); }
.pn-banner .pn-groups { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.pn-banner .pn-group {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-ctrl);
}
.pn-banner .pn-gname { min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: var(--ink-900); }
.pn-banner .pn-pct { flex: none; white-space: nowrap; font-size: var(--fs-17); font-weight: 750; color: color-mix(in srgb, var(--warning) 72%, var(--ink-900)); }
.pn-banner .pn-note { margin: 0; font-size: var(--fs-13); color: var(--ink-700); }
.pn-banner .pn-acts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.pn-banner .pn-acts:empty { display: none; }   /* ні PDF, ні товарів листа в каталозі клієнта — без порожнього рядка й зайвого проміжку */
.pn-banner .pn-pdf { text-decoration: none; }   /* посилання-кнопка — без підкреслення, як .mgr-c-btns .btn */
/* з 01.11 ціни вже діють — акцент тихіший: це вже довідка, а не попередження */
.pn-banner.is-past { border-inline-start-color: color-mix(in srgb, var(--brand-primary) 45%, transparent); }
.pn-banner.is-past .pn-pct { color: var(--ink-700); }
@media (max-width: 720px) {
    .pn-banner { padding: var(--s3); }
    .pn-banner .pn-acts .btn { flex: 1 1 auto; white-space: nowrap; }   /* підпис кнопки — одним рядком; не влізли поруч — друга нижче */
}

/* бейдж «↑ +10% з 01.11» — та сама форма, що чіп «−15%» Profi (.profi-chip), колір «підвищення» */
.pn-badge {
    display: inline-block; margin-inline-start: 6px; padding: 1px 6px; vertical-align: 1px;
    border-radius: 6px; white-space: nowrap;
    font-size: 11.5px; font-weight: 700; line-height: 1.45;
    color: color-mix(in srgb, var(--warning) 72%, var(--ink-900));
    background: color-mix(in srgb, var(--warning) 14%, transparent);
}
.c-ntxt > .pn-badge { align-self: flex-start; margin-inline-start: 0; }   /* без артикула — окремим рядком, не на всю ширину */
.cart-summary .pn-badge { margin-inline-start: 0; align-self: center; }

/* чіп фільтра каталогу «↑ Зміна цін з 01.11 ✕» — над списком, не сегмент */
.pn-chipbar { display: flex; flex-wrap: wrap; margin-top: var(--s3); }
.pn-chip {
    display: inline-flex; align-items: center; gap: var(--s1); max-width: 100%;
    min-height: 36px; padding-inline-start: var(--s3);
    border-radius: 999px; font-size: var(--fs-13); font-weight: 600; color: var(--ink-900);
    background: color-mix(in srgb, var(--warning) 14%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
}
.pn-chip-x {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
    background: transparent; color: var(--ink-700); font-size: var(--fs-13);
}
.pn-chip-x:hover { background: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--ink-900); }
/* 👆 тач-ціль ≥ 44 px на телефоні — як .btn-sm і сегменти (app.css, той самий поріг 768 px) */
@media (max-width: 768px) {
    .pn-chip { min-height: var(--tap); }
    .pn-chip-x { width: var(--tap); height: var(--tap); }
}