/* Core card styles */
.coc-layout-card{ border:1px solid #dfe3e8; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.08); transition:transform .2s, box-shadow .2s; margin:0; }
.coc-layout-card:hover{ transform: translateY(-3px); box-shadow:0 6px 14px rgba(0,0,0,.12); }
.coc-layout-card .thumb{ display:block; margin:0; padding:0; width:100%; }
.coc-layout-card .thumb img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block; border-bottom:1px solid #eee; border-radius:0; margin:0; }
.coc-layout-card .meta{ display:flex; justify-content:space-between; align-items:center; padding:8px 10px; font-size:13px; }
.coc-layout-card .stars{ background:#fffaf0; border:1px solid #ffe7a3; border-radius:8px; padding:3px 6px; }
.coc-layout-card .stars .coc-star{ color:#ccc; font-size:18px; cursor:pointer; transition:color .2s, transform .2s; }
.coc-layout-card .stars .coc-star.active{ color:#ffd84d; }
.coc-layout-card .stars .coc-star:hover{ color:#ffc107; transform:scale(1.15); }
.coc-layout-card .views{ color:#666; display:flex; align-items:center; gap:4px; }
.coc-eye{ display:inline-block; vertical-align:middle; }

/* Responsive grids */
.coc-grid, .coc-layout-grid{ display:grid; gap:12px; }

.coc-layout-grid{ grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }


@media (max-width: 640px){
  .coc-grid-archive, .coc-layout-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Single page */
.coc-title{ color:#e67e22; margin:10px 0 6px; }
.coc-hero-img img{ width:100%; height:auto; border-radius:10px; border:2px solid #86efac; }
.coc-hero-meta{ display:flex; justify-content:space-between; margin:8px 0; }
.coc-copy-wrap{ text-align:center; margin:12px 0; }
.coc-copy-btn{ display:inline-block; background:#e67e22; color:#fff; padding:10px 16px; border-radius:6px; text-decoration:none; font-weight:600; }
.coc-copy-btn:hover{ background:#d35400; }
.coc-rating-line .coc-star{ color:#ccc; font-size:22px; cursor:pointer; transition:color .2s, transform .2s; }
.coc-rating-line .coc-star.active{ color:#ffd84d; }
.coc-rating-line .coc-star:hover{ color:#ffc107; transform:scale(1.15); }
.coc-views-line{ color:#666; display:flex; align-items:center; gap:4px; }

.coc-section-sep{ border:0; border-top:1px solid #e5e7eb; margin:14px 0; }
.coc-related-sep{ border:0; border-top:1px solid #e5e7eb; margin:18px 0 12px; }
.coc-single-wrap{ border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb; padding-top:8px; padding-bottom:8px; }

/* Related */
.coc-related{ padding:8px; }
.coc-related-heading{ font-size:20px; font-weight:700; color:#e67e22; margin:12px 0 10px; }
.coc-related-btn{ text-align:center; margin-top:12px; }
.coc-explore-btn{ background:#e67e22; color:#fff; padding:10px 18px; border-radius:6px; text-decoration:none; font-weight:700; }
.coc-explore-btn:hover{ background:#d35400; }

/* Filter bar */
.coc-filters{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; }
.coc-btn, .coc-filters button{ border:1px solid #e95b0c; color:#e95b0c; background:#fff; padding:6px 10px; border-radius:8px; cursor:pointer; text-decoration:none; display:inline-block; }
.coc-btn.active, .coc-btn:hover, .coc-filters button.active, .coc-filters button:hover{ background:#e95b0c; color:#fff; }

.coc-grid,
.coc-layout-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:10px;
}
.coc-layout-card .thumb{ display:block; margin:0; padding:0; width:100%; }
.coc-layout-card .thumb img{ width:100%; height:100%; object-fit:cover; border-radius:0; display:block; }
.coc-layout-card .thumb{ aspect-ratio: 1 / 1; }
.coc-btn, .coc-filters button{ font-size:13px; padding:6px 10px; margin:2px; border-radius:6px; }
.coc-btn.active, .coc-filters button.active{ background:#e95b0c; color:#fff; }