/* =========================================================
   GOTIQUE — recently-viewed.css
   Chargé sur : fiche produit uniquement.
   Contenu : bloc « Récemment consultés » — bandeau titre +
   flèches, piste défilante en scroll-snap, garde-fous sur les
   composants Shop Kit inertes hors archive.
   ========================================================= */


/* =========================================================
   CONTENEUR
   ========================================================= */

/* Le conteneur est imprimé vide et SANS attribut hidden.
   Un élément en display:none n'a pas de boîte : l'observateur
   d'intersection qui déclenche l'hydratation ne se serait
   jamais déclenché. Vide, il occupe 0 px de haut, et :empty
   neutralise sa marge pour qu'il reste totalement invisible.

   clear + position reprennent .wrps_related_products_area,
   le bloc voisin « Autres Pièces à Ne Pas Manquer ». */
.gtq-rv {
  position: relative;
  clear: both;

  margin: 40px 0 0;
}

.gtq-rv:empty {
  margin: 0;
}


/* =========================================================
   BANDEAU — TITRE + FLÈCHES
   ========================================================= */

/* Les 15 px / 4 px reprennent exactement
   .wrps_related_products_area_title, pour que les deux titres
   s'alignent au pixel près.

   Le h2 lui-même n'est volontairement pas restylé : il hérite
   de la typographie Kadence, donc il suivra automatiquement le
   titre voisin si celle-ci change. */
.gtq-rv__header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  margin: 0 0 15px 4px;
}

.gtq-rv__title {
  margin: 0;
}

.gtq-rv__nav {
  display: flex;
  flex-shrink: 0;

  gap: 8px;
}


/* Sélecteur doublé (.gtq-rv .gtq-rv__arrow) pour passer devant
   les styles de <button> du thème sans recourir à !important. */
.gtq-rv .gtq-rv__arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  padding: 0;

  border: 1px solid #561A50;
  border-radius: 50%;

  background: none;
  color: #561A50;

  font-size: 20px;
  line-height: 1;

  cursor: pointer;

  /* transition explicite (jamais `all`) */
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}

.gtq-rv .gtq-rv__arrow:hover:not(:disabled) {
  background-color: #561A50;
  color: #fff;
}

.gtq-rv .gtq-rv__arrow:focus-visible {
  outline: 2px solid #8a2be2;
  outline-offset: 2px;
}

.gtq-rv .gtq-rv__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}


/* =========================================================
   PISTE DÉFILANTE
   ========================================================= */

/* Le <ul> reste celui de woocommerce_product_loop_start() :
   ses classes Kadence portent le style des cartes. On ne
   remplace donc que la grille.

   grid-template-columns:none est indispensable — .grid-cols de
   Kadence pose une grille en colonnes fixes qui prendrait
   sinon le pas sur grid-auto-flow:column.

   Défilement natif : grid + scroll-snap + overflow-x suffisent
   à obtenir un slider tactile, sans une ligne de JS. */
.gtq-rv ul.products.gtq-rv__track {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc(25% - 12px);

  gap: 16px;

  margin: 0;
  padding: 0;

  list-style: none;

  overflow-x: auto;
  overscroll-behavior-x: contain;

  scroll-snap-type: x mandatory;

  /* Barre de défilement masquée : la navigation se fait aux
     flèches ou au doigt. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gtq-rv ul.products.gtq-rv__track::-webkit-scrollbar {
  display: none;
}

.gtq-rv ul.products.gtq-rv__track > li.product {
  width: auto;

  margin: 0;
  padding: 0;

  scroll-snap-align: start;
}


/* Tablette : 3 colonnes. */
@media (max-width: 1024px) {

  .gtq-rv ul.products.gtq-rv__track {
    grid-auto-columns: calc(33.333% - 11px);
  }
}


/* Mobile : 2 colonnes. */
@media (max-width: 640px) {

  .gtq-rv ul.products.gtq-rv__track {
    grid-auto-columns: calc(50% - 8px);
  }
}


/* Le JS choisit déjà `behavior:auto` dans ce cas ; la règle
   couvre le défilement déclenché par le focus clavier, qui ne
   passe pas par lui. */
@media (prefers-reduced-motion: reduce) {

  .gtq-rv ul.products.gtq-rv__track {
    scroll-behavior: auto;
  }

  .gtq-rv .gtq-rv__arrow {
    transition: none;
  }
}


/* =========================================================
   GARDE-FOUS — COMPOSANTS SHOP KIT INERTES ICI
   ========================================================= */

/* Ces deux composants sont pilotés par des scripts que Shop Kit
   n'enqueue pas sur la fiche produit — et qu'un rendu REST ne
   pourrait de toute façon pas enqueuer, faute de wp_footer.
   Affichés ici, ils seraient morts au clic.

   Les swatches sont déjà retirés du rendu côté PHP
   (suppress_catalog_swatches). Cette règle est le filet si une
   mise à jour de Shop Kit renommait le callback. */
.gtq-rv .kadence-sk-variation-wrap,
.gtq-rv .kt-woo-quickview-button {
  display: none;
}