/**
 * Recruit Personalization: pre-order messaging.
 *
 * Colours are drawn from currentColor and a translucent accent rather than fixed
 * values, so the notice sits correctly on a dark theme as well as a light one
 * without the plugin needing to know which it is on.
 */

/* Shop grid badge --------------------------------------------------------- */

.rbp-preorder-badge {
	display: inline-block;
	margin: 4px 0 0;
	padding: 3px 9px;
	border-radius: 999px;
	background: #b8860b;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* Product page notice ----------------------------------------------------- */

.rbp-preorder-notice {
	margin: 0 0 16px;
	padding: 11px 13px;
	border-left: 4px solid #b8860b;
	border-radius: 4px;
	background: rgba(184, 134, 11, 0.12);
	color: inherit;
	font-size: 0.8rem;
	line-height: 1.55;
}

/* One paragraph, styled through the element. There is no headline and no body
   here, so there are no classes pretending otherwise. */
.rbp-preorder-notice p {
	margin: 0;
}

.rbp-preorder-notice strong {
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Only class left inside, and only because the separator needs to be dimmed and
   kept away from screen readers. */
.rbp-preorder-notice__sep {
	opacity: 0.5;
}

/* The kit listing renders this hidden and reveals it from JavaScript. The
   explicit rule is deliberate: the block above sets no display, but if one were
   ever added it would quietly beat the attribute and leave the notice showing
   for every design. */
.rbp-preorder-notice[hidden] {
	display: none !important;
}