/**
 * Hair Jetique — the "New" tag.
 *
 * The client asked for a flashing "new" tag. A hard blink is not actually what
 * he wants: it makes the word harder to read rather than easier, and anything
 * flashing more than about three times a second is a seizure risk and fails
 * WCAG 2.3.1. So the tag breathes instead — a soft gold glow that swells and
 * fades over roughly two and a half seconds, about a fifth of the rate that
 * threshold sits at — and the whole animation is behind a no-preference query,
 * so it simply stops for anyone whose system asks for less motion.
 *
 * The corners are already spoken for on a shop tile. The pre-order badge owns
 * the top-left and WooCommerce's sale roundel hangs off the top-right corner,
 * so the New tag takes the top-right inset and steps down below the roundel on
 * the few products that are genuinely discounted. Both badges are siblings in
 * the same product link, so they resolve against the same box and cannot drift
 * onto one another.
 */

/* ------------------------------------------------------------- shop tile */

.hj-new__badge {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	padding: 5px 11px;
	border-radius: 999px;
	background: #d9a441;
	color: #2a1d17;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

/* Astra's sale roundel is 3em across and sits half an em outside the corner,
   so it reaches roughly 32px down the tile. Clear it rather than overlap it. */
.hj-new__badge--sale {
	top: 44px;
}

/* Two pills across a phone-width tile is tight, so the tag is trimmed there —
   and where the pre-order badge is genuinely on the same tile, marked at render
   time with --paired, it tucks underneath rather than race it for the same
   line. Nothing is stacked on a tile that has no pre-order badge, so the day
   pre-order mode retires itself the tag returns to the corner on its own. */
@media ( max-width: 480px ) {

	.hj-new__badge {
		top: 8px;
		right: 8px;
		padding: 4px 8px;
		font-size: 10px;
		letter-spacing: .06em;
	}

	.hj-new__badge--sale {
		top: 38px;
	}

	.hj-new__badge--paired,
	.hj-new__badge--paired.hj-new__badge--sale {
		top: 40px;
		right: auto;
		left: 8px;
	}
}

/* --------------------------------------------------------- product page */

.hj-new__tag {
	display: inline-block;
	margin: 0 0 12px;
	padding: 5px 12px;
	border-radius: 999px;
	background: #d9a441;
	color: #2a1d17;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 1.5;
}

/* -------------------------------------------------------------- the pulse */

@media ( prefers-reduced-motion: no-preference ) {

	.hj-new--pulse {
		animation: hj-new-breath 2.4s ease-in-out infinite;
	}
}

/* Opacity never drops below .9, so the word stays legible at every point in
   the cycle; the glow is what carries the movement. */
@keyframes hj-new-breath {

	0%, 100% {
		opacity: .9;
		box-shadow: 0 0 0 0 rgba( 217, 164, 65, .5 );
	}

	50% {
		opacity: 1;
		box-shadow: 0 0 0 7px rgba( 217, 164, 65, 0 );
	}
}