#account-dashboard .account-dashboard-card a {
    display: inline-block;
    margin-top: 12px;
    padding: 11px 16px;
    border: 1px solid #777;
    color: #fff;
    text-decoration: none;
    font-size: .68rem;
    letter-spacing: .1em;
}
#account-dashboard .account-dashboard-card a:hover,
#account-dashboard .account-dashboard-card a:focus-visible {
    background: #fff;
    color: #000;
}
#account-dashboard .account-view {
    width: min(900px, 100%);
    margin-top: 42px;
    padding-top: 24px;
    border-top: 1px solid #444;
}
#account-dashboard .account-view[hidden] { display: none !important; }
#account-dashboard .account-view h3 { font-size: .9rem; letter-spacing: .12em; }
#account-dashboard .account-order-card,
#account-dashboard .account-address-card {
    margin: 16px 0;
    padding: 18px 0;
    border-top: 1px solid #333;
}
#account-dashboard .account-order-card h4,
#account-dashboard .account-address-card h4 { margin: 0 0 10px; font-size: .8rem; }
#account-dashboard .account-order-card p,
#account-dashboard .account-address-card p { margin: 8px 0; }
#account-dashboard .account-order-line { color: #bbb; font-size: .8rem; }
#account-dashboard .account-detail-row { padding: 12px 0; border-bottom: 1px solid #333; }
#account-dashboard .account-detail-row strong { display: inline-block; min-width: 90px; }
#account-dashboard .account-view button {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid #777;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: .68rem;
    letter-spacing: .08em;
    cursor: pointer;
}
#account-dashboard .account-view button:hover { background: #fff; color: #000; }
#account-dashboard .account-message[data-type="error"] { color: #ffb4ad; }
#account-dashboard .account-empty { color: #bbb; }

.account-section-main {
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: 72px 5vw 88px;
}
.account-section-intro { margin-bottom: 64px; }
.account-section-intro h1 {
    margin: 0 0 8px;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: -0.04em;
}
.account-section-intro p { margin: 0; color: #ddd; }
.account-section-shell {
    width: min(900px, 100%);
    margin: 0 auto;
    padding-top: 30px;
    border-top: 1px solid #444;
}
.account-section-eyebrow {
    margin: 0 0 8px;
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #bbb;
}
.account-section-shell > h2 {
    margin: 0 0 28px;
    font-size: clamp(1.25rem, 3vw, 1.8rem);
    font-weight: 400;
    letter-spacing: .08em;
}
.account-section-shell .account-view[hidden] { display: none !important; }
.account-section-shell .account-view h4 { margin: 0 0 10px; font-size: .85rem; }
.account-section-shell .account-order-card,
.account-section-shell .account-address-card {
    margin: 18px 0;
    padding: 20px 0;
    border-top: 1px solid #333;
}
.account-section-shell .account-order-card p,
.account-section-shell .account-address-card p { margin: 8px 0; }
.account-section-shell .account-order-line,
.account-section-shell .account-empty { color: #bbb; }
.account-section-shell .account-detail-row {
    padding: 14px 0;
    border-bottom: 1px solid #333;
}
.account-section-shell .account-detail-row strong {
    display: inline-block;
    min-width: 100px;
}
.account-section-shell .account-view button,
.account-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 20px;
    padding: 0 18px;
    border: 1px solid #777;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: .68rem;
    letter-spacing: .1em;
    text-decoration: none;
    cursor: pointer;
}
.account-section-shell .account-view button:hover,
.account-back-link:hover,
.account-back-link:focus-visible { background: #fff; color: #000; }
.account-section-shell .account-message[data-type="error"] { color: #ffb4ad; }

@media (max-width: 640px) {
    .account-section-main { padding: 48px 6vw 64px; }
    .account-section-intro { margin-bottom: 44px; }
    .account-section-shell { padding-top: 24px; }
}

/* CSK ICON: app-like account surfaces, keeping the existing labels and actions. */
body:has(#account-dashboard) {
    background: #f7f4ec;
    color: #292827;
}

body:has(#account-dashboard) main {
    background: #f7f4ec;
    color: #292827;
}

body:has(#account-dashboard) main > section:first-child {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: clamp(46px, 7vw, 88px) clamp(20px, 5vw, 72px) 24px;
}

body:has(#account-dashboard) main > section:first-child h1 {
    margin: 0 0 10px;
    color: #292827;
    font-size: clamp(2.6rem, 7vw, 5rem);
    line-height: .98;
    letter-spacing: -.055em;
}

body:has(#account-dashboard) main > section:first-child p {
    max-width: 38rem;
    color: #68645e;
    line-height: 1.65;
}

#account-dashboard {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 28px clamp(20px, 5vw, 72px) clamp(64px, 9vw, 112px);
    color: #292827;
}

#account-dashboard > h2 {
    margin: 0 0 18px;
    color: #777168;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
}

#account-dashboard > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

#account-dashboard > div > .account-dashboard-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title action" "description action";
    align-items: center;
    gap: 7px 20px;
    min-height: 120px;
    margin: 0;
    padding: 22px 24px;
    border: 1px solid #e4dfd5;
    border-radius: 16px;
    background: #fffdf8;
    box-shadow: 0 5px 20px rgb(41 40 39 / 3%);
}

#account-dashboard .account-dashboard-card h3 {
    grid-area: title;
    margin: 0;
    color: #292827;
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .1em;
}

#account-dashboard .account-dashboard-card p {
    grid-area: description;
    max-width: 28rem;
    color: #706c65;
    font-size: .9rem;
    line-height: 1.5;
}

#account-dashboard .account-dashboard-card a {
    grid-area: action;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 42px;
    margin: 0;
    padding: 0 0 0 12px;
    border: 0;
    background: transparent;
    color: #6f2638;
    white-space: nowrap;
}

#account-dashboard .account-dashboard-card a::after {
    content: "→";
    font-size: 1.2rem;
    transition: transform .18s ease;
}

#account-dashboard .account-dashboard-card a:hover,
#account-dashboard .account-dashboard-card a:focus-visible {
    background: transparent;
    color: #4f1928;
    text-decoration: underline;
    text-underline-offset: 4px;
}

#account-dashboard .account-dashboard-card a:hover::after { transform: translateX(3px); }

#account-dashboard .account-message {
    margin: 16px 0 0;
    color: #706c65;
}

#account-dashboard .account-view {
    width: 100%;
    margin-top: 30px;
    padding: 26px;
    border: 1px solid #e4dfd5;
    border-radius: 18px;
    background: #fffdf8;
}

#account-dashboard .account-view h3 {
    margin: 0 0 18px;
    color: #292827;
    font-size: .78rem;
    letter-spacing: .12em;
}

#account-dashboard .account-order-card,
#account-dashboard .account-address-card {
    margin: 0;
    padding: 18px 0;
    border-top: 1px solid #e8e3da;
}

#account-dashboard .account-order-card h4,
#account-dashboard .account-address-card h4 { color: #292827; }
#account-dashboard .account-order-card p,
#account-dashboard .account-address-card p { color: #55514c; }
#account-dashboard .account-order-line,
#account-dashboard .account-empty { color: #777168; }
#account-dashboard .account-detail-row { border-color: #e8e3da; color: #55514c; }
#account-dashboard .account-detail-row strong { color: #292827; }

#account-dashboard .account-view button,
#logout-button {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid #d7d0c5;
    border-radius: 999px;
    background: transparent;
    color: #292827;
    font: inherit;
    font-size: .68rem;
    letter-spacing: .1em;
    cursor: pointer;
}

#account-dashboard .account-view button:hover,
#logout-button:hover { border-color: #292827; background: #292827; color: #fffdf8; }
#account-dashboard .account-message[data-type="error"] { color: #a13b46; }

body.account-section-page {
    background: #f7f4ec;
    color: #292827;
}

.account-section-page .account-section-main {
    width: min(1120px, 100%);
    padding: clamp(42px, 7vw, 84px) clamp(20px, 5vw, 72px) clamp(64px, 9vw, 112px);
    color: #292827;
}

.account-section-page .account-section-intro { margin-bottom: 40px; }
.account-section-page .account-section-intro h1 { color: #292827; }
.account-section-page .account-section-intro p,
.account-section-page .account-section-eyebrow { color: #706c65; }

.account-section-page .account-section-shell {
    width: min(900px, 100%);
    padding: 26px;
    border: 1px solid #e4dfd5;
    border-radius: 18px;
    background: #fffdf8;
}

.account-section-page .account-section-shell > h2 { color: #292827; }
.account-section-page .account-section-shell .account-order-card,
.account-section-page .account-section-shell .account-address-card { border-color: #e8e3da; }
.account-section-page .account-section-shell .account-order-card p,
.account-section-page .account-section-shell .account-address-card p,
.account-section-page .account-section-shell .account-detail-row { color: #55514c; }
.account-section-page .account-section-shell .account-order-line,
.account-section-page .account-section-shell .account-empty { color: #777168; }
.account-section-page .account-section-shell .account-detail-row { border-color: #e8e3da; }

.account-section-page .account-section-shell .account-view button,
.account-section-page .account-back-link {
    border-color: #d7d0c5;
    border-radius: 999px;
    background: transparent;
    color: #292827;
}

.account-section-page .account-section-shell .account-view button:hover,
.account-section-page .account-back-link:hover,
.account-section-page .account-back-link:focus-visible {
    border-color: #292827;
    background: #292827;
    color: #fffdf8;
}

.account-section-page .account-message[data-type="error"] { color: #a13b46; }

@media (max-width: 700px) {
    #account-dashboard > div { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    #account-dashboard > div > .account-dashboard-card {
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 106px;
        padding: 19px 18px;
    }
    #account-dashboard .account-dashboard-card p { font-size: .84rem; }
    #account-dashboard .account-dashboard-card a { font-size: .62rem; }
    #account-dashboard .account-view,
    .account-section-page .account-section-shell { padding: 20px 16px; }
    .account-section-page .account-section-main { padding-inline: 18px; }
}

@media (max-width: 420px) {
    #account-dashboard > div > .account-dashboard-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "title" "description" "action";
        gap: 7px;
    }
    #account-dashboard .account-dashboard-card a { justify-self: start; padding-left: 0; }
}

/* Targeted contrast corrections: preserve the account card styling and copy. */
body:has(#account-dashboard) main > section:first-child h1 { color: #f7f4ec; }
body:has(#account-dashboard) main > section:first-child p { color: #f0ece3; }
#account-dashboard > h2 { color: #f7f4ec; }

#account-dashboard .account-dashboard-card a,
#account-dashboard .account-dashboard-card a:visited {
    color: #4d1725;
}

#account-dashboard .account-dashboard-card a:hover,
#account-dashboard .account-dashboard-card a:focus-visible {
    color: #292827;
}

#account-dashboard .account-order-card p:nth-of-type(2),
.account-section-page .account-order-card p:nth-of-type(2) {
    color: #292827;
    font-weight: 600;
}

.account-section-page .account-section-intro h1 { color: #292827; }
.account-section-page .account-section-intro p { color: #4c4944; }

/* Account detail pages remain graphite; make every content label readable there. */
.account-section-page .account-section-main,
.account-section-page .account-section-intro h1,
.account-section-page .account-section-intro p,
.account-section-page .account-section-eyebrow,
.account-section-page .account-section-shell,
.account-section-page .account-section-shell > h2,
.account-section-page .account-section-shell .account-view,
.account-section-page .account-section-shell .account-view h4,
.account-section-page .account-section-shell .account-view p,
.account-section-page .account-section-shell .account-detail-row,
.account-section-page .account-section-shell .account-detail-row strong {
    color: #f7f4ec;
}

.account-section-page .account-section-shell .account-order-line,
.account-section-page .account-section-shell .account-empty,
.account-section-page .account-section-shell .account-order-card p:nth-of-type(2) {
    color: #f0ece3;
}

.account-section-page .account-section-shell .account-detail-row,
.account-section-page .account-section-shell .account-order-card,
.account-section-page .account-section-shell .account-address-card {
    border-color: rgb(247 244 236 / 28%);
}

.account-section-page .account-section-shell .account-view button,
.account-section-page .account-back-link {
    border-color: #d7d0c5;
    color: #f7f4ec;
}

.account-section-page .account-section-shell .account-view button:hover,
.account-section-page .account-back-link:hover,
.account-section-page .account-back-link:focus-visible {
    background: #f7f4ec;
    color: #292827;
}

.account-section-page .account-message { color: #f0ece3; }
.account-section-page .account-message[data-type="error"] { color: #ffd7d2; }

/* Keep account dashboard actions text-only. */
#account-dashboard .account-dashboard-card a::after { content: none; display: none; }

/* Give account order history the same polished, grouped feel as the admin view. */
#account-dashboard #account-orders-content,
.account-section-page #account-orders-content {
    display: grid;
    gap: 14px;
}

#account-dashboard .account-order-card,
.account-section-page .account-section-shell .account-order-card {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 18px;
    border: 1px solid #e8e3da;
    border-radius: 15px;
    background: #fffdf8;
    box-shadow: 0 8px 22px rgb(41 40 39 / 6%);
}

.account-order-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.account-order-reference {
    margin: 0;
    color: #292827;
    font-size: .76rem;
    letter-spacing: .1em;
}

.account-order-total {
    flex: 0 0 auto;
    color: #292827;
    font-size: .84rem;
    font-weight: 600;
}

#account-dashboard .account-order-meta,
.account-section-page .account-section-shell .account-order-meta {
    margin: 0;
    color: #777168;
    font-size: .78rem;
}

.account-order-statuses {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.account-order-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .035em;
}

.account-order-payment[data-state="paid"],
.account-order-fulfillment[data-state="delivered"] {
    border-color: #c9d6c6;
    background: #e8efe5;
    color: #385340;
}

.account-order-payment[data-state="pending"],
.account-order-payment[data-state="unpaid"],
.account-order-fulfillment[data-state="unfulfilled"],
.account-order-fulfillment[data-state="processing"],
.account-order-fulfillment[data-state="shipped"] {
    border-color: #e1d3aa;
    background: #f4eedc;
    color: #69582c;
}

.account-order-payment[data-state="failed"],
.account-order-payment[data-state="refunded"],
.account-order-fulfillment[data-state="cancelled"] {
    border-color: #d9c4be;
    background: #eee4e0;
    color: #664b43;
}

.account-order-refund[data-state="processed"] {
    border-color: #c9d6c6;
    background: #e8efe5;
    color: #385340;
}

.account-order-refund[data-state="failed"],
.account-order-refund[data-state="needs_attention"] {
    border-color: #d9c4be;
    background: #eee4e0;
    color: #783c35;
}

.account-order-refund[data-state="initiating"],
.account-order-refund[data-state="pending"],
.account-order-refund[data-state="processing"] {
    border-color: #e1d3aa;
    background: #f4eedc;
    color: #69582c;
}

.account-order-items {
    display: grid;
    gap: 0;
    margin: 2px 0 0;
    padding: 0;
    border-top: 1px solid #e8e3da;
    list-style: none;
}

.account-order-item {
    display: grid;
    gap: 4px;
    padding: 11px 0 0;
}

.account-order-item + .account-order-item {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid #eeeae3;
}

#account-dashboard .account-order-item-title,
.account-section-page .account-section-shell .account-order-item-title {
    color: #292827;
    font-size: .82rem;
    font-weight: 600;
}

#account-dashboard .account-order-line,
.account-section-page .account-section-shell .account-order-line {
    color: #777168;
    font-size: .76rem;
}

.account-section-page .account-section-shell .account-order-card {
    border-color: rgb(247 244 236 / 20%);
    background: #30302e;
    box-shadow: 0 12px 28px rgb(0 0 0 / 16%);
}

.account-section-page .account-section-shell .account-order-reference,
.account-section-page .account-section-shell .account-order-total,
.account-section-page .account-section-shell .account-order-item-title {
    color: #f7f4ec;
}

.account-section-page .account-section-shell .account-order-meta,
.account-section-page .account-section-shell .account-order-line {
    color: #d7d2c8;
}

.account-section-page .account-order-items { border-color: rgb(247 244 236 / 22%); }
.account-section-page .account-order-item + .account-order-item { border-color: rgb(247 244 236 / 12%); }

@media (max-width: 520px) {
    #account-dashboard .account-order-card,
    .account-section-page .account-section-shell .account-order-card { padding: 15px; }
    .account-order-heading { gap: 10px; }
    .account-order-reference { overflow-wrap: anywhere; }
}

/* Group customer order history by local Ghana calendar date. */
#account-dashboard .account-order-day-group,
.account-section-page #account-orders-content .account-order-day-group {
    display: grid;
    gap: 10px;
}

.account-order-day-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    padding: 13px 16px;
    border: 1px solid #292827;
    border-radius: 14px;
    background: #292827;
    color: #f7f4ec;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.account-order-day-toggle:hover,
.account-order-day-toggle:focus-visible,
.account-order-day-toggle[aria-expanded="true"] {
    border-color: #494744;
    background: #3a3937;
}

.account-order-day-title {
    margin: 0;
    font-size: .72rem;
    font-weight: 550;
    letter-spacing: .09em;
}

.account-order-day-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    margin-left: auto;
}

.account-order-day-count {
    color: #c8c1b6;
    font-size: .65rem;
    letter-spacing: .1em;
}

.account-order-day-chevron {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .18s ease;
}

.account-order-day-toggle[aria-expanded="true"] .account-order-day-chevron { transform: rotate(225deg) translate(-2px, -1px); }
.account-order-day-list { display: grid; gap: 10px; }
.account-order-day-list[hidden] { display: none !important; }

/* The account-section page is graphite, so use a linen date control there. */
.account-section-page .account-order-day-toggle {
    border-color: #ded8cd;
    background: #f7f4ec;
    color: #292827;
}

.account-section-page .account-order-day-toggle:hover,
.account-section-page .account-order-day-toggle:focus-visible,
.account-section-page .account-order-day-toggle[aria-expanded="true"] {
    border-color: #c9c1b5;
    background: #eee9df;
}

.account-section-page .account-order-day-count { color: #6a655d; }
.account-section-page .account-order-day-chevron { color: #292827; }

@media (max-width: 520px) {
    .account-order-day-toggle { min-height: 56px; padding: 12px 14px; gap: 8px; }
    .account-order-day-title { font-size: .65rem; line-height: 1.4; }
    .account-order-day-meta { gap: 8px; }
    .account-order-day-count { font-size: .58rem; }
}

/* Keep account entry cards and sign-out controls legible on graphite. */
body:has(#sign-in) main > section:nth-child(2) > div {
    border-color: rgb(247 244 236 / 18%);
    border-radius: 18px;
    background: #343331;
    box-shadow: 0 10px 28px rgb(0 0 0 / 18%);
}

body:has(#sign-in) main > section:nth-child(2) h2 {
    color: #f7f4ec;
    font-weight: 600;
}

body:has(#sign-in) main > section:nth-child(2) p {
    color: #d7d2c8;
}

body:has(#sign-in) main > section:nth-child(2) a {
    border: 1px solid rgb(247 244 236 / 60%);
    border-radius: 999px;
    color: #f7f4ec;
}

body:has(#sign-in) main > section:nth-child(2) a:hover,
body:has(#sign-in) main > section:nth-child(2) a:focus-visible {
    border-color: #f7f4ec;
    background: #f7f4ec;
    color: #292827;
}

#logout-button {
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid rgb(247 244 236 / 60%);
    border-radius: 999px;
    background: transparent;
    color: #f7f4ec;
    font-weight: 600;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

#logout-button:hover,
#logout-button:focus-visible {
    border-color: #f7f4ec;
    background: #f7f4ec;
    color: #292827;
}

#account-dashboard .account-dashboard-card a,
#account-dashboard .account-dashboard-card a:visited {
    color: #292827;
}

#account-dashboard .account-dashboard-card a:hover,
#account-dashboard .account-dashboard-card a:focus-visible {
    color: #292827;
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 700px) {
    body:has(#account-dashboard) main > section:first-child {
        padding-top: max(64px, calc(56px + env(safe-area-inset-top)));
    }

    body:has(#sign-in) main > section:nth-child(2) {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 28px 22px 42px;
    }

    body:has(#sign-in) main > section:nth-child(2) > div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 14px;
        width: 100%;
        min-height: 0;
        height: auto;
        box-sizing: border-box;
        padding: 20px 22px;
    }

    body:has(#sign-in) main > section:nth-child(2) h2,
    body:has(#sign-in) main > section:nth-child(2) p {
        margin: 0;
    }

    body:has(#sign-in) main > section:nth-child(2) h2 {
        font-size: 1rem;
    }

    body:has(#sign-in) main > section:nth-child(2) p {
        font-size: .96rem;
    }

    body:has(#sign-in) main > section:nth-child(2) a {
        display: inline-flex;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        padding: 0 22px;
        font-size: .72rem;
        white-space: nowrap;
    }
}

/* A calmer, more compact mobile account dashboard. */
@media (max-width: 700px) {
    #account-dashboard {
        padding-top: 20px;
        padding-bottom: 48px;
    }

    #account-dashboard > h2 {
        margin-bottom: 14px;
        font-size: .68rem;
    }

    #account-dashboard > div {
        gap: 11px;
    }

    #account-dashboard > div > .account-dashboard-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "title" "description" "action";
        align-content: start;
        align-items: start;
        gap: 6px;
        min-height: 0;
        padding: 16px 18px 13px;
        border-radius: 15px;
        box-shadow: 0 3px 12px rgb(41 40 39 / 3%);
    }

    #account-dashboard .account-dashboard-card h3 {
        font-size: .72rem;
        letter-spacing: .09em;
    }

    #account-dashboard .account-dashboard-card p {
        font-size: .82rem;
        line-height: 1.45;
    }

    #account-dashboard .account-dashboard-card a {
        display: flex;
        width: 100%;
        min-height: 32px;
        justify-content: space-between;
        margin-top: 4px;
        padding: 8px 0 0;
        border-top: 1px solid #e8e3da;
        font-size: .61rem;
    }

    #account-dashboard .account-dashboard-card a::after {
        display: block;
        content: "\2192";
        font-size: 1rem;
        line-height: 1;
    }

    #logout-button {
        min-height: 38px;
        margin-top: 20px;
        padding-inline: 17px;
        font-size: .62rem;
    }
}

/* Utility/status messages use a quieter type scale than order content. */
.account-message,
.account-inline-status {
    font-size: .72rem;
    font-weight: 550;
    line-height: 1.55;
    letter-spacing: .055em;
}

.account-message[data-state="loading"],
.account-inline-status[data-state="loading"] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 100%;
    padding: 7px 11px;
    border-radius: 999px;
    background: #efebe2;
    color: #625d55;
}

.account-message[data-state="loading"]::before,
.account-inline-status[data-state="loading"]::before {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    content: "";
    animation: csk-status-spin .8s linear infinite;
}

.account-section-page .account-message[data-state="loading"],
.account-section-page .account-inline-status[data-state="loading"] {
    background: rgb(247 244 236 / 11%);
    color: #f0ece3;
}