/* ===========================
   Correctifs CLS (Layout Shift)
   Fichier : custom-cls.css
   ===========================
   ⚠️ Ce fichier n’écrase pas ton design actuel.
   Il ne fait qu’ajouter des garde-fous pour éviter les décalages.
   =========================== */

/* ✅ 1. Images produits, logos, bannières */
img {
  display: block; /* évite les espaces fantômes */
  height: auto;
  max-width: 100%; /* reste responsive */
}

/* ✅ 2. Bannières et fonds (#deco_fond, sliders, etc.) */
#deco_fond {
  min-height: 300px; /* réserve la place pour éviter les sauts */
  background-color: #f8f8f8; /* couleur neutre en attente du fond */
}

/* ✅ 3. Grilles produits */
.product-thumb {
  min-height: 350px; /* ajuste selon la hauteur moyenne de tes vignettes */
}

/* ✅ 4. Sliders (swiper / owl-carousel) */
.swiper-container,
.owl-carousel {
  min-height: 300px; /* réserve la place même avant chargement */
}

/* ✅ 5. Logos de paiement */
.payment-logo img {
  width: 40px;  /* fixe largeur */
  height: 25px; /* fixe hauteur */
}

/* ✅ 6. Polices web → si ton thème charge des fonts */
@font-face {
  font-family: 'Roboto';
  src: url('catalog/view/theme/default/fonts/roboto.woff2') format('woff2');
  font-display: swap; /* évite le CLS lié aux polices */
}

/* ✅ 7. Texte (fixer la stabilité de l'affichage) */
p,
h1,
h2,
h3 {
  line-height: 1.4;
}

/* ===========================
   ✅ 8. Correctif alignement Panier / Recherche
   =========================== */
#cart {
  display: flex;
  align-items: center;   /* centre verticalement */
  height: 100%;          /* occupe la hauteur de la colonne */
}

#cart > .btn {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;   /* centre le texte/icône dans le bouton */
}
/* ✅ Alignement précis du bouton Panier avec la barre de recherche */
#cart .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  height: 42px;          /* ajuste à la même hauteur que la barre de recherche */
  padding: 0 12px !important;
  line-height: normal !important;
}

#cart .btn i,
#cart .btn span {
  display: flex;
  align-items: center;
}
/* ✅ Forcer le bloc Panier à s’aligner avec la recherche */
#cart {
  display: flex !important;
  align-items: center !important;
  height: 42px; /* même hauteur que le champ de recherche */
  margin: 0 !important;
  padding: 0 !important;
}

/* ✅ Ajuste le bouton interne */
#cart .btn {
  height: 100% !important;
  margin: 0 !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
}