/* ============================================================
   NOD32UA — Product page 2026 design layer
   Доповнення до home-2026.css (ті самі токени/компоненти).
   Підключати ПІСЛЯ home-2026.css. Тільки content-area.
   ============================================================ */

/* breadcrumbs */
.pp-crumbs{padding:18px 0 0}
.pp-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;color:var(--ink-500)}
.pp-crumbs li{display:inline-flex;align-items:center;gap:8px}
.pp-crumbs li+li::before{content:"/";color:var(--ink-300)}
.pp-crumbs a:hover{color:var(--accent-deep)}
.pp-crumbs [aria-current]{color:var(--ink-900);font-weight:600}

/* hero / summary + buy */
/* display:block + max-width:none нейтралізують legacy-grid із site.css (.product 1.1fr/1fr),
   який клав .wrap у першу колонку і лишав другу порожньою. */
.pp-hero{display:block;max-width:none;padding:22px 0 8px}
.pp-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:start}
@media(max-width:920px){.pp-hero__grid{grid-template-columns:1fr;gap:26px}}
.pp-sum .eyebrow{display:inline-flex;align-items:center;gap:8px}
.pp-media{background:linear-gradient(180deg,#fff,var(--paper-2));border:1px solid var(--ink-100);border-radius:var(--r-xl);padding:26px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;position:relative;overflow:hidden}
.pp-media::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 220px at 50% 8%,var(--accent-soft),transparent 62%)}
.pp-media img{max-height:200px;width:auto;position:relative;filter:drop-shadow(0 20px 38px rgba(6,88,79,.18))}
.pp-sum h1{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3.6vw,38px);letter-spacing:-.02em;line-height:1.08;margin:14px 0 0}
.pp-sum__lede{color:var(--ink-500);font-size:16px;line-height:1.55;margin:14px 0 0;max-width:560px}
.pp-badges{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 0}
.pp-badges span{font-family:var(--font-display);font-weight:600;font-size:11.5px;color:var(--ink-700);background:#fff;border:1px solid var(--line);border-radius:7px;padding:5px 11px}
.pp-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;margin:20px 0 0;background:#fff}
.pp-facts>div{padding:14px 16px;border-right:1px solid var(--line)}
.pp-facts>div:last-child{border-right:0}
.pp-facts b{display:block;font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:-.01em}
.pp-facts span{font-size:11.5px;color:var(--ink-500)}
@media(max-width:520px){.pp-facts{grid-template-columns:1fr;}.pp-facts>div{border-right:0;border-bottom:1px solid var(--line)}.pp-facts>div:last-child{border-bottom:0}}

/* buy card (configurator, sticky on desktop) */
.pp-buy{position:sticky;top:84px;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:22px;box-shadow:var(--sh-2)}
@media(max-width:920px){.pp-buy{position:static}}
.pp-buy.is-recommended{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),var(--sh-3)}
.pp-buy__badge{display:inline-flex;align-self:flex-start;background:var(--accent);color:#fff;font-family:var(--font-display);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;padding:5px 11px;border-radius:999px;margin-bottom:12px}
.pp-buy__name{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.01em}
.pp-buy__hint{color:var(--ink-500);font-size:12.5px;margin:4px 0 14px}
/* Конфігуратор = НАЯВНИЙ segmented .seg (section.product + site.js, механіку не чіпаємо).
   site.css вже стилізує .seg/.cfg-label — тут лише вписуємо у buy-картку. */
.pp-buy .cfg-label{font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--ink-700);margin:0 0 8px}
.pp-buy .cfg-label+.seg{margin-bottom:14px}
.pp-buy .seg{margin-bottom:6px}
.pp-buy__total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px dashed var(--line)}
.pp-buy__price{font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.pp-buy__price sub{font-size:13px;color:var(--ink-400);font-weight:600;vertical-align:baseline;margin-left:4px}
.pp-buy__price--text{font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--ink-700)}
.pp-buy__cta{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.pp-buy__cta .btn{width:100%}
.pp-buy__foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-500);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.pp-buy__foot .pay-logos span{background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-size:10.5px;font-weight:600}
/* matrix + .pp-buy__eset прибрано: single-продукти = data-driven configurator (без fake devices);
   secondary ESET-лінк — у блоці опису, не біля buy-CTA. */
.pp-eset-note{font-size:13px;color:var(--ink-500);margin-top:14px}
.pp-eset-note a{color:var(--accent-deep);font-weight:600;border-bottom:1px solid var(--accent-tint)}
.pp-buy__price .old{font-size:14px;color:var(--ink-400);font-weight:600;text-decoration:line-through;margin-left:8px}
.pp-buy__vat{font-size:11.5px;color:var(--ink-400);margin-top:6px}

/* what included */
.pp-inc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.pp-inc{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pp-inc{grid-template-columns:1fr}}
.pp-inc__c{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:20px}
.pp-inc__ic{width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent-deep);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.pp-inc__c h3{font-family:var(--font-display);font-weight:700;font-size:16px;margin:0 0 10px}
.pp-inc__c ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pp-inc__c li{position:relative;padding-left:24px;font-size:13.5px;color:var(--ink-700);line-height:1.45}
.pp-inc__c li svg{position:absolute;left:0;top:3px;color:var(--accent)}
.pp-inc__c li .new{font-family:var(--font-display);font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--accent);color:#fff;padding:1px 6px;border-radius:4px;margin-left:6px;vertical-align:middle}

/* for whom */
.pp-who{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.pp-who{grid-template-columns:1fr}}
.pp-who__c{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:24px;transition:background .2s,box-shadow .2s}
.pp-who__c:hover{background:#fff;box-shadow:var(--sh-2)}
.pp-who__ic{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--accent-deep);margin-bottom:16px}
.pp-who__c h3{font-family:var(--font-display);font-weight:700;font-size:17px;margin:0 0 8px}
.pp-who__c p{color:var(--ink-500);font-size:14px;line-height:1.55;margin:0}

/* mobile: легша тінь buy-area. .pp-mbar НЕ використовуємо — на сайті вже є спільний mobile-tab (один sticky-бар). */
@media(max-width:920px){.pp-buy{box-shadow:var(--sh-1)}}
/* SEO meta polish п.7: на product-сторінці на phone активний .m-buy-bar (купівля) —
   ховаємо загальний .m-tab, щоб не було двох нижніх sticky-барів одночасно.
   Цей CSS вантажиться ТІЛЬКИ на product, тому правило скоуплене сторінкою. */
@media(max-width:768px){.m-tab{display:none !important}}

/* ── Release 1: контент-секції (config-driven) ─────────────────── */

/* чергування фону секцій (тільки product page — цей css не вантажиться деінде) */
.sec--alt{background:var(--paper-2,#f4f2ea)}

/* джерело фактів під списком функцій */
.pp-src{font-size:12px;color:var(--ink-400);margin:16px 0 0}

/* upsell band */
.pp-up{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:32px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:30px;box-shadow:var(--sh-2)}
@media(max-width:820px){.pp-up{grid-template-columns:1fr;gap:20px}}
.pp-up .eyebrow{margin-bottom:6px}
.pp-up h2{font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.6vw,26px);letter-spacing:-.02em;margin:0 0 8px}
.pp-up__body p{color:var(--ink-500);font-size:14.5px;line-height:1.55;margin:0 0 14px}
.pp-up__points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pp-up__points li{position:relative;padding-left:24px;font-size:13.5px;color:var(--ink-700);line-height:1.45}
.pp-up__points li svg{position:absolute;left:0;top:3px;color:var(--accent)}
.pp-up__cta{display:flex;flex-direction:column;gap:10px}
.pp-up__cta .btn{width:100%;text-align:center;justify-content:center}
