/* =====================================================================
   YAXIN Industrial Supplies — account.css
   Styles for the account pages (login.html / register.html), the member centre
   (account.html) and the order page it links to (order-detail.html). Loaded
   after base.css, so it only has to carry what is unique to these screens: the
   centred auth card, the form controls and their validation states, the
   member-centre layout and the order breakdown.
   Everything shared (header, nav, footer, breadcrumbs, tokens) comes from
   base.css and is deliberately not re-declared here.
   ===================================================================== */

/* ===================== Page shell ===================== */
/* The breadcrumb above already contributes its own padding, so the top gap
   here is a nudge rather than a full section spacing. The bottom padding is
   generous because these pages are short — without it the dark footer rides
   up and the card looks like it is falling off the page. */
.auth { padding: 6px 0 clamp(56px, 8vw, 88px); }

/* The card is the whole page, so it is centred on the viewport width rather
   than filling it. 468px is the measured comfortable width for the longest
   label + input at the 14.5px type scale; it also keeps the register form's
   two-column name row at ~190px per column, which is still wide enough to
   type a full name without the field feeling cramped. */
.auth-card {
  max-width: 468px; margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(26px, 4vw, 38px) clamp(20px, 4vw, 34px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}

.auth-head { text-align: center; margin-bottom: 26px; }
.auth-head h1 { font-size: clamp(22px, 3vw, 26px); font-weight: 700; letter-spacing: -.2px; }
.auth-head p { font-size: 14px; color: var(--gray); margin-top: 7px; }

/* ===================== Fields ===================== */
.field { margin-bottom: 18px; }

/* Label row. The "Forgot your password?" link rides on the same baseline as
   the Password label instead of taking a line of its own, which keeps the
   form compact — the reference page does the same. */
.field-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 7px;
}
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; }
.field-head label { margin-bottom: 0; }
.field .req { color: var(--red); margin-left: 2px; }
.field-head .link { font-size: 13px; font-weight: 500; color: var(--red); white-space: nowrap; }
.field-head .link:hover { text-decoration: underline; }

/* One wrapper owns the icon, the input and (on passwords) the reveal button,
   so all three are positioned off the same box rather than off each other. */
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input-ico {
  position: absolute; left: 13px; width: 18px; height: 18px;
  color: #9aa0a6; pointer-events: none; transition: color .16s;
}
.input-wrap input {
  width: 100%; height: 46px;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 0 14px; font-family: inherit; font-size: 14.5px; color: var(--dark);
  background: var(--white); outline: none;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.input-wrap.has-ico input { padding-left: 42px; }
/* Room for the reveal button so a long password never slides under it. */
.input-wrap.has-pw input { padding-right: 46px; }
.input-wrap input::placeholder { color: #a8aeb4; }
.input-wrap input:hover { border-color: #d8dde2; }

/* Focus uses the brand red. The invalid state below also uses red, which is
   why it does not rely on colour alone — it adds a tinted fill, a warning
   glyph in the message and aria-invalid for assistive tech. */
.input-wrap input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(226, 33, 28, .12);
}
.input-wrap input:focus ~ .input-ico,
.input-wrap:focus-within .input-ico { color: var(--red); }

.field.invalid .input-wrap input {
  border-color: var(--red); background: #fef7f7;
}
.field.invalid .input-wrap .input-ico { color: var(--red); }

/* Password reveal. The button holds both eyes and CSS swaps them, so the
   icon never has to be rebuilt in JS. */
.pw-toggle {
  position: absolute; right: 6px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 6px;
  color: #9aa0a6; cursor: pointer; line-height: 0;
  transition: color .15s, background .15s;
}
.pw-toggle:hover { color: var(--red); background: var(--red-light); }
.pw-toggle svg { width: 18px; height: 18px; }
.pw-toggle .eye-off { display: none; }
.pw-toggle.on .eye-on { display: none; }
.pw-toggle.on .eye-off { display: block; }

/* ===================== Validation ===================== */
/* Hidden until the field actually fails, so an untouched form stays quiet. */
.field-err {
  display: none; align-items: flex-start; gap: 5px;
  font-size: 12.5px; color: var(--red); margin-top: 6px; line-height: 1.4;
}
.field.invalid .field-err { display: flex; }
.field-err svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; }

/* Form-level banner: reused for both the "fix the fields" error and the
   demo-build acknowledgement. */
.auth-msg { display: none; border-radius: 8px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; margin-bottom: 20px; }
.auth-msg.show { display: flex; gap: 9px; align-items: flex-start; }
.auth-msg svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.auth-msg.bad { background: var(--red-light); color: var(--red-dark); border: 1px solid #f6c9c7; }
.auth-msg.ok { background: #eef8f1; color: #1e7a3c; border: 1px solid #cbe9d5; }

/* ===================== Password strength ===================== */
.pw-strength { display: none; margin-top: 9px; }
.pw-strength.show { display: block; }
.pw-bars { display: flex; gap: 5px; }
.pw-bars i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); transition: background .2s; }
/* One rule per score, lighting up that many segments. Colour alone carries
   the meaning here, so the word beside it (.pw-hint b) is the real signal. */
.pw-strength[data-score="1"] .pw-bars i:nth-child(-n+1) { background: #e05b52; }
.pw-strength[data-score="2"] .pw-bars i:nth-child(-n+2) { background: #f5a623; }
.pw-strength[data-score="3"] .pw-bars i:nth-child(-n+3) { background: #3f9d57; }
.pw-strength[data-score="4"] .pw-bars i:nth-child(-n+4) { background: #1e7a3c; }
.pw-hint { font-size: 12px; color: var(--gray); margin-top: 6px; }
.pw-hint b { color: var(--dark); font-weight: 600; }

/* ===================== Opt-in checkbox ===================== */
.check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: var(--gray); line-height: 1.5;
  margin: 2px 0 20px; cursor: pointer;
}
.check input {
  flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px;
  accent-color: var(--red); cursor: pointer;
}

/* ===================== Submit ===================== */
.btn-auth {
  display: block; width: 100%;
  background: var(--red); color: #fff; border: none; border-radius: 8px;
  padding: 14px 0; font-size: 15.5px; font-weight: 600; cursor: pointer;
  transition: background .2s, transform .06s;
}
.btn-auth:hover { background: var(--red-dark); }
.btn-auth:active { transform: translateY(1px); }

.auth-terms { font-size: 12.5px; color: var(--gray); text-align: center; margin-top: 14px; line-height: 1.5; }
.auth-terms a { color: var(--red); }
.auth-terms a:hover { text-decoration: underline; }

/* Separated by a rule so the alternative action reads as a footer to the
   card rather than a second form. */
.auth-alt {
  text-align: center; font-size: 14px; color: var(--gray);
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line);
}
.auth-alt a { color: var(--red); font-weight: 600; }
.auth-alt a:hover { text-decoration: underline; }

/* ===================== Register: name pair ===================== */
/* First and last name share one row. The two fields each keep their own 18px
   bottom margin, so the grid row is governed by the taller of the two as soon
   as one of them grows an error message — the other column simply stretches.
   That is why the columns are not aligned with align-items: start. */
.name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* ===================== Responsive ===================== */
@media (max-width: 520px) {
  .auth-card { border-radius: 12px; }
  /* Stacked once two ~150px columns stop holding a full name. */
  .name-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   Member centre — account.html
   Sidebar + content column. Shares the field, button and validation language
   above (the profile form is the same .field / .input-wrap markup), so only
   the layout and the new pieces — stats, tables, chips, info rows — are here.
   ===================================================================== */

/* ===================== Page shell ===================== */
.acct { padding: 4px 0 clamp(48px, 7vw, 80px); }

/* Same honesty rule as the auth pages: this build has no backend, so the
   figures below are sample data and the page says so on the way in. */
.acct-note {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13px; line-height: 1.5; color: #7a6320;
  background: #fdf7e7; border: 1px solid #f0e2b6; border-radius: 8px;
  padding: 11px 14px; margin-bottom: 22px;
}
.acct-note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }

/* minmax(0, 1fr) on the content column: a table wider than the column must
   scroll inside .table-wrap instead of stretching the grid track. */
.acct-grid { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 26px; align-items: start; }

/* ===================== Sidebar ===================== */
.acct-user {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; margin-bottom: 14px;
}
.acct-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: var(--red-light); color: var(--red);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; letter-spacing: .5px;
}
.acct-user-txt { min-width: 0; }
.acct-user-txt b { display: block; font-size: 15px; font-weight: 600; }
/* The email can be long; truncate rather than widen the sidebar. */
.acct-user-txt span {
  display: block; font-size: 12.5px; color: var(--gray); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.acct-nav {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px;
}
/* One rule serves both the <a> tabs and the log-out <button>, so the two can
   never drift apart. */
.acct-link {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 12px; border: none; border-radius: 8px;
  background: none; font: inherit; font-size: 14px; color: var(--dark);
  text-align: left; cursor: pointer;
  transition: background .18s, color .18s;
}
.acct-link svg { width: 19px; height: 19px; flex-shrink: 0; color: #9aa0a6; transition: color .18s; }
.acct-link:hover { background: #f4f6f7; }
.acct-link.active { background: var(--red-light); color: var(--red); font-weight: 600; }
.acct-link.active svg { color: var(--red); }
.acct-count {
  margin-left: auto; font-size: 12px; font-weight: 600; color: var(--gray);
  background: #f1f3f5; border-radius: 20px; padding: 2px 8px;
}
.acct-link.active .acct-count { background: var(--white); color: var(--red); }
/* Log out is an action, not a destination — muted until hovered, and it is
   pushed away from the navigation above it. */
.acct-link-out { margin-top: 4px; color: var(--gray); }
.acct-link-out:hover { background: var(--red-light); color: var(--red); }
.acct-link-out:hover svg { color: var(--red); }

/* ===================== Stats ===================== */
/* auto-fit keeps three tiles on a tablet and folds to two-then-one on a
   phone without a breakpoint of its own. */
.acct-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.acct-stat {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px;
}
/* The label is scoped to a direct child so it cannot swallow the balance figure
   itself. (That guard dates from when the currency sign was a <span>, a sibling
   of this label inside .acct-stat; the sign is an <em> now, so the descendant
   form would be safe too — the direct-child scope is kept as a belt-and-braces
   rule that the figure stays on its own line.) */
.acct-stat > span { display: block; font-size: 12.5px; color: var(--gray); margin-bottom: 6px; }
.acct-stat b { font-size: 24px; font-weight: 700; letter-spacing: -.3px; }
/* Balance follows the site-wide convention that money is red. */
.acct-stat b.money { color: var(--red); }

/* ===================== Panels ===================== */
.acct-panel {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 22px;
}
/* Stated explicitly because the panels are toggled by the hidden attribute
   and any future display rule on .acct-panel would silently win over it. The
   same applies to the info rows (grid), the form and the buttons (inline-block):
   a display declaration beats the browser's [hidden] rule, so each one that
   carries a display value needs its own opt-out here. */
.acct-panel[hidden],
.acct-rows[hidden],
.acct-form[hidden],
.btn-acct[hidden] { display: none; }

.panel-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 18px;
}
.panel-head h2 { font-size: 19px; font-weight: 700; }
.panel-head p { font-size: 13.5px; color: var(--gray); margin-top: 5px; }
.panel-foot { font-size: 12.5px; color: var(--gray); margin-top: 14px; }

/* ===================== Tables ===================== */
/* The wrapper, not the table, owns the scroll so a narrow column never makes
   the page itself scroll sideways. */
.table-wrap { overflow-x: auto; }
.acct-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.acct-table th {
  text-align: left; padding: 0 12px 10px; border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: var(--gray); white-space: nowrap;
}
.acct-table td {
  padding: 13px 12px; border-bottom: 1px solid var(--line);
  font-size: 13.5px; white-space: nowrap;
}
.acct-table tr:last-child td { border-bottom: none; }
/* First and last cells sit flush with the panel padding rather than adding a
   second, invisible gutter. */
.acct-table th:first-child, .acct-table td:first-child { padding-left: 0; }
.acct-table th:last-child, .acct-table td:last-child { padding-right: 0; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .2px; }
/* Amounts read as data, not as a headline — see the prices block below. */
.acct-table td.money { font-weight: 400; }
/* Store credit reads green, money out stays neutral — the sign already says
   which way the balance moved, so only credits get colour. */
.acct-table td.money.in { color: #1e7a3c; }

/* ===================== Prices in the member centre ===================== */
/* Same convention the storefront uses (see base.css): the currency sign and the
   cents are smaller and never bold, so the integer part is what the eye lands
   on. Here the amount itself is regular weight too — the prices the account
   prints are data to read, not a headline to sell with. Covers both
   member-centre tables (.acct-table — orders and the funds ledger), the balance
   cards inside the Funds panel and in the strip above every panel
   (.acct-stat .money), and every price on an order page: the per-line unit
   price (.od-price), the line subtotal (.od-line) and the order summary
   (.od-sum). Dynamic prices already carry the sign and the cents in tags —
   pmoney() in main.js does the wrapping — so only the amounts typed straight
   into account.html needed it added by hand. */
.acct-stat b.money { font-weight: 400; }
.acct-table td.money em,
.acct-stat b.money em,
.od-price em,
.od-line em,
.od-sum b em { font-size: .62em; font-weight: 400; }
/* The cents <b>, same treatment. `> b` on the two .money figures and on the
   summary rows because there the price is itself inside a <b> that carries its
   own font-size (24px on the balance cards, 19px on the order total). The plain
   .od-sum b rules below are regular weight already, so only the size differs. */
.acct-table td.money b,
.acct-stat b.money > b,
.od-price b,
.od-line b,
.od-sum b > b,
.od-sum.total b > b { font-size: .62em; font-weight: 400; }

.chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.chip.ok { background: #eef8f1; color: #1e7a3c; }
.chip.info { background: #eaf2fd; color: #1a5fb4; }
.chip.warn { background: #fdf5e6; color: #a9700c; }

/* ===================== Order rows — cover thumbnail ===================== */
/* One column ahead of the order number: the picture of the first item in the
   order, so the list can be scanned by sight rather than read row by row. Only
   the orders table has that column, so only it needs the extra room — the
   funds table beside it keeps its own width. */
.acct-orders { min-width: 640px; }
.order-thumb span {
  width: 120px; height: 120px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #f7f8f9; border: 1px solid var(--line);
}
/* Real photos fill the tile; items without one keep their catalogue icon. */
.order-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.order-thumb svg { width: 60px; height: 60px; }

/* ===================== Order rows → order page ===================== */
/* The table stays plain text. The order number is a real link, and the whole
   row is clickable for the mouse — the chevron is the only cue that a row
   leads somewhere. */
.order-row { cursor: pointer; }
.order-row:hover td { background: #fafbfc; }
.order-open {
  display: inline-flex; align-items: center; gap: 3px;
  border-radius: 4px; color: var(--red); font-weight: 600;
  text-decoration: none;
}
.order-open:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.order-cue { display: inline-flex; }
.order-cue svg { width: 15px; height: 15px; transition: transform .18s; }
.order-row:hover .order-cue svg { transform: translateX(2px); }

/* =====================================================================
   Order details — order-detail.html
   The second level of the member centre, so it keeps that page's sidebar and
   only the content column and the breakdown layout are here. The .od-item /
   .od-thumb / .od-sum rules serve the item list and the summary card alike.
   ===================================================================== */

/* The content column stacks its cards; the sidebar layout above already
   supplies the grid, so this is only the vertical rhythm inside it. */
.od-page > * + * { margin-top: 18px; }

/* Back to the list this order came from. Quiet by default: it is an exit, not
   the thing the page is for. */
.od-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--gray);
}
.od-back svg { width: 16px; height: 16px; }
.od-back:hover { color: var(--red); }

.od-head-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 18px; margin-top: 14px;
}
.od-head-row .btn-acct { flex-shrink: 0; }
/* The cover shot and the order's identity read as one block, so "Buy again"
   stays on the far side of the card rather than orphaning the picture. */
.od-head-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.od-cover {
  width: 120px; height: 120px; border-radius: 12px; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #f7f8f9; border: 1px solid var(--line);
}
/* Same rule as the line items below: a photo fills the tile, an icon sits in it. */
.od-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.od-cover svg { width: 60px; height: 60px; }
.od-kicker {
  font-size: 11.5px; font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase; color: var(--gray);
}
.od-head h1 { font-size: clamp(20px, 2.6vw, 24px); font-weight: 700; letter-spacing: -.2px; margin-top: 4px; }
.od-sub {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--gray); margin-top: 7px;
}
/* The "unknown order" notice, when it appears, belongs under the heading
   rather than beside it. */
.od-head .acct-msg { margin: 16px 0 0; }

/* A rule above the first row so the list reads as a table of its own rather
   than as loose content in the card. */
.od-list { border-top: 1px solid var(--line); }
.od-item {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 14px; align-items: center; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.od-item:last-child { border-bottom: none; }
.od-thumb {
  width: 62px; height: 62px; border-radius: 9px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #f7f8f9; border: 1px solid var(--line);
}
/* Real photos fill the tile; catalogue items without one keep their icon. */
.od-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.od-thumb svg { width: 32px; height: 32px; }
.od-info { min-width: 0; }
.od-title { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--dark); }
.od-title:hover { color: var(--red); }
.od-meta { font-size: 12.5px; color: var(--gray); margin-top: 4px; }
.od-price { font-size: 12.5px; color: var(--gray); margin-top: 2px; }
.od-line { font-size: 14px; font-weight: 400; white-space: nowrap; }

/* Delivery beside the summary while both fit, stacked once they do not. */
.od-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }

.od-total { border-top: 1px solid var(--line); padding-top: 14px; }
.od-sum { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; color: var(--gray); }
.od-sum + .od-sum { margin-top: 8px; }
.od-sum b { color: var(--dark); font-weight: 400; }
.od-sum.total {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--line); font-size: 15px;
}
.od-sum.total b { color: var(--red); font-size: 19px; font-weight: 400; }

/* ===================== Personal info ===================== */
.acct-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.acct-rows > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
/* Six rows in two columns: the last pair needs no rule under it. */
.acct-rows > div:nth-last-child(-n+2) { border-bottom: none; }
.acct-rows dt { font-size: 12.5px; color: var(--gray); margin-bottom: 4px; }
.acct-rows dd { font-size: 14px; line-height: 1.45; }

.acct-form .field:last-of-type { margin-bottom: 0; }
.acct-form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* ===================== Buttons ===================== */
.btn-acct {
  display: inline-block; background: var(--red); color: #fff;
  border: 1px solid var(--red); border-radius: 8px;
  padding: 11px 22px; font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, transform .06s;
}
.btn-acct:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn-acct:active { transform: translateY(1px); }
.btn-acct.ghost { background: var(--white); color: var(--dark); border-color: var(--line); }
.btn-acct.ghost:hover { background: var(--white); border-color: var(--red); color: var(--red); }

/* Panel-level feedback (profile saved), mirroring the auth banner. */
.acct-msg { display: none; border-radius: 8px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; margin-bottom: 18px; }
.acct-msg.show { display: flex; gap: 9px; align-items: flex-start; }
.acct-msg svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.acct-msg.ok { background: #eef8f1; color: #1e7a3c; border: 1px solid #cbe9d5; }
.acct-msg.bad { background: var(--red-light); color: var(--red-dark); border: 1px solid #f6c9c7; }

/* ===================== Member centre responsive ===================== */
@media (max-width: 1100px) {
  .acct-grid { grid-template-columns: 232px minmax(0, 1fr); gap: 20px; }
}
/* Single column: the sidebar turns into a full-width card of its own above
   the content. It is deliberately not a horizontally scrolling strip — an
   overflow-x container on a sticky-anchored page is what broke the detail
   page tabs, and stacking needs no scroll container at all. */
@media (max-width: 900px) {
  .acct-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .od-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .acct-panel { padding: 18px 16px; }
  .acct-stat b { font-size: 21px; }
  /* Button drops under its heading instead of squeezing the title. */
  .panel-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .acct-rows { grid-template-columns: 1fr; }
  /* One column means every row needs its rule back, including the last. */
  .acct-rows > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .acct-rows > div:last-child { border-bottom: none; }
  /* On the order page, "Buy again" drops under the heading instead of squeezing
     the order number, which is the one thing there that must stay readable. */
  .od-head-row { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* A line item has to carry a thumbnail, a title and a price across the full
   width of a phone, so everything tightens a step rather than wrapping. */
@media (max-width: 520px) {
  .od-item { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 11px; padding: 13px 0; }
  .od-thumb { width: 52px; height: 52px; }
  .od-thumb svg { width: 27px; height: 27px; }
  .od-title { font-size: 13.5px; }
  .od-meta, .od-price { font-size: 12px; }
  .od-line { font-size: 13.5px; }
  .od-sub { font-size: 12.5px; margin-top: 6px; }
  .od-head-main { gap: 12px; }
  .od-sum.total b { font-size: 17px; }
}