:root{
  --bg:#141414;--card:#1c1c1c;--input:#242424;--border:#2d2d2d;
  --text:#e8e8e8;--muted:#8a8a8a;--dim:#555;
  --accent:#5294E2;--success:#3aa76d;--warn:#d79a2b;--danger:#c0453b;
  --radius:6px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.hdr{display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;border-bottom:1px solid var(--border);background:var(--card)}
.brand{font-weight:600;font-size:17px;color:var(--text)}
.nav{display:flex;align-items:center;gap:14px}
.wrap{max-width:1000px;margin:0 auto;padding:24px 20px}
.narrow{max-width:380px;margin:0 auto}
h1{font-size:22px;margin:0 0 16px}
h2{font-size:17px;margin:24px 0 12px}
.muted{color:var(--muted)}
.small{font-size:12px}
.big{font-size:22px;font-weight:600}
.price{color:var(--success);font-weight:600;margin:6px 0}
.err{background:rgba(192,69,59,.12);border:1px solid var(--danger);
  color:#e88;padding:8px 12px;border-radius:var(--radius);margin-bottom:14px;font-size:13px}
.card{background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;color:inherit;display:block}
.card-title{font-weight:600;margin-bottom:4px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.grid.stats{grid-template-columns:repeat(4,1fr);margin-bottom:8px}
.fg{margin-bottom:12px}
.fg label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}
.fc{width:100%;padding:8px 10px;background:var(--input);color:var(--text);
  border:1px solid var(--border);border-radius:var(--radius);font-size:14px}
.fc:focus{outline:none;border-color:var(--accent)}
.btn{display:inline-block;padding:8px 14px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--input);color:var(--text);
  font-size:14px;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-p{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-g{background:transparent}
.inline{display:inline}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;color:var(--muted);font-weight:500;
  padding:8px;border-bottom:1px solid var(--border)}
.tbl td{padding:8px;border-bottom:1px solid var(--border)}


.layout{display:flex;align-items:stretch;min-height:calc(100vh - 53px)}
.layout.no-side{display:block}
.side{flex:0 0 190px;background:var(--card);border-right:1px solid var(--border);
  padding:14px 0;font-size:13px}
.side a{display:block;padding:7px 18px;color:var(--muted)}
.side a:hover{background:var(--input);color:var(--text);text-decoration:none}
.side a.on{color:var(--text);background:var(--input);
  box-shadow:inset 3px 0 0 var(--accent)}
.side-group{padding:12px 18px 4px;font-size:11px;text-transform:uppercase;
  letter-spacing:.5px;color:var(--dim)}
.layout .wrap{flex:1;min-width:0}
@media(max-width:700px){
  .layout{display:block}
  .side{border-right:none;border-bottom:1px solid var(--border);
    display:flex;flex-wrap:wrap;gap:4px;padding:8px}
  .side a{padding:5px 10px}
  .side-group{display:none}
}

.tree-cell{white-space:nowrap}
.tree-branch{color:var(--dim);font-family:monospace;margin-right:2px}

.hdr-balance{font-weight:600;color:var(--success);
  padding:3px 8px;border:1px solid var(--border);border-radius:var(--radius)}
.hdr-balance:hover{border-color:var(--success);text-decoration:none}
.hdr-balance .stale{color:var(--warn);margin-left:3px;font-size:11px}

.row-link{cursor:pointer}
.row-link:hover{background:var(--input)}
.row-link:hover td:first-child{box-shadow:inset 2px 0 0 var(--accent)}

/* ── AUTH_V2: вход и регистрация ── */
/* Обёртка центрирует карточку по обеим осям, ширину задаёт САМА карточка.
   Без flex-центрирования блок брал ширину от .wrap и растягивался. */
.auth-wrap{display:flex;align-items:center;justify-content:center;
  min-height:calc(100vh - 120px);padding:16px 0}
.auth-inner{width:100%;max-width:380px}
.auth-brand{text-align:center;margin-bottom:18px}
.auth-logo{max-width:88px;max-height:88px;object-fit:contain;
  border-radius:var(--radius);display:block;margin:0 auto 10px}
.auth-name{font-size:19px;font-weight:600;color:var(--text);word-break:break-word}
.auth-card{width:100%;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px 20px}
.auth-title{font-size:20px;font-weight:600;margin:0 0 18px;text-align:center}
.auth-captcha{display:block;width:100%;height:auto;margin-bottom:8px;
  border-radius:var(--radius);border:1px solid var(--border)}
.auth-submit{display:block;width:100%;padding:11px;font-size:15px;margin-top:4px}
.auth-links{margin-top:14px;text-align:center;font-size:13px;color:var(--muted)}

/* ── Адаптивность: одна точка перелома мало, полей и таблиц много ── */
@media(max-width:520px){
  .wrap{padding:16px 12px}
  .hdr{padding:10px 12px;flex-wrap:wrap;gap:8px}
  .nav{gap:10px;font-size:13px;flex-wrap:wrap}
  .brand{font-size:16px}
  h1{font-size:19px}
  h2{font-size:16px}
  .auth-wrap{min-height:auto;padding:8px 0 24px}
  .auth-card{padding:18px 14px}
  .grid{grid-template-columns:1fr}
  .grid.stats{grid-template-columns:repeat(2,1fr)}
  /* Таблицы шире экрана: даём прокрутить, а не ломать вёрстку */
  .tbl{display:block;overflow-x:auto;white-space:nowrap}
  .fc{font-size:16px}  /* меньше 16px — iOS увеличивает страницу при фокусе */
  .btn{padding:9px 14px}
}
@media(max-width:380px){
  .wrap{padding:12px 8px}
  .auth-card{padding:16px 12px}
  .grid.stats{grid-template-columns:1fr}
}

.range-btn{padding:5px 12px;font-size:12px;border:1px solid var(--border);
  border-radius:var(--radius);text-decoration:none;color:var(--text)}
.range-btn:hover{border-color:var(--accent);text-decoration:none}
.range-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}

.bal-layout{display:flex;gap:16px;align-items:flex-start;margin-bottom:16px}
.bal-left{flex:1;min-width:0}
.bal-right{width:300px;flex-shrink:0}
.tabs{display:flex;gap:6px;margin-bottom:12px}
.tab-btn{padding:6px 16px;font-size:13px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--input);color:var(--text);cursor:pointer}
.tab-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
@media(max-width:700px){
  .bal-layout{flex-direction:column}
  .bal-right{width:100%}
}

.deadline-box{background:var(--input);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px;margin-bottom:12px;text-align:center}
.deadline-timer{font-size:24px;font-weight:600;color:var(--text);margin:4px 0}
.deadline-timer.urgent{color:var(--warn)}
.deadline-timer.expired{color:var(--danger);font-size:18px}

.chat-box{background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px;max-height:520px;overflow-y:auto}
.chat-msg{margin-bottom:12px;padding:8px 10px;border-radius:var(--radius);
  background:var(--input);max-width:80%}
.chat-msg.mine{margin-left:auto;background:rgba(74,158,255,.12)}
.chat-who{font-size:11px;color:var(--muted);margin-bottom:4px}
.chat-text{font-size:14px;white-space:pre-wrap;word-break:break-word}
.chat-photo{max-width:240px;max-height:240px;border-radius:var(--radius);
  margin-top:6px;display:block;cursor:pointer;border:1px solid var(--border)}
.chat-system{text-align:center;font-size:12px;color:var(--muted);
  padding:6px;margin:8px 0;border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)}

.unread-badge{display:inline-block;min-width:18px;padding:1px 6px;
  background:var(--danger);color:#fff;border-radius:9px;
  font-size:11px;font-weight:600;text-align:center;line-height:16px}

.chat-mod{color:var(--danger);font-weight:600}

.notif.unread{border-left:3px solid var(--accent)}
.notif-dot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--accent);margin-right:5px;vertical-align:middle}

/* Меню профиля: раскрывается по наведению, без скриптов —
   так оно работает и при отключённом JS. */
.profile-menu{position:relative;display:inline-block}
.profile-btn{width:32px;height:32px;border-radius:50%;overflow:hidden;border:1px solid var(--border);
  background:var(--input);color:var(--text);font-weight:600;cursor:pointer;
  font-size:14px;line-height:30px;padding:0}
.profile-btn:hover{border-color:var(--accent)}
.profile-drop{display:none;position:absolute;right:0;top:100%;min-width:190px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:6px 0;z-index:50;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.profile-menu:hover .profile-drop,
.profile-menu:focus-within .profile-drop{display:block}
.profile-drop a{display:block;padding:7px 14px;font-size:13px;
  color:var(--text);text-decoration:none}
.profile-drop a:hover{background:var(--input);text-decoration:none}
.profile-name{padding:6px 14px 8px;font-size:12px;color:var(--muted);
  border-bottom:1px solid var(--border);margin-bottom:4px}
@media(max-width:520px){
  .profile-drop{right:auto;left:0}
}

/* Иконки шапки: символы Unicode, без внешних шрифтов —
   политика страницы запрещает загрузку сторонних ресурсов. */
.hdr-icon{position:relative;display:inline-flex;align-items:center;
  justify-content:center;width:34px;height:34px;font-size:17px;
  border-radius:var(--radius);color:var(--text);text-decoration:none;
  border:1px solid transparent}
.hdr-icon:hover{background:var(--input);border-color:var(--border);
  text-decoration:none}
.hdr-icon .unread-badge{position:absolute;top:-2px;right:-2px;
  min-width:15px;padding:0 4px;font-size:10px;line-height:15px}
@media(max-width:520px){
  .hdr-icon{width:30px;height:30px;font-size:15px}
}

/* Иконки нарисованы в SVG прямо в разметке: без внешних файлов
   и шрифтов, как требует политика страницы. currentColor даёт им
   цвет текста и наследование при наведении. */
.hdr-icon svg{width:21px;height:21px;display:block}
.hdr-icon:hover svg{color:var(--accent)}

.current-shop{color:var(--text);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Доска заказов: четыре колонки по состоянию. На узких экранах
   колонки идут одна под другой — горизонтальная прокрутка на телефоне
   неудобнее вертикальной. */
.ord-board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:start}
.ord-col{min-width:0}
.ord-head{font-size:13px;font-weight:600;padding:8px 10px;margin-bottom:8px;
  background:var(--input);border-radius:var(--radius);
  display:flex;justify-content:space-between;align-items:center}
.ord-head span{background:var(--card);padding:1px 7px;border-radius:9px;
  font-size:11px;color:var(--muted)}
.ord-head.danger{color:var(--danger)}
.ord-head.warn{color:var(--warn)}
.ord-head.success{color:var(--success)}
.ord-card{background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:9px;margin-bottom:8px}
.ord-title{font-size:13px;font-weight:600;margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ord-sum{font-size:13px;margin-top:4px}
.ord-btn{display:block;text-align:center;margin-top:7px;
  padding:4px;font-size:11px;text-decoration:none}
.ord-empty{color:var(--muted);font-size:12px;text-align:center;padding:12px}
@media(max-width:1100px){.ord-board{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.ord-board{grid-template-columns:1fr}}

/* Разделы заказов: четыре заголовка со счётчиками, показывается один. */
.ord-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.ord-tab{display:block;padding:10px;text-align:center;text-decoration:none;
  background:var(--input);border:1px solid var(--border);
  border-radius:var(--radius)}
.ord-tab:hover{border-color:var(--accent);text-decoration:none}
.ord-tab.on{background:var(--card);border-color:var(--accent)}
.ord-tab-name{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.ord-tab.on .ord-tab-name{color:var(--text)}
.ord-tab-name.danger{color:var(--danger)}
.ord-tab-name.warn{color:var(--warn)}
.ord-tab-name.success{color:var(--success)}
.ord-tab-num{display:block;font-size:20px;font-weight:700;margin-top:2px}

/* Строка заказа во всю ширину: слева подробности, справа деньги и действия. */
.ord-row{display:flex;gap:14px;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:12px;margin-bottom:8px;flex-wrap:wrap}
.ord-row-main{flex:1;min-width:220px}
.ord-row-side{width:180px;flex-shrink:0;text-align:right}
.ord-row-title{font-size:15px;font-weight:600;margin-bottom:3px}
.ord-row-sum{font-size:17px;font-weight:600}
.ord-reason{margin-top:6px;padding:6px 9px;background:var(--input);
  border-left:2px solid var(--warn);border-radius:var(--radius);
  font-size:12px;white-space:pre-wrap;word-break:break-word}
@media(max-width:620px){
  .ord-tabs{grid-template-columns:repeat(2,1fr)}
  .ord-row-side{width:100%;text-align:left}
}

.ord-thumb{width:60px;height:60px;flex-shrink:0}
.ord-thumb img{width:60px;height:60px;object-fit:cover;
  border-radius:var(--radius);border:1px solid var(--border);background:#000}
.ord-thumb-empty{width:60px;height:60px;display:flex;align-items:center;
  justify-content:center;background:var(--input);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--muted);font-size:22px}
.ord-num{font-family:monospace;font-size:10px;color:var(--muted);word-break:break-all;line-height:1.3}
/* Раскрытие через details: родной элемент, работает без скриптов. */
.ord-details{margin-top:8px}
.ord-details summary{cursor:pointer;font-size:12px;color:var(--accent);
  padding:3px 0;user-select:none}
.ord-details summary:hover{text-decoration:underline}
.ord-payload{white-space:pre-wrap;word-break:break-word;background:var(--input);
  padding:8px;border-radius:var(--radius);font-size:12px;margin:4px 0 0;
  max-height:200px;overflow-y:auto}

.ord-more{display:inline-block;margin-top:8px;font-size:12px;
  color:var(--accent);text-decoration:none}
.ord-more:hover{text-decoration:underline}

.chat-live-note{display:none;font-size:12px;color:var(--muted);
  text-align:center;padding:6px;background:var(--input);
  border-radius:var(--radius);margin-top:8px}

/* ── Переписка в три колонки ── */
.chat3{display:grid;grid-template-columns:250px minmax(0,1fr) 250px;gap:12px;
  align-items:start}

/* Список диалогов */
.chat3-list{background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);overflow-y:auto;
  max-height:calc(100vh - 150px)}
.conv-item{display:flex;gap:8px;align-items:center;padding:8px 8px 8px 6px;
  text-decoration:none;color:var(--text);border-bottom:1px solid var(--border);
  position:relative}
.conv-item:hover{background:var(--input);text-decoration:none}
.conv-item.on{background:var(--input);border-left:3px solid var(--accent);
  padding-left:3px}
.conv-item.dispute .conv-sub{color:var(--danger)}
.conv-ava{width:34px;height:34px;border-radius:50%;background:var(--input);
  border:1px solid var(--border);display:flex;align-items:center;
  justify-content:center;font-weight:600;font-size:14px;flex-shrink:0}
.conv-body{flex:1;min-width:0}
.conv-top{display:flex;justify-content:space-between;gap:6px}
.conv-name{font-size:13px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.conv-time{font-size:10px;color:var(--muted);flex-shrink:0}
.conv-sub{font-size:11px;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* Диалог */
.chat3-main{min-width:0;display:flex;flex-direction:column;
  min-height:calc(100vh - 150px)}
.chat3-head{display:flex;justify-content:space-between;align-items:center;
  gap:8px;padding:10px 12px;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px}
.chat3-title{font-size:14px;font-weight:600;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.chat3-num{font-family:monospace;font-size:12px;color:var(--muted)}
.chat3-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}
.chat3-btn{padding:4px 10px;font-size:14px;line-height:1}
.chat3-box{flex:1;max-height:none;min-height:200px;overflow-y:auto}
.chat3-form{margin-top:8px}
.chat3-form-row{display:flex;gap:8px;margin-top:6px;align-items:center}
.chat3-form-row .fc{flex:1;font-size:12px;padding:4px}

/* Добавление сотрудника */
.staff-drop{position:relative;display:inline-block}
.staff-drop summary{list-style:none;cursor:pointer}
.staff-drop summary::-webkit-details-marker{display:none}
.staff-panel{position:absolute;right:0;top:calc(100% + 4px);width:250px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:8px;z-index:40;
  box-shadow:0 4px 16px rgba(0,0,0,.25)}
.staff-search{font-size:12px;padding:5px 8px;margin-bottom:6px}
.staff-list{max-height:220px;overflow-y:auto}
.staff-row{display:flex;justify-content:space-between;align-items:center;
  gap:6px;padding:5px 2px;font-size:12px;border-bottom:1px solid var(--border)}
.staff-row button{padding:2px 8px;font-size:11px}

/* Сведения справа */
.chat3-side{min-width:0}
.side-card{padding:12px;margin-bottom:10px}
.side-name{font-size:15px;font-weight:600;margin-bottom:8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-group-t{font-size:11px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.4px;margin:12px 0 5px;padding-top:8px;
  border-top:1px solid var(--border)}
.side-row{display:flex;justify-content:space-between;gap:8px;
  font-size:12px;padding:2px 0}
.side-row span{color:var(--muted)}
.side-note{font-size:12px;padding:6px 8px;background:var(--input);
  border-radius:var(--radius);margin-bottom:5px;white-space:pre-wrap;
  word-break:break-word}
.side-num{font-family:monospace;font-size:11px;color:var(--muted);
  word-break:break-all}
.side-prod{font-size:13px;font-weight:600;margin:3px 0}

@media(max-width:1200px){
  .chat3{grid-template-columns:230px 1fr}
  .chat3-side{grid-column:1 / -1;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
}
@media(max-width:760px){
  .chat3{grid-template-columns:1fr}
  .chat3-list{max-height:190px}
  .chat3-box{max-height:50vh}
}

.chat3-empty{display:flex;align-items:center;justify-content:center;
  min-height:50vh;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);color:var(--muted);text-align:center}
.chat3-empty-icon{font-size:38px;opacity:.35;margin-bottom:10px}

.side-link{display:block;color:var(--text);text-decoration:none;
  border-bottom:1px dashed var(--border)}
.side-link:hover{color:var(--accent);text-decoration:none}
/* ── SIDE_ICONS_V3: узкая полоса без раскрытия ── */
/* Подписи через title, как у иконок шапки: выезжающее меню оказалось
   капризным, а всплывающая подсказка работает везде одинаково. */
.side.side-narrow{flex:0 0 54px !important;width:54px !important;
  min-width:54px !important;max-width:54px !important;
  padding:12px 0;overflow:visible}

.side.side-narrow .side-icon{display:flex !important;align-items:center;
  justify-content:center;padding:11px 0;color:var(--muted);
  box-shadow:none;border-left:3px solid transparent}
.side.side-narrow .side-icon:hover{background:var(--input);color:var(--text)}
.side.side-narrow .side-icon.on{color:var(--accent);background:var(--input);
  border-left-color:var(--accent)}
.side.side-narrow .side-icon svg{width:22px;height:22px;flex-shrink:0}

/* Подписи и заголовки групп в узкой полосе не помещаются. */
.side.side-narrow .side-label,
.side.side-narrow .current-shop,
.side.side-narrow .side-group{display:none}

@media(max-width:760px){
  .side.side-narrow{flex:1 1 100% !important;width:100% !important;
    max-width:none !important;min-width:0 !important;
    display:flex;flex-wrap:wrap;justify-content:center;gap:2px}
  .side.side-narrow .side-icon{padding:9px 12px}
}

/* ── Страница товара ── */
.prod-top{display:flex;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.prod-gallery{display:flex;gap:10px;flex-shrink:0}
.prod-thumbs{display:flex;flex-direction:column;gap:8px}
.prod-thumb{display:block;width:66px;height:66px;border-radius:var(--radius);
  overflow:hidden;border:1px solid var(--border);background:#000}
.prod-thumb:hover{border-color:var(--accent)}
.prod-thumb img{width:100%;height:100%;object-fit:cover}

/* Переключение без скриптов: :target подсвечивает выбранный снимок,
   остальные скрыты. Работает по ссылке-якорю. */
.prod-main-img{position:relative;width:380px;height:380px;
  border:1px solid var(--border);border-radius:var(--radius);
  background:#000;overflow:hidden}
.prod-shot{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;opacity:0}
.prod-shot.first{opacity:1}
.prod-shot:target{opacity:1;z-index:2}
.prod-main-img:has(.prod-shot:target) .prod-shot.first{opacity:0}
.prod-noimg{display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:60px;background:var(--input)}

.prod-info{flex:1;min-width:260px}
.prod-cat{font-size:12px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:4px}
.prod-title{font-size:26px;margin:0 0 8px}
.prod-desc{font-size:14px;line-height:1.6;white-space:pre-wrap;
  word-break:break-word}

/* Варианты строками: филиал, способ, размер, крипта, цена-кнопка. */
.var-list{display:flex;flex-direction:column;gap:8px}
.var-row{display:grid;grid-template-columns:1.4fr 1.2fr .7fr 1fr auto;
  gap:12px;align-items:center;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px}
.var-loc{font-size:14px}
.var-del{font-size:13px;color:var(--muted)}
.var-size{font-size:14px;font-weight:600}
.var-crypto{font-size:12px;color:var(--muted);font-weight:400;line-height:1.4}
.var-price{min-width:120px;font-size:15px;font-weight:600;padding:9px 16px}

@media(max-width:900px){
  .prod-main-img{width:300px;height:300px}
}
@media(max-width:700px){
  .prod-gallery{flex-direction:column-reverse;width:100%}
  .prod-thumbs{flex-direction:row}
  .prod-main-img{width:100%;height:300px}
  .var-row{grid-template-columns:1fr 1fr;gap:8px}
  .var-buy{grid-column:1 / -1}
  .var-price{width:100%}
}

.delivery-opt{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;
  border:1px solid var(--border);border-radius:var(--radius);
  margin-bottom:6px;cursor:pointer}
.delivery-opt:hover{background:var(--input)}
.delivery-opt input{margin-top:3px}

/* ── Отзывы по товару ── */
.rev-list{display:flex;flex-direction:column;gap:10px}
.rev-item{display:flex;gap:11px;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);padding:12px}
/* Пока кружок с буквой: фото профиля появятся позже и заменят его. */
.rev-ava{width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--input);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:16px;color:var(--muted)}
.rev-body{flex:1;min-width:0}
.rev-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.rev-rate{font-size:12px;color:var(--warn);font-weight:600}
.rev-prod{font-size:12px;color:var(--muted);margin:1px 0 5px}
.rev-text{font-size:14px;line-height:1.5;white-space:pre-wrap;
  word-break:break-word}
.rev-foot{font-size:11px;color:var(--muted);margin-top:6px}

.profile-btn img{width:100%;height:100%;object-fit:cover;display:block}
.rev-ava-img{object-fit:cover;padding:0}

/* Баннер магазина: пропорции 1200x210 держатся сами, размер
   проверяется при загрузке — растягивать не нужно. */
.shop-banner{display:block;width:100%;max-width:1200px;height:auto;
  border-radius:var(--radius);border:1px solid var(--border);
  margin:10px 0 16px}

/* Ответ магазина — примечание к отзыву, а не второе высказывание:
   поэтому мельче и без своей плашки. */
.rev-reply{margin-top:5px;padding-left:9px;
  border-left:2px solid var(--border);
  font-size:12px;line-height:1.45;color:var(--muted);
  white-space:pre-wrap;word-break:break-word}
.rev-reply-who{font-size:11px;color:var(--muted);font-weight:600;
  display:inline;margin-right:5px}
.rev-answer summary{font-size:11px;padding:2px 0}
.rev-answer{margin-top:4px}

/* Блок загрузки заказа: две строки вместо шести полей столбиком —
   на экран помещается несколько блоков сразу. */
.item-block{border:1px solid var(--border);border-radius:var(--radius);
  padding:7px;margin-bottom:6px;background:var(--input)}
.item-row{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:5px}
.item-row:last-child{margin-bottom:0}
.item-payload{flex:2;min-width:180px;font-size:12px;padding:4px 7px;
  resize:vertical;min-height:30px}
.item-sel{flex:1;min-width:110px;font-size:12px;padding:4px 6px}
.item-file{flex:1;min-width:150px;font-size:11px;padding:3px}
.item-block .fc{margin:0}
.item-del{background:none;border:none;color:var(--danger);cursor:pointer;
  font-size:14px;padding:0 4px;line-height:1}

/* Поле с PGP-сообщением: видно целиком, копируется по нажатию. */
.pgp-box{cursor:pointer;line-height:1.35;resize:vertical;
  background:var(--input);word-break:break-all}
.pgp-box:hover{border-color:var(--accent)}
.pgp-box.copied{border-color:var(--success)}
.pgp-copy{width:100%;margin:6px 0 0;padding:7px}
.pgp-copy.done{border-color:var(--success);color:var(--success)}

/* Ход копирования: доля приблизительная — дамп сжимается на лету,
   и полный размер заранее неизвестен. */
.bk-progress{margin-bottom:10px}
.bk-head{display:flex;justify-content:space-between;gap:8px;
  font-size:12px;margin-bottom:4px;flex-wrap:wrap}
.bk-bar{height:6px;background:var(--input);border-radius:3px;overflow:hidden}
.bk-fill{height:100%;background:var(--accent);border-radius:3px;
  transition:width .4s}
.bk-fill.done{background:var(--success)}
.bk-fill.err{background:var(--danger)}