/**
 * Vzhľad zákazníckeho účtu (Môj účet).
 *
 * Všetko je pod triedou .tlpb-account na <body>. Farby, rozostupy, zaoblenia
 * a písmo berieme z dizajnového systému (assets/css/tokens.css), hex sa tu
 * nepíše. Štýly WooCommerce (najmä responzívne tabuľky) sú dosť razantné,
 * preto sú selektory dlhšie, než by sa zdalo.
 *
 * @package TulipoBox\MyAccount
 */

.tlpb-account {
	--tlpb-acc-control-h: 44px;  /* dotykový cieľ */
	--tlpb-acc-field-h: 52px;    /* rovnako ako polia v pokladni */

	/* Pevné stĺpce riadku objednávky – každý riadok je vlastná mriežka, bez
	   pevných šírok by dátum a stav v každom riadku začínali inde. */
	--tlpb-acc-col-date: 10rem;
	--tlpb-acc-col-status: 8rem;
	--tlpb-acc-col-total: 6rem;
}

/* --- Odstup od hlavičky a päty ------------------------------------------ */

/* Téma (Hello Elementor) nedáva obsahu stránky žiadny odstup – nadpis by
   sedel tesne pod hlavičkou a posledná karta tesne na päte. */
body.woocommerce-account main.site-main {
	padding-block: var( --tlpb-space-5 );
}

body.woocommerce-account main.site-main > .page-header .entry-title {
	margin-top: 0;
}

/* --- Rozloženie: menu hore, obsah pod ním ------------------------------- */

body.tlpb-account .woocommerce-MyAccount-navigation,
body.tlpb-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

/* --- Menu ako tlačidlá -------------------------------------------------- */

/*
 * Zoznam má okolo seba malú výplň so záporným okrajom – bez nej by obrys
 * zaostrenia na okraji tlačidla odrezalo, keby zoznam pretekal.
 */
body.tlpb-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var( --tlpb-space-2 );
	margin: calc( -1 * var( --tlpb-space-1 ) ) calc( -1 * var( --tlpb-space-1 ) ) var( --tlpb-space-5 );
	padding: var( --tlpb-space-1 );
	list-style: none;
}

body.tlpb-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.tlpb-account .woocommerce-MyAccount-navigation li a {
	display: inline-flex;
	align-items: center;
	min-height: var( --tlpb-acc-control-h );
	padding: 0 var( --tlpb-space-5 );
	border: 1px solid var( --tlpb-field-line );
	border-radius: var( --tlpb-radius-pill );
	background: var( --tlpb-panel );
	color: var( --tlpb-ink );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-sm );
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

body.tlpb-account .woocommerce-MyAccount-navigation li a:hover {
	border-color: var( --tlpb-plum );
}

body.tlpb-account .woocommerce-MyAccount-navigation li.is-active a {
	border-color: var( --tlpb-plum );
	background: var( --tlpb-plum );
	color: var( --tlpb-on-accent );
}

body.tlpb-account .woocommerce-MyAccount-navigation li a:focus-visible {
	outline: 2px solid var( --tlpb-plum );
	outline-offset: 2px;
}

/* --- Záložky profilu ---------------------------------------------------- */

/* Podčiarknuté záložky, aby sa nepliesli s tlačidlami menu nad nimi. */
.tlpb-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var( --tlpb-space-1 ) var( --tlpb-space-5 );
	margin: 0 0 var( --tlpb-space-5 );
	padding: 0;
	border-bottom: 1px solid var( --tlpb-line );
	list-style: none;
}

.tlpb-tabs__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.tlpb-account .tlpb-tabs__link {
	display: inline-flex;
	align-items: center;
	min-height: var( --tlpb-acc-control-h );
	margin-bottom: -1px; /* podčiarknutie prekryje čiaru zoznamu */
	border-bottom: 3px solid transparent;
	color: var( --tlpb-ink-muted );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-body );
	font-weight: 700;
	text-decoration: none;
}

body.tlpb-account .tlpb-tabs__link:hover {
	color: var( --tlpb-ink );
}

body.tlpb-account .tlpb-tabs__link.is-active {
	border-bottom-color: var( --tlpb-plum );
	color: var( --tlpb-plum );
}

body.tlpb-account .tlpb-tabs__link:focus-visible {
	outline: 2px solid var( --tlpb-plum );
	outline-offset: 2px;
}

/* --- Nadpisy a text v obsahu ------------------------------------------- */

body.tlpb-account .woocommerce-MyAccount-content h2,
body.tlpb-account .woocommerce-MyAccount-content h3 {
	margin: var( --tlpb-space-6 ) 0 var( --tlpb-space-3 );
	color: var( --tlpb-ink );
	font-family: var( --tlpb-font-heading );
	font-weight: 700;
	line-height: 1.3;
}

body.tlpb-account .woocommerce-MyAccount-content h2 {
	font-size: var( --tlpb-text-h2 );
}

body.tlpb-account .woocommerce-MyAccount-content h3 {
	font-size: var( --tlpb-text-h3 );
}

body.tlpb-account .woocommerce-MyAccount-content > :first-child {
	margin-top: 0;
}

/* --- Tlačidlá ----------------------------------------------------------- */

body.tlpb-account .woocommerce-MyAccount-content a.button,
body.tlpb-account .woocommerce-MyAccount-content button.button,
body.tlpb-account .woocommerce-MyAccount-content .woocommerce-Button,
body.tlpb-account .woocommerce-MyAccount-content input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var( --tlpb-acc-control-h );
	margin: 0;
	padding: 0 var( --tlpb-space-5 );
	border: 1px solid var( --tlpb-plum );
	border-radius: var( --tlpb-radius-pill );
	background: var( --tlpb-plum );
	color: var( --tlpb-on-accent );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-sm );
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: filter 0.15s ease;
}

body.tlpb-account .woocommerce-MyAccount-content a.button:hover,
body.tlpb-account .woocommerce-MyAccount-content button.button:hover,
body.tlpb-account .woocommerce-MyAccount-content .woocommerce-Button:hover,
body.tlpb-account .woocommerce-MyAccount-content input[type="submit"]:hover {
	filter: brightness( 1.1 );
	color: var( --tlpb-on-accent );
}

/* Zrušiť a zmazať: obrysové tlačidlo v chybovej farbe, nie plná výzva. */
body.tlpb-account .woocommerce-MyAccount-content a.button.cancel,
body.tlpb-account .woocommerce-MyAccount-content a.button.delete {
	border-color: var( --tlpb-danger );
	background: var( --tlpb-panel );
	color: var( --tlpb-danger );
}

body.tlpb-account .woocommerce-MyAccount-content a.button.cancel:hover,
body.tlpb-account .woocommerce-MyAccount-content a.button.delete:hover {
	background: var( --tlpb-danger-soft );
	color: var( --tlpb-danger );
	filter: none;
}

body.tlpb-account .woocommerce-MyAccount-content a.button:focus-visible,
body.tlpb-account .woocommerce-MyAccount-content button.button:focus-visible,
body.tlpb-account .woocommerce-MyAccount-content .woocommerce-Button:focus-visible,
body.tlpb-account .woocommerce-MyAccount-content input[type="submit"]:focus-visible {
	outline: 2px solid var( --tlpb-plum );
	outline-offset: 2px;
}

/* --- Štítky stavu ------------------------------------------------------- */

/*
 * Štítok SUBS má v svojich štýloch pevné modré a zelené odtiene, ktoré so
 * značkou nemajú nič spoločné. Nahradíme ich; text je vždy atrament (6,6:1
 * a viac), nikdy stlmený.
 */
body.tlpb-account span.subscrpt-legacy-status,
.tlpb-orders__status {
	display: inline-flex;
	align-items: center;
	padding: var( --tlpb-space-1 ) var( --tlpb-space-3 );
	border-radius: var( --tlpb-radius-pill );
	background: var( --tlpb-line );
	color: var( --tlpb-ink );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-sm );
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
	white-space: nowrap;
}

body.tlpb-account span.subscrpt-legacy-status--active,
.tlpb-orders__status--completed {
	background: var( --tlpb-sage-soft );
	color: var( --tlpb-ink );
}

body.tlpb-account span.subscrpt-legacy-status--pending,
body.tlpb-account span.subscrpt-legacy-status--on-hold,
body.tlpb-account span.subscrpt-legacy-status--pe_cancelled,
.tlpb-orders__status--processing,
.tlpb-orders__status--on-hold,
.tlpb-orders__status--pending {
	background: var( --tlpb-apricot-soft );
	color: var( --tlpb-ink );
}

body.tlpb-account span.subscrpt-legacy-status--expired,
.tlpb-orders__status--failed {
	background: var( --tlpb-danger-soft );
	color: var( --tlpb-danger );
}

/* --- Karty: predplatné, objednávky, platobné metódy --------------------- */

/*
 * Riadky tabuliek SUBS a WooCommerce sa na každej šírke zmenia na karty.
 * WooCommerce pod 768 px robí z buniek riadky s popiskom vľavo a hodnotou
 * vpravo; tu ich radíme do mriežky karty, takže vyzerajú rovnako na mobile
 * aj na počítači.
 */
body.tlpb-account .woocommerce-MyAccount-content table.my_account_subscrpt,
body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders,
body.tlpb-account .woocommerce-MyAccount-content table.account-payment-methods-table {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	background: none;
}

body.tlpb-account .woocommerce-MyAccount-content table.my_account_subscrpt tbody,
body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody,
body.tlpb-account .woocommerce-MyAccount-content table.account-payment-methods-table tbody {
	display: flex;
	flex-direction: column;
	gap: var( --tlpb-space-3 );
}

/* Hlavička sa nezobrazuje, každá hodnota si nesie popisok sama. */
body.tlpb-account .woocommerce-MyAccount-content table.my_account_subscrpt thead,
body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders thead,
body.tlpb-account .woocommerce-MyAccount-content table.account-payment-methods-table thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
}

body.tlpb-account .woocommerce-MyAccount-content table.my_account_subscrpt tbody tr,
body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr,
body.tlpb-account .woocommerce-MyAccount-content table.account-payment-methods-table tbody tr {
	display: grid;
	align-items: center;
	gap: var( --tlpb-space-2 ) var( --tlpb-space-4 );
	margin: 0;
	padding: var( --tlpb-space-4 ) var( --tlpb-space-5 );
	border: 1px solid var( --tlpb-line );
	border-radius: var( --tlpb-radius-md );
	background: var( --tlpb-panel );
	box-shadow: var( --tlpb-shadow-card );
}

body.tlpb-account .woocommerce-MyAccount-content table.my_account_subscrpt tbody tr td,
body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr td,
body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr th,
body.tlpb-account .woocommerce-MyAccount-content table.account-payment-methods-table tbody tr td {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none !important; /* WooCommerce pruhuje každý druhý riadok */
	color: var( --tlpb-ink );
	font-size: var( --tlpb-text-body );
	text-align: left !important;
}

/* Popisok pred hodnotou (WooCommerce ho pod 768 px dáva vľavo s dvojbodkou). */
body.tlpb-account .woocommerce-MyAccount-content table.my_account_subscrpt tbody tr td::before,
body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr td::before,
body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr th::before,
body.tlpb-account .woocommerce-MyAccount-content table.account-payment-methods-table tbody tr td::before {
	content: attr( data-title );
	display: block;
	float: none;
	margin: 0 0 var( --tlpb-space-1 );
	color: var( --tlpb-ink-muted );
	font-family: var( --tlpb-font-body );
	font-size: var( --tlpb-text-sm );
	font-weight: 400;
}

/* Tam, kde popisok nedáva zmysel (číslo, stav, tlačidlo), sa nezobrazí. */
body.tlpb-account .woocommerce-MyAccount-content table.my_account_subscrpt tbody tr td:nth-child( 1 )::before,
body.tlpb-account .woocommerce-MyAccount-content table.my_account_subscrpt tbody tr td:nth-child( 2 )::before,
body.tlpb-account .woocommerce-MyAccount-content table.my_account_subscrpt tbody tr td:nth-child( 3 )::before,
body.tlpb-account .woocommerce-MyAccount-content table.my_account_subscrpt tbody tr td:nth-child( 6 )::before,
body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr th::before,
body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr td.woocommerce-orders-table__cell-order-status::before,
body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr td.woocommerce-orders-table__cell-order-actions::before,
body.tlpb-account .woocommerce-MyAccount-content table.account-payment-methods-table tbody tr td.payment-method-method::before,
body.tlpb-account .woocommerce-MyAccount-content table.account-payment-methods-table tbody tr td.payment-method-actions::before {
	display: none;
}

/* Predplatné: číslo a stav navrchu, produkt, potom dátum a suma, tlačidlo. */
body.tlpb-account .woocommerce-MyAccount-content table.my_account_subscrpt tbody tr {
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"id      status"
		"product product"
		"next    total"
		"action  action";
}

body.tlpb-account .woocommerce-MyAccount-content table.my_account_subscrpt tbody tr td:nth-child( 1 ) {
	grid-area: id;
	color: var( --tlpb-ink-muted );
	font-size: var( --tlpb-text-sm );
}

body.tlpb-account .woocommerce-MyAccount-content table.my_account_subscrpt tbody tr td:nth-child( 2 ) {
	grid-area: status;
	justify-self: end;
}

body.tlpb-account .woocommerce-MyAccount-content table.my_account_subscrpt tbody tr td:nth-child( 3 ) {
	grid-area: product;
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-lg );
	font-weight: 700;
}

body.tlpb-account .woocommerce-MyAccount-content table.my_account_subscrpt tbody tr td:nth-child( 4 ) {
	grid-area: next;
}

body.tlpb-account .woocommerce-MyAccount-content table.my_account_subscrpt tbody tr td:nth-child( 5 ) {
	grid-area: total;
	text-align: right !important;
}

body.tlpb-account .woocommerce-MyAccount-content table.my_account_subscrpt tbody tr td:nth-child( 6 ) {
	grid-area: action;
	margin-top: var( --tlpb-space-2 );
}

/*
 * Objednávky (stránka Všetky objednávky): jeden riadok na počítači.
 *
 * Tabuľka predplatných od SUBS nesie aj triedu my_account_orders, preto ju
 * tu výslovne vylučujeme – inak by dostala mriežku objednávky.
 */
body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders:not( .my_account_subscrpt ) tbody tr {
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"number  status"
		"date    total"
		"actions actions";
}

body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr .woocommerce-orders-table__cell-order-number {
	grid-area: number;
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-lg );
	font-weight: 700;
}

body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr .woocommerce-orders-table__cell-order-number a {
	color: var( --tlpb-ink );
	text-decoration: none;
}

body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr .woocommerce-orders-table__cell-order-date {
	grid-area: date;
}

/* Stav je v tabuľke holý text – z bunky spravíme rovnaký štítok ako inde. */
body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr td.woocommerce-orders-table__cell-order-status {
	grid-area: status;
	justify-self: end;
	padding: var( --tlpb-space-1 ) var( --tlpb-space-3 );
	border-radius: var( --tlpb-radius-pill );
	background: var( --tlpb-line ) !important;
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-sm );
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr.woocommerce-orders-table__row--status-completed td.woocommerce-orders-table__cell-order-status {
	background: var( --tlpb-sage-soft ) !important;
}

body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr.woocommerce-orders-table__row--status-processing td.woocommerce-orders-table__cell-order-status,
body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr.woocommerce-orders-table__row--status-on-hold td.woocommerce-orders-table__cell-order-status,
body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr.woocommerce-orders-table__row--status-pending td.woocommerce-orders-table__cell-order-status {
	background: var( --tlpb-apricot-soft ) !important;
}

body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr.woocommerce-orders-table__row--status-failed td.woocommerce-orders-table__cell-order-status {
	background: var( --tlpb-danger-soft ) !important;
	color: var( --tlpb-danger );
}

body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr .woocommerce-orders-table__cell-order-total {
	grid-area: total;
	text-align: right !important;
}

body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr .woocommerce-orders-table__cell-order-actions {
	grid-area: actions;
	margin-top: var( --tlpb-space-2 );
}

/*
 * Platobné metódy: údaje vľavo, tlačidlá vpravo. minmax( 0, 1fr ) a zalamovanie: Link
 * má v názve celý e-mail, ktorý sa nedá zalomiť, a na mobile tlačil tlačidlo za okraj.
 */
body.tlpb-account .woocommerce-MyAccount-content table.account-payment-methods-table tbody tr {
	grid-template-columns: minmax( 0, 1fr ) auto;
	grid-template-areas:
		"method actions"
		"expires actions";
}

body.tlpb-account .woocommerce-MyAccount-content table.account-payment-methods-table tbody tr td.payment-method-method {
	grid-area: method;
	font-weight: 700;
	overflow-wrap: anywhere;
}

body.tlpb-account .woocommerce-MyAccount-content table.account-payment-methods-table tbody tr td.payment-method-expires {
	grid-area: expires;
}

body.tlpb-account .woocommerce-MyAccount-content table.account-payment-methods-table tbody tr td.payment-method-expires:empty {
	display: none;
}

body.tlpb-account .woocommerce-MyAccount-content table.account-payment-methods-table tbody tr td.payment-method-actions {
	grid-area: actions;
	display: flex;
	flex-wrap: wrap;
	gap: var( --tlpb-space-2 );
	justify-content: flex-end;
}

/* Tlačidlo „Pridať spôsob platby“ pod zoznamom. */
body.tlpb-account .woocommerce-MyAccount-content table.account-payment-methods-table + p {
	margin-top: var( --tlpb-space-5 );
}

/*
 * Riadok objednávky sa rozloží do jedného riadka podľa šírky SVOJHO kontajnera, nie
 * podľa šírky obrazovky: stĺpec obsahu býva užší než okno (v Elementore je stránka
 * v úzkom kontajneri), a pevné stĺpce dátumu, stavu a sumy by číslo objednávky stlačili
 * na nulu. Kontajner je zoznam / tabuľka, nie celý obsah stránky – kontajner s
 * containment-om by z okna „Než odídete“ spravil obsah kontajnera namiesto okna.
 * Staršie prehliadače bez container queries ostanú pri skladanom rozložení.
 */
.tlpb-orders__list,
body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders:not( .my_account_subscrpt ) {
	container-type: inline-size;
	container-name: tlpb-orders;
}

/*
 * Stredná šírka (napr. stĺpec 600 px): tlačidlo Zobraziť stojí vedľa údajov a nie pod
 * nimi – riadok je tak nižší. Na úzkom mobile ostáva skladané rozloženie, od 46 rem
 * (nižšie) päť stĺpcov v jednom riadku.
 */
@container tlpb-orders ( min-width: 30rem ) {
	body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders:not( .my_account_subscrpt ) tbody tr {
		grid-template-columns: minmax( 0, 1fr ) auto auto;
		grid-template-areas:
			"number status actions"
			"date   total  actions";
	}

	body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr .woocommerce-orders-table__cell-order-actions {
		align-self: center;
		margin-top: 0;
	}
}

@container tlpb-orders ( min-width: 46rem ) {
	body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr td.woocommerce-orders-table__cell-order-status {
		justify-self: start;
	}

	body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders:not( .my_account_subscrpt ) tbody tr {
		grid-template-columns: minmax( 0, 1fr ) var( --tlpb-acc-col-date ) var( --tlpb-acc-col-status ) var( --tlpb-acc-col-total ) auto;
		grid-template-areas: "number date status total actions";
	}

	body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr .woocommerce-orders-table__cell-order-actions {
		margin-top: 0;
	}

	body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr .woocommerce-orders-table__cell-order-date::before,
	body.tlpb-account .woocommerce-MyAccount-content table.my_account_orders tbody tr .woocommerce-orders-table__cell-order-total::before {
		display: none;
	}
}

/* Od 600 px je predplatné jedným riadkom (tri stĺpce, žiadne pevné šírky – stačí okno). */
@media screen and ( min-width: 600px ) {
	body.tlpb-account .woocommerce-MyAccount-content table.my_account_subscrpt tbody tr {
		grid-template-columns: minmax( 0, 1fr ) auto auto;
		grid-template-areas:
			"id      status  status"
			"product product product"
			"next    total   action";
	}

	body.tlpb-account .woocommerce-MyAccount-content table.my_account_subscrpt tbody tr td:nth-child( 6 ) {
		margin-top: 0;
	}
}

/* --- Posledné objednávky pod predplatným --------------------------------- */

.tlpb-orders {
	margin-top: var( --tlpb-space-7 );
}

.tlpb-orders__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --tlpb-space-2 ) var( --tlpb-space-4 );
	margin: 0 0 var( --tlpb-space-3 );
}

body.tlpb-account .woocommerce-MyAccount-content .tlpb-orders__title {
	margin: 0;
}

body.tlpb-account .woocommerce-MyAccount-content a.tlpb-orders__all {
	color: var( --tlpb-plum );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-sm );
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tlpb-orders__all:focus-visible,
.tlpb-orders__number:focus-visible {
	outline: 2px solid var( --tlpb-plum );
	outline-offset: 2px;
}

.tlpb-orders__list {
	display: flex;
	flex-direction: column;
	gap: var( --tlpb-space-3 );
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Rovnaká karta ako riadok tabuľky objednávok vyššie. */
.tlpb-orders__item {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"number  status"
		"date    total"
		"view    view";
	align-items: center;
	gap: var( --tlpb-space-2 ) var( --tlpb-space-4 );
	margin: 0;
	padding: var( --tlpb-space-4 ) var( --tlpb-space-5 );
	border: 1px solid var( --tlpb-line );
	border-radius: var( --tlpb-radius-md );
	background: var( --tlpb-panel );
	box-shadow: var( --tlpb-shadow-card );
	list-style: none;
}

body.tlpb-account .woocommerce-MyAccount-content a.tlpb-orders__number {
	grid-area: number;
	color: var( --tlpb-ink );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-lg );
	font-weight: 700;
	text-decoration: none;
}

.tlpb-orders__date {
	grid-area: date;
	color: var( --tlpb-ink-muted );
	font-size: var( --tlpb-text-sm );
}

.tlpb-orders__status {
	grid-area: status;
	justify-self: end;
}

.tlpb-orders__total {
	grid-area: total;
	justify-self: end;
	color: var( --tlpb-ink );
	font-weight: 700;
}

/* „Zobraziť“ je len vizuálna kópia odkazu na čísle objednávky (čítačky ju
   preskočia) – riadok tak má tlačidlo ako ostatné karty. */
body.tlpb-account .woocommerce-MyAccount-content a.tlpb-orders__view {
	grid-area: view;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	min-height: var( --tlpb-acc-control-h );
	margin-top: var( --tlpb-space-2 );
	padding: 0 var( --tlpb-space-5 );
	border: 1px solid var( --tlpb-plum );
	border-radius: var( --tlpb-radius-pill );
	background: var( --tlpb-plum );
	color: var( --tlpb-on-accent );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-sm );
	font-weight: 700;
	text-decoration: none;
}

/*
 * Zoznam objednávok (nie tabuľka): stredná šírka. Pravidlo musí byť až za základným
 * .tlpb-orders__item vyššie – container query špecifickosť nezvyšuje, o víťazovi
 * rozhoduje poradie v súbore.
 */
@container tlpb-orders ( min-width: 30rem ) {
	.tlpb-orders__item {
		grid-template-columns: minmax( 0, 1fr ) auto auto;
		grid-template-areas:
			"number status view"
			"date   total  view";
	}

	body.tlpb-account .woocommerce-MyAccount-content a.tlpb-orders__view {
		align-self: center;
		margin-top: 0;
	}
}

@container tlpb-orders ( min-width: 46rem ) {
	.tlpb-orders__item {
		grid-template-columns: minmax( 0, 1fr ) var( --tlpb-acc-col-date ) var( --tlpb-acc-col-status ) var( --tlpb-acc-col-total ) auto;
		grid-template-areas: "number date status total view";
	}

	body.tlpb-account .woocommerce-MyAccount-content a.tlpb-orders__view {
		margin-top: 0;
	}

	.tlpb-orders__status {
		justify-self: start;
	}
}

/* --- Detail predplatného a objednávky ------------------------------------ */

body.tlpb-account .woocommerce-MyAccount-content table.shop_table.order_details,
body.tlpb-account .woocommerce-MyAccount-content table.shop_table.subscription_details {
	width: 100%;
	margin: 0 0 var( --tlpb-space-5 );
	border: 1px solid var( --tlpb-line );
	border-radius: var( --tlpb-radius-md );
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var( --tlpb-panel );
	box-shadow: var( --tlpb-shadow-card );
}

body.tlpb-account .woocommerce-MyAccount-content table.shop_table.order_details th,
body.tlpb-account .woocommerce-MyAccount-content table.shop_table.order_details td,
body.tlpb-account .woocommerce-MyAccount-content table.shop_table.subscription_details th,
body.tlpb-account .woocommerce-MyAccount-content table.shop_table.subscription_details td {
	padding: var( --tlpb-space-3 ) var( --tlpb-space-5 );
	border: 0;
	border-top: 1px solid var( --tlpb-line );
	background: none;
	color: var( --tlpb-ink );
	text-align: left;
	vertical-align: middle;
}

body.tlpb-account .woocommerce-MyAccount-content table.shop_table.order_details thead th,
body.tlpb-account .woocommerce-MyAccount-content table.shop_table.order_details > tbody:first-child > tr:first-child > td,
body.tlpb-account .woocommerce-MyAccount-content table.shop_table.subscription_details > tbody > tr:first-child > td {
	border-top: 0;
}

body.tlpb-account .woocommerce-MyAccount-content table.shop_table.order_details thead th {
	color: var( --tlpb-ink-muted );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-sm );
	font-weight: 700;
}

/* Prvý stĺpec tabuľky s detailmi je popisok. */
body.tlpb-account .woocommerce-MyAccount-content table.shop_table.subscription_details td:first-child {
	color: var( --tlpb-ink-muted );
	font-size: var( --tlpb-text-sm );
	white-space: nowrap;
}

body.tlpb-account .woocommerce-MyAccount-content table.shop_table.order_details td a:not( .button ),
body.tlpb-account .woocommerce-MyAccount-content table.shop_table.subscription_details td a:not( .button ) {
	color: var( --tlpb-plum );
	text-underline-offset: 3px;
}

/* --- Adresy -------------------------------------------------------------- */

body.tlpb-account .woocommerce-MyAccount-content .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --tlpb-space-4 );
	margin: 0;
}

@media screen and ( min-width: 600px ) {
	body.tlpb-account .woocommerce-MyAccount-content .woocommerce-Addresses {
		grid-template-columns: 1fr 1fr;
	}
}

body.tlpb-account .woocommerce-MyAccount-content .woocommerce-Addresses::before,
body.tlpb-account .woocommerce-MyAccount-content .woocommerce-Addresses::after {
	display: none;
}

body.tlpb-account .woocommerce-MyAccount-content .woocommerce-Address {
	float: none;
	width: auto;
	padding: var( --tlpb-space-5 );
	border: 1px solid var( --tlpb-line );
	border-radius: var( --tlpb-radius-md );
	background: var( --tlpb-panel );
	box-shadow: var( --tlpb-shadow-card );
}

body.tlpb-account .woocommerce-MyAccount-content .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --tlpb-space-2 ) var( --tlpb-space-4 );
	margin: 0 0 var( --tlpb-space-3 );
}

/* Čistiace prvky WooCommerce by sa vo flexe stali prázdnymi položkami. */
body.tlpb-account .woocommerce-MyAccount-content .woocommerce-Address-title::before,
body.tlpb-account .woocommerce-MyAccount-content .woocommerce-Address-title::after {
	display: none;
}

body.tlpb-account .woocommerce-MyAccount-content .woocommerce-Address-title h2 {
	margin: 0;
	font-size: var( --tlpb-text-h3 );
}

body.tlpb-account .woocommerce-MyAccount-content .woocommerce-Address-title a.edit {
	float: none;
	color: var( --tlpb-plum );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-sm );
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

/* --- Formuláre (osobné údaje, adresa, zmena hesla) ----------------------- */

body.tlpb-account .woocommerce-MyAccount-content .form-row {
	margin: 0 0 var( --tlpb-space-3 );
	padding: 0;
}

/*
 * Menovky vnútri polí patria pokladni (checkout.css a skript, ktorý polia
 * označuje ako vyplnené). Na stránkach účtu ten skript nebeží, takže menovka
 * ležala cez hodnotu. Tu sú menovky nad poľom. Základné pravidlo pokladne má
 * dlhý reťazec :not() a pri písaní !important, preto tu výslovne zdvojená
 * trieda (vyššia špecifickosť) aj !important.
 */
body.tlpb-account .woocommerce-MyAccount-content .form-row.form-row:not( .tlpb-consent ):not( .tlpb-company-toggle ):not( .create-account ) {
	position: static;
}

body.tlpb-account .woocommerce-MyAccount-content .form-row.form-row:not( .tlpb-consent ):not( .tlpb-company-toggle ):not( .create-account ) > label {
	position: static;
	top: auto !important;
	left: auto;
	max-width: none;
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
	pointer-events: auto;
	transform: none !important;
	transition: none;
}

body.tlpb-account .woocommerce-MyAccount-content .form-row label {
	display: block;
	margin: 0 0 var( --tlpb-space-1 );
	color: var( --tlpb-ink );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-sm );
	font-weight: 600;
	line-height: 1.4;
}

body.tlpb-account .woocommerce-MyAccount-content .form-row .required {
	color: var( --tlpb-plum );
	text-decoration: none;
}

body.tlpb-account .woocommerce-MyAccount-content .form-row input.input-text,
body.tlpb-account .woocommerce-MyAccount-content .form-row textarea,
body.tlpb-account .woocommerce-MyAccount-content .form-row select,
body.tlpb-account .woocommerce-MyAccount-content .select2-container .select2-selection--single {
	width: 100%;
	height: auto;
	min-height: var( --tlpb-acc-field-h );
	padding: var( --tlpb-space-2 ) var( --tlpb-space-4 );
	border: 1px solid var( --tlpb-field-line );
	border-radius: var( --tlpb-radius-sm );
	background: var( --tlpb-panel );
	color: var( --tlpb-ink );
	font: inherit;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.tlpb-account .woocommerce-MyAccount-content .form-row input.input-text:focus,
body.tlpb-account .woocommerce-MyAccount-content .form-row textarea:focus,
body.tlpb-account .woocommerce-MyAccount-content .form-row select:focus,
body.tlpb-account .woocommerce-MyAccount-content .select2-container--open .select2-selection--single {
	border-color: var( --tlpb-plum );
	box-shadow: var( --tlpb-focus-ring );
	outline: none;
}

body.tlpb-account .woocommerce-MyAccount-content .form-row input.input-text:focus-visible,
body.tlpb-account .woocommerce-MyAccount-content .form-row textarea:focus-visible,
body.tlpb-account .woocommerce-MyAccount-content .form-row select:focus-visible {
	outline: 2px solid var( --tlpb-plum );
	outline-offset: 2px;
}

body.tlpb-account .woocommerce-MyAccount-content .woocommerce-invalid input.input-text {
	border-color: var( --tlpb-danger );
}

body.tlpb-account .woocommerce-MyAccount-content .woocommerce-invalid > label {
	color: var( --tlpb-danger );
}

/* Vysvetlivka pod poľom (napr. „Takto sa bude vaše meno zobrazovať“). */
body.tlpb-account .woocommerce-MyAccount-content .form-row span > em {
	display: block;
	margin-top: var( --tlpb-space-1 );
	color: var( --tlpb-ink-muted );
	font-size: var( --tlpb-text-sm );
	font-style: normal;
}

/* Dvojice polí (meno a priezvisko) vedľa seba, ostatné na celý riadok. */
body.tlpb-account .woocommerce-MyAccount-content form.edit-account,
body.tlpb-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var( --tlpb-space-4 );
}

body.tlpb-account .woocommerce-MyAccount-content form.edit-account > *,
body.tlpb-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > * {
	grid-column: 1 / -1;
}

body.tlpb-account .woocommerce-MyAccount-content form.edit-account > .form-row-first,
body.tlpb-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row-first {
	grid-column: 1;
}

body.tlpb-account .woocommerce-MyAccount-content form.edit-account > .form-row-last,
body.tlpb-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row-last {
	grid-column: 2;
}

body.tlpb-account .woocommerce-MyAccount-content form.edit-account > .form-row,
body.tlpb-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row {
	float: none;
	width: 100%;
}

body.tlpb-account .woocommerce-MyAccount-content form.edit-account > .clear {
	display: none;
}

@media screen and ( max-width: 479px ) {
	body.tlpb-account .woocommerce-MyAccount-content form.edit-account,
	body.tlpb-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	body.tlpb-account .woocommerce-MyAccount-content form.edit-account > .form-row-first,
	body.tlpb-account .woocommerce-MyAccount-content form.edit-account > .form-row-last,
	body.tlpb-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row-first,
	body.tlpb-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row-last {
		grid-column: 1 / -1;
	}
}

/* Zmena hesla je samostatná karta. */
body.tlpb-account .woocommerce-MyAccount-content form.edit-account fieldset {
	margin: var( --tlpb-space-4 ) 0 var( --tlpb-space-5 );
	padding: var( --tlpb-space-5 );
	border: 1px solid var( --tlpb-line );
	border-radius: var( --tlpb-radius-md );
	background: var( --tlpb-panel );
}

body.tlpb-account .woocommerce-MyAccount-content form.edit-account fieldset legend {
	padding: 0 var( --tlpb-space-2 );
	color: var( --tlpb-ink );
	font-family: var( --tlpb-font-heading );
	font-size: var( --tlpb-text-h3 );
	font-weight: 700;
}

/* --- Pohyb -------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	body.tlpb-account .woocommerce-MyAccount-navigation li a,
	body.tlpb-account .woocommerce-MyAccount-content .form-row input.input-text,
	body.tlpb-account .woocommerce-MyAccount-content a.button {
		transition: none;
	}
}