/* FiberOpticsTools account pages — page-specific styles on the shared frame. Light-theme only; tokens come from frame.css. */ /* ── Kadence page wrappers ── The account page is an ordinary WP page, so Kadence wraps it in its content-area (80px top margin), a 1290px content-container with edge padding, and a boxed white article. Every other storefront page renders straight into #inner-wrap on the ground, so the account does the same: no outer card, the header .wrap's column, and a short run-in under the masthead. */ .woocommerce-account .content-area { margin: 26px 0 0; } .woocommerce-account .content-container { max-width: none; padding: 0; } .woocommerce-account .content-bg { background: transparent; box-shadow: none; } .woocommerce-account .entry-content-wrap { padding: 0; } /* ── page header ── One line, not a hero: greeting left, identity right, a rule under both with room on either side of it. The nav and content blocks carry their own headings. */ .acct-banner { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding: 4px 0 18px; margin-bottom: 26px; border-bottom: 1px solid var(--line); } .acct-banner h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; } .acct-banner .who { font-family: var(--mono); font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .acct-banner .who b { color: var(--ink-dim); font-weight: 600; } .acct-banner .who .sep { color: var(--line-strong); } /* two-column account shell: sticky nav + content. Horizontal padding + centering come from Kadence's #inner-wrap; we only add vertical rhythm. */ #fot-account { padding: 0 0 64px; } .acct { border-bottom: 1px solid var(--line); } .acct-grid { display: grid; grid-template-columns: 220px 1fr; gap: 34px; align-items: start; } /* ── left account nav ── */ .anav { position: sticky; top: calc(var(--fot-dock-top, 149px) + 14px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .anav a { display: flex; align-items: center; gap: 11px; padding: 11px 15px; font-size: 13.5px; color: var(--ink-dim); border-left: 2px solid transparent; } .anav a + a { border-top: 1px solid var(--line); } .anav a svg { color: var(--muted); flex-shrink: 0; } .anav a:hover { background: var(--surface-2); color: var(--ink); } .anav a.on { color: var(--ink); background: color-mix(in srgb, var(--accent-glow) 60%, transparent); border-left-color: var(--accent); font-weight: 600; } .anav a.on svg { color: var(--accent); } .anav a .tail { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; } /* mobile nav = horizontal scroll strip */ .anav-mtoggle { display: none; } .acol { display: flex; flex-direction: column; gap: 30px; min-width: 0; } /* ── generic account block ── */ .ablock { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .ablock > .bhead { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .ablock > .bhead .htxt h2 { font-size: 16px; font-weight: 730; letter-spacing: -0.01em; } .ablock > .bhead .htxt p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; } .ablock > .bhead .link { font-family: var(--mono); font-size: 12px; color: var(--accent); } .ablock > .bhead .link:hover { text-decoration: underline; } /* status pill */ .pill { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); color: var(--ink-dim); white-space: nowrap; } .pill .pd { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill.delivered { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); } .pill.shipped { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .pill.processing { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 40%, transparent); } /* ── order history rows ── */ .orders { display: flex; flex-direction: column; } .order { border-top: 1px solid var(--line); } .order:first-child { border-top: 0; } .order-top { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 16px; align-items: center; padding: 14px 18px; } .order-top .onum { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .order-top .onum .n { font-family: var(--mono); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } .order-top .onum .dt { font-family: var(--mono); font-size: 11px; color: var(--muted); } .order-top .items { font-family: var(--mono); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .order-top .ostatus { justify-self: start; } .order-top .ott { font-family: var(--mono); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .order-actions { display: flex; align-items: center; gap: 8px; } .toggle { height: 34px; width: 34px; border-radius: 7px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink-dim); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; } .toggle:hover, .toggle:focus { background: transparent; border-color: var(--accent); color: var(--accent); } .toggle svg { transition: transform .18s; } details[open] .toggle svg { transform: rotate(180deg); } /* the reorder button reuses .reorder from the shared system */ /* expandable line-item preview */ .order details { display: contents; } .order .lines { border-top: 1px solid var(--line); background: var(--ground); } .order .lines .li:first-child { border-top: 0; } .order summary { list-style: none; } .order summary::-webkit-details-marker { display: none; } /* ── quick order by SKU grid ── */ .qo { padding: 4px 0 0; } .qo-note { padding: 12px 18px 0; color: var(--muted); font-size: 12.5px; } .qo-grid { padding: 12px 18px 4px; overflow-x: auto; } .qo-table { width: 100%; border-collapse: collapse; min-width: 520px; } .qo-table th { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); text-align: left; font-weight: 600; padding: 4px 10px 8px; } .qo-table th.qth-qty { width: 90px; } .qo-table th.qth-st { width: 130px; } .qo-table td { padding: 4px 10px; } .qo-in { width: 100%; height: 38px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--ground); color: var(--ink); padding: 0 12px; font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; } .qo-in:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; } .qo-in::placeholder { color: var(--muted); } .qo-in.qty { text-align: center; } /* resolved-row state (progressive: rows that "matched" a product) */ .qo-st { font-family: var(--mono); font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 7px; min-height: 38px; } .qo-st.ok { color: var(--good); } .qo-st.ok .pd { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .qo-st .nm { color: var(--ink-dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qo-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 18px 16px; border-top: 1px solid var(--line); margin-top: 6px; } .qo-bar .lhs { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .linkbtn { background: transparent; border: 0; color: var(--accent); font-family: var(--mono); font-size: 12px; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 6px; } .linkbtn:hover, .linkbtn:focus { background: transparent; color: var(--accent); text-decoration: underline; } .qo-sum { font-family: var(--mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .qo-sum b { color: var(--ink); font-weight: 700; } .btn-primary { height: 40px; padding: 0 18px; border-radius: 8px; border: 0; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 13px; font-family: var(--sans); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .btn-primary:hover, .btn-primary:focus { background: var(--accent-deep); } /* ── two-up: addresses + job lists ── */ .twoup { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } /* addresses */ .addrs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px 18px 18px; } .addr { border: 1px solid var(--line); border-radius: 9px; padding: 14px; background: var(--ground); display: flex; flex-direction: column; gap: 6px; position: relative; } .addr.default { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); } .addr .atag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .addr .lbl { font-weight: 650; font-size: 13.5px; } .addr .lines2 { font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; } .addr .edit { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: auto; padding-top: 6px; } .addr .edit:hover { color: var(--accent); } /* ── job lists card ── */ .jlists { display: flex; flex-direction: column; } .jlist { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-top: 1px solid var(--line); } .jlist:first-child { border-top: 0; } .jl-main { flex: 1; min-width: 0; } .jl-main .jl-t { font-weight: 650; font-size: 13.5px; letter-spacing: -0.01em; } .jl-main .jl-m { font-family: var(--mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 3px; } .jl-add { height: 34px; padding: 0 14px; border-radius: 7px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink-dim); font-weight: 650; font-size: 12.5px; font-family: var(--sans); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex-shrink: 0; } .jl-add:hover, .jl-add:focus { background: transparent; border-color: var(--accent); color: var(--accent); } .jl-add svg { width: 14px; height: 14px; } .jl-new { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--accent); } .jl-new:hover { background: var(--surface-2); } /* generic keyboard focus for links/buttons that lack a bespoke rule */ a:focus-visible, button:focus-visible, summary:focus-visible, .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } @media (max-width: 900px) { .acct-grid { grid-template-columns: 1fr; gap: 22px; } .anav { position: static; display: flex; overflow-x: auto; border-radius: var(--radius); } .anav a { border-top: 0 !important; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; padding: 12px 15px; } .anav a + a { border-top: 0; } .anav a.on { border-left-color: transparent; border-bottom-color: var(--accent); background: color-mix(in srgb, var(--accent-glow) 60%, transparent); } .anav a .tail { display: none; } .twoup { grid-template-columns: 1fr; } .order-top { grid-template-columns: 1fr auto; grid-auto-flow: row; gap: 8px 14px; } .order-top .onum { grid-column: 1; grid-row: 1; } .order-top .ott { grid-column: 2; grid-row: 1; } .order-top .items { grid-column: 1; grid-row: 2; } .order-top .ostatus { grid-column: 2; grid-row: 2; justify-self: end; } .order-actions { grid-column: 1 / -1; grid-row: 3; } .order-actions .reorder { flex: 1; justify-content: center; } } @media (max-width: 560px) { .addrs { grid-template-columns: 1fr; } } /* ── deferred nav items (Job Lists / Quick Order affordances) ── */ .anav a.soon { color: var(--muted); cursor: default; } .anav a.soon:hover { background: transparent; color: var(--muted); } .anav a.soon svg { color: var(--line-strong); } .anav a.soon .tail { color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-size: 9.5px; } /* ── outline button (orders pagination) ── */ .btn-out { height: 38px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink-dim); font-weight: 650; font-size: 13px; font-family: var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; } .btn-out:hover, .btn-out:focus { background: transparent; border-color: var(--accent); color: var(--accent); } /* ── sign in / create account ── One centred column, one task at a time. A sign-in page gains nothing from filling the viewport; what helps is a short obvious path to one of two actions, so the card stays narrow and the page stays quiet around it. */ .fot-auth .acct-banner { display: block; border-bottom: 0; padding: 12px 0 26px; margin-bottom: 0; } .fot-auth .acct-banner > div { text-align: center; } .fot-auth .acct-banner h1 { font-size: clamp(24px, 3.4vw, 34px); margin-top: 6px; } .fot-auth .acct-banner .who { justify-content: center; margin-top: 8px; } .fot-auth-col { max-width: 424px; margin: 0 auto; } .fot-auth-notices { max-width: 100%; margin: 0 0 14px; } .fot-auth-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: 0 1px 2px rgba(20, 70, 110, 0.04), 0 10px 28px -18px rgba(20, 70, 110, 0.25); } /* Tabs are anchors, not buttons: with JavaScript off they navigate to ?tab= and the server renders the other panel, so the page never becomes a dead end. */ .fot-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--ground); border-bottom: 1px solid var(--line); } .fot-tab { padding: 13px 10px; text-align: center; text-decoration: none; cursor: pointer; font-family: var(--sans); font-size: 13.5px; font-weight: 650; color: var(--muted); border-bottom: 2px solid transparent; } .fot-tab + .fot-tab { border-left: 1px solid var(--line); } .fot-tab:hover { color: var(--ink-dim); } .fot-tab.on { color: var(--accent); background: var(--surface); border-bottom-color: var(--accent); border-left-color: transparent; } .fot-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; } .fot-form { padding: 20px; display: flex; flex-direction: column; gap: 16px; } /* The sign-in panel holds two forms and shows one. `hidden` alone loses to the display rule above (the attribute's UA style is what it overrides), so the hidden form has to be named here or both render stacked. */ .fot-form[hidden] { display: none; } /* WooCommerce's own stylesheet boxes these forms: `.woocommerce form.login, .woocommerce form.register` sets a border, a radius and a 2em bottom margin, which inside the card renders as a second box floating in the first with an empty strip under the button. That selector scores 0,2,1, so undoing it needs more than a single class or the reset silently loses. The card is the frame. */ .fot-auth .fot-auth-card form.fot-form { border: 0; border-radius: 0; margin: 0; padding: 20px; background: none; } .fot-field { display: flex; flex-direction: column; gap: 6px; } .fot-field label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .fot-input { height: 44px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--ground); color: var(--ink); padding: 0 13px; font-size: 15px; font-family: var(--sans); width: 100%; } .fot-input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; } .fot-form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .fot-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-dim); cursor: pointer; } .fot-check input { width: 15px; height: 15px; accent-color: var(--accent); } .fot-forgot { font-family: var(--mono); font-size: 12px; color: var(--accent); } .fot-forgot:hover { text-decoration: underline; } .fot-submit { width: 100%; height: 46px; margin-top: 2px; justify-content: center; font-size: 14.5px; } .fot-hint { font-size: 11.5px; color: var(--muted); margin: 0; } /* The other way in. A quiet line under the button rather than a second button: the page should read as one action with an alternative, not a choice the visitor has to make before starting. */ .fot-auth-alt { margin: -2px 0 0; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--muted); } .fot-auth-alt a { color: var(--accent); } .fot-auth-alt a:hover { text-decoration: underline; } /* Reveal control. Typing a password blind on a phone is a common reason a correct password gets entered wrong twice and then reset. */ .fot-secret { position: relative; display: flex; } .fot-secret .fot-input { padding-right: 66px; } .fot-eye { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; padding: 7px 9px; border-radius: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .fot-eye:hover { color: var(--accent); background: var(--accent-glow); } .fot-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; } /* WooCommerce prints the privacy paragraph inside the register form at body size, where it outweighs the form it belongs to. It is fine print. */ .fot-form .woocommerce-privacy-policy-text p { font-size: 11.5px; line-height: 1.55; color: var(--muted); margin: 0; } .fot-form .woocommerce-privacy-policy-text a { color: var(--accent); text-decoration: underline; } /* WooCommerce's own strength meter, restyled to match the field labels. */ .fot-form .woocommerce-password-strength { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; margin: -6px 0 0; padding: 0; border: 0; background: none; text-align: left; } .fot-form .woocommerce-password-strength.short, .fot-form .woocommerce-password-strength.bad { color: #B3261E; } .fot-form .woocommerce-password-strength.good { color: #8A6D1F; } .fot-form .woocommerce-password-strength.strong { color: var(--good); } .fot-form .woocommerce-password-hint { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin: 4px 0 0; display: block; } .fot-auth-help { margin: 18px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; } .fot-auth-help a { color: var(--accent); } .fot-auth-help a:hover { text-decoration: underline; } @media (max-width: 560px) { .fot-auth-col { max-width: 100%; } .fot-form { padding: 16px; } } /* ── reorder button (shared in the mockup; ported here so account owns it) ── */ .reorder { height: 34px; padding: 0 15px; border-radius: 7px; border: 0; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 12.5px; font-family: var(--sans); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .reorder:hover, .reorder:focus { background: var(--accent-deep); } .reorder.is-off { background: var(--surface-2); color: var(--muted); cursor: not-allowed; } .reorder.is-off:hover, .reorder.is-off:focus { background: var(--surface-2); color: var(--muted); } /* ── layout hardening ────────────────────────────────────────────────────── WooCommerce/Kadence ship a default My Account layout that floats and sizes .woocommerce-MyAccount-navigation / -content into a 30/70 split and can set the .woocommerce wrapper to flex. Our grid must win regardless of load order, so scope it to the #fot-account id (out-specifies the stock two-class rules) and neutralize the stock width/float on the content + nav. */ .woocommerce-account .woocommerce { display: block !important; } #fot-account { width: 100% !important; display: block; } #fot-account .acct-grid { display: grid !important; grid-template-columns: 220px minmax(0, 1fr) !important; gap: 34px; align-items: start; } #fot-account .account-navigation-wrap { width: auto !important; float: none !important; margin: 0; border: 0; } #fot-account .anav { width: 220px !important; min-width: 220px; float: none !important; } #fot-account .woocommerce-MyAccount-content { width: auto !important; max-width: none !important; float: none !important; margin: 0; padding: 0; min-width: 0; } @media (max-width: 900px) { /* minmax(0, 1fr), not 1fr: the nav strip's nowrap items give it a min-content width of ~1000px, and a plain 1fr track (minmax(auto, 1fr)) grows to fit that, pushing every card off the right edge of a phone. */ #fot-account .acct-grid { grid-template-columns: minmax(0, 1fr) !important; } #fot-account .account-navigation-wrap { min-width: 0; } #fot-account .anav { width: auto !important; min-width: 0; } } /* ── native WooCommerce endpoint content (address form, account details, view order, payment methods) ── These endpoints render WooCommerce's own markup inside .woocommerce-MyAccount-content. Selectors here target WooCommerce's own hooks (.button, .form-row, .woocommerce-Address) or use :where() to carry no specificity, so the store's designed components rendered in the same column (.reorder, .btn-out, .jl-remove, .link) keep their own colours: a bare `.woocommerce-MyAccount-content a` outranked `.reorder` and painted accent text on an accent button. Where WooCommerce core's own stylesheet has to be beaten (48% float columns, floated form rows), the #fot-account id does it. */ :where(.woocommerce-MyAccount-content) { font-size: 14px; color: var(--ink-dim); line-height: 1.6; } :where(.woocommerce-MyAccount-content) > p:first-child { margin-top: 0; } :where(.woocommerce-MyAccount-content) :where(h2, h3) { color: var(--ink); font-weight: 730; font-size: 17px; margin: 0 0 12px; letter-spacing: -0.01em; } :where(.woocommerce-MyAccount-content) a { color: var(--accent); } /* Body region of an .ablock that holds native markup (a form, a table). */ .ablock > .bbody { padding: 18px; } /* forms: WooCommerce's floated 47% rows become a two-column grid; a wide row spans it. Rows carry no margin of their own, the grid's gap is the spacing, so every row has to sit in a grid. The address form has a field wrapper for that; the account-details form wraps its fields in .acct-form-grid and the form element is a grid too, holding that wrapper and the save row. In both account-details grids everything that is not a half-width row (wide rows, fieldsets, whatever an extension prints) spans the grid, so hook output without form-row classes never drops into one column. */ #fot-account form .form-row, #fot-account p.form-row { float: none; width: auto; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; } #fot-account .woocommerce-address-fields__field-wrapper, #fot-account .acct-form-grid, #fot-account form.woocommerce-EditAccountForm { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; max-width: 640px; } #fot-account .woocommerce-address-fields__field-wrapper .form-row-wide, #fot-account .acct-form-grid > :not(.form-row-first):not(.form-row-last), #fot-account form.woocommerce-EditAccountForm > :not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; } #fot-account form .clear { display: none; } /* The password-change fieldset stacks its own rows. Kadence draws a fieldset as a bordered, padded box with a 1.2em margin either side; here the rows are the box. */ #fot-account form fieldset { display: grid; gap: 14px; margin: 8px 0 0; padding: 0; border: 0; min-width: 0; } #fot-account form legend { padding: 0; margin: 0 0 2px; font-size: 15px; font-weight: 730; color: var(--ink); letter-spacing: -0.01em; } @media (max-width: 560px) { #fot-account .woocommerce-address-fields__field-wrapper, #fot-account .acct-form-grid, #fot-account form.woocommerce-EditAccountForm { grid-template-columns: 1fr; } } /* Kadence styles `.woocommerce form .form-row label` (bold, 90%, line-height 2.4) and keeps `outline: 0` on `.woocommerce form .form-row input.input-text` in every state, both above what a class-scoped rule here can reach; the id puts the labels and the focus ring on top. */ #fot-account .woocommerce-MyAccount-content label { font-family: var(--mono); font-size: 11px; font-weight: 400; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } #fot-account .woocommerce-MyAccount-content label .required { color: #B3261E; text-decoration: none; } #fot-account .woocommerce-MyAccount-content label .optional { text-transform: none; letter-spacing: 0; } .woocommerce-MyAccount-content .woocommerce-input-wrapper { display: block; } .woocommerce-MyAccount-content input:not([type="checkbox"]):not([type="radio"]), .woocommerce-MyAccount-content select, .woocommerce-MyAccount-content textarea { height: 42px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--ground); color: var(--ink); padding: 0 13px; font-size: 14px; font-family: var(--sans); width: 100%; } .woocommerce-MyAccount-content textarea { height: auto; padding: 10px 13px; } #fot-account .woocommerce-MyAccount-content input:focus, #fot-account .woocommerce-MyAccount-content select:focus, #fot-account .woocommerce-MyAccount-content textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; } /* selectWoo renders the country/state pickers; give the rendered control the input look */ .woocommerce-MyAccount-content .select2-container .select2-selection--single { height: 42px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--ground); } .woocommerce-MyAccount-content .select2-container .select2-selection--single .select2-selection__rendered { line-height: 40px; padding-left: 13px; color: var(--ink); font-size: 14px; } .woocommerce-MyAccount-content .select2-container .select2-selection--single .select2-selection__arrow { height: 40px; } .woocommerce-MyAccount-content .form-row .description, .woocommerce-MyAccount-content .form-row em, .woocommerce-MyAccount-content .form-row .woocommerce-form-row__description { font-size: 12px; color: var(--muted); font-style: normal; } /* WooCommerce's own show/hide toggle inside password fields. Kadence already places it (top: 50%; translate: 0 -50%) and draws the eye as a masked ::after, so the placement is restated whole above Kadence's specificity (a transform on top of its translate would stack into a full button-height offset) and the colour goes on the mask. */ .woocommerce-MyAccount-content .password-input { position: relative; } #fot-account .woocommerce-MyAccount-content .show-password-input { position: absolute; right: 12px; top: 50%; translate: 0 -50%; transform: none; padding: 0; border: 0; background: none; cursor: pointer; } #fot-account .woocommerce-MyAccount-content .show-password-input::after { background-color: var(--muted); } #fot-account .woocommerce-MyAccount-content .show-password-input:hover::after, #fot-account .woocommerce-MyAccount-content .show-password-input:focus::after { background-color: var(--accent); } /* the row of controls under a form */ .acct-form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; } /* WooCommerce's own .button (save, add payment method, notice actions) */ .woocommerce-MyAccount-content .button { height: 40px; padding: 0 18px; border-radius: 8px; border: 0; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 13.5px; font-family: var(--sans); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; } .woocommerce-MyAccount-content .button:hover, .woocommerce-MyAccount-content .button:focus { background: var(--accent-deep); color: var(--on-accent); box-shadow: none; } /* ── addresses (account → addresses) reuse the dashboard's address cards ── */ .addrs-page .addrs { grid-template-columns: 1fr 1fr; } .addr .lines2 address { font-style: normal; margin: 0; line-height: inherit; color: inherit; } @media (max-width: 720px) { .addrs-page .addrs { grid-template-columns: 1fr; } } /* ── account details: facts list (view mode) ── */ .acct-facts { margin: 0; } .acct-facts > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 18px; padding: 13px 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink); } .acct-facts > div:first-child { border-top: 0; } .acct-facts dt { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding-top: 3px; } .acct-facts dd { margin: 0; } .acct-facts dd .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; } .acct-facts dd .unset { color: var(--muted); } .acct-facts dd .mono { font-family: var(--mono); letter-spacing: 0.1em; } .ablock > .bhead > .btn-out { height: 34px; padding: 0 14px; font-size: 12.5px; } /* The form element is a grid (see the forms block above); the actions row's own gap is the grid's. */ #fot-account form.woocommerce-EditAccountForm .acct-form-actions { margin-top: 4px; } /* WooCommerce's strength meter under a new password, in the store's label voice */ .woocommerce-MyAccount-content .woocommerce-password-strength { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; margin: 4px 0 0; padding: 0; border: 0; background: none; text-align: left; } .woocommerce-MyAccount-content .woocommerce-password-strength.short, .woocommerce-MyAccount-content .woocommerce-password-strength.bad { color: #B3261E; } .woocommerce-MyAccount-content .woocommerce-password-strength.good { color: #8A6D1F; } .woocommerce-MyAccount-content .woocommerce-password-strength.strong { color: var(--good); } .woocommerce-MyAccount-content .woocommerce-password-hint { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin: 4px 0 0; display: block; } @media (max-width: 560px) { .acct-facts > div { grid-template-columns: 1fr; } } /* ── payment methods table ── The table keeps WooCommerce's shop_table classes (Kadence's <=719px responsive block reads them), so Kadence's `.woocommerce table.shop_table` rules (90% text, 9/12px cells, a 1.5em bottom margin, a border-top per row) match it too; the id keeps ours on top. */ #fot-account .woocommerce-MyAccount-paymentMethods { width: 100%; margin: 0; border-collapse: collapse; border-radius: 0; font-size: 13.5px; } #fot-account .woocommerce-MyAccount-paymentMethods th { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; text-align: left; padding: 12px 18px; line-height: 1.5; border-bottom: 1px solid var(--line); } #fot-account .woocommerce-MyAccount-paymentMethods td { padding: 12px 18px; line-height: 1.5; border-top: 0; border-bottom: 1px solid var(--line); vertical-align: middle; } #fot-account .woocommerce-MyAccount-paymentMethods tr:last-child td { border-bottom: 0; } .woocommerce-MyAccount-paymentMethods .payment-method-actions { text-align: right; white-space: nowrap; } .woocommerce-MyAccount-paymentMethods .payment-method-actions .button { height: 32px; padding: 0 12px; font-size: 12.5px; margin-left: 6px; } .woocommerce-MyAccount-paymentMethods .payment-method-actions .button.delete { background: transparent; color: var(--ink-dim); border: 1px solid var(--line-strong); } .woocommerce-MyAccount-paymentMethods .payment-method-actions .button.delete:hover { border-color: #e0574f; color: #e0574f; background: transparent; } .pm-empty { padding: 20px 18px; color: var(--muted); font-size: 13.5px; } .pm-foot { padding: 14px 18px; border-top: 1px solid var(--line); } /* Kadence's global a:hover/focus/active recolours anchors, and its button:hover/focus/active (0,1,1) paints every