/* ============================================================
   LAKAY-SHOP-CARDS.CSS — v5.0 (Final)
   ------------------------------------------------------------
   Corrections ciblées :
   - Mode sombre : fond des cartes, titre, vendeur, prix.
   - Nom du vendeur : rendu visible en clair et en sombre.
   - Bouton "View cart" : lisible et bien positionné.
   - Barre de tri (List/Grid + Select) : alignement propre,
     sans toucher aux couleurs.
   - Image : suppression de la bordure blanche en bas.
   - Wishlist : correction du fond blanc et du texte rouge
     UNIQUEMENT en mode sombre.
   ============================================================ */

/* ============================================================
   1. MODE SOMBRE — CARTES PRODUITS
   ============================================================ */
html[data-theme="dark"] body ul.products li.product {
    background-color: var(--lk-bg-soft, #1A2438) !important;
    border-color: var(--lk-border, #334155) !important;
}

html[data-theme="dark"] body ul.products li.product .item-content {
    background-color: var(--lk-bg-soft, #1A2438) !important;
}

html[data-theme="dark"] body ul.products li.product .woocommerce-loop-product__title {
    color: var(--lk-text, #E2E8F0) !important;
}

html[data-theme="dark"] body ul.products li.product .item-vendor {
    color: var(--lk-muted, #94A3B8) !important;
}

html[data-theme="dark"] body ul.products li.product .item-vendor a {
    color: var(--lk-blue, #60A5FA) !important;
}

html[data-theme="dark"] body ul.products li.product .item-meta .price {
    color: var(--lk-text, #E2E8F0) !important;
}

html[data-theme="dark"] body ul.products li.product .item-meta .price del {
    color: var(--lk-muted, #94A3B8) !important;
}

html[data-theme="dark"] body ul.products li.product .item-meta .price ins {
    color: #F87171 !important;
}

/* ============================================================
   2. NOM DU VENDEUR — VISIBLE EN MODE CLAIR
   ============================================================ */
body ul.products li.product .item-vendor {
    display: block !important;
    font-size: 12px !important;
    color: var(--lk-muted, #666) !important;
    margin: 4px 0 8px 0 !important;
}
body ul.products li.product .item-vendor a {
    color: var(--lk-blue, #00209F) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
body ul.products li.product .item-vendor a:hover {
    text-decoration: underline !important;
}

/* ============================================================
   3. BOUTON "AJOUTE NAN PANYE" — SUR MOBILE
   ============================================================ */
body ul.products li.product .item-button > a.button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 10px 8px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
}

/* Masquer le mot "undefined" */
.woocommerce ul.products.list li .item-bar .item-button > a span, .woocommerce-page ul.products.list li .item-bar .item-button > a span {
    display: none !important;
}

@media (max-width: 480px) {
    body ul.products li.product .item-button > a.button {
        font-size: 11px !important;
        padding: 8px 6px !important;
    }
}

/* ============================================================
   4. BOUTON "VIEW CART" (Après ajout) — LISIBLE
   ============================================================ */
body ul.products li.product .item-button .added_to_cart,
body ul.products li.product .item-button a.added_to_cart,
body ul.products li.product .added_to_cart {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    background: var(--lk-green, #2E7D32) !important;
    color: #FFFFFF !important;
    box-sizing: border-box !important;
}

body ul.products li.product .item-button .added_to_cart:hover,
body ul.products li.product .item-button a.added_to_cart:hover,
body ul.products li.product .added_to_cart:hover {
    background: #1B5E20 !important;
}

/* ============================================================
   5. BARRE DE TRI (List/Grid + Select) — ALIGNEMENT PROPRE
   ============================================================ */
.dokani__filter-wrap {
    height: 40px !important;
    min-width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    margin-bottom: 25px !important;
    padding: 0 !important;
    background-color: transparent !important;
    border: none !important;
}

.dokani__filter-wrap .box-shadow, .woocommerce .woocommerce-ordering .orderby {
    background-color: transparent !important;
    box-shadow: none !important;
    color: var(--lk-text, #1E293B) !important;
    border: 1px solid var(--lk-border, #CBD5E1) !important;
    border-radius: 8px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    height: 40px !important;
}

/* Boutons List/Grid — on ne change pas les couleurs, on agrandit juste */
.dokani-products-view {
    display: flex !important;
    gap: 5px !important;
}

/* Menu déroulant — on ne change pas les couleurs */
.woocommerce-ordering select {
    background-repeat: no-repeat !important;
    background-position: right 15px top 50% !important;
    background-size: 10px auto !important;
    cursor: pointer !important;
    min-width: 231px !important;
}

/* ============================================================
   6. CORRECTION DE L'IMAGE — SUPPRESSION BORDURE BLANCHE
   ============================================================ */
body ul.products li.product a.woocommerce-LoopProduct-link img {
    border-bottom: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* ============================================================
   7. WISHLIST — CORRECTION EN MODE SOMBRE UNIQUEMENT
   ============================================================ */
html[data-theme="dark"] body ul.products li.product .stw-wishlist-button-container button,
html[data-theme="dark"] body ul.products li.product .save-to-wishlist-button {
    background-color: #1E293B !important; /* Fond sombre */
    color: #E2E8F0 !important; /* Texte clair */
    border-color: #334155 !important;
}

/* Icône du cœur en mode sombre */
html[data-theme="dark"] body ul.products li.product .save-to-wishlist-button svg {
    fill: #E2E8F0 !important;
}
html[data-theme="dark"] body ul.products li.product .save-to-wishlist-button svg.hover-icon {
    fill: var(--lk-blue, #60A5FA) !important;
}

/* ============================================================
   8. MOBILE — RÉDUIRE LA TAILLE DE LA POLICE DES CARTES
   ============================================================ */
@media (max-width: 480px) {

    .woocommerce ul.products, .woocommerce-page ul.products {
        gap: 10px !important;
    }

    body ul.products li.product .woocommerce-loop-product__title {
        font-size: 14px !important;
    }
    body ul.products li.product .item-meta .price {
        font-size: 15px !important;
    }
    body ul.products li.product .item-vendor {
        font-size: 11px !important;
    }
}

/* ============================================================
   9. CARTES PRODUITS — TOUTES ZONES (related, upsells, etc.)
   ------------------------------------------------------------
   Uniformise les grilles : 4 colonnes desktop, 3 tablette,
   2 mobile. Ne touche ni aux textes ni aux cartes elles-mêmes.
   ============================================================ */

/* Desktop : 4 colonnes partout */
.woocommerce .products.columns-2,
.woocommerce .products.columns-3,
.woocommerce .products.columns-4,
.woocommerce .products.columns-5,
.woocommerce .products.columns-6,
.related.products .products,
.upsells.products .products,
.cross-sells .products,
.woocommerce ul.products,
.woocommerce-page ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* Tablette Portrait : 3 colonnes */
@media (max-width: 972px) {
    .woocommerce .products.columns-2,
    .woocommerce .products.columns-3,
    .woocommerce .products.columns-4,
    .woocommerce .products.columns-5,
    .woocommerce .products.columns-6,
    .related.products .products,
    .upsells.products .products,
    .cross-sells .products,
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Mobile : 2 colonnes */
@media (max-width: 480px) {
    .woocommerce .products.columns-2,
    .woocommerce .products.columns-3,
    .woocommerce .products.columns-4,
    .woocommerce .products.columns-5,
    .woocommerce .products.columns-6,
    .related.products .products,
    .upsells.products .products,
    .cross-sells .products,
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}