/* NB The 'top' value needs to vary according to the header height, so that is set from js. But to do that it needs to exist first in here. */
#countdown {
	position: fixed;
	top: 0;
	right: 5%;
	z-index: 2000; /* It needs to be above most normal page content, but below the Hestia slide-out sidebar on mobile */
	background-color: #337136d9;
	color: #f4efe0;
	font-size: 80%;
	box-shadow: 0 0 8px -4px #333c;
	padding: 4px 10px;
	border-radius: 0 0 10px 10px;
	/* Start invisible; add fade-in class to fade in */
	-webkit-transform: scaleY(0); 
	transform: scaleY(0);
	transform-origin: center top;
	transition: transform 0.6s ease-in-out;
}
#countdown.fade-in {
	-webkit-transform: scaleY(1);
	transform: scaleY(1);
}

/* On smaller screens, centre horizontally */
/* The admin bar is not fixed below 600px, so it will overlay the header, but it scrolls away so just ignore it for positioning */
@media (max-width: 991px) {
	#countdown {
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 250px;
		text-align: center;
		z-index: 0;
	}
}

/* Change colour for last hour and last minute */
#countdown.last-hour {
	background-color: #f4cb29;
	color: black;
}

#countdown.last-minute {
	background-color: #f00909;
	color: #f8ff10;
	font-weight: bold;
}

/* Product page information block */
.product-shop-closed-message {
	margin: 1em auto;
	padding: 1em;
	background-color: #c7dda5;
	font-weight: bold;
	width: 60%;
	border-radius: 4px;
	box-shadow: 0 0 4px -2px #333;
}
}