/**
 * Nhemixt Mobile Products
 * Layout horizontal Amazon-style pour mobile
 *
 * CIBLAGE:
 * - Styles appliqués UNIQUEMENT sur .nhm-mobile-layout
 * - Cette classe est ajoutée par JS uniquement aux produits dans .nhm-target
 * - Les produits dans .nhm-excluded ne reçoivent jamais cette classe
 */

/* ==========================================================================
   VARIABLES
   ========================================================================== */

.nhm-mobile-layout {
    --nhm-bg: #ffffff;
    --nhm-radius: 12px;
    --nhm-shadow: 0 2px 8px rgba(0,0,0,0.08);
    --nhm-text: #1a1a1a;
    --nhm-text-light: #666666;
    --nhm-accent: #1860BD;
    --nhm-accent-dark: #145099;
    --nhm-heart: #e63946;
    --nhm-badge-bg: #1a1a2e;
    --nhm-badge-text: #ffffff;
    --nhm-success: #10b981;
}

/* ==========================================================================
   STYLES MOBILE (< 768px)
   ========================================================================== */

@media screen and (max-width: 767px) {

    /* ------------------------------------------------------------------
       Container produit
       ------------------------------------------------------------------ */

    li.product.nhm-mobile-layout {
        all: unset !important;
        display: flex !important;
        flex-direction: column !important;
        background: var(--nhm-bg) !important;
        border-radius: var(--nhm-radius) !important;
        box-shadow: var(--nhm-shadow) !important;
        overflow: hidden !important;
        margin-bottom: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ------------------------------------------------------------------
       Masquer les éléments originaux
       ------------------------------------------------------------------ */

    li.product.nhm-mobile-layout > .logo-categorie-produit,
    li.product.nhm-mobile-layout > .yith-wcbm-badge,
    li.product.nhm-mobile-layout > .tinv-wraper,
    li.product.nhm-mobile-layout > .woocommerce-LoopProduct-link,
    li.product.nhm-mobile-layout > .woocommerce-loop-product__buttons,
    li.product.nhm-mobile-layout > .screen-reader-text {
        display: none !important;
    }

    /* ------------------------------------------------------------------
       HEADER - Logo | Badge | Wishlist
       ------------------------------------------------------------------ */

    li.product.nhm-mobile-layout .nhm-mobile-header {
        all: unset !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 12px !important;
        background: #fafbfc !important;
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
        min-height: 44px !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    /* Logo */
    li.product.nhm-mobile-layout .nhm-mobile-header .logo-categorie-produit {
        all: unset !important;
        display: block !important;
        flex-shrink: 0 !important;
        order: 1 !important;
    }

    li.product.nhm-mobile-layout .nhm-mobile-header .logo-categorie-produit img {
        all: unset !important;
        display: block !important;
        max-width: 48px !important;
        max-height: 28px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Badge */
    li.product.nhm-mobile-layout .nhm-mobile-header .yith-wcbm-badge {
        all: unset !important;
        display: block !important;
        flex: 0 1 auto !important;
        order: 2 !important;
        margin-left: 8px !important;
        margin-right: auto !important;
    }

    li.product.nhm-mobile-layout .nhm-mobile-header .yith-wcbm-badge .yith-wcbm-badge__wrap {
        all: unset !important;
        display: inline-block !important;
        background: var(--nhm-badge-bg) !important;
        padding: 4px 10px !important;
        border-radius: 4px !important;
    }

    li.product.nhm-mobile-layout .nhm-mobile-header .yith-wcbm-badge .yith-wcbm-badge-text,
    li.product.nhm-mobile-layout .nhm-mobile-header .yith-wcbm-badge .yith-wcbm-badge-text p,
    li.product.nhm-mobile-layout .nhm-mobile-header .yith-wcbm-badge .yith-wcbm-badge-text span {
        all: unset !important;
        font-family: system-ui, -apple-system, sans-serif !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        color: var(--nhm-badge-text) !important;
        line-height: 1.2 !important;
    }

    /* Wishlist */
    li.product.nhm-mobile-layout .nhm-mobile-header .tinv-wraper {
        all: unset !important;
        display: block !important;
        flex-shrink: 0 !important;
        order: 3 !important;
    }

    li.product.nhm-mobile-layout .nhm-mobile-header .tinvwl_add_to_wishlist_button {
        all: unset !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        background: #ffffff !important;
        border: 1px solid rgba(0,0,0,0.1) !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    li.product.nhm-mobile-layout .nhm-mobile-header .tinvwl_add_to_wishlist_button::before {
        display: none !important;
    }

    /* Icone Lucide Heart */
    li.product.nhm-mobile-layout .nhm-mobile-header .tinvwl_add_to_wishlist_button::after {
        content: '' !important;
        display: block !important;
        width: 18px !important;
        height: 18px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    li.product.nhm-mobile-layout .nhm-mobile-header .tinvwl_add_to_wishlist_button.tinvwl-product-in-list::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23e63946' stroke='%23e63946' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E") !important;
    }

    li.product.nhm-mobile-layout .nhm-mobile-header .tinvwl-tooltip {
        display: none !important;
    }

    /* ------------------------------------------------------------------
       CONTENT - Image | Titre + Prix
       ------------------------------------------------------------------ */

    li.product.nhm-mobile-layout .nhm-mobile-content {
        all: unset !important;
        display: flex !important;
        flex-direction: row !important;
        padding: 12px !important;
        gap: 14px !important;
        background: var(--nhm-bg) !important;
        text-decoration: none !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    /* Image */
    li.product.nhm-mobile-layout .nhm-image-wrapper {
        all: unset !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        width: 110px !important;
        height: 110px !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    li.product.nhm-mobile-layout .nhm-image-wrapper img,
    li.product.nhm-mobile-layout .nhm-image-wrapper img.nhm-product-image {
        all: unset !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        padding: 6px !important;
        box-sizing: border-box !important;
    }

    /* Info */
    li.product.nhm-mobile-layout .nhm-info-wrapper {
        all: unset !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        flex: 1 !important;
        min-width: 0 !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    /* Titre */
    li.product.nhm-mobile-layout .nhm-info-wrapper .woocommerce-loop-product__title {
        all: unset !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        font-family: system-ui, -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        color: var(--nhm-text) !important;
    }

    /* Prix */
    li.product.nhm-mobile-layout .nhm-info-wrapper .price {
        all: unset !important;
        display: block !important;
        font-family: system-ui, -apple-system, sans-serif !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        color: var(--nhm-text) !important;
        line-height: 1.2 !important;
    }

    li.product.nhm-mobile-layout .nhm-info-wrapper .price del {
        all: unset !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        color: var(--nhm-text-light) !important;
        text-decoration: line-through !important;
        margin-right: 6px !important;
    }

    li.product.nhm-mobile-layout .nhm-info-wrapper .price ins {
        all: unset !important;
        color: #c41e3a !important;
    }

    li.product.nhm-mobile-layout .nhm-info-wrapper .price .woocommerce-Price-amount,
    li.product.nhm-mobile-layout .nhm-info-wrapper .price bdi {
        all: unset !important;
    }

    /* ------------------------------------------------------------------
       FOOTER - Bouton Ajouter au panier
       ------------------------------------------------------------------ */

    li.product.nhm-mobile-layout .nhm-mobile-footer {
        all: unset !important;
        display: block !important;
        padding: 0 12px 12px 12px !important;
        background: var(--nhm-bg) !important;
        box-sizing: border-box !important;
    }

    li.product.nhm-mobile-layout .nhm-mobile-footer .woocommerce-loop-product__buttons {
        all: unset !important;
        display: block !important;
    }

    li.product.nhm-mobile-layout .nhm-mobile-footer .woocommerce-loop-product__buttons a.button,
    li.product.nhm-mobile-layout .nhm-mobile-footer .woocommerce-loop-product__buttons a.add_to_cart_button {
        all: unset !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 14px 20px !important;
        background: linear-gradient(135deg, #2070CD 0%, var(--nhm-accent) 50%, var(--nhm-accent-dark) 100%) !important;
        border-radius: 8px !important;
        font-family: system-ui, -apple-system, sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: #ffffff !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    /* Icone ShoppingCart */
    li.product.nhm-mobile-layout .nhm-mobile-footer .woocommerce-loop-product__buttons a.button::before,
    li.product.nhm-mobile-layout .nhm-mobile-footer .woocommerce-loop-product__buttons a.add_to_cart_button::before {
        content: '' !important;
        display: inline-block !important;
        width: 18px !important;
        height: 18px !important;
        margin-right: 10px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    /* Loading */
    li.product.nhm-mobile-layout .nhm-mobile-footer .woocommerce-loop-product__buttons a.button.loading,
    li.product.nhm-mobile-layout .nhm-mobile-footer .woocommerce-loop-product__buttons a.add_to_cart_button.loading {
        opacity: 0.7 !important;
        pointer-events: none !important;
    }

    li.product.nhm-mobile-layout .nhm-mobile-footer .woocommerce-loop-product__buttons a.button.loading::before,
    li.product.nhm-mobile-layout .nhm-mobile-footer .woocommerce-loop-product__buttons a.add_to_cart_button.loading::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E") !important;
        animation: nhm-spin 1s linear infinite !important;
    }

    /* Added */
    li.product.nhm-mobile-layout .nhm-mobile-footer .woocommerce-loop-product__buttons a.button.added,
    li.product.nhm-mobile-layout .nhm-mobile-footer .woocommerce-loop-product__buttons a.add_to_cart_button.added {
        background: linear-gradient(135deg, #34d399 0%, var(--nhm-success) 50%, #059669 100%) !important;
    }

    li.product.nhm-mobile-layout .nhm-mobile-footer .woocommerce-loop-product__buttons a.button.added::before,
    li.product.nhm-mobile-layout .nhm-mobile-footer .woocommerce-loop-product__buttons a.add_to_cart_button.added::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
        animation: none !important;
    }

    li.product.nhm-mobile-layout .nhm-mobile-footer .added_to_cart {
        display: none !important;
    }
}

/* ==========================================================================
   ANIMATION
   ========================================================================== */

@keyframes nhm-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}