/* ── Badges produit ── */

/* Couleurs de marque */
:root {
    --brand-red: #C8102E;
    --brand-gold: #FFB81C;
}

/* Badge de sortie : « Sortie le jj/mm/aaaa » (rouge), « Disponible aujourd'hui ! » le jour J (or, comme « Nouveau ») */
.badge-release {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--brand-red);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.badge-release--today {
    background: var(--brand-gold);
    color: #7a4e00;
}

/* « Prochaine sortie » (bleu historique du site) */
.badge-coming {
    display: inline-flex;
    align-items: center;
    background: #0099CC;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.badge-coming--lg {
    font-size: 0.78rem;
    padding: 5px 12px;
    border-radius: 6px;
}

/* Badges dans les coins de l'image de la vignette : « Prochaine sortie » à gauche, date à droite */
.product-img {
    container-type: inline-size; /* adapte les badges à la largeur de la VIGNETTE, pas de l'écran */
}

.badge-corner {
    position: absolute;
    top: 10px;
    z-index: 1;
}

.badge-corner--left {
    left: 10px;
}

.badge-corner--right {
    right: 10px;
}

/* Vignette étroite (grille mobile de /boutique, ~170 px) : la date repasse sous « Prochaine sortie » */
@container (max-width: 229px) {
    .badge-corner--right {
        right: auto;
        left: 10px;
        top: 34px;
    }
}

/* Jour J : « Disponible aujourd'hui ! » est plus long ; côte à côte il faut ~300 px (les vignettes en font 238 à 265) */
@container (max-width: 299px) {
    .badge-corner--right.badge-release--today {
        right: auto;
        left: 10px;
        top: 34px;
    }
}

/* Coup de cœur ET nouveau : ♥ en haut à gauche, « Nouveau » garde le haut à droite */
.badge-heart--left {
    right: auto;
    left: 10px;
}

/* Fiche produit */
.badge-release--lg {
    font-size: 0.78rem;
    padding: 5px 12px;
    border-radius: 6px;
}

/* Statut de stock d'une précommande payante (même gabarit que .product-stock-ok / low / no) */
.product-stock-preorder {
    font-size: 0.75rem;
    color: var(--brand-red);
    font-weight: 600;
}

/* Tunnel de commande : mention de précommande sous le nom de l'article, avis de panier mixte */
.cart-item-preorder {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-red);
    margin: 2px 0 0;
}

.preorder-notice {
    font-size: 0.8rem;
    line-height: 1.4;
    background: #fdf2f4;
    border-left: 3px solid var(--brand-red);
    border-radius: 4px;
    padding: 8px 10px;
    margin: 12px 0;
}