/* ----- GRID ----- */
/* Base = Desktop */
.promo-products,
.promo-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
}

/* Tablette */
@media (max-width: 980px) {
  .promo-products,
  .promo-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
  }
}

/* Mobile */
@media (max-width: 560px) {
  .promo-products,
  .promo-grid {
    grid-template-columns: 1fr; /* 1 colonne */
  }
}

/* ----- CARD ----- */
.promo-card{display:block;text-decoration:none;color:inherit}
.promo-card__media{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  background:#f2f2f2;
}
.promo-card__img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
.promo-card__img--placeholder{
  width:100%;
  aspect-ratio:4/3;
  background:#e9e9e9;
}

/* ----- BADGE ----- */
.promo-card__badge{
  position:absolute;
  top:12px; left:12px;
  width:40px; height:40px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#E90004;
color: #FFF;
font-size: 11px;
font-style: normal;
font-weight: 800;
line-height: 91.7%; /* 10.087px */
text-transform: uppercase;
}

/* ----- TEXT ----- */
.promo-card__content{padding-top:10px}
.promo-card__category{
	color: #1E1E1E;
font-size: 12px;
font-style: normal;
font-weight: 300;
line-height: normal;
	opacity:.7;
	margin-bottom:2px;
}
/* Titre des produits — neutralise le style global du thème */
.promo-card__title.h2,
.promo-card__title {
    color: #1E1E1E !important;
    font-family: inherit; /* ou ta police spécifique */
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
}

/* ----- PRICES ----- */
.promo-card__prices{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.promo-card__sale{
	color: #014289;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 20px !important;
}
.promo-card__regular{
	color: #575757;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 20px !important;
text-decoration-line: line-through;
	text-decoration:line-through;
}
.promo-card__suffix{color: #575757;
font-size: 10px;
font-style: normal;
font-weight: 300;
line-height: normal;
}
.promo-card__suffix--muted{opacity:.5}

/* ----- ECO ----- */
.promo-card__eco{font-size:11px;opacity:.65;margin-top:6px}

/* --- FORCE SUPERPOSITION LISTING --- */

/* 1. On verrouille le parent */
.promo-card__media {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    line-height: 0 !important; /* Supprime les décalages dus aux espaces HTML */
    font-size: 0 !important;
}

/* 2. On s'assure que l'image principale ne bouge pas */
.promo-card__img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 3. On force le ruban Nouveauté à monter */
.promo-card__ribbon {
	  position: absolute;
  top: -20px;
  left: -20px;
  width: 120px;
  height: auto;
    z-index: 10 !important; /* Passe devant l'image */
    margin: 0 !important;
    transform: none !important;
}

/* 4. Idem pour le bon plan si présent */
.promo-card__gooddeal {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 11 !important;
    margin: 0 !important;
}