/* Флаги стран: Windows рисует 🇺🇦 буквами «UA» — в системном шрифте нет
   глифов для региональных индикаторов. Подключаем свой шрифт ТОЛЬКО с
   флагами (Twemoji Country Flags, графика Twemoji под CC-BY 4.0), первым
   в стеке: unicode-range оставляет за ним ровно диапазон индикаторов, весь
   остальной текст рисуется как раньше, и файл (78 КБ) скачивается лишь на
   страницах, где флаг действительно есть. */
@font-face{
  font-family:"Twemoji Country Flags";
  src:url("/static/fonts/TwemojiCountryFlags.woff2") format("woff2");
  unicode-range:U+1F1E6-1F1FF;
  font-display:swap;
}
:root{
  --radius:12px;--radius-s:8px;
  --font:"Twemoji Country Flags",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* …кроме техники Apple. Это цветной COLR/CPAL-шрифт, и WebKit заливал его
   палитрой соседний текст: после 🇺🇦 название категории «Аренда FB»,
   заголовок страницы, названия товаров и цены светились жёлтым. Свои флаги
   у Apple есть всегда, так что там шрифт не нужен — класс снимает его,
   ставит пред-пейнт скрипт (web/theme_boot.py). Значение по умолчанию
   оставлено рабочим для Windows: если скрипт не отработает, флаги видно. */
:root.no-flag-font{
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* dark palette — the default, also what «авто» picks on a dark system */
:root,:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f0e0d;--bg2:#171614;--card:#1c1a18;--line:#2b2724;--text:#f0ece6;--muted:#9a918a;
  --accent:#ef7c20;--accent-2:#ff9a4d;--accent-ink:#1a0f03;--link:#ff9a4d;
  --fill:rgba(255,255,255,.07);
  --ok:#57c26a;--err:#ef5f57;--info:#5aa9e6;
  --shadow:0 8px 24px rgba(0,0,0,.5);
  --header-bg:#171614;--line-strong:#3d3834;
}
/* light palette */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f7f5f2;--bg2:#edeae5;--card:#ffffff;--line:#e0dbd4;--text:#191512;--muted:#6d645b;
  --accent:#f2913f;--accent-2:#ffab63;--accent-ink:#2a1400;--link:#b35c0b;
  --fill:rgba(25,21,18,.06);
  --ok:#1a8a3c;--err:#c8342e;--info:#1668c4;
  --shadow:0 8px 24px rgba(26,21,18,.14);
  --header-bg:#ffffff;--line-strong:#bbb3aa;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    color-scheme:light;
    --bg:#f7f5f2;--bg2:#edeae5;--card:#ffffff;--line:#e0dbd4;--text:#191512;--muted:#6d645b;
    --accent:#f2913f;--accent-2:#ffab63;--accent-ink:#2a1400;--link:#b35c0b;
    --fill:rgba(25,21,18,.06);
    --ok:#1a8a3c;--err:#c8342e;--info:#1668c4;
    --shadow:0 8px 24px rgba(26,21,18,.14);
    --header-bg:#ffffff;--line-strong:#bbb3aa;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;display:block}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(1.6rem,3vw,2.3rem)}h2{font-size:1.35rem}h3{font-size:1.1rem}
p{margin:0 0 1em}
.muted{color:var(--muted)}.small{font-size:.9rem}.mt{margin-top:2rem}.mt-s{margin-top:.75rem}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.page{padding:28px 20px 60px;min-height:60vh}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:var(--header-bg);border-bottom:1px solid var(--line)}
.header-row{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;color:var(--text)}
.brand:hover{text-decoration:none}.brand.small{font-size:1rem}
.logo{border-radius:10px}.brand.small .logo{border-radius:6px}
.site-nav{display:flex;gap:6px;flex:1}
.site-nav a{padding:8px 12px;border-radius:var(--radius-s);color:var(--text)}
.site-nav a:hover,.site-nav a.active{background:var(--bg2);text-decoration:none;color:var(--link)}
.user-box{display:flex;align-items:center;gap:8px;margin-left:auto}
.balance{font-weight:700;color:var(--link);padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-s)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--text);border-radius:var(--radius-s);padding:6px 10px;font-size:1.1rem}
.inline-form{display:inline}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:var(--radius-s);border:1px solid var(--line);background:var(--bg2);color:var(--text);font-weight:600;cursor:pointer;font-size:.95rem;line-height:1.2}
.btn:hover{text-decoration:none;border-color:var(--line-strong)}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-primary:hover{filter:brightness(1.12)}
.btn-ghost{background:transparent}
.btn-lg{padding:13px 22px;font-size:1.05rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* flash */
.flash{margin:16px 0 0;padding:12px 16px;border-radius:var(--radius-s);border:1px solid var(--line);background:var(--bg2)}
.flash-ok{border-color:rgba(87,194,106,.5)}.flash-error{border-color:rgba(239,95,87,.55)}.flash-info{border-color:rgba(90,169,230,.5)}

/* cards & grids */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
a.card{color:var(--text);display:block;transition:border-color .12s}
a.card:hover{text-decoration:none;border-color:var(--accent-2)}
.card-title{font-weight:700;font-size:1.05rem}
.grid{display:grid;gap:16px}
.grid-cats{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.grid-cats.compact{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.grid-features{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cat-card{padding:14px 16px}
.cat-head{display:flex;align-items:center;gap:10px;min-width:0}
.cat-card .cat-emoji{font-size:2.1rem;line-height:1;flex:0 0 auto}
.cat-card .card-title{min-width:0}
.cat-card .muted{font-size:.9rem;margin-top:2px}
.cat-link{display:flex;align-items:center;gap:10px;color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{font-size:.85rem;padding:5px 12px;border-radius:999px;border:0;background:var(--fill);color:var(--text)}
.chip:hover{color:var(--link);text-decoration:none}
.price{font-weight:800;font-size:1.15rem;color:var(--text)}.price small{font-weight:500;color:var(--muted);font-size:.8rem}
.badge{font-size:.76rem;padding:3px 10px;border-radius:999px;border:0;background:var(--fill);white-space:nowrap}
.badge-ok{color:var(--ok)}.badge-info{color:var(--info)}.badge-muted{color:var(--muted)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:2.2rem 0 1rem}
.section-head h2{margin:0}
.empty{padding:40px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius)}
.empty.big{padding:70px 20px}.err-code{font-size:4rem;font-weight:900;color:var(--accent-2);line-height:1}

/* hero */
/* ── баннеры на первом экране (Wave WEB-BANNERS) ─────────────────────
   Лента прокручивается нативно (scroll-snap) — свайп на телефоне работает
   без единой строчки JS; скрипт добавляет автолистание, точки и стрелки. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero-banners{position:relative;margin:18px 0 10px}
.banner-track{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;border-radius:var(--radius)}
.banner-track::-webkit-scrollbar{width:0;height:0}
.banner-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.banner-slide a{display:block}
.banner-slide img{width:100%;height:auto;border-radius:var(--radius)}
.banner-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;display:none;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line);background:var(--bg2);color:var(--text);font-size:1.4rem;line-height:1;cursor:pointer;opacity:.75}
.banner-arrow:hover{opacity:1}
.banner-arrow.prev{left:10px}
.banner-arrow.next{right:10px}
.hero-banners:hover .banner-arrow,.banner-arrow:focus-visible{display:inline-flex}
.banner-dots{display:flex;gap:8px;justify-content:center;padding-top:10px}
.banner-dot{width:8px;height:8px;padding:0;border-radius:50%;border:0;background:var(--line);cursor:pointer}
.banner-dot.is-active{background:var(--link);width:22px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.banner-track{scroll-behavior:auto}}
@media (max-width:720px){
  .hero-banners{margin:10px 0 6px}
  /* Стрелки на тачскрине лишние — листают свайпом. */
  .banner-arrow{display:none!important}
}

.hero{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:36px 0 10px}
.lead{font-size:1.1rem;color:var(--muted);max-width:680px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-art{opacity:.95}
.feature .feature-icon{font-size:1.8rem;margin-bottom:6px}
.faq-item{border:1px solid var(--line);border-radius:var(--radius-s);background:var(--card);padding:12px 16px;margin-bottom:10px}
.faq-item summary{cursor:pointer;font-weight:600}.faq-item p{margin:.6em 0 0;color:var(--muted)}

/* catalog layout */
.crumbs{font-size:.9rem;color:var(--muted);margin-bottom:14px;display:flex;flex-wrap:wrap;gap:6px}
.crumbs .sep{opacity:.5}
.desc{color:var(--text);margin:0 0 1.2em}.desc h2{font-size:1.1rem;margin-top:1.2em}

/* product */
.product{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.product-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.buy-box{position:sticky;top:84px}
.price-big{font-size:2rem;font-weight:900;color:var(--text);margin-bottom:12px}.price-big small{font-size:1rem;color:var(--muted);font-weight:500}
.buy-form label{display:block;font-size:.9rem;color:var(--muted);margin-bottom:10px}
.buy-form input[type=text],.buy-form input[type=number]{width:100%;margin-top:4px;padding:10px 12px;border-radius:var(--radius-s);border:1px solid var(--line);background:var(--bg);color:var(--text);font-size:1rem}
.qty{display:flex;margin-top:4px}
.qty button{width:44px;border:1px solid var(--line);background:var(--bg2);color:var(--text);font-size:1.2rem;cursor:pointer}
.qty button:first-child{border-radius:var(--radius-s) 0 0 var(--radius-s)}.qty button:last-child{border-radius:0 var(--radius-s) var(--radius-s) 0}
.qty input{border-radius:0!important;text-align:center;margin:0!important;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.total{margin:12px 0 6px;font-size:1.05rem}

/* account */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.table{width:100%;border-collapse:collapse;min-width:640px}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.table th{color:var(--muted);font-weight:600;font-size:.85rem;background:var(--bg2)}
.table tr:last-child td{border-bottom:0}
.dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 18px;margin:0}
.dl dt{color:var(--muted)}
/* `1fr` is minmax(auto,1fr): a wallet address or an invoice amount with a
   copy button next to it pushed the whole page wider than the phone. */
.dl dd{margin:0;min-width:0;overflow-wrap:anywhere}
.units{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:16px;overflow:auto;font-size:.9rem;user-select:all}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.back{display:inline-block;margin-bottom:10px;color:var(--muted)}
.login{max-width:560px;margin:30px auto;text-align:center}
.tg-widget{display:flex;justify-content:center;margin:20px 0}
.prose .card{line-height:1.7}

/* footer */
.site-footer{border-top:1px solid var(--line);background:var(--bg2);margin-top:40px;padding:36px 0 24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
.site-footer h4{margin:0 0 .6em;font-size:.95rem}
.site-footer a{display:block;color:var(--muted);margin:4px 0}
.site-footer a:hover{color:var(--link)}
.copy{margin-top:24px;font-size:.85rem}

@media (max-width:900px){
  .product{grid-template-columns:1fr}
  .buy-box{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero{grid-template-columns:1fr}.hero-art{display:none}
}
@media (max-width:720px){
  .user-box{margin-left:0}
  .footer-grid{grid-template-columns:1fr}
}

/* auth — one Telegram door (Wave WEB-TG-ONLY) */
.auth-card h1{margin-bottom:.6em}
.auth-single{max-width:520px;margin:20px auto;text-align:center}

/* proxies (Wave WEB-2) */
.creds-mini{margin:.4em 0 .8em;font-size:.95rem}
.creds code,.creds-mini code{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-size:.92rem;word-break:break-all}
.buy-form select{width:100%;margin-top:4px;padding:10px 12px;border-radius:var(--radius-s);border:1px solid var(--line);background:var(--bg);color:var(--text);font-size:1rem}

/* residential (Wave WEB-2) */
.progress{height:10px;background:var(--fill);border:0;border-radius:999px;overflow:hidden;margin:8px 0}
.progress-bar{height:100%;background:var(--accent)}
.pkg-list{display:flex;flex-direction:column;gap:10px}
.pkg-row{display:grid;grid-template-columns:1fr auto minmax(110px,1fr) auto auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:var(--radius-s)}
.promo-inline{padding:8px 10px;border-radius:var(--radius-s);border:1px solid var(--line);background:var(--bg);color:var(--text)}
.buy-form.grid label{margin-bottom:0}
@media (max-width:720px){.pkg-row{grid-template-columns:1fr 1fr}}

/* topup methods (Wave WEB-2) */
.methods{display:flex;flex-direction:column;gap:8px;margin:10px 0 14px}
.method{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-s);cursor:pointer;color:var(--text)}
.method:has(input:checked){border-color:var(--accent-2)}
.method input{margin-top:4px}
.method small{display:block}
.btn-xs{padding:3px 8px;font-size:.8rem}

.linkbox{display:inline-block;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg);word-break:break-all;font-size:.9rem}
.chip.active{background:var(--accent);color:var(--accent-ink)}
td.ok{color:var(--ok);font-weight:600}

/* ── header v2: categories mega-menu + search (owner request) ── */
.header-row{gap:12px}
.cats-btn{white-space:nowrap}
.search-form{display:flex;flex:1;min-width:160px;max-width:520px;border:1px solid transparent;border-radius:999px;overflow:hidden;background:var(--fill)}
.search-form:focus-within{border-color:var(--accent-2)}
.search-form input{flex:1;border:0;background:transparent;color:var(--text);padding:9px 12px;font-size:.95rem;min-width:0}
.search-form input:focus{outline:none}
.search-form button{border:0;background:var(--accent);color:var(--accent-ink);padding:0 14px;cursor:pointer;font-size:1rem}
.search-inline{max-width:640px;margin-bottom:10px}
.site-nav{flex:0 0 auto}
.mega-panel{border-top:1px solid var(--line);background:var(--bg2);box-shadow:var(--shadow);max-height:75vh;overflow:auto}
.mega-panel .container{padding-top:18px;padding-bottom:18px}
/* Колонки, а не сетка: строки сетки выравнивались по самой длинной категории
   и оставляли дыры под короткими. Колонки укладывают блоки плотно и сами
   подбирают их число под ширину экрана. */
.mega{columns:250px;column-gap:26px}
.mega-col{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 16px}
.mega-col:last-child{margin-bottom:0}
.mega-compact{columns:230px;column-gap:22px}
.mega-compact .mega-col{margin-bottom:12px}
.mega-cat{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1.02rem;color:var(--text);margin-bottom:4px}
.mega-cat:hover{color:var(--link);text-decoration:none}
.mega-ico{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:var(--fill);border:0;font-size:1rem;flex:0 0 28px}
.mega-subs{list-style:none;margin:0;padding:0 0 0 12px}
.mega-subs li{margin:2px 0}
.mega-subs a{color:var(--text);font-size:.93rem}
.mega-subs a:hover{color:var(--link);text-decoration:none}
.mega-subs .count{color:var(--muted);font-size:.78rem}
.mega-compact .mega-cat{font-size:.95rem}
.mega-compact .mega-subs a{font-size:.88rem}

/* category banner + product rows */
.cat-banner{display:flex;align-items:center;gap:18px;padding:18px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--text);margin:8px 0 16px}
.cat-banner-ico{width:64px;height:64px;border-radius:16px;background:var(--fill);border:0;display:flex;align-items:center;justify-content:center;font-size:2rem;flex:0 0 64px}
.cat-banner-text{flex:1;min-width:0}
.cat-banner h1{margin:0 0 4px;color:var(--text);font-size:clamp(1.3rem,2.6vw,1.9rem)}
.cat-banner-sub{color:var(--muted);font-size:.95rem}
a.cat-banner-sub:hover{text-decoration:underline;color:var(--link)}
.cat-banner-count{text-align:right;font-size:.85rem;color:var(--muted)}
.cat-banner-count strong{display:block;font-size:1.7rem;color:var(--text);line-height:1.1}
.chips-lg .chip{padding:7px 12px;font-size:.92rem}
.chips-lg{margin:0 0 16px}
.plist{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.prow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:12px;align-items:center;padding:8px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.prow:hover{border-color:var(--accent-2)}
.prow.oos{opacity:.72}
/* название и метки стоят в одну строку — так в экран влезает вдвое больше
   позиций; на узком контейнере метки переносятся под название сами */
.prow-main{display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px;min-width:0}
.prow-title{font-weight:600;color:var(--text);font-size:.97rem;display:flex;align-items:center;gap:8px;min-width:0}
.prow-emoji{font-size:1.3rem;line-height:1;flex:0 0 auto}
.prow-title:hover{color:var(--link);text-decoration:none}
.prow-meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.prow .badge{font-size:.72rem;padding:2px 8px}
.prow-buy .btn{padding:6px 14px;font-size:.9rem}
.prow-price{font-weight:700;font-size:1.05rem;color:var(--text);white-space:nowrap}
.prow-price small{font-weight:500;color:var(--muted);font-size:.78rem;margin-left:2px}
.prow-stock{white-space:nowrap}
.narrow-only{display:none}
/* Бейдж режима выдачи — кликабельный: `title` не показывается на телефоне,
   а именно там вопрос «что это значит» и возникает. Наведение работает на
   мышке (CSS), тап — через JS (класс is-open). Без JS остаётся наведение. */
.info-wrap{position:relative;display:inline-flex}
.info-badge{font:inherit;line-height:inherit;cursor:pointer;border:0}
.info-badge::after{content:"?";margin-left:5px;opacity:.6;font-size:.85em}
.info-pop{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:20;
  width:max(220px,min(300px,70vw));padding:10px 12px;border:1px solid var(--line-strong);
  border-radius:var(--radius-s);background:var(--card);box-shadow:var(--shadow);
  color:var(--text);font-size:.84rem;line-height:1.45;white-space:normal;text-align:left;
  font-weight:400}
.info-wrap.is-open .info-pop{display:block}
/* У правого края строки подсказка вылезала за экран — прижимаем к правому краю. */
.info-wrap.pop-right .info-pop{left:auto;right:0}
@media (hover:hover) and (pointer:fine){
  .info-wrap:hover .info-pop{display:block}
}
/* описание товара — подсказка при наведении на строку (и при фокусе с клавиатуры) */
.prow-desc{position:absolute;left:0;top:calc(100% + 6px);z-index:12;width:min(460px,calc(100vw - 48px));padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-s);background:var(--card);box-shadow:var(--shadow);color:var(--text);font-size:.92rem;line-height:1.5;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .14s .2s,transform .14s .2s,visibility .14s .2s}
.prow.desc-up .prow-desc{top:auto;bottom:calc(100% + 6px);transform:translateY(4px)}
.prow-desc-body{display:-webkit-box;-webkit-line-clamp:10;line-clamp:10;-webkit-box-orient:vertical;overflow:hidden}
.prow-desc-body a{pointer-events:none}
.prow-desc-more{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.prow:focus-within .prow-desc{opacity:1;visibility:visible;transform:none}
@media (hover:hover) and (pointer:fine){
  .prow:hover .prow-desc{opacity:1;visibility:visible;transform:none}
}
@media (prefers-reduced-motion:reduce){.prow-desc{transition-duration:0s}}
/* на ПК подсказка уходит в свободное место по центру строки: названия товаров
   ниже остаются читаемыми, правый блок с ценой и «Купить» — тоже */
@media (min-width:901px){
  .prow-desc{left:30%;right:14px;width:auto;max-width:460px}
}
/* пока страницу листают, подсказки не мигают под курсором */
body.is-scrolling .prow .prow-desc{opacity:0;visibility:hidden;transition-delay:0s}
@media (max-width:900px){
  /* наличие, цена и «купить» держатся одной строкой — на телефоне это
     экономит по строке на каждой позиции */
  .prow{grid-template-columns:minmax(0,auto) auto minmax(0,auto);grid-template-areas:"main main main" "stock price buy";row-gap:8px;column-gap:8px}
  .prow-main{grid-area:main}.prow-stock{grid-area:stock;justify-self:start;min-width:0;overflow:hidden;text-overflow:ellipsis}.prow-price{grid-area:price;justify-self:center}.prow-buy{grid-area:buy;text-align:right;justify-self:end}
  .wide-only{display:none}.narrow-only{display:inline}
}
@media (max-width:480px){
  /* телефон: наличие, цена и кнопка делят одну строку — «/шт.» и лишние
     отступы уходят, иначе цена наезжает на «Арендовать» */
  .prow-price{font-size:.98rem}
  .prow-price small{display:none}
  .prow-buy .btn{padding:6px 10px;font-size:.86rem}
}
@media (max-width:720px){
  .header-row{flex-wrap:wrap;height:auto;padding:10px 0}
  .cats-btn{order:0}.brand{order:1}.user-box{order:2;margin-left:auto}
  .search-form{order:4;width:100%;max-width:none;flex-basis:100%}
  .site-nav{top:auto}
  .mega,.mega-compact{columns:1;column-gap:0}
  .cat-banner{flex-wrap:wrap}
  .cat-banner-count{width:100%;text-align:left}
  .cat-banner-count strong{display:inline;margin-left:6px;font-size:1.2rem}
}

/* header v2 — mid widths: search drops to its own full-width row */
@media (max-width:1100px){
  .header-row{flex-wrap:wrap;height:auto;padding:10px 0;row-gap:8px}
  .search-form{order:10;flex-basis:100%;max-width:none}
  .site-nav{margin-left:auto}
}
@media (min-width:721px) and (max-width:1100px){
  .user-box{margin-left:0}
}

/* ── header v3: big search (owner: «как на джексе»), info links in a top bar ── */
.topbar{background:var(--bg2);border-bottom:1px solid var(--line);font-size:.94rem}
.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:46px}
.topbar-nav{display:flex;gap:22px;flex-wrap:wrap}
.topbar-tagline{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.topbar a{color:var(--muted)}.topbar a:hover,.topbar a.active{color:var(--link);text-decoration:none}
.site-header .header-row{height:80px;gap:16px}
.brand{font-size:1.3rem}
.cats-btn{height:50px;padding:0 20px;font-size:1rem;border-radius:var(--radius-s)}
.search-form{flex:1 1 auto;max-width:none;min-width:240px;height:50px;border:1px solid transparent;border-radius:999px;background:var(--fill)}
.search-form input{font-size:1.08rem;padding:0 22px}
.search-form button{width:62px;font-size:1.3rem}
.user-box{flex:0 0 auto}
.user-box .balance{height:50px;display:inline-flex;align-items:center;font-size:1rem}
.user-box .btn{height:50px}
@media (max-width:1100px){
  .site-header .header-row{height:auto;padding:12px 0}
  .search-form{order:10;flex-basis:100%;height:48px}
}
@media (max-width:720px){
  .topbar-tagline{display:none}
  .topbar-nav{gap:12px;width:100%;justify-content:space-between}
  .site-header .header-row{gap:10px}
  .cats-btn{height:42px;padding:0 14px}
  .user-box{width:auto;order:2}
  .user-box .balance,.user-box .btn{height:42px}
  .search-form{height:46px}
}

.btn-tg{background:#2AABEE;color:#fff;border-color:transparent}
.btn-tg:hover{background:#229ED9;color:#fff}

/* ── account dashboard + header dropdown (Wave WEB-4) ── */
html{scroll-behavior:smooth}
.user-menu{position:relative}
.user-menu-btn .caret{font-size:.8em;opacity:.7;margin-left:4px}
.dropdown{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:6px;z-index:30;display:flex;flex-direction:column}
.dropdown a,.dropdown button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;color:var(--text);background:none;border:0;font:inherit;cursor:pointer}
.dropdown a:hover,.dropdown button:hover{background:var(--bg2);color:var(--link);text-decoration:none}
.dropdown form{margin:4px 0 0;border-top:1px solid var(--line);padding-top:4px}
.acct{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start}
.acct-nav{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px}
.acct-nav a{padding:8px 12px;border-radius:var(--radius-s);color:var(--text)}
.acct-nav a:hover,.acct-nav a.active{background:var(--bg2);color:var(--link);text-decoration:none}
.acct-section{scroll-margin-top:110px;padding-bottom:28px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.acct-section:last-child{border-bottom:0}
.acct-section h2{margin-bottom:.8em}
details.rental:target{border-color:var(--accent-2);box-shadow:0 0 0 2px rgba(255,154,77,.3)}
ul.plain{list-style:none;padding:0;margin:0}
ul.plain li{padding:4px 0;border-bottom:1px dashed var(--line)}
@media (max-width:900px){
  .acct{grid-template-columns:minmax(0,1fr)}
  .acct-nav{position:sticky;top:0;flex-direction:row;overflow-x:auto;gap:6px;padding:8px 0;background:var(--bg);z-index:5;border-bottom:1px solid var(--line)}
  .acct-nav a{white-space:nowrap;border:1px solid var(--line)}
  .acct-section{scroll-margin-top:70px}
  .dropdown{left:auto;right:0;max-width:calc(100vw - 24px)}
}

/* home «Категории» anchor sits below the sticky header */
#categories{scroll-margin-top:110px}

/* residential summary: whole row = download link */
.list-links li{padding:0}
.list-link{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 10px;color:var(--text);border-radius:8px}
.list-link:hover{background:var(--bg2);text-decoration:none;color:var(--link)}
.list-link .dl{color:var(--muted);font-size:.85rem;white-space:nowrap}
.list-link:hover .dl{color:var(--link)}
#buy,#lists,#new-list{scroll-margin-top:110px}

.sub-row{display:flex;justify-content:space-between;gap:10px;align-items:center}

/* category page grouped by subcategory → subgroup (parity with the bot's tree) */
.cat-sub{scroll-margin-top:110px}
.cat-sub + .cat-sub{margin-top:46px;padding-top:34px;border-top:1px solid var(--line)}
.cat-sub .section-head{margin:.2rem 0 1rem}
.cat-sub h2{font-size:1.25rem}
.cat-sub h2 a{color:var(--text)}
.cat-sub h2 a:hover{color:var(--link);text-decoration:none}
.cat-subgroup{margin:30px 0 10px;font-size:1.05rem;color:var(--text)}
.cat-subgroup:first-of-type{margin-top:18px}
.cat-subgroup .muted{font-weight:500}
.cat-sub .plist + .cat-subgroup{margin-top:34px}
#group-,[id^="group-"]{scroll-margin-top:110px}

/* buy box v2 (owner: spacing, price smaller, total/balance larger, air before the button) */
.buy-box{padding:22px}
.buy-price{display:flex;align-items:baseline;gap:8px;font-size:1.15rem;padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.buy-price strong{font-size:1.35rem;color:var(--text)}
.buy-price small{color:var(--muted);font-size:.9rem}
.buy-box .buy-form label{margin-bottom:16px}
.buy-box .buy-form input[type=text],.buy-box .buy-form input[type=number]{margin-top:6px;padding:12px 14px}
.buy-box .qty{margin-top:6px}
.buy-box .qty button{width:48px}
.buy-summary{margin:22px 0 18px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg)}
.buy-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.buy-total span{font-size:1rem;color:var(--muted)}
.buy-total strong{font-size:1.7rem;font-weight:900;color:var(--text)}
.buy-balance{margin-top:8px}
.buy-balance span{color:var(--muted)}
.buy-balance strong{font-size:1.15rem;color:var(--text)}
.buy-balance strong.low{color:var(--err)}
.buy-topup{display:inline-block;margin-top:8px;font-weight:600}
.buy-submit{margin-top:4px;padding:15px 22px;font-size:1.1rem}


/* ── theme switcher (тёмная / светлая / авто) ── */
.theme-switch{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden;background:var(--bg);flex:0 0 auto}
.theme-switch button{display:inline-flex;align-items:center;justify-content:center;width:30px;height:26px;border:0;border-left:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;padding:0}
.theme-switch svg{display:block}
.theme-switch button:first-child{border-left:0}
.theme-switch button:hover{color:var(--text);background:var(--bg2)}
.theme-switch button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);font-weight:600}
.topbar-row .theme-switch{margin-left:8px}

/* Переключатель языка (Wave I18N-1). Тот же вид, что у переключателя темы —
   стоит рядом, и две разные по стилю кнопки в одном ряду смотрелись бы как
   недоделка. Ссылки, а не кнопки: каждый вариант — реальный URL (/en/...),
   работает без JS и индексируется. margin-left:auto отжимает пару вправо. */
.lang-switch{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden;background:var(--bg);flex:0 0 auto;margin-left:auto}
.lang-switch a{border-left:1px solid var(--line);color:var(--muted);font-size:.92rem;line-height:1;padding:8px 12px;text-decoration:none;white-space:nowrap}
.lang-switch a:first-child{border-left:0}
.lang-switch a:hover{color:var(--text);background:var(--bg2);text-decoration:none}
.lang-switch a.active{background:var(--accent);color:var(--accent-ink);font-weight:600}

@media (max-width:720px){
  .topbar-row{flex-wrap:wrap;padding:6px 0}
  .topbar-row .theme-switch{margin-left:0}
  /* Тумблер темы стал иконками (30x26) — на телефоне только увеличиваем
     площадь нажатия; прежние padding/font-size относились к текстовым
     кнопкам и больше не нужны. */
  .theme-switch button{width:34px;height:30px}
  .lang-switch{margin-left:0}
  .lang-switch a{padding:7px 10px;font-size:.88rem}
}

/* cart (Wave WEB-5) */
.cart-btn{position:relative;font-size:1.05rem}
.cart-badge{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.cart-lines{display:flex;flex-direction:column;gap:12px;margin:14px 0 22px}
.cart-line{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto auto;gap:16px;align-items:center;padding:16px 18px}
.cart-line.bad{border-color:rgba(239,95,87,.55)}
.cart-ico{width:48px;height:48px;border-radius:14px;background:var(--fill);border:0;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
/* У товара без эмодзи рамка выглядела дырой; место держим (строки остаются
   выровненными), сам квадрат прячем. */
.cart-ico:empty{background:none;border-color:transparent}
.cart-title{font-weight:700}.cart-title a{color:var(--text)}.cart-title a:hover{color:var(--link);text-decoration:none}
.cart-issue{color:var(--err);font-size:.9rem;margin-top:2px}
.cart-edit{display:flex;gap:6px;align-items:center}
.cart-qty{width:46px;padding:8px 4px;border:1px solid var(--line);border-left:0;border-right:0;background:var(--bg);color:var(--text);text-align:center;font-size:.95rem}
.qty-sm button{width:34px;height:36px;line-height:1;font-size:1.05rem;padding:0}
.qty-sm button:disabled{opacity:.45;cursor:default}
.cart-promo{width:150px;padding:9px 10px;border-radius:var(--radius-s);border:1px solid var(--line);background:var(--bg);color:var(--text)}
.cart-total{font-weight:800;font-size:1.1rem;color:var(--text);white-space:nowrap}
.cart-summary{max-width:420px;margin-left:auto}
/* На узком контейнере в один ряд не помещаются название, управление, цена и
   «убрать»: название и «за шт.» ломались на 2-3 строки и ряд выглядел
   съехавшим. Кладём управление на свою строку. Порог 1100px — это ноутбук
   1024; та же раскладка задана для модалки (она всегда ≤920px). */
@media (max-width:1100px){
  .cart-line{grid-template-columns:48px minmax(0,1fr) auto auto;grid-template-areas:"ico main total rm" "edit edit edit edit";row-gap:12px}
  .cart-ico{grid-area:ico}.cart-main{grid-area:main}.cart-edit{grid-area:edit}
  .cart-total{grid-area:total;text-align:right}
  .cart-line > form.inline-form{grid-area:rm}
  .cart-promo{flex:1;width:auto;max-width:320px}
  .cart-total .old-price{display:inline;margin-right:8px}
}
@media (max-width:900px){
  .cart-line{grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"ico main rm" "edit edit edit" "total total total"}
  .cart-ico{grid-area:ico}.cart-main{grid-area:main}.cart-edit{grid-area:edit}.cart-total{grid-area:total;text-align:right}
  .cart-line > form.inline-form{grid-area:rm}
  .cart-promo{flex:1;width:auto}
  .cart-summary{max-width:none}
}

/* third level in the categories menu */
.mega-groups{list-style:none;margin:2px 0 6px;padding:0 0 0 14px;border-left:1px solid var(--line)}
.mega-groups li{margin:2px 0}
.mega-groups a{color:var(--muted);font-size:.87rem}
.mega-groups a:hover{color:var(--link);text-decoration:none}
.mega-subs > li{margin-bottom:3px}

/* mobile rental card (Wave WEB-6) */
.rentals{display:flex;flex-direction:column;gap:16px}
.rental{padding:18px 20px}
.rental:target{border-color:var(--accent-2);box-shadow:0 0 0 2px rgba(255,154,77,.3)}
.rental-head{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid var(--line)}
.rental-title{font-weight:700;font-size:1.1rem}
.rental-status{text-align:right;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.rental-conn{padding-top:14px}
.rental-conn h4{margin:0 0 10px;font-size:.95rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.proto{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg);margin-bottom:8px}
.proto-name{min-width:92px;font-weight:700;font-size:.85rem;color:var(--link);white-space:nowrap}
.proto-url{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;font-size:.9rem;background:none;border:0;padding:0}
.rental-fields{margin:14px 0 12px}
.rental-renew{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.renew-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.renew-form label{display:flex;flex-direction:column;gap:6px;flex:1 1 200px;margin:0;font-size:.85rem;color:var(--muted)}
.renew-form select,.renew-form input[type=text]{width:100%;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg);color:var(--text);font:inherit;font-size:.95rem}
.renew-form .btn{height:42px}
@media (max-width:720px){
  .rental-status{text-align:left;align-items:flex-start}
  .proto{flex-wrap:wrap}
  .proto-name{min-width:0}
  .proto-url{flex-basis:100%;order:3}
}

/* promo preview: «Подтвердить» → скидка и перечёркнутая цена до оплаты */
.buy-form label.promo-label{margin-bottom:4px}
.promo-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.promo-row input[type=text]{flex:1;min-width:0;margin-top:0}
.promo-check{white-space:nowrap;flex:0 0 auto}
.promo-note{font-size:.9rem;color:var(--muted);margin:0 0 10px}
.promo-note.err{color:var(--err)}
.old-price{color:var(--muted);font-weight:600;font-size:.95rem;text-decoration:line-through;text-decoration-thickness:2px;margin-right:8px}
.buy-total-val{display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.cart-total .old-price{display:block;margin:0 0 2px;font-size:.85rem}
.pkg-row .promo-note{grid-column:1/-1;margin:0}
.cart-main .promo-note{margin:4px 0 0}
.renew-form .promo-row{margin:0;width:100%}
.renew-form .promo-note{flex:1 1 100%;margin:0}
.renew-total{display:flex;align-items:center;gap:8px;white-space:nowrap;height:42px}
.renew-total strong{font-size:1.15rem;color:var(--text)}
@media (max-width:900px){
  .cart-edit{flex-wrap:wrap}
  .cart-total .old-price{display:inline;margin-right:8px}
}

/* «наверх» — появляется после прокрутки */
.to-top{position:fixed;right:18px;bottom:18px;z-index:15;width:46px;height:46px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--text);box-shadow:var(--shadow);font-size:1.25rem;line-height:1;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .18s,transform .18s,visibility .18s,border-color .12s}
.to-top:hover{border-color:var(--accent-2);color:var(--link)}
.to-top.show{opacity:1;visibility:visible;transform:none}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}
@media (max-width:720px){.to-top{right:12px;bottom:12px;width:42px;height:42px}}
/* cart modal (Wave WEB-CART-MODAL) */
body.modal-open{overflow:hidden}
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px}
.modal-backdrop{position:absolute;inset:0;background:rgba(4,6,10,.6);backdrop-filter:blur(2px)}
.modal-card{position:relative;width:min(920px,100%);max-height:90vh;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 24px 60px rgba(0,0,0,.45);overflow:hidden}
.modal-head{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--bg2)}
.modal-head h2{margin:0;font-size:1.15rem}
.modal-x{margin-left:auto;width:34px;height:34px;border-radius:var(--radius-s);border:1px solid var(--line);background:var(--bg);color:var(--text);font-size:1rem;cursor:pointer}
.modal-x:hover{border-color:var(--line-strong)}
.modal-body{padding:16px 18px 20px;overflow-y:auto}
.modal-body.is-busy,.cart-panel.is-busy{opacity:.55;pointer-events:none}
/* Подтверждение — короткий вопрос, корзинная ширина тут ни к чему. */
.modal-sm{width:min(420px,100%)}
.modal-sm .modal-body p{margin:0 0 1.1em}
.confirm-actions{display:flex;gap:10px;flex-wrap:wrap}
.confirm-actions .btn{flex:1 1 auto;justify-content:center}
.modal-body .cart-lines{margin-top:0}
/* ...из-за чего плашка «Товар в корзине» прилипала к первой позиции: её
   нижнего отступа нет, а верхний у списка обнулён. Отступ держит сама плашка. */
.cart-panel .flash{margin-bottom:14px}
/* Строка корзины в модалке: карточка всегда ≤920px, поэтому места на один ряд
   не хватает — название и «за шт.» ломались на 2-3 строки и ряд выглядел
   съехавшим. Кладём управление на свою строку: название и цена остаются
   сверху. Ниже 900px действует общий мобильный вариант — он тут и нужен. */
@media (min-width:901px){
  .modal-body .cart-line{grid-template-columns:48px minmax(0,1fr) auto auto;grid-template-areas:"ico main total rm" "edit edit edit edit";row-gap:12px;align-items:center}
  .modal-body .cart-ico{grid-area:ico}
  .modal-body .cart-main{grid-area:main}
  .modal-body .cart-edit{grid-area:edit}
  .modal-body .cart-total{grid-area:total;text-align:right}
  .modal-body .cart-line > form.inline-form{grid-area:rm}
  .modal-body .cart-promo{flex:1;width:auto;max-width:320px}
  .modal-body .cart-total .old-price{display:inline;margin-right:8px}
}
.modal-body .cart-summary{max-width:none}
@media (max-width:720px){
  .modal{padding:0}
  .modal-card{max-height:100vh;height:100%;border-radius:0;border:0}
}



/* Заказы — узкий список строками (как «Списки прокси» в резидентских):
   строка на заказ, детали (выданные данные, ручная выдача, форма возврата)
   раскрываются по клику. Форма по-прежнему не в таблице: `.table td` запрещает
   перенос, и подписи с полями налезали друг на друга (Wave WEB-7.1). */
.orders{display:flex;flex-direction:column;gap:8px}
.order-row{border:1px solid var(--line);border-radius:var(--radius-s);background:var(--card)}
.order-row:target,.order-row[open]{border-color:var(--line-strong)}
.order-row > summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;
  gap:6px 12px;align-items:baseline;padding:10px 14px;cursor:pointer;list-style:none}
.order-row > summary::-webkit-details-marker{display:none}
.order-row > summary:hover{background:var(--fill)}
.o-no{font-weight:800;white-space:nowrap}
.o-label{font-weight:600;min-width:0;overflow-wrap:anywhere}
.o-label a{color:var(--text)}
.o-label a:hover{color:var(--link);text-decoration:none}
.o-date{white-space:nowrap}
.o-sum{font-weight:800;white-space:nowrap}
.o-status{white-space:nowrap}
.order-details{padding:0 14px 12px;border-top:1px solid var(--line);margin-top:2px}
.units-head{color:var(--muted);font-size:.9rem;padding:8px 0 0}
.order-details .units{margin-top:8px}

/* ── manual delivery, inside an order card (Wave WEB-MANUAL) ───────── */
.manual-box{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.manual-state{margin:0 0 4px;font-weight:600}
.manual-instruction{margin-top:8px;padding:10px 12px;border-left:2px solid var(--accent-2);background:var(--bg2);white-space:pre-wrap;overflow-wrap:anywhere}
.manual-thread{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.manual-thread li{display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--line);padding-left:10px}
.manual-msg{white-space:pre-wrap;overflow-wrap:anywhere}
.manual-form{margin-top:12px;display:flex;flex-direction:column;gap:10px;max-width:640px}
.manual-form .field{display:flex;flex-direction:column;gap:6px}
.manual-form label{font-size:.9rem;color:var(--muted)}
.manual-form textarea,.manual-form input[type=file]{
  width:100%;padding:10px 12px;border-radius:var(--radius-s);border:1px solid var(--line);
  background:var(--bg);color:var(--text);font:inherit}
.manual-form textarea{min-height:78px;resize:vertical;line-height:1.45}
.manual-form input[type=file]{padding:9px 10px;font-size:.9rem}
.manual-form input[type=file]::file-selector-button{margin-right:10px;padding:7px 12px;border-radius:3px;border:1px solid var(--line);background:var(--bg2);color:var(--text);font:inherit;cursor:pointer}
.manual-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}

.return-box{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.return-box > summary{cursor:pointer;color:var(--link);font-size:.92rem;padding:4px 0;list-style:none}
.return-box > summary::-webkit-details-marker{display:none}
.return-box > summary::before{content:"▸ ";color:var(--muted)}
.return-box[open] > summary::before{content:"▾ "}
.return-form{margin-top:12px;display:flex;flex-direction:column;gap:14px;max-width:640px}
.return-form .field{display:flex;flex-direction:column;gap:6px}
.return-form label{font-size:.9rem;color:var(--muted);white-space:normal}
.return-form textarea,.return-form input[type=number],.return-form input[type=file]{
  width:100%;padding:10px 12px;border-radius:var(--radius-s);border:1px solid var(--line);
  background:var(--bg);color:var(--text);font:inherit;white-space:normal}
.return-form textarea{min-height:84px;resize:vertical;line-height:1.45}
.return-form .field-qty input{max-width:150px}
.return-form input[type=file]{padding:9px 10px;font-size:.9rem}
.return-form input[type=file]::file-selector-button{margin-right:10px;padding:7px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);color:var(--text);font:inherit;cursor:pointer}
.return-form input[type=file]::file-selector-button:hover{border-color:var(--accent-2)}
.field-hint{margin:0;font-size:.82rem;color:var(--muted)}
.return-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
.reason-cell{white-space:normal;min-width:200px}
@media (max-width:720px){
  /* на телефоне: номер + товар первой строкой, дата · статус · сумма — второй */
  .order-row > summary{grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;padding:10px 12px}
  .o-no{grid-area:1 / 1}
  .o-label{grid-area:1 / 2 / 2 / -1}
  .o-date{grid-area:2 / 1}
  .o-status{grid-area:2 / 2;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .o-sum{grid-area:2 / 3;justify-self:end}
  .order-details{padding:0 12px 12px}
  .return-form{max-width:none}
  .manual-form{max-width:none}
  .manual-actions{flex-direction:column;align-items:stretch}
  .manual-actions .btn{width:100%}
  .return-actions{flex-direction:column;align-items:stretch}
  .return-actions .btn{width:100%}
  .return-form input[type=file]{font-size:.85rem}
}

/* ── mobile header (Wave WEB-7.2) ────────────────────────────────────
   It was 261px of sticky chrome on a 375×812 phone — a third of the
   screen — because the top bar wrapped onto two rows and the balance,
   the cart and the account menu each claimed a row of their own. */
@media (max-width:720px){
  .site-header .header-row{gap:8px;padding:8px 0;row-gap:8px}
}
@media (max-width:560px){
  .brand span{display:none}
  .cats-btn .cats-label{display:none}
  .cats-btn{padding:0 14px;font-size:1.1rem}
  .user-box{margin-left:auto}
  .user-name{display:inline-block;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
}
/* 320px: balance + cart + menu no longer fit next to the logo — they take
   their own row, left-aligned so the gap doesn't read as a mistake. */
/* the «Открыть →» link was squeezed onto two lines next to a long
   subcategory title — it gets its own line on a phone. */
@media (max-width:560px){
  .section-head{flex-direction:column;align-items:flex-start;gap:4px}
  .section-head > a{white-space:nowrap}
}
@media (max-width:400px){
  .user-box{margin-left:0}
  .user-box .balance{padding:0 8px}
  .user-name{max-width:72px}
}

/* ── tables turn into cards on a phone (Wave WEB-7.2) ────────────────
   `.table` is 640px wide minimum inside a horizontal scroller, so on a
   375px screen the columns that matter (the amount, the status) sat off
   to the right where nobody scrolls to. Every cell carries a
   `data-label`, which becomes the row label here. */
@media (max-width:640px){
  .table-wrap{border:0;border-radius:0;overflow:visible}
  .table{min-width:0;display:block}
  .table thead{display:none}
  .table tbody,.table tr,.table td{display:block;width:100%}
  .table tr{border:1px solid var(--line);border-radius:var(--radius-s);background:var(--card);padding:6px 14px;margin-bottom:10px}
  .table tr:last-child{margin-bottom:0}
  .table td{border:0;padding:7px 0;white-space:normal;text-align:right}
  .table td[data-label]::before{content:attr(data-label);float:left;max-width:45%;padding-right:14px;
    color:var(--muted);font-size:.85rem;text-align:left;font-weight:400}
  .table td[data-label=""]{text-align:left}
  .table td[data-label=""]::before{content:none}
  .table td + td{border-top:1px dashed var(--line)}
  .table td.actions{display:flex;flex-wrap:wrap;justify-content:flex-end}
  .reason-cell{min-width:0}
  /* Длинные однородные списки (прокси) — строкой, а не столбиком «подпись:
     значение»: пять подписей на позицию растягивали историю на экраны, а сами
     значения говорят за себя (флаг гео, «ГБ», статус с эмодзи). Название —
     первой строкой, остальное через «·» второй. */
  .table.table-tight tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;padding:10px 12px}
  .table.table-tight td{width:auto;padding:0;border:0;text-align:left;white-space:nowrap}
  .table.table-tight td[data-label]::before{content:none}
  .table.table-tight td:first-child{flex:1 1 100%;font-weight:600;white-space:normal}
  /* Разделитель — ::after у значения, а не ::before у следующего: при переносе
     строка не начинается с повисшей точки. Селектор с [data-label] нужен, чтобы
     перебить правило подписи выше по специфичности. */
  .table.table-tight td[data-label]:not(:last-child)::after{content:"·";color:var(--muted);margin-left:6px}
  .table.table-tight td[data-label]:first-child::after{content:none}
  .table.table-tight td.actions{flex:1 1 100%;justify-content:flex-start;gap:6px;margin-top:4px}
  .table.table-tight td.actions::before{content:none}
  .table.table-tight .muted.small{white-space:normal}
}
@media (max-width:560px){
  .rental-fields{grid-template-columns:1fr;gap:2px}
  .rental-fields dt{margin-top:8px}
}

/* ── mobile header v4 (Wave WEB-7.3) ─────────────────────────────────
   Owner: the burger belongs top-left, the logo on the top row, the top
   info strip inside the burger, and the auth buttons smaller. The
   category menu opens short, with «показать все» under it and the strip
   below that. These three live in the burger panel and nowhere else. */
/* лента главной: заголовок подкатегории/подгруппы над её позициями */
.feed-sub{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:14px 0 6px}
.feed-sub-title{font-weight:700;color:var(--text)}
.feed-sub-title:hover{color:var(--link);text-decoration:none}

.mega-more,.mega-links,.mega-switches{display:none}
@media (max-width:720px){
  .topbar{display:none}
  .site-header .header-row{gap:8px;padding:8px 0;row-gap:8px;align-items:center}
  .cats-btn{height:38px;padding:0 12px;font-size:.95rem}
  .header-row .cats-btn{order:0}
  .header-row .brand{order:1;margin-right:auto}
  .header-row .user-box{order:2}
  .user-box{gap:6px}
  .user-box .balance,.user-box .btn{height:38px}
  .user-box .btn{padding:0 11px;font-size:.85rem}
  .user-box .balance{padding:0 9px;font-size:.9rem}
  .search-form{height:44px}

  .mega-panel .container{padding-top:14px;padding-bottom:16px}
  .mega-panel .mega-subs{display:none}
  .mega-panel .mega-col:nth-child(n+6){display:none}
  .mega-panel.is-open-all .mega-subs{display:block}
  .mega-panel.is-open-all .mega-col:nth-child(n+6){display:block}
  .mega-compact .mega-col{margin-bottom:2px}
  .mega-cat{margin-bottom:0;padding:6px 0}
  .mega-more{display:inline-flex;width:100%;margin-top:12px}
  .mega-links{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
  .mega-links a{color:var(--muted);font-size:.95rem;padding:2px 0}
  .mega-links a.active,.mega-links a:hover{color:var(--link);text-decoration:none}
  .mega-switches{display:flex;align-items:center;gap:8px;margin-top:12px}
  .mega-switches .lang-switch{margin-left:0}
}
@media (max-width:560px){
  .user-box .btn{padding:0 9px;font-size:.82rem}
  .user-box .balance{font-size:.85rem;padding:0 8px}
}

/* ── лента категорий на главной + листалка (Wave WEB-8) ──────────────
   Главная показывает HOME_CATEGORIES_PER_PAGE категорий подряд, каждую
   со своими строками товаров; остальные — на следующих страницах. */
#feed{scroll-margin-top:110px}
.feed-cat .section-head{margin:1.6rem 0 .6rem}
.feed-cat + .feed-cat{margin-top:22px}
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:24px 0 4px}
.pager-num,.pager-btn{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border-radius:999px;background:var(--fill);color:var(--text);font-size:.92rem;font-weight:600}
.pager-num:hover,.pager-btn:hover{color:var(--link);text-decoration:none}
.pager-num.cur{background:var(--accent);color:var(--accent-ink)}
.pager-btn.off{opacity:.35}
.pager-gap{color:var(--muted);padding:0 2px}
/* Обложки статей блога. Размеры картинки нам неизвестны (читать их в рантайме нечем), поэтому от сдвига вёрстки страхует соотношение сторон плюс object-fit, а не width/height в разметке. */
.article-cover{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);margin:10px 0 14px;background:var(--line)}
.prow-media{grid-template-columns:auto minmax(0,1fr) auto auto}
.prow-thumb{display:block;width:104px;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:var(--line)}
.prow-thumb img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:560px){.prow-thumb{width:72px}}
/* Видео в статье: соотношение сторон держит контейнер, поэтому плеер не сдвигает вёрстку, пока грузится (сам iframe — loading=lazy). */
.embed{position:relative;width:100%;aspect-ratio:16/9;margin:12px 0;border-radius:var(--radius);overflow:hidden;background:var(--line)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}