/** * My Account (Phase 14B) — restyles WooCommerce's own real myaccount/* * output only (navigation, content, forms, address blocks, orders table) — * no woocommerce/myaccount/ template override exists in this theme (see * includes/class-woocommerce-support.php's docblock: hooks-first, no * template overrides). Every selector below is scoped with the real * body.woocommerce-account class WooCommerce itself adds via body_class() * whenever is_account_page() is true, so a custom endpoint added elsewhere * (karataki-core's Wishlist module registers its own tab the standard * woocommerce_account_menu_items/add_rewrite_endpoint way) is styled the * same as every core tab automatically, with nothing here referencing it * by name. * * WooCommerce wraps the [woocommerce_my_account] shortcode's real output in * one
(core's shortcode_wrapper()), containing * the real .woocommerce-MyAccount-navigation and .woocommerce-MyAccount- * content as two siblings — same wrapper pattern cart.css/checkout.css * already restyle. The two-column grid below targets that wrapper * directly and collapses to one stacked column below the theme's usual * 900px tablet breakpoint (see media query at the bottom). */ /* Visual Polish 3: page.php (this theme's generic Page template — no woocommerce/myaccount/ override exists, see docblock above) prints the real WordPress page title as a bare

directly inside
, then the_content() runs [woocommerce_my_account]. With zero padding on #main and zero margin on h1 (base/reset.css zeroes all heading margins), the account page previously had no gap at all below the sticky header — this is the fix, scoped to this page only rather than touching page.php or #main/.k-container for every other page. */ body.woocommerce-account #main { padding-top: clamp(56px, 7vw, 96px); } body.woocommerce-account #main > h1 { font-size: clamp(28px, 3.4vw, 46px); margin: 0 0 clamp(24px, 3vw, 40px); padding-bottom: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--k-border-hairline); } body.woocommerce-account .woocommerce { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 3vw, 56px); align-items: start; padding: 0 0 clamp(60px, 8vw, 110px); } /* Navigation ------------------------------------------------------------ */ body.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-right: 1px solid var(--k-border-hairline); } /* Visual Polish 3: font-size/weight/letter-spacing/uppercase now come from the shared .k-nav-link rule (typography.css) instead of duplicating an .24em label-tracking value here — this list reads as the same family of short nav labels as the header, not a generic default WooCommerce list. The left border is the vertical analogue of the header nav's underline (header.css's .k-header__nav-link) — a deliberate, visible active/hover indicator instead of a text-color-only change. */ body.woocommerce-account .woocommerce-MyAccount-navigation-link a { display: block; padding: 13px 16px 13px 18px; border-left: 1px solid transparent; margin-left: -1px; color: var(--k-color-muted-1); transition: color var(--k-duration-base), border-color var(--k-duration-base); } body.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover, body.woocommerce-account .woocommerce-MyAccount-navigation-link a:focus-visible { color: var(--k-color-text); border-left-color: var(--k-border-hairline-strong); } body.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a { color: var(--k-color-accent); border-left-color: var(--k-color-accent); } /* Content ----------------------------------------------------------------- */ body.woocommerce-account .woocommerce-MyAccount-content { font-size: var(--k-text-body); color: var(--k-color-text); min-width: 0; } body.woocommerce-account .woocommerce-MyAccount-content > p:first-child { color: var(--k-color-muted-1); } /* Real paragraph rhythm (login/orders/address intro text, etc.) — reset.css zeroes every element's margin by default, which previously left multi- paragraph content (e.g. the login/register intro, order notes) running on with no visual break between blocks — part of the "sparse and unfinished" read, not a missing-content problem. */ body.woocommerce-account .woocommerce-MyAccount-content > p { margin: 0 0 16px; } body.woocommerce-account .woocommerce-MyAccount-content h2, body.woocommerce-account .woocommerce-MyAccount-content h3, body.woocommerce-account .woocommerce-Address-title h3 { font-family: var(--k-font-serif); font-weight: 400; font-size: var(--k-text-heading-md); margin: 0 0 16px; } /* A second h2 section (e.g. Addresses' "Billing address" / "Shipping address" titles are h3s under one h2, but some endpoints print more than one h2-level block in sequence) reads as a new section, not a continuation — same clear-separation intent as the page h1's own rule above, translated to content-level headings. */ body.woocommerce-account .woocommerce-MyAccount-content h2 ~ h2 { margin-top: clamp(32px, 4vw, 56px); } /* Notices — same real .woocommerce-error/-message/-info treatment as checkout.css, so a notice looks the same wherever WooCommerce prints one. .woocommerce-notices-wrapper itself is present on every load (even with nothing inside it) — checkout.css only ever gives that wrapper a margin, never a border/background, for exactly that reason; the actual bordered "card" look belongs only to a real notice element. */ body.woocommerce-account .woocommerce-notices-wrapper { margin: 0 0 16px; } body.woocommerce-account .woocommerce-error, body.woocommerce-account .woocommerce-message, body.woocommerce-account .woocommerce-info { list-style: none; margin: 0 0 16px; padding: 14px 18px; font-size: 13px; border: 1px solid var(--k-border-hairline-strong); background: var(--k-color-bg-raised); } /* Forms: Edit account / Addresses ----------------------------------------- */ body.woocommerce-account .woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(20px, 2.4vw, 32px); } body.woocommerce-account .form-row { margin: 0 0 16px; } body.woocommerce-account .form-row label { display: block; margin-bottom: 6px; font-size: var(--k-text-label); letter-spacing: var(--k-tracking-label); text-transform: uppercase; color: var(--k-color-muted-2); } body.woocommerce-account .form-row input[type="text"], body.woocommerce-account .form-row input[type="email"], body.woocommerce-account .form-row input[type="password"], body.woocommerce-account .form-row input[type="tel"], body.woocommerce-account .form-row select, body.woocommerce-account .form-row textarea { width: 100%; padding: 12px 14px; font: inherit; font-size: var(--k-text-body-sm); color: var(--k-color-text); background: var(--k-color-bg-raised); border: 1px solid var(--k-border-hairline-strong); } body.woocommerce-account .form-row input:focus-visible, body.woocommerce-account .form-row select:focus-visible, body.woocommerce-account .form-row textarea:focus-visible { outline: 2px solid var(--k-color-accent); outline-offset: 1px; } /* Buttons — same real single_add_to_cart_button/#place_order treatment as .k-btn--fill (base/components.css), targeted directly on WooCommerce's own real button/submit markup rather than a class added in PHP. */ body.woocommerce-account .woocommerce-Button, body.woocommerce-account button.button, body.woocommerce-account input.button, body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] { display: inline-block; padding: 14px 28px; font-size: 11px; font-weight: 500; letter-spacing: var(--k-tracking-eyebrow); text-transform: uppercase; background: var(--k-color-text); color: var(--k-color-bg); border: 0; cursor: pointer; transition: background var(--k-duration-base), color var(--k-duration-base); } body.woocommerce-account .woocommerce-Button:hover, body.woocommerce-account .woocommerce-Button:focus-visible, body.woocommerce-account button.button:hover, body.woocommerce-account button.button:focus-visible, body.woocommerce-account input.button:hover, body.woocommerce-account input.button:focus-visible { background: var(--k-color-accent); color: var(--k-color-bg); } /* Orders / Downloads tables ------------------------------------------------ */ body.woocommerce-account table.shop_table, body.woocommerce-account .woocommerce-orders-table { width: 100%; border-collapse: collapse; font-size: var(--k-text-body-sm); } body.woocommerce-account table.shop_table th, body.woocommerce-account table.shop_table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--k-border-hairline); } body.woocommerce-account table.shop_table th { font-size: var(--k-text-label); letter-spacing: var(--k-tracking-label); text-transform: uppercase; color: var(--k-color-muted-2); font-weight: 500; } /* Responsive: stack nav above content below the theme's usual 900px tablet breakpoint (see product-card.php's own sizes attr for the same threshold). */ @media (max-width: 899px) { body.woocommerce-account .woocommerce { grid-template-columns: 1fr; } body.woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--k-border-hairline); padding-bottom: 12px; margin-bottom: 20px; gap: 4px 18px; } /* Horizontal layout here (row + wrap above), so the active/hover indicator switches from the desktop left-border to a bottom-border — same underline idiom the header's own horizontal nav already uses at this width, rather than a left bar that would only make sense in a vertical list. */ body.woocommerce-account .woocommerce-MyAccount-navigation-link a { padding: 4px 0; border-left: 0; margin-left: 0; border-bottom: 1px solid transparent; } body.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover, body.woocommerce-account .woocommerce-MyAccount-navigation-link a:focus-visible { border-left-color: transparent; border-bottom-color: var(--k-border-hairline-strong); } body.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a { border-left-color: transparent; border-bottom-color: var(--k-color-accent); } body.woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; } }