/* Mint canvas like the screenshot */
.cc-comments{
  --mint:#D9F5EF;          /* background */
  --card:#ffffff;          /* card bg */
  --ink:#2a2a2a;           /* text color */
  --ring:#111111;          /* quote ring/border */
  --radius:24px;           /* big rounded corners */
  --shadow:0 12px 24px rgba(0,0,0,.08);
  background: var(--mint);
  border-radius: 16px;
  padding: 40px 28px 28px;
  font-family: Georgia, serif;
  color: var(--ink);
}

/* 9-column grid (keeps your layout) */
#cc-comment-list{
  display:grid;
  grid-template-columns:repeat(9,1fr);
  gap:24px;
}

/* Responsive breakpoints (optional) */
@media (max-width:1400px){ #cc-comment-list{ grid-template-columns:repeat(6,1fr);} }
@media (max-width:1024px){ #cc-comment-list{ grid-template-columns:repeat(4,1fr);} }
@media (max-width:768px) { #cc-comment-list{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px) { #cc-comment-list{ grid-template-columns:1fr;} }

/* Card like the screenshot */
.cc-comment{
  position:relative;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 26px;            /* comfy text padding */
  text-align:center;
  line-height:1.6;
  margin-top:28px;              /* space for the floating badge */
}

/* Floating quote badge (no HTML change needed) */
.cc-comment::before{
  content:"";                   /* white circle */
  position:absolute;
  top:-28px;
  left:50%;
  transform:translateX(-50%);
  width:56px; height:56px;
  background:#fff;
  border:4px solid var(--ring);
  border-radius:50%;
  z-index:2;
}
.cc-comment::after{
  content:"❞";                  /* quote mark inside the circle */
  position:absolute;
  top:-28px; left:50%;
  transform:translate(-50%, -2px);
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; line-height:1; color:var(--ring);
  z-index:3; pointer-events:none;
}

/* Optional: softer inner shadow edge like a “card lift” */
.cc-comment:hover{
  box-shadow:0 16px 28px rgba(0,0,0,.12);
}

/* Tweak inner parts if present */
.cc-name{ display:block; font-weight:bold; margin-bottom:8px; }
.cc-time{ display:block; font-size:.92em; color:#6c6c6c; margin-top:10px; }