/* My account
*
* Same surface as the cart, checkout and thank-you pages: a sidebar of links
* beside a content card, forms and tables styled the same way. WooCommerce's
* own markup carries no layout of its own here — this page had none of the
* theme's styling before — so every rule below is new rather than an override.
*/
body.woocommerce-account .site-main { padding: 40px 0 80px; }
body.woocommerce-account .entry-header { display: none; }
/* Same clearfix-in-a-grid trap as the address columns and the order-facts
card elsewhere: WooCommerce puts a `display:table` ::before/::after on
`.woocommerce` itself, and under `display:grid` those become two extra
grid items — the nav lands in row1/col2 and the content wraps to
row2/col1, instead of sitting side by side. Kill them first. */
body.woocommerce-account .woocommerce::before,
body.woocommerce-account .woocommerce::after { content: none; }
body.woocommerce-account .woocommerce {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 32px;
align-items: start;
}
/* The page title comes from whichever endpoint is open ("Orders", "Addresses"…) */
body.woocommerce-account .entry-title,
body.woocommerce-account h1.entry-title {
grid-column: 1 / -1;
margin: 0 0 32px;
font-size: 48px;
line-height: 56px;
font-weight: 500;
color: #000000;
text-align: left;
}
/* ── Sidebar ────────────────────────────────────────────────────────────── */
/* WooCommerce floats these two and gives them percentage widths (30% / 68%)
sized for the old unconstrained layout. Inside a grid cell a percentage
width resolves against the CELL, not the page, so nav shrank to 30% of its
260px column (78px) and content to 68% of its own column. Floats have no
effect on a grid item, but the explicit widths still need clearing. */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
float: none;
width: auto;
}
body.woocommerce-account .woocommerce-MyAccount-navigation {
padding: 12px;
border: 1px solid var(--color-border-light);
border-radius: var(--radius);
background: #ffffff;
box-shadow: var(--shadow-block);
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link a {
display: block;
padding: 12px 16px;
border-radius: var(--radius-box);
font-size: 15px;
line-height: 22px;
font-weight: 500;
color: #3b3d42;
text-decoration: none;
transition: background var(--transition), color var(--transition);
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover {
background: var(--color-bg-alt);
color: var(--color-text);
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
background: var(--color-pink-50);
color: var(--color-primary-dark);
font-weight: 600;
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid var(--color-border-light);
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--color-primary); }
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: var(--color-pink-50); }
/* ── Content card ───────────────────────────────────────────────────────── */
body.woocommerce-account .woocommerce-MyAccount-content {
padding: 32px;
border: 1px solid var(--color-border-light);
border-radius: var(--radius);
background: #ffffff;
box-shadow: var(--shadow-block);
}
/* The single address-edit form and a few other endpoints print their own
bare, classless
("Billing address"…) — otherwise it inherits the
site's 64px generic h2 rather than reading as a form heading. */
body.woocommerce-account .woocommerce-MyAccount-content > h2,
body.woocommerce-account .woocommerce-MyAccount-content form > h2 {
margin: 0 0 24px;
font-size: 28px;
line-height: 36px;
font-weight: 600;
color: var(--color-text);
}
body.woocommerce-account .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
body.woocommerce-account .woocommerce-MyAccount-content p {
font-size: 15px;
line-height: 24px;
color: #3b3d42;
}
body.woocommerce-account .woocommerce-MyAccount-content strong { color: var(--color-text); }
body.woocommerce-account .woocommerce-MyAccount-content a {
color: var(--color-primary);
text-decoration: underline;
}
/* ── Dashboard, orders ─────────────────────────────────────────────────── */
body.woocommerce-account table.shop_table {
width: 100%;
border: 1px solid var(--color-border-light);
border-collapse: separate;
border-spacing: 0;
border-radius: var(--radius-box);
overflow: hidden;
}
body.woocommerce-account table.shop_table th {
padding: 14px 16px;
border-bottom: 1px solid var(--color-border-light);
background: var(--color-bg-alt);
font-size: 13px;
font-weight: 600;
color: #3b3d42;
text-align: left;
text-transform: uppercase;
letter-spacing: 0.4px;
}
body.woocommerce-account table.shop_table td {
padding: 14px 16px;
border-bottom: 1px solid var(--color-border-light);
font-size: 15px;
line-height: 22px;
color: var(--color-text);
vertical-align: middle;
}
body.woocommerce-account table.shop_table tr:last-child td { border-bottom: none; }
body.woocommerce-account table.shop_table .button,
body.woocommerce-account a.woocommerce-Button.button {
display: inline-flex;
align-items: center;
height: 36px;
padding: 8px 18px;
border: none;
border-radius: var(--radius-pill);
background: var(--color-primary);
font-size: 13px;
font-weight: 500;
color: #ffffff !important;
text-decoration: none;
white-space: nowrap;
transition: background var(--transition);
}
body.woocommerce-account table.shop_table .button:hover,
body.woocommerce-account a.woocommerce-Button.button:hover { background: var(--color-primary-dark); }
/* WooCommerce marks the current-status pill this generically, so it borrows
the same soft badge look used for the pink price pills elsewhere */
body.woocommerce-account mark.order-status {
display: inline-flex;
align-items: center;
height: 26px;
padding: 0 12px;
border-radius: var(--radius-pill);
background: var(--color-pink-50);
font-size: 12px;
font-weight: 600;
color: var(--color-primary-dark);
text-transform: uppercase;
letter-spacing: 0.4px;
}
body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button { margin: 2px 4px 2px 0; }
body.woocommerce-account .woocommerce-Pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 24px;
}
body.woocommerce-account .woocommerce-Pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 8px;
border-radius: var(--radius-box);
background: var(--color-bg-alt);
font-size: 14px;
font-weight: 500;
color: var(--color-text);
text-decoration: none;
}
body.woocommerce-account .woocommerce-Pagination .page-numbers.current,
body.woocommerce-account .woocommerce-Pagination .page-numbers:hover {
background: var(--color-primary);
color: #ffffff;
}
/* ── Single order view ─────────────────────────────────────────────────── */
/* Reuses the same table/summary shapes as the thank-you page's order details,
since it is the same data shown a second time. */
body.woocommerce-account .woocommerce-order-details,
body.woocommerce-account .woocommerce-customer-details {
margin-top: 32px;
padding: 0;
border: none;
background: none;
box-shadow: none;
}
body.woocommerce-account .woocommerce-order-details:first-child { margin-top: 0; }
body.woocommerce-account .woocommerce-order-details__title {
margin: 0 0 20px;
font-size: 20px;
line-height: 28px;
font-weight: 600;
color: var(--color-text);
}
body.woocommerce-account table.order_details thead { display: none; }
body.woocommerce-account table.order_details td,
body.woocommerce-account table.order_details th {
padding: 14px 16px;
font-size: 15px;
line-height: 22px;
color: var(--color-text);
vertical-align: top;
}
/* The item row: kitten photo beside its name (order/order-details-item.php
adds the .product-thumb), price right-aligned in its own cell. */
body.woocommerce-account table.order_details tbody .product-name {
display: flex;
gap: 16px;
}
body.woocommerce-account table.order_details tbody .product-thumb img {
display: block;
width: 72px;
height: 72px;
border-radius: 14px;
object-fit: cover;
}
body.woocommerce-account table.order_details tbody .product-name__text {
font-size: 16px;
line-height: 24px;
font-weight: 600;
}
body.woocommerce-account table.order_details tbody .product-name__text a {
color: inherit;
text-decoration: none;
}
body.woocommerce-account table.order_details tbody .product-name__text a:hover { color: var(--color-primary); }
body.woocommerce-account table.order_details tbody .product-quantity {
font-weight: 400;
color: var(--color-muted);
}
body.woocommerce-account table.order_details tbody .wc-item-meta,
body.woocommerce-account table.order_details tbody .variation {
margin: 6px 0 0;
padding: 0;
font-size: 14px;
line-height: 20px;
font-weight: 400;
color: #3b3d42;
list-style: none;
}
body.woocommerce-account table.order_details tbody .wc-item-meta li,
body.woocommerce-account table.order_details tbody .wc-item-meta p,
body.woocommerce-account table.order_details tbody .variation dt,
body.woocommerce-account table.order_details tbody .variation dd,
body.woocommerce-account table.order_details tbody .variation p { margin: 0; }
body.woocommerce-account table.order_details tbody .product-total {
padding-left: 16px;
font-weight: 600;
text-align: right;
white-space: nowrap;
}
body.woocommerce-account table.order_details tfoot th {
font-weight: 500;
color: #3b3d42;
text-align: left;
}
body.woocommerce-account table.order_details tfoot td {
font-weight: 600;
text-align: right;
}
body.woocommerce-account table.order_details tfoot tr:first-child th,
body.woocommerce-account table.order_details tfoot tr:first-child td { border-top: 1px solid var(--color-border-light); }
body.woocommerce-account table.order_details .order-details__total--order_total th,
body.woocommerce-account table.order_details .order-details__total--order_total td {
font-size: 18px;
line-height: 26px;
}
body.woocommerce-account table.order_details .order-details__total--order_total td { color: var(--color-primary-dark); }
/* The address list, and the login/register screen below, both carry
WooCommerce's ".col2-set" class. Two traps come with it:
1. `.col2-set::before/::after { content:" "; display:table }` — under
`display:grid` those become two extra grid items and scramble
Billing/Shipping (or login/register) into the wrong cells.
2. `.woocommerce .col2-set .col-1 { float:left; width:48% }` — three
classes deep, so a same-shape reset with only two classes loses the
specificity fight and the 48% (measured against the grid CELL, not
the page) is what was squeezing each column down to a sliver. */
body.woocommerce-account .col2-set::before,
body.woocommerce-account .col2-set::after,
body.woocommerce-account .woocommerce-columns--addresses::before,
body.woocommerce-account .woocommerce-columns--addresses::after { content: none; }
body.woocommerce-account .col2-set,
body.woocommerce-account .woocommerce-columns--addresses {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
}
body.woocommerce-account .col2-set .col-1,
body.woocommerce-account .col2-set .col-2,
body.woocommerce-account .woocommerce-columns--addresses .col-1,
body.woocommerce-account .woocommerce-columns--addresses .col-2 {
float: none;
width: auto;
}
body.woocommerce-account .woocommerce-Address-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 0 12px;
}
body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-column__title {
margin: 0;
font-size: 18px;
line-height: 26px;
font-weight: 600;
color: var(--color-text);
}
body.woocommerce-account .woocommerce-Address-title .edit {
font-size: 14px;
font-weight: 500;
color: var(--color-primary);
text-decoration: none;
}
body.woocommerce-account .woocommerce-Address-title .edit:hover { text-decoration: underline; }
/* The card itself comes from the shared .u-column1.col-1/.u-column2.col-2
rule further down — .woocommerce-Address carries those same two classes,
so an address box and a login/register panel end up the same shape. Only
the printed address text needs its own reset here. */
body.woocommerce-account .woocommerce-Address address {
font-size: 15px;
line-height: 24px;
font-style: normal;
color: #3b3d42;
}
body.woocommerce-account .woocommerce-Message,
body.woocommerce-account .woocommerce-info {
margin: 0 0 24px;
padding: 16px 20px;
border: 1px solid var(--color-border-light);
border-left: 3px solid var(--color-secondary);
border-radius: var(--radius-box);
background: var(--color-bg-alt);
font-size: 15px;
line-height: 22px;
list-style: none;
}
body.woocommerce-account .woocommerce-info::before { content: none; }
/* ── Forms (addresses, account details, login, register) ───────────────── */
body.woocommerce-account form .form-row {
margin: 0 0 20px;
padding: 0;
}
body.woocommerce-account form .form-row:last-of-type { margin-bottom: 0; }
/* First/last name and the like — no shared wrapper to grid, so this uses
WooCommerce's own float + trailing ".clear" div. inline-block was tried
first, but the whitespace text node the two
tags leave between them
in the markup adds a few px that was just enough to force a wrap. */
body.woocommerce-account form p.form-row-first,
body.woocommerce-account form p.form-row-last {
float: left;
width: calc(50% - 10px);
}
body.woocommerce-account form p.form-row-first { margin-right: 20px; }
body.woocommerce-account form .clear { clear: both; }
body.woocommerce-account form label {
display: block;
margin: 0 0 6px;
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: #3b3d42;
}
body.woocommerce-account form label .required {
color: var(--color-primary);
text-decoration: none;
}
body.woocommerce-account form .input-text,
body.woocommerce-account form select,
body.woocommerce-account .select2-container .select2-selection {
width: 100%;
height: 46px;
padding: 12px 16px;
border: 1px solid var(--color-border-light);
border-radius: 10px;
background: #fcfcfd;
font-family: inherit;
font-size: 15px;
line-height: 20px;
color: var(--color-text);
transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
body.woocommerce-account form .input-text:hover,
body.woocommerce-account form select:hover { border-color: var(--color-border); }
body.woocommerce-account form .input-text:focus,
body.woocommerce-account form select:focus {
outline: none;
border-color: var(--color-primary);
background: #ffffff;
box-shadow: 0 0 0 3px rgba(249, 129, 168, 0.16);
}
body.woocommerce-account form select {
appearance: none;
-webkit-appearance: none;
padding-right: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%233b3d42' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
}
body.woocommerce-account .select2-container .select2-selection--single { display: flex; align-items: center; }
body.woocommerce-account .select2-container .select2-selection__rendered { padding: 0; line-height: inherit; color: inherit; }
body.woocommerce-account .select2-container .select2-selection__arrow { height: 44px; }
body.woocommerce-account .password-input {
position: relative;
display: block;
}
body.woocommerce-account .show-password-input {
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
}
/* "Password change" on the account-details form is a real