/**
 * Stylesheet der WooCommerce-Kontoseite ("Mein Konto").
 *
 * Wird nur auf der Kontoseite und ihren Unterseiten geladen,
 * siehe inc/woocommerce/account.php.
 */


/* =========================================================
   Begruessungsleiste oben (.avada-myaccount-user)

   Avada gibt ueber dem Kontobereich eine Leiste aus:
   "Hallo admin (nicht admin? Abmelden)", zwei Hinweistexte
   aus den Avada-Optionen (Telefon, E-Mail) und "Warenkorb
   ansehen". Im Original nur Linien oben und unten, dunkle
   Trennstriche und alle Spalten mit flex-shrink:0 - deshalb
   ragte "Warenkorb ansehen" rechts ueber die Leiste hinaus.

   Neu: helle Karte mit Rahmen und 12px Radius, feine
   Trennlinien, Spalten duerfen schrumpfen und umbrechen,
   "Warenkorb ansehen" als gruene Schaltflaeche rechts.

   Trennlinien: 1px Abstand (gap) zwischen den Spalten auf
   linienfarbigem Grund, die Spalten selbst hell. So entsteht
   jede Linie von allein - auch zwischen zwei Zeilen, wenn die
   Leiste auf schmaleren Bildschirmen umbricht (gemessen bei
   1024px: zwei Zeilen).

   Spezifitaet: Avadas Regeln liegen bei (0,1,0) bis (0,3,0);
   hier steht .woocommerce-account davor. !important nur dort,
   wo Avada selbst !important setzt (Spalten-Polster mobil).
   ========================================================= */

.woocommerce-account .avada-myaccount-user {
	flex-wrap: wrap;
	gap: 1px;
	margin-bottom: 40px;
	overflow: hidden;
	border: 1px solid rgba(67, 44, 35, 0.15);
	border-radius: 12px;
	background: #e7ddd0; /* Linienfarbe, sichtbar nur im 1px-Abstand */
}

.woocommerce-account .avada-myaccount-user .avada-myaccount-user-column {
	flex: 1 1 auto;
	min-width: 0;
	padding: 18px 22px;
	border-right: 0;
	background: #fbf6ef;
	color: var(--awb-color3, #51453e);
	font-size: 15px;
	line-height: 1.5;
}

/* Begruessung */
.woocommerce-account .avada-myaccount-user .username {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.woocommerce-account .avada-myaccount-user .username .hello {
	font-size: 17px;
	line-height: 1.4;
}

.woocommerce-account .avada-myaccount-user .username .hello::before {
	color: var(--awb-color5, #74763b);
}

.woocommerce-account .avada-myaccount-user .username .not-user {
	font-size: 14px;
	line-height: 1.5;
	opacity: 0.85;
}

/* Warenkorb: letzte Spalte, rechtsbuendig als Schaltflaeche.
   flex-grow 1: rutscht sie auf schmaleren Bildschirmen allein
   in eine zweite Zeile, fuellt sie diese ganz aus - sonst
   bliebe daneben eine Flaeche in Linienfarbe stehen. */
.woocommerce-account .avada-myaccount-user .avada-myaccount-user-column.avada-myaccount-user-column:last-child {
	flex: 1 0 auto;
	justify-content: flex-end;
	padding-left: 22px;
	border-right: 0;
}

.woocommerce-account .avada-myaccount-user .view-cart a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 8px;
	background: var(--awb-custom_color_5, #5e602f);
	color: #fff;
	font-size: 15px;
	line-height: 1.2;
	text-transform: none;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

/* Avada setzt das Warenkorb-Icon absolut vor den Link */
.woocommerce-account .avada-myaccount-user .view-cart a::before {
	position: static;
	margin: 0;
	color: #fff;
}

.woocommerce-account .avada-myaccount-user .view-cart a:hover {
	background: var(--awb-color5, #74763b);
	color: #fff;
}

.woocommerce-account .avada-myaccount-user .view-cart a:focus-visible {
	outline: 2px solid var(--awb-color5, #74763b);
	outline-offset: 2px;
}

/* Breitenverteilung nebeneinander (ab 801px). Die Hinweistexte
   duerfen umbrechen (Basis 220px), sonst nehmen sie ihre volle
   Textbreite und schieben den Warenkorb in eine eigene Zeile.
   Gemessen: 1400px und 1024px eine Zeile, 820px zwei Zeilen.
   Nur hier, weil mobil die Leiste senkrecht laeuft und die
   Basis dort als Hoehe wirken wuerde. */
@media only screen and (min-width: 801px) {

	.woocommerce-account .avada-myaccount-user .username {
		flex: 0 1 auto;
	}

	.woocommerce-account .avada-myaccount-user .avada-myaccount-user-column.message {
		flex: 1 1 220px;
	}
}

/* Tablet und Smartphone: Avada stapelt die Spalten (bis 800px) */
@media only screen and (max-width: 800px) {

	/* Avada schaltet hier auf display:block; fuer die Linien per
	   gap bleibt die Leiste ein Flex-Container, jetzt senkrecht. */
	.woocommerce-account .avada-myaccount-user {
		display: flex;
		flex-direction: column;
		padding: 0;
	}

	.woocommerce-account .avada-myaccount-user .avada-myaccount-user-column,
	.woocommerce-account .avada-myaccount-user .avada-myaccount-user-column.avada-myaccount-user-column:last-child {
		padding: 12px 18px !important;
	}

	.woocommerce-account .avada-myaccount-user .view-cart a {
		justify-content: center;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {

	.woocommerce-account .avada-myaccount-user .view-cart a {
		transition: none;
	}
}