/*
 * MCS Product Badges — affichage public.
 *
 * Principe unique de ce fichier : une étiquette superposée ne sort jamais du
 * cadre de la photo. Elle est positionnée par rapport au conteneur d'image,
 * bornée en largeur et en hauteur, et laisse passer les clics. Elle ne peut
 * donc masquer ni le titre, ni le prix, ni le bouton d'ajout au panier, quels
 * que soient le texte saisi et la largeur de l'écran.
 */

.mcs-pb-media {
    position: relative;
    display: block;
}

.mcs-pb-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mcs-pb-gap, 4px);
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* Les piles superposées. */
.mcs-pb-stack--top-left,
.mcs-pb-stack--top-right,
.mcs-pb-stack--bottom-left,
.mcs-pb-stack--bottom-right {
    position: absolute;
    z-index: var(--mcs-pb-z, 2);

    /* Le clic appartient à la vignette, pas à l'étiquette. */
    pointer-events: none;

    /* Confinement horizontal : un texte long revient à la ligne au lieu de
       déborder de la photo.

       Il n'y a délibérément pas de contrainte de hauteur ici. Une borne
       « max-height: 100% » associée à « overflow: hidden » rend l'étiquette
       totalement invisible dès que le conteneur d'image a une hauteur nulle —
       ce qui arrive avec les thèmes qui posent la photo en position absolue
       dans un cadre à ratio fixe. Une étiquette qui dépasse un peu se voit et
       se corrige ; une étiquette invisible ne se diagnostique pas. */
    max-width: calc(100% - (var(--mcs-pb-offset, 8px) * 2));
}

.mcs-pb-stack--top-left {
    top: var(--mcs-pb-offset-y, 8px);
    left: var(--mcs-pb-offset, 8px);
}

.mcs-pb-stack--top-right {
    top: var(--mcs-pb-offset-y, 8px);
    right: var(--mcs-pb-offset, 8px);
    align-items: flex-end;
}

.mcs-pb-stack--bottom-left {
    bottom: var(--mcs-pb-offset-y, 8px);
    left: var(--mcs-pb-offset, 8px);
}

.mcs-pb-stack--bottom-right {
    bottom: var(--mcs-pb-offset-y, 8px);
    right: var(--mcs-pb-offset, 8px);
    align-items: flex-end;
}

/* En flux : l'étiquette prend sa place et ne recouvre rien du tout. */
.mcs-pb-stack--inline {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin: 8px 0;
}

.mcs-pb-badge {
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
}

/* Pile émise après la galerie, en attente d'être rattachée à la photo par le
   script public. Sans JavaScript, elle en reste là : en flux sous l'image,
   lisible, plutôt que positionnée par rapport à un bloc arbitraire. */
.mcs-pb-stack--deferred {
    margin: 8px 0;
}

/* La galerie de la fiche produit sert de repère aux étiquettes superposées.
   WooCommerce la met déjà en position relative, mais plusieurs thèmes la
   redéfinissent sans le conserver. */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.images {
    position: relative;
}

/* Le zoom de la galerie WooCommerce se place en z-index 100 : sans cette
   règle, l'étiquette apparaîtrait par-dessus la loupe. */
.woocommerce div.product .woocommerce-product-gallery .mcs-pb-stack {
    z-index: var(--mcs-pb-z, 2);
}

/* Sur une fiche produit, les marges se règlent séparément : la galerie n'a ni
   la mise en page ni les obstacles d'une vignette de grille. Le double
   sélecteur passe devant les règles générales, et la valeur retombe sur celle
   du listing tant qu'elle n'est pas réglée. */
.mcs-pb-stack--single.mcs-pb-stack--top-left,
.mcs-pb-stack--single.mcs-pb-stack--top-right {
    top: var(--mcs-pb-single-offset-y, var(--mcs-pb-offset-y, 8px));
}

.mcs-pb-stack--single.mcs-pb-stack--bottom-left,
.mcs-pb-stack--single.mcs-pb-stack--bottom-right {
    bottom: var(--mcs-pb-single-offset-y, var(--mcs-pb-offset-y, 8px));
}

.mcs-pb-stack--single.mcs-pb-stack--top-left,
.mcs-pb-stack--single.mcs-pb-stack--bottom-left {
    left: var(--mcs-pb-single-offset, var(--mcs-pb-offset, 8px));
}

.mcs-pb-stack--single.mcs-pb-stack--top-right,
.mcs-pb-stack--single.mcs-pb-stack--bottom-right {
    right: var(--mcs-pb-single-offset, var(--mcs-pb-offset, 8px));
}

/* La loupe de zoom occupe le coin haut droit de la galerie. Une étiquette
   placée à ce coin la chevaucherait : on la descend sous le bouton.

   Deux structures à couvrir. Sur une fiche WooCommerce classique, la pile est
   posée dans la galerie, donc sœur du bouton. Sur une fiche composée avec un
   constructeur de page, c'est la galerie entière qui est enveloppée : la pile
   devient sœur du conteneur, et le sélecteur de fratrie ne la voit plus. */
.woocommerce-product-gallery__trigger ~ .mcs-pb-stack--top-right,
.mcs-pb-media:has(.woocommerce-product-gallery__trigger) > .mcs-pb-stack--top-right {
    top: calc(var(--mcs-pb-single-offset-y, var(--mcs-pb-offset-y, 8px)) + 2.4em);
}

/* Le bouton de zoom est parfois posé à gauche par le thème. La règle
   symétrique évite d'avoir déplacé le problème plutôt que de l'avoir réglé. */
.mcs-pb-media:has(.woocommerce-product-gallery__trigger.left) > .mcs-pb-stack--top-left {
    top: calc(var(--mcs-pb-single-offset-y, var(--mcs-pb-offset-y, 8px)) + 2.4em);
}

@media print {
    .mcs-pb-stack {
        display: none;
    }
}