/**
 * My Account page — Shake Club treatment.
 *
 * Covers the whole page, both states:
 *   - #stw-account            the page-template wrapper (page-templates/my-account.php)
 *   - #stw-account-benefits   the logged-out "register-benefits" lc_partial's own wrapper
 *   - #stw-account-app        the logged-out "account-app-join" lc_partial's own wrapper,
 *                             inside the Join Now column's <form>
 *
 * Standalone plain CSS rather than a sass/ partial, same reasoning as
 * stw-product.css / stw-basket.css / stw-pricing-tiers-shared.css: a tweak to
 * this one page doesn't need a full bundle recompile plus a cache-buster bump.
 *
 * Every rule is scoped under one of those three ids, so the club palette cannot
 * leak site-wide — the same discipline sass/loyalty/_loyalty.scss applies under
 * #stw-loyalty.
 *
 * The yellow keyword highlight uses the *global* .hl class
 * (sass/_stw-global.scss, already in bundle.css) and is deliberately not
 * redefined here.
 *
 * ─────────────────────────────────────────────────────────────────────
 * TYPE SCALE (v2.41.0) — six roles. DO NOT ADD A SEVENTH.
 * ─────────────────────────────────────────────────────────────────────
 * Phil's note was "too many different fonts going on ... fix so it is easier
 * to read and less busy". The page had 16 distinct
 * size/weight/tracking/transform/colour combinations across the benefits panel
 * and the two columns, including four font weights and one letterspaced
 * all-caps treatment that nothing else on the page shared. It is six now.
 * Before styling any new text on this page, pick the role it already belongs
 * to — don't invent a size.
 *
 *   1  Page heading    48/700/-.02em plum   (24px below md) — the h1, whichever
 *                      state supplies it: the register-benefits partial's own
 *                      `.h2 .fw-bold`, or .stw-account__title
 *   2  Panel heading   22/700/-.02em plum   — #customer_login h2 (Login / Join Now)
 *   3  Standfirst      19/500/1.6 ink       (18/1.45 below md) — .stw-ab__sub
 *   4  Section heading 18/700/-.02em plum   — .stw-aj__h ("Do it all in the app")
 *   5  Label / divider 15/700 ink           — every form label in both columns,
 *                      and the two "Or ..." dividers: same size, same weight,
 *                      same ink. v2.43.0 took the dividers off muted (Phil:
 *                      "or get a login link by email in black text") — at 15px
 *                      muted they read as a disclaimer rather than as the
 *                      second route on offer. Role 5 is now one colour
 *   6  Small           13/500 muted         — "Remember me", "Lost your
 *                      password?" (underlined), the privacy note, the
 *                      magic-link info line, the AJAX spinner line
 *
 * Also fixed: body copy is 16/500 ink (benefits bullets) and 15/500 ink inside
 * the compact app card; inputs are 16/400 (16 stops iOS zooming on focus);
 * buttons are 16/700, white on pink for the primary action and plum outline for
 * the magic-link alternative.
 *
 * Deliberately outside the scale: the store badges' own 10/500/.04em + 14/700
 * pair (#stw-account-app .app-store .as-text). Those are a replica of Apple's
 * and Google's real badge lockups, copied verbatim from the homepage — they
 * read as logos, not as type, and changing them would make them look wrong.
 * Transient notice text (magic-link success / #login_error) stays at 15px:
 * shrinking an error message to make an inventory tidier is the wrong trade.
 *
 * No uppercase and no positive letter-spacing anywhere on this page outside
 * those badges. Negative tracking (-.02em) is a heading-only signal.
 *
 * @package stw2026
 */

/* ─────────────────────────────────────────────────────────────────────
   Page shell
   ───────────────────────────────────────────────────────────────────── */

#stw-account {
	/* Page-local Shake Club tokens. Deliberately redeclared: the originals are
	   scoped to #stw-loyalty in sass/loyalty/_loyalty.scss and are not in scope
	   here. These are not global brand tokens — don't promote them. */
	--plum: #3A2740;
	--gold: #E7C778;
	--gold-deep: #C9A24B;
	--cream: #F6EAD2;
	--cream-soft: #FBF7EF;
	--ink: #2A2230;
	--muted: #7A7280;
	--line: #E8E2D6;

	background: var(--cream-soft);
	color: var(--ink);
}

/* flow-root, not a clearfix: the logged-in dashboard keeps WooCommerce's own
   float layout (.woocommerce-MyAccount-navigation 30% / -content 68%, stacked
   below 768px by woocommerce-smallscreen.css), and those floats have to be
   contained or they escape the cream background. */
#stw-account .stw-account__inner {
	display: flow-root;
	/* 28px, down from 40px in v2.37.0: with the benefits panel's own top
	   padding right underneath it, 40px read as a gap rather than a margin.
	   Shared with the logged-in dashboard's H1, which is fine at 28px too. */
	padding-top: 28px;
	/* 48px, down from 64px in v2.39.1: part of Phil's "close up the spacing"
	   pass — 64px read as a dead band between the last panel and the footer. */
	padding-bottom: 48px;
}

#stw-account .stw-account__title {
	font-size: clamp(30px, 4vw, 42px);
	/* 700, not 800 (v2.41.0): one heading weight across the whole page. The
	   logged-out h1 comes from the partial's own `.fw-bold` (700), so an 800
	   here was a second page-heading treatment for a state nobody sees side by
	   side with the other — see the TYPE SCALE note at the top of this file. */
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--plum);
	margin: 0 0 28px;
}

/* ─────────────────────────────────────────────────────────────────────
   Logged-out — Login / Register panels
   ───────────────────────────────────────────────────────────────────── */

/* Grid replaces WooCommerce's own .col2-set floats (48% left / 48% right,
   woocommerce-layout.css) so the two panels are equal-width and gap-spaced
   with no float containment to worry about. The ID prefix is what beats
   WooCommerce's 3-class `.woocommerce .col2-set .col-1` — no !important.
   It also neutralises Bootstrap's own .col-1/.col-2 grid widths, which
   collide with WooCommerce's class names on these same elements. */
#stw-account #customer_login {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
	/* Not stretch (grid's default): from v2.38.0 the Join Now column carries
	   the app card and the divider on top of the register form, so it measures
	   634px against Login's 425px at 1440px. Stretched, that 209px surplus
	   showed as a band of empty white inside the Login panel, which read as a
	   bug. Each panel now ends where its own content does. */
	align-items: start;
}

/* WooCommerce clearfixes .col2-set with ::before/::after (`content:" ";
   display:table`). Pseudo-elements are grid items, so left in place they take
   row 1 / column 1 and row 2 / column 2 and shunt the two real columns
   diagonally across a 2x2 grid. The floats they were clearing are gone here
   anyway. */
#stw-account #customer_login::before,
#stw-account #customer_login::after {
	display: none;
}

#stw-account #customer_login .u-column1,
#stw-account #customer_login .u-column2 {
	float: none;
	width: auto;
	margin: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 18px;
	/* 26px, down from 30px in v2.39.1 (spacing pass). */
	padding: 26px;
}

@media (max-width: 767.98px) {
	#stw-account #customer_login {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	#stw-account #customer_login .u-column1,
	#stw-account #customer_login .u-column2 {
		padding: 22px;
	}

	/* Full-width submits on mobile. The magic-link button already filled the
	   column (the plugin's shortcode sizes it that way), so a 71px "Log in" and
	   a 94px "Join Now" next to it read as an accident rather than a hierarchy.
	   Matching all three keeps one tap-target shape per column. */
	#stw-account #customer_login button[name="login"],
	#stw-account #customer_login button[name="register"] {
		display: block;
		width: 100%;
	}
}

/* WooCommerce puts `padding: 0 3px` on every `p.form-row`, so each control in
   the login/register forms rendered 6px narrower and 3px further right than
   the magic-link form's own input and button directly below them — a 3px
   stagger down both columns at every width. Zeroing it lands every control
   flush to the panel's own padding edge. Scoped to #customer_login, which only
   exists logged out, so the logged-in address forms (which do use
   .form-row-first/.form-row-last and rely on that gutter) are untouched. */
#stw-account #customer_login p.form-row {
	padding-left: 0;
	padding-right: 0;
}

/* Core also hangs a 16px right margin off the submits, which is dead space
   once they are full width. */
#stw-account #customer_login button[name="login"],
#stw-account #customer_login button[name="register"] {
	margin-right: 0;
}

/* WooCommerce gives form.login/form.register their own bordered, padded,
   rounded box — a box inside the panel box now that the columns carry the
   chrome. */
#stw-account #customer_login form.login,
#stw-account #customer_login form.register {
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

/* Panel heading — level 2 of the TYPE SCALE.
   22px/700 in v2.41.0, from 24px/800. Two reasons, both about the scale rather
   than about this heading on its own:
   - 800 was the page's fourth weight. Every heading is 700 now.
   - At 24px it *tied* the mobile h1 (also 24px, see the max-width: 767.98px
     block), which v2.38.1 flagged as a knowing compromise. 22px restores a
     step between page heading and panel heading on a phone at no cost, and on
     desktop it sits under a 48px h1 either way. */
#stw-account #customer_login h2 {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--plum);
	/* 16px, down from 20px in v2.39.1 (spacing pass). */
	margin: 0 0 16px;
}

/* Field label — level 5 of the TYPE SCALE. One rule, every label in both
   columns, WooCommerce's own and Magic Login's alike.
   `line-height: 1.4` added in v2.41.0. WooCommerce ships `line-height: 2` on
   `.woocommerce form .form-row label`, which the plugin's label (outside a
   .form-row) never picked up — so the *same* label text, "Username or email
   address", sat 30px tall above the password field and 23.3px tall above the
   magic-link field: one label, two label-to-field gaps, stacked in one panel.
   1.4 is the figure both now share. */
#stw-account #customer_login label:not(.woocommerce-form__label-for-checkbox) {
	display: inline-block;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ink);
	margin-bottom: 6px;
}

/* The required asterisk was #a00 — the only red on the page outside the
   magic-link error box, on two fields that are *both* required, so it marked
   nothing. Muted keeps the mark (and its aria-hidden + .screen-reader-text
   "Required" sibling are what actually carry it to assistive tech) without
   spending a colour on it. Two IDs beats WooCommerce's own
   `.woocommerce form .form-row .required`. */
#stw-account #customer_login .required {
	color: var(--muted);
}

/* ── "Remember me" and "Lost your password?" — level 6, small/secondary ──
   Both were at 16px, *larger* than the 15px field labels above them, which put
   two throwaway controls at the top of the panel's hierarchy. 13px/500 muted
   is the page's one small/secondary treatment (shared with the privacy note
   and the magic-link info line below).

   The checkbox is scaled with the label: at 16px text next to a full-size
   native box the pair read as a field row rather than an option. inline-flex
   is on the label so the box stays optically centred on 13px text — whitespace
   between the two is not a flex item, so `gap` replaces the markup's space.
   6px block padding keeps the whole label (box *and* text, since the label
   wraps the input) a ~30px tap target. */
#stw-account #customer_login .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--muted);
}

#stw-account #customer_login .woocommerce-form-login__rememberme input[type="checkbox"] {
	width: 15px;
	height: 15px;
	margin: 0;
}

/* Underlined, because at 16px plain ink it read as a sentence rather than a
   link — Phil's note was that it doesn't look clickable. Muted + underline
   matches the privacy-policy link in the other column; plum on hover/focus is
   the only colour change. */
#stw-account #customer_login .woocommerce-LostPassword {
	font-size: 13px;
	line-height: 1.4;
}

#stw-account #customer_login .woocommerce-LostPassword a {
	font-weight: 500;
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

#stw-account #customer_login .woocommerce-LostPassword a:hover,
#stw-account #customer_login .woocommerce-LostPassword a:focus {
	color: var(--plum);
}

/* 16px keeps iOS from zooming the viewport on focus. */
#stw-account input.input-text {
	width: 100%;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
}

#stw-account input.input-text:focus {
	outline: none;
	border-color: var(--gold-deep);
	box-shadow: 0 0 0 3px rgba(201, 162, 75, .2);
}

/* Password reveal eye — vertically centred in its field (v2.43.0).
   Phil's note: it sat near the top of the box, not in the middle. Measured at
   390px before the fix: the field is 48px tall from y=660, the button 22px
   tall at y=662 — its centre 11px above the field's.

   The cause is two stylesheets half-agreeing, and it is worth writing down
   because neither is wrong on its own. WooCommerce ships the button as
   `position: absolute; top: 50%; transform: translateY(-50%)` inside
   `.password-input`, which the plugin's own JS wraps around the input and
   which is `display: flex; flex-direction: column; justify-content: center`.
   This theme's bundle.css then sets `top: unset` on it
   (sass/_woocommerce.scss, the "//login form eye" rule) — a site-wide rule,
   not this page's, so it is left alone here. With `top` back to `auto` the
   button falls to its *static* position, and the static position of an
   absolutely positioned child of a flex container is resolved by that
   container's own alignment — `justify-content: center` on a column axis, so
   already dead centre (computed top: 13.1875px = (48 - 22) / 2). WooCommerce's
   `translateY(-50%)` then fires a second time on an already-centred box and
   pulls it 11px up.

   Putting `top: 50%` back is the fix rather than cancelling the transform: the
   pair is what upstream intends, and it keeps working if bundle.css's rule is
   ever dropped. One ID beats both stylesheets (bundle.css's selector is two
   classes and a type), so no !important.

   Scoped to `form` and not to `#customer_login`, so it also covers the
   logged-in Account details form's three password fields — same button, same
   two stylesheets, same page. Measured dead centre on all four inputs:
   #password logged out at 320/360/375/390/430/576/768/992/1200/1440, and
   #password_current / #password_1 / #password_2 logged in at 1440 through a
   throwaway customer since deleted. */
#stw-account form .show-password-input {
	top: 50%;
	transform: translateY(-50%);
}

/* Level 6, small/secondary — 13px in v2.41.0, from 15px. Same treatment as
   "Remember me" / "Lost your password?" above and the magic-link info line, so
   everything that is genuinely a footnote on this page looks like one. */
#stw-account #customer_login .woocommerce-privacy-policy-text p,
#stw-account #customer_login form.register > p:not(.form-row) {
	font-size: 13px;
	line-height: 1.5;
	color: var(--muted);
}

/* ─────────────────────────────────────────────────────────────────────
   Logged in — dashboard / endpoints
   ───────────────────────────────────────────────────────────────────── */

#stw-account .woocommerce-MyAccount-navigation,
#stw-account .woocommerce-MyAccount-content {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 22px;
}

/* picostrap5/woocommerce/myaccount/navigation.php renders the links as a
   Bootstrap .list-group.nav-pills; only the active pill needs recolouring to
   plum so it belongs to this page rather than the default theme blue. */
#stw-account .woocommerce-MyAccount-navigation .list-group-item {
	border-color: var(--line);
	color: var(--ink);
	font-weight: 700;
}

#stw-account .woocommerce-MyAccount-navigation .list-group-item.active {
	background: var(--plum);
	border-color: var(--plum);
	color: #fff;
}

#stw-account .woocommerce-MyAccount-content h2,
#stw-account .woocommerce-MyAccount-content h3 {
	color: var(--plum);
	letter-spacing: -.02em;
}

/* ─────────────────────────────────────────────────────────────────────
   Logged-out — "register-benefits" partial block
   ───────────────────────────────────────────────────────────────────── */

#stw-account-benefits {
	/* Redeclared for the same reason as #stw-account above, and separately:
	   this block is an lc_partial and its wrapper is not guaranteed to sit
	   inside #stw-account forever. */
	--plum: #3A2740;
	--gold: #E7C778;
	--cream: #F6EAD2;
	--ink: #2A2230;
	--muted: #7A7280;
	--line: #E8E2D6;

	/* The deeper of the club page's two cream tones (.sec--gold's --cream, vs
	   .sec--cream's --cream-soft) so the panel reads as a distinct band against
	   the page background rather than dissolving into it — the same base/band
	   relationship the category and product pages use. */
	background: var(--cream);
	border: 1px solid var(--line);
	color: var(--ink);
}

/* v2.39.1: mb-5's 48px -> 32px, part of Phil's "close up the spacing" pass.
   Separate rule because mb-5 is an !important Bootstrap shorthand and this is
   the utility's counterpart, not part of the panel's own surface treatment.
   The max-width: 767.98px block below takes it to 24px. */
#stw-account-benefits {
	margin-bottom: 32px !important;
}

#stw-account-benefits h1 {
	color: var(--plum);
	letter-spacing: -.02em;
}

/* Tick shape: the club page's .tk (22px circle, 12px check centred by
   inline-grid), not the generic green --star default.

   THE SHAPE IS SHARED, THE COLOUR IS NOT — and that split is deliberate as of
   v2.43.0. v2.39.1 had one rule carrying both, on both scopes, so the two
   blocks read as one system. Then v2.43.0 moved the app card off cream onto
   the homepage's pale blue, and a gold circle with a plum check — picked
   against cream — clashes on it. The app card's ticks now follow the
   homepage's own app-section treatment (.mj-tick: blue circle, white check),
   which is the system the card belongs to now; the benefits panel's ticks stay
   gold-on-cream, which is still right there. So: geometry here, colour in each
   scope's own block below. Don't re-merge the colour — the two surfaces are
   different colours now, and a shared value would be wrong on one of them.

   Only the circle size differs too (below): the app card's list text is 15px,
   not 16px. */
#stw-account-benefits .stw-ab__tk,
#stw-account-app .stw-aj__tk {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	display: inline-grid;
	place-items: center;
	margin-top: 2px;
}

#stw-account-benefits .stw-ab__tk svg,
#stw-account-app .stw-aj__tk svg {
	width: 12px;
	height: 12px;
}

/* Benefits panel: gold circle, plum check — the same gold/plum relationship as
   the club page's .step .n and .tier.vip .earn, on the cream this panel keeps. */
#stw-account-benefits .stw-ab__tk {
	background: var(--gold);
}

#stw-account-benefits .stw-ab__tk svg {
	color: var(--plum);
}

/* Square image canvas — the club page's .prod .ph pattern.
   background-image is set inline in markup so Phil can swap it in LiveCanvas. */
#stw-account-benefits .stw-ab__ph {
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 16px;
}

/* The standfirst is an <h2> purely for heading order (h1 -> h2 -> body); it is
   not meant to *look* like a heading. Left unstyled it picked up the global
   h2 treatment — 48px/800 with -.02em tracking — so these three inherits pull
   it back to exactly what the <p> it replaced computed to: 16px, weight 500,
   1.55 line-height, inherited from the column, plus the panel's own ink. The
   mb-4 utility still supplies the 24px it always had. */
/* Semantically an h2 (heading hierarchy), sized as the Shake Club page's
   own lead paragraph (sass/loyalty/_loyalty.scss's .lead, 19px) rather than
   as a heading. */
#stw-account-benefits .stw-ab__sub {
	font-size: 19px;
	font-weight: inherit;
	line-height: 1.6;
	letter-spacing: normal;
	color: var(--ink);
	/* v2.39.1: mb-4's 24px -> 16px. v2.38.1 only tightened this below md;
	   Phil's "close up the spacing" note covered desktop too, and with the
	   shortened standfirst (one line from 768px up) 24px left the bullets
	   floating away from the line they belong to. */
	margin-bottom: 16px !important;
}

/* v2.39.1: gap-3's 16px -> 12px. Every bullet is one line from 375px up now
   the copy is shorter, so 16px between five single lines was pure air at
   every width above md (the mobile block below already takes it to 10px). */
#stw-account-benefits ul {
	row-gap: 12px !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Condensed mobile panel (v2.38.1)
   ─────────────────────────────────────────────────────────────────────
   Below md the image column is hidden (d-none d-lg-block), so the panel is
   copy only — and at 390px that copy measured 486px tall, 58% of an 844px
   viewport, which pushed the Login form off the bottom of a real phone screen
   once browser chrome is accounted for. Every value below was measured with
   Playwright bounding boxes at 320/390 before and after; the copy itself is
   untouched (it lives in the register-benefits lc_partial, and no bullet is
   dropped).

   The four contributors, in order of how much they cost:
     ul  237.6px  five bullets, seven text lines at 1.55, 16px gaps
     sub  91.2px  three lines of 19px standfirst at 1.6
     h1   67.2px  two lines of 32px
     pad     48px p-4 top + bottom

   Bootstrap's spacing utilities (p-4, mb-3, mb-4, mb-5, gap-3) are all
   !important shorthands, so the overrides have to match that — the same
   trade-off the min-width: 992px block below already makes, and the same
   reason: solving it here keeps the change inside the repo instead of asking
   Phil to re-edit the partial's class list. */
@media (max-width: 767.98px) {
	/* Block axis only — the 24px side inset is what keeps the copy off the
	   panel edge and is left alone. */
	#stw-account-benefits {
		padding-top: 20px !important;
		padding-bottom: 20px !important;
		/* The base rule's 32px is desktop breathing room between two wide
		   panels; at this width they are stacked, so 24px is enough to
		   separate them and it lifts the Login heading up the page. (28px in
		   v2.38.1, when the base figure was mb-5's 48px.) */
		margin-bottom: 24px !important;
	}

	/* .h2 computes to 32px here, which wrapped the headline onto two lines.
	   24px puts "Creating an account pays" on ONE line from 376px up — the
	   single biggest structural saving in this block (67.2px -> 27.6px) and
	   the reason the panel reads as condensed rather than merely squeezed.
	   The size was picked off measured slack, not taste: the phrase needs
	   277px, so there is 27px spare at 390px and 12px at 376px. 26px also
	   fits at exactly 390px — by 0.1px — and was rejected for that reason;
	   any font-metric or fallback variance would flip it back to two lines on
	   the one viewport this was being tuned for. Below ~376px it wraps to two
	   lines as before, which is correct — it is a narrower column.
	   Note this lands the h1 at the same 24px as the Login/Join Now h2s. They
	   sit in separate panels with different colour, weight and the .hl
	   highlight between them, so the hierarchy still reads; the alternative
	   was a two-line headline costing 30px. */
	#stw-account-benefits h1 {
		font-size: 24px;
		line-height: 1.15;
		margin-bottom: 12px !important;
	}

	/* Phil asked for 19px to match the Shake Club page's .lead, and this keeps
	   the standfirst clearly a step above the 16px bullets — 18px at 1.45
	   rather than 1.6. Same precedent as sass/loyalty/_loyalty.scss dropping
	   its own heading sizes at its 620px breakpoint. Do not take this below
	   17px: at 16px it stops reading as a standfirst at all. */
	#stw-account-benefits .stw-ab__sub {
		font-size: 18px;
		line-height: 1.45;
		/* 14px in v2.39.1, from 18px — the base rule now sets 16px, and this
		   block must stay the tighter of the two. */
		margin-bottom: 14px !important;
	}

	/* The single biggest saving: gap-3's 16px between five bullets is 64px of
	   pure air. 10px still reads as a spaced list rather than a block of text,
	   and 1.45 leading keeps the two bullets that wrap onto a second line
	   legible. Bullet text stays 16px — it is the panel's body copy. */
	#stw-account-benefits ul {
		row-gap: 10px !important;
		line-height: 1.45;
	}

	/* 22px -> 20px. At 1.45 leading a 22px circle is taller than its own text
	   line, so the tick, not the text, would start driving the row height; a
	   20px circle sits inside the line. The 12px check is unchanged and still
	   centred by inline-grid. */
	#stw-account-benefits .stw-ab__tk {
		width: 20px;
		height: 20px;
		margin-top: 1px;
	}

	/* Tick-to-text gap: 16px -> 12px. Still clear of the circle (checked at
	   320px, where the text column is narrowest), and the 4px it returns to
	   the text column is free. */
	#stw-account-benefits ul li {
		column-gap: 12px !important;
	}
}

@media (min-width: 992px) {
	/* p-lg-5 puts 3rem above the headline and below the last bullet, which
	   read as too much air; 2rem is tighter without crowding. Only the block
	   axis is overridden — the 3rem side inset stays. !important is
	   unavoidable: Bootstrap's p-lg-5 is an !important `padding` shorthand.
	   (Below lg, p-4's 1.5rem is untouched — the image column, and therefore
	   the dead space, doesn't exist there.) */
	#stw-account-benefits {
		/* 1.5rem in v2.39.1, from 2rem (which was itself down from p-lg-5's
		   3rem in v2.37.1). Phil's "close up the spacing" pass. */
		padding-top: 1.5rem !important;
		padding-bottom: 1.5rem !important;
	}

	/* The square image column was ~490px tall against ~300px of copy, so the
	   row's height came from the image and align-items-center left a band of
	   empty cream above and below the text. align-self on the column beats the
	   row's .align-items-center without !important (the utility sets
	   align-items on the parent, not align-self on the child), and the canvas
	   then takes its height from the copy instead of dictating it.
	   min-height stops a short copy block from crushing the photo into a
	   letterbox strip — 360px keeps the crop close enough to the original
	   square that the model and the bags both stay in frame. */
	#stw-account-benefits .row > .col-lg-5 {
		align-self: stretch;
	}

	#stw-account-benefits .stw-ab__ph {
		aspect-ratio: auto;
		height: 100%;
		/* 320px in v2.39.1, from 360px. This figure, not the copy, is what
		   sets the panel's height at >=992px — the copy column measures
		   ~285px — so the desktop panel could not get tighter without it
		   coming down too. 320px against a ~493px column is 1.54:1, still a
		   landscape crop rather than a letterbox strip; checked against a
		   rendered crop, not arithmetic. */
		min-height: 320px;
		/* Not `center`: at ~493x360 the square source overflows vertically by
		   ~27%, and a centred crop lands the top edge across the model's eyes.
		   25% keeps her face and the bag handles in frame and only trims the
		   top of her hair and the bottom of the bags — checked against rendered
		   crops at 50% / 25% / top / a taller box, not picked by arithmetic. */
		background-position: center 25%;
	}
}

/* ─────────────────────────────────────────────────────────────────────
   Logged-out — "account-app-join" partial, inside the Join Now column
   ───────────────────────────────────────────────────────────────────── */

#stw-account-app {
	/* Redeclared for the same reason as the two wrappers above: this block is
	   an lc_partial and its wrapper isn't guaranteed to sit inside
	   #stw-account forever. */
	--plum: #3A2740;
	--ink: #2A2230;
	--muted: #7A7280;
	--line: #E8E2D6;

	/* The homepage's own MyJurnee app-section palette, copied verbatim from
	   .appdl in sass/homepage/_sections-2.scss so the card and that section
	   read as the same thing. --mj-lavender is a pale *blue* despite the name;
	   the name is the homepage's and is kept as-is rather than "corrected",
	   so the two files still grep as a pair. --gold and --cream are gone from
	   this scope in v2.43.0 — nothing in it uses them any more. */
	--mj-lavender: #DFF4FD;
	--mj-lavender-deep: #C8E9F7;
	--mj-magenta: #2FA8D6;

	/* 18px, down from 22px in v2.39.1 (spacing pass). */
	margin: 0 0 18px;
}

/* The promoted route: a tinted card inside the white panel, so it reads as the
   first thing offered rather than as a footnote to the form.

   v2.43.0 moved it from --cream + a gold hairline to the homepage app
   section's own --mj-lavender, per Phil: the same block of content is sold in
   two places on this site and it was two different colours. The hairline is
   --mj-lavender-deep (the homepage's own next step down) rather than
   --mj-magenta: the border's job here is to hold the card's edge against
   white, which is what the gold was doing against cream — not to add a second
   accent. No shadow, as before.

   The card is a 2-column grid in v2.43.0 so the MyJurnee wordmark can sit in
   the top-right corner with the heading beside it and the ticks and badges
   full width beneath — see .stw-aj__logo below for why grid rather than a
   float or absolute positioning. Row heights come from the children's own
   margins, as they did when the card was a block, so nothing in the v2.39.1
   spacing pass moves. */
#stw-account-app .stw-aj__card {
	background: var(--mj-lavender);
	border: 1px solid var(--mj-lavender-deep);
	border-radius: 14px;
	/* 18px, down from 20px in v2.39.1 (spacing pass). */
	padding: 18px;

	display: grid;
	/* minmax(0, 1fr) rather than 1fr: a bare 1fr floors at min-content, which
	   is the longest word in the heading, so a narrow card would push the logo
	   column out instead of wrapping the heading. */
	grid-template-columns: minmax(0, 1fr) clamp(104px, 30%, 150px);
	grid-template-areas:
		"head logo"
		"list list"
		"stores stores";
	column-gap: 14px;
	align-items: start;
}

/* The MyJurnee wordmark is the black-on-transparent asset from the media
   library (uploads/2026/03), not the theme's images/homepage/ copy — that file
   does not exist in this repo, which is why the homepage <img> that points at
   it carries an onerror hide.

   v2.43.0: top right of the card and much bigger, per Phil. Until then it was
   22px tall at the top left, on its own row above the heading, which at that
   size read as a caption rather than as a brand mark.

   **Grid placement, not a float and not absolute positioning**, and the reason
   is collision: the wordmark and the heading have to share the card's top row
   at every width from 320px up, and only grid makes that structurally
   impossible to get wrong. A float would have the .stw-aj__list — a flex
   container, so a block formatting context — placed *beside* it rather than
   flowing under it, narrowing the tick rows at some widths. Absolute
   positioning takes the logo out of flow, so the heading needs a hand-tuned
   padding-right reserve per breakpoint and the row can still collide the
   moment the copy changes. Here the two are simply in one row of two tracks,
   and the worst case is a wrapped heading, never an overlap. Verified by
   measuring both boxes at 320/360/390/576/768/992/1200/1440.

   Sized by the track, not by the image: the logo column is
   clamp(104px, 30%, 150px) (see the card above), and `width: 100%` fills it.
   That is 150px / 46px tall at 1440 and 104px / 32px tall at 390 — against the
   old 22px everywhere. The 150px ceiling is deliberate: the homepage's own
   .appdl-logo-top is 260px, but that sits in a 480px-tall full-bleed section,
   and this card is 250-odd px tall in a half-width column. The 104px floor is
   what keeps "Do it all in the app" on one line down to 360px. The intrinsic
   400x122 aspect ratio does the rest, so `height: auto` and no crop. */
#stw-account-app .stw-aj__logo {
	grid-area: logo;
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

/* Section heading — level 4 of the TYPE SCALE. 18px/700 in v2.41.0, from
   19px/800: 800 was the page's fourth weight, and at 19px this sat level with
   the benefits panel's 19px standfirst. */
#stw-account-app .stw-aj__h {
	grid-area: head;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--plum);
	/* The one value this pass moved *up* (6px -> 10px): the tick circles that
	   replaced the paragraph in v2.39.1 sit further left and read as a block,
	   and at 6px the heading looked like the list's first row. Still tighter
	   than the 14px above it. */
	margin: 0 0 10px;
}

/* Three feature ticks, v2.39.1 — replaces the single .stw-aj__p sentence, so
   what you get in the app is scannable rather than read. Custom CSS rather
   than the benefits panel's Bootstrap `d-flex ... gap-3` utilities because
   this partial carries no utilities at all and the utilities are !important
   shorthands that would then need overriding for the tighter gaps below. */
#stw-account-app .stw-aj__list {
	grid-area: list;
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	row-gap: 8px;
}

#stw-account-app .stw-aj__list li {
	display: flex;
	align-items: flex-start;
	column-gap: 10px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--ink);
}

/* 20px, not the shared 22px: at 15px/1.45 the text line is 21.75px, so a 22px
   circle would be taller than its own line and the tick, not the text, would
   drive the row height — the same reasoning as the benefits panel's mobile
   block. The 12px check inside is unchanged.

   Colour is the homepage app section's .mj-tick way — --mj-magenta circle
   (another blue behind a magenta name; the homepage's own naming) with a white
   check — not the benefits panel's gold-and-plum, which was chosen against
   cream and clashes on --mj-lavender. This is the divergence the shared shape
   rule above documents. */
#stw-account-app .stw-aj__tk {
	width: 20px;
	height: 20px;
	margin-top: 1px;
	background: var(--mj-magenta);
}

#stw-account-app .stw-aj__tk svg {
	color: #fff;
}

/* Same markup and treatment as the homepage's app-download badges
   (.app-store + .as-text > small/b, sass/homepage/_sections-2.scss) rather
   than a third badge style — but the rules have to be repeated here, not
   inherited: _sections-2.scss is compiled inside a .stw-homepage scope, so
   bundle.css only ever ships `.stw-homepage .app-store`. Values are copied
   from that file verbatim; keep the two in step if either changes. */
#stw-account-app .stw-aj__stores {
	grid-area: stores;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

#stw-account-app .app-store {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	/* Black, as the real store badges are — the one place on this page that
	   isn't club palette, and deliberately so: it's what makes the pair read
	   instantly as "download the app" rather than as two more buttons. */
	background: #000;
	color: #fff;
	padding: 10px 16px;
	border-radius: 10px;
	text-decoration: none;
	line-height: 1;
	transition: transform 100ms;
	/* The Join Now column is about half a container wide, so the pair wraps at
	   some widths; growing keeps a wrapped badge full-width rather than
	   leaving a ragged short pill on its own row. */
	flex: 1 1 auto;
}

#stw-account-app .app-store:hover {
	transform: translateY(-2px);
	color: #fff;
}

#stw-account-app .app-store svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

#stw-account-app .app-store .as-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.1;
	white-space: nowrap;
}

#stw-account-app .app-store .as-text small {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .04em;
	opacity: .85;
}

#stw-account-app .app-store .as-text b {
	font-size: 14px;
	font-weight: 700;
}

/* "Or sign up with email" — a rule with the label knocked out of it, so the
   email form below reads as a real second route rather than an afterthought.
   Lives in the partial's markup, so an unpublished slug takes the divider with
   it.

   Type is level 5 of the TYPE SCALE — the same 15px/700 as the field labels
   beside it, in muted rather than ink because it's a wayfinder, not a label
   for a control. Until v2.41.0 it was 13px/700 uppercase with .04em tracking:
   Phil's note was "too many different fonts going on. Can you change the CAPS
   headers to match bold titlecase" — letterspaced caps in a panel where
   nothing else is capsed or tracked reads as a different typeface. The
   capitalisation is in the partial's markup, not faked with text-transform, so
   the copy is the copy. Keep in step with #stw-account-magic .stw-ml__or. */
#stw-account-app .stw-aj__or {
	display: flex;
	align-items: center;
	gap: 12px;
	/* 18px, down from 22px in v2.39.1 (spacing pass). */
	margin-top: 18px;
	font-size: 15px;
	font-weight: 700;
	/* --ink in v2.43.0, from --muted. Phil asked for the Login column's
	   divider in black; these two were deliberately matched in v2.41.0 and
	   leaving one grey would put back exactly the inconsistency that pass
	   removed, so both moved. --ink (#2A2230), the page's own darkest text
	   token, rather than a literal #000 — it keeps the palette closed. */
	color: var(--ink);
}

#stw-account-app .stw-aj__or::before,
#stw-account-app .stw-aj__or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--line);
}

@media (max-width: 575.98px) {
	#stw-account-app .stw-aj__card {
		padding: 16px;
	}

	/* One badge per row below sm: two ~170px pills side by side inside a
	   22px-padded panel on a 390px viewport leaves them cramped. */
	#stw-account-app .app-store {
		flex: 1 1 100%;
	}
}

/* ─────────────────────────────────────────────────────────────────────
   Logged-out — magic link ("email me a login link") in the Login column
   ─────────────────────────────────────────────────────────────────────
   Markup: #stw-account-magic (this theme's own wrapper + divider, printed on
   the `stw2026_after_login_form` action from includes/woocommerce-myaccount.php)
   wrapping Magic Login's [magic_login_form] shortcode output, which is the
   plugin's own #magic-login-shortcode > .magic-login-form-header +
   form#magicloginform.

   The plugin ships its own stylesheet for that markup (magic-login/dist/css/
   shortcode-style.css, enqueued by the shortcode itself). It is written for a
   standalone page, not a panel, and everything below is a deliberate,
   read-first override of specific declarations in it — never a blanket reset.

   Read the plugin's file before adding to this block. In particular
   #magic-login-shortcode is `display: flex; flex-wrap: wrap`, and its two
   children rely on that (the header on row 1, the 100%-wide form wrapping to
   row 2). **Do not override its `display`** — that is exactly the mistake that
   broke a third-party plugin's flex layout in v2.29.2. Only its fixed
   `width: 320px` is replaced here; the plugin's own Pro WooCommerce
   integration does the same thing via its unused
   `#magic-login-woo-wrapper > #magic-login-shortcode { width: 100% }` rule.

   Every selector is prefixed with #stw-account-magic, so it is two IDs against
   the plugin's one and no !important is needed anywhere in this block — and
   the plugin's own form on wp-login.php is untouched.
   ───────────────────────────────────────────────────────────────────── */

#stw-account-magic {
	/* Redeclared for the same reason as the wrappers above — this block sits
	   inside WooCommerce's markup, not inside a partial we control. */
	--plum: #3A2740;
	--gold: #E7C778;
	--gold-deep: #C9A24B;
	--cream: #F6EAD2;
	--ink: #2A2230;
	--muted: #7A7280;
	--line: #E8E2D6;

	/* Clear of the "Lost your password?" line that ends the password form.
	   18px, down from 22px in v2.39.1 (spacing pass). */
	margin-top: 18px;
}

/* "Or get a login link by email" — the same rule-with-the-label-knocked-out
   divider as the Join Now column's "Or sign up with email", so the two panels
   announce their alternative route identically. Repeated rather than shared:
   that one is scoped to #stw-account-app, which is a different partial's
   wrapper and not guaranteed to exist. **Keep the two in step** — v2.41.0
   de-capsed and re-sized both together (15px/700 muted, no tracking, no
   text-transform; see the note on .stw-aj__or for why). The string itself is
   sentence case in includes/woocommerce-myaccount.php, not uppercased here. */
#stw-account-magic .stw-ml__or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	font-size: 15px;
	font-weight: 700;
	/* --ink in v2.43.0, from --muted — Phil's ask was this divider "in black
	   text". See the note on .stw-aj__or, which moved with it. */
	color: var(--ink);
}

#stw-account-magic .stw-ml__or::before,
#stw-account-magic .stw-ml__or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--line);
}

/* The plugin's fixed 320px is a standalone-page width; in a half-container
   panel it left the field and button short of the password form above them.
   display/flex-wrap are the plugin's and are left alone. */
#stw-account-magic #magic-login-shortcode {
	width: 100%;
}

/* The plugin sets no width on the header, so as a flex item it sized to its
   content. Pinning it to 100% keeps the header on its own row above the form
   whatever the message length. */
#stw-account-magic #magic-login-shortcode .magic-login-form-header {
	width: 100%;
}

/* process_login_request() *always* emits an info paragraph — there is no
   attribute that suppresses it (an empty info_message falls through to the
   plugin's default), so this block passes its own sentence in and styles it as
   the block's explanatory line rather than as the wp-admin-style white notice
   with a blue left border that the plugin's stylesheet gives it. The success
   and error states keep a real notice treatment below. */
#stw-account-magic #magic-login-shortcode .message {
	background: none;
	border: 0;
	padding: 0;
	margin: 0 0 16px;
	/* Level 6, small/secondary — 13px in v2.41.0, from 15px. Same treatment as
	   "Remember me" / "Lost your password?" / the privacy note. At 15px this
	   two-line explanation was the largest run of text in the lower half of the
	   Login panel, above the label of the field it explains. */
	font-size: 13px;
	line-height: 1.5;
	color: var(--muted);
}

/* Success ("check your inbox") and error ("no account with that address") do
   need to read as notices — the form is hidden underneath the success one, so
   it is the only thing left in the panel. Cream + gold hairline for success is
   the same pairing as the Join Now app card; the error keeps a red hairline
   because nothing else on this page carries an error state. Both selectors
   cover the non-AJAX render and the AJAX replacement, which use the same
   classes (dist/js/frontend.js swaps .magic-login-form-header's HTML). */
#stw-account-magic #magic-login-shortcode .message.magic_login_block_login_success,
#stw-account-magic #magic-login-shortcode .success {
	background: var(--cream);
	border: 1px solid var(--gold);
	border-radius: 10px;
	padding: 14px 16px;
	font-size: 15px;
	font-weight: 700;
	color: var(--plum);
}

#stw-account-magic #magic-login-shortcode #login_error {
	background: #FDF2F2;
	border: 1px solid #E4A0A0;
	border-left-width: 1px;
	border-radius: 10px;
	margin: 0 0 16px;
	padding: 14px 16px;
	font-size: 15px;
	color: #8A2B2B;
}

/* Match the password form's own field above it. The plugin's input carries
   `.input`, not WooCommerce's `.input-text`, so the theme's existing
   #stw-account input.input-text rule never reached it — hence the repetition.
   16px keeps iOS from zooming the viewport on focus, as it does there. */
#stw-account-magic #magic-login-shortcode .input {
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
}

#stw-account-magic #magic-login-shortcode .input:focus {
	outline: none;
	border-color: var(--gold-deep);
	box-shadow: 0 0 0 3px rgba(201, 162, 75, .2);
}

/* Secondary by design. The shortcode's submit carries `.button`, so it arrived
   in the site's primary pink — identical to the "Log in" button 20px above it,
   which made the panel read as two equal-weight primary actions. A plum
   outline keeps it obviously clickable and obviously the alternative, and uses
   the palette this page already has. Same logic as the Join Now column, where
   the promoted route is visually distinct from the pink Register button. */
#stw-account-magic #magic-login-shortcode .magic-login-submit {
	width: 100%;
	padding: 11px 16px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--plum);
	background: #fff;
	border: 2px solid var(--plum);
	border-radius: 6px;
	transition: background-color 120ms, color 120ms;
}

#stw-account-magic #magic-login-shortcode .magic-login-submit:hover,
#stw-account-magic #magic-login-shortcode .magic-login-submit:focus {
	color: #fff;
	background: var(--plum);
	border-color: var(--plum);
}

/* jQuery disables the button while the AJAX request is in flight
   (dist/js/frontend.js sets the `disabled` attribute) — without this the
   outline button looks unchanged and the click seems to have done nothing. */
#stw-account-magic #magic-login-shortcode .magic-login-submit[disabled] {
	opacity: .55;
	cursor: default;
}

/* The AJAX spinner row the plugin injects into the header. Its image is
   /wp-admin/images/spinner.gif; only the text needs bringing into the panel. */
#stw-account-magic .magic-login-spinner-container {
	padding: 0;
	margin: 0 0 16px;
	/* 13px, matching the .message line it sits next to (v2.41.0). */
	font-size: 13px;
	color: var(--muted);
}