/* Plan-ready consult page (rendered by /api/v2/users/getPlanReady/). */

.planReadyPage,
.planReadyEmpty {
	font-family: Raleway, sans-serif;
	color: #000000;
	padding: 44px 48px 48px;
	box-sizing: border-box;
	font-feature-settings: "lnum" 1;
}

.planReadyPage *,
.planReadyEmpty * {
	box-sizing: border-box;
}

.planReadyPage h1,
.planReadyPage h2,
.planReadyPage h3,
.planReadyPage h4,
.planReadyPage h5,
.planReadyPage p,
.planReadyEmpty h1,
.planReadyEmpty p {
	margin: 0;
	font-family: Raleway, sans-serif;
}

.planReadyEmpty h1 {
	font-size: 20px;
	font-weight: 500;
	line-height: 28px;
}

.planReadyEmpty hr,
.planReadyPage .planRule {
	border: none;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	margin: 0;
	height: 0;
}

.planReadyEmpty hr {
	margin: 24px 0;
}

.planIcon {
	display: inline-block;
	flex: 0 0 auto;
	vertical-align: middle;
}

/* Heading */
.planHeading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 24px;
}

.planHeading h1 {
	font-size: 20px;
	font-weight: 500;
	line-height: 28px;
}

/* Pill badges */
.planBadge {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 12px;
	border-radius: 11px;
	border: 0.5px solid transparent;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.planBadgeReady {
	color: #285C3A;
	background: #DDEEE2;
	border-color: rgba(40, 92, 58, 0.3);
}

.planBadgeOrder {
	color: #79490E;
	background: #FEECD0;
	border-color: rgba(121, 73, 14, 0.3);
}

/* Order shipped: a DoseSpot/UPS tracking number is on the order */
.planBadgeShipping {
	color: #2B4F7E;
	background: #DCE8F7;
	border-color: rgba(43, 79, 126, 0.3);
}

.planBadgeLater {
	color: #5A544E;
	background: #E8E5E2;
	border-color: rgba(90, 84, 78, 0.3);
}

/* Doctor row */
.planDoctorRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 24px 0;
}

.planDoctorWho {
	display: flex;
	align-items: center;
	gap: 24px;
}

.planDoctorWho img {
	width: 100px;
	height: 100px;
	border-radius: 20px;
	object-fit: cover;
	flex: 0 0 auto;
}

.planDoctorWho p {
	font-size: 12px;
	line-height: 18px;
	color: #000000;
}

.planDoctorWho h2 {
	margin-top: 4px;
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
}

.planMessageButton {
	display: inline-flex;
	width: auto;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 44px;
	padding: 0 20px;
	border: 1px solid #000000;
	border-radius: 22px;
	background: #FFFFFF;
	color: #000000;
	font-family: Raleway, sans-serif;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.planMessageButton:hover {
	background: #000000;
	color: #FFFFFF;
}

/* Assessment */
.planAssessment {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 48px;
}

.planAssessmentText {
	flex: 1 1 auto;
	max-width: 520px;
	padding-top: 4px;
}

.planAssessmentText h3 {
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
	margin-bottom: 12px;
}

.planAssessmentText p {
	font-size: 14px;
	line-height: 20px;
	color: rgba(0, 0, 0, 0.8);
}

.planAssessmentText h5 {
	margin-top: 24px;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: rgba(0, 0, 0, 0.8);
}

.planAssessmentImage {
	flex: 0 0 394px;
	height: 240px;
	border-radius: 20px;
	overflow: hidden;
}

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

.planSectionTitle {
	font-size: 20px;
	font-weight: 500;
	line-height: 28px;
	margin: 44px 0 16px !important;
}

/* Plan card */
.planCard {
	background: #FFFFFF;
	border-radius: 20px;
	padding: 24px;
	margin-bottom: 16px;
}

.planCardTop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.planCardTop h3 {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

.planRxNote {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	line-height: 20px;
	color: #8E6859;
}

.planInOrderRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 24px;
}

/* Square checkboxes (plan, price cards and products) */
.planCheck {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	margin: 0;
}

.planCheck input,
.planPriceCard input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.planCheckBox {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	background: #FFFFFF;
}

.planCheckBoxSmall {
	width: 21px;
	height: 21px;
	border-radius: 5.5px;
	border-color: #D1D5DB;
}

.planCheckMark {
	display: none;
}

.planCheckBoxSmall .planCheckMark {
	width: 12px;
	height: 9px;
}

.planCheck input:checked + .planCheckBox,
.planPriceCard.selected .planCheckBox {
	background: #000000;
	border-color: #000000;
}

.planCheck input:checked + .planCheckBox .planCheckMark,
.planPriceCard.selected .planCheckMark {
	display: block;
}

.planCheck input:focus-visible + .planCheckBox,
.planPriceCard input:focus-visible ~ .planPriceCardTop .planCheckBox {
	outline: 2px solid #AD8371;
	outline-offset: 2px;
}

.planCheckCopy {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.planCheckCopy strong {
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
}

.planCheckCopy span {
	font-size: 11px;
	line-height: 16px;
	color: rgba(0, 0, 0, 0.7);
}

.planStatus {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

.planStatusLabel {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.5);
	margin-right: 12px;
}

.planSubHead {
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
	margin: 20px 0 12px !important;
}

/* Price cards */
.planPriceRow {
	display: flex;
	gap: 9px;
}

.planPriceCard {
	position: relative;
	flex: 1 1 0;
	min-height: 128px;
	display: flex;
	flex-direction: column;
	border: 1px solid #E4C7BB;
	border-radius: 12px;
	padding: 16px 16px 14px;
	cursor: pointer;
	background: #FFFFFF;
	margin: 0;
}

.planPriceCard.selected {
	background: linear-gradient(117deg, rgba(239, 201, 180, 0.4) 0%, rgba(173, 131, 113, 0.4) 100%), #F3E6E0;
}

.planPriceCardTop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}

.planPriceCardTop strong {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #211F1C;
}

/* indexlogin.html sets "* { font-style: normal }" - keep the design's italic copy italic */
.planReadyPage em,
.planCheckoutPage em {
	font-style: italic;
}

.planPriceCard p {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	line-height: 18px;
	color: rgba(0, 0, 0, 0.8);
}

.planPriceCardBottom {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
}

.planPriceBig {
	font-size: 20px;
	font-weight: 500;
	line-height: 26px;
}

.planPriceUnit {
	font-size: 11px;
	color: rgba(0, 0, 0, 0.6);
	margin-left: -4px;
}

.planSavings {
	display: inline-flex;
	align-items: center;
	height: 19px;
	padding: 0 10px;
	border-radius: 10px;
	background: linear-gradient(90deg, #68A44B 0%, #2E9332 100%);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 500;
	white-space: nowrap;
}

.planBilled {
	margin-left: auto;
	font-size: 11px;
	color: #704938;
	white-space: nowrap;
}

/* Routine */
.planRoutine {
	margin-top: 21px;
	border-radius: 12px;
	background: #F9F6F4;
	padding: 20px;
}

.planRoutineHead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	user-select: none;
}

.planRoutineHead strong {
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	color: #211F1C;
}

.planRoutineCount {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.5);
}

.planChevron {
	transition: transform 0.2s;
}

.planRoutine.collapsed .planChevron {
	transform: rotate(180deg);
}

.planRoutine.collapsed .planRoutineBody {
	display: none;
}

.planRoutineBody {
	display: flex;
	justify-content: space-between;
	gap: 40px;
	margin-top: 20px;
}

.planRoutineBottles {
	flex: 0 1 526px;
	display: flex;
	flex-direction: column;
}

.planBottle {
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.planBottle:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
}

.planBottleTime {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: #AD8371;
	margin-bottom: 12px;
}

.planBottle h5 {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #211F1C;
	margin-bottom: 2px;
}

.planBottle p {
	font-size: 12px;
	line-height: 18px;
	color: rgba(0, 0, 0, 0.8);
}

.planIngredients {
	margin-top: auto !important;
	padding-top: 16px;
	font-size: 12px;
	line-height: 18px;
	color: #855D4C;
}

.planBottleSteps {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
}

.planBottleSteps li {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	color: #AD8371;
}

.planRoutineNote {
	margin-top: 8px !important;
	font-size: 12px;
	line-height: 18px;
	color: rgba(0, 0, 0, 0.7);
}

.planRoutineNote strong {
	font-weight: 600;
	color: #855D4C;
	margin-right: 4px;
}

.planRoutineImage {
	flex: 0 0 280px;
	height: 250px;
	background: #FFFFFF;
	border-radius: 12px;
	overflow: hidden;
}

.planRoutineImage img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Recommendations */
.planRecommends {
	margin-top: 16px;
	border-radius: 20px;
	padding: 24px;
	background: linear-gradient(20deg, rgba(189, 155, 141, 0.4) 0%, rgba(200, 162, 150, 0.4) 22.5%, rgba(239, 201, 180, 0.4) 100%), #F9F6F4;
}

.planRecommendsHead {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 20px;
}

.planRecommendsHead .planIcon {
	margin-top: 1px;
}

.planRecommendsHead strong {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	color: #000000;
}

.planRecommendsHead p {
	margin-top: 4px;
	font-size: 12px;
	line-height: 18px;
	color: rgba(0, 0, 0, 0.8);
}

.planRecommendsFor {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #855D4C;
	margin: 20px 0 10px !important;
}

.planRecommendsHead + .planRecommendsFor {
	margin-top: 0 !important;
}

.planProduct {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr) 148px 26px;
	align-items: center;
	gap: 20px;
	margin: 0 0 12px;
	cursor: pointer;
}

.planProduct:last-child {
	margin-bottom: 0;
}

.planProductImage {
	width: 80px;
	height: 80px;
	border-radius: 8px;
	background: #FFFFFF;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.planProductImage img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.planProductCopy {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 494px;
}

.planProductCopy a {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #211F1C;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.planProductCopy a:hover {
	color: #804226;
}

.planProductBody {
	font-size: 12px;
	line-height: 18px;
	color: rgba(0, 0, 0, 0.8);
}

.planProductPrice {
	font-size: 14px;
	font-weight: 500;
}

/* Payment summary */
.planSummaryTitle {
	margin-bottom: 20px !important;
}

.planSummary {
	padding-top: 12px;
}

.planSummaryRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.planSummaryShipping {
	padding-bottom: 20px;
}

.planSummaryItem {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.planSummaryItem em {
	font-style: normal;
	font-weight: 400;
	font-size: 11px;
	line-height: 16px;
	color: rgba(0, 0, 0, 0.7);
}

.planSummaryDue {
	padding-top: 16px;
	font-size: 16px;
}

.planSummaryFooter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 16px;
}

.planSummaryNote {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	max-width: 400px;
	font-size: 11px;
	line-height: 16px;
	color: #855D4C;
}

.planSummaryNote .planIcon {
	margin-top: 1px;
}

.planCompleteButton {
	flex: 0 0 auto;
	width: auto;
	height: 44px;
	padding: 0 32px;
	background: #000000;
	color: #FFFFFF;
	border: 1px solid #000000;
	border-radius: 22px;
	font-family: Raleway, sans-serif;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

.planCompleteButton:hover {
	background: #333333;
}

@media only screen and (max-width: 999px) {
	.planReadyPage,
	.planReadyEmpty {
		padding: 24px 16px 40px;
	}

	.planMessageButton {
		width: 100%;
	}

	.planAssessment {
		flex-direction: column;
		gap: 20px;
	}

	.planAssessmentText {
		max-width: none;
	}

	.planAssessmentImage {
		flex: 0 0 auto;
		width: 100%;
		height: 220px;
	}

	.planCard {
		padding: 16px;
	}

	.planInOrderRow {
		align-items: flex-start;
	}

	.planPriceRow {
		flex-direction: column;
	}

	.planPriceCard {
		flex: 0 0 auto;
	}

	.planPriceCardBottom {
		flex-wrap: wrap;
	}

	.planBilled {
		margin-left: 0;
		width: 100%;
	}

	.planRoutineBody {
		flex-direction: column-reverse;
		gap: 16px;
	}

	.planRoutineBottles {
		flex: 0 0 auto;
	}

	.planRoutineImage {
		flex: 0 0 auto;
		width: 100%;
		height: 220px;
	}

	.planRecommends {
		padding: 16px;
	}

	.planProduct {
		grid-template-columns: 64px minmax(0, 1fr) 26px;
		grid-template-rows: auto auto;
		gap: 4px 12px;
	}

	.planProductImage {
		width: 64px;
		height: 64px;
		grid-row: 1 / span 2;
	}

	.planProductPrice {
		grid-column: 2;
		grid-row: 2;
	}

	.planProductCheck {
		grid-column: 3;
		grid-row: 1 / span 2;
	}

	.planSummaryFooter {
		flex-direction: column;
		align-items: stretch;
	}

	.planSummaryNote {
		max-width: none;
	}

	.planCompleteButton {
		width: 100%;
	}
}

/* ---- Checkout ("Your order", after "Complete my order") ---- */

.planCheckoutPage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	justify-content: stretch;
	align-items: start;
	gap: 30px;
	font-family: Raleway, sans-serif;
	color: #000000;
	padding: 44px 48px 48px;
}

.planCheckoutPage *,
.planCheckoutPage *::before,
.planCheckoutPage *::after {
	box-sizing: border-box;
}

.planCheckoutPage h1,
.planCheckoutPage h3,
.planCheckoutPage p {
	margin: 0;
	font-family: Raleway, sans-serif;
}

.coBack {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: #000000 !important;
	text-decoration: none;
	margin: 8px 0 18px;
}

.coBack span {
	font-size: 20px;
	line-height: 14px;
}

.coTitleRow {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 24px 0 20px;
}

.coTitleRow h1 {
	font-size: 20px;
	font-weight: 500;
	line-height: 28px;
}

.coTitleRow p {
	font-size: 11px;
	line-height: 16px;
	color: rgba(0, 0, 0, 0.7);
	margin-top: 2px;
}

.coItems {
	background: #FFFFFF;
	border-radius: 12px;
	padding: 20px;
}

.coItems h3 {
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	margin-bottom: 14px;
}

.coItem {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
}

.coItem + .coItem {
	margin-top: 12px;
}

.coItemImage {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	border: 0.8px solid rgba(173, 131, 113, 0.12);
	background: #FFFFFF;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.coItemImage img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

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

.coItemCopy strong {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #211F1C;
}

.coItemMeta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 11px;
	line-height: 16px;
	color: rgba(0, 0, 0, 0.6);
}

.coItemBadge {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 6px;
	border-radius: 4px;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.coItemBadgeSub {
	background: #7A5747;
	color: #FFFFFF;
}

.coItemBadgeOnce {
	border: 0.5px solid #AD8371;
	color: #906548;
}

.coItemPrice {
	font-size: 14px;
	font-weight: 500;
}

.coRefill {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 14px !important;
	font-size: 11px;
	line-height: 16px;
	color: #855D4C;
}

.coRefill strong {
	font-weight: 700;
}

.coRefill .planIcon {
	margin-top: 1px;
}

.coLoading {
	margin-top: 32px !important;
	font-size: 13px;
	color: rgba(0, 0, 0, 0.6);
}

/* Shipping / payment method / contact */
.coAccount {
	margin-top: 24px;
}

.coSection {
	padding: 18px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.coSection:last-child {
	border-bottom: none;
}

.coSectionHead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.coSectionHead h3 {
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
}

.coEdit {
	font-size: 13px;
	font-weight: 500;
	color: #000000 !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.coSectionView p {
	font-size: 13px;
	line-height: 20px;
	color: rgba(0, 0, 0, 0.7);
}

.coSectionView .coStrong {
	color: rgba(0, 0, 0, 0.8);
}

.coMissing {
	color: #855D4C !important;
}

.coSectionForm {
	display: none;
}

.coSection.editing .coSectionView {
	display: none;
}

.coSection.editing .coSectionForm {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.coSection.editing .coSectionForm[data-form="payment"] {
	display: block;
}

.coFull,
.coFormError,
.coFormActions {
	grid-column: 1 / -1;
}

.coSectionForm .coInput {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	background: #FFFFFF;
	font-family: Raleway, sans-serif;
	font-size: 14px;
	color: #000000;
}

.coSectionForm .coInput:focus {
	outline: none;
	border-color: #AD8371;
}

.coSectionForm .coInput[readonly] {
	background: #F3EFEC;
	color: rgba(0, 0, 0, 0.6);
}

.coHint,
.coSecure {
	font-size: 11px;
	line-height: 16px;
	color: rgba(0, 0, 0, 0.6);
}

.coFormError {
	display: none;
	font-size: 12px;
	line-height: 18px;
	color: #B3261E;
}

.coFormActions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 4px;
}

.coButton,
.coButtonGhost,
.coButtonDanger {
	width: auto;
	height: 38px;
	padding: 0 18px;
	border-radius: 19px;
	font-family: Raleway, sans-serif;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
}

.coButton {
	background: #000000;
	border: 1px solid #000000;
	color: #FFFFFF;
}

.coButtonGhost {
	background: #FFFFFF;
	border: 1px solid #000000;
	color: #000000;
}

.coButtonDanger {
	background: #FFFFFF;
	border: 1px solid #B3261E;
	color: #B3261E;
}

.coCard {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	margin-bottom: 8px;
	background: #FFFFFF;
	border: 1px solid rgba(173, 131, 113, 0.25);
	border-radius: 10px;
}

.coCardInfo {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.coCardInfo strong {
	font-size: 14px;
	font-weight: 500;
}

.coCardInfo span {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.6);
}

.coCardActions {
	display: flex;
	gap: 8px;
}

.coPrimaryBadge {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 12px;
	border-radius: 11px;
	border: 0.5px solid rgba(40, 92, 58, 0.3);
	background: #DDEEE2;
	color: #285C3A;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.coAddCard {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 14px;
}

.coAddCard > strong {
	font-size: 14px;
	font-weight: 500;
}

.coCardElement {
	padding: 13px 14px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	background: #FFFFFF;
}

/* Order summary */
.coSummary {
	position: sticky;
	top: 20px;
	margin-top: 0;
	padding: 24px;
	border-radius: 20px;
	background: rgba(208, 160, 137, 0.2);
}

.coSummaryLabel {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.6);
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	margin-bottom: 6px !important;
}

.coSummaryRow {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
}

.coSummaryDue {
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.coSummaryRecurring {
	font-weight: 400;
	color: #AD8371;
}

.coPayButton {
	width: 100%;
	height: 44px;
	margin-top: 22px;
	border: 1px solid #000000;
	border-radius: 22px;
	background: #000000;
	color: #FFFFFF;
	font-family: Raleway, sans-serif;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

.coPayButton:hover {
	background: #333333;
}

.coSummaryNote {
	margin-top: 14px !important;
	font-size: 10px;
	line-height: 15px;
	color: #855D4C;
}

.planCompleteButton:disabled {
	background: #9A9490;
	border-color: #9A9490;
	cursor: not-allowed;
}

@media only screen and (max-width: 999px) {
	.planCheckoutPage {
		grid-template-columns: minmax(0, 1fr);
		padding: 24px 16px 40px;
	}

	.coSummary {
		position: static;
		margin-top: 0;
	}

	.coSection.editing .coSectionForm {
		grid-template-columns: 1fr;
	}

	.coCard {
		flex-direction: column;
		align-items: flex-start;
	}
}

.planCheckoutPage .planRule {
	border: none;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	margin: 0;
	height: 0;
}

/* Identity check (shown while users.identity_verified_at is empty) */
.coVerify {
	margin: 24px 0 6px;
	padding: 20px;
	border: 1px dashed #AD8371;
	border-radius: 16px;
}

.coVerifyHead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.coVerifyHead h3 {
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
}

.coVerifyTag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #8E6859;
}

.coVerifyBody {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.coVerifyBody p {
	max-width: 380px;
	font-size: 12px;
	line-height: 18px;
	color: rgba(0, 0, 0, 0.8);
}

.coVerifyButton {
	flex: 0 0 auto;
	width: auto;
	height: 44px;
	padding: 0 20px;
	border: 1px solid #000000;
	border-radius: 22px;
	background: #FFFFFF;
	color: #000000;
	font-family: Raleway, sans-serif;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

.coVerifyButton:hover {
	background: #000000;
	color: #FFFFFF;
}

.coVerify .coFormError {
	margin-top: 12px !important;
}

.coAccount > .coVerify + .coSection {
	padding-top: 18px;
}

@media only screen and (max-width: 999px) {
	.coVerifyBody {
		flex-direction: column;
		align-items: stretch;
	}
}

/* Order confirmed */
.planCheckoutDone {
	display: block;
}

.coDone {
	max-width: 560px;
	margin: 40px auto;
	padding: 40px 32px;
	border-radius: 20px;
	background: #FFFFFF;
	text-align: center;
}

.coDone h1 {
	margin: 16px 0 12px !important;
	font-size: 22px;
	font-weight: 500;
	line-height: 30px;
}

.coDone p {
	font-size: 14px;
	line-height: 21px;
	color: rgba(0, 0, 0, 0.75);
}

.coDone .coDoneWarning {
	margin-top: 14px !important;
	padding: 12px 14px;
	border-radius: 10px;
	background: #FEECD0;
	color: #79490E;
	font-size: 13px;
	text-align: left;
}

.coDone .coButton {
	margin-top: 24px;
	height: 44px;
	padding: 0 28px;
	border-radius: 22px;
	font-size: 14px;
}

.coPayButton:disabled {
	background: #9A9490;
	border-color: #9A9490;
	cursor: wait;
}

/* State dropdown in the shipping editor */
.coSectionForm .coSelect {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23AD8371' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	cursor: pointer;
}

.coSelect:invalid,
.coSelect option[value=""] {
	color: rgba(0, 0, 0, 0.45);
}

.coSelect option {
	color: #000000;
}

/* Menu items for prescription orders: hidden from first paint until the home page adds body.hasRxOrders
   (api/v2/users/homePage), so consult-only users never see them flash. */
body:not(.hasRxOrders) .frame-2.progressClick,
body:not(.hasRxOrders) .tab-link.progressClick,
body:not(.hasRxOrders) .frame-2.purchaseHistoryClick,
body:not(.hasRxOrders) .tab-link.purchaseHistoryClick,
body:not(.hasRxOrders) .consultRefill {
	display: none !important;
}

/* Home dashboard (api/v2/users/homePage). Sizes follow the Figma frame (1440 wide, content 1054 wide at x 322). */
.hdHome {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0 16px 32px;
	box-sizing: border-box;
	font-family: Raleway, sans-serif;
	font-variant-numeric: lining-nums proportional-nums;
	color: #000000;
}

.hdHome *,
.hdHome *::before,
.hdHome *::after {
	box-sizing: border-box;
}

.hdHome h1,
.hdHome h2,
.hdHome h3,
.hdHome h4,
.hdHome p {
	margin: 0;
}

.hdHome h2 {
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
}

.hdHome b {
	font-weight: 600;
}

/* Banner: design artwork pinned right at full height; its left edge colour fills any extra width */
.hdBanner {
	position: relative;
	display: flex;
	align-items: center;
	height: 300px;
	padding: 0 24px 0 43px;
	border-radius: 20px;
	overflow: hidden;
}

.hdBannerReview {
	background: url(../iconsMenu/homeBannerReview.jpg) right center / auto 100% no-repeat,
		linear-gradient(180deg, #ECD7C8 0%, #EAD7C8 25%, #E8D8CA 50%, #EADCCF 75%, #EEE4D7 100%);
}

.hdBannerDefault {
	background: url(../iconsMenu/homeBannerDefault.jpg) right center / auto 100% no-repeat, #EACABB;
}

.hdBannerReady {
	background: url(../iconsMenu/homeBannerReady.jpg) right center / auto 100% no-repeat,
		linear-gradient(180deg, #DECFC2 0%, #DCD0C4 25%, #DED6CA 50%, #E2DDD3 75%, #E7E4DC 100%);
}

.hdBannerText {
	position: relative;
	max-width: 420px;
}

/* The "Your skin matters to us" frame sets its one-line title a little lower */
.hdBannerDefault {
	padding-top: 3px;
}

.hdBannerDefault h1 {
	position: relative;
	top: 4.5px;
}

.hdBanner h4 {
	margin-bottom: 4.5px;
	font-family: Rosarivo, serif;
	font-size: 16px;
	font-style: italic;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: 0.32px;
}

.hdBanner h1 {
	font-size: 28px;
	font-weight: 600;
	line-height: 30.5px;
}

.hdBanner p {
	margin-top: 18px;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	color: rgba(0, 0, 0, 0.8);
}

/* Cards */
.hdCard {
	position: relative;
	padding: 32px 40px;
	border-radius: 20px;
	background: #F9F6F4;
}

.hdCardHead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 23px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.hdGrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.hdCol {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.hdField {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 22px;
	color: rgba(0, 0, 0, 0.5);
	flex-wrap: wrap;
	row-gap: 4px;
}

.hdField b {
	color: #000000;
	white-space: nowrap;
}

.hdField .planBadge {
	white-space: nowrap;
}

.hdLink {
	color: #000000;
	font-size: 14px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: underline;
	text-decoration-thickness: 0.7px;
	text-underline-offset: 3px;
	cursor: pointer;
}

.hdLink:hover {
	color: #000000;
	text-decoration-thickness: 2px;
}

.hdBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 36px;
	padding: 0 15px;
	border-radius: 18px;
	border: 1px solid #000000;
	font-family: Raleway, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.hdBtnOutline {
	background: #FFFFFF;
	color: #000000;
}

.hdBtnOutline:hover,
.hdBtnDark {
	background: #000000;
	color: #FFFFFF;
}

.hdBtnDark:hover {
	background: #FFFFFF;
	color: #000000;
}

/* Step bar: 10px dots, 4px track */
.hdStepsBar {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 10px;
}

.hdStepsBar::before {
	content: "";
	position: absolute;
	left: 0;
	right: 8px;
	top: 3px;
	height: 4px;
	border-radius: 2px;
	background: #EED7CC;
}

.hdStepsFill {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 3px;
	height: 4px;
	border-radius: 2px;
	background: #000000;
}

.hdStepsFill::before {
	content: "";
	position: absolute;
	left: 0;
	top: -3px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #000000;
}

.hdStepsBar i {
	position: relative;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #EED7CC;
}

.hdSteps {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 16px;
}

.hdStep {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 24px;
}

.hdStep + .hdStep::before {
	content: "";
	position: absolute;
	left: 12px;
	top: -12px;
	width: 1px;
	height: 12px;
	background: rgba(0, 0, 0, 0.6);
}

.hdStepIcon {
	flex-shrink: 0;
	align-self: flex-start;
	width: 25px;
	height: 25px;
	margin: -0.5px -0.5px -0.5px -0.5px;
}

.hdStep h3 {
	position: relative;
	top: 1px;
	flex: 1;
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
}

.hdInfo {
	flex-shrink: 0;
	width: 13px;
	height: 13px;
	cursor: help;
}

.hdInfoInline {
	display: inline-block;
	margin-left: 4px;
	vertical-align: -1px;
}

/* Active consultation */
.hdConsultBody {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	margin-top: 24px;
}

.hdConsult .hdStep h3 {
	max-width: 362px;
}

.hdConsult .hdStep .hdInfo {
	margin-left: auto;
}

.hdConsultInfo {
	padding: 0 24px;
	border-radius: 12px;
	background: #EFE7E3;
}

.hdInfoRow {
	display: grid;
	grid-template-columns: minmax(0, 196fr) minmax(0, 231fr);
	column-gap: 8px;
	align-items: center;
	min-height: 66px;
}

.hdInfoRow:first-child {
	min-height: 65px;
	padding-top: 5px;
}

.hdInfoRow + .hdInfoRow {
	min-height: 67px;
	padding-bottom: 3px;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* Your current progress */
.hdCondition {
	display: inline-flex;
	align-items: center;
	height: 22px;
	margin-top: 8px;
	padding: 0 12px;
	border-radius: 11px;
	border: 0.5px solid rgba(156, 110, 90, 0.3);
	background: #FFFFFF;
	color: #9C6E5A;
	font-size: 12px;
	font-weight: 500;
	line-height: 12px;
	letter-spacing: 0.48px;
	text-transform: uppercase;
}

.hdProgress {
	padding-bottom: 33px;
}

.hdProgress .hdStepsBar {
	margin-top: 24px;
	margin-right: 4px;
}

.hdProgress .hdSteps {
	margin-top: 24px;
}

.hdProgress .hdStep h3 {
	flex: 0 1 auto;
}

/* Status pills (match .planBadge colours) */
.hdHome .planBadge {
	justify-content: center;
	min-width: 92px;
	height: 22px;
	padding: 0 9px;
	border-radius: 11px;
	border-width: 0.5px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.48px;
}

/* Recent orders */
.hdOrderInfo {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	padding: 24px 0 23px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.hdOrderInfo > div {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hdOrderActions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.hdBtnGroup {
	display: flex;
	gap: 12px;
}

.hdBtnGroup .hdBtnOutline {
	min-width: 126px;
}

.hdBtnGroup .hdBtnDark {
	min-width: 129px;
}

.hdConsult .hdCardHead .hdBtn {
	min-width: 141px;
}

.hdOrdersEmpty {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.hdOrdersEmpty .hdCardHead {
	border-bottom: 0;
	padding-bottom: 0;
}

.hdEmpty {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 150px;
	margin-top: 20px;
	padding: 24px 16px;
	border: 0.5px solid #CDA99A;
	border-radius: 12px;
	text-align: center;
}

.hdEmpty .hdBtn {
	min-width: 151px;
}

.hdEmpty p {
	font-size: 14px;
	line-height: 20px;
	color: rgba(0, 0, 0, 0.8);
}

/* Profile: the icon sits half outside the card's left edge, as in the design */
.hdProfile {
	display: flex;
	align-items: center;
	min-height: 85px;
	padding: 0 52px 0 43px;
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid #CDA99A;
	cursor: pointer;
}

.hdProfileIcon {
	position: absolute;
	left: -23px;
	top: calc(50% - 22.5px);
	width: 44px;
	height: 48px;
}

.hdHome .hdProfile h2 {
	font-size: 16px;
	line-height: 22px;
}

.hdProfile p {
	margin-top: 2px;
	font-size: 14px;
	line-height: 20px;
}

.hdChevron {
	position: absolute;
	right: 21px;
	top: 50%;
	width: 8px;
	height: 14px;
	margin-top: -7px;
}

/* Image tiles */
.hdTiles {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px;
}

.hdTile {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 158px;
	border-radius: 20px;
	background: linear-gradient(118deg, rgba(153, 107, 86, 0.4) 0%, rgba(234, 195, 177, 0.4) 100%), #FFFFFF;
	cursor: pointer;
}

/* Card artwork at its design size (251.5 x 114): the stamp stays in the top-left corner, the photo stays centred */
.hdTileArt {
	flex-shrink: 0;
	height: 114px;
	background-repeat: no-repeat;
	background-size: 251.5px 114px;
}

.hdTileArtDoctor {
	background-image: url(../iconsMenu/homeTileStamp.png), url(../iconsMenu/homeTileDoctor.png);
	background-position: left top, center top;
}

.hdTileArtBottles {
	background-image: url(../iconsMenu/homeTileBottles.png?v=2);
	background-position: center top;
}

.hdTileFooter {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 10px;
	margin: 0 3px;
	padding: 0 4px 1px 17px;
	border-top: 1px solid #D6BEB3;
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
	white-space: nowrap;
}

.hdTileDoc .hdTileFooter {
	padding-left: 30px;
	gap: 12px;
	font-size: 13px;
}

.hdTileDoc.hdTileConsult .hdTileFooter {
	padding-left: 20px;
	gap: 13px;
}

.hdTileFooter svg {
	flex-shrink: 0;
}

.hdTileFooter span {
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: underline;
	text-decoration-thickness: 0.7px;
	text-underline-offset: 3px;
}

.hdTile:hover .hdTileFooter span {
	text-decoration-thickness: 2px;
}

@media only screen and (max-width: 999px) {
	/* Mobile banner (Figma mobile frames): edge to edge, square corners, text on the left and the
	   design artwork pinned right at full height - same artwork as desktop. */
	.hdBanner {
		height: auto;
		min-height: 225px;
		margin: 0 -16px;
		padding: 24px 20px;
		border-radius: 0;
		align-items: center;
	}

	.hdBannerReview {
		background-size: auto 62%, auto;
		background-position: right -20px bottom, 0 0;
	}

	.hdBannerReview .hdBannerText {
		max-width: 52%;
	}

	.hdBannerReady {
		background-size: auto 60%, auto;
		background-position: right -28px center, 0 0;
	}

	.hdBannerDefault {
		background-size: auto 100%, auto;
		background-position: right -110px center, 0 0;
	}

	.hdBannerDefault {
		padding-top: 24px;
	}

	.hdBannerDefault h1 {
		top: 0;
	}

	.hdBannerText {
		max-width: 56%;
	}

	.hdBanner h4 {
		margin-bottom: 4px;
		font-size: 15px;
		line-height: 20px;
	}

	.hdBanner h1 {
		font-size: 20px;
		line-height: 24px;
	}

	.hdBanner p {
		margin-top: 12px;
		font-size: 12px;
		line-height: 16px;
	}

	/* Mobile order (Figma): the columns collapse into one list with Profile last */
	.hdGrid {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.hdCol {
		display: contents;
	}

	.hdGrid .hdProfile {
		order: 10;
	}

	/* Photo cards: icon above a centred label */
	.hdTile {
		height: auto;
	}

	.hdTileFooter,
	.hdTileDoc .hdTileFooter,
	.hdTileDoc.hdTileConsult .hdTileFooter {
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		padding: 12px 10px 16px;
		font-size: 14px;
		text-align: center;
		white-space: normal;
	}

	.hdTileFooter span {
		overflow: visible;
	}

	/* Order buttons share the row */
	.hdBtnGroup {
		width: 100%;
	}

	.hdBtnGroup .hdBtn {
		flex: 1;
		min-width: 0;
	}

	.hdCard {
		padding: 24px 20px;
	}

	.hdCardHead h2 {
		font-size: 18px;
	}

	.hdInfoRow {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
		padding: 16px 0;
	}

	.hdOrderInfo {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 8px;
	}

	.hdField {
		white-space: normal;
		flex-wrap: wrap;
	}

	.hdBtn {
		padding: 0 14px;
	}

	.hdProfile {
		padding: 18px 44px 18px 40px;
	}

	.hdTileFooter {
		padding: 0 10px;
		gap: 8px;
		font-size: 13px;
	}
}

@media only screen and (min-width: 1000px) {
	.hdHome {
		padding: 0 0 40px;
	}

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

	/* Design columns: steps 427px, gap 72px, order box 475px; wider screens grow both columns in that ratio */
	.hdConsultBody {
		grid-template-columns: minmax(0, 427fr) minmax(0, 475fr);
		column-gap: 72px;
	}
}

.hdProgress .hdStep .hdInfo {
	margin-left: -4px;
}

/* Consult tab while the consult is in Dr. Lily's review (api/v2/users/getdConsult) */
.planReadyPage .planAssessmentText p + p,
.consultReviewPage .planAssessmentText p + p {
	margin-top: 16px !important;
}

#consultIn .consultReviewPage {
	width: 100%;
	padding: 0;
}

/* Review page inside the consult tab: #consultIn has a fixed height and its own padding (was inline in getdConsult) */
#consultIn.consultDetailMode {
	height: auto;
}

#consultIn .consultReviewPage {
	box-sizing: border-box;
}

#consultIn .consultReviewPage .planAssessmentText {
	flex: 1 1 auto;
	max-width: none;
}

#consultIn .consultReviewPage .planAssessmentImage {
	flex: 0 0 40%;
	max-width: 480px;
	height: 280px;
}

#consultIn .consultDetailView,
#consultIn .consultDetail-review {
	width: 100%;
}

#consultIn .consultDetailView > .consultBackLink {
	margin-top: 0;
}

/* "My doctor's consult" (ended consult) inside the list wrapper: same column layout #consultIn gives it on its own */
#consultIn .consultDetail-ended {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

#consultIn .consultDetail-ended .consultBackLink {
	margin-bottom: 0;
}

@media only screen and (max-width: 999px) {
	#consultIn .consultDetail-ended {
		gap: 32px;
	}
}

/* "My consults" list (api/v2/users/getdConsult), sizes from the Figma frame */
.consultInMain.consultListShown {
	background: transparent;
	overflow-y: auto;
}

#consultIn.consultListMode {
	display: block;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: transparent;
}

.consultListPage {
	font-family: Raleway, sans-serif;
	font-variant-numeric: lining-nums proportional-nums;
	color: #000000;
}

.consultListPage .consultListTitle {
	margin: 0 0 17px;
	padding: 4px 0 0 2px;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
}

.consultListRows {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.consultRow {
	display: grid;
	grid-template-columns: 84px 213px 152px 142px 116px minmax(0, 1fr) 8px;
	align-items: center;
	width: 100%;
	min-height: 128px;
	padding: 32px 38px 32px 32px;
	box-sizing: border-box;
	border: 0;
	border-radius: 20px;
	background: #F9F6F4;
	font-family: Raleway, sans-serif;
	font-variant-numeric: lining-nums proportional-nums;
	text-align: left;
	color: #000000;
	cursor: pointer;
	transition: background 0.15s ease;
}

.consultRow:hover {
	background: #F3EEEA;
}

/* Ended consults: listed only, not clickable */
.consultRow.consultRowEnded,
.consultRow.consultRowEnded:hover {
	background: #F9F6F4;
	cursor: default;
}

.consultRowPhoto {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	object-fit: cover;
}

.consultRow .consultRowTitle {
	max-width: 150px;
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
}

.consultRowField {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	min-width: 0;
	white-space: nowrap;
}

.consultRowField > span:first-child {
	font-size: 14px;
	line-height: 20px;
	color: rgba(0, 0, 0, 0.5);
}

.consultRowField > span:last-child {
	display: flex;
	align-items: center;
	min-height: 22px;
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
	color: rgba(0, 0, 0, 0.8);
}

.consultRowAmount > span:last-child {
	font-weight: 600;
	color: #000000;
}

.consultRow .planBadge {
	height: 22px;
	padding: 0 13px;
	border-width: 0.5px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.48px;
}

.consultRowChevron {
	justify-self: end;
}

@media only screen and (max-width: 999px) {
	.consultListPage {
		padding: 0 16px 24px;
	}

	.consultRow {
		grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) 8px;
		grid-template-areas:
			"photo title title chevron"
			"reviewed reviewed submitted submitted"
			"amount amount status status";
		row-gap: 16px;
		column-gap: 16px;
		padding: 20px;
	}

	.consultRowPhoto { grid-area: photo; }
	.consultRow .consultRowTitle { grid-area: title; max-width: none; }
	.consultRowField:nth-of-type(1) { grid-area: reviewed; }
	.consultRowField:nth-of-type(2) { grid-area: submitted; }
	.consultRowField:nth-of-type(3) { grid-area: amount; }
	.consultRowField:nth-of-type(4) { grid-area: status; }
	.consultRowChevron { grid-area: chevron; }

	#consultIn .consultReviewPage .planAssessmentImage {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
		height: 220px;
	}
}