/* ========================================================= MY ACCOUNT — LOGIN / REGISTER ========================================================= */ /* Toggle behavior: show ONE column at a time */ .woocommerce-account #customer_login{ position:relative; display:flex; justify-content:center; } .woocommerce-account #customer_login .u-column1, .woocommerce-account #customer_login .u-column2{ flex:0 1 560px; max-width:560px; width:100%; margin:24px auto; } .woocommerce-account #customer_login:not(.mode-register) .u-column2{ display:none; } .woocommerce-account #customer_login.mode-register .u-column1{ display:none; } /* Hide the old toggle + footnote (we use inline links instead) */ .myacc-toggle, .myacc-footnote{ display:none !important; } /* Lost password + Register row */ .woocommerce-form-login .woocommerce-LostPassword{ float:none !important; display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; margin:12px 0 0; padding-left:5px; box-sizing:border-box; } .woocommerce-form-login a.myacc-inline-register{ margin-left:16px; font-weight:600; text-decoration:underline; } /* Register view: inline “Log in” under the button */ .myacc-register-swap{ text-align:center; margin-top:14px; color:#666; font-size:16px; } .myacc-register-swap .myacc-inline-login{ margin-left:6px; font-weight:600; text-decoration:underline; cursor:pointer; } /* Remove inner panel borders / fills */ .woocommerce-account form.login, .woocommerce-account form.register, .woocommerce-account .woocommerce form.login, .woocommerce-account .woocommerce form.register, .woocommerce-account .woocommerce form.checkout_coupon{ border:0 !important; box-shadow:none !important; background:transparent !important; } /* Brand font */ .woocommerce-account{ font-family:"Archivo", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; } /* Clickable colors */ .woocommerce-account a, .woocommerce-account [role="button"], .woocommerce-account .button, .woocommerce-account button:not(.components-button), .woocommerce-account input[type="submit"], .woocommerce-account input[type="button"], .woocommerce-account input[type="reset"]{ color:#233F2E; } .woocommerce-account a:hover{ color:#FAA432; } /* CTA buttons (exclude password-eye) */ .woocommerce-account form .button, .woocommerce-account form button:not(.components-button):not(.show-password-input), .woocommerce-account form input[type="submit"]{ display:flex; align-items:center; justify-content:center; width:100%; height:54px; text-align:center; font-weight:600; border:0; border-radius:4px; background:#233F2E; color:#fff; transition:background-color .15s ease, border-color .15s ease, transform .02s ease-in-out; } .woocommerce-account form .button:hover, .woocommerce-account form button:not(.components-button):not(.show-password-input):hover, .woocommerce-account form input[type="submit"]:hover{ background:#FAA432; color:#111; } .woocommerce-account form .button:active, .woocommerce-account form button:not(.components-button):not(.show-password-input):active, .woocommerce-account form input[type="submit"]:active{ transform:translateY(1px); } /* Password eye stays neutral */ .woocommerce-account form .show-password-input{ background:transparent !important; border:0 !important; box-shadow:none !important; color:inherit !important; padding:0 !important; line-height:1 !important; } /* Mobile spacing for the card */ @media (max-width:480px){ .woocommerce-account #customer_login .u-column1, .woocommerce-account #customer_login .u-column2{ padding:24px 0 !important; margin:16px auto; } } /* ========================================================= MY ACCOUNT — DASHBOARD LAYOUT + NAV (LOGGED IN ONLY) ========================================================= */ /* Grid only when logged in */ body.logged-in .woocommerce-account .woocommerce{ --brand:#233F2E; --brand-hover:#FAA432; --muted:#777; --nav-w:280px; max-width:1100px; margin:0 auto; padding:12px 16px; display:grid !important; gap:40px; grid-template-columns:var(--nav-w) 1fr; grid-template-rows:auto 1fr; align-items:start; } @media (min-width:1024px){ body.logged-in .woocommerce-account .woocommerce{ max-width:1360px; --nav-w:240px; gap:56px; } } /* Logged out (login/register) — explicitly cancel any grid */ body:not(.logged-in) .woocommerce-account .woocommerce{ display:block !important; grid-template-columns:initial !important; grid-template-rows:initial !important; gap:0 !important; max-width:680px; width:100%; margin:0 auto; padding:12px 16px; } /* Hello block + nav + content placement */ .myacc-sidebar-user{ grid-column:1; grid-row:1; display:flex; align-items:center; gap:12px; margin:0 0 14px; } .myacc-avatar{ width:48px; height:48px; border-radius:50%; display:block; } .woocommerce-MyAccount-navigation{ grid-column:1; grid-row:2; } .woocommerce-MyAccount-content{ grid-column:2; grid-row:1 / span 2; align-self:start; margin-top:0; } /* Nav items + icons */ .woocommerce-MyAccount-navigation ul{ margin:0; padding:0; list-style:none; } .woocommerce-MyAccount-navigation li{ margin:0 0 14px; } .woocommerce-MyAccount-navigation a{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 0; color:#111; text-decoration:none; white-space:nowrap; } .woocommerce-MyAccount-navigation li.is-active > a{ color:#233F2E; text-decoration-line:underline; text-decoration-color:#233F2E; text-decoration-thickness:2px; text-underline-offset:8px; } .woocommerce-MyAccount-navigation a:hover{ color:#FAA432; text-decoration-line:underline; text-decoration-color:#FAA432; text-decoration-thickness:2px; text-underline-offset:8px; } .woocommerce-MyAccount-navigation li a::before{ content:""; flex:0 0 18px; height:18px; background:currentColor; -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; mask-size:contain; mask-repeat:no-repeat; mask-position:center; } /* Icons */ .woocommerce-MyAccount-navigation-link--dashboard a::before{ -webkit-mask-image:url('data:image/svg+xml;utf8,'); mask-image:url('data:image/svg+xml;utf8,'); } .woocommerce-MyAccount-navigation-link--orders a::before{ -webkit-mask-image:url('data:image/svg+xml;utf8,'); mask-image:url('data:image/svg+xml;utf8,'); } .woocommerce-MyAccount-navigation-link--downloads a::before{ -webkit-mask-image:url('data:image/svg+xml;utf8,'); mask-image:url('data:image/svg+xml;utf8,'); } .woocommerce-MyAccount-navigation-link--edit-address a::before{ -webkit-mask-image:url('data:image/svg+xml;utf8,'); mask-image:url('data:image/svg+xml;utf8,'); } .woocommerce-MyAccount-navigation-link--edit-account a::before{ -webkit-mask-image:url('data:image/svg+xml;utf8,'); mask-image:url('data:image/svg+xml;utf8,'); } .woocommerce-MyAccount-navigation-link--customer-logout a::before{ -webkit-mask-image:url('data:image/svg+xml;utf8,'); mask-image:url('data:image/svg+xml;utf8,'); } /* Right column text + intro links underline */ .woocommerce-MyAccount-content{ color:#333; } .woocommerce-MyAccount-content p{ line-height:1.6; } .woocommerce-MyAccount-content > p:first-of-type{ display:none; } /* duplicate greeting */ .woocommerce-MyAccount-content > p a{ color:#233F2E; text-decoration-line:underline; text-decoration-color:#233F2E; text-decoration-thickness:2px; text-underline-offset:4px; } .woocommerce-MyAccount-content > p a:hover{ color:#FAA432; text-decoration-color:#FAA432; } /* Stack on small screens */ @media (max-width:768px){ body.logged-in .woocommerce-account .woocommerce{ grid-template-columns:1fr; gap:24px; } .myacc-sidebar-user{ margin-bottom:8px; } } /* ========================================================= MY ACCOUNT — ORDERS TABLE ========================================================= */ .woocommerce-MyAccount-content .woocommerce-orders-table{ width:100%; border-collapse:collapse; border-spacing:0; background:#fff; border:1px solid #eee; border-radius:8px; overflow:hidden; table-layout:auto; font-family:"Archivo", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; } .woocommerce-MyAccount-content .woocommerce-orders-table thead th{ background:#f7f7f7; color:#111; font-weight:600; text-align:left; padding:14px 16px; border-bottom:1px solid #eee; white-space:nowrap; } .woocommerce-MyAccount-content .woocommerce-orders-table td{ padding:14px 16px; border-top:1px solid #eee; vertical-align:middle; color:#333; } .woocommerce-MyAccount-content .woocommerce-orders-table tbody tr:hover{ background:#fafafa; } /* Links in table */ .woocommerce-MyAccount-content .woocommerce-orders-table a{ color:#233F2E; text-decoration:underline; text-underline-offset:3px; } .woocommerce-MyAccount-content .woocommerce-orders-table a:hover{ color:#FAA432; text-decoration-color:#FAA432; } /* Status + totals */ .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-status{ color:#233F2E; font-weight:600; } .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-total{ white-space:nowrap; } /* Actions sizing (desktop) */ @media (min-width:1024px){ .woocommerce-MyAccount-content .woocommerce-orders-table thead th:nth-child(1){ width:120px; } .woocommerce-MyAccount-content .woocommerce-orders-table thead th:nth-child(2){ width:170px; } .woocommerce-MyAccount-content .woocommerce-orders-table thead th:nth-child(3){ width:130px; } .woocommerce-MyAccount-content .woocommerce-orders-table thead th:nth-child(4){ width:220px; } .woocommerce-MyAccount-content .woocommerce-orders-table thead th.woocommerce-orders-table__header-order-actions{ width:260px; } .woocommerce-MyAccount-content .woocommerce-orders-table td{ padding:16px 20px; } } /* Actions cell → flex row with gaps */ .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions{ display:flex; align-items:center; justify-content:flex-start; gap:10px; white-space:nowrap; padding:14px 18px !important; height:auto; } .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button{ display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 14px; margin:0 !important; line-height:1 !important; border-radius:6px; background:#233F2E; border:1px solid #233F2E; color:#fff; font-weight:600; transition:background-color .15s ease, border-color .15s ease, transform .02s ease-in-out; } .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button:hover{ background:#FAA432; border-color:#FAA432; color:#111; } .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button:active{ transform:translateY(1px); } /* Mobile stacked table polish */ @media (max-width:700px){ .woocommerce-MyAccount-content .woocommerce-orders-table{ border-radius:6px; } .woocommerce-MyAccount-content .woocommerce-orders-table thead{ display:none; } .woocommerce-MyAccount-content .woocommerce-orders-table tr{ display:block; border-top:1px solid #eee; } .woocommerce-MyAccount-content .woocommerce-orders-table tbody tr:first-child{ border-top:0; } .woocommerce-MyAccount-content .woocommerce-orders-table td{ display:flex; justify-content:space-between; gap:12px; padding:12px 16px; border-top:0; } .woocommerce-MyAccount-content .woocommerce-orders-table td::before{ color:#777; font-weight:500; } .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions{ flex-wrap:wrap; gap:8px; } .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button{ flex:1 1 auto; min-width:110px; height:40px; } } /* ========================================================= My Account → Addresses: 2-column layout (Billing left, Shipping right) ========================================================= */ /* Container becomes a 2-col grid on desktop */ .woocommerce-MyAccount-content .woocommerce-Addresses.addresses{ display:grid !important; grid-template-columns: 1fr 1fr; gap:28px; align-items:stretch; } /* Nuke theme floats/widths so grid can work */ .woocommerce-MyAccount-content .woocommerce-Addresses.addresses .col-1, .woocommerce-MyAccount-content .woocommerce-Addresses.addresses .col-2{ float:none !important; width:auto !important; margin:0 !important; padding:0 !important; clear:none !important; } /* Explicit placement: Billing left, Shipping right */ .woocommerce-MyAccount-content .woocommerce-Addresses.addresses .col-1{ grid-column:1 !important; grid-row:1 !important; } .woocommerce-MyAccount-content .woocommerce-Addresses.addresses .col-2{ grid-column:2 !important; grid-row:1 !important; } /* Make sure each column stretches full width of its grid cell */ .woocommerce-MyAccount-content .woocommerce-Addresses.addresses .woocommerce-Address{ width:100% !important; } /* Mobile: stack to a single column */ @media (max-width: 860px){ .woocommerce-MyAccount-content .woocommerce-Addresses.addresses{ grid-template-columns:1fr; gap:20px; } .woocommerce-MyAccount-content .woocommerce-Addresses.addresses .col-1, .woocommerce-MyAccount-content .woocommerce-Addresses.addresses .col-2{ grid-column:1 !important; grid-row:auto !important; } }