/**
 * Dealer Account — page CSS
 *
 * Scope: logged-in /my-account/ shell + WC customer endpoints
 * (dashboard, orders, view-order, edit-account, edit-address).
 * Guest authentication is owned by auth.css.
 *
 * Cascade position:
 *   tokens.css → base.css → components.css → account.css
 *
 * Naming convention (BEM-ish, matches .dealer-footer / .dealer-product-list):
 *   .dealer-account                    shell root
 *   .dealer-account__sidebar           left column (desktop) / profile card (mobile, tablet)
 *   .dealer-account__content           right column / content area
 *   .dealer-account__profile-card      avatar + name + email block
 *   .dealer-account__nav               sidebar nav list
 *   .dealer-account__dashboard         dashboard body wrapper
 *
 * Scoping rule: every selector starts
 * with `body.woocommerce-account` (the WC body class added on cabinet
 * pages). This prevents any rule from leaking onto non-account surfaces.
 *
 * Breakpoints (matches CSS-FOUNDATION-GUIDE.md):
 *   default                       mobile  (< 768px)
 *   @media (min-width: 768px)     tablet
 *   @media (min-width: 1024px)    desktop
 *
 * CSS budget: <= 60 KB raw / <= 10 KB gzipped.
 * Comments are intentionally preserved per project convention — the
 * cost is gzip-compressed and the file is conditionally loaded only on
 * cabinet pages. See docs/systems/ACCOUNT-SYSTEM.md §11.
 *
 * Source of truth: docs/systems/ACCOUNT-SYSTEM.md, docs/CSS-FOUNDATION-GUIDE.md.
 */

/* =========================================================================
 * 0. Storefront page-header suppression
 * -------------------------------------------------------------------------
 * Storefront's `content-page.php` emits
 *   `<header class="entry-header"><h1 class="entry-title">...`
 * OUTSIDE our shell. Until 2026-05-18 we styled that H1 in place. The
 * cabinet now renders its own `<h1 class="dealer-account__page-title">`
 * INSIDE `.dealer-account__content` (the page-chrome card defined in
 * §1.5 below + account-shell.php), so the Storefront header would be a
 * duplicate floating above the card.
 *
 * Trade-off: the duplicate H1 stays in the DOM (we don't override
 * `content-page.php` because that would affect every singular page on
 * the site). It is `display: none` here, which removes it from the
 * accessibility tree in every modern browser. WC cabinet pages already
 * carry `noindex,nofollow` via `wp_robots_sensitive_page`, so the
 * "two H1s for SEO" concern does not apply.
 *
 * Source of truth: docs/systems/ACCOUNT-SYSTEM.md §7 "Page-chrome contract".
 * ========================================================================= */

body.woocommerce-account header.entry-header,
body.woocommerce-account .entry-header {
    display: none;
}

/* =========================================================================
 * 0.5 Storefront sidebar (#secondary) suppression on cabinet pages
 * -------------------------------------------------------------------------
 * Storefront's `page.php` reserves a `#secondary` sidebar widget area on
 * the right of `#primary` for every singular page. On cabinet pages we
 * have our own sidebar (`.dealer-account__sidebar`) inside the cabinet
 * shell, so the Storefront sidebar is empty AND eats horizontal space —
 * the user reads it as "unused gap on the right of the form".
 *
 * Owner spec 2026-05-18: cabinet content uses the FULL available width.
 * We hide `#secondary` and expand `#primary` to 100% so the cabinet card
 * stretches to the edge of `.col-full`.
 *
 * Scoped to `body.woocommerce-account` — every cabinet endpoint (and
 * the guest login page) inherits this; non-cabinet pages keep their
 * sidebar widget area intact.
 * ========================================================================= */

body.woocommerce-account #primary.content-area,
body.woocommerce-account #primary {
    width: 100%;
    max-width: none;
    float: none;
    margin-right: 0;
}

body.woocommerce-account #secondary.widget-area,
body.woocommerce-account #secondary {
    display: none;
}

/* -------------------------------------------------------------------------
 * 0.6 Neutralize Storefront's WooCommerce float-grid on MyAccount
 * -------------------------------------------------------------------------
 * Storefront's `assets/css/woocommerce/woocommerce.css` ships a legacy
 * float-based layout for WC MyAccount:
 *
 *   .woocommerce-MyAccount-navigation { width: 17.65%; float: left;  margin-right: 5.88%; }
 *   .woocommerce-MyAccount-content    { width: 76.47%; float: right; margin-right: 0; }
 *
 * Our shell (`account-shell.php`) keeps those WC class names on the
 * sidebar `<nav>` and the content `<div>` for backwards-compat with
 * hooks / third-party CSS — but our own layout is CSS GRID on the
 * outer `.dealer-account` shell (`280px 1fr` at ≥1024px). Inside a
 * grid cell, a child with `width: 76.47%` still constrains itself to
 * ~76% of the track and floats right — that is the visible "empty
 * gap on the right of the content card" reported 2026-05-19.
 *
 * Fix: on cabinet pages, force both float-grid children back to
 * full track width and remove the float so grid placement governs.
 * Scoped to body.woocommerce-account so we never touch any other
 * page that might still rely on Storefront's MyAccount float layout
 * (none exists in this project, but the scope keeps it cheap).
 *
 * Added 2026-05-19.
 * ------------------------------------------------------------------------- */

body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-left: 0;
}

/* =========================================================================
 * 1. Shell layout                                                    (Step 2)
 * -------------------------------------------------------------------------
 * Mobile-first per docs/SITE-BUILD-PLAYBOOK.md.
 *
 * Mobile (default) and tablet: single column. Sidebar (profile card +
 * nav) stacks on top, content below. The profile-card / nav details
 * land in Step 3 — Step 2 only owns the outer container and stacking.
 *
 * Desktop (≥1024px): two-column grid. Fixed-width sidebar on the left,
 * fluid content on the right. The sidebar width is local — not a global
 * token — because no other module shares it.
 * ========================================================================= */

body.woocommerce-account .dealer-account {
    display: flex;
    flex-direction: column;
    align-items: stretch; 
    gap: 20px;
    margin: 0 auto;
    /* Stay within the site grid; .col-full (set in base.css) already
       applies max-width and horizontal padding to the outer page shell,
       so the shell does not redefine them here. */

    /* Vertical breathing room between the site header above and the
       footer below. Storefront's `entry-header` used to provide this
       implicit spacing via its margin-bottom (Step 6 of Phase 1); when
       we hid it in §0 on 2026-05-18 the cabinet started flush against
       the site header. Restore symmetric padding here as the canonical
       cabinet-shell top/bottom — every cabinet endpoint inherits it
       automatically because every endpoint renders inside this shell.

       Symmetric top = bottom per owner spec 2026-05-18:
         mobile  40 / 40
         tablet  70 / 70
         desktop 100 / 100  */
    padding-block: 40px;
}

@media (min-width: 768px) {
    body.woocommerce-account .dealer-account {
        padding-block: 40px;
    }
}

@media (min-width: 1024px) {
    body.woocommerce-account .dealer-account {
        padding-block: 100px;
        gap: 20px !important;
    }
}

body.woocommerce-account .dealer-account__sidebar {
    /* Step 3 paints the profile card + nav. Step 2 leaves it as a plain
       block element so the WC default navigation.php still renders
       inside it without visual breakage. */
}

body.woocommerce-account .dealer-account__content {
    min-width: 0;
    /* min-width: 0 lets long content (e.g. order tables) respect the
       grid track and wrap instead of forcing horizontal overflow.

       Card chrome (background / border / radius / padding) is applied
       in §1.5 below so it can vary at breakpoints without duplicating
       the layout rule. */
}

@media (min-width: 1024px) {
    body.woocommerce-account .dealer-account {
        display: grid;
        grid-template-columns: 280px 1fr;
        /* Three named areas — sidebar (1,1), support (2,1), content spans
           both rows of column 2. The reason content SPANS both rows: when
           content is taller than the sidebar (common case), Grid sizes
           row 1 to fit the sidebar's natural height and Grid sizes row 2
           to fit the support block. Content stretches across the whole
           thing. Result: support sits directly below the sidebar with
           only `row-gap` of breathing room — never far below the content
           card's bottom. On mobile/tablet the flex-column layout above
           gives the same DOM order (sidebar → content → support), so
           support naturally lands at the bottom of the cabinet. */
        grid-template-areas:
            "sidebar content"
            "support content";
        grid-template-rows: auto 1fr;
        column-gap: 40px;
        row-gap: 20px;
        align-items: start;
    }

    body.woocommerce-account .dealer-account__sidebar {
        grid-area: sidebar;
    }

    body.woocommerce-account .dealer-account__content {
        grid-area: content;
        /* Stretch the card across both rows so it fills the right column
           visually even though its own height is governed by content. */
        align-self: stretch;
    }

    body.woocommerce-account .dealer-account__support {
        grid-area: support;
    }
}


/* =========================================================================
 * 1.5 Page-chrome contract                                          (added 2026-05-18)
 * -------------------------------------------------------------------------
 * Every cabinet endpoint renders inside the SAME card frame. The shell
 * (template-parts/account/account-shell.php) wraps WC's
 * `do_action('woocommerce_account_content')` slot with:
 *
 *   <div class="dealer-account__content">
 *       <header class="dealer-account__page-header">
 *           <h1 class="dealer-account__page-title">…</h1>
 *       </header>
 *       <div class="dealer-account__page-body">
 *           [endpoint content]
 *       </div>
 *   </div>
 *
 * Rule: NEW endpoint templates do NOT redefine the card, the title, or
 * the title spacing. They only render the body. If a future page needs
 * a distinct chrome (e.g. a full-bleed gallery view), add a BEM modifier
 * `.dealer-account__content--bare` and opt out — do not edit the default
 * card.
 *
 * Source of truth: docs/systems/ACCOUNT-SYSTEM.md §7.
 * ========================================================================= */

body.woocommerce-account .dealer-account__content {
    background-color: var(--color-white);
}

@media (min-width: 768px) {
    body.woocommerce-account .dealer-account__content {
        padding: 15px 0px;
    }
}

@media (min-width: 1024px) {
    body.woocommerce-account .dealer-account__content {
        padding: 10px;
    }
}

body.woocommerce-account .dealer-account__page-header {
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: var(--border-width-thin) solid rgba(0, 0, 0, 0.08);
}

body.woocommerce-account .dealer-account__page-title {
    margin: 0;
    font-size: var(--font-size-h1);
    font-weight: 700;
    color: var(--color-black);
    line-height: 1;
}

@media (min-width: 768px) {
    body.woocommerce-account .dealer-account__page-header {
        margin-bottom: 28px;
        padding-bottom: 20px;
    }
}

@media (min-width: 1024px) {
    body.woocommerce-account .dealer-account__page-header {
        margin-bottom: 32px;
    }
}


/* =========================================================================
 * 2. Sidebar / profile card / navigation                             (Step 3)
 * -------------------------------------------------------------------------
 * Mobile-first. On mobile and tablet the sidebar is a horizontally
 * centered card (max 480px wide) — matches Mobile/Tablet design screens.
 * On desktop it becomes the left column of the grid set in §1.
 *
 * Color / radius / spacing values are local to this module — none of
 * them are reused outside the cabinet, so they do not become tokens.
 * If any one of them surfaces in another module later, that is the
 * trigger to promote the value to tokens.css (per CSS-FOUNDATION-GUIDE).
 * ========================================================================= */

body.woocommerce-account .dealer-account__nav {
    /* Reset Storefront's <ul> defaults that bleed into <nav>. */
    margin: 0;
    padding: 0;
    list-style: none;

    /* Mobile: center the card horizontally with a sensible cap so the
       sidebar doesn't stretch edge-to-edge on tablets. */
    width: 100%;
    margin-inline: auto;
}

/* Profile card --------------------------------------------------------- */

body.woocommerce-account .dealer-account__profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 20px 20px;
    background-color: var(--color-white);
    border-radius: 12px;
    border: var(--border-width-thin) solid rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
}

body.woocommerce-account .dealer-account__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-color: rgba(3, 76, 57, 0.06);
    color: var(--color-primary);
    margin-bottom: 4px;
}

body.woocommerce-account .dealer-account__avatar svg {
    display: block;
}

body.woocommerce-account .dealer-account__profile-name {
    margin: 0;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    text-align: center;
    word-break: break-word;
}

body.woocommerce-account .dealer-account__profile-phone,
body.woocommerce-account .dealer-account__profile-email {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
    word-break: break-word;
}

/* Tighten the gap between the two contact lines (phone + email) below
   the name. The default profile-card `gap: 8px` is the right rhythm
   between the avatar/name pair and the contact block, but two contact
   lines stacked at full gap look detached. */
body.woocommerce-account .dealer-account__profile-phone + .dealer-account__profile-email {
    margin-top: -4px;
}

/* Nav list ------------------------------------------------------------- */

body.woocommerce-account .dealer-account__nav-list {
    list-style: none;
    margin: 0;
    padding: 0px 5px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

body.woocommerce-account .dealer-account__nav-item {
    margin: 0;
}

body.woocommerce-account .dealer-account__nav-link {
    display: flex !important;
    align-items: center ;
    gap: 6px;
    padding: 10px 5px !important;
    margin: 10px 0px;
    border-radius: 8px;
    color: var(--color-black);
    font-size: 14px;
    font-weight: 500;
    min-height: 30px;
    transition:
        background-color var(--motion-duration-fast) var(--motion-ease-standard),
        color var(--motion-duration-fast) var(--motion-ease-standard);
}

/* Storefront adds its default Font Awesome endpoint icons on
   `.woocommerce-MyAccount-navigation ... a::before`. Our sidebar already
   renders endpoint SVGs in `.dealer-account__nav-icon`, so suppress only
   that parent-theme pseudo layer inside the dealer account nav. */
body.woocommerce-account .dealer-account__nav .dealer-account__nav-list .dealer-account__nav-item .dealer-account__nav-link::before {
    content: none;
    display: none;
}

body.woocommerce-account .dealer-account__nav-link:hover,
body.woocommerce-account.dealer-focus-modality-ready.dealer-using-keyboard .dealer-account__nav-link:focus {
    background-color: rgba(3, 76, 57, 0.06);
    color: var(--color-primary);
}

body.woocommerce-account .dealer-account__nav-item.is-active .dealer-account__nav-link {
    color: var(--color-primary);
    font-weight: 700;
}

body.woocommerce-account .dealer-account__nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

body.woocommerce-account .dealer-account__nav-icon svg {
    display: block;
}

body.woocommerce-account .dealer-account__nav-label {
    flex: 1;
    line-height: 1;
    /* Allow long labels to wrap rather than overflow on narrow widths. */
    word-break: break-word;
}

/* Logout item: visually softer, no icon-led emphasis. The endpoint slug
   is `customer-logout`, so the stable WC class is
   `.woocommerce-MyAccount-navigation-link--customer-logout`. */
body.woocommerce-account .dealer-account__nav-item.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 4px;
}

body.woocommerce-account .dealer-account__nav-item.woocommerce-MyAccount-navigation-link--customer-logout .dealer-account__nav-link {
    color: rgba(0, 0, 0, 0.6);
}

/* Desktop layout: drop the mobile centering cap; the sidebar fills its
   grid track and no longer needs max-width. */
@media (min-width: 1024px) {
    body.woocommerce-account .dealer-account__nav {
        max-width: none;
        margin-inline: 0;
    }
}


/* =========================================================================
 * 3. CSS pass on WC default forms and tables
 * -------------------------------------------------------------------------
 * Targets stable WooCommerce class chains inside the logged-in cabinet
 * content area (`.dealer-account__content`). Guest authentication is owned
 * by auth.css and must not be styled here.
 *
 * WC account forms do not carry dealer button classes, so submit buttons
 * are painted here with the same token-driven look as `.btn-primary`.
 * ========================================================================= */
/* 3.1 Buttons --------------------------------------------------------- */
/* WC renders submit buttons with `class="woocommerce-Button button"`.
 * The base.css shim already neutralizes Storefront's purple `.button.alt`
 * skin when our `.btn-primary` variant is applied. WC's account forms do
 * not carry the variant class — so we apply the same token-driven look
 * here, scoped to the cabinet content area only. */

body.woocommerce-account .dealer-account__content .woocommerce-Button,
body.woocommerce-account .dealer-account__content button.button,
body.woocommerce-account .dealer-account__content a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--btn-height);
    padding: 0 28px;
    border: 0;
    border-radius: var(--btn-radius-pill);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-family);
    font-size: var(--font-size-btn);
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    box-shadow: var(--btn-shadow);
    transition:
        background-color var(--motion-duration-fast) var(--motion-ease-standard),
        color var(--motion-duration-fast) var(--motion-ease-standard);
}

body.woocommerce-account .dealer-account__content .woocommerce-Button:hover,
body.woocommerce-account .dealer-account__content .woocommerce-Button:focus,
body.woocommerce-account .dealer-account__content button.button:hover,
body.woocommerce-account .dealer-account__content button.button:focus,
body.woocommerce-account .dealer-account__content a.button:hover,
body.woocommerce-account .dealer-account__content a.button:focus {
    background-color: var(--color-primary);
    color: var(--color-black);
}

body.woocommerce-account .dealer-account__content .woocommerce-Button:disabled,
body.woocommerce-account .dealer-account__content .woocommerce-Button[disabled],
body.woocommerce-account .dealer-account__content button.button:disabled,
body.woocommerce-account .dealer-account__content button.button[disabled] {
    opacity: var(--btn-disabled-opacity);
    cursor: not-allowed;
}

/* 3.2 Form rows, inputs, fieldsets ----------------------------------- */
/* Inputs already pick up min-height / padding / radius / colors from
 * base.css. Here we add layout, label typography, and the WC two-column
 * row pattern (`.form-row-first` + `.form-row-last`) used in edit-account
 * and edit-address forms. */

body.woocommerce-account .dealer-account__content form.woocommerce-form,
body.woocommerce-account .dealer-account__content form.woocommerce-EditAccountForm,
body.woocommerce-account .dealer-account__content form.edit-account,
body.woocommerce-account .dealer-account__content .woocommerce-address-fields form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.woocommerce-account .dealer-account__content .form-row,
body.woocommerce-account .dealer-account__content .woocommerce-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    width: 100%;
}

body.woocommerce-account .dealer-account__content .form-row label,
body.woocommerce-account .dealer-account__content .woocommerce-form-row label {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
}

body.woocommerce-account .dealer-account__content .form-row .required,
body.woocommerce-account .dealer-account__content .woocommerce-form-row .required {
    color: var(--color-error);
    text-decoration: none;
}

body.woocommerce-account .dealer-account__content .form-row em,
body.woocommerce-account .dealer-account__content .form-row span#account_display_name_description {
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-light);
    color: rgba(0, 0, 0, 0.6);
    font-style: normal;
}

body.woocommerce-account .dealer-account__content fieldset {
    border: var(--border-width-thin) solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.woocommerce-account .dealer-account__content fieldset legend {
    padding: 0 8px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
}

/* Hide WC's literal-empty `.clear` floats — relics from a non-flex era. */
body.woocommerce-account .dealer-account__content .clear {
    display: none;
}

/* Two-column row layout for `.form-row-first` + `.form-row-last`.
 * Tablet+ gets side-by-side; mobile stacks. */
@media (min-width: 768px) {
    body.woocommerce-account .dealer-account__content form.woocommerce-form,
    body.woocommerce-account .dealer-account__content form.woocommerce-EditAccountForm,
    body.woocommerce-account .dealer-account__content .woocommerce-address-fields form {
        flex-wrap: wrap;
        gap: 15px;
    }

    body.woocommerce-account .dealer-account__content form.woocommerce-form > p,
    body.woocommerce-account .dealer-account__content form.woocommerce-form > fieldset,
    body.woocommerce-account .dealer-account__content form.woocommerce-EditAccountForm > p,
    body.woocommerce-account .dealer-account__content form.woocommerce-EditAccountForm > fieldset,
    body.woocommerce-account .dealer-account__content .woocommerce-address-fields form > p,
    body.woocommerce-account .dealer-account__content .woocommerce-address-fields form > fieldset {
        flex: 1 1 100%;
    }

    body.woocommerce-account .dealer-account__content form.woocommerce-form > p.form-row-first,
    body.woocommerce-account .dealer-account__content form.woocommerce-EditAccountForm > p.form-row-first,
    body.woocommerce-account .dealer-account__content .woocommerce-address-fields form > p.form-row-first,
    body.woocommerce-account .dealer-account__content form.woocommerce-form > p.form-row-last,
    body.woocommerce-account .dealer-account__content form.woocommerce-EditAccountForm > p.form-row-last,
    body.woocommerce-account .dealer-account__content .woocommerce-address-fields form > p.form-row-last {
        flex: 1 1 calc(50% - 8px);
    }
}

/* 3.3 Notices — plain colored text, no fill/border ------------------- */
/*
 * WC notices land inside `.dealer-account__content` via the
 * stash-and-replay pattern (§3.5f / `dealer_account_print_cabinet_notices()`).
 * They cover every success/info/error message in the cabinet: WC's own
 * (save-account-details, save-address, password-changed) AND our custom
 * ones triggered through `wc_add_notice()` (profile-extended email
 * confirmation, email-verify success, cart-merge, future modules).
 *
 * Visual treatment (owner spec 2026-05-19): plain inline text. No
 * background, no border, no padded box, no flex layout. Color alone
 * carries the meaning:
 *   .woocommerce-message  (success) → primary green
 *   .woocommerce-error    (error)   → error red
 *   .woocommerce-info     (neutral) → muted dark
 *
 * Why drop the previous tonal box:
 *   - `display: flex; justify-content: space-between` pushed inline
 *     `<strong>` children (e.g. the masked email in the "Дані збережено"
 *     confirmation) to the opposite edge of the line, making notices
 *     read as visually broken (the "криво" report 2026-05-19).
 *   - The soft tonal banner doubled the visual weight already given by
 *     the `.dealer-account__content` card around it.
 *   - WC default `<li>` items wrap as block-level paragraphs naturally,
 *     so we DO NOT need flex to lay them out.
 *
 * Responsive: text-only — no per-breakpoint rules needed. Works at
 * every viewport because the content card itself is responsive (§1.5).
 *
 * Updated 2026-05-19.
 */

body.woocommerce-account .dealer-account__content .woocommerce-notices-wrapper {
    margin: 0 0 12px;
}

body.woocommerce-account .dealer-account__content ul.woocommerce-info,
body.woocommerce-account .dealer-account__content ul.woocommerce-message,
body.woocommerce-account .dealer-account__content ul.woocommerce-error,
body.woocommerce-account .dealer-account__content div.woocommerce-info,
body.woocommerce-account .dealer-account__content div.woocommerce-message,
body.woocommerce-account .dealer-account__content div.woocommerce-error {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: var(--font-size-body);
    line-height: 1.5;
    /* Default: `.woocommerce-info` colour. Success/error overrides below. */
    color: rgba(0, 0, 0, 0.72);
    /* Strip the previous flex layout — see header comment. */
    display: block;
}

/* Suppress Storefront's `.woocommerce-{message,info,error}::before` icon.
 *
 * Storefront's `assets/css/woocommerce/woocommerce.css` ships a Font
 * Awesome 5 character on the ::before pseudo of every WC notice
 * (`font-family: "Font Awesome 5 Free"; content: "\f...";`). The icon
 * font is NOT loaded on this site, so the glyph renders as a 1×1
 * Unicode replacement square — white on the previous green background,
 * which read as a stray "white tick" floating left of the message
 * (reported 2026-05-19). The original tonal-banner style hid it by
 * accident under the tonal fill; the plain-text variant exposes it.
 *
 * Same applies to ::after — Storefront uses it as a clearfix
 * (`content: ""; display: table; clear: both`). With our plain text
 * notices there's nothing to clear, and the empty pseudo can introduce
 * an extra blank line.
 *
 * Added 2026-05-19.
 */
body.woocommerce-account .dealer-account__content ul.woocommerce-info::before,
body.woocommerce-account .dealer-account__content ul.woocommerce-message::before,
body.woocommerce-account .dealer-account__content ul.woocommerce-error::before,
body.woocommerce-account .dealer-account__content div.woocommerce-info::before,
body.woocommerce-account .dealer-account__content div.woocommerce-message::before,
body.woocommerce-account .dealer-account__content div.woocommerce-error::before,
body.woocommerce-account .dealer-account__content ul.woocommerce-info::after,
body.woocommerce-account .dealer-account__content ul.woocommerce-message::after,
body.woocommerce-account .dealer-account__content ul.woocommerce-error::after,
body.woocommerce-account .dealer-account__content div.woocommerce-info::after,
body.woocommerce-account .dealer-account__content div.woocommerce-message::after,
body.woocommerce-account .dealer-account__content div.woocommerce-error::after {
    content: none;
    display: none;
}

body.woocommerce-account .dealer-account__content ul.woocommerce-message,
body.woocommerce-account .dealer-account__content div.woocommerce-message {
    color: var(--color-primary);
}

body.woocommerce-account .dealer-account__content ul.woocommerce-error,
body.woocommerce-account .dealer-account__content div.woocommerce-error {
    color: var(--color-error);
}

body.woocommerce-account .dealer-account__content ul.woocommerce-info li,
body.woocommerce-account .dealer-account__content ul.woocommerce-message li,
body.woocommerce-account .dealer-account__content ul.woocommerce-error li {
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
}

body.woocommerce-account .dealer-account__content ul.woocommerce-info li:last-child,
body.woocommerce-account .dealer-account__content ul.woocommerce-message li:last-child,
body.woocommerce-account .dealer-account__content ul.woocommerce-error li:last-child {
    margin-bottom: 0;
}

/* Inline link inside a notice (e.g. "натисніть посилання, щоб підтвердити
 * email") should inherit the notice's semantic colour but stay underlined
 * so it remains visibly clickable on a plain-text surface. */
body.woocommerce-account .dealer-account__content .woocommerce-info a,
body.woocommerce-account .dealer-account__content .woocommerce-message a,
body.woocommerce-account .dealer-account__content .woocommerce-error a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* When a notice carries an inline CTA button (rare — WC empty-state
 * patterns like `.woocommerce-info a.button`), we still want it to read
 * as a button, not as a regular underlined link. Restore the underline
 * default and let the buttons rules in §3.1 paint the chrome. */
body.woocommerce-account .dealer-account__content .woocommerce-info a.button,
body.woocommerce-account .dealer-account__content .woocommerce-message a.button,
body.woocommerce-account .dealer-account__content .woocommerce-error a.button {
    text-decoration: none;
}

/* 3.4 Orders table --------------------------------------------------- */
/* WC's `.woocommerce-orders-table.account-orders-table` is rendered by
 * orders.php. Each row carries a status modifier class
 * `.woocommerce-orders-table__row--status-{slug}` which we use to color
 * the status cell as a pill. The pill colors come from our own neutral
 * + brand token surfaces — no new color tokens added. */

body.woocommerce-account .dealer-account__content table.woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
    font-size: var(--font-size-small);
    background-color: var(--color-white);
}

body.woocommerce-account .dealer-account__content table.woocommerce-orders-table thead {
    background-color: rgba(0, 0, 0, 0.03);
}

body.woocommerce-account .dealer-account__content table.woocommerce-orders-table th {
    text-align: left;
    padding: 12px 16px;
    font-weight: var(--font-weight-medium);
    color: rgba(0, 0, 0, 0.7);
    border-bottom: var(--border-width-thin) solid rgba(0, 0, 0, 0.08);
}

body.woocommerce-account .dealer-account__content table.woocommerce-orders-table td {
    padding: 14px 16px;
    border-bottom: var(--border-width-thin) solid rgba(0, 0, 0, 0.06);
    vertical-align: middle;
}

body.woocommerce-account .dealer-account__content table.woocommerce-orders-table tbody tr:last-child td {
    border-bottom: 0;
}

body.woocommerce-account .dealer-account__content table.woocommerce-orders-table a {
    color: var(--color-primary);
    text-decoration: none;
}

body.woocommerce-account .dealer-account__content table.woocommerce-orders-table a:hover {
    text-decoration: underline;
}

/* Status cell rendered as a small pill. */
body.woocommerce-account .dealer-account__content table.woocommerce-orders-table .woocommerce-orders-table__cell-order-status {
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-medium);
}

body.woocommerce-account .dealer-account__content table.woocommerce-orders-table .woocommerce-orders-table__cell-order-status::before {
    /* Use a wrapping inline-block via ::before is impossible; rely on
       the cell itself styled with a pill backdrop on the row class. */
    content: '';
}

body.woocommerce-account .dealer-account__content table.woocommerce-orders-table tr.woocommerce-orders-table__row .woocommerce-orders-table__cell-order-status {
    display: inline-block;
    margin: 2px 0;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: var(--color-beige-pale);
    color: var(--color-brown-dark);
    /* Token-driven default — design's "В процесі" pill color. */
}

body.woocommerce-account .dealer-account__content tr.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status {
    background-color: var(--color-beige-light);
    color: var(--color-brown-dark);
}

body.woocommerce-account .dealer-account__content tr.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status,
body.woocommerce-account .dealer-account__content tr.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status {
    background-color: var(--color-beige-pale);
    color: var(--color-brown-dark);
}

body.woocommerce-account .dealer-account__content tr.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
body.woocommerce-account .dealer-account__content tr.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status,
body.woocommerce-account .dealer-account__content tr.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status {
    background-color: rgba(167, 2, 32, 0.08);
    color: var(--color-error);
}

/* Mobile: collapse table to stacked rows. WC's `shop_table_responsive`
 * class already drives data-title-based stacking; we just need to make
 * the visual match. */
@media (max-width: 767.98px) {
    body.woocommerce-account .dealer-account__content table.woocommerce-orders-table {
        border: 0;
    }

    body.woocommerce-account .dealer-account__content table.woocommerce-orders-table thead {
        position: absolute;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        width: 1px;
        overflow: hidden;
        white-space: nowrap;
    }

    body.woocommerce-account .dealer-account__content table.woocommerce-orders-table tr {
        display: block;
        padding: 12px 0;
        border-bottom: var(--border-width-thin) solid rgba(0, 0, 0, 0.08);
    }

    body.woocommerce-account .dealer-account__content table.woocommerce-orders-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 6px 0;
        border: 0;
        text-align: right;
    }

    body.woocommerce-account .dealer-account__content table.woocommerce-orders-table td::before {
        content: attr(data-title) ":";
        font-weight: var(--font-weight-medium);
        color: rgba(0, 0, 0, 0.7);
        text-align: left;
    }
}

/* Pagination under the orders list. */
body.woocommerce-account .dealer-account__content .woocommerce-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

/* 3.5 Custom view-order details ------------------------------------- */
/* `/my-account/view-order/{id}/` is now rendered by
 * template-parts/account/account-order-detail.php. The template keeps only
 * the owner-approved v1 fields: order summary, items, totals, delivery/contact
 * snapshot, and customer comment. Downloads, customer notes/history, actions,
 * order-again, and the default billing/shipping address blocks are excluded
 * at template level, not hidden with CSS. */

body.woocommerce-account .dealer-account-order-detail {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

body.woocommerce-account .dealer-account-order-detail__summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: var(--border-width-thin) solid rgba(0, 0, 0, 0.14);
}

@media (min-width: 768px) {
    body.woocommerce-account .dealer-account-order-detail__summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
}

body.woocommerce-account .dealer-account-order-detail__summary-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

body.woocommerce-account .dealer-account-order-detail__summary-label,
body.woocommerce-account .dealer-account-order-detail__info-row dt,
body.woocommerce-account .dealer-account-order-detail__total-row dt {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.58);
}

body.woocommerce-account .dealer-account-order-detail__summary-value {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    color: var(--color-black);
    overflow-wrap: anywhere;
}

body.woocommerce-account .dealer-account-order-detail__status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: var(--color-beige-pale);
    color: var(--color-brown-dark);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

body.woocommerce-account .dealer-account-order-detail--status-completed .dealer-account-order-detail__status {
    background-color: var(--color-beige-light);
    color: var(--color-brown-dark);
}

body.woocommerce-account .dealer-account-order-detail--status-processing .dealer-account-order-detail__status,
body.woocommerce-account .dealer-account-order-detail--status-on-hold .dealer-account-order-detail__status,
body.woocommerce-account .dealer-account-order-detail--status-pending .dealer-account-order-detail__status {
    background-color: var(--color-beige-pale);
    color: var(--color-brown-dark);
}

body.woocommerce-account .dealer-account-order-detail--status-cancelled .dealer-account-order-detail__status,
body.woocommerce-account .dealer-account-order-detail--status-failed .dealer-account-order-detail__status,
body.woocommerce-account .dealer-account-order-detail--status-refunded .dealer-account-order-detail__status {
    background-color: rgba(167, 2, 32, 0.08);
    color: var(--color-error);
}

body.woocommerce-account .dealer-account-order-detail__section {
    padding-top: 24px;
    border-top: var(--border-width-thin) solid rgba(0, 0, 0, 0.14);
}

body.woocommerce-account .dealer-account-order-detail__summary + .dealer-account-order-detail__section {
    padding-top: 0;
    border-top: 0;
}

body.woocommerce-account .dealer-account-order-detail__section-title {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-black);
}

body.woocommerce-account .dealer-account-order-detail__items {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: var(--border-width-thin) solid rgba(0, 0, 0, 0.14);
    border-bottom: var(--border-width-thin) solid rgba(0, 0, 0, 0.14);
}

body.woocommerce-account .dealer-account-order-detail__item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0;
    padding: 16px 0;
    border-bottom: var(--border-width-thin) solid rgba(0, 0, 0, 0.14);
}

body.woocommerce-account .dealer-account-order-detail__item:last-child {
    border-bottom: 0;
}

@media (min-width: 768px) {
    body.woocommerce-account .dealer-account-order-detail__item {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 24px;
        align-items: start;
        padding: 18px 0;
    }
}

body.woocommerce-account .dealer-account-order-detail__item-main {
    min-width: 0;
}

body.woocommerce-account .dealer-account-order-detail__item-name {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    color: var(--color-black);
}

body.woocommerce-account .dealer-account-order-detail__item-name a {
    color: inherit;
    text-decoration: none;
}

body.woocommerce-account .dealer-account-order-detail__item-name a:hover,
body.woocommerce-account.dealer-focus-modality-ready.dealer-using-keyboard .dealer-account-order-detail__item-name a:focus {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: var(--link-text-underline-offset);
    text-decoration-thickness: var(--link-text-decoration-thickness);
}

body.woocommerce-account .dealer-account-order-detail__item-qty,
body.woocommerce-account .dealer-account-order-detail__item-meta,
body.woocommerce-account .dealer-account-order-detail__purchase-note,
body.woocommerce-account .dealer-account-order-detail__empty,
body.woocommerce-account .dealer-account-order-detail__note {
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.72);
}

body.woocommerce-account .dealer-account-order-detail__item-meta {
    margin-top: 8px;
}

body.woocommerce-account .dealer-account-order-detail__item-meta .wc-item-meta {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.woocommerce-account .dealer-account-order-detail__item-meta .wc-item-meta li {
    display: flex;
    gap: 6px;
    margin: 0;
}

body.woocommerce-account .dealer-account-order-detail__item-meta .wc-item-meta p {
    margin: 0;
}

body.woocommerce-account .dealer-account-order-detail__purchase-note {
    margin-top: 10px;
}

body.woocommerce-account .dealer-account-order-detail__purchase-note p:last-child,
body.woocommerce-account .dealer-account-order-detail__note p:last-child {
    margin-bottom: 0;
}

body.woocommerce-account .dealer-account-order-detail__item-total {
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    color: var(--color-black);
    white-space: nowrap;
}

@media (min-width: 768px) {
    body.woocommerce-account .dealer-account-order-detail__item-total {
        text-align: right;
    }
}

body.woocommerce-account .dealer-account-order-detail__totals,
body.woocommerce-account .dealer-account-order-detail__info-list {
    margin: 0;
    padding: 0;
    border-top: var(--border-width-thin) solid rgba(0, 0, 0, 0.14);
    border-bottom: var(--border-width-thin) solid rgba(0, 0, 0, 0.14);
}

body.woocommerce-account .dealer-account-order-detail__total-row,
body.woocommerce-account .dealer-account-order-detail__info-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 0;
    border-bottom: var(--border-width-thin) solid rgba(0, 0, 0, 0.14);
}

body.woocommerce-account .dealer-account-order-detail__total-row:last-child,
body.woocommerce-account .dealer-account-order-detail__info-row:last-child {
    border-bottom: 0;
}

@media (min-width: 768px) {
    body.woocommerce-account .dealer-account-order-detail__total-row,
    body.woocommerce-account .dealer-account-order-detail__info-row {
        grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
        gap: 24px;
        align-items: baseline;
    }
}

body.woocommerce-account .dealer-account-order-detail__total-row dd,
body.woocommerce-account .dealer-account-order-detail__info-row dd {
    margin: 0;
    color: var(--color-black);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    body.woocommerce-account .dealer-account-order-detail__total-row dd {
        text-align: right;
    }
}

body.woocommerce-account .dealer-account-order-detail__empty,
body.woocommerce-account .dealer-account-order-detail__note {
    margin: 0;
}

/* 3.6 Address cards (my-address.php) -------------------------------- */
/* Two-column on tablet+ (billing | shipping), single-column on mobile. */

body.woocommerce-account .dealer-account__content .woocommerce-Addresses {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 16px 0;
}

@media (min-width: 768px) {
    body.woocommerce-account .dealer-account__content .woocommerce-Addresses {
        grid-template-columns: 1fr 1fr;
    }
}

body.woocommerce-account .dealer-account__content .woocommerce-Address {
    padding: 20px;
    background-color: var(--color-white);
    border: var(--border-width-thin) solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
}

body.woocommerce-account .dealer-account__content .woocommerce-Address-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}

body.woocommerce-account .dealer-account__content .woocommerce-Address-title h2,
body.woocommerce-account .dealer-account__content .woocommerce-Address-title h3 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
}

body.woocommerce-account .dealer-account__content .woocommerce-Address-title a.edit {
    font-size: var(--font-size-small);
    color: var(--color-primary);
}

body.woocommerce-account .dealer-account__content .woocommerce-Address address {
    font-size: var(--font-size-small);
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.8);
}


/* =========================================================================
 * 4. Dashboard (loyalty + orders + address/profile summaries)       (Step 5)
 * -------------------------------------------------------------------------
 * The dashboard is the cabinet root view (`/my-account/`). It is the
 * only per-section template we override today (besides the shell
 * and the navigation). Status pill colors are inherited from §3.4
 * via shared item-status modifier classes.
 * ========================================================================= */

/* "Complete your profile" notice — replaces the legacy email-verify
 * OTP banner. Soft yellow stripe inside the dashboard profile summary,
 * single-line copy with an inline arrow link to /my-account/edit-account/.
 * Source of truth for visibility: `dealer_account_is_profile_complete()`. */

body.woocommerce-account .dealer-account__incomplete-notice {
    margin: 0;
    padding: 12px 16px;
    background-color: rgba(255, 196, 0, 0.10);
    border: var(--border-width-thin) solid rgba(255, 196, 0, 0.35);
    border-radius: 10px;
}

@media (min-width: 768px) {
    body.woocommerce-account .dealer-account__incomplete-notice {
        padding: 14px 20px;
    }
}

body.woocommerce-account .dealer-account__incomplete-notice-text {
    margin: 0;
    font-size: var(--font-size-small);
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.78);
}

body.woocommerce-account .dealer-account__incomplete-notice-link {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    text-decoration: underline;
    text-underline-offset: var(--link-text-underline-offset);
    text-decoration-thickness: var(--link-text-decoration-thickness);
    white-space: nowrap;
    margin-left: 4px;
}

body.woocommerce-account .dealer-account__incomplete-notice-link:hover,
body.woocommerce-account.dealer-focus-modality-ready.dealer-using-keyboard .dealer-account__incomplete-notice-link:focus {
    color: var(--color-black);
}

body.woocommerce-account .dealer-account__incomplete-notice-link > span {
    margin-left: 4px;
}


body.woocommerce-account .dealer-account__dashboard {
    display: flex;
    flex-direction: column;
    /* No outer gap — the dashboard child rule below provides symmetric
       padding around a thin divider, so spacing AND a visible separator
       between sections come from one source. Child blocks (loyalty strip,
       orders preview, address summary, profile summary, future Phase-2
       blocks) must not add their own margin-top / margin-bottom — the
       parent rule owns the rhythm. */
    gap: 10px;
}

/* Subtle divider between dashboard sections.
   Adjacent-sibling combinator (`* + *`) gives the rule "every dashboard
   child except the first", which renders as a thin separator above each
   subsequent block. Symmetric padding around the border keeps the rhythm
   on a single ladder per breakpoint (mobile 16, tablet 18, desktop 20). */
body.woocommerce-account .dealer-account__dashboard > * + * {
    margin-top: 15px;
    padding-top: 15px;
}

@media (min-width: 768px) {
    body.woocommerce-account .dealer-account__dashboard > * + * {
        margin-top: 10px;
        padding-top: 10px;
    }
    
    body.woocommerce-account .dealer-account__dashboard {
        gap:10px;
    }
}

@media (min-width: 1024px) {
    body.woocommerce-account .dealer-account__dashboard > * + * {
        margin-top: 20px;
        padding-top: 20px;
    }
}


/* Section header (dashboard blocks) -------------------------------- */

body.woocommerce-account .dealer-account__dashboard-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

body.woocommerce-account .dealer-account__section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0px 5px;
}

body.woocommerce-account .dealer-account__section-title {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-black);
}

body.woocommerce-account .dealer-account__section-link {
    font-size: 12px;
    font-weight: 500;
        text-decoration: underline !important;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
}

body.woocommerce-account .dealer-account__section-link:hover,
body.woocommerce-account.dealer-focus-modality-ready.dealer-using-keyboard .dealer-account__section-link:focus {
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: var(--link-text-underline-offset);
    text-decoration-thickness: var(--link-text-decoration-thickness);
}

body.woocommerce-account .dealer-account__section-link span {
    margin-left: 4px;
}

/* Account orders list ---------------------------------------------- */

body.woocommerce-account .dealer-account-orders__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: var(--color-white);
    border: var(--border-width-thin) solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

body.woocommerce-account .dealer-account-orders__item {
    margin: 0;
    border-bottom: var(--border-width-thin) solid rgba(0, 0, 0, 0.10);
}

body.woocommerce-account .dealer-account-orders__item:last-child {
    border-bottom: 0;
}

body.woocommerce-account .dealer-account-orders__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 12px 12px;
    text-decoration: none;
    color: var(--color-black);
    min-height: 44px;
    transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
}

body.woocommerce-account .dealer-account-orders__link:hover,
body.woocommerce-account.dealer-focus-modality-ready.dealer-using-keyboard .dealer-account-orders__link:focus {
    background-color: rgba(3, 76, 57, 0.04);
    color: var(--color-black);
}

body.woocommerce-account .dealer-account-orders__number {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    /* min-width: 0 + overflow-wrap allow long order numbers (e.g. orders
       prefixed by a plugin) to wrap inside the flex row instead of
       pushing the status pill out of the visible area. */
    min-width: 0;
    overflow-wrap: anywhere;
}

body.woocommerce-account .dealer-account-orders__status {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
    /* Default pill colors (processing-like). Status-specific overrides
       below. Mirrors §3.4 of this file. */
    background-color: var(--color-beige-pale);
    color: var(--color-brown-dark);
    /* Status pill never shrinks when the order number column is wide. */
    flex-shrink: 0;
}

body.woocommerce-account .dealer-account-orders__item--status-completed .dealer-account-orders__status {
    background-color: var(--color-beige-light);
    color: var(--color-brown-dark);
}

body.woocommerce-account .dealer-account-orders__item--status-processing .dealer-account-orders__status,
body.woocommerce-account .dealer-account-orders__item--status-on-hold .dealer-account-orders__status,
body.woocommerce-account .dealer-account-orders__item--status-pending .dealer-account-orders__status {
    background-color: var(--color-beige-pale);
    color: var(--color-brown-dark);
}

body.woocommerce-account .dealer-account-orders__item--status-cancelled .dealer-account-orders__status,
body.woocommerce-account .dealer-account-orders__item--status-failed .dealer-account-orders__status,
body.woocommerce-account .dealer-account-orders__item--status-refunded .dealer-account-orders__status {
    background-color: rgba(167, 2, 32, 0.08);
    color: var(--color-error);
}

@media (max-width: 767px) {
    body.woocommerce-account .dealer-account-orders__link {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 10px;
        padding: 12px 12px;
        justify-content: space-between;
    }
}

/* Orders empty state ----------------------------------------------- */

body.woocommerce-account .dealer-account-orders__empty {
    margin: 0;
    padding: 12px 12px;
    background-color: var(--color-white);
    border: var(--border-width-thin) solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    font-size: 14px;
    font-weight: var(--font-weight-light);
    color: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

body.woocommerce-account .dealer-account-orders__empty-link {
    color: var(--color-primary);
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
    text-decoration: underline;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

body.woocommerce-account .dealer-account-orders__empty-link:hover,
body.woocommerce-account.dealer-focus-modality-ready.dealer-using-keyboard .dealer-account-orders__empty-link:focus {
    color: var(--color-black);
}

body.woocommerce-account .dealer-account-orders__empty-link span {
    margin-left: 4px;
}

body.woocommerce-account .dealer-account-orders__pagination {
    margin-top: 20px;
}

/* Dashboard summary blocks --------------------------------------- */

body.woocommerce-account .dealer-account-summary-list {
    margin: 0;
    padding: 0px 12px;
    background-color: var(--color-white);
    border: var(--border-width-thin) solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

body.woocommerce-account .dealer-account-summary-list__row {
    display: flex;
    gap: 6px;
    padding: 16px 0;
    border-bottom: var(--border-width-thin) solid rgba(0, 0, 0, 0.10);
    justify-content: space-between;
    align-items: center;
}

/* Address dashboard block renders without a visible label (the section
   H2 "Ваша адреса" already labels the value). The dt is kept in DOM as
   .screen-reader-text for SR users; visually the row collapses to a
   single-column grid so the value spans the full card width. */
body.woocommerce-account .dealer-account-summary-list__row--no-label {
    grid-template-columns: 1fr;
}

body.woocommerce-account .dealer-account-summary-list__row:last-child {
    border-bottom: 0;
}

body.woocommerce-account .dealer-account-summary-list__row dt {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
    color: rgba(0, 0, 0, 0.58);
}

body.woocommerce-account .dealer-account-summary-list__row dd {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-black);
    overflow-wrap: anywhere;
}

/* Empty-state value treatment — when the customer has not provided a piece
   of data yet ("Не вказано", "Адресу ще не додано."). PHP templates add
   `.is-empty` on the <dd> to opt in. Lighter weight + dampened color so
   the empty row reads as a placeholder, not as real data. Consistent across
   dashboard summary lists AND view-order info rows (rule below). */
body.woocommerce-account .dealer-account-summary-list__row dd.is-empty,
body.woocommerce-account .dealer-account-order-detail__info-row dd.is-empty,
body.woocommerce-account .dealer-account-order-detail__summary-value.is-empty {
    color: rgba(0, 0, 0, 0.45);
    font-weight: var(--font-weight-light);
}

@media (min-width: 768px) {
    body.woocommerce-account .dealer-account-summary-list__row {
        grid-template-columns: minmax(160px, 0.3fr) minmax(0, 1fr);
        gap: 20px;
        align-items: baseline;
    }

    /* No-label row stays single-column even at tablet+. */
    body.woocommerce-account .dealer-account-summary-list__row--no-label {
        grid-template-columns: 1fr;
    }

    /* "Ваші дані" block: push values to the far right of their grid track
       so the row reads as "label left ↔ value right". Address keeps the
       default left alignment because its row is single-column. Order-detail
       info rows (view-order page) keep the default — they use a different
       grid template and a different visual intent. */
    body.woocommerce-account .dealer-account__dashboard-profile .dealer-account-summary-list__row dd {
        text-align: right;
    }
}

/* Support contact block ----------------------------------------------
 * Page-level "questions? Telegram" note. Inline TEXT link (not a
 * button) per design. The thin top border separates it from the
 * preceding block (form, summary block, table) so it reads as a footer note,
 * not another CTA.
 *
 * v1 mount: `account-edit-account.php` only. Class is intentionally
 * generic (`__support`, not `__edit-account-support`) so any other
 * endpoint can use the same markup with zero CSS changes — and if every
 * page ends up wanting it, lift the block into `account-shell.php`. */

/* Cabinet-wide support block (lives in account-shell.php as the third
   sibling of .dealer-account). The shell handles outer spacing:
     - mobile/tablet: flex-column `gap` from .dealer-account
     - desktop: `row-gap` of the cabinet grid
   so this block adds no own margin / padding / border. Visual treatment:
   small muted note, centered on mobile (reads as a cabinet footer), left
   on desktop (aligns with the sidebar above it). */

body.woocommerce-account .dealer-account__support {
    margin: 0;
    padding: 12px;
    border: var(--border-width-thin) solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
}

body.woocommerce-account .dealer-account__support-text {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.7);
}

body.woocommerce-account .dealer-account__support-link {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    text-decoration: underline;
    text-underline-offset: var(--link-text-underline-offset);
    text-decoration-thickness: var(--link-text-decoration-thickness);
}

body.woocommerce-account .dealer-account__support-link:hover,
body.woocommerce-account.dealer-focus-modality-ready.dealer-using-keyboard .dealer-account__support-link:focus {
    color: var(--color-black);
}

/* =========================================================================
 * §6 Single-address form ("Ваша адреса")
 *
 * Owns the layout for /my-account/edit-address/. Reuses the
 * `.dealer-account-form` foundation from §3.2 (label/input/hint/actions
 * already styled there) and adds:
 *   - delivery-method radio row,
 *   - city + point autocomplete dropdowns,
 *   - conditional courier-address line.
 *
 * Source of truth: docs/systems/ADDRESSES-SYSTEM.md.
 * ========================================================================= */

body.woocommerce-account .dealer-account-address__intro {
    margin: 0 0 8px;
    font-size: var(--font-size-body);
    color: rgba(0, 0, 0, 0.7);
}

body.woocommerce-account .dealer-account-address__methods {
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.woocommerce-account .dealer-account-address__legend {
    padding: 0;
    margin: 0 0 8px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
}

body.woocommerce-account .dealer-account-address__method {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
}

body.woocommerce-account .dealer-account-address__method:hover {
    border-color: rgba(0, 0, 0, 0.32);
}

body.woocommerce-account .dealer-account-address__method input[type="radio"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--color-primary);
}

body.woocommerce-account .dealer-account-address__method:has(input[type="radio"]:checked) {
    border-color: var(--color-primary);
    background-color: rgba(0, 0, 0, 0.02);
}

body.woocommerce-account .dealer-account-address__method span {
    font-size: var(--font-size-body);
    color: var(--color-black);
}

/* Autocomplete chrome --------------------------------------------------- */

body.woocommerce-account .dealer-account-address__autocomplete {
    position: relative;
}

body.woocommerce-account .dealer-account-address__results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 280px;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.woocommerce-account .dealer-account-address__option {
    appearance: none;
    background: transparent;
    border: 0;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: var(--font-size-body);
    color: var(--color-black);
    cursor: pointer;
    min-height: 40px;
}

body.woocommerce-account .dealer-account-address__option:hover,
body.woocommerce-account.dealer-focus-modality-ready.dealer-using-keyboard .dealer-account-address__option:focus {
    background-color: rgba(0, 0, 0, 0.05);
}

body.woocommerce-account .dealer-account-address__empty {
    padding: 12px;
    font-size: var(--font-size-small);
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
}

/* Courier mode: street (full row) + house/apt (50/50) ------------------- */

body.woocommerce-account .dealer-account-address__courier-group[hidden] {
    display: none;
}

body.woocommerce-account .dealer-account-address__courier-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.woocommerce-account .dealer-account-address__house-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
}

body.woocommerce-account .dealer-account-address__field--house,
body.woocommerce-account .dealer-account-address__field--apt {
    min-width: 0;
}

/* Disabled point input — same chrome, dampened ----------------------- */

body.woocommerce-account .dealer-account-form__input[disabled] {
    background-color: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.45);
    cursor: not-allowed;
}

/* Stack the form like a single column on every breakpoint — single
   address means there is no rationale for two-column layouts. */

body.woocommerce-account .dealer-account-address > * + * {
    margin-top: 16px;
}

/* =========================================================================
 * §7 Edit-profile form ("Ваші дані")
 *
 * Owns the layout for /my-account/edit-account/. The form template
 * (template-parts/account/account-edit-account.php) renders every field
 * inside `.dealer-account-form__grid`; this section turns that wrapper
 * into a 3-column grid on desktop, 2 on tablet, 1 on mobile. Field order
 * comes from the PHP registry in inc/auth/profile-extended.php — change
 * the array order there to re-order the visual grid.
 *
 * Source of truth: docs/systems/ACCOUNT-EXTENDED.md.
 * ========================================================================= */

body.woocommerce-account .dealer-account-form__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    body.woocommerce-account .dealer-account-form__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (min-width: 1024px) {
    body.woocommerce-account .dealer-account-form__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

body.woocommerce-account .dealer-account-form__field {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0; /* lets long values shrink instead of overflowing the grid cell */
}

/* The HTML5 `hidden` attribute is the single source of truth for which
 * form fields render — both the address form (`account-address.php`,
 * `account-address.js`) and any future field-level toggle rely on it.
 *
 * Browsers ship `[hidden] { display: none }` as a USER-AGENT rule, but
 * an author `display: flex` on the same element wins the cascade and
 * leaves "hidden" fields visible. That regression bit the address form
 * on 2026-05-19 — both the conditional point/courier groups AND the
 * empty autocomplete-results dropdowns were rendered visible on top of
 * the city field. Re-assert the `display: none` semantics at higher
 * specificity here so the attribute keeps working everywhere it is set.
 *
 * The rule covers every cabinet surface that currently uses `[hidden]`
 * with a custom `display` value:
 *   - `.dealer-account-form__field`   (display: flex — set above)
 *   - `.dealer-account-address__results` (display: flex — set in §6)
 *
 * New surfaces adding `[hidden]`+`display:<anything-but-none>` should
 * extend this selector list, NOT introduce ad-hoc inline `hidden` CSS.
 */
body.woocommerce-account .dealer-account-form__field[hidden],
body.woocommerce-account .dealer-account-address__results[hidden] {
    display: none;
}

body.woocommerce-account .dealer-account-form__label {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
}

body.woocommerce-account .dealer-account-form__required {
    color: var(--color-error);
    line-height: 1;
}

body.woocommerce-account .dealer-account-form__input {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px; /* touch target */
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: var(--btn-radius-pill, 999px);
    background-color: #fff;
    font-size: var(--font-size-body);
    color: var(--color-black);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

body.woocommerce-account .dealer-account-form__input::placeholder {
    color: rgba(0, 0, 0, 0.35);
}

body.woocommerce-account .dealer-account-form__input:hover {
    border-color: rgba(0, 0, 0, 0.32);
}

body.woocommerce-account .dealer-account-form__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
}

/* Readonly fields (phone in v1) — visible value, dampened look so it
   reads as "informational" rather than "broken disabled field". */
body.woocommerce-account .dealer-account-form__input[readonly] {
    background-color: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.65);
    cursor: not-allowed;
}

body.woocommerce-account .dealer-account-form__hint {
    font-size: var(--font-size-small);
    color: rgba(0, 0, 0, 0.55);
}

/* Submit row — left-aligned, sits below the grid with the same gap. */
body.woocommerce-account .dealer-account-form__actions {
    margin: 24px 0 0;
}

@media (min-width: 768px) {
    body.woocommerce-account .dealer-account-form__actions {
        margin-top: 32px;
    }
}

body.woocommerce-account .dealer-account-form__submit {
    /* Inherits .btn-primary from components.css — no skin override here. */
    min-width: 200px;
}