/). Without a top gap they sit flush against
the input border and read as part of the field rather than helper
copy. */
.tmt-account-page__woo .form-row .description,
.tmt-account-page__woo .form-row > em,
.tmt-account-page__woo .form-row > small,
.tmt-account-page__woo .form-row .form-row__description {
display: block !important;
margin-top: 8px !important;
font-size: 12px !important;
line-height: 1.5 !important;
opacity: 0.7 !important;
}
/* Fieldset — Password Change section.
Becomes its own grid so its inner rows space apart with the
same 22px row-gap as the parent form, instead of tight-stacking
like a default fieldset would. */
.tmt-account-page__woo fieldset {
grid-column: 1 / -1 !important;
background: transparent !important;
padding: 28px 0 0 !important;
margin: 14px 0 4px !important;
border: none !important;
border-top: 1px solid #d0d0d0 !important;
display: grid !important;
grid-template-columns: 1fr !important;
row-gap: 22px !important;
}
.tmt-account-page__woo fieldset legend {
display: block !important;
font-family: var(--font-primary) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: #000 !important;
padding: 0 !important;
margin: 0 0 6px !important;
width: auto !important;
}
/* Submit row — give it space above the Save Changes button so it
doesn't sit immediately under the last input. */
.tmt-account-page__woo .woocommerce-EditAccountForm > p:last-of-type,
.tmt-account-page__woo form.edit-account > p:last-of-type,
.tmt-account-page__woo form.woocommerce-address-fields > p:last-of-type {
margin-top: 8px !important;
padding-top: 8px !important;
}
/* ============================================================
* Addresses grid (2-up on desktop, 1-up on mobile)
* ============================================================ */
.tmt-account-page__woo .woocommerce-Addresses,
.tmt-account-page__woo .u-columns.woocommerce-Addresses {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 20px !important;
margin: 0 !important;
width: 100% !important;
}
.tmt-account-page__woo .woocommerce-Address,
.tmt-account-page__woo .u-column1,
.tmt-account-page__woo .u-column2 {
background: #F4F4F5;
padding: 24px !important;
width: auto !important;
float: none !important;
}
.tmt-account-page__woo .woocommerce-Address header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 0 14px !important;
padding-bottom: 12px;
border-bottom: 1px solid #d0d0d0;
}
.tmt-account-page__woo .woocommerce-Address header h3 {
font-size: 18px !important;
margin: 0 !important;
}
.tmt-account-page__woo .woocommerce-Address header a {
font-size: 10px !important;
text-decoration: none !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
}
.tmt-account-page__woo .woocommerce-Address address {
font-style: normal !important;
font-size: 13px !important;
line-height: 1.7 !important;
margin: 0 !important;
}
/* ============================================================
* Orders table
* ============================================================ */
.tmt-account-page__woo table {
width: 100% !important;
border-collapse: collapse !important;
margin: 0 !important;
}
.tmt-account-page__woo table th {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
padding: 14px 12px !important;
border-bottom: 1px solid #000 !important;
text-align: left !important;
background: transparent !important;
}
.tmt-account-page__woo table td {
padding: 16px 12px !important;
border-bottom: 1px solid #000 !important;
font-size: 13px !important;
vertical-align: middle !important;
}
/* Drop the underline on order-number links inside the orders table.
With a 1px black row-bottom border now sitting under each cell, the
underline used to read as a "second, partial" black line — same
weight, same colour, but only the width of the link text. The
row border is the canonical separator; the link colour + bold
weight is enough affordance without an underline. */
.tmt-account-page__woo .woocommerce-orders-table a {
text-decoration: none !important;
}
.tmt-account-page__woo .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
text-align: right !important;
}
.tmt-account-page__woo .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions a {
margin-left: 4px;
}
/* "No orders yet" empty-state */
.tmt-account-page__woo .woocommerce-Message--info,
.tmt-account-page__woo .woocommerce-info {
background: #F4F4F5 !important;
padding: 20px 24px !important;
border: none !important;
border-left: 3px solid #000 !important;
color: #000 !important;
font-size: 14px !important;
margin: 0 0 24px !important;
}
.tmt-account-page__woo .woocommerce-info::before { display: none !important; }
/* ============================================================
* Single order view (My Account → Orders → View Order)
*
* WC renders this page with three sections:
* 1. Intro with -highlighted order #, date, status.
* The default is yellow background — strip it.
* 2. with product rows + tfoot for
* subtotal / shipping / total / payment method.
* 3. with billing +
* shipping addresses, default-italic elements
* stacked on top of each other.
* ============================================================ */
/* Kill the yellow highlight in the intro paragraph; keep
the values bold so they still stand out. */
.tmt-account-page__woo p mark,
.tmt-account-page__woo mark {
background: transparent !important;
color: #000 !important;
font-weight: 700 !important;
padding: 0 !important;
}
/* "Order details" heading + the customer-details column titles
("Billing address" / "Shipping address") — match the rest of
the page's section-title rhythm. */
.tmt-account-page__woo .woocommerce-order-details__title,
.tmt-account-page__woo .woocommerce-column__title {
font-family: var(--font-secondary) !important;
font-size: 22px !important;
font-weight: 400 !important;
color: #000 !important;
margin: 36px 0 18px !important;
padding-bottom: 14px !important;
border-bottom: 1px solid #000 !important;
}
/* Order details table — keep the same 1px-black row rhythm as
the orders-list table, but nudge the subtotal/total rows in
tfoot apart so the financial summary reads as its own block
rather than another product row. */
.tmt-account-page__woo .order_details,
.tmt-account-page__woo table.woocommerce-table--order-details {
margin: 0 0 8px !important;
}
.tmt-account-page__woo .order_details tbody td a {
text-decoration: none !important;
}
.tmt-account-page__woo .order_details .product-quantity {
font-weight: 500 !important;
opacity: 0.7 !important;
margin-left: 4px;
}
.tmt-account-page__woo .order_details tfoot th,
.tmt-account-page__woo .order_details tfoot td {
padding: 12px 12px !important;
border-bottom: 1px solid #d0d0d0 !important;
font-size: 13px !important;
text-align: left !important;
}
.tmt-account-page__woo .order_details tfoot th {
font-weight: 700 !important;
letter-spacing: 0.06em !important;
width: 50% !important;
}
.tmt-account-page__woo .order_details tfoot tr:last-child th,
.tmt-account-page__woo .order_details tfoot tr:last-child td {
border-bottom: none !important;
}
/* Make the Total row visually weighty — it's the figure customers
actually scan for. */
.tmt-account-page__woo .order_details tfoot tr.order_total th,
.tmt-account-page__woo .order_details tfoot tr.order_total td {
border-top: 1px solid #000 !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
font-size: 15px !important;
}
/* Customer details — billing + shipping side-by-side card pair. */
.tmt-account-page__woo .woocommerce-customer-details {
margin: 0 !important;
padding: 0 !important;
}
.tmt-account-page__woo .woocommerce-customer-details .col2-set,
.tmt-account-page__woo .woocommerce-customer-details > .col2-set {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 20px !important;
margin: 0 !important;
width: 100% !important;
}
.tmt-account-page__woo .woocommerce-customer-details .col-1,
.tmt-account-page__woo .woocommerce-customer-details .col-2 {
width: auto !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Push the column titles flush to the top of each column so the
pair line up — the global rule above gives them 36px top margin
which would only apply to the first column otherwise. */
.tmt-account-page__woo .woocommerce-customer-details .woocommerce-column__title {
margin-top: 0 !important;
}
.tmt-account-page__woo .woocommerce-customer-details address {
background: #F4F4F5 !important;
padding: 22px 24px !important;
font-style: normal !important;
font-size: 13px !important;
line-height: 1.75 !important;
color: #000 !important;
border: none !important;
margin: 0 !important;
}
/* "Order again" / "Pay" / "Cancel" CTA row that Woo emits below
the totals on processing/pending orders. */
.tmt-account-page__woo .woocommerce-MyAccount-content .order-again,
.tmt-account-page__woo .woocommerce-MyAccount-content .order-actions {
margin: 8px 0 28px !important;
padding: 0 !important;
}
.tmt-account-page__woo .woocommerce-MyAccount-content .order-again .button {
margin-right: 8px;
}
/* ============================================================
* LOGOUT STATE — Login + Register tab interface
* ============================================================ */
.tmt-account-page__login {
max-width: 480px;
margin: 0 auto;
}
/* Tab nav */
.tmt-account-page__login .tabs__nav,
.tmt-account-page__login ul.tabs__nav {
list-style: none !important;
display: flex !important;
justify-content: center !important;
gap: 0 !important;
padding: 0 !important;
margin: 0 0 36px !important;
border-bottom: 1px solid #e4e4e6 !important;
}
.tmt-account-page__login .tabs__nav li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.tmt-account-page__login .tabs__nav li::before { display: none !important; }
.tmt-account-page__login .tabs__nav .button--tab,
.tmt-account-page__login .button--tab {
background: none !important;
border: none !important;
border-bottom: 2px solid transparent !important;
color: #000 !important;
font-family: var(--font-primary) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
padding: 18px 32px !important;
cursor: pointer !important;
opacity: 0.45 !important;
border-radius: 0 !important;
margin: 0 0 -1px !important;
transition: opacity 0.2s, border-color 0.2s !important;
}
.tmt-account-page__login .button--tab:hover { opacity: 1 !important; }
.tmt-account-page__login .button--tab.is-active {
opacity: 1 !important;
border-bottom-color: #000 !important;
}
/* Login + register form columns — single column visible at a time */
.tmt-account-page__login .u-columns,
.tmt-account-page__login .u-columns.col2-set {
display: block !important;
margin: 0 !important;
}
.tmt-account-page__login .u-column1,
.tmt-account-page__login .u-column2 {
width: 100% !important;
float: none !important;
padding: 0 !important;
}
.tmt-account-page__login h2 {
font-family: var(--font-secondary) !important;
font-size: 26px !important;
font-weight: 400 !important;
color: #000 !important;
margin: 0 0 8px !important;
text-align: center;
}
/* form rows + labels */
.tmt-account-page__login .form-row {
display: block !important;
margin: 0 0 14px !important;
padding: 0 !important;
width: 100% !important;
max-width: none !important;
}
.tmt-account-page__login label {
display: block !important;
font-family: var(--font-primary) !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
margin: 0 0 6px !important;
color: #000 !important;
}
.tmt-account-page__login input[type="text"],
.tmt-account-page__login input[type="email"],
.tmt-account-page__login input[type="password"] {
width: 100% !important;
padding: 14px 16px !important;
border: 1px solid #d0d0d0 !important;
border-radius: 0 !important;
font-family: var(--font-primary) !important;
font-size: 14px !important;
color: #000 !important;
background: #fff !important;
box-sizing: border-box !important;
height: auto !important;
transition: border-color 0.2s !important;
}
.tmt-account-page__login input:focus {
border-color: #000 !important;
outline: none !important;
}
.tmt-account-page__login button[type="submit"] {
width: 100% !important;
background: #000 !important;
color: #fff !important;
border: 1px solid #000 !important;
border-radius: 0 !important;
font-family: var(--font-primary) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
padding: 16px 32px !important;
cursor: pointer !important;
transition: background 0.2s, color 0.2s !important;
margin: 16px 0 0 !important;
}
.tmt-account-page__login button[type="submit"]:hover {
background: #fff !important;
color: #000 !important;
}
.tmt-account-page__login .woocommerce-form__label-for-checkbox {
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
margin: 12px 0 0 !important;
text-align: left !important;
}
.tmt-account-page__login input[type="checkbox"] { accent-color: #000 !important; }
.tmt-account-page__login .lost_password {
font-size: 12px !important;
margin: 14px 0 0 !important;
text-align: center;
}
.tmt-account-page__login .lost_password a {
color: #000 !important;
text-decoration: underline !important;
font-weight: 700 !important;
text-underline-offset: 3px;
}
.tmt-account-page__login .woocommerce-privacy-policy-text p {
font-size: 11px !important;
line-height: 1.5 !important;
color: rgba(0, 0, 0, 0.55) !important;
margin: 12px 0 0 !important;
}
.tmt-account-page__login .g-recaptcha,
.tmt-account-page__login iframe[title*="reCAPTCHA"] {
margin: 16px 0;
transform-origin: left top;
}
/* ============================================================
* MOBILE / TABLET (≤1023px)
* Stack the dashboard, surface the nav as an accordion, scale
* every region down to phone-comfortable dimensions.
* ============================================================ */
@media (max-width: 1023px) {
/* Page wrapper — tighter spacing top + bottom */
.tmt-account-page { padding: 24px 0 48px; }
.tmt-account-page-hero { padding: 32px 24px; margin-bottom: 16px; }
.tmt-account-page-hero__title { font-size: 26px; }
.tmt-account-page-hero__desc { font-size: 13px; }
/* Stack sidebar above content */
.tmt-account-page__woo > .woocommerce,
.tmt-account-page__woo .woocommerce-account {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
/* Sidebar — full-width strip, no sticky */
.tmt-account-page__woo .account-nav {
position: static !important;
top: auto !important;
}
.tmt-account-page__woo .account-nav__header {
padding: 18px 20px;
}
.tmt-account-page__woo .account-nav__header h2 { font-size: 18px !important; }
.tmt-account-page__woo .account-nav__header p { font-size: 11px !important; }
/* Reveal the mobile menu toggle, restyle from WC's pink "Menu"
button into a clean uppercase strip with a +/- indicator. */
.tmt-account-page__woo .account-nav__links {
padding: 0 !important;
}
.tmt-account-page__woo #account-nav-toggle,
.tmt-account-page__woo .account-nav__links > button {
display: block !important;
width: 100% !important;
background: #fff !important;
color: #000 !important;
border: none !important;
border-bottom: 1px solid #e4e4e6 !important;
border-radius: 0 !important;
padding: 16px 20px !important;
text-align: left !important;
font-family: var(--font-primary) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
cursor: pointer !important;
position: relative !important;
}
.tmt-account-page__woo #account-nav-toggle::after {
content: '+';
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 22px;
font-weight: 300;
line-height: 1;
transition: transform 0.2s ease;
}
.tmt-account-page__woo #account-nav-toggle[aria-expanded="true"]::after {
content: '−';
}
.tmt-account-page__woo .woocommerce-MyAccount-navigation-menu {
display: none !important;
padding: 4px !important;
margin: 0 !important;
background: #fff !important;
}
.tmt-account-page__woo .woocommerce-MyAccount-navigation-menu.is-open {
display: block !important;
}
.tmt-account-page__woo .woocommerce-MyAccount-navigation ul li a {
padding: 14px 18px !important;
}
/* Footer secondary links — make them more compact */
.tmt-account-page__woo .account-nav__footer {
padding: 14px 20px 16px;
}
.tmt-account-page__woo .account-nav__footer a {
font-size: 9px !important;
}
/* Welcome strip — tighter padding on phone */
.tmt-account-page__woo .woocommerce-MyAccount-content > p:first-of-type {
padding: 16px 18px !important;
margin: 0 0 18px !important;
font-size: 13px !important;
}
.tmt-account-page__woo .woocommerce-MyAccount-content > p:nth-of-type(2) {
font-size: 13px !important;
margin: 0 0 18px !important;
}
/* Account-callouts row — 2-up on tablet */
.tmt-account-page__woo .account-callouts {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
margin-bottom: 24px !important;
}
.tmt-account-page__woo .account-callout {
aspect-ratio: 1 / 1;
}
.tmt-account-page__woo .account-callout__inner {
padding: 12px;
}
.tmt-account-page__woo .account-callout__inner h3,
.tmt-account-page__woo .account-callout__inner span,
.tmt-account-page__woo .account-callout__inner a {
font-size: 9px !important;
letter-spacing: 0.14em !important;
}
/* Orders dash strip — stack content + CTA vertically */
.tmt-account-page__woo .account-dash-orders {
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
padding: 16px 18px !important;
margin-bottom: 24px !important;
}
/* Forms collapse to single column with comfortable row-gap.
18px row spacing matches the mobile vertical rhythm used by
the address grid, fieldset, and welcome strip — every section
below 1023px breathes at the same scale. */
.tmt-account-page__woo .woocommerce-EditAccountForm,
.tmt-account-page__woo form.edit-account,
.tmt-account-page__woo .woocommerce-address-fields {
padding: 22px !important;
}
.tmt-account-page__woo .woocommerce-EditAccountForm,
.tmt-account-page__woo form.edit-account,
.tmt-account-page__woo .woocommerce-address-fields__field-wrapper {
grid-template-columns: 1fr !important;
gap: 18px !important;
}
.tmt-account-page__woo .woocommerce-address-fields > p:last-of-type {
margin-top: 18px !important;
}
.tmt-account-page__woo .woocommerce-MyAccount-content > form > h3 {
margin: 0 0 14px !important;
padding-bottom: 10px !important;
}
.tmt-account-page__woo fieldset {
padding: 22px 0 0 !important;
margin: 8px 0 0 !important;
row-gap: 18px !important;
}
.tmt-account-page__woo fieldset legend {
margin: 0 0 4px !important;
}
.tmt-account-page__woo .woocommerce-Addresses,
.tmt-account-page__woo .u-columns.woocommerce-Addresses {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.tmt-account-page__woo .woocommerce-Address {
padding: 18px !important;
}
.tmt-account-page__woo .woocommerce-Address header {
margin-bottom: 12px !important;
}
.tmt-account-page__woo .woocommerce-Address header h3 { font-size: 16px !important; }
/* Orders table — switch to a card-stack layout on mobile so each
row reads as its own block instead of trying to fit all six
columns across a phone width. The table chrome (thead) hides;
each | becomes a label/value row using its data-title attr
(which Woo emits on every cell by default). */
.tmt-account-page__woo .woocommerce-orders-table { border: none !important; }
.tmt-account-page__woo .woocommerce-orders-table thead { display: none !important; }
.tmt-account-page__woo .woocommerce-orders-table tbody,
.tmt-account-page__woo .woocommerce-orders-table tr {
display: block !important;
width: 100% !important;
}
.tmt-account-page__woo .woocommerce-orders-table tr {
background: #F4F4F5 !important;
padding: 14px 16px !important;
margin-bottom: 8px !important;
border: none !important;
}
.tmt-account-page__woo .woocommerce-orders-table td {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 12px !important;
padding: 6px 0 !important;
border: none !important;
font-size: 13px !important;
text-align: right !important;
}
.tmt-account-page__woo .woocommerce-orders-table td::before {
content: attr(data-title);
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
opacity: 0.6 !important;
flex: 0 0 auto !important;
}
.tmt-account-page__woo .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
flex-direction: column !important;
align-items: stretch !important;
text-align: center !important;
gap: 6px !important;
padding-top: 10px !important;
margin-top: 6px !important;
border-top: 1px solid #d0d0d0 !important;
}
.tmt-account-page__woo .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before {
display: none !important;
}
.tmt-account-page__woo .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions a {
margin: 0 !important;
}
/* No-orders empty state */
.tmt-account-page__woo .woocommerce-info {
padding: 16px 18px !important;
font-size: 13px !important;
}
/* Single order view — section titles, customer-details columns */
.tmt-account-page__woo .woocommerce-order-details__title,
.tmt-account-page__woo .woocommerce-column__title {
font-size: 18px !important;
margin: 24px 0 14px !important;
padding-bottom: 10px !important;
}
.tmt-account-page__woo .woocommerce-customer-details .col2-set,
.tmt-account-page__woo .woocommerce-customer-details > .col2-set {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.tmt-account-page__woo .woocommerce-customer-details .woocommerce-column__title {
margin-top: 24px !important;
}
.tmt-account-page__woo .woocommerce-customer-details .col-1 .woocommerce-column__title {
margin-top: 0 !important;
}
.tmt-account-page__woo .woocommerce-customer-details address {
padding: 18px 20px !important;
}
/* Order-details table — keep its 2-col shape on phone (only
Product / Total) but tighten padding + font so it fits. */
.tmt-account-page__woo .order_details th,
.tmt-account-page__woo .order_details td {
padding: 12px 8px !important;
font-size: 12px !important;
}
.tmt-account-page__woo .order_details tfoot th,
.tmt-account-page__woo .order_details tfoot td {
padding: 10px 8px !important;
font-size: 12px !important;
}
.tmt-account-page__woo .order_details tfoot tr.order_total th,
.tmt-account-page__woo .order_details tfoot tr.order_total td {
font-size: 14px !important;
padding-top: 14px !important;
padding-bottom: 14px !important;
}
}
/* ============================================================
* PHONE (≤640px) — single-column callouts, smaller hero type,
* full-width buttons.
* ============================================================ */
@media (max-width: 640px) {
.tmt-account-page-hero { padding: 24px 18px; }
.tmt-account-page-hero__title { font-size: 22px; }
.tmt-account-page-hero__desc { font-size: 12px; }
.tmt-account-page__woo .account-callouts {
grid-template-columns: 1fr !important;
gap: 6px !important;
}
.tmt-account-page__woo .account-callout {
aspect-ratio: 16 / 9;
}
.tmt-account-page__woo .account-callout__inner h3,
.tmt-account-page__woo .account-callout__inner span,
.tmt-account-page__woo .account-callout__inner a {
font-size: 11px !important;
}
.tmt-account-page__woo h2,
.tmt-account-page__woo h3 { font-size: 18px !important; }
.tmt-account-page__woo .button,
.tmt-account-page__woo a.button,
.tmt-account-page__woo button[type="submit"] {
padding: 14px 24px !important;
font-size: 11px !important;
width: 100% !important;
text-align: center !important;
}
/* Login page tabs — full-width chips on phone */
.tmt-account-page__login .button--tab {
flex: 1 !important;
padding: 14px 16px !important;
font-size: 10px !important;
letter-spacing: 0.14em !important;
}
.tmt-account-page__login h2 { font-size: 22px !important; }
}
|