/*--------------------------------------------------------------
19.0 Shop-Pages
--------------------------------------------------------------*/
.xyz-shop-w-master__heading {
  font-size: 18px;
  color: #333333;
  font-weight: 700;
  line-height: 20px; }

.xyz-sidebar--bg-snow {
  background-color: #f9f9f9; }

.xyz-shop-w--style {
  border: 1px solid #f1f1f1;
  background-color: #ffffff;
  box-shadow: 0 6px 15px 0 rgba(36, 37, 38, 0.08); }

.xyz-shop-w__intro-wrap {
  position: relative; }

.xyz-shop-w__h {
  font-size: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid #efefef;
  color: #333333;
  font-weight: 700;
  line-height: 20px; }

.xyz-shop-w__wrap {
  padding: 14px; }

.xyz-shop-w__toggle.xyz-collapsed:before {
  content: "\F067"; }

.xyz-shop-w__toggle {
  position: absolute;
  top: 50%;
  padding: 8px 12px;
  background-color: transparent;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 10px;
  font-size: 12px;
  cursor: pointer;
  color: #444; }

.xyz-shop-w ul {
  margin: 0;
  padding-left: 0;
  list-style: none; }

.xyz-shop-w__list {
  overflow: auto;
  max-height: 290px; }
  .xyz-shop-w__list > li {
    position: relative;
    padding: 8px 16px; }

.xyz-shop-w__list-2 {
  overflow: auto;
  max-height: 290px; }
  .xyz-shop-w__list-2 > li {
    padding: 0.25rem 0;
    position: relative; }

.xyz-list__content {
  position: relative; }
  .xyz-list__content [type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0;
    min-width: 16px;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
    cursor: pointer; }
  .xyz-list__content span {
    padding: 8px 16px;
    display: block;
    font-size: 14px;
    transition: background-color 110ms ease-in-out,color 110ms ease-in-out;
    color: #7f7f7f; }

.xyz-list__content:hover span {
  color: #333333;
  background-color: #ececec;
  border-radius: .5rem; }

.xyz-list__content input:checked + span {
  background-color: #ececec;
  color: #333333;
  border-radius: .5rem; }

.xyz-shop-w__total-text {
  font-size: 11px;
  position: absolute;
  cursor: pointer;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #333333;
  right: 13px; }

.xyz-shop-w__category-list {
  overflow: auto;
  max-height: 290px; }
  .xyz-shop-w__category-list > li {
    padding: 4px 14px; }
    .xyz-shop-w__category-list > li > a {
      font-size: 14px;
      color: #333333;
      transition: color 110ms ease-in-out; }
      .xyz-shop-w__category-list > li > a:hover {
        color: steelblue; }
    .xyz-shop-w__category-list > li ul .xyz-has-list > a {
      font-size: 13px;
      font-weight: 700;
      color: #333333; }
    .xyz-shop-w__category-list > li ul {
      display: none;
      padding-left: 8px; }
      .xyz-shop-w__category-list > li ul li a {
        font-size: 13px;
        color: #7f7f7f;
        transition: color 110ms ease-in-out; }
        .xyz-shop-w__category-list > li ul li a:hover {
          color: steelblue; }

.xyz-has-list {
  position: relative; }

.xyz-category-list__text {
  font-size: 10px;
  color: #a0a0a0; }

.xyz-js-shop-category-span {
  cursor: pointer;
  font-size: 13px;
  color: #444;
  transition: color 110ms ease-in-out; }
  .xyz-js-shop-category-span:hover {
    color: #000000; }

.xyz-js-shop-category-span.xyz-is-expanded:before {
  content: '\f068'; }

.xyz-shop-w__form-p-wrap {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 8px 0; }
  .xyz-shop-w__form-p-wrap div {
    margin-right: 8px;
    margin-bottom: 12px; }
    .xyz-shop-w__form-p-wrap div:last-child {
      margin-right: 0; }
  .xyz-shop-w__form-p-wrap .xyz-input-text, .xyz-shop-w__form-p-wrap .btn {
    height: 40px;
    padding: 8px;
    border-radius: 2px; }
  .xyz-shop-w__form-p-wrap .xyz-input-text {
    width: 80px; }
  .xyz-shop-w__form-p-wrap .btn {
    width: 40px; }

.xyz-color__check {
  position: relative;
  line-height: 1.89;
  margin-right: 36px;
  display: inline-block; }

.xyz-color__check [type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 30px;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  cursor: pointer; }

.xyz-color__check-label {
  position: initial;
  display: inline-block; }

.xyz-color__check-label:before, .xyz-color__check-label:after {
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  border: 2px solid transparent;
  z-index: 0;
  position: absolute;
  left: 0;
  top: 0; }

.xyz-color__check-label:after {
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
  background-color: inherit; }

.xyz-color__check input:checked + label:before {
  border-color: #d2d2d2; }

.xyz-rating__check {
  position: relative;
  cursor: pointer; }
  .xyz-rating__check [type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0;
    min-width: 16px;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
    cursor: pointer; }

.xyz-rating__check-star-wrap > i {
  margin-left: 2px;
  color: steelblue;
  transition: color .4s ease-in-out; }
  .xyz-rating__check-star-wrap > i:first-child {
    margin-left: 0; }

.xyz-rating__check-star-wrap span {
  font-size: 12px;
  color: #333333;
  margin-right: 2px; }

.xyz-rating__check:hover .xyz-rating__check-star-wrap > i {
  color: steelblue; }

.xyz-rating__check input:checked + .xyz-rating__check-star-wrap > i {
  color: steelblue; }

.xyz-shop-p__meta-wrap {
  box-shadow: 0 8px 16px rgba(42, 122, 226, 0.5); /* Ombre bleue */
  padding: 20px;
  border-radius: 0.625rem; /* Arrondir les coins */
}

.xyz-shop-p__meta-text-1 {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
  font-weight: 700;
  color: #333333; }

.xyz-shop-p__meta-text-2 {
  font-size: 14px;
  font-weight: 700;
  color: #7f7f7f; }

.xyz-shop-p__tool-style {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between; }

.xyz-tool-style__group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .xyz-tool-style__group span {
    position: relative;
    display: inline-block;
    height: 40px;
    cursor: pointer;
    border: 2px solid #e5e5e5;
    font-size: 13px;
    padding: 8px 18px;
    font-weight: 700;
    color: #333333; }
    .xyz-tool-style__group span:hover {
      background-color: lightsteelblue;
      color: steelblue;
      border-color: steelblue;
      z-index: 2; }
  .xyz-tool-style__group span:not(:last-child) {
    margin-right: -2px; }
  .xyz-tool-style__group span.xyz-is-active {
    background-color: lightsteelblue;
    color: steelblue;
    border-color: steelblue;
    z-index: 2; }

.xyz-tool-style__form-wrap {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center; }
  .xyz-tool-style__form-wrap div + div {
    margin-left: 15px; }
  .xyz-tool-style__form-wrap select {
    border-radius: .25rem; }

.xyz-is-grid-active .xyz-product-m {
  position: relative;
  margin-bottom: 30px;
  transition: 0.3s; }
  .xyz-is-grid-active .xyz-product-m__thumb {
    position: relative; }
  .xyz-is-grid-active .xyz-product-m__add-cart {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s; }
    .xyz-is-grid-active .xyz-product-m__add-cart > a {
      padding: 12px;
      border-radius: 0.125rem;
      font-size: 13px;
      width: 100%;
      text-align: center;
      display: block; }
 
  .xyz-is-grid-active .xyz-product-m__content {
    padding: 4px 16px 6px; }
  .xyz-is-grid-active .xyz-product-m__category {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin: 5px 0;
    padding: 8px 12px;
}

.xyz-product-m__category a {
    font-size: 16px;
    color: #2c5282;
    text-decoration: none;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 20px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.xyz-product-m__category a:hover {
    color: #ffffff;
    transform: translateY(-2px);
    background-color: #2a7ae2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-weight: bold;
}
    line-height: 1.2; }
    .xyz-is-grid-active .xyz-product-m__category > a {
      color: #a0a0a0;
      transition: color 0.5s;
      font-size: 12px; }
      .xyz-is-grid-active .xyz-product-m__category > a:hover {
        color: steelblue; }
  .xyz-product-m__name {
    margin: 5px 0;
    text-align: center;
}

.xyz-product-m__name a.xyz-product-name {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #2d2d2d;
    transition: color 0.3s ease;
    margin-bottom: 8px;
    display: block;
}

.xyz-product-m__name a.xyz-product-name:hover {
    color: #007bff;
}

.xyz-product-name-indicator {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #6c757d;
}
  .xyz-is-grid-active .xyz-product-m__price {
    line-height: 1.2;
    color: #ff0000;
    font-size: 14px;
    font-weight: 600; }
  .xyz-is-grid-active .xyz-product-m__discount {
    font-weight: 600;
    margin-left: 30px;
    color: steelblue;
    font-size: 14px;
    text-decoration: line-through; }
  .xyz-is-grid-active .xyz-product-m__rating {
    margin-bottom: 6px; }
    .xyz-is-grid-active .xyz-product-m__rating i {
      font-size: 12px; }
  .xyz-is-grid-active .xyz-product-m__review {
    margin-left: 4px;
    font-size: 11px;
    color: #a0a0a0; }
  .xyz-is-grid-active .xyz-product-m__hover {
    position: absolute;
    top: 96%;
    width: 100%;
    z-index: 9;
    padding: 4px 16px 14px;
    left: 0;
    background: #ffffff;
    box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.2);
    transition: all 300ms ease-in-out;
    opacity: 0;
    visibility: hidden; }
  .xyz-is-grid-active .xyz-product-m__wishlist {
    text-align: right; }
    .xyz-is-grid-active .xyz-product-m__wishlist a {
      font-size: 16px;
      color: #a0a0a0;
      transition: color 110ms ease-in-out; }
      .xyz-is-grid-active .xyz-product-m__wishlist a:hover {
        color: steelblue; }
  .xyz-is-grid-active .xyz-product-m__preview-description {
    margin-bottom: 8px;
    font-size: 12px;
    color: #7f7f7f; }

.xyz-is-grid-active .xyz-product-m:hover {
   }
  .xyz-is-grid-active .xyz-product-m:hover .xyz-product-m__add-cart {
    opacity: 1;
    visibility: visible; }
  .xyz-is-grid-active .xyz-product-m:hover .xyz-product-m__quick-look {
    opacity: 1;
    visibility: visible; }
  .xyz-is-grid-active .xyz-product-m:hover .xyz-product-m__hover {
    top: 99%;
    opacity: 1;
    visibility: visible; }

.xyz-is-list-active {
  display: block; }
  .xyz-is-list-active [class*="col-"] {
    display: block;
    max-width: 100%;
    width: 100%; }

.xyz-shop-a__wrap {
  position: fixed;
  top: 0;
  width: 350px;
  min-height: 100vh;
  bottom: 0;
  z-index: 9999;
  right: 0;
  transition: all 400ms ease-out;
  -webkit-transform: translate(200px, 0);
          transform: translate(200px, 0);
  box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.09);
  background-color: #ffffff;
  visibility: hidden;
  opacity: 0; }

.xyz-shop-a__inner {
  overflow: auto;
  height: 100%;
  padding: 1.25rem 1.125rem; }

.xyz-shop-a.xyz-is-open .xyz-shop-a__wrap {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  visibility: visible;
  opacity: 1; }

[data-name] {
    position: relative;
}

[data-name]::after {
    content: attr(data-name);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

[data-name]:hover::after {
    opacity: 1;
}

@media (max-width: 575px) {
  .xyz-is-list-active .xyz-product-m__thumb {
    margin-bottom: 30px;
    -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    max-width: 100%; }
  .xyz-is-list-active .xyz-product-m__content {
    -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    max-width: 100%; }
  .xyz-is-list-active .xyz-product-m__wishlist {
    position: static;
    text-align: right; }
  .xyz-shop-p__tool-style {
    display: block; }
  .xyz-tool-style__form-wrap {
    display: block; }
    .xyz-tool-style__form-wrap div + div {
      margin-left: 0; } }

/* Styles pour le conteneur des produits en mode liste */
.xyz-is-list-active .xyz-products-container {
  display: block; /* Affichage en bloc pour les produits en mode liste */
  position: relative; /* Positionner le zoom à l'intérieur */
  overflow: hidden; /* Empêcher le débordement du contenu */
}

/* Styles pour les produits en mode liste */
.xyz-is-list-active .xyz-product-m {
  padding: 15px 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
              0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: 550px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
  overflow: auto; /* Défilement activé */
}

/* Personnalisation de la barre de défilement pour Webkit (Chrome, Safari) */
.xyz-is-list-active .xyz-product-m::-webkit-scrollbar {
  width: 12px; /* Largeur de la barre de défilement */
}

.xyz-is-list-active .xyz-product-m::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Couleur de fond de la piste */
  border-radius: 10px; /* Coins arrondis de la piste */
}

.xyz-is-list-active .xyz-product-m::-webkit-scrollbar-thumb {
  background-color: #007bff; /* Couleur du pouce de la barre de défilement */
  border-radius: 10px; /* Coins arrondis du pouce */
  border: 2px solid #f1f1f1; /* Bordure autour du pouce */
}

.xyz-is-list-active .xyz-product-m::-webkit-scrollbar-thumb:hover {
  background-color: #0056b3; /* Couleur du pouce au survol */
}

/* Personnalisation pour Firefox */
.xyz-is-list-active .xyz-product-m {
  scrollbar-width: thin; /* Définir la taille de la barre de défilement sur mince */
  scrollbar-color: #007bff #f1f1f1; /* Couleur du pouce et de la piste */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Au survol, ajouter une ombre épaisse autour des bordures et un effet de zoom */
.xyz-is-list-active .xyz-product-m:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
              0 8px 16px rgba(0, 0, 0, 0.2); /* Ombre épaisse autour des produits */
  transform: scale(1.03); /* Légère augmentation de la taille du conteneur */
  background: #ffffff;
  border-radius: 0.1875rem;
}

/* Styles pour les images du produit en mode liste */
.xyz-is-list-active .xyz-product-m__thumb {
  position: relative;
    -ms-flex: 0 0 40%;
        flex: 0 0 40%;
    max-width: 40%;
    padding: 0 10px 0 15px;
    box-sizing: border-box;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 400px;
    height: auto;
    margin: 0 15px 0 25px;
  }

.xyz-is-list-active .xyz-product-image {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: 100%;
  object-fit: contain;
  margin: 0 auto;
  display: block;
  transition: opacity 0.3s ease;
  padding: 0 5px 10px 5px;
  box-sizing: border-box;
}

.xyz-is-list-active .xyz-product-image-second-hover {
  position: absolute; /* Positionner l'image seconde au-dessus de la première */
  top: 50%; /* Positionne le haut de l'image au centre vertical du conteneur */
  left: 50%; /* Positionne le côté gauche de l'image au centre horizontal du conteneur */
  width: 100%; /* Occuper toute la largeur du conteneur */
  height: 100%; /* Ajustement de la hauteur au conteneur */
  object-fit: contain; /* Adapter l'image sans rognage */
  opacity: 0; /* Cachée par défaut */
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out, filter 0.6s ease-in-out; /* Transition plus longue et fluide */
  pointer-events: none; /* Empêcher les événements de souris sur cette image */
  transform: translate(-50%, -50%) scale(1.05); /* Centre l'image et ajoute un léger zoom */
  filter: blur(2px); /* Ajoute un léger flou initial */
}

/* Au survol, afficher la seconde image et cacher la première */
.xyz-is-list-active .xyz-product-m:hover .xyz-product-image {
  opacity: 0; /* Cacher la première image */
}

.xyz-is-list-active .xyz-product-m:hover .xyz-product-image-second-hover {
  opacity: 1; /* Afficher la seconde image */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* S'assurer que l'image reste centré */
  filter: blur(0); /* Supprime le flou pour un effet de mise au point */
  object-fit: contain; /* Adapter l'image dans le conteneur sans déformation */
}

/* Conteneur de produit non interactif lorsque le zoom est visible */
.xyz-is-list-active .xyz-zoom-container.xyz-show ~ .xyz-products-container {
    pointer-events: none; /* Désactiver les événements de souris */
}

/* Assurez-vous que le conteneur de zoom est toujours au-dessus */
.xyz-is-list-active .xyz-zoom-container {
    pointer-events: auto; /* Activer les événements de souris pour le conteneur de zoom */
}

.xyz-is-list-active .xyz-products-container {
    pointer-events: auto; /* Réactiver les événements de souris pour les conteneurs de produits */
}

/* ZOOM POUR MODE LISTE */

/* Conteneur de zoom en mode liste */
.xyz-is-list-active .xyz-zoom-container {
    display: none; /* Masqué par défaut */
    position: fixed; /* Positionnement fixe pour couvrir toute la fenêtre */
    top: 0;
    left: 0;
    width: 71vw; /* Largeur de la fenêtre */
    height: 67.7vh; /* Hauteur de la fenêtre */
    background-color: rgba(0, 0, 0, 0.8); /* Fond noir semi-transparent */
    z-index: 9999; /* Assurez-vous que c'est au-dessus de tous les autres éléments */
    justify-content: center; /* Centrer le contenu horizontalement */
    align-items: center; /* Centrer le contenu verticalement */
    overflow: hidden; /* Masquer tout dépassement */
    transition: opacity 0.3s ease; /* Transition douce pour l'opacité */
  border: 1px solid #ddd; /* Bordure gris clair autour des produits */
    border-radius: 8px; /* Coins légèrement arrondis */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
              0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre autour des produits */
}

/* Assurez-vous que les autres produits ne sont pas interactifs lorsque le zoom est affiché */
.xyz-is-list-active .xyz-products-container.xyz-no-interact {
    pointer-events: none; /* Désactiver les événements de souris pour les autres produits */
}

/* Conteneur de zoom lorsqu'il est affiché */
.xyz-is-list-active .xyz-zoom-container.xyz-show {
    display: flex; /* Afficher le conteneur en mode flex */
    opacity: 1; /* Assurez-vous que le conteneur est complètement visible */
    pointer-events: auto; /* Assurez-vous que les événements de souris sont activés pour le conteneur de zoom */
  visibility: visible; /* Assurez-vous que le conteneur est visible */
}

/* Class to disable interactions */
.xyz-product-m.xyz-no-interact {
    pointer-events: none; /* Désactiver les événements de souris */
}

/* Images dans le conteneur de zoom */
.xyz-is-list-active .xyz-zoom-container .xyz-zoom-image-wrapper {
    position: relative;
    width: 90vw; /* Largeur maximale de l'image */
    height: 90vh; /* Hauteur maximale de l'image */
}

.xyz-is-list-active .xyz-zoom-container .xyz-zoomed-image,
.xyz-is-list-active .xyz-zoom-container .xyz-zoomed-image-2 {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Adapter l'image sans déformation */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85); /* Centrer et agrandir légèrement l'image */
}

/* Bouton de fermeture */
.xyz-is-list-active .xyz-zoom-close {
    position: absolute;
    top: 20px;
    right: 40px;
    background-color: #fff; /* Fond blanc */
    border: none;
    font-size: 24px;
    cursor: pointer;
    z-index: 10001; /* Assurez-vous qu'il est au-dessus de l'image */
}

/* Boutons de navigation */
.xyz-is-list-active .xyz-zoom-button {
    color: white;
    cursor: pointer;
    font-size: 36px; /* Taille des boutons de navigation */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10001; /* Assurez-vous qu'ils sont au-dessus de l'image */
}

.xyz-is-list-active .xyz-preview-button {
    left: 20px; /* Position à gauche */
}

.xyz-is-list-active .xyz-next-button {
    right: 40px; /* Position à droite */
}

/* Assurez-vous que les conteneurs des produits ne sont pas interactifs lorsque le zoom est visible */
.xyz-is-list-active .xyz-products-container {
    pointer-events: none; /* Désactiver les événements de souris */
}

/* Styles pour le bouton "quick look" */
/* Style général pour le bouton "quick look" en vue liste */
.xyz-is-list-active .xyz-product-m__quick-look {
  position: absolute;
  top: 8px;
  right: 22px;
  opacity: 0; /* Cacher par défaut */
  visibility: hidden; /* Cacher par défaut */
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.8); /* Fond blanc avec opacité */
  padding: 5px;
  border-radius: 50%; /* Bouton en cercle */
  cursor: pointer;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease;
  transform: scale(0.9); /* Légèrement réduit au départ */
}

/* Style spécifique pour le bouton "quick look" dans la vue liste au survol */
.xyz-is-list-active .xyz-product-m:hover .xyz-product-m__quick-look {
  opacity: 1; /* Rendre visible au survol */
  visibility: visible; /* Rendre visible au survol */
  transform: scale(1); /* Retour à la taille normale */
  opacity: 1;
  visibility: visible;
}

/* Style de l'icône dans le bouton "quick look" */
.xyz-is-list-active .xyz-product-m__quick-look .xyz-quick-look-trigger {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #2a7ae2; /* Bleu primaire */
  border-radius: 50%; /* Forme de cercle */
  color: white; /* Couleur de l'icône */
  font-size: 18px;
  text-align: center;
  line-height: 40px; /* Centrer verticalement */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombre */
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Effet au survol pour l'icône */
.xyz-is-list-active .xyz-product-m__quick-look .xyz-quick-look-trigger:hover {
  background-color: #1e5bb6; /* Bleu plus foncé au survol */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Ombre plus grande */
  transform: scale(1.1); /* Zoom léger */
}

/* Style du lien dans le bouton "quick look" */
.xyz-is-list-active .xyz-product-m__quick-look > a {
  font-size: 16px; /* Taille de police de 16px */
  color: #2a7ae2; /* Bleu primaire */
  transition: color 0.3s ease-in-out; /* Transition de couleur lors du survol */
}

/* Style du lien dans le bouton "quick look" au survol */
.xyz-is-list-active .xyz-product-m__quick-look > a:hover {
  color: #fa4400; /* Couleur du texte au survol */
}

/* Style pour le contenu du produit */
.xyz-is-list-active .xyz-product-m__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px; /* Ajouter de la marge intérieure pour une meilleure présentation */
  border: 1px solid #e0e0e0; /* Bordure légère pour délimiter le conteneur */
  border-radius: 8px; /* Coins arrondis pour un look moderne */
  background-color: #fff; /* Fond blanc pour contraster avec le produit */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère pour ajouter de la profondeur */
   position: relative;
    -ms-flex: 0 0 66.66667%;
        flex: 0 0 66.66667%;
    max-width: 66.66667%;
    padding: 0 15px;
    box-sizing: border-box;
}

/* Style du bouton d'ajout au panier */
.xyz-is-list-active .xyz-product-m__add-cart {
  transition: transform 0.3s ease, background-color 0.3s ease;
  transform: translate(15%, 0%); /* Centre le bouton avec l'élément parent */
  position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

/* Style du lien à l'intérieur du bouton d'ajout au panier */
.xyz-is-list-active .xyz-product-m__add-cart > a {
  padding: 12px 20px;
  border-radius: 4px; /* Coins légèrement arrondis */
  font-size: 16px;
  background-color: #2a7ae2; /* Couleur de fond moderne */
  color: #fff; /* Texte en blanc */
  text-decoration: none;
  display: inline-block;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre légère pour un effet de profondeur */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.xyz-is-list-active .xyz-product-m__add-cart > a:hover {
  background-color: #1a5ab9; /* Couleur plus foncée au survol */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre plus marquée au survol */
}

.xyz-is-list-active .xyz-product-m:hover .xyz-product-m__add-cart {
    opacity: 1;
    visibility: visible; }

/* Style de la catégorie du produit */
.xyz-is-list-active .xyz-product-m__category {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
    padding: 8px 12px;
}

.xyz-is-list-active .xyz-product-m__category a {
    font-size: 16px;
    color: #2c5282;
    text-decoration: none;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 20px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.xyz-is-list-active .xyz-product-m__category a:hover {
    color: #1a365d;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  margin-bottom: 12px; /* Espacement inférieur accru pour une meilleure aération */
  font-size: 14px;
  color: #6c757d; /* Couleur subtile gris-bleu pour un effet moderne */
  text-transform: uppercase; /* Texte en majuscules pour un style plus impactant */
  letter-spacing: 0.5px; /* Espacement des lettres pour améliorer la lisibilité */
}

/* Style du lien de la catégorie */
.xyz-is-list-active .xyz-product-m__category > a {
  color: steelblue; /* Couleur bleu-cyan pour un effet vibrant */
  font-weight: 600; /* Semi-gras pour rendre le lien plus attractif */
  transition: color 0.3s ease, text-decoration 0.3s ease;
  text-decoration: none; /* Supprimer la sous-ligne par défaut */
}

/* Style du lien de catégorie au survol */
.xyz-is-list-active .xyz-product-m__category > a:hover {
  color: #138496; /* Couleur plus foncée au survol pour un contraste agréable */
  text-decoration: underline; /* Sous-ligne pour indiquer le survol */
}

/* Style du nom du produit */
.xyz-is-list-active .xyz-product-m__name > a {
  font-size: 22px; /* Taille de police augmentée pour plus de présence */
  font-weight: 700; /* Texte en gras pour attirer l'attention sur le nom du produit */
  color: #2c3e50; /* Couleur plus foncée et élégante */
  transition: color 0.3s ease, transform 0.3s ease; /* Transition douce avec effet de zoom */
  text-transform: capitalize; /* Première lettre en majuscule pour un effet premium */
  transform-origin: center; /* Fixe l'origine de la transformation au centre */
  display: inline-block; /* Permet au lien d'être traité comme un bloc en ligne */
  letter-spacing: 0.5px; /* Espacement des lettres amélioré */
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Polices modernes */
  text-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Ombre de texte subtile */
}

/* Style du nom du produit au survol */
.xyz-is-list-active .xyz-product-m__name > a:hover {
  color: #007bff; /* Bleu vif au survol pour un effet moderne */
  transform: scale(1.05); /* Léger zoom au survol pour attirer l'attention, sans déplacement */
}

/* Style du prix du produit */
.xyz-is-list-active .xyz-product-m__price {
  font-size: 20px; /* Taille de police plus grande pour plus de visibilité */
  color: #ff4500; /* Couleur orange-rouge vibrante pour le prix */
  font-weight: 700;
  letter-spacing: 0.8px; /* Espacement des lettres pour un effet plus défini */
}

/* Style du prix réduit ou de la remise */
.xyz-is-list-active .xyz-product-m__discount {
  font-size: 16px; /* Légèrement plus grand pour plus de lisibilité */
  color: #6c757d; /* Couleur gris-bleu plus claire pour la remise */
  text-decoration: line-through; /* Prix barré pour indiquer la remise */
  margin-left: 8px; /* Espace entre le prix réduit et le prix original */
}

/* Ajouter des styles pour des badges promotionnels (optionnel) */
.xyz-is-list-active .xyz-product-m__badge {
  background-color: #28a745; /* Vert vif pour une promotion ou nouveauté */
  color: white; /* Texte blanc pour un bon contraste */
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px; /* Bords arrondis pour un effet moderne */
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 10px;
}

/* Variables spécifiques à la description du produit */
.xyz-product-m__preview-description {
  --primary-color: #007bff; /* Couleur principale pour cette section */
  --text-color: #444; /* Couleur du texte pour cette section */
  --bg-color: #f9f9f9; /* Couleur de fond pour cette section */
  --border-radius: 12px; /* Arrondi des coins pour cette section */
  --font-family-primary: 'Roboto', sans-serif; /* Police principale pour cette section */
  --font-size-default: 16px; /* Taille de police par défaut pour cette section */
}

/* Style général de la description du produit */
.xyz-product-m__preview-description {
  font-family: var(--font-family-primary);
  color: var(--text-color);
  font-size: var(--font-size-default);
  line-height: 1.8;
  padding: 20px;
  background-color: var(--bg-color);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.xyz-product-m__preview-description:hover {
  background-color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Accentuation de certains mots ou phrases */
.xyz-product-m__preview-description .xyz-highlight {
  color: var(--primary-color);
  font-weight: 700;
}

/* Force l'affichage des balises br dans les descriptions de produits */
.xyz-product-m__preview-description br {
  display: block !important;
  height: 10px !important;
  margin: 5px 0 !important;
  visibility: visible !important;
}

/* Règle ultra-spécifique pour les br après les titres de section */
.xyz-product-m__preview-description .xyz-section-title + br {
  display: block !important;
  height: 10px !important;
  line-height: 10px !important;
  margin: 5px 0 !important;
}

/* Règle de sécurité pour empêcher le masquage des br */
.xyz-product-m .xyz-product-m__hover .xyz-product-m__preview-description br {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  margin: 5px 0 !important;
}

/* Règle générale pour tous les br dans les descriptions */
.xyz-product-m__preview-description * br {
  display: block !important;
}

/* Titres de sections */
.xyz-product-m__preview-description .xyz-section-title {
  font-size: 15px; /* Taille de la police pour le titre */
  font-family: 'Helvetica', sans-serif; /* Choix de la police, ici Helvetica, vous pouvez choisir une autre police */
  font-weight: 700; /* Poids de la police pour rendre le texte en gras */
  color: #005EC4; /* Couleur du texte */
  margin: 5px auto; /* Espacement au-dessus du titre et centrage automatique */
  text-align: center; /* Centre le texte */
  text-transform: uppercase; /* Met le texte en majuscules */
  border-bottom: 2px solid var(--primary-color); /* Ligne en dessous du titre pour souligner */
  padding-bottom: 3px; /* Espacement en dessous de la ligne */
  line-height: 1.4; /* Ajuste la hauteur de ligne pour les retours à la ligne */
  letter-spacing: 1px; /* Espacement entre les lettres pour un style plus espacé */
  width: 90%; /* Largeur réduite pour un meilleur rendu */
  word-wrap: break-word; /* Retour à la ligne automatique */
  white-space: normal; /* Permet les retours à la ligne */
  hyphens: auto; /* Active la césure automatique avec trait d'union */
  -webkit-hyphens: auto; /* Pour Safari */
  -ms-hyphens: auto; /* Pour IE/Edge */
  overflow-wrap: break-word; /* Force les mots longs à se couper */
}

/* Sous-titres avec puce personnalisée */
.xyz-product-m__preview-description .xyz-section-subtitle {
  font-size: 16px; /* Taille de police pour les sous-titres */
  font-weight: 700; /* Gras pour mettre en avant le texte */
  color: #333; /* Couleur du texte */
  margin: 20px auto 5px auto; /* Espacement et centrage automatique */
  position: relative;
  padding-left: 25px; /* Espacement pour l'icône */
  line-height: 1.4; /* Ajuste la hauteur de ligne pour les retours à la ligne */
  text-align: center; /* Centre le texte */
  word-wrap: break-word; /* Retour à la ligne automatique */
  white-space: normal; /* Permet les retours à la ligne */
  width: 90%; /* Largeur réduite pour un meilleur rendu */
  hyphens: auto; /* Active la césure automatique avec trait d'union */
  -webkit-hyphens: auto; /* Pour Safari */
  -ms-hyphens: auto; /* Pour IE/Edge */
  overflow-wrap: break-word; /* Force les mots longs à se couper */
}

.xyz-product-m__preview-description .xyz-section-subtitle::before {
  content: '➤'; /* Puce pour les sous-titres */
  position: absolute;
  left: 0; /* Position de la puce */
  color: #007bff; /* Couleur de la puce des sous-titres */
  font-size: 20px; /* Taille de la puce */
}

/* Liste des caractéristiques du produit */
.xyz-product-m__preview-description .xyz-features-list {
  list-style: none; /* Suppression des puces par défaut */
  padding-left: 0; /* Suppression de l'espacement de la liste */
  margin: 5px auto; /* Espace au-dessus de la liste et centrage automatique */
  line-height: 1.4; /* Ajuste la hauteur de ligne pour les retours à la ligne */
  text-align: center; /* Centre le texte */
  word-wrap: break-word; /* Retour à la ligne automatique */
  white-space: normal; /* Permet les retours à la ligne */
  width: 90%; /* Largeur réduite pour un meilleur rendu */
}

/* Titres de catégories dans la liste des caractéristiques */
.xyz-product-m__preview-description .xyz-features-list > li {
  font-weight: 700; /* En gras pour les sous-éléments */
  position: relative;
  margin-bottom: 12px; /* Espace entre chaque élément */
  color: var(--text-color);
  padding-left: 25px; /* Espacement pour la puce */
  text-align: center; /* Centre le texte de chaque élément de liste */
  word-wrap: break-word; /* Retour à la ligne automatique */
  white-space: normal; /* Permet les retours à la ligne */
  hyphens: auto; /* Active la césure automatique avec trait d'union */
  -webkit-hyphens: auto; /* Pour Safari */
  -ms-hyphens: auto; /* Pour IE/Edge */
  overflow-wrap: break-word; /* Force les mots longs à se couper */
}

.xyz-product-m__preview-description .xyz-features-list > li::before {
  content: '•'; /* Puce pour les caractéristiques */
  position: absolute;
  left: 0;
  color: var(--primary-color); /* Couleur de la puce des caractéristiques */
  font-size: 18px; /* Taille de l'icône pour les caractéristiques */
}

/* Liste du contenu de la boîte */
.xyz-product-m__preview-description .xyz-box-content {
  margin-top: 10px;
  padding-left: 20px;
  list-style: none; /* Suppression des puces classiques */
}

.xyz-product-m__preview-description .xyz-box-content li {
  position: relative;
  padding-left: 10px;
  margin-bottom: 8px;
}

.xyz-product-m__preview-description .xyz-box-content li::before {
  content: '✓'; /* Icône pour chaque élément de la boîte */
  position: absolute;
  left: 0;
  top: 0;
  font-size: 18px;
}

/* Style général du bouton de la liste de souhaits */
.xyz-is-list-active .xyz-product-m__wishlist a {
  font-size: 16px;
  color: #333333; /* Couleur du texte sobre */
  text-decoration: none; /* Suppression du soulignement */
  display: inline-flex; /* Pour aligner le texte avec l'icône */
  align-items: center; /* Centrer verticalement */
  padding: 8px 16px; /* Espacement intérieur confortable */
  border: 2px solid transparent; /* Bordure transparente par défaut */
  border-radius: 8px; /* Coins arrondis pour un effet moderne */
  background-color: #f9f9f9; /* Fond léger et épuré */
  transition: all 0.4s ease; /* Transition fluide pour tous les changements */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Ombre douce pour l'effet de bouton flottant */
}

.xyz-is-list-active .xyz-product-m__wishlist a::before {
  content: '♡'; /* Icône de cÅ"ur avant le texte */
  font-size: 18px;
  color: steelblue; /* Icône colorée */
  margin-right: 8px; /* Espacement entre l'icône et le texte */
  transition: transform 0.4s ease; /* Animation de l'icône au survol */
}

/* Effet au survol du bouton de la liste de souhaits */
.xyz-is-list-active .xyz-product-m__wishlist a:hover {
  color: #fff; /* Couleur du texte blanche au survol */
  background-color: steelblue; /* Fond coloré au survol */
  background-color: #2a7ae2; /* Couleur de fond moderne */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); /* Ombre plus marquée au survol */
}

.xyz-is-list-active .xyz-product-m__wishlist a:hover::before {
  transform: scale(1.2); /* Agrandir légèrement l'icône au survol */
  color: #fff; /* Changer la couleur de l'icône au survol */
}

/* Style de la pagination */
.xyz-shop-p__pagination {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.xyz-shop-p__pagination > li {
  margin-right: 10px;
}

.xyz-shop-p__pagination > li:last-child {
  margin-right: 0;
}

.xyz-shop-p__pagination > li > a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  text-align: center;
  display: block;
  font-weight: 600;
  border-radius: 50%;
  background-color: #f0f0f0; /* Couleur de fond gris clair */
  color: #333; /* Couleur du texte */
  transition: background-color 0.3s ease, color 0.3s ease;
  text-decoration: none;
}

.xyz-shop-p__pagination > li.xyz-is-active > a {
  background-color: #007bff; /* Bleu vif pour l'élément actif */
  color: #fff; /* Couleur du texte blanc pour l'élément actif */
}

.xyz-shop-p__pagination > li:not(.xyz-is-active) > a:hover {
  background-color: #e0e0e0; /* Gris clair au survol */
  color: #007bff; /* Bleu vif au survol */
  text-decoration: none;
}

/* Style pour le bouton de pagination avec une icône */
.xyz-shop-p__pagination > li > a.fas {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 16px; /* Taille de la police pour l'icône */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: #007bff; /* Couleur des icônes */
}

.xyz-shop-p__pagination > li > a.fas:hover {
  color: #0056b3; /* Couleur plus foncée pour les icônes au survol */
}

.xyz-shop-a__wrap {
  position: fixed;
  top: 0;
  width: 350px;
  min-height: 100vh;
  bottom: 0;
  z-index: 9999;
  right: 0;
  transition: all 400ms ease-out;
  -webkit-transform: translate(200px, 0);
          transform: translate(200px, 0);
  box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.09);
  background-color: #ffffff;
  visibility: hidden;
  opacity: 0;
}

.xyz-shop-a__inner {
  overflow: auto;
  height: 100%;
  padding: 1.25rem 1.125rem;
}

.xyz-shop.xyz-is-open .xyz-shop-a__wrap {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  visibility: visible;
  opacity: 1;
}

[data-name] {
    position: relative;
}

[data-name]::after {
    content: attr(data-name);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

[data-name]:hover::after {
    opacity: 1;
}

@media (max-width: 575px) {
  .xyz-is-list-active .xyz-product-m__thumb {
    margin-bottom: 30px;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .xyz-is-list-active .xyz-product-m__content {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .xyz-is-list-active .xyz-product-m__wishlist {
    position: static;
    text-align: right;
  }
  .xyz-shop-p__tool-style {
    display: block;
  }
  .xyz-tool-style__form-wrap {
    display: block;
  }
  .xyz-tool-style__form-wrap div + div {
    margin-left: 0;
  }
}

/* FIN MODE LISTE*/

/* CONTENEUR POUR PRODUIT */

.xyz-popular-title {
  font-size: 18px; /* Taille de police */
  line-height: 46px; /* Hauteur de ligne */
  margin-bottom: 10px; /* Espace en bas du titre */
  font-weight: bold; /* Mettre le texte en gras */
  color: #333; /* Couleur du texte, ajustez si nécessaire */
}

.xyz-popular-title:hover {
    color: blue; /* Couleur au survol (ajuster selon vos besoins) */
}

/* Conteneur des produits en mode grille */
.xyz-is-grid-active .xyz-products-container {
  display: grid; /* Utilisation de CSS Grid pour organiser les éléments en grille */
  grid-template-columns: repeat(4, 1fr); /* Création de 4 colonnes de largeur égale */
  gap: 20px; /* Espacement de 20px entre les éléments de la grille */
}

/* Styles pour les produits en mode grille */
.xyz-is-grid-active .xyz-product-m {
  border: 0.5px solid #fff; /* Bordure blanche autour des produits */
  border-radius: 8px; /* Coins légèrement arrondis */
  box-shadow:
    0 -2px 4px rgba(42, 122, 226, 0.5), /* Ombre bleue au-dessus des produits */
    0 4px 8px rgba(42, 122, 226, 0.5); /* Ombre bleue en dessous des produits */
  /* Style des éléments produits ici */
  /* Vous pouvez ajouter des propriétés spécifiques pour le style des produits */
}

/* Style de l'élément au survol du produit */
.xyz-is-grid-active .xyz-product-m__hover {
  position: absolute; /* Positionnement absolu pour le placement spécifique */
  top: 97%; /* Ajustement à 97% pour ne pas recouvrir le haut */
  width: 100%; /* Largeur à 100% du conteneur */
  z-index: 11; /* Augmenter le z-index à 11 pour être au-dessus du bouton "quick look" */
  padding: 4px 16px 14px; /* Rembourrage autour du contenu */
  left: 0; /* Positionnement à 0px du côté gauche */
  background: #ffffff; /* Fond blanc pour l'élément au survol */
  box-shadow: 0 0 12px rgba(42, 122, 226, 0.8); /* Ombre bleue uniquement */
  transition: all 300ms ease-in-out; /* Transition pour les changements d'état */
  opacity: 0; /* Opacité initiale à 0 pour être caché */
  visibility: hidden; /* Visibilité initiale cachée */
}

/* Style de l'élément au survol dans la vue grille */
.xyz-is-grid-active .xyz-product-m:hover .xyz-product-m__hover {
  top: 98%; /* Ajustement à 98% pour plus de marge */
  opacity: 1; /* Opacité à 1 pour être complètement visible */
  visibility: visible; /* Visibilité à visible */
  background-color: #ffffff; /* Fond totalement opaque */
  z-index: 11; /* Assurer que l'élément est au-dessus des autres */
  /* Même ajustement ici pour n'avoir que l'ombre en dessous */
  box-shadow: 0 4px 12px rgba(42, 122, 226, 0.8); /* Ombre bleue uniquement en dessous */
  transition: top 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, box-shadow 0.3s ease; /* Transition fluide */
}

/* Style du produit au survol dans la vue grille */
.xyz-is-grid-active .xyz-product-m:hover {
  /* Ajuster ici aussi pour garder l'ombre uniquement en dessous */
  box-shadow: 0 4px 15px 0 rgba(42, 122, 226, 0.8); /* Ombre bleue uniquement en dessous */
}

/* Style de la wishlist */
.xyz-is-grid-active .xyz-product-m__wishlist {
  text-align: right; /* Alignement du texte à droite */
}

/* Style du lien dans la wishlist */
.xyz-is-grid-active .xyz-product-m__wishlist a {
  font-size: 16px; /* Taille de police de 16px */
  color: #a0a0a0; /* Couleur du texte */
  transition: color 110ms ease-in-out; /* Transition de couleur lors du survol */
}

/* Style du lien dans la wishlist au survol */
.xyz-is-grid-active .xyz-product-m__wishlist a:hover {
  color: steelblue; /* Couleur du texte au survol */
}

/* Style de la description du produit dans la vue grille */
.xyz-is-grid-active .xyz-product-m__preview-description {
  margin-bottom: 8px; /* Marge inférieure pour espacer la description */
  font-size: 12px; /* Taille de police de 12px */
  color: #7f7f7f; /* Couleur du texte de la description */
}

/* Style de la vignette du produit */
.xyz-is-grid-active .xyz-product-m__thumb {
  position: relative; /* Positionnement relatif pour les éléments enfants */
}

/* Style du bouton d'ajout au panier */
.xyz-is-grid-active .xyz-product-m__add-cart {
  position: absolute; /* Positionnement absolu pour le positionnement spécifique */
  bottom: 15px; /* Positionnement à 15px du bas */
  left: 15px; /* Positionnement à 15px du côté gauche */
  right: 15px; /* Positionnement à 15px du côté droit */
  opacity: 0; /* Opacité initiale à 0 pour être caché */
  visibility: hidden; /* Visibilité initiale cachée */
  transition: 0.3s; /* Transition pour l'affichage du bouton */
}

/* Style du lien à l'intérieur du bouton d'ajout au panier */
.xyz-is-grid-active .xyz-product-m__add-cart > a {
  padding: 12px; /* Rembourrage de 12px autour du texte */
  border-radius: 0.125rem; /* Coins arrondis du bouton */
  font-size: 13px; /* Taille de police de 13px */
  width: 100%; /* Largeur à 100% du conteneur */
  text-align: center; /* Alignement du texte au centre */
  display: block; /* Affichage en bloc pour occuper toute la largeur */
}

/* Style du contenu du produit */
.xyz-is-grid-active .xyz-product-m__content {
  padding: 4px 16px 6px; /* Rembourrage autour du contenu */
}

/* Style de la catégorie du produit */
.xyz-is-grid-active .xyz-product-m__category {
  margin-bottom: 2px; /* Marge inférieure pour l'espacement entre les éléments */
  line-height: 1.2; /* Hauteur de ligne pour l'espacement vertical */
}

/* Style du lien de la catégorie */
.xyz-is-grid-active .xyz-product-m__category > a {
  color: #a0a0a0; /* Couleur du texte */
  transition: color 0.5s; /* Transition de couleur lors du survol */
  font-size: 12px; /* Taille de police de 12px */
}

/* Style du lien de catégorie au survol */
.xyz-is-grid-active .xyz-product-m__category > a:hover {
  color: steelblue; /* Couleur du texte au survol */
}

/* Style du nom du produit */
.xyz-is-grid-active .xyz-product-m__name > a {
  color: #333333; /* Couleur du texte */
  font-size: 14px; /* Taille de police de 14px */
  font-weight: 600; /* Poids de police pour rendre le texte gras */
  transition: color 0.5s; /* Transition de couleur lors du survol */
}

/* Style du nom du produit au survol */
.xyz-is-grid-active .xyz-product-m__name > a:hover {
  color: steelblue; /* Couleur du texte au survol */
}

/* Style du prix du produit */
.xyz-is-grid-active .xyz-product-m__price {
  line-height: 1.2; /* Hauteur de ligne pour l'espacement vertical */
  color: #ff0000; /* Couleur du texte pour le prix */
  font-size: 14px; /* Taille de police de 14px */
  font-weight: 600; /* Poids de police pour rendre le texte gras */
}

/* Style du prix réduit ou de la remise */
.xyz-is-grid-active .xyz-product-m__discount {
  font-weight: 600; /* Poids de police pour rendre le texte gras */
  margin-left: 30px; /* Marge gauche pour espacer la remise du prix */
  color: steelblue; /* Couleur du texte pour la remise */
  font-size: 14px; /* Taille de police de 14px */
  text-decoration: line-through; /* Texte barré pour indiquer une remise */
}

/* Style de la note du produit */
.xyz-is-grid-active .xyz-product-m__rating {
  margin-bottom: 6px; /* Marge inférieure pour espacer les notes */
}

/* Style des étoiles de la note */
.xyz-is-grid-active .xyz-product-m__rating i {
  font-size: 12px; /* Taille de police des étoiles */
}

/* Style des avis du produit */
.xyz-is-grid-active .xyz-product-m__review {
  margin-left: 4px; /* Marge gauche pour espacer les avis */
  font-size: 11px; /* Taille de police des avis */
  color: #a0a0a0; /* Couleur du texte des avis */
}

/* Style du bouton d'ajout au panier au survol */
.xyz-is-grid-active .xyz-product-m:hover .xyz-product-m__add-cart {
  opacity: 1; /* Opacité à 1 pour être visible */
  visibility: visible; /* Visibilité à visible */
}

/* Style du bouton "quick look" au survol */
.xyz-is-grid-active .xyz-product-m:hover .xyz-product-m__quick-look {
  opacity: 1; /* Opacité à 1 pour être visible */
  visibility: visible; /* Visibilité à visible */
}

/* Style général pour le bouton "quick look" */
.xyz-is-grid-active .xyz-product-m__quick-look {
  position: absolute;
  top: 8px;
  right: 22px;
  opacity: 0; /* Cacher par défaut */
  visibility: hidden; /* Cacher par défaut */
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.8); /* Fond blanc avec opacité */
  padding: 5px;
  border-radius: 50%; /* Bouton en cercle */
  cursor: pointer;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease;
  transform: scale(0.9); /* Légèrement réduit au départ */
}

/* Style spécifique pour le bouton "quick look" dans la vue grille */
.xyz-is-grid-active .xyz-product-m:hover .xyz-product-m__quick-look {
  opacity: 1; /* Rendre visible au survol */
  visibility: visible; /* Rendre visible au survol */
  transform: scale(1); /* Retour à la taille normale */
}

/* Style de l'icône dans le bouton "quick look" */
.xyz-is-grid-active .xyz-product-m__quick-look .xyz-quick-look-trigger {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #2a7ae2; /* Bleu primaire */; /* Couleur de fond */
  border-radius: 50%; /* Forme de cercle */
  color: white; /* Couleur de l'icône */
  font-size: 18px;
  text-align: center;
  line-height: 40px; /* Centrer verticalement */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombre */
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Effet au survol pour l'icône */
.xyz-is-grid-active .xyz-product-m__quick-look .xyz-quick-look-trigger:hover {
  background-color: #1e5bb6; /* Bleu plus foncé au survol */
  border-color: #1e5bb6; /* Bordure bleue plus foncée */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Ombre plus grande */
  transform: scale(1.1); /* Zoom léger */
}

/* Style du lien dans le bouton "quick look" */
.xyz-is-grid-active .xyz-product-m__quick-look > a {
  font-size: 16px; /* Taille de police de 16px */
  color: #2a7ae2; /* Bleu primaire */;
  transition: color 110ms ease-in-out; /* Transition de couleur lors du survol */
}

/* Style du lien dans le bouton "quick look" au survol */
.xyz-is-grid-active .xyz-product-m__quick-look > a:hover {
  color: #fa4400; /* Couleur du texte au survol */
}

/* Style pour .xyz-is-grid-active avec des images plus petites */
.xyz-is-grid-active .xyz-image-wrapper {
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 250px; /* Largeur fixe augmentée pour le conteneur */
    height: 250px; /* Hauteur fixe augmentée pour le conteneur */
    overflow: hidden; /* Cache le débordement des images */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    box-sizing: border-box;
    border-radius: 12px; /* Coins arrondis */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Ombre douce */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Effet au survol du conteneur d'image */
.xyz-is-grid-active .xyz-product-m:hover .xyz-image-wrapper {
    transform: translateY(-5px); /* Léger effet de flottement */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Ombre plus prononcée */
}

/* Styles des images */
.xyz-is-grid-active .xyz-image-wrapper img {
    display: block;
    position: absolute; /* Permet aux images d'être superposées */
    top: 50%;
    left: 42.5%;
    transform: translate(-50%, -50%); /* Centre chaque image */
    width: 80%; /* Images légèrement plus petites que le conteneur */
    height: auto; /* Maintient les proportions des images */
    opacity: 0; /* Cache toutes les images au départ */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease; /* Transition pour l'opacité et transformation */
    border-radius: 8px; /* Coins légèrement arrondis */
    object-fit: contain; /* S'assure que l'image entière est visible */
}

/* Image active */
.xyz-is-grid-active .xyz-image-wrapper img.xyz-active {
    opacity: 1; /* Affiche l'image active */
    transform: translate(-50%, -50%) scale(1.05); /* Léger zoom sur l'image active */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Ombre légère */
    animation: pulse 2s infinite ease-in-out; /* Animation subtile de pulsation */
}

@keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(1.05); }
    50% { transform: translate(-50%, -50%) scale(1.02); }
    100% { transform: translate(-50%, -50%) scale(1.05); }
}

/* Assurez-vous que les autres images ne sont pas visibles */
.xyz-is-grid-active .xyz-image-wrapper img:not(.xyz-active) {
    z-index: 0; /* Assure que les images non actives restent derrière */
}

/* Styles pour le produit par défaut */
.xyz-is-grid-active .xyz-product-image.xyz-default {
    z-index: 1; /* Image par défaut au-dessus */
}

/* Style pour le nom du produit */
.xyz-product-name {
    position: relative;
    z-index: 2;
    font-size: 18px;
    color: #2c3e50;
    text-align: center;
    margin: 5px 0;
    padding: 0px 5px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(233,240,250,0.5), rgba(255,255,255,0));
    border-radius: 5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

/* Les survols peuvent être enlevés pour le carrousel */
.xyz-is-grid-active .xyz-image-wrapper:hover .xyz-product-image.xyz-default {
    opacity: 0; /* Cela ne devrait pas être nécessaire pour le carrousel */
}

.xyz-is-grid-active .xyz-image-wrapper:hover .xyz-product-image-second-hover {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Indicateurs de navigation pour les images */
.xyz-product-name-indicator {
    display: flex;
    justify-content: center;
    margin-top: 0px;
    margin-bottom: 5px;
    gap: 6px;
}

.xyz-indicator-dot {
    width: 8px;
    height: 8px;
    background-color: #ccc;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Style pour l'indicateur actif qui sera activé par JS */
.xyz-indicator-dot.xyz-active {
    background-color: #2c85ff;
    transform: scale(1.2);
}

/* ZOOM EN MODE GRILLE */
/* Masquer le conteneur de zoom par défaut pour le mode grille */
.xyz-is-grid-active .xyz-zoom-container {
    display: none; /* Par défaut, le conteneur est caché */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    overflow: hidden;
}

.xyz-is-grid-active .xyz-zoomed-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.2);
}

/* Afficher le conteneur de zoom lorsqu'il a la classe 'xyz-show' */
.xyz-is-grid-active .xyz-zoom-container.xyz-show {
    display: flex; /* Afficher en mode flex lors du clic */
}

.xyz-is-grid-active .xyz-zoom-close {
    position: absolute;
    top: 10px;
    right: 20px;
    background-color: #fff;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1001; /* Assurez-vous que le bouton est au-dessus de l'image */
}

/* Boutons pour naviguer entre les images */
.xyz-is-grid-active .xyz-zoom-button {
    color: white;
    cursor: pointer;
    font-size: 1.5rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
}

.xyz-is-grid-active .xyz-preview-button {
    left: 10px;
}

.xyz-is-grid-active .xyz-next-button {
    right: 20px;
}
/* FIN DE ZOOM EN MODE GRILLE */

/* FIN CONTENEUR POUR PRODUIT */

/*--------------------------------------------------------------
20.0 Vendor Extension Pages
--------------------------------------------------------------*/
/*--------------------------------------------------------------
20.1 Bootstrap
--------------------------------------------------------------*/
/* Modal styles */
.modal {
  z-index: 999999; }

.modal-content {
  display: block !important;
  border: none;
  border-radius: 0; }

.modal--radius {
  border-radius: 8px; }

.modal--shadow {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); }

/* Tootip styles */
.tooltip {
  font-family: "Open Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600; }

.tooltip.xyz-show {
  opacity: 1; }

.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: #f5f5f5; }

.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: #f5f5f5; }

.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: #f5f5f5; }

.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: #f5f5f5; }

.tooltip-inner {
  color: #333333;
  background-color: #f5f5f5;
  border-radius: 2px; }

@media (max-width: 991px) {
  .tooltip.xyz-show {
    opacity: 0; } }

/* CONTENEUR POUR PRODUIT */

/* Conteneur des produits en mode grille */
.xyz-is-grid-active .xyz-products-container {
  display: grid; /* Utilisation de CSS Grid pour organiser les éléments en grille */
  grid-template-columns: repeat(4, 1fr); /* Création de 4 colonnes de largeur égale */
  gap: 20px; /* Espacement de 20px entre les éléments de la grille */
  max-width: 900px; /* Largeur maximale du conteneur à 900px */
  margin: 0 auto; /* Centrer le conteneur */
}

/* Styles pour les produits en mode grille */
.xyz-is-grid-active .xyz-product-m {
  border: 0.5px solid #fff; /* Bordure blanche autour des produits */
  border-radius: 8px; /* Coins légèrement arrondis */
  box-shadow:
    0 -2px 4px rgba(42, 122, 226, 0.5), /* Ombre bleue au-dessus des produits */
    0 4px 8px rgba(42, 122, 226, 0.5); /* Ombre bleue en dessous des produits */
  position: relative; /* Pour le positionnement des éléments enfants */
}

/* Style de l'élément au survol du produit */
.xyz-is-grid-active .xyz-product-m__hover {
  position: absolute; /* Positionnement absolu pour le placement spécifique */
  top: 97%; /* Ajustement à 97% pour ne pas recouvrir le haut */
  width: 100%; /* Largeur à 100% du conteneur */
  z-index: 11; /* Augmenter le z-index à 11 pour être au-dessus du bouton "quick look" */
  padding: 4px 16px 14px; /* Rembourrage autour du contenu */
  left: 0; /* Positionnement à 0px du côté gauche */
  background: #ffffff; /* Fond blanc pour l'élément au survol */
  box-shadow: 0 0 12px rgba(42, 122, 226, 0.8); /* Ombre bleue uniquement */
  transition: all 300ms ease-in-out; /* Transition pour les changements d'état */
  opacity: 0; /* Opacité initiale à 0 pour être caché */
  visibility: hidden; /* Visibilité initiale cachée */
}

/* Style de l'élément au survol dans la vue grille */
.xyz-is-grid-active .xyz-product-m:hover .xyz-product-m__hover {
  top: 98%; /* Ajustement à 98% pour plus de marge */
  opacity: 1; /* Opacité à 1 pour être complètement visible */
  visibility: visible; /* Visibilité à visible */
  background-color: #ffffff; /* Fond totalement opaque */
  z-index: 11; /* Assurer que l'élément est au-dessus des autres */
  box-shadow: 0 4px 12px rgba(42, 122, 226, 0.8); /* Ombre bleue uniquement en dessous */
  transition: top 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, box-shadow 0.3s ease; /* Transition fluide */
}

/* Style du produit au survol dans la vue grille */
.xyz-is-grid-active .xyz-product-m:hover {
  box-shadow: 0 4px 15px 0 rgba(42, 122, 226, 0.8); /* Ombre bleue uniquement en dessous */
}

/* Style de la wishlist */
.xyz-is-grid-active .xyz-product-m__wishlist {
  text-align: right; /* Alignement du texte à droite */
}

/* Style du lien dans la wishlist */
.xyz-is-grid-active .xyz-product-m__wishlist a {
  font-size: 16px; /* Taille de police de 16px */
  color: #a0a0a0; /* Couleur du texte */
  transition: color 110ms ease-in-out; /* Transition de couleur lors du survol */
}

/* Style du lien dans la wishlist au survol */
.xyz-is-grid-active .xyz-product-m__wishlist a:hover {
  color: steelblue; /* Couleur du texte au survol */
}

/* Style de la description du produit dans la vue grille */
.xyz-is-grid-active .xyz-product-m__preview-description {
  margin-bottom: 8px; /* Marge inférieure pour espacer la description */
  font-size: 12px; /* Taille de police de 12px */
  color: #7f7f7f; /* Couleur du texte de la description */
}

/* Style de la vignette du produit */
.xyz-is-grid-active .xyz-product-m__thumb {
  position: relative; /* Positionnement relatif pour les éléments enfants */
}

/* Style du bouton d'ajout au panier */
.xyz-is-grid-active .xyz-product-m__add-cart {
  position: absolute;
  bottom: 15px;
  left: 15px;
  right: 15px;
  display: flex; /* Utilisation de Flexbox */
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
  opacity: 0; /* Opacité initiale à 0 pour être caché */
  visibility: hidden; /* Visibilité initiale cachée */
  transition: 0.3s; /* Transition pour l'affichage du bouton */
}

/* Style du lien à l'intérieur du bouton d'ajout au panier */
.xyz-is-grid-active .xyz-product-m__add-cart > a {
  padding: 12px; /* Rembourrage de 12px autour du texte */
  border-radius: 0.125rem; /* Coins arrondis du bouton */
  font-size: 13px; /* Taille de police de 13px */
  width: 100%; /* Largeur à 100% du conteneur */
  text-align: center; /* Alignement du texte au centre */
  display: block; /* Affichage en bloc pour occuper toute la largeur */
}

/* Style du contenu du produit */
.xyz-is-grid-active .xyz-product-m__content {
  padding: 4px 16px 6px; /* Rembourrage autour du contenu */
}

/* Style de la catégorie du produit */
.xyz-is-grid-active .xyz-product-m__category {
  margin-bottom: 2px; /* Marge inférieure pour l'espacement entre les éléments */
  line-height: 1.2; /* Hauteur de ligne pour l'espacement vertical */
}

/* Style du lien de la catégorie */
.xyz-is-grid-active .xyz-product-m__category > a {
  color: #a0a0a0; /* Couleur du texte */
  transition: color 0.5s; /* Transition de couleur lors du survol */
  font-size: 12px; /* Taille de police de 12px */
}

/* Style du lien de catégorie au survol */
.xyz-is-grid-active .xyz-product-m__category > a:hover {
  color: steelblue; /* Couleur du texte au survol */
}

/* Style du nom du produit */
.xyz-is-grid-active .xyz-product-m__name > a {
  color: steelblue; /* Couleur du texte */
  font-size: 14px; /* Taille de police de 14px */
  font-weight: 600; /* Poids de police pour rendre le texte gras */
  transition: color 0.5s; /* Transition de couleur lors du survol */
}

/* Style du nom du produit au survol */
.xyz-is-grid-active .xyz-product-m__name > a:hover {
  color: #007bff; /* Couleur du texte au survol */
}

/* Style du prix du produit */
.xyz-is-grid-active .xyz-product-m__price {
  line-height: 1.2; /* Hauteur de ligne pour l'espacement vertical */
  color: #ff0000; /* Couleur du texte pour le prix */
  font-size: 14px; /* Taille de police de 14px */
  font-weight: 600; /* Poids de police pour rendre le texte gras */
}

/* Style du prix réduit ou de la remise */
.xyz-is-grid-active .xyz-product-m__discount {
  font-weight: 600; /* Poids de police pour rendre le texte gras */
  margin-left: 30px; /* Marge gauche pour espacer la remise du prix */
  color: steelblue; /* Couleur du texte pour la remise */
  font-size: 14px; /* Taille de police de 14px */
  text-decoration: line-through; /* Texte barré pour indiquer une remise */
}

/* Style de la note du produit */
.xyz-is-grid-active .xyz-product-m__rating {
  margin-bottom: 6px; /* Marge inférieure pour espacer les notes */
}

/* Style des étoiles de la note */
.xyz-is-grid-active .xyz-product-m__rating i {
  font-size: 12px; /* Taille de police des étoiles */
}

/* Style des avis du produit */
.xyz-is-grid-active .xyz-product-m__review {
  margin-left: 4px; /* Marge gauche pour espacer les avis */
  font-size: 11px; /* Taille de police des avis */
  color: #a0a0a0; /* Couleur du texte des avis */
}

/* Style du bouton d'ajout au panier au survol */
.xyz-is-grid-active .xyz-product-m:hover .xyz-product-m__add-cart {
  opacity: 1; /* Opacité à 1 pour rendre visible */
  visibility: visible; /* Visibilité à visible */
  transition: opacity 0.3s ease; /* Transition de la visibilité */
}

.xyz-product-m__thumb {
    position: relative; /* Positionne le conteneur relativement pour les éléments positionnés absolument */
    overflow: hidden; /* Cache les parties qui dépassent du conteneur */
}

.xyz-promo-label {
    position: absolute;
    top: 5PX; /* Positionné tout en haut */
    left: -25px; /* Positionné tout à gauche */
    background-color: #ff5050; /* Couleur de fond de l'étiquette */
    color: #fff; /* Couleur du texte */
    padding: 5px 25px; /* Espacement interne */
    font-size: 12px; /* Taille de la police */
    font-weight: bold; /* Texte en gras */
    transform: rotate(-40deg); /* Rotation oblique */
    z-index: 10; /* Pour s'assurer qu'elle soit au-dessus des autres éléments */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Ombre pour un effet visuel */
}

/* Styles pour le bouton Découvrir dans la section des produits les plus populaires */
.xyz-btn-decouvrir-plus-populaires {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.xyz-btn-decouvrir-plus-populaires:hover {
  background-color: #0069d9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.xyz-btn-text {
  font-weight: bold;
}