/*
 * Base content layer. WHM-56.
 *
 * WHAT THIS IS FOR, and why it is not a template.
 *
 * The chrome renders on every page, but only home, the product page and the
 * product archives have plugin templates. Everything else still renders through
 * Shoptimizer: the cart, My Account, FAQs, Shipping & Delivery, Contact Us,
 * Refer, the Protocol Guide, 404. Without this file every one of those pages
 * would show the new dark header and footer wrapped around the old storefront's
 * styling, which is a worse look than either design on its own and is the first
 * thing anyone would notice walking the site.
 *
 * So this styles the THEME's own output rather than replacing it. No markup is
 * added and no template is taken over: WooCommerce and Shoptimizer keep
 * rendering the cart table, the account forms and the page content exactly as
 * they do now, and this brings them into the palette.
 *
 * Everything is scoped under body.express-chrome-on, so with the flag off not
 * one rule here can match.
 *
 * CHECKOUT IS DELIBERATELY UNTOUCHED. The chrome excludes checkout and
 * order-received, so those pages never carry the body class and never see these
 * rules. Restyling a payment form is its own round with its own testing.
 *
 * Loaded on every chrome page, BEFORE the surface stylesheets, so home,
 * product and archive rules win where they overlap.
 */

/* ---------------------------------------------------------------------------
   1. PAGE GROUND

   The theme paints its own backgrounds on these wrappers. Left alone, a page
   sits on Shoptimizer's white while the chrome above it is on the new violet
   near-white, and the seam is visible.
   --------------------------------------------------------------------------- */
body.express-chrome-on #page,
body.express-chrome-on #content,
body.express-chrome-on .site-content,
body.express-chrome-on .content-area,
body.express-chrome-on .site-main {
	background: var(--ep-lt-bg);
	color: var(--ep-lt-ink);
}

body.express-chrome-on .site-main,
body.express-chrome-on .content-area {
	padding-top: var(--ep-s-8);
	padding-bottom: var(--ep-s-12);
}

/* ---------------------------------------------------------------------------
   2. TYPE

   Shoptimizer sets its own families and sizes on headings and body copy. These
   bring page content onto the same ladder as the templates without touching
   the markup.
   --------------------------------------------------------------------------- */
body.express-chrome-on .entry-content,
body.express-chrome-on .page-content,
body.express-chrome-on .woocommerce {
	font-family: var(--ep-font);
	font-size: var(--ep-t-base);
	line-height: var(--ep-lh-body);
	color: var(--ep-lt-ink-2);
}

body.express-chrome-on .entry-title,
body.express-chrome-on .page-title {
	font-family: var(--ep-font);
	font-size: var(--ep-t-2xl);
	font-weight: var(--ep-w-black);
	letter-spacing: var(--ep-track-head);
	line-height: 1.06;
	color: var(--ep-lt-ink);
	margin-bottom: var(--ep-s-5);
}

body.express-chrome-on .entry-content h2,
body.express-chrome-on .entry-content h3,
body.express-chrome-on .entry-content h4 {
	font-family: var(--ep-font);
	font-weight: var(--ep-w-black);
	letter-spacing: var(--ep-track-sub);
	color: var(--ep-lt-ink);
	margin-top: var(--ep-s-8);
	margin-bottom: var(--ep-s-3);
}
body.express-chrome-on .entry-content h2 { font-size: var(--ep-t-xl); }
body.express-chrome-on .entry-content h3 { font-size: var(--ep-t-lg); }
body.express-chrome-on .entry-content h4 { font-size: var(--ep-t-md); }

body.express-chrome-on .entry-content p { margin: 0 0 var(--ep-s-4); max-width: 68ch; }
body.express-chrome-on .entry-content ul,
body.express-chrome-on .entry-content ol { margin: 0 0 var(--ep-s-4) var(--ep-s-5); max-width: 68ch; }
body.express-chrome-on .entry-content li { margin-bottom: var(--ep-s-2); }

body.express-chrome-on .entry-content a { color: var(--ep-vio-deep); }
body.express-chrome-on .entry-content a:hover { color: var(--ep-lt-ink); }

body.express-chrome-on .entry-content blockquote {
	border-left: 3px solid var(--ep-vio-deep);
	background: var(--ep-lt-tint);
	margin: 0 0 var(--ep-s-5);
	padding: var(--ep-s-4) var(--ep-s-5);
	border-radius: 0 var(--ep-r-md) var(--ep-r-md) 0;
}

/* ---------------------------------------------------------------------------
   3. CONTROLS

   One button appearance across the whole site. Woo prints .button on dozens of
   surfaces (cart, account, notices) and the theme styles them its own way, so
   without this the cart's "Update basket" and the product page's "Add to
   basket" are visibly different objects.

   Checkout's place-order button is NOT reached: that page has no body class.
   --------------------------------------------------------------------------- */
body.express-chrome-on .woocommerce .button,
body.express-chrome-on .woocommerce a.button,
body.express-chrome-on .woocommerce button.button,
body.express-chrome-on .woocommerce input.button,
body.express-chrome-on .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ep-control-md);
	padding: 0 var(--ep-s-6);
	border: 0;
	border-radius: var(--ep-r-md);
	background: var(--ep-vio-deep);
	color: var(--ep-white);
	font-family: var(--ep-font);
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-bold);
	letter-spacing: var(--ep-track-tight);
	line-height: 1;
	text-decoration: none;
	transition: background var(--ep-dur-1) var(--ep-ease), color var(--ep-dur-1) var(--ep-ease);
}
body.express-chrome-on .woocommerce .button:hover,
body.express-chrome-on .woocommerce a.button:hover,
body.express-chrome-on .woocommerce button.button:hover {
	background: var(--ep-vio);
	color: var(--ep-vio-ink);
}

/* Woo marks its secondary actions with .alt on the PRIMARY one, so the
   unmarked button is the quieter of the pair on cart and account screens. */
body.express-chrome-on .woocommerce .button:not(.alt):not(.single_add_to_cart_button):not(.checkout-button) {
	background: var(--ep-lt-card);
	color: var(--ep-lt-ink);
	border: 1px solid var(--ep-lt-line);
}
body.express-chrome-on .woocommerce .button:not(.alt):not(.single_add_to_cart_button):not(.checkout-button):hover {
	background: var(--ep-lt-sunk);
	color: var(--ep-lt-ink);
	border-color: var(--ep-vio-deep);
}

body.express-chrome-on .woocommerce input[type="text"],
body.express-chrome-on .woocommerce input[type="email"],
body.express-chrome-on .woocommerce input[type="tel"],
body.express-chrome-on .woocommerce input[type="password"],
body.express-chrome-on .woocommerce input[type="number"],
body.express-chrome-on .woocommerce input[type="search"],
body.express-chrome-on .woocommerce select,
body.express-chrome-on .woocommerce textarea {
	width: 100%;
	min-height: var(--ep-control-md);
	padding: var(--ep-s-2) var(--ep-s-4);
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-md);
	background: var(--ep-lt-card);
	font-family: var(--ep-font);
	font-size: var(--ep-t-base);
	color: var(--ep-lt-ink);
}

/* QUANTITY STEPPERS ARE THE EXCEPTION.

   A stepper already draws its own box around minus, number and plus. The rule
   above was giving the number inside it a second border, a second radius and a
   48px minimum height, which rendered as a rounded box floating inside the
   stepper on the cart page and in the drawer. These have to sit here, after the
   rule they undo and at the same weight, because the stepper markup carries no
   .woocommerce ancestor of its own to out-rank it with.

   Both steppers are covered: WooCommerce's own .quantity on the cart page, and
   shoptimizer-qty-cart's separate markup in the slide out drawer. */
body.express-chrome-on .quantity input.qty,
body.express-chrome-on .shoptimizer-custom-quantity-mini-cart input.shoptimizer-custom-quantity-mini-cart_input {
	width: 46px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	text-align: center;
}

/* The plus and minus were 12px wide inside an 82px box: a target a thumb has to
   aim at. They fill the height of the stepper and take the space either side of
   the number instead. */
body.express-chrome-on .shoptimizer-custom-quantity-mini-cart {
	align-items: stretch;
	overflow: hidden;
	min-height: 38px;
	/* The theme fixes this box at 82px. Two 30px controls leave 18px for the
	   number, which a quantity of 12 does not fit in. */
	width: 104px;
}
/* The number takes whatever the two controls leave, so a two digit quantity has
   somewhere to go. Without this it sits at the input's intrinsic 23px. */
body.express-chrome-on .shoptimizer-custom-quantity-mini-cart input.shoptimizer-custom-quantity-mini-cart_input {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: var(--ep-w-semi);
	font-variant-numeric: tabular-nums;
}
body.express-chrome-on .shoptimizer-custom-quantity-mini-cart .shoptimizer-custom-quantity-mini-cart_button {
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	min-width: 28px;
	padding: 0 var(--ep-s-1);
	color: var(--ep-lt-ink-2);
	cursor: pointer;
}
body.express-chrome-on .shoptimizer-custom-quantity-mini-cart .shoptimizer-custom-quantity-mini-cart_button:hover { color: var(--ep-vio-deep); }
body.express-chrome-on .shoptimizer-custom-quantity-mini-cart .shoptimizer-custom-quantity-mini-cart_button svg { width: 12px; height: 12px; }
body.express-chrome-on .woocommerce textarea { min-height: 120px; padding-top: var(--ep-s-3); }
body.express-chrome-on .woocommerce input:focus,
body.express-chrome-on .woocommerce select:focus,
body.express-chrome-on .woocommerce textarea:focus {
	outline: var(--ep-focus);
	outline-offset: 1px;
	border-color: var(--ep-vio-deep);
}
body.express-chrome-on .woocommerce label { font-size: var(--ep-t-sm); font-weight: var(--ep-w-semi); color: var(--ep-lt-ink); }

/* ---------------------------------------------------------------------------
   4. TABLES, the cart, order history, address book

   Woo's .shop_table is the cart. It is left as a table (screen readers and
   Woo's own quantity JS both depend on that structure) and given the card
   treatment instead.
   --------------------------------------------------------------------------- */
body.express-chrome-on .woocommerce table.shop_table {
	width: 100%;
	border: 1px solid var(--ep-lt-line);
	border-radius: var(--ep-r-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--ep-lt-card);
	font-size: var(--ep-t-sm);
	margin-bottom: var(--ep-s-6);
}
body.express-chrome-on .woocommerce table.shop_table th {
	background: #FBFAFE;
	text-align: left;
	font-weight: var(--ep-w-semi);
	color: var(--ep-lt-mut);
	font-size: var(--ep-t-xs);
	padding: var(--ep-s-3) var(--ep-s-4);
	border-bottom: 1px solid var(--ep-lt-line);
}
body.express-chrome-on .woocommerce table.shop_table td {
	padding: var(--ep-s-4);
	border-top: 1px solid var(--ep-lt-line-2);
	color: var(--ep-lt-ink-2);
	vertical-align: middle;
}
body.express-chrome-on .woocommerce table.shop_table .product-name a { color: var(--ep-lt-ink); font-weight: var(--ep-w-bold); }
body.express-chrome-on .woocommerce table.shop_table .amount,
body.express-chrome-on .woocommerce .order-total .amount {
	font-weight: var(--ep-w-bold);
	font-variant-numeric: tabular-nums;
	color: var(--ep-lt-ink);
}
body.express-chrome-on .woocommerce table.shop_table img { border-radius: var(--ep-r-sm); }

body.express-chrome-on .woocommerce .quantity input.qty {
	width: 74px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

body.express-chrome-on .woocommerce .cart_totals h2,
body.express-chrome-on .woocommerce-cart .cart-collaterals h2 {
	font-size: var(--ep-t-lg);
	font-weight: var(--ep-w-black);
	letter-spacing: var(--ep-track-sub);
	margin: 0 0 var(--ep-s-4);
	color: var(--ep-lt-ink);
}

/* ---------------------------------------------------------------------------
   5. MY ACCOUNT
   --------------------------------------------------------------------------- */
body.express-chrome-on .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 var(--ep-s-6);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ep-s-1);
}
body.express-chrome-on .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	min-height: var(--ep-tap);
	padding: 0 var(--ep-s-4);
	border-radius: var(--ep-r-md);
	color: var(--ep-lt-ink-2);
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-medium);
	text-decoration: none;
}
body.express-chrome-on .woocommerce-MyAccount-navigation li a:hover { background: var(--ep-lt-card); }
body.express-chrome-on .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--ep-lt-tint);
	color: var(--ep-vio-deep);
	font-weight: var(--ep-w-bold);
}

/* ---------------------------------------------------------------------------
   6. NOTICES

   Woo's three notice types, given the palette's semantic colours. The error
   colour matters most: a failed coupon or an out-of-stock message has to read
   as a problem, not as decoration.

   The success notice gets more than colour. It is the only confirmation a
   customer gets that the thing they just clicked worked, it renders in a band
   directly under the category nav where it was sitting one pixel off the bar,
   and it arrives on a fresh page load rather than as a live update, so nothing
   about its appearance signals that it is new. It is given room, a card, and a
   short entrance.
   --------------------------------------------------------------------------- */
body.express-chrome-on .woocommerce-notices-wrapper:not(:empty) { padding-top: var(--ep-s-6); }

body.express-chrome-on .woocommerce-message,
body.express-chrome-on .woocommerce-info,
body.express-chrome-on .woocommerce-error {
	border: 1px solid transparent;
	border-radius: var(--ep-r-md);
	padding: var(--ep-s-4) var(--ep-s-5);
	margin: var(--ep-s-6) 0 var(--ep-s-5);
	font-size: var(--ep-t-sm);
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--ep-s-4);
	flex-wrap: wrap;
}
body.express-chrome-on .woocommerce-message { background: var(--ep-lt-ok-bg); color: var(--ep-lt-ok); border-color: rgba(15,123,79,0.2); }
body.express-chrome-on .woocommerce-info { background: var(--ep-lt-tint); color: var(--ep-vio-deep); border-color: var(--ep-lt-tint-e); }
body.express-chrome-on .woocommerce-error { background: var(--ep-lt-err-bg); color: var(--ep-lt-err); border-color: rgba(179,38,30,0.2); }
body.express-chrome-on .woocommerce-info .button { margin-left: auto; }

/* Woo prints a tick/cross pseudo-element that lands mid-sentence once the
   notice is a flex row. */
body.express-chrome-on .woocommerce-message::before,
body.express-chrome-on .woocommerce-info::before,
body.express-chrome-on .woocommerce-error::before { display: none; }

/* --- The added to basket confirmation ------------------------------------ */

body.express-chrome-on .woocommerce-message {
	position: relative;
	overflow: hidden;
	padding: var(--ep-s-4) var(--ep-s-5) var(--ep-s-4) var(--ep-s-6);
	background: var(--ep-lt-card);
	border-color: rgba(15, 123, 79, 0.28);
	box-shadow: 0 10px 30px rgba(17, 12, 34, 0.07);
	color: var(--ep-lt-ink);
}
/* The rail. Colour on the edge rather than across the whole panel, so the
   product name inside it stays black on white and stays readable. */
body.express-chrome-on .woocommerce-message::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--ep-lt-ok);
}
body.express-chrome-on .woocommerce-message .message-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ep-s-3) var(--ep-s-5);
	width: 100%;
}
body.express-chrome-on .woocommerce-message .message-content {
	display: flex;
	align-items: center;
	gap: var(--ep-s-3);
	font-size: var(--ep-t-base);
	font-weight: var(--ep-w-semi);
	color: var(--ep-lt-ink);
}
/* The tick, in its own disc. */
body.express-chrome-on .woocommerce-message .message-content::before {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background:
		var(--ep-icon-tick-w) center / 14px 14px no-repeat,
		var(--ep-lt-ok);
}
/* Woo prints its own View cart link inside the sentence and the theme prints a
   second one in the button row. One of them has to go. */
body.express-chrome-on .woocommerce-message .message-content .button { display: none; }

body.express-chrome-on .woocommerce-message .buttons-wrapper {
	display: flex;
	align-items: center;
	gap: var(--ep-s-2);
	flex-wrap: wrap;
	margin-left: auto;
}
body.express-chrome-on .woocommerce-message .buttons-wrapper .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ep-control-sm);
	padding: 0 var(--ep-s-5);
	border-radius: var(--ep-r-md);
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-bold);
	text-decoration: none;
	border: 1px solid transparent;
}
body.express-chrome-on .woocommerce-message .buttons-wrapper .button.checkout {
	background: var(--ep-vio-deep) !important;
	color: #FFFFFF !important;
	box-shadow: 0 6px 18px rgba(109, 40, 217, 0.26);
}
body.express-chrome-on .woocommerce-message .buttons-wrapper .button.checkout:hover { background: #5B21B6 !important; }
body.express-chrome-on .woocommerce-message .buttons-wrapper .button.cart {
	background: var(--ep-lt-card) !important;
	color: var(--ep-lt-ink) !important;
	border-color: var(--ep-lt-line);
}
body.express-chrome-on .woocommerce-message .buttons-wrapper .button.cart:hover { border-color: var(--ep-lt-ink); }

/* The entrance. It runs once, on load, because that is the only moment the
   news is new. */
@keyframes ep-notice-in {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: none; }
}
@keyframes ep-notice-flash {
	0%   { box-shadow: 0 10px 30px rgba(17, 12, 34, 0.07), 0 0 0 0 rgba(15, 123, 79, 0.35); }
	100% { box-shadow: 0 10px 30px rgba(17, 12, 34, 0.07), 0 0 0 14px rgba(15, 123, 79, 0); }
}
body.express-chrome-on .woocommerce-message {
	animation:
		ep-notice-in var(--ep-dur-2) var(--ep-ease) both,
		ep-notice-flash 900ms var(--ep-ease) 160ms both;
}
/* The tick lands after the panel, not with it. */
@keyframes ep-tick-in {
	from { transform: scale(0.4); opacity: 0; }
	60%  { transform: scale(1.12); opacity: 1; }
	to   { transform: scale(1); opacity: 1; }
}
body.express-chrome-on .woocommerce-message .message-content::before {
	animation: ep-tick-in 420ms var(--ep-ease) 140ms both;
}

/* The header basket count, pulsed once when a page loads carrying this notice.
   The class is added by basket.js rather than by PHP, because the markup this
   sits in is served from a full page cache and PHP cannot tell, at render time,
   which visitor is arriving from an add to cart. */
@keyframes ep-bump {
	0%, 100% { transform: none; }
	30%      { transform: scale(1.35); }
	60%      { transform: scale(0.94); }
}
body.express-chrome-on .ep-act__count.is-bumped {
	animation: ep-bump 620ms var(--ep-ease) 240ms 2;
	transform-origin: center;
}

@media (max-width: 600px) {
	/* THE PHONE VERSION WAS 138px TALL AND CENTRED. Measured, not guessed.

	   The centring is inherited from a rule on .message-inner that this
	   stylesheet cannot see, because the sheet it lives in is cross origin and
	   cannot be read. So text-align is DECLARED here rather than left to the
	   cascade: the fix has to state the value it wants, not merely avoid
	   setting the wrong one, which is the same trap the cart reset hit.

	   Centred text with a tick disc pinned to its left reads as broken rather
	   than as centred, because the tick and the text disagree about where the
	   middle is. Left aligned, the disc and the first line share an edge. */
	body.express-chrome-on .woocommerce-message {
		padding: var(--ep-s-3) var(--ep-s-4) var(--ep-s-3) var(--ep-s-5);
	}
	body.express-chrome-on .woocommerce-message .message-inner {
		align-items: stretch;
		justify-content: flex-start;
		gap: var(--ep-s-3);
		text-align: left;
	}
	body.express-chrome-on .woocommerce-message .message-content {
		align-items: flex-start;
		gap: var(--ep-s-2);
		font-size: var(--ep-t-sm);
		line-height: 1.4;
		text-align: left;
	}
	/* The disc sat on the vertical centre of a two line sentence, which put it
	   level with the gap between the lines. Nudged to sit on the first line. */
	body.express-chrome-on .woocommerce-message .message-content::before {
		width: 22px;
		height: 22px;
		background-size: 12px 12px;
		margin-top: 1px;
	}
	body.express-chrome-on .woocommerce-message .buttons-wrapper {
		width: 100%;
		margin-left: 0;
		gap: var(--ep-s-2);
		flex-wrap: nowrap;
	}
	body.express-chrome-on .woocommerce-message .buttons-wrapper .button {
		flex: 1 1 0;
		min-width: 0;
		padding: 0 var(--ep-s-3);
		min-height: 42px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.express-chrome-on .woocommerce-message,
	body.express-chrome-on .woocommerce-message .message-content::before,
	body.express-chrome-on .ep-act__count.is-bumped { animation: none !important; }
}

/* ---------------------------------------------------------------------------
   7. THE SCREEN-READER SPANS

   Repeated from tokens.css for the theme-rendered surfaces, which sit outside
   the plugin's own roots. Without it every sale price in the cart and in order
   history reads "£215.00 Original price was: £215.00.£180.00Current price is:
   £180.00."
   --------------------------------------------------------------------------- */
body.express-chrome-on .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
   8. DESKTOP
   --------------------------------------------------------------------------- */
@media (min-width: 900px) {
	body.express-chrome-on .site-main,
	body.express-chrome-on .content-area {
		padding-top: var(--ep-s-12);
		padding-bottom: var(--ep-s-16);
	}
	body.express-chrome-on .entry-title,
	body.express-chrome-on .page-title { font-size: var(--ep-t-3xl); }
	body.express-chrome-on .woocommerce table.shop_table { font-size: var(--ep-t-base); }
}

/* ---------------------------------------------------------------------------
   THE REFERRAL BANNER

   The eprm-referrals plugin prints this on the basket and the checkout when a
   customer has arrived on someone's referral link. It shipped with a green or
   orange gradient in inline styles; Express_Shop_Refer strips the attribute so
   these can apply, which is the only way to reach markup a plugin echoes with
   its styling attached to the element.

   It carries woocommerce-message as well, so it already inherits the
   confirmation panel's shape. What is added here is the one thing that should
   differ: this is somebody's referral, not an order confirmation, so it reads
   in the brand violet rather than the success green.
   --------------------------------------------------------------------------- */
body.express-chrome-on .eprm-referral-notice.woocommerce-message {
	display: block;
	padding: var(--ep-s-4) var(--ep-s-5);
	background: var(--ep-lt-tint);
	border: 1px solid var(--ep-lt-tint-e);
	border-radius: var(--ep-r-md);
	box-shadow: none;
	color: var(--ep-lt-ink-2);
	font-size: var(--ep-t-sm);
	font-weight: var(--ep-w-regular);
	animation: none;
}
body.express-chrome-on .eprm-referral-notice.woocommerce-message::after { display: none; }
body.express-chrome-on .eprm-referral-notice strong { color: var(--ep-vio-deep); font-weight: var(--ep-w-bold); }
body.express-chrome-on .eprm-referral-notice strong:first-child {
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: var(--ep-t-xs);
}