/*
 * product_modules.css — Styles pour les modules xsell, bundle, eclates
 * Rendu par les helpers tep_render_*() (includes/functions/product_modules.php)
 * et les templates Twig templates/twig/pm/.
 *
 * Convention BEM : .pm__element, .pm--modifier
 * Variantes contextuelles : .pm--from-page (product_info legacy), .pm--from-modal (eclate_product_detail)
 *
 * Claude 2026
 *
 * Claude 2026-05-31 - Style aligne (par recopie) sur le bloc .eclates-strip des
 * pages categorie (cf. stylesheet.css) : section "carte" panel, titre vert centre
 * souligne, grille de cards blanches a hover vert. Toutes les valeurs passent par
 * les tokens du design-system (plus aucun hex hardcode).
 */

/* === Section wrapper (carte panel, cf. .eclates-strip) === */
.pm {
    /* Claude 2026-05-31 - largeur de contenu normee (cf. --content-max / .dform-page) */
    max-width: var(--content-max);
    margin: var(--space-4) auto;
    padding: var(--space-3);
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.pm--from-modal {
    /* Dans le modal eclate : pas de bridage 760px, on remplit le conteneur. */
    max-width: none;
    margin: var(--space-3) 0;
}

/* === Title (vert centre souligne, cf. .eclates-strip-title) === */
.pm__title {
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-primary);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-primary);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === List (grid responsive, cf. .eclates-strip-grid) === */
.pm__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-3);
}

.pm--from-modal .pm__list {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: var(--space-2);
}

/* === Item === */
.pm__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* === Link wrapper (card cliquable, cf. .eclate-thumb) === */
.pm__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    padding: var(--space-2);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
    height: 100%;
    box-sizing: border-box;
}
.pm__link:hover,
.pm__link:focus-visible {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
    outline: none;
}

/* === Thumbnail === */
.pm__thumb {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 80px;
    margin: 0 auto var(--space-2);
    border: 0;
}

/* Claude 2026-06-08 - eclatés : image maximisee + padding reduit (parite avec
   le strip .eclate-thumb). Scopé .pm--eclates pour ne pas toucher les vignettes
   produits du xsell/bundle. */
.pm--eclates .pm__link {
    gap: var(--space-1);
    padding: var(--space-1);
}
.pm--eclates .pm__thumb {
    width: 100%;
    max-height: 130px;
    margin: 0 auto var(--space-1);
}

/* === Name (label uppercase soft, cf. .eclate-thumb-label) === */
.pm__name {
    display: block;
    font-size: var(--text-xs);
    line-height: 1.3;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-soft);
    margin-bottom: var(--space-1);
    word-wrap: break-word;
    flex: 1;
}

/* === Price (norme .product-card-price) === */
.pm__price {
    display: block;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-text);
    margin-top: auto;
}
.pm__price--special {
    color: var(--color-error);
}
.pm__price s {
    color: var(--color-text-soft);
    font-weight: normal;
    margin-right: var(--space-1);
}

/* === Eclate-specific === */
.pm__piece-number {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-family: "Courier New", monospace;
    margin-top: var(--space-1);
}

/* === Mobile === */
@media (max-width: 768px) {
    .pm__list {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: var(--space-2);
    }
    .pm--from-modal .pm__list {
        grid-template-columns: repeat(2, 1fr);
    }
}