/* ─── Vignettes des pages de catégorie ──────────────────────────────────────
   Les archives étaient laissées au style de Kadence, à l'exception du badge de
   nouveauté (inc/loop-badges.php). Cette feuille leur donne la même mise en scène
   qu'aux vignettes du carrousel : le bouton d'ajout apparaît au survol, posé au
   bas du visuel, encadré (demande client du 2026-08-06).

   Le bouton n'est pas ajouté : WooCommerce le rend déjà dans chaque carte, et
   pour un produit à déclinaisons il porte le libellé « Choix des options ». Le
   déplacer vaut mieux que le dupliquer — un second bouton sortirait du parcours
   au clavier de WooCommerce et de ses scripts d'ajout au panier.

   Kadence apporte déjà une partie du travail : sa classe
   `woo-archive-action-on-hover`, active sur ce site, révèle le bouton au survol en
   animant `bottom`. Deux choses lui manquent, et ce sont elles qu'on reprend : le
   bouton est en style « texte » (`woo-archive-btn-text`), donc sans cadre et en
   gris-bleu de sa palette, et il se pose SOUS la carte au lieu de reposer sur le
   visuel comme dans le carrousel.

   ─── Sur la longueur des sélecteurs ───
   Le préfixe `body.wp-child-theme-ubayd-clothing` n'est pas décoratif. La feuille
   de Kadence est enfilée APRÈS celles du thème enfant : à spécificité égale, elle
   l'emporte. Ses règles pèsent quatre classes et deux éléments
   (`.woocommerce ul.products.woo-archive-btn-text li.product .button`), soit
   exactement le poids d'un sélecteur enfant qui paraîtrait pourtant plus précis —
   vérifié en mesurant : la même déclaration ignorée depuis cette feuille
   s'appliquait dès qu'on l'injectait en fin de page. Le préfixe ajoute les deux
   classes qui tranchent, sans recourir à `!important` qu'un ajustement ultérieur
   ne pourrait plus surcharger. C'est le motif déjà retenu pour le bouton d'ajout
   au panier de la fiche (assets/css/product.css). */

body.wp-child-theme-ubayd-clothing .woocommerce ul.products li.product,
body.wp-child-theme-ubayd-clothing.woocommerce ul.products li.product {
  position: relative;
}

/* Le conteneur de Kadence est déplacé, pas le bouton : lui seul est en absolu, et
   le bouton reste en flux à l'intérieur, où son dimensionnement est trivial.

   L'ancrage se fait sur `.product-details`, qui est le référentiel réel — il porte
   `position: relative` et démarre PILE au bas du visuel. Un décalage négatif de la
   hauteur du bouton plus son intervalle le fait donc remonter à l'intérieur du
   visuel, sans dépendre ni de la largeur de la carte ni de la forme du visuel.
   Une première version calculait ce point avec `100cqw * ratio` : juste sur un
   visuel carré, faux dès qu'il changerait de rapport.

   `bottom: auto` annule le `bottom: -2rem` de Kadence, qui sinon continuerait de
   tirer le conteneur vers le bas de la carte. */
body.wp-child-theme-ubayd-clothing .woocommerce ul.products li.product .product-action-wrap,
body.wp-child-theme-ubayd-clothing.woocommerce ul.products li.product .product-action-wrap {
  --ub-loop-bouton-hauteur: 2.1rem;

  block-size: var(--ub-loop-bouton-hauteur);
  inset-block-end: auto;
  inset-block-start: calc(-0.8rem - var(--ub-loop-bouton-hauteur));
  inset-inline: 0.8rem;
  margin: 0;
  padding: 0;
  z-index: 1;
}

body.wp-child-theme-ubayd-clothing .woocommerce ul.products li.product .product-action-wrap .button,
body.wp-child-theme-ubayd-clothing.woocommerce ul.products li.product .product-action-wrap .button {
  align-items: center;
  background: var(--ub-panneau-fond);
  block-size: 100%;
  border: 1px solid var(--ub-encre);
  border-radius: 0;
  box-shadow: none;
  color: var(--ub-encre);
  display: flex;
  font-size: 0.6rem;
  inline-size: 100%;
  justify-content: center;
  letter-spacing: 0.14em;
  margin: 0;
  padding: 0;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

/* Kadence habille tous les `button:hover` d'un fond bleu et d'une ombre portée
   (voir assets/css/kadence-integration.css) : celui-ci est un `<a class="button">`,
   que la neutralisation générique — bornée aux `button[class*='ub-']` — n'atteint
   pas. Les trois états sont visés parce que Kadence les vise. */
body.wp-child-theme-ubayd-clothing .woocommerce ul.products li.product .product-action-wrap .button:hover,
body.wp-child-theme-ubayd-clothing .woocommerce ul.products li.product .product-action-wrap .button:focus,
body.wp-child-theme-ubayd-clothing .woocommerce ul.products li.product .product-action-wrap .button:active,
body.wp-child-theme-ubayd-clothing.woocommerce ul.products li.product .product-action-wrap .button:hover,
body.wp-child-theme-ubayd-clothing.woocommerce ul.products li.product .product-action-wrap .button:focus,
body.wp-child-theme-ubayd-clothing.woocommerce ul.products li.product .product-action-wrap .button:active {
  background: var(--ub-encre);
  box-shadow: none;
  color: var(--ub-creme);
}

/* Kadence glisse dans ce bouton les libellés des états de l'ajout AJAX
   (« Continuer », « Chargement », « Terminé ») en éléments propres. Sans cette
   règle ils s'empilent dans une boîte haute de 2,1 rem et le libellé visible
   devient illisible. */
body.wp-child-theme-ubayd-clothing .woocommerce ul.products li.product .product-action-wrap .button > *,
body.wp-child-theme-ubayd-clothing.woocommerce ul.products li.product .product-action-wrap .button > * {
  display: none;
}

@media (hover: hover) {
  /* Le fondu et la courte montée du carrousel, en remplacement de l'animation de
     `bottom` de Kadence : `transform` et `opacity` sont les deux seules propriétés
     que le navigateur anime sans recalculer la mise en page. Sur un écran tactile
     le bouton reste affiché — masqué, il serait inatteignable au doigt. */
  body.wp-child-theme-ubayd-clothing .woocommerce ul.products li.product .product-action-wrap,
  body.wp-child-theme-ubayd-clothing.woocommerce ul.products li.product .product-action-wrap {
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  body.wp-child-theme-ubayd-clothing .woocommerce ul.products li.product:hover .product-action-wrap,
  body.wp-child-theme-ubayd-clothing .woocommerce ul.products li.product:focus-within .product-action-wrap,
  body.wp-child-theme-ubayd-clothing.woocommerce ul.products li.product:hover .product-action-wrap,
  body.wp-child-theme-ubayd-clothing.woocommerce ul.products li.product:focus-within .product-action-wrap {
    opacity: 1;
    transform: translateY(0);
  }

  /* Un visiteur qui a demandé moins d'animation garde l'apparition, sans le
     déplacement : c'est le mouvement qui gêne, pas le changement d'état. */
  @media (prefers-reduced-motion: reduce) {
    body.wp-child-theme-ubayd-clothing .woocommerce ul.products li.product .product-action-wrap,
    body.wp-child-theme-ubayd-clothing.woocommerce ul.products li.product .product-action-wrap {
      transform: none;
      transition: opacity 180ms ease;
    }
  }
}