/* Згенеровано web/packages/ui/scripts/sync-maket.mjs з design/maket/e. НЕ ПРАВИТИ руками — правки зникнуть при наступному запуску. */
/* ZRAZU · E «Кіно» — спільні компоненти. Каталог із живими прикладами: /e/ui/. Спільний файл — автори розділів
   компоненти не змінюють, а просять власника (див. AUTHORING.md). Кольори — лише через токени tokens.css. */

/* ---------- Шапка: спільне для всіх раскладок (вордмарк, перемикач теми) ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:44px;border-radius:12px;flex:none}
.brand-wm{font-weight:700;font-size:17px;letter-spacing:.06em}
.theme-btn{appearance:none;border:1px solid var(--line);background:var(--fill-2);color:var(--text);width:40px;height:40px;border-radius:999px;display:inline-grid;place-items:center;cursor:pointer;flex:none}
.theme-btn .ic{width:18px;height:18px}
.theme-btn .t-sun{display:none}
[data-theme="light"] .theme-btn .t-moon{display:none}
[data-theme="light"] .theme-btn .t-sun{display:block}
@media (hover:hover) and (pointer:fine){ .theme-btn:hover{background:var(--fill-4)} }
@media (pointer:coarse){ .theme-btn{width:44px;height:44px} .brand{min-height:44px} }
/* Мова в шапці — кнопка з поточною мовою (українська — «UA») і список під нею (Р278-25, замість сегмента UK·EN·RU).
   Disclosure, не role=menu: усередині звичайні посилання на ту саму сторінку в іншому мовному дереві; Esc і клік
   повз закривають (core.js). У мобільному меню вітрини (.mnav) мова лишається сегментом — там це вже список. */
.lang-dd{position:relative;flex:none}
.lang-dd-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 10px 0 12px;border:1px solid var(--line);border-radius:999px;background:var(--fill-2);color:var(--text);font:inherit;font-size:14px;font-weight:620;cursor:pointer}
.lang-dd-btn > .ic:first-child{color:var(--text-2)}
.lang-dd-oc{color:var(--text-2);transition:transform .2s ease}
.lang-dd-btn[aria-expanded="true"] .lang-dd-oc{transform:rotate(180deg)}
.lang-dd-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;display:grid;gap:2px;width:220px;margin:0;padding:6px;list-style:none;border:1px solid var(--line-2);border-radius:18px;background:var(--surface);box-shadow:var(--pop-shadow)}
.lang-dd-menu[hidden]{display:none}
.lang-dd-menu a{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 12px;border-radius:12px;color:var(--text);font-size:15px;font-weight:560;text-decoration:none}
.lang-dd-code{width:24px;flex:none;color:var(--text-2);font-size:12.5px;font-weight:700;letter-spacing:.04em}
.lang-dd-name{flex:1;min-width:0}
.lang-dd-cur{flex:none;visibility:hidden}
.lang-dd-menu a[aria-current]{background:var(--fill-1)}
.lang-dd-menu a[aria-current] .lang-dd-cur{visibility:visible}
@media (hover:hover) and (pointer:fine){ .lang-dd-btn:hover{background:var(--fill-4)} .lang-dd-menu a:hover{background:var(--fill-2)} }
@media (pointer:coarse){ .lang-dd-btn{min-height:44px} }
.tbl .dn{white-space:nowrap}

/* ---------- Матеріал: скло ---------- */
.glass{background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:var(--r-lg)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
/* Відблиск під курсором — лише декоративно, лише миша */
.sheen{position:relative}
.sheen::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),var(--sheen),transparent 60%)}
@media (hover:hover) and (pointer:fine){.sheen:hover::after{opacity:1}}
html[data-static] .sheen::after,html[data-rm] .sheen::after{display:none}

/* ---------- Кнопки ---------- */
.btn{appearance:none;border:0;font-weight:600;font-size:16px;letter-spacing:-.01em;min-height:48px;padding:0 22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .16s var(--ease-out),background-color .2s ease,box-shadow .3s ease,color .2s ease}
.btn:active{transform:scale(.97)}
.btn[disabled],.btn[aria-disabled="true"]{cursor:not-allowed;opacity:.55}
.btn[disabled]:active{transform:none}
.btn-primary{background:var(--btn-pri-bg);background-image:var(--btn-pri-img);color:var(--btn-pri-fg)}
.btn-glass{background:var(--btn-sec-bg);color:var(--text);box-shadow:var(--btn-sec-ring)}
.btn-danger{background:var(--btn-danger-bg);color:var(--btn-danger-fg)}
.btn-lg{min-height:56px;padding:0 30px;font-size:17px}
.btn-sm{min-height:40px;padding:0 16px;font-size:15px}
.btn-block{width:100%}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--btn-pri-hover);background-image:var(--btn-pri-img-hover);box-shadow:var(--btn-pri-glow)}
  .btn-glass:hover{background:var(--btn-sec-hover)}
  .zchip:hover{border-color:var(--line-3);color:var(--text)}
  .btn-link:hover{text-decoration-color:currentColor}
  .btn-cart:hover{background:var(--btn-sec-hover)}
  .btn-sim:hover{color:var(--text)}
  .btn-arrow:hover .ic{transform:translateX(3px)}
}
.btn-add .ba-ic{display:inline-grid;place-items:center}
.btn-add.is-in,.btn-cart.is-in{background:var(--free-bg);color:var(--free);box-shadow:inset 0 0 0 1px var(--free-ring)}
.btn-link{appearance:none;background:none;border:0;padding:0;min-height:32px;max-width:100%;color:var(--text);font-weight:560;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:4px;display:inline-flex;align-items:center;gap:6px}
.btn-arrow{text-decoration:none;color:var(--text);margin-top:4px}
.btn-arrow .ic{transition:transform .2s var(--ease-out)}
.icon-btn{appearance:none;border:0;background:var(--fill-2);color:var(--text);width:40px;height:40px;border-radius:999px;display:inline-grid;place-items:center;cursor:pointer;flex:none;text-decoration:none}
.btn-cart{min-height:44px;padding:0 16px;border-radius:14px;background:var(--btn-sec-bg);color:var(--text);box-shadow:var(--btn-sec-ring)}
.btn-sim{background:transparent;color:var(--text-2);padding:0 10px;box-shadow:none}
.btn-sim[aria-expanded="true"]{color:var(--text)}
.btn-icon{padding:0;width:44px}
.btn-icon .ba-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.aside{font-size:14px;color:var(--text-2)}
kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;border:1px solid var(--line-2);background:var(--fill-2);font-size:12.5px;font-weight:600;color:var(--text-2)}

/* ---------- Сегментований перемикач з повзунком ---------- */
.seg{position:relative;display:inline-flex;padding:4px;gap:2px;border-radius:999px;background:var(--seg-bg);border:1px solid var(--line);isolation:isolate}
.seg button,.seg a{appearance:none;border:0;background:transparent;color:var(--text-2);font-size:15px;font-weight:560;min-height:40px;padding:0 16px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;position:relative;z-index:1;transition:color .2s ease;text-decoration:none}
.seg button[aria-pressed="true"],.seg a[aria-current]{color:var(--text);background:var(--seg-on)}
.seg.has-thumb button[aria-pressed="true"],.seg.has-thumb a[aria-current]{background:transparent}
.seg.has-thumb::before{content:"";position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:var(--tw);transform:translateX(var(--tx));border-radius:999px;background:var(--seg-thumb);box-shadow:var(--seg-thumb-shadow)}
.seg.thumb-anim::before{transition:transform .38s var(--ease-out),width .38s var(--ease-out)}
.seg-sm button{min-height:34px;padding:0 12px;font-size:14px}
.seg-xs{padding:3px}
.seg-xs button{min-height:30px;padding:0 10px;font-size:14px}
.seg-xs.has-thumb::before{top:3px;bottom:3px}

/* ---------- Поля ---------- */
.field{display:grid;gap:6px;min-width:0;align-content:start}
.field-l{font-size:15px;font-weight:600;color:var(--text)}
.field-hint{font-size:14px;color:var(--text-2);margin:0}
.field-err{display:flex;gap:6px;align-items:flex-start;font-size:14px;color:var(--taken);margin:0}
.input,.select,.textarea{width:100%;min-height:48px;padding:0 16px;border-radius:14px;background:var(--field-bg);border:1px solid var(--field-border);color:var(--text);font-size:16px;letter-spacing:-.01em;outline:none;transition:border-color .2s ease,box-shadow .2s ease}
.textarea{padding:12px 16px;min-height:112px;resize:vertical;line-height:1.5}
.input.mono{font-family:var(--mono);font-size:16px}
.input::placeholder,.textarea::placeholder{color:var(--text-3);opacity:1}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{border-color:var(--field-focus);box-shadow:var(--field-ring);outline:none}
.input[aria-invalid="true"]{border-color:var(--taken)}
.input:disabled{opacity:.55;cursor:not-allowed}
.select{appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.check{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:10px 0;cursor:pointer;font-size:16px}
.check input{appearance:none;flex:none;width:24px;height:24px;margin:1px 0 0;border-radius:7px;border:1.5px solid var(--line-3);background:var(--field-bg);display:grid;place-items:center;cursor:pointer}
.check input[type=radio]{border-radius:50%}
.check input:checked{background:var(--btn-pri-bg);border-color:var(--btn-pri-bg)}
.check input:checked::after{content:"";width:10px;height:6px;border:2px solid var(--btn-pri-fg);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.check input[type=radio]:checked::after{width:8px;height:8px;border:0;border-radius:50%;background:var(--btn-pri-fg);transform:none}
.check input:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.check small{display:block;color:var(--text-2);font-size:14px;margin-top:2px}

/* Велике поле пошуку-пігулка (головна, сторінки зон, /search/) */
.search{display:flex;align-items:center;gap:10px;width:min(680px,100%);height:64px;padding:8px 8px 8px 22px;border-radius:999px;background:var(--field-bg);border:1px solid var(--field-border);box-shadow:var(--field-shadow);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);transition:border-color .2s ease,box-shadow .3s ease}
.search:focus-within{border-color:var(--field-focus);box-shadow:var(--field-ring),var(--field-shadow)}
.search-ic{color:var(--text-2)}
.search input{flex:1;min-width:0;height:100%;background:transparent;border:0;color:var(--text);font:inherit;font-size:18px;letter-spacing:-.01em;outline:none}
.search input::placeholder{color:var(--text-3);opacity:1}
.search input:focus-visible{outline:none}
.search-go{min-height:48px;padding:0 24px}
.search-sm{height:56px;padding:6px 6px 6px 18px}
.search-sm .search-go{min-height:44px}

/* ---------- Чипи ---------- */
.zchip,.chip{appearance:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--line);background:var(--fill-1);color:var(--text-2);font-size:15px;font-weight:560;cursor:pointer;white-space:nowrap;text-decoration:none;transition:border-color .2s ease,background-color .2s ease,color .2s ease,transform .16s var(--ease-out)}
.zchip:active,.chip:active{transform:scale(.97)}
.zchip b{color:var(--text);font-weight:650;font-variant-numeric:tabular-nums}
.zchip .zc-z{color:var(--text);font-weight:600}
.zchip .zc-s{font-size:14px}
.zchip[aria-pressed="true"],.chip[aria-pressed="true"],.chip[aria-current]{background:var(--seg-on);border-color:var(--line-3);color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--text-3)}
.dot-free{background:var(--free)} .dot-taken{background:var(--taken)} .dot-failed{background:var(--warn)}
.dot-checking{background:transparent;box-shadow:inset 0 0 0 1.5px var(--text-2)}

/* ---------- Статуси (колір + іконка + слово — завжди разом) ---------- */
.st{display:inline-flex;align-items:center;gap:6px;max-width:100%;font-size:14px;font-weight:620;padding:3px 10px 3px 8px;border-radius:999px;background:var(--fill-2);white-space:nowrap;color:var(--text-2)}
/* Коли в плашку кладуть ціле речення («DS у батьківській зоні відповідає…»), nowrap розпирає
   сторінку на вузькому екрані. Дозволяємо такому тексту переноситись; короткі стани не зачеплені. */
.st > span{min-width:0;white-space:normal}
.st-free{color:var(--free);background:var(--free-bg)}
.st-taken{color:var(--taken);background:var(--taken-bg)}
.st-failed{color:var(--warn);background:var(--warn-bg)}
.st-info{color:var(--info);background:var(--info-bg)}
.st-neutral{color:var(--text);background:var(--fill-3)}
.st-unchecked{color:var(--text-2)}
.st-checking{color:var(--info);background:var(--info-bg)}

/* ---------- Імʼя домену, бейджі-факти ---------- */
.dn{font-weight:650;letter-spacing:-.02em;color:var(--text);overflow-wrap:normal;word-break:normal;hyphens:none}
.dn .z{color:var(--text-2);font-weight:560}
.facts{display:flex;flex-wrap:wrap;gap:6px}
.fact{display:inline-flex;align-items:center;min-height:24px;font-size:13px;font-weight:560;color:var(--text-2);padding:0 9px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.fact-exact{color:var(--exact-fg);border-color:var(--exact-line)}
.fact-why{color:var(--text);border-color:var(--line-2)}

/* ---------- Ціна: перший рік, звичайна закреслена, 2 роки, умова поруч ---------- */
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px}
.price-inline{gap:4px 10px}
.p-big{font-size:44px;font-weight:720;letter-spacing:-.04em;line-height:1.02;font-variant-numeric:tabular-nums;white-space:nowrap;margin:0}
.p-row{font-size:24px;font-weight:680;letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap}
.p-sm{font-size:18px}
.p-old{font-size:18px;color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums}
/* Вигода — єдиний теплий акцент (Р172-4). Бейдж знижки — суцільна тепла заливка без іконки: формою не схожий на статус
   «увага» (тонований чип з іконкою і словом). Рядки «2 роки — X ₴ замість Y ₴», «замість …» і ціна за 2 роки в таблицях — --save-ink. */
.p-save{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:999px;font-size:14px;font-weight:700;color:var(--save-fg);white-space:nowrap;
  background-color:var(--save-solid);background-image:var(--save-bg);border:1px solid transparent}
.p-per{display:inline-flex;align-items:center;gap:2px;font-size:15px;color:var(--text-2);margin:0}
.p-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px}
.q-btn{appearance:none;border:0;background:transparent;color:var(--text-2);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px;cursor:pointer;padding:0}
.q-btn.is-on{color:var(--text);background:var(--fill-4)}
/* Витрина web/apps/site (PriceBlock.tsx) ще розкриває пояснення абзацом — лишаємо його стиль до перенесення підказки */
.q-btn[aria-expanded="true"]{color:var(--text);background:var(--fill-4)}
.p-expl{margin:0;font-size:14px;color:var(--text-2);max-width:44ch}
@media (hover:hover) and (pointer:fine){ .q-btn:hover{color:var(--text)} }
/* Підказка «?» — одна бульбашка на сторінку, ставить її core.js (tipShow) поруч із кнопкою: зверху, а бракує місця — знизу */
.tip{position:fixed;z-index:300;left:0;top:0;max-width:min(300px,calc(100vw - 16px));padding:10px 12px;border-radius:12px;background:var(--pop-bg);border:1px solid var(--line-2);box-shadow:var(--pop-shadow);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);color:var(--text);font-size:14px;line-height:1.4;text-wrap:pretty;opacity:0;visibility:hidden;transform:translateY(3px);transition:opacity .14s var(--ease-out),transform .14s var(--ease-out),visibility 0s .14s}
.tip.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .14s var(--ease-out),transform .14s var(--ease-out)}
.tip.is-below{transform:translateY(-3px)}
.tip.is-below.is-on{transform:none}
@media (prefers-reduced-motion:reduce){ .tip,.tip.is-on{transition:none;transform:none} }
.p-two{font-size:15px;color:var(--text-2);margin:0}
.p-cond{font-size:15px;color:var(--text-2);margin:0}
.p-two[data-two],.p-two[data-sub2],[data-two],[data-sub2],[data-inst]{color:var(--save-ink)}   /* вигода — теплий текст (--save-ink) */
.p-free{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.le-chip{font-size:14px;font-weight:600;letter-spacing:0;color:var(--text);padding:5px 11px;border-radius:999px;border:1px solid var(--line-2)}

/* Картка ціни (сторінки зон, /prices/) */
.pcard{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:26px 28px}
.pcard .b-actions{margin-top:6px}
.pcard-foot{width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding-top:12px;margin-top:6px;border-top:1px solid var(--line)}

/* ---------- Картка пропозиції / точного збігу ---------- */
.kicker{font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);min-width:0;overflow-wrap:anywhere}
.kicker-d{text-transform:none;letter-spacing:-.005em;color:var(--text)}
.b-name{margin:0;font-size:24px;font-weight:680;letter-spacing:-.025em;line-height:1.2}
.b-name .dn{font-size:inherit}
.b-st{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.note{font-size:14px;color:var(--text-2)}
.note code,.r-meta code{font-size:13px}
.b-taken{margin:0;font-size:15px;color:var(--text-2);overflow-wrap:anywhere}
.b-taken .btn-link{min-height:24px}
.b-text{margin:0;font-size:15px;line-height:1.5;color:var(--text-2);max-width:46ch}
.b-text-hi{color:var(--text);font-size:16px}
.b-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px}
.b-watch,.b-alt{margin:2px 0 0;font-size:15px;color:var(--text-2)}
.b-alt .dn{font-size:inherit}
.inc{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.inc li{display:flex;gap:8px;align-items:center;font-size:15px;color:var(--text-2)}
.inc .ic{color:var(--free)}
.b-done{display:flex;align-items:center;gap:8px;margin:4px 0 0;color:var(--free);font-weight:600}
.fine-s{margin:2px 0 0;font-size:14px;color:var(--text-2);max-width:52ch}
.exact{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:26px 30px}
.dv{width:100%;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.dv-top{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.dv-name{font-weight:650;font-size:17px}
.dv-per{font-size:14px;color:var(--text-2);white-space:normal}
.dv-same,.plan-same{display:flex;align-items:flex-start;gap:8px;margin:8px 0 0;font-size:15px;font-weight:560;color:var(--text)}
.dv-same .ic,.plan-same .ic{color:var(--free);margin-top:2px}

/* ---------- Перевірка SSL і автовстановлення ---------- */
.ssl-dl{display:flex;flex-wrap:wrap;gap:6px 28px;margin:4px 0 0}
.ssl-dl div{min-width:0}
.ssl-dl dt{font-size:13px;color:var(--text-2);letter-spacing:.02em}
.ssl-dl dd{margin:2px 0 0;font-size:16px;font-weight:600}
.auto-steps{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px;width:100%}
/* Рядок кроку містить текст і кнопку копіювання: обом треба дозволити стиснутись,
   інакше на 390 рядок розпирає сторінку (було 507 px при екрані 390). */
.auto-steps li{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;min-width:0;font-size:15px;color:var(--text-2)}
.auto-steps li > span{min-width:0;overflow-wrap:anywhere}
.auto-steps li.done{color:var(--text)}
.auto-steps li.done .ic{color:var(--free)}
.auto-steps .ic{margin-top:2px}
/* Шаг із кодом і кнопкою «Копіювати» не влазив у телефон: рядок не переносився, nowrap-код розпирав трек сітки,
   і всі кроки виїжджали за екран (/tools/ssl/<домен>/, 390 px). Тепер на вузькому екрані код і кнопка — під текстом. */
.auto-steps{grid-template-columns:minmax(0,1fr)}
.auto-steps li{flex-wrap:wrap}
.auto-steps li > span{min-width:0}
@media (max-width:760px){
  .auto-steps li > span{flex:1 1 calc(100% - 28px)}
  .auto-steps li > .auto-code,.auto-steps li > .btn{margin-left:28px}
  .auto-steps li > .auto-code{max-width:calc(100% - 28px);margin-top:0}
}
.auto-code{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:6px;padding:8px 10px;border-radius:10px;background:var(--code-bg);border:1px solid var(--line);font-size:13px;color:var(--text)}
.auto-code span{white-space:nowrap}

/* ---------- Скелетон ---------- */
.sk{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--sk-a),var(--sk-b),var(--sk-a));background-size:200% 100%;animation:sk 1.4s ease-in-out infinite}
@keyframes sk{from{background-position:100% 0}to{background-position:-100% 0}}
.sk-l{width:80%;height:18px}.sk-m{width:60%}.sk-s{width:40%}
.sk-p{width:110px;height:22px}.sk-b{width:120px;height:44px;border-radius:999px}
.sk-t{width:50%;height:28px;border-radius:9px}

/* ---------- Видача: заголовок і рядки ---------- */
.res-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:12px}
.res-head > div{min-width:0}
/* у заголовок підставляють імʼя користувача — до 63 символів одним «словом» */
.res-title{margin:0;font-size:clamp(30px,3.6vw,46px);font-weight:720;letter-spacing:-.04em;line-height:1.08;overflow-wrap:anywhere}
.res-sub{margin:6px 0 0;color:var(--text-2);font-variant-numeric:tabular-nums}
.res-ctl{display:flex;gap:10px;flex-wrap:wrap}
.res-cond{margin:0 0 18px;font-size:15px;color:var(--text-2);max-width:80ch}
.rows{list-style:none;margin:0;padding:4px 0}
/* Колонка дій — два постійні слоти: основна дія (кошик / стежити / повтор) однакової ширини в кожному рядку
   і «Ще схожі» поруч. Ширини зняті з найдовших підписів трьох мов («В корзину» 136, «Скрыть похожие» 170, 05.10.2026). */
.row{--act-a:140px;--act-b:172px;display:grid;grid-template-columns:minmax(0,1fr) 190px 250px calc(var(--act-a) + var(--act-b) + 8px);grid-template-areas:"name state price act";gap:10px 20px;align-items:center;padding:20px 28px;border-top:1px solid var(--line);position:relative}
.row:first-child{border-top:0}
.row-empty{display:block;color:var(--text-2)}
.row.is-pick::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--beam)}
.row-upd{animation:rowIn .45s var(--ease-out)}
@keyframes rowIn{from{opacity:.4;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
.r-name{grid-area:name;min-width:0;display:flex;flex-direction:column;gap:8px}
.r-name .dn{font-size:22px}
.r-state{grid-area:state}
.r-price{grid-area:price;display:flex;flex-direction:column;gap:4px;min-width:0}
.r-price .p-two{font-size:14px}
.r-price .p-old{font-size:15px}
.r-price .price{gap:4px 10px}
.r-meta{font-size:14px;color:var(--text-2);gap:2px}
.r-meta code{color:var(--text)}
.r-act{grid-area:act;display:grid;grid-template-columns:var(--act-a) var(--act-b);gap:6px 8px;align-items:center;justify-content:start}
.r-act > .btn:first-child{width:100%}
.r-act > .btn.r-span,.r-act > .btn:only-child{width:auto;grid-column:1/-1;justify-self:start}   /* одна дія або довга («Спробувати ще раз», «Паспорт домену») — на обидва слоти, своєї ширини */
.r-act .btn-sim{justify-self:start}
.r-note{grid-column:1;font-size:13px;line-height:1.2;color:var(--text-2);text-align:center}
.r-wide{grid-column:1/-1;margin:0}
.r-watch{font-size:14px;color:var(--text-2)}
.si-upd{animation:siIn .3s var(--ease-out)}
@keyframes siIn{from{opacity:.55}to{opacity:1}}
.sim{grid-column:1/-1;margin-top:8px;padding:16px;border-radius:20px;background:var(--fill-1);border:1px solid var(--line);animation:simIn .45s var(--ease-out)}
@keyframes simIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sim-h{margin:0 0 12px;font-size:15px;color:var(--text-2)}
.sim-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.si{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--fill-2)}
.si-n{min-width:0;display:flex;flex-direction:column;gap:6px}
.si-n .dn{font-size:18px}
.si-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.si .p-old{font-size:14px}
.si-p{display:flex;flex-direction:column;align-items:flex-end;gap:0}
.si-per{font-size:13px;color:var(--text-2);white-space:nowrap}
.si-meta{font-size:14px;color:var(--text-2);text-align:right}
.si:has(.btn-add){grid-template-columns:minmax(0,1fr) auto auto}

/* ---------- Картка SSL-тарифу ---------- */
.lineup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plan{display:flex;flex-direction:column;gap:10px;padding:28px 24px 24px}
.plan-name{margin:0 0 4px;font-size:26px;font-weight:720;letter-spacing:-.03em}
.p-plan{font-size:40px}
.plan-t{margin:0;font-size:15px;color:var(--text-2)}
.plan-not{margin:0;font-size:15px;color:var(--text-2);padding-top:10px;border-top:1px solid var(--line)}
.plan-adv{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.plan-adv li{display:flex;gap:8px;align-items:flex-start;font-size:15px;color:var(--text)}
.plan-adv .ic{color:var(--free);margin-top:3px;flex:none}
.plan-pick{margin:0;font-size:15px;color:var(--text)}
.plan-auto{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:15px;color:var(--text)}
.plan-auto .ic,.plan-pre .ic{color:var(--free);margin-top:2px}
.plan-pre{display:flex;gap:8px;align-items:flex-start;color:var(--text)}
.plan-code{display:block;font-size:13px;color:var(--text);padding:8px 10px;border-radius:10px;background:var(--code-bg);border:1px solid var(--line)}
.plan .p-two{font-size:15px}
.plan-cta{margin-top:auto;padding-top:10px}
.plan-le{background:var(--plan-le-bg) padding-box,linear-gradient(var(--plan-le-base),var(--plan-le-base)) padding-box,var(--plan-le-border) border-box;border:1px solid transparent}
.plan-le .p-free{font-size:44px;letter-spacing:-.04em;white-space:normal;margin-top:2px}
.lineup .plan-le{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) auto;align-items:center;gap:14px 40px;padding:30px 32px}
.plan-le .plan-cta{margin:0;padding:0}
.le-b{display:flex;flex-direction:column;gap:10px}
.plan-le .plan-t{font-size:16px;color:var(--text-2)}

/* ---------- Кошик (поповер у шапці) ---------- */
.cart{position:fixed;z-index:60;top:calc(var(--hdr) + 8px);right:max(12px,calc((100vw - 1200px)/2));width:min(420px,calc(100vw - 24px));max-height:calc(100svh - var(--hdr) - 24px);overflow:auto;padding:18px 18px 20px;background:var(--pop-bg);box-shadow:var(--pop-shadow);transform-origin:top right}
.cart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cart-title{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em}
.cart-empty{color:var(--text-2);margin:8px 0 6px}
.cart-list{list-style:none;margin:0;padding:0}
.ci{padding:14px 0;border-top:1px solid var(--line)}
.ci-top{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:start}
.ci-n{min-width:0}
.ci-n .dn{font-size:18px}
.ci-sub{display:block;font-size:14px;color:var(--text-2);margin-top:2px}
.ci-p{font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:2px}
.ci-x{width:36px;height:36px}
.ci-term{display:flex;align-items:center;gap:10px;margin-top:10px}
.ci-tl{font-size:14px;color:var(--text-2)}
.cart-vat{margin:14px 0 12px}
.ci-le{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--text-2);margin:10px 0 0}
.ci-le .ic{color:var(--free)}
.ci-dv{font-size:14px;margin-top:6px}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:14px;margin-top:2px;font-size:17px}
.cart-total b{font-size:24px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cart-note{font-size:14px;color:var(--text-2);margin:8px 0 14px}
.cart-demo{font-size:14px;color:var(--warn);margin:10px 0 0}

/* ---------- Хлібні крихти ---------- */
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;font-size:14px;color:var(--text-2)}
.crumbs li{display:inline-flex;align-items:center;min-width:0}
.crumbs li + li::before{content:"";width:6px;height:6px;margin:0 10px 0 8px;border-right:1.5px solid var(--text-3);border-top:1.5px solid var(--text-3);transform:rotate(45deg);flex:none}
.crumbs a{color:var(--text-2);text-decoration:none;min-height:32px;display:inline-flex;align-items:center;border-radius:8px}
.crumbs a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current="page"]{color:var(--text);font-weight:560}

/* ---------- Коротка відповідь (GEO): 2–3 речення фактів, джерело, дата ---------- */
.answer{position:relative;padding:20px 24px 18px 26px;border-radius:var(--r-md);background:var(--fill-1);border:1px solid var(--line);max-width:76ch}
.answer::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:var(--beam)}
.answer-l{margin:0 0 6px;font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.answer-t{margin:0;font-size:18px;line-height:1.55;color:var(--text)}
.answer-src{margin:10px 0 0;font-size:14px;color:var(--text-2)}
.answer-src a{color:var(--text-2);text-underline-offset:3px}
:where(.answer) + :where(*){margin-top:28px}   /* блок одразу за «Короткою відповіддю» без власного відступу лип до неї (/ssl/, /ssl/choose/); власні margin розділів сильніші */

/* ---------- Список фактів «ключ — значення» ---------- */
.kv{margin:0;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
.kv > div{display:grid;grid-template-columns:minmax(160px,.8fr) minmax(0,1.6fr);gap:6px 24px;padding:14px 0;border-bottom:1px solid var(--line)}
.kv dt{font-size:15px;color:var(--text-2)}
.kv dd{margin:0;font-size:16px;color:var(--text)}
.kv dd small{display:block;font-size:14px;color:var(--text-2);margin-top:2px}
.kv dd .st{white-space:normal;max-width:100%;border-radius:14px}   /* довгий статус у значенні (RU «DS в родительской зоне…») вилазив за екран телефона */

/* ---------- FAQ-акордеон (нативний <details>, працює без JS) ---------- */
.faq{border-top:1px solid var(--line)}
.faq-i{border-bottom:1px solid var(--line)}
.faq-q{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 0;font-size:18px;font-weight:620;letter-spacing:-.015em;cursor:pointer;border-radius:10px}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:"";flex:none;width:10px;height:10px;margin-right:6px;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--ease-out)}
.faq-i[open] .faq-q::after{transform:translateY(2px) rotate(-135deg)}
.faq-a{padding:0 0 18px;font-size:16px;line-height:1.6;color:var(--text-2);max-width:68ch}
.faq-a p{margin:0 0 10px}
.faq-i[open] .faq-a{animation:fadeUp .3s var(--ease-out)}

/* ---------- Таблиця: comfortable / compact ---------- */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);contain:paint}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl caption{text-align:left;padding:14px 18px 0;font-size:14px;color:var(--text-2)}
.tbl th{text-align:left;font-size:13px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);padding:12px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td,.tbl tbody tr:last-child th{border-bottom:0}   /* th-заголовок рядка в останньому рядку лишав обрізок лінії під першою колонкою */
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .mono{font-size:14px}
.tbl tbody tr:hover{background:var(--fill-1)}
.tbl tr[aria-selected="true"]{background:var(--fill-2)}
.tbl-wrap[data-density="compact"] .tbl td{padding:8px 14px}
.tbl-wrap[data-density="compact"] .tbl th{padding:8px 14px}
.tbl-wrap[data-density="compact"] .tbl{font-size:14px}
.tbl-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.tbl .check{min-height:0;padding:0}
/* Таблиця вітрини, що не влазить у телефон, — картками (components.js → stackTables, клас ставить скрипт) */
.tbl-wrap.is-stacked{overflow:visible;border:0;border-radius:0;background:none;box-shadow:none;contain:none}
.tbl-wrap.is-stacked .tbl{min-width:0!important}
.tbl-wrap.is-stacked .tbl,.tbl-wrap.is-stacked .tbl tbody,.tbl-wrap.is-stacked .tbl tfoot,.tbl-wrap.is-stacked .tbl tr,.tbl-wrap.is-stacked .tbl td,.tbl-wrap.is-stacked .tbl tbody th,.tbl-wrap.is-stacked .tbl tfoot th{display:block;width:auto}
.tbl-wrap.is-stacked .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tbl-wrap.is-stacked .tbl caption{display:block;padding:0 0 8px}
.tbl-wrap.is-stacked .tbl tr{margin:0 0 10px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.tbl-wrap.is-stacked .tbl tbody tr:hover{background:var(--surface)}
.tbl-wrap.is-stacked .tbl td,.tbl-wrap.is-stacked .tbl tbody th,.tbl-wrap.is-stacked .tbl tfoot th{padding:5px 0;border:0;text-align:left;white-space:normal;overflow-wrap:anywhere}
.tbl-wrap.is-stacked .tbl th[scope=row]{font-size:16px;font-weight:650;text-transform:none;letter-spacing:0;color:var(--text);padding-bottom:4px}
.tbl-wrap.is-stacked .tbl [data-stl]::before{content:attr(data-stl);display:block;font-family:var(--f);font-size:12.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);margin-bottom:2px}

/* ---------- Таби ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{appearance:none;background:none;border:0;position:relative;min-height:44px;padding:0 14px;font-size:15px;font-weight:560;color:var(--text-2);cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:8px;border-radius:10px 10px 0 0}
.tab[aria-selected="true"],.tab[aria-current="page"]{color:var(--text)}
.tab[aria-selected="true"]::after,.tab[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--text)}
.tab-panel{padding:20px 0 0}

/* ---------- Тост із «Скасувати» (Undo 60 с) ---------- */
.toasts{position:fixed;z-index:90;left:50%;bottom:20px;transform:translateX(-50%);display:grid;gap:8px;width:min(520px,calc(100vw - 24px));pointer-events:none}
.toast{pointer-events:auto;position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:12px 12px 14px 18px;border-radius:18px;background:var(--pop-bg);border:1px solid var(--line-2);box-shadow:var(--pop-shadow);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);animation:toastIn .22s var(--ease-out)}
.toast-t{flex:1;min-width:0;font-size:15px;line-height:1.4}
.toast-t b{font-weight:640}
.toast .btn{min-height:40px;padding:0 14px;font-size:15px}
.toast-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--fill-3)}
.toast-bar i{display:block;height:100%;background:var(--beam);transform-origin:left;animation:toastBar var(--ms,60000ms) linear forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.toast.out{animation:toastOut .16s ease-in forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(6px)}}
html[data-static] .toast-bar i{transform:scaleX(.62)}

/* ---------- Порожній стан ---------- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:48px 24px;border-radius:var(--r-md);border:1px dashed var(--line-2)}
.empty-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--fill-2);color:var(--text-2)}
.empty-ic .ic{width:24px;height:24px}
.empty-h{margin:4px 0 0;font-size:20px;font-weight:680;letter-spacing:-.02em}
.empty-t{margin:0;font-size:15px;color:var(--text-2);max-width:44ch}
.empty .b-actions{justify-content:center}

/* ---------- Модалка підтвердження (лише незворотне: ввести імʼя) ---------- */
.modal{border:0;padding:0;background:transparent;color:var(--text);max-width:calc(100vw - 24px);width:520px}
.modal::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal[open]{animation:modalIn .22s var(--ease-out)}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.modal-card{padding:26px 26px 22px;border-radius:24px;background:var(--pop-bg);border:1px solid var(--line-2);box-shadow:var(--pop-shadow)}
.modal-h{margin:0 0 8px;font-size:22px;font-weight:700;letter-spacing:-.02em}
.modal-t{margin:0 0 16px;font-size:16px;color:var(--text-2)}
.modal-name{display:block;margin:0 0 14px;padding:12px 14px;border-radius:12px;background:var(--code-bg);font-family:var(--mono);font-size:18px;letter-spacing:.02em;overflow-wrap:anywhere}
.modal-act{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:18px}
/* «Стежити» гостем: «це не бронь» і вхід для тих, хто має кабінет */
.w-nohold{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;font-size:14px;color:var(--text-2)}
.w-nohold .ic{flex:none;margin-top:2px}
.w-acc{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--text-2)}
/* Хрестик у куті. Вікно не закривається кліком повз (сторож у components.js), тому вихід мусить бути видно одразу. */
.modal-card{position:relative}
.modal-x{position:absolute;top:14px;right:14px;width:36px;height:36px;background:none;color:var(--text-2)}
.modal-card > .modal-x + .modal-h{padding-right:40px}
@media (hover:hover) and (pointer:fine){ .modal-x:hover{background:var(--fill-2);color:var(--text)} }
@media (pointer:coarse){ .modal-x{width:44px;height:44px;top:10px;right:10px} }
/* Клік по затемненню: вікно ледь кивне замість закритися */
.modal.is-nudge .modal-card{animation:modalNudge .26s var(--ease-out)}
@keyframes modalNudge{40%{transform:scale(1.015)}}
@media (prefers-reduced-motion:reduce){ .modal.is-nudge .modal-card{animation:none} }

/* ---------- Пагінація ---------- */
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.pager a,.pager span{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0 10px;border-radius:12px;color:var(--text-2);text-decoration:none;font-weight:560;font-variant-numeric:tabular-nums}
.pager a:hover{background:var(--fill-2);color:var(--text)}
.pager [aria-current="page"]{background:var(--seg-on);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.pager .pager-gap{min-width:24px}

/* ---------- Степер (чекаут) ---------- */
.stepper{list-style:none;margin:0;padding:0;display:flex;gap:8px;counter-reset:st}
.stepper li{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;counter-increment:st;font-size:14px;color:var(--text-2)}
.stepper li::before{content:"";height:4px;border-radius:2px;background:var(--fill-4)}
.stepper li[data-state="done"]::before{background:var(--text-2)}
.stepper li[data-state="current"]::before{background:var(--beam)}
.stepper li[data-state="current"]{color:var(--text);font-weight:600}
.stepper .stp-n{font-family:var(--mono);font-size:13px;color:var(--text-3)}
.stepper a{color:inherit;text-decoration:none}

/* ---------- Палітра команд (Cmd+K) ---------- */
.cmdk{border:0;padding:0;background:transparent;color:var(--text);width:640px;max-width:calc(100vw - 24px);margin-top:12vh}
.cmdk::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cmdk[open]{animation:modalIn .18s var(--ease-out)}
.cmdk-card{border-radius:22px;background:var(--pop-bg);border:1px solid var(--line-2);box-shadow:var(--pop-shadow);overflow:hidden}
.cmdk-in{display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--line)}
.cmdk-in input{flex:1;min-width:0;height:60px;background:transparent;border:0;outline:none;font-size:18px;color:var(--text)}
.cmdk-in input::placeholder{color:var(--text-3)}
.cmdk-list{list-style:none;margin:0;padding:8px;max-height:min(420px,60vh);overflow:auto}
.cmdk-g{padding:10px 12px 4px;font-size:12.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.cmdk-o{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:12px;cursor:pointer;font-size:15px}
.cmdk-o .ic{color:var(--text-2)}
.cmdk-o .cmdk-k{margin-left:auto;font-size:13px;color:var(--text-2)}
.cmdk-o[aria-selected="true"]{background:var(--fill-3)}
.cmdk-empty{padding:18px 14px;color:var(--text-2);font-size:15px}
.cmdk-foot{display:flex;gap:14px;padding:10px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--text-2)}

/* ---------- Плашка-пояснення ---------- */
.callout{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:var(--fill-2);border:1px solid var(--line);font-size:15px;color:var(--text)}
.callout .ic{margin-top:1px;color:var(--text-2)}
/* Міра рядка: у виносці суцільний текст, на 1440 він розтягувався на 100+ знаків. */
.callout p{max-width:68ch}
.callout-warn{background:var(--warn-bg);border-color:transparent}
.callout-warn .ic{color:var(--warn)}
.callout p{margin:0}

/* ---------- Заголовок секції ---------- */
.sec{padding:72px 0}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:24px}
.sec-head .h2,.sec-head .h3{margin:0}

/* ---------- Адаптив і дотик ---------- */
/* 1159, а не 1080: з колонкою дій 320px імені нижче лишається менше 160px */
@media (max-width:1159px){
  .row{grid-template-columns:minmax(0,1fr) auto 250px;grid-template-areas:"name state price" "act act price"}
}
@media (max-width:900px){
  .lineup{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lineup .plan-le{grid-template-columns:1fr auto}
  .le-b{grid-column:1/-1;grid-row:2}
}
@media (max-width:760px){
  .search{height:58px;padding:6px 6px 6px 16px;gap:8px}
  .search input{font-size:17px}
  .search-go{min-height:46px;padding:0 18px}
  .p-big{font-size:38px}
  .p-plan{font-size:34px}
  .res-ctl{width:100%}
  .filter-seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .filter-seg::-webkit-scrollbar{display:none}
  .row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name name" "state state" "price price" "act act";padding:18px 18px;gap:10px 12px}
  .r-act{grid-template-columns:minmax(0,1fr) auto}
  .row.is-pick::before{top:18px;bottom:18px}
  .r-name .dn{font-size:20px}
  .sim{padding:12px}
  .sim-list{grid-template-columns:1fr}
  .lineup{align-items:start;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gut));padding:4px var(--gut) 12px;scroll-padding-inline:var(--gut);scrollbar-width:none}
  .lineup::-webkit-scrollbar{display:none}
  .plan{scroll-snap-align:start}
  .lineup .plan-le{grid-column:auto;display:flex;flex-direction:column;align-items:stretch;padding:28px 24px 24px}
  .lineup .plan-dv{order:1}
  .lineup .plan-le{order:2}
  .lineup .plan-ov{order:3}
  .lineup .plan-ev{order:4}
  .plan-le .plan-cta{margin-top:auto;padding-top:10px}
  .plan-le .plan-cta .btn{width:100%}
  .plan-le .p-free{font-size:34px}
  .exact,.pcard{padding:20px 18px 22px}
  .kv > div{grid-template-columns:minmax(0,1fr);gap:2px}
  .answer{padding:16px 18px 14px 20px}
  .answer-t{font-size:17px}
  .toasts{bottom:72px}
  .modal-card{padding:22px 18px 18px}
  .stepper li{font-size:13px}
  .stepper .stp-t{display:none}
  .stepper li[data-state="current"] .stp-t{display:block}
  .sec{padding:48px 0}
}
@media (pointer:coarse){
  .seg button,.seg-sm button,.seg-xs button,.seg a,.seg-sm a,.seg-xs a{min-height:44px}
  .lang-seg button,.lang-seg a{min-width:44px}
  .btn-sm,.btn,.btn-cart{min-height:44px}
  .zchip,.chip{min-height:44px}
  .icon-btn,.ci-x{width:44px;height:44px}
  .q-btn{width:44px;height:44px;margin:-8px -8px -8px -4px}
  .btn-link{min-height:44px}
  .b-taken .btn-link{min-height:44px}
  .crumbs a{min-height:44px;min-width:44px;justify-content:center;padding:0 4px}
  .check input{width:44px;height:44px;margin:-10px -8px -10px -10px;border:10px solid transparent;background-clip:padding-box;box-shadow:inset 0 0 0 1.5px var(--line-3);border-radius:17px}
  .check input[type=radio]{border-radius:50%}
  /* .check input:checked ставить скорочення background — воно скидає background-clip на border-box,
     і на дотику зафарбовувалась уся ціль 44 px замість видимих 24 px. Повертаємо обрізання. */
  .check input:checked{border-color:transparent;box-shadow:none;background-clip:padding-box}
}

/* ---------- Світла тема: колір по всьому скролу (28.09.2026) ----------
   Усе нижче — лише під [data-theme="light"]: темна тема не змінюється. Палітра — токени --hue-*, --accent-*, --tint-*
   зі світлого блоку tokens.css. Статусні кольори (вільний/зайнятий/увага/інфо) тут не беруться як декор. */
/* активні стани — тонована фіалкова капсула замість сірої */
[data-theme="light"] .zchip[aria-pressed="true"],[data-theme="light"] .chip[aria-pressed="true"],[data-theme="light"] .chip[aria-current]{background:var(--accent-bg);border-color:var(--accent-line);color:var(--accent-ink)}
[data-theme="light"] .zchip[aria-pressed="true"] b,[data-theme="light"] .zchip[aria-pressed="true"] .zc-z{color:var(--accent-ink)}
[data-theme="light"] .pager [aria-current="page"]{background:var(--accent-bg);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-line)}
[data-theme="light"] .cmdk-o[aria-selected="true"]{background:var(--accent-bg)}
[data-theme="light"] .tab[aria-selected="true"]::after,[data-theme="light"] .tab[aria-current="page"]::after{background:var(--beam-ink)}
[data-theme="light"] .stepper li[data-state="done"]::before{background:rgba(var(--tone-ink-c),.40)}
[data-theme] .faq-q::after{border-color:var(--hue-ssl)}
[data-theme="light"] .le-chip{border-color:var(--accent-line);color:var(--accent-ink);background:var(--accent-bg)}
/* ціна-герой і підсумки — колір луча (градієнтний текст; color — суцільна запаска для перевірок контрасту) */
[data-theme] .p-big,[data-theme] .cart-total b{color:var(--beam-solid);background:var(--beam-lg);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* картки: тепла тінь; картка покупки — тонка кромка луча */
[data-theme="light"] .card,[data-theme="light"] .tbl-wrap{box-shadow:var(--card-shadow)}
[data-theme="light"] .tbl-wrap.is-stacked{box-shadow:none}
[data-theme="light"] .tbl-wrap.is-stacked .tbl tr{box-shadow:var(--card-shadow)}
[data-theme="light"] .tbl-wrap.is-stacked .tbl tbody tr:hover{background:var(--surface)}
[data-theme="light"] .pcard,[data-theme="light"] .exact{background:var(--glass-bg) padding-box,linear-gradient(#FFFFFF,#FFFFFF) padding-box,var(--edge) border-box;border-color:transparent}
/* таблиці: тонована шапка, виділений рядок — фіалковий тон */
[data-theme="light"] .tbl thead tr{background:var(--tint-th)}
[data-theme="light"] .tbl tbody tr:hover{background:rgba(var(--tone-a),.06)}
[data-theme="light"] .tbl tr[aria-selected="true"]{background:var(--accent-bg)}
/* коротка відповідь і пояснення — теплий тон замість сірого */
[data-theme="light"] .answer{background:var(--tint-warm);border-color:rgba(var(--tone-ink-b),.12)}
[data-theme="light"] .callout:not(.callout-warn){background:rgba(var(--tone-ink-c2),.06);border-color:rgba(var(--tone-ink-c),.14)}
[data-theme="light"] .callout:not(.callout-warn) > .ic{color:var(--hue-ssl)}
[data-theme="light"] .empty-ic{background:var(--accent-bg);color:var(--hue-ssl)}

/* Підпис статті: автор і дати під заголовком (SEO-план п. 11; ті самі дати, що в Article JSON-LD) */
.byline{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--text-3)}
.byline + .lead{margin-top:16px}   /* підзаголовок після підпису статті (/changelog/) стояв упритул */

/* Логотип «ZRAZU |•» (Р213-4): вордмарк + каретка кольору променя й крапка через пробіл; картинка під тему.
   Шапки сайту, кошика й кабінетів VSE/HUB. Після крапки в кабінетах — плашка .side-tag. */
.brand-lk{display:inline-flex;align-items:center}
.brand-lk img{display:block;height:18px;width:auto}
.brand-lk .lk-l{display:none}
html[data-theme="light"] .brand-lk .lk-d{display:none}
html[data-theme="light"] .brand-lk .lk-l{display:block}
.brand:has(.brand-lk){gap:0}
.brand-lk + .side-tag{margin-left:7px}