/* ==========================================================================
   14 – MIN KONTO OG INNLOGGING
   --------------------------------------------------------------------------
   Min konto: sidemeny til venstre (knapper på mobil), innhold til høyre.
   Innlogging: to hvite kort side om side + infokort under.
   Maler: woocommerce/myaccount/*.php.
   ========================================================================== */

/* ---- Min konto: to kolonner --------------------------------------------- */
.woocommerce-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--kc-luft-8);
}

/* Venstre kolonne: menyen og «Din kontakt» (woocommerce/myaccount/navigation.php). */
.kc-konto__meny {
	flex: 1 1 calc(var(--kc-meny-bredde) * 0.85);
	max-width: var(--kc-meny-bredde);
	display: flex;
	flex-direction: column;
	gap: var(--kc-luft-4);
}

.woocommerce-account .woocommerce-MyAccount-content {
	flex: 999 1 calc(var(--kc-kort-min) * 3);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--kc-luft-6);
}

/* Innloggingssiden bruker ikke to-kolonne-oppsettet over. */
.woocommerce-account:not(.logged-in) .woocommerce {
	display: block;
}


/* ---- Menyen -------------------------------------------------------------
   Menypunktene er vanlige knapper (.kc-knapp, valgt = --primaer), satt i
   woocommerce/myaccount/navigation.php. Slik vises de på mobil – samme
   mønster som Min konto på kanoncon.no.
   Bevisst variant: fra 850 px blir de en sidemeny i et hvitt kort. */
.kc-kontomeny {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kc-luft-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 849px) {
	.kc-konto__meny {
		max-width: none;
	}
}

@media (min-width: 850px) {
	.kc-kontomeny {
		flex-direction: column;
		gap: 0;
		padding: var(--kc-luft-2);
		background: var(--kc-white);
		border: var(--kc-strek) solid var(--kc-line);
		border-radius: var(--kc-r-lg);
	}

	/* Variant av .kc-knapp: menypunkt i stedet for pille. */
	.kc-kontomeny .kc-knapp {
		justify-content: flex-start;
		width: 100%;
		height: auto;
		padding: var(--kc-luft-2) var(--kc-luft-4);
		border: 0;
		border-radius: var(--kc-r-md);
		background: transparent;
		color: var(--kc-ink);
		font-size: var(--kc-tekst-liten);
		line-height: var(--kc-lh-liten);
		font-weight: var(--kc-vekt-fet);
	}

	.kc-kontomeny .kc-knapp:hover,
	.kc-kontomeny .kc-knapp--primaer {
		background: var(--kc-surface-raised);
		color: var(--kc-ink);
	}
}


/* ---- Din kontakt --------------------------------------------------------- */
.kc-kontakt {
	display: flex;
	flex-direction: column;
	gap: var(--kc-luft-2);
	font-size: var(--kc-tekst-liten);
	line-height: var(--kc-lh-liten);
}

.kc-kontakt__navn {
	font-size: var(--kc-tekst-body);
	line-height: var(--kc-lh-body);
	font-weight: var(--kc-vekt-fet);
}


/* ---- Bekreftelse etter sendt ordre --------------------------------------- */
.kc-bekreftelse {
	display: flex;
	align-items: flex-start;
	gap: var(--kc-luft-4);
}

.kc-bekreftelse p {
	margin: var(--kc-luft-2) 0 0;
	font-size: var(--kc-tekst-liten);
	line-height: var(--kc-lh-liten);
}


/* ---- Innlogging ---------------------------------------------------------- */
.kc-innlogging {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(calc(var(--kc-kort-min) * 1.7), 1fr));
	gap: var(--kc-luft-6) var(--kc-luft-8);
	max-width: var(--kc-skjema-maks);
	margin-top: var(--kc-luft-8);
}

.kc-innlogging__fordeler {
	max-width: var(--kc-skjema-maks);
	margin-top: var(--kc-luft-6);
}

.kc-innlogging__fordeler h2 {
	margin-bottom: var(--kc-luft-4);
	font-family: var(--kc-font);
	font-size: var(--kc-tekst-body);
	line-height: var(--kc-lh-body);
	font-weight: var(--kc-vekt-fet);
}