/*
 * Soda Palette Composer — Page boutique (shortcode [spc_boutique])
 * v1.0.0
 *
 * Contrairement à shop-1.0.25.css (qui stylait ul.products, toujours géré
 * par le thème), ce fichier ne définit QUE des classes à nous
 * (.spc-shop-page, .spc-shop-grid...) — aucune concurrence possible avec
 * une règle de thème, donc aucun besoin des renforts (!important en
 * cascade, débordement pleine largeur) qui étaient nécessaires côté
 * ul.products. Les styles de carte (.spc-shop-card__*) restent ceux de
 * shop-1.0.25.css, chargé en dépendance.
 */

.spc-shop-page {
  box-sizing: border-box;
  width: calc(100% - 32px);
  margin: 16px auto 48px;
  font-family: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Page de catégorie native uniquement (tax-product_cat, absente sur
   /boutique/) — hors du gabarit Elementor (voir
   SPC_Shop_Shortcode::render_category_archive()), le calc(% ) ci-dessus ne
   donne pas la même marge visuelle que sur /boutique/, où Elementor
   applique déjà sa propre contrainte de largeur autour du contenu. Padding
   fixe ici, indépendant du conteneur parent. */
.tax-product_cat .spc-shop-page {
  width: 100%;
  max-width: 1360px;
  padding: 0 16px;
}

.spc-shop-page * {
  box-sizing: border-box;
}

.spc-shop-page__header {
  margin: 0 0 12px;
}

.spc-shop-page__header h1 {
  margin: 0 0 4px;
  font-size: 32px !important;
  line-height: 1.15;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  color: #20242a;
}

.spc-shop-page__count {
  margin: 0 0 10px;
  color: #6c727a;
  font-size: 14px;
}

.spc-shop-page__empty {
  padding: 40px 0;
  color: #6c727a;
  text-align: center;
}

/* ---------------- Grille ---------------- */

.spc-shop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}

@media (max-width: 768px) {
  .spc-shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .spc-shop-card__image img {
    padding: 0;
  }

  .spc-shop-page__header h1 {
    font-size: 24px !important;
  }

  .spc-shop-card .spc-shop-card__title {
    font-size: 14px !important;
    font-weight: 400 !important;
  }

  .spc-shop-page {
    width: calc(100% - 10px);
  }
}

/* ---------------- Pagination ---------------- */

.spc-shop-page__pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px 0 0;
}

a.spc-shop-page__page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #e4e7eb;
  border-radius: 8px;
  color: #20242a !important;
  font-size: 14px;
  text-decoration: none;
}

a.spc-shop-page__page-link.spc-shop-page__page-link--current {
  border-color: #c8102e;
  background: #c8102e;
  color: #fff !important;
}

/* Filtrage/pagination en AJAX (shop-page-filter-1.0.4.js) : léger effet de
   chargement pendant la requête, sans faire disparaître le contenu actuel. */
.spc-shop-page__results[aria-busy="true"] {
  opacity: .5;
  pointer-events: none;
  transition: opacity .15s ease;
}

/* ---------------- Écran de chargement (squelette) ----------------
   Voir assets/page-loader-1.0.2.js : masque .spc-page-loader-content et
   affiche ce squelette animé tant que la page (images comprises) n'a pas
   fini de charger, puis bascule d'un coup — voir la classe .spc-page-loaded
   posée par ce script sur .spc-shop-page. */
.spc-shop-page {
  position: relative;
}

.spc-page-loader-content {
  opacity: 0;
  transition: opacity .25s ease;
}

.spc-shop-page.spc-page-loaded .spc-page-loader-content {
  opacity: 1 !important;
}

.spc-shop-page.spc-page-loaded .spc-page-loader {
  display: none;
}

.spc-page-loader {
  padding: 4px 0;
}

.spc-page-loader__line {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, #eef0f2 25%, #f7f8f9 37%, #eef0f2 63%);
  background-size: 400% 100%;
  animation: spc-page-loader-shimmer 1.4s ease infinite;
}

.spc-page-loader__line--title {
  width: 160px;
  height: 32px;
  margin-bottom: 20px;
}

.spc-page-loader__pills {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.spc-page-loader__pill {
  display: block;
  width: 96px;
  height: 38px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eef0f2 25%, #f7f8f9 37%, #eef0f2 63%);
  background-size: 400% 100%;
  animation: spc-page-loader-shimmer 1.4s ease infinite;
}

.spc-page-loader__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.spc-page-loader__card {
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  background: linear-gradient(90deg, #eef0f2 25%, #f7f8f9 37%, #eef0f2 63%);
  background-size: 400% 100%;
  animation: spc-page-loader-shimmer 1.4s ease infinite;
}

@media (min-width: 640px) {
  .spc-page-loader__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@keyframes spc-page-loader-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* Masque le titre natif WooCommerce ("Boutique", classes
   woocommerce-products-header__title / page-title) qui s'affiche
   automatiquement en haut de la page quand celle-ci est assignée comme
   « Page boutique » dans Réglages WooCommerce → Produits — avant même le
   contenu Elementor/notre shortcode [spc_boutique]. Le réglage Elementor
   « Masquer le titre » ne contrôle pas cet élément-là, généré directement
   par WooCommerce ; on le masque nous-mêmes pour ne garder que notre
   propre titre "Boutique" (voir .spc-shop-page__header plus haut). */
.woocommerce-products-header__title.page-title {
  display: none !important;
}

/* Masque le fil d'Ariane natif WooCommerce ("Accueil / Boutique",
   .woocommerce-breadcrumb), injecté automatiquement — même raison que
   .woocommerce-products-header__title plus haut : cette page est assignée
   comme « Page boutique » dans Réglages WooCommerce, en dehors de notre
   propre mise en page, ses marges ne correspondent pas au reste de la
   page. Remplacé par notre propre .spc-breadcrumb (voir boutique.php),
   même composant que sur la fiche produit / panier / composeur. */
.woocommerce-breadcrumb {
  display: none !important;
}

.spc-breadcrumb {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 400;
}

.spc-breadcrumb a {
  color: #6c727a;
  text-decoration: none;
}

.spc-breadcrumb a:hover {
  color: #c8102e;
}

.spc-breadcrumb__sep {
  margin: 0 6px;
  color: #c7ccd1;
}

.spc-breadcrumb__current {
  color: #20242a;
}

/* Filet de sécurité : si un résidu du catalogue natif WooCommerce
   s'affiche malgré tout sur cette page (voir SPC_Canonical_Redirects,
   qui vide déjà la requête et retire les hooks correspondants — ceci
   n'est qu'une seconde protection, pas la solution principale). */
.woocommerce-result-count,
.woocommerce-ordering,
nav.woocommerce-pagination,
ul.products,
.woocommerce-info {
  display: none !important;
}