/* ==================================================================
   CELLUGENIX - MEMBERSHIP
   assets/css/cgx-membership.css

   Two things only, both of which render outside the membership page:

     1. .cgx-member-price   the Regular / Member price / You save block,
                            on every product a signed-in member sees
     2. .cgx-mb-badge       status and history on My Account

   The membership page carries its own styles inline, so nothing here
   is duplicated there.

   No !important. Every selector is prefixed cgx-.
   ================================================================== */

/* ------------------------------------------------------------------
   1 - MEMBER PRICE BLOCK
   ------------------------------------------------------------------ */

.cgx-member-price {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.45;
}

.cgx-mp-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

/* Fixed width so Regular / Member price / You save line up as a column
   rather than stepping across as each label runs a different length. */
.cgx-mp-lbl {
	flex: 0 0 auto;
	min-width: 82px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8A919B;
}

.cgx-member-price del {
	opacity: .55;
	font-weight: 600;
	text-decoration: line-through;
}

.cgx-mp-now ins {
	text-decoration: none;
	font-weight: 800;
	color: inherit;
}

.cgx-mp-now .cgx-mp-lbl { color: #B8860B; }

.cgx-mp-save b {
	font-weight: 800;
	color: #1B7F4B;
}

/* A card is a tighter space than a product page, so the labels shrink
   there rather than the numbers. */
.cgx-pcard-price .cgx-mp-lbl {
	min-width: 68px;
	font-size: 9.5px;
}

.cgx-pcard-price .cgx-member-price { font-size: 14px; }

/* ------------------------------------------------------------------
   2 - MY ACCOUNT
   ------------------------------------------------------------------ */

.cgx-mb-badge {
	margin: 0 0 20px;
	padding: 14px 18px;
	border: 1px solid rgba(15, 23, 42, .10);
	border-left: 3px solid #B8860B;
	border-radius: 0 12px 12px 0;
	background: #FAF7EE;
	font-size: 14.5px;
	line-height: 1.6;
	color: #3E4650;
}

.cgx-mb-badge strong { color: #101318; }

.cgx-mb-badge a {
	margin-left: 6px;
	color: #B8860B;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cgx-mb-badge--offer {
	background: #F6F6F4;
	border-left-color: rgba(15, 23, 42, .25);
}

.cgx-mb-history {
	width: 100%;
	margin: 0 0 26px;
	border-collapse: collapse;
	font-size: 14px;
}

.cgx-mb-history th,
.cgx-mb-history td {
	padding: 10px 12px;
	border-bottom: 1px solid rgba(15, 23, 42, .10);
	text-align: left;
}

.cgx-mb-history th {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6C7480;
}

.cgx-mb-history td { color: #3E4650; }

@media (max-width: 600px) {

	.cgx-mp-lbl { min-width: 70px; font-size: 10px; }

	/* Four columns in ~340px gives each about 70px and a date wraps. Each
	   row becomes its own block, and every cell carries the heading it lost
	   via the data-label the template writes. */
	.cgx-mb-history thead { display: none; }

	.cgx-mb-history tr {
		display: block;
		margin-bottom: 14px;
		padding-bottom: 10px;
		border-bottom: 1px solid rgba(15, 23, 42, .10);
	}

	.cgx-mb-history td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		padding: 5px 0;
		border: 0;
	}

	.cgx-mb-history td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		font-size: 10.5px;
		font-weight: 800;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: #6C7480;
	}
}