/* =========================================
   Amaryllis — THE ACCOUNT AREA
   -----------------------------------------
   The signed-in dashboard: sidebar left, panel right.

   There is NO Figma frame for this. The design file has a Sign up
   screen and a Create account screen and nothing behind them, so the
   LAYOUT follows the reference screenshot — a sidebar of sections, a
   contact card, an address book of two cards — while every colour,
   typeface and radius comes from this site's own tokens.

   That matters in one visible place: the reference uses red for its
   links and its current-section marker. Amaryllis's accent is the
   brand green, so that is what is used here. Copying another
   company's accent onto this site would be the one change nobody
   asked for and everybody would notice.

   css/auth.css still owns the signed-OUT screens. The two never
   render together — page-account.php returns early for one or the
   other — so there is nothing to reconcile between them.
========================================= */

.account-page {
    --acc-ink: var(--c-ink);
    --acc-muted: #6f6f6f;
    --acc-line: #e4e4e4;
    /* Red, matching the account reference the client supplied — links,
       the current-section marker and the "Manage Addresses" style all
       take it. This was the brand green, chosen when the reference was
       treated as another company's artwork; the client has since asked
       for the design to be followed exactly. It reuses --c-wish rather
       than introducing a second red, so the wishlist heart and this
       are one colour. */
    --acc-accent: var(--c-wish);
    --acc-field: var(--c-line);

    padding: clamp(24px, 3.33vw, 48px) max(16px, 5.55vw) clamp(50px, 6vw, 90px);
    background: #f4f4f4;
}

/* Sidebar is a fixed measure; the panel takes what is left. A fr for
   the sidebar would let a long section name stretch it. */
.account-shell {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: clamp(20px, 2.78vw, 40px);
    align-items: start;
    max-width: var(--container);
    margin: 0 auto;
}

/* =========================================
   1. SIDEBAR
========================================= */
.account-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.account-nav-link {
    display: block;
    padding: 9px 0;
    font-family: var(--font-body);
    font-size: clamp(13px, 1.04vw, 13px);
    font-weight: 400;
    line-height: 1.5;
    color: var(--acc-ink);
    transition: color 0.25s var(--ease-out);
}

.account-nav-link:hover {
    color: var(--acc-accent);
}

/* The current section. The dot is drawn rather than a bullet so it
   sits outside the text column and does not shift the label. */
.account-nav-link.is-current {
    position: relative;
    font-weight: 700;
    color: var(--acc-accent);
}

.account-nav-link.is-current::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: currentColor;
}

/* Logout is a different KIND of action from the sections above it, so
   it gets a rule rather than sitting in the same run. */
.account-nav-sep {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--acc-line);
}

/* =========================================
   2. PANEL
========================================= */
.account-main {
    padding: clamp(22px, 2.5vw, 36px);
    background: var(--c-white);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
}

.account-title {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.22vw, 30px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--acc-ink);
    margin-bottom: clamp(18px, 2.22vw, 32px);
}

.account-block {
    margin-bottom: clamp(22px, 2.5vw, 36px);
}

.account-block:last-child {
    margin-bottom: 0;
}

.account-block h2,
.account-block-head h2 {
    font-family: var(--font-display);
    font-size: clamp(15px, 1.25vw, 16px);
    font-weight: 700;
    line-height: 1.4;
    color: var(--acc-ink);
    margin-bottom: 12px;
}

/* Heading left, "Manage Addresses" right, baselines aligned. */
.account-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.account-block-head h2 {
    margin-bottom: 0;
}

/* Two columns that collapse to one. Used for the contact/orders pair
   and for the two address cards. */
.account-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 1.67vw, 24px);
    margin-bottom: clamp(22px, 2.5vw, 36px);
}

.account-block .account-row:last-child,
.account-row:last-child {
    margin-bottom: 0;
}

/* =========================================
   3. CARDS
   -----------------------------------------
   A hairline box, not a shadowed card — these sit INSIDE the panel,
   and a second shadow within a shadowed surface reads as clutter.
========================================= */
.account-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: clamp(16px, 1.53vw, 22px);
    background: var(--c-white);
    border: 1px solid var(--acc-line);
    border-radius: 8px;
}

.account-card--centred {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.account-card h3 {
    font-family: var(--font-display);
    font-size: clamp(14px, 1.11vw, 14px);
    font-weight: 700;
    line-height: 1.4;
    color: var(--acc-ink);
    margin-bottom: 10px;
}

.account-card p {
    font-family: var(--font-body);
    font-size: clamp(12px, 1.04vw, 12px);
    line-height: 1.7;
    color: var(--acc-ink);
}

.account-muted {
    color: var(--acc-muted);
}

.account-figure {
    font-family: var(--font-display);
    font-size: clamp(28px, 2.78vw, 38px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--acc-ink);
}

/* The one accent on the page. Underlined rather than coloured alone,
   so it does not rely on colour to read as a link. */
.account-link {
    display: inline-block;
    margin-top: 10px;
    font-family: var(--font-body);
    font-size: clamp(12px, 1.04vw, 12px);
    font-weight: 400;
    color: var(--acc-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.25s var(--ease-out);
}

.account-link:hover {
    color: var(--acc-ink);
}

/* Inside a head row it is aligned with a heading, so the top margin
   would push it off the baseline. */
.account-block-head .account-link {
    margin-top: 0;
}

/* =========================================
   4. ORDERS
========================================= */
.account-orders {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.account-order {
    padding: clamp(16px, 1.53vw, 22px);
    border: 1px solid var(--acc-line);
    border-radius: 8px;
}

.account-order-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.account-order-no {
    font-family: var(--font-display);
    font-size: clamp(14px, 1.25vw, 16px);
    font-weight: 700;
    color: var(--acc-ink);
}

/* A pill, so the state reads at a glance down a list of orders. */
.account-order-status {
    padding: 3px 12px;
    border-radius: 999px;
    background: #f1f7ea;
    color: #3f6115;
    font-family: var(--font-body);
    font-size: clamp(11px, 0.9vw, 11px);
    font-weight: 700;
    white-space: nowrap;
}

/* =========================================
   MY ORDERS — the history table
   -----------------------------------------
   Built to the account reference: a six-column table with a tinted
   header, a product thumbnail in the row, a coloured state pill and
   an outlined action button.
========================================= */
.account-subtitle {
    font-family: var(--font-display);
    font-size: clamp(16px, 1.53vw, 20px);
    font-weight: 700;
    color: var(--acc-ink);
    margin: clamp(20px, 2.2vw, 30px) 0 14px;
}

/* --- "Order placed" banner --- */
.account-placed {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding: 14px 18px;
    border: 1px solid #b7e3c4;
    border-radius: 8px;
    background: #edf9f0;
}

.account-placed-tick {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: #1a7f37;
}

.account-placed-tick svg {
    width: 100%;
    height: 100%;
    display: block;
}

.account-placed-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.account-placed-lead {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(13px, 1.1vw, 14px);
    font-weight: 700;
    color: #14532d;
}

.account-placed-sub {
    margin: 2px 0 0;
    font-family: var(--font-body);
    font-size: clamp(12px, 1vw, 13px);
    color: #2f6b43;
}

/* --- The table --- */
/* The wrapper scrolls, not the page: six columns cannot compress into
   a phone, and reflowing a comparison grid into stacked cards is what
   the previous layout did — it lost the ability to scan one column
   down the list, which is the reason to show orders as a table. */
.account-table-wrap {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border: 1px solid var(--acc-line);
    border-radius: 8px;
}

.account-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-family: var(--font-body);
}

.account-table th,
.account-table td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: middle;
}

.account-table thead th {
    background: #f7f7f7;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--acc-muted);
    white-space: nowrap;
}

.account-table tbody tr + tr {
    border-top: 1px solid var(--acc-line);
}

.account-table .is-num {
    text-align: right;
    white-space: nowrap;
}

.account-table .is-action {
    text-align: right;
    white-space: nowrap;
}

.account-table td {
    font-size: clamp(12px, 1.05vw, 13px);
    color: var(--acc-ink);
}

/* --- Order id + "New" --- */
.account-table .account-order-no {
    display: block;
    font-size: clamp(12px, 1.05vw, 13px);
}

.account-tag {
    display: inline-block;
    margin-top: 5px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #e7f6ec;
    color: #1a7f37;
    font-size: 10px;
    font-weight: 700;
}

/* --- Date, two lines as drawn --- */
.account-date,
.account-time {
    display: block;
    white-space: nowrap;
}

.account-time {
    margin-top: 3px;
    font-size: 0.9em;
    color: var(--acc-muted);
}

/* --- Product cell --- */
.account-prod {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-prod-media {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: #f4f4f4;
    overflow: hidden;
}

.account-prod-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.account-prod-copy {
    min-width: 0;
}

.account-prod-name {
    display: block;
    font-weight: 700;
}

.account-prod-qty {
    display: block;
    margin-top: 3px;
    font-size: 0.9em;
    color: var(--acc-muted);
}

/* --- State pills ---
   One colour per workflow state, so a customer can tell them apart
   without reading — which is the whole point of a pill. */
.account-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.account-pill--received  { background: #e7f6ec; color: #1a7f37; }  /* Order Placed */
.account-pill--confirmed { background: #e8f0fd; color: #1d4ed8; }  /* Processing   */
.account-pill--shipped   { background: #f1e9fb; color: #6d28d9; }  /* Shipped      */
.account-pill--completed { background: #fdf0e3; color: #a1560c; }  /* Delivered    */
.account-pill--cancelled { background: #fbeceb; color: #b42318; }  /* Cancelled    */

/* --- Action button --- */
.account-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--acc-line);
    border-radius: 6px;
    background: var(--c-white);
    color: var(--acc-ink);
    font-family: var(--font-body);
    font-size: clamp(11px, 1vw, 12px);
    font-weight: 700;
    white-space: nowrap;
    transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.account-btn:hover,
.account-btn:focus-visible {
    border-color: var(--acc-accent);
    color: var(--acc-accent);
}

.account-btn-eye {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.account-btn-eye svg {
    width: 100%;
    height: 100%;
    display: block;
}

.account-count {
    margin: 14px 0 0;
    font-family: var(--font-body);
    font-size: clamp(11px, 1vw, 12px);
    color: var(--acc-muted);
}

/* One column, capped at the width the Order Tracking frame is drawn
   at, and centred. Used by the single-order view, which has no
   sidebar — its breadcrumb is the way back. */
.account-shell--solo {
    grid-template-columns: minmax(0, 1fr);
    max-width: 850px;
}

/* =========================================
   ORDER TRACKING
   -----------------------------------------
   Built to the Order Tracking frame: breadcrumb, a title row with its
   actions, the two dates, a four-step progress rail, the lines, then
   payment/delivery and help/summary as two pairs of columns.
========================================= */
.track-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-family: var(--font-body);
    font-size: clamp(11px, 1vw, 12px);
    color: var(--acc-muted);
}

.track-crumbs a {
    color: var(--acc-muted);
    transition: color 0.25s var(--ease);
}

.track-crumbs a:hover {
    color: var(--acc-accent);
}

.track-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.track-title {
    font-family: var(--font-display);
    font-size: clamp(18px, 2.08vw, 26px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--acc-ink);
    margin: 0;
    /* The order number can be long and must not push the buttons off
       the row; it wraps within its own column instead. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.track-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* The filled counterpart to .account-btn, for the one action on the
   row that is the point of being here. */
.account-btn--dark {
    background: var(--acc-ink);
    border-color: var(--acc-ink);
    color: var(--c-white);
}

.account-btn--dark:hover,
.account-btn--dark:focus-visible {
    background: var(--acc-accent);
    border-color: var(--acc-accent);
    color: var(--c-white);
}

/* Track order before a courier link exists. Present, as the design
   draws it, but visibly not ready — and :disabled keeps it out of the
   tab order and unclickable, so it cannot read as merely broken. */
.account-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.account-btn--dark[disabled]:hover {
    background: var(--acc-ink);
    border-color: var(--acc-ink);
    color: var(--c-white);
}

.track-ico {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.track-ico svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- The two dates --- */
.track-dates {
    display: flex;
    align-items: center;
    gap: 10px 20px;
    flex-wrap: wrap;
    margin: 14px 0 0;
    padding-bottom: clamp(16px, 1.8vw, 24px);
    border-bottom: 1px solid var(--acc-line);
    font-family: var(--font-body);
    font-size: clamp(12px, 1.05vw, 13px);
    color: var(--acc-muted);
}

.track-dates strong {
    font-weight: 700;
    color: var(--acc-ink);
}

/* Green, as drawn — the delivery promise is the one thing on this row
   a customer is looking for. */
.track-eta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #1a7f37;
}

.track-eta strong {
    color: #1a7f37;
}

/* --- Progress rail --- */
/* Equal columns with the connecting line drawn BEHIND the dots as one
   continuous rule, rather than a border per step — a per-step border
   leaves a gap at every label and cannot be centred on the dots. */
.track-steps {
    display: grid;
    grid-template-columns: repeat(var(--track-steps, 4), 1fr);
    gap: 0;
    margin: clamp(20px, 2.2vw, 30px) 0 0;
    padding: 0;
    list-style: none;
}

.track-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-align: center;
    padding: 0 6px;
}

/* The rail. Drawn from the middle of this dot to the middle of the
   next, so it never overhangs the first or last. */
.track-step + .track-step::before {
    content: '';
    position: absolute;
    right: 50%;
    left: -50%;
    /* Dot is 13px inside a row that starts after the label. */
    top: calc(1.25em + 9px + 6px);
    height: 2px;
    background: var(--acc-line);
}

.track-step.is-done + .track-step.is-done::before {
    background: #1a7f37;
}

.track-step-label {
    font-family: var(--font-body);
    font-size: clamp(11px, 1vw, 12px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--acc-muted);
}

.track-step.is-done .track-step-label {
    color: #1a7f37;
}

.track-step-dot {
    position: relative;
    z-index: 1;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--acc-line);
}

.track-step.is-done .track-step-dot {
    background: #1a7f37;
}

.track-step-when {
    font-family: var(--font-body);
    font-size: clamp(10px, 0.9vw, 11px);
    line-height: 1.3;
    color: var(--acc-muted);
}

.track-cancelled {
    margin: clamp(20px, 2.2vw, 30px) 0 0;
    padding: 12px 16px;
    border: 1px solid #f0c9c6;
    border-radius: 8px;
    background: #fbeceb;
    font-family: var(--font-body);
    font-size: clamp(12px, 1.05vw, 13px);
    font-weight: 700;
    color: #b42318;
}

/* --- Lines --- */
.track-lines {
    margin: clamp(22px, 2.5vw, 34px) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--acc-line);
}

.track-line {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--acc-line);
}

.track-line-media {
    flex: 0 0 auto;
    width: 74px;
    height: 74px;
    border-radius: 10px;
    background: #f4f4f4;
    overflow: hidden;
}

.track-line-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.track-line-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.track-line-name {
    display: block;
    font-family: var(--font-body);
    font-size: clamp(13px, 1.15vw, 15px);
    font-weight: 700;
    color: var(--acc-ink);
}

.track-line-spec {
    display: block;
    margin-top: 5px;
    font-family: var(--font-body);
    font-size: clamp(11px, 1vw, 12px);
    color: var(--acc-muted);
}

.track-line-money {
    flex: 0 0 auto;
    text-align: right;
}

.track-line-price {
    display: block;
    font-family: var(--font-body);
    font-size: clamp(13px, 1.15vw, 15px);
    font-weight: 700;
    color: var(--acc-ink);
}

.track-line-qty {
    display: block;
    margin-top: 5px;
    font-family: var(--font-body);
    font-size: clamp(11px, 1vw, 12px);
    color: var(--acc-muted);
}

/* --- The two column pairs --- */
.track-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2.8vw, 40px);
    padding: clamp(20px, 2.2vw, 30px) 0;
    border-bottom: 1px solid var(--acc-line);
}

.track-cols:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.track-col h2 {
    font-family: var(--font-display);
    font-size: clamp(14px, 1.32vw, 17px);
    font-weight: 700;
    color: var(--acc-ink);
    margin: 0 0 12px;
}

.track-col p {
    margin: 0 0 4px;
    font-family: var(--font-body);
    font-size: clamp(12px, 1.05vw, 13px);
    color: var(--acc-ink);
}

.track-muted {
    color: var(--acc-muted) !important;
}

.track-pay {
    font-weight: 700;
}

/* --- Need help --- */
.track-help {
    margin: 0;
    padding: 0;
    list-style: none;
}

.track-help li + li {
    margin-top: 10px;
}

.track-help a,
.track-help .footer-link-pending {
    font-family: var(--font-body);
    font-size: clamp(12px, 1.05vw, 13px);
    color: var(--acc-ink);
    transition: color 0.25s var(--ease);
}

.track-help a:hover {
    color: var(--acc-accent);
}

/* --- Summary --- */
.track-sum {
    margin: 0;
}

.track-sum div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 9px;
}

.track-sum dt {
    font-family: var(--font-body);
    font-size: clamp(12px, 1.05vw, 13px);
    color: var(--acc-muted);
}

.track-sum dd {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(12px, 1.05vw, 13px);
    color: var(--acc-ink);
}

.track-sum-total {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--acc-line);
}

.track-sum-total dt,
.track-sum-total dd {
    font-size: clamp(13px, 1.25vw, 16px);
    font-weight: 700;
    color: var(--acc-ink);
}

/* =========================================
   WISHLIST, INSIDE THE ACCOUNT SHELL
   -----------------------------------------
   /wishlist/ keeps its own template and its own styles for the
   signed-OUT view. These only undo the parts of that standalone
   layout which do not belong inside a panel that already pads and
   centres itself — the page inset, and the centred heading.
========================================= */
.wishlist-page--shelled {
    padding: 0;
    max-width: none;
}

.wishlist-page--shelled .wishlist-head {
    text-align: left;
    margin-bottom: 18px;
}

/* Matches .account-title, so "Wishlist" and "My Orders" are the same
   heading in the same place rather than two sizes of the same thing. */
.wishlist-page--shelled .wishlist-head h1 {
    font-size: clamp(20px, 2.08vw, 28px);
}

/* --- Bulk actions, under the list --- */
.wishlist-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

/* Outlined, in the account accent — the two least-used controls on the
   screen, so neither competes with Add To Cart on the rows above. */
.wishlist-foot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border: 1px solid var(--acc-accent);
    border-radius: 999px;
    background: transparent;
    color: var(--acc-accent);
    font-family: var(--font-body);
    font-size: clamp(12px, 1.05vw, 13px);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.wishlist-foot-btn:hover,
.wishlist-foot-btn:focus-visible {
    background: var(--acc-accent);
    color: var(--c-white);
}

/* --- Payment state ---------------------------------------------
 * A quieter line than the status pill above it. The pill is the
 * shop's progress on the order; this is only about money, and the
 * one that needs the customer to act — an unfinished payment — is
 * the one given colour.
 * ------------------------------------------------------------- */
.account-order-pay {
    margin: 8px 0 0;
    font-family: var(--font-body);
    font-size: clamp(11px, 0.95vw, 12px);
    font-weight: 400;
    color: var(--acc-muted, #6e7781);
}

.account-order-pay--paid { color: #3f6115; }

.account-order-pay--pending,
.account-order-pay--failed,
.account-order-pay--cancelled { color: #b42318; }

.account-order-resume { margin: 14px 0 0; }

.account-order-invoice { margin: 10px 0 0; }

/* The one place in the account area with a real call to action, so it
   is a button rather than the usual underlined link. */
.account-link--solid {
    padding: 10px 20px;
    border-radius: 8px;
    background: var(--acc-ink);
    color: var(--c-white);
    text-decoration: none;
    transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.account-link--solid:hover,
.account-link--solid:focus-visible {
    background: var(--c-brand);
    color: var(--c-white);
}

.account-order-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 0;
}

.account-order-meta div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.account-order-meta dt {
    font-family: var(--font-body);
    font-size: clamp(10px, 0.83vw, 10px);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--acc-muted);
}

.account-order-meta dd {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(12px, 1.04vw, 12px);
    color: var(--acc-ink);
}

/* --- One order's lines --- */
.account-lines {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--acc-line);
    width: 100%;
}

.account-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.account-line em {
    font-style: normal;
    color: var(--acc-muted);
}

.account-line--total {
    margin: 4px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--acc-line);
    font-weight: 700;
}

/* =========================================
   5. FORMS
   -----------------------------------------
   Same field treatment as Checkout and Contact: flat grey fill, no
   border at rest, a transparent border reserving the space so focus
   colours it without anything shifting.
========================================= */
.account-form h2 {
    font-family: var(--font-display);
    font-size: clamp(15px, 1.25vw, 16px);
    font-weight: 700;
    color: var(--acc-ink);
    margin-bottom: 16px;
}

.account-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.account-form-row--single {
    grid-template-columns: 1fr;
}

.account-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.account-field label {
    display: block;
    font-family: var(--font-body);
    font-size: clamp(12px, 1.04vw, 12px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--acc-ink);
    margin-bottom: 6px;
}

.account-field input,
.account-phone select {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    background: var(--acc-field);
    border: 1px solid transparent;
    border-radius: 5px;
    font-family: var(--font-body);
    font-size: clamp(13px, 1.11vw, 14px);
    color: var(--acc-ink);
    transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}

.account-field input:focus,
.account-phone select:focus {
    outline: none;
    background: #e2e2e2;
    border-color: var(--acc-ink);
}

/* Read-only by design — the email address needs a confirmation round
   trip, so it is shown rather than edited. Styled as clearly inert so
   nobody types into it and wonders why nothing saved. */
.account-field input:disabled {
    background: #f3f3f3;
    color: var(--acc-muted);
    cursor: not-allowed;
}

/* Only once they have typed, so an untouched form is not a wall of red. */
.account-field input:not(:placeholder-shown):invalid {
    border-color: #c9695f;
}

.account-phone {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 8px;
}

.account-phone select {
    padding-inline: 10px;
    cursor: pointer;
    font-family: var(--font-accent);
}

.account-help {
    margin-top: 6px;
    font-family: var(--font-body);
    font-size: clamp(11px, 0.9vw, 11px);
    line-height: 1.55;
    color: var(--acc-muted);
}

.account-help a {
    color: var(--acc-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.account-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.account-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 30px;
    background: var(--c-ink);
    border: 1px solid var(--c-ink);
    border-radius: 8px;
    color: var(--c-page);
    font-family: var(--font-display);
    font-size: clamp(13px, 1.11vw, 14px);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

/* Brand green on hover, like every other solid CTA on the site.
   Figma gives each of these a Default and a Default_hover, and the
   hover is always #81af4a on #fdfdfd. This was inverting to
   transparent instead. --c-brand is #81af4a. */
.account-submit:hover,
.account-submit:focus-visible {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: var(--c-page);
}

.account-cancel {
    font-family: var(--font-body);
    font-size: clamp(12px, 1.04vw, 12px);
    font-weight: 400;
    color: var(--acc-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.account-cancel:hover {
    color: var(--acc-ink);
}

/* =========================================
   6. NOTICES
========================================= */
.account-notice {
    padding: 13px 16px;
    margin-bottom: 22px;
    border-left: 3px solid currentColor;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: clamp(12px, 1.04vw, 12px);
    line-height: 1.55;
}

/* Focus is moved here by script so the message is announced; a ring
   would read as an error state on a success message. */
.account-notice:focus {
    outline: none;
}

.account-notice--ok    { background: #f1f7ea; color: #3f6115; }
.account-notice--error { background: #fbf0ef; color: #8a2b21; }
.account-notice--warn  { background: #fcf6e8; color: #7a5a12; }

.account-notice a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* =========================================
   7. RESPONSIVE
========================================= */
@media (max-width: 900px) {
    /* Sidebar becomes a scrollable strip above the panel — a 232px
       column at this width leaves the panel too narrow to hold two
       address cards. */
    .account-shell {
        grid-template-columns: 1fr;
    }

    .account-nav {
        margin-inline: calc(max(16px, 5.55vw) * -1);
        padding-inline: max(16px, 5.55vw);
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .account-nav::-webkit-scrollbar { display: none; }

    .account-nav ul {
        display: flex;
        gap: 8px;
        width: max-content;
    }

    .account-nav-link {
        padding: 8px 16px;
        white-space: nowrap;
        background: var(--c-white);
        border: 1px solid var(--acc-line);
        border-radius: 999px;
    }

    /* The dot needs the vertical run to sit beside; in a pill row it
       only crowds the label. */
    .account-nav-link.is-current::before {
        display: none;
    }

    .account-nav-link.is-current {
        border-color: var(--acc-accent);
    }

    .account-nav-sep {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
        /* Keeps a little air between Logout and the sections. */
        margin-left: 8px;
    }
}

@media (max-width: 640px) {
    .account-row,
    .account-form-row {
        grid-template-columns: 1fr;
    }

    .account-main {
        padding: 18px 16px 22px;
    }

    .account-order-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .account-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 12px;
    }

    .account-submit { width: 100%; }
    .account-cancel { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .account-nav-link,
    .account-link,
    .account-field input,
    .account-phone select,
    .account-submit {
        transition: none;
    }
}