/**
 * EWL Pet Club — Treats, Earn and Rewards (Milestone 2).
 *
 * Sizes and colours are taken from the client's concept pages
 * (info/Concept Page How To Earn Treats.png, info/Concept Page Rewards.png)
 * and from his reward card artwork, so the built pages read as the same
 * design rather than an approximation of it.
 *
 * Loaded after ewl-member.css on the signed-in and public club screens.
 */

.ewl-club {
	/* The artwork's palette, which runs warmer than the site's Astra globals. */
	--ewl-ink: #123a5a;
	--ewl-ink-deep: #0e2f4a;
	--ewl-coral: #ef5a45;
	--ewl-sea: #12889c;
	--ewl-sea-deep: #0b6b7d;
	--ewl-gold: #e3a72c;
	/* The warmer amber the artwork uses for the word "Treats" itself. */
	--ewl-treat: #f5b73c;
	--ewl-purple: #7f66c9;
	--ewl-leaf: #6fa03c;
	--ewl-cream: #fdf6ea;

	/* The full-bleed band at the foot of the Rewards page reaches past the
	   1180px column; clip rather than hide so the sticky bar still sticks. */
	overflow-x: clip;
}

/*
 * The Elementor kit styles every bare `button` in Chewy at 30px, which is
 * heavier than anything on these screens. An id beats it without reaching
 * for !important on each control.
 */
#ewl-club button {
	font-family: "Poppins", -apple-system, "Segoe UI", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
}

/* ------------------------------------------------------------------ pill */

/*
 * The artwork's pill: a navy block, a solid bone, the number, and the word
 * in gold underneath it. Not a lozenge — the corners are only softened.
 */
.ewl-club .ewl-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 16px 7px 13px;
	border-radius: 12px;
	background: var(--ewl-ink-deep);
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
}

.ewl-club .ewl-pill__bone {
	display: block;
	color: #fff;
}

.ewl-club .ewl-pill__body {
	display: block;
	text-align: right;
}

.ewl-club .ewl-pill__body b {
	display: block;
	font-size: 25px;
	font-weight: 800;
	letter-spacing: -0.4px;
}

.ewl-club .ewl-pill__body i {
	display: block;
	margin-top: 1px;
	color: var(--ewl-treat);
	font-size: 15px;
	font-style: normal;
	font-weight: 800;
	letter-spacing: 0.2px;
}

.ewl-club .ewl-pill--big {
	padding: 10px 22px 10px 16px;
	gap: 12px;
}

.ewl-club .ewl-pill--big .ewl-pill__body b {
	font-size: 30px;
}

.ewl-club .ewl-pill--big .ewl-pill__body i {
	font-size: 17px;
}

/* --------------------------------------------------------------- the bar */

.ewl-nav__right {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.ewl-nav__account {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 999px;
	color: var(--ewl-slate);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.ewl-nav__account:hover {
	background: var(--ewl-aqua);
}

.ewl-nav__account[aria-current="page"] {
	background: var(--ewl-teal);
	color: #fff;
}

.ewl-nav__inner {
	gap: 12px;
}

.ewl-nav__list {
	flex: 0 1 auto;
	gap: 2px;
}

.ewl-nav__list a {
	padding: 8px 10px;
	font-size: 14px;
	white-space: nowrap;
}

.ewl-nav__out .ewl-btn {
	white-space: nowrap;
}

.ewl-nav--guest .ewl-nav__list--guest {
	flex: 1 1 auto;
}

.ewl-nav__guestcta {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

.ewl-hello__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* The bar carries five links, the pill, Account and Log out; between 1025
   and 1240 the two right-hand labels drop to their icons rather than wrap. */
@media (min-width: 1025px) and (max-width: 1240px) {
	.ewl-nav__brand span {
		font-size: 17px;
	}

	.ewl-nav__list a {
		padding: 8px 7px;
		font-size: 13px;
	}

	.ewl-nav__account span,
	.ewl-nav__out .ewl-btn span {
		display: none;
	}

	.ewl-nav__account,
	.ewl-nav__out .ewl-btn {
		padding-left: 9px;
		padding-right: 9px;
	}
}

/* --------------------------------------------------------------- buttons */

.ewl-club .ewl-btn--light {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.35);
}

.ewl-club .ewl-btn--light:hover {
	background: rgba(255, 255, 255, 0.28);
}

.ewl-club .ewl-btn--teal {
	background: var(--ewl-sea);
	color: #fff;
}

.ewl-club .ewl-btn--teal:hover {
	background: var(--ewl-sea-deep);
	color: #fff;
}

.ewl-small {
	font-size: 12.5px;
}

/* ------------------------------------------------------------ page heroes */

.ewl-pagehero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	/* the Earn hero gives the pets more room than the Rewards one */
	align-items: center;
	gap: 20px;
	overflow: hidden;
	margin: 0 0 8px;
	padding: 42px 36px;
	border-radius: 22px;
	background: linear-gradient(105deg, var(--ewl-cream) 0%, #fdf3e6 46%, #fffdf9 100%);
}

.ewl-pagehero__copy {
	position: relative;
	z-index: 2;
	max-width: 620px;
}

.ewl-club .ewl-pagehero__title {
	margin: 0;
	font-family: "Poppins", -apple-system, "Segoe UI", sans-serif;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -1.5px;
}

/* The three teal motion lines the artwork puts off the top right of the
   Rewards title. They spread away from the word, so the mark is mirrored, and
   they sit against the top of the last letter rather than beside its middle. */
.ewl-pagehero__rays {
	flex: 0 0 auto;
	margin-top: -22px;
	margin-left: -12px;
	color: var(--ewl-sea);
	transform: scaleX(-1);
}

.ewl-pagehero--earn .ewl-pagehero__rays {
	position: absolute;
	top: 2px;
	left: 100%;
	margin: 0 0 0 14px;
}

/* The artwork centres the Rewards hero copy and pushes the display line a
   little right of that centre. */
.ewl-pagehero--rewards .ewl-pagehero__copy {
	max-width: none;
	text-align: center;
}

/* Only the Rewards title puts its motion lines on the same line as the word;
   the Earn title stacks, so it stays a block. */
.ewl-pagehero--rewards .ewl-pagehero__title {
	display: inline-flex;
	align-items: flex-start;
	gap: 12px;
	margin-left: 7%;
}

.ewl-pagehero--rewards .ewl-pagehero__intro,
.ewl-pagehero--rewards .ewl-balstrip {
	margin-left: auto;
	margin-right: auto;
}

.ewl-pagehero__l1 {
	display: block;
	color: var(--ewl-ink);
	font-size: 58px;
}

.ewl-pagehero__l2,
.ewl-pagehero__l3 {
	display: block;
	color: var(--ewl-coral);
	font-size: 88px;
}

/*
 * The Earn hero is centred and stacks over three lines, with the bone from the
 * artwork sitting out to the left of the last one.
 */
.ewl-pagehero--earn .ewl-pagehero__copy {
	max-width: none;
	text-align: center;
}

.ewl-pagehero--earn {
	grid-template-columns: minmax(0, 1fr) 500px;
}

.ewl-pagehero--earn .ewl-pagehero__title {
	text-transform: uppercase;
}

.ewl-pagehero--earn .ewl-pagehero__l1 {
	display: block;
}

.ewl-pagehero--earn .ewl-pagehero__l3 {
	display: block;
}

.ewl-pagehero__word {
	position: relative;
	display: inline-block;
}

.ewl-pagehero__bone {
	position: absolute;
	top: 50%;
	right: 100%;
	display: inline-flex;
	margin-right: 18px;
	color: var(--ewl-ink-deep);
	transform: translateY(-50%) rotate(-16deg);
}

.ewl-pagehero--earn .ewl-pagehero__intro {
	margin-left: auto;
	margin-right: auto;
}

.ewl-pagehero--earn .ewl-heropets {
	max-width: 500px;
	margin-bottom: -100px;
}

.ewl-pagehero--earn .ewl-heropets img {
	max-height: 480px;
}

.ewl-pagehero--earn .ewl-heropets--circle::before {
	width: 380px;
	height: 380px;
	bottom: 26%;
}

.ewl-pagehero--rewards .ewl-pagehero__l2 {
	color: var(--ewl-ink);
	text-transform: uppercase;
}

.ewl-pagehero__tag {
	margin: 12px 0 8px;
	color: var(--ewl-sea);
	font-size: 21px;
	font-weight: 700;
}

.ewl-pagehero__intro {
	max-width: 520px;
	margin: 0;
	color: #2c4a63;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.55;
}

.ewl-pagehero__cta {
	margin: 18px 0 0;
}

/* The pets sit at the right of the band and bleed off its edge, as in the
   artwork; the circle behind them is the Earn page's teal disc. */
.ewl-heropets {
	position: relative;
	z-index: 1;
	align-self: end;
	justify-self: end;
	width: 100%;
	max-width: 420px;
	margin-bottom: -34px;
	text-align: center;
}

.ewl-heropets img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	max-height: 280px;
	object-fit: contain;
	object-position: bottom;
}

.ewl-pagehero--rewards .ewl-heropets img {
	max-height: 330px;
}

/* ------------------------------------------------------------- doodles */

/*
 * The hearts and paw prints drawn around the pets in the artwork. Purely
 * decorative, positioned from the template so each page can place its own.
 */
.ewl-doodles {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.ewl-doodle {
	position: absolute;
	display: block;
}

/* The artwork's hearts are drawn slightly wide and squat. */
.ewl-doodle .ewl-i--heart-line {
	scale: 1.14 0.92;
}

.ewl-heropets--circle::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 50%;
	bottom: 18%;
	width: 300px;
	height: 300px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: rgba(18, 136, 156, 0.2);
}

/* ---------------------------------------------------------- section head */

.ewl-club .ewl-sectionhead {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 30px 0 16px;
	color: var(--ewl-ink);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

/* The mark is drawn converging to the right, so only the right-hand copy is
   mirrored — same treatment as the landing page's "100% FREE" roundel. */
.ewl-sectionhead__arrow {
	display: inline-flex;
	color: var(--ewl-sea);
}

.ewl-sectionhead__arrow--r {
	transform: scaleX(-1);
}

/* ------------------------------------------------------------ earn cards */

.ewl-earngrid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	align-items: stretch;
}

.ewl-earn {
	--ewl-earn: #1f8a9e;
	--ewl-earn-soft: #eaf4f6;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 18px 13px 0;
	border: 1.5px solid color-mix(in srgb, var(--ewl-earn) 32%, #fff);
	border-radius: 14px;
	background: linear-gradient(180deg, #fff 55%, var(--ewl-earn-soft) 100%);
	text-align: center;
}

.ewl-earn--teal { --ewl-earn: #12889c; --ewl-earn-soft: #eaf5f7; }
.ewl-earn--green { --ewl-earn: #6fa03c; --ewl-earn-soft: #f0f6e8; }
.ewl-earn--orange { --ewl-earn: #ef7a45; --ewl-earn-soft: #fdefe8; }
.ewl-earn--coral { --ewl-earn: #ef5a45; --ewl-earn-soft: #fdecea; }
.ewl-earn--purple { --ewl-earn: #7f66c9; --ewl-earn-soft: #f1edfa; }
.ewl-earn--gold { --ewl-earn: #dc9c1c; --ewl-earn-soft: #fdf4e2; }
.ewl-earn--navy { --ewl-earn: #123a5a; --ewl-earn-soft: #eceff3; }

.ewl-earn__icon {
	display: block;
	margin: 2px auto 12px;
	color: var(--ewl-earn);
}

.ewl-club .ewl-earn__title {
	margin: 0 0 8px;
	color: var(--ewl-earn);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.ewl-earn__desc {
	margin: 0 0 10px;
	color: var(--ewl-slate);
	font-size: 12.5px;
	line-height: 1.45;
}

.ewl-earn__note {
	margin: 0 0 10px;
	color: var(--ewl-muted);
	font-size: 11.5px;
	font-weight: 600;
}

.ewl-club .ewl-earn__cta {
	display: inline-block;
	margin: 0 auto 12px;
	padding: 6px 12px;
	border: 1px solid color-mix(in srgb, var(--ewl-earn) 40%, #fff);
	border-radius: 999px;
	color: var(--ewl-earn);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}

.ewl-club .ewl-earn__cta:hover {
	background: var(--ewl-earn);
	color: #fff;
}

.ewl-earn__foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	/* Two of the labels run to a second line; a common height keeps every
	   foot on the same line across the row, as in the artwork. */
	min-height: 46px;
	margin: auto -13px 0;
	padding: 8px 10px;
	background: var(--ewl-earn);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.2px;
	text-align: center;
}

.ewl-earn__tick {
	position: absolute;
	top: 9px;
	right: 9px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #6fa03c;
	color: #fff;
}

.ewl-earn.is-coming_soon,
.ewl-earn.is-locked {
	opacity: 0.9;
}

/* Dashboard: a row, not a card. */
.ewl-earnlist {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ewl-earnrow {
	--ewl-earn: #12889c;
	--ewl-earn-soft: #eaf5f7;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 11px;
	border: 1px solid var(--ewl-line);
	border-radius: 12px;
	background: #fff;
}

.ewl-earnrow__icon {
	display: grid;
	place-items: center;
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--ewl-earn-soft);
	color: var(--ewl-earn);
}

.ewl-earnrow__body {
	flex: 1 1 auto;
	min-width: 0;
}

.ewl-earnrow__body b {
	display: block;
	color: var(--ewl-navy);
	font-size: 13.5px;
	line-height: 1.25;
}

.ewl-earnrow__body span {
	color: var(--ewl-earn);
	font-size: 12.5px;
	font-weight: 700;
}

/* --------------------------------------------------------- feature band */

.ewl-feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px;
	align-items: center;
	gap: 26px;
	margin: 18px 0 0;
	padding: 26px 30px;
	border-radius: 18px;
	background: linear-gradient(115deg, var(--ewl-ink-deep), #17456a 70%, #1b5079);
	color: #fff;
}

.ewl-feature__kicker {
	display: inline-block;
	margin: 0 0 8px -42px;
	padding: 5px 16px 5px 42px;
	border-radius: 0 4px 4px 0;
	background: var(--ewl-coral);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

.ewl-club .ewl-feature__title {
	margin: 2px 0 6px;
	color: #fff;
	font-family: "Poppins", -apple-system, "Segoe UI", sans-serif;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.1;
}

.ewl-feature__text {
	max-width: 560px;
	margin: 0 0 14px;
	font-size: 14.5px;
	opacity: 0.92;
}

.ewl-feature__cta {
	margin: 0;
}

.ewl-feature__prize {
	text-align: center;
	line-height: 1;
}

.ewl-feature__prizetop {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	opacity: 0.85;
}

.ewl-feature__prize b {
	display: block;
	color: var(--ewl-gold);
	font-size: 64px;
	font-weight: 800;
	letter-spacing: -1px;
}

.ewl-feature__prize i {
	display: block;
	margin-top: 4px;
	font-size: 17px;
	font-style: normal;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* share block, inside the band */
.ewl-share {
	max-width: 560px;
	padding: 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.1);
}

.ewl-share__label {
	display: block;
	margin-bottom: 7px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	opacity: 0.9;
}

.ewl-share__row {
	display: flex;
	gap: 7px;
}

.ewl-club .ewl-share__row input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 11px;
	border: 0;
	border-radius: 9px;
	background: #fff;
	color: var(--ewl-slate);
	font-size: 12.5px;
}

.ewl-share__targets {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 10px;
}

#ewl-club .ewl-share__chip,
.ewl-club .ewl-share__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.ewl-club .ewl-share__chip:hover {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.ewl-share__note {
	margin: 10px 0 0;
	font-size: 12.5px;
	opacity: 0.85;
}

/* The same block on a white card: the band's white-on-navy would vanish. */
.ewl-share--light {
	max-width: none;
	padding: 0;
	background: none;
}

.ewl-share--light .ewl-share__label {
	color: var(--ewl-muted);
	opacity: 1;
}

.ewl-club .ewl-share--light .ewl-share__row input {
	border: 1px solid var(--ewl-line);
	background: var(--ewl-bg);
}

#ewl-club .ewl-share--light .ewl-share__chip,
.ewl-club .ewl-share--light .ewl-share__chip {
	border-color: var(--ewl-line);
	color: var(--ewl-teal-deep);
}

#ewl-club .ewl-share--light .ewl-share__chip:hover,
.ewl-club .ewl-share--light .ewl-share__chip:hover {
	border-color: var(--ewl-teal);
	background: var(--ewl-aqua);
	color: var(--ewl-teal-deep);
}

.ewl-share--light .ewl-share__note {
	color: var(--ewl-muted);
	opacity: 1;
}

/* ------------------------------------------------------- more ways strip */

.ewl-more {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	margin: 0;
	padding: 18px 10px;
	list-style: none;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}

.ewl-more__item + .ewl-more__item {
	border-left: 1px solid #eceff2;
}

.ewl-more__item > a,
.ewl-more__item > span {
	display: block;
	padding: 4px 10px;
	color: var(--ewl-ink);
	text-align: center;
	text-decoration: none;
}

.ewl-more__icon {
	display: block;
	margin: 0 auto 8px;
	color: var(--ewl-sea-deep);
	opacity: 0.9;
}

.ewl-more__label {
	display: block;
	font-size: 11.5px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.ewl-more__treats {
	display: block;
	margin-top: 4px;
	color: var(--ewl-muted);
	font-size: 11px;
	font-style: normal;
	font-weight: 600;
}

/* ----------------------------------------------------------- how it works */

.ewl-steps3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 26px 22px;
	list-style: none;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}

.ewl-steps3 li {
	position: relative;
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: 3px 16px;
	align-items: center;
	padding-right: 34px;
}

/* the chevron the artwork puts between the steps */
.ewl-steps3 li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 8px;
	width: 15px;
	height: 15px;
	margin-top: -8px;
	border-top: 3.5px solid var(--ewl-coral);
	border-right: 3.5px solid var(--ewl-coral);
	border-radius: 0 3px 0 0;
	transform: rotate(45deg);
}

.ewl-steps3__icon {
	grid-row: 1 / 3;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	color: #fff;
}

.ewl-steps3__icon--teal { background: var(--ewl-sea); }
.ewl-steps3__icon--gold { background: var(--ewl-gold); }
.ewl-steps3__icon--coral { background: var(--ewl-coral); }

.ewl-steps3 b {
	align-self: end;
	font-size: 15.5px;
	font-weight: 800;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.ewl-steps3 li:nth-child(1) b { color: var(--ewl-sea); }
.ewl-steps3 li:nth-child(2) b { color: var(--ewl-gold); }
.ewl-steps3 li:nth-child(3) b { color: var(--ewl-coral); }

.ewl-steps3 span:not(.ewl-steps3__icon) {
	align-self: start;
	color: #41566a;
	font-size: 13.5px;
	line-height: 1.45;
}

/* -------------------------------------------------------- category chips */

.ewl-cats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0 0 22px;
}

/*
 * Every state here has to answer `#ewl-club button` above, which outranks a
 * plain two-class selector. Mixing the two weights is what made the selected
 * chip keep a white background and paint its icon white on top of it.
 */
#ewl-club .ewl-cat {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 24px;
	border: 1.5px solid #e2e7ec;
	border-radius: 999px;
	background: #fff;
	color: var(--ewl-ink);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	cursor: pointer;
}

#ewl-club .ewl-cat .ewl-i {
	flex: 0 0 auto;
	color: var(--ewl-sea);
}

#ewl-club .ewl-cat:hover {
	border-color: var(--ewl-sea);
}

#ewl-club .ewl-cat.is-on {
	border-color: var(--ewl-ink-deep);
	background: var(--ewl-ink-deep);
	color: #fff;
}

#ewl-club .ewl-cat.is-on .ewl-i {
	color: #fff;
}

/* ------------------------------------------------------------ balance strip */

.ewl-balstrip {
	display: flex;
	align-items: stretch;
	gap: 0;
	max-width: 640px;
	margin: 26px 0 0;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}

/*
 * In the artwork the balance is a pressed teal button: a light rim along the
 * top, a solid darker edge under it, and a soft bubble of light sweeping
 * across the face.
 */
.ewl-balstrip__num {
	position: relative;
	flex: 0 0 auto;
	overflow: hidden;
	min-width: 268px;
	padding: 18px 26px 20px;
	border-radius: 18px;
	background: linear-gradient(160deg, #1a94a8 0%, var(--ewl-sea-deep) 78%);
	color: #fff;
	text-align: center;
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, 0.38),
		inset 0 -3px 0 rgba(0, 0, 0, 0.16),
		0 6px 0 #075462,
		0 14px 22px rgba(7, 84, 98, 0.32);
}

.ewl-balstrip__gloss {
	position: absolute;
	z-index: 0;
	top: -34%;
	left: -34%;
	width: 150%;
	height: 150%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05) 56%, transparent 70%);
	transform: rotate(-16deg);
	pointer-events: none;
}

.ewl-balstrip__label,
.ewl-balstrip__big,
.ewl-balstrip__num i {
	position: relative;
	z-index: 1;
}

.ewl-balstrip__label {
	display: block;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	opacity: 0.95;
}

.ewl-balstrip__big {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 5px 0 0;
	line-height: 1;
}

.ewl-balstrip__big b {
	font-size: 50px;
	font-weight: 800;
	letter-spacing: -1.5px;
}

.ewl-balstrip__num i {
	display: block;
	margin-top: 2px;
	color: var(--ewl-treat);
	font-size: 24px;
	font-style: normal;
	font-weight: 800;
}

.ewl-balstrip__note {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 11px;
	align-items: flex-start;
	padding: 16px 22px 16px 26px;
}

.ewl-balstrip__note p {
	margin: 0;
	color: #2c4a63;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

/* The same sweep of light on the small teal button beside it. */
.ewl-club .ewl-btn--gloss {
	position: relative;
	overflow: hidden;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.34),
		0 3px 0 #075462;
}

.ewl-btn__gloss {
	position: absolute;
	top: -70%;
	left: -10%;
	width: 90%;
	height: 150%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.34), transparent 72%);
	transform: rotate(-18deg);
	pointer-events: none;
}

/* ------------------------------------------------------- balance card */

.ewl-balance {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px 24px;
	align-items: center;
	margin: 0 0 18px;
	padding: 20px 22px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--ewl-sea-deep), var(--ewl-sea));
	color: #fff;
	box-shadow: 0 8px 26px rgba(11, 107, 125, 0.25);
}

.ewl-card--treats .ewl-balance {
	margin-bottom: 12px;
	padding: 16px 18px;
}

.ewl-balance__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	opacity: 0.9;
}

.ewl-balance__num {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 3px 0 4px;
	line-height: 1;
}

.ewl-balance__num b {
	font-size: 42px;
	font-weight: 800;
	letter-spacing: -1px;
}

.ewl-balance__num i {
	font-style: normal;
	font-size: 19px;
	font-weight: 800;
	color: var(--ewl-gold);
}

.ewl-balance__line {
	display: block;
	font-size: 13.5px;
	opacity: 0.92;
}

.ewl-balance__stats {
	display: flex;
	gap: 14px;
	margin: 0;
}

.ewl-balance__stats div {
	padding: 8px 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.16);
	text-align: center;
	min-width: 84px;
}

.ewl-balance__stats dt {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	opacity: 0.9;
}

.ewl-balance__stats dd {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
}

.ewl-balance__actions {
	grid-column: 1 / -1;
	display: flex;
	gap: 8px;
	margin: 0;
}

/* ------------------------------------------------------------ log rows */

.ewl-log {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ewl-log__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-top: 1px solid var(--ewl-line);
}

.ewl-log > .ewl-log__row:first-child {
	border-top: 0;
}

.ewl-log--compact .ewl-log__row {
	padding: 8px 0;
}

.ewl-log__icon {
	flex: 0 0 34px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--ewl-aqua);
	color: var(--ewl-teal-deep);
}

.ewl-log__row.is-minus .ewl-log__icon {
	background: #fff1ea;
	color: var(--ewl-orange-deep);
}

.ewl-log__body {
	flex: 1 1 auto;
	min-width: 0;
}

.ewl-log__body b {
	display: block;
	color: var(--ewl-navy);
	font-size: 14.5px;
}

.ewl-log__body span {
	color: var(--ewl-muted);
	font-size: 12.5px;
}

.ewl-log__amount {
	flex: 0 0 auto;
	font-weight: 800;
	font-size: 16px;
	color: #2f7d32;
}

.ewl-log__row.is-minus .ewl-log__amount {
	color: var(--ewl-orange-deep);
}

.ewl-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 14px 0 0;
}

.ewl-feed__delta {
	flex: 0 0 auto;
	align-self: center;
	margin-left: auto;
	font-weight: 700;
	color: #2f7d32;
}

.ewl-feed__delta.is-minus {
	color: var(--ewl-orange-deep);
}

/* ------------------------------------------------------------ what's left */

.ewl-missing {
	margin: 10px 0 0;
}

.ewl-missing__lead {
	margin: 0 0 7px;
	color: var(--ewl-muted);
	font-size: 12.5px;
	font-weight: 600;
}

.ewl-missing__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ewl-club .ewl-chip--todo {
	gap: 4px;
	border-style: dashed;
	border-color: #cdd6dd;
	color: var(--ewl-teal-deep);
	text-decoration: none;
}

.ewl-club .ewl-chip--todo:hover {
	border-style: solid;
	border-color: var(--ewl-teal);
	background: var(--ewl-aqua);
}

.ewl-missing--treats {
	margin-top: 12px;
}

.ewl-club .ewl-chip--treat {
	gap: 5px;
	border-color: #d8c489;
	background: #fdf7e8;
	color: #7a5a10;
	text-decoration: none;
}

.ewl-club .ewl-chip--treat:hover {
	border-color: var(--ewl-gold);
	background: #fbf0d5;
}

.ewl-club .ewl-chip--treat b {
	color: var(--ewl-gold);
	font-weight: 800;
}

.ewl-missing__done {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 10px 0 0;
	color: #3f6b21;
	font-size: 13px;
	font-weight: 700;
}

/* ------------------------------------------------------------- rewards */

/* The concept page runs five cards across its content column; auto-fill keeps
   that density as the client adds rewards, and steps down on smaller screens. */
.ewl-rewardgrid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.ewl-rewardgrid--dash {
	gap: 16px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ewl-reward {
	--ewl-accent: #12889c;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.1);
}

.ewl-reward__photo {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--ewl-aqua);
	overflow: hidden;
}

.ewl-reward__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ewl-reward__nophoto {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--ewl-teal);
	opacity: 0.5;
}

/* The ribbon tab in the artwork's top-left corner. */
.ewl-reward__badge {
	position: absolute;
	top: 0;
	left: 0;
	padding: 5px 13px;
	border-radius: 0 0 10px 0;
	background: var(--ewl-coral);
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.9px;
	text-transform: uppercase;
}

.ewl-reward__badge--new { background: var(--ewl-purple); }
.ewl-reward__badge--limited { background: var(--ewl-orange-deep); }

.ewl-reward__badge--ultimate {
	left: auto;
	right: 0;
	border-radius: 0 0 0 10px;
	background: linear-gradient(135deg, #f5c542, #d99a1a);
	color: #3b2a05;
}

.ewl-reward__body {
	flex: 1 1 auto;
	padding: 14px 16px 16px;
}

.ewl-reward__cat {
	display: block;
	margin-bottom: 5px;
	color: var(--ewl-accent);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.9px;
	text-transform: uppercase;
}

.ewl-club .ewl-reward__title {
	margin: 0;
	color: var(--ewl-ink);
	font-family: inherit;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.2px;
}

.ewl-reward__title a {
	color: inherit;
	text-decoration: none;
}

.ewl-reward__desc {
	margin: 8px 0 0;
	color: var(--ewl-slate);
	font-size: 13.5px;
	line-height: 1.45;
}

/* The navy cost bar: bone, then the number over the word in gold — the same
   block as the balance pill, so the two read as one currency. */
.ewl-reward__bar {
	display: flex;
	align-items: center;
	padding: 11px 16px;
	background: var(--ewl-ink-deep);
	color: #fff;
}

.ewl-reward__cost {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	line-height: 1;
}

.ewl-reward__costnum b {
	display: block;
	font-size: 25px;
	font-weight: 800;
	letter-spacing: -0.5px;
}

.ewl-reward__costnum i {
	display: block;
	margin-top: 3px;
	color: var(--ewl-treat);
	font-size: 13px;
	font-style: normal;
	font-weight: 800;
	letter-spacing: 0.3px;
}

.ewl-reward__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 16px;
	background: #fff;
}

.ewl-reward__foot .ewl-btn {
	width: 100%;
}

.ewl-reward__need {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 100%;
}

.ewl-reward__need .ewl-progress__bar {
	max-width: none;
	width: 100%;
}

.ewl-reward__need .ewl-progress__bar i {
	background: var(--ewl-accent);
}

.ewl-reward__need b {
	color: var(--ewl-navy);
	font-size: 12.5px;
}

.ewl-reward__note {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ewl-muted);
	font-size: 13px;
	font-weight: 600;
}

.ewl-reward.is-coming_soon .ewl-reward__photo img,
.ewl-reward.is-sold_out .ewl-reward__photo img {
	filter: grayscale(0.6);
	opacity: 0.85;
}

.ewl-reward--compact .ewl-reward__body {
	padding: 12px 13px 13px;
}

.ewl-reward--compact .ewl-reward__title {
	font-size: 16px;
}

.ewl-reward--compact .ewl-reward__bar {
	padding: 9px 13px;
}

.ewl-reward--compact .ewl-reward__costnum b {
	font-size: 20px;
}

.ewl-reward--compact .ewl-reward__costnum i {
	font-size: 11px;
}

.ewl-reward--compact .ewl-reward__foot {
	padding: 10px 13px;
}

.ewl-card--wide {
	grid-column: 1 / -1;
}


/* ---------------------------------------------------------- promo band */

.ewl-promo {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 290px;
	align-items: center;
	gap: 22px;
	overflow: hidden;
	margin: 26px 0 18px;
	padding: 26px 0 26px 30px;
	border-radius: 18px;
	background: linear-gradient(110deg, #dbe9f0, #edf5f8 65%, #f8fbfc);
	border: 1px solid #c8dee7;
}

.ewl-promo__copy {
	position: relative;
	z-index: 2;
}

.ewl-club .ewl-promo__copy h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	color: var(--ewl-ink);
	font-size: 26px;
	font-weight: 800;
}

.ewl-promo__heart {
	display: inline-flex;
	color: var(--ewl-gold);
	scale: 1.14 0.92;
}

.ewl-promo__copy p {
	max-width: 560px;
	margin: 0 0 16px;
	color: #2c4a63;
	font-size: 15px;
	font-weight: 500;
}

/* the pale bone lying behind the copy in the artwork */
.ewl-promo__bone {
	position: absolute;
	right: 6%;
	bottom: -6px;
	color: #d8ae63;
	opacity: 0.4;
	transform: rotate(-14deg);
	pointer-events: none;
}

.ewl-promo__badge {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.ewl-promo__rays {
	display: inline-flex;
	color: var(--ewl-sea);
	opacity: 0.85;
}

.ewl-promo__rays--r {
	transform: scaleX(-1);
}

.ewl-promo__disc {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	width: 178px;
	height: 178px;
	border-radius: 50%;
	padding: 22px;
	background: linear-gradient(160deg, #17909f 0%, var(--ewl-sea-deep) 78%);
	color: #fff;
	text-align: center;
	box-shadow:
		inset 0 3px 0 rgba(255, 255, 255, 0.3),
		0 10px 26px rgba(11, 107, 125, 0.32);
}

.ewl-promo__gloss {
	position: absolute;
	top: -42%;
	left: -22%;
	width: 118%;
	height: 118%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 58%, transparent 72%);
	transform: rotate(-16deg);
	pointer-events: none;
}

.ewl-promo__disc b {
	position: relative;
	z-index: 1;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

/* the pets lean in from the right and run off the panel, as in the artwork */
.ewl-heropets--promo {
	position: relative;
	z-index: 1;
	align-self: end;
	justify-self: end;
	max-width: 290px;
	margin-bottom: -26px;
}

.ewl-heropets--promo img {
	max-height: 240px;
}

/* ------------------------------------------------------------ trust row */

.ewl-trustrow {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 0 0 22px;
	padding: 24px 10px;
	list-style: none;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}

.ewl-trustrow li {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: 3px 14px;
	align-items: center;
	padding: 4px 20px;
}

.ewl-trustrow li + li {
	border-left: 1px solid #eceff2;
}

.ewl-trustrow .ewl-i {
	grid-row: 1 / 3;
	justify-self: center;
	color: var(--ewl-ink);
}

.ewl-trustrow b {
	align-self: end;
	color: var(--ewl-ink);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.ewl-trustrow span {
	align-self: start;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.45;
	color: #41566a;
}

/* --------------------------------------------------------------- band */

.ewl-band {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 26px 0 0;
	padding: 18px 24px;
	border-radius: 16px;
	color: #fff;
}

.ewl-band--teal {
	background: linear-gradient(110deg, var(--ewl-sea-deep), var(--ewl-sea));
}

/* The strip that closes the Rewards page: navy, paws either side, the line
   in the club's script hand. */
.ewl-band--navy {
	justify-content: center;
	gap: 40px;
	background: var(--ewl-ink-deep);
}

/*
 * In the artwork it runs the full width of the page and its top edge sweeps
 * up out of the left margin, so it reaches past the 1180px column. `.ewl-club`
 * clips the overflow rather than hiding it, which would kill the sticky bar.
 */
.ewl-band--full {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: -40px;
	padding: 22px 24px;
	border-radius: 0;
}

/*
 * The club reserves space under its content — 90px, or 78px on phones so the
 * fixed tab bar never covers the last card. The closing band is meant to run
 * to the bottom edge, so it takes that room into its own padding rather than
 * leaving a strip of page background showing beneath it.
 */
.ewl-view-rewards .ewl-club,
.ewl-view-earn-treats .ewl-club {
	padding-bottom: 0;
}

/*
 * The left end sweeps up out of the page rather than being rounded off. A
 * corner radius curves the wrong way for that, so the extra navy is a block
 * above the band with a quarter-circle bitten out of its top right.
 */
.ewl-band--full::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 100%;
	width: 190px;
	height: 56px;
	background: radial-gradient(190px 56px at 100% 0, transparent 99.4%, var(--ewl-ink-deep) 100%);
	pointer-events: none;
}

.ewl-band__paw {
	display: inline-flex;
	color: #fff;
	opacity: 0.22;
}

.ewl-band__paw--r {
	transform: scaleX(-1);
}

.ewl-band--navy .ewl-band__script {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 !important;
	font-size: 34px !important;
	color: var(--ewl-treat);
	color: #fff;
	text-align: center;
}

.ewl-band__heart {
	display: inline-flex;
	color: var(--ewl-gold);
	scale: 1.14 0.92;
}

/* Deeper teal disappears against the band, so the heart is picked out in white. */
.ewl-band--teal .ewl-band__heart {
	color: rgba(255, 255, 255, 0.9);
}

/* the heart tucked under the referral prize, as in the artwork */
.ewl-feature__heart {
	display: block;
	margin: 10px auto 0;
	color: rgba(255, 255, 255, 0.4);
	scale: 1.14 0.92;
}

.ewl-band__icon {
	display: grid;
	place-items: center;
	flex: 0 0 82px;
	width: 82px;
	height: 82px;
	border-radius: 50%;
	background: var(--ewl-ink-deep);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9);
}

.ewl-band p {
	/* Held to two lines, the way the artwork breaks it. */
	max-width: 30ch;
	margin: 0;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
}

.ewl-band__script {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	max-width: none !important;
	margin-left: auto !important;
	font-family: "Caveat", "Chewy", cursive;
	font-size: 42px !important;
	font-weight: 700;
	color: var(--ewl-treat);
	white-space: nowrap;
}

/* -------------------------------------------------------- single reward */

.ewl-back {
	margin: 0 0 12px;
}

.ewl-back .ewl-link {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	text-decoration: none;
}

.ewl-single {
	--ewl-accent: #12889c;
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
	gap: 26px;
	padding: 20px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 8px 26px rgba(15, 23, 42, 0.08);
}

.ewl-single__photo {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	background: var(--ewl-aqua);
	aspect-ratio: 3 / 2;
}

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

.ewl-single__cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	color: var(--ewl-accent);
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

.ewl-club .ewl-single__title {
	font-size: 30px;
	line-height: 1.15;
	margin: 0 0 12px;
}

.ewl-single__cost {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	font-size: 17px;
	color: var(--ewl-navy);
}

.ewl-single__bone {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ewl-ink-deep);
	color: #fff;
}

.ewl-single__cost b {
	font-size: 28px;
	font-weight: 800;
}

.ewl-single__desc {
	color: var(--ewl-slate);
	font-size: 15px;
}

.ewl-single__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 14px 0;
}

.ewl-single__cta .ewl-reward__need {
	flex: 1 1 220px;
}

.ewl-fold {
	margin: 8px 0 0;
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--ewl-bg);
}

.ewl-fold summary {
	display: flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
	font-weight: 700;
	color: var(--ewl-navy);
	font-size: 14px;
}

.ewl-fold p {
	margin: 8px 0 0;
	font-size: 13.5px;
	color: var(--ewl-slate);
}

/* ------------------------------------------------------------ redeem sheet */

.ewl-redeem__summary {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
}

.ewl-redeem__img {
	width: 84px;
	height: 56px;
	border-radius: 10px;
	object-fit: cover;
}

.ewl-redeem__title {
	display: block;
	color: var(--ewl-navy);
	font-size: 17px;
}

.ewl-redeem__cost {
	color: var(--ewl-muted);
	font-size: 13.5px;
}

.ewl-redeem__math {
	margin: 0 0 14px;
	padding: 4px 14px;
	border-radius: 12px;
	background: var(--ewl-bg);
}

.ewl-redeem__math div {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-top: 1px solid var(--ewl-line);
	font-size: 14px;
}

.ewl-redeem__math div:first-child {
	border-top: 0;
}

.ewl-redeem__math dt {
	color: var(--ewl-muted);
}

.ewl-redeem__math dd {
	margin: 0;
	font-weight: 700;
	color: var(--ewl-navy);
}

.ewl-redeem__math .is-total dd {
	color: var(--ewl-teal-deep);
	font-size: 16px;
}

.ewl-redeem__done {
	text-align: center;
}

.ewl-redeem__done .ewl-formactions {
	justify-content: center;
}

/* ------------------------------------------------------------ my rewards */

.ewl-redlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ewl-red {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.ewl-red__img {
	flex: 0 0 96px;
	display: grid;
	place-items: center;
	width: 96px;
	height: 64px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--ewl-aqua);
	color: var(--ewl-teal);
}

.ewl-red__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ewl-red__body {
	flex: 1 1 auto;
	min-width: 0;
}

.ewl-red__title {
	display: block;
	font-size: 16px;
	color: var(--ewl-navy);
}

.ewl-red__title a {
	color: inherit;
	text-decoration: none;
}

.ewl-red__meta {
	display: block;
	color: var(--ewl-muted);
	font-size: 12.5px;
}

.ewl-red__note {
	display: block;
	margin-top: 4px;
	font-size: 13.5px;
}

.ewl-red__details {
	display: block;
	margin-top: 6px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--ewl-bg);
	font-size: 13px;
}

.ewl-red__status {
	flex: 0 0 auto;
}

.ewl-status {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.ewl-status--pending { background: #fff4dd; color: #8a5a00; }
.ewl-status--approved { background: var(--ewl-aqua); color: var(--ewl-teal-deep); }
.ewl-status--fulfilled { background: #eaf6e6; color: #3f6b21; }
.ewl-status--cancelled { background: #eef0f2; color: var(--ewl-muted); }

/* ------------------------------------------------------------ more sheet */

.ewl-moresheet__treats {
	margin: 0 0 12px;
}

.ewl-morelist {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.ewl-morelist a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 4px;
	border-top: 1px solid var(--ewl-line);
	color: var(--ewl-navy);
	font-size: 15.5px;
	font-weight: 600;
	text-decoration: none;
}

.ewl-morelist li:first-child a {
	border-top: 0;
}

.ewl-morelist .ewl-i:first-child {
	color: var(--ewl-teal);
}

.ewl-morelist__chev {
	margin-left: auto;
	color: var(--ewl-muted);
}

.ewl-moresheet__out {
	margin: 0;
}

.ewl-tabbar button {
	border: 0;
	background: none;
	cursor: pointer;
}

/* ------------------------------------------------------------- tablet */

@media (max-width: 1180px) {
	.ewl-earngrid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.ewl-pagehero {
		grid-template-columns: minmax(0, 1fr);
		padding: 28px 24px;
	}

	.ewl-pagehero__l1 { font-size: 38px; }
	.ewl-pagehero__l2,
	.ewl-pagehero__l3 { font-size: 60px; }

	.ewl-pagehero__bone svg {
		width: 66px;
		height: 66px;
	}

	.ewl-heropets {
		display: none;
	}

	.ewl-pagehero--rewards .ewl-pagehero__title {
		margin-left: 0;
	}

	.ewl-doodles {
		display: none;
	}

	.ewl-promo {
		grid-template-columns: minmax(0, 1fr) auto;
		padding-right: 26px;
	}

	.ewl-heropets--promo {
		display: none;
	}

	.ewl-rewardgrid--dash {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ewl-trustrow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ewl-trustrow li:nth-child(3) {
		border-left: 0;
	}

	.ewl-single {
		grid-template-columns: minmax(0, 1fr);
	}

	.ewl-feature {
		grid-template-columns: minmax(0, 1fr);
	}

	.ewl-feature__prize {
		display: flex;
		align-items: baseline;
		justify-content: flex-start;
		gap: 10px;
	}

	.ewl-feature__prize b { font-size: 40px; }

	.ewl-more {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ewl-more__item + .ewl-more__item {
		border-left: 0;
	}

	.ewl-steps3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.ewl-steps3 li:not(:last-child)::after {
		display: none;
	}

	.ewl-steps3 li {
		padding-right: 0;
	}
}

/* -------------------------------------------------------------- phone */

@media (max-width: 640px) {
	.ewl-hello__actions {
		justify-content: space-between;
	}

	.ewl-pagehero {
		padding: 22px 18px;
		border-radius: 18px;
	}

	.ewl-pagehero__l1 { font-size: 28px; }
	.ewl-pagehero__l2,
	.ewl-pagehero__l3 { font-size: 44px; }

	.ewl-pagehero__bone svg {
		width: 48px;
		height: 48px;
	}

	.ewl-band p {
		font-size: 17px;
	}

	.ewl-band__script {
		font-size: 30px !important;
	}
	.ewl-pagehero__tag { font-size: 17px; }

	.ewl-club .ewl-sectionhead {
		font-size: 16px;
		gap: 8px;
	}

	.ewl-earngrid,
	.ewl-rewardgrid,
	.ewl-rewardgrid--dash,
	.ewl-trustrow {
		grid-template-columns: minmax(0, 1fr);
	}

	.ewl-club .ewl-reward__title {
		font-size: 18px;
	}

	.ewl-more {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ewl-balance {
		grid-template-columns: minmax(0, 1fr);
		padding: 18px;
	}

	.ewl-balance__num b { font-size: 34px; }

	.ewl-balance__stats {
		gap: 10px;
	}

	.ewl-balance__stats div {
		flex: 1 1 0;
		min-width: 0;
	}

	.ewl-balstrip {
		display: block;
		max-width: none;
	}

	.ewl-balstrip__num {
		min-width: 0;
	}

	.ewl-feature {
		padding: 22px 18px;
	}

	.ewl-club .ewl-feature__title { font-size: 27px; }

	.ewl-promo {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
		padding: 22px 18px;
	}

	.ewl-promo__badge {
		justify-self: center;
	}

	.ewl-promo__bone {
		display: none;
	}

	.ewl-band--full {
		gap: 16px;
		padding: 18px 16px 96px;
	}

	.ewl-view-earn-treats .ewl-band--teal {
		margin-bottom: 78px;
	}

	.ewl-band--full::before {
		width: 110px;
		height: 30px;
		background: radial-gradient(110px 30px at 100% 0, transparent 99.4%, var(--ewl-ink-deep) 100%);
	}

	.ewl-trustrow li + li {
		border-left: 0;
		border-top: 1px solid #eceff2;
	}

	.ewl-band {
		flex-wrap: wrap;
	}

	.ewl-band__script {
		margin-left: 0 !important;
	}

	.ewl-red {
		flex-wrap: wrap;
	}

	.ewl-red__status {
		order: -1;
		flex: 1 1 100%;
	}

	.ewl-cats {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-right: -14px;
		padding-right: 14px;
		padding-bottom: 2px;
	}

	.ewl-cats::-webkit-scrollbar {
		display: none;
	}

	.ewl-club .ewl-cat {
		flex: 0 0 auto;
	}

	.ewl-chips--filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-right: -14px;
		padding-right: 14px;
	}

	.ewl-chips--filters::-webkit-scrollbar {
		display: none;
	}

	.ewl-chips--filters .ewl-chip {
		flex: 0 0 auto;
	}
}

/* The bar needs room for five links, the pill, Account and Log out; below
   this the tab bar takes over. */
@media (max-width: 1024px) {
	.ewl-nav__list,
	.ewl-nav__out,
	.ewl-nav__account {
		display: none;
	}

	.ewl-nav--guest .ewl-nav__list--guest {
		display: none;
	}

	.ewl-nav__right {
		margin-left: auto;
	}

	.ewl-nav__inner {
		justify-content: space-between;
	}

	.ewl-account__out {
		display: block;
		margin-top: 14px;
	}

	.ewl-club {
		padding-bottom: 78px;
	}

	.ewl-tabbar {
		position: fixed;
		z-index: 900;
		right: 0;
		bottom: 0;
		left: 0;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1px solid var(--ewl-line);
	}

	.ewl-tabbar > * {
		display: grid;
		gap: 2px;
		justify-items: center;
		padding: 4px 2px;
		color: var(--ewl-muted);
		font-size: 11px;
		font-weight: 600;
		text-decoration: none;
	}

	.ewl-tabbar > *[aria-current="page"] {
		color: var(--ewl-teal);
	}

	.ewl-tabbar__icon {
		position: relative;
		display: block;
	}

	.ewl-tabbar__icon b {
		position: absolute;
		top: -4px;
		right: -8px;
		min-width: 16px;
		padding: 0 4px;
		border-radius: 999px;
		background: var(--ewl-coral);
		color: #fff;
		font-size: 10px;
		line-height: 16px;
		text-align: center;
	}
}

/* "Why we ask" — the line above the add-a-pet wizard. Deliberately quieter
   than .ewl-note, which is reserved for something the member has to act on. */
.ewl-why {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 14px;
	padding: 12px 15px;
	border-radius: 12px;
	background: #f2f7fb;
	color: #40566c;
	font-size: 13.5px;
	line-height: 1.5;
	text-align: left;
}

.ewl-why__mark {
	flex: none;
	margin-top: 1px;
	color: var(--ewl-treat);
}