/* =========================
   GRILLE PRODUITS (Vinted)
   ========================= */
ul.products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

@media (max-width: 1100px) {
    ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 780px) {
    ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    ul.products {
        grid-template-columns: 1fr;
    }
}

/* =========================
   CARTE STYLE VINTED
   (compatible content-product.php existant)
   ========================= */
ul.products li.product {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border, #e6ece7);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    transition: transform .18s ease, box-shadow .18s ease;
    margin: 0 !important;
    /* kill marges Woo */
}

ul.products li.product:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
}

/* Media carré */
ul.products li.product .woocommerce-LoopProduct-link,
ul.products li.product .rh-card-media,
.v-media {
    position: relative;
    display: block;
}

ul.products li.product .woocommerce-LoopProduct-link img,
.v-media img {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* carré */
    object-fit: cover;
    display: block;
}

/* Prix en pastille circulaire blanche */
.v-price {
    position: absolute;
    left: 14px;
    bottom: 14px;
    background: #fff;
    /* fond blanc */
    color: #1c231e;
    /* texte foncé */
    font-weight: 800;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    /* cercle/pill */
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    /* optionnel pour le contraste */
}

/* Badge “Nouveau” (optionnel) */
.v-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e9f6ec;
    color: #2d6a3d;
    border: 1px solid #cde7d3;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 999px;
    z-index: 2;
}

/* Cœur favoris : icône seul (aucun fond) */
.v-fav {
    padding: 6px;
    /* hitbox confortable, invisible */
    top: 14px;
    /* éloigne du coin pour éviter le border-radius */
    right: 14px;
    /* idem */
    z-index: 3;
    /* au-dessus de l’image */
    background: none !important;
    /* sécurité */
    border: 0 !important;
    line-height: 0;
}

.v-fav:hover,
.v-fav:focus,
.v-fav:active {
    background: none !important;
    border: 0 !important;
    outline: none;
}

.v-fav__icon {
    width: 22px !important;
    /* un chouia plus grand pour la lisibilité */
    height: 22px !important;
    display: block;
    object-fit: contain;
}

/* si l’icône change en actif, on garde exactement la même boîte */
.v-fav.is-active .v-fav__icon {
    content: url("../images/favoris_select.svg");
}

.v-fav--pulse {
    transform: scale(.92);
    transition: transform .15s ease;
}

/* Corps */
.v-body {
    padding: 14px 16px 16px;
}

.v-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin: 0 0 4px !important;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    color: #3C4E46 !important;
    text-decoration: none !important;
}

.v-title a,
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
    color: var(--ink, #1c231e);
    text-decoration: none;
}

.v-title a:hover,
.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover {
    color: #3C4E46 !important;
    text-decoration: underline;
}


.v-line {
    font-size: 12px;
    color: var(--muted, #6b6f72);
}

.v-sub {
    margin-top: 3px;
    font-size: 12px;
    color: var(--muted, #6b6f72);
}

/* Footer interne (si tu as une ligne infos/actions) */
.v-card__footer,
.rh-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 12px;
    margin-top: auto;
    /* colle en bas de carte */
}

/* =========================
   NETTOYAGES WOO/ASTRA/ELEMENTOR
   ========================= */
/* vire boutons Woo (add to cart, lire la suite) dans la grille */
.woocommerce ul.products li.product .button,
ul.products li.product a.button,
ul.products li.product .button {
    display: none !important;
}

/* pagination compacte */
.woocommerce nav.woocommerce-pagination,
.rh-pagination {
    margin: 12px 0 0 !important;
    padding: 0 !important;
}

.rh-pagination ul {
    margin: 0 !important;
}

.rh-pagination li {
    margin: 0 4px !important;
}

/* conteneurs Elementor/Astra */
.elementor .elementor-widget-shortcode .elementor-widget-container,
.elementor .elementor-widget-container {
    margin: 0 !important;
}

.elementor .elementor-widget:not(:last-child) {
    margin-bottom: 0 !important;
}

.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single {
    padding: 0 !important;
}

/* sécurité layout */
ul.products {
    clear: both;
}

/* espace bas pour éviter le chevauchement footer */
.rh-products-wrap {
    display: block;
    margin: 0 !important;
    padding: 0 0 48px !important;
    position: relative;
    z-index: 1;
}

.site-footer {
    position: relative;
    z-index: 0;
}

/* === TITRE PRODUIT (forcé) === */
ul.products li.product .v-title,
ul.products li.product .v-title a,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title a {
    color: #3C4E46 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    display: block;
    margin: 0 0 6px !important;
}

ul.products li.product .v-title a:hover,
ul.products li.product .woocommerce-loop-product__title a:hover {
    color: #3C4E46 !important;
    text-decoration: underline !important;
}

/* === PASTILLE PRIX === */
ul.products li.product .v-price {
    position: absolute;
    left: 14px !important;
    /* au lieu de 10px */
    bottom: 14px !important;
    /* au lieu de 10px */
    padding: 6px 12px !important;
    border-radius: 999px;
}

/* === PADDING DU CORPS === */
/* Si tu utilises .v-body (style Vinted) */
ul.products li.product .v-body {
    padding: 16px 18px 18px !important;
}

/* Sinon fallback sur wrappers Woo */
ul.products li.product .rh-pcard__body,
ul.products li.product .rh-card-text {
    padding: 16px 18px 18px !important;
}

/* === Reset couleurs Woo/Elementor === */
ul.products li.product a,
.elementor a {
    color: inherit !important;
    text-decoration: none !important;
}

/* === TITRE PRODUIT (couleur + gras + hover) === */
ul.products li.product .v-title,
ul.products li.product .v-title a,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title a {
    color: #3C4E46 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    display: block;
    margin: 0 0 6px !important;
}

ul.products li.product .v-title a:hover,
ul.products li.product .woocommerce-loop-product__title a:hover {
    color: #3C4E46 !important;
    text-decoration: underline !important;
}

/* === PASTILLE PRIX (décoller du bord) === */
ul.products li.product .v-price {
    position: absolute;
    left: 14px !important;
    bottom: 14px !important;
    padding: 6px 12px !important;
    border-radius: 999px;
}

/* === PADDING DU CORPS (marche si .v-body existe) === */
ul.products li.product .v-body {
    padding: 16px 18px 18px !important;
    box-sizing: border-box;
}

/* === Fallback si .v-body n’existe pas (on padd les blocs texte Woo) === */
ul.products li.product .rh-pcard__body,
ul.products li.product .rh-card-text {
    padding: 16px 18px 18px !important;
    box-sizing: border-box;
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .price,
ul.products li.product .star-rating,
ul.products li.product .rh-meta,
ul.products li.product .rh-pcard__actions,
ul.products li.product .rh-pcard__btns {
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/* === Reset des couleurs de liens autour (Woo/Elementor) === */
ul.products li.product a,
.elementor a {
    color: inherit !important;
    text-decoration: none !important;
}

/* Sécurité : pas de marge par carte, la grille gère l’espace */
.woocommerce ul.products,
ul.products {
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce ul.products li.product,
ul.products li.product {
    margin: 0 !important;
}

/* =========================
   COUCHES & CLICS (fix favoris)
   ========================= */

/* Le média (lien/image) reste sous le cœur */
ul.products li.product .woocommerce-LoopProduct-link,
.v-media {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
}

/* Cœur au-dessus de tout, sans fond/hover */
.v-fav {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 10 !important;

    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    cursor: pointer !important;

    box-shadow: none !important;
    /* jamais de halo/fond */
}

.v-fav:hover,
.v-fav:focus,
.v-fav:active {
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    filter: none !important;
}

/* L’icône ne “mange” pas le clic — le bouton reçoit l’event */
.v-fav__icon {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    pointer-events: none !important;
}

/* La pastille prix passe entre l’image (1) et le cœur (10) */
.v-price {
    z-index: 2 !important;
}

/* === Fiche produit : mise en forme du bloc achat === */
.single-product form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
}

.single-product .single_add_to_cart_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid var(--brand, #3b7d3a);
    background: var(--brand, #3b7d3a);
    color: #fff;
    font-weight: 800;
    line-height: 1;
}

.single-product .single_add_to_cart_button:hover {
    filter: brightness(.98);
}

/* Champ quantité compact */
.single-product form.cart .quantity input.qty {
    width: 80px;
    min-height: 40px;
    text-align: center;
    border: 1px solid var(--border, #e6ece7);
    border-radius: 8px;
}

/* Ne jamais cacher le bouton de la fiche produit */
.single-product .single_add_to_cart_button {
    display: inline-flex !important;
}

/* Single product : ne garder que le formulaire d'achat de la colonne summary */
.single-product .product form.cart {
    display: none !important;
}

.single-product .product .summary form.cart {
    display: block !important;
}

/* Pas de champ quantité en C2C */
.single-product form.cart .quantity {
    display: none !important;
}


/* ===== Produits similaires / Upsells : même grille Vinted ===== */
.single-product .related.products,
.single-product .upsells.products {
    margin-top: 24px;
    clear: both;
}

.single-product .related.products>h2,
.single-product .upsells.products>h2 {
    margin: 0 0 12px;
}

/* Même grille que partout */
.single-product .related ul.products,
.single-product .upsells ul.products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    clear: both;
}

@media (max-width: 1100px) {

    .single-product .related ul.products,
    .single-product .upsells ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 780px) {

    .single-product .related ul.products,
    .single-product .upsells ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {

    .single-product .related ul.products,
    .single-product .upsells ul.products {
        grid-template-columns: 1fr;
    }
}

/* Les <li> réutilisent déjà tes styles de carte Vinted :
   on s’assure juste qu’aucune marge Woo ne traîne */
.single-product .related ul.products li.product,
.single-product .upsells ul.products li.product {
    margin: 0 !important;
}

/* Sécurité : images carrées comme sur la home/favoris */
.single-product .related ul.products li.product img,
.single-product .upsells ul.products li.product img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/* =========================================================
   FICHE PRODUIT → Produits similaires / Upsells = style Vinted
   (place this AT THE VERY END of rh-woo-cards.css)
   ========================================================= */

/* Titre de section + reset marges */
.single-product .related.products,
.single-product .upsells.products {
    margin-top: 24px;
    clear: both;
}

.single-product .related.products>h2,
.single-product .upsells.products>h2 {
    margin: 0 0 12px;
}

/* Même grille que la home/favoris */
.single-product .related ul.products,
.single-product .upsells ul.products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    clear: both;
}

@media (max-width:1100px) {

    .single-product .related ul.products,
    .single-product .upsells ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width:780px) {

    .single-product .related ul.products,
    .single-product .upsells ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:520px) {

    .single-product .related ul.products,
    .single-product .upsells ul.products {
        grid-template-columns: 1fr;
    }
}

/* LI = même carte Vinted (bordures, ombre, pas de marges Woo) */
.single-product .related ul.products li.product,
.single-product .upsells ul.products li.product {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border, #e6ece7);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    transition: transform .18s ease, box-shadow .18s ease;
    margin: 0 !important;
}

.single-product .related ul.products li.product:hover,
.single-product .upsells ul.products li.product:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
}

/* Image carrée comme partout */
.single-product .related ul.products li.product img,
.single-product .upsells ul.products li.product img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
}

/* Corps de carte = même padding */
.single-product .related ul.products li.product .v-body,
.single-product .upsells ul.products li.product .v-body {
    padding: 16px 18px 18px !important;
    box-sizing: border-box;
}

/* Titre identique (couleur + gras + hover) */
.single-product .related ul.products li.product .v-title,
.single-product .related ul.products li.product .v-title a,
.single-product .related ul.products li.product .woocommerce-loop-product__title,
.single-product .related ul.products li.product .woocommerce-loop-product__title a,
.single-product .upsells ul.products li.product .v-title,
.single-product .upsells ul.products li.product .v-title a,
.single-product .upsells ul.products li.product .woocommerce-loop-product__title,
.single-product .upsells ul.products li.product .woocommerce-loop-product__title a {
    color: #3C4E46 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    display: block;
    margin: 0 0 6px !important;
}

.single-product .related ul.products li.product .v-title a:hover,
.single-product .related ul.products li.product .woocommerce-loop-product__title a:hover,
.single-product .upsells ul.products li.product .v-title a:hover,
.single-product .upsells ul.products li.product .woocommerce-loop-product__title a:hover {
    color: #3C4E46 !important;
    text-decoration: underline !important;
}

/* Cœur & pastille prix = on garde tes styles, mais on vire les intrus Woo */
.single-product .related ul.products li.product .button,
.single-product .related ul.products li.product a.button,
.single-product .related ul.products li.product .add_to_cart_button,
.single-product .related ul.products li.product .price,
.single-product .upsells ul.products li.product .button,
.single-product .upsells ul.products li.product a.button,
.single-product .upsells ul.products li.product .add_to_cart_button,
.single-product .upsells ul.products li.product .price {
    display: none !important;
    /* Woo mettait les barres/CTA verts */
}

/* Sécurité : aucun padding/marge parasite injecté par thème */
.single-product .related ul.products,
.single-product .upsells ul.products {
    background: transparent;
}