/*
 * Mitt konto (aftertaste-membersystem) — inne i kappratt-themes page.php.
 * Temat ger bredd, sidomarginal och h1. Allt här är scopat under .ams och bygger på temats
 * tokens (--kr-*) med reservvärden. Mockup godkänd av Thomas 2026-10-29.
 */

.ams {
	--ams-orange: var(--kr-orange, #fa7b4c);
	--ams-orange-hover: var(--kr-orange-hover, #fc9a76);
	--ams-on-orange: var(--kr-on-orange, #2b2b2b);
	--ams-ink: var(--kr-orange-ink, #b8501c);
	--ams-heading: var(--kr-heading, #222);
	--ams-text: var(--kr-text, #444);
	--ams-quiet: var(--kr-quiet, #6b7280);
	--ams-line: #e6e8ea;      /* temats kortkant */
	--ams-chip: #e2e2e2;      /* temats .kr-chip */
	--ams-field: #cfd4d9;     /* temats fält */
	--ams-soft: #f7f7f7;      /* temats grå sammanfattningsruta */
	--ams-dark: #222;
	--ams-green: #1e6b3f;
	--ams-green-bg: #e8f5ec;
	--ams-done: #0f6e56;        /* "Omdöme lämnat" — samma som Newsletters omdömessida */
	--ams-done-bg: #e8f6ee;
	--ams-done-bar: #2f9e63;
	--ams-warn-bg: #fdf5e4;
	--ams-warn-ink: #6b4d0e;
	--ams-danger: #a12525;
	--ams-danger-bg: #fdf3f1;
	--ams-danger-line: #efcfc8;
	/* Spårningens lägen (Templates mockup 2026-11-06): bakgrund / kant / text, minst 4,5:1. */
	--ams-trk-ordered-bg: #f3f4f6; --ams-trk-ordered-line: #e2e5e9; --ams-trk-ordered-ink: #3d444b; --ams-trk-ordered-accent: #6b7280;
	--ams-trk-transit-bg: #eef3f9; --ams-trk-transit-line: #d3deeb; --ams-trk-transit-ink: #1f4a7a; --ams-trk-transit-accent: #2c6cb0;
	--ams-trk-pickup-bg: #fff1ea;  --ams-trk-pickup-line: #f6d3c3;  --ams-trk-pickup-ink: #9c3f12;  --ams-trk-pickup-accent: #e0703f;
	--ams-trk-done-bg: #f2faf5;    --ams-trk-done-line: #d7eee0;    --ams-trk-done-ink: #1e6b43;    --ams-trk-done-accent: #2e9e5b;
	--ams-trk-issue-bg: #fdf0f0;   --ams-trk-issue-line: #f3c9c9;   --ams-trk-issue-ink: #a32020;   --ams-trk-issue-accent: #c0392b;
	--ams-inter: var(--kr-font-inter, Inter, sans-serif);
	--ams-sys: var(--kr-font-system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);

	color: var(--ams-text);
	font-family: var(--ams-inter);
	font-size: 16px;
	line-height: 1.5;
}
.ams *, .ams *::before, .ams *::after { box-sizing: border-box; }
.ams [hidden] { display: none !important; }
.ams button { font: inherit; }
.ams :focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.ams p { margin: 0; }

/* ---------- Knappar och länkar ---------- */
.ams .ams-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 0 20px; border: 0; border-radius: 10px;
	background: var(--ams-orange); color: var(--ams-on-orange);
	font: 700 16px/1.2 var(--ams-sys); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.ams .ams-btn:hover { background: var(--ams-orange-hover); color: var(--ams-on-orange); }
.ams .ams-btn--ghost { background: #fff; color: var(--ams-heading); border: 1px solid var(--ams-field); border-radius: 8px; }
.ams .ams-btn--ghost:hover { background: #fff; color: var(--ams-heading); border-color: #9aa1a8; }
.ams .ams-btn--danger { background: #fff; color: var(--ams-danger); border: 1px solid #e2b3a8; border-radius: 8px; }
.ams .ams-btn--danger:hover { background: #fff7f5; color: var(--ams-danger); }
.ams .ams-btn--danger-solid { background: var(--ams-danger); color: #fff; border-radius: 8px; }
.ams .ams-btn--danger-solid:hover { background: #861c1c; color: #fff; }
.ams .ams-btn--sm { min-height: 40px; padding: 0 14px; font-size: 14.5px; }
.ams .ams-btn--block { width: 100%; }
.ams .ams-btn[disabled] { background: #eceef0; color: #8a9097; border-color: #eceef0; cursor: not-allowed; }
.ams .ams-link { color: var(--ams-ink); text-decoration: underline; font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; font: 500 15px/1.4 var(--ams-sys); }
.ams .ams-link:hover { text-decoration-thickness: 2px; color: var(--ams-ink); }

/* ---------- Gemensamt ---------- */
.ams .ams-h2 { margin: 0 0 6px; font: 700 22px/1.25 var(--ams-inter); color: var(--ams-heading); letter-spacing: -.4px; }
.ams .ams-h3 { margin: 28px 0 12px; font: 600 17px/1.3 var(--ams-inter); color: var(--ams-heading); }
.ams .ams-lead { margin: 0 0 18px; color: var(--ams-quiet); font-size: 15px; }
.ams .ams-small { font-size: 14px; color: var(--ams-quiet); }
.ams .ams-stack { display: grid; gap: 14px; }
.ams .ams-stack .ams-h3 { margin-top: 12px; }
.ams .ams-lead--tight { margin-bottom: 0; }
.ams .ams-mb { margin-bottom: 14px; }
.ams .ams-mt { margin-top: 8px; }
.ams .ams-text { color: var(--ams-text); }
.ams .ams-card { background: #fff; border: 1px solid var(--ams-line); border-radius: 12px; padding: 20px 22px; }
.ams .ams-card h3 { margin: 0 0 12px; font: 600 16.5px/1.3 var(--ams-inter); color: var(--ams-heading); }
.ams .ams-list { background: #fff; border: 1px solid var(--ams-line); border-radius: 12px; }
.ams .ams-empty { padding: 18px; color: var(--ams-quiet); font-size: 15px; }
.ams .ams-amount { font-weight: 700; color: var(--ams-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ams .ams-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #eef0f2; color: #3d444b; font: 600 12.5px/1.5 var(--ams-sys); white-space: nowrap; }
.ams .ams-pill--ok { background: var(--ams-green-bg); color: var(--ams-green); }
.ams .ams-notice { margin: 0 0 14px; padding: 12px 16px; border-radius: 10px; border: 1px solid #dde3ea; background: #f5f7fa; color: #2b3540; font-size: 15px; }
.ams .ams-notice--ok { border-color: #d7eee0; background: #f2faf5; color: #1e4d33; }
.ams .ams-notice--error { border-color: #f3d5d2; background: #fdf2f1; color: #8a3a31; }
.ams .ams-loading { color: var(--ams-quiet); font-size: 15px; padding: 8px 0; }
/* Reservera höjd medan kontot laddas, så att sidfoten inte hoppar ned när innehållet kommer (CLS). */
.ams > #ams-loading:not([hidden]), .ams #ams-app:not([hidden]) .ams-panel { min-height: 70vh; }

/* ---------- Inloggning ---------- */
.ams .ams-login { max-width: 480px; }
.ams .ams-login .ams-card { display: grid; gap: 14px; padding: 24px; }
.ams .ams-login .ams-h2 { margin: 0; }
.ams .ams-field label { display: block; margin-bottom: 6px; font: 600 14px/1.3 var(--ams-sys); color: var(--ams-heading); }
.ams .ams-field input {
	width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--ams-field); border-radius: 8px;
	background: #fff; color: var(--ams-heading); font: 400 16px/1 var(--ams-sys);
}
.ams .ams-field input:focus { border-color: #8a929a; outline: 2px solid #1d4ed8; outline-offset: 1px; }
.ams .ams-field textarea {
	width: 100%; min-height: 120px; padding: 12px 14px; border: 1px solid var(--ams-field); border-radius: 8px;
	background: #fff; color: var(--ams-heading); font: 400 16px/1.5 var(--ams-sys); resize: vertical;
}
.ams .ams-field textarea:focus { border-color: #8a929a; outline: 2px solid #1d4ed8; outline-offset: 1px; }
.ams .ams-support { display: grid; gap: 10px; margin-top: 12px; }
.ams .ams-sup-slot:empty { display: none; }
.ams .ams-sup-slot:not(:empty) + .ams-help__more { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ams-line); } /* öppet kundtjänstformulär: luft innan länkarna */
.ams .ams-sup-slot .ams-notice { margin: 12px 0 0; }
.ams .ams-field .ams-otp { font: 600 24px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 8px; }
.ams .ams-switch { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ams-heading); cursor: pointer; }
.ams .ams-switch input { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 46px; height: 26px; margin: 0; border-radius: 99px; background: #c7ccd1; cursor: pointer; transition: background .15s; }
.ams .ams-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.ams .ams-switch input:checked { background: var(--ams-dark); }
.ams .ams-switch input:checked::after { transform: translateX(20px); }
.ams .ams-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* ---------- Ram: hälsning, meny, panel ---------- */
.ams .ams-hello { margin: -8px 0 20px; color: var(--ams-quiet); font-size: 15px; }
.ams .ams-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 32px; align-items: start; }
.ams .ams-nav { display: grid; gap: 2px; padding-right: 18px; border-right: 1px solid var(--ams-line); }
.ams .ams-nav button {
	padding: 11px 12px; border: 0; border-radius: 8px; background: none; text-align: left;
	font: 500 15.5px/1.3 var(--ams-sys); color: var(--ams-heading); cursor: pointer;
}
.ams .ams-nav button:hover { background: #f5f5f5; }
.ams .ams-nav button { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Räknaren vid fliken (hur många öppna) — temats orange med mörk text, som knapparna. */
.ams .ams-nav__n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ams-orange); color: var(--ams-on-orange); font: 700 12.5px/1 var(--ams-sys); font-variant-numeric: tabular-nums; }
.ams .ams-nav button[aria-current="page"] { background: #f5f5f5; font-weight: 700; box-shadow: inset 3px 0 0 var(--ams-orange); }
.ams .ams-nav .ams-nav__out { margin-top: 10px; border-top: 1px solid var(--ams-line); border-radius: 0; color: var(--ams-quiet); }
.ams .ams-panel:focus { outline: none; }

/* ---------- Saldokortet: den enda mörka ytan ---------- */
.ams .ams-balance { padding: 24px 26px; border-radius: 14px; background: var(--ams-dark); color: #fff; }
.ams .ams-balance__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }
.ams .ams-eyebrow { font: 600 12px/1 var(--ams-sys); letter-spacing: 1.4px; text-transform: uppercase; color: #c9c9c9; }
.ams .ams-balance__pending { color: var(--ams-orange-hover); font-weight: 600; font-size: 14.5px; }
.ams .ams-balance__num { margin-top: 10px; font: 700 46px/1 var(--ams-inter); letter-spacing: -1.5px; font-variant-numeric: tabular-nums; color: #fff; }
.ams .ams-balance__num small { margin-left: 6px; font: 500 17px/1 var(--ams-inter); letter-spacing: 0; color: #c9c9c9; }
.ams .ams-prog { position: relative; height: 10px; margin: 24px 0 30px; border-radius: 99px; background: #474747; }
.ams .ams-prog__fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--ams-orange); }
.ams .ams-prog__mark { position: absolute; top: 17px; transform: translateX(-50%); font-size: 12px; color: #bdbdbd; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ams .ams-prog__mark::before { content: ""; position: absolute; top: -14px; left: 50%; width: 2px; height: 8px; background: #6a6a6a; }
.ams .ams-prog__mark--last { transform: translateX(-100%); }
.ams .ams-prog__mark--last::before { left: auto; right: 0; }
/* Smalt: talen trängs (1 500 3 000 … 7 500 10 000). Bara strecken + sista talet; trappan under visar alla nivåer. */
@media (max-width: 600px) {
	.ams .ams-prog__mark:not(.ams-prog__mark--last) { font-size: 0; }
}
.ams .ams-balance__hint { color: #e4e4e4; font-size: 15px; }

/* ---------- Översikt ---------- */
.ams .ams-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ams .ams-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* två och två: ordrar + omdömen, eller fyra rutor med poängen på */
.ams .ams-rvhint { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ams .ams-rvhint b { display: block; color: var(--ams-heading); font-size: 16px; }
.ams .ams-rvhint span { display: block; margin-top: 2px; color: var(--ams-quiet); font-size: 14.5px; }
.ams .ams-stat { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ams .ams-stat:hover { border-color: var(--ams-field); box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.ams .ams-stat:hover .ams-stat__go { color: var(--ams-heading); }
.ams .ams-stat:focus-visible { outline: 2px solid var(--ams-ink); outline-offset: 2px; }
.ams .ams-stat__chev { display: none; }
.ams .ams-stat__lbl { color: var(--ams-quiet); font-size: 14px; }
.ams .ams-stat__num { margin-top: 8px; font: 700 30px/1.1 var(--ams-inter); letter-spacing: -.6px; color: var(--ams-heading); font-variant-numeric: tabular-nums; }
.ams .ams-stat__sub { margin-top: 4px; color: var(--ams-quiet); font-size: 13.5px; }
.ams .ams-stat .ams-link { display: inline-block; margin-top: 10px; font-size: 14.5px; }
.ams .ams-stat__lbl, .ams .ams-stat__num, .ams .ams-stat__sub { display: block; }
.ams .ams-warn { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--ams-warn-bg); color: var(--ams-warn-ink); font-size: 15px; line-height: 1.45; }
.ams .ams-warn svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }

/* ---------- Spårning: chip och "Var är paketet?" (Templates mockup, godkänd av Thomas 2026-11-06) ---------- */
.ams .ams-trk-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 16px; text-align: left; border: 1px solid var(--trk-line); background: var(--trk-bg); color: var(--trk-ink); font: 600 14px/1.3 var(--ams-sys); }
.ams .ams-trk-chip svg { width: 16px; height: 16px; flex: none; }
.ams .ams-trk-chip.is-ordered, .ams .ams-trk.is-ordered { --trk-bg: var(--ams-trk-ordered-bg); --trk-line: var(--ams-trk-ordered-line); --trk-ink: var(--ams-trk-ordered-ink); --trk-accent: var(--ams-trk-ordered-accent); }
.ams .ams-trk-chip.is-transit, .ams .ams-trk.is-transit { --trk-bg: var(--ams-trk-transit-bg); --trk-line: var(--ams-trk-transit-line); --trk-ink: var(--ams-trk-transit-ink); --trk-accent: var(--ams-trk-transit-accent); }
.ams .ams-trk-chip.is-pickup, .ams .ams-trk.is-pickup { --trk-bg: var(--ams-trk-pickup-bg);  --trk-line: var(--ams-trk-pickup-line);  --trk-ink: var(--ams-trk-pickup-ink);  --trk-accent: var(--ams-trk-pickup-accent); }
.ams .ams-trk-chip.is-done, .ams .ams-trk.is-done { --trk-bg: var(--ams-trk-done-bg);    --trk-line: var(--ams-trk-done-line);    --trk-ink: var(--ams-trk-done-ink);    --trk-accent: var(--ams-trk-done-accent); }
.ams .ams-trk-chip.is-issue, .ams .ams-trk.is-issue { --trk-bg: var(--ams-trk-issue-bg);   --trk-line: var(--ams-trk-issue-line);   --trk-ink: var(--ams-trk-issue-ink);   --trk-accent: var(--ams-trk-issue-accent); }
.ams .ams-trk { border: 1px solid var(--ams-line); border-radius: 14px; padding: 20px 22px; margin: 0 0 18px; background: #fff; }
.ams .ams-trk__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 18px; }
.ams .ams-trk__head .ams-h3 { margin: 0; font-size: 20px; }
.ams .ams-trk__sub { width: 100%; margin: -2px 0 0; color: var(--ams-quiet); font-size: 15px; }
.ams .ams-trk-steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin: 4px 0 20px; padding: 0; list-style: none; }
.ams .ams-trk-steps li { position: relative; padding: 34px 6px 0; text-align: center; font-size: 15px; color: var(--ams-quiet); }
.ams .ams-trk-steps li::before { content: ""; position: absolute; top: 12px; left: -50%; right: 50%; height: 3px; background: #e2e5e9; }
.ams .ams-trk-steps li:first-child::before { display: none; }
.ams .ams-trk-steps b { display: block; color: var(--ams-heading); font-size: 16px; font-weight: 600; }
.ams .ams-trk-dot { position: absolute; top: 2px; left: 50%; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; border: 3px solid #d5d9df; background: #fff; color: #fff; }
.ams .ams-trk-dot svg { display: none; width: 12px; height: 12px; }
/* Klara steg och linjerna fram till nuvarande har lägets färg (mockupen); grönt bara när paketet är levererat. */
.ams .ams-trk-steps li.is-past, .ams .ams-trk-steps li.is-now { color: var(--ams-text); }
.ams .ams-trk-steps li.is-past::before, .ams .ams-trk-steps li.is-now::before { background: var(--trk-accent); }
.ams .ams-trk-steps li.is-past .ams-trk-dot { background: var(--trk-accent); border-color: var(--trk-accent); }
.ams .ams-trk-steps li.is-past .ams-trk-dot svg { display: block; }
.ams .ams-trk-steps li.is-now .ams-trk-dot { border-color: var(--trk-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--trk-accent) 22%, transparent); }
.ams .ams-trk-steps li.is-now b { color: var(--trk-ink); }
.ams .ams-trk-pickup, .ams .ams-trk-issue { display: grid; gap: 2px; margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--trk-line); background: var(--trk-bg); color: var(--ams-text); font-size: 16px; }
.ams .ams-trk-pickup b { color: var(--ams-heading); }
.ams .ams-trk-pickup__last { margin-top: 4px; font-weight: 700; color: var(--trk-ink); }
.ams .ams-trk-issue { color: var(--trk-ink); font-weight: 600; }
.ams .ams-trk__desc { margin: 0 0 18px; }
.ams .ams-trk-events { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ams-line); }
.ams .ams-trk-events li { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ams-line); font-size: 16px; }
.ams .ams-trk-events time { color: var(--ams-quiet); font-size: 15px; font-variant-numeric: tabular-nums; }
.ams .ams-trk-events b { color: var(--ams-heading); font-weight: 600; }
.ams .ams-trk-events small { display: block; color: var(--ams-quiet); font-size: 14px; }
.ams .ams-trk-older summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--ams-ink); font-weight: 600; list-style: none; }
.ams .ams-trk-older summary::-webkit-details-marker { display: none; }
.ams .ams-trk-older[open] .ams-trk-older__open, .ams .ams-trk-older:not([open]) .ams-trk-older__close { display: none; }
.ams .ams-trk-older .ams-trk-events { border-top: 0; }
.ams .ams-trk-issue + .ams-trk-older { border-top: 1px solid var(--ams-line); }
.ams .ams-trk__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin: 12px 0 0; font-size: 16px; }
.ams .ams-trk__foot a, .ams .ams-trk__ask { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ams-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ams .ams-trk__foot a:hover, .ams .ams-trk__ask:hover { color: var(--ams-heading); }
.ams .ams-trk__tn { color: var(--ams-quiet); overflow-wrap: anywhere; }

/* ---------- Orderrader ---------- */
.ams .ams-orow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px 18px; align-items: center; padding: 16px 18px; border-top: 1px solid var(--ams-line); }
.ams .ams-orow:first-child { border-top: 0; }
.ams .ams-thumbs { display: flex; gap: 6px; }
.ams .ams-thumb { width: 48px; height: 48px; border-radius: 9px; border: 1px solid var(--ams-line); background: #f4f5f6; object-fit: cover; display: block; }
.ams .ams-orow__mid { min-width: 0; }
.ams .ams-orow__id { font-weight: 700; font-size: 15.5px; color: var(--ams-heading); }
.ams .ams-orow__when { margin-left: 8px; font-weight: 400; font-size: 14px; color: var(--ams-quiet); }
.ams .ams-orow__what { margin-top: 3px; font-size: 14.5px; color: var(--ams-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ams .ams-orow__right { display: grid; gap: 6px; justify-items: end; text-align: right; }
.ams .ams-orow__acts { display: flex; gap: 8px; }
.ams .ams-orow__more { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 700; } /* översiktens kompakta lista: länk i stället för knapp (mockupen) */
.ams .ams-more { display: flex; justify-content: center; padding: 14px; border-top: 1px solid var(--ams-line); }

/* ---------- Orderdetalj ---------- */
.ams .ams-back { display: inline-block; margin-bottom: 14px; }
.ams .ams-det { overflow: hidden; background: #fff; border: 1px solid var(--ams-line); border-radius: 12px; }
.ams .ams-det__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--ams-line); }
.ams .ams-det__head h2 { margin: 0; font: 700 22px/1.2 var(--ams-inter); letter-spacing: -.4px; color: var(--ams-heading); }
.ams .ams-det__head p { margin-top: 4px; color: var(--ams-quiet); font-size: 14.5px; }
.ams .ams-ditem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--ams-line); }
.ams .ams-ditem__name { font-weight: 500; color: var(--ams-heading); }
.ams .ams-ditem__qty { margin-top: 2px; font-size: 14px; color: var(--ams-quiet); }
.ams .ams-sum { display: grid; gap: 6px; padding: 16px 22px; font-variant-numeric: tabular-nums; }
.ams .ams-sum div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--ams-text); }
.ams .ams-sum .ams-sum__tot { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--ams-line); font-weight: 700; font-size: 18px; color: var(--ams-heading); }
.ams .ams-sum .ams-sum__vat { margin-top: -2px; font-size: 13.5px; color: var(--ams-quiet); }
.ams .ams-addr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 18px 22px; border-top: 1px solid var(--ams-line); font-size: 15px; line-height: 1.5; }
.ams .ams-addr h3 { margin: 0 0 6px; font: 600 12.5px/1 var(--ams-sys); letter-spacing: .6px; text-transform: uppercase; color: var(--ams-quiet); }
.ams .ams-det__acts { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 22px 20px; border-top: 1px solid var(--ams-line); }
.ams .ams-help { margin-top: 16px; padding: 16px 18px; border-radius: 12px; background: var(--ams-soft); font-size: 15px; line-height: 1.5; }
.ams .ams-help h3 { margin: 0 0 4px; font: 600 15.5px/1.3 var(--ams-inter); color: var(--ams-heading); }
.ams .ams-help p { margin: 0 0 10px; }
.ams .ams-help--quiet { padding: 16px 0 0; border-radius: 0; background: none; border-top: 1px solid var(--ams-line); }
/* Reklamation och ånger: erbjuds, men tonade och små (Thomas 2026-11-09). */
.ams .ams-help__more { margin: 12px 0 0; color: var(--ams-quiet); font-size: 13px; }
.ams .ams-help__more .ams-link { color: var(--ams-quiet); font-weight: 400; font-size: 13px; text-decoration-thickness: 1px; text-decoration-color: rgba(107, 114, 128, .45); text-underline-offset: 2px; }
.ams .ams-help__more .ams-link:hover { color: var(--ams-ink); text-decoration-color: currentColor; }
.ams .ams-help__note { display: block; margin-top: 4px; font-size: 13px; }
.ams .ams-step { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin: 8px 0 0; padding: 12px 14px; border: 1px solid var(--ams-line); border-radius: 10px; background: #fff; font-size: 15px; }
.ams .ams-step b { color: var(--ams-heading); }
.ams .ams-step__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.ams .ams-step__done { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
.ams .ams-step--hidden { justify-content: space-between; color: var(--ams-quiet); background: transparent; border-style: dashed; }
/* Reklamation i kontot: ett vitt formulärkort i hjälprutans ställe. */
.ams .ams-rk { background: #fff; border: 1px solid var(--ams-line); padding: 20px 22px; }
.ams .ams-rk h3 { font-size: 17px; margin-bottom: 2px; }
.ams .ams-rk__form { display: grid; gap: 20px; margin-top: 14px; }
.ams .ams-rk__sec { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.ams .ams-rk__sec legend, .ams .ams-rk__label { padding: 0; margin-bottom: 8px; font: 600 14px/1.3 var(--ams-sys); color: var(--ams-heading); }
.ams .ams-rk__label .ams-small { font-weight: 400; }
.ams .ams-rk__items { border: 1px solid var(--ams-line); border-radius: 10px; }
.ams .ams-rk__item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--ams-line); }
.ams .ams-rk__item:first-child { border-top: 0; }
.ams .ams-rk__item label { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; min-height: 48px; cursor: pointer; }
.ams .ams-rk__item.is-off label { cursor: default; opacity: .55; }
.ams .ams-rk input[type="checkbox"], .ams .ams-rk input[type="radio"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ams-dark); }
.ams .ams-rk .ams-thumb { flex: none; }
.ams .ams-rk__name { display: grid; gap: 2px; min-width: 0; font-weight: 500; color: var(--ams-heading); overflow-wrap: anywhere; }
.ams .ams-rk__meta { font-weight: 400; font-size: 13.5px; color: var(--ams-quiet); }
.ams .ams-rk__qty { flex: none; height: 40px; padding: 0 10px; border: 1px solid var(--ams-field); border-radius: 8px; background: #fff; color: var(--ams-heading); font: 400 15px/1 var(--ams-sys); }
.ams .ams-rk__radios { display: grid; gap: 8px; }
.ams .ams-rk__radio { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border: 1px solid var(--ams-field); border-radius: 10px; background: #fff; color: var(--ams-heading); cursor: pointer; }
.ams .ams-rk__radio:has(input:checked) { border-color: var(--ams-dark); box-shadow: inset 0 0 0 1px var(--ams-dark); }
.ams .ams-rk__radio:focus-within, .ams .ams-rk__pick:focus-within { outline: 2px solid #1d4ed8; outline-offset: 1px; }
.ams .ams-rk__check { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ams-heading); cursor: pointer; }
.ams .ams-rk__files { display: grid; gap: 8px; }
.ams .ams-rk__files:empty { display: none; }
.ams .ams-rk__file { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--ams-line); border-radius: 10px; }
.ams .ams-rk__fname { display: grid; gap: 2px; flex: 1; min-width: 0; font-size: 14.5px; color: var(--ams-heading); overflow-wrap: anywhere; }
.ams .ams-rk__pick { position: relative; justify-self: start; }
.ams .ams-rk__pick input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ams .ams-rk__out:empty { display: none; }
.ams .ams-rk__out .ams-notice { margin: 0; }
.ams .ams-rk__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.ams .ams-rk-done { background: var(--ams-green-bg); outline: none; }
.ams .ams-rk-done h3 { color: var(--ams-green); }
.ams .ams-bonus { padding: 18px 20px; border: 1px solid #f6c7b2; border-radius: 12px; background: #fff7f2; display: grid; gap: 8px; justify-items: start; }
.ams .ams-bonus h3 { margin: 0; font: 600 17px/1.35 var(--ams-inter); color: var(--ams-heading); }
.ams .ams-bonus p { color: var(--ams-text); font-size: 15px; }
.ams .ams-bonus__out:empty { display: none; }
.ams .ams-bonus__out { width: 100%; }
.ams .ams-bonus__out .ams-notice { margin: 4px 0 0; }
.ams .ams-todo { padding: 14px 16px 16px; border-radius: 12px; background: var(--ams-warn-bg); }
.ams .ams-eyebrow--dark { color: var(--ams-warn-ink); }

/* ---------- Kuponger ---------- */
.ams .ams-coupons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.ams .ams-coupon { display: grid; gap: 10px; align-content: space-between; min-height: 150px; }
.ams .ams-coupon--used { opacity: .55; }
.ams .ams-coupon > .ams-pill { justify-self: start; }
.ams .ams-coupon__code { margin-top: 4px; color: var(--ams-quiet); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ams .ams-coupon__acts { display: grid; gap: 6px; }
.ams .ams-coupon__acts .ams-btn { justify-self: start; }
.ams .ams-coupon__out { margin: 0; font-size: 14px; }
.ams .ams-coupon__out:empty { display: none; }
.ams .ams-coupon__out.is-ok { color: var(--ams-green); }
.ams .ams-coupon__out.is-err { color: var(--ams-danger); }
.ams .ams-coupon__val { font: 700 28px/1 var(--ams-inter); letter-spacing: -.6px; color: var(--ams-heading); font-variant-numeric: tabular-nums; }
.ams .ams-coupon__cost { margin-top: 6px; color: var(--ams-quiet); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.ams .ams-coupon__cost + .ams-coupon__cost { margin-top: 2px; }
.ams .ams-coupon__msg { margin: 8px 0 6px; color: var(--ams-heading); font-size: 15.5px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.ams .ams-coupon__left { color: var(--ams-quiet); font-size: 14.5px; font-weight: 600; }
.ams .ams-confirm { display: grid; gap: 8px; font-size: 14.5px; color: var(--ams-heading); }
.ams .ams-confirm__row { display: flex; gap: 8px; }
.ams .ams-confirm__row .ams-btn { flex: 1; }
.ams .ams-confirm--narrow { max-width: 420px; gap: 12px; }
.ams .ams-code { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border: 1px dashed #b9bec4; border-radius: 9px; font: 600 15px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ams-heading); overflow-wrap: anywhere; }
.ams .ams-code button { flex: none; padding: 7px 10px; border: 0; border-radius: 7px; background: #f1f2f4; font: 600 13px/1 var(--ams-sys); color: var(--ams-heading); cursor: pointer; }
.ams .ams-code button:hover { background: #e6e8eb; }

/* ---------- Kupongstegen: trappa (Thomas valde B 2026-10-29) ---------- */
.ams .ams-stairs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: end; }
.ams .ams-stair { display: grid; gap: 8px; justify-items: center; text-align: center; min-width: 0; }
.ams .ams-stair__pct { font: 600 13.5px/1 var(--ams-sys); color: var(--ams-quiet); font-variant-numeric: tabular-nums; }
.ams .ams-stair.is-ok .ams-stair__pct { color: var(--ams-green); }
.ams .ams-stair__bar {
	width: 100%; height: calc(64px + var(--h, 0) * 90px); display: grid; place-items: center;
	border: 1px solid var(--ams-line); border-radius: 10px 10px 4px 4px; background: #f3f4f6;
	font: 700 18px/1 var(--ams-inter); color: #8a9097; font-variant-numeric: tabular-nums; letter-spacing: -.3px;
}
/* Fullt steg = klart att lösa in: hel orange med mörk text (kontrastbeslutet 5,4:1). Halvfyllt = ljus
   persika upp till nivån med en diskret 1 px linje, så att det syns att man inte är framme än (Thomas 2026-10-29). */
.ams .ams-stair.is-ok .ams-stair__bar { background: var(--ams-orange); border-color: var(--ams-orange); color: var(--ams-on-orange); }
/* Ej nått: fyllt nerifrån så långt man kommit, tunn orange linje vid nivån (Thomas 2026-10-29). */
.ams .ams-stair:not(.is-ok) .ams-stair__bar {
	color: var(--ams-quiet);
	background: linear-gradient(to top,
		#fdeee6 0 calc(var(--f, 0) * 100% - 1px),
		#f6b496 calc(var(--f, 0) * 100% - 1px) calc(var(--f, 0) * 100%),
		#f3f4f6 calc(var(--f, 0) * 100%));
}
.ams .ams-stair__pts { font-size: 13px; color: var(--ams-quiet); font-variant-numeric: tabular-nums; }
.ams .ams-stair__pct2 { display: none; }
.ams .ams-stair__act { min-height: 40px; display: grid; place-items: center; }
.ams .ams-stair__act .ams-btn { background: #fff; color: var(--ams-heading); border: 1px solid var(--ams-field); border-radius: 8px; }
.ams .ams-stair__act .ams-btn:hover { border-color: #9aa1a8; background: #fff; }
.ams .ams-stair__left { font-size: 13px; color: var(--ams-quiet); font-variant-numeric: tabular-nums; }
.ams .ams-claim-slot:empty { display: none; }
.ams .ams-claim { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--ams-soft); }
/* Smal skärm: trappan liggande — staplarna växer åt höger, så det blir läsbart. */
@media (max-width: 600px) {
	.ams .ams-stairs { grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: stretch; }
	.ams .ams-stair { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bar act" "pts act"; justify-items: start; text-align: left; gap: 4px 12px; }
	.ams .ams-stair__pct { display: none; }
	.ams .ams-stair__pct2 { display: inline; }
	.ams .ams-stair__bar { grid-area: bar; height: 40px; width: calc(40% + var(--h, 0) * 60%); place-items: center start; padding-left: 12px; border-radius: 4px 10px 10px 4px; font-size: 16px; }
	.ams .ams-stair:not(.is-ok) .ams-stair__bar {
		background: linear-gradient(to right,
			#fdeee6 0 calc(var(--f, 0) * 100% - 1px),
			#f6b496 calc(var(--f, 0) * 100% - 1px) calc(var(--f, 0) * 100%),
			#f3f4f6 calc(var(--f, 0) * 100%));
	}
	.ams .ams-stair__pts { grid-area: pts; }
	.ams .ams-stair__act { grid-area: act; min-height: 0; }
}

/* ---------- Historik, returer ---------- */
.ams .ams-hrow, .ams .ams-ret { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 14px 18px; border-top: 1px solid var(--ams-line); align-items: center; }
.ams .ams-hrow:first-child, .ams .ams-ret:first-child { border-top: 0; }
.ams .ams-hrow__t, .ams .ams-ret__t { font-weight: 600; color: var(--ams-heading); }
.ams .ams-hrow__m, .ams .ams-ret__m { margin-top: 2px; font-size: 14px; color: var(--ams-quiet); }
.ams .ams-ret__s { margin-top: 4px; font-size: 14.5px; color: var(--ams-text); }

/* ---------- Lämna omdöme (Bonuspoäng) ---------- */
.ams .ams-rv { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; margin: 0; padding: 12px 18px; border: 0; border-top: 1px solid var(--ams-line); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ams .ams-rv:first-child { border-top: 0; border-radius: 12px 12px 0 0; }
.ams .ams-rv:last-child { border-radius: 0 0 12px 12px; }
.ams .ams-rv:hover { background: #fafafa; }
.ams .ams-rv:focus-visible { outline: 3px solid #1d4ed8; outline-offset: -3px; } /* samma fokusring som resten av kontot */
.ams .ams-rv:disabled { cursor: progress; }
.ams .ams-rv__name, .ams .ams-rv__m { display: block; }
.ams .ams-rv__go { font-size: 22px; line-height: 1; color: var(--ams-quiet); }
.ams .ams-rvbox { display: grid; gap: 28px; }
.ams .ams-rv__edit { font-size: 14.5px; font-weight: 600; color: var(--ams-ink); text-decoration: underline; text-underline-offset: 3px; }
.ams .ams-rv__stars { color: var(--ams-ink); letter-spacing: 1px; }
.ams .ams-rv__stars span { color: #d4d6d9; }
.ams .ams-nowrap { white-space: nowrap; }
.ams .ams-rv__done { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: 5px; padding: 2px 9px 2px 3px; border-radius: 999px; background: var(--ams-done-bg); font-size: 13px; font-weight: 600; color: var(--ams-done); }
.ams .ams-rv__check { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ams-done); color: #fff; font-size: 10px; line-height: 1; }
.ams .ams-rv__side { display: grid; justify-items: end; gap: 6px; }
.ams .ams-rv__pts { font-size: 14px; font-weight: 700; color: var(--ams-done); white-space: nowrap; }
.ams .ams-rv__pts.is-pending { color: var(--ams-quiet); font-weight: 600; }
/* Lämnade omdömen: lägre och tonade, så att produkterna utan omdöme står i fokus (Thomas 2026-11-09). */
.ams .ams-rv.is-done { padding-top: 10px; padding-bottom: 10px; gap: 12px; background: #fbfbfa; }
.ams .ams-rv.is-done:hover { background: #f5f5f4; }
.ams .ams-rv.is-done > .ams-thumb { width: 36px; height: 36px; border-radius: 7px; opacity: .85; }
.ams .ams-rv__body { display: block; min-width: 0; }
.ams .ams-rv.is-done .ams-rv__name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--ams-text); }
.ams .ams-rv__nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ams .ams-rv.is-done .ams-rv__m { margin-top: 1px; padding-left: 24px; font-size: 13.5px; }
.ams .ams-rv.is-done .ams-rv__edit { font-size: 13.5px; font-weight: 600; }
.ams .ams-rv.is-done .ams-rv__pts { flex: none; margin-left: auto; padding-left: 8px; font-size: 13.5px; }
.ams .ams-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Mycket smalt: bilden tar för mycket av textens bredd (ord bröts mitt i). */
@media (max-width: 360px) {
	.ams .ams-rv { grid-template-columns: minmax(0, 1fr) auto; }
	.ams .ams-rv > .ams-thumb { display: none; }
}
.ams .ams-rv__prog { display: grid; gap: 8px; margin: 0 0 14px; font-size: 14.5px; color: var(--ams-text); }
.ams .ams-rv__prog b { color: var(--ams-heading); }
.ams .ams-rv__bar { display: block; height: 6px; border-radius: 99px; background: #eceef0; overflow: hidden; }
.ams .ams-rv__bar span { display: block; height: 100%; border-radius: 99px; background: var(--ams-done-bar); }
.ams .ams-rvsec > .ams-lead { margin-bottom: 12px; }
.ams .ams-rv[hidden] { display: none; }
.ams .ams-rv__name { font-weight: 500; color: var(--ams-heading); overflow-wrap: anywhere; }
.ams .ams-rv__m { margin-top: 2px; font-size: 14px; color: var(--ams-quiet); }
.ams .ams-rv__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 14px; }
.ams .ams-rv__out:not(:empty) { margin-top: 12px; }
.ams .ams-plus { font-weight: 700; color: var(--ams-green); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ams .ams-minus { font-weight: 700; color: var(--ams-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Uppgifter ---------- */
.ams .ams-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ams .ams-kv { display: grid; gap: 2px; margin: 0 0 14px; }
.ams .ams-kv dt { font: 600 12.5px/1.3 var(--ams-sys); letter-spacing: .5px; text-transform: uppercase; color: var(--ams-quiet); }
.ams .ams-kv dd { margin: 0; font-size: 16px; color: var(--ams-heading); overflow-wrap: anywhere; }
.ams .ams-danger { margin-top: 14px; border-color: var(--ams-danger-line); background: var(--ams-danger-bg); }
.ams .ams-danger h3 { color: var(--ams-danger); }

/* ---------- Mobil och smala skärmar (temats brytpunkt 993 px) ---------- */
@media (max-width: 992px) {
	.ams .ams-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.ams .ams-nav {
		display: flex; gap: 8px; overflow-x: auto; padding: 0 0 4px; border: 0;
		scrollbar-width: none; -webkit-overflow-scrolling: touch;
	}
	.ams .ams-nav::-webkit-scrollbar { display: none; }
	.ams .ams-nav button {
		flex: none; min-height: 44px; padding: 0 16px; border: 1px solid var(--ams-chip); border-radius: 999px;
		font: 600 15px/1 var(--ams-sys); white-space: nowrap;
	}
	.ams .ams-nav button[aria-current="page"] { background: var(--ams-dark); color: #fff; border-color: var(--ams-dark); box-shadow: none; }
	.ams .ams-nav .ams-nav__out { margin: 0; border-top: 1px solid var(--ams-chip); border-radius: 999px; }
	.ams .ams-hello { margin-top: -4px; margin-bottom: 14px; }
	.ams .ams-login .ams-h2, .ams .ams-h2, .ams .ams-det__head h2 { font-size: 20px; }
	.ams .ams-info { grid-template-columns: minmax(0, 1fr); }
	/* Tryckytor minst 44 px på pekskärm: små knappar och fristående textlänkar (inte länkar i löptext). */
	.ams .ams-btn--sm { min-height: 44px; }
	.ams .ams-back, .ams .ams-help__more .ams-link, .ams .ams-links .ams-link, .ams .ams-rk__acts .ams-link, .ams .ams-rv__acts .ams-link { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 700px) {
	.ams .ams-stats { gap: 8px; }
	.ams .ams-stats .ams-card { padding: 14px 12px; display: flex; flex-direction: column; }
	.ams .ams-stat__num { margin-top: auto; padding-top: 8px; font-size: 24px; } /* talen i linje även när en etikett bryts på två rader */
	.ams .ams-stat__lbl { font-size: 13px; }
	.ams .ams-stat__sub, .ams .ams-stat .ams-link { display: none; }
	/* Länktexten får inte plats på mobil: en pil i hörnet visar att rutan går att trycka på. */
	.ams .ams-stat__chev { display: block; position: absolute; top: 10px; right: 12px; color: var(--ams-ink); font: 700 22px/1 var(--ams-sys); }
	.ams .ams-stat__lbl { padding-right: 18px; }
	/* Orderraden på mobil (Thomas 2026-11-08: "designen kan förbättras på mobil"), som Templates mockup:
	   ordernummer och datum till vänster, beloppet till höger på samma rad, produkten under och status
	   eller spårning på egen rad. En produktbild räcker. */
	.ams .ams-orow { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "th mid amt" "th st st" "acts acts acts"; gap: 2px 12px; align-items: start; padding: 14px; }
	.ams .ams-orow .ams-thumbs { grid-area: th; }
	.ams .ams-orow .ams-thumbs .ams-thumb + .ams-thumb { display: none; }
	.ams .ams-orow__mid { grid-area: mid; }
	.ams .ams-orow__right { display: contents; }
	.ams .ams-orow__right .ams-amount { grid-area: amt; padding-top: 1px; }
	.ams .ams-orow__right .ams-pill, .ams .ams-orow__right .ams-trk-chip { grid-area: st; justify-self: start; margin-top: 8px; }
	.ams .ams-orow__acts { grid-area: acts; margin-top: 10px; }
	.ams .ams-orow__acts .ams-orow__more { margin-top: 0; }
	.ams .ams-orow__acts .ams-btn { flex: 1; }
	.ams .ams-ditem, .ams .ams-sum, .ams .ams-addr, .ams .ams-det__acts, .ams .ams-det__head { padding-left: 16px; padding-right: 16px; }
	.ams .ams-addr { grid-template-columns: minmax(0, 1fr); }
	.ams .ams-rk { padding: 16px; }
	.ams .ams-rk__item { gap: 10px; padding: 8px 12px; }
	.ams .ams-rk__item label { gap: 10px; }
	.ams .ams-rk .ams-thumb { width: 40px; height: 40px; }
	.ams .ams-rk .ams-confirm__row { max-width: none; }
	.ams .ams-det__acts .ams-btn { flex: 1; }
	.ams .ams-balance { padding: 20px; }
	.ams .ams-balance__num { font-size: 38px; }
}
@media (max-width: 600px) {
	/* Spårningen på mobil: lodrät stegvisare och händelser i en spalt (mockupen). */
	.ams .ams-trk { padding: 16px 14px; }
	.ams .ams-trk-steps { grid-template-columns: minmax(0, 1fr); margin: 0 0 14px; }
	.ams .ams-trk-steps li { min-height: 44px; padding: 0 0 18px 40px; text-align: left; }
	.ams .ams-trk-steps li::before { top: -16px; left: 11px; right: auto; width: 3px; height: calc(100% - 4px); }
	.ams .ams-trk-dot { top: 0; left: 0; margin-left: 0; }
	.ams .ams-trk-steps b { display: inline; margin-right: 8px; }
	.ams .ams-trk-events li { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 360px) {
	/* 320 px: "Bonuspoäng" ryms inte i en tredjedel — rutorna blir rader med talet till höger. */
	.ams .ams-stats { grid-template-columns: minmax(0, 1fr); }
	.ams .ams-stats .ams-card { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
	.ams .ams-stat__num { margin-top: 0; padding-top: 0; font-size: 22px; margin-left: auto; }
	.ams .ams-stat__chev { position: static; }
	.ams .ams-stat__lbl { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.ams .ams-switch input, .ams .ams-switch input::after { transition: none; }
}