/**
 * Cotedco Collections pages — design parity with the theme (terracotta #9c6b4b).
 */
.collections-page__meta {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin: -0.5rem 0 1.75rem;
}

.collections-page__back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.95rem;
  color: #9c6b4b;
  text-decoration: none;
}

.collections-page__back:hover {
  text-decoration: underline;
  color: #85573d;
}

.collections-page__count {
  color: #6c6c6c;
  font-size: 0.95rem;
}

.brand__collections {
  margin: 0.6rem 0 0;
}

.brand__collections-link {
  display: inline-block;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #9c6b4b;
  border: 1px solid #9c6b4b;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.brand__collections-link:hover {
  background: #9c6b4b;
  color: #fff;
}

.brand__image a {
  display: block;
  border-radius: inherit;
}

/* --- Collection page: banner + header --- */
.collection-banner {
  margin: 0 0 1.75rem;
  border-radius: 6px;
  overflow: hidden;
}

.collection-banner__img {
  display: block;
  width: 100%;
  height: auto;
}

.collection-page__meta {
  color: #6c6c6c;
  margin-bottom: 0.5rem;
}

.collection-page__count {
  font-size: 0.95rem;
}

.collection-page__description {
  margin-bottom: 1.5rem;
}

/* --- Category pages: collections strip --- */
.category-collections {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.75rem;
  margin: -0.5rem 0 1.5rem;
}

.category-collections__label {
  font-weight: 600;
  color: #9c6b4b;
  font-size: 0.95rem;
}

.category-collections__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-collections__list--more {
  margin-top: 0.5rem;
  flex-basis: 100%;
}

.category-collections__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #9c6b4b;
  border: 1px solid #d8c7b8;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.category-collections__chip:hover {
  background: #9c6b4b;
  border-color: #9c6b4b;
  color: #fff;
}

.category-collections__count {
  font-size: 0.75rem;
  opacity: 0.75;
}

.category-collections__item.is-active .category-collections__chip {
  background: #9c6b4b;
  border-color: #9c6b4b;
  color: #fff;
}

.category-collections__more {
  flex-basis: 100%;
}

.category-collections__more-toggle {
  cursor: pointer;
  font-size: 0.85rem;
  color: #9c6b4b;
  list-style: none;
}

.category-collections__more-toggle:hover {
  text-decoration: underline;
}

/**
 * Vignettes de collection : meme largeur que les vignettes produit des listes.
 * Mesure de reference : image produit 304 px dans une carte de 306 px.
 * Ici la carte fait deja 312 px, seule l'image etait limitee a 98 px.
 */
.collections__list .brand__image {
  width: 100%;
  max-width: none;
}

.collections__list .brand__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
.collections__list .brand,
.collections__list .brand__image {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/**
 * Telephones : deux colonnes, comme la liste de produits.
 * Mesure de reference sur ecran de 412 px : produit 180 px dans une carte de 182.
 * Sans cette regle, la page collections restait sur une seule colonne et les
 * vignettes prenaient toute la largeur de l ecran.
 */
@media (max-width: 767.98px) {
  .collections__list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
  }

  .collections__list .brand {
    width: auto;
    max-width: none;
    margin: 0;
  }
}