/* ══════════════════════════════════════════════════════════════
   Волна 4 — Onest self-host (долг K1 волны 3).
   Вариативный woff2 (ось 400–700), подмножества cyrillic + latin.
   fonts.googleapis.com из макетов убран.
   ══════════════════════════════════════════════════════════════ */
@font-face{font-family:"Onest";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/onest-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ══════════════════════════════════════════════════════════════
   Д2 «Витрина» — общие токены и компоненты новых экранов.
   Источник токенов: research/design/05-d2-system.html (без изменений).
   Дисциплина: кегли 12/13/15/20/26/34 · веса 400/600/700 ·
   радиусы 0/8/16 · вертикальный ритм 12/28/64 · теней нет.
   ══════════════════════════════════════════════════════════════ */
:root{
  --bg:#FFFFFF; --soft:#F2F7F5; --line:#E6EDEA; --line-2:#D4DEDA;
  --t1:#10201C; --t2:#5D716B; --t3:#8A9B95;
  --grn:#0C8069; --on-grn:#FFFFFF; --grn-soft:#E7F3EF; --grn-ink:#075D4D;
  --amber:#9C5B24; --brand:#0F957B;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B1210; --soft:#16211D; --line:#22302B; --line-2:#31423B;
    --t1:#E8F0ED; --t2:#9FB0AA; --t3:#7A8B85;
    --grn:#3DCCAA; --on-grn:#05241D; --grn-soft:rgba(61,204,170,.14); --grn-ink:#6FE0C2;
    --amber:#E0A06A; --brand:#13A487;
  }
}
:root[data-theme="dark"]{
  --bg:#0B1210; --soft:#16211D; --line:#22302B; --line-2:#31423B;
  --t1:#E8F0ED; --t2:#9FB0AA; --t3:#7A8B85;
  --grn:#3DCCAA; --on-grn:#05241D; --grn-soft:rgba(61,204,170,.14); --grn-ink:#6FE0C2;
  --amber:#E0A06A; --brand:#13A487;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--t1);
  font-family:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.5;font-weight:400;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
}
a{color:var(--grn);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font-family:inherit}
h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
p{margin:0}
.page{max-width:1200px;margin:0 auto;padding:0 24px}

/* ── шапка ── */
.chrome{border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;
  font-size:13px;color:var(--t2);border-bottom:1px solid var(--line)}
.topbar .geo{color:var(--t1);border-bottom:1px dotted var(--line-2)}
.topbar .geo:hover{text-decoration:none}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.topbar .right a{color:var(--t2)}
.themeswitch{display:flex;gap:12px}
.themeswitch button{border:0;background:none;padding:0;cursor:pointer;font-size:13px;color:var(--t2)}
.themeswitch button[aria-pressed="true"]{color:var(--t1);font-weight:600}
.head{display:flex;align-items:center;gap:28px;padding:12px 0}
.logo{display:flex;align-items:center;gap:12px;color:var(--t1)}
.logo:hover{text-decoration:none}
.logo-mark{width:32px;height:32px;background:var(--brand);border-radius:8px;display:grid;place-items:center;flex:none}
.logo-mark svg{width:20px;height:20px}
.logo-txt b{font-size:15px;font-weight:700;letter-spacing:-.01em;display:block;line-height:1.2}
.logo-txt span{font-size:12px;color:var(--t2);display:block;line-height:1.2}
.sform{flex:1;max-width:520px;display:flex;gap:12px}
.sform input{flex:1;min-width:0;border:1px solid var(--line-2);border-radius:8px;background:var(--bg);
  color:var(--t1);padding:12px;font-family:inherit;font-size:15px}
.sform input::placeholder{color:var(--t2)}
.sform button{border:1px solid var(--line-2);border-radius:8px;background:none;color:var(--t1);
  padding:12px;font-size:15px;cursor:pointer;min-height:44px}
.head nav{margin-left:auto;display:flex;gap:28px;font-size:13px;align-items:center}
.head nav a{color:var(--t2);padding:12px 0}

/* ── тело страницы ── */
.crumbs{font-size:13px;color:var(--t2);padding:12px 0}
.crumbs a{color:var(--t2)}
main{padding-bottom:64px}
.sect{margin-top:64px}
.blk{margin-top:28px}
.stamp{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}
.mut{color:var(--t2)}
.small{font-size:13px}
.micro{font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.sect-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sect-h .cnt{font-size:13px;color:var(--t2)}
.sect-h .stamp{margin-left:auto}

/* ── контейнер-плашка ── */
.box{background:var(--soft);border-radius:16px;padding:28px}
.box--dash{background:none;border:1px dashed var(--line-2);border-radius:16px;padding:28px}

/* ── кнопки: одна залитая на экран ── */
.btn{display:inline-block;background:var(--grn);color:var(--on-grn);border:0;border-radius:8px;
  padding:12px 28px;font-size:15px;font-weight:600;cursor:pointer;min-height:44px;text-align:center}
.btn:hover{text-decoration:none}
.btn-q{display:inline-block;background:none;color:var(--t1);border:1px solid var(--line-2);border-radius:8px;
  padding:12px 28px;font-size:15px;cursor:pointer;min-height:44px;text-align:center}
.btn-q:hover{text-decoration:none;border-color:var(--t2)}

/* ── чипы-пресеты (ссылки на индексируемые адреса) и фильтры ── */
.chips{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
a.chip{border:1px solid var(--line-2);border-radius:8px;padding:12px;font-size:13px;color:var(--t1);
  line-height:1.2;display:inline-block}
a.chip:hover{text-decoration:none;border-color:var(--t2)}
a.chip.on{background:var(--grn-soft);border-color:transparent;color:var(--grn-ink);font-weight:600}

/* ── метки цены ── */
.tag{display:inline-block;font-size:12px;font-weight:600;border-radius:8px;padding:0 8px;line-height:2}
.tag.low{background:var(--grn-soft);color:var(--grn-ink)}
.tag.fair{background:var(--soft);color:var(--t2)}
.tag.chk{background:none;border:1px solid var(--line-2);color:var(--t2);font-weight:400}

/* ── строка товара (листинг/поиск/товары магазина) ── */
.rows{display:flex;flex-direction:column}
.prow{display:grid;grid-template-columns:64px 1fr 220px;gap:28px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line)}
.prow .th{aspect-ratio:1;border-radius:8px;flex:none;
  background:repeating-linear-gradient(135deg,var(--soft) 0 8px,var(--line) 8px 16px)}
.pname{display:block;font-size:15px;font-weight:600}
.pname a{color:var(--t1)}
.pmeta{display:block;font-size:13px;color:var(--t2)}
.prange{text-align:right}
.pmin{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em}
.pmin .cur{font-size:13px;font-weight:400;color:var(--t2)}
.pmax{display:block;font-size:13px;color:var(--t2)}

/* ── мини-шкала разброса: мотив ломаной ── */
.minibar{display:block;margin-top:12px;height:4px;background:var(--line);position:relative}
.minibar i{position:absolute;top:0;bottom:0;background:var(--grn)}
.minibar b{position:absolute;top:-3px;width:2px;height:10px;background:var(--t1)}

/* ── большая шкала разброса ── */
.track{position:relative;height:40px}
.track .axis{position:absolute;left:0;right:0;top:26px;height:1px;background:var(--line-2)}
.track i{position:absolute;top:17px;width:1px;height:11px;background:var(--t3)}
.track i.lo{height:20px;top:10px;width:2px;background:var(--grn)}
.track i.hi{height:20px;top:10px;width:2px;background:var(--amber)}
.track i.med{height:26px;top:7px;width:1px;background:var(--t1)}
.track-legend{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--t2)}
.track-legend .c{color:var(--t1)}

/* ── таблицы данных: радиус 0, волосяные линейки, чередование фоном ── */
table.data{width:100%;border-collapse:collapse}
table.data thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--t2);
  font-weight:400;text-align:left;padding:0 12px 12px 0;border-bottom:1px solid var(--line-2)}
table.data thead th.r{text-align:right;padding-right:0}
table.data tbody tr:nth-child(even){background:var(--soft)}
table.data tbody td{padding:12px 12px 12px 0;vertical-align:middle;font-size:15px;border-bottom:1px solid var(--line)}
table.data tbody td.r{text-align:right;padding-right:0}
table.data tbody td:first-child{padding-left:0}
.price{font-size:15px;font-weight:600;letter-spacing:-.01em}
.price.lo{color:var(--grn)}
.unk{color:var(--t2);font-size:13px}

/* ── магазин в строке ── */
.shop{display:flex;align-items:center;gap:12px}
.ava{width:32px;height:32px;border-radius:8px;background:var(--soft);color:var(--t2);
  display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}
.sname{font-weight:600;font-size:15px}
.srate{font-size:13px;color:var(--t2)}
.srate.none{color:var(--t2)}
.own-tag{font-size:12px;color:var(--grn-ink);background:var(--grn-soft);border-radius:8px;padding:0 8px;margin-left:8px}

/* ── подпись-значение ── */
dl.kv{margin:0}
dl.kv .row{display:grid;grid-template-columns:220px 1fr;gap:28px;padding:12px 0;border-bottom:1px solid var(--line)}
dl.kv dt{color:var(--t2);font-size:15px}
dl.kv dd{margin:0;font-size:15px}

/* ── подвал ── */
.foot{margin-top:64px;border-top:1px solid var(--line);padding:28px 0 64px;font-size:13px;color:var(--t2)}
.foot .grp{display:flex;gap:12px 28px;flex-wrap:wrap;align-items:baseline;margin-top:12px}
.foot .grp:first-child{margin-top:0}
.foot .lbl{color:var(--t2)}
.foot a{color:var(--grn)}

/* ── пагинация ссылками ── */
.pager{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--t2)}
.pg{display:flex;align-items:center;gap:12px}
.pg b,.pg a{min-width:44px;min-height:44px;display:grid;place-items:center;border-radius:8px;font-size:13px}
.pg b{background:var(--t1);color:var(--bg);font-weight:600}
.pg a{color:var(--t1);border:1px solid var(--line-2)}

/* ── демонстрационная зона состояния (только для макета) ── */
.demo{margin-top:64px;border-top:1px dashed var(--line-2);padding-top:28px}
.demo-lbl{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}

/* ── мобильный: 390 обязателен, переполнения нет ── */
@media (max-width:720px){
  .page{padding:0 16px}
  .head{flex-wrap:wrap;gap:12px}
  .sform{order:3;flex:1 0 100%;max-width:none}
  .head nav{gap:12px}
  .topbar{gap:12px}
  .prow{grid-template-columns:48px 1fr}
  .prange{grid-column:1/-1;text-align:left;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  .prange .minibar{flex:1 0 100%}
  dl.kv .row{grid-template-columns:1fr;gap:0}
  dl.kv dt{font-size:13px}
  table.data.collapse,table.data.collapse tbody,table.data.collapse tr,table.data.collapse td{display:block}
  table.data.collapse thead{display:none}
  table.data.collapse tr{padding:12px 0;border-bottom:1px solid var(--line)}
  table.data.collapse td{border:0;padding:0 0 12px;text-align:left}
  table.data.collapse td.r{text-align:left}
  table.data.collapse td:last-child{padding-bottom:0}
}
@media (prefers-reduced-motion:no-preference){
  a,button{transition:color .15s,border-color .15s,background-color .15s}
}

/* ══════════════════════════════════════════════════════════════
   Волна 3 — каркас. Расширение, а не замена: мобильная шапка,
   меню каталога, выбор города, меню кабинета, футер-навигация,
   состояния, изображения. Та же дисциплина: кегли 12/13/15/20/26/34,
   радиусы 0/8/16, ритм 12/28/64, теней нет, цвета — токены выше.
   ══════════════════════════════════════════════════════════════ */

/* ── шапка: десктопная скрывается на мобильном, мобильная — на десктопе ── */
.chrome{position:relative}
@media (max-width:720px){.chrome{display:none}}
.mhead{display:none;position:sticky;top:0;z-index:30;background:var(--bg);
  border-bottom:1px solid var(--line);padding:12px 16px;align-items:center;gap:12px}
@media (max-width:720px){.mhead{display:flex}}
.mhead .logo-mark{width:44px;height:44px}
.mhead .sform{flex:1;min-width:0;max-width:none;order:0}
/* min-width:0 обязателен: .sform сам флекс-контейнер, без него он не сжимается
   и на 390 уносит кнопку «Найти» за экран (scrollWidth 452 против 390). */

/* бургер и шторка мобильного меню */
details.mnav{flex:none}
details.mnav>summary{list-style:none;cursor:pointer;width:44px;height:44px;
  border:1px solid var(--line-2);border-radius:8px;display:grid;place-items:center}
details.mnav>summary::-webkit-details-marker{display:none}
.bars{position:relative;display:block;width:18px;height:2px;background:var(--t1)}
.bars::before,.bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--t1)}
.bars::before{top:-6px}
.bars::after{top:6px}
.mnav .sheet{position:absolute;left:0;right:0;top:100%;background:var(--bg);
  border-bottom:1px solid var(--line-2);padding:0 16px 28px;z-index:29;max-height:75vh;overflow:auto}
.sheet .grp-lbl{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t2);margin-top:28px}
.sheet a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;
  padding:12px 0;border-bottom:1px solid var(--line);color:var(--t1);font-size:15px}
.sheet a:hover{text-decoration:none}
.sheet .n{color:var(--t2);font-size:13px}
.sheet .empty{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;
  padding:12px 0;border-bottom:1px solid var(--line);color:var(--t2);font-size:15px}
.sheet .themeswitch{padding:12px 0}

/* ── меню каталога: панель во всю ширину шапки, за экран не выезжает ── */
details.cat>summary{list-style:none;cursor:pointer;display:inline-block;color:var(--t2);
  font-size:13px;padding:12px 0}
details.cat>summary::-webkit-details-marker{display:none}
details.cat[open]>summary{color:var(--t1)}
.cat .mega{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--bg);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line-2);padding:28px 0}
.mega .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.mega .lbl{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}
.mega ul{list-style:none;margin:12px 0 0;padding:0}
.mega li{border-bottom:1px solid var(--line)}
.mega li a,.mega li .empty{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:12px 0;font-size:15px}
.mega li a{color:var(--t1)}
.mega li a:hover{text-decoration:none;color:var(--grn)}
.mega .n{color:var(--t2);font-size:13px;text-align:right}
.mega .empty{color:var(--t2)}
.mega .all{display:inline-block;margin-top:12px;font-size:13px}
@media (max-width:960px){.mega .cols{grid-template-columns:1fr 1fr}}

/* ── выпадающий контрол: город, кабинет ── */
details.drop{position:relative;display:inline-block}
details.drop>summary{list-style:none;cursor:pointer;display:inline-block}
details.drop>summary::-webkit-details-marker{display:none}
.drop .pop{position:absolute;left:0;top:100%;margin-top:12px;width:320px;max-width:calc(100vw - 32px);
  background:var(--bg);border:1px solid var(--line-2);border-radius:16px;padding:12px;z-index:25}
.drop .pop.r{left:auto;right:0}
.pop a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px;
  border-radius:8px;color:var(--t1);font-size:15px}
.pop a:hover{background:var(--soft);text-decoration:none}
.pop .n{color:var(--t2);font-size:13px;text-align:right}
.pop .now{font-weight:600}
.pop .note{border-top:1px solid var(--line);margin-top:12px;padding:12px 12px 0;font-size:13px;color:var(--t2)}

/* счётчик у раздела шапки */
.navcnt{display:inline-block;min-width:20px;text-align:center;background:var(--soft);
  border-radius:8px;padding:0 8px;font-size:12px;font-weight:600;color:var(--t1);margin-left:8px}

/* ── футер: второй навигационный экран ── */
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-bottom:28px;
  border-bottom:1px solid var(--line)}
.fcol .lbl2{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}
.fcol ul{list-style:none;margin:12px 0 0;padding:0}
.fcol li{padding:0 0 12px}
.fcol a{color:var(--t2)}
.fcol a:hover{color:var(--t1)}
.foot .legal a{color:var(--t2)}
.foot .legal a:hover{color:var(--t1)}
@media (max-width:960px){.fcols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.fcols{grid-template-columns:1fr}}

/* ── первый экран главной ── */
.hero{display:grid;grid-template-columns:1fr 460px;gap:64px;align-items:start;padding-top:28px}
@media (max-width:960px){.hero{grid-template-columns:1fr;gap:28px}}
.hero .lead{margin-top:28px;max-width:60ch}
.hero .facts{margin-top:12px;font-size:13px;color:var(--t2)}
.frag{background:var(--soft);border-radius:16px;padding:28px}
.frag table.data tbody tr:nth-child(even){background:transparent}
.bigmin{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.bigmin .cur{font-size:20px;font-weight:400;color:var(--t2)}

/* ── рекламное место: нейтральный серый, пунктир, erid ── */
.shelf{border:1px dashed var(--line-2);border-radius:16px;padding:28px}
.shelf .mark{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}
.shelf .offer{display:flex;gap:12px 28px;align-items:center;flex-wrap:wrap;margin-top:12px}

/* ── список разделов каталога ── */
ul.cats{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
ul.cats li{border-bottom:1px solid var(--line)}
ul.cats a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:12px 0;color:var(--t1)}
ul.cats .n{color:var(--t2);font-size:13px;text-align:right}
@media (max-width:720px){ul.cats{grid-template-columns:1fr}}

/* ── состояния: скелетоны без мерцания ── */
.skel{background:var(--soft);border-radius:8px}
.skel-th{width:64px;aspect-ratio:1;flex:none}
.skel-line{height:12px}
.srow{display:grid;grid-template-columns:64px 1fr 220px;gap:28px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line)}
@media (max-width:720px){.srow{grid-template-columns:48px 1fr}}

/* ── состояния: ошибка формы (амбер — граница, текст остаётся читаемым) ── */
.fld label{display:block;font-size:13px;color:var(--t2);margin-bottom:12px}
.fld input{width:100%;max-width:420px;border:1px solid var(--line-2);border-radius:8px;
  background:var(--bg);color:var(--t1);padding:12px;font-family:inherit;font-size:15px}
.fld.err input{border-color:var(--amber)}
.fld .msg{margin-top:12px;font-size:13px}

/* ── изображения: единый бокс переваривает соотношения 0,43–1,61 ── */
.imgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.pbox{aspect-ratio:4/3;background:var(--soft);border-radius:8px;display:grid;place-items:center;
  grid-template-columns:100%;grid-template-rows:100%;overflow:hidden;padding:12px}
.pbox img{width:100%;height:100%;object-fit:contain;display:block}
.pcap{margin-top:12px;font-size:12px;color:var(--t2)}
.prow .th.has{display:grid;place-items:center;grid-template-columns:100%;grid-template-rows:100%;
  overflow:hidden;background:var(--soft);padding:8px}
.prow .th.has img{width:100%;height:100%;object-fit:contain}
.prow .th.none{display:grid;place-items:center;background:var(--soft)}
.pbox.broken img,.th.broken img{display:none}
.pbox.broken::after{content:"фото нет";font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--t2)}

/* ── плашка «в вашем городе предложений мало» ── */
.banner{background:var(--soft);border-radius:16px;padding:28px}

/* ── длинный текст (юридические страницы, помощь) ── */
.longread{max-width:72ch}
.longread p{margin-top:12px}
.longread p:first-child{margin-top:0}

/* ── образцы каркаса внутри frame.html: раскрытые панели в потоке ── */
.spec{border:1px solid var(--line-2);border-radius:16px;overflow:hidden;margin-top:28px}
.spec .chrome{border-bottom:0}
.spec .mega{position:static;border-top:1px solid var(--line);border-bottom:0}
.spec .pop{position:static;margin-top:12px;width:320px}
.hide-m{}
@media (max-width:720px){
  .hide-m{display:none}
  .spec{overflow-x:auto}
  .spec .chrome{display:block;min-width:960px}
}
.m390{width:390px;max-width:100%;border:1px solid var(--line-2);border-radius:16px;
  overflow:hidden;background:var(--bg);margin-top:28px}
.m390 .mhead{display:flex;position:relative}
.m390 .pad{padding:0 16px}


/* ══════════════════════════════════════════════════════════════
   Волна 4 — вертикаль и категория. Расширение, а не замена.
   Та же дисциплина: кегли 12/13/15/20/26/34, веса 400/600/700,
   радиусы 0/8/16, ритм 12/28/64, теней нет, цвета — токены выше.
   ══════════════════════════════════════════════════════════════ */

/* долг K1: тач-цели ≥ 44 px у чипов, кнопок темы и ссылок футера.
   Визуально ничего не меняется — растёт область нажатия. */
a.chip{display:inline-flex;align-items:center;min-height:44px}
.themeswitch button{min-height:44px;min-width:44px}
/* колонки футера: строка получает честную высоту 44, без отрицательных полей */
.fcol li{padding:0}
.fcol a{display:inline-flex;align-items:center;min-height:44px}
/* одиночные ряды футера (юр-блок, города): рост зоны нажатия без сдвига соседей */
.foot .legal a,.foot .grp a{display:inline-flex;align-items:center;min-height:44px}
.foot .grp{align-items:center}

/* тач-цели, вторая часть долга K1: крошки, строки подразделов, названия товаров
   и одиночные ссылки-выходы. Правило то же — растёт зона нажатия, вид прежний. */
@media (max-width:960px){
  .crumbs a,.secrow .sn a,.secrow .sd a,.secrow .sr a,.pname a,p.blk>a{display:inline-flex;align-items:center;min-height:44px}
  .crumbs{padding:0}
}

/* ── вертикаль: строка подраздела ── */
.secrows{display:flex;flex-direction:column}
.secrow{display:grid;grid-template-columns:1fr 170px 220px;gap:28px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--line)}
.secrow .sn{font-size:15px;font-weight:600}
.secrow .sn a{color:var(--t1)}
.secrow .sd{font-size:13px;color:var(--t2)}
.secrow .sr{font-size:13px;color:var(--t2);text-align:right}
@media (max-width:720px){
  .secrow{grid-template-columns:1fr;gap:0}
  .secrow .sr{text-align:left;margin-top:12px}
}

/* ── категория: колонка фасетов + выдача ── */
.cat-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;margin-top:28px;align-items:start}
@media (max-width:960px){.cat-layout{grid-template-columns:1fr}}

/* мобильный: фасеты сворачиваются в раскрывашку */
details.fwrap>summary{list-style:none;cursor:pointer;display:none;min-height:44px;
  border:1px solid var(--line-2);border-radius:8px;padding:12px;font-size:15px;align-items:center;justify-content:space-between;gap:12px}
details.fwrap>summary::-webkit-details-marker{display:none}
details.fwrap>summary .n{color:var(--t2);font-size:13px}
@media (max-width:960px){
  details.fwrap>summary{display:flex}
  details.fwrap:not([open])>.fcolm{display:none}
}

/* группа фасета */
.facet{border-bottom:1px solid var(--line);padding-bottom:12px;margin-top:28px}
.facet:first-child{margin-top:0}
.facet .fh{display:flex;align-items:baseline;gap:12px;font-size:15px;font-weight:600}
.facet .fh .n{margin-left:auto;font-size:13px;font-weight:400;color:var(--t2)}
.facet .fnote{margin-top:12px;font-size:13px;color:var(--t2)}
.fv{list-style:none;margin:12px 0 0;padding:0}
.fv li{border:0}
.fv label,.fv .raw{display:flex;align-items:center;gap:12px;min-height:44px;font-size:15px;cursor:pointer}
.fv .raw{cursor:default}
.fv input[type="checkbox"]{width:20px;height:20px;margin:0;accent-color:var(--grn);flex:none}
.fv .n{margin-left:auto;font-size:13px;color:var(--t2);white-space:nowrap}
.fv .cmp{font-size:12px;color:var(--grn-ink);white-space:nowrap}
.fv .cmp.zero{color:var(--amber)}
.fv .val-raw{color:var(--t2)}
.fv .flag{font-size:12px;color:var(--amber)}
details.fmore>summary{list-style:none;cursor:pointer;display:flex;align-items:center;min-height:44px;
  font-size:13px;color:var(--grn)}
details.fmore>summary::-webkit-details-marker{display:none}
details.fmore[open]>summary{display:none}
.fto{display:flex;gap:12px;align-items:center;margin-top:12px}
.fto input{width:50%;min-width:0;border:1px solid var(--line-2);border-radius:8px;background:var(--bg);
  color:var(--t1);padding:12px;font-family:inherit;font-size:15px;font-variant-numeric:tabular-nums}

/* применённые фильтры над выдачей */
.applied{display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--t2)}
.applied .rm{display:inline-flex;align-items:center;gap:8px;min-height:44px;border:1px solid var(--line-2);
  border-radius:8px;padding:0 12px;color:var(--t1);font-size:13px}
.applied .rm b{font-weight:600}
.applied .rm .x{color:var(--t2)}

/* панель сортировки/счёта над строками */
.lbar{display:flex;align-items:baseline;gap:12px 28px;flex-wrap:wrap;font-size:13px;color:var(--t2)}
.lbar .sorts{display:flex;gap:12px;flex-wrap:wrap}
.lbar .sorts a,.lbar .sorts b{display:inline-flex;align-items:center;min-height:44px;font-weight:400}
.lbar .sorts b{color:var(--t1);font-weight:600}
.lbar .stamp{margin-left:auto}

/* значок диагонали на снимке: ответ на фото-дубль */
.prow .th{position:relative}
.th .dg{position:absolute;right:0;bottom:0;background:var(--bg);color:var(--t1);
  font-size:12px;font-weight:600;line-height:1;padding:4px 4px 4px 8px}

/* строка при одном магазине: цена одна, разброса нет */
.pone{display:block;font-size:13px;color:var(--t2)}

/* закрытый гейтом узел */
.gated{color:var(--t2)}
.gate-mark{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--t2);
  border:1px dashed var(--line-2);border-radius:8px;padding:0 8px;line-height:2;white-space:nowrap}

/* единое пустое состояние (категория / бренд / фасет) */
/* пустое состояние рисуется .box--dash — второго имени у компонента нет:
   дубликат .empty-state убран, чтобы правила не разъехались. */

/* ══════════════════════════════════════════════════════════════
   Волна 5 — карточка товара. Расширение, а не замена.
   Та же дисциплина: кегли 12/13/15/20/26/34, веса 400/600/700,
   радиусы 0/8/16, ритм 12/28/64, теней нет, цвета — токены выше.
   ══════════════════════════════════════════════════════════════ */

/* ── первый экран карточки: фото ≤ 40 % · ключевые характеристики · ответ ── */
.card-grid{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr) 340px;
  gap:28px;margin-top:28px;align-items:start}
@media (max-width:1100px){.card-grid{grid-template-columns:minmax(200px,280px) minmax(0,1fr)}
  .card-grid .buybox{grid-column:1/-1}}
@media (max-width:720px){
  .card-grid{grid-template-columns:1fr}
  .card-grid .buybox{order:-1;grid-column:auto}
  .card-grid .pbox{max-width:280px}
}
/* карточка без предложений: буйбокса нет, колонок две. Модификатор нужен КЛАССОМ:
   инлайновый style на .card-grid переживает медиазапросы, и на 390 сетка оставалась
   двухколоночной — пустое состояние с ссылками уезжало за экран на 222 px.
   Найдено сборкой 28.08, приёмка по волнам этого не видела. */
.card-grid--no-offers{grid-template-columns:minmax(220px,320px) minmax(0,1fr)}
@media (max-width:720px){.card-grid--no-offers{grid-template-columns:1fr}}

/* «В магазин» в таблице предложений — главное действие карточки и единственный платный
   клик платформы. На 390 ссылка выходила 20 px: инлайновая, без своей зоны нажатия.
   Долг K1 волны 4 перечислял крошки, строки подразделов и названия товаров, до таблицы
   предложений не дошёл — замерено сборкой 28.08, вид не меняется, растёт только зона. */
@media (max-width:960px){
  table.data td.r>a{display:inline-flex;align-items:center;min-height:44px}
}

.buybox{background:var(--soft);border-radius:16px;padding:28px}
.buybox .upto{font-size:13px;color:var(--t2);margin-top:12px}
.buybox .usual{font-size:15px;margin-top:12px}
.buybox .note{font-size:13px;color:var(--t2);margin-top:12px}
.buybox .track i{background:var(--t2)}
.buybox .go{display:inline-flex;align-items:center;min-height:44px;font-size:15px;margin-top:12px}

/* ── таблица предложений: вторая строка магазина и неизвестный способ получения ── */
td.dup{color:var(--t2)}
.way-unk{display:inline-block;font-size:12px;border:1px solid var(--amber);border-radius:8px;
  padding:0 8px;line-height:2;color:var(--amber);white-space:nowrap}
:root:not([data-theme="dark"]) .way-unk{color:#9C5B24;border-color:#9C5B24}
table.data .dev{font-size:13px;color:var(--t2)}
table.data .dev.low{color:var(--grn-ink)}
/* .r с padding-right:0 задуман для последней колонки; в середине таблицы
   предложений он склеивал «Цену» с «Получением» — возвращаем зазор */
table.data td.r:not(:last-child),table.data thead th.r:not(:last-child){padding-right:28px}
table.data td:last-child a{white-space:nowrap}

/* ── характеристики: группы-раскрывашки, булевы значения строкой, не 51 галочкой ── */
.specgrp{border-bottom:1px solid var(--line)}
.specgrp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  min-height:44px;padding:12px 0;font-size:15px;font-weight:600}
.specgrp>summary::-webkit-details-marker{display:none}
.specgrp>summary .n{margin-left:auto;font-size:13px;font-weight:400;color:var(--t2);white-space:nowrap}
.specgrp>summary::after{content:"▾";color:var(--t2);font-size:13px}
.specgrp[open]>summary::after{content:"▴"}
.specgrp .grp-body{padding-bottom:28px}
.specgrp dl.kv .row{grid-template-columns:340px 1fr}
@media (max-width:720px){.specgrp dl.kv .row{grid-template-columns:1fr}}
dl.kv .row:target{background:var(--grn-soft)}
.bools{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.bools .lbl3{display:block;font-size:13px;color:var(--t2)}
.bools p{margin-top:8px;line-height:1.8}
.bools span:target{background:var(--grn-soft)}
/* значение из фида, не приведённое к канону */
.raw-val{border-bottom:1px dashed var(--line-2)}
.raw-note{font-size:13px;color:var(--t2)}

/* ── «Главное о товаре» — компонент принят по образцу reference/helper.html ── */
.gist{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px;align-items:start}
@media (max-width:720px){.gist{grid-template-columns:1fr}}
.gist details{border:1px solid var(--line-2);border-radius:16px;background:var(--bg)}
.gist details[open]{background:var(--soft)}
.gist summary{list-style:none;cursor:pointer;display:block;padding:28px;min-height:44px}
.gist summary::-webkit-details-marker{display:none}
.gist summary:focus-visible{outline:2px solid var(--grn);outline-offset:-2px;border-radius:16px}
.gist .val{display:block;font-size:20px;font-weight:600;line-height:1.3}
.gist .why{display:block;margin-top:12px;font-size:15px;color:var(--t1)}
.gist .but{display:block;margin-top:12px;font-size:15px;color:var(--t2)}
.gist .more{display:block;margin-top:12px;font-size:13px;color:var(--grn-ink)}
.gist details[open] .more{color:var(--t2)}
.gist .more::after{content:" ▾"}
.gist details[open] .more::after{content:" ▴"}
.gist .open{padding:0 28px 28px}
.gist .open p{font-size:15px;color:var(--t1);max-width:60ch}
.gist .src{margin-top:28px}
.gist .src .lbl{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}
.gist .src ul{list-style:none;margin:12px 0 0;padding:0}
.gist .src li{border-top:1px solid var(--line)}
.gist .src a{display:block;padding:12px 0;min-height:44px;font-size:13px;color:var(--t2)}
.gist .src a:hover{color:var(--t1);text-decoration:none}
.gist .src a b{font-weight:400;color:var(--t1)}
.gist-tail{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.gist-tail .all{display:inline-flex;align-items:center;min-height:44px;font-size:15px}
.gist-tail .note{font-size:13px;color:var(--t2)}

/* ══════════════════════════════════════════════════════════════
   Волна 6 — профиль продавца и поиск. Расширение, а не замена.
   Та же дисциплина: кегли 12/13/15/20/26/34, веса 400/600/700,
   радиусы 0/8/16, ритм 12/28/64, теней нет, цвета — токены выше.
   ══════════════════════════════════════════════════════════════ */

/* ── профиль: факты слева, получение справа. Урок волны 5: вариант
   раскладки — модификатором класса со своим брейкпоинтом, не инлайном ── */
.shop-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;margin-top:28px;align-items:start}
@media (max-width:960px){.shop-grid{grid-template-columns:1fr}}

/* ── отзыв: шаблон обязан выдержать пустые плюсы (93 из 216) и пустые
   минусы (46 из 216) — пустая группа не рисуется вовсе ── */
.rev{padding:28px 0;border-bottom:1px solid var(--line)}
.rev .rhead{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline}
.rev .rname{font-weight:600}
.rev .rwhen,.rev .rmark{font-size:13px;color:var(--t2)}
.rev .rgrp{margin-top:12px}
.rev .rlbl{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}
.rev .rgrp p{max-width:72ch}
/* ветка ответа магазина — редкое состояние: 3 ответа на 216 отзывов */
.reply{margin-top:12px;background:var(--soft);border-radius:16px;padding:28px}
.reply .rlbl{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}
.reply p{margin-top:12px;max-width:72ch}

/* ── страница поиска: большая форма и раскрытые подсказки ── */
.bigform{display:flex;gap:12px;max-width:640px;margin-top:28px}
.bigform input{flex:1;min-width:0;border:1px solid var(--line-2);border-radius:8px;
  background:var(--bg);color:var(--t1);padding:12px;font-family:inherit;font-size:15px}
.bigform input::placeholder{color:var(--t2)}
.sugg{border:1px solid var(--line-2);border-radius:16px;margin-top:12px;max-width:640px;padding:12px 0 0}
.sugg .sglbl{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:12px 28px 0;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}
.sugg a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;
  padding:0 28px;color:var(--t1);font-size:15px}
.sugg a:hover{background:var(--soft);text-decoration:none}
.sugg a b{font-weight:600}
.sugg .n{color:var(--t2);font-size:13px;text-align:right;white-space:nowrap}
.sugg .snote{margin-top:12px;border-top:1px solid var(--line);padding:12px 28px;font-size:13px;color:var(--t2)}
/* тач-цели: ссылки внутри подпись-значение (телефон профиля) на мобильном */
@media (max-width:960px){dl.kv dd a{display:inline-flex;align-items:center;min-height:44px}}

/* ══════════════════════════════════════════════════════════════
   Волна 7 — бренды и сравнение. Расширение, а не замена.
   Та же дисциплина: кегли 12/13/15/20/26/34, веса 400/600/700,
   радиусы 0/8/16, ритм 12/28/64, теней нет, цвета — токены выше.
   Индекс брендов и категории хаба — ul.cats волны 3, гейт — dl.kv,
   состояния — .box--dash: новых компонентов там не понадобилось.
   ══════════════════════════════════════════════════════════════ */

/* ── сравнение: управление «только отличия» ── */
.cmp-ctl{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font-size:15px}
.cmp-ctl input{width:20px;height:20px;margin:0;accent-color:var(--grn);flex:none}
.same-note{display:none;font-size:13px;color:var(--t2)}
.cmpwrap:has(#onlydiff:checked) .cmp tr.same{display:none}
.cmpwrap:has(#onlydiff:checked) .same-note{display:block;margin-top:12px}

/* ── сравнение: таблица. На 390 скроллится вбок как единая таблица —
   колонки товаров терять нельзя, это и есть сравнение ── */
.cmp{margin-top:12px;overflow-x:auto}
.cmp table.data{min-width:640px}
.cmp thead th{vertical-align:bottom}
.cmp thead th.prod{font-size:15px;letter-spacing:0;text-transform:none;color:var(--t1);font-weight:600;width:26%}
.cmp tbody th{text-align:left;font-weight:400;color:var(--t2);font-size:15px;
  padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.cprod{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cprod .th{position:relative;width:64px;aspect-ratio:1;border-radius:8px;overflow:hidden;
  background:var(--soft);display:grid;place-items:center;padding:8px}
.cprod .th img{width:100%;height:100%;object-fit:contain}
.cprod a{color:var(--t1)}
.cprod .rm2{font-size:13px;font-weight:400;color:var(--t2)}
/* ── Ссылка, занимающая ячейку таблицы, — это цель нажатия, а не текст в предложении.
   Правило заведено приёмкой волны 7 для сравнения (.cmp), и волна 9 показала, что случай
   общий: индекс магазинов дал 30 таких ссылок по 20 px, глоссарий 8, термин 4. Расширено
   на любую ячейку; исключение WCAG 2.5.8 тут не работает — в ячейке ничего, кроме ссылки,
   нет. Инлайновые ссылки внутри предложений правило не трогает. ── */
/* ── ПЯТОЕ повторение класса, обобщено приёмкой волны 12. История: волна 7 чинила
   его в сравнении (.cmp td>a), 8 — для ссылки-абзаца (a.act), 9 — для ячейки таблицы
   (td>a, th>a), 10 — для оглавления документа (ol.toc>li>a), 12 привезла его
   в списке определений: подсказка «возможно, вы искали» на 404 — dl.kv dt>a, 17 px.
   Правило расширено на ЯЧЕЙКУ ДАННЫХ ЛЮБОГО ВИДА: td, th, dt, dd. Пункты меню
   и подвала сюда не входят — у них свои правила выше (.sheet a, .fcol a, .foot .grp a).
   Инлайновые ссылки внутри предложений правило по-прежнему не трогает. ── */
@media (max-width:960px){td>a,th>a,dt>a,dd>a,.cprod .rm2{display:inline-flex;align-items:center;min-height:44px}}


/* ══════════════════════════════════════════════════════════════
   Волна 8 — блог и рейтинг. Расширение, а не замена.
   Та же дисциплина: кегли 12/13/15/20/26/34, веса 400/600/700,
   радиусы 0/8/16, ритм 12/28/64, теней нет, цвета — токены выше.
   Пустые индекс и рубрика — .box--dash, списки — ul.cats,
   факты — dl.kv: новых компонентов почти не понадобилось.
   ══════════════════════════════════════════════════════════════ */

/* ── график ряда цен: первый график программы — ряд теперь есть
   (20 дней с 19.08). Радиус 0: это данные. Читается и на 390:
   svg тянется на всю колонку, подписи 12 px из шкалы ── */
.chart{margin-top:28px;max-width:720px}
.chart svg{display:block;width:100%;height:auto;font-variant-numeric:tabular-nums}
.chart .cap{margin-top:12px;font-size:13px;color:var(--t2);max-width:60ch}

/* ── таблица шире экрана: на 390 скроллится вбок целиком,
   колонок не теряет (тот же приём, что .cmp волны 7) ── */
.tblwrap{margin-top:28px;overflow-x:auto}
.tblwrap table.data{min-width:520px}

/* ── одиночная ссылка абзацем — это цель нажатия, а не ссылка в предложении,
   и на 390 она обязана быть от 44 px. Заведено приёмкой волны 8: «Сравнить
   3 предложения» пришла 20 px, а две соседние проходили порог только потому,
   что их текст переносился на вторую строку — то есть по случайности, а не
   по правилу. Исключение WCAG 2.5.8 для инлайновых ссылок тут не работает:
   в абзаце, кроме ссылки, ничего нет. ── */
@media (max-width:960px){ a.act{display:inline-flex;align-items:center;min-height:44px} }

/* ══════════════════════════════════════════════════════════════
   Волна 9 — индекс магазинов, глоссарий, комментарии.
   Та же дисциплина: кегли 12/13/15/20/26/34, веса 400/600/700,
   радиусы 0/8/16, ритм 12/28/64, теней нет, цвета — токены выше.
   Индекс и цены признака — table.data в .tblwrap, термины хаба —
   ul.cats, состояния — .box--dash. Новое — только форма
   комментария (textarea в .fld) и строка комментария.
   ══════════════════════════════════════════════════════════════ */

/* ── форма комментария: два поля, как у соседних форм .fld ── */
.fld textarea{width:100%;max-width:640px;min-height:120px;border:1px solid var(--line-2);
  border-radius:8px;background:var(--bg);color:var(--t1);padding:12px;
  font-family:inherit;font-size:15px;resize:vertical}
.fld textarea::placeholder,.fld input::placeholder{color:var(--t2)}

/* ── комментарий: родня отзыва (волна 6), но без оценки —
   у комментария к статье нет звёзд и нет блока плюсов/минусов ── */
.cmt{padding:12px 0;border-bottom:1px solid var(--line)}
.cmt .who{font-size:13px;color:var(--t2)}
.cmt .who b{font-size:15px;font-weight:600;color:var(--t1)}
.cmt p{margin-top:12px;max-width:72ch}
.cmt.pending p{color:var(--t2)}


/* ══════════════════════════════════════════════════════════════
   Волна 10 — доверие и юридические страницы.
   Жанр «длинный юридический документ» пришёл локальным <style>
   в legal.html; приёмка перенесла его в канон, как и предполагала
   записка волны. Новых токенов, кеглей и радиусов нет: колонка
   72ch, ритм 12/28/64, h3 — 15/600 из шкалы.
   ══════════════════════════════════════════════════════════════ */

/* ── тело документа: одна колонка, читаемая длина строки ── */
.doc{max-width:72ch}
.doc p{margin-top:12px}
.doc h2{margin-top:64px}
.doc h3{margin-top:28px;font-size:15px;font-weight:600}

/* ── оглавление документа якорями ── */
ol.toc{margin:28px 0 0;padding:0 0 0 20px;max-width:72ch}
ol.toc li{padding:0 0 12px}

/* ── ЧЕТВЁРТОЕ повторение класса «пункт, в котором нет ничего,
   кроме ссылки»: волна 7 чинила его в сравнении (.cmp), волна 8 —
   для ссылки-абзаца (a.act), волна 9 — для ячейки таблицы (td>a).
   Волна 10 привезла его в оглавлении юр-документа: восемь якорей
   по 20 px на 390. Правило заводится на список ссылок целиком,
   а не на .toc, — чтобы следующий такой список чинился сам.
   Исключение WCAG 2.5.8 не работает: в пункте, кроме ссылки, ничего нет.
   Инлайновые ссылки внутри предложений правило не трогает. ── */
@media (max-width:960px){
  ol.toc>li>a,ul.toc>li>a{display:inline-flex;align-items:center;min-height:44px}
}

/* ⚠️ Приёмка волны 11: из присланного d2.css взята ТОЛЬКО секция ниже.
   Остальной файл был собран не на том каноне, что заявлен в записке: правило
   волны 9 `td>a,th>a` откачено к узкому `.cmp td>a`, а секция волны 10 подменена
   другой редакцией с разметкой `.toc`/`.docmeta`, которой ни одна наша страница
   не пользуется. Замер: на присланном файле стенд даёт 42 тач-цели по 20 px
   (магазины 30, глоссарий 8, термин 4) — ровно те, что чинила волна 9. ── */
/* ══════════════════════════════════════════════════════════════
   Волна 11 — ЛК покупателя: вход, избранное, подписки на цену.
   Расширение, а не замена. Та же дисциплина: кегли 12/13/15/20/26/34,
   веса 400/600/700, радиусы 0/8/16, ритм 12/28/64, теней нет,
   цвета — токены выше. Подписки — table.data в .tblwrap, настройки
   и способы входа — dl.kv, состояния — .box--dash. Новое — строка
   изменения цены в избранном, действия строки и карточки способов входа.
   ══════════════════════════════════════════════════════════════ */

/* ── изменение цены в строке избранного: три состояния плюс «ряда нет».
   Рост цены — амбер (переплата), падение — зелёный (сигнал), «не менялась» /
   «похоже на дефект» / «ряда нет» — нейтраль текстом, без процента.
   «−0 %» не существует как значение. ── */
.pdelta{display:block;font-size:13px;margin-top:4px}
.pdelta.up{color:var(--amber)}
.pdelta.down{color:var(--grn-ink)}
.pdelta.mut{color:var(--t2)}
table.data .pdelta{margin-top:4px}

/* ── действия строки избранного: текстовые ссылки, не кнопки —
   залитая кнопка в каждой строке запрещена (ANTI-SLOP) ── */
.rowact{display:flex;gap:12px 28px;flex-wrap:wrap;margin-top:4px}
.rowact a{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
.rowact a.mut{color:var(--t2)}

/* ── вход: две карточки способов. Мобильный первым: колонка, десктоп — ряд ── */
.methods{display:grid;grid-template-columns:1fr;gap:28px;max-width:880px}
@media (min-width:721px){.methods{grid-template-columns:1fr 1fr}}
.method{background:var(--soft);border-radius:16px;padding:28px}
.method .fld input{max-width:none}

/* ── вход по коду: поле кода и строка повтора (образцы — в states.html) ── */
.fld input.code{max-width:200px;font-size:20px;letter-spacing:.2em;text-align:center}
.resend{margin-top:12px;font-size:13px;color:var(--t2)}
.resend a{display:inline-flex;align-items:center;min-height:44px}

/* ══════════════════════════════════════════════════════════════
   После запуска (17.09.2026) — галерея карточки и логотипы магазинов.
   Та же дисциплина: кегли 12/13/15, радиусы 8, ритм 12/28, теней нет.
   ══════════════════════════════════════════════════════════════ */

/* ── фото на плашке. Фиды и Bitrix отдают JPEG на белом: в светлой теме белый прямоугольник
   висел внутри серо-зелёной плашки, в тёмной — светился на тёмной. multiply растворяет белое
   в цвете плашки; в тёмной теме плашка под фото светлая, иначе multiply сделал бы снимок чёрным. ── */
.pbox img,.th img{mix-blend-mode:multiply}
:root[data-theme="dark"] .pbox:has(img):not(.broken),
:root[data-theme="dark"] .th:has(img):not(.broken){background:#F2F7F5}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pbox:has(img):not(.broken),
  :root:not([data-theme="light"]) .th:has(img):not(.broken){background:#F2F7F5}
}

/* ── галерея карточки: главное фото + лента превью. Было — плитка 2×4 крупных превью
   высотой в экран, без выбора главного. Без JS превью — ссылки на файл. ── */
/* min-width:0 — элемент сетки .card-grid: иначе лента из девяти превью распирала колонку 1fr до 564 px на 390 */
.gal{max-width:320px;min-width:0}
.gal-main{position:relative}
.gal-main>a{display:grid;place-items:center;width:100%;height:100%;grid-template-columns:100%;grid-template-rows:100%}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:8px;
  border:1px solid var(--line-2);background:var(--bg);color:var(--t1);font-size:15px;cursor:pointer;
  display:grid;place-items:center;padding:0;opacity:0;transition:opacity .15s}
.gal-nav.prev{left:4px}
.gal-nav.next{right:4px}
.gal-main:hover .gal-nav,.gal-nav:focus-visible{opacity:1}
@media (hover:none){.gal-nav{opacity:1}}
.gal-nav:focus-visible,.gal-th:focus-visible{outline:2px solid var(--grn);outline-offset:2px}
.gal-count{position:absolute;right:8px;bottom:8px;font-size:12px;color:var(--t2);background:var(--bg);
  border-radius:8px;padding:0 8px;line-height:2}
.gal-thumbs{display:flex;gap:12px;margin:12px 0 0;padding:0;list-style:none;overflow-x:auto;
  scroll-snap-type:x proximity;scrollbar-width:thin}
.gal-thumbs li{flex:none;scroll-snap-align:start}
.gal-th{display:grid;place-items:center;grid-template-columns:100%;grid-template-rows:100%;width:52px;height:52px;
  padding:4px;border:1px solid var(--line);border-radius:8px;background:var(--soft);overflow:hidden}
.gal-th img{width:100%;height:100%;object-fit:contain;display:block}
.gal-th[aria-current="true"]{border:2px solid var(--grn);padding:3px}
@media (max-width:720px){
  .gal{max-width:none}
  .card-grid .gal .pbox{max-width:none}
}

/* ── логотип магазина: плашка 64×32 на белом в обеих темах — магазины рисуют логотипы под
   светлый фон. Нет логотипа в кабинете — остаются инициалы .ava ── */
/* сетка 100%×100% — как у .pbox: без неё height:100% у img не разрешается, и квадратный логотип вылезал из плашки 56×56 */
.ava.logo{width:64px;height:32px;padding:4px;background:#FFFFFF;border:1px solid var(--line);
  grid-template-columns:100%;grid-template-rows:100%;overflow:hidden}
.ava.logo img{width:100%;height:100%;object-fit:contain;display:block}
.slogo{display:grid;place-items:center;grid-template-columns:100%;grid-template-rows:100%;width:160px;height:64px;
  padding:8px;background:#FFFFFF;border:1px solid var(--line);border-radius:8px;flex:none}
.slogo img{width:100%;height:100%;object-fit:contain;display:block}
.shead{display:flex;align-items:center;gap:12px 28px;flex-wrap:wrap}

/* ── фирменный логотип (brand/SellMarket_logo) вместо знака-заглушки канона. Светлый вариант —
   чёрный текст, тёмный — белый; «M» зелёная в обоих. Переключение — теми же правилами, что токены. ── */
.logo-img{display:block;height:44px;width:auto}
.logo-d{display:none}
:root[data-theme="dark"] .logo-l{display:none}
:root[data-theme="dark"] .logo-d{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo-l{display:none}
  :root:not([data-theme="light"]) .logo-d{display:block}
}
.mhead .logo-mark-img{height:40px}