/**
 * My Account — restyled to follow the checkout design language
 * (see pizza-custom-features/public/css/pizza-custom-checkout.css):
 * flat/square corners, hairline borders instead of shadows, ink/muted/line
 * greys, a single store accent token, 44px controls / 48px primary CTA.
 *
 * The tokens below resolve from the shared brand token block
 * (includes/brand/brand-tokens.php); the literals are fallbacks for when that
 * block is absent. --pd-accent and the checkout's --pm-accent are now the same
 * token (--brand-accent), rather than two inline injections that happened to
 * read the same option.
 *
 * Loads after the parent/child theme CSS (dependency on promenade-restaurants-style);
 * the !important flags below are only where the parent theme's table layout
 * or its own !important rules would otherwise win.
 */

.woocommerce-account {
    --pd-ink: var(--brand-ink, #111);
    --pd-line: var(--brand-line, #e4e4e4);
    --pd-muted: var(--brand-muted, #6b6b6b);
    --pd-panel: var(--brand-panel, #fafafa);
    --pd-accent: var(--brand-accent, #c00a27);
    --pd-error: var(--brand-error, #e2401c);
    --pd-success: var(--brand-success, #2e7d32);
}

/* ------------------------------------------------------------------ *
 *  Page frame + two-column layout (logged in)
 * ------------------------------------------------------------------ */

/* the theme's .site{overflow-x:hidden} kills position:sticky (same trap as
   checkout — see pizza-custom-checkout.css) */
body.woocommerce-account #page.site {
    overflow: visible;
}

.woocommerce-account div.woocommerce {
    display: block;
    background: transparent !important;
    border: 0 !important;
    font-size: 14px;
    line-height: 1.6;
}

.logged-in.woocommerce-account div.woocommerce {
    display: flex !important;
    align-items: flex-start;
    gap: 24px;
}

/* ...but not on an auth screen, which has no sidebar to sit beside.
 *
 * A logged-in shopper still reaches these: following a reset link belonging to
 * a different account lands on lost-password with "This password reset key is
 * for a different user account" and the form. The only children of the flex
 * row are then the notices wrapper and the card, so the row put the error
 * *next to* the form in its own column instead of above it. */
.logged-in.woocommerce-account div.woocommerce:has(.pd-auth) {
    display: block !important;
}

.woocommerce-account #front-dashboard__menu {
    display: block !important;
    flex: 0 0 250px;
    width: 250px !important;
    padding: 8px 0 !important;
    background: #fff;
    border: 1px solid var(--pd-line);
    position: sticky;
    top: 20px;
}

.woocommerce-account .woocommerce-MyAccount-content {
    display: block !important;
    flex: 1;
    width: auto !important;
    min-width: 0;
    float: none !important;
    padding: 32px !important;
    background: #fff;
    border: 1px solid var(--pd-line);
}

/* ------------------------------------------------------------------ *
 *  Sidebar navigation
 * ------------------------------------------------------------------ */

#front-dashboard__menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#front-dashboard__menu ul li {
    padding: 0 !important;
    margin: 0;
}

#front-dashboard__menu ul a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: #333;
    text-decoration: none;
}

#front-dashboard__menu ul a img,
#front-dashboard__menu ul a svg {
    flex: 0 0 20px;
    opacity: .8;
}

#front-dashboard__menu ul li:hover {
    background: var(--pd-panel) !important;
}

#front-dashboard__menu ul li:hover > a {
    color: var(--pd-ink);
    font-weight: 500;
}

#front-dashboard__menu ul li.current_active,
#front-dashboard__menu ul li.is-active {
    background: color-mix(in srgb, var(--pd-accent) 6%, #fff) !important;
    box-shadow: inset 3px 0 0 var(--pd-accent);
}

#front-dashboard__menu ul li.current_active > a,
#front-dashboard__menu ul li.is-active > a {
    color: var(--pd-ink);
    font-weight: 700;
}

#front-dashboard__menu ul li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 8px;
    border-top: 1px solid var(--pd-line);
}

#front-dashboard__menu ul li.woocommerce-MyAccount-navigation-link--customer-logout > a {
    color: var(--pd-muted);
}

/* ------------------------------------------------------------------ *
 *  Content typography
 * ------------------------------------------------------------------ */

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-MyAccount-content legend {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--pd-ink);
    border-bottom: 0;
    padding-bottom: 0;
    margin: 0 0 16px;
}

.woocommerce-account .woocommerce-MyAccount-content h2::after,
.woocommerce-account .woocommerce-MyAccount-content h3::after {
    display: none;
}

.woocommerce-account .woocommerce-MyAccount-content p {
    color: #333;
}

/* ------------------------------------------------------------------ *
 *  Buttons
 * ------------------------------------------------------------------ */

.woocommerce-account .woocommerce .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    background: var(--pd-accent) !important;
    border: 2px solid var(--pd-accent);
    border-radius: 0 !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
    margin-right: 8px;
}

.woocommerce-account .woocommerce .button:hover {
    filter: brightness(.92);
}

.woocommerce-account .woocommerce .button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--pd-accent) 30%, transparent);
    outline-offset: 2px;
}

/* secondary buttons: order-row actions + pagination */
.woocommerce-account .my_account_orders .button,
.woocommerce-account .woocommerce-pagination .button {
    min-height: 36px;
    padding: 0 14px;
    background: #fff !important;
    color: var(--pd-accent) !important;
    font-size: 13px;
}

.woocommerce-account .my_account_orders .button:hover,
.woocommerce-account .woocommerce-pagination .button:hover {
    background: var(--pd-accent) !important;
    color: #fff !important;
    filter: none;
}

.woocommerce-account .my_account_orders .button.view::after {
    content: "";
    margin-left: 0;
}

.woocommerce-account .woocommerce-pagination {
    margin-top: 16px;
}

/* ------------------------------------------------------------------ *
 *  Forms (edit account, edit address, auth pages)
 * ------------------------------------------------------------------ */

.woocommerce-account .woocommerce form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pd-ink);
    margin-bottom: 6px;
}

.woocommerce-account .woocommerce form .form-row {
    margin-bottom: 12px;
}

.woocommerce-account .woocommerce form label .required {
    color: var(--pd-error);
    text-decoration: none;
}

.woocommerce-account .input-text,
.woocommerce-account input[type=email],
.woocommerce-account input[type=password],
.woocommerce-account input[type=search],
.woocommerce-account input[type=tel],
.woocommerce-account input[type=text],
.woocommerce-account input[type=url],
.woocommerce-account select {
    height: 44px;
    padding: 0 14px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 0 !important;
    box-shadow: none;
    font-size: 14px;
    color: var(--pd-ink);
}

.woocommerce-account textarea {
    min-height: 88px;
    padding: 10px 12px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 0 !important;
    font-size: 14px;
    color: var(--pd-ink);
    resize: vertical;
}

.woocommerce-account .input-text:focus,
.woocommerce-account input[type=email]:focus,
.woocommerce-account input[type=password]:focus,
.woocommerce-account input[type=search]:focus,
.woocommerce-account input[type=tel]:focus,
.woocommerce-account input[type=text]:focus,
.woocommerce-account input[type=url]:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
    outline: none;
    border-color: var(--pd-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pd-accent) 15%, transparent);
}

.woocommerce-account input[type=checkbox] {
    accent-color: var(--pd-accent);
    width: 18px;
    height: 18px;
}

.woocommerce-account .woocommerce form fieldset {
    border: 1px solid var(--pd-line);
    padding: 16px;
    margin: 24px 0 12px;
}

.woocommerce-account .woocommerce form fieldset legend {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pd-muted);
    padding: 0 8px;
    margin: 0;
}

.woocommerce-account .woocommerce form .form-row em,
.woocommerce-account .woocommerce-password-hint {
    font-size: 13px;
    font-style: normal;
    color: var(--pd-muted);
}

/* ------------------------------------------------------------------ *
 *  Notices — compact left-rule style, as on checkout
 * ------------------------------------------------------------------ */

/* Block, not flex.
 *
 * WooCommerce renders an error notice as a <ul> with one <li> per message.
 * Laid out as a flex row with space-between, that turned a list of validation
 * errors into columns: saving an address with six required fields empty put
 * four errors across the first row and scattered the remaining two to opposite
 * edges of the second. They are a list and they read top to bottom.
 *
 * The row layout was there for the other notice shape — a sentence with an
 * action button after it — which is restored below for the notices that
 * actually have one. */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
    display: block;
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 0;
    border-left: 3px solid var(--pd-ink);
    border-radius: 0;
    background: var(--pd-panel);
    color: #333;
    font-size: 13px;
    line-height: 1.45;
    list-style: none;
}

/* Only the ones carrying a button keep the sentence-then-button row. Browsers
   without :has() fall back to the block layout above, which stacks the button
   under the text — different, not broken. */
.woocommerce-account .woocommerce-message:has(> .button),
.woocommerce-account .woocommerce-info:has(> .button),
.woocommerce-account .woocommerce-error:has(> .button) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.woocommerce-account .woocommerce-message {
    border-left-color: var(--pd-success);
    background: #f1f7f1;
    color: #1d3b1f;
}

.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-error li {
    border-left-color: var(--pd-error);
    background: #fdf1f0;
    color: #4a1a14;
}

/* One message per line, whichever notice type the list belongs to. */
.woocommerce-account .woocommerce-error li,
.woocommerce-account .woocommerce-message li,
.woocommerce-account .woocommerce-info li {
    display: block;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0 0 4px;
}

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

/* Auth pages put their notices in a wrapper that spans the full container
   while the card itself is a 520px column, so a "Invalid username or email."
   sat in a box three times the width of the form it belonged to. Match the
   column. */
.woocommerce-account .woocommerce:has(.pd-auth) .woocommerce-notices-wrapper {
    max-width: 520px;
    margin: 0 auto;
}

.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-message::after,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-info::after,
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-error::after {
    display: none;
}

.woocommerce-account .woocommerce-info .button.wc-forward,
.woocommerce-account .woocommerce-message .button.wc-forward {
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
    margin: 0;
}

/* ------------------------------------------------------------------ *
 *  Orders table + status pills
 * ------------------------------------------------------------------ */

.woocommerce-account table.shop_table {
    border: 1px solid var(--pd-line);
    border-collapse: collapse;
    border-radius: 0;
    margin-bottom: 16px;
}

.woocommerce-account table.shop_table thead th {
    padding: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pd-muted);
    border-bottom: 1px solid var(--pd-line);
}

.woocommerce-account table.shop_table tbody th,
.woocommerce-account table.shop_table td {
    padding: 14px 12px;
    border-top: 1px solid var(--pd-line);
    vertical-align: middle;
    font-size: 14px;
}

.woocommerce-account .woocommerce-orders-table__cell-order-number a,
.woocommerce-account table.shop_table tbody th a {
    font-weight: 600;
    color: var(--pd-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ *
 *  Orders list — row layout
 * ------------------------------------------------------------------ */

/* Put the order-number cell back in the table.
 *
 * Two unscoped rules land on it. dig-in-global.css ships
 * `table.shop_table_responsive tbody th { display:inline; position:absolute }`
 * under a "show cart labels on mobile" comment — no media query, no page
 * scope — and the theme's cart CSS adds `.woocommerce-page
 * table.shop_table_responsive tbody th { display:table }`, where only the
 * first half of that selector pair is scoped to the cart.
 *
 * Between them the cell was taken out of flow and sized to its own content,
 * which is why the order number sat above its own row and a long item summary
 * painted straight across the Date and Status columns. Reset here, scoped to
 * this table: the cart still needs its own rules, and both storefront themes
 * carry the second one. */
.woocommerce-account table.my_account_orders tbody th {
    display: table-cell;
    position: static;
    z-index: auto;
}

.woocommerce-account table.my_account_orders tbody th,
.woocommerce-account table.my_account_orders tbody td {
    vertical-align: top;
    padding: 16px 12px;
}

.woocommerce-account table.my_account_orders tbody tr:hover {
    background: var(--pd-panel);
}

/* Fixed layout, not auto. Six columns share ~830px here, and under auto
   layout the widest cell in a column dictates its width: one long item
   summary or one "Partially refunded" pill pulled the whole table out of
   shape and pushed the actions column into a wrap. Fixed layout also gives
   the cells a width to clip against, which is what makes the clamped item
   summary below possible at all. */
.woocommerce-account table.my_account_orders {
    table-layout: fixed;
    width: 100%;
}

/* Sized against the longest real content rather than evenly: "Aug 15, 2026"
   and the "Partially refunded" pill both have to fit on one line, and the
   actions column needs the lead button plus the 38px toggle. */
.woocommerce-account table.my_account_orders .woocommerce-orders-table__header-order-date { width: 15%; }
.woocommerce-account table.my_account_orders .woocommerce-orders-table__header-order-status { width: 19%; }
.woocommerce-account table.my_account_orders .woocommerce-orders-table__header-order-fulfillment { width: 11%; }
.woocommerce-account table.my_account_orders .woocommerce-orders-table__header-order-total { width: 10%; }
/* 22%, not 20: the lead button has to hold "Adding…" plus its spinner without
   the toggle next to it losing room. The order column absorbs the difference. */
.woocommerce-account table.my_account_orders .woocommerce-orders-table__header-order-actions { width: 22%; }
/* order-number is left unsized and takes the remainder */

.woocommerce-account table.my_account_orders .pd-order-number {
    display: inline-block;
    font-size: 14px;
}

/* Two lines, then clipped: enough to tell two orders apart, but a ten-item
   order can't set the height of the row. Full text is on the title. */
.woocommerce-account table.my_account_orders .pd-order-items {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 3px !important;
    color: var(--pd-muted) !important;
    /* the cell is a <th>, so without this the summary inherits its bold */
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.35;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Long labels ("Partially refunded") wrap inside the pill rather than
   spilling across the next column. */
.woocommerce-account table.my_account_orders .pd-order-status {
    white-space: normal;
    padding: 3px 10px;
}

.woocommerce-account table.my_account_orders .pd-order-date {
    display: block;
    line-height: 1.35;
}

.woocommerce-account table.my_account_orders .pd-order-date__sub,
.woocommerce-account table.my_account_orders .pd-order-total__items {
    display: block;
    margin-top: 3px;
    color: var(--pd-muted);
    font-size: 12.5px;
    line-height: 1.35;
}

.woocommerce-account table.my_account_orders .pd-order-total {
    display: block;
    font-size: 14px;
    line-height: 1.35;
}

/* An order still being worked on is the one thing a customer opens this page
   for, so it gets a rule in the margin rather than another badge colour. */
.woocommerce-account table.my_account_orders tbody tr.woocommerce-orders-table__row--status-processing th,
.woocommerce-account table.my_account_orders tbody tr.woocommerce-orders-table__row--status-ready th,
.woocommerce-account table.my_account_orders tbody tr.woocommerce-orders-table__row--status-waiting-driver th,
.woocommerce-account table.my_account_orders tbody tr.woocommerce-orders-table__row--status-out-for-delivery th {
    box-shadow: inset 3px 0 0 var(--pd-accent);
}

/* ------------------------------------------------------------------ *
 *  Order actions — one lead button plus an overflow menu
 * ------------------------------------------------------------------ *
 *  Shared by the orders list and the overview's recent-order cards
 *  (orders.php / dashboard.php, both through pd_account_order_actions).
 *  Previously every action was an identical outlined button, so "Cancel" read
 *  exactly as loudly as "Order Again" and three or four of them wrapped the
 *  cell onto extra lines, giving every row a different height.
 */

.woocommerce-account .pd-order-actions {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

/* `.woocommerce` in the selector rather than either list's own class, so one
   rule out-ranks the base `.woocommerce-account .woocommerce .button` in both
   places the cluster is used. */
.woocommerce-account .woocommerce .pd-order-actions__lead.button {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 38px;
    padding: 0 12px;
    margin: 0 !important;
    background: var(--pd-accent) !important;
    border-color: var(--pd-accent);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.woocommerce-account .woocommerce .pd-order-actions__lead.button:hover {
    background: var(--pd-accent) !important;
    color: #fff !important;
    filter: brightness(.92);
}

/* <details> rather than a scripted dropdown: it opens without JavaScript and
   the summary is focusable and toggles on Enter/Space for free. */
.woocommerce-account .pd-order-actions__more {
    position: relative;
    flex: 0 0 auto;
}

.woocommerce-account .pd-order-actions__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 2px solid var(--pd-line);
    background: #fff;
    cursor: pointer;
    list-style: none;
}

/* the default disclosure triangle, in both engines */
.woocommerce-account .pd-order-actions__toggle::-webkit-details-marker { display: none; }
.woocommerce-account .pd-order-actions__toggle::marker { content: ''; }

.woocommerce-account .pd-order-actions__toggle:hover,
.woocommerce-account .pd-order-actions__more[open] .pd-order-actions__toggle {
    border-color: var(--pd-ink);
}

.woocommerce-account .pd-order-actions__toggle:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--pd-accent) 30%, transparent);
    outline-offset: 2px;
}

/* three dots drawn from one element, so there is no icon font to load */
.woocommerce-account .pd-order-actions__dots {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--pd-ink);
    box-shadow: -6px 0 0 var(--pd-ink), 6px 0 0 var(--pd-ink);
}

.woocommerce-account .pd-order-actions__list {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    min-width: 190px;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--pd-line);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}

.woocommerce-account .pd-order-actions__list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-account .pd-order-actions__item {
    display: block;
    padding: 10px 14px;
    color: var(--pd-ink) !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}

.woocommerce-account .pd-order-actions__item:hover,
.woocommerce-account .pd-order-actions__item:focus {
    background: var(--pd-panel);
}

/* Cancel is irreversible, so it is fenced off at the bottom of the menu
   instead of sitting inline next to "Order Again" in the same red. */
.woocommerce-account .pd-order-actions__item--destructive {
    margin-top: 4px;
    border-top: 1px solid var(--pd-line);
    color: var(--pd-error) !important;
}

.woocommerce-account .pd-order-actions__item--destructive:hover,
.woocommerce-account .pd-order-actions__item--destructive:focus {
    background: #fdf1f0;
}

/* ------------------------------------------------------------------ *
 *  Order actions — in-flight state
 * ------------------------------------------------------------------ *
 *  Every one of these is a link to a server-rendered page, so there is a
 *  visible gap between the click and the new page. account-forms.js marks the
 *  clicked control and puts the body in a busy state for the duration.
 */

/* The idle label and the busy one occupy the same grid cell, so the control
   is laid out at the width of the wider of the two from first paint and the
   swap on click cannot resize it — no reflow of the row, and no jump for the
   toggle sitting next to it. Only visibility changes, which is also why the
   busy copy can carry a real word rather than an unlabelled ring: "Adding…"
   on a slow reorder says more than a spinner alone. */
.woocommerce-account .woocommerce .pd-order-actions__lead.button {
    display: inline-grid;
    grid-template-areas: "pd-action-label";
    align-items: center;
    justify-items: center;
}

.woocommerce-account .pd-order-actions__label,
.woocommerce-account .pd-order-actions__busy {
    grid-area: pd-action-label;
}

.woocommerce-account .pd-order-actions__busy {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    visibility: hidden;
}

.woocommerce-account .is-loading > .pd-order-actions__label {
    visibility: hidden;
}

.woocommerce-account .is-loading > .pd-order-actions__busy {
    visibility: visible;
}

.woocommerce-account .pd-order-actions__spinner {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
}

.woocommerce-account .is-loading > .pd-order-actions__busy .pd-order-actions__spinner {
    animation: digin-account-btn-spin .6s linear infinite;
}

/* Menu items are a plain block link: the busy label replaces the idle one in
   the same stacking cell, and the spinner sits at the end of the row so the
   text stays where it was. */
.woocommerce-account .pd-order-actions__item {
    display: grid;
    grid-template-areas: "pd-action-label";
    align-items: center;
    justify-items: start;
}

.woocommerce-account .pd-order-actions__item.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 12px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid var(--pd-accent);
    border-right-color: transparent;
    border-radius: 50%;
    animation: digin-account-btn-spin .6s linear infinite;
}

.woocommerce-account .pd-order-actions__item {
    position: relative;
    padding-right: 34px;
}

.woocommerce-account .pd-order-actions__item--destructive.is-loading::after {
    border-color: var(--pd-error);
    border-right-color: transparent;
}

/* Pagination is core markup with no label span, so it keeps the centred
   spinner over a transparent label. */
.woocommerce-account .woocommerce-pagination .button.is-loading {
    position: relative;
    color: transparent !important;
}

.woocommerce-account .woocommerce-pagination .button.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid var(--pd-accent);
    border-right-color: transparent;
    border-radius: 50%;
    animation: digin-account-btn-spin .6s linear infinite;
}

/* While one action is on its way the rest stop accepting clicks. These are
   full page loads: a second one only races the first, and for "Order Again"
   it would run the reorder handler twice. */
.pd-actions-busy .pd-order-actions__lead,
.pd-actions-busy .pd-order-actions__item,
.pd-actions-busy .pd-order-actions__toggle,
.pd-actions-busy .pd-active-order__aside .button,
.pd-actions-busy .woocommerce-pagination .button {
    pointer-events: none;
    opacity: .5;
}

/* except the one that was clicked — it is the thing that is happening */
.pd-actions-busy .is-loading {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce-account .is-loading > .pd-order-actions__busy .pd-order-actions__spinner,
    .woocommerce-account .woocommerce-pagination .button.is-loading::after,
    .woocommerce-account .pd-order-actions__item.is-loading::after {
        animation-duration: 1.5s;
    }
}

.pd-order-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: #f4f4f4;
    color: var(--pd-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.pd-order-status--tone-success,
.pd-order-status--completed {
    background: #f1f7f1;
    color: var(--pd-success);
}

.pd-order-status--tone-active,
.pd-order-status--processing {
    background: color-mix(in srgb, var(--pd-accent) 10%, #fff);
    color: var(--pd-accent);
}

.pd-order-status--tone-error,
.pd-order-status--cancelled,
.pd-order-status--failed {
    background: #fdf1f0;
    color: var(--pd-error);
}

/* money went back to the customer — distinct from both "done" and "failed" */
.pd-order-status--tone-refunded {
    background: #fdf6ec;
    color: #a15c07;
}

.pd-order-fulfillment {
    font-size: 13px;
    color: #333;
}

.pd-order-fulfillment__schedule {
    display: block;
    font-size: 12px;
    color: var(--pd-muted);
}

/* ------------------------------------------------------------------ *
 *  Single order (view-order)
 * ------------------------------------------------------------------ *
 *  The header comes from myaccount/view-order.php; everything below it
 *  (items, totals, actions, addresses) is core order/order-details.php
 *  rendered through woocommerce_view_order, restyled in place so plugin
 *  totals rows keep working.
 */

.pd-vieworder__header {
    padding: 16px;
    border: 1px solid var(--pd-line);
    border-left: 3px solid var(--pd-accent);
    background: #fff;
    margin-bottom: 24px;
}

.pd-vieworder__header .pd-order-number {
    font-size: 16px;
}

.pd-vieworder__schedule {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--pd-ink) !important;
}

.pd-vieworder__updates {
    margin-bottom: 24px;
}

.woocommerce-account .woocommerce-OrderUpdates {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-account .woocommerce-OrderUpdate {
    padding: 12px 14px;
    border: 1px solid var(--pd-line);
    background: var(--pd-panel);
    margin: 0 0 8px;
}

.woocommerce-account .woocommerce-OrderUpdate .comment_container,
.woocommerce-account .woocommerce-OrderUpdate .comment-text {
    padding: 0;
    border: 0;
    background: none;
    margin: 0;
}

.woocommerce-account .woocommerce-OrderUpdate-meta {
    font-size: 12px;
    color: var(--pd-muted) !important;
    margin: 0 0 4px;
}

.woocommerce-account .woocommerce-OrderUpdate-description p {
    margin: 0;
    font-size: 14px;
}

/* items + totals table */
.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column__title {
    font-size: 16px !important;
    margin-bottom: 12px !important;
}

.woocommerce-account .woocommerce-table--order-details {
    width: 100%;
    margin-bottom: 24px;
}

.woocommerce-account .woocommerce-table--order-details td,
.woocommerce-account .woocommerce-table--order-details th {
    color: var(--pd-ink);
}

.woocommerce-account .woocommerce-table--order-details .product-name {
    font-weight: 500;
}

.woocommerce-account .woocommerce-table--order-details .product-total,
.woocommerce-account .woocommerce-table--order-details tfoot td {
    text-align: right;
    white-space: nowrap;
}

.woocommerce-account .woocommerce-table--order-details tfoot th {
    font-weight: 500;
    color: var(--pd-muted);
    text-align: left;
}

/* The order total is the number people look for. It is the last tfoot row
   only when core did not append an actions row after it, so match both the
   plain case and the row sitting immediately before the actions row. */
.woocommerce-account .woocommerce-table--order-details tfoot tr:last-child:not(:has(.order-actions--heading)) th,
.woocommerce-account .woocommerce-table--order-details tfoot tr:last-child:not(:has(.order-actions--heading)) td,
.woocommerce-account .woocommerce-table--order-details tfoot tr:has(+ tr .order-actions--heading) th,
.woocommerce-account .woocommerce-table--order-details tfoot tr:has(+ tr .order-actions--heading) td {
    font-weight: 700;
    color: var(--pd-ink);
}

.woocommerce-account .woocommerce-table--order-details .order-actions--heading + td {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.woocommerce-account .woocommerce-table--order-details .order-actions--heading + td .button {
    margin: 0 !important;
}

.woocommerce-account .woocommerce-customer-details address {
    padding: 14px;
    border: 1px solid var(--pd-line);
    background: var(--pd-panel);
    font-style: normal;
    font-size: 14px;
    line-height: 1.6;
    color: var(--pd-ink);
}

.woocommerce-account .woocommerce-customer-details address p {
    margin: 4px 0 0;
}

/* ------------------------------------------------------------------ *
 *  Empty state (orders)
 * ------------------------------------------------------------------ */

.pd-empty-state {
    text-align: center;
    padding: 40px 16px;
}

.pd-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--pd-panel);
    color: var(--pd-muted);
    margin-bottom: 12px;
}

.pd-empty-state__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--pd-ink);
    margin: 0 0 4px;
}

.pd-empty-state__text {
    font-size: 13px;
    color: var(--pd-muted);
    margin: 0 0 16px;
}

.pd-empty-state .button {
    margin-right: 0;
}

/* ------------------------------------------------------------------ *
 *  Dashboard tab
 * ------------------------------------------------------------------ */

/* owner's dashboard button appended via the woocommerce_account_dashboard hook */
.my-account-dashboard {
    margin-top: 16px;
}

/* ------------------------------------------------------------------ *
 *  Addresses
 * ------------------------------------------------------------------ */

.woocommerce-account .woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 0;
}

.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
    display: none;
}

.woocommerce-account .woocommerce-Address,
.woocommerce-account .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-Addresses .col-2 {
    float: none !important;
    width: auto !important;
    max-width: none;
    padding: 16px;
    border: 1px solid var(--pd-line);
    background: #fff;
}

.woocommerce-account .woocommerce-Address-title.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--pd-line);
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.woocommerce-account .woocommerce-Address-title.title::before,
.woocommerce-account .woocommerce-Address-title.title::after,
.woocommerce-account .addresses header.title a::before {
    display: none;
}

.woocommerce-account .woocommerce-Address-title.title h2 {
    font-size: 15px;
    margin: 0;
    padding: 0;
    border: 0;
}

.woocommerce-account .woocommerce-Address-title.title .edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--pd-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    float: none;
    line-height: 1.2;
}

.woocommerce-account .woocommerce-Address address {
    line-height: 1.7;
    color: #333;
    font-style: normal;
    border: 0;
}

/* ------------------------------------------------------------------ *
 *  Auth pages (login / register / lost + reset password)
 * ------------------------------------------------------------------ */

.pd-auth {
    display: grid;
    gap: 24px;
    max-width: 520px;
    margin: 0 auto;
    padding: 0 !important;
}

/* Sign in / Create account segmented switch (CSS-only, radio-driven —
   same two-up toggle pattern as the checkout order-type tabs) */
.pd-auth-tab__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.pd-auth-tabs {
    display: flex;
    margin: 0 0 24px;
    border: 2px solid var(--pd-accent);
}

#customer_login .pd-auth-tabs__tab,
.pd-auth-tabs__tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    background: #fff;
    color: var(--pd-accent);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
    text-align: center;
}

#pd-tab-login:checked ~ .pd-auth-tabs .pd-auth-tabs__tab[for="pd-tab-login"],
#pd-tab-register:checked ~ .pd-auth-tabs .pd-auth-tabs__tab[for="pd-tab-register"] {
    background: var(--pd-accent);
    color: #fff;
}

#pd-tab-login:focus-visible ~ .pd-auth-tabs .pd-auth-tabs__tab[for="pd-tab-login"],
#pd-tab-register:focus-visible ~ .pd-auth-tabs .pd-auth-tabs__tab[for="pd-tab-register"] {
    outline: 3px solid color-mix(in srgb, var(--pd-accent) 30%, transparent);
    outline-offset: 2px;
}

.pd-auth-card--tabbed .pd-auth-panel {
    display: none;
}

#pd-tab-login:checked ~ .pd-auth-panel--login,
#pd-tab-register:checked ~ .pd-auth-panel--register {
    display: block;
}

/* without registration there are no tabs — the single login panel just shows */
.pd-auth-card:not(.pd-auth-card--tabbed) .pd-auth-panel {
    display: block;
}

/* neutralize the legacy pizzaro #customer_login chrome (divider, gutters, "or" circle) */
#customer_login::before {
    display: none !important;
}

#customer_login .col-1,
#customer_login .col-2 {
    padding: 0 !important;
    float: none !important;
    width: auto !important;
    max-width: none;
    margin: 0;
}

.woocommerce-account .or-text {
    display: none;
}

.pd-auth-card {
    background: #fff;
    border: 1px solid var(--pd-line);
    padding: 32px 28px !important;
}

.pd-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
}

.pd-heading__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    background: var(--pd-accent);
    color: #fff;
}

.pd-heading--success .pd-heading__icon {
    background: var(--pd-success);
}

.pd-heading__text {
    min-width: 0;
}

.pd-heading__step {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1;
    color: var(--pd-accent);
    margin-bottom: 3px;
}

.pd-heading--success .pd-heading__step {
    color: var(--pd-success);
}

.woocommerce-account .pd-heading__title,
.woocommerce-account .woocommerce .pd-heading__title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--pd-ink);
    margin: 0;
    padding: 0;
    border: 0;
}

.pd-heading__title::after {
    display: none !important;
}

.pd-auth-hint {
    font-size: 13px;
    line-height: 1.55;
    color: var(--pd-muted);
    margin: 0 0 16px;
}

.pd-auth .button,
.pd-auth .woocommerce-Button,
.pd-auth .woocommerce-button {
    width: 100%;
    min-height: 48px;
    font-size: 15px;
    font-weight: 700;
    margin-right: 0;
}

.pd-auth-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.pd-auth-meta .woocommerce-form-login__rememberme {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 400;
    color: #333;
    margin: 0;
}

.pd-auth-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--pd-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pd-auth-link:hover {
    color: var(--pd-accent);
}

.pd-auth-back {
    margin: 16px 0 0;
    text-align: center;
}

/* theme-injected copy inside the auth cards (before-login/register text,
   register benefits from the customizer) */
.pd-auth .before-login-text,
.pd-auth .before-register-text {
    font-size: 13px;
    line-height: 1.55;
    color: var(--pd-muted);
    margin-bottom: 16px;
}

.pd-auth .register-benefits {
    margin-top: 16px;
}

/* #customer_login needed to out-specify the parent theme's ID rules */
#customer_login .register-benefits h3,
.pd-auth .register-benefits h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--pd-ink);
    margin-bottom: 10px;
}

#customer_login .register-benefits ul > li,
.pd-auth .register-benefits ul > li {
    font-size: 13px;
    color: var(--pd-muted);
    line-height: 2;
}

#customer_login label {
    font-size: 13px;
    font-weight: 600;
    color: var(--pd-ink);
    text-transform: none;
    margin-bottom: 6px;
}

#customer_login .form-row {
    margin-bottom: 12px;
}

/* ------------------------------------------------------------------ *
 *  Overview (dashboard endpoint)
 * ------------------------------------------------------------------ */

/* keep the page title connected to the panel instead of a huge centered
   heading floating above it */
.woocommerce-account .entry-header .entry-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--pd-ink);
    text-align: left;
    margin-bottom: 16px;
}

.pd-overview__header {
    margin-bottom: 24px;
}

.pd-overview__title {
    font-size: 20px;
    margin-bottom: 4px !important;
}

.pd-overview__sub {
    font-size: 14px;
    color: var(--pd-muted) !important;
    margin: 0;
}

.pd-section-title {
    font-size: 16px;
    margin: 0 0 12px !important;
}

.pd-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.pd-section-head .pd-section-title {
    margin-bottom: 0 !important;
}

.pd-active-order,
.pd-recent-orders,
.pd-quick-cards {
    margin-bottom: 32px;
}

.pd-active-order__card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--pd-line);
    border-left: 3px solid var(--pd-accent);
    background: #fff;
}

.pd-active-order__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.pd-order-total {
    font-size: 16px;
    font-weight: 700;
    color: var(--pd-ink);
}

.pd-active-order__row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 4px !important;
}

.pd-order-number {
    font-size: 15px;
    font-weight: 700;
    color: var(--pd-ink) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pd-order-meta {
    font-size: 13px;
    color: var(--pd-muted) !important;
    margin: 0 0 6px !important;
}

.pd-order-items {
    font-size: 13px;
    color: #333 !important;
    margin: 0 !important;
    overflow-wrap: anywhere;
}

.pd-order-list {
    list-style: none;
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.pd-order-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--pd-line);
    background: #fff;
}

.pd-order-card__main {
    min-width: 0;
}

.pd-order-card__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    flex-shrink: 0;
}

/* small action buttons on order cards; "view" is the quiet secondary,
   the plugin-owned "Order Again" keeps the accent as the section primary */
.pd-order-card__actions .button,
.pd-active-order__aside .button {
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
    margin-right: 0;
}

/* quiet outline by default; only the plugin-owned "Order Again" action
   keeps the filled accent, so each card has a single primary.
   (.woocommerce-account prefix out-specifies the base button rule) */
.woocommerce-account .pd-order-card__actions .button,
.woocommerce-account .pd-active-order__aside .button {
    background: #fff !important;
    color: var(--pd-accent) !important;
}

.woocommerce-account .pd-order-card__actions .button:hover,
.woocommerce-account .pd-active-order__aside .button:hover {
    background: var(--pd-accent) !important;
    color: #fff !important;
    filter: none;
}

.woocommerce-account .pd-order-card__actions .button.reorder {
    background: var(--pd-accent) !important;
    color: #fff !important;
}

.woocommerce-account .pd-order-card__actions .button.reorder:hover {
    filter: brightness(.92);
}

.pd-quick-cards__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.pd-quick-card {
    padding: 16px;
    border: 1px solid var(--pd-line);
    background: #fff;
}

.pd-quick-card__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pd-muted) !important;
    margin: 0 0 6px !important;
}

.pd-quick-card__value {
    font-size: 14px;
    font-weight: 600;
    color: var(--pd-ink) !important;
    margin: 0 0 10px !important;
    overflow-wrap: anywhere;
}

.pd-quick-card__value--empty {
    font-weight: 400;
    color: var(--pd-muted) !important;
}

.pd-quick-card .pd-auth-link {
    margin-right: 12px;
}

/* ------------------------------------------------------------------ *
 *  Misc / legacy
 * ------------------------------------------------------------------ */

#stwcpy_hist_front_payouts_table th span {
    font-size: 14px;
    text-transform: capitalize;
}

/* Submitting state for the login / register / lost-password buttons
   (account-forms.js adds .is-submitting on the first submit): keep the
   button visible but inert while the POST round-trip is pending, with an
   inline spinner so the wait reads as progress instead of a dead click. */
.woocommerce-account .woocommerce-button.is-submitting,
.woocommerce-account .woocommerce-Button.is-submitting {
    pointer-events: none;
    opacity: .75;
}

.woocommerce-account .woocommerce-button.is-submitting::after,
.woocommerce-account .woocommerce-Button.is-submitting::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: .5em;
    vertical-align: -0.15em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: digin-account-btn-spin .6s linear infinite;
}

@keyframes digin-account-btn-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce-account .woocommerce-button.is-submitting::after,
    .woocommerce-account .woocommerce-Button.is-submitting::after {
        animation-duration: 1.5s;
    }
}

/* ------------------------------------------------------------------ *
 *  Mobile — keep last in the file (same convention as checkout CSS)
 * ------------------------------------------------------------------ */

@media (max-width: 991px) {
    .logged-in.woocommerce-account div.woocommerce {
        display: block !important;
    }

    .woocommerce-account #front-dashboard__menu {
        position: static;
        flex: none;
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 24px;
        border: 0;
        border-bottom: 1px solid var(--pd-line);
        background: transparent;
    }

    /* horizontal scroll strip, like the checkout date/time pickers.
       With gift cards + coupons + subscriptions installed this holds nine
       items in ~345px, so the fade below is what tells people the list
       continues; account-forms.js toggles the has-overflow-* classes and
       scrolls the active item into view. */
    #front-dashboard__menu ul {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* room for the fade so the last label is never clipped mid-word */
        padding-right: 4px;
    }

    #front-dashboard__menu ul::-webkit-scrollbar {
        display: none;
    }

    #front-dashboard__menu ul li {
        flex: 0 0 auto;
    }

    /* Fade the overflowing edge(s). A mask is used rather than an overlay
       so the strip's own background (and the active item's underline)
       stays visible through it. Both edges default to opaque, so without
       JS the strip is simply un-faded and still scrollable. */
    #front-dashboard__menu ul.has-overflow-end {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
    }

    #front-dashboard__menu ul.has-overflow-start {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent 100%);
        mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent 100%);
    }

    #front-dashboard__menu ul.has-overflow-start.has-overflow-end {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
    }

    #front-dashboard__menu ul a {
        min-height: 44px;
        padding: 12px 14px;
        white-space: nowrap;
    }

    #front-dashboard__menu ul li.current_active,
    #front-dashboard__menu ul li.is-active {
        box-shadow: inset 0 -3px 0 var(--pd-accent);
        background: transparent !important;
    }

    #front-dashboard__menu ul li.woocommerce-MyAccount-navigation-link--customer-logout {
        margin-top: 0;
        border-top: 0;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 24px 16px !important;
    }
}

/* Orders table becomes scannable cards on phones.
 *
 * The first pass at this used the data-title attributes as a label gutter, so
 * every card repeated DATE / STATUS / TYPE / TOTAL down its left edge — four
 * labels per card, forty on a full page, in the ~345px where the values
 * themselves have to fit. The labels earn nothing: a date reads as a date and
 * "$22.35" reads as a total. The row is laid out as a grid instead, pairing
 * the values that belong together and giving the space back to the content.
 *
 * grid-template-areas rather than source order, because the cell order is
 * fixed by wc_get_account_orders_columns() and a third-party column can be
 * inserted anywhere in it. Named areas place the five known cells; anything
 * else auto-places onto its own row underneath, still readable, with its
 * data-title label kept so an unstyled column is not left anonymous.
 *
 * The breakpoint is 1199px, not the usual tablet one, because the table needs
 * ~830px to hold six columns and it does not get that until the viewport is
 * about 1200. The worst case is 992-1199px, where the sidebar is still a
 * fixed 250px column but the page container has narrowed: the table lands at
 * 600px, and every cell in it wraps ("TOTA / L", "Deliver / y", "$22. / 35").
 */
@media (max-width: 1199px) {
    .woocommerce-account table.shop_table_responsive.my_account_orders,
    .woocommerce-account table.shop_table_responsive.my_account_orders tbody {
        display: block;
        border: 0;
    }

    /* The theme only hides the header row below 768px, and a column header
       strip floating above a list of cards labels nothing. */
    .woocommerce-account table.shop_table_responsive.my_account_orders thead {
        display: none;
    }

    .woocommerce-account table.shop_table_responsive.my_account_orders tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "number  status"
            "date    type"
            "total   total"
            "actions actions";
        gap: 2px 12px;
        align-items: start;
        border: 1px solid var(--pd-line);
        background: #fff;
        padding: 14px;
        margin-bottom: 12px;
    }

    .woocommerce-account table.shop_table_responsive.my_account_orders tbody th,
    .woocommerce-account table.shop_table_responsive.my_account_orders tbody td {
        display: block;
        float: none !important;
        clear: none;
        width: auto;
        min-width: 0;
        border: 0;
        text-align: left;
        padding: 0 !important;
        font-size: 14px;
    }

    /* No labels by default — the whole point of pairing the values up is that
       a date reads as a date and "$22.35" reads as a total. */
    .woocommerce-account table.shop_table_responsive.my_account_orders tbody th::before,
    .woocommerce-account table.shop_table_responsive.my_account_orders tbody td::before {
        display: none !important;
    }

    .woocommerce-account table.my_account_orders .woocommerce-orders-table__cell-order-number { grid-area: number; }
    .woocommerce-account table.my_account_orders .woocommerce-orders-table__cell-order-status { grid-area: status; }
    .woocommerce-account table.my_account_orders .woocommerce-orders-table__cell-order-date { grid-area: date; }
    .woocommerce-account table.my_account_orders .woocommerce-orders-table__cell-order-fulfillment { grid-area: type; }
    .woocommerce-account table.my_account_orders .woocommerce-orders-table__cell-order-total { grid-area: total; }
    .woocommerce-account table.my_account_orders .woocommerce-orders-table__cell-order-actions { grid-area: actions; }

    /* A column this layout does not place auto-flows onto its own row and
       keeps its label, so a third-party column is never left anonymous. */
    .woocommerce-account table.shop_table_responsive.my_account_orders tbody td:not(.woocommerce-orders-table__cell-order-status):not(.woocommerce-orders-table__cell-order-date):not(.woocommerce-orders-table__cell-order-fulfillment):not(.woocommerce-orders-table__cell-order-total):not(.woocommerce-orders-table__cell-order-actions)::before {
        content: attr(data-title) ": ";
        display: inline !important;
        float: none !important;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--pd-muted);
    }

    .woocommerce-account table.shop_table_responsive.my_account_orders tbody td:not(.woocommerce-orders-table__cell-order-status):not(.woocommerce-orders-table__cell-order-date):not(.woocommerce-orders-table__cell-order-fulfillment):not(.woocommerce-orders-table__cell-order-total):not(.woocommerce-orders-table__cell-order-actions) {
        grid-column: 1 / -1;
        margin-top: 6px;
    }

    /* Status and type hang off the right edge so the card has a clean margin
       on both sides. Selector repeats the tbody/table shape of the reset
       above it, which otherwise out-ranks a plain cell-class selector. */
    .woocommerce-account table.shop_table_responsive.my_account_orders tbody td.woocommerce-orders-table__cell-order-status,
    .woocommerce-account table.shop_table_responsive.my_account_orders tbody td.woocommerce-orders-table__cell-order-fulfillment {
        text-align: right;
    }

    .woocommerce-account table.my_account_orders tbody th a {
        font-size: 15px;
    }

    /* two lines of items on a phone: enough to tell two orders apart without
       letting a ten-item order set the height of the card */
    .woocommerce-account table.my_account_orders .pd-order-items {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* "$22.35 · 3 items" reads as one fact on a narrow card */
    .woocommerce-account table.my_account_orders .pd-order-total,
    .woocommerce-account table.my_account_orders .pd-order-total__items {
        display: inline;
    }

    .woocommerce-account table.my_account_orders .pd-order-total__items::before {
        content: " · ";
    }

    .woocommerce-account table.my_account_orders .woocommerce-orders-table__cell-order-total {
        margin-top: 8px;
        font-weight: 600;
    }

    /* the in-progress marker moves to the card edge — there is no first
       column to hang it off once the row is a grid */
    .woocommerce-account table.my_account_orders tbody tr th {
        box-shadow: none !important;
    }

    .woocommerce-account table.my_account_orders tbody tr.woocommerce-orders-table__row--status-processing,
    .woocommerce-account table.my_account_orders tbody tr.woocommerce-orders-table__row--status-ready,
    .woocommerce-account table.my_account_orders tbody tr.woocommerce-orders-table__row--status-waiting-driver,
    .woocommerce-account table.my_account_orders tbody tr.woocommerce-orders-table__row--status-out-for-delivery {
        border-left: 3px solid var(--pd-accent);
    }

    .woocommerce-account table.my_account_orders .woocommerce-orders-table__cell-order-actions {
        margin-top: 12px;
        padding-top: 12px !important;
        border-top: 1px solid var(--pd-line) !important;
    }

    .woocommerce-account .woocommerce .pd-order-actions__lead.button,
    .woocommerce-account .pd-order-actions__toggle {
        min-height: 44px;
    }

    .woocommerce-account .pd-order-actions__toggle {
        width: 44px;
        height: 44px;
    }
}

/* On a wide card the total and the actions share the last row: a 600px-wide
   "Order Again" button is not a better button, and pairing the amount with
   what you can do about it keeps the card three rows deep. */
@media (min-width: 576px) and (max-width: 1199px) {
    .woocommerce-account table.shop_table_responsive.my_account_orders tbody tr {
        grid-template-areas:
            "number  status"
            "date    type"
            "total   actions";
        align-items: center;
        padding: 16px;
    }

    .woocommerce-account table.my_account_orders .woocommerce-orders-table__cell-order-number,
    .woocommerce-account table.my_account_orders .woocommerce-orders-table__cell-order-status,
    .woocommerce-account table.my_account_orders .woocommerce-orders-table__cell-order-date,
    .woocommerce-account table.my_account_orders .woocommerce-orders-table__cell-order-fulfillment {
        align-self: start;
    }

    .woocommerce-account table.my_account_orders .woocommerce-orders-table__cell-order-actions {
        justify-self: end;
        margin-top: 12px;
        padding-top: 0 !important;
        border-top: 0 !important;
    }

    .woocommerce-account table.my_account_orders .woocommerce-orders-table__cell-order-total {
        margin-top: 12px;
    }

    .woocommerce-account .woocommerce .pd-order-actions__lead.button {
        flex: 0 0 auto;
        padding: 0 20px;
    }
}

@media (max-width: 767px) {
    .pd-active-order__card,
    .pd-order-card {
        flex-direction: column;
    }

    .pd-active-order__aside,
    .pd-order-card__actions {
        flex-direction: row;
        align-items: center;
        width: 100%;
    }

    .pd-active-order__aside .button,
    .pd-order-card__actions .button {
        flex: 1 1 auto;
        min-height: 44px;
        /* "Order Again" broke onto two lines at three-up on a 390px card */
        white-space: nowrap;
        padding: 0 12px;
    }
}

@media (max-width: 575px) {
    .woocommerce-account .woocommerce-MyAccount-content {
        border: 0;
        padding: 0 !important;
    }

    .pd-auth-card {
        padding: 20px 15px !important;
    }

    .woocommerce-account .my_account_orders .button {
        min-height: 44px;
    }

    /* Form submits (Save address, Save changes, Add payment method) were
       shrink-to-fit buttons floating in a full-width column — on a phone the
       primary action of the page should span it, as the checkout CTA does. */
    .woocommerce-account .woocommerce-MyAccount-content form button[type="submit"],
    .woocommerce-account .woocommerce-MyAccount-content form input[type="submit"],
    .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .button,
    .woocommerce-account .woocommerce-MyAccount-content > .button,
    .woocommerce-account .pd-empty-state .button {
        display: flex;
        width: 100%;
        min-height: 48px;
        margin-right: 0;
    }

    /* ...but not the order-row actions, which are deliberately side by side */
    .woocommerce-account .my_account_orders .button,
    .woocommerce-account .pd-order-card__actions .button,
    .woocommerce-account .pd-active-order__aside .button {
        width: auto;
    }

    /* Checkbox rows: the parent theme hangs the box into the gutter with
       `.input-checkbox{margin-left:-20px}`, which worked when the content
       column had padding. At this width it has none, so the box was drawn
       at x=-3 and clipped in half (subscriptions opt-in on edit-address). */
    /* A hanging indent rather than a flex row: the label's text is a bare
       text node sitting next to a <span class="optional">, and flex would
       promote each to its own item and push "(optional)" to the far edge. */
    .woocommerce-account .woocommerce-MyAccount-content form .form-row label.checkbox,
    .woocommerce-account .woocommerce-MyAccount-content form .woocommerce-form__label-for-checkbox {
        display: block;
        margin-left: 0;
        padding-left: 28px;
        text-indent: -28px;
        line-height: 1.45;
    }

    /* The parent theme takes these checkboxes out of flow
       (position:absolute), so they occupied no inline width and the label's
       first word rendered underneath the box. Put them back in the line. */
    .woocommerce-account .woocommerce-MyAccount-content form label.checkbox .input-checkbox,
    .woocommerce-account .woocommerce-MyAccount-content form .woocommerce-form__input-checkbox {
        position: static;
        display: inline-block;
        float: none;
        width: 18px;
        height: 18px;
        margin: 0 10px 0 0 !important;
        vertical-align: -3px;
        text-indent: 0;
    }

    /* Password-change fieldset keeps its border (it is what groups the three
       fields) but gives back the horizontal padding — 32px of a 390px screen
       was going to chrome. Selector mirrors the desktop rule above so it
       actually out-ranks it. */
    .woocommerce-account .woocommerce form fieldset {
        padding: 12px;
        margin: 16px 0 12px;
    }

    /* Single order — the whole details table leaves table layout.
     *
     * Half-measures do not work here: a `tr` or `tfoot` set to display:block
     * inside a table gets re-wrapped in an anonymous table cell, which
     * inherits the narrow totals column, so the action buttons stay pinned
     * to a third of the card. Every table element has to become a block
     * together for the anonymous boxes to stop being generated. */
    .woocommerce-account .woocommerce-table--order-details,
    .woocommerce-account .woocommerce-table--order-details tbody,
    .woocommerce-account .woocommerce-table--order-details tfoot,
    .woocommerce-account .woocommerce-table--order-details tr,
    .woocommerce-account .woocommerce-table--order-details th,
    .woocommerce-account .woocommerce-table--order-details td {
        display: block;
        width: auto;
    }

    /* the PRODUCT/TOTAL header carries nothing once rows are label + value */
    .woocommerce-account .woocommerce-table--order-details thead {
        display: none;
    }

    .woocommerce-account .woocommerce-table--order-details tr {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        border-top: 1px solid var(--pd-line);
        padding: 10px 12px;
    }

    .woocommerce-account .woocommerce-table--order-details tr:first-child {
        border-top: 0;
    }

    .woocommerce-account .woocommerce-table--order-details th,
    .woocommerce-account .woocommerce-table--order-details td {
        border: 0;
        padding: 0 !important;
    }

    /* actions row: no label cell, buttons stacked across the full card */
    .woocommerce-account .woocommerce-table--order-details tr:has(.order-actions--heading) {
        display: block;
    }

    .woocommerce-account .woocommerce-table--order-details .order-actions--heading {
        display: none;
    }

    .woocommerce-account .woocommerce-table--order-details .order-actions--heading + td {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .woocommerce-account .woocommerce-table--order-details .order-actions--heading + td .button {
        width: 100%;
        min-height: 48px;
    }
}