/* Movimiento del escaparate: badge de descuento y micro-interacciones.
   Solo transform y opacity en lo que se mueve; todo se apaga con
   prefers-reduced-motion. */

:root{
	--gc-ease-expo:cubic-bezier(.16,1,.3,1);
	--gc-ease-quart:cubic-bezier(.25,1,.5,1);
	--gc-cromo:linear-gradient(135deg,#f6f6f8 0%,#c6c9d0 26%,#ffffff 44%,#9da2ac 62%,#f2ddd5 80%,#c4988b 100%);
}

/* --------------------------------------------------- badge de descuento */
/* Etiqueta roja plana, quieta, arriba a la izquierda de la foto (como pidio
   el usuario; la version cromada con giro y destello se descarto). */
.v2card__media,.gcpk__media{position:relative}
.gcb{
	position:absolute;top:10px;left:10px;z-index:2;
	display:inline-flex;align-items:center;
	padding:5px 7px 4px;border-radius:6px;
	background:#e3212f;color:#fff;
	font:800 12.5px/1 'Bricolage Grotesque',sans-serif;letter-spacing:0;
	font-variant-numeric:tabular-nums;white-space:nowrap;
	pointer-events:none
}
@media (min-width:768px){.gcb{top:12px;left:12px;font-size:13.5px;padding:6px 8px 5px}}
/* en el pack va antes del nombre, no encima de la miniatura */
.gcpk__info .gcb{position:static;align-self:flex-start;margin:0 0 5px;padding:4px 6px 3px;border-radius:5px;font-size:11px}
/* ------------------------------------------------------- tarjetas */
.v2card__media img{transition:transform .8s var(--gc-ease-expo) !important}
@media (hover:hover){.v2card:hover .v2card__media img{transform:scale(1.05) !important}}
.v2card__media{transition:transform .18s var(--gc-ease-quart)}
.v2card:active .v2card__media{transform:scale(.975)}

/* ------------------------------------------------------- botones */
.single_add_to_cart_button,.gcm__pagar,.v2cta a,.v2btn,.gcc-prog__ir,.gcm__cant button,.gcod{
	transition:transform .16s var(--gc-ease-quart),box-shadow .2s ease,background-color .2s ease,filter .2s ease
}
.single_add_to_cart_button:active,.gcm__pagar:active,.v2cta a:active,.v2btn:active,.gcc-prog__ir:active,.gcod:active{transform:scale(.97)}
.gcm__cant button:active{transform:scale(.88)}

/* ------------------------------------------------------- contador del carrito */
.v2h__count.is-salta{animation:gcCuenta .55s var(--gc-ease-expo)}
@keyframes gcCuenta{
	0%{transform:scale(1)}
	30%{transform:scale(1.45)}
	100%{transform:scale(1)}
}

@media (prefers-reduced-motion:reduce){
	.v2card__media img,.v2card__media{transition:none !important}
	.v2h__count.is-salta{animation:none}
}