/* 📄 /assets/css/product.css */

/* ==========================================================================
    SOGUIFY - product.css
    Description : Styles pour la page détaillée d'un produit
    ========================================================================== */

/* Structure principale de la page produit */
.product-section.container { /* Cible la section si elle a aussi la classe container */
    margin-top: 30px; /* Marge supérieure pour l'espacement avec le header */
    margin-bottom: 50px; /* Espace en bas de page */
    background: var(--background-soft); /* Fond doux comme les "cartes" principales */
    border-radius: 16px; /* Coins arrondis cohérents */
    box-shadow: var(--shadow); /* Ombre cohérente */
    padding: 25px; /* Padding interne cohérent */
}


/* Layout principal des deux colonnes (images / infos) */
/* Remplace les classes Bootstrap 'row' et 'col-md-6' */
.product-layout.row { /* Cible la div si elle a aussi la classe row */
    display: flex; /* Active Flexbox pour les colonnes */
    flex-wrap: wrap; /* Permet aux colonnes de passer à la ligne sur petits écrans */
    gap: var(--grid-gap-md); /* Espace entre les colonnes (24px) */
    margin-bottom: 30px; /* Espace sous le layout principal */

    /* Gestion des marges négatives pour les 'row' */
    margin-left: calc(-1 * var(--grid-gap-md) / 2);
    margin-right: calc(-1 * var(--grid-gap-md) / 2);
}

.product-layout .product-images.col-md-6,
.product-layout .product-info.col-md-6 { /* Ciblage spécifique pour les colonnes */
    flex: 1 1 calc(50% - var(--grid-gap-md)); /* Chaque colonne prend environ la moitié de l'espace sur les écrans moyens/grands, en tenant compte du gap */
    max-width: calc(50% - var(--grid-gap-md));
    min-width: 300px; /* Largeur minimale avant de passer à la ligne */
}

/* Styles pour l'image principale du produit */
.product-main-image {
    width: 100%;
    height: auto; /* Hauteur automatique pour maintenir le ratio */
    max-height: 450px; /* Limite la hauteur sur les très grands écrans */
    object-fit: contain; /* L'image s'ajuste dans l'espace sans être coupée */
    border-radius: 10px; /* Bords légèrement arrondis */
    box-shadow: var(--shadow); /* Ombre légère */
    margin-bottom: 15px; /* Espace sous l'image principale */
    cursor: zoom-in; /* Indique que l'image est cliquable pour zoom/galerie */
}

/* Galerie des vignettes */
.product-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Espace entre les vignettes */
    justify-content: flex-start; /* Aligne les vignettes à gauche */
}

.gallery-thumb {
    width: 70px;
    height: 70px;
    object-fit: cover; /* Les vignettes couvrent l'espace */
    border-radius: 8px; /* Bords arrondis */
    cursor: pointer;
    border: 1px solid var(--border-color); /* Bordure légère */
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.gallery-thumb:hover {
    transform: translateY(-2px);
    border-color: var(--primary); /* Bordure primaire au survol */
}

/* Informations du produit (colonne de droite) */
.product-info {
    padding-left: 15px; /* Marge interne pour séparer du côté image */
}

.product-title.h4 { /* Le titre h2 avec la classe h4 */
    font-size: 2rem; /* Taille plus grande pour le titre principal du produit */
    font-weight: bold;
    color: var(--text-main);
    margin-bottom: 15px;
    line-height: 1.3;
}

/* Badges du produit (en ligne) */
.product-badges-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Espace entre les badges */
}

.product-badges-inline .badge { /* Style des badges dans cette section */
    background: var(--accent); /* Couleur des badges, par exemple accent */
    color: var(--text-main); /* Texte sombre sur le badge clair */
    padding: 5px 10px;
    border-radius: 15px; /* Forme de pilule */
    font-size: 0.85rem;
    font-weight: bold;
}

/* Style spécifique pour les utilitaires de display et spacing, qui remplacent Bootstrap */
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }

/* Marges et Paddings (vous pouvez ajouter plus de classes si nécessaire) */
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 16px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 16px !important; }
.mt-4 { margin-top: 24px !important; }
.mt-5 { margin-top: 32px !important; }
.p-2 { padding: 8px !important; }
.p-3 { padding: 16px !important; }

/* Classes d'utilitaires de texte et de couleur */
.fw-bold { font-weight: bold; }
.text-danger { color: var(--error) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-center { text-align: center; }
.text-warning { color: var(--accent) !important; }
.text-dark { color: var(--text-main) !important; } /* S'assurer que text-dark correspond à text-main */
.text-primary { color: var(--primary) !important; } /* Utilité pour forcer la couleur primaire */
.small { font-size: 0.85em; } /* Par rapport à la taille de police du parent */
.text-truncate { /* Pour tronquer le texte avec des points de suspension */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Utilitaires de largeur */
.w-25 { width: 25% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

/* Utilitaires de bordure et d'ombre */
.rounded { border-radius: 8px !important; } /* Arrondi par défaut */
.shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075) !important; } /* Petite ombre */
.border { border: 1px solid var(--border-color) !important; } /* Bordure standard */

/* Prix du produit */
.price-value {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--product-price-color); /* Utilisation de la variable cohérente */
}

.original-price-display { /* Prix barré */
    text-decoration: line-through;
    color: var(--text-muted);
    margin-left: 10px;
    font-size: 1.1rem;
}

/* Gestion du stock */
.stock-value {
    font-weight: bold;
    color: var(--text-main);
}
.stock-status-message {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Formulaire de sélection de variante et quantité */
.variant-select,
#qty-input {
    /* Les styles de base sont gérés par input, textarea, select dans style.css */
    /* Les largeurs w-25 et d-inline-block sont gérées par les utilitaires */
}

.form-label { /* Labels des formulaires */
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 5px;
    display: block; /* S'assure que le label prend sa propre ligne */
}

/* Boutons d'action (Ajouter au panier, Contacter) */
.add-to-cart-button {
    /* Style de .btn.btn-primary est dans style.css */
    width: 100%;
    margin-top: 15px;
}

.contact-message-btn {
    /* Style de .btn-outline-secondary est dans style.css. Pas besoin de redéfinir ici. */
    width: 100%;
    margin-top: 10px; /* Marge pour séparer du bouton ajouter au panier */
}

/* Description du produit */
.product-description {
    margin-top: 40px;
    padding: 25px;
    background: var(--background-soft);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
.product-description h3 {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 15px;
}
.product-description p {
    color: var(--text-main);
    line-height: 1.6;
}

/* Section Avis Clients */
.product-reviews {
    margin-top: 40px;
    padding: 25px;
    background: var(--background-soft);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
.product-reviews h3 {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 20px;
}
/* Pas besoin de .text-center et .h4 ici si ce sont des utilitaires */

.review {
    background: var(--background); /* Fond légèrement différent pour les avis */
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}
.review strong { color: var(--text-main); }
/* .review .text-warning et .review small.text-muted sont des utilitaires */
.review p { color: var(--text-main); } /* Contenu de l'avis */

/* Formulaire d'avis */
.product-review-form {
    margin-top: 30px;
    padding: 25px;
    background: var(--background-soft);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
.product-review-form h4 {
    font-size: 1.3rem;
    color: var(--primary);
    margin-bottom: 20px;
}
.product-review-form .form-control { width: 100%; }
/* .product-review-form .w-auto est un utilitaire */


/* Section Questions des clients */
.product-questions {
    margin-top: 40px;
    padding: 25px;
    background: var(--background-soft);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
.product-questions h3 {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 20px;
}
.question-block {
    background: var(--background); /* Fond légèrement différent pour les questions */
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}
.question-block strong { color: var(--text-main); }
/* .question-block .text-dark, .fw-bold, .text-muted, .small sont des utilitaires */
.question-block .bg-white { background: var(--background-soft); } /* Fond pour la réponse */
/* .question-block .p-2, .rounded, .border, .mb-0 sont des utilitaires */

/* Formulaire de question */
.question-form {
    margin-top: 30px;
    padding: 25px;
    background: var(--background-soft);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
.question-form h4 {
    font-size: 1.3rem;
    color: var(--primary);
    margin-bottom: 20px;
}
.question-form .form-control { width: 100%; }


/* Sections de produits similaires et récemment consultés */
.related-products, .recently-viewed {
    margin-top: 40px;
    padding: 25px;
    background: var(--background-soft);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
.related-products h3, .recently-viewed h3 {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 20px;
}

/* Grille pour les produits similaires/récents (remplace Bootstrap .row) */
.related-products .row, .recently-viewed .row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-gap-md); /* Utilise le gap moyen */
    /* Ajuste la marge négative pour compenser le gap */
    margin-left: calc(-1 * var(--grid-gap-md) / 2);
    margin-right: calc(-1 * var(--grid-gap-md) / 2);
}

/* Colonnes dans les grilles produits similaires/récents (remplace Bootstrap .col-*) */
.related-products .col-6, .recently-viewed .col-6 {
    flex: 0 0 calc(50% - var(--grid-gap-md));
    max-width: calc(50% - var(--grid-gap-md));
    padding-left: calc(var(--grid-gap-md) / 2); /* Ajoute le padding pour les colonnes */
    padding-right: calc(var(--grid-gap-md) / 2);
}
/* Définitions pour les autres breakpoints si non déjà dans media queries */
.related-products .col-md-4, .recently-viewed .col-md-4 { /* Pour les écrans MD */
    flex: 0 0 calc(33.333% - var(--grid-gap-md));
    max-width: calc(33.333% - var(--grid-gap-md));
}
.related-products .col-lg-3, .recently-viewed .col-lg-3 { /* Pour les écrans LG */
    flex: 0 0 calc(25% - var(--grid-gap-md));
    max-width: calc(25% - var(--grid-gap-md));
}

/* Ces styles sont déjà gérés par components.css pour les cartes produits complètes.
   Ces petites cartes "card" sont des versions simplifiées.
   Leurs styles de base viennent de .card dans style.css.
   Les ajustements spécifiques sont faits ici.
*/
.related-products .card, .recently-viewed .card {
    background: var(--background-soft); /* Fond cohérent */
    box-shadow: var(--shadow); /* Ombre cohérente */
    border-radius: 12px; /* Coins arrondis */
    border: 1px solid var(--border-color); /* Bordure fine */
    overflow: hidden;
    height: 100%; /* Assure que toutes les cartes ont la même hauteur */
    display: flex; /* S'assure que le contenu s'adapte à la hauteur */
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.related-products .card:hover, .recently-viewed .card:hover {
    transform: translateY(var(--card-hover-lift-small)); /* Petit soulèvement au survol */
    box-shadow: var(--product-card-hover-shadow, var(--shadow)); /* Ombre plus prononcée ou standard */
}

.related-products .card-img-top, .recently-viewed .card-img-top {
    width: 100%;
    height: 120px; /* Hauteur fixe pour l'image */
    object-fit: cover;
}
.related-products .card-body, .recently-viewed .card-body {
    padding: 10px; /* Padding interne réduit pour les petites cartes */
    display: flex;
    flex-direction: column;
    gap: 5px; /* Petit espace entre les éléments internes */
}
.related-products .card-title, .recently-viewed .card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
    white-space: nowrap; /* Utilitaires pour le texte */
    overflow: hidden;
    text-overflow: ellipsis;
}
.related-products .price, .recently-viewed .price {
    font-size: 1rem;
    font-weight: bold;
    color: var(--product-price-color); /* Couleur des prix cohérente */
}
.related-products .price del, .recently-viewed .price del {
    color: var(--text-muted); /* Couleur du prix barré */
    font-size: 0.8rem;
    margin-right: 5px;
}
.related-products .btn-sm, .recently-viewed .btn-sm {
    padding: 6px 10px; /* Padding pour les petits boutons */
    border-radius: 8px; /* Bords arrondis pour les petits boutons */
    font-size: 0.85rem;
    margin-top: 10px;
    width: 100%;
    /* Les couleurs de base viennent de style.css (.btn-outline-primary) */
}


/* Section "Retour à la boutique" */
.back-to-shop {
    margin-top: 50px;
    text-align: center;
}

/* ----------------------------- */
/* 📱 RESPONSIVE (Page Produit) */
/* ----------------------------- */
@media (max-width: 768px) {
    .product-section.container {
        padding: 15px;
        margin-top: 20px;
        margin-bottom: 30px;
        border-radius: 12px;
    }

    .product-layout.row {
        flex-direction: column; /* Les colonnes passent en une seule colonne */
        gap: var(--grid-gap-sm); /* Réduire le gap */
        margin-left: calc(-1 * var(--grid-gap-sm) / 2);
        margin-right: calc(-1 * var(--grid-gap-sm) / 2);
    }

    .product-layout .product-images.col-md-6,
    .product-layout .product-info.col-md-6 {
        flex: 1 1 100%; /* Chaque colonne prend 100% de la largeur */
        max-width: 100%;
        padding-left: calc(var(--grid-gap-sm) / 2);
        padding-right: calc(var(--grid-gap-sm) / 2);
    }

    .product-main-image {
        max-height: 300px; /* Réduire la hauteur max de l'image principale */
        margin-bottom: 10px;
    }

    .product-title.h4 {
        font-size: 1.7rem; /* Taille du titre réduite sur mobile */
        margin-bottom: 10px;
    }

    .product-badges-inline {
        gap: 5px;
    }

    .price-value {
        font-size: 1.5rem;
    }
    .original-price-display {
        font-size: 0.9rem;
    }

    /* Ajustements pour les sections secondaires */
    .product-description,
    .product-reviews,
    .product-review-form,
    .product-questions,
    .question-form,
    .related-products,
    .recently-viewed {
        padding: 15px;
        margin-top: 30px;
        border-radius: 12px;
    }
    .product-description h3,
    .product-reviews h3,
    .product-questions h3,
    .related-products h3,
    .recently-viewed h3 {
        font-size: 1.3rem;
        margin-bottom: 15px;
    }
    .product-review-form h4, .question-form h4 {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }

    /* Grilles des produits similaires/récents sur mobile */
    .related-products .row, .recently-viewed .row {
        gap: var(--grid-gap-sm); /* Réduire le gap */
        margin-left: calc(-1 * var(--grid-gap-sm) / 2);
        margin-right: calc(-1 * var(--grid-gap-sm) / 2);
    }
    .related-products .col-6, .recently-viewed .col-6 {
        flex: 0 0 calc(50% - var(--grid-gap-sm)); /* Deux colonnes sur mobile */
        max-width: calc(50% - var(--grid-gap-sm));
        padding-left: calc(var(--grid-gap-sm) / 2);
        padding-right: calc(var(--grid-gap-sm) / 2);
    }
    .related-products .card-img-top, .recently-viewed .card-img-top {
        height: 100px; /* Réduire la hauteur des images de petites cartes */
    }
    .related-products .card-title, .recently-viewed .card-title {
        font-size: 0.85rem;
    }
    .related-products .price, .recently-viewed .price {
        font-size: 0.9rem;
    }
    .related-products .btn-sm, .recently-viewed .btn-sm {
        font-size: 0.8rem;
        padding: 4px 8px;
    }
}


/* 🌙 Dark Mode pour la page produit (les couleurs seront gérées par les variables) */
.dark-theme .review,
.dark-theme .question-block {
    background: var(--background-soft); /* Fond pour les blocs d'avis/questions en mode sombre */
    border-color: var(--border-color);
}
.dark-theme .review p,
.dark-theme .question-block p,
.dark-theme .question-block .text-dark { /* Inclut la classe text-dark qui est maintenant une utilitaire */
    color: var(--text-main); /* Texte principal des avis/questions en mode sombre */
}
.dark-theme .review strong, .dark-theme .question-block strong {
    color: var(--text-main); /* Noms en gras en mode sombre */
}
.dark-theme .question-block .bg-white { /* La classe bg-white est stylisée ici en dark mode */
    background: var(--background); /* Fond pour la réponse en mode sombre, pour la distinguer */
    border-color: var(--border-color);
}