.al-account{color:#1b2035;padding:8px 0 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;--al-accent: #6272c3;--al-accent-ink: #4d5aa1;--al-surface: #ffffff;--al-border: #e3e7f3;--al-text: #1b2035;--al-muted: #767e95}.al-account *,.al-account *:before,.al-account *:after{box-sizing:border-box}.al-account__container{max-width:1200px;margin:0 auto;padding:0}.al-account__header{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;row-gap:4px;margin-bottom:16px}.al-account__title{margin:0;font-size:1.6rem;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--al-text)}.al-account__subtitle{margin:0;font-size:.75rem;font-weight:500;color:var(--al-muted);max-width:100%}.al-account__panel{display:flex;flex-direction:column;gap:0}.al-account .woocommerce-MyAccount-navigation,.al-account .woocommerce-MyAccount-content{float:none!important;width:100%!important;margin:0!important}.al-account__tabs{display:flex;gap:0;border-bottom:2px solid var(--al-border);margin-bottom:28px}.al-account__tab{position:relative;isolation:isolate;padding:10px 20px;font-size:.85rem;font-weight:600;color:var(--al-muted);background:none;border:none;text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;transition:color .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease}.al-account__tab:hover{color:var(--al-accent-ink)}.al-account__tab--active{color:var(--al-accent-ink);border-bottom-color:var(--al-accent);background:none;box-shadow:none;text-shadow:0 0 3px rgba(98,114,195,.2),0 0 8px rgba(98,114,195,.12)}.al-account__tab--active:before{content:"";position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:70%;height:62%;border-radius:999px;background:radial-gradient(circle,#6272c32b,#6272c30f 42%,#6272c300 82%);filter:blur(8px);pointer-events:none;z-index:-1}.al-account__dash-card,.al-account__guest .woocommerce-form{border:1px solid var(--al-border);border-radius:10px;background:var(--al-surface)}.al-account__content{border:none;border-radius:0;background:transparent;padding:8px 0 0}.al-account__content>:first-child{margin-top:0}.al-account__content>:last-child{margin-bottom:0}.al-account__content p,.al-account__content li{font-size:.83rem;line-height:1.6;color:#5f667c}.al-account__content h2,.al-account__content h3{margin-top:0;font-size:1.15rem;font-weight:700;color:var(--al-text)}.al-account__content table{border-color:var(--al-border)}.al-account__content table th,.al-account__content table td{font-size:.8rem}.al-account__content .button,.al-account__content button[type=submit],.al-account__content input[type=submit]{padding:9px 16px;font-size:.8rem;font-weight:600;border-radius:6px;border:none;background:var(--al-accent);color:#fff}.al-account__content .button:hover,.al-account__content button[type=submit]:hover,.al-account__content input[type=submit]:hover{background:#5564b2}.al-account__content input,.al-account__content select,.al-account__content textarea{padding:8px 12px;font-size:.8rem;border:1px solid var(--al-border);border-radius:6px;color:#2e3550;background:var(--al-surface)}.al-account__content input:focus,.al-account__content select:focus,.al-account__content textarea:focus{outline:none;border-color:var(--al-accent);box-shadow:0 0 0 3px #6272c324}.al-account__content .woocommerce-message,.al-account__content .woocommerce-info,.al-account__content .woocommerce-error,.al-account__content .woocommerce-Message,.al-account__content .woocommerce-Info,.al-account__content .woocommerce-Error{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;overflow-wrap:anywhere}.al-account__content .woocommerce-message .button,.al-account__content .woocommerce-info .button,.al-account__content .woocommerce-error .button,.al-account__content .woocommerce-Message .button,.al-account__content .woocommerce-Info .button,.al-account__content .woocommerce-Error .button{float:none!important;margin:0!important;flex:0 0 auto}.al-account__dashboard{display:flex;flex-direction:column;gap:14px}.al-account__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.al-account__stat-card{border:1px solid var(--al-border);border-radius:10px;background:var(--al-surface);padding:14px 16px;display:flex;flex-direction:column;gap:4px}.al-account__stat-label{font-size:.75rem;color:var(--al-muted);font-weight:600}.al-account__stat-value{font-size:1.15rem;font-weight:700;color:var(--al-text);line-height:1.2}.al-account__chart,.al-account__quick-links{border:1px solid var(--al-border);border-radius:10px;background:var(--al-surface);padding:16px}.al-account__quick-links{display:flex;flex-direction:column;gap:12px}.al-account__chart-title{margin:0 0 12px;font-size:.92rem;font-weight:700;color:var(--al-text)}.al-account__chart-row{display:grid;grid-template-columns:88px 1fr 44px;gap:10px;align-items:center;margin-bottom:8px}.al-account__chart-row:last-child{margin-bottom:0}.al-account__chart-label{font-size:.78rem;font-weight:600;color:#535d7d}.al-account__chart-bar{width:100%;height:8px;border-radius:999px;background:#e7ebf7;overflow:hidden}.al-account__chart-fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#5a69b8,#6f7dd1)}.al-account__chart-value{text-align:right;font-size:.75rem;font-weight:600;color:var(--al-muted)}.al-account__dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.al-account__dash-card{padding:16px;display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit;transition:border-color .15s ease,box-shadow .15s ease}.al-account__dash-card:hover{border-color:#6272c35c;box-shadow:0 6px 18px #6272c31a}.al-account__dash-icon{width:18px;height:18px;color:var(--al-accent-ink);display:inline-flex;align-items:center;justify-content:center}.al-account__dash-icon svg{width:18px;height:18px;display:block}.al-account__dash-label{font-size:.85rem;font-weight:600;color:var(--al-text)}.al-account__dash-value{font-size:.78rem;color:var(--al-muted);line-height:1.5}.al-account__guest{max-width:1200px;width:100%;margin:0 auto}.al-account .al-account__guest .al-auth-layout{width:100%;margin:0}.al-account .al-account__guest .al-auth-layout__inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);align-items:stretch;gap:24px;width:100%}.al-account .al-account__guest .al-auth-layout__form-column,.al-account .al-account__guest .al-auth-layout__form-column--wide{width:100%;min-width:0;max-width:none;min-height:0;padding:24px;border:1px solid var(--al-border);border-radius:16px;background:#fff;box-shadow:0 12px 28px #1b20350f}.al-account .al-account__guest .al-auth-layout__mascot-image--outside{width:100%;min-width:0;max-width:none;min-height:0;height:100%;max-height:none;display:block;object-fit:contain;object-position:center;border:none;border-radius:16px;background:transparent;padding:24px}.al-auth-pane{display:none}.al-auth-pane.is-active{display:block}.al-auth-pane__head{margin-bottom:16px}.al-auth-pane__title{margin:0;font-size:1.22rem;font-weight:800;color:var(--al-text);letter-spacing:-.015em}.al-auth-pane__subtitle{margin:7px 0 0;font-size:.9rem;line-height:1.62;color:#5f667c}.al-auth-form{margin:0}.al-auth-form__field{margin:0 0 14px}.al-auth-form__label{display:flex;align-items:center;gap:4px;margin:0 0 9px;font-size:.86rem;font-weight:700;color:#4f5670}.al-auth-form__input,.al-account__guest input[type=text],.al-account__guest input[type=email],.al-account__guest input[type=password],.al-account__guest input[type=tel]{width:100%;min-height:50px;padding:12px 14px;font-size:.95rem;border:1px solid var(--al-border);border-radius:10px;color:#2e3550;background:#fff;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.al-auth-form__input:focus,.al-account__guest input[type=text]:focus,.al-account__guest input[type=email]:focus,.al-account__guest input[type=password]:focus,.al-account__guest input[type=tel]:focus{outline:none;border-color:var(--al-accent);box-shadow:0 0 0 3px #6272c324}.al-auth-form__meta{margin:3px 0 0;display:flex;align-items:center;justify-content:space-between;gap:12px}.al-auth-form__remember{display:inline-flex;align-items:center;gap:8px;font-size:.83rem;color:#5f667c}.al-auth-form__remember input[type=checkbox]{margin:0}.al-auth-form__forgot{color:var(--al-accent-ink);text-decoration:none;font-size:.82rem;font-weight:600}.al-auth-form__forgot:hover{text-decoration:underline}.al-auth-form__actions{margin:20px 0 0;display:flex;align-items:center;gap:12px}.al-auth-form__submit,.al-account__guest .al-auth-form .button,.al-account__guest .al-auth-form button,.al-account__guest .al-auth-form input[type=submit]{min-height:50px;width:100%;padding:11px 18px;font-size:.95rem;font-weight:700;border-radius:10px;border:none;background:linear-gradient(180deg,#6d7ad0,#5a67bb);color:#fff;cursor:pointer;box-shadow:0 8px 18px #6272c347;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.al-auth-form__submit:hover,.al-account__guest .al-auth-form .button:hover,.al-account__guest .al-auth-form button:hover,.al-account__guest .al-auth-form input[type=submit]:hover{background:linear-gradient(180deg,#6675cc,#5564b2);box-shadow:0 8px 18px #6272c34d;transform:translateY(-1px)}.al-auth-form__note{margin:0 0 14px;font-size:.84rem;color:#646e8d;line-height:1.6;padding:10px 12px;border:1px solid #e6ebfa;background:#f8faff;border-radius:8px}.al-auth-form__back{display:inline-flex;align-items:center;justify-content:center;min-height:44px;width:100%;padding:10px 14px;font-size:.86rem;font-weight:600;border-radius:10px;border:1px solid var(--al-border);color:#4f5670;background:#fff;text-decoration:none;transition:border-color .15s ease,color .15s ease,background-color .15s ease}.al-auth-form__back:hover{border-color:#c9d2f3;color:var(--al-accent-ink);background:#f8faff}.al-account__guest .woocommerce-notices-wrapper:empty{display:none}.al-account__guest .woocommerce-error,.al-account__guest .woocommerce-info,.al-account__guest .woocommerce-message{margin-bottom:12px!important}@media(max-width:768px){.al-account__container{padding:0}.al-account__header{align-items:baseline;gap:6px;row-gap:2px}.al-account__title{font-size:1.3rem}.al-account__tabs{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:20px}.al-account__tabs::-webkit-scrollbar{display:none}.al-account__tab{flex:0 0 auto;white-space:nowrap;padding:10px 14px;font-size:.8rem}.al-account__content{padding:10px 0 0}.al-account__subtitle{flex-basis:100%}.al-account__content .woocommerce-message,.al-account__content .woocommerce-info,.al-account__content .woocommerce-error,.al-account__content .woocommerce-Message,.al-account__content .woocommerce-Info,.al-account__content .woocommerce-Error{display:block}.al-account__content .woocommerce-message .button,.al-account__content .woocommerce-info .button,.al-account__content .woocommerce-error .button,.al-account__content .woocommerce-Message .button,.al-account__content .woocommerce-Info .button,.al-account__content .woocommerce-Error .button{display:inline-flex;margin-top:10px!important;max-width:100%}.al-account__dash-grid{grid-template-columns:1fr;gap:10px}.al-account__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.al-account__stat-value{font-size:1rem}.al-account__chart,.al-account__quick-links{padding:14px}.al-account__chart-row{grid-template-columns:80px 1fr 40px;gap:8px}.al-account__dash-card{padding:14px}.al-account__guest{max-width:100%}.al-account .al-account__guest .al-auth-layout__inner{grid-template-columns:1fr;gap:16px}.al-account .al-account__guest .al-auth-layout__form-column,.al-account .al-account__guest .al-auth-layout__form-column--wide{padding:16px}.al-account .al-account__guest .al-auth-layout__mascot-image--outside{min-height:220px;height:auto;padding:16px}.al-auth-form__meta{flex-wrap:wrap;align-items:flex-start;gap:10px}.al-auth-form__actions{flex-wrap:wrap;gap:8px;margin-top:12px}.al-auth-form__submit{width:100%;justify-content:center;display:inline-flex;align-items:center}.al-account__content table.shop_table_responsive tr td,.al-account__content table.shop_table_responsive tr th{font-size:.75rem}}@media(max-width:520px){.al-account__stats{grid-template-columns:1fr}}
/* =============================================================================
My Account redesign, approved by Victor 2026-09-15
Board: https://claude.ai/artifact/CkGhfQY7oWHNQtvWefrt7m
Picks: sign-in A (plain light), one-screen sign-in, Google only,
phone menu 1 (button grid), footer hidden on sign-in pages only.
Append to alune-storefront/includes/templates/my_account/my_account.css
(or enqueue after it). Every selector is scoped under .al-account so nothing
leaks into the rest of the storefront. Selectors come from the rendered
staging pages for account #12816.
Tokens: the live --al-* custom properties, with the same values as
fallbacks so this file also works if it loads first.
========================================================================== */
.al-account {
--ra-accent: var(--al-accent, #6272C3);
--ra-accent-ink: var(--al-accent-ink, #4D5AA1);
--ra-text: var(--al-text, #1B2035);
--ra-muted: var(--al-muted, #767E95);
--ra-border: var(--al-border, #E3E7F3);
--ra-surface: var(--al-surface, #FFFFFF);
--ra-ground: #F5F6FB;
--ra-tint: #EEF0FA;
--ra-radius: 10px;
--ra-radius-lg: 14px;
--ra-btn: linear-gradient(180deg, #6D7AD0, #5A67BB);
--ra-mono: "JetBrains Mono", Consolas, "Courier New", monospace;
background: var(--ra-ground);
color: var(--ra-text);
font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Bug 8: the WP Live Chat bubble floats bottom-right on phones. Leave room
under the last button so nothing sits beneath it. */
@media (max-width: 767px) {
.al-account { padding-bottom: 88px; }
}
/* =============================================================================
1. LOGGED OUT: sign in / sign up / reset password (look A, one screen)
Pairs with my-account-auth.php. Footer removal is PHP (see HANDOFF.md).
========================================================================== */
/* One narrow centred column; the side mascot image is gone. */
.al-account .al-auth-layout__inner {
display: block;
max-width: 400px;
margin: 0 auto;
padding: 34px 20px 48px;
}
@media (min-width: 768px) {
.al-account .al-auth-layout__inner { padding: 64px 20px 80px; }
}
.al-account .al-auth-layout__form-column,
.al-account .al-auth-layout__form-column--wide { width: 100%; max-width: none; }
.al-account .al-auth-layout__mascot-image { display: none !important; }
/* The Login / Sign up tab row is replaced by in-pane links in the new markup.
Hidden rather than deleted, in case existing JS still binds to it. */
.al-account .al-auth-layout .al-account__tabs { display: none; }
.al-account .al-signin__brand { display: flex; justify-content: center; margin: 0 0 18px; }
.al-account .al-signin__brand img { width: 52px; height: 52px; border-radius: 14px; display: block; }
.al-account .al-signin__title {
margin: 0 0 6px;
font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em;
text-align: center; color: var(--ra-text);
}
.al-account .al-signin__sub {
margin: 0 0 22px;
font-size: 14px; line-height: 1.5; text-align: center; color: var(--ra-muted);
}
/* "Or" divider */
.al-account .al-signin__or {
display: flex; align-items: center; gap: 12px;
margin: 22px 0; font-size: 12.5px; color: var(--ra-muted);
}
.al-account .al-signin__or::before,
.al-account .al-signin__or::after { content: ""; flex: 1; border-top: 1px solid var(--ra-border); }
/* Fields: existing Alune classes, restyled */
.al-account .al-auth-form__field { margin: 0 0 14px; }
.al-account .al-auth-form__label {
display: block; margin: 0 0 6px;
font-size: 13px; font-weight: 600; color: var(--ra-text);
}
.al-account .al-auth-form__label .required { display: none; } /* every field is required; the stars were noise */
.al-account .al-auth-form__input {
width: 100%; height: 50px;
padding: 0 14px;
border: 1px solid var(--ra-border); border-radius: var(--ra-radius);
background: var(--ra-surface); color: var(--ra-text);
font-size: 15px;
}
.al-account .al-auth-form__input:focus {
outline: none;
border-color: var(--ra-accent);
box-shadow: 0 0 0 3px rgba(98, 114, 195, .18);
}
/* Password field with an eye toggle inside it */
.al-account .al-signin__password { position: relative; }
.al-account .al-signin__password .al-auth-form__input { padding-right: 52px; }
.al-account .al-signin__eye {
position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px; padding: 0; margin: 0;
display: grid; place-items: center;
border: 0; border-radius: 8px; background: transparent; box-shadow: none;
color: var(--ra-muted); cursor: pointer;
}
.al-account .al-signin__eye:focus-visible { outline: 2px solid var(--ra-accent); outline-offset: 1px; }
.al-account .al-signin__eye svg { width: 20px; height: 20px; }
.al-account .al-auth-form__meta {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
margin: 4px 0 18px; font-size: 13.5px;
}
.al-account .al-auth-form__remember { display: flex; align-items: center; gap: 8px; color: var(--ra-text); }
.al-account .al-auth-form__remember input { width: 18px; height: 18px; accent-color: var(--ra-accent); margin: 0; }
.al-account .al-auth-form__forgot { color: var(--ra-accent); font-weight: 600; text-decoration: none; }
.al-account .al-auth-form__submit {
width: 100%; height: 50px;
border: 0; border-radius: var(--ra-radius);
background: var(--ra-btn); color: #fff;
font-size: 15px; font-weight: 700; cursor: pointer;
}
.al-account .al-auth-form__submit:focus-visible { outline: 2px solid var(--ra-accent-ink); outline-offset: 2px; }
.al-account .al-signin__switch {
margin: 20px 0 0; text-align: center; font-size: 14px; color: var(--ra-muted);
}
.al-account .al-signin__switch button,
.al-account .al-signin__switch a {
padding: 0; border: 0; background: none; box-shadow: none;
color: var(--ra-accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.al-account .al-signin__legal { margin: 18px 0 0; text-align: center; font-size: 12px; color: var(--ra-muted); }
.al-account .al-signin__legal a { color: var(--ra-accent); font-weight: 600; text-decoration: none; }
/* Google button from Nextend Social Login, styled to Google's light spec:
#FFFFFF fill, 1px #747775 stroke, #1F1F1F text, full-colour G on white.
Class names are Nextend's default output. Confirm on the render; its inline
styles need the !important. */
.al-account .al-signin__social .nsl-container { display: block; margin: 0; padding: 0; }
.al-account .al-signin__social .nsl-container-buttons { display: grid !important; gap: 10px; padding: 0 !important; }
.al-account .al-signin__social .nsl-container-buttons a { display: block; text-decoration: none; margin: 0 !important; }
.al-account .al-signin__social .nsl-button {
display: flex !important; align-items: center; justify-content: center; gap: 10px;
width: 100%; height: 48px; padding: 0 16px !important;
border: 1px solid #747775 !important; border-radius: var(--ra-radius) !important;
background: #FFFFFF !important; color: #1F1F1F !important; box-shadow: none !important;
}
.al-account .al-signin__social .nsl-button-svg-container { padding: 0 !important; display: flex; }
.al-account .al-signin__social .nsl-button-svg-container svg { width: 20px; height: 20px; }
.al-account .al-signin__social .nsl-button-label-container {
margin: 0 !important; padding: 0 !important;
font: 600 14.5px/1 Inter, -apple-system, "Segoe UI", Roboto, sans-serif !important;
color: #1F1F1F !important;
}
/* =============================================================================
2. LOGGED IN: header + menu (option 1, button grid on phones)
========================================================================== */
.al-account .al-account__container { max-width: 1200px; margin: 0 auto; padding: 22px 16px 0; }
@media (min-width: 768px) {
.al-account .al-account__container { padding: 36px 40px 60px; }
}
.al-account .al-account__title {
margin: 0; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--ra-text);
}
@media (min-width: 768px) { .al-account .al-account__title { font-size: 32px; } }
.al-account .al-account__subtitle { margin: 4px 0 18px; font-size: 14px; color: var(--ra-muted); }
/* Bug 1, desktop: one row of tabs, Log out pushed to the right. */
.al-account nav.al-account__tabs {
display: flex; flex-wrap: nowrap; gap: 6px;
margin: 0 0 24px; padding: 0;
border-bottom: 1px solid var(--ra-border);
overflow: visible;
}
.al-account nav.al-account__tabs .al-account__tab {
padding: 10px 14px; margin-bottom: -1px;
border: 0; border-bottom: 2px solid transparent; border-radius: 0;
background: none;
font-size: 14px; font-weight: 600; white-space: nowrap;
color: var(--ra-muted); text-decoration: none;
}
.al-account nav.al-account__tabs .al-account__tab--active { color: var(--ra-accent); border-bottom-color: var(--ra-accent); }
.al-account nav.al-account__tabs .al-account__tab[href*="customer-logout"] { margin-left: auto; }
/* Bug 1, phones: six sections in a 3x2 grid, all visible, no sideways
scroll. Log out becomes a small right-aligned link so it isn't tapped by
accident. */
@media (max-width: 767px) {
.al-account nav.al-account__tabs {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
margin: 0 0 18px; border-bottom: 0;
overflow: visible; white-space: normal;
}
.al-account nav.al-account__tabs .al-account__tab {
height: 40px; margin: 0; padding: 0 6px;
display: flex; align-items: center; justify-content: center; text-align: center;
border: 1px solid var(--ra-border); border-radius: var(--ra-radius);
background: var(--ra-surface); color: var(--ra-text);
font-size: 13px; line-height: 1.15; white-space: normal;
}
.al-account nav.al-account__tabs .al-account__tab--active {
background: var(--ra-accent); border-color: var(--ra-accent); color: #fff;
}
.al-account nav.al-account__tabs .al-account__tab[href*="customer-logout"] {
grid-column: 1 / -1; justify-self: end;
height: auto; margin: -2px 0 0; padding: 4px 0;
border: 0; background: none; color: var(--ra-muted); font-weight: 500;
}
}
/* =============================================================================
3. DASHBOARD
========================================================================== */
.al-account .al-account__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
@media (min-width: 768px) { .al-account .al-account__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.al-account .al-account__stat-card {
padding: 14px; border: 1px solid var(--ra-border); border-radius: 12px; background: var(--ra-surface);
}
.al-account .al-account__stat-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ra-muted); }
.al-account .al-account__stat-value { display: block; margin-top: 2px; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ra-text); }
.al-account .al-account__chart,
.al-account .al-account__quick-links {
padding: 18px; margin: 0 0 14px;
border: 1px solid var(--ra-border); border-radius: var(--ra-radius-lg); background: var(--ra-surface);
}
@media (min-width: 768px) {
.al-account .al-account__chart,
.al-account .al-account__quick-links { padding: 24px; }
}
.al-account .al-account__chart-title { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--ra-text); }
.al-account .al-account__chart-row { display: grid; grid-template-columns: 90px 1fr 44px; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 13px; }
.al-account .al-account__chart-label { color: var(--ra-muted); }
.al-account .al-account__chart-bar { height: 10px; border-radius: 5px; background: var(--ra-tint); overflow: hidden; }
.al-account .al-account__chart-fill { display: block; height: 100%; background: var(--ra-accent); }
.al-account .al-account__chart-value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.al-account .al-account__dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .al-account .al-account__dash-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.al-account .al-account__dash-card {
display: block; padding: 14px;
border: 1px solid var(--ra-border); border-radius: 12px; background: var(--ra-surface);
text-decoration: none; color: var(--ra-text);
}
.al-account .al-account__dash-label { display: block; font-size: 14px; font-weight: 700; }
.al-account .al-account__dash-value { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ra-muted); }
/* =============================================================================
4. SHARED CONTENT: panels, buttons, inputs
========================================================================== */
/* Bug 6 root cause: `.al-account__content button` paints every button in
the content area (padding 9px 16px, accent fill), including WooCommerce's
password eye. Style buttons by role instead. Tech Developer: narrow or
remove that generic rule in my_account.css. The rules below also out-rank
it as a fallback. */
.al-account .al-account__content .button,
.al-account .al-account__content button[type="submit"] {
display: inline-flex; align-items: center; justify-content: center;
height: 44px; padding: 0 18px;
border: 0; border-radius: var(--ra-radius);
background: var(--ra-btn); color: #fff;
font-size: 14px; font-weight: 700; text-decoration: none; line-height: 1;
}
.al-account .al-account__content .input-text,
.al-account .al-account__content select {
width: 100%; height: 50px; padding: 0 14px;
border: 1px solid var(--ra-border); border-radius: var(--ra-radius);
background: var(--ra-surface); color: var(--ra-text); font-size: 15px;
}
.al-account .al-account__content h2 { margin: 0 0 14px; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--ra-text); }
/* =============================================================================
5. ORDERS LIST: table on desktop, cards on phones
WooCommerce's shop_table_responsive already writes data-title on each cell.
========================================================================== */
.al-account .woocommerce-orders-table {
width: 100%; border-collapse: collapse;
border: 1px solid var(--ra-border); border-radius: var(--ra-radius-lg); background: var(--ra-surface);
overflow: hidden;
}
.al-account .woocommerce-orders-table th,
.al-account .woocommerce-orders-table td { padding: 14px 16px; border-bottom: 1px solid var(--ra-border); text-align: left; vertical-align: middle; font-size: 14px; }
.al-account .woocommerce-orders-table thead th { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ra-muted); }
.al-account .woocommerce-orders-table tbody tr:last-child > * { border-bottom: 0; }
.al-account .woocommerce-orders-table__cell-order-actions { text-align: right; }
@media (max-width: 767px) {
.al-account .woocommerce-orders-table { border: 0; background: none; }
.al-account .woocommerce-orders-table thead { display: none; }
.al-account .woocommerce-orders-table tbody tr {
display: grid; gap: 6px; padding: 14px; margin: 0 0 10px;
border: 1px solid var(--ra-border); border-radius: 12px; background: var(--ra-surface);
}
.al-account .woocommerce-orders-table tbody th,
.al-account .woocommerce-orders-table tbody td {
display: flex; justify-content: space-between; gap: 12px;
padding: 0; border: 0; text-align: right;
}
.al-account .woocommerce-orders-table tbody [data-title]::before {
content: attr(data-title); color: var(--ra-muted); font-weight: 600; text-align: left;
}
.al-account .woocommerce-orders-table__cell-order-actions { display: block !important; margin-top: 6px; }
.al-account .woocommerce-orders-table__cell-order-actions::before { content: none !important; }
.al-account .woocommerce-orders-table__cell-order-actions .button { width: 100%; }
}
/* =============================================================================
6. ORDER VIEW
========================================================================== */
.al-account .woocommerce-order-details,
.al-account .woocommerce-customer-details {
padding: 18px; margin: 0 0 14px;
border: 1px solid var(--ra-border); border-radius: var(--ra-radius-lg); background: var(--ra-surface);
}
@media (min-width: 768px) {
.al-account .woocommerce-order-details,
.al-account .woocommerce-customer-details { padding: 24px; }
}
.al-account .order_details { width: 100%; border-collapse: collapse; font-size: 14px; }
.al-account .order_details th,
.al-account .order_details td { padding: 12px 0; border-bottom: 1px solid var(--ra-border); vertical-align: top; }
.al-account .order_details thead th { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ra-muted); }
.al-account .order_details .product-total,
.al-account .order_details tfoot td { text-align: right; white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .al-account .order_details tfoot td .woocommerce-Price-amount { white-space: nowrap; }
/* Bug 7: Shoptimizer's `.order_details tfoot` stacks label over value on
phones. Keep each total as one row: label left, amount right. */
.al-account .order_details tfoot tr { display: table-row !important; }
.al-account .order_details tfoot th,
.al-account .order_details tfoot td { display: table-cell !important; width: auto !important; border-bottom: 0; border-top: 1px solid var(--ra-border); }
.al-account .order_details tfoot th { text-align: left; font-weight: 600; }
.al-account .order_details tfoot tr:last-child th,
.al-account .order_details tfoot tr:last-child td { font-weight: 800; }
/* Bug 2: "Order again" touched the "Your license key(s)" heading (1px gap,
Shoptimizer's `p.order-again`). The button gets its own row with room
below it. */
.al-account .woocommerce-order-details p.order-again { margin: 16px 0 26px !important; clear: both; }
@media (max-width: 767px) {
.al-account .woocommerce-order-details p.order-again .button { width: 100%; }
}
/* Bug 3: License Manager right-aligns the key
(`.lmfwc-myaccount-license-key` in its assets/css/main.css). Fallback: left,
full width, monospace. The labelled-rows panel in my-account-keyblock.php
replaces this output when built. */
.al-account .lmfwc-myaccount-license-key {
display: block; text-align: left !important;
font-family: var(--ra-mono); font-size: 14.5px; line-height: 1.45;
color: var(--ra-text); word-break: break-all;
}
.al-account .woocommerce-order-details .shop_table td:has(> .lmfwc-myaccount-license-key) { text-align: left !important; }
/* =============================================================================
7. LICENSE KEYS PAGE (bug 4)
========================================================================== */
/* The product name was a 100px-tall heading link. Normal size now. */
.al-account .al-account__content > h3.product-name {
margin: 0; padding: 12px 14px;
border: 1px solid var(--ra-border); border-bottom: 0; border-radius: 12px 12px 0 0;
background: #F4F5FC;
font-size: 13.5px; line-height: 1.35; font-weight: 600;
}
.al-account .al-account__content > h3.product-name a { color: var(--ra-text); text-decoration: none; }
.al-account .al-account__content > h3.product-name .description { display: block; font-weight: 500; color: var(--ra-muted); }
.al-account .al-account__content > h3.product-name + table {
width: 100%; margin: 0 0 16px; border-collapse: separate; border-spacing: 0;
border: 1px solid var(--ra-border); border-radius: 0 0 12px 12px; background: var(--ra-surface); overflow: hidden;
}
.al-account .al-account__content > h3.product-name + table thead { display: none; }
.al-account .al-account__content > h3.product-name + table tbody tr { display: grid; }
.al-account .al-account__content > h3.product-name + table td { display: block; padding: 12px 14px; border-top: 1px solid var(--ra-border); text-align: left; }
.al-account .al-account__content > h3.product-name + table td:first-child { border-top: 0; }
.al-account .al-account__content > h3.product-name + table td::before { content: none !important; }
/* "Activation status 0 / ∞" is License Manager's software-licence counter
and means nothing for a game account. Hidden. */
.al-account .al-account__content > h3.product-name + table td:nth-child(2) { display: none; }
/* "Never expires" as a small tag */
.al-account .al-account__content > h3.product-name + table td:nth-child(3) {
justify-self: start; margin: 12px 14px 0; padding: 3px 9px;
border: 0; border-radius: 999px; background: var(--ra-tint); color: var(--ra-accent-ink);
font-size: 12.5px; font-weight: 700;
}
.al-account .al-account__content > h3.product-name + table td.license-key-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.al-account .al-account__content > h3.product-name + table td.license-key-actions .button {
height: 40px; background: var(--ra-surface); color: var(--ra-text); border: 1px solid var(--ra-border);
}
/* =============================================================================
8. DOWNLOADS EMPTY STATE (bug 5)
========================================================================== */
.al-account .al-account__content > .woocommerce-info {
display: flex; flex-direction: column; align-items: center; gap: 16px;
padding: 28px 16px; margin: 0;
border: 1px solid var(--ra-border); border-radius: var(--ra-radius-lg);
background: var(--ra-surface); color: var(--ra-muted);
text-align: center; font-size: 14px;
}
.al-account .al-account__content > .woocommerce-info::before { position: static; margin: 0; }
.al-account .al-account__content > .woocommerce-info .button { float: none; margin: 0; }
/* =============================================================================
9. ADDRESS + ACCOUNT DETAILS
========================================================================== */
.al-account .woocommerce-Address,
.al-account .woocommerce-EditAccountForm {
padding: 18px;
border: 1px solid var(--ra-border); border-radius: var(--ra-radius-lg); background: var(--ra-surface);
}
@media (min-width: 768px) {
.al-account .woocommerce-Address,
.al-account .woocommerce-EditAccountForm { padding: 24px; }
}
.al-account .woocommerce-Address-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 10px; }
.al-account .woocommerce-Address-title h2 { margin: 0; }
.al-account .woocommerce-Address-title .edit { font-weight: 600; color: var(--ra-accent); text-decoration: none; }
.al-account .woocommerce-Address address { font-style: normal; font-size: 14px; line-height: 1.6; }
.al-account .woocommerce-EditAccountForm .form-row { margin: 0 0 14px; padding: 0; }
.al-account .woocommerce-EditAccountForm label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.al-account .woocommerce-EditAccountForm fieldset { margin: 20px 0 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--ra-border); }
.al-account .woocommerce-EditAccountForm legend { padding: 0; font-size: 18px; font-weight: 700; }
.al-account .woocommerce-EditAccountForm em { font-style: normal; font-size: 12.5px; color: var(--ra-muted); }
@media (max-width: 767px) {
.al-account .woocommerce-EditAccountForm .form-row-first,
.al-account .woocommerce-EditAccountForm .form-row-last { float: none; width: 100%; }
}
/* Bug 6: WooCommerce's own password eye (`.show-password-input`) is a
transparent icon button that draws its own eye. Undo the generic content
button rule so it sits inside the 50px input, vertically centred. */
.al-account .woocommerce-EditAccountForm .password-input { position: relative; display: block; }
.al-account .woocommerce-EditAccountForm .password-input .input-text { padding-right: 52px; }
.al-account .al-account__content button.show-password-input {
position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px; min-width: 0; padding: 0; margin: 0;
border: 0; border-radius: 8px; background: transparent !important; box-shadow: none;
color: var(--ra-muted); line-height: 1;
}
.al-account .al-account__content button.show-password-input:focus-visible { outline: 2px solid var(--ra-accent); outline-offset: 1px; }
.al-account .woocommerce-EditAccountForm button[name="save_account_details"] { height: 50px; padding: 0 28px; }
@media (max-width: 767px) {
.al-account .woocommerce-EditAccountForm button[name="save_account_details"] { width: 100%; }
}
/* =============================================================================
10. LOGIN DETAILS PANEL (my-account key block, order view + License keys page)
========================================================================== */
.al-account .al-keyblk { border: 1px solid var(--al-border, #E3E7F3); border-radius: 12px; overflow: hidden; background: var(--al-surface, #FFF); margin: 0 0 14px; }
.al-account .al-keyblk__head { padding: 12px 14px; background: #F4F5FC; border-bottom: 1px solid var(--al-border, #E3E7F3); font-size: 13.5px; line-height: 1.35; font-weight: 600; color: var(--al-text, #1B2035); }
.al-account .al-keyblk__variation { display: block; margin-top: 2px; font-weight: 500; color: var(--al-muted, #767E95); }
.al-account .al-keyblk__row { padding: 10px 14px; border-top: 1px solid var(--al-border, #E3E7F3); }
.al-account .al-keyblk__head + .al-keyblk__row { border-top: 0; }
.al-account .al-keyblk__label { display: block; font-size: 12px; font-weight: 600; color: var(--al-muted, #767E95); }
.al-account .al-keyblk__value { display: block; margin-top: 2px; padding: 0; background: none; font: 500 14.5px/1.45 "JetBrains Mono", Consolas, monospace; color: var(--al-text, #1B2035); word-break: break-all; text-align: left; }
.al-account .al-keyblk__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--al-border, #E3E7F3); font-size: 12.5px; color: var(--al-muted, #767E95); }
.al-account .al-keyblk__tag { padding: 3px 9px; border-radius: 999px; background: #EEF0FA; color: var(--al-accent-ink, #4D5AA1); font-weight: 700; }
.al-account .al-keyblk__link { margin-left: auto; font-weight: 600; color: var(--al-accent, #6272C3); text-decoration: none; }
/* =============================================================================
11. SPECIFICITY OVERRIDES (Tech Developer, found measuring the build)
The original guest card rules use `.al-account .al-account__guest ...` and
`.al-account__guest .al-auth-form button`, which out-rank the two-class
selectors above. Measured before this block:
- desktop: a 16px/320px grid, the form column 50px wide, page 2367px tall
- the eye toggle stretched to a full-width gradient button over the input
Same or higher specificity here, placed last, so look A (one plain 400px
column) holds at every width.
========================================================================== */
.al-account .al-account__guest .al-auth-layout__inner {
display: block; grid-template-columns: none; gap: 0;
width: 100%; max-width: 400px; margin: 0 auto;
padding: 34px 20px 48px; box-sizing: border-box;
}
@media (min-width: 768px) {
.al-account .al-account__guest .al-auth-layout__inner { padding: 64px 20px 80px; }
}
.al-account .al-account__guest .al-auth-layout__form-column,
.al-account .al-account__guest .al-auth-layout__form-column--wide {
padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.al-account .al-account__guest .al-auth-form__input {
height: 50px; min-height: 50px; padding: 0 14px;
font-size: 15px; color: var(--ra-text); box-sizing: border-box;
}
.al-account .al-account__guest .al-signin__password .al-auth-form__input { padding-right: 52px; }
.al-account .al-account__guest .al-auth-form .al-auth-form__submit {
height: 50px; min-height: 50px; padding: 0 18px; box-shadow: none;
}
.al-account .al-account__guest .al-auth-form .al-auth-form__submit:hover { transform: none; box-shadow: none; }
.al-account .al-account__guest .al-auth-form .al-signin__eye,
.al-account .al-account__guest .al-auth-form .al-signin__eye:hover {
position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px; min-height: 0; padding: 0; margin: 0;
display: grid; place-items: center;
border: 0; border-radius: 8px; background: transparent; box-shadow: none;
color: var(--ra-muted); cursor: pointer;
}
/* Account details on desktop: first and last name were 446px and 566px wide. */
@media (min-width: 768px) {
.al-account .woocommerce-EditAccountForm .form-row-first { float: left; width: calc(50% - 8px); }
.al-account .woocommerce-EditAccountForm .form-row-last { float: right; width: calc(50% - 8px); }
.al-account .woocommerce-EditAccountForm .form-row-wide,
.al-account .woocommerce-EditAccountForm .clear { clear: both; }
}
/* =============================================================================
12. Review fixes, Frontend Design, 2026-09-15
Found checking Tech Developer's live build and myacc2 renders against the
approved board (https://claude.ai/artifact/CkGhfQY7oWHNQtvWefrt7m).
Append after section 11 in my_account.css. The selectors carry the extra
.al-account__content class because Alune's own rules out-ranked two-class
selectors last time.
========================================================================== */
/* A. Full-page ground (board look A).
The #F5F6FB ground sits on .al-account, which is inside Shoptimizer's
.col-full (15px side padding). Measured at 390px: ground 360px wide at x=15
with white gutters, and a white band under it on the short sign-in page.
Same at desktop. Paint the page instead, and let the block go transparent. */
body.woocommerce-account .site-content { background: #F5F6FB; }
body.woocommerce-account:not(.logged-in) { background: #F5F6FB; } /* sign-in pages have no footer, so the body shows below the form */
body.woocommerce-account .al-account { background: transparent; }
@media (max-width: 767px) {
/* B. Orders list cards.
The Total cell is: $29.99 USD for 1 item.
With display:flex + justify-content:space-between, the label, the amount
and the loose text node became three flex items ("TOTAL $29.99 USD for 1 item").
Block + floated label keeps the value together on the right. Also
Shoptimizer uppercases some labels and not others ("Order" vs "DATE"),
so all labels are set in sentence case here. */
.al-account .al-account__content .woocommerce-orders-table tbody tr { display: grid; gap: 8px; }
.al-account .al-account__content .woocommerce-orders-table tbody th,
.al-account .al-account__content .woocommerce-orders-table tbody td {
display: block; text-align: right; padding: 0; border: 0;
}
.al-account .al-account__content .woocommerce-orders-table tbody [data-title]::before {
float: left; margin-right: 12px;
text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--ra-muted);
}
.al-account .al-account__content .woocommerce-orders-table__cell-order-actions { text-align: left; margin-top: 6px; }
/* C. Order view product row. REVISED after the first build.
Original bug: product-name and product-total were each 189px blocks, so the
price dropped under the name. The first fix (grid on the tr) didn't work:
a grid row inside display:table only takes its content's width (tr 189px of
a 290px table), so the price sat right after the name. Tested in the
render: keep real table cells, let the name take the width, and the price
lands on the right edge (x238-340, same edge as Subtotal and Total). */
.al-account .al-account__content .order_details tbody tr { display: table-row; }
.al-account .al-account__content .order_details tbody td {
display: table-cell; vertical-align: top; padding: 12px 0; border-bottom: 1px solid var(--ra-border);
}
.al-account .al-account__content .order_details tbody td.product-name { width: 100% !important; padding-right: 12px; }
.al-account .al-account__content .order_details tbody td.product-total { width: auto !important; text-align: right; white-space: nowrap; }
}
/* =============================================================================
13. Login detail values break after the @ (Tech Developer, 2026-09-15)
License Manager passes the order view through wp_kses_post(), which strips
but keeps . alune-keyblock.php splits an email value into
two spans with no whitespace between them, so copying gives the exact text.
========================================================================== */
.al-account .al-keyblk__value .al-keyblk__part { display: inline-block; }
/* =============================================================================
14. Account details "Password change" heading (Tech Developer, 2026-09-15)
Victor's phone shot: the heading sat outside the card. Shoptimizer's
`fieldset legend` rule gives it margin-left:-30px and 60px of extra width,
and as a fieldset's first legend the browser draws it on the top border.
Measured before: legend x20 vs card content x49 at 390px, x77 vs x106 at
1280px. Floating the legend takes it out of the border, so it sits under
the divider in normal flow. The rows after it clear it.
========================================================================== */
.al-account .al-account__content .woocommerce-EditAccountForm fieldset legend {
float: left; width: 100%; box-sizing: border-box;
margin: 0 0 14px; padding: 0;
font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ra-text);
}
.al-account .al-account__content .woocommerce-EditAccountForm fieldset > *:not(legend) { clear: both; }
/* =============================================================================
15. Billing / shipping address edit form (Tech Developer, 2026-09-15)
Swept after Victor's Account details shot. The address form had no card
(bare on the page ground, unlike Account details), first/last name were
468px and 593px at desktop, and Save was a 44px stock button.
Same card, row widths and button as the Account details form.
========================================================================== */
.al-account .al-account__content form:has(> .woocommerce-address-fields) {
padding: 18px; border: 1px solid var(--ra-border); border-radius: var(--ra-radius-lg); background: var(--ra-surface);
}
.al-account .al-account__content form:has(> .woocommerce-address-fields) > h2 { margin: 0 0 14px; }
.al-account .al-account__content .woocommerce-address-fields .form-row { margin: 0 0 14px; padding: 0; }
.al-account .al-account__content .woocommerce-address-fields label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.al-account .al-account__content .woocommerce-address-fields button[name="save_address"] { height: 50px; padding: 0 28px; }
@media (min-width: 768px) {
.al-account .al-account__content form:has(> .woocommerce-address-fields) { padding: 24px; }
.al-account .al-account__content .woocommerce-address-fields .form-row-first { float: left; width: calc(50% - 8px); }
.al-account .al-account__content .woocommerce-address-fields .form-row-last { float: right; width: calc(50% - 8px); }
.al-account .al-account__content .woocommerce-address-fields .form-row-wide { clear: both; }
}
@media (max-width: 767px) {
.al-account .al-account__content .woocommerce-address-fields .form-row-first,
.al-account .al-account__content .woocommerce-address-fields .form-row-last { float: none; width: 100%; }
.al-account .al-account__content .woocommerce-address-fields button[name="save_address"] { width: 100%; }
}
/* =============================================================================
NO iOS ZOOM ON ACCOUNT FIELDS (Frontend Design, 2026-09-16)
Safari on iPhone zooms the page into any field whose text is under 16px, and
the zoom shifts the layout sideways. Sign in, sign up, reset password, set a
new password, account details and addresses were all 15px or smaller, so the
first screen a customer meets zoomed the same way the boost chat did. 16px on
phones and tablets, same boxes; desktop keeps the design sizes.
========================================================================== */
@media (max-width: 1023px) {
.al-account .al-auth-form__input,
.al-account .al-account__guest input[type="text"],
.al-account .al-account__guest input[type="email"],
.al-account .al-account__guest input[type="password"],
.al-account .al-account__guest input[type="tel"] { font-size: 16px; }
.al-account .al-account__content .input-text,
.al-account .al-account__content input[type="text"],
.al-account .al-account__content input[type="email"],
.al-account .al-account__content input[type="password"],
.al-account .al-account__content input[type="tel"],
.al-account .al-account__content input[type="search"],
.al-account .al-account__content input[type="number"],
.al-account .al-account__content select,
.al-account .al-account__content textarea,
.al-account .woocommerce-EditAccountForm .input-text { font-size: 16px; }
}
/* Payment methods in Account details (Bob, 2026-09-27). Minified from design-handoff/my-account/account-details.css - edit that file. */
.al-acct{display: grid;gap: 14px}.al-acct__card{background: var(--ra-surface, #FFFFFF);border: 1px solid var(--ra-border, #E3E7F3);border-radius: var(--ra-radius-lg, 14px);padding: 18px}.al-acct .al-acct__card .woocommerce-EditAccountForm{padding: 0;border: 0;background: none}.al-acct .woocommerce-MyAccount-paymentMethods, .al-acct .woocommerce-MyAccount-paymentMethods tbody, .al-acct .woocommerce-MyAccount-paymentMethods tr, .al-acct .woocommerce-MyAccount-paymentMethods td{display: block;width: auto;border: 0;padding: 0}.al-acct .woocommerce-MyAccount-paymentMethods thead{display: none}.al-acct .woocommerce-MyAccount-paymentMethods tr.payment-method{display: grid;grid-template-columns: minmax(0, 1fr) auto;align-items: center;gap: 4px 12px;padding: 12px 0;border-bottom: 1px solid var(--ra-border, #E3E7F3)}.al-acct .woocommerce-MyAccount-paymentMethods tr.payment-method:last-child{border-bottom: 0;padding-bottom: 0}.al-acct .woocommerce-MyAccount-paymentMethods tr.payment-method:first-child{padding-top: 0}.al-acct .woocommerce-MyAccount-paymentMethods td.payment-method-method{grid-column: 1;font-size: 13.5px;font-weight: 600;color: var(--ra-text, #1B2035);overflow-wrap: anywhere}.al-acct .woocommerce-MyAccount-paymentMethods td.payment-method-expires{grid-column: 1;font-size: 11.5px;color: var(--ra-muted, #767E95);font-variant-numeric: tabular-nums}.al-acct .woocommerce-MyAccount-paymentMethods td.payment-method-actions{grid-column: 2;grid-row: 1 / span 2;display: flex;gap: 10px;align-items: center;justify-content: flex-end;flex-wrap: wrap;font-size: 0}.al-acct .woocommerce-MyAccount-paymentMethods td.payment-method-actions .button{min-height: 0;padding: 6px 2px;background: none;border: 0;border-radius: 0;font-size: 12px;font-weight: 700;color: var(--ra-accent-ink, #4D5AA1);box-shadow: none}.al-acct .woocommerce-MyAccount-paymentMethods td.payment-method-actions .button:hover{background: none;text-decoration: underline}.al-acct .woocommerce-MyAccount-paymentMethods td.payment-method-actions .button.delete{color: #B23B2E}.al-acct .woocommerce-MyAccount-paymentMethods td.payment-method-actions .button:focus-visible{outline: 2px solid var(--ra-accent-ink, #4D5AA1);outline-offset: 2px}.al-acct__card--pm .woocommerce-Message--info, .al-acct__card--pm .woocommerce-info{margin: 0;padding: 0;background: none;border: 0;color: var(--ra-muted, #767E95);font-size: 13px;line-height: 1.55}.al-acct__card--pm .woocommerce-Message--info::before, .al-acct__card--pm .woocommerce-info::before{content: none}.al-acct__card--pm > .button, .al-acct__card--pm a.button:not(.delete):not(.default){display: inline-flex;align-items: center;justify-content: center;min-height: 44px;margin-top: 14px;padding: 0 18px;border: 1px solid var(--ra-border, #E3E7F3);border-radius: var(--ra-radius, 10px);background: var(--ra-surface, #FFFFFF);color: var(--ra-accent-ink, #4D5AA1);font-size: 14px;font-weight: 700;box-shadow: none}.al-acct__card--pm > .button:hover{border-color: var(--ra-accent, #6272C3);background: none}@media (min-width: 1024px){.al-acct{grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);align-items: start;gap: 16px}}@media (max-width: 420px){.al-acct .woocommerce-MyAccount-paymentMethods tr.payment-method{grid-template-columns: minmax(0, 1fr)}.al-acct .woocommerce-MyAccount-paymentMethods td.payment-method-actions{grid-column: 1;grid-row: auto;justify-content: flex-start;margin-top: 4px}}.al-acct__card--pm .al-acct__empty strong{color:var(--ra-text,#1B2035)}