/* ── Page chrome: grey outer background + white 960px content panel ── */
body.woocommerce-account { background-color: #eeeeee; }
body.woocommerce-account section#content.w960 { background-color: #fff; }
body.woocommerce-account article.w960 { padding: 0 30px 50px; }
/* ── southinc-child/style.css resets strong/b to font-weight:inherit — restore bold ── */
.woocommerce-account strong,
.woocommerce-account b { font-weight: bold; }
/* ── "YOUR ACCOUNT" heading — 57.6 px / weight 800 / uppercase on live ── */
/* Live: container padding=0, h1 margin-top=48px. Staging: container padding=30px, */
/* so add 18px to h1 margin-top to reach same 48px total clearance from panel edge.*/
.account-page-title {
font-size: 3.6rem !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: normal !important; /* live has no extra letter-spacing on h1 */
margin-top: 18px !important; /* 30px container + 18px = 48px, matching live */
margin-bottom: 10px !important;
color: #000 !important;
line-height: 1em !important; /* live: line-height = font-size (57.6px) */
}
/* ── Dashboard flex layout: main content left, Need Help sidebar right ── */
/* Uses flexbox instead of float — more reliable across CSS resets. */
.account-dashboard-layout {
display: flex;
align-items: flex-start;
gap: 0; /* spacing comes from .need-help margin-left: 10px, matching live */
}
.account-dashboard-main {
flex: 1 1 auto;
min-width: 0; /* prevent flex blowout */
}
@media (max-width: 600px) {
.account-dashboard-layout {
flex-direction: column;
}
}
/* ── Need Help sidebar box ──────────────────────────────────────── */
.need-help {
background: #00accf;
color: white;
padding: 1rem;
width: 240px;
flex: 0 0 240px;
float: none !important; /* override any legacy float rules */
box-sizing: border-box;
margin-left: 10px; /* matches live site spacing between content and sidebar */
}
.need-help h2 {
font-family: ProximaNova, sans-serif !important;
color: white !important;
text-align: center;
border-bottom: 1px solid white;
padding-bottom: 1rem;
margin-top: 5px !important; /* live: 5px top margin */
margin-bottom: 1rem !important; /* live: 16px bottom margin — !important overrides Elementor 45px */
font-size: 2.4rem !important;
text-transform: uppercase !important;
letter-spacing: 3px !important; /* live h2 letter-spacing */
line-height: 1.7rem !important; /* live: 27.2px */
}
/* (0,3,1) specificity — beats the broad (0,2,1) wrapper rule that appears later in the sheet */
.woocommerce-account .my-account .need-help p {
font-size: 0.9rem !important; /* live: 14.4px */
line-height: 1.1rem !important; /* live: 17.6px */
margin: 10px 0 5px !important; /* live: 10px top, 5px bottom */
color: white !important;
}
.woocommerce-account .my-account .need-help a {
color: white !important;
text-decoration: underline;
font-size: 0.9rem !important;
}
@media (max-width: 600px) {
.need-help {
width: 100%;
flex: 0 0 auto;
}
}
/* ── Greeting paragraph ────────────────────────────────────────── */
.woocommerce p.myaccount_user {
margin: 10px 0 !important; /* live: margin 10px top and bottom */
}
.woocommerce p.myaccount_user a {
color: #A00000;
text-decoration: none;
}
/* ── Account page body text ────────────────────────────────────── */
.entry-content,
.woocommerce-nzgeo-content {
font-size: 1.2rem;
line-height: 1.7rem;
}
/* ── Black-outline WooCommerce buttons ─────────────────────────── */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
display: inline-block;
border: 1px solid black !important;
text-transform: uppercase;
padding: 12px !important;
font-size: 0.7rem;
letter-spacing: 2px;
color: black !important;
font-weight: 600;
background: white !important;
border-radius: 0 !important;
text-decoration: none !important;
}
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
background-color: #A00000 !important;
border-color: #A00000 !important;
color: white !important;
}
@media (max-width: 400px) {
.woocommerce .my-account a.button {
width: 49%;
text-align: center;
box-sizing: border-box;
font-size: 1rem;
}
}
/* ── Edit-account buttons row ───────────────────────────────────── */
.bfc { overflow: hidden; }
.font-fix { font-size: 0; }
.font-fix > * { font-size: 1rem; }
.edit-account-buttons a.button {
font-size: 0.7rem;
}
/* Float all buttons left so order matches DOM order (Edit password, Edit billing, Manage email) */
.edit-account-buttons a.button.left,
.edit-account-buttons a.button.right {
float: left !important;
margin-right: 1rem;
}
/* ── "YOUR SUBSCRIPTIONS" heading above subscription table ─────── */
/* Live site's kowhai plugin renders an h2 here; WC default doesn't.
Add it via ::before so staging visually matches live. */
.woocommerce_account_subscriptions {
margin-top: 3rem; /* matches live h2 default top margin (48px) */
}
.woocommerce_account_subscriptions::before {
content: "YOUR SUBSCRIPTIONS";
display: block;
font-size: 2.4rem;
font-weight: 400; /* live: weight 400 */
text-transform: uppercase;
letter-spacing: 3px; /* live h2 has letter-spacing: 3px */
color: #000;
margin-bottom: 1.5rem; /* live h2 bottom margin: 24px */
line-height: 1.7rem;
font-family: ProximaNova, sans-serif;
}
/* ── White panel — applied to the outer nzgeo-content div so the h1 is inside it ── */
.woocommerce-account .woocommerce-nzgeo-content.my-account {
background-color: #fff;
color: #000; /* Elementor sets body text to grey — force black to match live */
padding: 30px 0px 50px;
margin-top: 0;
}
/* Inner Elementor wrapper: transparent, no extra padding, no border, correct font/color */
/* Elementor resets font-size to 14px and color to grey — restore both to match live */
.woocommerce-MyAccount-content-wrapper {
background-color: transparent !important;
padding: 0 !important;
border: none !important;
font-size: 1.2rem !important;
line-height: 1.7rem !important;
color: #000 !important;
}
/* Ensure text elements inherit correct font-size and colour (Elementor overrides both) */
.woocommerce-account .woocommerce-MyAccount-content-wrapper p,
.woocommerce-account .woocommerce-MyAccount-content-wrapper span,
.woocommerce-account .woocommerce-MyAccount-content-wrapper td,
.woocommerce-account .woocommerce-MyAccount-content-wrapper th,
.woocommerce-account .woocommerce-MyAccount-content-wrapper li,
.woocommerce-account .woocommerce-MyAccount-content-wrapper label {
font-size: 1.2rem !important;
color: #000 !important;
}
/* Elementor inner containers constrain content width to ~636px — expand to full width */
.woocommerce-account .woocommerce-MyAccount-content-wrapper .e-con-inner,
.woocommerce-account .woocommerce-MyAccount-content-wrapper > .e-con {
max-width: 100% !important;
width: 100% !important;
}
/* ── Subscriptions / orders table ───────────────────────────────── */
.woocommerce .my-account table.shop_table {
border-radius: 0;
border: 0;
border-top: 1px solid black;
border-spacing: 0 1rem;
}
.woocommerce .my-account table.shop_table form {
text-align: right;
}
.woocommerce .my-account table.shop_table td,
.woocommerce .my-account table.shop_table th {
border: 0;
padding: 8px 0;
}
.woocommerce .my-account table.shop_table thead th {
padding-bottom: 10px;
border-bottom: 3px solid black;
margin-bottom: 5px;
}
.woocommerce .my-account table tbody td {
background: #eee;
font-size: 1rem;
line-height: 1.3rem;
}
.woocommerce .my-account table td:first-child {
padding-left: 10px;
border-radius: 5px 0 0 5px;
}
.woocommerce .my-account table td:last-child {
border-radius: 0 5px 5px 0;
padding-right: 8px;
}
@media (max-width: 400px) {
.woocommerce .my-account table.shop_table td {
padding: 10px;
border-radius: 0;
}
.woocommerce table.shop_table_responsive tr,
.woocommerce-page table.shop_table_responsive tr {
margin-bottom: 1rem;
}
}
/* ── Email-preferences sub-page ────────────────────────────────── */
/* Hide the auto-generated h2 "Email preferences" heading.
Two selectors: one for Elementor wrapper, one for account.php template. */
.woocommerce-account .woocommerce-MyAccount-content-wrapper > div > h2:first-child,
#email-preferences h2 {
display: none;
}
/* Checkbox + label styling to match live */
.woocommerce-account .woocommerce-nzgeo-content p input[type="checkbox"],
.woocommerce-account .woocommerce-MyAccount-content-wrapper p input[type="checkbox"] {
margin-right: 8px;
vertical-align: middle;
width: 16px;
height: 16px;
}
.woocommerce-account .woocommerce-nzgeo-content p strong,
.woocommerce-account .woocommerce-MyAccount-content-wrapper p strong {
font-size: inherit; /* inherit 1.2rem from parent — matches live 19.2px */
vertical-align: middle;
}
/* Save changes button — same black-outline style as other account buttons */
.woocommerce-account button.black-button.save-button,
.woocommerce-account .save-button {
display: inline-block;
border: 1px solid black !important;
text-transform: uppercase;
padding: 10px !important;
font-size: 0.7rem;
line-height: 1.7rem; /* 27.2px — matches live */
letter-spacing: 2px;
color: black !important;
font-weight: 600;
background: white !important;
border-radius: 0 !important;
cursor: pointer;
margin-top: 1rem;
}
/* ── Email-preferences paragraph margins ────────────────────────── */
#email-preferences p {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
/* ── Payment methods section ────────────────────────────────────── */
.payment-methods-section {
margin-top: 1rem;
}
.payment-methods-section .no-saved-methods {
margin-bottom: 0.5rem;
font-size: 1rem;
}
.payment-methods-section .saved-payment-methods {
list-style: none;
padding: 0;
margin-bottom: 0.5rem;
}
/* ── Edit address form (billing / shipping) ─────────────────────── */
/* "Billing address." subheading — live: 38.4px, uppercase, weight 400, 3px tracking */
/* The h2/h3 is a direct child of