/* ------------------------------------------------------------------
   Chocopack - Compteur de déclinaisons
   Une ligne discrète placée entre le titre et le prix de la vignette.
   ------------------------------------------------------------------ */


/* --- Positionnement ---------------------------------------------- */

.product-miniature .product-description {
    display: flex;
    flex-direction: column;

    /*
     * La description devient un « conteneur » : le compteur peut
     * dimensionner sa police en fonction de SA largeur (unité cqi).
     */
    container-type: inline-size;
}

.product-miniature .product-description > .product-title {
    order: 0;
}

.product-miniature .product-description > .chocopack-declinaisons {
    order: 1;
}

.product-miniature .product-description > .product-price-and-shipping {
    order: 2;
}


/* --- Hauteur de la vignette ------------------------------------- */

.product-miniature .thumbnail-container {
    height: auto;
    min-height: 0;
}

.product-miniature .product-description {
    height: auto;
    min-height: 0;
}


/* --- Compteur de déclinaisons ----------------------------------- */

.product-miniature .chocopack-declinaisons {
    list-style: none;

    margin: 4px 0 10px;
    padding: 0;

    display: flex;

    /*
     * TOUJOURS UNE SEULE LIGNE
     */
    flex-wrap: nowrap;
    white-space: nowrap;

    justify-content: center;
    align-items: baseline;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;

    /*
     * Taille adaptative :
     * - 11px pour les navigateurs sans container queries (secours)
     * - sinon 4 % de la largeur de la vignette, bornée entre 8 et 12px
     *
     * Pour grossir ou réduire : ajuster 4cqi (et 12px pour le maximum).
     */
    font-size: 11px;
    font-size: clamp(8px, 4cqi, 12px);

    line-height: 1.4;

    color: #8a8a8a;

    /*
     * Sécurité : si le texte dépassait malgré tout, il est masqué
     * au lieu de déborder de la vignette.
     */
    overflow: hidden;
}


/* --- Éléments du compteur --------------------------------------- */

.product-miniature .chocopack-declinaisons__item {
    display: inline-flex;
    align-items: baseline;

    white-space: nowrap;

    flex: 0 0 auto;
}


/* --- Séparateur entre les éléments ------------------------------- */

.product-miniature .chocopack-declinaisons__item + .chocopack-declinaisons__item::before {
    content: "·";

    /*
     * En em : l'espace suit la taille de la police.
     */
    margin: 0 0.5em;

    color: #9cbf9b;
    font-weight: 700;
}


/* --- Nombre ------------------------------------------------------ */

.product-miniature .chocopack-declinaisons__nb {
    /*
     * Espace entre le chiffre et le libellé, proportionnel.
     */
    margin-right: 0.3em;

    /*
     * Chiffres légèrement plus grands que les libellés.
     */
    font-size: 1.08em;

    font-weight: 600;

    color: #4a4a4a;

    font-variant-numeric: tabular-nums;
}


/* --- Libellé ----------------------------------------------------- */

.product-miniature .chocopack-declinaisons__label {
    letter-spacing: 0.02em;
}


/* --- Couleur au survol ------------------------------------------- */

.product-miniature:hover .chocopack-declinaisons__nb {
    color: #9cbf9b;
    transition: color 0.25s ease;
}