/* ============================================================
   STANRAY — ACCOUNT.CSS
   Fully consistent with main.css design system.
   Colors: --color-black, --color-white, --color-accent (#c8a96e),
           --color-gray-100/200/400/600/800, --color-error, --color-success
   Typography: --font-display (EB Garamond), --font-body (Barlow)
   ============================================================ */

/* ── Page setup ───────────────────────────────────────────── */
.woocommerce-account .site-main {
    background: var(--color-gray-100);
    min-height: 100vh;
}

/* Clear the fixed header */
.woocommerce-account .page-content {
    padding-top: calc(var(--header-height) + var(--space-lg)) !important;
}

/* Hide the generic "My account" H1 — dashboard/content has its own heading */
.woocommerce-account .page-title {
    display: none;
}

/* ── Logged-in layout: sidebar + content ──────────────────── */
.stanray-account-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    align-items: start;
    padding-bottom: var(--space-xl);
}

/* ── Sidebar navigation ───────────────────────────────────── */
.stanray-account-nav {
    position: sticky;
    top: calc(var(--header-height) + 1.5rem);
}

.stanray-account-nav__heading {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gray-400);
    margin: 1rem 0 var(--space-md);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--color-gray-200);
}

/* WooCommerce native nav — un-hide and restyle */
.woocommerce-MyAccount-navigation {
    display: block !important;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid var(--color-gray-200);
}

.woocommerce-MyAccount-navigation ul li a {
    display: block;
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gray-600);
    padding: var(--space-12) 0 var(--space-12) var(--space-md);
    text-decoration: none;
    transition: color var(--transition-fast);
    position: relative;
}

.woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--color-black);
}

.woocommerce-MyAccount-navigation ul li.is-active > a {
    color: var(--color-black);
    font-weight: 500;
}

.woocommerce-MyAccount-navigation ul li.is-active > a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 14px;
    background: #c0392c;
}

.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: var(--space-sm);
    border-top: 1px solid var(--color-gray-200);
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--color-gray-400) !important;
    font-size: 10px !important;
}

.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    color: var(--color-error) !important;
}

/* ── Content panel ────────────────────────────────────────── */
.stanray-account-content {
    background: var(--color-white);
    padding: var(--space-40);
    min-height: 50vh;
}

/* ── Page header (used in orders, profile pages) ──────────── */
.stanray-page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-gray-200);
}

.stanray-page-title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--color-black);
    margin: 0;
}

.stanray-page-count {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    letter-spacing: 0.1em;
    color: var(--color-gray-400);
    text-transform: uppercase;
}

/* ── Shared buttons ───────────────────────────────────────── */
.stanray-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--space-12) var(--space-24);
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-black);
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1;
}
.stanray-btn:hover {
   background: #c0392b;
    border-color: #c9d1d93d;
    color: #fff;
}
.woocommerce-password-strength,
div#password_strength {
    color: var(--color-error) !important;
    margin-top: -0.2rem;
}
/* Weak/bad password state — flag the input itself, not just the message
   below it. The strength meter is inserted as the next sibling of
   .password-input (see WC's password-strength-meter.js), so :has() on the
   following sibling is the only way to reach back and style the input. */
.password-input:has(+ .woocommerce-password-strength.short) .stanray-input,
.password-input:has(+ .woocommerce-password-strength.bad) .stanray-input {
    border-color: var(--color-error);
}
h2.stanray-auth__title {
    margin-top: 0px!important;
}
    /* margin-top: 0px !important; */
/* page.php's inline `.page-body a { color: var(--color-black); }` (specificity
   0,0,1,1) wraps the My Account page and outranks .stanray-btn alone
   (0,0,1,0) — every .stanray-btn under .page-body needs this reasserted per
   variant, or it renders black-on-black (this affects any pre-existing
   .stanray-btn in My Account, not just the address book). */
.page-body a.stanray-btn { color: var(--color-white); }
.page-body a.stanray-btn:hover { color: white; }
.page-body a.stanray-btn--outline { color: var(--color-black); }
.page-body a.stanray-btn--outline:hover { color: var(--color-white); }
.page-body a.stanray-btn--ghost { color: var(--color-gray-600); }
.page-body a.stanray-btn--ghost:hover { color: var(--color-black); }
.page-body a.stanray-btn--primary { color: var(--color-black); }

.stanray-btn--full { width: 100%; }

.stanray-btn--xs {
    padding: var(--space-sm) var(--space-md);
    font-size: 10px;
    letter-spacing: 0.08em;
}

/* Outline variant */
.stanray-btnn,
.stanray-btn--outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--space-12) var(--space-24);
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    color: var(--color-black);
    border: 1px solid var(--color-black);
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1;
}
.stanray-btnn:hover,
.stanray-btn--outline:hover {
    background: var(--color-black);
    color: var(--color-white);
}
.stanray-btnn.stanray-btn--xs {
    padding: var(--space-sm) var(--space-md);
    font-size: 10px;
}

/* Ghost variant */
.stanray-btn--ghost {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    border-color: var(--color-gray-200);
}
.stanray-btn--ghost:hover {
    background: var(--color-gray-200);
    color: var(--color-black);
    border-color: var(--color-gray-200);
}

/* Primary (white bg, black text — for use on dark BG) */
.stanray-btn--primary {
    background: var(--color-white);
    color: var(--color-black);
    border-color: var(--color-white);
}
.stanray-btn--primary:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-100);
}

/* ── Form fields (shared) ─────────────────────────────────── */
.stanray-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: var(--space-20);
}

.stanray-field label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-gray-600);
}

.stanray-field .required { color: var(--color-error); }
.stanray-optional { color: var(--color-gray-400); font-size: 9px; }

.stanray-input {
    width: 100%;
    padding: var(--space-12) var(--space-md);
    border: 1px solid var(--color-gray-200);
    border-radius: 0;
    background: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 300;
    color: var(--color-black);
    outline: none;
    transition: border-color var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.stanray-input:focus {
    border-color: var(--color-black);
}

.stanray-input::placeholder { color: var(--color-gray-400); }

/* ── Password field with show/hide toggle ─────────────────── */
.stanray-input-wrap {
    position: relative;
}

.stanray-input-wrap .stanray-input {
    padding-right: calc(var(--space-md) + 26px);
}

.stanray-toggle-password {
    position: absolute;
    top: 50%;
    right: var(--space-sm);
    transform: translateY(-50%);
    display: flex;

    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-gray-400);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.stanray-toggle-password:hover,
.stanray-toggle-password:focus-visible {
    color: var(--color-black);
}

/* main.css sets a global `svg { display: block; }`, which overrides the
   browser's default `[hidden]` styling — restate it here with higher
   specificity so only one icon shows at a time. */
.stanray-toggle-password svg[hidden] {
    display: none;
}

.stanray-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.stanray-field--row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-24);
}

.stanray-field__hint {
    font-size: 11px;
    color: var(--color-gray-400);
    letter-spacing: 0.03em;
    margin-top: var(--space-xs);
}

.stanray-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--color-gray-600);
    cursor: pointer;
}

.stanray-checkbox input { accent-color: var(--color-black); }

.stanray-form-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding-top: var(--space-sm);
    flex-wrap: wrap;
}

/* ── Auth page (Login / Register) ─────────────────────────── */
.woocommerce-account:not(.logged-in) .page-body,
.stanray-auth {
    background: var(--color-white);
    max-width: 960px;
    margin: 0 auto;
}

.stanray-auth {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 0 3rem;
    margin-top:2rem;
    padding: var(--space-48);
}

.stanray-auth__divider {
    width: 1px;
    background: var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stanray-auth__divider span {
    background: var(--color-white);
    color: var(--color-gray-400);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: var(--space-sm) 0;
}

.stanray-auth__panel-inner { padding: 0; }

.stanray-auth__title {
    font-family: var(--font-body);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-black);
    margin-bottom: var(--space-xs);
}

.stanray-auth__sub {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-gray-400);
    letter-spacing: 0.04em;
    margin-bottom: var(--space-lg);
}

.stanray-auth__forgot {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gray-600);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}
.stanray-auth__forgot:hover { color: var(--color-black); }

.stanray-auth__note {
    font-size: 11px;
    color: var(--color-gray-400);
    letter-spacing: 0.04em;
    margin-bottom: var(--space-md);
    line-height: 1.6;
}

/* Single-panel variant — lost/reset password, confirmation screens.
   The base .stanray-auth grid is hardcoded for the two-column login/register
   layout (panel / 1px divider / panel); this collapses it to one centered
   column and caps the width so a lone form doesn't stretch full-bleed. */
.stanray-auth--single {
    display: block;
    max-width: 480px;
    margin-top: 0;
    padding: var(--space-lg) var(--space-lg) var(--space-48);
}

.stanray-auth__back {
    display: block;
    margin-top: var(--space-lg);
    text-align: center;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gray-600);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.stanray-auth__back:hover { color: var(--color-black); }

.stanray-auth__panel-inner--centered { text-align: center; }

.stanray-auth__sub--centered { margin-left: auto; margin-right: auto; }

.stanray-auth__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-lg);
    border-radius: 50%;
    background: var(--color-gray-100);
    color: var(--color-accent, #c8a96e);
}

/* ── Bare WC login form (core global/form-login.php) ────────
   WooCommerce's own woocommerce_login_form() calls wc_get_template(
   'global/form-login.php', ...) directly — this theme has no override for
   that path, so wherever it's used (the order-received "please log in to
   view this order" gate for orders placed by another account; the checkout
   "returning customer" toggle) it renders core's bare, unstyled markup
   instead of the myaccount/form-login.php Sign In panel. Style the core
   classes directly rather than adding a template override, since the two
   render contexts (bare page vs. the boxed my-account panel) don't share a
   wrapper to hang stanray-auth on. */
.woocommerce-form-login {
    max-width: 400px;
    margin: var(--space-lg) auto;
    padding: var(--space-24);
    border: 1px solid var(--color-gray-200);
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
}

.woocommerce-form-login .form-row { margin: 0; }

.woocommerce-form-login label {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-gray-600);
}

.woocommerce-form-login label .required { color: var(--color-error); }

.woocommerce-form-login input.input-text {
    width: 100%;
    padding: var(--space-12) var(--space-md);
    border: 1px solid var(--color-gray-200);
    border-radius: 0;
    background: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 300;
    color: var(--color-black);
    outline: none;
    transition: border-color var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.woocommerce-form-login input.input-text:focus { border-color: var(--color-black); }

/* Remember-me checkbox and the submit button share one <p class="form-row">
   in core's markup — stack them instead of leaving them crammed inline. */
.woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
}

.woocommerce-form-login__rememberme {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--color-gray-600);
    cursor: pointer;
    margin: 0;
}

.woocommerce-form-login__rememberme input { accent-color: var(--color-black); }

.woocommerce-form-login__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-12) var(--space-24);
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-black);
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1;
}

.woocommerce-form-login__submit:hover {
    background: #c0392b;
    border-color: #c9d1d93d;
}

.woocommerce-form-login .lost_password {
    margin: 0;
    font-size: 11px;
}

.woocommerce-form-login .lost_password a {
    color: var(--color-gray-600);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.woocommerce-form-login .lost_password a:hover { color: var(--color-black); }

/* ── Dashboard ────────────────────────────────────────────── */

/* Welcome bar */
.stanray-dashboard__welcome {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: var(--space-24);
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    margin-bottom: var(--space-lg);
}

.stanray-dashboard__avatar {
    width: 48px;
    height: 48px;
    border: 1px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--color-black);
    flex-shrink: 0;
    background: var(--color-white);
}

.stanray-dashboard__greeting {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-weight: 400;
    color: var(--color-black);
    margin: 0 0 var(--space-xs);
    padding-bottom:0px!important;
}
h2.stanray-dashboard__greeting {
    margin-bottom: 0px!important;
    margin-top:1rem!important;
}
.stanray-dashboard__email {
    font-family: var(--font-body);
    font-size: 14px;
    color: #c0392c;
    letter-spacing: 0.04em;
}

.stanray-dashboard__edit-btn {
    margin-left: auto;
}

/* Stats */
.stanray-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--color-gray-200);
    border: 1px solid var(--color-gray-200);
    margin-bottom: var(--space-lg);
}

.stanray-stat {
    background: var(--color-white);
    padding: var(--space-24);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
}

.stanray-stat__number {
    font-family: var(--font-body);
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-black);
    letter-spacing: -0.02em;
    line-height: 1;
}

.stanray-stat__label {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gray-400);
}

/* Quick nav */
.stanray-quick-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--color-gray-200);
    border: 1px solid var(--color-gray-200);
    margin-bottom: var(--space-lg);
}

.stanray-quick-nav__item {
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: var(--space-24) var(--space-md);
    text-decoration: none;
    color: var(--color-gray-600);
    font-family: var(--font-body);
    font-size:12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: all var(--transition-fast);
}

.stanray-quick-nav__item:hover {
    background: var(--color-gray-100);
    color: var(--color-black);
}

.stanray-quick-nav__item svg {
    color: var(--color-gray-400);
    transition: color var(--transition-fast);
}

.stanray-quick-nav__item:hover svg { color: var(--color-black); }

.stanray-quick-nav__item--danger:hover {
    color: var(--color-error);
}
.stanray-quick-nav__item--danger:hover svg { color: var(--color-error); }

/* "Write a Review" prompts on the order details page */
.stanray-order-reviews {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-gray-200);
}
.stanray-order-reviews__title {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-black);
    margin: 0 0 var(--space-md);
}
.stanray-order-reviews__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* Dashboard sections */
.stanray-dashboard__section { margin-bottom: var(--space-lg); }

.stanray-dashboard__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--color-gray-200);
}

.stanray-dashboard__section-header h3 {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-black);
    margin: 0;
}

.stanray-dashboard__section-header a {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gray-400);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.stanray-dashboard__section-header a:hover { color: var(--color-black); }

/* Mini orders list */
.stanray-orders-mini {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--color-gray-200);
    border: 1px solid var(--color-gray-200);
}

.stanray-order-row {
    display: grid;
    grid-template-columns: 110px 1fr auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: var(--space-md) var(--space-20);
    background: var(--color-white);
    transition: background var(--transition-fast);
}

.stanray-order-row:hover { background: var(--color-gray-100); }

.stanray-order-row__label {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-gray-400);
    display: block;
    margin-bottom: 2px;
}

.stanray-order-row__id a {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-black);
    text-decoration: none;
    letter-spacing: 0.02em;
}
.stanray-order-row__id a:hover { text-decoration: underline; text-underline-offset: 3px; }

.stanray-order-row__date {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
}

.stanray-order-row__total {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-black);
    font-weight: 400;
}

/* Empty state */
.stanray-dashboard__empty {
    text-align: center;
    padding: var(--space-48) var(--space-24);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    color: var(--color-gray-400);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    letter-spacing: 0.04em;
}

/* ── Orders page ──────────────────────────────────────────── */

/* Filter tabs */
.stanray-order-filters {
    display: flex;
    gap: 0;
    margin-bottom: var(--space-24);
    border-bottom: 1px solid var(--color-gray-200);
    overflow-x: auto;
}

.stanray-filter-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: var(--space-12) var(--space-20);
    margin-bottom: -1px;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.stanray-filter-tab:hover { color: var(--color-black); }
.stanray-filter-tab.is-active {
    color: var(--color-black);
    border-bottom-color: var(--color-black);
}

/* Orders table */
.stanray-orders-table {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--color-gray-200);
    border: 1px solid var(--color-gray-200);
}

.stanray-orders-table__head {
    display: grid;
    grid-template-columns: 90px 130px 110px minmax(0, 1fr) 100px 110px;
    gap: 1rem;
    padding: var(--space-sm) var(--space-20);
    background: var(--color-gray-100);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-gray-400);
}

.stanray-orders-table__row {
    display: grid;
    grid-template-columns: 90px 130px 110px minmax(0, 1fr) 100px 110px;
    align-items: center;
    gap: 1rem;
    padding: var(--space-md) var(--space-20);
    background: var(--color-white);
    transition: background var(--transition-fast);
}

.stanray-orders-table__row:hover { background: var(--color-gray-100); }

.stanray-order-number {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-black);
    text-decoration: none;
    letter-spacing: 0.02em;
}
.stanray-order-number:hover { text-decoration: underline; text-underline-offset: 3px; }

.stanray-orders-table__cell {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-gray-800);
    letter-spacing: 0.02em;
}

.stanray-orders-table__cell--items {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-gray-600);
}

.stanray-more {
    color: var(--color-gray-400);
    font-size: 10px;
}

.stanray-orders-table__cell--actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

/* Icon-only row actions (View/Pay/Cancel) — this column is only 110px wide
   (see .stanray-orders-table__row grid-template-columns above) and can now
   hold up to 3 actions, so icons read as compact row-level actions instead
   of full-size text buttons. title/aria-label on each element (orders.php)
   carry the label for tooltip + screen readers. */
.stanray-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    color: var(--color-gray-600);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.stanray-icon-btn:hover {
    background: var(--color-black);
    color: var(--color-white);
}
.stanray-icon-btn--primary { color: var(--color-black); }
.stanray-icon-btn--danger  { color: var(--color-error); }
.stanray-icon-btn--danger:hover {
    background: var(--color-error);
}
/* Same specificity issue as .stanray-btn above: page.php's inline
   `.page-body a { color: var(--color-black); }` (0,0,1,1) outranks a bare
   .stanray-icon-btn class rule (0,0,1,0) on the two link-based actions. */
.page-body a.stanray-icon-btn { color: var(--color-gray-600); }
.page-body a.stanray-icon-btn:hover { color: var(--color-white); }
.page-body a.stanray-icon-btn--primary { color: var(--color-black); }
.page-body a.stanray-icon-btn--primary:hover { color: var(--color-white); }

/* Pagination */
.stanray-pagination {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: var(--space-lg);
}

.stanray-page-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-600);
    font-family: var(--font-body);
    font-size: 11px;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.stanray-page-btn:hover,
.stanray-page-btn.is-active {
    border-color: var(--color-black);
    background: var(--color-black);
    color: var(--color-white);
}

/* ── Status badges ────────────────────────────────────────── */
.stanray-status {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid;
    border-radius: 0;
}

.stanray-status--completed,
.stanray-status--delivered {
    color: var(--color-success);
    border-color: rgba(58,122,58,0.3);
    background: rgba(58,122,58,0.06);
}
.stanray-status--processing {
    color: var(--color-accent);
    border-color: rgba(200,169,110,0.4);
    background: rgba(200,169,110,0.06);
}
.stanray-status--on-hold {
    color: var(--color-gray-600);
    border-color: var(--color-gray-200);
    background: var(--color-gray-100);
}
.stanray-status--cancelled {
    color: var(--color-error);
    border-color: rgba(192,57,43,0.3);
    background: rgba(192,57,43,0.04);
}
.stanray-status--pending {
    color: var(--color-gray-400);
    border-color: var(--color-gray-200);
    background: transparent;
}
.stanray-status--refunded {
    color: var(--color-gray-400);
    border-color: var(--color-gray-200);
    background: transparent;
}

/* ── Edit Profile ─────────────────────────────────────────── */



.stanray-form-section {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-200);
}
.stanray-form-section:last-of-type { border-bottom: none; }

.stanray-form-section__title {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-black);
    margin: 0 0 var(--space-24);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--color-gray-200);
}

.stanray-form-section__note {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--color-gray-400);
    letter-spacing: 0.04em;
    margin: var(--space-xs) 0 var(--space-md);
}

/* ── Address edit form ────────────────────────────────────── */
.stanray-address-form .stanray-form-section {
    border-bottom: none;
    padding-bottom: 0;
}

/* WooCommerce address field labels */
.woocommerce-address-fields label,
.woocommerce-address-fields__field-wrapper label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gray-600);
    display: block;
    margin-bottom: var(--space-sm);
}

.woocommerce-address-fields input:not([type="checkbox"]):not([type="radio"]),
.woocommerce-address-fields select,
.woocommerce-address-fields textarea {
    width: 100%;
    padding: var(--space-12) var(--space-md);
    border: 1px solid var(--color-gray-200);
    border-radius: 0;
    background: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-black);
    outline: none;
    transition: border-color var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
}
/* .stanray-checkbox ("Set as default") sits inside .woocommerce-address-fields
   — reassert its own sizing since the rule above still wins on specificity
   for anything not explicitly excluded. */
.woocommerce-address-fields .stanray-checkbox {
    display: flex;
    margin-bottom: var(--space-20);
}
.woocommerce-address-fields .stanray-checkbox input {
    width: auto;
    padding: 0;
    border: 1px solid var(--color-gray-400);
    appearance: auto;
    -webkit-appearance: auto;
}

.woocommerce-address-fields input:focus,
.woocommerce-address-fields select:focus {
    border-color: var(--color-black);
}

.woocommerce-address-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.woocommerce-address-fields__field-wrapper .form-row-wide {
    grid-column: span 2;
}

/* ── WooCommerce notices ────────────────────────────────────
   Card design lives in woocommerce.css; just widen the vertical
   rhythm to match this page's spacing. */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    margin-bottom: var(--space-24) !important;
}

/* Fix WC table on order view */
table.woocommerce-table,
table.shop_table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    background: transparent !important;
    padding: 0 !important;
}

table.woocommerce-table th,
table.shop_table th {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gray-600);
 
    border-bottom: 1px solid var(--color-gray-200);
    text-align: left;
    background: transparent;
}

table.woocommerce-table td,
table.shop_table td {
   
    border-bottom: 1px solid var(--color-gray-200);
    vertical-align: middle;
    text-align: left;
    color: var(--color-black);
}

table.woocommerce-table tfoot th,
table.woocommerce-table tfoot td,
table.shop_table tfoot th,
table.shop_table tfoot td {
    border-top: 2px solid var(--color-gray-200);
    font-weight: 500;
    border-bottom: none;
}

/* Address view cards — repeat(auto-fill, minmax(...)) instead of a rigid
   1fr 1fr: with only one saved address (the common case) two equal-width
   forced columns left half the row empty; cards now wrap only once there's
   actually room for a second one. */
.woocommerce-Addresses,
.woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 0 0 var(--space-lg);
}

.bill-address {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-lg);
}

/* .page-body h2/h3 (page.php's inline stylesheet, see the specificity note
   on .page-body a.stanray-btn above) has the same (class, element)
   specificity as a bare .stanray-page-title / .woocommerce-Address-title h3
   and loads after account.css, so it was winning ties: page titles were
   rendering in the wrong font/weight/size sitewide (not just here), and
   address cards got page.php's 2rem top margin on their "ADDRESS" heading,
   which read as an oversized empty gap at the top of every card. Scoping
   these under .page-body bumps specificity enough to win reliably. */
.page-body .stanray-page-title {
    font-family: var(--font-body);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--color-black);
    margin: 0;
}

.woocommerce-Address {
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    padding: var(--space-24);
}

.page-body .woocommerce-Address-title h3,
.page-body .woocommerce-column__title {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-black);
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--color-gray-200);
}

.woocommerce-Address address {
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--font-size-sm);
    color: var(--color-gray-800);
    line-height: 1.8;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
    /* minmax(0, 1fr), not bare 1fr — a plain 1fr track has an implicit
       `auto` minimum, which resolves to the widest descendant's min-content
       width (here, the orders table's fixed-column row further down this
       page). That silently blew this whole column out past the viewport
       (sidebar nav included, despite it having no wide content of its own —
       it just shares this same track), causing real horizontal overflow on
       phone-width screens. minmax(0, 1fr) is the standard fix: it lets the
       track actually shrink to the available space instead of growing to
       fit content, so wrapping/ellipsis/scroll inside it can do their job. */
    .stanray-account-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .stanray-account-nav {
        position: static;
    }

    .stanray-account-nav__heading { display: none; }

    .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: wrap;
        overflow-x: auto;
        border-bottom: 1px solid var(--color-gray-200);
    }

    .woocommerce-MyAccount-navigation ul li {
        border-bottom: none;
    }

    .woocommerce-MyAccount-navigation ul li a {
        padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-md);
        border-bottom: 2px solid transparent;
        white-space: nowrap;
    }

    .woocommerce-MyAccount-navigation ul li.is-active > a {
        border-bottom-color: #c0392c;
    }

    .woocommerce-MyAccount-navigation ul li.is-active > a::before { display: none; }

    .stanray-account-content { padding: var(--space-24); }

    .stanray-auth {
        grid-template-columns: 1fr;
        gap: 2rem 0;
        padding: var(--space-24);
    }
    .stanray-auth__divider { display: none; }

    .stanray-stats { grid-template-columns: 1fr 1fr; }
    .stanray-stats .stanray-stat:last-child { grid-column: span 2; }

    .stanray-quick-nav { grid-template-columns: repeat(2, 1fr); }

    /* The 6-column desktop row (order/date/status/items/total/actions)
       doesn't divide evenly into a 2-column mobile grid once items/actions
       span both columns — plain `grid-column: span 2` on those two alone
       left the auto-placement algorithm stranding status/total in
       half-empty rows with visible gaps next to them (sparse packing
       doesn't backfill earlier rows). Named areas place every cell
       explicitly instead, so there's no gap for auto-flow to get wrong. */
    .stanray-orders-table__head { display: none; }
    .stanray-orders-table__row {
        /* minmax(0, 1fr) — see .stanray-account-layout above for why bare
           1fr isn't safe here: a long item list or order number can still
           force this row (and every ancestor track sharing its column)
           wider than the viewport otherwise. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "order   status"
            "date    total"
            "items   items"
            "actions actions";
        row-gap: 0.5rem;
    }
    .stanray-orders-table__cell--order    { grid-area: order; }
    .stanray-orders-table__cell--status   { grid-area: status; justify-self: end; }
    .stanray-orders-table__cell--date     { grid-area: date; }
    .stanray-orders-table__cell--total    { grid-area: total; justify-self: end; }
    .stanray-orders-table__cell--items    { grid-area: items; white-space: normal; }
    .stanray-orders-table__cell--actions  { grid-area: actions; justify-content: flex-start; }

    .stanray-order-row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 0.5rem;
    }

    .stanray-field-row { grid-template-columns: 1fr; }

    .woocommerce-Addresses,
    .woocommerce-columns--addresses { grid-template-columns: 1fr; }

    .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; }
    .woocommerce-address-fields__field-wrapper .form-row-wide { grid-column: span 1; }
}

@media (max-width: 600px) {
    .stanray-account-content { padding: var(--space-20); }
    .stanray-stats { grid-template-columns: 1fr; }
    .stanray-stats .stanray-stat:last-child { grid-column: auto; }
    .stanray-quick-nav { grid-template-columns: repeat(2, 1fr); }
    .stanray-orders-table { overflow-x: auto; }
    .stanray-dashboard__welcome { flex-wrap: wrap; }
    .stanray-dashboard__edit-btn { margin-left: 0; }
    .stanray-points-table { overflow-x: auto; }
}

/* ── MY ACCOUNT: Points tab ───────────────────────────────────
   Same div-grid pattern as .stanray-orders-table (orders.php) — kept as its
   own class rather than reused directly since the column count/widths
   differ (4 columns here vs. 6 on Orders), but every other rule (background,
   row hover, header treatment, cell typography) is copied 1:1 for visual
   consistency between the two account history tables. */
.stanray-points-explainer {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--space-lg);
}

.stanray-points-table {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--color-gray-200);
    border: 1px solid var(--color-gray-200);
}

.stanray-points-table__head {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) 110px 110px;
    gap: 1rem;
    padding: var(--space-sm) var(--space-20);
    background: var(--color-gray-100);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-gray-400);
}

.stanray-points-table__row {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) 110px 110px;
    align-items: center;
    gap: 1rem;
    padding: var(--space-md) var(--space-20);
    background: var(--color-white);
    transition: background var(--transition-fast);
}

.stanray-points-table__row:hover { background: var(--color-gray-100); }

.stanray-points-table__cell {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-gray-800);
    letter-spacing: 0.02em;
}

.stanray-points-table__cell--date { color: var(--color-gray-600); }

.stanray-points-table__cell--amount {
    text-align: right;
    font-weight: 500;
}
.stanray-points-table__cell--credit { color: var(--color-success); }
.stanray-points-table__cell--debit { color: var(--color-error); }

@media (max-width: 900px) {
    .stanray-points-table__head { display: none; }
    .stanray-points-table__row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto;
    }
    .stanray-points-table__cell--amount { text-align: left; }
}