/* ================================================================
   ACCOUNT PAGE — dark-sidebar dashboard shell for /my-account/ and
   its endpoints (Orders, Wishlist, Addresses, Account Details...).
   Layered on top of woo-forms.css, which still supplies generic
   form-field/button styling shared with checkout, plus the base
   .woocommerce-MyAccount-content card look (surface bg, radius,
   shadow, padding) that every endpoint's content sits inside
   automatically. See woocommerce/myaccount/{my-account,navigation,
   dashboard}.php for the markup this styles, and assets/js/
   account-page.js for the <1024px drawer toggle.

   Sidebar/drawer breakpoint (1024px) deliberately matches this
   theme's own existing "real sidebar → JS-toggled mobile drawer"
   convention already used by the shop filter sidebar
   (product-filter.css's .shop-layout/.filter-sidebar), not the
   simpler 768px cutoff used for the sitewide bottom tab bar.

   Elementor previously auto-generated a per-page stylesheet for this
   WP page (post-11.css) with leftover styling from before this
   dashboard existed — background/border/margin/color rules fighting
   these exact classes with !important. functions.php now dequeues
   that stylesheet entirely on is_account_page(), so the handful of
   `!important` overrides left below are ONLY for WooCommerce's own
   core CSS (woocommerce-layout.css/woocommerce-smallscreen.css/
   woocommerce.css), which stays enqueued — My Account still runs on
   WC's default templates under the hood for the endpoints this theme
   hasn't fully redesigned yet (Orders, Wishlist, Addresses, Account
   Details), so removing it would leave those looking unstyled.
   ================================================================ */

/* Gallery/Brands skip the generic .page-header (page.css) entirely by
   using their own full page templates. My Account can't — it stays on
   WooCommerce's own template path — so the generic title bar still
   renders above this shell. Hide it here, scoped via the markup
   itself rather than a page-ID selector. */
main.site-main:has(.account-page) .page-header {
    display: none;
}

/* The real width constraint turned out to be here, not on .account-page
   itself: this WP page renders through Elementor's page builder, which
   wraps everything in the theme's own sitewide `.container` (max-width:
   1280px, tuned for article-width content pages) several levels above
   .account-page in the DOM. Overriding .account-page's own max-width
   was a no-op — a descendant can't exceed what an ancestor already
   constrained it to. Scoped via :has() so this doesn't touch .container
   on any other page. */
main.site-main:has(.account-page) .container {
    max-width: 1800px;
}

/* The My Account WP page renders through a different body/template
   path than the rest of the site (confirmed live: body carries
   elementor-page-* classes and only ~24px of top padding, not the
   usual fixed-header-clearing amount every other page gets), so this
   reserves its own clearance instead of trusting ambient body padding
   — same --header-h convention as the Brands/Gallery heroes. */
.account-page {
    --header-h: calc(var(--utility-bar-h) + var(--mobile-brand-bar-h) + var(--sp-4));
    margin-top: var(--header-h);
    /* Wider cap than the sitewide --container-max (1280px, tuned for
       readable article-width content) — this is a dashboard with a
       sidebar and multi-column widgets, not body text, so capping it
       the same way left a lot of dead gray space on wide monitors. */
    max-width: 1800px;
    margin-inline: auto;
    padding: 0 var(--container-pad) clamp(var(--sp-8), 6vw, var(--sp-12));
}

@media (min-width: 768px) {
    .account-page {
        --header-h: calc(var(--utility-bar-h) + var(--nav-h) + var(--sp-6));
    }
}

/* ── Shell ────────────────────────────────────────────────────── */

.account-shell {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    position: relative; /* containing block for the <1024px drawer */
}

@media (min-width: 1024px) {
    .account-shell {
        flex-direction: row;
        align-items: stretch;
    }
}

/* ── Sidebar (desktop) / drawer (<1024px) ────────────────────── */

.account-sidebar {
    display: flex;
    flex-direction: column;
    background: var(--color-navy-dark);
    color: var(--color-white);
    padding: var(--sp-5) var(--sp-3);
}

@media (min-width: 1024px) {
    .account-sidebar {
        width: 260px;
        flex-shrink: 0;
    }
}

@media (max-width: 1023px) {
    /* WooCommerce's own core woocommerce-smallscreen.css ships
       `.woocommerce-account .woocommerce-MyAccount-content,
       .woocommerce-account .woocommerce-MyAccount-navigation
       { float: none; width: 100%; }` (2 classes, no !important, loaded
       via a `media="max-width:768px"` <link> attribute rather than a
       media query in the CSS itself) which otherwise stretches the
       drawer to full viewport width — !important on `width` alone is
       enough to cancel it, no extra specificity needed. */
    .account-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(280px, 82vw) !important;
        z-index: var(--z-modal);
        padding-top: calc(var(--sp-6) + env(safe-area-inset-top, 0px));
        box-shadow: var(--shadow-lg);
        transform: translateX(-100%);
        transition: transform var(--t-base);
        overflow-y: auto;
    }

    .account-sidebar.is-open {
        transform: translateX(0);
    }

    .account-sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--color-overlay);
        z-index: calc(var(--z-modal) - 1);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--t-base);
    }

    .account-sidebar-overlay.is-visible {
        opacity: 1;
        visibility: visible;
    }
}

@media (min-width: 1024px) {
    .account-sidebar-overlay {
        display: none;
    }
}

.account-sidebar__brand {
    display: flex;
    justify-content: center;
    padding: var(--sp-3) 0 var(--sp-6);
}

/* WooCommerce core ships `.woocommerce img { max-width: 100%; height:
   auto; }` — one class + one type (0,1,1), which out-specifies a plain
   `.account-sidebar__brand-img` rule (0,1,0) even without !important,
   so the logo was rendering at its full natural pixel size (293×241px)
   instead of the intended 30px-tall mark. !important alone wins here. */
.account-sidebar__brand-img {
    height: 30px !important;
    width: auto !important;
    max-width: 90px !important;
}

.account-nav__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.account-nav__list--footer {
    margin-top: auto;
    padding-top: var(--sp-4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* woo-forms.css's `.woocommerce-MyAccount-navigation li a` (1 class +
   2 types) out-specifies a plain `.account-nav__link` (1 class) even
   though it's the OLDER, more generic rule from this same theme —
   scoping through the sidebar (`.account-sidebar .account-nav__link`,
   2 classes) is the established fix already used for the rest of this
   file's nav rules, just needed here too. */
.account-sidebar .account-nav__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: rgba(255, 255, 255, 0.65);
    transition: background var(--t-fast), color var(--t-fast);
}

.account-sidebar .account-nav__link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--color-white);
}

.account-sidebar .account-nav__item.is-active .account-nav__link {
    background: var(--color-blue);
    color: var(--color-white);
    font-weight: var(--fw-semi);
}

.account-nav__icon {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
}

/* ── Main content pane ────────────────────────────────────────── */

.account-main {
    flex: 1;
    min-width: 0;
    padding: var(--sp-5) var(--sp-5) clamp(var(--sp-8), 5vw, var(--sp-10));
}

@media (min-width: 768px) {
    .account-main {
        padding: var(--sp-8) var(--sp-8) var(--sp-10);
    }
}

.account-main__topbar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}

.account-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    background: var(--color-white);
    color: var(--color-navy);
}

@media (min-width: 1024px) {
    .account-toggle {
        display: none;
    }
}

.account-toggle svg {
    width: 18px;
    height: 18px;
}

.account-main__eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.account-main__title {
    margin-top: var(--sp-1);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-display);
    line-height: var(--lh-tight);
    color: var(--color-navy);
}

/* ── Guest: auth panel ────────────────────────────────────────── */
/* Sits where the sidebar would be for a logged-in visitor — same flex
   position in .account-shell, same width at desktop — but branded
   instead of navigational: a real product photo (no stock imagery)
   with the sign-in copy over a navy gradient for legibility. Shows as
   a shorter top banner on mobile rather than disappearing, so the
   guest experience still feels designed there, not just functional. */
.account-auth-panel {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 200px;
    padding: var(--sp-6);
    background-image: linear-gradient(180deg, rgba(7, 25, 41, 0.35) 0%, rgba(7, 25, 41, 0.92) 100%), url('../images/facts-watch-d1milano.jpg');
    background-size: cover;
    background-position: center;
}

@media (min-width: 1024px) {
    .account-auth-panel {
        width: 320px;
        flex-shrink: 0;
        min-height: 0;
        align-items: flex-end;
        padding: var(--sp-8);
        background-image: linear-gradient(180deg, rgba(7, 25, 41, 0.15) 0%, rgba(7, 25, 41, 0.95) 75%), url('../images/facts-watch-d1milano.jpg');
    }
}

.account-auth-panel__eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

.account-auth-panel__title {
    margin-top: var(--sp-2);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-display);
    line-height: var(--lh-tight);
    color: var(--color-white);
}

.account-auth-panel__sub {
    margin-top: var(--sp-3);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.75);
    max-width: 34ch;
}

/* woo-forms.css's `.woocommerce-account .woocommerce` rule grids the
   `.woocommerce` div and gives it `gap`, written for WC's stock markup
   where the nav and content sat directly inside it as siblings. This
   template nests both one level deeper inside `.account-page`, so that
   rule now grids a single lone child — and grid `gap` still reserves
   space for the empty implicit row tracks either side of it. */
.woocommerce-account .woocommerce {
    display: block;
    gap: 0;
}

/* WooCommerce core's own woocommerce-layout.css also floats the
   content pane itself — `.woocommerce-account .woocommerce-MyAccount-
   content { float: right; width: 68%; }`, the counterpart to the
   30%-wide floated nav from WC's original 2-column layout. Nested
   inside .account-main here, that shrank the dashboard to 68% width,
   floated to the right, clipped by .account-shell's overflow:hidden —
   exactly the "right side is cut in half" gap this fixes. No
   !important on their side, so !important alone (no extra specificity
   needed) is enough to cancel it. */
.account-content {
    float: none !important;
    width: auto !important;
}

/* ── Guest: login / register ──────────────────────────────────── */

#customer_login.u-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
}

@media (min-width: 720px) {
    #customer_login.u-columns {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

#customer_login .u-column1,
#customer_login .u-column2,
.account-content > .woocommerce-form-login {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
}

#customer_login h2,
.account-content > .woocommerce-form-login + h2 {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--color-navy);
    margin-bottom: var(--sp-4);
}

/* ── Guest: login / register — split screen ──────────────────────
   Replaces the two-cards-side-by-side layout above (rules kept, now
   unused/inert, in case a future template still reaches #customer_login)
   with a single toggleable form: a dimmed product photo on desktop,
   Login/Register swapped client-side by account-page.js rather than
   both rendered stacked at once. Mobile drops the photo for a plain
   title header instead of shrinking it uselessly small. */
.auth-split {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    max-width: 1000px;
    margin-inline: auto;
}

@media (min-width: 1024px) {
    .auth-split {
        flex-direction: row;
        min-height: 600px;
    }
}

.auth-split__image {
    display: none;
}

@media (min-width: 1024px) {
    .auth-split__image {
        display: block;
        position: relative;
        flex: 0 0 42%;
        background-image: linear-gradient(180deg, rgba(7, 25, 41, 0.35) 0%, rgba(7, 25, 41, 0.85) 100%), url('../images/auth-hero-watch-lineup.webp');
        background-size: cover;
        background-position: center;
    }
}

.auth-split__logo {
    position: absolute;
    top: var(--sp-5);
    left: var(--sp-5);
    width: 56px;
    height: auto;
}

.auth-split__form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sp-8) var(--sp-6);
}

@media (min-width: 1024px) {
    .auth-split__form {
        padding: var(--sp-10) var(--sp-10);
    }
}

/* Mobile-only title bar naming the active view ("Login"/"Register") —
   the desktop split shows the same info as .auth-view__title instead,
   right above the form, so this stays hidden there. */
.auth-mobile-header {
    margin-bottom: var(--sp-6);
}

@media (min-width: 1024px) {
    .auth-mobile-header {
        display: none;
    }
}

.auth-mobile-header__title {
    font-size: var(--text-2xl);
    font-weight: var(--fw-black);
    color: var(--color-navy);
    letter-spacing: var(--ls-display);
}

.auth-view__title {
    display: none;
    font-size: var(--text-2xl);
    font-weight: var(--fw-black);
    color: var(--color-navy);
    letter-spacing: var(--ls-display);
    margin-bottom: var(--sp-2);
}

@media (min-width: 1024px) {
    .auth-view__title {
        display: block;
    }
}

.auth-view__sub {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--sp-6);
    max-width: 40ch;
}

.auth-view form {
    background: none;
    border: 0;
    padding: 0;
}

.auth-switch {
    margin-top: var(--sp-5);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
}

.auth-switch__btn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: var(--fw-bold);
    color: var(--color-blue);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-switch__btn:hover {
    color: var(--color-blue-dark);
}

.woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--sp-4);
}

.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
    width: 100%;
}

.woocommerce-form-login .lost_password {
    margin-top: var(--sp-3);
    font-size: var(--text-sm);
}

/* ── Dashboard: stat tiles ────────────────────────────────────── */

/* Single column on narrow phones — a long value like "OMR 5,704.250"
   has nowhere near enough room in a 2-up grid at 375px and was
   wrapping across 3 lines. One full-width row per stat lets the icon
   sit beside the text instead of above it, which needs far less
   width for the same content. */
.account-stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}

@media (min-width: 480px) {
    .account-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 640px) {
    .account-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.account-stat {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    min-width: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}

@media (min-width: 640px) {
    .account-stat {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-2);
    }
}

.account-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-blue);
}

.account-stat__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--color-blue);
}

.account-stat__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.account-stat__value {
    font-size: var(--text-md);
    font-weight: var(--fw-black);
    color: var(--color-navy);
    line-height: 1.25;
    white-space: nowrap;
}

@media (min-width: 640px) {
    .account-stat__value {
        /* Not nowrap here: a 4-up grid can still be tight for a long
           total like "OMR 5,704.250" depending on sidebar/container
           width. No overflow-wrap:anywhere either — if it does need
           to wrap, breaking at the space ("OMR" / "5,704.250") reads
           fine; breaking mid-number ("OMR 5,70" / "4.250") doesn't. */
        white-space: normal;
    }
}

.account-stat__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: var(--fw-medium);
}

/* ── Dashboard: widgets ───────────────────────────────────────── */

.account-widgets {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
}

@media (min-width: 900px) {
    .account-widgets {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        align-items: start;
    }
}

.account-widget {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
}

.account-widget__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-1) var(--sp-3);
    margin-bottom: var(--sp-4);
}

.account-widget__title {
    font-size: var(--text-md);
    font-weight: var(--fw-bold);
    color: var(--color-navy);
}

.account-widget__see-all {
    font-size: var(--text-xs);
    font-weight: var(--fw-semi);
    color: var(--color-blue);
}

.account-widget__hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.account-widget__empty {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.account-order-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

/* flex-wrap here (plus .account-order-row__main forced to its own
   full-width line below 480px) — cramming number+date+status+total
   into one unwrapped row left nowhere near enough width for the date
   on a 375px phone, and the status pill visibly overlapped the
   wrapped date text instead of the row growing to fit it. */
.account-order-row__link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-3) var(--sp-2);
    border-radius: var(--r-md);
    transition: background var(--t-fast);
}

.account-order-row__link:hover {
    background: var(--color-blue-subtle);
}

.account-order-row__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 100%;
    min-width: 0;
}

@media (min-width: 480px) {
    .account-order-row__main {
        flex: 1 1 auto;
    }
}

.account-order-row__number {
    font-size: var(--text-sm);
    font-weight: var(--fw-semi);
    color: var(--color-navy);
}

.account-order-row__date {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.account-order-row__total {
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    color: var(--color-navy);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

.account-order-row__link .order-status {
    flex-shrink: 0;
}

.account-spend-chart {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-2);
}

.account-spend-chart__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    flex: 1;
    min-width: 0;
}

.account-spend-chart__value {
    font-size: 10px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.account-spend-chart__track {
    display: flex;
    align-items: flex-end;
    height: 120px;
    width: 100%;
}

.account-spend-chart__bar {
    width: 100%;
    max-width: 28px;
    margin-inline: auto;
    background: var(--color-blue-subtle);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    transition: height var(--t-slow) var(--ease-out);
}

.account-spend-chart__bar.is-current {
    background: var(--color-blue);
}

.account-spend-chart__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ── Shared: empty state + pagination ─────────────────────────── */

.account-empty-state {
    text-align: center;
    padding: var(--sp-10) var(--sp-4);
}

.account-empty-state__text {
    color: var(--color-text-muted);
    margin-bottom: var(--sp-4);
}

.account-empty-state__cta {
    display: inline-flex;
    padding: var(--sp-3) var(--sp-6);
    background: transparent;
    border: 1.5px solid var(--color-blue);
    color: var(--color-blue);
    border-radius: var(--r-full);
    font-weight: var(--fw-semi);
    font-size: var(--text-sm);
    transition: border-color var(--t-fast), color var(--t-fast);
}

.account-empty-state__cta:hover {
    border-color: var(--color-blue-dark);
    color: var(--color-blue-dark);
}

.account-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    margin-top: var(--sp-5);
}

.account-pagination__link {
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-full);
    border: 1px solid var(--color-border);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--color-navy);
    transition: border-color var(--t-fast), color var(--t-fast);
}

.account-pagination__link:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
}

.account-pagination__status {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ── Orders: full list ────────────────────────────────────────── */

.account-order-list--full {
    list-style: none;
}

.account-order-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    margin-bottom: var(--sp-3);
    overflow: hidden;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.account-order-card:hover {
    border-color: var(--color-blue);
    box-shadow: var(--shadow-card-hover);
}

.account-order-card__main {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4);
    flex-wrap: wrap;
}

.account-order-card__thumbs {
    display: flex;
    flex-shrink: 0;
}

.account-order-card__thumbs img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--r-md);
    border: 2px solid var(--color-white);
    background: var(--color-white);
    margin-left: -12px;
}

.account-order-card__thumbs img:first-child {
    margin-left: 0;
}

.account-order-card__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 120px;
}

.account-order-card__number {
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    color: var(--color-navy);
}

.account-order-card__date {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.account-order-card__total {
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    color: var(--color-navy);
    white-space: nowrap;
}

.account-order-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: 0 var(--sp-4) var(--sp-4);
}

.account-order-card__action {
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-full);
    border: 1px solid var(--color-border);
    font-size: var(--text-xs);
    font-weight: var(--fw-semi);
    color: var(--color-navy);
    background: var(--color-white);
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.account-order-card__action:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
}

.account-order-card__action.view {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-white);
}

.account-order-card__action.view:hover {
    color: var(--color-white);
    opacity: 0.9;
}

/* ── Addresses ────────────────────────────────────────────────── */

.account-addresses {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}

@media (min-width: 640px) {
    .account-addresses {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.account-address-card {
    display: flex;
    flex-direction: column;
    padding: var(--sp-5);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
}

.account-address-card__header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.account-address-card__icon {
    width: 20px;
    height: 20px;
    color: var(--color-blue);
    flex-shrink: 0;
}

.account-address-card__title {
    font-size: var(--text-md);
    font-weight: var(--fw-bold);
    color: var(--color-navy);
}

.account-address-card__body {
    font-style: normal;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
    flex: 1;
}

.account-address-card__edit {
    align-self: flex-start;
    margin-top: var(--sp-4);
    padding: var(--sp-2) var(--sp-5);
    border-radius: var(--r-full);
    border: 1px solid var(--color-border);
    font-size: var(--text-sm);
    font-weight: var(--fw-semi);
    color: var(--color-navy);
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.account-address-card__edit:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
}

.account-address-form__tabs {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.account-address-form__tabs::-webkit-scrollbar {
    display: none;
}

.account-address-form__tab {
    padding: var(--sp-3) var(--sp-1);
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font-size: var(--text-sm);
    font-weight: var(--fw-semi);
    color: var(--color-text-muted);
    white-space: nowrap;
    transition: color var(--t-fast), border-color var(--t-fast);
}

.account-address-form__tab:hover {
    color: var(--color-navy);
}

.account-address-form__tab.is-active {
    color: var(--color-navy);
    border-bottom-color: var(--color-blue);
}

.account-address-form__title {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--color-navy);
    margin-bottom: var(--sp-5);
}

.account-address-form__fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--sp-4);
}

@media (min-width: 640px) {
    .account-address-form__fields {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.account-address-form__fields .form-row-wide {
    grid-column: 1 / -1;
}

.account-address-form__actions {
    margin-top: var(--sp-4);
}

/* ── Account Details form ────────────────────────────────────── */

.account-details-form__section-title {
    font-size: var(--text-md);
    font-weight: var(--fw-bold);
    color: var(--color-navy);
    margin-bottom: var(--sp-1);
}

.account-details-form__section-sub {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--sp-4);
}

.account-details-form__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--sp-4);
    margin-bottom: var(--sp-6);
}

@media (min-width: 640px) {
    .account-details-form__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.account-details-form__field--wide {
    grid-column: 1 / -1;
}

.account-details-form__hint {
    display: block;
    margin-top: var(--sp-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.account-details-form__fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-6);
}

.account-details-form__fieldset legend {
    padding: 0 var(--sp-2);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    color: var(--color-navy);
}

/* ── Wishlist (WCBoost plugin markup — CSS-only reskin, there's no
   template-override system for this third-party plugin the way there
   is for WooCommerce core) ───────────────────────────────────────── */

.wcboost-wishlist-footer {
    display: none; /* the share-button wall (13 social icons) isn't
                       needed for what's really just a personal saved-
                       items list, not a public wishlist page */
}

.wishlist_table {
    width: 100%;
    border-collapse: collapse;
}

.wishlist_table thead {
    display: none;
}

.wishlist_table tbody {
    display: block;
}

.wishlist_table tr.wcboost-wishlist-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
}

.wishlist_table td {
    display: block;
    padding: 0 !important;
    border: none !important;
}

/* WooCommerce's own responsive-table mobile CSS (woocommerce-
   smallscreen.css) prefixes each cell with its data-title attribute
   via a ::before pseudo-element below its breakpoint ("Product:",
   "Price:", "Stock status:", plus a bare ": " on cells with no title)
   — built for its default plain-table layout. This custom flex-card
   layout already conveys everything without those labels, so cancel
   the pseudo-element entirely rather than fight its content. */
.wishlist_table td::before {
    display: none !important;
    content: none !important;
}

.wishlist_table .product-thumbnail {
    order: 1;
    flex-shrink: 0;
}

.wishlist_table .product-thumbnail img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--r-md);
    background: var(--color-white);
}

.wishlist_table .product-name {
    order: 2;
    flex: 1;
    min-width: 140px;
}

.wishlist_table .product-name a {
    font-size: var(--text-sm);
    font-weight: var(--fw-semi);
    color: var(--color-navy);
}

.wishlist_table .product-price {
    order: 3;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.wishlist_table .product-price del {
    opacity: 0.6;
    margin-right: var(--sp-1);
}

.wishlist_table .product-price ins {
    text-decoration: none;
    font-weight: var(--fw-bold);
    color: var(--color-navy);
}

.wishlist_table .product-remove {
    order: 4;
}

.wishlist_table .product-remove a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 18px;
    line-height: 1;
    transition: background var(--t-fast), color var(--t-fast);
}

.wishlist_table .product-remove a:hover {
    background: var(--color-blue-subtle);
    color: var(--color-blue-dark);
}

.wishlist_table .product-stock-status {
    order: 5;
    width: 100%;
}

.wishlist_table .product-stock-status .in-stock {
    font-size: var(--text-xs);
    color: #1a7a3f;
    font-weight: var(--fw-semi);
}

.wishlist_table .product-stock-status .out-of-stock {
    font-size: var(--text-xs);
    color: #c0392b;
    font-weight: var(--fw-semi);
}

.wishlist_table .product-add-to-cart {
    order: 6;
    width: 100%;
}

.wishlist_table .product-add-to-cart .button {
    display: inline-flex;
    width: 100%;
    justify-content: center;
}