/* Basic grid */
.pcg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
}
.pcg-card {
  position: relative;
  background: #F8FAFC;
  border: 1px solid #E5E7EB;
  border-radius: 24px;
  padding: 20px 20px 24px;
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
  text-align: left;
}
.pcg-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.pcg-card-link { display:block; color:inherit; text-decoration:none; }

/* Image mask with "stroke" made via wrapper background and padding */
.pcg-image-wrapper {
  display: inline-block;
  padding: 4px; /* configured from control */
  background-color: #E5E7EB; /* configured from control */
  margin-bottom: 14px;
}
.pcg-mask {
  overflow: hidden;
  background: #fff;
}
.pcg-mask img {
  display: block;
  width: 180px; /* configured from control */
  height: 180px; /* configured from control */
  object-fit: cover;
}

/* Circle & square shapes */
.pcg-image-wrapper.pcg-shape-circle,
.pcg-image-wrapper.pcg-shape-circle .pcg-mask { border-radius: 9999px; }

.pcg-image-wrapper.pcg-shape-square,
.pcg-image-wrapper.pcg-shape-square .pcg-mask { border-radius: 20px; }

/* Hexagon using clip-path; wrapper and inner need the same polygon */
.pcg-image-wrapper.pcg-shape-hexagon,
.pcg-image-wrapper.pcg-shape-hexagon .pcg-mask {
  -webkit-clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  border-radius: 0;
}

/* Meta */
.pcg-meta { margin-top: 6px; }
.pcg-cat-label {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  opacity: .9;
  margin-bottom: 6px;
}
.pcg-title {
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 8px;
  color: #0f172a;
}
.pcg-desc {
  font-size: 15px;
  color: #334155;
  line-height: 1.5;
  margin-bottom: 14px;
}

/* Price badge */
.pcg-price-badge {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: #103B2E;
  color: #fff;
  font-weight: 700;
  letter-spacing: .2px;
  margin-top: 6px;
}

/* Empty state */
.pcg-empty, .pcg-notice {
  padding: 16px;
  border: 1px dashed #CBD5E1;
  border-radius: 12px;
  text-align: center;
  color: #475569;
}
/* Defaults for new controls */
.pcg-card { --pcg-thumb-y: 0px; --pcg-thumb-x: 0px; }

/* Move the thumbnail using CSS vars (no layout shift on text) */
.pcg-image-wrapper {
  display: inline-block; /* already in your CSS */
  transform: translate(var(--pcg-thumb-x), var(--pcg-thumb-y));
}

/* Alignment utilities driven by prefix_class from Elementor */
.pcg-thumb-align-center .pcg-image-wrapper { display:block; margin-left:auto; margin-right:auto; }
.pcg-thumb-align-right  .pcg-image-wrapper { display:block; margin-left:auto; }
.pcg-thumb-align-left   .pcg-image-wrapper { display:block; margin-right:auto; }

/* (Optional) If you want the image to overlap the card top nicely */
.pcg-card { overflow: visible; } /* safe with your current layout */