/**
 * PICS Trade Accounts — My Account Frontend
 *
 * Utilitarian-industrial design. Structured, clean, data-forward.
 *
 * LAYOUT STRATEGY
 * ---------------
 * The My Account area is wrapped by WooCommerce in <div class="woocommerce">
 * with two direct children: .woocommerce-MyAccount-navigation (the sidebar)
 * and .woocommerce-MyAccount-content (the main pane). WooCommerce's default
 * stylesheet applies `float: left; width: 30%` + `float: right; width: 68%`
 * to these — that is the root cause of the "content underneath the sidebar"
 * bug: when a theme wrapper narrows the container below ~900px the floats
 * collapse and widths overlap.
 *
 * We force `float: none` on both children and drive the layout with a flex
 * row on the parent with fixed-width sidebar + flex-1 content. `min-width:0`
 * on the content prevents long children (tables, words) from blowing out the
 * flex track.
 */

/* =========================================================================
   VARIABLES
   ========================================================================= */
:root {
    --pics-dark: #2C3440;
    --pics-dark-mid: #3d4a58;
    --pics-dark-soft: #5a6a7a;
    --pics-red: #FF293A;
    --pics-red-hover: #d41e2e;
    --pics-green: #0f834d;
    --pics-amber: #c58c00;
    --pics-amber-bg: #fdf6e3;
    --pics-green-bg: #f0faf4;
    --pics-red-bg: #fef0f0;
    --pics-border: #dfe2e6;
    --pics-border-light: #eef0f2;
    --pics-bg: #f5f6f7;
    --pics-bg-card: #ffffff;
    --pics-text: #2C3440;
    --pics-text-muted: #6b7a8a;
    --pics-radius: 4px;
    --pics-font: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
    --pics-sidebar-w: 240px;
}


/* =========================================================================
   PAGE TITLE & BASELINE TYPOGRAPHY
   =========================================================================
 *
 * On logged-in account tabs the theme's page title ("Addresses",
 * "Orders", "Account details", etc.) duplicates the currently-active
 * sidebar tab — visual redundancy and dead vertical space. Hide it.
 * The sidebar is the source of truth for "where am I?".
 *
 * We still style the title on the NON-logged-in state (login page)
 * since there's no sidebar there and the heading anchors the page.
 */
.woocommerce-account.logged-in .entry-title,
.woocommerce-account.logged-in .page-title,
.woocommerce-account.logged-in .ast-archive-title,
.woocommerce-account.logged-in article .entry-title,
.woocommerce-account.logged-in h1.entry-title,
.woocommerce-account.logged-in h1.page-title,
.woocommerce-account.logged-in .ast-archive-description,
.woocommerce-account.logged-in header.entry-header,
.woocommerce-account.logged-in header.page-header,
.woocommerce-account.logged-in .ast-archive-header,
/* Astra hero / banner wrappers that the theme may render around the page title */
.woocommerce-account.logged-in .ast-single-post-banner,
.woocommerce-account.logged-in .ast-page-header,
.woocommerce-account.logged-in .entry-banner,
.woocommerce-account.logged-in .entry-banner-region,
.woocommerce-account.logged-in .ast-hero-section,
.woocommerce-account.logged-in .ast-title-bar-wrap,
.woocommerce-account.logged-in .ast-title-bar,
.woocommerce-account.logged-in .woocommerce-breadcrumb,
/* Generic fallbacks seen on other themes */
.woocommerce-account.logged-in .page-header-wrapper,
.woocommerce-account.logged-in .site-banner,
.woocommerce-account.logged-in .hentry > .entry-header {
    display: none !important;
}

/* Fallback: if any page-title heading still slips through a theme wrapper we
   don't know about, shrink it so it can no longer collide with the sticky
   site header. Scoped to logged-in my-account only. */
.woocommerce-account.logged-in #primary h1:first-child,
.woocommerce-account.logged-in #content h1:first-child,
.woocommerce-account.logged-in main h1:first-child,
.woocommerce-account.logged-in article > header h1,
.woocommerce-account.logged-in .site-main > article h1:first-child {
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    margin: 8px 0 14px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--pics-dark, #2C3440) !important;
    opacity: 0.72;
}

/* Kept for the logged-out login page — keep a compact, branded title */
.woocommerce-account:not(.logged-in) .entry-title,
.woocommerce-account:not(.logged-in) .page-title,
.woocommerce-account:not(.logged-in) .ast-archive-title,
.woocommerce-account:not(.logged-in) article .entry-title,
.woocommerce-account:not(.logged-in) h1.entry-title,
.woocommerce-account:not(.logged-in) h1.page-title {
    font-family: var(--pics-font) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--pics-dark) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
    margin-bottom: 18px !important;
    text-align: center;
}

.woocommerce-account .woocommerce,
.woocommerce-account .woocommerce p,
.woocommerce-account .woocommerce span,
.woocommerce-account .woocommerce a,
.woocommerce-account .woocommerce li,
.woocommerce-account .woocommerce td,
.woocommerce-account .woocommerce th,
.woocommerce-account .woocommerce label,
.woocommerce-account .woocommerce input,
.woocommerce-account .woocommerce select,
.woocommerce-account .woocommerce textarea,
.woocommerce-account .woocommerce button {
    font-family: var(--pics-font);
}

.woocommerce-account .woocommerce h1 {
    font-size: 22px !important;
    font-weight: 700 !important;
    font-family: var(--pics-font) !important;
    color: var(--pics-dark) !important;
    line-height: 1.3 !important;
}
.woocommerce-account .woocommerce h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    font-family: var(--pics-font) !important;
    color: var(--pics-dark) !important;
    line-height: 1.3 !important;
}
.woocommerce-account .woocommerce h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: var(--pics-font) !important;
    color: var(--pics-dark) !important;
    line-height: 1.4 !important;
}
.woocommerce-account .woocommerce p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--pics-text);
}


/* =========================================================================
   PAGE CONTAINER — Give the account area room across all themes
   =========================================================================
 *
 * Tighten the vertical rhythm too: the theme typically adds generous
 * top padding inside its main/container wrappers. For the logged-in
 * account view we trim that so the shell sits closer to the header
 * and the UI starts near the top of the viewport.
 */
.woocommerce-account.logged-in .entry-content,
.woocommerce-account.logged-in .page-content,
.woocommerce-account.logged-in .content-area,
.woocommerce-account.logged-in .site-main,
.woocommerce-account.logged-in .site-content,
.woocommerce-account.logged-in .ast-container,
.woocommerce-account.logged-in .ast-woo-container,
.woocommerce-account.logged-in .container,
.woocommerce-account.logged-in .content-container,
.woocommerce-account.logged-in #primary,
.woocommerce-account.logged-in #content,
.woocommerce-account.logged-in .site-main > .ast-container,
.woocommerce-account.logged-in article.page {
    max-width: 1280px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* Trim the theme's big top padding on the outer wrappers */
.woocommerce-account.logged-in .site-main,
.woocommerce-account.logged-in .ast-container,
.woocommerce-account.logged-in .ast-woo-container,
.woocommerce-account.logged-in #primary,
.woocommerce-account.logged-in #content,
.woocommerce-account.logged-in .content-area {
    padding-top: 18px !important;
}
.woocommerce-account.logged-in article.page,
.woocommerce-account.logged-in .entry-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}


/* =========================================================================
   CORE LAYOUT — Sidebar + Content via flexbox
   ========================================================================= *
 *
 * Override WooCommerce's float-based layout. These rules are the
 * single source of truth for the logged-in shell.
 */

/* Parent — flex row that contains both children cleanly */
.woocommerce-account.logged-in .woocommerce {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    min-height: 560px;
    /* Contain any stray floats from theme / WooCommerce descendants */
    overflow: visible;
}

/* Kill WooCommerce's default floats & widths on both direct children */
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation,
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content {
    float: none !important;
    clear: none !important;
    position: relative !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Sidebar — fixed width, won't shrink */
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation {
    flex: 0 0 var(--pics-sidebar-w) !important;
    width: var(--pics-sidebar-w) !important;
    max-width: var(--pics-sidebar-w) !important;
    min-width: 0;
    align-self: stretch;
}

/* Content — takes remaining width, min-width:0 so long tables don't
   blow the flex track and push the sidebar. */
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}


/* =========================================================================
   SIDEBAR NAVIGATION
   ========================================================================= */
.woocommerce-account .woocommerce-MyAccount-navigation {
    background: var(--pics-dark);
    border-radius: var(--pics-radius) 0 0 var(--pics-radius);
    padding: 8px 0;
    font-family: var(--pics-font);
}

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

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0;
    padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 13px 22px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
    letter-spacing: 0.01em;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.06);
    border-left-color: rgba(255, 255, 255, 0.2);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1);
    border-left-color: var(--pics-red);
}

/* Logout link — subdued */
.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child a {
    color: rgba(255, 255, 255, 0.4) !important;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 16px;
    font-size: 13px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child a:hover {
    color: rgba(255, 255, 255, 0.7) !important;
}


/* =========================================================================
   CONTENT PANE
   ========================================================================= */
.woocommerce-account .woocommerce-MyAccount-content {
    background: var(--pics-bg);
    border-radius: 0 var(--pics-radius) var(--pics-radius) 0;
    padding: 26px 40px 36px;
    border: 1px solid var(--pics-border);
    border-left: none;
    font-family: var(--pics-font);
}

/* WooCommerce sometimes outputs a leading "Hello, {name}" paragraph or
   a section heading as the first element of the content pane. Strip
   top margin off the first child so it sits snug to the pane edge. */
.woocommerce-account .woocommerce-MyAccount-content > *:first-child,
.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-notices-wrapper:empty + *,
.woocommerce-account .woocommerce-MyAccount-content h2:first-child,
.woocommerce-account .woocommerce-MyAccount-content h3:first-child,
.woocommerce-account .woocommerce-MyAccount-content p:first-child {
    margin-top: 0 !important;
}

/* Children inside the content pane should never escape it */
.woocommerce-account .woocommerce-MyAccount-content > *,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-notices-wrapper,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-content-inner {
    max-width: 100%;
    box-sizing: border-box;
}


/* =========================================================================
   LOGIN — Card style (non logged-in state)
   ========================================================================= */
.woocommerce-account:not(.logged-in) .woocommerce {
    display: block !important;
    max-width: 460px;
    margin: 40px auto;
    padding: 0;
}

.woocommerce-account .woocommerce-form-login {
    background: var(--pics-bg-card);
    border: 1px solid var(--pics-border);
    border-radius: var(--pics-radius);
    padding: 36px 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    font-family: var(--pics-font);
}

.pics-login-header {
    text-align: center;
    margin-bottom: 8px;
}
.pics-login-header p {
    font-size: 15px;
    color: var(--pics-text-muted);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

/* Section headings */
.woocommerce-account .woocommerce-form-login h2,
.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2,
.woocommerce-account .woocommerce-column--1 h2,
.woocommerce-account .woocommerce-column--2 h2,
.woocommerce-account .woocommerce-MyAccount-content h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--pics-dark) !important;
    margin: 0 0 20px 0 !important;
    padding-bottom: 14px !important;
    border-bottom: 2px solid var(--pics-dark);
    line-height: 1.3 !important;
}

.woocommerce-account .woocommerce-Address-title h3,
.woocommerce-account .woocommerce-MyAccount-content h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--pics-dark) !important;
    margin: 0 0 16px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--pics-border);
    line-height: 1.4 !important;
}

.woocommerce-account .woocommerce-form-login .woocommerce-form-row {
    margin-bottom: 18px;
}
.woocommerce-account .woocommerce-form-login label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--pics-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.woocommerce-account .woocommerce-form-login input[type="text"],
.woocommerce-account .woocommerce-form-login input[type="email"],
.woocommerce-account .woocommerce-form-login input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    font-family: var(--pics-font);
    border: 1px solid var(--pics-border);
    border-radius: var(--pics-radius);
    background: var(--pics-bg);
    color: var(--pics-text);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.woocommerce-account .woocommerce-form-login input:focus {
    outline: none;
    border-color: var(--pics-dark);
    box-shadow: 0 0 0 2px rgba(44, 52, 64, 0.1);
    background: #fff;
}
.woocommerce-account .woocommerce-form-login .woocommerce-button,
.woocommerce-account .woocommerce-form-login button[type="submit"] {
    display: block;
    width: 100%;
    padding: 14px;
    background: var(--pics-red);
    color: #fff;
    border: none;
    border-radius: var(--pics-radius);
    font-size: 15px;
    font-weight: 700;
    font-family: var(--pics-font);
    cursor: pointer;
    transition: background 0.2s;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 8px;
}
.woocommerce-account .woocommerce-form-login .woocommerce-button:hover,
.woocommerce-account .woocommerce-form-login button[type="submit"]:hover {
    background: var(--pics-red-hover);
}
.woocommerce-account .woocommerce-form-login .woocommerce-LostPassword {
    margin-top: 16px;
    text-align: center;
}
.woocommerce-account .woocommerce-form-login .woocommerce-LostPassword a {
    font-size: 13px;
    color: var(--pics-text-muted);
    text-decoration: none;
}
.woocommerce-account .woocommerce-form-login .woocommerce-LostPassword a:hover {
    color: var(--pics-red);
}

/* =========================================================================
   PASSWORD REVEAL TOGGLE ("eye" icon)
   =========================================================================
 *
 * WooCommerce renders this as:
 *   <span class="password-input">
 *     <input type="password" class="input-text" ...>
 *     <span class="show-password-input"></span>   (eye is its ::after)
 *   </span>
 *
 * STRATEGY
 * --------
 * The toggle sits OUTSIDE the field, inline with it on the right — matching
 * the WP core login/profile treatment. `.password-input` is flipped into a
 * flex row so the eye becomes a proper sibling control (a paired toggle
 * button) instead of an absolutely-positioned overlay inside the field.
 *
 * The button renders as a square control that mirrors the input's height
 * and border treatment, so the pair reads as a single composed unit.
 * Active state (password revealed) lights the left edge in the brand red.
 */

html body .password-input,
html body form .password-input {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: 1 / -1 !important;
    float: none !important;
    clear: none !important;
}

html body .password-input > input,
html body form .password-input > input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* The toggle — a real square button sitting to the right of the input,
   matching its height via `align-self: stretch` (from the flex row above).
   Ink-on-paper with a 1px border; hover darkens the border; when the field
   actually shows the password, a red left accent lights up. */
html body .password-input > .show-password-input,
html body form .password-input > .show-password-input,
html body .woocommerce-account .show-password-input,
html body .woocommerce-page .show-password-input,
html body .woocommerce form .show-password-input,
html body form .show-password-input {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    order: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 46px !important;
    min-width: 46px !important;
    height: auto !important;
    min-height: 46px !important;
    background: var(--pics-bg) !important;
    border: 1px solid var(--pics-border) !important;
    border-radius: var(--pics-radius) !important;
    border-left: 3px solid var(--pics-border) !important;
    cursor: pointer !important;
    color: var(--pics-text-muted) !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    transition: color 0.15s ease,
                border-color 0.15s ease,
                background 0.15s ease !important;
    z-index: auto !important;
}

html body .password-input > .show-password-input:hover,
html body form .show-password-input:hover {
    color: var(--pics-dark) !important;
    background: #fff !important;
    border-color: var(--pics-dark-soft) !important;
    border-left-color: var(--pics-dark-soft) !important;
}

/* Active state — WooCommerce toggles this class on the span when the
   password is being shown. Red accent makes the "unmasked" state obvious. */
html body .password-input > .show-password-input.display-password,
html body form .show-password-input.display-password {
    color: var(--pics-dark) !important;
    background: #fff !important;
    border-color: var(--pics-dark) !important;
    border-left-color: var(--pics-red) !important;
}

/* The eye glyph lives in a pseudo-element. Keep it static and centred
   inside the (now static) button box. */
html body .show-password-input::before,
html body .show-password-input::after,
html body form .show-password-input::before,
html body form .show-password-input::after {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    display: inline-block !important;
}


/* =========================================================================
   DASHBOARD — Welcome + Card Grid + Recent Orders
   ========================================================================= */
.pics-dashboard-welcome {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 2px solid var(--pics-dark);
}
.pics-dashboard-welcome h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--pics-dark) !important;
    margin: 0 0 6px 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    line-height: 1.3 !important;
}
.pics-dashboard-company {
    font-size: 15px;
    color: var(--pics-text-muted);
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Card grid — using CSS Grid so cards never overlap regardless of theme CSS */
.pics-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 36px;
    width: 100%;
    box-sizing: border-box;
}

.pics-dashboard-card {
    background: var(--pics-bg-card);
    border: 1px solid var(--pics-border);
    border-radius: 6px;
    padding: 28px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    min-width: 0;   /* prevent grid blowout from long content */
    box-sizing: border-box;
}
.pics-dashboard-card h3 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pics-text-muted);
    margin: 0 0 18px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pics-border-light);
}
.pics-dashboard-card-detail {
    font-size: 14px;
    color: var(--pics-text-muted);
    line-height: 1.5;
    margin: 8px 0 0 0;
}
.pics-dashboard-card-detail strong {
    color: var(--pics-dark);
}

/* Status pill inside the Account Status card */
.pics-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 8px 0;
}
.pics-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}
.pics-status--active { background: var(--pics-green-bg); color: var(--pics-green); }
.pics-status--pending { background: var(--pics-amber-bg); color: var(--pics-amber); }
.pics-status--suspended { background: var(--pics-red-bg); color: #c62828; }

/* Quick links list */
.pics-dashboard-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pics-dashboard-links li {
    margin: 0;
    border-bottom: 1px solid var(--pics-border-light);
}
.pics-dashboard-links li:last-child {
    border-bottom: none;
}
.pics-dashboard-links a {
    display: block;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--pics-dark) !important;
    text-decoration: none !important;
    transition: color 0.15s;
    position: relative;
    padding-right: 20px;
}
.pics-dashboard-links a::after {
    content: '\2192';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pics-border);
    transition: color 0.15s, transform 0.15s;
    font-size: 16px;
}
.pics-dashboard-links a:hover {
    color: var(--pics-red) !important;
}
.pics-dashboard-links a:hover::after {
    color: var(--pics-red);
    transform: translateY(-50%) translateX(3px);
}


/* =========================================================================
   RECENT ORDERS TABLE (on dashboard) + generic Orders table
   ========================================================================= */
.pics-dashboard-recent-orders {
    margin-bottom: 24px;
    width: 100%;
    /* Horizontal scroll for very narrow viewports instead of blowout */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.pics-dashboard-recent-orders h3 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pics-text-muted);
    margin: 0 0 14px 0;
    border: none !important;
    padding: 0 !important;
}

.pics-orders-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--pics-bg-card);
    border: 1px solid var(--pics-border);
    border-radius: var(--pics-radius);
    overflow: hidden;
    font-size: 14px;
}
.pics-orders-table thead {
    background: var(--pics-dark);
}
.pics-orders-table thead th {
    padding: 11px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
    border: none;
    white-space: nowrap;
}
.pics-orders-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pics-border-light);
    color: var(--pics-text);
    vertical-align: middle;
}
.pics-orders-table tbody tr:last-child td { border-bottom: none; }
.pics-orders-table tbody tr:hover { background: rgba(44, 52, 64, 0.02); }

.pics-view-order-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--pics-dark) !important;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color 0.15s;
    white-space: nowrap;
}
.pics-view-order-link:hover {
    color: var(--pics-red) !important;
}


/* =========================================================================
   ORDER STATUS BADGES
   ========================================================================= */
.pics-order-status {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 2px;
    line-height: 1.4;
    white-space: nowrap;
}
.pics-order-status--processing { background: #e8f5e9; color: #2e7d32; }
.pics-order-status--completed { background: var(--pics-green-bg); color: var(--pics-green); }
.pics-order-status--on-hold { background: var(--pics-amber-bg); color: var(--pics-amber); }
.pics-order-status--pending { background: #fff3e0; color: #e65100; }
.pics-order-status--cancelled,
.pics-order-status--failed { background: var(--pics-red-bg); color: #c62828; }
.pics-order-status--refunded { background: #f3e5f5; color: #6a1b9a; }
.pics-order-status--awaiting-carriage { background: #e3f2fd; color: #1565c0; }
.pics-order-status--carriage-added { background: #fff3e0; color: #bf360c; }


/* =========================================================================
   TRADE DETAILS TABLE
   ========================================================================= */
.pics-trade-details {
    max-width: 680px;
}
.pics-details-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--pics-bg-card);
    border: 1px solid var(--pics-border);
    border-radius: var(--pics-radius);
    overflow: hidden;
    margin-bottom: 16px;
}
.pics-details-table th,
.pics-details-table td {
    padding: 14px 20px;
    font-size: 14px;
    border-bottom: 1px solid var(--pics-border-light);
    text-align: left;
    vertical-align: top;
}
.pics-details-table tr:last-child th,
.pics-details-table tr:last-child td { border-bottom: none; }
.pics-details-table th {
    width: 180px;
    font-weight: 700;
    color: var(--pics-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--pics-bg);
}
.pics-details-table td {
    color: var(--pics-text);
    font-weight: 600;
}
.pics-details-note {
    font-size: 13px;
    color: var(--pics-text-muted);
    line-height: 1.5;
}
.pics-details-note a {
    color: var(--pics-red);
    font-weight: 700;
    text-decoration: none;
}
.pics-details-note a:hover { text-decoration: underline; }


/* =========================================================================
   WOOCOMMERCE ORDERS TABLE (Orders endpoint)
   ========================================================================= */
.woocommerce-account .woocommerce-orders-table {
    font-size: 14px;
    border-collapse: collapse;
    width: 100%;
    background: var(--pics-bg-card);
    border: 1px solid var(--pics-border);
    border-radius: var(--pics-radius);
    overflow: hidden;
}
.woocommerce-account .woocommerce-orders-table thead th {
    background: var(--pics-dark);
    padding: 11px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.85);
    border: none;
}
.woocommerce-account .woocommerce-orders-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pics-border-light);
    vertical-align: middle;
}
.woocommerce-account .woocommerce-orders-table tr:last-child td { border-bottom: none; }
.woocommerce-account .woocommerce-orders-table .woocommerce-button {
    display: inline-block;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--pics-dark);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: var(--pics-radius);
    transition: background 0.15s;
}
.woocommerce-account .woocommerce-orders-table .woocommerce-button:hover {
    background: var(--pics-red);
}


/* =========================================================================
   ADDRESSES — two column grid
   =========================================================================
 *
 * WooCommerce's default stylesheet sets `.col2-set::before`/`::after`
 * clearfix pseudo-elements (`content: ""; display: table`). When the
 * parent becomes a CSS grid those pseudos turn into stray grid items
 * and push the second (shipping) address down onto a new row. We hide
 * them explicitly, and also strip WooCommerce's float / fixed width on
 * the direct column children so the grid places them cleanly.
 */
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .u-columns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px !important;
    width: 100% !important;
    box-sizing: border-box;
}

.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after,
.woocommerce-account .u-columns::before,
.woocommerce-account .u-columns::after,
.woocommerce-account .col2-set::before,
.woocommerce-account .col2-set::after {
    content: none !important;
    display: none !important;
}

.woocommerce-account .woocommerce-Addresses > .woocommerce-Address,
.woocommerce-account .u-columns > .u-column1,
.woocommerce-account .u-columns > .u-column2,
.woocommerce-account .u-columns > .col-1,
.woocommerce-account .u-columns > .col-2,
.woocommerce-account .col2-set > .col-1,
.woocommerce-account .col2-set > .col-2 {
    float: none !important;
    clear: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-account .woocommerce-Addresses address,
.woocommerce-account .u-columns address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.7;
    color: var(--pics-text);
}
.woocommerce-account .woocommerce-Address-title,
.woocommerce-account .u-column1 header,
.woocommerce-account .u-column2 header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.woocommerce-account .woocommerce-Address-title a,
.woocommerce-account .u-column1 header a,
.woocommerce-account .u-column2 header a {
    font-size: 13px;
    font-weight: 700;
    color: var(--pics-red) !important;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.woocommerce-account .woocommerce-Address-title a:hover,
.woocommerce-account .u-column1 header a:hover,
.woocommerce-account .u-column2 header a:hover {
    color: var(--pics-red-hover) !important;
    text-decoration: underline !important;
}


/* =========================================================================
   EDIT ACCOUNT / ADDRESS FORMS
   ========================================================================= */
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields {
    max-width: 640px;
}
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row label,
.woocommerce-account .woocommerce-address-fields label {
    font-size: 13px;
    font-weight: 700;
    color: var(--pics-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.woocommerce-account .woocommerce-EditAccountForm input,
.woocommerce-account .woocommerce-address-fields input,
.woocommerce-account .woocommerce-address-fields select {
    padding: 12px 14px;
    font-size: 15px;
    font-family: var(--pics-font);
    border: 1px solid var(--pics-border);
    border-radius: var(--pics-radius);
    background: var(--pics-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    max-width: 100%;
}
.woocommerce-account .woocommerce-EditAccountForm input:focus,
.woocommerce-account .woocommerce-address-fields input:focus {
    outline: none;
    border-color: var(--pics-dark);
    box-shadow: 0 0 0 2px rgba(44, 52, 64, 0.1);
    background: #fff;
}
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"],
.woocommerce-account .woocommerce-address-fields button[type="submit"] {
    padding: 13px 32px;
    background: var(--pics-red);
    color: #fff;
    border: none;
    border-radius: var(--pics-radius);
    font-size: 14px;
    font-weight: 700;
    font-family: var(--pics-font);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background 0.2s;
}
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"]:hover,
.woocommerce-account .woocommerce-address-fields button[type="submit"]:hover {
    background: var(--pics-red-hover);
}


/* =========================================================================
   NOTICES
   =========================================================================
 *
 * WooCommerce renders success/error/info notices with an icon drawn by
 * a `::before` pseudo-element that is `position: absolute; left: 1.5em`
 * (≈ 24px). If our padding-left is smaller than that, the icon overlaps
 * the message text. Reserve the left gutter with padding, lock the icon
 * position to the left padding area, and vertically centre both so the
 * layout is robust regardless of message length.
 */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error,
.woocommerce .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce .woocommerce-notices-wrapper .woocommerce-info,
.woocommerce .woocommerce-notices-wrapper .woocommerce-error {
    position: relative;
    padding: 16px 20px 16px 52px !important;
    border-radius: var(--pics-radius);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    list-style: none !important;
    margin: 0 0 20px 0;
    box-sizing: border-box;
}

.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before,
.woocommerce .woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce .woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce .woocommerce-notices-wrapper .woocommerce-error::before {
    position: absolute !important;
    top: 50% !important;
    left: 20px !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

/* Inline buttons / links inside notices should not collide with padding */
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button,
.woocommerce-account .woocommerce-error .button {
    margin-left: 12px;
}

.woocommerce-account .woocommerce-message,
.woocommerce .woocommerce-notices-wrapper .woocommerce-message {
    background: var(--pics-green-bg);
    border-left: 4px solid var(--pics-green);
    color: var(--pics-green);
}
.woocommerce-account .woocommerce-info,
.woocommerce .woocommerce-notices-wrapper .woocommerce-info {
    background: #f0f6fc;
    border-left: 4px solid #3d9cd2;
    color: #1a4f70;
}
.woocommerce-account .woocommerce-error,
.woocommerce .woocommerce-notices-wrapper .woocommerce-error {
    background: var(--pics-red-bg);
    border-left: 4px solid var(--pics-red);
    color: #c62828;
}


/* =========================================================================
   POLISH — refined micro-interactions & entrance motion
   =========================================================================
 *
 * All additions here are progressive enhancements. They layer subtle
 * motion and depth onto the existing utilitarian-industrial shell
 * without changing the underlying structure. Entrance animations are
 * keyframed with `animation-fill-mode: both` so content renders fully
 * opaque after settling (no flash-of-invisible-content if CSS is
 * delayed). A `prefers-reduced-motion` block disables all motion for
 * users who have asked the OS to limit animation.
 */

@keyframes pics-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pics-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Staggered entrance for the welcome block, cards, and orders table.
   Short, overlapping delays — feels considered, not sluggish. */
.woocommerce-account.logged-in .pics-dashboard-welcome,
.woocommerce-account.logged-in .pics-dashboard-grid,
.woocommerce-account.logged-in .pics-dashboard-recent-orders,
.woocommerce-account.logged-in .pics-trade-details,
.woocommerce-account.logged-in .woocommerce-Addresses,
.woocommerce-account.logged-in .woocommerce-EditAccountForm,
.woocommerce-account.logged-in .woocommerce-orders-table {
    animation: pics-fade-up 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.woocommerce-account.logged-in .pics-dashboard-welcome        { animation-delay: 0.00s; }
.woocommerce-account.logged-in .pics-dashboard-grid           { animation-delay: 0.06s; }
.woocommerce-account.logged-in .pics-dashboard-recent-orders  { animation-delay: 0.14s; }

.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
    animation: pics-fade-in 0.32s ease both;
}

/* Welcome block — decorative brand accent stripe tied into the
   bottom border. Reads as a "corner tag" the way shipping labels
   have marker strips. Pure CSS, prints cleanly. */
.pics-dashboard-welcome {
    position: relative;
}
.pics-dashboard-welcome::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 64px;
    height: 2px;
    background: var(--pics-red);
    z-index: 1;
}

/* Card lift on hover — a 1px rise + soft shadow. Subtle enough to
   feel tactile; cheap to animate (transform + box-shadow only). */
.pics-dashboard-card {
    transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
                border-color 0.2s ease;
    will-change: transform;
}
.pics-dashboard-card:hover {
    transform: translateY(-2px);
    border-color: var(--pics-dark-soft);
    box-shadow: 0 6px 18px rgba(44, 52, 64, 0.08);
}

/* Sidebar link — slide the label 2px on hover so clicking feels
   responsive even before the page transitions. */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    position: relative;
    transition: color 0.18s ease,
                background 0.18s ease,
                border-left-color 0.18s ease,
                padding-left 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    padding-left: 24px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    padding-left: 24px;
}

/* Orders table rows — a thin red indicator bar appears on hover
   on the leading edge of the row. Industrial receipt feel. */
.pics-orders-table tbody tr,
.woocommerce-account .woocommerce-orders-table tbody tr {
    position: relative;
    transition: background 0.15s ease;
}
.pics-orders-table tbody tr td:first-child,
.woocommerce-account .woocommerce-orders-table tbody tr td:first-child {
    position: relative;
}
.pics-orders-table tbody tr td:first-child::before,
.woocommerce-account .woocommerce-orders-table tbody tr td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--pics-red);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pics-orders-table tbody tr:hover td:first-child::before,
.woocommerce-account .woocommerce-orders-table tbody tr:hover td:first-child::before {
    transform: scaleY(0.6);
}

/* Quick links — the arrow already moves on hover; add a hairline
   left border that fades in alongside the colour change. */
.pics-dashboard-links a {
    padding-left: 0;
    transition: color 0.18s ease,
                padding-left 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pics-dashboard-links a:hover {
    padding-left: 8px;
}

/* Buttons — a micro-press on active. Users perceive latency less
   when the button visually commits to the click instantly. */
.woocommerce-account .woocommerce-form-login .woocommerce-button:active,
.woocommerce-account .woocommerce-form-login button[type="submit"]:active,
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"]:active,
.woocommerce-account .woocommerce-address-fields button[type="submit"]:active {
    transform: translateY(1px);
}

/* Input focus — a richer focus ring than the default. Layered
   using two box-shadows so the ring colour and radius stay crisp
   on focus-visible (keyboard users) without being loud on click. */
.woocommerce-account .woocommerce-form-login input:focus-visible,
.woocommerce-account .woocommerce-EditAccountForm input:focus-visible,
.woocommerce-account .woocommerce-address-fields input:focus-visible,
.woocommerce-account .woocommerce-address-fields select:focus-visible {
    box-shadow: 0 0 0 1px var(--pics-dark),
                0 0 0 4px rgba(255, 41, 58, 0.14) !important;
    border-color: var(--pics-dark) !important;
}

/* Address blocks — a soft card treatment to match the dashboard
   cards, since by default they're plain paragraphs. */
.woocommerce-account .woocommerce-Addresses > .woocommerce-Address,
.woocommerce-account .u-columns > .u-column1,
.woocommerce-account .u-columns > .u-column2 {
    background: var(--pics-bg-card);
    border: 1px solid var(--pics-border);
    border-radius: var(--pics-radius);
    padding: 24px !important;
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease;
}
.woocommerce-account .woocommerce-Addresses > .woocommerce-Address:hover,
.woocommerce-account .u-columns > .u-column1:hover,
.woocommerce-account .u-columns > .u-column2:hover {
    border-color: var(--pics-dark-soft);
    box-shadow: 0 4px 14px rgba(44, 52, 64, 0.06);
}

/* =========================================================================
   RESPONSIVE — Small laptop / large tablet (mid breakpoint)
   =========================================================================
 *
 * Between the full desktop sidebar layout and the tablet-stack breakpoint
 * there was a gap where the content pane became too narrow. Shrink the
 * sidebar and tighten the gutters here so things stay balanced.
 */
@media (max-width: 1100px) and (min-width: 901px) {
    .woocommerce-account.logged-in .woocommerce {
        --pics-sidebar-w: 200px;
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 32px 32px;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        padding: 12px 18px;
        font-size: 13px;
    }
}


/* =========================================================================
   RESPONSIVE — Tablet / Mobile navigation
   =========================================================================
 *
 * Below 900px the sidebar stacks on top of the content. Instead of the old
 * horizontal-scroll strip (which buried destinations off-screen and felt
 * flimsy on touch), the nav becomes a CSS grid of full-width tappable
 * tiles — every destination visible at once, no swiping required.
 *
 * Tiles sit on a 1px-gap grid so the subtle separators between cells come
 * from the lighter track beneath. Active tile: red top accent + lifted
 * background. Logout spans the full bottom row and stays typographically
 * subdued so it can't be mistaken for a primary destination.
 */
@media (max-width: 900px) {
    .woocommerce-account.logged-in .woocommerce {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        max-width: 100% !important;
        gap: 0 !important;
    }

    .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: var(--pics-radius) var(--pics-radius) 0 0;
        padding: 0 !important;
    }

    .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content {
        width: 100% !important;
        border-radius: 0 0 var(--pics-radius) var(--pics-radius);
        border-left: 1px solid var(--pics-border);
        border-top: none;
        padding: 22px 24px 28px;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: rgba(255, 255, 255, 0.08);
        overflow: visible;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li {
        flex: none;
        margin: 0;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 60px;
        padding: 12px 14px;
        background: var(--pics-dark);
        border-left: none;
        border-bottom: none;
        border-top: 3px solid transparent;
        white-space: normal;
        text-align: center;
        font-size: 13px;
        line-height: 1.25;
        letter-spacing: 0.02em;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
    .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
        border-left: none;
        border-bottom: none;
        border-top-color: var(--pics-red);
        background: rgba(255, 255, 255, 0.12);
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a:focus-visible {
        border-left: none;
        border-bottom: none;
        border-top-color: rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.05);
    }

    /* Logout slots into the 6th grid cell like any other nav item —
       no full-row span, no unique typography. Override the subdued
       desktop-sidebar rule (which carries !important). */
    .woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child a {
        color: #fff !important;
        margin-top: 0;
        border-top: 3px solid transparent;
        padding-top: 12px;
        padding-bottom: 12px;
        min-height: 60px;
        font-size: 13px;
        letter-spacing: 0.02em;
        text-transform: none;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child a:hover {
        color: #fff !important;
        border-top-color: rgba(255, 255, 255, 0.25);
    }

    .pics-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   RESPONSIVE — Mobile (phone)
   =========================================================================
 *
 * Below 600px we kill the theme's container gutters entirely so the
 * account area runs flush to the device edges. The old 12px of padding
 * on .ast-container / .entry-content / etc. was making the nav feel
 * floating and narrow — and on a 360px device that's ~7% of the screen
 * wasted on each side. Full-bleed reads as a native app surface rather
 * than a boxed panel.
 *
 * The nav grid also drops to 2 columns here — 3 tiles per row was too
 * cramped for readable labels at phone widths.
 */
@media (max-width: 600px) {
    .woocommerce-account.logged-in .entry-content,
    .woocommerce-account.logged-in .site-main,
    .woocommerce-account.logged-in .site-content,
    .woocommerce-account.logged-in .ast-container,
    .woocommerce-account.logged-in .container,
    .woocommerce-account.logged-in #primary,
    .woocommerce-account.logged-in #content,
    .woocommerce-account.logged-in article.page,
    /* Theme `.main` wrapper from page.php forces max-width:1400px, width:90%,
       padding:0 30px — the reason the account area looked boxed in on phones.
       Full-bleed override here so it runs flush to the device edges. */
    .woocommerce-account.logged-in .common-content-block,
    .woocommerce-account.logged-in .common-content-block .main,
    .woocommerce-account.logged-in .main {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation,
    .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        grid-template-columns: repeat(2, 1fr);
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        min-height: 58px;
        padding: 12px 12px;
        font-size: 12.5px;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 20px 16px 28px;
    }

    .pics-dashboard-welcome {
        margin-bottom: 24px;
        padding-bottom: 18px;
    }
    .pics-dashboard-welcome h2 {
        font-size: 18px !important;
    }

    .pics-dashboard-card {
        padding: 22px 20px;
    }

    .pics-orders-table {
        font-size: 13px;
    }
    .pics-orders-table thead th,
    .pics-orders-table tbody td {
        padding: 10px 12px;
    }

    .pics-details-table th,
    .pics-details-table td {
        padding: 12px 14px;
        font-size: 13px;
    }
    .pics-details-table th {
        width: 110px;
    }

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

    /* Login card — tighter padding */
    .woocommerce-account:not(.logged-in) .woocommerce {
        margin: 20px auto;
    }
    .woocommerce-account .woocommerce-form-login {
        padding: 28px 22px;
    }

    /* Hide on mobile: details-table label column is too narrow to read
       side-by-side, so stack rows vertically for clarity. */
    .pics-details-table,
    .pics-details-table tbody,
    .pics-details-table tr,
    .pics-details-table th,
    .pics-details-table td {
        display: block;
        width: 100% !important;
    }
    .pics-details-table tr {
        border-bottom: 1px solid var(--pics-border-light);
        padding: 10px 0;
    }
    .pics-details-table tr:last-child { border-bottom: none; }
    .pics-details-table th {
        padding: 10px 14px 2px !important;
        background: transparent;
        border: none;
        font-size: 11px;
    }
    .pics-details-table td {
        padding: 0 14px 10px !important;
        border: none;
        font-size: 14px;
    }
}

/* =========================================================================
   RESPONSIVE — Very small screens (≤ 420px)
   =========================================================================
 *
 * On narrow phones the status pill + ref line can collide with the card
 * padding. Tighten proportions and allow the status line to wrap cleanly.
 */
@media (max-width: 420px) {
    .pics-status { font-size: 12px; padding: 5px 10px; }
    .pics-dashboard-card { padding: 20px 16px; }
    .pics-dashboard-card h3 { font-size: 11px; margin-bottom: 14px; }
    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 18px 14px 24px;
        border-radius: 0;
    }
    .pics-dashboard-welcome h2 { font-size: 17px !important; }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        min-height: 54px;
        padding: 10px 8px;
        font-size: 12px;
        letter-spacing: 0.01em;
    }
}

/* =========================================================================
   REDUCED MOTION
   =========================================================================
 *
 * Respect the OS-level setting. Kill all entrance animations, hover
 * transforms, and transitions — but keep colour/opacity transitions
 * because those are non-vestibular and still useful for feedback.
 */
@media (prefers-reduced-motion: reduce) {
    .woocommerce-account.logged-in .pics-dashboard-welcome,
    .woocommerce-account.logged-in .pics-dashboard-grid,
    .woocommerce-account.logged-in .pics-dashboard-recent-orders,
    .woocommerce-account.logged-in .pics-trade-details,
    .woocommerce-account.logged-in .woocommerce-Addresses,
    .woocommerce-account.logged-in .woocommerce-EditAccountForm,
    .woocommerce-account.logged-in .woocommerce-orders-table,
    .woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
        animation: none !important;
    }
    .pics-dashboard-card,
    .pics-orders-table tbody tr,
    .pics-orders-table tbody tr td:first-child::before,
    .woocommerce-account .woocommerce-orders-table tbody tr td:first-child::before,
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a,
    .pics-dashboard-links a,
    .woocommerce-account .woocommerce-Addresses > .woocommerce-Address,
    .woocommerce-account .u-columns > .u-column1,
    .woocommerce-account .u-columns > .u-column2 {
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
    }
    .pics-dashboard-card:hover,
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
    .pics-dashboard-links a:hover {
        transform: none !important;
    }
}

/* =========================================================================
   PRINT
   =========================================================================
 *
 * If a trade customer prints their orders list, keep it legible:
 * drop the sidebar, strip hover effects, ensure full-width content.
 */
@media print {
    .woocommerce-account.logged-in .woocommerce {
        display: block !important;
    }
    .woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
        display: none !important;
    }
    .woocommerce-account.logged-in .woocommerce-MyAccount-content {
        border: none !important;
        padding: 0 !important;
        background: #fff !important;
    }
    .pics-dashboard-welcome,
    .pics-dashboard-grid,
    .pics-dashboard-recent-orders,
    .woocommerce-orders-table {
        animation: none !important;
    }
}