/* Rangée de filtres et menu de tri de la boutique. */
.hmb-filtres { margin: 0 0 18px; }
.hmb-filtres[hidden] { display: none; }
/* « minmax(0, 1fr) » et « min-width: 0 » : sans eux, la piste implicite de la grille (auto) et
   l'élément de grille (min-width: auto) s'étirent à la largeur du contenu. Sur mobile, la rangée
   de couleurs faisait 1 619 px, la page dézoomait et la barre du bas (fixed) partait avec le
   viewport gonflé : « le menu du bas ne s'affiche plus » (constat de Simon, 14/09). */
.hmb-filtres__rangs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.hmb-filtres__rang { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.hmb-filtres__titre { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--hm-muted, #76665a); flex: none; }
.hmb-filtres__puces { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }

.hmb-filtre {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 38px; padding: 6px 14px;
	border: 1.5px solid var(--hm-border-strong, rgba(63,47,37,0.18)); border-radius: 999px;
	background: var(--hm-surface, #fff); color: var(--hm-brown, #3f2f25);
	font-weight: 700; font-size: 0.86rem; line-height: 1.2; cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.hmb-filtre:hover { border-color: var(--hm-caramel, #c98a5b); transform: translateY(-1px); }
.hmb-filtre.is-on { background: var(--hm-brown, #3f2f25); color: #fff; border-color: var(--hm-brown, #3f2f25); }
/* Pastille de couleur : contour permanent, sinon le blanc et le crème disparaissent sur la carte. */
.hmb-filtre__pastille { width: 16px; height: 16px; border-radius: 50%; flex: none; background: var(--hmb-teinte, var(--hm-surface-2, #f6efe6)); box-shadow: inset 0 0 0 1px rgba(63,47,37,0.28); }
.hmb-filtre.is-on .hmb-filtre__pastille { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 0 0 2px rgba(255,255,255,0.35); }
.hmb-filtres__reset { border-style: dashed; font-weight: 600; color: var(--hm-muted, #76665a); }
.hmb-filtres__reset[hidden] { display: none; }
.hmb-filtres__etat { margin: 10px 0 0; font-size: 0.86rem; color: var(--hm-muted, #76665a); font-weight: 700; }
.hmb-filtres__etat:empty { margin: 0; }
.hmb-filtres__vide { margin: 32px 0; padding: 28px; text-align: center; border: 1px dashed var(--hm-border-strong, rgba(63,47,37,0.18)); border-radius: var(--hm-radius, 18px); color: var(--hm-muted, #76665a); font-weight: 700; }
.hmb-filtres__vide[hidden] { display: none; }

/* Sous 700 px, la rangée de couleurs défile à l'horizontale plutôt que d'empiler quatre lignes. */
@media (max-width: 699px) {
	.hmb-filtres__rang { flex-wrap: nowrap; }
	.hmb-filtres__puces { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
	.hmb-filtres__puces::-webkit-scrollbar { display: none; }
	.hmb-filtre { flex: 0 0 auto; min-height: 44px; }
}

/* ---------------------------------------------------------------
 * Menu de tri
 * ------------------------------------------------------------ */
.hmb-tri { position: relative; }
.hmb-tri__bouton {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 8px 40px 8px 16px;
	border: 1.5px solid var(--hm-border-strong, rgba(63,47,37,0.18)); border-radius: 999px;
	background: var(--hm-surface, #fff); color: var(--hm-brown, #3f2f25);
	font-size: 0.92rem; cursor: pointer; white-space: nowrap;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.hmb-tri__bouton::after {
	content: ""; position: absolute; right: 16px; top: 50%;
	width: 8px; height: 8px; margin-top: -6px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform 0.2s;
}
.hmb-tri.is-open .hmb-tri__bouton::after { transform: rotate(-135deg); margin-top: -2px; }
.hmb-tri__bouton:hover, .hmb-tri.is-open .hmb-tri__bouton { border-color: var(--hm-caramel, #c98a5b); }
.hmb-tri.is-open .hmb-tri__bouton { box-shadow: 0 0 0 3px rgba(201, 138, 91, 0.28); }
.hmb-tri__prefixe { color: var(--hm-muted, #76665a); }
.hmb-tri__bouton strong { font-weight: 700; }

.hmb-tri__liste {
	position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; min-width: 260px;
	list-style: none; margin: 0; padding: 6px;
	background: var(--hm-surface, #fff);
	border: 1px solid var(--hm-border, rgba(63,47,37,0.10)); border-radius: var(--hm-radius, 18px);
	box-shadow: var(--hm-shadow-3, 0 30px 80px -20px rgba(63,47,37,0.35));
	animation: hmb-tri-in 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes hmb-tri-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.hmb-tri__liste[hidden] { display: none; }
.hmb-tri__option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 0.92rem; }
.hmb-tri__option:hover, .hmb-tri__option:focus-visible { background: var(--hm-surface-2, #f6efe6); outline: none; }
.hmb-tri__option::before { content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px var(--hm-border-strong, rgba(63,47,37,0.18)); }
.hmb-tri__option[aria-selected="true"] { font-weight: 700; }
.hmb-tri__option[aria-selected="true"]::before { background: var(--hm-caramel-dark, #8b5a34); box-shadow: inset 0 0 0 3px var(--hm-surface, #fff), 0 0 0 1.5px var(--hm-caramel-dark, #8b5a34); }

/* Sur petit écran, la liste part du bord gauche du bouton et ne dépasse jamais l'écran. */
@media (max-width: 480px) {
	.hmb-tri__liste { right: auto; left: 0; min-width: min(300px, calc(100vw - 40px)); }
}

/* ---------------------------------------------------------------
 * Pastilles de couleur sur la carte produit
 * ------------------------------------------------------------ */
.hm-card__teintes { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.hm-card__teinte { width: 13px; height: 13px; border-radius: 50%; background: var(--hmb-teinte, var(--hm-surface-2, #f6efe6)); box-shadow: inset 0 0 0 1px rgba(63,47,37,0.25); }
.hm-card__teinte-plus { font-size: 0.7rem; font-weight: 700; color: var(--hm-muted, #76665a); }
@media (max-width: 359px) { .hm-card__teintes { display: none; } }

/* ---------------------------------------------------------------
 * Tuile éditoriale glissée dans la grille
 * ------------------------------------------------------------
 * Une grille de vingt-six cartes finit par se lire comme un catalogue, alors que la raison
 * d'être de la boutique est ailleurs. Une tuile, une seule, au milieu de la première partie
 * de la grille : elle occupe la place d'une carte et rappelle ce que l'achat finance.
 * ------------------------------------------------------------ */
.hm-card--edito {
	display: flex; flex-direction: column; justify-content: center; gap: 10px;
	padding: 24px 22px; min-width: 0;
	background: linear-gradient(150deg, var(--hm-peach, #fbe3d0), var(--hm-surface-2, #f6efe6));
	border: 1px solid var(--hm-border, rgba(63,47,37,0.10)); border-radius: var(--hm-radius, 18px);
	box-shadow: var(--hm-shadow-1, 0 1px 2px rgba(63,47,37,0.05));
}
.hm-card--edito .hm-card__edito-sur { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--hm-caramel-dark, #8b5a34); }
.hm-card--edito p { margin: 0; font-family: var(--hm-font-title, Georgia, serif); font-size: 1.2rem; line-height: 1.25; color: var(--hm-brown, #3f2f25); }
.hm-card--edito .hm-link { margin-top: auto; }
@media (max-width: 699px) { .hm-card--edito { padding: 18px 16px; } .hm-card--edito p { font-size: 1.02rem; } }