/*
 * kosmet — стили для страниц WooCommerce «Личный кабинет»
 *
 * Файл добавлен в итерации 3:
 *   - фикс вёрстки /my-account/orders/ (налезание колонок);
 *   - сброс «прилипающего» вложенного <header> на /my-account/edit-address/.
 *
 * Подключается через functions.php на всех страницах — правила защищены
 * префиксом .woocommerce* и не работают вне WooCommerce.
 */

/* =========================================================================
 * 0. Сброс «убегающего» вложенного <header>.
 *
 * В assets/css/style.css темы стоит правило:
 *   body.sticky-header header { position: fixed; top: 0; width: 100%; ... }
 * Селектор не ограничен только шапкой сайта, поэтому любой вложенный
 * <header> (WooCommerce использует его в блоках адресов, в статьях)
 * тоже становится fixed и прилипает к верху экрана при скролле, перекрывая
 * основную шапку.
 *
 * Возвращаем всем вложенным <header>-ам обычный поток.
 * ========================================================================= */

.woocommerce header,
.woocommerce-Address header,
.woocommerce-Address-title,
.woocommerce-order-details header,
.woocommerce-MyAccount-content header,
article > header,
body.sticky-header .woocommerce header,
body.sticky-header .woocommerce-Address header,
body.sticky-header .woocommerce-Address-title,
body.sticky-header .woocommerce-order-details header,
body.sticky-header .woocommerce-MyAccount-content header,
body.sticky-header article > header {
	position: static !important;
	top: auto !important;
	width: auto !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border-bottom: 0 !important;
	z-index: auto !important;
	padding: 0 !important;
	margin: 0 0 12px 0 !important;
}

/* Внутри вложенного <header> заголовок и ссылка «Изменить» — обычные inline,
   размер шрифта близок к основному тексту, чтобы не выделяться масштабом. */
.woocommerce-Address-title,
.woocommerce-Address-title h3 {
	font-size: 1rem !important;
	line-height: 1.4 !important;
	font-family: inherit !important;
}

.woocommerce-Address-title h3 {
	display: inline-block;
	margin: 0 12px 0 0 !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.woocommerce-Address-title a,
.woocommerce-Address-title a.edit {
	display: inline-block;
	font-size: 0.9rem;
	font-weight: 400;
	text-decoration: underline;
	vertical-align: baseline;
}

/* =========================================================================
 * 1. Layout /my-account/ — левое меню + правая колонка через grid.
 *    Storefront использует float, из-за чего при разной высоте секций
 *    контент налезает на меню.
 * ========================================================================= */

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: minmax(180px, 220px) 1fr;
	gap: 32px;
	align-items: start;
	overflow: visible;
}

.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
	display: none !important;    /* убираем storefront clearfix, он ломает grid */
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;      /* сбрасываем storefront float */
	width: auto !important;
	margin: 0 !important;
}

/* Меню */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.woocommerce-MyAccount-navigation ul li {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 12px 8px;
	text-decoration: none;
	color: inherit;
}

.woocommerce-MyAccount-navigation ul li.is-active a {
	font-weight: 600;
}

/* =========================================================================
 * 2. Таблица заказов — раньше ячейки не имели паддингов, из-за чего
 *    «Итого» и «Действия» перекрывались.
 * ========================================================================= */

.woocommerce-orders-table,
table.my_account_orders,
table.shop_table {
	width: 100%;
	border-collapse: collapse;
	table-layout: auto;
	margin: 0 0 24px 0;
	font-size: 0.95rem;
}

.woocommerce-orders-table thead th,
table.my_account_orders thead th,
table.shop_table thead th {
	padding: 12px 14px;
	text-align: left;
	font-weight: 600;
	background: #f6f6f6;
	border-bottom: 2px solid rgba(0, 0, 0, 0.1);
	white-space: nowrap;
}

.woocommerce-orders-table tbody td,
table.my_account_orders tbody td,
table.shop_table tbody td {
	padding: 12px 14px;
	vertical-align: middle;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	background: transparent;
}

.woocommerce-orders-table tbody tr:hover,
table.my_account_orders tbody tr:hover {
	background: rgba(0, 0, 0, 0.02);
}

/* Итого — цифра справа, без разрыва между суммой и «руб.» */
.woocommerce-orders-table__cell-order-total,
td.order-total {
	text-align: right;
	white-space: nowrap;
}

/* Статус */
.woocommerce-orders-table__cell-order-status,
td.order-status {
	white-space: nowrap;
}

/* Действия (кнопки) — справа, кнопки с расстоянием и переносом */
.woocommerce-orders-table__cell-order-actions,
td.order-actions {
	text-align: right;
	white-space: nowrap;
}

.woocommerce-orders-table__cell-order-actions .button,
td.order-actions .button {
	display: inline-block;
	margin: 2px 0 2px 6px;
	padding: 6px 12px;
	font-size: 0.85rem;
	line-height: 1.2;
	white-space: nowrap;
	vertical-align: middle;
}

/* Номер заказа */
.woocommerce-orders-table__cell-order-number,
td.order-number {
	white-space: nowrap;
	font-weight: 600;
}

.woocommerce-orders-table__cell-order-number a,
td.order-number a {
	text-decoration: none;
}

/* Дата */
.woocommerce-orders-table__cell-order-date,
td.order-date {
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * 2b. Отмена глобального «хака» валюты внутри /my-account/.
 *
 * В assets/css/style.css темы стоит:
 *   .woocommerce-Price-currencySymbol { display:inline-block; visibility:hidden; width:2.5rem; position:relative }
 *   .woocommerce-Price-currencySymbol::before { content:'руб.'; visibility:visible; position:absolute }
 *
 * Хак прячет оригинальный «руб.» и вставляет свой через ::before абсолютным
 * позиционированием. Из-за width:2.5rem внутри строки «9 100 руб. на N товаров»
 * появляется зазор между числом и «руб.», а затем ещё зазор перед «на N товаров»,
 * из-за чего визуально сумма «расползается» на две колонки.
 *
 * На /my-account/ возвращаем нормальный inline-рендер: WooCommerce на русской
 * локали и так выдаёт «руб.» правильно, хак не нужен.
 * ------------------------------------------------------------------------- */

.woocommerce-account .woocommerce-Price-currencySymbol {
	display: inline;
	visibility: visible;
	width: auto;
	position: static;
	margin-left: 2px;
}

.woocommerce-account .woocommerce-Price-currencySymbol::before {
	content: none;
}

/* Сумма и подпись «на N товаров» — плотно, без разрывов внутри слов */
.woocommerce-orders-table__cell-order-total,
td.order-total {
	white-space: normal;      /* разрешаем «на 3 товара» переноситься на след. строку в узкой ячейке */
	line-height: 1.35;
}

.woocommerce-orders-table__cell-order-total .woocommerce-Price-amount,
td.order-total .woocommerce-Price-amount {
	white-space: nowrap;      /* но сама сумма «9 100 руб.» — одним куском */
	font-weight: 600;
}

/* =========================================================================
 * 3. Мобильная адаптация — таблица переносится в вертикальный список.
 *    Storefront даёт `.shop_table_responsive` только в мобильном breakpoint,
 *    но `<= 768px` не всегда триггерится корректно, если у темы свои media.
 *    Дублируем явно.
 * ========================================================================= */

@media screen and (max-width: 768px) {
	.woocommerce-account .woocommerce {
		display: block;              /* меню сверху, контент под ним */
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 24px !important;
	}

	.woocommerce-orders-table thead,
	table.my_account_orders thead,
	table.shop_table_responsive thead {
		display: none;
	}

	.woocommerce-orders-table,
	table.my_account_orders,
	table.shop_table_responsive {
		display: block;
	}

	.woocommerce-orders-table tbody,
	table.my_account_orders tbody,
	table.shop_table_responsive tbody {
		display: block;
	}

	.woocommerce-orders-table tbody tr,
	table.my_account_orders tbody tr,
	table.shop_table_responsive tbody tr {
		display: block;
		margin-bottom: 16px;
		border: 1px solid rgba(0, 0, 0, 0.12);
		border-radius: 4px;
		padding: 8px 0;
		background: #fff;
	}

	.woocommerce-orders-table tbody td,
	table.my_account_orders tbody td,
	table.shop_table_responsive tbody td {
		display: block;
		text-align: right;
		padding: 8px 12px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		white-space: normal;
	}

	.woocommerce-orders-table tbody td:last-child,
	table.my_account_orders tbody td:last-child,
	table.shop_table_responsive tbody td:last-child {
		border-bottom: 0;
	}

	/* Ярлык колонки перед значением — «Заказ:», «Дата:», «Статус:» и т.д. */
	.woocommerce-orders-table tbody td::before,
	table.my_account_orders tbody td::before,
	table.shop_table_responsive tbody td::before {
		content: attr(data-title) ": ";
		float: left;
		font-weight: 600;
		text-align: left;
		padding-right: 8px;
	}

	/* У ячейки Действия не нужен label — там только кнопки */
	.woocommerce-orders-table__cell-order-actions::before,
	td.order-actions::before {
		display: none !important;
	}

	.woocommerce-orders-table__cell-order-actions,
	td.order-actions {
		text-align: center;
	}

	.woocommerce-orders-table__cell-order-actions .button,
	td.order-actions .button {
		display: inline-block;
		margin: 4px;
	}
}

/* =========================================================================
 * 4. Прочие блоки my-account: сообщения WooCommerce, страница профиля,
 *    страница адресов.
 * ========================================================================= */

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	margin-top: 0;
	margin-bottom: 16px;
}

.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-error {
	padding: 12px 16px;
	margin-bottom: 16px;
	border-radius: 4px;
	list-style: none;
}

/* Страница отдельного заказа — таблица товаров */
.woocommerce-account .woocommerce-order-details table.shop_table {
	margin-top: 16px;
}

/* Страница /my-account/edit-address/ — два адреса в 2 колонки */
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .u-columns.col2-set.addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 16px;
}

.woocommerce-account .woocommerce-Address {
	padding: 16px 20px;
	background: #fafafa;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 4px;
}

.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	line-height: 1.6;
	margin: 0;
}

@media screen and (max-width: 768px) {
	.woocommerce-account .woocommerce-Addresses,
	.woocommerce-account .u-columns.col2-set.addresses {
		grid-template-columns: 1fr;   /* на мобильном — в столбик */
	}
}

/* Пагинация под таблицей заказов */
.woocommerce-account .woocommerce-pagination {
	margin: 16px 0;
	text-align: center;
}

.woocommerce-account .woocommerce-pagination ul {
	display: inline-flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-pagination ul li a,
.woocommerce-account .woocommerce-pagination ul li span {
	display: inline-block;
	padding: 6px 10px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 3px;
	text-decoration: none;
}