/* ============================================================================
   My Account
   ----------------------------------------------------------------------------
   Foundation for the customer-facing account section: shell with left sidebar
   navigation + dashboard with three-panel editorial layout. Uses tokens from
   main.css (:root) — no new colors, fonts, or spacing values introduced.
   Subsequent sections (orders, addresses, edit-account) inherit this shell.
   ============================================================================ */

/* ───────────────────────── Shell ───────────────────────── */

.lba-account-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--lba-space-3xl);
    padding-top: var(--lba-space-3xl);
    padding-bottom: var(--lba-space-4xl);
    align-items: start;
}

.lba-account-shell__sidebar {
    position: sticky;
    top: calc(80px + var(--lba-space-xl));
    /* Mobile: the nav collapses to a flex row with white-space:nowrap +
       flex-shrink:0 items, giving the sidebar an intrinsic min-content of
       ~760 px. Without min-width:0 the grid track expands to that width,
       inflating the entire shell past the viewport and forcing horizontal
       page overflow (audit 2026-05-27 F3 / F4 root cause). Safe at desktop
       too — the sidebar column is a fixed 240 px there. */
    min-width: 0;
}

.lba-account-shell__content {
    min-width: 0; /* prevent grid blowout from long order numbers */
}

/* ───────────────────────── Navigation ───────────────────────── */

.lba-account-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--lba-gray-200);
}

.lba-account-nav__item {
    border-bottom: 1px solid var(--lba-gray-200);
}

.lba-account-nav__item--logout {
    margin-top: var(--lba-space-md);
    border-top: 1px solid var(--lba-gray-200);
}

.lba-account-nav__link {
    display: block;
    padding: var(--lba-space-md) 0;
    font-size: var(--lba-font-size-sm);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lba-gray-700);
    text-decoration: none;
    transition: color 0.15s ease;
}

.lba-account-nav__link:hover,
.lba-account-nav__link:focus {
    color: var(--lba-black);
}

.lba-account-nav__item.is-active .lba-account-nav__link {
    color: var(--lba-black);
    font-weight: 500;
}

/* ───────────────────────── Dashboard greeting ───────────────────────── */

.lba-account-dashboard__greeting {
    margin-bottom: var(--lba-space-3xl);
    padding-bottom: var(--lba-space-xl);
    border-bottom: 1px solid var(--lba-gray-200);
}

.lba-account-dashboard__heading {
    font-size: var(--lba-font-size-3xl);
    font-weight: 400;
    line-height: 1.2;
    color: var(--lba-black);
    margin: 0;
}

/* ───────────────────────── Panels grid ───────────────────────── */

.lba-account-dashboard__panels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lba-space-xl);
}

.lba-account-panel {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lba-gray-200);
    padding: var(--lba-space-xl);
    background: var(--lba-white);
}

.lba-account-panel__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lba-space-md);
    margin-bottom: var(--lba-space-lg);
    padding-bottom: var(--lba-space-md);
    border-bottom: 1px solid var(--lba-gray-200);
}

.lba-account-panel__title {
    font-size: var(--lba-font-size-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--lba-black);
    margin: 0;
}

.lba-account-panel__view-all {
    font-size: var(--lba-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lba-gray-500);
    text-decoration: none;
    white-space: nowrap;
}

.lba-account-panel__view-all:hover,
.lba-account-panel__view-all:focus {
    color: var(--lba-black);
}

.lba-account-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lba-space-md);
}

/* ───────────────────────── Order rows (SSENSE-style) ───────────────────────── */

.lba-account-order-row {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto auto;
    align-items: center;
    gap: var(--lba-space-md);
    padding: var(--lba-space-md) 0;
    border-bottom: 1px solid var(--lba-gray-100);
    font-size: var(--lba-font-size-sm);
}

.lba-account-order-row:last-child {
    border-bottom: 0;
}

.lba-account-order-row__date {
    color: var(--lba-gray-500);
    font-size: var(--lba-font-size-xs);
    white-space: nowrap;
}

.lba-account-order-row__status {
    font-size: var(--lba-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--lba-gray-300);
    color: var(--lba-gray-700);
    white-space: nowrap;
}

.lba-account-order-row__status--processing,
.lba-account-order-row__status--on-hold {
    color: var(--lba-black);
    border-color: var(--lba-black);
}

.lba-account-order-row__status--completed {
    color: var(--lba-gray-500);
}

.lba-account-order-row__number {
    color: var(--lba-gray-700);
    font-variant-numeric: tabular-nums;
}

.lba-account-order-row__thumbs {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.lba-account-order-row__thumb {
    display: inline-block;
    width: 32px;
    height: 32px;
    overflow: hidden;
    background: var(--lba-gray-100);
    flex-shrink: 0;
}

.lba-account-order-row__thumb-img,
.lba-account-order-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lba-account-order-row__overflow {
    font-size: var(--lba-font-size-xs);
    color: var(--lba-gray-500);
    margin-left: 0.25rem;
    white-space: nowrap;
}

.lba-account-order-row__total {
    font-weight: 500;
    color: var(--lba-black);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lba-account-order-row__link {
    font-size: var(--lba-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lba-black);
    text-decoration: none;
    white-space: nowrap;
}

.lba-account-order-row__link:hover,
.lba-account-order-row__link:focus {
    text-decoration: underline;
}

/* ───────────────────────── Product rows (dashboard Quotes + Favorites) ─────────── */

/* Compact product row used by the Dashboard Recent Quotes panel (server-
   rendered from the WC session) and the Recent Favorites panel (JS-hydrated
   from localStorage). 48 px thumb + brand/name stack — narrower than the
   editorial Quote List / Favourites page rows, since the dashboard panel
   column is much tighter than those full-bleed list pages. */

.lba-account-product-row {
    border-bottom: 1px solid var(--lba-gray-100);
}

.lba-account-product-row:last-child {
    border-bottom: 0;
}

.lba-account-product-row__link {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: var(--lba-space-md);
    align-items: center;
    padding: var(--lba-space-sm) 0;
    text-decoration: none;
    color: var(--lba-black);
    transition: opacity 0.15s ease;
}

.lba-account-product-row__link:hover,
.lba-account-product-row__link:focus {
    opacity: 0.7;
}

.lba-account-product-row__thumb {
    display: block;
    width: 48px;
    height: 48px;
    overflow: hidden;
    background: var(--lba-gray-100);
}

.lba-account-product-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lba-account-product-row__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.lba-account-product-row__brand {
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--lba-gray-500);
}

.lba-account-product-row__name {
    font-size: var(--lba-font-size-sm);
    color: var(--lba-black);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.lba-account-quote-row .lba-account-product-row__link {
    grid-template-columns: minmax(0, 1fr);
}

.lba-account-quote-row__status {
    color: var(--lba-gray-600);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ───────────────────────── Empty state ───────────────────────── */

.lba-account-empty {
    text-align: center;
    padding: var(--lba-space-xl) 0;
    color: var(--lba-gray-500);
}

.lba-account-empty__message {
    font-size: var(--lba-font-size-base);
    margin: 0 0 var(--lba-space-sm);
    color: var(--lba-gray-500);
}

.lba-account-empty__link {
    font-size: var(--lba-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lba-black);
    text-decoration: none;
    border-bottom: 1px solid var(--lba-black);
    padding-bottom: 2px;
}

.lba-account-empty__link:hover,
.lba-account-empty__link:focus {
    color: var(--lba-gray-700);
    border-bottom-color: var(--lba-gray-700);
}

/* ───────────────────────── WC default content (orders table, address, forms) ───────────────────────── */

/* Light styling so non-dashboard endpoints (orders list, edit-address,
   edit-account) inherit a sensible look while their full editorial styling
   is built in subsequent sessions. */

.woocommerce-MyAccount-content > p:first-child {
    font-size: var(--lba-font-size-base);
    color: var(--lba-gray-700);
    margin-top: 0;
}

.woocommerce-MyAccount-content table.shop_table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--lba-font-size-sm);
}

.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
    padding: var(--lba-space-md);
    border-bottom: 1px solid var(--lba-gray-200);
    text-align: left;
}

.woocommerce-MyAccount-content table.shop_table th {
    font-weight: 500;
    text-transform: uppercase;
    font-size: var(--lba-font-size-xs);
    letter-spacing: 0.08em;
    color: var(--lba-gray-700);
}

/* ───────────────────────── Mobile (≤ 768px) ───────────────────────── */

@media (max-width: 768px) {
    .lba-account-shell {
        grid-template-columns: 1fr;
        gap: var(--lba-space-xl);
        padding-top: var(--lba-space-xl);
    }

    .lba-account-shell__sidebar {
        position: static;
        top: auto;
    }

    .lba-account-nav__list {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        border-top: 0;
        border-bottom: 1px solid var(--lba-gray-200);
        gap: var(--lba-space-lg);
        scrollbar-width: none;
    }

    .lba-account-nav__list::-webkit-scrollbar {
        display: none;
    }

    .lba-account-nav__item {
        border-bottom: 0;
        flex-shrink: 0;
    }

    .lba-account-nav__item--logout {
        margin-top: 0;
        border-top: 0;
    }

    .lba-account-nav__link {
        padding: var(--lba-space-sm) 0;
        white-space: nowrap;
    }

    .lba-account-dashboard__heading {
        font-size: var(--lba-font-size-2xl);
    }

    .lba-account-dashboard__panels {
        grid-template-columns: 1fr;
    }

    .lba-account-order-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "date status"
            "number total"
            "thumbs thumbs"
            "link link";
        gap: var(--lba-space-sm);
    }

    .lba-account-order-row__date   { grid-area: date; }
    .lba-account-order-row__status { grid-area: status; justify-self: end; }
    .lba-account-order-row__number { grid-area: number; }
    .lba-account-order-row__total  { grid-area: total; justify-self: end; }
    .lba-account-order-row__thumbs { grid-area: thumbs; }
    .lba-account-order-row__link   { grid-area: link; justify-self: start; }
}

/* ============================================================================
   Orders endpoint, added 2026-05-06
   ----------------------------------------------------------------------------
   Section header is namespaced for shared use across endpoint sections
   (Orders, Addresses, Account Details). Dashboard's greeting keeps its own
   namespace and visual treatment for now.
   ============================================================================ */

.lba-account-section__header {
    margin-bottom: var(--lba-space-2xl);
    padding-bottom: var(--lba-space-md);
    border-bottom: 1px solid var(--lba-gray-200);
}

.lba-account-section__heading {
    font-size: var(--lba-font-size-2xl);
    font-weight: 400;
    line-height: 1.2;
    color: var(--lba-black);
    margin: 0;
}

.lba-account-orders__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.lba-account-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--lba-space-lg);
    margin-top: var(--lba-space-2xl);
    padding-top: var(--lba-space-lg);
    border-top: 1px solid var(--lba-gray-200);
}

.lba-account-pagination__link {
    font-size: var(--lba-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lba-black);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
}

.lba-account-pagination__link:hover,
.lba-account-pagination__link:focus {
    border-bottom-color: var(--lba-black);
}

.lba-account-pagination__link--prev {
    margin-right: auto;
}

.lba-account-pagination__link--next {
    margin-left: auto;
}

/* ============================================================================
   Addresses + Account Details, added 2026-05-06
   ----------------------------------------------------------------------------
   Section header reused from Orders. Form input convention mirrors the
   editorial underline pattern from .lba-trade__form-* (main.css) but is
   namespaced separately so it doesn't leak across pages and so the WC
   form-row class names stay intact alongside.
   ============================================================================ */

/* ── Section intro copy (shared) ────────────────────────────── */

.lba-account-section__intro {
    margin: var(--lba-space-md) 0 0;
    font-size: var(--lba-font-size-sm);
    color: var(--lba-gray-500);
    line-height: 1.5;
}

/* ── Addresses listing ──────────────────────────────────────── */

.lba-account-addresses__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lba-space-2xl);
}

.lba-account-addresses__grid--single {
    grid-template-columns: 1fr;
    max-width: 480px;
}

.lba-account-address {
    border: 1px solid var(--lba-gray-200);
    padding: var(--lba-space-xl);
    background: var(--lba-white);
    display: flex;
    flex-direction: column;
}

.lba-account-address__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lba-space-md);
    margin: 0 0 var(--lba-space-md);
    padding-bottom: var(--lba-space-md);
    border-bottom: 1px solid var(--lba-gray-200);
}

.lba-account-address__title {
    font-size: var(--lba-font-size-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--lba-black);
    margin: 0;
}

.lba-account-address__edit {
    font-size: var(--lba-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lba-black);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    white-space: nowrap;
}

.lba-account-address__edit:hover,
.lba-account-address__edit:focus {
    border-bottom-color: var(--lba-black);
}

.lba-account-address__body {
    font-size: var(--lba-font-size-sm);
    color: var(--lba-gray-700);
    line-height: 1.6;
}

.lba-account-address__lines {
    font-style: normal;
    margin: 0;
}

.lba-account-address__empty {
    color: var(--lba-gray-500);
    margin: 0;
}

/* ── Account form (edit address + edit account) ─────────────── */

.lba-account-form {
    max-width: 640px;
}

.lba-account-form__row {
    margin-bottom: var(--lba-space-lg);
}

.lba-account-form__row--half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lba-space-lg);
}

.lba-account-form__row--half .lba-account-form__field {
    margin: 0;
}

.lba-account-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
}

.lba-account-form__label,
.lba-account-form .form-row > label,
.lba-account-form__fields .form-row > label {
    font-family: var(--lba-font-secondary, inherit);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lba-gray-700);
    margin: 0;
}

.lba-account-form__label .required {
    color: var(--lba-gray-500);
    border: 0;
    text-decoration: none;
}

/* WooCommerce injects <button class="show-password-input"> next to every
   password input as a click-to-reveal toggle. Without Dashicons loaded on
   the frontend, the button renders as a tiny 4×4px gray block that reads
   as a stray "°" character. Hide it across every LBA account surface that
   carries password fields: auth pages (login / register / lost-password /
   reset-password / confirmation) AND the logged-in account-details form
   (Current / New / Confirm password). */
.lba-account-auth .show-password-input,
.lba-account-auth .hide-password-input,
.lba-account-form .show-password-input,
.lba-account-form .hide-password-input {
    display: none;
}

.lba-account-form__input,
.lba-account-form input[type="text"],
.lba-account-form input[type="email"],
.lba-account-form input[type="tel"],
.lba-account-form input[type="password"],
.lba-account-form select,
.lba-account-form textarea,
.lba-account-form__fields input[type="text"],
.lba-account-form__fields input[type="email"],
.lba-account-form__fields input[type="tel"],
.lba-account-form__fields input[type="password"],
.lba-account-form__fields select,
.lba-account-form__fields textarea {
    font-family: var(--lba-font-secondary, inherit);
    font-size: var(--lba-font-size-sm);
    color: var(--lba-black);
    background: var(--lba-white);
    border: none;
    border-bottom: 1px solid var(--lba-gray-300);
    padding: 0.5rem 0;
    outline: none;
    transition: border-color 0.15s ease;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    box-shadow: none;
}

.lba-account-form__input:focus,
.lba-account-form input[type="text"]:focus,
.lba-account-form input[type="email"]:focus,
.lba-account-form input[type="tel"]:focus,
.lba-account-form input[type="password"]:focus,
.lba-account-form select:focus,
.lba-account-form textarea:focus,
.lba-account-form__fields input[type="text"]:focus,
.lba-account-form__fields input[type="email"]:focus,
.lba-account-form__fields input[type="tel"]:focus,
.lba-account-form__fields input[type="password"]:focus,
.lba-account-form__fields select:focus,
.lba-account-form__fields textarea:focus {
    border-bottom-color: var(--lba-black);
}

.lba-account-form select,
.lba-account-form__fields select {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23737373' stroke-width='1.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    padding-right: 1.25rem;
    cursor: pointer;
}

.lba-account-form__hint {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--lba-font-size-xs);
    color: var(--lba-gray-500);
    line-height: 1.5;
}

.lba-account-form__hint em {
    font-style: italic;
}

.lba-account-form__fieldset {
    border: 0;
    border-top: 1px solid var(--lba-gray-200);
    padding: var(--lba-space-xl) 0 0;
    margin: var(--lba-space-2xl) 0 0;
}

.lba-account-form__legend {
    font-size: var(--lba-font-size-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--lba-black);
    padding: 0;
    margin: 0 0 var(--lba-space-lg);
}

.lba-account-form__actions {
    margin: var(--lba-space-2xl) 0 0;
    padding: 0;
}

/* Edit-address auto-rendered fields (woocommerce_form_field output)
   live inside .woocommerce-address-fields__field-wrapper. WC stacks each
   field as <p class="form-row">. The .lba-account-form__fields wrapper
   gives them shared vertical rhythm without rewriting the loop. */

.lba-account-form__fields .form-row {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0 0 var(--lba-space-lg);
    padding: 0;
}

.lba-account-form__fields .form-row-first,
.lba-account-form__fields .form-row-last {
    display: inline-flex;
    width: calc(50% - var(--lba-space-md));
    vertical-align: top;
}

.lba-account-form__fields .form-row-first {
    margin-right: calc(var(--lba-space-md) * 2);
}

.lba-account-form__fields .clear {
    clear: both;
    display: block;
}

/* ── Mobile (≤ 768px) ───────────────────────────────────────── */

@media (max-width: 768px) {
    .lba-account-addresses__grid,
    .lba-account-addresses__grid--single {
        grid-template-columns: 1fr;
        gap: var(--lba-space-lg);
        max-width: none;
    }

    .lba-account-form__row--half {
        grid-template-columns: 1fr;
        gap: var(--lba-space-lg);
    }

    .lba-account-form__fields .form-row-first,
    .lba-account-form__fields .form-row-last {
        display: flex;
        width: 100%;
        margin-right: 0;
    }

    /* MOBILE-CTA-1: full-width primary submit on in-shell account forms
       (edit-account, edit-address billing/shipping). The auth context
       already gets this via .lba-account-auth above. */
    .lba-account-form__actions .button {
        width: 100%;
    }
}

/* ============================================================================
   Authentication forms, added 2026-05-06
   ----------------------------------------------------------------------------
   form-login.php / form-register.php / form-lost-password.php /
   form-reset-password.php / lost-password-confirmation.php render OUTSIDE the
   My Account shell (WC short-circuits the shell when logged out), so the auth
   wrapper carries its own centered card layout. Form inputs reuse the
   .lba-account-form-* rules above without modification.
   ============================================================================ */

/* ── Centered wrapper ───────────────────────────────────────── */

.lba-account-auth {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--lba-space-3xl) var(--lba-space-md) var(--lba-space-4xl);
}

.lba-account-auth--with-register {
    max-width: 960px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lba-space-3xl);
    align-items: start;
}

.lba-account-auth__panel {
    min-width: 0;
}

/* ── Header overrides for the auth context ──────────────────── */

.lba-account-auth .lba-account-section__header {
    margin-bottom: var(--lba-space-xl);
}

.lba-account-section__header--secondary {
    margin-bottom: var(--lba-space-lg);
    padding-bottom: var(--lba-space-sm);
}

.lba-account-section__heading--secondary {
    font-size: var(--lba-font-size-base);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ── Login form: remember-me row ────────────────────────────── */

.lba-account-auth__rememberme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lba-space-md);
    margin: var(--lba-space-md) 0 var(--lba-space-lg);
    flex-wrap: wrap;
}

.lba-account-auth__rememberme {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--lba-font-size-sm);
    color: var(--lba-gray-700);
    cursor: pointer;
    margin: 0;
}

.lba-account-auth__rememberme input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--lba-black);
}

.lba-account-auth__lost-password {
    font-size: var(--lba-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lba-black);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    white-space: nowrap;
}

.lba-account-auth__lost-password:hover,
.lba-account-auth__lost-password:focus {
    border-bottom-color: var(--lba-black);
}

/* ── Submit button width ────────────────────────────────────── */

.lba-account-auth .lba-account-form__actions .button {
    width: 100%;
}

/* ── /my-account/customer-logout/ confirm + cancel row ────── */
.lba-customer-logout__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lba-space-md);
}
.lba-customer-logout__cancel {
    font-size: var(--lba-font-size-xs);
}

/* ── Divider ("or") ─────────────────────────────────────────── */

.lba-account-auth__divider {
    position: relative;
    margin: var(--lba-space-xl) 0;
    text-align: center;
    border-top: 1px solid var(--lba-gray-200);
}

.lba-account-auth__divider-label {
    position: relative;
    top: -0.625rem;
    display: inline-block;
    padding: 0 var(--lba-space-md);
    background: var(--lba-white);
    font-size: var(--lba-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lba-gray-500);
}

/* ── Sign in with Google container ──────────────────────────── */

.lba-account-auth__social {
    margin-top: 0;
}

/* Tighten Nextend's injected button to match the global .button rhythm. */
.lba-account-auth__social .nsl-container,
.lba-account-auth__social .nsl-container-block {
    margin: 0;
    width: 100%;
}

.lba-account-auth__social .nsl-button {
    width: 100%;
    border-radius: 0;
    font-family: var(--lba-font-secondary, inherit);
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--lba-font-size-sm);
    border: 1px solid var(--lba-gray-300);
    transition: border-color 0.15s ease;
}

.lba-account-auth__social .nsl-button:hover {
    border-color: var(--lba-black);
}

/* ── Secondary action row (back to sign in, etc.) ──────────── */

.lba-account-auth__alt {
    margin: var(--lba-space-xl) 0 0;
    text-align: center;
}

.lba-account-auth__alt-link {
    font-size: var(--lba-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lba-black);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

.lba-account-auth__alt-link:hover,
.lba-account-auth__alt-link:focus {
    border-bottom-color: var(--lba-black);
}

/* ── Register section (when registration enabled) ───────────── */

.lba-account-auth__register-section {
    padding-top: 0;
}

/* In single-column mode (registration enabled but viewport tight or
   future stacked variant), the register section gets a top divider. */
.lba-account-auth--with-register .lba-account-auth__panel--register {
    border-left: 1px solid var(--lba-gray-200);
    padding-left: var(--lba-space-3xl);
}

/* ── Confirmation notice ────────────────────────────────────── */

.lba-account-auth__notice {
    font-size: var(--lba-font-size-base);
    line-height: 1.6;
    color: var(--lba-gray-700);
    margin: 0;
}

/* ── Mobile (≤ 768px) ───────────────────────────────────────── */

@media (max-width: 768px) {
    .lba-account-auth {
        padding: var(--lba-space-xl) var(--lba-space-md) var(--lba-space-2xl);
    }

    .lba-account-auth--with-register {
        grid-template-columns: 1fr;
        gap: var(--lba-space-xl);
        max-width: 480px;
    }

    .lba-account-auth--with-register .lba-account-auth__panel--register {
        border-left: 0;
        border-top: 1px solid var(--lba-gray-200);
        padding-left: 0;
        padding-top: var(--lba-space-xl);
    }

    .lba-account-auth__rememberme-row {
        align-items: flex-start;
    }
}

/* ============================================================================
   Checkout, added 2026-05-08
   ----------------------------------------------------------------------------
   Single-page custom checkout. Two-column on desktop (form left, sticky order
   summary right); single-column on ≤900px with order summary as a <details>
   accordion above the form. Reuses .lba-account-form__*, .lba-account-section
   __*, .lba-account-empty__* for inner pieces; new blocks are scoped under
   .lba-checkout__*. No new design tokens.
   ============================================================================ */

/* ── Layout ────────────────────────────────────────────────────────────── */

.lba-checkout {
    max-width: var(--lba-container-max);
    margin: 0 auto;
    /* No top padding: the page template's .lba-archive__title block above
       and the .container.entry-content's own padding-top already provide
       breathing room. Doubling-up here was pushing the form ~150px below
       the heading. Bottom remains generous. */
    padding: 0 var(--lba-container-padding) var(--lba-space-4xl);
}

.lba-checkout__layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--lba-space-3xl);
    align-items: start;
}

.lba-checkout__main {
    min-width: 0;
}

.lba-checkout__page-header {
    margin-bottom: var(--lba-space-2xl);
}

/* ── Sections ──────────────────────────────────────────────────────────── */

.lba-checkout__section {
    padding-bottom: var(--lba-space-xl);
    margin-bottom: var(--lba-space-xl);
    border-bottom: 1px solid var(--lba-gray-200);
}

.lba-checkout__section:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.lba-checkout__section-header {
    margin: 0 0 var(--lba-space-md);
}

.lba-checkout__section-header--with-toggle {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lba-space-md);
    flex-wrap: wrap;
}

.lba-checkout__section-heading {
    font-size: var(--lba-font-size-base);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--lba-black);
    margin: 0;
}

/* Customer section: signed-in notice + same-as-shipping toggle ──────────── */

.lba-checkout__signed-in-notice {
    margin: 0 0 var(--lba-space-lg);
    font-size: var(--lba-font-size-sm);
    color: var(--lba-gray-700);
}

.lba-checkout__register-toggle-row {
    margin-top: var(--lba-space-md);
}

.lba-checkout__register-toggle,
.lba-checkout__same-as-shipping {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--lba-font-size-sm);
    color: var(--lba-gray-700);
    cursor: pointer;
}

.lba-checkout__register-toggle input[type="checkbox"],
.lba-checkout__same-as-shipping input[type="checkbox"] {
    accent-color: var(--lba-black);
    margin: 0;
}

.lba-checkout__register-fields[hidden],
.lba-checkout__billing-fields[hidden] {
    display: none;
}

.lba-checkout__register-fields {
    margin-top: var(--lba-space-md);
}

/* ── Shipping method radios (Section 4) ────────────────────────────────── */

.lba-checkout__shipping-methods {
    display: flex;
    flex-direction: column;
    gap: var(--lba-space-sm);
}

.lba-checkout__shipping-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--lba-space-md);
    padding: var(--lba-space-md);
    border: 1px solid var(--lba-gray-200);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.lba-checkout__shipping-row:hover {
    border-color: var(--lba-gray-500);
}

.lba-checkout__shipping-row.is-selected,
.lba-checkout__shipping-row:has(input[type="radio"]:checked) {
    border-color: var(--lba-black);
    background: var(--lba-gray-100);
}

.lba-checkout__shipping-row input[type="radio"] {
    accent-color: var(--lba-black);
    margin: 0;
}

.lba-checkout__shipping-row-title {
    font-size: var(--lba-font-size-sm);
    color: var(--lba-black);
}

.lba-checkout__shipping-row-cost {
    font-size: var(--lba-font-size-sm);
    font-variant-numeric: tabular-nums;
    color: var(--lba-black);
    font-weight: 500;
}

.lba-checkout__shipping-empty {
    font-size: var(--lba-font-size-sm);
    color: var(--lba-gray-500);
    margin: 0;
}

/* ── Payment section ───────────────────────────────────────────────────── */

.lba-checkout__section--payment {
    /* WC payment.php's container; styled minimally so Stripe Elements drops
       in cleanly when activated. */
}

.lba-checkout__section--payment .wc_payment_methods,
.lba-checkout__section--payment ul.payment_methods {
    list-style: none !important;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lba-space-sm);
}

/* The <li> wrapper around each payment method (or the no-payment-methods
   placeholder) inherits display:list-item from the UA, which renders a
   bullet even with list-style:none on the parent. Force display:block
   so the marker box doesn't paint. */
.lba-checkout__section--payment .wc_payment_methods > li,
.lba-checkout__section--payment ul.payment_methods > li {
    display: block;
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.lba-checkout__section--payment .wc_payment_method,
.lba-checkout__section--payment .payment_method {
    padding: var(--lba-space-md);
    border: 1px solid var(--lba-gray-200);
}

/* The Stripe-pending placeholder notice and any WC-emitted info notice
   inside the payment section. Restrained alert treatment, matches the
   editorial palette; not the default WC blue/green WooCommerce bar. */
.lba-checkout__section--payment .woocommerce-notice,
.lba-checkout__section--payment .woocommerce-info {
    font-size: var(--lba-font-size-sm);
    color: var(--lba-gray-700);
    background: var(--lba-gray-100);
    padding: var(--lba-space-md) var(--lba-space-lg);
    border-left: 2px solid var(--lba-gray-500);
    margin: 0;
}

/* Tighten the gap between the payment section header and the placeholder
   notice. The .wc_payment_methods ul has its own zero margin; the
   .form-row.place-order block below it (privacy + terms + place-order)
   needs separation from the placeholder via space-lg. */
.lba-checkout__section--payment .form-row.place-order {
    margin-top: var(--lba-space-lg);
    padding: 0;
}

/* Privacy notice and terms checkbox row inside payment.php — match the
   surrounding form rhythm rather than WC's stock spacing. */
.lba-checkout__section--payment .woocommerce-privacy-policy-text,
.lba-checkout__section--payment .woocommerce-terms-and-conditions-wrapper,
.lba-checkout__section--payment .form-row.validate-required {
    font-size: var(--lba-font-size-sm);
    color: var(--lba-gray-700);
    line-height: 1.5;
    margin: var(--lba-space-md) 0 0;
}

.lba-checkout__section--payment .woocommerce-privacy-policy-text p {
    margin: 0;
}

/* Hide the abbr.required asterisk on the terms-and-conditions checkbox
   label. The field is already required by default; the dangling "*" reads
   as orphaned punctuation. Screen-readers still announce the input as
   required from the underlying <input required> attribute. */
.lba-checkout__section--payment .woocommerce-terms-and-conditions-checkbox-text .required,
.lba-checkout__section--payment .woocommerce-form__label-for-checkbox .required {
    display: none;
}

/* Defensive hide for the static "Please read and accept the terms and
   conditions" message rendered by some WC versions as persistent helper
   copy under the checkbox. WC's wc_print_notices() output for an actual
   validation error renders inside .woocommerce-NoticeGroup at the top of
   the form, not under the checkbox; if WC ever revives the persistent
   helper copy this rule keeps it from appearing as static text. */
.lba-checkout__section--payment p.terms-and-conditions-error,
.lba-checkout__section--payment .wc-terms-and-conditions-error-message {
    display: none;
}

.lba-checkout__section--payment button[name="woocommerce_checkout_place_order"],
#place_order {
    width: 100%;
    margin-top: var(--lba-space-lg);
}

/* ── Order summary panel ───────────────────────────────────────────────── */

.lba-checkout__summary {
    position: sticky;
    top: calc(80px + var(--lba-space-xl));
}

.admin-bar .lba-checkout__summary {
    top: calc(112px + var(--lba-space-xl));
}

.lba-checkout__summary-accordion {
    border: 1px solid var(--lba-gray-200);
    background: var(--lba-white);
}

.lba-checkout__summary-toggle {
    display: none; /* hidden on desktop; visible on mobile via @media below */
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    padding: var(--lba-space-md) var(--lba-space-lg);
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lba-space-md);
    font-family: inherit;
    color: inherit;
}

.lba-checkout__summary-label {
    font-size: var(--lba-font-size-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--lba-black);
}

.lba-checkout__summary-preview {
    font-size: var(--lba-font-size-sm);
    color: var(--lba-gray-700);
}

.lba-checkout__summary-body {
    padding: var(--lba-space-lg) var(--lba-space-lg) var(--lba-space-xl);
}

/* ── Order items list ──────────────────────────────────────────────────── */

.lba-checkout__order-items {
    list-style: none;
    margin: 0 0 var(--lba-space-lg);
    padding: 0 0 var(--lba-space-md);
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--lba-gray-200);
}

.lba-checkout__order-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: var(--lba-space-md);
    padding: var(--lba-space-md) 0;
    align-items: start;
    border-bottom: 1px solid var(--lba-gray-100);
}

.lba-checkout__order-item:last-child {
    border-bottom: 0;
}

.lba-checkout__order-item-thumb {
    display: block;
    width: 64px;
    height: 64px;
    overflow: hidden;
    background: var(--lba-gray-100);
}

.lba-checkout__order-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lba-checkout__order-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.lba-checkout__order-item-brand {
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--lba-gray-500);
}

.lba-checkout__order-item-name {
    font-size: var(--lba-font-size-sm);
    color: var(--lba-black);
    line-height: 1.3;
}

.lba-checkout__order-item-meta {
    font-size: var(--lba-font-size-xs);
    color: var(--lba-gray-500);
    line-height: 1.5;
}

.lba-checkout__order-item-qty {
    font-size: var(--lba-font-size-xs);
    color: var(--lba-gray-500);
    margin-top: 0.15rem;
}

.lba-checkout__order-item-total {
    font-size: var(--lba-font-size-sm);
    font-variant-numeric: tabular-nums;
    color: var(--lba-black);
    font-weight: 500;
    text-align: right;
}

/* ── Totals block ──────────────────────────────────────────────────────── */

.lba-checkout__totals {
    display: flex;
    flex-direction: column;
    gap: var(--lba-space-sm);
    margin: 0 0 var(--lba-space-lg);
}

.lba-checkout__totals-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lba-space-md);
    font-size: var(--lba-font-size-sm);
}

.lba-checkout__totals-row dt {
    color: var(--lba-gray-700);
    margin: 0;
}

.lba-checkout__totals-row dd {
    color: var(--lba-black);
    font-variant-numeric: tabular-nums;
    margin: 0;
}

.lba-checkout__totals-row--total {
    padding-top: var(--lba-space-md);
    border-top: 1px solid var(--lba-gray-200);
    /* No margin-top: the .lba-checkout__totals flex gap (sm) already
       provides separation; an extra margin makes Total sit lonely. */
    font-size: var(--lba-font-size-base);
    font-weight: 500;
}

.lba-checkout__totals-row--total dt,
.lba-checkout__totals-row--total dd {
    color: var(--lba-black);
}

.lba-checkout__shipping-pending {
    font-size: var(--lba-font-size-xs);
    color: var(--lba-gray-500);
    font-style: italic;
}

/* ── Coupon expander ───────────────────────────────────────────────────── */

.lba-checkout__summary-coupon {
    margin-top: var(--lba-space-lg);
    padding-top: var(--lba-space-md);
    border-top: 1px solid var(--lba-gray-200);
}

.lba-checkout__summary-coupon .checkout_coupon {
    margin: 0;
}

.lba-checkout__summary-coupon .form-row {
    margin: var(--lba-space-sm) 0;
}

.lba-checkout__summary-coupon .woocommerce-form-coupon-toggle {
    margin: 0;
}

.lba-checkout__summary-coupon .woocommerce-info {
    font-size: var(--lba-font-size-sm);
    color: var(--lba-gray-700);
    background: transparent;
    padding: 0;
    border: 0;
}

.lba-checkout__summary-coupon a.showcoupon,
.lba-checkout__coupon-toggle {
    font-size: var(--lba-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lba-black);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

.lba-checkout__coupon-toggle {
    appearance: none;
    background: transparent;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    cursor: pointer;
    font-family: inherit;
    padding-left: 0;
    padding-right: 0;
}

.lba-checkout__summary-coupon a.showcoupon:hover,
.lba-checkout__coupon-toggle:hover {
    border-bottom-color: var(--lba-black);
}

/* Coupon form — match the .newsletter-micro__* inline pattern from
   homepage.css (transparent input with bottom border + arrow-only button,
   all on one flex row). The checkout template renders a valid non-form
   coupon entry inside the main checkout form, and checkout.js submits it
   through WooCommerce's nonce-protected coupon endpoint. */

.lba-checkout__summary-coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lba-space-sm);
    /* The .lba-checkout__summary-coupon wrapper already has top border +
       margin from the previous styling block; that stays. */
}

.lba-checkout__coupon-entry {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lba-space-sm);
}

.lba-checkout__coupon-entry[hidden] {
    display: none;
}

.lba-checkout__coupon-status {
    flex: 1 0 100%;
    margin: 0;
    color: var(--lba-gray-700);
    font-size: var(--lba-font-size-xs);
}

/* WC's <p>If you have a coupon code, please apply it below.</p> intro
   line is the first non-form-row <p>. Hide it; the prompt above
   ("Have a coupon? Add code") is the user-facing cue. */
.lba-checkout__summary-coupon > p:not(.form-row):not(.woocommerce-info) {
    display: none;
}

.lba-checkout__summary-coupon .form-row {
    margin: 0 !important;
    padding: 0;
}

.lba-checkout__summary-coupon .form-row-first {
    flex: 1 1 auto;
    min-width: 0;
}

.lba-checkout__summary-coupon .form-row-last {
    flex: 0 0 auto;
}

.lba-checkout__summary-coupon .clear {
    display: none;
}

/* The Add-code prompt notice should occupy a full row above the input
   row so flex-wrap puts it on its own line. */
.lba-checkout__summary-coupon .woocommerce-info {
    flex: 1 0 100%;
}

.lba-checkout__summary-coupon input.input-text,
.lba-checkout__summary-coupon input[name="coupon_code"] {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--lba-gray-300);
    padding: var(--lba-space-xs) 0;
    font-family: var(--lba-font-secondary);
    font-size: var(--lba-font-size-sm);
    color: var(--lba-black);
    outline: none;
    border-radius: 0;
    box-shadow: none;
}

.lba-checkout__summary-coupon input.input-text::placeholder,
.lba-checkout__summary-coupon input[name="coupon_code"]::placeholder {
    color: var(--lba-gray-500);
}

.lba-checkout__summary-coupon input.input-text:focus,
.lba-checkout__summary-coupon input[name="coupon_code"]:focus {
    border-bottom-color: var(--lba-black);
}

.lba-checkout__summary-coupon button[name="apply_coupon"],
.lba-checkout__summary-coupon button.button[name="apply_coupon"] {
    background: none !important;
    border: none !important;
    color: var(--lba-gray-500) !important;
    padding: 0 var(--lba-space-xs) !important;
    font-size: 0; /* hide "Apply coupon" text; arrow comes from ::before */
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
    letter-spacing: normal;
    text-transform: none;
    width: auto;
    min-width: 0;
}

.lba-checkout__summary-coupon button[name="apply_coupon"]::before {
    content: "\2192"; /* → */
    font-size: var(--lba-font-size-base);
    display: inline-block;
}

.lba-checkout__summary-coupon button[name="apply_coupon"]:hover,
.lba-checkout__summary-coupon button.button[name="apply_coupon"]:hover {
    background: none !important;
    color: var(--lba-black) !important;
}

/* Input focus → button color shift, matching the footer newsletter's
   "input:focus + button" pattern. */
.lba-checkout__summary-coupon .form-row-first:has(input:focus) ~ .form-row-last button[name="apply_coupon"] {
    color: var(--lba-black) !important;
}

/* ── Order received page ───────────────────────────────────────────────── */

.lba-checkout-received {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--lba-space-3xl) var(--lba-container-padding) var(--lba-space-4xl);
}

.lba-checkout-received__overview {
    display: flex;
    flex-direction: column;
    gap: var(--lba-space-md);
    margin: 0 0 var(--lba-space-2xl);
    padding: var(--lba-space-xl);
    border: 1px solid var(--lba-gray-200);
}

.lba-checkout-received__overview-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lba-space-md);
    font-size: var(--lba-font-size-sm);
}

.lba-checkout-received__overview-row dt {
    color: var(--lba-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--lba-font-size-xs);
    margin: 0;
}

.lba-checkout-received__overview-row dd {
    color: var(--lba-black);
    font-variant-numeric: tabular-nums;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

.lba-checkout-received__cta {
    margin: var(--lba-space-2xl) 0 0;
}

.lba-checkout-received__failed-message {
    font-size: var(--lba-font-size-base);
    color: var(--lba-gray-700);
    line-height: 1.6;
    margin: var(--lba-space-md) 0 var(--lba-space-2xl);
}

/* ── Mobile (≤ 900px): single column with order summary on top accordion */

@media (max-width: 900px) {
    .lba-checkout {
        padding: var(--lba-space-xl) var(--lba-container-padding) var(--lba-space-2xl);
    }

    .lba-checkout__layout {
        grid-template-columns: 1fr;
        gap: var(--lba-space-xl);
    }

    .lba-checkout__summary {
        position: static;
        grid-row: 1 / 2;
    }

    .admin-bar .lba-checkout__summary {
        top: auto;
    }

    /* Show the toggle button on mobile. Default-collapsed state is the
       absence of .is-expanded; checkout.js toggles the class on click. */
    .lba-checkout__summary-toggle {
        display: flex;
    }

    .lba-checkout__summary-accordion:not(.is-expanded) .lba-checkout__summary-body {
        display: none;
    }

    .lba-checkout__page-header {
        margin-bottom: var(--lba-space-xl);
    }

    .lba-checkout__section-header--with-toggle {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--lba-space-sm);
    }
}

/* ============================================================================
   View Order, added 2026-05-11
   ----------------------------------------------------------------------------
   /my-account/view-order/[id]/ — editorial layout inside the My Account shell.
   Reuses .lba-account-section__header, .lba-account-order-row__status,
   .lba-account-address, .lba-checkout__order-item and .lba-checkout__totals.
   Only adds local layout glue (section headers + spacing) on top.
   ============================================================================ */

.lba-view-order__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.lba-view-order__meta {
    margin: var(--lba-space-sm) 0 0;
}

.lba-view-order__status {
    margin-top: var(--lba-space-lg);
}

.lba-view-order__status-message {
    margin: var(--lba-space-md) 0 0;
    font-size: var(--lba-font-size-sm);
    color: var(--lba-gray-500);
    line-height: 1.5;
}

.lba-view-order__items,
.lba-view-order__totals-section,
.lba-view-order__customer,
.lba-view-order__notes,
.lba-view-order__help {
    margin-bottom: var(--lba-space-2xl);
}

.lba-view-order__help {
    margin-bottom: 0;
}

.lba-view-order__section-header {
    margin-bottom: var(--lba-space-lg);
    padding-bottom: var(--lba-space-sm);
    border-bottom: 1px solid var(--lba-gray-200);
}

.lba-view-order__section-heading {
    font-size: var(--lba-font-size-base);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--lba-black);
    margin: 0;
}

.lba-view-order__item-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lba-view-order__addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lba-space-2xl);
}

.lba-view-order__address-phone,
.lba-view-order__address-email {
    margin: var(--lba-space-sm) 0 0;
    font-size: var(--lba-font-size-sm);
    color: var(--lba-gray-700);
}

.lba-view-order__payment {
    margin: var(--lba-space-xl) 0 0;
    font-size: var(--lba-font-size-sm);
    color: var(--lba-gray-700);
}

.lba-view-order__note {
    padding: var(--lba-space-md) 0;
    border-bottom: 1px solid var(--lba-gray-100);
}

.lba-view-order__note:last-child {
    border-bottom: 0;
}

.lba-view-order__note-meta {
    margin: 0 0 var(--lba-space-xs);
    font-size: var(--lba-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lba-gray-500);
}

.lba-view-order__note-body {
    margin: 0;
    font-size: var(--lba-font-size-sm);
    color: var(--lba-gray-700);
    line-height: 1.6;
}

.lba-view-order__note-body p {
    margin: 0;
}

.lba-view-order__help-prompt {
    margin: 0 0 var(--lba-space-md);
    font-size: var(--lba-font-size-sm);
    color: var(--lba-gray-500);
    line-height: 1.5;
}

.lba-view-order__help-link {
    display: inline-block;
}

/* ── Mobile (≤ 768px) ───────────────────────────────────────── */

@media (max-width: 768px) {
    .lba-view-order__addresses {
        grid-template-columns: 1fr;
        gap: var(--lba-space-lg);
    }
}

/* ============================================================================
   Trade — /my-account/trade/ endpoint
   ----------------------------------------------------------------------------
   Rendered by partials/account-trade-content.php for trade_approved users.
   Mirrors the dashboard heading/divider rhythm so the section reads as part
   of the same My Account shell family. Minimal content for launch state.
   ============================================================================ */

.lba-account-trade__header {
    margin-bottom: var(--lba-space-3xl);
    padding-bottom: var(--lba-space-xl);
    border-bottom: 1px solid var(--lba-gray-200);
}

.lba-account-trade__heading {
    font-size: var(--lba-font-size-3xl);
    font-weight: 400;
    line-height: 1.2;
    color: var(--lba-black);
    margin: 0;
}

.lba-account-trade__body {
    max-width: 640px;
}

.lba-account-trade__lede {
    font-size: var(--lba-font-size-base);
    line-height: 1.6;
    color: var(--lba-gray-700);
    margin: 0 0 var(--lba-space-xl);
}

.lba-account-trade__contact {
    font-size: var(--lba-font-size-base);
    line-height: 1.6;
    color: var(--lba-gray-700);
    margin: 0;
}

.lba-account-trade__contact a {
    color: var(--lba-black);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lba-account-trade__contact a:hover,
.lba-account-trade__contact a:focus {
    color: var(--lba-gray-700);
}

/* Editorial account navigation */
@media (min-width: 769px) {
    .lba-account-shell {
        grid-template-columns: 176px minmax(0, 1fr);
        gap: clamp(48px, 6vw, 96px);
    }

    .lba-account-nav__title {
        margin: 0 0 20px;
        color: var(--lba-gray-500);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .lba-account-nav__list,
    .lba-account-nav__item {
        border: 0;
    }

    .lba-account-nav__link {
        position: relative;
        padding: 7px 0 7px 16px;
        color: var(--lba-gray-600);
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.35;
        text-transform: none;
    }

    .lba-account-nav__link:hover,
    .lba-account-nav__link:focus-visible {
        color: var(--lba-black);
    }

    .lba-account-nav__link:focus-visible {
        outline: 1px solid var(--lba-black);
        outline-offset: 3px;
    }

    .lba-account-nav__item.is-active .lba-account-nav__link {
        color: var(--lba-black);
        font-weight: 500;
    }

    .lba-account-nav__item.is-active .lba-account-nav__link::before {
        position: absolute;
        top: 5px;
        bottom: 5px;
        left: 0;
        width: 1px;
        background: var(--lba-black);
        content: "";
    }

    .lba-account-nav__item--logout {
        margin-top: 28px;
        border: 0;
    }

    .lba-account-nav__item--logout .lba-account-nav__link {
        color: var(--lba-gray-500);
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .lba-account-nav__title {
        display: none;
    }

    .lba-account-nav__list {
        gap: 24px;
    }

    .lba-account-nav__link {
        position: relative;
        padding: 10px 0 12px;
        font-size: 12px;
        letter-spacing: 0.04em;
    }

    .lba-account-nav__item.is-active .lba-account-nav__link::after {
        position: absolute;
        right: 0;
        bottom: -1px;
        left: 0;
        height: 1px;
        background: var(--lba-black);
        content: "";
    }
}