/* Loyalty and Reward Points - storefront.
 *
 * Every rule is scoped under .hslr-page or .hslr-basket so nothing here can
 * reach the rest of the skin. Colours inherit from the skin wherever possible;
 * the few that are stated are neutral greys plus one accent, so the panel sits
 * inside any of the skins without being retuned per skin.
 *
 * Injected via {$LIVE_HELP}, which every skin emits at the end of <body>, so
 * these rules load AFTER the skin's own stylesheet and win on source order at
 * equal specificity.
 */

.hslr-page { margin: 0 0 2rem; }

.hslr-page .hslr-h { margin: 0 0 1rem; }
.hslr-page .hslr-h2 { margin: 1.6rem 0 .6rem; font-size: 1.1rem; }

.hslr-head {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	align-items: center;
	border: 1px solid #dcdfe4;
	border-left: 4px solid #3f6ea8;
	border-radius: 4px;
	padding: 1rem 1.25rem;
	background: #fbfcfd;
}
.hslr-head-main { flex: 0 0 auto; text-align: center; min-width: 7rem; }
.hslr-head-side { flex: 1 1 16rem; }
.hslr-head-side p { margin: 0 0 .35rem; }

.hslr-big { display: block; font-size: 2.6rem; line-height: 1; font-weight: 600; color: #22304a; }
.hslr-cap { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #707d93; margin-top: .25rem; }
.hslr-small { font-size: .84rem; color: #67748a; }

.hslr-cta { display: inline-block; margin-top: .3rem; font-weight: 600; }

/* Blocks of points, oldest expiry first. Laid out as a row of cards rather
 * than a table: there are rarely more than a handful and the expiry date is
 * the thing being read, not compared down a column. */
.hslr-blocks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.hslr-blocks li {
	flex: 0 1 11rem;
	border: 1px solid #dcdfe4;
	border-radius: 4px;
	padding: .6rem .75rem;
	background: #fff;
}
.hslr-b-pts { display: block; font-size: 1.35rem; font-weight: 600; color: #22304a; }
.hslr-b-val { display: block; font-size: .86rem; color: #4d5a70; }
.hslr-b-exp { display: block; font-size: .76rem; color: #707d93; margin-top: .2rem; }

.hslr-scroll { overflow-x: auto; }
.hslr-table { width: 100%; border-collapse: collapse; }
.hslr-table th,
.hslr-table td { padding: .5rem .6rem; border-bottom: 1px solid #e6e9ee; text-align: left; vertical-align: top; }
.hslr-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #5d6a80; white-space: nowrap; }
.hslr-table td.hslr-n,
.hslr-table th.hslr-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hslr-up { color: #15663f; font-weight: 600; }
.hslr-down { color: #8d2d1d; font-weight: 600; }

/* What a product earns. Only emitted on a skin that does not print its own
 * reward block, and placed by the plugin's script, so it has to read as
 * deliberate next to a price or an add-to-basket button. */
.hslr-product {
	display: inline-flex;
	align-items: baseline;
	gap: .45rem;
	border: 1px solid #dcdfe4;
	border-radius: 999px;
	padding: .3rem .8rem .3rem .55rem;
	margin: .5rem 0;
	background: #fbfcfd;
	font-size: .9rem;
}
.hslr-product-pts {
	display: inline-block;
	min-width: 1.6rem;
	padding: .05rem .4rem;
	border-radius: 999px;
	background: #3f6ea8;
	color: #fff;
	font-weight: 600;
	text-align: center;
}
.hslr-product-txt { color: #3c485c; }

/* The basket panel. Placed by the plugin's own script, so it has to look
 * deliberate wherever it lands - hence a full-width strip rather than
 * something that assumes a column. */
.hslr-basket {
	border: 1px solid #dcdfe4;
	border-left: 4px solid #3f6ea8;
	border-radius: 4px;
	padding: .8rem 1rem;
	margin: 1rem 0;
	background: #fbfcfd;
}
.hslr-basket-line { margin: 0; }
.hslr-basket-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; }
.hslr-basket-form label { font-weight: 600; margin: 0; }
.hslr-basket-form input[type="number"] { width: 6rem; margin: 0; }
.hslr-basket-hint { flex: 1 1 100%; font-size: .84rem; color: #67748a; }
.hslr-basket-clear { margin-left: .4rem; }

@media (max-width: 40rem) {
	.hslr-head { display: block; }
	.hslr-head-main { text-align: left; margin-bottom: .6rem; }
	.hslr-blocks li { flex: 1 1 100%; }
}