/**
 * Ticket 6.2.2-D-4 — Lisibilité des états actifs / inactifs (fiche produit)
 * Scope strict : #product uniquement.
 * Objectif CRO : feedback clair et rapide (sans surcharge) pour renforcer la
 * confiance d'interaction et réduire les hésitations / double-clics.
 * Approche A du plan : retours subtils, focus clavier accessible.
 *
 * Note : aucun transform appliqué aux <li> des pastilles pour ne pas décaler
 * le tooltip d'indisponibilité (positionné en absolute via li.disabled::after).
 */

/* Pastilles variantes : feedback hover desktop (le tactile ignore :hover) */
@media (min-width: 1000px) {
  #product .attribute_list li:not(.disabled):hover label {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  }
}

/* Pastille sélectionnée : renfort discret de l'état actif (lift jaune) */
#product .attribute_list li.checked:not(.disabled) label {
  box-shadow: 0 2px 6px rgba(247, 181, 0, 0.45);
}

/* Accessibilité clavier : ring de focus visible (input radio masqué) */
#product .attribute_list input[type="radio"]:focus-visible + label,
#product .attribute_list .attribute_select:focus-visible {
  outline: 2px solid var(--prozon-black-color);
  outline-offset: 2px;
}

/* CTA principal : feedback hover + focus clavier */
#product #add_to_cart button:hover {
  filter: brightness(0.92);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
}

#product #add_to_cart button:focus-visible {
  outline: 3px solid var(--prozon-black-color);
  outline-offset: 2px;
}

/*
 * Pas de style :disabled sur le CTA : l'état "réellement indisponible" est géré
 * par .oos-display (#add_to_cart masqué + bloc "Être alerté"). L'attribut disabled
 * n'est posé que transitoirement pendant le refresh combinaison (product.js),
 * donc opacifier :disabled ne faisait que clignoter le CTA au tap d'une pastille.
 */

/* Actions secondaires / tertiaires : focus clavier accessible */
#product #product-quotation-button:focus-visible,
#product #product-quotation-button-mobile:focus-visible,
#product .product-links .btn:focus-visible {
  outline: 2px solid var(--prozon-black-color);
  outline-offset: 2px;
}