/**
 * Theme Name: Grogin Child
 * Description: This is a child theme of Grogin, generated by Merlin WP.
 * Author: <a href="http://themeforest.net/user/KlbTheme">KlbTheme (Sinan ISIK)</a>
 * Template: grogin
 * Version: 1.2.4
 */

/* ===================================================
   FIX : Cartes produit — hauteur uniforme par ligne
   =================================================== */

/* 1. Chaque .product devient flex pour s'étirer à la hauteur de la ligne */
.products:not(.slick-slider) > .product {
    display: flex;
    flex-direction: column;
}

/* 2. .product-wrapper remplit toute la hauteur de .product */
.products:not(.slick-slider) > .product .product-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
}

/* 3. .product-inner remplit la hauteur de .product-wrapper */
.product-wrapper .product-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 4. .content-wrapper pousse le prix vers le bas */
.product-wrapper .content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 5. Titre : 1 ligne max avec ellipsis */
.product-wrapper .product-title {
    min-height: 1.3em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block !important;
    -webkit-line-clamp: unset !important;
}

/* 6. Prix : toujours la même hauteur (2 lignes = prix barré + prix promo) */
.product-wrapper .product-price-wrapper {
    margin-top: auto;
    padding-top: 0.5rem;
    min-height: 3.2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* 7. Bloc stock (IN STOCK / OUT OF STOCK) toujours en bas */
.product-wrapper .product-stock {
    flex-shrink: 0;
}

/* ===================================================
   FIX : Image produit — conteneur carré uniforme
   =================================================== */

.product-thumbnail.entry-media {
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #fff;
}

.product-thumbnail.entry-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    -o-object-fit: contain !important;
}

/* ===================================================
   Suffix "HT" : à droite du prix
   Le thème Grogin utilise flex-direction: row-reverse sur .price
   → order: -1 sur le suffix = position la plus à droite visuellement
   =================================================== */
.price > small.woocommerce-price-suffix,
.price > .woocommerce-price-suffix {
    order: -1;
    font-size: 0.72em;
    font-weight: 400;
    color: #888;
    white-space: nowrap;
    align-self: flex-end;
    margin-left: 0.2em;
}

/* ===================================================
   Mobile : masquer le bouton WhatsApp (QuadLayers #qlwapp)
   Il recouvre la barre de navigation mobile Grogin.
   La navbar mobile s'affiche <= 991.98px ; desktop inchange.
   =================================================== */
@media screen and (max-width: 991.98px) {
    .qlwapp__container,
    #qlwapp {
        display: none !important;
    }
}

/* ===================================================
   Slider home (grogin-home-slider) : cadrage mobile/tablette
   Les bannieres sont larges (~4.5:1). En <1024px le theme force une
   hauteur fixe + object-fit:cover => image zoomee et rognee.
   On reproduit le rendu desktop (>=1024px) : hauteur auto, image en flux,
   bannieres affichees en entier sans rognage.
   =================================================== */
@media screen and (max-width: 1023.98px) {
    .site-banner .entry-media {
        height: auto !important;
    }
    .site-banner .entry-media img {
        position: relative !important;
        height: auto !important;
    }
}