/* * ENTTEC My Account, Design System "v2" enhancements (FLAG-GATED, test-only). * --------------------------------------------------------------------------- * This file layers the 2026-07 account-DS enhancements ON TOP of the shipped * base (css/enttec-account-ui.css). It is enqueued ONLY when * enttec_account_ds2_active() is true (test box / local dev), and every rule is * scoped under the .acct-ds2 flag class, emitted only when the helper is true: * - #enttec-account.acct-ds2 ... (page body wrapper, my-account.php) * - .acct-header.acct-ds2 ... (account top bar, header.php) * * Consequence by design: on production the flag is absent, this file is NOT * enqueued, and the base stylesheet is byte-identical to PR1, so prod renders * exactly as it does today. Flip enttec_account_ds2_active() to true (or * add_filter('enttec_account_ds2_active','__return_true')) at ELM-2026 go-live * to ship all of this to every region in one line. * * The extra .acct-ds2 class raises every selector's specificity by one class * over the base's #enttec-account / .acct-header rules, and this file loads * after the base, so these overrides win without new !important (the !important * that remains defeats Bootstrap/WC/tablepress utility classes, exactly as the * base does). Ported from docs/myaccount-design-system.html + the audit * (docs/2026-07-13-myaccount-ds-audit.md). */ /* ============================================================================ * TOKENS (added this cycle). Scoped to the flag so the base :root is untouched. * .acct-ds2 sits on both the wrapper and the header, so these inherit into * every descendant of either. Badge greens + table chrome, per the audit's * "point components AND bridges at tokens" cleanup. * ==========================================================================*/ .acct-ds2 { --acct-badge-success-bg: #e6f7ec; --acct-badge-success-text: #1a7f37; --acct-table-head-bg: #fafbfc; --acct-table-head-text: #6b7280; --acct-table-row-line: #f0f0f0; --acct-table-border: #e0e0e0; } /* ============================================================================ * ACCOUNT HEADER alignment. The theme sizes .my-account-row at 98% / 1480px, * but the base header inner is capped narrower, so the logo sat right of the * content's left edge. Match the same box (and 15px gutter) on account only; * checkout keeps the narrower base header. * ==========================================================================*/ .acct-header.acct-ds2 .acct-header-inner { width: 98%; max-width: 1480px; padding-left: 15px; padding-right: 15px; } /* Secure-lock trust badge (logged-out header): the 116x126 PNG ships with no * size constraint, so it renders full-size and dominates the header. Cap it to * a small icon on the same scale as the logo/avatar. */ .acct-header.acct-ds2 .secureLockImage img { height: 28px; width: auto; display: block; } /* ============================================================================ * OPTION A SIDE NAV. * * The theme renders each row as

Label so the * icon is a SIBLING of the anchor and the theme paints a solid #e7f6fc pill on * the

. We restyle the whole

as the row so icon + label share ONE * soft-tint + accent-bar surface, and neutralise the theme pill. Because the * base already styles the as the row, this override also RESETS the base * box props on the (min-height/padding) so they don't double up on the

. * ==========================================================================*/ /* The row: icon + anchor on one flex line, one shared hover/active surface. */ #enttec-account.acct-ds2 .woocommerce-MyAccount-navigation li { position: relative; margin: 0; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 11px 14px; border-radius: 0 var(--acct-radius) var(--acct-radius) 0; /* flat against the rail edge, rounded on the free side */ border-left: 2px solid transparent; /* reserved: active bar swaps colour, no text shift */ color: var(--acct-text-muted); background: transparent; /* neutralises the theme's #e7f6fc pill */ transition: color var(--acct-dur) var(--acct-ease), background var(--acct-dur) var(--acct-ease), border-color var(--acct-dur) var(--acct-ease); } #enttec-account.acct-ds2 .woocommerce-MyAccount-navigation li a { flex: 1 1 auto; display: block; min-height: 0; padding: 0; /* reset the base box; the