/*
 * Boutons de variations de la fiche produit (inc/variations.php).
 * Rendu repris des réglages de l'ancienne extension : carrés 35 x 35,
 * bordure 1 px #a8a8a8, survol 3 px noir, choisi 2 px noir, info-bulle #333.
 */

/*
 * L'extension enveloppait le contenu du formulaire dans un bloc pleine largeur :
 * choix des variations, puis prix et bouton « Ajouter au panier » en dessous.
 */
form.variations_form.cart {
	flex-direction: column;
}

/* Nom de l'attribut au-dessus des boutons, suivi de la valeur choisie en gras. */
form.variations_form table.variations th,
form.variations_form table.variations td {
	display: block;
	text-align: start;
	width: auto !important;
}

form.variations_form table.variations th label,
form.variations_form table.variations th .anaaz-var__choix {
	display: inline-block;
	margin: 0 2px;
}

form.variations_form table.variations th .anaaz-var__choix {
	font-weight: 600;
}

.anaaz-var__liste {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	list-style: none;
	margin: 0;
	padding: 0;
}

.anaaz-var__liste .anaaz-var__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 35px;
	height: 35px;
	margin: 4px;
	padding: 2px;
	list-style: none;
	border-radius: 2px;
	background-color: #fff;
	color: #000;
	font-size: 16px;
	cursor: pointer;
	outline: none;
	box-shadow: 0 0 0 1px #a8a8a8;
	transition: box-shadow .2s ease, opacity .2s ease;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.anaaz-var__liste .anaaz-var__item:hover,
.anaaz-var__liste .anaaz-var__item:focus-visible {
	box-shadow: 0 0 0 3px #000;
}

.anaaz-var__liste .anaaz-var__item--choisi,
.anaaz-var__liste .anaaz-var__item--choisi:hover {
	box-shadow: 0 0 0 2px #000;
}

.anaaz-var__liste .anaaz-var__contenu {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.anaaz-var__liste .anaaz-var__texte {
	padding: 0 5px;
	white-space: nowrap;
}

/* Pastilles et photos : carré plein, nom gardé pour les lecteurs d'écran
 * et l'info-bulle. Dans une liste à photos, une valeur sans photo reste un
 * bouton texte. */
.anaaz-var__liste--pastilles .anaaz-var__item,
.anaaz-var__liste .anaaz-var__item--photo {
	width: 35px;
	background-color: transparent;
}

.anaaz-var__liste .anaaz-var__pastille,
.anaaz-var__liste .anaaz-var__photo {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.anaaz-var__liste--pastilles .anaaz-var__texte,
.anaaz-var__liste .anaaz-var__item--photo .anaaz-var__texte {
	position: absolute;
	/* « !important » : style.css met « width:auto !important » sur ce texte. */
	width: 1px !important;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* Coche blanche sur la pastille ou la photo choisie. */
.anaaz-var__liste--pastilles .anaaz-var__item--choisi .anaaz-var__contenu::before,
.anaaz-var__liste .anaaz-var__item--photo.anaaz-var__item--choisi .anaaz-var__contenu::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml;utf8,%3Csvg filter='drop-shadow(0px 0px 2px rgb(0 0 0 / .8))' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='M4 16L11 23 27 7'/%3E%3C/svg%3E") center / 60% no-repeat;
}

/* Combinaison qui n'existe pas : floutée et barrée, non cliquable. */
.anaaz-var__liste .anaaz-var__item--indispo {
	opacity: .4;
	cursor: not-allowed;
	box-shadow: 0 0 0 1px #a8a8a8;
}

.anaaz-var__liste .anaaz-var__item--indispo .anaaz-var__contenu::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%230c0000' stroke-linecap='round' stroke-width='0.6' d='M0 0L24 24M24 0L0 24'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Info-bulle au survol (pas sur les écrans tactiles). */
@media (hover: hover) {
	.anaaz-var__liste [data-anaaz-bulle]::before,
	.anaaz-var__liste [data-anaaz-bulle]::after {
		position: absolute;
		left: 50%;
		z-index: 999;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateX(-50%);
		transition: opacity .5s ease-in-out;
	}

	.anaaz-var__liste [data-anaaz-bulle]::before {
		content: attr(data-anaaz-bulle);
		bottom: calc(100% + 10px);
		height: 30px;
		padding: 0 10px;
		border-radius: 3px;
		background-color: #333;
		box-shadow: 0 0 5px 1px rgba(0, 0, 0, .3);
		color: #fff;
		font-size: 14px;
		line-height: 30px;
		white-space: nowrap;
	}

	.anaaz-var__liste [data-anaaz-bulle]::after {
		content: "";
		bottom: 100%;
		border: 5px solid transparent;
		border-top-color: #333;
	}

	.anaaz-var__liste [data-anaaz-bulle]:hover::before,
	.anaaz-var__liste [data-anaaz-bulle]:hover::after {
		opacity: 1;
		visibility: visible;
	}
}

/*
 * Bouton « M'avertir en premier » de Back in Stock Notifier : texte blanc
 * (noir sur fond foncé avant, illisible). Le « !important » est nécessaire :
 * style.css (l. 3404, « Forcer le texte en noir ») met en noir tout le
 * contenu du panneau avec « !important » ; la spécificité plus forte de ce
 * sélecteur le fait passer devant.
 */
body.single-product .cwginstock-subscribe-form .cwginstock-subscribe-form__form button.cwgstock_button,
body.single-product .cwginstock-subscribe-form .cwginstock-subscribe-form__form button.cwgstock_button:hover,
body.single-product .cwginstock-subscribe-form .cwginstock-subscribe-form__form button.cwgstock_button:focus {
	color: #fff !important;
}