/**
 * Coffeeness Konto (My Account) redesign - step 1: page shell, sidebar menu, Übersicht.
 *
 * Ported from "HTML Templates/konto/account-uebersicht.html" (the same sidebar is in
 * bestellungen.html / kaffee-abo.html). Markup:
 * - sidebar + mobile panel: cn_render_account_navigation() -> template-parts/account/navigation.php
 * - Übersicht: woocommerce/myaccount/dashboard.php
 * The other endpoints (Bestellungen, Kaffee-Abo, ...) keep their current content styling
 * for now; they only sit inside the new shell (see "Tabs that aren't redesigned yet").
 *
 * Only enqueued on account pages (functions.php, child_enqueue_styles) and every rule is
 * scoped under .woocommerce-account (WooCommerce body class), so no other page changes.
 * The shell only applies where the new menu renders (:has(.acct-aside)); the logged-out
 * login/register page has its own section at the end of this file (konto-anmelden.html),
 * lost-password keeps its old look. The old account rules in
 * style.css stay untouched: the shell rules carry a "body" prefix so they outrank them
 * (independent of load order), and the new menu / dashboard use their own class names,
 * so none of the old nav rules can reach them.
 *
 * Colors from the mockup:
 * text #032936 | blue #285bb8 (hover #1f4a99) | active bg #efecea | muted #9e9e9e
 * hairline #ededed | page + card bg #f9f9f9 | icon tan #c08f6e
 * pills: ok #21a54d | bad #e05858 | wait #ffbb1e | muted #9e9e9e
 */

.woocommerce-account {
	--acct-text: #032936;
	--acct-blue: #285bb8;
	--acct-blue-hover: #1f4a99;
	--acct-muted: #9e9e9e;
	--acct-active: #efecea;
	--acct-card: #f9f9f9;
	--acct-line: #ededed;
	--acct-tan: #c08f6e;
	--acct-ok: #21a54d;
	--acct-bad: #e05858;
	--acct-wait: #ffbb1e;
	--acct-font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Page shell (mockup: .account > .wrap > .account-shell)

   Only on pages with the new menu. Child combinators follow Astra's page markup
   (#main > article.ast-article-single > header.entry-header > h1.entry-title), so product
   cards that Astra also marks .ast-article-single can never pick up the shell.
   ========================================================================== */

/* style.css paints #content white on every page (#content{background-color:#fff});
   the Konto sits on #f9f9f9. */
body.woocommerce-account:has(.acct-aside),
body.woocommerce-account:has(.acct-aside) #content {
	background-color: #f9f9f9;
}

/* Mockup .wrap: max-width 1280px INCLUDING 24px side padding, at every width. Outranks
   style.css's 1400px container list and its <=921px "padding:0" rule
   (.ast-separate-container #content .ast-container). */
body.woocommerce-account:has(.acct-aside) #content > .ast-container {
	max-width: 1280px;
	padding-left: 24px;
	padding-right: 24px;
}

/* Mockup .account{padding:34px 0 70px}. Outranks style.css's 30px (0 at <=921px). */
body.woocommerce-account:has(.acct-aside) #primary {
	margin: 34px 0 70px;
	padding: 0;
}

/* Mockup .account-shell: Astra's white article box becomes the account container.
   Outranks style.css's ".woocommerce-account #primary .ast-article-single" 10px radius. */
body.woocommerce-account:has(.acct-aside) #main > .ast-article-single {
	background-color: #fff;
	border: 0.5px solid var(--acct-line);
	border-radius: 16px;
	padding: 32px 34px 38px;
}

body.woocommerce-account:has(.acct-aside) .ast-article-single > .entry-header {
	margin: 0;
}

/* Astra Addon's modern account view adds .entry-content{margin:2em auto}; in the mockup
   the menu/content grid starts 26px under the title (set on the title below). */
body.woocommerce-account:has(.acct-aside) .ast-article-single > .entry-content {
	margin-top: 0;
	margin-bottom: 0;
}

/* Mockup .account-title - also used for the endpoint titles ("Bestellungen", ...). */
body.woocommerce-account:has(.acct-aside) .entry-header > h1.entry-title {
	font-family: var(--acct-font);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--acct-text);
	margin: 0 0 26px;
}

/* ==========================================================================
   Two-column layout (mockup: .account-grid{grid-template-columns:236px 1fr;gap:40px})

   The shortcode's .woocommerce wrapper holds our trigger, backdrop and sidebar
   (navigation template) followed by WooCommerce's .woocommerce-MyAccount-content.
   :has() keeps the grid off pages without the menu (e.g. lost-password).
   ========================================================================== */

body.woocommerce-account .woocommerce:has(> .acct-aside) {
	display: grid;
	grid-template-columns: 236px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/* WooCommerce's clearfix pseudo-elements would become grid items and push the sidebar
   into the second column. */
body.woocommerce-account .woocommerce:has(> .acct-aside)::before,
body.woocommerce-account .woocommerce:has(> .acct-aside)::after {
	content: none;
}

/* Only the sidebar and the content share a row; anything else printed into the
   wrapper (e.g. by a plugin) spans the full width. */
body.woocommerce-account .woocommerce:has(> .acct-aside) > * {
	grid-column: 1 / -1;
}

body.woocommerce-account .woocommerce:has(> .acct-aside) > .acct-aside {
	grid-column: 1;
}

/* WooCommerce floats the content next to its own menu and Astra's modern account view
   adds width/spacing; the grid places it now. */
body.woocommerce-account .woocommerce:has(> .acct-aside) > .woocommerce-MyAccount-content {
	grid-column: 2;
	float: none;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* New components use the mockup's type; the endpoint content keeps its own for now. */
.woocommerce-account .acct-aside,
.woocommerce-account .acct-trigger,
.woocommerce-account .acct-dash {
	font-family: var(--acct-font);
	line-height: normal;
	color: var(--acct-text);
	-webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Sidebar menu (mockup: .acct-menu / .acct-link / .acct-group)
   ========================================================================== */

.woocommerce-account .acct-menu {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.woocommerce-account .acct-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--acct-text);
	font-size: .98rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background .14s ease;
}

.woocommerce-account .acct-ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--acct-text);
	transition: color .14s ease;
}

.woocommerce-account .acct-ico svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Hover + current page: #efecea background, blue icon, text colour unchanged. The colour
   and underline are repeated because the global a:hover rules (style.css, Astra) would
   otherwise recolour and underline the link. */
.woocommerce-account .acct-link:hover,
.woocommerce-account .acct-link:focus,
.woocommerce-account .acct-link.is-active {
	background: var(--acct-active);
	color: var(--acct-text);
	text-decoration: none;
}

.woocommerce-account .acct-link:hover .acct-ico,
.woocommerce-account .acct-link:focus .acct-ico,
.woocommerce-account .acct-link.is-active .acct-ico {
	color: var(--acct-blue);
}

/* Section headings "Bestellungen & Abo" / "Einstellungen" */
.woocommerce-account .acct-group {
	margin-top: 16px;
	padding: 6px 12px 4px;
	font-size: .8rem;
	font-weight: 500;
	color: var(--acct-muted);
}

.woocommerce-account .acct-group:first-of-type {
	margin-top: 14px;
}

/* Slim divider + muted, de-emphasised "Abmelden" (icon still turns blue on hover) */
.woocommerce-account .acct-divider {
	height: 1px;
	margin: 14px 6px;
	background: var(--acct-line);
}

.woocommerce-account .acct-link--customer-logout,
.woocommerce-account .acct-link--customer-logout:hover,
.woocommerce-account .acct-link--customer-logout:focus,
.woocommerce-account .acct-link--customer-logout .acct-ico {
	color: var(--acct-muted);
}

/* ==========================================================================
   Übersicht (mockup: .dash-*)
   ========================================================================== */

.woocommerce-account .dash-title {
	margin: 2px 0 6px;
	font-family: var(--acct-font);
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--acct-text);
}

/* Explicit paragraph margins: style.css gives every .entry-content p a 20px bottom margin. */
.woocommerce-account .dash-sub {
	margin: 0 0 22px;
	font-size: .98rem;
	line-height: 1.4;
	color: var(--acct-muted);
}

.woocommerce-account .dash-card {
	position: relative;
	margin-bottom: 16px;
	padding: 18px 20px 20px;
	background: var(--acct-card);
	border: 1px solid var(--acct-line);
	border-radius: 12px;
}

/* Long pills ("In Wartestellung (Pausiert)", "Widerruf ausstehend") don't fit next to the
   eyebrow on phones: the 8rem flex-basis lets the eyebrow wrap its own text first (as in the
   mockup) and moves the pill to its own line only when even that isn't enough. */
.woocommerce-account .dash-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px 12px;
}

.woocommerce-account .dash-eyebrow {
	flex: 1 1 8rem;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .92rem;
	font-weight: 600;
	color: var(--acct-muted);
}

.woocommerce-account .dash-eyebrow svg,
.woocommerce-account .dash-support-text svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--acct-tan);
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.woocommerce-account .dash-strong {
	margin: 12px 0 2px;
	font-size: 1.06rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--acct-text);
}

.woocommerce-account .dash-muted {
	margin: 0;
	font-size: .95rem;
	line-height: 1.45;
	color: var(--acct-muted);
}

.woocommerce-account .dash-muted + .dash-muted {
	margin-top: 2px;
}

/* The order total is WooCommerce price markup - keep it in the line's muted style. */
.woocommerce-account .dash-muted .woocommerce-Price-amount {
	color: inherit;
	font-weight: inherit;
}

.woocommerce-account .dash-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

/* Status pills: white text on the tone colour (dark text on yellow for contrast) */
.woocommerce-account .pill-status {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
}

.woocommerce-account .pill-ok {
	background: var(--acct-ok);
}

.woocommerce-account .pill-bad {
	background: var(--acct-bad);
}

.woocommerce-account .pill-wait {
	background: var(--acct-wait);
	color: var(--acct-text);
}

.woocommerce-account .pill-muted {
	background: var(--acct-muted);
}

/* Buttons are links, so every state repeats colour + text-decoration (the global a and
   a:hover rules would win otherwise). */
.woocommerce-account .acct-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1.5px solid transparent;
	border-radius: 9px;
	font-family: var(--acct-font);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background .14s ease, color .14s ease, border-color .14s ease;
}

.woocommerce-account .acct-btn--primary,
.woocommerce-account .acct-btn--primary:hover,
.woocommerce-account .acct-btn--primary:focus {
	color: #fff;
	text-decoration: none;
}

.woocommerce-account .acct-btn--primary {
	background: var(--acct-blue);
}

.woocommerce-account .acct-btn--primary:hover,
.woocommerce-account .acct-btn--primary:focus {
	background: var(--acct-blue-hover);
}

.woocommerce-account .acct-btn--ghost,
.woocommerce-account .acct-btn--ghost:hover,
.woocommerce-account .acct-btn--ghost:focus {
	color: var(--acct-blue);
	border-color: var(--acct-blue);
	text-decoration: none;
}

.woocommerce-account .acct-btn--ghost {
	background: #fff;
}

.woocommerce-account .acct-btn--ghost:hover,
.woocommerce-account .acct-btn--ghost:focus {
	background: var(--acct-active);
}

.woocommerce-account .acct-btn--white,
.woocommerce-account .acct-btn--white:hover,
.woocommerce-account .acct-btn--white:focus {
	color: var(--acct-text);
	text-decoration: none;
}

.woocommerce-account .acct-btn--white {
	background: #fff;
}

.woocommerce-account .acct-btn--white:hover,
.woocommerce-account .acct-btn--white:focus {
	background: #eef1f3;
}

/* Support box */
.woocommerce-account .dash-support {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 4px;
	padding: 18px 22px;
	background: var(--acct-text);
	border-radius: 12px;
}

.woocommerce-account .dash-support-text {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}

.woocommerce-account .dash-support-text svg {
	width: 20px;
	height: 20px;
}

/* Small button variant (order tables, Abo page) */
.woocommerce-account .acct-btn--sm {
	padding: 8px 14px;
	border-radius: 8px;
	font-size: .88rem;
}

.woocommerce-account .acct-btn.is-disabled {
	opacity: .45;
	pointer-events: none;
}

/* Section headings under the page title (mockup .sub-h), e.g. "Zugehörige Bestellungen" */
.woocommerce-account .sub-h {
	margin: 34px 0 14px;
	font-family: var(--acct-font);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--acct-text);
}

/* ==========================================================================
   Bestellungen + "Zugehörige Bestellungen" (mockup: bestellungen.html .orders-*)

   Markup: template-parts/account/orders-table.php. The table carries none of
   WooCommerce's shop_table / shop_table_responsive / my_account_orders classes, so the
   old table rules and WooCommerce's mobile table layout don't reach it; Astra's generic
   table / th / td borders and paddings are reset here.
   ========================================================================== */

.woocommerce-account .acct-orders,
.woocommerce-account .orders-wrap {
	font-family: var(--acct-font);
	color: var(--acct-text);
}

.woocommerce-account .orders-wrap {
	margin: 0;
	border: 1px solid var(--acct-line);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

.woocommerce-account .orders-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: .95rem;
	line-height: 1.4;
}

.woocommerce-account .orders-table thead th {
	padding: 13px 16px;
	border: 0;
	border-bottom: 1px solid var(--acct-line);
	background: var(--acct-card);
	color: var(--acct-text);
	font-size: .82rem;
	font-weight: 700;
	line-height: normal;
	text-align: left;
	white-space: nowrap;
}

.woocommerce-account .orders-table tbody td,
.woocommerce-account .orders-table tbody th {
	padding: 15px 16px;
	border: 0;
	border-top: 1px solid var(--acct-line);
	background: none;
	color: var(--acct-text);
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	vertical-align: middle;
}

.woocommerce-account .orders-table tbody tr:first-child > * {
	border-top: 0;
}

.woocommerce-account .orders-table tbody tr:hover > * {
	background: #fbfbfb;
}

.woocommerce-account .orders-table tbody .col-order {
	font-weight: 700;
	white-space: nowrap;
}

/* The order number stays a link to the order, styled as the mockup's plain bold number. */
.woocommerce-account .orders-table .col-order a,
.woocommerce-account .orders-table .col-order a:hover,
.woocommerce-account .orders-table .col-order a:focus {
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

/* Rendered in the text colour like the mockup (its .col-date muted colour loses to its own
   td rule there). */
.woocommerce-account .orders-table tbody .col-date {
	white-space: nowrap;
}

/* Refunded totals come as <del>old</del> <ins>new</ins> (mockup .old / .amount). */
.woocommerce-account .orders-table .col-total .woocommerce-Price-amount {
	color: inherit;
	font-weight: inherit;
}

.woocommerce-account .orders-table .col-total del {
	margin-right: 5px;
	color: var(--acct-muted);
}

.woocommerce-account .orders-table .col-total ins {
	text-decoration: none;
}

.woocommerce-account .orders-table .col-total .items {
	color: var(--acct-muted);
}

.woocommerce-account .orders-table tbody .col-actions {
	width: 1%;
}

/* Abo list (woocommerce/myaccount/my-subscriptions.php): payment method under the date, and a
   label for the date line that only shows on the phone cards (they have no column headers). */
.woocommerce-account .orders-table .col-date small {
	display: block;
	margin-top: 2px;
	color: var(--acct-muted);
	font-size: .82rem;
}

.woocommerce-account .orders-table .orders-mlabel {
	display: none;
}

@media (max-width: 860px) {
	.woocommerce-account .orders-table .orders-mlabel {
		display: inline;
		color: var(--acct-muted);
	}
}

.woocommerce-account .order-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.woocommerce-account .order-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	font-family: var(--acct-font);
	font-size: .86rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background .14s ease;
}

.woocommerce-account .order-link,
.woocommerce-account .order-link:hover,
.woocommerce-account .order-link:focus {
	color: var(--acct-blue);
	text-decoration: none;
}

.woocommerce-account .order-link:hover,
.woocommerce-account .order-link:focus {
	background: var(--acct-active);
}

.woocommerce-account .order-link svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Pager "Zurück · Seite x von y · Weiter" */
.woocommerce-account .orders-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 20px;
}

.woocommerce-account .orders-pageinfo {
	font-size: .9rem;
	color: var(--acct-muted);
}

/* No orders yet */
.woocommerce-account .orders-empty {
	padding: 34px 24px;
	border: 1px solid var(--acct-line);
	border-radius: 12px;
	background: var(--acct-card);
	text-align: center;
}

.woocommerce-account .orders-empty .dash-strong {
	margin-top: 0;
}

.woocommerce-account .orders-empty .acct-btn {
	margin-top: 14px;
}

/* <=860px: every order becomes a card - number + pill on top, then date, total and the
   actions ("Anzeigen" full width, the links as equal chips). Same breakpoint as the menu. */
@media (max-width: 860px) {
	.woocommerce-account .orders-wrap {
		border: 0;
		border-radius: 0;
		overflow: visible;
		background: none;
	}

	.woocommerce-account .orders-table thead {
		display: none;
	}

	.woocommerce-account .orders-table,
	.woocommerce-account .orders-table tbody {
		display: block;
		width: 100%;
	}

	.woocommerce-account .orders-table tbody tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 14px;
		padding: 16px 16px 14px;
		border: 1px solid var(--acct-line);
		border-radius: 12px;
		background: var(--acct-card);
	}

	.woocommerce-account .orders-table tbody td,
	.woocommerce-account .orders-table tbody th {
		padding: 0;
		border: 0;
		background: none;
	}

	.woocommerce-account .orders-table tbody tr:hover > * {
		background: none;
	}

	.woocommerce-account .orders-table tbody td::before,
	.woocommerce-account .orders-table tbody th::before {
		content: none;
		display: none;
	}

	.woocommerce-account .orders-table tbody tr > .col-order {
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
		font-size: 1.1rem;
	}

	.woocommerce-account .orders-table tbody tr > .col-status {
		order: 2;
		flex: 0 0 auto;
		margin-left: 12px;
	}

	.woocommerce-account .orders-table tbody tr > .col-date {
		order: 3;
		flex: 0 0 100%;
		margin-top: 4px;
		font-size: .9rem;
	}

	.woocommerce-account .orders-table tbody tr > .col-total {
		order: 4;
		flex: 0 0 100%;
		margin-top: 6px;
	}

	.woocommerce-account .orders-table tbody tr > .col-actions {
		order: 5;
		flex: 0 0 100%;
		width: auto;
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid var(--acct-line);
	}

	.woocommerce-account .order-actions {
		gap: 8px;
	}

	.woocommerce-account .order-actions .acct-btn--primary {
		flex: 1 1 100%;
	}

	.woocommerce-account .order-link {
		flex: 1 1 0;
		justify-content: center;
		border: 1px solid var(--acct-line);
		background: #fff;
	}
}

/* ==========================================================================
   Kaffee-Abo page (view-subscription), mockup kaffee-abo.html

   The tables stay WooCommerce Subscriptions' tables: the Self-Service Dashboard plugin
   ("Datum anpassen", "Pausieren", "Menge & Lieferzyklus anpassen"), the Toolbox rows,
   js/active.js and the cancel popup (a.button.cancel) all hook into them. They are only
   re-skinned into the mockup's cards. Scoped to the content that holds the details table;
   the old style.css rules for these tables stay, and the ones that are !important there
   are matched with !important here.
   ========================================================================== */

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) {
	font-family: var(--acct-font);
	color: var(--acct-text);
}

/* "Übersicht Kaffee-Abo" and "Abo-Aktualisierungen" headings (mockup .sub-h) */
body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > h2 {
	margin: 34px 0 14px;
	font-family: var(--acct-font);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--acct-text);
}

/* --- Detail card (mockup .detail-card / .drow: 210px label column) --- */
body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.subscription_details {
	width: 100%;
	margin: 0;
	border: 1px solid var(--acct-line);
	border-radius: 12px !important;
	border-collapse: separate !important;
	border-spacing: 0;
	background: #fff;
	overflow: hidden;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.subscription_details tr {
	border: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.subscription_details td {
	width: auto !important;
	margin: 0;
	padding: 14px 18px;
	border: 0;
	border-top: 1px solid var(--acct-line) !important;
	background: none !important;
	color: var(--acct-text);
	font-weight: 400;
	line-height: 1.5;
	vertical-align: top;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.subscription_details tr:first-child td {
	border-top: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.subscription_details td:first-child {
	width: 244px !important; /* 18px padding + 210px label + 16px gap */
	padding-right: 16px;
	color: var(--acct-muted);
	font-size: .92rem;
	font-weight: 600;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.subscription_details td + td {
	padding-left: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.subscription_details td.flex_buttons {
	flex-wrap: wrap;
	gap: 8px;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.subscription_details td a:not(.button) {
	color: var(--acct-blue);
	text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.subscription_details td a:not(.button):hover {
	text-decoration: underline;
}

/* Buttons inside the Abo tables (plugin + WooCommerce Subscriptions buttons): ghost
   small, like the mockup's "Menge & Lieferzyklus anpassen" / "Kündigen"; the actions row
   gets blue buttons except "Kündigen". */
body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 8px 14px;
	border: 1.5px solid var(--acct-blue);
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
	color: var(--acct-blue);
	font-family: var(--acct-font);
	font-size: .88rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background .14s ease, color .14s ease, border-color .14s ease;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table .button:hover,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table .button:focus {
	border-color: var(--acct-blue);
	background: var(--acct-active);
	color: var(--acct-blue);
	text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.subscription_details td.flex_buttons .button:not(.cancel) {
	border-color: transparent;
	background: var(--acct-blue);
	color: #fff;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.subscription_details td.flex_buttons .button:not(.cancel):hover,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.subscription_details td.flex_buttons .button:not(.cancel):focus {
	border-color: transparent;
	background: var(--acct-blue-hover);
	color: #fff;
}

/* SSD's frontend.css gives "Pausieren" margin-bottom:4px !important (>=800px), which makes it
   4px shorter than its stretched flex neighbours; the row's gap does the spacing here. */
body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.subscription_details td.flex_buttons .pause_subscription {
	margin-bottom: 0 !important;
}

/* SSD's "Datum anpassen" sits next to the date */
body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.subscription_details .button.sf-change-payment-date {
	margin-left: 10px;
}

/* --- Summary card "Übersicht Kaffee-Abo" (mockup .summary-card / .sum-*) ---
   The second selector of each rule gives the single order's "Bestelldetails" table the same
   card (WooCommerce's order-details table, same markup); the address cards below likewise. */
body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details {
	width: 100%;
	margin: 0;
	border: 1px solid var(--acct-line);
	border-radius: 12px !important;
	border-collapse: separate !important;
	border-spacing: 0;
	background: #fff;
	overflow: hidden;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details thead,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details thead {
	display: none;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details tbody td,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tbody td {
	padding: 18px;
	border: 0;
	background: var(--acct-card);
	color: var(--acct-text);
	font-weight: 600;
	line-height: 1.4;
	vertical-align: top;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details tbody tr + tr td,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tbody tr + tr td {
	border-top: 1px solid var(--acct-line);
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details td.product-name > a:not(.button),
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details td.product-name > a:not(.button) {
	color: inherit;
	text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details td.product-name > a:not(.button):hover,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details td.product-name > a:not(.button):hover {
	text-decoration: underline;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details .product-quantity,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details .product-quantity {
	font-weight: 600;
}

/* Astra's account CSS sets shop_table prices to normal weight; they follow their row here
   (semi-bold product price, bold "Gesamt"). */
body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details .woocommerce-Price-amount,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details .woocommerce-Price-amount {
	font-weight: inherit;
}

/* Item meta (e.g. "Mahlgrad: Ganze Bohne") as small muted lines under the name.
   !important because style.css's "#main ul" margin/padding rule carries an ID. */
body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details .wc-item-meta,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details .wc-item-meta {
	margin: 6px 0 0 !important;
	padding: 0 !important;
	list-style: none;
	color: var(--acct-muted);
	font-size: .9rem;
	font-weight: 400;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details .wc-item-meta li,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details .wc-item-meta li {
	margin: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details .wc-item-meta li::before,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details .wc-item-meta li::before {
	content: none;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details .wc-item-meta strong,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details .wc-item-meta strong,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details .wc-item-meta p,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details .wc-item-meta p {
	display: inline;
	margin: 0;
	font-weight: inherit;
}

/* "Menge & Lieferzyklus anpassen" on its own line under the product name */
body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details td.product-name .button,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details td.product-name .button {
	display: flex;
	width: fit-content;
	margin-top: 10px;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details td.product-total,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details td.product-total {
	text-align: right;
	white-space: nowrap;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details tfoot th,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tfoot th,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details tfoot td,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tfoot td {
	padding: 12px 18px;
	border: 0;
	border-top: 1px solid var(--acct-line);
	background: none;
	color: var(--acct-text);
	font-weight: 400;
	line-height: 1.4;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details tfoot th,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tfoot th {
	text-align: left;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details tfoot td,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tfoot td {
	text-align: right;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details tfoot .cn-total-row--order_total > *,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tfoot .cn-total-row--order_total > * {
	font-weight: 700;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details tfoot .cn-total-row--tax > *,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tfoot .cn-total-row--tax > *,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details tfoot small,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tfoot small {
	color: var(--acct-muted);
	font-size: .9rem;
	font-weight: 400;
}

/* --- Billing / shipping address cards (mockup .addr-grid / .addr-card) --- */
body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > .woocommerce-customer-details,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .woocommerce-customer-details {
	margin: 16px 0 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > .woocommerce-customer-details > .addresses,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .woocommerce-customer-details > .addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 0;
}

/* WooCommerce's col2-set clearfix pseudo-elements would become grid cells. */
body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > .woocommerce-customer-details > .addresses::before,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .woocommerce-customer-details > .addresses::before,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > .woocommerce-customer-details > .addresses::after,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .woocommerce-customer-details > .addresses::after {
	content: none;
}

/* A card per address; without a shipping address WooCommerce prints only the billing
   address straight into the section, which then is the card. */
body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > .woocommerce-customer-details .woocommerce-column,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .woocommerce-customer-details .woocommerce-column,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > .woocommerce-customer-details:not(:has(.addresses)),
body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .woocommerce-customer-details:not(:has(.addresses)) {
	float: none;
	width: auto;
	max-width: none;
	margin: 0 !important;
	padding: 18px 20px;
	border: 1px solid var(--acct-line);
	border-radius: 12px;
	background: #fff;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > .woocommerce-customer-details:not(:has(.addresses)),
body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .woocommerce-customer-details:not(:has(.addresses)) {
	margin-top: 16px !important;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > .woocommerce-customer-details .woocommerce-column__title,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .woocommerce-customer-details .woocommerce-column__title {
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--acct-font);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--acct-text);
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > .woocommerce-customer-details address,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .woocommerce-customer-details address {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-style: normal;
	line-height: 1.65;
	color: var(--acct-text);
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > .woocommerce-customer-details address p,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .woocommerce-customer-details address p {
	margin: 0;
	padding: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > .woocommerce-customer-details address p::before,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .woocommerce-customer-details address p::before {
	content: none;
}

@media (max-width: 860px) {
	/* Detail rows: label above value (mockup .drow single column) */
	body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.subscription_details tr {
		display: block;
	}

	body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.subscription_details td {
		display: block;
	}

	body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.subscription_details td.flex_buttons {
		display: flex;
	}

	body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.subscription_details td:first-child {
		width: auto !important;
		padding: 14px 18px 0;
		font-size: .82rem;
	}

	body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.subscription_details td + td {
		padding: 4px 18px 14px;
		border-top: 0 !important;
	}

	body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.subscription_details .button.sf-change-payment-date {
		margin: 8px 0 0;
	}

	/* Summary: product and price stacked (mockup .sum-product column), sum lines as
	   label/value rows. The table is switched to block layout, otherwise the flex rows
	   would shrink to an anonymous table cell. */
	body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details,
	body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details,
	body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details tbody,
	body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tbody,
	body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details tfoot,
	body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tfoot {
		display: block;
		width: 100%;
	}

	body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details tbody tr,
	body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tbody tr {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 18px;
		background: var(--acct-card);
	}

	body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details tbody td,
	body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tbody td {
		display: block;
		padding: 0;
		background: none;
	}

	body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details tbody tr + tr,
	body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tbody tr + tr {
		border-top: 1px solid var(--acct-line);
	}

	body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details tbody tr + tr td,
	body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tbody tr + tr td {
		border-top: 0;
	}

	body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details td.product-total,
	body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details td.product-total {
		text-align: left;
	}

	/* border-bottom: Astra's account CSS gives ".shop_table tfoot tr" one, which only shows once
	   the rows are flex boxes. */
	body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details tfoot tr,
	body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tfoot tr {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		padding: 12px 18px;
		border: 0;
		border-top: 1px solid var(--acct-line);
	}

	body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details tfoot th,
	body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tfoot th,
	body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details tfoot td,
	body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tfoot td {
		display: block;
		padding: 0;
		border: 0;
	}

	body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details tfoot th,
	body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tfoot th {
		flex: 0 0 auto;
	}

	/* min-width + overflow-wrap: a long value ("PayPal (name@example.de)") wraps inside the card
	   instead of running out of it. */
	body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > table.order_details tfoot td,
	body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tfoot td {
		flex: 1 1 auto;
		min-width: 0;
		overflow-wrap: anywhere;
	}

	body.woocommerce-account .woocommerce-MyAccount-content:has(> .subscription_details) > .woocommerce-customer-details > .addresses,
	body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .woocommerce-customer-details > .addresses {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Single order (view-order) - no mockup of its own, built from the Abo page's parts

   Status line + order updates: woocommerce/myaccount/view-order.php. "Zugehörige
   Abonnements": woocommerce/myaccount/related-subscriptions.php (Abo table). The order
   table, "Erneut bestellen", the addresses and Germanized's invoice downloads stay
   WooCommerce / plugin markup: the order table and the addresses share the Abo page's
   summary / address card rules above, the rest is set here. The totals values carry
   .cn-total--* markers from cn_account_view_order_totals() (functions.php). Old rules in
   style.css stay; the ones that are !important there are matched with !important here.
   ========================================================================== */

body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) {
	font-family: var(--acct-font);
	color: var(--acct-text);
}

/* Status line: pill, "Bestellt am …", "Sendung verfolgen" */
.woocommerce-account .order-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

.woocommerce-account .order-head-date {
	color: var(--acct-muted);
	font-size: .95rem;
	line-height: 1.4;
}

/* "Bestelldetails" (WooCommerce's title), "Downloads" and Germanized's "Download Rechnungen"
   as Konto section headings (.sub-h) */
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > .woocommerce-order-details__title,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .woocommerce-order-downloads > .woocommerce-order-downloads__title,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .sab-documents-download > h3 {
	margin: 34px 0 14px;
	padding: 0;
	font-family: var(--acct-font);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--acct-text);
}

body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details {
	margin: 0;
}

/* Totals: "Gesamt" bold, tax lines muted (as on the Abo page); a refunded total shows
   <del>old</del> <ins>new</ins>. */
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tfoot tr:has(> td > .cn-total--order_total) > * {
	font-weight: 700;
}

body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tfoot tr:has(> td > .cn-total--tax) > * {
	color: var(--acct-muted);
	font-size: .9rem;
}

body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tfoot del {
	margin-right: 4px;
	color: var(--acct-muted);
	font-weight: 400;
}

body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tfoot ins {
	text-decoration: none;
}

/* Actions row ("Rechnung …", "Bezahlen", "Stornieren"): a button row under the sums, without
   WooCommerce's "Aktionen:" label. */
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tfoot tr:has(> .order-actions--heading) > th {
	display: none;
}

body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tfoot tr:has(> .order-actions--heading) > td {
	text-align: left;
}

/* Desktop table: the lone actions cell only covers the first column, so the row above
   draws the separator line across the full width. */
@media (min-width: 861px) {
	body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tfoot tr:has(+ tr > .order-actions--heading) > * {
		border-bottom: 1px solid var(--acct-line);
	}

	body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details tfoot tr:has(> .order-actions--heading) > td {
		padding: 12px 18px 14px;
		border-top: 0;
	}
}

/* Small Konto buttons: blue for the order actions and "Erneut bestellen", outlined for
   "Stornieren" and the invoice downloads. style.css gives .order-actions-button and
   .button-document-download !important margins; the rows use gaps / these margins instead. */
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details .order-actions-button,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > .order-again .button,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .sab-documents-download .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	max-width: none;
	margin: 0 !important;
	padding: 8px 14px;
	border: 1.5px solid transparent;
	border-radius: 8px;
	background: var(--acct-blue);
	box-shadow: none;
	color: #fff;
	font-family: var(--acct-font);
	font-size: .88rem;
	line-height: 1;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background .14s ease, color .14s ease, border-color .14s ease;
}

body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details .order-actions-button:hover,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details .order-actions-button:focus,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > .order-again .button:hover,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > .order-again .button:focus {
	border-color: transparent;
	background: var(--acct-blue-hover);
	color: #fff;
	text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details .order-actions-button.cancel,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .sab-documents-download .button {
	border-color: var(--acct-blue);
	background: #fff;
	color: var(--acct-blue);
}

body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details .order-actions-button.cancel:hover,
body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details .order-actions-button.cancel:focus,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .sab-documents-download .button:hover,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .sab-documents-download .button:focus {
	border-color: var(--acct-blue);
	background: var(--acct-active);
	color: var(--acct-blue);
	text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > table.order_details .order-actions-button {
	margin: 4px 8px 4px 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-order-details > .order-again {
	margin: 20px 0 0;
}

/* Addresses: a bit more room after "Erneut bestellen" than after the Abo's summary card */
body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .woocommerce-customer-details,
body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .woocommerce-customer-details:not(:has(.addresses)) {
	margin-top: 28px !important;
}

/* Germanized "Download Rechnungen": heading + one button per document */
body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .sab-documents-download {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(> .woocommerce-order-details) > .sab-documents-download > h3 {
	flex: 0 0 100%;
	margin-bottom: 6px; /* + the 8px gap = the 14px under every .sub-h */
}

/* Order updates (customer notes) as small cards */
body.woocommerce-account .woocommerce-MyAccount-content ol.order-notes {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-account .woocommerce-MyAccount-content ol.order-notes > li.note {
	margin: 0 0 10px;
	padding: 14px 18px;
	border: 1px solid var(--acct-line);
	border-radius: 12px;
	background: var(--acct-card);
	list-style: none;
}

body.woocommerce-account .woocommerce-MyAccount-content ol.order-notes > li.note::before {
	content: none;
}

body.woocommerce-account .woocommerce-MyAccount-content ol.order-notes li.note p.meta {
	margin: 0 0 4px;
	color: var(--acct-muted);
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.4;
}

body.woocommerce-account .woocommerce-MyAccount-content ol.order-notes li.note .description p {
	margin: 0;
	line-height: 1.5;
}

body.woocommerce-account .woocommerce-MyAccount-content ol.order-notes li.note .description p + p {
	margin-top: 6px;
}

/* ==========================================================================
   Adressen (edit-address overview) - the address cards of the single order page, each with
   its "… bearbeiten" button at the bottom

   CSS only, WooCommerce's my-address.php markup: p (intro) + .woocommerce-Addresses >
   .woocommerce-Address > header.woocommerce-Address-title (h2 + a.edit) + address. The
   header box is dissolved (display: contents), so title, address and button stack in the
   card and the buttons of both cards line up at the bottom. Scoped with :has(.woocommerce-Address)
   because with "ship to billing address only" WooCommerce prints the card without the wrapper.
   The old rules in style.css stay; the ones with high specificity are outranked here.
   ========================================================================== */

body.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-Address) {
	font-family: var(--acct-font);
	color: var(--acct-text);
}

/* "Die folgenden Adressen werden standardmäßig auf der Kassenseite verwendet." */
body.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-Address) > p {
	margin: 0 0 18px;
	color: var(--acct-muted);
	font-size: .95rem;
	line-height: 1.45;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-Address) > .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	width: auto;
	margin: 0;
}

/* WooCommerce's col2-set clearfix pseudo-elements would become grid cells. */
body.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-Address) > .woocommerce-Addresses::before,
body.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-Address) > .woocommerce-Addresses::after {
	content: none;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-Address) .woocommerce-Address {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 18px 20px 20px;
	border: 1px solid var(--acct-line);
	border-radius: 12px;
	background: #fff;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-Address) .woocommerce-Address > .woocommerce-Address-title {
	display: contents;
}

/* WooCommerce's clearfix on the dissolved header would add empty flex items. */
body.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-Address) .woocommerce-Address > .woocommerce-Address-title::before,
body.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-Address) .woocommerce-Address > .woocommerce-Address-title::after {
	content: none;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-Address) .woocommerce-Address > .woocommerce-Address-title > h2,
body.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-Address) .woocommerce-Address > .woocommerce-Address-title > h3 {
	order: 1;
	float: none;
	margin: 0 0 10px;
	padding: 0;
	font-family: var(--acct-font);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--acct-text);
}

body.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-Address) .woocommerce-Address > address {
	order: 2;
	width: 100%;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-style: normal;
	line-height: 1.65;
	color: var(--acct-text);
}

/* "Rechnungsadresse bearbeiten" / "… hinzufügen": small blue Konto button, pinned to the
   card bottom (margin-top: auto) so both cards' buttons line up. */
body.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-Address) .woocommerce-Address > .woocommerce-Address-title > .edit {
	order: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	float: none;
	margin: auto 0 0;
	padding: 8px 14px;
	border: 1.5px solid transparent;
	border-radius: 8px;
	background: var(--acct-blue);
	box-shadow: none;
	color: #fff;
	font-family: var(--acct-font);
	font-size: .88rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: background .14s ease;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-Address) .woocommerce-Address > .woocommerce-Address-title > .edit:hover,
body.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-Address) .woocommerce-Address > .woocommerce-Address-title > .edit:focus {
	border-color: transparent;
	background: var(--acct-blue-hover);
	color: #fff;
	text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-Address) .woocommerce-Address > .woocommerce-Address-title > .edit:focus-visible {
	outline: 2px solid var(--acct-blue);
	outline-offset: 2px;
}

@media (max-width: 860px) {
	body.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-Address) > .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Gutscheine (vouchers endpoint, WooCommerce PDF Product Vouchers) - empty state

   The plugin prints a classic WooCommerce notice: div.woocommerce-info > a.button followed by
   the text "Noch keine Gutscheine verfügbar.". It becomes a Konto card: text left, small blue
   "Zum Shop" button right, no notice icon or blue accent. Scoped to the endpoint's body class
   (woocommerce-vouchers) and to the plugin's own notice (direct child of the content), so the
   sitewide notice reskin in style.css stays everywhere else, including account notices in
   .woocommerce-notices-wrapper; its !important declarations are matched with !important.
   The second selector of each rule gives WooCommerce's email-verification notice the same card
   (see below).
   ========================================================================== */

body.woocommerce-account.woocommerce-vouchers .woocommerce-MyAccount-content > .woocommerce-info,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info:has(> a[href*="wc_send_verification"]) {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center !important;
	justify-content: space-between;
	gap: 12px 16px;
	margin: 0;
	padding: 16px 20px !important;
	border: 1px solid var(--acct-line) !important;
	border-radius: 12px;
	background: var(--acct-card) !important;
	box-shadow: none;
	color: var(--acct-text);
	font-family: var(--acct-font);
	font-size: .98rem;
	line-height: 1.4;
}

body.woocommerce-account.woocommerce-vouchers .woocommerce-MyAccount-content > .woocommerce-info::before,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info:has(> a[href*="wc_send_verification"])::before,
body.woocommerce-account.woocommerce-vouchers .woocommerce-MyAccount-content > .woocommerce-info::after,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info:has(> a[href*="wc_send_verification"])::after {
	content: none !important;
}

/* The button comes first in the markup; order puts it after the text (the text is a bare
   text node, i.e. an anonymous flex item with order 0). */
body.woocommerce-account.woocommerce-vouchers .woocommerce-MyAccount-content > .woocommerce-info > .button,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info:has(> a[href*="wc_send_verification"]) > .button {
	order: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 8px 14px;
	border: 1.5px solid transparent;
	border-radius: 8px;
	background: var(--acct-blue);
	box-shadow: none;
	color: #fff;
	font-family: var(--acct-font);
	font-size: .88rem;
	line-height: 1;
	text-decoration: none;
	transition: background .14s ease;
}

body.woocommerce-account.woocommerce-vouchers .woocommerce-MyAccount-content > .woocommerce-info > .button:hover,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info:has(> a[href*="wc_send_verification"]) > .button:hover,
body.woocommerce-account.woocommerce-vouchers .woocommerce-MyAccount-content > .woocommerce-info > .button:focus,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info:has(> a[href*="wc_send_verification"]) > .button:focus {
	border-color: transparent;
	background: var(--acct-blue-hover);
	color: #fff;
	text-decoration: none;
}

body.woocommerce-account.woocommerce-vouchers .woocommerce-MyAccount-content > .woocommerce-info > .button:focus-visible,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info:has(> a[href*="wc_send_verification"]) > .button:focus-visible {
	outline: 2px solid var(--acct-blue);
	outline-offset: 2px;
}

/* WooCommerce's "E-Mail-Adresse bestätigen" notice (links earlier guest orders to the account,
   shown above Bestellungen; seen on live 2026-09-30): same card via the second selectors above.
   Its text is long, so the row doesn't wrap - the text wraps next to the button - and only on
   phones the button moves under the text. */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info:has(> a[href*="wc_send_verification"]) {
	flex-wrap: nowrap;
	margin: 0 0 16px;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info:has(> a[href*="wc_send_verification"]) > .button {
	flex: 0 0 auto;
	white-space: nowrap;
}

@media (max-width: 560px) {
	body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info:has(> a[href*="wc_send_verification"]) {
		flex-wrap: wrap;
	}
}

/* ==========================================================================
   Zahlungsmethoden (payment-methods) - saved methods in the Konto table style

   CSS only on WooCommerce's payment-methods.php table (WooCommerce Subscriptions hooks its
   "can't delete" warning and the a.button.wcs_deletion_error button into it). Same look as
   the Bestellungen table; up to 921px each method is a card, because that's where
   WooCommerce's own shop_table_responsive rules (smallscreen CSS) switch the table to blocks.
   The old rules stay; style.css's "border-collapse: collapse !important" (<=700px) and
   WooCommerce's "text-align: right !important" are matched with !important.
   ========================================================================== */

body.woocommerce-account .woocommerce-MyAccount-content > table.account-payment-methods-table {
	width: 100%;
	margin: 0;
	border: 1px solid var(--acct-line);
	border-radius: 12px;
	border-collapse: separate !important;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
	color: var(--acct-text);
	font-family: var(--acct-font);
	font-size: .95rem;
	line-height: 1.4;
}

body.woocommerce-account .woocommerce-MyAccount-content > table.account-payment-methods-table thead {
	border: 0;
	background: none;
}

body.woocommerce-account .woocommerce-MyAccount-content > table.account-payment-methods-table thead th {
	padding: 13px 16px;
	border: 0;
	border-bottom: 1px solid var(--acct-line);
	background: var(--acct-card);
	color: var(--acct-text);
	font-size: .82rem;
	font-weight: 700;
	line-height: normal;
	text-align: left;
	white-space: nowrap;
}

body.woocommerce-account .woocommerce-MyAccount-content > table.account-payment-methods-table tbody td {
	padding: 15px 16px;
	border: 0;
	border-top: 1px solid var(--acct-line);
	background: none;
	color: var(--acct-text);
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	vertical-align: middle;
}

body.woocommerce-account .woocommerce-MyAccount-content > table.account-payment-methods-table tbody tr:first-child td {
	border-top: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content > table.account-payment-methods-table tbody td.payment-method-method {
	font-weight: 600;
}

body.woocommerce-account .woocommerce-MyAccount-content > table.account-payment-methods-table tbody td.payment-method-actions {
	width: 1%;
	text-align: right;
	white-space: nowrap;
}

/* "Löschen" / "Als Standard festlegen": small outlined Konto buttons */
body.woocommerce-account .woocommerce-MyAccount-content > table.account-payment-methods-table .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 8px 14px;
	border: 1.5px solid var(--acct-blue);
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
	color: var(--acct-blue);
	font-family: var(--acct-font);
	font-size: .88rem;
	line-height: 1;
	text-decoration: none;
	transition: background .14s ease;
}

body.woocommerce-account .woocommerce-MyAccount-content > table.account-payment-methods-table .button:hover,
body.woocommerce-account .woocommerce-MyAccount-content > table.account-payment-methods-table .button:focus {
	border-color: var(--acct-blue);
	background: var(--acct-active);
	color: var(--acct-blue);
	text-decoration: none;
}

/* "Zahlungsart hinzufügen" under the table (also shown when nothing is saved yet) */
body.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content > a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 20px 0 0;
	padding: 8px 14px;
	border: 1.5px solid transparent;
	border-radius: 8px;
	background: var(--acct-blue);
	box-shadow: none;
	color: #fff;
	font-family: var(--acct-font);
	font-size: .88rem;
	line-height: 1;
	text-decoration: none;
	transition: background .14s ease;
}

body.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content > a.button:hover,
body.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content > a.button:focus {
	border-color: transparent;
	background: var(--acct-blue-hover);
	color: #fff;
	text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-content > table.account-payment-methods-table .button:focus-visible,
body.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content > a.button:focus-visible,
body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm .woocommerce-Button:focus-visible {
	outline: 2px solid var(--acct-blue);
	outline-offset: 2px;
}

/* Nothing saved yet: WooCommerce's "Keine gespeicherten Methoden gefunden." notice as the
   same card as the Gutscheine empty state (the add button follows below it). */
body.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content > .woocommerce-info {
	display: block !important;
	margin: 0;
	padding: 16px 20px !important;
	border: 1px solid var(--acct-line) !important;
	border-radius: 12px;
	background: var(--acct-card) !important;
	box-shadow: none;
	color: var(--acct-text);
	font-family: var(--acct-font);
	font-size: .98rem;
	line-height: 1.4;
}

body.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content > .woocommerce-info::before,
body.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content > .woocommerce-info::after {
	content: none !important;
}

@media (max-width: 921px) {
	body.woocommerce-account .woocommerce-MyAccount-content > table.account-payment-methods-table {
		display: block;
		border: 0;
		border-radius: 0;
		overflow: visible;
		background: none;
	}

	body.woocommerce-account .woocommerce-MyAccount-content > table.account-payment-methods-table thead {
		display: none;
	}

	body.woocommerce-account .woocommerce-MyAccount-content > table.account-payment-methods-table tbody {
		display: block;
		width: 100%;
	}

	body.woocommerce-account .woocommerce-MyAccount-content > table.account-payment-methods-table tbody tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 12px;
		padding: 16px 16px 14px;
		border: 1px solid var(--acct-line);
		border-radius: 12px;
		background: var(--acct-card);
	}

	body.woocommerce-account .woocommerce-MyAccount-content > table.account-payment-methods-table tbody td {
		display: block;
		flex: 0 0 100%;
		padding: 0;
		border: 0;
		text-align: left !important;
	}

	/* WooCommerce labels every cell ("Methode: "); only the expiry keeps one, muted. */
	body.woocommerce-account .woocommerce-MyAccount-content > table.account-payment-methods-table tbody td::before {
		content: none;
	}

	body.woocommerce-account .woocommerce-MyAccount-content > table.account-payment-methods-table tbody td.payment-method-method {
		font-size: 1rem;
		overflow-wrap: anywhere;
	}

	body.woocommerce-account .woocommerce-MyAccount-content > table.account-payment-methods-table tbody td.payment-method-expires {
		margin-top: 4px;
		color: var(--acct-muted);
		font-size: .9rem;
	}

	body.woocommerce-account .woocommerce-MyAccount-content > table.account-payment-methods-table tbody td.payment-method-expires::before {
		content: attr(data-title) ": ";
		float: none;
		font-weight: 400;
	}

	/* "tr" so this outranks the first-row border reset above (the first card needs its line too) */
	body.woocommerce-account .woocommerce-MyAccount-content > table.account-payment-methods-table tbody tr td.payment-method-actions {
		width: auto;
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px solid var(--acct-line);
		white-space: normal;
	}
}

/* ==========================================================================
   Kontodetails (edit-account) - condensed two-column form

   CSS only on WooCommerce's form-edit-account.php markup (WooCommerce Subscriptions adds the
   "Kontakt für die Rechnungsadresse aktualisieren …" checkbox row through the form hook).
   The form is a 2-column grid, max 760px: Vorname | Nachname, Anzeigename | E-Mail, the
   checkbox across both, then "Passwort ändern" with the current password on its own row and
   new | confirm next to each other. Anything a plugin adds spans both columns. One column
   up to 560px. The old rules stay: .show-password-input keeps its display:none (style.css),
   the focus border stays theirs; style.css's "width: auto !important" on account inputs
   (<=700px) is matched with !important.
   ========================================================================== */

/* align-items: start - Astra makes each .form-row a wrapping flex box, so a row stretched to
   its taller neighbour (Anzeigename + hint) would spread the extra height into the label line
   and push the E-Mail input down. */
body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 18px 20px;
	max-width: 760px;
	margin: 0;
	color: var(--acct-text);
	font-family: var(--acct-font);
}

body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm > * {
	grid-column: 1 / -1;
}

/* WooCommerce's float clearers would take grid cells. */
body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm > .clear {
	display: none;
}

body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm > .form-row-first,
body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm > .form-row-last,
body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm > .form-row:has(#account_display_name),
body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm > .form-row:has(#account_email) {
	grid-column: auto;
}

body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm .form-row {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm .form-row label {
	display: block;
	margin: 0 0 6px;
	color: var(--acct-text);
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.3;
}

body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm .form-row input.input-text {
	width: 100% !important;
	max-width: 100% !important;
	height: 44px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid #d6d6d6;
	border-radius: 8px;
	background: #fff;
	color: var(--acct-text);
	font-family: var(--acct-font);
	font-size: .95rem;
	line-height: 1.3;
}

body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm .form-row input.input-text:focus {
	border-color: var(--acct-blue);
	box-shadow: 0 0 0 3px rgba(40, 91, 184, .15);
	outline: 0;
}

/* "So wird dein Name im Kontoabschnitt und in Rezensionen angezeigt" */
body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm #account_display_name_description {
	display: block;
	margin-top: 6px;
	color: var(--acct-muted);
	font-size: .82rem;
	line-height: 1.4;
}

body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm #account_display_name_description em {
	font-style: normal;
}

/* Checkbox rows (WooCommerce Subscriptions' billing-contact option): normal weight text with
   the box in front, wrapped lines stay indented. */
body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm .form-row label.checkbox {
	position: relative;
	margin: 0;
	padding-left: 28px;
	font-size: .9rem;
	font-weight: 400;
	line-height: 1.45;
	cursor: pointer;
}

body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm .form-row label.checkbox .input-checkbox {
	position: absolute;
	top: 1px;
	left: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--acct-blue);
}

body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm .form-row .optional {
	color: var(--acct-muted);
}

/* "Passwort ändern" as a Konto section heading, its fields in the same 2-column grid */
/* align-items: end - the password rows have no hint text, so bottom alignment keeps "Neues
   Passwort" and "bestätigen" level when the longer label wraps (narrow desktop / tablet). */
body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm > fieldset {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: end;
	gap: 18px 20px;
	min-width: 0;
	margin: 10px 0 0;
	padding: 0;
	border: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm > fieldset > legend {
	width: 100%;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	color: var(--acct-text);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.2;
}

/* Current password alone in the first column; new + confirm share the next row. */
body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm > fieldset > .form-row:has(#password_current),
body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm > fieldset > .form-row:has(#password_1) {
	grid-column: 1;
}

body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm .password-input {
	display: block;
	width: 100%;
}

/* Submit row */
body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm > p:not(.form-row) {
	margin: 6px 0 0;
}

body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 10px 18px;
	border: 1.5px solid transparent;
	border-radius: 9px;
	background: var(--acct-blue);
	box-shadow: none;
	color: #fff;
	font-family: var(--acct-font);
	font-size: .95rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background .14s ease;
}

body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm .woocommerce-Button:hover,
body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm .woocommerce-Button:focus {
	border-color: transparent;
	background: var(--acct-blue-hover);
	color: #fff;
	text-decoration: none;
}

@media (max-width: 560px) {
	body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm,
	body.woocommerce-account .woocommerce-MyAccount-content > form.woocommerce-EditAccountForm > fieldset {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* style.css removes every focus outline (*:focus{outline:none}); keyboard users still need one. */
.woocommerce-account .acct-link:focus-visible,
.woocommerce-account .order-link:focus-visible,
.woocommerce-account .acct-btn:focus-visible,
.woocommerce-account .acct-trigger:focus-visible,
.woocommerce-account .acct-panel-close:focus-visible {
	outline: 2px solid var(--acct-blue);
	outline-offset: 2px;
}

.woocommerce-account .acct-btn--white:focus-visible {
	outline-color: #fff;
}

/* Mobile-only menu parts: hidden on desktop, switched on in the media query below. */
.woocommerce-account .acct-trigger,
.woocommerce-account .acct-panel-top,
.woocommerce-account .acct-backdrop {
	display: none;
}

/* ==========================================================================
   <=860px: labelled trigger bar + slide-in panel (mockup media query).
   Keep 860px in sync with the matchMedia query in js/account.js.
   ========================================================================== */

@media (max-width: 860px) {
	body.woocommerce-account .woocommerce:has(> .acct-aside) {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	body.woocommerce-account .woocommerce:has(> .acct-aside) > .woocommerce-MyAccount-content {
		grid-column: 1;
	}

	/* Trigger bar under the heading, names the current page. Astra and style.css style
	   every <button> (font, background, hover colour), so all of that is set here. It is a
	   grid row, so the grid gap does the spacing below it. */
	.woocommerce-account .acct-trigger {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		margin: -4px 0 0;
		padding: 13px 16px;
		background: var(--acct-card);
		border: 1px solid var(--acct-line);
		border-radius: 11px;
		box-shadow: none;
		font-family: var(--acct-font);
		font-size: 1rem;
		font-weight: 500;
		line-height: normal;
		letter-spacing: normal;
		text-align: left;
		text-transform: none;
		color: var(--acct-muted);
		cursor: pointer;
	}

	.woocommerce-account .acct-trigger:hover,
	.woocommerce-account .acct-trigger:focus {
		background: var(--acct-card);
		border-color: var(--acct-line);
		color: var(--acct-muted);
		box-shadow: none;
	}

	.woocommerce-account .acct-trigger-burger {
		position: relative;
		flex: 0 0 auto;
		display: inline-block;
		width: 20px;
		height: 14px;
		color: var(--acct-text);
	}

	.woocommerce-account .acct-trigger-burger i {
		position: absolute;
		left: 0;
		right: 0;
		height: 2.2px;
		border-radius: 2px;
		background: currentColor;
	}

	.woocommerce-account .acct-trigger-burger i:nth-child(1) {
		top: 0;
	}

	.woocommerce-account .acct-trigger-burger i:nth-child(2) {
		top: 50%;
		transform: translateY(-50%);
	}

	.woocommerce-account .acct-trigger-burger i:nth-child(3) {
		bottom: 0;
	}

	.woocommerce-account .acct-trigger-label {
		flex: 1 1 auto;
	}

	.woocommerce-account .acct-trigger-label strong {
		font-weight: 700;
		color: var(--acct-text);
	}

	.woocommerce-account .acct-trigger svg {
		flex: 0 0 auto;
		width: 18px;
		height: 18px;
		stroke: var(--acct-muted);
		fill: none;
		stroke-width: 2.2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	/* The sidebar becomes an off-canvas panel. While closed it is visibility:hidden so its
	   links stay out of the tab order (the delay lets the slide-out finish first). z-index:
	   above the footer (100000) and Astra's scroll-top button (1e7), below the FunnelKit
	   side cart. */
	.woocommerce-account .acct-aside {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 100000001;
		width: min(330px, 86vw);
		padding: 6px 14px 22px;
		background: #fff;
		box-shadow: 0 24px 60px rgba(3, 41, 54, .22);
		overflow-y: auto;
		overscroll-behavior: contain; /* scrolling the panel must not scroll the page behind it */
		-webkit-overflow-scrolling: touch;
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform .3s ease, visibility 0s linear .3s;
	}

	body.woocommerce-account.acct-menu-open .acct-aside {
		transform: translateX(0);
		visibility: visible;
		transition: transform .3s ease;
	}

	.woocommerce-account .acct-panel-top {
		position: sticky;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 10px 6px 8px;
		background: #fff;
	}

	.woocommerce-account .acct-panel-title {
		font-size: 1.1rem;
		font-weight: 700;
		color: var(--acct-text);
	}

	.woocommerce-account .acct-panel-close,
	.woocommerce-account .acct-panel-close:focus {
		margin: 0;
		padding: 6px;
		border: 0;
		border-radius: 8px;
		box-shadow: none;
		background: none;
		color: var(--acct-text);
		line-height: 0;
		cursor: pointer;
	}

	.woocommerce-account .acct-panel-close:hover {
		background: var(--acct-active);
		color: var(--acct-text);
	}

	.woocommerce-account .acct-panel-close svg {
		display: block;
		width: 24px;
		height: 24px;
		stroke: currentColor;
		fill: none;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	/* Slightly larger tap targets inside the panel */
	.woocommerce-account .acct-link {
		padding: 12px;
		font-size: 1rem;
	}

	/* Dim backdrop + scroll lock, same feel as the header drawer */
	.woocommerce-account .acct-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 100000000;
		background: rgba(3, 41, 54, .45);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .25s ease, visibility 0s linear .25s;
	}

	body.woocommerce-account.acct-menu-open .acct-backdrop {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity .25s ease;
	}

	/* Lock BOTH html and body, as the header drawer does (css/header.css): style.css sets
	   overflow-x:hidden on html and body, which makes <html> the scroll container, so
	   locking only <body> would let the page scroll behind the open panel. */
	body.woocommerce-account.acct-menu-open {
		overflow: hidden;
	}

	html:has(body.woocommerce-account.acct-menu-open) {
		overflow: hidden;
	}
}

@media (max-width: 560px) {
	body.woocommerce-account:has(.acct-aside) #main > .ast-article-single {
		padding: 24px 18px 28px;
		border-radius: 12px;
	}

	.woocommerce-account .dash-support {
		flex-direction: column;
		align-items: flex-start;
	}

	.woocommerce-account .dash-support .acct-btn {
		width: 100%;
	}

	.woocommerce-account .dash-actions .acct-btn {
		flex: 1 1 auto;
	}
}

/* ==========================================================================
   Tabs that aren't redesigned yet (every page with the menu except the Übersicht,
   Bestellungen, the Abo list and the Kaffee-Abo page)

   Their old tables and forms were built for the previous mobile width: full width
   minus 20px on each side. The mockup shell's 24px gutter + card padding would take
   another ~45px on phones and break their labels mid-word, so until a tab gets its own
   redesign it keeps that width: 8px gutter + 12px card padding = the old 20px. When a tab
   is redesigned, add its marker class to the :has() list below. Zahlungsmethoden is excluded by
   its body class; Gutscheine only while it shows its empty-state card (the voucher list isn't
   redesigned yet).
   ========================================================================== */

@media (max-width: 860px) {
	body.woocommerce-account:not(.woocommerce-payment-methods):not(.woocommerce-vouchers:has(.woocommerce-MyAccount-content > .woocommerce-info)):has(.acct-aside):not(:has(.acct-dash, .acct-orders, .acct-subscriptions, .subscription_details, .woocommerce-order-details, .woocommerce-Address, .woocommerce-EditAccountForm)) #content > .ast-container {
		padding-left: 8px;
		padding-right: 8px;
	}

	body.woocommerce-account:not(.woocommerce-payment-methods):not(.woocommerce-vouchers:has(.woocommerce-MyAccount-content > .woocommerce-info)):has(.acct-aside):not(:has(.acct-dash, .acct-orders, .acct-subscriptions, .subscription_details, .woocommerce-order-details, .woocommerce-Address, .woocommerce-EditAccountForm)) #main > .ast-article-single {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* js/account.js sets this for one frame when the viewport crosses 860px, so the sidebar
   doesn't visibly slide across the page while it turns into the off-canvas panel (e.g.
   when a tablet is rotated). Same specificity as the open-state rules, placed after them. */
body.woocommerce-account.acct-no-anim .acct-aside,
body.woocommerce-account.acct-no-anim .acct-backdrop {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	body.woocommerce-account .acct-aside,
	body.woocommerce-account .acct-backdrop,
	body.woocommerce-account.acct-menu-open .acct-aside,
	body.woocommerce-account.acct-menu-open .acct-backdrop {
		transition: none;
	}
}

/* ==========================================================================
   Anmelden / Registrieren (logged out), mockup HTML Templates/konto/konto-anmelden.html

   WooCommerce's form-login.php markup, re-skinned: Astra's "Mein Konto" title becomes the
   full-width beige band (same technique as the category headers in style.css), the login
   and register columns become the 480px card, and cn_account_register_teaser()
   (functions.php) adds the "Noch kein Konto?" box under it. The login/register switch stays
   Astra's + js/active.js's (they toggle the columns' inline display, so no display is set
   on the columns here); js/account.js only forwards the teaser button to Astra's link.
   Scoped to pages with #customer_login, so lost-password keeps its current look. Sizes are
   px because Astra shrinks the root font to 91.2% at <=921px.
   ========================================================================== */

body.woocommerce-account:has(#customer_login),
body.woocommerce-account:has(#customer_login) #content {
	background-color: #f9f9f9;
}

body.woocommerce-account:has(#customer_login) #content > .ast-container {
	padding-left: 24px;
	padding-right: 24px;
}

body.woocommerce-account:has(#customer_login) #primary {
	margin: 0;
	padding: 0;
}

body.woocommerce-account:has(#customer_login) #main > .ast-article-single {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* Mockup .vz-hero */
body.woocommerce-account:has(#customer_login) #main > .ast-article-single > .entry-header {
	margin: 0 calc(50% - 50vw);
	padding: 64px 24px 56px;
	background: #efecea;
	text-align: center;
}

body.woocommerce-account:has(#customer_login) #main > .ast-article-single > .entry-header > .entry-title {
	margin: 0;
	color: #032936;
	font-family: var(--acct-font);
	font-size: clamp(32px, 3.4vw, 48px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.015em;
}

/* Mockup .ac-main / .ac-wrap. Astra's logged-out box (540px, border, 40px padding) is undone. */
body.woocommerce-account:has(#customer_login) #main > .ast-article-single > .entry-content {
	margin: 0;
	padding: 48px 0 88px;
}

body.woocommerce-account:has(#customer_login) .entry-content > .woocommerce {
	max-width: 480px;
	margin: 0 auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: #032936;
	font-family: var(--acct-font);
}

/* Mockup .ac-card - login and register columns (only one shows at a time) */
body.woocommerce-account:has(#customer_login) #customer_login > .u-column1,
body.woocommerce-account:has(#customer_login) #customer_login > .u-column2 {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 34px 34px 30px;
	border: 1px solid #e6e1dc;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(3, 41, 54, .06);
}

body.woocommerce-account:has(#customer_login) #customer_login h2 {
	margin: 0 0 24px;
	color: #032936;
	font-family: var(--acct-font);
	font-size: 25.6px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-align: left;
}

body.woocommerce-account:has(#customer_login) #customer_login form {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Mockup .ac-field */
body.woocommerce-account:has(#customer_login) #customer_login .form-row {
	float: none;
	width: auto;
	margin: 0 0 18px;
	padding: 0;
}

body.woocommerce-account:has(#customer_login) #customer_login .woocommerce-form-row label {
	display: block;
	margin: 0 0 7px;
	color: #032936;
	font-size: 15.2px;
	font-weight: 600;
	line-height: normal;
}

/* The mockup shows no required asterisk (both fields are required anyway; the
   screen-reader text "Erforderlich" stays). */
body.woocommerce-account:has(#customer_login) #customer_login label .required {
	display: none;
}

body.woocommerce-account:has(#customer_login) #customer_login .form-row input.input-text {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 13px 14px;
	border: 1.5px solid #d9d3cc;
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
	color: #032936;
	font-family: var(--acct-font);
	font-size: 16px;
	line-height: normal;
	transition: border-color .15s ease, box-shadow .15s ease;
}

body.woocommerce-account:has(#customer_login) #customer_login .form-row input.input-text:hover {
	border-color: #bfb7ae;
}

body.woocommerce-account:has(#customer_login) #customer_login .form-row input.input-text:focus {
	border-color: #285bb8;
	box-shadow: 0 0 0 3px rgba(40, 91, 184, .18);
	outline: 0;
}

/* Show/hide password (mockup .ac-eye). WooCommerce's script wraps the field in
   span.password-input and adds button.show-password-input (class display-password while the
   password is visible). style.css hides that button sitewide; the mockup has it, so it is
   shown in the login/register card only, with the mockup's eye icons. */
body.woocommerce-account:has(#customer_login) #customer_login .password-input {
	position: relative;
	display: block;
	width: 100%;
}

body.woocommerce-account:has(#customer_login) #customer_login .password-input input.input-text {
	padding-right: 52px;
}

body.woocommerce-account:has(#customer_login) #customer_login .show-password-input {
	position: absolute;
	top: 50%;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	box-shadow: none;
	color: #5c6970;
	cursor: pointer;
	transform: translateY(-50%);
}

body.woocommerce-account:has(#customer_login) #customer_login .show-password-input:hover {
	background: #f4f1ee;
	color: #032936;
}

body.woocommerce-account:has(#customer_login) #customer_login .show-password-input:focus-visible {
	outline: 3px solid #285bb8;
	outline-offset: 1px;
}

body.woocommerce-account:has(#customer_login) #customer_login .show-password-input::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.woocommerce-account:has(#customer_login) #customer_login .show-password-input.display-password::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 4.24A9.1 9.1 0 0 1 12 4c6.5 0 10 7 10 7a18 18 0 0 1-2.16 3.19'/%3E%3Cpath d='M6.61 6.61A18 18 0 0 0 2 12s3.5 7 10 7a9.7 9.7 0 0 0 5.39-1.61'/%3E%3Cpath d='M14.12 14.12a3 3 0 1 1-4.24-4.24'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 4.24A9.1 9.1 0 0 1 12 4c6.5 0 10 7 10 7a18 18 0 0 1-2.16 3.19'/%3E%3Cpath d='M6.61 6.61A18 18 0 0 0 2 12s3.5 7 10 7a9.7 9.7 0 0 0 5.39-1.61'/%3E%3Cpath d='M14.12 14.12a3 3 0 1 1-4.24-4.24'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
}

/* Older WooCommerce versions draw the eye as a font icon in ::after. */
body.woocommerce-account:has(#customer_login) #customer_login .show-password-input::after {
	content: none;
}

/* Cloudflare Turnstile widget (plugin, printed after the password field): mockup .ac-captcha */
body.woocommerce-account:has(#customer_login) #customer_login .cf-turnstile {
	min-height: 65px;
	margin: 4px 0 18px;
}

/* The plugin prints <br class="cf-turnstile-br"> after the widget. In the flex form below a bare
   <br> becomes an unstylable zero-width item on the checkbox line, and space-between then pushed
   "Angemeldet bleiben" away from the left edge (seen on live 2026-10-01). The margins above do
   the spacing. */
body.woocommerce-account:has(#customer_login) #customer_login form.login > br {
	display: none;
}

/* Login form: "Angemeldet bleiben" | "Passwort vergessen?" on one line (wrapping on narrow
   phones, mockup .ac-row), then the full-width button. WooCommerce prints the checkbox and
   the button in one <p> and the link after it, so that <p> is dissolved (display: contents)
   and the pieces are ordered in the form's flex layout. */
body.woocommerce-account:has(#customer_login) #customer_login form.login {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	column-gap: 12px;
}

body.woocommerce-account:has(#customer_login) #customer_login form.login > * {
	flex: 0 0 100%;
	min-width: 0;
}

body.woocommerce-account:has(#customer_login) #customer_login form.login > .form-row:has(> .woocommerce-form-login__rememberme) {
	display: contents;
}

/* WooCommerce's .form-row clearfix pseudo-elements survive display: contents and would become
   empty flex items that space-between spreads across the checkbox row. */
body.woocommerce-account:has(#customer_login) #customer_login form.login > .form-row:has(> .woocommerce-form-login__rememberme)::before,
body.woocommerce-account:has(#customer_login) #customer_login form.login > .form-row:has(> .woocommerce-form-login__rememberme)::after {
	content: none;
}

/* margin-bottom 12px + the link's 22px = the mockup's 12px row gap when the two wrap */
/* width: auto - an older label rule makes it 100% wide, which pushed the link to its own line */
body.woocommerce-account:has(#customer_login) #customer_login .woocommerce-form-login__rememberme {
	order: 1;
	display: inline-flex;
	flex: 0 1 auto;
	align-items: center;
	gap: 9px;
	width: auto;
	margin: 0 0 12px;
	color: #032936;
	font-size: 15.2px;
	font-weight: 400;
	line-height: normal;
	cursor: pointer;
}

body.woocommerce-account:has(#customer_login) #customer_login .woocommerce-form-login__rememberme input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	cursor: pointer;
}

/* line-height normal: same height as the checkbox label, so the two line up at the top */
body.woocommerce-account:has(#customer_login) #customer_login form.login > .lost_password {
	order: 2;
	flex: 0 1 auto;
	margin: 0 0 22px;
	line-height: normal;
	text-align: left;
}

body.woocommerce-account:has(#customer_login) #customer_login .lost_password a,
body.woocommerce-account:has(#customer_login) #customer_login .ast-woo-form-actions a {
	color: #285bb8;
	font-size: 15.2px;
	font-weight: 600;
	text-decoration: none;
}

body.woocommerce-account:has(#customer_login) #customer_login .lost_password a:hover,
body.woocommerce-account:has(#customer_login) #customer_login .ast-woo-form-actions a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.woocommerce-account:has(#customer_login) #customer_login .lost_password a:focus-visible,
body.woocommerce-account:has(#customer_login) #customer_login .ast-woo-form-actions a:focus-visible {
	outline: 3px solid #285bb8;
	outline-offset: 3px;
}

/* Mockup .ac-btn (+ arrow). font-weight !important: the Customizer CSS sets every .button
   to normal weight with !important. */
body.woocommerce-account:has(#customer_login) #customer_login .woocommerce-form-login__submit,
body.woocommerce-account:has(#customer_login) #customer_login .woocommerce-form-register__submit {
	order: 3;
	display: flex;
	flex: 0 0 100%;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	margin: 0;
	padding: 15px 20px;
	border: 0;
	border-radius: 10px;
	background: #285bb8;
	box-shadow: none;
	color: #fff;
	font-family: var(--acct-font);
	font-size: 16.3px;
	font-weight: 600 !important;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: background .15s ease;
}

body.woocommerce-account:has(#customer_login) #customer_login .woocommerce-form-login__submit:hover,
body.woocommerce-account:has(#customer_login) #customer_login .woocommerce-form-login__submit:focus,
body.woocommerce-account:has(#customer_login) #customer_login .woocommerce-form-register__submit:hover,
body.woocommerce-account:has(#customer_login) #customer_login .woocommerce-form-register__submit:focus {
	background: #284985;
	color: #fff;
}

body.woocommerce-account:has(#customer_login) #customer_login .woocommerce-form-login__submit:focus-visible,
body.woocommerce-account:has(#customer_login) #customer_login .woocommerce-form-register__submit:focus-visible {
	outline: 3px solid #285bb8;
	outline-offset: 3px;
}

body.woocommerce-account:has(#customer_login) #customer_login .woocommerce-form-login__submit::after,
body.woocommerce-account:has(#customer_login) #customer_login .woocommerce-form-register__submit::after {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The login card's "Du hast noch kein Konto? Hier registrieren" is replaced by the teaser
   below the card. The link stays in the DOM: the teaser button clicks it (js/account.js). */
body.woocommerce-account:has(#customer_login) #customer_login form.login > .ast-woo-form-actions {
	display: none;
}

/* Register card: Germanized's privacy line, the button, "Du hast bereits ein Konto?".
   Germanized floats its placeholder, which squeezed the button row next to it to 0px. */
body.woocommerce-account:has(#customer_login) #customer_login .wc-gzd-checkbox-placeholder {
	float: none;
	width: auto;
}

body.woocommerce-account:has(#customer_login) #customer_login .wc-gzd-checkbox-placeholder .form-row {
	margin: 0 0 22px;
}

body.woocommerce-account:has(#customer_login) #customer_login .wc-gzd-checkbox-placeholder label {
	display: block;
	margin: 0;
	color: #5c6970;
	font-size: 14.7px;
	font-weight: 400;
	line-height: 1.5;
}

body.woocommerce-account:has(#customer_login) #customer_login .wc-gzd-checkbox-placeholder a {
	color: #285bb8;
	font-weight: 600;
	text-decoration: none;
}

body.woocommerce-account:has(#customer_login) #customer_login .wc-gzd-checkbox-placeholder a:hover {
	text-decoration: underline;
}

body.woocommerce-account:has(#customer_login) #customer_login form.register > .form-row:has(> .woocommerce-form-register__submit) {
	margin: 0;
}

body.woocommerce-account:has(#customer_login) #customer_login form.register > .ast-woo-form-actions {
	margin: 18px 0 0;
	color: #5c6970;
	font-size: 14.7px;
	line-height: 1.5;
	text-align: center;
}

/* Mockup .ac-register / .ac-btn-outline */
body.woocommerce-account:has(#customer_login) .acct-register-teaser {
	margin-top: 16px;
	padding: 26px 34px;
	border-radius: 14px;
	background: #efecea;
	color: #032936;
}

body.woocommerce-account:has(#customer_login) .acct-register-teaser h3 {
	margin: 0 0 4px;
	color: #032936;
	font-family: var(--acct-font);
	font-size: 17.3px;
	font-weight: 700;
	line-height: normal;
}

body.woocommerce-account:has(#customer_login) .acct-register-teaser p {
	margin: 0 0 16px;
	color: #5c6970;
	font-size: 14.7px;
	line-height: 1.5;
}

body.woocommerce-account:has(#customer_login) .acct-register-teaser__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 13px 18px;
	border: 1.5px solid #032936;
	border-radius: 10px;
	background: transparent;
	color: #032936;
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}

body.woocommerce-account:has(#customer_login) .acct-register-teaser__btn:hover,
body.woocommerce-account:has(#customer_login) .acct-register-teaser__btn:focus {
	background: #032936;
	color: #fff;
	text-decoration: none;
}

body.woocommerce-account:has(#customer_login) .acct-register-teaser__btn:focus-visible {
	outline: 3px solid #285bb8;
	outline-offset: 3px;
}

@media (max-width: 640px) {
	body.woocommerce-account:has(#customer_login) #main > .ast-article-single > .entry-content {
		padding: 28px 0 60px;
	}

	body.woocommerce-account:has(#customer_login) #customer_login > .u-column1,
	body.woocommerce-account:has(#customer_login) #customer_login > .u-column2 {
		padding: 26px 20px 22px;
	}

	body.woocommerce-account:has(#customer_login) .acct-register-teaser {
		padding: 22px 20px;
	}
}