/**
 * xShopum compliance block — customer facing.
 *
 * Sized to sit under a large hero price without competing with it: the store's
 * own price stays the loudest number on the page, and this box carries the
 * legal comparison. Low specificity, no !important, inherits the theme's font
 * stack. Colour runs through one accent variable so a store can retheme it in
 * a single line.
 */

.xpc-block {
	--xpc-accent: #d1102a;
	--xpc-accent-soft: #fdf1f2;
	--xpc-border: #f0c3c8;
	--xpc-ink: #1c1d20;
	--xpc-muted: #6b7178;

	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 0 14px;
	padding: 9px 12px 10px;
	border: 1px solid var(--xpc-border);
	border-radius: 9px;
	background: #fff;
	font-size: 15px;
	line-height: 1.4;
	color: var(--xpc-ink);
	text-align: left;
}

.xpc-block *,
.xpc-block *::before,
.xpc-block *::after {
	box-sizing: border-box;
}

.xpc-block__head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 5px;
}

.xpc-block__badge {
	display: inline-block;
	color: var(--xpc-accent);
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: -0.1px;
	line-height: 1.25;
}

.xpc-block__info {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 16px;
	height: 16px;
	padding: 0;
	border: 1px solid #c8ccd1;
	border-radius: 50%;
	background: #fff;
	color: var(--xpc-muted);
	font-size: 10px;
	font-weight: 700;
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
}

.xpc-block__info:hover,
.xpc-block__info:focus-visible {
	border-color: var(--xpc-accent);
	color: var(--xpc-accent);
}

.xpc-block__info:focus-visible {
	outline: 2px solid var(--xpc-accent);
	outline-offset: 2px;
}

.xpc-block__tooltip {
	position: absolute;
	z-index: 30;
	top: calc(100% + 9px);
	left: 0;
	width: 280px;
	max-width: min(280px, 76vw);
	padding: 10px 12px;
	border: 1px solid #e8e8ea;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 8px 26px rgba(20, 22, 26, 0.15);
	color: #3a3d42;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.xpc-block__tooltip::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 16px;
	width: 10px;
	height: 10px;
	border-top: 1px solid #e8e8ea;
	border-left: 1px solid #e8e8ea;
	background: #fff;
	transform: rotate(45deg);
}

.xpc-block__head:hover .xpc-block__tooltip,
.xpc-block__info:focus-visible ~ .xpc-block__tooltip,
.xpc-block__info[aria-expanded="true"] ~ .xpc-block__tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.xpc-block__prices {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0;
	padding: 0;
	font-variant-numeric: tabular-nums;
}

.xpc-block__was {
	color: #8b9199;
	font-size: 16px;
	font-weight: 600;
	text-decoration: line-through;
	text-decoration-color: #b6bcc4;
	text-decoration-thickness: 1.5px;
}

.xpc-block__now {
	background: none;
	color: var(--xpc-accent);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.3px;
	text-decoration: none;
}

.xpc-block__pct {
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--xpc-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.xpc-block__ends {
	margin: 6px 0 0;
	padding: 0;
	color: var(--xpc-muted);
	font-size: 11.5px;
}

/* Neutralise theme price styling that would otherwise leak in. */
.xpc-block .woocommerce-Price-amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.xpc-block .woocommerce-Price-currencySymbol {
	margin-left: 2px;
	color: inherit;
	font-size: 0.78em;
	font-weight: inherit;
	vertical-align: 0.04em;
}

/* Screen-reader labels, in case the theme does not define the class. */
.xpc-block .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Test mode. Deliberately unmissable: staff-only, and the reference price is
   not backed by price history. */
.xpc-block--test {
	--xpc-accent: #9a6207;
	--xpc-border: #f0dcb2;
	border-style: dashed;
}

.xpc-block__test {
	margin: 0 0 7px;
	padding: 4px 7px;
	border-radius: 5px;
	background: #9a6207;
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
	.xpc-block__tooltip {
		transition: none;
	}
}

@media (max-width: 480px) {
	.xpc-block {
		display: block;
		font-size: 14px;
	}

	.xpc-block__was { font-size: 15px; }
	.xpc-block__now { font-size: 19px; }
}

/* --------------------------------------------------------------------- */
/* Cart-level offer badge                                                  */
/* --------------------------------------------------------------------- */

/*
 * Green, and visually unlike the red legal-discount box on purpose: the
 * product's price has not changed, so this must not read as a price cut.
 */
.xpc-cart {
	display: block;
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.35;
	color: #1c1d20;
}

.xpc-cart__label {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0 0 5px;
	padding: 0;
	color: #12783f;
	font-size: 13px;
	font-weight: 700;
}

.xpc-cart__icon {
	display: inline-block;
	flex: none;
	width: 13px;
	height: 11px;
	border: 1.5px solid currentColor;
	border-top: 0;
	border-radius: 0 0 4px 4px;
	position: relative;
}

.xpc-cart__icon::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 1px;
	width: 8px;
	height: 6px;
	border: 1.5px solid currentColor;
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
}

.xpc-cart__prices {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
	font-variant-numeric: tabular-nums;
}

.xpc-cart__chip {
	padding: 2px 7px;
	border-radius: 4px;
	background: #e2f4e9;
	color: #12783f;
	font-size: 12px;
	font-weight: 700;
}

.xpc-cart__now {
	color: #12783f;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.3px;
}

.xpc-cart .woocommerce-Price-amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.xpc-cart .woocommerce-Price-currencySymbol {
	margin-left: 2px;
	font-size: 0.8em;
}

/* --------------------------------------------------------------------- */
/* Alternating offer text                                                  */
/* --------------------------------------------------------------------- */

/*
 * A conditional offer needs two sentences: what unlocks it, and what it gives.
 * They alternate rather than wrap, so the badge keeps to one line. A hidden
 * copy of the longest phrase holds the box open so nothing below it shifts on
 * each switch.
 */
.xpc-cart__rotator {
	position: relative;
	display: inline-block;
	vertical-align: bottom;
}

.xpc-cart__sizer {
	visibility: hidden;
	white-space: nowrap;
}

.xpc-cart__single { display: inline; }

.xpc-cart__phrase {
	position: absolute;
	inset: 0 auto 0 0;
	display: flex;
	align-items: center;
	opacity: 0;
	white-space: nowrap;
	animation: xpc-cart-cycle 5.4s cubic-bezier(.4, 0, .2, 1) infinite;
	animation-delay: calc(var(--xpc-phrase, 0) * 2.7s);
}

@keyframes xpc-cart-cycle {
	0%        { opacity: 0; transform: translateY(5px); }
	7%, 43%   { opacity: 1; transform: none; }
	50%, 100% { opacity: 0; transform: translateY(-5px); }
}

/* Motion is decoration here; the first phrase alone still states the offer. */
@media (prefers-reduced-motion: reduce) {
	.xpc-cart__rotator { display: inline; }
	.xpc-cart__sizer { display: none; }

	.xpc-cart__phrase {
		position: static;
		display: inline;
		opacity: 1;
		animation: none;
	}

	.xpc-cart__phrase ~ .xpc-cart__phrase { display: none; }
}

/* --------------------------------------------------------------------- */
/* Listing badges                                                          */
/* --------------------------------------------------------------------- */

/*
 * Injected inside the theme's price element, so this block inherits a large
 * bold price font, possibly a strikethrough, and whatever flex rules the theme
 * put on .price. Everything the badge depends on is therefore restated rather
 * than assumed — that is the difference between a badge and three run-together
 * words after the price.
 */
.xpc-loop,
.xpc-loop * {
	box-sizing: border-box;
}

.xpc-loop {
	display: block;
	margin: 7px 0 0;
	padding: 0;
	color: #1c1d20;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: normal;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	white-space: normal;
}

/* Compliance chip ------------------------------------------------------- */

.xpc-loop__legal {
	display: block;
	margin: 0 0 5px;
	color: #d1102a;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.xpc-loop__legal--test {
	color: #9a6207;
}

/* Cart offer ------------------------------------------------------------ */

.xpc-loop__offer {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #12783f;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.xpc-loop__offer .xpc-cart__icon {
	flex: none;
	width: 12px;
	height: 10px;
}

.xpc-loop__offer .xpc-cart__icon::before {
	top: -4px;
	width: 7px;
	height: 5px;
}

.xpc-loop__price {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.xpc-loop__chip {
	flex: none;
	padding: 2px 6px;
	border-radius: 4px;
	background: #e2f4e9;
	color: #12783f;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.35;
	white-space: nowrap;
}

.xpc-loop__now {
	color: #12783f;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.2px;
	line-height: 1.2;
	white-space: nowrap;
}

/* The theme's price markup leaks in through wc_price(); neutralise it. */
.xpc-loop .woocommerce-Price-amount,
.xpc-loop del,
.xpc-loop ins {
	background: none;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-decoration: none;
}

.xpc-loop .woocommerce-Price-currencySymbol {
	margin-left: 1px;
	font-size: 0.82em;
	vertical-align: 0.04em;
}

/* Alternating phrases --------------------------------------------------- */

.xpc-loop__single {
	display: block;
}

.xpc-loop__rotator {
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.xpc-loop__sizer {
	display: block;
	visibility: hidden;
	white-space: nowrap;
}

.xpc-loop__phrase {
	position: absolute;
	inset: 0 auto 0 0;
	display: flex;
	align-items: center;
	max-width: 100%;
	overflow: hidden;
	opacity: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	animation: xpc-cart-cycle 5.4s cubic-bezier(.4, 0, .2, 1) infinite;
	animation-delay: calc(var(--xpc-phrase, 0) * 2.7s);
}

@media (prefers-reduced-motion: reduce) {
	.xpc-loop__rotator { overflow: visible; }
	.xpc-loop__sizer { display: none; }

	.xpc-loop__phrase {
		position: static;
		display: block;
		opacity: 1;
		animation: none;
	}

	.xpc-loop__phrase ~ .xpc-loop__phrase { display: none; }
}

@media (max-width: 600px) {
	.xpc-loop { font-size: 11px; }
	.xpc-loop__legal { font-size: 10px; }
	.xpc-loop__offer { font-size: 10.5px; }
	.xpc-loop__now { font-size: 14px; }
	.xpc-loop__chip { font-size: 10px; padding: 1px 5px; }
}