/**
 * The basket-level My Family Rewards band.
 *
 * ONE COLOUR RULE, the same one the shop card follows: blue is always the My
 * Family Rewards price, in both states. A member's band does not turn green
 * once they sign in - that would make the blue mean "a price you cannot have
 * yet" instead of "the rewards price", and the same blue has to carry the
 * thread from the shop card all the way to the order confirmation.
 *
 * --cw-rewards* is the token file's quarantined rewards palette, which is
 * exactly what this is: a rewards and money zone.
 *
 * @package cw-bricks-child
 */

.cw-rwb {
	background: var(--cw-rewards-tint, #e9f1fa);
	border: 1px solid var(--cw-rewards-line, #cdddf0);
	border-radius: 10px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-family: inherit;
}

.cw-rwb__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.cw-rwb__figure {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.cw-rwb__eyebrow {
	font-size: 13px;
	line-height: 1.3;
	color: var(--cw-ink-2, #52575a);
}

.cw-rwb__big {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: var(--cw-rewards-deep, #12467f);
	font-variant-numeric: tabular-nums;
}

/* Woo wraps every figure in its own span; inherit rather than fight it. */
.cw-rwb__big .woocommerce-Price-amount,
.cw-rwb__sub .woocommerce-Price-amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.cw-rwb__sub {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--cw-ink-2, #52575a);
}

.cw-rwb__sub .woocommerce-Price-amount {
	font-weight: 700;
	color: var(--cw-rewards-deep, #12467f);
}

/* The programme's own mark. 121x112 native raster (a PNG in an SVG wrapper
   originally) - set a height and leave the width free; never stretch it and
   never recolour it. */
.cw-rwb__mark {
	flex: none;
	display: block;
	height: 26px;
	width: auto;
	margin-top: 2px;
}

/* The theme gives every anchor its own colour, and a bare `color: #fff` on the
   button lost to it - hence the class-on-class selector and the explicit state
   rules rather than relying on inheritance. */
.cw-rwb .cw-rwb__cta,
.cw-rwb .cw-rwb__cta:link,
.cw-rwb .cw-rwb__cta:visited {
	align-self: flex-start;
	background: var(--cw-rewards, #185aa6);
	color: #fff;
	border-radius: 8px;
	padding: 10px 18px;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	line-height: 1;
	border: 0;
}

.cw-rwb .cw-rwb__cta:hover,
.cw-rwb .cw-rwb__cta:focus,
.cw-rwb .cw-rwb__cta:active {
	background: var(--cw-rewards-deep, #12467f);
	color: #fff;
	text-decoration: none;
}

/* A member is being told something, not sold something - quieter figure. */
.cw-rwb.is-member .cw-rwb__big {
	font-size: 20px;
}

/* On the checkout the band sits directly above the join tick, so the two read
   as one control. Nothing separates them. */
.cw-rwb--checkout {
	margin: 0 0 10px;
}

.cw-rwb--cart {
	margin: 0 0 16px;
}

.cw-rwb--thankyou {
	margin: 0 0 22px;
	max-width: 520px;
}

@media (max-width: 480px) {
	.cw-rwb__big { font-size: 23px; }
	.cw-rwb__cta { align-self: stretch; text-align: center; }
}

/* On the checkout the band is the headline of the join panel it sits on top of,
   so it loses its own card treatment and hands the frame to that panel. */
.cw-rwb--checkout {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0 0 8px;
}

/* In the side cart the panel is ~360px and already dense, so the band is
   quieter than on the basket page. */
.cw-rwb--sidecart {
	margin: 14px 0 4px;
	padding: 12px 14px;
}

.cw-rwb--sidecart .cw-rwb__big { font-size: 22px; }
.cw-rwb--sidecart .cw-rwb__mark { height: 22px; }

/* .fkcart-slider-body is display:grid, so a child with no column placement can
   be stretched to the full track height (cw-store-promos' own bar hit exactly
   this and needed the same two lines). Measured fine without them, but they
   cost nothing and the failure mode is a 300px-tall band. */
.fkcart-slider-body > .cw-rwb--sidecart {
	align-self: start;
	grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------
 * PER-LINE MEMBER PRICE — what this row would cost with rewards.
 *
 * The ordinary figure stays the loudest thing on the row and is struck, not
 * replaced: it is what the basket is charging today. Blue below it is the
 * rewards price, the same rule as the shop card and the band.
 * ------------------------------------------------------------------------- */
.cwct-linemember,
.cw-rwb-line {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cw-rewards, #185aa6);
	white-space: nowrap;
}

.cwct-linemember .woocommerce-Price-amount,
.cw-rwb-line .woocommerce-Price-amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* Basket page: the struck ordinary total sits directly above it. */
.cwct-linetotal.has-member {
	color: var(--cw-ink-3, #8b959e);
	text-decoration: line-through;
	text-decoration-thickness: 1.3px;
	font-weight: 600;
}

.cwct-linetotal.has-member + .cwct-linemember {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-top: 1px;
}

/* Side cart: FunnelKit owns the row, so this rides under the item meta rather
   than restructuring it - a quiet line, not a second price fighting the first. */
.cw-rwb-line {
	margin-top: 3px;
	font-size: 12px;
}

/* ---------------------------------------------------------------------------
 * COMPACT — one row in a basket.
 *
 * Sentence and figure on the left, the button beside them, the mark last. The
 * basket and side cart are lists of what someone is buying; a four-line panel
 * dropped into that competes with the items rather than supporting them.
 * ------------------------------------------------------------------------- */
.cw-rwb.is-compact {
	padding: 10px 12px;
	gap: 0;
}

.cw-rwb.is-compact .cw-rwb__head {
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.cw-rwb.is-compact .cw-rwb__figure {
	flex-direction: row;
	align-items: baseline;
	gap: 7px;
	flex: 1 1 auto;
}

.cw-rwb.is-compact .cw-rwb__eyebrow {
	font-size: 12.5px;
}

.cw-rwb.is-compact .cw-rwb__big {
	font-size: 19px;
}

.cw-rwb.is-compact .cw-rwb__mark {
	height: 22px;
	margin-top: 0;
	order: 3;
}

.cw-rwb.is-compact .cw-rwb__cta {
	order: 2;
	padding: 7px 14px;
	font-size: 12.5px;
	align-self: center;
}

/* The checkout band has no button and no card of its own - it is the headline
   of the join panel underneath it. */
.cw-rwb--checkout.is-compact {
	padding: 0;
}

@media (max-width: 400px) {
	.cw-rwb.is-compact .cw-rwb__figure { flex: 1 1 100%; }
	.cw-rwb.is-compact .cw-rwb__cta { align-self: stretch; text-align: center; }
}

/* The member figure sits UNDER the line price, right-aligned with it, inside
   FunnelKit's own .fkcart-item-price element. */
.fkcart-item-price .cw-rwb-line {
	margin-top: 2px;
	text-align: right;
}