/**
 * Hair Jétique — site-wide pieces.
 *
 * Loaded on every page, unlike hj-product.css. Keep it small.
 */

/* ------------------------------------------------------------- brand bar */

/* Closes the page above the footer: logo, then social icons. The gap it fills
   was previously empty white space. */

.hj-brandbar {
	padding: 54px 20px 46px;
	background: #ffffff;
	text-align: center;
}

.hj-brandbar__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.hj-brandbar__logo {
	display: inline-block;
	line-height: 0;
	border: 0;
}

.hj-brandbar__logo img {
	width: auto;
	max-width: 300px;
	height: auto;
	max-height: 96px;
}

/* Fallback when no logo is set in the Customizer. */
.hj-brandbar__word {
	display: inline-block;
	color: #30221c;
	font-size: clamp( 28px, 6vw, 52px );
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}

.hj-brandbar__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.hj-brandbar__social li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 44px target so it is comfortable on a phone, with the glyph at 22px inside. */
.hj-brandbar__icon,
.hj-brandbar__icon:hover,
.hj-brandbar__icon:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: #30221c;
	background: transparent;
	text-decoration: none;
	transition:
		color 0.22s cubic-bezier( 0.22, 1, 0.36, 1 ),
		background-color 0.22s cubic-bezier( 0.22, 1, 0.36, 1 ),
		transform 0.22s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.hj-brandbar__icon:hover,
.hj-brandbar__icon:focus {
	color: #ffffff;
	background: #c89148;
	transform: translateY( -2px );
}

.hj-brandbar__icon:focus-visible {
	outline: 2px solid #c89148;
	outline-offset: 2px;
}

@media ( max-width: 768px ) {
	.hj-brandbar {
		padding: 36px 16px 30px;
	}

	.hj-brandbar__logo img {
		max-width: 220px;
		max-height: 74px;
	}

	.hj-brandbar__social {
		margin-top: 18px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.hj-brandbar__icon,
	.hj-brandbar__icon:hover,
	.hj-brandbar__icon:focus {
		transition: none;
		transform: none;
	}
}

/* ------------------------------------------------------------- whatsapp */

/* Sits above Astra's back-to-top control rather than beside it, so the two
   never overlap on a narrow screen. Collapsed to a circle on mobile, where the
   label would crowd the add-to-cart bar. */

.hj-wa {
	position: fixed;
	right: 20px;
	bottom: 84px;
	z-index: 9990;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px 12px 14px;
	border-radius: 999px;
	background: #25d366;
	color: #ffffff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, .18 ), 0 1px 2px rgba( 0, 0, 0, .12 );
	transition: transform .22s cubic-bezier( .22, 1, .36, 1 ), box-shadow .22s ease;
}

.hj-wa:hover,
.hj-wa:focus {
	color: #ffffff;
	transform: translateY( -2px );
	box-shadow: 0 8px 20px rgba( 0, 0, 0, .22 ), 0 1px 2px rgba( 0, 0, 0, .12 );
}

.hj-wa:focus-visible {
	outline: 2px solid #30221c;
	outline-offset: 3px;
}

.hj-wa__icon {
	display: inline-flex;
	flex: 0 0 auto;
}

@media ( max-width: 768px ) {
	.hj-wa {
		right: 16px;
		bottom: 78px;
		padding: 14px;
	}

	/* Icon only — the label would sit under the thumb on a phone. */
	.hj-wa__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
	}
}

/* WooCommerce's sticky add-to-cart bar owns the bottom of the screen when it
   is showing; lift clear of it. */
@media ( max-width: 768px ) {
	body.woocommerce-page.single-product .hj-wa {
		bottom: 140px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.hj-wa,
	.hj-wa:hover,
	.hj-wa:focus {
		transition: none;
		transform: none;
	}
}

/* ------------------------------------------------------------- wholesale */

.hj-wholesale {
	max-width: 860px;
	margin: 0 auto;
}

/* The dark panel is the reference's treatment: the contact detail is the one
   thing a wholesale buyer is looking for, so it gets the contrast. */
.hj-wholesale__panel {
	padding: 32px 30px;
	background: #30221c;
	border: 1px solid #c89148;
	border-radius: 12px;
	text-align: center;
}

.hj-wholesale__title {
	margin: 0 0 10px;
	color: #ffffff;
	font-size: clamp( 22px, 3.4vw, 28px );
	line-height: 1.2;
}

.hj-wholesale__intro {
	margin: 0 auto 18px;
	max-width: 54ch;
	color: #e6ddd2;
	font-size: 15.5px;
	line-height: 1.65;
}

.hj-wholesale__email {
	display: inline-block;
	color: #e8b563;
	font-size: clamp( 17px, 2.6vw, 21px );
	font-weight: 700;
	letter-spacing: .01em;
	text-decoration: none;
	border-bottom: 1px solid rgba( 232, 181, 99, .5 );
	overflow-wrap: anywhere;
	transition: color .2s ease, border-color .2s ease;
}

.hj-wholesale__email:hover,
.hj-wholesale__email:focus {
	color: #ffffff;
	border-bottom-color: #ffffff;
}

.hj-wholesale__cta {
	margin: 18px auto 0;
	max-width: 56ch;
	color: #c9bdb1;
	font-size: 14px;
	line-height: 1.6;
}

.hj-wholesale__subtitle {
	margin: 40px 0 14px;
	color: #30221c;
	font-size: 19px;
	line-height: 1.3;
}

.hj-wholesale__terms {
	margin: 0;
	padding-left: 26px;
	counter-reset: none;
}

.hj-wholesale__terms li {
	margin-bottom: 12px;
	color: #4a4038;
	font-size: 15px;
	line-height: 1.7;
}

.hj-wholesale__terms li::marker {
	color: #c89148;
	font-weight: 700;
}

@media ( max-width: 768px ) {
	.hj-wholesale__panel { padding: 24px 18px; }
	.hj-wholesale__terms { padding-left: 22px; }
	.hj-wholesale__terms li { font-size: 14.5px; }
}

/* ----------------------------------------------------------------- about */

.hj-about {
	max-width: 720px;
	margin: 0 auto;
}

.hj-about__block + .hj-about__block {
	margin-top: 44px;
	padding-top: 40px;
	border-top: 1px solid #ece4da;
}

.hj-about__block h2 {
	margin: 0 0 16px;
	color: #30221c;
	font-size: clamp( 24px, 4vw, 32px );
	line-height: 1.15;
}

.hj-about__block p {
	margin: 0 0 16px;
	color: #4a4038;
	font-size: 16.5px;
	line-height: 1.8;
}

.hj-about__block p:last-child { margin-bottom: 0; }

.hj-about__block strong { color: #30221c; }

.hj-about__cta a {
	display: inline-block;
	margin-top: 6px;
	padding: 12px 26px;
	background: #30221c;
	color: #ffffff;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .22s ease;
}

.hj-about__cta a:hover,
.hj-about__cta a:focus {
	background: #c89148;
	color: #ffffff;
}

@media ( max-width: 768px ) {
	.hj-about__block + .hj-about__block { margin-top: 32px; padding-top: 28px; }
	.hj-about__block p { font-size: 16px; }
}

/* ---------------------------------------------------------------- footer */

/* The empty dark void in the footer was never broken CSS. Column two holds the
   full navigation menu — eleven lines once Legal's four children are counted —
   while the other three columns stop at three or four. That height difference
   stretches the background.
   Running the link list in two columns roughly halves it. The catalogued
   four-column rebuild still needs the client to say which links exist. */

.site-primary-footer-wrap .footer-widget-area-inner > * + * {
	margin-top: 14px;
}

.site-primary-footer-wrap .menu {
	columns: 2;
	column-gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-primary-footer-wrap .menu > li {
	break-inside: avoid;
	margin: 0 0 9px;
	list-style: none;
}

.site-primary-footer-wrap .menu a {
	text-decoration: none;
	line-height: 1.5;
	transition: color .2s ease;
}

.site-primary-footer-wrap .menu a:hover,
.site-primary-footer-wrap .menu a:focus {
	color: #c89148;
}

/* Children read as a group rather than a long indented run. */
.site-primary-footer-wrap .menu .sub-menu {
	margin: 8px 0 0;
	padding: 0 0 0 12px;
	border-left: 1px solid rgba( 200, 145, 72, .38 );
	list-style: none;
}

.site-primary-footer-wrap .menu .sub-menu li {
	margin: 0 0 6px;
	list-style: none;
}

.site-primary-footer-wrap .menu .sub-menu a {
	font-size: .95em;
	opacity: .88;
}

/* Astra draws a dropdown arrow for submenu parents; in a footer the children
   are always visible, so it points at nothing. */
.site-primary-footer-wrap .menu .ast-header-navigation-arrow,
.site-primary-footer-wrap .menu .dropdown-menu-toggle {
	display: none;
}

@media ( max-width: 920px ) {
	.site-primary-footer-wrap .menu {
		columns: 1;
	}
}

/* ----------------------------------------------------- footer columns */

/* Four catalogued columns replacing the single tall navigation menu. The
   headings carry a short gold rule, as the reference does. */

.hj-fcol {
	margin: 0;
}

.hj-fcol__title {
	position: relative;
	margin: 0 0 18px;
	padding-bottom: 10px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.3;
}

.hj-fcol__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 2px;
	background: #c89148;
}

.hj-fcol__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 9px;
}

.hj-fcol__list li {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.55;
}

.hj-fcol__list a {
	text-decoration: none;
	transition: color .2s ease, padding-left .2s ease;
}

.hj-fcol__list a:hover,
.hj-fcol__list a:focus {
	color: #c89148;
	padding-left: 3px;
}

/* Contact column: a label above each value rather than a run-on line. */
.hj-fcol__list--plain {
	gap: 16px;
}

.hj-fcol__label {
	display: block;
	margin-bottom: 3px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .62;
}

.hj-fcol__hours {
	display: block;
	line-height: 1.6;
}

.hj-fcol--company a {
	overflow-wrap: anywhere;
}

@media ( max-width: 920px ) {
	.hj-fcol {
		margin-bottom: 30px;
	}

	.hj-fcol__title {
		margin-bottom: 14px;
	}
}

/* ------------------------------------------------------------------ faq */

.hj-faq {
	max-width: 760px;
	margin: 0 auto;
}

.hj-faq__group + .hj-faq__group {
	margin-top: 40px;
}

.hj-faq__grouptitle {
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid #f1ebe3;
	color: #30221c;
	font-size: 19px;
	line-height: 1.3;
}

.hj-faq__item {
	border-bottom: 1px solid #f3ede5;
}

.hj-faq__q {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 2px;
	color: #30221c;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	list-style: none;
	cursor: pointer;
	transition: color .2s ease;
}

.hj-faq__q::-webkit-details-marker { display: none; }

.hj-faq__q:hover { color: #c89148; }

.hj-faq__q:focus-visible {
	outline: 2px solid #c89148;
	outline-offset: -2px;
}

.hj-faq__q > span:first-child { flex: 1 1 auto; }

.hj-faq__chev {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 3px;
	color: #c89148;
	transition: transform .25s cubic-bezier( .22, 1, .36, 1 );
}

.hj-faq__item[open] .hj-faq__chev { transform: rotate( 90deg ); }

.hj-faq__a {
	padding: 0 2px 18px;
	color: #4a4038;
	font-size: 15.5px;
	line-height: 1.75;
}

.hj-faq__a p { margin: 0 0 10px; }
.hj-faq__a p:last-child { margin-bottom: 0; }

.hj-faq__more {
	margin-top: 36px;
	padding-top: 20px;
	border-top: 1px solid #ece4da;
	color: #6f6259;
	font-size: 15px;
}

.hj-faq__more a {
	color: #30221c;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hj-faq__more a:hover { color: #c89148; }

/* -------------------------------------------------------------- sitemap */

.hj-sitemap {
	display: grid;
	gap: 36px;
	max-width: 860px;
	margin: 0 auto;
}

@media ( min-width: 760px ) {
	.hj-sitemap { grid-template-columns: 1fr 1fr; }
	.hj-sitemap__group:last-child { grid-column: 1 / -1; }
}

.hj-sitemap__group h2 {
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid #f1ebe3;
	color: #30221c;
	font-size: 17px;
	line-height: 1.3;
}

.hj-sitemap__group ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.hj-sitemap__group li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	list-style: none;
	line-height: 1.5;
}

.hj-sitemap__group a {
	color: #4a4038;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}

.hj-sitemap__group a:hover,
.hj-sitemap__group a:focus {
	color: #c89148;
	border-bottom-color: #c89148;
}

.hj-sitemap__count {
	font-size: 12px;
	color: #9a8f84;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- royalty */

/* Gloss black and metallic gold, per the client's design direction. The tier
   metals are real gradients rather than flat fills — a flat brown does not read
   as bronze, and the whole point is that this should not feel like a
   supermarket loyalty card. */

.hj-roy {
	--roy-ink: #f4ece1;
	--roy-gold: #d9a441;
	--roy-bronze: linear-gradient( 135deg, #b87333, #e0a267 50%, #8c5524 );
	--roy-silver: linear-gradient( 135deg, #9a9a9a, #e8e8e8 50%, #7d7d7d );
	--roy-goldm: linear-gradient( 135deg, #b8860b, #f5d67a 50%, #9a6f0a );
	--roy-plat: linear-gradient( 135deg, #b7b9bd, #ffffff 50%, #9ea1a6 );

	max-width: 980px;
	margin: 0 auto;
}

.hj-roy__notice {
	margin: 0 0 22px;
	padding: 13px 16px;
	border-radius: 8px;
	border-left: 3px solid #c89148;
	background: #f6ebd9;
	color: #30221c;
	font-size: 15px;
}

.hj-roy__notice--ok { border-left-color: #3f6b4a; background: #e7efe8; }
.hj-roy__notice--warn { border-left-color: #96412c; background: #f7e6e0; }

.hj-roy__hero {
	padding: 44px 28px;
	border-radius: 16px;
	background: radial-gradient( circle at 20% 0%, #2a2118, #12100d 65% );
	color: var( --roy-ink );
	text-align: center;
}

.hj-roy__eyebrow {
	margin: 0 0 10px;
	color: var( --roy-gold );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.hj-roy__title {
	margin: 0 0 14px;
	color: #ffffff;
	font-size: clamp( 26px, 5vw, 40px );
	line-height: 1.1;
}

.hj-roy__lede {
	max-width: 52ch;
	margin: 0 auto;
	color: #cabfb2;
	font-size: 16px;
	line-height: 1.7;
}

.hj-roy__tiers {
	display: grid;
	gap: 14px;
	margin: 22px 0 0;
}

@media ( min-width: 700px ) {
	.hj-roy__tiers { grid-template-columns: repeat( 4, 1fr ); }
}

.hj-roy__tier {
	padding: 22px 18px;
	border-radius: 14px;
	background: #16130f;
	border: 1px solid #2c251c;
	color: var( --roy-ink );
	text-align: center;
}

.hj-roy__tier h3 {
	margin: 8px 0 10px;
	font-size: 17px;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.hj-roy__crown:not(.hj-roy__crown--img) {
	display: block;
	font-size: 30px;
	line-height: 1;
	background: var( --roy-goldm );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.hj-roy__tier--bronze   .hj-roy__crown:not(.hj-roy__crown--img) { background: var( --roy-bronze ); -webkit-background-clip: text; background-clip: text; }
.hj-roy__tier--silver   .hj-roy__crown:not(.hj-roy__crown--img) { background: var( --roy-silver ); -webkit-background-clip: text; background-clip: text; }
.hj-roy__tier--platinum .hj-roy__crown:not(.hj-roy__crown--img) { background: var( --roy-plat );   -webkit-background-clip: text; background-clip: text; }

.hj-roy__req { margin: 0 0 10px; color: #a99e91; font-size: 13.5px; line-height: 1.5; }
.hj-roy__reward { margin: 0 0 6px; font-size: 15px; }
.hj-roy__reward strong { color: var( --roy-gold ); }
.hj-roy__band { margin: 0; color: #8d8377; font-size: 12.5px; }
.hj-roy__band .amount { color: #8d8377; }

.hj-roy__rules { margin-top: 34px; }
.hj-roy__rules h3 { margin: 0 0 12px; color: #30221c; font-size: 19px; }
.hj-roy__rules ul { margin: 0; padding-left: 22px; }
.hj-roy__rules li { margin-bottom: 9px; color: #4a4038; line-height: 1.7; }

/* ------------------------------------------------------------ the CTAs */

.hj-roy__cta {
	margin-top: 34px;
	padding: 28px 24px;
	border-radius: 14px;
	border: 1px solid #e6d8c6;
	background: #fdfaf6;
	text-align: center;
}

.hj-roy__cta h3 { margin: 0 0 10px; color: #30221c; font-size: 21px; }
.hj-roy__cta p { margin: 0 0 14px; color: #4a4038; }
.hj-roy__small { font-size: 13.5px; color: #7a6f64; }

.hj-roy__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; margin-top: 4px; }

.hj-roy__btn,
.hj-roy__btn:hover,
.hj-roy__btn:focus {
	display: inline-block;
	padding: 13px 30px;
	border: 0;
	border-radius: 999px;
	background: #30221c;
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .22s ease;
}

.hj-roy__btn:hover, .hj-roy__btn:focus { background: #c89148; }

.hj-roy__link { color: #30221c; font-size: 14.5px; text-decoration: underline; text-underline-offset: 4px; }
.hj-roy__link:hover { color: #c89148; }

.hj-roy__unlock { font-size: 26px; font-weight: 700; color: #30221c; margin-bottom: 10px; }

.hj-roy__bar {
	height: 10px;
	margin: 0 auto 14px;
	max-width: 420px;
	border-radius: 999px;
	background: #ece2d5;
	overflow: hidden;
}

.hj-roy__bar span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient( 90deg, #b87333, #d9a441 );
	transition: width .5s cubic-bezier( .22, 1, .36, 1 );
}

.hj-roy__ack {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	max-width: 56ch;
	margin: 0 auto 18px;
	text-align: left;
	font-size: 14.5px;
	line-height: 1.6;
	color: #4a4038;
}

.hj-roy__ack input { margin-top: 4px; flex: 0 0 auto; }

/* ------------------------------------------------------------ dashboard */

.hj-roy--dash { max-width: none; }

.hj-roy__dashhead {
	padding: 26px 24px;
	border-radius: 14px;
	background: radial-gradient( circle at 15% 0%, #2a2118, #12100d 70% );
	color: var( --roy-ink );
}

.hj-roy__dashhead h2 { margin: 0 0 12px; color: #ffffff; font-size: clamp( 22px, 4vw, 30px ); }

.hj-roy__badge {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 999px;
	border: 1px solid rgba( 217, 164, 65, .5 );
	background: rgba( 217, 164, 65, .12 );
	color: var( --roy-gold );
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
}

.hj-roy__standing { margin: 0; }

.hj-roy__progress { margin: 26px 0; text-align: center; }
.hj-roy__count { margin: 0 0 12px; font-size: 18px; font-weight: 600; color: #30221c; }
.hj-roy__next { margin: 0 0 6px; color: #4a4038; }
.hj-roy__deadline { margin: 0; font-size: 14px; color: #7a6f64; }
.hj-roy__days { display: block; margin-top: 4px; font-weight: 600; color: #30221c; }
.hj-roy__days--past { color: #8a6318; font-weight: 500; }
.hj-roy__complete { text-align: center; font-size: 17px; color: #30221c; }

.hj-roy__collection h3,
.hj-roy__wallet h3,
.hj-roy__timeline h3 {
	margin: 32px 0 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid #f1ebe3;
	color: #30221c;
	font-size: 17px;
}

.hj-roy__crowns { display: grid; gap: 12px; grid-template-columns: repeat( 2, 1fr ); }

@media ( min-width: 640px ) {
	.hj-roy__crowns { grid-template-columns: repeat( 4, 1fr ); }
}

.hj-roy__crownitem {
	padding: 18px 12px;
	border-radius: 12px;
	background: #16130f;
	border: 1px solid #2c251c;
	color: #7d7368;
	text-align: center;
	opacity: .55;
}

.hj-roy__crownitem.is-earned { opacity: 1; color: var( --roy-ink ); border-color: rgba( 217, 164, 65, .45 ); }
.hj-roy__crownitem strong { display: block; margin: 6px 0 2px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.hj-roy__crownstate { font-size: 12px; }
.hj-roy__crownitem--bronze.is-earned   .hj-roy__crown:not(.hj-roy__crown--img) { background: var( --roy-bronze ); -webkit-background-clip: text; background-clip: text; }
.hj-roy__crownitem--silver.is-earned   .hj-roy__crown:not(.hj-roy__crown--img) { background: var( --roy-silver ); -webkit-background-clip: text; background-clip: text; }
.hj-roy__crownitem--platinum.is-earned .hj-roy__crown:not(.hj-roy__crown--img) { background: var( --roy-plat );   -webkit-background-clip: text; background-clip: text; }
.hj-roy__crownitem:not(.is-earned) .hj-roy__crown { background: none; color: #4d453c; -webkit-text-fill-color: #4d453c; }

.hj-roy__vouchers { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }

.hj-roy__voucher {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 16px 18px;
	border: 1px solid #e6d8c6;
	border-radius: 12px;
	background: #fdfaf6;
	list-style: none;
}

.hj-roy__voucher--redeemed,
.hj-roy__voucher--expired { opacity: .6; }

.hj-roy__vpercent {
	flex: 0 0 auto;
	min-width: 62px;
	padding: 10px;
	border-radius: 10px;
	background: #30221c;
	color: #d9a441;
	font-size: 19px;
	font-weight: 700;
	text-align: center;
}

.hj-roy__vbody { flex: 1 1 auto; display: grid; gap: 3px; font-size: 14px; color: #4a4038; }
.hj-roy__vbody strong { color: #30221c; font-size: 15px; }
.hj-roy__vcode code { background: #f1ebe3; padding: 2px 7px; border-radius: 4px; font-size: 13px; }

.hj-roy__vstatus {
	flex: 0 0 auto;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #7a6f64;
}

.hj-roy__voucher--available .hj-roy__vstatus { color: #3f6b4a; }

.hj-roy__timeline ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.hj-roy__timeline li {
	display: flex;
	gap: 16px;
	padding-left: 16px;
	border-left: 2px solid #ece2d5;
	list-style: none;
	line-height: 1.5;
}

.hj-roy__tdate { flex: 0 0 auto; min-width: 108px; font-size: 13px; color: #8d8377; font-variant-numeric: tabular-nums; }
.hj-roy__tnote { font-size: 14.5px; color: #4a4038; }
.hj-roy__empty { color: #7a6f64; }

@media ( max-width: 640px ) {
	.hj-roy__hero { padding: 32px 18px; }
	.hj-roy__voucher { flex-wrap: wrap; }
	.hj-roy__timeline li { flex-direction: column; gap: 2px; }
	.hj-roy__tdate { min-width: 0; }
}

@media ( prefers-reduced-motion: reduce ) {
	.hj-roy__bar span { transition: none; }
}

/* Gold / Platinum benefits — a promise a person fulfils, so each carries its
   own state rather than being ticked off by the code. */
.hj-roy__benefitlist { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.hj-roy__benefitlist li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 16px;
	border: 1px solid #e6d8c6;
	border-radius: 10px;
	background: #fdfaf6;
	list-style: none;
}

.hj-roy__bname { color: #30221c; font-size: 14.5px; }

.hj-roy__bstate {
	flex: 0 0 auto;
	padding: 3px 11px;
	border-radius: 999px;
	background: #f1ebe3;
	color: #6f6259;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hj-roy__bstate--available { background: #e7efe8; color: #3f6b4a; }
.hj-roy__bstate--booking   { background: #f7eed9; color: #8a6318; }
.hj-roy__bstate--completed,
.hj-roy__bstate--redeemed,
.hj-roy__bstate--claimed   { background: #ece2d5; color: #7a6f64; }

@media ( max-width: 560px ) {
	.hj-roy__benefitlist li { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* --------------------------------------------------------- royalty badge */

.hj-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 16px;
	margin: 0 0 18px;
	border-radius: 999px;
	background: linear-gradient( 135deg, #1c1712, #2c2419 );
	border: 1px solid rgba( 217, 164, 65, .45 );
	color: #f4ece1;
	font-size: 13.5px;
	line-height: 1;
	text-decoration: none;
	transition: border-color .22s ease, transform .22s ease;
}

.hj-badge:hover,
.hj-badge:focus { color: #ffffff; border-color: #d9a441; transform: translateY( -1px ); }

.hj-badge__hi { color: #c3b7a8; }
.hj-badge__crown { color: #d9a441; font-size: 15px; }
.hj-badge__tier { font-weight: 700; letter-spacing: .08em; color: #d9a441; }

.hj-badge__next {
	padding-left: 9px;
	margin-left: 2px;
	border-left: 1px solid rgba( 244, 236, 225, .22 );
	color: #b3a695;
	font-size: 12.5px;
}

.hj-badge--bronze   .hj-badge__tier { color: #e0a267; }
.hj-badge--silver   .hj-badge__tier { color: #dcdcdc; }
.hj-badge--platinum .hj-badge__tier { color: #f0f1f3; }

.hj-badge--prompt {
	background: #fdfaf6;
	border-color: #e6d8c6;
	color: #30221c;
}

.hj-badge--prompt .hj-badge__tier { color: #30221c; font-weight: 600; letter-spacing: 0; }
.hj-badge--prompt .hj-badge__crown { color: #c89148; }

.hj-badgestrip {
	padding: 8px 20px;
	background: #f6f3ef;
	border-bottom: 1px solid #ece2d5;
	text-align: right;
}

.hj-badgestrip .hj-badge { margin: 0; }

@media ( max-width: 560px ) {
	.hj-badge { flex-wrap: wrap; gap: 6px; padding: 8px 13px; font-size: 12.5px; }
	.hj-badge__next { padding-left: 0; margin-left: 0; border-left: 0; width: 100%; }
	.hj-badgestrip { text-align: center; }
}

@media ( prefers-reduced-motion: reduce ) {
	.hj-badge, .hj-badge:hover, .hj-badge:focus { transition: none; transform: none; }
}

/* =================================================== client review fixes */

/* The header cart total was breaking one character per line — currency symbol,
   0, dot, 0, 0 stacked vertically down the header. The element sits in a narrow
   header column and nothing stopped the price from wrapping inside it. */
.ast-site-header-cart .ast-woo-header-cart-info-wrap,
.ast-site-header-cart .ast-woo-header-cart-total,
.ast-site-header-cart .woocommerce-Price-amount,
.ast-edd-site-header-cart .ast-edd-header-cart-info-wrap {
	white-space: nowrap !important;
	width: auto !important;
	max-width: none !important;
	word-break: normal !important;
	flex: 0 0 auto;
}

.ast-site-header-cart .cart-container,
.ast-site-header-cart .ast-addon-cart-wrap {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	white-space: nowrap !important;
}

/* Tier names were invisible on the Royalty page: the cards are dark, but Astra
   sets an explicit dark colour on h3, and a heading does not inherit its
   parent's colour when the theme has set one. */
.hj-roy__tier h3,
.hj-roy__tier .hj-roy__req,
.hj-roy__tier .hj-roy__band {
	color: #f4ece1 !important;
}

.hj-roy__tier h3 {
	color: #ffffff !important;
	font-weight: 700;
}

.hj-roy__tier .hj-roy__req { color: #c9bcab !important; }
.hj-roy__tier .hj-roy__band,
.hj-roy__tier .hj-roy__band .amount,
.hj-roy__tier .hj-roy__band .woocommerce-Price-currencySymbol { color: #b3a695 !important; }
.hj-roy__tier .hj-roy__reward { color: #f4ece1 !important; }
.hj-roy__tier .hj-roy__reward strong { color: #e8b563 !important; }

/* Crown collection, as asked for: locked sits in a deep brown box with the
   crown greyed inside it; earned loses the box entirely and the crown is lit. */
.hj-roy__crownitem {
	background: #2b2118;
	border: 1px solid #3d3123;
	opacity: 1;
	transition: background-color .3s ease, box-shadow .3s ease;
}

.hj-roy__crownitem .hj-roy__crown {
	background: none !important;
	-webkit-text-fill-color: #6d6154;
	color: #6d6154;
	filter: none;
}

.hj-roy__crownitem strong,
.hj-roy__crownitem .hj-roy__crownstate { color: #8d8377; }

.hj-roy__crownitem.is-earned {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.hj-roy__crownitem.is-earned .hj-roy__crown {
	-webkit-text-fill-color: initial;
	filter: drop-shadow( 0 0 14px rgba( 217, 164, 65, .55 ) );
}

.hj-roy__crownitem.is-earned strong { color: #30221c; }
.hj-roy__crownitem.is-earned .hj-roy__crownstate { color: #8a6318; font-weight: 600; }
.hj-roy__crownitem--bronze.is-earned   .hj-roy__crown:not(.hj-roy__crown--img) { background: var( --roy-bronze ) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hj-roy__crownitem--silver.is-earned   .hj-roy__crown:not(.hj-roy__crown--img) { background: var( --roy-silver ) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hj-roy__crownitem--gold.is-earned     .hj-roy__crown:not(.hj-roy__crown--img) { background: var( --roy-goldm ) !important;  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hj-roy__crownitem--platinum.is-earned .hj-roy__crown:not(.hj-roy__crown--img) { background: var( --roy-plat ) !important;   -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* WhatsApp: clear of the floating basket rather than beside it. */
.hj-wa { bottom: 132px; }

@media ( max-width: 768px ) {
	.hj-wa { bottom: 124px; }
	body.woocommerce-page.single-product .hj-wa { bottom: 178px; }
}

/* ------------------------------------------------- crown artwork (client) */

/* The supplied crowns are standalone icons with no badge or background baked
   in, and the tier label stays as live text — so the label is styled here, not
   drawn into the image. */

.hj-roy__crown--img {
	display: block;
	line-height: 0;
}

.hj-roy__crown--img img {
	width: auto;
	height: 62px;
	max-width: 100%;
	margin: 0 auto;
	display: block;
	object-fit: contain;
}

/* Platinum reads as the top of the collection: the hand-off asks for 8–12%
   larger where there is room. */
.hj-roy__tier--platinum .hj-roy__crown--img img,
.hj-roy__crownitem--platinum .hj-roy__crown--img img {
	height: 69px;
}

/* Locked: the artwork drains of colour and sits back, rather than being
   swapped for a different picture. */
.hj-roy__crown--img.is-locked img {
	filter: grayscale( 1 ) brightness( .78 ) contrast( .85 );
	opacity: .5;
}

.hj-roy__crownitem.is-earned .hj-roy__crown--img img {
	filter: drop-shadow( 0 4px 16px rgba( 217, 164, 65, .45 ) );
}

.hj-roy__crownitem--platinum.is-earned .hj-roy__crown--img img,
.hj-roy__crownitem--silver.is-earned .hj-roy__crown--img img {
	filter: drop-shadow( 0 4px 16px rgba( 208, 214, 222, .5 ) );
}

.hj-roy__crownitem .hj-roy__crown--img { margin-bottom: 4px; }

@media ( max-width: 640px ) {
	.hj-roy__crown--img img { height: 52px; }
	.hj-roy__tier--platinum .hj-roy__crown--img img,
	.hj-roy__crownitem--platinum .hj-roy__crown--img img { height: 58px; }
}

/* ================================================= custom wig builder */

.hj-wig { max-width: 1160px; margin: 0 auto; }

.hj-wig__grid { display: grid; gap: 28px; }

@media ( min-width: 900px ) {
	.hj-wig__grid { grid-template-columns: minmax(0,1fr) 330px; align-items: start; }
	.hj-wig__summary { position: sticky; top: 24px; }
}

.hj-wig__step {
	padding: 22px 0;
	border-bottom: 1px solid #ece4da;
}

.hj-wig__step:first-child { padding-top: 0; }

.hj-wig__step h3 {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 12px;
	color: #30221c;
	font-size: 18px;
}

.hj-wig__step h3 span {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #30221c;
	color: #e8b563;
	font-size: 13px;
	font-weight: 700;
}

.hj-wig__hint { margin: -6px 0 12px; color: #7a6f64; font-size: 14px; }

.hj-wig__choices { display: flex; flex-wrap: wrap; gap: 9px; }

.hj-wig__choice { position: relative; cursor: pointer; }
.hj-wig__choice input { position: absolute; opacity: 0; width: 0; height: 0; }

.hj-wig__choice > span {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 11px 17px;
	border: 1px solid #e0d6c8;
	border-radius: 999px;
	background: #ffffff;
	color: #30221c;
	font-size: 14.5px;
	line-height: 1.2;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.hj-wig__choice > span em { font-style: normal; font-size: 12.5px; color: #8d8377; }

.hj-wig__choice:hover > span { border-color: #c89148; }

.hj-wig__choice input:checked + span {
	background: #30221c;
	border-color: #30221c;
	color: #ffffff;
}

.hj-wig__choice input:checked + span em { color: #e8b563; }

.hj-wig__choice input:focus-visible + span { outline: 2px solid #c89148; outline-offset: 2px; }

/* Out of stock stays visible and unselectable, as specified. */
.hj-wig__choice.is-out { cursor: not-allowed; }
.hj-wig__choice.is-out > span { opacity: .45; background: #f4efe9; text-decoration: line-through; }
.hj-wig__choice.is-out > span em { text-decoration: none; color: #96412c; }

.hj-wig__choices--compact .hj-wig__choice > span { padding: 9px 14px; font-size: 14px; }

/* colours */
.hj-wig__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px,1fr)); gap: 10px; }

.hj-wig__swatch { position: relative; cursor: pointer; text-align: center; }
.hj-wig__swatch input { position: absolute; opacity: 0; width: 0; height: 0; }

.hj-wig__swatchbody {
	display: block;
	aspect-ratio: 1;
	border: 2px solid #e0d6c8;
	border-radius: 10px;
	background: #faf7f3;
	overflow: hidden;
	transition: border-color .2s ease, transform .2s ease;
}

.hj-wig__swatchbody img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hj-wig__swatchph {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #9a8f84;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
}

.hj-wig__swatch:hover .hj-wig__swatchbody { border-color: #c89148; }

.hj-wig__swatch input:checked + .hj-wig__swatchbody {
	border-color: #30221c;
	transform: translateY( -2px );
	box-shadow: 0 4px 12px rgba( 48, 34, 28, .18 );
}

.hj-wig__swatchlabel { display: block; margin-top: 5px; font-size: 11.5px; color: #6f6259; }
.hj-wig__swatch input:checked ~ .hj-wig__swatchlabel { color: #30221c; font-weight: 700; }

/* details */
.hj-wig__fields { display: grid; gap: 14px; }

@media ( min-width: 620px ) { .hj-wig__fields { grid-template-columns: 1fr 1fr; } }

.hj-wig__fields label, .hj-wig__notes { display: block; }
.hj-wig__fields span, .hj-wig__notes span { display: block; margin-bottom: 5px; font-size: 14px; color: #4a4038; }

.hj-wig__fields input, .hj-wig__notes textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid #e0d6c8;
	border-radius: 8px;
	background: #fff;
	font-size: 15px;
	color: #30221c;
}

.hj-wig__notes { margin-top: 14px; }

.hj-wig__fields input:focus, .hj-wig__notes textarea:focus { outline: 2px solid #c89148; outline-offset: 1px; border-color: #c89148; }

.hj-wig__terms label { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.6; color: #4a4038; }
.hj-wig__terms input { margin-top: 4px; }

/* summary */
.hj-wig__summaryinner {
	padding: 22px;
	border: 1px solid #e6d8c6;
	border-radius: 14px;
	background: #fdfaf6;
}

.hj-wig__summaryinner h3 { margin: 0 0 14px; color: #30221c; font-size: 17px; }

.hj-wig__summaryinner dl { margin: 0; }

.hj-wig__srow {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid #f0e8dd;
	font-size: 14px;
}

.hj-wig__srow dt { color: #7a6f64; margin: 0; }
.hj-wig__srow dd { margin: 0; color: #b8ada1; text-align: right; }
.hj-wig__srow dd.is-set { color: #30221c; font-weight: 600; }

.hj-wig__weight {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 14px 0;
	padding-top: 12px;
	border-top: 2px solid #ece2d5;
	font-size: 14px;
	color: #7a6f64;
}

.hj-wig__weight strong { font-size: 21px; color: #b8ada1; font-variant-numeric: tabular-nums; }
.hj-wig__weight strong.is-set { color: #30221c; }

.single-product .hj-wig__submit, .hj-wig__submit {
	display: block;
	width: 100%;
	padding: 14px;
	border: 0;
	border-radius: 999px;
	background: #30221c;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .22s ease;
}

.hj-wig__submit:hover { background: #c89148; }

.hj-wig__smallprint { margin: 10px 0 0; font-size: 12.5px; color: #8d8377; text-align: center; line-height: 1.5; }

.hj-wig__peek { display: none; }

@media ( max-width: 899px ) {
	.hj-wig__summary {
		position: sticky;
		bottom: 0;
		z-index: 20;
		margin: 0 -16px -16px;
	}

	.hj-wig__peek {
		display: block;
		width: 100%;
		padding: 13px;
		border: 0;
		border-top: 1px solid #e6d8c6;
		background: #30221c;
		color: #e8b563;
		font-size: 14.5px;
		font-weight: 600;
		cursor: pointer;
	}

	.hj-wig__summary .hj-wig__summaryinner { display: none; border-radius: 0; }
	.hj-wig__summary.is-open .hj-wig__summaryinner { display: block; max-height: 62vh; overflow-y: auto; }
}

.hj-wig__done {
	max-width: 620px;
	margin: 0 auto;
	padding: 34px 28px;
	border: 1px solid #e6d8c6;
	border-radius: 14px;
	background: #fdfaf6;
	text-align: center;
}

.hj-wig__done h2 { margin: 0 0 12px; color: #30221c; }
.hj-wig__ref { font-size: 22px; font-weight: 700; color: #c89148; letter-spacing: .04em; }

.hj-wig__error {
	max-width: 620px;
	margin: 0 auto 20px;
	padding: 14px 18px;
	border-left: 3px solid #96412c;
	border-radius: 0 8px 8px 0;
	background: #f7e6e0;
	color: #30221c;
}

/* ============================================== crown maintenance panel */

.hj-maint { margin-top: 34px; }

.hj-maint h3 {
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid #f1ebe3;
	color: #30221c;
	font-size: 17px;
}

.hj-maint h4 { margin: 0 0 8px; color: #30221c; font-size: 15px; }

.hj-maint__notice {
	margin: 0 0 16px;
	padding: 12px 15px;
	border-left: 3px solid #c89148;
	border-radius: 0 8px 8px 0;
	background: #f6ebd9;
	font-size: 14.5px;
}

.hj-maint__notice--ok { border-left-color: #3f6b4a; background: #e7efe8; }
.hj-maint__notice--warn { border-left-color: #96412c; background: #f7e6e0; }

/* Three states, and the colour is never the only signal — the wording changes
   too, so it reads the same to someone who cannot distinguish them. */
.hj-maint__head {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	justify-content: space-between;
	align-items: center;
	padding: 14px 18px;
	border-radius: 12px;
	border: 1px solid #e6d8c6;
	background: #fdfaf6;
	font-size: 14px;
}

.hj-maint__dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 8px;
	border-radius: 50%;
	background: #3f6b4a;
}

.hj-maint__head--green { border-color: rgba( 63, 107, 74, .35 ); background: #eef4ef; }
.hj-maint__head--amber { border-color: rgba( 179, 112, 28, .4 ); background: #fbf2e2; }
.hj-maint__head--red   { border-color: rgba( 150, 65, 44, .4 );  background: #f9ebe6; }

.hj-maint__head--amber .hj-maint__dot { background: #b3701c; }
.hj-maint__head--red   .hj-maint__dot { background: #96412c; }

.hj-maint__head strong { color: #30221c; letter-spacing: .04em; }
.hj-maint__dates { display: grid; gap: 2px; text-align: right; color: #6f6259; }
.hj-maint__days { font-weight: 600; color: #30221c; }

.hj-maint__suspended {
	margin: 14px 0 0;
	padding: 14px 18px;
	border-left: 3px solid #96412c;
	border-radius: 0 8px 8px 0;
	background: #f9ebe6;
}

.hj-maint__suspended p { margin: 0; font-size: 14.5px; line-height: 1.65; color: #4a4038; }

.hj-maint__overall { margin: 20px 0 8px; font-size: 15px; font-weight: 600; color: #30221c; }
.hj-maint__bar { max-width: none; margin-bottom: 6px; }

.hj-maint__targets { display: grid; gap: 20px; margin-top: 22px; }

@media ( min-width: 760px ) { .hj-maint__targets { grid-template-columns: repeat( 3, 1fr ); } }

.hj-maint__target {
	padding: 16px 18px;
	border: 1px solid #ece4da;
	border-radius: 12px;
	background: #fff;
}

.hj-maint__count { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: #30221c; font-variant-numeric: tabular-nums; }
.hj-maint__need { margin: 8px 0 0; font-size: 13px; color: #8a6318; font-weight: 600; }

.hj-maint__platforms { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }

.hj-maint__platforms li {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0;
	list-style: none;
	font-size: 14px;
}

.hj-maint__pdot {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #d8cec2;
}

.hj-maint__platforms li.is-on .hj-maint__pdot { background: #3f6b4a; }
.hj-maint__platforms li a { color: #30221c; text-decoration: none; border-bottom: 1px solid transparent; }
.hj-maint__platforms li a:hover { border-bottom-color: #c89148; color: #c89148; }
.hj-maint__platforms li em { font-style: normal; font-size: 12px; color: #3f6b4a; font-weight: 600; }

.hj-maint__connect { display: flex; gap: 6px; width: 100%; margin-top: 2px; }

.hj-maint__connect input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 7px 10px;
	border: 1px solid #e0d6c8;
	border-radius: 6px;
	font-size: 13px;
}

.hj-maint__connect button {
	flex: 0 0 auto;
	padding: 7px 14px;
	border: 0;
	border-radius: 6px;
	background: #30221c;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.hj-maint__connect button:hover { background: #c89148; }

.hj-maint__submit {
	margin-top: 24px;
	padding: 18px;
	border: 1px solid #e6d8c6;
	border-radius: 12px;
	background: #fdfaf6;
}

.hj-maint__hint { margin: 0 0 12px; font-size: 13.5px; color: #7a6f64; line-height: 1.6; }

.hj-maint__row { display: grid; gap: 8px; }

@media ( min-width: 700px ) { .hj-maint__row { grid-template-columns: 1fr 1fr 2fr auto; align-items: center; } }

.hj-maint__row select, .hj-maint__row input {
	padding: 10px 12px;
	border: 1px solid #e0d6c8;
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	color: #30221c;
	width: 100%;
}

.hj-maint__row .hj-roy__btn { width: auto; white-space: nowrap; padding: 11px 22px; }

.hj-maint__history { margin-top: 22px; }
.hj-maint__history ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }

.hj-maint__sub {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	align-items: baseline;
	padding: 9px 13px;
	border-radius: 8px;
	background: #faf7f3;
	list-style: none;
	font-size: 13.5px;
}

.hj-maint__subwhat { color: #30221c; font-weight: 600; }
.hj-maint__substate { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a6318; }
.hj-maint__sub--approved .hj-maint__substate { color: #3f6b4a; }
.hj-maint__sub--rejected .hj-maint__substate { color: #96412c; }
.hj-maint__subreason { width: 100%; color: #7a6f64; font-size: 12.5px; }

.hj-maint__done {
	margin-top: 20px;
	padding: 16px 18px;
	border-left: 3px solid #3f6b4a;
	border-radius: 0 8px 8px 0;
	background: #e7efe8;
}

.hj-maint__done strong { display: block; margin-bottom: 4px; color: #30221c; }
.hj-maint__done p { margin: 0; font-size: 14.5px; color: #4a4038; }

@media ( max-width: 560px ) {
	.hj-maint__head { flex-direction: column; align-items: flex-start; }
	.hj-maint__dates { text-align: left; }
	.hj-maint__substate { margin-left: 0; }
}

/* Approximate local price beside the cedi price. Quiet — the real price is the
   one in cedis, and this is a courtesy, not the headline. */
.hj-geo__approx {
	display: inline-block;
	margin-left: 6px;
	font-size: .82em;
	font-weight: 400;
	color: #8d8377;
	white-space: nowrap;
}

/* The claimable maintenance reward: two ways to take it, per the client —
   straight onto the basket, or emailed for later. */
.hj-maint__reward .hj-maint__claim {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	align-items: center;
	margin-top: 14px;
}

.hj-maint__reward .hj-roy__btn { width: auto; }

.hj-maint__linkbtn {
	padding: 0;
	border: 0;
	background: none;
	color: #30221c;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}

.hj-maint__linkbtn:hover { color: #c89148; }

.hj-maint__code {
	display: inline-block;
	margin-right: 10px;
	padding: 5px 12px;
	border: 1px dashed #c89148;
	border-radius: 6px;
	background: #fff;
	color: #30221c;
	font-family: ui-monospace, monospace;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
}

.hj-maint__locked {
	margin-top: 18px;
	padding: 13px 16px;
	border-radius: 8px;
	background: #faf7f3;
	color: #7a6f64;
	font-size: 14px;
}

@media ( max-width: 560px ) {
	.hj-maint__reward .hj-maint__claim { flex-direction: column; align-items: stretch; }
	.hj-maint__reward .hj-roy__btn { width: 100%; }
}

/* ============================ earned crowns: glow, not a box ============ */

/* The tier gradients were written for the old text glyph, where
   background-clip:text painted the letterform itself. Now the crown is an
   <img>, so that same gradient paints as a rectangle behind the picture —
   which is the bronze block the client spotted. Kill it on image crowns. */
.hj-roy__crown--img,
.hj-roy__crownitem--bronze.is-earned .hj-roy__crown--img,
.hj-roy__crownitem--silver.is-earned .hj-roy__crown--img,
.hj-roy__crownitem--gold.is-earned .hj-roy__crown--img,
.hj-roy__crownitem--platinum.is-earned .hj-roy__crown--img,
.hj-roy__tier--bronze .hj-roy__crown--img,
.hj-roy__tier--silver .hj-roy__crown--img,
.hj-roy__tier--gold .hj-roy__crown--img,
.hj-roy__tier--platinum .hj-roy__crown--img {
	background: none !important;
	background-image: none !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	-webkit-text-fill-color: currentColor;
}

/* An achieved crown stands on its own: no card, no border, just the crown with
   light behind it in its own metal. */
.hj-roy__crownitem.is-earned {
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
	opacity: 1;
}

.hj-roy__crownitem.is-earned .hj-roy__crown--img {
	position: relative;
	isolation: isolate;
}

/* The glow itself — a soft radial bloom sitting behind the artwork. */
.hj-roy__crownitem.is-earned .hj-roy__crown--img::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 150%;
	height: 150%;
	transform: translate( -50%, -50% );
	border-radius: 50%;
	background: radial-gradient( circle, var( --hj-glow, rgba( 232, 181, 99, .55 ) ) 0%, rgba( 232, 181, 99, 0 ) 68% );
	filter: blur( 8px );
	z-index: -1;
	pointer-events: none;
}

.hj-roy__crownitem.is-earned .hj-roy__crown--img img {
	position: relative;
	z-index: 1;
	filter: drop-shadow( 0 3px 10px rgba( 0, 0, 0, .28 ) );
}

/* Each metal glows in its own colour. */
.hj-roy__crownitem--bronze.is-earned   .hj-roy__crown--img { --hj-glow: rgba( 200, 122, 51, .60 ); }
.hj-roy__crownitem--silver.is-earned   .hj-roy__crown--img { --hj-glow: rgba( 196, 205, 214, .62 ); }
.hj-roy__crownitem--gold.is-earned     .hj-roy__crown--img { --hj-glow: rgba( 232, 181, 99, .62 ); }
.hj-roy__crownitem--platinum.is-earned .hj-roy__crown--img { --hj-glow: rgba( 214, 226, 238, .66 ); }

/* Labels sit on the page now rather than on a dark card. */
.hj-roy__crownitem.is-earned strong { color: #30221c; }
.hj-roy__crownitem.is-earned .hj-roy__crownstate { color: #8a6318; font-weight: 700; }

/* Locked stays exactly as it was — the client is happy with the boxes. */
.hj-roy__crownitem:not( .is-earned ) {
	background: #2b2118;
	border: 1px solid #3d3123;
}

.hj-roy__crownitem:not( .is-earned ) .hj-roy__crown--img img {
	filter: grayscale( 1 ) brightness( .74 ) contrast( .9 );
	opacity: .45;
}

/* A very slow breath, so an earned crown feels alive without being a
   distraction. Off for anyone who asked for less motion. */
@media ( prefers-reduced-motion: no-preference ) {
	.hj-roy__crownitem.is-earned .hj-roy__crown--img::before {
		animation: hj-crown-glow 4.5s ease-in-out infinite;
	}
}

@keyframes hj-crown-glow {
	0%, 100% { opacity: .78; transform: translate( -50%, -50% ) scale( 1 ); }
	50%      { opacity: 1;   transform: translate( -50%, -50% ) scale( 1.06 ); }
}

/* ---------------------------------------------------------------- crown ladder
   Client, on seeing the first glow: "the crown is now smaller, i think it needs
   to be slightly big with a small glow behind it and the rest, silver bigger
   with a slightly bigger glow, gold even bigger than silver and so on."

   Two things going on. The crown never actually shrank — losing the tile took
   away the frame it was being read against, so the same artwork looked smaller.
   And the collection should climb: each metal is a bigger prize than the last,
   so it should physically outgrow the one before it.

   Size climbs on EVERY crown, earned or not, so a locked platinum is still the
   biggest thing in the row and the row reads as a progression. The glow is the
   reward for earning it, and only lights up then. Both scale off the same pair
   of variables so a tier can never end up with a big crown and a small bloom. */

.hj-roy__crownitem {
	--hj-crown: 68px;   /* artwork height   */
	--hj-bloom: 88px;   /* glow diameter    */
	--hj-glow-a: .30;   /* glow strength    */
	--hj-glow-rgb: 232, 181, 99;
}

.hj-roy__crownitem--bronze   { --hj-crown: 68px; --hj-bloom:  88px; --hj-glow-a: .30; --hj-glow-rgb: 198, 118,  48; }
.hj-roy__crownitem--silver   { --hj-crown: 78px; --hj-bloom: 104px; --hj-glow-a: .34; --hj-glow-rgb: 198, 208, 218; }
.hj-roy__crownitem--gold     { --hj-crown: 88px; --hj-bloom: 122px; --hj-glow-a: .38; --hj-glow-rgb: 232, 181,  99; }
.hj-roy__crownitem--platinum { --hj-crown: 98px; --hj-bloom: 142px; --hj-glow-a: .42; --hj-glow-rgb: 216, 228, 240; }

/* One fixed slot, tallest crown's worth, with each crown centred in it — so the
   four sit on a common baseline and the labels underneath stay in a straight
   line even though the artwork is four different sizes. */
.hj-roy__crownitem .hj-roy__crown--img {
	height: 108px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 6px;
}

.hj-roy__crownitem .hj-roy__crown--img img {
	height: var( --hj-crown );
	width: auto;
	max-width: 100%;
}

/* Softer than the first pass — he found that one too strong. Lower opacity and
   a wider blur, so it reads as light coming off the crown rather than a disc
   sitting behind it. */
.hj-roy__crownitem.is-earned .hj-roy__crown--img::before {
	width: var( --hj-bloom );
	height: var( --hj-bloom );
	background: radial-gradient(
		circle,
		rgba( var( --hj-glow-rgb ), var( --hj-glow-a ) ) 0%,
		rgba( var( --hj-glow-rgb ), calc( var( --hj-glow-a ) * .45 ) ) 42%,
		rgba( var( --hj-glow-rgb ), 0 ) 72%
	);
	filter: blur( 12px );
}

/* The drop-shadow was doing the same job as the glow and muddying it. Keep just
   enough to lift the crown off the page. */
.hj-roy__crownitem.is-earned .hj-roy__crown--img img {
	filter: drop-shadow( 0 2px 6px rgba( 0, 0, 0, .22 ) );
}

/* Gentler breath to match the gentler glow. */
@keyframes hj-crown-glow {
	0%, 100% { opacity: .85; transform: translate( -50%, -50% ) scale( 1 ); }
	50%      { opacity: 1;   transform: translate( -50%, -50% ) scale( 1.04 ); }
}

@media ( max-width: 640px ) {
	.hj-roy__crownitem--bronze   { --hj-crown: 54px; --hj-bloom:  70px; }
	.hj-roy__crownitem--silver   { --hj-crown: 62px; --hj-bloom:  82px; }
	.hj-roy__crownitem--gold     { --hj-crown: 70px; --hj-bloom:  96px; }
	.hj-roy__crownitem--platinum { --hj-crown: 78px; --hj-bloom: 112px; }

	.hj-roy__crownitem .hj-roy__crown--img { height: 86px; }
	.hj-roy__crownitem.is-earned .hj-roy__crown--img::before { filter: blur( 9px ); }
}

/* Same ladder on the public Royalty Rewards page, where the four tier cards
   show the identical crowns. If only the account page climbed, the two pages
   would disagree about how big a Gold crown is. No glow here — these cards are
   showing what is on offer, not what someone has earned. */
.hj-roy__tier--bronze   .hj-roy__crown--img img { height: 68px; }
.hj-roy__tier--silver   .hj-roy__crown--img img { height: 78px; }
.hj-roy__tier--gold     .hj-roy__crown--img img { height: 88px; }
.hj-roy__tier--platinum .hj-roy__crown--img img { height: 98px; }

.hj-roy__tier .hj-roy__crown--img {
	height: 108px;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media ( max-width: 640px ) {
	.hj-roy__tier--bronze   .hj-roy__crown--img img { height: 54px; }
	.hj-roy__tier--silver   .hj-roy__crown--img img { height: 62px; }
	.hj-roy__tier--gold     .hj-roy__crown--img img { height: 70px; }
	.hj-roy__tier--platinum .hj-roy__crown--img img { height: 78px; }
	.hj-roy__tier .hj-roy__crown--img { height: 86px; }
}

/* ------------------------------------------------------------- pre-orders
   Selling ahead of the 28 November launch. The dispatch date has to be
   impossible to miss — someone who pays in September and only finds out the
   date when the parcel does not arrive raises a chargeback. */

.hj-preorder__note {
	margin: 0 0 14px;
	padding: 12px 14px;
	background: #fbf6ec;
	border-left: 4px solid #d9a441;
	border-radius: 4px;
	font-size: 14.5px;
	line-height: 1.55;
	color: #4a4038;
}

.hj-preorder__note strong { color: #30221c; }

.hj-preorder__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 5px 11px;
	border-radius: 999px;
	background: #30221c;
	color: #f3e2c0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.hj-preorder__checkout {
	margin: 0 0 18px;
	padding: 14px 16px;
	background: #fbf6ec;
	border-left: 4px solid #d9a441;
	border-radius: 4px;
	font-size: 14.5px;
	line-height: 1.55;
	color: #4a4038;
}

/* ------------------------------------------- custom wig reference photographs
   Two empty frames, front and back, for the customer to drop in the look they
   want built. They read as picture frames rather than file inputs because that
   is what they are for — the native control says nothing about what is wanted. */

.hj-wig__refgrid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 14px;
	margin-top: 6px;
}

.hj-wig__ref { display: block; cursor: pointer; }
.hj-wig__ref input[type="file"] {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect( 0 0 0 0 );
	white-space: nowrap; border: 0;
}

.hj-wig__refbox {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 168px;
	padding: 16px;
	border: 2px dashed #d9cdb9;
	border-radius: 10px;
	background: #fdfaf5;
	text-align: center;
	overflow: hidden;
	transition: border-color .15s ease, background .15s ease;
}

.hj-wig__ref:hover .hj-wig__refbox,
.hj-wig__ref input:focus + .hj-wig__refbox {
	border-color: #c89148;
	background: #fbf6ec;
}

.hj-wig__reficon { font-size: 26px; line-height: 1; color: #c89148; }
.hj-wig__reflabel { font-weight: 700; color: #30221c; font-size: 15px; }
.hj-wig__refhint { font-size: 12.5px; color: #8d8377; }

.hj-wig__refpreview {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.hj-wig__refbox.has-image .hj-wig__reficon,
.hj-wig__refbox.has-image .hj-wig__refhint { display: none; }

.hj-wig__refbox.has-image .hj-wig__reflabel {
	position: absolute;
	left: 8px; bottom: 8px;
	z-index: 2;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba( 48, 34, 28, .82 );
	color: #fff;
	font-size: 12px;
}

.hj-wig__hint--small { font-size: 12.5px; color: #8d8377; }

/* Shown, but not orderable — he supplies this grade only on request. */
.hj-wig__choice--request { opacity: .55; cursor: not-allowed; }
.hj-wig__choice--request input { cursor: not-allowed; }
.hj-wig__onrequest {
	margin-left: 6px;
	font-size: 11.5px;
	font-style: normal;
	color: #8d8377;
	text-transform: uppercase;
	letter-spacing: .06em;
}

@media ( max-width: 560px ) {
	.hj-wig__refgrid { grid-template-columns: 1fr; }
	.hj-wig__refbox { min-height: 140px; }
}

/* A step the server could not read. Deliberately a soft outline rather than a
   red border on every control inside it — the customer skipped an answer, they
   have not done anything wrong. */
.hj-wig__step--needed {
	position: relative;
	border-radius: 10px;
	box-shadow: 0 0 0 2px rgba( 192, 57, 43, .45 );
	background: #fdf7f6;
}

.hj-wig__step--needed::before {
	content: attr( data-hj-needlabel );
	position: absolute;
	top: -10px;
	left: 14px;
	padding: 1px 9px;
	border-radius: 999px;
	background: #c0392b;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hj-wig__error {
	margin: 0 0 18px;
	padding: 13px 16px;
	border-left: 4px solid #c0392b;
	border-radius: 6px;
	background: #fdf2f2;
	color: #4a2b2b;
	font-size: 15px;
	line-height: 1.55;
}

/* ------------------------------------------- colour swatch, enlarged
   Choosing the colour of a wig costing thousands from a 150px square was never
   going to work — and WordPress's thumbnail is a hard crop, so it was showing a
   fragment of a tall photograph rather than the hair. The tile is now taller and
   uncropped, and there is a proper look-closer control. */

.hj-wig__swatchbody { position: relative; overflow: hidden; }

.hj-wig__swatch.has-image .hj-wig__swatchbody {
	aspect-ratio: 3 / 4;
	border-radius: 8px;
}

.hj-wig__swatch.has-image .hj-wig__swatchbody img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Its own control, because enlarging a colour and choosing it are two different
   intentions and one should never trigger the other. */
.hj-wig__zoom {
	position: absolute;
	right: 6px;
	bottom: 6px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 24, 17, 13, .62 );
	color: #fff;
	cursor: zoom-in;
	opacity: 0;
	transition: opacity .15s ease, background .15s ease;
}

.hj-wig__swatch:hover .hj-wig__zoom,
.hj-wig__zoom:focus { opacity: 1; }

.hj-wig__zoom:hover { background: rgba( 24, 17, 13, .85 ); }

/* Touch has no hover, so it must always be visible there or it does not exist. */
@media ( hover: none ) {
	.hj-wig__zoom { opacity: 1; }
}

/* --- the enlarged view --- */

.hj-zoom {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba( 18, 13, 10, .9 );
}

.hj-zoom[hidden] { display: none; }

.hj-zoom__figure {
	max-width: min( 92vw, 720px );
	max-height: 88vh;
	margin: 0;
	text-align: center;
}

.hj-zoom__img {
	max-width: 100%;
	max-height: 78vh;
	border-radius: 10px;
	box-shadow: 0 22px 60px rgba( 0, 0, 0, .5 );
}

.hj-zoom__caption {
	margin-top: 12px;
	color: #f3e2c0;
	font-size: 15px;
	letter-spacing: .06em;
}

.hj-zoom__note {
	margin-top: 4px;
	color: #b5a692;
	font-size: 12.5px;
}

.hj-zoom__x {
	position: absolute;
	top: 14px;
	right: 18px;
	padding: 6px 12px;
	border: 0;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .14 );
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.hj-zoom__x:hover { background: rgba( 255, 255, 255, .26 ); }

@media ( max-width: 560px ) {
	.hj-wig__zoom { width: 34px; height: 34px; }
	.hj-zoom { padding: 12px; }
}