/* /assets/lumen/detail.css — v4.0.3 (detail grid + stars + progress) */
:root{
  --lx-ink:#0f172a; --lx-muted:#475569; --lx-ring:#e2e8f0; --lx-soft:#f8fafc;
  --lx-brand:#2563eb; --lx-brand2:#22d3ee; --lx-grad: linear-gradient(135deg, var(--lx-brand), var(--lx-brand2));
}
.lx-dgrid{ display:grid; grid-template-columns: 1fr; gap:14px }
@media (min-width: 960px){
  .lx-dgrid{ grid-template-columns: 2fr 1.4fr 1fr; align-items:start }
}
.lx-dcol{ background:#fff; border:1px solid var(--lx-ring); border-radius:16px; overflow:hidden }
.lx-dcol .lx-body{ padding:14px }
.lx-side{ background:#fff; border:1px solid var(--lx-ring); border-radius:16px; padding:14px }
.lx-thumb{ position:relative; background:var(--lx-soft); border-bottom:1px solid var(--lx-ring); aspect-ratio: 16 / 9; overflow:hidden }
.lx-thumb > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

/* Purchase card */
.lx-buy{ background:#fff; border:1px solid var(--lx-ring); border-radius:16px; padding:14px }
.lx-price{ font-size:22px; font-weight:700 }
.lx-meta{ color:var(--lx-muted); font-size:13px }
.lx-progress{ margin-top:8px; height:12px; border:1px solid var(--lx-ring); border-radius:999px; overflow:hidden }
.lx-progress > i{ display:block; height:100%; background:linear-gradient(90deg,#22d3ee,#2563eb) }
.lx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; min-height:44px; border-radius:12px; background:var(--lx-grad); color:#fff; text-decoration:none; border:none; }

/* Comments */
#comments{ margin-top:16px }
.lx-c-head{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.lx-c-list{ display:grid; gap:10px; margin-top:10px }
.lx-c{ background:#fff; border:1px solid var(--lx-ring); border-radius:12px; padding:12px }
.lx-c strong{ display:block }
.lx-stars{ display:inline-flex; gap:2px; vertical-align:middle }
.lx-star{ width:16px; height:16px; display:inline-block; }
.lx-star svg{ width:100%; height:100% }
.lx-star.filled path{ fill:#f59e0b; } .lx-star path{ fill:#e2e8f0 }

/* Comment form */
.lx-form{ background:#fff; border:1px solid var(--lx-ring); border-radius:12px; padding:12px; margin-top:10px }
.lx-form label{ display:block; font-size:14px; margin:8px 0 4px }
.lx-input, .lx-text{ width:100%; border:1px solid var(--lx-ring); border-radius:10px; padding:10px }
.lx-text{ min-height:120px }
.lx-rate{ display:flex; gap:8px; align-items:center }
.lx-rate input{ appearance:none; width:0; height:0; position:absolute; }
.lx-rate label{ cursor:pointer }
.lx-rate .lx-star path{ transition: fill .2s ease }
.lx-rate input:checked ~ label .lx-star path{ fill:#f59e0b }

/* Small helpers */
.lx-small{ font-size:12px; color:var(--lx-muted) } .lx-muted{ color:var(--lx-muted) }