/* ============================================================
   GRAINATION — ACCOUNT SURFACE  (WooCommerce My Account · page 109136)
   WordPress/WooCommerce-DOM adaptation layer for the Full Frame v4
   auth + account design. Loaded ONLY on is_account_page() by gn2-account.php.

   The base look (.auth-* / .acct-* / .field / .co-form / .wc-notice) lives in
   util.css (global, verbatim design ui_kit). This file carries ONLY the things a
   verbatim design file must NOT contain — the WordPress/kit reconciliations:

     (1) kit-2537 form-control guard for the auth inputs (per WO-006 "RULE FOR NEW WORK");
     (2) the WO-008 §A live text wordmark (.brand-mk);
     (3) logged-out full-screen split: hide the util-head hero + static .my-extras;
     (4) full-bleed the shortcode container so .auth spans edge-to-edge.

   PHASE 1 = logged-out auth only. Logged-in dashboard skin (.acct-*) is Phase 2.
   ============================================================ */

/* -------------------------------------------------------------------
   (1) KIT FORM-CONTROL GUARD  — auth text inputs.
   Kit 2537 sets input -> Inter 16 / beige at (0,1,1); util.css '.field input'
   uses font-family:inherit at (0,1,1) which only TIES, and inheritance cannot beat
   an explicit Inter (WO-006 note B). So DECLARE the font explicitly and add the
   subject boost ':is(main[data-nav] *,.woocommerce-page *)' — the exact pattern
   WO-006 relocated into gn2-base.css for .fp-size/.est-qty. The account page carries
   BOTH main[data-nav="shop"] and body.woocommerce-page, so either arm matches.
   Scoped to '.auth .field' so the 'Remember me' checkbox is untouched.
   ------------------------------------------------------------------- */
:is(.auth, .acct-main) .field :is(input, select, textarea):is(main[data-nav] *, .woocommerce-page *) {
	font-family: var(--sans) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: var(--ink) !important;
	background: var(--paper) !important;
	border: 1.5px solid var(--line) !important;
	border-radius: 0 !important;
	padding: 12px 14px !important;
	width: 100% !important;
	box-shadow: none !important;
}
:is(.auth, .acct-main) .field :is(input, select, textarea):focus:is(main[data-nav] *, .woocommerce-page *) {
	border-color: var(--cobalt) !important;
	outline: none !important;
	box-shadow: none !important;
}
/* 'Remember me' checkbox: keep it a small native control, not a full-width text field. */
.auth .auth-check input[type="checkbox"]:is(main[data-nav] *, .woocommerce-page *) {
	width: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	border-width: 1px !important;
	background: initial !important;
	accent-color: var(--cobalt);
}

/* -------------------------------------------------------------------
   (2) BRAND MARK — live grotesk wordmark (WO-008 §A; no raster FOUC).
   util.css '.auth-form .brand-mk{height:22px}' targets the old <img>; our override
   uses a text <a>, so beat that (0,2,0) rule with (0,2,1) and restore the design's
   inline treatment from Login.html verbatim.
   ------------------------------------------------------------------- */
.auth-form a.brand-mk {
	align-self: flex-start;
	height: auto;
	width: auto;
	display: inline-block;
	font-family: var(--grot);
	font-weight: 800;
	font-size: 22px;
	line-height: 1;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--ink) !important;
	text-decoration: none;
	margin-bottom: clamp(24px, 3vw, 40px);
}
.auth-form a.brand-mk:hover {
	color: var(--ink) !important;
}

/* -------------------------------------------------------------------
   (3) LOGGED-OUT = the Login.html full-screen split.
   Hide the page's util-head "MY ACCOUNT" hero and the static .my-extras preview so
   the split owns the viewport, exactly as designed. Body class 'gn-acct-out' is added
   by gn2-account.php only when !is_user_logged_in(). (.my-extras is formally retired
   in Phase 2; hiding it here removes its only appearance state.)
   ------------------------------------------------------------------- */
/* util-head hero: hidden ONLY logged-out (Login.html has no hero); shown logged-in
   (My Account.html keeps it). */
body.gn-acct-out .util-head {
	display: none !important;
}
/* Static .my-extras preview widget (4ffd288): HARD-DELETED from Elementor 2026-07-23 (Neil's call;
   backup: backups/109136-elementor-data-2026-07-23-pre-myextras-delete.json). The real dashboard
   (dashboard.php) renders these cards, so the widget only duplicated them. No CSS hide is needed now
   — the element no longer exists, and the .my-extras rules that lived in the hero widget's inline
   <style> went away with the §7 slim-down. */

/* -------------------------------------------------------------------
   (4) FULL-BLEED so .auth spans edge-to-edge (Login.html is full-viewport).
   .auth sits inside the account container's padding + the .my-woo grid (109136
   page custom_css). Rather than chase every ancestor's padding, break .auth out
   to the viewport with the standard full-bleed transform — robust against whatever
   boxed width/padding the Elementor containers apply. body{overflow-x:hidden}
   (gn2-base) clips the scrollbar sliver. Also cap height to the space under the
   fixed header so the 100vh section doesn't force a redundant scroll.
   ------------------------------------------------------------------- */
body.gn-acct-out .auth {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	min-height: calc(100vh - var(--headh, 0px)) !important;
	/* even split comes from util.css `.auth{grid-template-columns:1fr 1fr}` — the ecom.css orphan
	   that set 1.05/0.95 was deleted in WO-011 §C-7, so the re-assert !important is no longer needed. */
}

/* -------------------------------------------------------------------
   (5) Drop the WO-004-era bordered-card treatment of the raw Woo login/register
   forms (109136 page custom_css: main.acct .my-woo form.woocommerce-form-login
   { border 1.5px / background paper / padding 22px }). Superseded by the .auth
   theming — the forms sit bare in the auth column like the design. Our (0,4,2)
   selectors beat that rule's (0,3,2); the page custom_css is reconciled in Phase 2.
   ------------------------------------------------------------------- */
main.acct .my-woo form.woocommerce-form-login.co-form,
main.acct .my-woo form.woocommerce-form-register.co-form,
main.acct .my-woo form.woocommerce-ResetPassword.co-form {
	border: 0 !important;
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

/* -------------------------------------------------------------------
   (6) RESOLVED (WO-011 §C-7, 2026-07-24). The orphan `.auth-*` block in ecom.css (an older auth
   design on a defunct token namespace — --g-acid / --g-dark …, none defined) has been DELETED.
   With it gone, util.css is the sole author of the split-screen: `.auth-visual .vk{color:var(--acid)}`
   already gives the acid eyebrow and `.auth{grid-template-columns:1fr 1fr}` the even split, so the
   neutralization rules that used to live here (a `.vcap .vk` colour pin + the §4 grid !important) are
   removed as redundant. Proven equivalent by A/B: 109136 logged-out now renders byte-for-byte like
   the verified Login page 109127 (both util.css-driven; ecom.css only added a 1.0 `::after` texture,
   a transparent-bg quirk, and a 1.05/0.95 grid). Baseline for 109136 re-captured to this state.
   ------------------------------------------------------------------- */

/* ===================================================================
   PHASE 2 — logged-in dashboard (.acct-*). Base .acct-grid/.acct-nav/.acct-main/
   .acct-cards/.acct-orders/.acct-reminders styles live in util.css; these are the
   few WP additions. The 2-col grid is provided by 109136's .my-woo page custom_css
   (nav col 1 / content col 2 via display:contents flatten) — reused, not replaced.
   =================================================================== */
/* section rhythm (design used inline margin-top:clamp(40px,5vw,64px)) */
.acct-main .acct-section { margin-top: clamp(40px, 5vw, 64px); }
/* empty-orders state */
.acct-order.acct-order--empty { grid-template-columns: 1fr auto; }
.acct-order.acct-order--empty .badge { align-self: center; text-decoration: none; }
/* the util-head account hero shows logged-IN (design keeps it); it is only hidden logged-out (§3). */

/* ===================================================================
   PHASE 3 — account endpoints (orders / account details / addresses).
   Base .acct-* / .co-form / .field styling is in util.css; these are the
   endpoint-specific additions. The form-control kit guard was extended to
   .acct-main above (§1). Woo's OWN default form inputs (e.g. the edit-address
   form) are skinned by snippet 109162 (.woocommerce input[type=text]) — left there.
   =================================================================== */

/* edit-account: hints + password fieldset */
:is(.auth, .acct-main) .field-hint { font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--mut); }
.acct-main .field label .field-hint { margin-left: 6px; }
.acct-main .acct-fieldset { border: 0; padding: 0; margin: 4px 0 0; min-width: 0; }
.acct-main .acct-fieldset legend { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); padding: 0; margin: 8px 0 2px; }
.acct-main .edit-account.co-form { max-width: 620px; }

/* orders list — full row: order / date / total(+items) / [badge + actions] */
.acct-order.acct-order--full { grid-template-columns: 1.1fr 1fr 1.2fr auto; }
.acct-order .acct-order-end { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.acct-order .acct-order-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.acct-order .acct-order-actions .qc-lite { height: auto; padding: 0; font-size: 11px; }
.acct-order .v .o { display: inline; font-weight: 400; color: var(--mut); font-size: 12px; }
.acct-pagination { display: flex; justify-content: space-between; gap: 16px; margin-top: 20px; }
.acct-pagination .qc-lite { height: auto; padding: 0; }
@media (max-width: 560px) {
	.acct-order.acct-order--full { grid-template-columns: 1fr 1fr; }
	.acct-order .acct-order-end { grid-column: 1 / -1; align-items: flex-start; margin-top: 8px; }
	.acct-order .acct-order-actions { justify-content: flex-start; }
}

/* addresses */
.acct-main .acct-lead { color: #4a4a46; font-size: 15px; margin: 0 0 20px; max-width: 60ch; }
.acct-addresses { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.acct-address address { font-style: normal; font-size: 14px; line-height: 1.6; color: #33322f; margin: 4px 0 12px; flex: 1; }

/* .acct-card hover underline on .go (verbatim from My Account.html inline style) */
.acct-card .go { position: relative; display: inline-block; width: fit-content; padding-bottom: 3px; }
.acct-card .go::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--cobalt); transform: scaleX(0); transform-origin: left; transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); }
.acct-card:hover .go::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .acct-card .go::after { transition: none; } }

/* ===================================================================
   (7) RELOCATED from the hero widget 5e3c10c inline <style> (2026-07-23).
   That block was the WO-004 mapping of DEFAULT WooCommerce output onto the
   acct-* design. The WO-009 template overrides now emit the designed markup
   directly, so most of it became redundant or dead and was stripped:
     · redundant — .util-head/.util-body/.sec-h/.acct-cards/.acct-card/
       .acct-reminders/.acct-card .go sweep  → already in util.css / §Phase-3 here
     · dead — nav <ul><li> counter mapping, table.shop_table, a.button,
       .woocommerce-Addresses, #customer_login, form-login max-width:460px,
       .woocommerce>h2, fieldset/legend, .my-extras (widget hard-deleted)
   What remains load-bearing is kept here, in the foundation, where account CSS
   belongs. All of it is !important / high-specificity, so moving it out of the
   inline (late) position does not change the cascade result.
   =================================================================== */

/* content frame */
.my-woo { width: 100%; max-width: var(--maxw, 1560px); margin-inline: auto; padding: clamp(30px, 5vw, 64px) var(--mx, clamp(20px, 5vw, 80px)) clamp(48px, 7vw, 96px); }

/* 2-column account grid (nav | content) — only when the account nav exists (logged-in).
   Logged-out is a single block (the .auth split-screen full-bleeds itself, §4). */
main.acct .my-woo .woocommerce { display: block; }
main.acct .my-woo .woocommerce:has(nav.woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
@media (max-width: 860px) { main.acct .my-woo .woocommerce:has(nav.woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; } }

/* LOAD-BEARING: woocommerce-layout.css floats the account nav left/30% and content
   right/68% — reset so the grid above controls the layout. Do not remove. */
main.acct .my-woo nav.woocommerce-MyAccount-navigation { float: none !important; width: auto !important; }
main.acct .my-woo .woocommerce-MyAccount-content { min-width: 0; float: none !important; width: auto !important; }

/* Mobile account navigation. A native checkbox/label pair keeps the control
   operational without JavaScript and resets it closed after navigation/reload. */
main.acct .acct-nav-state {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
main.acct .acct-nav-toggle {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 13px 18px;
	color: var(--ink);
	background: var(--paper);
	border: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
main.acct .acct-nav-toggle-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
main.acct .acct-nav-toggle .hi { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
main.acct .acct-nav-toggle .nm { overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
main.acct .acct-nav-toggle-icon { width: 9px; height: 9px; flex: 0 0 auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease; }
main.acct .acct-nav-state:checked + .acct-nav-toggle .acct-nav-toggle-icon { transform: rotate(225deg) translate(-2px, -2px); }
main.acct .acct-nav-toggle:focus-visible { outline: 2px solid var(--cobalt); outline-offset: -2px; }
main.acct .acct-nav-state:focus-visible + .acct-nav-toggle { outline: 2px solid var(--cobalt); outline-offset: -2px; }

@media (max-width: 860px) {
	main.acct .my-woo nav.woocommerce-MyAccount-navigation { position: relative; top: auto; }
	main.acct .acct-nav-toggle { display: flex; }
	main.acct .acct-nav-state:not(:checked) ~ .acct-nav-links { display: none !important; }
	main.acct .acct-nav-state:checked ~ .acct-nav-links { display: block; border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
	main.acct .acct-nav-toggle-icon { transition: none; }
}

/* Woo notices inside the grid */
main.acct .my-woo .woocommerce-notices-wrapper { grid-column: 1 / -1; min-width: 0; }
main.acct .my-woo .woocommerce-notices-wrapper:empty { display: none; }
main.acct .my-woo .woocommerce-message,
main.acct .my-woo .woocommerce-info,
main.acct .my-woo ul.woocommerce-error { border: 1px solid var(--line) !important; border-left: 3px solid var(--cobalt) !important; background: var(--paper) !important; padding: 14px 16px !important; font-family: var(--mono) !important; font-size: 11.5px !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: var(--ink) !important; margin: 0 0 18px !important; list-style: none !important; }
main.acct .my-woo ul.woocommerce-error { border-left-color: #EA3A17 !important; }
main.acct .my-woo .woocommerce-info::before,
main.acct .my-woo .woocommerce-message::before,
main.acct .my-woo .woocommerce-error::before { display: none !important; }

/* .form-row skin — still used by form-edit-address.php, which keeps Woo's dynamic
   woocommerce_form_field() markup (per-country fields). The re-templated forms use
   .field/.co-form instead and are covered by §1. */
main.acct .my-woo .form-row { margin: 0 0 14px !important; padding: 0 !important; float: none !important; width: 100% !important; }
main.acct .my-woo .form-row label { font-family: var(--mono) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--mut) !important; margin: 0 0 6px !important; display: block; }
main.acct .my-woo .form-row label .required { color: #EA3A17 !important; text-decoration: none !important; }
main.acct .my-woo .form-row .woocommerce-input-wrapper { width: 100%; }
main.acct .my-woo .form-row input.input-text,
main.acct .my-woo .form-row input[type="email"],
main.acct .my-woo .form-row input[type="password"],
main.acct .my-woo .form-row input[type="text"],
main.acct .my-woo .form-row input[type="tel"],
main.acct .my-woo .form-row select,
main.acct .my-woo .form-row textarea { border: 1.5px solid var(--line) !important; border-radius: 0 !important; background: var(--paper) !important; padding: 12px 14px !important; font-family: var(--sans) !important; font-size: 15px !important; width: 100% !important; box-shadow: none !important; color: var(--ink) !important; }
main.acct .my-woo .form-row input:focus,
main.acct .my-woo .form-row textarea:focus { outline: none !important; border-color: var(--cobalt) !important; }
main.acct .my-woo .form-row.form-row-first,
main.acct .my-woo .form-row.form-row-last { width: calc(50% - 7px) !important; display: inline-block !important; vertical-align: top; }
main.acct .my-woo .form-row.form-row-first { margin-right: 10px !important; }
main.acct .my-woo .select2-container .select2-selection--single { height: auto !important; border: 1.5px solid var(--line) !important; border-radius: 0 !important; background: var(--paper) !important; padding: 12px 44px 12px 14px !important; }
main.acct .my-woo .select2-container .select2-selection__rendered { line-height: 1.4 !important; padding: 0 !important; font-size: 15px; }
main.acct .my-woo .select2-container .select2-selection__arrow { height: 100% !important; top: 0 !important; right: 12px !important; }
main.acct .my-woo input[type="checkbox"] { accent-color: var(--cobalt); }

/* ===================================================================
   (8) LINK-COLOUR CASCADE GUARD for the account components.
   .acct-card and .acct-nav items are <a> elements, so the site's cobalt link
   colour cascades into their headings/labels — and the foundation's
   `main[data-nav] :is(h1..h6){color:inherit!important}` makes h3 follow the <a>.
   The design (util.css) wants INK, with cobalt reserved for the .ic eyebrow, the
   ACTIVE nav item, and .go on hover.
   Restores what the WO-004 `…MyAccount-content h2,h3{color:var(--ink)!important}`
   rule did before the hero inline <style> was slimmed away (§7), and additionally
   corrects the pre-existing all-cobalt nav (util.css .acct-nav a is ink by design).
   =================================================================== */
main.acct .acct-card { color: var(--ink); }
main.acct .acct-card h3 { color: var(--ink) !important; }
main.acct .acct-nav a { color: var(--ink); }
main.acct .acct-nav a.on { color: var(--cobalt); }
main.acct .acct-nav a.out { color: var(--mut); }

/* ===================================================================
   (9) VIEW ORDER + reset-password — built to the new designs
   "My Account - View Order.html" (2026-07-23). The .conf-card / .conf-meta /
   .conf-items / .sline / .tot system it uses already lives in util.css; these
   are just the account-context additions.
   =================================================================== */
/* order-item thumbnails inside the .conf-card */
.acct-main .conf-items .it .im { overflow: hidden; }
.acct-main .conf-items .it .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* trailing note ("Download links appear here once your scans are ready.") */
.acct-main .acct-note { margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mut); }
/* order updates (customer notes) */
.acct-main .acct-updates { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1.5px solid var(--ink); }
.acct-main .acct-update { padding: 14px 0; border-bottom: 1.5px solid var(--line); }
.acct-main .acct-update .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); display: block; margin-bottom: 4px; }
.acct-main .acct-update-body p { margin: 0; font-size: 14px; line-height: 1.6; color: #33322f; }

/* -------------------------------------------------------------------
   (10) LINK-FLAVOURED BUTTONS. .qc / .qc-lite are used on <a> as well as <button>.
   On an <a> the site's cobalt link colour (109162 sets it !important) beats
   gn2-base's non-important `.qc.accent{color:#fff}` — which painted the
   "Order again" button cobalt-on-cobalt (invisible label), and rendered every
   .qc-lite cobalt where the design wants ink with cobalt on hover.
   <button>.qc is unaffected; this only pins the link flavour.
   ------------------------------------------------------------------- */
main.acct a.qc { color: var(--ink) !important; }
main.acct a.qc.accent,
main.acct a.qc.accent .lbl,
main.acct a.qc.accent .arw { color: #fff !important; }
main.acct a.qc.on-void,
main.acct a.qc.on-void .lbl,
main.acct a.qc.on-void .arw { color: #fff !important; }
main.acct a.qc-lite { color: var(--ink) !important; }
main.acct a.qc-lite:hover,
main.acct a.qc-lite:focus-visible { color: var(--cobalt) !important; }

/* -------------------------------------------------------------------
   (11) ACID CARD on account pages — WO-011 §C-3 (Bookings endpoint).

   §10 above pins `main.acct a.qc.accent{color:#fff !important}` so snippet
   109162's `.woocommerce a:not(.button){color:var(--gn-cobalt)}` cannot eat the
   "Order again" label. That !important also flattens gn2-base.css's
   `.acid-card .qc.accent{color:var(--acid)}` — which carries no !important — so
   an acid card's CTA would render WHITE on ink instead of acid on ink. An inline
   style on the <a> cannot rescue it either, because §10 pins .lbl and .arw
   separately and those children are what actually paint the label.

   So the acid-card variant is re-asserted here, one class deeper than §10
   (main.acct .acid-card a.qc.accent = 0,4,2 vs §10's 0,3,2), including the
   press/tap contact-flip: gn2-base flips the button to a white fill with ink
   type, and without this the label would stay white on white while pressed.

   Introduced for the Bookings endpoint's "Book your next session" card, but
   written for the component, not the page — any acid card that lands on an
   account surface gets it. Protocol note: acid stays the machine/process signal
   (self-serve booking), the card is the page's only acid moment, and no account
   page carries a cobalt band for it to sit next to.
   ------------------------------------------------------------------- */
main.acct .acid-card a.qc.accent,
main.acct .acid-card a.qc.accent .lbl,
main.acct .acid-card a.qc.accent .arw { color: var(--acid) !important; }

main.acct .acid-card a.qc.accent:is(.press, .tapped, :active),
main.acct .acid-card a.qc.accent:is(.press, .tapped, :active) .lbl,
main.acct .acid-card a.qc.accent:is(.press, .tapped, :active) .arw { color: var(--ink) !important; }

/* The secondary note is an <a> inside .woocommerce, so 109162 would paint it
   cobalt — cobalt inside an acid field breaks the protocol as well as the
   design. The design markup carries an inline ink colour; this is the backstop
   so the pattern survives losing that attribute, and so hover can never
   surface cobalt (§10's .qc-lite hover rule does not reach .ac-note, but the
   109162 rule does). Same reasoning as .cta-band.acid .qc-lite in gn2-base.css. */
main.acct .acid-card .ac-note,
main.acct .acid-card .ac-note:hover,
main.acct .acid-card .ac-note:focus-visible { color: var(--ink) !important; }