/*
 * Cintas de etiquetas de la tienda: Precio web, Nuevo, Destacado y Agotado.
 *
 * Los tokens `--glee-*` están copiados de `glee-brand/assets/tokens.css`, que es la
 * fuente única: si cambia un valor, se cambia allá primero y después acá. Se declaran
 * en `.gpw-lift` y no en `:root` para no filtrar variables de marca al tema.
 *
 * Desvíos de la marca pedidos por el dueño (plan 02): sombra proyectada, punta en V
 * y texto de 10 px en la grilla.
 */

/*
 * Montserrat 700 con un nombre propio: si el tema define "Montserrat" con otros
 * subconjuntos, esta regla no puede pisarle los glifos al resto del sitio.
 */
@font-face { font-family: "Glee Ribbon Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/montserrat-700-normal.woff2") format("woff2"); }

.gpw-lift {
	--glee-primary: #392869;
	--glee-accent: #e1ae3b;
	--glee-ink: #161616;
	--glee-ink-muted: #5b5663;
	--glee-primary-soft: #efedf4;
	--glee-on-primary: #ffffff;
	--glee-on-accent: #161616;

	/* Medidas de la cinta: grilla por defecto, la single las agranda más abajo. */
	--gpw-ribbon-height: 22px;
	--gpw-ribbon-text-size: 10px;
	--gpw-ribbon-tip: 6px;
	--gpw-fold-height: 5px;
	--gpw-shadow-color: color-mix(in srgb, var(--glee-ink) 32%, transparent);
	--gpw-fold-color: color-mix(in srgb, var(--glee-ink) 45%, transparent);
	--gpw-bevel-light: color-mix(in srgb, var(--glee-on-primary) 30%, transparent);
	--gpw-bevel-dark: color-mix(in srgb, var(--glee-ink) 18%, transparent);

	position: relative;
	filter: drop-shadow(0 2px 3px var(--gpw-shadow-color));
}

/* Pliegue oscuro debajo de lo que sobresale del borde izquierdo de la imagen. */
.gpw-lift::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 100%;
	width: var(--gpw-overhang, 8px);
	height: var(--gpw-fold-height);
	background: var(--gpw-fold-color);
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.gpw-ribbon {
	display: flex;
	align-items: center;
	gap: 5px;
	box-sizing: border-box;
	height: var(--gpw-ribbon-height);
	padding: 0 16px 0 15px;
	border-radius: 0;
	font-family: "Glee Ribbon Montserrat", Montserrat, Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: var(--gpw-ribbon-text-size);
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: inset 0 1px 0 var(--gpw-bevel-light), inset 0 -1px 0 var(--gpw-bevel-dark);
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--gpw-ribbon-tip)) 50%, 100% 100%, 0 100%);
}

.gpw-ribbon svg {
	width: 13px;
	height: 13px;
	flex: none;
	fill: currentColor;
}

.gpw-ribbon--web { background: var(--glee-primary); color: var(--glee-on-primary); }
.gpw-ribbon--new { background: var(--glee-primary-soft); color: var(--glee-primary); }
.gpw-ribbon--hot { background: var(--glee-accent); color: var(--glee-on-accent); }
.gpw-ribbon--out { background: var(--glee-ink-muted); color: var(--glee-on-primary); }

/*
 * Grilla. El tema recorta la tarjeta con `overflow: hidden` y `clip`
 * (`woo-loop-prod-el-base.css`); sin esto la cinta no puede sobresalir.
 */
.wd-product .wd-product-thumb { overflow: visible; }

.wd-product .product-labels {
	--gpw-overhang: 8px;
	inset-inline-start: calc(var(--gpw-overhang) * -1);
	top: 10px;
	gap: 6px;
}

/*
 * Single. El CSS de la galería del tema se carga después de este con la misma
 * especificidad y deja las etiquetas arriba a la derecha: de ahí el selector más largo.
 */
.single-product .woocommerce-product-gallery .product-labels {
	--gpw-overhang: 8px;
	inset-inline-start: calc(var(--gpw-overhang) * -1);
	inset-inline-end: auto;
	top: 14px;
	align-items: flex-start;
}

.single-product .woocommerce-product-gallery .gpw-lift {
	--gpw-ribbon-height: 24px;
	--gpw-ribbon-text-size: 11px;
}

/*
 * Producto agotado: se atenúa la imagen y no el enlace entero, porque las cintas
 * viven dentro del enlace de la imagen (`.wd-product-img-link`) y se apagarían también.
 */
.wd-product.outofstock .wd-product-thumb img { opacity: .5; }

/*
 * Pantallas angostas: en la grilla de dos columnas la cinta de la columna izquierda
 * sobresale hacia el margen de la página, que en mobile es de unos 10 px. Con 8 px
 * quedaría casi pegada al borde del dispositivo, así que el saliente baja a 4 px
 * (el pliegue baja con él).
 */
@media (max-width: 576px) {
	.wd-product .product-labels,
	.single-product .woocommerce-product-gallery .product-labels {
		--gpw-overhang: 4px;
	}
}