.hmb-sidecart { position: fixed; inset: 0; z-index: 95; }
.hmb-sidecart[hidden] { display: none; }
.hmb-sidecart__backdrop { position: absolute; inset: 0; background: var(--hm-veil, rgba(63,47,37,0.38)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.3s; }
.hmb-sidecart.is-open .hmb-sidecart__backdrop { opacity: 1; }
.hmb-sidecart__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(94vw, 440px); background: var(--hm-bg, #fbf8f3); display: flex; flex-direction: column; border-radius: 24px 0 0 24px; box-shadow: var(--hm-shadow-3, 0 30px 80px -20px rgba(63,47,37,0.35)); transform: translateX(100%); transition: transform 0.36s cubic-bezier(0.2,0.7,0.2,1); }
.hmb-sidecart.is-open .hmb-sidecart__panel { transform: none; }
.hmb-sidecart__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--hm-border, rgba(63,47,37,0.1)); background: var(--hm-glass-strong, rgba(255,255,255,0.9)); border-radius: 24px 0 0 0; }
.hmb-sidecart__head h2 { margin: 0; font-size: 1.35rem; display: flex; align-items: baseline; gap: 8px; }
.hmb-sidecart__count { font-family: var(--hm-font, sans-serif); font-size: 0.88rem; color: var(--hm-muted, #8a7a6b); font-weight: 600; }
.hmb-sidecart__close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, transform 0.15s; }
.hmb-sidecart__close:hover { background: var(--hm-surface-2, #f6efe6); }
.hmb-sidecart__close:active { transform: scale(0.94); }
.hmb-sidecart__notices:empty { display: none; }
.hmb-sidecart__notices p { margin: 0; padding: 10px 20px; font-size: 0.9rem; font-weight: 600; animation: hm-fade-in 0.25s ease; }
.hmb-sidecart__notices .is-error { background: var(--hm-rasp-bg, #fbe9eb); color: var(--hm-rasp, #c94f5c); }
.hmb-sidecart__notices .is-info { background: var(--hm-sage-bg, #eaf2eb); color: var(--hm-sage, #7a9e7e); }
.hmb-sidecart__body { flex: 1; overflow-y: auto; padding: 14px 20px; overscroll-behavior: contain; }
.hmb-sidecart__empty { text-align: center; padding: 40px 0; color: var(--hm-brown-soft, #6b5a4b); }
.hmb-sidecart__empty p { margin-bottom: 14px; }
.hmb-sidecart__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hmb-sidecart__item { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 12px; background: #fff; border: 1px solid var(--hm-border, rgba(63,47,37,0.1)); border-radius: 16px; box-shadow: var(--hm-shadow-1, 0 1px 2px rgba(63,47,37,0.05)); animation: hm-fade-in 0.3s ease; transition: opacity 0.2s; }
.hmb-sidecart__item.is-busy { opacity: 0.45; pointer-events: none; }
.hmb-sidecart__thumb img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; }
.hmb-sidecart__info { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-right: 30px; }
.hmb-sidecart__name { color: var(--hm-brown, #3f2f25); font-weight: 700; font-size: 0.94rem; line-height: 1.3; }
.hmb-sidecart__meta { font-size: 0.78rem; color: var(--hm-muted, #8a7a6b); }
.hmb-sidecart__meta dl, .hmb-sidecart__meta dt, .hmb-sidecart__meta dd, .hmb-sidecart__meta p { display: inline; margin: 0; }
.hmb-sidecart__meta dt { font-weight: 600; }
.hmb-sidecart__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.hmb-sidecart__qty { display: inline-flex; align-items: center; border: 1px solid var(--hm-border-strong, rgba(63,47,37,0.18)); border-radius: 999px; overflow: hidden; background: #fff; }
/* Sélecteurs renforcés (0,3,1) : theme.css est chargé APRÈS la feuille du module, sa règle globale
   input[type="number"] (100 %, 46 px, bordure, arrondi 12 px) gagnait à spécificité égale et
   déformait la pilule. Boutons et champ à 36 px : cible tactile correcte dans les 999 px d'arrondi. */
.hmb-sidecart .hmb-sidecart__qty button { flex: 0 0 36px; width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer; font-size: 1rem; color: var(--hm-brown, #3f2f25); transition: background 0.15s; }
.hmb-sidecart .hmb-sidecart__qty button:hover { background: var(--hm-surface-2, #f6efe6); }
.hmb-sidecart .hmb-sidecart__qty input[type="number"] { width: 38px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; text-align: center; font-weight: 700; -moz-appearance: textfield; }
/* theme.css pose un halo de 4 px sur input:focus : il déborderait de la pilule (overflow hidden). */
.hmb-sidecart .hmb-sidecart__qty input[type="number"]:focus { border: 0; box-shadow: none; }
.hmb-sidecart .hmb-sidecart__qty input[type="number"]::-webkit-inner-spin-button, .hmb-sidecart .hmb-sidecart__qty input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hmb-sidecart__price { font-weight: 800; font-size: 0.94rem; font-variant-numeric: tabular-nums; }
/* 32 px : cible tactile conforme à WCAG 2.5.8, l'icône reste à 16 px. */
.hmb-sidecart__remove { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--hm-muted, #8a7a6b); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
.hmb-sidecart__remove:hover { background: var(--hm-rasp-bg, #fbe9eb); color: var(--hm-rasp, #c94f5c); }
/* ------------------------------------------------------------------
   Colonne voisine : les suggestions à côté du volet, pas dedans
   ------------------------------------------------------------------
   Elles vivaient sous la liste des articles, dans la zone de défilement du volet : il fallait
   dépasser son propre panier pour les voir, ce qui n'arrive jamais. Elles ont maintenant leur
   propre carte, posée à gauche du volet avec un intervalle franc — collée, elle aurait formé
   un seul bloc de 700 px de large et perdu ce qui la distingue du panier.

   Elle glisse en même temps que le volet, avec un léger retard : elle arrive après lui.
   Sous 1100 px, la place manque et le script la replace dans le corps du volet
   (panier-lateral.js, placerExtra) ; elle reprend alors la mise en forme d'origine.
   ------------------------------------------------------------------ */
.hmb-sidecart__extra {
	position: absolute; top: 0; bottom: 0;
	right: calc(min(94vw, 440px) + 22px);
	width: 290px; display: none; flex-direction: column;
	padding: 18px; overflow-y: auto; overscroll-behavior: contain;
	background: var(--hm-surface, #fff); border-radius: 20px;
	box-shadow: var(--hm-shadow-3, 0 30px 80px -20px rgba(63,47,37,0.35));
	transform: translateX(calc(100% + min(94vw, 440px) + 22px));
	transition: transform 0.42s cubic-bezier(0.2,0.7,0.2,1) 0.06s;
}
@media (min-width: 1100px) {
	.hmb-sidecart__extra { display: flex; margin-block: 28px; }
	.hmb-sidecart.is-open .hmb-sidecart__extra { transform: none; }
}
/* Après la media query, sinon celle-ci la rallumerait : rien à suggérer, pas de carte vide. */
.hmb-sidecart .hmb-sidecart__extra:empty { display: none; }
/* Replacée dans le volet (petits écrans) : plus de carte flottante, un simple bloc à la suite. */
.hmb-sidecart__body > .hmb-sidecart__extra { position: static; display: block; width: auto; padding: 0; margin: 0; background: none; box-shadow: none; transform: none; overflow: visible; }

.hmb-sidecart__extra .hmb-sidecart__sugg { margin-top: 0; }
.hmb-sidecart__extra .hmb-sidecart__sugg ul { gap: 10px; }
.hmb-sidecart__extra .hmb-sidecart__sugg li { grid-template-columns: 64px 1fr; grid-template-areas: "img nom" "img bouton"; row-gap: 6px; }
.hmb-sidecart__extra .hmb-sidecart__sugg li > a:first-child { grid-area: img; }
.hmb-sidecart__extra .hmb-sidecart__sugg li div { grid-area: nom; }
.hmb-sidecart__extra .hmb-sidecart__sugg li div a { white-space: normal; }
.hmb-sidecart__extra .hmb-sidecart__sugg li > .hm-btn { grid-area: bouton; justify-self: start; }

.hmb-sidecart__sugg { margin-top: 22px; }
.hmb-sidecart__sugg h3 { font-size: 1.05rem; margin: 0 0 10px; }
.hmb-sidecart__sugg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hmb-sidecart__sugg li { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 8px; background: #fff; border-radius: 12px; border: 1px solid var(--hm-border, rgba(63,47,37,0.1)); }
.hmb-sidecart__sugg img { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; background: var(--hm-cream, #fbf8f3); }
@keyframes hmb-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hmb-sidecart .is-arrive { animation: hmb-arrive 0.35s var(--hm-ease, ease-out) both; }
@media (prefers-reduced-motion: reduce) { .hmb-sidecart .is-arrive { animation: none; } }
.hmb-sidecart__sugg li div { display: flex; flex-direction: column; min-width: 0; font-size: 0.85rem; }
.hmb-sidecart__sugg li div a { color: var(--hm-brown, #3f2f25); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hmb-sidecart__foot { padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hm-border, rgba(63,47,37,0.1)); background: #fff; display: grid; gap: 10px; }
.hmb-sidecart__foot:empty { display: none; }
.hmb-sidecart__ship p { margin: 0 0 6px; font-size: 0.88rem; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--hm-brown-soft, #6b5a4b); }
.hmb-sidecart__ship .hm-icon { color: var(--hm-sage, #7a9e7e); }
.hmb-sidecart__bar { height: 6px; border-radius: 3px; background: var(--hm-surface-2, #f6efe6); overflow: hidden; }
.hmb-sidecart__bar span { display: block; height: 100%; background: var(--hm-sage, #7a9e7e); transition: width 0.5s cubic-bezier(0.2,0.7,0.2,1); }
.hmb-sidecart__codes { text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.hmb-sidecart__codesbox { display: grid; gap: 10px; }
.hmb-sidecart__codesbox[hidden] { display: none; }
.hmb-sidecart__coupon { display: flex; gap: 6px; }
.hmb-sidecart__coupon input { flex: 1; min-height: 40px; padding: 8px 12px; }
.hmb-sidecart__applied { margin: 0; font-size: 0.85rem; color: var(--hm-sage, #7a9e7e); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.hmb-sidecart__applied button { border: 0; background: none; color: var(--hm-muted, #8a7a6b); text-decoration: underline; cursor: pointer; font-size: 0.8rem; }
.hmb-sidecart__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; }
.hmb-sidecart__total strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.hmb-sidecart__links { display: flex; justify-content: space-between; gap: 12px; }
.hmb-sidecart__link { font-size: 0.85rem; font-weight: 700; color: var(--hm-caramel-dark, #a96f44); background: none; border: 0; padding: 0; cursor: pointer; }
.hmb-sidecart__link:hover { color: var(--hm-brown, #3f2f25); }
body.hmb-sidecart-open { overflow: hidden; }
.hmb-cart-shake { animation: hmb-shake 0.5s; }
@keyframes hmb-shake { 20% { transform: scale(1.18); } 40% { transform: scale(0.95); } 60% { transform: scale(1.08); } }

/* ------------------------------------------------------------------
   Au doigt : le panier latéral est le premier écran après un ajout, et c'est
   là que la quantité s'ajuste. Les 36 px dessinés pour la souris passent à
   44 px, et la ligne de quantité récupère la place qu'il faut : à 320 px, la
   pilule était comprimée à 47 px et le « + » disparaissait purement et
   simplement (mesuré : boutons rognés par l'overflow de la pilule).
   ------------------------------------------------------------------ */
@media (max-width: 699px) {
	.hmb-sidecart__close { width: 44px; height: 44px; }
	/* Boîte agrandie sans déplacer l'icône : le centre reste à 22 px du coin, comme avec 32 px à 6 px. */
	.hmb-sidecart__remove { top: 1px; right: 1px; width: 44px; height: 44px; }
	/* Réserve élargie d'autant pour que le nom et les variantes ne passent pas sous la croix. */
	.hmb-sidecart__info { padding-right: 34px; }
	/* La ligne de quantité, elle, est sous la croix : elle reprend la réserve, et passe sur
	   deux rangs quand le prix ne tient plus à côté de la pilule (320 px). */
	.hmb-sidecart__row { margin-right: -34px; flex-wrap: wrap; row-gap: 6px; }
	.hmb-sidecart .hmb-sidecart__qty { flex: 0 0 auto; }
	.hmb-sidecart .hmb-sidecart__qty button { flex: 0 0 44px; width: 44px; height: 44px; }
	.hmb-sidecart .hmb-sidecart__qty input[type="number"] { width: 40px; height: 44px; }
	/* Liens secondaires du pied : 22 px de haut, sous la cible tactile. Le rembourrage
	   vertical les porte à 44 px sans changer la typographie ni l’alignement de la ligne. */
	.hmb-sidecart__link { padding: 11px 0; }
}