/* ============================================================================
   WowGold — стили. Дизайн A «интерфейс самой игры», выбран владельцем
   23.09.2026 из трёх вариантов.

   Всё, что человек видит, взято из окон самой WoW, а не из магазинов:
     подсказка предмета — тёмно-синяя панель с двойной серой рамкой, имя
       цветом качества, зелёная строка эффекта, жёлтая строка в кавычках,
       цена с золотой монетой внизу. Так оформлены карточки версий,
       панели и подсказка на главной;
     окно аукциона — таблица с золотыми заголовками столбцов мелкими
       капителями, так оформлены все таблицы;
     кнопка игрового диалога — красная с золотой рамкой. Кнопка Альянса
       синяя: цвет фракции в строке таблицы подсказывает, какая кнопка
       чья, раньше, чем человек прочтёт слово;
     красный текст — «не выполнено» в игре; у нас так пишется «не
       продаётся».
   Заголовки Marcellus — ближайший открытый шрифт к Friz Quadrata,
   шрифту интерфейса игры. Текст Alegreya Sans.

   От wowgoldshop.eu дизайн уходит нарочно: там плоские карточки на почти
   чёрном и жёлтый акцент. Два сайта одного владельца не должны выглядеть
   одним сайтом.

   Порядок правил: базовые (телефон) → медиазапросы для широких экранов в
   КОНЦЕ файла. Новое базовое правило дописывать в базовый блок, а не в
   хвост: в хвосте оно молча перебьёт мобильное с той же специфичностью.
   Запрет боковой прокрутки — на html, не на body (иначе ломается sticky).
   Модификаторы называем блок--модификатор: общее имя вроде .quiet уже
   однажды молча растянуло чужую кнопку.
   ========================================================================== */
:root{
  --bg:#070a12; --bg-2:#0a0f1d;
  --panel:#0b1021; --panel-2:#111831;
  --edge:#5d6679; --edge-in:#1a2135; --line:#1b2236; --line-2:#2a3350;
  --text:#ece3c8; --muted:#a8a18f; --dim:#807a6a;
  --gold:#ffd100; --gold-2:#ffe57a; --gold-soft:rgba(255,209,0,.1);
  --use:#3ee23e; --req:#ff5a4a; --grey:#9d9d9d;
  --epic:#c77dff; --legend:#ff8000;
  --wrap:1180px;
  --display:"Marcellus",Georgia,"Times New Roman",serif;
  --caps:"Marcellus SC","Marcellus",Georgia,serif;
  --sans:"Alegreya Sans","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;color-scheme:dark}
body{margin:0;color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.55;
  background:radial-gradient(1200px 600px at 80% -120px,#18203f 0%,transparent 65%) no-repeat,var(--bg)}
body.noscroll{overflow:hidden}
a{color:var(--gold-2);text-decoration:none}
a:hover{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;margin:0;text-wrap:balance}
h1{font-size:clamp(2.1rem,5.4vw,3.8rem);color:#fff;max-width:22ch;text-shadow:0 2px 24px rgba(0,0,0,.6)}
h2{font-size:clamp(1.45rem,3vw,1.95rem);color:var(--gold);margin-bottom:12px}
h3{font-size:1.14rem;color:#fff;margin-bottom:6px}
p{margin:0 0 12px}
b{color:#fff;font-weight:700}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fine{font-size:.9rem;color:var(--dim);line-height:1.55}
.fine a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:2px}
.fine a:hover{color:var(--gold)}
.mono,.num{font-variant-numeric:tabular-nums}
.tag{display:inline-block;font:700 .62rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;font-style:normal;
  color:var(--legend);border:1px solid currentColor;border-radius:2px;padding:3px 4px 2px;margin-left:7px;vertical-align:.25em}

/* --- монета: золото в игре всегда рисуется монетой --- */
.coin{display:inline-block;flex:0 0 auto;width:.82em;height:.82em;border-radius:50%;vertical-align:-.06em;margin-left:.3em;
  background:radial-gradient(circle at 35% 30%,#fff5bf 0,#f4c534 38%,#a87a09 100%);box-shadow:inset 0 0 0 1px rgba(60,35,0,.45)}

/* --- кнопка игрового диалога --- */
.btn,.pick{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 22px;
  font:400 1rem/1 var(--display);color:var(--gold);white-space:nowrap;cursor:pointer;
  background:linear-gradient(#b0240f,#700f06 55%,#4f0a04);border:1px solid #d6ae55;border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,220,150,.38),0 0 0 1px #2b0603,0 4px 12px rgba(0,0,0,.45);text-shadow:0 1px 0 #000}
.btn:hover,.pick:hover{color:var(--gold-2);filter:brightness(1.16)}
.btn--sm,.pick{padding:8px 13px;font-size:.92rem}
.btn--alliance{background:linear-gradient(#2a62c4,#163f8c 55%,#0d2a63);box-shadow:inset 0 1px 0 rgba(190,215,255,.35),0 0 0 1px #06142f,0 4px 12px rgba(0,0,0,.45)}

/* --- подсказка предмета: общая панель --- */
.tip,.card,.faq details,.strip,.nosale,.rsame,.slist,.vcard,.chips a{
  background:rgba(9,13,28,.94);border:1px solid var(--edge);border-radius:5px;box-shadow:inset 0 0 0 1px var(--edge-in)}

/* --- шапка --- */
.top{position:sticky;top:0;z-index:20;background:linear-gradient(rgba(14,20,40,.97),rgba(8,11,22,.97));
  border-bottom:1px solid var(--line-2);backdrop-filter:blur(6px)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;min-height:62px}
.logo{display:inline-flex;align-items:center;gap:9px;font:400 1.35rem/1 var(--caps);color:var(--gold);
  text-shadow:0 0 14px rgba(255,209,0,.28);white-space:nowrap}
.logo:hover{color:var(--gold-2)}
.logo .coin{width:20px;height:20px;margin:0}
.region{display:none;font:500 .74rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--edge);border-radius:3px;background:var(--panel);padding:8px 10px;white-space:nowrap}
.region b{color:var(--gold)}
.menu{display:none;position:absolute;left:0;right:0;top:62px;background:var(--panel);border-bottom:1px solid var(--edge);
  padding:10px 16px 16px;flex-direction:column;gap:2px;box-shadow:0 24px 44px rgba(0,0,0,.6)}
.menu--open{display:flex}
.menu a{padding:11px 12px;color:var(--muted);font:400 1.02rem/1.2 var(--display);border-left:2px solid transparent}
.menu a:hover{color:var(--gold);background:var(--panel-2)}
.menu a[aria-current]{color:var(--gold);border-left-color:var(--gold);background:var(--gold-soft)}
.menu .tag{font-family:var(--sans)}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:42px;height:42px;padding:11px;
  background:var(--panel);border:1px solid var(--edge);border-radius:3px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--gold);border-radius:2px}
.burger:hover{border-color:var(--gold)}

/* Переключатель языков — флажки и список на <details>, без скрипта.
   Показывается только там, где есть вторая языковая версия. */
.langsw{position:relative;margin-left:auto}
.langsw>summary{display:flex;align-items:center;gap:7px;cursor:pointer;list-style:none;padding:8px 10px;
  font:500 .82rem/1 var(--sans);letter-spacing:.06em;color:var(--text);background:var(--panel);
  border:1px solid var(--edge);border-radius:3px}
.langsw>summary::-webkit-details-marker{display:none}
.langsw>summary::marker{content:""}
.langsw>summary:hover,.langsw[open]>summary{border-color:var(--gold);color:#fff}
.langsw .flag{width:20px;height:12px;flex:0 0 auto;border-radius:1px;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.langsw__caret{width:9px;height:6px;flex:0 0 auto;opacity:.7;transition:transform .12s}
.langsw[open] .langsw__caret{transform:rotate(180deg)}
.langsw__menu{position:absolute;right:0;top:calc(100% + 5px);z-index:30;min-width:170px;padding:4px;
  background:rgba(9,13,28,.98);border:1px solid var(--edge);border-radius:5px;box-shadow:inset 0 0 0 1px var(--edge-in),0 16px 36px rgba(0,0,0,.6)}
.langsw__menu a{display:flex;align-items:center;gap:9px;padding:9px 10px;color:var(--muted);border-radius:3px}
.langsw__menu a:hover{color:#fff;background:var(--panel-2)}
.langsw__menu a[aria-current]{color:var(--gold);background:var(--gold-soft)}

/* --- заголовок страницы --- */
.head{position:relative;overflow:hidden;padding-block:28px 10px}
.head>.wrap{position:relative}
.head__art{position:absolute;inset:0;background-position:62% 22%;background-size:cover;background-repeat:no-repeat;opacity:.26;
  -webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 92%);mask-image:linear-gradient(180deg,#000 10%,transparent 92%)}
.head--hero{padding-block:40px 30px;border-bottom:1px solid var(--line)}
/* minmax(0,1fr), а не голая сетка: иначе колонку распирает строка
   вкладок версий, и на 375 заголовок уезжал за правый край. */
.head__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.crumbs{font-size:.92rem;color:var(--dim);margin-bottom:14px;display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--gold)}
.crumbs em{font-style:normal;color:var(--text)}
.eyebrow{font:500 .8rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.grad{color:var(--gold);text-shadow:0 0 30px rgba(255,209,0,.25)}
.lede{font-size:1.1rem;color:#ddd4bb;max-width:60ch;margin:16px 0 0}
.lede b{color:#fff}

/* Подсказка предмета справа от заголовка главной. */
.tip{padding:14px 16px 12px;font-size:1rem;line-height:1.45;max-width:360px}
.tip p{margin:0}
.tip__cap{font:500 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:8px!important}
.tip__name{font:400 1.25rem/1.25 var(--display);color:var(--epic)}
.tip__sub{color:#fff}
.tip__use{color:var(--use)}
.tip__flavor{color:var(--gold);font-style:italic;margin-top:4px!important}
.tip__price{margin-top:8px!important;color:#fff}

/* Пилюли версий под заголовком главной. */
.tabs{display:flex;gap:6px;overflow-x:auto;padding:22px 0 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto;font:400 .92rem/1 var(--display);color:var(--muted);border:1px solid var(--edge);border-radius:3px;
  padding:9px 12px;white-space:nowrap;background:rgba(9,13,28,.85)}
.tabs a:hover{color:var(--gold);border-color:var(--gold)}

/* --- разделы --- */
.sec{padding-block:30px}
.sec.alt{background:linear-gradient(180deg,rgba(17,24,49,.55),rgba(10,15,29,.55));border-block:1px solid var(--line)}
.sec h2+p,.sec p+h2{margin-top:0}
.sec p+h2,.sec ol+h2,.sec div+h2{margin-top:26px}
.lede-sm{color:var(--muted);max-width:66ch;margin:-4px 0 18px}

/* --- карточки версий: обложка сверху, подсказка снизу --- */
.vgrid{display:grid;grid-template-columns:1fr;gap:14px}
.vcard{display:flex;flex-direction:column;overflow:hidden;color:var(--text)}
.vcard:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--edge-in),0 0 0 1px var(--gold),0 12px 28px rgba(0,0,0,.5)}
.vcover{display:block;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--edge-in);background:var(--panel-2)}
.vcover img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.vbody{display:flex;flex-direction:column;gap:2px;padding:12px 14px 14px;flex:1}
.vname{font:400 1.2rem/1.25 var(--display);color:#fff}
.vexp{color:var(--muted);font-size:.95rem}
.vuse{color:var(--use);font-size:.98rem}
.vprice{display:block;margin-top:auto;padding-top:10px;color:#fff}
.vprice b{color:var(--gold)}
.vprice--off{color:var(--req)}
.vcard--off .vcover img{filter:grayscale(1) brightness(.7)}
.vcard--off .vname{color:var(--grey)}
.vcard--off .vuse{color:var(--muted)}
.vcard--forever .vname{color:var(--legend)}

/* --- сводка версии: строка подсказки --- */
.strip{display:flex;flex-wrap:wrap;gap:6px 22px;padding:12px 16px;color:var(--muted)}
.strip b{color:var(--gold)}
.strip--off b{color:var(--req)}
.nosale{padding:14px 16px;margin-top:12px}
.nosale>b{display:block;color:var(--req);font:400 1.1rem/1.3 var(--display);margin-bottom:6px}
.nosale p:last-child{margin-bottom:0}

/* --- продавцы версии --- */
.slist{list-style:none;margin:0 0 12px;padding:0;overflow:hidden}
.slist li+li{border-top:1px solid var(--line)}
.srow{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:12px 16px;color:var(--text)}
.srow:hover{background:var(--gold-soft);color:var(--text)}
.ssite{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font:400 1.12rem/1.2 var(--display);color:#fff}
.ssite em{font:400 .88rem var(--sans);color:var(--muted);font-style:normal}
.swhat{grid-column:1 / -1;color:var(--muted);font-size:.95rem}
.swhat i{font-style:normal;color:var(--use)}
.sprice{grid-row:1;grid-column:2;text-align:right;color:#fff;white-space:nowrap}
.sprice b{color:var(--gold)}
.sper{grid-column:1 / -1;color:var(--dim);font-size:.9rem;font-variant-numeric:tabular-nums}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--grey)}
.dot--on{background:var(--use);box-shadow:0 0 8px rgba(62,226,62,.6)}
.star{color:var(--gold)}

/* --- таблицы: окно аукциона --- */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:14px;
  background:var(--panel);border:1px solid var(--edge);border-radius:5px;box-shadow:inset 0 0 0 1px var(--edge-in)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{padding:10px 14px;text-align:left;font:400 .92rem/1.1 var(--caps);letter-spacing:.03em;color:var(--gold);white-space:nowrap;
  background:linear-gradient(#18203a,#10162a);border-bottom:1px solid var(--edge)}
td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(255,209,0,.05)}
th.num,td.num{text-align:right}
td a{color:#fff}
td a:hover{color:var(--gold)}
.cm--off{color:var(--req)}
.rname span{display:flex;flex-direction:column;color:#fff;font-weight:500}
.rname em{font-style:normal;color:var(--muted);font-size:.88rem;font-weight:400}
.pill.ok{color:var(--use)}
.native{display:block;font-style:normal;color:var(--dim);font-size:.85rem}
td.tlink{text-align:right}

/* --- реалмы версии --- */
.realms{display:grid;gap:12px}
.rsame{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:11px 16px;margin:0;color:var(--muted)}
.rsame>span{color:#fff}
.rsame b{color:var(--gold)}
.rfind input{width:100%;max-width:420px;padding:12px 14px;font:400 1rem var(--sans);color:#fff;background:var(--panel);
  border:1px solid var(--edge);border-radius:4px;box-shadow:inset 0 0 0 1px var(--edge-in)}
.rfind input::placeholder{color:var(--dim)}
.rfind input:focus{outline:none;border-color:var(--gold)}
.rfind__none{margin:10px 0 0;color:var(--req)}
.rjump{display:flex;flex-wrap:wrap;gap:6px}
.rjump a{font-size:.95rem;color:var(--muted);padding:6px 10px;border:1px solid var(--line-2);border-radius:3px}
.rjump a:hover{color:var(--gold);border-color:var(--gold)}
.rband>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:10px;padding:8px 2px;
  font:400 1.2rem/1.2 var(--display);color:#fff}
.rband>summary::-webkit-details-marker{display:none}
.rband>summary::marker{content:""}
.rband>summary::before{content:"+";width:1em;color:var(--gold);font-family:var(--sans)}
.rband[open]>summary::before{content:"\2212"}
.rband>summary i{font:400 .9rem var(--sans);color:var(--dim);font-style:normal}
.rband>summary:hover{color:var(--gold)}
.rtable{margin-bottom:6px}
.rtable td.rn span{color:#fff;font-weight:500}
.rtable td.rn i{font-style:normal;color:var(--muted);font-size:.85rem;margin-left:8px}
.rtable td.num small{color:var(--dim);font-size:.85rem}
.rtable td.rbuy,.rtable th.rbuy{text-align:right;white-space:nowrap}
.rtable td.rbuy .btn+.btn{margin-left:6px}
.rtable tr:target td{background:rgba(255,209,0,.12)}
.rnone{color:var(--grey);font-style:italic}

/* --- шаги: последовательность, поэтому с номерами --- */
.steps{list-style:none;counter-reset:s;margin:0 0 14px;padding:0;display:grid;gap:12px}
.steps li{counter-increment:s;position:relative;padding-left:48px;color:var(--muted)}
.steps li::before{content:counter(s);position:absolute;left:0;top:-1px;width:34px;height:34px;display:grid;place-items:center;
  font:400 1.05rem/1 var(--display);color:#2a1a00;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff5bf 0,#f4c534 40%,#a87a09 100%);box-shadow:inset 0 0 0 1px rgba(60,35,0,.5)}
.steps b{color:#fff}

/* --- панели с текстом --- */
.cards{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:14px}
.card{padding:14px 16px}
.card p{color:var(--muted);margin:0}

/* --- вопросы --- */
.faq{display:grid;gap:8px}
.faq details{padding:0}
.faq summary{cursor:pointer;list-style:none;display:flex;gap:12px;align-items:baseline;padding:13px 16px;font:400 1.1rem/1.3 var(--display);color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary::before{content:"+";color:var(--gold);font-family:var(--sans);flex:0 0 auto}
.faq details[open] summary::before{content:"\2212"}
.faq summary:hover{color:var(--gold)}
.faq summary i{display:none}
.faq .body,.faq details>div{padding:0 16px 6px 36px;color:var(--muted)}

/* --- чужие площадки: приглушённо, без ссылок --- */
.market{opacity:.88}
.mlist{list-style:none;margin:0 0 12px;padding:0;border:1px solid var(--line-2);border-radius:5px}
.mrow{display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:10px 14px;color:var(--muted)}
.mrow+.mrow{border-top:1px solid var(--line)}
.msite{color:var(--text);font-weight:500}
.mwhat{grid-column:1 / -1;font-size:.92rem}
.mwhat i{font-style:normal;color:var(--dim)}
.mprice{grid-row:1;grid-column:2;text-align:right;white-space:nowrap}
.mprice b{color:var(--text)}
.mper{grid-column:1 / -1;color:var(--dim);font-size:.88rem;font-variant-numeric:tabular-nums}

/* --- 404 --- */
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-block;padding:10px 14px;font-family:var(--display);color:#fff}
.chips a:hover{color:var(--gold);border-color:var(--gold)}

/* --- подвал --- */
.foot{margin-top:24px;padding-block:34px 28px;border-top:1px solid var(--line-2);background:linear-gradient(#0b1020,#06080f)}
.fgrid{display:grid;gap:24px}
.fbrand{font:400 1.3rem/1 var(--caps);color:var(--gold);margin-bottom:10px}
.fabout p{color:var(--dim);font-size:.92rem;max-width:62ch}
.fcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fcols div{display:flex;flex-direction:column;gap:6px}
.fcols b{color:var(--gold);font:400 1rem var(--display);margin-bottom:2px}
.fcols a{color:var(--muted);font-size:.95rem}
.fcols a:hover{color:var(--gold)}
.foot .fine{margin:24px 0 0;padding-top:16px;border-top:1px solid var(--line)}

/* --- телефон: таблицы карточками --- */
@media (max-width:640px){
  .scroller{background:none;border:0;box-shadow:none;overflow:visible}
  table,thead,tbody,tr,td{display:block}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  tr{background:rgba(9,13,28,.94);border:1px solid var(--edge);border-radius:5px;box-shadow:inset 0 0 0 1px var(--edge-in);
    margin-bottom:8px;padding:4px 14px}
  td{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--line);
    padding:9px 0;text-align:right;min-width:0}
  td:last-child{border-bottom:0}
  td::before{content:attr(data-label);font:400 .82rem/1.2 var(--caps);color:var(--gold);text-align:left;flex:0 0 auto}
  tbody tr:hover td{background:none}
  td.tserver{display:block;text-align:left;padding:11px 0 10px}
  td.tserver::before{content:none}
  .rname span{font-size:1.08rem}
  td.tlink{padding-bottom:8px}
  td.tlink .pick{padding:11px 18px}
  /* Строка реалма на телефоне — имя слева, кнопки фракций справа, и
     различающиеся значения под ними мелко. Карточка с подписью у каждой
     ячейки для 267 строк слишком высокая. */
  .rtable tr{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:8px 12px}
  .rtable td{display:block;border:0;padding:0;text-align:left}
  .rtable td::before{content:none}
  .rtable td.rn{grid-column:1}
  .rtable td.rbuy{grid-column:2;grid-row:1}
  .rtable td:not(.rn):not(.rbuy){grid-column:1 / -1;font-size:.9rem;color:var(--muted)}
  .rtable td:not(.rn):not(.rbuy)::before{content:attr(data-label) ": ";font:inherit;color:var(--dim)}
  .rtable td.rn i{display:block;margin:0}
  .rtable .btn--sm{padding:8px 11px}
}

/* --- широкие экраны: только переопределения --- */
@media (min-width:560px){
  .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:720px){
  .wrap{padding-inline:24px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:1.1fr 1.4fr}
  .head{padding-block:40px 12px}
  .head--hero{padding-block:62px 40px}
  .tabs{flex-wrap:wrap;overflow:visible}
  .head__art{left:34%;opacity:.5;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
  .sec{padding-block:40px}
  .srow{grid-template-columns:minmax(150px,1.1fr) 2fr auto auto;align-items:center}
  .ssite,.swhat,.sprice,.sper{grid-column:auto;grid-row:auto}
  .sper{text-align:right;min-width:92px}
  .mrow{grid-template-columns:110px 1fr auto auto;align-items:center}
  .msite,.mwhat,.mprice,.mper{grid-column:auto;grid-row:auto}
  .mper{text-align:right;min-width:92px}
}
/* Меню в строку — только с 900: шесть пунктов, логотип и переключатель
   языка вместе шире окна, на 768 переключатель уезжал за правый край.
   До 900 остаётся бургер. */
@media (min-width:900px){
  .menu{display:flex;position:static;flex-direction:row;gap:0;padding:0;border:0;box-shadow:none;background:none}
  .menu a{padding:9px 9px;font-size:.98rem;white-space:nowrap;border-left:0;border-bottom:2px solid transparent}
  .menu a:hover{background:none}
  .menu a[aria-current]{background:none;border-bottom-color:var(--gold)}
  .burger{display:none}
  .head__grid{grid-template-columns:minmax(0,1fr) 340px;align-items:center;gap:40px}
  .tip{justify-self:end;width:100%}
}
@media (min-width:1024px){
  .vgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Плашка региона — только с 1280: до этого она не помещается рядом с
   меню и переключателем языков, и её убираем первой. */
@media (min-width:1280px){
  .region{display:inline-block}
  .menu a{padding:9px 12px}
}
@media (prefers-reduced-motion:no-preference){
  .vcard,.btn,.pick{transition:box-shadow .16s ease,filter .16s ease,transform .16s ease}
  .vcard:hover{transform:translateY(-3px)}
}