/* Container and Grid Styles */
.container {
  margin-top: 20px;
}

.product-images {
  display: flex;
  flex-direction: column;
}

.main-image {
  margin-bottom: 10px;
}

.main-image img {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.thumbnail-images {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
}

.thumbnail-img {
  width: 80px;
  height: 80px;
  margin-right: 5px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: border-color 0.3s;
}

.thumbnail-img:hover {
  border-color: #e68a00;
}

/* Product Details Styles */
.product-details {
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.product-title {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.product-pricing {
  margin-bottom: 10px;
}

.price {
  font-size: 1.5rem;
  color: #e68a00;
}

.wholesale-price {
  font-size: 1.2rem;
  color: #555;
}

.product-location {
  margin-bottom: 10px;
}

.product-location i {
  color: #e68a00;
}

.form-group {
  margin-bottom: 15px;
}

.btn-primary {
  background-color: #ff9900;
  border: 1px solid #ff9900;
  color: white;
  font-size: 16px;
  font-weight: bold;
  border-radius: 30px;
  width: 300px;
  height: 45px;
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s, box-shadow 0.3s;
}

.btn-primary:hover {
  background-color: #cc6a00;
  border-color: #cc6a00;
}

/* Seller Info Styles */
.seller-info {
  margin-top: 20px;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.seller-details {
  display: flex;
  align-items: center;
}

.seller-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 15px;
}

.seller-text p {
  margin: 0;
}

.seller-text i {
  color: #e68a00;
}

/* Shipping Info Styles */
/* .shipping-info {
     margin-top: 20px;
     padding: 15px;
     background-color: #fff;
     border: 1px solid #ddd;
     border-radius: 5px;
 }

 .shipping-info ul {
     list-style-type: none;
     padding: 0;
 }

 .shipping-info li {
     display: flex;
     align-items: center;
     margin-bottom: 10px;
 }

 .shipping-info i {
     color: #e68a00;
     margin-right: 10px;
 } */

/* Social Share Styles */
.social-share {
  margin-top: 20px;
}

.social-share .btn {
  display: inline-block;
  margin-right: 10px;
  font-size: 1rem;
  color: #fff;
  border-radius: 5px;
  padding: 10px 15px;
}

.btn-facebook {
  background-color: #3b5998;
}

.btn-twitter {
  background-color: #1da1f2;
}

.btn-whatsapp {
  background-color: #25d366;
}

.product-description h2 {
  margin-top: 0;
}

.product-title {
  font-size: 2rem;
  /* Taille du titre sur les grands écrans */
  font-weight: bold;
  color: #333;
  margin: 0;
  padding: 0;
  text-align: left;
  margin-bottom: 15px;
}

.product-pricing {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 15px;
}

.price {
  font-size: 1.5rem;
  /* Taille du prix unitaire */
  font-weight: bold;
  color: #e68a00;
  /* Couleur d'accentuation */
  margin-right: 20px;
}

.wholesale-price {
  font-size: 1.2rem;
  /* Taille du prix de gros */
  color: #555;
}

.product-location {
  display: flex;
  align-items: center;
  font-size: 1rem;
  color: #333;
}

.product-location i {
  font-size: 1.2rem;
  /* Taille de l'icône */
  color: #007bff;
  margin-right: 8px;
}

.product-location span {
  font-size: 1rem;
  margin-left: 5px;
}

/* Media Query pour les écrans plus petits */
@media (max-width: 767px) {
  .product-title {
    font-size: 1.5rem;
    /* Taille réduite pour les petits écrans */
  }

  .product-pricing {
    flex-direction: column;
    /* Colonne pour une meilleure disposition sur mobile */
    align-items: flex-start;
  }

  .price {
    font-size: 1.25rem;
    margin-right: 0;
    margin-bottom: 10px;
    /* Ajouter de l'espace sous le prix */
  }

  .wholesale-price {
    font-size: 1rem;
  }
}

.product-location {
  display: flex;
  align-items: center;
  font-size: 1rem;
  color: #333;
}

.product-location i {
  font-size: 1.5rem;
  /* Taille de l'icône */
  color: #007bff;
  /* Couleur de l'icône */
  margin-right: 10px;
  /* Espacement entre l'icône et le texte */
}

.product-location span {
  font-size: 1rem;
}

.product-pricing {
  display: flex;
  align-items: center;
  font-size: 1rem;
  color: #333;
  margin-bottom: 15px;
}

.product-pricing .price {
  font-size: 1.5rem;
  font-weight: bold;
  color: #e67e22;
  /* Couleur pour le prix */
  margin-right: 15px;
}

.product-pricing .wholesale-price {
  font-size: 1rem;
  color: #888;
  /* Couleur pour le prix de gros */
}

.product-details {
  font-size: 0.875rem;
  color: #333;
  margin-bottom: 20px;
}

.product-details p {
  margin: 0 0 10px;
}

.price-info {
  color: #555;
}

.delivery-info {
  color: #007bff;
  /* Couleur pour les informations de livraison */
}

.delivery-address {
  color: #333;
}

.stock-info {
  font-weight: bold;
  color: #28a745;
  /* Couleur pour le stock */
}

strong {
  font-weight: bold;
}

.delivery-address {
  font-size: 16px;
  color: #333;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
  display: flex;
  align-items: center;
}

.delivery-address strong {
  color: #ff9900;
  font-weight: 700;
  margin-left: 5px;
}

.delivery-address::before {
  content: "\f3c5";
  /* Icône de localisation (utilisation de FontAwesome) */
  font-family: "FontAwesome";
  font-size: 18px;
  color: #ff9900;
  margin-right: 10px;
}

.payment-methods,
.delivery-agencies {
  margin-bottom: 10px;
}

.payment-methods h6,
.delivery-agencies h6 {
  margin: 0 0 10px;
  font-weight: bold;
}

.payment-methods ul,
.delivery-agencies ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.payment-methods li,
.delivery-agencies li {
  background: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.payment-methods i,
.delivery-agencies i {
  color: #007bff;
  margin-right: 10px;
}

.btn-success,
.btn-chat {
  display: inline-block;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

.btn-success {
  background-color: #f39c12;
  border-color: #f39c12;
}

.btn-success:hover {
  background-color: #e68a00;
}

.btn-chat {
  background-color: #007bff;
  border-color: #007bff;
  margin-top: 10px;
}

.btn-chat:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
}

hr {
  border: 1px solid #e0e0e0;
  margin: 10px 0;
}

.product-price {
  font-size: 24px;
  font-weight: bold;
  color: #ff9900;
  /* Couleur du prix */
  margin: 10px 0;
  display: inline-flex;
  align-items: baseline;
}

.price-currency {
  font-size: 18px;
  margin-right: 4px;
}

.price-amount {
  font-size: 24px;
  /* Taille du montant */
  line-height: 1;
  /* Évite l'espace supplémentaire entre les lignes */
}

.thumbnail-img {
  width: 100px;
  /* Ajustez la taille selon vos besoins */
  cursor: pointer;
  margin: 5px;
  border: 2px solid transparent;
}

.thumbnail-img:hover {
  opacity: 0.7;
}

.thumbnail-img.selected {
  border-color: #ff9900;
  /* Couleur de la bordure pour l'image sélectionnée */
}

/* Styles for the popup container */
.unique-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  background-color: #fff;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: none;
  /* Hidden by default; will be shown by JavaScript */
}

/* Styles for the popup header */
.unique-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #ddd;
  background-color: #f8f9fa;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.unique-popup-header h5 {
  margin: 0;
  font-size: 1.25rem;
}

.unique-popup-close {
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
  transition: color 0.3s;
}

.unique-popup-close:hover {
  color: #ff0000;
}

/* Styles for the popup body */
.unique-popup-body {
  padding: 15px;
}

.order-details p {
  margin: 0 0 10px;
  font-size: 1rem;
}

.order-details strong {
  color: #333;
}

.delivery-agencies {
  margin: 10px 0;
}

.delivery-agencies h6 {
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.delivery-agencies ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.delivery-agencies li {
  margin-bottom: 5px;
  font-size: 0.9rem;
}

.delivery-agencies i {
  color: #007bff;
  margin-right: 5px;
}

.styled-link:hover {
  background-color: #ff9900;
}

.order-details {
  text-align: left;
  /* Aligner le texte à gauche */
  padding: 10px;
  /* Ajouter un peu de padding pour l'espace autour du texte */
}

.order-details p {
  margin: 0;
  font-size: 1.5rem;
  color: #ff9900;
  font-weight: 700;
}

.unit-price {
  color: #ff9900;
}

.min-order {
  font-size: 1.25rem;
  /* Ajuste la taille du texte selon les besoins */
  color: #333;
  /* Couleur du texte */
  background-color: #f8f9fa;
  /* Couleur de fond pour faire ressortir le texte */
  padding: 10px;
  /* Espacement interne */
  border: 1px solid #ddd;
  /* Bordure légère autour du texte */
  border-radius: 5px;
  /* Coins arrondis */
  display: inline-block;
  /* Pour éviter que le fond ne s'étende sur toute la largeur */
  margin: 10px 0;
  /* Espacement autour du texte */
}

.hidden-radio {
  display: none;
}

.size-radio {
  display: inline-block;
  margin: 5px;
}

.size-label {
  padding: 5px 10px;
  /* border: 1px solid #ddd; */
  /* border-radius: 5px; */
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}

.size-radio input[type="radio"]:checked + .size-label {
  background-color: #007bff;
  border-color: #007bff;
  color: #fff;
}

.hidden-radio {
  display: none;
}

.color-radio {
  display: inline-block;
  margin: 5px;
}

.color-image {
  width: 50px;
  height: 50px;
  border: 1px solid #ddd;
  border-radius: 50%;
  cursor: pointer;
  transition: filter 0.3s, border-color 0.3s;
}

.color-radio input[type="radio"]:checked + label .color-image {
  filter: brightness(1.2);
  border: 2px solid #007bff;
}

.stock-info {
  font-size: 1rem;
  /* Taille du texte */
  color: #28a745;
  /* Couleur du texte, verte pour indiquer que le produit est en stock */
  font-weight: bold;
  /* Texte en gras */
  display: flex;
  /* Aligner l'icône et le texte horizontalement */
  align-items: center;
  /* Centrer verticalement l'icône avec le texte */
}

.stock-info .fa-check-circle {
  margin-right: 8px;
  /* Espace entre l'icône et le texte */
  font-size: 1.2rem;
  /* Taille de l'icône */
  color: #28a745;
  /* Couleur de l'icône */
}

/* Popup Styles */
.unique-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #ddd;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  max-height: 80vh;
  overflow-y: auto;
  z-index: 9999;
}

.unique-popup-header {
  padding: 15px;
  background: #131921;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.unique-popup-body {
  padding: 15px;
}

.unique-popup-close {
  font-size: 24px;
  cursor: pointer;
}

/* Popup Color Styling */
.popup-color {
  margin-bottom: 15px;
}

.popup-color img {
  border: 1px solid #ddd;
  border-radius: 50%;
  padding: 2px;
}

/* Popup Size Styling */
.popup-size {
  margin-bottom: 0;
  font-size: 0px;
  font-weight: bold;
}

.size-radio {
  margin-bottom: 5px;
}

.size-radio input[type="radio"] {
  display: none;
}

.size-radio label {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  margin-right: 5px;
  font-size: 14px;
}

.size-radio input:checked + label {
  background-color: #ff9900;
  color: white;
  border-color: #ff9900;
}

.size-radio input:focus + label {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
}

.popup-size strong {
  display: block;
  margin-bottom: 5px;
  color: #ff9900;
}

.popup-size .size-value {
  font-size: 1.3rem;
  /* Taille de la police pour la valeur de taille */
  font-weight: bold;
  /* Mettre en gras */
  color: #ff9900;
  /* Couleur pour la valeur de taille */
  padding: 5px;
  /* Espacement autour du texte */
  border: 1px solid #007bff;
  /* Bordure autour de la valeur */
  border-radius: 4px;
  /* Coins arrondis */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Ombre légère */
  display: inline-block;
  /* Pour s'assurer que les styles sont appliqués correctement */
}

/**********************************************************************************************************/

/* Styles globaux */
.container-adastra {
  padding: 20px;
  margin-top: 10px;
  background-color: #f1f8f4;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
}

.adastra-reviews-container,
#adastra-popup-modal {
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.adastra-reviews-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.adastra-comment {
  padding: 15px;
  margin-bottom: 20px;
  background-color: #fafafa;
  border-radius: 6px;
  border-left: 4px solid #ff9900;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s;
}

.adastra-comment:hover {
  background-color: #e6f7f5;
}

.adastra-comment-header,
.adastra-form-label {
  display: flex;
  align-items: center;
}

.adastra-comment-header i,
.adastra-form-label i {
  color: #ff9900;
  margin-right: 8px;
}

.adastra-comment-header strong,
.adastra-popup-header h2,
.avis-title,
.comment-title {
  color: #333;
}

.adastra-comment p,
.adastra-popup-message p {
  margin: 0;
  color: #555;
  font-size: 1em;
  line-height: 1.5;
}

#adastra-close-popup,
.adastra-submit-button {
  background-color: #ff9900;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#adastra-close-popup:hover,
.adastra-submit-button:hover {
  background-color: #005e6b;
}

.adastra-review-form {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
}

.adastra-form-group {
  margin-bottom: 20px;
}

.adastra-form-label {
  font-size: 1.1em;
  margin-bottom: 5px;
}

.adastra-form-input,
#adastra-review-form input[type="text"],
#adastra-review-form select,
#adastra-review-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #cccccc;
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 1em;
  transition: border-color 0.3s;
}

.adastra-form-input:focus,
#adastra-review-form input:focus,
#adastra-review-form select:focus,
#adastra-review-form textarea:focus {
  border-color: #ff9900;
  outline: none;
}

#adastra-loading {
  text-align: center;
  display: none;
  font-size: 1.2em;
  color: #ff9900;
}

.adastra-spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left: 4px solid #ff9900;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#adastra-no-more-reviews {
  text-align: center;
  font-size: 1.2em;
  color: #999999;
  display: none;
}

#adastra-popup-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  z-index: 1001;
  max-width: 400px;
  width: 80%;
}

#adastra-overlay,
.adastra-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

@media screen and (max-width: 768px) {
  .adastra-comment {
    padding: 10px;
  }
  .adastra-comment-header strong,
  .adastra-form-label {
    font-size: 1em;
  }
  .adastra-form-input,
  .adastra-submit-button {
    font-size: 0.9em;
    padding: 10px;
  }
}

@media screen and (max-width: 480px) {
  .container-adastra {
    padding: 10px;
  }
  .adastra-reviews-container {
    padding: 15px;
  }
  .adastra-comment {
    padding: 8px;
  }
  .adastra-comment-header strong,
  .adastra-form-label {
    font-size: 0.9em;
  }
  .adastra-form-input,
  .adastra-submit-button {
    font-size: 0.8em;
    padding: 8px;
  }
  .adastra-popup-modal {
    width: 90%;
    padding: 15px;
    top: 25%;
  }
}

/* Styles pour la barre de défilement */
.thumbnail-images::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.thumbnail-images::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.thumbnail-images::-webkit-scrollbar-thumb {
  background: #131921;
  border-radius: 10px;
  transition: background 0.3s;
}

.thumbnail-images::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Style pour le modal */
.softadastra-modal {
  display: none;
  /* Masquer le modal par défaut */
  position: fixed;
  z-index: 1050;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  /* Fond semi-transparent */
}

.softadastra-modal-content {
  background-color: #fff;
  margin: 5% auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 500px;
}

.softadastra-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.softadastra-modal-title {
  font-size: 1.25rem;
  color: #333;
}

.softadastra-modal-header .softadastra-close {
  font-size: 1.5rem;
  font-weight: bold;
  color: #999;
  border: none;
  background: none;
  cursor: pointer;
}

.softadastra-modal-header .softadastra-close:hover {
  color: #000;
}

.softadastra-modal-body {
  padding: 20px 0;
  font-size: 1rem;
  color: #333;
}

.softadastra-alert-icon {
  font-size: 1.5rem;
  color: #ff5a5f;
  margin-right: 10px;
}

.softadastra-modal-footer {
  border-top: 1px solid #ddd;
  padding-top: 10px;
  text-align: right;
}

.softadastra-modal-footer .softadastra-btn {
  background-color: #ff5a5f;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1rem;
}

.softadastra-modal-footer .softadastra-btn:hover {
  background-color: #e14b50;
}
.adastra-comment-date {
  font-size: 14px;
  color: #888;
  font-style: italic;
  background-color: #f3f3f3;
  padding: 4px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

/* Pour les petits écrans (moins de 600px) */
@media screen and (max-width: 600px) {
  .adastra-comment-date {
    font-size: 12px;
    /* Réduire la taille de la police */
    padding: 3px 6px;
    /* Réduire le padding */
    text-align: center;
  }
}

/* Pour les écrans moyens (entre 600px et 900px) */
@media screen and (min-width: 600px) and (max-width: 900px) {
  .adastra-comment-date {
    font-size: 13px;
    /* Taille de police intermédiaire */
    padding: 4px 7px;
  }
}

/* Pour les grands écrans (plus de 900px) */
@media screen and (min-width: 900px) {
  .adastra-comment-date {
    font-size: 14px;
    /* Taille de police normale */
    padding: 4px 8px;
  }
}

.social-share .btn:hover {
  background-color: #333;
  color: #fff;
}

.adastra-form-input[readonly] {
  background-color: #ff9900;
  /* Couleur de fond légère pour les champs en lecture seule */
  color: #666;
  /* Couleur du texte pour les champs en lecture seule */
  cursor: not-allowed;
  /* Curseur non autorisé pour indiquer que le champ est en lecture seule */
  border-color: #e0e0e0;
  /* Bordure légère pour les champs en lecture seule */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  /* Ombrage intérieur léger pour ajouter de la profondeur */
}

.adastra-form-input:not([readonly]) {
  background-color: #ff9900;
  /* Couleur de fond bleue claire pour les champs activés */
  color: #333;
  /* Couleur du texte pour les champs activés */
  cursor: text;
  /* Curseur de texte pour les champs activés */
  border-color: #b0d8ff;
  /* Bordure bleue claire pour les champs activés */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  /* Ombrage léger pour les champs activés */
}

.adastra-form-input:focus {
  border-color: #0056b3;
  /* Couleur de la bordure au focus (bleu foncé) */
  outline: none;
  /* Supprime le contour par défaut */
  box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.25);
  /* Ombrage au focus pour améliorer la visibilité */
}

.login-message {
  color: #333;
  /* Couleur professionnelle, gris foncé */
  font-size: 14px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* Permet à l'élément de se réorganiser sur les petits écrans */
  gap: 8px;
  /* Espacement entre l'icône et le texte */
}

.login-message i {
  color: #ff5c5c;
  /* Couleur rouge pour l'icône */
  font-size: 16px;
  /* Taille de l'icône */
  flex-shrink: 0;
  /* Empêche l'icône de se réduire */
}

.login-message a {
  color: #007bff;
  /* Couleur bleue pour le lien */
  text-decoration: none;
  font-weight: bold;
  white-space: nowrap;
  /* Empêche le texte du lien de se casser */
}

.login-message a:hover {
  text-decoration: underline;
  /* Soulignement au survol */
}

/* Styles pour les écrans plus petits */
@media (max-width: 600px) {
  .login-message {
    font-size: 12px;
    /* Réduit la taille de la police sur les petits écrans */
    margin-top: 8px;
  }

  .login-message i {
    font-size: 14px;
    /* Réduit la taille de l'icône sur les petits écrans */
  }

  .login-message a {
    font-size: 12px;
    /* Réduit la taille de la police du lien */
  }
}

@media (max-width: 767px) {
  .span-address {
    display: none !important;
  }
}

.color-name {
  color: #fff;
  padding: 0;
  display: inline-block;
  text-align: center;
}

.hidden-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.color-radio label {
  display: block;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s;
  border: 2px solid #ccc;
  padding: 5px;
  border-radius: 5px;
}

.color-container {
  display: flex;
  align-items: center;
}

.color-box {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
  border: 1px solid #ccc;
}

.color-name {
  font-size: 1rem;
  color: #000;
}

.hidden-radio:checked + label {
  border-color: #ff9900;
  box-shadow: 0 0 0 4px #ff9900;
}

.color-radio label:hover {
  border-color: #ff9900;
}

.color-radio label:hover .color-name {
  color: #ff9900;
}

.color-box[style*="background-color: white;"] {
  border: 1px solid #333;
}

.color-box[style*="background-color: white;"]:checked {
  border: 1px solid #ff9900;
}

.popup-color {
  margin-bottom: 10px;
}

.color-container {
  display: flex;
  align-items: center;
}

.color-box {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
  border: 1px solid #ccc;
}

.color-name {
  font-size: 1rem;
  color: #000;
}

.main-img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.thumbnail-img {
  width: 80px;
  height: 80px;
  margin: 5px;
  object-fit: cover;
  border: 1px solid #ddd;
  transition: transform 0.2s ease-in-out;
}

.thumbnail-img:hover {
  transform: scale(1.1);
}

.color-box {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-block;
}

.color-name {
  margin-left: 5px;
  font-size: 14px;
}

.size-label {
  font-size: 16px;
  font-weight: bold;
}
.product-details {
  margin-bottom: 30px;
}

.product-title {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.product-price {
  font-size: 1.5rem;
  font-weight: bold;
  color: #ff9900;
}

.delivery-info {
  font-size: 1rem;
  color: #ff9900;
  margin-top: 10px;
}

.stock-info {
  font-size: 1.1rem;
  margin-top: 10px;
}

.stock-info i {
  color: #28a745;
  margin-right: 5px;
}

.product-brand,
.product-category,
.product-condition,
.product-created-at,
.product-views,
.product-users_who_ordered {
  font-size: 1rem;
  color: #666;
}

.product-brand,
.product-category {
  font-weight: bold;
}

.product-location {
  font-size: 1rem;
  margin-top: 20px;
  color: #333;
}

.product-location i {
  color: #ff9900;
  margin-right: 5px;
}
#locationImage {
  width: 18px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
.product-details {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.product-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.product-price {
  font-size: 1.2rem;
  color: #555;
  margin-bottom: 0;
}

.price-amount {
  font-size: 1.2rem;
  font-weight: 700;
}

.price-currency {
  font-size: 1.1rem;
  font-weight: 500;
}

.product-description {
  font-size: 1.1rem;
  color: #555;
  line-height: 1.6;
  margin-top: 0;
}

.product-location {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.product-location img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.product-location span {
  font-size: 1.1rem;
  color: #333;
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 8px;
  font-family: Fallback, Helvetica Neue, Helvetica-Neue, Arial, sans-serif;
}

.product-info span {
  font-weight: 700;
}

.product-brand,
.product-category,
.product-condition,
.product-created-at,
.product-views,
.product-users_who_ordered {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  border-radius: 6px;
  transition: background-color 0.3s ease;
  font-size: 14px;
  line-height: 1.6;
  font-size: 1.1rem;
  color: #555;
}

.product-brand strong,
.product-category strong,
.product-condition strong,
.product-created-at strong,
.product-views strong,
.product-users_who_ordered strong {
  font-weight: 500;
  color: #555;
}

.size_choice,
.color_choice {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}
/* 
.price-text,
.shipping-info {
  font-size: 1.2rem;
  font-weight: 700;
} */

@media (max-width: 768px) {
  .product-details {
    margin-top: 15px;
    padding: 15px;
  }

  .product-title {
    font-size: 1.3rem;
  }

  .product-price {
    font-size: 1.2rem;
  }

  .price-amount {
    font-size: 1.2rem;
  }

  .price-currency {
    font-size: 1rem;
  }

  .product-description {
    font-size: 1rem;
  }

  .product-location span {
    font-size: 1rem;
  }

  .product-brand,
  .product-category,
  .product-condition,
  .product-created-at,
  .product-views,
  .product-users_who_ordered {
    font-size: 1rem;
  }
}

.product-price,
#priceContainer {
  margin: 0 !important;
  padding: 0 !important;
}

.product-price {
  line-height: 1;
  font-size: 16px;
  vertical-align: top;
}

#priceContainer {
  line-height: 1;
  font-size: 16px;
  vertical-align: top;
}

.container-button {
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-info {
  border-radius: 8px;
  padding: 16px;
  background-color: #f9f9f9;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  margin-top: 15px;
}

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

.user-photo-name {
  display: flex;
  align-items: flex-start;
}

.user-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
}

.user-info-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#userName {
  font-weight: 600;
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
}

.user-rating {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.stars {
  display: flex;
  margin-right: 8px;
}

.stars i.fas.fa-star {
  color: #ccc;
  /* Couleur grise par défaut */
  font-size: 14px;
}

.stars i.fas.fa-star.active {
  color: #f39c12;
  /* Jaune/orangé pour les étoiles actives */
}

.rating-count {
  font-size: 14px;
  color: #777;
  margin-bottom: 0;
}

.fas.fa-chevron-right {
  font-size: 18px;
  color: #777;
}

.fas.fa-chevron-right {
  font-size: 18px;
  color: #777;
}

.user-details {
  font-size: 14px;
  color: #555;
}

.user-details p {
  margin: 4px 0;
}

#userCountry {
  font-weight: 500;
}

#statusText {
  font-weight: 600;
  color: #333;
}

#userUpdatedAt {
  font-style: italic;
  color: #888;
}

.user-activity {
  display: flex;
  align-items: center;
}

.activity-icon {
  width: 40px;
  height: 40px;
  background-color: #e0e0e0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
}

.activity-icon i.fas.fa-user {
  font-size: 18px;
  color: #555;
}

.activity-text p {
  margin: 0;
  font-size: 14px;
  color: #333;
}

.activity-text p strong {
  font-weight: 600;
}

.fas.fa-map-marker-alt {
  color: #f39c12;
  margin-right: 8px;
  font-size: 14px;
}

.user-protection-fee {
  display: flex;
  align-items: flex-start;
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  margin-top: 15px;
}

.fee-icon {
  width: 40px;
  height: 40px;
  background-color: #e0e0e0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
}

.fee-icon i.fas.fa-shield-alt {
  font-size: 18px;
  color: #f39c12;
}

.fee-text p {
  margin: 0;
  font-size: 14px;
  color: #333;
}

.fee-text p strong {
  font-weight: 600;
}

.status-seller {
  flex-direction: row;
}

.fee-text a {
  color: #f39c12;
  text-decoration: underline;
  font-weight: 500;
  transition: color 0.3s ease;
}

.fee-text a:hover {
  color: #f39c12;
  text-decoration: underline;
}
/* Base style */
.ig-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.ig-button.subscribe {
  background-color: #e68900;
  color: white;
}

.ig-button.subscribed {
  background-color: #007185;
  color: white;
}

.compte-links {
  margin: 20px auto;
  display: flex;
  justify-content: center;
  gap: 20px;
}

#messageBtn {
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
  background-color: #e7f3ff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#messageBtn:hover {
  background-color: #e7f3ff;
  border-color: #007185;
  color: #007185;
}

.compte-links a {
  text-decoration: none;
  color: #333;
  font-size: 1.1em;
  font-weight: 500;
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-radius: 8px;
  transition: all 0.3s ease;
  background-color: #f8f8f8;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin: 5px 0;
}

.compte-links a i {
  margin-right: 8px;
  font-size: 1.4em;
}

.profile-link i {
  margin-right: 10px;
  font-size: 1.3em;
  color: #ff9900;
  transition: color 0.3s ease;
}

@media (max-width: 768px) {
  .compte-links a {
    font-size: 1.1em;
    letter-spacing: 0.5px;
    padding: 5px 10px;
  }
}

.app-title {
  font-size: 5vw;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 1px;
  position: relative;
}

@media (max-width: 480px) {
  .app-title {
    font-size: 6vw;
  }
}

@media (min-width: 768px) {
  .app-title {
    font-size: 3vw;
  }
}

@media (min-width: 1200px) {
  .app-title {
    font-size: 24px;
  }
}

#negotiatePriceBtn {
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  position: relative;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  margin: auto;
}

.close-button {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 22px;
  cursor: pointer;
  font-weight: bold;
}

.modal-content p {
  margin: 6px 0;
  line-height: 1.5;
}

.link-popup-frais {
  font-weight: bold;
  color: #ff9900;
  text-decoration: underline;
}

.frais_livraison {
  font-size: 1.3em;
}

.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.popup-content {
  position: relative;
  padding: 10px;
  background-color: #232f3e;
  text-align: center;
  border-radius: 8px;
  max-width: 100%;
}

.popup img {
  width: 100%;
  height: auto;
  max-width: 600px;
  max-height: 80vh;
}

@media (max-width: 600px) {
  .popup {
    width: 95%;
    height: 90%;
  }

  .popup-content {
    width: 100%;
  }

  .popup img {
    max-width: 100%;
    max-height: 80vh;
  }

  .app-title {
    text-align: left;
  }
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  color: black;
  cursor: pointer;
  color: #ff9900;
}
.popup-quantity {
  margin-top: 10px;
  font-size: 1.1em;
  color: #333;
}

.popup-quantity strong {
  font-weight: bold;
}

.popup-quantity .quantity-value {
  color: #ff9900;
}

.popup-total-price {
  margin-top: 20px;
  padding: 16px;
  background-color: #f3f3f3;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.popup-total-price strong {
  font-size: 1rem;
  color: #111;
}

.price.total-price {
  display: inline-block;
  margin-top: 8px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #ff9900;
}

@media (max-width: 600px) {
  .popup-total-price {
    padding: 12px;
    font-size: 0.95rem;
  }

  .price.total-price {
    font-size: 1.4rem;
  }
}

.popup-size strong,
.popup-color strong {
  font-size: 1rem;
  color: #111;
}

.popup-quantity {
  margin-top: 15px;
  padding: 12px 16px;
  background-color: #fefefe;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: Arial, sans-serif;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.popup-quantity strong {
  font-size: 1rem;
  color: #111;
  display: flex;
  align-items: center;
  gap: 6px;
  /* Un peu d’espace entre l’emoji et le texte */
}

.quantity-value {
  font-size: 1.2rem;
  font-weight: 700;
}

.popup-package-format {
  margin-top: 10px;
  font-size: 14px;
  color: #555;
}

#orderButtonDisabled {
  background-color: #ccc !important;
  color: #666 !important;
  cursor: not-allowed !important;
  border: none !important;
  pointer-events: none;
  padding: 12px 20px !important;
  font-size: 14px;
  border-radius: 5px;
}

.category-link,
.brand-link {
  color: #007185;
  text-decoration: underline;
  font-weight: 700;
}

.category-link:hover,
.brand-link {
  text-decoration: underline;
}

.share-product-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.share-product-button {
  background: linear-gradient(135deg, #f41818, #ff9900);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 20px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  order: -1;
}

.share-product-button i {
  margin-right: 8px;
}

.share-product-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
}

.share-product-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(102, 149, 255, 0.6);
}

@keyframes hover-effect {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.share-product-button:active {
  animation: hover-effect 0.2s ease-in-out;
}

.review-form-container {
  max-width: 100%;
  margin: 2rem auto;
  font-family: "Helvetica Neue", sans-serif;
  padding: 2rem 1.5rem;
  box-sizing: border-box;
}

.review-form-container h1,
.review-form-container h2 {
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
  color: #222;
  text-align: center;
}

.review-feedback {
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  text-align: center;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.form-group input[type="text"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: 8px;
  border: 1px solid #d0d0d0;
  background: #fdfdfd;
  font-size: 1rem;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.form-group input[type="text"]:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: #6c63ff;
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
  outline: none;
}

.form-group input[type="submit"] {
  background: #6c63ff;
  color: #fff;
  padding: 0.9rem 1.8rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.form-group input[type="submit"]:hover {
  background: #554ee3;
  transform: translateY(-1px);
}

.review-item {
  border-bottom: 1px solid #eaeaea;
  padding: 1.2rem 0;
}

.review-item strong {
  font-size: 1.05rem;
  color: #222;
}

.review-item small {
  display: block;
  font-size: 0.85rem;
  color: #999;
  margin-bottom: 0.4rem;
}

.review-item p {
  margin: 0.5rem 0 0;
  color: #444;
  line-height: 1.5;
}

/* Responsive - Mobile Friendly */
@media (max-width: 600px) {
  .review-form-container {
    padding: 1.5rem 1rem;
    border-radius: 0;
  }

  .form-group input[type="submit"] {
    width: 100%;
    text-align: center;
  }
}

input[readonly] {
  background-color: #f0f0f0;
  color: #666;
  cursor: not-allowed;
}

button#submitBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #6c63ff;
  color: #fff;
  padding: 0.9rem 1.8rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  transition: background-color 0.2s ease;
}

button#submitBtn .spinner {
  margin-left: 8px;
  font-size: 1rem;
}

.review-spinner {
  text-align: center;
  margin: 1rem 0;
  color: #666;
}

.review-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
}

.review-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
}

.review-author {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.review-author:hover {
  text-decoration: underline;
  color: #6c63ff;
}

.no-reviews,
.end-of-reviews {
  text-align: center;
  margin: 2rem 0;
  font-size: 1rem;
  color: #555;
  background: #f9f9f9;
  padding: 1rem;
  border-radius: 8px;
  border: 1px dashed #ccc;
}

.no-reviews i,
.end-of-reviews i {
  font-size: 1.4rem;
  color: #888;
  display: block;
  margin-bottom: 0.5rem;
}

.custom-select-wrapper {
  position: relative;
  width: 100%;
}

.custom-select {
  padding: 10px 15px;
  border: 2px solid #ccc;
  border-radius: 5px;
  background-color: white;
  cursor: pointer;
  user-select: none;
  position: relative;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.custom-select:hover {
  border-color: #ff9900;
}

.custom-options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 999;
  border: 1px solid #ccc;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-height: 200px;
  overflow-y: auto;
}

.custom-option {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.custom-option:hover {
  background-color: #f0f0f0;
}

.custom-select.open .custom-options {
  display: block;
}
/* NEW */
.product-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 10px;
  line-height: 1.3;
  font-family: "Segoe UI", sans-serif;
}

.product-price {
  font-size: 1rem;
  font-weight: 500;
  color: #007185;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Segoe UI", sans-serif;
}

.price-currency {
  font-size: 1.2rem;
  vertical-align: top;
  color: #007185;
  font-weight: 500;
  font-size: 0.95rem;
  opacity: 0.9;
}

.price-amount {
  font-weight: 500;
  color: #007185;
}

#priceContainer {
  margin-top: 10px;
}

.price-with-shipping {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-size: 1.2rem;
  font-weight: 600;
  font-family: "Segoe UI", sans-serif;

  color: #007185;
  margin-top: 8px;
  margin-bottom: 0px;

  text-decoration: none;
  transition: background-color 0.25s ease, transform 0.15s ease;
}

.price-text {
  display: flex;
  align-items: center;
  gap: 4px;
}

.shipping-info {
  font-size: 0.85rem;
  color: #007185;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.85;
}

.shipping-info i {
  font-size: 0.9rem;
  color: #007185;
}

.product-description {
  font-family: "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 100%;
  transition: max-height 0.3s ease;
  max-height: 100px;
  overflow: hidden;
  position: relative;
}

.product-description.expanded {
  max-height: 1000px;
}

.product-description:hover {
  background-color: #f9f9f9;
  border-color: #dcdcdc;
}

.description-toggle {
  background: none;
  border: none;
  color: #007185;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 5px;
  padding: 4px;
  transition: color 0.2s ease;
}

.description-toggle:hover {
  color: #0056b3;
}

/* Style du prix principal */
.product-price {
  font-size: 1.6rem;
  font-weight: 600;
  color: #111;
  font-family: "Segoe UI", sans-serif;
  margin: 10px 0;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

/* Devise (USD...) */
.price-currency {
  font-size: 0.95rem;
  color: #007185;
  opacity: 0.85;
  vertical-align: top;
}

/* Valeur du prix */
.price-amount {
  font-weight: bold;
  color: #111;
  letter-spacing: -0.5px;
}

/* Prix avec livraison (dans priceContainer) */
#priceContainer {
  margin-top: 4px;
}

.price-with-shipping {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 500;
  font-family: "Segoe UI", sans-serif;
  color: #007185;
  margin-top: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
  padding: 4px 6px;
  border-radius: 6px;
  background-color: #f4f9f9;
  border: 1px solid #ddeaea;
}

.price-with-shipping:hover {
  background-color: #e7f4f4;
  transform: scale(1.02);
}

.price-text {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: 1rem;
}

.shipping-info {
  font-size: 0.85rem;
  color: #007185;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.85;
}

.shipping-info i {
  font-size: 0.9rem;
  color: #007185;
}

.product-prices {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  background-color: #f8fafa;
  border: 1px solid #e1e1e1;
  border-radius: 10px;
  font-family: "Segoe UI", sans-serif;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.price-line {
  font-size: 1rem;
  font-weight: 500;
  color: #007185;
  display: flex;
  align-items: center;
  gap: 6px;
}

.price-line.secondary {
  font-size: 0.9rem;
  color: #777;
  font-weight: 400;
}

/* Icône info */
.price-line i.fa-info-circle {
  font-size: 0.85rem;
  color: #ff9900;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.price-line i.fa-info-circle:hover {
  transform: scale(1.15);
}

.info-icon {
  font-size: 0.9rem;
  color: #007185;
  opacity: 0.75;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.info-icon:hover {
  opacity: 1;
}

/* MODAL OVERLAY */
.modal.shipping-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  justify-content: center;
  align-items: center;
}

/* MODAL CONTENT */
.modal-content {
  background-color: #fff;
  padding: 24px 20px;
  max-width: 420px;
  width: 90%;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  font-family: "Segoe UI", sans-serif;
  animation: fadeInModal 0.3s ease-in-out;
  position: relative;
}

/* MODAL ANIMATION */
@keyframes fadeInModal {
  from {
    opacity: 0;
    transform: translateY(-10%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* CLOSE BUTTON */
.close-button {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 1.4rem;
  color: #555;
  cursor: pointer;
  transition: color 0.2s ease;
}

.close-button:hover {
  color: #000;
}

/* MODAL TITLE */
.modal-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

/* MODAL DETAILS */
.show-modal-details {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.6;
}

/* MODAL BUTTON */
.close-modal-btn {
  display: block;
  margin: 20px auto 0;
  padding: 10px 20px;
  background-color: #ff9900;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.close-modal-btn:hover {
  background-color: #e88200;
}

.price-summary {
  font-family: "Segoe UI", sans-serif;
  margin-top: 8px;
}

.price-summary .price-line {
  font-size: 1rem;
  color: #007185;
  margin-bottom: 3px;
}

.price-summary .price-line.secondary {
  font-size: 0.9rem;
  color: #777;
}

.product-price-line {
  font-size: 16px;
  color: #222;
  margin-top: 10px;
  font-weight: 600;
}

.price-with-shipping {
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.25s ease;
}

.price-with-shipping .price-currency {
  margin-right: 4px;
  font-weight: bold;
}

.price-with-shipping .shipping-info {
  font-size: 1.3rem;
  color: #007185;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.85;
}

.price-with-shipping .shipping-info i {
  font-size: 1rem;
  color: #999;
}

.fa-truck:before,
.fa-info-circle:before {
  color: #007185;
}

.price-text {
  font-size: 1.4rem;
}

.submit-button-wrapper {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.softadastra-button {
  font-family: "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 600;
  border-radius: 6px;
  height: 48px;
  padding: 0 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, box-shadow 0.3s ease,
    transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-decoration: none;
}

/* Bouton principal */
.primary-button,
.btn-success {
  background-color: #ff9900;
  border: 1px solid #ff9900;
  color: #fff;
}

.ig-button.subscribe {
  background-color: #ff9900;
  color: white;
}

.primary-button:hover {
  background-color: #e68500;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

/* Bouton secondaire (brouillon) */
.secondary-button {
  background-color: #007185;
  border: 1px solid #ccc;
  color: #f4f9f9;
}

.secondary-button:hover {
  background-color: #f9f9f9;
  border-color: #bbb;
  color: #222;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.softadastra-button span.emoji {
  font-size: 18px;
  margin-right: 8px;
  line-height: 1;
}

.softadastra-button.primary-button span.emoji {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.softadastra-button.secondary-button span.emoji {
  filter: brightness(1.1) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

.product-price-box .price-with-shipping {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  padding: 0;
  border-radius: 0;
  border: 0;
}

.product-price-box .price-text {
  font-size: 1em;
}

.product-price-box span.shipping-include {
  font-size: 0.9em;
}

.page {
  padding: 0;
  background-color: #f9f9f9;
  font-family: "Segoe UI", sans-serif;
}

.containeres {
  padding: 25px 10px;
  border-radius: 12px;
}

/* Images produit */
.product-images .main-img {
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.thumbnail-images img {
  width: 80px;
  height: 80px;
  margin: 6px;
  border-radius: 8px;
  border: 2px solid transparent;
  object-fit: cover;
  cursor: pointer;
  transition: border 0.3s;
}

.thumbnail-images img:hover {
  border: 2px solid #ff9900;
}

/* Détails produit */
.product-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.product-price {
  font-size: 22px;
  color: #ff9900;
  font-weight: 700;
}

.product-location img {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  object-fit: cover;
  margin-right: 8px;
}

.product-info strong,
.product-condition strong {
  display: inline-block;
  width: 130px;
  color: #555;
}

#toggleDescription {
  background: none;
  border: none;
  color: #007185;
  cursor: pointer;
  font-weight: 600;
  padding: 6px 0;
}

/* Formulaire */
.form-group label {
  font-weight: 600;
  margin-bottom: 5px;
}

input[type="number"].form-control {
  max-width: 120px;
}

/* Boutons principaux */
.softadastra-button {
  border: none;
  padding: 12px 20px;
  font-weight: 600;
  border-radius: 30px;
  transition: all 0.3s ease;
}

.primary-button {
  background-color: #ff9900;
  color: #fff;
  margin-right: 10px;
}

.primary-button:hover {
  background-color: #e68200;
}

.secondary-button {
  background-color: #25d366;
  color: #fff;
}

.secondary-button:hover {
  background-color: #1db954;
}

/* Popup */
.unique-popup {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* User Profile */
.user-info {
  margin-top: 25px;
  padding: 20px;
  background: #fdfdfd;
  border: 1px solid #eee;
  border-radius: 10px;
}

.user-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
}

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

.user-photo-name {
  display: flex;
  align-items: center;
}

.user-rating .stars i {
  color: #f8d101;
  margin-right: 1px;
}

.separator {
  border: 0;
  border-top: 1px solid #ddd;
  margin: 12px 0;
}

/* Protection fees */
.user-protection-fee {
  margin-top: 20px;
  padding: 15px;
  background: #fffbea;
  border: 1px solid #ffe58f;
  border-radius: 10px;
}

.user-protection-fee .fee-icon {
  font-size: 24px;
  color: #faad14;
  margin-bottom: 5px;
}

/* Review form */
.review-form-container {
  padding: 25px;
  margin-top: 30px;
  border-radius: 10px;
}

.review-form-container h1,
.review-form-container h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
}

.review-form-container textarea,
.review-form-container input {
  border-radius: 8px;
  border: 1px solid #ccc;
  padding: 10px;
  width: 100%;
}

.review-feedback {
  color: #28a745;
  font-weight: 500;
  margin-bottom: 10px;
}

.image-loader-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f8f8f8;
  border-radius: 8px;
}

.image-skeleton {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.2s ease-in-out infinite;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px;
  z-index: 1;
  margin: 5px;
}

.adastra-img-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #ccc;
  border-top: 3px solid #ff9900;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.image-loader-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* carrée */
  overflow: hidden;
  background: #f8f8f8;
  border-radius: 8px;
}

.thumb-loader {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
}

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

#installBanner {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  border-top: 1px solid #ddd;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 99999;
  transition: bottom 0.4s ease-in-out;
  padding: 16px;
  font-family: sans-serif;
}

.parent-container {
  position: relative;
}

.spinner-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.spinner-wrapper.fullscreen {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

/* addToCartForm */
#addToCartForm {
  border-radius: 12px;
}

#addToCartForm label {
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
  display: inline-block;
  font-size: 14px;
}

#addToCartForm .form-group {
  margin-bottom: 16px;
}

#addToCartForm input[type="number"] {
  max-width: 120px;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #ccc;
  transition: border-color 0.3s ease;
}

#addToCartForm input[type="number"]:focus {
  border-color: #ff9900;
  outline: none;
}

.form-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.form-radios .radio-option {
  padding: 8px 14px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 13px;
  user-select: none;
}

.form-radios .radio-option.active {
  background-color: #ff9900;
  color: #fff;
  border-color: #ff9900;
  font-weight: bold;
}

/* Checkout Action Bar */
.checkout-action-bar {
  margin-top: 30px;
  padding-top: 15px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}

.checkout-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  width: 100%;
  max-width: 600px;
}

.checkout-action-link {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
  flex: 1 1 auto;
  text-align: center;
}

.order-btn {
  background-color: #ff9900;
  color: #fff;
}

.order-btn:hover {
  background-color: #e68200;
  transform: translateY(-2px);
}

.chat-btn {
  background-color: #6fbf73;
  color: #fff;
}

.chat-btn:hover {
  background-color: #1cb654;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .checkout-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    padding: 10px 16px;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
  }

  .checkout-buttons {
    flex-direction: row;
    gap: 12px;
  }

  .checkout-action-link {
    width: 48%;
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 8px;
  }

  body {
    padding-bottom: 80px;
  }

  .containeres {
    padding-top: 10px;
  }
}

img.review-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1 !important;
}

/* Adastra Carousel Styles */
.card-container {
  padding: 20px 0;
  margin-top: 30px;
}

.card-container .app-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 15px;
  padding-left: 10px;
}

.adastra-carousel-wrapper {
  position: relative;
  overflow: hidden;
}

.adastra-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 10px;
}

.adastra-carousel::-webkit-scrollbar {
  display: none;
}

/* Navigation boutons */
.carousel-nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  font-size: 24px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 2;
  transition: background 0.2s;
}

.carousel-nav:hover {
  background-color: #ff9900;
  color: white;
}

.carousel-nav.left {
  left: 5px;
}

.carousel-nav.right {
  right: 5px;
}

.image-skeleton,
.country-image-skeleton {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.2s ease-in-out infinite;
  border-radius: 10px;
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.spinner-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f8f8f8;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.adastra-img-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #ccc;
  border-top: 3px solid #ff9900;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Empêche l’image de cacher le spinner tant qu’elle n’est pas chargée */
.adastra-card-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.4s ease;
}

.card-container {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.card-container.fade-out {
  opacity: 0;
  pointer-events: none;
}

.card-container.fade-in {
  opacity: 1;
  pointer-events: auto;
}

.review-form-container {
  margin-top: 0;
}

.adastra-card-wrapper {
  flex: 0 0 auto;
  width: 190px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  scroll-snap-align: start;
  position: relative;
}

.adastra-card-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.adastra-card-img-wrapper {
  width: 100%;
  height: 180px;
  background: #fafafa;
  position: relative;
}

.adastra-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.adastra-card-img-wrapper:hover .adastra-card-img {
  transform: scale(1.06);
}

.adastra-card-body {
  padding: 12px;
  font-size: 14px;
  line-height: 1.4;
}

.adastra-card-body h5 {
  margin: 3px 0;
  font-size: 14px;
  font-weight: 600;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-price-box {
  margin-top: 6px;
  font-size: 15px;
  font-weight: bold;
  color: #ff9900;
}

.usd-price {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}

.adastra-card-country-wrapper {
  display: flex;
  align-items: center;
  margin-top: 5px;
  gap: 5px;
}

.adastra-card-country-img {
  width: 16px;
  height: 16px;
  object-fit: cover;
  border-radius: 4px;
}

.city-name {
  font-size: 12px;
  color: #777;
}

@media (max-width: 768px) {
  .carousel-nav {
    display: none !important;
  }

  .card-container {
    margin-top: 0;
  }
}

/* Review-form-container */
.review-form-container h1,
.review-form-container h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.review-feedback {
  margin-bottom: 15px;
  color: #d93025;
  font-weight: 500;
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #444;
}

.form-group input[type="text"],
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-group input[readonly] {
  background-color: #f9f9f9;
  cursor: not-allowed;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #ff9900;
  outline: none;
}

textarea {
  resize: vertical;
}

/* Custom select */
.custom-select-wrapper {
  position: relative;
}

.custom-select {
  position: relative;
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
}

.selected-option {
  color: #333;
  font-weight: 500;
}

.custom-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-top: 4px;
  z-index: 10;
  display: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.custom-option {
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.custom-option:hover {
  background: #f0f0f0;
}

/* Show options when active */
.custom-select.open .custom-options {
  display: block;
}

/* Button */
.form-group button {
  width: 100%;
  background-color: #ff9900;
  color: #fff;
  border: none;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 30px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.3s ease;
}

.form-group button:hover {
  background-color: #e68200;
}

.spinner i {
  font-size: 16px;
}

#reviewList {
  margin-top: 30px;
}
.star-rating {
  display: flex;
  gap: 8px;
  cursor: pointer;
  font-size: 26px;
  margin-top: 5px;
}

.star {
  color: #ccc;
  transition: color 0.2s ease;
}

.star.selected,
.star.hovered {
  color: #ff9900;
}

.rating-description {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
}
.popup-error {
  padding: 10px;
  background-color: #fff3f3;
  border: 1px solid #ffcccc;
  border-radius: 8px;
  font-size: 14px;
}
.product-info strong,
.product-condition strong {
  display: inline-block;
  width: 200px;
  color: #555;
}
.product-price-line {
  font-size: 16px;
  color: #ff9900;
  margin-top: 10px;
  font-weight: 600;
}

/*NEWS*/
.share-product-container {
  position: relative;
  margin: 16px 0;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
}

.share-product-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background-color: #ff9900;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.share-product-button:hover {
  background-color: #e68a00;
}

.share-popup {
  margin-top: 8px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
}

.share-option {
  padding: 10px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #333;
  transition: background 0.2s ease;
}

.share-option:hover {
  background-color: #f7f7f7;
}

/* ✅ Ajout d'une bordure supérieure dynamique pour renforcer l'effet de surélévation */
.unique-popup::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 5px;
  background: #ccc;
  border-radius: 10px;
}

/* ✅ Style du récapitulatif (summary) */
.popup-summary {
  margin-top: 20px;
  background: #fff9f0;
  padding: 12px 16px;
  border: 1px dashed #ff9900;
  border-radius: 8px;
  font-size: 0.95rem;
  color: #333;
}

.popup-summary div {
  margin-bottom: 6px;
}

/* ✅ Style du message d'erreur */
.popup-error {
  margin-top: 15px;
  background-color: #ffecec;
  border: 1px solid #f5c2c2;
  padding: 10px;
  border-radius: 6px;
  color: #c00;
  font-weight: 500;
  font-size: 14px;
}

/* ✅ Bouton de commande */
.unique-popup .btn-success {
  background-color: #ff9900;
  color: white;
  font-weight: 600;
  border: none;
  padding: 12px;
  font-size: 15px;
  width: 100%;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.unique-popup .btn-success:hover {
  background-color: #e68a00;
}

/* ✅ Résponsive : meilleur padding sur mobile */
@media (max-width: 480px) {
  .unique-popup-body {
    padding: 12px;
  }

  .popup-summary {
    font-size: 14px;
    padding: 10px;
  }
}

.unique-popup-close {
  font-size: 1.5rem;
  color: #fff !important;
  cursor: pointer;
  transition: color 0.3s;
}

@keyframes slideUpPopup {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0%);
    opacity: 1;
  }
}

.unique-popup.show {
  display: block !important;
  animation: slideUpPopup 0.35s ease-out forwards;
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  z-index: 9998;
}

body.no-scroll {
  overflow: hidden;
  height: 100vh;
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  z-index: 9998;
}

#placeOrderBtn:disabled {
  background-color: #ccc !important;
  border-color: #ccc !important;
  color: #666 !important;
  cursor: not-allowed !important;
  opacity: 0.7;
  pointer-events: none;
}

#placeOrderBtn {
  transition: background-color 0.3s, opacity 0.3s;
}

@media (min-width: 768px) {
  .unique-popup {
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    border-radius: 12px;
    bottom: auto;
    top: 15vh;
    max-height: 80vh;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }

  .unique-popup-body {
    padding: 20px;
  }
}

@media (min-width: 768px) {
  .unique-popup .btn-success {
    width: auto;
    min-width: 200px;
    display: inline-block;
  }

  .unique-popup .d-flex {
    justify-content: center;
  }
}

.color-box {
  width: 15px !important;
  height: 15px !important;
  border-radius: 50%;
  display: inline-block;
}

#addToCartForm label {
  margin-bottom: 0;
}

#popupSizesContainer.form-radios.mb-4 {
  margin-bottom: 0 !important;
}

/* Commun à tous les boutons icône */
.icon-only-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 12px;
  color: white;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  flex: 0 0 auto;
}

/* 🟢 WhatsApp */
.whatsapp-chat {
  background-color: #25d366;
}

.whatsapp-chat:hover {
  background-color: #1cb654;
}

/* 🟠 Chat interne Softadastra */
.softadastra-chat {
  background-color: #131921;
}

.softadastra-chat:hover {
  background-color: #0e151d;
}

.image-layout {
  display: flex;
  gap: 12px;
  align-items: stretch;
  /* étire les enfants */
  width: 100%;
  position: relative;
}

/* Conteneur principal */
.product-images {
  width: 100%;
}

/* === MINIATURES === */
.thumbnails-carousel-wrapper {
  flex-shrink: 0;
  width: 100px;
  /* ⬅️ augmenté pour grands écrans */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.thumbnails-carousel {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}

/* Flèches */
.scroll-arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #333;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.scroll-arrow:hover {
  opacity: 1;
}

.scroll-arrow.up {
  top: -16px;
}

.scroll-arrow.down {
  bottom: -16px;
}

/* Miniature */
.thumb-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: border 0.2s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumb-wrapper.active {
  border-color: #ff9900;
  box-shadow: 0 0 0 2px #ff9900;
}

.thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.thumb-wrapper:hover img {
  transform: scale(1.05);
}

/* === IMAGE PRINCIPALE === */
.main-image {
  flex-grow: 1;
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1;
  background-color: #f8f8f8;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-image a {
  display: block;
  width: 100%;
  height: 100%;
}

/* .main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
} */

.main-image img.loaded {
  opacity: 1;
}

/* Spinner */
.adastra-img-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  border: 4px solid #ccc;
  border-top: 4px solid #ff9900;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Row sans marges */
.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.row.no-gutters > [class^="col-"] {
  padding-right: 8px;
  padding-left: 8px;
}

/* === IMAGE PRINCIPALE – LIMITER LA TAILLE SUR GRANDS ECRANS === */
.main-image {
  flex-grow: 1;
  position: relative;
  width: 100%;
  max-width: none;
  aspect-ratio: 1 / 1;
  max-height: 80vh;
  /* ✅ Limite à 80% de la hauteur écran */
  background-color: #f8f8f8;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* MINIATURES – limiter hauteur totale également */
.thumbnails-carousel-wrapper {
  flex-shrink: 0;
  width: 100px;
  max-height: 80vh;
  /* ✅ idem pour le carrousel */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.thumbnails-carousel {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}

.thumbnails-carousel::-webkit-scrollbar {
  width: 5px;
}

.thumbnails-carousel::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

.local-price-top {
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 0px;
  color: #555;
}

.containeres {
  padding: 25px 0;
}

/* === MOBILE === */
@media (max-width: 768px) {
  .image-layout {
    flex-direction: row;
  }

  .thumbnails-carousel-wrapper {
    width: 60px;
  }

  .thumb-wrapper {
    width: 100%;
    height: auto;
  }

  .scroll-arrow {
    width: 28px;
    height: 28px;
  }

  .thumbnails-carousel {
    max-height: 280px;
  }

  .main-image {
    max-width: 100%;
  }

  .adastra-carousel-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }

  .fancybox-image,
  .fancybox-spaceball {
    background: transparent;
    border: 0;
    height: 100%;
    left: 0;
    margin: 10px;
    max-height: none;
    max-width: none;
    padding: 20px;
    position: absolute;
    top: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .checkout-action-bar {
    padding: 8px;
  }

  .checkout-buttons {
    gap: 8px;
  }

  .checkout-action-link {
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 6px;
  }

  .checkout-action-link i {
    font-size: 16px;
  }

  .checkout-action-link.icon-only-btn {
    padding: 6px;
    width: 34px;
    height: 34px;
  }

  .checkout-action-link.order-btn {
    font-size: 13px;
    padding: 6px 12px;
  }
}

.price-with-shipping {
  background-color: #fff;
}

.product-sizes-inline,
.product-colors-inline,
.product-condition-inline {
  font-size: 1rem;
  /* Taille lisible sur mobile et desktop */
  margin-top: 0.4rem;
  color: #333;
  font-weight: 400;
  line-height: 1.4;
}

.product-condition-inline {
  font-size: 1rem;
  color: #777;
}

.product-condition-inline {
  margin-top: 6px;
  color: #555;
  font-weight: 400;
}

.brand-link-inline {
  color: #007185;
  text-decoration: none;
  font-weight: 500;
  text-decoration: underline;
}

.brand-link-inline:hover {
  text-decoration: underline;
}

@media screen and (max-width: 480px) {
  .product-sizes-inline,
  .product-colors-inline,
  .product-condition-inline {
    font-size: 1rem;
  }
}

.product-title {
  font-size: 1.4rem;
  /* Adapté aux mobiles */
  font-weight: 600;
  /* Un peu moins épais que 700 pour un look moderne */
  line-height: 1.3;
  color: #222;
  margin-bottom: 0.6rem;
  word-break: break-word;
  /* Pour éviter les débordements sur petits écrans */
}

@media screen and (min-width: 768px) {
  .product-title {
    font-size: 1.8rem;
    /* Plus grand sur les tablettes et ordinateurs */
  }

  .local-price-top {
    font-size: 0.9rem;
  }
}

.product-info > div:not(:last-child),
.product-custom-field:not(:last-child) {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.product-custom-fields {
  margin-top: 24px;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.product-custom-fields-header {
  background-color: #f7f7f7;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 1.1rem;
  color: #333;
  border-bottom: 1px solid #e0e0e0;
}

.product-custom-field-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 1rem;
  border-bottom: 1px solid #f1f1f1;
  transition: background-color 0.2s ease;
}

.product-custom-field-row:last-child {
  border-bottom: none;
}

.product-custom-field-row:hover {
  background-color: #fafafa;
}

.product-custom-field-label {
  color: #555;
  font-weight: 500;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-custom-field-value {
  color: #222;
  font-weight: 600;
  text-align: right;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hidden-custom-field {
  display: none;
}

.see-more-custom-fields {
  display: block;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #007185;
  background-color: #fefefe;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.see-more-custom-fields:hover {
  background-color: #f2f2f2;
  color: #0056a3;
}

.product-custom-field-row.hidden {
  display: none;
}

.see-more-custom-fields {
  display: block;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #007185;
  background-color: #fefefe;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.see-more-custom-fields:hover {
  background-color: #f2f2f2;
  color: #0056a3;
}

.price-with-shipping {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.shipping-info-line a {
  text-decoration: none;
  font-size: 0.9rem;
  color: #007185;
  transition: color 0.2s ease;
}

.shipping-info-line i {
  font-size: 0.9rem;
  opacity: 0.8;
}

.price-with-shipping:hover,
.price-with-shipping {
  background-color: #f9f9f9;
}

.custom-fields-spinner {
  display: flex;
  justify-content: center;
  padding: 16px;
}

.custom-fields-spinner::after {
  content: "";
  width: 24px;
  height: 24px;
  border: 3px solid #ccc;
  border-top-color: #ff9900;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.product-shipping-section {
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
}

.shipping-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  margin-bottom: 0.8rem;
}

.shipping-label {
  font-weight: 600;
  color: #333;
}

.shipping-price {
  font-weight: bold;
  color: #000;
  font-size: 1.1rem;
}

.shipping-promo-box {
  font-size: 0.9rem;
  color: #555;
  background-color: #fff3cd;
  padding: 0.7rem 1rem;
  border-left: 4px solid #ffc107;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.consumer-law-info {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fdfdfd;
  margin-top: 16px;
}

.consumer-law-info .law-icon {
  font-size: 24px;
  color: #444;
  flex-shrink: 0;
}

.consumer-law-info .law-text p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

.consumer-law-info .law-text a {
  color: #0b5f6e;
  text-decoration: underline;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .product-title {
    font-size: 1.4rem;
  }

  .product-price {
    font-size: 1.1rem;
  }

  .price-amount {
    font-size: 1.1rem;
  }

  .price-currency {
    font-size: 1rem;
  }

  .product-description {
    font-size: 1rem;
    line-height: 1.5;
  }

  .product-location span {
    font-size: 1rem;
  }

  .product-brand,
  .product-category,
  .product-condition,
  .product-created-at,
  .product-views,
  .product-users_who_ordered,
  .product-custom-field-row,
  .product-custom-field-label,
  .product-custom-field-value {
    font-size: 0.95rem;
  }

  .product-custom-fields-header {
    font-size: 1rem;
    padding: 8px 12px;
  }

  .product-custom-field-row {
    padding: 8px 12px;
  }

  .shipping-info-line a {
    font-size: 0.85rem;
  }

  .product-details {
    padding: 15px;
  }

  .see-more-custom-fields {
    font-size: 0.9rem;
    margin: 10px 0 0;
  }

  .modal .modal-content {
    font-size: 0.95rem;
  }
}

.adastra-spa-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  height: 64px;
  padding: 0 20px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid #eee;
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
}

.header-center {
  flex: 1;
  text-align: center;
}

.logo-text {
  font-size: 22px;
  font-weight: bold;
  color: #ff9900;
  text-decoration: none;
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  letter-spacing: 0.5px;
}

.icon-link {
  color: #333;
  font-size: 20px;
  text-decoration: none;
  transition: color 0.3s ease;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-link:hover {
  color: #ff9900;
}

.cart-count,
.badge {
  position: absolute;
  top: -5px;
  right: -8px;
  background: red;
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 50%;
  font-weight: bold;
  line-height: 1;
}

#account-icon img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background-color: #f5f5f5;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
  object-fit: cover;
}

.adastra-spa-header {
  transition: transform 0.3s ease;
  will-change: transform;
}

.adastra-spa-header.hide-on-scroll {
  transform: translateY(-100%);
}

.softadastra {
  font-size: 1.6em;
  font-weight: 700;
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.5px;
}

.softadastra .soft {
  color: #ff9900;
}

.softadastra .adastra {
  background: linear-gradient(90deg, #333, #ff9900);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-move 3s ease infinite;
  background-size: 200% auto;
}

.softadastra .dotcom {
  color: #999;
  font-size: 0.8em;
  font-weight: 400;
  margin-left: 4px;
}

/* Animation du dégradé */
@keyframes gradient-move {
  0% {
    background-position: 0% center;
  }

  50% {
    background-position: 100% center;
  }

  100% {
    background-position: 0% center;
  }
}

/* Responsive mobile : cacher .com et réduire les tailles */
@media (max-width: 600px) {
  .softadastra {
    font-size: 1.3em;
    gap: 2px;
    letter-spacing: 0.3px;
  }

  .softadastra .dotcom {
    display: none;
  }

  .softadastra .adastra {
    animation: gradient-move 4s ease infinite;
    background-size: 250% auto;
  }
}

@media (max-width: 600px) {
  .adastra-spa-header {
    height: 56px;
    padding: 0 14px;
  }

  .logo-text {
    font-size: 18px;
  }

  .icon-link {
    font-size: 18px;
  }

  .cart-count,
  .badge {
    font-size: 10px;
    top: -12px;
    right: -6px;
  }

  #account-icon img {
    width: 26px;
    height: 26px;
  }
}

.product-info span {
  display: inline-block !important;
  max-width: 180px !important;
  /* Ajuste selon la place dispo */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
  font-weight: 500 !important;
  color: #333 !important;
  text-decoration: none !important;
}

.adastra-card-country-img {
  margin-bottom: 10px !important;
  height: 14px !important;
  width: 20px !important;
  border-radius: 0px !important;
}

.adastra-spa-header .icon-link i,
.adastra-spa-header .icon-link span,
.adastra-spa-header .header-center {
  color: #f8f9fa;
}

.header-center {
  font-size: 1.5rem;
  font-weight: 600;
  color: #f8f9fa;
  text-align: center;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 0.05em;
  user-select: none;
}

.badge,
.cart-count {
  background-color: #dc3545;
  /* Rouge vif pour bien ressortir */
  color: white;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 10px;
  position: absolute;
  top: 0;
  right: 0;
}

.icon-link {
  color: #f8f9fa;
  position: relative;
  padding: 0 10px;
  text-decoration: none;
}

.icon-link:hover {
  color: #ffffff;
}

.thumbnail-images img {
  border: 0px solid transparent;
}
:root {
  --adastra-bg: #ffffff;
  --adastra-text: #333333;
  --adastra-accent: #ff9900;
  --adastra-accent-hover: #e68200;
  --adastra-border: #e0e0e0;
}
main,
.main-content,
.show-page {
  margin-top: 60px;
}

.user-info {
  background-color: #f9f9f9 !important;
}

.adastra-carousel-wrapper {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  background: #fff;
}

.adastra-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 10px;
}

.article-card {
  flex: 0 0 auto;
  width: 220px;
  scroll-snap-align: start;
}

.carousel-nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  background-color: #ff9900;
  border: none;
  font-size: 24px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 2;
  transition: background 0.2s;
  color: #fff;
}

.carousel-nav.left {
  left: 0;
}

.carousel-nav.right {
  right: 0;
}

.carousel-nav:hover {
  background-color: rgba(255, 255, 255, 0.9);
  color: #000;
}

.product-title,
.card-container .app-title {
  font-family: "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  border-radius: 8px;
  padding: 0;
  margin: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 100%;
  transition: max-height 0.3s ease;
  max-height: 100px;
  overflow: hidden;
  position: relative;
}

@media (max-width: 768px) {
  .product-title,
  .card-container .app-title {
    font-size: 1rem;
  }
}
.price-with-shipping {
  padding: 0;
  border: 0px solid #fff;
}
#priceContainer {
  border-top: 0px solid #fff;
}
@media (max-width: 768px) {
  /* Réduction des titres trop grands */
  h1 {
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
  }

  h2 {
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
  }

  h3 {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
  }

  p,
  li,
  .product-info span,
  .product-condition span,
  .product-description,
  .user-details p,
  .user-protection-fee p,
  .review-form-container textarea,
  .review-form-container input,
  .product-brand span,
  .product-category span,
  .product-created-at span,
  .product-views span {
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
  }

  .product-title {
    font-size: 1.1rem !important;
  }

  .product-price {
    font-size: 1.2rem !important;
  }

  .user-photo {
    width: 48px !important;
    height: 48px !important;
  }

  .review-form-container h1,
  .review-form-container h2,
  .card-container .app-title {
    font-size: 1.2rem !important;
  }

  .checkout-action-link {
    font-size: 0.9rem !important;
    padding: 10px 14px !important;
  }

  #toggleDescription {
    font-size: 0.9rem !important;
  }

  .share-option {
    font-size: 0.9rem !important;
  }
}

/****************************************************************************************************************************************/
.adastra-img-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #ff9900;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.image-loader-container {
  position: relative;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.thumb-wrapper {
  padding: 0;
}

.thumbnail-img {
  margin: 0;
  padding: 0;
}

.containeres {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 480px) {
  .checkout-action-link.order-btn {
    font-size: 0.8rem !important;
    padding: 6px !important;
  }

  .fancybox-image,
  .fancybox-spaceball {
    padding-left: 0;
  }
}

.containeres {
  margin-top: 20px !important;
  padding-top: 0 !important;
}

@media (max-width: 480px) {
  .checkout-action-link.order-btn {
    font-size: 0.8rem !important;
    padding: 11px !important;
  }
}

.checkout-buttons {
  margin-bottom: 5px;
}

@media (max-width: 1024px) {
  .artrio-navbar-wrapper {
    display: none !important;
  }

  body {
    padding-bottom: 0 !important;
  }
}

.product-info > div:not(:last-child),
.product-custom-field:not(:last-child) {
  border-bottom: 1px solid #eee;
  padding-bottom: 0;
  margin-bottom: 0;
}
/* ================ Design tokens (prefix adastra) ================ */
:root {
  --adastra-lb-bg: rgba(0, 0, 0, 0.9);
  --adastra-lb-btn-bg: rgba(28, 28, 28, 0.55);
  --adastra-lb-btn-bg-hover: rgba(28, 28, 28, 0.75);
  --adastra-lb-icon: #fff;
  --adastra-lb-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  --adastra-lb-radius: 12px;
  --adastra-safe-top: env(safe-area-inset-top, 0px);
  --adastra-safe-right: env(safe-area-inset-right, 0px);
  --adastra-safe-left: env(safe-area-inset-left, 0px);
}

/* Overlay */
.adastra-lightbox {
  position: fixed;
  inset: 0;
  background: var(--adastra-lb-bg);
  display: none;
  z-index: 9999;
}

.adastra-lightbox.is-open {
  display: block;
}

/* Topbar (compteur + close) — position fixe: toujours visible */
.adastra-lightbox__topbar {
  position: fixed;
  top: calc(12px + var(--adastra-safe-top));
  left: calc(12px + var(--adastra-safe-left));
  right: calc(12px + var(--adastra-safe-right));
  height: 0;
  /* on n’occupe pas d’espace, éléments en position absolue/fixe */
  z-index: 10001;
}

.adastra-lightbox__counter {
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  pointer-events: none;
}

.adastra-lightbox__btn--close {
  position: fixed !important;
  top: calc(12px + var(--adastra-safe-top));
  right: calc(12px + var(--adastra-safe-right));
}

/* Contenu central (flèches + stage) */
.adastra-lightbox__content {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr minmax(0, 1fr) 1fr;
  /* zones flèche / stage / flèche */
  align-items: center;
  justify-items: center;
}

/* Stage — fixe la zone d’affichage (même taille perçue pour toutes les images) */
.adastra-lightbox__stage {
  width: min(92vw, 1280px);
  /* ratio adaptable: 4/3 par défaut; change en 1/1 si tu veux carré  */
  aspect-ratio: 4 / 3;
  max-height: 88vh;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--adastra-lb-radius);
  box-shadow: var(--adastra-lb-shadow);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Image — toujours contenue dans le stage */
.adastra-lightbox__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  transition: transform 0.12s ease;
  cursor: zoom-in;
  touch-action: none;
}

/* Boutons (prev/next/close) */
.adastra-lightbox__btn {
  border: 0;
  background: var(--adastra-lb-btn-bg);
  color: var(--adastra-lb-icon);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  transition: background 0.18s ease, transform 0.12s ease, opacity 0.18s ease;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.adastra-lightbox__btn:active {
  transform: translateZ(0) scale(0.98);
}

/* Prev/Next — zones latérales centrées, gros hit-area (comme Amazon/Alibaba) */
.adastra-lightbox__btn--prev,
.adastra-lightbox__btn--next {
  position: relative;
}

.adastra-lightbox__btn--prev::before,
.adastra-lightbox__btn--next::before {
  content: "";
  position: absolute;
  inset: -24px;
  /* agrandit la zone cliquable */
}

/* Positionnement latéral */
.adastra-lightbox__btn--prev {
  justify-self: end;
  margin-right: clamp(8px, 2vw, 20px);
}

.adastra-lightbox__btn--next {
  justify-self: start;
  margin-left: clamp(8px, 2vw, 20px);
}

/* État zoom (pan) */
.adastra-lightbox__img.is-zoomed {
  cursor: grab;
}

.adastra-lightbox__img.is-zoomed:active {
  cursor: grabbing;
}

/* Accessibilité / UX */
body.adastra-no-scroll {
  overflow: hidden;
}

@media (max-width: 768px) {
  .adastra-lightbox__btn {
    width: 44px;
    height: 44px;
  }

  .adastra-lightbox__stage {
    width: 94vw;
    aspect-ratio: 3/4;
    max-height: 86vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .adastra-lightbox__img {
    transition: none;
  }
}

/* --- Forcer les flèches en overlay hors du stage, bien visibles --- */
.adastra-lightbox__btn--prev,
.adastra-lightbox__btn--next {
  position: fixed !important;
  /* sort du grid et du stage */
  top: 50%;
  transform: translateY(-50%);
  z-index: 10002;
  /* au-dessus du stage et des ombres */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.35);
  /* anneau léger pour contraste */
}

/* marges depuis les bords de l’écran */
.adastra-lightbox__btn--prev {
  left: clamp(10px, 2vw, 28px);
}

.adastra-lightbox__btn--next {
  right: clamp(10px, 2vw, 28px);
}

/* hit-area agrandie (clic confortable) */
.adastra-lightbox__btn--prev::before,
.adastra-lightbox__btn--next::before {
  content: "";
  position: absolute;
  inset: -18px;
  /* augmente zone cliquable sans agrandir visuel */
}

/* Sur écrans étroits, rapproche un peu mais garde la lisibilité */
@media (max-width: 640px) {
  .adastra-lightbox__btn--prev {
    left: clamp(6px, 3vw, 16px);
  }

  .adastra-lightbox__btn--next {
    right: clamp(6px, 3vw, 16px);
  }

  .adastra-lightbox__btn {
    width: 44px;
    height: 44px;
  }
}

/* S’assure que le stage ne “mange” pas les clics sur les flèches */
.adastra-lightbox__stage {
  position: relative;
  z-index: 10000;
}

/* ===== Correctifs ouverture/centrage ===== */

/* 1) Popup FERMÉ par défaut */
.adastra-lightbox {
  display: none;
  /* ⬅️ important */
  opacity: 0;
  pointer-events: none;
  align-items: center;
  /* gardés pour .is-open */
  justify-content: center;
  /* gardés pour .is-open */
}

/* 2) Ouvert = centré et interactif */
.adastra-lightbox.is-open {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

/* 3) Le conteneur central occupe l’écran uniquement quand ouvert */
.adastra-lightbox__content {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 4) Stage bien centré */
.adastra-lightbox__stage {
  margin: 0 auto;
}

/* 5) Flèches FIXES (ne bougent pas) et hors de l'image */
.adastra-lightbox__btn--prev,
.adastra-lightbox__btn--next {
  position: fixed !important;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10002;
  left: auto;
  right: auto;
  transition: background 0.18s ease, box-shadow 0.18s ease;
  /* pas de transform */
}

.adastra-lightbox__btn--prev {
  left: clamp(10px, 2vw, 28px);
}

.adastra-lightbox__btn--next {
  right: clamp(10px, 2vw, 28px);
}

.adastra-lightbox__btn--prev::before,
.adastra-lightbox__btn--next::before {
  content: "";
  position: absolute;
  inset: -18px;
  /* hit-area élargie sans décaler le visuel */
}

.adastra-lightbox__btn:hover {
  background: var(--adastra-lb-btn-bg-hover);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
}

.adastra-lightbox__btn:active {
  transform: none;
}

.adastra-lightbox__btn--prev:active,
.adastra-lightbox__btn--next:active {
  transform: translateY(-50%);
}

/* 6) Le stage reste cliquable sans couvrir les flèches */
.adastra-lightbox__stage {
  position: relative;
  z-index: 10000;
}

/* 7) Mobile */
@media (max-width: 640px) {
  .adastra-lightbox__btn--prev {
    left: clamp(6px, 3vw, 16px);
  }

  .adastra-lightbox__btn--next {
    right: clamp(6px, 3vw, 16px);
  }
}

.main-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* L’image toujours au-dessus du fond */
.main-image img {
  max-width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
  /* image visible par-dessus le conteneur */
}

/* Spinner par-dessus l’image */
.adastra-loader {
  position: absolute;
  inset: 0;
  /* occupe tout le bloc */
  display: none;
  align-items: center;
  /* centré */
  justify-content: center;
  /* centré */
  z-index: 2;
  /* au-dessus de l’image */
  pointer-events: none;
  /* ne bloque pas les clics */
}

.adastra-loader.is-visible {
  display: flex;
}

.adastra-loader::before {
  content: "";
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.15);
  border-top-color: var(--brand, #ff9900);
  animation: adastra-spin 0.6s linear infinite;
}

@keyframes adastra-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Optionnel : image un peu fade pendant le chargement */
.main-image img.is-loading {
  opacity: 0.6;
}

/* image invisible tant que non .is-loaded */
.main-image img {
  opacity: 0;
  transition: opacity 0.18s ease;
}

.main-image img.is-loaded {
  opacity: 1;
}

/* empêche le flash avant chargement */
.main-image img {
  opacity: 0;
  transition: opacity 0.18s ease;
}

.main-image img.is-loaded {
  opacity: 1;
}

/* spinner centré */
.main-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.adastra-loader {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}

.adastra-loader.is-visible {
  display: flex;
}

.adastra-loader::before {
  content: "";
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.15);
  border-top-color: var(--brand, #ff9900);
  animation: adastra-spin 0.6s linear infinite;
}

@keyframes adastra-spin {
  to {
    transform: rotate(360deg);
  }
}
/* =========================
                Adastra Product — Alibaba style
                (fond blanc, texte #212121)
                ========================= */

/* Tokens */
:root {
  --adastra-text: #212121;
  --adastra-muted: #5f6368;
  /* gris description/labels */
  --adastra-soft: #f6f7f9;
  /* fonds très légers */
  --adastra-border: #eaecef;
  /* séparateurs */
  --adastra-accent: #ff6a00;
  /* orange prix Alibaba-like */
  --adastra-link: #0066c0;
  /* liens info */
  --adastra-green: #0a8f3a;
  /* safe/trust */
  --adastra-warning-bg: #fff3e8;
  /* encart livraison */
  --adastra-warning-bd: #ffd9bf;
  /* bord encart */
  --adastra-radius: 10px;
  --adastra-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Global */
.adastra-product-title {
  font: 700 1.9rem/1.2 "Inter", system-ui, -apple-system, Segoe UI, Roboto,
    sans-serif;
  color: var(--adastra-text);
  margin: 0 0 12px;
}

/* ===== PRICE BLOCK ===== */
.adastra-price-wrapper {
  background: #fff;
  border: 1px solid var(--adastra-border);
  border-radius: var(--adastra-radius);
  box-shadow: var(--adastra-shadow);
  padding: 16px 16px 12px;
  margin: 8px 0 0px;
}

.adastra-price {
  margin: 0 0 4px;
  color: var(--adastra-accent);
  font-weight: 800;
  letter-spacing: 0.2px;
}

.adastra-price-amount {
  font-size: 2rem;
  line-height: 1;
}

#adastraPriceContainer {
  display: grid;
  gap: 6px;
}

/* Sous-ligne: USD approx, protection, etc. */
.adastra-price-sub {
  font-size: 0.92rem;
  color: var(--adastra-muted);
}

#adastraPriceContainer a,
.adastra-price-sub a {
  color: var(--adastra-link);
  text-decoration: none;
}

#adastraPriceContainer a:hover,
.adastra-price-sub a:hover {
  text-decoration: underline;
}

/* Badges confiance (optionnels) */
.adastra-price-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.adastra-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--adastra-border);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.82rem;
  color: var(--adastra-text);
  background: #fff;
}

.adastra-badge i {
  color: var(--adastra-green);
}

/* ===== MODAL ===== */
.adastra-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.45);
}

.adastra-modal-content {
  background: #fff;
  margin: 60px auto;
  max-width: 520px;
  border-radius: 12px;
  border: 1px solid var(--adastra-border);
  box-shadow: var(--adastra-shadow);
  padding: 18px 18px 14px;
}

.adastra-modal-details {
  font-size: 0.95rem;
  color: #333;
  text-align: left;
}

/* ===== DIVIDERS ===== */
.adastra-divider {
  margin: 3px 0;
  border: 0;
  border-top: 1px solid var(--adastra-border);
}

/* ===== LOCATION (style “pill”) ===== */
.adastra-location {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--adastra-text);
  font-size: 0.95rem;
}

.adastra-location img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--adastra-border);
}

.adastra-location span {
  background: var(--adastra-soft);
  border: 1px solid var(--adastra-border);
  padding: 6px 10px;
  border-radius: 999px;
}

/* ===== INFO GRID ===== */
.adastra-product-info {
  border: 1px solid var(--adastra-border);
  border-radius: var(--adastra-radius);
  padding: 12px;
  background: #fff;
  display: grid;
  gap: 10px;
}

.adastra-product-info > div {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 6px 2px;
  border-bottom: 1px dashed var(--adastra-border);
}

.adastra-product-info > div:last-child {
  border-bottom: 0;
}

.adastra-product-info strong {
  min-width: 140px;
  color: var(--adastra-muted);
  font-weight: 600;
  font-size: 0.95rem;
}

.adastra-product-info span {
  color: var(--adastra-text);
  font-size: 0.96rem;
}

/* liens brand/category */
.adastra-brand-link,
.adastra-category-link,
.adastra-brand-link-inline {
  color: var(--adastra-link);
  text-decoration: none;
}

.adastra-brand-link:hover,
.adastra-category-link:hover,
.adastra-brand-link-inline:hover {
  text-decoration: underline;
}

/* ===== CUSTOM FIELDS (table-like) ===== */
.adastra-custom-fields {
  margin-top: 16px;
  border: 1px solid var(--adastra-border);
  border-radius: var(--adastra-radius);
  overflow: hidden;
  background: #fff;
}

.adastra-custom-fields-header {
  padding: 10px 12px;
  font-weight: 700;
  color: var(--adastra-text);
  background: var(--adastra-soft);
  border-bottom: 1px solid var(--adastra-border);
}

.adastra-custom-field-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--adastra-border);
}

.adastra-custom-field-row:nth-child(even) {
  background: #fafbfc;
}

.adastra-custom-field-row:last-child {
  border-bottom: 0;
}

.adastra-custom-field-label {
  color: var(--adastra-muted);
  font-weight: 600;
  font-size: 0.94rem;
}

.adastra-custom-field-value {
  color: var(--adastra-text);
  font-size: 0.95rem;
}

.adastra-see-more-custom-fields {
  display: inline-block;
  margin: 10px 12px 12px;
  font-size: 0.92rem;
  color: var(--adastra-link);
  text-decoration: none;
}

.adastra-see-more-custom-fields:hover {
  text-decoration: underline;
}

/* ===== SHIPPING BOX (notice Alibaba) ===== */
.adastra-shipping-section {
  margin-top: 16px;
  background: var(--adastra-warning-bg);
  border: 1px solid var(--adastra-warning-bd);
  border-radius: var(--adastra-radius);
  padding: 12px;
}

.adastra-shipping-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.95rem;
  color: var(--adastra-text);
}

.adastra-shipping-label {
  font-weight: 700;
}

.adastra-shipping-price {
  font-weight: 600;
}

.adastra-shipping-promo {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--adastra-muted);
  font-size: 0.92rem;
}

.adastra-shipping-promo i {
  color: var(--adastra-accent);
}

/* ===== DESCRIPTION ===== */
.adastra-description {
  margin-top: 16px;
  color: var(--adastra-text);
  font-size: 0.96rem;
  line-height: 1.6;
  max-height: 140px;
  overflow: hidden;
  transition: max-height 0.28s ease;
}

.adastra-description.expanded {
  max-height: 1200px;
}

.adastra-description-toggle {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--adastra-link);
  font-size: 0.95rem;
  cursor: pointer;
}

.adastra-description-toggle:hover {
  text-decoration: underline;
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
  .adastra-custom-field-row {
    grid-template-columns: 160px 1fr;
  }
}

@media (max-width: 680px) {
  .adastra-custom-field-row {
    grid-template-columns: 1fr;
  }

  .adastra-product-info > div {
    flex-wrap: wrap;
  }

  .adastra-product-info strong {
    min-width: 0;
    width: 100%;
  }
}

/* ==== FIX: une ligne, valeur à droite (desktop & mobile) ==== */
.adastra-product-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.adastra-product-info > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 2px;
  border-bottom: 1px dashed var(--adastra-border, #eaecef);
  flex-wrap: nowrap;
  /* 🚫 pas de wrap */
}

.adastra-product-info > div:last-child {
  border-bottom: 0;
}

/* Label */
.adastra-product-info > div strong {
  color: var(--adastra-muted, #5f6368);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  /* ne coupe jamais */
  margin-right: 12px;
  flex: 0 0 auto;
  /* largeur auto, pas de stretch */
  min-width: fit-content;
}

/* Valeur */
.adastra-product-info > div span {
  flex: 1 1 auto;
  /* prend l’espace restant */
  text-align: right;
  white-space: nowrap;
  /* reste sur une ligne */
  overflow: hidden;
  /* coupe si trop long */
  text-overflow: ellipsis;
  /* … si trop long */
  color: var(--adastra-text, #212121);
  font-size: 0.96rem;
  line-height: 1.4;
}

/* Sélecteur plus spécifique pour écraser l’ancienne règle mobile */
/* ===== Mobile visibility boost ===== */
@media (max-width: 680px) {
  .adastra-product-info {
    margin: 8px 0;
    border-radius: 12px;
  }

  .adastra-product-info > div {
    padding: 12px 10px;
    /* + d’espace tactile */
    min-height: 44px;
    /* touch target confortable */
  }

  /* Label plus lisible et largeur fixe */
  .adastra-product-info > div strong {
    font-size: 1rem;
    color: #2c2c2c;
    /* contraste + fort */
    flex: 0 0 42%;
    /* largeur stable à gauche */
    white-space: nowrap;
    margin-right: 8px;
  }

  /* Valeur plus grande, toujours à droite, ellipsis si trop long */
  .adastra-product-info > div span {
    font-size: 1.02rem;
    flex: 0 1 58%;
    /* zone de texte plus large */
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Alternance légère pour séparer visuellement les lignes */
  .adastra-product-info > div:nth-child(odd) {
    background: #f7f9fb;
  }

  /* Séparateur plus visible sur fond clair */
  .adastra-product-info > div {
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
  }
}

/* Masquage des lignes supplémentaires (géré par JS) */
.is-spec-hidden {
  display: none;
}

/* Conteneur specs (déjà présent) */
.adastra-specs {
  margin-top: 16px;
  border: 1px solid var(--adastra-border);
  border-radius: var(--adastra-radius);
  background: #fff;
  overflow: hidden;
}

.adastra-specs__header {
  padding: 12px 14px;
  font-weight: 700;
  color: var(--adastra-text);
  background: var(--adastra-soft);
  border-bottom: 1px solid var(--adastra-border);
}

.adastra-specs__spinner {
  padding: 14px;
  color: var(--adastra-muted);
  font-size: 0.92rem;
}

/* ===== Tableau 2 lignes / N colonnes ===== */
.adastra-specsGridWrap {
  overflow-x: auto;
  /* scroll horizontal si trop de colonnes */
  -webkit-overflow-scrolling: touch;
}

.adastra-specsGrid {
  width: max-content;
  /* s’étend selon nb de colonnes */
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  /* colonnes auto */
  font-size: 0.96rem;
}

/* Cellules */
.adastra-specsGrid th,
.adastra-specsGrid td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--adastra-border);
  border-right: 1px solid var(--adastra-border);
  min-width: 180px;
  /* largeur mini d’une colonne desktop */
  vertical-align: middle;
}

/* 1ère cellule bord gauche, enlever dernier bord droit si tu veux */
.adastra-specsGrid th:first-child,
.adastra-specsGrid td:first-child {
  border-left: 1px solid var(--adastra-border);
}

/* Ligne labels (top) */
.adastra-specsGrid__rowLabels {
  background: #fafbfc;
}

.adastra-specsGrid__label {
  text-align: left;
  color: var(--adastra-muted);
  font-weight: 600;
  white-space: nowrap;
}

/* Ligne valeurs (bottom) — alignées à droite comme product-info */
.adastra-specsGrid__value {
  text-align: right;
  /* 🔥 alignement à droite */
  color: var(--adastra-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover subtil (optionnel) */
.adastra-specsGrid td:hover {
  background: #f6f7f9;
}

/* ===== Responsive ===== */
@media (max-width: 680px) {
  /* 1) Scroll horizontal fluide, sans rebonds bizarres */
  .adastra-specsGridWrap {
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    /* optionnel: snap doux */
    padding-bottom: 4px;
    /* espace pour scroll */
  }

  /* 2) Table garde sa largeur naturelle (colonnes) */
  .adastra-specsGrid {
    width: max-content !important;
    min-width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
  }

  /* 3) Colonnes: pas de wrap, largeur mini confortable */
  .adastra-specsGrid th,
  .adastra-specsGrid td {
    min-width: 160px;
    /* ajuste à ton goût (140–200) */
    padding: 12px 12px;
    white-space: nowrap !important;
    /* 🔒 pas de retour à la ligne */
  }

  /* 4) Labels (ligne du haut) : jamais coupés */
  .adastra-specsGrid__label {
    text-align: left;
    white-space: nowrap !important;
  }

  /* 5) Valeurs (ligne du bas) : alignées à droite + ellipsis */
  .adastra-specsGrid__value {
    text-align: right !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block;
    /* ellipsis fiable */
    max-width: 100%;
    scroll-snap-align: start;
    /* optionnel: snap par colonne */
  }
}

/* ==== SPECS GRID — FIX GLOBAL ==== */
/* Empêche toute règle précédente de transformer les cellules en flex/block */
.adastra-specsGrid {
  width: max-content !important;
  min-width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: auto !important;
  /* colonnes auto */
}

.adastra-specsGridWrap {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* Forcer le comportement "table" */
.adastra-specsGrid th,
.adastra-specsGrid td {
  display: table-cell !important;
  /* 🔒 pas de display:block hérité */
  vertical-align: middle;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--adastra-border);
  border-right: 1px solid var(--adastra-border);
  white-space: nowrap !important;
  /* pas de retour à la ligne */
  max-width: 260px;
  /* pour ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bord gauche sur la 1re cellule */
.adastra-specsGrid th:first-child,
.adastra-specsGrid td:first-child {
  border-left: 1px solid var(--adastra-border);
}

/* Ligne labels */
.adastra-specsGrid__rowLabels {
  background: #fafbfc;
}

.adastra-specsGrid__label {
  text-align: left !important;
  /* libellés à gauche */
  color: var(--adastra-muted);
  font-weight: 600;
}

/* Valeurs: à GAUCHE (début de cellule), comme dans un tableau classique */
.adastra-specsGrid__value {
  text-align: left !important;
  /* ⬅️ correction: plus à droite */
  color: var(--adastra-text);
}

/* Dimensions de colonne cohérentes */
.adastra-specsGrid th,
.adastra-specsGrid td {
  min-width: 180px;
}

/* ===== Mobile: même rendu que desktop (2 lignes, scroll horizontal) ===== */
@media (max-width: 680px) {
  .adastra-specsGridWrap {
    padding-bottom: 4px;
  }

  .adastra-specsGrid th,
  .adastra-specsGrid td {
    min-width: 150px;
    /* un peu plus compact */
    padding: 12px 10px !important;
  }

  /* Garder le comportement "une ligne par cellule" + ellipsis */
  .adastra-specsGrid__label,
  .adastra-specsGrid__value {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Fades gauche/droite pour indiquer le scroll horizontal */
.adastra-specsGridWrap {
  position: relative;
  /* nécessaire pour les pseudo-éléments */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Dégradé gauche */
.adastra-specsGridWrap::before,
.adastra-specsGridWrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  /* largeur de la zone de fade */
  pointer-events: none;
  /* clics passent à travers */
  transition: opacity 0.2s ease;
  z-index: 1;
}

/* Couleur du fond = blanc ; adapte si ton fond change */
.adastra-specsGridWrap::before {
  left: 0;
  background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 1;
}

.adastra-specsGridWrap::after {
  right: 0;
  background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 1;
}

/* Petites ombres pour relief (optionnel) */
.adastra-specsGridWrap.is-fading::before {
  box-shadow: inset -6px 0 8px -6px rgba(0, 0, 0, 0.12);
}

.adastra-specsGridWrap.is-fading::after {
  box-shadow: inset 6px 0 8px -6px rgba(0, 0, 0, 0.12);
}

/* Cache le fade gauche si au tout début */
.adastra-specsGridWrap.is-at-start::before {
  opacity: 0;
}

/* Cache le fade droit si tout à la fin */
.adastra-specsGridWrap.is-at-end::after {
  opacity: 0;
}

.adastra-specsGridWrap {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Active le scroll fluide iOS uniquement sur petits écrans */
@media (max-width: 768px) {
  .adastra-specsGridWrap {
    -webkit-overflow-scrolling: touch;
  }

  .product-details {
    padding: 10px;
  }
}

/* Desktop : masquer la scrollbar si tu veux, mais garder le style normal */
@media (min-width: 769px) {
  .adastra-specsGridWrap {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  }

  .adastra-specsGridWrap::-webkit-scrollbar {
    height: 6px;
  }

  .adastra-specsGridWrap::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }
}

/* Fades */
.adastra-specsGridWrap::before,
.adastra-specsGridWrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1;
}

.adastra-specsGridWrap::before {
  left: 0;
  background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.adastra-specsGridWrap::after {
  right: 0;
  background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.adastra-specsGridWrap.is-fading::before {
  box-shadow: inset -6px 0 8px -6px rgba(0, 0, 0, 0.12);
}

.adastra-specsGridWrap.is-fading::after {
  box-shadow: inset 6px 0 8px -6px rgba(0, 0, 0, 0.12);
}

.adastra-specsGridWrap.is-at-start::before {
  opacity: 0;
}

.adastra-specsGridWrap.is-at-end::after {
  opacity: 0;
}

.adastra-location-box {
  background: #fef6e4;
  /* couleur douce orangée */
  border: 1px solid #fcd34d;
  /* bordure jaune clair */
  border-radius: 8px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  margin-top: 10px;
}

.adastra-location {
  display: flex;
  align-items: center;
  gap: 8px;
}

.adastra-location img {
  width: 28px;
  height: 18px;
  border-radius: 3px;
  object-fit: cover;
}

#adastraProductLocation {
  font-size: 0.95rem;
  font-weight: 500;
  color: #374151;
}

/* Responsive */
@media (max-width: 480px) {
  .adastra-location-box {
    width: 100%;
    justify-content: flex-start;
    /* ✅ aligné au début sur mobile */
  }
}

.adastra-price-wrapper {
  display: block;
}

.adastra-price {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.adastra-price-amount {
  font-size: 1.4rem;
  font-weight: 800;
  color: #222;
}

.adastra-price-compare {
  text-decoration: line-through;
  color: #999;
  font-weight: 600;
  margin-left: 0.25rem;
}

.adastra-price-off {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff1e6;
  color: #d35400;
  border: 1px solid #ffd6a8;
  font-weight: 700;
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .adastra-price {
    gap: 0.4rem;
  }

  .adastra-price-amount {
    font-size: 1.25rem;
  }
}

/* Ligne de prix (actuel + barré + badge) */
.adastra-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0;
  /* propre */
}

/* Prix actuel */
.adastra-price-amount {
  font-size: 1.75rem;
  font-weight: 800;
  color: #ff9900;
}

/* Prix barré (compare-at) */
.adastra-price-compare {
  font-size: 1rem;
  font-weight: 600;
  color: #9aa0a6;
  text-decoration: line-through;
}

/* Badge -X% */
.adastra-price-off {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff1e0;
  color: #b54708;
  border: 1px solid #ffd6a8;
}

/* Sous-ligne (approx + liens) */
.adastra-price-sub {
  margin-top: 4px;
  color: #5f6368;
  font-size: 0.92rem;
}

/* Responsive léger */
@media (max-width: 640px) {
  .adastra-price-amount {
    font-size: 1.5rem;
  }

  .adastra-price-compare {
    font-size: 0.95rem;
  }

  .adastra-price-off {
    font-size: 0.8rem;
  }
}
.adastra-price-wrapper .adastra-price-compare {
  margin-left: 0.5rem;
  color: #777;
  text-decoration: line-through;
  font-weight: 500;
}

.adastra-price-wrapper .adastra-price-off {
  margin-left: 0.5rem;
  background: #fff1e0;
  color: #d35400;
  border: 1px solid #ffd6a8;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ===== Share button & popover ===== */
.adastra-share-container {
  position: relative;
  /* pour positionner le popover */
  display: inline-block;
}

/* Bouton principal */
.adastra-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--adastra-border, #eaecef);
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: transform 0.06s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.adastra-share-btn i {
  color: var(--adastra-accent, #ff6a00);
}

.adastra-share-btn:hover {
  border-color: #d8dbe1;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

.adastra-share-btn:active {
  transform: translateY(1px);
}

.adastra-share-btn:focus-visible {
  outline: 2px solid #99c2ff;
  outline-offset: 2px;
  border-color: #99c2ff;
}

/* Popover */
.adastra-share-popup {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--adastra-border, #eaecef);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 1000;

  /* animation d’entrée */
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  /* tant que caché */
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* flèche */
.adastra-share-popup::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 16px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-left: 1px solid var(--adastra-border, #eaecef);
  border-top: 1px solid var(--adastra-border, #eaecef);
  transform: rotate(45deg);
}

/* État visible (au lieu de style="display:block") */
.adastra-share-popup.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Items */
.adastra-share-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  color: #111;
  font-size: 0.95rem;
  cursor: pointer;
  user-select: none;
}

.adastra-share-option i {
  width: 18px;
  text-align: center;
}

.adastra-share-option:hover {
  background: #f6f7f9;
}

/* Couleurs réseau (optionnel) */
.adastra-share-option .fa-facebook {
  color: #1877f2;
}

.adastra-share-option .fa-twitter {
  color: #1da1f2;
}

.adastra-share-option .fa-whatsapp {
  color: #25d366;
}

.adastra-share-option .fa-link {
  color: #6b7280;
}

/* Mobile: largeur plein écran si tu veux (optionnel) */
@media (max-width: 480px) {
  .adastra-share-container {
    display: block;
  }

  .adastra-share-popup {
    right: 12px;
    left: 12px;
    min-width: unset;
  }

  .adastra-share-popup::before {
    right: 32px;
  }
}

/* ===== Toasts ===== */
.adastra-toast-region {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
  /* clics passent si pas sur le toast */
}

.adastra-toast {
  pointer-events: auto;
  min-width: 240px;
  max-width: 92vw;
  background: #111;
  color: #fff;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.adastra-toast--show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.adastra-toast__icon {
  font-size: 1rem;
  line-height: 1;
}

.adastra-toast__text {
  flex: 1 1 auto;
}

.adastra-toast__close {
  background: transparent;
  border: 0;
  color: #fff;
  opacity: 0.8;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.adastra-toast__close:hover {
  opacity: 1;
}

/* Variants */
.adastra-toast--success {
  background: #0b7a32;
  border-color: rgba(255, 255, 255, 0.14);
}

.adastra-toast--error {
  background: #b91c1c;
  border-color: rgba(255, 255, 255, 0.14);
}

.adastra-toast--info {
  background: #1f2937;
  border-color: rgba(255, 255, 255, 0.14);
}

/* Mobile: un peu plus d’espace en bas */
@media (max-width: 480px) {
  .adastra-toast-region {
    bottom: 14px;
  }
}
:root {
  --as-text: #212121;
  --as-muted: #5f6368;
  --as-soft: #f6f7f9;
  --as-border: #eaecef;
  --as-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
  --as-accent: #ff9900;
  --as-green: #0a8f3a;
  --as-danger: #b91c1c;
  --as-radius: 16px;
}

/* --- Overlay --- */
.adastra-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.adastra-popup-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* --- Popup container --- */
.adastra-popup {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 100vw;
  background: #fff;
  border-radius: var(--as-radius) var(--as-radius) 0 0;
  border: 1px solid var(--as-border);
  box-shadow: 0 -10px 38px rgba(0, 0, 0, 0.18);
  z-index: 1001;
  opacity: 0;
  transition: transform 0.26s ease, opacity 0.18s ease;
}

.adastra-popup.is-open {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Desktop style */
@media (min-width: 768px) {
  .adastra-popup {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%) scale(0.98);
    width: min(560px, 92vw);
    border-radius: var(--as-radius);
    box-shadow: var(--as-shadow);
  }

  .adastra-popup.is-open {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* --- Header --- */
.adastra-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--as-accent);
  color: #fff;
  border-radius: var(--as-radius) var(--as-radius) 0 0;
}

.adastra-popup-header h5 {
  margin: 0;
  font: 700 1rem/1.2 Inter, system-ui, sans-serif;
}

.adastra-popup-close {
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 4px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.adastra-popup-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* --- Body --- */
.adastra-popup-body {
  padding: 16px;
}

.adastra-order-details {
  font-weight: 600;
  color: var(--as-text);
}

.adastra-unit-price {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
}

.adastra-separator {
  border: 0;
  border-top: 1px solid var(--as-border);
  margin: 14px 0;
}

/* --- Form --- */
.form-group {
  margin-bottom: 14px;
}

.form-group > label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  color: var(--as-text);
}

.form-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hidden-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Colors */
.color-radio label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--as-border);
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}

.color-box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.hidden-radio:checked + label {
  border-color: #bcd3ff;
  box-shadow: 0 0 0 3px rgba(0, 102, 192, 0.12);
}

/* Sizes */
.size-radio label {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--as-border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
}

.size-radio .hidden-radio:checked + label {
  border-color: #bcd3ff;
  background: #f9fbff;
  box-shadow: 0 0 0 3px rgba(0, 102, 192, 0.12);
}

/* Quantity */
#adastra_popup_quantity.form-control {
  width: 120px;
  padding: 8px 10px;
  border: 1px solid var(--as-border);
  border-radius: 10px;
  font-size: 0.95rem;
  color: var(--as-text);
}

/* --- Buttons --- */
.btn.btn-success {
  background: linear-gradient(180deg, #42c77a, #1ea85a);
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-weight: 700;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 8px 18px rgba(16, 185, 129, 0.25);
}

.btn.btn-success:disabled {
  background: #cfe9db;
  color: #6b7280;
  box-shadow: none;
}

/* --- Toast --- */
.adastra-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(16px);
  padding: 10px 14px;
  border-radius: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.adastra-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===========================
   Softadastra — Button (Alibaba style)
   Scope: .adastra-*
=========================== */

/* Tokens dédiés (pas de conflit) */
:root {
  --adastra-accent: #ff9900;
  /* Alibaba orange */
  --adastra-accent-hi: #ffae33;
  /* clair */
  --adastra-accent-lo: #ff7f00;
  /* foncé */
  --adastra-text-dark: #212121;
  --adastra-border: #eaecef;
  --adastra-shadow: 0 8px 22px rgba(255, 153, 0, 0.28);
  --adastra-shadow-hover: 0 10px 26px rgba(255, 153, 0, 0.35);
  --adastra-focus: 0 0 0 3px rgba(255, 153, 0, 0.25);
  --adastra-radius-pill: 999px;
}

/* Base */
.adastra-btn {
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 18px;
  font: 600 0.95rem/1 Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--adastra-radius-pill);
  background: linear-gradient(
    180deg,
    var(--adastra-accent-hi),
    var(--adastra-accent-lo)
  );
  box-shadow: var(--adastra-shadow);
  transition: transform 0.06s ease, box-shadow 0.2s ease, filter 0.15s ease;
  cursor: pointer;
}

/* html {
                            scrollbar-gutter: stable;
                        } */

/* évite le “shift” quand la scrollbar revient */
body {
  overscroll-behavior: none;
}

/* === Alibaba-like Size Pills === */
.form-radios {
  gap: 8px;
}

.size-radio {
  position: relative;
}

.size-radio label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  /* 44–48 si tu veux plus gros */
  height: 42px;
  border-radius: 9999px;
  /* cercle parfait */
  border: 1px solid var(--as-border);
  background: #fff;
  font: 700 0.95rem/1 Inter, system-ui, sans-serif;
  color: #111;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, box-shadow 0.2s ease,
    background 0.15s ease, transform 0.06s ease;
}

.size-radio label:hover {
  border-color: #d8dbe1;
}

.size-radio .hidden-radio:checked + label {
  border-color: #ff9900;
  box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.18);
  background: #fff9f1;
}

.size-radio .hidden-radio:disabled + label {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Variante “LG” si besoin : ajoute la classe --lg au wrapper .form-radios */
.form-radios.--lg .size-radio label {
  width: 48px;
  height: 48px;
  font-size: 1rem;
}

/* Cercles façon Alibaba */
.form-radios {
  gap: 10px;
}

.size-radio {
  position: relative;
}

.size-radio .hidden-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.size-radio label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 1px solid var(--as-border);
  background: #fff;
  color: #111;
  font: 700 0.95rem/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, box-shadow 0.2s, background 0.15s,
    transform 0.06s;
}

/* Toujours noir en texte quand actif */
.size-radio .hidden-radio:checked + label {
  background: #fff9f1;
  border-color: #ff9900;
  box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.18);
  color: #111 !important;
}

.size-radio .hidden-radio:checked + label .size-label {
  color: #111 !important;
}

.size-radio label .size-label {
  color: inherit;
}

/* empêche le scroll sans casser la position courante */
html.adastra-lock {
  overflow: hidden;
}
:root {
  --adastra-accent: #ff9900;
  --adastra-accent-hi: #ffae33;
}

/* helpers */
.only-desktop {
  display: flex;
}

.only-mobile {
  display: none;
}

/* Groupe de boutons dans le contenu */
.checkout-actions {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 10px;
}

/* Base boutons */
.sa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 16px;
  border-radius: 12px;
  font: 600 0.95rem/1 Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.2s ease, transform 0.06s ease;
}

.sa-btn svg {
  width: 1.15em;
  height: 1.15em;
  stroke: currentColor;
  fill: none;
}

/* Variantes */
.sa-btn--message {
  background: #0b5f6e;
  color: #fff;
}

/* bleu plein */
.sa-btn--offer {
  background: #fff;
  color: var(--adastra-accent);
  /* blanc + bordure orange */
  border: 1px solid var(--adastra-accent) !important;
}

.sa-btn--primary {
  background: linear-gradient(
    180deg,
    var(--adastra-accent-hi),
    var(--adastra-accent)
  );
  color: #fff;
  box-shadow: 0 8px 18px rgba(255, 153, 0, 0.25);
}

.sa-btn:hover {
  filter: brightness(1.05);
}

.sa-btn--primary:hover {
  box-shadow: 0 10px 20px rgba(255, 153, 0, 0.3);
}

/* Barre fixe mobile (Message + Order Now) */
.checkout-bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid #eaecef;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);
}

.checkout-bottombar .sa-btn {
  min-height: 48px;
  border-radius: 14px;
}

.checkout-bottombar .sa-btn {
  flex: 1 1 0;
}

/* 2 colonnes égales */
.checkout-bottom-spacer {
  height: 68px;
}

/* Responsive */
@media (max-width: 767px) {
  .only-desktop {
    display: none;
  }

  .only-mobile {
    display: flex;
  }

  .checkout-actions .sa-btn {
    width: 100%;
  }

  /* bloc en mobile */
}

@media (min-width: 768px) {
  .only-desktop {
    display: flex;
  }

  .only-mobile {
    display: none;
  }

  .checkout-actions {
    flex-direction: row;
    gap: 10px;
  }

  .checkout-actions .sa-btn {
    flex: 0 0 auto;
    width: auto;
  }

  /* largeur auto sur desktop */
}

/* ===== Mobile bottom bar – iPhone safe area + petits écrans ===== */
.checkout-bottombar {
  /* variables de confort */
  --bb-pad-v: 10px;
  /* padding vertical interne */
  --bb-pad-h: 12px;
  /* padding horizontal */
  --bb-height: 56px;
  /* hauteur nominale (boutons ~48px) */
  --bb-radius: 14px;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;

  display: flex;
  gap: 10px;
  padding: var(--bb-pad-v) var(--bb-pad-h);

  /* safe-area: legacy + moderne (le 2e l’emporte si présent) */
  padding-bottom: calc(var(--bb-pad-v) + constant(safe-area-inset-bottom));
  padding-bottom: calc(var(--bb-pad-v) + env(safe-area-inset-bottom, 0px));

  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid #eaecef;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);

  /* évite les “sauts” avec le visual viewport iOS */
  transform: translateZ(0);
  touch-action: manipulation;
}

.checkout-bottombar .sa-btn {
  min-height: calc(var(--bb-height) - 2 * var(--bb-pad-v));
  border-radius: var(--bb-radius);
  flex: 1 1 0;
  /* colonnes égales */
}

/* spacer = hauteur de la barre + safe-area, pour ne rien masquer */
.checkout-bottom-spacer {
  height: calc(var(--bb-height) + constant(safe-area-inset-bottom));
  height: calc(var(--bb-height) + env(safe-area-inset-bottom, 0px));
}

/* ===== Modes compacts pour petites hauteurs / landscape ===== */
@media (max-height: 680px) {
  .checkout-bottombar {
    --bb-pad-v: 8px;
    --bb-height: 52px;
    gap: 8px;
  }

  .checkout-bottombar .sa-btn {
    min-height: calc(var(--bb-height) - 2 * var(--bb-pad-v));
    font-size: 0.92rem;
  }
}

@media (max-height: 540px) {
  .checkout-bottombar {
    --bb-pad-v: 6px;
    --bb-height: 48px;
    gap: 6px;
  }

  .checkout-bottombar .sa-btn {
    min-height: calc(var(--bb-height) - 2 * var(--bb-pad-v));
    font-size: 0.9rem;
    padding: 10px 12px;
    /* un peu moins large */
  }
}

/* Cache sur desktop */
.only-mobile {
  display: none !important;
}

/* Affiche sur mobile */
@media (max-width: 767px) {
  .only-mobile {
    display: flex !important;
  }
}

/* Cacher les boutons "desktop" sur mobile */
@media (max-width: 767px) {
  .only-desktop {
    display: none !important;
  }
}

/* Cacher la version mobile sur desktop */
@media (min-width: 768px) {
  .only-mobile {
    display: none !important;
  }
}

:root {
  /* utilise déjà tes variables --order-* */
  --order-brand: #ff9900;
  --order-brand-600: #ff9900;
  --order-brand-700: #e58900;
  --order-text: #0b0c0f;
  --order-muted: #667085;
  --order-line: #e7e9ee;
  --order-card: #fff;
}

/* Groupe d’actions */
.order-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Base bouton */
.btn-order {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--order-line);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.2s ease, transform 0.02s,
    background 0.2s, color 0.2s, border-color 0.2s;
  background: var(--order-card);
  color: var(--order-text);
}

/* Icône */
.btn-order .btn-ico {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}

/* Spinner (masqué par défaut) */
.btn-order .btn-spinner {
  display: none;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-top-color: #fff;
  border-radius: 50%;
  animation: orderSpin 0.7s linear infinite;
}

@keyframes orderSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Primaire */
.btn-primary {
  background: linear-gradient(
    180deg,
    var(--order-brand-600),
    var(--order-brand)
  );
  color: #fff;
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 18px rgba(255, 153, 0, 0.25);
}

.btn-primary:hover:enabled {
  filter: brightness(1.05);
  box-shadow: 0 10px 20px rgba(255, 153, 0, 0.3);
}

.btn-primary:active:enabled {
  transform: translateY(1px);
}

/* Secondaire */
.btn-secondary {
  background: #f5f6f9;
  color: #1f2937;
  border-color: #e5e7eb;
  font-weight: 700;
}

.btn-secondary:hover {
  background: #eceff4;
  border-color: #d8dde6;
}

.btn-secondary:active {
  background: #e8ebf2;
}

/* Disabled */
.btn-order:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  box-shadow: none;
}

/* État loading (via [data-loading="true"]) */
.btn-order[data-loading="true"] {
  pointer-events: none;
}

.btn-order[data-loading="true"] .btn-label {
  opacity: 0;
}

.btn-order[data-loading="true"] .btn-ico {
  display: none;
}

.btn-order[data-loading="true"] .btn-spinner {
  display: inline-block;
}

/* Responsif : stack propre */
@media (max-width: 720px) {
  .order-actions {
    gap: 8px;
  }

  .btn-order {
    flex: 1 1 auto;
    justify-content: center;
  }
}
.sa-wholesale {
  display: grid;
  gap: 14px;
}

.sa-wh-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line, #e7e9ee);
  border-radius: 12px;
  font-weight: 600;
}

.sa-wh-note {
  font-size: 0.9rem;
  color: var(--muted, #667085);
}

.sa-wh-table {
  width: 100%;
  border-collapse: collapse;
}

.sa-wh-table th,
.sa-wh-table td {
  border: 1px solid var(--line, #e7e9ee);
  padding: 8px 10px;
  text-align: center;
  vertical-align: middle;
}

.sa-wh-table thead th {
  background: var(--card, #fff);
  position: sticky;
  top: 0;
  z-index: 1;
}

.sa-wh-sku {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  font-size: 0.92rem;
}

.sa-wh-meta {
  font-size: 0.78rem;
  color: var(--muted, #667085);
}

.sa-wh-qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line, #e7e9ee);
  border-radius: 10px;
  padding: 4px 6px;
}

.sa-wh-qty input[type="number"] {
  width: 72px;
  text-align: center;
  border: none;
  outline: none;
  background: transparent;
}

.sa-wh-qty button {
  min-width: 28px;
  min-height: 28px;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  background: var(--card, #fff);
}

.sa-wh-qty button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.sa-wh-error {
  color: #e5484d;
  font-size: 0.85rem;
  margin-top: 2px;
  display: none;
}

.sa-wh-cell.error .sa-wh-error {
  display: block;
}

.sa-wh-cell.error .sa-wh-qty {
  border-color: #e5484d;
}

@media (max-width: 720px) {
  .sa-wh-table {
    display: block;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sa-wh-table th,
  .sa-wh-table td {
    white-space: nowrap;
  }
}

/* ----- Contraindre le popup à scroller en interne ----- */
.adastra-popup {
  max-height: 90vh;
  /* limite la hauteur totale du popup */
  display: flex;
  flex-direction: column;
}

.adastra-popup-header {
  flex: 0 0 auto;
}

.adastra-popup-body {
  flex: 1 1 auto;
  /* la body prend le reste de la hauteur */
  overflow: auto;
  /* scroll vertical si besoin */
  -webkit-overflow-scrolling: touch;
  /* inertie iOS */
  padding-right: 8px;
  /* pour éviter l'overlay du scrollbar */
}

/* ----- Scroller dédié pour la table (vertical + horizontal) ----- */
.sa-wh-scroll {
  overflow: auto;
  /* X et Y selon besoin */
  max-height: 100%;
  -webkit-overflow-scrolling: touch;
}

/* La table peut défiler horizontalement si beaucoup de colonnes (couleurs) */
.sa-wh-table {
  min-width: 640px;
  /* force un minimum pour activer le scroll horizontal */
  border-collapse: collapse;
}

.sa-wh-table th,
.sa-wh-table td {
  white-space: nowrap;
  /* évite les retours qui élargissent en hauteur */
}

/* Mobile : on accepte plus de hauteur, toujours scrollable */
@media (max-width: 720px) {
  .adastra-popup {
    max-height: 92vh;
  }

  .sa-wh-table {
    min-width: 720px;
  }

  /* plus large = défilement horizontal naturel */
}

.sa-icon {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
}

.sa-icon--lg {
  width: 1.3em;
  height: 1.3em;
}

.adastra-popup-header h5 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.adastra-popup-close svg {
  pointer-events: none;
}

/* Bouton principal Softadastra (popup) */
#adastraPlaceOrderBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(
    180deg,
    var(--adastra-accent-hi),
    var(--adastra-accent)
  );
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-weight: 700;
  border-radius: 10px;
  padding: 10px 14px;
  color: #fff;
  /* texte + icône blanc */
  box-shadow: 0 8px 18px rgba(255, 153, 0, 0.25);
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.2s ease;
}

#adastraPlaceOrderBtn:hover:enabled {
  filter: brightness(1.05);
  box-shadow: 0 10px 20px rgba(255, 153, 0, 0.3);
}

#adastraPlaceOrderBtn:disabled {
  background: #ffd9a8;
  color: #6b7280;
  box-shadow: none;
  cursor: not-allowed;
}

#adastraPlaceOrderBtn svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}

/* Optionnel si tu veux un rendu propre */
.adastra-hint {
  color: #666;
}

.adastra-error {
  color: #c0392b;
}

/* === Container principal === */
.sa-wholesale {
  display: grid;
  gap: 16px;
  font-family: "Inter", system-ui, sans-serif;
  color: #111827;
}

/* === Responsive === */
@media (max-width: 720px) {
  .sa-wh-table {
    min-width: 720px;
  }

  .sa-wh-summary {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }
}
:root {
  --sa-accent: #ff9900;
  --sa-accent-hi: #ffae33;
  --sa-border: #e5e7eb;
  --sa-soft: #f9fafb;
  --sa-text: #212121;
  --sa-muted: #6b7280;
}

/* ===== Conteneur carte profil ===== */
.sa-user-info {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 16px;
  font-family: "Segoe UI", system-ui, Arial, sans-serif;
  color: var(--sa-text);
}

/* Header (photo + nom + rating) */
.sa-profile-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.sa-profile-link:focus-visible {
  outline: 3px solid rgba(255, 153, 0, 0.35);
  border-radius: 10px;
}

.sa-user-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sa-user-photo-name {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* min-width=0 pour ellipsis */
.sa-user-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.sa-user-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sa-user-name {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* long noms */
}

.sa-user-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sa-stars {
  color: var(--sa-accent);
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.sa-rating-count {
  margin: 0;
  font-size: 0.9rem;
  color: var(--sa-muted);
}

/* “chevron” à droite */
.sa-chevron {
  color: #9ca3af;
}

.sa-profile-link:hover .sa-chevron {
  color: #6b7280;
}

/* séparateur visuel fin */
.sa-separator {
  border: none;
  height: 1px;
  background: #eee;
  margin: 12px 0;
}

/* ===== Blocs “carte” réutilisables (activité / détails) */
.sa-card {
  background: #fff;
  border: 1px solid var(--sa-border);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sa-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* ===== Activity: image/icone à gauche, texte à droite */
.sa-user-activity {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
}

.sa-activity-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sa-accent);
  background: #fff7ec;
  border: 1px solid rgba(255, 153, 0, 0.35);
  font-size: 22px;
}

.sa-activity-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sa-activity-text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

.sa-activity-text p strong {
  font-size: 15px;
}

/* ===== Détails (localisation) */
.sa-user-details {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

.sa-user-details i {
  color: var(--sa-accent);
  font-size: 16px;
  flex-shrink: 0;
}

.sa-user-details span {
  font-weight: 600;
}

/* ===== Actions compte (subscribe) */
.sa-account-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.sa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: filter 0.15s ease, box-shadow 0.2s ease, transform 0.06s ease;
}

.sa-btn:focus-visible {
  outline: 3px solid rgba(255, 153, 0, 0.25);
  outline-offset: 2px;
}

.sa-btn--follow {
  background: linear-gradient(180deg, var(--sa-accent-hi), var(--sa-accent));
  color: #fff;
  border-color: rgba(0, 0, 0, 0.04);
  box-shadow: 0 6px 16px rgba(255, 153, 0, 0.25);
}

.sa-btn--follow:hover {
  filter: brightness(1.06);
  box-shadow: 0 8px 20px rgba(255, 153, 0, 0.3);
}

.sa-btn--follow.subscribed {
  background: #fff;
  color: var(--sa-accent);
  border: 1px solid var(--sa-accent);
  box-shadow: none;
}

.sa-btn--follow.subscribed:hover {
  background: #fff9f1;
}

/* ===== Responsive tweaks ===== */
@media (max-width: 600px) {
  .sa-user-photo {
    width: 48px;
    height: 48px;
  }

  .sa-activity-icon {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }

  .sa-user-activity {
    padding: 10px 12px;
    gap: 12px;
  }

  .sa-user-details {
    padding: 9px 12px;
  }

  /* bouton plein sur mobile */
}

/* petit scanline entre sections si tu veux plus d’air */
.sa-stack > * + * {
  margin-top: 10px;
}

/* ===== Espacement entre sections du profil ===== */
.sa-user-info > * + * {
  margin-top: 14px;
  /* mobile */
}

@media (min-width: 768px) {
  .sa-user-info > * + * {
    margin-top: 18px;
    /* desktop */
  }
}

/* Un peu plus d'air à l'intérieur des cartes */
.sa-card {
  padding: 14px 16px;
}

@media (min-width: 768px) {
  .sa-card {
    padding: 16px 18px;
  }
}

/* Optionnel : resserre légèrement la zone header pour éviter le “collage” visuel */
.sa-user-header {
  padding-bottom: 4px;
}

/* Optionnel : espace minimal entre lignes dans les blocs texte */
.sa-activity-text p,
.sa-user-details p {
  line-height: 1.5;
}

.sa-user-info {
  background: #fff;
  border: 1px solid var(--sa-border);
  /* ✅ bordure visible */
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  /* ✅ ombre plus visible */
  padding: 16px;
  margin: 16px 0;
  /* ✅ espace autour de la boîte */
  font-family: "Segoe UI", system-ui, Arial, sans-serif;
  color: var(--sa-text);
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .sa-user-info {
    padding: 20px;
    margin: 20px 0;
  }
}

.seller-section {
  background: var(--sa-soft);
  /* #f9fafb */
  padding: 0;
  /* espace intérieur */
}

@media (min-width: 768px) {
  .seller-section {
    padding: 0;
  }
}

.sa-user-info::before,
.sa-user-info::after {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.06),
    transparent
  );
  border-radius: 1px;
  margin: 2px 0;
}
/* Badge Verified Pro */
.sa-badge-pro {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(180deg, var(--sa-accent-hi), var(--sa-accent));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(255, 153, 0, 0.25);
}

.sa-badge-pro i {
  font-size: 0.8rem;
}

/* Version plus petite sur mobile */
@media (max-width: 600px) {
  .sa-badge-pro {
    font-size: 0.7rem;
    padding: 2px 6px;
  }

  .sa-badge-pro i {
    font-size: 0.7rem;
  }
}
/* ===== Follow Button — Scoped ===== */
.follow-actions {
  --brand: #ff9900;
  --brand-700: #e58900;
  --text: #0b0c0f;
  --line: #e7e9ee;
  --muted: #667085;

  position: relative;
  z-index: 100;
  isolation: isolate;
}

/* Base button (scopé) */
.follow-actions .fa-btn {
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 0.6rem 1rem;
  transition: transform 0.06s ease, box-shadow 0.2s ease, background 0.2s ease,
    color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  background: #fff;
  color: var(--text);
}

.follow-actions .fa-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.25);
}

.follow-actions .fa-btn:active {
  transform: translateY(1px);
}

/* Variantes follow */
.follow-actions .fa-btn--follow.not-following {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.follow-actions .fa-btn--follow.not-following:hover {
  background: var(--brand-700);
  border-color: var(--brand-700);
}

.follow-actions .fa-btn--follow.is-following {
  background: #fff;
  color: var(--text);
  border-color: var(--line);
}

.follow-actions .fa-btn--follow.is-following:hover {
  background: #f8fafc;
  border-color: #dfe3ea;
}

/* Disabled / loading */
.follow-actions .fa-btn[disabled],
.follow-actions .fa-btn[aria-busy="true"] {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Texte interne */
.follow-actions .fa-btn .btn-text {
  display: inline-block;
  white-space: nowrap;
}

/* Spinner (scopé). Si tu utilises Bootstrap, on ajoute juste l’anim. */
.follow-actions .fa-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: fa-spin 0.8s linear infinite;
}

@keyframes fa-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Tailles optionnelles */
.follow-actions .fa-btn--sm {
  padding: 0.45rem 0.8rem;
  font-size: 13px;
}

.follow-actions .fa-btn--lg {
  padding: 0.75rem 1.25rem;
  font-size: 15px;
}

/* Compteur (scopé) */
.follow-actions .fa-followers-count {
  display: block;
  margin-top: 0.35rem;
  font-size: 12.5px;
  color: var(--muted);
}

/* Anti-overlay local uniquement sous follow-actions */
.follow-actions > .d-flex {
  pointer-events: none;
}

.follow-actions .fa-btn--follow.not-following {
  background: #fff;
  color: var(--brand);
  border-color: var(--brand);
}

.follow-actions .fa-btn--follow.not-following:hover {
  background: #fff7e6;
}
/* ===== Info cards (Protection / Consumer law) ===== */
.sa-info-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--sa-border);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sa-info-card + .sa-info-card {
  margin-top: 12px;
}

/* espace entre les 2 */

.sa-info-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.sa-info-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--sa-accent);
  background: #fff7ec;
  border: 1px solid rgba(255, 153, 0, 0.35);
}

.sa-info-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sa-info-text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--sa-text);
}

.sa-info-text p strong {
  font-size: 15px;
}

/* liens */
.sa-info-text a {
  color: var(--sa-accent);
  text-decoration: none;
}

.sa-info-text a:hover {
  text-decoration: underline;
}

/* variantes visuelles si tu veux nuancer les thèmes */
.sa-info-card.is-protection .sa-info-icon {
  background: #ecfdf5;
  color: #059669;
  border-color: rgba(5, 150, 105, 0.25);
}

.sa-info-card.is-legal .sa-info-icon {
  background: #eef2ff;
  color: #4f46e5;
  border-color: rgba(79, 70, 229, 0.25);
}

/* Mobile */
@media (max-width: 480px) {
  .sa-info-card {
    gap: 12px;
    padding: 10px 12px;
  }

  .sa-info-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .sa-info-text p {
    font-size: 13px;
  }
}

/* ===== Grid ===== */
.adastra-recommend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
  padding: 12px 16px 20px;
}

/* ===== Card ===== */
.adastra-recommend-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.05);
  transition: transform 0.12s ease, box-shadow 0.12s ease,
    border-color 0.12s ease;
  outline: none;
}

.adastra-recommend-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.12);
  border-color: #ffd7a6;
}

.adastra-recommend-card:focus-within {
  outline: 2px solid #ffb84d;
  outline-offset: 2px;
}

/* ===== Image area (portrait comme Vinted) ===== */
.adastra-recommend-imgwrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  /* portrait responsive (≈ Vinted) */
  background: #f6f7f9;
  overflow: hidden;
}

@supports not (aspect-ratio: 1) {
  .adastra-recommend-imgwrap {
    height: 280px;
  }

  /* fallback */
}

.adastra-recommend-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.25s ease;
}

.adastra-recommend-card:hover .adastra-recommend-img {
  transform: scale(1.025);
}

/* Spinner */
.adastra-img-spinner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #fafafa, #f1f5f9);
}

.adastra-img-spinner::after {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid #ffe0b3;
  border-top-color: #ff9900;
  animation: adastra-spin 0.9s linear infinite;
}

@keyframes adastra-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Like */
.adastra-like-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  color: #222;
}

.adastra-like-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.adastra-like-btn:active {
  transform: scale(0.98);
}

.adastra-like-btn svg {
  stroke: currentColor;
}

/* Price overlay (ton helper dedans) */
.adastra-price-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 6px 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.sa-pricewrap .sa-card__pricebox {
  display: flex;
  flex-direction: column;
}

.sa-card__price {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  color: #111;
  font-size: 14px;
}

.sa-card__usd {
  font-size: 12px;
  color: #6b7280;
}

.sa-flag {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
}

/* Sale badge (overlay) */
.soft-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #16a34a;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

/* Condition chip (optionnel) */
.adastra-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  transform: translateY(40px);
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

/* ===== Body minimal ===== */
.adastra-recommend-body {
  padding: 10px 12px 12px;
  display: grid;
  gap: 8px;
}

.adastra-title {
  font-size: 13px;
  line-height: 1.3;
  color: #222;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.3em;
}

.adastra-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #111;
  font-weight: 700;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 3px 8px;
}

/* Responsive tweaks */
@media (min-width: 1440px) {
  .adastra-recommend-grid {
    gap: 18px;
  }

  .adastra-recommend-imgwrap {
    aspect-ratio: 3 / 4;
  }

  /* un peu plus tall en wide */
}

@media (max-width: 480px) {
  .adastra-recommend-grid {
    gap: 12px;
  }

  .adastra-title {
    -webkit-line-clamp: 2;
  }

  /* 2 lignes sur mobile si besoin */
}

/* Accessibilité/UX */
@media (prefers-reduced-motion: reduce) {
  .adastra-recommend-card,
  .adastra-recommend-img {
    transition: none;
  }
}

/* Réduit un peu la taille visuelle du badge prix */
.adastra-price-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 2px 6px;
  /* ← réduit le padding vertical et horizontal */
  line-height: 1.1;
  /* ← compresse la hauteur de ligne */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.sa-card__price {
  font-size: 13px;
  /* ← texte un peu plus petit */
  font-weight: 700;
}

.sa-card__usd {
  font-size: 11px;
  /* ← USD hint plus petit */
}

/* Évite que le badge taille occupe toute la largeur */
.adastra-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #111;
  font-weight: 700;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 3px 8px;
  max-width: fit-content;
}

/* --- Badge condition (Softadastra orange) --- */
.adastra-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid transparent;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  user-select: none;
}

.adastra-chip--condition {
  background: rgba(255, 153, 0, 0.92);
  color: #fff;
  border-color: rgba(255, 153, 0, 0.55);
}

.adastra-chip--condition svg {
  width: 12px;
  height: 12px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.adastra-chip--condition:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
}

/* Overlay */
.rv-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  z-index: 1000;
}

/* Modal shell */
.rv-modal {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(30px) scale(0.98);
  bottom: 0;
  width: min(680px, 92vw);
  max-height: calc(92dvh - env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transition: transform 0.24s ease, opacity 0.2s ease;
  /* iOS layer promote */
  transform-origin: center bottom;
  will-change: transform, opacity;
}

.rv-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #eee;
}

.rv-modal__header h3 {
  margin: 0;
  font: 700 1.05rem/1.2 Inter, system-ui, sans-serif;
}

.rv-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #eee;
  background: #fff;
  cursor: pointer;
}

.rv-close:hover {
  background: #fafafa;
}

.rv-modal__body {
  padding: 12px 14px 14px;
  overflow: auto;
  /* scroll interne */
}

/* Open states */
.rv-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.rv-modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Mobile bottom sheet style */
@media (max-width: 767px) {
  .rv-modal {
    left: 0;
    right: 0;
    margin: 0;
    width: auto;
    transform: translateY(100%);
    border-radius: 16px 16px 0 0;
    bottom: 0;
    max-height: calc(92dvh - env(safe-area-inset-bottom, 0px));
  }

  .rv-modal.is-open {
    transform: translateY(0);
  }

  .rv-modal__body {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* Disable body scroll when modal open */
body.rv-noscroll {
  overflow: hidden;
  /* compense scrollbar desktop */
  padding-right: var(--rv-pr, 0px);
}

.sa-form-group {
  margin-bottom: 1rem;
}

.sa-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #212121;
}

.sa-review-section .sa-stars {
  display: flex;
  gap: 6px;
  font-size: 1.8rem;
}

.sa-form-group .sa-star {
  background: none;
  border: none;
  cursor: pointer;
  color: #ccc;
  transition: color 0.2s ease;
}

.sa-form-group .sa-star:hover,
.sa-form-group .sa-star[aria-checked="true"],
.sa-form-group .sa-star.active {
  color: #ff9900;
}

.sa-rating-desc {
  font-size: 0.9rem;
  color: #666;
  margin-top: 0.3rem;
}

.sa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

.sa-btn--primary {
  background: #ff9900;
  color: #fff;
  padding: 0.6rem 1.2rem;
  transition: background 0.2s ease;
}

.sa-btn--primary:hover {
  background: #e68a00;
}

.sa-spinner {
  border: 2px solid #fff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

html.rv-noscroll,
body.rv-noscroll {
  overflow: hidden;
  /* bloque le scroll sur tous les navigateurs */
}

@supports (-webkit-touch-callout: none) {
  /* iOS fix */
  body.rv-noscroll {
    position: fixed;
    width: 100%;
    top: var(--rv-top, 0px);
    /* on fige le body à la position courante */
  }
}

/* Section globale */
.sa-review-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  margin: 20px 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* Header */
.sa-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.sa-review-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #212121;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sa-review-title i {
  color: #ff9900;
}

.sa-review-subtext {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 2px;
}

/* Bouton */
.sa-review-actions .sa-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
}

/* Résumé note */
.sa-review-summary {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sa-review-average {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sa-review-score {
  font-size: 1.6rem;
  font-weight: 700;
  color: #212121;
}

.sa-review-stars {
  font-size: 1.1rem;
  color: #ff9900;
}

.sa-review-count {
  font-size: 0.85rem;
  color: #6b7280;
}

.fade-out {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ===== Tokens (softadastra) ===== */
:root {
  --adastra-text: #212121;
  --adastra-muted: #6b7280;
  /* slate-500 */
  --adastra-border: #e5e7eb;
  /* slate-200 */
  --adastra-bg: #fff;
  --adastra-accent: #ff9900;
  /* Softadastra orange */
  --adastra-focus: 0 0 0 3px rgba(255, 153, 0, 0.25);
}

/* ===== Group & Label ===== */
.sa-form-group {
  margin: 14px 0 18px;
}

.sa-label {
  display: block;
  font-weight: 600;
  color: var(--adastra-text);
  margin-bottom: 8px;
}

/* ===== Star rating =====
   Astuce: on met en RTL pour que le sélecteur ~ marche vers la gauche.
*/
.star-rating {
  direction: rtl;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  user-select: none;
}

/* Bouton étoile */
.star-rating .star {
  all: unset;
  /* reset */
  cursor: pointer;
  font-size: 28px;
  /* taille étoile */
  line-height: 1;
  padding: 6px;
  /* grande zone cliquable */
  border-radius: 10px;
  color: #d1d5db;
  /* gris clair (non actif) */
  transition: transform 0.12s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.star-rating .star:focus-visible {
  box-shadow: var(--adastra-focus);
  outline: none;
}

.star-rating .star:active {
  transform: scale(0.96);
}

/* Hover: toutes les étoiles à gauche (visuelle) s'allument */
.star-rating .star:hover,
.star-rating .star:hover ~ .star {
  color: var(--adastra-accent);
}

/* Actif (sélection) */
.star-rating .star.is-active,
.star-rating .star.is-active ~ .star {
  color: var(--adastra-accent);
}

/* Description */
.sa-rating-desc {
  margin-top: 6px;
  font-size: 0.92rem;
  color: var(--adastra-muted);
}

/* Optionnel: un petit cadre autour du bloc */
.sa-form-group--rating {
  background: var(--adastra-bg);
  border: 1px solid var(--adastra-border);
  border-radius: 12px;
  padding: 12px 14px;
}

/* Section globale */
.sa-review-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  margin: 20px 0;
  /* plus de marge latérale sur mobile */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  max-width: 1200px;
  width: 100%;
  /* prend toute la largeur */
}

/* Desktop : marges latérales */
@media (min-width: 768px) {
  .sa-review-section {
    margin: 20px auto;
    /* centré horizontalement */
    width: calc(100% - 48px);
    /* 24px de chaque côté */
  }
}

/* Header – desktop par défaut */
.sa-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 12px;
  /* espace horizontal par défaut */
}

/* Mobile : empilement vertical */
@media (max-width: 576px) {
  .sa-review-header {
    flex-direction: column;
    align-items: flex-start;
    /* texte aligné à gauche */
    gap: 10px;
    /* espace vertical entre titre et bouton */
  }

  /* Bouton prend toute la largeur sur mobile */
  .sa-review-actions .sa-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    font-size: 0.95rem;
  }
}

button#submitBtn {
  background-color: #ff9900 !important;
}
.sa-account-actions {
  position: relative;
  z-index: 100;
  isolation: isolate;
}

#subscribeBtn.sa-btn--follow {
  position: relative;
  z-index: 101;
  pointer-events: auto;
  cursor: pointer;
}

.sa-account-actions > .d-flex {
  pointer-events: none !important;
}

.sa-account-actions .d-flex.position-absolute,
.sa-account-actions .d-flex[style*="position: absolute"] {
  pointer-events: none !important;
}
/* ===========================
   SOFTADASTRA — WHOLESALE (pro)
   Palette via :root (prefix order-)
=========================== */
:root {
  --order-bg: #f7f8fa;
  --order-card: #ffffff;
  --order-line: #e7e9ee;
  --order-text: #0b0c0f;
  --order-muted: #667085;

  --order-brand: #ff9900;
  --order-brand-600: #ff9900;
  --order-brand-700: #e58900;

  --order-ok: #16a34a;
  --order-error: #dc2626;
  --order-warn: #f59e0b;

  --order-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --order-shadow-md: 0 8px 18px rgba(0, 0, 0, 0.06);

  --order-radius-sm: 8px;
  --order-radius: 12px;
  --order-radius-lg: 16px;

  --order-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
  --order-accent: #6b7280;
}

/* ===========================
   LAYOUT
=========================== */
.sa-wholesale {
  display: grid;
  gap: 16px;
  font-family: var(--order-font);
  color: var(--order-text);
}

/* Résumé haut (total / subtotal) */
.sa-wh-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--order-line);
  border-radius: var(--order-radius);
  background: #fafafa;
  font-weight: 600;
  font-size: 0.97rem;
  box-shadow: var(--order-shadow-sm);
}

/* Note / rappel MOQ + alerte globale */
.sa-wh-note {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--order-muted);
  background: #fbfbfd;
  padding: 10px 12px;
  border-radius: var(--order-radius-sm);
  border-left: 3px solid var(--order-brand);
}

.sa-wh-global-error {
  margin-top: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--order-error);
  display: none;
}

.sa-wh-global-error.show {
  display: block;
}

/* ===========================
   TABLE + SCROLL
=========================== */
.sa-wh-scroll {
  overflow: auto;
  border: 1px solid var(--order-line);
  border-radius: var(--order-radius);
  background: var(--order-card);
  max-height: 62vh;
  /* scroll vertical interne propre */
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--order-shadow-sm);
}

/* Scrollbars (Chrome/Edge/Safari) */
.sa-wh-scroll::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.sa-wh-scroll::-webkit-scrollbar-track {
  background: var(--order-bg);
  border-radius: 10px;
}

.sa-wh-scroll::-webkit-scrollbar-thumb {
  background: #cfd4dc;
  border-radius: 10px;
}

.sa-wh-scroll::-webkit-scrollbar-thumb:hover {
  background: #aeb6c2;
}

/* Scrollbars (Firefox) */
.sa-wh-scroll {
  scrollbar-width: thin;
  scrollbar-color: #cfd4dc var(--order-bg);
}

/* Table */
.sa-wh-table {
  width: 100%;
  min-width: 640px;
  /* permet le scroll horizontal si beaucoup de colonnes */
  border-collapse: collapse;
  background: var(--order-card);
  font-size: 0.9rem;
}

/* Compact desktop par défaut */
.sa-wh-table th,
.sa-wh-table td {
  padding: 6px 8px;
  /* très compact sur desktop */
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--order-line);
  line-height: 1.25;
}

/* En-têtes sticky */
.sa-wh-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f4f6f8;
  color: #374151;
  font-weight: 700;
  font-size: 0.86rem;
  border-bottom: 1px solid var(--order-line);
}

/* Hover ligne */
.sa-wh-table tbody tr:hover td {
  background: #fafbfc;
}

/* Première colonne (SKU/Size/Color) un peu plus lisible */
.sa-wh-table th:first-child,
.sa-wh-table td:first-child {
  text-align: left;
}

/* ===========================
   CELLULES (SKU, META)
=========================== */
.sa-wh-sku {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--order-text);
  white-space: nowrap;
}

.sa-wh-meta {
  font-size: 0.78rem;
  color: var(--order-muted);
}

/* ===========================
   WIDGET QUANTITÉ
=========================== */
.sa-wh-qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--order-line);
  border-radius: 10px;
  padding: 3px 6px;
  background: var(--order-card);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sa-wh-qty:focus-within {
  border-color: var(--order-brand);
  box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.15);
}

.sa-wh-qty input[type="number"] {
  width: 64px;
  text-align: center;
  border: none;
  outline: none;
  background: transparent;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--order-text);
  padding: 2px 0;
  line-height: 1.1;
}

.sa-wh-qty button {
  min-width: 26px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--order-line);
  border-radius: 8px;
  background: #f5f6f9;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  transition: background 0.2s, border-color 0.2s;
}

.sa-wh-qty button:hover:not(:disabled) {
  background: #eceff4;
  border-color: #d8dde6;
}

.sa-wh-qty button:active:not(:disabled) {
  background: #e8ebf2;
}

.sa-wh-qty button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Erreurs par cellule */
.sa-wh-error {
  color: var(--order-error);
  font-size: 0.78rem;
  margin-top: 2px;
  font-weight: 600;
  display: none;
}

.sa-wh-cell.error .sa-wh-error {
  display: block;
}

.sa-wh-cell.error .sa-wh-qty {
  border-color: var(--order-error);
}

/* Hint "multiples de X" */
.sa-wh-hint {
  font-size: 0.75rem;
  color: var(--order-muted);
  margin-top: 2px;
}

/* ===========================
   BOUTON D'ACTION
=========================== */
#adastraPlaceOrderBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(
    180deg,
    var(--order-brand-600),
    var(--order-brand)
  );
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #fff;
  font-weight: 800;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 8px 18px rgba(255, 153, 0, 0.25);
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.2s ease, transform 0.02s;
}

#adastraPlaceOrderBtn:hover:enabled {
  filter: brightness(1.05);
  box-shadow: 0 10px 20px rgba(255, 153, 0, 0.3);
}

#adastraPlaceOrderBtn:active:enabled {
  transform: translateY(1px);
}

#adastraPlaceOrderBtn:disabled {
  background: #ffd9a8;
  color: #6b7280;
  box-shadow: none;
  cursor: not-allowed;
}

#adastraPlaceOrderBtn svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}

/* ===========================
   POPUP CONTAINER
=========================== */
.adastra-popup {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--order-card);
  border-radius: var(--order-radius-lg);
  box-shadow: var(--order-shadow-md);
}

.adastra-popup-header {
  flex: 0 0 auto;
}

.adastra-popup-body {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 8px;
}

/* ===========================
   RESPONSIVE
=========================== */
/* Mobile : un peu plus d’air pour toucher facilement */
@media (max-width: 720px) {
  .sa-wh-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px;
  }

  .sa-wh-table {
    min-width: 720px;
    font-size: 0.92rem;
  }

  .sa-wh-table th,
  .sa-wh-table td {
    padding: 8px 10px;
    /* + d’air sur mobile */
  }
}

/* Desktop "ULTRA COMPACT" (>= 1024px) */
@media (min-width: 1024px) {
  .sa-wh-table th,
  .sa-wh-table td {
    padding: 4px 6px;
    /* encore plus serré sur grand écran */
    line-height: 1.2;
  }

  .sa-wh-qty input[type="number"] {
    width: 58px;
    font-size: 0.9rem;
  }
}

/* ==== SCROLL UI (facultatif mais conseillé) ==== */
.sa-wh-scroll {
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  cursor: grab;
  /* desktop */
  touch-action: pan-x pan-y;
  /* pointer events (iOS/Android/Win) */
}

.sa-wh-scroll.dragging {
  cursor: grabbing;
}

/* Scrollbars (WebKit) */
.sa-wh-scroll::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.sa-wh-scroll::-webkit-scrollbar-track {
  background: var(--order-bg, #f7f8fa);
  border-radius: 10px;
}

.sa-wh-scroll::-webkit-scrollbar-thumb {
  background: #cfd4dc;
  border-radius: 10px;
}

.sa-wh-scroll::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Scrollbars (Firefox) */
.sa-wh-scroll {
  scrollbar-width: thin;
  scrollbar-color: #cfd4dc var(--order-bg, #f7f8fa);
}

/* Table auto-ajustée : s’élargit uniquement selon le contenu */
.sa-wh-table {
  width: max-content;
  /* 👈 largeur = contenu */
  min-width: 100%;
  /* 👈 mais au moins 100% du conteneur */
  border-collapse: collapse;
  background: var(--order-card);
  font-size: 0.9rem;
}

/* Cellules = nowrap pour garder l’horizontal si beaucoup de colonnes */
.sa-wh-table th,
.sa-wh-table td {
  white-space: nowrap;
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--order-line);
}

.adastra-popup-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--order-line, #e5e7eb);
  background: var(--order-card, #fff);
  color: var(--order-muted, #667085);
  cursor: pointer;
  transition: all 0.2s ease;
}

.adastra-popup-close:hover {
  background: #f9fafb;
  color: var(--order-text, #111827);
  border-color: #d1d5db;
  transform: rotate(90deg);
  /* petit effet sympa */
}

.adastra-popup-close:active {
  background: #f3f4f6;
  transform: scale(0.92);
}

.adastra-popup-close .sa-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.adastra-popup-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--order-text, #111827);
  margin: 0;
  padding: 6px 0;
  line-height: 1.4;
}

.adastra-popup-title .sa-icon {
  width: 22px;
  height: 22px;
  color: var(--order-accent, #2563eb);
  /* 👈 bleu accent par défaut */
  flex-shrink: 0;
}

.adastra-toast--success {
  background: #16a34a;
}

.adastra-toast--error {
  background: #dc2626;
}

.adastra-toast--info {
  background: #2563eb;
}

.adastra-toast--warning {
  background: #d97706;
}
main,
.main-content,
.show-page {
  margin-top: 0 !important;
}
.page {
  padding: 0 !important;
}
#app {
  padding-top: 20px !important;
}
@media (max-width: 720px) {
  #app {
    padding-top: 50px !important;
  }
}
/* conteneur (id existant : #adastra-no-products) */
#adastra-no-products {
  display: none;
}

/* carte vide */
.no-similar-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.no-similar-icon {
  flex: 0 0 auto;
  color: #9ca3af;
}
.no-similar-text {
  flex: 1 1 auto;
  min-width: 0;
}
.no-similar-text strong {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}
.no-similar-text p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.35;
}

.no-similar-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}

/* boutons minimalistes */
.adastra-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #111827;
  background: #111827;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.adastra-btn:hover {
  filter: brightness(0.95);
}
.adastra-btn--ghost {
  background: #fff;
  color: #111827;
  border-color: #d1d5db;
}
.adastra-btn--ghost:hover {
  background: #f9fafb;
}
/* Style spécifique pour le bouton profil */
.sa-btn--profile {
  background-color: #007185;
  color: #fff; /* texte blanc */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 4px; /* optionnel */
  padding: 6px 12px; /* optionnel */
  text-decoration: none;
}

.sa-btn--profile svg {
  stroke: currentColor; /* icône blanc aussi */
  fill: none;
}
@media (max-width: 720px) {
  #app {
    padding-top: 30px !important;
  }
}

.image-layout {
  display: flex;
  gap: 5px;
  align-items: stretch;
  width: 100%;
  position: relative;
}

@media (max-width: 640px) {
  .adastra-price-amount {
    font-size: 1.2rem;
  }
}

/* ===== Reco: body compact + titres avec "…" (2 lignes) ===== */
#adastra-recommend-section .adastra-recommend-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
  min-width: 0;
  /* 🔑 évite les débordements */
}

/* Titre tronqué proprement (comme Amazon) */
#adastra-recommend-section .adastra-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* ✅ 2 lignes max */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  /* autorise plusieurs lignes */
  min-height: calc(1.35em * 2);
  /* réserve l’espace (évite les sauts de carte) */
}

/* Ligne prix compacte, toujours sous le titre */
#adastra-recommend-section .sa-pricewrap .sa-card__pricebox {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-direction: row;
  /* en ligne (plus lisible) */
}

/* Taille des prix */
#adastra-recommend-section .sa-card__price {
  font-size: 14px;
  font-weight: 700;
  color: #111;
}

#adastra-recommend-section .sa-card__usd {
  font-size: 12px;
  color: #999;
}

/* Option: réduire l’USD sur très petit mobile */
@media (max-width: 420px) {
  #adastra-recommend-section .sa-card__usd {
    display: none;
  }
}

/* Sécurité responsive du grid (2 colonnes sur petits écrans) */
@media (max-width: 520px) {
  .adastra-recommend-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 10px 12px 14px !important;
  }
}

/* Empêche les effets hover de décaler la grille (léger scale autorisé) */
.adastra-recommend-card {
  will-change: transform;
}

.adastra-recommend-card:hover .adastra-recommend-img {
  transform: scale(1.015);
}

#adastra-recommend-section .sa-card__price {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  margin-bottom: 0;
}

/* range joliment les deux tailles */
.adastra-sizes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* badge "+N" un peu plus discret */
.adastra-size.adastra-size--more {
  background: #fff7eb;
  border-color: #ffe0b3;
  color: #b45309;
  font-weight: 700;
}
/* Overlay */
#adastraPopupOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9998;
  display: none;
}

#adastraPopupOverlay.is-open {
  display: block;
}

/* Popup */
#adastraOrderPopup {
  position: fixed;
  z-index: 9999;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(920px, 96vw);
  max-height: 90vh;
  /* plafond global */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  display: none;
  overflow: hidden;
  box-sizing: border-box;
}

#adastraOrderPopup.is-open {
  display: grid;
  /* 👇 Donne de la hauteur réelle au conteneur quand il est ouvert */
  height: min(90vh, 720px);
  /* ajuste 720px selon ton design */
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* Header / Body / Footer */
#adastraOrderPopup .adastra-popup-header {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  background: #fff;
}

#adastraOrderPopup .adastra-popup-body {
  min-height: 0;
  /* clé pour scroller en grid */
  overflow: auto;
  /* le scroll est ici */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 16px;
}

#adastraOrderPopup .adastra-popup-footer {
  padding: 12px 16px;
  border-top: 1px solid #eee;
  background: #fff;
}

/* Scroll horizontal interne si ta table déborde */
#adastraPopupContent .sa-wh-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Mobile bottom sheet */
@media (max-width: 768px) {
  #adastraOrderPopup {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: none;
    width: 100vw;
    height: auto;
    max-height: 88dvh;
    /* plafond mobile confortable */
    border-radius: 16px 16px 0 0;
  }
}

.sa-wh-table {
  margin: 12px;
}

/* Boutons principaux et secondaires */
.btn-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;

  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;

  transition: all 0.2s ease;
}

/* Bouton principal */
.btn-order.btn-primary {
  background: #ff9900;
  /* Softadastra orange */
  color: #fff;
  border-color: #ff9900;
}

.btn-order.btn-primary:hover:not(:disabled) {
  background: #e68900;
  /* un peu plus foncé */
  border-color: #e68900;
}

.btn-order.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Bouton secondaire */
.btn-order.btn-secondary {
  background: #fff;
  color: #444;
  border-color: #ccc;
}

.btn-order.btn-secondary:hover {
  background: #f7f7f7;
  border-color: #bbb;
}

/* Icône dans le bouton */
.btn-order .btn-ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke-width: 2;
}

/* Spinner (caché par défaut) */
.btn-order .btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.btn-order.loading .btn-label {
  opacity: 0.6;
}

.btn-order.loading .btn-spinner {
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.adastra-popup-footer .order-actions {
  display: flex;
  gap: 12px;
  /* espace entre les boutons */
}

.adastra-popup-footer .order-actions .btn-order {
  flex: 1;
  /* chaque bouton prend le même espace */
  width: auto;
  /* évite que le width 100% casse le flex */
  justify-content: center;
  /* contenu centré */
}