/* Сайт серверов Rust (rust.rockbanner.ru): тёмный, тонкие линии, Bahnschrift, один золотой акцент, как у остальных сайтов студии */
body.rs { background: #07080a; }
#bgfx { position: fixed; inset: 0; z-index: -2; background: radial-gradient(1400px 700px at 18% -10%, rgba(255, 59, 20, .09), transparent 60%), radial-gradient(1200px 800px at 100% 0%, rgba(255, 210, 31, .05), transparent 55%), #07080a; }
.rh { position: fixed; inset: 0 0 auto 0; z-index: 30; height: 72px; background: rgba(7, 8, 10, .92); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.rhin { max-width: 1500px; height: 100%; margin: 0 auto; padding: 0 var(--pad); display: flex; align-items: center; gap: 24px; }
.rb { display: flex; align-items: center; gap: 12px; } .rb img { height: 42px; } .rb span { font-size: 20px; font-weight: 700; letter-spacing: 4px; line-height: 1; } .rb small { display: block; font-size: 11px; letter-spacing: 7px; color: var(--acc); margin-top: 4px; font-weight: 400; }
#rnav { display: flex; gap: 6px; margin-right: auto; } #rnav a { white-space: nowrap; padding: 8px 12px; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); position: relative; } #rnav a:hover, #rnav a.on { color: var(--tx); } #rnav a.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -14px; height: 2px; background: var(--acc); }
.rtools { display: flex; align-items: center; gap: 16px; } .rtools .soc { display: flex; gap: 8px; } .rtools .soc a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--dim); font-size: 12px; letter-spacing: 1px; } .rtools .soc a:hover { color: var(--tx); border-color: var(--tx); }
.rtools .usr { display: flex; align-items: center; gap: 10px; font-size: 15px; } .rtools .usr img { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); }
#rmain { padding: 96px 0 90px; min-height: 100vh; }
.rwrap { max-width: 1500px; margin: 0 auto; padding: 0 var(--pad); }
.hero { position: relative; border: 1px solid var(--line); padding: clamp(28px, 4vw, 56px); margin-bottom: 26px; overflow: hidden; background: linear-gradient(90deg, rgba(255, 255, 255, .035), transparent 70%); }
.hero h1 { font-size: clamp(34px, 5vw, 72px); line-height: .98; letter-spacing: 2px; text-transform: uppercase; max-width: 820px; } .hero h1 em { font-style: normal; color: var(--acc); }
.hero p { max-width: 560px; color: var(--dim); margin: 16px 0 26px; font-size: 19px; } .hero .acts { display: flex; gap: 12px; flex-wrap: wrap; position: relative; }
.hero img { position: absolute; right: clamp(10px, 4vw, 70px); bottom: -30px; height: 118%; opacity: .92; pointer-events: none; filter: drop-shadow(0 0 40px rgba(0, 0, 0, .6)); }
.stabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-bottom: 18px; }
.stab { padding: 14px 10px; text-align: center; font-size: 15px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); cursor: pointer; color: var(--dim); transition: border-color .2s, color .2s, background .2s; }
.stab small { display: block; font-size: 11px; letter-spacing: 4px; color: var(--faint); margin-top: 3px; font-weight: 400; } .stab:hover { border-color: var(--faint); color: var(--tx); } .stab.on { border-color: var(--acc); color: var(--tx); background: rgba(255, 210, 31, .06); }
.rgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; align-items: start; }
.search { width: 100%; padding: 14px 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); font-size: 16px; outline: none; } .search:focus { border-color: var(--tx); } .search::placeholder { color: var(--faint); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 22px; } .chip { padding: 7px 13px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; border: 1px solid transparent; color: var(--dim); cursor: pointer; background: none; } .chip:hover { color: var(--tx); } .chip.on { border-color: var(--line); color: var(--tx); background: rgba(255, 255, 255, .05); }
.sh { display: flex; align-items: baseline; gap: 14px; margin: 6px 0 16px; } .sh h2 { font-size: 22px; letter-spacing: 3px; text-transform: uppercase; } .sh span { color: var(--faint); font-size: 13px; letter-spacing: 3px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.card { position: relative; aspect-ratio: 1 / 1.08; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; transition: border-color .2s, transform .2s; }
.card:hover { border-color: var(--faint); transform: translateY(-3px); }
.card .gl { position: absolute; inset: 0; display: grid; place-items: center; font-size: 96px; font-weight: 700; letter-spacing: -2px; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .14); }
.card b { position: relative; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; } .card span { position: relative; font-size: 13px; letter-spacing: 3px; color: var(--faint); text-transform: uppercase; margin-top: 4px; } .card .pr { color: var(--acc); font-size: 20px; letter-spacing: 1px; font-weight: 700; }
.panel { border: 1px solid var(--line); background: rgba(255, 255, 255, .025); padding: 18px; margin-bottom: 14px; } .panel h3 { font-size: 14px; letter-spacing: 5px; text-transform: uppercase; color: var(--dim); font-weight: 400; margin-bottom: 14px; display: flex; justify-content: space-between; } .panel h3 i { font-style: normal; color: var(--acc); letter-spacing: 2px; }
.srv { padding: 10px 0; border-top: 1px solid var(--line2); } .srv:first-of-type { border-top: 0; } .srv .t { display: flex; justify-content: space-between; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; } .srv .t em { font-style: normal; color: var(--dim); }
.bar { height: 3px; background: var(--line); margin-top: 8px; } .bar i { display: block; height: 100%; background: var(--acc); }
.dotl { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); margin-right: 8px; } .dotl.on { background: var(--grn); }
.panel p { color: var(--dim); font-size: 15px; } .panel .btn { margin-top: 12px; width: 100%; height: 44px; font-size: 15px; letter-spacing: 3px; }
.scard { border: 1px solid var(--line); padding: 28px; margin-bottom: 14px; background: rgba(255, 255, 255, .025); display: grid; grid-template-columns: 1fr 1fr; gap: 18px 44px; }
.scard h2 { font-size: clamp(30px, 3.4vw, 48px); letter-spacing: 3px; } .scard .tg { color: var(--acc); font-size: 13px; letter-spacing: 5px; text-transform: uppercase; } .scard p { color: var(--dim); margin-top: 8px; } .scard ul { list-style: none; } .scard li { padding: 9px 0; border-top: 1px solid var(--line2); color: var(--dim); } .scard li::before { content: "— "; color: var(--acc); }
.rules > div { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); } .rules > div:last-child { border-bottom: 1px solid var(--line); } .rules i { font-style: normal; color: var(--acc); letter-spacing: 3px; } .rules b { font-size: 20px; letter-spacing: 2px; text-transform: uppercase; display: block; } .rules span { color: var(--dim); }
.empty { padding: 44px 0; color: var(--dim); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rfoot { max-width: 1500px; margin: 60px auto 0; padding: 26px var(--pad) 0; border-top: 1px solid var(--line2); display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; letter-spacing: 2px; color: var(--faint); } .rfoot a:hover { color: var(--tx); } .rfoot .g { flex: 1; }
@media (max-width: 1100px) { .rgrid { grid-template-columns: 1fr; } .scard { grid-template-columns: 1fr; } .hero img { opacity: .25; } #rnav a { padding: 8px 8px; font-size: 12px; letter-spacing: 2px; } }
@media (max-width: 860px) { #rnav { position: fixed; inset: 72px 0 auto 0; flex-direction: column; background: rgba(7, 8, 10, .98); padding: 8px var(--pad) 18px; border-bottom: 1px solid var(--line); display: none; gap: 0; } #rnav.open { display: flex; } #rnav a { padding: 15px 0; font-size: 16px; border-bottom: 1px solid var(--line2); } #rnav a.on::after { display: none; } .rtools .soc { display: none; } .rb span small { display: none; } .stabs { grid-auto-flow: row; } .burger { display: block; margin-left: auto; cursor: pointer; font-size: 28px; padding: 6px; } }

/* ----- личный кабинет ----- */
.cab { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 26px; align-items: start; max-width: 1180px; margin: 0 auto; }
.cabside { border: 1px solid var(--line); background: rgba(255, 255, 255, .025); padding: 24px 18px 18px; }
.who2 { text-align: center; padding-bottom: 18px; } .who2 .av { width: 92px; height: 92px; margin: 0 auto 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); overflow: hidden; } .who2 .av img { width: 100%; height: 100%; object-fit: cover; }
.who2 b { display: block; font-size: 20px; letter-spacing: 1px; text-transform: uppercase; word-break: break-word; } .who2 small { display: block; margin-top: 6px; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; }
.who2 .sid { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; font-size: 13px; letter-spacing: 1px; color: var(--faint); } .who2 .sid button { background: none; border: 1px solid var(--line); color: var(--dim); width: 26px; height: 26px; cursor: pointer; } .who2 .sid button:hover { color: var(--tx); border-color: var(--tx); }
.menu { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--line2); } .mi { display: block; padding: 13px 16px; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); background: rgba(255, 255, 255, .03); border-left: 2px solid transparent; transition: background .2s, color .2s; } .mi:hover { color: var(--tx); background: rgba(255, 255, 255, .07); } .mi.on { color: var(--tx); border-left-color: var(--acc); background: rgba(255, 210, 31, .08); }
.out { display: block; text-align: center; margin-top: 18px; font-size: 13px; letter-spacing: 3px; color: var(--faint); text-transform: uppercase; } .out:hover { color: var(--tx); }
.cabmain { min-width: 0; } .ct { font-size: 28px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 20px; }
.bal { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; } .balc { border: 1px solid var(--line); background: rgba(255, 255, 255, .03); padding: 20px 22px; } .balc .v { font-size: 34px; font-weight: 700; letter-spacing: 1px; } .balc .s { color: var(--acc); font-size: 15px; margin-top: 2px; } .balc .t { color: var(--dim); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; margin-top: 8px; }
.hintc { color: var(--dim); font-size: 15px; margin: 14px 0; } .box2 { border: 1px solid var(--line); background: rgba(255, 255, 255, .02); padding: 20px; margin-top: 24px; } .box2 h3 { font-size: 20px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 14px; }
.filt { display: flex; gap: 8px; flex-wrap: wrap; } .filt span { padding: 10px 16px; border: 1px solid var(--line); color: var(--faint); font-size: 14px; letter-spacing: 1px; } .filt .grow { flex: 1; min-width: 200px; } .nod { text-align: center; padding: 48px 0 24px; color: var(--faint); letter-spacing: 3px; text-transform: uppercase; font-size: 14px; }
.warnc { border-left: 3px solid var(--acc); background: rgba(255, 210, 31, .07); padding: 14px 18px; color: var(--tx); margin-top: 8px; }
.rowc { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); } .rowc:last-of-type { border-bottom: 1px solid var(--line); } .rowc b { display: block; font-size: 19px; letter-spacing: 2px; text-transform: uppercase; } .rowc span { color: var(--dim); font-size: 15px; } .rowc em { font-style: normal; color: var(--faint); letter-spacing: 3px; text-transform: uppercase; font-size: 13px; }
@media (max-width: 860px) { .cab { grid-template-columns: 1fr; } .menu { flex-direction: row; flex-wrap: wrap; } .bal { grid-template-columns: 1fr; } }
/* магазин: карточки товаров, окно товара, корзина, инвентарь */
.wchip { display: flex; align-items: stretch; border: 1px solid var(--line); height: 34px; } .wchip a { display: grid; place-items: center; padding: 0 12px; font-size: 14px; letter-spacing: 1px; color: var(--tx); } .wchip button { width: 34px; border: 0; border-left: 1px solid var(--line); background: var(--acc); color: #000; font-size: 20px; cursor: pointer; }
.cartb { position: relative; width: 36px; height: 34px; border: 1px solid var(--line); background: none; color: var(--dim); cursor: pointer; padding: 6px; } .cartb:hover { color: var(--tx); } .cartb svg { width: 100%; height: 100%; } .cartb i { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--acc); color: #000; font: 700 11px/18px inherit; font-style: normal; text-align: center; padding: 0 4px; }
.pcs { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); } .pc { cursor: pointer; position: relative; text-align: center; display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; } .pc:hover { border-color: var(--acc); }
.pc b { font-size: 14px; font-weight: 600; line-height: 1.25; min-height: 35px; } .pc b small { color: var(--dim); font-weight: 400; } .pc .pr { color: var(--acc); font-size: 17px; letter-spacing: 1px; } .pc .pr s { color: var(--dim); font-size: 12px; margin-left: 4px; }
.pic { height: 96px; display: grid; place-items: center; } .pic img { max-width: 88px; max-height: 88px; object-fit: contain; }
.pic.art { background: linear-gradient(135deg, #1b1d22, #101216); border: 1px solid var(--line); position: relative; flex-direction: column; color: #9aa3b2; } .pic.art .gsv { width: 52px; height: 52px; } .pic.art b { position: absolute; bottom: 6px; font-size: 12px; letter-spacing: 3px; min-height: 0; }
.pic.art.gold { background: linear-gradient(135deg, #4a3a10, #14110a); color: #ffd21f; } .pic.art.red { background: linear-gradient(135deg, #4a1810, #140a09); color: #ff5a3c; } .pic.art.violet { background: linear-gradient(135deg, #3a1e5a, #0f0a16); color: #b98cff; } .pic.art.blue { background: linear-gradient(135deg, #10304a, #0a0f14); color: #5cb8ff; }
.dsc, .hot { position: absolute; top: 8px; left: 8px; font-style: normal; font-size: 11px; letter-spacing: 1px; padding: 2px 6px; background: #ff3b14; color: #fff; z-index: 1; } .hot { left: auto; right: 8px; background: var(--acc); color: #000; }
body.lock { overflow: hidden; }
.mback { position: fixed; inset: 0; background: rgba(0, 0, 0, .72); z-index: 60; }
.mbox { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, 94vw); max-height: 92vh; overflow: auto; background: #0d0f12; border: 1px solid var(--line); padding: 28px; } .mbox.sm { width: min(460px, 94vw); }
.mx { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--dim); font-size: 26px; cursor: pointer; } .mx:hover { color: var(--tx); }
.mgrid { display: grid; grid-template-columns: 220px 1fr; gap: 24px; } .mleft .pic { height: 200px; } .mleft .pic img { max-width: 180px; max-height: 180px; } .mright h3, .mbox > h3 { font-size: 24px; letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase; }
.mdesc { color: var(--dim); font-size: 14px; line-height: 1.55; margin-bottom: 12px; } .perks { padding-left: 18px; font-size: 14px; line-height: 1.7; } .cont { display: grid; gap: 4px; max-height: 220px; overflow: auto; } .cont div { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 3px 0; border-bottom: 1px solid var(--line); } .cont img { width: 26px; height: 26px; object-fit: contain; } .cont span { flex: 1; } .cont b { color: var(--acc); }
.mfoot { margin-top: 22px; display: grid; gap: 12px; } .mf { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 12px; font-size: 14px; color: var(--dim); }
.mf select, .mf input { width: 100%; background: #090a0c; color: var(--tx); border: 1px solid var(--line); padding: 10px 12px; font: inherit; } .mf select:focus, .mf input:focus { outline: 0; border-color: var(--acc); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); width: fit-content; } .qty button { width: 34px; height: 34px; background: none; border: 0; color: var(--tx); font-size: 18px; cursor: pointer; } .qty b { min-width: 34px; text-align: center; color: var(--tx); }
.mtot { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 14px; font-size: 14px; color: var(--dim); } .mtot b { font-size: 26px; color: var(--acc); letter-spacing: 1px; }
.mbtn { display: flex; gap: 10px; flex-wrap: wrap; } .mbtn .btn { flex: 1; text-align: center; justify-content: center; } .mmsg:empty { display: none; } .mnote { font-size: 12px; color: var(--dim); }
.cdr { position: fixed; z-index: 61; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: #0d0f12; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.ch { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); font-size: 18px; letter-spacing: 3px; text-transform: uppercase; } .ch .mx { position: static; }
.cl { flex: 1; overflow: auto; padding: 8px 22px; } .cr { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); } .cr .pic { height: 64px; } .cr .pic img { max-width: 56px; max-height: 56px; } .cr .pic.art .gsv { width: 30px; height: 30px; } .cr .pic.art b { display: none; }
.cr b { font-size: 14px; } .cr small { display: block; color: var(--dim); font-size: 12px; margin: 3px 0 8px; } .qty.sm { display: flex; align-items: center; gap: 8px; border: 0; width: auto; } .qty.sm button { width: 28px; height: 28px; border: 1px solid var(--line); font-size: 15px; } .qty.sm span { margin-left: auto; color: var(--acc); } .qty.sm .rm { border: 0; color: var(--dim); }
.cf { padding: 18px 22px; border-top: 1px solid var(--line); display: grid; gap: 12px; } .cbal { font-size: 13px; color: var(--dim); } .cbal a { color: var(--acc); }
.inv { display: grid; gap: 10px; } .ir { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; border: 1px solid var(--line); padding: 12px 14px; } .ipic { width: 56px; height: 56px; display: grid; place-items: center; color: #9aa3b2; } .ipic img { max-width: 50px; max-height: 50px; } .ipic .gsv { width: 34px; height: 34px; }
.ibody b { display: block; font-size: 15px; } .ibody small { display: block; color: var(--dim); font-size: 12px; margin-top: 3px; } .ibody .warn { color: #ffb347; } .stt { display: inline-block; margin-top: 6px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--line); } .stt.ok { color: #6fcf7f; border-color: #2c5a35; } .stt.wait { color: var(--acc); border-color: #5a4a10; }
.iact { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .note { padding: 10px 14px; border: 1px solid #5a2418; color: #ff9a85; margin: 10px 0; font-size: 14px; } .note.ok { border-color: #2c5a35; color: #6fcf7f; }
@media (max-width: 720px) { .mgrid { grid-template-columns: 1fr; } .mleft .pic { height: 120px; } .mf { grid-template-columns: 1fr; gap: 4px; } .ir { grid-template-columns: 44px 1fr; } .iact { grid-column: 1 / -1; justify-content: flex-start; } .rtools .soc { display: none; } }

.pic.art .artimg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; background: #12141a; z-index: 1; } .mleft .pic.art { height: 200px; }

/* ---- v2: шапка, переключатель сервера, структура магазина ---- */
.rtools { gap: 12px; }
.hwal { display: flex; align-items: stretch; height: 40px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.hbal { display: flex; flex-direction: column; justify-content: center; padding: 0 14px; line-height: 1.1; } .hbal small { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--faint); } .hbal b { font-size: 16px; letter-spacing: 1px; color: var(--acc); font-weight: 700; }
.hplus { border: 0; border-left: 1px solid var(--line); background: var(--acc); color: #000; padding: 0 14px; font: 700 12px inherit; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; } .hplus:hover { filter: brightness(1.1); }
.hbtn { position: relative; width: 40px; height: 40px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--dim); cursor: pointer; padding: 9px; } .hbtn:hover { color: var(--tx); border-color: var(--faint); } .hbtn svg { width: 100%; height: 100%; }
.hbtn i { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; border-radius: 9px; background: #ff3b14; color: #fff; font-size: 11px; line-height: 18px; font-style: normal; text-align: center; padding: 0 4px; }
.hum { position: relative; } .hu { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 10px 0 5px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--tx); cursor: pointer; font-size: 14px; } .hu:hover { border-color: var(--faint); } .hu img { width: 30px; height: 30px; border-radius: 50%; } .hu span { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hu em { font-style: normal; color: var(--faint); font-size: 11px; }
.hmenu { position: absolute; right: 0; top: 46px; min-width: 190px; background: #0d0f12; border: 1px solid var(--line); z-index: 40; } .hmenu a { display: flex; justify-content: space-between; padding: 12px 16px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--line); } .hmenu a:last-child { border: 0; } .hmenu a:hover { background: rgba(255, 255, 255, .05); color: var(--tx); } .hmenu a i { font-style: normal; color: var(--acc); }
.shtop { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 4px 0 22px; flex-wrap: wrap; } .shtop h2 { font-size: 30px; letter-spacing: 4px; text-transform: uppercase; } .shtop p { color: var(--dim); font-size: 14px; margin-top: 6px; max-width: 560px; line-height: 1.5; }
.ssw { display: inline-flex; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); padding: 4px; gap: 4px; } .ss { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; padding: 8px 22px 8px 16px; border: 0; background: none; color: var(--dim); cursor: pointer; text-align: left; font: inherit; } .ss i { grid-row: 1 / 3; } .ss b { font-size: 15px; letter-spacing: 3px; } .ss small { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--faint); } .ss:hover { color: var(--tx); } .ss.on { background: var(--tx); color: #000; } .ss.on small { color: #444; }
.shop { display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: start; } .scat { position: sticky; top: 90px; display: grid; gap: 2px; } .scat .search { margin-bottom: 10px; padding: 11px 14px; font-size: 14px; }
.sc { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--dim); font-size: 14px; border-left: 2px solid transparent; } .sc:hover { background: rgba(255, 255, 255, .04); color: var(--tx); } .sc.on { color: var(--tx); background: rgba(255, 210, 31, .07); border-left-color: var(--acc); } .sc .gsv { width: 20px; height: 20px; flex: none; } .sc span { flex: 1; } .sc em { font-style: normal; font-size: 12px; color: var(--faint); }
.scs { margin: 16px 0 6px 12px; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--faint); }
.sech { font-size: 13px; letter-spacing: 4px; text-transform: uppercase; color: var(--dim); margin: 6px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .sech:not(:first-child) { margin-top: 34px; } .more { margin-top: 34px; color: var(--dim); font-size: 14px; } .more a { color: var(--acc); }
.prvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.prv { cursor: pointer; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); display: flex; flex-direction: column; transition: border-color .2s, transform .2s; } .prv:hover { border-color: var(--acc); transform: translateY(-3px); } .prv .pic { height: 150px; border: 0; border-bottom: 1px solid var(--line); } .prv .pic .gsv { width: 70px; height: 70px; } .prv .pic.art b { font-size: 16px; letter-spacing: 6px; bottom: 12px; }
.prv .pb { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; } .prv h4 { font-size: 20px; letter-spacing: 4px; margin-bottom: 10px; } .prv ul { list-style: none; font-size: 13px; color: var(--dim); line-height: 1.8; flex: 1; } .prv li::before { content: "—"; color: var(--faint); margin-right: 8px; }
.pf2 { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .pf2 span { color: var(--dim); font-size: 13px; } .pf2 b { color: var(--acc); font-size: 20px; letter-spacing: 1px; } .pf2 em { font-style: normal; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--faint); }
.pcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; } .pc { cursor: pointer; position: relative; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); padding: 14px 12px; text-align: center; display: flex; flex-direction: column; gap: 8px; transition: border-color .2s, transform .2s; } .pc:hover { border-color: var(--acc); transform: translateY(-2px); }
.pc b { font-size: 13px; letter-spacing: 1px; line-height: 1.3; min-height: 34px; text-transform: uppercase; font-weight: 600; } .pc b small { color: var(--faint); font-weight: 400; }
.mf { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 14px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--faint); } .mf > div { text-transform: none; letter-spacing: 0; }
.fixed { font-size: 15px; letter-spacing: 3px; color: var(--tx); font-weight: 700; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; } .seg button { flex: 1; min-width: 120px; text-align: left; padding: 10px 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); color: var(--dim); cursor: pointer; font: inherit; } .seg button b { display: block; font-size: 14px; font-weight: 600; color: var(--tx); } .seg button small { display: block; font-size: 11px; color: var(--faint); margin-top: 3px; } .seg button:hover:not(:disabled) { border-color: var(--faint); } .seg button.on { border-color: var(--acc); background: rgba(255, 210, 31, .08); } .seg button:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 960px) { .shop { grid-template-columns: 1fr; } .scat { position: static; display: flex; overflow-x: auto; gap: 6px; padding-bottom: 6px; } .scat .search { min-width: 150px; margin: 0; } .sc { white-space: nowrap; border: 1px solid var(--line); border-left-width: 1px; } .sc em, .scs { display: none; } .hbal small, .hu span { display: none; } .hplus { padding: 0 10px; } .mf { grid-template-columns: 1fr; gap: 6px; } }