/**
 * ALJA — Composant Carte Produit (Product Card Component CSS)
 *
 * SOURCE UNIQUE de vérité pour tous les styles des cartes produit.
 * Chargé sur toutes les pages via enqueue.php (always).
 *
 * Architecture :
 *   1. Base de la carte  — .alja-product-card-wrap / .alja-product-card
 *   2. Éléments internes — badge, image, body, rating, price, button, wishlist
 *   3. Modes de conteneur :
 *        .alja-cards--grid      → grille responsive (default)
 *        .alja-cards--carousel  → scroll horizontal avec peek
 *        .alja-cards--list      → vue liste (horizontal)
 *
 * Usage PHP :
 *   <div class="alja-cards alja-cards--grid">
 *     <?php alja_render_product_card($product); ?>
 *   </div>
 *
 * @package ALJA
 * @since   1.2.0
 */

/* ════════════════════════════════════════════════════════════════
   1. WRAPPER  (.alja-product-card-wrap)
   Élément qui contient la carte + le bouton wishlist absolu.
   S'adapte selon le mode parent.
   ════════════════════════════════════════════════════════════════ */

.alja-product-card-wrap {
    position: relative;      /* ancrage wishlist absolut */
    display: flex;
    flex-direction: column;
    min-width: 0;            /* évite l'overflow flex */
}

/* ════════════════════════════════════════════════════════════════
   2. CARTE  (.alja-product-card)
   ════════════════════════════════════════════════════════════════ */

.alja-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;                 /* remplit son wrapper */
    background: var(--wp--preset--color--white, #fff);
    border: 1px solid var(--wp--preset--color--gray-200, #e5e7eb);
    border-radius: var(--wp--custom--border-radius--lg, 1rem);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    height: auto !important; /* toujours géré par flexbox */
    transition: transform 250ms ease,
                box-shadow  250ms ease,
                border-color 250ms ease;
    cursor: pointer;
}

.alja-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
    border-color: transparent;
}

/* ════════════════════════════════════════════════════════════════
   3. BADGE  (.alja-product-card__badge)
   ════════════════════════════════════════════════════════════════ */

.alja-product-card__badge {
    position: absolute;
    top: 0.75rem;
    inset-inline-start: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--wp--custom--border-radius--full, 999px);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    z-index: 2;
    color: #fff;
    pointer-events: none;
}

.alja-product-card__badge--bestseller,
.alja-product-card__badge--new       { background: var(--wp--preset--color--primary,   #3A8A6A); }
.alja-product-card__badge--premium   { background: var(--wp--preset--color--secondary,  #D4A43A); }
.alja-product-card__badge--discover  { background: var(--wp--preset--color--rose,       #2A6B7C); }
.alja-product-card__badge--promo     { background: var(--wp--preset--color--error,      #DC2626); }

/* ════════════════════════════════════════════════════════════════
   4. IMAGE  (.alja-product-card__image-wrap)
   ════════════════════════════════════════════════════════════════ */

.alja-product-card__image-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--wp--preset--color--sand-light, #F7F3EF);
    flex-shrink: 0;
}

.alja-product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--wp--custom--transition--slow, 400ms ease);
    display: block;
}

.alja-product-card:hover .alja-product-card__image {
    transform: scale(1.06);
}

/* Overlay épuisé */
.alja-product-card__out-of-stock-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--wp--preset--color--gray-600, #6B7280);
    backdrop-filter: blur(2px);
}

/* ════════════════════════════════════════════════════════════════
   5. BODY  (.alja-product-card__body)
   ════════════════════════════════════════════════════════════════ */

.alja-product-card__body {
    display: flex;
    flex-direction: column;
    padding: 0.875rem 0.875rem 0.75rem;
    flex: 1;
    gap: 0.25rem;
}

/* Catégorie */
.alja-product-card__cat {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wp--preset--color--gray-400, #9CA3AF);
    font-weight: 600;
    display: block;
}

/* Nom */
.alja-product-card__name {
    font-family: var(--wp--preset--font-family--heading, inherit);
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
    font-weight: 700;
    color: var(--wp--preset--color--charcoal, #2D2D2D);
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;            /* pousse prix + bouton vers le bas */
}

/* Description courte / variantes */
.alja-product-card__variants {
    font-size: 0.75rem;
    color: var(--wp--preset--color--gray-600, #6B7280);
    margin: 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════
   6. NOTATION / ÉTOILES  (.alja-product-card__rating)
   ════════════════════════════════════════════════════════════════ */

.alja-product-card__rating {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.alja-stars {
    display: flex;
    gap: 1px;
}

.alja-star {
    fill: #E5E7EB;
    stroke: none;
    flex-shrink: 0;
}

.alja-star.filled {
    fill: #F59E0B;
}

.alja-product-card__review-count {
    font-size: 0.6875rem;
    color: var(--wp--preset--color--gray-400, #9CA3AF);
}

/* ════════════════════════════════════════════════════════════════
   7. PRIX  (.alja-product-card__pricing)
   ════════════════════════════════════════════════════════════════ */

.alja-product-card__pricing {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    margin-top: auto;
    flex-wrap: wrap;
}

.alja-product-card__price {
    font-size: var(--wp--preset--font-size--md, 1rem);
    font-weight: 800;
    color: var(--wp--preset--color--primary, #3A8A6A);
    /* Prix WC natif : inclut le del barré automatiquement */
}
/* Compatibilité avec le balisage WC natif (del + ins) */
.alja-product-card__price del,
.alja-product-card__price .woocommerce-Price-amount:has(+ .woocommerce-Price-amount) {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--wp--preset--color--gray-400, #9CA3AF);
    text-decoration: line-through;
}
.alja-product-card__price ins {
    text-decoration: none;
    font-weight: 800;
    color: var(--wp--preset--color--primary, #3A8A6A);
}

.alja-product-card__price--old {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--wp--preset--color--gray-400, #9CA3AF);
    text-decoration: line-through;
}

/* ════════════════════════════════════════════════════════════════
   8. BOUTON ATC / VOIR LE PRODUIT
   ════════════════════════════════════════════════════════════════ */

.alja-product-card__add-to-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 0.875rem;
    background: var(--wp--preset--color--primary, #3A8A6A);
    color: #fff !important;
    font-family: var(--wp--preset--font-family--body, inherit);
    font-size: var(--wp--preset--font-size--xs, 0.75rem);
    font-weight: 700;
    /* Hauteur identique <button> (Ajouter au panier) et <span>
       (Voir le produit) : sans valeur explicite, le span hérite
       du line-height 1.6 ambiant et sort plus haut. */
    line-height: 1.2;
    border: none;
    border-radius: var(--wp--custom--border-radius--md, 0.625rem);
    cursor: pointer;
    text-decoration: none !important;
    transition: background 200ms ease, transform 150ms ease;
    margin-top: 0.75rem;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    z-index: 2; /* au-dessus du lien parent <a> */
}

.alja-product-card__add-to-cart:hover {
    background: var(--wp--preset--color--primary-dark, #2D6E53);
    transform: translateY(-1px);
    color: #fff !important;
}

/* Spinner / check icons — hidden by default */
.alja-product-card__add-spinner,
.alja-product-card__add-check { display: none; flex-shrink: 0; }

/* Loading */
.alja-product-card__add-to-cart.is-loading .alja-product-card__add-text { display: none; }
.alja-product-card__add-to-cart.is-loading .alja-product-card__add-spinner {
    display: block;
    animation: alja-pc-spin 0.6s linear infinite;
}
@keyframes alja-pc-spin { to { transform: rotate(360deg); } }

/* Added */
.alja-product-card__add-to-cart.is-added {
    background: #16a34a;
    pointer-events: none;
}
.alja-product-card__add-to-cart.is-added .alja-product-card__add-text { display: none; }
.alja-product-card__add-to-cart.is-added .alja-product-card__add-check { display: block; }

/* Bouton "Voir le produit" — même style plein et même hauteur que
   « Ajouter au panier » : il hérite intégralement du style de base
   .alja-product-card__add-to-cart (les deux classes sont posées sur
   l'élément). La classe --unavailable ne sert plus qu'au mode liste. */

/* ════════════════════════════════════════════════════════════════
   VARIANTES SUR LA CARTE — pastilles flottantes en bas de l'image
   (produit variable à un attribut ; la sélection alimente le bouton
   « Ajouter au panier » avec l'ID de variation)
   ════════════════════════════════════════════════════════════════ */

.alja-product-card__variant-picker {
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 2;
    display: flex;
    gap: 0.375rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* respiration pour que la bordure de sélection ne soit pas rognée
       par le conteneur défilant */
    padding: 2px;
}

.alja-product-card__variant-picker::-webkit-scrollbar { display: none; }

.alja-product-card__variant {
    flex: 0 0 auto;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--wp--preset--color--charcoal, #2D2D2D);
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.alja-product-card__variant:hover {
    border-color: var(--wp--preset--color--primary, #3A8A6A);
}

.alja-product-card__variant.is-selected {
    background: var(--wp--preset--color--primary, #3A8A6A);
    border-color: var(--wp--preset--color--primary, #3A8A6A);
    color: #fff;
}

.alja-product-card__variant:disabled {
    opacity: 0.45;
    text-decoration: line-through;
    cursor: not-allowed;
}

/* Swatch couleur — rond plein (attribut de type « color »).
   Minimaliste : sélection par bordure, sans ombre. */
.alja-product-card__variant--color {
    width: 1.625rem;
    height: 1.625rem;
    padding: 0;
    border-radius: 50%;
    background: var(--alja-swatch, #ccc);
    border: 2px solid #fff;
}

.alja-product-card__variant--color:hover,
.alja-product-card__variant--color.is-selected {
    background: var(--alja-swatch, #ccc);
    border-color: var(--wp--preset--color--primary, #3A8A6A);
}

/* Swatch image — vignette carrée (attribut de type « image ») */
.alja-product-card__variant--image {
    width: 2.375rem;
    height: 2.375rem;
    padding: 2px;
    border-radius: 0.5rem;
    background: #fff;
    border: 1.5px solid var(--wp--preset--color--gray-200, #E5E7EB);
}

.alja-product-card__variant--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.375rem;
    display: block;
}

.alja-product-card__variant--image:hover,
.alja-product-card__variant--image.is-selected {
    background: #fff;
    border-color: var(--wp--preset--color--primary, #3A8A6A);
}

/* ════════════════════════════════════════════════════════════════
   9. BOUTON FAVORI / WISHLIST
   ════════════════════════════════════════════════════════════════ */

.alja-product-card__wishlist,
.alja-card__wishlist {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    z-index: 4;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    transition: all 200ms ease;
    backdrop-filter: blur(4px);
}
.alja-product-card__wishlist svg,
.alja-card__wishlist svg {
    fill: none;
    stroke: #9CA3AF;
    transition: stroke 200ms, fill 200ms;
}
.alja-product-card__wishlist:hover svg,
.alja-card__wishlist:hover svg,
.alja-product-card__wishlist.is-active svg,
.alja-card__wishlist.is-active svg {
    stroke: #ef4444;
    fill: #ef4444;
}
.alja-product-card__wishlist:hover,
.alja-card__wishlist:hover {
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

/* ════════════════════════════════════════════════════════════════
   ── MODE 1 : GRILLE  (.alja-cards--grid)
   Grille responsive — 2 → 3 → 4 → 5 colonnes
   ════════════════════════════════════════════════════════════════ */

.alja-cards--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .alja-cards--grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .alja-cards--grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1440px) {
    .alja-cards--grid { grid-template-columns: repeat(5, 1fr); }
}

/* Cartes de même hauteur dans la grille */
.alja-cards--grid .alja-product-card-wrap {
    height: 100%; /* remplit la cellule grid */
}

/* ════════════════════════════════════════════════════════════════
   ── MODE 2 : CAROUSEL  (.alja-cards--carousel)
   Scroll horizontal avec snapping + peek de la carte suivante.
   Mobile  : 1 + 30%   → largeur calc(100% / 1.3)
   Tablette: 2 + 30%   (≥ 640px)
   Desktop : 3 + 30%   (≥ 1024px)
   Large   : 4 + 30%   (≥ 1440px)
   ════════════════════════════════════════════════════════════════ */

.alja-cards--carousel {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 1.25rem;
    align-items: stretch; /* toutes les cartes = hauteur de la plus haute */
    /* Masquer la scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Un conteneur overflow-x:auto rogne aussi verticalement :
       padding interne pour laisser respirer les ombres des cartes
       (0 12px 40px au survol), compensé par des marges négatives
       pour garder un alignement visuel identique. */
    padding: 20px 20px 44px;
    margin: -20px -20px -24px;
}
.alja-cards--carousel::-webkit-scrollbar { display: none; }

/* Wrapper = flex item direct = définit la largeur */
.alja-cards--carousel .alja-product-card-wrap {
    flex: 0 0 auto;
    width: calc(100% / 1.3);   /* mobile : ~77% → 30% de peek */
    scroll-snap-align: start;
    height: auto !important;
}

@media (min-width: 425px) and (max-width: 639px) {
    .alja-cards--carousel .alja-product-card-wrap {
        width: calc((100% - 1.25rem) / 2.3);
    }
}
@media (min-width: 640px) {
    .alja-cards--carousel .alja-product-card-wrap {
        width: calc((100% - 2.5rem) / 3.3);
    }
}
@media (min-width: 1024px) {
    .alja-cards--carousel .alja-product-card-wrap {
        width: calc((100% - 3.75rem) / 4.3);
    }
}
@media (min-width: 1440px) {
    .alja-cards--carousel .alja-product-card-wrap {
        width: calc((100% - 5rem) / 5.3);
    }
}

/* L'image en carousel : hauteur fixe pour uniformité */
.alja-cards--carousel .alja-product-card__image-wrap {
    aspect-ratio: unset;
    height: 200px;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   ── MODE 3 : LISTE  (.alja-cards--list)
   Chaque carte = ligne horizontale (image à gauche, contenu à droite)
   ════════════════════════════════════════════════════════════════ */

.alja-cards--list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.alja-cards--list .alja-product-card-wrap {
    width: 100%;
}

.alja-cards--list .alja-product-card {
    flex-direction: row;
    border-radius: var(--wp--custom--border-radius--lg, 1rem);
    overflow: hidden;
    height: auto !important;
    align-items: stretch;
}

.alja-cards--list .alja-product-card__image-wrap {
    aspect-ratio: unset;
    width: 140px;
    flex: 0 0 140px;
    height: auto;
}

@media (min-width: 640px) {
    .alja-cards--list .alja-product-card__image-wrap {
        width: 180px;
        flex: 0 0 180px;
    }
}

.alja-cards--list .alja-product-card__body {
    flex: 1;
    padding: 1rem 1.125rem;
    justify-content: center;
}

.alja-cards--list .alja-product-card__name {
    -webkit-line-clamp: 1; /* 1 ligne en vue liste */
    line-clamp: 1;
}

.alja-cards--list .alja-product-card__add-to-cart,
.alja-cards--list .alja-product-card__add-to-cart--unavailable {
    width: auto;
    align-self: flex-start;
    padding: 0.5rem 1.125rem;
    margin-top: 0.625rem;
}

/* Legacy alias — .alja-products-grid utilisé sur plusieurs pages existantes */
.alja-products-grid:not(.alja-cards--carousel):not(.alja-cards--list) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .alja-products-grid:not(.alja-cards--carousel):not(.alja-cards--list) {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1024px) {
    .alja-products-grid:not(.alja-cards--carousel):not(.alja-cards--list) {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (min-width: 1440px) {
    .alja-products-grid:not(.alja-cards--carousel):not(.alja-cards--list) {
        grid-template-columns: repeat(5, 1fr);
    }
}
.alja-products-grid:not(.alja-cards--carousel):not(.alja-cards--list) .alja-product-card-wrap {
    height: 100%;
}