.tpg-visually-hidden {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}

.tpg-variation-ui {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.35rem;
}

.tpg-variation-radios {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	border: 0;
	padding: 0;
	margin: 0;
}

.tpg-variation-option {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 999px;
	padding: 0.35rem 0.75rem;
	cursor: pointer;
	line-height: 1.1;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.tpg-variation-option.is-active {
	border-color: rgba(0, 0, 0, 0.7);
	background: rgba(0, 0, 0, 0.06);
}

.tpg-variation-option:hover {
	border-color: rgba(0, 0, 0, 0.5);
}

.tpg-variation-option input {
	margin: 0;
}

.tpg-variation-pill {
	border: 1px solid rgba(0, 0, 0, 0.25);
	background: transparent;
	border-radius: 999px;
	padding: 0.4rem 0.8rem;
	cursor: pointer;
	line-height: 1.1;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tpg-variation-pill.is-active {
	background: rgba(0, 0, 0, 0.12);
	border-color: rgba(0, 0, 0, 0.6);
}

.tpg-variation-pill:hover {
	border-color: rgba(0, 0, 0, 0.5);
}

.tpg-variation-pill:focus-visible,
.tpg-variation-option:focus-within {
	outline: 2px solid rgba(0, 0, 0, 0.5);
	outline-offset: 2px;
}

.tpg-variation-pill:disabled,
.tpg-variation-option input:disabled + span {
	opacity: 0.5;
	cursor: not-allowed;
}

.variations tr.tpg-variation-row th,
.variations tr.tpg-variation-row td {
	padding-bottom: 0.35rem;
}

.tpg-hide-reset .reset_variations {
	display: none !important;
}
/* --- Triptiq Variation UI: clean layout for pills --- */

/* 1) Supprimer totalement le reset "Effacer" (même si Woo le cache parfois en visibility:hidden) */
form.variations_form.tpg-hide-reset a.reset_variations{
  display: none !important;
}

/* 2) Faire disparaître le libellé "Format" (colonne gauche) */
form.variations_form .variations th.label,
form.variations_form .variations th.label label{
  display: none !important;
}

/* 3) Enlever les paddings/marges de la cellule de droite pour aligner à gauche */
form.variations_form .variations td.value{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 4) Neutraliser le <span> wrapper autour du select (souvent stylé par Divi/Woo)
      + éviter qu'il crée un "caret" / espace */
form.variations_form .variations td.value > span{
  display: none !important;
}

/* 5) Si Divi ajoute un caret via pseudo-éléments, on le neutralise */
form.variations_form .variations td.value::after,
form.variations_form .variations td.value > span::after,
form.variations_form .variations td.value .select::after{
  display: none !important;
  content: none !important;
}

/* 6) Pills bien alignées à gauche + spacing compact */
form.variations_form .tpg-variation-ui{
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: wrap;
}

/* 7) Row plus compacte */
form.variations_form .variations tr.tpg-variation-row td.value{
  vertical-align: middle !important;
}

/* 8) Optionnel: rendre les pills un peu plus "premium" et compactes */
form.variations_form .tpg-variation-pill{
  padding: 7px 14px !important;
  line-height: 1.1 !important;
}
/* --- Tighten vertical spacing around the pills row --- */

/* 1) Le tableau variations a souvent une marge/padding par défaut */
form.variations_form table.variations{
  margin: 0 0 8px 0 !important;   /* réduis l'espace sous les pills */
}

/* 2) La ligne (tr) peut avoir un padding vertical via th/td */
form.variations_form .variations tr.tpg-variation-row th,
form.variations_form .variations tr.tpg-variation-row td{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 3) Resserre la cellule de droite (là où sont les pills) */
form.variations_form .variations tr.tpg-variation-row td.value{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 4) Resserre l’UI elle-même */
form.variations_form .tpg-variation-ui{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 5) Optionnel: si tu veux vraiment “coller” les pills au contenu au-dessus */
form.variations_form .variations tr.tpg-variation-row{
  height: auto !important;
}

/* 6) Réduire l’espace AVANT le prix / bloc variation (souvent très généreux) */
form.variations_form .single_variation_wrap{
  margin-top: 6px !important;   /* ajuste: 0 à 10px selon ton goût */
  padding-top: 0 !important;
}
/* --- Tighten vertical spacing around the pills row --- */

/* 1) Le tableau variations a souvent une marge/padding par défaut */
form.variations_form table.variations{
  margin: 0 0 8px 0 !important;   /* réduis l'espace sous les pills */
}

/* 2) La ligne (tr) peut avoir un padding vertical via th/td */
form.variations_form .variations tr.tpg-variation-row th,
form.variations_form .variations tr.tpg-variation-row td{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 3) Resserre la cellule de droite (là où sont les pills) */
form.variations_form .variations tr.tpg-variation-row td.value{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 4) Resserre l’UI elle-même */
form.variations_form .tpg-variation-ui{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 5) Optionnel: si tu veux vraiment “coller” les pills au contenu au-dessus */
form.variations_form .variations tr.tpg-variation-row{
  height: auto !important;
}

/* 6) Réduire l’espace AVANT le prix / bloc variation (souvent très généreux) */
form.variations_form .single_variation_wrap{
  margin-top: 6px !important;   /* ajuste: 0 à 10px selon ton goût */
  padding-top: 0 !important;
}
form.variations_form a.reset_variations{
  display: none !important;
  visibility: hidden !important;
}