/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

body {
  background-color: #ffffff !important;
}


main {
  background-color: #ffffff !important;
}

.product-title {
  display: block;
  width: 400px !important;
  white-space: normal;
  white-space: normal;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}


.thumbnail-top {
  width: 100% !important;
}

.product-title {
  width: 100% !important;
}

main,
#main,
.page,
.page-content,
#wrapper,
#content {
  background-color: #ffffff !important;
}



a {
    color: #2fb5d2;
    background-color: #ffffff !important;
}

.product-title,
.product-price-and-shipping {
  text-align: center !important;
}
.quick-view,
.js-quick-view {
  display: none !important;
}
@media (min-width: 992px) {
    .product-miniature {
        /* flex: 0 0 33.33333%; */
        /* max-width: 33.33333%; */
    } } 


@media (min-width: 992px) {
    .layout-full-width .product-miniature {
flex: 0 0 95%!important;
max-width: 95%!important;
    }
}
.carousel-caption {
  left: 50%;
  transform: translateX(-50%);
  bottom: auto; /* supprime l'alignement bas */
  top: 50%; /* centre verticalement si souhaité, sinon retire cette ligne */
  transform: translate(-50%, -50%); /* centre parfaitement si top:50% est activé */
  background: none !important; /* supprime le fond noir */
  text-align: center; /* centre le texte horizontalement */
}

.homeslider .caption {
  display: block;
  position: absolute;
  z-index: 2;
  font-size: 1em;
  text-shadow: none;
  color: #000;
  background: none;

  /* Position horizontale à 10% du côté gauche */
  left: 5%;

  /* Centrage vertical */
  top: 50%;
  transform: translateY(-50%);

  /* Largeur de la zone texte */
  width: 35%;

  /* Alignement du texte à gauche */
  text-align: left;

  padding: 10px 20px 90px 20px;
  margin: 0;
  max-width: none;
}
@media (max-width: 767px) {
  .homeslider-container {
    display: none !important;
  }
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  flex: 0 0 auto; /* garde la largeur du logo naturelle */
}

#_desktop_top_menu {
  margin-left: auto;
}


.header__menu {
  margin-left: auto;
}

.category-cover img {
  max-height: 400px; /* selon ton design */
  object-fit: cover;
  width: 100%;
}
/* Zone description sous miniature produit */
.product-miniature .product-description {
  width: 85%;
  margin: 0 auto; /* centre le bloc sous l'image */
  text-align: left; /* ou center si tu préfères */
}

/* Centrage du prix sous la description */
.product-miniature .product-price-and-shipping {
  text-align: center;
}
/* Étend la description à 85% de la miniature produit */
.product-miniature .product-description {
  width: 85%;
  margin: 0 auto; /* centre horizontalement */
}

/* Centre le texte à l'intérieur de la description */
.product-miniature .product-description h2,
.product-miniature .product-description .product-price-and-shipping {
  text-align: center;
}

/* Facultatif : si le prix doit absolument être centré, même si d'autres règles l'empêchent */
.product-miniature .product-price-and-shipping .price {
  display: block;
  text-align: center;
}
.category-cover {
  width: 100%;
}

/* Étendre la zone de description produit à 85% et centrer */
.product-miniature .product-description {
  width: 85%;
  margin: 0 auto; /* centre horizontalement */
  text-align: center; /* centre le texte à l'intérieur */
}

/* Facultatif : si le prix n'est pas centré malgré tout */
.product-miniature .product-price-and-shipping {
  text-align: center;
}

/* S'assurer que l'image conserve sa taille pleine */
.product-miniature .thumbnail-top img {
  display: block;
  margin: 0 auto;
  width: 100%;
}

/* Si l'élément parent utilise flex et limite la largeur, débloquer si besoin */
@media (min-width: 992px) {
  .product-miniature {
    max-width: 100%;
  }
}
@media (max-width: 767.98px) {
  .product-miniature {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 767.98px) {
  .product-miniature .thumbnail-container {
    padding: 0 10px; /* Ajuste à ton design */
  }
}
@media (max-width: 767.98px) {
  .products {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .product-miniature {
    flex: 0 0 50%;
    max-width: 50%;
    text-align: center;
  }
}