/* Page /mugs-personnalises — ajustements des cartes mug.
   La vignette mug est un PNG transparent (mug centré avec marge autour). On la
   zoome dans le cadre de la carte, en gardant les proportions (contain) et le
   fond transparent — pas de crop ni de rectangle blanc. */

/* Intro : sans crumb ni sous-titre, le gros padding-top de collections.css
   (shorthand padding: sp-12 …) laisse trop d'espace au-dessus du titre. On
   cible .page-mug-intro (2 classes) + shorthand pour battre la règle partagée,
   et on ajoute un petit espace SOUS le titre (avant la grille). */
.page-collections-intro.page-mug-intro {
    padding: var(--sp-4) var(--sp-3) var(--sp-4);
}
.page-collections-intro.page-mug-intro .page-collections-title {
    margin-bottom: var(--sp-4);
}

.page-mug-card-img-wrap {
    /* Fond de la carte au lieu du gris par défaut des cartes 325 (le PNG mug
       étant transparent, on veut le fond crème de la page dessous). */
    background: var(--color-bg-card, #FBF6EF);
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-mug-card-img {
    /* contain = mug entier visible, jamais coupé ; scale = zoom sur le mug ;
       translateX négatif = recentre le mug vers la gauche (l'anse le décalait
       à droite). */
    object-fit: contain !important;
    transform: scale(1.35) translateX(-8%);
    transform-origin: center center;
}