.dove-flip-widget{
	perspective: 1000px;
	position: relative;
	/* ensure children can be transformed without leaking */
	overflow: hidden;
}

.dove-flip-widget__inner{
	position: relative;
	width: 100%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	transition: transform .6s;
}

.dove-flip-widget--flipped .dove-flip-widget__inner{
	transform: rotateY(180deg);
}

/* Front face remains in flow so it determines height; back is absolute and overlays it */
.dove-flip-widget__front{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	position: relative;
	width: 100%;
	display: block;
}

.dove-flip-widget__back{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	transform: rotateY(180deg);
}

.dove-flip-widget__toggle{display:inline-block;margin-top:8px}

/* Normalise face content to avoid vertical offsets caused by
	 margin-collapsing or differing defaults in theme styles. */
.dove-flip-widget__front,
.dove-flip-widget__back {
	box-sizing: border-box;
}

/* Prevent the first child's top margin from visually pushing one face
	 lower than the other. This targets typical heading/paragraph margins. */
.dove-flip-widget__front > :first-child,
.dove-flip-widget__back > :first-child {
	margin-top: 0;
}

/* Ensure back content aligns to the top of the face container */
.dove-flip-widget__back {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}