/* =====================================================================
   CE Widget — Widget « Carte Catégorie » (Trouve ton format)
   Une carte = un lien. Couleurs pilotées par les contrôles de Style
   (variables --cew-cc-from / --cew-cc-to pour le dégradé).
   ===================================================================== */

.cew-catcard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  border-radius: 20px;
  color: #17171c;
  text-decoration: none;
  background: linear-gradient(120deg, var(--cew-cc-from, #ff9bc9), var(--cew-cc-to, #f45fa8));
  transition: transform .15s ease, box-shadow .15s ease;
}
.cew-catcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(23, 23, 28, .28);
  color: #17171c;
}

/* Image ronde */
.cew-catcard__img {
  width: 66px;
  height: 66px;
  flex-shrink: 0;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
  position: relative;
  box-shadow: 0 6px 16px rgba(23, 23, 28, .12);
  display: block;
}
.cew-catcard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Corps texte */
.cew-catcard__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.cew-catcard__title {
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  text-transform: uppercase;
}
.cew-catcard__count {
  font-size: 11.5px;
  font-weight: 700;
  opacity: .6;
}
.cew-catcard__price {
  width: max-content;
  background: #fff;
  color: #17171c;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 800;
}

/* Flèche */
.cew-catcard__arrow {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 999px;
  background: #111117;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .cew-catcard { transition: none; }
}