/* ==========================================================================
   Акаунт: меню в хедері, крок входу, кабінет
   ========================================================================== */

/* --- Дропдаун у хедері ---------------------------------------------------- */

.ts-account {
	position: relative;
}

.ts-account__name {
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-account__menu {
	position: absolute;
	z-index: var(--ts-z-dropdown);
	top: calc(100% + 4px);
	right: 0;
	width: 260px;
	padding: var(--ts-space-2) 0;
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
	box-shadow: var(--ts-shadow-lg);
}

.ts-account__menu[hidden] {
	display: none;
}

/* Місток до панелі, щоб курсор не «випадав» у проміжку. */
.ts-account__menu::before {
	content: "";
	position: absolute;
	top: -6px;
	right: 0;
	left: 0;
	height: 6px;
}

.ts-account__auth {
	padding: var(--ts-space-3) var(--ts-space-4);
	border-bottom: 1px solid var(--ts-color-border);
}

.ts-account__hint {
	margin: var(--ts-space-3) 0 var(--ts-space-2);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
	text-align: center;
}

.ts-account__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-account__link {
	display: flex;
	gap: var(--ts-space-3);
	align-items: center;
	padding: var(--ts-space-3) var(--ts-space-4);
	color: var(--ts-color-text);
	text-decoration: none;
}

/* Пункт меню — рядок зі своєю підсвіткою, підкреслення тут зайве. */
.ts-account__link:hover,
.ts-account__link:focus-visible {
	background: var(--ts-color-surface-hover);
	color: var(--ts-color-primary);
	text-decoration: none;
}

.ts-account__link .ts-icon {
	flex: 0 0 auto;
	color: var(--ts-color-muted);
}

.ts-account__foot {
	margin-top: var(--ts-space-2);
	padding-top: var(--ts-space-2);
	border-top: 1px solid var(--ts-color-border);
}

/* --- Крок входу в оформленні ---------------------------------------------- */

/*
 * Одна форма на екрані, друга — за посиланням під нею (як x-kom).
 * Тому колонка вузька: два поля не потребують ширини на пів сторінки.
 */
.ts-auth {
	max-width: 440px;
	margin: 0 auto;
}

.ts-auth__switch {
	margin: var(--ts-space-4) 0 0;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
	text-align: center;
}

/* --- «Ви увійшли» на кроці оформлення ------------------------------------- */

.ts-auth__card--signed {
	text-align: center;
}

.ts-auth__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--ts-space-3);
	background: var(--ts-color-primary-soft);
	border-radius: var(--ts-radius-full);
	color: var(--ts-color-primary);
}

.ts-auth__card--signed .ts-auth__title {
	margin-bottom: var(--ts-space-2);
}

.ts-auth__who {
	margin: 0 0 var(--ts-space-5);
	line-height: var(--ts-leading-snug);
}

.ts-auth__who strong {
	display: block;
	color: var(--ts-color-text-strong);
}

.ts-auth__who span {
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

/*
 * Без JS друга форма лишається видимою нижче: атрибут hidden знімає
 * :target, коли покупець перейшов за якорем.
 */
.ts-auth__card[hidden]:target {
	display: block;
}

.ts-auth__card {
	padding: var(--ts-space-5);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
}

.ts-auth__title {
	margin: 0 0 var(--ts-space-4);
	font-size: var(--ts-text-lg);
	font-weight: var(--ts-weight-semibold);
}

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

.ts-auth__link {
	font-size: var(--ts-text-sm);
}

.ts-auth__guest {
	max-width: 420px;
	margin: var(--ts-space-6) auto 0;
	text-align: center;
}

.ts-auth__note {
	margin: var(--ts-space-3) 0 0;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

/* Пояснення над формою — читається як текст, а не як підпис під кнопкою. */
.ts-auth__note--start {
	margin: 0 0 var(--ts-space-4);
	text-align: left;
}

/* Чекбокс «запам'ятати мене» і підказка під полем. */
.ts-check {
	display: inline-flex;
	gap: var(--ts-space-2);
	align-items: center;
	font-size: var(--ts-text-sm);
}

.ts-field__hint {
	display: block;
	margin-top: var(--ts-space-2);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

/* --- Кабінет: розкладка --------------------------------------------------- */

.ts-account-page {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--ts-space-6);
	align-items: start;
}

.ts-account-nav__list {
	margin: 0;
	padding: var(--ts-space-2);
	list-style: none;
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
}

.ts-account-nav__link {
	display: flex;
	gap: var(--ts-space-3);
	align-items: center;
	padding: var(--ts-space-3);
	border-radius: var(--ts-radius-md);
	color: var(--ts-color-text);
	text-decoration: none;
}

.ts-account-nav__link:hover,
.ts-account-nav__link:focus-visible {
	background: var(--ts-color-surface-hover);
	text-decoration: none;
}

.ts-account-nav__link .ts-icon {
	flex: 0 0 auto;
	color: var(--ts-color-muted);
}

.ts-account-nav__item.is-current .ts-account-nav__link {
	background: var(--ts-color-primary);
	color: #fff;
	font-weight: var(--ts-weight-semibold);
}

.ts-account-nav__item.is-current .ts-icon {
	color: currentColor;
}

/* --- Кабінет: огляд ------------------------------------------------------- */

.ts-account-hello {
	margin: 0 0 var(--ts-space-5);
	font-size: var(--ts-text-lg);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-account-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ts-space-4);
}

.ts-account-tile {
	display: flex;
	gap: var(--ts-space-3);
	padding: var(--ts-space-4);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
	color: inherit;
	text-decoration: none;
}

/* Плитка — картка, а не текстове посилання: підкреслення тут зайве. */
.ts-account-tile:hover,
.ts-account-tile:focus-visible {
	border-color: var(--ts-color-primary);
	box-shadow: var(--ts-shadow-sm);
	text-decoration: none;
}

.ts-account-tile__icon {
	flex: 0 0 auto;
	color: var(--ts-color-primary);
}

.ts-account-tile__label {
	display: block;
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-account-tile__text {
	display: block;
	margin-top: 2px;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

/* --- Кабінет: форми ------------------------------------------------------- */

.ts-account-intro {
	margin: 0 0 var(--ts-space-5);
	color: var(--ts-color-muted);
}

.ts-account-form__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--ts-space-4);
}

/* Поля на всю ширину: адреса й коментар у два стовпці не читаються. */
.ts-account-form__fields .form-row-wide,
.ts-account-form__fields #billing_address_1_field,
.ts-account-form__fields #billing_email_field {
	grid-column: 1 / -1;
}

/* --- Кабінет: адресна книга, секції за перевізником ------------------------ */

.ts-addr-sections {
	display: flex;
	flex-direction: column;
	gap: var(--ts-space-6);
	margin-bottom: var(--ts-space-6);
}

.ts-addr-section {
	padding: var(--ts-space-5);
	background: var(--ts-color-surface-sunken);
	border-radius: var(--ts-radius-xl);
}

.ts-addr-section__head {
	display: flex;
	gap: var(--ts-space-3);
	align-items: center;
	margin-bottom: var(--ts-space-4);
}

.ts-addr-section__logo {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.ts-addr-section__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--ts-color-primary-soft);
	border-radius: var(--ts-radius-full);
	color: var(--ts-color-primary);
}

.ts-addr-section__title {
	margin: 0;
	font-size: var(--ts-text-md);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-addr-section__note {
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

/* Плитки: три в ряд на широкому, одна на телефоні. */
.ts-addr-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--ts-space-3);
}

.ts-addr-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--ts-space-4);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
}

.ts-addr-card.is-default,
.ts-addr-card.is-editing {
	border-color: var(--ts-color-primary);
}

.ts-addr-card__badge {
	position: absolute;
	top: var(--ts-space-3);
	right: var(--ts-space-3);
	padding: 2px var(--ts-space-2);
	background: var(--ts-color-primary);
	border-radius: var(--ts-radius-full);
	font-size: var(--ts-text-2xs);
	color: #fff;
}

.ts-addr-card__label {
	margin: 0 0 2px;
	padding-right: var(--ts-space-8);
	font-size: var(--ts-text-base);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-addr-card__kind {
	margin: 0 0 var(--ts-space-3);
	font-size: var(--ts-text-2xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ts-color-faint);
}

.ts-addr-card__text {
	margin: 0 0 var(--ts-space-2);
	font-size: var(--ts-text-sm);
	line-height: var(--ts-leading-snug);
	color: var(--ts-color-text);
}

.ts-addr-card__person {
	margin: 0 0 var(--ts-space-4);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

/* Дії внизу картки, щоб плитки в ряду були однакові. */
.ts-addr-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-space-3);
	align-items: center;
	margin-top: auto;
	padding-top: var(--ts-space-3);
	border-top: 1px solid var(--ts-color-border);
}

/* Плитка «додати»: пунктир, щоб не сплутати зі збереженою адресою. */
.ts-addr-card--add {
	align-items: center;
	justify-content: center;
	gap: var(--ts-space-2);
	/* 120px — не нижче за сусідні плитки в ряду. */
	min-height: 120px;
	border-style: dashed;
	border-color: var(--ts-color-border-strong);
	color: var(--ts-color-primary);
	text-align: center;
	text-decoration: none;
}

.ts-addr-card--add:hover,
.ts-addr-card--add:focus-visible {
	border-color: var(--ts-color-primary);
	background: var(--ts-color-primary-soft);
	text-decoration: none;
}

.ts-addr-card__plus {
	font-size: var(--ts-text-2xl);
	line-height: 1;
}

.ts-addr-card__add-label {
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-medium);
}

/* --- Кабінет: адресна книга ----------------------------------------------- */

.ts-addresses {
	margin: 0 0 var(--ts-space-5);
	padding: 0;
	list-style: none;
}

.ts-addresses__item {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-space-3);
	align-items: flex-start;
	justify-content: space-between;
	padding: var(--ts-space-4);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
}

.ts-addresses__item + .ts-addresses__item {
	margin-top: var(--ts-space-3);
}

.ts-addresses__item.is-default {
	border-color: var(--ts-color-primary);
}

.ts-addresses__body {
	min-width: 0;
	flex: 1 1 260px;
}

.ts-addresses__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-space-2);
	align-items: center;
	margin-bottom: var(--ts-space-1);
}

.ts-addresses__label {
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-addresses__badge {
	padding: 2px var(--ts-space-2);
	background: var(--ts-color-primary);
	border-radius: var(--ts-radius-full);
	font-size: var(--ts-text-2xs);
	color: #fff;
}

.ts-addresses__text {
	margin: 0;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

.ts-addresses__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-space-3);
	align-items: center;
}

/* Кнопка-посилання: дія всередині форми, але виглядає як текст. */
.ts-addresses__link {
	padding: 0;
	background: none;
	border: 0;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-primary);
	cursor: pointer;
}

.ts-addresses__link:hover {
	text-decoration: underline;
}

.ts-addresses__link--danger {
	color: var(--ts-color-danger);
}

.ts-addresses__kind {
	padding: 2px var(--ts-space-2);
	background: var(--ts-color-surface-sunken);
	border-radius: var(--ts-radius-full);
	font-size: var(--ts-text-2xs);
	color: var(--ts-color-muted);
}

.ts-addresses__item.is-editing {
	border-color: var(--ts-color-primary);
	box-shadow: var(--ts-shadow-sm);
}

.ts-addresses__submit {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-space-4);
	align-items: center;
}

/* --- Вибір способу доставки у формі адреси -------------------------------- */

.ts-addr-kinds {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ts-space-3);
	margin: 0 0 var(--ts-space-5);
	padding: 0;
	border: 0;
}

.ts-addr-kinds__legend {
	margin-bottom: var(--ts-space-2);
	padding: 0;
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-medium);
	color: var(--ts-color-text);
}

.ts-addr-kinds__item {
	display: flex;
	gap: var(--ts-space-3);
	align-items: flex-start;
	/* 44px — мінімальна ціль дотику. */
	min-height: 44px;
	padding: var(--ts-space-3) var(--ts-space-4);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
	cursor: pointer;
}

.ts-addr-kinds__item:has(input:checked) {
	border-color: var(--ts-color-primary);
	box-shadow: inset 0 0 0 1px var(--ts-color-primary);
}

.ts-addr-kinds__name {
	display: block;
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-addr-kinds__note {
	display: block;
	margin-top: 2px;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

/* --- Адреса власного кур'єра ---------------------------------------------- */

.ts-addr-own__title {
	margin: 0 0 var(--ts-space-3);
	font-size: var(--ts-text-md);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

/* Недоступний кур'єр Нової пошти: видно, але не обрати. */
.ts-np__kind.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.ts-np__kind-note {
	display: block;
	margin-top: 2px;
	font-size: var(--ts-text-2xs);
	color: var(--ts-color-danger);
}

/* display вище перекриває атрибут hidden — ховаємо явно. */
.ts-np__kind-note[hidden] {
	display: none;
}

.ts-addresses__new {
	padding: var(--ts-space-4);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
}

.ts-addresses__new-toggle {
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
	cursor: pointer;
}

.ts-addresses__form {
	margin-top: var(--ts-space-4);
}

.ts-addresses__default {
	margin: var(--ts-space-3) 0;
}

.ts-account-empty-inline {
	margin: 0 0 var(--ts-space-5);
	padding: var(--ts-space-4);
	background: var(--ts-color-surface-sunken);
	border-radius: var(--ts-radius-lg);
	color: var(--ts-color-muted);
}

/* --- Checkout: вибір збереженої адреси ------------------------------------ */

.ts-addr-picker {
	margin-bottom: var(--ts-space-5);
}

.ts-addr-picker__title {
	margin: 0 0 var(--ts-space-3);
	font-size: var(--ts-text-md);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-addr-picker__list {
	display: flex;
	flex-direction: column;
	gap: var(--ts-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-addr-picker__label {
	display: flex;
	gap: var(--ts-space-3);
	align-items: flex-start;
	/* 44px — мінімальна ціль дотику. */
	min-height: 44px;
	padding: var(--ts-space-3) var(--ts-space-4);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
	cursor: pointer;
}

.ts-addr-picker__item:has(input:checked) .ts-addr-picker__label {
	border-color: var(--ts-color-primary);
	box-shadow: inset 0 0 0 1px var(--ts-color-primary);
}

.ts-addr-picker__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* Логотип перевізника: видно, що адреса саме Нової пошти. */
.ts-addr-picker__logo {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.ts-addr-picker__group[hidden] {
	display: none;
}

.ts-addr-picker__empty {
	margin: 0;
	padding: var(--ts-space-3) var(--ts-space-4);
	background: var(--ts-color-surface-sunken);
	border-radius: var(--ts-radius-lg);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

.ts-addr-picker__empty[hidden] {
	display: none;
}

.ts-addr-picker__name {
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-addr-picker__text {
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

/*
 * Обрана збережена адреса — форма Нової пошти зайва. Ховаємо класом:
 * атрибутом hidden керує скрипт самого модуля.
 */
.ts-np.is-addr-chosen {
	display: none;
}

/* --- Кабінет: налаштування акаунта ---------------------------------------- */

/*
 * Форму WooCommerce не переписуємо — вона робоча; лише даємо їй ту саму
 * сітку й відступи, що й решті кабінету.
 */
.ts-account-page__content .edit-account .form-row,
.ts-account-page__content .woocommerce-EditAccountForm .form-row {
	/* flex, а не inline-flex: у сітці форми поле має займати всю комірку. */
	display: flex;
	flex-direction: column;
	gap: var(--ts-space-2);
	margin: 0 0 var(--ts-space-4);
	padding: 0;
	width: auto;
}

/*
 * Поля цієї форми малює WooCommerce власними класами
 * (.woocommerce-Input), тож правила для .ts-input їх не дістають —
 * лишалась нативна сіра рамка без заокруглення.
 */
.ts-account-page__content .edit-account input[type="text"],
.ts-account-page__content .edit-account input[type="email"],
.ts-account-page__content .edit-account input[type="tel"],
.ts-account-page__content .edit-account input[type="password"] {
	width: 100%;
	min-height: 48px;
	padding: var(--ts-space-3);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border-strong);
	border-radius: var(--ts-radius-md);
	font-family: var(--ts-font-sans);
	font-size: var(--ts-text-base);
	color: var(--ts-color-text);
}

.ts-account-page__content .edit-account input:focus {
	outline: none;
	border-color: var(--ts-color-primary);
	box-shadow: var(--ts-shadow-focus);
}

/* Кнопка збереження — та сама, що й у решті кабінету. */
.ts-account-page__content .edit-account .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 var(--ts-space-5);
	background: var(--ts-color-primary);
	border: 0;
	border-radius: var(--ts-radius-md);
	font-family: var(--ts-font-sans);
	font-size: var(--ts-text-base);
	font-weight: var(--ts-weight-semibold);
	color: #fff;
	cursor: pointer;
}

.ts-account-page__content .edit-account .woocommerce-Button:hover {
	background: var(--ts-color-primary-hover);
}

.ts-account-page__content .edit-account fieldset {
	margin: var(--ts-space-5) 0 var(--ts-space-4);
	padding: var(--ts-space-4);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
}

.ts-account-page__content .edit-account legend {
	padding: 0 var(--ts-space-2);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-account-page__content .edit-account em {
	font-size: var(--ts-text-sm);
	font-style: normal;
	color: var(--ts-color-muted);
}

/* Поле пароля з кнопкою «показати». */
/*
 * Поле пароля з кнопкою «показати».
 *
 * Розмітку робить сам WooCommerce: його скрипт обгортає кожне поле
 * пароля в .password-input і додає туди .show-password-input. Ми лише
 * прибираємо його дефолтний вигляд і малюємо власну іконку.
 */
.password-input {
	position: relative;
	display: block;
}

/*
 * Місце під кнопку, щоб текст не заповз під неї. Селектор із типом
 * поля — інакше загальні правила для input перебивають цей padding.
 */
.password-input input[type="password"],
.password-input input[type="text"] {
	padding-right: 46px;
}

/*
 * Кнопка 44×44 — мінімальна ціль дотику, хоч іконка всередині 20px.
 * Псевдоелемент тут не підійшов би: він малює, але не ловить кліки за
 * межами боксу кнопки.
 */
.show-password-input {
	position: absolute;
	top: 50%;
	right: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	transform: translateY(-50%);
	background: none;
	border: 0;
	cursor: pointer;
}

.show-password-input::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: currentColor;
	color: var(--ts-color-muted);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Пароль видимий — око перекреслене, щоб стан читався без кольору. */
.show-password-input.display-password::before {
	color: var(--ts-color-primary);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

/*
 * 44px зона дотику навколо іконки: сама кнопка 24px, бо більша
 * візуально тиснула б на поле.
 */

/*
 * Ім'я і прізвище — поруч. Сітка на всю форму, бо між рядками WooCommerce
 * ставить <div class="clear">, і inline-block їх розносив по рядках.
 */
@media (min-width: 768px) {
	.ts-account-page__content .edit-account {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--ts-space-4);
	}

	/* Усе, крім пари «ім'я — прізвище», займає обидві колонки. */
	.ts-account-page__content .edit-account > *:not(.form-row-first):not(.form-row-last) {
		grid-column: 1 / -1;
	}
}

/* Порожні розділювачі WooCommerce у сітці лише додають відступів. */
.ts-account-page__content .edit-account .clear {
	display: none;
}

/* --- Кабінет: запити ------------------------------------------------------ */

.ts-leads {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-leads__item {
	padding: var(--ts-space-4);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
}

.ts-leads__item + .ts-leads__item {
	margin-top: var(--ts-space-3);
}

.ts-leads__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-space-2);
	align-items: baseline;
	justify-content: space-between;
}

.ts-leads__product {
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-leads__date,
.ts-leads__sku {
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

.ts-leads__sku {
	margin: var(--ts-space-2) 0 0;
}

.ts-leads__comment {
	margin: var(--ts-space-2) 0 0;
}

.ts-account-empty {
	padding: var(--ts-space-6);
	text-align: center;
}

/* --- Мобільний ------------------------------------------------------------ */

@media (max-width: 767px) {
	.ts-auth__card {
		padding: var(--ts-space-4);
	}

	/*
	 * Дропдаун при наведенні на телефоні не має сенсу: іконка веде
	 * одразу в кабінет, як і решта панелей у хедері.
	 */
	.ts-account__menu {
		display: none;
	}

	/* 44px — мінімальна ціль дотику. */
	.ts-account__link,
	.ts-account-nav__link {
		min-height: 44px;
	}

	/*
	 * 16px проти автозуму iOS при фокусі. Селектори з .edit-account
	 * специфічніші за загальні, тому дублюємо їх тут.
	 */
	.ts-auth .ts-input,
	.ts-account-page .ts-input,
	.ts-account-page input[type="text"],
	.ts-account-page input[type="email"],
	.ts-account-page input[type="tel"],
	.ts-account-page input[type="password"],
	.ts-account-page__content .edit-account input[type="text"],
	.ts-account-page__content .edit-account input[type="email"],
	.ts-account-page__content .edit-account input[type="tel"],
	.ts-account-page__content .edit-account input[type="password"] {
		font-size: 16px;
	}

	/* Навігація над вмістом: колонка 260px на телефоні не поміщається. */
	.ts-account-page {
		grid-template-columns: 1fr;
		gap: var(--ts-space-4);
	}

	.ts-account-tiles,
	.ts-account-form__fields,
	.ts-addr-kinds {
		grid-template-columns: 1fr;
	}
}

/* --- Обране ------------------------------------------------------------- */

.ts-wishlist {
	display: flex;
	flex-direction: column;
	gap: var(--ts-space-3);
}

.ts-wishlist__item {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	gap: var(--ts-space-4);
	align-items: center;
	padding: var(--ts-space-3);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
	background: var(--ts-color-surface);
}

.ts-wishlist__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--ts-radius-md);
}

.ts-wishlist__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.ts-wishlist__body {
	min-width: 0;
}

.ts-wishlist__title {
	display: block;
	margin-bottom: var(--ts-space-1);
	color: var(--ts-color-text-strong);
	font-weight: var(--ts-weight-medium);
	line-height: 1.35;
}

.ts-wishlist__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ts-space-3);
	font-size: var(--ts-text-xs);
	color: var(--ts-color-faint);
}

.ts-wishlist__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--ts-space-2);
	text-align: right;
}

.ts-wishlist__price {
	font-size: var(--ts-text-lg);
	font-weight: var(--ts-weight-bold);
	color: var(--ts-color-text-strong);
	white-space: nowrap;
}

.ts-wishlist__actions {
	display: flex;
	align-items: center;
	gap: var(--ts-space-3);
}

.ts-wishlist__remove {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-space-1);
	padding: var(--ts-space-1);
	border: 0;
	background: none;
	color: var(--ts-color-muted);
	font-size: var(--ts-text-sm);
	cursor: pointer;
}

.ts-wishlist__remove:hover {
	color: var(--ts-color-danger, #d63638);
}

.ts-wishlist__remove.is-on .ts-icon {
	fill: currentColor;
	color: var(--ts-color-danger, #d63638);
}

/*
 * На вузьких екранах ціна й кнопки переїжджають під назву: три
 * колонки на 360px перетворюються на стовпчик із однієї літери.
 */
@media (max-width: 599px) {
	.ts-wishlist__item {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	.ts-wishlist__aside {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		text-align: left;
	}
}

/* --- Замовлення: список ---------------------------------------------- */

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

.ts-order-card {
	display: grid;
	gap: var(--ts-space-3);
	padding: var(--ts-space-4);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
	transition: border-color var(--ts-duration-fast) var(--ts-ease);
}

.ts-order-card:hover {
	border-color: var(--ts-color-border-strong);
}

.ts-order-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ts-space-3);
}

.ts-order-card__number {
	display: block;
	font-size: var(--ts-text-md);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
}

.ts-order-card__number:hover {
	color: var(--ts-color-primary);
	text-decoration: none;
}

.ts-order-card__date {
	display: block;
	margin-top: 2px;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

/*
 * Мініатюри складу. Показуємо до чотирьох: далі рядок перетворюється
 * на стрічку, у якій нічого не розібрати, а «+N» читається одразу.
 */
.ts-order-card__items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ts-space-2);
}

.ts-order-card__thumb {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: var(--ts-space-1);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-md);
}

.ts-order-card__thumb img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.ts-order-card__more {
	display: grid;
	place-items: center;
	min-width: 56px;
	height: 56px;
	padding-inline: var(--ts-space-2);
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-muted);
	background: var(--ts-color-surface-sunken);
	border-radius: var(--ts-radius-md);
}

.ts-order-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ts-space-3);
	padding-top: var(--ts-space-3);
	border-top: 1px solid var(--ts-color-border);
}

.ts-order-card__count {
	display: block;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

.ts-order-card__total {
	display: block;
	font-size: var(--ts-text-lg);
	font-weight: var(--ts-weight-bold);
	color: var(--ts-color-text-strong);
}

.ts-order-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-space-2);
}

.ts-orders__pager {
	display: flex;
	justify-content: space-between;
	gap: var(--ts-space-3);
	margin-top: var(--ts-space-4);
}

/* --- Статус замовлення ------------------------------------------------ */

/*
 * Кольором відрізняємо лише те, що вимагає уваги: решта станів —
 * нейтральні. Інакше сторінка з трьома замовленнями світиться,
 * як гірлянда, і жоден статус не читається як важливий.
 */
.ts-order-status {
	flex: 0 0 auto;
	padding: 4px var(--ts-space-3);
	font-size: var(--ts-text-xs);
	font-weight: var(--ts-weight-semibold);
	line-height: 1.6;
	white-space: nowrap;
	color: var(--ts-color-muted);
	background: var(--ts-color-surface-sunken);
	border-radius: var(--ts-radius-full);
}

.ts-order-status--on-hold,
.ts-order-status--pending {
	color: var(--ts-color-warning);
	background: var(--ts-color-warning-soft);
}

.ts-order-status--processing {
	color: var(--ts-color-info);
	background: var(--ts-color-info-soft);
}

.ts-order-status--completed {
	color: var(--ts-color-success);
	background: var(--ts-color-success-soft);
}

.ts-order-status--cancelled,
.ts-order-status--failed {
	color: var(--ts-color-danger);
	background: var(--ts-color-danger-soft);
}

/* --- Замовлення: одне ------------------------------------------------- */

/*
 * Номер замовлення — у заголовку сторінки (page.php), тут лише дата
 * й статус, тому вирівнюємо їх по одній лінії.
 */
.ts-order__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ts-space-3);
	margin-bottom: var(--ts-space-4);
}

.ts-order__meta {
	margin: 0;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

.ts-order__hint {
	margin: 0 0 var(--ts-space-5);
	padding: var(--ts-space-3) var(--ts-space-4);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-text);
	background: var(--ts-color-surface-sunken);
	border-radius: var(--ts-radius-md);
}

.ts-order__section {
	margin-bottom: var(--ts-space-6);
}

.ts-order__subtitle {
	margin: 0 0 var(--ts-space-3);
	font-size: var(--ts-text-md);
	font-weight: var(--ts-weight-semibold);
}

.ts-order-items {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
	overflow: hidden;
}

.ts-order-item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--ts-space-3);
	padding: var(--ts-space-3) var(--ts-space-4);
	background: var(--ts-color-surface);
}

.ts-order-item + .ts-order-item {
	border-top: 1px solid var(--ts-color-border);
}

.ts-order-item__media {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
}

.ts-order-item__media img {
	max-width: 100%;
	max-height: 64px;
	object-fit: contain;
}

.ts-order-item__name {
	display: block;
	font-size: var(--ts-text-base);
	color: var(--ts-color-text-strong);
}

a.ts-order-item__name:hover {
	color: var(--ts-color-primary);
	text-decoration: none;
}

.ts-order-item__sku {
	display: block;
	margin-top: 2px;
	font-size: var(--ts-text-xs);
	color: var(--ts-color-faint);
}

.ts-order-item__qty {
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
	white-space: nowrap;
}

.ts-order-item__price {
	font-weight: var(--ts-weight-semibold);
	white-space: nowrap;
}

.ts-order-totals {
	display: grid;
	gap: var(--ts-space-2);
	margin: var(--ts-space-4) 0 0 auto;
	max-width: 360px;
}

.ts-order-totals__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ts-space-4);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

.ts-order-totals__row dt,
.ts-order-totals__row dd {
	margin: 0;
}

.ts-order-totals__row.is-total {
	padding-top: var(--ts-space-2);
	border-top: 1px solid var(--ts-color-border);
	font-size: var(--ts-text-md);
	color: var(--ts-color-text-strong);
}

.ts-order-totals__row.is-total dd {
	font-size: var(--ts-text-lg);
	font-weight: var(--ts-weight-bold);
}

/* Дрібний підпис «Нова пошта» біля рядка доставки. */
.ts-order-totals .shipped_via {
	display: block;
	font-size: var(--ts-text-xs);
	color: var(--ts-color-faint);
}

.ts-order-customer {
	display: grid;
	gap: var(--ts-space-4);
	padding: var(--ts-space-4);
	background: var(--ts-color-surface-sunken);
	border-radius: var(--ts-radius-lg);
}

.ts-order-customer__address {
	margin: 0;
	font-style: normal;
	line-height: var(--ts-leading-relaxed);
}

.ts-order-customer__contacts {
	display: grid;
	gap: var(--ts-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-order-customer__contacts li {
	display: flex;
	align-items: center;
	gap: var(--ts-space-2);
	font-size: var(--ts-text-sm);
}

.ts-order-customer__contacts .ts-icon {
	flex: 0 0 auto;
	color: var(--ts-color-faint);
}

.ts-order__note {
	margin: 0;
	padding: var(--ts-space-3) var(--ts-space-4);
	background: var(--ts-color-surface-sunken);
	border-radius: var(--ts-radius-md);
}

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

.ts-order-note {
	padding-left: var(--ts-space-4);
	border-left: 2px solid var(--ts-color-border);
}

.ts-order-note__date {
	display: block;
	font-size: var(--ts-text-xs);
	color: var(--ts-color-faint);
}

.ts-order-note__text p {
	margin: var(--ts-space-1) 0 0;
	font-size: var(--ts-text-sm);
}

.ts-order__back {
	margin: var(--ts-space-6) 0 0;
}

/* --- Порожні стани в кабінеті ----------------------------------------- */

.ts-empty__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto var(--ts-space-4);
	color: var(--ts-color-faint);
	background: var(--ts-color-surface-sunken);
	border-radius: var(--ts-radius-full);
}

.ts-empty__action {
	margin-top: var(--ts-space-5);
}

/* Лічильник обраного в меню акаунта. */
.ts-account__count {
	margin-left: auto;
	padding: 1px var(--ts-space-2);
	font-size: var(--ts-text-2xs);
	font-weight: var(--ts-weight-bold);
	line-height: 1.7;
	color: var(--ts-color-primary);
	background: var(--ts-color-primary-soft);
	border-radius: var(--ts-radius-full);
}

.ts-account__count[hidden] {
	display: none;
}

@media (max-width: 600px) {
	/*
	 * На телефоні ціна переїжджає під назву: чотири колонки в 320px
	 * стискають назву товара до двох слів на рядок.
	 */
	.ts-order-item {
		grid-template-columns: 56px minmax(0, 1fr);
		row-gap: var(--ts-space-2);
	}

	.ts-order-item__media {
		width: 56px;
		height: 56px;
	}

	.ts-order-item__qty,
	.ts-order-item__price {
		grid-column: 2;
	}

	.ts-order-item__qty {
		grid-row: 2;
	}

	.ts-order-item__price {
		grid-row: 3;
	}

	.ts-order-totals {
		max-width: none;
	}

	.ts-order-card__foot {
		flex-direction: column;
		align-items: stretch;
	}

	.ts-order-card__actions .ts-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}