/* Редактор товарів на Prom: той самий вигляд «Кроки», що й у «Редактора товарів на Хорошоп», — його стилі беремо як є
   (класи hp-…), тут лише своє: галочки типів, вибрані групи / виробники / мітки, підказки міток, список пошукових
   запитів AI, згорнуте «Уже у файлі» й інструкція імпорту. Кольори — лише з токенів /style.css і site.css, тож темна
   тема працює сама. Без inline-стилів: CSP */
@import url("/site/tools/redaktor-tovariv-horoshop.css");

/* помилка «це вивантаження Хорошопа» — посилання кольором тексту помилки */
#hpFileErr a{color:inherit;font-weight:600}

/* тип товару у фільтрі: галочки в рядок, переносяться */
.pr-checks{display:flex;flex-wrap:wrap;gap:0 18px}
.s-form .pr-checks label.check{margin:8px 0 0}

/* вибрані зі списку: «Назва (N) ×» */
.pr-chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:10px 0 0}
.pr-chips li{display:inline-flex;align-items:center;gap:2px;max-width:100%;padding:2px 2px 2px 10px;border:1px solid var(--line);border-radius:99px;background:var(--bg);font-size:13px;line-height:1.35;color:var(--ink)}
.pr-chips li span{overflow-wrap:anywhere}
.pr-x{flex:none;display:inline-grid;place-items:center;min-width:28px;min-height:28px;padding:0;border:0;border-radius:99px;background:none;color:var(--mute);font-size:16px;line-height:1;cursor:pointer}
.pr-x:hover{color:var(--ink)}
.pr-x:focus-visible{outline:2px solid var(--s-link);outline-offset:1px}

/* підказки міток з файлу в «Особистих нотатках» */
.pr-tags{margin-top:8px}
.pr-tags>.hint{margin:0}
.pr-tag-list{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:2px}
.pr-tag-list .copy{font-size:13px;line-height:1.6;text-align:left;overflow-wrap:anywhere}

/* пошукові запити AI: «було → стане» з галочкою «Прийняти» і полем для правки */
.pr-kw{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.pr-kw-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin:0;font-size:14px}
.pr-kw-all{display:inline-flex;gap:14px}
.pr-kw-all .copy{font-size:13px}
.pr-kw-list{list-style:none;padding:0;margin:8px 0 0}
.pr-kw-item{padding:10px 0;border-top:1px solid var(--line)}
.pr-kw-item:last-child{border-bottom:1px solid var(--line)}
.s-form .pr-kw-item label.check{margin:0;overflow-wrap:anywhere}
.pr-kw-lang{margin-top:8px}
.pr-kw-lang .hint{margin:0;overflow-wrap:anywhere}
.pr-kw-lang label{margin-top:6px}
.pr-kw-lang textarea{resize:vertical;min-height:72px}
.pr-kw-lang textarea+.hint{margin-top:2px;font-variant-numeric:tabular-nums}
#kRun .hp-acts{margin-top:8px}
#kMsg{margin:10px 0 0}
#kAsk{margin-top:10px}
#kAsk .hp-acts{margin:0}

/* «Уже у файлі»: згорнуто під перевірками змін */
.pr-file{margin-top:10px;font-size:14px}
.pr-file summary{cursor:pointer;color:var(--s-link);font-weight:600;width:fit-content}
.pr-file .hp-warns{margin-top:8px}

/* інструкція імпорту під кнопками файлів */
.pr-import{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--card)}
.pr-import h3{margin:0 0 8px;font-size:16px;line-height:1.3;color:var(--ink)}
.pr-import .s-list{margin:0;font-size:14px;line-height:1.5}
.pr-import b{color:var(--ink)}

@media(max-width:767px){
  .pr-x{min-width:44px;min-height:44px}
  .pr-tag-list .copy,.pr-kw-all .copy,#kAll,#kNone{display:inline-flex;align-items:center;min-height:44px}
  .pr-file summary{padding:12px 0}
}
@media(max-width:560px){
  .pr-import{padding:12px}
}

/* крок 1: «Звідки товари» — файл Excel чи Prom через API */
.pr-src{margin:6px 0 14px;max-width:420px}
.pr-api .hp-set-row input{flex:1;min-width:0}
.pr-api .hp-acts{margin-top:12px}
#apiTokenState{margin:0 0 10px}

/* крок 5 у режимі API: застосування пачками, помилки по товарах */
.pr-apply .notice{margin:0 0 12px}
.pr-apply .hp-dl-sub .hp-acts{margin-top:8px}
.pr-apply .hp-scroll{margin-top:10px;max-height:360px}
.pr-apply td{overflow-wrap:anywhere}