/*
 * NAMYNOT Account dashboard.
 *
 * Everything is scoped under .nn-acct because the theme's stylesheet still
 * loads through wp_head(); scoping is what keeps that from mattering. Colours
 * come from NAMYNOT-BRAND.md, not from net30-landing.css, whose
 * --nn-primary-hex has drifted from the guide.
 */

@font-face { font-family: 'PoppinsNN'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'PoppinsNN'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'PoppinsNN'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'PoppinsNN'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.woff2') format('woff2'); }

.nn-acct, .nn-auth, .nn-solo {
  --royal: #2D7FF0;
  --royal-soft: rgba(45,127,240,.12);
  --royal-ring: rgba(45,127,240,.22);
  --ink: #101727;
  --slate: #5A6478;
  --muted: #8A93A3;
  --line: #E3E8F0;
  --line-soft: #EEF1F6;
  --field: #F5F7FA;
  --ground: #FFFFFF;
  --page: #F4F6FA;
  --pos: #0E7C3E; --pos-dot: #28C840; --pos-soft: rgba(40,200,64,.12);
  --warm: #96631A; --warm-dot: #C8963E; --warm-soft: rgba(200,150,62,.14);
  --neg: #C0332E; --neg-dot: #FF5F57; --neg-soft: rgba(255,95,87,.12);
  /* The ecosystem's existing secondary-strong CTA navy (furnishing-exporter's
   * .nn-cta-calendly, webinar-manager's .namynot-wm-btn), not invented here.
   * Used for "Approve my website" so it reads as a distinct, deliberate
   * affirmative action rather than the same royal blue as the draft link
   * above it. */
  --dark: #0F172A; --dark-ring: rgba(15,23,42,.22);
  --sh-sm: 0 1px 2px rgba(16,23,39,.05);
}

body.nn-account-page { margin: 0; background: #F4F6FA; }

/* Rail anchor navigation: land with breathing room above the card instead
 * of butting it against the viewport edge.
 *
 * Deliberately NO scroll-behavior:smooth here. The theme's own scripts load
 * into this page through wp_head(), and global CSS smooth scrolling fought
 * them: mouse-wheel scrolling turned into a tug-of-war the moment the flip
 * went live (Antonio, 2026-08-12). Anchors jump instantly instead. Do not
 * put the rule back without testing wheel scroll on the live page. */
.nn-acct .nn-card[id] { scroll-margin-top: 24px; }

.nn-acct,
.nn-acct *,
.nn-acct *::before,
.nn-acct *::after { box-sizing: border-box; }

.nn-acct {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
  min-height: 100vh;
  background: var(--page);
  color: var(--ink);
  font-family: 'PoppinsNN', 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.nn-acct a { color: inherit; text-decoration: none; }
.nn-acct p { margin: 0; }
.nn-acct :focus-visible { outline: 2px solid var(--royal); outline-offset: 3px; border-radius: 4px; }

/* ---------- rail ---------- */
.nn-acct__rail {
  position: sticky; top: 0; height: 100vh;
  background: #fff; border-right: 1px solid var(--line);
  padding: 26px 18px; display: flex; flex-direction: column; gap: 26px;
}
.nn-acct__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nn-acct__brand {
  display: flex; align-items: baseline; gap: 1px; padding: 0 10px;
  font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: var(--ink);
}
.nn-acct__brand span { color: var(--royal); }
/* Small screens only: the icon-only button that opens the nav drawer.
 * 44px square, which is the minimum comfortable tap target and also what
 * stops a bare icon from feeling like a stray glyph. */
.nn-acct .nn-acct__menu {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 11px;
  background: #fff; color: var(--ink); cursor: pointer;
  font-family: inherit; line-height: 1;
}
.nn-acct__menu svg {
  width: 20px; height: 20px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round;
}
.nn-acct .nn-acct__menu[aria-expanded="true"] {
  background: var(--royal-soft); border-color: var(--royal); color: var(--royal);
}
.nn-acct__nav { display: flex; flex-direction: column; gap: 3px; }
.nn-acct__nav a {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px;
  color: var(--slate); font-size: 14px; font-weight: 500;
  transition: background .15s, color .15s;
}
.nn-acct__nav a:hover { background: var(--field); color: var(--ink); }
.nn-acct__nav a[aria-current] { background: var(--royal-soft); color: var(--royal); font-weight: 600; }
.nn-acct__nav svg {
  width: 17px; height: 17px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.nn-acct__railfoot { margin-top: auto; padding: 0 12px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.nn-acct__railfoot a { color: var(--royal); font-weight: 500; }

/* ---------- main ---------- */
.nn-acct__main { padding: 34px 40px 72px; max-width: 1180px; }
.nn-acct__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 28px;
}
.nn-acct__head h1 {
  margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.2; color: var(--ink); text-wrap: balance;
}
.nn-acct__head h1 i { font-style: normal; color: var(--royal); }
.nn-acct__head p { margin: 5px 0 0; color: var(--slate); font-size: 14px; }
.nn-acct__no {
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 7px 13px;
}

/* ---------- grid ---------- */
.nn-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; align-items: start; }
.nn-c12 { grid-column: span 12; }
.nn-c8  { grid-column: span 8; }
.nn-c7  { grid-column: span 7; }
.nn-c5  { grid-column: span 5; }
.nn-c4  { grid-column: span 4; }

/* ---------- card ---------- */
.nn-card {
  background: var(--ground); border: 1px solid var(--line); border-radius: 15px;
  padding: 28px 30px; box-shadow: var(--sh-sm);
  display: flex; flex-direction: column; gap: 18px;
}
.nn-hd { display: flex; flex-direction: column; }
.nn-hd--split { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.nn-kicker {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--royal);
}
.nn-kicker::before { content: ""; width: 11px; height: 2px; background: var(--royal); border-radius: 2px; flex: none; }
.nn-card h2 {
  margin: 7px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -.015em;
  line-height: 1.3; color: var(--ink);
}
.nn-card h2 i { font-style: normal; color: var(--royal); }
.nn-card p { color: var(--slate); font-size: 13.5px; line-height: 1.65; }

/* ---------- brand devices ---------- */
.nn-hl { background: var(--royal-soft); font-weight: 600; padding: 1px 5px 2px; border-radius: 5px; color: var(--ink); }
.nn-callout {
  background: var(--royal-soft); border-left: 3px solid var(--royal);
  border-radius: 0 9px 9px 0; padding: 13px 17px;
  font-size: 13.5px; line-height: 1.6; color: var(--ink);
}
.nn-callout strong { font-weight: 600; }
.nn-callout--warm { background: var(--warm-soft); border-left-color: var(--warm-dot); }

/* ---------- alert ---------- */
.nn-alert {
  grid-column: span 12; display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap;
  background: var(--neg-soft); border: 1px solid rgba(192,51,46,.3);
  border-radius: 13px; padding: 18px 22px;
}
.nn-alert__ico {
  width: 34px; height: 34px; border-radius: 9px; background: var(--neg); color: #fff;
  display: flex; align-items: center; justify-content: center; flex: none; font-weight: 700;
}
.nn-alert__b { flex: 1 1 320px; min-width: 0; }
.nn-alert__b b { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }
.nn-alert__b p { color: var(--ink); opacity: .8; font-size: 13.5px; }

/* ---------- figure ---------- */
.nn-figure { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.nn-figure b {
  font-size: 38px; font-weight: 700; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.nn-figure small { font-size: 13.5px; color: var(--slate); font-weight: 500; }

/* ---------- pills ---------- */
.nn-pill {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  padding: 5px 12px 5px 9px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.nn-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.nn-pill--pos   { background: var(--pos-soft);  color: var(--pos); }
.nn-pill--warm  { background: var(--warm-soft); color: var(--warm); }
.nn-pill--neg   { background: var(--neg-soft);  color: var(--neg); }
.nn-pill--royal { background: var(--royal-soft); color: var(--royal); }

/* ---------- buttons ---------- */
.nn-acct .nn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 21px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
.nn-acct .nn-btn--primary { background: var(--royal); color: #fff; box-shadow: 0 4px 14px var(--royal-ring); }
.nn-acct .nn-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 9px 24px var(--royal-ring); color: #fff; }
/* Same shape and hover physics as --primary, different color: the
 * affirmative "Approve my website" action, deliberately not royal so it
 * never reads as the same choice as the draft link above it. */
.nn-acct .nn-btn--dark { background: var(--dark); color: #fff; box-shadow: 0 4px 14px var(--dark-ring); }
.nn-acct .nn-btn--dark:hover { transform: translateY(-1px); box-shadow: 0 9px 24px var(--dark-ring); color: #fff; }
.nn-acct .nn-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.nn-acct .nn-btn--ghost:hover { background: var(--field); border-color: var(--royal); }
.nn-acct .nn-btn--quiet { background: transparent; color: var(--royal); padding: 11px 0; }
.nn-acct .nn-btn--quiet:hover { text-decoration: underline; }
.nn-btnrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* The one destructive action on this page (a customer deleting their own
 * captured inquiry). Deliberately quiet at rest -- it sits in a dense table,
 * one per row, and must not read as louder than the primary actions above --
 * and only goes clearly "this removes something" on hover/focus, where a
 * customer has already reached for it on purpose. */
.nn-acct .nn-btn--danger { padding: 6px 14px; font-size: 12.5px; }
.nn-acct .nn-btn--danger:hover,
.nn-acct .nn-btn--danger:focus-visible { background: var(--neg-soft); border-color: var(--neg); color: var(--neg); }
.nn-lead-delete { margin: 0; }

/* ---------- website track ---------- */
.nn-track {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
}
.nn-track li { position: relative; padding-top: 26px; text-align: center; min-width: 0; }
.nn-track li::before {
  content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px;
  background: var(--line); border-radius: 2px;
}
.nn-track li:first-child::before { display: none; }
.nn-track li::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ground); border: 2px solid var(--line);
}
.nn-track li.is-done::before, .nn-track li.is-now::before { background: var(--royal); }
.nn-track li.is-done::after { background: var(--royal); border-color: var(--royal); }
.nn-track li.is-now::after {
  background: var(--royal); border-color: var(--royal);
  box-shadow: 0 0 0 5px var(--royal-ring); animation: nn-pulse 2.6s ease-in-out infinite;
}
.nn-track li.is-act::after {
  background: var(--warm-dot); border-color: var(--warm-dot);
  box-shadow: 0 0 0 5px var(--warm-soft); animation: none;
}
.nn-track li.is-fin::after { background: var(--pos-dot); border-color: var(--pos-dot); box-shadow: 0 0 0 5px var(--pos-soft); }
.nn-track li.is-pause::after { background: var(--warm-dot); border-color: var(--warm-dot); box-shadow: 0 0 0 5px var(--warm-soft); }
@keyframes nn-pulse { 0%,100% { box-shadow: 0 0 0 4px var(--royal-ring); } 50% { box-shadow: 0 0 0 9px transparent; } }
.nn-track b {
  display: block; font-size: 12px; font-weight: 500; color: var(--muted);
  line-height: 1.4; padding: 0 4px; text-wrap: balance;
}
.nn-track li.is-done b { color: var(--slate); }
.nn-track li.is-now b,
.nn-track li.is-fin b,
.nn-track li.is-pause b { color: var(--ink); font-weight: 600; }

/* ---------- website review ----------
 * Progressive disclosure, three levels:
 *   1. nn-review__primary  -- the hero action, "View your draft website",
 *      alone and prominent. This is what the customer looks at first.
 *   2. nn-review__decide   -- its own moment underneath it, framed by a
 *      quiet "Your decision." label: Approve (solid, dark navy) and Request
 *      changes (outline), equal size, both unmistakably real buttons.
 *      Subordinate to the draft link above only by order and by Approve
 *      being solid where Request changes is outlined, never by looking
 *      like an afterthought (Antonio, 2026-08-15 -- the previous ghost
 *      button plus text link read as "faded minor actions" for what are
 *      the two real decisions in the flow). Nothing else is visible by
 *      default.
 * "Request changes" is a link out to revision edit mode, so there is no
 * third, hidden element here any more: the checkbox form it used to open was
 * removed with the flow it belonged to (2026-08-15).
 * The [hidden] rules are explicit rather than assumed: an unconditional
 * `display: flex` on an element is an author rule and outranks the browser's
 * own `[hidden]{display:none}` regardless of specificity, so anything meant
 * to start hidden has to say so here too (same fix already in place for
 * .nn-help a[hidden] above). */
/* Own section within the card: a quiet divider off whatever sits above it
 * (status note, or a lapsed-subscription CTA button) instead of the two
 * running straight into each other (Antonio's screenshot, "button crazy",
 * 2026-08-14). .nn-card is already a flex column with an 18px gap between
 * every child, so this margin-top rides on TOP of that gap -- same stacking
 * as the existing .nn-faq--inline divider (14px margin-top over the same
 * 18px gap). Same border weight as that one too, not a heavy rule. */
.nn-review {
  display: flex; flex-direction: column; gap: 22px;
  margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--line-soft);
}
.nn-review__primary:empty { display: none; }
/* Draft screenshot, mshots. Fixed box so the layout never jumps while it
 * generates; object-fit crops rather than stretches whatever aspect ratio
 * the source page rendered at. The unconditional `display: block` here is an
 * author rule and outranks the browser's own `[hidden]{display:none}`
 * (same fix already in place for .nn-review__decide above),
 * so the [hidden] rule below has to say so explicitly too -- that is what the
 * inline onerror in class-dashboard.php relies on to hide a broken image. */
.nn-review__thumb {
  display: block; width: 100%; aspect-ratio: 16 / 10; margin-bottom: 14px;
  border-radius: 12px; overflow: hidden; background: var(--field);
  border: 1px solid var(--line);
}
.nn-review__thumb[hidden] { display: none; }
/* cover crops from the CENTER by default, which chops the site header off
   the top of the screenshot; anchor the crop to the top of the page. */
.nn-review__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* Column: label on its own line, then the button row below it. Lives INSIDE
 * .nn-review__decide rather than beside it so the existing JS toggle -- which
 * only ever sets `decide.hidden` on this one element -- hides and restores
 * the label together with the buttons for free; no class for the JS to
 * learn. margin-top rides on top of .nn-review's own 22px flex-gap from the
 * draft link above, same double-spacing pattern as the card divider above
 * (10px margin-top over an 18px flex-gap): enough that this reads as its
 * own moment, not a tail on the draft link. */
.nn-review__decide {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 8px;
}
.nn-review__decide[hidden] { display: none; }
.nn-review__decide-label {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.nn-review__decide-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.nn-review__cap { display: flex; flex-direction: column; gap: 13px; }
.nn-review__cap-actions { margin: 0; }
/* One line, added by JS only when the AJAX response carries intake_url
 * (customer checked Photo swaps on a Request changes submission). */
.nn-review__photo-note { margin: 10px 0 0; font-size: 13.5px; color: var(--slate); }
.nn-review__photo-note a { color: var(--royal); font-weight: 600; }
.nn-review__msg { min-height: 1px; }
.nn-review__msg:empty { display: none; }
.nn-review[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* Live website: "Need a change?" (lifecycle `delivered`).
 *
 * Its own block rather than reusing the decide row, because this card has no
 * draft link above it to hang off and no second button beside it. The vertical
 * rhythm therefore has to come from here, and it is deliberately roomy: this is
 * a standalone ask on an otherwise finished card, and a cramped text box reads
 * like a support ticket rather than an invitation. */
.nn-review--live { display: flex; flex-direction: column; gap: 16px; }
/* A headline, NOT the 11px uppercase kicker this first borrowed from
 * .nn-review__decide-label. That style is built for a small sublabel sitting
 * over a button row ("Your decision."); used as the only heading on a
 * standalone block it read as a caption for the thing above it rather than the
 * start of something new (code review 2026-08-18). */
.nn-review__live-head {
  margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ink, #0f172a);
}
.nn-review__live-intro { margin: 0; color: var(--slate); line-height: 1.65; max-width: 46em; }
.nn-review__live-label {
  display: block; margin: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
/* Sits directly under its own label, so it takes the tighter of the two gaps
 * and stays visibly paired with it rather than floating between the two. */
.nn-review__live-label + .nn-review__notes { margin-top: -6px; }
.nn-review__notes {
  width: 100%; box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--line, #d9dee6); border-radius: 10px;
  font: inherit; font-size: 15px; line-height: 1.6; color: inherit;
  background: #fff;
  resize: vertical; min-height: 116px;
}
.nn-review__notes:focus {
  outline: none;
  border-color: var(--royal);
  box-shadow: 0 0 0 3px rgba(45, 127, 240, .16);
}
.nn-review__notes::placeholder { color: var(--muted); opacity: .85; }
.nn-live-changes__actions { margin: 0; }
.nn-review__rounds { margin: 0; color: var(--muted); }
@media (max-width: 680px) {
  .nn-review--live { gap: 14px; }
  .nn-review__notes { padding: 12px 13px; min-height: 132px; }
}
@media (max-width: 680px) {
  .nn-review__decide-actions { gap: 16px; }
}

/* ---------- definition rows ---------- */
.nn-rows { display: flex; flex-direction: column; gap: 0; margin: 0; }
.nn-rows > div {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px;
}
.nn-rows > div:last-child { border-bottom: 0; padding-bottom: 0; }
.nn-rows dt { color: var(--slate); margin: 0; }
.nn-rows dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- inquiries table ----------
 * A real <table>, not the <dl> rows every other card uses, because rows here
 * are one PER LEAD rather than one per field -- forcing five columns into a
 * definition list would repeat "Received / Name / Email / Phone / Page" as
 * text on every row instead of once as a header. Wrapped in its own
 * overflow-x: the card itself never scrolls sideways, only the table does,
 * on the phone widths where five columns cannot all fit. */
.nn-leads-tablewrap { overflow-x: auto; margin-top: 4px; }
.nn-leads-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.nn-leads-table th, .nn-leads-table td {
  padding: 10px 14px 10px 0; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
}
.nn-leads-table th {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.nn-leads-table td { color: var(--ink); }
.nn-leads-table td a { color: var(--royal); font-weight: 500; }
.nn-leads-table tbody tr:last-child td { border-bottom: 0; }
/* The Delete column: no header label (a screen-reader-only <th>), and the
 * cell itself gets no right padding since it is always the last column. */
.nn-leads-table th:last-child, .nn-leads-table td:last-child { padding-right: 0; }

/* ---------- chips ---------- */
.nn-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.nn-chips span {
  font-size: 11.5px; font-weight: 500; color: var(--slate);
  background: var(--field); border: 1px solid var(--line); border-radius: 7px; padding: 5px 11px;
}

/* ---------- date range ---------- */
.nn-range { display: flex; gap: 12px; flex-wrap: wrap; }
.nn-range label {
  display: flex; flex-direction: column; gap: 5px; flex: 1 1 130px; min-width: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.nn-acct .nn-range input {
  font-family: inherit; font-size: 13.5px; color: var(--ink); background: var(--field);
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; width: 100%;
}
.nn-acct .nn-range input:focus-visible { border-color: var(--royal); }

/* ---------- fine print ---------- */
.nn-acct .nn-fine { font-size: 11.5px; line-height: 1.6; color: var(--muted); }
/* The one-line confirmation after a delete redirect (class-shell.php's
 * lead_delete_notice()). Deliberately still --muted, not a colored banner:
 * it is a passing confirmation the customer already acted on, not a warning
 * that needs to compete for attention with the rest of the card. */
.nn-acct .nn-fine--flash { margin: 0 0 10px; font-weight: 600; color: var(--ink); }

/* ---------- faq ---------- */
.nn-faq { display: flex; flex-direction: column; }
.nn-faq details { border-bottom: 1px solid var(--line-soft); }
.nn-faq details:last-child { border-bottom: 0; }
.nn-faq summary {
  cursor: pointer; list-style: none; padding: 14px 30px 14px 0; position: relative;
  font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--ink);
}
.nn-faq summary::-webkit-details-marker { display: none; }
.nn-faq summary::after {
  content: ""; position: absolute; right: 6px; top: 20px; width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s;
}
.nn-faq details[open] summary::after { transform: rotate(-135deg); }
.nn-faq details[open] summary { color: var(--royal); }
.nn-faq p { padding: 0 0 15px; font-size: 13.5px; }
/* A single disclosure living inside another card (the account card's
 * "What is Traditional NET 30?"), separated from the button row above it. */
.nn-faq--inline { margin-top: 14px; border-top: 1px solid var(--line-soft); }
.nn-faq--inline p a { color: var(--royal); font-weight: 600; }

/* ---------- help ---------- */
.nn-help { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.nn-help a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px;
  transition: border-color .15s, background .15s;
}
.nn-help a[hidden] { display: none; }
.nn-help a:hover { border-color: var(--royal); background: var(--field); }
.nn-help i {
  font-style: normal; width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: var(--royal-soft); color: var(--royal);
  display: flex; align-items: center; justify-content: center;
}
.nn-help i svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nn-help b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.nn-help small { color: var(--muted); font-size: 12px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nn-c8, .nn-c7, .nn-c5, .nn-c4 { grid-column: span 12; }
}
@media (max-width: 900px) {
  /* Explicit rows: with align-items:start, a stretched auto row leaves a gray
   * gap between the rail and short content (visible on the endpoint screens,
   * which unlike the dashboard can be shorter than the viewport). */
  /* minmax(0, 1fr), never a bare 1fr: 1fr means minmax(auto, 1fr), so the
   * column refuses to shrink below its content's min-content width and a wide
   * table pushes the whole page sideways. Cost a real horizontal scroll on
   * phones under ~480px until 2026-08-13. The desktop rule above always had
   * the minmax; the mobile one did not. */
  .nn-acct { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .nn-acct__main { min-width: 0; }
  /* The rail collapses into a sticky top bar whose hamburger opens a stacked
   * drawer. Replaces the horizontal scroll strip, which was invisible until
   * you happened to swipe it (Antonio, 2026-08-13). */
  .nn-acct__rail {
    position: sticky; top: 0; z-index: 50; height: auto;
    flex-direction: column; gap: 0;
    border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 18px;
  }
  .nn-acct__brand { padding: 0; }
  .nn-acct .nn-acct__menu { display: inline-flex; }
  .nn-acct__nav { display: none; flex-direction: column; gap: 3px; padding-top: 12px; }
  .nn-acct__rail.is-open .nn-acct__nav { display: flex; }
  .nn-acct__nav a { padding: 11px 12px; }
  .nn-acct__railfoot { display: none; }
  .nn-acct__rail.is-open .nn-acct__railfoot { display: block; margin: 0; padding: 12px 12px 4px; }
  .nn-acct__main { padding: 26px 20px 60px; }
  .nn-help { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .nn-track { grid-template-columns: 1fr; }
  .nn-track li { text-align: left; padding: 0 0 20px 30px; }
  .nn-track li::before,
  .nn-track li:first-child::before { display: block; top: 12px; left: 6px; width: 2px; height: calc(100% - 12px); }
  .nn-track li:last-child::before { display: none; }
  .nn-track li.is-now::before { background: var(--line); }
  .nn-track li::after { top: 2px; left: 0; transform: none; }
  .nn-track b { padding: 0; font-size: 13px; }
  .nn-card { padding: 22px 20px; }
  .nn-figure b { font-size: 32px; }
  .nn-acct__head h1 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-acct *, .nn-acct *::before, .nn-acct *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}

/* ---------- preview bar (admin only, never seen by a customer) ---------- */
.nn-preview {
  position: sticky; top: 0; z-index: 90;
  background: #0A0F1B; color: #8FA2C4;
  border-bottom: 1px solid #1E2A42;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 20px;
  font: 500 12.5px/1.2 'PoppinsNN', 'Segoe UI', system-ui, sans-serif;
}
.nn-preview b { color: #6E7C99; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 10px; margin-right: 4px; }
.nn-preview a {
  color: #A9B7D2; text-decoration: none;
  border: 1px solid #24334F; border-radius: 999px; padding: 6px 13px;
  transition: background .15s, color .15s, border-color .15s;
}
.nn-preview a:hover { background: #162034; color: #E9EFFA; }
.nn-preview a.on { background: #2D7FF0; border-color: #2D7FF0; color: #fff; }
.nn-preview__note { margin-left: auto; color: #5D6B87; font-size: 11.5px; }
@media (max-width: 700px) { .nn-preview__note { margin-left: 0; flex: 1 1 100%; } }
/* On small screens the persona bar wraps to several rows; stuck to the top it
 * would sit on the rail's own sticky bar (both top:0) and cover the Menu
 * button. It scrolls away instead; the rail takes the top edge. Admin-only. */
@media (max-width: 900px) { .nn-preview { position: static; } }
.nn-preview--as { background: #1B1206; border-bottom-color: #4A3312; }
.nn-preview--as b { color: #C8963E; }
.nn-preview__who { color: #E8D4AE; font-weight: 600; }

/* ==================================================================== *
 * Stock-screen restyle
 *
 * Everything below styles WooCommerce's own markup (orders, payment
 * methods, subscriptions, forms, notices) rendered inside our chrome by
 * class-stock-screens.php. The theme's stylesheet still loads through
 * wp_head() and styles the same .woocommerce classes globally, so the
 * load-bearing rules ride on body.nn-account-page for specificity, not
 * on load order.
 * ==================================================================== */

/* ---------- the content well ---------- */
/* Roomier head than the dashboard: these pages open with three stacked text
 * lines (back link, title, subtitle) and read cramped without the air. */
.nn-acct__main--sub { max-width: 980px; padding-top: 46px; }
.nn-acct__main--sub .nn-acct__head { margin-bottom: 34px; }
.nn-acct__main--sub .nn-acct__head p:not(.nn-back) { margin-top: 10px; }
/* Carries the head-p specificity on purpose: the plain .nn-back rule lost to
 * .nn-acct__head p's margin reset and the 30px never rendered (Antonio,
 * 2026-08-13 — his DevTools value, third attempt, first one that applies). */
.nn-acct .nn-acct__head p.nn-back { margin: 0 0 30px; }
.nn-acct .nn-back a { font-size: 12.5px; font-weight: 500; color: var(--slate); }
.nn-acct .nn-back a:hover { color: var(--royal); }

.nn-account-page .nn-screen {
  background: var(--ground); border: 1px solid var(--line); border-radius: 15px;
  padding: 28px 30px; box-shadow: var(--sh-sm);
  font-size: 13.5px; line-height: 1.65; color: var(--slate);
}
.nn-account-page .nn-screen--bare { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }

.nn-account-page .nn-screen a { color: var(--royal); font-weight: 500; text-decoration: none; }
.nn-account-page .nn-screen a:hover { text-decoration: underline; }
.nn-account-page .nn-screen p { margin: 0 0 14px; }
.nn-account-page .nn-screen p:last-child { margin-bottom: 0; }
.nn-account-page .nn-screen h2,
.nn-account-page .nn-screen h3 {
  margin: 28px 0 12px; font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  line-height: 1.3; color: var(--ink);
}
.nn-account-page .nn-screen > h2:first-child,
.nn-account-page .nn-screen > h3:first-child,
.nn-account-page .nn-screen > .woocommerce > h2:first-child,
.nn-account-page .nn-screen > .woocommerce > h3:first-child { margin-top: 0; }
.nn-account-page .nn-screen mark { background: var(--royal-soft); color: var(--ink); padding: 1px 5px 2px; border-radius: 5px; font-weight: 600; }

/* Stock templates lean on woocommerce-layout.css for float clearing, and the
 * theme controls whether that file even loads here. Own the clears instead. */
.nn-account-page .nn-screen form::after { content: ""; display: table; clear: both; }
.nn-account-page .nn-screen .clear { clear: both; }
.nn-account-page .nn-screen .form-row-wide,
.nn-account-page .nn-screen .form-row-first,
.nn-account-page .nn-screen fieldset { clear: both; }

/* ---------- notices ---------- */
.nn-account-page .woocommerce-message,
.nn-account-page .woocommerce-info,
.nn-account-page .woocommerce-error {
  list-style: none; margin: 0 0 18px; padding: 13px 17px;
  background: var(--royal-soft); border: 0; border-left: 3px solid var(--royal);
  border-radius: 0 9px 9px 0; font-size: 13.5px; line-height: 1.6; color: var(--ink);
}
.nn-account-page .woocommerce-message { background: var(--pos-soft); border-left-color: var(--pos-dot); }
.nn-account-page .woocommerce-error { background: var(--neg-soft); border-left-color: var(--neg-dot); }
.nn-account-page .woocommerce-error li { margin: 0; }
.nn-account-page .woocommerce-error li + li { margin-top: 8px; }
.nn-account-page .woocommerce-message::before,
.nn-account-page .woocommerce-info::before,
.nn-account-page .woocommerce-error::before { display: none; content: none; }
.nn-account-page .woocommerce-message .button,
.nn-account-page .woocommerce-info .button,
.nn-account-page .woocommerce-error .button {
  float: right; margin-left: 14px; padding: 0; background: none; border: 0;
  color: var(--royal); font-weight: 600; font-size: 13px;
}

/* ---------- tables ---------- */
.nn-account-page .nn-screen table.shop_table {
  width: 100%; margin: 0 0 6px; border-collapse: collapse; border: 0; border-radius: 0;
  font-size: 13.5px;
}
.nn-account-page .nn-screen table.shop_table th,
.nn-account-page .nn-screen table.shop_table td {
  padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line-soft);
  text-align: left; vertical-align: middle; background: none;
}
.nn-account-page .nn-screen table.shop_table thead th {
  padding-top: 4px; padding-bottom: 14px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line);
}
.nn-account-page .nn-screen table.shop_table tbody th { color: var(--slate); font-weight: 500; }
.nn-account-page .nn-screen table.shop_table td {
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.nn-account-page .nn-screen table.shop_table tbody tr:hover > td { background: var(--field); }
.nn-account-page .nn-screen table.shop_table tbody tr:last-child > td,
.nn-account-page .nn-screen table.shop_table tbody tr:last-child > th { border-bottom: 0; }
.nn-account-page .nn-screen table.shop_table tfoot th,
.nn-account-page .nn-screen table.shop_table tfoot td {
  border-bottom: 0; border-top: 1px solid var(--line); font-weight: 600; color: var(--ink);
}
.nn-account-page .nn-screen table.shop_table .woocommerce-orders-table__cell-order-actions,
.nn-account-page .nn-screen table.shop_table td:last-child { white-space: nowrap; }

/* ---------- buttons ---------- */
.nn-account-page .nn-screen .button,
.nn-account-page .nn-screen button[type="submit"],
.nn-account-page .nn-screen input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 21px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  background: var(--royal); color: #fff; box-shadow: 0 4px 14px var(--royal-ring);
  text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
.nn-account-page .nn-screen .button:hover,
.nn-account-page .nn-screen button[type="submit"]:hover,
.nn-account-page .nn-screen input[type="submit"]:hover {
  transform: translateY(-1px); box-shadow: 0 9px 24px var(--royal-ring);
  color: #fff; text-decoration: none;
}
.nn-account-page .nn-screen .button:disabled { opacity: .55; transform: none; cursor: default; }

/* Row-level actions (View, Pay, Cancel, table buttons) stay quiet. */
.nn-account-page .nn-screen td .button,
.nn-account-page .nn-screen .woocommerce-pagination .button,
.nn-account-page .nn-screen .woocommerce-Pagination .button {
  padding: 7px 15px; font-size: 12.5px;
  background: transparent; color: var(--ink); border-color: var(--line); box-shadow: none;
}
.nn-account-page .nn-screen td .button:hover,
.nn-account-page .nn-screen .woocommerce-pagination .button:hover,
.nn-account-page .nn-screen .woocommerce-Pagination .button:hover {
  background: var(--field); border-color: var(--royal); color: var(--ink); transform: none; box-shadow: none;
}
.nn-account-page .nn-screen td .button + .button { margin-left: 6px; }
.nn-account-page .nn-screen .woocommerce-pagination,
.nn-account-page .nn-screen .woocommerce-Pagination { margin-top: 18px; }

/* ---------- forms ---------- */
.nn-account-page .nn-screen .form-row { margin: 0 0 16px; padding: 0; display: block; }
.nn-account-page .nn-screen .form-row-first { float: left; width: calc(50% - 9px); }
.nn-account-page .nn-screen .form-row-last { float: right; width: calc(50% - 9px); }
.nn-account-page .nn-screen .form-row label {
  display: block; margin: 0 0 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.nn-account-page .nn-screen .form-row .required { color: var(--neg); text-decoration: none; }
.nn-account-page .nn-screen .form-row .optional { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.nn-account-page .nn-screen input.input-text,
.nn-account-page .nn-screen select,
.nn-account-page .nn-screen textarea {
  width: 100%; font-family: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
  box-shadow: none; outline: none;
}
.nn-account-page .nn-screen input.input-text:focus,
.nn-account-page .nn-screen select:focus,
.nn-account-page .nn-screen textarea:focus { border-color: var(--royal); background: #fff; }
.nn-account-page .nn-screen .password-input { display: block; position: relative; }
.nn-account-page .nn-screen .show-password-input {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  width: 22px; height: 22px; cursor: pointer;
}
.nn-account-page .nn-screen .show-password-input::after { color: var(--muted); }
.nn-account-page .nn-screen fieldset {
  margin: 26px 0 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--line-soft);
}
/* Floated full-width so the legend leaves the border gap and sits below the
 * divider like a normal heading instead of straddling the line. */
.nn-account-page .nn-screen fieldset legend {
  float: left; width: 100%; padding: 0 0 12px;
  font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.01em;
}
/* Gateway boxes bring their own fieldset; no divider chrome inside those. */
.nn-account-page .nn-screen .payment_box fieldset { margin: 0; padding: 0; border: 0; clear: none; }
.nn-account-page .nn-screen em { font-style: normal; font-size: 11.5px; color: var(--muted); }

/* Inline checkbox rows: "Remember me". Wins over the .form-row label rule. */
.nn-account-page .nn-screen .form-row label.woocommerce-form__label-for-checkbox,
.nn-account-page .nn-screen label.woocommerce-form__label-for-checkbox {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--slate);
}
.nn-account-page .nn-screen .woocommerce-form__label-for-checkbox input { width: auto; accent-color: var(--royal); }
.nn-account-page .nn-screen .woocommerce-form-login__rememberme { margin-bottom: 6px; }
.nn-account-page .nn-screen .woocommerce-form-login__submit,
.nn-account-page .nn-screen .woocommerce-form-register__submit,
.nn-account-page .nn-screen .woocommerce-ResetPassword .button { width: 100%; margin-top: 4px; }
.nn-account-page .nn-screen .lost_password { font-size: 12.5px; color: var(--muted); margin-top: 14px; }
.nn-account-page .nn-screen .woocommerce-privacy-policy-text p { font-size: 11.5px; color: var(--muted); }

/* ---------- two-up sets: addresses, login + register ---------- */
.nn-account-page .nn-screen .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.nn-account-page .nn-screen .col2-set .col-1,
.nn-account-page .nn-screen .col2-set .col-2 { width: auto; float: none; }
.nn-account-page .nn-screen .woocommerce-Address,
.nn-account-page .nn-screen .col2-set .u-column1,
.nn-account-page .nn-screen .col2-set .u-column2 {
  border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px;
}
.nn-account-page .nn-screen .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.nn-account-page .nn-screen .woocommerce-Address-title h3 { margin: 0; }
.nn-account-page .nn-screen .woocommerce-Address-title .edit { font-size: 12.5px; }
.nn-account-page .nn-screen address { font-style: normal; margin-top: 12px; color: var(--ink); line-height: 1.7; }

/* ---------- payment methods ---------- */
.nn-account-page .nn-screen ul.payment_methods {
  list-style: none; margin: 0 0 18px; padding: 0;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.nn-account-page .nn-screen ul.payment_methods li {
  margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line-soft);
}
.nn-account-page .nn-screen ul.payment_methods li:last-child { border-bottom: 0; }
.nn-account-page .nn-screen ul.payment_methods label {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.nn-account-page .nn-screen ul.payment_methods input[type="radio"] { width: auto; accent-color: var(--royal); }
.nn-account-page .nn-screen ul.payment_methods img { max-height: 22px; }
.nn-account-page .nn-screen .payment_box {
  margin: 12px 0 0; padding: 14px 16px; background: var(--field); border-radius: 9px;
  font-size: 12.5px; color: var(--slate);
}
.nn-account-page .nn-screen .payment_box p { margin: 0 0 10px; }
.nn-account-page .nn-screen .payment_box p:last-child { margin-bottom: 0; }

/* ---------- order received / order details ---------- */
.nn-account-page .nn-screen .woocommerce-thankyou-order-received {
  padding: 13px 17px; margin: 0 0 20px; background: var(--pos-soft);
  border-left: 3px solid var(--pos-dot); border-radius: 0 9px 9px 0;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.nn-account-page .nn-screen ul.woocommerce-order-overview {
  list-style: none; margin: 0 0 24px; padding: 0 0 18px;
  display: flex; flex-wrap: wrap; gap: 6px 34px; border-bottom: 1px solid var(--line-soft);
}
.nn-account-page .nn-screen ul.woocommerce-order-overview li {
  margin: 0; padding: 0; border: 0; float: none;
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.nn-account-page .nn-screen ul.woocommerce-order-overview li strong {
  display: block; margin-top: 3px;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.nn-account-page .nn-screen .woocommerce-customer-details address { border: 0; padding: 0; }

/* ---------- subscriptions-core odds and ends ---------- */
.nn-account-page .nn-screen table.subscription_details td { text-align: left; }
.nn-account-page .nn-screen .subscription_details + h2 { margin-top: 30px; }

/* ---------- auth: login / lost password / reset ---------- */
.nn-auth {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 44px 20px; background: var(--page); color: var(--ink);
  font-family: 'PoppinsNN', 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
.nn-auth *, .nn-auth *::before, .nn-auth *::after { box-sizing: border-box; }
.nn-auth__card {
  width: 100%; max-width: 460px; background: var(--ground);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-sm);
  padding: 36px 38px;
}
.nn-auth__card .nn-acct__brand { padding: 0; margin-bottom: 26px; }
.nn-auth h1 { margin: 0 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.nn-auth h1 i { font-style: normal; color: var(--royal); }
.nn-auth__sub { margin: 0; font-size: 13.5px; color: var(--slate); }
.nn-auth__card .nn-screen { margin-top: 20px; }
.nn-auth__foot { margin: 0; font-size: 12px; color: var(--muted); }
.nn-auth__foot a { color: var(--royal); font-weight: 500; text-decoration: none; }
.nn-auth :focus-visible { outline: 2px solid var(--royal); outline-offset: 3px; border-radius: 4px; }

/* The stock login/register partials carry their own headings; inside the auth
 * card our h1 already says it. A lone "Login" heading is pure repetition and
 * goes; when registration renders beside it the headings become the section
 * labels that tell the two forms apart. The shortcode wraps its output in an
 * inner div.woocommerce, so both shapes are covered. */
.nn-account-page .nn-screen--bare .u-column1 h2,
.nn-account-page .nn-screen--bare .u-column2 h2 {
  margin: 0 0 14px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.nn-account-page .nn-screen--bare > h2:first-child,
.nn-account-page .nn-screen--bare > .woocommerce > h2:first-child { display: none; }
/* One narrow card: no room for floated half-width rows in here. */
.nn-auth .nn-screen .form-row-first,
.nn-auth .nn-screen .form-row-last { float: none; width: 100%; }
/* And when registration renders too, it stacks below a divider. */
.nn-auth .nn-screen .col2-set { grid-template-columns: 1fr; gap: 0; }
.nn-auth .nn-screen .col2-set .u-column1,
.nn-auth .nn-screen .col2-set .u-column2 { border: 0; border-radius: 0; padding: 0; }
.nn-auth .nn-screen .col2-set .u-column2 { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line-soft); }

/* ---------- solo: guest order-received ---------- */
.nn-solo {
  min-height: 100vh; padding: 44px 20px 60px; background: var(--page); color: var(--ink);
  font-family: 'PoppinsNN', 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
.nn-solo *, .nn-solo *::before, .nn-solo *::after { box-sizing: border-box; }
.nn-solo__inner { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.nn-solo .nn-acct__brand { padding: 0; }
.nn-solo h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.nn-solo h1 i { font-style: normal; color: var(--royal); }
.nn-solo :focus-visible { outline: 2px solid var(--royal); outline-offset: 3px; border-radius: 4px; }

/* ---------- stock screens, small viewports ---------- */
/* Late in the file on purpose: the unconditional 46px above would otherwise
 * outrank the 900px main-padding tighten by source order. */
@media (max-width: 900px) {
  .nn-acct__main--sub { padding-top: 32px; }
}
@media (max-width: 768px) {
  /* Woo marks stacking tables itself; without its stylesheet we do the stack. */
  .nn-account-page .nn-screen table.shop_table_responsive thead { display: none; }
  .nn-account-page .nn-screen table.shop_table_responsive tr {
    display: block; padding: 14px 8px; border-bottom: 1px solid var(--line-soft);
  }
  .nn-account-page .nn-screen table.shop_table_responsive tr:last-child { border-bottom: 0; }
  /* td:last-child carries white-space:nowrap above and outranks a plainer
   * selector here, which kept the last column from ever wrapping. Matched
   * specificity so stacked values wrap instead of widening the page. */
  .nn-account-page .nn-screen table.shop_table_responsive td,
  .nn-account-page .nn-screen table.shop_table_responsive td:last-child {
    display: flex; align-items: baseline; justify-content: flex-end; gap: 0 5px;
    flex-wrap: wrap; padding: 5px 0; border: 0; text-align: right;
    white-space: normal; min-width: 0;
  }
  /* margin-right:auto, not space-between: a value split across several nodes
   * ("$60.00" + "for 1 item") must cluster right, not spread across the row. */
  .nn-account-page .nn-screen table.shop_table_responsive td::before {
    content: attr(data-title); flex: none; margin-right: auto; padding-right: 16px;
    font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  }
  .nn-account-page .nn-screen table.shop_table_responsive td:last-child { justify-content: flex-end; }
  .nn-account-page .nn-screen table.shop_table_responsive td.woocommerce-orders-table__cell-order-actions::before { content: none; }
  .nn-account-page .nn-screen tbody tr:hover > td { background: none; }

  .nn-account-page .nn-screen .col2-set { grid-template-columns: 1fr; }
  .nn-account-page .nn-screen .form-row-first,
  .nn-account-page .nn-screen .form-row-last { float: none; width: 100%; }
}
@media (max-width: 680px) {
  .nn-account-page .nn-screen { padding: 22px 20px; }
  .nn-auth__card { padding: 28px 22px; }
  /* iOS zooms any focused field under 16px. */
  .nn-account-page .nn-screen input.input-text,
  .nn-account-page .nn-screen select,
  .nn-account-page .nn-screen textarea { font-size: 16px; }
}