/*
 * Menu integration for the automatically injected “Solutions de paiement” link.
 * Goal: make the item look like a normal native menu item on any WordPress theme,
 * rather than a second CTA/button. JavaScript copies the typography/spacing/color
 * of a nearby regular menu item where a theme uses highly specific selectors.
 */

.plpps-auto-header-link,
.plpps-auto-footer-link {
  box-sizing: border-box;
}

.plpps-auto-header-link > a,
.plpps-auto-footer-link > a {
  box-sizing: border-box !important;
  position: relative !important;
  text-decoration: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* No yellow pill. A very small blue underline is the only PLP accent. */
.plpps-auto-header-link > a::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 2px;
  height: 2px;
  border-radius: 999px;
  background: #078fe9;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
  pointer-events: none;
}

.plpps-auto-header-link > a:hover::after,
.plpps-auto-header-link > a:focus-visible::after,
.plpps-auto-header-link.current-menu-item > a::after,
.plpps-auto-header-link.current_page_item > a::after {
  transform: scaleX(1);
}

/* Keep the footer link natural too; no badge/button styling. */
.plpps-auto-footer-link > a::after {
  content: none !important;
}

/* The theme remains responsible for desktop/mobile layout. */
@media (prefers-reduced-motion: reduce) {
  .plpps-auto-header-link > a::after { transition: none; }
}