/**
 * ProfHairClub Account — Styles.
 *
 * Extends the existing ProfHairClub design system (CSS variables from style.css).
 * Production-ready: mobile-first, prefers-reduced-motion, WCAG touch targets.
 */

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */

.phc-account {
	--phca-accent: var(--phc-yellow-deep, #b98e05);
	--phca-accent-bg: var(--phc-yellow-wash, #fbf0c8);
	--phca-accent-light: rgba(185, 142, 5, 0.08);
	--phca-text: var(--phc-ink, #14130f);
	--phca-text-dim: var(--phc-stone, #8c887c);
	--phca-border: rgba(20, 19, 15, 0.08);
	--phca-surface: var(--phc-mist, #e6e2d4);
	--phca-white: var(--phc-white, #ffffff);
	--phca-radius: var(--phc-radius-m, 10px);
	--phca-radius-sm: var(--phc-radius-s, 4px);
	--phca-transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	--phca-sidebar-w: 280px;

	display: grid;
	grid-template-columns: var(--phca-sidebar-w) 1fr;
	gap: 60px;
	max-width: 1200px;
	margin: 60px auto;
	padding: 0 30px;
	align-items: start;
}

/* ------------------------------------------------------------------ */
/* Sidebar                                                             */
/* ------------------------------------------------------------------ */

.phc-account__sidebar {
	position: sticky;
	top: 120px;
}

.phc-account__user {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 30px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--phca-border);
}

.phc-account__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--phca-text);
	color: var(--phca-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--phc-font-display, 'Lora', serif);
	font-size: 18px;
	flex-shrink: 0;
}

.phc-account__user-name {
	display: block;
	font-family: var(--phc-font-display, 'Lora', serif);
	font-size: 16px;
	color: var(--phca-text);
}

.phc-account__user-email {
	display: block;
	font-size: 12px;
	color: var(--phca-text-dim);
	margin-top: 2px;
}

/* Nav links */
.phc-account__menu {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.phc-account__link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border-radius: var(--phca-radius-sm);
	font-size: 14px;
	font-weight: 500;
	color: var(--phca-text-dim);
	text-decoration: none;
	transition: var(--phca-transition);
}

.phc-account__link:hover {
	color: var(--phca-text);
	background: var(--phca-accent-light);
}

.phc-account__link.is-active {
	color: var(--phca-accent);
	background: var(--phca-accent-light);
	font-weight: 600;
}

.phc-account__svg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.phc-account__svg svg {
	width: 100%;
	height: 100%;
}

/* ------------------------------------------------------------------ */
/* Content area                                                        */
/* ------------------------------------------------------------------ */

.phc-account__content {
	min-height: 60vh;
}

#account-content.is-entering {
	animation: profhairclubFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#account-content.is-leaving {
	animation: profhairclubFadeOut 0.2s ease forwards;
}

@keyframes profhairclubFadeIn {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes profhairclubFadeOut {
	from { opacity: 1; }
	to   { opacity: 0; }
}

/* ------------------------------------------------------------------ */
/* Section (shared wrapper)                                             */
/* ------------------------------------------------------------------ */

.phc-account__section {
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
}

.phc-account__section-head {
	margin-bottom: 40px;
}

.phc-account__title {
	font-family: var(--phc-font-display, 'Lora', serif);
	font-size: clamp(2rem, 4vw, 2.8rem);
	font-weight: 400;
	color: var(--phca-text);
	margin: 0 0 8px;
	line-height: 1.1;
}

.phc-account__subtitle {
	font-size: 14px;
	color: var(--phca-text-dim);
	margin: 0;
}

.phc-account__heading {
	font-family: var(--phc-font-display, 'Lora', serif);
	font-size: 22px;
	font-weight: 400;
	color: var(--phca-text);
	margin: 0 0 24px;
}

/* ------------------------------------------------------------------ */
/* Back link                                                           */
/* ------------------------------------------------------------------ */

.phc-account__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--phca-text-dim);
	text-decoration: none;
	margin-bottom: 30px;
	transition: var(--phca-transition);
}

.phc-account__back:hover {
	color: var(--phca-accent);
}

.phc-account__back .phc-account__svg svg {
	width: 16px;
	height: 16px;
	transform: rotate(180deg);
}

/* ------------------------------------------------------------------ */
/* Greeting                                                            */
/* ------------------------------------------------------------------ */

.phc-account__greeting {
	margin-bottom: 50px;
}

/* ------------------------------------------------------------------ */
/* Stats cards                                                         */
/* ------------------------------------------------------------------ */

.phc-account__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 50px;
}

.phc-account__stat-card {
	background: var(--phca-surface);
	border-radius: var(--phca-radius);
	padding: 28px 24px;
	text-align: center;
	transition: var(--phca-transition);
}

.phc-account__stat-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 30px rgba(20, 19, 15, 0.08);
}

.phc-account__stat-value {
	display: block;
	font-family: var(--phc-font-display, 'Lora', serif);
	font-size: 26px;
	color: var(--phca-text);
	margin-bottom: 6px;
	line-height: 1.2;
}

/* Long text values (category names, dates) — readable, no overflow. */
.phc-account__stat-value--small {
	font-size: 16px;
	font-family: var(--phc-font-sans, 'Manrope', sans-serif);
	font-weight: 600;
	word-break: break-word;
}

.phc-account__stat-label {
	display: block;
	font-size: 12px;
	color: var(--phca-text-dim);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* ------------------------------------------------------------------ */
/* Order badge                                                         */
/* ------------------------------------------------------------------ */

.phc-order-badge {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 50px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	background: var(--phca-surface);
	color: var(--phca-text-dim);
}

.phc-order-badge--completed,
.phc-order-badge--wc-completed {
	background: #e8f5e9;
	color: #2e7d32;
}

.phc-order-badge--processing,
.phc-order-badge--wc-processing {
	background: var(--phca-accent-bg);
	color: var(--phca-accent);
}

.phc-order-badge--on-hold,
.phc-order-badge--wc-on-hold {
	background: #fff3e0;
	color: #e65100;
}

.phc-order-badge--cancelled,
.phc-order-badge--wc-cancelled,
.phc-order-badge--failed,
.phc-order-badge--wc-failed,
.phc-order-badge--refunded,
.phc-order-badge--wc-refunded {
	background: #fce4ec;
	color: #c62828;
}

.phc-order-badge--ready-for-pickup,
.phc-order-badge--wc-ready-for-pickup {
	background: #e3f2fd;
	color: #1565c0;
}

.phc-order-badge--shipped,
.phc-order-badge--wc-shipped {
	background: #e0f7fa;
	color: #00838f;
}

/* ------------------------------------------------------------------ */
/* Last order                                                          */
/* ------------------------------------------------------------------ */

.phc-account__last-order {
	background: var(--phca-surface);
	border-radius: var(--phca-radius);
	padding: 32px;
	margin-bottom: 50px;
}

.phc-account__last-order-body {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
}

.phc-account__last-order-info {
	flex: 1;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.phc-account__meta {
	font-size: 13px;
	color: var(--phca-text-dim);
}

.phc-account__last-order-items {
	display: flex;
	gap: 10px;
}

.phc-account__thumb {
	width: 56px;
	height: 56px;
	border-radius: var(--phca-radius-sm);
	overflow: hidden;
	flex-shrink: 0;
	background: var(--phca-surface);
}

.phc-account__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.phc-account__thumb--more {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--phca-text-dim);
	background: var(--phca-surface);
	border: 1px dashed var(--phca-border);
}

.phc-account__last-order-footer {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 20px;
	margin-top: 20px;
	border-top: 1px solid var(--phca-border);
}

.phc-account__price {
	font-family: var(--phc-font-display, 'Lora', serif);
	font-size: 20px;
	color: var(--phca-text);
}

.phc-account__last-order-actions {
	display: flex;
	gap: 10px;
}

/* ------------------------------------------------------------------ */
/* Timeline                                                            */
/* ------------------------------------------------------------------ */

.phc-timeline {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
}

.phc-timeline::before {
	content: '';
	position: absolute;
	left: 11px;
	top: 20px;
	bottom: 20px;
	width: 2px;
	background: var(--phca-border);
}

.phc-timeline__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	position: relative;
}

.phc-timeline__dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--phca-surface);
	border: 2px solid var(--phca-border);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	transition: var(--phca-transition);
}

.phc-timeline__dot svg {
	width: 12px;
	height: 12px;
}

.phc-timeline__label {
	font-size: 14px;
	color: var(--phca-text-dim);
	transition: var(--phca-transition);
}

.phc-timeline__item.is-done .phc-timeline__dot {
	background: var(--phca-accent);
	border-color: var(--phca-accent);
}

.phc-timeline__item.is-done .phc-timeline__dot svg {
	stroke: #fff;
}

.phc-timeline__item.is-done .phc-timeline__label {
	color: var(--phca-text);
}

.phc-timeline__item.is-current .phc-timeline__dot {
	border-color: var(--phca-accent);
	box-shadow: 0 0 0 4px var(--phca-accent-light);
}

.phc-timeline__item.is-current .phc-timeline__label {
	color: var(--phca-accent);
	font-weight: 600;
}

.phc-account__timeline-cancelled {
	font-size: 14px;
	color: #c62828;
	font-weight: 500;
	padding: 12px 0;
}

/* ------------------------------------------------------------------ */
/* Discount banner (скидка 5% за авторизацию)                          */
/* ------------------------------------------------------------------ */

.phc-account__discount-banner {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	background: var(--phca-text);
	color: var(--phca-white);
	border-radius: var(--phca-radius);
	padding: 36px;
	margin-bottom: 50px;
	position: relative;
	overflow: hidden;
}

.phc-account__discount-banner::before {
	content: '';
	position: absolute;
	top: -40%;
	right: -20%;
	width: 60%;
	height: 140%;
	background: radial-gradient(circle, var(--phca-accent) 0%, transparent 70%);
	opacity: 0.25;
	pointer-events: none;
}

.phc-account__discount-banner-icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--phca-accent);
	color: var(--phca-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--phc-font-display, 'Lora', serif);
	font-size: 24px;
	position: relative;
	z-index: 1;
}

.phc-account__discount-banner-body {
	position: relative;
	z-index: 1;
}

.phc-account__discount-banner-eyebrow {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--phca-accent-bg);
	margin-bottom: 8px;
}

.phc-account__discount-banner-title {
	font-family: var(--phc-font-display, 'Lora', serif);
	font-size: 24px;
	font-weight: 400;
	margin: 0 0 8px;
	color: var(--phca-white);
}

.phc-account__discount-banner-text {
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 767px) {
	.phc-account__discount-banner {
		flex-direction: column;
		padding: 28px;
	}
}

/* ------------------------------------------------------------------ */
/* Free samples banner (заявка на сбор пробников)                      */
/* ------------------------------------------------------------------ */

.phc-account__samples-banner {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	background: var(--phca-accent-bg);
	border: 1px solid var(--phca-border);
	border-radius: var(--phca-radius);
	padding: 36px;
	margin-bottom: 50px;
	min-width: 0;
}

.phc-account__samples-banner-body {
	/* Flex items default to min-width: auto, i.e. never narrower than their
	   content's own min-content size.phc-samples-request's label is far
	   longer than this project's other button labels ("Сохранить",
	   "Подробнее"...) and the shared .phc-account-btn sets
	   white-space: nowrap, so without this the button's one-line width
	   became the floor for this whole banner — and for its grid/flex
	   ancestors up to .phc-account__content — overflowing the viewport on
	   every mobile width. Same class of bug as .phc-product-top's
	   min-width: 0 fix on the theme side. */
	min-width: 0;
	flex: 1 1 auto;
}

.phc-account__samples-banner-icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--phca-white);
	color: var(--phca-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.phc-account__samples-banner-icon .phc-account__svg {
	width: 26px;
	height: 26px;
}

.phc-account__samples-banner-eyebrow {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--phca-accent);
	margin-bottom: 8px;
}

.phc-account__samples-banner-title {
	font-family: var(--phc-font-display, 'Lora', serif);
	font-size: 24px;
	font-weight: 400;
	margin: 0 0 8px;
	color: var(--phca-text);
}

.phc-account__samples-banner-text {
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 20px;
	color: var(--phca-text-dim);
	max-width: 52ch;
}

.phc-samples-request {
	white-space: normal;
	max-width: 100%;
	text-align: center;
}

.phc-samples-request .phc-account-btn__label {
	white-space: normal;
}

.phc-samples-cooldown[disabled],
.phc-samples-locked[disabled] {
	opacity: 1;
	cursor: default;
	pointer-events: none;
	white-space: normal;
	max-width: 100%;
	text-align: center;
}

.phc-samples-cooldown__label {
	white-space: normal;
}

.phc-samples-cooldown[disabled] {
	border-color: var(--phca-accent) !important;
	color: var(--phca-accent) !important;
}

.phc-samples-locked[disabled] {
	border-color: var(--phca-border) !important;
	color: var(--phca-text-dim) !important;
}

.phc-samples-cooldown__time {
	font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
	.phc-account__samples-banner {
		flex-direction: column;
		padding: 28px;
	}
}

/* ------------------------------------------------------------------ */
/* Toast fallback                                                       */
/*                                                                      */
/* account.js's toast() reuses the site-wide window.showToast() from    */
/* profhairclub-cart-motion when it's loaded, and falls back to its own */
/* #phc-toasts/.phc-toast markup otherwise. That plugin only enqueues   */
/* on shop/product/cart pages, never on the account page — so on this   */
/* page the fallback is always what actually renders, and it needs its */
/* own styles here rather than relying on that plugin's CSS.            */
/*                                                                      */
/* NOTE: appended to document.body, a sibling of .phc-account, so it    */
/* cannot see that selector's local --phca-* aliases — uses the theme's */
/* global tokens directly, same fallback pattern as those aliases.      */
/* ------------------------------------------------------------------ */

#phc-toasts {
	position: fixed;
	top: 24px;
	right: 24px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}

.phc-toast {
	background: var(--phc-ink, #14130f);
	color: var(--phc-white, #ffffff);
	padding: 14px 20px;
	border-radius: var(--phc-radius-s, 4px);
	font-family: var(--phc-font-sans, 'Manrope', sans-serif);
	font-size: 13px;
	line-height: 1.4;
	max-width: 320px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.phc-toast.show {
	opacity: 1;
	transform: translateY(0);
}

.phc-toast.error {
	background: var(--phc-danger, #c0392b);
}

@media (max-width: 480px) {
	#phc-toasts {
		top: 16px;
		left: 16px;
		right: 16px;
	}

	.phc-toast {
		max-width: none;
	}
}

/* ------------------------------------------------------------------ */
/* Quick actions                                                       */
/* ------------------------------------------------------------------ */

.phc-account__quick-actions,
.phc-account__menu-actions {
	margin-bottom: 50px;
}

.phc-account__actions-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.phc-account__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 28px 20px;
	background: var(--phca-surface);
	border-radius: var(--phca-radius);
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	border: none;
	transition: var(--phca-transition);
	font-family: inherit;
	width: 100%;
}

.phc-account__action:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 30px rgba(20, 19, 15, 0.08);
}

/* Highlight the currently active section in the menu. */
.phc-account__action.is-active {
	background: var(--phca-accent-light);
}

.phc-account__action.is-active .phc-account__action-label {
	color: var(--phca-accent);
	font-weight: 600;
}

.phc-account__action.is-active .phc-account__action-icon .phc-account__svg {
	color: var(--phca-accent);
}

.phc-account__action-icon {
	width: 32px;
	height: 32px;
}

.phc-account__action-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--phca-text);
}

/* ------------------------------------------------------------------ */
/* "Меню аккаунта" — второй Док, всплывающий над основным.             */
/* Заказы / Данные аккаунта / Адреса / Выйти свёрнуты в одну кнопку,   */
/* чтобы не плодить 6+ мелких плиток в узкой плавающей панели.         */
/* Фон НЕ затемняется — просто появляется дубль-панель сверху.         */
/* ------------------------------------------------------------------ */

.phc-account__radial {
	position: relative;
}

.phc-account__radial-trigger {
	position: relative;
	z-index: 2;
}

.phc-account__radial-trigger-icon--open {
	display: none;
}

.phc-account__radial.is-open .phc-account__radial-trigger-icon--closed {
	display: none;
}

.phc-account__radial.is-open .phc-account__radial-trigger-icon--open {
	display: flex;
}

.phc-account__radial.is-open .phc-account__radial-trigger {
	background: var(--phca-accent-light);
}

.phc-account__radial.is-open .phc-account__radial-trigger .phc-account__action-label,
.phc-account__radial.is-open .phc-account__radial-trigger .phc-account__action-icon {
	color: var(--phca-accent);
}

/* Сам попап — визуально точная копия основного Дока (то же стекло,
   та же плитка .phc-account__action), просто выше и без фона-подложки. */
.phc-account__radial-items {
	position: fixed;
	left: 50%;
	bottom: 96px;
	z-index: 1001;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	max-width: calc(100% - 40px);

	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	padding: 6px;

	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 10px) scale(0.95);
	transform-origin: bottom center;
	transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.phc-account__radial.is-open .phc-account__radial-items {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0) scale(1);
}

/* ------------------------------------------------------------------ */
/* Buttons (shared)                                                     */
/* ------------------------------------------------------------------ */

.phc-account-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 50px;
	font-family: var(--phc-font-sans, 'Manrope', sans-serif);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: var(--phca-transition);
	line-height: 1;
	white-space: nowrap;
}

.phc-account-btn--solid {
	background: var(--phca-text) !important;
	color: var(--phca-white) !important;
}

.phc-account-btn--solid:hover {
	background: var(--phca-accent) !important;
	transform: scale(1.02) translateY(-2px);
}

.phc-account-btn--outline {
	background: transparent;
	border: 1px solid var(--phca-text);
	color: var(--phca-text) !important;
}

.phc-account-btn--outline:hover {
	background: var(--phca-text);
	color: var(--phca-white) !important;
}

.phc-account-btn.is-loading {
	pointer-events: none;
	opacity: 0.7;
}

.phc-account-btn__spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid transparent;
	border-top-color: currentColor;
	border-radius: 50%;
	animation: profhairclubSpin 0.6s linear infinite;
}

.phc-account-btn.is-loading .phc-account-btn__label {
	display: none;
}

.phc-account-btn.is-loading .phc-account-btn__spinner {
	display: block;
}

.phc-account-btn.is-done {
	pointer-events: none;
	background: #2e7d32;
	border-color: #2e7d32;
	color: #fff;
}

@keyframes profhairclubSpin {
	to { transform: rotate(360deg); }
}

.phc-account-btn .phc-account__svg {
	width: 16px;
	height: 16px;
}

/* ------------------------------------------------------------------ */
/* Order cards list                                                    */
/* ------------------------------------------------------------------ */

.phc-account__orders-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 40px;
}

.phc-order-card {
	background: var(--phca-white);
	border: 1px solid var(--phca-border);
	border-radius: var(--phca-radius);
	padding: 28px;
	transition: var(--phca-transition);
}

.phc-order-card:hover {
	border-color: var(--phca-accent-bg);
	box-shadow: 0 10px 30px rgba(20, 19, 15, 0.08);
}

.phc-order-card__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.phc-order-card__number {
	font-family: var(--phc-font-display, 'Lora', serif);
	font-size: 17px;
	color: var(--phca-text);
	display: block;
}

.phc-order-card__date {
	font-size: 13px;
	color: var(--phca-text-dim);
}

.phc-order-card__items {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
}

.phc-order-card__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 20px;
	border-top: 1px solid var(--phca-border);
}

.phc-order-card__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.phc-order-card__count {
	font-size: 13px;
	color: var(--phca-text-dim);
}

.phc-order-card__total {
	font-family: var(--phc-font-display, 'Lora', serif);
	font-size: 18px;
	color: var(--phca-text);
}

.phc-order-card__actions {
	display: flex;
	gap: 10px;
}

/* ------------------------------------------------------------------ */
/* Order items detail                                                  */
/* ------------------------------------------------------------------ */

.phc-order-items {
	list-style: none;
	padding: 0;
	margin: 0;
}

.phc-order-items__row {
	display: grid;
	grid-template-columns: 56px 1fr auto auto;
	gap: 20px;
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px solid var(--phca-border);
}

.phc-order-items__row:last-child {
	border-bottom: none;
}

.phc-order-items__thumb {
	width: 56px;
	height: 56px;
	border-radius: var(--phca-radius-sm);
	overflow: hidden;
	background: var(--phca-surface);
}

.phc-order-items__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.phc-order-items__noimg {
	display: block;
}

.phc-order-items__info {
	min-width: 0;
}

.phc-order-items__name {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--phca-text);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.phc-order-items__name:hover {
	color: var(--phca-accent);
}

.phc-order-items__attr {
	display: block;
	font-size: 12px;
	color: var(--phca-text-dim);
	margin-top: 2px;
}

.phc-order-items__qty {
	font-size: 13px;
	color: var(--phca-text-dim);
	text-align: center;
	white-space: nowrap;
}

.phc-order-items__price {
	font-family: var(--phc-font-display, 'Lora', serif);
	font-size: 15px;
	color: var(--phca-text);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Order totals                                                        */
/* ------------------------------------------------------------------ */

.phc-account__order-totals {
	margin-bottom: 40px;
}

.phc-order-totals__row {
	display: flex;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid var(--phca-border);
	font-size: 14px;
}

.phc-order-totals__row:last-child {
	border-bottom: none;
	font-weight: 600;
}

.phc-order-totals__label {
	color: var(--phca-text-dim);
}

.phc-order-totals__value {
	color: var(--phca-text);
	text-align: right;
}

/* ------------------------------------------------------------------ */
/* Order addresses                                                     */
/* ------------------------------------------------------------------ */

.phc-account__order-addresses {
	display: flex;
	gap: 40px;
	margin-bottom: 40px;
}

.phc-order-address {
	flex: 1;
}

.phc-order-address__title {
	font-family: var(--phc-font-display, 'Lora', serif);
	font-size: 16px;
	margin-bottom: 12px;
}

.phc-order-address__body {
	font-size: 14px;
	color: var(--phca-text-dim);
	line-height: 1.7;
}

.phc-order-address__body address {
	font-style: normal;
	margin: 0;
}

.phc-order-address__phone {
	display: block;
	font-size: 13px;
	margin-top: 6px;
}

.phc-account__order-actions {
	margin-bottom: 60px;
}

/* ------------------------------------------------------------------ */
/* Forms                                                               */
/* ------------------------------------------------------------------ */

.phc-account__form {
	max-width: 600px;
	width: 100%;
	box-sizing: border-box;
}

.phc-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 20px;
	width: 100%;
	min-width: 0;
}

.phc-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	/*
	 * Без min-width: 0 грид/флекс-ячейка не сжимается ниже "содержимого"
	 * инпута (min-content) — на узких экранах это раздвигало форму шире
	 * вьюпорта, и поля "Адреса" вылезали за край экрана.
	 */
	min-width: 0;
}

.phc-field__label {
	font-size: 13px;
	font-weight: 500;
	color: var(--phca-text);
}

.phc-field__input {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 14px 20px;
	border: 1px solid var(--phca-border);
	border-radius: 50px;
	font-family: var(--phc-font-sans, 'Manrope', sans-serif);
	font-size: 14px;
	color: var(--phca-text);
	background: var(--phca-white);
	outline: none;
	transition: var(--phca-transition);
}

.phc-field__input:focus {
	border-color: var(--phca-text);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.phc-account__password-block {
	margin-top: 40px;
	padding-top: 40px;
	border-top: 1px solid var(--phca-border);
	margin-bottom: 20px;
}

.phc-account__birthdate-block {
	margin-top: 40px;
	padding-top: 40px;
	border-top: 1px solid var(--phca-border);
	margin-bottom: 20px;
}

.phc-account__birthdate-block .phc-field {
	max-width: 260px;
}

.phc-account__birthdate-value {
	font-family: var(--phc-font-display, 'Lora', serif);
	font-size: 20px;
	color: var(--phca-text);
	margin: 0 0 6px;
}

.phc-account__birthdate-hint {
	font-size: 12px;
	color: var(--phca-text-dim);
	margin: 8px 0 0;
}

.phc-account__form-actions {
	margin-top: 10px;
}

/* ------------------------------------------------------------------ */
/* Product row (recommendations)                                      */
/* ------------------------------------------------------------------ */

.phc-account__product-row {
	margin-bottom: 40px;
}

.phc-account__product-scroller {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.phc-account-product-card {
	display: flex;
	flex-direction: column;
	background: var(--phca-surface);
	border-radius: var(--phca-radius);
	overflow: hidden;
	transition: var(--phca-transition);
	position: relative;
}

.phc-account-product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 30px rgba(20, 19, 15, 0.08);
}

.phc-account-product-card__media {
	aspect-ratio: 1;
	overflow: hidden;
}

.phc-account-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.phc-account-product-card:hover .phc-account-product-card__media img {
	transform: scale(1.05);
}

.phc-account-product-card__body {
	padding: 14px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.phc-account-product-card__name {
	font-family: var(--phc-font-display, 'Lora', serif);
	font-size: 15px;
	color: var(--phca-text);
	text-decoration: none;
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.phc-account-product-card__name:hover {
	color: var(--phca-accent);
}

.phc-account-product-card__price {
	font-size: 13px;
	color: var(--phca-accent);
	font-weight: 600;
	margin-top: auto;
}

.phc-account-product-card__add {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--phca-white);
	border: 1px solid var(--phca-border);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: var(--phca-transition);
	padding: 0;
}

.phc-account-product-card__add:hover {
	background: var(--phca-text);
	border-color: var(--phca-text);
}

.phc-account-product-card__add:hover .phc-account__svg svg {
	stroke: #fff;
}

.phc-account-product-card__add .phc-account__svg {
	width: 16px;
	height: 16px;
}

.phc-account-product-card__add.is-added {
	background: #2e7d32;
	border-color: #2e7d32;
}

.phc-account-product-card__add.is-added .phc-account__svg svg {
	stroke: #fff;
}

/* ------------------------------------------------------------------ */
/* Empty state                                                         */
/* ------------------------------------------------------------------ */

.phc-account__empty {
	text-align: center;
	padding: 80px 20px;
}

.phc-account__empty-icon {
	margin-bottom: 20px;
	opacity: 0.3;
}

.phc-account__empty-icon .phc-account__svg {
	width: 64px;
	height: 64px;
	margin: 0 auto;
}

.phc-account__empty-title {
	font-family: var(--phc-font-display, 'Lora', serif);
	font-size: 22px;
	margin-bottom: 12px;
	color: var(--phca-text);
}

.phc-account__empty-text {
	font-size: 14px;
	color: var(--phca-text-dim);
	margin-bottom: 28px;
}

/* ------------------------------------------------------------------ */
/* Skeleton                                                            */
/* ------------------------------------------------------------------ */

.phc-skeleton-block {
	padding: 20px 0;
}

.phc-skeleton {
	background: var(--phca-surface);
	border-radius: var(--phca-radius-sm);
	overflow: hidden;
	position: relative;
}

.phc-skeleton::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
	animation: profhairclubShimmer 1.5s infinite;
}

.phc-skeleton--title {
	width: 40%;
	height: 32px;
	margin-bottom: 16px;
}

.phc-skeleton--text {
	width: 60%;
	height: 16px;
	margin-bottom: 32px;
}

.phc-skeleton-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.phc-skeleton--card {
	aspect-ratio: 3 / 4;
}

@keyframes profhairclubShimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* ------------------------------------------------------------------ */
/* Error state                                                         */
/* ------------------------------------------------------------------ */

.phc-account__error {
	text-align: center;
	padding: 60px 20px;
	color: #c62828;
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Pagination                                                         */
/* ------------------------------------------------------------------ */

.phc-account__pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}

.phc-account__pagination ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 8px;
}

.phc-account__pagination li {
	display: none;
}

.phc-account__pagination li a,
.phc-account__pagination li span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	font-size: 14px;
	color: var(--phca-text);
	text-decoration: none;
	background: var(--phca-surface);
	transition: var(--phca-transition);
}

.phc-account__pagination li a:hover,
.phc-account__pagination li span.current {
	background: var(--phca-text);
	color: var(--phca-white);
}

/* ------------------------------------------------------------------ */
/* Reveal animation (reuse from theme's GSAP if loaded, fallback CSS)   */
/* ------------------------------------------------------------------ */

.reveal {
	opacity: 0;
	transform: scale(0.95) translateY(20px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

#account-content .reveal {
	opacity: 1;
	transform: scale(1) translateY(0);
}

/* ------------------------------------------------------------------ */
/* Mobile bottom nav (hidden on desktop)                               */
/* ------------------------------------------------------------------ */

.phc-account__mobile-nav {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-top: 1px solid var(--phca-border);
	padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
}

.phc-account__mobile-nav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex: 1;
	font-size: 10px;
	color: var(--phca-text-dim);
	text-decoration: none;
	padding: 8px 0;
	transition: var(--phca-transition);
}

.phc-account__mobile-nav a.is-active {
	color: var(--phca-accent);
}

.phc-account__mobile-link--logout {
	border-left: 1px solid var(--phca-border);
	margin-left: 4px;
}

.phc-account__mobile-nav .phc-account__svg {
	width: 22px;
	height: 22px;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 992px) {
	.phc-account {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.phc-account__sidebar {
		position: static;
	}

	.phc-account__menu {
		flex-direction: row;
		overflow-x: auto;
		gap: 4px;
		padding-bottom: 8px;
	}

	.phc-account__link {
		white-space: nowrap;
		padding: 10px 16px;
		font-size: 13px;
	}

	.phc-account__user {
		display: none;
	}

	.phc-account__stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.phc-account__product-scroller {
		grid-template-columns: repeat(2, 1fr);
	}

	.phc-account__actions-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.phc-account__order-addresses {
		flex-direction: column;
		gap: 24px;
	}
}

@media (max-width: 767px) {
	.phc-account {
		margin: 30px auto;
		padding: 0 20px 100px;
	}

	.phc-account__sidebar {
		display: none;
	}

	.phc-account__mobile-nav {
		display: flex;
	}

	.phc-account__last-order-body {
		flex-direction: column;
	}

	.phc-account__last-order-footer {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.phc-account__last-order-actions {
		flex-direction: column;
	}

	.phc-account__last-order-actions .phc-account-btn {
		width: 100%;
	}

	.phc-order-card__foot {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.phc-order-card__meta {
		flex-direction: row;
		justify-content: space-between;
	}

	.phc-order-card__actions {
		flex-direction: column;
	}

	.phc-order-card__actions .phc-account-btn {
		width: 100%;
	}

	.phc-form-grid {
		grid-template-columns: 1fr;
	}

	.phc-account__actions-grid {
		grid-template-columns: 1fr;
	}

	.phc-account__product-scroller {
		grid-template-columns: repeat(2, 1fr);
	}

	.phc-order-items__row {
		grid-template-columns: 48px 1fr auto;
		gap: 12px;
	}

	.phc-order-items__qty {
		display: none;
	}
}

@media (max-width: 480px) {
	.phc-account__product-scroller {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.phc-account-product-card__body {
		padding: 10px;
	}

	.phc-account-product-card__name {
		font-size: 13px;
	}

	.phc-account-product-card__add {
		width: 32px;
		height: 32px;
		top: 8px;
		right: 8px;
	}
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                      */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.reveal {
		opacity: 1;
		transform: none;
	}

	#account-content.is-entering,
	#account-content.is-leaving {
		animation: none;
	}
}


/* ------------------------------------------------------------------ */
/* Floating Dock Menu (Только для мобильных устройств)                 */
/* ------------------------------------------------------------------ */

/* На десктопе прячем плавающий Док */
.phc-account__menu-actions {
    display: none !important;
}

@media (max-width: 992px) {
    /* Включаем Док на мобильных */
    .phc-account__menu-actions {
        display: block !important;
        position: fixed !important;
        bottom: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 1000 !important;
        width: auto !important;
        max-width: calc(100% - 40px);
        margin: 0 !important;
        
        /* Apple Glassmorphism */
        background: rgba(255, 255, 255, 0.7) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 50px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
        padding: 6px !important; /* Чуть меньше внутренний отступ панели */
    }

    /* Фикс для анимации появления (reveal) */
    .phc-account__menu-actions.reveal {
        opacity: 1 !important;
        transform: translateX(-50%) scale(1) translateY(0) !important;
    }

    /* Превращаем сетку в гибкую полоску */
    .phc-account__actions-grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 2px !important; /* Минимальный отступ между кнопками */
        justify-content: center !important;
        align-items: center !important;
    }

    /* Стилизация кнопок внутри Дока */
    .phc-account__action {
        flex-direction: column !important;
        padding: 8px 10px !important; /* Уменьшили паддинги */
        background: transparent !important;
        border-radius: 30px !important;
        box-shadow: none !important;
        width: auto !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        gap: 4px !important; /* Уменьшили расстояние между иконкой и текстом */
    }

    .phc-account__action:hover {
        background: var(--phc-mist, #e6e2d4) !important;
        transform: translateY(-4px) !important;
        box-shadow: none !important;
    }

    /* Активный пункт меню */
    .phc-account__action.is-active {
        background: var(--phc-yellow-wash, #fbf0c8) !important;
    }
    
    .phc-account__action.is-active .phc-account__action-label,
    .phc-account__action.is-active .phc-account__action-icon {
        color: var(--phc-yellow-deep, #b98e05) !important;
    }

    /* Уменьшенные иконки */
    .phc-account__action-icon {
        width: 18px !important;  /* Было 22px */
        height: 18px !important;
    }
    
    .phc-account__action-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .phc-account__action-label {
        font-size: 9px !important; /* Было 10px */
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        margin-top: 0;
    }

    /* Отключаем старую мобильную панель */
    .phc-account__mobile-nav {
        display: none !important;
    }

    /* Отступ снизу, чтобы Док не перекрывал контент */
    .phc-account__content,
    .phc-account {
        padding-bottom: 100px !important; /* Чуть меньше отступ, так как док стал ниже */
    }
}

/* Для совсем узких экранов (iPhone SE) */
@media (max-width: 480px) {
    .phc-account__action {
        padding: 6px 8px !important; /* Еще плотнее */
    }
    .phc-account__action-label {
        font-size: 8px !important; /* Совсем мелкий текст, чтобы влезло */
    }
}

/* Фикс цвета иконки "Повторить заказ" */
.phc-account__action.phc-reorder {
    color: var(--phc-ink, #14130f) !important;
}

.phc-account__action.phc-reorder svg {
    stroke: var(--phc-ink, #14130f) !important;
}