/* KissMySeeds - Image promo carree sur la page marque
   La ligne qui contient le texte + l'image est mise en place
   cote theme (listing/manufacturer.tpl, classe kms-manufacturer-header-row) :
   ce fichier ne fait que dimensionner l'image en carre a la hauteur
   de cette ligne.
   28/10 : la cible est desormais .kms-manufacturer-text, le bloc qui
   regroupe description courte ET longue - avant, seul le texte court
   etait dans la ligne flex, donc une marque sans texte court (ex.
   00Seeds, uniquement la description longue remplie) affichait l'image
   au-dessus d'un espace vide, et le vrai texte en dessous, hors ligne.
   28/10 (suite) : flex-wrap retire de la regle de base. Avec le texte
   court seul c'etait invisible, mais la description longue (plusieurs
   phrases) a une largeur "naturelle" (sans retour a la ligne) enorme -
   flex-wrap:wrap faisait alors passer l'image a la ligne suivante meme
   quand il y avait largement la place. flex-basis:0 sur le bloc texte
   force en plus son calcul de taille a partir de zero (grow) plutot
   que de sa taille de contenu, pour eviter tout souci similaire a
   l'avenir. Le flex-direction:column du media query mobile gere deja
   le cas "pas assez de place" sur petit ecran, flex-wrap ne servait a
   rien de plus en desktop. */

.kms-manufacturer-header-row {
  display: flex;
  align-items: stretch;
  gap: 20px;
}

.kms-manufacturer-header-row .kms-manufacturer-text {
  flex: 1 1 0%;
  min-width: 200px;
}

.kms-manufacturer-promo-image {
  flex: 0 0 auto;
  align-self: stretch;
  aspect-ratio: 1 / 1;
  max-width: 220px;
}

.kms-manufacturer-promo-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

@media (max-width: 767px) {
  .kms-manufacturer-header-row {
    flex-direction: column;
  }

  .kms-manufacturer-promo-image {
    max-width: 160px;
    align-self: flex-start;
  }
}