/* ====================================================================
   FICHE PRODUIT — « STYLING CHOICE » A CHOIX MULTIPLES
   Meme structure de ligne que les autres rubriques (table.variations >
   th.label + td.value) : l'intitule herite donc des regles de lmc-tunnel.css.
   Les cases reprennent a l'identique l'aspect des pastilles de
   l'extension de pastilles (mesure sur la fiche produit) : fond blanc,
   filet gris, Georgia 12 px, coins 3 px, filet noir quand c'est choisi.

   Le theme applique a tous les <label> de ce formulaire un affichage en
   bloc, une marge a droite et des capitales a chaque mot : les regles
   ci-dessous sont donc precedees du selecteur complet de la table et
   marquees !important (meme methode que lmc-tunnel.css pour les intitules).
   ==================================================================== */

/* Le filet entre deux rubriques est la bordure basse de chaque ligne, sauf
   de la derniere de sa table. Le bloc etant dans une table a part, la
   rubrique precedente (Bonnet) n'en a plus : on le remet en haut du bloc. */
form.variations_form table.variations.lmc-styling {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

form.variations_form table.variations.lmc-styling .lmc-styling__rangee {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

form.variations_form table.variations.lmc-styling label.lmc-styling__option {
	position: relative !important;
	display: flex !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	cursor: pointer;
}

/* La vraie case est invisible mais reste accessible au clavier et au lecteur d'ecran. */
form.variations_form table.variations.lmc-styling .lmc-styling__option input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

form.variations_form table.variations.lmc-styling .lmc-styling__option span {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-width: 24px;
	min-height: 28px;
	margin: 0;
	padding: 5px 10px;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.125);
	border-radius: 3px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 400;
	line-height: 15.6px;
	letter-spacing: 0;
	text-transform: none !important;
	color: rgb(104, 104, 104);
	transition: 0.2s;
}

form.variations_form table.variations.lmc-styling .lmc-styling__option:hover span {
	border-color: rgba(0, 0, 0, 0.56);
}

form.variations_form table.variations.lmc-styling .lmc-styling__option input:checked + span {
	border-color: #000;
	color: #000;
}

form.variations_form table.variations.lmc-styling .lmc-styling__option input:focus-visible + span {
	outline: 2px solid #629ac7;
	outline-offset: 2px;
}

form.variations_form table.variations.lmc-styling .lmc-styling__aide {
	margin: 8px 0 0;
	font-size: 12px;
	font-style: italic;
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.5);
}