.rnf-ps{
  --ps-ratio: 4/5;
  --ps-gap: 12px;
  --ps-desktop: 5;
  --ps-tablet: 3;
  --ps-mobile: 2;

  position: relative;
  padding: 0 44px;
}
.rnf-ps-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--ps-gap)) / var(--cols));
  gap: var(--ps-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rnf-ps-track::-webkit-scrollbar{ display:none; }

/* colonnes responsives */
.rnf-ps{ --cols: var(--ps-desktop); }
@media (max-width: 1024px){ .rnf-ps{ --cols: var(--ps-tablet); } }
@media (max-width: 768px){ .rnf-ps{ --cols: var(--ps-mobile); } }

/* carte */
.rnf-ps-card{ scroll-snap-align: start; display:flex; flex-direction:column; align-items:center; }
.rnf-ps-thumb{
  position:relative; display:block; width:100%;
  aspect-ratio: var(--ps-ratio);
  overflow:hidden; border:1px solid #e8e2d7; border-radius:10px; background:#fff;
}
.rnf-ps-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block; margin:0; border:0;    margin-left: auto;
    margin-right: auto;
}
.rnf-ps-title{
  margin:.7rem 0 .3rem; font-size: clamp(.92rem,1vw + .55rem,1.05rem); font-weight:600; text-align:center; color:#2b2112;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%;
}
.rnf-ps-title a{ color:inherit; text-decoration:none; }
.rnf-ps-price{ font-weight:700; text-align:center; }
.rnf-ps-price del{ color:#e11d48; margin-right:.35rem; }

/* nav */
.rnf-ps-nav{
  position:absolute; top:38%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:999px; border:1px solid #eac9d5; background:#f7e6eb; color:#a14b68;
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.rnf-ps-nav.prev{ left:6px; } .rnf-ps-nav.next{ right:6px; }
@media (max-width:768px){ .rnf-ps{ padding:0 38px; } .rnf-ps-nav{ width:34px; height:34px; top:34%; } }
/* Badges */
.rnf-ps-badge{
  position: absolute;
  top: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .78rem;
  line-height: 1;
  color: #fff;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.rnf-ps-badge-sale{ left: 8px; background:#e11d48; }
.rnf-ps-badge-heart{ right: 8px; background:#a14b68; }

/* Dots (pastilles de progression) */
.rnf-ps-dots{
  display:flex; justify-content:center; gap:8px;
  margin-top: 10px;
}
.rnf-ps-dots .dot{
  width:8px; height:8px; border-radius:999px;
  background:#e6d7df; border:0; padding:0; cursor:pointer;
  transition: transform .2s ease, background-color .2s ease;
}
.rnf-ps-dots .dot.active{
  background:#a14b68; transform: scale(1.25);
}


/* ===== Bouton En voir plus ===== */
.rnf-ps-more-wrap{
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}
@media (max-width:768px){
  .rnf-ps-more-wrap{ justify-content:center; }
}

.rnf-ps-more{
  display:inline-block;
  background: #f7e6eb;
  color: #a14b68;
  border: 1px solid #eac9d5;
  border-radius: 12px;
  padding: .7rem 1.2rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: background-color .2s ease, border-color .2s ease,
              transform .15s ease, box-shadow .2s ease;
}

.rnf-ps-more:hover{
  background: #f3d3df;
  border-color: #e4b6c8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.rnf-ps-more:active{
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.rnf-ps-more:focus{
  outline: 2px solid rgba(161,75,104,.25);
  outline-offset: 2px;
}
@media (max-width:480px){
  .rnf-ps-more{ width: 100%; max-width:260px; text-align:center; }
}

/* Variante badge Précommande (en bas à gauche pour ne pas chevaucher -% et cœur) */
.rnf-ps-badge-preorder{
  top: auto;
  bottom: 8px;
  left: 8px;
  background: #111;      /* même couleur que le plugin RNF Précommande */
  color: #fff;
}

/* ===== Compacte le badge promo du thème dans le slider (toutes tailles) ===== */
.rnf-ps .rnf-ps-thumb{ position: relative; } /* référence de position */

.rnf-ps .onsale::before,
.rnf-ps [class*="promo"]::before,
.rnf-ps [class*="sale"]::before,
.rnf-ps .onsale,
.rnf-ps [class*="promo"],
.rnf-ps [class*="sale"]{
  position: absolute !important;   /* n'occupe plus de place -> n'augmente plus la hauteur */
  top: 8px; left: 8px;
  margin: 0 !important;
  border-radius: 999px !important;
  background: #e11d48 !important;
  color: #fff !important;
  line-height: 1 !important;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Tailles responsives (mobile < tablet < desktop) */
@media (max-width: 768px){

  .rnf-ps .onsale,
  .rnf-ps [class*="promo"],
  .rnf-ps [class*="sale"]{
    padding: 3px 6px !important;
    font-size: 11px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px){
  .rnf-ps .onsale::before,
  .rnf-ps [class*="promo"]::before,
  .rnf-ps [class*="sale"]::before,
  .rnf-ps .onsale,
  .rnf-ps [class*="promo"],
  .rnf-ps [class*="sale"]{
    padding: 4px 8px !important;
    font-size: 12px !important;
  }
}

@media (min-width: 1025px){
  .rnf-ps .onsale::before,
  .rnf-ps [class*="promo"]::before,
  .rnf-ps [class*="sale"]::before,
  .rnf-ps .onsale,
  .rnf-ps [class*="promo"],
  .rnf-ps [class*="sale"]{
    padding: 5px 9px !important;
    font-size: 13px !important; /* plus petit aussi sur PC */
  }
}

/* Assure que le badge interne du slider reste au-dessus si présents en même temps */
.rnf-ps .rnf-ps-badge{ z-index: 4; }

/* Icône panier à droite du prix (mode cart="icon") */
.rnf-ps-price{
  display:flex; align-items:center; justify-content:center; gap:8px;
  flex-wrap:wrap;
}
.rnf-ps .rnf-ps-cart-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  border-radius:999px; border:1px solid #eac9d5;
  background:#f7e6eb; color:#a14b68; text-decoration:none;
  transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.rnf-ps .rnf-ps-cart-icon:hover{
  transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.08);
  background:#f3d3df;
}
.rnf-ps .rnf-ps-cart-ico{ font-size:14px; line-height:1; }

.rnf-ps-badge-oos{ top:auto; bottom:8px; right:8px; left:auto; background:#6b7280; color:#fff; }


/* ===== Prix promo propres dans le slider ===== */
.rnf-ps .rnf-ps-price{
  display:flex; align-items:baseline; justify-content:center; gap:10px; flex-wrap:wrap;
  line-height:1.2;
}

/* Ancien prix (barré) : discret, trait net et rouge "promo" */
.rnf-ps .rnf-ps-price del{
  order:1;
  color:#9ca3af;             /* gris doux */
  opacity:.95;
  text-decoration: none;     /* on refait le trait pour le rendre net */
  position: relative;
}
.rnf-ps .rnf-ps-price del .amount{ position:relative; }
.rnf-ps .rnf-ps-price del .amount::after{
  content:"";
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:2px; background:#e11d48; border-radius:2px;
}

/* Prix actuel : plus visible */
.rnf-ps .rnf-ps-price ins{
  order:2;
  text-decoration:none;      /* no underline */
  color:#2b2112;
  font-weight:800;
}

/* Évite les marges parasites autour des montants */
.rnf-ps .rnf-ps-price .amount{ display:inline-flex; align-items:baseline; gap:2px; }

/* Cache visuellement les textes SR s’ils ne sont pas déjà cachés par le thème */
.rnf-ps .screen-reader-text{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(1px,1px,1px,1px) !important; clip-path:inset(50%) !important;
  border:0 !important; white-space:nowrap !important;
}

/* ===== Icône panier propre (remplace l'emoji) ===== */
.rnf-ps .rnf-ps-cart-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:999px;
  background:#f7e6eb; color:#a14b68; border:1px solid #eac9d5;
  text-decoration:none; transition:transform .15s, box-shadow .2s, background-color .2s;
}
.rnf-ps .rnf-ps-cart-icon:hover{
  transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.08); background:#f3d3df;
}

/* On masque l'emoji inséré dans le HTML */
.rnf-ps .rnf-ps-cart-ico{ display:none !important; }

/* Et on dessine une icône SVG nette via mask (hérite de color) */
.rnf-ps .rnf-ps-cart-icon::before{
  content:""; width:16px; height:16px; display:block; background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M7 18a2 2 0 1 0 0 4a2 2 0 0 0 0-4m10 0a2 2 0 1 0 0 4a2 2 0 0 0 0-4M6.2 5l.3 1.5L8 14.2c.1.5.6.8 1.1.8h8.6a1 1 0 0 0 1-.8l1.3-6.6a1 1 0 0 0-1-1.2H7.2L6.8 5zm.8-3l1 2H21a2 2 0 0 1 2 2c0 .1 0 .2-.1.3l-1.3 6.6A3 3 0 0 1 17.7 16H9.1a3 3 0 0 1-3-2.3L4.2 4H2a1 1 0 1 1 0-2z"/></svg>') center / contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M7 18a2 2 0 1 0 0 4a2 2 0 0 0 0-4m10 0a2 2 0 1 0 0 4a2 2 0 0 0 0-4M6.2 5l.3 1.5L8 14.2c.1.5.6.8 1.1.8h8.6a1 1 0 0 0 1-.8l1.3-6.6a1 1 0 0 0-1-1.2H7.2L6.8 5zm.8-3l1 2H21a2 2 0 0 1 2 2c0 .1 0 .2-.1.3l-1.3 6.6A3 3 0 0 1 17.7 16H9.1a3 3 0 0 1-3-2.3L4.2 4H2a1 1 0 1 1 0-2z"/></svg>') center / contain no-repeat;
}

/* Micro-ajustements responsives */
@media (max-width: 768px){
  .rnf-ps .rnf-ps-price{ gap:8px; }
  .rnf-ps .rnf-ps-cart-icon{ width:26px; height:26px; }
}

/* ===== Slider uniquement : prix promo propre et chip compacte ===== */

/* 1) Réduire la taille imposée par ton CSS global (35px) */
.rnf-ps .rnf-ps-price ins .woocommerce-Price-amount.amount{
  font-size: 1.15rem !important;   /* ajuste si besoin */
  color: #2b2112 !important;
  font-weight: 800 !important;
  vertical-align: baseline !important;
}

/* 2) Remplacer le gros ruban :before par une puce compacte inline */
.rnf-ps .rnf-ps-price ins .woocommerce-Price-amount.amount::before{
  content: "Promo" !important;
  display: inline-block !important;
  position: static !important;     /* ne prend pas de place anormale */
  transform: none !important;
  width: auto !important;

  margin: 0 8px 0 0 !important;    /* avant le prix */
  padding: 2px 6px !important;
  border-radius: 999px !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  background: #f7e6eb !important;  /* rose du composant */
  color: #a14b68 !important;
}

/* 3) Ancien prix : discret + barré net */
.rnf-ps .rnf-ps-price del{
  color: #9ca3af !important;
  opacity: .95;
  text-decoration: none !important;
  position: relative;
}
.rnf-ps .rnf-ps-price del .amount::after{
  content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:2px; background:#e11d48; border-radius:2px;
}

/* Espace entre le prix et l’icône panier */
.rnf-ps .rnf-ps-price .rnf-ps-cart-icon {
  margin-left: 8px;          /* ou 10–12px selon ton œil */
}

/* Espace entre anciens/nouveaux prix */
.rnf-ps .rnf-ps-price ins { 
  margin-left: 6px;
}

/* Espace entre plusieurs boutons éventuels */
.rnf-ps .rnf-ps-actions .rnf-ps-btn + .rnf-ps-btn {
  margin-left: 8px;
}

/* Un peu d’air au-dessus de la rangée d’actions */
.rnf-ps .rnf-ps-actions {
  margin-top: 8px;
}

/* Variante logique (RTL-safe) si tu préfères : */
.rnf-ps [dir="rtl"] .rnf-ps-price .rnf-ps-cart-icon { margin-left: 0; margin-right: 8px; }
/* ou remplace margin-left par margin-inline-start partout */


.rnf-tabs .rnf-tab-btn {margin-left:20px;}