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

/* ---------- Загальне для bare-сторінок розділу ---------- */
.cm-stepper-wrap{margin:0 auto 32px}         /* по центру, як і вміст (було margin:0 — .wrap тиснувся до x=0) */
.cm-h1{margin-bottom:8px}
.cm-h1 + :not(.cm-sub):not(.cm-demo-note){margin-top:20px}   /* картка або статус одразу під H1 липли до заголовка */
.cm-sub{margin:0 0 28px;color:var(--text-2);font-size:16px;max-width:56ch}
/* «кошик порожній — показуємо приклад»: окремою плашкою, а не дрібним рядком упритул між H1 і підзаголовком */
.cm-demo-note{width:fit-content;max-width:100%;margin:4px 0 14px;padding:6px 12px;border-radius:12px;background:var(--fill-1);border:1px solid var(--line)}
.cm-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:18px;color:var(--text-2);text-decoration:none;font-size:14px;min-height:32px}
.cm-back:hover{color:var(--text)}

/* ---------- Кошик ---------- */
.cm-cart-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:28px;align-items:start}
.cm-cart-list{display:grid;gap:14px;min-width:0}
.cm-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;display:grid;gap:12px;min-width:0}
.cm-item-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.cm-item-id{min-width:0}
.cm-item-kind{display:block;margin:0 0 4px;font-size:13px;font-weight:650;letter-spacing:.03em;text-transform:uppercase;color:var(--text-3)}
.cm-item-name{font-size:21px;font-weight:680;letter-spacing:-.02em;word-break:break-word}
.cm-item-name .z{color:var(--text-2);font-weight:600}
.cm-item-sub{margin:4px 0 0;font-size:14px;color:var(--text-2)}
.cm-item-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.cm-item-price{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.cm-item-price small{display:block;font-size:13px;font-weight:500;color:var(--text-2);text-align:right}
.cm-nohold{display:flex;gap:6px;align-items:flex-start;margin:0;font-size:13px;color:var(--text-2)}
.cm-nohold .ic{margin-top:1px;flex:none}
.cm-le-note{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:14px;color:var(--text-2)}
.cm-le-note .ic{margin-top:2px;color:var(--free);flex:none}
.cm-item-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-top:10px;border-top:1px solid var(--line)}
.cm-row-l{font-size:14px;color:var(--text-2);flex:none}
.cm-term-opt{display:flex;flex-direction:column;line-height:1.2}
.cm-term-opt b{font-weight:600}
.cm-term-opt small{color:inherit;opacity:.75;font-size:12px}
.cm-ssl-for{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:14px}
.cm-ssl-for .select{min-height:38px;padding:0 12px;font-size:14px}

.cm-vat-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;margin-top:16px;display:grid;gap:12px}
.cm-vat-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.cm-vat-head h2{margin:0;font-size:16px;font-weight:660}
.cm-vat-panel{display:grid;gap:10px;padding:14px 16px;border-radius:14px;background:var(--fill-2);border:1px solid var(--line);font-size:14px}
.cm-vat-panel dl{margin:0;display:grid;gap:8px}
.cm-vat-panel dl div{display:grid;grid-template-columns:minmax(120px,.9fr) minmax(0,1.4fr);gap:4px 16px}
.cm-vat-panel dt{color:var(--text-2)}
.cm-vat-panel dd{margin:0}

.cm-side{position:sticky;top:calc(var(--hdr) + 20px)}
.cm-summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 24px;display:grid;gap:14px}
.cm-summary h2{margin:0;font-size:16px;font-weight:660}
.cm-total-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.cm-total-row b{font-size:24px;font-weight:720;font-variant-numeric:tabular-nums}
.cm-summary .fine-s{margin:0}

/* ---------- Порожній кошик ---------- */
.cm-empty-wrap{padding:12px 0 8px}

/* ---------- Підтвердження імені (Р77) ---------- */
.cm-confirm-list{display:grid;gap:18px}
.cm-confirm-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:26px 28px;display:grid;gap:14px}
.cm-confirm-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px}
.cm-name-big{font-family:var(--mono);font-size:clamp(26px,5.2vw,40px);font-weight:640;letter-spacing:.005em;line-height:1.15;word-break:break-word;margin:0}
.cm-name-big .z{color:var(--text-2)}
.cm-confirm-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--text-2);margin:0}
.cm-idn{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;font-size:14px;color:var(--text-2);margin:0}
.cm-idn code{font-family:var(--mono);font-size:14px;background:var(--code-bg);border:1px solid var(--line);padding:3px 9px;border-radius:8px;color:var(--text)}
.cm-nonrefund{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:14px}
.cm-nonrefund .ic{margin-top:2px;color:var(--warn);flex:none}
.cm-ssl-line{display:flex;gap:10px;align-items:flex-start;font-size:15px;margin:0}
.cm-ssl-line .ic{margin-top:2px;color:var(--free);flex:none}
.cm-confirm-status{margin-top:2px}
.cm-confirm-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;margin-top:4px;border-top:1px solid var(--line);font-size:18px;font-weight:650}
.cm-confirm-total b{font-size:24px;font-variant-numeric:tabular-nums}
.cm-confirm-actions{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-top:22px}

/* ---------- Оплата ---------- */
.cm-pay-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:28px;align-items:start}
.cm-pay-sec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 24px;display:grid;gap:16px;margin-bottom:16px}
.cm-pay-sec h2{margin:0;font-size:17px;font-weight:660}
.cm-payer-types{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.cm-payer-types .check{border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-height:0}
.cm-payer-types .check[data-on] {border-color:var(--line-3);background:var(--fill-1)}
.cm-payer-fields{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cm-seller-line{margin:0;font-size:14px;color:var(--text-2)}   /* був flex: текстові шматки переносились окремо, «· Чек…» починав рядок */
.cm-seller-line b{color:var(--text);font-weight:650}
.cm-methods{display:grid;gap:2px}
/* Спосіб оплати бере готовий компонент .check: рідна радіокнопка давала ціль 13×13.
   Кегль лишаємо свій — у .check він 16 px, а в списку способів рядок більший. */
.cm-method{display:flex;gap:12px;align-items:flex-start;padding:14px 2px;border-bottom:1px solid var(--line);min-height:0;font-size:inherit}
.cm-method:last-child{border-bottom:0}
.cm-method .ic{margin-top:2px;color:var(--text-2);flex:none}
.cm-method-t{font-weight:600}
.cm-method-s{display:block;font-size:13px;color:var(--text-2);font-weight:400;margin-top:2px}
.cm-method[data-disabled] {opacity:.55}
.cm-method[data-disabled] input{cursor:not-allowed}
.cm-recheck{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.cm-recheck .ic{margin-top:2px;color:var(--info);flex:none}
.cm-offer{margin-top:4px}
.cm-pay-total{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:4px 0}
.cm-pay-total b{font-size:22px;font-variant-numeric:tabular-nums}
.cm-summary > .cm-pay-total:first-child{border-top:0;padding-top:0;margin-top:0}   /* над сумою нічого немає — верхня лінія висіла в порожнечі */
.cm-fail-demo{margin-top:10px}

/* ---------- Готово ---------- */
.cm-done-lead{display:flex;gap:14px;align-items:flex-start;margin-bottom:28px}
.cm-done-ic{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--free-bg);color:var(--free)}
.cm-done-ic .ic{width:26px;height:26px}
.cm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:24px}
.cm-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;display:grid;gap:8px;align-content:start}
.cm-panel h2{margin:0 0 2px;font-size:15px;font-weight:660;display:flex;align-items:center;gap:8px}
.cm-panel h2 .ic{color:var(--text-2)}
.cm-panel p{margin:0;font-size:14px;color:var(--text-2)}
.cm-panel a{align-self:flex-start}
.cm-done-list{display:grid;gap:16px;margin:0 0 28px;padding:0;list-style:none}   /* без відступу маркера списку — у край із картками */
.cm-done-item{display:flex;gap:12px;align-items:flex-start}
.cm-done-item .st{flex:none;margin-top:2px}
.cm-done-item p{margin:2px 0 0;font-size:14px;color:var(--text-2)}
.cm-done .cm-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}   /* п'ять карток в один ряд, без сироти «Кабінет» */
.cm-done-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

/* ---------- Помилка оплати ---------- */
.cm-fail-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:28px 30px;display:grid;gap:16px;max-width:640px}
.cm-fail-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--taken-bg);color:var(--taken)}
.cm-fail-ic .ic{width:26px;height:26px}
.cm-fail-text{font-size:17px;line-height:1.5;margin:0}
.cm-fail-list{margin:0;font-size:14px;color:var(--text-2)}
.cm-fail-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.cm-fail-cases{margin-top:18px;font-size:13px;color:var(--text-3)}
.cm-fail-cases a{color:inherit}

/* ---------- Вхід / реєстрація / відновлення ---------- */
.cm-auth-wrap{max-width:460px}
.cm-auth-card{display:grid;gap:18px}
.cm-auth-step{display:grid;gap:16px}
.cm-auth-alt{display:flex;flex-direction:column;gap:10px;margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}
.cm-auth-alt p{margin:0;font-size:14px;color:var(--text-2)}
.cm-auth-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:18px;font-size:14px}
.cm-passkey-box{display:grid;gap:10px;padding:16px 18px;border-radius:16px;background:var(--fill-2);border:1px solid var(--line)}
.cm-passkey-box p{margin:0;font-size:14px;color:var(--text-2)}
.cm-sent{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:16px;background:var(--info-bg);border:1px solid transparent}
.cm-sent .ic{color:var(--info);margin-top:2px;flex:none}
.cm-sent p{margin:0;font-size:14px}
.cm-sent-ok{background:var(--free-bg)}
.cm-sent-ok .ic{color:var(--free)}
.cm-security-note{margin-top:22px}

/* ---------- Підтвердження пошти / входу за посиланням / нової адреси / підписки (/auth/*, /pidpyska/*) ---------- */
.cm-states{margin-top:22px;font-size:13px;color:var(--text-3)}
.cm-states-l{margin-right:2px}
.cm-states a{color:inherit;text-decoration:underline}
.cm-states a[aria-current]{color:var(--text);font-weight:650}

.cm-recover-tabs{margin-bottom:20px}
.cm-scenario{display:grid;gap:14px}
.cm-scenario p{margin:0;font-size:15px;color:var(--text-2)}
.cm-scenario form{display:grid;gap:16px;justify-items:start}   /* поля «Пошта», «Пароль» і кнопка йшли впритул */
.cm-scenario form .field{width:100%}
.cm-scenario ul,.cm-scenario ol{margin:0;padding-left:20px;font-size:15px;color:var(--text-2);display:grid;gap:4px}
.cm-scenario .cm-steps{gap:8px}
.cm-wait{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.cm-wait .ic{margin-top:2px;color:var(--warn);flex:none}
/* Запит у підтримку під кожним сценарієм і канали «напишіть самі» — без них «напишіть у підтримку» нікуди не веде */
.cm-req{display:grid;gap:12px;margin-top:10px;padding-top:20px;border-top:1px solid var(--line)}
.cm-req .h4{margin:0}
.cm-req-acts{display:flex;flex-wrap:wrap;gap:10px}
.cm-chan-sec{margin:28px 0 14px}
.cm-chan{margin:0;padding:0;list-style:none;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cm-chan li{padding:16px 18px;border-radius:var(--r-md);background:var(--fill-1);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px;font-size:14px}
.cm-chan .ic{color:var(--hue-ssl)}
.cm-chan b{font-size:16px}
.cm-chan a.mono{overflow-wrap:break-word;display:inline-flex;align-items:center;min-height:24px}
@media (pointer:coarse){ .cm-chan a.mono{min-height:44px} }
[data-theme="light"] .cm-chan li{background:var(--surface);box-shadow:var(--card-shadow)}

/* ---------- Перевірка реєстру (Р77): спінер до відповіді ---------- */
.cm-confirm-status[data-check] .ic{animation:cmSpin 1s linear infinite}
.cm-confirm-status.st-free .ic{animation:none}
@keyframes cmSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cm-confirm-status[data-check] .ic{animation:none}}
html[data-rm] .cm-confirm-status[data-check] .ic{animation:none}

/* ---------- Адаптив ---------- */
@media (max-width:1000px){
  .cm-cart-grid,.cm-pay-grid{grid-template-columns:1fr}
  .cm-side{position:static}
}
@media (max-width:760px){
  .cm-item-top{flex-direction:column}
  .cm-item-right{align-items:flex-start;width:100%}
  /* «×» висів окремим рядком під ціною — на телефоні він у правому верхньому куті картки */
  .cm-item{position:relative}
  .cm-item-id{padding-right:44px}
  .cm-item-right [data-remove]{position:absolute;top:12px;right:12px}
  .cm-confirm-top{flex-direction:column}
  .cm-payer-types{grid-template-columns:1fr}
  .cm-fail-card,.cm-confirm-card{padding:22px 18px}
}

/* ---- світла тема (власник дизайн-системи, 28.09.2026; темна не змінюється): картки з теплою тінню, підсумок — колір луча ---- */
[data-theme="light"] .cm-item,[data-theme="light"] .cm-vat-block,[data-theme="light"] .cm-summary,[data-theme="light"] .cm-confirm-card,[data-theme="light"] .cm-pay-sec{box-shadow:var(--card-shadow)}
[data-theme="light"] .cm-summary,[data-theme="light"] .cm-confirm-card{background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,var(--edge) border-box;border-color:transparent}
[data-theme] .cm-total-row b,[data-theme] .cm-confirm-total b{color:var(--beam-solid);background:var(--beam-lg);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
[data-theme] .cm-item:has(.cm-item-name .z) .cm-item-kind{color:var(--hue-dom)}
[data-theme] .cm-item:not(:has(.cm-item-name .z)) .cm-item-kind{color:var(--hue-ssl)}
[data-theme] .cm-item-price small{color:var(--save-ink)}   /* ціна за рік при оплаті на 2–3 роки — вигода (Р172-4) */

/* ---------- /signup/ «Готово»: «звідки дізналися» — необовʼязково, під кнопкою кабінету ---------- */
.cm-heard{display:grid;gap:10px;margin-top:6px;padding-top:18px;border-top:1px solid var(--line)}
.cm-heard-q{margin:0;font-size:16px;font-weight:650}
.cm-heard .fine-s{margin:0}
.cm-heard-ok{margin:0;font-size:14px;font-weight:600}
.cm-heard-ok:empty{display:none}

/* ---------- /quotes/<посилання>/ — кошторис для бухгалтера ---------- */
.cm-q-no{margin:0 0 6px;font-size:14px;font-weight:620;color:var(--text-2);font-variant-numeric:tabular-nums}
.cm-q-no:empty{display:none}
.cm-q-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 20px}
.cm-q-facts>div{padding:12px 14px;border-radius:14px;background:var(--fill-1);border:1px solid var(--line)}
.cm-q-facts dt{margin:0 0 4px;font-size:13px;color:var(--text-2)}
.cm-q-facts dd{margin:0;font-size:15px;font-weight:600}
.cm-q-msg{margin:0 0 16px}
.cm-q-msg:empty{display:none}
.cm-q-ok{background:var(--free-bg);border-color:transparent}
.cm-q-ok .ic{color:var(--free)}
.cm-q-tbl .cm-q-dn{font-size:15px;font-weight:620;white-space:nowrap}
.cm-q-tbl .cm-q-dn .z{color:var(--text-2)}
.cm-q-tbl .cm-q-a{display:block;margin-top:2px;font-size:13px;color:var(--text-2)}
.cm-q-tbl .cm-q-st{margin-top:6px}
.cm-q-tbl tr.is-out .cm-q-dn,.cm-q-tbl tr.is-out td.num{color:var(--text-2);text-decoration:line-through}
.cm-q-tbl tfoot th,.cm-q-tbl tfoot td{padding:14px 18px;border-top:1px solid var(--line);border-bottom:0;font-size:17px;font-weight:650;letter-spacing:0;text-transform:none;color:var(--text)}
.cm-q-vat{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--text-2)}
.cm-q-op-m{display:none}
.cm-q-act{display:grid;gap:14px;margin-top:20px}
.cm-q-act .fine-s{margin:0}
.cm-q-priv{margin-top:24px}
@media (max-width:560px){
  .cm-q-facts{grid-template-columns:1fr}
  .cm-q-tbl .cm-q-op{display:none}
  .cm-q-op-m{display:block;margin-top:2px;font-size:13px;color:var(--text-2)}
  .cm-q-btns .btn{width:100%}
}

/* ---------- Вхід і реєстрація через Google ----------
   Правила Google Sign-In Branding: знак «G» без змін, на однотонному тлі; світла кнопка — біла з сірою рамкою,
   темна — #131314. Кольори тут — вимога бренду Google, а не наша палітра, тому літерали. */
.cm-google-block{display:grid;gap:12px;margin-bottom:18px}
.cm-google{display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 20px;border-radius:999px;box-sizing:border-box;width:100%;
  background:#131314;border:1px solid #8E918F;color:#E3E3E3;font-weight:500;font-size:16px;text-decoration:none;cursor:pointer}
.cm-google:hover{background:#1e1f20}
.cm-google:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.cm-google .cm-g{flex:none;display:block}
[data-theme="light"] .cm-google{background:#FFFFFF;border-color:#747775;color:#1F1F1F}
[data-theme="light"] .cm-google:hover{background:#F6F8FA}
.cm-google-fine{margin:0;text-align:center;max-width:none}
.cm-or{display:flex;align-items:center;gap:14px;margin:4px 0 0;font-size:14px;color:var(--text-2)}
.cm-or::before,.cm-or::after{content:"";flex:1;height:1px;background:var(--line)}
.cm-google-err{margin-bottom:16px}
.cm-google-block[hidden],.cm-google-err[hidden]{display:none}