/**
 * Prime Printing — account page (Phase 8).
 *
 * Values are lifted from prime-printing-account.html's own <style> block,
 * translated onto this theme's token names (its --muted is tokens.css's
 * --ink-faint, its --sub is --ink-mid, its --sky-bg is --sky-wash — all
 * near-exact or exact matches, see tokens.css). No rounded corners, no
 * shadows — same flat/square system as the rest of the theme.
 */

/* ---- Account nav, restyled as a tab bar (still real WooCommerce endpoint
   links — one URL per tab, not a client-side single-page switcher) -------- */
.woocommerce-MyAccount-navigation {
  border-block-end: 1px solid var(--line);
  margin-block-end: var(--sp-6);
  overflow-x: auto;
}

.woocommerce-MyAccount-navigation ul {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: max-content;
}

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

.woocommerce-MyAccount-navigation a {
  display: block;
  padding: var(--sp-4);
  font-size: var(--fs-body-sm);
  color: var(--ink-mid);
  border-block-end: 2px solid transparent;
  white-space: nowrap;
  transition: var(--dur-fast);
}

.woocommerce-MyAccount-navigation a:hover {
  color: var(--navy);
}

.woocommerce-MyAccount-navigation li.is-active a {
  color: var(--navy);
  border-color: var(--sky);
  font-weight: var(--fw-medium);
}

/* ---- Dashboard: greeting + stat tiles ------------------------------------ */
.prime-account-hero {
  background: var(--navy);
  color: var(--on-navy);
  padding: var(--sp-7) var(--sp-6);
  margin-block-end: var(--sp-6);
}

.prime-account-hero__greeting {
  font-family: var(--display);
  font-size: 22px;
  font-weight: var(--fw-normal);
}

.prime-account-hero__since {
  font-size: var(--fs-body-sm);
  color: var(--on-navy-soft);
  margin-block-start: 4px;
}

.prime-account-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-block-end: var(--sp-8);
}

.prime-account-stat {
  background: var(--mist);
  padding: var(--sp-5);
}

.prime-account-stat__value {
  display: block;
  font-family: var(--display);
  font-size: 23px;
  color: var(--navy);
  letter-spacing: .03em;
}

.prime-account-stat__label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  margin-block-start: 2px;
}

@media (max-width: 820px) {
  .prime-account-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Orders tab ----------------------------------------------------------- */
.prime-order-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-end: var(--sp-5);
}

.prime-order-filter {
  border: 1px solid var(--line);
  background: none;
  font: inherit;
  font-size: var(--fs-body-sm);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  color: var(--ink-mid);
  transition: var(--dur-fast);
}

.prime-order-filter:hover { border-color: var(--sky); }

.prime-order-filter.is-active {
  background: var(--navy);
  color: var(--on-navy);
  border-color: var(--navy);
}

.prime-order {
  border: 1px solid var(--line);
  margin-block-end: var(--sp-4);
  transition: border-color var(--dur-fast);
}

.prime-order[hidden] { display: none; }

.prime-order:hover { border-color: var(--sky); }

.prime-order__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  flex-wrap: wrap;
  width: 100%;
  border: none;
  background: none;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.prime-order__number {
  font-family: var(--display);
  font-size: var(--fs-lead);
  color: var(--navy);
  letter-spacing: .05em;
}

.prime-order__date {
  font-size: var(--fs-body-sm);
  color: var(--ink-faint);
}

.prime-order__status {
  font-size: var(--fs-sm);
  padding: 5px 12px;
  font-weight: var(--fw-medium);
  background: var(--sky-wash);
  color: var(--navy);
}

.prime-order__status--delivered { background: var(--ok-wash); color: var(--ok); }
.prime-order__status--awaiting-quote { background: var(--warn-wash); color: var(--warn); }

.prime-order__total {
  margin-inline-start: auto;
  font-family: var(--display);
  font-size: var(--fs-lead);
  color: var(--navy);
  letter-spacing: .03em;
}

.prime-order__chevron {
  inline-size: 8px;
  block-size: 8px;
  border-inline-end: 2px solid var(--ink-faint);
  border-block-end: 2px solid var(--ink-faint);
  transform: rotate(45deg);
  transition: transform var(--dur);
}

.prime-order__summary[aria-expanded="true"] .prime-order__chevron {
  transform: rotate(225deg);
}

.prime-order__body {
  border-block-start: 1px solid var(--line);
  padding: var(--sp-5);
}

.prime-order__body[hidden] { display: none; }

.prime-order__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.prime-order__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-block-end: 1px solid var(--line);
}

.prime-order__item:last-child { border-block-end: none; }

.prime-order__item-thumb img {
  inline-size: 54px;
  block-size: 54px;
  object-fit: contain;
  background: var(--mist);
}

.prime-order__item-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-inline-size: 0;
}

.prime-order__item-name {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
}

.prime-order__item-spec {
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  margin-block-start: 2px;
}

.prime-order__item-qty {
  font-size: var(--fs-sm);
  color: var(--ink-mid);
  white-space: nowrap;
}

.prime-order__item-price {
  font-family: var(--display);
  font-size: var(--fs-body-sm);
  color: var(--navy);
  white-space: nowrap;
}

.prime-order__acts {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-block-start: var(--sp-4);
}

.prime-orders-empty {
  text-align: center;
  padding: var(--sp-11) var(--sp-4);
  color: var(--ink-mid);
}

.prime-orders-empty p { margin-block-end: var(--sp-4); }

/* ---- Buttons across the account page (Orders acts, Files acts, Get
   directions on the order-confirmation pickup block) ----------------------- */
.woocommerce-account .button,
.prime-order__acts .button,
.prime-account-files__actions .button,
.prime-pickup-location .button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1px solid var(--line);
  background: none;
  font: inherit;
  font-size: var(--fs-body-sm);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  color: var(--navy);
  transition: var(--dur-fast);
}

.woocommerce-account .button:hover,
.prime-order__acts .button:hover,
.prime-account-files__actions .button:hover,
.prime-pickup-location .button:hover {
  background: var(--navy);
  color: var(--on-navy);
  border-color: var(--navy);
}

.woocommerce-account .button.button--solid,
.button--solid {
  background: var(--navy);
  color: var(--on-navy);
  border-color: var(--navy);
}

.button--solid:hover { background: var(--navy-deep); }

/* ---- Addresses tab --------------------------------------------------------- */
.woocommerce-Address {
  border: 1px solid var(--line);
  padding: var(--sp-5);
}

.woocommerce-Address-title h3 {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  margin-block-end: var(--sp-3);
}

/* ---- Files tab -------------------------------------------------------------- */
.prime-account-files__intro {
  font-size: var(--fs-body-sm);
  color: var(--ink-mid);
  margin-block-end: var(--sp-5);
}

.prime-account-files__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.prime-account-files__row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  border: 1px solid var(--line);
  padding: var(--sp-4);
  margin-block-end: var(--sp-3);
}

.prime-account-files__ext {
  inline-size: 48px;
  block-size: 48px;
  background: var(--sky-wash);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: var(--fs-sm);
  color: var(--navy);
  letter-spacing: .06em;
  flex: none;
}

.prime-account-files__info {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.prime-account-files__name {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
}

.prime-account-files__meta {
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  margin-block-start: 2px;
}

.prime-account-files__actions {
  margin-inline-start: auto;
  display: flex;
  gap: var(--sp-2);
  flex: none;
}

/* ---- Details tab: company + notifications, injected into WooCommerce's own
   edit-account form -------------------------------------------------------- */
.prime-account-extra {
  border: 1px solid var(--line);
  padding: var(--sp-5);
  margin-block-end: var(--sp-4);
}

.prime-account-extra legend {
  font-size: var(--fs-sm);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sky);
  font-weight: var(--fw-medium);
  padding-inline-end: var(--sp-2);
}

.prime-account-extra__hint {
  font-size: var(--fs-sm);
  color: var(--ink-faint);
}

.prime-account-extra__checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  background: var(--mist);
  padding: var(--sp-3) var(--sp-4);
  margin-block-end: var(--sp-2);
}

.prime-account-extra__checkbox label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  cursor: pointer;
  font-size: var(--fs-body-sm);
  color: var(--ink-mid);
}

.prime-account-extra__checkbox input {
  inline-size: 18px;
  block-size: 18px;
  accent-color: var(--navy);
  margin-block-start: 2px;
  flex: none;
  cursor: pointer;
}

@media (max-width: 560px) {
  .prime-order__total { margin-inline-start: 0; width: 100%; justify-content: space-between; }
  .prime-account-files__row { flex-wrap: wrap; }
  .prime-account-files__actions { margin-inline-start: 0; width: 100%; }
}

/*
 * Desktop layout (2026-09-07, Reem's page review: "review the rest of the
 * pages and tidy their layout").
 *
 * Two things were wrong on a wide screen. WooCommerce core's own stylesheet
 * floats `.woocommerce-MyAccount-navigation` left at 30% and the content
 * right at 68% — this theme restyles that nav as a horizontal tab bar meant
 * to run full-width *above* the content (see the top of this file), but the
 * floats were never cancelled, so the tabs sat in a cramped side column
 * instead. And the whole account renders inside `.prime-prose`, the 760px
 * reading-width container shared with About/Contact — right for an essay,
 * a narrow band with empty page either side for a dashboard of stat tiles
 * and order cards. Same treatment cart.css and checkout.css now use.
 */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: 100%;
}

@media (min-width: 1100px) {
  body.woocommerce-account .prime-prose {
    max-inline-size: 1160px;
  }
}