/*
 * Avista Commerce — My Account UI (IÐNÚ-derived dashboard, Scheme C / brown).
 *
 * A theme-overridable FALLBACK skin: every colour, font and radius is driven
 * from steindal's Breakdance `--bde-*` design tokens, with sensible fallbacks so
 * it still renders standalone (bare site / breakdance-zero / innbak). A theme
 * that ships its own myaccount templates renders different markup and these
 * `.acma-*` rules simply no-op; a theme that only retokens gets reskinned for
 * free. Derived shades use color-mix so they track whatever ink/gold the theme
 * sets. Enqueued on is_account_page() as handle `acma-account`.
 */

.acma-account,
.acma-dashboard,
.acma-subusers {
  /* Fallbacks are the reference design's OWN palette (IÐNÚ — warm ink / red /
     cream), so a token-less or non-Breakdance site renders the intrinsic design.
     A Breakdance host overrides via its --bde-* tokens (steindal → Scheme C brown),
     so these fallbacks never show on steindal. */
  --acma-ink: var(--bde-body-text-color, #1a1612);
  --acma-accent: var(--bde-brand-primary-color, #b5202a);
  --acma-page: var(--bde-background-color, #faf6f0);
  --acma-card-bg: #fff;
  --acma-font: var(--bde-body-font-family, "Figtree", system-ui, sans-serif);

  --acma-line: color-mix(in srgb, var(--acma-ink) 12%, transparent);
  --acma-muted: color-mix(in srgb, var(--acma-ink) 55%, transparent);
  --acma-faint: color-mix(in srgb, var(--acma-ink) 40%, transparent);
  --acma-paper: color-mix(in srgb, var(--acma-ink) 6%, var(--acma-card-bg));
  --acma-hover: color-mix(in srgb, var(--acma-ink) 4%, var(--acma-card-bg));
  --acma-accent-tint: color-mix(in srgb, var(--acma-accent) 24%, var(--acma-card-bg));
  --acma-accent-ink: color-mix(in srgb, var(--acma-accent) 55%, var(--acma-ink));

  --acma-radius-card: var(--bde-woo-wrappers__border-radius, 12px);
  --acma-radius-nav: var(--bde-woo-buttons-and-links__nav-border-radius, 6px);
  --acma-radius-btn: var(--bde-button-border-radius, 8px);

  font-family: var(--acma-font);
  color: var(--acma-ink);
}

.acma-account *,
.acma-dashboard *,
.acma-subusers * {
  box-sizing: border-box;
}

/* ---- Two-column shell ---------------------------------------------------- */
/* 12-column grid like the source design (sidebar col-span-3 / main col-span-9),
   so the sidebar is a PROPORTION of the width (~25%), not a frozen pixel width —
   labels like "Pantanir" / "Upplýsingar um reikning" get room as the page widens. */
.acma-account {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
  width: 100%;
}

.acma-account__sidebar {
  grid-column: span 3;
}

.acma-account__main {
  grid-column: span 9;
}

/* In-scope AJAX navigation (account.js): dim the area while the next view loads. */
.acma-account.acma-loading {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

/*
 * Use more of the page width than the host's default section cap. Two parts:
 *
 * 1) Widen the section that holds the dashboard beyond Breakdance's default
 *    1440px cap. Breakdance sizes sections with `max-width: var(--bde-section-width)`,
 *    so we override that VARIABLE on the scoped element (rather than fight the
 *    max-width rule's specificity) — it recomputes through Breakdance's own rule.
 *    Scoped via :has so only this section grows — header/footer/other pages keep
 *    the theme width — and so it no-ops on a theme that overrides the account
 *    templates (no .acma-account → no match). Caps to the viewport on small screens.
 *
 * 2) WooCommerce wraps the content in a `display:flex` `.woocommerce` div, so a
 *    grid child sizes to its CONTENT, not the container — leaving dead space on
 *    the right. Force the wrapper + grid to fill the (now wider) section.
 */
.section-container:has(.acma-account) {
  --bde-section-width: min(1680px, calc(100vw - 96px));
}

.woocommerce:has(> .acma-account) {
  width: 100%;
}

/* Neutralise WooCommerce's default floated my-account layout. WC ships
   `.woocommerce-account .woocommerce-MyAccount-navigation/-content { float; width:% }`
   (specificity 0,2,0); our resets use 0,3,0 so they win regardless of load order.
   The nav needs an explicit width:100% — width:auto won't stretch the flex item,
   leaving the nav card stuck at WC's percentage width and clipping the labels. */
.acma-account .acma-account__sidebar .woocommerce-MyAccount-navigation {
  float: none;
  width: 100%;
  margin: 0;
}

.acma-account .acma-account__main.woocommerce-MyAccount-content {
  float: none;
  width: auto;
  margin: 0;
}

.acma-account__sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.acma-account__card {
  background: var(--acma-card-bg);
  border: 1px solid var(--acma-line);
  border-radius: var(--acma-radius-card);
}

/* ---- Profile card -------------------------------------------------------- */
.acma-account__profile-card {
  padding: 16px;
}

.acma-account__profile {
  display: flex;
  align-items: center;
  gap: 11px;
}

.acma-account__avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--acma-paper);
  color: var(--acma-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.acma-account__profile-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.acma-account__profile-name {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acma-account__profile-sub {
  font-size: 12px;
  color: var(--acma-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acma-account__profile-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--acma-line);
  font-size: 12px;
  color: var(--acma-muted);
}

.acma-account__since {
  font-weight: 500;
  color: var(--acma-ink);
}

/* ---- Navigation ---------------------------------------------------------- */
.acma-nav.woocommerce-MyAccount-navigation {
  background: var(--acma-card-bg);
  border: 1px solid var(--acma-line);
  border-radius: var(--acma-radius-card);
  padding: 6px;
  font-size: 14px;

  /* Breakdance renders the Woo nav from its own variables (with selectors that
     outrank ours); drive them so it paints Scheme C itself. */
  --bde-woo-buttons-and-links__nav-link-color: var(--acma-muted);
  --bde-woo-buttons-and-links__nav-link-color-active: var(--acma-card-bg);
  --bde-woo-buttons-and-links__nav-link-background-active: var(--acma-ink);
}

.acma-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.acma-nav li {
  margin: 1px 0;
  border: 0;
}

.acma-nav li a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--acma-radius-nav);
  color: var(--acma-muted);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.acma-nav__icon {
  flex: 0 0 auto;
  opacity: 0.85;
}

.acma-nav__label {
  flex: 1 1 auto;
  min-width: 0;
}

.acma-nav__badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--acma-muted);
  background: var(--acma-paper);
  padding: 1px 8px;
  border-radius: 10px;
}

.acma-nav li a:hover {
  background: var(--acma-hover);
  color: var(--acma-ink);
}

/* Active pill. High specificity (0,4,3) to beat Breakdance's
   `.breakdance-woocommerce .woocommerce-MyAccount-navigation ul li.is-active a`
   (0,3,3); !important guards against load-order ties. */
.acma-account .acma-nav.woocommerce-MyAccount-navigation ul li.is-active a,
.acma-account .acma-nav.woocommerce-MyAccount-navigation ul li a[aria-current="page"] {
  background-color: var(--acma-ink) !important;
  color: var(--acma-card-bg) !important;
}

.acma-nav li.is-active a .acma-nav__badge,
.acma-nav li a[aria-current="page"] .acma-nav__badge {
  color: var(--acma-card-bg);
  background: color-mix(in srgb, var(--acma-card-bg) 22%, transparent);
}

/* ---- Dashboard header ---------------------------------------------------- */
.acma-dash__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}

.acma-dash__eyebrow {
  margin: 0;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--acma-accent-ink);
}

.acma-dash__title {
  margin: 6px 0 0;
  font-family: var(--acma-font);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--acma-ink);
}

.acma-dash__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---- Theme link-colour leak override ------------------------------------- */
/* The host Breakdance theme recolours content-area `.woocommerce a` links to a
   pale tint via `color` alone — specificity (0,1,1), no !important, and
   -webkit-text-fill-color then defaults to that currentColor. That beats these
   single-class `.acma-*` link rules and leaves order links, filter pills and
   button labels near-unreadable (pale blue on cream). Re-assert each element's
   own RESTING colour at (0,2,0) via the `.acma-account` scope, which clears the
   theme the same way its own is-active pill does. Deliberately placed before the
   component rules: the existing (0,2,0) :hover / .is-active rules come later and
   win the tie, so those states stay intact. Nav links already win via their own
   (0,1,2) rule; the `.acma-action` row controls have their own override. On a
   theme with no such leak these are harmless no-ops (same values as the base
   rules). Mirrors the nav active-pill override earlier in this file. */
.acma-account .acma-btn { color: var(--acma-ink); }
.acma-account .acma-btn--solid,
.acma-account .acma-btn--primary { color: var(--acma-card-bg); }
.acma-account .acma-order-id,
.acma-account .acma-card__link { color: var(--acma-ink); }
.acma-account .acma-orders-table__view { color: var(--acma-muted); }
.acma-account .acma-pill { color: var(--acma-muted); }
.acma-account .acma-addr-notice__link { color: var(--acma-accent-ink); }

/* ---- Buttons ------------------------------------------------------------- */
.acma-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--acma-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  padding: 9px 15px;
  border-radius: var(--acma-radius-btn);
  border: 1px solid var(--acma-line);
  color: var(--acma-ink);
  background: var(--acma-card-bg);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.acma-btn:hover {
  border-color: color-mix(in srgb, var(--acma-ink) 30%, transparent);
}

.acma-btn--solid {
  background: var(--acma-ink);
  border-color: var(--acma-ink);
  color: var(--acma-card-bg);
}

.acma-btn--solid:hover {
  background: color-mix(in srgb, var(--acma-ink) 85%, #000);
  color: var(--acma-card-bg);
}

.acma-btn--ghost {
  padding: 5px 12px;
  border-color: var(--acma-accent);
}

.acma-btn--ghost:hover {
  background: var(--acma-accent);
  border-color: var(--acma-accent);
  color: var(--acma-card-bg);
}

/* Prominent CTA (the comp's solid button, e.g. "Bæta við heimilisfangi"). Uses the
   ink fill — like the account area's other solids — not the raw accent, which on a
   light-accent theme (steindal's gold #BCA97F) would be far too low-contrast. */
.acma-btn--primary {
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  background: var(--acma-ink);
  border-color: var(--acma-ink);
  color: var(--acma-card-bg);
}

.acma-btn--primary:hover {
  background: color-mix(in srgb, var(--acma-ink) 85%, #000);
  border-color: color-mix(in srgb, var(--acma-ink) 85%, #000);
  color: var(--acma-card-bg);
}

/* ---- KPI cards ----------------------------------------------------------- */
.acma-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.acma-card {
  background: var(--acma-card-bg);
  border: 1px solid var(--acma-line);
  border-radius: var(--acma-radius-card);
}

.acma-kpi {
  padding: 16px;
}

.acma-kpi__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--acma-muted);
}

.acma-kpi__delta {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--acma-paper);
  color: var(--acma-muted);
  letter-spacing: 0;
}

.acma-kpi__delta--up {
  background: var(--acma-accent-tint);
  color: var(--acma-accent-ink);
}

.acma-kpi__delta--down {
  background: color-mix(in srgb, #b3261e 14%, var(--acma-card-bg));
  color: #8a1d17;
}

.acma-kpi__value {
  margin-top: 10px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.acma-kpi__sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--acma-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- Recent orders card -------------------------------------------------- */
.acma-recent-orders {
  padding: 18px 20px 8px;
}

.acma-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.acma-card__head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--acma-ink);
}

.acma-card__link {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--acma-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--acma-accent);
  white-space: nowrap;
}

.acma-card__link:hover {
  color: var(--acma-accent-ink);
}

.acma-empty {
  color: var(--acma-muted);
  padding: 6px 0 14px;
}

.acma-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.acma-orders-table thead th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--acma-faint);
  padding: 4px 8px 8px;
}

.acma-orders-table tbody td {
  padding: 11px 8px;
  border-top: 1px solid var(--acma-line);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.acma-orders-table .acma-num {
  text-align: right;
}

.acma-order-id {
  font-weight: 500;
  color: var(--acma-ink);
  text-decoration: none;
}

.acma-order-id:hover {
  color: var(--acma-accent-ink);
}

.acma-placed-by {
  display: block;
  font-size: 11px;
  color: var(--acma-muted);
}

/* Customer kennitala sub-line under the customer name (Mínar sölur). */
.acma-cust-ssn {
  display: block;
  font-size: 11px;
  color: var(--acma-muted);
  font-variant-numeric: tabular-nums;
}

/* Salesperson sales overview block on the dashboard (below own order history). */
.acma-sales-overview {
  margin-top: 24px;
}
.acma-sales-overview__kpis {
  margin-bottom: 16px;
}

/* ---- Status pills -------------------------------------------------------- */
.acma-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 11px;
  background: var(--acma-paper);
  color: var(--acma-muted);
  white-space: nowrap;
}

/* Colour-coded dot before the label (inherits the pill's text colour), as in the design. */
.acma-status::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.acma-status--processing,
.acma-status--pending,
.acma-status--on-hold {
  background: var(--acma-accent-tint);
  color: var(--acma-accent-ink);
}

.acma-status--completed {
  background: color-mix(in srgb, var(--acma-ink) 10%, var(--acma-card-bg));
  color: var(--acma-ink);
}

.acma-status--cancelled,
.acma-status--failed,
.acma-status--refunded {
  background: color-mix(in srgb, #b3261e 12%, var(--acma-card-bg));
  color: #8a1d17;
}

/* Ledger (Reikningar) invoice status. Semantic, theme-independent colours so the
   meaning reads the same on every host (matches the comp): paid = green, due
   (unpaid, within terms) = amber, overdue = red. */
.acma-status--paid {
  background: color-mix(in srgb, #1e7d4f 13%, var(--acma-card-bg));
  color: #1a6b43;
}

.acma-status--due {
  background: color-mix(in srgb, #c2860b 16%, var(--acma-card-bg));
  color: #8a5d06;
}

.acma-status--overdue {
  background: color-mix(in srgb, #b3261e 13%, var(--acma-card-bg));
  color: #8a1d17;
}

/* ---- Orders list page (Pantanir) ----------------------------------------- */
.acma-ofilter {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

.acma-ofilter__controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* The search input + sort select are NOT wrapped in a <form> (see the template)
   so Breakdance's `.woocommerce form …` field styling can't reach them; scoped
   here to override BD's generic input styling. */
.acma-ofilter .acma-ofilter__search,
.acma-ofilter .acma-ofilter__sort {
  font-family: var(--acma-font);
  font-size: 13.5px;
  color: var(--acma-ink);
  border: 1px solid var(--acma-line);
  border-radius: var(--acma-radius-btn);
  padding: 9px 12px;
  margin: 0;
  box-sizing: border-box;
}

.acma-ofilter .acma-ofilter__search {
  flex: 1 1 240px;
  min-width: 0;
  width: auto;
  max-width: none;
  background: var(--acma-paper);
}

.acma-ofilter .acma-ofilter__sort {
  flex: 0 0 auto;
  width: auto;
  background: var(--acma-card-bg);
  cursor: pointer;
}

.acma-ofilter .acma-ofilter__search:focus,
.acma-ofilter .acma-ofilter__sort:focus {
  outline: none;
  border-color: var(--acma-accent);
}

.acma-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.acma-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--acma-muted);
  background: var(--acma-card-bg);
  border: 1px solid var(--acma-line);
  border-radius: 999px;
  padding: 5px 13px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.acma-pill:hover {
  border-color: color-mix(in srgb, var(--acma-ink) 30%, transparent);
  color: var(--acma-ink);
}

.acma-pill__count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--acma-faint);
}

.acma-pill.is-active {
  background: var(--acma-ink);
  border-color: var(--acma-ink);
  color: var(--acma-card-bg);
}

.acma-pill.is-active .acma-pill__count {
  color: color-mix(in srgb, var(--acma-card-bg) 60%, transparent);
}

.acma-orders-list {
  padding: 6px 20px 14px;
}

.acma-orders-table__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  white-space: nowrap;
}

.acma-orders-table__view {
  color: var(--acma-muted);
  text-decoration: none;
  font-weight: 500;
}

.acma-orders-table__view:hover {
  color: var(--acma-ink);
}

/* ---- Per-row action controls (Pantanir / Reikningar tables) -------------- */
/* Coordinated, aligned row actions: one inline text-action (the primary) plus
   an optional kebab <details> overflow menu for the rest. The kebab is a
   fixed-size square pinned right; rows with no overflow reserve its footprint
   with .acma-actions__spacer, so the primary action and the kebab column-align
   across every row regardless of how many actions each has. Supersedes the old
   mix of a plain "Skoða" link and bordered ghost buttons. */

/* Subtle text-action — no border/fill, muted ink, hover tint. Shared by the
   inline primary, each item in the kebab menu, and the ledger's "Sækja reikning". */
.acma-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--acma-font);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  padding: 5px 9px;
  border: 0;
  border-radius: 7px;
  color: var(--acma-muted);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.acma-action:hover,
.acma-action:focus-visible {
  color: var(--acma-ink);
  background: var(--acma-paper);
}

/* The host theme colours .woocommerce a links (color:…!important, plus a
   -webkit-text-fill-color that paints the glyph), which would otherwise render
   these <a> text-actions in the theme's link colour instead of the muted/ink
   treatment above. Re-assert it at a specificity that beats `.woocommerce a`;
   !important guards load-order ties and -webkit-text-fill-color wins the glyph.
   Mirrors the nav active-pill override earlier in this file. (Buttons like the
   "Á lista" trigger aren't <a>s, so the theme rule never reaches them.) */
.acma-orders-table__actions .acma-action {
  color: var(--acma-muted) !important;
  -webkit-text-fill-color: var(--acma-muted) !important;
}

.acma-orders-table__actions .acma-action:hover,
.acma-orders-table__actions .acma-action:focus-visible {
  color: var(--acma-ink) !important;
  -webkit-text-fill-color: var(--acma-ink) !important;
}

/* Kebab overflow — a native <details> disclosure, so it opens without any JS
   and is keyboard-operable out of the box. */
.acma-actions-more {
  position: relative;
  display: inline-flex;
}

.acma-actions-more__toggle {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  color: var(--acma-faint);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.acma-actions-more__toggle::-webkit-details-marker { display: none; }
.acma-actions-more__toggle::marker { content: ""; }

.acma-actions-more__toggle:hover,
.acma-actions-more__toggle:focus-visible,
.acma-actions-more[open] .acma-actions-more__toggle {
  color: var(--acma-ink);
  background: var(--acma-paper);
}

.acma-actions-more__toggle svg {
  display: block;
  width: 18px;
  height: 18px;
}

.acma-actions-more__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 176px;
  padding: 6px;
  background: var(--acma-card-bg);
  border: 1px solid var(--acma-line);
  border-radius: 10px;
  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--acma-ink) 40%, transparent);
}

/* Menu items fill the panel and left-align. */
.acma-actions-more__menu .acma-action {
  justify-content: flex-start;
  width: 100%;
}

/* The "Á lista" trigger ships its own bordered treatment (shopping-list-add.css);
   inside the actions cell flatten it to match the other text-actions (its "+"
   ::before glyph stays). Two-class selector so it wins regardless of load order. */
.acma-orders-table__actions .acma-add-to-list {
  margin: 0;
  padding: 5px 9px;
  font-size: 12.5px;
  border: 0;
  color: var(--acma-muted);
}

.acma-orders-table__actions .acma-add-to-list:hover,
.acma-orders-table__actions .acma-add-to-list:focus-visible {
  color: var(--acma-ink);
  background: var(--acma-paper);
  border-color: transparent;
}

/* Reserve the kebab's footprint on rows with no overflow menu, so the inline
   primary stays column-aligned with the rows that do have one. */
.acma-actions__spacer {
  display: inline-block;
  width: 30px;
  height: 30px;
}

/* ≤900px the .acma-orders-list becomes an overflow-x scroll container (see the
   layout media query below), which would clip an absolutely-positioned popover —
   so drop the menu into the flow, mirroring .acma-invite__panel. */
@media (max-width: 900px) {
  .acma-actions-more {
    flex-direction: column;
    align-items: flex-end;
  }
  .acma-actions-more__menu {
    position: static;
    min-width: 0;
    margin-top: 4px;
    padding: 4px 0 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
}

.acma-orders-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--acma-line);
  font-size: 12.5px;
  color: var(--acma-muted);
}

.acma-orders-pager__nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.acma-orders-pager__pos {
  font-variant-numeric: tabular-nums;
}

/* ---- Ledger page (Reikningar) -------------------------------------------- */
/* The secondary "Hreyfingar" (account movements) card, set off below the
   invoices table. */
.acma-ledger__section {
  margin-top: 18px;
}

.acma-ledger__note {
  font-size: 12px;
  color: var(--acma-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.acma-ledger__notice {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* Cold-cache loader (auto-warms via account.js initLedgerRefresh). */
.acma-ledger__loading {
  display: flex;
  align-items: center;
  gap: 11px;
}

.acma-ledger__loading .acma-empty {
  padding: 0;
}

.acma-spinner {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--acma-line);
  border-top-color: var(--acma-accent);
  border-radius: 50%;
  animation: acma-spin 0.7s linear infinite;
}

@keyframes acma-spin {
  to { transform: rotate(360deg); }
}

/* "Endurnýja" refresh control + last-updated label in the header. */
.acma-ledger__updated {
  font-size: 12px;
  color: var(--acma-faint);
  font-variant-numeric: tabular-nums;
}

.acma-refresh-icon {
  flex: 0 0 auto;
}

.acma-btn.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.acma-btn.is-loading .acma-refresh-icon {
  animation: acma-spin 0.7s linear infinite;
}

/* ---- Account statement (date-ranged Hreyfingar) -------------------------- */
.acma-stmt__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.acma-stmt__dates {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.acma-stmt__field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.acma-stmt__flabel {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--acma-faint);
}

/* Form-less date inputs (no <form>, per the Breakdance form gotcha); scoped to
   override BD's generic input styling. */
.acma-stmt .acma-stmt__input {
  font-family: var(--acma-font);
  font-size: 13.5px;
  color: var(--acma-ink);
  border: 1px solid var(--acma-line);
  border-radius: var(--acma-radius-btn);
  padding: 8px 11px;
  margin: 0;
  background: var(--acma-paper);
  box-sizing: border-box;
}

.acma-stmt .acma-stmt__input:focus {
  outline: none;
  border-color: var(--acma-accent);
}

.acma-stmt__presets .acma-pill {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  font-family: var(--acma-font);
}

.acma-ledger-statement.acma-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.acma-stmt__period {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--acma-muted);
  margin-bottom: 12px;
}

.acma-stmt__updated {
  color: var(--acma-faint);
  font-variant-numeric: tabular-nums;
}

.acma-stmt__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--acma-paper);
  border-radius: var(--acma-radius-card);
}

.acma-stmt__sumcell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.acma-stmt__sumlabel {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--acma-muted);
}

.acma-stmt__sumval {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--acma-ink);
}

.acma-stmt-table .acma-stmt__carry td {
  color: var(--acma-muted);
  font-weight: 500;
  border-top: none;
}

.acma-stmt-table tfoot .acma-stmt__totals td {
  font-weight: 600;
  color: var(--acma-ink);
  border-top: 2px solid var(--acma-line);
}

/* ---- Notendur (sub-users / team) ----------------------------------------- */
/* Reuses the dashboard/Pantanir primitives (.acma-card, .acma-kpis, .acma-pills,
   .acma-orders-table, .acma-status); the rules below are the member-row, role
   chip, activity, invite popover and form specifics. Forms are scoped tightly
   (.acma-subusers .acma-form …) so Breakdance's `.woocommerce form …` field
   styling can't reach them (the BD-form gotcha). */

/* Invite popover — a native <details> whose <summary> is the action button. */
.acma-invite {
  position: relative;
}

.acma-invite__toggle {
  list-style: none;
  cursor: pointer;
}

.acma-invite__toggle::-webkit-details-marker {
  display: none;
}

.acma-invite__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: min(440px, 92vw);
  padding: 18px;
  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--acma-ink) 40%, transparent);
}

.acma-invite__title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
}

/* On narrow screens drop the popover into the flow so it never overflows. */
@media (max-width: 640px) {
  .acma-invite,
  .acma-dash__actions {
    width: 100%;
  }
  .acma-invite__panel {
    position: static;
    width: 100%;
    margin-top: 10px;
  }
}

/* ---- Bespoke forms (create / edit) -------------------------------------- */
.acma-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.acma-form-card {
  padding: 20px;
  max-width: 620px;
}

:is(.acma-subusers, .acma-addresses) .acma-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
}

:is(.acma-subusers, .acma-addresses) .acma-field > label,
:is(.acma-subusers, .acma-addresses) .acma-field-label {
  display: block;
  text-align: left;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--acma-muted);
}

.acma-req {
  color: var(--acma-accent);
}

:is(.acma-subusers, .acma-addresses) .acma-field--split {
  flex-direction: row;
  gap: 12px;
}

:is(.acma-subusers, .acma-addresses) .acma-field--split > span {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Scoped input reset — beats Breakdance's generic `.woocommerce form` input rules. */
:is(.acma-subusers, .acma-addresses) .acma-input {
  font-family: var(--acma-font);
  font-size: 14px;
  line-height: 1.4;
  color: var(--acma-ink);
  background: var(--acma-paper);
  border: 1px solid var(--acma-line);
  border-radius: var(--acma-radius-btn);
  padding: 9px 12px;
  margin: 0;
  width: 100%;
  max-width: none;
  display: block;
  box-sizing: border-box;
}

:is(.acma-subusers, .acma-addresses) textarea.acma-input {
  resize: vertical;
  min-height: 52px;
}

:is(.acma-subusers, .acma-addresses) .acma-input:focus {
  outline: none;
  border-color: var(--acma-accent);
}

:is(.acma-subusers, .acma-addresses) .acma-input:disabled {
  color: var(--acma-muted);
  background: var(--acma-hover);
  cursor: not-allowed;
}

.acma-help {
  font-size: 11.5px;
  color: var(--acma-faint);
  line-height: 1.4;
}

.acma-form__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Delivery-location + permission checkbox lists. */
.acma-subusers .acma-checks {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 190px;
  overflow-y: auto;
}

.acma-subusers .acma-check,
.acma-subusers .acma-perm {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 13.5px;
  color: var(--acma-ink);
  cursor: pointer;
}

.acma-subusers .acma-check input,
.acma-subusers .acma-perm input {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  accent-color: var(--acma-ink);
}

/* ---- Role presets -------------------------------------------------------- */
.acma-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 4px;
}

.acma-subusers .acma-preset {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  font-family: var(--acma-font);
}

.acma-perm-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--acma-paper);
  border-radius: var(--acma-radius-btn);
}

/* ---- Member table -------------------------------------------------------- */
.acma-team-table td {
  vertical-align: middle;
}

.acma-member {
  display: flex;
  align-items: center;
  gap: 11px;
}

.acma-member__avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--acma-paper);
  color: var(--acma-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.acma-member__avatar--pending {
  background: color-mix(in srgb, var(--acma-accent) 14%, var(--acma-card-bg));
  color: var(--acma-accent-ink);
}

.acma-member__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.acma-member__name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--acma-ink);
}

.acma-member__email {
  font-size: 11.5px;
  color: var(--acma-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acma-member__you {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--acma-card-bg);
  background: var(--acma-ink);
  border-radius: 9px;
  padding: 1px 7px;
}

.acma-member__self {
  font-size: 11.5px;
  color: var(--acma-faint);
}

/* ---- Role chips ---------------------------------------------------------- */
.acma-role {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 11px;
  border-radius: 999px;
  white-space: nowrap;
  background: color-mix(in srgb, var(--acma-ink) 9%, var(--acma-card-bg));
  color: var(--acma-ink);
}

.acma-role--full {
  background: var(--acma-ink);
  color: var(--acma-card-bg);
}

.acma-role--viewer {
  background: var(--acma-accent-tint);
  color: var(--acma-accent-ink);
}

.acma-role--custom {
  background: transparent;
  color: var(--acma-muted);
  box-shadow: inset 0 0 0 1px var(--acma-line);
}

/* ---- Permission chips ---------------------------------------------------- */
.acma-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 320px;
}

.acma-chip {
  font-size: 11px;
  font-weight: 500;
  color: var(--acma-muted);
  background: var(--acma-paper);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}

.acma-chip--none {
  font-style: italic;
  color: var(--acma-faint);
  background: transparent;
}

/* ---- Activity + usage ---------------------------------------------------- */
.acma-activity {
  font-size: 12.5px;
  color: var(--acma-muted);
  white-space: nowrap;
}

.acma-activity.is-pending {
  color: var(--acma-accent-ink);
  font-weight: 500;
}

.acma-usage {
  font-size: 12.5px;
  color: var(--acma-ink);
  font-variant-numeric: tabular-nums;
}

.acma-usage.is-empty {
  color: var(--acma-faint);
}

/* ---- Pending invites ----------------------------------------------------- */
.acma-pending {
  list-style: none;
  margin: 0;
  padding: 6px 8px;
}

.acma-pending__row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 12px;
  border-top: 1px solid var(--acma-line);
}

.acma-pending__row:first-child {
  border-top: none;
}

.acma-pending__row .acma-member {
  flex: 1 1 240px;
  min-width: 0;
}

.acma-pending__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.acma-pending__role {
  font-size: 12px;
  color: var(--acma-muted);
}

.acma-pending__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.acma-inline-form {
  margin: 0;
}

/* Plain text-button (cancel / delete) — no Breakdance button chrome.
   Shared by the sub-users screens and the addresses page. */
.acma-subusers .acma-linkbtn,
.acma-addresses .acma-linkbtn {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: var(--acma-font);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--acma-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.acma-subusers .acma-linkbtn:hover,
.acma-addresses .acma-linkbtn:hover {
  color: var(--acma-ink);
}

.acma-subusers .acma-linkbtn--danger,
.acma-addresses .acma-linkbtn--danger {
  color: #8a1d17;
}

.acma-subusers .acma-linkbtn--danger:hover,
.acma-addresses .acma-linkbtn--danger:hover {
  color: #6e160f;
}

/* ---- Edit page header ---------------------------------------------------- */
.acma-backlink {
  margin: 0 0 12px;
  font-size: 12.5px;
}

.acma-backlink a {
  color: var(--acma-muted);
  text-decoration: none;
}

.acma-backlink a:hover {
  color: var(--acma-ink);
}

.acma-edit__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.acma-subuser-delete {
  margin: 16px 0 0;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .acma-account {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .acma-account__sidebar,
  .acma-account__main {
    grid-column: 1 / -1;
  }
  .acma-recent-orders,
  .acma-orders-list {
    overflow-x: auto;
  }
  .acma-pending__actions {
    margin-left: 0;
  }
  .acma-subusers .acma-field--split {
    flex-direction: column;
  }
  .acma-addr__actions {
    margin-left: 0;
    flex-basis: 100%;
  }
  .acma-addresses .acma-field-row {
    flex-direction: column;
    gap: 0;
  }
}

/* ---- Heimilisföng (addresses) -------------------------------------------- */
.acma-addresses {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Header: eyebrow + big display title + (B2C) primary CTA on one row. */
.acma-addr__head {
  align-items: center;
}

.acma-addresses .acma-dash__eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--acma-accent-ink); /* readable on a light-accent theme (gold) */
}

.acma-addresses .acma-dash__title {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* A small uppercase label sitting ABOVE each card. */
.acma-addr-section__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acma-muted);
}

.acma-addr-section__label svg {
  width: 15px;
  height: 15px;
}

/* Locations: ONE card; rows are flush, divided by a faint line. */
.acma-addr-list {
  overflow: hidden; /* clip the row dividers to the card radius */
}

.acma-addr-list > .acma-empty {
  margin: 0;
  padding: 20px;
}

.acma-addr {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--acma-ink) 7%, transparent);
}

.acma-addr:last-child {
  border-bottom: 0;
}

.acma-addr.is-default {
  background: color-mix(in srgb, var(--acma-accent) 5%, var(--acma-card-bg));
}

.acma-addr__num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--acma-card-bg);
  background: var(--acma-ink); /* ink fill (not the light gold accent) for contrast */
}

.acma-addr__body {
  min-width: 0;
  flex: 1 1 auto;
}

.acma-addr__name {
  margin: 0 0 3px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.acma-addr__lines {
  margin: 0;
  color: var(--acma-muted);
}

.acma-addr__contact {
  margin: 4px 0 0;
  color: var(--acma-faint);
  font-size: 0.9em;
}

.acma-addr__badge {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--acma-accent-tint);
  color: var(--acma-accent-ink);
}

.acma-addr__tag {
  font-size: 0.78em;
}

.acma-addr__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Row action "Breyta": neutral outline, not the accent ghost used elsewhere. */
.acma-addresses .acma-btn--ghost {
  padding: 6px 12px;
  border-radius: 6px;
  border-color: var(--acma-line);
  color: var(--acma-ink);
}

.acma-addresses .acma-btn--ghost:hover {
  background: var(--acma-paper);
  border-color: var(--acma-muted);
  color: var(--acma-ink);
}

/* In-place edit / add panels (plain divs, toggled via the [hidden] attr). */
.acma-addr-form[hidden] {
  display: none;
}

/* Per-row edit panel (inside a padded row). */
.acma-addr-form {
  flex-basis: 100%;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* The add panel is a direct child of the card → give it row-equivalent padding. */
.acma-addr-list > .acma-addr-form {
  margin-top: 0;
  padding: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--acma-ink) 7%, transparent);
}

.acma-addr-form__error {
  color: var(--acma-accent);
}

/* Split field pairs sit side by side (postcode/city, contact/phone). */
.acma-field-row {
  display: flex;
  gap: 16px;
}

.acma-field-row .acma-field {
  flex: 1 1 0;
}

/* Billing card. */
.acma-addr-billing {
  padding: 24px;
}

.acma-addr-billing .acma-addr__name {
  font-size: 16px;
  letter-spacing: normal;
}

.acma-addr__same {
  font-weight: 400;
  color: var(--acma-faint);
}

.acma-addr__metaline {
  margin: 8px 0 0;
  color: var(--acma-muted);
  font-size: 12px;
}

.acma-addr__billing-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* "Nota sérstakt reikningsheimilisfang" — an outline toggle button. */
.acma-addr__sep-billing {
  margin-right: auto;
  padding: 8px 12px;
  border: 1px solid var(--acma-line);
  border-radius: 8px;
  background: var(--acma-paper);
  font-family: var(--acma-font);
  font-size: 12.5px;
  color: var(--acma-ink);
  cursor: pointer;
}

.acma-addr__sep-billing.is-active {
  border-color: var(--acma-accent);
  color: var(--acma-accent-ink);
  background: var(--acma-accent-tint);
}

/* "Outside delivery routes" notice — a subtle inline banner, not a card. */
.acma-addr-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--acma-radius-card);
  background: color-mix(in srgb, var(--acma-accent) 8%, var(--acma-card-bg));
}

.acma-addr-notice__icon {
  flex-shrink: 0;
  color: var(--acma-accent-ink);
  line-height: 0;
}

.acma-addr-notice__body {
  flex: 1 1 auto;
}

.acma-addr-notice__title {
  margin: 0 0 2px;
  font-weight: 600;
}

.acma-addr-notice__text {
  margin: 0;
  color: var(--acma-muted);
  font-size: 0.92em;
}

.acma-addr-notice__link {
  flex-shrink: 0;
  align-self: center;
  font-weight: 600;
  color: var(--acma-accent-ink);
  white-space: nowrap;
}

/* ---- Shopping lists (Innkaupalistar) ------------------------------------- */
.acma-shopping-lists {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.acma-lists__head {
  margin-bottom: 2px;
}

.acma-lists__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--acma-ink);
}

.acma-lists__sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--acma-muted);
  max-width: 60ch;
}

/* Save-cart-as-list card. Breakdance ships
   `.breakdance-woocommerce .woocommerce-MyAccount-content form { flex-direction: column }`
   at specificity (0,2,1); this <form> must out-specify it, hence the
   .woocommerce-MyAccount-content ancestor (0,3,0). Same trap the Pantanir search
   input documents above — but that one dodged it by not being a <form>. */
.woocommerce-MyAccount-content .acma-shopping-lists .acma-lists__savecart {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding: 16px 18px;
  margin: 0;
  min-height: 0;
  height: auto;
}

.acma-lists__savecart-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.acma-lists__savecart-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--acma-ink);
}

.acma-lists__savecart-sub {
  font-size: 12px;
  color: var(--acma-muted);
  font-variant-numeric: tabular-nums;
}

.acma-lists__savecart-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 280px;
  min-width: 0;
  justify-content: flex-end;
}

/* Scoped input reset — beats Breakdance's generic `.woocommerce form` input rules. */
.acma-shopping-lists .acma-input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 320px;
  font-family: var(--acma-font);
  font-size: 14px;
  line-height: 1.4;
  color: var(--acma-ink);
  background: var(--acma-paper);
  border: 1px solid var(--acma-line);
  border-radius: var(--acma-radius-btn);
  padding: 9px 12px;
  margin: 0;
  box-sizing: border-box;
}

.acma-shopping-lists .acma-input:focus {
  outline: none;
  border-color: var(--acma-accent);
}

.acma-lists__empty {
  padding: 22px 20px;
  text-align: center;
}

.acma-lists__empty .acma-empty {
  padding: 0;
}

/* List cards. */
.acma-lists {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.acma-list-card {
  overflow: hidden;
}

.acma-list-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 15px 18px;
}

.acma-list-card__id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.acma-list-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--acma-ink);
  overflow-wrap: anywhere;
}

.acma-list-card__count {
  font-size: 12px;
  color: var(--acma-muted);
  font-variant-numeric: tabular-nums;
}

.acma-list-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.acma-shopping-lists .acma-list-card__form {
  margin: 0;
  display: inline-flex;
  min-height: 0;
}

.acma-list-card__toggle[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--acma-ink) 30%, transparent);
}

.acma-list-card__delete {
  color: var(--acma-muted);
}

.acma-list-card__delete:hover {
  color: #8a1d17;
  border-color: color-mix(in srgb, #b3261e 40%, transparent);
}

.acma-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Expanded item panel. */
.acma-list-card__items {
  border-top: 1px solid var(--acma-line);
  padding: 6px 18px 14px;
  background: var(--acma-paper);
}

.acma-list-card__items.is-busy {
  opacity: 0.55;
  pointer-events: none;
}

.acma-li-rows {
  display: flex;
  flex-direction: column;
}

.acma-li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--acma-line);
}

.acma-li:last-child {
  border-bottom: 0;
}

.acma-li__thumb {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--acma-card-bg);
  border: 1px solid var(--acma-line);
}

.acma-li__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.acma-li__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.acma-li__name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--acma-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.acma-li__name:hover {
  color: var(--acma-accent-ink);
}

.acma-li__unit {
  font-size: 12px;
  color: var(--acma-muted);
  font-variant-numeric: tabular-nums;
}

/* Quantity stepper. */
.acma-li__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--acma-line);
  border-radius: var(--acma-radius-btn);
  background: var(--acma-card-bg);
  overflow: hidden;
}

.acma-li__step {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--acma-ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.acma-li__step:hover {
  background: var(--acma-hover);
}

.acma-li__qtyinput {
  width: 42px;
  height: 32px;
  border: 0;
  border-left: 1px solid var(--acma-line);
  border-right: 1px solid var(--acma-line);
  text-align: center;
  font-family: var(--acma-font);
  font-size: 13.5px;
  color: var(--acma-ink);
  background: transparent;
  -moz-appearance: textfield;
  font-variant-numeric: tabular-nums;
}

.acma-li__qtyinput::-webkit-outer-spin-button,
.acma-li__qtyinput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.acma-li__qtyinput:focus {
  outline: none;
}

.acma-li__line {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--acma-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.acma-li__remove {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--acma-faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.acma-li__remove:hover {
  background: color-mix(in srgb, #b3261e 12%, transparent);
  color: #8a1d17;
}

.acma-li-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--acma-line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--acma-ink);
}

.acma-li-total__val {
  font-variant-numeric: tabular-nums;
}

.acma-li-empty,
.acma-li-status {
  margin: 0;
  padding: 14px 0 8px;
  color: var(--acma-muted);
  font-size: 13px;
}

.acma-li-status.is-error {
  color: #8a1d17;
}

/* Stack the item row on narrow viewports (the quantity controls drop below). */
@media (max-width: 560px) {
  .acma-li {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb info remove"
      "thumb qty  line";
    gap: 6px 12px;
  }
  .acma-li__thumb { grid-area: thumb; width: 44px; height: 44px; }
  .acma-li__info  { grid-area: info; }
  .acma-li__qty   { grid-area: qty; }
  .acma-li__line  { grid-area: line; align-self: center; }
  .acma-li__remove { grid-area: remove; justify-self: end; }

  .acma-list-card__actions {
    width: 100%;
  }
}