/* MCAKey — My Account navigation redesign Overrides XStore's default account.css (--et_* vars) with MCAKey brand vars. Approved mockup: https://claude.ai/code/artifact/1f4fc195-1436-4b64-9ae7-291d05e45ac6 Targets the real markup from xstore/woocommerce/myaccount/navigation.php — do not rename those classes without also updating the theme template override. IMPORTANT — cascade note: this stylesheet prints BEFORE XStore's own account.css in (enqueue order), and several selectors below share the exact class names XStore already styles. Every rule that has a known same-specificity counterpart in account.css is deliberately written with equal-or-higher specificity (via a real extra element/class, or by doubling a class, e.g. .foo.foo) so it wins regardless of print order — do not "simplify" these selectors without re-checking against wp-content/themes/xstore/css/modules/woocommerce/pages/account.css. The first pass here used plain single-class selectors and several of them silently lost the cascade tie (invisible active nav label, lost padding, oversized avatar) — this rewrite fixes that class of bug wholesale. */ :root { --mca-account-border: rgba(26, 26, 26, 0.09); /* derived from --e-global-color-text */ --mca-account-hover: rgba(30, 144, 255, 0.07); /* derived from --e-global-color-primary */ --mca-account-ring: rgba(30, 144, 255, 0.35); /* derived from --e-global-color-primary, focus ring */ --mca-account-radius: 10px; } /* ---------- Card shell (nav + content) ---------- */ .woocommerce-MyAccount-navigation-wrapper.woocommerce-MyAccount-navigation-wrapper { background: #fff; border: 1px solid var(--mca-account-border); border-radius: var(--mca-account-radius); overflow: hidden; } .woocommerce-MyAccount-content.woocommerce-MyAccount-content { background: #fff; border: 1px solid var(--mca-account-border); border-radius: var(--mca-account-radius); padding: 28px; } /* ---------- Identity block ---------- */ .woocommerce-MyAccount-navigation-wrapper .MyAccount-user-info { margin: 0; padding: 18px; border-bottom: 1px solid var(--mca-account-border); justify-content: flex-start; text-align: start; } .woocommerce-MyAccount-navigation-wrapper .MyAccount-user-info img { max-width: 44px; margin-bottom: 0; border: 1px solid var(--mca-account-border); } .woocommerce-MyAccount-navigation-wrapper .MyAccount-user-info .MyAccount-user-name { font-size: 0.93rem; font-weight: 600; color: var(--e-global-color-text); } /* ---------- Nav list ---------- */ .woocommerce-MyAccount-navigation-wrapper nav.woocommerce-MyAccount-navigation ul { padding: 8px; } .woocommerce-MyAccount-navigation-wrapper nav.woocommerce-MyAccount-navigation li { margin-bottom: 2px; } .woocommerce-MyAccount-navigation-wrapper nav.woocommerce-MyAccount-navigation li a { padding: 10px 10px; border-radius: 7px; font-size: 1.05rem; font-weight: 500; color: var(--e-global-color-text); transition: background 0.15s ease, color 0.15s ease; } .woocommerce-MyAccount-navigation-wrapper nav.woocommerce-MyAccount-navigation li a:before { opacity: 0.65; font-size: 1.2em; } .woocommerce-MyAccount-navigation-wrapper nav.woocommerce-MyAccount-navigation li a:hover { background: var(--mca-account-hover); } .woocommerce-MyAccount-navigation-wrapper nav.woocommerce-MyAccount-navigation li a:focus-visible { outline: 2px solid var(--mca-account-ring); outline-offset: 1px; } /* Active item — Primary blue fill, per CLAUDE.md: "Primary blue -> buy now, links, nav" (XStore's own --et_active-color for this site resolves to the identical #1e90ff we use as the background — hence white text is mandatory here, not optional, or the label disappears against its own pill.) */ .woocommerce-MyAccount-navigation-wrapper nav.woocommerce-MyAccount-navigation li.is-active a { background: var(--e-global-color-primary); color: #fff; } .woocommerce-MyAccount-navigation-wrapper nav.woocommerce-MyAccount-navigation li.is-active a:before { opacity: 1; } .woocommerce-MyAccount-navigation-wrapper nav.woocommerce-MyAccount-navigation li.is-active a:after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--e-global-color-accent); margin-inline-start: auto; } /* Logout — visually separated, not a color statement (no danger token defined in the brand kit) */ .woocommerce-MyAccount-navigation-wrapper li[class*="logout"] { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--mca-account-border); } .woocommerce-MyAccount-navigation-wrapper li[class*="logout"] a { opacity: 0.75; } .woocommerce-MyAccount-navigation-wrapper li[class*="logout"] a:hover { opacity: 1; } /* ---------- Dashboard quick-action buttons ---------- Was still XStore's generic ".btn.black.big" pill button — untouched by the first pass, clashing with the new card shell. Selector matches/exceeds that class's specificity (0,3,0) so it wins regardless of stylesheet order. */ .MyAccount-dashboard-buttons { margin: 0; gap: 10px; } .MyAccount-dashboard-buttons a.btn.black.big { flex: 1 1 150px; margin: 0; height: auto; background-color: #fff; border: 1px solid var(--mca-account-border); border-radius: 8px; color: var(--e-global-color-text); -webkit-text-fill-color: currentColor; padding: 13px 14px; font-size: 1.02rem; font-weight: 550; text-transform: none; letter-spacing: normal; display: flex; align-items: center; justify-content: flex-start; gap: 9px; white-space: nowrap; transition: border-color 0.15s ease, background 0.15s ease; } .MyAccount-dashboard-buttons a.btn.black.big i { opacity: 0.6; font-size: 1.25em; } .MyAccount-dashboard-buttons a.btn.black.big:hover { background-color: var(--mca-account-hover); border-color: var(--e-global-color-primary); color: var(--e-global-color-text); } /* ---------- Desktop / mobile split ---------- Matched to XStore's own breakpoint (992/993px, not CLAUDE.md's generic 1025/768) deliberately: this template's grid math (.col-md-* widths, the theme's own min-width:993px block) is wired to 992/993 internally. Using a different threshold here would open a 993-1024px dead zone where the theme thinks "desktop, float 25%" and this stylesheet thinks "mobile, 100%" at the same time. */ @media only screen and (min-width: 993px) { .woocommerce-MyAccount-navigation-wrapper.woocommerce-MyAccount-navigation-wrapper { width: 268px; float: left; margin-inline-end: 20px; margin-bottom: 0; border-inline-end: 1px solid var(--mca-account-border); } .woocommerce-MyAccount-content.woocommerce-MyAccount-content { float: left; width: calc(100% - 288px); } } @media only screen and (max-width: 992px) { .woocommerce-MyAccount-navigation-wrapper.woocommerce-MyAccount-navigation-wrapper { width: 100%; margin-bottom: 20px; } .woocommerce-MyAccount-content.woocommerce-MyAccount-content { width: 100%; } } /* ---------- Orders table ---------- Approved mockup: https://claude.ai/code/artifact/1b29ab40-5cfd-488a-8665-dce366f6a303 Status pill and total/item-count split need real markup XStore's woocommerce-all.css can't select — added via a WooCommerce core template override (xstore-main-child/woocommerce/myaccount/orders.php, a copy of plugins/woocommerce/templates/myaccount/orders.php v9.5.0 with only the order-status and order-total columns changed). Everything else here is pure CSS against WooCommerce's own existing classes. Table sits inside .woocommerce-MyAccount-content, which already carries the card's own 28px padding for the Dashboard's welcome text — that padding would fight the table's own cell padding here, so it's removed specifically when a .woocommerce-orders-table is present, via :has(), rather than duplicating the whole content-card rule for this one page. */ .woocommerce-MyAccount-content:has(.woocommerce-orders-table) { padding: 0; } .woocommerce-MyAccount-content .woocommerce-orders-table.woocommerce-orders-table { width: 100%; border-collapse: collapse; margin-bottom: 0; font-variant-numeric: tabular-nums; } .woocommerce-MyAccount-content .woocommerce-orders-table th { text-align: start; font-size: 0.72rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--e-global-color-text); opacity: 0.5; padding: 16px 20px; border-bottom: 1px solid var(--mca-account-border); white-space: nowrap; } .woocommerce-MyAccount-content .woocommerce-orders-table__header-order-actions { text-align: end; } .woocommerce-MyAccount-content .woocommerce-orders-table td, .woocommerce-MyAccount-content .woocommerce-orders-table th.woocommerce-orders-table__cell-order-number { padding: 16px 20px; font-size: 0.875rem; text-transform: none; color: var(--e-global-color-text); vertical-align: middle; border-bottom: 1px solid var(--mca-account-border); } .woocommerce-MyAccount-content .woocommerce-orders-table tbody tr:last-child td, .woocommerce-MyAccount-content .woocommerce-orders-table tbody tr:last-child th { border-bottom: none; } .woocommerce-MyAccount-content .woocommerce-orders-table tbody tr:hover { background: var(--mca-account-hover); } .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a { color: var(--e-global-color-primary); font-weight: 600; text-decoration: none; } .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a:hover { text-decoration: underline; } .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-date { opacity: 0.75; white-space: nowrap; } /* Status pill — colors are semantic (order state), deliberately not drawn from Primary/Secondary/Accent, whose roles are already defined (nav/links, Add to Cart, promotional-only). Approved as part of the mockup. */ .mca-order-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 100px; font-size: 0.78rem; font-weight: 650; font-family: inherit; text-decoration: none; /* theme has a bare "mark { text-decoration: underline }" rule */ white-space: nowrap; } .mca-order-status:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .mca-order-status--completed { background: #E8F5E9; color: #1E7B34; } .mca-order-status--processing { background: #E8F1FD; color: #1668C9; /* derived from --e-global-color-primary, darkened for text contrast */ } .mca-order-status--on-hold, .mca-order-status--pending { background: #FDF3E3; color: #96660C; } .mca-order-status--cancelled, .mca-order-status--refunded, .mca-order-status--failed { background: #F5EBEB; color: #8A4B4B; /* muted, deliberately not alarm-red on a checkout-trust-sensitive brand */ } .mca-order-total { display: block; font-weight: 650; } .mca-order-items { display: block; font-size: 0.75rem; font-weight: 400; opacity: 0.55; margin-top: 1px; } /* Actions — a first pass restyled these as bordered "ghost" buttons, which turned out to be the wrong call: the site's actual, established button language (Add to Cart, Buy Now, every other .btn/.button) is solid, filled, colored pills — confirmed by checking a live product page rather than assuming. Ghost buttons existed nowhere else on the site; they read as a disconnected one-off component, not a deliberate secondary style. Fix is to stop fighting global.css's own sitewide default (".btn, .button { background: Primary !important; color: #fff !important; border-radius: 10px !important }" and its color-mix-darkened :hover) and just let it apply, the same way Add to Cart / Buy Now do — only sizing and spacing are adjusted here for a compact inline table-row context instead of a full-width product-page CTA. One property still needed overriding: ".my_account_orders td .button" (theme, woocommerce-all.css) sets its own dark near-black border (1px solid var(--et_btn-dark-br-color)) that neither global.css nor the real Buy Now button carries — confirmed live that Buy Now's computed border-width is 0. Our selector (3 classes) already outranks that theme rule's (2 classes) on plain specificity, so border:none here doesn't need !important, unlike the color/background properties earlier that were fighting global.css's own !important rule. */ .woocommerce-MyAccount-content .woocommerce-orders-table td .button { display: inline-flex; align-items: center; margin: 0; height: auto; padding: 7px 12px; border: none; font-size: 0.78rem; font-weight: 550; } .woocommerce-MyAccount-content .woocommerce-orders-table td .button + .button { margin-inline-start: 6px; } .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions { text-align: end; } /* Mobile — WooCommerce's own shop_table_responsive pattern (thead hides, each td becomes a labeled row via its existing data-title attribute) is kept as-is, just restyled to match the card. */ @media only screen and (max-width: 767px) { .woocommerce-MyAccount-content .woocommerce-orders-table thead { display: none; } .woocommerce-MyAccount-content .woocommerce-orders-table, .woocommerce-MyAccount-content .woocommerce-orders-table tbody, .woocommerce-MyAccount-content .woocommerce-orders-table tr, .woocommerce-MyAccount-content .woocommerce-orders-table td, .woocommerce-MyAccount-content .woocommerce-orders-table th.woocommerce-orders-table__cell-order-number { display: block; width: 100%; } .woocommerce-MyAccount-content .woocommerce-orders-table tr { padding: 16px 20px; } .woocommerce-MyAccount-content .woocommerce-orders-table td, .woocommerce-MyAccount-content .woocommerce-orders-table th.woocommerce-orders-table__cell-order-number { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: none; text-align: end; } .woocommerce-MyAccount-content .woocommerce-orders-table td:before, .woocommerce-MyAccount-content .woocommerce-orders-table th.woocommerce-orders-table__cell-order-number:before { content: attr(data-title); font-size: 0.68rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.5; flex: none; } .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions { text-align: end; } } /* ---------- Downloads page ---------- Template override (xstore-main-child/woocommerce/myaccount/downloads.php) replaces WooCommerce's downloadable-products list/empty-state with a pointer to the Help Center — MCAKey delivers keys by email, not files through WooCommerce's Downloadable Products feature. */ .mca-no-downloads p { margin: 0; max-width: 60ch; font-size: 0.95rem; line-height: 1.6; color: var(--e-global-color-text); opacity: 0.85; } .mca-no-downloads a { color: var(--e-global-color-primary); font-weight: 600; text-decoration: none; } .mca-no-downloads a:hover { text-decoration: underline; } /* ---------- Account details form ---------- Base theme styling was already close (border-radius:8px, light gray border, no !important anywhere on inputs — checked live before writing any of this, so a normal-specificity override was enough throughout). What was missing was brand consistency: focus state was a plain neutral gray border with no ring, and the password fieldset used the theme's generic #e1e1e1 gray instead of the card system's own border token. Save button needed no changes — verified live it already inherits the sitewide solid-blue .button convention correctly (border 0, no -webkit-text-fill-color mismatch). */ .woocommerce-MyAccount-content .woocommerce-EditAccountForm label { display: block; margin-bottom: 6px; font-size: 0.85rem; font-weight: 600; color: var(--e-global-color-text); } .woocommerce-MyAccount-content .woocommerce-EditAccountForm .required { color: var(--e-global-color-primary); } .woocommerce-MyAccount-content .woocommerce-EditAccountForm .woocommerce-form-row { margin-bottom: 20px; } .woocommerce-MyAccount-content .woocommerce-EditAccountForm .input-text { width: 100%; border: 1px solid var(--mca-account-border); border-radius: 8px; padding: 10px 14px; height: auto; font-size: 0.92rem; color: var(--e-global-color-text); background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .woocommerce-MyAccount-content .woocommerce-EditAccountForm .input-text:focus { border-color: var(--e-global-color-primary); outline: none; box-shadow: 0 0 0 3px var(--mca-account-hover); } .woocommerce-MyAccount-content .woocommerce-EditAccountForm #account_display_name_description { display: block; margin-top: 6px; font-size: 0.8rem; opacity: 0.6; } .woocommerce-MyAccount-content .woocommerce-EditAccountForm #account_display_name_description em { font-style: normal; } /* Password fieldset — grouped as its own section using the card system's own border token instead of the theme's default gray. Legend keeps the standard "cut into the border" treatment (background matches the card's white so the border line breaks cleanly behind the label). */ .woocommerce-MyAccount-content .woocommerce-EditAccountForm fieldset { border: 1px solid var(--mca-account-border); border-radius: 10px; padding: 26px 24px 6px; margin: 8px 0 28px; } .woocommerce-MyAccount-content .woocommerce-EditAccountForm legend { padding: 0 8px; margin-left: 8px; background: #fff; font-size: 0.72rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--e-global-color-text); opacity: 0.55; } .woocommerce-MyAccount-content .woocommerce-EditAccountForm .woocommerce-Button { padding: 12px 28px; font-size: 0.85rem; }