/**
 * Etiquetas Dinámicas para WooCommerce
 * Estilos del frontend (se reutilizan en la vista previa del panel).
 *
 * ESCALADO
 * Las medidas no se escriben en píxeles fijos: el PHP emite números sin unidad
 * (--ed-fs, --ed-pv, --ed-rad…) y aquí se multiplican por --ed-unit, que vale
 * 1px cuando la imagen tiene el ancho de referencia y se reduce cuando es más
 * pequeña. Cambiando esa única variable escala toda la etiqueta a la vez, en vez
 * de ajustar cada medida por separado en cada punto de ruptura.
 */

.ed-image-wrap {
	position: relative;
	display: block;
}

.ed-badges {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-template-areas:
		"tl tc tr"
		"ml mc mr"
		"bl bc br";
	pointer-events: none;
	z-index: 5;
	overflow: hidden;
}

.ed-badges__cell {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	max-width: 100%;
}

/* Áreas de la cuadrícula 3 × 3. */
.ed-badges__cell--top-left { grid-area: tl; }
.ed-badges__cell--top-center { grid-area: tc; }
.ed-badges__cell--top-right { grid-area: tr; }
.ed-badges__cell--middle-left { grid-area: ml; }
.ed-badges__cell--middle-center { grid-area: mc; }
.ed-badges__cell--middle-right { grid-area: mr; }
.ed-badges__cell--bottom-left { grid-area: bl; }
.ed-badges__cell--bottom-center { grid-area: bc; }
.ed-badges__cell--bottom-right { grid-area: br; }

/* Alineación vertical por fila. */
.ed-badges__cell--top-left,
.ed-badges__cell--top-center,
.ed-badges__cell--top-right {
	align-self: start;
}

.ed-badges__cell--middle-left,
.ed-badges__cell--middle-center,
.ed-badges__cell--middle-right {
	align-self: center;
}

.ed-badges__cell--bottom-left,
.ed-badges__cell--bottom-center,
.ed-badges__cell--bottom-right {
	align-self: end;
}

/* Alineación horizontal por columna. */
.ed-badges__cell--top-left,
.ed-badges__cell--middle-left,
.ed-badges__cell--bottom-left {
	justify-self: start;
	align-items: flex-start;
}

.ed-badges__cell--top-center,
.ed-badges__cell--middle-center,
.ed-badges__cell--bottom-center {
	justify-self: center;
	align-items: center;
}

.ed-badges__cell--top-right,
.ed-badges__cell--middle-right,
.ed-badges__cell--bottom-right {
	justify-self: end;
	align-items: flex-end;
}

/* Etiqueta. */
.ed-badge {
	--ed-unit: 1px;
	--ed-bg: #e02b20;
	--ed-color: #ffffff;
	--ed-fs: 13;
	--ed-weight: 700;
	--ed-rad: 3;
	--ed-pv: 4;
	--ed-ph: 8;
	--ed-ox: 8;
	--ed-oy: 8;
	--ed-opacity: 1;
	--ed-family: inherit;
	--ed-transform: none;
	--ed-track: 0;
	--ed-leading: 1.2;

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0;
	padding: calc(var(--ed-pv) * var(--ed-unit)) calc(var(--ed-ph) * var(--ed-unit));
	background: var(--ed-bg);
	color: var(--ed-color);
	border-radius: calc(var(--ed-rad) * var(--ed-unit));
	font-family: var(--ed-family);
	font-size: calc(var(--ed-fs) * var(--ed-unit));
	font-weight: var(--ed-weight);
	line-height: var(--ed-leading);
	letter-spacing: calc(var(--ed-track) * var(--ed-unit));
	text-transform: var(--ed-transform);
	text-align: center;
	white-space: nowrap;
	opacity: var(--ed-opacity);
	pointer-events: none;
}

/* Ancho máximo propio del estado padre. */
.ed-badge--parent {
	max-width: calc(var(--ed-maxw, 1000) * var(--ed-unit));
}

/*
 * Escalado proporcional al ancho de la imagen.
 * Con consultas de contenedor la etiqueta se mide contra la imagen real, que es
 * lo correcto: en una cuadrícula de cuatro columnas la tarjeta es pequeña aunque
 * la ventana sea ancha.
 */
@supports (container-type: inline-size) {
	.ed-image-wrap {
		container-type: inline-size;
	}

	.ed-image-wrap .ed-badge--fluid {
		--ed-unit: clamp(
			calc(var(--ed-min, 0.5) * 1px),
			calc(100cqw / var(--ed-ref, 300)),
			1px
		);
	}
}

/*
 * Reserva por puntos de ruptura: para la ficha de producto, donde la etiqueta va
 * dentro de la galería del tema y no de nuestro contenedor, y para navegadores
 * sin consultas de contenedor.
 */
@media (max-width: 575px) {
	.ed-badge--fluid {
		--ed-unit: 0.62px;
	}
}

@media (min-width: 576px) and (max-width: 991px) {
	.ed-badge--fluid {
		--ed-unit: 0.8px;
	}
}

/* Desplazamiento respecto al borde de la imagen. */
.ed-badge--pos-top-left,
.ed-badge--pos-top-center,
.ed-badge--pos-top-right {
	margin-top: calc(var(--ed-oy) * var(--ed-unit));
}

.ed-badge--pos-bottom-left,
.ed-badge--pos-bottom-center,
.ed-badge--pos-bottom-right {
	margin-bottom: calc(var(--ed-oy) * var(--ed-unit));
}

.ed-badge--pos-top-left,
.ed-badge--pos-middle-left,
.ed-badge--pos-bottom-left {
	margin-left: calc(var(--ed-ox) * var(--ed-unit));
}

.ed-badge--pos-top-right,
.ed-badge--pos-middle-right,
.ed-badge--pos-bottom-right {
	margin-right: calc(var(--ed-ox) * var(--ed-unit));
}

/* Etiquetas con imagen o SVG: el recurso gráfico manda, sin fondo ni padding. */
.ed-badge--has-image {
	background: none;
	padding: 0;
	border-radius: 0;
	display: inline-block;
	line-height: 0;
	width: auto;
}

.ed-badge--has-image .ed-badge__img,
.ed-badge--has-image .ed-badge__svg,
.ed-badge--has-image .ed-badge__svg svg {
	display: block;
	width: calc(var(--ed-w, 80) * var(--ed-unit));
	height: auto;
	max-width: 100%;
	margin: 0;
	box-shadow: none;
	border-radius: 0;
}

/* El SVG en línea se deja desbordar para que el trazo y la rotación no se corten. */
.ed-badge__svg svg {
	overflow: visible;
}

/* La rotación gira el gráfico, sea SVG o imagen, pero nunca el texto superpuesto. */
.ed-badge__svg svg,
.ed-badge__img {
	transform: rotate(var(--ed-svg-rotate, 0deg));
}

/*
 * Recoloreado. Las formas de la biblioteca usan fill="currentColor", así que
 * basta con definir `color`. Para un SVG subido por el usuario se fuerza el
 * relleno de cada elemento, porque los atributos de presentación (fill="#000")
 * vienen escritos en el propio archivo.
 */
.ed-badge--recolor .ed-badge__svg {
	color: var(--ed-svg-fill, currentColor);
}

.ed-badge--recolor .ed-badge__svg svg,
.ed-badge--recolor .ed-badge__svg svg *:not([fill="none"]) {
	fill: var(--ed-svg-fill, currentColor);
}

.ed-badge--stroke .ed-badge__svg svg *:not([stroke="none"]) {
	stroke: var(--ed-svg-stroke, #1d2327);
	stroke-width: var(--ed-svg-stroke-width, 2);
	stroke-linejoin: round;
	paint-order: stroke;
}

/*
 * Rotación del texto.
 * En una etiqueta de solo texto gira la pastilla entera (girar el texto dentro
 * de un rectángulo recto quedaría raro); cuando hay gráfico, gira solo el texto
 * para poder acompañar la inclinación del icono.
 */
.ed-badge--text {
	transform: rotate(var(--ed-text-rotate, 0deg));
}

.ed-badge--both .ed-badge__text,
.ed-badge--image .ed-badge__text {
	transform: rotate(var(--ed-text-rotate, 0deg));
}

/* Estado padre: permite que el texto ocupe varias líneas. */
.ed-badge--wrap,
.ed-badge--wrap .ed-badge__text {
	white-space: normal;
	overflow-wrap: break-word;
}

.ed-badge--wrap .ed-badge__text {
	display: block;
}

/* Texto superpuesto sobre la imagen. */
.ed-badge--both .ed-badge__text {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ed-color);
	font-family: var(--ed-family);
	font-size: calc(var(--ed-fs) * var(--ed-unit));
	font-weight: var(--ed-weight);
	line-height: var(--ed-leading);
	letter-spacing: calc(var(--ed-track) * var(--ed-unit));
	text-transform: var(--ed-transform);
	text-align: center;
	padding: calc(var(--ed-pv) * var(--ed-unit)) calc(var(--ed-ph) * var(--ed-unit));
	box-sizing: border-box;
}

.ed-badge--text .ed-badge__text,
.ed-badge--image .ed-badge__text {
	display: block;
}

/* El tema no debe imponer estilos a nuestras imágenes. */
.ed-badges img {
	border: 0;
	padding: 0;
	background: none;
}

/*
 * Buscador AJAX: la etiqueta no va sobre la miniatura, sino en línea junto al
 * nombre del producto. Usa su propia unidad porque su contenedor es el texto,
 * no una imagen.
 */
.ed-chips {
	display: inline;
}

.ed-chip {
	--ed-chip-unit: 1px;
	--ed-chip-bg: #e02b20;
	--ed-chip-color: #ffffff;
	--ed-chip-fs: 12;
	--ed-chip-pv: 3;
	--ed-chip-ph: 7;
	--ed-chip-rad: 3;

	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	padding: calc(var(--ed-chip-pv) * var(--ed-chip-unit)) calc(var(--ed-chip-ph) * var(--ed-chip-unit));
	background: var(--ed-chip-bg);
	color: var(--ed-chip-color);
	border-radius: calc(var(--ed-chip-rad) * var(--ed-chip-unit));
	font-family: var(--ed-family, inherit);
	font-size: calc(var(--ed-chip-fs) * var(--ed-chip-unit));
	font-weight: var(--ed-weight, 700);
	letter-spacing: calc(var(--ed-track, 0) * var(--ed-chip-unit));
	text-transform: var(--ed-transform, none);
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
}

.ed-chip--before {
	margin-right: calc(6 * var(--ed-chip-unit));
}

.ed-chip--after {
	margin-left: calc(6 * var(--ed-chip-unit));
}

@media (max-width: 575px) {
	.ed-chip {
		--ed-chip-unit: 0.85px;
	}
}