/* account-f2-overview.css — W2 (kontosidor-design 2026-10-20), översikten /mitt-konto/ + hero (Fix 206) + tillbaka-länk.
   Bygger på F2-KONTRAKT.md (account-f2.css = bas). Alla regler prefixade .fma-f2. Tokens via var(--f2-*), inga hex.
   Fixarnas inline-<style> (198/206) kommer SIST i cascaden → här används (0,3,0)+ för att slå dem där det behövs. */

/* ---------- Hero (Fix 206) ---------- */
.fma-f2 .fnmk-hero { position: relative; max-width: 780px; margin: 0 auto 18px; height: 280px; border-radius: var(--f2-radius-lg, 24px); overflow: hidden; background: var(--f2-tint); }
.fma-f2 .fnmk-hero__img { position: absolute; inset: 0; width: 100%; height: 100% !important; max-width: none; object-fit: cover; object-position: 62% 45%; display: block; border: 0 !important; outline: 0 !important; box-shadow: none !important; margin: 0 !important; }
.fma-f2 .fnmk-hero__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 32px; background: linear-gradient(90deg, rgba(255, 251, 251, .92) 0%, rgba(255, 251, 251, .72) 38%, rgba(255, 251, 251, 0) 68%); }
.fma-f2 .fnmk-hero__greet { margin: 0; color: var(--f2-green); font-family: 'gelica', Georgia, serif; font-weight: 500; text-transform: uppercase; font-size: 40px; line-height: 1.08; letter-spacing: .02em; }
.fma-f2 .fnmk-hero__next { margin: 8px 0 0; color: var(--f2-green); font-family: 'gelica', Georgia, serif; font-size: 16px; font-weight: 600; line-height: 1.4; }

/* ---------- Flikrad (Fix 206, kontrakt §7 .f2-tabs; tillbaka 28/10, N1) ---------- */
.fma-f2 .fnmk-tabs { max-width: 780px; margin: 0 auto 24px; }

/* ---------- Pausat läge (Fix 198, Jossan 4.2) ---------- */
.fma-f2 .fnm-konto-v2 .fnmk-paused { display: block; margin: 0 0 22px; padding: 20px 24px; }
.fma-f2 .fnm-konto-v2 .fnmk-paused__title { margin: 0 0 6px; font-family: 'gelica', Georgia, serif; font-weight: 500; font-size: 18px; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; color: var(--f2-green); }
.fma-f2 .fnm-konto-v2 .fnmk-paused__text { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--f2-green); }
.fma-f2 .fnm-konto-v2 .fnmk-paused__text a { color: var(--f2-orange); text-decoration: underline; }
.fma-f2 .fnm-konto-v2 .fnmk-paused__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* ---------- Diskret "Avsluta prenumeration" (kontrakt §3 .f2-link-quiet) — bär fma-dashboard-button för script.js' popup-öppnare,
   så Wetails 64px/orange-bas (0,4,1) måste nollas här med !important. ---------- */
.fma-f2 .fnm-konto-v2 .fnmk-quiet.fma-dashboard-button,
.woocommerce-account.fma-f2 .fma-account-page .fnm-konto-v2 button.fnmk-quiet.fma-dashboard-button {
	display: inline !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; height: auto !important;
	margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
	font: 400 14px/1.4 'gelica', Georgia, serif !important; color: var(--f2-mut) !important; text-decoration: underline !important; text-underline-offset: 3px; cursor: pointer; white-space: normal;
}
.fma-f2 .fnm-konto-v2 .fnmk-quiet.fma-dashboard-button:hover { color: var(--f2-green) !important; }

/* ---------- Statusetikett: kontraktets .f2-pill ritar sin egen prick (::before) → 198:s egen prick-span döljs. ---------- */
.fma-f2 .fnm-konto-v2 .fnmk-badge.f2-pill .fnmk-badge-dot { display: none; }

/* ---------- Länk-CTA:er i korten (Ändra betalningsmetod / Se orderhistorik / Ändra kontouppgifter) ---------- */
.fma-f2 .fnm-konto-v2 .fnmk-link.f2-link-cta { white-space: nowrap; }

/* ---------- Mobil ---------- */
@media (max-width: 768px) {
	/* Feedback 27/10 (R4): heron högre (220→280 / 180→210) och utsnittet något lägre, så råvarorna på bordet syns mer utan att hundarnas huvuden kapas. */
	.fma-f2 .fnmk-hero { height: 210px; border-radius: var(--f2-radius, 16px); margin-bottom: 16px; }
	.fma-f2 .fnmk-hero__overlay { padding: 0 20px; background: linear-gradient(90deg, rgba(255, 251, 251, .94) 0%, rgba(255, 251, 251, .78) 50%, rgba(255, 251, 251, .1) 85%); }
	.fma-f2 .fnmk-hero__greet { font-size: 28px; }
	.fma-f2 .fnmk-hero__next { font-size: 14px; }
	.fma-f2 .fnmk-tabs { display: none; }
}
@media (max-width: 600px) {
	.fma-f2 .fnm-konto-v2 .fnmk-paused { padding: 16px; }
	.fma-f2 .fnm-konto-v2 .fnmk-paused__actions { flex-direction: column; align-items: stretch; gap: 14px; }
	.fma-f2 .fnm-konto-v2 .fnmk-paused__actions .fnmk-btn { width: 100%; }
}

/* W14 (mobilgranskning 21/10, fynd 2): de diskreta länkarna i "Hantera prenumeration" har 44 px osynlig
   träffyta (account-f2.css §11). När raden staplas (≤600 px) får länkarna precis så mycket luft att
   ytorna inte tar från varandra eller från Pausa/"Se orderhistorik": 20 px-länk under knapp → 13 px,
   två länkar → 25 px, länk över 14 px-CTA → 28 px. (0,7,0) slår overview-regeln `margin:0 !important`. */
@media (max-width: 600px) {
	.woocommerce-account.fma-f2 .fma-account-page .fnm-konto-v2 .fnmk-btnrow > .fnmk-btn + .f2-link-quiet { margin-top: 3px !important; }
	.woocommerce-account.fma-f2 .fma-account-page .fnm-konto-v2 .fnmk-btnrow > .f2-link-quiet + .f2-link-quiet { margin-top: 15px !important; }
	.fma-f2 .fnm-konto-v2 .fnmk-row > .fnmk-btnrow ~ .f2-link-cta { margin-top: 16px; }
	/* Pausbannern: knapp + "Ändra foderplan innan start →" (14 px, träffyta 44) — 16 px i st.f. 14. */
	.fma-f2 .fnm-konto-v2 .fnmk-paused__actions { gap: 16px; }
}
/* Codex R8 (High): orderdetaljens fot (Fix 372) staplar "← Tillbaka till Mitt konto" och "Alla beställningar →"
   (14 px höga, 44 px träffyta) med 10 px radavstånd ≤600 ⇒ 19,6 px överlapp. 30 px radavstånd (≥ 44 − 14,4)
   i alla bredder ≤767 där foten kan brytas; påverkar inte foten när länkarna står på en rad. */
@media (max-width: 767px) {
	.fma-f2 .fnmk-order .fnmk-orderfoot { row-gap: 30px; }
}