/* * My Account (login + dashboard). * * This is CSS-only on purpose: WooCommerce's own myaccount templates are * left untouched, so login, orders, addresses and password handling keep * working exactly as WooCommerce intends (and keep getting security fixes). * We only restyle the markup WooCommerce already outputs. * * Layout notes: * - Logged OUT -> the page contains #customer_login; we center it as a card. * - Logged IN -> nav + content sit side by side. WordPress puts a `logged-in` * class on , which is what we switch layouts on. * Colors come from the CSS custom properties in functions.php, never hardcoded. */ /* ---------- Page shell ---------- */ .woocommerce-account main.zlz-container { padding: 40px 24px 64px; } .woocommerce-account article > h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 22px; } /* ---------- WooCommerce notices ---------- */ .woocommerce-account .woocommerce-message, .woocommerce-account .woocommerce-error, .woocommerce-account .woocommerce-info { list-style: none; margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; font-size: 14px; } .woocommerce-account .woocommerce-info { background: #F1ECFC; color: #4A2C8F; } .woocommerce-account .woocommerce-error { background: #FDECEF; color: #9B1C33; } .woocommerce-account .woocommerce-message { background: #EAF7E9; color: #2E6B2B; } /* ---------- Forms (shared by login / register / account details) ---------- */ .woocommerce-account .woocommerce form .form-row, .woocommerce-account .woocommerce form .woocommerce-form-row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; } .woocommerce-account .woocommerce form label { font-size: 13px; font-weight: 600; color: #271C2C; } .woocommerce-account .woocommerce form .required { color: var(--zlz-primary); text-decoration: none; border: none; } .woocommerce-account .woocommerce form input[type="text"], .woocommerce-account .woocommerce form input[type="email"], .woocommerce-account .woocommerce form input[type="password"], .woocommerce-account .woocommerce form input[type="tel"], .woocommerce-account .woocommerce form input[type="number"], .woocommerce-account .woocommerce form select, .woocommerce-account .woocommerce form textarea { width: 100%; padding: 11px 13px; font-size: 14px; font-family: inherit; color: #271C2C; background: #FAF9FC; border: 1.5px solid #E5E1ED; border-radius: 10px; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .woocommerce-account .woocommerce form input:focus, .woocommerce-account .woocommerce form select:focus, .woocommerce-account .woocommerce form textarea:focus { outline: none; background: #FFFFFF; border-color: var(--zlz-primary); box-shadow: 0 0 0 3px rgba(123, 63, 228, 0.12); } /* WooCommerce's show/hide password eye sits inside the field wrapper */ .woocommerce-account .woocommerce form .password-input { display: block; position: relative; } .woocommerce-account .woocommerce form .show-password-input { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); cursor: pointer; } /* ---------- Buttons ---------- */ .woocommerce-account .woocommerce .button, .woocommerce-account .woocommerce button.button, .woocommerce-account .woocommerce input.button, .woocommerce-account .woocommerce a.button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; font-size: 14px; font-weight: 600; font-family: inherit; color: #FFFFFF; background: var(--zlz-primary); border: none; border-radius: 10px; cursor: pointer; transition: background 0.15s ease, transform 0.05s ease; } .woocommerce-account .woocommerce .button:hover, .woocommerce-account .woocommerce button.button:hover, .woocommerce-account .woocommerce input.button:hover, .woocommerce-account .woocommerce a.button:hover { background: var(--zlz-primary-dark); } .woocommerce-account .woocommerce .button:active { transform: translateY(1px); } /* ---------- Logged out: login / register card ---------- */ .woocommerce-account:not(.logged-in) #customer_login { display: grid; gap: 20px; max-width: 460px; margin: 0 auto; } .woocommerce-account:not(.logged-in) #customer_login > div { background: #FFFFFF; border: 1px solid #E5E1ED; border-radius: 18px; padding: 26px; box-shadow: 0 6px 26px rgba(31, 27, 46, 0.06); float: none; width: auto; } .woocommerce-account:not(.logged-in) #customer_login h2 { font-size: 20px; font-weight: 700; margin: 0 0 18px; } /* "Remember me" and the submit button share one .form-row in WooCommerce */ .woocommerce-account .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; margin: 2px 0 4px; cursor: pointer; } .woocommerce-account .woocommerce-form-login__rememberme input { width: 16px; height: 16px; accent-color: var(--zlz-primary); margin: 0; } .woocommerce-account .woocommerce-form-login__submit, .woocommerce-account .woocommerce-form-register__submit { width: 100%; } .woocommerce-account .woocommerce-LostPassword { margin: 14px 0 0; font-size: 13px; text-align: center; } .woocommerce-account .woocommerce-LostPassword a { color: var(--zlz-primary); font-weight: 600; } .woocommerce-account .woocommerce-LostPassword a:hover { text-decoration: underline; } .woocommerce-account .woocommerce-privacy-policy-text { font-size: 12px; color: #7A7290; line-height: 1.5; } /* ---------- Logged in: sidebar + content ---------- */ .woocommerce-account.logged-in .woocommerce { display: grid; grid-template-columns: 232px 1fr; gap: 28px; align-items: start; } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 8px; background: #F7F5FB; border: 1px solid #E5E1ED; border-radius: 16px; display: flex; flex-direction: column; gap: 2px; } .woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; color: #271C2C; transition: background 0.15s ease, color 0.15s ease; } .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: #EDE7F9; color: var(--zlz-primary); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--zlz-primary); color: #FFFFFF; } .woocommerce-account .woocommerce-MyAccount-content { background: #FFFFFF; border: 1px solid #E5E1ED; border-radius: 16px; padding: 24px; min-height: 300px; font-size: 14px; line-height: 1.65; } .woocommerce-account .woocommerce-MyAccount-content p { margin: 0 0 12px; } .woocommerce-account .woocommerce-MyAccount-content a:not(.button) { color: var(--zlz-primary); font-weight: 600; } .woocommerce-account .woocommerce-MyAccount-content h2, .woocommerce-account .woocommerce-MyAccount-content h3 { font-size: 18px; font-weight: 700; margin: 0 0 14px; } .woocommerce-account .woocommerce-MyAccount-content fieldset { border: 1px solid #E5E1ED; border-radius: 12px; padding: 16px; margin: 18px 0; } .woocommerce-account .woocommerce-MyAccount-content legend { font-size: 13px; font-weight: 700; padding: 0 6px; } /* ---------- Tables (orders, downloads) ---------- */ .woocommerce-account .woocommerce table.shop_table, .woocommerce-account .woocommerce table.woocommerce-orders-table { width: 100%; border-collapse: collapse; font-size: 14px; border: 1px solid #EFECF5; border-radius: 12px; overflow: hidden; } .woocommerce-account .woocommerce table.shop_table th, .woocommerce-account .woocommerce table.shop_table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #EFECF5; } .woocommerce-account .woocommerce table.shop_table thead th { background: #F7F5FB; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: #7A7290; } .woocommerce-account .woocommerce table.shop_table tbody tr:last-child td { border-bottom: none; } /* ---------- Addresses ---------- */ .woocommerce-account .woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .woocommerce-account .woocommerce-Address { width: auto; float: none; background: #FAF9FC; border: 1px solid #E5E1ED; border-radius: 12px; padding: 18px; } .woocommerce-account .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .woocommerce-account .woocommerce-Address-title h3 { margin: 0; } .woocommerce-account .woocommerce-Address-title a { font-size: 13px; color: var(--zlz-primary); font-weight: 600; } /* ---------- Mobile ---------- */ @media (max-width: 768px) { .woocommerce-account main.zlz-container { padding: 28px 16px 48px; } .woocommerce-account article > h1 { font-size: 24px; } .woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; gap: 18px; } /* Nav becomes a horizontal scroller above the content */ .woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: row; overflow-x: auto; gap: 6px; } .woocommerce-account .woocommerce-MyAccount-navigation li a { white-space: nowrap; } .woocommerce-account .woocommerce-MyAccount-content { padding: 18px; } .woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; } }