/*
 * ZalfWeb — étiquette « Vente flash » / « Vente flash à venir » sur les cartes produits (chargée sur toutes les pages : les cartes sont
 * partout). Le thème écrit le type du drapeau dans l'attribut class (« product-flag on-sale zwb-flag zwb-flag-running ») : ces règles
 * remplacent sa mise en forme de « Promo ! » (souvent un simple texte coloré, en capitales, parfois dans une pastille ronde de 40 px)
 * par une vraie étiquette : fond de la couleur du bandeau (variable --zwb-flash écrite dans <head> par le module, rouge de l'application
 * à défaut), texte blanc — ou noir quand la couleur choisie est claire (syntaxe de couleur relative ; un navigateur qui ne la connaît
 * pas garde le blanc).
 * On ne voit pas le thème : tout ce qui touche à l'apparence est en !important, et chaque sélecteur porte trois « :not(#…) » (chacun vaut
 * un identifiant, aucun de ces identifiants n'existe) pour l'emporter sur les règles du thème même quand elles sont longues ou écrites
 * avec des identifiants (« #js-product-list .product-flags li.on-sale »). L'emplacement de l'étiquette (position, haut, droite…) reste
 * celui du thème : elle se place comme ses autres étiquettes.
 */
.zwb-flag:not(#zwb-x):not(#zwb-y):not(#zwb-z) {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  padding: 4px 8px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: var(--zwb-flash, #D32F1E) !important;
  color: #fff !important;
  color: oklch(from var(--zwb-flash, #D32F1E) clamp(0, (0.66 - l) * 100000, 1) 0 0) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-indent: 0 !important;
  text-shadow: none !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: normal !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3) !important;
}
/* Décorations que le thème ajoute à ses étiquettes (rubans, étoiles) : aucune sur la nôtre (sans contenu, un élément n'est pas créé). */
.zwb-flag:not(#zwb-x):not(#zwb-y):not(#zwb-z)::after,
.zwb-flag.zwb-flag-running:not(#zwb-x):not(#zwb-y):not(#zwb-z)::before {
  content: none !important;
}
/*
 * « À venir » : même étiquette, avec une petite horloge devant le texte (le prix n'a pas encore baissé). L'horloge prend la couleur du
 * texte de l'étiquette. « all: initial » efface d'abord tout ce que le thème a pu écrire sur ce ::before (position, bordure, rotation,
 * transparence, flottement…) : seules les propriétés ci-dessous comptent.
 */
.zwb-flag.zwb-flag-upcoming:not(#zwb-x):not(#zwb-y):not(#zwb-z)::before {
  all: initial !important;
  content: '' !important;
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 5px -1px 0 !important;
  color: inherit !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm.5-13H11v6l5.2 3.1.8-1.3-4.5-2.7z'/%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm.5-13H11v6l5.2 3.1.8-1.3-4.5-2.7z'/%3E%3C/svg%3E") no-repeat center / contain !important;
}
@media (max-width: 480px) {
  .zwb-flag:not(#zwb-x):not(#zwb-y):not(#zwb-z) { font-size: 11px !important; padding: 3px 6px !important; }
}