/* CSS pour l'orientation des images de produits - Frontend uniquement */

/* Conteneur d'image de produit avec orientation - Spécificité élevée */
.produit-image.product-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.produit-image.product-image-container.orientation-portrait {
    aspect-ratio: 3/4 !important; /* Format portrait */
    width: 60px !important;
    height: 80px !important; /* 60 * 4/3 */
}

.produit-image.product-image-container.orientation-portrait img {
    transform: rotate(0deg) !important; /* Portrait = image droite */
}

/* Paysage: rotation seulement, pas de changement de dimensions */

.produit-image.product-image-container.orientation-paysage img {
    transform: rotate(90deg) !important; /* Paysage = rotation 90° */
}

.produit-image.product-image-container.orientation-auto {
    aspect-ratio: 1/1 !important; /* Format carré par défaut */
    width: 60px !important;
    height: 60px !important;
}

.produit-image.product-image-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.3s ease;
}

.produit-image.product-image-container:hover img {
    transform: scale(1.05);
}

/* Styles responsive pour les orientations */
@media (max-width: 768px) {
    .product-image-container.orientation-portrait,
    .product-image-container.orientation-paysage {
        aspect-ratio: 1/1; /* Forcer le carré sur mobile */
    }
}