/* ===== Comments — entershop.net style ===== */
.cm-root{ margin:28px 0 0; font-family:inherit; }

.cm-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; flex-wrap:wrap; gap:10px;
}
.cm-title{ font-size:24px; font-weight:800; color:#001a2e; }
.cm-count{
  display:inline-block; margin-left:8px; background:#f4f8ff; color:#0078d7;
  font-size:13px; font-weight:700; padding:3px 11px; border-radius:999px; vertical-align:middle;
}

.cm-sort{ position:relative; }
.cm-sort-btn{
  display:flex; align-items:center; gap:6px;
  background:none; border:none; cursor:pointer;
  font-size:14px; color:#6a7480; font-weight:500; padding:6px 2px;
}
.cm-sort-btn svg{ color:#9aabb8; transition:transform .15s; }
.cm-sort.is-open .cm-sort-btn svg{ transform:rotate(180deg); }
.cm-sort-menu{
  position:absolute; right:0; top:calc(100% + 6px);
  background:#fff; border:1px solid #eef2ff; border-radius:12px;
  box-shadow:0 12px 32px rgba(0,26,46,.10);
  min-width:170px; padding:6px; z-index:20;
  display:none; flex-direction:column; gap:2px;
}
.cm-sort.is-open .cm-sort-menu{ display:flex; }
.cm-sort-opt{
  text-align:left; background:none; border:none; cursor:pointer;
  padding:9px 12px; border-radius:8px; font-size:14px; color:#2f3a48;
}
.cm-sort-opt:hover{ background:#f4f8ff; }
.cm-sort-opt.is-active{ color:#0078d7; font-weight:700; }

/* ---- форма ---- */
.cm-form{
  display:flex; gap:14px; align-items:flex-start;
  border:1px solid #eef2ff; border-radius:18px; padding:16px;
  margin-bottom:28px; background:#fff;
}
.cm-avatar{
  width:42px; height:42px; border-radius:11px; flex-shrink:0;
  background:#0078d7;
}
.cm-form-body{ flex:1; min-width:0; }

.cm-guest-row{ margin-bottom:10px; }
.cm-guest-input{
  width:50%; min-width:200px; border:1px solid #eef2ff; border-radius:10px;
  padding:9px 12px; font-size:13px; outline:none; color:#001a2e;
}
.cm-guest-input::placeholder{ color:#9aabb8; }
.cm-guest-input:focus{ border-color:#bcdcfb; }

.cm-textarea{
  width:100%; border:none; outline:none; resize:none;
  font-size:15px; color:#001a2e; line-height:1.5; min-height:26px;
  padding:6px 0 12px; font-family:inherit;
}
.cm-textarea::placeholder{ color:#9aabb8; }

.cm-form-bottom{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:6px; }
.cm-actions-left{ display:flex; align-items:center; gap:6px; }
.cm-img-btn{
  width:34px; height:34px; border-radius:9px; border:none; background:#f4f8ff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:#9aabb8;
  transition:background .15s, color .15s;
}
.cm-img-btn:hover{ background:#e3f2fd; color:#0078d7; }

.cm-form-right{ display:flex; align-items:center; gap:10px; }
.cm-cancel-btn{
  background:#f4f6fa; border:none; border-radius:10px; padding:10px 16px;
  font-size:14px; font-weight:700; color:#6a7480; cursor:pointer;
}
.cm-cancel-btn:hover{ background:#eceff4; }
.cm-submit{
  background:#0078d7; color:#fff; border:none; border-radius:10px;
  padding:10px 22px; font-size:14px; font-weight:700; cursor:pointer;
  transition:background .15s;
}
.cm-submit:hover{ background:#005fa3; }
.cm-submit:disabled{ opacity:.5; cursor:default; }

.cm-msg{ color:#e0383f; font-size:13px; font-weight:600; margin-top:6px; min-height:1px; }

.cm-img-preview{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.cm-img-preview .img{ position:relative; width:64px; height:64px; border-radius:10px; overflow:hidden; }
.cm-img-preview .img img{ width:100%; height:100%; object-fit:cover; display:block; }
.cm-img-preview .img button{
  position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%;
  background:rgba(0,26,46,.65); border:none; color:#fff; font-size:11px; line-height:1; cursor:pointer;
}

/* ---- список комментариев ---- */
.cm-list{ display:flex; flex-direction:column; }

.cm-item{ padding:18px 0; border-bottom:1px solid #f1f4f9; }
.cm-item:first-child{ padding-top:0; }
.cm-item:last-child{ border-bottom:none; }

.cm-item-row{ display:flex; gap:12px; }
.cm-item-body{ flex:1; min-width:0; }

.cm-avatar-circle{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; text-transform:uppercase;
  overflow:hidden;
}
.cm-avatar-circle img{ width:100%; height:100%; object-fit:cover; }

.cm-item-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.cm-author{ font-size:15px; font-weight:700; color:#001a2e; }
.cm-date{ font-size:13px; color:#9aabb8; }

.cm-badge-admin{
  display:inline-flex; align-items:center; font-size:11px; font-weight:700;
  color:#0078d7; background:#f4f8ff; padding:2px 9px; border-radius:999px;
}

.cm-text{ font-size:15px; color:#2f3a48; line-height:1.6; white-space:pre-wrap; word-break:break-word; }

.cm-attachments{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.cm-attachments a{ display:block; width:84px; height:84px; border-radius:10px; overflow:hidden; border:1px solid #eef2ff; }
.cm-attachments img{ width:100%; height:100%; object-fit:cover; display:block; }

.cm-item-actions{ display:flex; align-items:center; gap:18px; margin-top:8px; }
.cm-act-btn{
  display:flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer;
  font-size:14px; color:#9aabb8; padding:2px 0; transition:color .15s;
}
.cm-act-btn:hover{ color:#0078d7; }
.cm-act-btn.cm-like.is-liked{ color:#0078d7; }
.cm-act-btn svg{ flex-shrink:0; }

/* ---- ответы (вложенность) ---- */
.cm-replies{
  margin-top:14px; padding-left:18px; border-left:2px solid #eef2ff;
  display:flex; flex-direction:column; gap:14px;
}
.cm-replies .cm-avatar-circle{ width:32px; height:32px; font-size:13px; }
.cm-replies .cm-author{ font-size:14px; }

/* ---- форма ответа внутри комментария ---- */
.cm-reply-form-wrap{ margin-top:12px; display:none; }
.cm-reply-form-wrap.is-open{ display:block; }

.cm-empty, .cm-loading{ color:#9aabb8; font-size:14px; padding:14px 0; }

.cm-more-btn{
  display:block; width:100%; margin-top:8px; padding:13px; text-align:center;
  background:#f4f8ff; border:none; border-radius:12px; font-size:14px; font-weight:700;
  color:#0078d7; cursor:pointer; transition:background .15s;
}
.cm-more-btn:hover{ background:#e3f2fd; }
.cm-more-btn:disabled{ opacity:.6; cursor:default; }

@media screen and (max-width:560px){
  .cm-title{ font-size:20px; }
  .cm-form{ flex-direction:column; }
  .cm-avatar{ display:none; }
  .cm-item-row{ gap:10px; }
  .cm-guest-input{ width:100%; }
}