/* ==========================================================================
   HerbXMedica — account.css
   The My Account area: shell, sidebar, dashboard, orders, addresses, forms.

   Loaded after wp.css and only on the account pages (inc/account.php), which
   is why nothing here needs !important to win over the WooCommerce restyling
   in that file.

   Everything resolves through tokens.css. The handful of values declared at
   the top of this file are account-local rhythm — one place to retune the
   whole area — and never new colours.

   Contents
     1.  Local scale
     2.  Shell and grid
     3.  Page head
     4.  Sidebar navigation
     5.  Support card
     6.  Shared: cards, buttons, badges, links, empty states
     7.  Dashboard — counters, recent orders, quick actions, banner
     8.  Orders — tabs, cards, pagination
     9.  Addresses
     10. Forms — account details, edit address, sign in
     11. View order and downloads
     12. Responsive
   ========================================================================== */


/* ==========================================================================
   1. LOCAL SCALE
   ========================================================================== */

.hxm-acc-section {
  /* The page head above is the site header, not a hero, so the account area
     opens tighter than a content section would. */
  padding-block: clamp(28px, 3.4vw, 52px) clamp(56px, 6vw, 88px);

  --acc-nav-w: 260px;
  --acc-gutter: clamp(20px, 2vw, 32px);   /* sidebar to content            */
  --acc-gap: clamp(16px, 1.5vw, 20px);    /* between cards                 */
  --acc-pad: clamp(18px, 1.6vw, 24px);    /* inside a card                 */
  --acc-r: 14px;                          /* card radius                   */
  --acc-r-sm: 10px;                       /* rows, inputs, small buttons   */
  --acc-line: 1px solid var(--hxm-line);
  --acc-shadow: 0 1px 2px rgba(22, 38, 29, 0.04), 0 10px 26px rgba(22, 38, 29, 0.045);
  --acc-shadow-up: 0 2px 4px rgba(22, 38, 29, 0.05), 0 14px 34px rgba(22, 38, 29, 0.08);
  --acc-t: 200ms;
}

/* The account templates own the whole column. WooCommerce's shortcode wrapper
   is a plain block again — see the note left in wp.css. */
.woocommerce-account .hxm-acc-section .woocommerce { display: block; }


/* ==========================================================================
   2. SHELL AND GRID
   ========================================================================== */

/* Three children — nav, support card, content — in two columns. The support
   card is a sibling of the nav rather than a child so the mobile order can be
   nav / content / support without duplicating any of it. */
.hxm-acc {
  display: grid;
  grid-template-columns: var(--acc-nav-w) minmax(0, 1fr);
  column-gap: var(--acc-gutter);
  row-gap: var(--acc-gap);
  align-items: start;
}

.hxm-acc__nav  { grid-column: 1; grid-row: 1; }
.hxm-acc__help { grid-column: 1; grid-row: 2; }

.hxm-acc__main {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;   /* the one rule that keeps a wide table from stretching the grid */
}

/* WooCommerce's own two wrappers carry no layout of their own any more. */
.hxm-acc .woocommerce-MyAccount-content,
.hxm-acc .woocommerce-MyAccount-content-wrapper {
  width: 100%;
  min-width: 0;
  float: none;
}

.hxm-acc .woocommerce-notices-wrapper:not(:empty) { margin-bottom: var(--acc-gap); }


/* ==========================================================================
   3. PAGE HEAD
   ========================================================================== */

.hxm-acc__head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: clamp(18px, 2vw, 26px);
}

.hxm-acc__head-text { min-width: 0; flex: 1 1 auto; }

.hxm-acc__title {
  margin: 0;
  color: var(--hxm-ink);
  font-family: var(--hxm-font-display);
  font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);   /* 26 → 36 */
  font-weight: 700;
  letter-spacing: var(--hxm-ls-tight);
  line-height: 1.14;
  text-wrap: balance;
}

.hxm-acc__wave { font-size: 0.82em; }

/* Two leads, one shown at a time — display:none keeps the hidden one out of
   the accessibility tree, so nothing is read twice. Wide screens get the full
   "Welcome back,"; the short "Hi," takes over where the line would wrap. */
.hxm-acc__title-lead--sm { display: none; }
.hxm-acc__title-lead--lg { display: inline; }

.hxm-acc__sub {
  margin: 7px 0 0;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-2xs);
  line-height: 1.5;
}

/* Back to the dashboard. Mobile-only — on desktop the sidebar is the way back. */
.hxm-acc__back {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: var(--acc-line);
  border-radius: var(--acc-r-sm);
  background: var(--hxm-white);
  color: var(--hxm-forest);
  transition: background-color var(--acc-t) var(--hxm-ease), border-color var(--acc-t) var(--hxm-ease);
}

.hxm-acc__back svg { width: 18px; height: 18px; }
.hxm-acc__back:hover { border-color: var(--hxm-leaf); background: var(--hxm-mist); }

.hxm-acc__head-action {
  display: none;
  flex: none;
  gap: 6px;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--hxm-leaf);
  border-radius: var(--acc-r-sm);
  background: var(--hxm-white);
  color: var(--hxm-green);
  font-size: var(--hxm-fs-3xs);
  font-weight: 600;
}

.hxm-acc__head-action svg { width: 15px; height: 15px; }


/* ==========================================================================
   4. SIDEBAR NAVIGATION
   ========================================================================== */

.hxm-acc__nav-label {
  margin: 0 0 10px 2px;
  color: var(--hxm-muted);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hxm-acc__nav-list {
  margin: 0;
  padding: 0;
  border: var(--acc-line);
  border-radius: var(--acc-r);
  background: var(--hxm-white);
  box-shadow: var(--acc-shadow);
  list-style: none;
  overflow: hidden;
}

.hxm-acc__nav-list > li + li { border-top: var(--acc-line); }

.hxm-acc__nav-link {
  position: relative;
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 13px 16px;
  color: var(--hxm-ink);
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
  line-height: 1.3;
  transition: background-color var(--acc-t) var(--hxm-ease), color var(--acc-t) var(--hxm-ease);
}

.hxm-acc__nav-ico {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--hxm-muted);
  transition: color var(--acc-t) var(--hxm-ease), transform var(--acc-t) var(--hxm-ease);
}

.hxm-acc__nav-link:hover { background: var(--hxm-mist); color: var(--hxm-green); }
.hxm-acc__nav-link:hover .hxm-acc__nav-ico { color: var(--hxm-green); transform: translateX(1px); }

.hxm-acc__nav-list > li.is-active > .hxm-acc__nav-link,
.hxm-acc__nav-link[aria-current="page"] {
  background: var(--hxm-leaf);
  color: var(--hxm-white);
}

.hxm-acc__nav-list > li.is-active > .hxm-acc__nav-link .hxm-acc__nav-ico,
.hxm-acc__nav-link[aria-current="page"] .hxm-acc__nav-ico { color: currentColor; }


/* ==========================================================================
   5. SUPPORT CARD
   ========================================================================== */

.hxm-acc__help {
  position: relative;
  padding: 18px;
  border: 1px solid var(--hxm-line);
  border-radius: var(--acc-r);
  background: var(--hxm-mist);
  overflow: hidden;
  isolation: isolate;
}

.hxm-acc__help-leaf {
  position: absolute;
  z-index: -1;
  right: -18px;
  bottom: -22px;
  width: 104px;
  height: 104px;
  color: var(--hxm-leaf);
  opacity: 0.15;
}

.hxm-acc__help-title {
  margin: 0;
  color: var(--hxm-forest);
  font-size: var(--hxm-fs-2xs);
  font-weight: 700;
}

.hxm-acc__help-sub {
  margin: 2px 0 12px;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-label);
}

.hxm-acc__help-list { display: grid; gap: 8px; }

.hxm-acc__help-list a {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--hxm-forest);
  font-size: var(--hxm-fs-label);
  font-weight: 500;
  word-break: break-word;
  transition: color var(--acc-t) var(--hxm-ease);
}

.hxm-acc__help-list svg { flex: none; width: 15px; height: 15px; color: var(--hxm-green); }
.hxm-acc__help-list a:hover { color: var(--hxm-green); }


/* ==========================================================================
   6. SHARED PIECES
   ========================================================================== */

/* --- card ---------------------------------------------------------------- */

.hxm-acc-card {
  border: var(--acc-line);
  border-radius: var(--acc-r);
  background: var(--hxm-white);
  box-shadow: var(--acc-shadow);
}

.hxm-acc-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  padding: var(--acc-pad) var(--acc-pad) 0;
}

.hxm-acc-card__title {
  margin: 0;
  padding: 0;
  color: var(--hxm-ink);
  font-family: var(--hxm-font-body);
  font-size: var(--hxm-fs-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.hxm-acc-card__body { padding: var(--acc-pad); }

.hxm-acc-card__foot {
  padding: 0 var(--acc-pad) var(--acc-pad);
}

.hxm-acc-card__foot--split {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  padding-top: var(--acc-pad);
  border-top: var(--acc-line);
  margin-top: calc(var(--acc-pad) * -1 + 4px);
}

/* --- compact button ------------------------------------------------------ */

.hxm-acc-btn {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid var(--hxm-line-strong);
  border-radius: var(--acc-r-sm);
  background: var(--hxm-white);
  color: var(--hxm-forest);
  cursor: pointer;
  font-family: var(--hxm-font-body);
  font-size: var(--hxm-fs-3xs);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: background-color var(--acc-t) var(--hxm-ease),
              border-color var(--acc-t) var(--hxm-ease),
              color var(--acc-t) var(--hxm-ease);
}

.hxm-acc-btn svg { flex: none; width: 15px; height: 15px; }

.hxm-acc-btn--outline:hover,
.hxm-acc-btn--outline:focus-visible {
  border-color: var(--hxm-leaf);
  background: var(--hxm-leaf-softer);
  color: var(--hxm-green);
}

.hxm-acc-btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--hxm-muted);
}

.hxm-acc-btn--ghost:hover,
.hxm-acc-btn--ghost:focus-visible { background: var(--hxm-mist); color: var(--hxm-forest); }

.hxm-acc-btn--danger {
  border-color: rgba(178, 59, 44, 0.26);
  color: var(--hxm-danger);
}

.hxm-acc-btn--danger:hover,
.hxm-acc-btn--danger:focus-visible {
  border-color: var(--hxm-danger);
  background: rgba(178, 59, 44, 0.06);
}

/* The theme button inside a card picks up the card's radius. */
.hxm-acc .hxm-btn,
.hxm-acc-auth .hxm-btn { border-radius: var(--acc-r-sm); }

/* --- status badge -------------------------------------------------------- */

.hxm-acc-badge {
  display: inline-flex;
  flex: none;
  gap: 6px;
  align-items: center;
  padding: 5px 11px;
  border: 1px solid transparent;
  border-radius: var(--hxm-r-pill);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}

.hxm-acc-badge--ok   { border-color: rgba(44, 106, 72, 0.20);  background: var(--hxm-green-soft);    color: var(--hxm-green); }
.hxm-acc-badge--warn { border-color: rgba(216, 155, 52, 0.28); background: var(--hxm-turmeric-soft); color: var(--hxm-turmeric-ink); }
.hxm-acc-badge--bad  { border-color: rgba(178, 59, 44, 0.22);  background: rgba(178, 59, 44, 0.07);  color: var(--hxm-danger); }
.hxm-acc-badge--idle { border-color: var(--hxm-line);          background: var(--hxm-mist);          color: var(--hxm-muted); }
.hxm-acc-badge--soft { border-color: rgba(44, 106, 72, 0.20);  background: var(--hxm-green-soft);    color: var(--hxm-green); }

/* --- text link with an arrow --------------------------------------------- */

.hxm-acc-link {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--hxm-green);
  font-size: var(--hxm-fs-3xs);
  font-weight: 600;
  transition: color var(--acc-t) var(--hxm-ease);
}

.hxm-acc-link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--acc-t) var(--hxm-ease);
}

.hxm-acc-link:hover { color: var(--hxm-forest); }
.hxm-acc-link:hover svg { transform: translateX(3px); }

.hxm-acc-link__short { display: none; }

/* --- empty state --------------------------------------------------------- */

.hxm-acc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(36px, 5vw, 64px) 24px;
  border: var(--acc-line);
  border-radius: var(--acc-r);
  background: var(--hxm-white);
  box-shadow: var(--acc-shadow);
  text-align: center;
}

.hxm-acc-empty--inset {
  margin: 0 var(--acc-pad) var(--acc-pad);
  padding: 32px 20px;
  border-style: dashed;
  background: var(--hxm-paper);
  box-shadow: none;
}

.hxm-acc-empty__ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-mist);
  color: var(--hxm-green);
}

.hxm-acc-empty__ico svg { width: 24px; height: 24px; }

.hxm-acc-empty__title {
  margin: 0;
  color: var(--hxm-ink);
  font-size: var(--hxm-fs-md);
  font-weight: 700;
}

.hxm-acc-empty__sub {
  max-width: 42ch;
  margin: 6px 0 20px;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-2xs);
  line-height: 1.55;
}


/* ==========================================================================
   7. DASHBOARD
   ========================================================================== */

.hxm-acc-dash { display: grid; gap: var(--acc-gap); }

/* --- counters ------------------------------------------------------------ */

.hxm-acc-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--acc-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hxm-acc-stat {
  display: flex;
  flex-direction: column;
  padding: var(--acc-pad);
  border: var(--acc-line);
  border-radius: var(--acc-r);
  background: var(--hxm-white);
  box-shadow: var(--acc-shadow);
  transition: border-color var(--acc-t) var(--hxm-ease), box-shadow var(--acc-t) var(--hxm-ease);
}

.hxm-acc-stat:hover { border-color: var(--hxm-line-strong); box-shadow: var(--acc-shadow-up); }

/* The design carries the mark on mobile only, where each counter is a row. */
.hxm-acc-stat__ico { display: none; }

.hxm-acc-stat__label {
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-label);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.hxm-acc-stat__value {
  margin-top: 6px;
  color: var(--hxm-ink);
  font-family: var(--hxm-font-display);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);   /* 24 → 30 */
  font-weight: 700;
  letter-spacing: var(--hxm-ls-tight);
  line-height: 1.1;
}

.hxm-acc-stat__note {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  margin-top: 12px;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-label-sm);
  font-weight: 500;
}

.hxm-acc-stat__note svg {
  width: 13px;
  height: 13px;
  transition: transform var(--acc-t) var(--hxm-ease);
}

.hxm-acc-stat__note--link { color: var(--hxm-green); font-weight: 600; }
.hxm-acc-stat__note--link:hover { color: var(--hxm-forest); }
.hxm-acc-stat__note--link:hover svg { transform: translateX(3px); }

/* --- the two-card row ---------------------------------------------------- */

.hxm-acc-dash__split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--acc-gap);
  align-items: start;
}

/* --- recent orders ------------------------------------------------------- */

.hxm-acc-recent__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: var(--acc-pad);
  list-style: none;
}

.hxm-acc-recent__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px 14px;
  align-items: center;
  padding: 12px 14px;
  border: var(--acc-line);
  border-radius: var(--acc-r-sm);
  background: var(--hxm-paper);
  transition: border-color var(--acc-t) var(--hxm-ease),
              background-color var(--acc-t) var(--hxm-ease),
              transform var(--acc-t) var(--hxm-ease);
}

.hxm-acc-recent__link:hover {
  border-color: var(--hxm-leaf);
  background: var(--hxm-white);
  transform: translateY(-1px);
}

.hxm-acc-recent__id {
  grid-column: 1;
  color: var(--hxm-ink);
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.hxm-acc-recent__date {
  grid-column: 1;
  grid-row: 2;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-label-sm);
}

.hxm-acc-recent__total {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--hxm-ink);
  font-size: var(--hxm-fs-2xs);
  font-weight: 700;
  white-space: nowrap;
}

.hxm-acc-recent__total .woocommerce-Price-currencySymbol { font-weight: 600; }

.hxm-acc-recent__link .hxm-acc-badge { grid-column: 3; grid-row: 1 / span 2; }

/* --- quick actions ------------------------------------------------------- */

.hxm-acc-actions__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: calc(var(--acc-pad) - 8px) calc(var(--acc-pad) - 8px) calc(var(--acc-pad) - 4px);
  list-style: none;
}

.hxm-acc-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 8px;
  border-radius: var(--acc-r-sm);
  transition: background-color var(--acc-t) var(--hxm-ease);
}

.hxm-acc-action:hover { background: var(--hxm-mist); }

.hxm-acc-action__ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--acc-r-sm);
  background: var(--hxm-green-soft);
  color: var(--hxm-green);
  transition: background-color var(--acc-t) var(--hxm-ease);
}

.hxm-acc-action__ico svg { width: 18px; height: 18px; }
.hxm-acc-action:hover .hxm-acc-action__ico { background: var(--hxm-leaf-soft); }

.hxm-acc-action__text { display: grid; gap: 1px; min-width: 0; }

.hxm-acc-action__title {
  color: var(--hxm-ink);
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
}

.hxm-acc-action__sub {
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-label-sm);
}

.hxm-acc-action__go {
  width: 16px;
  height: 16px;
  color: var(--hxm-muted);
  transition: transform var(--acc-t) var(--hxm-ease), color var(--acc-t) var(--hxm-ease);
}

.hxm-acc-action:hover .hxm-acc-action__go { color: var(--hxm-green); transform: translateX(3px); }

/* --- banner -------------------------------------------------------------- */

.hxm-acc-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px var(--acc-pad);
  border: var(--acc-line);
  border-radius: var(--acc-r);
  background: linear-gradient(90deg, var(--hxm-mist), var(--hxm-white) 62%);
  box-shadow: var(--acc-shadow);
}

.hxm-acc-banner__ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-white);
  color: var(--hxm-green);
  box-shadow: inset 0 0 0 1px var(--hxm-line);
}

.hxm-acc-banner__ico svg { width: 20px; height: 20px; }

.hxm-acc-banner__text { min-width: 0; }

.hxm-acc-banner__title {
  margin: 0;
  color: var(--hxm-ink);
  font-size: var(--hxm-fs-2xs);
  font-weight: 700;
}

.hxm-acc-banner__sub {
  margin: 3px 0 0;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-label);
  line-height: 1.5;
}

.hxm-acc-banner__btn { flex: none; min-height: 44px; padding: 11px 22px; }


/* ==========================================================================
   8. ORDERS
   ========================================================================== */

/* --- status tabs --------------------------------------------------------- */

.hxm-acc-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--acc-gap);
  border-bottom: var(--acc-line);
  overflow-x: auto;
  scrollbar-width: none;
}

.hxm-acc-tabs::-webkit-scrollbar { display: none; }

.hxm-acc-tab {
  position: relative;
  display: inline-flex;
  flex: none;
  gap: 7px;
  align-items: center;
  padding: 10px 14px 13px;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-2xs);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--acc-t) var(--hxm-ease);
}

.hxm-acc-tab::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--hxm-leaf);
  transform: scaleX(0);
  transition: transform var(--acc-t) var(--hxm-ease);
}

.hxm-acc-tab:hover { color: var(--hxm-forest); }
.hxm-acc-tab.is-active { color: var(--hxm-forest); }
.hxm-acc-tab.is-active::after { transform: scaleX(1); }

.hxm-acc-tab__count {
  padding: 1px 7px;
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-mist);
  color: var(--hxm-muted);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  font-weight: 600;
}

.hxm-acc-tab.is-active .hxm-acc-tab__count { background: var(--hxm-green-soft); color: var(--hxm-green); }

/* --- order card ---------------------------------------------------------- */

.hxm-acc-orders {
  display: grid;
  gap: var(--acc-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hxm-acc-order {
  border: var(--acc-line);
  border-radius: var(--acc-r);
  background: var(--hxm-white);
  box-shadow: var(--acc-shadow);
  transition: border-color var(--acc-t) var(--hxm-ease), box-shadow var(--acc-t) var(--hxm-ease);
}

.hxm-acc-order:hover { border-color: var(--hxm-line-strong); box-shadow: var(--acc-shadow-up); }

.hxm-acc-order__head {
  display: flex;
  gap: 12px 16px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 15px var(--acc-pad);
  border-bottom: var(--acc-line);
}

.hxm-acc-order__no {
  margin: 0;
  color: var(--hxm-ink);
  font-family: var(--hxm-font-body);
  font-size: var(--hxm-fs-2xs);
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.hxm-acc-order__no a { transition: color var(--acc-t) var(--hxm-ease); }
.hxm-acc-order__no a:hover { color: var(--hxm-green); }

.hxm-acc-order__date {
  display: block;
  margin-top: 2px;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-label-sm);
}

/* Thumbnails take the slack, the figures sit in a column of their own so they
   never end up crowding the action beside them. */
.hxm-acc-order__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, auto) auto;
  gap: 16px 32px;
  align-items: center;
  padding: var(--acc-pad);
}

.hxm-acc-order__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hxm-acc-order__thumb {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: var(--acc-line);
  border-radius: var(--acc-r-sm);
  background: var(--hxm-paper);
  overflow: hidden;
}

.hxm-acc-order__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hxm-acc-order__thumb--more {
  background: var(--hxm-mist);
  color: var(--hxm-muted);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label);
  font-weight: 600;
}

.hxm-acc-order__meta {
  display: grid;
  gap: 2px;
  justify-items: end;
  text-align: right;
}

.hxm-acc-order__items {
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-label-sm);
}

.hxm-acc-order__total {
  color: var(--hxm-ink);
  font-size: var(--hxm-fs-md);
  font-weight: 700;
  white-space: nowrap;
}

.hxm-acc-order__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

/* --- pagination ---------------------------------------------------------- */

.hxm-acc-pager {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--acc-gap);
}

.hxm-acc-pager__count {
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-label);
  text-align: center;
}

.hxm-acc-pager .hxm-acc-btn:only-child { margin-inline-start: auto; }


/* ==========================================================================
   9. ADDRESSES
   ========================================================================== */

.hxm-acc-addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--acc-gap);
  align-items: start;
}

.hxm-acc-address {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--acc-pad);
  border: var(--acc-line);
  border-radius: var(--acc-r);
  background: var(--hxm-white);
  box-shadow: var(--acc-shadow);
}

.hxm-acc-address__head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.hxm-acc-address__title {
  margin: 0;
  color: var(--hxm-ink);
  font-family: var(--hxm-font-body);
  font-size: var(--hxm-fs-2xs);
  font-weight: 700;
}

/* WooCommerce formats this itself — recipient, then the address lines, each
   separated by a <br>. It is set as one readable block rather than picking
   lines out by position, which the formatter is free to reorder per country. */
.hxm-acc-address__body {
  margin: 0;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-2xs);
  font-style: normal;
  line-height: 1.7;
}

.hxm-acc-address__phone {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 12px 0 0;
  color: var(--hxm-forest);
  font-size: var(--hxm-fs-label);
  font-weight: 500;
}

.hxm-acc-address__phone svg { flex: none; width: 15px; height: 15px; color: var(--hxm-green); }

.hxm-acc-address__none {
  margin: 0;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-2xs);
  line-height: 1.6;
}

.hxm-acc-address__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}

.hxm-acc-address--empty .hxm-acc-address__actions { grid-template-columns: minmax(0, 1fr); }

.hxm-acc-address__actions .hxm-acc-btn,
.hxm-acc-address__remove { width: 100%; }

.hxm-acc-address__remove .hxm-acc-btn { width: 100%; }

/* --- add a new one ------------------------------------------------------- */

.hxm-acc-address-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-column: 1 / -1;
  gap: 4px;
  min-height: 132px;
  padding: 24px 20px;
  border: 1.5px dashed var(--hxm-line-strong);
  border-radius: var(--acc-r);
  background: transparent;
  text-align: center;
  transition: border-color var(--acc-t) var(--hxm-ease), background-color var(--acc-t) var(--hxm-ease);
}

.hxm-acc-address-add:hover { border-color: var(--hxm-leaf); background: var(--hxm-leaf-softer); }

.hxm-acc-address-add__ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 8px;
  border-radius: var(--hxm-r-pill);
  background: var(--hxm-leaf);
  color: var(--hxm-white);
  transition: transform var(--acc-t) var(--hxm-ease);
}

.hxm-acc-address-add__ico svg { width: 20px; height: 20px; }
.hxm-acc-address-add:hover .hxm-acc-address-add__ico { transform: scale(1.06); }

.hxm-acc-address-add__label {
  color: var(--hxm-forest);
  font-size: var(--hxm-fs-2xs);
  font-weight: 700;
}

.hxm-acc-address-add__sub {
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-label-sm);
}


/* ==========================================================================
   10. FORMS
   ========================================================================== */

.hxm-acc-form__split,
.hxm-acc-auth__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--acc-gap);
  align-items: start;
}

/* The sign-in grid keeps WooCommerce's col2-set markup, and wp.css forces that
   class to display:block so the checkout's billing and shipping stack. Two
   classes deep is enough to take it back here without touching that rule. */
.hxm-acc-auth .hxm-acc-auth__grid { display: grid; }

.hxm-acc-fields { display: flex; flex-direction: column; }

.hxm-acc-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.hxm-acc-fields__hint {
  margin: 0 0 4px;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-label);
  line-height: 1.5;
}

/* Both cards in a row keep the same body rhythm whether the fields are the
   theme's or WooCommerce's own generated ones. */
.hxm-acc-card__body {
  display: grid;
  gap: 16px;
  align-content: start;
}

.hxm-acc-fields__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* --- one field ----------------------------------------------------------- */

.hxm-acc .form-row,
.hxm-acc-auth .form-row {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.hxm-acc .form-row-wide,
.hxm-acc .form-row.notes,
.hxm-acc-fields__grid .form-row-wide { grid-column: 1 / -1; }

.hxm-acc label,
.hxm-acc-auth label:not(.hxm-acc-check) {
  margin-bottom: 7px;
  color: var(--hxm-ink);
  font-family: var(--hxm-font-body);
  font-size: var(--hxm-fs-label);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.hxm-acc .required,
.hxm-acc-auth .required { color: var(--hxm-danger); text-decoration: none; }

.hxm-acc input[type="text"],
.hxm-acc input[type="email"],
.hxm-acc input[type="tel"],
.hxm-acc input[type="password"],
.hxm-acc input[type="number"],
.hxm-acc textarea,
.hxm-acc select,
.hxm-acc .select2-selection,
.hxm-acc-auth input[type="text"],
.hxm-acc-auth input[type="email"],
.hxm-acc-auth input[type="password"] {
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  border: var(--acc-line);
  border-radius: var(--acc-r-sm);
  background: var(--hxm-white);
  color: var(--hxm-ink);
  font-family: var(--hxm-font-body);
  font-size: var(--hxm-fs-2xs);
  transition: border-color 160ms var(--hxm-ease), box-shadow 160ms var(--hxm-ease);
}

.hxm-acc input:hover:not(:focus),
.hxm-acc select:hover:not(:focus),
.hxm-acc-auth input:hover:not(:focus) { border-color: var(--hxm-line-strong); }

.hxm-acc input:focus,
.hxm-acc textarea:focus,
.hxm-acc select:focus,
.hxm-acc-auth input:focus {
  border-color: var(--hxm-leaf);
  box-shadow: 0 0 0 3px var(--hxm-leaf-soft);
  outline: none;
}

.hxm-acc input:focus-visible,
.hxm-acc-auth input:focus-visible { outline: none; }

.hxm-acc-field__hint {
  margin-top: 6px;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-label-sm);
  line-height: 1.5;
}

/* WooCommerce prints the display-name hint as a bare <em> in a <span>. */
.hxm-acc .form-row span em {
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-label-sm);
  font-style: normal;
}

/* --- password field with a reveal ---------------------------------------- */

.hxm-acc-pass { position: relative; display: block; }

.hxm-acc-pass input { padding-right: 48px; }

.hxm-acc-pass__toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--hxm-muted);
  cursor: pointer;
  transition: color var(--acc-t) var(--hxm-ease);
}

.hxm-acc-pass__toggle:hover { color: var(--hxm-green); }
.hxm-acc-pass__toggle svg { width: 18px; height: 18px; }
.hxm-acc-pass__toggle .hxm-acc-pass__off { display: none; }
.hxm-acc-pass__toggle[aria-pressed="true"] .hxm-acc-pass__on { display: none; }
.hxm-acc-pass__toggle[aria-pressed="true"] .hxm-acc-pass__off { display: block; }

/* WooCommerce's strength meter, when its script is on this page. */
.hxm-acc .woocommerce-password-strength,
.hxm-acc .woocommerce-password-hint {
  margin-top: 8px;
  padding: 7px 11px;
  border-radius: var(--hxm-r-xs);
  font-size: var(--hxm-fs-label-sm);
  line-height: 1.45;
}

.hxm-acc .woocommerce-password-strength { background: var(--hxm-mist); color: var(--hxm-forest); }
.hxm-acc .woocommerce-password-strength.short,
.hxm-acc .woocommerce-password-strength.bad { background: rgba(178, 59, 44, 0.08); color: var(--hxm-danger); }
.hxm-acc .woocommerce-password-strength.good,
.hxm-acc .woocommerce-password-strength.strong { background: var(--hxm-green-soft); color: var(--hxm-green); }
.hxm-acc .woocommerce-password-hint { background: var(--hxm-paper); color: var(--hxm-muted); }

/* --- checkbox ------------------------------------------------------------ */

.hxm-acc-check {
  display: inline-flex !important;
  gap: 9px;
  align-items: center;
  margin: 0 !important;
  color: var(--hxm-forest);
  font-size: var(--hxm-fs-label);
  font-weight: 500;
  cursor: pointer;
}

.hxm-acc-check input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  accent-color: var(--hxm-leaf);
}

/* --- sign in / register -------------------------------------------------- */

.hxm-acc-auth { max-width: 980px; margin-inline: auto; }

/* One card, centred. Sign in, create an account and both halves of the reset
   flow all use this — four pages that each do exactly one thing. */
.hxm-acc-auth--solo { max-width: 468px; }
.hxm-acc-auth--solo .hxm-acc-auth__grid { grid-template-columns: minmax(0, 1fr); }

.hxm-acc-auth__head { margin-bottom: clamp(20px, 2.4vw, 30px); text-align: center; }
.hxm-acc-auth__head .hxm-acc__sub { margin-inline: auto; max-width: 42ch; }

.hxm-acc-auth__eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--hxm-green);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
}

/* The way across to the other form. A tinted strip rather than another button:
   there is one primary action on these pages and it is the one in the form. */
.hxm-acc-auth__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  justify-content: center;
  padding: 15px var(--acc-pad);
  border-top: var(--acc-line);
  border-radius: 0 0 var(--acc-r) var(--acc-r);
  background: var(--hxm-mist);
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-3xs);
}

/* Reassurance under the card, outside it — not a form field, so not in the
   box that holds them. */
.hxm-acc-auth__aside {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 42ch;
  margin: 18px auto 0;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-label);
  line-height: 1.55;
  text-align: left;
}

.hxm-acc-auth__aside svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  color: var(--hxm-leaf);
}

.hxm-acc-auth__aside a {
  color: var(--hxm-green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hxm-acc-auth__aside a:hover { color: var(--hxm-forest); }

/* Two classes deep on purpose. This div carries WooCommerce's .form-row as
   well, and the field rule above stacks every .form-row into a column -- which
   put "Remember me" and "Forgot password?" on separate centred lines. */
.hxm-acc-auth .hxm-acc-auth__row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
}

.hxm-acc-auth__submit { margin: 0; }


/* ==========================================================================
   11. VIEW ORDER AND DOWNLOADS
   ========================================================================== */

.hxm-acc-vieworder { margin-bottom: var(--acc-gap); }

.hxm-acc-vieworder__head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
  padding: var(--acc-pad);
  border-bottom: var(--acc-line);
}

.hxm-acc-vieworder__no {
  margin: 0;
  color: var(--hxm-ink);
  font-family: var(--hxm-font-body);
  font-size: var(--hxm-fs-md);
  font-weight: 700;
}

.hxm-acc-vieworder__date {
  display: block;
  margin-top: 3px;
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-label);
}

.hxm-acc-vieworder__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: var(--acc-pad);
}

.hxm-acc-vieworder__facts dt {
  color: var(--hxm-muted);
  font-family: var(--hxm-font-label);
  font-size: var(--hxm-fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--hxm-ls-label);
  text-transform: uppercase;
}

.hxm-acc-vieworder__facts dd {
  margin: 4px 0 0;
  color: var(--hxm-ink);
  font-size: var(--hxm-fs-2xs);
  font-weight: 700;
}

.hxm-acc-vieworder__back { margin: var(--acc-gap) 0 0; }

.hxm-acc-notes { margin-bottom: var(--acc-gap); }
.hxm-acc-notes__list { margin: 0; padding: var(--acc-pad); display: grid; gap: 14px; }
.hxm-acc-notes__list li { padding: 14px 16px; border: var(--acc-line); border-radius: var(--acc-r-sm); background: var(--hxm-paper); }
.hxm-acc-notes__list .meta { margin: 0 0 4px; color: var(--hxm-muted); font-size: var(--hxm-fs-label-sm); }
.hxm-acc-notes__list .description p { margin: 0; font-size: var(--hxm-fs-2xs); }

/* WooCommerce's order table, the totals and the customer details keep their
   own markup; they get the card treatment and a scroll container so a wide
   table can never widen the page. */
.hxm-acc-orderdetail > section,
.hxm-acc-orderdetail > .woocommerce-order-details,
.hxm-acc-orderdetail > .woocommerce-customer-details,
.hxm-acc-table {
  margin-bottom: var(--acc-gap);
  padding: var(--acc-pad);
  border: var(--acc-line);
  border-radius: var(--acc-r);
  background: var(--hxm-white);
  box-shadow: var(--acc-shadow);
  overflow-x: auto;
}

.hxm-acc-orderdetail h2,
.hxm-acc-orderdetail h3 {
  margin: 0 0 14px;
  color: var(--hxm-ink);
  font-family: var(--hxm-font-body);
  font-size: var(--hxm-fs-md);
  font-weight: 700;
}

.hxm-acc-orderdetail table,
.hxm-acc-table table { width: 100%; }

.hxm-acc-orderdetail address {
  color: var(--hxm-muted);
  font-size: var(--hxm-fs-2xs);
  font-style: normal;
  line-height: 1.7;
}


/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */

/* --- ≤1200: the sidebar narrows before the content does ------------------ */

@media (max-width: 1200px) {
  .hxm-acc-section { --acc-nav-w: 232px; }
}

/* --- ≤1024: three counters would orphan one, so two rows of two ---------- */

@media (max-width: 1024px) {
  .hxm-acc-section { --acc-nav-w: 214px; }
  .hxm-acc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hxm-acc-dash__split { grid-template-columns: minmax(0, 1fr); }
  .hxm-acc-banner { grid-template-columns: auto minmax(0, 1fr); }
  .hxm-acc-banner__btn { grid-column: 2; justify-self: start; }
}

/* --- ≤900: one column, sidebar becomes a scroller ------------------------
   Nav above the content, support card below it. Same DOM, different rows —
   nothing is duplicated and nothing is hidden.                             */

@media (max-width: 900px) {
  .hxm-acc {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--acc-gap);
  }

  .hxm-acc__nav  { grid-column: 1; grid-row: 1; }
  .hxm-acc__main { grid-column: 1; grid-row: 2; }
  .hxm-acc__help { grid-column: 1; grid-row: 3; }

  .hxm-acc__nav-label { display: none; }

  /* The card becomes a rail of pills. */
  .hxm-acc__nav-list {
    display: flex;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .hxm-acc__nav-list::-webkit-scrollbar { display: none; }
  .hxm-acc__nav-list > li { flex: none; }
  .hxm-acc__nav-list > li + li { border-top: 0; }

  .hxm-acc__nav-link {
    min-height: 42px;   /* a thumb, not a cursor */
    padding: 9px 15px;
    border: var(--acc-line);
    border-radius: var(--hxm-r-pill);
    background: var(--hxm-white);
    font-size: var(--hxm-fs-3xs);
    white-space: nowrap;
  }

  .hxm-acc__nav-ico { width: 16px; height: 16px; }

  .hxm-acc__nav-list > li.is-active > .hxm-acc__nav-link,
  .hxm-acc__nav-link[aria-current="page"] { border-color: var(--hxm-leaf); }

  /* Compact head: back arrow, title, one action. */
  .hxm-acc__back,
  .hxm-acc__head-action { display: flex; }

  .hxm-acc__title-lead--sm { display: inline; }
  .hxm-acc__title-lead--lg { display: none; }

  .hxm-acc-form__split,
  .hxm-acc-auth__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- ≤768: tablet down --------------------------------------------------- */

@media (max-width: 768px) {
  .hxm-acc-section { --acc-r: 12px; --acc-pad: 18px; }

  /* Every control on a touch screen clears the 44px target. */
  .hxm-acc-btn { min-height: 46px; }

  .hxm-acc-addresses { grid-template-columns: minmax(0, 1fr); }

  /* Counters become rows with the mark the design gives them here. */
  .hxm-acc-stats { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  .hxm-acc-stat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 14px;
    align-items: center;
    padding: 14px 16px;
  }

  .hxm-acc-stat__ico {
    display: grid;
    place-items: center;
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    border-radius: var(--acc-r-sm);
    background: var(--hxm-green-soft);
    color: var(--hxm-green);
  }

  .hxm-acc-stat__ico svg { width: 19px; height: 19px; }

  .hxm-acc-stat__label { grid-column: 2; font-size: var(--hxm-fs-label-sm); }

  .hxm-acc-stat__value {
    grid-column: 2;
    margin-top: 0;
    font-size: 1.375rem;   /* 22 — a row, not a tile */
  }

  .hxm-acc-stat__note {
    grid-column: 2;
    margin-top: 4px;
  }

  /* Order card stacks: header, thumbs, figures, then a full-width action. */
  .hxm-acc-order__body { grid-template-columns: minmax(0, 1fr); gap: 14px; }

  .hxm-acc-order__thumbs { gap: 8px; }
  .hxm-acc-order__thumb { width: 52px; height: 52px; }

  .hxm-acc-order__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
    justify-content: flex-start;
    text-align: left;
  }

  .hxm-acc-order__actions { justify-content: stretch; }
  .hxm-acc-order__actions > * { flex: 1 1 140px; }

  .hxm-acc-vieworder__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hxm-acc-banner {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px 14px;
    padding: 16px;
  }

  .hxm-acc-banner__btn { grid-column: 1 / -1; justify-self: stretch; width: 100%; }

  .hxm-acc-link__long { display: none; }
  .hxm-acc-link__short { display: inline; }

  .hxm-acc-recent__list,
  .hxm-acc-actions__list { padding: 14px; }

  .hxm-acc-fields__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- ≤576: phone --------------------------------------------------------- */

@media (max-width: 576px) {
  .hxm-acc-section {
    padding-block: 20px 44px;
    --acc-gap: 14px;
    --acc-pad: 16px;
  }

  .hxm-acc__head { gap: 10px; margin-bottom: 16px; }
  .hxm-acc__back { width: 42px; height: 42px; }
  .hxm-acc__head-action { height: 42px; padding: 0 13px; }

  .hxm-acc-card__head { padding: var(--acc-pad) var(--acc-pad) 0; }

  /* A recent-order row is too much for one line at this width. */
  .hxm-acc-recent__link {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
  }

  .hxm-acc-recent__total { grid-column: 2; grid-row: 1; }
  .hxm-acc-recent__link .hxm-acc-badge { grid-column: 2; grid-row: 2; justify-self: end; }

  .hxm-acc-order__head { padding: 14px 16px; }
  .hxm-acc-order__actions > * { flex: 1 1 100%; }

  .hxm-acc-address__actions { grid-template-columns: minmax(0, 1fr); }

  .hxm-acc-vieworder__facts { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .hxm-acc-pager { flex-wrap: wrap; gap: 8px; }
  .hxm-acc-pager__count { order: 3; width: 100%; }

  .hxm-acc-empty { padding: 32px 18px; }
  .hxm-acc-empty__ico { width: 48px; height: 48px; }
}

/* --- ≤380: the narrowest phones ------------------------------------------ */

@media (max-width: 380px) {
  .hxm-acc-order__thumb { width: 46px; height: 46px; }
  .hxm-acc-action { gap: 10px; }
  .hxm-acc-action__ico { width: 34px; height: 34px; }
  .hxm-acc-stat__ico { width: 36px; height: 36px; }
}

/* --- motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hxm-acc *,
  .hxm-acc-auth * { transition-duration: 1ms !important; }
}