/* VG Etiquetas para WooCommerce
   Todas las formas se dibujan con las variables --vg-* que escribe el plugin
   en el atributo style de cada etiqueta. */

/* ---------------------------------------------------------------------
   Contenedor por esquina
   ------------------------------------------------------------------ */

.vg-etq-wrap {
	position: absolute;
	z-index: 9;
	display: flex;
	flex-direction: column;
	max-width: 85%;
	pointer-events: none;
}

.vg-etq-wrap--tl { top: 0; left: 0; align-items: flex-start; }
.vg-etq-wrap--tr { top: 0; right: 0; align-items: flex-end; }
.vg-etq-wrap--bl { bottom: 0; left: 0; align-items: flex-start; flex-direction: column-reverse; }
.vg-etq-wrap--br { bottom: 0; right: 0; align-items: flex-end; flex-direction: column-reverse; }

/* Contenedores habituales de WooCommerce */
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery {
	position: relative;
}

/* ---------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */

.vg-etq {
	--vg-bg: #e2401c;
	--vg-fg: #ffffff;
	--vg-size: 12px;
	--vg-radius: 3px;
	--vg-x: 10px;
	--vg-y: 10px;

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	margin: var(--vg-y) var(--vg-x);
	padding: 0.5em 0.85em;
	border-radius: var(--vg-radius);
	background: var(--vg-bg);
	color: var(--vg-fg);
	font-size: var(--vg-size);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.03em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.vg-etq__txt { display: block; }
.vg-etq--mayus { text-transform: uppercase; }

/* ---------------------------------------------------------------------
   Formas
   ------------------------------------------------------------------ */

/* Pastilla */
.vg-etq--pastilla { border-radius: 999px; }

/* Cartel con punta */
.vg-etq--punta::after {
	content: "";
	position: absolute;
	bottom: -0.55em;
	left: 0.9em;
	border-style: solid;
	border-width: 0.55em 0.55em 0 0;
	border-color: var(--vg-bg) transparent transparent transparent;
}

.vg-etq-wrap--tr .vg-etq--punta::after,
.vg-etq-wrap--br .vg-etq--punta::after {
	left: auto;
	right: 0.9em;
	border-width: 0.55em 0 0 0.55em;
	border-color: var(--vg-bg) transparent transparent transparent;
}

.vg-etq-wrap--bl .vg-etq--punta::after,
.vg-etq-wrap--br .vg-etq--punta::after {
	bottom: auto;
	top: -0.55em;
}

.vg-etq-wrap--bl .vg-etq--punta::after {
	border-width: 0 0.55em 0.55em 0;
	border-color: transparent transparent var(--vg-bg) transparent;
}

.vg-etq-wrap--br .vg-etq--punta::after {
	border-width: 0 0 0.55em 0.55em;
	border-color: transparent transparent var(--vg-bg) transparent;
}

/* Cinta con flecha */
.vg-etq--flecha {
	border-radius: 0;
	padding-right: 1.7em;
	clip-path: polygon(0 0, calc(100% - 0.75em) 0, 100% 50%, calc(100% - 0.75em) 100%, 0 100%);
}

.vg-etq-wrap--tr .vg-etq--flecha,
.vg-etq-wrap--br .vg-etq--flecha {
	padding-right: 0.85em;
	padding-left: 1.7em;
	clip-path: polygon(0.75em 0, 100% 0, 100% 100%, 0.75em 100%, 0 50%);
}

/* Octágono */
.vg-etq--octagono {
	width: 3.6em;
	height: 3.6em;
	padding: 0.3em;
	border-radius: 0;
	white-space: normal;
	clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

/* Círculo */
.vg-etq--circulo {
	width: 3.6em;
	height: 3.6em;
	padding: 0.3em;
	border-radius: 50%;
	white-space: normal;
}

/* Bloque con sombra dura */
.vg-etq--sombra {
	border-radius: 0;
	box-shadow: 0.35em 0.35em 0 rgba(0, 0, 0, 0.82);
}

/* Esquina diagonal */
.vg-etq--esquina {
	width: 6em;
	height: 6em;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	overflow: hidden;
}

.vg-etq--esquina::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--vg-bg);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

.vg-etq--esquina .vg-etq__txt {
	position: absolute;
	top: 1.2em;
	left: -1.6em;
	width: 9em;
	transform: rotate(-45deg);
	text-align: center;
}

.vg-etq-wrap--tr .vg-etq--esquina::before { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.vg-etq-wrap--tr .vg-etq--esquina .vg-etq__txt { left: auto; right: -1.6em; transform: rotate(45deg); }

.vg-etq-wrap--bl .vg-etq--esquina::before { clip-path: polygon(0 0, 0 100%, 100% 100%); }
.vg-etq-wrap--bl .vg-etq--esquina .vg-etq__txt { top: auto; bottom: 1.2em; transform: rotate(45deg); }

.vg-etq-wrap--br .vg-etq--esquina::before { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.vg-etq-wrap--br .vg-etq--esquina .vg-etq__txt { top: auto; bottom: 1.2em; left: auto; right: -1.6em; transform: rotate(-45deg); }

/* ---------------------------------------------------------------------
   Ajustes de pantalla chica
   ------------------------------------------------------------------ */

@media (max-width: 600px) {
	.vg-etq {
		font-size: calc(var(--vg-size) * 0.85);
		margin: calc(var(--vg-y) * 0.6) calc(var(--vg-x) * 0.6);
	}

	.vg-etq--esquina { margin: 0; }
}

/* Enlaces del producto por encima de la etiqueta */
.vg-etq-wrap * { pointer-events: none; }

/* Modo compatible: envoltorio de la imagen del producto */
.vg-etq-img {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
}

.vg-etq-img > img { max-width: 100%; height: auto; }