/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--radius-2);padding:10px 14px;text-decoration:none;font:var(--text-md)/1.3 var(--font-sans)}
.btn--primary{background:var(--color-primary);color:#fff}
.btn--ghost{border:1px solid var(--color-border);color:var(--color-text)}
.btn--subtle{background:var(--color-surface);color:var(--color-text)}

/* Inputs */
.input{border:1px solid var(--color-border);border-radius:var(--radius-2);background:#0f172a;color:#fff;padding:10px 12px}
.select{border:1px solid var(--color-border);border-radius:var(--radius-2);background:#0f172a;color:#fff}

/* Chips */
.chip{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);border-radius:var(--radius-round);padding:8px 12px}

/* Badge */
.badge{background:var(--color-primary);color:#fff;border-radius:var(--radius-round);padding:0 6px;font:var(--text-xs)/1.6 var(--font-sans)}

/* Card */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-3);box-shadow:var(--shadow-1)}

/* Panel */
.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;box-shadow:var(--shadow-1);padding:12px}
.panel__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.panel__actions{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.panel__body{padding:4px 0}
.panel__footer{margin-top:8px;color:var(--color-text-muted)}

/* Product page (hero) */
.breadcrumbs{color:var(--color-text-muted);font:var(--text-sm)/1.4 var(--font-sans);margin:8px 0}
.breadcrumbs a{color:inherit;text-decoration:none}
.breadcrumbs .sep{margin:0 6px;opacity:.6}

.product{padding-top:16px}
.prod-hero{display:grid;grid-template-columns:520px 1fr;gap:24px;align-items:start}
.prod-gallery{display:grid;grid-template-columns:100px 1fr;gap:16px}
.prod-thumbs{display:flex;flex-direction:column;gap:12px;max-height:560px;overflow:auto;width:88px;margin:0 auto}
.prod-thumbs .thumb{display:block;width:88px;height:120px;object-fit:cover;border-radius:12px;border:1px solid var(--color-border);box-shadow:var(--shadow-1)}
.prod-thumbs .thumb.active{outline:2px solid var(--color-primary);outline-offset:2px}
.prod-main{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--color-border);box-shadow:var(--shadow-1)}

.prod-details h1{font:600 28px/1.28 var(--font-sans);margin:8px 0 12px}
.price-row{display:flex;align-items:center;gap:12px;margin:8px 0}
.price-row .price{font:700 28px/1 var(--font-sans)}
.price-row .price-old{color:var(--color-text-muted);text-decoration:line-through}
.price-badge{background:var(--color-surface);border:1px solid var(--color-border);border-radius:999px;padding:4px 8px;font:var(--text-sm)/1 var(--font-sans)}
.rating-row{display:flex;align-items:center;gap:10px;color:var(--color-text-muted);margin:8px 0}
.actions-row{display:flex;align-items:center;gap:12px;margin:14px 0}

/* Helpers */
.muted{color:var(--color-text-muted)}

.rating-stars{display:inline-flex;gap:2px}
.rating-stars .star{color:#cbd5e1}
.rating-stars .star.filled{color:#f59e0b}

.feat-row{display:flex;gap:12px;margin:8px 0;flex-wrap:wrap}

.prod-thumbs .thumb.active{outline:2px solid var(--color-primary)}
.thumb-nav{display:flex;align-items:center;justify-content:center;width:88px;height:28px;border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface);color:var(--color-text);cursor:pointer}
.thumb-nav:disabled{opacity:.4;cursor:default}
.thumb-nav.up{margin-bottom:8px}
.thumb-nav.down{margin-top:8px}

/* Price list (extras) */
.nl-extras{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.nl-extra-row{display:grid;grid-template-columns:auto 1fr 120px auto 160px 28px;align-items:center;gap:8px}
.nl-extra-name{border:1px solid var(--color-border);border-radius:8px;padding:8px}
.nl-extra-price{border:1px solid var(--color-border);border-radius:8px;padding:8px;width:100%}
.nl-extra-unit{border:1px solid var(--color-border);border-radius:8px;padding:8px}
.nl-extra-del{border:1px solid var(--color-border);background:var(--color-surface);border-radius:8px;cursor:pointer}

/* Reviews block */
.reviews-block{margin:28px 0}
.rv-grid{display:grid;grid-template-columns:1fr 280px;gap:24px}
.rv-photos{display:flex;align-items:center;gap:12px;margin:8px 0}
.rv-photo{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--color-border)}
.rv-more{font-weight:600}
.rv-sort{margin:8px 0;color:var(--color-text-muted)}
.rv-item{border-top:1px solid var(--color-border);padding:12px 0}
.rv-head{display:flex;align-items:center;gap:12px;justify-content:space-between}
.rv-reply{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:10px;margin-top:8px}
.rv-bar{display:flex;align-items:center;gap:8px;margin:6px 0}
.rv-bar-wrap{position:relative;flex:1;height:6px;border-radius:999px;overflow:hidden}
.rv-bar-bg{position:absolute;inset:0;background:#e2e8f0}
.rv-bar-fg{position:absolute;inset:0;background:var(--color-primary)}
.rv-score{font:600 18px/1.3 var(--font-sans);margin-bottom:10px}

/* Product price list */
.pl-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:12px 0}
.pl-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:6px 0}
.pl-dots{border-bottom:1px dashed var(--color-border);align-self:stretch}
.pl-name{white-space:nowrap}
.pl-amount{white-space:nowrap}

.performer-card{border:1px solid var(--color-border);border-radius:12px;padding:12px;margin-top:12px;background:var(--color-surface)}
.perf-row{display:flex;align-items:center;justify-content:space-between;margin:4px 0}
.perf-name{font-weight:600}
.actions-row .btn{margin-right:8px}

/* Chat */
.chat-list{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow:auto;padding:12px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);margin-bottom:12px}
.chat-row{display:flex;gap:8px;line-height:1.4}
.chat-row .who{font-weight:600;white-space:nowrap}
.chat-row.mine .who{color:#2c7be5}
.chat-row.peer .who{color:#94a3b8}
.chat-row.system{opacity:.85}
.chat-row.system .who{color:#a855f7}
.chat-form{display:flex;gap:8px}
.chat-input{flex:1;min-width:0}

@media (max-width: 640px){
  .chat-form{position:sticky;bottom:0;background:var(--color-surface);padding-bottom:8px}
}

/* Responsive */
@media (max-width: 1024px){
  .prod-hero{grid-template-columns:1fr}
  .prod-gallery{display:flex;flex-direction:column;gap:12px}
  .thumb-nav{display:none}
  .prod-thumbs{flex-direction:row;width:auto;max-height:none;overflow-x:auto;gap:8px}
  .prod-thumbs .thumb{width:72px;height:96px}
  .actions-row{flex-wrap:wrap}
  .pl-grid{grid-template-columns:1fr}
}

@media (max-width: 640px){
  .prod-details h1{font:600 22px/1.25 var(--font-sans)}
  .price-row .price{font:700 24px/1 var(--font-sans)}
  .prod-thumbs .thumb{width:56px;height:80px}
  .actions-row{gap:8px}
  .performer-card{padding:10px}
}