/* Yellow Picnic — My Account dashboard (Figma "Account Dashboard_Active").
   Brand tokens mirror the Figma variables: Espresso #473B37, Onyx #221F1B,
   Fawn #D9D6D0, Ivory #F5F5F2, Juniper #286841. Sharp corners, 1.5px borders. */

.ycwc-dashboard {
	--yp-espresso: #473B37;
	--yp-juniper: #286841;
	--yp-juniper-hover: #215634;
	--yp-ivory: #F5F5F2;
	--yp-fawn: #D9D6D0;
	--yp-onyx: #221F1B;
	--yp-black: #000000;
	--yp-muted: #6F6A64;
	--yp-radius: 0px;
	--yp-border: 1.5px solid var(--yp-fawn);
	--yp-font-sans: 'Montserrat', sans-serif;

	font-family: var(--yp-font-sans);
	color: var(--yp-onyx);
	width: 100%;
	max-width: 1040px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* Hide the stock dashboard.php intro paragraphs even if the template override is
   ever lost to a WooCommerce update. */
.woocommerce-MyAccount-content > p:has(+ .ycwc-dashboard),
.woocommerce-MyAccount-content > p:has(+ p + .ycwc-dashboard) {
	display: none;
}

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

.ycwc-dashboard a {
	text-decoration: none;
	color: inherit;
}

/* ---- Greeting ---------------------------------------------------------- */
.ycwc-dashboard__head {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ycwc-dashboard__greeting {
	font-size: 18px;
	font-weight: 500;
	line-height: 20px;
	color: var(--yp-onyx);
	margin: 0;
}

.ycwc-dashboard__subhead {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--yp-onyx);
	margin: 0;
}

/* ---- Cards (shared shell) --------------------------------------------- */
.ycwc-card {
	background: #fff;
	border: var(--yp-border);
	border-radius: var(--yp-radius);
	padding: 0;
}

.ycwc-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ycwc-card__eyebrow {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--yp-onyx);
}

.ycwc-card__rule {
	height: 0;
	border-top: var(--yp-border);
}

/* ---- Next Delivery card ------------------------------------------------ */
.ycwc-card--delivery .ycwc-delivery__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px 24px;
}

.ycwc-card__title {
	font-size: 18px;
	font-weight: 500;
	line-height: 20px;
	margin: 0;
	color: var(--yp-onyx);
}

.ycwc-card__meta {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--yp-onyx);
	margin: 0;
}

.ycwc-card__body {
	font-size: 14px;
	line-height: 20px;
	color: var(--yp-muted);
	margin: 0;
}

.ycwc-card__body + .ycwc-btn {
	margin-top: 18px;
	align-self: flex-start;
}

/* ---- Status badge ------------------------------------------------------ */
.ycwc-badge {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 6px 12px;
	line-height: 1;
	color: #fff;
}

.ycwc-badge--active   { background: var(--yp-juniper); }
.ycwc-badge--paused   { background: var(--yp-espresso); }
.ycwc-badge--cancelled {
	background: transparent;
	color: var(--yp-espresso);
	border: 1.5px solid var(--yp-fawn);
}

/* ---- Deadline notice --------------------------------------------------- */
.ycwc-notice--deadline {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1.5px solid var(--yp-onyx);
	border-radius: var(--yp-radius);
	padding: 16px 24px;
	font-size: 14px;
	line-height: 20px;
	color: var(--yp-onyx);
	background: #fff;
}

.ycwc-notice--deadline strong { font-weight: 500; }

.ycwc-notice__icon {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23221F1B' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

/* ---- Meal carousel (inside the delivery card) ------------------------- */
.ycwc-meals {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 16px 24px 28px;
}

.ycwc-meals__stack {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ycwc-meals__scroll {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ycwc-meals__scroll::-webkit-scrollbar { display: none; }

.ycwc-meals__track {
	display: flex;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ycwc-meals__card {
	flex: 0 0 auto;
	width: 190px;
	scroll-snap-align: start;
	background: var(--yp-ivory);
	overflow: hidden;
}

.ycwc-meals__image {
	width: 190px;
	height: 190px;
	overflow: hidden;
	background: var(--yp-ivory);
}

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

.ycwc-meals__caption {
	padding: 16px 16px 26px;
	font-size: 14px;
	line-height: 20px;
	color: var(--yp-onyx);
}

.ycwc-meals__qty {
	color: var(--yp-muted);
	font-weight: 600;
}

/* Faux scroll indicator (matches Figma) */
.ycwc-meals__bar {
	position: relative;
	height: 2px;
	border-radius: 5px;
	background: var(--yp-fawn);
}

.ycwc-meals__bar span {
	position: absolute;
	left: 0;
	top: -2px;
	height: 6px;
	width: 56%;
	border-radius: 5px;
	background: var(--yp-espresso);
}

.ycwc-meals__cta {
	flex: 0 0 180px;
	width: 180px;
}

/* ---- Quick-action tiles ------------------------------------------------ */
.ycwc-actions {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.ycwc-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #fff;
	border: var(--yp-border);
	border-radius: var(--yp-radius);
	padding: 24px 12px;
	text-align: center;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ycwc-action:hover:not(.ycwc-action--disabled) {
	border-color: var(--yp-espresso);
	box-shadow: 0 4px 14px rgba(34, 31, 27, 0.06);
}

.ycwc-action__label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--yp-espresso);
}

.ycwc-action__icon {
	width: 36px;
	height: 36px;
	background: center/contain no-repeat;
}

.ycwc-action--skip .ycwc-action__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23473B37' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='16' rx='1'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4'/%3E%3Cpath d='m10 13 4 4M14 13l-4 4'/%3E%3C/svg%3E");
}

.ycwc-action--pause .ycwc-action__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23473B37' stroke-width='1.6'%3E%3Crect x='7' y='5' width='3.5' height='14' rx='1'/%3E%3Crect x='13.5' y='5' width='3.5' height='14' rx='1'/%3E%3C/svg%3E");
}

.ycwc-action--resume .ycwc-action__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23286841' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}

.ycwc-action--change .ycwc-action__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23473B37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13l-3-3M20 16H7l3 3'/%3E%3C/svg%3E");
}

.ycwc-action--delivery .ycwc-action__icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23473B37' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='16' rx='1'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4'/%3E%3Ccircle cx='12' cy='15' r='1.4' fill='%23473B37' stroke='none'/%3E%3C/svg%3E");
}

.ycwc-action--resume .ycwc-action__label { color: var(--yp-juniper); }

.ycwc-action--disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ---- Inline delivery-day editor --------------------------------------- */
.ycwc-delivery {
	background: #fff;
	border: var(--yp-border);
	border-radius: var(--yp-radius);
	padding: 0 24px;
	margin-top: -16px;
}

.ycwc-delivery > summary {
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--yp-espresso);
	padding: 16px 0;
	list-style: none;
}

.ycwc-delivery > summary::-webkit-details-marker { display: none; }

.ycwc-delivery__note {
	font-size: 12px;
	color: var(--yp-muted);
	margin: 0 0 12px;
}

.ycwc-delivery__form {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	padding-bottom: 20px;
}

.ycwc-delivery__form select {
	height: 44px;
	border: var(--yp-border);
	border-radius: var(--yp-radius);
	padding: 0 12px;
	font-family: var(--yp-font-sans);
	color: var(--yp-onyx);
	background: #fff;
}

/* ---- Two-column row ---------------------------------------------------- */
.ycwc-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: start;
}

.ycwc-panel { padding: 0; }

.ycwc-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: var(--yp-border);
	padding: 16px 24px;
}

.ycwc-panel__head h3 {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--yp-onyx);
	margin: 0;
}

.ycwc-panel__link {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--yp-espresso);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ycwc-panel__link::after {
	content: "";
	width: 18px;
	height: 10px;
	background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14' fill='none' stroke='%23473B37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h21M16 1l6 6-6 6'/%3E%3C/svg%3E");
}

.ycwc-empty {
	font-size: 14px;
	color: var(--yp-muted);
	margin: 0;
	padding: 24px;
}

.ycwc-orders {
	list-style: none;
	margin: 0;
	padding: 24px;
}

.ycwc-orders__row + .ycwc-orders__row {
	border-top: 1px solid var(--yp-fawn);
}

.ycwc-orders__row a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	font-size: 14px;
	line-height: 20px;
}

.ycwc-orders__row:first-child a { padding-top: 0; }
.ycwc-orders__row:last-child a { padding-bottom: 0; }

.ycwc-orders__date { font-weight: 500; color: var(--yp-onyx); }
.ycwc-orders__total { color: var(--yp-espresso); }

.ycwc-summary {
	margin: 0;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ycwc-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.ycwc-summary__row dt {
	font-size: 14px;
	font-weight: 400;
	color: var(--yp-espresso);
	margin: 0;
}

.ycwc-summary__row dd {
	font-size: 14px;
	font-weight: 500;
	color: var(--yp-onyx);
	margin: 0;
	text-align: right;
}

/* ---- Referral banner --------------------------------------------------- */
.ycwc-referral {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 24px;
}

.ycwc-referral__text {
	display: flex;
	align-items: center;
	gap: 15px;
}

.ycwc-referral__icon {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23221F1B' stroke-width='1.5'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M2 20c0-3 2.5-5 6-5s6 2 6 5M14 20c0-2.3 1.4-4 4-4s4 1.4 4 3.5'/%3E%3C/svg%3E");
}

.ycwc-referral__text strong {
	display: block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--yp-onyx);
}

.ycwc-referral__text p {
	font-size: 14px;
	color: var(--yp-onyx);
	margin: 5px 0 0;
}

/* ---- Buttons ----------------------------------------------------------- */
.ycwc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 26px;
	font-family: var(--yp-font-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: var(--yp-radius);
	cursor: pointer;
	text-align: center;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.ycwc-btn--dark,
.ycwc-btn--dark:link,
.ycwc-btn--dark:visited,
.ycwc-btn--dark:hover,
.ycwc-btn--dark:focus,
.ycwc-btn--dark:active {
	background: var(--yp-espresso);
	color: #fff !important; /* beat the theme's anchor color */
	border: 1.5px solid var(--yp-espresso);
}

.ycwc-btn--dark:hover {
	background: var(--yp-onyx);
	border-color: var(--yp-onyx);
}

.ycwc-btn--ghost {
	background: #fff;
	color: var(--yp-espresso);
	border: 1.5px solid var(--yp-espresso);
}

.ycwc-btn--ghost:hover {
	background: var(--yp-espresso);
	color: #fff;
}

/* ---- Responsive -------------------------------------------------------- */
@media screen and (max-width: 900px) {
	.ycwc-actions { grid-template-columns: repeat(2, 1fr); }
	.ycwc-cols { grid-template-columns: 1fr; }
}

@media screen and (max-width: 600px) {
	.ycwc-meals {
		flex-direction: column;
		align-items: stretch;
	}
	.ycwc-meals__cta { width: 100%; flex-basis: auto; }
	.ycwc-referral { flex-direction: column; align-items: flex-start; }
}

/* ---- Kill the stray list bullet on order rows -------------------------- */
.ycwc-orders,
.ycwc-orders__row {
	list-style: none !important;
}
.ycwc-orders__row::marker { content: ""; }

/* =======================================================================
   Account sidebar — Figma rail (Dashboard / My Orders / Payment /
   Account Details / Gift / Log Out). Lives outside .ycwc-dashboard, so it
   uses literal brand values. Only loaded on account pages.
   ===================================================================== */
/* Flex the floated account layout so the ivory sidebar stretches full-height
   (down to the footer), matching the Figma rail. Scoped to logged-in pages so
   the logged-out login/register form keeps its normal layout. */
/* :has(> nav) restricts this to the account-content .woocommerce only — there's
   a second, empty .woocommerce in the header mini-cart we must not touch. */
.woocommerce-account.logged-in .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: flex;
	align-items: stretch;
	/* Break out of Salient's centered container so the ivory rail reaches the
	   viewport's left edge and the content column gains the reclaimed width. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0; /* Salient adds 12px 50px — drop it so the rail is flush-left */
}

.woocommerce-account.logged-in .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper {
	flex: 1 0 100%;
	order: -1;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	flex: 0 0 250px;
	width: 250px;
	max-width: 250px;
	margin: 0;
	background: #F5F5F2;
	border: none;
	padding: 24px 16px;
	box-sizing: border-box;
}

.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	flex: 1 1 auto;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 32px 56px 64px 56px;
	box-sizing: border-box;
}

@media screen and (max-width: 900px) {
	.woocommerce-account.logged-in .woocommerce:has(> .woocommerce-MyAccount-navigation) { display: block; }
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		flex: none;
		width: auto;
		max-width: none;
	}
	.woocommerce-account .woocommerce-MyAccount-content { padding: 24px 0; }
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 48px;
	padding: 0 12px;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: #221F1B;
	opacity: 1 !important; /* theme dims inactive links to 0.4 — keep them crisp */
	text-decoration: none;
	transition: background-color 140ms ease, color 140ms ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
	content: "";
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	/* longhand, NOT the `background` shorthand — the shorthand resets
	   background-image to none and would override every per-endpoint icon below */
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: #473B37;
	color: #fff;
	font-weight: 500;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before {
	filter: brightness(0) invert(1);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:not(.is-active) a:hover {
	background: rgba(71, 59, 55, 0.08);
}

/* Group split before the secondary nav (Gift / Log Out) */
.woocommerce-MyAccount-navigation-link--referral_coupons {
	margin-top: 12px !important;
	padding-top: 12px !important;
	border-top: 1.5px solid #D9D6D0 !important;
}

/* Per-endpoint icons (dark stroke; whitened on the active tab via filter) */
.woocommerce-MyAccount-navigation-link--dashboard a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23221F1B' stroke-width='1.6'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--orders a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23221F1B' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M5 3h14v18l-3-2-2 2-2-2-2 2-2-2-3 2z'/%3E%3Cpath d='M8 8h8M8 12h8'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--payment-methods a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23221F1B' stroke-width='1.6'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-account a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23221F1B' stroke-width='1.6'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--referral_coupons a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23221F1B' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M5 12v9h14v-9'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M12 8C12 5.5 10.5 3 8.5 3 7 3 6 4 6 5.5 6 7 7.5 8 12 8z'/%3E%3Cpath d='M12 8c0-2.5 1.5-5 3.5-5C17 3 18 4 18 5.5 18 7 16.5 8 12 8z'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--customer-logout a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23221F1B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E");
}

/* ======================================================================
   Referral page — "Give 40%, Get 40%" (coupon-referral-program plugin).
   Override the plugin's yellow promo box + teal stat cards so the page
   reads like the rest of the account area: white cards, 1.5px Fawn
   borders, sharp corners, Espresso/Onyx text, Juniper accents, Montserrat.
   Scoped + !important to beat the plugin's own enqueued stylesheet.
   ====================================================================== */
.woocommerce-account .woocommerce-MyAccount-content .mwb_crp_referal_section_wrap,
.woocommerce-account .woocommerce-MyAccount-content .mwb-crp-referral-wrapper,
.woocommerce-account .woocommerce-MyAccount-content .mwb-crp-referral-table-wrapper {
	font-family: 'Montserrat', sans-serif;
	color: #221F1B;
}

/* ---- Promo card (kill the yellow) ------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content fieldset.mwb_crp_referal_section {
	background: #fff !important;
	border: 1.5px solid #D9D6D0 !important;
	border-radius: 0 !important;
	margin: 0 0 28px !important;
	padding: 28px !important;
}
.woocommerce-account .mwb_cpr_heading {
	font-size: 20px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	color: #221F1B !important;
	margin: 0 0 22px !important;
}

/* Code + link display bars: gray → Ivory inputs with a Fawn border */
.woocommerce-account .mwb_crp_referral_link {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6F6A64 !important;
	margin: 18px 0 8px !important;
}
.woocommerce-account .mwb_crp_addon_referral_code,
.woocommerce-account .mwb_cpr_refrral_code_copy {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #F5F5F2 !important;
	border: 1.5px solid #D9D6D0 !important;
	border-radius: 0 !important;
	padding: 12px 14px !important;
	margin: 0 !important;
}
.woocommerce-account .mwb_cpr_refrral_code_copy p,
.woocommerce-account .mwb_cpr_refrral_code_copy code {
	margin: 0 !important;
	background: transparent !important;
	font-family: 'Montserrat', monospace !important;
	font-size: 14px !important;
	color: #473B37 !important;
	word-break: break-all;
}
.woocommerce-account .mwb_cpr_refrral_code_copy p {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 12px;
}
.woocommerce-account .mwb_cpr_logged_wrapper small,
.woocommerce-account .mwb_crp_referal_section small {
	display: block;
	font-size: 12.5px !important;
	color: #6F6A64 !important;
	margin-top: 8px !important;
}
/* "Your friend can use this referral code…" helper line */
.woocommerce-account .mwb_crp_addon_referral_code + p,
.woocommerce-account .mwb_crp_referal_code_wrap > p {
	font-size: 12.5px !important;
	color: #6F6A64 !important;
}
.woocommerce-account .mwb_cpr_btn_copy {
	background: transparent !important;
	border: 0 !important;
	padding: 4px !important;
	cursor: pointer;
	opacity: 0.7;
}
.woocommerce-account .mwb_cpr_btn_copy:hover { opacity: 1; }
.woocommerce-account .mwb_cpr_btn_copy img { width: 18px; height: 18px; }

/* Share buttons: tidy row, keep them recognizable */
.woocommerce-account .mwb_crp_wrapper_button {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px !important;
	margin-top: 20px !important;
}

/* Invite-by-email input + buttons → brand */
.woocommerce-account .mwb_crp_email_wrap { margin-top: 20px !important; }
.woocommerce-account input.mwb_crp_email_id {
	width: 100% !important;
	max-width: 420px;
	background: #F5F5F2 !important;
	border: 1.5px solid #D9D6D0 !important;
	border-radius: 0 !important;
	padding: 12px 14px !important;
	font-size: 14px !important;
	color: #221F1B !important;
}
.woocommerce-account .wps_crp_email_buttons { margin-top: 12px !important; display: flex; gap: 10px; }
.woocommerce-account .wps_crp_email_button.button.alt {
	background: #286841 !important;
	border: 1.5px solid #286841 !important;
	border-radius: 0 !important;
	color: #fff !important;
	font-weight: 500 !important;
	padding: 11px 22px !important;
	text-transform: none !important;
}
.woocommerce-account #mwb_crp_add_more.wps_crp_email_button.button.alt {
	background: #fff !important;
	color: #473B37 !important;
	border-color: #D9D6D0 !important;
}
.woocommerce-account .wps_crp_email_button.button.alt:hover { filter: brightness(0.96); }

/* Helper note under the promo card */
.woocommerce-account .custom-referral-text {
	border: 1.5px solid #D9D6D0;
	background: #F5F5F2;
	padding: 14px 18px;
	margin: 0 0 28px;
}
.woocommerce-account .custom-referral-text span {
	font-size: 13px;
	color: #6F6A64;
}

/* ---- Stat cards (teal → white cards) ---------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content .mwb-crp-referral-wrapper {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 16px !important;
	margin: 0 0 28px !important;
	background: transparent !important;
}
.woocommerce-account .mwb-crp-referral-column { padding: 0 !important; background: transparent !important; }
.woocommerce-account .mwb-crp-referral-column-inner {
	background: #fff !important;
	border: 1.5px solid #D9D6D0 !important;
	border-radius: 0 !important;
	color: #221F1B !important;
	box-shadow: none !important;
	padding: 24px 20px !important;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.woocommerce-account .mwb-crp-referral-icon {
	color: #286841 !important;
	font-size: 26px !important;
	line-height: 1;
}
.woocommerce-account .mwb-crp-referral-icon i,
.woocommerce-account .mwb-crp-referral-icon svg { color: #286841 !important; fill: #286841 !important; }
.woocommerce-account .mwb-crp-referral-column-inner span {
	/* the LABEL — e.g. "Total Utilization" */
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6F6A64 !important;
	margin: 0 !important;
	order: 2;
}
.woocommerce-account .mwb-crp-referral-column-inner h4 {
	/* the VALUE — e.g. "$0.00" */
	font-size: 30px !important;
	font-weight: 500 !important;
	color: #473B37 !important;
	margin: 0 !important;
	order: 3;
}

/* ---- Coupons table (DataTables) → clean brand table ------------------- */
.woocommerce-account .mwb-crp-referral-table-wrapper {
	border: 1.5px solid #D9D6D0;
	background: #fff;
	padding: 20px;
}
.woocommerce-account table.mwb-crp-referral-table { border-collapse: collapse !important; width: 100% !important; }
.woocommerce-account table.mwb-crp-referral-table thead th {
	background: #F5F5F2 !important;
	color: #221F1B !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	border-bottom: 1.5px solid #D9D6D0 !important;
	padding: 12px 14px !important;
}
.woocommerce-account table.mwb-crp-referral-table tbody td {
	color: #473B37 !important;
	font-size: 14px !important;
	border-bottom: 1px solid #EDEAE5 !important;
	padding: 12px 14px !important;
}
.woocommerce-account .dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: #473B37 !important;
	border: 1.5px solid #473B37 !important;
	border-radius: 0 !important;
	color: #fff !important;
}
.woocommerce-account .dataTables_wrapper .dataTables_filter input,
.woocommerce-account .dataTables_wrapper .dataTables_length select {
	border: 1.5px solid #D9D6D0 !important;
	border-radius: 0 !important;
	padding: 6px 8px !important;
}

@media (max-width: 600px) {
	.woocommerce-account .woocommerce-MyAccount-content .mwb-crp-referral-wrapper {
		grid-template-columns: 1fr !important;
	}
}