/* ========================================
   PAGE PRODUIT AGLAÉ CRÉE - VERSION MOBILE OPTIMISÉE
   ======================================== */

/* Conteneur principal */
.aglae-single-product-page {
  background: var(--bg-body, #f0f2f0);
  min-height: 100vh;
  padding: 1rem 0;
}

.aglae-single-product-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

.aglae-single-product-content {
  background: white;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(107, 91, 77, 0.1);
}

/* Masquer les éléments par défaut */
.woocommerce-breadcrumb {
  display: none !important;
}

/* ========================================
   LAYOUT PRINCIPAL AVEC FLEXBOX
   ======================================== */

.aglae-product-layout {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3rem !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Galerie d'images - 50% de largeur */
.aglae-product-gallery {
  flex: 1 1 45% !important;
  min-width: 300px !important;
  margin: 0 !important;
  padding: 0 !important;
  order: 1 !important;
}

/* Informations produit - 50% de largeur */
.aglae-product-infos {
  flex: 1 1 45% !important;
  min-width: 300px !important;
  padding: 0 !important;
  margin: 0 !important;
  order: 2 !important;
}

.aglae-product-infos .summary {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ========================================
   GALERIE WOOCOMMERCE - STYLE MINIMAL
   ======================================== */

/* Conteneur de la galerie - on garde le comportement par défaut */
.woocommerce-product-gallery {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
}

/* Légère amélioration visuelle de l'image principale */
.woocommerce-product-gallery__wrapper {
  border-radius: 1rem !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(107, 91, 77, 0.1) !important;
  background: #f8f8f8 !important;
  margin-bottom: 1rem !important;
}

.woocommerce-product-gallery__image img {
  border-radius: 1rem !important;
  transition: transform 0.3s ease !important;
}

.woocommerce-product-gallery__image:hover img {
  transform: scale(1.02) !important;
}

/* Badge de promotion */
.onsale {
  position: absolute !important;
  top: 0.75rem !important;
  left: 0.75rem !important;
  background: #e74c3c !important;
  color: white !important;
  padding: 0.4rem 0.8rem !important;
  border-radius: 1.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  z-index: 2 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}

/* Amélioration légère des miniatures */
.flex-control-thumbs {
  gap: 0.5rem !important;
}

.flex-control-thumbs li {
  border-radius: 0.5rem !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.flex-control-thumbs li:hover,
.flex-control-thumbs li.flex-active-slide {
  transform: scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3) !important;
}

/* ========================================
   INFORMATIONS PRODUIT - DESIGN PERSONNALISÉ
   ======================================== */

/* Titre du produit */
.product_title {
  font-family: "Capitolium", serif !important;
  font-size: 2rem !important;
  color: var(--bg-marron, #6b5b4d) !important;
  margin: 0 !important;
  font-weight: normal !important;
  line-height: 1.2 !important;
}

/* Prix */
p.price {
  font-size: 1.75rem !important;
  font-weight: 600 !important;
  color: var(--bg-btn, #4a90e2) !important;
  margin: 0 !important;
}

p.price del {
  color: #999 !important;
  font-weight: normal !important;
  margin-right: 0.5rem !important;
  font-size: 1.25rem !important;
}

p.price ins {
  text-decoration: none !important;
}

/* Statut de disponibilité */
.stock {
  font-size: 0.9rem !important;
  color: #28a745 !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0.4rem 0.8rem !important;
  background: rgba(40, 167, 69, 0.1) !important;
  border-radius: 0.4rem !important;
  display: inline-block !important;
  width: fit-content !important;
}

.out-of-stock {
  color: #dc3545 !important;
  background: rgba(220, 53, 69, 0.1) !important;
}

/* Description courte */
.woocommerce-product-details__short-description {
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: #8a7a6b !important;
  margin: 0 !important;
  padding: 1.25rem !important;
  background: #fafaf9 !important;
  border-radius: 0.5rem !important;
  border-left: 3px solid var(--bg-btn, #4a90e2) !important;
}

/* Évaluations produit */
.woocommerce-product-rating {
  margin: 0 !important;
  padding: 0.75rem !important;
  background: #fafaf9 !important;
  border-radius: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
}

.star-rating {
  color: #fbbf24 !important;
}

.woocommerce-review-link {
  color: var(--bg-btn, #4a90e2) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
}

.woocommerce-review-link:hover {
  text-decoration: underline !important;
}

/* Masquer la quantité par défaut */
.aglae-product-infos .summary .cart .quantity {
  display: none;
}

/* ========================================
   FORMULAIRE D'AJOUT AU PANIER - DESIGN PERSONNALISÉ
   ======================================== */

form.cart {
  margin: 0 !important;
  padding: 1.5rem !important;
  background: linear-gradient(135deg, #fafaf9 0%, #f5f5f4 100%) !important;
  border-radius: 0.75rem !important;
  border: 2px solid #e8e3dd !important;
  box-shadow: 0 4px 12px rgba(107, 91, 77, 0.05) !important;
}

/* Sélecteur de quantité */
.quantity {
  margin-bottom: 1rem !important;
}

.quantity label {
  font-weight: 600 !important;
  color: var(--bg-marron, #6b5b4d) !important;
  margin-bottom: 0.4rem !important;
  display: block !important;
  font-size: 0.9rem !important;
}

.quantity input[type="number"] {
  width: 70px !important;
  padding: 0.6rem !important;
  border: 2px solid #e8e3dd !important;
  border-radius: 0.4rem !important;
  font-size: 0.9rem !important;
  text-align: center !important;
  transition: border-color 0.3s ease !important;
}

.quantity input[type="number"]:focus {
  border-color: var(--bg-btn, #4a90e2) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1) !important;
}

/* Bouton d'ajout au panier */
.single_add_to_cart_button {
  background: linear-gradient(135deg, var(--bg-btn, #4a90e2), #357abd) !important;
  color: white !important;
  padding: 1rem 2rem !important;
  border: none !important;
  border-radius: 0.6rem !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 16px rgba(74, 144, 226, 0.3) !important;
  margin: 0 !important;
  width: 100% !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

.single_add_to_cart_button:hover {
  background: linear-gradient(135deg, #357abd, #2a5f8f) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4) !important;
}

.single_add_to_cart_button:active {
  transform: translateY(0) !important;
}

/* Variations de produit */
.variations {
  margin-bottom: 1rem !important;
}

.variations td {
  padding: 0.4rem 0 !important;
  border: none !important;
}

.variations label {
  font-weight: 600 !important;
  color: var(--bg-marron, #6b5b4d) !important;
  font-size: 0.9rem !important;
}

.variations select {
  width: 100% !important;
  padding: 0.6rem !important;
  border: 2px solid #e8e3dd !important;
  border-radius: 0.4rem !important;
  font-size: 0.9rem !important;
  background: white !important;
  transition: border-color 0.3s ease !important;
}

.variations select:focus {
  border-color: var(--bg-btn, #4a90e2) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1) !important;
}

/* ========================================
   INFORMATIONS COMPLÈTES PRODUIT - SANS ONGLETS
   ======================================== */

.aglae-product-details {
  margin-top: 3rem !important;
  width: 100% !important;
}

.aglae-product-details-content {
  background: white !important;
  border-radius: 1rem !important;
  overflow: hidden !important;
  box-shadow: 0 8px 32px rgba(107, 91, 77, 0.1) !important;
}

/* Sections individuelles */
.aglae-product-description,
.aglae-product-attributes,
.aglae-product-reviews,
.aglae-product-related {
  padding: 2rem !important;
  border-bottom: 1px solid #e8e3dd !important;
}

.aglae-product-related {
  border-bottom: none !important;
}

/* Titres des sections */
.aglae-product-details h3 {
  font-family: "Capitolium", serif !important;
  font-size: 1.5rem !important;
  color: var(--bg-marron, #6b5b4d) !important;
  margin: 0 0 1.25rem 0 !important;
  font-weight: normal !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 2px solid var(--bg-btn, #4a90e2) !important;
  display: inline-block !important;
}

/* Description */
.description-content {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: #555 !important;
}

.description-content p {
  margin-bottom: 1.25rem !important;
}

.description-content ul,
.description-content ol {
  margin: 1.25rem 0 !important;
  padding-left: 1.5rem !important;
}

.description-content li {
  margin-bottom: 0.4rem !important;
}

/* Tableau des attributs */
.attributes-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
  background: #fafaf9 !important;
  border-radius: 0.5rem !important;
  overflow: hidden !important;
}

.attributes-table tr {
  border-bottom: 1px solid #e8e3dd !important;
}

.attributes-table tr:last-child {
  border-bottom: none !important;
}

.attributes-table td {
  padding: 0.75rem 1rem !important;
  border: none !important;
  vertical-align: top !important;
  font-size: 0.9rem !important;
}

.attribute-label {
  font-weight: 600 !important;
  color: var(--bg-marron, #6b5b4d) !important;
  width: 35% !important;
  background: rgba(107, 91, 77, 0.05) !important;
}

.attribute-value {
  color: #555 !important;
  background: white !important;
}

/* Section avis */
.aglae-product-reviews .commentlist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.aglae-product-reviews .comment {
  background: #fafaf9 !important;
  border-radius: 0.6rem !important;
  padding: 1.25rem !important;
  margin-bottom: 1.25rem !important;
  border-left: 3px solid var(--bg-btn, #4a90e2) !important;
}

.aglae-product-reviews .comment:last-child {
  margin-bottom: 0 !important;
}

.aglae-product-reviews .comment-author {
  font-weight: 600 !important;
  color: var(--bg-marron, #6b5b4d) !important;
  margin-bottom: 0.4rem !important;
  font-size: 0.95rem !important;
}

.aglae-product-reviews .comment-text {
  color: #555 !important;
  line-height: 1.5 !important;
  font-size: 0.9rem !important;
}

.aglae-product-reviews .star-rating {
  color: #fbbf24 !important;
  margin-bottom: 0.6rem !important;
}

/* Formulaire d'avis */
#respond {
  background: #fafaf9 !important;
  border-radius: 0.6rem !important;
  padding: 1.5rem !important;
  margin-top: 1.5rem !important;
}

#respond h3 {
  color: var(--bg-marron, #6b5b4d) !important;
  margin-bottom: 1.25rem !important;
  font-size: 1.25rem !important;
}

#respond .comment-form-rating {
  margin-bottom: 0.75rem !important;
}

#respond .comment-form-comment textarea {
  width: 100% !important;
  padding: 0.75rem !important;
  border: 2px solid #e8e3dd !important;
  border-radius: 0.4rem !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  resize: vertical !important;
  min-height: 100px !important;
}

#respond .comment-form-comment textarea:focus {
  border-color: var(--bg-btn, #4a90e2) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1) !important;
}

#respond .form-submit input {
  background: linear-gradient(135deg, var(--bg-btn, #4a90e2), #357abd) !important;
  color: white !important;
  padding: 0.6rem 1.5rem !important;
  border: none !important;
  border-radius: 0.4rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  font-size: 0.9rem !important;
}

#respond .form-submit input:hover {
  background: linear-gradient(135deg, #357abd, #2a5f8f) !important;
  transform: translateY(-1px) !important;
}

/* ========================================
   SECTION DES PRODUITS ASSOCIÉS
   ======================================== */
.aglae-product-related .product-title {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
  transition: color 0.3s ease;
  line-height: 1.3;
  padding: 0 !important;
  color: inherit !important;
  border-bottom: none !important;
}

.product-card:hover .product-title,
.aglae-product-card:hover .product-title,
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product:hover h2 {
  color: var(--bg-marron, #8b4513) !important;
}

/* ========================================
   RESPONSIVE DESIGN MOBILE FIRST
   ======================================== */

/* Mobile par défaut (320px+) */
@media (max-width: 480px) {
  .aglae-single-product-page {
    padding: 0.5rem 0;
  }

  .aglae-single-product-container {
    padding: 0 0.75rem;
  }

  .aglae-single-product-content {
    padding: 1.25rem;
    border-radius: 0.75rem;
  }

  .aglae-product-layout {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .aglae-product-gallery {
    flex: 1 1 100% !important;
    min-width: auto !important;
    order: 1 !important;
  }

  .aglae-product-infos {
    flex: 1 1 100% !important;
    min-width: auto !important;
    order: 2 !important;
  }

  .aglae-product-infos .summary {
    gap: 1.25rem !important;
  }

  .product_title {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }

  p.price {
    font-size: 1.4rem !important;
  }

  p.price del {
    font-size: 1rem !important;
  }

  .woocommerce-product-details__short-description {
    padding: 1rem !important;
    font-size: 0.9rem !important;
  }

  .woocommerce-product-rating {
    padding: 0.6rem !important;
    gap: 0.5rem !important;
  }

  form.cart {
    padding: 1.25rem !important;
  }

  .single_add_to_cart_button {
    padding: 0.9rem 1.5rem !important;
    font-size: 0.95rem !important;
  }

  .aglae-product-details {
    margin-top: 2rem !important;
  }

  .aglae-product-description,
  .aglae-product-attributes,
  .aglae-product-reviews,
  .aglae-product-related {
    padding: 1.25rem !important;
  }

  .aglae-product-details h3 {
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
  }

  .description-content {
    font-size: 0.9rem !important;
  }

  .attributes-table {
    display: table !important; /* Garder le format tableau */
    width: 100% !important;
  }

  .attributes-table tr {
    display: table-row !important; /* Garder le format ligne */
    margin-bottom: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    border-bottom: 1px solid #e8e3dd !important;
  }

  .attributes-table tr:last-child {
    border-bottom: none !important;
  }

  .attributes-table td {
    display: table-cell !important; /* Garder le format cellule */
    padding: 0.6rem 0.75rem !important;
    font-size: 0.85rem !important;
  }

  .attribute-label {
    background: rgba(107, 91, 77, 0.05) !important; /* Même fond qu'en desktop */
    color: var(--bg-marron, #6b5b4d) !important; /* Même couleur qu'en desktop */
    font-weight: 600 !important;
    width: 40% !important; /* Un peu plus large sur mobile */
  }

  .attribute-value {
    background: white !important;
    border-top: none !important; /* Supprimer la bordure ajoutée précédemment */
  }

  .aglae-product-reviews .comment {
    padding: 1rem !important;
  }

  .aglae-product-reviews .comment-author {
    font-size: 0.9rem !important;
  }

  .aglae-product-reviews .comment-text {
    font-size: 0.85rem !important;
  }

  #respond {
    padding: 1.25rem !important;
  }

  #respond h3 {
    font-size: 1.1rem !important;
  }

  .flex-control-thumbs {
    gap: 0.4rem !important;
  }

  .onsale {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.6rem !important;
  }
}

/* Tablettes (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .aglae-single-product-content {
    padding: 1.75rem;
  }

  .aglae-product-layout {
    flex-direction: column !important;
    gap: 2rem !important;
  }

  .aglae-product-gallery {
    flex: 1 1 100% !important;
    min-width: auto !important;
    order: 1 !important;
    max-width: 500px !important;
    margin: 0 auto !important;
  }

  .aglae-product-infos {
    flex: 1 1 100% !important;
    min-width: auto !important;
    order: 2 !important;
  }

  .product_title {
    font-size: 1.75rem !important;
  }

  p.price {
    font-size: 1.5rem !important;
  }

  .aglae-product-description,
  .aglae-product-attributes,
  .aglae-product-reviews,
  .aglae-product-related {
    padding: 1.75rem !important;
  }

  .aglae-product-details h3 {
    font-size: 1.4rem !important;
  }

  .attribute-label {
    width: 35% !important;
  }
}

/* Desktop small (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .aglae-product-layout {
    gap: 2.5rem !important;
  }

  .aglae-product-gallery {
    min-width: 350px !important;
  }

  .aglae-product-infos {
    min-width: 320px !important;
  }

  .product_title {
    font-size: 2.25rem !important;
  }

  p.price {
    font-size: 1.85rem !important;
  }
}

/* ========================================
   CORRECTIONS SPÉCIFIQUES
   ======================================== */

/* Assurer que les éléments ne flottent pas */
.aglae-product-gallery,
.aglae-product-infos {
  float: none !important;
  clear: none !important;
}

/* Amélioration de l'accessibilité */
.single_add_to_cart_button:focus {
  outline: 2px solid rgba(74, 144, 226, 0.5) !important;
  outline-offset: 2px !important;
}

/* Animation de chargement pour le bouton */
.single_add_to_cart_button.loading {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.single_add_to_cart_button.loading::after {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  border: 2px solid transparent !important;
  border-top: 2px solid white !important;
  border-radius: 50% !important;
  animation: spin 1s linear infinite !important;
  margin-left: 0.4rem !important;
}

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

/* Optimisations pour les petits écrans */
@media (max-width: 360px) {
  .aglae-single-product-container {
    padding: 0 0.5rem;
  }

  .aglae-single-product-content {
    padding: 1rem;
  }

  .product_title {
    font-size: 1.3rem !important;
  }

  p.price {
    font-size: 1.25rem !important;
  }

  .single_add_to_cart_button {
    padding: 0.8rem 1.25rem !important;
    font-size: 0.9rem !important;
  }

  .aglae-product-description,
  .aglae-product-attributes,
  .aglae-product-reviews,
  .aglae-product-related {
    padding: 1rem !important;
  }

  .aglae-product-details h3 {
    font-size: 1.1rem !important;
  }
}