/* ============================================================
   Cell Loyalty — My Account points panel
   Minimal treatment. Hairlines and whitespace carry the structure;
   there are no filled containers and no bordered cards. The account
   card supplies the surface.
   ============================================================ */

.cell-loyalty {
	--ca-ink:    #1F1215;
	--ca-rose:   #6B3347;
	--ca-pink:   #D4849E;
	--ca-gold:   #C9A96E;
	--ca-hair:   rgba(201, 169, 110, 0.22);
	--ca-hair-2: rgba(201, 169, 110, 0.16);
	--ca-grey:   #888080;
	--ca-quiet:  #B0A8A4;
	--ca-faint:  #C8C0BC;
	--ca-fainter:#D8D0CC;

	font-family: 'Lato', sans-serif;
	color: var(--ca-ink);
	background: none;
	border: none;
	padding: 0;
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: 'lnum' 1, 'tnum' 1;
}

.cell-loyalty * { box-sizing: border-box; }

/* Playfair defaults to oldstyle figures, so a zero renders as a lowercase o.
   Lining figures are forced on every numeral in the panel. */
.cell-loyalty .cell-balance,
.cell-loyalty .cell-node__meta,
.cell-loyalty .cell-reward__value,
.cell-loyalty .cell-reward__points,
.cell-loyalty .cell-ledger__pts {
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: 'lnum' 1, 'tnum' 1;
}

/* ---------- rhythm ---------- */

.cell-loyalty .cell-block {
	padding: 56px 0 0;
	margin: 56px 0 0;
	border-top: 1px solid var(--ca-hair);
}

.cell-loyalty .cell-block--first {
	padding-top: 0;
	margin-top: 0;
	border-top: none;
}

/* ---------- shared type ---------- */

.cell-loyalty .cell-label {
	font-size: 10px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ca-quiet);
	font-weight: 300;
	margin: 0;
	line-height: 1;
}

.cell-loyalty .cell-note {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 20px;
	line-height: 1.5;
	color: var(--ca-grey);
	margin: 20px 0 0;
}

.cell-loyalty .cell-note--tight { margin-top: 16px; }
.cell-loyalty .cell-note .amount { font-style: italic; }

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

.cell-loyalty .cell-balance {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-size: 82px;
	line-height: 0.9;
	letter-spacing: -0.01em;
	color: var(--ca-ink);
	margin: 22px 0 0;
}

.cell-loyalty .cell-milestone-line {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 14px;
	margin: 26px 0 0;
}

.cell-loyalty .cell-milestone-name {
	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-size: 19px;
	color: var(--ca-rose);
}

.cell-loyalty .cell-milestone-dash {
	width: 16px;
	height: 1px;
	background: rgba(201, 169, 110, 0.5);
	align-self: center;
}

.cell-loyalty .cell-milestone-note {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ca-quiet);
}

/* ---------- journey ---------- */

.cell-loyalty .cell-track {
	position: relative;
	margin: 48px 0 0;
}

.cell-loyalty .cell-track__line,
.cell-loyalty .cell-track__fill {
	position: absolute;
	top: 3px;
	height: 1px;
}

.cell-loyalty .cell-track__line {
	left: 0;
	right: 0;
	background: var(--ca-hair-2);
}

.cell-loyalty .cell-track__fill {
	left: 0;
	width: 0;
	background: var(--ca-gold);
	transition: width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.cell-loyalty .cell-track.is-revealed .cell-track__fill { width: var(--ca-fill, 0); }

.cell-loyalty .cell-track__nodes {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.cell-loyalty .cell-node {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.cell-loyalty .cell-node:first-child { text-align: left; }
.cell-loyalty .cell-node:last-child  { text-align: right; }

.cell-loyalty .cell-node__dot {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #FFFFFF;
	border: 1px solid rgba(201, 169, 110, 0.5);
	margin: 0 auto;
	transition: background 0.5s ease, border-color 0.5s ease;
}

.cell-loyalty .cell-node:first-child .cell-node__dot { margin-left: 0; }
.cell-loyalty .cell-node:last-child  .cell-node__dot { margin-right: 0; }

.cell-loyalty .cell-node--done .cell-node__dot {
	background: var(--ca-gold);
	border-color: var(--ca-gold);
}

.cell-loyalty .cell-node--now .cell-node__dot {
	background: var(--ca-rose);
	border-color: var(--ca-rose);
}

.cell-loyalty .cell-node__name {
	display: block;
	font-family: 'Playfair Display', serif;
	font-size: 15px;
	color: var(--ca-faint);
	margin: 26px 0 0;
}

.cell-loyalty .cell-node--done .cell-node__name { color: var(--ca-quiet); }

.cell-loyalty .cell-node--now .cell-node__name {
	font-style: italic;
	font-size: 16px;
	color: var(--ca-ink);
}

.cell-loyalty .cell-node__meta {
	display: block;
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--ca-fainter);
	margin: 6px 0 0;
}

/* ---------- what lies ahead ---------- */

.cell-loyalty .cell-ahead {
	margin: 64px 0 0;
	max-width: 460px;
}

.cell-loyalty .cell-ahead__head {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-size: 26px;
	line-height: 1.32;
	color: var(--ca-ink);
	margin: 0;
}

.cell-loyalty .cell-ahead__head em {
	font-style: italic;
	color: var(--ca-pink);
}

.cell-loyalty .cell-ahead__body {
	font-family: 'Cormorant Garamond', serif;
	font-size: 20px;
	line-height: 1.7;
	color: var(--ca-grey);
	margin: 18px 0 0;
}

/* ---------- gift chooser ---------- */

.cell-loyalty .cell-gift-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 28px;
	margin: 32px 0 0;
}

.cell-loyalty .cell-gift {
	background: none;
	border: none;
	border-bottom: 1px solid transparent;
	padding: 0 0 12px;
	margin: 0;
	cursor: pointer;
	text-align: left;
	font-family: 'Lato', sans-serif;
	transition: border-color 0.4s ease;
}

.cell-loyalty .cell-gift:hover,
.cell-loyalty .cell-gift.is-chosen { border-bottom-color: var(--ca-gold); }

.cell-loyalty .cell-gift img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 14px;
}

.cell-loyalty .cell-gift__name {
	display: block;
	font-family: 'Playfair Display', serif;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ca-ink);
}

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

.cell-loyalty .cell-rewards {
	list-style: none;
	margin: 36px 0 0;
	padding: 0;
}

.cell-loyalty .cell-reward {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: baseline;
	gap: 32px;
	padding: 22px 0;
	margin: 0;
	border-top: 1px solid var(--ca-hair);
}

.cell-loyalty .cell-reward:first-child { border-top: none; padding-top: 0; }

.cell-loyalty .cell-reward__value {
	font-family: 'Playfair Display', serif;
	font-size: 28px;
	line-height: 1;
	color: var(--ca-ink);
}

.cell-loyalty .cell-reward.is-ahead .cell-reward__value { color: var(--ca-faint); }

.cell-loyalty .cell-reward__points {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ca-quiet);
}

.cell-loyalty .cell-reward.is-ahead .cell-reward__points { color: var(--ca-fainter); }

/* A text action, not a button. A greyed-out button reads as a broken
   control; italic prose reads as something still ahead of you. */
.cell-loyalty .cell-redeem {
	font-family: 'Lato', sans-serif;
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ca-rose);
	background: none;
	border: none;
	border-bottom: 1px solid transparent;
	padding: 0 0 3px;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.35s ease, opacity 0.35s ease;
}

.cell-loyalty .cell-redeem:hover { border-bottom-color: var(--ca-gold); }
.cell-loyalty .cell-redeem[disabled] { opacity: 0.4; cursor: default; }

.cell-loyalty .cell-awaiting {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 16px;
	color: var(--ca-faint);
	white-space: nowrap;
}

.cell-loyalty .cell-fine {
	font-size: 12px;
	line-height: 1.8;
	color: var(--ca-quiet);
	margin: 32px 0 0;
	max-width: 460px;
}

.cell-loyalty .cell-result {
	margin: 32px 0 0;
	padding: 0 0 0 20px;
	border-left: 1px solid var(--ca-gold);
	border-radius: 0;
	font-family: 'Cormorant Garamond', serif;
	font-size: 19px;
	line-height: 1.6;
	color: var(--ca-ink);
}

.cell-loyalty .cell-result code {
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	letter-spacing: 0.16em;
	color: var(--ca-rose);
	background: none;
	padding: 0;
}

.cell-loyalty .cell-result.is-error {
	border-left-color: var(--ca-fainter);
	color: var(--ca-grey);
}

/* ---------- activity fold ---------- */

.cell-loyalty .cell-fold summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.cell-loyalty .cell-fold summary::-webkit-details-marker { display: none; }
.cell-loyalty .cell-fold summary::marker { content: ''; }

.cell-loyalty .cell-fold summary:focus-visible {
	outline: 1px solid var(--ca-gold);
	outline-offset: 8px;
}

/* Chevron drawn from two borders — no icon font dependency. */
.cell-loyalty .cell-fold__mark {
	width: 7px;
	height: 7px;
	border-right: 1px solid var(--ca-quiet);
	border-bottom: 1px solid var(--ca-quiet);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.35s ease;
	flex-shrink: 0;
}

.cell-loyalty .cell-fold[open] .cell-fold__mark {
	transform: rotate(-135deg) translate(-3px, -3px);
}

.cell-loyalty .cell-ledger {
	list-style: none;
	margin: 36px 0 0;
	padding: 0;
}

.cell-loyalty .cell-ledger li {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: baseline;
	gap: 28px;
	padding: 20px 0;
	margin: 0;
	font-size: 14px;
	border-top: 1px solid var(--ca-hair);
}

.cell-loyalty .cell-ledger li:first-child { border-top: none; padding-top: 0; }

.cell-loyalty .cell-ledger__note { color: var(--ca-ink); }

.cell-loyalty .cell-ledger__date {
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--ca-quiet);
	white-space: nowrap;
}

.cell-loyalty .cell-ledger__pts {
	font-family: 'Playfair Display', serif;
	font-size: 17px;
	min-width: 64px;
	text-align: right;
}

.cell-loyalty .cell-ledger__pts.is-in  { color: var(--ca-rose); }
.cell-loyalty .cell-ledger__pts.is-out { color: var(--ca-faint); }

/* ---------- cart / checkout earn row ---------- */

.cell-earn-row th,
.cell-earn-row td {
	font-size: 13px !important;
	color: #888080 !important;
}

.cell-earn-mult {
	display: inline-block;
	margin-left: 8px;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 15px;
	color: #C9A96E;
}

.cell-hint { font-size: 12px; color: #888080; }

/* ---------- responsive ---------- */

@media (max-width: 782px) {

	.cell-loyalty .cell-block { padding-top: 40px; margin-top: 40px; }

	.cell-loyalty .cell-balance { font-size: 58px; }
	.cell-loyalty .cell-ahead__head { font-size: 22px; }
	.cell-loyalty .cell-ahead { margin-top: 44px; }
	.cell-loyalty .cell-note { font-size: 18px; }

	/* Vertical timeline, with the rail turning gold as milestones pass. */
	.cell-loyalty .cell-track { margin-top: 36px; }
	.cell-loyalty .cell-track__line,
	.cell-loyalty .cell-track__fill { display: none; }

	.cell-loyalty .cell-track__nodes { grid-template-columns: 1fr; }

	.cell-loyalty .cell-node,
	.cell-loyalty .cell-node:first-child,
	.cell-loyalty .cell-node:last-child {
		display: grid;
		grid-template-columns: 7px 1fr;
		column-gap: 20px;
		align-items: start;
		text-align: left;
		position: relative;
		padding-bottom: 26px;
	}

	.cell-loyalty .cell-node:last-child { padding-bottom: 0; }

	.cell-loyalty .cell-node:not(:last-child)::before {
		content: '';
		position: absolute;
		left: 3px;
		top: 12px;
		bottom: 2px;
		width: 1px;
		background: var(--ca-hair-2);
	}

	.cell-loyalty .cell-node--done:not(:last-child)::before { background: var(--ca-gold); }

	.cell-loyalty .cell-node__dot,
	.cell-loyalty .cell-node:first-child .cell-node__dot,
	.cell-loyalty .cell-node:last-child .cell-node__dot {
		margin: 4px 0 0;
		grid-row: span 2;
	}

	.cell-loyalty .cell-node__name { margin: 0; }
	.cell-loyalty .cell-node__meta { grid-column: 2; margin-top: 4px; }

	.cell-loyalty .cell-reward {
		grid-template-columns: 1fr auto;
		row-gap: 6px;
		gap: 20px;
	}

	.cell-loyalty .cell-reward__points { grid-column: 1; }

	.cell-loyalty .cell-redeem,
	.cell-loyalty .cell-awaiting { grid-row: span 2; align-self: center; }

	.cell-loyalty .cell-ledger li {
		grid-template-columns: 1fr auto;
		row-gap: 6px;
		gap: 20px;
	}

	.cell-loyalty .cell-ledger__date { grid-column: 1; }
	.cell-loyalty .cell-ledger__pts { grid-row: span 2; align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
	.cell-loyalty .cell-track__fill,
	.cell-loyalty .cell-fold__mark { transition: none; }
}