/*
* layout.css — constrained / wide / full alignment logic.
*
* theme.json keeps useRootPaddingAwareAlignments on; the page shell applies
* root padding, and alignment classes opt content out to the wide or full
* measure. This mirrors the block-theme cascade for a classic PHP theme.
*/
:root {
--saqi-gutter: var(--wp--preset--spacing--40);
}
/* --- The grid ---
*
* Removed 2026-08-27, deliberately. A sixteen-column grid primitive lived
* here — `.saqi-grid`, `--saqi-span`, `--saqi-column-start` — and nothing in
* the theme ever used it, while its docblock described it as "the theme's
* underlying structure". It was not. Dead code that claims to be the
* structure is worse than no code.
*
* It was also the wrong shape for this design: of the eight column splits the
* redesign specifies, two land on sixteenths and two cannot be expressed at
* all (thirds, and the five-across author grid). The full working is in
* docs/GRID-AUDIT.md, which is where this comes back from if a real design
* overhaul ever wants it.
*
* This stage is a port, not a redesign. Layout here follows the measure and
* the wide opt-out below, and each block states its own proportions.
*/
/* --- Page shell --- */
.site-header,
.site-main,
.site-footer {
padding-inline: var(--saqi-gutter);
}
/*
* The flexible one of the three: see `body` in base.css. And the one place
* the gap under the header is set: 2.5rem, the dev site's 40px, on every
* page. Templates carry no top margin of their own — the entry, the page
* header, the home slider and the book page all had one, at two different
* sizes, until 2026-09-04 — so the first thing on any page sits at the
* same height.
*/
.site-main {
flex: 1 0 auto;
padding-block-start: var(--wp--preset--spacing--50);
}
/*
* And the gap over the footer is set in one place too: the footer's own top
* margin (Will, 2026-09-17). It had been that margin plus whatever the page
* ended on happened to carry — nothing after a search or a 404, an entry's or
* the pagination's 4rem on most pages, a section's 6rem on the home page, the
* book page, Events and the Authors A–Z — so the gap ran 96, 160 or 192px.
* The end of the page gives up its bottom margin, three levels down, which is
* as deep as a margin gets before a grid or flex box stops it collapsing out.
*/
.site-main > :last-child,
.site-main > :last-child > :last-child,
.site-main > :last-child > :last-child > :last-child {
margin-block-end: 0;
}
/* --- Width is the template's statement --- */
/*
* Flowing content keeps the reading measure: inside `entry-content` and
* `page-content`, prose is prose. Template scaffolding gets no default —
* every template's own wrappers say what they are: `measure` for a text
* page, `alignwide` for the redesign's 87.5rem container (Breakdance's
* `--bde-section-width`), `alignfull` to the edges. A wrapper that says
* nothing runs the full width of the main column, which is deliberately
* loud.
*
* It used to be the other way round: every direct child of `site-main`
* sat at the prose measure unless it opted out. That default came with
* the Ready.Salted fork, where it suits text-first sites — on a bookshop
* it squeezed the archives and the book page silently, because a
* forgotten opt-out still renders. Flipped 2026-08-28 (Will): a basic
* set of rules consistently applied beats matching the source, and a
* missing declaration should be visible.
*/
.entry-content > *,
.page-content > * {
max-width: var(--saqi-measure);
margin-inline: auto;
}
.site-main > .measure {
max-width: var(--saqi-measure);
margin-inline: auto;
}
.site-main > .alignwide,
.entry-content > .alignwide {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin-inline: auto;
}
.site-main > .alignfull,
.entry-content > .alignfull {
max-width: none;
margin-inline: calc(-1 * var(--saqi-gutter));
}
/*
* Shared partials and markup the theme does not write. Pagination and
* no-results are parts printed by many templates; WooCommerce prints the
* notices wrapper and the related-products section itself, so no template
* can put a class on them. They declare here, once: the partials at the
* measure, the commerce blocks at the book page's width. A pagination row
* that asks for the wide width — the shop's, under its keyline — gets it.
*/
.site-main > .navigation.pagination:not(.alignwide),
.site-main > .no-results {
max-width: var(--saqi-measure);
margin-inline: auto;
}
.site-main > .woocommerce-notices-wrapper,
.site-main > .home-section--related {
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin-inline: auto;
}
.entry-content > .alignleft {
float: left;
margin-inline: 0 var(--wp--preset--spacing--40);
}
.entry-content > .alignright {
float: right;
margin-inline: var(--wp--preset--spacing--40) 0;
}
/* --- Sections --- */
/*
* A section is a band of the page: it sets vertical rhythm and, when it goes
* wide or full, keeps its own contents at the reading measure. This is layout,
* not a component — templates write the markup directly:
*
*
*/
.saqi-section {
display: flow-root;
}
.saqi-section.has-background {
padding-inline: var(--wp--preset--spacing--40);
}
.saqi-section--space-none {
padding-block: 0;
}
.saqi-section--space-small {
padding-block: var(--wp--preset--spacing--40);
}
.saqi-section--space-medium {
padding-block: var(--wp--preset--spacing--60);
}
.saqi-section--space-large {
padding-block: var(--wp--preset--spacing--70);
}
.saqi-section__inner {
margin-inline: auto;
}
.saqi-section:not(.alignwide):not(.alignfull) .saqi-section__inner {
max-width: var(--wp--style--global--content-size, var(--saqi-measure, 44.44rem));
}
/* --- Header layout ---
*
* The header itself is under "Site chrome", below. What is left here is the
* text branding, which the footer uses.
*/
.site-title {
margin: 0;
font-size: var(--wp--preset--font-size--xl);
}
.site-title a {
text-decoration: none;
color: inherit;
}
.site-description {
margin: 0;
color: var(--wp--preset--color--muted);
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--sm);
}
/* --- Post list --- */
.post-list {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--60);
margin-block: var(--wp--preset--spacing--60);
}
.page-header {
margin-block: 0 var(--wp--preset--spacing--50);
}
/* "12 books" on a search, "Showing 1–20 of 349 results" on a browsed archive. */
.page-header__count {
margin: 0;
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--sm);
color: var(--wp--preset--color--muted);
}
/*
* The shop's header is a row on the shop's own five tracks — the same split
* as `.saqi-shop` beneath it — with everything on one baseline (Will,
* 2026-09-11): the title over the browse column, an imprint's description
* over the first book, and the count at the right-hand edge. It steps down
* with the shop, to four tracks then a stack.
*/
.page-header--shop {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
column-gap: 1.875rem;
row-gap: var(--wp--preset--spacing--30);
align-items: baseline;
}
/*
* The title starts at the left edge, over the browse column, and runs across
* four tracks to the count (Will, 2026-09-16). From 14 September it had
* started on the second track, over the first book, with the browse column's
* track empty above the keyline; the 11 September row had it over the browse
* column with an imprint's description beside it. The description went (see
* archive-product.php) and, after two days on the second track, the title
* came back to the edge, where every other page's is. A search's "Search
* results for: …" has four tracks to run across now rather than three.
*/
.page-header--shop .page-title {
grid-column: 1 / span 4;
margin-block-end: 0;
}
.page-header--shop .page-header__count {
grid-column: 5;
text-align: end;
white-space: nowrap;
}
/*
* A keyline between the header row and the shelf, the width of the shelf —
* over the browse column and the grid alike, the way a rule heading runs the
* width of its section (Will, 2026-09-11). Every product archive: the shop,
* the imprints, the subjects and the search all come through this header.
*/
.page-header--shop {
margin-block-end: var(--wp--preset--spacing--40);
}
.page-header--shop + .saqi-shop {
padding-block-start: var(--wp--preset--spacing--50);
border-block-start: 1px solid var(--wp--preset--color--rule);
}
@media (max-width: 63.9375rem) {
.page-header--shop {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.page-header--shop .page-title {
grid-column: 1 / span 3;
}
.page-header--shop .page-header__count {
grid-column: 4;
}
}
@media (max-width: 47.9375rem) {
.page-header--shop {
grid-template-columns: minmax(0, 1fr);
}
.page-header--shop .page-title,
.page-header--shop .page-header__count {
grid-column: auto;
text-align: start;
}
}
/*
* A no-results block inside the shop's results column sits beside the
* browse column, which starts at the top; the block's own header must not
* push it down a page-header's worth.
*/
.saqi-shop__results .no-results .page-header {
margin-block-start: 0;
}
/* --- The search form, and the 404 ---
*
* The form on the 404 and under "No books found" — the header's is
* FiboSearch's and styled with it, above. Field and button on one row: the
* account page's field and its filled button, which are the footer's
* newsletter pair, so every form on the site is the same form.
*
* `base.css` gives `.search-field` and `.search-submit` the starter's plain
* box; these selectors are one class more specific and replace it.
*/
.search-form {
display: flex;
gap: 0.5rem;
margin-block: var(--wp--preset--spacing--40);
font-family: var(--wp--preset--font-family--sans);
}
.search-form .search-field {
flex: 1 1 auto;
min-width: 0;
padding: 0.75rem 1rem;
border: 1px solid var(--wp--preset--color--rule);
border-radius: 3px;
background-color: var(--wp--preset--color--background);
/* 1rem, as the account field: under 16px, iOS zooms the page on focus. */
font-size: var(--wp--preset--font-size--base);
line-height: 1.2;
color: var(--wp--preset--color--foreground);
}
.search-form .search-field:focus-visible {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 1px;
border-color: var(--wp--preset--color--accent);
}
.search-form .search-submit {
flex: 0 0 auto;
padding: 0.875rem 1.5rem;
border: 1px solid var(--wp--preset--color--accent);
border-radius: 3px;
background-color: var(--wp--preset--color--accent);
font-family: var(--wp--preset--font-family--sans);
/* The account button's label size: chrome, below the scale's floor. */
font-size: var(--wp--preset--font-size--2-xs);
font-weight: 500;
letter-spacing: var(--wp--custom--tracking--caps);
text-transform: uppercase;
line-height: 1;
color: var(--wp--preset--color--background);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.search-form .search-submit:hover,
.search-form .search-submit:focus-visible {
background-color: var(--wp--preset--color--background);
color: var(--wp--preset--color--accent);
}
/* The 404's "Or start from" — a muted label over a row of links set the
* way the primary navigation is: small sans capitals, tracked. */
.error-404__ways {
margin-block-start: var(--wp--preset--spacing--50);
}
.error-404__ways-label {
margin: 0 0 var(--wp--preset--spacing--20);
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--sm);
color: var(--wp--preset--color--muted);
}
.error-404__links {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
margin: 0;
padding: 0;
list-style: none;
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
letter-spacing: var(--wp--custom--tracking--caps);
text-transform: uppercase;
}
.error-404__links a {
color: var(--wp--preset--color--foreground);
text-decoration: none;
border-block-end: 1px solid var(--wp--preset--color--rule);
}
.error-404__links a:hover,
.error-404__links a:focus-visible {
color: var(--wp--preset--color--accent);
border-color: var(--wp--preset--color--accent);
}
.entry {
margin-block: 0 var(--wp--preset--spacing--60);
}
.entry-meta {
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--sm);
color: var(--wp--preset--color--muted);
}
.entry-featured-image {
margin-block: var(--wp--preset--spacing--50);
}
.entry-standfirst {
margin-block-end: var(--wp--preset--spacing--50);
font-size: var(--wp--preset--font-size--lg);
line-height: 1.45;
color: var(--wp--preset--color--muted);
}
.entry-standfirst > :first-child {
margin-top: 0;
}
.entry-standfirst > :last-child {
margin-bottom: 0;
}
/* --- Contact: the social row ---
*
* The header's four icons, under the column that mentions them. Same 18px
* glyphs in the same 38px boxes, so a thumb has something to hit; mid grey
* to the accent on the rollover, as in the header. The first box hangs left
* by its own padding so the first glyph sits on the column's edge.
*/
.saqi-social-links {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: var(--wp--preset--spacing--30) 0 0;
padding: 0;
list-style: none;
}
/* The row is the first thing in its own block, where the page-columns
component zeroes a first child's top margin; so the space above it was
only the boxes' padding, 10px to the glyphs. 1.5rem clear of the text
instead (Will, 2026-09-17), and specific enough to outrank that reset. */
.saqi-page-columns__body > ul.saqi-social-links {
margin-block-start: var(--wp--preset--spacing--40);
}
.saqi-social-links li {
margin: 0;
}
.saqi-social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px;
color: var(--wp--preset--color--muted);
}
.saqi-social-links li:first-child a {
margin-inline-start: -10px;
}
.saqi-social-links a:hover,
.saqi-social-links a:focus-visible {
color: var(--wp--preset--color--accent);
}
/* --- Prose, and the information pages ---
*
* The information pages — About, Getting Published, Careers, Permissions /
* Rights, Inspection Copies, Trade Sales, FAQs, Shipping Information and the
* three policies — are one shape from 2026-09-16 (Will): the title at the
* page's edge, then the page's sections as rows on the five tracks, each
* with its name in the first track and its content across 3–4, a track of
* air between (Will, 2026-09-16; it was 2–4 that morning). That is the
* `page-sections` component. `page.php` makes rows of a prose page by
* splitting its copy at its headings (`inc/prose.php`); the ACF pages name
* their rows themselves. About keeps the redesign's tab widget, on the same
* tracks, because its three panels are three readings of one subject rather
* than three things to find; the tabs on Permissions / Rights and Trade
* Sales went, since a reader after a sales rep should not have to know
* which tab they are behind.
*
* Two kinds of content sit in a row, and each is set one way everywhere:
*
* .serif-prose running text — the serif at the scale's `prose` step,
* 1.1rem (`base.css`), the size the builder's own "Serif
* Paragraph" preset set for a run of prose, over 1.5. Three tracks is 818px at
* 1440, and Inter at `sm` across that is a 125-character
* line; the serif is about 95, a page and not a
* spreadsheet. The dev build's figures for About's panels
* at 1440px: body 17.6px over 26.4px.
* .saqi-directory addresses — Inter at `sm`, below.
*
* Inside a run of prose a subhead (h2–h5) is the Caslon subhead in the light
* grey — the level "International Publishing Since 1983" has in About's
* panel, and a region has in a directory — and Careers' inner h1, the job
* title under the page's own, is a Caslon subtitle. A page's own section
* headings are not in here: they are the rows' labels.
*/
.serif-prose {
line-height: 1.5;
}
.serif-prose p {
margin-block: 0 1em;
}
.serif-prose h1 {
margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
font-family: var(--wp--preset--font-family--serif);
font-size: var(--wp--preset--font-size--xl);
font-weight: 400;
}
.serif-prose :is(h2, h3, h4, h5) {
margin-block: 1.5em 0.5em;
font-family: var(--wp--preset--font-family--serif);
font-size: var(--wp--preset--font-size--subhead);
font-weight: 400;
letter-spacing: normal;
text-transform: none;
color: var(--wp--preset--color--light);
}
.serif-prose > :first-child {
margin-block-start: 0;
}
.serif-prose > :last-child {
margin-block-end: 0;
}
/*
* Bold in prose (Will, 2026-09-16). The serif is set without bold, so a
* `` is read for what it is doing — inc/prose.php marks each one:
*
* heading a bold label on its own line, followed by a break: the sales
* agents' regions. Inter. (A paragraph that is all bold is a
* section's title, and `page.php` has made it a row's label
* before the copy gets here.)
* lead-in bold opening words run into the text, as after a bullet. Italic.
*
* Anything else — bold mid-sentence, or inside a heading that is already
* styled — loses its emphasis. The rule without a class is the fallback, so a
* page whose markup could not be read still sets no bold in the serif.
*/
.serif-prose :is(strong, b) {
font-weight: inherit;
}
.serif-prose :is(strong, b).saqi-bold--heading {
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--base);
font-weight: 600;
letter-spacing: var(--wp--custom--tracking--label);
}
.serif-prose :is(strong, b).saqi-bold--lead-in {
font-style: italic;
}
/*
* The rows follow the title at About's 60px, as its tabs do.
*
* A page that is one column — the newsletter, the account page and the
* login, a prose page with no headings — is `entry--column`: on tracks 2–4,
* title included, with the first track empty as it is above the rows' labels
* (Will, 2026-09-16). It reads as one column rather than a title at the edge
* over a column that is not there (the 14 September rule), and it is three
* tracks wide where the rows' copy is two, because there is no label beside
* it to hold the air. The column is the measure: the content's children fill
* it rather than sitting at the reading measure inside it.
*/
.entry-header + :is(.saqi-tabs, .saqi-sections) {
margin-block-start: 3.75rem;
}
@media (min-width: 64rem) {
.entry--column {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
column-gap: 1.5rem;
align-items: start;
}
.entry--column > * {
grid-column: 2 / span 3;
}
}
.entry--column .entry-content > * {
max-width: none;
margin-inline: 0;
}
/* The title's own margin is 20px; this makes it About's 60. */
.entry--column > .entry-header + .entry-content {
margin-block-start: var(--wp--preset--spacing--50);
}
/*
* The newsletter page (`page-newsletter.php`): a prose page whose copy is
* a sentence and then the footer's form — the same Ground.Rules signup,
* stored here and relayed to Klaviyo. The field and the button sit in a row
* rather than the footer's stack, because there is room; the consent and
* privacy lines run under them. The form's own styling is shared with the
* footer's below, keyed on `.saqi-newsletter`; these selectors carry one
* class more than those, because the shared rules come later in the file and
* would otherwise win on source order. The row was the events landing's last
* section until 2026-09-14 (Will), when the form got a page of its own and
* the landing a link to it.
*/
.entry--newsletter .saqi-newsletter {
margin-block-start: var(--wp--preset--spacing--40);
}
/* Inter, not the prose pages' Caslon: a sentence and a form are an
instruction, not an essay (Will, 2026-09-14). */
.entry--newsletter .entry-content {
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--base);
line-height: 1.6;
}
.entry--newsletter .saqi-newsletter .groundrules-signup__form {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem var(--wp--preset--spacing--30);
}
.entry--newsletter .saqi-newsletter .groundrules-signup__field {
flex: 1 1 16rem;
order: 1;
}
.entry--newsletter .saqi-newsletter .groundrules-signup__field input[type="email"] {
/* 1rem, as the search field: under 16px, iOS zooms the page on focus. */
font-size: var(--wp--preset--font-size--base);
}
.entry--newsletter .saqi-newsletter .groundrules-signup__submit {
flex: 0 0 auto;
order: 2;
width: auto;
/* The field's height, so the pair sit as one row. */
padding-block: 0.9375rem;
padding-inline: 2rem;
font-size: var(--wp--preset--font-size--2-xs);
}
.entry--newsletter .saqi-newsletter .groundrules-signup__consent,
.entry--newsletter .saqi-newsletter .groundrules-signup__privacy {
flex: 1 1 100%;
order: 3;
font-size: var(--wp--preset--font-size--xs);
}
/* --- Footer --- */
.site-footer {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--wp--preset--spacing--30);
margin-top: var(--wp--preset--spacing--70);
padding-block: var(--wp--preset--spacing--50);
border-top: 1px solid var(--wp--preset--color--rule);
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--sm);
color: var(--wp--preset--color--muted);
}
.footer-navigation .menu {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--40);
margin: 0;
padding: 0;
list-style: none;
}
.footer-navigation a {
color: inherit;
text-decoration: none;
}
/* --- Pagination ---
*
* Live's, in this site's type (Will, 2026-09-16): one centred run of circles
* — previous, the page numbers, next — 40px across and 10px apart, the
* current page ringed in the keyline grey, the two ends bare arrows, all in
* the serif. Measured off the trading site's shop. It had been three cells,
* Previous and Next in small tracked caps at the two edges and the current
* page a filled square (2026-09-14). `parts/pagination.php` prints the run.
*/
.pagination {
margin-block: var(--wp--preset--spacing--60);
font-family: var(--wp--preset--font-family--serif);
font-size: var(--wp--preset--font-size--base);
}
/* Under the shop, the row sits beneath a keyline the width of the shop — the
header's, mirrored — with the same clearance the shelf has under the
header's. */
.saqi-shop + .pagination {
margin-block-start: var(--wp--preset--spacing--60);
padding-block-start: var(--wp--preset--spacing--50);
border-block-start: 1px solid var(--wp--preset--color--rule);
}
.pagination .nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
}
/* A circle that grows into a pill for a three-digit page, rather than
squeezing it. The border is always there, transparent, so ringing the
current page moves nothing. */
.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 2.5rem;
height: 2.5rem;
padding-inline: 0.375rem;
/* 1px, not live's 2px: a hairline ring, the weight of the site's keylines
(Will, 2026-09-16). */
border: 1px solid transparent;
border-radius: 999px;
font-variant-numeric: lining-nums tabular-nums;
line-height: 1;
color: var(--wp--preset--color--foreground);
text-decoration: none;
}
.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus-visible {
color: var(--wp--preset--color--accent);
}
.pagination .page-numbers.current {
border-color: var(--wp--preset--color--rule);
}
/* Nine circles and their gaps are wider than a phone; closed up and a little
smaller, the longest run — an arrow, the first page, an ellipsis, three
pages, an ellipsis, the last, an arrow — fits a 375px screen. */
@media (max-width: 47.9375rem) {
.pagination .nav-links {
gap: 0;
}
.pagination .page-numbers {
min-width: 2.25rem;
height: 2.25rem;
}
}
/* --- Events ---
*
* The archive is the builder's `Single Page: Events` loop: the same event card
* the home page uses, in a wider grid. The gap is `post-51984.css`'s, not an
* estimate — 40px between cards where the home page has 25.
*
* The builder also ruled every card with a 1px #DDD keyline above it, and 20px
* under that. Dropped (Will, 2026-09-04): the cards are separated by the gap
* alone, the way they are on the home page.
*
* The steps are Breakdance's own breakpoints, 1023 and 767, which is why they
* are not the theme's usual 48rem — the same reason the home grids below carry
* odd ones. The card stacks its own two columns at 1119px; that belongs to the
* component, not to this grid.
*
* The `--lineup-*` properties are Line.Up's own styling hooks: the plugin's
* stylesheet is written entirely against custom properties, so this is how its
* details block and any [lineup] listing pick up the site's type and rules
* without a specificity fight.
*/
.events-section {
margin-block: var(--wp--preset--spacing--70);
}
.event-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 40px;
margin-block: var(--wp--preset--spacing--50);
}
@media (max-width: 63.9375rem) {
.event-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 47.9375rem) {
.event-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* A sentence, inside a section declared 1400px wide for the grid's sake. It
keeps the reading measure rather than the container's — and body size, not
`lg`: a notice that nothing is on should not be the loudest thing on the
page (Will, 2026-09-11). */
.events-empty {
max-width: var(--saqi-measure);
margin-block: var(--wp--preset--spacing--50);
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--sm);
color: var(--wp--preset--color--muted);
}
.events-more {
margin-block: var(--wp--preset--spacing--50);
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--sm);
}
/*
* A single event: the book page's grid. Five tracks, the poster across the
* first two with the picture inset 5rem, and the title, the when-and-where
* block and the description on tracks 3–4 beside it — the book page's cover
* and panel exactly, so the two pages read as one design. The redesign's own
* template settled the two-column shape and nothing else (see
* single-lineup_event.php).
*
* The title used to run across both columns with the poster under it; since
* 2026-09-14 (Will) it starts on track 3 and the poster comes up to the top,
* level with it, which is where the book page keeps its cover.
*/
.event-single {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
column-gap: 1.5rem;
align-items: start;
}
.event-single__header {
grid-column: 3 / span 2;
grid-row: 1;
margin-block-end: var(--wp--preset--spacing--40);
}
.event-single__aside {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
padding-inline: 5rem;
}
/* The book page's copy, since the page is the book page's grid: About the
Book's Inter at `sm` over 1.6, in the same two-track panel. It ran at
the body's 16px until 2026-09-16, the one description in that panel that
did; the redesign had no description on an event to measure. */
.event-single__body {
grid-column: 3 / span 2;
grid-row: 2;
max-width: 40rem;
font-size: var(--wp--preset--font-size--sm);
line-height: 1.6;
}
/* The `.entry-content > *` measure does not apply here; the column is one. */
.event-single__body > * {
max-width: none;
margin-inline: 0;
}
.event-single__poster {
margin: 0;
}
.event-single__image {
display: block;
width: 100%;
height: auto;
/* The cards' and the cover's shadow, the dev site's own on this page too. */
box-shadow: var(--wp--custom--shadow--card);
}
/* The book the event is about, under the poster, as a card. */
.event-single__book {
margin-block-start: var(--wp--preset--spacing--50);
padding-block-start: var(--wp--preset--spacing--40);
border-block-start: 1px solid var(--wp--preset--color--rule);
}
.event-single__book-heading {
margin: 0 0 var(--wp--preset--spacing--30);
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--3-xs);
font-weight: 600;
letter-spacing: var(--wp--custom--tracking--caps);
text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
/*
* "All past events", one link in one style wherever it appears — under a
* single event, and under the landing's Recently (Will, 2026-09-16). The
* landing's had been a sentence-case "Browse every past event" in the body
* link style, so the same destination looked like two different things.
*/
.events-past-link {
margin-block: var(--wp--preset--spacing--50) 0;
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--2-xs);
font-weight: 500;
letter-spacing: var(--wp--custom--tracking--caps);
text-transform: uppercase;
}
.events-past-link a {
color: var(--wp--preset--color--accent);
text-decoration: none;
}
.events-past-link a:hover,
.events-past-link a:focus-visible {
color: var(--wp--preset--color--foreground);
}
@media (max-width: 63.9375rem) {
.event-single {
grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
column-gap: 2rem;
}
.event-single__header,
.event-single__body {
grid-column: 2;
}
.event-single__aside {
grid-column: 1;
padding-inline: 0;
}
}
@media (max-width: 47.9375rem) {
.event-single {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--wp--preset--spacing--40);
}
.event-single__header,
.event-single__aside,
.event-single__body {
grid-column: 1;
grid-row: auto;
}
.event-single__header {
margin-block-end: 0;
}
/* The poster stops filling the column on a phone. */
.event-single__aside {
max-width: 16rem;
}
}
.lineup-details,
.lineup-list {
--lineup-title-font: var(--wp--preset--font-family--serif);
--lineup-date-font: var(--wp--preset--font-family--sans);
--lineup-muted: var(--wp--preset--color--muted);
--lineup-border-color: var(--wp--preset--color--rule);
--lineup-accent: var(--wp--preset--color--accent);
}
/*
* The when-and-where block: label and value on a row, the labels in the book
* specification's small tracked caps on the same fixed column, under a
* keyline before the description. Line.Up prepends it to the content, so it
* heads the right column by itself. Line.Up's own stylesheet draws the block
* as a bordered, rounded panel and loads after this file, so every rule here
* carries the page's class to outrank it.
*/
.event-single .lineup-details {
display: grid;
gap: 0.5rem;
margin: 0 0 var(--wp--preset--spacing--50);
padding: 0 0 var(--wp--preset--spacing--40);
border: 0;
border-radius: 0;
border-block-end: 1px solid var(--wp--preset--color--rule);
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--sm);
line-height: 1.5;
}
.event-single .lineup-details__row {
display: grid;
grid-template-columns: 6.5rem minmax(0, 1fr);
gap: 0.5rem 1rem;
align-items: baseline;
margin: 0;
}
/* The book specification's label, at its size: `3xs` is the 11.2px the dev
build sets it, and the badge and the book heading below take the same, so
the site has one small tracked cap rather than 11px here and 11.2px there
(2026-09-16). */
.event-single .lineup-details__label {
min-width: 0;
font-size: var(--wp--preset--font-size--3-xs);
font-weight: 600;
letter-spacing: var(--wp--custom--tracking--caps);
text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
.event-single .lineup-details__row a {
color: var(--wp--preset--color--accent);
}
/* Booking is the one thing to do on an upcoming event: it is the book
page's buy button, the same 42px on the accent. */
.event-single .lineup-details__row--booking {
margin-block-start: 0.5rem;
}
.event-single .lineup-details__row--booking a {
display: inline-flex;
/* A grid item stretches to its cell; the button is as wide as a button. */
justify-self: start;
align-items: center;
justify-content: center;
min-width: 16rem;
min-height: 2.625rem;
padding: 0.5rem 1.5rem;
border: 1px solid var(--wp--preset--color--accent);
border-radius: 3px;
background-color: var(--wp--preset--color--accent);
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
line-height: 1;
color: var(--wp--preset--color--background);
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.event-single .lineup-details__row--booking a:hover,
.event-single .lineup-details__row--booking a:focus-visible {
background-color: var(--wp--preset--color--background);
color: var(--wp--preset--color--accent);
}
/* Cancelled or postponed: Line.Up's badge, in the theme's small caps. */
.event-single .lineup-badge {
display: inline-block;
padding: 0.2rem 0.5rem;
border-radius: 3px;
background-color: var(--wp--preset--color--orange);
font-size: var(--wp--preset--font-size--3-xs);
font-weight: 600;
letter-spacing: var(--wp--custom--tracking--caps);
text-transform: uppercase;
color: var(--wp--preset--color--background);
}
@media (max-width: 29.9375rem) {
.event-single .lineup-details__row {
grid-template-columns: minmax(0, 1fr);
gap: 0.15rem;
}
}
/* --- About page ---
*
* The one page in the design with a sidebar: the tab widget on the left, the
* testimonials running down the right. It stacks below the breakpoint, quotes
* last, because on a phone the quotes are an aside in the literal sense.
*/
/*
* The leading margin is 60px, not a token: that is the distance from the bottom
* of the title to the top of the tabs on the dev build — 10px of section
* padding under the heading and 50px over the tabs — and the two tokens either
* side of it are 40 and 64.
*
* The heading's own bottom margin collapses into this one, so the figure holds.
* The tabs' leading margin does not collapse out of a grid item, though, so it
* has to come off below or the tabs land 40px further down again.
*/
.about-layout {
display: grid;
gap: var(--wp--preset--spacing--60);
margin-block: 3.75rem var(--wp--preset--spacing--50);
}
.about-layout__main > .saqi-tabs:first-child {
margin-block-start: 0;
}
@media (min-width: 48rem) {
.about-layout {
/* 80/20, which is what the builder's two columns are. It was 2fr/1fr
here, i.e. 67/33 — a different page. */
grid-template-columns: minmax(0, 80fr) minmax(0, 20fr);
gap: var(--wp--preset--spacing--70);
}
}
/*
* From the width the tabs run vertical, the page is on its five tracks: the
* main column takes four and the testimonials the fifth, and the tabs inside
* the main column know it has four (`--saqi-tabs-tracks`), so the tablist is
* track 1 and the panel spans 2–3, two tracks wide as the information pages'
* copy is (Will, 2026-09-11; the width, 2026-09-16).
*/
@media (min-width: 64rem) {
.about-layout {
grid-template-columns: repeat(5, minmax(0, 1fr));
column-gap: 1.5rem;
}
.about-layout__main {
grid-column: span 4;
--saqi-tabs-tracks: 4;
}
.about-layout__aside {
grid-column: 5;
}
}
/*
* One column, Company then Book, at every width. The builder ran the two lists
* side by side, which worked on the 14 and 18 rows the redesign had; live's
* Book Awards are 68 and the pair became one short column beside one four times
* its length. Stacked, each list is read rather than compared.
*/
.about-awards {
display: grid;
gap: var(--wp--preset--spacing--60);
}
/*
* Company Awards and Book Awards are subheads inside the tab widget, the same
* thing "International Publishing Since 1983" is in the About panel — so they
* are set the same way, and the panels read as one page rather than three.
* The dev build agrees: Caslon at 20.8px in the light grey, not the theme's
* uppercase micro-label.
*/
.about-awards__heading {
margin-block: 0 var(--wp--preset--spacing--30);
font-family: var(--wp--preset--font-family--serif);
font-size: var(--wp--preset--font-size--subhead);
font-weight: 400;
letter-spacing: normal;
text-transform: none;
color: var(--wp--preset--color--light);
}
.about-layout__aside > * + * {
margin-block-start: var(--wp--preset--spacing--50);
}
/* --- The directory ---
*
* A list of addresses under region headings — Trade Sales' three rows, the
* sub-agents on Permissions / Rights — set one way everywhere: Inter at `sm`,
* a Caslon subhead per region in the light grey, the company in bold, an
* address that breaks rather than clips (Will, 2026-09-11). The other kind of
* content a row holds is `serif-prose`, above.
*/
.saqi-directory {
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--sm);
line-height: 1.6;
}
.saqi-directory h3 {
margin-block: 1.5em 0.5em;
font-family: var(--wp--preset--font-family--serif);
font-size: var(--wp--preset--font-size--subhead);
font-weight: 400;
color: var(--wp--preset--color--light);
}
.saqi-directory > :first-child {
margin-block-start: 0;
}
.saqi-directory > :last-child {
margin-block-end: 0;
}
.saqi-directory a {
overflow-wrap: anywhere;
}
/* --- Authors page --- */
.authors-section {
margin-block: var(--wp--preset--spacing--70);
}
.authors-section__title {
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--sm);
font-weight: 600;
letter-spacing: var(--wp--custom--tracking--caps);
text-transform: uppercase;
color: var(--wp--preset--color--muted);
padding-block-end: var(--wp--preset--spacing--20);
border-block-end: 1px solid var(--wp--preset--color--rule);
}
/* --- Rule heading ---
*
* The builder's FancyDivider: a centred label with a keyline running out to
* both edges. Used on Authors for Featured and Index, and the home page has
* six more of them waiting.
*/
.rule-heading {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--40);
margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--lg);
font-weight: 600;
letter-spacing: var(--wp--custom--tracking--caps);
text-transform: uppercase;
color: var(--wp--preset--color--foreground);
text-align: center;
}
.rule-heading::before,
.rule-heading::after {
content: "";
flex: 1 1 0;
border-block-start: 1px solid var(--wp--preset--color--rule);
}
/*
* A page whose first thing under the title is a rule heading — Authors, the
* events landing — puts it 60px below, the same gap About keeps between its
* title and its tabs. The section's own margin and the heading's collapsed
* to 96px there, which read as the title and the page being two things
* (Will, 2026-09-11). The header's margin collapses into this one. The past
* events archive, whose grid comes straight after the title with no heading,
* keeps the same 60px (2026-09-16); it had 40.
*/
.entry-header + .authors-section,
.page-header + .events-section,
.page-header + .event-grid {
margin-block-start: 3.75rem;
}
.entry-header + .authors-section > .rule-heading:first-child,
.page-header + .events-section > .rule-heading:first-child {
margin-block-start: 0;
}
/* --- Home page ---
*
* The builder's own grids and its own breakpoints: products five across
* stepping 5 / 3 / 2 / 1, events three across stepping 3 / 2 / 1, both with a
* 25px gap. Its breakpoints are 1119 / 1023 / 767 / 479px, which is why these
* are not the theme's usual 48rem.
*/
.home-section {
margin-block: var(--wp--preset--spacing--70);
}
/*
* The first section sits directly under the slider, and the slider's own
* bottom margin is the whole gap — neither the section nor its rule heading
* adds to it. The dev site runs about 49px there; this is 40.
*/
.saqi-home-slider + .home-section,
.saqi-home-slider + .home-section > .rule-heading {
margin-block-start: 0;
}
/*
* Between one section and the next, the gap under the slider (Will,
* 2026-09-17): 4rem, and 2.5rem on a phone held upright, where the slider's is
* 2.5rem too (components/home-slider/style.css). It was 6rem everywhere. The
* next section's top margin carries it; its rule heading's own 4rem is taken
* out, or it would collapse into the gap and win on a phone; and a section
* that is not the last gives up its bottom margin, so only the grid's 2.5rem
* collapses in underneath. The last keeps its margin to the footer.
*/
.home > .home-section + .home-section {
margin-block-start: var(--wp--preset--spacing--60);
}
.home > .home-section + .home-section > .rule-heading {
margin-block-start: 0;
}
.home > .home-section:not(:last-child) {
margin-block-end: 0;
}
@media (max-width: 47.9375rem) and (orientation: portrait) {
.home > .home-section + .home-section {
margin-block-start: var(--wp--preset--spacing--50);
}
}
.home-grid {
display: grid;
gap: 25px;
margin-block: var(--wp--preset--spacing--50);
}
.home-grid--products {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.home-grid--events {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 63.9375rem) {
.home-grid--products {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 47.9375rem) {
.home-grid--products,
.home-grid--events {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 29.9375rem) {
.home-grid--products,
.home-grid--events {
grid-template-columns: minmax(0, 1fr);
}
}
/* --- Site chrome ---
*
* Replaces Breakdance's header and footer. Both builder objects were doubled —
* a desktop copy and a mobile copy of the same content — and these are single
* elements that reflow.
*
* The bar is the builder's own arrangement, read off `post-52448.css`: a
* 1400px row of three equal columns — account, basket and social left,
* wordmark centred, search right. The navigation is a separate row beneath
* it. The figures below were measured off the dev site on 2026-09-03, not
* read from the CSS, because the builder's are spread over four elements.
*/
.site-header {
/*
* Two stacked full-width rows; the starter's flex header, which made them
* shrink-to-fit, is gone from this file.
*/
display: block;
position: relative;
z-index: 10;
padding-block: 0;
/* White, whatever the page sits on — the home page's ground is cream. */
background-color: var(--wp--preset--color--background);
border-block-end: 1px solid var(--wp--preset--color--rule);
}
/*
* Three equal thirds while there is room, and never narrower than what the
* outer columns hold. `minmax(0, 1fr)` let the utility column shrink under
* its content at medium widths, and the icons — flex items, all of them —
* shrank with it, down to 4px slivers at 900px. The floor lets the outer
* columns grow together instead; the wordmark drifts off true centre by half
* the difference, which is the lesser evil.
*/
.site-header__bar {
display: grid;
grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
align-items: center;
gap: var(--wp--preset--spacing--40);
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin-inline: auto;
padding-block: var(--wp--preset--spacing--40);
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--sm);
}
/*
* Account and basket are one group and touch, box to box — two shop links
* belong together. The social row sits the builder's 25px off them.
*/
.site-header__utility {
display: flex;
align-items: center;
gap: 0;
}
.site-header__utility > * {
flex-shrink: 0;
}
/* Above the breakpoint the navigation is a row and needs no toggle. */
.site-header__toggle {
display: none;
}
.site-branding {
display: flex;
justify-content: center;
}
.site-header__search {
display: flex;
justify-content: flex-end;
}
/*
* FiboSearch's wrapper is full-width and carries a ~30px right margin of its
* own, which is what held the field off the right edge however the column was
* aligned.
*/
.site-header__search .dgwt-wcas-search-wrapp {
width: 100%;
max-width: 22rem;
margin-inline: auto 0;
}
/*
* The field in the site face. FiboSearch sets Roboto on the input and a light,
* italic placeholder of its own; the theme has one sans, and the placeholder
* is a label, not an aside. Specificity is deliberate: the plugin qualifies
* its rule with four classes and an attribute, so this carries five.
*/
.site-header .site-header__search .dgwt-wcas-search-wrapp input[type="search"].dgwt-wcas-search-input,
.site-header .site-header__search .dgwt-wcas-search-wrapp input[type="search"].dgwt-wcas-search-input::placeholder {
font-family: var(--wp--preset--font-family--sans);
font-weight: 400;
font-style: normal;
}
/*
* The cart is a 21px glyph in a 47px box (13px padding), the social icons
* 18px in 38px boxes (10px padding), 12px apart — the builder's figures, and
* what made the dev site's row look spaced where this one looked cramped:
* the glyphs were the same size but sat in boxes 20px narrower. The boxes
* are also the hit areas, and 38px is a sensible floor for a thumb.
*
* The account link takes the cart's box, being the same kind of thing. The
* count rides the corner of the cart rather than sitting beside it, so the
* cart needs to be the positioning context.
*/
.site-header__account,
.site-header__cart {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px;
color: inherit;
text-decoration: none;
}
.site-header__account-icon svg,
.site-header__cart-icon svg {
display: block;
width: 21px;
height: 21px;
}
/* No badge on an empty basket — the builder hides its counter at zero, and a
fuchsia nought is a notification about nothing. */
.site-header__cart-count[data-count="0"] {
display: none;
}
.site-header__cart-count {
position: absolute;
/* Into the padding, overlapping the glyph's top-right corner. */
top: 5px;
right: 3px;
display: grid;
place-items: center;
min-width: 1.15rem;
height: 1.15rem;
padding-inline: 0.25em;
border-radius: 100px;
background-color: var(--wp--preset--color--accent);
color: var(--wp--preset--color--background);
font-size: var(--wp--preset--font-size--2-xs);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.site-header__social a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px;
color: inherit;
text-decoration: none;
}
.site-header__account:hover,
.site-header__account:focus-visible,
.site-header__cart:hover,
.site-header__cart:focus-visible,
.site-header__social a:hover,
.site-header__social a:focus-visible,
.site-header .nav-toggle:hover,
.site-header .nav-toggle:focus-visible {
color: var(--wp--preset--color--accent);
}
.social-icon {
display: block;
width: 18px;
height: 18px;
}
.site-header__social {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 0 25px;
padding: 0;
list-style: none;
}
.site-header__social li,
.site-header__social a,
.site-header__account-icon,
.site-header__cart-icon {
flex-shrink: 0;
}
/*
* 150px, the builder's own figure, and an explicit width rather than `auto`.
*
* The SVG is 299x150 and the anchor is a fit-content flex item, so
* `max-width: min(100%, …)` asked the parent how wide it was, the parent asked
* the image, and the wordmark resolved to 0x0. It had been loading the whole
* time — the file was never the problem.
*/
.site-logo {
display: block;
line-height: 0;
}
.site-logo img {
display: block;
width: 150px;
height: auto;
}
@media (max-width: 47.9375rem) {
.site-logo img {
width: 100px;
}
}
/* --- Primary navigation ---
*
* Small caps, tracked, centred — the builder's `bde-menu-52448-124`: 0.75rem,
* weight 500, 1px letter-spacing, uppercase.
*/
/* A keyline separates the bar from the navigation — the builder's menu row
carries a 1px #E6E6E6 top border. */
.site-navigation {
display: flex;
justify-content: center;
padding-block: var(--wp--preset--spacing--30);
border-block-start: 1px solid var(--wp--preset--color--rule);
}
.site-navigation .primary-menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--wp--preset--spacing--50);
margin: 0;
padding: 0;
list-style: none;
}
.site-navigation .primary-menu a {
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--2-xs);
font-weight: 500;
letter-spacing: var(--wp--custom--tracking--caps);
text-transform: uppercase;
color: inherit;
text-decoration: none;
}
.site-navigation .primary-menu a:hover,
.site-navigation .primary-menu a:focus-visible,
.site-navigation .primary-menu .current-menu-item > a {
color: var(--wp--preset--color--accent);
}
/*
* The menu toggle. `base.css` styles `.nav-toggle` as a solid button for the
* starter's benefit; here it is a bare 20px hamburger in the same 47px box as
* the cart, which is what the builder's mobile header had top-right.
*/
.site-header .nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px;
border: 0;
background: none;
color: inherit;
cursor: pointer;
}
.site-header .nav-toggle svg {
display: block;
width: 21px;
height: 21px;
}
.site-header .nav-toggle__close,
.site-header .nav-toggle[aria-expanded="true"] .nav-toggle__open {
display: none;
}
.site-header .nav-toggle[aria-expanded="true"] .nav-toggle__close {
display: block;
}
/*
* Narrow viewports: the builder's mobile header. Account and basket left,
* wordmark centred, toggle right, on one row; the search gets a row of its
* own beneath. The outer columns are equal so the wordmark is truly centred
* rather than wherever the utilities leave room for it.
*
* The social row hides, as the builder's did. The navigation is closed until
* the toggle opens it, and then drops down under the bar as a column.
*/
@media (max-width: 47.9375rem) {
.site-header__bar {
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
grid-template-areas: "utility branding toggle" "search search search";
gap: var(--wp--preset--spacing--30);
}
.site-header__utility {
grid-area: utility;
}
.site-header__social {
display: none;
}
.site-branding {
grid-area: branding;
}
.site-header__toggle {
grid-area: toggle;
display: flex;
justify-content: flex-end;
}
.site-header__search {
grid-area: search;
justify-content: stretch;
}
.site-header__search .dgwt-wcas-search-wrapp {
max-width: none;
}
/*
* Over the page, not into it: absolutely positioned off the header's
* bottom edge so opening the menu moves nothing underneath. White ground,
* the header's keyline as its own bottom edge, and a shadow so it reads
* as a layer.
*/
.site-navigation {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
padding-block: 0;
background-color: var(--wp--preset--color--background);
border-block-end: 1px solid var(--wp--preset--color--rule);
box-shadow: 0 12px 24px -12px rgb(0 0 0 / 0.25);
}
.site-header[data-open="true"] .site-navigation {
display: block;
}
.site-navigation .primary-menu {
flex-direction: column;
gap: 0;
padding-block: var(--wp--preset--spacing--30);
}
.site-navigation .primary-menu a {
display: block;
padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
/* Second-level items, indented under their parent. */
.site-navigation .primary-menu .sub-menu {
margin: 0;
padding: 0 0 0 var(--wp--preset--spacing--40);
list-style: none;
}
/*
* The account moves from the bar into the menu (Will, 2026-09-11): the
* icon goes, and "My Account" — appended to the primary menu by
* `inc/woocommerce.php` — shows at the bottom of the dropdown, set off
* from the pages by a keyline. Above this width the icon is back and the
* item is hidden, so the account is reachable exactly once at any size.
*/
.site-header__account {
display: none;
}
/* One class more than the all-widths hide below it, which would otherwise
win on source order. */
.site-header .site-navigation .primary-menu .menu-item--account {
display: block;
margin-block-start: var(--wp--preset--spacing--20);
padding-block-start: var(--wp--preset--spacing--20);
border-block-start: 1px solid var(--wp--preset--color--rule);
}
}
.site-navigation .primary-menu .menu-item--account {
display: none;
}
/* --- Footer --- */
.site-footer {
/*
* Explicit, for the same reason the header is: Ready.Salted's starter
* footer is `display: flex` with `space-between`, and these two rows only
* stacked because they happened to wrap. Two blocks, stacked because they
* are told to be.
*/
display: block;
/* The whole gap over the footer, on every page: 10rem, what most pages
already had (see `.site-main`'s last child above). */
margin-block-start: calc(var(--wp--preset--spacing--70) + var(--wp--preset--spacing--60));
padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
/* White, like the header: the page's ground may be cream. */
background-color: var(--wp--preset--color--background);
border-block-start: 1px solid var(--wp--preset--color--rule);
font-family: var(--wp--preset--font-family--sans);
/*
* 0.75rem is the builder's 12px, not the theme's `sm`: the reference
* footer runs smaller than body copy — links at 12px, tagline at
* 10.5px — which is what made mine read as oversized. These sizes sit
* below the scale's floor (`xs` bottoms at 0.8rem), so they stay
* literal — but in rem, so they follow the reader's font preference;
* the px are measurements, not units.
*/
font-size: var(--wp--preset--font-size--2-xs);
line-height: 1.5;
}
.site-footer__columns {
display: grid;
gap: var(--wp--preset--spacing--60);
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin-inline: auto;
}
/*
* Five columns — brand, three link lists, newsletter — on the book grid's own
* tracks and gap, so the footer's column edges are the shop's, the home
* page's and the catalogue's (Will, 2026-09-11). The builder had the outer two
* at 1.5fr; equal tracks are what line up.
*/
@media (min-width: 48rem) {
.site-footer__columns {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--wp--preset--spacing--50) 1.5rem;
}
}
/* The footer's wordmark is half the header's: 75px against 150px. */
.site-footer .site-logo img {
width: 75px;
}
.site-footer__tagline {
margin-block: var(--wp--preset--spacing--30) 0;
font-size: var(--wp--preset--font-size--3-xs);
line-height: 1.4;
color: var(--wp--preset--color--light);
}
.site-footer__heading {
margin-block: 0 var(--wp--preset--spacing--30);
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--2-xs);
font-weight: 600;
letter-spacing: var(--wp--custom--tracking--caps);
text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
.site-footer__links .menu {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin: 0;
padding: 0;
list-style: none;
line-height: 1;
}
.site-footer__links a {
color: inherit;
text-decoration: none;
}
.site-footer__links a:hover,
.site-footer__links a:focus-visible {
color: var(--wp--preset--color--light);
}
/*
* The newsletter signup.
*
* Ground.Rules renders the form and ships a deliberately plain stylesheet,
* leaving colour and shape to the theme. This is the builder's version of it,
* measured off the reference build rather than guessed: a 42px field over a
* full-width outlined button, 16px apart, the accent doing the outlining.
*
* The label is hidden rather than removed — and the builder's was too, a
* 1px-high element with a negative margin, which is why the visible "Email"
* over there is the placeholder and not a label at all. Ground.Rules mirrors
* its label into the placeholder for exactly this case, so the field still
* announces itself to a screen reader while the design keeps its one-word row.
*
* One value is deliberately not the builder's: the field border. Its #d1d5db
* is Tailwind's grey, which arrived with Breakdance rather than with Saqi, so
* the theme's own `rule` token stands in — two hex digits nobody will find.
*
* The consent checkbox and the privacy link have no counterpart in the
* reference, because the Breakdance form collected an address with no consent
* mechanism at all. They are Ground.Rules' default and the stronger position;
* `groundrules_mailing_list_consent_checkbox` is the one filter that removes
* the checkbox if this column is ever judged too small to carry it.
*/
:is(.site-footer__newsletter, .saqi-newsletter) .groundrules-signup__form {
display: flex;
flex-direction: column;
gap: 1rem;
}
:is(.site-footer__newsletter, .saqi-newsletter) .groundrules-signup__field,
:is(.site-footer__newsletter, .saqi-newsletter) .groundrules-signup__consent,
:is(.site-footer__newsletter, .saqi-newsletter) .groundrules-signup__consent-note,
:is(.site-footer__newsletter, .saqi-newsletter) .groundrules-signup__privacy {
margin-block: 0;
}
/* See the note above: hidden, not absent. */
:is(.site-footer__newsletter, .saqi-newsletter) .groundrules-signup__field label {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
:is(.site-footer__newsletter, .saqi-newsletter) .groundrules-signup__field input[type="email"] {
/* The plugin caps the field at 24rem; this column is narrower than that. */
width: 100%;
max-width: none;
padding: 0.75rem 1rem;
border: 1px solid var(--wp--preset--color--rule);
border-radius: 3px;
background-color: var(--wp--preset--color--background);
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--sm);
line-height: 1.2;
color: var(--wp--preset--color--foreground);
}
:is(.site-footer__newsletter, .saqi-newsletter) .groundrules-signup__submit {
display: flex;
justify-content: center;
width: 100%;
padding: 0.875rem 1.5rem;
border: 1px solid var(--wp--preset--color--accent);
border-radius: 3px;
background-color: transparent;
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--3-xs);
font-weight: 500;
line-height: 1;
color: var(--wp--preset--color--accent);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
:is(.site-footer__newsletter, .saqi-newsletter) .groundrules-signup__submit:hover,
:is(.site-footer__newsletter, .saqi-newsletter) .groundrules-signup__submit:focus-visible {
background-color: var(--wp--preset--color--accent);
color: var(--wp--preset--color--background);
}
/*
* Footnote scale — the tagline's, not the field's.
*
* `muted` rather than the tagline's `light`, though. #999 on white is 2.9:1,
* which is under AA and fine for a strapline nobody needs to read; this is the
* wording somebody is agreeing to, and it is stored against their record as
* the thing they agreed. Consent that cannot comfortably be read is not
* consent, so it takes the darker grey.
*/
:is(.site-footer__newsletter, .saqi-newsletter) .groundrules-signup__consent,
:is(.site-footer__newsletter, .saqi-newsletter) .groundrules-signup__consent-note,
:is(.site-footer__newsletter, .saqi-newsletter) .groundrules-signup__privacy {
max-width: none;
font-size: var(--wp--preset--font-size--3-xs);
line-height: 1.4;
color: var(--wp--preset--color--muted);
}
:is(.site-footer__newsletter, .saqi-newsletter) .groundrules-signup__consent input {
accent-color: var(--wp--preset--color--accent);
}
:is(.site-footer__newsletter, .saqi-newsletter) .groundrules-signup__privacy a {
color: inherit;
}
:is(.site-footer__newsletter, .saqi-newsletter) .groundrules-signup__status {
margin-block: 0 1rem;
padding: 0.5rem 0.75rem;
border-inline-start: 3px solid var(--wp--preset--color--accent);
background-color: var(--wp--preset--color--cream);
font-size: var(--wp--preset--font-size--3-xs);
line-height: 1.4;
}
/*
* A dark band across the full width, not a rule under the columns.
*
* The builder's is `#444` with `#E6E6E6` text at 12px, and it runs edge to
* edge — so it has to escape the footer's own gutter, which is what the
* negative inline margin is for. The content inside is capped and centred like
* everything else.
*/
.site-footer__credit {
margin-block-start: var(--wp--preset--spacing--60);
margin-inline: calc(-1 * var(--saqi-gutter));
padding: var(--wp--preset--spacing--40) var(--saqi-gutter);
background-color: var(--wp--preset--color--muted);
font-size: var(--wp--preset--font-size--2-xs);
color: var(--wp--preset--color--rule);
}
.site-footer__credit-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--wp--preset--spacing--30);
max-width: var(--wp--style--global--wide-size, 87.5rem);
margin-inline: auto;
}
.site-footer__credit a {
color: inherit;
}
.site-footer__credit a:hover,
.site-footer__credit a:focus-visible {
color: var(--wp--preset--color--background);
}
.site-footer__credit p {
margin: 0;
}
/* --- Account ---
*
* WooCommerce's account page, one column on tracks 2–4 (`entry--column`,
* Will 2026-09-16; it sat centred in the page measure until then). Signed
* out it is one form — login, or the account form at /register/ — with a
* line pointing at the other; `woocommerce/myaccount/form-login.php` says
* why. Signed in, the account navigation is a row in the primary
* navigation's manner over the column's width, rather than Woo's 30/68
* float, which the column is too narrow to carry.
*
* Woo's stylesheet is still loaded, so the selectors here are specific
* enough to beat its `.woocommerce form .form-row …` rules.
*/
/* Signed out, the block is the column's three tracks — the page's 2–4, with
the page's gap, so its columns are the page's. The form is on the first
two at its 26rem (a login field the width of three tracks is a field with
nothing to do) and the way to the other form is on the third (Will,
2026-09-16). Below the width the tracks run, it sits under the form.
The heading and the notices keep the column's left edge, not the centre. */
.saqi-account {
font-family: var(--wp--preset--font-family--sans);
}
.saqi-account__form {
max-width: 26rem;
}
@media (min-width: 64rem) {
.saqi-account {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 1.5rem;
align-items: start;
}
.saqi-account__form {
grid-column: 1 / span 2;
}
}
body.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper,
body.woocommerce-account:not(.logged-in) .woocommerce-error,
body.woocommerce-account:not(.logged-in) .woocommerce-message,
body.woocommerce-account:not(.logged-in) .woocommerce-info {
max-width: 26rem;
margin-inline: 0;
}
.saqi-account .woocommerce-form .form-row {
display: block;
float: none;
width: 100%;
margin-block: 0 var(--wp--preset--spacing--40);
padding: 0;
}
.saqi-account .woocommerce-form .form-row label {
display: block;
margin-block-end: 0.4rem;
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
}
.saqi-account .woocommerce-form .form-row input.input-text,
.saqi-account .woocommerce-form .form-row .password-input {
display: block;
width: 100%;
}
/* The field, as the footer's newsletter field is. */
.saqi-account .woocommerce-form .form-row input.input-text {
padding: 0.75rem 1rem;
border: 1px solid var(--wp--preset--color--rule);
border-radius: 3px;
background-color: var(--wp--preset--color--background);
font-size: var(--wp--preset--font-size--base);
line-height: 1.2;
color: var(--wp--preset--color--foreground);
}
.saqi-account .woocommerce-form .form-row input.input-text:focus-visible {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 1px;
border-color: var(--wp--preset--color--accent);
}
/*
* Woo's show-password toggle. Its script wraps the field and adds an empty
* span; its stylesheet — not loaded here — drew the eye from an icon font.
* This draws it as a background, set inside the field's padding.
*/
.saqi-account .password-input,
.woocommerce-MyAccount-content .password-input,
form.woocommerce-form-login .password-input {
position: relative;
display: block;
width: 100%;
}
.saqi-account .show-password-input,
.woocommerce-MyAccount-content .show-password-input,
form.woocommerce-form-login .show-password-input {
position: absolute;
top: 50%;
right: 0.75rem;
width: 1.5rem;
height: 1.5rem;
padding: 0;
border: 0;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
transform: translateY(-50%);
cursor: pointer;
}
.saqi-account .show-password-input.display-password,
.woocommerce-MyAccount-content .show-password-input.display-password,
form.woocommerce-form-login .show-password-input.display-password {
opacity: 0.45;
}
.saqi-account .woocommerce-form .form-row .password-input input.input-text,
.woocommerce-MyAccount-content .form-row .password-input input.input-text,
form.woocommerce-form-login .form-row .password-input input.input-text {
padding-inline-end: 2.75rem;
}
/* "Keep me signed in" left, "Forgotten your password?" right, one row. */
.saqi-account .woocommerce-form .form-row.saqi-account__row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1rem;
font-size: var(--wp--preset--font-size--sm);
}
.saqi-account .woocommerce-form .saqi-account__row label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0;
font-weight: 400;
}
.saqi-account .woocommerce-form__input-checkbox {
width: 1rem;
height: 1rem;
margin: 0;
accent-color: var(--wp--preset--color--accent);
}
.saqi-account__lost,
.saqi-account__switch-link {
color: var(--wp--preset--color--accent);
text-decoration: none;
}
.saqi-account__lost:hover,
.saqi-account__lost:focus-visible,
.saqi-account__switch-link:hover,
.saqi-account__switch-link:focus-visible {
color: var(--wp--preset--color--foreground);
}
/* The button: the footer's outlined button, filled. */
.saqi-account .woocommerce-form .button.saqi-account__submit {
display: flex;
justify-content: center;
width: 100%;
padding: 0.875rem 1.5rem;
border: 1px solid var(--wp--preset--color--accent);
border-radius: 3px;
background-color: var(--wp--preset--color--accent);
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--2-xs);
font-weight: 500;
letter-spacing: var(--wp--custom--tracking--caps);
text-transform: uppercase;
line-height: 1;
color: var(--wp--preset--color--background);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.saqi-account .woocommerce-form .button.saqi-account__submit:hover,
.saqi-account .woocommerce-form .button.saqi-account__submit:focus-visible {
background-color: var(--wp--preset--color--background);
color: var(--wp--preset--color--accent);
}
/* Woo's privacy text under the account form. */
.saqi-account .woocommerce-privacy-policy-text,
.saqi-account__note {
font-size: var(--wp--preset--font-size--xs);
line-height: 1.5;
color: var(--wp--preset--color--muted);
}
.saqi-account .woocommerce-privacy-policy-text a {
color: inherit;
}
/* The way to the other form, in the page's serif: on the fourth track beside
the form from 64rem, bare — it was a box for an hour on 2026-09-16, and
the box went (Will) — and under the form beneath a keyline below that
width, as it always was. */
.saqi-account__switch {
margin-block-start: var(--wp--preset--spacing--50);
padding-block-start: var(--wp--preset--spacing--40);
border-block-start: 1px solid var(--wp--preset--color--rule);
font-family: var(--wp--preset--font-family--serif);
}
/* On the third of the block's columns (the page's fourth track), level with
the top of the form and without the keyline; this rule follows the one
above so that it wins on source order. */
@media (min-width: 64rem) {
.saqi-account__switch {
grid-column: 3;
grid-row: 1;
margin-block-start: 0;
padding-block-start: 0;
border-block-start: 0;
}
}
.saqi-account__switch-title {
margin: 0 0 0.5rem;
font-size: var(--wp--preset--font-size--xl);
font-weight: 400;
}
.saqi-account__switch p {
margin: 0 0 0.75rem;
}
/* Below the form, up to a tablet, it ends the page six levels down, past the
page shell's trim; the footer sets the gap after it. */
.saqi-account__switch p:last-child {
margin-block-end: 0;
}
.saqi-account__switch-link {
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--2-xs);
font-weight: 500;
letter-spacing: var(--wp--custom--tracking--caps);
text-transform: uppercase;
}
/*
* Signed in: the navigation as a row, the content beneath it. Woo's
* stylesheet floats them 30/68 under `.woocommerce-account`, and it loads
* after this file, so the selectors carry that class too.
*/
.woocommerce-account .entry-content .woocommerce-MyAccount-navigation,
.woocommerce-account .entry-content .woocommerce-MyAccount-content {
float: none;
width: 100%;
margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
margin-block-end: var(--wp--preset--spacing--50);
padding-block-end: var(--wp--preset--spacing--30);
border-block-end: 1px solid var(--wp--preset--color--rule);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
display: flex;
flex-wrap: wrap;
gap: 0.5rem var(--wp--preset--spacing--40);
margin: 0;
padding: 0;
list-style: none;
}
/* Woo marks the current item with a grey panel; the accent does that here. */
.woocommerce-account .woocommerce-MyAccount-navigation li,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active {
margin: 0;
padding: 0;
background: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
display: inline-block;
padding: 0;
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--2-xs);
font-weight: 500;
letter-spacing: var(--wp--custom--tracking--caps);
text-transform: uppercase;
color: inherit;
text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible,
.woocommerce-account .woocommerce-MyAccount-navigation .is-active > a {
color: var(--wp--preset--color--accent);
}
.woocommerce-MyAccount-content {
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--sm);
}
/*
* Signed in, the rest of the account: WooCommerce's dashboard, orders,
* addresses and the two edit forms, with none of WooCommerce's stylesheets
* (the theme switches them off — `inc/woocommerce.php`). The fields,
* buttons and notices are the shop-wide rules further down; this is what is
* the account's alone.
*/
.woocommerce-MyAccount-content p {
line-height: 1.6;
}
.woocommerce-MyAccount-content a {
color: var(--wp--preset--color--accent);
}
.woocommerce-MyAccount-content fieldset {
margin: var(--wp--preset--spacing--50) 0 0;
padding: 0;
border: 0;
}
.woocommerce-MyAccount-content legend {
margin-block-end: var(--wp--preset--spacing--30);
padding: 0;
font-family: var(--wp--preset--font-family--serif);
font-size: var(--wp--preset--font-size--xl);
}
/*
* Woo's first/last name pair side by side where there is room: the form (or
* the address form's field wrapper) is a two-column grid and every row but
* those two spans it. Grid rather than inline-block, which left the second
* field a whitespace's width out of line.
*/
.woocommerce-MyAccount-content form {
max-width: 32rem;
}
@media (min-width: 30rem) {
.woocommerce-MyAccount-content form.edit-account,
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 1rem;
}
.woocommerce-MyAccount-content form.edit-account > *,
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > * {
grid-column: 1 / -1;
}
.woocommerce-MyAccount-content .form-row-first,
.woocommerce-MyAccount-content .form-row-last {
grid-column: auto;
}
}
/* Secondary actions — view an order, edit an address — outlined. */
.woocommerce-MyAccount-content .woocommerce-orders-table .button,
.woocommerce-MyAccount-content .woocommerce-pagination .button,
.woocommerce-Address .edit {
background-color: transparent;
color: var(--wp--preset--color--accent);
}
.woocommerce-MyAccount-content .woocommerce-orders-table .button:hover,
.woocommerce-MyAccount-content .woocommerce-orders-table .button:focus-visible,
.woocommerce-MyAccount-content .woocommerce-pagination .button:hover,
.woocommerce-MyAccount-content .woocommerce-pagination .button:focus-visible {
background-color: var(--wp--preset--color--accent);
color: var(--wp--preset--color--background);
}
/* Tables: orders, pre-orders, an order's lines. */
.woocommerce-MyAccount-content table {
width: 100%;
border-collapse: collapse;
font-size: var(--wp--preset--font-size--sm);
}
.woocommerce-MyAccount-content th,
.woocommerce-MyAccount-content td {
padding: 0.75rem 0.75rem 0.75rem 0;
border-block-end: 1px solid var(--wp--preset--color--rule);
text-align: start;
vertical-align: middle;
}
.woocommerce-MyAccount-content th {
font-size: var(--wp--preset--font-size--3-xs);
font-weight: 500;
letter-spacing: var(--wp--custom--tracking--caps);
text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
.woocommerce-MyAccount-content td:last-child,
.woocommerce-MyAccount-content th:last-child {
padding-inline-end: 0;
text-align: end;
}
.woocommerce-MyAccount-content .woocommerce-orders-table .button {
padding: 0.6rem 1rem;
}
/* Below the measure's midpoint the orders table stacks, label and value. */
@media (max-width: 40rem) {
.woocommerce-MyAccount-content table.shop_table_responsive thead {
display: none;
}
.woocommerce-MyAccount-content table.shop_table_responsive tr {
display: block;
padding-block: 0.75rem;
border-block-end: 1px solid var(--wp--preset--color--rule);
}
.woocommerce-MyAccount-content table.shop_table_responsive td {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.3rem 0;
border: 0;
text-align: end;
}
.woocommerce-MyAccount-content table.shop_table_responsive td::before {
content: attr(data-title);
font-size: var(--wp--preset--font-size--3-xs);
font-weight: 500;
letter-spacing: var(--wp--custom--tracking--caps);
text-transform: uppercase;
color: var(--wp--preset--color--muted);
text-align: start;
}
.woocommerce-MyAccount-content table.shop_table_responsive td.woocommerce-orders-table__cell-order-actions::before {
content: none;
}
}
.woocommerce-MyAccount-content .woocommerce-pagination {
display: flex;
justify-content: space-between;
margin-block-start: var(--wp--preset--spacing--40);
}
/* Addresses: billing and shipping, two cards. */
.woocommerce-MyAccount-content .woocommerce-Addresses {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: var(--wp--preset--spacing--40);
}
.woocommerce-MyAccount-content .woocommerce-Address {
float: none;
width: auto;
padding: var(--wp--preset--spacing--40);
border: 1px solid var(--wp--preset--color--rule);
border-radius: 3px;
}
.woocommerce-MyAccount-content .woocommerce-Address-title {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-block-end: var(--wp--preset--spacing--30);
}
.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
margin: 0;
font-family: var(--wp--preset--font-family--serif);
font-size: var(--wp--preset--font-size--xl);
font-weight: 400;
}
.woocommerce-MyAccount-content .woocommerce-Address .edit {
padding: 0.5rem 0.875rem;
font-size: var(--wp--preset--font-size--3-xs);
}
.woocommerce-MyAccount-content .woocommerce-Address address {
font-style: normal;
line-height: 1.6;
}
/* An order's own page. */
.woocommerce-MyAccount-content .woocommerce-order-details,
.woocommerce-MyAccount-content .woocommerce-customer-details {
margin-block-start: var(--wp--preset--spacing--50);
}
.woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce-MyAccount-content .woocommerce-column__title {
margin-block-end: var(--wp--preset--spacing--30);
font-family: var(--wp--preset--font-family--serif);
font-size: var(--wp--preset--font-size--xl);
font-weight: 400;
}
.woocommerce-MyAccount-content .woocommerce-customer-details address {
font-style: normal;
line-height: 1.6;
}
.woocommerce-MyAccount-content .woocommerce-columns--addresses {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: var(--wp--preset--spacing--40);
}
.woocommerce-MyAccount-content .woocommerce-column {
float: none;
width: auto;
}
/* --- Shop pages: shared ---
*
* The basket, the checkout and the account page. None of them has any of
* WooCommerce's stylesheets (the theme switches them off in
* `inc/woocommerce.php`), so what follows is the whole of their styling. The forms share one field,
* one label and one button: the footer's newsletter field and its outlined
* button, filled. Figures measured off the dev site 2026-09-04: fields 45px
* tall on 12px 16px padding, 3px radii, buttons on the accent.
*
* `:is()` names the three contexts once. The account page's own block above
* predates this and keeps its login-form specifics; these rules sit after it
* and carry the rest.
*/
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
font-family: var(--wp--preset--font-family--sans);
}
/*
* Notices: a keyline box, the accent down its left edge — wherever WooCommerce
* prints one, not only on the three shop pages. "Added to your basket" lands
* on the book page, above the book, and was bare there: Breakdance's sheet
* had styled it, and with the builder switched off (2026-09-15) nothing did.
*/
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account, .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) {
margin: 0 0 var(--wp--preset--spacing--40);
padding: 0.875rem 1rem;
border: 1px solid var(--wp--preset--color--rule);
border-inline-start: 3px solid var(--wp--preset--color--accent);
border-radius: 3px;
background-color: var(--wp--preset--color--background);
list-style: none;
font-size: var(--wp--preset--font-size--sm);
line-height: 1.5;
}
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account, .woocommerce-notices-wrapper) :is(.woocommerce-error, .woocommerce-notice--error) {
border-inline-start-color: var(--wp--preset--color--orange);
}
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account, .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a {
color: var(--wp--preset--color--accent);
}
/*
* "Click here to enter your code" is a `.button` Woo puts inside a notice, and
* it has to read as the sentence it sits in. Accent and a rollover, like every
* other link — the underline it used to carry is gone with the rest of them.
* "View basket" in "added to your basket" is the same kind of button.
*/
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account, .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-info) .button {
padding: 0;
border: 0;
background: none;
font: inherit;
color: var(--wp--preset--color--accent);
}
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account, .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account, .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:focus-visible,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account, .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-info) .button:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account, .woocommerce-notices-wrapper) :is(.woocommerce-message, .woocommerce-info) .button:focus-visible {
color: var(--wp--preset--color--foreground);
}
/* Fields, in the checkout and the account's own forms. */
:is(form.checkout, form.woocommerce-form-login, form.checkout_coupon, .woocommerce-MyAccount-content) .form-row {
display: block;
float: none;
width: 100%;
margin: 0 0 var(--wp--preset--spacing--40);
padding: 0;
}
:is(form.checkout, form.woocommerce-form-login, form.checkout_coupon, .woocommerce-MyAccount-content) .form-row label {
display: block;
margin-block-end: 0.4rem;
font-size: var(--wp--preset--font-size--sm);
font-weight: 500;
}
:is(form.checkout, form.woocommerce-form-login, form.checkout_coupon, .woocommerce-MyAccount-content) .form-row .required {
color: var(--wp--preset--color--accent);
text-decoration: none;
}
:is(form.checkout, form.woocommerce-form-login, form.checkout_coupon, .woocommerce-MyAccount-content) .form-row .optional {
font-weight: 400;
color: var(--wp--preset--color--light);
}
:is(form.checkout, form.woocommerce-form-login, form.checkout_coupon, .woocommerce-MyAccount-content) .form-row input.input-text,
:is(form.checkout, form.woocommerce-form-login, form.checkout_coupon, .woocommerce-MyAccount-content) .form-row select,
:is(form.checkout, form.woocommerce-form-login, form.checkout_coupon, .woocommerce-MyAccount-content) .form-row textarea,
:is(form.checkout, form.woocommerce-form-login, form.checkout_coupon, .woocommerce-MyAccount-content) .form-row .select2-container .select2-selection--single {
display: block;
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--wp--preset--color--rule);
border-radius: 3px;
background-color: var(--wp--preset--color--background);
font-size: var(--wp--preset--font-size--base);
line-height: 1.2;
color: var(--wp--preset--color--foreground);
}
:is(form.checkout, .woocommerce-MyAccount-content) .form-row textarea {
min-height: 6rem;
line-height: 1.5;
}
:is(form.checkout, .woocommerce-MyAccount-content) .form-row .select2-container .select2-selection--single {
height: auto;
}
:is(form.checkout, .woocommerce-MyAccount-content) .form-row .select2-container .select2-selection__rendered {
padding: 0;
line-height: 1.2;
color: inherit;
}
:is(form.checkout, .woocommerce-MyAccount-content) .form-row .select2-container .select2-selection__arrow {
top: 50%;
right: 0.75rem;
transform: translateY(-50%);
}
:is(form.checkout, form.woocommerce-form-login, form.checkout_coupon, .woocommerce-MyAccount-content) .form-row input.input-text:focus-visible,
:is(form.checkout, .woocommerce-MyAccount-content) .form-row select:focus-visible,
:is(form.checkout, .woocommerce-MyAccount-content) .form-row textarea:focus-visible {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 1px;
border-color: var(--wp--preset--color--accent);
}
:is(form.checkout, .woocommerce-MyAccount-content) .form-row .description,
:is(form.checkout, .woocommerce-MyAccount-content) .form-row em {
display: block;
margin-block-start: 0.4rem;
font-size: var(--wp--preset--font-size--xs);
font-style: normal;
color: var(--wp--preset--color--muted);
}
/* Checkbox rows: the box and its words on one line. */
:is(form.checkout, form.woocommerce-form-login, .woocommerce-MyAccount-content) .form-row label.checkbox,
:is(form.checkout, form.woocommerce-form-login, .woocommerce-MyAccount-content) .form-row .woocommerce-form__label-for-checkbox {
display: inline-flex;
align-items: flex-start;
gap: 0.5rem;
margin: 0;
font-weight: 400;
}
:is(form.checkout, form.woocommerce-form-login, .woocommerce-MyAccount-content) .woocommerce-form__input-checkbox,
:is(form.checkout, .woocommerce-MyAccount-content) .input-checkbox {
flex-shrink: 0;
width: 1rem;
height: 1rem;
margin: 0.2rem 0 0;
accent-color: var(--wp--preset--color--accent);
}
/* Woo marks an invalid field with a class on the row; the field goes orange. */
form.checkout .form-row.woocommerce-invalid input.input-text,
form.checkout .form-row.woocommerce-invalid select {
border-color: var(--wp--preset--color--orange);
}
/* Buttons. */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .button:not(.showcoupon):not(.showlogin),
.woocommerce-Address .button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.875rem 1.5rem;
border: 1px solid var(--wp--preset--color--accent);
border-radius: 3px;
background-color: var(--wp--preset--color--accent);
font-family: var(--wp--preset--font-family--sans);
font-size: var(--wp--preset--font-size--2-xs);
font-weight: 500;
letter-spacing: var(--wp--custom--tracking--caps);
text-transform: uppercase;
line-height: 1;
color: var(--wp--preset--color--background);
text-decoration: none;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .button:not(.showcoupon):not(.showlogin):hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .button:not(.showcoupon):not(.showlogin):focus-visible {
background-color: var(--wp--preset--color--background);
color: var(--wp--preset--color--accent);
}
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .button:disabled,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .button[aria-disabled="true"] {
opacity: 0.4;
cursor: default;
}
/* Woo's "processing" overlay while a request is in flight. */
:is(.woocommerce-cart, .woocommerce-checkout) .blockUI.blockOverlay {
background-color: var(--wp--preset--color--cream) !important;
opacity: 0.6 !important;
}
/*
* The basket and the checkout run the wide row. page.php marks the entry
* `alignwide` for them, but `.entry-content > *` above still holds every
* child to the measure — the shortcode's own `div.woocommerce` included.
* Released here; nothing else on those two pages is prose.
*/
.woocommerce-cart .entry-content > .woocommerce,
.woocommerce-checkout .entry-content > .woocommerce {
max-width: none;
}
/* --- The basket --- */
/*
* The builder's own arrangement, measured: the items on the left at about
* 70% and the totals beside them at 350px, on the wide row; the two stack
* below 48rem.
*/
.woocommerce-cart .woocommerce {
display: grid;
grid-template-columns: minmax(0, 1fr) 22rem;
gap: var(--wp--preset--spacing--50);
align-items: start;
}
/* Notices, and the empty basket, take the whole row. */
.woocommerce-cart .woocommerce > :not(.woocommerce-cart-form):not(.cart-collaterals) {
grid-column: 1 / -1;
}
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper:empty {
display: none;
}
.woocommerce-cart .cart-empty {
margin: 0;
}
.woocommerce-cart .return-to-shop {
margin: 0;
}
@media (max-width: 47.9375rem) {
.woocommerce-cart .woocommerce {
grid-template-columns: minmax(0, 1fr);
}
}
.woocommerce-cart table.shop_table {
width: 100%;
border-collapse: collapse;
font-size: var(--wp--preset--font-size--sm);
}
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td {
padding: 1rem 0.75rem;
border-block-end: 1px solid var(--wp--preset--color--rule);
text-align: start;
vertical-align: middle;
}
.woocommerce-cart table.shop_table th {
padding-block: 0 0.75rem;
font-size: var(--wp--preset--font-size--3-xs);
font-weight: 500;
letter-spacing: var(--wp--custom--tracking--caps);
text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
.woocommerce-cart table.shop_table :is(th, td):first-child {
padding-inline-start: 0;
}
.woocommerce-cart table.shop_table :is(th, td):last-child {
padding-inline-end: 0;
text-align: end;
}
.woocommerce-cart .product-remove {
width: 1.5rem;
}
.woocommerce-cart .product-remove .remove {
display: grid;
place-items: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
font-size: var(--wp--preset--font-size--lg);
line-height: 1;
color: var(--wp--preset--color--muted);
text-decoration: none;
}
.woocommerce-cart .product-remove .remove:hover,
.woocommerce-cart .product-remove .remove:focus-visible {
background-color: var(--wp--preset--color--accent);
color: var(--wp--preset--color--background);
}
.woocommerce-cart .product-thumbnail {
width: 4rem;
}
.woocommerce-cart .product-thumbnail img {
display: block;
width: 4rem;
height: auto;
}
.woocommerce-cart .product-name a {
font-family: var(--wp--preset--font-family--serif);
font-size: var(--wp--preset--font-size--lg);
color: inherit;
text-decoration: none;
}
.woocommerce-cart .product-name a:hover,
.woocommerce-cart .product-name a:focus-visible {
color: var(--wp--preset--color--accent);
}
/* Woo's per-item data — an edition, a pre-order date — as a small list. */
.woocommerce-cart .product-name .variation {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0 0.5rem;
margin: 0.25rem 0 0;
font-size: var(--wp--preset--font-size--xs);
color: var(--wp--preset--color--muted);
}
.woocommerce-cart .product-name .variation dt,
.woocommerce-cart .product-name .variation dd,
.woocommerce-cart .product-name .variation p {
margin: 0;
}
.woocommerce-cart .product-price,
.woocommerce-cart .product-subtotal {
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.woocommerce-cart .product-subtotal {
font-weight: 500;
}
/*
* The quantity field: Woo's number input, in the field's clothes.
*/
.woocommerce-cart .quantity {
display: inline-block;
}
.woocommerce-cart .quantity input.qty {
width: 4.5rem;
padding: 0.6rem 0.5rem;
border: 1px solid var(--wp--preset--color--rule);
border-radius: 3px;
background-color: var(--wp--preset--color--background);
font-size: var(--wp--preset--font-size--sm);
text-align: center;
color: inherit;
}
.woocommerce-cart .quantity input.qty {
-moz-appearance: textfield;
appearance: textfield;
}
.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button,
.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.woocommerce-cart .quantity input.qty:focus-visible {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 1px;
border-color: var(--wp--preset--color--accent);
}
/* Under the items: the coupon field on the left, "Update basket" on the right. */
.woocommerce-cart td.actions {
padding-block: var(--wp--preset--spacing--40) 0;
border: 0;
text-align: end;
}
.woocommerce-cart td.actions .coupon {
display: inline-flex;
gap: 0.5rem;
float: inline-start;
}
.woocommerce-cart td.actions .coupon input.input-text {
width: 11rem;
padding: 0.75rem 1rem;
border: 1px solid var(--wp--preset--color--rule);
border-radius: 3px;
background-color: var(--wp--preset--color--background);
font-size: var(--wp--preset--font-size--sm);
color: inherit;
}
.woocommerce-cart td.actions .coupon input.input-text:focus-visible {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 1px;
border-color: var(--wp--preset--color--accent);
}
.woocommerce-cart td.actions .coupon .button,
.woocommerce-cart td.actions > .button {
background-color: transparent;
color: var(--wp--preset--color--accent);
}
.woocommerce-cart td.actions .coupon .button:hover,
.woocommerce-cart td.actions .coupon .button:focus-visible,
.woocommerce-cart td.actions > .button:hover,
.woocommerce-cart td.actions > .button:focus-visible {
background-color: var(--wp--preset--color--accent);
color: var(--wp--preset--color--background);
}
@media (max-width: 40rem) {
.woocommerce-cart td.actions {
display: grid;
gap: 0.75rem;
}
.woocommerce-cart td.actions .coupon {
float: none;
}
.woocommerce-cart td.actions .coupon input.input-text {
flex: 1 1 auto;
width: auto;
}
}
/* The totals: a panel. */
.woocommerce-cart .cart_totals {
padding: var(--wp--preset--spacing--40);
border: 1px solid var(--wp--preset--color--rule);
border-radius: 3px;
background-color: var(--wp--preset--color--background);
}
.woocommerce-cart .cart_totals h2 {
margin: 0 0 var(--wp--preset--spacing--30);
font-size: var(--wp--preset--font-size--xl);
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
padding: 0.6rem 0;
font-size: var(--wp--preset--font-size--sm);
}
.woocommerce-cart .cart_totals table.shop_table th {
padding-block: 0.6rem;
font-size: inherit;
font-weight: 400;
letter-spacing: normal;
text-transform: none;
color: inherit;
}
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
border: 0;
font-size: var(--wp--preset--font-size--lg);
font-weight: 500;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals .woocommerce-shipping-calculator {
font-size: var(--wp--preset--font-size--xs);
color: var(--wp--preset--color--muted);
}
.woocommerce-cart .cart_totals ul#shipping_method {
margin: 0;
padding: 0;
list-style: none;
}
.woocommerce-cart .cart_totals ul#shipping_method li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-block-end: 0.4rem;
}
/*
* The shipping rows (woocommerce/cart/cart-shipping.php): "Shipment" on its
* own line with no rule under it, then the choices across the panel, ranged
* right like every other figure in it. Under them "Shipping to", ranged left,
* and the address on the next line (Will, 2026-09-22).
*/
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals-heading th {
padding-block-end: 0.25rem;
border-block-end: 0;
text-align: start;
}
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td {
padding-block-start: 0.25rem;
text-align: start;
}
/* The radio after its label, so the radios make one column down the right
edge however long each choice's name is (Will, 2026-09-22). Reversed in
CSS only: the source keeps WooCommerce's order, input first. */
.woocommerce-cart .cart_totals ul#shipping_method li {
flex-direction: row-reverse;
justify-content: flex-start;
align-items: center;
text-align: end;
}
/* Until there is an address, the postage row says so (inc/woocommerce.php),
in the muted note size the destination line uses. */
.woocommerce-cart .cart_totals tr.saqi-postage-pending td,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.saqi-postage-pending td {
font-size: var(--wp--preset--font-size--xs);
color: var(--wp--preset--color--muted);
text-align: start;
}
/* Flush with the figures above, not the browser's few pixels in. */
.woocommerce-cart .cart_totals ul#shipping_method input,
.woocommerce-checkout table.woocommerce-checkout-review-order-table ul#shipping_method input {
margin-inline: 0;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
margin: 0.75rem 0 0;
text-align: start;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination__address {
display: block;
font-weight: 500;
color: var(--wp--preset--color--foreground);
}
.woocommerce-cart .cart_totals .woocommerce-shipping-calculator {
text-align: start;
}
.woocommerce-cart .wc-proceed-to-checkout {
margin-block-start: var(--wp--preset--spacing--40);
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
width: 100%;
}
/* Woo's "responsive" table: the items stack, label and value, below 40rem. */
@media (max-width: 40rem) {
.woocommerce-cart table.shop_table_responsive thead {
display: none;
}
.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item {
display: grid;
grid-template-columns: 4rem minmax(0, 1fr) 1.5rem;
gap: 0.25rem 0.75rem;
padding-block: 0.75rem;
border-block-end: 1px solid var(--wp--preset--color--rule);
}
.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item td {
padding: 0;
border: 0;
text-align: start;
}
.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item td.product-thumbnail {
grid-row: 1 / span 4;
}
.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item td.product-remove {
grid-column: 3;
grid-row: 1;
}
.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item td:is(.product-price, .product-quantity, .product-subtotal) {
grid-column: 2;
display: flex;
justify-content: space-between;
gap: 1rem;
font-size: var(--wp--preset--font-size--sm);
}
.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item td:is(.product-price, .product-quantity, .product-subtotal)::before {
content: attr(data-title);
color: var(--wp--preset--color--muted);
}
.woocommerce-cart table.woocommerce-cart-form__contents tr:last-child td.actions {
display: grid;
}
}
/* --- The checkout --- */
/*
* The builder's arrangement, measured: the customer's details on the left at
* about 60%, the order and payment beside them, on the wide row. Woo prints
* the two as siblings under the form with the "Your order" heading between
* them; the form is the grid, and the heading and review share the second
* column. Below 60rem it is one column, in source order.
*/
.woocommerce-checkout form.checkout {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
/*
* The details on the left are far taller than the heading and the review
* beside them, and they span every row. The last row is flexible so that
* it alone takes up that height: a grid gives an item spanning a flexible
* row nothing to spread over the rows sized by their content. Until
* 2026-09-21 an empty third row did the same by accident. Smart Coupons
* 9.82 then put a message holder in the form, the rules below placed it in
* that row, and the height was shared among all three: 540px of nothing
* under "Your order" (Will).
*/
grid-template-rows: auto auto auto 1fr;
gap: 0 var(--wp--preset--spacing--60);
align-items: start;
}
.woocommerce-checkout form.checkout > #customer_details {
grid-column: 1;
grid-row: 1 / -1;
}
.woocommerce-checkout form.checkout > #order_review_heading {
grid-column: 2;
grid-row: 1;
margin: 0 0 var(--wp--preset--spacing--30);
font-size: var(--wp--preset--font-size--xl);
}
.woocommerce-checkout form.checkout > #order_review {
grid-column: 2;
grid-row: 2;
}
/* Anything an extension hooks after the review sits under it. */
.woocommerce-checkout form.checkout > *:not(#customer_details):not(#order_review_heading):not(#order_review) {
grid-column: 2;
}
@media (max-width: 59.9375rem) {
.woocommerce-checkout form.checkout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;
}
.woocommerce-checkout form.checkout > #customer_details,
.woocommerce-checkout form.checkout > #order_review_heading,
.woocommerce-checkout form.checkout > #order_review,
.woocommerce-checkout form.checkout > *:not(#customer_details):not(#order_review_heading):not(#order_review) {
grid-column: 1;
grid-row: auto;
}
}
/* Woo's own two columns inside the details — billing, then shipping — stack. */
.woocommerce-checkout #customer_details.col2-set {
display: block;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
float: none;
width: 100%;
}
.woocommerce-checkout #customer_details h3 {
margin: 0 0 var(--wp--preset--spacing--30);
font-size: var(--wp--preset--font-size--xl);
}
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .woocommerce-account-fields {
margin-block-start: var(--wp--preset--spacing--40);
}
/* "Ship to a different address?" is a checkbox in an h3. */
.woocommerce-checkout #ship-to-different-address label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: var(--wp--preset--font-size--lg);
font-weight: 400;
cursor: pointer;
}
.woocommerce-checkout #ship-to-different-address .input-checkbox {
width: 1rem;
height: 1rem;
margin: 0;
accent-color: var(--wp--preset--color--accent);
}
/* Woo's field pairs, side by side where there is room. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-account-fields .create-account {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 1rem;
}
.woocommerce-checkout :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-account-fields .create-account) > * {
grid-column: 1 / -1;
}
.woocommerce-checkout :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-account-fields .create-account) > :is(.form-row-first, .form-row-last) {
grid-column: auto;
}
/* Two toggles above the form — returning customer, coupon — are notices. */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
margin-block-end: var(--wp--preset--spacing--30);
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
margin: 0;
}
.woocommerce-checkout .showlogin,
.woocommerce-checkout .showcoupon {
color: var(--wp--preset--color--accent);
cursor: pointer;
}
.woocommerce-checkout .showlogin:hover,
.woocommerce-checkout .showlogin:focus-visible,
.woocommerce-checkout .showcoupon:hover,
.woocommerce-checkout .showcoupon:focus-visible {
color: var(--wp--preset--color--foreground);
}
/* And what they open: a panel each, in the same field clothes. */
.woocommerce-checkout form.woocommerce-form-login.login,
.woocommerce-checkout form.checkout_coupon {
max-width: 32rem;
margin: 0 0 var(--wp--preset--spacing--40);
padding: var(--wp--preset--spacing--40);
border: 1px solid var(--wp--preset--color--rule);
border-radius: 3px;
background-color: var(--wp--preset--color--background);
}
.woocommerce-checkout form.woocommerce-form-login.login > p:first-child,
.woocommerce-checkout form.checkout_coupon > p:first-child {
margin-block-start: 0;
}
.woocommerce-checkout form.checkout_coupon {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.75rem;
}
.woocommerce-checkout form.checkout_coupon > p:first-child {
flex-basis: 100%;
margin: 0;
}
.woocommerce-checkout form.checkout_coupon .form-row {
flex: 1 1 12rem;
margin: 0;
}
.woocommerce-checkout form.checkout_coupon .form-row:has(.button) {
flex: 0 0 auto;
}
.woocommerce-checkout form.woocommerce-form-login.login .form-row-first,
.woocommerce-checkout form.woocommerce-form-login.login .form-row-last {
display: block;
width: 100%;
}
.woocommerce-checkout form.woocommerce-form-login.login .lost_password {
margin: 0;
font-size: var(--wp--preset--font-size--sm);
}
/* The order: a panel, the items, then the totals, then payment. */
.woocommerce-checkout #order_review {
padding: var(--wp--preset--spacing--40);
border: 1px solid var(--wp--preset--color--rule);
border-radius: 3px;
background-color: var(--wp--preset--color--background);
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table {
width: 100%;
border-collapse: collapse;
font-size: var(--wp--preset--font-size--sm);
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
padding: 0.6rem 0;
border-block-end: 1px solid var(--wp--preset--color--rule);
text-align: start;
vertical-align: top;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
padding-block: 0 0.6rem;
font-size: var(--wp--preset--font-size--3-xs);
font-weight: 500;
letter-spacing: var(--wp--custom--tracking--caps);
text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th {
font-weight: 400;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table :is(th, td):last-child {
padding-inline-start: 1rem;
text-align: end;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/*
* The shipping cell is the one last-child that holds prose as often as a
* price — "There are no shipping options available…", "Enter your address to
* view shipping options" — and the nowrap above ran that sentence out of the
* panel and off the page (Will, 2026-09-14). Prose wraps, and starts at the
* left, as the method list under it already did.
*/
.woocommerce-checkout table.woocommerce-checkout-review-order-table .woocommerce-shipping-totals td {
white-space: normal;
text-align: start;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-quantity {
font-weight: 400;
color: var(--wp--preset--color--muted);
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table .variation {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0 0.5rem;
margin: 0.25rem 0 0;
font-size: var(--wp--preset--font-size--xs);
color: var(--wp--preset--color--muted);
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table .variation :is(dt, dd, p) {
margin: 0;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total td {
border: 0;
font-size: var(--wp--preset--font-size--lg);
font-weight: 500;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table ul#shipping_method {
margin: 0;
padding: 0;
list-style: none;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table ul#shipping_method li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-block-end: 0.4rem;
white-space: normal;
text-align: start;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table ul#shipping_method label {
font-weight: 400;
}
/* The same two shipping rows as the basket's: the label, then the choices
across the panel, ranged right. A message in their place starts at the
left, as above. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals-heading th {
padding-block-end: 0.25rem;
padding-inline-start: 0;
border-block-end: 0;
text-align: start;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
padding-block-start: 0.25rem;
padding-inline-start: 0;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table ul#shipping_method li {
flex-direction: row-reverse;
justify-content: flex-start;
align-items: center;
text-align: end;
}
/* Payment. */
.woocommerce-checkout #payment {
margin-block-start: var(--wp--preset--spacing--40);
}
.woocommerce-checkout #payment ul.wc_payment_methods {
margin: 0 0 var(--wp--preset--spacing--40);
padding: 0;
list-style: none;
}
.woocommerce-checkout #payment li.wc_payment_method {
padding-block: 0.75rem;
border-block-start: 1px solid var(--wp--preset--color--rule);
}
.woocommerce-checkout #payment li.wc_payment_method > label {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
font-weight: 500;
cursor: pointer;
}
.woocommerce-checkout #payment li.wc_payment_method > label img {
max-height: 1.5rem;
width: auto;
}
.woocommerce-checkout #payment .input-radio {
width: 1rem;
height: 1rem;
margin: 0 0.25rem 0 0;
accent-color: var(--wp--preset--color--accent);
}
/* A gateway's own box: its blurb, and — for Stripe — its card fields. */
.woocommerce-checkout #payment .payment_box {
margin: 0.75rem 0 0;
padding: 0.875rem 1rem;
border-radius: 3px;
background-color: var(--wp--preset--color--cream);
font-size: var(--wp--preset--font-size--sm);
line-height: 1.5;
}
.woocommerce-checkout #payment .payment_box p:last-child {
margin-block-end: 0;
}
.woocommerce-checkout #payment .payment_box .form-row {
margin-block-end: 0.75rem;
}
.woocommerce-checkout #payment .payment_box .wc-stripe-elements-field,
.woocommerce-checkout #payment .payment_box .wc-credit-card-form .form-row .input-text {
padding: 0.75rem 1rem;
border: 1px solid var(--wp--preset--color--rule);
border-radius: 3px;
background-color: var(--wp--preset--color--background);
}
.woocommerce-checkout #payment .form-row.place-order {
margin: 0;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
margin-block-end: var(--wp--preset--spacing--30);
font-size: var(--wp--preset--font-size--sm);
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text {
font-size: var(--wp--preset--font-size--xs);
color: var(--wp--preset--color--muted);
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text a,
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a {
color: var(--wp--preset--color--accent);
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row.validate-required {
margin: 0;
}
.woocommerce-checkout #place_order {
width: 100%;
padding-block: 1rem;
}
/* --- Order received --- */
.woocommerce-checkout .woocommerce-order {
max-width: 46rem;
}
.woocommerce-checkout .woocommerce-thankyou-order-received {
margin: 0 0 var(--wp--preset--spacing--40);
font-family: var(--wp--preset--font-family--serif);
font-size: var(--wp--preset--font-size--xl);
}
.woocommerce-checkout ul.order_details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: var(--wp--preset--spacing--30);
margin: 0 0 var(--wp--preset--spacing--50);
padding: var(--wp--preset--spacing--40);
border: 1px solid var(--wp--preset--color--rule);
border-radius: 3px;
background-color: var(--wp--preset--color--background);
list-style: none;
font-size: var(--wp--preset--font-size--3-xs);
font-weight: 500;
letter-spacing: var(--wp--custom--tracking--caps);
text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
.woocommerce-checkout ul.order_details strong {
display: block;
margin-block-start: 0.25rem;
font-size: var(--wp--preset--font-size--base);
font-weight: 500;
letter-spacing: normal;
text-transform: none;
color: var(--wp--preset--color--foreground);
}
.woocommerce-checkout .woocommerce-order-details,
.woocommerce-checkout .woocommerce-customer-details {
margin-block-start: var(--wp--preset--spacing--50);
}
.woocommerce-checkout .woocommerce-order-details__title,
.woocommerce-checkout .woocommerce-column__title {
margin: 0 0 var(--wp--preset--spacing--30);
font-size: var(--wp--preset--font-size--xl);
}
.woocommerce-checkout table.woocommerce-table--order-details {
width: 100%;
border-collapse: collapse;
font-size: var(--wp--preset--font-size--sm);
}
.woocommerce-checkout table.woocommerce-table--order-details th,
.woocommerce-checkout table.woocommerce-table--order-details td {
padding: 0.6rem 0;
border-block-end: 1px solid var(--wp--preset--color--rule);
text-align: start;
vertical-align: top;
}
.woocommerce-checkout table.woocommerce-table--order-details thead th {
padding-block: 0 0.6rem;
font-size: var(--wp--preset--font-size--3-xs);
font-weight: 500;
letter-spacing: var(--wp--custom--tracking--caps);
text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
.woocommerce-checkout table.woocommerce-table--order-details tfoot th {
font-weight: 400;
}
.woocommerce-checkout table.woocommerce-table--order-details :is(th, td):last-child {
text-align: end;
white-space: nowrap;
}
.woocommerce-checkout table.woocommerce-table--order-details tfoot tr:last-child :is(th, td) {
border: 0;
font-size: var(--wp--preset--font-size--lg);
font-weight: 500;
}
.woocommerce-checkout .woocommerce-columns--addresses {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: var(--wp--preset--spacing--40);
}
.woocommerce-checkout .woocommerce-column {
float: none;
width: auto;
}
.woocommerce-checkout .woocommerce-customer-details address {
font-style: normal;
line-height: 1.6;
}