/* ==========================================================================
   FlashFit — boutique et pages catégories
   (même feuille pour /src/boutique/ et /src/boutique/<categorie>/)
   La grille et les cartes produit viennent de commun.css (.ff-grid, .ff-pcard).
   ========================================================================== */

/* --- En-tête ------------------------------------------------------------- */
.shop__head { padding-block: clamp(28px, 3.5vw, 40px) 24px; }
.shop__head .ff-crumbs { margin-bottom: 14px; }
.shop__head .ff-lede { margin-top: 10px; }

/* --- Barre : catégories + tri --------------------------------------------- */
.shop__bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding-bottom: 22px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

/* Pastilles de catégorie : .ff-chip (commun.css) */
.shop__filters { display: flex; flex-wrap: wrap; gap: 8px; }

/* Compteur + tri */
.shop__tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.shop__count { font-size: 13px; color: var(--muted); }
.shop__sort  { width: 100%; padding-block: 9px; font-size: 13px; }

@media (min-width: 768px) {
  .shop__bar  { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .shop__sort { width: auto; min-width: 200px; }
}