/* style_classic.css — classic look + modal */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#0f0f12;color:#eaeaea}
.wrap{max-width:1100px;margin:0 auto;padding:12px 16px}

.top{background:#14161d;border-bottom:1px solid #232532}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{height:28px;width:auto;border-radius:6px;display:block}
.brand h1{margin:0;font-size:20px;font-weight:700;color:#fff}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.links{display:flex;gap:8px}
.btn{background:var(--brand);color:#fff;border:0;border-radius:8px;padding:8px 12px;font-weight:600;text-decoration:none;display:inline-block;cursor:pointer}
.btn.outline{background:transparent;border:1px solid #2a2d3b;color:#eaeaea}

.cats{display:flex;gap:8px;overflow:auto;padding:10px 0;margin:6px 0 10px}
.cat{background:#14161d;border:1px solid #222638;color:#eaeaea;border-radius:999px;padding:8px 12px;text-decoration:none;white-space:nowrap}
.cat:hover{border-color:var(--brand)}
.cat.active{border-color:var(--brand)}

.title{font-size:16px;margin:12px 0 8px;font-weight:800}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:repeat(1,1fr)}}

.card{background:#151821;border:1px solid #1f2331;border-radius:10px;padding:10px;cursor:pointer}
.thumb{height:140px;background:#0e1118;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:8px}
.thumb img{max-width:100%;max-height:100%}
.name{font-weight:700;margin:2px 0 4px}
.desc{font-size:12px;color:#b8b9c1;margin-bottom:6px}
.price{color:#ffd26a;font-weight:800}

.muted{color:#9aa0ad;font-size:12px}

.foot{border-top:1px solid #232532;margin-top:20px}
.foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Modal */
.noscroll{overflow:hidden}
.modal{position:fixed;inset:0;z-index:50}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.modal__panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,92vw);background:#191b24;border:1px solid #262a38;border-radius:14px;display:grid;grid-template-columns:1fr 1fr;gap:0}
.modal__img{background:#0f121a;border-right:1px solid #262a38;display:flex;align-items:center;justify-content:center}
.modal__img img{max-width:100%;max-height:300px}
.modal__content{padding:16px}
.modal__title{font-weight:800;margin-bottom:6px}
.modal__desc{font-size:13px;color:#b7bcc9;margin-bottom:10px;min-height:40px}
.modal__price{font-weight:900;color:#ffd26a;margin-bottom:14px}
.modal__actions{display:flex;gap:8px;justify-content:flex-end}
@media(max-width:800px){
  .modal__panel{grid-template-columns:1fr}
  .modal__img{border-right:0;border-bottom:1px solid #262a38}
}