/* ============================================================= ZYNIX BIOLAB — My Account (/my-account/) premium skin (bug 10, go-live) Arquivo isolado (não mexe em style.css) — mesmo padrão visual do .zynix-vlogin (login do vendedor): card branco, cantos 14px, sombra suave, acentos --zynix-rose-dark, Sora/Inter/IBM Plex Mono. Escopo: body.woocommerce-account (classe que o WooCommerce já injeta no das páginas de conta) — nenhum wrapper extra necessário. ============================================================= */ body.woocommerce-account #main { background: var(--zynix-offwhite); padding-top: 48px; padding-bottom: 64px; } body.woocommerce-account .woocommerce { max-width: 920px; margin: 0 auto; font-family: var(--font-body); color: var(--zynix-charcoal); } /* ---------- Login / Register (form-login.php) ---------- */ body.woocommerce-account #customer_login { display: flex; flex-wrap: wrap; gap: 28px; margin: 0; } body.woocommerce-account #customer_login .u-column1, body.woocommerce-account #customer_login .u-column2 { flex: 1 1 320px; background: #fff; border: 1px solid var(--zynix-rule); border-radius: 14px; padding: 36px 34px; box-shadow: 0 18px 50px rgba(31, 26, 23, 0.08); } body.woocommerce-account #customer_login h2 { font-family: var(--font-heading); font-weight: 500; font-size: 22px; color: var(--zynix-charcoal); margin: 0 0 20px; line-height: 1.2; } body.woocommerce-account #customer_login .u-column1 h2::before { content: 'Account Access'; display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zynix-rose-dark); margin: 0 0 12px; } /* Single-column fallback when registration is off */ body.woocommerce-account #customer_login:not(.col2-set) { display: block; } body.woocommerce-account #customer_login:not(.col2-set) form { background: #fff; border: 1px solid var(--zynix-rule); border-radius: 14px; padding: 36px 34px; box-shadow: 0 18px 50px rgba(31, 26, 23, 0.08); max-width: 460px; margin: 0 auto; } body.woocommerce-account .woocommerce-form-row label { display: block; font-size: 12px; font-weight: 600; color: #4B3F38; margin-bottom: 6px; } body.woocommerce-account .woocommerce-form-row .required { color: var(--zynix-rose-dark); } body.woocommerce-account .woocommerce-Input { width: 100%; padding: 12px 14px; border: 1px solid var(--zynix-rule-strong); border-radius: 8px; font-size: 14px; box-sizing: border-box; background: #fff; font-family: var(--font-body); } body.woocommerce-account .woocommerce-Input:focus { outline: none; border-color: var(--zynix-rose-dark); } body.woocommerce-account .woocommerce-form-row { margin-bottom: 16px; } body.woocommerce-account .woocommerce-form-login__rememberme { font-weight: 400; font-size: 13px; color: var(--zynix-gray); } body.woocommerce-account .woocommerce-button, body.woocommerce-account .woocommerce-Button { width: 100%; background: var(--zynix-rose-dark); color: #fff !important; border: none; padding: 13px; border-radius: 8px; font-family: var(--font-heading); font-size: 14px; letter-spacing: 0.04em; cursor: pointer; transition: background 0.15s ease; } body.woocommerce-account .woocommerce-button:hover, body.woocommerce-account .woocommerce-Button:hover { background: #a56b62; } body.woocommerce-account .woocommerce-LostPassword { margin-top: 16px; font-size: 12.5px; text-align: center; } body.woocommerce-account .woocommerce-LostPassword a { color: var(--zynix-rose-dark); text-decoration: none; } /* ---------- Notices / errors ---------- */ body.woocommerce-account .woocommerce-error, body.woocommerce-account .woocommerce-message, body.woocommerce-account .woocommerce-info { background: #F4E0E0; border: 1px solid #E0B7B7; color: #7A2222; border-top: none; border-radius: 6px; padding: 14px 16px; font-size: 13px; list-style: none; margin: 0 0 24px; } body.woocommerce-account .woocommerce-message { background: var(--zynix-nude); border-color: var(--zynix-rule-strong); color: var(--zynix-charcoal); } body.woocommerce-account .woocommerce-error::before, body.woocommerce-account .woocommerce-message::before, body.woocommerce-account .woocommerce-info::before { display: none; } /* ---------- Logged-in shell: nav + content ---------- */ body.woocommerce-account .woocommerce-MyAccount-navigation { background: #fff; border: 1px solid var(--zynix-rule); border-radius: 14px; padding: 12px; box-shadow: 0 10px 30px rgba(31, 26, 23, 0.06); } body.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; } body.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--zynix-rule); } body.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; } body.woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: 12px 14px; font-family: var(--font-heading); font-size: 13px; color: var(--zynix-gray); text-decoration: none; border-radius: 8px; } body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, body.woocommerce-account .woocommerce-MyAccount-navigation a[aria-current="page"] { background: var(--zynix-nude); color: var(--zynix-rose-dark); } body.woocommerce-account .woocommerce-MyAccount-navigation a:hover { color: var(--zynix-rose-dark); } body.woocommerce-account .woocommerce-MyAccount-content { background: #fff; border: 1px solid var(--zynix-rule); border-radius: 14px; padding: 32px; box-shadow: 0 10px 30px rgba(31, 26, 23, 0.06); } /* ---------- Orders table ---------- */ body.woocommerce-account .woocommerce-orders-table { width: 100%; border-collapse: collapse; font-size: 13px; } body.woocommerce-account .woocommerce-orders-table__header { text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zynix-gray); padding: 10px 12px; border-bottom: 1px solid var(--zynix-rule-strong); } body.woocommerce-account .woocommerce-orders-table__cell { padding: 14px 12px; border-bottom: 1px solid var(--zynix-rule); } body.woocommerce-account .woocommerce-orders-table__cell-order-status mark { background: var(--zynix-nude); color: var(--zynix-charcoal); padding: 3px 8px; border-radius: 20px; font-size: 11px; } /* ---------- Account details / addresses forms ---------- */ body.woocommerce-account .woocommerce-address-fields .woocommerce-Input, body.woocommerce-account form.edit-account .woocommerce-Input { width: 100%; } body.woocommerce-account .woocommerce-MyAccount-content h3 { font-family: var(--font-heading); font-weight: 500; color: var(--zynix-charcoal); } @media (max-width: 782px) { body.woocommerce-account #customer_login .u-column1, body.woocommerce-account #customer_login .u-column2 { padding: 26px 22px; } }