/*
 * LA VENTE AU POIDS (11/11/2026) : le choix du poids sur la fiche et dans le panier, dans les deux thèmes.
 * Voir App\Catalogue\VenteAuPoids et shop/product/_poids.html.twig.
 *
 * La couleur est celle de la boutique (--shop-primary), comme le calendrier (calendrier.css) ; le reste suit
 * l'encre et les bordures du thème quand il les définit, avec des replis sobres sinon.
 */
.ventePoids {
    --vp-accent: var(--shop-primary, #187073);
    --vp-sur-accent: var(--shop-primary-contrast, #fff);
    --vp-encre: var(--shop-ink, #16181b);
    --vp-bord: var(--shop-border, #d9dde3);
    --vp-doux: var(--shop-muted, #6b7280);
}

.ventePoids__choix {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin: 6px 0 8px;
}

.ventePoids__pas {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--vp-bord);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.ventePoids__pas button {
    width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--vp-encre);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.ventePoids__pas button:hover:not([disabled]),
.ventePoids__pas button:focus-visible {
    background: color-mix(in srgb, var(--vp-accent) 10%, transparent);
    outline: none;
}

.ventePoids__pas button[disabled] {
    color: var(--vp-bord);
    cursor: default;
}

.ventePoids__poids {
    min-width: 96px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 17px;
    color: var(--vp-encre);
    font-variant-numeric: tabular-nums;
    border-left: 1px solid var(--vp-bord);
    border-right: 1px solid var(--vp-bord);
}

.ventePoids__total {
    font-weight: 700;
    font-size: 20px;
    color: var(--vp-encre);
    font-variant-numeric: tabular-nums;
}

.ventePoids__courants {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
}

.ventePoids__courant {
    border: 1px solid var(--vp-bord);
    background: #fff;
    color: var(--vp-encre);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 14px;
    cursor: pointer;
}

.ventePoids__courant.est-choisi {
    background: var(--vp-accent);
    border-color: var(--vp-accent);
    color: var(--vp-sur-accent);
}

.ventePoids__plage,
.ventePoids__bornes {
    display: block;
    color: var(--vp-doux);
    font-size: 13px;
    line-height: 1.45;
}

/* Dans le panier : le même choix, plus compact. */
.ventePoids--ligne .ventePoids__choix {
    margin: 0;
    justify-content: flex-end;
}

.ventePoids--ligne .ventePoids__pas button {
    width: 36px;
    min-height: 36px;
    font-size: 18px;
}

.ventePoids--ligne .ventePoids__poids {
    min-width: 80px;
    font-size: 15px;
}