.hmb-buybar { position: fixed; left: 0; right: 0; bottom: calc(var(--hm-bottombar-h, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 65; background: var(--hm-glass-strong, rgba(255,255,255,0.9)); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); border-top: 1px solid var(--hm-border, rgba(63,47,37,0.1)); box-shadow: 0 -10px 30px -12px rgba(63,47,37,0.2); transform: translateY(110%); visibility: hidden; transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1), visibility 0s 0.3s; }
/* La boîte doit rester mesurable en permanence (theme.js publie --hm-buybar-h, d'où la réserve en bas
   de page) : on annule donc le display:none de l'attribut hidden. C'est « visibility » qui masque, car
   un simple décalage par transform laisserait le bouton dans l'ordre de tabulation et audible au
   lecteur d'écran. visibility conserve la boîte : offsetHeight ne bouge pas. */
.hmb-buybar[hidden] { display: block; }
.hmb-buybar.is-visible { transform: none; visibility: visible; transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1); }
.hmb-buybar__inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.hmb-buybar__img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex: none; box-shadow: var(--hm-shadow-1, 0 1px 2px rgba(63,47,37,0.05)); }
.hmb-buybar__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.hmb-buybar__reco { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; color: var(--hm-caramel-dark, #a96f44); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.hmb-buybar__name { font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hmb-buybar__price { font-size: 0.9rem; color: var(--hm-brown-soft, #6b5a4b); font-variant-numeric: tabular-nums; }
.hmb-buybar__price del { opacity: 0.6; margin-right: 4px; }
.hmb-buybar__price ins { text-decoration: none; color: var(--hm-rasp, #c94f5c); font-weight: 700; }
.hmb-buybar__btn { flex: none; white-space: nowrap; }
/* ------------------------------------------------------------------
   Au doigt : la colonne texte était étranglée par tout ce qui l'entoure à
   largeur fixe (2 x 16 px de rembourrage + vignette 48 px + 2 gouttières de
   12 px + bouton 175 px en nowrap = 279 px réservés). Il ne lui restait que
   111 px à 390 px, d'où le nom tronqué même court, la mention repliée sur
   trois lignes (barre à 99 px au lieu de 69) et le prix lui-même coupé à
   320 px. Chaque réserve rend un peu de place et la mention tient sur une
   ligne : la barre retrouve sa hauteur d'origine.
   ------------------------------------------------------------------ */
@media (max-width: 699px) {
	.hmb-buybar__inner { gap: 10px; padding: 8px 12px; }
	.hmb-buybar__img { width: 40px; height: 40px; border-radius: 10px; }
	/* display:block (et non inline-flex) : c'est la seule façon d'obtenir l'ellipse, le texte
	   de la mention étant un nœud anonyme qu'un conteneur flex ne sait pas rogner. */
	.hmb-buybar__reco { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	/* L'icône est en display:block dans le thème : dans un bloc elle prenait sa propre ligne et
	   la mention comptait double (27 px au lieu de 14). Remise en ligne, la gouttière du flex
	   disparue étant reprise par une marge. */
	.hmb-buybar__reco svg, .hmb-buybar__reco .hm-icon { display: inline-block; vertical-align: -2px; margin-right: 4px; }
	/* Sélecteur renforcé (0,2,0) : theme.css est chargé APRÈS la feuille du module et sa règle
	   .hm-btn (padding 12px 22px) gagnait à spécificité égale. */
	.hmb-buybar .hmb-buybar__btn { padding: 12px 14px; font-size: 0.92rem; }
}
@media (min-width: 900px) { .hmb-buybar:not(.hmb-buybar--desktop) { display: none; } .hmb-buybar__inner { padding: 12px 32px; } }