/* ═══════════════════════════════════════════════════════════════════════
   VISARO — Shopkonto

   Ein Konto für alle VISARO Shopwelten. Beim Einkaufen ist jede Welt
   eigenständig (E45, E74); ab dem Warenkorb ist es dasselbe System (E59),
   und das Konto ist der letzte Schritt dieser Linie.

   Deshalb steht hier **keine Weltfarbe**. Keine `--vis-world-*`, kein
   Feuerwehrrot, kein Vereinsblau. Wer im Konto ist, verwaltet sein Konto —
   nicht den Shop, aus dem er kam.

   Geladen wird diese Datei ausschließlich im Konto (`inc/account.php`,
   E56). Das ist keine Ordnungsfrage: Sie enthält Regeln für Formulare und
   Knöpfe, und auf der Kasse oder in VISARO OS wären genau die falsch.

   Alle Werte kommen aus `tokens.css` (E20).
   ═══════════════════════════════════════════════════════════════════════ */

/* ══ 1 — Kopfzeile ══════════════════════════════════════════════════════

   Neutral und kompakt: Logo links, Rückweg und Warenkorb rechts. Kein
   Sortiment, kein Mega-Menü, keine zweite Zeile mit „Shop". */

.vis-acchead {
	position: relative;
	z-index: var(--vis-z-header);
	background: var(--vis-white);
	border-block-end: var(--vis-border-width) solid var(--vis-border);
}

.vis-acchead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vis-space-4);

	max-inline-size: var(--vis-container-content);
	margin-inline: auto;
	padding-inline: var(--vis-gutter);
	min-block-size: var(--vis-header-height-scrolled);
}

.vis-acchead__brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.vis-acchead__logo {
	display: block;
	inline-size: auto;
	block-size: var(--vis-logo-height);
}

.vis-acchead__actions {
	display: flex;
	align-items: center;
	gap: var(--vis-space-2);
}

.vis-acchead__back {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-2);

	min-block-size: var(--vis-tap-target-min);
	padding-inline: var(--vis-space-3);

	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
	text-decoration: none;

	transition: color var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-acchead__back:hover { color: var(--vis-text); }

.vis-acchead__back .vis-icon {
	inline-size: 16px;
	block-size: 16px;
	flex: 0 0 auto;
}

/* Auf dem Telefon trägt der Rückweg nur sein Symbol. Der Text „Zurück zu
   SV Weyer" neben Logo und Warenkorb ergäbe drei Dinge in einer Zeile, von
   denen keines mehr lesbar wäre. */
@media (max-width: 599.98px) {
	.vis-acchead__back span { display: none; }
}

.vis-acchead__cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	inline-size: var(--vis-tap-target-min);
	block-size: var(--vis-tap-target-min);

	color: var(--vis-text);
}

.vis-acchead__count {
	position: absolute;
	inset-block-start: var(--vis-space-1);
	inset-inline-end: var(--vis-space-1);

	min-inline-size: 18px;
	padding-inline: 4px;

	border-radius: var(--vis-radius-full);
	background: var(--vis-accent-fill);
	color: var(--vis-white);

	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	line-height: 18px;
	text-align: center;
}

/* ══ 2 — Das Raster ═════════════════════════════════════════════════════

   Der Kern dieser Überarbeitung. Das Raster liegt auf **unserer** Klasse,
   nicht auf WooCommerce' `.woocommerce`.

   Warum das der Punkt ist: `woocommerce.css` gibt `.woocommerce` im Konto
   einen Clearfix (`::before`/`::after` mit `display: table`). In einem
   Grid sind das **Grid-Items**. Aus zwei Feldern wurden vier — die
   Navigation rutschte in die breite Spalte, der Inhalt in die schmale,
   eine Zeile tiefer. Genau das zeigten die Bildschirmfotos.

   `.woocommerce` ist jetzt wieder ein gewöhnlicher Block. Dort tut ein
   Clearfix, wofür er gedacht war: nichts Sichtbares. */

.woocommerce-account .woocommerce {
	display: block;
	max-inline-size: var(--vis-account-max);
	margin-inline: auto;
}

.vis-account {
	display: grid;
	gap: var(--vis-space-8);
	align-items: start;
}

@media (min-width: 1024px) {
	.vis-account {
		grid-template-columns: var(--vis-account-nav) minmax(0, 1fr);
		gap: var(--vis-space-12);
	}
}

/* Beide Spalten beginnen auf derselben Höhe. `align-items: start` allein
   genügt dafür nicht, wenn ein Kind einen Außenabstand nach oben mitbringt
   — deshalb beginnt keines der beiden mit einem. */
.vis-account__aside,
.vis-account__content {
	min-inline-size: 0;
	margin-block-start: 0;
}

/* ══ 3 — Navigation ═════════════════════════════════════════════════════ */

.vis-account__nav { min-inline-size: 0; }

.vis-account__list {
	display: grid;
	gap: var(--vis-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vis-account__link {
	display: flex;
	align-items: center;
	gap: var(--vis-space-3);

	min-block-size: var(--vis-tap-target-min);
	padding-inline: var(--vis-space-3);

	border-radius: var(--vis-radius-sm);
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
	text-decoration: none;

	transition:
		background-color var(--vis-duration-ui) var(--vis-ease-out),
		color            var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-account__link .vis-icon {
	inline-size: 18px;
	block-size: 18px;
	flex: 0 0 auto;
	color: var(--vis-text-3);
}

.vis-account__link:hover {
	background: var(--vis-bg-subtle);
	color: var(--vis-text);
}

/* Der aktive Punkt als getönte Fläche — dieselbe Sprache wie im
   Corporate-Header (E25). Kein Unterstrich, keine Farbfläche. */
.woocommerce-MyAccount-navigation-link.is-active .vis-account__link {
	background: var(--vis-purple-50);
	color: var(--vis-purple-700);
	font-weight: var(--vis-fw-medium);
}

.woocommerce-MyAccount-navigation-link.is-active .vis-account__link .vis-icon {
	color: var(--vis-purple-700);
}

/* Der Weg in den Kundenbereich: ein Textlink, kein beworbener Block. Er
   erscheint nur für Vertragskunden (Core: `Shop\Account::portal_url()`). */
.vis-account__portal {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-2);

	margin-block-start: var(--vis-space-6);
	padding-block-start: var(--vis-space-4);
	padding-inline: var(--vis-space-3);
	border-block-start: var(--vis-border-width) solid var(--vis-border);

	color: var(--vis-text-3);
	font-size: var(--vis-fs-caption);
	text-decoration: none;
}

.vis-account__portal:hover { color: var(--vis-text); }

.vis-account__portal .vis-icon {
	inline-size: 14px;
	block-size: 14px;
}

/* ── Bereichsauswahl auf dem Telefon ───────────────────────────────────

   Statt einer vollständigen Navigationsliste über dem Inhalt steht der
   Bereich, in dem man ist. Der Knopf erscheint nur mit JavaScript (das
   Skript nimmt `hidden` weg); ohne Skript bleibt die Navigation offen —
   das Skript klappt zu, nicht auf (E70, E89). */

.vis-account__switch {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vis-space-3);

	inline-size: 100%;
	min-block-size: var(--vis-tap-target-min);
	padding-inline: var(--vis-space-4);

	border: var(--vis-border-width) solid var(--vis-border);
	border-radius: var(--vis-radius-sm);
	background: var(--vis-white);

	color: var(--vis-text);
	font-family: inherit;
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-medium);
	text-align: start;
	cursor: pointer;
}

.vis-account__switch .vis-icon {
	inline-size: 18px;
	block-size: 18px;
	flex: 0 0 auto;
	transition: transform var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-account__switch[aria-expanded="true"] .vis-icon { transform: rotate(180deg); }

/* Am Schreibtisch gibt es die Auswahl nicht — dort ist die Navigation
   eine Spalte und immer sichtbar. */
@media (min-width: 1024px) {
	.vis-account__switch { display: none !important; }
	.vis-account__nav[hidden] { display: block !important; }
}

@media (max-width: 1023.98px) {
	.vis-account__nav { margin-block-start: var(--vis-space-2); }
}

/* ══ 4 — Überschriften und Abschnitte ═══════════════════════════════════ */

.vis-account__head { margin-block-end: var(--vis-space-6); }

.vis-account__title {
	margin: 0;
	font-size: var(--vis-fs-h2);
	font-weight: var(--vis-fw-bold);
	line-height: var(--vis-lh-heading);
}

.vis-account__lead {
	margin: var(--vis-space-2) 0 0;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
	line-height: var(--vis-lh-body);
}

.vis-account__section { margin-block-start: var(--vis-space-10); }
.vis-account__section:first-child { margin-block-start: 0; }

.vis-account__section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--vis-space-3);
	margin-block-end: var(--vis-space-4);
}

.vis-account__section-title {
	margin: 0;
	font-size: var(--vis-fs-h4);
	font-weight: var(--vis-fw-bold);
}

.vis-account__more {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-2);
	color: var(--vis-accent-text);
	font-size: var(--vis-fs-body-s);
	text-decoration: none;
}

.vis-account__more .vis-icon { inline-size: 16px; block-size: 16px; }

/* WooCommerce' eigene Überschriften in Bereichen, die wir nicht
   überschrieben haben (Kontodaten, Bestelldetail). */
.woocommerce-MyAccount-content h2 {
	margin: 0 0 var(--vis-space-5);
	font-size: var(--vis-fs-h4);
	font-weight: var(--vis-fw-bold);
}

/* ══ 5 — Karten ═════════════════════════════════════════════════════════

   Zwei gleichwertige Adresskarten statt einer Textsäule. */

.vis-cards {
	display: grid;
	gap: var(--vis-space-5);
}

@media (min-width: 700px) {
	.vis-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.vis-card {
	display: flex;
	flex-direction: column;
	gap: var(--vis-space-4);

	padding: var(--vis-space-6);
	border: var(--vis-border-width) solid var(--vis-border);
	border-radius: var(--vis-radius-md);
	background: var(--vis-white);
}

.vis-card__head { margin: 0; }

.vis-card__title {
	margin: 0;
	font-size: var(--vis-fs-body);
	font-weight: var(--vis-fw-bold);
}

.vis-card__body {
	margin: 0;
	color: var(--vis-text);
	font-size: var(--vis-fs-body-s);
	font-style: normal;
	line-height: var(--vis-lh-body);
}

.vis-card__empty {
	margin: 0;
	color: var(--vis-text-3);
	font-size: var(--vis-fs-body-s);
	line-height: var(--vis-lh-body);
}

.vis-card__foot { margin-block-start: auto; }

.vis-card__action {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-2);

	min-block-size: var(--vis-tap-target-min);
	color: var(--vis-accent-text);
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-medium);
	text-decoration: none;
}

.vis-card__action .vis-icon { inline-size: 16px; block-size: 16px; }

.vis-card--empty {
	align-items: flex-start;
	gap: var(--vis-space-5);
}

/* ══ 6 — Bestellungen ═══════════════════════════════════════════════════

   Karten statt Tabelle: Eine Bestelltabelle wird auf 375 px entweder
   abgeschnitten oder rollt waagrecht. Am Schreibtisch liest sich die
   Karte als Zeile, auf dem Telefon als Block. */

.vis-orders {
	display: grid;
	gap: var(--vis-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vis-order {
	display: grid;
	gap: var(--vis-space-3);

	padding: var(--vis-space-5);
	border: var(--vis-border-width) solid var(--vis-border);
	border-radius: var(--vis-radius-md);
	background: var(--vis-white);
}

@media (min-width: 700px) {
	.vis-order {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--vis-space-5);
	}
}

.vis-order__id {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--vis-space-3);
	margin: 0;
}

.vis-order__number {
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-medium);
}

.vis-order__date {
	color: var(--vis-text-3);
	font-size: var(--vis-fs-caption);
}

.vis-order__worlds {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vis-space-1);
	margin: var(--vis-space-2) 0 0;
}

/* Die Shopwelt als ruhige Kennzeichnung — nicht in ihrer Weltfarbe. Im
   Konto würde eine rote und eine blaue Marke nebeneinander aussehen wie
   zwei Zustände, dabei sind es zwei Herkünfte. */
.vis-order__world {
	display: inline-flex;
	align-items: center;

	padding: 2px var(--vis-space-2);
	border-radius: var(--vis-radius-full);
	background: var(--vis-bg-subtle);

	color: var(--vis-text-2);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
}

.vis-order__meta { margin: 0; }

.vis-order__status {
	margin: 0;
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-medium);
}

/* Nur die Zustände, die wirklich etwas aussagen, bekommen eine Farbe. */
.vis-order__status--completed   { color: var(--vis-ok-text); }
.vis-order__status--abholbereit { color: var(--vis-ok-text); }
.vis-order__status--processing  { color: var(--vis-info-text); }
.vis-order__status--on-hold,
.vis-order__status--pending     { color: var(--vis-warn-text); }
.vis-order__status--cancelled,
.vis-order__status--failed      { color: var(--vis-err-text); }

.vis-order__sum {
	margin: var(--vis-space-1) 0 0;
	color: var(--vis-text-3);
	font-size: var(--vis-fs-caption);
}

.vis-order__link {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-2);

	min-block-size: var(--vis-tap-target-min);
	color: var(--vis-accent-text);
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-medium);
	text-decoration: none;
	white-space: nowrap;
}

.vis-order__link .vis-icon { inline-size: 16px; block-size: 16px; }

/* Filter und Blättern. */
.vis-account__filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vis-space-2);
	margin-block-end: var(--vis-space-5);
}

.vis-chip {
	display: inline-flex;
	align-items: center;

	min-block-size: var(--vis-control-height-sm);
	padding-inline: var(--vis-space-4);

	border: var(--vis-border-width) solid var(--vis-border);
	border-radius: var(--vis-radius-full);
	background: var(--vis-white);

	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
	text-decoration: none;
}

.vis-chip:hover { color: var(--vis-text); }

.vis-chip.is-active {
	border-color: var(--vis-text);
	background: var(--vis-text);
	color: var(--vis-white);
}

.vis-account__pages {
	display: flex;
	justify-content: space-between;
	gap: var(--vis-space-3);
	margin-block-start: var(--vis-space-6);
}

/* ══ 7 — Schnellwege der Übersicht ══════════════════════════════════════ */

.vis-account__links {
	display: grid;
	gap: var(--vis-space-3);
}

@media (min-width: 700px) {
	.vis-account__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.vis-account__quick {
	display: flex;
	align-items: flex-start;
	gap: var(--vis-space-3);

	padding: var(--vis-space-5);
	border: var(--vis-border-width) solid var(--vis-border);
	border-radius: var(--vis-radius-md);
	background: var(--vis-white);

	color: var(--vis-text-2);
	font-size: var(--vis-fs-caption);
	text-decoration: none;

	transition: border-color var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-account__quick:hover { border-color: var(--vis-text-3); }

.vis-account__quick .vis-icon {
	inline-size: 20px;
	block-size: 20px;
	flex: 0 0 auto;
	color: var(--vis-text-3);
}

.vis-account__quick strong {
	display: block;
	margin-block-end: 2px;
	color: var(--vis-text);
	font-size: var(--vis-fs-body-s);
}

/* ══ 8 — Anmeldekarte ═══════════════════════════════════════════════════

   Eine Karte, zwei Reiter — und nur der aktive trägt ein Formular. Vorher
   standen zwei vollständige Formulare untereinander, beide 260 px breit. */

.vis-auth {
	display: grid;
	justify-items: center;
	gap: var(--vis-space-5);
	padding-block: var(--vis-space-6);
}

.vis-auth__card {
	inline-size: 100%;
	max-inline-size: var(--vis-auth-max);

	padding: var(--vis-space-8);
	border: var(--vis-border-width) solid var(--vis-border);
	border-radius: var(--vis-radius-lg);
	background: var(--vis-white);
}

@media (max-width: 599.98px) {
	.vis-auth__card {
		padding: var(--vis-space-6);
		border-radius: var(--vis-radius-md);
	}
}

.vis-auth__head { margin-block-end: var(--vis-space-6); }

.vis-auth__title {
	margin: 0;
	font-size: var(--vis-fs-h3);
	font-weight: var(--vis-fw-bold);
	line-height: var(--vis-lh-heading);
}

.vis-auth__lead {
	margin: var(--vis-space-2) 0 0;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
}

.vis-auth__heading {
	margin: 0 0 var(--vis-space-5);
	font-size: var(--vis-fs-h4);
	font-weight: var(--vis-fw-bold);
}

.vis-auth__tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vis-space-1);

	margin-block-end: var(--vis-space-6);
	padding: var(--vis-space-1);
	border-radius: var(--vis-radius-sm);
	background: var(--vis-bg-subtle);
}

/* Mindesttippziel statt 40 px — die Reiter sind die erste Bedienung der
   Seite, und auf dem Telefon liegen sie direkt nebeneinander. */
.vis-auth__tab {
	min-block-size: var(--vis-tap-target-min);
	border: 0;
	border-radius: var(--vis-radius-xs);
	background: transparent;

	color: var(--vis-text-2);
	font-family: inherit;
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-medium);
	cursor: pointer;

	transition:
		background-color var(--vis-duration-ui) var(--vis-ease-out),
		color            var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-auth__tab[aria-selected="true"] {
	background: var(--vis-white);
	color: var(--vis-text);
	box-shadow: var(--vis-shadow-hover);
}

.vis-auth__form {
	display: grid;
	gap: var(--vis-space-5);
}

.vis-auth__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vis-space-3);
}

/* „Passwort vergessen?" und „Angemeldet bleiben" sind auf dem Telefon die
   kleinsten Ziele der Seite. Die Mindesthöhe vergrößert die Trefferfläche,
   nicht die Schrift. */
.vis-auth__lost {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--vis-tap-target-min);
	color: var(--vis-accent-text);
	font-size: var(--vis-fs-body-s);
}

.vis-auth__note {
	display: flex;
	align-items: flex-start;
	gap: var(--vis-space-3);

	margin: 0;
	padding: var(--vis-space-4);
	border-radius: var(--vis-radius-sm);
	background: var(--vis-bg-subtle);

	color: var(--vis-text-2);
	font-size: var(--vis-fs-caption);
	line-height: var(--vis-lh-body);
}

.vis-auth__note .vis-icon {
	inline-size: 18px;
	block-size: 18px;
	flex: 0 0 auto;
	color: var(--vis-text-3);
}

.vis-auth__back {
	margin: 0;
	text-align: center;
}

.vis-auth__back a {
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
}

.vis-auth__aside {
	margin: 0;
	max-inline-size: var(--vis-auth-max);
	color: var(--vis-text-3);
	font-size: var(--vis-fs-caption);
	text-align: center;
}

/* Der **Absendeknopf** — und ausdrücklich nur er.

   Hier lag der zweite gemeldete Fehler. Die alte Regel lautete
   `.woocommerce-form-login button` und traf damit **jeden** Knopf im
   Formular — auch den, den WooCommerce per JavaScript neben das
   Passwortfeld setzt: `<button class="show-password-input">` ohne Text.
   Ein 64 × 48 px großer lila Block ohne Beschriftung war das Ergebnis:
   der „scheinbar leere lilafarbene Button".

   Die Lehre ist dieselbe wie bei E100 und E146: Ein Elementselektor in
   einem fremden Formular trifft irgendwann etwas, das man nicht kennt.
   Gestaltet wird die Klasse, die wir selbst vergeben. */
.vis-auth__submit {
	min-block-size: var(--vis-control-height);
	padding-inline: var(--vis-space-8);

	border: 0;
	border-radius: var(--vis-radius-sm);
	background: var(--vis-accent-fill);
	color: var(--vis-white);

	font-family: inherit;
	font-size: var(--vis-fs-body);
	font-weight: var(--vis-fw-medium);
	cursor: pointer;

	transition: background-color var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-auth__submit:hover { background: var(--vis-purple-600); }

/* ══ 9 — Felder ═════════════════════════════════════════════════════════ */

.vis-field {
	display: grid;
	gap: var(--vis-space-2);
	margin: 0;
}

.vis-field label {
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
}

.vis-field .required {
	color: var(--vis-err-text);
	text-decoration: none;
}

.vis-input,
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"] {
	inline-size: 100%;
	min-block-size: var(--vis-control-height);
	padding-inline: var(--vis-space-4);

	border: var(--vis-border-width) solid var(--vis-border);
	border-radius: var(--vis-radius-sm);
	background: var(--vis-white);

	color: var(--vis-text);
	font-family: inherit;
	font-size: var(--vis-fs-body);
}

.vis-input:focus-visible { outline: var(--vis-focus-width) solid var(--vis-accent); }

/* Auswahlfelder und Textflächen im Konto (Land, Bundesland im
   Adressformular). Sie standen nicht in der Liste oben und behielten die
   Browsergröße von rund 13 px — auf iOS zoomt das beim Antippen die Seite
   heran. Nur die Schrift; Maße und Pfeil bleiben, wie WooCommerce sie
   setzt. */
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea,
.woocommerce-account .select2-dropdown .select2-search__field {
	font-family: inherit;
	font-size: var(--vis-fs-body);
}

.vis-check {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-2);
	min-block-size: var(--vis-tap-target-min);
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
	cursor: pointer;
}

.vis-check input { inline-size: 18px; block-size: 18px; }

/* ── Der Passwort-Umschalter ───────────────────────────────────────────

   WooCommerce setzt ihn per JavaScript als leeren `<button>` neben das
   Feld; das Symbol soll aus CSS kommen. Es kommt aus **unserem** Set
   (Lucide `eye` / `eye-off`, E21) als Maske — so trägt es die
   Textfarbe und braucht kein zweites Bild für den zweiten Zustand. */

.password-input {
	position: relative;
	display: block;
}

.password-input .vis-input,
.password-input input { padding-inline-end: var(--vis-space-10); }

.show-password-input {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: var(--vis-space-2);
	transform: translateY(-50%);

	inline-size: var(--vis-control-height-sm);
	block-size: var(--vis-control-height-sm);

	/* Kein Hintergrund, kein Rahmen — ein Symbol, kein zweiter Knopf. */
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.show-password-input::after {
	content: "";
	display: block;
	inline-size: 20px;
	block-size: 20px;
	margin-inline: auto;

	background: var(--vis-text-3);

	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.show-password-input:hover::after { background: var(--vis-text); }

.show-password-input.display-password::after {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.7 5.1A9.8 9.8 0 0 1 12 5c6.5 0 10 7 10 7a18.4 18.4 0 0 1-2.4 3.4'/%3E%3Cpath d='M6.6 6.6A16.6 16.6 0 0 0 2 12s3.5 7 10 7a9.7 9.7 0 0 0 4.5-1.1'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
}

/* ══ 10 — Knöpfe der übrigen WooCommerce-Bereiche ═══════════════════════

   Kontodaten und Bestelldetail sind bewusst **nicht** überschrieben: Dort
   sitzt WooCommerce' eigene Prüfung, und eine Kopie davon wäre eine
   zweite Stelle, die veraltet (E56, Grundsatz von `inc/shop.php`).

   Ihre Knöpfe bekommen aber das VISARO Aussehen — über die Klasse, die
   WooCommerce **selbst** an seine Absendeknöpfe schreibt, nicht über
   `button`. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-account .woocommerce-MyAccount-content button.button {
	min-block-size: var(--vis-control-height);
	padding-inline: var(--vis-space-8);

	border: 0;
	border-radius: var(--vis-radius-sm);
	background: var(--vis-accent-fill);
	color: var(--vis-white);

	font-family: inherit;
	font-size: var(--vis-fs-body);
	font-weight: var(--vis-fw-medium);
	cursor: pointer;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-account .woocommerce-MyAccount-content button.button:hover {
	background: var(--vis-purple-600);
}

/* Der Umschalter ist kein Absendeknopf — auch wenn WooCommerce ihm im
   Bestelldetail dieselbe Klasse gäbe. */
.woocommerce-account .woocommerce-MyAccount-content .show-password-input {
	min-block-size: auto;
	padding: 0;
	background: transparent;
}

/* ══ 11 — Adressformular ════════════════════════════════════════════════

   Zwei Spalten am Schreibtisch, eine auf dem Telefon. Straße breit, PLZ
   und Ort geteilt — die Aufteilung kommt aus WooCommerce' eigenen
   Feldklassen, damit die länderabhängige Anordnung erhalten bleibt. */

.woocommerce-account .woocommerce-address-fields__field-wrapper {
	display: grid;
	gap: var(--vis-space-5);
}

@media (min-width: 700px) {
	.woocommerce-account .woocommerce-address-fields__field-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-wide,
	.woocommerce-account .woocommerce-address-fields__field-wrapper #billing_address_1_field,
	.woocommerce-account .woocommerce-address-fields__field-wrapper #shipping_address_1_field {
		grid-column: 1 / -1;
	}
}

.woocommerce-account .woocommerce-address-fields .form-row {
	display: grid;
	gap: var(--vis-space-2);
	margin: 0;
	padding: 0;
	float: none;
	inline-size: auto;
}

.woocommerce-account .woocommerce-address-fields label {
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
}

.woocommerce-account .woocommerce-address-fields .select2-container,
.woocommerce-account .woocommerce-address-fields select {
	inline-size: 100%;
	min-inline-size: 0;
}

.woocommerce-account .woocommerce-address-fields button {
	justify-self: start;
	grid-column: 1 / -1;
}

/* ══ 12 — Hervorhebungen im Bestelldetail ══════════════════════════════

   WooCommerce setzt Bestellnummer, Datum und Status in `<mark>`. Der
   Browser malt das gelb — im Bestelldetail sieht das aus, als sei etwas
   zu beanstanden. Gemeint ist eine Betonung, also wird sie eine. */

.woocommerce-account .woocommerce-MyAccount-content mark {
	background: transparent;
	color: var(--vis-text);
	font-weight: var(--vis-fw-medium);
}

/* Die Tabelle des Bestelldetails: Zahlen rechts wären hier falsch — die
   Beträge stehen in einer eigenen Spalte und richten sich an ihr aus. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table--order-details {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--vis-fs-body-s);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table--order-details th,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table--order-details td {
	padding-block: var(--vis-space-3);
	border-block-end: var(--vis-border-width) solid var(--vis-border);
	text-align: start;
	vertical-align: top;
}

/* ══ 13 — Meldungen ═════════════════════════════════════════════════════ */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
	margin: 0 0 var(--vis-space-6);
	padding: var(--vis-space-4) var(--vis-space-5);
	border-radius: var(--vis-radius-sm);
	list-style: none;
	font-size: var(--vis-fs-body-s);
}

.woocommerce-account .woocommerce-message { background: var(--vis-ok-bg);   color: var(--vis-ok-text); }
.woocommerce-account .woocommerce-error   { background: var(--vis-err-bg);  color: var(--vis-err-text); }
.woocommerce-account .woocommerce-info    { background: var(--vis-info-bg); color: var(--vis-info-text); }

/* ══ 14 — Fokus ═════════════════════════════════════════════════════════

   Jedes Bedienelement des Kontos zeigt den Tastaturfokus gleich: der
   Fokusring aus `tokens.css`, wie an `.vis-btn` und `.vis-input`. Vorher
   hatten nur die Eingabefelder einen eigenen Ring; Navigation, Reiter,
   Karten und Absendeknöpfe blieben dem Browser überlassen — und der zeigt
   auf der getönten Fläche des aktiven Navigationspunkts kaum etwas.

   Nur `:focus-visible`: Ein Mausklick hinterlässt keinen Ring. */

.vis-acchead__brand:focus-visible,
.vis-acchead__back:focus-visible,
.vis-acchead__cart:focus-visible,
.vis-account__link:focus-visible,
.vis-account__switch:focus-visible,
.vis-account__portal:focus-visible,
.vis-account__more:focus-visible,
.vis-account__quick:focus-visible,
.vis-card__action:focus-visible,
.vis-order__link:focus-visible,
.vis-auth__tab:focus-visible,
.vis-auth__lost:focus-visible,
.vis-auth__submit:focus-visible,
.vis-check input:focus-visible,
.show-password-input:focus-visible,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:focus-visible,
.woocommerce-account .woocommerce-MyAccount-content button.button:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-accent);
	outline-offset: var(--vis-focus-offset);
}

/* In der Navigationsliste liegen die Punkte 4 px auseinander. Ein Ring
   außen würde den Nachbarn überdecken; er liegt deshalb innen. */
.vis-account__link:focus-visible { outline-offset: calc(var(--vis-focus-offset) * -1); }