/* Lane MEMBER-CANCEL — stopping the annual renewal.
   Two screens on /my-account/ plus one link on the wallet's membership card.
   Tokens come from phase1.css and are read, never redefined.

   NUMBERING: 88 loads after 80-account.css, so where a rule here and a rule
   there have equal specificity this one wins. That is deliberate — the account
   team's card styling is the base and this only adds to it. Nothing here
   restates a property 80-account.css already sets. */

/* ---------------------------------------------------------------------------
   The link on the wallet's membership card
   --------------------------------------------------------------------------- */

body.woocommerce-account .rhc-membership-cancel__link {
	margin: 10px 0 0;
	font-size: 14.5px;
}

body.woocommerce-account .rhc-membership-cancel__link a {
	color: var(--ink);
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   The confirmation and the page after it
   --------------------------------------------------------------------------- */

body.woocommerce-account .rhc-membership-cancel {
	max-width: 46rem;
	margin: 0;
	padding: 0;
}

body.woocommerce-account .rhc-membership-cancel h2 {
	font-family: var(--d);
	font-size: clamp(27px, 3.2vw, 36px);
	line-height: 1.1;
	color: var(--ink);
	margin: 6px 0 18px;
}

body.woocommerce-account .rhc-membership-cancel p {
	max-width: 42rem;
	margin: 0 0 14px;
	line-height: 1.6;
}

body.woocommerce-account .rhc-membership-cancel__lede {
	font-size: clamp(17px, 1.9vw, 19px);
	color: var(--ink);
}

body.woocommerce-account .rhc-membership-cancel__problem {
	margin: 0 0 20px;
}

/* The two choices, side by side, neither of them hidden or dressed as a trap. */
body.woocommerce-account .rhc-membership-cancel__choices {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin: 26px 0 18px;
	padding-top: 22px;
	border-top: 1px solid var(--rule);
}

body.woocommerce-account .rhc-membership-cancel__form {
	margin: 0;
}

body.woocommerce-account .rhc-membership-cancel__keep {
	font-size: 15px;
	color: var(--ink);
	text-underline-offset: 3px;
}

body.woocommerce-account .rhc-membership-cancel__back {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--rule);
}

/* A phone is the narrow case: the two choices stack, and the button is not
   allowed to run off the side of the screen. */
@media (max-width: 640px) {
	body.woocommerce-account .rhc-membership-cancel__choices {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	body.woocommerce-account .rhc-membership-cancel__form button {
		width: 100%;
	}

	body.woocommerce-account .rhc-membership-cancel__keep {
		text-align: center;
	}
}