/**
 * Guest account page (inc/account.php, woocommerce/myaccount/form-login.php and the password templates): the login
 * and the registration as two equal columns of the page width with a line between them, like the two columns of
 * the Shoptimizer login without the boxes; the lost and new password as one narrow column under the title. Titles
 * and columns start at the edge of the container, like on the cart and the wishlist. Follows the "Logowanie i
 * rejestracja" mockup, variant A (decision 51). Colours: assets/css/tokens.css.
 *
 * Sections: 1. page, 2. columns, 3. fields, 4. "Pokaż", 5. strength meter, 6. checkboxes and links, 7. buttons,
 * 8. notices and messages at the fields, 8a. greeting after the registration or a new password, 9. narrower screens
 * with the tabs, 10. the account of a logged-in customer.
 */

/* ------------------------------------------------------------------
   1. Page: the width of the container, the title 32 px under the header (the space of the page) as on the
   wishlist, no breadcrumbs, no sidebar
   ------------------------------------------------------------------ */
.sz-account #primary {
	float: none;
	width: 100%;
	padding-bottom: 64px;
}
.sz-account .entry-header {
	padding-top: 0;
}
.sz-account .entry-header .entry-title {
	margin: 0;
	font-family: Poppins, sans-serif;
	font-size: 34px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--sz-ink);
}
.sz-account .entry-content {
	margin-top: 28px;
}
.sz-account .sz-icon {
	flex: none;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: var(--sz-navy);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ------------------------------------------------------------------
   2. Columns: login | registration, the same width, a line between; the password screens in one narrow column
   ------------------------------------------------------------------ */
.sz-account-guest .col2-set#customer_login {
	float: none;
	width: auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	margin: 0;
}
.sz-account-guest .col2-set#customer_login::before,
.sz-account-guest .col2-set#customer_login::after {
	display: none;
}
/* Shoptimizer floats the two columns at 41 % and 53 % of the row */
.sz-account-guest .col2-set#customer_login .sz-account__column {
	float: none;
	width: auto;
	margin: 0;
	padding: 0 64px 0 0;
}
.sz-account-guest .col2-set#customer_login .sz-account__column + .sz-account__column {
	padding: 0 0 0 64px;
	border-left: 1px solid var(--sz-line);
}
/* Password screens: the card with the title on the left, help on the right (the x-kom layout) */
.sz-account-password .entry-content {
	margin-top: 0;
}
.sz-account-split {
	display: grid;
	grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
	gap: 96px;
	align-items: start;
}
.sz-account-card--boxed {
	padding: 40px 44px 44px;
	border: 1px solid var(--sz-line);
	border-radius: 12px;
	background: #fff;
}
.sz-account-guest h1.sz-account-card__heading {
	margin: 0 0 10px;
	font-family: Poppins, sans-serif;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--sz-ink);
}
.sz-account-card--boxed .sz-account-card__lead {
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 25px;
}
.sz-account-card--boxed .sz-account-back {
	margin-top: 4px;
}
.sz-account-aside {
	padding-top: 44px;
}
.sz-account-guest h2.sz-account-aside__title {
	margin: 0 0 14px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sz-ink);
}
.sz-account-aside ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sz-account-aside li {
	margin: 0;
	border-top: 1px solid var(--sz-line);
}
.sz-account-aside li:last-child {
	border-bottom: 1px solid var(--sz-line);
}
.sz-account-aside a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 0;
	font-size: 15px;
	color: var(--sz-ink);
	text-decoration: none;
}
.sz-account-aside a:hover span {
	color: var(--sz-navy);
	text-decoration: underline;
}
.sz-account-guest .sz-account-aside .sz-icon {
	width: 16px;
	height: 16px;
}
.sz-account-guest h2.sz-account-card__title {
	margin: 0 0 24px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sz-ink);
}
.sz-account-card__lead {
	margin: -14px 0 24px;
	font-size: 15px;
	line-height: 23px;
	color: var(--sz-ink2);
}
.sz-account-card__lead strong {
	font-weight: 600;
	color: var(--sz-ink);
}
/* The lines under the two titles take the same height (two lines, three on tablets), so the fields of both columns
   start level */
@media (min-width: 768px) {
	.sz-account-guest .col2-set#customer_login .sz-account-card__lead {
		min-height: 46px;
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
	.sz-account-guest .col2-set#customer_login .sz-account-card__lead {
		min-height: 69px;
	}
}
@media (min-width: 768px) and (max-width: 1199px) {
	.sz-account-split {
		gap: 48px;
	}
	.sz-account-guest .col2-set#customer_login .sz-account__column {
		padding-right: 40px;
	}
	.sz-account-guest .col2-set#customer_login .sz-account__column + .sz-account__column {
		padding-left: 40px;
	}
}

/* ------------------------------------------------------------------
   3. Fields
   ------------------------------------------------------------------ */
.sz-account-guest .sz-account-card form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	border: 0;
}
.sz-account-guest .sz-account-card .form-row {
	margin: 0;
	padding: 0;
}
.sz-account-guest .sz-account-card label:not(.woocommerce-form__label-for-checkbox) {
	display: block;
	margin: 0 0 6px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 18px;
	color: var(--sz-ink);
}
.sz-account-guest .sz-account-card input.input-text {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--sz-field);
	border-radius: var(--sz-radius);
	background: #fff;
	box-shadow: none;
	font-size: 16px;
	color: var(--sz-ink);
}
.sz-account-guest .sz-account-card input.input-text::placeholder {
	color: var(--sz-mute);
	opacity: 1;
}
.sz-account-guest .sz-account-card input.input-text:focus {
	border-color: var(--sz-navy);
	outline: 2px solid var(--sz-focus);
	outline-offset: 1px;
}
.sz-account-help {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 17px;
	color: var(--sz-mute);
}
.sz-account-help[hidden],
.is-invalid .sz-account-help {
	display: none;
}
/* The information about the data (WooCommerce privacy text, set in Polish) */
.sz-account-guest .woocommerce-privacy-policy-text p {
	margin: 0;
	font-size: 12.5px;
	line-height: 18px;
	color: var(--sz-mute);
}
.sz-account-guest .woocommerce-privacy-policy-text a {
	color: var(--sz-navy);
	text-decoration: underline;
}

/* ------------------------------------------------------------------
   4. "Pokaż" in the password field (the button of WooCommerce, text from assets/js/account.js)
   ------------------------------------------------------------------ */
.sz-account .password-input {
	position: relative;
	display: block;
}
.sz-account-guest .sz-account-card .password-input input.input-text,
.sz-account-member .woocommerce-MyAccount-content .password-input input.input-text {
	padding-right: 92px;
}
/* Selectors as specific as the eye of Shoptimizer (.woocommerce-page form .show-password-input) to replace it */
.sz-account-guest .sz-account-card form .show-password-input,
.sz-account-member .woocommerce-MyAccount-content form .show-password-input {
	position: absolute;
	top: 50%;
	right: 6px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	margin: 0;
	padding: 0 8px;
	border: 0;
	border-radius: var(--sz-radius);
	background: transparent;
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
	color: var(--sz-navy);
	cursor: pointer;
	transform: translateY(-50%);
}
.sz-account-guest .sz-account-card form .show-password-input::before,
.sz-account-guest .sz-account-card form .show-password-input::after,
.sz-account-member .woocommerce-MyAccount-content form .show-password-input::before,
.sz-account-member .woocommerce-MyAccount-content form .show-password-input::after {
	display: none;
}
.sz-account-guest .sz-account-card form .show-password-input:hover,
.sz-account-member .woocommerce-MyAccount-content form .show-password-input:hover {
	background: var(--sz-bg2);
}
.sz-account-guest .sz-account-card form .show-password-input .sz-icon,
.sz-account-member .woocommerce-MyAccount-content form .show-password-input .sz-icon {
	width: 16px;
	height: 16px;
}

/* ------------------------------------------------------------------
   5. Strength of a new password
   ------------------------------------------------------------------ */
.sz-meter {
	margin-top: 8px;
}
.sz-meter[hidden] {
	display: none;
}
.sz-meter__track {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: var(--sz-track);
}
.sz-meter__bar {
	display: block;
	width: 20%;
	height: 4px;
	border-radius: 2px;
	background: var(--sz-error);
	transition: width 0.2s ease-out, background-color 0.2s ease-out;
}
.sz-meter[data-level="medium"] .sz-meter__bar {
	width: 50%;
	background: var(--sz-warn);
}
.sz-meter[data-level="strong"] .sz-meter__bar {
	width: 100%;
	background: var(--sz-ok);
}
.sz-meter__text {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 17px;
	color: var(--sz-mute);
}

/* ------------------------------------------------------------------
   6. Checkboxes and links
   ------------------------------------------------------------------ */
/* Shoptimizer: bold underlined links, a blue "remember me" label, a floated checkbox */
.sz-account-guest #customer_login p a {
	font-weight: 400;
}
.sz-account-guest .woocommerce-form-login__rememberme span {
	margin-left: 0;
	color: var(--sz-ink2);
}
.sz-account-guest .form-row input.woocommerce-form__input-checkbox {
	float: none;
}
.sz-account-guest .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--sz-ink2);
	cursor: pointer;
}
.sz-account-guest .woocommerce-form__label-for-checkbox input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--sz-navy);
}
.sz-account-guest .sz-account-terms a,
.sz-account-guest .sz-account-login__lost,
.sz-account-back a,
.sz-account-card__lead a {
	color: var(--sz-navy);
	text-decoration: underline;
}
.sz-account-login__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
}
.sz-account-login__lost {
	font-size: 14px;
}
.sz-account-back {
	margin: 0;
	font-size: 14px;
}

/* ------------------------------------------------------------------
   7. Buttons: the whole width of the card
   ------------------------------------------------------------------ */
.sz-account-guest .sz-account-submit {
	margin: 0;
}
.sz-account-guest .sz-account-card button.button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 22px;
	border-radius: var(--sz-radius);
	background: var(--sz-navy);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}
.sz-account-guest .sz-account-card button.button:hover,
.sz-account-guest .sz-account-card button.button:focus-visible {
	background: var(--sz-navy-dark);
	color: #fff;
}

/* ------------------------------------------------------------------
   8. Notices above the cards and messages at the fields
   ------------------------------------------------------------------ */
.sz-account .woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: 20px;
}
.sz-account .woocommerce-error,
.sz-account .woocommerce-message,
.sz-account .woocommerce-info {
	margin: 0 0 12px;
	padding: 12px 14px;
	border: 0;
	border-left: 4px solid var(--sz-error);
	border-radius: var(--sz-radius);
	background: #fdecea;
	font-size: 14px;
	line-height: 20px;
	color: var(--sz-error);
	list-style: none;
}
.sz-account .woocommerce-message,
.sz-account .woocommerce-info {
	border-left-color: var(--sz-ok);
	background: var(--sz-ok-bg);
	color: var(--sz-ok-ink);
}
.sz-account .woocommerce-error::before,
.sz-account .woocommerce-message::before,
.sz-account .woocommerce-info::before {
	display: none;
}
.sz-account .woocommerce-error li {
	margin: 0;
	padding: 0;
}
.sz-account .woocommerce-error a,
.sz-account .woocommerce-message a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}
.sz-account-guest .is-invalid input.input-text,
.sz-account-member .woocommerce-MyAccount-content .is-invalid input.input-text {
	border: 2px solid var(--sz-error);
}
.sz-field-error {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 17px;
	color: var(--sz-error);
}
.sz-account-terms.is-invalid {
	padding: 10px 12px;
	border: 2px solid var(--sz-error);
	border-radius: var(--sz-radius);
	background: #fdecea;
}
.sz-account-terms .sz-field-error {
	margin-left: 30px;
}

/* ------------------------------------------------------------------
   8a. Greeting on the account after the registration or a new password (logged-in customer)
   ------------------------------------------------------------------ */
.sz-account-greeting {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 24px;
	padding: 16px 18px;
	border-radius: 10px;
	background: var(--sz-ok-bg);
}
.sz-account-greeting .sz-icon {
	flex: none;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: var(--sz-ok);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.sz-account-greeting p {
	margin: 0;
}
.sz-account-greeting__title {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--sz-ok-ink);
}
.sz-account-greeting__text {
	margin-top: 4px;
	font-size: 14px;
	line-height: 21px;
	color: var(--sz-ink2);
}

/* ------------------------------------------------------------------
   9. Narrower screens: the cards one above the other, the login first
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.sz-account .entry-header .entry-title {
		font-size: 26px;
	}
	.sz-account .entry-content {
		margin-top: 16px;
	}
	.sz-account-guest .col2-set#customer_login {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
	.sz-account-guest .col2-set#customer_login .sz-account__column,
	.sz-account-guest .col2-set#customer_login .sz-account__column + .sz-account__column {
		padding: 0;
		border-left: 0;
	}
	.sz-account-guest h2.sz-account-card__title {
		margin-bottom: 14px;
		font-size: 19px;
	}
	.sz-account-split {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	.sz-account-card--boxed {
		padding: 24px 20px 28px;
	}
	.sz-account-guest h1.sz-account-card__heading {
		font-size: 24px;
	}
	.sz-account-card--boxed .sz-account-card__lead {
		margin-bottom: 20px;
		font-size: 15px;
		line-height: 23px;
	}
	.sz-account-aside {
		padding-top: 0;
	}
	.sz-account-guest .u-column2.col-2 {
		margin-top: 0;
	}

	/* Tabs "Zaloguj się" / "Załóż konto" (assets/js/account.js): one card at a time, its title is the tab */
	.sz-account-tabs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin: 0 0 16px;
		border-bottom: 1px solid var(--sz-line);
	}
	.sz-account-tabs[hidden] {
		display: none;
	}
	.sz-account-guest .sz-account-tabs__tab {
		min-height: 48px;
		margin: 0 0 -1px;
		padding: 0 8px;
		border: 0;
		border-bottom: 2px solid transparent;
		border-radius: 0;
		background: transparent;
		font-size: 15px;
		font-weight: 500;
		color: var(--sz-mute);
		cursor: pointer;
	}
	.sz-account-guest .sz-account-tabs__tab[aria-selected="true"] {
		border-bottom-color: var(--sz-navy);
		font-weight: 600;
		color: var(--sz-ink);
	}
	.sz-account-guest .sz-account-tabs__tab:focus-visible {
		outline: 2px solid var(--sz-focus);
		outline-offset: -2px;
	}
	.sz-account-tabbed .col2-set#customer_login .sz-account__column:not(.is-active) {
		display: none;
	}
	.sz-account-tabbed .sz-account-card__title {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.sz-account-tabbed .sz-account-card__lead {
		margin-top: 0;
	}
}

/* Wider screens: both cards, no tabs */
@media (min-width: 768px) {
	.sz-account-tabs {
		display: none;
	}
}

/* ==================================================================
   10. Account of a logged-in customer (inc/my-account.php, decision 53): menu | content, the overview, the order
   cards, one order, the addresses and the address form. Colours of the statuses: amber = waiting for the customer,
   navy = in progress, blue = shipped, green = done, grey = closed.
   ================================================================== */
.sz-account-member .entry-content > .woocommerce {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}
.sz-account-member .entry-content > .woocommerce::before,
.sz-account-member .entry-content > .woocommerce::after {
	display: none;
}
.sz-account-member .woocommerce-MyAccount-navigation,
.sz-account-member .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}
.sz-account-member .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--sz-line);
}
.sz-account-member .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	border-bottom: 1px solid var(--sz-line);
}
.sz-account-member .woocommerce-MyAccount-navigation ul li:last-child {
	border-bottom: 1px solid var(--sz-line);
}
.sz-account-member .woocommerce-MyAccount-navigation ul li a {
	padding: 13px 0;
	font-size: 15px;
	color: var(--sz-ink2);
}
.sz-account-member .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--sz-ink);
}
.sz-account-member .woocommerce-MyAccount-content {
	font-size: 15px;
	line-height: 1.55;
	color: var(--sz-ink2);
}
.sz-account-member .woocommerce-MyAccount-content a:not(.button) {
	color: var(--sz-navy);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.sz-account-member .woocommerce-MyAccount-content .amount,
.sz-account-member .woocommerce-MyAccount-content .woocommerce-Price-currencySymbol {
	font-size: inherit;
	font-weight: inherit;
}
.sz-account-member .woocommerce-MyAccount-content .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 0;
	padding: 0 20px;
	border: 1.5px solid var(--sz-navy);
	border-radius: var(--sz-radius);
	background: var(--sz-navy);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	gap: 0.3em;
}
.sz-account-member .woocommerce-MyAccount-content .button:hover {
	border-color: var(--sz-navy-dark);
	background: var(--sz-navy-dark);
	color: #fff;
}
.sz-account-member .woocommerce-MyAccount-content .button.sz-button-secondary {
	background: #fff;
	color: var(--sz-navy);
}
.sz-account-member .woocommerce-MyAccount-content .button.sz-button-secondary:hover {
	background: var(--sz-bg2);
	color: var(--sz-navy);
}
.sz-account-member .sz-account-heading {
	margin: 0;
	font-family: Poppins, sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sz-ink);
}
.sz-account-member h3.sz-account-subheading {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 600;
	color: var(--sz-ink);
}
.sz-account-lead {
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 23px;
	color: var(--sz-ink2);
}
.sz-account-member .sz-account-heading + .woocommerce-info,
.sz-account-member .sz-account-heading + .sz-order-list,
.sz-account-member .sz-account-heading + .sz-account-empty-box {
	margin-top: 20px;
}
/* WooCommerce notices in the content column: the e-mail confirmation and the like as a quiet line */
.sz-account-member .woocommerce-info {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	border-left-color: var(--sz-line);
	background: var(--sz-bg2);
	color: var(--sz-ink2);
}
.sz-account-member .woocommerce-info .button {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	font-weight: 400;
	color: var(--sz-navy);
	text-decoration: underline;
}
.sz-account-member .woocommerce-info .button:hover {
	background: none;
	color: var(--sz-navy-dark);
}

/* Badges of the statuses */
.sz-order-badge {
	display: inline-flex;
	flex: none;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	border-radius: 99px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}
.sz-order-badge.is-waiting {
	background: #fdf3e1;
	color: #8a4b00;
}
.sz-order-badge.is-progress {
	background: var(--sz-chip);
	color: var(--sz-navy);
}
.sz-order-badge.is-shipped {
	background: #e8f1fb;
	color: #1d4f8f;
}
.sz-order-badge.is-done {
	background: var(--sz-ok-bg);
	color: var(--sz-ok-ink);
}
.sz-order-badge.is-closed {
	background: #f1f2f4;
	color: var(--sz-mute);
}

/* Order card */
.sz-order-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sz-order-card {
	padding: 18px 20px;
	border: 1px solid var(--sz-line);
	border-radius: 10px;
	background: #fff;
}
.sz-order-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
}
.sz-account-member h3.sz-order-card__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}
.sz-account-member .sz-order-card__title a:not(.button) {
	color: var(--sz-ink);
	text-decoration: none;
}
.sz-account-member .sz-order-card__title a:not(.button):hover {
	text-decoration: underline;
}
.sz-order-card__date {
	font-size: 13.5px;
	color: var(--sz-mute);
}
.sz-order-card__head .sz-order-badge {
	margin-left: auto;
}
.sz-order-card__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 24px;
	align-items: center;
	margin-top: 14px;
}
.sz-order-card__photos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sz-order-card__photos li {
	margin: 0;
}
.sz-order-photo {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--sz-photo, 56px);
	height: var(--sz-photo, 56px);
	overflow: hidden;
	border: 1px solid var(--sz-line);
	border-radius: 6px;
	background: var(--sz-photo-bg, #f7f8fa);
}
.sz-order-photo img {
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	object-fit: contain;
}
.sz-order-photo.is-more {
	width: 56px;
	height: 56px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sz-ink2);
}
.sz-order-card__total {
	margin: 0;
	text-align: right;
}
.sz-order-card__total strong {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--sz-ink);
}
.sz-order-card__total span {
	font-size: 13px;
	color: var(--sz-mute);
}
.sz-order-card__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	min-width: 190px;
}
.sz-account-member .sz-order-card__actions .button {
	min-height: 40px;
}
.sz-order-tracking {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 12px 0 0;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--sz-bg2);
	font-size: 13.5px;
	color: var(--sz-ink2);
}
.sz-order-tracking strong {
	color: var(--sz-ink);
}
.sz-order-tracking a {
	margin-left: auto;
}
.sz-order-pages {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 20px;
}
.sz-account-empty-box {
	padding: 40px 24px;
	border: 1px dashed var(--sz-field-soft);
	border-radius: 10px;
	text-align: center;
}
.sz-account-empty-box p {
	margin: 0 0 16px;
	font-size: 14.5px;
}
.sz-account-empty-box .sz-account-empty-box__title {
	margin-bottom: 6px;
	font-family: Poppins, sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: var(--sz-ink);
}

/* Overview */
.sz-account-alert {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 24px 0 0;
	padding: 16px 18px;
	border-radius: 10px;
	background: #fdf3e1;
	font-size: 14.5px;
	line-height: 22px;
	color: #6b3a00;
}
.sz-account-alert p {
	margin: 0;
}
.sz-account-alert strong {
	color: #8a4b00;
}
.sz-account-alert__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 16px;
}
.sz-account-member .sz-account-alert__actions .button {
	min-height: 40px;
}
.sz-account-alert--plain {
	display: block;
}
.sz-account-section {
	margin-top: 32px;
}
.sz-account-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 14px;
}
.sz-account-member .sz-account-section__head h3 {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	color: var(--sz-ink);
}
.sz-account-empty {
	margin: 0;
}
.sz-account-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}
.sz-account-tiles li {
	display: flex;
	margin: 0;
}
.sz-account-member .sz-account-tiles a:not(.button) {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px;
	border: 1px solid var(--sz-line);
	border-radius: 10px;
	color: var(--sz-ink2);
	text-decoration: none;
}
.sz-account-member .sz-account-tiles a:not(.button):hover {
	border-color: var(--sz-field);
}
.sz-account-tiles__title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: Poppins, sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--sz-ink);
}
.sz-account-tiles__text {
	font-size: 14px;
	line-height: 21px;
	overflow-wrap: anywhere;
}
.sz-account-tiles__more {
	margin-top: auto;
	font-size: 13.5px;
	color: var(--sz-navy);
	text-decoration: underline;
}
.sz-account-helpline {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 28px;
	margin: 32px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--sz-line);
	font-size: 14px;
}
.sz-account-helpline span {
	color: var(--sz-mute);
}

/* One order */
.sz-account-member a.sz-account-back:not(.button) {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	text-decoration: none;
}
.sz-account-back .sz-icon {
	width: 16px;
	height: 16px;
}
.sz-order-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-top: 12px;
}
.sz-order-date {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--sz-mute);
}
.sz-order-closed {
	margin: 20px 0 0;
	padding: 14px 16px;
	border-radius: 10px;
	background: #f1f2f4;
}
.sz-order-progress {
	margin-top: 24px;
	padding: 20px 24px;
	border: 1px solid var(--sz-line);
	border-radius: 10px;
}
.sz-order-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}
.sz-order-steps li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
	text-align: center;
}
.sz-order-steps li + li::before {
	content: "";
	position: absolute;
	top: 12px;
	right: 50%;
	width: 100%;
	height: 2px;
	background: var(--sz-field-soft);
}
.sz-order-steps li.is-done + li.is-done::before {
	background: var(--sz-navy);
}
.sz-order-steps__dot {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 2px solid var(--sz-field-soft);
	border-radius: 50%;
	background: #fff;
}
.is-done .sz-order-steps__dot {
	border-color: var(--sz-navy);
	background: var(--sz-navy);
}
.sz-account .is-done .sz-order-steps__dot .sz-icon {
	width: 14px;
	height: 14px;
	stroke: #fff;
	stroke-width: 2.2;
}
.sz-order-steps__name {
	font-size: 13px;
	color: var(--sz-mute);
}
.is-done .sz-order-steps__name {
	font-weight: 600;
	color: var(--sz-ink);
}
.sz-order-progress .sz-order-tracking {
	margin-top: 18px;
}
.sz-order-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	grid-template-areas: "main side" "extra side";
	gap: 28px 40px;
	align-items: start;
	margin-top: 28px;
}
.sz-order-layout__main {
	grid-area: main;
}
.sz-order-layout__side {
	grid-area: side;
}
.sz-order-layout__extra {
	grid-area: extra;
}
.sz-order-items {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sz-order-item {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 14px 0;
	border-top: 1px solid var(--sz-line);
}
.sz-order-item__text {
	flex: 1;
	min-width: 0;
}
.sz-account-member a.sz-order-item__name:not(.button),
.sz-order-item__name {
	display: block;
	font-size: 15px;
	line-height: 1.4;
	color: var(--sz-ink);
	text-decoration: none;
}
.sz-account-member a.sz-order-item__name:not(.button):hover {
	text-decoration: underline;
}
.sz-order-item__qty,
.sz-order-item__meta {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: var(--sz-mute);
}
.sz-order-item__total {
	font-size: 15px;
	font-weight: 600;
	color: var(--sz-ink);
	white-space: nowrap;
}
.sz-order-addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.sz-order-summary {
	padding: 20px;
	border-radius: 10px;
	background: var(--sz-bg2);
}
.sz-order-summary__rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}
.sz-order-summary__rows div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}
.sz-order-summary__rows dt,
.sz-order-summary__rows dd {
	margin: 0;
	font-size: 14.5px;
	font-weight: 400;
	color: var(--sz-ink2);
}
.sz-order-summary__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--sz-line);
	font-weight: 600;
	color: var(--sz-ink);
}
.sz-order-summary__total strong {
	font-family: Poppins, sans-serif;
	font-size: 20px;
	font-weight: 600;
}
.sz-order-summary__vat {
	margin: 2px 0 0;
	font-size: 12.5px;
	text-align: right;
	color: var(--sz-mute);
}
.sz-order-summary__payment {
	margin: 14px 0 0;
	font-size: 13.5px;
}
.sz-order-summary__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
}
.sz-account-member .sz-order-summary__actions .button {
	width: 100%;
}
.sz-order-summary__cancel {
	font-size: 14px;
	text-align: center;
}
.sz-order-help {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}
.sz-order-help li {
	margin: 0;
}
.sz-order-notes {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sz-order-notes li {
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid var(--sz-line);
}
.sz-order-notes time {
	font-size: 13px;
	color: var(--sz-mute);
}
.sz-order-notes p {
	margin: 4px 0 0;
}
.sz-order-layout__extra .sz-account-subheading + .sz-order-notes {
	margin-top: 8px;
}
.sz-order-layout__extra .sz-order-addresses + .sz-account-subheading {
	margin-top: 28px;
}

/* Addresses */
.sz-address-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 22px;
}
.sz-address-card {
	padding: 20px 22px;
	border: 1px solid var(--sz-line);
	border-radius: 10px;
	background: #fff;
}
.sz-address-card.is-compact {
	padding: 16px 18px;
}
.sz-address-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.sz-account-member .sz-address-card h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--sz-ink);
}
.sz-account-member .sz-address-card.is-compact h3 {
	font-size: 15px;
}
.sz-address-card p {
	margin: 10px 0 0;
	font-size: 14.5px;
	line-height: 23px;
	color: var(--sz-ink2);
}
.sz-address-card > .button {
	margin-top: 14px;
}

/* Address form and the account data form */
.sz-address-form {
	max-width: 640px;
	margin-top: 12px;
}
.sz-address-form .woocommerce-address-fields {
	margin-top: 22px;
}
.sz-address-form .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
}
.sz-address-form .woocommerce-address-fields__field-wrapper::before,
.sz-address-form .woocommerce-address-fields__field-wrapper::after {
	display: none;
}
.sz-account-member .sz-address-form .form-row {
	grid-column: span 6;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}
.sz-account-member .sz-address-form .form-row-first,
.sz-account-member .sz-address-form .form-row-last {
	grid-column: span 3;
}
.sz-account-member .sz-address-form .form-row.sz-field-postcode {
	grid-column: span 2;
}
.sz-account-member .sz-address-form .form-row.sz-field-city {
	grid-column: span 4;
}
.sz-account-member .sz-address-form .form-row.sz-field-hidden {
	display: none;
}
.sz-account-member .woocommerce-MyAccount-content form .form-row label,
.sz-account-member .woocommerce-MyAccount-content form fieldset legend {
	display: block;
	margin: 0 0 6px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 18px;
	color: var(--sz-ink);
}
.sz-account-member .woocommerce-MyAccount-content form .form-row label .required {
	display: none;
}
.sz-account-member .woocommerce-MyAccount-content form .form-row label .optional {
	font-weight: 400;
	color: var(--sz-mute);
}
.sz-account-member .woocommerce-MyAccount-content input.input-text {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--sz-field);
	border-radius: var(--sz-radius);
	background: #fff;
	box-shadow: none;
	font-size: 16px;
	color: var(--sz-ink);
}
.sz-account-member .woocommerce-MyAccount-content input.input-text:focus {
	border-color: var(--sz-navy);
	outline: 2px solid var(--sz-focus);
	outline-offset: 1px;
}
.sz-account-member .woocommerce-MyAccount-content input.input-text::placeholder {
	color: var(--sz-mute);
	opacity: 1;
}
/* WooCommerce shows a field's description only while the field has focus; the phone and e-mail notes stay */
.sz-account-member .woocommerce-MyAccount-content .form-row .description {
	display: block !important;
	position: static;
	margin: 6px 0 0;
	padding: 0;
	background: none;
	font-size: 12.5px;
	line-height: 17px;
	color: var(--sz-mute);
}
.sz-account-member .woocommerce-MyAccount-content .form-row .description::before {
	display: none;
}
.sz-account-member .woocommerce-MyAccount-content .is-invalid .description {
	display: none !important;
}
.sz-address-form__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 24px 0 0;
}

/* "Dane i hasło": the WooCommerce form in the same 640 px column as the address form */
.sz-account-member .woocommerce-EditAccountForm {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	max-width: 640px;
	margin-top: 22px;
}
.sz-account-member .woocommerce-EditAccountForm::before,
.sz-account-member .woocommerce-EditAccountForm::after,
.sz-account-member .woocommerce-EditAccountForm .clear {
	display: none;
}
.sz-account-member .woocommerce-EditAccountForm .form-row {
	grid-column: 1 / -1;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}
.sz-account-member .woocommerce-EditAccountForm .form-row-first {
	grid-column: 1;
}
.sz-account-member .woocommerce-EditAccountForm .form-row-last {
	grid-column: 2;
}
.sz-account-member .woocommerce-EditAccountForm fieldset {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 12px 0 0;
	padding: 20px 0 0;
	border: 0;
	border-top: 1px solid var(--sz-line);
}
.sz-account-member .woocommerce-MyAccount-content .woocommerce-EditAccountForm fieldset legend {
	float: left;
	width: 100%;
	margin: 0 0 4px;
	padding: 0;
	font-family: Poppins, sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}
.sz-account-member .woocommerce-EditAccountForm .sz-account-note {
	margin: -8px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sz-ink2);
}
.sz-account-member .woocommerce-EditAccountForm > p:last-of-type {
	grid-column: 1 / -1;
	margin: 8px 0 0;
}

/* Tablets and small laptops: a narrower menu; one order in one column (products, summary, addresses) */
@media (min-width: 768px) and (max-width: 1199px) {
	.sz-account-member .entry-content > .woocommerce {
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 40px;
	}
	.sz-order-layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "main" "side" "extra";
	}
	.sz-order-layout__side {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 16px 32px;
		align-items: start;
	}
	.sz-order-layout__side .sz-order-help {
		margin-top: 0;
	}
}

/* Phones: the menu as a scrolled row, everything in one column */
@media (max-width: 767px) {
	.sz-account-member .entry-content > .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
	.sz-account-member .woocommerce-MyAccount-navigation {
		margin: 0 -1em;
	}
	.sz-account-member .woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: 8px;
		padding: 0 1em 4px;
		overflow-x: auto;
		border: 0;
		scrollbar-width: none;
	}
	.sz-account-member .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
		display: none;
	}
	.sz-account-member .woocommerce-MyAccount-navigation ul li,
	.sz-account-member .woocommerce-MyAccount-navigation ul li:last-child {
		flex: none;
		border: 0;
	}
	.sz-account-member .woocommerce-MyAccount-navigation ul li a {
		padding: 8px 14px;
		border-radius: 99px;
		background: var(--sz-bg2);
		font-size: 13.5px;
		white-space: nowrap;
	}
	.sz-account-member .woocommerce-MyAccount-navigation ul li a::before {
		display: none;
	}
	.sz-account-member .woocommerce-MyAccount-navigation li.is-active a {
		background: var(--sz-navy);
		color: #fff;
	}
	.sz-account-member .sz-account-heading {
		font-size: 20px;
	}
	.sz-account-alert {
		display: block;
	}
	.sz-account-alert__actions {
		margin-top: 12px;
	}
	.sz-order-card {
		padding: 16px;
	}
	.sz-order-card__head .sz-order-badge {
		margin-left: 0;
	}
	.sz-order-card__body {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 12px;
	}
	.sz-order-card__actions {
		grid-column: 1 / -1;
		justify-content: stretch;
		min-width: 0;
	}
	.sz-account-member .sz-order-card__actions .button {
		flex: 1;
	}
	.sz-order-photo {
		--sz-photo: 48px;
	}
	.sz-address-cards,
	.sz-order-addresses {
		grid-template-columns: minmax(0, 1fr);
	}
	/* One order: the products, then the summary with its action, then the addresses */
	.sz-order-layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "main" "side" "extra";
	}
	/* Overview: the tiles as one list of rows, each row a link */
	.sz-account-tiles {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		border-top: 1px solid var(--sz-line);
	}
	.sz-account-member .sz-account-tiles a:not(.button) {
		gap: 2px;
		padding: 14px 0;
		border: 0;
		border-bottom: 1px solid var(--sz-line);
		border-radius: 0;
	}
	.sz-account-tiles__more {
		display: none;
	}
	.sz-account-tiles__text {
		padding-left: 28px;
		font-size: 13.5px;
		color: var(--sz-mute);
	}
	.sz-account-helpline {
		flex-direction: column;
		gap: 10px;
	}
	.sz-order-progress {
		padding: 16px 10px;
	}
	.sz-order-steps__name {
		font-size: 11.5px;
	}
	.sz-account-member .sz-address-form .form-row.sz-field-postcode {
		grid-column: span 3;
	}
	.sz-account-member .sz-address-form .form-row.sz-field-city {
		grid-column: span 3;
	}
}
