/* =========================================================================
 * DriveCrate — My Account
 *
 * Styled to match the DriveCrate homepage and product pages: Space Grotesk
 * throughout, navy / blue / electric lime, soft 1.5px outlines on big
 * rounded cards, pill chips, and the pulsing "team radio" tag. Navy cards
 * carry anything that needs to stand out.
 *
 * Everything is scoped to body.woocommerce-account so none of it leaks into
 * the rest of the site.
 * ====================================================================== */

.woocommerce-account {
	--dc-navy: #0a1e4a;
	--dc-navy-hi: #142e6e;
	--dc-blue: #2749b6;
	--dc-blue-tint: #e8edfb;
	--dc-lime: #c6f63a;
	--dc-lime-hi: #d5ff5a;
	--dc-lime-ink: #1f3300;
	--dc-paper: #f2f4f9;
	--dc-mist: #d9dfec;
	--dc-ink: #0a1e4a;
	--dc-ink-soft: #4c5878;
	--dc-amber: #ffc53d;
	--dc-amber-tint: #fff6db;
	--dc-red: #e0433a;
	--dc-red-tint: #fdecea;
	--dc-r-sm: 8px;
	--dc-r: 16px;
	--dc-r-lg: 24px;
	--dc-line: 1.5px solid var(--dc-mist);
	--dc-font: "Space Grotesk", system-ui, -apple-system, sans-serif;
	--dc-hand: "Caveat", "Segoe Print", cursive;

	/* The subscription controls pick up the palette too. */
	--dcsc-accent: var(--dc-navy);
	--dcsc-accent-dark: var(--dc-navy-hi);
	--dcsc-danger: var(--dc-red);
	--dcsc-ink: var(--dc-ink);
	--dcsc-muted: var(--dc-ink-soft);
	--dcsc-line: var(--dc-mist);
	--dcsc-surface: var(--dc-paper);

	/* Icon masks: mask-image lets each icon take the text colour. */
	--i-dashboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1.5'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1.5'/%3E%3C/svg%3E");
	--i-orders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8M12 13v8'/%3E%3C/svg%3E");
	--i-subscriptions: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5'/%3E%3C/svg%3E");
	--i-downloads: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E");
	--i-edit-address: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	--i-edit-account: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
	--i-payment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2.5'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E");
	--i-contact: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
	--i-refer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E");
	--i-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E");
	--i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	--i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--i-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* Neutralise the theme's float/flex layout for the account shell. */
.woocommerce-account .woocommerce {
	display: block;
	max-width: 1140px;
	margin-inline: auto;
	font-family: var(--dc-font);
	color: var(--dc-ink);
	-webkit-font-smoothing: antialiased;
}
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after { display: none; }
.woocommerce-account .dc-account *,
.woocommerce-account .dc-account *::before,
.woocommerce-account .dc-account *::after { box-sizing: border-box; }

/* Nothing lighter than 500: the theme's 300-weight body text is too faint.
   :where() keeps this at the specificity of a plain class, so the heavier
   weights set further down still win, but it outranks theme rules like
   "p { font-weight: 300 }". */
.woocommerce-account .woocommerce { font-weight: 500; }
.woocommerce-account .woocommerce :where(p, li, td, th, dd, dt, label, address, span, small, em, a, input, select, textarea, button, legend, time, div) { font-weight: 500; }
.woocommerce-account .woocommerce :where(strong, b) { font-weight: 700; }
/* The cancel pop-up is moved to <body>, outside .woocommerce, so it needs
   the same floor of its own. */
.woocommerce-account .dcsc-modal { font-weight: 500; }
.woocommerce-account .dcsc-modal :where(p, span, label, textarea, button, div) { font-weight: 500; }

/* -------------------------------------------------------------------------
 * Shared pieces: labels, chips, cards, buttons
 * ---------------------------------------------------------------------- */
.woocommerce-account .dc-kicker {
	margin: 0 0 6px;
	font-family: var(--dc-font);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--dc-ink-soft);
}

/* Pill chips, as on the product cards. */
.woocommerce-account .dc-tag,
.woocommerce-account .dc-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	width: max-content;
	padding: 4px 11px;
	border: 1.5px solid var(--dc-mist);
	border-radius: 999px;
	background: #fff;
	font-family: var(--dc-font);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--dc-ink-soft);
	white-space: nowrap;
}
.woocommerce-account .dc-tag::before,
.woocommerce-account .dc-status::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}
.woocommerce-account .dc-tag--live,
.woocommerce-account .dc-status--done { background: var(--dc-lime); border-color: var(--dc-lime); color: var(--dc-lime-ink); }
.woocommerce-account .dc-tag--warn,
.woocommerce-account .dc-status--waiting { background: var(--dc-amber-tint); border-color: #f3dc98; color: #6b4d00; }
.woocommerce-account .dc-tag--order,
.woocommerce-account .dc-status--progress { background: var(--dc-blue-tint); border-color: var(--dc-blue-tint); color: var(--dc-blue); }
.woocommerce-account .dc-status--closed { background: var(--dc-paper); color: var(--dc-ink-soft); }
/* Needs the customer: the loudest chips on the page. */
.woocommerce-account .dc-status--attention { background: var(--dc-amber); border-color: var(--dc-amber); color: #3d2a00; }
.woocommerce-account .dc-status--failed { background: var(--dc-red); border-color: var(--dc-red); color: #fff; }
.woocommerce-account .dc-status--attention::before,
.woocommerce-account .dc-status--failed::before {
	content: "!";
	width: 15px;
	height: 15px;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 15px;
	text-align: center;
}
.woocommerce-account .dc-status--attention::before { background: #3d2a00; color: var(--dc-amber); }
.woocommerce-account .dc-status--failed::before { background: #fff; color: var(--dc-red); }
.woocommerce-account .dc-status__hint {
	display: block;
	margin-top: 6px;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--dc-ink-soft);
	white-space: normal;
}

.woocommerce-account .dc-tile {
	position: relative;
	min-width: 0;
	padding: 24px;
	border: var(--dc-line);
	border-radius: var(--dc-r-lg);
	background: #fff;
	color: var(--dc-ink);
}

/* Buttons, as on the homepage: rounded, bold, lime or navy. */
.woocommerce-account .dc-btn,
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:not(.dcsc-btn),
.woocommerce-account .dcsc-card .dcsc-btn,
.woocommerce-account .dcsc-modal .dcsc-btn,
.woocommerce-account .woocommerce-form-login button.button,
.woocommerce-account .woocommerce-form-register button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 11px 20px;
	border: 2px solid var(--dc-navy);
	border-radius: 12px;
	background: var(--dc-navy);
	box-shadow: none;
	color: #fff;
	font-family: var(--dc-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	box-sizing: border-box;
	cursor: pointer;
	transition: transform .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
}
.woocommerce-account .dc-btn:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:not(.dcsc-btn):hover,
.woocommerce-account .dcsc-card .dcsc-btn:not(.is-locked):hover,
.woocommerce-account .dcsc-modal .dcsc-btn:hover,
.woocommerce-account .woocommerce-form-login button.button:hover,
.woocommerce-account .woocommerce-form-register button.button:hover {
	background: var(--dc-navy-hi);
	border-color: var(--dc-navy-hi);
	color: #fff;
}
.woocommerce-account .dc-btn:active,
.woocommerce-account .woocommerce-MyAccount-content .button:active,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:not(.dcsc-btn):active,
.woocommerce-account .dcsc-card .dcsc-btn:not(.is-locked):active,
.woocommerce-account .dcsc-modal .dcsc-btn:active,
.woocommerce-account .woocommerce-form-login button.button:active,
.woocommerce-account .woocommerce-form-register button.button:active { transform: translateY(1px); }
.woocommerce-account .dc-btn:focus-visible,
.woocommerce-account .woocommerce-MyAccount-content .button:focus-visible,
.woocommerce-account .dcsc-card .dcsc-btn:focus-visible,
.woocommerce-account .dcsc-modal .dcsc-btn:focus-visible,
.woocommerce-account .woocommerce-MyAccount-content a:focus-visible {
	outline: 3px solid var(--dc-lime);
	outline-offset: 3px;
}
.woocommerce-account .dc-btn--lime,
.woocommerce-account .dc-btn--lime:hover { border-color: var(--dc-lime); background: var(--dc-lime); color: var(--dc-lime-ink); }
.woocommerce-account .dc-btn--lime:hover { border-color: var(--dc-lime-hi); background: var(--dc-lime-hi); }
.woocommerce-account .dc-btn--navy { background: var(--dc-navy); color: #fff; }

/* -------------------------------------------------------------------------
 * Layout: sidebar + main column. No card around the content — each card and
 * table carries its own outline.
 * ---------------------------------------------------------------------- */
.woocommerce-account .dc-account {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}
/* Grid items default to min-width:auto, so one wide child (a table, a long
   email) would stretch its track and push the page sideways. */
.woocommerce-account .dc-account > * { min-width: 0; }

.woocommerce-account .dc-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0 0 28px;
}
@keyframes dc-ping {
	0%   { box-shadow: 0 0 0 0 rgba(198,246,58,.7); }
	100% { box-shadow: 0 0 0 9px rgba(198,246,58,0); }
}
.woocommerce-account .dc-head__title {
	margin: 0;
	font-family: var(--dc-font);
	font-size: clamp(32px, 4.2vw, 50px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -.025em;
	text-transform: none;
	color: var(--dc-ink);
}

/* -------------------------------------------------------------------------
 * Navigation — dark sidebar panel with icons and an active bar, collapsing
 * to one line on small screens (see account.js).
 * ---------------------------------------------------------------------- */
.woocommerce-account .dc-account .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
	margin: 0;
	position: sticky;
	top: 90px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 10px;
	background: var(--dc-navy);
	border-radius: var(--dc-r-lg);
}
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; border: 0; list-style: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li::before { content: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 12px 14px;
	border-radius: 14px;
	color: rgba(255,255,255,.76);
	font-family: var(--dc-font);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
	content: "";
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--i-dashboard) center / contain no-repeat;
	mask: var(--i-dashboard) center / contain no-repeat;
	transition: transform .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a::after {
	content: "";
	position: absolute;
	left: 3px;
	top: 50%;
	width: 4px;
	height: 0;
	transform: translateY(-50%);
	border-radius: 4px;
	background: var(--dc-lime);
	transition: height .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: #fff;
	background: rgba(255,255,255,.08);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover::before { transform: translateX(2px); }
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible { outline: 2px solid var(--dc-lime); outline-offset: -2px; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: #fff;
	background: rgba(255,255,255,.1);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::after { height: 22px; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before { color: var(--dc-lime); }

/* Per-endpoint icons (selectors include `li` to outrank the base rule). */
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders a::before { -webkit-mask-image: var(--i-orders); mask-image: var(--i-orders); }
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--subscriptions a::before { -webkit-mask-image: var(--i-subscriptions); mask-image: var(--i-subscriptions); }
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--downloads a::before { -webkit-mask-image: var(--i-downloads); mask-image: var(--i-downloads); }
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address a::before { -webkit-mask-image: var(--i-edit-address); mask-image: var(--i-edit-address); }
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--payment-methods a::before { -webkit-mask-image: var(--i-payment); mask-image: var(--i-payment); }
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account a::before { -webkit-mask-image: var(--i-edit-account); mask-image: var(--i-edit-account); }
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--myreferrals a::before { -webkit-mask-image: var(--i-refer); mask-image: var(--i-refer); }
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a::before { -webkit-mask-image: var(--i-logout); mask-image: var(--i-logout); }
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 6px !important;
	padding-top: 6px !important;
	border-top: 1px solid rgba(255,255,255,.12) !important;
}

/* Only shown on small screens. */
.woocommerce-account .dc-navtoggle { display: none; }

/* -------------------------------------------------------------------------
 * Dashboard: bento of cards
 * ---------------------------------------------------------------------- */
.woocommerce-account .dc-bento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-bottom: 8px;
}
.woocommerce-account .dc-label { grid-column: span 2; }
.woocommerce-account .dc-links { grid-column: span 2; }
.woocommerce-account .dc-bento--no-count .dc-links { grid-column: 1 / -1; }

/* The subscription card: navy header, white body. */
.woocommerce-account .dc-label {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}
.woocommerce-account .dc-label__strip {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 13px 24px;
	background: var(--dc-navy);
	color: rgba(255,255,255,.75);
	font-family: var(--dc-font);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
}
.woocommerce-account .dc-label__strip span:last-child {
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(198,246,58,.14);
	color: var(--dc-lime);
	font-weight: 700;
}
.woocommerce-account .dc-label__body { flex: 1 1 auto; padding: 22px 24px; }
.woocommerce-account .dc-label__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin-bottom: 18px;
}
.woocommerce-account .dc-label__title {
	margin: 0;
	font-family: var(--dc-font);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	text-transform: none;
	color: var(--dc-ink);
}
.woocommerce-account .dc-label__more { font-size: 15px; font-weight: 500; color: var(--dc-ink-soft); }
.woocommerce-account .dc-label__text { margin: 8px 0 0; color: var(--dc-ink-soft); font-size: 16.5px; }

.woocommerce-account .dc-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
	margin: 0;
}
.woocommerce-account .dc-fields > div {
	padding: 12px 14px;
	border-radius: 14px;
	background: var(--dc-paper);
}
.woocommerce-account .dc-fields dt {
	margin: 0 0 2px;
	font-family: var(--dc-font);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--dc-ink-soft);
}
.woocommerce-account .dc-fields dd {
	margin: 0;
	font-family: var(--dc-font);
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--dc-ink);
}

.woocommerce-account .dc-label__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 24px 20px;
	border-top: var(--dc-line);
}

/* Countdown: lime, with the handwritten note from the homepage. */
.woocommerce-account .dc-count {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border-color: var(--dc-lime);
	background: var(--dc-lime);
	color: var(--dc-lime-ink);
}
.woocommerce-account .dc-count .dc-kicker { color: var(--dc-lime-ink); opacity: .75; }
.woocommerce-account .dc-count__number {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 10px;
	margin: 2px 0 8px;
	font-family: var(--dc-font);
	font-size: 84px;
	font-weight: 700;
	line-height: .9;
	letter-spacing: -.05em;
	color: var(--dc-lime-ink);
}
.woocommerce-account .dc-count__number.is-word { font-size: 40px; letter-spacing: -.03em; line-height: 1; }
.woocommerce-account .dc-count__unit {
	display: inline-block;
	font-family: var(--dc-hand);
	font-size: 36px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--dc-blue);
	transform: rotate(-4deg);
}
.woocommerce-account .dc-count__text {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--dc-lime-ink);
}
.woocommerce-account .dc-count .dc-btn { margin-top: auto; }

/* Latest order */
.woocommerce-account .dc-ticket {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	background: var(--dc-paper);
}
.woocommerce-account .dc-ticket .dc-kicker { margin-bottom: 0; }
.woocommerce-account .dc-ticket__number {
	margin: 0;
	font-family: var(--dc-font);
	font-size: 34px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.03em;
	color: var(--dc-ink);
}
.woocommerce-account .dc-ticket__meta { margin: 0; font-size: 15px; color: var(--dc-ink-soft); }
.woocommerce-account .woocommerce-MyAccount-content a.dc-ticket__link {
	margin-top: auto;
	padding-top: 8px;
	font-family: var(--dc-font);
	font-size: 15px;
	font-weight: 700;
	color: var(--dc-blue);
	text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-content a.dc-ticket__link::after { content: " →"; }
.woocommerce-account .woocommerce-MyAccount-content a.dc-ticket__link:hover { color: var(--dc-navy); }

/* Shortcuts, styled like the "what's inside" rows. */
.woocommerce-account .dc-links { padding-bottom: 14px; }
/*
 * Two cards to a row, every card half the width, whatever the tile's own
 * width; a single column on a phone. Rows stretch, so the two cards in a
 * row are the same height whether or not a description wraps.
 */
.woocommerce-account .dc-links ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}
.woocommerce-account .dc-links li { flex: 0 0 calc(50% - 4px); display: flex; margin: 0; padding: 0; border: 0; list-style: none; }
.woocommerce-account .dc-links li::before { content: none; }
.woocommerce-account .woocommerce-MyAccount-content a.dc-links__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: var(--dc-line);
	border-radius: 16px;
	background: var(--dc-paper);
	color: var(--dc-ink);
	font-weight: 500;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}
.woocommerce-account .dc-links__icon {
	position: relative;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border: var(--dc-line);
	border-radius: 12px;
	background: #fff;
	transition: background-color .15s ease, border-color .15s ease;
}
.woocommerce-account .dc-links__icon::before {
	content: "";
	position: absolute;
	inset: 9px;
	background: var(--dc-blue);
	-webkit-mask: var(--i-dashboard) center / contain no-repeat;
	mask: var(--i-dashboard) center / contain no-repeat;
}
.woocommerce-account .dc-links__item--orders .dc-links__icon::before { -webkit-mask-image: var(--i-orders); mask-image: var(--i-orders); }
.woocommerce-account .dc-links__item--subscriptions .dc-links__icon::before { -webkit-mask-image: var(--i-subscriptions); mask-image: var(--i-subscriptions); }
.woocommerce-account .dc-links__item--downloads .dc-links__icon::before { -webkit-mask-image: var(--i-downloads); mask-image: var(--i-downloads); }
.woocommerce-account .dc-links__item--edit-address .dc-links__icon::before { -webkit-mask-image: var(--i-edit-address); mask-image: var(--i-edit-address); }
.woocommerce-account .dc-links__item--payment-methods .dc-links__icon::before { -webkit-mask-image: var(--i-payment); mask-image: var(--i-payment); }
.woocommerce-account .dc-links__item--edit-account .dc-links__icon::before { -webkit-mask-image: var(--i-edit-account); mask-image: var(--i-edit-account); }
.woocommerce-account .dc-links__item--myreferrals .dc-links__icon::before { -webkit-mask-image: var(--i-refer); mask-image: var(--i-refer); }
.woocommerce-account .dc-links__item--contact .dc-links__icon::before { -webkit-mask-image: var(--i-contact); mask-image: var(--i-contact); }
.woocommerce-account .dc-links__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.woocommerce-account .dc-links__label { font-family: var(--dc-font); font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--dc-ink); }
.woocommerce-account .dc-links__desc { font-size: 13.5px; line-height: 1.35; color: var(--dc-ink-soft); }
.woocommerce-account .dc-links__go {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background: var(--dc-ink-soft);
	-webkit-mask: var(--i-arrow) center / contain no-repeat;
	mask: var(--i-arrow) center / contain no-repeat;
	transition: transform .15s ease, background-color .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-content a.dc-links__item:hover { border-color: var(--dc-navy); background: #fff; }
.woocommerce-account a.dc-links__item:hover .dc-links__icon { border-color: var(--dc-lime); background: var(--dc-lime); }
.woocommerce-account a.dc-links__item:hover .dc-links__icon::before { background: var(--dc-lime-ink); }
.woocommerce-account a.dc-links__item:hover .dc-links__go { transform: translateX(4px); background: var(--dc-navy); }

/* -------------------------------------------------------------------------
 * Other account pages: tables, forms, addresses, notices
 * ---------------------------------------------------------------------- */
.woocommerce-account .dc-main .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	color: var(--dc-ink);
	font-family: var(--dc-font);
}
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.dc-btn):not(.dcsc-btn):not(.dc-links__item):not(.dc-ticket__link) {
	color: var(--dc-blue);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-decoration-color: rgba(39,73,182,.3);
	text-underline-offset: 3px;
}
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.dc-btn):not(.dcsc-btn):not(.dc-links__item):not(.dc-ticket__link):hover {
	color: var(--dc-navy);
	text-decoration-color: currentColor;
}
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-family: var(--dc-font);
	font-weight: 700;
	letter-spacing: -.02em;
	text-transform: none;
	color: var(--dc-ink);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	margin-bottom: 28px;
	border: var(--dc-line);
	border-radius: var(--dc-r);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
	font-family: var(--dc-font);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
	padding: 12px 16px;
	border: 0;
	background: var(--dc-paper);
	font-family: var(--dc-font);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
	text-align: left;
	text-transform: none;
	color: var(--dc-ink-soft);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot th {
	padding: 15px 16px;
	border: 0;
	border-top: var(--dc-line);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:first-child td,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:first-child th { border-top: 0; }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead + tbody tr:first-child td,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead + tbody tr:first-child th { border-top: var(--dc-line); }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button { padding: 8px 14px; font-size: 14px; border-radius: 10px; }

/* Addresses as cards side by side. */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 20px;
}
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after { display: none; }
.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
	float: none;
	width: auto;
	margin: 0;
	padding: 22px 24px;
	border: var(--dc-line);
	border-radius: var(--dc-r-lg);
	background: #fff;
}
.woocommerce-account .woocommerce-Address address { font-style: normal; line-height: 1.6; color: var(--dc-ink-soft); }

.woocommerce-account .woocommerce-MyAccount-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.woocommerce-account .woocommerce-MyAccount-content textarea,
.woocommerce-account .woocommerce-MyAccount-content select {
	padding: 12px 14px;
	border: var(--dc-line);
	border-radius: 12px;
	background: #fff;
	font-family: var(--dc-font);
	font-size: 16px;
	color: var(--dc-ink);
	transition: border-color .12s ease, box-shadow .12s ease;
}
.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus {
	outline: none;
	border-color: var(--dc-navy);
	box-shadow: 0 0 0 3px rgba(39,73,182,.14);
}
.woocommerce-account .woocommerce-MyAccount-content label { font-weight: 600; color: var(--dc-ink); }
.woocommerce-account .woocommerce-MyAccount-content fieldset {
	margin: 26px 0;
	padding: 18px 20px 6px;
	border: var(--dc-line);
	border-radius: var(--dc-r);
}
.woocommerce-account .woocommerce-MyAccount-content legend {
	padding: 0 8px;
	font-family: var(--dc-font);
	font-size: 15px;
	font-weight: 700;
	color: var(--dc-ink);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
	border: var(--dc-line);
	border-radius: 14px;
	background: var(--dc-paper);
	color: var(--dc-ink);
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message { border-color: var(--dc-lime); background: #f5fde0; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error { border-color: #f4c4c0; background: var(--dc-red-tint); }

/* -------------------------------------------------------------------------
 * Orders needing attention — a navy card, like the homepage's shipping note.
 * ---------------------------------------------------------------------- */
.woocommerce-account .dc-attention {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin: 0 0 28px;
	padding: 22px 24px 24px;
	border-radius: var(--dc-r-lg);
	background: var(--dc-navy);
	color: #fff;
	font-family: var(--dc-font);
}
.woocommerce-account .dc-attention__head { display: flex; align-items: flex-start; gap: 14px; }
.woocommerce-account .dc-attention__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--dc-amber);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	color: #3d2a00;
}
.woocommerce-account .has-failed .dc-attention__icon { background: var(--dc-red); color: #fff; }
.woocommerce-account .dc-attention .dc-kicker { margin-bottom: 2px; color: rgba(255,255,255,.65); }
.woocommerce-account .woocommerce-MyAccount-content .dc-attention__title {
	margin: 0;
	font-family: var(--dc-font);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: #fff;
}
.woocommerce-account .dc-attention__text { margin: 3px 0 0; font-size: 15px; color: rgba(255,255,255,.78); }
.woocommerce-account .dc-attention__list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce-account .dc-attention__item {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px 16px;
	margin: 0;
	padding: 12px 12px 12px 16px;
	border-radius: 14px;
	background: #fff;
	color: var(--dc-ink);
	list-style: none;
}
.woocommerce-account .dc-attention__item::before { content: none; }
.woocommerce-account .dc-attention__order { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.woocommerce-account .woocommerce-MyAccount-content .dc-attention__order a { font-size: 17px; font-weight: 700; color: var(--dc-ink); text-decoration: none; }
.woocommerce-account .dc-attention__meta { font-size: 15px; color: var(--dc-ink-soft); }
.woocommerce-account .dc-attention .dc-btn { padding: 9px 16px; white-space: nowrap; }
.woocommerce-account .dc-attention .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Orders table: flag the rows that need attention. */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody th {
	background: transparent;
	font-weight: 500;
	text-align: left;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr.woocommerce-orders-table__row--status-pending > * { background: var(--dc-amber-tint); }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr.woocommerce-orders-table__row--status-failed > * { background: var(--dc-red-tint); }
.woocommerce-account .woocommerce-orders-table__row--status-pending > :first-child { box-shadow: inset 5px 0 0 var(--dc-amber); }
.woocommerce-account .woocommerce-orders-table__row--status-failed > :first-child { box-shadow: inset 5px 0 0 var(--dc-red); }
.woocommerce-account .woocommerce-orders-table__row--status-cancelled > *,
.woocommerce-account .woocommerce-orders-table__row--status-refunded > * { color: var(--dc-ink-soft); }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a { font-weight: 700; }
.woocommerce-account .woocommerce-orders-table__cell-order-status { min-width: 170px; }
@media (min-width: 769px) {
	.woocommerce-account .woocommerce-orders-table__cell-order-total { white-space: nowrap; }
}

/* Tables don't clip to their rounded corners reliably, so round the corner
   cells themselves — otherwise the header's fill pokes out at the top. */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead tr:first-child > :first-child { border-top-left-radius: 14px; }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead tr:first-child > :last-child { border-top-right-radius: 14px; }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody:last-child tr:last-child > :first-child,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot tr:last-child > :first-child { border-bottom-left-radius: 14px; }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody:last-child tr:last-child > :last-child,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot tr:last-child > :last-child { border-bottom-right-radius: 14px; }

/* Row actions: Pay is the one that matters, so it's the lime one. */
.woocommerce-account .woocommerce-orders-table__cell-order-actions,
.woocommerce-account .my_account_orders .order-actions { white-space: nowrap; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button + .button,
.woocommerce-account .woocommerce-MyAccount-content .order-actions .button + .button { margin-left: 6px; }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button.pay { border-color: var(--dc-lime); background: var(--dc-lime); color: var(--dc-lime-ink); }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button.pay:hover { border-color: var(--dc-lime-hi); background: var(--dc-lime-hi); color: var(--dc-lime-ink); }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button.view { border: var(--dc-line); background: #fff; color: var(--dc-ink); }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button.view:hover { border-color: var(--dc-navy); background: #fff; color: var(--dc-ink); }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button.cancel { border: var(--dc-line); background: #fff; color: var(--dc-red); }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button.cancel:hover { border-color: var(--dc-red); background: #fff; color: var(--dc-red); }

/* Payment methods: the brand's logo beside each saved method. */
.woocommerce-account .dc-paymethod { display: inline-flex; align-items: center; gap: 12px; }
.woocommerce-account .dc-paymethod__logo {
	flex: 0 0 auto;
	display: block;
	width: 38px;
	height: 24px;
	border-radius: 4px;
	box-shadow: 0 0 0 1px var(--dc-mist);
}
.woocommerce-account .dc-paymethod__text { font-weight: 600; color: var(--dc-ink); }
.woocommerce-account .dc-paymethod__default {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--dc-lime);
	color: var(--dc-lime-ink);
	font-size: 12px;
	font-weight: 700;
	vertical-align: 1px;
}
.woocommerce-account .woocommerce-MyAccount-content .account-payment-methods-table .button.delete { border: var(--dc-line); background: #fff; color: var(--dc-red); }
.woocommerce-account .woocommerce-MyAccount-content .account-payment-methods-table .button.delete:hover { border-color: var(--dc-red); background: #fff; color: var(--dc-red); }
.woocommerce-account .woocommerce-MyAccount-content .account-payment-methods-table .button.default { border: var(--dc-line); background: #fff; color: var(--dc-ink); }
.woocommerce-account .woocommerce-MyAccount-content .account-payment-methods-table .button.default:hover { border-color: var(--dc-navy); background: #fff; color: var(--dc-ink); }
@media (max-width: 768px) {
	.woocommerce-account .woocommerce-PaymentMethod--method .dc-paymethod { justify-content: flex-end; text-align: right; }
}

/* -------------------------------------------------------------------------
 * Subscription card and dialogs, in the homepage style
 * ---------------------------------------------------------------------- */
.woocommerce-account .dcsc-card {
	padding: 26px;
	border: var(--dc-line);
	border-radius: var(--dc-r-lg);
	background: #fff;
	font-family: var(--dc-font);
	color: var(--dc-ink);
}
.woocommerce-account .dcsc-card__plan { font-size: 14px; font-weight: 600; color: var(--dc-ink-soft); }
.woocommerce-account .dcsc-card__plan .amount { font-weight: 700; color: var(--dc-ink); }
.woocommerce-account .woocommerce-MyAccount-content .dcsc-card__title {
	font-family: var(--dc-font);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.025em;
	color: var(--dc-ink);
}
.woocommerce-account .dcsc-chip { padding: 5px 12px; font-family: var(--dc-font); font-size: 13px; font-weight: 700; background: var(--dc-paper); color: var(--dc-ink-soft); }
.woocommerce-account .dcsc-chip--live { background: var(--dc-lime); color: var(--dc-lime-ink); }
.woocommerce-account .dcsc-chip--warn { background: var(--dc-amber-tint); color: #6b4d00; }
.woocommerce-account .dcsc-card__facts > div { border-radius: 14px; background: var(--dc-paper); }
.woocommerce-account .dcsc-card__facts dt { font-size: 13px; font-weight: 600; color: var(--dc-ink-soft); }
.woocommerce-account .dcsc-card__facts dd { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--dc-ink); }
.woocommerce-account .dcsc-card__facts dd .amount { font-weight: 700; }
.woocommerce-account .dcsc-card__skips li { border-color: var(--dc-mist); border-radius: 12px; font-weight: 600; }
.woocommerce-account .dcsc-alert { border-radius: 14px; font-family: var(--dc-font); }
.woocommerce-account .dcsc-alert--ok { border-left-color: var(--dc-lime); background: #f5fde0; }
.woocommerce-account .dcsc-alert--paused { border-left-color: var(--dc-amber); background: var(--dc-amber-tint); }
.woocommerce-account .dcsc-card__links { font-size: 14px; color: var(--dc-ink-soft); }
.woocommerce-account .dcsc-ended__list li { border-top: var(--dc-line); }

/* Card buttons: Skip is the lime one — the answer most people are after. */
.woocommerce-account .dcsc-card .dcsc-btn--primary,
.woocommerce-account .dcsc-card .dcsc-btn--primary:not(.is-locked):hover { border-color: var(--dc-lime); background: var(--dc-lime); color: var(--dc-lime-ink); }
.woocommerce-account .dcsc-card .dcsc-btn--primary:not(.is-locked):hover { border-color: var(--dc-lime-hi); background: var(--dc-lime-hi); }
.woocommerce-account .dcsc-card .dcsc-btn--ghost,
.woocommerce-account .dcsc-modal .dcsc-btn--ghost { border: var(--dc-line); background: #fff; color: var(--dc-ink); }
.woocommerce-account .dcsc-card .dcsc-btn--ghost:not(.is-locked):hover,
.woocommerce-account .dcsc-modal .dcsc-btn--ghost:hover { border-color: var(--dc-navy); background: #fff; color: var(--dc-ink); }
.woocommerce-account .dcsc-card .dcsc-btn--danger { border: var(--dc-line); background: #fff; color: var(--dc-red); }
.woocommerce-account .dcsc-card .dcsc-btn--danger:not(.is-locked):hover { border-color: var(--dc-red); background: #fff; color: var(--dc-red); }
.woocommerce-account .dcsc-card .dcsc-btn--link,
.woocommerce-account .dcsc-card .dcsc-btn--link:hover { padding: 0; border: 0; background: none; color: var(--dc-blue); font-size: 14px; }
.woocommerce-account .dcsc-card .dcsc-btn.is-locked,
.woocommerce-account .dcsc-card .dcsc-btn.is-locked:hover { border: var(--dc-line); background: #fff; color: var(--dc-ink); }

/* Dialogs */
.woocommerce-account .dcsc-modal .dcsc-modal__box { border-radius: var(--dc-r-lg); font-family: var(--dc-font); color: var(--dc-ink); }
.woocommerce-account .dcsc-modal .dcsc-modal__title { font-family: var(--dc-font); font-size: 26px; font-weight: 700; letter-spacing: -.025em; line-height: 1.12; color: var(--dc-ink); }
.woocommerce-account .dcsc-modal .dcsc-modal__lede { color: var(--dc-ink-soft); font-size: 16px; }
.woocommerce-account .dcsc-modal .dcsc-btn--primary,
.woocommerce-account .dcsc-modal .dcsc-btn--primary:hover { border-color: var(--dc-lime); background: var(--dc-lime); color: var(--dc-lime-ink); }
.woocommerce-account .dcsc-modal .dcsc-btn--primary:hover { border-color: var(--dc-lime-hi); background: var(--dc-lime-hi); }
.woocommerce-account .dcsc-modal .dcsc-btn--danger-solid,
.woocommerce-account .dcsc-modal .dcsc-btn--danger-solid:hover { border-color: var(--dc-red); background: var(--dc-red); color: #fff; }
.woocommerce-account .dcsc-modal .dcsc-reason {
	padding: 14px 16px;
	border: var(--dc-line);
	border-radius: 14px;
	background: #fff;
	font-family: var(--dc-font);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--dc-ink);
}
.woocommerce-account .dcsc-modal .dcsc-reason:hover { border-color: var(--dc-navy); background: var(--dc-paper); color: var(--dc-ink); }
.woocommerce-account .dcsc-modal .dcsc-reason__go { color: var(--dc-blue); }
.woocommerce-account .dcsc-modal .dcsc-modal__foot { border-top: var(--dc-line); }
.woocommerce-account .dcsc-modal .dcsc-modal__back,
.woocommerce-account .dcsc-modal .dcsc-modal__decline { font-family: var(--dc-font); color: var(--dc-ink-soft); }
.woocommerce-account .dcsc-modal .dcsc-modal__text { border: var(--dc-line); border-radius: 12px; font-family: var(--dc-font); }
.woocommerce-account .dcsc-modal .dcsc-modal__text:focus { border-color: var(--dc-navy); outline: none; box-shadow: 0 0 0 3px rgba(39,73,182,.14); }
/* What cancelling means: a navy card, like the homepage's shipping note. */
.woocommerce-account .dcsc-modal .dcsc-callout { border: 0; border-radius: 18px; background: var(--dc-navy); color: rgba(255,255,255,.85); }
.woocommerce-account .dcsc-modal .dcsc-callout__big { color: var(--dc-lime); font-size: 21px; letter-spacing: -.02em; }
.woocommerce-account .dcsc-modal .dcsc-anim { color: var(--dc-blue); }
.woocommerce-account .dcsc-tooltip { font-family: var(--dc-font); font-size: 13.5px; border-radius: 10px; background: var(--dc-navy); }

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.woocommerce-account .dc-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.woocommerce-account .dc-label,
	.woocommerce-account .dc-links { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
	.woocommerce-account .dc-account { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.woocommerce-account .dc-account .woocommerce-MyAccount-navigation { position: static; }

	/*
	 * Base state, and the fallback if account.js never runs: a wrapping grid
	 * of every link. Usable on its own, which is why the collapse below is
	 * layered on top rather than replacing it.
	 */
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
		gap: 4px;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation li a { padding: 11px 12px; white-space: normal; }
	.woocommerce-account .woocommerce-MyAccount-navigation li a::after { display: none; }
	.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important;
	}

	/*
	 * Collapsed to a single line: the page you're on, tapped to open the rest.
	 *
	 * These rules must come AFTER the grid above — [data-dc-nav] ul and
	 * .woocommerce-MyAccount-navigation ul carry the same specificity, so
	 * source order decides which display wins.
	 */
	.woocommerce-account .dc-navtoggle {
		display: flex;
		align-items: center;
		gap: 11px;
		width: 100%;
		margin: 0;
		padding: 15px 18px;
		border: 0;
		border-radius: var(--dc-r-lg);
		background: var(--dc-navy);
		color: #fff;
		font-family: var(--dc-font);
		font-size: 16px;
		font-weight: 700;
		line-height: 1.3;
		text-align: left;
		text-transform: none;
		cursor: pointer;
	}
	.woocommerce-account .dc-navtoggle:focus-visible { outline: 3px solid var(--dc-lime); outline-offset: 2px; }
	.woocommerce-account .dc-navtoggle__icon {
		flex: 0 0 auto;
		width: 20px;
		height: 20px;
		background: var(--dc-lime);
		-webkit-mask: var(--i, var(--i-dashboard)) center / contain no-repeat;
		mask: var(--i, var(--i-dashboard)) center / contain no-repeat;
	}
	.woocommerce-account .dc-navtoggle__chev {
		flex: 0 0 auto;
		width: 18px;
		height: 18px;
		margin-left: auto;
		background: rgba(255,255,255,.6);
		-webkit-mask: var(--i-chevron) center / contain no-repeat;
		mask: var(--i-chevron) center / contain no-repeat;
		transition: transform .22s ease;
	}
	.woocommerce-account [data-dc-nav="open"] .dc-navtoggle__chev { transform: rotate(180deg); }
	.woocommerce-account [data-dc-nav="open"] .dc-navtoggle { border-radius: var(--dc-r-lg) var(--dc-r-lg) 0 0; }

	.woocommerce-account [data-dc-nav] ul { display: none; }
	.woocommerce-account [data-dc-nav="open"] ul {
		display: block;
		margin-top: 2px;
		border-radius: 0 0 var(--dc-r-lg) var(--dc-r-lg);
	}
	/* The button already names the page you're on. */
	.woocommerce-account [data-dc-nav] li.is-active { display: none; }
}

/* Phones: each order becomes a stacked block, label on the left, value on
   the right. Doesn't rely on WooCommerce's small-screen stylesheet, which
   some themes switch off. */
@media (max-width: 768px) {
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive,
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody,
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tr { display: block; }
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive thead { display: none; }
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody tr + tr { border-top: var(--dc-line); }
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody th,
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody td {
		display: flow-root;
		padding: 8px 16px;
		border: 0;
		border-radius: 0;
		text-align: right;
		box-shadow: none;
	}
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody tr > :first-child { padding-top: 14px; }
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody tr > :last-child { padding-bottom: 14px; }
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody th::before,
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody td::before {
		content: attr(data-title);
		float: left;
		margin: 2px 14px 0 0;
		font-family: var(--dc-font);
		font-size: 13px;
		font-weight: 600;
		line-height: 1.6;
		text-align: left;
		color: var(--dc-ink-soft);
	}
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive tbody td:not([data-title])::before { content: none; }
	.woocommerce-account .woocommerce-orders-table__cell-order-status { min-width: 0; }
	.woocommerce-account .woocommerce-MyAccount-content .dc-status__hint { clear: both; padding-top: 6px; text-align: left; }
	/* Actions: label on its own line, buttons left-aligned beneath. */
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive .woocommerce-orders-table__cell-order-actions { text-align: left; white-space: normal; }
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table_responsive .woocommerce-orders-table__cell-order-actions::before { float: none; display: block; margin: 0 0 8px; }
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button,
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button + .button { margin: 0 8px 6px 0; }
	/* The flag moves from the first cell to the whole block. */
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr.woocommerce-orders-table__row--status-pending { background: var(--dc-amber-tint); box-shadow: inset 5px 0 0 var(--dc-amber); }
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr.woocommerce-orders-table__row--status-failed { background: var(--dc-red-tint); box-shadow: inset 5px 0 0 var(--dc-red); }
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr.woocommerce-orders-table__row--status-pending > *,
	.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr.woocommerce-orders-table__row--status-failed > * { background: transparent; }
}

@media (max-width: 760px) {
	.woocommerce-account .dc-attention__item { grid-template-columns: minmax(0, 1fr) auto; }
	.woocommerce-account .dc-attention__meta { grid-column: 1; grid-row: 2; }
	.woocommerce-account .dc-attention .dc-btn { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 620px) {
	/* Long words and wide children (order numbers, emails, tables) are the
	   usual culprits for a page that scrolls sideways on a phone. */
	.woocommerce-account .dc-account,
	.woocommerce-account .dc-account * { min-width: 0; }
	.woocommerce-account .dc-account { overflow-wrap: anywhere; }

	.woocommerce-account .dc-bento { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.woocommerce-account .dc-links li { flex-basis: 100%; }
	.woocommerce-account .dc-fields { grid-template-columns: minmax(0, 1fr); }
	.woocommerce-account .dc-fields > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
	.woocommerce-account .dc-count__number { font-size: 70px; }
	.woocommerce-account .dc-tile,
	.woocommerce-account .dcsc-card { padding: 20px; }
	.woocommerce-account .dc-label { padding: 0; }
}

@media (max-width: 480px) {
	/* Too narrow for the button alongside: it goes underneath, full width. */
	.woocommerce-account .dc-attention { padding: 18px; }
	.woocommerce-account .dc-attention__item { grid-template-columns: minmax(0, 1fr); }
	.woocommerce-account .dc-attention__meta,
	.woocommerce-account .dc-attention .dc-btn { grid-column: 1; grid-row: auto; }
	.woocommerce-account .dc-attention .dc-btn { width: 100%; }
	.woocommerce-account .dc-status { flex-shrink: 0; }
}

/* =========================================================================
 * Logged out: brand panel beside the login / register forms
 * ====================================================================== */
.woocommerce-account:not(.logged-in) .woocommerce > h2:first-of-type { display: none; } /* stray "My account" */

.woocommerce-account .woocommerce:has(> .dc-auth) {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 32px;
	align-items: start;
}
.woocommerce-account .woocommerce:has(> .dc-auth) > :not(.dc-auth):not(#customer_login):not(.woocommerce-form-login) { grid-column: 1 / -1; }

/* Blue panel with the diagonal stripes from the product page's recap. */
.woocommerce-account .dc-auth {
	position: sticky;
	top: 90px;
	overflow: hidden;
	padding: 40px 36px;
	border-radius: var(--dc-r-lg);
	background: linear-gradient(180deg, #2c4eba, #1e42b0);
	color: #fff;
	font-family: var(--dc-font);
}
.woocommerce-account .dc-auth::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(-30deg, transparent 0 46px, rgba(255,255,255,.05) 46px 48px);
	pointer-events: none;
}
.woocommerce-account .dc-auth > * { position: relative; }
.woocommerce-account .dc-auth .dc-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	padding: 6px 12px 6px 8px;
	border-radius: 999px;
	background: rgba(255,255,255,.12);
	font-size: 13px;
	color: #fff;
}
.woocommerce-account .dc-auth .dc-kicker::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dc-lime);
	animation: dc-ping 1.8s ease-out infinite;
}
.woocommerce-account .dc-auth__title {
	margin: 0 0 26px;
	font-family: var(--dc-font);
	font-size: clamp(32px, 3.6vw, 46px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -.025em;
	text-transform: none;
	color: #fff;
}
.woocommerce-account .dc-auth__title span { display: block; color: var(--dc-lime); }
.woocommerce-account .dc-auth__points {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce-account .dc-auth__points li {
	position: relative;
	margin: 0;
	padding-left: 28px;
	font-size: 16.5px;
	line-height: 1.45;
	color: rgba(255,255,255,.88);
	list-style: none;
}
/* Lime tick squares, as on the plan cards. */
.woocommerce-account .dc-auth__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 16px;
	height: 16px;
	border-radius: 5px;
	background: var(--dc-lime);
}
.woocommerce-account .dc-auth__points li::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 9px;
	width: 6px;
	height: 3px;
	border-left: 2px solid var(--dc-lime-ink);
	border-bottom: 2px solid var(--dc-lime-ink);
	transform: rotate(-45deg);
}

.woocommerce-account #customer_login.u-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin: 0;
}
.woocommerce-account #customer_login.u-columns::before,
.woocommerce-account #customer_login.u-columns::after { display: none; }
.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2,
.woocommerce-account .woocommerce > .woocommerce-form-login {
	float: none;
	width: auto;
	margin: 0;
	padding: 28px 30px;
	border: var(--dc-line);
	border-radius: var(--dc-r-lg);
	background: #fff;
	font-family: var(--dc-font);
}
.woocommerce-account #customer_login .u-column2 { background: var(--dc-paper); }
.woocommerce-account #customer_login h2 {
	margin: 0 0 18px;
	font-family: var(--dc-font);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.025em;
	text-transform: none;
	color: var(--dc-ink);
}
.woocommerce-account .woocommerce-form-login label,
.woocommerce-account .woocommerce-form-register label { font-weight: 600; color: var(--dc-ink); }
.woocommerce-account .woocommerce-form-login .input-text,
.woocommerce-account .woocommerce-form-register .input-text {
	padding: 12px 14px;
	border: var(--dc-line);
	border-radius: 12px;
	background: #fff;
	font-family: var(--dc-font);
	font-size: 16px;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.woocommerce-account .woocommerce-form-login .input-text:focus,
.woocommerce-account .woocommerce-form-register .input-text:focus {
	outline: none;
	border-color: var(--dc-navy);
	box-shadow: 0 0 0 3px rgba(39,73,182,.14);
}
.woocommerce-account .woocommerce-form-register button.button,
.woocommerce-account .woocommerce-form-register button.button:hover { border-color: var(--dc-lime); background: var(--dc-lime); color: var(--dc-lime-ink); }
.woocommerce-account .woocommerce-form-register button.button:hover { border-color: var(--dc-lime-hi); background: var(--dc-lime-hi); }
.woocommerce-account .woocommerce-LostPassword a { color: var(--dc-blue); font-weight: 600; }

@media (max-width: 860px) {
	.woocommerce-account .woocommerce:has(> .dc-auth) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.woocommerce-account .dc-auth { position: static; padding: 30px 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-account .dc-auth .dc-kicker::before { animation: none; }
	.woocommerce-account .dc-btn,
	.woocommerce-account .dcsc-modal .dcsc-reason,
	.woocommerce-account .dc-links__go,
	.woocommerce-account .woocommerce-MyAccount-navigation li a::before { transition: none; }
}

/* =========================================================================
 * Retention credit — a temporary discount running on the subscription. Sits
 * under the fields, not in them: the Amount stays the standing price.
 * ====================================================================== */
.woocommerce-account .dc-credit-note {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 10px 0 0;
	padding: 10px 13px;
	border-radius: 14px;
	background: var(--dc-amber-tint);
	border: 1px solid var(--dc-amber);
	font-size: 14px;
	line-height: 1.4;
	color: var(--dc-ink);
}
.woocommerce-account .dc-credit-note__icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dc-amber);
	color: var(--dc-ink);
	font-weight: 800;
	font-size: 13px;
}

/* The card fills its slot in the row and centres its contents vertically. */
.woocommerce-account .woocommerce-MyAccount-content a.dc-links__item { flex: 1 1 auto; align-items: center; }