/* компоненты: Button, Chip, Stepper, Search, ResultCard, Price, Qty, CartPanel, Dialog, Toast, Banner, Breadcrumbs, Badge.
   Каждое состояние показано на /_kit/. Классы состояний: .is-sel / [aria-pressed=true], [aria-disabled=true], .is-busy, .is-err */

/* ---------- Button ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--tap);padding:0 var(--s5);border:1px solid transparent;border-radius:var(--r2);font-weight:600;font-size:15px;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background-color var(--d-1) var(--ez),border-color var(--d-1) var(--ez),transform 90ms var(--ez)}
.btn:active{transform:translateY(1px)}
.btn-go{background:var(--xg);color:var(--xg-on)}
.btn-go:hover{background:var(--xg-press);box-shadow:0 8px 18px -8px rgba(47,125,67,.6)}
.btn-line{background:var(--card);border-color:var(--rule-ctl);color:var(--ink)}
.btn-line:hover{border-color:var(--ink);box-shadow:var(--shadow-1)}
.btn-text{background:none;border:0;padding:0 var(--s2);color:var(--xg-text);text-decoration:underline;text-underline-offset:3px;font-weight:500}
.btn[aria-disabled=true],.btn:disabled{background:var(--rule-2);color:var(--ink-3);border-color:transparent;cursor:not-allowed}
.btn.is-busy{color:transparent;position:relative}
.btn.is-busy::after{content:'';position:absolute;width:18px;height:18px;border:2px solid var(--xg-on);border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
.btn.is-done{background:var(--card);border-color:var(--xg);color:var(--xg-text)}
.btn-wide{width:100%}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Chip (значение на шкале) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--tap);min-width:56px;padding:0 var(--s4);background:var(--card);border:1px solid var(--rule-ctl);border-radius:var(--r1);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink);transition:border-color var(--d-1) var(--ez),background-color var(--d-1) var(--ez),color var(--d-1) var(--ez),box-shadow var(--d-1) var(--ez)}
.chip:hover{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
/* указатель шкалы над выбранным значением */
.chip[aria-pressed=true]::before{content:'';position:absolute;left:50%;top:-5px;width:1px;height:8px;background:var(--mag);transform:translateX(-50%)}
.chip[aria-disabled=true]{color:var(--ink-3);background:repeating-linear-gradient(-45deg,transparent 0 6px,var(--rule-2) 6px 7px),var(--card);border-style:dashed;cursor:not-allowed}
.chip[aria-disabled=true]{border-color:var(--rule)}
.chip[aria-disabled=true]:hover{border-color:var(--rule);box-shadow:none}
.chip .ring{width:12px;height:12px;border-radius:50%;background:var(--c,var(--rule));box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.chip[aria-disabled=true] .ring{opacity:.35}
.chip-sys{font-weight:500}
.chip-all{border-style:dashed;color:var(--ink-2)}

/* ---------- Stepper: шаги подбора на «золотой линии» ---------- */
.stepper{position:relative;display:grid;grid-template-columns:repeat(5,1fr);margin:0;padding:0 0 10px;list-style:none}
.stepper::after{content:'';position:absolute;left:0;right:0;bottom:0;height:10px;
  background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 1px no-repeat,
             repeating-linear-gradient(90deg,var(--gold-soft) 0 1px,transparent 1px 8px) 0 100%/100% 4px no-repeat,
             repeating-linear-gradient(90deg,var(--gold) 0 1px,transparent 1px 40px) 0 100%/100% 8px no-repeat;pointer-events:none}
.stepper li{min-width:0}
/* шаг: номер в круге · подпись · значение · пояснение («изменить» у пройденных, «сейчас», почему недоступен) — замечание Петра 11.10 */
.stepper button{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:'n s' 'v v' 'e e';column-gap:6px;row-gap:1px;align-items:center;width:100%;min-height:58px;padding:var(--s2) var(--s2) var(--s2) var(--s1);background:none;border:0;text-align:left;border-radius:var(--r2) var(--r2) 0 0;color:var(--ink);transition:background-color var(--d-1) var(--ez)}
.stepper button:disabled{cursor:default}
.stepper .sc{display:contents}
.stepper .sc b{grid-area:n;display:grid;place-items:center;width:22px;height:22px;margin-bottom:2px;border-radius:50%;border:1.5px solid var(--rule-ctl);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2);letter-spacing:0;font-variant-caps:normal}
.stepper .sc span{grid-area:s;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stepper .v{grid-area:v;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;color:var(--ink)}
.stepper .v:empty::before{content:'\2014';color:var(--ink-3);font-weight:400}
.stepper .ed{grid-area:e;font-size:12px;line-height:1.3;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* пройденный: галочка-кружок, «изменить» ссылкой */
.stepper .is-done .sc b{background:var(--ink);border-color:var(--ink);color:#fff}
.stepper .is-done .ed{justify-self:start;max-width:100%;margin-top:2px;padding:1px 7px;border:1px solid var(--xg-text);border-radius:999px;color:var(--xg-text);font-weight:600}
.stepper .is-done:hover .ed{background:var(--xg-text);color:#fff}
.stepper .is-done:hover{background:var(--card)}
.stepper .is-done:hover .v{text-decoration:underline;text-underline-offset:3px}
.stepper .is-done:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
/* текущий: маджента, подложка */
.stepper [aria-current=step]{background:var(--mag-tint);box-shadow:inset 0 -3px 0 var(--mag)}
.stepper [aria-current=step] .sc b{background:var(--mag);border-color:var(--mag);color:#fff}
.stepper [aria-current=step] .sc span{color:var(--mag)}
.stepper [aria-current=step] .ed{color:var(--mag);font-weight:600}
/* недоступный: приглушён, пояснение «после шага N» / «только D-type» */
.stepper button:disabled .sc b{border-style:dashed;border-color:var(--rule);color:var(--ink-3)}
.stepper button:disabled .v{color:var(--ink-3);font-weight:500}
.stepper .is-skip .v{color:var(--ink-3);font-weight:500}
/* «‹ Назад» у заголовка шага */
.ph-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4)}
.ph-row h2{min-width:0}
.ph-n{display:block;margin-bottom:2px;font-size:12px;font-weight:600;letter-spacing:.06em;font-variant-caps:all-small-caps;color:var(--ink-3)}
.btn-back{flex:none;order:-1;gap:6px;min-height:var(--tap);padding:0 var(--s4) 0 var(--s3);background:var(--card);border-color:var(--rule-ctl);color:var(--ink);font-size:15px}
.btn-back .ar{font-size:22px;line-height:1;margin-top:-3px;font-weight:500}
.btn-back small{font-size:14px;font-weight:500;color:var(--ink)}
.btn-back:hover{border-color:var(--ink);box-shadow:var(--shadow-1)}
@media (max-width:719px){
  .stepper button{grid-template-columns:minmax(0,1fr);grid-template-areas:'n' 'v' 'e';justify-items:start;min-height:56px;padding:6px 4px 6px 2px;column-gap:0}
  .stepper .sc b{width:20px;height:20px;font-size:11px;margin:0 0 2px}
  .stepper .sc span{display:none}
  .stepper .v{font-size:12.5px}
  .stepper .ed{font-size:11px}
  .ph-row{flex-direction:column;gap:var(--s2)}
  .btn-back{min-height:40px}
  .stepper .is-done .ed{padding:0 4px;font-size:10.5px;letter-spacing:-.01em;text-overflow:clip}
  .stepper button{padding-right:2px}
}

/* ---------- Search ---------- */
.search{position:relative;display:flex;align-items:stretch;border:1px solid var(--ink-3);border-radius:var(--r2);background:var(--card);transition:border-color var(--d-1) var(--ez),box-shadow var(--d-1) var(--ez)}
.search:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(42,46,51,.08)}
.search img{width:20px;height:20px;margin:0 0 0 var(--s4);align-self:center;opacity:.7}
.search input{flex:1;min-width:0;min-height:52px;padding:0 var(--s3);border:0;background:none;font-size:17px;font-weight:500;outline:none}
.search input::placeholder{color:var(--ink-3);font-weight:400}
.search input::-webkit-search-cancel-button{display:none}
.search .clr{width:var(--tap);border:0;background:none;color:var(--ink-2);font-size:22px;line-height:1}
.search .clr[hidden]{display:none}
.qmeta{min-height:20px;margin-top:var(--s2);font-size:13px;color:var(--ink-2)}
.list{display:flex;flex-direction:column;margin-top:var(--s2);border-top:1px solid var(--rule-2);max-height:min(46vh,360px);overflow:auto;overscroll-behavior:contain}
.list button{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:var(--tap);padding:var(--s2) var(--s2);background:none;border:0;border-bottom:1px solid var(--rule-2);text-align:left;font-weight:500}
.list button:hover,.list button:focus-visible{background:var(--rule-2)}
.list button small{color:var(--ink-3);font-size:12px;font-weight:500;white-space:nowrap}
.none{padding:var(--s4) 0;color:var(--ink);font-size:15px}
.none p+p{margin-top:var(--s2);color:var(--ink-2);font-size:14px}

/* ---------- Banner (предупреждение / заметка) ---------- */
.note{display:flex;gap:var(--s3);padding:var(--s3) var(--s4);border-left:3px solid var(--warn-rule);background:var(--warn-bg);color:var(--warn-ink);font-size:14px;line-height:1.45;border-radius:0 var(--r2) var(--r2) 0}
.note b{color:#4d3400}
.note-info{border-left-color:var(--rule);background:var(--card);color:var(--ink-2)}
.note-info b{color:var(--ink)}
.tag{display:inline-block;padding:1px 6px;margin-right:6px;border:1px solid currentColor;border-radius:var(--r1);font-size:11px;font-weight:700;letter-spacing:.04em;font-variant-caps:all-small-caps;vertical-align:1px}

/* ---------- Cookie-полоса ≤ 64 px ---------- */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:var(--s3);max-height:64px;min-height:56px;padding:6px var(--s4) calc(6px + env(safe-area-inset-bottom)) var(--s6);background:var(--ink);color:#eef1f4;font-size:13px;line-height:1.35;box-shadow:0 -6px 20px rgba(20,24,28,.15);transform:translateY(0);transition:transform var(--d-2) var(--ez)}
.cc[hidden]{display:none}
.cc p{flex:1;min-width:0}
.cc a{color:#b9e4bb}
.cc .btn{min-height:40px;padding:0 var(--s4);font-size:14px}
/* две равные кнопки: один вес, один размер — согласие без «тёмного паттерна» */
.cc .btn-cc{flex:none;min-width:116px;justify-content:center;background:transparent;color:#fff;border:1px solid #c9ced4;font-weight:600}
.cc .btn-cc:hover{background:rgba(255,255,255,.1)}
.cc.is-cta{bottom:72px}
@media (max-width:719px){.cc{padding-left:var(--s4);font-size:12px;gap:var(--s2)}.cc .btn{padding:0 var(--s3)}.cc .btn-cc{min-width:92px}.cc .lg{display:none}}

/* ---------- Price ---------- */
.price{display:flex;flex-direction:column;gap:2px}
.price .p{font-size:34px;font-weight:300;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.price .p small{font-size:.55em;font-weight:500;margin-left:4px}
.price .m{font-size:13px;color:var(--ink-2);line-height:1.45}
.stock{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.stock::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--xg)}
.stock.no{color:var(--warn-ink)}.stock.no::before{background:#d08a1a}
.stock.ok{color:var(--xg-text)}

/* ---------- Qty ---------- */
.qty{display:inline-flex;align-items:stretch;border:1px solid var(--rule-ctl);border-radius:var(--r2);background:var(--card);height:var(--tap)}
.qty button{width:var(--tap);border:0;background:none;font-size:20px;line-height:1;color:var(--ink);transition:background-color var(--d-1) var(--ez)}
.qty button:hover:not(:disabled){background:var(--paper)}
.qty button:disabled{color:var(--rule);cursor:default}
.qty input{width:3.2ch;border:0;border-left:1px solid var(--rule-2);border-right:1px solid var(--rule-2);text-align:center;font-weight:600;font-size:16px;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield;background:none}
.qty input::-webkit-inner-spin-button,.qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.qty-s{height:36px}.qty-s button{width:36px;font-size:18px}.qty-s input{font-size:14px}

/* ---------- Roll: прокрутка цифр (сумма, счётчик) ---------- */
.roll{display:inline-flex;font-variant-numeric:tabular-nums;line-height:1;height:1em;overflow:hidden;vertical-align:-.12em}
.roll .d{display:inline-block;height:1em;overflow:hidden}
.roll .d i{display:flex;flex-direction:column;font-style:normal;transition:transform 250ms var(--ez)}
.roll .d i span{height:1em;line-height:1}
.roll .s{display:inline-block;height:1em;line-height:1}

/* бейдж заявки — css/chrome.css (.stm-cartbtn) */

/* ---------- Dialog ---------- */
dialog{border:0;padding:0;color:var(--ink);background:var(--card)}
dialog::backdrop{background:rgba(26,30,34,.42)}
.dlg{width:min(520px,calc(100vw - 32px));border-radius:var(--r3);box-shadow:var(--shadow-2)}
.dlg[open]{animation:dlgIn var(--d-2) var(--ez)}
@keyframes dlgIn{from{opacity:0;transform:translateY(8px) scale(.985)}}
.dlg-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s4) var(--s4) var(--s4) var(--s6);border-bottom:1px solid var(--rule-2)}
.dlg-h h2{font-size:var(--t-l);font-weight:700}
.dlg-x{width:var(--tap);height:var(--tap);border:0;background:none;font-size:26px;line-height:1;color:var(--ink-2);border-radius:var(--r2)}
.dlg-x:hover{background:var(--rule-2)}
.dlg-b{padding:var(--s5) var(--s6) var(--s6)}
.dlg-b p+p{margin-top:var(--s3)}
.dlg-f{display:flex;gap:var(--s2);flex-wrap:wrap;padding:0 var(--s6) var(--s6)}

/* ---------- CartPanel: справа на ноутбуке, снизу на телефоне ---------- */
.panel{position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,100vw);height:100dvh;max-height:none;max-width:none;display:none;flex-direction:column;box-shadow:var(--shadow-2)}
.panel[open]{display:flex;animation:panIn var(--d-2) var(--ez)}
@keyframes panIn{from{transform:translateX(24px);opacity:0}}
.panel .dlg-b{flex:1;overflow:auto;padding-top:var(--s2)}
.ci{display:grid;grid-template-columns:56px 1fr auto;gap:var(--s2) var(--s3);align-items:start;padding:var(--s4) 0;border-bottom:1px solid var(--rule-2)}
.ci .pic{width:56px;height:72px;border-radius:var(--r2);background:linear-gradient(180deg,var(--studio-hi),var(--studio-lo));display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.ci .pic img{height:64px;width:auto}
.ci b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.ci .sub{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-2);line-height:1.4}
.ci .row{grid-column:2/-1;display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.ci .sum{font-weight:600;font-variant-numeric:tabular-nums}
.ci .x{width:36px;height:36px;border:0;background:none;color:var(--ink-3);font-size:20px;border-radius:var(--r2)}
.ci .x:hover{background:var(--rule-2);color:var(--ink)}
.tot{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);padding:var(--s4) 0 var(--s1)}
.tot .v{font-size:30px;font-weight:300}
.panel .dlg-f{flex-direction:column;padding-top:var(--s4);border-top:1px solid var(--rule-2)}
.panel .dlg-f .two{display:flex;gap:var(--s2)}
.panel .dlg-f .two .btn{flex:1}
.panel .dlg-f .alt{font-size:13px;color:var(--ink-2);text-align:center}
.empty{padding:var(--s12) 0;text-align:center;color:var(--ink-2)}
@media (max-width:719px){
  .panel{inset:auto 0 0 0;width:100vw;height:auto;max-height:88dvh;border-radius:var(--r3) var(--r3) 0 0}
  .panel[open]{animation:sheetIn var(--d-2) var(--ez)}
  @keyframes sheetIn{from{transform:translateY(32px);opacity:0}}
}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;top:calc(var(--head-h) + 12px);z-index:70;max-width:min(92vw,480px);padding:10px 16px;border-left:3px solid var(--xg);border-radius:var(--r2);background:var(--ink);color:#fff;font-size:14px;box-shadow:var(--shadow-2);transform:translateX(-50%);animation:toastIn var(--d-2) var(--ez)}
.toast[hidden]{display:none}
.toast.is-err{border-left-color:#e0a24a}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-6px)}}

/* ---------- Breadcrumbs ---------- */
.crumbs ol{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0;list-style:none;font-size:13px;color:var(--ink-2)}
.crumbs li+li::before{content:'/';margin-right:var(--s2);color:var(--ink-3)}
.crumbs a{color:var(--ink-2)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* ---------- Плашка клейма ---------- */
.plate{position:relative;display:inline-flex;align-items:center;gap:var(--s3);padding:6px 12px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ink);background:var(--card)}
.plate small{font-weight:600;color:var(--ink-3);letter-spacing:.06em;font-variant-caps:all-small-caps;font-size:13px}
/* рамка клейма: уголки-риски вместо сплошной обводки */
.plate::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--ink),var(--ink)) 0 0/8px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 0/1px 8px no-repeat,
             linear-gradient(var(--ink),var(--ink)) 100% 0/8px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 0/1px 8px no-repeat,
             linear-gradient(var(--ink),var(--ink)) 0 100%/8px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 100%/1px 8px no-repeat,
             linear-gradient(var(--ink),var(--ink)) 100% 100%/8px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 100%/1px 8px no-repeat}

/* ---------- SearchResult: системы, товары, артикулы (главная и каталог) ---------- */
.grp{padding:var(--s3) var(--s4) var(--s1);font-size:12px}
.sr{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:center;min-height:var(--tap);padding:var(--s2) var(--s4);border-top:1px solid var(--rule-2);color:var(--ink);text-decoration:none;font-size:15px;font-weight:500}
.sr:hover,.sr:focus-visible{background:var(--rule-2)}
.sr small{color:var(--ink-3);font-size:12.5px;font-weight:500}
.sr small.warn{color:var(--warn-ink)}
.sr .o{display:block;font-size:12.5px;color:var(--ink-2);font-weight:400}
.sr-prod{grid-template-columns:40px 1fr auto}
.sr-prod img,.sr-prod .ph{width:40px;height:40px;object-fit:contain;mix-blend-mode:multiply;border-radius:var(--r1);background:linear-gradient(180deg,var(--studio-hi),var(--studio-lo))}
.sr-more{grid-template-columns:1fr;color:var(--xg-text);font-size:14px}
.qpart{padding:var(--s3) var(--s4) 0;font-size:13px;color:var(--warn-ink)}
.none-abs b{color:var(--ink)}
/* выдача на главной (подбор): товары каталога под списком систем */
.list .catg{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.list .catg .sr{border-top:0;border-bottom:1px solid var(--rule-2);padding-left:var(--s2);padding-right:var(--s2)}
.list .catg .grp{padding:var(--s3) var(--s2) var(--s1)}