/* Cigar Grail Rewards: scoped styles. Inherits theme typography and buttons;
   brand accents are exposed as CSS variables so the look can be retuned in
   one place (and overridden per-theme) without touching rules below. */

.cgr-product-box,
.cgr-catalog,
.cgr-rewards-tab {
	--cgr-gold: #bf9d6d;
	--cgr-gold-hover: #ad8a5a;
	--cgr-gold-ink: #997748;
	--cgr-ink: #1d1d1f;
	--cgr-muted: #6e6e73;
	--cgr-surface: #fbfbfd;
	--cgr-border: #e3e3e8;
	--cgr-danger: #b3261e;
	--cgr-radius: 12px;
	--cgr-pill: 980px;
}

.cgr-loop-estimate {
	font-size: 0.82em;
	opacity: 0.85;
	margin-top: 0.25em;
}

/* ---- Product page: light Reward Points ring card ---- */
.reward-points {
	--rp-gold: #b8935f;
	--rp-gold-ink: #8a6a3d;
	--rp-gold-soft: #d8c19a;
	--rp-ink: #1a1a1a;
	--rp-copy: #5a5348;
	--rp-track: #f0ece2;
	--rp-border: #e7e2d9;

	box-sizing: border-box;
	margin: 1.25em 0 0;
	max-width: 480px;
	border: 1px solid var(--rp-border);
	border-radius: 16px;
	background: #fff;
	padding: 22px;
	display: flex;
	gap: 18px;
	align-items: center;
	box-shadow: 0 1px 3px rgba( 20, 16, 8, 0.04 );
}

/* The single-product summary forces flex-direction:column on its flex
   children; keep this card horizontal regardless. */
.cgr-product-box.reward-points {
	flex-direction: row !important;
	justify-content: flex-start;
	max-width: none;
	width: 100%;
}

.reward-points__ring {
	position: relative;
	width: 76px;
	height: 76px;
	flex: none;
}

.reward-points__ring > svg {
	display: block;
}

.reward-points__ring-prog {
	transition: stroke-dashoffset 0.45s ease;
}

.reward-points__ring-label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	color: var(--rp-ink);
}

/* Star sits on the collecting ring only. The 0-2-0 selectors beat the
   generic ".reward-points__ring > svg { display:block }" above. */
.reward-points .reward-points__ring-star {
	position: absolute;
	inset: 0;
	margin: auto;
	display: none;
}

.reward-points--collecting .reward-points__ring-label {
	display: none;
}

.reward-points--collecting .reward-points__ring-star {
	display: block;
}

.reward-points__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.reward-points__eyebrow {
	font-size: 13px;
	font-weight: 700;
	color: var(--rp-gold-ink);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.reward-points__copy {
	font-size: 15px;
	color: var(--rp-copy);
	line-height: 1.4;
}

.reward-points__copy strong {
	color: var(--rp-ink);
}

.reward-points__btn {
	font-weight: 700;
	cursor: pointer;
	border-radius: 999px;
	font-family: inherit;
	text-decoration: none;
	align-self: flex-start;
}

.reward-points__body > .cgr-redeem-form {
	margin: 4px 0 0;
	align-self: flex-start;
}



.reward-points .reward-points__btn--solid:hover {
	background: #a9834f;
	color: #fff;
}

.reward-points__btn--outline {
	margin-top: 4px;
	padding: 9px 18px;
	border: 1.5px solid var(--rp-gold);
	background: transparent;
	color: var(--rp-gold-ink);
	font-size: 13px;
	display: inline-block;
}

.reward-points__btn[disabled],
.reward-points .cgr-redeem-btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

@media ( max-width: 380px ) {
	.reward-points {
		gap: 14px;
		padding: 18px;
	}
}

/* Catalog: gold pill button (light context). */
.cgr-catalog .cgr-redeem-btn {
	display: block;
	width: 100%;
	background: var(--cgr-gold, #bf9d6d);
	color: var(--cgr-ink, #1d1d1f);
	border: 1px solid var(--cgr-gold, #bf9d6d);
	border-radius: var(--cgr-pill, 980px);
	font-weight: 600;
	min-height: 52px;
	text-transform: none;
	box-shadow: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.cgr-catalog .cgr-redeem-btn:hover {
	background: var(--cgr-gold-hover, #ad8a5a);
	border-color: var(--cgr-gold-hover, #ad8a5a);
}

.cgr-catalog .cgr-redeem-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.cgr-signin-note a {
	color: var(--cgr-gold-ink, #997748);
}

/* ---- My Account: Rewards tab ---- */
/* Dark, glassy, gold "Grail Rewards" panel. Self-contained (own dark surface)
   so it reads correctly whether the surrounding My Account page is dark or
   light. All accents are variables so the palette can be retuned in one place. */
.cgr-rewards-tab {
	--rt-gold: #d6ab5e;
	--rt-gold-bright: #e4c57f;
	--rt-gold-deep: #c9a25a;
	--rt-cream: #e6d9be;
	--rt-cream-strong: #ebe7df;
	--rt-ink: #241c0c;
	--rt-muted: rgba( 230, 217, 190, 0.55 );
	--rt-line: rgba( 255, 255, 255, 0.09 );
	--rt-plus: #e4c57f;
	--rt-minus: #ec9a9a;

	position: relative;
	overflow: hidden;
	border-radius: 26px;
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	background:
		radial-gradient( 900px 480px at 15% -8%, rgba( 150, 132, 104, 0.16 ), transparent 60% ),
		radial-gradient( 760px 440px at 96% 14%, rgba( 110, 96, 80, 0.18 ), transparent 58% ),
		linear-gradient( 180deg, rgba( 30, 29, 28, 0.97 ), rgba( 15, 15, 16, 0.99 ) );
	color: var(--rt-cream);
	padding: clamp( 20px, 3.4vw, 34px );
	-webkit-font-smoothing: antialiased;
}

.cgr-rewards-tab a { box-shadow: none; }

/* Header: wordmark + member pill. */
.cgr-rt-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 2px 4px 22px;
}
.cgr-rt-brand { display: flex; align-items: center; gap: 12px; }
.cgr-rt-wordmark {
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: 0.2px;
	color: var(--rt-cream-strong);
}
.cgr-rt-tier {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid rgba( 214, 171, 94, 0.35 );
	background: rgba( 214, 171, 94, 0.08 );
}
.cgr-rt-tier span:last-child {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: var(--rt-gold-bright);
}
.cgr-rt-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--rt-gold);
	box-shadow: 0 0 8px var(--rt-gold);
}

/* Hero: available balance | redeemable value + actions. */
.cgr-rt-hero {
	position: relative;
	overflow: hidden;
	border-radius: 22px;
	border: 1px solid rgba( 255, 255, 255, 0.09 );
	background: linear-gradient( 160deg, rgba( 255, 255, 255, 0.06 ), rgba( 255, 255, 255, 0.015 ) );
	padding: clamp( 26px, 3vw, 44px );
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp( 24px, 4vw, 48px );
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.cgr-rt-hero-balance { min-width: 200px; }
.cgr-rt-eyebrow {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rt-muted);
	margin-bottom: 12px;
}
.cgr-rt-eyebrow--gold { color: var(--rt-gold-deep); }
.cgr-rt-balance-num {
	font-size: clamp( 3.4rem, 11vw, 6.4rem );
	line-height: 0.9;
	font-weight: 800;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	background: linear-gradient( 180deg, #fbeec4 0%, #e7c982 42%, #bf9550 100% );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #e7c982;
}
.cgr-rt-balance-unit {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--rt-cream);
	margin-top: 14px;
}
.cgr-rt-hero-value {
	flex: 1;
	min-width: 250px;
	max-width: 420px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-left: clamp( 0px, 3vw, 44px );
	border-left: 1px solid rgba( 255, 255, 255, 0.08 );
}
.cgr-rt-value-num {
	font-size: clamp( 2.2rem, 5vw, 2.75rem );
	font-weight: 800;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	color: var(--rt-gold-bright);
	line-height: 1;
	margin-top: 2px;
}
.cgr-rt-value-note {
	font-size: 0.8rem;
	color: rgba( 228, 197, 127, 0.6 );
	margin-top: 10px;
}
.cgr-rt-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}
.cgr-rt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	text-decoration: none;
	cursor: pointer;
	padding: 14px 24px;
	border-radius: 12px;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--rt-ink) !important;
	background: linear-gradient( 135deg, #f7e4a8, #d6ab5e );
	box-shadow: 0 8px 24px rgba( 214, 171, 94, 0.3 );
	border: 0;
	transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cgr-rt-btn:hover {
	filter: brightness( 1.05 );
	box-shadow: 0 10px 30px rgba( 214, 171, 94, 0.45 );
	transform: translateY( -1px );
	color: var(--rt-ink) !important;
}
.cgr-rt-textlink {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 600;
	color: rgba( 230, 217, 190, 0.75 ) !important;
	padding: 6px 2px;
	transition: color .15s ease, gap .15s ease;
}
.cgr-rt-textlink:hover { color: var(--rt-cream-strong) !important; gap: 10px; }

/* Stats: two labelled groups (Pending / Lifetime), each with two tiles. */
.cgr-rt-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 16px;
}
.cgr-rt-statgroup { display: flex; flex-direction: column; }
.cgr-rt-group { display: flex; align-items: center; gap: 12px; padding: 6px 6px 14px; }
.cgr-rt-group span:first-child {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--rt-muted);
	white-space: nowrap;
}
.cgr-rt-statgroup--gold .cgr-rt-group span:first-child { color: var(--rt-gold-deep); }
.cgr-rt-rule { flex: 1; height: 1px; background: linear-gradient( 90deg, rgba( 255, 255, 255, 0.18 ), transparent ); }
.cgr-rt-statgroup--gold .cgr-rt-rule { background: linear-gradient( 90deg, rgba( 214, 171, 94, 0.35 ), transparent ); }
.cgr-rt-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cgr-rt-tile {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	background: linear-gradient( 180deg, rgba( 255, 255, 255, 0.05 ), rgba( 255, 255, 255, 0.012 ) );
	padding: 26px 22px;
}
.cgr-rt-statgroup--gold .cgr-rt-tile::before {
	content: "";
	position: absolute;
	top: 0;
	left: 18px;
	right: 18px;
	height: 1px;
	background: linear-gradient( 90deg, transparent, rgba( 214, 171, 94, 0.5 ), transparent );
}
.cgr-rt-tile-num {
	font-size: clamp( 1.8rem, 4vw, 2.15rem );
	font-weight: 800;
	color: #f1e6cf;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	line-height: 1;
	white-space: nowrap;
}
.cgr-rt-tile-label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: rgba( 230, 217, 190, 0.55 );
	margin-top: 8px;
}

/* History. */
.cgr-rt-history-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 40px;
	margin-bottom: 16px;
}
.cgr-rt-h3 {
	margin: 0;
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--rt-cream-strong);
	letter-spacing: -0.01em;
}
.cgr-rt-filters {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px;
	border-radius: 12px;
	background: rgba( 255, 255, 255, 0.05 );
	border: 1px solid rgba( 255, 255, 255, 0.08 );
}
.cgr-rt-pill {
	padding: 8px 15px;
	border-radius: 9px;
	font-size: 0.8rem;
	font-weight: 600;
	color: rgba( 230, 217, 190, 0.65 ) !important;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease, background .15s ease;
}
.cgr-rt-pill:hover { color: var(--rt-cream-strong) !important; }
.cgr-rt-pill.is-active {
	color: var(--rt-ink) !important;
	background: linear-gradient( 135deg, #f7e4a8, #d6ab5e );
}

.cgr-table-wrap {
	overflow-x: auto;
	border-radius: 16px;
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	background: linear-gradient( 180deg, rgba( 255, 255, 255, 0.04 ), rgba( 255, 255, 255, 0.012 ) );
}
.cgr-rewards-tab .cgr-history-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	border: 0;
	background: transparent;
	min-width: 460px;
}
.cgr-rewards-tab .cgr-history-table thead th {
	text-align: left;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba( 230, 217, 190, 0.5 );
	padding: 16px 18px;
	border: 0;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.07 );
	background: transparent;
	white-space: nowrap;
}
.cgr-rewards-tab .cgr-history-table tbody td {
	padding: 20px 18px;
	border: 0;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.06 );
	font-size: 0.9rem;
	color: var(--rt-cream);
	vertical-align: middle;
}
.cgr-rewards-tab .cgr-history-table tbody tr:last-child td { border-bottom: 0; }
.cgr-rewards-tab .cgr-history-table tbody tr:hover { background: rgba( 255, 255, 255, 0.03 ); }
.cgr-rewards-tab .cgr-history-table a { color: var(--rt-gold-bright); text-decoration: none; }
.cgr-rewards-tab .cgr-history-table a:hover { text-decoration: underline; }
.cgr-rewards-tab .cgr-history-table th:nth-child(3),
.cgr-rewards-tab .cgr-history-table th:nth-child(4),
.cgr-rewards-tab .cgr-history-table td:nth-child(3),
.cgr-rewards-tab .cgr-history-table td:nth-child(4) {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.cgr-history-table td.cgr-plus { color: var(--rt-plus); font-weight: 700; }
.cgr-history-table td.cgr-minus { color: var(--rt-minus); font-weight: 700; }
.cgr-rt-dash { color: rgba( 230, 217, 190, 0.35 ); }

/* Email preferences toggle (marketing consent). */
.cgr-rewards-tab .cgr-rt-emailpref {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid rgba( 255, 255, 255, 0.07 );
}
.cgr-rewards-tab .cgr-rt-emailpref-label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--rt-cream);
	font-size: 0.9rem;
	cursor: pointer;
}
.cgr-rewards-tab .cgr-rt-emailpref-label input { width: 16px; height: 16px; accent-color: var(--rt-gold-bright); }
.cgr-rewards-tab .cgr-rt-emailpref .cgr-rt-textlink { background: none; border: 0; padding: 0; cursor: pointer; }
.cgr-rewards-tab .cgr-rt-saved { color: var(--rt-plus); font-size: 0.82rem; }

/* Status pill in history rows. */
.cgr-rt-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}
.cgr-rt-status-dot { width: 6px; height: 6px; border-radius: 50%; }
.cgr-rt-status.is-active {
	background: rgba( 111, 191, 142, 0.12 );
	border: 1px solid rgba( 111, 191, 142, 0.3 );
	color: #8fd6ac;
}
.cgr-rt-status.is-active .cgr-rt-status-dot { background: #6fbf8e; box-shadow: 0 0 7px #6fbf8e; }
.cgr-rt-status.is-void {
	background: rgba( 236, 154, 154, 0.1 );
	border: 1px solid rgba( 236, 154, 154, 0.28 );
	color: #ecb0b0;
}
.cgr-rt-status.is-void .cgr-rt-status-dot { background: #e08a8a; }

.cgr-rewards-tab > p { color: var(--rt-muted); }

.cgr-pagination { margin: 16px 2px; display: flex; flex-wrap: wrap; gap: 6px; }
.cgr-pagination a,
.cgr-pagination .current {
	display: inline-flex;
	min-width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border-radius: 9px;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}
.cgr-pagination a { color: var(--rt-cream) !important; border: 1px solid rgba( 255, 255, 255, 0.1 ); }
.cgr-pagination a:hover { background: rgba( 255, 255, 255, 0.05 ); }
.cgr-pagination .current { color: var(--rt-ink); background: linear-gradient( 135deg, #f7e4a8, #d6ab5e ); }

.cgr-rewards-tab--history-only .cgr-rt-history-head { margin-top: 0; }

@media ( max-width: 781px ) {
	.cgr-rt-hero-value {
		border-left: 0;
		padding-left: 0;
		padding-top: 22px;
		border-top: 1px solid rgba( 255, 255, 255, 0.08 );
		max-width: none;
		width: 100%;
	}
	.cgr-rt-stats { grid-template-columns: 1fr; gap: 22px; }

	/* ------------------------------------------------------------------
	   Transaction history, mobile: every transaction becomes its own
	   free-standing card with real breathing room:

	       ┌──────────────────────────────────────────────┐
	       │ In-store purchase (receipt #10033345)   +109 │
	       │ Jul 5, 2026                    Balance 1,109 │
	       └──────────────────────────────────────────────┘

	   The outer table wrapper loses ALL of its chrome here (border,
	   background, radius) — the cards carry it instead, which is what
	   prevents nested/double borders. The theme's responsive shop_table
	   treatment (stacked label/value rows) is deliberately out-gunned.
	   ------------------------------------------------------------------ */
	.cgr-rewards-tab .cgr-table-wrap {
		overflow-x: visible;
		border: 0 !important;
		background: none !important;
		border-radius: 0;
		box-shadow: none !important;
	}
	.cgr-rewards-tab .cgr-history-table {
		min-width: 0;
		display: block;
		margin: 0 !important;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
	}
	.cgr-rewards-tab .cgr-history-table thead { display: none !important; }
	.cgr-rewards-tab .cgr-history-table tbody {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.cgr-rewards-tab .cgr-history-table tbody tr {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			'activity points'
			'date     balance';
		column-gap: 16px;
		row-gap: 7px;
		align-items: baseline;
		padding: 16px 18px !important;
		margin: 0 !important;
		border: 1px solid rgba( 255, 255, 255, 0.09 ) !important;
		border-radius: 14px;
		background: linear-gradient( 180deg, rgba( 255, 255, 255, 0.045 ), rgba( 255, 255, 255, 0.015 ) ) !important;
	}
	.cgr-rewards-tab .cgr-history-table tbody tr:hover { background: linear-gradient( 180deg, rgba( 255, 255, 255, 0.045 ), rgba( 255, 255, 255, 0.015 ) ) !important; }
	.cgr-rewards-tab .cgr-history-table tbody td {
		display: block !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		background: transparent !important;
		text-align: left !important;
		width: auto !important;
	}
	/* Kill the theme's generated "DATE / ACTIVITY / ..." labels. */
	.cgr-rewards-tab .cgr-history-table tbody td::before {
		display: none !important;
		content: none !important;
	}
	/* 1st line: what happened + the points it moved. */
	.cgr-rewards-tab .cgr-history-table tbody td:nth-child(2) {
		grid-area: activity;
		font-size: 0.94rem;
		line-height: 1.5;
		overflow-wrap: anywhere;
	}
	.cgr-rewards-tab .cgr-history-table tbody td:nth-child(3) {
		grid-area: points;
		text-align: right !important;
		font-size: 1.05rem;
		white-space: nowrap;
	}
	/* 2nd line: quiet metadata. */
	.cgr-rewards-tab .cgr-history-table tbody td:nth-child(1) {
		grid-area: date;
		font-size: 0.78rem;
		letter-spacing: 0.01em;
		color: rgba( 230, 217, 190, 0.55 );
	}
	.cgr-rewards-tab .cgr-history-table tbody td:nth-child(4) {
		grid-area: balance;
		text-align: right !important;
		font-size: 0.78rem;
		color: rgba( 230, 217, 190, 0.6 );
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}
	/* "Balance 1,109" prefix so the trailing number reads as something.
	   Both properties carry !important so the generic ::before kill above
	   can never win this one back. */
	.cgr-rewards-tab .cgr-history-table tbody td:nth-child(4)::before {
		display: inline !important;
		content: attr(data-label) ' ' !important;
		text-transform: none;
		font-weight: 400;
		color: rgba( 230, 217, 190, 0.38 );
	}
	/* Filter pills get room to breathe above the cards. */
	.cgr-rewards-tab .cgr-rt-history-head { margin-bottom: 16px; }
}

/* Catalog */
.cgr-catalog-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: center;
	margin-bottom: 1.25em;
}

.cgr-catalog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 1.25em;
}

.cgr-catalog-card {
	border: 1px solid var(--global-gray-400, #e2e2e2);
	border-radius: 8px;
	padding: 0.9em;
	display: flex;
	flex-direction: column;
	gap: 0.35em;
}

.cgr-catalog-card img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.cgr-catalog-card h4 {
	font-size: 0.95em;
	margin: 0;
}

.cgr-card-points {
	font-weight: 700;
	margin: 0;
}

.cgr-card-earn,
.cgr-card-afford {
	font-size: 0.8em;
	opacity: 0.85;
	margin: 0;
}

.cgr-card-actions {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.cgr-card-actions .button {
	text-align: center;
}

.cgr-unaffordable .cgr-card-afford {
	color: var(--global-palette-highlight, #b32d2e);
}

@media (max-width: 480px) {
	.cgr-catalog-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}
}

/* Redeemed cart lines show as free (paid with points). */
.cgr-free { font-weight: 600; }
.cgr-cart-badge {
	display: inline-block;
	margin-top: 0.25em;
	font-size: 0.82em;
	color: #8a6a3d;
}

/* ---- My Account: In-Store Purchases (KORONA sync) ---- */
/* Same dark glassy gold language as the Rewards tab. */
.cgr-instore {
	--is-gold: #d6ab5e;
	--is-gold-bright: #e4c57f;
	--is-cream: #e6d9be;
	--is-muted: rgba( 230, 217, 190, 0.55 );

	margin-top: 34px;
	border-radius: 22px;
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	background:
		radial-gradient( 620px 300px at 12% -10%, rgba( 150, 132, 104, 0.14 ), transparent 60% ),
		linear-gradient( 180deg, rgba( 30, 29, 28, 0.97 ), rgba( 15, 15, 16, 0.99 ) );
	color: var(--is-cream);
	padding: clamp( 18px, 3vw, 28px );
	-webkit-font-smoothing: antialiased;
}

.cgr-instore-head { display: flex; align-items: center; gap: 11px; }
.cgr-instore-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: #ebe7df;
	letter-spacing: -0.01em;
}
.cgr-instore-sub { margin: 8px 0 16px; font-size: 0.85rem; color: var(--is-muted); }

.cgr-instore-list {
	border-radius: 16px;
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	background: linear-gradient( 180deg, rgba( 255, 255, 255, 0.04 ), rgba( 255, 255, 255, 0.012 ) );
	overflow: hidden;
}
.cgr-instore-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 18px;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.06 );
}
.cgr-instore-row:last-child { border-bottom: 0; }
.cgr-instore-row:hover { background: rgba( 255, 255, 255, 0.03 ); }

.cgr-instore-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cgr-instore-date { font-size: 0.92rem; font-weight: 700; color: #ebe7df; }
.cgr-instore-ref { font-size: 0.78rem; color: var(--is-muted); }
.cgr-instore-items {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.8rem;
	color: rgba( 230, 217, 190, 0.75 );
}
.cgr-instore-items li {
	margin: 0;
	padding: 0 0 0 13px;
	position: relative;
	line-height: 1.5;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.cgr-instore-items li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.62em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba( 214, 171, 94, 0.75 );
}

.cgr-instore-figures { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 0 0 auto; }
.cgr-instore-total { font-size: 0.95rem; font-weight: 700; color: #ebe7df; font-variant-numeric: tabular-nums; }
.cgr-instore-points { font-size: 0.8rem; font-weight: 700; color: var(--is-gold-bright); font-variant-numeric: tabular-nums; }

.cgr-instore-pages { margin-top: 14px; display: flex; gap: 6px; }
.cgr-instore-pages a,
.cgr-instore-pages .current {
	display: inline-flex;
	min-width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	border-radius: 8px;
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
}
.cgr-instore-pages a { color: var(--is-cream) !important; border: 1px solid rgba( 255, 255, 255, 0.1 ); }
.cgr-instore-pages .current { color: #241c0c; background: linear-gradient( 135deg, #f7e4a8, #d6ab5e ); }

@media ( max-width: 600px ) {
	.cgr-instore-row { flex-direction: column; align-items: flex-start; gap: 8px; }
	.cgr-instore-figures { flex-direction: row; align-items: baseline; gap: 12px; }
	/* Phones: trim the horizontal padding on the hero and stat tiles so their
	   content is not over-inset. In flat (My Account) mode these already sit
	   inside the theme panel's own side padding, so the wide inner padding read
	   as too much. Vertical padding is unchanged; only left/right are reduced.
	   Tiles get a touch tighter than the hero because they render two-up. */
	.cgr-rt-hero { padding-left: 16px; padding-right: 16px; }
	.cgr-rt-tile { padding-left: 14px; padding-right: 14px; }
}

/* ---- Flat mode: inside My Account, the theme supplies the panel, so we drop
   our own card chrome to avoid a nested double-bordered card. ---- */
.cgr-rewards-tab.cgr-rewards-tab--flat {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	overflow: visible;
}
.cgr-rewards-tab.cgr-rewards-tab--flat .cgr-rt-head { padding-top: 0; }

.cgr-instore.cgr-instore--flat {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin-top: 26px;
}


/* Voided transaction tag (customer history) */
.cgr-rt-voided {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #ecb0b0;
	background: rgba( 236, 154, 154, 0.12 );
	border: 1px solid rgba( 236, 154, 154, 0.28 );
	vertical-align: middle;
}