/* ==========================================================================
   SIIRA Santé — Bloc "Nos best-sellers"
   Cards produits + carrousel mobile
   --------------------------------------------------------------------------
   Markup attendu : voir templates/block.php
   Aucune dépendance : pas de JS, pas de librairie, pas de framework.
   Préfixe unique .siira- pour éviter tout conflit avec le thème.
   ========================================================================== */

.siira-products{
  --siira-navy:#12315b;
  --siira-green:#456f3f;
  --siira-green-2:#2f5d35;
  --siira-green-btn:#477a45;
  --siira-text:#334154;
  --siira-muted:#929aa3;
  --siira-line:#ece8e1;
  --siira-star:#f0a12c;
  --siira-radius:16px;
  --siira-gap:18px;
  --siira-cols:3;
  /* Amorce de la carte suivante, pour qu'on voie qu'il y a de quoi défiler. */
  --siira-peek:46px;

  padding:48px 0 60px;
  background:linear-gradient(#fff,#fbfaf7);
  font-family:Arial,Helvetica,sans-serif;
  color:var(--siira-text);
  line-height:1.45;
}

.siira-products *{box-sizing:border-box}

.siira-wrap{
  width:min(1180px,calc(100% - 42px));
  margin-inline:auto;
}

/* --------------------------------------------------------------------------
   En-tête de section
   -------------------------------------------------------------------------- */
.siira-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:28px;
}
.siira-eyebrow{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--siira-green);
  margin:0 0 12px;
}
.siira-head h2{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:42px;
  line-height:1.04;
  color:var(--siira-navy);
  margin:0 0 7px;
}
.siira-head p{
  margin:0;
  color:#727d89;
  font-size:15px;
  max-width:640px;
}
.siira-ghost{
  display:inline-block;
  border:1px solid #8aa27f;
  border-radius:999px;
  padding:12px 22px;
  color:#496a44;
  font-weight:700;
  font-size:13px;
  background:#fff;
  white-space:nowrap;
  text-decoration:none;
  transition:background .2s;
}
.siira-ghost:hover{background:#f4f7f2}

/* --------------------------------------------------------------------------
   Fond sur toute la largeur de l'écran
   --------------------------------------------------------------------------
   Le bloc est presque toujours posé dans un conteneur de largeur fixe, où son
   fond s'arrêterait aux bords de ce conteneur. Les deux décalages ci-dessous
   l'en font sortir, sans déplacer le contenu : la marge négative élargit la
   boîte, la marge intérieure la ramène à sa place.

   Les valeurs sont mesurées en JavaScript (assets/cards.js) plutôt qu'avec
   « 100vw », qui compte la barre de défilement et ferait dépasser la page de
   quelques pixels. Sans JavaScript, elles valent zéro : le bloc reste dans son
   conteneur, ce qui est simplement l'affichage d'avant.
   -------------------------------------------------------------------------- */
.siira-products--bleed{
  margin-left:calc(-1 * var(--siira-bleed-l, 0px));
  margin-right:calc(-1 * var(--siira-bleed-r, 0px));
  padding-left:var(--siira-bleed-l, 0px);
  padding-right:var(--siira-bleed-r, 0px);
}

/* --------------------------------------------------------------------------
   Carrousel : une seule ligne, défilement horizontal, calage sur les cartes
   -------------------------------------------------------------------------- */
.siira-grid{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  gap:var(--siira-gap);
  margin:0;
  padding:0 0 14px;
  list-style:none;
  scrollbar-width:none;
}
.siira-grid::-webkit-scrollbar{display:none}

/* --- flèches de défilement --------------------------------------------
   Posées à côté de la piste, jamais dedans : elles ne défilent donc pas
   avec les cartes. Masquées tant que le JavaScript n'a pas vérifié qu'il y
   a matière à défiler, et à chaque extrémité de la course.
   ---------------------------------------------------------------------- */
.siira-carousel{position:relative}

.siira-nav{
  position:absolute;
  top:135px;            /* au centre du visuel de la carte */
  z-index:2;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:#fff;
  border:1px solid var(--siira-line);
  border-radius:50%;
  box-shadow:0 5px 18px rgba(22,52,84,.14);
  color:var(--siira-navy);
  cursor:pointer;
  transition:background .2s,opacity .2s,transform .2s;
}
.siira-nav:hover{background:#f7f5f1;transform:scale(1.06)}
.siira-nav:focus-visible{outline:2px solid var(--siira-green-btn);outline-offset:2px}
.siira-nav svg{width:18px;height:18px;display:block}
.siira-nav--prev{left:-21px}
.siira-nav--next{right:-21px}
.siira-nav[disabled]{opacity:0;pointer-events:none}
/* La règle du navigateur pour [hidden] ne suffit pas face au display:flex. */
.siira-nav[hidden]{display:none}

@media (max-width:767px){
  .siira-nav{display:none}
}
@media (prefers-reduced-motion:reduce){
  .siira-nav{transition:none}
  .siira-nav:hover{transform:none}
}

/* --- variante grille, si l'on préfère plusieurs lignes sur ordinateur --- */
@media (min-width:768px){
  .siira-products--grid .siira-grid{
    display:grid;
    grid-template-columns:repeat(var(--siira-cols),1fr);
    overflow:visible;
    padding-bottom:0;
  }
  .siira-products--grid .siira-card{flex:initial}
}

/* --------------------------------------------------------------------------
   Card produit
   -------------------------------------------------------------------------- */
.siira-card{
  position:relative;
  /* Largeur d'une carte : la ligne en montre --siira-cols, plus l'amorce de
     la suivante. */
  flex:0 0 calc((100% - var(--siira-peek) - (var(--siira-cols) - 1) * var(--siira-gap)) / var(--siira-cols));
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--siira-line);
  border-radius:var(--siira-radius);
  padding:10px;
  box-shadow:0 5px 18px rgba(22,52,84,.06);
  transition:transform .2s,box-shadow .2s;
}
.siira-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(22,52,84,.10);
}

/* --- visuel --- */
.siira-card__media{
  position:relative;
  height:250px;
  border-radius:12px;
  overflow:hidden;
  background:#f4efe8;
}
.siira-card__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* --- badges --- */
.siira-card__badges{
  position:absolute;
  left:10px;
  top:9px;
  display:flex;
  gap:6px;
}
.siira-card__badges span{
  background:#3f6e3d;
  color:#fff;
  border-radius:5px;
  padding:4px 8px;
  font-size:10px;
  font-weight:800;
  line-height:1.3;
}
.siira-card__badges .is-navy{background:var(--siira-navy)}

/* --- titre / sous-titre --- */
.siira-card__title{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:20px;
  line-height:1.2;
  color:var(--siira-navy);
  margin:12px 4px 4px;
}
.siira-card__title a{color:inherit;text-decoration:none}
.siira-card__sub{
  font-size:12px;
  color:var(--siira-muted);
  margin:0 4px 10px;
}

/* --- chips (catégories / bénéfices) --- */
.siira-card__chips{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin:0 4px 11px;
  padding:0;
  list-style:none;
}
.siira-card__chips li{
  border:1px solid #dfe4dc;
  border-radius:999px;
  padding:4px 7px;
  font-size:10px;
  color:#4f6651;
  background:#fcfdfb;
  line-height:1.3;
}

/* --- note : étoiles pleines proportionnelles à --rate --- */
.siira-card__rating{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:#65717e;
  margin:0 4px 12px;
}
.siira-stars{
  position:relative;
  display:inline-block;
  font-size:12px;
  line-height:1;
  letter-spacing:1px;
  color:#dcdfd9;
  white-space:nowrap;
}
.siira-stars::before{content:"★★★★★"}
.siira-stars::after{
  content:"★★★★★";
  position:absolute;
  left:0;
  top:0;
  overflow:hidden;
  color:var(--siira-star);
  width:calc(var(--rate,5) / 5 * 100%);
}

/* --- prix + bouton, ancrés en bas --- */
.siira-card__bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:auto 4px 3px;
}
.siira-card__price{
  color:var(--siira-navy);
  font-weight:800;
  font-size:18px;
  white-space:nowrap;
}
.siira-card__price del{opacity:.5;font-weight:400;font-size:14px;margin-right:5px}
.siira-card__price ins{text-decoration:none}

.siira-card__add{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--siira-green-btn);
  border:0;
  color:#fff;
  border-radius:999px;
  padding:11px 15px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s;
  white-space:nowrap;
}
.siira-card__add:hover{background:var(--siira-green-2)}
.siira-card__add[aria-busy="true"]{opacity:.65;pointer-events:none}

/* --------------------------------------------------------------------------
   Tuile promo (visuel plein cadre, occupe une cellule de la grille)
   -------------------------------------------------------------------------- */
.siira-card--promo{
  display:block;          /* pas flex : l'image doit remplir la cellule */
  padding:0;
  overflow:hidden;
  box-shadow:none;
  position:relative;
  min-height:250px;       /* garde-fou si la cellule n'est pas étirée */
}
.siira-card--promo:hover{transform:none;box-shadow:none}
.siira-card--promo img{
  /* en absolu : la tuile ne dicte jamais la hauteur de la ligne de grille */
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- tablette : 2 colonnes --- */
@media (max-width:1024px){
  .siira-products{--siira-cols:2}
}

/* --- mobile : carrousel scroll-snap, sans JS --- */
@media (max-width:767px){
  .siira-head{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
  .siira-head h2{font-size:32px}

  .siira-grid{
    gap:12px;
    /* déborde jusqu'aux bords de l'écran pour un vrai effet carrousel */
    margin-inline:calc(-1 * (100vw - 100%) / 2);
    padding-inline:calc((100vw - 100%) / 2);
    padding-bottom:14px;
  }

  .siira-card{
    flex:0 0 84%;
    max-width:84%;
    scroll-snap-align:center;
  }
  .siira-card__media{height:290px}
  .siira-card--promo{min-height:420px}
}

/* --- accessibilité : pas d'animation si l'utilisateur la refuse --- */
@media (prefers-reduced-motion:reduce){
  .siira-card{transition:none}
  .siira-grid{scroll-behavior:auto}
}

/* --------------------------------------------------------------------------
   Ajouté par le plugin : WooCommerce glisse un lien « Voir le panier » juste
   après le bouton une fois l'ajout fait. Dans la ligne prix + bouton, il
   écraserait la mise en page ; le script le retire, cette règle couvre le cas
   où le script n'a pas pu se charger.
   -------------------------------------------------------------------------- */
.siira-card__bottom .added_to_cart{display:none}