/* Rublex Shop — общие стили всех страниц обменника.
   Шрифты лежат рядом (вытащены из прототипа), Google Fonts не дёргаем. */

/* ---- шрифты ---------------------------------------------------------- */
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("fonts/jetbrainsmono-cyr-400_600.woff2") format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("fonts/jetbrainsmono-cyrext-400_600.woff2") format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("fonts/jetbrainsmono-lat-400_600.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; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("fonts/jetbrainsmono-latext-400_600.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family:'Onest'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("fonts/onest-cyr-400_500_600_700.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-cyrext-400_500_600_700.woff2") format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("fonts/onest-lat-400_500_600_700.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; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("fonts/onest-latext-400_500_600_700.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family:'Unbounded'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("fonts/unbounded-cyr-400_600_700_800.woff2") format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Unbounded'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("fonts/unbounded-cyrext-400_600_700_800.woff2") format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'Unbounded'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("fonts/unbounded-lat-400_600_700_800.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; }
@font-face { font-family:'Unbounded'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("fonts/unbounded-latext-400_600_700_800.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---- переменные ------------------------------------------------------ */
:root{
  --bg:#06070d; --fg:#EAF0FF; --mut:#A8B3CC; --dim:#8A93AD; --faint:#6E7791;
  --blue:#2E8BFF; --blue2:#5FB0FF; --blue3:#9BD0FF;
  --green:#34F5A0; --purple:#A855F7; --purple2:#C99BFF; --amber:#FFB020;
  --line:rgba(255,255,255,.09);
  --panel:linear-gradient(180deg, rgba(20,23,36,.75), rgba(11,13,22,.75));
  --panel-solid:linear-gradient(180deg, rgba(20,23,36,.96), rgba(11,13,22,.96));
  --head:'Unbounded',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:'Onest',system-ui,sans-serif;
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--blue2);text-decoration:none}
a:hover{color:var(--blue3)}
input,button,textarea{font-family:inherit}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}
h1,h2,h3{font-family:var(--head);letter-spacing:-.03em;margin:0}
.mono{font-family:var(--mono)}
.dim{color:var(--dim)} .mut{color:var(--mut)} .faint{color:var(--faint)}
.grn{color:var(--green)} .amb{color:var(--amber)} .pur{color:var(--purple2)} .blu{color:var(--blue2)}
[hidden]{display:none !important}

/* ---- анимации -------------------------------------------------------- */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes livedot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes glowpulse{0%,100%{box-shadow:0 0 0 1px rgba(46,139,255,.35),0 0 42px rgba(46,139,255,.28)}
                     50%{box-shadow:0 0 0 1px rgba(46,139,255,.6),0 0 78px rgba(46,139,255,.45)}}
@keyframes coinspin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
@keyframes driftUp{0%{transform:translate3d(0,26px,0) scale(.97)}100%{transform:translate3d(-18px,-34px,0) scale(1.04)}}
@keyframes driftDown{0%{transform:translate3d(0,-30px,0) scale(1.03)}100%{transform:translate3d(22px,28px,0) scale(.96)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes popin{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ringpulse{0%{box-shadow:0 0 0 0 rgba(46,139,255,.5)}70%{box-shadow:0 0 0 22px rgba(46,139,255,0)}100%{box-shadow:0 0 0 0 rgba(46,139,255,0)}}

/* ---- каркас ---------------------------------------------------------- */
/* Колонка на всю высоту экрана: на коротких страницах (кабинет, статус заказа)
   подвал иначе заканчивался посреди экрана, а под ним оставалась полоса фона. */
.page{position:relative;overflow:hidden;min-height:100vh;display:flex;flex-direction:column}
/* width:100% и здесь: у main тоже max-width + margin:0 auto, а автополя по бокам
   в flex-колонке отменяют растягивание — контент схлопывался до ширины текста
   и уезжал от шапки с подвалом. */
.page > main{flex:1 0 auto;width:100%}
.page > footer{margin-top:auto}
.glow{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 520px at 78% -6%, rgba(46,139,255,.22), transparent 60%),
             radial-gradient(700px 480px at 8% 8%, rgba(168,85,247,.14), transparent 62%),
             radial-gradient(800px 600px at 50% 108%, rgba(52,245,160,.08), transparent 60%)}
.grid-bg{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;mask-image:linear-gradient(#000,transparent 78%)}
.wrap{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 32px}
main{position:relative;z-index:1}

/* ---- шапка: слева логотип, поиск и «Помощь», справа разделы ------------ */
header.top{position:relative;z-index:20;display:flex;align-items:center;gap:18px;
  width:100%;max-width:1200px;margin:0 auto;padding:14px 32px}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo-badge{width:36px;height:36px;border-radius:11px;background:linear-gradient(150deg,#2E8BFF,#7C5CFF);
  display:grid;place-items:center;font-family:var(--head);font-weight:800;font-size:14px;color:#fff;
  box-shadow:0 0 22px rgba(46,139,255,.5)}
.logo-txt{font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:-.02em;white-space:nowrap}

/* поиск */
/* Тянется на всю свободную ширину до «Помощи»: потолок по ширине оставлял
   у гостя пустую полосу через полшапки. */
.search{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0}
.search input{width:100%;padding:10px 14px 10px 40px;border-radius:11px;font-size:14px;outline:none;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--fg)}
.search input::placeholder{color:var(--faint)}
.search input:focus{border-color:rgba(46,139,255,.5);background:rgba(255,255,255,.06)}
.search input::-webkit-search-cancel-button{filter:invert(.6)}
.search-go{position:absolute;left:4px;top:50%;transform:translateY(-50%);border:0;background:none;
  color:var(--dim);cursor:pointer;padding:7px;display:grid;place-items:center;border-radius:9px}
.search-go:hover{color:var(--fg)}

/* выпадающие списки */
.drop{position:relative;flex:none}
.drop-btn,.ava-btn{display:flex;align-items:center;gap:7px;padding:9px 11px;border:0;border-radius:11px;
  background:none;color:var(--dim);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap}
.drop-btn:hover,.ava-btn:hover,.drop.open .drop-btn,.drop.open .ava-btn{color:var(--fg);background:rgba(255,255,255,.05)}
.ava-btn{padding:7px 9px;border:1px solid rgba(255,255,255,.12)}
.drop-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:220px;z-index:40;
  display:flex;flex-direction:column;padding:7px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);background:#141726;
  box-shadow:0 20px 50px rgba(0,0,0,.55);animation:popin .14s ease-out}
.drop-menu.right{left:auto;right:0}
.drop-menu a,.drop-menu span,.drop-menu button{padding:10px 12px;border:0;border-radius:9px;background:none;
  text-align:left;font-size:14px;color:#C8D4EE;cursor:pointer;font-family:inherit;text-decoration:none}
.drop-menu a:hover,.drop-menu span:hover,.drop-menu button:hover{background:rgba(255,255,255,.06);color:var(--fg)}
.drop-mail{font-size:12.5px !important;color:var(--faint) !important;cursor:default !important;
  border-bottom:1px solid rgba(255,255,255,.08);border-radius:0 !important;margin-bottom:4px;
  overflow:hidden;text-overflow:ellipsis}
.drop-mail:hover{background:none !important}

/* правое меню */
.unav{display:flex;align-items:center;gap:2px}
.unav-auth{display:flex;align-items:center;gap:2px}
.mob-auth{display:flex;flex-direction:column}
.mob-login{color:#9BD0FF !important;font-weight:600}
.unav-item{display:flex;align-items:center;gap:7px;padding:9px 11px;border-radius:11px;
  font-size:14px;color:var(--dim);white-space:nowrap}
.unav-item:hover{color:var(--fg);background:rgba(255,255,255,.05)}
.unav-item.on{color:var(--fg)}
.unav-item .ico{opacity:.85}
.bal-badge{margin-left:2px;padding:3px 8px;border-radius:7px;font-family:var(--mono);font-size:12px;
  font-weight:600;color:#34F5A0;background:rgba(52,245,160,.12);border:1px solid rgba(52,245,160,.3)}
.btn-cab{padding:9px 16px;border-radius:11px;background:var(--blue);color:#fff;font-weight:600;
  font-size:14px;white-space:nowrap;box-shadow:0 8px 24px rgba(46,139,255,.32)}
.btn-cab:hover{background:#4A9DFF;color:#fff}

/* бургер и мобильное меню */
.burger{display:none;flex-direction:column;gap:4px;padding:10px 9px;border-radius:10px;
  border:1px solid rgba(255,255,255,.12);background:none;cursor:pointer}
.burger span{display:block;width:16px;height:2px;background:#C8D4EE;border-radius:2px}
.mob-menu{display:none;position:relative;z-index:19;flex-direction:column;padding:6px 12px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.mob-menu a{padding:13px 10px;font-size:15px;color:#C8D4EE;border-radius:10px}
.mob-menu a:hover{background:rgba(255,255,255,.05)}

/* панели */
.card{padding:26px;border-radius:20px;border:1px solid var(--line);background:var(--panel)}
.card-solid{border-radius:22px;border:1px solid rgba(46,139,255,.3);background:var(--panel-solid);
  box-shadow:0 0 60px rgba(46,139,255,.16);padding:26px}
.soft{border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:18px;padding:20px}

/* кнопки */
.btn{display:block;width:100%;padding:19px;border:0;border-radius:16px;text-align:center;
  font-family:var(--head);font-weight:700;font-size:16.5px;color:#fff;cursor:pointer;
  background:linear-gradient(100deg,#2E8BFF,#7C5CFF);box-shadow:0 14px 40px rgba(46,139,255,.42)}
.btn:hover{filter:brightness(1.12)}
.btn[disabled],.btn.off{background:rgba(255,255,255,.05);border:1px solid var(--line);
  color:#5A6480;box-shadow:none;cursor:not-allowed;filter:none}
.btn-ghost{display:inline-block;padding:13px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:transparent;color:#C8D4EE;font-weight:600;font-size:14.5px;cursor:pointer}
.btn-ghost:hover{border-color:rgba(255,255,255,.3);color:var(--fg)}
.btn-blue{padding:15px 24px;border-radius:13px;border:1px solid rgba(46,139,255,.45);
  background:rgba(46,139,255,.12);color:var(--blue3);font-weight:600;font-size:15px;cursor:pointer}
.btn-blue:hover{background:rgba(46,139,255,.22)}
.link{color:var(--blue2);cursor:pointer;background:none;border:0;padding:0;font-size:inherit}
.link:hover{color:var(--blue3)}
.back{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--dim);
  cursor:pointer;margin-bottom:24px;background:none;border:0}
.back:hover{color:var(--fg)}

/* поля */
.inp{width:100%;padding:15px 17px;border-radius:13px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);color:var(--fg);font-size:15.5px;outline:none}
.inp:focus{border-color:rgba(46,139,255,.55)}
.step-n{width:30px;height:30px;flex:none;border-radius:9px;background:rgba(46,139,255,.16);
  border:1px solid rgba(46,139,255,.4);display:grid;place-items:center;font-family:var(--head);
  font-weight:700;font-size:13px;color:var(--blue2)}

/* уведомления */
.note{padding:13px 15px;border-radius:13px;font-size:12.5px;line-height:1.5}
.note-ok{border:1px solid rgba(52,245,160,.3);background:rgba(52,245,160,.07);color:#9FE9C6}
.note-warn{border:1px solid rgba(255,176,32,.28);background:rgba(255,176,32,.07);color:#FFD79A}
.note-bad{border:1px solid rgba(255,90,90,.32);background:rgba(255,90,90,.08);color:#FFB3B3}

/* спиннер */
.spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(46,139,255,.2);
  border-top-color:var(--blue);animation:spin .8s linear infinite;display:inline-block;vertical-align:-3px}

/* модалка */
.modal{position:fixed;inset:0;z-index:200;display:flex;justify-content:center;align-items:center;
  padding:28px;background:rgba(4,5,10,.74);backdrop-filter:blur(9px)}
.modal-box{position:relative;width:520px;max-width:100%;max-height:86vh;overflow:auto;border-radius:22px;
  border:1px solid rgba(168,85,247,.3);background:linear-gradient(180deg,#141726,#0B0D16);
  box-shadow:0 40px 120px rgba(0,0,0,.6);animation:popin .22s ease-out}
.modal-head{display:flex;align-items:center;gap:12px;padding:22px 24px;border-bottom:1px solid rgba(255,255,255,.07)}
.x-btn{width:32px;height:32px;flex:none;border-radius:10px;border:1px solid rgba(255,255,255,.12);
  background:none;display:grid;place-items:center;font-size:15px;color:var(--dim);cursor:pointer}
.x-btn:hover{color:var(--fg);border-color:rgba(255,255,255,.3)}

/* ---- витрина: вкладки направлений, панель и карточки ------------------ */
/* Лежит здесь, а не в стилях страницы: одну и ту же карточку рисует каталог,
   направление и блок «похожее» на странице товара. */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{display:flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;border-radius:12px;font-size:14px;
  color:var(--mut);border:1px solid var(--line);background:rgba(255,255,255,.03);white-space:nowrap}
.chip:hover{color:var(--fg);border-color:rgba(255,255,255,.24)}
.chip img{width:22px;height:auto;flex:none}
.chip.on{color:var(--fg);border-color:rgba(var(--rgb,46,139,255),.55);
  background:rgba(var(--rgb,46,139,255),.12)}
.chip em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.chip.on em{color:var(--fg);opacity:.7}

.bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.bar form{position:relative;display:flex;align-items:center;flex:1 1 260px;min-width:0}
.bar input{width:100%;padding:12px 14px 12px 40px;border-radius:12px;font-size:14.5px;outline:none;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--fg)}
.bar input:focus{border-color:rgba(46,139,255,.5)}
.bar .search-go{left:5px}
.sorts{display:flex;gap:6px;flex-wrap:wrap}
.sorts a{padding:10px 13px;border-radius:11px;font-size:13.5px;color:var(--dim);
  border:1px solid transparent;background:rgba(255,255,255,.03)}
.sorts a:hover{color:var(--fg)}
.sorts a.on{color:var(--fg);border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.07)}

.sort-sel{display:none}

/* ПЛИТКИ РАЗДЕЛОВ. Первое, что видно в каталоге: человек сначала выбирает, за
   чем пришёл, и только потом смотрит позиции. Стена из пятидесяти карточек на
   входе не отвечает на вопрос «а что тут вообще есть». */
.secgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;
  margin-bottom:34px}
.sec{position:relative;display:flex;align-items:center;gap:14px;min-height:112px;padding:18px 20px;
  border-radius:20px;overflow:hidden;color:inherit;border:1px solid rgba(var(--rgb),.26);
  background:linear-gradient(120deg, rgba(var(--rgb),.16), rgba(13,15,24,.92) 62%);transition:.16s}
.sec:hover{color:inherit;transform:translateY(-3px);border-color:rgba(var(--rgb),.55);
  box-shadow:0 18px 46px rgba(0,0,0,.45)}
.sec-art{position:absolute;right:6px;bottom:4px;height:100px;width:auto;z-index:0;opacity:.95;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.5))}
.sec:hover .sec-art{transform:translateY(-4px) scale(1.04);transition:.2s}
.sec-hex{width:40px;height:auto;flex:none;z-index:1;filter:drop-shadow(0 0 12px rgba(var(--rgb),.6))}
/* Ширину текста режем под картинку: у самой широкой из них (repeat) основание
   84px, плюс отступ — иначе описание заезжает на иллюстрацию. */
.sec-t{position:relative;z-index:1;min-width:0;max-width:calc(100% - 132px)}
.sec-t b{display:block;font-family:var(--head);font-weight:700;font-size:17px;margin-bottom:5px}
.sec-t span{display:block;font-size:12.5px;line-height:1.45;color:var(--dim);margin-bottom:9px}
.sec-t em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--c)}

.blk-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.blk-h h2{font-family:var(--head);font-weight:700;font-size:22px;margin:0}
.blk-h span{font-size:13px;color:var(--faint)}
.wide-only{display:inline}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:14px}
.pc{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;color:inherit;
  border:1px solid var(--line);background:var(--panel);transition:.16s}
.pc:hover{color:inherit;transform:translateY(-3px);border-color:rgba(var(--rgb),.5);
  box-shadow:0 18px 46px rgba(0,0,0,.45),0 0 0 1px rgba(var(--rgb),.14)}

/* ОБЛОЖКА. Витрина без картинок читается как список форм — товар узнают глазами. */
.pc-cover{position:relative;display:block;height:126px;flex:none;overflow:hidden;
  background:linear-gradient(140deg, rgba(var(--rgb),.34), rgba(var(--rgb),.05) 64%), #0b0d16}
.pc-cover::after{content:'';position:absolute;inset:0;
  background:radial-gradient(130px 96px at 76% 62%, rgba(var(--rgb),.40), transparent 72%)}
/* Картинка целиком внутри обложки: подрезанный низ читается как ошибка вёрстки,
   а не как приём. */
.pc-art{position:absolute;right:8px;bottom:4px;height:112px;width:auto;z-index:1;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.55))}
.pc:hover .pc-art{transform:translateY(-3px) scale(1.03);transition:.2s}
.pc-hex{position:absolute;left:14px;top:13px;width:32px;height:auto;z-index:2;
  filter:drop-shadow(0 0 10px rgba(var(--rgb),.6))}
.pc-badge{position:absolute;right:12px;top:12px;z-index:2;padding:4px 9px;border-radius:8px;
  font-size:11px;font-weight:600;letter-spacing:.02em;backdrop-filter:blur(6px)}
.b-hit{color:#FFD79A;background:rgba(255,176,32,.2);border:1px solid rgba(255,176,32,.45)}
.b-new{color:#9BD0FF;background:rgba(46,139,255,.2);border:1px solid rgba(46,139,255,.45)}
.b-sale{color:#9FE9C6;background:rgba(52,245,160,.18);border:1px solid rgba(52,245,160,.45)}
.pc-fast{position:absolute;left:12px;bottom:11px;z-index:2;padding:4px 9px;border-radius:8px;
  font-size:11px;color:#C8D4EE;background:rgba(6,7,13,.6);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px);white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;
  text-overflow:ellipsis}

.pc-body{display:flex;flex-direction:column;flex:1;padding:14px 16px 15px}
.pc-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--head);font-weight:600;font-size:15px;line-height:1.35;margin-bottom:6px}
.pc-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:12.5px;line-height:1.45;color:var(--dim);margin-bottom:13px}
.pc-bottom{display:flex;align-items:center;gap:10px;margin-top:auto}
.pc-price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;min-width:0}
.pc-price b{font-family:var(--head);font-weight:800;font-size:19px;white-space:nowrap}
.pc-price s{font-size:12px;color:var(--faint)}
.pc-buy{margin-left:auto;padding:8px 14px;border-radius:11px;font-size:13px;font-weight:600;
  white-space:nowrap;color:var(--blue3);border:1px solid rgba(46,139,255,.4);background:rgba(46,139,255,.12)}
.pc:hover .pc-buy{background:rgba(46,139,255,.26);color:#fff}
.pc-seller{display:flex;align-items:center;gap:7px;margin-top:12px;padding-top:11px;
  border-top:1px solid rgba(255,255,255,.07);font-size:11px;color:var(--faint);min-width:0}
.pc-slr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-rate{color:#FFD79A;flex:none}
.pc-deals{flex:none;margin-left:auto}

@media (max-width:900px){
  /* Две колонки, а не одна: в один столбец карточки превращались в ленту
     бланков, и на экран помещалось полторы позиции. */
  .pgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .pc{border-radius:16px}
  .pc-cover{height:96px}
  .pc-art{height:84px;right:6px;bottom:4px}
  .pc-hex{width:24px;left:10px;top:9px}
  .pc-badge{right:8px;top:8px;padding:3px 7px;font-size:10px}
  .pc-fast{left:8px;bottom:8px;padding:3px 7px;font-size:10px}
  .pc-body{padding:11px 12px 12px}
  .pc-name{font-size:13.5px;margin-bottom:4px}
  .pc-sub{font-size:11.5px;-webkit-line-clamp:2;margin-bottom:10px}
  .pc-bottom{flex-wrap:wrap;gap:6px}
  .pc-price b{font-size:17px}
  .pc-buy{width:100%;margin:2px 0 0;text-align:center;padding:9px}
  .pc-seller{margin-top:10px;padding-top:9px;font-size:10.5px}
  .pc-deals{display:none}

  .secgrid{grid-template-columns:1fr;gap:10px;margin-bottom:26px}
  .sec{min-height:92px;padding:14px 16px;gap:12px;border-radius:16px}
  .sec-art{height:78px;right:6px;bottom:4px}
  .sec-hex{width:30px}
  .sec-t{max-width:calc(100% - 104px)}
  .sec-t b{font-size:15.5px}
  .sec-t span{font-size:11.5px;margin-bottom:7px}
  .blk-h{gap:8px;margin-bottom:10px}
  .blk-h h2{font-size:19px}
  .blk-h span{font-size:12px}
  .wide-only{display:none}

  .chips{gap:6px;margin:0 -18px 12px;padding:0 18px 4px;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{padding:7px 11px 7px 8px;font-size:13px}
  .chip img{width:18px}
  /* Кнопки сортировки в две строки выглядели поломанной формой — на узком
     экране это один компактный список рядом с поиском. */
  .sorts{display:none}
  .sort-sel{display:block;flex:none;width:auto;padding:12px 12px;border-radius:12px;font-size:13.5px;
    border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--fg);
    appearance:none;max-width:46%}
  .bar{gap:8px;flex-wrap:nowrap}
  .bar form{flex:1 1 auto}
  .bar input{padding:11px 10px 11px 36px;font-size:13.5px}
}

/* подвал */
footer{position:relative;z-index:1;margin-top:56px;border-top:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.015)}
/* Колонок стало пять (добавились направления каталога) — первая шире остальных,
   зазор меньше, иначе последняя не помещается и уезжает под предыдущую. */
.foot-grid{max-width:1200px;margin:0 auto;padding:48px 32px 36px;display:grid;
  grid-template-columns:1.5fr repeat(4,1fr);gap:28px}
.foot-col{display:flex;flex-direction:column;gap:11px;font-size:14px;color:var(--dim)}
.foot-col b{color:var(--fg);font-weight:600;margin-bottom:5px}
.foot-col span{cursor:pointer} .foot-col span:hover,.foot-col a:hover{color:var(--fg)}
.foot-col a{color:var(--dim)}
.foot-legal{max-width:1200px;margin:0 auto;padding:22px 32px 40px;border-top:1px solid rgba(255,255,255,.07);
  font-size:12.5px;line-height:1.7;color:var(--faint)}

/* мобильная адаптация */
@media (max-width:900px){
  .wrap{padding:0 18px}
  header.top{gap:10px;padding:12px 18px}
  .logo-badge{width:32px;height:32px;font-size:12px}
  .logo-txt{display:none}           /* на узком экране хватает значка */
  .search{max-width:none}
  .search input{padding:9px 12px 9px 38px;font-size:14px}
  #help-drop{display:none}
  .unav{display:none}
  .burger{display:flex;margin-left:auto}
  .mob-menu.open{display:flex}
  .drop-menu{min-width:200px}
  h1{font-size:30px !important} h2{font-size:24px !important}
  .card,.card-solid{padding:18px;border-radius:18px}
  .btn{padding:17px;font-size:16px;border-radius:14px}
  .modal{padding:14px;align-items:flex-end}
  .modal-box{width:100%;max-height:88vh;border-radius:22px}
  .foot-grid{grid-template-columns:1fr;gap:26px;padding:28px 18px}
  .foot-legal{padding:18px}
}