/*
 * my-account.css — hela kontosidan: inloggning, sidomeny, order, adresser
 * och kontouppgifter.
 *
 * Laddas bara när is_account_page() är sann. Woo:s egna stilmallar är
 * avstängda där (se inc/woocommerce.php), alltså äger den här filen allt
 * som ritas i vyn — inklusive fält, knappar, tabeller och meddelanden.
 * Det är också skälet till att filen är stor: den ersätter ~116 kB Woo-CSS
 * med ~8 kB som bara rör den här vyn.
 *
 * Lagren är deklarerade i base.css. Skriv aldrig !important här.
 */

@layer layout {
	/*
	 * Brödtextspalten på 780 px gäller redaktionella sidor. Kontosidan är
	 * ett gränssnitt med sidomeny, och den ska ha hela wrappen.
	 */
	.woocommerce-account .entry__content > * {
		max-width: none;
	}

	/*
	 * Luft under rubriken. På en redaktionell sida följer brödtext efter
	 * H1:an och radavståndet räcker som avstånd — här följer första
	 * flikens platta direkt, och utan marginal låg "Dashboard" så tätt
	 * under "My account" att de lästes som en rubrik med underrubrik.
	 */
	.woocommerce-account .entry__title {
		margin-block-end: var(--space-m);
	}

	/*
	 * Sidomenyn och innehållet ligger bredvid varandra först när det finns
	 * en meny att lägga där — utloggad står bara inloggningskortet i
	 * `.woocommerce`, och det ska centreras, inte pressas ut i en spalt.
	 */
	@media (min-width: 900px) {
		.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
			display: grid;
			grid-template-columns: 15rem minmax(0, 1fr);
			align-items: start;
			gap: var(--space-xl);
		}

		/*
		 * Aviseringar hör till innehållet, inte till menyn. Utan den här
		 * raden hamnade "Adressen har sparats" i vänsterspalten.
		 */
		.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
			grid-column: 1 / -1;
		}
	}
}

@layer components {

	:root {
		/*
		 * Ögat i lösenordsfältet. Woo ritar knappen tom och lägger ikonen i
		 * sin egen CSS — den är avstängd här. Ikonen läggs som mask och
		 * inte som bakgrundsbild, så att den ärver textfärgen och därmed
		 * kan mörkna vid hover utan en andra bild.
		 */
		--lg-icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.7-6.4 10-6.4S22 12 22 12s-3.7 6.4-10 6.4S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.9'/%3E%3C/svg%3E");
	}

	/* ---------------------------------------------------------------- */
	/* Profilkortet ovanför menyn                                        */
	/* ---------------------------------------------------------------- */

	/*
	 * Bilden, namnet och vägen till profilfliken. Kortet står i
	 * vänsterspalten på alla flikar — annars syns valet man just gjort
	 * bara på den flik där man gjorde det.
	 */
	.account-card {
		display: grid;
		justify-items: center;
		gap: var(--space-3xs);
		margin-block-end: var(--space-m);
		padding-block-end: var(--space-m);
		border-block-end: 1px solid var(--color-line);
		text-align: center;
	}

	.account-card__avatar {
		display: block;
		width: 72px;
		height: 72px;
		border-radius: var(--radius-pill);
		background: var(--color-surface);
		overflow: hidden;
	}

	.account-card__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.account-card__name {
		color: var(--color-ink);
		font-size: var(--step-0);
		font-weight: 600;
	}

	/*
	 * Kortet står inuti `<nav>`, alltså träffas den här länken av menyns
	 * egen regel för flikarna — platta, ram och pillerform. Den ska inte
	 * se ut som en flik, så plattan nollas här. Kortets klass står med i
	 * selektorn för att väga tyngre än menyns två delar.
	 */
	.account-card .account-card__edit {
		display: inline;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		color: var(--color-body);
		font-size: var(--step--1);
		font-weight: 400;
		text-decoration: none;
	}

	.account-card .account-card__edit:hover,
	.account-card .account-card__edit:focus-visible {
		background: none;
		color: var(--color-accent-ink);
		text-decoration: underline;
	}

	/* På en telefon ligger menyn som en rad — då är kortet en rad det med. */
	@media (max-width: 899px) {
		.account-card {
			grid-template-columns: auto minmax(0, 1fr);
			justify-items: start;
			gap: 0 var(--space-s);
			text-align: start;
		}

		.account-card__avatar {
			grid-row: span 2;
			width: 56px;
			height: 56px;
		}
	}

	/* ---------------------------------------------------------------- */
	/* Sidomenyn                                                         */
	/* ---------------------------------------------------------------- */

	.woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-direction: column;
		gap: 2px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.woocommerce-MyAccount-navigation a {
		display: block;
		padding: var(--space-xs) var(--space-s);
		border-radius: var(--radius-card);
		color: var(--color-ink);
		font-size: var(--step--1);
		font-weight: 500;
		text-decoration: none;
		transition: background-color 0.15s, color 0.15s;
	}

	.woocommerce-MyAccount-navigation a:hover,
	.woocommerce-MyAccount-navigation a:focus-visible {
		background: var(--color-surface);
	}

	/*
	 * Aktivt läge markeras med platta och färg, inte med fetstil. Fetstilen
	 * hade ändrat radens bredd och fått hela listan att hoppa i sidled när
	 * man klickar sig mellan flikarna.
	 */
	.woocommerce-MyAccount-navigation-link.is-active a {
		background: var(--color-surface);
		color: var(--color-accent-ink);
	}

	/*
	 * Logga ut är inte en flik bland andra — det avslutar besöket. Därför
	 * en linje över och dämpad färg, så att den inte konkurrerar med
	 * navigationen ovanför.
	 */
	.woocommerce-MyAccount-navigation-link--customer-logout {
		margin-block-start: var(--space-2xs);
		padding-block-start: var(--space-2xs);
		border-block-start: 1px solid var(--color-line);
	}

	.woocommerce-MyAccount-navigation-link--customer-logout a {
		color: var(--color-body);
	}

	/*
	 * Under 900 px ligger menyn ovanför innehållet som en rad man kan dra i
	 * sidled — samma mönster som butikens filterchips, och det enda som
	 * rymmer sex flikar på en telefon utan att äta halva skärmen.
	 */
	@media (max-width: 899px) {
		.woocommerce-MyAccount-navigation {
			margin-block-end: var(--space-l);
			/* Raden ska kunna gå kant i kant även om wrappen har luft. */
			margin-inline: calc(var(--wrap-gutter) * -1);
			padding-inline: var(--wrap-gutter);
			overflow-x: auto;
			scrollbar-width: none;
		}

		.woocommerce-MyAccount-navigation::-webkit-scrollbar {
			display: none;
		}

		.woocommerce-MyAccount-navigation ul {
			flex-direction: row;
			gap: var(--space-2xs);
			width: max-content;
		}

		.woocommerce-MyAccount-navigation a {
			border: 1px solid var(--color-line);
			border-radius: var(--radius-pill);
			white-space: nowrap;
		}

		.woocommerce-MyAccount-navigation-link.is-active a {
			border-color: var(--color-accent);
		}

		.woocommerce-MyAccount-navigation-link--customer-logout {
			margin-block-start: 0;
			padding-block-start: 0;
			border-block-start: 0;
		}
	}

	/* ---------------------------------------------------------------- */
	/* Innehållsspalten                                                  */
	/* ---------------------------------------------------------------- */

	.woocommerce-MyAccount-content {
		min-width: 0;
		color: var(--color-body);
	}

	.woocommerce-MyAccount-content > p {
		margin-block: 0 var(--space-s);
		line-height: 1.6;
	}

	.woocommerce-MyAccount-content h2,
	.woocommerce-MyAccount-content legend {
		margin-block: 0 var(--space-s);
		color: var(--color-ink);
		font-size: var(--step-1);
		font-weight: 600;
		letter-spacing: -0.01em;
	}

	.woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button) {
		color: var(--color-accent-ink);
		text-underline-offset: 0.2em;
	}

	/* ---------------------------------------------------------------- */
	/* Översikten                                                        */
	/* ---------------------------------------------------------------- */

	.account-hello {
		margin-block-end: var(--space-l);
	}

	.account-hello__name {
		display: block;
		color: var(--color-ink);
		font-size: var(--step-2);
		font-weight: 600;
		letter-spacing: -0.02em;
	}

	.account-hello__text {
		margin-block-start: var(--space-3xs);
	}

	/*
	 * Genvägarna. Rutnätet fyller på med kort i stället för att låsa ett
	 * antal spalter — då spelar det ingen roll om nedladdningar eller
	 * önskelistan saknas i en installation.
	 */
	.account-links {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
		gap: var(--space-s);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.account-links__link {
		display: block;
		height: 100%;
		padding: var(--space-m);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-card);
		text-decoration: none;
		transition: border-color 0.15s, background-color 0.15s;
	}

	.account-links__link:hover,
	.account-links__link:focus-visible {
		border-color: var(--color-accent);
		background: var(--color-surface-card);
	}

	.account-links__title {
		display: block;
		color: var(--color-ink);
		font-size: var(--step-0);
		font-weight: 600;
	}

	.account-links__text {
		display: block;
		margin-block-start: var(--space-3xs);
		color: var(--color-body);
		font-size: var(--step--1);
		line-height: 1.5;
	}

	/* ---------------------------------------------------------------- */
	/* Profilen                                                          */
	/* ---------------------------------------------------------------- */

	/*
	 * Märkena ligger i ett rutnät som fyller på med det som får plats.
	 * Ett låst antal spalter hade tvingat fram ett val mellan fyra små
	 * märken på en telefon och åtta utspridda på en bred skärm.
	 */
	.profile-avatars {
		margin-block: 0 var(--space-l);
	}

	.profile-avatars__grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
		gap: var(--space-s);
		margin-block-start: var(--space-s);
	}

	.profile-avatars__option {
		display: grid;
		place-items: center;
		padding: var(--space-3xs);
		border: 2px solid transparent;
		border-radius: var(--radius-card);
		cursor: pointer;
		transition: border-color 0.15s, background-color 0.15s;
	}

	.profile-avatars__option:hover {
		background: var(--color-surface);
	}

	/*
	 * Radioknappen göms för ögat men inte för tangentbordet — den ska gå
	 * att pila mellan märkena. `appearance: none` och nollad storlek i
	 * stället för `display: none`, som hade tagit bort den ur tabbordningen
	 * och därmed ur valet.
	 */
	.profile-avatars__option input {
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
		pointer-events: none;
	}

	.profile-avatars__img {
		display: block;
		width: 72px;
		height: 72px;
		border-radius: var(--radius-pill);
	}

	/*
	 * "Ingen bild" är en tom ring, inte ett kryss: det är ett val bland
	 * märkena och ska se ut som ett märke, inte som en varning.
	 */
	.profile-avatars__img--none {
		border: 2px dashed var(--color-line);
		background: var(--color-surface);
	}

	/*
	 * Valt läge markeras på ramen omkring märket. Ikonerna bär sina egna
	 * färger, så en färgad platta bakom dem hade konkurrerat med dem.
	 */
	.profile-avatars__option:has(input:checked) {
		border-color: var(--color-accent);
		background: var(--color-surface);
	}

	.profile-avatars__option:has(input:focus-visible) {
		outline: 2px solid var(--color-ink);
		outline-offset: 2px;
	}

	.profile-form__hint {
		margin-block: 0;
		color: var(--color-body);
		font-size: var(--step--1);
		line-height: 1.5;
	}

	/*
	 * Fältgruppen ärver kontosidans ram från `fieldset`. Här är märkena
	 * redan inramade var för sig, och en ram runt ramarna blir en ruta i
	 * en ruta.
	 */
	.woocommerce-account fieldset.profile-avatars {
		padding: 0;
		border: 0;
	}

	.profile-form__actions {
		margin-block: var(--space-l) 0;
	}

	.profile-form__note {
		margin-block: var(--space-s) 0;
		color: var(--color-body);
		font-size: var(--step--1);
	}

	/* ---------------------------------------------------------------- */
	/* Inloggning                                                        */
	/* ---------------------------------------------------------------- */

	/*
	 * Utloggad är sidan ett enda kort. Bredden är valt efter fälten: en
	 * e-postadress ska rymmas utan att raden blir så lång att ögat tappar
	 * bort början av nästa etikett.
	 */
	.woocommerce-account:not(.logged-in) .woocommerce {
		max-width: 27rem;
		margin-inline: auto;
		padding: var(--space-l);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-panel);
	}

	/*
	 * Rubriken hör till kortet under den. Står den kvar i vänsterkant
	 * medan kortet ligger i mitten läser man dem som två olika saker.
	 */
	.woocommerce-account:not(.logged-in) .entry__title {
		text-align: center;
	}

	.woocommerce-account:not(.logged-in) .woocommerce > h2 {
		margin-block: 0 var(--space-m);
		color: var(--color-ink);
		font-size: var(--step-1);
		font-weight: 600;
		letter-spacing: -0.01em;
	}

	/*
	 * Med registrering påslagen står inloggning och nytt konto sida vid
	 * sida, och då är det spalterna som är korten — inte omslaget.
	 */
	.woocommerce-account .woocommerce:has(#customer_login) {
		max-width: none;
		padding: 0;
		border: 0;
	}

	.woocommerce-account #customer_login > div {
		padding: var(--space-l);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-panel);
	}

	/* På en telefon är kortets luft plats som fälten hellre vill ha. */
	@media (max-width: 479px) {
		.woocommerce-account:not(.logged-in) .woocommerce,
		.woocommerce-account #customer_login > div {
			padding: var(--space-m);
		}
	}

	@media (min-width: 720px) {
		.woocommerce-account #customer_login.col2-set {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: var(--space-l);
			max-width: 56rem;
			margin-inline: auto;
		}
	}

	.woocommerce-LostPassword {
		margin-block-start: var(--space-s);
		font-size: var(--step--1);
		text-align: center;
	}

	/* ---------------------------------------------------------------- */
	/* Formulär                                                          */
	/* ---------------------------------------------------------------- */

	/*
	 * Woo lägger sina fält i `<p class="form-row form-row-first">` och
	 * flyter dem med sin egen CSS. Den är avstängd här, så raderna blir
	 * spalter i ett rutnät i stället — `.clear` behövs då inte längre.
	 */
	.woocommerce-form,
	.woocommerce-address-fields__field-wrapper,
	.woocommerce-EditAccountForm {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-s) var(--space-m);
	}

	/*
	 * Ett fält som är 1100 px brett för in ett förnamn ser inte ut som ett
	 * formulär, det ser ut som ett misstag. Spalten får därför ett tak —
	 * tabellerna nedan har inget, de behöver bredden.
	 */
	.woocommerce-account .woocommerce-EditAccountForm,
	.woocommerce-account .woocommerce-address-fields {
		max-width: 40rem;
	}

	/*
	 * Full bredd är utgångsläget — halva raden är undantaget. Annars måste
	 * varje ny sorts fält Woo hittar på räknas upp här, och det som glöms
	 * bort hamnar tyst i en halv spalt.
	 */
	.woocommerce-form > *,
	.woocommerce-address-fields__field-wrapper > *,
	.woocommerce-EditAccountForm > * {
		grid-column: 1 / -1;
	}

	.woocommerce-form > .form-row-first,
	.woocommerce-address-fields__field-wrapper > .form-row-first,
	.woocommerce-EditAccountForm > .form-row-first {
		grid-column: 1;
	}

	.woocommerce-form > .form-row-last,
	.woocommerce-address-fields__field-wrapper > .form-row-last,
	.woocommerce-EditAccountForm > .form-row-last {
		grid-column: 2;
	}

	.woocommerce-account .clear {
		display: none;
	}

	/* Spara-knappen står utanför fältrutnätet i Woo:s adressmall. */
	.woocommerce-address-fields > p {
		margin-block: var(--space-l) 0;
	}

	@media (max-width: 599px) {
		.woocommerce-form,
		.woocommerce-address-fields__field-wrapper,
		.woocommerce-EditAccountForm {
			grid-template-columns: 1fr;
		}

		.woocommerce-form > .form-row-first,
		.woocommerce-form > .form-row-last,
		.woocommerce-address-fields__field-wrapper > .form-row-first,
		.woocommerce-address-fields__field-wrapper > .form-row-last,
		.woocommerce-EditAccountForm > .form-row-first,
		.woocommerce-EditAccountForm > .form-row-last {
			grid-column: 1 / -1;
		}
	}

	.woocommerce-account .form-row {
		margin: 0;
	}

	.woocommerce-account .form-row label,
	.woocommerce-account .woocommerce-address-fields label {
		display: block;
		margin-block-end: var(--space-3xs);
		color: var(--color-ink);
		font-size: var(--step--1);
		font-weight: 500;
	}

	/* Kryssrutan är ingen etikett över ett fält — den står bredvid sitt. */
	.woocommerce-account .form-row label.woocommerce-form__label-for-checkbox {
		display: flex;
		align-items: center;
		gap: var(--space-2xs);
		margin-block: 0;
		font-weight: 400;
		color: var(--color-body);
	}

	.woocommerce-account .woocommerce-form__input-checkbox {
		width: 1.1em;
		height: 1.1em;
		accent-color: var(--color-accent);
	}

	.woocommerce-account .required {
		color: var(--color-danger);
		text-decoration: none;
	}

	.woocommerce-account .input-text,
	.woocommerce-account select,
	.woocommerce-account textarea {
		width: 100%;
		min-height: 48px;
		padding: 0 var(--space-s);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-card);
		background: var(--color-paper);
		color: var(--color-ink);
		font-size: var(--step-0);
		transition: border-color 0.15s, box-shadow 0.15s;
	}

	.woocommerce-account textarea {
		padding-block: var(--space-xs);
		line-height: 1.5;
	}

	.woocommerce-account .input-text:focus,
	.woocommerce-account select:focus,
	.woocommerce-account textarea:focus {
		border-color: var(--color-accent);
		outline: none;
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
	}

	/*
	 * Tangentbordsringen ska finnas kvar för den som tabbar sig fram.
	 * `:focus` ovan tar bort standardringen för alla, så den ritas här på
	 * nytt — men bara i det läge där den faktiskt hjälper.
	 */
	.woocommerce-account .input-text:focus-visible,
	.woocommerce-account select:focus-visible,
	.woocommerce-account textarea:focus-visible {
		outline: 2px solid var(--color-accent-ink);
		outline-offset: 1px;
	}

	.woocommerce-account .input-text::placeholder {
		color: var(--color-ink-muted);
	}

	/*
	 * Lösenordsfältet har en ögonknapp inuti. Woo ritar den med en egen
	 * bakgrundsbild; utan Woo:s CSS får den vår egen, ritad i en
	 * mask så att den ärver textfärgen.
	 */
	.woocommerce-account .password-input {
		position: relative;
		display: block;
	}

	.woocommerce-account .show-password-input {
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: var(--space-2xs);
		width: 40px;
		height: 48px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--color-ink-muted);
	}

	.woocommerce-account .show-password-input::after {
		content: "";
		display: block;
		width: 20px;
		height: 20px;
		margin-inline: auto;
		background: currentcolor;
		-webkit-mask: var(--lg-icon-eye) center / contain no-repeat;
		mask: var(--lg-icon-eye) center / contain no-repeat;
	}

	.woocommerce-account .show-password-input:hover,
	.woocommerce-account .show-password-input.display-password {
		color: var(--color-ink);
	}

	.woocommerce-account .woocommerce-password-strength {
		margin-block-start: var(--space-3xs);
		font-size: var(--step--1);
		font-weight: 500;
	}

	.woocommerce-account .woocommerce-password-strength.short,
	.woocommerce-account .woocommerce-password-strength.bad {
		color: var(--color-danger);
	}

	.woocommerce-account .woocommerce-password-strength.good,
	.woocommerce-account .woocommerce-password-strength.strong {
		color: var(--color-accent-ink);
	}

	.woocommerce-account .woocommerce-password-hint,
	.woocommerce-account .form-row span em {
		display: block;
		margin-block-start: var(--space-3xs);
		color: var(--color-body);
		font-size: var(--step--1);
		font-style: normal;
		line-height: 1.5;
	}

	/*
	 * Fältgruppen för lösenordsbyte. Ramen är det som gör att man ser att
	 * de tre fälten hänger ihop och kan lämnas tomma.
	 */
	.woocommerce-account fieldset {
		margin: var(--space-s) 0 0;
		padding: var(--space-m);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-card);
	}

	/*
	 * En `legend` klipper hål i ramen där den står. Flödad med hela
	 * bredden hamnar den i stället ovanför fälten och ramen går hel runt
	 * gruppen — vilket är hela poängen med ramen.
	 */
	.woocommerce-account fieldset > legend {
		float: inline-start;
		width: 100%;
		padding: 0;
	}

	.woocommerce-account fieldset > .form-row + .form-row {
		margin-block-start: var(--space-s);
	}

	/* ---------------------------------------------------------------- */
	/* Knappar                                                           */
	/* ---------------------------------------------------------------- */

	.woocommerce-account .button,
	.woocommerce-account .woocommerce-Button,
	.woocommerce-account button[type="submit"] {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		padding: 0 var(--space-l);
		border: 1px solid transparent;
		border-radius: var(--radius-pill);
		background: var(--color-button);
		color: var(--color-button-text);
		font-size: var(--step--1);
		font-weight: 600;
		letter-spacing: 0.02em;
		text-decoration: none;
		transition: background-color 0.15s, color 0.15s, border-color 0.15s;
	}

	.woocommerce-account .button:hover,
	.woocommerce-account .woocommerce-Button:hover,
	.woocommerce-account button[type="submit"]:hover {
		background: var(--color-ink);
		color: var(--color-button-text);
	}

	/*
	 * Knappar inne i en tabellrad eller ett meddelande är sekundära — de
	 * ska läsas som länkar med träffyta, inte konkurrera med formulärets
	 * huvudknapp.
	 */
	.woocommerce-account .woocommerce-orders-table .button,
	.woocommerce-account .woocommerce-info .button,
	.woocommerce-account .woocommerce-message .button {
		min-height: 40px;
		padding: 0 var(--space-m);
		border-color: var(--color-line);
		background: var(--color-paper);
		color: var(--color-ink);
	}

	.woocommerce-account .woocommerce-orders-table .button:hover,
	.woocommerce-account .woocommerce-info .button:hover,
	.woocommerce-account .woocommerce-message .button:hover {
		border-color: var(--color-accent);
		background: var(--color-paper);
		color: var(--color-accent-ink);
	}

	/*
	 * Inloggning och lösenordsåterställning har ett enda ärende — knappen
	 * går över hela kortet. Raden med "Kom ihåg mig" innehåller både
	 * kryssrutan och knappen; den staplas så att knappen får bredden.
	 */
	.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-s);
	}

	.woocommerce-form-login__submit,
	.woocommerce-ResetPassword button[type="submit"] {
		width: 100%;
	}

	/* ---------------------------------------------------------------- */
	/* Meddelanden                                                       */
	/* ---------------------------------------------------------------- */

	.woocommerce-account .woocommerce-message,
	.woocommerce-account .woocommerce-info,
	.woocommerce-account .woocommerce-error {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-s);
		margin: 0 0 var(--space-l);
		padding: var(--space-s) var(--space-m);
		border-radius: var(--radius-card);
		border-inline-start: 3px solid var(--color-accent);
		background: var(--color-surface-card);
		color: var(--color-ink);
		font-size: var(--step--1);
		line-height: 1.5;
		list-style: none;
	}

	.woocommerce-account .woocommerce-error {
		border-inline-start-color: var(--color-danger);
		color: var(--color-danger);
	}

	/* Knappen i ett meddelande hör till slutet av raden, inte till början. */
	.woocommerce-account .woocommerce-message .button,
	.woocommerce-account .woocommerce-info .button {
		order: 2;
		margin-inline-start: auto;
	}

	/* ---------------------------------------------------------------- */
	/* Ordrar och nedladdningar                                          */
	/* ---------------------------------------------------------------- */

	.woocommerce-account .shop_table {
		width: 100%;
		margin: 0;
		border-collapse: collapse;
		font-size: var(--step--1);
	}

	.woocommerce-account .shop_table thead th {
		padding: 0 var(--space-2xs) var(--space-2xs) 0;
		border-block-end: 1px solid var(--color-line);
		color: var(--color-ink-muted);
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-align: start;
		text-transform: uppercase;
	}

	/*
	 * Ordernumret står i en `th` inuti tbody — det är radens rubrik. Den
	 * ska alltså se ut som en cell, inte som kolumnhuvudet ovanför.
	 */
	.woocommerce-account .shop_table td,
	.woocommerce-account .shop_table tbody th {
		padding: var(--space-s) var(--space-2xs) var(--space-s) 0;
		border-block-end: 1px solid var(--color-line);
		font-weight: 400;
		text-align: start;
		vertical-align: middle;
	}

	.woocommerce-account .shop_table tr > :last-child {
		padding-inline-end: 0;
		text-align: end;
	}

	/*
	 * Ordernumret är radens ingång. Halvfet så att ögat hittar den när
	 * listan är lång — färgen får den från länkregeln längre upp.
	 */
	.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a {
		font-weight: 600;
	}

	/*
	 * Under 700 px blir tabellen en lista med kort. Rubrikcellerna göms och
	 * varje cell hämtar sin etikett ur `data-title`, som Woo redan skriver
	 * ut — samma information, utan vågrät scroll.
	 */
	@media (max-width: 699px) {
		.woocommerce-account .shop_table_responsive thead {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip-path: inset(50%);
		}

		.woocommerce-account .shop_table_responsive tr {
			display: block;
			margin-block-end: var(--space-s);
			padding: var(--space-s);
			border: 1px solid var(--color-line);
			border-radius: var(--radius-card);
		}

		.woocommerce-account .shop_table_responsive tbody td,
		.woocommerce-account .shop_table_responsive tbody th {
			display: flex;
			justify-content: space-between;
			gap: var(--space-s);
			padding: var(--space-3xs) 0;
			border: 0;
			text-align: end;
		}

		.woocommerce-account .shop_table_responsive td::before,
		.woocommerce-account .shop_table_responsive th[data-title]::before {
			content: attr(data-title);
			color: var(--color-ink-muted);
			font-weight: 500;
			text-align: start;
		}

		.woocommerce-account .shop_table_responsive .woocommerce-orders-table__cell-order-actions {
			justify-content: flex-end;
			padding-block-start: var(--space-2xs);
		}

		.woocommerce-account .shop_table_responsive .woocommerce-orders-table__cell-order-actions::before {
			content: none;
		}
	}

	.woocommerce-account .woocommerce-pagination {
		display: flex;
		gap: var(--space-2xs);
		margin-block-start: var(--space-l);
	}

	/* ---------------------------------------------------------------- */
	/* Adresser                                                          */
	/* ---------------------------------------------------------------- */

	.woocommerce-Addresses {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
		gap: var(--space-s);
		margin-block-start: var(--space-m);
	}

	.woocommerce-Address {
		padding: var(--space-m);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-card);
	}

	.woocommerce-Address-title {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-2xs);
		margin-block-end: var(--space-s);
	}

	.woocommerce-Address-title h2 {
		margin: 0;
		font-size: var(--step-0);
	}

	.woocommerce-Address-title .edit {
		font-size: var(--step--1);
		font-weight: 500;
	}

	.woocommerce-Address address {
		color: var(--color-body);
		font-style: normal;
		line-height: 1.6;
	}

	/* ---------------------------------------------------------------- */
	/* Prenumerationer                                                   */
	/* ---------------------------------------------------------------- */

	.subs {
		display: grid;
		gap: var(--space-s);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.subs__item {
		display: grid;
		grid-template-columns: 72px 1fr;
		gap: var(--space-s);
		padding: var(--space-m);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-card);
	}

	.subs__item--cancelled {
		opacity: 0.7;
	}

	.subs__media img {
		display: block;
		width: 72px;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: contain;
		border-radius: var(--radius-card);
		background: var(--color-surface);
	}

	.subs__title {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--space-2xs) var(--space-xs);
		margin: 0 0 var(--space-xs);
		font-size: var(--step-0);
		font-weight: 600;
	}

	.subs__qty,
	.subs__muted {
		color: var(--color-ink-muted);
		font-weight: 400;
	}

	.subs__status {
		padding: 0.15em 0.7em;
		border-radius: var(--radius-pill);
		background: var(--color-surface-warm);
		color: var(--color-ink);
		font-size: var(--step--1);
		font-weight: 500;
	}

	.subs__status--active {
		background: var(--color-accent);
		color: #fff;
	}

	.subs__status--failed {
		background: var(--color-danger);
		color: #fff;
	}

	.subs__facts {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
		gap: var(--space-xs) var(--space-s);
		margin: 0 0 var(--space-s);
	}

	.subs__facts dt {
		color: var(--color-ink-muted);
		font-size: var(--step--1);
	}

	.subs__facts dd {
		margin: 0;
		color: var(--color-ink);
	}

	.subs__warning {
		margin: 0 0 var(--space-s);
		color: var(--color-danger);
		font-weight: 500;
	}

	.subs__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs);
	}

	.subs__form {
		display: flex;
		gap: var(--space-3xs);
		margin: 0;
	}

	.subs__form select {
		padding: 0.4em 2em 0.4em 0.75em;
		border: 1px solid var(--color-line);
		border-radius: var(--radius-pill);
		background: var(--color-paper);
		font: inherit;
		font-size: var(--step--1);
		color: var(--color-ink);
	}

	/*
	 * Sekundära knappar, som i ordertabellen: kontots knappregel ovan
	 * gäller alla submit-knappar, så samma selektor behövs här för att
	 * de här ska bli lätta. Bara "Resume" är en huvudknapp.
	 */
	.woocommerce-account button.subs__button {
		min-height: 40px;
		padding: 0 var(--space-s);
		border-color: var(--color-line);
		background: var(--color-paper);
		color: var(--color-ink);
		font-weight: 500;
		letter-spacing: 0;
		cursor: pointer;
	}

	.woocommerce-account button.subs__button:hover,
	.woocommerce-account button.subs__button:focus-visible {
		border-color: var(--color-accent);
		background: var(--color-surface-card);
		color: var(--color-ink);
	}

	.woocommerce-account button.subs__button--primary {
		border-color: var(--color-button);
		background: var(--color-button);
		color: var(--color-button-text);
	}

	.woocommerce-account button.subs__button--primary:hover {
		background: var(--color-ink);
		color: var(--color-button-text);
	}

	.woocommerce-account button.subs__button--quiet {
		border-color: transparent;
		color: var(--color-ink-muted);
	}

	.subs__hint {
		margin: var(--space-xs) 0 0;
		color: var(--color-ink-muted);
		font-size: var(--step--1);
	}

	.subs-empty {
		display: grid;
		gap: var(--space-xs);
		justify-items: start;
	}

	@media (max-width: 480px) {
		.subs__item {
			grid-template-columns: 1fr;
		}
	}
}