/*
 * Soda Palette Composer — Boutique (catalogue)
 * v1.0.0
 *
 * Mêmes jetons de design que le panier / la page devis / le checkout :
 * rouge #C8102E, cartes blanches à coins arrondis, police Archivo.
 */

.woocommerce ul.products,
.woocommerce ul.products *,
.woocommerce-page ul.products,
.woocommerce-page ul.products * {
  box-sizing: border-box;
}

.woocommerce ul.products,
.woocommerce-page ul.products {
  width: calc(100% - 32px);
  max-width: 100%;
  overflow-x: hidden;
  margin: 0 auto 48px;
  font-family: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px;
  list-style: none;
}

.woocommerce ul.products img,
.woocommerce-page ul.products img {
  max-width: 100%;
  height: auto;
}

/* Ordinateur ET tablette : 4 colonnes. Seul le mobile passe à 2 — jamais 1.
   Point de rupture volontairement large (768px, comme le panier à 900px) :
   sur un vrai téléphone (contrairement à l'émulation DevTools), une règle
   du thème ciblant spécifiquement ul.products.columns-4 peut entrer en
   concurrence avec la nôtre à une largeur donnée — d'où aussi le sélecteur
   renforcé ci-dessous (classes body + ul combinées) pour être sûr de
   l'emporter quelle que soit cette règle concurrente. */
@media (max-width: 768px) {
  /* "calc(100% - Xpx)" reste relatif au conteneur parent du thème (qui a
     son propre padding) — le résultat s'additionne à ce padding au lieu de
     le remplacer. On force ici un vrai débordement pleine largeur d'écran
     (indépendant du parent), puis un padding de 8px pour mesurer la marge
     depuis le bord réel de l'écran, pas depuis le bord du conteneur thème. */
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  body.woocommerce-shop ul.products.columns-4,
  body.archive ul.products.columns-4 {
    width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%);
    padding: 0 8px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
  }

  .woocommerce-products-header__title.page-title {
    font-size: 26px;
  }

  /* Fil d'Ariane, titre et compteur de résultats : aucun champ natif dedans,
     donc même débordement pleine largeur que la grille produits — marge de
     8px mesurée depuis le vrai bord de l'écran. */
  .woocommerce-breadcrumb,
  .woocommerce-products-header__title.page-title,
  .woocommerce-result-count {
    width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%);
    padding: 0 8px !important;
    box-sizing: border-box;
  }

  /* "Tri par défaut" contient un <select> natif : contrairement à la grille
     produits, un transform sur cet élément perturbe son rendu (son texte
     disparaissait) — on se contente ici d'un padding latéral léger, sans
     débordement pleine largeur. */
  .woocommerce-ordering,
  .woocommerce-pagination {
    padding: 0 8px;
    box-sizing: border-box;
  }
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* Cause exacte identifiée : le thème (Hello Elementor) injecte un contenu
   via ul.products.columns-4::before, pensé pour son système de grille en
   flexbox/clearfix — pas pour une grille CSS. Depuis qu'on force display:grid
   sur ce <ul>, ce pseudo-élément est traité comme une vraie case de grille
   et décale tous les produits d'un cran. On le neutralise directement. */
.woocommerce ul.products.columns-4::before,
.woocommerce ul.products.columns-4::after,
.woocommerce-page ul.products.columns-4::before,
.woocommerce-page ul.products.columns-4::after {
  content: none !important;
  display: none !important;
}

/* Un <li> vide (sans contenu) avant le premier produit décale toute la
   grille d'une case — peu importe d'où il vient exactement, on le retire
   purement visuellement de la grille, et on épingle le premier vrai
   produit en case 1 pour forcer le bon alignement dans tous les cas. */
.woocommerce ul.products > li:empty,
.woocommerce-page ul.products > li:empty {
  display: none !important;
}

.woocommerce ul.products li.product:first-child,
.woocommerce-page ul.products li.product:first-child {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

/* ---------------- Carte ---------------- */

.spc-shop-card__inner {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  border: 1px solid #eef0f2;
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.spc-shop-card__inner:hover {
  border-color: #dce5ef;
  box-shadow: 0 4px 14px rgba(32, 36, 42, .08);
}

.spc-shop-card__image {
  display: block;
  margin: 0 0 8px;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.spc-shop-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
}

.spc-shop-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 4px;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.35;
  color: #20242a;
}

.spc-shop-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
}

.spc-shop-card__rating-count {
  font-size: 12px;
  color: #6c727a;
}

.spc-shop-card__price {
  margin-top: auto;
  font-size: 13px;
  font-weight: 700;
  color: #c8102e;
}

.spc-shop-card__price-from {
  color: #20242a;
}

/* Toujours utilisé ailleurs même si retiré de la carte boutique elle-même :
   bouton "Ajouter au panier" de la fiche produit individuelle
   (templates/single-product/info.php) et bouton d'envoi du formulaire
   d'avis (templates/product/reviews.php) — voir aussi
   assets/shop-add-to-cart-1.0.4.js, qui cible ce sélecteur directement. */
.spc-shop-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: auto;
  min-height: 44px;
  padding: 10px 16px;
  border: none;
  border-radius: 9px;
  background: #c8102e;
  color: #fff !important;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  transition: background .15s ease;
}

.spc-shop-card__cta-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.spc-shop-card__cta:hover {
  background: #a90c25;
}

.spc-shop-card__cta:focus {
  outline: none;
}

.spc-shop-card__cta:disabled {
  cursor: default;
  opacity: .85;
}

/* ---------------- Furniture de l'archive (titre, tri, pagination) ---------------- */

/* Mêmes caractéristiques que "Votre panier" (.spc-cart__header h1). */
.woocommerce-products-header__title.page-title {
  width: calc(100% - 32px);
  margin: 0 auto 6px;
  font-family: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 32px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #20242a;
}

.woocommerce-result-count,
.woocommerce-ordering {
  width: calc(100% - 32px);
  margin: 0 auto 16px;
  font-family: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #6c727a;
  font-size: 14px;
}

.woocommerce-ordering select {
  border: 1px solid #dce5ef;
  border-radius: 8px;
  padding: 8px 12px;
}

.woocommerce-pagination {
  width: calc(100% - 32px);
  margin: 24px auto 48px;
}

.woocommerce-pagination ul.page-numbers {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
}

.woocommerce-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #e4e7eb;
  border-radius: 8px;
  color: #20242a;
  text-decoration: none;
  font-size: 14px;
}

.woocommerce-pagination .page-numbers.current {
  border-color: #c8102e;
  background: #c8102e;
  color: #fff;
}