/* ── Обліковий запис (/my-account/ та її ендпоінти) ──────────────────────────
   Файл вантажиться за слагом ассетів `account` — його повертає
   get_page_slug() для is_account_page(), тож ім'я саме account.css, а не
   my-account.css.

   Сторінка має два різні стани, і плутати їх не можна:
     • гість — тільки форма входу (реєстрації на сайті немає, WooCommerce
       не малює другу колонку «Зареєструватися») або відновлення пароля;
     • увійшов — меню розділів ліворуч і вміст розділу праворуч.

   Розмітку віддає плагін, тому селектори — по його класах, і навмисно
   довгі: WooCommerce цілиться в `.woocommerce form .form-row …`, тобто два
   класи плюс два теги, і коротші правила теми йому програвали — форма не
   центрувалась, рамка лишалась, а галочка з підписом не ставали в рядок.

   Значень із прода не знімали: там ця сторінка так само лишалась на
   дефолтах WooCommerce. За зразок узято мову чекауту — поле 44px, кегль
   16px, рамка #ebeced, головна кнопка чорною пігулкою. */

/* ═══ ГІСТЬ ═══════════════════════════════════════════════════════════════ */

/* Карткою стає весь блок плагіна, а не сама форма: усередині нього по черзі
   лежать повідомлення, заголовок «Увійти» і форма — і всі троє мають
   читатись як одне ціле. Рамка й радіус ті самі, що в підсумку кошика й
   «Вашому замовленні».

   Обмеження `:not(.logged-in)` обов'язкове. Без нього ця сама картка
   накривала й залогінений вигляд, де в блоці лежать ще меню й вміст
   розділу: у 460px вони не вміщались і налазили одне на одне. */
body.woocommerce-account:not(.logged-in) .content-page__content > .woocommerce {
    max-width: 460px;
    margin: 0 auto;
    padding: 28px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-bg);
}
/* Повідомлення про помилку — усередині картки, над формою. До цього воно
   малювалось на всю ширину контейнера: 1280px проти 460px самої форми
   (заміряно), і два блоки читались як не пов'язані між собою — хоча це
   найважливіший момент сторінки, бо саме тут людина не змогла увійти. */
body.woocommerce-account:not(.logged-in) .content-page__content > .woocommerce > .woocommerce-notices-wrapper > * {
    margin-bottom: 20px;
    padding: 12px 14px;
    font-size: 15px;
}
/* «Увійти» від плагіна. page.css дає йому 30px і відступ 40px згори — для
   заголовка сторінки це доречно, для підпису всередині картки ні. Тепер
   він і не конкурує з h1: сидить у картці як її назва. */
body.woocommerce-account:not(.logged-in) .content-page__content .woocommerce > h2 {
    margin: 0 0 20px;
    font-size: 20px;
    text-align: center;
}

/* ═══ СПІЛЬНЕ ДЛЯ ВСІХ ФОРМ АКАУНТА ══════════════════════════════════════ */
/* Базою навмисно взято `.woocommerce form`, а не перелік конкретних форм
   поіменно. Спершу правила були прив'язані до form.woocommerce-form-login
   і form.woocommerce-ResetPassword — і форма особистих даних
   (form.woocommerce-EditAccountForm) не діставала нічого: підписи 22px,
   поля 50px, кнопка бузкова. Файл вантажиться лише на сторінці акаунта,
   тож ширша база тут безпечна й покриває заразом форми адрес. */

.woocommerce-account .content-page__content .woocommerce form {
    font-size: 16px;
    line-height: 1.5;
}
.woocommerce-account .content-page__content .woocommerce form .form-row {
    width: auto;
    margin: 0 0 18px;
    padding: 0;
    float: none;
}
.woocommerce-account .content-page__content .woocommerce form .form-row label {
    display: block;
    margin: 0 0 6px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text);
}
.woocommerce-account .content-page__content .woocommerce form .required {
    color: var(--color-accent);
    text-decoration: none;
}
.woocommerce-account .content-page__content .woocommerce form .form-row input.input-text {
    width: 100%;
    height: 44px;
    padding: 8px 12px;
    border: 1px solid #ebeced;
    border-radius: var(--radius);
    background: var(--color-bg);
    font-family: var(--font-body);
    /* 16px, а не менше: дрібніший кегль у полі змушує Safari на iPhone
       збільшувати сторінку при фокусі (docs/06-conversion.md §6.6). */
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-text);
}
.woocommerce-account .content-page__content .woocommerce form .form-row input.input-text:focus {
    outline: 2px solid var(--color-text);
    outline-offset: 1px;
}

/* ── Поле пароля ────────────────────────────────────────────────────────── */
/* Обгортка поля — у плагіна це <span>, тобто рядковий елемент, і абсолют
   усередині нього рахується від рядкового боксу, а не від самого поля:
   іконка з'їжджала вгору, на рядок підпису. Робимо обгортку блоковою. */
.woocommerce-account .content-page__content .woocommerce form .form-row .password-input {
    display: block;
    position: relative;
}
/* Кнопка «показати пароль». Плагін кладе її в поле абсолютом: іконка 22×22
   біля правого краю, без стану наведення й із тач-таргетом менше за
   половину норми. Розтягуємо на всю висоту поля — саму іконку малює
   ::before фоновою картинкою, тож центруємо її, а не перемальовуємо. */
.woocommerce-account .content-page__content .woocommerce form .form-row .password-input .show-password-input {
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 0;
    /* Плагін центрує іконку через translateY(-50%) від top:50%. Ми ставимо
       свої координати, і цей зсув лишався жити своїм життям — іконка
       піднімалась рівно на 22px, на рядок підпису (заміряно). */
    transform: none;
    width: 44px;
    height: 44px;
    opacity: .6;
    transition: opacity var(--transition);
}
.woocommerce-account .content-page__content .woocommerce form .form-row .password-input .show-password-input:hover,
.woocommerce-account .content-page__content .woocommerce form .form-row .password-input .show-password-input.display-password {
    opacity: 1;
}
/* Місце під кнопку, щоб пароль не заходив під неї. */
.woocommerce-account .content-page__content .woocommerce form .form-row .password-input input.input-text {
    padding-right: 44px;
}

/* ── Головна кнопка ─────────────────────────────────────────────────────── */
/* Дефолт WooCommerce — бузкова #e9e6ed із сірим текстом і радіусом 3px
   (заміряно). Замінюємо на кнопкову мову сайту: чорна пігулка, як
   «Придбати» в картці товару й «Підтвердити» на чекауті. */
.woocommerce-account .content-page__content .woocommerce form button.button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 12px 24px;
    border: 1px solid var(--color-action);
    border-radius: 50px;
    background: var(--color-action);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--color-secondary);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.woocommerce-account .content-page__content .woocommerce form button.button:hover {
    border-color: color-mix(in srgb, var(--color-action) 82%, #000);
    background: color-mix(in srgb, var(--color-action) 82%, #000);
}
.woocommerce-account .content-page__content .woocommerce form button.button:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

/* ═══ ФОРМА ВХОДУ ════════════════════════════════════════════════════════ */
.content-page__content .woocommerce form.woocommerce-form-login {
    /* Ширину тримає картка вище, форма просто заповнює її. */
    width: 100%;
    margin: 0;
    padding: 0;
    /* Рамку плагіна прибираємо: картка вже є, коробка в коробці — шум. */
    border: 0;
}
/* Плагін кладе галочку й кнопку в один <p>, і вони ставали поруч: кнопка
   ліворуч, галочка праворуч від неї (заміряно: кнопка 112px на x=104,
   підпис на x=238). Ставимо в стовпчик — спершу галочка, під нею кнопка. */
.content-page__content .woocommerce form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 0;
}
.content-page__content .woocommerce form .form-row label.woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text);
    cursor: pointer;
}
/* Своє поле-галочка. reset.css знімає з полів вигляд системи
   (appearance: none), і без власних розмірів чекбокс схлопувався в нуль —
   заміряно 0×0, тобто його просто не було видно. Галочка — та сама
   icon-check зі спрайта теми (partials/icons.php), тільки фоном:
   псевдоелементи на input підтримуються браузерами непослідовно. */
.content-page__content .woocommerce form .form-row label.woocommerce-form-login__rememberme input[type="checkbox"] {
    appearance: none;
    display: block;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg) center / 14px no-repeat;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition);
}
.content-page__content .woocommerce form .form-row label.woocommerce-form-login__rememberme input[type="checkbox"]:hover {
    border-color: var(--color-text);
}
.content-page__content .woocommerce form .form-row label.woocommerce-form-login__rememberme input[type="checkbox"]:checked {
    border-color: var(--color-text);
    background-color: var(--color-text);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.content-page__content .woocommerce form .form-row label.woocommerce-form-login__rememberme input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}
.content-page__content .woocommerce-LostPassword {
    margin: 20px 0 0;
    text-align: center;
    font-size: 15px;
    line-height: 1.4;
}
.content-page__content .woocommerce-LostPassword a {
    color: var(--color-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.content-page__content .woocommerce-LostPassword a:hover {
    color: var(--color-text);
}

/* ═══ ВІДНОВЛЕННЯ ПАРОЛЯ ═════════════════════════════════════════════════ */
.content-page__content .woocommerce form.woocommerce-ResetPassword {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}
/* Пояснення над полем — довідковий текст, не основний. */
.content-page__content .woocommerce form.woocommerce-ResetPassword > p:first-child {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-muted);
}
/* Поле відновлення плагін позначає як form-row-first — половина рядка в
   його власній сітці. Тут рядок один, тож на всю ширину. */
.content-page__content .woocommerce form.woocommerce-ResetPassword .form-row-first {
    width: auto;
    float: none;
}

/* ═══ ОСОБИСТІ ДАНІ (/my-account/edit-account/) ══════════════════════════ */
/* Ім'я з прізвищем — у два стовпці, решта на всю ширину. Плагін розкладає
   їх флоатами по 47%; замінюємо на грід, як у чекауті. */
.woocommerce-account .content-page__content .woocommerce form.woocommerce-EditAccountForm {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
    align-items: start;
}
.woocommerce-account .content-page__content .woocommerce form.woocommerce-EditAccountForm > .form-row-wide,
.woocommerce-account .content-page__content .woocommerce form.woocommerce-EditAccountForm > fieldset,
.woocommerce-account .content-page__content .woocommerce form.woocommerce-EditAccountForm > p:last-child {
    grid-column: 1 / -1;
}
/* Розпірки для флоатів плагіна в гріді зайві — вони ставали б комірками. */
.woocommerce-account .content-page__content .woocommerce form.woocommerce-EditAccountForm > .clear {
    display: none;
}
/* Підказка під полем «Ім'я для показу» — довідка, не значення. */
.woocommerce-account .content-page__content .woocommerce form.woocommerce-EditAccountForm .form-row span em {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    font-style: normal;
    line-height: 1.4;
    color: var(--color-muted);
}
/* «Зміна паролю» — окремий блок: ці три поля можна не заповнювати взагалі,
   і візуально вони мають бути відділені від решти. Картка з рамкою, як
   меню розділів поруч. */
.woocommerce-account .content-page__content .woocommerce form.woocommerce-EditAccountForm fieldset {
    margin: 6px 0 24px;
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
}
.woocommerce-account .content-page__content .woocommerce form.woocommerce-EditAccountForm legend {
    padding: 0 8px;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text);
}
.woocommerce-account .content-page__content .woocommerce form.woocommerce-EditAccountForm fieldset .form-row:last-child {
    margin-bottom: 0;
}
.woocommerce-account .content-page__content .woocommerce form.woocommerce-EditAccountForm > p:last-child {
    margin: 0;
}
/* Кнопка «Зберегти зміни» — не на всю ширину форми: на 990px це була б
   смуга через пів екрана. Фіксована й ліворуч, під полями. */
.woocommerce-account .content-page__content .woocommerce form.woocommerce-EditAccountForm button.button {
    width: auto;
    min-width: 240px;
    padding: 12px 32px;
}

/* ═══ ЗАЛОГІНЕНИЙ ВИГЛЯД ═════════════════════════════════════════════════ */
/* Меню розділів ліворуч, вміст розділу праворуч. WooCommerce розкладає їх
   флоатами (nav 30% ліворуч, content 68% праворуч) — приберемо флоати й
   зробимо гріда: у вузькій колонці флоати сходились у купу, а текст меню
   налазив на текст вмісту. */
body.woocommerce-account.logged-in .content-page__content > .woocommerce {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 0 40px;
    align-items: start;
}
body.woocommerce-account.logged-in .content-page__content > .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
    grid-column: 1;
    width: auto;
    float: none;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
    grid-column: 2;
    width: auto;
    float: none;
}

/* ── Меню розділів ──────────────────────────────────────────────────────── */
/* page.css повертає маркери спискам у тексті сторінки — для меню це зайве. */
body.woocommerce-account .content-page__content .woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    list-style: none;
}
body.woocommerce-account .content-page__content .woocommerce-MyAccount-navigation li {
    margin: 0;
    padding: 0;
    list-style: none;
}
body.woocommerce-account .content-page__content .woocommerce-MyAccount-navigation li + li {
    border-top: 1px solid var(--color-border);
}
body.woocommerce-account .content-page__content .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 13px 18px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.35;
    color: var(--color-text);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
body.woocommerce-account .content-page__content .woocommerce-MyAccount-navigation li a:hover {
    background: var(--color-bg-alt);
}
/* Поточний розділ — залитий, а не просто жирний: у списку з шести пунктів
   вага сама по собі читається погано. */
body.woocommerce-account .content-page__content .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--color-text);
    color: var(--color-secondary);
}
body.woocommerce-account .content-page__content .woocommerce-MyAccount-navigation li a:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: -2px;
}

/* ── Вміст розділу ──────────────────────────────────────────────────────── */
/* page.css задає вмісту сторінки 22px — це кегль статті, а не інтерфейсу. */
body.woocommerce-account .content-page__content .woocommerce-MyAccount-content {
    font-size: 17px;
    line-height: 1.6;
}
body.woocommerce-account .content-page__content .woocommerce-MyAccount-content > *:first-child {
    margin-top: 0;
}
body.woocommerce-account .content-page__content .woocommerce-MyAccount-content p {
    margin: 0 0 16px;
}
body.woocommerce-account .content-page__content .woocommerce-MyAccount-content a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}
body.woocommerce-account .content-page__content .woocommerce-MyAccount-content a:hover {
    color: var(--color-muted);
}

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* Меню вужче. Фіксовані 250px на 769px забирали третину рядка, і полям
       у формі лишалось по 210px (заміряно) — з 200px виходить по 240. */
    body.woocommerce-account.logged-in .content-page__content > .woocommerce {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: 0 28px;
    }
    body.woocommerce-account .content-page__content .woocommerce-MyAccount-navigation li a {
        padding: 12px 14px;
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    /* Меню над вмістом. Двох колонок тут уже немає з чого робити: 250px під
       меню лишали б вмісту смужку. */
    body.woocommerce-account.logged-in .content-page__content > .woocommerce {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px 0;
    }
    body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
    body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
        grid-column: 1;
    }
    /* Кнопка «Зберегти зміни» — на всю ширину: фіксовані 240px посеред
       вузького екрана виглядають випадковими. */
    .woocommerce-account .content-page__content .woocommerce form.woocommerce-EditAccountForm button.button {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    body.woocommerce-account:not(.logged-in) .content-page__content > .woocommerce {
        padding: 20px;
    }
    body.woocommerce-account:not(.logged-in) .content-page__content .woocommerce > h2 {
        font-size: 19px;
    }
    /* Ім'я та Прізвище — по одному в ряд, як платіжні поля на чекауті. */
    .woocommerce-account .content-page__content .woocommerce form.woocommerce-EditAccountForm {
        grid-template-columns: minmax(0, 1fr);
    }
    .woocommerce-account .content-page__content .woocommerce form.woocommerce-EditAccountForm fieldset {
        padding: 18px;
    }
}

/* ── Мобільний: крупніший дрібний текст ─────────────────────────────────────
   Сайт читає багато людей старшого віку, їм має бути зрозуміло, де і що
   (запит Viktor). Тому на ≤768px усі шрифти дрібніше 18px піднято за єдиною
   шкалою: 12→14, 13→15, 14→16, 15→16, 16→17, 17→18. Десктоп не чіпали.
   Правила, що вже були у мобільних медіа-блоках, підвищено на місці; сюди
   зібрано ті, що задавались лише для великих екранів. */
@media (max-width: 768px) {
    body.woocommerce-account:not(.logged-in) .content-page__content > .woocommerce > .woocommerce-notices-wrapper > * { font-size: 16px; }
    .woocommerce-account .content-page__content .woocommerce form { font-size: 17px; }
    .woocommerce-account .content-page__content .woocommerce form .form-row label { font-size: 17px; }
    .woocommerce-account .content-page__content .woocommerce form .form-row input.input-text { font-size: 17px; }
    .woocommerce-account .content-page__content .woocommerce form button.button { font-size: 17px; }
    .content-page__content .woocommerce form .form-row label.woocommerce-form-login__rememberme { font-size: 16px; }
    .content-page__content .woocommerce-LostPassword { font-size: 16px; }
    .content-page__content .woocommerce form.woocommerce-ResetPassword > p:first-child { font-size: 17px; }
    .woocommerce-account .content-page__content .woocommerce form.woocommerce-EditAccountForm .form-row span em { font-size: 16px; }
    .woocommerce-account .content-page__content .woocommerce form.woocommerce-EditAccountForm legend { font-size: 18px; }
    body.woocommerce-account .content-page__content .woocommerce-MyAccount-navigation li a { font-size: 17px; }
    body.woocommerce-account .content-page__content .woocommerce-MyAccount-content { font-size: 18px; }
    body.woocommerce-account .content-page__content .woocommerce-MyAccount-navigation li a { font-size: 16px; }
}