/* ==========================================================================
   Make My Theme — woocommerce.css
   WooCommerce overrides to match the Make My design system.
   ========================================================================== */

/* WooCommerce's own stylesheets never load (Theme/inc/enqueue.php, efficiency
   #560) — this sheet and journey.css are the only styling its markup gets.
   The helpers below are the few things Woo's sheets did that its templates
   still depend on, rebuilt on the tokens. Zero-specificity so a component
   class that sets a height still wins. */
:where(.woocommerce, .woocommerce-page) img {
    height: auto;
}

/* Two columns side by side — login | register, billing | shipping address. */
.woocommerce .col2-set {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-8);
}

/* "Order #<mark>123</mark>" — a bold figure, not a highlighter. */
.woocommerce mark {
    background: transparent;
    color: inherit;
    font-weight: var(--fw-semibold);
}

.woocommerce-customer-details address {
    padding: var(--sp-4);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    font-style: normal;
    line-height: var(--lh-body);
}

/* Account tables — orders, downloads, payment methods, the trade team. */
.woocommerce-account .woocommerce table.shop_table {
    width: 100%;
    margin: 0 0 var(--sp-6);
    border: 1px solid var(--rule);
    border-collapse: collapse;
    font-size: var(--fs-14);
}
.woocommerce-account .woocommerce table.shop_table :is(th, td) {
    padding: var(--sp-3);
    border-top: 1px solid var(--rule);
    text-align: left;
    vertical-align: middle;
}
.woocommerce-account .woocommerce table.shop_table th {
    font-weight: var(--fw-semibold);
}
/* The orders table's Items cell: one brand line per order line, stacked. */
.mma-order-items { display: grid; gap: var(--sp-2); }
.mma-order-items .mm-brand-line__type { font-size: var(--fs-13); }


/* ── Update state ──────────────────────────────────────────────────────────────
   WooCommerce washes the basket and checkout while it recalculates, with
   jQuery blockUI. The overlay's colour, opacity, cursor and stacking arrive
   as INLINE styles (cart.js / checkout.js pass `overlayCSS`; blockUI adds
   z-index 1000), so the `!important`s below are the only way to reach them.
   A flat Paper wash, held under the sticky tier so the one loader mark sits
   on top of every wash at once (Design.md §2.1). */
.blockUI.blockOverlay {
    z-index: var(--z-raised) !important;
    background: color-mix(in oklch, var(--paper) 60%, transparent) !important;
    opacity: 1 !important;
    cursor: progress !important;
}

/* ONE mark for the whole update, however many areas are washed — the plugin's
   small loader (core-loader.css draws it), fixed and centred on the visible
   part of every wash by assets/js/wc-update-state.js. It takes no pointer
   events, so it never blocks the wash WooCommerce put down. */
.mm-update {
    position: fixed;
    z-index: var(--z-sticky);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.mm-update[hidden] { display: none; }

/* WooCommerce's `.button` markup is comma-joined into the one button family,
   `.core-btn` in the plugin's core-controls.css (efficiencies #229, #558) — there is no
   button body in this sheet. Only placement stays here (the products-grid
   button below). */


/* ── Notices ───────────────────────────────────────────────────────────────────
   ONE notice design, everywhere WooCommerce prints one — the basket and
   checkout, the account pages, a product page's "added to basket" (Design.md
   §7.11, 2026-09-29): a 2px left edge in the signal colour on a 6% wash of
   the same colour, Ink text, square corners, no box. An info notice has no
   signal colour, so it is the Pebble notice (§14.4) with a Rule Strong edge.
   journey.css adds only the journey's page-width placement. */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    margin: 0 0 var(--sp-6);
    padding: var(--sp-4) var(--sp-5);
    border-left: 2px solid var(--rule-strong);
    background: var(--paper-soft);
    font-size: var(--fs-14);
    line-height: var(--lh-body);
    color: var(--ink);
}

.woocommerce-error {
    border-left-color: var(--err);
    background: color-mix(in oklch, var(--err) 6%, var(--paper));
}

.woocommerce-message {
    border-left-color: var(--ok);
    background: color-mix(in oklch, var(--ok) 6%, var(--paper));
}


/* ── Shop archive ────────────────────────────────────────────────────────────── */

.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
    padding: 0;
    margin: 0;
}

/* No elevation on a content card, hovered or not (Design.md §6.1). */
.woocommerce ul.products li.product {
    position: relative;
    border: 1px solid var(--rule);
    overflow: hidden;
}

.woocommerce ul.products li.product a img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease);
}

.woocommerce ul.products li.product:hover a img {
    transform: scale(1.04);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--fs-18);
    font-weight: var(--fw-semibold);
    padding: var(--sp-5) var(--sp-5) var(--sp-2);
    margin: 0;
}

.woocommerce ul.products li.product .price {
    padding: 0 var(--sp-5) var(--sp-4);
    font-size: var(--fs-18);
    font-weight: var(--fw-semibold);
    color: var(--ink);
}

.woocommerce ul.products li.product .button {
    margin: 0 var(--sp-5) var(--sp-5);
    width: calc(100% - var(--sp-10));
    text-align: center;
}

/* Filter / orderby bar */
.woocommerce-ordering select {
    border: 1px solid var(--rule-interactive);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-14);
    border-radius: var(--r-sm);
    background: var(--paper);
}

.woocommerce-result-count {
    font-size: var(--fs-14);
    color: var(--ink-muted);
}


/* ── Single product ──────────────────────────────────────────────────────────── */

.woocommerce div.product {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--sp-12);
    align-items: start;
}

.woocommerce div.product div.images {
    position: sticky;
    top: calc(var(--mm-header-h) + var(--sp-4));
}

.woocommerce div.product div.images img {
    width: 100%;
    height: auto;
}

.woocommerce div.product div.summary {
    padding-top: var(--sp-4);
}

.woocommerce div.product .product_title {
    font-size: clamp(var(--fs-22), 3vw, var(--fs-36));
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--sp-4);
}

.woocommerce div.product .price {
    font-size: var(--fs-28);
    font-weight: var(--fw-semibold);
    color: var(--ink);
    margin-bottom: var(--sp-6);
}

.woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--ink-muted);
    line-height: var(--lh-body);
    margin-bottom: var(--sp-8);
    font-size: var(--fs-14);
}

/* Quantity */
.woocommerce div.product form.cart .qty {
    width: 70px;
    padding: var(--sp-3);
    border: 1px solid var(--rule-interactive);
    border-radius: var(--r-sm);
    text-align: center;
    letter-spacing: var(--tracking-normal);
    font-size: var(--fs-16);
    font-weight: var(--fw-regular);
}

.woocommerce div.product form.cart {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-end;
    margin-bottom: var(--sp-6);
    flex-wrap: wrap;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs {
    grid-column: 1 / -1;
    border-top: 1px solid var(--rule);
    margin-top: var(--sp-12);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 0;
    list-style: none;
    margin-bottom: 0;
    border-bottom: 1px solid var(--rule);
    padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border-bottom: 2px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: var(--sp-4) var(--sp-6);
    font-size: var(--fs-14);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-muted);
    transition: color var(--dur-fast) var(--ease);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: var(--accent);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--ink);
}

.woocommerce div.product .woocommerce-tabs .panel {
    padding: var(--sp-8) 0;
    color: var(--ink-muted);
    line-height: var(--lh-body);
}

/* Sale badge — the §7.6 badge shape inverted to Coal + Paper. An accent fill
   behind text is a §3.5 breach, and the Accent Tint badge fails on Cabinet.
   Pinned to the photo's corner; the card and the (sticky) gallery anchor it. */
.woocommerce span.onsale {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    z-index: var(--z-raised);
    display: inline-flex;
    align-items: center;
    height: var(--h-badge);
    background-color: var(--ink);
    color: var(--paper);
    border-radius: var(--r-xs);
    font-size: var(--fs-12);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    line-height: 1;
    padding: 0 var(--sp-2);
}


/* ── Cart & checkout ──────────────────────────────────────────────────────────
   The basket and checkout are the Theme's own templates (Theme/woocommerce/
   cart/ and checkout/), styled by journey.css — enqueued only on the journey
   pages; see Theme/inc/enqueue.php. What stays here is the generic
   WooCommerce form-row / notice / order-review-table / #payment styling,
   which the order-pay endpoint still needs because it prints WooCommerce's
   own markup. */

/* Form rows — stack label above input */
.woocommerce form .form-row {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-4);
    width: 100%;
}

/* A checkbox row (remember me, terms, save card, create account) reads
   inline: box then sentence, not the uppercase field label above a control. */
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce form .form-row label.checkbox {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-14);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
    color: var(--ink);
    cursor: pointer;
}

/* Password fields — WooCommerce's script wraps the input in `.password-input`
   and adds an eye button that shows / hides it. */
.woocommerce form .password-input {
    position: relative;
    display: block;
}
.woocommerce form .password-input input.input-text {
    padding-right: var(--sp-10);
}
.woocommerce form .password-input input::-ms-reveal {
    display: none;
}
.woocommerce form .show-password-input {
    position: absolute;
    top: 50%;
    right: var(--sp-3);
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: var(--ink-muted);
    transform: translateY(-50%);
    -webkit-mask: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%23111111"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%23111111"/></svg>') center / contain no-repeat;
    cursor: pointer;
}
.woocommerce form .show-password-input:hover { background: var(--ink); }
.woocommerce form .show-password-input.display-password {
    -webkit-mask-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%23111111"/></svg>');
    mask-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%23111111"/></svg>');
}

/* Strength meter under a new password — the notice recipe (§7.11): a 2px
   signal edge on a 6% wash, Ink text. Warn is an edge only, never text. */
.woocommerce-password-strength {
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-left: 2px solid var(--rule-strong);
    background: var(--paper-soft);
    font-size: var(--fs-13);
    font-weight: var(--fw-semibold);
    color: var(--ink);
}
.woocommerce-password-strength:is(.short, .bad) {
    border-left-color: var(--err);
    background: color-mix(in oklch, var(--err) 6%, var(--paper));
}
.woocommerce-password-strength.good {
    border-left-color: var(--warn);
    background: color-mix(in oklch, var(--warn) 6%, var(--paper));
}
.woocommerce-password-strength.strong {
    border-left-color: var(--ok);
    background: color-mix(in oklch, var(--ok) 6%, var(--paper));
}
.woocommerce-password-hint {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--fs-13);
    color: var(--ink-muted);
}

/* Form-row widths — fields WooCommerce marks as `form-row-wide` (company,
   country, address lines, email, phone, notes) span the full width of any
   grid they sit in. */
.woocommerce form .form-row-wide,
.woocommerce form .form-row.notes {
    grid-column: 1 / -1;
}

.woocommerce form .form-row label {
    display: block;
    margin: 0;
    color: var(--ink-muted);
}
.woocommerce form .form-row label .required {
    color: var(--err);
    text-decoration: none;
}
.woocommerce form .form-row label .optional {
    color: var(--ink-faint);
    font-weight: var(--fw-regular);
}

.woocommerce form .form-row .woocommerce-input-wrapper {
    display: block;
    width: 100%;
}

/* The field body is `.core-input` (core-controls.css), which comma-joins these
   WooCommerce rows because their markup cannot take the class (efficiency
   #558). What stays here is the select2 picker's own box and the textarea's
   taller floor. */
.woocommerce form .form-row .select2-selection {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 var(--sp-3);
    font-size: var(--fs-14);
    color: var(--ink);
}
.woocommerce form .form-row textarea {
    min-height: 88px;
}

/* Select2 container — align height/border with native input.-text */
.woocommerce form .form-row .select2-container--default .select2-selection--single {
    height: var(--h-control);
    border: 1px solid var(--rule-interactive);
    border-radius: var(--r-sm);
    background: var(--paper);
}
.woocommerce form .form-row .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    padding-left: var(--sp-3);
    color: var(--ink);
}
.woocommerce form .form-row .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px;
}

/* Validation states — the field's edge and its label turn Err. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .select2-container--default .select2-selection--single {
    border-color: var(--err);
}
.woocommerce form .form-row.woocommerce-invalid label {
    color: var(--err);
}

/* Order review table inside the sticky card */
.woocommerce-checkout #order_review table.shop_table {
    width: 100%;
    border-collapse: collapse;
}
.woocommerce-checkout #order_review table.shop_table thead {
    display: none;
}
.woocommerce-checkout #order_review table.shop_table td,
.woocommerce-checkout #order_review table.shop_table th {
    padding: var(--sp-2) 0;
    font-size: var(--fs-14);
    text-align: left;
    color: var(--ink-soft);
}
.woocommerce-checkout #order_review table.shop_table tbody td.product-name {
    color: var(--ink);
    font-weight: var(--fw-regular);
}
.woocommerce-checkout #order_review table.shop_table tbody td.product-name .variation {
    margin-top: var(--sp-1);
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-normal);
    color: var(--ink-muted);
}
.woocommerce-checkout #order_review table.shop_table tbody td.product-total,
.woocommerce-checkout #order_review table.shop_table tfoot td {
    text-align: right;
    letter-spacing: var(--tracking-normal);
    color: var(--ink);
    white-space: nowrap;
}
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th,
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td {
    padding-top: var(--sp-3);
    border-top: 1px solid var(--rule);
    font-size: var(--fs-18);
    font-weight: var(--fw-semibold);
    color: var(--ink);
}

/* Payment methods — the order-pay endpoint, and Add payment method under My
   Account, both print WooCommerce's own #payment. Scoped through :where() to
   those two pages only: the checkout form also carries .woocommerce-checkout,
   and journey.css's .mmc #payment rules must win there. */
:where(.woocommerce-order-pay, #add_payment_method) #payment {
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--rule);
}
:where(.woocommerce-order-pay, #add_payment_method) #payment ul.payment_methods {
    padding: 0;
    margin: 0 0 var(--sp-4);
}
:where(.woocommerce-order-pay, #add_payment_method) #payment ul.payment_methods li {
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
    background: var(--paper);
    border: 1px solid var(--rule-interactive);
    border-radius: var(--r-sm);
}
:where(.woocommerce-order-pay, #add_payment_method) #payment ul.payment_methods li > input {
    margin-right: var(--sp-2);
}
:where(.woocommerce-order-pay, #add_payment_method) #payment ul.payment_methods li img {
    display: inline-block;
    width: auto;
    max-height: 24px;
    margin-left: var(--sp-2);
    vertical-align: middle;
}
:where(.woocommerce-order-pay, #add_payment_method) #payment ul.payment_methods li label {
    font-size: var(--fs-14);
    font-weight: var(--fw-regular);
    color: var(--ink);
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}
:where(.woocommerce-order-pay, #add_payment_method) #payment div.payment_box {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    background: var(--paper-soft);
    border-radius: var(--r-sm);
    font-size: var(--fs-13);
    color: var(--ink-soft);
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    margin-top: var(--sp-4);
    padding: var(--sp-3);
    background: var(--paper-soft);
    border-radius: var(--r-sm);
    font-size: var(--fs-13);
    color: var(--ink-soft);
}

/* The inline terms WooCommerce can expand under the checkbox. */
.woocommerce-terms-and-conditions {
    max-height: 200px;
    overflow: auto;
    margin-bottom: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--rule);
    background: var(--paper-soft);
}

/* Place order carries no rule here (efficiency #229). The checkout's own button
   is theme markup — `makemy_checkout_place_order_button()` renders it as
   `.core-btn .core-btn-primary .core-btn--lg`, and `journey.css` owns its
   treatment — so this sheet's `#place_order` body was overriding nothing on the
   checkout. The one surface that still prints WooCommerce's own
   `<button class="button alt" id="place_order">` is the order-pay endpoint,
   which the `.button` join in core-controls.css covers; it spans the column. */
#payment #place_order {
    width: 100%;
}


/* ── Step bar ────────────────────────────────────────────────────────────
   The configurator's steps bar (core-stepper.css) carried onto the journey,
   emitted by makemy_journey_steps(): equal columns split by Rule Strong
   hairlines, the current label in the accent, and a 2px accent line under
   every step up to the current one — drawn INSIDE the label (bottom: 0) and
   started 1px left on every run step after the first, so it reads unbroken
   across the dividers. The checkout's three steps and the confirmation's order
   stages both use it; a stage's detail and date sit in its column below.
   My account's section tabs use it as well (issue #586), every tab a link —
   so the rule lives here, in the sheet all three load, not in journey.css.
   A label that is a link or button also wears `.core-tab` (core-controls.css,
   makemy_journey_steps() and checkout.js add it) for the button reset, the
   hover and the inset focus ring; a plain-text step stays a bare span. The
   run underline stays here: `.core-tab`'s needs sibling tabs carrying
   aria-current="step", and these labels each sit in their own <li>. */

.mmj-steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mmj-steps__step {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mmj-steps__step + .mmj-steps__step { border-left: 1px solid var(--rule-strong); }
.mmj-steps__label {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--rule-strong);
  font-size: var(--fs-13);
  line-height: var(--lh-snug);
  text-align: center;
  color: var(--ink);
}
.mmj-steps__step.is-later .mmj-steps__label { color: var(--ink-muted); }
.mmj-steps__step.is-current .mmj-steps__label { color: var(--accent); }
.mmj-steps__step.is-run .mmj-steps__label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  pointer-events: none;
}
.mmj-steps__step + .mmj-steps__step.is-run .mmj-steps__label::after { left: -1px; }
a.mmj-steps__label { text-decoration: none; }
.mmj-steps__detail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-2) 0;
  font-size: var(--fs-12);
  line-height: var(--lh-body);
}
.mmj-steps__note { color: var(--ink-muted); }
.mmj-steps__when { color: var(--ink); }

/* ── Journey page head ───────────────────────────────────────────────────────── */

/* makemy_journey_head() (inc/journey-helpers.php): the page's name left, an
   optional slot right, one Rule Strong line under both — basket, checkout,
   confirmation and My account (efficiency #655). Here rather than journey.css
   because My account doesn't load that sheet; the checkout's `--steps` deltas
   stay there. */
.mmj-head {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-6);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--rule-strong);
}
.mmj-head__title {
    margin: 0;
    font-size: var(--fs-36);
    font-weight: var(--fw-regular);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tight);
}
.mmj-head__meta {
    margin: 0;
    font-size: var(--fs-16);
    line-height: var(--lh-body);
    color: var(--ink-muted);
}
/* The 2px accent line over the rule — full width unless a modifier sizes it. */
.mmj-head__line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
    pointer-events: none;
}

/* §7.17 accent title row (My account): semibold, in the site accent (Ink on
   the hub), one utility right, no rule. */
.mmj-head--title-row {
    align-items: center;
    gap: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-5);
    padding-bottom: 0;
    border-bottom: 0;
}
.mmj-head--title-row .mmj-head__title {
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
    color: var(--accent);
}

@media (width < 768px) {
    .mmj-head__title {
        font-size: var(--fs-28);
    }
}

/* ── My Account ──────────────────────────────────────────────────────────────── */

/* Issue #586 (option D2): WooCommerce's list of eleven links is now three rows
   above the content — a title row carrying Log out, the step bar over five
   sections, and the current section's pages as a joined chip group
   (`.core-chips`, core-controls.css). Markup: woocommerce/myaccount/
   navigation.php. The content runs full width beneath. */
.woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: var(--sp-8);
}

/* The title row is the journey head's `--title-row` (§7.17), above. */

.mma-nav__logout {
    width: auto;
}

.mma-nav__steps {
    border: 1px solid var(--rule-strong);
    border-bottom: 0;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
}

.mma-nav__pages {
    margin-top: var(--sp-4);
}

/* The phone fold — hidden until the bar no longer fits (Responsive, below). */
.mma-nav__phone {
    display: none;
}

/* The orders table: totals line up on the right, and the row actions drop to
   the small rung as secondaries (§7.1) — a Coal button on every row read as
   a column of primaries. Pay, when an order is awaiting it, stays Coal. */
.woocommerce-account :is(.woocommerce-orders-table__header-order-total, .woocommerce-orders-table__cell-order-total) {
    text-align: right;
}

.woocommerce-account .woocommerce-MyAccount-content table .button {
    display: inline-flex;
    width: auto;
    min-height: var(--h-btn-sm);
    padding: 0 var(--sp-3);
    font-size: var(--fs-13);
    border-radius: var(--r-xs);
}

.woocommerce-account .woocommerce-MyAccount-content table .button:not(.pay) {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--rule-interactive);
}

.woocommerce-account .woocommerce-MyAccount-content table .button:not(.pay):hover {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--ink);
}

.woocommerce-account .woocommerce-MyAccount-content table .button + .button {
    margin-left: var(--sp-2);
}


/* "Ordered by <name>" — a trade owner viewing a member's order (the plugin's
   Core_Trade_Account). The Pebble notice shape with an Ink edge: a fact about
   the order, not a signal. */
.woocommerce-account .core-trade-ordered-by {
    margin: 0 0 var(--sp-6);
    padding: var(--sp-3) var(--sp-4);
    border-left: 2px solid var(--ink);
    background: var(--paper-soft);
    font-size: var(--fs-14);
    color: var(--ink);
}

/* A configured line's spec on the order view (inconsistency #351): the
   preview beside label / value rows — the shape the confirmation and the
   HTML email print. Markup: the plugin's Core_Order_Specs_Display_Trait. */
.core-order-specs {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    margin-top: var(--sp-2);
}
.core-order-specs__preview {
    flex: none;
    width: 80px;
    height: auto;
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-xs);
}
.core-order-specs__rows {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    flex: 1;
    margin: 0;
    font-size: var(--fs-13);
    line-height: var(--lh-body);
    border-top: 1px solid var(--rule);
}
.core-order-specs__rows :is(dt, dd) {
    margin: 0;
    padding: var(--sp-1) 0;
    border-bottom: 1px solid var(--rule);
}
.core-order-specs__rows dt {
    padding-right: var(--sp-3);
    font-weight: var(--fw-regular);
    color: var(--ink-muted);
}
.core-order-specs__rows dd {
    color: var(--ink);
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */

@media (width < 1200px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }

    .woocommerce div.product {
        grid-template-columns: 1fr;
    }

    .woocommerce div.product div.images {
        position: static;
    }
}

@media (width < 768px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr;
    }

    .woocommerce .col2-set {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The step bar folds into one line: the current section in the accent,
       a chevron, and the run line to current ÷ total of the width — the
       checkout's phone bar (§7.15), opening into the section list. */
    .mma-nav__steps {
        display: none;
    }
    .mma-nav__phone {
        display: block;
        position: relative;
        border-bottom: 1px solid var(--rule-strong);
    }
    .mma-nav__phone::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: calc(100% * var(--mma-n) / var(--mma-total));
        height: 2px;
        background: var(--accent);
        pointer-events: none;
    }
    .mma-nav__phone-current {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: var(--h-control);
        font-size: var(--fs-16);
        color: var(--accent);
        cursor: pointer;
        list-style: none;
    }
    .mma-nav__phone-current::-webkit-details-marker {
        display: none;
    }
    .mma-nav__phone-current::after {
        content: "";
        width: 8px;
        height: 8px;
        border-right: 1.5px solid var(--ink);
        border-bottom: 1.5px solid var(--ink);
        transform: translateY(-2px) rotate(45deg);
        transition: transform var(--dur-fast) var(--ease);
    }
    .mma-nav__phone[open] .mma-nav__phone-current::after {
        transform: translateY(2px) rotate(-135deg);
    }
    .mma-nav__phone-list {
        list-style: none;
        margin: 0;
        padding: 0 0 var(--sp-2);
    }
    .mma-nav__phone-list a {
        display: flex;
        align-items: center;
        min-height: var(--h-control);
        font-size: var(--fs-14);
        color: var(--ink);
        text-decoration: none;
    }
    .mma-nav__phone-list a[aria-current] {
        color: var(--accent);
        font-weight: var(--fw-semibold);
    }
    /* A section's pages scroll sideways rather than wrap: a joined group
       broken over two lines no longer reads as one control. */
    .mma-nav__pages {
        max-width: 100%;
        overflow-x: auto;
    }

    /* A responsive account table stacks: one card per row, each cell a
       "Label   value" line (WooCommerce prints the label as data-title). */
    .woocommerce-account .woocommerce table.shop_table_responsive :is(thead, tbody th) {
        display: none;
    }
    .woocommerce-account .woocommerce table.shop_table_responsive :is(tbody, tr) {
        display: block;
    }
    .woocommerce-account .woocommerce table.shop_table_responsive tbody tr + tr {
        border-top: 1px solid var(--rule-strong);
    }
    .woocommerce-account .woocommerce table.shop_table_responsive td {
        display: flex;
        justify-content: space-between;
        gap: var(--sp-4);
        text-align: right;
    }
    .woocommerce-account .woocommerce table.shop_table_responsive td[data-title]::before {
        content: attr(data-title);
        font-weight: var(--fw-semibold);
        text-align: left;
    }
}