/*
 * Peptide Partners WordPress Continuity 0.4.1: My Account on phones and
 * tablets (mobile-0.3.0).
 *
 * Loads after account-0.4.1.css, on account pages only. mobile-0.2.9.css
 * (shared with checkout) is unchanged. Every selector starts at
 * body.ppv2-account-surface.
 *
 * F02: the account menu was a sideways rail whose items each took the full
 * card width (~318px on a 390px phone), so only "Dashboard" was ever visible.
 * It is now a grid of 44px chips: every destination and the current page are
 * visible without scrolling.
 *
 * F40: the orders list becomes one card per order instead of a stacked
 * label/value table.
 *
 * Roll back by removing this file's enqueue (plugin 0.4.0).
 */

@media (max-width: 959px) {
  body.ppv2-account-surface .woocommerce .woocommerce-MyAccount-navigation {
    overflow: visible !important;
    border-radius: 1.5rem !important;
    padding: 0.5rem !important;
  }

  body.ppv2-account-surface .woocommerce .woocommerce-MyAccount-navigation ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)) !important;
    gap: 0.35rem !important;
    width: 100% !important;
    overflow: visible !important;
  }

  body.ppv2-account-surface .woocommerce .woocommerce-MyAccount-navigation li {
    /* The Elementor widget sizes each tab to the full rail width. */
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body.ppv2-account-surface .woocommerce .woocommerce-MyAccount-navigation li a {
    min-height: 44px !important;
    border-radius: var(--pp-radius-pill) !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 0.85rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.ppv2-account-surface .woocommerce .woocommerce-MyAccount-navigation li a::before {
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
  }

  /* Log out stays last, quieter, across the full row. */
  body.ppv2-account-surface .woocommerce .woocommerce-MyAccount-navigation-link--customer-logout {
    grid-column: 1 / -1;
    margin: 0.15rem 0 0 !important;
    border-top: 1px solid var(--pp-color-border) !important;
    padding: 0.35rem 0 0 !important;
  }
}

@media (max-width: 480px) {
  body.ppv2-account-surface .woocommerce .woocommerce-MyAccount-navigation ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

}

@media (max-width: 380px) {
  body.ppv2-account-surface .woocommerce .woocommerce-MyAccount-navigation li a {
    gap: 0.5rem !important;
    padding-inline: 0.7rem !important;
  }
}

/* F40: one card per order. Woo's responsive table rules apply below 769px. */
@media (max-width: 768px) {
  body.ppv2-account-surface .woocommerce table.woocommerce-orders-table {
    display: block !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.ppv2-account-surface .woocommerce table.woocommerce-orders-table thead {
    display: none !important;
  }

  body.ppv2-account-surface .woocommerce table.woocommerce-orders-table tbody {
    display: grid !important;
    gap: 0.75rem;
  }

  body.ppv2-account-surface .woocommerce table.woocommerce-orders-table tbody tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "number status"
      "date date"
      "total actions";
    align-items: center;
    gap: 0.2rem 0.75rem;
    border: 1px solid var(--pp-color-border) !important;
    border-radius: 1.25rem !important;
    background: var(--pp-color-surface-soft) !important;
    padding: 1rem !important;
  }

  body.ppv2-account-surface .woocommerce table.woocommerce-orders-table tbody tr :is(th, td) {
    display: block !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* Each value reads on its own; drop Woo's "Label:" prefixes. */
  body.ppv2-account-surface .woocommerce table.woocommerce-orders-table tbody tr :is(th, td)::before {
    content: none !important;
    display: none !important;
  }

  body.ppv2-account-surface .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number {
    grid-area: number;
    color: var(--pp-color-foreground) !important;
    font-size: 1rem !important;
    font-weight: 650 !important;
  }

  body.ppv2-account-surface .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
    color: inherit !important;
    font-weight: inherit !important;
  }

  body.ppv2-account-surface .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-date {
    grid-area: date;
    color: var(--pp-color-text-muted) !important;
    font-size: 0.875rem !important;
  }

  body.ppv2-account-surface .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-status {
    grid-area: status;
    justify-self: end;
    border: 1px solid var(--pp-color-border-strong) !important;
    border-radius: var(--pp-radius-pill) !important;
    background: var(--pp-color-surface) !important;
    color: var(--pp-color-foreground) !important;
    font-size: var(--pp-text-meta, 0.75rem) !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    padding: 0.25rem 0.65rem !important;
    white-space: nowrap;
  }

  body.ppv2-account-surface .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-total {
    grid-area: total;
    margin-top: 0.4rem !important;
    color: var(--pp-color-text-soft) !important;
    font-size: 0.875rem !important;
  }

  body.ppv2-account-surface .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-total .amount {
    color: var(--pp-color-foreground);
    font-weight: 650;
  }

  body.ppv2-account-surface .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
    grid-area: actions;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 0.4rem !important;
  }

  body.ppv2-account-surface .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
    width: auto !important;
    min-height: 40px !important;
    padding: 0 1rem !important;
  }
}

/*
 * Status: a coloured dot in a neutral chip (softer palette, 2026-11-06), toned
 * by Woo's row status class. Grey for any other status.
 */
body.ppv2-account-surface .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-status::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px;
  height: 6px;
  margin-right: 0.4rem;
  border-radius: 999px;
  background: var(--pp-color-neutral-dot, #8a8693);
  vertical-align: 0.1em;
}

body.ppv2-account-surface .woocommerce table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status::before {
  background: var(--pp-color-success-dot, #2f9e6e);
}

body.ppv2-account-surface .woocommerce table.woocommerce-orders-table tr:is(.woocommerce-orders-table__row--status-processing, .woocommerce-orders-table__row--status-on-hold, .woocommerce-orders-table__row--status-pending) .woocommerce-orders-table__cell-order-status::before {
  background: var(--pp-color-warning-dot, #d97a1e);
}

body.ppv2-account-surface .woocommerce table.woocommerce-orders-table tr:is(.woocommerce-orders-table__row--status-failed, .woocommerce-orders-table__row--status-cancelled) .woocommerce-orders-table__cell-order-status::before {
  background: var(--pp-color-danger-dot, #c2412d);
}

/* F38: the address edit link drops to its own line as a full-width button. */
@media (max-width: 600px) {
  body.ppv2-account-surface .woocommerce .woocommerce-Address-title .edit {
    order: 2;
    flex: 1 1 100%;
    justify-content: center !important;
    width: 100% !important;
  }

  body.ppv2-account-surface .woocommerce .woocommerce-Addresses > .woocommerce-Address {
    display: flex !important;
    flex-direction: column;
  }

  body.ppv2-account-surface .woocommerce .woocommerce-Addresses > .woocommerce-Address > .woocommerce-Address-title {
    display: contents !important;
  }

  body.ppv2-account-surface .woocommerce .woocommerce-Addresses > .woocommerce-Address :is(h2, h3) {
    order: 0;
    margin-bottom: 0.5rem !important;
  }

  body.ppv2-account-surface .woocommerce .woocommerce-Addresses > .woocommerce-Address > address {
    order: 1;
    margin-bottom: 1rem !important;
  }

  body.ppv2-account-surface .woocommerce .woocommerce-Addresses > .woocommerce-Address .edit {
    order: 2;
  }
}