/**
 * Merydar — Boutique
 *
 * Deux choses seulement : les étiquettes posées sur les visuels, et les
 * formes de découpe qu'on applique à une image en lui donnant une classe.
 */

/* ---------------------------------------------------------------------
 * Étiquettes
 * ------------------------------------------------------------------ */

.woocommerce ul.products li.product,
.single-product div.product .woocommerce-product-gallery {
	position: relative;
}

.mrd-etiquettes {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
}

.mrd-etiquette {
	position: absolute;
	display: inline-block;
	padding: 5px 11px;
	border-radius: 3px;
	font-size: 0.72rem;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.mrd-etiquette--haut-gauche { top: 10px; left: 10px; }
.mrd-etiquette--haut-droite { top: 10px; right: 10px; }
.mrd-etiquette--bas-gauche  { bottom: 10px; left: 10px; }
.mrd-etiquette--bas-droite  { bottom: 10px; right: 10px; }

/* Deux étiquettes dans le même coin ne se superposent pas : la seconde
   descend d'un cran. */
.mrd-etiquette--haut-gauche ~ .mrd-etiquette--haut-gauche { top: 44px; }
.mrd-etiquette--haut-droite ~ .mrd-etiquette--haut-droite { top: 44px; }
.mrd-etiquette--bas-gauche  ~ .mrd-etiquette--bas-gauche  { bottom: 44px; }
.mrd-etiquette--bas-droite  ~ .mrd-etiquette--bas-droite  { bottom: 44px; }

.mrd-etiquettes--fiche .mrd-etiquette {
	font-size: 0.78rem;
	padding: 6px 14px;
}

@media (max-width: 600px) {
	.mrd-etiquette {
		font-size: 0.64rem;
		padding: 4px 8px;
	}
}

/* ---------------------------------------------------------------------
 * Masques d'image
 *
 * On masque le conteneur ET l'image : selon le constructeur, c'est l'un ou
 * l'autre qui porte la photo, et masquer les deux évite d'avoir à le savoir.
 * ------------------------------------------------------------------ */

[class*="mrd-masque-"],
[class*="mrd-masque-"] img {
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.mrd-masque-arche,
.mrd-masque-arche img {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 L0,50 A50,50 0 0 1 100,50 L100,100 Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 L0,50 A50,50 0 0 1 100,50 L100,100 Z'/%3E%3C/svg%3E");
}

.mrd-masque-goutte,
.mrd-masque-goutte img {
	border-radius: 46% 46% 46% 4%;
	overflow: hidden;
}

.mrd-masque-feuille,
.mrd-masque-feuille img {
	border-radius: 0 62% 0 62%;
	overflow: hidden;
}

.mrd-masque-ovale,
.mrd-masque-ovale img {
	border-radius: 50%;
	overflow: hidden;
}

.mrd-masque-organique,
.mrd-masque-organique img {
	border-radius: 58% 42% 47% 53% / 42% 51% 49% 58%;
	overflow: hidden;
}

.mrd-masque-doux,
.mrd-masque-doux img {
	border-radius: 14px;
	overflow: hidden;
}

/* ---------------------------------------------------------------------
 * Équivalent en monnaie étrangère
 * ------------------------------------------------------------------ */

.mrd-devise {
	display: block;
	margin-top: 2px;
	font-size: 0.78em;
	font-weight: 400;
	opacity: 0.72;
	letter-spacing: 0.01em;
}

.mrd-devise:empty {
	display: none;
}

.mrd-devise-choix select {
	max-width: 190px;
}