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

/* ── General resets ─────────────────────────────────────────────────────────── */

.woocommerce,
.woocommerce-page {
    font-family: var(--font-sans);
}

/* 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);
}


/* ── 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;
    font-family: var(--font-sans);
    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;
    font-family: var(--font-sans);
    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-family: var(--font-sans);
    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: 4px;
    font-family: var(--font-sans);
    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;
    font-family: var(--font-sans);
    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. */
:is(.woocommerce-checkout, #add_payment_method) #payment {
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--rule);
}
:is(.woocommerce-checkout, #add_payment_method) #payment ul.payment_methods {
    padding: 0;
    margin: 0 0 var(--sp-4);
}
:is(.woocommerce-checkout, #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);
}
:is(.woocommerce-checkout, #add_payment_method) #payment ul.payment_methods li > input {
    margin-right: var(--sp-2);
}
:is(.woocommerce-checkout, #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;
}
:is(.woocommerce-checkout, #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;
}
:is(.woocommerce-checkout, #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
   `.btn .btn--primary .btn--full .btn--stacked`, and `journey.css` owns its §11.4
   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%;
}


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

/* Two-column grid only when the MyAccount navigation actually renders.
   Logged-out account surfaces (login, lost-password, reset form) share the
   woocommerce-account body class but have no nav, so an unconditional grid
   drops their content into the 220px nav track. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--sp-10);
    align-items: start;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    border: 1px solid var(--rule);
    padding: var(--sp-5);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid var(--rule);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: var(--sp-3) var(--sp-2);
    font-size: var(--fs-14);
    color: var(--ink);
    transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active > a {
    color: var(--accent);
    padding-left: var(--sp-2);
}


/* ── 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;
    }

    .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
        grid-template-columns: 1fr;
    }
}

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

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

    /* 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;
    }
}