.vote-for-purr ul.thumbnails.image_picker_selector li .thumbnail>p {
     width: 100%;
background: transparent;

}

.vote-for-purr ul.thumbnails.image_picker_selector li .thumbnail.selected>p {
    background:transparent;
    color: #000;
    margin: 0;
  }
  
  
.vote-for-purr label {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f1f1f;
  margin-bottom: 0.75rem;
}

/* Keep the real <select> functional & accessible to AT, but visually hidden
   (do not use display:none — screen readers still need it operable) */
.vote-for-purr select.webform-image-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Responsive card grid — force-reset the plugin's own float/inline layout */
.vote-for-purr ul.thumbnails.image_picker_selector {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 1rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.vote-for-purr ul.thumbnails.image_picker_selector li {
  float: none !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
}

/* Card — reset plugin's own thumbnail box model so ours applies cleanly */
.vote-for-purr .thumbnail {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.6rem !important;
  float: none !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 2px solid #e2e2e2 !important;
  border-radius: 14px !important;
  padding: 0.75rem !important;
  margin: 0 !important;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.vote-for-purr .thumbnail:hover {

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);

}

/* Keyboard accessibility — role="radio" tabindex="0" already in the markup */
.vote-for-purr .thumbnail:focus-visible {
  outline-offset: 2px;
}


/* Image — the plugin sometimes positions this absolutely; force it inline */
.vote-for-purr .image_picker_image {
  position: static !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin: 0 !important;
  background: #f2f2f2;
}

/* Candidate name — the plugin overlays this on top of the image by default,
   which is what caused the labels to sit across the top of the whole row.
   Force it back into normal document flow, below the image. */
.vote-for-purr .thumbnail p {
  position: static !important;
  float: none !important;
  top: auto !important;
  left: auto !important;
  order: 2;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 600;
  font-size: 0.95rem;
  color: #1f1f1f;
  background: transparent !important;
}

.vote-for-purr .image_picker_image {
  order: 1;
}
.vote-for-purr .thumbnail.selected {
    background-color: #fff !important;
    border: 3px solid #3301c2 !important;
}
/* ------------------------- Responsive breakpoints ------------------------ */
@media (max-width: 600px) {
  .vote-for-purr ul.thumbnails.image_picker_selector {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 360px) {
  .vote-for-purr ul.thumbnails.image_picker_selector {
    grid-template-columns: 1fr !important;
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vote-for-purr .thumbnail {
    transition: none;
  }
  .vote-for-purr .thumbnail:hover {
    transform: none;
  }
}