is float:left, so unlike a normal inline link its bottom margin
actually took up space. Zeroing the inner one and setting the figure to 28px
gets the measured image-to-title distance to 28px on every listing. */
.blog-section .blog-block figure,
.blog-listing .blog-block figure {
margin: 0 0 20px 0;
}
.blog-listing .blog-block figure a {
margin-bottom: 0;
}
/* Card-to-card gap, read from --listing-card-gap so /blog and /merchandise can
never drift apart again.
They had: the product card carried margin-bottom:50px against the blog card's
40px, so product rows sat 10px looser. Everything else about the two cards
already lined up — 20px from image to title, 30/33px titles, 14px secondary
line 4px under it — which is why the difference read as "subtly off" rather
than plainly wrong. /blog was the better of the two, so its 40px wins.
Homepage cards (.merchandise-section, .blog-section) are deliberately left
out: they sit in a slider with its own spacing. */
.blog-listing .blog-block,
.inner-merchandise .merchandise-block {
margin: 0 0 var(--listing-card-gap) 0;
}
/* WooCommerce's own stylesheet puts a further 16px under ul.products, which
pushed the product pagination 16px lower than the blog's. On both pages the
real gap to the pagination is .inner-merchandise's 40px bottom padding. */
.inner-merchandise ul.products {
margin-bottom: 0;
}
/* ---- Grid: stop short cards snagging the next row ---------------------- */
/* The product grid is floated Bootstrap columns inside ul.products, and floats
only clear what is directly above them. While every card was the same height
that never showed. Now that a two-line title makes a card ~33px taller than
its neighbour, the next card slides up alongside the shorter one instead of
starting a fresh row, which is the empty slot with a product pushed further
down the page.
Both grids are two columns from 768px up and one below, so clearing every
odd child starts each row cleanly and does nothing at all in the one-column
case. Left as a float fix rather than switching ul.products to flex, because
WooCommerce and Bootstrap both hang clearfix pseudo-elements off these
containers and those would become stray flex items.
The child selector is deliberately `> *` and not `> li`: despite the ul, the
theme's product loop outputs Bootstrap column DIVs as the direct children, so
an li selector matches nothing. Checked against the live grid, where all 14
children are div.col-lg-6. */
ul.products > *:nth-child(2n+1),
.blog-listing .blog-listing-loop:nth-child(2n+1) {
clear: left;
}
/* ---- Product caption: out of the corner, into the flow ----------------- */
/* float + clear rather than a plain static block: the figure above is still
float:left, and an unfloated sibling ignores floats entirely, so the caption
landed back on top of the photo. This is the same shape .blog-block uses for
its figure and title. */
.merchandise-section .merchandise-block .caption,
.inner-merchandise .merchandise-block .caption {
position: static;
float: left;
clear: both;
width: 100%;
min-width: 0;
margin: 20px 0 0 0;
padding: 0;
background: none;
/* Centred to match the blog cards, which centre both the title and the date.
The old overlay panel was right-aligned because it sat in the corner. */
text-align: center;
transform: none;
}
/* The old caption skewed itself and then un-skewed its contents to keep the
text upright. With the panel gone, both halves of that go. */
.merchandise-section .merchandise-block .caption a,
.inner-merchandise .merchandise-block .caption a {
display: block;
transform: none;
border-bottom: none;
}
.merchandise-section .merchandise-block .caption span.product-from,
.merchandise-section .merchandise-block .caption span.amount,
.inner-merchandise .merchandise-block .caption span.product-from,
.inner-merchandise .merchandise-block .caption span.amount {
display: inline;
transform: none;
}
/* ---- Titles ------------------------------------------------------------ */
/* Product title and /blog title, both matched to .blog-section .blog-block
.title. The product title is a , so the selectors carry a type as well. */
.blog-listing .blog-block .title,
.merchandise-section .merchandise-block .caption p,
.inner-merchandise .merchandise-block .caption p {
width: 100%;
padding: 0;
margin: 0;
font-size: 30px;
line-height: 110%;
font-weight: normal;
color: #3a3738;
font-family: "ShowMetheMono", "Traverse60", sans-serif;
transform: none;
}
.blog-listing .blog-block .title a,
.merchandise-section .merchandise-block .caption a,
.inner-merchandise .merchandise-block .caption a {
color: #3a3738;
word-wrap: break-word;
}
/* The product title used to fade to 70% opacity on hover. Blog titles go green,
so product titles now do too. */
.blog-listing .blog-block .title a:hover,
.merchandise-section .merchandise-block .caption a:hover p,
.inner-merchandise .merchandise-block .caption a:hover p {
color: #21a119;
opacity: 1;
}
/* ---- Secondary line: post date and price ------------------------------- */
/* Matched to .blog-section .blog-block span: 14px, italic, --text-grey. The
price was 22-30px in brand green, which is why it read as the loudest thing
in the grid. */
.blog-listing .blog-block span,
.blog-listing .blog-block .postdate,
.merchandise-section .merchandise-block .caption span,
.inner-merchandise .merchandise-block .caption span {
display: block;
width: 100%;
padding: 0;
margin: 4px 0 0 0;
font-size: 14px;
font-style: italic;
line-height: normal;
color: var(--text-grey);
font-family: "ShowMetheMono", "Traverse60", sans-serif;
}
/* "from" sat in green italic at 16px next to the amount. It is part of the same
grey line now, so it just inherits. */
.merchandise-section .merchandise-block .caption span.product-from,
.merchandise-section .merchandise-block .caption span.amount,
.inner-merchandise .merchandise-block .caption span.product-from,
.inner-merchandise .merchandise-block .caption span.amount {
font-size: inherit;
font-style: inherit;
color: inherit;
font-family: inherit;
}
/* ---- Responsive steps, mirroring .blog-section .blog-block .title ------- */
@media (max-width: 1200px) {
.blog-listing .blog-block .title,
.merchandise-section .merchandise-block .caption p,
.inner-merchandise .merchandise-block .caption p {
font-size: 24px;
}
}
@media (max-width: 1024px) {
.blog-listing .blog-block .title,
.merchandise-section .merchandise-block .caption p,
.inner-merchandise .merchandise-block .caption p {
font-size: 20px;
}
}
@media (max-width: 960px) {
.blog-listing .blog-block .title,
.merchandise-section .merchandise-block .caption p,
.inner-merchandise .merchandise-block .caption p {
font-size: 25px;
}
/* The old caption had its own padding and min-width at this breakpoint. */
.merchandise-section .merchandise-block .caption,
.inner-merchandise .merchandise-block .caption {
min-width: 0;
padding: 0;
}
}
@media (max-width: 767px) {
.blog-listing .blog-block .title,
.merchandise-section .merchandise-block .caption p,
.inner-merchandise .merchandise-block .caption p {
font-size: 20px;
}
}
@media (max-width: 600px) {
.blog-listing .blog-block .title,
.merchandise-section .merchandise-block .caption p,
.inner-merchandise .merchandise-block .caption p {
font-size: 16px;
}
}
/* ===========================================================================
MY ACCOUNT: EDIT ADDRESS FORM, MATCHED TO CHECKOUT. Added 2026-07-28.
/my-account/edit-address/billing/ and /shipping/ were rendering on
WooCommerce's own form styling — white fields with a dark 1px border, labels
in Traverse60 at 700, and a 36px heading — while the checkout collects the
very same billing fields in filled #f6f6f7 boxes, ShowMetheMono throughout,
and a 24px underlined heading. Same data, same task, two different forms.
The values below are measured off the live checkout, field by field:
text input ShowMetheMono 14px / 700, #f6f6f7 on a matching 1px border,
4px radius, padding 7px 7px 7px 15px
select as above at 15px, padding 7.5px 45px 7.5px 15px (the 45px
right inset clears the chevron background-image)
label ShowMetheMono 16px / 400, 5px below
placeholder 400 and #a3a3a3, so only typed values read as bold
heading ShowMetheMono 24px / 800, 1px #ccc underline, 15px indent so
it lines up with the text inside the fields under it
Scoped to body.woocommerce-edit-address, which WooCommerce puts on this
endpoint only. Two body classes are used rather than one so these rules
outrank woocommerce.css's `.woocommerce form .form-row .input-text`, which
is an exact specificity tie with the single-class version and would then be
settled by stylesheet order.
NOT DONE HERE, deliberately:
- /my-account/edit-account/ uses different markup (.login-input) and already
has the grey fields, but is still on Traverse60 at 15px. Worth a matching
pass, but it is a separate form.
- Checkout has no visible focus state on its fields, so neither does this.
Matching it is the brief; both would be better off with one.
=========================================================================== */
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields .input-text,
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields input[type="text"],
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields input[type="email"],
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields input[type="tel"],
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields select {
font-family: "ShowMetheMono", "Traverse60", sans-serif;
font-weight: 700;
color: #3a3738;
background-color: #f6f6f7;
border: solid 1px #f6f6f7;
border-radius: 4px;
box-shadow: none;
height: auto;
width: 100%;
}
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields .input-text,
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields input[type="text"],
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields input[type="email"],
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields input[type="tel"] {
font-size: 14px;
padding: 7px 7px 7px 15px;
}
/* The right inset clears the chevron the theme paints as a background-image;
appearance:none is already set further up the file. */
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields select {
font-size: 15px;
padding: 7.5px 45px 7.5px 15px;
}
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields label {
font-family: "ShowMetheMono", "Traverse60", sans-serif;
font-size: 16px;
font-weight: 400;
color: #3a3738;
margin: 0 0 5px;
}
/* Each vendor prefix needs its own rule: a browser discards the whole selector
list if any selector in it is unrecognised, so these cannot be comma-merged.
Same reasoning as the checkout placeholder rules further up. */
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields input::placeholder {
font-weight: 400;
color: #a3a3a3;
opacity: 1;
}
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields input::-webkit-input-placeholder {
font-weight: 400;
color: #a3a3a3;
opacity: 1;
}
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields input::-moz-placeholder {
font-weight: 400;
color: #a3a3a3;
opacity: 1;
}
/* Unchosen dropdowns are placeholder text too, and match the inputs. */
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields select:has(option[value=""]:checked) {
font-weight: 400;
color: #a3a3a3;
}
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields select option {
font-weight: 400;
color: #3a3738;
}
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields select option[value=""] {
color: #a3a3a3;
}
/* "Billing Address" / "Shipping address", matched to the checkout's column
headings. The top margin is left as it was: this heading sits under the page
title rather than beside a second column, and needs the separation. */
body.woocommerce-account.woocommerce-edit-address form h3 {
font-family: "ShowMetheMono", "Traverse60", sans-serif;
font-size: 24px;
line-height: 24px;
font-weight: 800;
color: #3a3738;
border-bottom: 1px solid #ccc;
padding: 0 0 8px 15px;
margin-bottom: 17px;
}
/* Save / Cancel onto the same face as the rest of the form. Geometry is left
alone: the account buttons are being looked at as their own job. */
body.woocommerce-account.woocommerce-edit-address .savechanges-btn,
body.woocommerce-account.woocommerce-edit-address .cancel-btn {
font-family: "ShowMetheMono", "Traverse60", sans-serif;
}
/* ===========================================================================
MY ACCOUNT: TYPE AND BUTTONS. Added 2026-07-28.
Three things, all of them consequences of this page never having been part
of the site-wide move to Show Me the Mono:
1. One face. The headings were already on ShowMetheMono but everything under
them — the downloads list, the purchase history table, account details,
the addresses — was still inheriting Traverse60 from the body. The subtree
is set wholesale rather than selector by selector: a walk over every text
node in .my-account-top-sec turned up eleven different element types still
on Traverse, and listing them would go stale the moment a template
changes. There are no icon-font pseudo-elements inside this subtree, which
is what usually makes a blanket rule unsafe.
2. One button. The two address Edit buttons and the Edit Details / Change
Password button all use .edit-details-btn, but were picking up different
sizes and weights from rules scattered across the file — 12px against
16px, 400 against 800, and two different line-heights. They now share one
definition, matching the site's small green buttons: mono, 13px,
uppercase, 1px letterspacing on the usual -10deg skew.
3. Text centred in those buttons. Every one of them was positioned by
line-height, which is why they drifted: Logout's text sat low, the Edit
buttons' sat high. Centring is now done by inline-flex with the padding
carrying a one-pixel optical bias downward, because these labels are
uppercase-only and a line box centred on its own metrics leaves too much
room under the caps.
=========================================================================== */
body.woocommerce-account .my-account-top-sec,
body.woocommerce-account .my-account-top-sec * {
font-family: "ShowMetheMono", "Traverse60", sans-serif;
}
/* ---- The green Edit buttons -------------------------------------------- */
body.woocommerce-account .edit-details-btn {
display: inline-flex;
align-items: stretch;
padding: 0;
margin: 0;
line-height: normal;
font-weight: 400;
}
body.woocommerce-account .edit-details-btn a {
display: inline-flex;
align-items: center;
width: auto;
font-size: 13px;
font-weight: 400;
letter-spacing: 1px;
line-height: 1;
text-transform: uppercase;
color: #fff;
/* 9 over 6: uppercase has no descenders, so an even split reads high. */
padding: 9px 15px 6px;
}
/* The "/" between Edit Details and Change Password. */
body.woocommerce-account .edit-details-btn > span {
display: inline-flex;
align-items: center;
margin: 0;
font-size: 13px;
}
body.woocommerce-account .order-account-sec .edit-details-btn a:first-child {
padding-right: 6px;
}
body.woocommerce-account .order-account-sec .edit-details-btn a:last-child {
padding-left: 6px;
}
/* ---- Logout ------------------------------------------------------------- */
/* Was padding 4px 10px 2px, which pushed the word down and left the g of
"Logout" sitting on the border. Unlike the buttons above this label is mixed
case, so it gets a near-even split with the extra pixel on top. */
body.woocommerce-account .green-outline-button {
display: inline-flex;
align-items: center;
height: auto;
padding: 5px 10px 4px;
line-height: 1;
}
body.woocommerce-account .green-outline-button span {
display: block;
line-height: 1;
}
/* ---- Edit Address form: the last of the checkout match ------------------ */
/* WooCommerce appends "(optional)" to every non-required label. The checkout
has hidden it since 2026-07 (see .woocommerce-checkout .optional further up);
this brings the account forms in line rather than leaving the same field
labelled two different ways on two pages. */
body.woocommerce-account .optional {
display: none !important;
}
/* ---------------------------------------------------------------------------
Edit Account Details: the two columns line up.
The right-hand column's field list carries .login-last, which floats it right
and adds padding-right:20px. That started it 33px further in than the left
column and cropped 20px off its width, so the two headings, labels and input
boxes all began at different places. The heading also takes padding-left:20px
from .checkout-sec-right against the left column's 15px.
This is the same drift, from the same two rules, that was corrected on the
checkout in the "Checkout typography and alignment" block further up. That
fix was scoped to body.woocommerce-checkout; this is its account-page twin.
Both columns now start at their own column edge with a 15px indent.
--------------------------------------------------------------------------- */
body.woocommerce-account .checkout-sec-left ul.login-last {
float: left;
padding-right: 0;
}
body.woocommerce-account h2.checkout-sec-right {
padding-left: 15px !important;
}
/* ---------------------------------------------------------------------------
Purchase History: a wider Date column.
130px was just tight enough that a date could wrap. The 20px comes out of
Total, which no longer needs room for two figures now that refunded orders
show only what was actually paid (see myaccount/my-orders.php) — the rest of
what Total gives up goes to Product(s), which is the column that benefits
from it.
--------------------------------------------------------------------------- */
.my_account_orders .order .order-date {
width: 150px;
}
/* ===========================================================================
MY ACCOUNT: BUTTONS ON THE HEADING'S X-HEIGHT. Added 2026-07-28.
These buttons sit beside 36px headings, and both were aligned by the box
rather than by the type. Logout was centred on the h2's line box, which
includes the leading above the caps, so it read high against the word beside
it. Edit Details was simply top-aligned with its heading.
The target in both cases is the midpoint of the heading's x-height, which is
where the eye reads the line as sitting — measured in the browser at 36px
ShowMetheMono (x-height 19.8px, so 5.6px below the line-box centre for
Logout and 18.1px below the top for the floated Edit buttons).
Both offsets use `top` rather than margin: .edit-details-btn is already
position:relative for its hover glow, and shifting these visually should not
change the height of the rows they sit in.
=========================================================================== */
body.woocommerce-account .green-outline-button {
position: relative;
top: 6px;
/* One pixel of the padding moved from the bottom to the top, lifting the
word inside the frame; at 4/5 the descender of the g also clears it. */
padding: 4px 10px 5px;
}
body.woocommerce-account .order-account-sec .edit-details-btn,
body.woocommerce-account .order-addresses-title .edit-details-btn {
top: 18px;
}
/* ---- Addresses: one Edit for both, and no rules under the sub-headings --- */
/* The heading needs to stop being full-width before the button can sit next to
it, the same way .order-account-sec h2 already does. */
body.woocommerce-account .order-addresses-title h2 {
width: auto;
}
/* The 1px #ccc rule under "Billing Address" / "Shipping Address" was carrying
the per-address Edit buttons, which have been replaced by the single Edit
Addresses button beside "My Addresses". With the buttons gone the rules were
just two short lines cutting across the block. */
body.woocommerce-account .order-customer-details-bottom h2 {
border-bottom: none;
}
/* ---- The combined Billing + Shipping edit form ------------------------- */
/* Both columns' fields are already covered by the checkout-matched field rules
further up, which key off .woocommerce-address-fields. This is only the
spacing around them: the first heading loses the top margin it carries as a
lone page heading, since here it sits under the page title with its twin
beside it. */
body.woocommerce-account.woocommerce-edit-address form.edit-account-addresses h3 {
margin-top: 0;
}
body.woocommerce-account.woocommerce-edit-address .edit-addresses-submit {
width: 100%;
float: left;
margin-top: 10px;
}
/* ---------------------------------------------------------------------------
My Account > Addresses: one field per line, and a roomier Save button.
WooCommerce pairs First Name and Last Name on one line via .form-row-first
and .form-row-last. That works across the checkout's full width, but here the
two addresses are already sharing the width between them, so each half-row
was a third of a screen wide. Both columns get full-width rows, which also
keeps billing and shipping aligned with each other line for line.
Scoped to the combined form: the checkout keeps its paired name row.
--------------------------------------------------------------------------- */
body.woocommerce-account.woocommerce-edit-address .edit-account-addresses .form-row-first,
body.woocommerce-account.woocommerce-edit-address .edit-account-addresses .form-row-last {
float: none;
width: 100%;
}
/* .save-changes-btn is a fixed 156px box with the input stretched to fill it,
which left "Save Addresses" pressed against both ends. The box sizes to its
text here instead, with real padding either side. */
body.woocommerce-account.woocommerce-edit-address .edit-addresses-submit .save-changes-btn {
width: auto;
max-width: none;
padding: 2px 28px;
}
body.woocommerce-account.woocommerce-edit-address .edit-addresses-submit .savechanges-btn {
width: auto;
float: none;
display: inline-block;
}
/* ---------------------------------------------------------------------------
The blank alignment rows in the shipping column.
Added by mota_align_shipping_fields() opposite the billing-only fields (VAT №,
and the email the Stripe gateway pins to the top of billing on the checkout).
Deliberately invisible rather than an empty grey box: the point is that
nothing is being asked for here, and an empty field would read as one the
customer had failed to fill in.
Sized from the same numbers as a real field — 16px label plus its 5px gap,
then a 14px line in the input's own padding and border — so the blank grows
and shrinks with the form instead of being pinned to a pixel height. The
non-breaking spaces are what give both parts something to measure.
--------------------------------------------------------------------------- */
.mota-address-spacer {
visibility: hidden;
}
.mota-address-spacer label {
font-size: 16px;
margin: 0 0 5px;
}
.mota-address-spacer .mota-address-spacer__box {
display: block;
font-size: 14px;
line-height: normal;
padding: 7px 7px 7px 15px;
border: 1px solid transparent;
}
.mota-address-spacer .mota-address-spacer__box::before {
content: "\00a0";
}
/* ---------------------------------------------------------------------------
Focus state on the account address fields, matched to the checkout.
The checkout marks the focused field with a 1px #21a119 border (see the
.checkout-sec-left :focus rule earlier in this file). The account address
form was left without one when its field styling was first matched over,
which was a mistake: it is the only thing on either form that tells you where
the caret is, since the fields have no border of their own to change.
No !important here. The checkout's version needs it to beat the rules it sits
among; this simply adds a pseudo-class to the same selectors used by the base
field rule above, which is enough to win.
--------------------------------------------------------------------------- */
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields .input-text:focus,
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields input[type="text"]:focus,
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields input[type="email"]:focus,
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields input[type="tel"]:focus,
body.woocommerce-account.woocommerce-edit-address .woocommerce-address-fields select:focus {
background-color: #f6f6f7;
border: solid 1px #21a119;
outline: none;
}