/* ── Кабінет (My Account) ───────────────────────────────────────────────── */
.page-body__inner { max-width: 1320px; }

.account { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-8); align-items: start; }
.account__sidebar { display: grid; gap: var(--space-5); position: sticky; top: calc(var(--header-offset, var(--header-height)) + var(--space-5)); }
.account__content { min-width: 0; display: grid; gap: var(--space-5); }

/* Профіль і меню */
.account-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); background: var(--color-bg-warm); border-radius: var(--radius); }
.account-card__avatar { display: grid; place-items: center; flex: none; width: 52px; height: 52px; font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--color-heading); background: var(--color-bg); border-radius: 50%; }
.account-card__info { min-width: 0; }
.account-card__name { font-weight: var(--fw-medium); color: var(--color-heading); overflow-wrap: anywhere; }
.account-card__email { font-size: var(--fs-sm); color: var(--color-muted); overflow-wrap: anywhere; }

.account .account-nav__list { display: grid; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--color-border-strong); }
.account .account-nav__item { margin: 0; list-style: none; }
.account .account-nav__link { display: block; margin-left: -1px; padding: var(--space-3) var(--space-4); color: var(--color-text); text-decoration: none; border-left: 1px solid transparent; transition: color var(--transition), border-color var(--transition); }
.account .account-nav__link:hover { color: var(--color-accent); border-left-color: var(--color-accent); }
.account .account-nav__link.is-active { color: var(--color-heading); font-weight: var(--fw-medium); border-left-color: var(--color-primary); }

/* Огляд */
.account-dashboard__title { font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: 1.2; letter-spacing: var(--ls-heading); color: var(--color-heading); }
.account-dashboard__text { margin-top: var(--space-2); }
.account-dashboard__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.account .account-dashboard__link { display: grid; gap: var(--space-1); padding: var(--space-5) var(--space-6); text-decoration: none; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); transition: border-color var(--transition); }
.account .account-dashboard__link:hover { border-color: var(--color-primary); }
.account-dashboard__link-title { font-size: var(--fs-lg); color: var(--color-heading); }
.account-dashboard__link-text { font-size: var(--fs-sm); color: var(--color-muted); }

/* Замовлення */
.account-orders { display: grid; gap: var(--space-4); }
.account-order { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); transition: border-color var(--transition); }
.account-order:hover { border-color: var(--color-border-strong); }
.account .account-order__row { display: grid; grid-template-columns: 64px minmax(0, 1.2fr) auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-5); text-decoration: none; color: var(--color-heading); }
.account-order__thumb img { display: block; width: 64px; height: 64px; object-fit: contain; border-radius: var(--radius-sm); background: var(--color-bg-warm); }
.account-order__main { display: grid; gap: 2px; }
.account-order__number { font-weight: var(--fw-medium); }
.account-order__date,
.account-order__items { font-size: var(--fs-sm); color: var(--color-muted); }
.account-order__total { font-weight: var(--fw-medium); text-align: right; white-space: nowrap; }
.account-order__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: 0 var(--space-5) var(--space-4); }
.account .account-order__action { text-decoration: none; }

.order-status { display: inline-flex; align-items: center; justify-self: start; padding: var(--space-1) var(--space-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-heading); background: var(--color-bg-warm); border-radius: 999px; white-space: nowrap; }
.order-status--completed { color: var(--color-success); background: #eef6f0; }
.order-status--processing,
.order-status--on-hold { color: #8a5a00; background: #fbf1dc; }
.order-status--cancelled,
.order-status--failed,
.order-status--refunded { color: var(--color-error); background: #fbeeed; }

.account-empty { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-5); text-align: center; background: var(--color-bg-warm); border-radius: var(--radius); }
.account-empty__title { font-size: var(--fs-h3); color: var(--color-heading); }
.account-empty .btn { margin-top: var(--space-3); }

/* Замовлення: деталі */
.account-order-header { display: grid; gap: var(--space-2); }
.account-order-header__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.account-order-header__number { font-size: var(--fs-h3); font-weight: var(--fw-regular); color: var(--color-heading); }
.account-order-header__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--fs-sm); color: var(--color-muted); }
.account-order-notes { padding: var(--space-5) var(--space-6); background: var(--color-bg-warm); border-radius: var(--radius); }
.account-order-notes__title { margin-bottom: var(--space-4); font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--color-heading); }
.account .account-order-notes__list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.account .account-order-notes__item { margin: 0; padding-left: var(--space-4); list-style: none; border-left: 2px solid var(--color-primary); }
.account-order-notes__text p { margin: 0; }
.account-order-notes__date { font-size: var(--fs-xs); color: var(--color-muted); }
.account-order-body { display: grid; gap: var(--space-6); }
.account-order-body h2 { margin-bottom: var(--space-3); font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--color-heading); }
.account-order-body table.shop_table { width: 100%; border-collapse: collapse; }
.account-order-body table.shop_table th,
.account-order-body table.shop_table td { padding: var(--space-3) 0; text-align: left; border-bottom: 1px solid var(--color-border); }
.account-order-body table.shop_table td:last-child,
.account-order-body table.shop_table th:last-child { text-align: right; }
.account-order-body address { font-style: normal; line-height: 1.6; }
.account-order-body .woocommerce-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.account-order-body .woocommerce-columns > * { float: none; width: auto; max-width: none; }

/* Профіль */
.account-form { display: grid; gap: var(--space-5); }
.account-form__card { padding: var(--space-6); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); }
.account-form__title { margin-bottom: var(--space-4); font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: 1.2; color: var(--color-heading); }
.account-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.account-form__row { display: grid; gap: var(--space-2); align-content: start; margin: 0; }
.account-form__row--wide { grid-column: 1 / -1; }
.account-form__row label,
.auth__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-heading); }
.account-form__row .required,
.auth__required { color: var(--color-error); }
.account-form__hint { font-size: var(--fs-sm); color: var(--color-muted); }
.account-form__submit { margin: 0; }

.account-form__input,
.auth__input {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--color-heading);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition);
}
.account-form__input:hover, .account-form__input:focus,
.auth__input:hover, .auth__input:focus { border-color: var(--color-primary); outline: 0; }

/* Вхід / реєстрація / відновлення */
.auth { display: grid; gap: var(--space-5); max-width: 520px; margin-inline: auto; padding: var(--space-6); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); }
.auth--narrow { gap: var(--space-4); }
.auth__title { font-size: var(--fs-h3); font-weight: var(--fw-regular); color: var(--color-heading); }
.auth__hint { font-size: var(--fs-sm); color: var(--color-muted); }
.auth__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--color-border-strong); }
.auth__tab { margin-bottom: -1px; padding: var(--space-3) 0; font: inherit; font-size: var(--fs-lg); color: var(--color-muted); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; transition: color var(--transition), border-color var(--transition); }
.auth__tab:hover { color: var(--color-heading); }
.auth__tab.is-active { color: var(--color-heading); border-bottom-color: var(--color-primary); }
.auth__panel[hidden] { display: none; }
.auth__form { display: grid; gap: var(--space-4); }
.auth__row { display: grid; gap: var(--space-2); }
.auth__password { position: relative; }
.auth__password .auth__input { padding-right: 96px; }
.auth__eye { position: absolute; top: 0; right: 0; height: 100%; padding: 0 var(--space-4); font: inherit; font-size: var(--fs-xs); color: var(--color-muted); background: none; border: 0; cursor: pointer; transition: color var(--transition); }
.auth__eye:hover { color: var(--color-heading); }
.auth__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-sm); }
.auth__checkbox { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-sm); cursor: pointer; }
.auth__checkbox input { flex: none; appearance: auto; -webkit-appearance: checkbox; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--color-primary); }
.auth a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.auth a.btn { text-decoration: none; }
.account .account-card a, .account-order-body a { text-underline-offset: 3px; }

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .account { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
    .account__sidebar { position: static; }
    .account .account-nav__list { display: flex; gap: var(--space-2); overflow-x: auto; border-left: 0; scrollbar-width: none; }
    .account .account-nav__list::-webkit-scrollbar { display: none; }
    .account .account-nav__link { margin-left: 0; padding: var(--space-2) var(--space-4); white-space: nowrap; border: 1px solid var(--color-border-strong); border-radius: 999px; }
    .account .account-nav__link:hover { border-color: var(--color-accent); }
    .account .account-nav__link.is-active { color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary); }
}

@media (max-width: 767px) {
    .account-dashboard__links { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-5); }
    .account .account-order__row { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: 'thumb main total' 'thumb status items'; gap: var(--space-2) var(--space-4); padding: var(--space-4); }
    .account-order__thumb { grid-area: thumb; }
    .account-order__thumb img { width: 56px; height: 56px; }
    .account-order__main { grid-area: main; }
    .account-order__row .order-status { grid-area: status; }
    .account-order__items { grid-area: items; text-align: right; }
    .account-order__total { grid-area: total; }
    .account-order__actions { padding-inline: var(--space-4); }
    .account-form__card { padding: var(--space-5); }
    .account-form__grid { grid-template-columns: minmax(0, 1fr); }
    .account-order-body .woocommerce-columns { grid-template-columns: minmax(0, 1fr); }
    .account-order-notes { padding: var(--space-4); }
    .auth { padding: var(--space-5); }
}