/* CSS des cartes produit — extrait de snippets/card-product.liquid (était dupliqué à CHAQUE rendu de carte, ×16 home / ×40+ collections). Chargé UNE fois via theme.liquid. */

              .card__heading a:after {
                    display: none;
                }

                .card__information .card-information {
                    display: flex;
                    flex-direction: column;
                }

                .card__information .card-information .dflex {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .card__information .card-information .researcher-select-wrapper {
                    margin-bottom: 10px;
                    width: 100%;
                }
                body.collection .card__information .card-information .dflex {
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                    text-align: center;
                }
                /*body.collection .card__information .card-information .dflex {
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                    text-align: center;
                }
                body.collection .card__information .card-information .dflex .price__container {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                body.collection .card__information .card-information .dflex .price__container span{    
                    font-size: 18px !important;
                }
                body.collection .card__information .card-information .dflex .price__container s {
                    margin-right: 0px;
                    font-size: 15px !important;
                }*/
                @media (max-width: 767px) {
                  .researcher-select__dropdown {
                      width: fit-content;
                  }
                  .card__information {
                    width: fit-content;
                  }
                  .card__content {
                      width: fit-content;
                      display: block;
                  }
                  .card__information .card-information .dflex {
                      flex-direction: column;
                  }
                  .researcher-select-wrapper {
                      margin-top: 20px;
                  }
                  .researcher-select-wrapper select {
                      padding: 5px !important;
                      width: 100%;
                      border-radius: 5px !important;
                  }
              }
            

/* ============================================================
   PLP CARD v2 — format Qovigen adapté à l'identité Prime Lab
   (image hauteur FIXE sur tuile douce, titre clamp 2 lignes,
   chips confiance, bouton full-width, cartes uniformes)
   Scope: #MainContent .product-card-wrapper (cart-drawer exclu).
   ============================================================ */
body #MainContent .product-card-wrapper{
  --plp-card-ink:#121212;
  --plp-card-muted:rgba(18,18,18,.6);
  --plp-card-tile:#f6f8fa;
  --plp-card-line:#e5e7eb;
  --plp-img-h:220px;
}

/* ---- Carte : bord, radius, hover lift ---- */
body #MainContent .product-card-wrapper .card{
  border:1px solid var(--plp-card-line) !important;
  border-radius:16px !important;
  background:#fff;
  transition:transform .18s ease, box-shadow .18s ease;
}
body #MainContent .product-card-wrapper .card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(3,24,37,.10);
}

/* ---- Zone image : hauteur FIXE + tuile douce + marge interne 15px ----
   (PAS de padding-bottom:% — hack ratio Dawn = hauteur dépendante de la largeur) */
body #MainContent .product-card-wrapper .card__inner.ratio{
  padding-bottom:0 !important;
  height:var(--plp-img-h) !important;
  background:var(--plp-card-tile) !important;
  border-radius:15px 15px 0 0;
  overflow:hidden;
}
body #MainContent .product-card-wrapper .card__media{
  position:absolute !important;
  inset:0 !important;
  height:100% !important;
  min-height:0 !important;
  width:auto !important;
  background:transparent !important;
  border-bottom:0 !important;
}
body #MainContent .product-card-wrapper .card__media .media{ min-height:0 !important; }
/* boîte .media tendue par les 4 offsets — width/height:auto obligatoire sinon débord asymétrique à droite */
body #MainContent .product-card-wrapper .card__media .media{
  position:absolute !important;
  inset:15px !important;
  width:auto !important;
  height:auto !important;
  background:transparent !important;
}
body #MainContent .product-card-wrapper .card__media img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  background:transparent !important;
  transform:none;
  transition:transform .25s ease;
}
/* zoom hover ≤ marge tampon (15px) => zéro crop */
body #MainContent .product-card-wrapper .card:hover .card__media img{
  transform:scale(1.045);
}

/* ---- Copie overlay Dawn : DOIT rester masquée (sinon titre en double sur l'image) ---- */
body #MainContent .product-card-wrapper .card__inner .card__content{ display:none !important; }

/* ---- Contenu : flux serré top-down, aligné gauche ---- */
body #MainContent .product-card-wrapper .card__content{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  padding:14px !important;
  text-align:left !important;
}
body #MainContent .product-card-wrapper .card-information{ width:100%; padding:0 !important; }

/* ---- Titre : 2 lignes clamp hauteur FIXE (height, pas min-height) ---- */
body #MainContent .product-card-wrapper .card__heading{ margin:0 0 8px !important; }
body #MainContent .product-card-wrapper .card__heading a{
  font-size:15px !important;
  font-weight:600 !important;
  color:var(--plp-card-ink) !important;
  line-height:1.32 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  height:calc(1.32em * 2) !important;
  text-align:left;
}

/* ---- Chips confiance (injectées en JS) ---- */
body #MainContent .product-card-wrapper .plp-trust{
  display:flex; gap:6px; flex-wrap:wrap;
  margin:0 0 10px;
}
body #MainContent .product-card-wrapper .plp-trust__chip{
  display:inline-flex; align-items:center;
  padding:3px 8px;
  background:var(--plp-card-tile);
  border:1px solid var(--plp-card-line);
  border-radius:9999px;
  font-size:11px !important; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--plp-card-muted) !important;
  white-space:nowrap;
}
body #MainContent .product-card-wrapper .plp-trust .plp-trust__chip span{ font-size:inherit !important; }

/* ---- Prix : gauche, le compare-at peut passer à la ligne ---- */
/* ⚠️ chaque .price-item reste nowrap, MAIS le conteneur doit pouvoir wrapper : sinon un prix
   soldé long ("$980.00 USD $2,300.00 USD") impose une largeur min-content > 50% et fait
   déborder toute la grille 2-colonnes mobile (related-products, bulk offers). min-width:0
   laisse la carte rétrécir sous sa largeur de contenu. */
body #MainContent .product-card-wrapper .price__container{ width:100%; justify-content:flex-start !important; text-align:left !important; flex-wrap:wrap; }
body #MainContent .product-card-wrapper .price__container .price__regular,
body #MainContent .product-card-wrapper .price__container .price__sale{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px; }
body #MainContent .product-card-wrapper .price .price-item{ white-space:nowrap; }
body #MainContent .product-card-wrapper .card,
body #MainContent .product-card-wrapper .card__content,
body #MainContent .product-card-wrapper .card-information{ min-width:0; }

/* ---- Rangée prix + bouton : bouton PLEINE LARGEUR sous le prix ---- */
body #MainContent .product-card-wrapper .card-information .dflex{
  flex-wrap:wrap !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  row-gap:8px;
  width:100%;
}
body #MainContent .product-card-wrapper product-form,
body #MainContent .product-card-wrapper .quick-add{
  width:100% !important; flex:0 0 auto !important; margin:0 !important;
}
body #MainContent .product-card-wrapper .quick-add__submit{
  width:100% !important;
  min-height:44px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
body #MainContent .product-card-wrapper .quick-add__submit > span{ margin:0 !important; }

/* ---- Bouton sold-out : même gabarit que Add to cart (44px, pleine largeur) ---- */
body #MainContent .product-card-wrapper .sold-out-btn{
  width:100% !important;
  min-height:44px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  flex:0 0 auto !important; margin:0 !important;
  box-sizing:border-box;
}

/* ---- Mobile : image 190px + tout centré ---- */
@media screen and (max-width:749px){
  body #MainContent .product-card-wrapper{ --plp-img-h:190px; }
  body #MainContent .product-card-wrapper .card__content,
  body #MainContent .product-card-wrapper .card-information{ text-align:center !important; width:100% !important; }
  body #MainContent .product-card-wrapper .card__content{ align-items:stretch !important; padding:12px !important; }
  body #MainContent .product-card-wrapper .card__heading a{ text-align:center; font-size:14px !important; }
  body #MainContent .product-card-wrapper .plp-trust{ justify-content:center; }
  body #MainContent .product-card-wrapper .plp-trust .plp-trust__chip:nth-child(3){ display:none; }
  body #MainContent .product-card-wrapper .price__container{ justify-content:center !important; text-align:center !important; }
  body #MainContent .product-card-wrapper .card-information .dflex{ justify-content:center !important; }
}


/* ============================================================
   GRILLE COLLECTION PLEINE LARGEUR (comme Qovigen)
   PLP bornait .collection.page-width à 1200px ; Qovigen = 100%.
   On passe en pleine largeur avec un padding de bord propre.
   L'intro + la bande confiance restent centrées (leur propre max-width).
   ============================================================ */
.collection.page-width{
  max-width:100% !important;
  padding-left:clamp(16px,2vw,40px) !important;
  padding-right:clamp(16px,2vw,40px) !important;
}


/* ============================================================
   PDP — photo produit FIXE au scroll (comme Qovigen)
   La colonne info est longue (chips/specs/description) → on rend
   la colonne média sticky : la photo reste visible pendant qu'on
   scrolle. top = dégagement du header fixe. Desktop only.
   ============================================================ */
@media screen and (min-width:990px){
  .product .product__media-wrapper{
    position:sticky;
    top:130px;
    align-self:start;
  }
}


/* ============================================================
   PDP GALERIE = tuile douce (comme les cartes / Qovigen)
   Fioles PNG transparentes sur fond #f6f8fa, contain (jamais crop).
   + badge "Sale" en accent marque (était noir Dawn).
   ============================================================ */
.product__media-wrapper .product__media.media{
  background:#f6f8fa !important;
  border-radius:18px !important;
  overflow:hidden;
}
.product__media-wrapper .product__media.media img{
  object-fit:contain !important;
}
/* respiration autour de la fiole (padding sur le conteneur ratio) */
@media screen and (min-width:750px){
  .product__media-wrapper .product__media.media{ padding:18px; box-sizing:border-box; }
}
/* badge Sale -> accent marque */
.product .badge.color-scheme-4,
.product__media .badge,
.product .price .badge{
  background:#2279be !important;
  color:#fff !important;
  border-color:#2279be !important;
}