/* ==================================================================
   The Longevity Edge — My Account styles
   Loaded on /my-account/* via inc/account-styles enqueue.
   Depends on tokens.css + components.css.
   ================================================================== */

/* === SHELL (matches mockup) === */
.woocommerce-account .account-shell,
body.woocommerce-account .content-area { padding: 0 !important; margin-top: 0 !important; }
body.woocommerce-account { background: var(--canvas); }

.account-shell {
	padding: var(--s-7) 0 var(--s-9);
	background: var(--canvas);
	min-height: 80vh;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* === HEADER === */
.account-header { margin-bottom: var(--s-7); }
.account-header h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xl); margin: 0 0 var(--s-2); color: var(--navy-900); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.account-header p { margin: 0; color: var(--ink-700); font-size: var(--fs-lg); }

/* === LAYOUT === */
.account-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--s-7); align-items: start; }
@media (max-width: 900px) { .account-layout { grid-template-columns: 1fr; } }

/* === NAV SIDEBAR === */
.account-nav { background: var(--surface); border: 1px solid var(--navy-100); border-radius: var(--r-lg); padding: var(--s-3); position: sticky; top: 84px; }
.account-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.account-nav a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); color: var(--ink-700); text-decoration: none; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; min-height: 44px; transition: background var(--t-default) var(--ease-out), color var(--t-default) var(--ease-out); }
.account-nav a:hover { background: var(--canvas); color: var(--navy-900); }
body.woocommerce-account .account-nav a.is-active,
body.woocommerce-account .account-nav a.is-active:link,
body.woocommerce-account .account-nav a.is-active:visited,
body.woocommerce-account .account-nav a.is-active:hover { background: var(--navy-900) !important; color: #fff !important; }
body.woocommerce-account .account-nav a.is-active svg,
body.woocommerce-account .account-nav a.is-active:hover svg { color: var(--gold-300) !important; }
.account-nav svg { flex-shrink: 0; color: var(--ink-500); }
.account-nav-divider { border-top: 1px solid var(--navy-100); margin: var(--s-2) 0; list-style: none; height: 0; }
.account-nav-logout { color: var(--cta-600) !important; }

/* === MAIN === */
.account-main { display: flex; flex-direction: column; gap: var(--s-6); }
.account-card { background: var(--surface); border: 1px solid var(--navy-100); border-radius: var(--r-lg); padding: var(--s-6); }
.account-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap; }
.account-card-head h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); color: var(--navy-900); margin: 0; letter-spacing: var(--ls-tight); }
.account-card-head .head-meta { font-size: var(--fs-sm); color: var(--ink-700); }

/* === SUCCESS / ERROR NOTICE === */
.le-account-notice {
	padding: var(--s-4) var(--s-5);
	border-radius: var(--r-md);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: 500;
	margin-bottom: var(--s-5);
	border-left: 4px solid;
}
.le-account-notice--success { background: var(--success-50); border-left-color: var(--success); color: var(--success); }
.le-account-notice--error { background: rgba(208, 60, 60, 0.08); border-left-color: var(--error); color: var(--error); }

/* === QUICK ACTIONS === */
.quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.quick-action { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); background: var(--canvas); border: 1px solid var(--navy-100); border-radius: var(--r-md); text-decoration: none; color: var(--navy-900); transition: border-color var(--t-default) var(--ease-out); }
.quick-action:hover { border-color: var(--navy-700); color: var(--navy-900); }
.quick-action svg { color: var(--gold-600); flex-shrink: 0; }
.quick-action-label { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); color: var(--navy-900); display: block; }
.quick-action-sub { font-size: var(--fs-xs); color: var(--ink-700); display: block; margin-top: 2px; }
@media (max-width: 768px) { .quick-actions { grid-template-columns: 1fr; } }

/* Disclosure-style quick action (vacation hold dropdown) */
.quick-action.quick-action--disclosure { padding: 0; flex-direction: column; align-items: stretch; gap: 0; cursor: pointer; }
.quick-action.quick-action--disclosure > summary { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); list-style: none; cursor: pointer; }
.quick-action.quick-action--disclosure > summary::-webkit-details-marker { display: none; }
.quick-action.quick-action--disclosure > summary svg { color: var(--gold-600); flex-shrink: 0; }
.quick-action.quick-action--disclosure[open] > summary { border-bottom: 1px solid var(--navy-100); }
.quick-action-panel { padding: var(--s-4); background: var(--surface); border-radius: 0 0 var(--r-md) var(--r-md); }
.quick-action-panel p { font-size: var(--fs-sm); color: var(--ink-700); margin: 0 0 var(--s-3); }
.quick-action-panel p.helper { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--ink-500); }

/* Empty state when user has no active subscriptions */
.account-empty-subs p { font-size: var(--fs-base); color: var(--ink-700); margin: 0; line-height: var(--lh-normal); }

/* === 12-MONTH SAVINGS CARD === */
.account-savings-card { background: linear-gradient(105deg, var(--gold-50) 0%, var(--surface) 100%); border: 1px solid var(--gold-100); }
.account-savings-card-inner { display: flex; align-items: center; gap: var(--s-5); }
.account-savings-card-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--gold-100); color: var(--gold-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.account-savings-card-content { flex: 1; min-width: 0; }
.account-savings-card-eyebrow { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--gold-600); margin: 0 0 4px; }
.account-savings-card-amount { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xl); color: var(--success); margin: 0; line-height: 1; letter-spacing: var(--ls-tight); }
.account-savings-card-sub { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ink-700); margin: var(--s-2) 0 0; line-height: var(--lh-normal); }

/* === UTILITY ROW (Vacation hold + Doctor PDF) === */
.account-utility-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 768px) { .account-utility-grid { grid-template-columns: 1fr; } }
.account-utility-action { background: var(--canvas); border: 1px solid var(--navy-100); border-radius: var(--r-md); padding: var(--s-4); text-decoration: none; color: var(--navy-900); display: block; }
.account-utility-action summary,
.account-utility-action.account-utility-link { display: flex; align-items: center; gap: var(--s-3); list-style: none; cursor: pointer; }
.account-utility-action summary::-webkit-details-marker { display: none; }
.account-utility-action svg { color: var(--gold-600); flex-shrink: 0; }
.account-utility-action:hover { border-color: var(--navy-700); }
.account-utility-panel { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--navy-100); }
.account-utility-panel p { font-size: var(--fs-sm); color: var(--ink-700); margin: 0 0 var(--s-3); }
.account-utility-panel p.helper { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--ink-500); }
.account-utility-options { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* === SUBSCRIPTION CARD === */
.sub-card { background: var(--canvas); border: 1px solid var(--navy-100); border-radius: var(--r-lg); padding: var(--s-5); margin-bottom: var(--s-4); }
.sub-card:last-child { margin-bottom: 0; }
.sub-card--detail { background: var(--surface); }
.sub-card-top { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-5); align-items: center; margin-bottom: var(--s-5); }
.sub-card-img { width: 90px; height: 90px; border-radius: var(--r-md); background: var(--canvas); overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sub-card-img img { width: 100%; height: 100%; object-fit: cover; }
.sub-card-info h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); color: var(--navy-900); margin: 0 0 var(--s-2); letter-spacing: var(--ls-tight); }
.sub-card-info-row { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: var(--ink-700); flex-wrap: wrap; }
.sub-card-status { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: var(--success-50); color: var(--success); line-height: 1; min-height: 24px; }
.sub-card-paused-meta { font-size: var(--fs-xs); color: var(--ink-500); font-style: italic; }
.sub-card-price { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xl); color: var(--navy-900); font-feature-settings: "tnum","lnum"; text-align: right; letter-spacing: -0.01em; line-height: 1; }
.sub-card-price-sub { font-size: var(--fs-xs); color: var(--ink-700); font-weight: 500; margin-top: 4px; text-align: right; }
.sub-card-price-locked { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--success); font-weight: 700; margin-top: var(--s-2); padding: 3px 8px; background: var(--success-50); border-radius: var(--r-pill); line-height: 1; text-transform: uppercase; letter-spacing: var(--ls-wide); }
.sub-card-price-locked svg { width: 11px; height: 11px; flex-shrink: 0; }

.sub-card-detail { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--navy-100); border-bottom: 1px solid var(--navy-100); margin-bottom: var(--s-4); }
.sub-detail-item { display: flex; flex-direction: column; gap: 2px; }
.sub-detail-label { font-size: var(--fs-xs); color: var(--ink-500); text-transform: uppercase; letter-spacing: var(--ls-wide); font-weight: 600; }
.sub-detail-value { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-base); color: var(--navy-900); }
.sub-detail-value.next-ship { color: var(--success); }

.sub-card-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-2); align-items: stretch; position: relative; }
.sub-card-actions > .sub-action,
.sub-card-actions > .sub-action--disclosure { width: 100%; min-width: 0; }
.sub-card-actions:has(.sub-action--disclosure[open]) { margin-bottom: var(--s-7); }
.sub-action { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); line-height: 1; letter-spacing: -0.005em; color: var(--navy-900); background: var(--surface); border: 1.5px solid var(--navy-100); border-radius: var(--r-md); padding: 0 var(--s-4); height: 44px; min-height: 44px; cursor: pointer; text-decoration: none; box-sizing: border-box; vertical-align: middle; transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out), background 180ms var(--ease-out), box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out); }
.sub-action svg { width: 20px; height: 20px; display: block; flex-shrink: 0; color: var(--ink-700); transition: color 180ms var(--ease-out); }
.sub-action:hover, .sub-action:focus-visible { border-color: var(--gold-600); box-shadow: 0 4px 12px rgba(14, 26, 43, 0.08); transform: translateY(-1px); outline: none; }
.sub-action:hover svg, .sub-action:focus-visible svg { color: var(--gold-600); }

/* Inline disclosure actions (Change frequency, Pause/Cancel) */
/* Disclosure (closed): exact 40px outer box matches anchor buttons */
.sub-action--disclosure { padding: 0; flex-direction: column; align-items: stretch; height: 44px; overflow: visible; }
.sub-action--disclosure > summary { display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding: 0 var(--s-4); height: 100%; line-height: 1; letter-spacing: -0.005em; list-style: none; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); color: var(--navy-900); box-sizing: border-box; transition: color 180ms var(--ease-out); }
.sub-action--disclosure > summary::-webkit-details-marker { display: none; }
.sub-action--disclosure > summary::marker { display: none; }
.sub-action--disclosure > summary svg { width: 20px; height: 20px; display: block; flex-shrink: 0; color: var(--ink-700); transition: color 180ms var(--ease-out); }
.sub-action--disclosure > summary:hover svg, .sub-action--disclosure > summary:focus-visible svg { color: var(--gold-600); }
/* Disclosure stays put when opened — panel floats below all buttons (absolute). */
.sub-card-actions > .sub-action--disclosure[open] { height: 40px; z-index: 2; }
.sub-action-disclosure-panel { position: absolute; left: 0; right: 0; top: calc(100% + var(--s-3)); background: var(--surface); border: 1.5px solid var(--navy-100); border-radius: var(--r-md); padding: var(--s-5); margin-top: 0; z-index: 10; box-shadow: 0 6px 20px rgba(14, 26, 43, 0.08); }
.sub-action-disclosure-panel { padding: var(--s-4); border-top: 1px solid var(--navy-100); background: var(--canvas); border-radius: 0 0 var(--r-md) var(--r-md); }
.sub-action-disclosure-help { font-size: var(--fs-xs); color: var(--ink-700); margin: 0 0 var(--s-3); font-weight: 400; }
.sub-action-disclosure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.sub-action-disclosure-option { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); font-weight: 500; color: var(--navy-900); background: var(--surface); border: 1.5px solid var(--navy-100); border-radius: var(--r-md); text-decoration: none; min-height: 40px; transition: border-color var(--t-default) var(--ease-out); }
.sub-action-disclosure-option:hover { border-color: var(--navy-700); }
.sub-action-disclosure-option.is-current { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.sub-action-disclosure-option.is-danger { color: var(--cta-600); border-color: var(--navy-100); }
.sub-action-disclosure-option.is-danger:hover { border-color: var(--cta-600); }
.sub-action-disclosure-current-badge { font-size: var(--fs-xs); background: var(--gold-300); color: var(--navy-900); padding: 2px 8px; border-radius: var(--r-pill); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-wide); }

/* === Frequency picker (radio + Apply pattern on view-subscription) === */
.freq-picker .sub-action-disclosure-grid { margin-bottom: var(--s-4); }
.freq-option { position: relative; }
.freq-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.freq-option { cursor: pointer; }
.freq-option:hover { border-color: var(--navy-700); }
.freq-option.is-selected { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.freq-option.is-selected .freq-option-label { color: #fff; }
.freq-picker-actions { display: flex; justify-content: flex-end; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--navy-100); }
.apply-frequency:disabled { opacity: 0.55; cursor: not-allowed; }
.apply-frequency:disabled:hover { border-color: var(--navy-900); background: var(--navy-900); }

@media (max-width: 640px) {
	.sub-card-top { grid-template-columns: auto 1fr; gap: var(--s-3); }
	.sub-card-price { grid-column: 1 / -1; text-align: left; }
	.sub-card-detail { grid-template-columns: 1fr 1fr; }
	.sub-action-disclosure-grid { grid-template-columns: 1fr; }
}

/* === PRICE LOCK BANNER === */
.price-lock-banner { display: flex; align-items: center; gap: var(--s-4); background: linear-gradient(95deg, var(--success-50) 0%, var(--gold-50) 100%); border: 1px solid rgba(45,122,72,0.3); border-left: 4px solid var(--success); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5); }
.price-lock-banner-icon { width: 40px; height: 40px; background: var(--success); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.price-lock-banner-content { flex: 1; min-width: 0; }
.price-lock-banner-content strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--navy-900); margin-bottom: 2px; letter-spacing: var(--ls-tight); }
.price-lock-banner-content span { font-size: var(--fs-sm); color: var(--ink-700); line-height: var(--lh-normal); display: block; }
.price-lock-banner-content a { color: var(--success); text-decoration: underline; text-underline-offset: 0.18em; font-weight: 600; }
@media (max-width: 560px) { .price-lock-banner { flex-direction: column; text-align: left; align-items: flex-start; } }

/* === ORDER ROW === */
.order-row { display: grid; grid-template-columns: auto 2fr 1fr 1fr auto auto; gap: var(--s-4); padding: var(--s-4); border: 1px solid var(--navy-100); border-radius: var(--r-md); margin-bottom: var(--s-3); background: var(--canvas); align-items: center; }
.order-row:last-child { margin-bottom: 0; }
.order-row--linked { display: flex; align-items: stretch; padding: 0; gap: 0; }
.order-row-main { flex: 1; display: grid; grid-template-columns: auto 2fr 1fr 1fr auto; gap: var(--s-4); padding: var(--s-4); align-items: center; text-decoration: none; color: inherit; }
.order-row-receipt { display: flex; align-items: center; justify-content: center; padding: var(--s-3); border-left: 1px solid var(--navy-100); color: var(--ink-700); text-decoration: none; transition: color var(--t-default) var(--ease-out), background var(--t-default) var(--ease-out); }
.order-row-receipt:hover { color: var(--gold-600); background: var(--surface); }
.order-img { width: 48px; height: 48px; background: var(--surface); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: var(--ink-500); font-size: 10px; overflow: hidden; }
.order-img img { width: 100%; height: 100%; object-fit: cover; }
.order-id { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); color: var(--navy-900); margin: 0; }
.order-id-sub { font-size: var(--fs-xs); color: var(--ink-500); margin: 0; }
.order-date { font-size: var(--fs-sm); color: var(--ink-700); }
.order-status { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-wide); padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: var(--success-50); color: var(--success); min-height: 22px; line-height: 1; }
.order-status.is-shipped { background: var(--gold-50); color: var(--gold-600); }
.order-status.is-pending { background: var(--navy-50); color: var(--navy-700); }
.order-total { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-base); color: var(--navy-900); text-align: right; font-feature-settings: "tnum","lnum"; }
@media (max-width: 640px) {
	.order-row-main { grid-template-columns: auto 1fr; gap: var(--s-3); }
	.order-row-main > *:nth-child(n+3) { grid-column: span 2; }
}

/* === HELPER TEXT === */
.helper { font-size: var(--fs-sm); color: var(--ink-700); margin: var(--s-3) 0 0; }

/* === KADENCE WRAPPER OVERRIDES === */
body.woocommerce-account .content-area { margin-top: 24px !important; }
body.woocommerce-account .content-container,
body.woocommerce-account .entry-content-wrap,
body.woocommerce-account .site-main,
body.woocommerce-account main#main { padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

/* Kadence renders the WP page title ("My Account") as a giant entry-header
   above WC content. Our dashboard.php already shows "Welcome back, X." as
   the H1, so hide Kadence's duplicate title. */
body.woocommerce-account .entry-header,
body.woocommerce-account .page-title,
body.woocommerce-account .entry-title { display: none !important; }

/* ------------------------------------------------------------------
   My Account 2-col layout — final form.
   Kadence parent theme renders:
     .entry-content-wrap > .woocommerce
       └─ .account-navigation-wrap   (our nav + Kadence avatar)
       └─ .woocommerce-MyAccount-content  (dashboard.php output)
   WC/Kadence apply float + explicit widths to these wrappers and grid
   auto-placement was putting them on different rows / wrong columns.
   We use EXPLICIT grid-column / grid-row placement to force the
   correct slots, regardless of what other CSS does.
   ------------------------------------------------------------------ */

body.woocommerce-account .woocommerce {
	display: grid !important;
	grid-template-columns: 240px 1fr !important;
	grid-template-rows: auto !important;
	gap: var(--s-7) !important;
	align-items: start !important;
	padding: var(--s-7) 0 var(--s-9) !important;
}

body.woocommerce-account .account-navigation-wrap {
	grid-column: 1 / 2 !important;
	grid-row: 1 !important;
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	position: sticky !important;
	top: 84px !important;
	align-self: start !important;
	display: flex !important;
	flex-direction: column !important;
	gap: var(--s-4) !important;
}

body.woocommerce-account .woocommerce-MyAccount-content {
	grid-column: 2 / 3 !important;
	grid-row: 1 !important;
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Hide Kadence's gravatar block — our nav already conveys identity. */
body.woocommerce-account .kadence-account-avatar { display: none !important; }

@media (max-width: 900px) {
	body.woocommerce-account .woocommerce {
		grid-template-columns: 1fr !important;
		gap: var(--s-5) !important;
	}
	body.woocommerce-account .account-navigation-wrap {
		grid-column: 1 !important;
		grid-row: 1 !important;
		position: static !important;
	}
	body.woocommerce-account .woocommerce-MyAccount-content {
		grid-column: 1 !important;
		grid-row: 2 !important;
	}
}


/* === PRIMARY + DANGER variants — design 2026-05 === */
.sub-action.is-primary { background: var(--navy-900); border-color: var(--navy-900); color: #fff; box-shadow: 0 2px 6px rgba(14, 26, 43, 0.12); }
.sub-action.is-primary svg { color: var(--gold-300); }
.sub-action.is-primary:hover, .sub-action.is-primary:focus-visible { background: var(--navy-700); border-color: var(--gold-600); box-shadow: 0 8px 20px rgba(14, 26, 43, 0.20); }
.sub-action.is-primary:hover svg, .sub-action.is-primary:focus-visible svg { color: var(--gold-300); }
.sub-action.is-danger, .sub-action--disclosure.is-danger > summary { color: var(--ink-700); }
.sub-action.is-danger svg, .sub-action--disclosure.is-danger > summary svg { color: var(--ink-500); }
.sub-action.is-danger:hover, .sub-action--disclosure.is-danger > summary:hover { border-color: var(--cta-600); color: var(--cta-600); }
.sub-action.is-danger:hover svg, .sub-action--disclosure.is-danger > summary:hover svg { color: var(--cta-600); }

/* === NAV FIX: parent <li>.is-active variant (used on view-subscription pages where WC marks the parent rather than the <a>) === */
body.woocommerce-account .account-nav li.is-active > a,
body.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active > a { background: var(--navy-900) !important; color: #fff !important; }
body.woocommerce-account .account-nav li.is-active > a svg,
body.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active > a svg { color: var(--gold-300) !important; }

/* === ACTION ROW GROUPING ===
   Sub-card-actions can contain optional inner rows for primary vs secondary
   action groups (view-subscription template uses this). When .sub-card-actions
   contains direct row children, switch from grid to flex-column. */
.sub-card-actions:has(> .sub-card-actions-row) { display: flex; flex-direction: column; gap: var(--s-3); }
.sub-card-actions-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-2); align-items: stretch; }
.sub-card-actions-row--secondary { padding-top: var(--s-3); border-top: 1px solid var(--navy-100); }


/* === MOVE UP NEXT ORDER — date picker disclosure beside Next ship date === */
.move-up-disclosure { margin-top: var(--s-2); }
.move-up-toggle { list-style: none; cursor: pointer; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; color: var(--gold-600); padding: 2px 0; display: inline-block; letter-spacing: var(--ls-wide); text-transform: uppercase; }
.move-up-toggle::-webkit-details-marker { display: none; }
.move-up-toggle::marker { display: none; }
.move-up-toggle:hover { color: var(--navy-900); }
.move-up-disclosure[open] .move-up-toggle { color: var(--navy-900); }
.move-up-panel { margin-top: var(--s-3); padding: var(--s-4); background: var(--surface); border: 1px solid var(--navy-100); border-radius: var(--r-md); display: flex; flex-direction: column; gap: var(--s-2); max-width: 280px; }
.move-up-panel label { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-700); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.move-up-input { border: 1.5px solid var(--navy-100); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); font-family: var(--font-body); font-size: var(--fs-sm); color: var(--navy-900); background: var(--canvas); }
.move-up-input:focus { outline: 2px solid var(--gold-300); outline-offset: 1px; border-color: var(--gold-600); }
.move-up-submit { height: 40px !important; min-height: 40px !important; margin-top: var(--s-2); }
.move-up-hint { margin: var(--s-2) 0 0; font-size: var(--fs-xs); color: var(--ink-500); line-height: var(--lh-normal); }

/* Prevent horizontal scrollbar from full-bleed -50vw margins. */
html, body { overflow-x: clip; }

/* ==================================================================
   v1.9.48 — Multi-item subscription display
   - Stack thumbnails on the dashboard sub card when sub has 2+ items
   - Show a full "Items in this subscription" list on view-subscription
   ================================================================== */

/* Thumbnail stack (overlapping circles) for multi-item sub cards */
.sub-card-img--stack { display: flex; align-items: center; flex-shrink: 0; }
.sub-card-img--stack .sub-card-img-thumb { display: inline-block; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid var(--surface, #fff); box-shadow: 0 0 0 1px var(--navy-100); margin-left: -16px; background: var(--canvas); flex-shrink: 0; position: relative; }
.sub-card-img--stack .sub-card-img-thumb:first-child { margin-left: 0; }
.sub-card-img--stack .sub-card-img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sub-card-img--stack .sub-card-img-more { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 18px; background: var(--navy-900); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; margin-left: -8px; border: 2px solid var(--surface, #fff); }

/* Sub-detail-value secondary text (used for the (X items) hint) */
.sub-detail-value-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-500); font-weight: 500; }

/* Items list on view-subscription */
.sub-items-list { background: var(--canvas); border: 1px solid var(--navy-100); border-radius: var(--r-md); padding: 16px 20px; margin: 16px 0 0; }
.sub-items-list-title { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink-700); margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.sub-items-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sub-items-list-row { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; padding: 0; }
.sub-items-list-thumb { width: 48px; height: 48px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface); border: 1px solid var(--navy-100); }
.sub-items-list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sub-items-list-body { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sub-items-list-name { font-family: var(--font-body); font-weight: 600; color: var(--navy-900); font-size: 15px; }
.sub-items-list-name a { color: inherit; text-decoration: none; }
.sub-items-list-name a:hover { color: var(--gold-600); text-decoration: underline; }
.sub-items-list-qty { font-family: var(--font-body); font-size: 13px; color: var(--ink-700); font-weight: 600; font-feature-settings: "tnum","lnum"; }
@media (max-width: 480px) {
	.sub-card-img--stack .sub-card-img-thumb { width: 44px; height: 44px; margin-left: -12px; }
}

/* ==================================================================
   v1.9.83 — Logged-out /my-account/ login + register layout
   ------------------------------------------------------------------
   WC's default form-login.php template emits:
     <div class="u-columns col2-set" id="customer_login">
       <div class="u-column1 col-1"> Login form </div>
       <div class="u-column2 col-2"> Register form </div>
     </div>
   The default WC CSS for .u-columns relies on legacy float-based
   layout that breaks inside Kadence's wrapper, leaving content
   smashed left. Replace with a clean grid + brand-aligned cards.
   ================================================================== */

/* Welcome line above the login + register columns */
.le-account-loggedout-welcome {
	max-width: 920px;
	margin: var(--s-6) auto var(--s-5);
	padding: 0 var(--s-5);
	text-align: center;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	color: var(--ink-700);
	line-height: var(--lh-snug);
}

/* The 2-col grid wrapper */
body.woocommerce-account #customer_login,
body.woocommerce-account .u-columns.col2-set#customer_login {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-6);
	max-width: 920px;
	margin: 0 auto var(--s-7);
	padding: 0 var(--s-5);
}

@media (max-width: 768px) {
	body.woocommerce-account #customer_login,
	body.woocommerce-account .u-columns.col2-set#customer_login {
		grid-template-columns: 1fr;
		gap: var(--s-4);
	}
}

/* Each column as a brand card */
body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2,
body.woocommerce-account #customer_login .col-1,
body.woocommerce-account #customer_login .col-2 {
	background: var(--surface) !important;
	border: 1px solid var(--navy-100) !important;
	border-radius: var(--r-lg) !important;
	padding: var(--s-6) !important;
	box-shadow: 0 8px 24px rgba(14, 26, 43, 0.06) !important;
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
}

/* Column headings — "Login" and "Register" */
body.woocommerce-account #customer_login h2 {
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	font-size: var(--fs-2xl) !important;
	color: var(--navy-900) !important;
	margin: 0 0 var(--s-4) !important;
	letter-spacing: var(--ls-tight) !important;
	text-transform: none !important;
}

/* Form rows */
body.woocommerce-account .woocommerce-form .form-row {
	margin: 0 0 var(--s-4) !important;
	display: flex !important;
	flex-direction: column !important;
}
body.woocommerce-account .woocommerce-form .form-row.form-row-wide {
	width: 100% !important;
}

/* Labels */
body.woocommerce-account .woocommerce-form .form-row label {
	display: block !important;
	font-family: var(--font-body) !important;
	font-size: var(--fs-sm) !important;
	font-weight: 600 !important;
	color: var(--navy-900) !important;
	margin: 0 0 6px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* Input fields */
body.woocommerce-account .woocommerce-form input.input-text,
body.woocommerce-account .woocommerce-form input[type="text"],
body.woocommerce-account .woocommerce-form input[type="email"],
body.woocommerce-account .woocommerce-form input[type="password"],
body.woocommerce-account .woocommerce-form .password-input input {
	width: 100% !important;
	height: 52px !important;
	padding: 0 var(--s-4) !important;
	font-family: var(--font-body) !important;
	font-size: var(--fs-base) !important;
	color: var(--navy-900) !important;
	background: #fff !important;
	border: 1.5px solid var(--navy-100) !important;
	border-radius: var(--r-md) !important;
	box-sizing: border-box !important;
	transition: border-color 180ms ease, box-shadow 180ms ease !important;
	box-shadow: none !important;
}
body.woocommerce-account .woocommerce-form input:focus {
	outline: none !important;
	border-color: var(--gold-600) !important;
	box-shadow: 0 0 0 3px rgba(196, 156, 88, 0.20) !important;
}

/* Password "show" toggle inside .password-input */
body.woocommerce-account .woocommerce-form .password-input {
	display: block !important;
	position: relative !important;
}
body.woocommerce-account .woocommerce-form .show-password-input {
	position: absolute !important;
	right: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: var(--ink-500) !important;
	cursor: pointer !important;
	padding: 4px !important;
}
body.woocommerce-account .woocommerce-form .show-password-input.display-password {
	color: var(--gold-600) !important;
}

/* Remember Me */
body.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	cursor: pointer !important;
	font-family: var(--font-body) !important;
	font-size: var(--fs-sm) !important;
	font-weight: 500 !important;
	color: var(--ink-700) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	margin: 0 0 var(--s-3) !important;
}
body.woocommerce-account .woocommerce-form-login__rememberme input[type="checkbox"],
body.woocommerce-account .woocommerce-form__input-checkbox {
	width: 18px !important;
	height: 18px !important;
	accent-color: var(--gold-600) !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
}

/* Submit buttons — Login + Register */
body.woocommerce-account .woocommerce-form .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-form .woocommerce-form-register__submit,
body.woocommerce-account .woocommerce-form button.button {
	display: block !important;
	width: 100% !important;
	height: 52px !important;
	padding: 0 var(--s-4) !important;
	background: var(--cta-600) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--r-md) !important;
	font-family: var(--font-body) !important;
	font-size: var(--fs-base) !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: 0 4px 12px rgba(168, 38, 50, 0.22) !important;
	cursor: pointer !important;
	transition: background 180ms ease, box-shadow 180ms ease !important;
	margin-top: var(--s-3) !important;
	float: none !important;
}
body.woocommerce-account .woocommerce-form button.button:hover {
	background: var(--cta-700, #8e1f29) !important;
	box-shadow: 0 6px 16px rgba(168, 38, 50, 0.28) !important;
}

/* Lost password link */
body.woocommerce-account .lost_password {
	text-align: center !important;
	margin: var(--s-3) 0 0 !important;
	font-family: var(--font-body) !important;
	font-size: var(--fs-sm) !important;
}
body.woocommerce-account .lost_password a {
	color: var(--gold-600) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: color 180ms ease !important;
}
body.woocommerce-account .lost_password a:hover {
	color: var(--cta-600) !important;
	text-decoration: underline !important;
}

/* Privacy notice / register policy text */
body.woocommerce-account .woocommerce-privacy-policy-text,
body.woocommerce-account .woocommerce-form-register p:not(.form-row) {
	font-family: var(--font-body) !important;
	font-size: var(--fs-xs) !important;
	color: var(--ink-500) !important;
	line-height: var(--lh-snug) !important;
	margin: var(--s-3) 0 0 !important;
}
body.woocommerce-account .woocommerce-privacy-policy-text a {
	color: var(--gold-600) !important;
	text-decoration: underline !important;
}

/* Password strength meter on register */
body.woocommerce-account .woocommerce-password-strength {
	margin: 6px 0 0 !important;
	padding: 6px 10px !important;
	border-radius: var(--r-sm) !important;
	font-family: var(--font-body) !important;
	font-size: var(--fs-xs) !important;
	font-weight: 600 !important;
}

/* ==================================================================
   v1.9.84 — Logged-out my-account layout fixes
   ------------------------------------------------------------------
   v1.9.83 grid was correct but two upstream issues defeated it:

   1. Kadence sets .woocommerce { display: grid } as its wrapper for
      WC pages. That made the welcome <p> render as a narrow grid
      child (240px sized to content). Force display: block on the
      .woocommerce wrapper specifically on account pages.

   2. WC plugin CSS sets .col-1 { float: left } / .col-2 { float: right }
      with no !important. Despite my float: none !important winning on
      the float property itself, the column order ended up visually
      reversed (Register on left, Login on right). Force explicit
      grid-column: 1 on .col-1 and grid-column: 2 on .col-2 so auto-
      flow can't shuffle them.

   3. Also wrap the welcome line in its own full-width container that
      isn't a grid child.
   ================================================================== */

/* Kadence's .woocommerce wrapper on the my-account page is display: grid
   by default. Disable for this context so children stack as blocks. */
/* SCOPED: only override the .woocommerce wrapper to display:block on the
   LOGGED-OUT my-account view (login + register columns, lost password, reset
   password). Logged-in my-account needs the default grid so the sidebar nav
   sits beside the content. */
body.woocommerce-account:not(.logged-in) .entry-content .woocommerce,
body.woocommerce-account:not(.logged-in) .entry-content-wrap .woocommerce,
body.woocommerce-account:not(.logged-in) > div > div > .woocommerce,
body.woocommerce-account:not(.logged-in) .woocommerce {
	display: block !important;
	grid-template-columns: none !important;
}

/* Welcome line: force block + full-width capped at 920px, centered */
body.woocommerce-account .le-account-loggedout-welcome {
	display: block !important;
	width: 100% !important;
	max-width: 920px !important;
	margin: var(--s-6) auto var(--s-5) !important;
	padding: 0 var(--s-5) !important;
	text-align: center !important;
	font-family: var(--font-body) !important;
	font-size: var(--fs-lg) !important;
	color: var(--ink-700) !important;
	line-height: var(--lh-snug) !important;
	box-sizing: border-box;
}

/* Force-explicit grid-column placement so auto-flow can never reverse the
   visual order regardless of upstream WC / Kadence float rules. */
body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .col-1 {
	grid-column: 1 / 2 !important;
	grid-row: 1 !important;
}
body.woocommerce-account #customer_login .u-column2,
body.woocommerce-account #customer_login .col-2 {
	grid-column: 2 / 3 !important;
	grid-row: 1 !important;
}

/* The .u-columns.col2-set wrapper that Kadence/WC may emit around
   #customer_login — make it a passthrough so it doesn't add visual
   chrome. */
body.woocommerce-account .u-columns.col2-set {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Mobile: stack columns + re-place each into row 1 then row 2 */
@media (max-width: 768px) {
	body.woocommerce-account #customer_login .u-column1,
	body.woocommerce-account #customer_login .col-1 {
		grid-column: 1 / -1 !important;
		grid-row: 1 !important;
	}
	body.woocommerce-account #customer_login .u-column2,
	body.woocommerce-account #customer_login .col-2 {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
	}
}